/* ===================================================================
   BAENDER — das neue Theme der Startseite
   ===================================================================
   Zwei Farben, mehr nicht. Apricot ist der Grund, Lila liegt als Platte
   darauf — deshalb wirft Lila den Schatten und nicht umgekehrt. Schrift
   ist immer die jeweils andere Farbe.

   KEINE ZWISCHENTOENE. Verboten sind opacity auf Text, rgba-Rahmen und
   Schatten in einem eigenen dunklen Ton. Schatten sind Velvet Purple mit
   Deckkraft, damit jeder gemalte Pixel eine Mischung aus genau diesen
   Farben bleibt.

   Kontrast Apricot auf Lila: 4,84:1 — ueber der Norm, aber knapp. Ab
   etwa #F5A96E faellt es durch, weiter Richtung Orange geht nicht.

   Diese Datei ist die GEMEINSAME SPRACHE aller Bereiche und haengt
   vollstaendig an body.ov-baender: Palette, Schrift, Kopf, Fuss, Menue,
   Modal, Banner, Buehne, Platte, Karten und der scrollgebundene Aufbau.

   Je Bereich kommt eine Datei dazu (siehe openvuture_baender_bereich()):
     baender-seiten.css  Inhaltsseiten
     baender-shop.css    Kaufweg - dieselbe Palette, aber ruhig
   Die Szenen-Regeln weiter unten greifen nur, wo es die Klassen gibt.
   =================================================================== */

body.ov-baender {
    --lila: #613F75;   /* Baender, Schrift auf hellem Grund */
    /* Eine Spur mehr Weiss als frueher (#FFB37D): ruhiger im grossen
       Feld, und der Kontrast steigt dabei mit — gegen Lila von 4,84
       auf 5,14, gegen die Kopf- und Fussleiste von 6,24 auf 6,62. */
    --apri: #FFBB8A;   /* heller Grund, Schrift auf lila Grund */
    --band: #4C325D;   /* ausschliesslich Kopf- und Fussleiste */

    /* Schatten: dieselbe Farbe mit Deckkraft, kein eigener dunkler Ton */
    --schatten:        rgba(97, 63, 117, 0.55);
    --schatten-eng:    rgba(97, 63, 117, 0.38);
    --schatten-karte:  rgba(97, 63, 117, 0.45);

    /* KEIN system-ui und kein ui-sans-serif in diesen Listen.
       "system-ui" ist die Schrift der Arbeitsumgebung des Besuchers — wer
       dort eine dicktengleiche Schrift eingestellt hat (Nerd Font, JetBrains
       Mono und so weiter), bekam die GANZE Seite in Schreibmaschinenschrift.
       Genau das ist beim User aufgetreten. Deshalb stehen hier nur Schriften,
       die wirklich Proportionalschriften sind, und am Ende die Gattung. */
    --fd: "Trebuchet MS", "Gill Sans", Optima, Candara, "Segoe UI", Roboto,
          "Noto Sans", "DejaVu Sans", "Liberation Sans", Helvetica, Arial, sans-serif;
    --fs: "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "DejaVu Sans",
          "Liberation Sans", Helvetica, Arial, sans-serif;
    --fm: SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono",
          "Liberation Mono", monospace;

    --breite: 1580px;
    --welle: 120px;

    /* Die vorhandenen Tokens auf die neue Palette umbiegen. Damit folgen
       Kopf, Fuss, Modal und Banner mit, ohne dass jede Regel einzeln
       nachgezogen werden muss. */
    --color-bg:           var(--apri);
    --color-surface:      var(--band);
    --color-surface-alt:  var(--lila);
    --color-surface-alt2: var(--band);
    --color-accent:       var(--lila);
    --color-accent-light: var(--apri);
    --color-accent-muted: transparent;
    --color-border:       var(--apri);
    --color-border-hover: var(--apri);
    --color-text:         var(--lila);
    --color-text-muted:   var(--lila);
    --color-text-faint:   var(--lila);
    --shadow-sm: 0 2px 8px  var(--schatten-eng);
    --shadow-md: 0 4px 20px var(--schatten-eng);
    --shadow-lg: 0 8px 40px var(--schatten);
}

/* Die Platten ragen seitlich ueber das Fenster hinaus, damit sie von der
   Seite hereinlaufen koennen und am Ende trotzdem ueberall decken. Das
   darf keinen Querscroller erzeugen — und der Balken haengt am <html>,
   nicht am <body>. */
html:has(body.ov-baender) { overflow-x: hidden; }

