:root{
  --bg:#090D15; --panel:#0d131e; --cyan:#45E6D4; --violet:#9A7BFF;
  --bright:#EAF6F4; --dim:#73818F; --line:rgba(69,230,212,.16); --line2:rgba(154,123,255,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--bright);
  font-family:'Spectral',Georgia,serif;font-size:19px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--violet)}
.mono{font-family:'Space Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
/* HUD frame */
.frame{position:fixed;inset:14px;border:1px solid var(--line);pointer-events:none;z-index:50}
.frame::before,.frame::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--cyan);opacity:.7}
.frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.corner{position:fixed;width:26px;height:26px;border:2px solid var(--cyan);opacity:.7;z-index:50;pointer-events:none}
.corner.tr{top:13px;right:13px;border-left:none;border-bottom:none}
.corner.bl{bottom:13px;left:13px;border-right:none;border-top:none}
/* progress */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--violet));z-index:60;transition:width .1s}
/* header */
header{position:relative;z-index:20;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;
  padding:26px clamp(20px,6vw,80px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px}
.brand .emblem{width:34px;height:34px;flex:none}
.brand b{font-family:'Jost',sans-serif;font-weight:600;letter-spacing:.16em;font-size:14px}
.brand small{display:block;color:var(--dim);font-size:10px;letter-spacing:.22em}
.lang{font-size:11px;color:var(--dim);line-height:1.9}
.lang a{color:var(--cyan);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .lang .off{color:var(--dim);opacity:.5}
/* Sprachwahl als Aufklappliste ohne Skript; die Liste hängt am Kopf, nicht am Knopf, damit sie auf dem Handy nie aus dem Bild ragt */
details.lang{position:static}
details.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);color:var(--cyan);font-size:11px;user-select:none}
details.lang summary::-webkit-details-marker{display:none}
details.lang summary::after{content:"";width:0;height:0;border-inline:4px solid transparent;border-top:5px solid currentColor;margin-inline-start:2px}
details.lang[open] summary{border-color:var(--cyan)}
details.lang[open] summary::after{border-top:none;border-bottom:5px solid currentColor}
details.lang summary:focus-visible{outline:1px solid var(--violet);outline-offset:2px}
details.lang ul{position:absolute;top:calc(100% - 12px);inset-inline-end:clamp(20px,6vw,80px);width:min(360px,calc(100% - 2*clamp(20px,6vw,80px)));
  margin:0;padding:8px;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
  background:var(--panel);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45);z-index:30}
details.lang li a,details.lang li span{display:block;padding:7px 10px;font-family:'Jost',sans-serif;font-size:15px;line-height:1.3;
  letter-spacing:0;text-transform:none;color:var(--bright);text-decoration:none;overflow-wrap:anywhere}
details.lang li a:hover,details.lang li a:focus-visible{color:var(--cyan);background:rgba(69,230,212,.07)}
details.lang li span[aria-current]{color:var(--cyan);border-inline-start:2px solid var(--cyan)}
/* 中文 und 日本語 aus je 1 KB Teilschrift (webschriften.py sprachnamen), sonst Kästchen auf Rechnern ohne CJK-Schrift */
details.lang [lang="zh-Hans"]{font-family:'Jost','SOLIS Sprachname SC',sans-serif}
details.lang [lang="ja"]{font-family:'Jost','SOLIS Sprachname JP',sans-serif}
details.lang [lang="ko"]{font-family:'Jost','SOLIS Sprachname KR',sans-serif}
details.lang [lang="vi"]{font-family:'SOLIS Sprachname VI','Jost',sans-serif}
details.lang [lang="hi"]{font-family:'SOLIS Sprachname HI','Jost',sans-serif}
details.lang [lang="bn"]{font-family:'SOLIS Sprachname BN','Jost',sans-serif}
main{position:relative;z-index:10;max-width:760px;margin:0 auto;padding:0 clamp(20px,6vw,40px) 120px}
/* hero */
.hero{padding:clamp(60px,12vh,140px) 0 40px;text-align:center}
.hero .kick{color:var(--cyan);font-size:12px;margin-bottom:26px}
.hero h1{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(40px,8vw,76px);
  line-height:1.02;letter-spacing:.01em;margin:0 0 8px}
