/**
 * Themeunabhaengiges "Chrome"-CSS: Navigation, Footer-Vorlagen, Credit-/
 * Admin-Leiste, Cookie-Banner, Back-to-top, Sidebar-Layout, Fade-Uebergang.
 * Wird auf JEDER oeffentlichen Seite geladen, egal welches Theme aktiv ist
 * (siehe ThemeManager::renderPage()/renderScrollPage()) -- ein neues Theme
 * bekommt dadurch automatisch funktionierende Navigation/Footer/Cookie-
 * Banner, ohne sie selbst bauen zu muessen. Ein Theme kann einzelne Regeln
 * per eigenem CSS ueberschreiben (wird nach dieser Datei geladen).
 */
/* box-sizing: border-box gehoert eigentlich in jedes Theme-CSS -- hier
   zusaetzlich als globale Grundlage, weil diese Datei auf JEDER Seite laedt:
   ein Theme ohne eigene css/style.css (oder eine, die den Reset vergisst)
   hat sonst z.B. Formularfelder mit width:100% + Padding, die ueber ihre
   Grid-/Flex-Zelle hinausragen und den Nachbarn ueberlappen. */
* {
    box-sizing: border-box;
}

/* Das hidden-Attribut muss staerker sein als jede display-Regel.
   Ohne diese Zeile bleibt ein Element mit hidden sichtbar, sobald ihm
   irgendwo display:flex/block/grid zugewiesen wurde -- eine Autoren-Regel
   schlaegt die Vorgabe des Browsers. Genau das ist beim Filtern von
   Kacheln und beim Ausblenden leerer Summenzeilen passiert. */
[hidden] {
    display: none !important;
}

/* Weiches Scrollen -- aber nicht fuer Leute, die Bewegung abbestellt
   haben. Ein springender Bildschirm kann bei vestibulaeren Stoerungen
   Uebelkeit ausloesen; die Systemeinstellung ist dafuer da, und ein
   ungeschuetztes scroll-behavior uebergeht sie. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Generelles Sicherheitsnetz gegen horizontales Scrollen der GESAMTEN Seite
   (Bugreport: "ich kann immer rechts und links scrollen, das darf nicht
   sein" -- Referenz svb-bulling.de, wo das nicht passiert). Ein einzelnes
   zu breites Element (Knopf, Bild, Tabelle...) sollte NIE die ganze Seite
   verschiebbar machen koennen -- html/body werden deshalb hart auf die
   Bildschirmbreite genagelt. Widgets, die ABSICHTLICH horizontal scrollen
   (Testimonial-Karussell, Logo-Laufband), bleiben davon unberuehrt: die
   haben ihren EIGENEN "overflow-x: auto/hidden"-Container und scrollen nur
   innerhalb ihrer selbst, nicht die Seite drumherum.

   WICHTIG: hier steht bewusst "overflow-x: clip" und NICHT "hidden" --
   "hidden" auf html/body wuerde laut CSS-Spec automatisch auch
   "overflow-y: auto" erzwingen (sobald eine Achse nicht "visible" ist,
   wird die andere von "visible" auf "auto" hochgestuft). Das macht
   body/html zu einem EIGENEN Scroll-Container statt des echten Browser-
   Viewports -- auf dem Handy bricht das dann "position: fixed"-Elemente
   wie die Aktionsleiste unten (siehe .site-cta-bar): sie scrollt mit dem
   Inhalt weg statt am Bildschirmrand zu kleben. "clip" ist von dieser
   Hochstufungs-Regel ausdruecklich ausgenommen, verhindert also den
   horizontalen Seiten-Ueberlauf genauso, ohne den Scroll-Container zu
   veraendern. */
html, body {
    max-width: 100%;
    overflow-x: clip;
}

.page-layout--with-sidebar {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    align-items: start;
}

@media (max-width: 800px) {
    .page-layout--with-sidebar {
        grid-template-columns: 1fr;
    }
}

