/* =================================================================
   UXOVIA · STARTSEITE · SEKTIONEN
   Stile der einzelnen Startseiten-Sektionen: Musterkarussell,
   Datenhoheit, Instrument-Vokabular, Anwendungsfaelle und Fragenblock.
   Ausgelagert am 21.08.2026 aus den <style>-Bloecken von index.html.
   Die Einbindung steht im Dokument an derselben Stelle wie vorher der
   Block, sonst kippt die Kaskade: als letztes Stylesheet, damit diese Regeln
   wie bisher alle vorherigen ueberschreiben. Die fuenf Teile stehen in
   der Reihenfolge, in der sie im HTML standen.
   ================================================================= */

/* ── aus index.html, vormals Zeile 602 ─────────────────────── */
#muster #m-01:checked~.mz-body .mz-tab[for="m-01"]{background:var(--surface-3);border-color:var(--border-strong);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.06)}#muster #m-01:checked~.mz-body .mz-tab[for="m-01"] .mz-tn{color:var(--acc)}#muster #m-01:checked~.mz-body .mz-tab[for="m-01"] .mz-si{color:var(--acc);opacity:1}#muster #m-01:checked~.mz-body .mz-tab[for="m-01"] .mz-ta{opacity:1;transform:none;color:var(--acc)}#muster #m-01:checked~.mz-body .mz-tab[for="m-01"]::before{transform:translateY(-50%) scaleY(1)}#muster #m-01:checked~.mz-body .mz-panel[data-for="m-01"]{opacity:1;transform:none;pointer-events:auto;z-index:2}
#muster #m-02:checked~.mz-body .mz-tab[for="m-02"]{background:var(--surface-3);border-color:var(--border-strong);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.06)}#muster #m-02:checked~.mz-body .mz-tab[for="m-02"] .mz-tn{color:var(--acc)}#muster #m-02:checked~.mz-body .mz-tab[for="m-02"] .mz-si{color:var(--acc);opacity:1}#muster #m-02:checked~.mz-body .mz-tab[for="m-02"] .mz-ta{opacity:1;transform:none;color:var(--acc)}#muster #m-02:checked~.mz-body .mz-tab[for="m-02"]::before{transform:translateY(-50%) scaleY(1)}#muster #m-02:checked~.mz-body .mz-panel[data-for="m-02"]{opacity:1;transform:none;pointer-events:auto;z-index:2}
#muster #m-03:checked~.mz-body .mz-tab[for="m-03"]{background:var(--surface-3);border-color:var(--border-strong);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.06)}#muster #m-03:checked~.mz-body .mz-tab[for="m-03"] .mz-tn{color:var(--acc)}#muster #m-03:checked~.mz-body .mz-tab[for="m-03"] .mz-si{color:var(--acc);opacity:1}#muster #m-03:checked~.mz-body .mz-tab[for="m-03"] .mz-ta{opacity:1;transform:none;color:var(--acc)}#muster #m-03:checked~.mz-body .mz-tab[for="m-03"]::before{transform:translateY(-50%) scaleY(1)}#muster #m-03:checked~.mz-body .mz-panel[data-for="m-03"]{opacity:1;transform:none;pointer-events:auto;z-index:2}
#muster #m-04:checked~.mz-body .mz-tab[for="m-04"]{background:var(--surface-3);border-color:var(--border-strong);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.06)}#muster #m-04:checked~.mz-body .mz-tab[for="m-04"] .mz-tn{color:var(--acc)}#muster #m-04:checked~.mz-body .mz-tab[for="m-04"] .mz-si{color:var(--acc);opacity:1}#muster #m-04:checked~.mz-body .mz-tab[for="m-04"] .mz-ta{opacity:1;transform:none;color:var(--acc)}#muster #m-04:checked~.mz-body .mz-tab[for="m-04"]::before{transform:translateY(-50%) scaleY(1)}#muster #m-04:checked~.mz-body .mz-panel[data-for="m-04"]{opacity:1;transform:none;pointer-events:auto;z-index:2}
#muster #m-05:checked~.mz-body .mz-tab[for="m-05"]{background:var(--surface-3);border-color:var(--border-strong);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.06)}#muster #m-05:checked~.mz-body .mz-tab[for="m-05"] .mz-tn{color:var(--acc)}#muster #m-05:checked~.mz-body .mz-tab[for="m-05"] .mz-si{color:var(--acc);opacity:1}#muster #m-05:checked~.mz-body .mz-tab[for="m-05"] .mz-ta{opacity:1;transform:none;color:var(--acc)}#muster #m-05:checked~.mz-body .mz-tab[for="m-05"]::before{transform:translateY(-50%) scaleY(1)}#muster #m-05:checked~.mz-body .mz-panel[data-for="m-05"]{opacity:1;transform:none;pointer-events:auto;z-index:2}
#muster #m-06:checked~.mz-body .mz-tab[for="m-06"]{background:var(--surface-3);border-color:var(--border-strong);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.06)}#muster #m-06:checked~.mz-body .mz-tab[for="m-06"] .mz-tn{color:var(--acc)}#muster #m-06:checked~.mz-body .mz-tab[for="m-06"] .mz-si{color:var(--acc);opacity:1}#muster #m-06:checked~.mz-body .mz-tab[for="m-06"] .mz-ta{opacity:1;transform:none;color:var(--acc)}#muster #m-06:checked~.mz-body .mz-tab[for="m-06"]::before{transform:translateY(-50%) scaleY(1)}#muster #m-06:checked~.mz-body .mz-panel[data-for="m-06"]{opacity:1;transform:none;pointer-events:auto;z-index:2}
#muster #m-07:checked~.mz-body .mz-tab[for="m-07"]{background:var(--surface-3);border-color:var(--border-strong);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.06)}#muster #m-07:checked~.mz-body .mz-tab[for="m-07"] .mz-tn{color:var(--acc)}#muster #m-07:checked~.mz-body .mz-tab[for="m-07"] .mz-si{color:var(--acc);opacity:1}#muster #m-07:checked~.mz-body .mz-tab[for="m-07"] .mz-ta{opacity:1;transform:none;color:var(--acc)}#muster #m-07:checked~.mz-body .mz-tab[for="m-07"]::before{transform:translateY(-50%) scaleY(1)}#muster #m-07:checked~.mz-body .mz-panel[data-for="m-07"]{opacity:1;transform:none;pointer-events:auto;z-index:2}
#muster #m-08:checked~.mz-body .mz-tab[for="m-08"]{background:var(--surface-3);border-color:var(--border-strong);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.06)}#muster #m-08:checked~.mz-body .mz-tab[for="m-08"] .mz-tn{color:var(--acc)}#muster #m-08:checked~.mz-body .mz-tab[for="m-08"] .mz-si{color:var(--acc);opacity:1}#muster #m-08:checked~.mz-body .mz-tab[for="m-08"] .mz-ta{opacity:1;transform:none;color:var(--acc)}#muster #m-08:checked~.mz-body .mz-tab[for="m-08"]::before{transform:translateY(-50%) scaleY(1)}#muster #m-08:checked~.mz-body .mz-panel[data-for="m-08"]{opacity:1;transform:none;pointer-events:auto;z-index:2}
    /* Muster-Umschalter · Problem->Lösung, CSS-only (radio/:checked), fade+ease */
    #muster .mz-radio { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
    /* Bühne — hebt die ganze Sektion vom schwarzen Grund ab */
    /* Die Konstellations-Figur liegt hinter der Seite und schien durch die
       fast durchsichtige Kachel hindurch: ueber ihren hellen Linien fiel der
       Kontrast der Titel von 20,3 auf 3,6:1, also unter die Lesbarkeitsgrenze.
       Weichzeichner plus dunkle Flaeche loeschen die Linien, lassen die Figur
       aber als Farbstimmung stehen — sie soll sichtbar bleiben, nur nicht
       durch den Text laufen. */
    #muster .mz { position:relative; border-radius:var(--r-xl); padding:clamp(1rem,2.2vw,1.7rem);
      background:radial-gradient(120% 75% at 50% -8%, rgba(0,85,254,.10), transparent 60%), rgba(8,10,15,.74);
      backdrop-filter:blur(14px) saturate(115%); -webkit-backdrop-filter:blur(14px) saturate(115%);
      border:1px solid var(--border-strong);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 44px 120px -60px rgba(0,0,0,.9); }
    /* Reiter und Tafel stehen als Paar im Markup — sonst liesse sich am
       Telefon kein Akkordeon daraus machen. `display: contents` loest das Paar
       am Rechner wieder auf, sodass beide direkte Kinder des Rasters sind:
       Reiter in Spalte 1 (je eine Zeile), Tafeln gestapelt in Spalte 2 ueber
       alle Zeilen. Ergebnis wie zuvor — die Buehne fuellt die Hoehe der
       Liste, statt darunter ein Loch von 363 px zu lassen. */
    /* Die acht Zeilen stehen ausdruecklich da, weil `grid-row: 1 / -1` sonst
       ins Leere greift: ohne explizites Zeilenraster meint `-1` die erste
       Linie, die Tafel bleibt in Zeile eins und blaeht sie auf 386 px auf —
       zwischen dem ersten und dem zweiten Reiter klaffte dann eine Luecke von
       392 px. Kommt ein neunter Fall dazu, muss die Zahl hier mitwachsen. */
    #muster .mz-body { display:grid; grid-template-columns:316px 1fr; grid-template-rows:repeat(8, auto);
      column-gap:var(--s-5); row-gap:.32rem; align-items:start; }
    #muster .mz-paar { display:contents; }
    #muster .mz-tab { grid-column:1; }
    /* start fuer die Reiter, damit sie ihre eigene Hoehe behalten — die Tafel
       dagegen streckt sich ausdruecklich ueber die ganze Liste, sonst steht
       sie mit 338 px neben einer 576 px hohen Liste und laesst die Kachel
       rechts unten leer. */
    #muster .mz-panel { grid-column:2; grid-row:1 / -1; align-self:stretch; }
    #muster .mz-tab {
      position:relative; display:flex; align-items:center; gap:var(--s-3);
      padding:.5rem .8rem; border-radius:var(--r-md); cursor:pointer;
      border:1px solid transparent; background:transparent; color:var(--text);
      transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
    }
    #muster .mz-tab:hover { background:var(--surface); border-color:var(--border); }
    #muster .mz-tab::before { content:""; position:absolute; left:.35rem; top:50%; width:3px; height:56%; border-radius:2px;
      background:var(--acc); transform:translateY(-50%) scaleY(0); transform-origin:center; transition:transform var(--dur) var(--ease-out); }
    #muster .mz-tn { flex-shrink:0; width:1.4rem; font-family:var(--font-mono); font-size:0.75rem; font-weight:var(--w-medium); color:var(--text-legible); transition:color var(--dur) var(--ease-out); }
    #muster .mz-tt { display:flex; flex-direction:column; gap:.15rem; min-width:0; line-height:1.3; }
    #muster .mz-tt b { font-weight:var(--w-medium); font-size:1rem; letter-spacing:-.01em; color:var(--text); }
    #muster .mz-tt i { font-style:normal; font-size:.78rem; color:var(--text-2); display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    #muster .mz-ta { width:16px; height:16px; margin-left:auto; flex-shrink:0; color:var(--text-faint); opacity:0; transform:translateX(-4px); transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
    #muster .mz-panel {
      opacity:0; transform:translateY(10px); pointer-events:none; z-index:1;
      display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr 1fr; gap:var(--s-4) var(--s-4);
      transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
    }
    /* Die Karten sassen mittig in einer Flaeche, die sich ueber die Hoehe der
       Liste streckte: zwei Zeilen Text in einer 236 px hohen Karte, oben und
       unten Leere. Jetzt stehen sie in ihrer eigenen Hoehe, dafuer mit mehr
       Polster — dichter Inhalt in ruhigem Rahmen statt duenner Inhalt in
       grossem. Den Rest der Hoehe nimmt die Fusszeile auf. */
    #muster .mz-card { position:relative; display:flex; flex-direction:column; justify-content:center;
      border-radius:var(--r-lg); padding:1.5rem 1.6rem; border:1px solid var(--border);
      background:linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.008) 60%), var(--surface-2);
      backdrop-filter:blur(8px) saturate(130%); -webkit-backdrop-filter:blur(8px) saturate(130%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 26px 54px -34px rgba(0,0,0,.9); }
    /* Lichtsaum an der Oberkante — derselbe Griff wie bei den Vergleichs-
       feldern, damit beide Sektionen aus einer Hand wirken. */
    #muster .mz-card::after {
      content:""; position:absolute; inset-inline:16%; inset-block-start:-1px; height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
      pointer-events:none;
    }
    #muster .mz-tag { display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-mono); font-size:0.82rem; font-weight:var(--w-medium); letter-spacing:.11em; text-transform:uppercase; margin-bottom:.75rem; }
    #muster .mz-ri { width:17px; height:17px; flex-shrink:0; }
    #muster .mz-p { font-size:1.08rem; line-height:1.5; }
    /* Problem & Folgen — links, bewusst grau und flach: "so laeuft es heute"
       soll abgenutzt wirken, nicht falsch. Kein Farbton, kein Glanzsaum,
       staerker entsaettigt als die rechte Seite. */
    #muster .mz-problem, #muster .mz-folgen {
      background:rgba(255,255,255,.045); border-color:var(--border);
      backdrop-filter:blur(8px) saturate(70%); -webkit-backdrop-filter:blur(8px) saturate(70%);
    }
    #muster .mz-problem::after, #muster .mz-folgen::after { display:none; }
    #muster .mz-problem .mz-tag, #muster .mz-folgen .mz-tag { color:var(--text-2); }
    #muster .mz-problem .mz-p, #muster .mz-folgen .mz-p { color:var(--text-legible); }
    /* Lösung & Ergebnis — rechts, eine Leistungsfarbe fuer beide: die Seite
       "Mit Uxovia" ist ein Block, kein Blau-neben-Gruen. Verlauf, Lichtsaum
       in der Akzentfarbe und Glow sind derselbe Griff wie bei .vg-feld--uxovia
       im Vergleich weiter oben — beide Sektionen sollen aus einer Hand wirken. */
    /* Hinter beiden Karten liegt eine Aura: vier radiale Verlaeufe, die als
       Flaeche viermal so gross sind wie die Karte und langsam quer darunter
       durchwandern. Nach aussen tritt davon nur der Rand hervor, weil die
       Aura ihre eigene Mitte mit dem Kartengrund abdeckt; ein zweites Mal
       liegt derselbe Verlauf weichgezeichnet darunter und leuchtet nach
       aussen. Vorbild: Aceternitys background-gradient, Farben aber aus der
       Auszeichnung des jeweiligen Falls statt Tuerkis/Gelb. */
    #muster .mz-loesung, #muster .mz-ergebnis {
      background:none; border-color:transparent; isolation:isolate;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 22px 48px -30px var(--acc-glow);
    }
    #muster .mz-loesung::after, #muster .mz-ergebnis::after {
      background:linear-gradient(90deg, transparent, var(--acc), transparent); opacity:.6; z-index:1;
    }
    #muster .mz-aura {
      position:absolute; inset:-1px; z-index:-1; pointer-events:none;
      border-radius:calc(var(--r-lg) + 1px);
      background:
        radial-gradient(circle farthest-side at 0 100%, var(--au1), transparent),
        radial-gradient(circle farthest-side at 100% 0,  var(--au2), transparent),
        radial-gradient(circle farthest-side at 100% 100%, var(--au3), transparent),
        radial-gradient(circle farthest-side at 0 0,     var(--au4), var(--bg-elevated));
      background-size:400% 400%;
      background-position:0% 50%;
    }
    /* Die Mitte wieder zudecken: uebrig bleibt der wandernde Rand. */
    #muster .mz-aura::after {
      content:""; position:absolute; inset:1px; border-radius:var(--r-lg);
      background:linear-gradient(158deg, var(--acc-soft), rgba(255,255,255,.012) 60%), var(--bg-elevated);
    }
    /* Derselbe Verlauf ein zweites Mal, weichgezeichnet: der Schein nach aussen.
       background:inherit haelt ihn ohne zweite Animation im Gleichschritt. */
    #muster .mz-aura::before {
      content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
      background:inherit; background-size:inherit; background-position:inherit;
      filter:blur(20px); opacity:.5;
    }
    /* Die vier Toene der Aura je Fall: dieselbe Familie wie Rand und
       Beschriftung, damit die Farbcodierung der acht Faelle bestehen bleibt. */
    #muster .mz-panel[data-for="m-01"], #muster .mz-panel[data-for="m-02"] { --au1:var(--brand); --au2:var(--kobalt-mittel); --au3:var(--purple); --au4:var(--kobalt-tief); }
    #muster .mz-panel[data-for="m-03"], #muster .mz-panel[data-for="m-04"] { --au1:var(--purple); --au2:var(--violett-licht); --au3:var(--kobalt-licht); --au4:var(--violett-tief); }
    #muster .mz-panel[data-for="m-05"], #muster .mz-panel[data-for="m-06"] { --au1:var(--cyan); --au2:var(--cyan-klar); --au3:var(--kobalt-klar); --au4:var(--cyan-tief); }
    #muster .mz-panel[data-for="m-07"], #muster .mz-panel[data-for="m-08"] { --au1:var(--warning); --au2:var(--bernstein-licht); --au3:var(--bernstein-glut); --au4:var(--bernstein-tief); }
    #muster #m-01:checked~.mz-body .mz-panel[data-for="m-01"] .mz-aura{animation-play-state:running}#muster #m-02:checked~.mz-body .mz-panel[data-for="m-02"] .mz-aura{animation-play-state:running}#muster #m-03:checked~.mz-body .mz-panel[data-for="m-03"] .mz-aura{animation-play-state:running}#muster #m-04:checked~.mz-body .mz-panel[data-for="m-04"] .mz-aura{animation-play-state:running}#muster #m-05:checked~.mz-body .mz-panel[data-for="m-05"] .mz-aura{animation-play-state:running}#muster #m-06:checked~.mz-body .mz-panel[data-for="m-06"] .mz-aura{animation-play-state:running}#muster #m-07:checked~.mz-body .mz-panel[data-for="m-07"] .mz-aura{animation-play-state:running}#muster #m-08:checked~.mz-body .mz-panel[data-for="m-08"] .mz-aura{animation-play-state:running}
    @keyframes mzAura { 0%, 100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
    /* Nur der offene Fall bewegt sich. Die anderen sieben Tafeln stehen
       unsichtbar uebereinander; liefe die Aura dort mit, rechnete der Browser
       sechzehn weichgezeichnete Flaechen umsonst. */
    #muster .mz-aura { animation:mzAura 9s linear infinite paused; }
    #muster .mz-loesung .mz-tag, #muster .mz-ergebnis .mz-tag { color:var(--acc); }
    #muster .mz-loesung .mz-p, #muster .mz-ergebnis .mz-p { color:var(--text); }

    /* Zwei Beschriftungen ueber den Spalten machen die Dramaturgie lesbar:
       links steht, wie es heute laeuft, rechts, was daraus wird. Ohne sie
       liest man vier gleichrangige Kaesten statt eines Vorher-Nachher. */
    #muster .mz-spalte {
      display:flex; align-items:center; gap:.5rem;
      font-family:var(--font-mono); font-size:0.75rem; font-weight:var(--w-medium);
      letter-spacing:.11em; text-transform:uppercase;
      padding-bottom:.15rem;
    }
    #muster .mz-spalte::after { content:""; flex:1; height:1px; background:currentColor; opacity:.22; }
    #muster .mz-spalte--ist { color:var(--text-3); }
    #muster .mz-spalte--soll { color:var(--acc); }

    /* Derselbe Knopf wie auf den Einstiegskarten und beim Erstgespraech:
       voller Verlauf auf doppelter Breite, kein Rand, Schein darunter, dazu
       ein Glanzstreifen quer darueber. --k-g1/2/3 sind die drei Stufen des
       Verlaufs, --k-fg die Schrift darauf; beide kommen aus der Farbe des
       jeweiligen Falls (siehe unten). Bei Tuerkis und Orange traegt Weiss
       nicht mehr, dort steht dunkler Text auf der Flaeche. */
    #muster .mz-panel[data-for="m-01"], #muster .mz-panel[data-for="m-02"] { --k-a:0,85,254;   --k-g1:var(--kobalt-satt); --k-g2:var(--brand); --k-g3:var(--brand-hover); }
    #muster .mz-panel[data-for="m-03"], #muster .mz-panel[data-for="m-04"] { --k-a:124,92,191; --k-g1:var(--violett-satt); --k-g2:var(--purple); --k-g3:var(--violett-klar); }
    #muster .mz-panel[data-for="m-05"], #muster .mz-panel[data-for="m-06"] { --k-a:0,200,238;  --k-g1:var(--cyan-satt); --k-g2:var(--cyan); --k-g3:var(--cyan-klar); --k-fg:var(--cyan-nacht); }
    #muster .mz-panel[data-for="m-07"], #muster .mz-panel[data-for="m-08"] { --k-a:245,166,35; --k-g1:var(--bernstein-mittel); --k-g2:var(--warning); --k-g3:var(--bernstein-licht); --k-fg:var(--bernstein-nacht); }
    /* Text und Pfeil ueber den Glanzstreifen heben. */
    /* ─────────── Am Telefon: Akkordeon statt Liste plus Buehne ───────────
       Untereinander gestellt standen erst acht Reiter und darunter die Tafel:
       um einen Fall zu lesen, musste man ueber alle anderen hinwegscrollen.
       Jetzt klappt die Tafel direkt unter dem angetippten Fall auf. Die Hoehe
       wird ueber `grid-template-rows: 0fr -> 1fr` bewegt, weil `height: auto`
       sich nicht weich uebergehen laesst. */
    @media (max-width:880px){
      #muster .mz-body{ display:block; }
      #muster .mz-paar{
        display:grid; grid-template-rows:auto 0fr; margin-bottom:.4rem;
        transition:grid-template-rows .34s var(--ease-out);
      }
      #muster .mz-tab{ grid-column:auto; }
      #muster .mz-panel{
        grid-column:auto; grid-row:auto; min-height:0; overflow:hidden;
        grid-template-columns:1fr; padding-top:0; padding-bottom:0;
        transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
                   padding-top .34s var(--ease-out), padding-bottom .34s var(--ease-out);
      }
      /* Der Pfeil zeigt jetzt nach unten und dreht sich beim Aufklappen —
         am Telefon ist er das einzige Zeichen dafuer, dass hier etwas
         aufgeht. Deshalb steht er an allen Reitern, nicht nur am aktiven. */
      #muster .mz-ta{ opacity:.45; transform:rotate(90deg); }
      #muster .mz-tt i{ white-space:normal; }
      /* Untereinander zaehlen die Zeilenhoehen des zweispaltigen Rasters
         nicht mehr: die beiden 1fr-Zeilen zogen die Beschriftungen
         auseinander und liessen 390 px Leere zwischen ihnen stehen. */
      #muster .mz-panel{ grid-template-rows:none; }
      #muster .mz-card{ justify-content:flex-start; }
      /* Einspaltig ergibt die Reihenfolge des Rasters kein Bild: erst beide
         Beschriftungen, dann die Karten ueber Kreuz. Hier steht erst der
         Ist-Zustand vollstaendig, dann der Soll-Zustand. */
      #muster .mz-spalte--ist{ order:1; }
      #muster .mz-problem   { order:2; }
      #muster .mz-folgen    { order:3; }
      #muster .mz-spalte--soll{ order:4; margin-top:var(--s-2); }
      #muster .mz-loesung   { order:5; }
      #muster .mz-ergebnis  { order:6; }
      #muster #m-01:checked~.mz-body .mz-paar[data-paar="m-01"]{grid-template-rows:auto 1fr}
      #muster #m-01:checked~.mz-body .mz-paar[data-paar="m-01"] .mz-panel{padding-top:var(--s-4);padding-bottom:var(--s-2)}
      #muster #m-01:checked~.mz-body .mz-tab[for="m-01"] .mz-ta{transform:rotate(-90deg);opacity:1}
      #muster #m-02:checked~.mz-body .mz-paar[data-paar="m-02"]{grid-template-rows:auto 1fr}
      #muster #m-02:checked~.mz-body .mz-paar[data-paar="m-02"] .mz-panel{padding-top:var(--s-4);padding-bottom:var(--s-2)}
      #muster #m-02:checked~.mz-body .mz-tab[for="m-02"] .mz-ta{transform:rotate(-90deg);opacity:1}
      #muster #m-03:checked~.mz-body .mz-paar[data-paar="m-03"]{grid-template-rows:auto 1fr}
      #muster #m-03:checked~.mz-body .mz-paar[data-paar="m-03"] .mz-panel{padding-top:var(--s-4);padding-bottom:var(--s-2)}
      #muster #m-03:checked~.mz-body .mz-tab[for="m-03"] .mz-ta{transform:rotate(-90deg);opacity:1}
      #muster #m-04:checked~.mz-body .mz-paar[data-paar="m-04"]{grid-template-rows:auto 1fr}
      #muster #m-04:checked~.mz-body .mz-paar[data-paar="m-04"] .mz-panel{padding-top:var(--s-4);padding-bottom:var(--s-2)}
      #muster #m-04:checked~.mz-body .mz-tab[for="m-04"] .mz-ta{transform:rotate(-90deg);opacity:1}
      #muster #m-05:checked~.mz-body .mz-paar[data-paar="m-05"]{grid-template-rows:auto 1fr}
      #muster #m-05:checked~.mz-body .mz-paar[data-paar="m-05"] .mz-panel{padding-top:var(--s-4);padding-bottom:var(--s-2)}
      #muster #m-05:checked~.mz-body .mz-tab[for="m-05"] .mz-ta{transform:rotate(-90deg);opacity:1}
      #muster #m-06:checked~.mz-body .mz-paar[data-paar="m-06"]{grid-template-rows:auto 1fr}
      #muster #m-06:checked~.mz-body .mz-paar[data-paar="m-06"] .mz-panel{padding-top:var(--s-4);padding-bottom:var(--s-2)}
      #muster #m-06:checked~.mz-body .mz-tab[for="m-06"] .mz-ta{transform:rotate(-90deg);opacity:1}
      #muster #m-07:checked~.mz-body .mz-paar[data-paar="m-07"]{grid-template-rows:auto 1fr}
      #muster #m-07:checked~.mz-body .mz-paar[data-paar="m-07"] .mz-panel{padding-top:var(--s-4);padding-bottom:var(--s-2)}
      #muster #m-07:checked~.mz-body .mz-tab[for="m-07"] .mz-ta{transform:rotate(-90deg);opacity:1}
      #muster #m-08:checked~.mz-body .mz-paar[data-paar="m-08"]{grid-template-rows:auto 1fr}
      #muster #m-08:checked~.mz-body .mz-paar[data-paar="m-08"] .mz-panel{padding-top:var(--s-4);padding-bottom:var(--s-2)}
      #muster #m-08:checked~.mz-body .mz-tab[for="m-08"] .mz-ta{transform:rotate(-90deg);opacity:1}

      /* ══ Am Telefon: alle vier Punkte in der aufgeklappten Antwort ══
         Bis zum 21.08.2026 lief hier eine eigene Mechanik (muster-akkordeon.js):
         erst eine Liste aller acht Titel, dann eine Einzelansicht mit Weg
         zurueck und zu den Nachbarn, und darin nur zwei der vier Punkte. Sie
         ist entfallen. Es bleibt das Aufklappen darueber, das ohne JavaScript
         auskommt und sich wie die Fragenliste weiter unten bedient: Titel
         antippen, Antwort geht auf, die uebrigen sieben bleiben stehen.

         Damit ein aufgeklappter Fall dabei nicht zu hoch wird, verlieren die
         vier Karten hier ihren Rahmen. Ihre Beschriftung traegt sie ohnehin —
         aus vier Karten werden vier Zwischenueberschriften mit Text darunter. */
      #muster .mz-card {
        padding:0; border:0; border-radius:0;
        background:none; box-shadow:none;
        backdrop-filter:none; -webkit-backdrop-filter:none;
      }
      #muster .mz-card::after { display:none; }
      /* Die wandernde Aura hing an der Kartenflaeche, die es hier nicht
         mehr gibt. */
      #muster .mz-aura { display:none; }
      /* Ohne Rahmen traegt der Abstand die Gliederung. */
      #muster .mz-panel { gap:var(--s-5); }
      #muster .mz-tag { margin-bottom:.45rem; }
      #muster .mz-p { font-size:1rem; }
    }
    @media (prefers-reduced-motion:reduce){
      #muster .mz-tab, #muster .mz-panel, #muster .mz-ta, #muster .mz-tab::before, #muster .mz-tn, #muster .mz-si,
      /* Weder wandernder Verlauf noch Glanzstreifen. */
      /* Die Aura steht still, ihre Farben bleiben. */
      #muster .mz-aura { animation:none; }
    }

