/* Nexview-Seite (Neubau 13.10.2026): Aufbau wie die Seiten von nexmail, nexpaper und nexdiary, Farben und Schrift wie
   die App (nexview/frontend/src/styles/index.css): Tinte, Nebel, Rot; Inter für alles, JetBrains Mono für
   Release-Namen und Pfade. Ab Werk dunkel wie die App, hell wählbar. Keine Farbe erfunden. */
:root{
  --creme:#F5F5F8; --papier:#FFFFFF; --sand:#B4B4C2; --linie:#DCDCE4; --flaeche:#ECECF2;
  --akzent:#C8152A; --akzent-h:#B91626; --akzent-tief:#B91626; --auf-akzent:#FFFFFF; --akzent-hauch:#FBE3E6;
  --tinte:#14141A; --tinte-2:#3C3C48; --leise:#61616F; --zweit:#0369A1; --zweit-hauch:#E0F0FA; --auf-zweit:#FFFFFF; --nacht:#0B0B0F;
  --gut:#15803D; --gut-hauch:rgba(21,128,61,.10); --schlecht:#E11D48; --schlecht-hauch:rgba(225,29,72,.08);
  --schatten:rgba(20,20,26,.28);
  --anzeige:'Inter',ui-sans-serif,system-ui,sans-serif;
  --buch:'Inter',ui-sans-serif,system-ui,sans-serif;
  --text:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --etikett:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,'SF Mono',Menlo,monospace;
  --breite:1180px; --kopf-h:67px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --creme:#0B0B0F; --papier:#16161D; --sand:#3A3A46; --linie:#26262F; --flaeche:#101016;
    --akzent:#E11D2F; --akzent-h:#FF3B4E; --akzent-tief:#FF6B7A; --auf-akzent:#FFFFFF; --akzent-hauch:rgba(225,29,47,.14);
    --tinte:#F2F2F5; --tinte-2:#C3C3CE; --leise:#9A9AA8; --zweit:#38BDF8; --zweit-hauch:rgba(56,189,248,.12); --auf-zweit:#06060A; --nacht:#06060A;
    --gut:#22C55E; --gut-hauch:rgba(34,197,94,.10); --schlecht:#FB7185; --schlecht-hauch:rgba(251,113,133,.09);
    --schatten:rgba(0,0,0,.75);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --creme:#0B0B0F; --papier:#16161D; --sand:#3A3A46; --linie:#26262F; --flaeche:#101016;
    --akzent:#E11D2F; --akzent-h:#FF3B4E; --akzent-tief:#FF6B7A; --auf-akzent:#FFFFFF; --akzent-hauch:rgba(225,29,47,.14);
    --tinte:#F2F2F5; --tinte-2:#C3C3CE; --leise:#9A9AA8; --zweit:#38BDF8; --zweit-hauch:rgba(56,189,248,.12); --auf-zweit:#06060A; --nacht:#06060A;
    --gut:#22C55E; --gut-hauch:rgba(34,197,94,.10); --schlecht:#FB7185; --schlecht-hauch:rgba(251,113,133,.09);
    --schatten:rgba(0,0,0,.75);
    color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--kopf-h) + 64px)}
body{margin:0; background:var(--creme); color:var(--tinte); font:17px/1.6 var(--text); -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:2px solid var(--akzent); outline-offset:3px; border-radius:6px}
code,kbd{font:500 .86em/1 var(--mono); background:var(--flaeche); border-radius:6px; padding:.18em .42em}
kbd{border-bottom:2px solid var(--linie)}
.sprung{position:absolute; left:12px; top:-60px; z-index:50; background:var(--akzent); color:var(--auf-akzent); padding:10px 14px; border-radius:10px; font-weight:600}
.sprung:focus{top:12px}
.innen{max-width:var(--breite); margin-inline:auto; padding-inline:24px}

/* Knöpfe */
.knopf{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border-radius:999px; border:0; font:600 15px/1 var(--text); text-decoration:none; cursor:pointer; background:var(--papier); color:var(--tinte); box-shadow:0 8px 20px -14px var(--schatten); transition:background .15s, transform .15s}
.knopf:active{transform:translateY(1px)}
.knopf--rund{width:42px; padding:0; font:800 12px/1 var(--etikett); letter-spacing:.04em}
.knopf--voll{background:var(--akzent); color:var(--auf-akzent)}
.knopf--voll:hover{background:var(--akzent-h)}
.knopf--rand{background:transparent; box-shadow:inset 0 0 0 1.5px var(--linie)}
.knopf svg{width:18px; height:18px}

/* Kopfleiste */
.kopf{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--creme) 86%, transparent); backdrop-filter:saturate(1.3) blur(10px); -webkit-backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid color-mix(in srgb, var(--linie) 70%, transparent)}
.kopf__innen{max-width:var(--breite); margin-inline:auto; padding:12px 24px; display:flex; align-items:center; gap:18px}
.marke{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:700 21px/1 var(--anzeige); letter-spacing:-.03em; color:var(--tinte)}
.marke svg{width:30px; height:30px}
.marke b{color:var(--akzent); font-weight:700}
.leiste{display:flex; align-items:center; gap:2px; margin-right:auto}
.leiste>a,.mehr>summary{display:block; white-space:nowrap; padding:9px 12px; border-radius:999px; text-decoration:none; font:500 15px/1 var(--text); color:var(--tinte-2); cursor:pointer}
.leiste>a:hover,.mehr>summary:hover{background:var(--papier); color:var(--tinte)}
.leiste a[aria-current="page"],.mehr.ist-aktiv>summary{color:var(--tinte); background:var(--papier); box-shadow:0 8px 20px -16px var(--schatten)}
.mehr{position:relative}
.mehr>summary{list-style:none}
.mehr>summary::-webkit-details-marker{display:none}
.mehr>summary::after{content:""; display:inline-block; width:7px; height:7px; margin-left:8px; border:solid currentColor; border-width:0 1.6px 1.6px 0; transform:translateY(-3px) rotate(45deg)}
.mehr__liste{position:absolute; top:calc(100% + 8px); left:0; min-width:200px; background:var(--papier); border-radius:16px; padding:6px; box-shadow:0 22px 44px -22px var(--schatten); display:grid}
.mehr__liste a{padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--tinte-2)}
.mehr__liste a:hover,.mehr__liste a[aria-current="page"]{background:var(--flaeche); color:var(--tinte)}
.kopf__rechts{display:flex; align-items:center; gap:8px}
.kopf__menue{display:none}
.kopf__menue span,.kopf__menue span::before,.kopf__menue span::after{display:block; width:18px; height:2px; background:currentColor; border-radius:2px; position:relative}
.kopf__menue span::before,.kopf__menue span::after{content:""; position:absolute; left:0}
.kopf__menue span::before{top:-6px} .kopf__menue span::after{top:6px}

/* Aufmacher einer Unterseite */
.held{position:relative; padding:72px 0 40px; overflow:hidden}
.held .innen{display:block}
.kicker{display:inline-flex; align-items:center; gap:8px; font:800 12px/1 var(--etikett); letter-spacing:.09em; text-transform:uppercase; color:var(--akzent-tief); margin:0 0 16px}
.held h1{font:600 clamp(40px,5.2vw,72px)/.98 var(--anzeige); letter-spacing:-.035em; margin:0; text-wrap:balance}
.held h1 em{font-style:normal; color:var(--akzent)}
.held .einstieg{font-size:20px; line-height:1.5; color:var(--tinte-2); max-width:56ch; margin:22px 0 0}
.held__knoepfe{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}

