/* =====================================================================
   Gestaltungssysteme: Basis (references/systeme.md). Gilt nur mit data-system am <html>, in @layer system.
   Die Basis baut die Bauteile aus Tokens; jedes System (praezision, editorial, warm, werk, kontrast) setzt die
   Tokens und seine Signatur. Kundenwerte kommen aus dem :root der Vorlage (farben.py): --akzent, --akzent-knopf,
   --akzent-knopf-hover, --dunkel. Systeme ueberschreiben nie --akzent, sie setzen ihn nur ein.

   Tokens, die jedes System setzt:
     Farbe   --papier (Grund) --kachel (Flaeche) --text --leise --zart (zweite Zeile) --linie --linie-stark
             --tief --tief-text --tief-leise --tief-linie (dunkle Buehne) --knopf --knopf-text --knopf-hover
             --tief-knopf --tief-knopf-text --kopf-grund --kopf-text --kopf-linie --fuss-grund --fuss-text
     Schrift --schrift --schrift-text --display-gewicht --display-lauf --display-hoehe --display-fall
             --display-breite --h1 --h2 --h3 --h3-gewicht --schrift-h3 --text-groesse --zahl --zahl-gewicht
     Form    --radius --bild-radius --knopf-radius --knopf-hoehe --knopf-gewicht --feld-radius
     Takt    --abstand (Sektion oben und unten), --rand (Seitenrand, aus der Vorlage)
     Bewegung --dauer --kurve --auf-weg --auf-dauer
   Bauteile neu fuer Richtungen: .start (erster Bildschirm je System), .tief (dunkle Buehne fuer jede Sektion),
   .index, .split, .zitat. Die Bauteile der Vorlage (Kopf, Knoepfe, zahlen, band, ablauf, fragen, standort,
   kontakt, fuss, leiste, demo) bekommen hier ihr Aussehen aus den Tokens. Die Maske (Fassung 4) bleibt unberuehrt
   bis auf Tokens und den Hauptknopf.
   ===================================================================== */