/* ── aus index.html, vormals Zeile 1120 ─────────────────────── */
/* Zwei Spalten mit subgrid: die vier Zeilen (Symbol, Titel, Text, Fussblock)
       liegen in beiden Karten auf derselben Hoehe, dadurch enden beide Karten
       exakt gleich. Ohne subgrid richtet sich jede Karte nach ihrem eigenen
       Textumfang und die Unterkanten springen. */
    #datenhoheit .dh-grid { display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4,auto); gap:var(--s-5); align-items:stretch; max-width:60rem; margin-inline:auto; }
    #datenhoheit .dh-card { grid-row:span 4; display:grid; grid-template-rows:subgrid; row-gap:var(--s-4); }
    @media (max-width:860px) {
      #datenhoheit .dh-grid { grid-template-columns:1fr; grid-template-rows:none; }
      #datenhoheit .dh-card { grid-row:auto; grid-template-rows:none; display:flex; flex-direction:column; gap:var(--s-4); }
    }

/* ── aus index.html, vormals Zeile 1201 ─────────────────────── */
/* ═══════════ INSTRUMENT · gemeinsames Vokabular ═══════════
         Wird EINMAL definiert und von #ablauf und #faq geteilt.
         Legt ausschliesslich neue --inst-*-Properties an; kein Token und keine
         components.css-Regel wird ueberschrieben. .split/.steps/.check-list
         laufen auch auf den Unterseiten — deshalb alles ID-gescoped. */
      #ablauf, #faq {
        --inst-num-size:         var(--t-h3);
        --inst-num-weight:       var(--w-medium);
        --inst-num-tracking:     0.02em;
        --inst-num-width:        var(--s-7);        /* 48px feste Zahlenspalte: 01 und 09 fluchten */
        --inst-num-color:        var(--text-faint);
        --inst-num-color-active: var(--text);
        --inst-line:             var(--border);
        --inst-line-weight:      1px;
        /* Kobalt erscheint nie als Flaeche, Text oder Glow — nur als 2px-Markierung
           fuer genau einen Zustand. Ausnahme: die Fortschrittsachse (Signature). */
        --inst-accent:           var(--brand);
        --inst-accent-mark:      2px;
        --inst-row-gap:          var(--s-5);        /* ein Zeilenrhythmus fuer alle drei */
        --inst-ease:             var(--ease-out);
        --inst-dur:              var(--dur);
      }
      #ablauf .ablauf-step.is-active .ablauf-num { color: var(--inst-num-color-active); }
      @media (prefers-reduced-motion: reduce) { }

