/* ======================== HEADER STYLE BEGIN ============ */
/* .serficate-img styled the two certificate figures on the front page. That
   section was rebuilt as .fp-awards-grid / .fp-award (front-page.css) and the
   class is no longer emitted by any template, so the rules are removed rather
   than left describing markup that does not exist. */
/* ======================== HEADER STYLE END ============ */

#wpforms-756-field_6 input{width:auto !important;height:auto !important;padding:0px !important;}
#wpforms-756-field_6 label{color:#fff !important;}
#wpforms-756-field_6 label a{text-decoration: none !important;}
#wpforms-756-field_6 label a:hover{text-decoration: none !important;color:#fff !important;}
#wpforms-631-field_17 input{width:auto !important;height:auto !important;padding:0px !important;}
#wpforms-631-field_17 label{color:#2a2e34 !important;}
#wpforms-631-field_17 label a{text-decoration: none !important;}
#wpforms-631-field_17 label a:hover{text-decoration: none !important;color:#333 !important;}
/* ======================== FOOTER STYLE BEGIN ============ */

/* ======================== FOOTER STYLE END ============ */




/* ======================== POPUP FORM STYLE BEGIN ============ */
.popup-form {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    z-index: 999;
}
.popup-form-content {
    margin: auto;
    padding: 20px;
    width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    background: #fff;
}
.close-popup {
    font-weight: bold;
    right: 0px;
    position: absolute;
    top: 0;
    background: #333332;
    padding: 6px 7px 4px 7px;
}
.popup-logo.menu {
    z-index: 99;
}
@media only screen and (max-width: 1024px){
    #Gutenmodalpopup.popup-form {
        padding-top: 10px;
    }
	
}
@media only screen and (max-width: 900px){
	.site-topbar{display: none;}
    .foot-mob-hide{display: none !important;}
}
/* ======================== POPUP FORM STYLE END ============ */
/* ======================== MOBILE POPUP STYLE BEGIN ============ */
.overlay-mobile {
    height: 100%;
    width: 0;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    z-index: 999999;
}

/*
 * DER KOPF DES OVERLAYS.
 *
 * Vorher: ein orangefarbenes Kreuz, das oben rechts im Nichts schwebte, und
 * darunter eine Überschrift. Das Panel begann also mit einem Knopf und einem
 * Wort — nichts sagte, auf welcher Website man gerade ist.
 *
 * Jetzt eine Kopfzeile mit Logo und Schließen-Knopf, die beim Scrollen oben
 * stehen bleibt: Bei ~100 Links in der Leistungsliste ist ein Schließen-Knopf,
 * zu dem man erst zurückscrollen muss, praktisch keiner.
 */
.mob-nav-head {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    background-color: #fff;
    border-bottom: 1px solid #eceff2;
    /* Der Rand darf nicht durchscheinen, wenn Inhalt darunter durchläuft. */
    box-shadow: 0 6px 18px -14px rgba(29, 35, 38, .6);
}

.mob-nav-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.mob-nav-logo img,
.mob-nav-logo-img {
    flex: 0 0 auto;
    width: auto;
    height: 42px;
}

.mob-nav-logo-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mob-nav-logo-name {
    color: #1c1c1c;
    font-family: 'Inter';
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .01em;
}

.mob-nav-logo-claim {
    color: #8a8a8a;
    font-family: 'Inter';
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

.overlay-mobile .closebtn {
    /* Nicht mehr absolut: Der Knopf sitzt jetzt in der Kopfzeile. */
    position: static;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background-color: #f4f6f8;
    color: #1c1c1c;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.overlay-mobile .closebtn svg {
    display: block;
    width: 18px;
    height: 18px;
}

.overlay-mobile .closebtn:hover,
.overlay-mobile .closebtn:focus-visible {
    background-color: var(--brand-green);
    color: #fff;
}
.overlay-mobile a {
    text-decoration: none;
}
.overlay-content-mobile {
    position: relative;
    top: 0;
    width: 100%;
    text-align: center;
    margin-top: 0px;
}
/* ======================== MOBILE POPUP STYLE END ============ */


/* ======================== BREADCRUMB BEGIN ============ */
/*
 * One breadcrumb for the whole site, printed by frieden_breadcrumb() in
 * functions.php. Lives in this always-loaded stylesheet so every template gets
 * it without its own copy — each page used to carry a private variant.
 *
 * The markup is Yoast's shape whether or not Yoast is active: one outer
 * <span>, a <span> per crumb, separators between, and `.breadcrumb_last` on
 * the current page. These rules target that shape, so nothing changes visually
 * when the plugin is switched on.
 *
 * NO PILL. It used to be a white 46px-tall capsule with a border, a shadow and
 * a second orange capsule inside it for the current page — two nested
 * containers, at 15px type, for a line of secondary navigation. On a hero it
 * was the brightest object on the banner and sat directly above the H1, so it
 * read as the page's first heading. It is a line of small text now: the trail
 * is orientation, not a control, and it should be findable without being
 * loud.
 *
 * Every default call sits on a dark hero (only the three legal templates pass
 * fr-breadcrumb--onlight), so the base colours are the light ones and the
 * light-page variant re-inks them below.
 */
.fr-breadcrumb {
    display: block;
    margin: 0 0 18px;
}

.fr-breadcrumb p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 2px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: rgba(255, 255, 255, .7);
    font-family: 'Inter';
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    /* The scrim carries most of it, but the trail sits at the very top of the
       banner where a photograph can still be busy. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.fr-breadcrumb p > span {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 2px;
    padding: 0;
}

.fr-breadcrumb a {
    display: inline-flex;
    align-items: center;
    padding: 2px 0;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: color .2s ease;
}

.fr-breadcrumb a:hover,
.fr-breadcrumb a:focus-visible {
    color: #F2A820;
}

.fr-breadcrumb a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 3px;
}

.fr-bc-sep {
    display: inline-flex;
    padding: 0 7px;
    color: rgba(255, 255, 255, .4);
    font-size: 14px;
    line-height: 1;
}

/* Current page: still the orange, but as weight and colour rather than as a
   chip. A filled capsule around the last crumb made it look clickable — it is
   the one crumb that is not. */
.fr-breadcrumb .breadcrumb_last {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: none;
    border-radius: 0;
    color: #F5B845;
    font-weight: 600;
}

/* The three legal templates, which are plain documents on white. Same trail,
   re-inked. */
.fr-breadcrumb--onlight p {
    padding: 0;
    background: none;
    box-shadow: none;
    color: #6b7280;
    text-shadow: none;
}

.fr-breadcrumb--onlight a {
    color: #6b7280;
}

.fr-breadcrumb--onlight .fr-bc-sep {
    color: #c9ced8;
}

.fr-breadcrumb--onlight .breadcrumb_last {
    color: #b8790a;
}

@media only screen and (max-width: 767px) {
    .fr-breadcrumb {
        margin-bottom: 14px;
    }

    .fr-breadcrumb p {
        font-size: 12px;
    }

    .fr-bc-sep {
        padding: 0 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fr-breadcrumb a {
        transition: none;
    }
}
/* ======================== BREADCRUMB END ============ */

/* ======================== SITE HEADER BEGIN ============ */
.skip-link.screen-reader-text {
    position: absolute;
    left: -9999px;
}
.skip-link.screen-reader-text:focus {
    left: 16px;
    top: 16px;
    z-index: 1000000;
    width: auto;
    height: auto;
    padding: 10px 18px;
    background: #fff;
    color: #444242;
    border-radius: 6px;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .5);
}

/* ---------- top bar ---------- */
.site-topbar {
    background-color: #000;
    color: #fff;
    font-family: 'Inter';
    font-size: var(--fs-sm);
}
.site-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 26px;
    padding: 9px 15px;
}
.site-topbar-contact {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 0;
    padding: 0;
}

.site-topbar-contact li {
    color: #fff !important; /* beats theme.css's global li colour */
    font-size: 14px;
}

.site-topbar a,
.site-topbar-address {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    transition: color .2s ease;
}
.site-topbar a:hover,
.site-topbar a:focus-visible {
    color: #F2A820;
}
.site-topbar .hd-ico {
    display: inline-flex;
    flex: 0 0 auto;
    color: #F2A820;
}
.site-topbar .hd-ico svg {
    display: block;
    width: 15px;
    height: 15px;
}

/* ---------- main bar ----------

   THE HEADER HEIGHT IS DRIVEN BY ONE NUMBER: --hd-logo-h.

   The bar was ~122px tall, and the reason is arithmetic rather than styling:
   the logo file is 750x700, so it is very nearly square. Capping it by WIDTH
   (the old `max-width: 110px`) therefore sets a ~103px HEIGHT, and the bar can
   never be shorter than that plus the tagline underneath it. No amount of
   padding tuning gets round it — at a given logo size the header height is
   fixed.

   So the size is a variable now, and everything else measures off it:

     --hd-logo-h   height of the mark. The single knob. Raise it and the bar
                   grows with it correctly instead of overflowing; lower it and
                   the bar tightens. Width follows the aspect ratio.
     --hd-bar-pad  breathing room above and below the lockup.

   The default keeps the mark large (86px tall / ~92px wide, against 103x110
   before) while bringing the bar to ~108px. The rest of the height is bought
   back on scroll: `.sticky` below drops the mark to 52px and hides the
   tagline, so the header a visitor actually browses under is ~68px. That is
   the usual answer to "the client wants a big logo but the header is too
   tall" — full size at the top of the page where it makes the first
   impression, compact for the rest of the session. */
.site-header {
    background-color: #fff;
    border-bottom: 1px solid #f0f2f5;
    --hd-logo-h: 86px;
    --hd-bar-pad: 6px;
}
/*
 * The nav is centred in the SPACE BETWEEN the logo and the actions, not on the
 * geometric centre of the row.
 *
 * Both have been tried. Hard against the logo (the original flex row) left it
 * crowding the mark. A `1fr auto 1fr` grid put it on the exact centre line of
 * the page — but the logo fills only ~90px of its 337px column while the
 * actions cluster nearly fills its own, so the whitespace either side of the
 * nav came out at roughly 155px and 39px. Geometrically centred, visibly not.
 *
 * Centring it in the gap makes those two margins equal, which is what actually
 * reads as centred. The nav takes the free space, the list centres inside it,
 * and the actions keep the auto margin that pins them right.
 */
.site-header-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: var(--hd-bar-pad) 15px;
}
/* Logo lockup: mark on top, tagline centred underneath it. The column lives
   on the wrapper, not the anchor, because with a custom logo set the anchor
   is WordPress's own .custom-logo-link and the tagline is its sibling. */
.site-header-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}
.site-header-logo-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    line-height: normal;
}
/* Capped by HEIGHT, not width — see the note above. width:auto keeps the
   aspect ratio, and the intrinsic width/height attributes on the tag mean the
   space is still reserved before the file loads (no layout shift). */
.site-header-logo img,
.site-header-logo .custom-logo {
    display: block;
    width: auto;
    max-width: none;
    height: var(--hd-logo-h);
    transition: height .3s ease;
}

.site-header-logo-name {
    display: block;
    color: #1c1c1c;
    font-family: 'Inter';
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.1;
}

/* Tight leading and a small negative margin: the mark's own file has a little
   clear space at its foot, so a normal gap here reads as a large one. */
.site-header-logo-tag {
    display: block;
    margin-top: -2px;
    color: #6b6a68;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: .015em;
    white-space: nowrap;
    transition: opacity .25s ease, max-height .3s ease, margin .3s ease;
}