/* Kapitel-Leiste */
.kapitel{position:sticky; top:calc(var(--kopf-h) - 1px); z-index:15; background:var(--creme); box-shadow:0 -2px 0 var(--creme)}
.kapitel .innen{display:flex; gap:6px; overflow-x:auto; padding-block:10px; scrollbar-width:none}
.kapitel .innen::-webkit-scrollbar{display:none}
.kapitel a{flex:none; padding:8px 14px; border-radius:999px; background:var(--papier); text-decoration:none; font:500 14px/1 var(--text); color:var(--tinte-2)}
.kapitel a.ist-hier{background:var(--akzent); color:var(--auf-akzent)}

/* Abschnitte */
.abschnitt{padding:88px 0 8px}
.abschnitt>.innen>h2,.titel2{font:600 clamp(30px,3.6vw,48px)/1.02 var(--anzeige); letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance}
.unter{font-size:19px; color:var(--tinte-2); max-width:64ch; margin:0}
.zeile{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center; margin-top:48px}
.zeile--umgekehrt{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.zeile--umgekehrt .zeile__text{order:2}
.zeile__text h3{font:600 26px/1.12 var(--anzeige); letter-spacing:-.025em; margin:0 0 10px}
.zeile__text p{margin:0 0 14px; color:var(--tinte-2)}
.punkte{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px}
.punkte li{position:relative; padding-left:26px; color:var(--tinte-2)}
.punkte li::before{content:""; position:absolute; left:2px; top:.62em; width:10px; height:10px; border-radius:50%; background:var(--akzent)}
.punkte strong{color:var(--tinte); font-weight:600}

/* Fenster um Bildschirmfotos */
.fenster{margin:0; background:var(--papier); border-radius:18px; padding:0 0 0; box-shadow:0 34px 70px -40px var(--schatten), 0 0 0 1px color-mix(in srgb, var(--linie) 80%, transparent); overflow:hidden}
.fenster__leiste{display:flex; align-items:center; gap:7px; height:34px; padding:0 14px; background:var(--flaeche)}
.fenster__leiste i{width:10px; height:10px; border-radius:50%; background:var(--sand)}
.fenster__leiste i:nth-child(1){background:var(--akzent)} .fenster__leiste i:nth-child(2){background:var(--zweit)} .fenster__leiste i:nth-child(3){background:var(--sand)}
.fenster__leiste span{margin-left:10px; font:800 12px/1 var(--etikett); color:var(--leise)}
.fenster img{width:100%; height:auto; cursor:zoom-in}
.kacheln + .fenster{margin-top:40px}
.fenster figcaption,.telefon figcaption{font-size:14px; color:var(--leise); padding:12px 16px 14px}
.telefon{margin:0; max-width:300px; justify-self:center}
.telefon img{border-radius:34px; box-shadow:0 34px 70px -40px var(--schatten), 0 0 0 8px var(--nacht); width:100%; height:auto; cursor:zoom-in}
.telefon figcaption{text-align:center}
.platzhalter{aspect-ratio:16/10; display:grid; place-items:center; text-align:center; padding:24px; background:repeating-linear-gradient(135deg, var(--flaeche) 0 14px, var(--papier) 14px 28px); color:var(--leise); font:800 14px/1.4 var(--etikett)}

/* Gut zu wissen */
.tipp{display:flex; gap:14px; align-items:flex-start; margin-top:22px; background:var(--akzent-hauch); border-radius:18px; padding:14px 16px}
.tipp svg{flex:none; width:30px; height:30px; margin-top:2px; color:var(--akzent-tief)}
.tipp p{margin:0; font-size:15px; line-height:1.5; color:var(--tinte)}
.tipp b{display:block; font:800 11px/1 var(--etikett); letter-spacing:.08em; text-transform:uppercase; color:var(--akzent-tief); margin-bottom:5px}

/* Kacheln */
.kacheln{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:40px}
.kachel{background:var(--papier); border-radius:22px; padding:24px 24px 22px}
.kachel h3{font:700 19px/1.25 var(--text); margin:0 0 8px}
.kachel p{margin:0; font-size:15.5px; color:var(--tinte-2)}
.kachel__zeichen{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--akzent-hauch); color:var(--akzent-tief); margin-bottom:14px}
.kachel__zeichen svg{width:22px; height:22px}

/* Weiter zu */
.weiter{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:36px}
.weiter a{display:block; background:var(--papier); border-radius:20px; padding:20px; text-decoration:none; transition:transform .15s, box-shadow .15s}
.weiter a:hover{transform:translateY(-2px); box-shadow:0 20px 40px -26px var(--schatten)}
.weiter b{display:block; font:600 20px/1.15 var(--anzeige); letter-spacing:-.02em; margin-bottom:6px}
.weiter span{font-size:15px; color:var(--tinte-2)}
.weiter b::after{content:" →"; color:var(--akzent)}

/* Fußzeile */
.fuss{margin-top:110px; background:var(--papier); padding:56px 0 28px}
.fuss__innen{max-width:var(--breite); margin-inline:auto; padding-inline:24px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px}
.fuss__marke{position:relative}
.fuss__marke p{color:var(--tinte-2); font-size:15px; max-width:34ch}
.fuss h2{font:800 12px/1 var(--etikett); letter-spacing:.08em; text-transform:uppercase; color:var(--leise); margin:6px 0 14px}
.fuss ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.fuss ul a{text-decoration:none; color:var(--tinte-2)}
.fuss ul a:hover{color:var(--akzent-tief)}
.fuss__klein{max-width:var(--breite); margin:40px auto 0; padding:20px 24px 0; border-top:1px solid var(--linie); font-size:13px; color:var(--leise)}

/* Lupe */
.lupe{border:0; padding:0; background:transparent; max-width:min(1400px,96vw); max-height:94vh}
.lupe::backdrop{background:rgba(6,9,9,.8)}
.lupe img{max-height:90vh; width:auto; border-radius:14px}
.lupe__zu{position:fixed; top:16px; right:16px}

