/* nexlore-Seite: Unterseiten. Farben und Schriften wie der 3D-Film auf der Startseite. */
:root{
  --creme:#F3EDE3; --papier:#FFFBF4; --sand:#E6DAC6; --linie:#E3D6C2; --flaeche:#EDE5D8;
  --tuerkis:#14B8A6; --tuerkis-h:#2DD4BF; --tuerkis-tief:#0F766E; --auf-tuerkis:#06201C; --tuerkis-hauch:#DDF3EE;
  --tinte:#1F1A14; --tinte-2:#4A4034; --leise:#7A6E5E; --butter:#F6BE45; --nacht:#1C1712;
  --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;
    --tuerkis:#2DD4BF; --tuerkis-h:#5EEAD4; --tuerkis-tief:#5EEAD4; --auf-tuerkis:#06201C; --tuerkis-hauch:#15302C;
    --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;
  --tuerkis:#2DD4BF; --tuerkis-h:#5EEAD4; --tuerkis-tief:#5EEAD4; --auf-tuerkis:#06201C; --tuerkis-hauch:#15302C;
  --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(--tuerkis); 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(--tuerkis); color:var(--auf-tuerkis); 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(--tuerkis); color:var(--auf-tuerkis)}
.knopf--voll:hover{background:var(--tuerkis-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}
.leiste{display:flex; align-items:center; gap:2px; margin-right:auto}
.leiste>a,.mehr>summary{display:block; 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(--tuerkis-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(--tuerkis)}
.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}
.lore-haengt{position:relative; height:280px; width:230px; justify-self:center}
.lore-haengt::before{content:""; position:absolute; left:50%; top:-80px; width:1.5px; height:170px; background:color-mix(in srgb, var(--tuerkis) 70%, transparent); transform-origin:top}
.lore-haengt{transform-origin:50% -80px; animation:pendel 5s ease-in-out infinite}
.lore-haengt svg{position:absolute; left:50%; top:86px; width:120px; height:105px; margin-left:-60px}
.lore-haengt .blase{position:absolute; left:50%; transform:translateX(-50%); top:205px; 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)}
.lore-haengt .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(--tuerkis); color:var(--auf-tuerkis)}