.page-layout__sidebar {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

/* Footer -- 3 waehlbare Vorlagen (siehe /admin/design), gemeinsame Basis. */
.site-footer {
    margin-top: 3rem;
    padding: 2.5rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.9rem;
}

.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Footer-Farbschema (Admin > Design > Footer) -- theme-unabhaengige
   Grundlage; einzelne Themes mit einem eigenen, zum Gesamtbild fest
   dazugehoerigen dunklen Look (z.B. scroll-dark) ueberschreiben das
   bewusst weiterhin selbst und ignorieren diese Auswahl. */
.site-footer--style-dark {
    background: #1b1d2d;
    color: #fafbfd;
    border-top: none;
}

.site-footer--style-light {
    background: #fff;
    color: #1b1d2d;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Akzent-Footer = die DESIGNFARBE der jeweiligen Website.
   Vorher stand hier fest das fils.studio-Lavendel (#a77df5) im Verlauf --
   damit trug jede Kundenwebsite unsere Hausfarbe im Footer, egal welches
   Design sie gewählt hatte. Der Verlauf entsteht jetzt allein aus
   --color-primary (zwei Mischstufen davon). Das Lavendel gehört fils.studio
   und wird nur dort gesetzt (siehe themes/fils-studio/css/style.css). */
.site-footer--style-accent {
    /* Rückfallebene für Browser ohne color-mix: schlicht sehr helle Fläche. */
    background: #f4f6fa;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-primary, #4b7bd6) 14%, #fff),
        color-mix(in srgb, var(--color-primary, #4b7bd6) 26%, #fff)
    );
    color: #1b1d2d;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 1px solid color-mix(in srgb, var(--color-primary, #4b7bd6) 40%, transparent);
}

.site-footer__links a,
.site-footer__column a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}

.site-footer__links a:hover,
.site-footer__column a:hover {
    opacity: 1;
    background: linear-gradient(90deg, var(--color-primary, #76e7d2), color-mix(in srgb, var(--color-primary, #a77df5) 62%, #fff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.site-footer--minimal .site-footer__inner {
    text-align: center;
}

.site-footer--minimal .site-footer__links {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    margin: 0.75rem 0;
}

.site-footer--minimal .site-footer__copyright {
    /* 0.6 lag mit 4,37:1 knapp unter der Lesbarkeitsschwelle.
       Die Zeile darf zurueckhaltend bleiben, aber lesbar sein. */
    opacity: 0.72;
    margin: 0.5rem 0 0;
}

.site-footer--columns .site-footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.site-footer--columns .site-footer__column .site-footer__heading {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.site-footer--columns .site-footer__column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer--columns .site-footer__column li {
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.site-footer__item-icon {
    opacity: 0.8;
    font-size: 0.95em;
    flex-shrink: 0;
    display: inline-flex;
}

.site-footer__item-icon .wl-icon {
    width: 1em;
    height: 1em;
}

.site-footer__social {
    display: flex;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.site-footer--minimal .site-footer__social,
.site-footer--centered .site-footer__social {
    justify-content: center;
}

.site-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(128, 128, 128, 0.15);
    color: inherit;
    opacity: 0.85;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.site-footer__social-link:hover {
    opacity: 1;
    background: rgba(128, 128, 128, 0.28);
}

.site-footer__social-link .wl-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.site-footer--columns .site-footer__bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    opacity: 0.8;
}

.site-footer--columns .site-footer__bottom .site-footer__links {
    display: flex;
    gap: 1rem;
}

.site-footer--centered .site-footer__inner {
    text-align: center;
}

.site-footer--centered .site-footer__brand {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.site-footer--centered .site-footer__links--row {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.site-footer--centered .site-footer__copyright {
    /* 0.6 lag mit 4,37:1 knapp unter der Lesbarkeitsschwelle.
       Die Zeile darf zurueckhaltend bleiben, aber lesbar sein. */
    opacity: 0.72;
    margin: 0;
}

/* Persistente Menüleiste (immer sichtbar, oben angeheftet). */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg, #fff);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.site-nav__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-text, #111) !important;
    text-decoration: none;
    margin-right: auto;
}

/* Optionales zweites Logo VOR dem eigentlichen Standort-Logo (z.B. das
   Logo eines Versicherungspartners/Dachmarke, siehe Setting partner_logo)
   -- etwas kleiner, damit klar bleibt, welches Logo das eigentliche der
   Website ist. */
.site-nav__logo--partner {
    height: 2rem;
}

/* Optionaler Markentext NEBEN dem Logo (Setting site_logo_text), z.B. der
   ausgeschriebene Standortname neben einem reinen Bildmarken-Logo. */
.site-nav__logo-text {
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Optionaler Header-CTA-Button (Setting nav_cta_label/nav_cta_url, siehe
   ThemeManager::sharedChrome()) -- nur sichtbar, wenn im Design gepflegt.
   Bewusst dezent (Textfarbe statt Marken-Akzent), damit er auf jedem
   Theme neutral wirkt; Themes koennen ihn ueber ihre eigene CSS-Datei
   kraeftiger gestalten (siehe agentur-bulling). */
.site-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    background: var(--color-primary, #1b1d2d);
    color: var(--wl-btn-fg, #fff) !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
    .site-nav__cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    }
}

.site-nav__cta-icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
}

.site-nav__toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: inherit;
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-nav__item {
    position: relative;
}

.site-nav__link {
    position: relative;
    text-decoration: none;
    font-weight: 500;
    color: var(--color-text, #111) !important;
    opacity: 0.75;
    padding: 0.4rem 0;
}

/* NUR fuer echte Maus-/Trackpad-Geraete -- siehe die ausfuehrliche
   Begruendung bei ".site-nav__item--has-children:hover" weiter unten: jede
   ":hover"-Regel auf einem Link selbst (nicht nur auf einem Vorfahren)
   loest auf dem iPhone denselben "erster Tipp wird als Hover verbraucht"
   Effekt aus -- der Menüpunkt reagiert dann scheinbar gar nicht. */
@media (hover: hover) {
    .site-nav__link:hover {
        opacity: 1;
        border-bottom: 2px solid var(--color-primary);
    }
}

/* Aktuelle Seite in der Navigation: Farbverlaufs-Unterstrich (Marken-
   Verlauf Mint -> Lavendel, wie z.B. der Scroll-Hinweis in Hero-Studio),
   der beim Laden der Seite von links einwaechst -- statt einer schlichten,
   statischen Unterstreichung wie beim Hover. */
.site-nav__link--active {
    opacity: 1;
    border-bottom: none;
}

.site-nav__link--active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary, #76e7d2), color-mix(in srgb, var(--color-primary, #a77df5) 62%, #fff));
    transform-origin: left;
    animation: site-nav-underline-in 0.5s ease;
}

@keyframes site-nav-underline-in {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__link--active::after { animation: none; }
}

/*
 * Zugeklappt ueber "visibility" statt "display: none".
 *
 * Der Grund ist Bedienbarkeit, nicht Optik: mit display:none verschwindet
 * das Untermenue in DEM Moment, in dem die Maus den Bereich verlaesst --
 * ohne jede Nachlaufzeit. Wer diagonal auf einen Eintrag zusteuert (der
 * uebliche Weg, weil das Untermenue breiter ist als sein Elternpunkt),
 * streift dabei kurz die Flaeche daneben; das Menue klappt genau im
 * Moment des Klicks zu, und der Klick landet im Leeren. Das ist die
 * Beschwerde "ich klicke auf Schadengutachten und es passiert nichts".
 *
 * "visibility" laesst sich -- anders als "display" -- verzoegern. Das
 * Menue bleibt nach dem Verlassen 0,35 s stehen: lange genug, um den
 * Eintrag zu erreichen, kurz genug, um nicht im Weg zu stehen.
 */
.site-nav__dropdown {
    visibility: hidden;
    opacity: 0;
    display: flex;
    transition: visibility 0s linear 0.35s, opacity 0.15s ease;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.4rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
    min-width: 180px;
    flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__dropdown { transition: visibility 0s linear 0.35s; }
}

/* NUR fuer echte Maus-/Trackpad-Geraete: auf einem Touchscreen bedeutet die
   blosse ANWESENHEIT einer ":hover"-Regel auf einem Vorfahren, dass iOS
   Safari den ersten Fingertipp auf einen Untermenue-Link nur als "Hover
   simulieren" verbraucht -- der Link reagiert dann erst beim ZWEITEN Tipp,
   was sich wie ein haengendes Menue anfuehlt. Am Handy zeigt ohnehin die
   eigene Regel weiter unten (".site-nav__item--has-children .site-nav__
   dropdown") das Untermenue fest an, ganz ohne Hover -- die Sperre hier
   kostet also nichts. */
@media (hover: hover) {
    /* Beim Aufklappen ohne Verzoegerung (transition-delay zurueck auf 0),
       beim Zuklappen greift die Nachlaufzeit aus der Grundregel oben. */
    .site-nav__item--has-children:hover .site-nav__dropdown,
    .site-nav__item--has-children:focus-within .site-nav__dropdown {
        visibility: visible;
        opacity: 1;
        transition: visibility 0s linear 0s, opacity 0.15s ease;
    }
}

.site-nav__dropdown .site-nav__link {
    padding: 0.5rem 1rem;
    display: block;
    opacity: 1;
}

@media (hover: hover) {
    .site-nav__dropdown .site-nav__link:hover {
        background: rgba(0, 0, 0, 0.04);
        border-bottom: none;
    }
}

/* Feste Aktionsleiste am unteren Rand: AUSSCHLIESSLICH fuer Handy-Breiten
   gedacht (dort wird sie in der Media Query unten auf "flex" gesetzt).
   Ohne diese Grundregel erschien der Knopf auf grossen Bildschirmen ein
   zweites Mal mitten im Seitenfluss, direkt unter der Kopfzeile. */
.site-cta-bar {
    display: none;
}

@media (max-width: 800px) {
    .site-nav__toggle {
        display: block;
    }

    /* Das aufgeklappte Menü ist eine eigene Flaeche unter der Leiste und
       braucht deshalb einen eigenen Hintergrund. Themes mit dunkler Leiste
       setzen --nav-panel-bg auf ihren Ton -- sonst stuende helle Schrift auf
       hellem Grund und das Menü waere unsichtbar. */
    .site-nav__links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--nav-panel-bg, var(--color-bg, #fff));
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid rgba(128, 128, 128, 0.2);
        gap: 0.25rem;
    }

    /* Dropdown-Einträge im aufgeklappten Menü ebenfalls auf dieser Flaeche. */
    .site-nav__dropdown {
        background: transparent;
    }

    .site-nav__links--open {
        display: flex;
    }

    .site-nav {
        position: sticky;
    }

    .site-nav__inner {
        position: relative;
        flex-wrap: wrap;
    }

    .site-nav__dropdown {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 1rem;
        /* Am Handy gibt es kein Schweben: das Untermenue steht fest im
           aufgeklappten Menue. Die Nachlaufzeit aus der Grundregel wird
           hier ausdruecklich abgeschaltet -- sonst bliebe es unsichtbar. */
        visibility: visible;
        opacity: 1;
        transition: none;
    }

    /* --- App-Charakter auf dem Handy ---------------------------------
       Vorher stapelten sich oben bis zu vier Leisten (Infoleiste, Logo-
       Zeile, umgebrochener Aktionsknopf, aufgeklapptes Menü) -- zusammen
       ueber 180px, bevor ueberhaupt Inhalt kam ("oben ein unuebersicht-
       liches Menue"). Jetzt: EINE kompakte Kopfzeile (Logo + Menuetaste),
       der wichtigste Aktionsknopf wandert nach UNTEN in eine feste Leiste
       in Daumenreichweite -- das Muster, das native Apps auf dem iPhone
       verwenden. --- */
    .site-nav__inner {
        flex-wrap: nowrap;
        padding: 0.6rem 1rem;
        gap: 0.75rem;
    }

    /* Der Aktionsknopf erzwang den Zeilenumbruch der Kopfzeile. Er
       verschwindet hier nicht, sondern wird unten als feste Leiste erneut
       ausgegeben (siehe .site-nav__cta--mobile-bar weiter unten). */
    .site-nav__inner > .site-nav__cta {
        display: none;
    }

    .site-nav__brand {
        /* KEIN min-width:0 hier: das zwaenge auch das Logo-BILD zum
           Schrumpfen (Flex-Kinder erben die Mindestbreite des Elternteils).
           Das Bild rendert trotzdem in seiner natuerlichen Groesse, ragt
           dann aber ueber die zu schmal berechnete Box hinaus -- genau das
           Ueberlappen mit dem danebenstehenden Such-Symbol, das gemeldet
           wurde. Schrumpfen soll NUR der Markentext (siehe .site-nav__logo-
           text unten), das Bild bleibt unten durch min-content von selbst
           auf seiner echten Breite -- ganz ohne die Zeile zu sprengen. */
        flex: 1;
    }

    .site-nav__logo-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Menuetaste: mindestens 44x44px -- Apples Mindestgroesse fuer sicher
       treffbare Bedienelemente. */
    .site-nav__toggle {
        flex: none;
        width: 2.75rem;
        height: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.6rem;
    }

    /* Feste Aktionsleiste unten (nur wenn es einen Aktionsknopf gibt --
       ThemeManager gibt sie sonst gar nicht erst aus). Die
       safe-area-Angabe haelt sie oberhalb des Home-Indicators auf
       iPhones ohne Home-Knopf. */
    .site-cta-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: flex;
        padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
        background: var(--nav-panel-bg, var(--color-bg, #fff));
        border-top: 1px solid rgba(128, 128, 128, 0.2);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    }

    .site-cta-bar .site-nav__cta {
        flex: 1;
        /* min-width:0 UND white-space:normal sind hier Pflicht, nicht nur
           Politur: .site-nav__cta erbt aus der Desktop-Basisregel
           "white-space: nowrap" (dort richtig, damit der Knopftext in der
           schmalen Nav-Leiste nicht umbricht). Als Flex-Kind hier unten
           behaelt ein Element ohne min-width:0 aber IMMER seine
           unbrechbare Inhaltsbreite (Standard: min-width:auto) -- bei
           "Jetzt beraten lassen" + Icon in einer Zeile ergab das ca. 380px
           Mindestbreite auf einem 375px-Bildschirm. Der Knopf ragte damit
           über den Bildschirmrand hinaus und zog die GESAMTE Seite in die
           Breite -- Ursache fuer "ich kann immer rechts/links scrollen". */
        min-width: 0;
        white-space: normal;
        text-align: center;
        justify-content: center;
        min-height: 3rem;
        font-size: 1rem;
    }

    /* Platz schaffen, damit die feste Leiste nichts am Seitenende verdeckt. */
    body:has(.site-cta-bar) {
        padding-bottom: 4.5rem;
    }

    /* Nach-oben-Knopf ueber die Aktionsleiste heben, sonst liegt er darauf. */
    body:has(.site-cta-bar) .wl-back-to-top {
        bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }

    /* Abschluss-Leiste: war eine einzige, nicht umbrechende Zeile und
       damit auf 390px Breite ein gequetschter Textstreifen ("unten ein
       Text"). Jetzt zentriert, umbrechend und mit Luft. */
    .footer-credit-bar {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: 0.35rem;
        line-height: 1.6;
        padding: 1rem 1.25rem;
    }

    /* Die Trennstriche "|" ergeben im Umbruch keinen Sinn mehr. */
    .footer-credit-bar__sep {
        display: none;
    }

    /* Zusatz "laeuft mit fils.engine" auf eine eigene Zeile, damit der
       Markenhinweis nicht mitten im Wort umbricht. */
    .footer-credit-bar__engine {
        display: block;
        width: 100%;
    }

    /* Am Handy immer offen -- unabhaengig von Hover (siehe die
       visibility-Regel weiter oben in dieser Media Query). */
    .site-nav__item--has-children .site-nav__dropdown {
        display: block;
        visibility: visible;
        opacity: 1;
    }
}

/* Fester Credit-/Admin-Balken unter dem eigentlichen Footer. */
.footer-credit-bar {
    text-align: center;
    font-size: 0.78rem;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.85);
    color: rgba(255, 255, 255, 0.65);
}

.footer-credit-bar__brand {
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
}

.footer-credit-bar__admin,
.footer-credit-bar__cookie {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    text-decoration: none;
}

.footer-credit-bar__admin:hover,
.footer-credit-bar__cookie:hover {
    color: #fff;
}

.footer-credit-bar__sep {
    margin: 0 0.6rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Back-to-top-Button -- Verlaufshintergrund (langsam wandernd) + ein
   kleiner Strich, der darin fortlaufend nach oben ausfuellt, statt eines
   statischen Pfeils (gleiche Formsprache wie der Scroll-Hinweis im
   hero-studio-Widget, siehe dessen __scroll-line). */
.wl-back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--color-primary, #76e7d2), color-mix(in srgb, var(--color-primary, #a77df5) 62%, #fff));
    background-size: 200% 200%;
    animation: wl-back-to-top-gradient 6s ease infinite;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes wl-back-to-top-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.wl-back-to-top__line {
    position: relative;
    width: 2px;
    height: 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.wl-back-to-top__line-fill {
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 999px;
    animation: wl-back-to-top-fill 1.8s ease-in-out infinite;
}

@keyframes wl-back-to-top-fill {
    0% { transform: translateY(100%); }
    50% { transform: translateY(0%); }
    100% { transform: translateY(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .wl-back-to-top { animation: none; }
    .wl-back-to-top__line-fill { animation: none; transform: none; }
}

.wl-back-to-top--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Optionaler echter Scroll-Fortschrittsring um den Back-to-top-Button
   (siehe assets/back-to-top-ring.js) -- zeigt, wie weit auf der Seite
   tatsaechlich herunter gescrollt wurde, statt nur zu dekorieren. Generisch
   gehalten (Farbe kommt aus --color-primary), damit jedes Theme das SVG in
   sein eigenes layout.php einbauen und das Skript einbinden kann, ohne die
   Ring-Optik selbst nachzubauen -- siehe agentur-bulling und fils-studio.
   Ohne das SVG-Markup im Theme aendert sich am Button nichts. */
.wl-back-to-top__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.wl-back-to-top__ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 3;
}

.wl-back-to-top__ring-progress {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

/* Beim Ueberfahren deutlich groesser -- der Button ist bewusst klein/dezent,
   soll beim Anvisieren aber leicht zu treffen sein. */
.wl-back-to-top--visible:hover,
.wl-back-to-top--visible:focus-visible {
    transform: scale(1.25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* Gemeinsamer Button-Hintergrund fuer alle wichtigen CTA-Buttons (Hero,
   CTA-Banner, E-Mail-Button, Preisliste, Produktraster, Kontaktformular,
   Countdown): --wl-btn-bg kommt aus dem Theme-<style>-Block und ist je
   nach Design-Einstellung entweder eine feste Farbe oder ein Farbverlauf
   (siehe ThemeManager::buttonBackgroundCss()). background-size/animation
   sind bewusst IMMER aktiv -- bei einer einfarbigen Hintergrundfarbe hat
   das schlicht keinen sichtbaren Effekt (nichts zum "Wandern"), erst ein
   echter Verlauf zeigt die Bewegung. So braucht kein einzelnes Widget zu
   wissen, welcher Modus gerade aktiv ist. */
.wl-btn-dynamic {
    background: var(--wl-btn-bg, var(--color-primary, #1b1d2d));
    /* Beschriftung passend zum eingestellten Button-Hintergrund -- bei einer
       hellen Button-Farbe waere weiss nicht lesbar (siehe ThemeManager). */
    color: var(--wl-btn-fg, #fff);
    background-size: 200% auto;
    animation: wl-btn-dynamic-pan 6s ease infinite;
}

@keyframes wl-btn-dynamic-pan {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .wl-btn-dynamic { animation: none; }
}

/* Pro-Button-Ueberschreibung (Design > Buttons setzt nur den GLOBALEN
   Standard -- diese beiden Klassen lassen einzelne Buttons gezielt davon
   abweichen, z.B. einen CTA immer im Verlauf zeigen, obwohl die Website
   sonst einfarbige Buttons nutzt, oder umgekehrt). !important ist hier
   bewusst und die einzige Stelle im Projekt, die es braucht: die Farbe
   kommt sonst aus --wl-btn-bg, das global gesetzt wird und sich ohne
   !important nicht sauber pro Element ueberschreiben liesse. */
.wl-btn-force-solid {
    background: var(--color-primary, #1b1d2d) !important;
    background-size: auto !important;
    animation: none !important;
    /* Auf einer hellen Hausfarbe muss die Beschriftung dunkel sein --
       welche der beiden es ist, rechnet der ThemeManager aus. Hier gilt
       --wl-on-primary, weil dieser Knopf ausdrücklich die AKZENTFARBE als
       Fläche erzwingt (nicht die Button-Farbe). */
    color: var(--wl-on-primary, #fff) !important;
}

.wl-btn-force-gradient {
    background: linear-gradient(120deg, var(--color-primary, #76e7d2), color-mix(in srgb, var(--color-primary, #a77df5) 62%, #fff), var(--color-primary, #76e7d2)) !important;
    background-size: 200% auto !important;
    animation: wl-btn-dynamic-pan 6s ease infinite !important;
}

@media (prefers-reduced-motion: reduce) {
    .wl-btn-force-gradient { animation: none !important; }
}

/* Dritte Ueberschreibungs-Variante: eine frei waehlbare Farbe pro Button
   (siehe ThemeManager::buttonStyleOverrideVar()) statt nur Standard-Akzent
   oder Verlauf -- die Farbe kommt als Custom Property direkt am Element,
   da sie pro Instanz unterschiedlich ist. */
.wl-btn-force-custom {
    background: var(--wl-btn-force-color, var(--color-primary, #1b1d2d)) !important;
    background-size: auto !important;
    animation: none !important;
}

/* Cookie-Consent-Banner -- uebernimmt die Farben des aktiven Designs
   (--color-bg/--color-text/--color-primary), damit er nicht wie ein
   Fremdkoerper wirkt, egal ob helles oder dunkles Theme aktiv ist. */
.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: 480px;
    margin: 0 auto;
    background: var(--color-bg, #fff);
    color: var(--color-text, #1a1a1a);
    border: 1px solid var(--color-primary, rgba(0, 0, 0, 0.1));
    border-radius: 0.6rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: 1.1rem 1.25rem;
    z-index: 300;
}

.cookie-banner__text {
    font-size: 0.85rem;
    margin: 0 0 0.85rem;
    color: inherit;
    opacity: 0.85;
}

.cookie-banner__actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

.cookie-banner .btn {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.cookie-banner .btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--wl-on-primary, #fff);
    font-weight: 600;
}

/* externe-Inhalte-Gate (Google Maps/Bewertungen/FuPa, siehe CookieGate). */
.cookie-gate {
    background: rgba(128, 128, 128, 0.08);
    border: 1px dashed rgba(128, 128, 128, 0.4);
    border-radius: 0.5rem;
    padding: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: inherit;
    opacity: 0.85;
}

.cookie-gate__button {
    display: inline-block;
    margin-top: 0.6rem;
    background: var(--color-primary);
    color: var(--wl-on-primary, #fff);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.4rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    cursor: pointer;
}

/* Seiten-Uebergang "Ueberblenden" (Design-Einstellung scroll_behavior=fade).
   0.6s statt vorher 0.2-0.25s -- sollte sich wie eine langsame PowerPoint-
   Ueberblendung anfuehlen, nicht wie ein kurzes Aufblitzen. Wichtig: das
   verzoegert die Navigation selbst NICHT (site.js ruft kein preventDefault()
   auf, siehe dortiger Kommentar) -- die Animation laeuft nur nebenher, waehrend
   der Browser ohnehin schon zur naechsten Seite navigiert. */
.wl-fade-in {
    animation: wlFadeIn 0.6s ease;
}

.wl-fade-out {
    animation: wlFadeOut 0.6s ease forwards;
}

@keyframes wlFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes wlFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Fuer Browser mit nativer View-Transition-API (siehe "@view-transition"-Block
   in den Theme-Layouts): die eingebaute Standard-Ueberblendung ist mit 0.25s
   ebenfalls recht kurz -- hier auf dieselbe, langsamere Dauer wie den
   JS-Fallback oben gebracht, damit sich der Uebergang unterstuetzten wie
   unterstuetzten Browsern gleich "gemuetlich" anfuehlt. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.6s;
}

/* Popup-Overlay fuer Seiten mit "Als Popup öffnen" (z.B. Impressum) --
   ebenfalls in den Design-Farben, siehe Cookie-Banner. */
.wl-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 400;
    padding: 3rem 1.5rem;
    overflow-y: auto;
}

.wl-popup-overlay--open {
    display: flex;
}

.wl-popup {
    background: var(--color-bg, #fff);
    color: var(--color-text, #1a1a1a);
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.75rem;
    max-width: 700px;
    width: 100%;
    padding: 2rem;
    position: relative;
}

.wl-popup__close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    line-height: 1;
}

.wl-popup__close:hover {
    opacity: 1;
}

/* Automatische Weiterleitung nach Inaktivitaet, siehe
   src/Views/shared/redirect-popup.php + ThemeManager::redirectSettings(). */
.wl-redirect-popup {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(20, 20, 30, 0.55);
    backdrop-filter: blur(6px);
}

.wl-redirect-popup.is-visible {
    display: flex;
}

.wl-redirect-popup__card {
    position: relative;
    background: var(--color-bg, #fff);
    color: var(--color-text, #1a1a1a);
    border-radius: 1.25rem;
    padding: 2.25rem 1.5rem 1.75rem;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    animation: wlRedirectPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wl-redirect-popup__close {
    position: absolute;
    top: 0.6rem;
    right: 0.9rem;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
}

.wl-redirect-popup__close:hover {
    opacity: 1;
}

.wl-redirect-popup__loader {
    width: 84px;
    height: 84px;
    margin: 0 auto 1.1rem;
    position: relative;
}

.wl-redirect-popup__spinner {
    position: absolute;
    inset: 0;
    border: 4px solid rgba(128, 128, 128, 0.2);
    border-top-color: var(--color-primary, #6c5ce7);
    border-radius: 50%;
    animation: wlRedirectSpin 1.1s linear infinite;
}

.wl-redirect-popup__title {
    margin: 0 0 0.35rem;
    color: var(--wl-primary-text, var(--color-primary, #6c5ce7));
    font-size: 1.2rem;
}

.wl-redirect-popup__text {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    opacity: 0.75;
}

.wl-redirect-popup__button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary, #6c5ce7);
    color: var(--wl-on-primary, #fff);
    border-radius: 0.6rem;
    text-decoration: none;
    font-weight: 700;
}

@keyframes wlRedirectSpin {
    100% { transform: rotate(360deg); }
}

@keyframes wlRedirectPopIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

/* Hochgeladenes Website-Logo (Design > Logo) statt Textmarke -- Hoehe an
   der Navigationsleiste orientiert, Breite folgt automatisch mit. Jedes
   Theme kann das bei Bedarf per eigenem CSS ueberschreiben. */
.site-nav__logo {
    display: block;
    height: 2.25rem;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

/* Top-Leiste (Öffnungszeiten/News) -- immer ganz oben, ueber der Navigation. */
.site-topbar {
    background: var(--color-primary);
    color: var(--wl-on-primary, #fff);
    text-align: center;
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
    letter-spacing: 0.02em;
}

.site-topbar a {
    color: #fff !important;
    text-decoration: underline;
}

/* Modus "Kontaktdaten": Adresse, Telefon und E-Mail nebeneinander, jeder
   Punkt direkt anklickbar (siehe ThemeManager::topBar()). Umbricht auf
   schmalen Bildschirmen von selbst, statt die Leiste zu sprengen. Groesser
   als die einzeilige Variante -- mit zwei Textzeilen je Punkt braucht die
   Leiste mehr Luft, sonst wirkt sie gedrungen. */
.site-topbar--contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 2.25rem;
    padding: 0.7rem 1rem;
    font-size: 0.86rem;
}

.site-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    /* Kein Unterstrich: bei drei Punkten nebeneinander wirkt die Leiste
       sonst wie eine Linkliste statt wie eine Infozeile. Das Symbol davor
       macht ohnehin deutlich, dass hier etwas passiert. */
    text-decoration: none !important;
}

.site-topbar__item:hover .site-topbar__line { text-decoration: underline; }

/* Groesseres Symbol als bei der einzeiligen Leiste -- neben zwei
   Textzeilen wirkt ein 1em-Icon (an der ersten Zeile ausgerichtet)
   winzig und optisch unausbalanciert. */
.site-topbar__icon {
    display: inline-flex;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    opacity: 1;
}

.site-topbar__icon svg {
    width: 100%;
    height: 100%;
}

.site-topbar__text-lines {
    display: flex;
    flex-direction: column;
    line-height: 1.28;
    text-align: left;
}

.site-topbar__line {
    font-weight: 600;
    font-size: 0.92em;
}

.site-topbar__sub {
    font-size: 0.82em;
    opacity: 0.72;
}

/* Am Handy zaehlt nur, dass man anrufen kann -- die Adresse macht die
   Leiste dort zweizeilig, ohne etwas beizutragen (sie steht im Footer). */
@media (max-width: 600px) {
    .site-topbar--contact .site-topbar__item:first-of-type { display: none; }
    .site-topbar--contact { gap: 0.5rem 1.25rem; font-size: 0.78rem; }
    .site-topbar__icon { width: 1.1rem; height: 1.1rem; }
}

/* Footer immer ganz unten, auch bei kurzen Seiten. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Den 8px-Standardrand des Browsers wegnehmen. Bisher musste das jedes
       Theme selbst tun -- wer es vergass, bekam einen hellen Streifen rund
       um jeden randlosen Abschnitt (Hero-Video, Bildband) und merkte es
       oft erst spaet. Themes, die margin selbst setzen, bleiben davon
       unberuehrt: ihr CSS laedt nach diesem. */
    margin: 0;
}

body > main,
body > .page-layout {
    flex: 1 0 auto;
}

body > .site-footer,
body > .footer-credit-bar {
    flex-shrink: 0;
}

/* Navigations-Position, vom Design vorgegeben (theme.json nav_position).
   'top' ist der Standard und braucht keine Zusatzregeln. */

/* Seitlich: Navigation als linke Spalte, Inhalt daneben. */
@media (min-width: 900px) {
    body:has(.site-nav--side) {
        display: grid;
        grid-template-columns: 220px 1fr;
        grid-template-rows: auto 1fr auto auto;
        min-height: 100vh;
    }

    .site-nav--side {
        grid-row: 1 / -1;
        grid-column: 1;
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        border-bottom: none;
        border-right: 1px solid rgba(128, 128, 128, 0.2);
    }

    .site-nav--side .site-nav__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem 1.25rem;
    }

    .site-nav--side .site-nav__brand {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .site-nav--side .site-nav__links {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
    }

    .site-nav--side .site-nav__dropdown {
        position: static;
        display: flex;
        box-shadow: none;
        border: none;
        background: none;
        padding: 0.25rem 0 0 0.85rem;
        min-width: 0;
    }

    body:has(.site-nav--side) > main,
    body:has(.site-nav--side) > .page-layout,
    body:has(.site-nav--side) > .site-footer,
    body:has(.site-nav--side) > .footer-credit-bar,
    body:has(.site-nav--side) > .site-topbar {
        grid-column: 2;
    }
}

/* Unter dem Kopfbereich: Navigation nicht angeheftet, sondern mitscrollend. */
.site-nav--bottom {
    position: static;
}

/* Cookie-Consent mit drei Kategorien. */
.cookie-banner {
    max-width: 540px;
}

.cookie-banner__title {
    font-weight: 700;
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
}

.cookie-banner__options {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.9rem 0;
}

.cookie-option {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.82rem;
    cursor: pointer;
}

.cookie-option input {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.cookie-option input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cookie-option small {
    display: block;
    opacity: 0.7;
    font-size: 0.75rem;
    margin-top: 0.1rem;
}

.cookie-banner__actions {
    flex-wrap: wrap;
}

.footer-credit-bar__engine {
    opacity: 0.55;
}

/* Wortmarke: durchgaengig klein, "fils" fett, Rest duenn (siehe App\Core\Brand). */
.brand {
    text-transform: lowercase;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.brand__bold { font-weight: 700; }
.brand__thin { font-weight: 300; }

/* --- Scroll-Animation (Design > Feinschliff) ---------------------------- */
/* Die Klasse "wl-animate" wird SYNCHRON im <head> gesetzt (siehe
   ThemeManager::animationsBootstrap()), damit hier von Anfang an die
   richtige Regel greift -- kein kurzes Aufblitzen des unanimierten
   Zustands. assets/site.js blendet jeden Abschnitt beim Hereinscrollen ein. */
html.wl-animate .widget {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

html.wl-animate--up .widget { transform: translateY(18px); }
html.wl-animate--left .widget { transform: translateX(-40px); }
html.wl-animate--right .widget { transform: translateX(40px); }

html.wl-animate .widget.wl-in-view {
    opacity: 1;
    transform: none;
}

/* --- Fehlerseite (404, siehe Response::notFoundPage()) ---------------- */
.widget-error-404 {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--wl-section-spacing, 4rem) 1.5rem;
    text-align: center;
}

.error-404__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 1rem;
}

.error-404__message {
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.65;
    margin: 0 0 2rem;
}

.error-404__link {
    display: inline-block;
    padding: 0.85rem 2rem;
    border-radius: var(--wl-radius, 1rem);
    background: var(--color-primary, #1b1d2d);
    color: var(--wl-on-primary, #fff);
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.error-404__link:hover { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
    html.wl-animate .widget {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Dreh-Captcha (App\Core\RotateCaptcha) -- gemeinsames CSS, da sowohl das
   Kontaktformular-Widget als auch der Formular-Baukasten es einbinden. */
.wl-rotate-captcha {
    background: var(--wl-captcha-bg, rgba(118, 231, 210, 0.12));
    border-radius: var(--wl-radius, 1rem);
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

.wl-rotate-captcha__stage {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(27, 29, 45, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wl-rotate-captcha__arrow {
    /* Ein normales <div> statt direkt am <svg> zu drehen: bei einem
       SVG-Wurzelelement ist die implizite Rotationsmitte je nach
       Browser/Engine unterschiedlich (z.B. Ecke statt Zentrum, siehe
       transform-box/-origin-Versuch zuvor), bei einem Block-Element ist die
       Mitte dagegen immer eindeutig 50%/50% -- keine Ambiguitaet moeglich. */
    width: 2.6rem;
    height: 2.6rem;
    transform-origin: center;
}

.wl-rotate-captcha__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wl-rotate-captcha label {
    font-size: 0.85rem;
    font-weight: 600;
}

.wl-rotate-captcha input[type="range"] {
    width: 100%;
    max-width: 220px;
    accent-color: color-mix(in srgb, var(--color-primary, #a77df5) 62%, #fff);
}

/* Wiederverwendbares Geraete-Rahmenbild (siehe App\Core\DeviceFrame): ein
   Foto/PNG mit durchsichtigem Bildschirmbereich legt sich sichtbar UEBER
   den eigentlichen Inhalt, der als absolut positionierte Ebene dahinter
   liegt -- Position/Groesse des Ausschnitts kommt als Inline-Style
   (individuelle Prozentwerte je Rahmenbild). Urspruenglich nur in
   Hero-Studio, jetzt zentral fuer jedes Widget nutzbar (z.B. Projekte). */
.wl-device-frame {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}

.wl-device-frame__image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
}

.wl-device-frame__screen {
    position: absolute;
    z-index: 1;
    overflow: hidden;
}

.wl-device-frame__screen img,
.wl-device-frame__screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Grossflaechiger Seiten-Hintergrund (siehe ThemeManager::heroBackgroundHtml()):
   ein eigener, vom Theme unabhaengiger Bereich direkt unter der Navigation,
   ueber Design > Farben & Layout als Bild ODER Video aktivierbar. Nur
   Basis-Groesse/-Verhalten hier -- Farbton des Verlaufs (Scrim) darf jedes
   Theme in seiner eigenen style.css ueberschreiben. */
.wl-hero-bg {
    position: relative;
    width: 100%;
    height: 62vh;
    min-height: 380px;
    max-height: 720px;
    overflow: hidden;
}

.wl-hero-bg__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-hero-bg__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 55%, var(--color-bg, #fff) 100%);
}

/* --- Newsletter-Anmeldung -------------------------------------------------
 * Bewusst HIER und nicht in widgets/newsletter/css/style.css: das Formular
 * steht auch im Footer, und Widget-CSS wird nur geladen, wenn das Widget
 * tatsaechlich auf der Seite liegt. Ohne diese Regeln war im Footer der
 * Honigtopf ("Bitte leer lassen") sichtbar und der Knopf unformatiert.
 */
.newsletter-form__row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    /* stretch statt center: Feld und Knopf sind dadurch immer exakt gleich
       hoch, auch wenn Rahmen/Zeilenhoehe sich je Theme unterscheiden. */
    align-items: stretch;
}

.newsletter-form__input {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(128, 128, 128, 0.35);
    background: rgba(255, 255, 255, 0.9);
    color: #1b1d2d;
    font: inherit;
    font-size: 0.9rem;
}

/*
 * Der Knopf wird hier VOLLSTAENDIG gestylt statt sich auf ".btn" zu
 * verlassen: ".btn" ist nirgends global definiert, sondern nur innerhalb
 * einzelner Widget-Stylesheets -- im Footer gab es deshalb den grauen
 * Browser-Standardknopf. --wl-btn-bg ist die im Design eingestellte
 * Button-Optik (einfarbig/Verlauf, siehe ThemeManager), damit der Knopf
 * automatisch zum Rest der Website passt.
 */
.newsletter-form__submit {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.6rem 1.25rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--wl-btn-bg, var(--color-primary, #6c5ce7));
    color: var(--wl-btn-fg, #fff);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.newsletter-form__submit:hover {
    filter: brightness(1.08);
}

.newsletter-form__submit:active {
    transform: translateY(1px);
}

/* Honigtopf gegen Bots: fuer Menschen unsichtbar, fuer Bots aber vorhanden.
   Bewusst NICHT display:none -- manche Bots ueberspringen genau das und der
   Schutz liefe ins Leere. */
.newsletter-form__hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.newsletter-form__ok,
.newsletter-form__error {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    text-align: left;
}

.newsletter-form__ok {
    background: rgba(62, 180, 137, 0.15);
    border: 1px solid rgba(62, 180, 137, 0.5);
}

.newsletter-form__error {
    background: rgba(220, 80, 80, 0.12);
    border: 1px solid rgba(220, 80, 80, 0.45);
}

/* Footer-Variante: kompakter und linksbuendig im Spaltenraster. */
.site-footer__newsletter {
    margin: 0.75rem 0;
}

.site-footer__newsletter-title {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/* Zentriert unter der Ueberschrift -- ohne "margin: auto" klebte das
   Formular trotz zentrierter Ueberschrift am linken Rand. */
.site-footer__newsletter {
    text-align: center;
}

.newsletter-form--footer {
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form--footer .newsletter-form__row {
    justify-content: center;
}

.newsletter-form--footer .newsletter-form__input,
.newsletter-form--footer .newsletter-form__submit {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
}

/* Ergebnisseite nach dem Abmelden (siehe NewsletterController::unsubscribe). */
.newsletter-result {
    max-width: 38rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    text-align: center;
}

/*
 * Unsichtbar am Bildschirm, aber vorhanden fuer Suchmaschinen und
 * Screenreader. Bewusst NICHT display:none -- das wuerde den Text auch
 * fuer beide unsichtbar machen (siehe ThemeManager::renderPage(), das die
 * Seiten-<h1> auf diese Weise ergaenzt, wenn kein Modul eine setzt).
 */
.wl-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Sprachumschalter ─────────────────────────────────────────────────
   Erscheint nur, wenn mehr als eine Sprache eingerichtet ist (siehe
   shared/nav.php). Bewusst zurueckhaltend: er ist ein Hilfsmittel, kein
   Menuepunkt -- deshalb kleiner und leiser als die uebrigen Links, aber
   mit deutlich markierter aktueller Sprache. */
/* Fest oben rechts, ausserhalb des Menues (siehe nav.php). Die Reihe
   steht damit auf jeder Bildschirmbreite an derselben Stelle -- auch auf
   dem Handy, wo das Menue zugeklappt ist. */
.site-nav__languages {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: 0.35rem;
    order: 90;
    flex: 0 0 auto;
}

.site-nav__language {
    display: inline-block;
    padding: 0.2rem 0.45rem;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: inherit;
    /* 0.6 lag knapp unter der Lesbarkeitsschwelle (4,37:1 statt 4,5:1).
       Die nicht gewaehlte Sprache soll zurueckhaltend wirken, aber lesbar
       bleiben -- 0.72 schafft beides. */
    opacity: 0.72;
}

@media (hover: hover) {
    .site-nav__language:hover {
        opacity: 1;
        background: rgba(128, 128, 128, 0.14);
    }
}

.site-nav__language--active {
    opacity: 1;
    background: rgba(128, 128, 128, 0.16);
}

/* Auf dem Handy bleibt der Umschalter, wo er ist: oben rechts, neben dem
   Menueknopf. Frueher klappte er mit dem Menue auf -- wer die Seite auf
   Englisch lesen wollte, musste dafuer erst das Menue oeffnen.

   Die Tippziele werden dabei groesser, nicht kleiner: eine Fingerkuppe
   braucht rund 44 Pixel. */
@media (max-width: 780px) {
    .site-nav__languages {
        margin: 0 0.35rem 0 auto;
        gap: 0.15rem;
        order: 0;
    }

    .site-nav__language {
        padding: 0.5rem 0.55rem;
        font-size: 0.85rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

}

/* ── Feinabstimmung (Design > Feinschliff) ────────────────────────────────
   Die Werte kommen als Custom Properties aus ThemeManager::designStyleCss().
   Bewusst hier gebündelt statt in jedem Modul-Stylesheet: so wirkt eine
   Umstellung überall gleich, und ein Modul muss nichts davon wissen. */
.widget {
    line-height: var(--wl-text-line-height, 1.6);
}

/* Inhaltsbreite: greift auf die üblichen Modul-Container. Module mit
   eigener, bewusst abweichender Breite (Vollbild-Hero) setzen ihre eigene
   und bleiben unberührt. */
main > .widget,
.widget > .widget__inner {
    max-width: var(--wl-content-width, 75rem);
    margin-left: auto;
    margin-right: auto;
}

/* Bilder in Modulen */
.widget img:not(.site-nav__logo):not(.site-footer__logo) {
    border-radius: var(--wl-image-radius, var(--wl-radius, 1rem));
}

/* Kreis nur für quadratische Bildflächen sinnvoll -- bei Portraits/Logos
   in Team- und Referenz-Modulen ist er genau richtig, bei einem breiten
   Bühnenbild nicht. Deshalb dort zusätzlich das Seitenverhältnis erzwingen,
   sonst entstünde eine Ellipse. */
:root[style*="--wl-image-radius:50%"] .widget img,
.widget .team-card__photo img,
.widget .team-list__photo img {
    aspect-ratio: auto;
}

/* Buttons */
.wl-btn-dynamic,
.widget .btn,
.widget button[type="submit"] {
    border-radius: var(--wl-button-radius, var(--wl-radius, 1rem));
}

/* Rahmenstärke für Karten-artige Flächen */
.widget .card,
.widget [class*="-card"] {
    border-width: var(--wl-border-width, 1px);
    border-color: var(--wl-border-color, rgba(128, 128, 128, 0.22));
}

/* ── Handy: Fingerkuppen statt Mauszeiger ─────────────────────────────────
   Auf dem Handy wird nicht geklickt, sondern getippt -- und eine Fingerkuppe
   ist rund 9 mm breit. Links, die nur 23 Pixel hoch sind und dicht
   nebeneinander stehen (Impressum · Datenschutz · Kontakt), trifft man damit
   nicht zuverlässig: man landet im Nachbarn.

   Deshalb bekommen antippbare Elemente hier eine Mindesthöhe. Umgesetzt über
   PADDING statt fester Höhe, damit sich am Aussehen nichts ändert -- die
   Fläche wächst nach innen, die Schrift bleibt, wo sie war. */
@media (hover: none) and (pointer: coarse), (max-width: 780px) {
    .site-footer__links a,
    .site-footer__column a,
    .site-footer--centered .site-footer__links--row a,
    .footer-credit-bar a,
    .site-nav__link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    /* Die Links im Footer stehen in einer Reihe -- mit größerer Trefffläche
       brauchen sie auch mehr Abstand zueinander, sonst überlappen sie. */
    .site-footer__links,
    .site-footer--centered .site-footer__links--row {
        gap: 0.5rem 1.5rem;
        flex-wrap: wrap;
    }

    /* Aktionsknöpfe: ein Knopf, den man nicht trifft, ist kein Knopf. */
    .wl-btn-dynamic,
    .cta-banner__link,
    .site-nav__cta,
    .widget .btn,
    .widget button[type="submit"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Schliessen-Kreuze sind klein und stehen oft in einer Ecke -- genau
       die Kombination, die man auf dem Handy dreimal antippt. */
    .widget-announcement__close,
    .wl-lightbox__close,
    .showcase-lightbox__close,
    [data-close],
    .wl-vcard-modal__close {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Textlinks in Karten ("Mehr erfahren") stehen einzeln und mit Abstand --
       40 Pixel reichen dort, mehr wuerde die Karte auseinanderziehen. */
    .service-card__link,
    .team-card__button,
    .news-card__link,
    .project-grid__link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Die Credit-Leiste ganz unten ist bewusst klein -- aber ihre Links
       müssen trotzdem tippbar sein. */
    .footer-credit-bar {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
}

/* ── Suche in der Navigation ──────────────────────────────────────────────
   Ein schlichtes Formular -- funktioniert auch ohne JavaScript und führt
   auf die vorhandene Suchseite. */
/* ── Suche: nur die Lupe, direkt neben der Marke ────────────────────────
   Ein dauerhaft offenes Eingabefeld kostet in der Kopfzeile den Platz von
   zwei Menuepunkten -- auf jeder Seite, egal ob jemand sucht. Deshalb
   klappt es erst auf Knopfdruck auf.

   Ohne JavaScript bleibt das Feld sichtbar: die Klasse .nav-search--js wird
   vom Skript gesetzt, und nur sie schliesst das Feld zu. Kein Skript, kein
   Zuklappen -- die Suche funktioniert trotzdem. */
.site-nav__search {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.6rem;
    /* Der Abstand zum Menue kommt von hier statt von der Marke -- die Lupe
       soll direkt neben dem Logo stehen, nicht in der Mitte schweben. */
    margin-right: auto;
}

/* Steht eine Suche hinter der Marke, gibt die Marke ihren Schubser ab:
   sonst schoeben beide, und die Lupe landete in der Mitte.

   :has() kennt jeder aktuelle Browser. Wo nicht, bleibt es beim bisherigen
   Bild -- die Lupe steht dann weiter rechts, funktioniert aber genauso. */
.site-nav__brand:has(+ .site-nav__search) {
    margin-right: 0;
}

/* Der Lupenknopf erscheint erst, wenn das Skript laeuft -- ohne Skript
   waere er ein Knopf ohne Wirkung. */
.site-nav__search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

@media (hover: hover) {
    .site-nav__search-toggle:hover { background: rgba(128, 128, 128, 0.14); }
}

.nav-search--js .site-nav__search-toggle { display: inline-flex; }

/* Zugeklappt: Feld und Absenden-Knopf verschwinden vollstaendig aus der
   Zeile -- nicht nur unsichtbar, sondern ohne Platzbedarf und ohne
   Tabstopp. */
.nav-search--js .site-nav__search:not(.is-open) .site-nav__search-input,
.nav-search--js .site-nav__search:not(.is-open) .site-nav__search-btn {
    display: none;
}

.site-nav__search-input {
    width: 9rem;
    padding: 0.4rem 0.7rem;
    font: inherit;
    font-size: 0.85rem;
    color: inherit;
    background: rgba(128, 128, 128, 0.12);
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 999px;
    transition: width 0.2s ease, background 0.2s ease;
}

/* Beim Hineinklicken wird das Feld breiter -- so nimmt es im Ruhezustand
   wenig Platz und bietet beim Tippen trotzdem genug Raum. */
.site-nav__search-input:focus {
    width: 13rem;
    outline: none;
    background: rgba(128, 128, 128, 0.18);
    border-color: currentColor;
}

.site-nav__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.75;
}

@media (hover: hover) {
    .site-nav__search-btn:hover { opacity: 1; background: rgba(128, 128, 128, 0.14); }
}

@media (max-width: 780px) {
    .site-nav__search {
        margin: 0.5rem 0 0;
        width: 100%;
    }

    .site-nav__search-input,
    .site-nav__search-input:focus {
        width: 100%;
        min-height: 44px;
    }

    .site-nav__search-btn { min-width: 44px; min-height: 44px; }
}

/* ── Sitemap im Footer ────────────────────────────────────────────────────
   Alle Seiten auf einen Blick, nach Ebene gegliedert. Für Besucher eine
   Orientierung, für Suchmaschinen ein Satz interner Links von jeder Seite
   aus -- beides zusammen ist der Grund, warum Footer-Sitemaps sich halten. */
/* Kompakt gehalten: die Sitemap ist eine Orientierungshilfe, kein
   zweites Menue. Mit voller Schriftgroesse wog der Footer schwerer als
   der Seiteninhalt darueber -- schmalere Spalten und kleinere Schrift
   bringen ihn zurueck in die Nebenrolle. */
.site-footer__sitemap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.9rem 1.5rem;
    margin: 1.1rem 0;
    text-align: left;
    font-size: 0.82rem;
}

.site-footer__sitemap-group .site-footer__heading {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.65;
}

.site-footer__sitemap-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__sitemap-group li { margin-bottom: 0.18rem; }

.site-footer__sitemap-group a {
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
    font-size: 0.8rem;
    line-height: 1.45;
}

.site-footer__sitemap-group a:hover { opacity: 1; text-decoration: underline; }

/* Der Beschreibungstext neben der Sitemap: was die Firma macht, wo sie
   sitzt. Steht bewusst im Footer jeder Seite -- für Menschen als Einordnung,
   für die lokale Suche als wiederkehrende Angabe. */
.site-footer__about {
    max-width: 34rem;
    margin: 0 0 1.25rem;
    font-size: 0.88rem;
    line-height: 1.6;
    opacity: 0.8;
    text-align: left;
}

.site-footer--minimal .site-footer__about,
.site-footer--centered .site-footer__about {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ── Sprungmarke zum Inhalt ──────────────────────────────────────────────
   Erste Station beim Tabben. Ohne sie muss sich jemand, der mit der
   Tastatur bedient, auf JEDER Seite erst durch die gesamte Navigation
   arbeiten (WCAG 2.4.1 "Bypass Blocks").

   Nicht display:none und nicht visibility:hidden -- beides nimmt das
   Element aus der Tabreihenfolge, und dann gibt es die Sprungmarke
   faktisch nicht mehr. Stattdessen wird sie aus dem Bild geschoben und
   kommt beim Fokus zurueck. */
.wl-skiplink {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: var(--color-primary, #1b1d2d);
    color: var(--wl-on-primary, #fff);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 0.5rem 0;
    /* Nach oben aus dem Bild geschoben, aber weiterhin vorhanden. */
    transform: translateY(-120%);
    transition: transform 0.15s ease-out;
}

.wl-skiplink:focus,
.wl-skiplink:focus-visible {
    transform: translateY(0);
    outline: 3px solid currentColor;
    outline-offset: -3px;
}

/* Damit der Sprung nicht unter einer festen Kopfzeile landet. */
#wl-inhalt {
    scroll-margin-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
    .wl-skiplink { transition: none; }
}

/* ── Sichtbarer Fokus, ueberall ──────────────────────────────────────────
   Wer mit der Tastatur bedient, muss sehen, wo er steht. Vorher hatte das
   nur, wer daran gedacht hat -- rund dreissig Module hatten gar keine
   Fokusmarkierung.

   :where() hat die Spezifitaet null. Diese Regel ist also nur ein
   Rueckfall: sobald ein Modul eine eigene Fokusgestaltung mitbringt,
   gewinnt die. Ein Sicherheitsnetz, kein Vorschreiben. */
:where(a, button, input, select, textarea, summary, details, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid var(--color-primary, currentColor);
    outline-offset: 2px;
    border-radius: var(--wl-radius, 0.25rem);
}

/* ── Bewegung abbestellen ────────────────────────────────────────────────
   Wer in den Systemeinstellungen "Bewegung reduzieren" gewaehlt hat, tut
   das haeufig aus gesundheitlichen Gruenden: bei vestibulaeren Stoerungen
   koennen bewegte Flaechen Schwindel und Uebelkeit ausloesen.

   Diese Regel gilt fuer ALLES -- auch fuer Module, die nicht selbst daran
   gedacht haben. Nicht "0s", sondern eine verschwindend kleine Dauer:
   damit laufen Uebergaenge technisch noch ab und Ereignisse, die an ihr
   Ende geknuepft sind, treten weiterhin ein. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Suche auf dem Handy ─────────────────────────────────────────────────
   Steht bewusst am DATEIENDE: bei gleicher Spezifitaet gewinnt die spaetere
   Regel, und die Grundregeln fuer die Lupe stehen weiter oben. */
@media (max-width: 780px) {
    .site-nav__search {
        margin-left: 0.2rem;
        margin-right: 0;
    }

    /* Eine Fingerkuppe braucht rund 44 Pixel. */
    .site-nav__search-toggle {
        width: 44px;
        height: 44px;
    }

    /* Aufgeklappt legt sich das Feld auf volle Breite unter die Kopfzeile,
       statt sie zu sprengen. */
    .nav-search--js .site-nav__search.is-open {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        padding: 0.6rem 1rem;
        background: var(--color-bg, #fff);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
        z-index: 60;
    }

    .nav-search--js .site-nav__search.is-open .site-nav__search-input {
        width: 100%;
        min-height: 44px;
    }

    .nav-search--js .site-nav__search.is-open .site-nav__search-toggle {
        flex: 0 0 auto;
    }
}