/* ---------- navigation ---------- */
/* Takes the free space; the list centres within it (see .site-nav-list). */
.site-nav {
    flex: 1 1 auto;
    min-width: 0;
}
.site-nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin: 0;
    padding: 0;
}
.site-nav-list > li {
    position: relative;
    color: #444242 !important; /* beats theme.css's global li colour */
}
/* The whole bar is one flex line, so every nav link is already vertically
   centred against the logo — the padding here is the hit area, and it is
   symmetrical so the underline below sits at a predictable distance. */
.site-nav-list > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 11px 0;
    color: #444242;
    font-family: 'Inter';
    /* Sentence case. Uppercase forced every label wider (it is what made the
       five-item row need the fluid tightening below) and set the nav in a
       different voice from every other piece of type on the site. */
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
/* Colour alone was carrying the active and hover states, which on a row of
   uppercase labels is a weak signal — the orange "STARTSEITE" read as a
   different kind of link rather than as the current page. This adds a rule
   that grows from the centre, so hover and current page are unmistakable. */
.site-nav-list > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background-color: #F2A820;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.site-nav-list > li > a:hover,
.site-nav-list > li > a:focus-visible,
.site-nav-list > li.current-menu-item > a {
    color: #F2A820;
}
.site-nav-list > li > a:hover::after,
.site-nav-list > li > a:focus-visible::after,
.site-nav-list > li.current-menu-item > a::after,
.site-nav-list > li.has-sub:focus-within > a::after,
.site-nav-list > li.has-mega.is-open > a::after {
    transform: scaleX(1);
}
.site-nav-list > li > a:focus-visible {
    outline: 2px solid #F2A820;
    outline-offset: 4px;
    border-radius: 3px;
}
.hd-caret {
    display: inline-flex;
    transition: transform .25s ease;
}
.hd-caret svg {
    display: block;
    width: 13px;
    height: 13px;
}
.site-nav-list > li.has-sub:hover > a .hd-caret,
.site-nav-list > li.has-sub:focus-within > a .hd-caret {
    transform: rotate(180deg);
}

/* ---------- dropdown ----------
   Used by "Standorte", whose three items deep-link into the region tabs on
   /standorte/. Each row is an icon, the region, how many places it covers and
   a chevron — the same shape as a mega-menu tab, so the two panels in the
   header are recognisably the same family rather than one designed component
   and one bare list of links. */
.site-nav-list .sub-menu {
    position: absolute;
    top: calc(100% - 2px);
    left: -16px;
    z-index: 1000;
    list-style: none;
    min-width: 268px;
    margin: 0;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #ecdfcb;
    border-radius: 14px;
    box-shadow: 0 26px 56px -20px rgba(66, 47, 12, .3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.site-nav-list > li.has-sub:hover > .sub-menu,
.site-nav-list > li.has-sub:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.site-nav-list .sub-menu li {
    color: #444242 !important;
}
.site-nav-list .sub-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #24282e !important; /* beats theme.css's orange global a colour */
    font-family: 'Inter';
    text-decoration: none;
    transition: background-color .2s ease;
}
.site-nav-list .sub-menu a:hover,
.site-nav-list .sub-menu a:focus-visible {
    background-color: #fdf7ec;
}
.site-nav-list .sub-menu a:focus-visible {
    outline: 2px solid #F2A820;
    outline-offset: -2px;
}
.sub-menu-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background-color: var(--icon-bg-control);
    color: var(--icon-fg-control);
    transition: background-color .2s ease, color .2s ease;
}
.sub-menu-ico svg {
    display: block;
    width: 17px;
    height: 17px;
}
.site-nav-list .sub-menu a:hover .sub-menu-ico {
    background-color: #F2A820;
    color: #fff;
}
.sub-menu-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.sub-menu-label {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
}
.sub-menu-note {
    color: #a08a63;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}
.sub-menu-arrow {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: #d9c6a4;
    transition: transform .2s ease, color .2s ease;
}
.sub-menu-arrow svg {
    display: block;
    width: 13px;
    height: 13px;
}
.site-nav-list .sub-menu a:hover .sub-menu-arrow {
    transform: translateX(3px);
    color: #F2A820;
}

/* ---------- mega menu ----------

   Tabs across the top, a four-column link grid under them, and a contact bar
   closing the panel.

   This is the whole component now. It used to be only a positioning shell here
   with the panel itself styled by the generic `.mega / .tabs / .tab / .panel /
   .item-grid / .item` rules in guest-style.css — but those describe a 320px
   left rail with the tabs stacked in it, which is the layout being replaced.
   Rather than fight them with overrides, the markup carries `hd-mega-` classes
   and is styled here from scratch. guest-style.css is untouched and still
   serves the standalone markup it was written for. */
.site-header {
    /* Anchor for .mega-wrap, so the panel can span the full header width
       rather than the width of the nav item. */
    position: relative;
}
/* Overrides `position: relative` on `.site-nav-list > li`. Without this the
   panel would be positioned against the ~150px-wide list item. */
.site-nav-list > li.has-mega {
    position: static;
}
.mega-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    /* No top padding: the panel hangs directly off the header's bottom edge.
       The 10px gap that was here read as a seam between two separate objects,
       and it also meant the pointer left the panel on the way down from the
       nav item. */
    padding: 0 15px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.site-nav-list > li.has-mega.is-open > .mega-wrap {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .28s ease, transform .28s ease, visibility 0s;
}
/*
 * The panel is WARM, not white.
 *
 * A white panel hanging off a white header with only a hairline between them
 * merged into one pale slab — the panel had no edge of its own. Moving it into
 * the brand's cream family gives it a boundary without a heavier border, and
 * the warm tab strip means the first thing under the header is already a
 * different colour.
 *
 * The link list underneath stays white so the service names read at full
 * contrast: the panel is bookended by warm strips rather than tinted right
 * through.
 */
.hd-mega {
    max-width: 1350px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ecdfcb;
    /* Square at the top so it meets the header cleanly; the header already
       draws the line between them. */
    border-top: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 30px 70px -18px rgba(66, 47, 12, .28);
    overflow: hidden;
}

/* ---------- tab row ---------- */

.hd-mega-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 10px 14px 0;
    background-image: linear-gradient(180deg, #f7eddd 0%, #fdf7ee 100%);
    border-bottom: 1px solid #eee2ce;
}
/* Each tab is an equal share of the row, so the five sit on a regular rhythm
   instead of being sized by how long their labels happen to be. */
.hd-mega-tab {
    position: relative; /* anchors the ::after indicator below */
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 12px;
    margin: 0;
    border: 0;
    border-radius: 10px 10px 0 0;
    background: transparent;
    color: #5b6374;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease, color .2s ease;
}
/* The indicator. A pseudo-element rather than a border so it can scale in from
   the centre, and so it overlaps the row's own bottom border instead of
   stacking a second line under it. */
.hd-mega-tab::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: #F2A820;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.hd-mega-tab:hover {
    background-color: rgba(255, 255, 255, .62);
    color: #24282e;
}
/* White against the warm strip — the active tab reads as lifted out of the
   row and joined to the panel below it. */
.hd-mega-tab.is-active {
    background-color: #fff;
    color: #24282e;
    box-shadow: 0 -2px 10px -4px rgba(66, 47, 12, .2);
}
.hd-mega-tab.is-active::after {
    transform: scaleX(1);
}
.hd-mega-tab:focus-visible {
    outline: 2px solid #F2A820;
    outline-offset: -3px;
}
.hd-mega-tab-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background-color: #ffeac2;
    color: #24282e;
    transition: background-color .2s ease, color .2s ease;
}
.hd-mega-tab-icon svg {
    display: block;
    width: 17px;
    height: 17px;
}
.hd-mega-tab.is-active .hd-mega-tab-icon {
    background-color: #F2A820;
    color: #fff;
}
.hd-mega-tab-label {
    flex: 0 1 auto;
    min-width: 0;
}
.hd-mega-tab-count {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .82);
    color: #8a7350;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    transition: background-color .2s ease, color .2s ease;
}
.hd-mega-tab.is-active .hd-mega-tab-count,
.hd-mega-tab:hover .hd-mega-tab-count {
    background-color: #ffeac2;
    color: #24282e;
}

/* ---------- panels ---------- */

.hd-mega-body {
    padding: 24px 26px 8px;
    /* The tallest tab holds 10 items over 3 rows. Reserving that height stops
       the panel resizing as tabs are switched, which otherwise makes the
       contact bar below jump every time. */
    min-height: 210px;
}
.hd-mega-panel {
    display: none;
    animation: hd-mega-fade .25s ease;
}
.hd-mega-panel.is-active {
    display: block;
}
@keyframes hd-mega-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hd-mega-panel-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 13px;
    border-bottom: 1px solid #f3e9da;
}
/* Replaces the "Alle Leistungen ansehen" link that used to sit on the right of
   this row — it pointed at /leistungen/, which does not exist. A count says
   something true about what follows, instead of linking somewhere for the sake
   of having a link. */
.hd-mega-panel-count {
    color: #a08a63;
    font-family: 'Inter';
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}
.hd-mega-panel-title {
    width: auto; /* theme.css sets width:100% on every heading */
    margin: 0;
    color: #24282e;
    font-family: 'Inter';
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}
/* The .hd-mega-panel-all rules that stood here styled that removed link. */

/* Up to four columns — the width freed by dropping the left rail. Column-major
   so the list reads down each column, the way a printed index does, rather
   than left-to-right across four unrelated names.

   Only the ROWS are declared. --hd-rows is set per panel in header.php as
   ceil(items / 4), and `grid-auto-columns` sizes whatever columns that
   produces to an equal share. Declaring four columns instead would leave the
   nine-item tab with three full columns and one empty one. */
.hd-mega-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--hd-rows, 3), auto);
    grid-auto-columns: minmax(0, 1fr);
    align-content: start;
    gap: 2px 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hd-mega-list > li {
    /* --hd-c / --hd-r come from header.php, which balances the columns so a
       13-item tab splits 4/3/3/3 instead of leaving one item alone. */
    grid-column: var(--hd-c, auto);
    grid-row: var(--hd-r, auto);
    color: inherit !important; /* beats theme.css's global li colour */
    min-width: 0;
}
.hd-mega-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 8px;
    color: #24282e !important; /* beats theme.css's orange global a colour */
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color .18s ease;
}
.hd-mega-item:hover,
.hd-mega-item:focus-visible {
    background-color: #ffeac2;
}
.hd-mega-item:focus-visible {
    outline: 2px solid #F2A820;
    outline-offset: 2px;
}
.hd-mega-item .arrow {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #f2a820;
    transition: transform .18s ease, color .18s ease;
}
.hd-mega-item .arrow svg {
    display: block;
    width: 13px;
    height: 13px;
}
.hd-mega-item:hover .arrow {
    transform: translateX(3px);
    color: #24282e;
}

/* ---------- contact bar ---------- */

.hd-mega-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 26px;
    padding: 16px 26px;
    /* Matches the tab strip, so the panel closes at the bottom the same way it
       opens at the top. */
    background-image: linear-gradient(180deg, #fdf7ee 0%, #f7eddd 100%);
    border-top: 1px solid #eee2ce;
}
.hd-mega-foot-note {
    margin: 0;
    color: #6b7387;
    font-size: 14px;
    line-height: 1.5;
}
.hd-mega-foot-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 22px;
}
/* Two-line contact block: what it is on top, the value under it. Reads as
   information rather than as two more buttons competing with the CTA. */