/* Schmal */
@media (max-width:1020px){
  .leiste{position:fixed; inset:var(--kopf-h) 0 auto 0; flex-direction:column; align-items:stretch; background:var(--creme); padding:12px 16px 20px; margin:0; border-bottom:1px solid var(--linie); display:none}
  .leiste.ist-offen{display:flex}
  .leiste>a,.mehr>summary{padding:14px 12px; font-size:17px}
  .mehr__liste{position:static; box-shadow:none; background:transparent; padding:0 0 0 12px}
  .mehr[open]>summary::after{transform:translateY(2px) rotate(225deg)}
  .kopf__menue{display:inline-flex; order:3}
  .kopf__rechts{margin-left:auto}
  .weiter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:16px}
  .innen,.kopf__innen{padding-inline:16px}
  .kopf__rechts .knopf--voll{display:none}
  .held{padding-top:40px}
  .held .innen{grid-template-columns:1fr}
    .held .einstieg{font-size:17px}
  .zeile,.zeile--umgekehrt{grid-template-columns:1fr; gap:24px; margin-top:36px}
  .zeile--umgekehrt .zeile__text{order:0}
  .kacheln,.weiter{grid-template-columns:1fr}
  .fuss__innen{grid-template-columns:1fr 1fr}
  .fuss__marke{grid-column:1/-1}
  .abschnitt{padding-top:64px}
}
@media (prefers-reduced-motion:reduce){ .weiter a{transition:none} }
/* Code zum Abschreiben, mit Dateiname und Kopierknopf */
.code{margin:22px 0 0; background:var(--nacht); color:#EDF1F1; border-radius:16px; overflow:hidden; box-shadow:0 24px 50px -36px var(--schatten)}
.code__kopf{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 8px 8px 16px; background:rgba(255,255,255,.06); font:500 12px/1 var(--mono); color:#9BA6A5}
.code__kopf button{font:600 12px/1 var(--mono); color:#EDF1F1; background:rgba(255,255,255,.08); border:0; border-radius:999px; padding:7px 12px; cursor:pointer}
.code__kopf button:hover{background:rgba(255,255,255,.16)}
.code pre{margin:0; padding:16px 18px 18px; overflow-x:auto; font:500 13.5px/1.6 var(--mono); tab-size:2}
.code pre code{background:none; padding:0; font:inherit; color:inherit}
.code .k{color:#5FE4BB} .code .s{color:#8CBCFF} .code .c{color:#74807F}

/* Tabellen */
.tabelle{margin:26px 0 0; overflow-x:auto; background:var(--papier); border-radius:18px; box-shadow:0 0 0 1px color-mix(in srgb, var(--linie) 80%, transparent)}
.tabelle table{width:100%; border-collapse:collapse; font-size:15.5px}
.tabelle th,.tabelle td{text-align:left; vertical-align:top; padding:12px 16px; border-bottom:1px solid var(--linie)}
.tabelle tr:last-child td{border-bottom:0}
.tabelle th{font:800 12px/1.2 var(--etikett); letter-spacing:.06em; text-transform:uppercase; color:var(--leise); background:var(--flaeche)}
.tabelle td{color:var(--tinte-2)}
.tabelle td:first-child{color:var(--tinte); white-space:nowrap}
.tabelle code{white-space:nowrap}

/* Gleich und anders */
.vergleich{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:40px}
.vergleich>div{background:var(--papier); border-radius:22px; padding:24px}
.vergleich h3{display:flex; align-items:center; gap:10px; font:600 22px/1.15 var(--anzeige); letter-spacing:-.02em; margin:0 0 14px}
.vergleich h3 svg{width:26px; height:26px; flex:none; color:var(--akzent-tief)}
.vergleich ul{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.vergleich li{color:var(--tinte-2); font-size:15.5px; padding-left:22px; position:relative}
.vergleich li::before{content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; background:var(--akzent)}
.vergleich .anders li::before{background:var(--zweit)}
.vergleich li strong{color:var(--tinte); font-weight:600}

/* Schritte */
.schritte{list-style:none; counter-reset:schritt; padding:0; margin:36px 0 0; display:grid; gap:14px}
.schritte>li{min-width:0; counter-increment:schritt; position:relative; background:var(--papier); border-radius:20px; padding:20px 22px 20px 74px; color:var(--tinte-2)}
.schritte>li::before{content:counter(schritt); position:absolute; left:20px; top:18px; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--akzent-hauch); color:var(--akzent-tief); font:600 18px/1 var(--anzeige)}
.schritte>li b{display:block; color:var(--tinte); font:700 18px/1.3 var(--text); margin-bottom:4px}
.schritte>li p{margin:0}
.schritte>li .code{margin-top:14px}

/* Fragen */
.fragen{margin-top:36px; display:grid; gap:10px}
.fragen details{background:var(--papier); border-radius:18px; padding:0 22px}
.fragen summary{list-style:none; cursor:pointer; padding:18px 30px 18px 0; position:relative; font:700 18px/1.35 var(--text); color:var(--tinte)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:""; position:absolute; right:4px; top:24px; width:9px; height:9px; border:solid var(--akzent-tief); border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .15s}
.fragen details[open] summary::after{transform:translateY(4px) rotate(225deg)}
.fragen details>div{padding:0 0 20px; color:var(--tinte-2)}
.fragen details>div p{margin:0 0 10px}
.fragen details>div p:last-child{margin:0}

/* Text in Spalten, schmaler Fließtext */
.text{max-width:72ch; color:var(--tinte-2)}
.text p{margin:0 0 14px}
.zwei{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; align-items:start; margin-top:40px}
.zwei h3{font:600 24px/1.15 var(--anzeige); letter-spacing:-.02em; margin:0 0 10px}
.zwei p{color:var(--tinte-2); margin:0 0 14px}

@media (max-width:760px){
  .vergleich,.zwei{grid-template-columns:1fr}
  .schritte>li{padding:66px 18px 18px 18px}
  .schritte>li::before{top:16px; left:18px}
  .tabelle thead{display:none}
  .tabelle tr{display:block; padding:12px 16px; border-bottom:1px solid var(--linie)}
  .tabelle tr:last-child{border-bottom:0}
  .tabelle td{display:block; padding:2px 0; border:0}
  .tabelle td:first-child{white-space:normal; font-weight:600; padding-bottom:4px}
  .tabelle td[data-titel]::before{content:attr(data-titel) ": "; font:800 11px/1 var(--etikett); letter-spacing:.06em; text-transform:uppercase; color:var(--leise)}
}
.zwei>.code,.zwei>.schritte{margin-top:0}
.zwei>*,.zeile>*,.vergleich>*,.kacheln>*{min-width:0}
.unter.nach{margin-top:22px}

/* Anleitung: Seitenleiste links, Text rechts, Beispiele "so schreibst du es, so sieht es aus". */
.anl{display:grid; grid-template-columns:250px minmax(0,1fr); gap:56px; align-items:start; padding-top:40px}
.anl--rechts{grid-template-columns:250px minmax(0,1fr) 190px}
.anl-leiste{position:sticky; top:calc(var(--kopf-h) + 20px); max-height:calc(100vh - var(--kopf-h) - 40px); overflow:auto; padding:4px 6px 20px 0; scrollbar-width:thin}
.anl-leiste h2{font:800 11px/1 var(--etikett); letter-spacing:.09em; text-transform:uppercase; color:var(--leise); margin:22px 0 8px 10px}
.anl-leiste h2:first-child{margin-top:0}
.anl-leiste ol{list-style:none; padding:0; margin:0; display:grid; gap:1px}
.anl-leiste a{display:flex; gap:10px; padding:7px 10px; border-radius:10px; text-decoration:none; color:var(--tinte-2); font-size:15px; line-height:1.3}
.anl-leiste a span{font:800 12px/1.6 var(--etikett); color:var(--leise); min-width:18px}
.anl-leiste a:hover{background:var(--papier); color:var(--tinte)}
.anl-leiste a[aria-current="page"]{background:var(--akzent-hauch); color:var(--tinte); font-weight:600}
.anl-leiste a[aria-current="page"] span{color:var(--akzent-tief)}
.anl-leiste__auf{display:none}
.anl-leiste__kopf{margin:0 0 18px 10px; font:700 15px/1.2 var(--text)}
.anl-leiste__kopf a{text-decoration:none; color:var(--akzent-tief)}
.anl-leiste__kopf a::before{content:"← "}

.anl-text{min-width:0; max-width:760px}
.anl-text .kicker{margin-bottom:12px}
.anl-text h1{font:600 clamp(34px,4vw,52px)/1 var(--anzeige); letter-spacing:-.022em; margin:0 0 16px; text-wrap:balance}
.anl-text h2{font:600 28px/1.1 var(--anzeige); letter-spacing:-.025em; margin:56px 0 12px}
.anl-text h3{font:700 19px/1.3 var(--text); margin:30px 0 8px}
.anl-text p,.anl-text li{color:var(--tinte-2)}
.anl-text p{margin:0 0 14px}
.anl-text .einstieg{font-size:19px; line-height:1.55}

/* Auf dieser Seite (nur bei langen Seiten) */
.anl-seite{position:sticky; top:calc(var(--kopf-h) + 20px); font-size:14px}
.anl-seite b{display:block; font:800 11px/1 var(--etikett); letter-spacing:.09em; text-transform:uppercase; color:var(--leise); margin-bottom:10px}
.anl-seite a{display:block; padding:5px 0 5px 12px; border-left:2px solid var(--linie); text-decoration:none; color:var(--tinte-2)}
.anl-seite a.ist-hier{border-color:var(--akzent); color:var(--tinte)}

/* Blättern */
.blaettern{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:56px}
.blaettern a{display:block; background:var(--papier); border-radius:18px; padding:16px 20px; text-decoration:none}
.blaettern a:hover{box-shadow:0 20px 40px -26px var(--schatten)}
.blaettern small{display:block; font:800 11px/1 var(--etikett); letter-spacing:.08em; text-transform:uppercase; color:var(--leise); margin-bottom:6px}
.blaettern b{font:600 19px/1.2 var(--anzeige); letter-spacing:-.02em}
.blaettern__weiter{text-align:right; grid-column:2}

/* Übersicht */
.anl-gruppe{margin-top:56px}
.anl-gruppe h2{font:600 clamp(28px,3.2vw,40px)/1.05 var(--anzeige); letter-spacing:-.02em; margin:0 0 8px}
.anl-karten{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px}
.anl-karten a{display:flex; gap:14px; background:var(--papier); border-radius:18px; padding:16px 18px; text-decoration:none; transition:transform .15s}
.anl-karten a:hover{transform:translateY(-2px)}
.anl-karten span{flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--akzent-hauch); color:var(--akzent-tief); font:600 15px/1 var(--anzeige)}
.anl-karten b{display:block; font:700 16.5px/1.25 var(--text); color:var(--tinte); margin-bottom:3px}
.anl-karten small{font-size:14px; color:var(--tinte-2); line-height:1.4; display:block}

@media (max-width:1100px){ .anl--rechts{grid-template-columns:250px minmax(0,1fr)} .anl-seite{display:none} }
@media (max-width:860px){
  .anl,.anl--rechts{grid-template-columns:1fr; gap:24px; padding-top:20px}
  .anl-leiste{position:static; max-height:none; padding:0}
  .anl-leiste__auf{display:block; background:var(--papier); border-radius:16px; padding:0 16px}
  .anl-leiste__auf summary{padding:14px 0; font-weight:600; cursor:pointer}
  .anl-leiste>nav{display:none}
  .anl-karten{grid-template-columns:1fr}
  .beispiel{grid-template-columns:1fr}
}

/* Code wird abgeschrieben: keine Ligaturen, sonst wird aus --> ein Pfeil. */
code,kbd,pre,.code pre,.beispiel__roh pre{font-variant-ligatures:none; font-feature-settings:"liga" 0, "calt" 0}
.anl-text .tabelle,.anl-text .fenster,.anl-text .code{margin-top:22px; margin-bottom:18px}
.anl-text .kacheln{margin:22px 0 18px}
.anl-text .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){ .anl-text .kacheln{grid-template-columns:1fr} }
/* Rechtliches und 404 */
.abschnitt>.innen.text>h2{font:600 24px/1.2 var(--anzeige); letter-spacing:-.02em; margin:36px 0 10px}
.abschnitt>.innen.text>h2:first-child{margin-top:0}
.text .punkte{margin:0 0 14px}
.held--fehler{min-height:calc(100vh - var(--kopf-h)); display:flex; align-items:center}
.held--fehler .innen{width:100%}
@media (max-width:760px){
  /* Auf dem Handy wäre das Bild nur so breit wie der Bildschirm: stattdessen groß, zum Verschieben mit dem Finger. */
  .lupe[open]{width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; overflow:auto; background:rgba(6,9,9,.92)}
  .lupe[open] img{max-width:none; max-height:none; width:1300px; border-radius:0}
}


/* Startseite: festes 3D-Bild statt Film, über die volle Breite wie der Film auf nexlore.de und nexcanvas.de.
   Die Kopfleiste liegt als Pillen über dem Bild und bekommt erst beim Scrollen einen Grund (seite.js, .kopf-fest). */
body[data-seite="start"] .kopf{position:fixed; left:0; right:0; background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; transition:background-color .2s, box-shadow .2s}
body[data-seite="start"].kopf-fest .kopf{background:color-mix(in srgb, var(--creme) 88%, transparent); -webkit-backdrop-filter:saturate(1.3) blur(12px); backdrop-filter:saturate(1.3) blur(12px); box-shadow:0 1px 0 var(--linie)}
body[data-seite="start"] .kopf__innen{max-width:none; padding:calc(16px + env(safe-area-inset-top,0px)) 20px 14px}
body[data-seite="start"] .leiste{margin:0 0 0 auto; gap:8px}
body[data-seite="start"] .leiste>a,body[data-seite="start"] .mehr>summary{height:42px; display:inline-flex; align-items:center; padding:0 20px; border-radius:999px; background:var(--papier); color:var(--tinte); font:600 15px/1 var(--text); box-shadow:0 8px 20px -14px var(--schatten)}
body[data-seite="start"] .leiste>a:hover,body[data-seite="start"] .mehr>summary:hover{filter:brightness(1.04)}
body[data-seite="start"] .leiste>a[data-k="hosten"]{display:none}
body[data-seite="start"] .mehr__liste{left:auto; right:0}
.aufmacher{position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:var(--flaeche)}
.aufmacher__bild{position:absolute; inset:0; margin:0}
.aufmacher__bild img{width:100%; height:100%; object-fit:cover; object-position:62% 45%}
.aufmacher__bild--dunkel{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .aufmacher__bild--hell{display:none}
  :root:not([data-theme="light"]) .aufmacher__bild--dunkel{display:block}
}
:root[data-theme="dark"] .aufmacher__bild--hell{display:none}
:root[data-theme="dark"] .aufmacher__bild--dunkel{display:block}
.aufmacher::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, color-mix(in srgb, var(--creme) 82%, transparent) 0%, color-mix(in srgb, var(--creme) 55%, transparent) 30%, transparent 52%),
             linear-gradient(0deg, color-mix(in srgb, var(--creme) 55%, transparent) 0%, transparent 30%),
             linear-gradient(180deg, color-mix(in srgb, var(--creme) 45%, transparent) 0%, transparent 110px)}
