/* Gemeinsames Design: Startseite, Gedanken, Impressum */
@font-face{font-family:"Geist";src:url(fonts/geist.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#090E1C; --raise:#0E1530; --ink:#EEF1F8; --muted:#9AA4BE; --line:rgba(238,241,248,.12);
  --accent:#8FB0FF; --on-accent:#0A1020; --amber:#FFC857;
  --page:#090E1C; --thread:#FFE29A;
  --hdr:rgba(9,14,28,.82); --dot:238,241,248; --net:143,176,255; --scroll:#26304f;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --max:1160px; --gutter:clamp(1.25rem,5vw,3rem);
  --ease:cubic-bezier(.16,1,.3,1);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F8FC; --raise:#EAEFFB; --ink:#0E1530; --muted:#545E7E; --line:rgba(14,21,48,.14);
  --accent:#2447C9; --on-accent:#FFFFFF; --amber:#E0A000;
  --page:#F7F8FC; --thread:#9A6400;
  --hdr:rgba(247,248,252,.86); --dot:14,21,48; --net:36,71,201; --scroll:#c3cbe3;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:var(--scroll) transparent}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--thread)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 50% 38% at 88% 14%,rgba(143,176,255,.11),transparent 70%),radial-gradient(ellipse 46% 40% at 6% 58%,rgba(181,140,255,.09),transparent 70%),radial-gradient(ellipse 52% 40% at 78% 96%,rgba(92,225,230,.08),transparent 70%)}
:root[data-theme="light"] body::before{opacity:.45}
.thread{position:fixed;left:clamp(5px,1.3vw,18px);top:72px;bottom:26px;width:1px;background:rgba(255,226,154,.16);z-index:25;pointer-events:none}
:root[data-theme="light"] .thread{background:rgba(154,100,0,.2)}
.thread .fill{position:absolute;inset:0;background:var(--thread);opacity:.55;transform-origin:top;transform:scaleY(var(--p,0))}
.thread .dot{position:absolute;left:-4px;top:0;width:9px;height:9px;border-radius:50%;background:var(--thread);box-shadow:0 0 14px 3px rgba(255,226,154,.5);transform:translateY(calc(var(--p,0) * (100svh - 107px)))}
p{max-width:36em;text-wrap:pretty}
h1,h2,h3{font-weight:400;text-wrap:balance}

/* header */
header{position:fixed;inset:0 0 auto 0;z-index:30;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
header.scrolled{background:var(--hdr);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1.5rem}
.brand svg{color:var(--accent)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--mono);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase}
nav{display:flex;align-items:center;gap:clamp(1rem,2.6vw,2.2rem)}
nav a{text-decoration:none;color:var(--muted);transition:color .25s}
nav a:hover{color:var(--ink)}
nav a.cta{color:var(--ink);border:1px solid var(--ink);padding:.55rem .95rem;border-radius:3px;transition:background .25s,color .25s}
nav a.cta:hover{background:var(--ink);color:var(--bg)}
.theme{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:border-color .25s,transform .2s}
.theme:hover{border-color:var(--ink)}
.theme:active{transform:scale(.94)}
.theme svg{grid-area:1/1;opacity:0;transform:rotate(-40deg) scale(.7);transition:opacity .3s,transform .5s var(--ease)}
:root[data-mode="auto"] .theme .i-auto,:root[data-mode="light"] .theme .i-sun,:root[data-mode="dark"] .theme .i-moon{opacity:1;transform:none}

main,footer{position:relative;z-index:1}
nav a[aria-current="page"]{color:var(--ink)}
.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:.2rem .8rem;font-size:.82rem;color:var(--muted);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.4rem;border-radius:999px;text-decoration:none;font-weight:500;font-size:.95rem;transition:background .25s,color .25s,border-color .25s,transform .2s}
.pill.main{background:var(--accent);color:var(--on-accent)}
.pill.main:hover{background:var(--ink)}
.pill.ghost{border:1px solid var(--line);color:var(--ink)}
.pill.ghost:hover{border-color:var(--ink)}
.pill:active{transform:scale(.98)}

/* Gedanken: Übersicht */
.page-head{padding:clamp(7.5rem,15vw,11rem) 0 clamp(2.4rem,6vw,4rem)}
.page-head .mono{color:var(--accent)}
.page-head h1{margin-top:1.4rem;font-size:clamp(2.5rem,6.4vw,5rem);line-height:1.03;letter-spacing:-.04em;max-width:11em}
.page-head .lead{margin-top:1.6rem;color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:36em}
.g-list{border-top:1px solid var(--line);margin-bottom:clamp(4rem,9vw,7rem)}
.g-row{display:grid;grid-template-columns:8.5rem minmax(0,1.5fr) minmax(0,.6fr);gap:.8rem clamp(1.5rem,4vw,3.5rem);padding:2rem 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:baseline}
.g-row .when{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;color:var(--accent)}
.g-row h2{font-size:clamp(1.4rem,2.5vw,2rem);letter-spacing:-.025em;line-height:1.2;transition:color .3s}
.g-row p{margin-top:.6rem;color:var(--muted);max-width:34em}
.g-row .side{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.g-row .go{font-size:.9rem;color:var(--muted);transition:color .3s,transform .4s var(--ease)}
.g-row:hover h2,.g-row:hover .go{color:var(--thread)}
.g-row:hover .go{transform:translateX(4px)}

/* Gedanken: Artikel */
.g-wrap{max-width:46rem;margin:0 auto;padding:0 var(--gutter)}
.g-head{padding:clamp(7.5rem,14vw,10rem) 0 2rem}
.g-back{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .25s}
.g-back:hover{color:var(--ink)}
.g-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.1rem;margin-top:2rem}
.g-meta time{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--accent)}
.g-head h1{margin-top:1.2rem;font-size:clamp(2.1rem,5.2vw,3.6rem);line-height:1.07;letter-spacing:-.035em}
.g-head .lead{margin-top:1.3rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.35;color:var(--thread);max-width:28em}
.g-figure{max-width:var(--max);margin:1rem auto clamp(2.4rem,6vw,4rem);padding:0 var(--gutter)}
.g-figure img{width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--raise)}
.g-body p{max-width:none;font-size:1.12rem;line-height:1.8}
.g-body p+p{margin-top:1.3rem}
.g-body h2{margin:3rem 0 1rem;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.025em;line-height:1.2}
.g-body blockquote{margin:2.6rem 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,3vw,2rem);line-height:1.38;color:var(--thread)}
.g-body a{text-underline-offset:.25em;text-decoration-color:var(--line);transition:text-decoration-color .25s}
.g-body a:hover{text-decoration-color:var(--accent)}
.g-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;margin:clamp(3rem,7vw,5rem) auto clamp(4rem,9vw,7rem);padding-top:2rem;border-top:1px solid var(--line)}

