/* ================================================================
   Sacha Prelle — Werkarchiv
   Gemeinsames Stylesheet für Startseite, Musik und Kunst
   ================================================================ */

/* ---------- Schriften (lokal, funktioniert auch offline) ---------- */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300;font-display:swap;src:url("media/fonts/newsreader-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url("media/fonts/newsreader-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("media/fonts/newsreader-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;src:url("media/fonts/newsreader-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300;font-display:swap;src:url("media/fonts/newsreader-latin-300-italic.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("media/fonts/newsreader-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:400;font-display:swap;src:url("media/fonts/karla-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:500;font-display:swap;src:url("media/fonts/karla-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:700;font-display:swap;src:url("media/fonts/karla-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Karla";font-style:italic;font-weight:400;font-display:swap;src:url("media/fonts/karla-latin-400-italic.woff2") format("woff2")}

/* ---------- Tokens: Licht (warmes Gelb) ---------- */
:root{
  --bg:#F7F0DA; --surface:#FCF8EC; --surface-2:#EFE5C8; --sunk:#EADFBE;
  --ink:#1A1813; --ink-2:#54503F; --ink-3:#726950;
  --line:#E4DABC; --line-2:#CBBE97;
  --blue:#2A34A0; --green:#377A1D; --red:#BE2A10;
  /* zwei weitere Techniken, gleicher Kontrastanspruch wie die drei Ringfarben */
  --violet:#6B2E96; --ochre:#7E520C;
  --shadow:0 1px 2px rgba(70,58,24,.07), 0 8px 28px rgba(70,58,24,.10);
  --serif:"Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:"Karla", "Helvetica Neue", Arial, system-ui, sans-serif;
  --rail:230px;
  --pad:clamp(1.25rem, 4vw, 3.5rem);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101112; --surface:#191A1C; --surface-2:#232527; --sunk:#0A0B0C;
    --ink:#E9E8E3; --ink-2:#A6A9AA; --ink-3:#75797B;
    --line:#2B2D2F; --line-2:#3A3D3F;
    --blue:#7C87FF; --green:#6FD149; --red:#FF6047;
  --violet:#B98BFF; --ochre:#DDA531;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#101112; --surface:#191A1C; --surface-2:#232527; --sunk:#0A0B0C;
  --ink:#E9E8E3; --ink-2:#A6A9AA; --ink-3:#75797B;
  --line:#2B2D2F; --line-2:#3A3D3F;
  --blue:#7C87FF; --green:#6FD149; --red:#FF6047;
  --violet:#B98BFF; --ochre:#DDA531;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.45);
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:2px}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:400; text-wrap:balance; letter-spacing:-.012em}
p{margin:0}

.eyebrow{
  font-family:var(--sans); font-size:.6875rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- Ringe (Motiv vom Cover) ---------- */
.ring{width:11px;height:11px;border-radius:50%;border:2.5px solid currentColor;flex:none}
.ring-blue{color:var(--blue)} .ring-green{color:var(--green)} .ring-red{color:var(--red)}
.ring-violet{color:var(--violet)} .ring-ochre{color:var(--ochre)}

/* ---------- Layout ---------- */
.shell{display:flex; align-items:flex-start; min-height:100vh}
.rail{
  position:sticky; top:0; width:var(--rail); flex:none; height:100vh;
  padding:var(--pad) 0 1.5rem 0;
  display:flex; flex-direction:column; gap:2rem;
  border-right:1px solid var(--line); background:var(--bg); z-index:40;
}
.rail-inner{padding:0 1.5rem; display:flex; flex-direction:column; gap:2rem; height:100%}
.wordmark{display:block; text-decoration:none}
.wordmark .n{font-family:var(--serif); font-size:1.5rem; line-height:1.1; display:block}
.wordmark .r{display:flex; gap:5px; margin-top:.6rem}
.nav{display:flex; flex-direction:column; gap:.15rem; margin-top:-.5rem}
.nav a{
  display:flex; align-items:baseline; gap:.6rem; text-decoration:none;
  padding:.42rem 0; color:var(--ink-2); font-size:.9375rem; transition:color .18s;
}
.nav a .idx{font-size:.6875rem; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:1.1em}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink); font-weight:600}
.nav a.on .idx{color:var(--red)}
.rail-foot{margin-top:auto; display:flex; flex-direction:column; gap:.9rem}
.theme-btn{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--ink-3);
  letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.theme-btn:hover{color:var(--ink)}
.rail-note{font-size:.6875rem; color:var(--ink-3); line-height:1.5}

main{flex:1; min-width:0}

.page-head{
  padding:clamp(2.5rem,6vw,4.5rem) var(--pad) 0;
  display:flex; flex-direction:column; gap:.75rem;
}
.page-head h1{font-size:clamp(2.25rem,5vw,3.75rem); line-height:1.02; font-weight:300}
.page-head .lede{
  font-family:var(--serif); font-size:clamp(1.0625rem,1.6vw,1.25rem); color:var(--ink-2);
  max-width:54ch; line-height:1.55;
}
/* mehrere Absätze als Einleitung — etwas kleiner als .lede, damit lange Texte tragen */
.page-text{
  display:flex; flex-direction:column; gap:.9rem; max-width:62ch; margin-top:.25rem;
  font-family:var(--serif); font-size:clamp(1rem,1.35vw,1.125rem); line-height:1.62; color:var(--ink-2);
}
.sec-rule{display:flex; align-items:center; gap:.75rem; margin:1.5rem 0 0}
.sec-rule .bar{flex:1; height:1px; background:var(--line)}

/* ---------- Hero (nur Startseite) ---------- */
.hero{position:relative; min-height:min(88vh,820px); display:flex; align-items:flex-end;
  background:var(--sunk); overflow:hidden; border-bottom:1px solid var(--line)}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92}
.hero-veil{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,9,.52) 0%, rgba(8,8,9,.22) 26%, rgba(8,8,9,.40) 55%, rgba(8,8,9,.88) 100%)}
.hero-body{position:relative; padding:var(--pad); padding-bottom:clamp(2rem,5vw,3.5rem); width:100%; color:#F2F1EC;
  text-shadow:0 1px 2px rgba(8,8,9,.55), 0 2px 24px rgba(8,8,9,.45)}
