/* Klarheit — stylesheet
   Static Hugging Face Space. No external resources, no CDN. */

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-weight:400;font-size:18px;line-height:1.75;
  color:var(--ink);background:var(--bg);
  overflow-x:hidden;
}

/* === DESIGN TOKENS === */
:root{
  --bg:#000000;
  --bg2:#0A0A0A;
  --ink:#FFFFFF;
  --muted:#8A8A8A;
  --rule:#2A2A2A;
  --accent:#00FF88;
  --accent2:#FF4444;
  --mw:860px;
}

/* === TYPOGRAPHY === */
h1{font-weight:300;font-size:clamp(2.5rem,6vw,4rem);letter-spacing:-0.03em;line-height:1.1}
h2{font-weight:300;font-size:clamp(1.9rem,4vw,2.5rem);letter-spacing:-0.02em;line-height:1.2;margin-bottom:2rem}
h3{font-weight:500;font-size:1.35rem;letter-spacing:-0.01em;line-height:1.3;margin:2rem 0 1rem;color:var(--accent)}
p{margin-bottom:1.25rem}
strong{font-weight:600}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
a:hover{border-bottom-color:var(--accent)}
sup a{color:var(--accent);text-decoration:none;font-size:.75em;font-weight:600;border:none}
sup a:hover{text-decoration:underline}
code,.mono{font-family:'SF Mono','JetBrains Mono',ui-monospace,monospace;font-size:.9rem;background:var(--bg2);padding:.15em .4em;border-radius:3px;color:var(--accent)}
mark.key{background:none;color:var(--accent);font-weight:600}
mark.key-red{color:var(--accent2)}
blockquote{border-left:2px solid var(--accent);padding:.5rem 0 .5rem 1.5rem;margin:1.5rem 0;color:var(--muted);font-style:italic}
dl{margin:0}
dt{font-weight:600;color:var(--ink);margin-top:.75rem;font-size:.9rem}
dt:first-child{margin-top:0}
dd{color:var(--muted);font-size:.95rem}

/* === SKIP LINK === */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#000;padding:.6rem 1rem;font-weight:600;border-radius:0 0 4px 0}
.skip-link:focus{left:0;border:none}