body.ov-baender {
    /* Die Startseite ist hell gemeint. Ohne diese Angabe faerbt der Browser
       Formularfelder, Bildlaufleisten und Auswahlmenues dunkel ein, weil
       pages.css fuer den Rest der Seite color-scheme: dark setzt. */
    color-scheme: light;
    background: var(--apri);
    background-image: none;
    color: var(--lila);
    font-family: var(--fs);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body.ov-baender h1,
body.ov-baender h2,
body.ov-baender h3 {
    font-family: var(--fd);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0;
}

/* base.css faerbt h1-h4 hart auf --color-text. Das ist im Baender-Theme Lila
   und damit auf jedem lila Band unsichtbar - die Ueberschriften muessen die
   Farbe ihres Untergrunds erben (.auf-lila / .auf-apri, bzw. die der Karte,
   auf der sie liegen). Gleiches gilt fuer die Haarlinie unter .spur__t, die
   currentColor benutzt. */
body.ov-baender .szene h1,
body.ov-baender .szene h2,
body.ov-baender .szene h3,
body.ov-baender .szene h4 { color: inherit; }

body.ov-baender :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ===================================================================
   Splash
   =================================================================== */
body.ov-baender .splash-screen { background: var(--band); }


/* ===================================================================
   Kopfleiste
   ===================================================================
   Volle Breite in --band, keine Rundungen, kein Rahmen, kein Blur. Sie
   blendet beim Runterscrollen aus und beim Hochscrollen wieder ein
   (Klasse .weg, gesetzt in script.js). */
body.ov-baender .top-nav {
    /* Bewusst sticky und nicht fixed: als fixed lag die Leiste ueber dem
       Umbau-Banner und schnitt dessen obere Haelfte ab. Sticky bleibt im
       Fluss, das Wegblenden uebernimmt trotzdem transform. */
    position: sticky;
    top: 0;
    margin: 0;
    padding: 20px 54px;
    background: var(--band);
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
body.ov-baender .top-nav.weg { transform: translateY(-100%); }

body.ov-baender nav.top-nav .logo-image { height: clamp(42px, 4.4vw, 66px); }

/* Gefuellte Pillen. Knoepfe ohne Flaeche hat der User ausdruecklich
   abgelehnt — auf der ganzen Startseite traegt jeder Knopf die volle
   Gegenfarbe seines Untergrunds, genau wie die Karten. */
body.ov-baender .top-nav .nav-btn {
    padding: 10px 20px;
    border-radius: 999px;
    border: none;
    background: var(--apri);
    color: var(--band);
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
body.ov-baender .top-nav .nav-btn:hover { transform: translateY(-2px); }
body.ov-baender .hamburger { color: var(--apri); }


/* ===================================================================
   Fussleiste
   ===================================================================
   Fest am unteren Rand, die Buehne schiebt sich darueber. Der Abstand
   unter der Buehne wird zur Laufzeit gemessen (ResizeObserver in
   script.js) — fest verdrahtete Werte standen schon einmal gegen die
   tatsaechliche Hoehe und die letzten Zeilen verschwanden. */
@media (min-width: 821px) {
    body.ov-baender .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* UEBER der Buehne (z-index 10), aber unter Kopfleiste (1000) und
           Sprachschalter. Frueher lag der Fuss mit z-index 1 darunter und
           die Buehne schob sich darueber — jetzt umgekehrt. */
        z-index: 40;
        width: 100%;
        margin: 0;
        /* Unterwegs steht er ausserhalb des Bildes. script.js setzt
           .ist-da, sobald das Seitenende erreicht ist. Ohne JS bleibt die
           Klasse aus — deshalb faehrt er dann NICHT heraus, siehe unten. */
        transform: translateY(100%);
        transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
    }
    body.ov-baender .footer.ist-da { transform: translateY(0); }

    /* Notbremse: ohne JavaScript gibt es kein .ist-da. Dann soll der Fuss
       sichtbar bleiben, statt fuer immer aus dem Bild zu stehen. */
    html:not(.js) body.ov-baender .footer { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.ov-baender .footer { transition: none; }
}

body.ov-baender .footer {
    background: var(--band);
    color: var(--apri);
    /* Unten 54 px frei fuer den fest sitzenden Sprachschalter, siehe pages.css */
    padding: 26px 42px 54px;
}
body.ov-baender .footer-nav .nav-btn,
body.ov-baender .footer-copyright,
body.ov-baender .footer-copyright p,
body.ov-baender .footer-signatur__text,
body.ov-baender .footer-pride__text {
    color: var(--apri);
}

/* Alle Bloecke des Fusses auf dieselbe Breite wie der Seiteninhalt. Sonst
   laufen Zahlungsarten und Social bis an die Fensterraender, waehrend die
   Navigation darueber in der Mitte steht — das war der verstreute Eindruck. */
body.ov-baender .footer-content,
body.ov-baender .footer-bottom,
body.ov-baender .footer-schluss {
    width: 100%;
    max-width: var(--breite);
    margin-left: auto;
    margin-right: auto;
}
body.ov-baender .footer-signatur__text { font-size: 34px; }
body.ov-baender .footer-nav { border-bottom-color: var(--apri); }
body.ov-baender .footer-nav .nav-btn:hover { color: var(--apri); text-decoration: underline; }

body.ov-baender .footer-nl-btn {
    background: var(--apri);
    border: none;
    color: var(--band);
    font-weight: 700;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
body.ov-baender .footer-nl-btn:hover { transform: translateY(-2px); }
/* Der Ring um die Flagge ist Apricot statt Weiss — keine Fremdfarbe */
body.ov-baender .footer-pride__flag {
    box-shadow: 0 0 0 1px var(--apri);
}
body.ov-baender .footer-social-link {
    background: var(--apri);
    color: var(--band);
}
body.ov-baender .footer-social-link:hover { background: var(--band); color: var(--apri); }


/* ===================================================================
   Mobiles Menue
   ===================================================================
   Es liegt als dunkle Flaeche ueber der Seite. --color-text ist im
   Baender-Theme aber Lila, also stand die Schrift dunkel auf dunkel. Die
   Eintraege bekommen deshalb dieselbe Pillenform wie in der Kopfleiste. */
body.ov-baender .mobile-menu { background: var(--band); }
/* bg-purple.jpg entfaellt im Baender-Theme — der Marmor schimmerte sonst
   als Muster durch das Menue. */
body.ov-baender .mobile-menu::before { display: none; }
body.ov-baender .mobile-menu-header { border-bottom-color: var(--apri); }
body.ov-baender .mobile-menu-close { color: var(--apri); }
body.ov-baender .mobile-menu-close:hover { background: var(--apri); color: var(--band); }
body.ov-baender .mobile-menu-nav .nav-btn {
    background: var(--apri);
    border: none;
    border-radius: 999px;
    color: var(--band);
    font-weight: 700;
}
body.ov-baender .mobile-menu-nav .nav-btn::after { color: var(--band); }
body.ov-baender .mobile-menu-nav .nav-btn:hover { transform: translateY(-2px); }


/* ===================================================================
   Newsletter-Modal
   ===================================================================
   Der Kasten ist eine lila Flaeche auf hellem Grund — also dieselbe
   Staffelung wie eine Karte: volle Gegenfarbe, Eingabefeld und Knopf
   wiederum in Apricot. Der Schleier dahinter ist --band mit Deckkraft und
   nicht Schwarz, damit keine dritte Farbe ins Bild kommt. */
body.ov-baender .nl-modal { background: rgba(76, 50, 93, 0.82); }
body.ov-baender .nl-modal__box {
    background: var(--lila);
    border: none;
    border-radius: 40px 18px 36px 20px;
    color: var(--apri);
    box-shadow: 0 10px 26px var(--schatten);
}
body.ov-baender .nl-modal__title,
body.ov-baender .nl-modal__desc,
body.ov-baender .nl-modal__success,
body.ov-baender .nl-modal__success p,
body.ov-baender .nl-modal__already-text,
body.ov-baender .nl-modal__error { color: var(--apri); }
body.ov-baender .nl-modal__title { font-family: var(--fd); }

body.ov-baender .nl-modal__close { color: var(--apri); }
body.ov-baender .nl-modal__close:hover { background: var(--apri); color: var(--lila); }

body.ov-baender .nl-modal__icon { background: var(--apri); color: var(--lila); }

body.ov-baender .nl-modal__input {
    background: var(--apri);
    border: 1px solid var(--apri);
    border-radius: 999px;
    color: var(--lila);
    padding: 12px 18px;
}
body.ov-baender .nl-modal__input::placeholder { color: var(--lila); }

body.ov-baender .nl-modal__submit,
body.ov-baender .nl-modal__btn--primary {
    background: var(--apri);
    color: var(--lila);
    border: 1px solid var(--apri);
    border-radius: 999px;
    padding: 12px 22px;
}
body.ov-baender .nl-modal__submit:hover,
body.ov-baender .nl-modal__btn--primary:hover {
    background: var(--lila);
    color: var(--apri);
}
/* Zweitrangig, also wie die Knoepfe im Inhalt in --band — so bleibt der
   Unterschied zum Hauptknopf daneben lesbar. */
body.ov-baender .nl-modal__btn--ghost {
    background: var(--band);
    border: none;
    border-radius: 999px;
    color: var(--apri);
    padding: 12px 22px;
}
body.ov-baender .nl-modal__btn--ghost:hover { transform: translateY(-2px); }


/* ===================================================================
   Sprachhinweis und Sprachschalter
   ===================================================================
   Beide liegen als dunkle Flaeche ueber der Seite und erben --color-text.
   Das ist im Baender-Theme Lila und stand damit dunkel auf dunkel — der
   Hinweistext war nicht zu lesen. Dieselbe Falle wie bei Ueberschriften,
   Menue und Modal: alles, was auf --band liegt, braucht Apricot. */
body.ov-baender .ov-lang-pop {
    background: var(--band);
    border: none;
    color: var(--apri);
    box-shadow: 0 14px 34px var(--schatten);
}
body.ov-baender .ov-lang-pop__msg { color: var(--apri); }
body.ov-baender .ov-lang-pop__go {
    background: var(--apri);
    color: var(--band);
    border: none;
    font-weight: 700;
}
body.ov-baender .ov-lang-pop__go:hover { background: var(--apri); transform: translateY(-2px); }
body.ov-baender .ov-lang-pop__stay {
    color: var(--apri);
    text-decoration: underline;
}
body.ov-baender .ov-lang-pop__stay:hover { color: var(--apri); }

body.ov-baender .ov-lang-mini {
    background: var(--band);
    border: none;
    opacity: 1;
}
body.ov-baender .ov-lang-mini__opt { color: var(--apri); }
body.ov-baender .ov-lang-mini__opt.is-active { color: var(--apri); font-weight: 800; }
body.ov-baender .ov-lang-mini__sep { color: var(--apri); }


/* ===================================================================
   Umbau-Banner
   ===================================================================
   Die Servicemeldung kommt normalerweise schwarz-gelb (i18n-geo.css). Gelb
   ist im Baender-Theme eine Fremdfarbe, deshalb laeuft sie hier in --band
   mit Apricot-Schrift; die Warnstreifen bleiben als Muster erhalten, nur in
   denselben zwei Farben. */
body.ov-baender .ov-umbau-banner {
    background: var(--band);
    /* Ohne eigenen Abstand: so schliesst die Meldung direkt an die Kopfleiste
       an, statt zwei apricotfarbene Streifen dazwischen zu setzen. Kopfleiste
       und Meldung sind beide --band und lesen sich als ein Block. */
    margin: 0;
}
body.ov-baender .ov-umbau-banner::before,
body.ov-baender .ov-umbau-banner::after {
    background: repeating-linear-gradient(45deg,
        var(--apri) 0 15px, var(--band) 15px 30px);
}
body.ov-baender .ov-umbau-item {
    color: var(--apri);
    text-shadow: none;
}
body.ov-baender .ov-umbau-sep {
    color: var(--apri);
    opacity: 1;
}


/* ===================================================================
   Die Buehne
   =================================================================== */
body.ov-baender #main.home {
    position: relative;
    z-index: 10;
    background: var(--apri);
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
    display: block;
}

/* Abschnitte weit auseinander: jede Szene bekommt annaehernd einen
   Bildschirm fuer sich, damit die Welle mit ihrem Inhalt einmal ganz
   einlaufen kann, bevor die naechste ins Bild kommt. */
body.ov-baender .szene {
    position: relative;
    padding: 190px 0;
    min-height: 92vh;
    display: flex;
    align-items: center;
}
body.ov-baender .szene > .buehne {
    position: relative;
    z-index: 2;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 54px;
    width: 100%;
}

/* Auf Lila steht Apricot, auf Apricot steht Lila */
body.ov-baender .auf-lila { color: var(--apri); }
body.ov-baender .auf-apri { color: var(--lila); }

/* Abschnitte auf Apricot brauchen Luft, damit die einlaufende Welle des
   Nachbarn nicht in die Ueberschrift schneidet */
body.ov-baender .auf-apri { padding-top: calc(190px + var(--welle) * 0.6); }



/* ===================================================================
   Die Platte mit ihren gewellten Abschluessen
   ===================================================================
   Zwei drop-shadow uebereinander: ein enger rundherum, damit auch die
   OBERkante als aufliegend zu lesen ist, und ein weicher nach unten fuer
   die Richtung. box-shadow waere falsch — das wirft ein Rechteck, nur
   drop-shadow folgt der Wellenkontur. Eng halten: ein weiter Schatten
   truebt die helle Flaeche auf ueber 100 px Breite sichtbar ein. */
body.ov-baender .platte {
    position: absolute;
    left: -16%;
    right: -16%;
    top: 0;
    bottom: 0;
    z-index: 0;
    filter: drop-shadow(0 3px 5px var(--schatten-eng))
            drop-shadow(0 9px 12px var(--schatten));
}

/* Die Vorderkante ist kein eigenes Bauteil, sondern eine sehr grosse
   Ellipse, deren Radius --auf beim Scrollen waechst (gesetzt von
   anime.js). Beschnitten wird innen, damit der Schatten aussen erhalten
   bleibt.

   Wichtig: die beschnittene Box schliesst die Wellen-Ueberstaende oben
   und unten mit ein. Lagen sie ausserhalb, schnitt die Ellipse Welle und
   Koerper unterschiedlich — an der Vorderkante stand eine Stufe. */
body.ov-baender .platte__inhalt {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--welle) * -1);
    bottom: calc(var(--welle) * -1);
    clip-path: ellipse(var(--auf, 230%) 210% at -20% 50%);
}
body.ov-baender .platte[data-her="rechts"] .platte__inhalt {
    clip-path: ellipse(var(--auf, 230%) 210% at 120% 50%);
}

body.ov-baender .platte__mitte {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--welle);
    bottom: var(--welle);
    background: var(--lila);
}

