/* ===========================================================================
   Schaufenster. Ein Stil fuer den Eingang /modell/ und die sieben Seiten
   dahinter (Modellportfolio, Universen, Wertentwicklung, Risiko, Makro Index,
   Methodik, Download).

   Herkunft: bis zum 21.09.2026 stand dieser Block in pages/inst-modell.html
   und galt fuer sieben Reiter in einer Datei. Der Schnitt hat aus den Reitern
   Seiten gemacht (siehe .tmp/kritik/produkt-funnel/PLAN_SEITENSCHNITT.md), der
   Stil ist derselbe geblieben. Geaendert wurde nur, was der Schnitt erzwingt:
   die Reiter sind Links, und die Navigation traegt am Telefon die volle Breite.

   Glas kommt aus css/glas.css und wird VOR dieser Datei geladen. Hier stehen
   nur Groessen, nie eine zweite Glasdefinition.
   =========================================================================== */
@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/SchibstedGrotesk-var.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../fonts/PlayfairDisplay-500.woff2') format('woff2');font-weight:500;font-display:swap}

/* ---------------------------------------------------------------------------
   HELLE EBENE. Der Film auf der Startseite bleibt dunkel, ab dem Modell wird
   gespiegelt: heller Grund, dunkle Schrift. Zwei Marken tragen das,
   --grund und --ink, alles andere haengt daran. Wer das je zurueckdrehen will,
   tauscht die beiden und die Grafikfarben weiter unten, sonst nichts.
   Der Leuchtsaum --lift war ein Mittel gegen dunklen Grund. Auf hellem Grund
   traegt Schrift sich selbst, deshalb steht er hier auf none und wird nicht
   ueberall einzeln entfernt.
   --------------------------------------------------------------------------- */
:root{
  --grund:#FFFFFF; --ink:#0A0A0A; --white:#FFFFFF; --pap:10,10,10;
  --font-head:'Schibsted Grotesk',sans-serif; --font-body:'Schibsted Grotesk',sans-serif;
  --lift:none;
  --linie:rgba(var(--pap),.13);
  /* Startwert. Die echte Hoehe misst das Skript und schreibt sie hier hinein,
     sobald die Seite steht. Ein fester Wert war falsch, sobald der Kopf umbrach. */
  --kopf:132px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--grund);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- Kopf: Marke, Ansichten, ein Weg nach vorn ---------------------- */
.kopf{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px)}
.nav-mark{width:44px;height:44px;flex-shrink:0}
.nav-wordmark-name{font-family:'Playfair Display',serif;font-size:27px;font-weight:500;letter-spacing:.02em;line-height:1;color:inherit}
/* Nur noch Groesse. Flaeche, Rand, Hover, Druck und Fokus stehen in
   css/glas.css unter .glas (Primaer) und .glas.sek (Sekundaer). */
.knopf{font-size:15px;padding:0 24px;min-height:var(--glas-handlung)}
/* Briefmodus: der Rundgang ist weg, die Nummer steht als Text daneben. Der
   Download bleibt auch hier (20.09.2026): wer aus dem Film kommt, soll ihn
   auf jedem Bild finden, nicht erst im Gespraech. */
.kopf-tel{display:none;font-family:var(--font-head);font-weight:700;font-size:15px;
  color:var(--ink);white-space:nowrap;letter-spacing:.01em}