.hd-mega-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 9px;
    text-decoration: none;
    transition: background-color .2s ease;
}
.hd-mega-contact:hover,
.hd-mega-contact:focus-visible {
    background-color: rgba(255, 255, 255, .8);
}
.hd-mega-contact:focus-visible {
    outline: 2px solid #F2A820;
    outline-offset: 1px;
}
.hd-mega-contact-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #fdf1de;
    color: #F2A820;
}
.hd-mega-contact-ico svg {
    display: block;
    width: 17px;
    height: 17px;
}
/* WhatsApp keeps its brand green, as it does in the floating buttons. */
.hd-mega-contact--wa .hd-mega-contact-ico {
    background-color: #e7f9ee;
    color: #2F5D34;
}
.hd-mega-contact-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.hd-mega-contact-label {
    color: #8a91a1;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.hd-mega-contact-value {
    color: #24282e;
    font-size: 15px;
    font-weight: 700;
}
.hd-mega-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    background-color: #F2A820;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px -10px rgba(242, 168, 32, .95);
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.hd-mega-cta:hover,
.hd-mega-cta:focus-visible {
    background-color: #24282e;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -12px rgba(26, 34, 56, .6);
}
.hd-mega-cta:focus-visible {
    outline: 2px solid #24282e;
    outline-offset: 2px;
}
.hd-mega-cta-ico {
    display: inline-flex;
    transition: transform .25s ease;
}
.hd-mega-cta-ico svg {
    display: block;
    width: 16px;
    height: 16px;
}
.hd-mega-cta:hover .hd-mega-cta-ico {
    transform: translateX(3px);
}

/* Between 1025px and ~1180px the five labels plus their icons and counts stop
   fitting on one row. The count is the first thing that can go, then the icon:
   the label is the part that names the tab. */
@media only screen and (max-width: 1180px) {
    .hd-mega-tab {
        gap: 7px;
        padding: 12px 8px;
        font-size: 13px;
    }
    .hd-mega-tab-count {
        display: none;
    }
    /* Back to row flow to drop a column: under column flow, narrowing the
       columns does nothing — the browser keeps filling --hd-rows rows and
       invents as many columns as it needs, so the grid would just overflow. */
    .hd-mega-list {
        grid-auto-flow: row;
        grid-template-rows: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* The desktop placement assumes four columns; let row flow place them. */
    .hd-mega-list > li {
        grid-column: auto;
        grid-row: auto;
    }
}

@media only screen and (max-width: 1080px) {
    .hd-mega-tab-icon {
        display: none;
    }
}


/* ---------- right-hand cluster ----------
   Language switch, hairline, then the two CTAs — one unit pinned to the right
   edge. Grouping them is what stops the language switch floating loose in the
   middle of the row. */
.site-header-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 14px;
    margin-left: auto;
}
.site-header-divider {
    width: 1px;
    height: 26px;
    background-color: #e6e8ee;
}

/* ---------- language switch ----------
 *
 * Rendered entirely by the GTranslate plugin ([gtranslate] in header.php):
 * the plugin shows the selected language and its dropdown, styled by the
 * custom CSS in the plugin settings. This only places the widget in the
 * header row.
 *
 * The wrapper is .site-lang-gt, not .site-lang: the old .site-lang markup
 * was rebuilt by a script in custom.js into a copy of the switcher that
 * never updated, so the header kept showing the language from page load.
 */
.site-lang-gt {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.site-lang-gt #google_translate_element2,
.site-lang-gt .goog-te-gadget {
    display: none !important;
}

/*
 * Design: a white pill (flag + code + caret) with a dropdown underneath,
 * matching the rest of the header's controls.
 *
 * The plugin's settings CSS is injected at runtime, AFTER this file, so
 * every rule here is one class more specific than the plugin's, and uses
 * !important only where the plugin's own rule does.
 */
.site-lang-gt .gtranslate_wrapper {
    position: relative;
    display: inline-block;
    height: auto;
    padding: 0;
    border-radius: 0;
    font-family: 'Inter';
    line-height: 1;
}
/* Invisible bridge over the gap between pill and dropdown, so the hover is
   not lost while the pointer travels down to the other language. */
.site-lang-gt .gtranslate_wrapper::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}

/* ---- shared by the pill and the dropdown item ---- */
.site-lang-gt .gtranslate_wrapper a.glink {
    align-items: center;
    gap: 8px;
    color: #24282e !important;
    font-family: 'Inter';
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}
.site-lang-gt .gtranslate_wrapper a.glink img {
    display: block;
    width: 20px !important;
    height: 20px !important;
    margin: 0;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover;
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}
.site-lang-gt .gtranslate_wrapper a.glink span {
    margin: 0 !important;
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 700;
}

