/* nexbrand-Seite: Unterseiten, nach dem Vorbild der nexlore-Seite. Farben und Schriften wie die Seiten von nexlore und nexcanvas, Akzent Kobalt. */
:root{
  --creme:#F3EDE3; --papier:#FFFBF4; --sand:#E6DAC6; --linie:#E3D6C2; --flaeche:#EDE5D8;
  --kobalt:#1849C9; --kobalt-h:#163CA8; --kobalt-tief:#1849C9; --auf-kobalt:#FFFFFF; --kobalt-hauch:#E1E8F8;
  --tinte:#1F1A14; --tinte-2:#4A4034; --leise:#7A6E5E; --zweit:#FFE14A; --zweit-hauch:#FDF3C4; --auf-zweit:#2A2200; --nacht:#1C1712;
  --magenta:#9D17B0;
  --schatten:rgba(60,40,20,.45);
  --anzeige:'Bricolage Grotesque','Arial Rounded MT Bold',ui-sans-serif,system-ui,sans-serif;
  --text:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --breite:1160px; --kopf-h:67px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --creme:#120F0C; --papier:#1E1915; --sand:#332A22; --linie:#2C241D; --flaeche:#231D18;
    --kobalt:#5B8FFF; --kobalt-h:#7AA5FF; --kobalt-tief:#7AA5FF; --auf-kobalt:#020A1F; --kobalt-hauch:#1C2236; --zweit-hauch:#3A3020;
    --magenta:#E879F9; --tinte:#EFE6D6; --tinte-2:#C9BCA6; --leise:#9A8C77; --nacht:#0B0907; --schatten:rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --creme:#120F0C; --papier:#1E1915; --sand:#332A22; --linie:#2C241D; --flaeche:#231D18;
  --kobalt:#5B8FFF; --kobalt-h:#7AA5FF; --kobalt-tief:#7AA5FF; --auf-kobalt:#020A1F; --kobalt-hauch:#1C2236; --zweit-hauch:#3A3020;
  --magenta:#E879F9; --tinte:#EFE6D6; --tinte-2:#C9BCA6; --leise:#9A8C77; --nacht:#0B0907; --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(--kobalt); 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(--kobalt); color:var(--auf-kobalt); 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:600 12px/1 var(--mono); letter-spacing:.04em}
.knopf--voll{background:var(--kobalt); color:var(--auf-kobalt)}
.knopf--voll:hover{background:var(--kobalt-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 22px/1 var(--anzeige); letter-spacing:-.03em}
.marke svg{width:30px; height:30px}
.marke b{color:var(--kobalt); 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:grid; grid-template-columns:minmax(0,1fr) 260px; gap:40px; align-items:end}
.kicker{display:inline-flex; align-items:center; gap:8px; font:600 12px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--kobalt-tief); margin:0 0 16px}
.held h1{font:800 clamp(40px,5.2vw,72px)/.96 var(--anzeige); letter-spacing:-.045em; margin:0; text-wrap:balance; font-variation-settings:"opsz" 96}
.held h1 em{font-style:normal; color:var(--kobalt)}
.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}
.pavo-oben{position:relative; height:290px; width:230px; justify-self:center; transform-origin:50% -120px; animation:pendel 5s ease-in-out infinite}
.pavo-oben::before{content:""; position:absolute; left:50%; top:-120px; width:1.5px; height:124px; background:color-mix(in srgb, var(--kobalt) 70%, transparent)}
.pavo-oben .schaukel{position:absolute; left:50%; top:0; width:210px; height:196px; margin-left:-105px}
.pavo-oben .schaukel svg{display:block; width:100%; height:100%}
.pavo-oben .blase{position:absolute; left:50%; transform:translateX(-50%); top:206px; margin:0; text-align:center; background:var(--papier); border-radius:16px; padding:10px 14px; font:500 14px/1.35 var(--text); width:max-content; max-width:210px; box-shadow:0 14px 30px -16px var(--schatten)}
.pavo-oben .blase::after{content:""; position:absolute; left:calc(50% - 6px); top:-6px; width:12px; height:12px; background:var(--papier); transform:rotate(45deg); border-radius:2px}
@keyframes pendel{0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)}}