html.brief .rg-start{display:none}
html.brief .kopf-tel{display:inline-block}
/* Seit dem Kopf wie die Startseite (08.10.2026) steht die Nummer in der Reiterzeile, rechts wie die Einfuehrung */
.reiterzeile .kopf-tel{margin-left:auto;padding:0 16px 0 22px}
html.brief .knopf[data-termin]:hover{background:#2E2E2E}

/* Die Navigation ist die einzige. Seit dem Schnitt sind es sieben Links auf
   sieben Adressen, vorher waren es sieben Reiter in einer Datei. Die aktive
   Seite traegt aria-current="page" und den Strich darunter. Die Einfuehrung
   steht am rechten Ende derselben Zeile. */
.reiterzeile{max-width:1320px;margin:0 auto;padding:0 30px;display:flex;
  align-items:center;gap:14px}
.reiter{flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;
  scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.rt{position:relative;display:inline-block;font-family:var(--font-head);font-weight:700;
  font-size:15.5px;
  padding:14px 16px 15px;color:rgba(10,10,10,0.5);white-space:nowrap;transition:color .18s}
.rt:hover{color:rgba(10,10,10,0.78)}
.rt:focus-visible{outline:2px solid rgba(10,10,10,.5);outline-offset:-4px;border-radius:8px}
.rt[aria-current="page"]{color:var(--ink)}
.rt[aria-current="page"]::after{content:"";position:absolute;left:16px;right:16px;bottom:0;
  height:2px;background:var(--ink)}


/* ---------- Buehne ---------------------------------------------------------- */
.buehne{max-width:1320px;margin:0 auto;padding:calc(var(--kopf) + 48px) 30px 120px}

.titel{font-family:var(--font-head);font-weight:800;font-size:clamp(28px,3vw,42px);
  line-height:1.08;letter-spacing:-.02em;text-shadow:var(--lift)}
.unter{font-size:15.5px;line-height:1.62;color:rgba(10,10,10,0.62);max-width:66ch;margin-top:12px}
.kopfzeile{margin-bottom:34px}

/* ---------- Modellportfolio: die Tabelle der Landing, einen Tag alt ---------
   Seit 20.09.2026 dieselbe Tabelle wie auf der Landing (js/film.js): Ticker mit
   ISIN, Zielgewicht, Heute, Order, darueber Investiert, Cash und der Stempel.
   Das Warnschild ist ein Gefahrzeichen: rotes Dreieck, schwarzes Ausrufezeichen. */
.gestern{border-top:1px solid var(--linie);padding-top:26px}
.schild{display:flex;align-items:center;gap:22px;padding:16px 22px;border:2px solid #C8351A;
  border-radius:14px;background:rgba(200,53,26,.05);margin:0 0 30px}
.schild-d{width:66px;height:60px;flex:none}
.schild-t{display:flex;flex-direction:column;gap:3px;font-size:15px;line-height:1.5;
  color:rgba(10,10,10,.7)}
.schild-t b{font-family:var(--font-head);font-weight:800;font-size:20px;letter-spacing:-.01em;
  color:#C8351A}
.gkopf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:38px;
  padding-bottom:26px;border-bottom:1px solid var(--linie)}
.gz{display:flex;flex-direction:column;gap:6px}
.gz-v{font-family:var(--font-head);font-weight:800;font-size:clamp(30px,3.4vw,46px);
  line-height:1;letter-spacing:-.022em}
.gz-l{font-size:14px;color:rgba(10,10,10,.5)}
table.gtab{width:100%;border-collapse:collapse;margin-top:6px}
.gtab th{font-size:13.5px;color:rgba(10,10,10,.46);font-weight:400;text-align:right;
  padding:18px 22px 10px 0;white-space:nowrap}
.gtab th:first-child,.gtab th.nm,.gtab th.is{text-align:left}
.gtab td{padding:13px 22px 13px 0;border-top:1px solid rgba(var(--pap),.10);text-align:right;
  font-size:15px;color:rgba(10,10,10,.78);font-variant-numeric:tabular-nums;white-space:nowrap}
.gtab td:first-child{text-align:left;font-family:var(--font-head);font-weight:700;color:var(--ink)}
.gtab td.nm,.gtab td.is{text-align:left;color:rgba(10,10,10,.55)}
.gtab td.nm{white-space:normal}
.gtab th:last-child,.gtab td:last-child{padding-right:0}
.gtab .is2{display:none}
.gtab td.k{color:#1B7A3D}
.gtab td.v{color:#8A1C1C}
.gtab td.h{color:rgba(10,10,10,.45)}
.gtab .ob{margin-left:.35em}
.gtab td.leer{text-align:left;white-space:normal;color:rgba(10,10,10,.5);padding:40px 0}
.gweg{margin-top:30px}
@media (max-width:700px){
  .gtab .nm,.gtab .is{display:none}
  .gtab .is2{display:block;font-size:11px;color:rgba(10,10,10,.5);font-weight:500;
    letter-spacing:.04em;margin-top:2px}
  /* Am Telefon steht in der Spalte Order nur der Wert. Das Wort brach um und
     machte aus einer Zeile zwei (Befund 20). Das Vorzeichen sagt dasselbe. */
  .gtab .ow{display:none}
  .gtab .ob{margin:0;font-weight:600}
  .gtab td,.gtab th{padding-right:10px}
  .gkopf{gap:24px}
  .schild{gap:14px;padding:14px 16px}
  .schild-d{width:50px;height:46px}
  .schild-t b{font-size:18px}
}

/* ---------- Kennzahlen und Grafik ------------------------------------------- */
.kzn{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:34px 26px;
  padding:6px 0 40px;border-bottom:1px solid var(--linie);margin-bottom:34px}
.kz-v{font-family:var(--font-head);font-weight:800;font-size:clamp(30px,3.6vw,52px);line-height:1;
  letter-spacing:-.025em}
.kz-l{font-size:14.5px;color:rgba(10,10,10,.5);margin-top:10px}
/* Makro Index (27.09.2026): Stand mit Uhrzeit in kleinerer Schrift, unten buendig mit den
   grossen Zahlen; Punkt gruen bei aktuellem Stand, rot wenn die Kette steht. */
.kzn .kz-v.kz-datum{display:flex;align-items:flex-end;min-height:clamp(30px,3.6vw,52px);
  font-size:clamp(20px,2vw,28px);letter-spacing:-.015em}
.kz-punkt{display:inline-block;width:9px;height:9px;border-radius:50%;background:#1B7A3D;
  margin-right:8px;vertical-align:1px}
.kz-punkt.rot{background:#C8351A}
#instchart,#riskchart{width:100%;height:min(60vh,520px)}#rollchart{width:100%;height:min(44vh,380px)}
.absatz{margin-top:64px}
.abs-t{font-family:var(--font-head);font-weight:700;font-size:22px;letter-spacing:-.01em;margin:0 0 6px}
.abs-u{font-size:14.5px;line-height:1.6;color:rgba(10,10,10,.55);margin:0 0 20px;max-width:70ch}
.tafel{width:100%;border-collapse:collapse;font-size:15px}
.tafel th{font-size:13px;font-weight:500;color:rgba(10,10,10,.5);text-align:right;padding:0 0 10px;border-bottom:1px solid var(--linie)}
.tafel th:first-child,.tafel td:first-child{text-align:left}
.tafel td{padding:11px 0;border-bottom:1px solid var(--linie);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tafel td:first-child{color:rgba(10,10,10,.72)}
.tafel td.m{font-weight:600}
.tafel td.neg{color:#8A1C1C}
.tafel-wrap{overflow-x:auto}

.fuss-hin{font-size:11.5px;line-height:1.6;color:rgba(10,10,10,0.42);margin-top:18px;max-width:80ch}

/* ---------- Universenwahl (Sandbox) ------------------------------------------ */
/* Die Chips stehen in Inhaltsbreite und links buendig, wie die Pillen des
   Pickers und wie am Eingang. Das Raster hatte jede Kachel auf dieselbe Breite
   gezogen, damit standen kurze Namen in halbleeren Flaechen (21.09.2026).
   Eine Mindestbreite braucht es nicht: die Unterzeile jeder Kachel traegt den
   Satz "beste Wahl in n von 27 Fenstern" und haelt sie von selbst ueber 200 px
   (gemessen 216 bis 252 px). */
.uniwahl{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px;
  padding:2px 0 20px}
/* Die Flaeche steht in css/glas.css (.glas.sek.wahl.karte). Hier bleiben nur
   Layout, Polster und die Typografie der zwei Zeilen (21.09.2026). */
.uni{display:flex;flex-direction:column;gap:3px;padding:13px 15px;text-align:left;cursor:pointer}
.uni .un{font-family:var(--font-head);font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.uni .ug{font-size:12.5px;color:rgba(10,10,10,.5)}
.uni[aria-pressed="true"] .ug{color:rgba(247,245,241,.62)}
.uni.kasse .ug{color:rgba(10,10,10,.38)}
.uni.kasse[aria-pressed="true"] .ug{color:rgba(247,245,241,.5)}
.uni-zeile{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;
  padding:0 0 26px;border-bottom:1px solid var(--linie);margin-bottom:30px}
.uni-zeile .us{font-size:14.5px;color:rgba(10,10,10,.62);line-height:1.6;max-width:64ch}
.uni-zeile .us b{color:var(--ink);font-weight:600}
.uni-knopf{font-size:13.5px;padding:8px 14px}
/* Beide Knoepfe der Zeile gehoeren zusammen und stehen rechts (Befund 2.03). */
.uni-knoepfe{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Zeitleiste der Pruefpunkte: eine Zelle je Jahr, eine Zeile je gewaehltem
   Universum, darunter die Kombination. Breite Inhalte scrollen im eigenen
   Kasten, die Seite selbst nie. */
.zl-wrap{padding:0 0 22px}
.zl-satz{font-size:14.5px;line-height:1.6;color:rgba(10,10,10,.62);max-width:70ch;margin:0 0 12px}
.zl-satz b{color:var(--ink);font-weight:600}
/* Scrollhinweis am Telefon (Befund 16 der Stufe 0): der Schatten am Rand
   steht nur, solange dort noch etwas liegt. Reine CSS Loesung ueber
   background-attachment, kein Skript. */
.zl-scroll,.tafel-wrap{
  background-image:
    linear-gradient(to right,var(--grund),rgba(255,255,255,0)),
    linear-gradient(to left,var(--grund),rgba(255,255,255,0)),
    linear-gradient(to right,rgba(10,10,10,.16),rgba(10,10,10,0)),
    linear-gradient(to left,rgba(10,10,10,.16),rgba(10,10,10,0));
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:24px 100%,24px 100%,10px 100%,10px 100%;
  background-attachment:local,local,scroll,scroll}
.zl-scroll{overflow-x:auto}
.zl{border-collapse:separate;border-spacing:2px 4px}
.zl th{font-size:12px;font-weight:400;color:rgba(10,10,10,.5);text-align:left;
  white-space:nowrap;padding:0 12px 0 0}
.zl thead th{text-align:center;padding:0 0 2px;min-width:20px;
  font-variant-numeric:tabular-nums}
.zl td{width:20px;height:14px;border-radius:3px;background:rgba(10,10,10,.07);padding:0}
.zl td.an{background:var(--ink)}
.zl td.ohne{background:transparent;border:1px dashed rgba(10,10,10,.2)}
.zl tr.summe th{color:var(--ink);font-weight:600}
.zl tr.summe td{border-radius:999px;height:8px}
.moduswahl{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.mw{display:flex;flex-direction:column;gap:2px;padding:11px 18px;text-align:left;cursor:pointer}
.mw .mn{font-family:var(--font-head);font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.mw .mg{font-size:12px;color:rgba(10,10,10,.5)}
.mw[aria-pressed="true"] .mg{color:rgba(247,245,241,.62)}
.modus-hin{font-size:13.5px;line-height:1.65;color:rgba(10,10,10,.6);max-width:74ch;
  margin:0 0 20px}
.vglzeile{font-size:14.5px;line-height:1.65;color:rgba(10,10,10,.62);max-width:70ch;
  margin:0 0 26px}
.vglzeile b{color:var(--ink);font-weight:600}
.vglzeile:empty{display:none}
.hebelwahl{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.hb{display:flex;flex-direction:column;gap:2px;padding:9px 15px;text-align:left;cursor:pointer}
.hb .hn{font-family:var(--font-head);font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.hb .hg{font-size:12px;color:rgba(10,10,10,.5)}
.hb[aria-pressed="true"] .hg{color:rgba(247,245,241,.62)}
#sandchart{width:100%;height:min(60vh,520px)}

/* ---------- Text-Ansichten --------------------------------------------------- */
.blatt{max-width:70ch}
.blatt h3{font-family:var(--font-head);font-weight:700;font-size:19px;margin:38px 0 12px;
  text-shadow:var(--lift)}
.blatt h3:first-child{margin-top:0}
.blatt p{font-size:16px;line-height:1.72;color:rgba(10,10,10,0.7);margin-bottom:14px}
.blatt b{color:var(--ink);font-weight:600}
.werke{margin:30px 0 0;border-top:1px solid var(--linie)}
.werk{padding:20px 0;border-bottom:1px solid var(--linie);
  display:grid;grid-template-columns:minmax(140px,210px) 1fr;gap:18px}
.werk .wt{font-family:var(--font-head);font-weight:700;font-size:16.5px}
.werk .wb{font-size:15.5px;line-height:1.62;color:rgba(10,10,10,0.66)}
/* Eine Zeile, die Erklaerung auf Klick (20.09.2026 abends). Ein Gedanke je
   Zeile; wer mehr will, klickt. Loest die Unterueberschriften und die langen
   Absaetze im Produktweg ab. */
.mz{border-top:1px solid var(--linie)}
.mz>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding:15px 0;
  font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:-.01em}
.mz>summary::-webkit-details-marker{display:none}
.mz>summary::after{content:"+";font-weight:400;font-size:21px;line-height:1;
  color:rgba(10,10,10,.42);transition:transform .2s ease}
/* BEFUND 2.05: das gedrehte Plus sah wie ein X aus, also wie ein Schliesser
   der ganzen Seite. Offene Sektionen tragen deshalb ein Minuszeichen. */
.mz[open]>summary::after{content:"\2212"}
.mz>summary:focus-visible{outline:2px solid rgba(10,10,10,.5);outline-offset:3px;border-radius:8px}
.mz p{font-size:15px;line-height:1.7;color:rgba(10,10,10,.66);margin:0 0 18px;max-width:72ch}
.mz-liste{border-bottom:1px solid var(--linie)}
/* Dieselbe Mechanik unter einem Titel: die Zeile bleibt ein Untertitel. */
.mz.leise{border-top:0;margin-top:12px}
.mz.leise>summary{font-family:var(--font-body);font-weight:400;font-size:15.5px;
  line-height:1.62;color:rgba(10,10,10,.62);padding:0;
  justify-content:flex-start;gap:12px;max-width:66ch}
.mz.leise>summary::after{font-size:18px}
.mz.leise p{margin:12px 0 0;font-size:14.5px}
@media (max-width:700px){.mz>summary{font-size:16px;padding:14px 0}}
/* BEFUND 4.06 (21.09.2026): der Steckbrief in den leisen Ziehharmonikas der
   Methodik ist eine Liste aus fuenf Paaren. Er stand einspaltig: Begriff in
   einer Spalte von 168 px, Erklaerung daneben mit einem Zeilenmass von 64
   Zeichen. Auf 1440 endete die letzte Zeile bei x 845, die Flaeche des
   Abschnitts reicht bis 1350, die rechte Haelfte blieb leer. Ab 1200 px
   stehen die Paare deshalb zu zweit nebeneinander: vier Spalten, Begriff,
   Erklaerung, Begriff, Erklaerung. Die Lesefolge bleibt Paar fuer Paar, weil
   das Gitter zeilenweise fuellt. Kein Text wird dabei breiter gezogen, im
   Gegenteil: jede Erklaerung bekommt rund 420 px statt 567 und bleibt unter
   dem Zeilenmass von 64 Zeichen. Das Zeilenmass der Absaetze (72 Zeichen,
   .mz p) und die Breite der Blaetter bleiben unberuehrt.
   ACHTUNG, Fremdheimat: .mt-dl selbst steht in css/methodik.css und laedt
   nach dieser Datei. Diese Datei hatte in Stufe 5 die Hoheit, css/methodik.css
   nicht. Deshalb steht die Regel hier und traegt mit .mz.leise .mt-dl die
   hoehere Gewichtung, die sie zum Tragen braucht. Ihre saubere Heimat ist
   css/methodik.css, dorthin gehoert sie beim naechsten Zugriff auf jene
   Datei. Die Handyfassung dort (bis 640 px, einspaltig) bleibt gueltig,
   dieser Block greift erst ab 1200 px. */
@media (min-width:1200px){
  .mz.leise .mt-dl{grid-template-columns:168px minmax(0,1fr) 194px minmax(0,1fr);
    column-gap:20px}
  .mz.leise .mt-dl dt:nth-of-type(even){padding-left:26px}
}
.fuss-hin>p{margin:0}
.fuss-hin .mz.leise>summary,.fuss-hin .mz.leise p{font-size:11.5px;line-height:1.6}
.modus-hin .mz.leise>summary,.modus-hin .mz.leise p{font-size:13.5px;line-height:1.65}
.wege{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:34px}
.neben{font-size:14.5px;color:rgba(10,10,10,.58)}
.neben a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}

.fehler{padding:60px 0;font-size:16px;line-height:1.66;color:rgba(10,10,10,0.58);max-width:58ch}

.fuss{border-top:1px solid var(--linie);margin-top:40px}
.fuss-in{max-width:1320px;margin:0 auto;padding:26px 30px 40px;font-size:11.5px;line-height:1.66;
  color:rgba(var(--pap),.38)}
.fuss-in a{color:rgba(var(--pap),.55);text-decoration:underline;text-underline-offset:2px}

@media (max-width:900px){
  :root{--kopf:118px}
  .nav-mark{width:36px;height:36px}
  .nav-wordmark-name{font-size:22px}
  .werk{grid-template-columns:1fr;gap:5px}
  html.brief .kopf-tel{display:none}
}
/* Handy (20.09.2026): das Knopfpaar steht als Spalte rechts neben dem Logo,
   Gespraech ueber Download, wie die Kopfzeile der Landing. Kompakte Pillen,
   das Logo bleibt in seiner Groesse (Marke A2, Handy 44/27/11.5). Vorher
   war das Gespraech unter 900 px ausgeblendet. */
/* Seit dem Schnitt (21.09.2026, Befund 1.11): die Kopfknoepfe stehen am Telefon
   in EINER Reihe statt gestapelt, die Navigation bekommt die volle Breite mit
   sichtbarem Auslauf, und die Einfuehrung liegt nicht mehr auf den Reitern,
   sondern rechts ueber ihnen. Vorher waren zwei von sieben Reitern sichtbar,
   ohne jeden Hinweis auf die uebrigen fuenf. */
@media (max-width:700px){
  .nav-wordmark-sub{display:none}
  .reiterzeile{padding:0 0 0 20px;gap:0;flex-wrap:wrap;align-items:flex-end}
  .reiterzeile .rg-start{order:-1;margin:0 20px 0 auto;font-size:13px;padding:9px 0 9px 12px;border-left:0}
  .reiterzeile .rg-start::after{left:12px;right:0}
  .reiter{flex:1 1 100%;order:1;padding-right:20px}
  /* Der Auslauf am rechten Rand sagt, dass die Zeile weitergeht. Dieselbe
     Verlaufstechnik wie bei der Zeitleiste, rein ueber background-attachment,
     kein Skript. */
  .reiter{
    background-image:
      linear-gradient(to left,var(--grund),rgba(255,255,255,0)),
      linear-gradient(to left,rgba(10,10,10,.20),rgba(10,10,10,0));
    background-position:right center,right center;
    background-repeat:no-repeat;
    background-size:26px 100%,12px 100%;
    background-attachment:local,scroll}
}

/* ---------- Rundgang: der Kunde wird an die Hand genommen -------------------
   Ein Lichtkegel wandert ueber die Bedienelemente, immer genau eines. Das
   Dunkel kommt aus dem Schlagschatten des Lochs, geklickt wird durch das Loch
   hindurch: der Kunde kann das erklaerte Feld waehrend der Erklaerung wirklich
   bedienen. Vier unsichtbare Bahnen um das Loch fangen alles ab, was
   daneben liegt, damit niemand mitten im Rundgang verloren geht.
   Eigene Schriftgroessen entstehen hier nicht, es gelten die der Seite. */
/* Heller Schleier statt Abdunkeln (08.10.2026, Staffel Onboarding), wie das
   helle Kino der App Seiten; um das Loch ein dunkler Haarring statt des
   weissen Saums. js/schaufenster.js nutzt dieselbe Farbe fuer die ganze Bahn. */
#rg{position:fixed;inset:0;z-index:150;display:none;pointer-events:none;
  --rg-schleier:rgba(247,247,245,.8)}
#rg.an{display:block}
.rg-bahn{position:fixed;background:transparent;pointer-events:auto}
.rg-loch{position:fixed;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(10,10,10,.28), 0 0 0 9999px var(--rg-schleier)}
.rg-puls{position:fixed;border-radius:12px;pointer-events:none;border:1px solid transparent}
/* Der Takt (21.09.2026, Massstab 3.4). Steht die Seite, gleiten Loch und Karte
   zur naechsten Station. Rollt sie, sitzt das Loch hart auf dem Element und
   folgt ihm Bild fuer Bild: js/schaufenster.js setzt dafuer die Klasse hart. */
.rg-loch,.rg-puls{transition:left .34s cubic-bezier(.22,.61,.36,1),
  top .34s cubic-bezier(.22,.61,.36,1),width .34s cubic-bezier(.22,.61,.36,1),
  height .34s cubic-bezier(.22,.61,.36,1)}
#rg.hart .rg-loch,#rg.hart .rg-puls{transition:none}
.rg-puls.schlag{border-color:rgba(10,10,10,.42);animation:rg-puls 1s ease-out both}
@keyframes rg-puls{from{transform:scale(1);opacity:.85}to{transform:scale(1.035);opacity:0}}

/* Die Karte im Liquid Glass Design (20.09.2026, Florian). Die Flaeche selbst
   steht seit 20.09.2026 abends in css/glas.css und wird dort mit jedem Knopf
   geteilt. Hier bleiben nur Lage, Breite und der Auftritt. */
/* Die Flaeche der Karte steht in css/glas.css und traegt dort die eigene
   Regel .rg-karte (helle Flaeche, Unschaerfe, Kontur). Die Klasse glas
   gehoert NICHT an die Karte: sie ist die Knopfform und setzt inline-flex,
   nowrap und weisse Schrift. Dann standen Titel, Text und Knopfzeile
   nebeneinander, der Satz lief quer ueber den Schirm und der Titel war
   weiss auf hellem Glas. Siehe rgBauen() in js/schaufenster.js. */
.rg-karte{position:fixed;top:0;left:0;width:min(340px,calc(100vw - 32px));
  padding:9px;pointer-events:auto;
  opacity:0;transform:translateY(6px);
  transition:opacity .28s ease,transform .28s ease,
    left .34s cubic-bezier(.22,.61,.36,1),top .34s cubic-bezier(.22,.61,.36,1)}
#rg.hart .rg-karte{transition:opacity .28s ease,transform .28s ease}
.rg-karte.da{opacity:1;transform:none}
/* Look der Startseite (08.10.2026, Staffel Onboarding): die Karte ist der
   Glasrahmen der Filmkarte (landing/thema.css .lp-film), 9 px Glas mit Ecke
   26 px, darin ein weisses Blatt mit Ecke 17 px. Ohne Unschaerfe und ohne den
   weiten Kartenwurf aus css/glas.css, nur der Wurf der Knoepfe. Die Id haelt
   die Regel unabhaengig von der Ladefolge der Blaetter. Eine Anzeige fuer den
   Fortschritt genuegt: "Schritt n von N" ueber dem Titel, die Punkte bleiben
   nur im DOM (Pruefwerkzeug .tmp/einfuehrung/kette_live.js zaehlt sie). */
#rg .rg-karte{border-radius:26px;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf)}
.rg-blatt{position:relative;background:#fff;border-radius:17px;padding:15px 17px 14px}
.rg-n,.uv-tour .uv-tour-n{font-size:12px;font-weight:600;letter-spacing:.01em;line-height:1.3;
  color:rgba(10,10,10,.46);margin-bottom:5px;font-variant-numeric:tabular-nums}
.rg-n:empty,.uv-tour .uv-tour-n[hidden]{display:none}
#rg .rg-punkte,.uv-tour .uv-tour-punkte{display:none}
/* Schlussbild auf der Downloadseite: Ueberschrift, Erstes Gespraech und
   Download als Glasknoepfe, darunter ein leises Schliessen ohne Kreuz. */
.rg-karte.schluss .rg-fuss,.rg-karte.schluss .rg-x{display:none}
.rg-karte.schluss .rg-t{font-size:17px;padding-right:0}
.rg-schluss{margin-top:14px}
.rg-schluss[hidden]{display:none}
.rg-schluss-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.rg-schluss .glas{font-size:13.5px;padding:8px 18px}
.rg-leise{display:block;margin:12px 0 0;padding:0;border:0;background:none;font:inherit;
  font-size:12.5px;color:rgba(10,10,10,.46);cursor:pointer}
.rg-leise:hover{color:var(--ink)}
/* Die Szenenkarten der Methodik (js/methodik_3d/s3_tour.js) im selben Look.
   Ihre Grundregeln stehen in css/methodik_3d.css, das nach dieser Datei
   laedt, deshalb die hoehere Spezifitaet ueber .uv-tour. Schleier und Loch
   der Szene bleiben dunkel: die Szene selbst ist der Nachthimmel. */
.uv-tour .uv-tour-karte{padding:9px;border-radius:26px;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf)}
.uv-tour .uv-tour-blatt{position:relative;background:#fff;border-radius:17px;padding:15px 17px 14px}
.uv-tour .uv-tour-fuss{justify-content:flex-end}
@media (max-width:760px){
  .uv-tour .uv-tour-karte{padding:7px;border-radius:22px}
  .uv-tour .uv-tour-blatt{border-radius:15px;padding:11px 13px 10px}
}
/* Drei Zeilen je Station: Fachbegriff, was es ist, warum es hier steht. */
.rg-t{font-family:var(--font-head);font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.rg-b{font-size:13.5px;line-height:1.6;color:rgba(10,10,10,.62);margin-top:6px}
.rg-b:empty{display:none}
.rg-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px 14px;
  margin-top:16px;flex-wrap:wrap}
.rg-punkte{display:flex;align-items:center;gap:5px}
.rg-p{width:6px;height:6px;border-radius:999px;background:rgba(10,10,10,.16);
  transition:width .26s ease,background .26s ease}
.rg-p.ab{background:rgba(10,10,10,.34)}
.rg-p.an{width:18px;background:var(--ink)}
.rg-knoepfe{display:flex;align-items:center;gap:12px}
/* Beide auf Glas, Groesse bleibt hier (css/glas.css traegt die Flaeche). */
.rg-aus{font-size:13px;padding:7px 15px}
.rg-weiter{font-size:13.5px;padding:8px 18px}
/* Das Schliesskreuz an der Rundgangskarte (01.09.2026). "Ueberspringen" steht
   im Fuss und wird bei den Fragekarten zu "Spaeter". Wer mitten im Rundgang
   einfach raus will, braucht einen Weg, der immer gleich aussieht. */
.rg-x{position:absolute;top:8px;right:9px;width:26px;height:26px;line-height:1;
  font-size:19px;border-radius:999px;color:rgba(10,10,10,.38);
  display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s}
.rg-x:hover{background:rgba(10,10,10,.06);color:var(--ink)}
.rg-t{padding-right:26px}

/* Der Weg zurueck in die Einfuehrung, am rechten Ende der Reiterzeile. */
/* Einfuehrung als siebter Reiter (26.09.2026, Nutzerwahl): Reiterschrift, Haarlinie davor, Abspielzeichen, Strich beim Zeigen */
.rg-start{position:relative;display:inline-flex;align-items:center;gap:8px;flex:none;margin:0 0 0 auto;padding:14px 16px 15px 22px;
  border:0;border-left:1px solid rgba(10,10,10,.14);border-radius:0;background:none;font:inherit;font-family:var(--font-head);
  font-weight:700;font-size:15.5px;color:rgba(10,10,10,.62);white-space:nowrap;cursor:pointer;transition:color .18s}
.rg-start:hover{color:var(--ink)}
.rg-start::after{content:"";position:absolute;left:22px;right:16px;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.rg-start:hover::after,.rg-start:focus-visible::after{transform:scaleX(1)}
.rg-start:focus-visible{outline:2px solid rgba(10,10,10,.5);outline-offset:-4px;border-radius:8px}
.rg-ico{width:16px;height:16px;flex:none}
@media (max-width:900px){
  /* Auf dem Telefon steht die Karte unten fest, sonst schiebt sie sich vor
     genau das Feld, das sie erklaert. Kleiner als am Schreibtisch (20.09.2026).
     Passt das Ziel nicht ueber die Karte, wandert sie unter die Kopfleiste und
     das Ziel bekommt den ganzen Rest: rgStreifen() setzt dann die Klasse kob
     (21.09.2026, Massstab 3.2). */
  .rg-karte{left:14px !important;top:auto !important;bottom:14px !important;
    width:calc(100vw - 28px);padding:7px}
  #rg .rg-karte{border-radius:22px}
  .rg-blatt{border-radius:15px;padding:11px 13px 10px}
  #rg.kob .rg-karte{top:calc(var(--kopf, 132px) + 10px) !important;bottom:auto !important}
  .rg-t{font-size:14.5px}
  .rg-b{font-size:13px;margin-top:4px}
  .rg-fuss{margin-top:12px}
  .rg-weiter{padding:7px 16px;font-size:13px}
}
/* BEFUND 3.01 (21.09.2026): am Telefon lief die Knopfzeile aus Karte und
   Schirm, sobald der Weiterknopf das Ziel der naechsten Seite nannte.
   "Weiter zur Wertentwicklung" endete bei x 433 auf einem Schirm von 390,
   der Knopf Schliessen war angeschnitten. Auf schmalen Schirmen ist der Fuss
   deshalb eigen gesetzt (Massstab 3.2): der Weiterknopf steht allein ueber
   die ganze Breite, darunter die Punkte links und Zurueck und Schliessen
   rechts. display:contents loest die Knopfgruppe auf, damit alle drei
   Knoepfe im selben Fluss wie die Punkte liegen und eine einzige zweite
   Zeile genuegt. Kein Knopftext wird gekuerzt, die Stationstexte bleiben.
   Die Grenze liegt bei 560 px, dem Bruchpunkt, den diese Datei schon fuer
   das Einfuehrungsblatt kennt. Darueber traegt die Karte die drei Knoepfe
   nebeneinander (gemessen: laengste Zeile 405 px, Karteninhalt ab 561 px
   Schirmbreite 505 px), und ein Knopf ueber die halbe Schirmbreite waere
   unruhig. */
@media (max-width:560px){
  .rg-fuss{gap:10px;justify-content:flex-end}
  .rg-knoepfe{display:contents}
  .rg-weiter{order:0;flex:1 1 100%;justify-content:center;text-align:center}
  .rg-punkte{order:1;margin-right:auto}
  .rg-aus{order:2;font-size:12.5px;padding:7px 14px}
}
/* BEFUND 4.01 (21.09.2026): am Schreibtisch lief derselbe Fuss aus der Karte,
   den Befund 3.01 am Telefon geheilt hat. Die Karte ist hier fest 340 px breit,
   ihr Inhalt 304 px (Innenkante 404 bei Karte 82 bis 422). Auf der letzten
   Station der sechs Seiten nennt der Weiterknopf das Ziel, "Weiter zur
   Wertentwicklung" ist allein 220 px breit, dahinter stehen Zurueck (76 px)
   und Schliessen (94 px). Die Gruppe .rg-knoepfe war ein einziges Kaestchen
   und bricht als solches nicht: sie lief bis x 516, also bis zu 112 px neben
   der Glasflaeche im Freien.
   Derselbe Weg wie am Telefon, nur an die Breite des Karteninhalts gebunden
   statt an die des Schirms: display:contents loest die Gruppe auf, alle drei
   Knoepfe liegen im selben Fluss wie die Punkte, und der Fuss bricht von
   selbst in eine zweite Zeile, sobald die Knopfzeile breiter ist als der
   Inhalt. Dann steht der Weiterknopf oben rechts neben den Punkten, Zurueck
   und Schliessen darunter, buendig an der Innenkante. Passt alles in eine
   Zeile, bleibt es bei einer, nichts wird erzwungen. Die Punkte halten ihren
   Platz links ueber margin-right:auto, deshalb steht hier flex-end statt
   space-between: sonst zoege space-between die drei Knoepfe auseinander.
   Die Karte wird NICHT breiter, die Lochgeometrie aus Stufe 3 bleibt.
   white-space und max-width am Weiterknopf sind nur die Reissleine, falls ein
   Stationstext spaeter laenger wird als der Karteninhalt: dann bricht die
   Beschriftung im Knopf, statt neben dem Glas zu stehen. */
@media (min-width:561px){
  .rg-fuss{justify-content:flex-end;gap:12px}
  .rg-knoepfe{display:contents}
  .rg-punkte{margin-right:auto}
  .rg-weiter{max-width:100%;white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .rg-karte,.rg-loch,.rg-puls{transition:none}
  .rg-puls.schlag{animation:none}
}

/* ---------- Bibliothek in der Methodik ------------------------------------
   Nur die Balken sind neu. Trichter und Ablauf laufen ueber die Kacheln und
   das Werk-Gitter, die es auf dieser Seite schon gibt. */
.b-leg{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12.5px;
  color:rgba(10,10,10,.5);margin:0 0 10px}
.b-leg i{display:inline-block;width:16px;height:8px;border-radius:999px;
  vertical-align:middle;margin-right:7px}
.b-leg .k1{background:rgba(10,10,10,.22)} .b-leg .k2{background:var(--ink)}
.b-z{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:10px;margin-bottom:3px}
.b-j{font-size:12px;color:rgba(10,10,10,.5);font-variant-numeric:tabular-nums}
.b-bar{position:relative;height:8px;background:rgba(10,10,10,.05);border-radius:999px}
.b-bar i{position:absolute;top:0;bottom:0;border-radius:999px}
.b-lern{background:rgba(10,10,10,.22)} .b-test{background:var(--ink)}
.b-reg{font-size:14.5px;line-height:1.6;color:rgba(10,10,10,.62);max-width:70ch;margin:16px 0 0}
.b-reg b{color:var(--ink);font-weight:600}

/* ---------- Eingangsbild: zwei Angaben, dann steht die Ansicht -------------
   Verfahren zuerst, danach die Universen. Beides sind Einstellungen und keine
   Werbung, deshalb sieht das Bild aus wie ein Formular und nicht wie ein
   Prospekt. Solange es keinen Zugang gibt, wird bei jeder neuen Sitzung
   wieder gefragt. */
#start{position:fixed;inset:0;z-index:170;background:var(--grund);display:none;
  overflow-y:auto;opacity:0;transition:opacity .35s ease}
#start.an{display:block}
#start.da{opacity:1}
.st-in{max-width:820px;margin:0 auto;padding:min(12vh,110px) 30px 60px}
.st-marke{display:flex;align-items:center;gap:15px;color:var(--ink);margin:0 0 34px}
/* Groessen kommen aus dem Lockup der Marke, damit alle drei Kopfzeilen
   gleich aussehen (Befund 13). */
.st-marke .nav-mark{flex-shrink:0}
.st-schild{font-size:12px;
  color:rgba(10,10,10,.42)}
.st-t{font-family:var(--font-head);font-weight:800;font-size:clamp(26px,3.2vw,38px);
  line-height:1.1;letter-spacing:-.02em;margin-top:10px}
.st-b{font-size:14.5px;line-height:1.62;color:rgba(10,10,10,.6);max-width:60ch;margin-top:10px}
.st-feld{margin:30px 0 0}
/* Neun Pillen wie die Wege am Eingang: Inhaltsbreite, links buendig, Umbruch
   am Telefon von selbst. Flaeche und Wahlzustand kommen aus css/glas.css
   (.glas.sek.wahl), hier steht nur das Polster des Eingangs (21.09.2026). */
.st-karten{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px}
.st-k{padding:17px 28px}
.st-k .kn{font-family:var(--font-head);font-weight:700;font-size:16.5px;letter-spacing:-.01em}
/* Die Karte im Verfahrensschritt traegt nur ein Wort. Alles, was sie bedeutet,
   steht im Erklaerfeld darunter und kommt erst auf Klick (08.09.2026, Florian).
   Zwei Zeilen Kleingedrucktes auf einem Knopf liest niemand. */
.st-erkl{margin-top:14px;min-height:76px}
.st-erkl .ez{font-size:14.5px;line-height:1.62;color:rgba(10,10,10,.68);max-width:62ch;
  opacity:0;transform:translateY(7px);animation:st-ein .34s cubic-bezier(.22,.8,.25,1) forwards}
@keyframes st-ein{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .st-erkl .ez{animation:none;opacity:1;transform:none}}
.st-k .kg{font-size:13.5px;line-height:1.55;color:rgba(10,10,10,.55)}
.st-k[aria-pressed="true"] .kg{color:rgba(247,245,241,.62)}
.st-fuss{display:flex;align-items:center;justify-content:flex-start;gap:18px;
  margin-top:30px;padding-top:22px;border-top:1px solid var(--linie);flex-wrap:wrap}
/* Der Weg zum Gespraech steht auch im Eingangsbild, nicht erst hinter der
   Ansicht: wer hier schon eine Frage hat, soll sie stellen koennen. */
/* BEFUND 2.03: die Frage hatte keinen Schliesser. Leises X, oben rechts,
   gleiche Flaeche wie im Buchungsdialog. */
.st-x{position:fixed;top:16px;right:20px;width:34px;height:34px;line-height:1;
  border:0;border-radius:999px;background:none;color:rgba(10,10,10,.45);cursor:pointer;
  font:inherit;font-size:24px;display:flex;align-items:center;justify-content:center;z-index:2}
.st-x:hover{background:rgba(10,10,10,.06);color:var(--ink)}
.st-knoepfe{position:absolute;top:min(12vh,110px);right:0;display:flex;gap:10px}
.st-ob{font-size:14px;padding:11px 22px}
/* Der Weiterknopf traegt erst, wenn eine Wahl getroffen ist. Den tauben
   Zustand setzt .glas.taub in css/glas.css, die eigene Regel hier war
   wortgleich und ist am 21.09.2026 entfallen. */
.st-in{position:relative}
@media (max-width:700px){
  .st-knoepfe{position:static;margin:0 0 22px}}
@media (max-width:700px){ .st-in{padding-top:56px} }

/* Das Intro. Der Auftakt jedes Besuchs, bewusst OHNE Gedaechtnis: wer die
   Seite neu laedt, kommt wieder durch dieselbe Tuer (01.09.2026, Florian).
   Ruhiger gebaut als die erste Fassung, die Scheibe dreht sich nicht mehr
   heraus, sie deckt sich auf. Drei Dinge, die nacheinander kommen und dann
   stehenbleiben: Zeichen, Haarlinie, Wort. Mehr traegt so eine Tuer nicht. */
#intro{position:fixed;inset:0;z-index:200;background:var(--grund);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;transition:opacity .9s ease}
#intro.aus{opacity:0;pointer-events:none}
#intro svg{width:min(22vw,108px);height:auto;opacity:0;
  animation:intro-auf 1.5s cubic-bezier(.22,.8,.25,1) both,
            intro-dreh 16s linear 1.5s infinite}
@keyframes intro-auf{from{opacity:0;transform:scale(.94) rotate(-14deg)}
  to{opacity:1;transform:none}}
@keyframes intro-dreh{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes intro-text{to{opacity:1;transform:none}}
/* Der Gruss ist eine Geste, kein Text: er kommt, steht kurz und fliesst ab,
   dann ruecken die Wege an seine Stelle. Ganz unter drei Sekunden. */
#intro .iw{font-family:var(--font-head);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(24px,3.2vw,34px);color:var(--ink);margin-top:36px;overflow:hidden;
  max-height:60px;opacity:0;transform:translateY(9px);
  animation:intro-gruss 1.9s cubic-bezier(.22,.8,.25,1) .9s forwards}
@keyframes intro-gruss{
  0%{opacity:0;transform:translateY(9px)}
  28%{opacity:1;transform:none;max-height:60px;margin-top:36px}
  68%{opacity:1;transform:none;max-height:60px;margin-top:36px}
  100%{opacity:0;transform:translateY(-8px);max-height:0;margin-top:0}}
/* Die zwei Wege unter dem Zeichen. Der Erklaersatz hat seinen Platz reserviert,
   damit beim Ueberfahren nichts springt. */
#intro .ig{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:44px;
  opacity:0;transform:translateY(9px);animation:intro-text .9s ease 2.75s forwards}
#intro .iwege{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* Die beiden Wege sind gleichwertig, also beide sekundaer. Die Flaeche
   kommt aus css/glas.css, hier steht nur die Groesse. */
#intro .iweg{font-size:16.5px;padding:17px 28px}
#intro .if{font-family:var(--font-head);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(22px,2.9vw,30px);color:var(--ink);margin:0 0 26px;text-align:center}
/* Der Weg ins Gespraech ist kein Hinweis am Rand, er ist ein Angebot und steht
   auf jedem Bild an derselben Stelle (17.09.2026, Florian). Gefuellt, nicht
   umrandet: er soll gesehen werden, ohne die Frage in der Mitte zu ueberholen. */
/* Das Knopfpaar (20.09.2026, Florian): Erstes Gespraech und Download stehen
   oben rechts, auf jedem Bild des Schaufensters an derselben Stelle. Gespraech
   umrandet, Download gefuellt, wie im Kopf der Ansicht. */
#intro .i-knoepfe{position:fixed;top:min(7vh,52px);right:min(6vw,44px);z-index:2;
  display:flex;gap:10px;opacity:0;animation:intro-text .9s ease 2.75s forwards}
/* Dieselbe Kopfzeile wie auf den Ansichten und auf der Universenfrage
   (20.09.2026 abends, Befund 13): Zeichen, Name, Etikett, oben links. */
#intro .i-marke{position:fixed;top:min(7vh,52px);left:min(6vw,44px);z-index:2;
  display:flex;align-items:center;gap:15px;color:var(--ink);
  opacity:0;animation:intro-text .9s ease 2.75s forwards}
#intro .i-marke .nav-mark{flex-shrink:0}
@media (max-width:900px){
  #intro .i-marke{top:14px;left:20px;gap:12px}
  #intro .i-knoepfe{top:14px;right:20px;flex-direction:column;align-items:stretch;gap:6px}
  #intro .i-ob{font-size:13px;padding:8px 14px;text-align:center}}
#intro .i-ob{font-size:14px;padding:11px 22px}
#intro .ierkl{font-size:14px;line-height:1.62;color:rgba(10,10,10,.62);max-width:50ch;
  text-align:center;min-height:70px;margin:22px 0 0;opacity:0;transform:translateY(5px);
  transition:opacity .22s ease,transform .22s ease}
#intro .ierkl.an{opacity:1;transform:none}
#intro .izg{font-size:12.5px;color:rgba(10,10,10,.42);margin:6px 0 0}
/* Wer Bewegung reduziert hat, sieht dasselbe Bild, nur ohne Weg dorthin. */
@media (prefers-reduced-motion:reduce){
  #intro svg,#intro .ig{animation:none;opacity:1;transform:none}
  #intro .iw{display:none}}
.nav-mark{width:48px;height:48px}
.nav-wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1;white-space:nowrap}
.nav-wordmark-name{font-size:29px}
.nav-wordmark-sub{font-family:'Schibsted Grotesk',sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.03em;line-height:1;white-space:nowrap;color:inherit;opacity:.74}
@media (max-width:900px){.nav-mark{width:44px;height:44px}.nav-wordmark-name{font-size:27px}.nav-wordmark-sub{font-size:11.5px}}

/* ---------- Was der Schnitt neu braucht -----------------------------------
   Vier kleine Bloecke, mehr nicht: der Produktname im Kopf (die Ankunft aus
   dem Film zeigt Zeichen, Marke und Produkt), die Definition unter dem Titel,
   die Akkordeonzeile, die frueher eine zweite Ueberschrift war (Befund 1.04),
   und der Eingang /modell/, der seit dem Schnitt nur noch Gruss und Frage
   traegt.
   ------------------------------------------------------------------------- */
/* Die Definition steht direkt unter dem Titel, zwei Saetze, nie mehr. */
.def{font-size:16px;line-height:1.66;color:rgba(10,10,10,.68);max-width:68ch;margin-top:14px}
.def b{color:var(--ink);font-weight:600}

/* BEFUND 2.06: rechts neben Definition und Warnkasten lag auf 1440 eine leere
   Flaeche ueber die halbe Breite. Der Kopf traegt jetzt zwei Spalten: links
   Titel und Definition, rechts die Tatsache zur Seite (Stand, Einordnung).
   Unter 1000 px steht wieder alles untereinander. */
.kopfraster{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:24px 52px;align-items:end}
.kopfneben{min-width:0}
.kopfneben .schild{margin:0}
.kopfneben .unter{margin-top:0;max-width:none}
.kopfneben .unter b{color:var(--ink);font-weight:600}
@media (max-width:1000px){
  .kopfraster{grid-template-columns:1fr;gap:20px;align-items:start}
}

/* Jede Grafik traegt ihren Fachnamen als Zeile, nicht als Ueberschrift, und
   zwar im HTML: wer die Seite ohne Javascript liest, findet den Begriff. */
.ch-name{font-size:14.5px;line-height:1.6;color:rgba(10,10,10,.55);
  max-width:74ch;margin:30px 0 6px}
.ch-name b{color:var(--ink);font-weight:600}

/* Je Seite genau ein Titel. Was frueher eine zweite Ueberschrift war, ist
   jetzt eine Zeile im Akkordeon und steht offen, damit Tabelle und Grafik
   sichtbar bleiben (Befund 1.04). */
.mz>summary{list-style:none}
.mz .tafel-wrap,.mz>div,.mz .kzn{margin:0 0 20px}
.mz .tafel-wrap:last-child,.mz>div:last-child{margin-bottom:6px}
.abschnitt{margin-top:56px}

/* Eingang /modell/. Der Auftakt aus Commit 9803117, wiederhergestellt am
   21.09.2026: das Signet deckt sich auf und dreht danach weiter, der Gruss
   kommt, steht kurz und fliesst ab, Frage und Wege ruecken an seine Stelle.
   Der Gruss steht im Quelltext hinter der Frage, die Reihenfolge im Bild
   macht flex order. Die Buehne traegt genau einen Bildschirm: Kopf, Eingang
   und Fuss teilen sich 100vh, darunter kommt nichts mehr (Befund 04). */
body[data-seite="eingang"]{min-height:100vh;display:flex;flex-direction:column}
body[data-seite="eingang"] .ein{flex:1 0 auto}
body[data-seite="eingang"] .fuss{flex:0 0 auto;margin-top:0}
.ein{display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:calc(var(--kopf) + 8px) 24px 40px;text-align:center}
.ein-mark{order:1;width:clamp(76px,11vw,114px);height:auto;display:block;color:var(--ink);
  opacity:0;transform-origin:50% 50%;
  animation:ein-auf 1.5s cubic-bezier(.22,.8,.25,1) both,
            ein-dreh 16s linear 1.5s infinite}
@keyframes ein-auf{from{opacity:0;transform:scale(.94) rotate(-14deg)}
  to{opacity:1;transform:none}}
@keyframes ein-dreh{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes ein-her{to{opacity:1;transform:none}}
/* Bild 1 der Tuer (26.09.2026, Tutorial Video). Eine Bewegung nach der
   anderen: das Signet deckt sich bis 1,5 s auf und dreht danach weiter. Erst
   wenn es steht, kommt der Gruss. Er bleibt jetzt stehen, darunter folgen
   Einordnung, Videofenster und zwei Wege: Einfuehrung ansehen oder Selbst
   erkunden. Selbst erkunden laesst Bild 1 abfliessen und gibt den Platz an
   Frage und Wege (Bild 2), also den Weg von vorher. js/tuer_video.js. */
.ein-tuer{order:2;display:flex;flex-direction:column;align-items:center;
  width:100%;margin-top:30px}
.ein-gruss{font-family:var(--font-head);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(22px,2.8vw,30px);line-height:1.2;color:var(--ink);
  opacity:0;transform:translateY(9px);
  animation:ein-her .6s cubic-bezier(.22,.8,.25,1) 1.5s forwards}
.tuer-satz,.tuer-film,.tuer-wege{opacity:0;transform:translateY(9px);
  animation:ein-her .6s cubic-bezier(.22,.8,.25,1) 1.85s forwards}
.tuer-satz{max-width:64ch;margin:14px auto 0;font-size:16px;line-height:1.55;
  color:rgba(10,10,10,.62);text-wrap:balance}
/* Das Videofenster. 16:9, so gross wie der Bildschirm es neben Gruss und
   Wegen zulaesst, hoechstens 720 px. Ohne Klick laedt nur der Kopf der Datei
   (preload metadata), das Bild davor ist das Standbild. */
.tuer-film{position:relative;width:min(100%,720px,max(440px,calc((100vh - 530px) * 1.7778)));
  aspect-ratio:16/9;margin-top:26px;border-radius:var(--glas-ecke-kachel);overflow:hidden;
  background:#fff;border:1px solid rgba(10,10,10,.1);
  box-shadow:var(--glas-kontur),var(--glas-wurf)}
/* Darin der eine Player der Website (js/player.js, css/player.css, seit
   05.10.2026 abends): Standbild, roter Play Knopf, Leiste, Kino und Max. */
.tuer-film .spieler{height:100%}
.tuer-wege{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.tuer-weg{font-size:16px;padding:15px 26px;animation:ein-ohne-wurf 2.45s step-end}
.tuer-weg .rg-ico{width:18px;height:18px}
.tuer-dauer{font-weight:500;opacity:.62}
/* Bild 1 fliesst ab, Bild 2 rueckt nach. */
.ein-tuer.geht{animation:tuer-fort .45s ease forwards}
@keyframes tuer-fort{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
.ein.erkunden .ein-tuer{display:none}
.ein:not(.erkunden) .ein-in{display:none}
.ein-in{order:3;display:flex;flex-direction:column;align-items:center;
  width:100%;margin-top:40px;opacity:0;transform:translateY(9px)}
.ein.erkunden .ein-in{animation:ein-her .55s ease forwards}
.ein.erkunden .ein-weg{animation:ein-ohne-wurf .55s step-end}
.ein-frage{font-family:var(--font-head);font-weight:800;letter-spacing:-.022em;
  font-size:clamp(26px,3.4vw,38px);color:var(--ink);margin:0 0 28px}
.ein-wege{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* Bis der Fade durch ist, tragen die Wege keinen Wurfschatten: bei niedriger
   Deckkraft stand er als grauer Fleck unter dem blassen Wort (Befund 07). Die
   Animation haelt nichts fest, danach gilt wieder die Flaeche aus css/glas.css
   mit demselben Hover und demselben Druckzustand. */
.ein-weg{font-size:16.5px;padding:17px 28px;animation:ein-ohne-wurf 3.95s step-end}
@keyframes ein-ohne-wurf{from{box-shadow:none}to{box-shadow:none}}

/* Das Erklaerfenster. Reservierter Platz, das Fenster liegt darin absolut:
   die Knoepfe stehen vor und nach der Beruehrung an derselben Stelle. Die
   Flaeche kommt aus den Werten von css/glas.css, es gibt keine zweite
   Glasdefinition. Kein Hover, kein Druckzustand: das ist kein Knopf. */
.ein-erkl{position:relative;width:min(100%,54ch);min-height:79px;margin:22px auto 0}
.ein-fenster{position:absolute;left:0;right:0;top:0;text-align:left;
  padding:16px 22px;border-radius:var(--glas-ecke-karte);
  background:var(--glas-hell);border:1px solid var(--glas-rand-hell);
  box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf-karte);
  -webkit-backdrop-filter:var(--glas-unschaerfe);backdrop-filter:var(--glas-unschaerfe);
  opacity:0;transform:translateY(-5px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease}
.ein-erkl.an .ein-fenster{opacity:1;transform:none;pointer-events:auto}
.ein-satz{font-size:14px;line-height:1.62;color:rgba(10,10,10,.62);margin:0}
.ein-satz b{color:var(--ink);font-weight:600}
.ein-satz[hidden]{display:none}
.ein-satz:not([hidden])+.ein-satz:not([hidden]){margin-top:10px}
/* Die Zeile, die am Telefon dasselbe Fenster oeffnet. Am Rechner uebernimmt
   das die Maus, dort steht sie nicht im Bild. */
.ein-frag{display:none;font:inherit;font-size:13.5px;color:rgba(10,10,10,.5);
  background:none;border:0;padding:10px 4px 0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(10,10,10,.28)}
.ein-frag:focus-visible{outline:2px solid rgba(10,10,10,.55);outline-offset:3px}

@media (max-width:700px){
  /* Der Kopf ist am Telefon nur rund 64 px hoch, --kopf rechnet mit der
     Reiterzeile der Ansichten. Der Eingang traegt keine, also steht hier das
     gemessene Mass: sonst klebt das Bild oben und unten klafft der Fuss. */
  .ein{padding:74px 16px 30px}
  .ein-in{margin-top:28px}
  /* Zwei Wege, eine Entscheidung: am Telefon stehen sie untereinander und
     gleich breit, das Mass gibt das laengere Wort vor (Welle 1, V1). Am
     Rechner bleiben sie nebeneinander. */
  .ein-wege{flex-direction:column;flex-wrap:nowrap}
  /* Der Platz fuer beide Saetze steht schon da, bevor getippt wird: das
     Fenster liegt darin und reicht nie in den Fuss. */
  .ein-erkl{min-height:136px;margin-top:14px}
  .ein-frag{display:inline-block}
  /* Bild 1 am Telefon: das Fenster nimmt die volle Breite zwischen den
     16 px Raendern, die Wege stehen untereinander und gleich breit. */
  .ein-tuer{margin-top:24px}
  .tuer-satz{font-size:15px;margin-top:12px}
  .tuer-film{width:100%;margin-top:22px}
  .tuer-wege{flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    width:100%;max-width:320px;margin-top:22px}
  /* Einfuehrung ansehen mit Dauer passt nicht in 320 px (05.10.2026): die
     Dauer steht als zweite Zeile darunter, nichts wird abgeschnitten. */
  .tuer-weg{flex-wrap:wrap;white-space:normal;row-gap:3px}
  .tuer-dauer{flex-basis:100%;text-align:center;font-size:.9em}
}

/* Wer Bewegung reduziert hat, sieht dieselben Bilder, nur ohne Weg dorthin. */
@media (prefers-reduced-motion:reduce){
  .ein-mark,.ein-in,.ein.erkunden .ein-in{animation:none;opacity:1;transform:none}
  .ein-weg,.ein.erkunden .ein-weg,.tuer-weg{animation:none}
  .ein-gruss,.tuer-satz,.tuer-film,.tuer-wege{animation:none;opacity:1;transform:none}
  .ein-tuer.geht{animation:none}
  .ein-fenster{transition:none}
}

/* Der Erklaersatz zwischen Definition und Bedienung braucht Luft nach unten,
   sonst klebt die erste Schaltflaeche an ihm. */
.buehne>.unter{margin-bottom:28px}
.gestern .unter{margin-bottom:8px}

/* Die Kopfzeile am Telefon, gemessen bei 390 px (Befund 1.11). Zeichen, Marke
   und das Knopfpaar teilen sich 350 px, und vorher hat das Paar das Wortzeichen
   ueberdeckt. Hier stehen die Groessen, die nebeneinander passen. Der Block
   steht am DATEIENDE, weil die 900er Regel weiter oben sonst gewinnt. */
@media (max-width:700px){
  .nav-mark{width:34px;height:34px}
  .nav-wordmark-name{font-size:20px}
  .reiterzeile{padding:0 0 0 16px}
  .reiter{padding-right:16px}
  .reiterzeile .rg-start{margin:0 16px 0 auto;font-size:12.5px;padding:9px 0 9px 10px}
  .rt{font-size:14.5px;padding:12px 13px 13px}
  .buehne{padding:calc(var(--kopf) + 30px) 16px 90px}
  .fuss-in{padding:22px 16px 32px}
}

/* ---------- Performance, 27.09.2026 ----------------------------------------
   Sprungleiste unter dem Titel (wie das Register des Glossars), gekoppeltes
   Unterwasserchart unter der Kurve, Investitionsquote, Tagesquerschnitt. Der
   Kopf steht fest, deshalb tragen die Sprungziele scroll-margin-top. */
.sprung{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 38px;padding:20px 0 24px;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.sprung a{font-size:13.5px;line-height:1.2;padding:7px 13px}
.zone,.abschnitt,.faq{scroll-margin-top:calc(var(--kopf) + 16px)}
#riskchart{height:min(30vh,250px)}
#quotechart{width:100%;height:min(40vh,340px)}
#tafel-quote{max-width:520px;margin-top:14px}
.qs-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px}
.qs-l{font-size:14.5px;color:rgba(10,10,10,.62)}
.qs-k{padding:0 14px;min-height:var(--glas-wahl);font-size:17px;line-height:1}
.qs-datum{font:inherit;font-size:14.5px;padding:7px 12px;border-radius:999px;width:172px;
  border:1px solid rgba(10,10,10,.18);background:rgba(255,255,255,.7);color:var(--ink)}
.qs-stand{font-size:13.5px;color:rgba(10,10,10,.5)}
#tafel-qs{max-width:640px}
@media (max-width:700px){.sprung{gap:8px;margin-bottom:28px}}
.tafel td.gut,.tafel td.gut.neg{color:#1B7A3D}
.tafel td.schwach,.tafel td.schwach.neg{color:#8A1C1C}
.kzn-unten{border-bottom:0;margin:26px 0 0;padding-bottom:10px}
.mz>summary{font-size:19px}
/* Geschlossene Sektionen stehen dicht, eine Zeile je Sektion. */
.zone .abschnitt{margin-top:0}
.mz>summary{padding:18px 0}
.faq{border-top:0}
/* 28.09.2026 (FAQ Welle): der Fragenblock ist keine zwoelfte Klappzeile
   mehr, er setzt sich als eingelassene Flaeche ab (css/faq.css). Nach der
   letzten Klappzeile 88 px Luft, am Handy 64, damit Sektion und Block nicht
   verwechselt werden. */
body[data-seite="performance"] #faq{margin-top:88px;padding-top:0;border-top:0}
@media (max-width:700px){body[data-seite="performance"] #faq{margin-top:64px}}

/* Tuer, Stand 28.09.2026. Kein Einordnungssatz mehr unter dem Gruss.
   Kinomodus: mit dem Start weichen Signet und Gruss, das Video waechst auf
   die Breite, die der Bildschirm ueber den Wegen hergibt. Die Wege bleiben
   darunter stehen, links Weiter (grau bis Halt oder Ende), rechts Selbst
   erkunden. js/tuer_video.js */
.ein.kino{padding-top:92px;padding-bottom:28px}
.ein.kino .ein-mark,.ein.kino .ein-gruss{display:none}
.ein.kino .ein-tuer{margin-top:0;animation:kino-her .6s cubic-bezier(.22,.8,.25,1) both}
.ein.kino .tuer-film{width:min(100%,1520px,calc((100svh - 212px) * 1.7778));margin-top:0}
.ein.kino .tuer-wege{margin-top:22px}
@keyframes kino-her{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.tuer-weg[disabled]{opacity:.3}
.tuer-weg.frei{animation:weiter-frei 1.6s ease-out 1}
@keyframes weiter-frei{
  0%{box-shadow:var(--glas-kante-tief),var(--glas-kontur-tief),var(--glas-wurf),0 0 0 0 rgba(10,10,10,.28)}
  70%{box-shadow:var(--glas-kante-tief),var(--glas-kontur-tief),var(--glas-wurf),0 0 0 14px rgba(10,10,10,0)}
  100%{box-shadow:var(--glas-kante-tief),var(--glas-kontur-tief),var(--glas-wurf)}}
/* Bild 3: die neun Universen per Klick, nur nach Individuell. Gewaehlt ist
   dunkles Glas, offen helles Glas, wie bei den Wegen. */
.ein-uni{order:3;display:none;flex-direction:column;align-items:center;width:100%;margin-top:40px;
  opacity:0;transform:translateY(9px)}
.ein.uni .ein-in{display:none}
.ein.uni .ein-uni{display:flex;animation:ein-her .55s ease forwards}
.uni-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;
  width:min(100%,820px)}
.uni-knopf{font-size:15.5px;padding:15px 18px;white-space:normal;line-height:1.25;text-align:center;
  justify-content:center;animation:ein-ohne-wurf .55s step-end}
.uni-weiter{margin-top:28px;font-size:16.5px;padding:17px 40px}
@media (max-width:700px){
  .ein.kino{padding-top:74px}
  .ein.kino .tuer-film{width:100%}
  .uni-wahl{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .uni-knopf{font-size:14.5px;padding:13px 12px}
  .ein-uni{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){
  .ein.kino .ein-tuer,.ein.uni .ein-uni,.tuer-weg.frei,.uni-knopf{animation:none;opacity:1;transform:none}
}

/* Auftakt der Tuer, Stand 28.09.2026 abends (Nutzer): der Gruss kommt, steht
   kurz und geht, das Signet steht allein und dreht sich ein Stueck weiter,
   dann weicht es und der Film kommt im Kinomodus von selbst. Bis dahin liegen
   Film und Wege nicht im Fluss, damit Signet und Gruss mittig stehen. Die
   Drehung laeuft ueber rotate und scale, transform gehoert weiter ein-dreh.
   Den Wechsel in den Kinomodus setzt js/tuer_video.js nach 5,05 s. */
.ein.auftakt .tuer-film,.ein.auftakt .tuer-wege{display:none}
.ein.auftakt .ein-tuer{margin-top:0}
.ein.auftakt .ein-gruss{margin-top:30px;max-height:80px;overflow:hidden;
  animation:gruss-kommt-geht 2.1s cubic-bezier(.22,.8,.25,1) 1.5s both}
@keyframes gruss-kommt-geht{
  0%{opacity:0;transform:translateY(9px) scale(.97)}
  24%{opacity:1;transform:none}
  74%{opacity:1;transform:none;max-height:80px;margin-top:30px}
  100%{opacity:0;transform:translateY(-8px);max-height:0;margin-top:0}}
.ein.auftakt .ein-mark{animation:ein-auf 1.5s cubic-bezier(.22,.8,.25,1) both,
  ein-dreh 16s linear 1.5s infinite,ein-weiter 1.2s cubic-bezier(.65,0,.35,1) 3.5s both,
  ein-weicht .35s ease 4.7s forwards}
@keyframes ein-weiter{from{rotate:0deg}to{rotate:180deg}}
@keyframes ein-weicht{from{opacity:1;scale:1}to{opacity:0;scale:.94}}
/* Im Kinomodus stehen Film und Wege sofort, ihr Einblenden von Bild 1 wuerde
   sonst beim ersten Zeigen noch einmal mit Verzug anlaufen. */
.ein.kino .tuer-film,.ein.kino .tuer-wege{animation:none;opacity:1;transform:none}
.ein.kino .tuer-weg{animation:ein-ohne-wurf .6s step-end}
@media (prefers-reduced-motion:reduce){
  .ein.auftakt .ein-mark,.ein.auftakt .ein-gruss{animation:none;opacity:1;transform:none}
}

/* Zwei Wege am Ende der Reiterzeile (28.09.2026, Nutzer): Einfuehrung ist der
   gefuehrte Rundgang ohne Video, Film (seit 08.10.2026, vorher Einfuehrungsvideo) spielt den Film der Tuer
   jederzeit im Kino des Players (js/player.js, seit 05.10.2026 abends). Das
   Abspielzeichen gehoert dem Film, der Rundgang traegt einen Kompass. */
.rg-start.rg-film{margin-left:0;border-left:0;padding-left:8px}
.rg-start.rg-film::after{left:8px}
@media (max-width:700px){
  .reiterzeile .rg-start.rg-film{margin-left:0}
  .reiterzeile .rg-start.rg-film::after{left:8px}
}