/* ---- the pill: the currently selected language ---- */
.site-lang-gt .gtranslate_wrapper a.glink.gt-current-lang {
    display: inline-flex;
    height: 40px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid #e6e8ee;
    border-radius: 999px;
    background-color: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
/*
 * Open state: on hover, or when a language link has KEYBOARD focus.
 *
 * Not :focus-within. A clicked link keeps focus after the click, so with
 * :focus-within the dropdown stayed open (and the pill orange) after a
 * language had been picked, until the visitor clicked somewhere else.
 * :focus-visible only matches keyboard focus, so a mouse click leaves it
 * closed once the pointer moves away.
 */
.site-lang-gt .gtranslate_wrapper:hover a.glink.gt-current-lang,
.site-lang-gt .gtranslate_wrapper:has(a.glink:focus-visible) a.glink.gt-current-lang {
    border-color: #F2A820;
    box-shadow: 0 6px 16px -10px rgba(242, 168, 32, .9);
}
/* The orange border is the focus indicator; the browser's own ring on top of
   it drew the doubled outline. */
.site-lang-gt .gtranslate_wrapper a.glink:focus {
    outline: none;
}
/* Caret: the plugin CSS puts an image here (a different one when the header
   is scrolled and on page 7). Replaced by one chevron drawn in CSS, grey like
   the nav carets, which turns over while the dropdown is open. */
.site-lang-gt .gtranslate_wrapper a.glink.gt-current-lang::after {
    content: "" !important;
    display: block;
    width: 13px;
    height: 13px;
    margin: 0;
    position: static;
    background-color: #8a91a1;
    filter: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .25s ease;
}
.site-lang-gt .gtranslate_wrapper:hover a.glink.gt-current-lang::after,
.site-lang-gt .gtranslate_wrapper:has(a.glink:focus-visible) a.glink.gt-current-lang::after {
    transform: rotate(180deg);
}

/* ---- the dropdown: the other language ----
   Exactly as wide as the pill and directly under it, with the same border,
   height and inner spacing, so its flag and code sit in line with the
   pill's. */
.site-lang-gt .gtranslate_wrapper a.glink:not(.gt-current-lang) {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    background-color: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 12px;
    box-shadow: 0 16px 34px -14px rgba(29, 35, 38, .35);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.site-lang-gt .gtranslate_wrapper:hover a.glink:not(.gt-current-lang),
.site-lang-gt .gtranslate_wrapper:has(a.glink:focus-visible) a.glink:not(.gt-current-lang) {
    display: flex;
    padding: 0 12px;
    animation: site-lang-gt-in .18s ease;
}
.site-lang-gt .gtranslate_wrapper a.glink:not(.gt-current-lang):hover,
.site-lang-gt .gtranslate_wrapper a.glink:not(.gt-current-lang):focus-visible {
    background-color: #fdf7ec;
    border-color: #F2A820;
    color: #F2A820 !important;
}
@keyframes site-lang-gt-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .site-lang-gt .gtranslate_wrapper a.glink,
    .site-lang-gt .gtranslate_wrapper a.glink.gt-current-lang::after {
        transition: none;
    }
    .site-lang-gt .gtranslate_wrapper:hover a.glink:not(.gt-current-lang),
    .site-lang-gt .gtranslate_wrapper:has(a.glink:focus-visible) a.glink:not(.gt-current-lang) {
        animation: none;
    }
}

/* ---------- header buttons ---------- */
.site-header-cta {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The call action, as an icon. Same height as the button beside it so the two
   sit on one line, and circular so it does not read as a second button. */
.hd-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid #e0e3e8;
    border-radius: 50%;
    background-color: #fff;
    color: #F2A820;
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hd-call svg {
    display: block;
    width: 19px;
    height: 19px;
}
.hd-call:hover,
.hd-call:focus-visible {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -12px rgba(47, 93, 52, .8);
}
.hd-call:focus-visible {
    outline: 2px solid #24282e;
    outline-offset: 2px;
}

/* A fixed height on both, rather than padding on both: the two labels are
   different lengths and the outline button carries a border the solid one
   did not, so padding alone left them measurably different heights sitting
   side by side. */
.hd-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border-radius: 8px;
    font-family: 'Inter';
    /* Explicit, not var(--fs-sm). That token is documented in theme.css as the
       "secondary" step below body copy, but it is currently set to 17px — the
       same as --fs-base — so these uppercase buttons were rendering at body
       size. Together they measured ~390px, which is most of the reason the row
       did not fit on a laptop. 14px is what the design shows and it matches
       the top of the laptop band above, so nothing jumps at the boundary. */
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease,
                border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.hd-btn:hover,
.hd-btn:focus-visible {
    transform: translateY(-2px);
}
.hd-btn:active {
    transform: translateY(0);
}
/* Currently unused — the header carries one solid button and the round call
   icon. Kept as the variant to reach for if a second header button is ever
   added, rather than reinvented. */
.hd-btn--outline {
    border: 1px solid #d5d8dc;
    background: #fff;
    color: #1c1c1c;
}
.hd-btn--outline:hover,
.hd-btn--outline:focus-visible {
    background: #fff;
    border-color: #F2A820;
    color: #F2A820;
    box-shadow: 0 10px 22px -12px rgba(29, 35, 38, .5);
}
.hd-btn--solid {
    border: 1px solid #F2A820;
    background: #F2A820;
    color: #fff;
    box-shadow: 0 6px 16px -10px rgba(242, 168, 32, .9);
}
/* Wie jede Schaltfläche der Website: Ruhezustand orange, überfahren grün.
   Der Schatten wechselt mit — sonst steht ein oranger Schein unter einer
   grünen Fläche. */
.hd-btn--solid:hover,
.hd-btn--solid:focus-visible {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
    box-shadow: 0 12px 26px -10px rgba(47, 93, 52, .8);
}
/* .hd-btn-ico is unused too: the one header button is a plain label now. Same
   reasoning as --outline above. */
.hd-btn-ico {
    display: inline-flex;
    flex: 0 0 auto;
}
.hd-btn-ico svg {
    display: block;
    width: 16px;
    height: 16px;
}
.hd-btn:focus-visible {
    outline: 2px solid #1c1c1c;
    outline-offset: 2px;
}

/* ---------- scroll compaction ----------
   custom.js adds .sticky to .topheaderbar (the same element as .site-header)
   once the page is scrolled. Redefining the two variables here is the whole
   mechanism: the mark, the lockup and the bar all measure off them, so the
   header shrinks as one piece rather than needing a second set of rules per
   element.

   The compact mark is 66px and the tagline stays with it, so the full lockup
   — dove, wordmark and "Alles für den Frieden" — is legible while scrolling
   rather than only at the top of the page. That puts the sticky bar at ~88px
   against ~108px at rest. A smaller saving than a tagline-less 52px mark
   would give, but the brand line is the point of the lockup; dropping it to
   save 25px was the wrong trade. */
.site-header.sticky {
    --hd-logo-h: 66px;
    --hd-bar-pad: 5px;
}
/* The buttons still tighten a little — they have padding to spare where the
   logo does not. */
.site-header.sticky .hd-btn {
    height: 40px;
}
.site-header.sticky .hd-call {
    width: 40px;
    height: 40px;
}

/* ---------- burger ---------- */
.site-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    border: 1px solid #eceff2;
    border-radius: 8px;
    background: #fff;
    color: #1c1c1c;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.site-nav-toggle:hover,
.site-nav-toggle:focus-visible {
    background: #fdf7ec;
    color: #F2A820;
}
.site-nav-toggle .hd-ico svg {
    display: block;
    width: 22px;
    height: 22px;
}

/* =============================================================
   LAPTOP HEADER  (1025px – 1430px)

   The header row is one nowrap flex line: logo lockup + nav + language
   + two CTA buttons. Nothing in it can wrap, so it either fits or it
   overflows — there is no in-between.

   Two things used to make it overflow on every laptop:

   1. theme.css caps .alignwide at 1200px for viewports between 1200px
      and 1430px. So a 1280px or 1366px laptop gets a 1200px container,
      not the 1350px one the full-size header needs.
   2. The only tightening rule here was `max-width: 1200px`, which by
      definition never fires in that 1201–1430px band. The full-size
      header was therefore being drawn inside the narrowed container.

   Measured, the row needs ~1269px at full size against ~1170px of
   usable width in that band — and below 1200px the container follows
   the viewport, so it only gets tighter. The result was the nav and
   the CTA buttons running past the right edge.

   Rather than another hard step (which just moves the cliff), the row
   scales fluidly across the whole band: each value interpolates from
   its tightest at 1025px to its full size at 1430px. Above 1430px the
   container jumps to 1350px and the base rules take over with room to
   spare; below 1025px the nav and CTAs are hidden entirely and
   navigation moves to the fixed bottom bar (see the next block).
   ============================================================= */
@media only screen and (min-width: 1025px) and (max-width: 1430px) {
    /* The logo scales with the band too now. It is the widest fixed object in
       the row, and with a fifth nav item ("Standorte") added there is less
       slack than the four-item row this band was originally measured for. */
    .site-header {
        --hd-logo-h: clamp(62px, calc(62px + 24 * (100vw - 1025px) / 405), 86px);
    }

    /* The sticky size has to scale with the band as well. Left at the flat
       66px it would be LARGER than the resting mark at the narrow end, so
       scrolling would grow the header instead of tightening it. Tracks ~20px
       under the resting size across the whole band. */
    .site-header.sticky {
        --hd-logo-h: clamp(52px, calc(52px + 14 * (100vw - 1025px) / 405), 66px);
    }

    .site-header-inner {
        gap: clamp(10px, calc(10px + 12 * (100vw - 1025px) / 405), 22px);
    }

    .site-nav {
        margin-left: clamp(0px, calc(8 * (100vw - 1025px) / 405), 8px);
    }

    .site-nav-list {
        gap: clamp(13px, calc(13px + 11 * (100vw - 1025px) / 405), 24px);
    }

    /* Sentence case already bought back most of the width uppercase was
       costing, so the type only has to step down a little here. */
    .site-nav-list > li > a {
        font-size: clamp(14px, calc(14px + 2 * (100vw - 1025px) / 405), 16px);
    }

    .site-header-actions {
        gap: clamp(9px, calc(9px + 5 * (100vw - 1025px) / 405), 14px);
    }

    .site-header-cta {
        gap: clamp(7px, calc(7px + 3 * (100vw - 1025px) / 405), 10px);
    }

    .hd-btn {
        height: clamp(38px, calc(38px + 6 * (100vw - 1025px) / 405), 44px);
        padding: 0 clamp(13px, calc(13px + 9 * (100vw - 1025px) / 405), 22px);
    }

    .hd-call {
        width: clamp(38px, calc(38px + 6 * (100vw - 1025px) / 405), 44px);
        height: clamp(38px, calc(38px + 6 * (100vw - 1025px) / 405), 44px);
    }

    /* First thing to go when the row gets tight — the label still says what
       the button does. */
    .hd-btn-ico {
        display: none;
    }
}

/* The trigger shows one language whatever the total, so the switch costs the
   same width at every breakpoint and needs no tightening rule here. */

@media only screen and (max-width: 1024px) {
    /*
     * Mobile header: the logo lockup and the language switch, nothing else.
     * Navigation moves entirely to the fixed bottom bar (.footer-menus) and
     * its two overlays — #myservice for the full service list, #mymenu for
     * the general pages — which is why the burger is hidden here too rather
     * than duplicating that navigation in the header.
     */
    .site-nav,
    .site-nav-toggle,
    .site-header-cta,
    .site-header-divider {
        display: none;
    }
    /* .site-header-actions already carries margin-left:auto, so the language
       switch lands at the right edge and the logo stays at the left. */
    .site-header {
        --hd-logo-h: 62px;
        --hd-bar-pad: 8px;
    }
    .site-header-inner {
        gap: 12px;
    }
    /* No sticky compaction below the desktop breakpoint: the bar is already
       compact here, and shrinking it further on scroll only makes the tap
       target for the logo smaller. */
    .site-header.sticky {
        --hd-logo-h: 62px;
        --hd-bar-pad: 8px;
    }
}

@media only screen and (max-width: 767px) {
    .site-topbar-inner {
        justify-content: center;
        text-align: center;
    }
    .site-topbar-contact {
        justify-content: center;
    }

.site-header-logo-name {
        font-size: var(--fs-base);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-topbar a,
    .site-nav-list > li > a,
    .site-nav-list > li > a::after,
    .site-nav-list .sub-menu,
    .site-nav-list .sub-menu a,
    .site-header-logo img,
    .site-header-logo-tag,
    .hd-caret,
    .hd-btn,
    .hd-call,
    .site-nav-toggle,
    .mega-wrap,
    .hd-mega-tab,
    .hd-mega-tab::after,
    .hd-mega-tab-icon,
    .hd-mega-tab-count,
    .hd-mega-item,
    .hd-mega-item .arrow,
    .hd-mega-contact,
    .hd-mega-cta,
    .hd-mega-cta-ico {
        transition: none;
    }
    .site-nav-list > li.has-sub:hover > a .hd-caret {
        transform: none;
    }
    .hd-call:hover,
    .hd-call:focus-visible {
        transform: none;
    }
    .hd-mega-panel {
        animation: none;
    }
    .hd-mega-item:hover .arrow,
    .hd-mega-cta:hover .hd-mega-cta-ico {
        transform: none;
    }
    .hd-mega-cta:hover,
    .hd-mega-cta:focus-visible {
        transform: none;
    }
    .hd-btn:hover,
    .hd-btn:focus-visible {
        transform: none;
    }
}
/* ======================== SITE HEADER END ============ */

/* ======================== SITE FOOTER BEGIN ============ */
/*
 * Der Footer.
 *
 * Vorher ein Schieferblau (#2F5D34) mit weißen Formularfeldern darauf. Zwei
 * Dinge stimmten daran nicht:
 *
 *   - Das Blau kam sonst nirgends auf der Seite vor. Die dunklen Flächen des
 *     Themes sind Tinte (#0f141b–#12171e) — Banner, dunkle CTA-Leiste,
 *     Kontakt-Dock. Der Footer war die eine dunkle Fläche mit einer eigenen
 *     Farbe, und deshalb las er sich wie ein angehängter Block statt wie der
 *     Abschluss derselben Seite.
 *
 *   - Vier weiße Eingabefelder waren das Hellste auf dem ganzen Bildschirm.
 *     Der Blick landete auf dem Formular, bevor er irgendetwas anderes im
 *     Footer gesehen hatte — und das Formular ist hier das Angebot, nicht die
 *     Navigation.
 *
 * Jetzt: dieselbe Tinte wie im Rest des Themes, zwei sehr weiche Lichtkegel
 * für Tiefe, und Formularfelder, die auf dem dunklen Grund liegen statt
 * darauf zu leuchten.
 */
.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #34404e;
    color: #fff;
    font-family: 'Inter';
}

/* Die Lichtkegel. Als Pseudo-Element, damit der Footer kein zusätzliches
   Markup dafür braucht — und mit z-index unter dem Inhalt. */
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(90% 120% at 12% 0%,
            rgba(242, 168, 32, .14) 0%,
            rgba(242, 168, 32, .04) 34%,
            rgba(242, 168, 32, 0) 64%),
        radial-gradient(80% 110% at 92% 100%,
            rgba(47, 93, 52, .34) 0%,
            rgba(47, 93, 52, 0) 60%);
}

/* Die Markenkante oben — durchgezogen.
   Sie war ein nach rechts auslaufender Verlauf. Der sah nach halb geladener
   Grafik aus, sobald man ihn bemerkte: Eine Kante, die auf halber Strecke
   verschwindet, wirkt nicht zurückhaltend, sondern unfertig. Eine
   durchgehende Linie ist die klarere Aussage. */
.site-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1;
    background-color: #F2A820;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
    transition: color .2s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: #F2A820;
}

.site-footer a:focus-visible {
    outline: 2px solid #F2A820;
    outline-offset: 3px;
    border-radius: 3px;
}

.site-footer-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.15fr 1.2fr;
    column-gap: 40px;
    padding: 64px 15px 52px;
}

/* Überschriften mit einer kurzen orangen Markierung darunter. Vier Spalten
   mit gleich gesetzten Überschriften und ohne Trennung lesen sich als eine
   lange Liste; die Marke gibt jeder Spalte einen Anfang. */
.site-footer-heading {
    position: relative;
    width: auto;
    margin: 0 0 26px;
    padding-bottom: 12px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
}

.site-footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background-color: #F2A820;
}

