@font-face{font-family:"Tektur";src:url(/assets/fonts/tektur.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Anek Latin";src:url(/assets/fonts/anek-latin.woff2) format("woff2");font-weight:100 800;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Victor Mono";src:url(/assets/fonts/victor-mono.woff2) format("woff2");font-weight:100 700;font-display:swap}

:root{
  --raster:#eef1f5;
  --blatt:#ffffff;
  --tusche:#14171c;
  --grau:#566070;
  --linie:#d6dce5;
  --pfad:#1f5fd1;
  --pfad-dunkel:#163f8c;
  --anker:#c2410c;
  --anker-hell:#ffe3d3;
  --code-grund:#181c24;
  --code-text:#e3e8f0;
  --breit:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--raster);color:var(--tusche);font:400 1.075rem/1.68 "Anek Latin",system-ui,sans-serif;font-stretch:96%}
img,svg{max-width:100%;height:auto}
a{color:var(--pfad);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--pfad-dunkel);text-decoration-thickness:2px}
h1,h2,h3{font-family:"Tektur",system-ui,sans-serif;line-height:1.18;letter-spacing:-.005em;color:var(--tusche)}
h1{font-size:clamp(1.85rem,4.2vw,2.75rem);font-weight:620;margin:.3em 0 .35em}
h2{font-size:clamp(1.3rem,2.6vw,1.65rem);font-weight:580;margin:2.1em 0 .55em}
h3{font-size:1.15rem;font-weight:560;margin:1.6em 0 .4em}
code,pre{font-family:"Victor Mono",ui-monospace,monospace;font-size:.86em}
p code,li code,td code{background:#e7ecf3;padding:.08em .32em;border-radius:3px;white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:.5em 1em;z-index:5}

/* Kopf: dunkle Werkzeugleiste + Lineal */
.defs{background:var(--tusche);color:#fff}
.defs-inner{max-width:var(--breit);margin:0 auto;padding:.7rem 20px;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.symbol-link{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font:600 1.2rem "Tektur",sans-serif}
.symbol-link b{font-weight:400;color:#9fb6e3}
.g-nav{display:flex;flex-wrap:wrap;gap:.15rem .25rem}
.g-nav a{color:#d9e0ea;text-decoration:none;padding:.3rem .6rem;border:1px solid transparent;font-size:.98rem}
.g-nav a:hover{border-color:#4a5568;color:#fff}
.g-nav a[aria-current]{border-color:var(--anker);color:#fff}
.ruler{height:14px;background:
  repeating-linear-gradient(90deg,#9aa3b2 0 1px,transparent 1px 10px) bottom/100% 5px no-repeat,
  repeating-linear-gradient(90deg,#c9d0db 0 1px,transparent 1px 50px) bottom/100% 11px no-repeat,
  #f8f9fb;border-bottom:1px solid var(--linie)}

/* Inhaltsflächen */
.canvas{display:block;padding:28px 0 64px}
.viewbox{max-width:var(--breit);margin:0 auto;padding:28px 20px 40px;background:var(--blatt);border:1px solid var(--linie)}
.viewbox--narrow{max-width:820px}
.viewbox--split{display:grid;grid-template-columns:1fr;gap:0;padding:0}
.viewbox--split>.g-article{padding:28px 20px 40px;min-width:0}
@media (min-width:1000px){
  .viewbox{padding:40px 56px 56px}
  .viewbox--split{grid-template-columns:270px 1fr;padding:0}
  .viewbox--split>.g-article{padding:40px 56px 56px;border-left:1px solid var(--linie)}
}
@media (max-width:640px){.canvas{padding:0 0 40px}.viewbox{border-left:0;border-right:0}}

.textpath{font-size:.9rem;color:var(--grau);display:flex;flex-wrap:wrap;gap:.35rem}
.textpath a{color:var(--grau)}
.textpath span[aria-hidden]{color:#aab2bf}
.g-meta{color:var(--grau);font-size:.92rem;margin:0 0 1.2rem}
.textpath+h1{margin-top:1.1rem}
.desc{font-size:1.2rem;line-height:1.6;color:#2b313b;max-width:44em}
.g-article>p,.g-article>ul,.g-article>ol,.viewbox>p,.viewbox>ul{max-width:44em}

/* Kapitelliste links */
.g-chapters{padding:24px 20px;border-bottom:1px solid var(--linie);background:#f8f9fb}
.g-chapters p{margin:0 0 .5rem;font:600 1rem "Tektur",sans-serif}
.g-chapters ol{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.g-chapters a{display:flex;gap:.6rem;text-decoration:none;color:var(--tusche);padding:.32rem .5rem;font-size:.95rem;line-height:1.35;border-left:3px solid transparent}
.g-chapters a span{font-family:"Victor Mono",monospace;font-size:.8rem;color:var(--grau);padding-top:.15em}
.g-chapters a:hover{background:#eaf0fb}
.g-chapters a[aria-current]{border-left-color:var(--anker);background:#fff;font-weight:600}
@media (max-width:999px){.g-chapters{order:2;border-bottom:0;border-top:1px solid var(--linie)}.g-chapters ol{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
@media (min-width:1000px){.g-chapters{border-bottom:0;position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto;padding:40px 20px}}

/* Beispiele: Zeichenfläche + Quelltext */
.foreignobject{margin:1.8rem 0;border:1px solid var(--linie);background:#fff;max-width:48em}
.pattern{padding:22px;display:flex;justify-content:center;align-items:center;
  background-color:#fbfcfd;
  background-image:linear-gradient(#e9edf3 1px,transparent 1px),linear-gradient(90deg,#e9edf3 1px,transparent 1px);
  background-size:20px 20px}
.pattern svg{display:block;max-height:340px}
.foreignobject pre{margin:0;padding:16px 18px;background:var(--code-grund);color:var(--code-text);overflow-x:auto;line-height:1.55;tab-size:2}
.foreignobject figcaption{padding:.6rem 18px;font-size:.92rem;color:var(--grau);border-top:1px solid var(--linie)}
pre.listing{background:var(--code-grund);color:var(--code-text);padding:16px 18px;overflow-x:auto;line-height:1.55;max-width:48em}

/* Fotos */
.image{margin:2rem 0;max-width:48em}
.image img{display:block;width:100%;height:auto;border:1px solid var(--linie)}
.image figcaption{font-size:.92rem;color:var(--grau);padding:.5rem 0 0}
.image small{display:block;font-size:.82rem;margin-top:.2rem}

/* Kasten */
.clip{max-width:44em;margin:1.8rem 0;padding:1rem 1.2rem;background:var(--anker-hell);border-left:4px solid var(--anker)}
.clip h3{margin:0 0 .3rem;font-size:1.05rem}
.clip p{margin:.3rem 0}
.clip ul{margin:.3rem 0;padding-left:1.2rem}

/* Tabellen */
.grid-table{width:100%;max-width:48em;border-collapse:collapse;margin:1.4rem 0;font-size:.97rem}
.grid-table th,.grid-table td{text-align:left;vertical-align:top;padding:.55rem .7rem;border-bottom:1px solid var(--linie)}
.grid-table th{font-weight:600;background:#f3f5f8}
.table-wrap{overflow-x:auto}

/* Kapitel-Listen */
.path-list{list-style:none;margin:0;padding:0;counter-reset:none}
.path-list li{border-top:1px solid var(--linie)}
.path-list li:last-child{border-bottom:1px solid var(--linie)}
.path-list a{display:grid;grid-template-columns:2.6rem 1fr;gap:.1rem .8rem;padding:.85rem .2rem;text-decoration:none;color:var(--tusche)}
.path-list a:hover{background:#f4f7fc}
.path-list a strong{font:560 1.12rem "Tektur",sans-serif;color:var(--pfad)}
.path-list a code{grid-column:2;color:var(--anker);font-size:.82rem}
.path-list a em{grid-column:2;font-style:normal;color:#3a4250;font-size:.98rem}
.marker{grid-row:span 3;font:500 .85rem "Victor Mono",monospace;color:#fff;background:var(--pfad);width:2.2rem;height:2.2rem;display:grid;place-items:center;align-self:start;margin-top:.15rem}
.path-list--compact li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1rem;padding:.45rem 0}
.path-list--compact a{display:flex;align-items:center;gap:.7rem;padding:0;font-weight:560;color:var(--pfad)}
.path-list--compact .marker{width:1.9rem;height:1.9rem;font-size:.78rem;margin:0}
.path-list--compact code{color:var(--anker);font-size:.8rem}
.g-part h2{margin-top:2.4rem}

/* Startseite */
.g-intro{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.g-intro{grid-template-columns:1.05fr .95fr}}
.g-intro .pattern{border:1px solid var(--linie)}
.g-intro h1{margin-top:0}
.g-columns{display:grid;gap:0 3rem}
@media (min-width:900px){.g-columns{grid-template-columns:1fr 1fr}}
.g-columns h2{margin-top:2rem}

/* Blättern + verwandte Kapitel */
.polyline{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0 0;max-width:48em}
.polyline a{display:block;padding:.8rem 1rem;border:1px solid var(--linie);text-decoration:none;font-weight:560}
.polyline a small{display:block;color:var(--grau);font-weight:400;font-size:.85rem}
.polyline a[rel=next]{text-align:right;grid-column:2}
.polyline a:hover{border-color:var(--pfad)}
@media (max-width:520px){.polyline{grid-template-columns:1fr}.polyline a[rel=next]{grid-column:1}}
.use-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-width:48em}
.use-card{display:flex;flex-direction:column;gap:.3rem;padding:1rem;border:1px solid var(--linie);text-decoration:none;color:var(--tusche);background:#fbfcfd}
.use-card:hover{border-color:var(--pfad)}
.use-card strong{font:560 1.05rem "Tektur",sans-serif;color:var(--pfad)}
.use-card span{font-size:.94rem;color:#3a4250}
.use-card .use-card-nr{font:500 .8rem "Victor Mono",monospace;color:var(--anker)}
.desc-sources ul{padding-left:1.2rem}

.g-lost{text-align:center}
.g-lost svg{margin:1rem auto 0;display:block}

/* Fuß */
.metadata{background:var(--tusche);color:#c4ccd8;font-size:.95rem}
.metadata-inner{max-width:var(--breit);margin:0 auto;padding:40px 20px;display:grid;gap:2rem}
@media (min-width:800px){.metadata-inner{grid-template-columns:2fr 1fr}}
.metadata a{color:#fff}
.metadata ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.metadata-name{display:flex;align-items:center;gap:.6rem;font:600 1.1rem "Tektur",sans-serif;color:#fff;margin-top:0}
.metadata-stand{color:#8c97a8;font-size:.88rem}