/* 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(--kobalt); color:var(--auf-kobalt)}

/* Abschnitte */
.abschnitt{padding:88px 0 8px}
.abschnitt>.innen>h2,.titel2{font:800 clamp(30px,3.6vw,48px)/1.02 var(--anzeige); letter-spacing:-.035em; 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:800 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(--kobalt)}
.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(--kobalt)} .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:500 12px/1 var(--mono); 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:500 14px/1.4 var(--mono)}

/* Pavos Tipp */
.tipp{display:flex; gap:14px; align-items:flex-start; margin-top:22px; background:var(--kobalt-hauch); border-radius:18px; padding:14px 16px}
.tipp svg{flex:none; width:46px; height:43px; margin-top:2px}
.tipp p{margin:0; font-size:15px; line-height:1.5; color:var(--tinte)}
.tipp b{display:block; font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--kobalt-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(--kobalt-hauch); color:var(--kobalt-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:800 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(--kobalt)}

/* 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__pavo{width:64px; height:60px; margin-top:8px}
.fuss h2{font:600 12px/1 var(--mono); 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(--kobalt-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}
  .pavo-oben{display:none}
  .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){ .pavo-oben{animation:none} .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:#9DBBFF} .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:600 12px/1.2 var(--mono); 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:800 22px/1.15 var(--anzeige); letter-spacing:-.02em; margin:0 0 14px}
.vergleich h3 svg{width:26px; height:26px; flex:none; color:var(--kobalt-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(--kobalt)}
.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(--kobalt-hauch); color:var(--kobalt-tief); font:800 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(--kobalt-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:800 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:600 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--leise)}
}
.zwei>.code,.zwei>.schritte{margin-top: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:600 11px/1 var(--mono); 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:500 12px/1.6 var(--mono); color:var(--leise); min-width:18px}
.anl-leiste a:hover{background:var(--papier); color:var(--tinte)}
.anl-leiste a[aria-current="page"]{background:var(--kobalt-hauch); color:var(--tinte); font-weight:600}
.anl-leiste a[aria-current="page"] span{color:var(--kobalt-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(--kobalt-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:800 clamp(34px,4vw,52px)/1 var(--anzeige); letter-spacing:-.04em; margin:0 0 16px; text-wrap:balance}
.anl-text h2{font:800 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:600 11px/1 var(--mono); 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(--kobalt); 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:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--leise); margin-bottom:6px}
.blaettern b{font:800 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:800 clamp(28px,3.2vw,40px)/1.05 var(--anzeige); letter-spacing:-.035em; 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(--kobalt-hauch); color:var(--kobalt-tief); font:800 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:800 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:500 12px/1 var(--mono); 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:800 clamp(38px,4.3vw,76px)/.94 var(--anzeige); letter-spacing:-.045em; margin:0; text-wrap:balance; font-variation-settings:"opsz" 96}
.aufmacher h1 em{font-style:normal; color:var(--kobalt)}
.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:500 13px/1 var(--mono); 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(--kobalt); 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:600 12px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--kobalt-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:800 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:500 12px/1.6 var(--mono); 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(--kobalt-tief); text-decoration:none}
.sec-mehr a::after{content:" →"}
.band{margin-top:96px; background:var(--nacht); color:#EFE6D6; border-radius:28px; padding:48px; position:relative; overflow:hidden}
.band .augenbraue{color:#9DBBFF}
.band h2{font:800 clamp(30px,3.6vw,48px)/1.02 var(--anzeige); letter-spacing:-.035em; 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}
.band__pavo{position:absolute; right:40px; bottom:-6px; width:230px; height:215px}
.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:#E255F5} .farbstreifen i:nth-child(2){background:#FFE14A} .farbstreifen i:nth-child(3){background:#2F7BFF} .farbstreifen i:nth-child(4){background:#9DBBFF}
@media (max-width:1020px){ .drei-wege{grid-template-columns:1fr} .band__pavo{width:150px; height:140px; right:16px} }
@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}
}