.site-footer-subheading {
    width: auto;
    margin: 24px 0 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.site-footer-logo {
    margin-bottom: 26px;
}

.site-footer-logo img {
    max-width: 150px;
    height: auto;
}

.site-footer-logo-text {
    display: inline-block;
    color: #F2A820;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.site-footer-address {
    margin: 0 0 14px;
    color: #fff;
    font-style: normal;
    font-size: var(--fs-sm);
    line-height: 1.75;
}

.site-footer-address strong {
    display: block;
    margin-bottom: 4px;
    color: #fff;
    font-weight: 600;
}

.site-footer-contact {
    margin: 0 0 10px;
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.site-footer-hours {
    margin: 0;
    color: #fff;
    font-size: var(--fs-sm);
    line-height: 1.85;
}

/* ---------- die Linklisten ---------- */

.site-footer-list {
    list-style: none;
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
}

.site-footer-list li {
    color: #fff !important; /* schlägt die globale li-Farbe aus theme.css */
    font-size: var(--fs-sm);
    line-height: 1.4;
}

/* Der Link füllt die Zeile, statt nur den Text zu umfassen: So ist die
   Trefferfläche eine Zeile hoch und nicht so hoch wie die Schrift — auf dem
   Touchscreen ist das der Unterschied zwischen treffen und danebentippen. */
.site-footer-list a {
    display: block;
    padding: 7px 0 7px 14px;
    border-radius: 6px;
    transition: color .2s ease, padding-left .2s ease, background-color .2s ease;
}

/* Ein Punkt, der beim Hover aufgeht. Er ersetzt den Aufzählungspunkt, den
   diese Listen bewusst nicht haben, und macht die Zeile beim Überfahren
   eindeutig, ohne dass zehn Punkte gleichzeitig um Aufmerksamkeit bitten. */
.site-footer-list a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background-color: #F2A820;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .2s ease, transform .2s ease;
}

.site-footer-list li {
    position: relative;
}

.site-footer-list a:hover,
.site-footer-list a:focus-visible {
    padding-left: 18px;
    background-color: rgba(255, 255, 255, .04);
}

.site-footer-list a:hover::before,
.site-footer-list a:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

.site-footer-formnote {
    margin: 0 0 18px;
    color: #fff;
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* =============================================================
   DAS FORMULAR

   Ausgeliefert wird [wpforms id="756"] in .footerForm. Die .ft-*-Regeln
   gehören zu einem handgeschriebenen Formular, das im Template nicht mehr
   steht — sie werden mitgepflegt, weil sie sonst beim nächsten Blick wie
   aktiver Code aussehen und trotzdem nichts tun. Wer sicher ist, dass das
   Formular WPForms bleibt, kann alle .ft-form-, .ft-consent- und
   .ft-submit-Regeln löschen.

   Felder auf dem Grund, nicht darauf: leicht aufgehellte, halbtransparente
   Flächen mit heller Kante. Weiße Blöcke waren auf der dunklen Fläche das
   Hellste im Bild.
   ============================================================= */

.footerForm .wpforms-container,
.footerForm .wpforms-form .wpforms-field {
    margin: 0 !important;
    padding: 0 0 12px !important;
}

.footerForm .wpforms-form .wpforms-field-label,
.footerForm .wpforms-form .wpforms-field-sublabel {
    color: #fff !important;
}

.footerForm .wpforms-field-container input,
.footerForm .wpforms-field-container select,
.footerForm .wpforms-field-container textarea,
.ft-form input[type="text"],
.ft-form input[type="email"],
.ft-form input[type="tel"] {
    display: block;
    width: 100% !important;
    height: 48px !important;
    padding: 10px 15px !important;
    background-color: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 9px !important;
    color: #fff !important;
    font-family: 'Inter';
    font-size: var(--fs-sm);
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.footerForm .wpforms-field-container textarea {
    height: auto !important;
    min-height: 96px;
}

/*
 * PLATZHALTER.
 *
 * Zwei Gründe, warum die vorherige Fassung nicht durchkam:
 *
 *   1. Sie zielte auf .wpforms-field-container input. WPForms setzt seine
 *      eigene Platzhalterfarbe direkter — je nach Version über
 *      `div.wpforms-container-full .wpforms-form input::placeholder`, was
 *      eine höhere Spezifität hat als der Selektor hier. Ohne !important
 *      gewinnt das Plugin.
 *
 *   2. ::placeholder, ::-webkit-input-placeholder und ::-moz-placeholder sind
 *      keine Aliase. Ein Selektor-Listenglied, das der Browser nicht kennt,
 *      lässt die GANZE Regel fallen — die drei brauchen deshalb je einen
 *      eigenen Block, sonst verliert man alle drei.
 *
 * Weiß mit 78%: auf der dunklen Tinte lesbar, aber weiterhin klar vom
 * eingegebenen Text (volles Weiß) zu unterscheiden. Ein Platzhalter, der
 * genauso aussieht wie eine Eingabe, ist schlimmer als ein zu blasser.
 */
.footerForm .wpforms-form input::placeholder,
.footerForm .wpforms-form textarea::placeholder,
.footerForm input::placeholder,
.footerForm textarea::placeholder,
.ft-form input::placeholder {
    color: rgba(255, 255, 255, .78) !important;
    opacity: 1 !important; /* Firefox setzt sonst zusätzlich opacity: .54 */
}

.footerForm .wpforms-form input::-webkit-input-placeholder,
.footerForm .wpforms-form textarea::-webkit-input-placeholder,
.footerForm input::-webkit-input-placeholder,
.footerForm textarea::-webkit-input-placeholder {
    color: rgba(255, 255, 255, .78) !important;
    opacity: 1 !important;
}

.footerForm .wpforms-form input::-moz-placeholder,
.footerForm .wpforms-form textarea::-moz-placeholder,
.footerForm input::-moz-placeholder,
.footerForm textarea::-moz-placeholder {
    color: rgba(255, 255, 255, .78) !important;
    opacity: 1 !important;
}

/* Der eingegebene Text selbst — sonst erbt er die dunkle Standardfarbe von
   WPForms und ist auf dem dunklen Feld unlesbar, sobald jemand tippt. */
.footerForm .wpforms-form input,
.footerForm .wpforms-form select,
.footerForm .wpforms-form textarea {
    color: #fff !important;
}

/*
 * Autofill.
 *
 * Chrome übermalt automatisch ausgefüllte Felder mit einem hellen Gelb und
 * dunkler Schrift und ignoriert dabei background-color. Nur der
 * Innenschatten kommt durch — deshalb wird die Feldfarbe hier als
 * box-shadow gesetzt statt als Hintergrund.
 */
.footerForm .wpforms-form input:-webkit-autofill,
.footerForm .wpforms-form input:-webkit-autofill:hover,
.footerForm .wpforms-form input:-webkit-autofill:focus,
.footerForm .wpforms-form select:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #3e4b5a inset !important;
    caret-color: #fff;
}

/* Das Auswahlfeld erbt sonst die Systemfarben und steht als hellgraue Fläche
   zwischen den dunklen Feldern. */
.footerForm .wpforms-field-container select {
    -webkit-appearance: none;
    appearance: none;
    /* Der Pfeil als data-URI, damit kein zusätzlicher Request nötig ist. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
}

/* Die Optionen des Auswahlfelds zeichnet das Betriebssystem, nicht die Seite —
   ohne diese Regel stünde weiße Schrift auf weißem Grund. */
.footerForm .wpforms-field-container select option {
    color: #2a2e34;
    background-color: #fff;
}

.footerForm .wpforms-field-container input:focus,
.footerForm .wpforms-field-container select:focus,
.footerForm .wpforms-field-container textarea:focus,
.ft-form input:focus {
    outline: 0;
    background-color: rgba(255, 255, 255, .1) !important;
    border-color: #F2A820 !important;
    box-shadow: 0 0 0 3px rgba(242, 168, 32, .25) !important;
}

/* ---------- Einwilligung ---------- */

.footerForm .wpforms-field-checkbox label,
.ft-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 6px 0 16px;
    color: #fff;
    font-size: var(--fs-xs);
    line-height: 1.55;
    cursor: pointer;
}

.footerForm .wpforms-field-checkbox input[type="checkbox"],
.ft-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 2px 0 0;
    accent-color: #F2A820;
}

.ft-consent a,
.footerForm .wpforms-field-checkbox a {
    color: #F2A820;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- der Absenden-Knopf ---------- */

/*
 * Orange, nicht schwarz.
 *
 * Er war #000 — auf einer dunklen Fläche also fast unsichtbar, und dabei ist
 * er das eine Element im Footer, das etwas auslöst. Ein Knopf, den man suchen
 * muss, ist kein Knopf.
 */
.footerForm button.wpforms-submit,
.ft-submit {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px !important;
    padding: 12px 20px;
    border: 1px solid #F2A820 !important;
    border-radius: 10px !important;
    background: #F2A820 !important;
    color: #fff !important;
    font-family: 'Inter';
    font-size: 15.5px !important;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 26px -14px rgba(242, 168, 32, .95);
    transition: background-color .25s ease, border-color .25s ease,
                transform .25s ease, box-shadow .25s ease;
}

/*
 * Der Pfeil, als Rahmen gezeichnet.
 *
 * Vorher lag hier ein PNG aus /wp-content/uploads/. Ein Bild für ein 10px
 * großes Zeichen kostet einen Request, kann die Farbe des Knopfes nicht
 * annehmen — und der Pfad zeigte auf die Live-Domain, wäre auf Staging also
 * ein fehlendes Bild gewesen.
 */
.footerForm button.wpforms-submit::after {
    content: "";
    width: 8px;
    height: 8px;
    border: 0;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    background: none;
    transform: rotate(45deg);
    transition: transform .25s ease;
}

/*
 * Der Hover geht ins Weiße, nicht ins Dunkle.
 *
 * Er ging vorher auf #24282e — auf dem tintenfarbenen Footer war der Knopf
 * damit beim Überfahren praktisch verschwunden: Man fährt darüber und der
 * Knopf geht aus. Auf einer dunklen Fläche muss die Rückmeldung heller
 * werden, nicht dunkler.
 */
/* Grün wie überall. Auf der dunklen Tinte des Footers bleibt es hell genug,
   um als Rückmeldung zu taugen — anders als das frühere #24282e, unter dem der
   Knopf schlicht verschwand. */
.footerForm button.wpforms-submit:hover,
.footerForm button.wpforms-submit:focus-visible,
.ft-submit:hover,
.ft-submit:focus-visible {
    background: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(47, 93, 52, .9);
}

.footerForm button.wpforms-submit:hover::after {
    transform: rotate(45deg) translate(2px, -2px);
}

.ft-submit svg {
    display: block;
    width: 17px;
    height: 17px;
}

.footerForm .wpforms-error,
.ft-form .wpforms-error {
    color: #ff9c93 !important;
    font-size: 12.5px;
}

/* ---------- die Linkzeile unten im Formularbereich ---------- */

.footerBottomLinks > ul {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: end;
    gap: 20px !important;
    margin-bottom: 0 !important;
}

.footerBottomLinks > ul > li {
    padding-right: 20px !important;
    border-right: 1px solid rgba(255, 255, 255, .2);
}

/* Der letzte Eintrag trug denselben Trenner wie alle anderen — eine Linie,
   die nichts trennt. */
.footerBottomLinks > ul > li:last-child {
    padding-right: 0 !important;
    border-right: 0;
}

.ft-form p {
    margin: 0 0 10px;
}

/*
 * Trust-badge row.
 *
 * No fixed height and no overflow:hidden anywhere here — either would clip the
 * iframe the ProvenExpert script injects.
 */
.site-footer-badge-inner {
    display: block;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
/*
 * Gives the widget a positioning context.
 *
 * ProvenExpert draws its teal underline as a child with
 * `position:absolute; bottom:0; width:100%` (their inline style). With no
 * positioned ancestor, that resolved against the initial containing block
 * instead of the widget — so the line was painted one viewport-height down
 * the page, striking a 3px rule straight through the body copy. Making the
 * container relative keeps `bottom:0` meaning the bottom of the badge.
 *
 * Safe if they ever switch back to their fixed-bar mode: `position: relative`
 * alone does not become the containing block for a fixed descendant.
 */
#ProvenExpert_widgetbar_container {
    position: relative;
}
/*
 * Un-fixes the widget so it renders inline in this row.
 *
 * The vendor script ships the badge as a bar pinned to the bottom of the
 * viewport (`position: fixed`) and injects its own stylesheet at runtime to
 * say so. These three rules are what pull it back into the footer, and they
 * have to win against that injected sheet, hence the !important.
 *
 * They used to sit at the end of guest-style.css while the container rule
 * above sat here. Both files are enqueued with no dependency between them, so
 * nothing guaranteed their order once a production optimiser combined or
 * reordered stylesheets — and if these lost, the badge went back to being a
 * fixed bar and disappeared out of the footer. Keeping them next to the rule
 * they belong with removes that failure mode.
 */
#ProvenExpert_widgetbar_container>div {
    position: unset !important;
    border-top: 0px solid #d3d3d3 !important;
}
#ProvenExpert_widgetbar_container>div>div {
    width: 100% !important;
}
.provenExpertWidgetContent {
    width: 100% !important;
    display: flex;
    justify-content: space-around;
    padding: 0px 14px !important;
}

