/* nexdiary-Seite: Aufbau wie die Seiten von nexlore, nexcanvas und nexbrand, Farben und Schriften wie die App:
   warmes Papier, Salbei als Akzent, Fraunces für Überschriften, Lora für Tagebuchtext, Nunito für alles andere. */
:root{
  --creme:#FAF5EC; --papier:#FFFDF8; --sand:#E2D3BE; --linie:#E8DCCB; --flaeche:#F4ECE0;
  --akzent:#5A7A52; --akzent-h:#4A6A43; --akzent-tief:#4A6A43; --auf-akzent:#FFFAF4; --akzent-hauch:#E2ECDC;
  --tinte:#3B2F27; --tinte-2:#6B5A4C; --leise:#7E6C5C; --zweit:#B8562F; --zweit-hauch:#F6E2D6; --auf-zweit:#FFFAF4; --nacht:#241D19;
  --schatten:rgba(80,50,20,.42);
  --anzeige:'Fraunces',Georgia,'Times New Roman',serif;
  --buch:'Lora',Georgia,serif;
  --text:'Nunito',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --etikett:'Nunito',ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,'SF Mono',Menlo,monospace;
  --breite:1160px; --kopf-h:67px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --creme:#1B1613; --papier:#241D19; --sand:#4A3E35; --linie:#3B312A; --flaeche:#2D2520;
    --akzent:#98BB8E; --akzent-h:#B0CCA6; --akzent-tief:#A9C89F; --auf-akzent:#1B1613; --akzent-hauch:#26331F;
    --tinte:#F2E7DA; --tinte-2:#CBBBA9; --leise:#A5927F; --zweit:#E0835B; --zweit-hauch:#43281C; --auf-zweit:#1B1613; --nacht:#120E0C; --schatten:rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --creme:#1B1613; --papier:#241D19; --sand:#4A3E35; --linie:#3B312A; --flaeche:#2D2520;
  --akzent:#98BB8E; --akzent-h:#B0CCA6; --akzent-tief:#A9C89F; --auf-akzent:#1B1613; --akzent-hauch:#26331F;
  --tinte:#F2E7DA; --tinte-2:#CBBBA9; --leise:#A5927F; --zweit:#E0835B; --zweit-hauch:#43281C; --auf-zweit:#1B1613; --nacht:#120E0C; --schatten:rgba(0,0,0,.7);
  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:800 21px/1 var(--text); letter-spacing:-.025em; color:var(--tinte)}
.marke svg{width:30px; height:30px}
.marke b{color:var(--akzent); font-weight:800}
.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)/.96 var(--anzeige); letter-spacing:-.025em; margin:0; text-wrap:balance; font-variation-settings:"opsz" 96}
.held h1 em{font-style:italic; font-weight:500; color:var(--akzent); font-variation-settings:"SOFT" 100, "WONK" 1}
.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(10,8,6,.78)}
.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:#EFE6D6; 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:#B9AC97}
.code__kopf button{font:600 12px/1 var(--mono); color:#EFE6D6; 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:#98BB8E} .code .s{color:var(--zweit)} .code .c{color:#8F836F}

/* 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(10,8,6,.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)/.94 var(--anzeige); letter-spacing:-.025em; margin:0; text-wrap:balance; font-variation-settings:"opsz" 96}
.aufmacher h1 em{font-style:italic; font-weight:500; 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:#F2E7DA; border-radius:28px; padding:48px; position:relative; overflow:hidden}
.band .augenbraue{color:#98BB8E}
.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:#C9BCA6; max-width:52ch; margin:0 0 24px}
.band .knopf--rand{color:#EFE6D6; 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:#5A7A52} .farbstreifen i:nth-child(2){background:#B8562F} .farbstreifen i:nth-child(3){background:#8E4A72} .farbstreifen i:nth-child(4){background:#B05A5E} .farbstreifen i:nth-child(5){background:#3D5A8F}
@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(--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(--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)}
}