@layer system{

/* ---------- Grund und Schrift ---------- */
html[data-system]{--fokus:var(--text);--fokus-gegen:var(--papier);background:var(--papier)}
html[data-system] body{background:var(--papier);color:var(--text);font-family:var(--schrift-text);font-size:var(--text-groesse,17px);line-height:1.6;font-kerning:normal}
html[data-system] :is(h1,h2):not(.maske__h1){font-family:var(--schrift);font-weight:var(--display-gewicht);letter-spacing:var(--display-lauf);line-height:var(--display-hoehe);text-transform:var(--display-fall,none);font-stretch:var(--display-breite,100%)}
html[data-system] h2{font-size:var(--h2)}
html[data-system] h3{font-family:var(--schrift-h3,var(--schrift-text));font-size:var(--h3);font-weight:var(--h3-gewicht,600);letter-spacing:var(--h3-lauf,-.01em);line-height:1.2;font-stretch:var(--h3-breite,100%)}
html[data-system] :is(h1,h2,h3) .zart{color:var(--zart)}
html[data-system] p{max-width:60ch}
html[data-system] .t-leise{color:var(--leise)}
html[data-system] ::selection{background:var(--text);color:var(--papier)}

/* Dunkle Buehne fuer jede Sektion: Tokens werden umgestellt, alle Bauteile darin folgen */
html[data-system] .tief{background:var(--tief);color:var(--tief-text);--text:var(--tief-text);--leise:var(--tief-leise);--zart:var(--tief-leise);--linie:var(--tief-linie);--linie-stark:var(--tief-text);--knopf:var(--tief-knopf);--knopf-text:var(--tief-knopf-text);--knopf-hover:var(--tief-knopf-hover);--fokus:var(--tief-text);--fokus-gegen:var(--tief)}

/* ---------- Kopf: deckend in der Farbe des Systems, nie durchsichtig ---------- */
html[data-system] .kopf,html[data-system] .kopf:not(.is-fest):not(.is-menue){color:var(--kopf-text)}
html[data-system] .kopf::before,html[data-system] .kopf:not(.is-fest):not(.is-menue)::before{background:var(--kopf-grund);opacity:1}
html[data-system] .kopf.is-fest::before{border-bottom-color:var(--kopf-linie)}
html[data-system] .kopf{--fokus:var(--kopf-text);--fokus-gegen:var(--kopf-grund)}
html[data-system] .marke__zeichen{font-family:var(--schrift);font-weight:var(--marke-gewicht,600);font-size:var(--marke-groesse,30px);letter-spacing:var(--display-lauf);text-transform:var(--display-fall,none);font-stretch:var(--display-breite,100%)}
html[data-system] .marke__punkt{border-radius:var(--punkt-radius,0)}
html[data-system] .marke__name,html[data-system] .kopf:not(.is-fest):not(.is-menue) .marke__name{font-size:12.5px;font-weight:500;letter-spacing:.01em;text-transform:none;line-height:1.35;border-left-color:var(--kopf-linie)}
html[data-system] .nav{font-size:var(--nav-groesse,14px);gap:clamp(18px,2.4vw,34px)}
html[data-system] .nav a{transition:opacity var(--dauer) var(--kurve)}
html[data-system] .nav a:hover{text-decoration:none;opacity:.62}
html[data-system] .kopf__tel{font-weight:500}
html[data-system] #mobilnav{background:var(--kopf-grund);color:var(--kopf-text);border-bottom-color:var(--kopf-linie)}
html[data-system] #mobilnav a{border-bottom-color:var(--kopf-linie);font-weight:500}

/* ---------- Knoepfe: ein Hauptknopf als ruhige Flaeche, ohne Pfeil, ohne Anheben; zweiter Weg als Textlink ---------- */
html[data-system] .knopf:not(.maske__tel){gap:10px;min-height:var(--knopf-hoehe,48px);padding:0 var(--knopf-innen,24px);background:var(--knopf);color:var(--knopf-text);border:0;border-radius:var(--knopf-radius);font-family:var(--schrift-text);font-size:var(--knopf-schrift,15px);font-weight:var(--knopf-gewicht,500);letter-spacing:0;text-transform:none;transform:none;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
html[data-system] .knopf:not(.maske__tel):hover{background:var(--knopf-hover);transform:none}
html[data-system] .knopf:not(.maske__tel) svg{display:none}
html[data-system] .knopf--dunkel:not(.maske__tel){background:var(--kachel);color:var(--text)}
html[data-system] .knopf--dunkel:not(.maske__tel):hover{background:var(--linie)}
html[data-system] .knopf--linie:not(.maske__tel),html[data-system] .textlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;background:none;border:0;border-radius:0;color:inherit;font-family:var(--schrift-text);font-size:var(--knopf-schrift,15px);font-weight:var(--knopf-gewicht,500);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.42em;text-decoration-color:var(--linie-stark);transition:text-decoration-color var(--dauer) var(--kurve)}
html[data-system] .knopf--linie:not(.maske__tel):hover,html[data-system] .textlink:hover{background:none;text-decoration-color:currentColor;text-decoration-thickness:1px}
html[data-system] .rundpfeil{width:auto;height:auto;border:0;border-radius:0;font-size:18px;background:none!important}
html[data-system] .paar > .knopf{padding-inline:12px}

/* ---------- Sektionen ---------- */
html[data-system] .abschnitt{padding:var(--abstand) var(--rand)}
html[data-system] .abschnitt--eng{padding-block:calc(var(--abstand) * .6)}
html[data-system] .kopfzeile{align-items:flex-end;gap:clamp(24px,4vw,64px);margin-bottom:clamp(36px,4.4vw,72px)}
html[data-system] .kopfzeile p{color:var(--leise);font-size:var(--text-groesse,17px);max-width:38ch}

/* ---------- Start: erster Bildschirm einer Richtung. Gemeinsames Markup, jedes System ordnet es anders:
     <section class="start" data-nur="1"> .start__text (h1, .start__satz, .start__aktion) · figure.start__bild · .start__fuss
   Unten bleibt --pille-platz fuer den Umschalter frei (Text, Knoepfe, Fusszeile enden darueber). ---------- */
html[data-system] .start{position:relative;isolation:isolate;overflow:hidden;min-height:620px;min-height:min(calc(100svh - var(--kopf-h)),1000px);padding:clamp(32px,6vh,80px) var(--rand) calc(28px + var(--pille-platz))}
html[data-system] .start__text{position:relative;z-index:2;min-width:0}
html[data-system] .start h1{font-size:var(--h1)}
html[data-system] .start__satz{margin-top:clamp(18px,2.4vh,28px);font-size:var(--satz-groesse,clamp(17px,1.35vw,20px));line-height:1.5;color:var(--leise);max-width:42ch}
html[data-system] .start__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(22px,3.4vh,36px)}
html[data-system] .start__bild{position:relative;margin:0;min-width:0;min-height:0;overflow:hidden}
html[data-system] .start__bild > img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
html[data-system] .start__bild--objekt > img{object-fit:contain}
html[data-system] .start__fuss{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px 28px;font-size:14px;color:var(--leise)}
html[data-system] .start__fuss > div{display:flex;flex-direction:column}
html[data-system] .start__fuss dt{font-weight:500;color:var(--text)}
html[data-system] .start__fuss dd{margin:0}
html[data-system] .start .hero__ecke{right:var(--rand);top:18px;bottom:auto}