/* width:100% ist Pflicht: ein <svg> hat ein eigenes Seitenverhaeltnis und
   bemisst sich danach, statt sich von left:0/right:0 strecken zu lassen.
   Ohne die Angabe war die Welle nur 1008 statt 1848 px breit und ihr
   rechtes Ende stand als Stufe im Bild. */
body.ov-baender .kante {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(var(--welle) + 1px);
    display: block;
}
body.ov-baender .kante--oben  { top: 0; }
body.ov-baender .kante--unten { bottom: 0; }
body.ov-baender .kante path   { fill: var(--lila); }


/* ===================================================================
   Wiederkehrende Bausteine
   =================================================================== */
body.ov-baender .marke {
    font-family: var(--fm);
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-bottom: 16px;
}
body.ov-baender .szene h1 {
    font-size: clamp(46px, 6.4vw, 88px);
    line-height: 1.0;
    margin-bottom: 22px;
}
body.ov-baender .szene h2 {
    font-size: clamp(34px, 4.6vw, 64px);
    margin-bottom: 18px;
}
body.ov-baender .lead {
    font-size: 23px;
    line-height: 1.6;
    max-width: 40ch;
    margin: 0;
}
body.ov-baender .cta {
    display: inline-block;
    margin-top: 32px;
    padding: 19px 40px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 19px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
body.ov-baender .auf-lila .cta { background: var(--apri); color: var(--lila); }
body.ov-baender .auf-apri .cta { background: var(--lila); color: var(--apri); }


/* ===================================================================
   Szene 1 — Hero
   ===================================================================
   Maskottchen und Text stehen auf einer gemeinsamen Standlinie und
   werfen zusammen einen grossen Schatten, als staenden beide dort. Damit
   die Fuesse exakt auf der Linie sitzen, ist vute-hero.png randlos
   zugeschnitten — beim ungeschnittenen Bild lagen 4,4 % transparenter
   Rand darunter und nichts fluchtete, egal welchen Versatz man waehlte. */
body.ov-baender .hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: clamp(28px, 4vw, 72px);
}