/*
 * DAS SIEGEL AUF SCHMALEN GERÄTEN.
 *
 * Erster Versuch war, die Leiste umbrechen zu lassen. Das hat es schlimmer
 * gemacht, und der Grund ist lehrreich: Der Anbieter positioniert Teile seiner
 * Leiste absolut (dieselbe Eigenart, wegen der weiter oben schon ein
 * Positionierungskontext gesetzt werden muss). Absolut positionierte Kinder
 * zählen nicht zur Höhe ihres Elternteils — die Zeile brach also um, wuchs
 * aber nicht mit, und Sterne, Note und Empfehlungsquote landeten auf dem
 * Copyright darunter.
 *
 * Fremdes Markup lässt sich nicht umbauen, ohne seine Annahmen zu kennen.
 * Also wird es nicht umgebaut: Die Leiste behält ihre eine Zeile und bekommt
 * einen eigenen Scrollbereich. Sie ist damit vollständig erreichbar, nichts
 * wird abgeschnitten, und ihre innere Anordnung bleibt exakt die, für die sie
 * gebaut wurde.
 */
@media only screen and (max-width: 900px) {
    .site-footer-badge-inner {
        padding: 10px 0;
        /* Der Scrollbereich liegt hier, nicht am Widget selbst: dessen
           Container gehört dem Anbieter. */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Die Leiste beginnt am linken Rand statt mittig — sonst startet man
           beim Scrollen in der Mitte des Inhalts. */
        scrollbar-width: thin;
    }

    .site-footer-badge-inner > * {
        /* Genug Breite, dass die Anbieter-Leiste ihre Zeile behält. */
        min-width: 720px;
    }

    /* Ein zarter Verlauf am rechten Rand als Hinweis, dass es weitergeht.
       Kein Pfeil und kein Text: Es ist eine Nebensache, keine Navigation. */
    .site-footer-badge {
        position: relative;
    }

    .site-footer-badge::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 42px;
        pointer-events: none;
        background-image: linear-gradient(90deg,
            rgba(52, 64, 78, 0) 0%,
            rgba(52, 64, 78, .85) 100%);
    }
}

/*
 * Rules above and below the badge row, as in the reference.
 *
 * These were conditional on the row having content, from when the widget was
 * rendering as a fixed bar and left this band empty. It renders inline here
 * now, so the borders are unconditional again.
 */
/*
 * Linien über und unter der Siegel-Zeile.
 *
 * Auf der dunklen Fläche reicht eine Haarlinie nicht mehr — sie war für das
 * hellere Blau gedacht. Dazu ein minimal aufgehellter Grund, damit die Zeile
 * als eigenes Band gelesen wird und nicht als Lücke zwischen zwei Blöcken.
 */
.site-footer-badge {
    position: relative;
    background-color: rgba(255, 255, 255, .03);
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.site-footer-badge-inner {
    padding: 18px 15px;
}


.site-footer-badge-inner .footer-desk {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- die Fußzeile ---------- */

.site-footer-bottom {
    position: relative;
}

.site-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px 15px 30px;
}

.site-footer-copy {
    margin: 0;
    color: #fff;
    font-size: var(--fs-xs);
    line-height: 1.75;
}

.site-footer-copy a {
    color: #fff;
}

.site-footer-legal {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.site-footer-legal li {
    color: #fff !important; /* schlägt die globale li-Farbe aus theme.css */
    font-size: var(--fs-xs);
}

.site-footer-legal li + li::before {
    content: '|';
    margin-right: 10px;
    color: rgba(255, 255, 255, .4);
}

@media only screen and (max-width: 1024px) {
    .site-footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 36px;
        padding-top: 48px;
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .site-footer-inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 30px;
    }

    .site-footer-heading {
        margin-bottom: 20px;
    }

    .site-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Rechtsbündig ist auf einer eigenen Zeile unter dem Copyright falsch —
       dort beginnt die Zeile links wie alles andere. */
    .footerBottomLinks > ul {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer a,
    .site-footer-list a,
    .site-footer-list a::before,
    .footerForm button.wpforms-submit,
    .footerForm button.wpforms-submit::after,
    .ft-submit {
        transition: none;
    }

    .footerForm button.wpforms-submit:hover,
    .ft-submit:hover {
        transform: none;
    }

    .footerForm button.wpforms-submit:hover::after {
        transform: rotate(45deg);
    }
}
/* ======================== SITE FOOTER END ============ */


/* ======================== FLOATING QUICK-CONTACT DOCK ============
   One card flush to the right edge instead of three loose tiles.

   The old version pinned each button separately at `right: -12px`, so they
   were three unrelated stickers, each clipped by the viewport edge by a
   different amount, with a label pill that could never show because the rule
   revealing it was outranked by `display: none !important` on the pill.
   =============================================================== */
/*
 * DER STAPEL RECHTS UNTEN.
 *
 * Auf Mobil und Tablet schweben drei Dinge übereinander: die Leiste unten
 * (.footer-menus), der WhatsApp-Knopf (.fr-dock) und der Nach-oben-Knopf
 * (#btn-back-to-top). Jedes hatte seine eigene Rechnung — der Dock stand auf
 * `calc(84px + safe-area)`, der Nach-oben-Knopf auf `bottom: 12%`. Auf einem
 * Telefon mit ~700px Höhe sind 12% rund 84px, also genau dieselbe Höhe: die
 * beiden Knöpfe lagen aufeinander.
 *
 * Prozente und feste Pixel dürfen sich hier nicht mischen. Die drei Werte
 * unten sind die einzige Quelle für den Stapel; wer die Leiste höher macht,
 * ändert eine Zahl und alles rutscht mit.
 */
/*
 * DIE STAPELHÖHEN, an einer Stelle.
 *
 * Der Dock stand auf z-index 99. Damit lag er unter fast allem, was im Theme
 * eine Ebene beansprucht: dem Mega-Menü und dem Sprachmenü (beide 1000), der
 * Popup-Ebene (999) und dem Kopfbereich der mobilen Overlays. Sichtbar wurde
 * das immer erst dann, wenn eines davon offen war — und dann verschwand
 * ausgerechnet der Knopf, der jederzeit erreichbar sein soll.
 *
 * Die drei schwebenden Elemente bekommen deshalb ein eigenes Band.
 *
 * WARUM DIE ZAHLEN SO GROSS SIND. Nicht aus Vorsicht, sondern weil sie es
 * sein müssen: In vikanshu.css stehen .marquee-ban und .quality-nee-img auf
 * z-index 99999 — zwei Inhaltselemente der Startseite, die sich über alles
 * andere legen. Genau darunter verschwand der Dock. Alles unter 100000 wäre
 * hier also wirkungslos.
 *
 * Die eigentliche Korrektur wäre, diese beiden Werte auf ein sinnvolles Maß
 * zu bringen — ein dekoratives Laufband braucht keine 99999. Das gehört aber
 * in einen eigenen Durchgang durch vikanshu.css, das auch Seiten bedient, die
 * hier nicht geprüft werden können. Bis dahin steht das Band darüber.
 *
 * NACH OBEN IST ES BEGRENZT: Die mobilen Overlays (#mymenu, #myservice)
 * liegen auf 999999 und müssen oben bleiben — ist das Menü offen, gehört der
 * Bildschirm ihm und nicht dem Dock.
 *
 * Reihenfolge untereinander: Dock über Leiste über Nach-oben-Knopf.
 */
:root {
    --fr-bar-h: 68px;    /* Höhe von .footer-menus */
    --fr-float-gap: 14px;
    --fr-float-size: 54px;
    --fr-z-dock: 100200;
    --fr-z-bar: 100100;
    --fr-z-top: 100000;
}

.fr-dock {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: var(--fr-z-dock);
    display: flex;
    flex-direction: column;
    padding: 6px;
    /* Dark, not white. On a white page a white dock with a hairline border is
       a shape you have to look for; the whole point of a fixed dock is that it
       is found without looking. The ink matches the header's dark actions, so
       it reads as part of the site rather than a widget stuck on top of it. */
    background-color: #24282e;
    border: 1px solid rgba(255, 255, 255, .1);
    border-right: 0;
    border-radius: 16px 0 0 16px;
    box-shadow: 0 18px 44px -18px rgba(9, 12, 16, .7);
}
.fr-dock-item {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 62px;
    border-radius: 12px;
    color: #F5B845;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}

/* Hairlines between the actions, inset so they do not touch the card edge. */
.fr-dock-item + .fr-dock-item::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 12px;
    right: 12px;
    height: 1px;
    background-color: rgba(255, 255, 255, .12);
}
.fr-dock-ico svg {
    display: block;
    width: 32px;
    height: 40px;
}

/* Slate is invisible on the dark ground; on it, this action is plain white. */
.fr-dock-item--quote {
    color: rgba(255, 255, 255, .82);
}

.fr-dock-item--wa {
    color: #3D7A44;
}

/* Each action fills with its own colour rather than all three turning the
   same brand orange — the colour is how they are told apart at 52px. */
.fr-dock-item--call:hover,
.fr-dock-item--call:focus-visible {
    background-color: var(--brand-green);
    color: #fff;
}

.fr-dock-item--quote:hover,
.fr-dock-item--quote:focus-visible {
    background-color: #24492A;
    color: #fff;
}

.fr-dock-item--wa:hover,
.fr-dock-item--wa:focus-visible {
    background-color: #2F5D34;
    color: #fff;
}

.fr-dock-item:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* The label is the link's accessible name — always in the tree, revealed as a
   pill on hover or keyboard focus. It is not a `title` tooltip: those cannot
   be styled, cannot be reached by keyboard and do not appear on touch. */
.fr-dock-label {
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    padding: 9px 15px;
    border-radius: 9px;
    background-color: #F2A820;
    color: #fff;
    font-family: 'Inter';
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) translateX(8px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

.fr-dock-label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -6px;
    border: 6px solid transparent;
    border-left-color: #F2A820;
}

.fr-dock-item:hover .fr-dock-label,
.fr-dock-item:focus-visible .fr-dock-label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

/* Below the desktop breakpoint the fixed bottom bar already carries Anruf and
   Anfrage, so the dock keeps only what the bar does not: WhatsApp. As a
   single round button it sits clear of the bar rather than fighting it. */
@media only screen and (max-width: 1024px) {
    .fr-dock {
        top: auto;
        /* Erste Ebene über der Leiste. */
        bottom: calc(var(--fr-bar-h) + var(--fr-float-gap) + env(safe-area-inset-bottom, 0px));
        right: 14px;
        transform: none;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .fr-dock-item--call,
    .fr-dock-item--quote {
        display: none;
    }

    .fr-dock-item--wa {
        /* Dieselbe Variable, mit der der Nach-oben-Knopf darüber rechnet —
           sonst wandert der eine, wenn der andere wächst. */
        width: var(--fr-float-size);
        height: var(--fr-float-size);
        border-radius: 50%;
        background-color: #2F5D34;
        color: #fff;
        box-shadow: 0 14px 30px -12px rgba(47, 93, 52, .95);
    }

    .fr-dock-item + .fr-dock-item::before {
        display: none;
    }

    .fr-dock-ico svg {
        width: 26px;
        height: 26px;
    }

    /* No room for a pill beside a button that is already at the edge. */
    .fr-dock-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .fr-dock-label::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fr-dock-item,
    .fr-dock-label {
        transition: none;
    }
}

/* ======================== MOBILE BOTTOM BAR BEGIN ============ */
/*
 * This bar had no styling in the theme at all, so it rendered as a stray
 * stacked list at the bottom of every page, desktop included. It is a mobile
 * navigation bar, so it is hidden above the mobile breakpoint and pinned to
 * the bottom of the viewport below it.
 */
.footer-menus {
    display: none;
}

/*
 * Raised from 767px to 1024px to match the header. The header strips down to
 * the logo and language switch at 1024px, so this bar has to take over the
 * navigation at exactly the same width — at 767px there was a 768–1024px band
 * with no navigation anywhere on the page.
 */
@media only screen and (max-width: 1024px) {
    .footer-menus {
        position: fixed;
        left: 0;
        right: 0;
        /*
         * Lifted clear of the ProvenExpert widget bar, which the third-party
         * script pins to the bottom of the viewport at a hard-coded
         * `position:fixed; bottom:0; height:43px; z-index:99999`. At bottom:0
         * this bar sat underneath it and its buttons could not be tapped.
         * Their z-index cannot realistically be outbid, so this moves out of
         * the way instead.
         */
        bottom: 0px;
        z-index: var(--fr-z-bar);
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        /* Die Höhe steht als Variable oben bei :root — der schwebende Stapel
           rechts rechnet damit. Hier nur einlösen, nicht neu erfinden. */
        min-height: var(--fr-bar-h);
        background-color: rgba(255, 255, 255, .92);
        /* Milchglas statt Deckweiß: Die Leiste liegt über dem Inhalt, und ein
           deckender Balken schneidet die Seite an dieser Kante einfach ab.
           Wo backdrop-filter fehlt, bleibt es bei 92% Weiß — das ist kein
           Fehler, nur weniger schön. */
        backdrop-filter: blur(14px) saturate(1.4);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        border-top: 1px solid rgba(29, 35, 38, .08);
        box-shadow: 0 -8px 28px -14px rgba(29, 35, 38, .45);
        /* hält die Leiste frei vom iOS-Home-Indikator */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Dieselbe durchgezogene Markenkante wie am Footer, damit die beiden als
       eine Familie gelesen werden. */
    .footer-menus::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-color: #F2A820;
    }

    /* Two entries are links, two are plain divs with onclick handlers. */
    .footer-menus > a {
        display: block;
        text-decoration: none;
    }

    .footer-menus .footer-on {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 100%;
        padding: 9px 6px 10px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .25s ease;
    }

    /* Haarlinien als Einsatz, damit sie die Kanten nicht berühren. */
    .footer-menus .footer-on.border-right::after {
        content: '';
        position: absolute;
        top: 26%;
        bottom: 26%;
        right: 0;
        width: 1px;
        background-color: rgba(29, 35, 38, .1);
    }

    /*
     * Das Symbol in einer eigenen Fläche.
     *
     * Vorher standen vier orange Striche frei über vier Wörtern. Bei vier
     * gleich gewichteten Zielen fehlt dann jeder Anhaltspunkt, wo eines
     * aufhört und das nächste beginnt — die Leiste las sich als eine Reihe
     * Symbole, nicht als vier Schaltflächen. Die Fläche gibt jedem Ziel eine
     * Form und wird beim Antippen gefüllt.
     */
    .footer-menus .footer-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        background-color: var(--icon-bg-control);
        color: var(--icon-fg-control);
        transition: background-color .25s ease, color .25s ease, transform .25s ease;
    }

    .footer-menus .footer-ico svg {
        display: block;
        width: 20px;
        height: 20px;
    }

    .footer-menus .footer-on p {
        margin: 0;
        color: #444242;
        font-family: 'Inter';
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: .01em;
        transition: color .25s ease;
    }

    .footer-menus .footer-on:hover,
    .footer-menus .footer-on:focus-within {
        background-color: transparent;
    }

    .footer-menus .footer-on:hover .footer-ico,
    .footer-menus .footer-on:focus-within .footer-ico {
        background-color: #F2A820;
        color: #fff;
        transform: translateY(-2px);
    }

    .footer-menus .footer-on:hover p,
    .footer-menus .footer-on:focus-within p {
        color: #24282e;
    }

    /* Rückmeldung beim Antippen. */
    .footer-menus .footer-on:active .footer-ico {
        transform: scale(.92);
    }

    /*
     * „Anfrage“ ist die Handlung, um die es geht.
     *
     * Vier gleich aussehende Schaltflächen behandeln das Angebotsformular wie
     * das Menü. Das zweite Feld trägt deshalb dauerhaft die Markenfarbe — kein
     * zusätzlicher Knopf, keine zusätzliche Zeile, nur eine Gewichtung
     * innerhalb dessen, was ohnehin da ist.
     */
    .footer-menus > a:nth-of-type(2) .footer-ico {
        background-color: #F2A820;
        color: #fff;
        box-shadow: 0 8px 18px -10px rgba(242, 168, 32, .95);
    }

    .footer-menus > a:nth-of-type(2) .footer-on p {
        color: #24282e;
        font-weight: 700;
    }

    .footer-menus > a:nth-of-type(2) .footer-on:hover .footer-ico {
        background-color: #24282e;
    }

    /*
     * Verhindert, dass die fixierten Leisten das Seitenende verdecken.
     * Gerechnet aus derselben Variablen wie der schwebende Stapel, damit eine
     * höhere Leiste nicht wieder eine zweite Zahl an anderer Stelle braucht.
     */
    body {
        padding-bottom: calc(var(--fr-bar-h) + env(safe-area-inset-bottom, 0px));
    }
}

@media only screen and (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .footer-menus .footer-on,
    .footer-menus .footer-ico,
    .footer-menus .footer-on p {
        transition: none;
    }
    .footer-menus .footer-on:hover .footer-ico,
    .footer-menus .footer-on:active .footer-ico {
        transform: none;
    }
}
/* ======================== MOBILE BOTTOM BAR END ============ */

/* ======================== MOBILE NAV OVERLAYS BEGIN ============ */
/*
 * Contents of #mymenu and #myservice. Both were empty until now, so this is
 * the first styling they have had. The .tab-icon and .arrow pieces are reused
 * from guest-style.css so the overlays match the desktop mega menu.
 */
.overlay-mobile {
    /* The lists are taller than the viewport; without this they are clipped. */
    overflow-y: auto;
}
.mob-nav {
    max-width: 640px;
    margin: 0 auto;
    /* Oben braucht es keinen Platz mehr für den Schließen-Knopf — der sitzt in
       der Kopfzeile. Unten weiterhin Luft für die fixierte Leiste. */
    padding: 20px 16px calc(90px + env(safe-area-inset-bottom, 0px));
    text-align: left; /* .overlay-content-mobile zentriert sonst alles */
}
/* Die Überschrift ist jetzt eine Rubrik, keine Titelzeile — die Kopfzeile
   darüber sagt bereits, wo man ist. */
.mob-nav-title {
    margin: 0 0 16px;
    color: #8a8a8a;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ---------- collapsible service groups (<details>) ---------- */
.mob-nav-group {
    margin-bottom: 10px;
    background-color: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 12px;
    overflow: hidden;
}
.mob-nav-group[open] {
    background-color: #fffcf7;
    border-color: #f4d79a;
}

.mob-nav-group-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    color: #24282e;
    font-family: 'Inter';
    font-size: var(--fs-md);
    font-weight: 700;
    cursor: pointer;
    /* Both are needed to drop the default disclosure triangle. */
    list-style: none;
}
.mob-nav-group-head::-webkit-details-marker {
    display: none;
}
/*
 * The group icons. These were never actually styled: the only rule for
 * `.tab-icon` was guest-style.css's `.tab .tab-icon`, which needs a `.tab`
 * ancestor this markup has never had. An inline <svg> with a viewBox but no
 * width/height falls back to the CSS default of 300x150, so each of these was
 * a huge box being squashed by its flex parent. Sized explicitly here, and no
 * longer dependent on a selector in another file that happened to be nearby.
 */
.mob-nav-group-head .tab-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background-color: var(--icon-bg-control);
    color: var(--icon-fg-control);
}
.mob-nav-group-head .tab-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}
.mob-nav-group[open] .mob-nav-group-head .tab-icon {
    background-color: #F2A820;
    color: #fff;
}
.mob-nav-group-label {
    flex: 1;
}