/* ---------- Index: Zeilen mit Haarlinie (Leistungen ohne Bild) ---------- */
html[data-system] .index{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie-stark)}
html[data-system] .index__zeile{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;column-gap:clamp(20px,3vw,48px);align-items:baseline;padding:clamp(20px,2.4vw,34px) 0;border-bottom:1px solid var(--linie)}
html[data-system] .index__zeile p{margin:0;color:var(--leise)}
html[data-system] .index__zeile > span{color:var(--leise);font-size:15px;white-space:nowrap}
html[data-system] a.index__zeile{transition:opacity var(--dauer) var(--kurve)}
html[data-system] a.index__zeile:hover{opacity:.7}

/* ---------- Split: Text auf fuenf, Bild auf sieben Spalten, das Bild laeuft an den Rand ---------- */
html[data-system] .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,112px);align-items:center;padding:var(--abstand) 0 var(--abstand) var(--rand)}
html[data-system] .split__text p{margin-top:20px;color:var(--leise)}
html[data-system] .split__text .textlink{margin-top:18px}
html[data-system] .split__bild{margin:0;aspect-ratio:5/4;overflow:hidden;border-radius:var(--bild-radius) 0 0 var(--bild-radius)}
html[data-system] .split__bild img{width:100%;height:100%;object-fit:cover}
html[data-system] .split--umgekehrt{grid-template-columns:minmax(0,7fr) minmax(0,5fr);padding:var(--abstand) var(--rand) var(--abstand) 0}
html[data-system] .split--umgekehrt .split__bild{grid-column:1;grid-row:1;border-radius:0 var(--bild-radius) var(--bild-radius) 0}

/* ---------- Zitat: ein Satz gross, mit Quelle ---------- */
html[data-system] .zitat{margin:0;max-width:22ch;font-family:var(--schrift);font-weight:var(--display-gewicht);font-size:var(--h2);line-height:1.08;letter-spacing:var(--display-lauf);text-transform:var(--display-fall,none);font-stretch:var(--display-breite,100%)}
html[data-system] .zitat + p{margin-top:24px;color:var(--leise);font-size:15px}

/* ---------- Zahlen als Typografie, nie als Kachel ---------- */
html[data-system] .zahlen{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 clamp(24px,3vw,56px)}
html[data-system] .zahlen .zahlen__eintrag,html[data-system] .zahlen--schild .zahlen__eintrag{background:none;color:inherit;border-radius:0;padding:22px 0 0;border-top:1px solid var(--linie-stark)}
html[data-system] .zahlen--schild .zahlen__eintrag::before{display:none}
html[data-system] .zahlen .t-zahl,html[data-system] .zahlen--schild .t-zahl{display:block;margin:0;font-family:var(--schrift-zahl,var(--schrift));font-weight:var(--zahl-gewicht,var(--display-gewicht));font-size:var(--zahl);line-height:1;letter-spacing:var(--display-lauf);font-stretch:var(--display-breite,100%);font-variant-numeric:tabular-nums lining-nums;color:var(--zahl-farbe,var(--text))}
html[data-system] .zahlen .t-zahl small{font-size:.4em;letter-spacing:0;margin-left:.12em;color:var(--leise);font-weight:inherit}
html[data-system] .zahlen dd{margin-top:14px;color:var(--leise);font-size:15px;max-width:28ch}