/* === FOCUS === */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* === HEADER (THESIS BANNER) === */
.site-header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.86);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.site-header .thesis{margin:0;padding:.7rem 1.25rem;text-align:center;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* === PROGRESS RAIL === */
.progress-rail{position:fixed;top:50%;right:6px;transform:translateY(-50%);z-index:40;height:38vh;width:4px}
.rail-track{position:relative;height:100%;width:100%;background:var(--rule);border-radius:2px;overflow:hidden}
.rail-fill{position:absolute;top:0;left:0;width:100%;height:0;background:var(--accent);border-radius:2px;transition:height .1s linear}

/* === LAYOUT === */
.container{max-width:var(--mw);margin:0 auto;padding:0 2rem}
.section{position:relative}
.section.full-black{background:var(--bg)}
.section.bg2{background:var(--bg2)}
.content-section{padding:120px 0}
.content-section.tech{padding:80px 0}

/* reveal-on-scroll: only armed when JS adds .reveal-ready */
body.reveal-ready .section{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
body.reveal-ready .section.visible{opacity:1;transform:translateY(0)}

/* === HERO === */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100vh}
.hero h1{font-size:clamp(3rem,8vw,6rem);margin-bottom:.5rem}
.hero .subtitle{font-weight:300;font-size:.9rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.hook{margin-top:3rem;font-size:clamp(1.4rem,3vw,2rem);font-weight:300;color:var(--ink)}
.hook-sub{margin-top:.75rem;font-size:.95rem;color:var(--muted)}
.scroll-cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:var(--muted);border:none}
.scroll-cue svg{width:24px;height:24px;display:block;animation:bounce 2s ease infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* === STAT METRICS === */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin:3rem 0}
.stat{text-align:center}
.stat-value{font-size:3rem;font-weight:300;color:var(--accent);line-height:1.1}
.stat-label{font-size:.85rem;color:var(--muted);margin-top:.5rem}

/* === DECLARATIONS === */
.declaration{padding:48px 0;text-align:center}
.declaration p{font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:300;line-height:1.5;max-width:640px;margin:0 auto}
.declaration-note{font-size:1rem!important;color:var(--muted);margin-top:1.5rem!important}
.center-note{text-align:center;font-size:1.1rem;font-weight:300}
.center-note a{border-bottom:1px solid var(--rule)}
.center-note a:hover{border-bottom-color:var(--accent)}

/* === FIGURES / CHARTS === */
figure{margin:3rem 0;text-align:center}
figure svg{max-width:100%;height:auto}
figcaption{font-size:.85rem;color:var(--muted);margin-top:.75rem}
.chart-figure figcaption{font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:.75rem}
.tension-svg,.debt-chart{width:100%;max-width:720px}
.fork-svg svg{max-width:600px;margin:0 auto}
.arch-svg svg{max-width:700px;margin:0 auto}
.timeline-svg svg{max-width:800px;margin:0 auto}
.chart-legend{list-style:none;display:flex;gap:1.25rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem;font-size:.85rem;color:var(--muted)}
.chart-legend li{display:flex;align-items:center;gap:.4rem}
.sw{width:14px;height:3px;border-radius:2px;display:inline-block}
.sw-brain{background:var(--accent)}
.sw-search{background:#FFCC00}
.sw-llm{background:var(--accent2)}

/* === CLIMAX REVEAL === */
.climax{text-align:center;margin:3rem 0}
.climax-question{font-size:clamp(1.3rem,2.5vw,1.7rem);font-weight:300;margin-bottom:1.5rem}
.reveal-btn{
  font-family:inherit;font-size:.95rem;font-weight:600;letter-spacing:.02em;
  color:#000;background:var(--accent);border:1px solid var(--accent);
  padding:.85rem 1.75rem;border-radius:4px;cursor:pointer;transition:opacity .3s,transform .3s;
}
.reveal-btn:hover{opacity:.85}
.reveal-btn:active{transform:scale(.98)}
.reveal-panel{overflow:hidden;transition:max-height .6s ease,opacity .6s ease}
.reveal-panel[data-open="true"]{max-height:4000px;opacity:1}
.reveal-panel[data-open="false"]{max-height:0;opacity:0}

/* chart series initial state (animated by app.js) */
.debt-chart .series{opacity:1}

/* === ACCORDION (METHODIK) === */
.accordion{margin:2.5rem 0}
.acc-item{border:1px solid var(--rule);border-radius:4px;margin-bottom:.75rem;background:var(--bg)}
.acc-head{margin:0}
.acc-btn{
  display:block;width:100%;text-align:left;font-family:inherit;font-size:1.05rem;font-weight:600;
  color:var(--ink);background:transparent;border:none;cursor:pointer;padding:1rem 1.25rem;
}
.acc-btn::after{content:"+";float:right;color:var(--accent);font-weight:400}
.acc-btn[aria-expanded="true"]::after{content:"–"}
.acc-panel{overflow:hidden;transition:max-height .4s ease,opacity .4s ease;padding:0 1.25rem}
.acc-panel[data-open="true"]{max-height:1200px;opacity:1;padding-bottom:1.25rem}
.acc-panel[data-open="false"]{max-height:0;opacity:0}

/* === TABS (BEISPIELE) === */
.tabs{margin:2.5rem 0}
.tablist{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.tablist [role="tab"]{
  font-family:inherit;font-size:.85rem;color:var(--muted);background:transparent;
  border:1px solid var(--rule);border-radius:4px;padding:.5rem 1rem;cursor:pointer;transition:all .3s;
}
.tablist [role="tab"]:hover{border-color:var(--accent);color:var(--accent)}
.tablist [role="tab"][aria-selected="true"]{border-color:var(--accent);color:var(--accent);background:rgba(0,255,136,.08)}
.tabpanel{border:1px solid var(--rule);border-radius:4px;padding:1.5rem;background:var(--bg)}
.tabpanel h3{margin-top:0}
.tabpanel[hidden]{display:none}

/* === LEITFADEN === */
.guide-toolbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1.5rem 0;position:sticky;top:44px;background:var(--bg2);padding:.75rem 0;z-index:30}
.guide-progress{font-size:.85rem;color:var(--accent);font-weight:600}
.guide-btn{font-family:inherit;font-size:.8rem;color:var(--muted);background:transparent;border:1px solid var(--rule);border-radius:4px;padding:.4rem .9rem;cursor:pointer;transition:all .3s}
.guide-btn:hover{border-color:var(--accent);color:var(--accent)}
.checklist{list-style:none;margin:1rem 0 2rem}
.checklist li{border-bottom:1px solid var(--rule);padding:.6rem 0}
.checklist label{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;font-size:.95rem;color:var(--ink)}
.checklist input[type="checkbox"]{flex:0 0 auto;margin-top:.35rem;width:1rem;height:1rem;accent-color:var(--accent);cursor:pointer}
.checklist label:has(input:checked){color:var(--muted)}
.guide-note{font-size:.85rem;color:var(--muted)}

/* === TABLES === */
.table-wrap{overflow-x:auto;margin:2rem 0}
table{width:100%;border-collapse:collapse;font-size:.9rem}
thead th{border-bottom:1px solid var(--accent);padding:.75rem 1rem;text-align:left;font-weight:600;color:var(--accent)}
tbody th{text-align:left;font-weight:600;padding:.75rem 1rem;border-bottom:1px solid var(--rule);white-space:nowrap;vertical-align:top}
tbody td{border-bottom:1px solid var(--rule);padding:.75rem 1rem;vertical-align:top;color:var(--muted)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none}
tbody td:first-child{white-space:normal}

/* === FOOTER === */
footer{border-top:1px solid var(--rule);padding:60px 0;margin-top:120px}
footer h2{font-size:1.25rem;margin-bottom:1.5rem}
footer .sources ol{padding-left:1.2rem;font-size:.85rem;color:var(--muted)}
footer .sources li{margin-bottom:.75rem;overflow-wrap:break-word}
footer .sources .src-title{color:var(--ink)}
footer .sources .src-url{display:block;margin-top:.15rem;font-size:.82rem;color:var(--accent);word-break:break-all}
footer .legal{font-size:.8rem;color:var(--muted);margin-top:3rem;border-top:1px solid var(--rule);padding-top:1.5rem}
footer .legal h2{font-size:1.1rem}

/* === RESPONSIVE === */
@media(max-width:768px){
  body{font-size:16px}
  .container{padding:0 1.25rem}
  .content-section{padding:80px 0}
  .content-section.tech{padding:50px 0}
  .stat-grid{grid-template-columns:1fr 1fr}
  .declaration p{font-size:1.15rem}
  .progress-rail{display:none}
  h2{font-size:1.75rem}
}
@media(max-width:390px){
  .stat-grid{grid-template-columns:1fr}
  .stat-value{font-size:2.5rem}
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  body.reveal-ready .section{opacity:1;transform:none}
  .reveal-panel{transition:none}
  .acc-panel{transition:none}
}

/* === PRINT === */
@media print{
  .site-header,.progress-rail,.scroll-cue,.reveal-btn,.guide-toolbar{display:none!important}
  body{background:#fff;color:#000}
  body.reveal-ready .section{opacity:1;transform:none}
  .section.full-black,.section.bg2{background:#fff}
  .reveal-panel[data-open="false"],.acc-panel[data-open="false"]{max-height:none;opacity:1}
  a{color:#000}
  mark.key{color:#000;font-weight:700}
  figure{page-break-inside:avoid}
}