.aufmacher__text{position:absolute; z-index:1; left:clamp(20px,3vw,48px); bottom:calc(clamp(24px,5vh,56px) + env(safe-area-inset-bottom,0px)); width:min(42vw,640px)}
.aufmacher .kicker{display:flex; align-items:center; gap:10px; margin:0 0 14px; font:800 12px/1 var(--etikett); letter-spacing:.08em; color:var(--tinte-2)}
.aufmacher .kicker svg{width:36px; height:34px; animation:wippen 1.6s ease-in-out infinite}
@keyframes wippen{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
.aufmacher h1{font:600 clamp(38px,4.3vw,76px)/.96 var(--anzeige); letter-spacing:-.035em; margin:0; text-wrap:balance}
.aufmacher h1 em{font-style:normal; color:var(--akzent)}
.aufmacher .einstieg{margin:20px 0 0; max-width:42ch; font-size:17px; line-height:1.5; color:var(--tinte-2)}
.aufmacher__weiter{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:22px 0 0; font:800 13px/1 var(--etikett); color:var(--leise)}
.aufmacher__weiter a{color:var(--tinte); text-decoration:none; display:inline-flex; gap:8px; align-items:center}
.aufmacher__weiter a span{display:inline-block; color:var(--akzent); font-size:16px; animation:stupsen 1.4s ease-in-out infinite}
@keyframes stupsen{0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){ .aufmacher .kicker svg,.aufmacher__weiter a span{animation:none} }

/* Startseite: Abschnitte */
.augenbraue{font:800 12px/1 var(--etikett); letter-spacing:.09em; text-transform:uppercase; color:var(--akzent-tief); margin:0 0 14px}
.abschnitt .fenster{margin-top:40px}
.drei-wege{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:40px}
.drei-wege article{background:var(--papier); border-radius:22px; padding:26px 26px 22px}
.drei-wege svg{width:52px; height:52px}
.drei-wege h3{font:600 23px/1.15 var(--anzeige); letter-spacing:-.02em; margin:16px 0 8px}
.drei-wege p{margin:0; color:var(--tinte-2); font-size:15.5px}
.drei-wege dl{margin:16px 0 0; padding-top:14px; border-top:1px solid var(--linie); display:grid; gap:6px; font-size:14px}
.drei-wege dl div{display:flex; justify-content:space-between; gap:12px}
.drei-wege dt{color:var(--leise); font:800 12px/1.6 var(--etikett); text-transform:uppercase; letter-spacing:.06em}
.drei-wege dd{margin:0; color:var(--tinte); text-align:right}
.sec-mehr{margin:32px 0 0; font-weight:600}
.sec-mehr a{color:var(--akzent-tief); text-decoration:none}
.sec-mehr a::after{content:" →"}
.band{margin-top:96px; background:var(--nacht); color:#EDF1F1; box-shadow:0 0 0 1px #2F3A38; border-radius:28px; padding:48px; position:relative; overflow:hidden}
.band .augenbraue{color:#5FE4BB}
.band h2{font:600 clamp(30px,3.6vw,48px)/1.02 var(--anzeige); letter-spacing:-.02em; margin:0 0 12px; max-width:18ch}
.band p{color:#9BA6A5; max-width:52ch; margin:0 0 24px}
.band .knopf--rand{color:#EDF1F1; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.band__knoepfe{display:flex; flex-wrap:wrap; gap:10px}
.farbstreifen{display:flex; height:8px; border-radius:99px; overflow:hidden; margin:0 0 22px; max-width:240px}
.farbstreifen i{flex:1} .farbstreifen i:nth-child(1){background:#23D19E} .farbstreifen i:nth-child(2){background:#4C9BFF} .farbstreifen i:nth-child(3){background:#FFB020} .farbstreifen i:nth-child(4){background:#FF6B5A} .farbstreifen i:nth-child(5){background:#E86FA0}
@media (max-width:1020px){ .drei-wege{grid-template-columns:1fr} }
@media (max-width:760px){
  .aufmacher{min-height:600px}
  .aufmacher__bild img{object-position:50% 20%}
  .aufmacher::after{background:linear-gradient(0deg, color-mix(in srgb, var(--creme) 94%, transparent) 0%, color-mix(in srgb, var(--creme) 78%, transparent) 34%, transparent 58%),
                           linear-gradient(180deg, color-mix(in srgb, var(--creme) 70%, transparent) 0%, transparent 14%)}
  .aufmacher__text{left:16px; right:16px; width:auto; bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .aufmacher h1{font-size:clamp(32px,9.6vw,44px)}
  .aufmacher .einstieg{font-size:15px; margin-top:12px}
  body[data-seite="start"] .kopf__innen{padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px}
  .band{padding:32px 22px 150px}
}
.kacheln--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){ .kacheln--zwei{grid-template-columns:1fr} }
@media (min-width:1021px) and (max-width:1240px){ body[data-seite="start"] .mehr{display:none} body[data-seite="start"] .leiste>a{padding:0 15px} }
@media (max-width:1020px){
  body[data-seite="start"] .leiste{margin:0; gap:0}
  body[data-seite="start"] .leiste>a,body[data-seite="start"] .mehr>summary{height:auto; display:block; padding:14px 12px; background:transparent; box-shadow:none; font:500 17px/1 var(--text)}
  body[data-seite="start"] .leiste>a[data-k="hosten"]{display:block}
}

/* Startseite: der Film beim Scrollen (film.js zeichnet die Bühne, film-scroll.js treibt die Zeit). Die Bühne ist
   1920 × 1080 und wird so groß wie möglich ins Bild gesetzt; der Grund drumherum ist derselbe wie im Film. */
.film{position:relative; background:var(--creme); overflow-x:clip}
.film__klebt{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  background-image:radial-gradient(color-mix(in srgb, var(--leise) 30%, transparent) 1.3px, transparent 1.6px); background-size:30px 30px}
.film #viewport{position:absolute; z-index:1; inset:var(--kopf-h) 0 0 0; overflow:hidden}
.film #stage{position:absolute; left:0; top:0; transform-origin:0 0}
.film .dots,.film #stage .glow,.film #stage .vign{display:none}
/* Der Grund des Films liegt über der ganzen Breite, nicht nur auf der Bühne: sonst zeichnet sich die Bühne als Kasten
   ab, sobald das Fenster ein anderes Seitenverhältnis hat als 16:9. Die Lichtflecken wandern langsam. */
.film__klebt::before,.film__klebt::after{content:""; position:absolute; pointer-events:none; border-radius:50%}
.film__klebt::before{width:70vmax; height:70vmax; right:-18vmax; top:-30vmax; background:radial-gradient(closest-side, var(--f-glow1), transparent); animation:fleck1 38s ease-in-out infinite alternate}
.film__klebt::after{width:62vmax; height:62vmax; left:-22vmax; bottom:-26vmax; background:radial-gradient(closest-side, var(--f-glow2), transparent); animation:fleck2 44s ease-in-out infinite alternate}
@keyframes fleck1{to{transform:translate(-9vmax,7vmax)}}
@keyframes fleck2{to{transform:translate(8vmax,-6vmax)}}
@media (prefers-reduced-motion:reduce){ .film__klebt::before,.film__klebt::after{animation:none} }
.film__balken{position:absolute; z-index:3; left:0; right:0; top:0; height:3px}
.film__balken i{display:block; height:100%; background:var(--akzent); transform-origin:0 50%; transform:scaleX(0)}
.film__kapitel{position:absolute; z-index:5; left:50%; bottom:calc(14px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); list-style:none; margin:0; padding:5px; display:flex; gap:2px; max-width:calc(100vw - 24px); background:color-mix(in srgb, var(--papier) 88%, transparent); border:1px solid var(--linie); border-radius:999px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 10px 30px -18px var(--schatten); transition:opacity .4s; opacity:0}
.film__kapitel button{display:flex; align-items:center; gap:6px; border:0; background:none; cursor:pointer; font:700 14px/1 var(--text); color:var(--tinte-2); padding:9px 13px; border-radius:999px; white-space:nowrap}
.film__kapitel button:hover{background:var(--flaeche)}
.film__kapitel .nr{color:var(--akzent-tief); font-weight:800; font-variant-numeric:tabular-nums}
.film__kapitel .an button{background:var(--akzent); color:var(--auf-akzent)}
.film__kapitel .an .nr{color:inherit; opacity:.8}
.film__hinweis{position:absolute; z-index:4; pointer-events:none; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); display:flex; align-items:center; gap:12px; font:800 15px/1 var(--text); color:var(--tinte-2); background:color-mix(in srgb, var(--papier) 88%, transparent); border:1px solid var(--linie); padding:10px 18px 10px 12px; border-radius:999px; transition:opacity .4s; opacity:0; white-space:nowrap}
.film__maus{width:20px; height:30px; border:2px solid currentColor; border-radius:10px; position:relative}
.film__maus i{position:absolute; left:50%; top:6px; width:3px; height:6px; margin-left:-1.5px; border-radius:2px; background:currentColor; animation:maus 1.6s infinite}
@keyframes maus{0%{transform:translateY(0); opacity:1} 70%{transform:translateY(8px); opacity:0} 100%{opacity:0}}
.film__ohne{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
@media (max-width:760px){
  .film__kapitel button{padding:8px 9px}
  .film__kapitel li:not(.an) .kap{display:none}
}
/* Hochformat (Handy hochkant): die Bühne endet unter der Kopfleiste und über der Kapitelleiste; ihr Grund läuft dort
   weich aus, damit keine Kante zu sehen ist */
.film #stage.hoch .bg{-webkit-mask-image:linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent)}
@media (prefers-reduced-motion:reduce){ .film__maus i{animation:none} }
/* Die Bühne darf auf der Seite über ihren Rand hinaus zeichnen, aber nur die Szene, die das will (der Zeitraffer der
   Zeitkapsel, Klasse bleed). Alle anderen Szenen bleiben auf die Bühne beschnitten. */
.film #stage{overflow:visible}
.film #stage .scene:not(.bleed){clip-path:inset(0)}

/* Auf Touch-Geräten über dem Film keine Hintergrund-Unschärfe: Safari auf dem iPhone rechnet sie bei jedem Bild des Films neu. */
@media (pointer:coarse){
  body[data-seite="start"] .film__kapitel{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--papier)}
  body[data-seite="start"].kopf-fest .kopf{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--creme)}
}

/* ==========================================================================
   Nexview: Heimkino. Tinte als Saal, Rot als Samt und Leuchtschrift,
   Überschriften schwer und eng mit dem roten Punkt der App (wie „Willkommen, Mira.“), echte Plakate.
   ========================================================================== */
body{font-feature-settings:"cv11","ss01"}
::selection{background:var(--akzent); color:var(--auf-akzent)}
.titel2,.abschnitt>.innen>h2,.held h1,.band h2{font-weight:800; letter-spacing:-.045em}
.titel2{font-size:clamp(34px,4.6vw,64px); line-height:.98}
.titel2 .punkt,.band h2 .punkt,.held h1 .punkt{color:var(--akzent)}
.unter{font-size:19px; line-height:1.6}
.augenbraue,.kicker{display:flex; align-items:center; gap:12px; font:800 12.5px/1 var(--etikett); letter-spacing:.14em; text-transform:uppercase; color:var(--akzent-tief)}
.augenbraue::before,.kicker::before{content:""; width:30px; height:3px; border-radius:2px; background:var(--akzent)}

/* Knöpfe wie in der App: Pillen, Bernstein mit dunkler Schrift */
.knopf{background:var(--papier); box-shadow:inset 0 0 0 1.5px var(--linie)}
.knopf--voll{background:var(--akzent); color:var(--auf-akzent); box-shadow:0 10px 30px -12px rgba(225,29,47,.65)}
.knopf--voll:hover{background:var(--akzent-h)}
.knopf--rand{background:transparent; box-shadow:inset 0 0 0 1.5px var(--sand)}
.leiste a[aria-current="page"],.mehr.ist-aktiv>summary{background:var(--akzent-hauch); color:var(--akzent-tief); box-shadow:none}

/* Flächen */
.kachel,.drei-wege article,.weiter a,.schritte>li,.fragen details,.vergleich>div,.blaettern a,.anl-karten a,.tabelle,.kapitel a{background:var(--papier); border-radius:22px; box-shadow:inset 0 0 0 1.5px var(--linie)}
.kachel,.drei-wege article{transition:box-shadow .2s, transform .2s}
.kachel:hover,.drei-wege article:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--akzent) 55%, transparent), 0 24px 60px -36px rgba(225,29,47,.5); transform:translateY(-2px)}
.kachel h3,.drei-wege h3,.zwei h3{font-weight:800; letter-spacing:-.025em}
.drei-wege__nr{display:block; font:400 13px/1 var(--mono); color:var(--akzent-tief); margin-bottom:6px}
.fenster{border-radius:18px; box-shadow:0 0 0 1.5px var(--linie), 0 50px 100px -60px rgba(225,29,47,.45), 0 34px 70px -40px var(--schatten)}
.fenster__leiste i:nth-child(1){background:var(--akzent)} .fenster__leiste i:nth-child(2){background:var(--sand)}
.schritte>li::before{background:var(--akzent-hauch); color:var(--akzent-tief); font-weight:800}
.fuss{background:var(--flaeche); box-shadow:0 -1px 0 var(--linie)}
.code .k{color:#FF6B7A} .code .s{color:#7DD3FC} .code .c{color:#6F6F80}

/* Chips wie in der App */
.chip{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 13px; border-radius:999px; font:600 14px/1 var(--text); white-space:nowrap; border:1.5px solid var(--sand); color:var(--tinte-2)}
.chip svg{width:15px; height:15px; flex:none}
.chip--gut{color:var(--gut); border-color:color-mix(in srgb, var(--gut) 55%, transparent); background:var(--gut-hauch)}
.chip--fehlt{border-style:dashed; color:var(--leise)}
.chip--nein{color:var(--schlecht); border-color:color-mix(in srgb, var(--schlecht) 50%, transparent); background:var(--schlecht-hauch)}
.chip--licht{color:var(--akzent-tief); border-color:color-mix(in srgb, var(--akzent) 55%, transparent); background:var(--akzent-hauch)}

/* Plakatreihe: echte Plakate, die langsam durchlaufen (die Bibliothek) */
.plakate{position:relative; overflow:hidden; margin-top:48px; padding:6px 0 10px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.plakate__band{display:flex; gap:16px; width:max-content; animation:plakate 80s linear infinite}
.plakate figure{margin:0; width:150px; flex:none}
.plakate img{width:150px; height:225px; object-fit:cover; border-radius:12px; box-shadow:0 18px 40px -24px var(--schatten)}
.plakate figcaption{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.plakate .chip{height:24px; padding:0 9px; font-size:12px; border-width:1.2px}
.plakate .chip svg{width:12px; height:12px}
@keyframes plakate{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .plakate__band{animation:none} }

/* Fassungen: eine Karte wie die Titelseite der App, aus HTML statt Bild */
@media (min-width:761px){ .zeile--fassungen{grid-template-columns:minmax(0,4fr) minmax(0,7fr)} }
.titelkarte{display:grid; grid-template-columns:170px minmax(0,1fr); gap:20px 26px; align-items:center; background:var(--papier); border-radius:24px; padding:26px; box-shadow:inset 0 0 0 1.5px var(--linie), 0 50px 100px -60px rgba(225,29,47,.4)}
.titelkarte>img{width:170px; height:255px; object-fit:cover; border-radius:14px}
.titelkarte__meta{font-size:14px; color:var(--leise)}
.titelkarte h3{font:800 54px/1 var(--anzeige); letter-spacing:-.04em; margin:6px 0 14px}
.titelkarte h3 span{color:var(--akzent)}
.titelkarte__chips{display:flex; flex-wrap:wrap; gap:8px}
.fassungen{grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.fassung{border-radius:16px; padding:16px 18px; box-shadow:inset 0 0 0 1.5px var(--linie); background:var(--creme)}
.fassung--licht{box-shadow:inset 0 0 0 2px var(--akzent)}
.fassung b{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font:800 22px/1.2 var(--anzeige); letter-spacing:-.02em; margin-bottom:10px}
.fassung dl{margin:0; display:grid; gap:6px; font-size:14px}
.fassung dt{color:var(--leise); font-size:12px}
.fassung dd{margin:0; color:var(--tinte)}
.fassung code{background:none; padding:0; font-size:13px}

/* Entscheidungen mit Grund: Zeilen wie die Suche der App */
.gruende{margin-top:40px; background:var(--papier); border-radius:22px; box-shadow:inset 0 0 0 1.5px var(--linie); overflow:hidden}
.gruende__zeile{display:grid; grid-template-columns:minmax(0,1fr) 150px 230px; gap:16px; align-items:center; padding:14px 22px; border-bottom:1px solid var(--linie); font-size:15px}
.gruende__zeile:last-child{border-bottom:0}
.gruende__zeile code{background:none; padding:0; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tinte)}
.gruende__zeile span{color:var(--tinte-2); font:400 13.5px/1 var(--mono)}
.gruende__zeile--wahl{background:var(--akzent-hauch); box-shadow:inset 3px 0 0 var(--akzent)}
.gruende__kopf{font:800 11.5px/1 var(--etikett); letter-spacing:.1em; text-transform:uppercase; color:var(--leise); background:var(--flaeche)}
.gruende__kopf span{font:inherit; color:inherit}
.gruende__grund{padding:16px 22px; font-size:15px; color:var(--tinte-2); background:var(--flaeche)}
.gruende__grund b{color:var(--tinte)}

/* Vorher und nachher */
.vorher{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:40px}
.vorher>div{border-radius:22px; padding:26px; background:var(--papier); box-shadow:inset 0 0 0 1.5px var(--linie)}
.vorher>.vorher__wahl{box-shadow:inset 0 0 0 2px var(--akzent), 0 40px 80px -50px rgba(225,29,47,.5)}
.vorher h3{display:flex; align-items:center; gap:12px; font:800 22px/1.2 var(--anzeige); letter-spacing:-.02em; margin:0 0 16px}
.vorher h3 svg{width:30px; height:30px; flex:none}
.vorher__apps{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
.vorher__apps span{font:600 13.5px/1 var(--text); padding:9px 12px; border-radius:10px; background:var(--flaeche); color:var(--tinte-2)}
.vorher__apps span.eins{background:var(--akzent-hauch); color:var(--akzent-tief)}
.vorher ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.vorher li{position:relative; padding-left:24px; color:var(--tinte-2); font-size:15.5px}
.vorher li::before{content:""; position:absolute; left:2px; top:.55em; width:9px; height:9px; border-radius:50%; background:var(--sand)}
.vorher>.vorher__wahl li::before{background:var(--akzent)}

/* Grenzen */
.grenzen{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; margin-top:36px}
.grenzen div{padding:20px 0; border-top:1px solid var(--linie)}
.grenzen b{display:block; font:800 18px/1.3 var(--anzeige); letter-spacing:-.015em; margin-bottom:6px}
.grenzen p{margin:0; color:var(--tinte-2); font-size:15.5px}

/* Band am Ende: der Saal, der Projektor */
.band{background-color:#06060A; color:#F2F2F5; border-radius:28px; box-shadow:0 0 0 1px #26262F;
  background-image:radial-gradient(70% 140% at 100% 0%, rgba(225,29,47,.28), transparent 60%), radial-gradient(50% 90% at 0% 100%, rgba(56,189,248,.08), transparent 60%)}
.band .augenbraue{color:#FF6B7A} .band .augenbraue::before{background:#E11D2F}
.band p{color:#C3C3CE}
.band .knopf--voll{background:#E11D2F; color:#FFFFFF}
.band .knopf--rand{color:#F2F2F5; background:transparent; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.band__logo{width:64px; height:64px; margin-bottom:22px; display:block}
.band .code{margin:0 0 26px; max-width:680px; background:rgba(255,255,255,.04); box-shadow:0 0 0 1px #26262F}

/* Startseite: der Film liegt auf demselben Grund wie die Welt im Film */
.film{background:transparent}
/* der Grund der Bühne liegt auf der Seite über der ganzen Breite, sonst zeichnet sie sich als Kasten ab */
.film #stage .bg{display:none}
.film__klebt{background-color:var(--creme); background-image:radial-gradient(color-mix(in srgb, var(--leise) 22%, transparent) 1.4px, transparent 1.8px); background-size:30px 30px}
:root{ --f-glow1: rgba(225,29,47,.10); --f-glow2: rgba(56,189,248,.05) }
.film__kapitel .an button{background:var(--akzent); color:var(--auf-akzent)}
/* die Kopfleiste über dem Film: Links als schlichte Schrift, nicht als Pillen */
body[data-seite="start"] .leiste>a,body[data-seite="start"] .mehr>summary{background:transparent; box-shadow:none; color:var(--tinte-2); padding:0 14px}
body[data-seite="start"] .leiste>a:hover,body[data-seite="start"] .mehr>summary:hover{color:var(--tinte); background:var(--papier)}
body[data-seite="start"] .leiste>a[data-k="installation"]{display:none}

@media (max-width:1020px){
  .vorher,.grenzen{grid-template-columns:1fr}
  .titelkarte{grid-template-columns:140px minmax(0,1fr)} .titelkarte>img{width:140px; height:210px}
  body[data-seite="start"] .leiste>a[data-k="installation"]{display:block}
}
@media (max-width:760px){
  .titelkarte{grid-template-columns:1fr; padding:18px} .titelkarte>img{width:120px; height:180px}
  .titelkarte h3{font-size:42px}
  .fassungen{grid-template-columns:1fr}
  .gruende__zeile{grid-template-columns:minmax(0,1fr); gap:6px}
  .gruende__kopf{display:none}
  .plakate figure{width:120px} .plakate img{width:120px; height:180px}
}


/* API-Referenz (tools/api.py setzen erzeugt das Markup) */
.weg{font-weight:600; color:var(--tinte)}
.api-gruppe .augenbraue{margin-top:0}
.api-gruppe h2{font:800 clamp(26px,3vw,38px)/1.05 var(--anzeige); letter-spacing:-.03em; margin:0 0 10px}
.api-liste{display:grid; gap:8px; margin-top:26px}
.api{background:var(--papier); border-radius:16px; box-shadow:inset 0 0 0 1.5px var(--linie)}
.api[open]{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--akzent) 45%, transparent)}
.api summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:78px minmax(0,auto) minmax(0,1fr) auto; gap:14px; align-items:center; padding:13px 18px}
.api summary::-webkit-details-marker{display:none}
.api__methode{font:500 12px/1 var(--mono); text-align:center; padding:7px 0; border-radius:8px; background:var(--flaeche); color:var(--tinte-2)}
.api__methode--get{background:var(--gut-hauch); color:var(--gut)}
.api__methode--post{background:var(--akzent-hauch); color:var(--akzent-tief)}
.api__methode--put,.api__methode--patch{background:var(--zweit-hauch); color:var(--zweit)}
.api__methode--delete{background:var(--schlecht-hauch); color:var(--schlecht)}
.api__pfad{background:none; padding:0; font-size:14px; color:var(--tinte); overflow-wrap:anywhere}
.api__kurz{font-size:14.5px; color:var(--tinte-2)}
.api__umfang{display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:999px; font:600 12px/1 var(--text); white-space:nowrap; border:1.5px solid var(--sand); color:var(--tinte-2)}
.api__umfang--read{color:var(--gut); border-color:color-mix(in srgb, var(--gut) 50%, transparent)}
.api__umfang--request{color:var(--akzent-tief); border-color:color-mix(in srgb, var(--akzent) 50%, transparent)}
.api__umfang--operate{color:var(--zweit); border-color:color-mix(in srgb, var(--zweit) 50%, transparent)}
.api__umfang--frei{border-style:dashed}
.api__rumpf{padding:0 18px 18px; font-size:15px; color:var(--tinte-2)}
.api__rumpf p{margin:0 0 12px}
.api__rumpf h4{font:800 11.5px/1 var(--etikett); letter-spacing:.1em; text-transform:uppercase; color:var(--leise); margin:18px 0 8px}
.api__rumpf h4 code{text-transform:none; letter-spacing:0}
.api__felder{margin:0}
.api__felder table{font-size:14px}
.api__felder td{white-space:normal}
.api__pflicht{color:var(--akzent-tief); font-weight:800}
.api__fehler{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.api__fehler .num{display:inline-block; min-width:40px; font:500 13px/1 var(--mono); color:var(--tinte)}
@media (max-width:760px){
  .api summary{grid-template-columns:64px minmax(0,1fr); gap:8px 12px}
  .api__kurz,.api__umfang{grid-column:2}
  .api__umfang{justify-self:start}
}

/* Absatz nach einer Aufzählung */
.zeile__text ul + p,.text ul + p,.zwei ul + p{margin-top:14px}
.anl-text ul + p{margin-top:14px}
.tabelle td:first-child{white-space:normal}
.blaettern b{overflow-wrap:anywhere; hyphens:auto}
.anl-text h1{font-weight:800; letter-spacing:-.04em}
.anl-text h1 .punkt{color:var(--akzent)}
.anl-text h2{font-weight:800; letter-spacing:-.03em}

/* Nexview: die Eintrittskarte aus dem Film, als Anfrage mit Stempel */
.zeile--karte{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.karte{position:relative; padding:30px 10px; transform:rotate(-2deg)}
.karte__papier{position:relative; display:grid; grid-template-columns:150px minmax(0,1fr); min-height:200px; border-radius:18px; color:#2b1a12;
  background:linear-gradient(180deg,#FBF3E2,#F1E3C6); box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  -webkit-mask:radial-gradient(circle 16px at 150px 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 16px at 150px 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 16px at 150px 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 16px at 150px 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.karte__abriss{display:grid; place-content:center; justify-items:center; gap:6px; color:#B3121F; border-right:3px dashed rgba(160,30,40,.45); margin:22px 0}
.karte__abriss b{font:800 15px/1 var(--etikett); letter-spacing:.22em; text-transform:uppercase}
.karte__abriss span{font:400 22px/1 var(--mono)}
.karte__haupt{padding:24px 26px}
.karte__kopf{margin:0; font:800 12px/1 var(--etikett); letter-spacing:.24em; text-transform:uppercase; color:#B3121F}
.karte__titel{margin:8px 0 14px; font:800 30px/1.05 var(--anzeige); letter-spacing:-.03em; color:#23140E}
.karte dl{margin:0; display:flex; flex-wrap:wrap; gap:8px 26px; font-size:14px}
.karte dt{color:#6B5345} .karte dd{margin:2px 0 0; font-weight:700; color:#23140E}
.karte__stempel{position:absolute; right:-6px; bottom:0; padding:8px 18px; border:5px solid #D01E2E; border-radius:12px; color:#D01E2E; font:900 26px/1 var(--anzeige); letter-spacing:.12em; text-transform:uppercase; transform:rotate(-12deg); background:rgba(208,30,46,.06)}
.weiter--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1020px){ .zeile--karte{grid-template-columns:1fr} .weiter--drei{grid-template-columns:1fr} }
@media (max-width:760px){ .karte__papier{grid-template-columns:96px minmax(0,1fr)} .karte__titel{font-size:24px} .karte__stempel{font-size:20px; right:0} }

/* Kachel als Link (Funktionen-Übersicht) */
a.kachel{display:block; color:inherit; text-decoration:none; transition:box-shadow .2s, transform .2s}
a.kachel:hover{box-shadow:0 0 0 1.5px var(--akzent); transform:translateY(-2px)}
a.kachel h3::after{content:" →"; color:var(--akzent-tief)}


/* API-Referenz (tools/api.py): die Form der Antwort */
.api__form{background:var(--nacht); color:#E8E8EE; border-radius:14px; padding:14px 16px; overflow-x:auto; font:500 13px/1.5 var(--mono); margin:0}
.api__form code{background:none; padding:0; font:inherit; color:inherit}
.api__rumpf ul{margin:0 0 12px; padding-left:20px}
.api-gruppe .kicker a,.held .kicker a{color:inherit}

/* Anleitung und Installation: lange Adressen und Variablen im Fließtext brechen um, statt die Seite breiter zu machen */
.anl-text p code,.anl-text li code,.abschnitt p code,.abschnitt li code{overflow-wrap:anywhere}