/* ============================================================
   aureliasteiner.com — gemeinsames Stylesheet der statischen Site.
   Design-System identisch mit steiner-chat/static/css/app.css:
   warme Atelier-Palette, Archivo + Inconsolata + Georgia,
   Hairlines statt Schatten, 2px-Radien, Mono-Kicker.
   Buch-Akzent pro Seite über --acc (Default: Karamell).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Inconsolata:wght@400;600&display=swap');

:root{
  --bg:#f5efe6; --surface:#fbf8f3; --surface2:#efe6d8; --line:#e2d6c4;
  --fg:#2b2520; --muted:#6f6154; --faint:#9a8a77;
  --acc:#c8a47e;
  --acc-hv:#A97E4F; --acc-bz:#B08D57; --acc-ca:#E8862A; --acc-ts:#D97B3F;
  --wide:1200px; --content:760px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#201b17; --surface:#2a241f; --surface2:#332c25; --line:#413830;
    --fg:#efe8df; --muted:#c7b9aa; --faint:#8f8272;
  }
}
/* ---- Video-Tonwert-Scrim: EIN System für alle .bgart-Hintergründe ----
   Jede Seite setzt nur --scrim-light / --scrim-dark (Flächen-Tönung in %).
   Da --bg im Theme kippt, HEBT der Scrim dunkle Videos im Hellmodus an und
   DÄMPFT helle Videos im Dunkelmodus — ein Knopf, beide Richtungen richtig.
   Ausnahmen (Dunkelkammer-Rotlicht, Fiebernacht-Gate) setzen keine Werte bzw.
   haben einen eigenen, später deklarierten ::after und bleiben unberührt. */
:root{ --scrim: var(--scrim-light, 0%); }
@media (prefers-color-scheme: dark){ :root{ --scrim: var(--scrim-dark, 0%); } }
.bgart::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 40%,
      color-mix(in srgb, var(--bg) calc(var(--scrim) * 1.7), transparent) 100%),
    color-mix(in srgb, var(--bg) var(--scrim), transparent);
}
/* Mobil (Hochkant): die BG-Videos sind Hochformat (~2:3), aber das Handy ist noch
   schmaler -> bei width:100vw bliebe unten ein Rand. Auf volle Höhe skalieren; das
   Video wird dadurch breiter als der Screen, und die Parallax-JS schaltet
   automatisch auf horizontales Panning (überläuft die Breite statt die Höhe).
   !important, weil jede Seite ihr .bgart video inline mit width:100vw setzt. */
@media (max-width:760px) and (orientation:portrait){
  .bgart video{ width:auto!important; height:100dvh!important; min-height:100dvh!important }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:"Archivo",sans-serif;
  font-size:clamp(0.875rem,0.875rem + ((1vw - 0.2rem) * 0.417),1.0625rem);line-height:1.6}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-0.01em;line-height:1.15}
a{color:var(--fg)}
img{max-width:100%}
::selection{background:var(--acc);color:var(--bg)}

.label{font-family:"Inconsolata",monospace;font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg)}
.label b{color:var(--acc)}

.btn{display:inline-block;background:var(--fg);color:var(--bg);border:1px solid var(--fg);
  border-radius:2px;font-weight:500;font-family:inherit;font-size:.95rem;text-decoration:none;
  padding:.7em 1.4em;cursor:pointer}
.btn:hover{background:var(--muted);border-color:var(--muted)}
.btn.ghost{background:transparent;color:var(--fg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg)}
.btn.acc{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.acc:hover{filter:brightness(.92)}

/* ---------- Globale Navigation (identisch zur Chat-App) ---------- */
.gnav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border-bottom:1px solid var(--line);padding:10px 18px;position:sticky;top:0;z-index:80;
  font-family:"Inconsolata",monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase}
.gnav{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gnav a{color:var(--muted);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.gnav a:hover{color:var(--fg)}
.gnav .brand{color:var(--fg);font-weight:700;letter-spacing:.18em}
.gnav .brand .st{color:#8a6b56}
.gnav .books{display:flex;gap:18px;flex-wrap:wrap}
.gnav .books:not(.pages-top){margin-left:auto;margin-right:auto}
.gnav .sq{width:8px;height:8px;flex:none;border-radius:50%}
.gnav a.on{color:var(--fg)}

main{max-width:var(--wide);margin:0 auto;padding:min(3rem,6vw) min(2rem,5vw)}
main.narrow{max-width:var(--content)}

.sec-head{margin-bottom:min(3rem,6vw)}
.sec-head .label{display:block;margin-bottom:.9rem}
.sec-head h1{max-width:18em;font-size:clamp(1.85rem,4vw,3rem)}
.sec-head p{margin-top:1rem;color:var(--fg);max-width:44em}
.sec-head.center{text-align:center}
.sec-head.center h1,.sec-head.center p{margin-left:auto;margin-right:auto}

/* ---------- Panels: flache Karten mit Hairline + Akzentkante ---------- */
.panel{position:relative;background:var(--surface);border:1px solid var(--line);padding:1.4rem 1.5rem}
.panel.acc-top::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:var(--acc)}
.grid-hairline{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid-hairline>*{background:var(--surface);border:0}

.kicker{display:block;font-family:"Inconsolata",monospace;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc);margin-bottom:.55rem}
.mono{font-family:"Inconsolata",monospace}

blockquote.q{position:relative;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--acc);padding:1.1rem 1.3rem;font-family:Georgia,serif;font-size:1rem}
blockquote.q .c{display:block;margin-top:.7rem;font-family:"Inconsolata",monospace;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ---------- Footer (identisch zur Chat-App) ---------- */
footer.site{padding:min(2rem,5vw);text-align:center;border-top:1px solid var(--line);margin-top:min(3rem,6vw)}
footer.site p{font-size:.85rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
footer.site .foot-books{display:flex;gap:1.8rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.1rem;
  font-family:"Inconsolata",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
footer.site .foot-books a{color:var(--muted);text-decoration:none}
footer.site .foot-books a:hover{color:var(--fg)}

:focus-visible{outline:2px solid var(--acc);outline-offset:2px}