@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Mono:wght@300;400;600&display=swap");
/* WEICHE · Kugelkopf ext. 8: LOK1000 · 2026 — Typoskript auf dem Stellwerkpult */
:root{
  --pult:#0e1011; --pult2:#16191a; --paper:#ece6d8; --paper2:#e3dccb; --ink:#161413; --red:#b8261b;
  --yel:#ffc22e; --lamp:#f3efe4; --grey:#585c5e; --sig:#e8371f; --green:#5ae678;
  --tw:"Courier Prime","Courier New",monospace; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --w:min(1280px,calc(100vw - 32px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--pult);color:var(--lamp);font-family:var(--mono);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--yel);text-decoration:none;border-bottom:1px solid rgba(255,194,46,.35)}
a:hover{border-bottom-color:var(--yel)}
img{max-width:100%;height:auto;display:block}
.wrap{width:var(--w);margin:0 auto}
:focus-visible{outline:2px solid var(--yel);outline-offset:3px}

/* Pult-Raster */
main{background:
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/80px 80px,
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/80px 80px,var(--pult)}

/* HUD */
.hud{position:sticky;top:var(--mw4-height,70px);z-index:50;background:rgba(14,16,17,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(243,239,228,.1)}
.hud .wrap{display:flex;align-items:center;gap:18px;min-height:46px;overflow:hidden}
.hud nav{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;flex:1}
.hud nav::-webkit-scrollbar{display:none}
.hud nav a{border:0;color:rgba(243,239,228,.75);font-size:13px;letter-spacing:.04em}
.hud nav a:hover,.hud nav a.on{color:var(--yel)}
.hud nav a.back{color:var(--lamp)}
.hud .km{font-size:12px;color:var(--yel);white-space:nowrap;font-variant-numeric:tabular-nums}
.hud .lamp{width:12px;height:12px;border-radius:50%;background:var(--sig);box-shadow:0 0 10px var(--sig);flex:none;transition:background .2s,box-shadow .2s}
.hud .lamp.go{background:var(--green);box-shadow:0 0 10px var(--green)}

/* Hero: Typoskriptblatt */
.hero{padding:64px 0 40px;position:relative}
.blatt{background:var(--paper);color:var(--ink);font-family:var(--tw);position:relative;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .37  0 0 0 0 .3  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  box-shadow:0 30px 60px rgba(0,0,0,.45),0 2px 0 rgba(255,255,255,.4) inset;padding:clamp(22px,4vw,64px)}
.blatt a{color:var(--red);border-bottom-color:rgba(184,38,27,.35)}
.hero .blatt{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,56px);align-items:center}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--red);margin:0 0 14px}
h1{font-family:var(--tw);font-weight:700;font-size:clamp(34px,5.4vw,74px);line-height:1.02;margin:0 0 10px;letter-spacing:-.01em}
h1 .r{color:var(--red)}
.sub{font-size:clamp(17px,1.8vw,22px);margin:0 0 18px}
.typed::after{content:"▏";color:var(--red);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.quote{font-style:italic;border-left:3px solid var(--red);padding-left:14px;margin:18px 0 0}
.hero figure{margin:0}
.hero figure img{filter:contrast(1.04);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero figcaption{font-family:var(--mono);font-size:12px;color:#555;margin-top:8px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.facts span{font-family:var(--mono);font-size:12px;border:1px solid rgba(243,239,228,.25);padding:5px 10px;color:rgba(243,239,228,.85)}
.facts b{color:var(--yel);font-weight:600}

/* Projektseiten-Navigation */
.subnav{border-top:1px solid rgba(243,239,228,.1);border-bottom:1px solid rgba(243,239,228,.1);background:var(--pult2)}
.subnav .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 0;align-items:center}
.subnav .k{font-size:11px;letter-spacing:.2em;color:var(--grey)}
.subnav a{border:0;font-size:14px;color:var(--lamp)}
.subnav a[aria-current]{color:var(--yel)}
.subnav a[aria-current]::before{content:"● ";color:var(--green)}

/* Abschnitte als Stationen am Gleis */
.st{padding:72px 0 24px;position:relative}
.st::before{content:"";position:absolute;left:0;right:0;top:36px;height:4px;background:linear-gradient(90deg,var(--yel) var(--fill,0%),var(--grey) var(--fill,0%));opacity:.7}
.sh{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sh .sig{width:16px;height:16px;border-radius:50%;background:var(--sig);box-shadow:0 0 0 4px rgba(243,239,228,.12);flex:none;align-self:center}
.st.reached .sh .sig{background:var(--green)}
.sh .date{font-family:var(--mono);font-weight:600;color:var(--yel);font-size:clamp(22px,3vw,34px)}
h2{font-family:var(--mono);font-weight:600;font-size:clamp(20px,2.3vw,28px);letter-spacing:.02em;margin:0;color:var(--lamp)}
.blatt h2,.blatt h3{color:var(--ink);font-family:var(--tw)}
h3{font-family:var(--tw);font-size:20px;margin:22px 0 8px}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6}
.cols{columns:2 340px;column-gap:44px}
.cols p{margin:0 0 14px;break-inside:avoid}
.note{font-size:13px;color:rgba(243,239,228,.65)}
.blatt .note{color:#5a554c}

/* Videos (YouTube-Consent) */
.av{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.av figure{margin:0}
.yt{position:relative;aspect-ratio:16/9;background:#222 center/cover no-repeat;cursor:pointer;border:1px solid rgba(243,239,228,.15)}
.yt .play{position:absolute;inset:auto 0 0 0;padding:14px 16px;background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:13px}
.yt .play b{display:block;font-size:18px;color:var(--yel)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt.pending .play b::after{content:" · YouTube-ID folgt"}
.av figcaption{font-size:12px;color:rgba(243,239,228,.7);margin-top:8px}
.consent{font-size:12px;color:rgba(243,239,228,.55);margin-top:12px}

/* Kapitel-Fahrplan */
.fahrplan{width:100%;border-collapse:collapse;font-size:14px}
.fahrplan th,.fahrplan td{text-align:left;padding:10px 10px;border-bottom:1px dashed rgba(22,20,19,.25);vertical-align:top}
.fahrplan th{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--red)}
.fahrplan td:first-child{font-family:var(--mono);font-weight:600;white-space:nowrap}
.fahrplan tr:hover td{background:rgba(184,38,27,.06)}
.stills{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.stills button{all:unset;cursor:zoom-in;display:block}
.stills img{aspect-ratio:16/9;object-fit:cover;width:100%;transition:transform .25s}
.stills button:hover img{transform:scale(1.03)}

/* Spielfelder */
.toy{background:var(--pult2);border:1px solid rgba(243,239,228,.14);padding:18px;position:relative}
.toy .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;font-size:13px}
.btn{font-family:var(--mono);font-size:13px;background:transparent;color:var(--lamp);border:1px solid rgba(243,239,228,.35);padding:7px 12px;cursor:pointer;min-height:36px}
.btn:hover{border-color:var(--yel);color:var(--yel)}
.btn.on{background:var(--yel);color:var(--ink);border-color:var(--yel)}
.btn.red{border-color:var(--red);color:#ff8b80}
.toy canvas,.toy svg{display:block;width:100%;height:auto;background:#0b0c0d;touch-action:none}
.toy .readout{font-size:13px;color:var(--yel);min-height:1.6em;margin-top:10px}
input[type=range]{accent-color:var(--yel);width:min(320px,100%)}
.paperstrip{background:var(--paper);color:var(--ink);font-family:var(--tw);font-size:clamp(16px,2vw,24px);min-height:3.4em;padding:10px 16px;white-space:pre-wrap;word-break:break-word;margin-top:10px;line-height:1.35}
.paperstrip .r{color:var(--red)}
.tbwrap{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:stretch}
.tbwrap canvas{background:var(--paper)!important}
.kbd{display:inline-block;border:1px solid rgba(243,239,228,.4);padding:0 6px;font-size:12px;margin:0 2px}

/* Fotos */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.tiles button{all:unset;cursor:zoom-in;display:block;position:relative}
.tiles img{aspect-ratio:1;object-fit:cover;width:100%;filter:grayscale(.15);transition:filter .2s}
.tiles button:hover img{filter:none}
.tiles button::after{content:attr(data-n);position:absolute;left:6px;bottom:4px;font-size:11px;color:var(--paper);text-shadow:0 1px 2px #000}

/* Zyklus */
.zyklus{list-style:none;margin:0;padding:0;position:relative}
.zyklus::before{content:"";position:absolute;left:84px;top:0;bottom:0;width:4px;background:var(--grey)}
.zyklus li{display:grid;grid-template-columns:70px 30px 1fr;gap:14px;padding:12px 0;align-items:start;position:relative}
.zyklus .y{font-weight:600;color:var(--yel);text-align:right}
.zyklus .d{width:18px;height:18px;border-radius:50%;background:var(--pult);border:3px solid var(--yel);margin-left:3px;margin-top:3px;z-index:1}
.zyklus li.now .d{background:var(--sig);border-color:var(--sig);box-shadow:0 0 14px var(--sig)}
.zyklus b{color:var(--lamp)}
.zyklus small{display:block;color:rgba(243,239,228,.65);font-size:13px}

/* Referenzen */
.refs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px 24px}
.refs li{border-top:1px solid rgba(243,239,228,.12);padding-top:8px}
.refs small{display:block;color:rgba(243,239,228,.55);font-size:12px}

/* 3D */
.stage{position:relative;aspect-ratio:16/9;background:var(--paper);border:1px solid rgba(243,239,228,.14)}
.stage canvas{width:100%!important;height:100%!important;display:block}
.stage .hint{position:absolute;left:12px;bottom:10px;font-size:12px;color:var(--ink);background:rgba(236,230,216,.85);padding:4px 8px}
.stage .load{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font-family:var(--tw);font-size:20px}

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(8,9,10,.94);display:none;z-index:2147483000;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:84vh;box-shadow:0 10px 40px #000}
.lb button{position:absolute;background:none;border:0;color:var(--lamp);font-size:44px;cursor:pointer;padding:12px}
.lb .close{top:10px;right:16px}.lb .prev{left:10px}.lb .next{right:10px}
.lb-cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:13px;color:rgba(243,239,228,.75)}

.endnote{padding:80px 0 60px;text-align:center;font-family:var(--tw);color:rgba(243,239,228,.7)}
.endnote .mbig{font-size:clamp(22px,3vw,38px);color:var(--lamp);margin-bottom:10px}

@media (max-width:880px){
  .hero .blatt,.av,.tbwrap{grid-template-columns:1fr}
  .stills{grid-template-columns:repeat(2,1fr)}
  .zyklus::before{left:64px}.zyklus li{grid-template-columns:50px 30px 1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Mondkarte */
.mk-wrap{position:relative;aspect-ratio:16/9;border:1px solid rgba(243,239,228,.14);overflow:hidden}
.mk-stage{position:absolute;inset:0}
.mk-labels{position:absolute;inset:0;pointer-events:none}
.mk{position:absolute;transform:translate(10px,-50%);background:rgba(11,12,13,.78);color:var(--lamp);border:1px solid rgba(232,55,31,.6);font-family:var(--mono);font-size:12px;padding:2px 7px;cursor:pointer;pointer-events:auto;transition:opacity .25s;white-space:nowrap}
.mk b{color:var(--sig)}
.mk.sel{background:var(--yel);color:var(--ink);border-color:var(--yel)}
.mk.sel b{color:var(--ink)}
.mk-out{min-height:4.8em;margin-top:12px;font-size:14px}
.mk-out b{color:var(--yel)}