/* align-items:flex-start ist noetig: in einer Flex-Spalte werden Kinder
   sonst auf volle Breite gestreckt — der Knopf lief ueber die ganze
   Spalte, obwohl er inline-block ist. */
body.ov-baender .hero__t {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

body.ov-baender .hero__vute {
    flex: none;
    position: relative;
    z-index: 2;
    display: block;
    line-height: 0;
}
body.ov-baender .hero__vute img {
    width: clamp(230px, 27vw, 430px);
    height: auto;
    display: block;
}

/* EIN gemeinsamer Schatten fuer Maskottchen und Begruessung.

   Er ist eine FLACHE, LANGE Lache auf der Standlinie — rund 40 px hoch
   bei ueber 600 px Breite. Genau das war der Fehler der Vorfassungen:
   mit 150 px Kastenhoehe stand dort eine Wolke auf der Flaeche, kein
   Boden. Bei dieser Blickrichtung ist eine Bodenlache flach, etwa ein
   Fuenftel ihrer Breite hoch.

   Vier Dinge muessen stimmen:
   1. Liegende Ellipse, sehr flach — nicht rund.
   2. Am Fusspunkt am dichtesten, nach aussen schwaecher; mehrere
      Stufen statt eines harten Sprungs.
   3. SIE MUSS INNERHALB DES KASTENS AUF NULL AUSLAUFEN. Reichen die
      Radien bis an den Rand, schneidet ihn der Kasten als gerade Kante
      ab und es sieht aus wie ein Rechteck. Faustregel: letzter
      Farbstopp bei <= 88 % des Radius.
   4. Der Kasten teilt die Standlinie mittig (gleich viel ueber wie
      unter bottom:0), sonst sitzt die Lache nicht auf dem Boden.

   Leise gehalten: 0,24 an der dichtesten Stelle. Man soll sie nicht
   als Fleck sehen, sondern nur wahrnehmen. */
body.ov-baender .hero-schatten {
    position: absolute;
    left: -6%;
    width: 62%;
    bottom: -28px;
    height: 56px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 46% 38% at 50% 50%,
        rgba(41, 25, 52, 0.24)  0%,
        rgba(41, 25, 52, 0.17) 38%,
        rgba(41, 25, 52, 0.08) 62%,
        rgba(41, 25, 52, 0.02) 78%,
        rgba(41, 25, 52, 0)    88%);
}


/* ===================================================================
   Szene 2 — Leistungen
   ===================================================================
   Keine Toenungen. Was auf Apricot liegt, ist voll Lila — und umgekehrt.
   Damit gilt ueberall dieselbe Paarung. */
/* Flex statt Raster — damit eine unvollstaendige letzte Reihe MITTIG steht.
   Ein Raster laesst die uebrig gebliebenen Karten links kleben, und genau das
   soll nie passieren. Die Karten behalten dabei ihre Breite (flex-grow bleibt
   0), sonst zoege die letzte Reihe ihre zwei Karten auf die volle Breite.

   Das gilt fuer jede Anzahl, ohne dass hier etwas nachgezogen werden muss:
   fuenf Karten ergeben drei oben und zwei mittig darunter, sechs ergeben zwei
   volle Reihen, sieben wieder drei plus drei plus eine mittig. */
