/**
 * 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;
}

html {
    scroll-behavior: smooth;
}

/* 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);
}

.site-footer--style-accent {
    background: linear-gradient(135deg, #e3f8f3, #f1eafd);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #76e7d2) 22%, #fff), color-mix(in srgb, #a77df5 22%, #fff));
    color: #1b1d2d;
    border-top: 1px solid rgba(118, 231, 210, 0.45);
    border-top: 1px solid color-mix(in srgb, var(--color-primary, #76e7d2) 45%, 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), #a77df5);
    -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 {
    opacity: 0.6;
    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 h4 {
    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 {
    opacity: 0.6;
    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: #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;
}

.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;
}

.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, #76e7d2, #a77df5);
    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; }
}

.site-nav__dropdown {
    display: none;
    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;
}

.site-nav__item--has-children:hover .site-nav__dropdown {
    display: flex;
}

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

.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;
    }

    /* --- 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 {
        min-width: 0;
        flex: 1;
    }

    .site-nav__logo-text {
        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%;
    }

    .site-nav__item--has-children:hover .site-nav__dropdown {
        display: none;
    }

    .site-nav__item--has-children .site-nav__dropdown {
        display: block;
    }
}

/* 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), #a77df5);
    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));
    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;
}

.wl-btn-force-gradient {
    background: linear-gradient(120deg, var(--color-primary, #76e7d2), #a77df5, 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: #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: #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(--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: #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: #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;
}

/* Footer immer ganz unten, auch bei kurzen Seiten. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

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: #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: #a77df5;
}

/* 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: #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;
}