.hero-body .eyebrow{color:rgba(242,241,236,.78)}
.hero h1{
  font-size:clamp(3.25rem,10.5vw,8.5rem); line-height:.86; margin:.5rem 0 0;
  font-weight:300; letter-spacing:-.03em;
}
.hero h1 em{font-style:italic; font-weight:300}
.hero-text{
  margin-top:1.5rem; max-width:56ch; display:flex; flex-direction:column; gap:.85rem;
  font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.1875rem);
  line-height:1.55; color:rgba(242,241,236,.88);
}
.hero-text a{
  color:#fff; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.45); transition:text-decoration-color .18s;
}
.hero-text a:hover{text-decoration-color:#fff}
.hero-credit{position:absolute; right:var(--pad); top:var(--pad); font-size:.6875rem;
  color:rgba(242,241,236,.85); letter-spacing:.05em; text-align:right; max-width:15rem; line-height:1.55;
  background:rgba(8,8,9,.42); padding:.45rem .7rem; border-radius:2px;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}

/* ---------- Einstiege (Startseite) ---------- */
.entries{padding:clamp(2.5rem,5vw,4rem) var(--pad) 0; display:grid; gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.entries{grid-template-columns:1fr}}
.entry{
  display:block; text-decoration:none; position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:3px; background:var(--surface);
  transition:border-color .22s, transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .3s;
}
.entry:hover{border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--shadow)}
.entry .shot{aspect-ratio:2/1; overflow:hidden; background:var(--surface-2)}
.entry .shot img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.entry:hover .shot img{transform:scale(1.04)}
.entry .body{padding:clamp(1.1rem,2vw,1.6rem); display:flex; flex-direction:column; gap:.5rem}
.entry .body h2{font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.05; display:flex; align-items:center; gap:.7rem}
.entry .body p{font-family:var(--serif); color:var(--ink-2); font-size:1.0625rem; line-height:1.5; max-width:44ch}
.entry .body .go{
  margin-top:.35rem; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:.5rem;
}
.entry:hover .body .go{color:var(--ink)}