body.ov-baender .karten {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    margin-top: 46px;
}
body.ov-baender .karte {
    flex: 0 1 100%;
    min-width: 0;
}
@media (min-width: 700px) {
    body.ov-baender .karte { flex-basis: calc((100% - 26px) / 2); }
}
/* Grosse Karten sind hier richtig — die Leistungen sind das Hauptangebot
   und sollen praesent sein. */
@media (min-width: 1180px) {
    body.ov-baender .karte { flex-basis: calc((100% - 2 * 26px) / 3); }
}
body.ov-baender .karte {
    padding: 34px 30px;
    border-radius: 38px 16px 34px 18px;
    text-decoration: none;
    display: block;
}
/* Der Hub geht ueber --hub in dieselbe transform-Kette wie der Aufbau,
   nicht ueber ein eigenes transform - siehe [data-bau] weiter unten. */
body.ov-baender .karte:hover { --hub: -8px; }
body.ov-baender .karte h3 { font-size: 21px; margin-bottom: 9px; line-height: 1.22; }
body.ov-baender .karte p  { font-size: 16.5px; line-height: 1.55; margin: 0; }
body.ov-baender .karte__mehr {
    display: inline-block;
    margin-top: 14px;
    font-weight: 700;
    font-size: 15px;
}

body.ov-baender .karte .ic {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

/* Auf hellem Grund: die Karten sind das Lila, das sonst der Grund ist.
   Weil Lila hier oben aufliegt, wirft es — wie die Baender — Schatten. */
body.ov-baender .auf-apri .karte,
body.ov-baender .auf-apri .perle,
body.ov-baender .auf-apri .notiz {
    background: var(--lila);
    color: var(--apri);
    box-shadow: 0 7px 12px var(--schatten-karte);
}
/* Auf dunklem Grund umgekehrt, ohne Schatten: dort liegt nicht Lila oben */
body.ov-baender .auf-lila .karte,
body.ov-baender .auf-lila .perle,
body.ov-baender .auf-lila .notiz {
    background: var(--apri);
    color: var(--lila);
}

/* Das Icon geht die Staffelung eine Stufe weiter: auf der lila Karte ein
   Apricot-Kreis mit lila Zeichen, auf der hellen Karte andersherum. */
body.ov-baender .auf-apri .karte .ic { background: var(--apri); color: var(--lila); }
body.ov-baender .auf-lila .karte .ic { background: var(--lila); color: var(--apri); }


/* ===================================================================
   Szene 3 — Projekte und Werkstatt in zwei Spuren
   ===================================================================
   Links was wir offen bauen, rechts was zuletzt auf der Werkbank lag.
   Getrennt durch eine Haarlinie in der Schriftfarbe — das ist keine
   dritte Farbe, sondern dieselbe. */
body.ov-baender .zweispur {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    /* Waagerecht deutlich weiter als frueher (32-72 px): die Spuren sollen
       als getrennte Bloecke lesbar sein, nicht als eine Flaeche. */
    column-gap: clamp(48px, 7vw, 128px);
    row-gap: 64px;
    margin-top: 46px;
    align-items: start;
}
body.ov-baender .spur { min-width: 0; }
body.ov-baender .spur__t {
    font-size: clamp(21px, 2vw, 26px);
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid currentColor;
}
body.ov-baender .spur__intro { font-size: 17px; margin: 0 0 22px; max-width: 46ch; }

/* Reine Namenspillen, breit wie ihr Inhalt und umbrechend — so wie im
   Entwurf. Ein starres Raster liess bei kurzen Namen viel Luft in der Pille
   stehen. Icons sind bewusst raus (siehe ov_prj_render_perle()). */
body.ov-baender .perlen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
body.ov-baender .perle {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 10px 28px 10px 10px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}
body.ov-baender .perle:hover { --hub: -5px; }

/* Vorne ein kleiner Kreis fuer das Projektzeichen. Er geht die
   Staffelung eine Stufe weiter — genauso wie das Icon auf der Karte:
   auf der lila Perle ein Apricot-Kreis, auf der hellen andersherum.
   Eine dritte Farbe kommt nicht dazu. */
body.ov-baender .perle__zeichen {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    overflow: hidden;
}
body.ov-baender .auf-apri .perle .perle__zeichen { background: var(--apri); color: var(--lila); }
body.ov-baender .auf-lila .perle .perle__zeichen { background: var(--lila); color: var(--apri); }

/* Ein hinterlegtes Beitragsbild fuellt den Kreis, sonst steht der
   Anfangsbuchstabe darin. */
body.ov-baender .perle__zeichen .prj-icon__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
body.ov-baender .perle__zeichen .prj-icon__mono {
    font-family: var(--fd);
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    color: inherit;
}
body.ov-baender .perle__name { display: block; }

body.ov-baender .notiz {
    display: block;
    padding: 30px 34px;
    border-radius: 40px 18px 36px 20px;
    text-decoration: none;
}
body.ov-baender a.notiz:hover { --hub: -7px; }
body.ov-baender .notiz__datum {
    font-family: var(--fm);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block;
}
body.ov-baender .notiz h3 { font-size: 24px; margin: 10px 0; }
body.ov-baender .notiz p  { font-size: 17px; margin: 0; }
body.ov-baender .notiz__mehr { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 15px; }

/* Die angepinnten Berichte als schmale Zeilen unter der Notiz — sie
   sollen die Notiz nicht erschlagen. */
body.ov-baender .spur__liste { display: flex; flex-direction: column; gap: 2px; margin-top: 26px; }
body.ov-baender .zeile {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 11px 4px;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    font-size: 16px;
}
body.ov-baender .zeile:hover { text-decoration: underline; }
body.ov-baender .zeile__datum { font-family: var(--fm); font-size: 12px; flex: none; }
body.ov-baender .zeile__titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body.ov-baender .spur__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
body.ov-baender .knopf {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 26px;
    border-radius: 999px;
    border: none;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Knoepfe im Inhalt tragen die Leistenfarbe --band, nicht die volle
   Gegenfarbe. Ausdruecklicher Wunsch des Users: sie sollen sich abheben,
   aber nicht zu stark in den Vordergrund ruecken. Damit ist --band nicht
   mehr allein Kopf und Fuss vorbehalten.

   Der Ton ist dunkler als BEIDE Untergruende — der Knopf liegt also auf
   Lila wie auf Apricot oben auf und wirft in beiden Faellen einen Schatten.
   Deshalb braucht es hier keine Fallunterscheidung nach Untergrund.
   Apricot auf --band sind 6,24:1, der bequemste Wert der ganzen Palette. */
body.ov-baender .knopf {
    background: var(--band);
    color: var(--apri);
    box-shadow: 0 5px 10px var(--schatten-eng);
}
body.ov-baender .knopf:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 16px var(--schatten);
}

/* Der Hauptweg bleibt die volle Gegenfarbe: .cta im Hero soll vorne stehen. */


/* ===================================================================
   Szene 4 — Bewertungen
   =================================================================== */
body.ov-baender .sterne {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    font-size: 20px;
}
body.ov-baender .sterne__wert { font-family: var(--fd); font-size: 64px; font-weight: 700; line-height: 1; }
body.ov-baender .sterne__bild { display: inline-flex; gap: 3px; }
body.ov-baender .sterne__bild .ov-star-display { width: 22px; height: 22px; display: block; }
body.ov-baender .sterne__bild svg { width: 100%; height: 100%; display: block; }
body.ov-baender .sterne__bild .ov-star--full  svg { fill: currentColor; }
body.ov-baender .sterne__bild .ov-star--empty svg { fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Dieselbe Regel wie bei den Leistungskarten: eine angebrochene Reihe steht
   mittig, nicht links. */
body.ov-baender .stimmen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    margin-top: 38px;
}
body.ov-baender .stimmen > .notiz {
    flex: 0 1 100%;
    min-width: 0;
}
@media (min-width: 760px) {
    body.ov-baender .stimmen > .notiz { flex-basis: calc((100% - 26px) / 2); }
}
@media (min-width: 1180px) {
    body.ov-baender .stimmen > .notiz { flex-basis: calc((100% - 2 * 26px) / 3); }
}
/* Steht nur eine Stimme da, bleibt sie linksbuendig unter der Ueberschrift –
   mittig wuerde eine einzelne Karte unter dem linken Text schweben. Ab zwei
   greift die Zentrierung wie bei den Leistungskarten. */
body.ov-baender .stimmen > .notiz:only-child { margin-right: auto; }
body.ov-baender .stimme__kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
body.ov-baender .stimme__name { font-weight: 700; font-size: 17px; }
body.ov-baender .stimme__text { font-size: 18px; margin: 14px 0 0; }
body.ov-baender .stimme__datum { display: block; margin-top: 12px; font-size: 13px; font-family: var(--fm); }


/* ===================================================================
   Aufbau beim Scrollen
   ===================================================================
   Die Werte setzt anime.js ueber onScroll({sync}). Hier stehen nur die
   Ausgangszustaende, damit vor dem ersten Bild nichts aufblitzt. Ohne
   JS fehlt html.js und alles bleibt sichtbar. */
/* --hub ist der Anteil, den ein :hover zur Bewegung beisteuert. Er muss mit
   @property angemeldet sein, sonst laesst er sich nicht weich ueberblenden -
   nicht angemeldete Variablen springen. */
@property --hub {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

/* Der scrollgebundene Aufbau schreibt nur Zahlen in --bx/--by/--br/--bs; die
   Bewegung selbst steht hier. Der Umweg ist noetig: schriebe anime.js direkt
   auf transform, wuerde der Inline-Wert jede :hover-Regel der Karten
   aushebeln und die Karten haetten gar keinen Hover mehr.

   Aus demselben Grund darf hier KEIN "transition: transform" stehen - der
   Wert aendert sich beim Scrollen in jedem Bild, eine Ueberblendung wuerde
   sich mit der Glaettung von onScroll ueberlagern und nachziehen. */
body.ov-baender [data-bau] {
    transform: translate(var(--bx, 0), calc(var(--by, 0px) + var(--hub, 0px)))
               rotate(var(--br, 0deg))
               scale(var(--bs, 1));
    transition: --hub 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Die Neigung zum Mauszeiger kommt aus derselben Kette (--kx/--ky, gesetzt in
   script.js). Nur Karten und Notizen kippen - kleine Pillen wirken dabei
   zappelig. Die perspective muss hinter den Verschiebungen stehen, sonst
   kippt die Karte um einen Punkt neben sich. */
body.ov-baender .karte,
body.ov-baender .notiz {
    transform: translate(var(--bx, 0), calc(var(--by, 0px) + var(--hub, 0px)))
               rotate(var(--br, 0deg))
               scale(var(--bs, 1))
               perspective(760px)
               rotateX(var(--kx, 0deg))
               rotateY(var(--ky, 0deg));
}

/* Nur wo sich auch etwas aufbaut. Im Kaufweg laeuft anime.js gar nicht,
   dort waere ein opacity:0 ein Blitzer bis das Skript nachbessert. */
html.js body.ov-baender--home .platte,
html.js body.ov-baender--seiten .platte { opacity: 0; }
html.js body.ov-baender--home [data-bau],
html.js body.ov-baender--seiten [data-bau] { opacity: 0; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
    html.js body.ov-baender .platte,
    html.js body.ov-baender [data-bau] { opacity: 1 !important; }
    /* anime.js laeuft hier gar nicht erst an, die Variablen bleiben also auf
       ihren Vorgaben und die Kette oben ergibt die Ausgangslage. */
    body.ov-baender [data-bau] { transition: none; }
    body.ov-baender .top-nav { transition: none; }
}


/* ===================================================================
   Schmale Fenster
   =================================================================== */
@media (max-width: 1000px) {
    body.ov-baender .szene > .buehne { padding: 0 32px; }
    body.ov-baender .top-nav { padding: 15px 24px; }
}

@media (max-width: 900px) {
    body.ov-baender .zweispur { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 820px) {
    body.ov-baender { --welle: 80px; }
    body.ov-baender .szene { padding: 120px 0; min-height: 0; }
    body.ov-baender .auf-apri { padding-top: calc(120px + var(--welle) * 0.6); }
    body.ov-baender .hero { flex-direction: column; align-items: flex-start; gap: 26px; }
    body.ov-baender .hero-schatten { display: none; }
    body.ov-baender .lead { font-size: 19px; }
    /* Auf schmalen Fenstern steht der Fuss wieder normal im Fluss —
       ein fester Fuss frisst dort zu viel Bildschirm. */
    body.ov-baender #main.home { margin-bottom: 0 !important; }
}


/* ===================================================================
   Vute-Hinweis am Hero
   ===================================================================
   Der Hinweis steht rechts neben Vute, nicht links wie im alten Layout —
   dort staende er im Baender-Theme ausserhalb des Bildes. Er traegt die
   volle Gegenfarbe, keine Toenung.

   Der Text steckt in data-tooltip. TranslatePress erfasst keine custom
   data-Attribute, deshalb kommt er sprachabhaengig aus dem PHP-Array
   $vute_t und nicht aus dem Woerterbuch. */
body.ov-baender .hero__vute::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 26%;
    left: calc(100% + 18px);
    width: 230px;
    padding: 12px 16px;
    border-radius: 20px 8px 18px 10px;
    background: var(--apri);
    color: var(--lila);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.94);
    transform-origin: left center;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10;
}
body.ov-baender .hero__vute:hover::after { opacity: 1; transform: scale(1); }
body.ov-baender .hero__vute img { transition: transform 0.25s; }
body.ov-baender .hero__vute:hover img { transform: scale(1.03) translateY(-4px); }
body.ov-baender .vute-mobile-hint { display: none; }

/* Auf Zeigergeraeten ohne Hover (Touch) gibt es keinen Hinweis zum
   Aufklappen — dort steht er als Zeile unter dem Bild. */
@media (hover: none), (max-width: 820px) {
    body.ov-baender .hero__vute::after { display: none; }
    body.ov-baender .hero__vute:hover img { transform: none; }
    body.ov-baender .vute-mobile-hint {
        display: block;
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.4;
        text-decoration: underline;
    }
}


/* ===================================================================
   Freiraum in den Karten
   ===================================================================
   Eine Karte soll nicht randvoll sein. Grosszuegige Innenabstaende
   wirken ruhig; enge wirken gedraengt, egal wie gut der Inhalt ist.
   Deshalb gilt hier ein gemeinsames Mass fuer ALLE Karten des Themes
   statt je Bauteil ein eigenes.

   Die Werte stehen bewusst am Ende der Datei: sie sollen die frueheren
   Einzelangaben ueberschreiben, ohne dass jede davon angefasst wird.
   =================================================================== */
body.ov-baender .karte            { padding: 44px 40px; }
body.ov-baender .notiz            { padding: 40px 42px; }
body.ov-baender .prj-card,
body.ov-baender .werkstatt-card,
body.ov-baender .ov-bw-card,
body.ov-baender .leistung-anfrage__card { padding: 40px 38px; }

/* Zwischen den Karten ebenfalls mehr Luft. */
body.ov-baender .karten,
body.ov-baender .prj-grid,
body.ov-baender .werkstatt-archive__list,
body.ov-baender .ov-bw-grid { gap: 34px; }

@media (max-width: 820px) {
    body.ov-baender .karte { padding: 32px 26px; }
    body.ov-baender .notiz { padding: 28px 26px; }
    body.ov-baender .prj-card,
    body.ov-baender .werkstatt-card,
    body.ov-baender .ov-bw-card,
    body.ov-baender .leistung-anfrage__card { padding: 28px 24px; }
    body.ov-baender .karten,
    body.ov-baender .prj-grid,
    body.ov-baender .werkstatt-archive__list,
    body.ov-baender .ov-bw-grid { gap: 22px; }
}

/* Ein selbst eingeliefertes SVG fuellt den Kreis der Perle und traegt
   dessen Farbe (currentColor, siehe ov_prj_svg_saeubern()). */
body.ov-baender .perle__zeichen .prj-icon__svg,
body.ov-baender .perle__zeichen .prj-icon__svg svg {
    display: block;
    /* Nicht groesser als 34: das einbeschriebene Quadrat eines 48er
       Kreises misst 34 px, darueber schneidet der runde Rahmen die
       Ecken des Zeichens ab. */
    width: 34px;
    height: 34px;
}
body.ov-baender .perle__zeichen .prj-icon__svg svg { color: inherit; }

/* Die Signatur fuehrt auf die Startseite. Sie bleibt optisch, was sie
   war — nur als Link mit Ziel, spuerbar beim Ueberfahren. */
body.ov-baender .footer-signatur__link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
body.ov-baender .footer-signatur__link:hover { transform: translateY(-2px); opacity: 0.85; }
body.ov-baender .footer-signatur__link:focus-visible { outline: 2px solid var(--apri); outline-offset: 6px; }

/* ===================================================================
   Warenkorb-Knopf in der Kopfleiste
   ===================================================================
   Zwei Dinge waren falsch:
   - header.css setzt .cart-count auf color:#fff. Weiss ist in dieser
     Palette keine Farbe, und auf dem apricoten Knopf stand die Zahl
     damit hell auf hell.
   - Der Knopf erbte das breite Pill der uebrigen Nav-Knoepfe. Ein
     Zeichen ohne Wort gehoert in einen Kreis.

   Jetzt: runder apricoter Knopf mit lila Wagen, die Zahl als kleine
   dunkle Scheibe an der Ecke (Apricot auf --band = 6,62:1). */
body.ov-baender .top-nav .nav-btn.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 999px;
    background: var(--apri);
    color: var(--band);
    font-size: 0;              /* kein Leerzeichen zwischen Zeichen und Zahl */
}
body.ov-baender .top-nav .nav-btn.cart-btn:hover {
    background: var(--apri);
    color: var(--band);
    transform: translateY(-2px);
}
body.ov-baender .top-nav .nav-btn.cart-btn svg { display: block; }

body.ov-baender .top-nav .cart-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 21px;
    height: 21px;
    width: auto;
    padding: 0 5px;
    box-sizing: border-box;
    background: var(--band);
    color: var(--apri);
    border: 2px solid var(--apri);
    border-radius: 999px;
    font-family: var(--fd);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* Laeuft nur eine der beiden Spuren (Vuturepage -> Bereiche), soll sie
   die Breite bekommen statt eine leere Spalte danebenstehen zu lassen. */
body.ov-baender .zweispur:has(> .spur:only-child) { grid-template-columns: minmax(0, 1fr); }

/* Ein Abschnitt auf Apricot rechnet oben Platz fuer die einlaufende Welle
   seines lila Nachbarn ein (.auf-apri, weiter oben). Stossen ZWEI helle
   Abschnitte aneinander — das passiert, sobald ein lila Bereich
   abgeschaltet wird (Vuturepage -> Bereiche) — gibt es keine Welle, und
   die Reserve stuende als Leere im Bild. Dann genuegt der normale
   Abstand. */
body.ov-baender .szene.auf-apri + .szene.auf-apri { padding-top: 190px; }

/* ===================================================================
   Platzhalter — ein Bereich steht schon, sein Inhalt kommt noch
   (Vuturepage -> Bereiche -> „Platzhalter“).

   Bewusst ruhig gehalten: gestrichelter Rahmen statt Farbfläche, damit
   der Hinweis als Baustelle lesbar ist und nicht als Fehlermeldung.
   Farbe kommt über currentColor vom Abschnitt, auf dem er liegt — so
   stimmt er auf Lila wie auf Apricot.
   =================================================================== */
body.ov-baender .platzhalter {
    font-size: 17px;
    line-height: 1.55;
    margin: 0;
    padding: 18px 24px;
    max-width: 46ch;
    border: 1px dashed currentColor;
    border-radius: 16px;
    opacity: .75;
}

/* Newsletter: eine eigene Spur im selben Raster, mit derselben
   Ueberschrift samt Linie wie Projekte und Werkstatt (vorher ein loser
   Block UNTER dem Raster — bei abgeschalteter Werkstatt standen Projekte
   und Newsletter dadurch untereinander statt nebeneinander).
   Zwei Spuren: nebeneinander. Laufen alle drei, bekommt der Newsletter
   die ganze Zeile darunter — drei schmale Spalten waeren fuer die
   Werkstatt-Notiz zu eng. */
body.ov-baender .zweispur > .spur--newsletter:nth-child(3) { grid-column: 1 / -1; }

/* ===================================================================
   Neues Logo (21.09.2026) — Inline-SVG aus inc/logo.php
   ===================================================================
   Das Logo erbt currentColor und steht damit in der Palette: Apricot auf
   Kopfleiste, Menue und Splash (alle auf --band). Das alte weisse
   Bildlogo samt Hover-Zweitbild ist weg — Weiss ist in dieser Palette
   keine Farbe.

   Es ist GESTAPELT (Zeichen oben, Schriftzug unten, 810:490). Damit der
   Schriftzug lesbar bleibt, steht es in der Kopfleiste hoeher als das
   alte Querformat-Logo. aspect-ratio ausdruecklich, weil ein Inline-SVG
   ohne width-Attribut sonst je nach Browser die volle Breite nimmt. */
svg.ov-logo {
    display: block;
    aspect-ratio: 810 / 490;
    width: auto;
    color: var(--apri, #FFBB8A);
    overflow: visible;
}
body.ov-baender nav.top-nav .logo-image,
nav.top-nav svg.logo-image { height: clamp(50px, 4.8vw, 78px); }
.mobile-menu-header svg.logo-image { height: 54px; }
svg.splash-logo { width: min(320px, 70vw); height: auto; }

/* Maskottchen als <picture> (WebP + PNG, ov_vute_bild()): das Element soll
   sich im Layout verhalten, als staende das <img> direkt da. */
picture.ov-bild { display: contents; }

/* ===================================================================
   Danke-Fenster nach einer Bewertung (inc/bewertungen.php)
   ===================================================================
   Stand bis 21.09.2026 in den Farben der alten dunklen Palette:
   --color-surface/-text-muted wurden im Baender-Theme zu Lila auf Lila —
   Ueberschrift, Text und der Schliessen-Knopf waren unlesbar ("Das kann
   man nicht lesen"). Jetzt: lila Karte mit apricoter Schrift, der
   Google-Kasten in --band, Knoepfe nach der Knopfregel des Ladens. */
body.ov-baender .ov-bewertung-success { background: rgba(38, 24, 48, 0.72); }
body.ov-baender .ov-bewertung-success__box {
    background: var(--lila);
    color: var(--apri);
    border: 2px solid var(--apri);
    border-radius: 38px 16px 34px 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
body.ov-baender .ov-bewertung-success__box > svg { color: var(--apri); }
body.ov-baender .ov-bewertung-success__box :is(h3, p) { color: var(--apri) !important; }
body.ov-baender .ov-bewertung-success__box h3 { font-family: var(--fd); font-size: 28px; font-weight: 800; }
body.ov-baender .ov-bewertung-success__box > p { font-size: 16px; line-height: 1.5; }
body.ov-baender .ov-bewertung-success__google {
    background: var(--band);
    border-radius: 22px;
    padding: 20px 22px;
    text-align: center;
}
body.ov-baender .ov-bewertung-success__google-text { color: var(--apri) !important; font-size: 15px; line-height: 1.5; }
/* Erstrangig: Apricot mit lila Schrift (5,14:1) */
body.ov-baender .ov-bewertung-success__google-btn,
body.ov-baender .ov-bewertung-success__google-btn:visited {
    background: var(--apri);
    color: var(--lila) !important;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 800;
    text-decoration: none;
}
body.ov-baender .ov-bewertung-success__google-btn:hover,
body.ov-baender .ov-bewertung-success__google-btn:focus-visible { background: var(--lila); color: var(--apri) !important; box-shadow: inset 0 0 0 2px var(--apri); }
/* Zweitrangig: --band mit apricoter Schrift (6,62:1) */
body.ov-baender .ov-bewertung-success__close {
    background: var(--band) !important;
    color: var(--apri) !important;
    border: none;
    margin-top: 8px;
    padding: 12px 30px;
    border-radius: 999px;
    font-weight: 800;
}
body.ov-baender .ov-bewertung-success__close:hover,
body.ov-baender .ov-bewertung-success__close:focus-visible { background: var(--apri) !important; color: var(--lila) !important; }
body.ov-baender .ov-bewertung-success__google-btn,
body.ov-baender .ov-bewertung-success__google-btn * { text-decoration: none !important; border-bottom: none !important; background-image: none; }