.hero h1 b{font-weight:600}
.hero .sub{font-family:'Jost',sans-serif;font-weight:300;color:var(--dim);font-size:clamp(15px,2.4vw,19px);letter-spacing:.14em;text-transform:uppercase}
.hero .lead{max-width:600px;margin:34px auto 0;color:#c6d3d1;font-size:20px}
.orbit-big{width:120px;height:120px;margin:0 auto 34px;display:block}
/* pillars */
.pillars{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:70px 0 20px}
.pillar{background:var(--panel);padding:22px 24px}
.pillar .n{color:var(--violet);font-size:11px}
.pillar h2,.pillar h3{font-family:'Jost',sans-serif;font-weight:500;font-size:17px;margin:8px 0 6px;color:var(--bright);letter-spacing:.02em}
.pillar p{margin:0;color:var(--dim);font-size:15.5px;line-height:1.6}
/* toc */
.toc{margin:64px 0 0}
.toc .h{color:var(--cyan);font-size:12px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:c}
.toc li{border-bottom:1px solid rgba(115,129,143,.14)}
.toc a{display:flex;align-items:baseline;gap:18px;padding:15px 6px;color:var(--bright);transition:.15s}
.toc a:hover{background:rgba(69,230,212,.05);padding-inline-start:14px;color:var(--cyan)}
.toc .num{font-family:'Space Mono',monospace;color:var(--violet);font-size:13px;min-width:30px}
.toc .t{font-family:'Jost',sans-serif;font-weight:400;font-size:18px;letter-spacing:.01em}
/* chapter */
.chead{padding:clamp(50px,9vh,90px) 0 18px;border-bottom:1px solid var(--line);margin-bottom:8px}
.chead .cn{color:var(--cyan);font-size:12px;letter-spacing:.28em}
.chead h1{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(30px,5.4vw,48px);line-height:1.08;margin:16px 0 0;letter-spacing:.01em}
.prose h2{font-family:'Jost',sans-serif;font-weight:500;font-size:25px;letter-spacing:.01em;margin:52px 0 4px;color:var(--bright)}
.prose h2::before{content:"";display:block;width:38px;height:2px;background:var(--cyan);margin-bottom:18px;opacity:.8}
.prose h3{font-family:'Space Mono',monospace;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin:40px 0 2px}
.prose p{margin:0 0 22px}
.prose p:first-of-type{margin-top:14px}
/* Szene mit Mara am Kapitelanfang (Kapitel 2 bis 13), abgesetzt wie in den PDFs */
.prose p.scene{font-style:italic;color:#c6d3d1;border-inline-start:2px solid var(--line);padding-inline-start:20px;margin:14px 0 40px}
:lang(zh) .prose p.scene,:lang(ja) .prose p.scene,:lang(ko) .prose p.scene,:lang(ar) .prose p.scene,:lang(fa) .prose p.scene,:lang(hi) .prose p.scene,:lang(bn) .prose p.scene,:lang(ur) .prose p.scene{font-style:normal}
/* nav */
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:80px;padding-top:26px;border-top:1px solid var(--line)}
.pager a{flex:1;padding:18px 20px;border:1px solid var(--line);background:var(--panel);transition:.15s}
.pager a:hover{border-color:var(--cyan);background:rgba(69,230,212,.05)}
.pager .lbl{font-family:'Space Mono',monospace;font-size:10px;color:var(--dim);letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:6px}
.pager .tt{font-family:'Jost',sans-serif;color:var(--bright);font-size:15px}
.pager .next{text-align:end}
.pager .spacer{border:none;background:none;pointer-events:none}
.backhome{display:inline-block;margin:34px 0 0;font-size:11px;color:var(--dim)}
footer{border-top:1px solid var(--line);margin-top:80px;padding:34px clamp(20px,6vw,80px);
  color:var(--dim);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;position:relative;z-index:10}
@media(min-width:680px){.pillars{grid-template-columns:1fr 1fr}}

.downloads{margin:64px 0 0}
.downloads .h{color:var(--cyan);font-size:12px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dl-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:680px){.dl-grid{grid-template-columns:1fr 1fr}}
.dl{background:var(--panel);padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;transition:.15s}
.dl:hover{background:rgba(69,230,212,.05)}
.dl .meta{min-width:0}
.dl .t,.dl .s{display:block}
.dl .t{font-family:'Jost',sans-serif;font-size:16px;color:var(--bright);letter-spacing:.01em}
.dl .s{font-family:'Space Mono',monospace;font-size:10px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.dl .btn{font-family:'Space Mono',monospace;font-size:11px;color:var(--cyan);border:1px solid var(--line);padding:8px 14px;white-space:nowrap;letter-spacing:.1em}
.dl:hover .btn{border-color:var(--cyan)}
.dl.soon{opacity:.55}.dl.soon .btn{color:var(--dim)}

/* share */
.share{margin:64px 0 0}
.share .h{color:var(--cyan);font-size:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.share p{color:var(--dim);font-size:16px;line-height:1.6;margin:0 0 18px}
.share-row{display:flex;flex-wrap:wrap;gap:8px}
.sh{font-size:11px;color:var(--cyan);background:var(--panel);border:1px solid var(--line);padding:9px 14px;
  cursor:pointer;line-height:1.2;min-height:40px;transition:.15s}
.sh:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(69,230,212,.05)}
.sh[hidden]{display:none}
.pager+.share,.share+.backhome{margin-top:40px}
.share .lic-note{font-size:14px;margin:22px 0 0}
footer .lic a{color:var(--dim)} footer .lic a:hover{color:var(--cyan)}
footer .legal a{color:var(--dim)} footer .legal a:hover{color:var(--cyan)}
.hero .tr-note{max-width:600px;margin:22px auto 0;color:var(--dim);font-size:14px}
.hero .tr-note a{color:var(--cyan)}

/* Arabisch (dir="rtl"): Die verbundene Schrift verträgt keine Sperrung, sie risse die Buchstaben auseinander.
   Die Ränder oben stehen als logische Eigenschaften und spiegeln sich selbst, hier nur, was davon nicht erfasst ist. */
:is(:lang(ar),:lang(fa),:lang(ur)) :is(.mono,.brand small,.hero h1,.hero .sub,.pillar h2,.toc .t,.chead .cn,.chead h1,.prose h2,.prose h3,
  .pager .lbl,.dl .t,.dl .s,.dl .btn){letter-spacing:0}
:is(:lang(hi),:lang(bn)) :is(.mono,.brand small,.hero h1,.hero .sub,.pillar h2,.toc .t,.chead .cn,.chead h1,.prose h2,.prose h3,
  .pager .lbl,.dl .t,.dl .s,.dl .btn){letter-spacing:0}
[dir=rtl] #prog{left:auto;right:0;background:linear-gradient(270deg,var(--cyan),var(--violet))}
/* Space Mono liefert auch das Leerzeichen, und das ist festbreit: zwischen arabischen Wörtern klafften Lücken.
   Jost hat ein proportionales, die arabischen Zeichen kommen in beiden Fällen aus Noto Kufi (fonts.css). */
:is(:lang(ar),:lang(fa),:lang(ur)) :is(.mono,.prose h3,.pager .lbl,.toc .num,.dl .s,.dl .btn){font-family:'Jost',sans-serif}
:is(:lang(hi),:lang(bn)) :is(.mono,.prose h3,.pager .lbl,.toc .num,.dl .s,.dl .btn){font-family:'Jost',sans-serif}
/* Arabische Glyphen wirken bei gleicher Größe kleiner (Persisch nutzt dieselben Schriften) */
:is(:lang(ar),:lang(fa),:lang(ur)) .prose{font-size:20px}
:is(:lang(ar),:lang(fa),:lang(ur)) .prose h3{font-size:16px}
:is(:lang(ar),:lang(fa),:lang(ur)) :is(.hero .kick,.chead .cn,.toc .h,.downloads .h,.share .h){font-size:14px}
:is(:lang(ar),:lang(fa),:lang(ur)) :is(.brand small,.pager .lbl){font-size:12px}
/* Urdu: Nastaliq (SOLIS Nastaliq, fonts.css, lädt nur hier) für Fließtext und Titel, die kleinen Beschriftungen
   bleiben in Noto Kufi. Nastaliq steigt weit über und unter die Zeile, daher mehr Zeilenabstand. */
body:lang(ur){font-family:'SOLIS Nastaliq','Spectral',Georgia,serif;line-height:2.15}
:lang(ur) :is(.hero h1,.hero .sub,.pillar h2,.pillar h3,.toc .t,.chead h1,.prose h2,.pager .tt,.dl .t){font-family:'SOLIS Nastaliq','Jost',sans-serif}
:lang(ur) :is(.hero h1,.chead h1){line-height:1.75}
:lang(ur) :is(.prose h2,.pillar h2,.pillar h3,.toc .t,.pager .tt,.dl .t){line-height:1.9}
:lang(ur) :is(.pillar p,.share p){line-height:2}
/* Vietnamesisch: Jost fehlen die gestapelten Akzente (ạ, ế, Ơ, Ư), ein Mischsatz fiele in jedem Wort auf. League Spartan
   (Futura-Nachbau wie Jost, fonts.css) übernimmt hier alles, was sonst Jost setzt. Ausnahme der Markenschriftzug SOLIS. */
:lang(vi) :is(.hero h1,.hero .sub,.pillar h2,.pillar h3,.toc .t,.chead h1,.prose h2,.pager .tt,.dl .t){font-family:'League Spartan',sans-serif}