.mob-nav-group-count {
    padding: 2px 9px;
    background-color: #ffeac2;
    border-radius: 999px;
    color: #24282e;
    font-size: var(--fs-xs);
    font-weight: 700;
}
.mob-nav-group[open] .mob-nav-group-head .hd-caret {
    transform: rotate(180deg);
}

/* ---------- link lists ---------- */
.mob-nav-list {
    list-style: none;
    margin: 0;
    padding: 0 10px 10px;
}
.mob-nav-list li {
    color: inherit !important; /* beats theme.css's global li colour */
}

.mob-nav-list a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border-radius: 8px;
    color: #24282e !important; /* beats theme.css's orange global a colour */
    font-family: 'Inter';
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .18s ease;
}
.mob-nav-list a:hover,
.mob-nav-list a:focus-visible {
    background-color: #ffeac2;
}
.mob-nav-list .arrow {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #F2A820;
    transition: transform .18s ease;
}
.mob-nav-list .arrow svg {
    display: block;
    width: 13px;
    height: 13px;
}
.mob-nav-list a:hover .arrow {
    transform: translateX(3px);
}
/* General pages read as a plain divided list rather than cards. */
.mob-nav-list--plain {
    padding: 0;
    border-top: 1px solid #f0f2f5;
}

.mob-nav-list--plain a {
    padding: 14px 12px;
    border-bottom: 1px solid #f0f2f5;
    border-radius: 0;
    font-size: var(--fs-md);
    font-weight: 600;
}

/* ---------- overlay footer ---------- */
/*
 * DER FUSS.
 *
 * Vorher ein Kontaktlink und ein oranger Knopf, direkt an die Liste
 * angehängt. Jetzt ein abgesetzter Block auf hellem Grund: Wer bis hierher
 * gescrollt hat, hat in der Liste nicht gefunden, was er suchte — genau dann
 * sind Anrufen und Angebot die richtigen nächsten Schritte, und sie sollen
 * nicht wie zwei weitere Listeneinträge aussehen.
 */
.mob-nav-foot {
    display: grid;
    gap: 10px;
    margin-top: 26px;
    padding: 18px 16px 20px;
    background-color: #fdf7ec;
    border: 1px solid #f2e4d1;
    border-radius: 14px;
}

/* Die Nummer, zweizeilig. */
.mob-nav-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background-color: #fff;
    border: 1px solid #f0dcc0;
    border-radius: 12px;
    color: #1c1c1c !important;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.mob-nav-phone:hover,
.mob-nav-phone:focus-visible {
    border-color: #F2A820;
    box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 14px 28px -20px rgba(242, 168, 32, .7);
}

.mob-nav-phone-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #F2A820;
    color: #fff;
}

.mob-nav-phone-ico svg {
    display: block;
    width: 18px;
    height: 18px;
}

.mob-nav-phone-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mob-nav-phone-label {
    color: #8a7a5e;
    font-family: 'Inter';
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.mob-nav-phone-number {
    font-family: 'Inter';
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
}

/* Angebot und WhatsApp nebeneinander: zwei gleichrangige Wege, einer davon
   der, den viele auf dem Telefon ohnehin bevorzugen. */
.mob-nav-actions {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 10px;
}

.mob-nav-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    background-color: #2F5D34;
    border-radius: 10px;
    color: #fff !important;
    font-family: 'Inter';
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .25s ease;
}

.mob-nav-wa svg {
    display: block;
    width: 18px;
    height: 18px;
}

.mob-nav-wa:hover,
.mob-nav-wa:focus-visible {
    background-color: #24492A;
    color: #fff !important;
}
.mob-nav-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    color: #1c1c1c !important;
    font-family: 'Inter';
    font-weight: 600;
    text-decoration: none;
}
.mob-nav-contact .footer-ico {
    display: inline-flex;
    color: #F2A820;
}
.mob-nav-contact svg {
    display: block;
    width: 18px;
    height: 18px;
}
.mob-nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 14px;
    font-size: 14.5px;
    background-color: #F2A820;
    border-radius: 10px;
    color: #fff !important;
    font-family: 'Inter';
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color .25s ease;
}
.mob-nav-cta:hover,
.mob-nav-cta:focus-visible {
    background-color: #dd960f;
}