/* 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(--tuerkis)}
.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:#E8806A} .fenster__leiste i:nth-child(2){background:var(--butter)} .fenster__leiste i:nth-child(3){background:var(--tuerkis)}
.fenster__leiste span{margin-left:10px; font:500 12px/1 var(--mono); color:var(--leise)}
.fenster img{width:100%; height:auto; cursor:zoom-in}
.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)}

/* Lores Tipp */
.tipp{display:flex; gap:14px; align-items:flex-start; margin-top:22px; background:var(--tuerkis-hauch); border-radius:18px; padding:14px 16px}
.tipp svg{flex:none; width:44px; height:38px; 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(--tuerkis-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(--tuerkis-hauch); color:var(--tuerkis-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(--tuerkis)}

/* 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__lore{width:56px; height:49px; 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(--tuerkis-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}
  .lore-haengt{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){ .lore-haengt{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:#5EEAD4} .code .s{color:#F6BE45} .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(--tuerkis-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(--tuerkis)}
.vergleich .anders li::before{background:var(--butter)}
.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{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(--tuerkis-hauch); color:var(--tuerkis-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(--tuerkis-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(--tuerkis-hauch); color:var(--tinte); font-weight:600}
.anl-leiste a[aria-current="page"] span{color:var(--tuerkis-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(--tuerkis-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}

/* So schreibst du es, so sieht es aus */
.beispiel{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:22px 0 8px; border-radius:18px; overflow:hidden; box-shadow:0 0 0 1px color-mix(in srgb, var(--linie) 80%, transparent)}
.beispiel>div{min-width:0}
.beispiel__kopf{font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:10px 16px}
.beispiel__roh{background:var(--nacht); color:#EFE6D6}
.beispiel__roh .beispiel__kopf{color:#B9AC97; background:rgba(255,255,255,.06)}
.beispiel__roh pre{margin:0; padding:14px 16px 18px; font:500 13.5px/1.65 var(--mono); overflow-x:auto; white-space:pre}
.beispiel__fertig{background:var(--papier)}
.beispiel__fertig .beispiel__kopf{color:var(--tuerkis-tief); background:var(--flaeche)}
.beispiel__fertig .gezeigt{padding:14px 18px 18px; font-size:15.5px; color:var(--tinte)}
.gezeigt ul.aufgaben{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.gezeigt ul.aufgaben li{display:flex; gap:10px; align-items:flex-start; color:var(--tinte)}
.gezeigt ul.aufgaben i{flex:none; width:17px; height:17px; margin-top:3px; border-radius:5px; box-shadow:inset 0 0 0 1.6px var(--leise)}
.gezeigt ul.aufgaben li.fertig i{background:var(--tuerkis); box-shadow:none; position:relative}
.gezeigt ul.aufgaben li.fertig i::after{content:""; position:absolute; left:5.5px; top:2.5px; width:4px; height:8px; border:solid var(--auf-tuerkis); border-width:0 2px 2px 0; transform:rotate(45deg)}
.gezeigt ul.aufgaben li.fertig b{text-decoration:line-through; color:var(--leise); font-weight:400}
.gezeigt ul.aufgaben b{font-weight:400}
.gezeigt ul.aufgaben small{display:inline-block; margin-left:4px; font-size:13px; color:var(--leise)}

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

/* Wie nexlore es zeigt: die rechte Hälfte der Beispiele */
.gezeigt>*:first-child{margin-top:0}
.gezeigt>*:last-child{margin-bottom:0}
.gezeigt p{margin:0 0 10px; color:var(--tinte)}
.gezeigt h1,.gezeigt h2,.gezeigt h3,.gezeigt h4,.gezeigt [class^="gz-h"]{font-family:var(--text); color:var(--tinte); letter-spacing:-.01em; margin:14px 0 6px; line-height:1.25}
.gezeigt h1,.gezeigt .gz-h1{font-size:26px; font-weight:800} .gezeigt h2,.gezeigt .gz-h2{font-size:21px; font-weight:750} .gezeigt h3,.gezeigt .gz-h3{font-size:17.5px; font-weight:700} .gezeigt h4,.gezeigt .gz-h4{font-size:15.5px; font-weight:700}
.gezeigt a,.gezeigt .wl{color:var(--tuerkis-tief); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--tuerkis) 45%, transparent); text-underline-offset:3px}
.gezeigt .wl{text-decoration:none}
.gezeigt .wl--fehlt{opacity:.6; text-decoration:underline dashed; text-underline-offset:3px}
.gezeigt ul:not(.aufgaben),.gezeigt ol{margin:0 0 10px; padding-left:22px; color:var(--tinte)}
.gezeigt li{margin:2px 0; color:var(--tinte)}
.gezeigt blockquote{margin:0 0 10px; padding:2px 0 2px 14px; border-left:3px solid var(--sand); color:var(--tinte-2)}
.gezeigt hr{border:0; border-top:1px solid var(--linie); margin:14px 0}
.gezeigt pre{margin:0 0 10px; background:var(--flaeche); border-radius:10px; padding:10px 12px; font:500 13px/1.55 var(--mono); overflow-x:auto}
.gezeigt pre code{background:none; padding:0}
.gezeigt table{border-collapse:collapse; margin:0 0 10px; font-size:14.5px}
.gezeigt th,.gezeigt td{border:1px solid var(--linie); padding:6px 10px; text-align:left; color:var(--tinte)}
.gezeigt th{background:var(--flaeche); font-weight:600}
.gezeigt mark{background:color-mix(in srgb, var(--butter) 55%, transparent); color:inherit; border-radius:3px; padding:0 2px}
.gezeigt .tag{display:inline-block; font-size:13px; line-height:1; padding:4px 8px; border-radius:999px; background:var(--tuerkis-hauch); color:var(--tuerkis-tief); text-decoration:none}
.gezeigt .formel{font-family:'Cambria Math','STIX Two Math','Latin Modern Math',Georgia,serif; font-style:italic; font-size:1.08em}
.gezeigt .formel--block{display:block; text-align:center; margin:6px 0 10px; font-size:1.25em}
.gezeigt sup a{text-decoration:none; font-size:.8em}
.gezeigt .fussnoten{border-top:1px solid var(--linie); margin-top:12px; padding-top:8px; font-size:13.5px}
.gezeigt .fussnoten ol{margin:0}
.gezeigt .leise{color:var(--leise)}
.gezeigt img{border-radius:8px; max-width:100%}
.gezeigt .diagramm{display:block; max-width:100%; height:auto; margin:4px auto 6px}
.gezeigt .diagramm rect{fill:var(--tuerkis-hauch); stroke:var(--tuerkis-tief); stroke-width:1.4}
.gezeigt .diagramm text{fill:var(--tinte); font:500 13px var(--text)}
.gezeigt .diagramm path{stroke:var(--tinte-2); stroke-width:1.4; fill:none}
.gezeigt .diagramm .spitze{fill:var(--tinte-2); stroke:none}
.gezeigt .einbettung{margin:0 0 10px; border-left:3px solid var(--tuerkis); background:var(--creme); border-radius:0 10px 10px 0; padding:8px 12px}
.gezeigt .einbettung__titel{font:600 12px/1 var(--mono); color:var(--leise); margin-bottom:6px}
.gezeigt .eigenschaften{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0 0 12px; font-size:14px; align-items:center}
.gezeigt .eigenschaften dt{color:var(--leise); display:flex; gap:6px; align-items:center}
.gezeigt .eigenschaften dd{margin:0; color:var(--tinte); display:flex; flex-wrap:wrap; gap:4px}

/* Hinweiskästen wie in Obsidian */
.callout{--farbe:#448AFF; margin:0 0 10px; border-radius:10px; padding:10px 14px; background:color-mix(in srgb, var(--farbe) 11%, transparent); border-left:3px solid var(--farbe)}
.callout__titel{display:flex; gap:8px; align-items:center; font-weight:650; color:var(--farbe); margin-bottom:4px}
.callout__titel svg{width:17px; height:17px; flex:none}
.callout p{margin:0; color:var(--tinte)}
.callout--zu .callout__titel{margin:0}
.callout--zu .callout__titel::after{content:""; margin-left:auto; width:7px; height:7px; border:solid currentColor; border-width:0 1.8px 1.8px 0; transform:rotate(-45deg)}
.callout--tip{--farbe:#00BFA5} .callout--warning{--farbe:#FF9100} .callout--danger{--farbe:#FF5252} .callout--success{--farbe:#00C853} .callout--question{--farbe:#FF9100} .callout--quote{--farbe:#9E9E9E} .callout--example{--farbe:#7C4DFF} .callout--info{--farbe:#00B8D4}
.gezeigt .bruch{display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; font-size:.85em; line-height:1.15}
.gezeigt .bruch span:first-child{border-bottom:1px solid currentColor; padding:0 3px}
/* 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 .beispiel,.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}
}