/* Impressum */
.legal-sec{padding:2rem 0;border-top:1px solid var(--line)}
.legal-sec h2{font-size:.78rem;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;font-weight:400}
.legal-sec h3{font-size:1.05rem;font-weight:500;margin:1.4rem 0 .4rem}
.legal-sec p{max-width:none;line-height:1.75}
.legal-sec p+p{margin-top:.9rem}
.legal-sec dl{display:grid;grid-template-columns:max-content 1fr;gap:.55rem 2rem;line-height:1.7}
.legal-sec dt{color:var(--muted);font-size:.92rem}
.legal-sec dd{margin:0}
.legal-sec a{text-underline-offset:.25em;text-decoration-color:var(--line)}
.legal-sec a:hover{text-decoration-color:var(--accent)}
.stand{font-size:.85rem;color:var(--muted);margin:2rem 0 2rem}

footer{padding:1.4rem 0 2.6rem;font-size:.86rem;color:var(--muted);border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem}
footer a{text-decoration:none}footer a:hover{color:var(--ink)}

@media (max-width:900px){
  body{font-size:1rem}
  nav a:not(.cta){display:none}
  .g-row{grid-template-columns:1fr;gap:.4rem}
  .g-row .side{flex-direction:row;align-items:center;margin-top:.8rem}
  .g-figure img{aspect-ratio:4/3}
  .legal-sec dl{grid-template-columns:1fr;gap:.1rem}
  .legal-sec dd{margin-bottom:.7rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.g-row .go,.g-row h2{transition:none}}