:root{--canvas:#121A20;--panel:#1A242B;--panel2:#161F25;--accent:#E39A4E;
  --accent-hover:#F2B06A;--accent-muted:#3A4C55;--copper:#8A6B62;
  --text:#E6EBEE;--text2:#93A3AC;--line:#2A3841;
  --ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
html,body{overflow-x:clip}
body{margin:0;background:var(--canvas);color:var(--text);
  font:400 17px/1.65 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.env{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 50% -10%,rgba(227,154,78,.06),transparent 60%),
             radial-gradient(ellipse 70% 50% at 85% 110%,rgba(58,76,85,.18),transparent 60%)}

.wrap{position:relative;z-index:1;max-width:820px;margin:0 auto;
  padding:0 clamp(1.3rem,6vw,2.5rem)}

/* Rückweg. Klebt oben, damit man von jedem Abschnitt zurückkommt. */
.topbar{position:sticky;top:0;z-index:5;background:rgba(18,26,32,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding-top:.9rem;padding-bottom:.9rem}
.back{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  color:var(--text2);font-family:"IBM Plex Mono",monospace;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;transition:color .35s var(--ease)}
.back:hover{color:var(--accent)}
.back svg{width:18px;height:9px;transition:transform .4s var(--ease)}
.back:hover svg{transform:translateX(-4px)}
.jump{display:flex;gap:1.1rem;margin-left:auto;flex-wrap:wrap}
.jump a{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text2);text-decoration:none;
  transition:color .35s var(--ease)}
.jump a:hover{color:var(--accent)}
.jump a.hier{color:var(--accent)}

header.head{padding:clamp(3rem,9vw,5.5rem) 0 clamp(2rem,5vw,3rem)}
.kicker{font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent)}
h1{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;
  font-size:clamp(2.4rem,8vw,4.2rem);line-height:1.03;letter-spacing:-.028em;
  margin:.55rem 0 .5rem}
.topic{font-family:"IBM Plex Mono",monospace;font-size:.88rem;letter-spacing:.05em;
  color:var(--text2)}
.lede{margin:1.6rem 0 0;font-size:1.12rem;color:var(--text2);max-width:56ch}
.lede strong{color:var(--text);font-weight:500}

section{padding:clamp(2.6rem,7vw,4.4rem) 0;border-top:1px solid var(--line)}
.eyebrow{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.eyebrow .num{font-family:"IBM Plex Mono",monospace;font-size:.76rem;
  letter-spacing:.13em;color:var(--copper)}
.status{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;border:1px solid var(--line);border-radius:999px;
  padding:.2rem .65rem;background:var(--panel)}
.status.done{color:#8FBF9F;border-color:#2E4A38}
.status.open{color:var(--accent);border-color:#4A3A24}
h2{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.7rem,4.6vw,2.5rem);line-height:1.12;letter-spacing:-.02em;
  margin:.7rem 0 .2rem}
h3{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.1rem,2.6vw,1.3rem);letter-spacing:-.01em;margin:2.4rem 0 .5rem}
p{max-width:62ch;margin:1rem 0}

.facts{margin:1.8rem 0 0;border:1px solid var(--line);border-radius:10px;
  background:var(--panel2);overflow:hidden}
.facts div{display:flex;gap:1rem;padding:.62rem .95rem;border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:.81rem;line-height:1.5}
.facts div:first-child{border-top:0}
.facts dt{flex:0 0 11.5rem;color:var(--text2)}
.facts dd{margin:0;color:var(--text)}
@media (max-width:560px){
  .facts div{flex-direction:column;gap:.15rem}
  .facts dt{flex:none}
}

.tablewrap{overflow-x:auto;margin:1.8rem 0 0;border:1px solid var(--line);
  border-radius:10px;background:var(--panel2)}
table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:520px}
th,td{text-align:left;padding:.62rem .95rem;border-bottom:1px solid var(--line);
  vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text2);font-weight:400;
  background:rgba(58,76,85,.14)}
td.k{color:var(--text2)}
td code{white-space:nowrap}
td .fehlt{color:var(--copper);font-family:"IBM Plex Mono",monospace;font-size:.8rem}

.shots{display:grid;gap:.9rem;margin:2rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
figure{margin:0}
figure img{display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid var(--line);background:var(--panel)}
figcaption{margin-top:.5rem;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  color:var(--text2);letter-spacing:.03em}

.dec{margin:2.4rem 0 0;border-left:2px solid var(--accent);
  padding:.1rem 0 .1rem 1.15rem}
.dec .dt{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.dec p{margin:.55rem 0 0;color:var(--text2)}

/* Offene Punkte. Kupfer statt Amber, damit es nicht wie ein Knopf aussieht. */
.gap{margin:2.4rem 0 0;border-left:2px solid var(--copper);
  padding:.1rem 0 .1rem 1.15rem}
.gap .dt{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--copper)}
.gap p{margin:.55rem 0 0;color:var(--text2)}
.gap ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--text2)}
.gap li{margin:.3rem 0}
.gap a{color:var(--text2)}
.gap a:hover{color:var(--accent)}

.tags{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:1.7rem}
.tag{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--text2);
  border:1px solid var(--line);border-radius:6px;padding:.24rem .6rem;background:var(--panel)}

.ctarow{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.btn{display:inline-block;text-decoration:none;font-family:"IBM Plex Mono",monospace;
  font-size:.79rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.68rem 1.25rem;border-radius:8px;background:var(--accent);color:#141C22;
  border:1px solid var(--accent);transition:background .3s var(--ease)}
.btn:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{background:var(--panel);border-color:var(--accent-muted)}

/* Querverweis zwischen den beiden Plattform-Seiten. */
.sister{margin-top:2.4rem;border:1px solid var(--line);border-radius:10px;
  background:var(--panel2);padding:1.3rem 1.4rem}
.sister .dt{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text2)}
.sister p{margin:.5rem 0 0;color:var(--text2);max-width:58ch}
.sister a.go{display:inline-flex;align-items:center;gap:.55rem;margin-top:.9rem;
  text-decoration:none;color:var(--text);font-family:"IBM Plex Mono",monospace;
  font-size:.79rem;letter-spacing:.05em;transition:color .3s var(--ease)}
.sister a.go:hover{color:var(--accent)}
.sister a.go svg{width:22px;height:10px;transition:transform .4s var(--ease)}
.sister a.go:hover svg{transform:translateX(4px)}

code{font-family:"IBM Plex Mono",monospace;font-size:.88em;
  background:var(--panel);border:1px solid var(--line);border-radius:5px;
  padding:.08em .34em}

footer{position:relative;z-index:1;border-top:1px solid var(--line);margin-top:1rem}
footer .wrap{padding-top:1.7rem;padding-bottom:1.7rem;
  font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.05em;
  color:var(--text2)}
footer a{color:var(--text2);text-decoration:none}
footer a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}