/* ---------- Band, Ablauf, Fragen ---------- */
html[data-system] .band__bild{height:clamp(380px,78vh,880px);border-radius:var(--band-radius,0);margin-inline:var(--band-rand,0)}
html[data-system] .band figcaption{width:auto;margin:14px var(--rand) 0;font-size:14px;color:var(--leise)}
html[data-system] .ablauf{border-top-color:var(--linie-stark)}
html[data-system] .ablauf__schritt{border-bottom-color:var(--linie)}
html[data-system] .ablauf__schritt::before{font-family:var(--schrift-zahl,var(--schrift));font-weight:var(--zahl-gewicht,var(--display-gewicht));font-stretch:var(--display-breite,100%);color:var(--ablauf-farbe,var(--leise));font-size:clamp(32px,3.4vw,52px)}
html[data-system] .fragen{border-top-color:var(--linie-stark)}
html[data-system] .frage{border-bottom-color:var(--linie)}
html[data-system] .frage summary{font-family:var(--schrift-text);font-weight:500;font-size:clamp(18px,1.5vw,21px);padding:22px 0}
html[data-system] .frage summary::after{color:var(--leise);font-weight:300}

/* ---------- Standort, Karte ---------- */
html[data-system] .karte{border-radius:var(--bild-radius);border-color:var(--linie);background:var(--kachel)}
html[data-system] .karte__platte{background:var(--kachel)}
html[data-system] .standort__daten dl{font-size:15px}
html[data-system] .standort__daten dt{font-weight:500}

/* ---------- Kontakt und Fuss ---------- */
html[data-system] .kontakt{background:var(--kontakt-grund,var(--papier));color:var(--text);--fokus:var(--text);--fokus-gegen:var(--kontakt-grund,var(--papier))}
html[data-system] .kontakt h2{font-size:var(--h-kontakt,var(--h2))}
html[data-system] .kontakt h2 .zart{color:var(--zart)}
html[data-system] .kontakt p{color:var(--leise)}
html[data-system] .kontakt__tel{font-family:var(--schrift);font-weight:var(--display-gewicht);font-stretch:var(--display-breite,100%);letter-spacing:var(--display-lauf);font-size:clamp(34px,4.2vw,64px)}
html[data-system] .kontakt__tel svg{display:none}
html[data-system] .kontakt__mail{border-bottom-color:var(--linie-stark);font-weight:500}
html[data-system] .adresse{border-left-color:var(--linie)}
html[data-system] .adresse__zeichen{color:var(--leise)}
html[data-system] .fuss{background:var(--fuss-grund);color:var(--fuss-text);border-top:1px solid var(--fuss-linie,transparent);--fokus:var(--fuss-text);--fokus-gegen:var(--fuss-grund)}

/* ---------- Mobile Leiste ---------- */
html[data-system] .leiste{background:var(--papier);border-top-color:var(--linie)}