/* ── aus index.html, vormals Zeile 1372 ─────────────────────── */
/* Use-Cases: vier Saeulen nebeneinander, hochkant.
         Jede traegt Bild, Produktname, eine Zeile Ueberschrift, zwei Zeilen
         Unterzeile, den Dreischritt in einer Zeile und den Knopf. Der
         Dreischritt haelt die Uxovia-These: das Ergebnis geben Sie frei.
         Vorher lagen die vier als breite Zeilen untereinander. Nebeneinander
         vergleicht man sie in einem Blick statt nacheinander. */
      /* Kein eigener Abstand nach oben: den setzt der Sektionskopf, wie in
         allen anderen Abschnitten auch. */
      #usecases .uc3-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); align-items: stretch; }
      /* Vier Spalten brauchen ab hier zu wenig Platz pro Saeule: zwei bleiben
         lesbar, eine ist erst auf dem Telefon noetig. */
      @media (max-width: 1100px) { #usecases .uc3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); } }
      @media (max-width: 620px)  { #usecases .uc3-grid { grid-template-columns: 1fr; } }

      /* --uc-g1/2/3 sind die drei Stufen des Knopf-Verlaufs, --uc-fg die
         Schrift darauf. Bei Cyan und Orange traegt Weiss nicht mehr (unter
         2:1), dort steht dunkler Text auf der Flaeche. */
      #usecases #uc-angebot { --uc-a: 0,85,254;   --uc-t: var(--kobalt-blass-warm); --uc-g1: var(--kobalt-satt); --uc-g2: var(--brand); --uc-g3: var(--brand-hover); }
      #usecases #uc-content { --uc-a: 124,92,191; --uc-t: var(--violett-blass); --uc-g1: var(--violett-satt); --uc-g2: var(--purple); --uc-g3: var(--violett-klar); }
      #usecases #uc-voice   { --uc-a: 0,200,238;  --uc-t: var(--cyan-hell); --uc-g1: var(--cyan-satt); --uc-g2: var(--cyan); --uc-g3: var(--cyan-klar); --uc-fg: var(--cyan-nacht); }
      #usecases #uc-wissen  { --uc-a: 245,166,35; --uc-t: var(--bernstein-hell); --uc-g1: var(--bernstein-mittel); --uc-g2: var(--warning); --uc-g3: var(--bernstein-licht); --uc-fg: var(--bernstein-nacht); }

      #usecases .uc3-card {
        position: relative; overflow: hidden; border-radius: var(--r-xl);
        display: flex; flex-direction: column; text-decoration: none; color: var(--text);
        background:
          radial-gradient(95% 55% at 50% -8%, rgba(var(--uc-a), .16), transparent 62%),
          linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
          rgba(10,12,18,.72);
        border: 1px solid var(--border);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 40px 90px -55px rgba(0,0,0,.9);
        transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
      }
      #usecases .uc3-card::before {
        content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
        background: radial-gradient(80% 60% at 50% 0%, rgba(var(--uc-a), .55), rgba(255,255,255,.05) 45%, transparent 72%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2;
      }
      #usecases .uc3-card > * { position: relative; z-index: 1; }
      #usecases .uc3-card:hover { transform: translateY(-5px); border-color: rgba(var(--uc-a), .4); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 55px 110px -50px rgba(0,0,0,.95); }

      /* Anlauf von unten mit Versatz je Saeule. Vorher liefen die Karten
         56 px von links herein, was zu einer breiten Zeile passte. Vier
         schmale Saeulen nebeneinander wuerden dabei quer durcheinander
         schieben; von unten laufen sie parallel und lesen sich als Reihe. */
      html.motion-ready #usecases .uc3-card {
        transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
        transition-delay: var(--reveal-delay, 0ms);
      }
      html.motion-ready #usecases .uc3-card[data-reveal] { transform: translateY(24px); }
      html.motion-ready #usecases .uc3-card.is-inview { transform: none; }
      @media (prefers-reduced-motion: reduce) {
        html.motion-ready #usecases .uc3-card { transition: none; transform: none; }
      }

      /* Das Bild sitzt oben und behaelt sein Seitenverhaeltnis. Als
         Flex-Kind in der Spalte wird es nicht mehr auf Zeilenhoehe
         gestreckt, aspect-ratio traegt hier also. */
      #usecases .uc3-media { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; }
      #usecases .uc3-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
      #usecases .uc3-card:hover .uc3-media img { transform: scale(1.05); }
      #usecases .uc3-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,12,18,.72)); pointer-events: none; }

      /* Enger als in der Zeilenfassung: eine Saeule ist rund 240 px breit,
         die alten 3,25 rem Polster liessen davon zu wenig fuer den Text. */
      /* In der Karte fluchtet der Hinweis mit dem Kartentext darunter. */
      #usecases .ki-hinweis { padding-inline: clamp(1.15rem, 1.5vw, 1.5rem); margin-top: var(--s-3); }
      #usecases .uc3-body { display: flex; flex-direction: column; gap: var(--s-3); padding: clamp(1.15rem, 1.5vw, 1.5rem); flex: 1; }
      #usecases .uc3-head { display: flex; align-items: center; gap: .55rem; }
      #usecases .uc3-chip { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--uc-t); background: rgba(var(--uc-a), .16); border: 1px solid rgba(var(--uc-a), .38); }
      #usecases .uc3-chip svg { width: 16px; height: 16px; }
      #usecases .uc3-eyebrow { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; color: var(--uc-t); font-weight: var(--w-medium); min-width: 0; overflow-wrap: anywhere; }
      /* min-height haelt die vier Saeulen auf einer Linie, auch wenn eine
         Ueberschrift doch einmal umbricht. Feste Hoehen waeren hier falsch,
         der Text muss wachsen duerfen. */
      #usecases .uc3-title { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.25; min-height: 1.25em; letter-spacing: var(--tr-h); font-weight: var(--w-semi); margin: 0; }
      #usecases .uc3-lede { color: var(--text-2); font-size: .92rem; line-height: 1.5; min-height: 3em; margin: 0; }

      /* Der Dreischritt als eine Zeile: Input, Verarbeitung, Freigabe.
         In der Zeilenfassung stand er senkrecht mit Erklaersatz je Stufe.
         Auf 240 px Breite traegt nur die Stufenbezeichnung. */
      #usecases .uc3-flow { list-style: none; margin: var(--s-1) 0 var(--s-2); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; }
      #usecases .uc3-flow li { display: flex; align-items: center; gap: .45rem; min-width: 0; }
      #usecases .uc3-flow li + li::before { content: "\203A"; color: rgba(var(--uc-a), .8); font-size: .95rem; line-height: 1; }
      #usecases .uc3-k { display: block; font-family: var(--font-mono); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; color: var(--uc-t); white-space: nowrap; }
      #usecases .uc3-flow .is-final .uc3-k { color: var(--text); }

      /* Prominenter Produkt-Button — unten buendig ueber alle drei Karten */
      /* Derselbe Bau wie der Erstgespraechs-Knopf: voller Verlauf auf
         doppelter Breite, kein Rand, dazu ein Glanzstreifen quer darueber.
         Beim Ueberfahren der Karte wandert der Verlauf nach rechts, der
         Knopf hebt sich einen Millimeter. Nur die Farbe kommt aus der
         Auszeichnung der jeweiligen Karte statt aus Kobalt/Violett. */
      #usecases .uc3-cta { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; margin-top: auto; padding: .7rem .9rem; border-radius: var(--r-sm); font-family: var(--font-body); font-size: .85rem; font-weight: var(--w-semi); letter-spacing: -.005em; white-space: nowrap; color: var(--uc-fg, var(--text-on-brand)); border: none; position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(90deg, var(--uc-g1) 0%, var(--uc-g2) 50%, var(--uc-g3) 100%) 0% 0% / 200%; box-shadow: 0 12px 32px -10px rgba(var(--uc-a), .5), inset 0 1px 0 rgba(255,255,255,.3); transition: background-position .6s ease, transform .3s ease, box-shadow .3s ease; }
      #usecases .uc3-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-100%); transition: transform .8s ease; pointer-events: none; }
      #usecases .uc3-card:hover .uc3-cta::before { transform: translateX(100%); }
      #usecases .uc3-card:hover .uc3-cta { background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 12px 32px -10px rgba(var(--uc-a), .6), 0 6px 18px -8px rgba(var(--uc-a), .45), inset 0 1px 0 rgba(255,255,255,.35); }
      /* Text und Pfeil ueber den Glanzstreifen heben. */
      #usecases .uc3-cta > * { position: relative; z-index: 1; }
      #usecases .uc3-cta svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
      #usecases .uc3-card:hover .uc3-cta svg { transform: translateX(3px); }

      /* Der Dreischritt laedt sich der Reihe nach auf, sobald die Saeule in
         den Blick kommt: erst Input, dann Verarbeitung, dann Freigabe. Die
         Bewegung zeigt die Leserichtung, sie ist keine Zierde.
         Nur unter html.motion-ready (JS aktiv); ohne JS oder bei reduzierter
         Bewegung steht alles sofort im Endzustand. */
      #usecases .uc3-flow li:nth-child(1) { --uc-d: .20s; }
      #usecases .uc3-flow li:nth-child(2) { --uc-d: .34s; }
      #usecases .uc3-flow li:nth-child(3) { --uc-d: .48s; }
      html.motion-ready #usecases .uc3-flow li { opacity: .25; transform: translateY(5px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
      html.motion-ready #usecases .uc3-card.is-inview .uc3-flow li { opacity: 1; transform: none; transition-delay: var(--uc-d); }

      @media (prefers-reduced-motion: reduce) {
        #usecases .uc3-card, #usecases .uc3-media img, #usecases .uc3-cta svg,
        #usecases .uc3-cta, #usecases .uc3-cta::before,
        html.motion-ready #usecases .uc3-flow li { transition: none !important; animation: none !important; }
        #usecases .uc3-card:hover, #usecases .uc3-card:hover .uc3-media img,
        #usecases .uc3-card:hover .uc3-cta,
        html.motion-ready #usecases .uc3-flow li { transform: none !important; opacity: 1 !important; }
        /* Weder wandernder Verlauf noch Glanzstreifen. */
        #usecases .uc3-card:hover .uc3-cta { background-position: 0% 0% !important; }
        #usecases .uc3-cta::before, #usecases .uc3-card:hover .uc3-cta::before { transform: translateX(-100%) !important; }
      }

      /* Pfeile und Miniaturen gibt es nur auf schmalen Schirmen. Nebeneinander
         stehen alle vier Saeulen ohnehin im Blick. */
      #usecases .uc3-blaettern { position: relative; }
      #usecases .uc3-pfeilzone, #usecases .uc3-minis { display: none; }

      /* Auf einer einzelnen Spalte wird geblaettert statt gescrollt: vier
         Saeulen untereinander sind auf dem Telefon eine lange Strecke, und
         der vierte Einstiegspunkt wird nie gesehen. Gebaut mit
         scroll-snap, damit Wischen ohne eigenes Skript funktioniert. */
      @media (max-width: 620px) {
        #usecases .uc3-grid {
          grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%;
          overflow-x: auto; overscroll-behavior-x: contain;
          scroll-snap-type: x mandatory; scrollbar-width: none;
          gap: var(--s-4); margin-top: clamp(28px, 7vw, 40px);
        }
        #usecases .uc3-grid::-webkit-scrollbar { display: none; }
        #usecases .uc3-card { scroll-snap-align: center; scroll-snap-stop: always; }
        /* Der Anlauf von unten wuerde die Saeule quer aus dem Blaetterfenster
           schieben und einen waagerechten Versatz erzeugen. */
        html.motion-ready #usecases .uc3-card[data-reveal] { transform: none; }

        #usecases .uc3-body { padding: clamp(1.4rem, 5vw, 1.9rem); gap: var(--s-4); }
        #usecases .uc3-title { font-size: 1.35rem; min-height: 0; }
        #usecases .uc3-lede { font-size: 1rem; min-height: 0; }
        #usecases .uc3-chip { width: 36px; height: 36px; border-radius: 11px; }
        #usecases .uc3-chip svg { width: 19px; height: 19px; }

        /* Die Zone holt sich die Bildhoehe aus demselben Seitenverhaeltnis
           wie .uc3-media und braucht dafuer kein Skript. */
        #usecases .uc3-pfeilzone {
          display: block; position: absolute; inset: 0 0 auto; aspect-ratio: 16 / 9;
          pointer-events: none; z-index: 3;
        }
        #usecases .uc3-pfeil {
          position: absolute; top: 50%; transform: translateY(-50%);
          pointer-events: auto; display: grid; place-items: center;
          width: 42px; height: 42px; border-radius: 50%;
          background: rgba(9, 11, 16, .72);
          backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
          border: 1px solid var(--border-strong);
          color: var(--text); cursor: pointer;
          transition: opacity var(--dur) var(--ease-out);
        }
        #usecases .uc3-pfeil svg { width: 20px; height: 20px; }
        #usecases .uc3-pfeil-zurueck { inset-inline-start: var(--s-3); }
        #usecases .uc3-pfeil-vor { inset-inline-end: var(--s-3); }
        /* Anschlag: bei der ersten und der letzten Saeule geht es nicht
           weiter. Der Knopf bleibt stehen und daempft sich, statt zu
           verschwinden und das Bild springen zu lassen. */
        #usecases .uc3-pfeil[disabled] { opacity: .3; cursor: default; }

        #usecases .uc3-minis {
          display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
          gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none;
        }
        /* Gedaempft wird nur das Bild, nicht der Knopf. Laege die Deckkraft
           auf dem Knopf, verschwaende sie den Rahmen gleich mit, und die
           ruhenden Miniaturen saehen aus wie gar nichts. Der Rahmen zeigt,
           dass da noch drei weitere zum Antippen stehen. */
        #usecases .uc3-minis button {
          display: block; width: 100%; padding: 0; cursor: pointer;
          border-radius: var(--r-sm); overflow: hidden;
          border: 1px solid var(--border-strong); background: none;
          transition: border-color var(--dur) var(--ease-out);
        }
        /* height: auto ist Pflicht, seit das <img> ein height-Attribut traegt:
           aspect-ratio wirkt nur, solange eine der beiden Seiten auto ist.
           Sonst gewinnt der Attributwert und die Miniatur wird 405 px hoch. */
        #usecases .uc3-minis img {
          display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
          opacity: .4; transition: opacity var(--dur) var(--ease-out);
        }
        /* Die vier Bilder sind dunkel und aehnlich. Ablesbar ist die Position
           ueber Deckkraft und Rahmen, nicht ueber das Motiv. Der Rahmen nimmt
           die Auszeichnungsfarbe der jeweiligen Saeule. */
        #usecases .uc3-minis li:nth-child(1) { --uc-a: 0,85,254; }
        #usecases .uc3-minis li:nth-child(2) { --uc-a: 124,92,191; }
        #usecases .uc3-minis li:nth-child(3) { --uc-a: 0,200,238; }
        #usecases .uc3-minis li:nth-child(4) { --uc-a: 245,166,35; }
        #usecases .uc3-minis button[aria-current="true"] { border-color: rgba(var(--uc-a), .9); }
        #usecases .uc3-minis button[aria-current="true"] img { opacity: 1; }
      }

      @media (prefers-reduced-motion: reduce) {
        #usecases .uc3-pfeil, #usecases .uc3-minis button, #usecases .uc3-minis img { transition: none; }
      }