@media (prefers-reduced-motion: reduce) {
    .mob-nav-list a,
    .mob-nav-list .arrow,
    .mob-nav-cta,
    .mob-nav-phone,
    .mob-nav-wa,
    .overlay-mobile .closebtn {
        transition: none;
    }
    .mob-nav-list a:hover .arrow {
        transform: none;
    }
}

/* ======================== MOBILE NAV OVERLAYS END ============ */
/* The .tooltiptext pills that stood here belonged to the old three-tile
   float markup. The dock renders its own labels (.fr-dock-label, above) and
   no template emits .tooltip / .tooltiptext any more. */


/* ======================== Btn_back_to_top  BEGIN ============ */
#btn-back-to-top {
    position: fixed;
    /* Auf dem Desktop steht der Dock mittig am rechten Rand, hier ist also
       nichts im Weg — ein fester Abstand statt der alten 12%, die auf jedem
       Gerät eine andere Höhe bedeuteten. */
    bottom: 65px;
    right: 14px;
    /* display wird von custom.js auf flex gesetzt, sobald gescrollt wurde */
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    background-color: #24282e;
    color: #fff;
    cursor: pointer;
    z-index: var(--fr-z-top);
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6);
    transition: background-color .25s ease, transform .25s ease;
}
#btn-back-to-top svg {
    display: block;
    width: 20px;
    height: 20px;
}

#btn-back-to-top:hover {
    background-color: #F2A820;
    color: #fff;
    transform: translateY(-3px);
}

#btn-back-to-top:focus-visible {
    outline: 2px solid #F2A820;
    outline-offset: 3px;
}

/*
 * Auf Mobil und Tablet in den Stapel: eine Ebene über dem WhatsApp-Knopf.
 *
 * Dunkle Tinte statt Orange, weil direkt darunter der grüne WhatsApp-Knopf
 * sitzt und darunter die weiße Leiste mit orangen Symbolen. Drei kräftige
 * Farben übereinander in der rechten unteren Ecke sind eine Ampel, keine
 * Navigation — der Nach-oben-Knopf ist die unwichtigste der drei Aktionen und
 * sieht jetzt auch so aus.
 */
@media only screen and (max-width: 1024px) {
    #btn-back-to-top {
        bottom: calc(var(--fr-bar-h) + var(--fr-float-gap) + var(--fr-float-size)
                     + var(--fr-float-gap) + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: rgba(26, 34, 56, .9);
        backdrop-filter: blur(4px);
    }
    .umzug-form textarea {
    height: 100px;
    }
}
@media (prefers-reduced-motion: reduce) {
    #btn-back-to-top {
        transition: none;
    }
    #btn-back-to-top:hover {
        transform: none;
    }
}
/* ======================== Btn_back_to_top  END ============ */


/* Contact Form 7 - Form Design (footer form, ID 2548) */
.footerForm .wpcf7[data-wpcf7-id="2548"] form.wpcf7-form {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Field spacing */
.footerForm .wpcf7[data-wpcf7-id="2548"] form.wpcf7-form label {
    display: block;
    width: 100%;
    margin: 0 0 12px;
}

/* Input and dropdown fields */
.footerForm .wpcf7[data-wpcf7-id="2548"] .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.footerForm .wpcf7[data-wpcf7-id="2548"] input[type="text"],
.footerForm .wpcf7[data-wpcf7-id="2548"] input[type="email"],
.footerForm .wpcf7[data-wpcf7-id="2548"] input[type="tel"],
.footerForm .wpcf7[data-wpcf7-id="2548"] select {
    display: block;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 15px;
    margin: 0;
    background-color: #252a30;
    color: #ffffff;
    border: 1px solid #484d53;
    border-radius: 9px;
    font-size: 16px;
    font-family: inherit;
    box-shadow: none;
    outline: none;
}

/* Placeholder */
.footerForm .wpcf7[data-wpcf7-id="2548"] input::placeholder {
    color: #ffffff;
    opacity: 1;
}

/* Dropdown options */
.footerForm .wpcf7[data-wpcf7-id="2548"] select {
    cursor: pointer;
    color-scheme: dark;
}

.footerForm .wpcf7[data-wpcf7-id="2548"] select option {
    background: #252a30;
    color: #ffffff;
}

/* Focus state */
.footerForm .wpcf7[data-wpcf7-id="2548"] input:focus,
.footerForm .wpcf7[data-wpcf7-id="2548"] select:focus {
    border-color: #6aace7;
}

/* Privacy text
   (label.privacy-text so it beats the general "label" rule above) */
.footerForm .wpcf7[data-wpcf7-id="2548"] form.wpcf7-form label.privacy-text {
    color: #ffffff;
    font-size: 16px;
    line-height: 21px;
    font-weight: 400;
    margin: 10px 0 16px;
}

/* Privacy link */
.footerForm .wpcf7[data-wpcf7-id="2548"] .privacy-text a {
    color: #F2A820;
    text-decoration: none;
    transition: color 0.3s;
}

.footerForm .wpcf7[data-wpcf7-id="2548"] .privacy-text a:hover {
    color: #F2A820;
    text-decoration: none;
}

/* Remove extra paragraph spacing */
.footerForm .wpcf7[data-wpcf7-id="2548"] form p {
    margin-bottom: 0;
}

/* Response message */
.footerForm .wpcf7[data-wpcf7-id="2548"] .wpcf7-response-output {
    color: #ffffff;
    margin: 15px 0 0;
}

/* =========================================================
   "Absenden" button
   ========================================================= */
.footerForm .wpcf7[data-wpcf7-id="2548"] input.wpcf7-submit {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 40px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;

  /* Text */
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0.2px;
  color: #ffffff;
  text-align: center;
  text-shadow: none;

  /* Background colour + chevron icon */
  background-color: #f5a62a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 7px 12px;
  background-position: calc(50% + 52px) 50%;

  box-shadow: 0 0 0 rgba(47, 94, 53, 0);
  transform: translateY(0);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    background-position 0.3s ease,
    transform 0.3s ease;
}

/* Hover / keyboard focus – green bg, green glow, arrow slides right, button lifts */
.footerForm .wpcf7[data-wpcf7-id="2548"] input.wpcf7-submit:hover,
.footerForm .wpcf7[data-wpcf7-id="2548"] input.wpcf7-submit:focus-visible {
  background-color: #2f5e35;
  background-position: calc(50% + 57px) 50%;
  box-shadow: 0 10px 24px rgba(47, 94, 53, 0.55);
  transform: translateY(-3px);
  color: #ffffff;
  outline: none;
}

/* Pressed – settles back down */
.footerForm .wpcf7[data-wpcf7-id="2548"] input.wpcf7-submit:active {
  background-color: #29532f;
  box-shadow: 0 4px 12px rgba(47, 94, 53, 0.5);
  transform: translateY(-1px);
}

/* Spinner placement */
.footerForm .wpcf7[data-wpcf7-id="2548"] .wpcf7-submit + .wpcf7-spinner {
  display: block;
  margin: 10px auto 0;
}

/* =========================================================
   Umzug-Anfrageformular – only affects .umzug-form
   ========================================================= */
.umzug-form {
  width: 100%;
  color: #222;
  font-family: inherit;
}

.umzug-form p { margin: 0; }

/* Two-column rows */
.umzug-form .uf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
}

.umzug-form .uf-field { margin-bottom: 18px; }

/* Field labels */
.umzug-form .uf-label {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #333;
}

.umzug-form .uf-req {
  color: #f2a820;
  font-weight: 400;
}

.umzug-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 8px;
}

/* Inputs, select, textarea */
.umzug-form input[type="text"],
.umzug-form input[type="email"],
.umzug-form input[type="tel"],
.umzug-form input[type="date"],
.umzug-form select,
.umzug-form textarea {
  display: block;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  margin: 0;
    padding: 12px 14px;
  background: #fff;
  color: #222;
  border: 1px solid #c9ccd1;
  border-radius: 6px !important;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s ease;
}

.umzug-form textarea {
  height: 200px;
  padding: 8px 10px;
  resize: vertical;
}

.umzug-form select { cursor: pointer; }

.umzug-form input:focus,
.umzug-form select:focus,
.umzug-form textarea:focus {
  border-color: #6aace7;
}

/* Checkboxes – one per line */
.umzug-form .wpcf7-checkbox { display: block; margin-top: 8px; }

.umzug-form .wpcf7-list-item {
  display: block;
  margin: 0 0 9px;
}

.umzug-form .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 400;
  color: #222;
  cursor: pointer;
}

.umzug-form .wpcf7-list-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #2e5e33;
}

/* Privacy text */
.umzug-form .uf-privacy {
  margin: 4px 0 16px;
  font-size: 15px;
  line-height: 1.45;
  color: #222;
}

.umzug-form .uf-privacy a {
  color: #f2a820;
  text-decoration: none;
  transition: color 0.3s;
}

.umzug-form .uf-privacy a:hover { color: #2e5e33; }

/* reCAPTCHA */
.umzug-form .uf-captcha { margin-bottom: 14px; }

/* Submit button */
.umzug-form input.uf-submit {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 20px;
  background: #2e5e33;
  color: #fff;
  border: 0;
  border-radius: 6px !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 12px -4px rgba(242, 168, 32, 0.35);
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.umzug-form input.uf-submit:hover,
.umzug-form input.uf-submit:focus-visible {
  background: #264e2b;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -6px rgba(47, 94, 53, 0.55);
  outline: none;
}

.umzug-form .wpcf7-spinner {
  display: block;
  margin: 10px auto 0;
}

/* Mobile: stack the two-column rows */
@media (max-width: 600px) {
  .umzug-form .uf-row { grid-template-columns: 1fr; }
}
.umzug-form input[type="date"] {
  position: relative;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

.umzug-form input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.umzug-form input[type="date"],
.umzug-form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}
/* Date field – calendar icon + pointer */
.umzug-form input[name="umzugsdatum"] {
  cursor: pointer;
  padding-right: 36px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

/* =========================================================
   Custom calendar popup – Umzugsdatum only
   ========================================================= */
.umzug-form .uf-cal {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  width: 290px;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e3e5e8;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  font-family: inherit;
}

.umzug-form .uf-cal[hidden] { display: none; }

/* Header */
.umzug-form .uf-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.umzug-form .uf-cal-title {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

/* Reset theme button styles inside the calendar */
.umzug-form .uf-cal button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Prev / next */
.umzug-form .uf-cal .uf-cal-nav {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 22px;
  font-weight: 400;
  color: #2e5e33;
}

.umzug-form .uf-cal .uf-cal-nav:hover {
  background: #eaf2eb;
  color: #f2a820;
}

.umzug-form .uf-cal .uf-cal-nav:disabled {
  opacity: 0.3;
  cursor: default;
  background: transparent;
  color: #2e5e33;
}

/* Grid */
.umzug-form .uf-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.umzug-form .uf-cal-wd {
  padding: 4px 0 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #2e5e33;
}

/* Days */
.umzug-form .uf-cal .uf-cal-day {
  height: 34px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  color: #222;
}

.umzug-form .uf-cal .uf-cal-day:hover {
  background: #eaf2eb;
}

.umzug-form .uf-cal .uf-cal-day.is-today {
  border-color: #f2a820;
}

.umzug-form .uf-cal .uf-cal-day.is-selected,
.umzug-form .uf-cal .uf-cal-day.is-selected:hover {
  background: #2e5e33;
  border-color: #2e5e33;
  color: #fff;
}

.umzug-form .uf-cal .uf-cal-day:disabled {
  color: #c3c6ca;
  background: transparent;
  cursor: default;
}