/* ---------- Demo: Wahl als Zeilen mit Haarlinie, ein ruhiger Knopf ---------- */
html[data-system] .demo{background:rgb(12 12 12/.5)}
html[data-system] .demo__karte{background:var(--papier);color:var(--text);border-radius:var(--demo-radius,var(--radius))}
html[data-system] .demo__marke{text-transform:none;letter-spacing:0;font-weight:500;font-size:13px}
html[data-system] .demo__marke::before{background:var(--akzent)}
html[data-system] .demo__zu{border-color:var(--linie)}
html[data-system] .demo__balken{height:2px;background:var(--linie)}
html[data-system] .demo__balken i{background:var(--text)}
html[data-system] .demo__titel{font-family:var(--schrift);font-weight:var(--display-gewicht);letter-spacing:var(--display-lauf);text-transform:var(--display-fall,none);font-stretch:var(--display-breite,100%);line-height:1.04;font-size:clamp(28px,3vw,40px)}
html[data-system] .demo__wahl{gap:0;border-top:1px solid var(--linie)}
html[data-system] .demo__knopf{min-height:64px;padding:16px 2px;background:none;border:0;border-bottom:1px solid var(--linie);border-radius:0;font-size:17px;font-weight:500;transition:border-color var(--dauer) var(--kurve)}
html[data-system] .demo__knopf::after{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--leise);transition:border-width .2s var(--kurve),border-color .2s}
html[data-system] .demo__knopf:hover{background:none;border-bottom-color:var(--text)}
html[data-system] .demo__knopf[aria-pressed="true"]{background:none;color:var(--text);border-bottom-color:var(--text)}
html[data-system] .demo__knopf[aria-pressed="true"]::after{border:6px solid var(--text)}
html[data-system] .demo__knopf[aria-pressed="true"] small,html[data-system] .demo__knopf small{color:var(--leise);font-weight:400}
html[data-system] .demo__feld input{border-radius:var(--feld-radius,var(--radius));border-color:var(--leise);background:var(--papier)}
html[data-system] .demo__tag{border-radius:var(--feld-radius,var(--radius));background:var(--kachel)}
html[data-system] .demo__tag[aria-pressed="true"],html[data-system] .demo__zeit[aria-pressed="true"]{background:var(--knopf);border-color:var(--knopf);color:var(--knopf-text)}
html[data-system] .demo__tag[aria-pressed="true"] small{color:var(--knopf-text)}
html[data-system] .demo__zeit{border-radius:var(--feld-radius,var(--radius));background:var(--papier)}
html[data-system] .demo__haken{background:var(--knopf);color:var(--knopf-text)}
html[data-system] .demo__ergebnis dl{background:none;padding:0 0 20px;border-bottom:1px solid var(--linie);border-radius:0}
html[data-system] .demo__fuss{border-top-color:var(--linie)}
html[data-system] .demo-offen .demo__karte{background:var(--kachel)}

/* ---------- Einblenden: Weg und Dauer je System ---------- */
html[data-system].js .auf{transform:translateY(var(--auf-weg,14px));transition:opacity var(--auf-dauer,.7s) var(--kurve),transform var(--auf-dauer,.7s) var(--kurve)}
html[data-system].js .auf.is-da{opacity:1;transform:none}

/* ---------- Niedrige Querformate: der Umschalter steht senkrecht am rechten Rand (Vorlage), dort nie Text ---------- */
@media (min-width:761px) and (max-height:520px){
  html[data-system] main .start{padding-right:calc(var(--rand) + 62px)}   /* main: schlaegt die Abstaende der Systeme */
  html[data-system] main .start__fuss{right:calc(var(--rand) + 62px)}
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:760px){
  html[data-system] body{font-size:16px}
  html[data-system] .kopf{gap:10px}
  html[data-system] .marke{gap:10px}
  html[data-system] .marke__zeichen{font-size:var(--marke-klein,24px)}
  html[data-system] .marke__name,html[data-system] .kopf:not(.is-fest):not(.is-menue) .marke__name{padding-left:10px;font-size:12px;letter-spacing:0}
  html[data-system] .kopf__tel{margin-left:auto}
  html[data-system] .start{padding:24px var(--rand) calc(16px + var(--pille-platz))}
  html[data-system] .start__aktion{gap:8px 22px}
  html[data-system] .index__zeile{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  html[data-system] .index__zeile p{grid-column:1 / -1;grid-row:2}
  html[data-system] .split,html[data-system] .split--umgekehrt{grid-template-columns:minmax(0,1fr);padding:var(--abstand) 0;gap:28px}
  html[data-system] .split__bild,html[data-system] .split--umgekehrt .split__bild{grid-row:1;border-radius:0;aspect-ratio:4/3}
  html[data-system] .split__text{padding-inline:var(--rand)}
  html[data-system] .zahlen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 18px}
  html[data-system] .band__bild{height:clamp(300px,62vh,520px);margin-inline:0;border-radius:0}
}
}