/* ── aus index.html, vormals Zeile 1708 ─────────────────────── */
/* ── #faq · zweispaltig ────────────────────────────────────────────
       Links steht, worum es geht, rechts stehen die Fragen. Einspaltig
       untereinander war die Ueberschrift nach der zweiten Frage aus dem
       Blick; so bleibt der Zusammenhang beim Lesen erhalten. */
    #faq .faq-split {
      display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
      gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
    }
    #faq .faq-intro { display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: 110px; }
    #faq .faq-pill {
      display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start;
      padding: 0.4rem 0.9rem; border-radius: var(--r-pill);
      background: rgba(16, 19, 24, 0.4);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      font-size: var(--t-small); font-weight: var(--w-medium); color: var(--text-2);
    }
    #faq .faq-pill svg { width: 14px; height: 14px; color: var(--kobalt-hell); }
    #faq .faq-intro h2 { margin: 0; text-wrap: balance; }
    #faq .faq-intro > p { margin: 0; max-width: 34ch; }

    /* Kontaktkarte: der zweite Weg, falls eine Frage offen bleibt. */
    /* Der Markenverlauf lief nach transparent aus, und genau dort steht die
       Hintergrundfigur der Sektion (backdrops.js setzt bei #faq figure-7).
       Das Netzgeflecht lag damit hinter dem Text und machte ihn unruhig.
       Jetzt dieselbe Machart wie .glass: eine deckende Grundflaeche unter dem
       Verlauf, dazu die Unschaerfe dahinter. 0,82 statt der 0,72 von .glass,
       weil das Motiv an dieser Stelle besonders kontrastreich ist. */
    #faq .faq-kontakt {
      margin-top: var(--s-3); padding: var(--s-5);
      border-radius: var(--r-lg);
      border: 1px solid var(--border-brand);
      background:
        linear-gradient(150deg, rgba(0, 85, 254, 0.16), rgba(124, 92, 191, 0.10) 70%, transparent),
        rgba(12, 12, 18, 0.82);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      display: flex; flex-direction: column; gap: var(--s-4);
    }
    #faq .faq-kontakt-kopf { display: flex; align-items: flex-start; gap: var(--s-3); }
    #faq .faq-kontakt-ic {
      display: grid; place-items: center; flex-shrink: 0;
      width: 2.5rem; height: 2.5rem; border-radius: var(--r-md);
      background: var(--brand-soft); border: 1px solid var(--border-brand); color: var(--kobalt-blass);
    }
    #faq .faq-kontakt-ic svg { width: 18px; height: 18px; }
    #faq .faq-kontakt strong { display: block; font-size: var(--t-h3); font-weight: var(--w-semi); color: var(--text); }
    #faq .faq-kontakt p { margin: 0.2rem 0 0; font-size: var(--t-small); color: var(--text-2); }
    /* Der Knopf hier ist der leiseste der Seite: Standardgroesse statt der
       grossen Buchungsknoepfe, mittig statt ueber die volle Kartenbreite. */
    #faq .faq-kontakt .btn { align-self: center; }
    #faq .faq-kontakt .cta-block-fuss, #faq .faq-kontakt .termin-hinweis { text-align: center; }
    /* Die Regel fuer alle <p> dieser Box oben greift durch die ID staerker als
       .termin-hinweis und setzte die Zeile hier auf 14px zurueck — als einzige
       der Seite. Hier steht sie wieder auf dem gemeinsamen Wert. */
    #faq .faq-kontakt .termin-hinweis { font-size: 0.75rem; color: var(--text-legible); }

    /* ── Fragen als abgesetzte Karten ── */
    #faq .faq-list { display: flex; flex-direction: column; gap: var(--s-3); }
    #faq .faq-item {
      border-radius: var(--r-lg);
      border: 1px solid var(--border);
      /* Deckend, nicht durchscheinend: dahinter laeuft der Sternenhimmel des
         Hintergrunds, und der zog vorher quer durch die Antworttexte. */
      background: rgb(10, 12, 18);
      overflow: hidden;
      transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
    }
    #faq .faq-item:hover { border-color: var(--border-strong); }
    /* Der blaue Anteil liegt als eigene Schicht ueber der deckenden Flaeche,
       statt als durchsichtige Farbe. Er ist staerker als die frueheren 7 %:
       damals kam die Aufhellung vom durchscheinenden Hintergrund, ohne den
       waere die offene Karte von einer geschlossenen kaum zu unterscheiden. */
    #faq .faq-item.is-open {
      border-color: var(--border-brand);
      background: linear-gradient(rgba(0, 85, 254, 0.14), rgba(0, 85, 254, 0.14)), rgb(10, 12, 18);
    }

    #faq .faq-item h3 { margin: 0; font: inherit; }
    #faq .faq-q {
      width: 100%; display: grid;
      grid-template-columns: 2.25rem 1fr auto; align-items: center;
      column-gap: var(--s-3);
      text-align: left; padding: var(--s-4) var(--s-5); margin: 0;
      background: none; border: 0; cursor: pointer; color: var(--text);
      font-family: inherit; font-size: var(--t-body); font-weight: var(--w-semi); line-height: 1.45;
    }
    #faq .faq-num {
      font-family: var(--font-mono); font-size: var(--t-small); font-weight: var(--w-medium);
      font-variant-numeric: tabular-nums; color: var(--text-legible);
      transition: color var(--dur) var(--ease-out);
    }
    #faq .faq-item.is-open .faq-num { color: var(--kobalt-hell); }
    /* Der Winkel dreht sich beim Oeffnen, statt gegen ein Minus zu tauschen —
       eine Drehung laesst sich weich fuehren, ein Zeichenwechsel springt. */
    #faq .faq-ico {
      width: 18px; height: 18px; flex-shrink: 0; color: var(--text-3);
      transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
    }
    #faq .faq-item.is-open .faq-ico { transform: rotate(180deg); color: var(--kobalt-hell); }

    /* Aufklappen ueber grid-template-rows: die Hoehe laesst sich damit
       animieren, ohne sie vorher zu kennen. */
    #faq .faq-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
    #faq .faq-item.is-open .faq-wrap { grid-template-rows: 1fr; }
    #faq .faq-inner { overflow: hidden; }
    #faq .faq-a {
      padding: 0 var(--s-5) var(--s-5) calc(var(--s-5) + 2.25rem + var(--s-3));
      font-size: var(--t-body); line-height: var(--lh-body); color: var(--text-2);
    }

    @media (max-width: 900px) {
      #faq .faq-split { grid-template-columns: 1fr; gap: var(--s-6); }
      #faq .faq-intro { position: static; }
      #faq .faq-q { grid-template-columns: 2rem 1fr auto; padding: var(--s-4); }
      #faq .faq-a { padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 2rem + var(--s-3)); }
    }
    @media (prefers-reduced-motion: reduce) {
      #faq .faq-wrap, #faq .faq-ico, #faq .faq-item { transition: none; }
    }