/* ---------- Galerie ---------- */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; padding:1.5rem var(--pad) 0}
.chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.42rem .95rem; border:1px solid var(--line-2); border-radius:999px;
  font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--ink-2);
  transition:background .18s, color .18s, border-color .18s;
}
.chip:hover{border-color:var(--ink-3); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip .count{font-size:.6875rem; opacity:.6; font-variant-numeric:tabular-nums}

.gal{padding:1.75rem var(--pad) 0; columns:4; column-gap:1.15rem}
@media (max-width:1500px){.gal{columns:3}}
@media (max-width:980px){.gal{columns:2}}
@media (max-width:520px){.gal{columns:1}}
.tile{break-inside:avoid; margin:0 0 1.15rem; width:100%; display:block; text-align:left;
  position:relative; background:none; border-radius:3px}
.tile figure{margin:0; position:relative; overflow:hidden; background:var(--surface-2); border-radius:3px}
.tile img{width:100%; height:auto; transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.tile:hover img{transform:scale(1.028)}
.tile figcaption{
  display:flex; flex-direction:column; gap:.15rem; padding:.6rem .1rem 0;
  font-size:.8125rem; color:var(--ink-2);
}
.tile figcaption .cap-top{display:flex; align-items:baseline; gap:.6rem}
.tile figcaption .t{font-family:var(--serif); font-size:.95rem; color:var(--ink); line-height:1.3}
.tile figcaption .y{margin-left:auto; font-size:.75rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.tile figcaption .cap-sub{font-size:.75rem; color:var(--ink-3); line-height:1.45}
.tile .tag{
  position:absolute; left:.55rem; top:.55rem; width:9px; height:9px; border-radius:50%;
  border:2px solid currentColor; opacity:0; transition:opacity .2s; background:rgba(255,255,255,.25);
}
.tile:hover .tag{opacity:1}

/* ---------- Lightbox ---------- */
.lb{position:fixed; inset:0; z-index:100; background:rgba(9,9,10,.96); display:none;
  padding:clamp(1rem,3vw,2.5rem); flex-direction:column; gap:1rem}
.lb.open{display:flex}
.lb-stage{flex:1; display:flex; align-items:center; justify-content:center; min-height:0}
.lb-stage img{max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-bar{display:flex; align-items:center; gap:1.25rem; color:#E9E8E3; flex-wrap:wrap}
.lb-bar .meta{display:flex; flex-direction:column; gap:.15rem; min-width:0; max-width:70ch}
.lb-bar .meta .t{font-family:var(--serif); font-size:1.25rem; line-height:1.2}
.lb-bar .meta .s{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(233,232,227,.55)}
.lb-bar .meta .n{
  margin-top:.5rem; font-family:var(--serif); font-size:.9375rem; line-height:1.5;
  color:rgba(233,232,227,.82); white-space:pre-line;
}
@media (max-width:700px){ .lb-bar .meta .n{display:none} }
.lb-nav{margin-left:auto; display:flex; gap:.5rem; align-items:center}
.lb-nav button{
  width:40px; height:40px; border:1px solid rgba(233,232,227,.28); border-radius:50%;
  color:#E9E8E3; display:grid; place-items:center; transition:background .18s, border-color .18s;
}
.lb-nav button:hover{background:rgba(233,232,227,.12); border-color:rgba(233,232,227,.5)}
.lb-count{font-size:.8125rem; color:rgba(233,232,227,.55); font-variant-numeric:tabular-nums; margin-right:.35rem}

/* ---------- Musik ---------- */
.albums{padding:2rem var(--pad) 0; display:flex; flex-direction:column; gap:clamp(3rem,5vw,4.5rem)}
.album{display:grid; grid-template-columns:minmax(230px,300px) minmax(0,1fr); gap:clamp(1.5rem,3.5vw,3rem); align-items:start}
@media (max-width:820px){.album{grid-template-columns:1fr}}
.album-art{position:sticky; top:2rem; display:flex; flex-direction:column; gap:1rem}
@media (max-width:820px){.album-art{position:static}}
.album-art img{border-radius:2px; box-shadow:var(--shadow); background:var(--surface-2)}
img.lbx{cursor:zoom-in; transition:opacity .2s}
img.lbx:hover{opacity:.88}
.album-art .placeholder{
  aspect-ratio:1; border-radius:2px; background:var(--surface); border:1px solid var(--line);
  display:grid; place-items:center; gap:.9rem; padding:1.5rem; text-align:center;
}
.album-art .placeholder .rings{display:flex; gap:.75rem}
.album-art .placeholder .rings i{width:38px;height:38px;border-radius:50%;border:4px solid currentColor;display:block}
.album-meta{font-size:.8125rem; color:var(--ink-3); line-height:1.6}
.album-head{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.5rem}
.album-head h2{font-size:clamp(1.75rem,3vw,2.4rem); line-height:1.05}
.album-head .by{font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.album-note{font-family:var(--serif); color:var(--ink-2); font-size:1.0625rem; max-width:56ch; line-height:1.55; margin-top:.5rem}
.album-note + .album-note{margin-top:.75rem}
.album-actions{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.1rem}
.transport{display:flex; align-items:center; gap:.45rem}
.tp{
  width:34px; height:34px; flex:none; border-radius:50%;
  border:1px solid var(--line-2); color:var(--ink-2);
  display:grid; place-items:center;
  transition:border-color .18s, color .18s, background .18s, opacity .18s;
}
.tp svg{width:12px; height:12px; display:block}
.tp:hover:not(:disabled){border-color:var(--ink); color:var(--ink); background:var(--surface)}
.tp:disabled{opacity:.32; cursor:default}
.playall{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.55rem 1.1rem; border-radius:999px; border:1px solid var(--ink);
  background:var(--ink); color:var(--bg);
  font-size:.8125rem; font-weight:700; letter-spacing:.04em;
  transition:background .18s, border-color .18s, color .18s;
}
.playall:hover{background:transparent; color:var(--ink)}
.playall .pa-icon{font-size:.6875rem; line-height:1; display:block}
.playall[data-state="playing"]{background:transparent; color:var(--green); border-color:var(--green)}
.playall[data-state="playing"]:hover{background:color-mix(in srgb, var(--green) 12%, transparent)}
.pa-count{font-size:.75rem; color:var(--ink-3); letter-spacing:.02em}

.track.playing{background:color-mix(in srgb, var(--green) 7%, transparent)}
.track.playing .track-title{color:var(--green)}
.track.playing .track-no{color:var(--green)}

.tracks{border-top:1px solid var(--line); margin-top:1.5rem}
.track{border-bottom:1px solid var(--line)}
.track-row{
  width:100%; display:flex; align-items:center; gap:1rem; padding:.85rem .25rem;
  text-align:left; transition:background .16s;
}
.track-row:hover{background:var(--surface)}
.track-no{font-size:.75rem; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:1.6em}
.track-title{font-family:var(--serif); font-size:1.125rem; line-height:1.3; min-width:0}
.track-flags{display:flex; gap:.4rem; align-items:center; margin-left:.35rem}
.flag{
  font-size:.625rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.14rem .42rem; border-radius:2px; border:1px solid var(--line-2); color:var(--ink-3);
}
.flag.audio{color:var(--green); border-color:color-mix(in srgb, var(--green) 45%, transparent)}
.flag.book{color:var(--blue); border-color:color-mix(in srgb, var(--blue) 45%, transparent)}
.flag.text{color:var(--ink-3); border-color:var(--line-2)}
.flag.inst{color:var(--ink-3); border-color:var(--line-2); font-style:italic; letter-spacing:.06em}
.track-dur{margin-left:auto; font-size:.8125rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.track-caret{color:var(--ink-3); transition:transform .22s; flex:none}
.track[open] .track-caret{transform:rotate(90deg)}
.track-panel{display:none; padding:.25rem .25rem 1.75rem; gap:1.5rem; flex-direction:column}
.track[open] .track-panel{display:flex}
audio{width:100%; height:38px}
.lyrics{
  font-family:var(--serif); font-size:1.0625rem; line-height:1.62; color:var(--ink);
  columns:2; column-gap:2.5rem; max-width:76ch;
}
/* Strophen bleiben in einer Spalte zusammen; der Abstand kommt vom Rand,
   nicht von einer Leerzeile — sonst stünde oben in Spalte zwei eine Lücke. */
.lyrics .stanza{
  white-space:pre-line; margin:0 0 1.15rem;
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
}
/* eingerückte Zeilen im Original (Refrain, Antwortzeile) */
.lyrics .stanza .in{margin-left:1.9em}
.lyrics .stanza:first-child{margin-top:0}
.lyrics .stanza:last-child{margin-bottom:0}
@media (max-width:760px){.lyrics{columns:1}}
.lyric-part + .lyric-part{margin-top:2.25rem}
.lyric-part-head{
  font-family:var(--sans); font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:.75rem;
}
.spread{border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--surface-2)}
.spread img{width:100%}
.panel-label{display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem}
.panel-label .bar{flex:1; height:1px; background:var(--line)}
.credit-line{font-size:.8125rem; color:var(--ink-3); font-style:italic; font-family:var(--serif)}

.filebox{
  margin-top:1.5rem; display:flex; gap:.85rem; align-items:flex-start;
  padding:1rem 1.15rem; border:1px dashed var(--line-2); border-radius:3px;
  font-size:.875rem; color:var(--ink-2); line-height:1.55; max-width:60ch;
}
.filebox code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.8125rem;
  background:var(--surface-2); padding:.1rem .35rem; border-radius:2px; color:var(--ink)}

/* ---------- Rechtstexte ---------- */
.legal{padding:2rem var(--pad) 0; max-width:74ch; display:flex; flex-direction:column; gap:2.5rem}
.legal section{display:flex; flex-direction:column; gap:.75rem}
.legal h2{font-size:1.5rem; line-height:1.2}
.legal h3{font-size:1.0625rem; font-family:var(--sans); font-weight:700; letter-spacing:.01em; margin-top:.5rem}
.legal p, .legal li{font-size:.9375rem; line-height:1.7; color:var(--ink-2)}
.legal p strong, .legal li strong{color:var(--ink); font-weight:600}
.legal ul{margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.4rem}
.legal .addr{font-family:var(--serif); font-size:1.0625rem; line-height:1.7; color:var(--ink)}
.legal a, footer .fn a{
  color:var(--ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; text-decoration-color:var(--line-2); transition:text-decoration-color .18s;
}
.legal a:hover, footer .fn a:hover{text-decoration-color:currentColor}
.legal code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.8125rem;
  background:var(--surface-2); padding:.1rem .35rem; border-radius:2px; color:var(--ink)}
.legal .hr{height:1px; background:var(--line)}
.fill{
  background:color-mix(in srgb, var(--red) 12%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--red) 55%, transparent);
  padding:.05em .3em; border-radius:2px; color:var(--ink); font-style:normal;
}
/* ---------- Zeitzeugin ---------- */
.aufnahme, .kapitel-block{padding:0 var(--pad); max-width:calc(74ch + 2 * var(--pad)); margin-top:2.5rem}
.aufnahme audio{margin-top:.25rem}
.dl{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1rem}
.dl-btn{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  padding:.6rem 1.15rem; border-radius:999px; border:1px solid var(--ink);
  background:var(--ink); color:var(--bg);
  font-size:.8125rem; font-weight:700; letter-spacing:.04em;
  transition:background .18s, color .18s;
}
.dl-btn:hover{background:transparent; color:var(--ink)}
.dl-btn svg{width:14px; height:14px; display:block}
.dl-meta{font-size:.75rem; color:var(--ink-3); letter-spacing:.02em}

.chapters{list-style:none; padding:0; margin:.75rem 0 0; border-top:1px solid var(--line)}
.chapters li{display:flex; gap:1.25rem; padding:.7rem .25rem; border-bottom:1px solid var(--line); align-items:baseline}
.chapters li .tc{font-size:.8125rem; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:4.5rem; flex:none}
.chapters li .ct{font-family:var(--serif); font-size:1.0625rem; line-height:1.4}
.kapitel-hinweis{margin-top:1rem; font-size:.8125rem; color:var(--ink-3)}

/* ---------- Projektideen ---------- */
.ideen{
  list-style:none; margin:2.5rem 0 0; padding:0 var(--pad);
  max-width:calc(68ch + 2 * var(--pad));
  display:flex; flex-direction:column;
}
.ideen li{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.35rem 0; border-top:1px solid var(--line);
}
.ideen li:last-child{border-bottom:1px solid var(--line)}
.ideen li .ring{margin-top:.55rem}
.ideen h2{font-size:1.25rem; line-height:1.3; margin-bottom:.35rem}
.ideen p{font-family:var(--serif); font-size:1.0625rem; line-height:1.55; color:var(--ink-2)}

/* Platzhalter für Bereiche, die noch aufgebaut werden */
.soon{
  margin:2.5rem var(--pad) 0; padding:clamp(2rem,4vw,3rem);
  border:1px dashed var(--line-2); border-radius:3px; max-width:52ch;
  display:flex; gap:1rem; align-items:flex-start; background:var(--surface);
}
.soon p{font-family:var(--serif); font-size:1.125rem; line-height:1.55; color:var(--ink-2)}
.soon .ring{margin-top:.5rem}

.notice{
  display:flex; gap:.85rem; align-items:flex-start;
  padding:1rem 1.15rem; border:1px dashed var(--line-2); border-radius:3px;
  font-size:.875rem; color:var(--ink-2); line-height:1.6;
}

footer{margin-top:clamp(4rem,8vw,7rem); border-top:1px solid var(--line); padding:2.5rem var(--pad) 3.5rem;
  display:flex; flex-wrap:wrap; gap:1.75rem 3rem; align-items:flex-start}
footer .fm{font-family:var(--serif); font-size:1.5rem; margin-bottom:.5rem}
footer .fn{font-size:.8125rem; color:var(--ink-3); max-width:52ch; line-height:1.65}
footer .fn + .fn{margin-top:.5rem}
footer .fcol{display:flex; flex-direction:column}
footer .flinks{margin-left:auto; display:flex; flex-direction:column; gap:.9rem; align-items:flex-end}
footer .flinks a{
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none; transition:color .18s;
}
footer .flinks a:hover{color:var(--ink)}
footer .fr{display:flex; gap:6px}
@media (max-width:700px){
  footer .flinks{margin-left:0; align-items:flex-start}
}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .shell{display:block}
  .rail{position:static; width:auto; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:1.25rem 0}
  .rail-inner{flex-direction:row; align-items:center; gap:1.25rem; flex-wrap:wrap; padding:0 var(--pad)}
  .nav{flex-direction:row; flex-wrap:wrap; gap:.25rem 1.1rem; margin-top:0}
  .nav a{padding:.2rem 0}
  .nav a .idx{display:none}
  .rail-foot{margin-top:0; margin-left:auto; flex-direction:row; align-items:center; gap:1rem}
  .rail-note{display:none}
  .wordmark .r{margin-top:.35rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}