:root{
  --bg:#faf9f6; --panel:#ffffff; --ink:#1c1b19; --muted:#5f5b53; --line:#e3dfd6;
  --accent:#2f6fb5; --accent-ink:#ffffff; --ok:#15803d; --warn:#b45309;
  --font-head:Georgia,"Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  --radius:10px;
  --tint:rgba(47,111,181,.08); --tint2:rgba(47,111,181,.25);
  --era-body:#e4e1da; --era-tooth:#d1cec6; --era-hover:#b4c8e4;
}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="bbs"]){--bg:#15140f;--panel:#1d1c16;--ink:#f2efe6;--muted:#a8a396;--line:#35322a;--accent:#8db6e8;--accent-ink:#15140f;--ok:#4ade80;--warn:#fbbf24;--tint:rgba(141,182,232,.10);--tint2:rgba(141,182,232,.30);--era-body:#2b2921;--era-tooth:#3b382e;--era-hover:#3d5b85}
}
[data-mode="bbs"]{
  --bg:#000; --panel:#000; --ink:#aaaaaa; --muted:#7a7a7a; --line:#00aaaa;
  --accent:#ffff55; --accent-ink:#000; --ok:#55ff55; --warn:#ffaa00;
  --font-head:var(--font-mono); --font-body:var(--font-mono); --radius:0;
}
html{font-size:112.5%}
[data-mode="bbs"]{font-size:100%}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--font-head);line-height:1.15;margin:0 0 .5em}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
section{padding:56px 0}
.eyebrow{font:600 0.75rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block}
h2{font-size:clamp(1.6rem,3.5vw,2.2rem)}
.lead{color:var(--muted);max-width:62ch}

/* Header */
header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:16px;min-height:56px;flex-wrap:wrap}
.brand{font:700 1.125rem var(--font-mono);color:var(--ink);text-decoration:none;margin-right:auto}
.brand b{color:var(--accent)}
nav{display:flex;gap:16px;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;font-size:0.875rem}
nav a:hover{color:var(--ink)}
.switch{text-decoration:none;display:inline-block;font:600 0.812rem var(--font-mono);background:var(--accent);color:var(--accent-ink);border:0;border-radius:var(--radius);padding:8px 12px;cursor:pointer}
.lang{font:600 0.812rem var(--font-mono);color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:var(--radius);padding:7px 10px}
.lang:hover{color:var(--ink);border-color:var(--accent)}
.switch:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Hero */
.hero{padding:88px 0 40px}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.5rem);max-width:16ch;letter-spacing:-.02em}
.hero p{font-size:1.15rem;color:var(--muted);max-width:56ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-block;font:600 0.875rem var(--font-body);padding:11px 18px;border-radius:var(--radius);text-decoration:none;border:1px solid var(--line);color:var(--ink);background:var(--panel);cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* Cards */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:28px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.card :is(h2,h3){font-size:1.1rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.tag{font:0.75rem var(--font-mono);color:var(--accent);display:block;margin-bottom:8px}

/* Widgets */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 16px}
.tab{font:600 0.812rem var(--font-body);padding:9px 14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--radius);cursor:pointer}
.tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.widget{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;min-height:360px}
.widget[hidden]{display:none}
.wtitle{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.wtitle :is(h2,h3){margin:0;font-size:1.05rem}
.wtitle small{color:var(--muted);font-family:var(--font-mono)}
.steps{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.steps li{display:flex;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);font-size:.92rem;transition:.25s}
.steps li .n{font:700 0.75rem var(--font-mono);width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%}
.steps li.on{color:var(--ink);border-color:var(--accent);background:var(--tint)}
.steps li.done{color:var(--ink)} .steps li.done .n{background:var(--ok);color:#000;border-color:var(--ok)}
.ticket{border:1px dashed var(--line);border-radius:var(--radius);padding:14px;font-size:.92rem}
.ticket .row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.pill{font:600 0.688rem var(--font-mono);padding:3px 8px;border:1px solid var(--line);border-radius:99px}
.pill.hi{border-color:var(--warn);color:var(--warn)}
.ai{margin-top:8px;padding:10px;border-left:3px solid var(--accent);background:var(--tint)}
.chat{height:300px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;border:1px solid var(--line);border-radius:var(--radius);padding:12px;font-size:.9rem}
.msg{display:flex;gap:10px;animation:in .3s ease}
.msg .src{font:700 0.688rem var(--font-mono);color:var(--accent);min-width:84px}
.msg .t{color:var(--muted);font:0.688rem var(--font-mono);margin-left:auto;white-space:nowrap}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.flow{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch;margin-bottom:16px}
.node{flex:1 1 130px;border:1px solid var(--line);border-radius:var(--radius);padding:10px;font-size:.82rem;color:var(--muted)}
.node b{display:block;color:var(--ink);font-size:.9rem}
.node.act{border-color:var(--accent);box-shadow:0 0 0 2px var(--tint2)}
table{border-collapse:collapse;width:100%;font:0.812rem var(--font-mono)}
th,td{border:1px solid var(--line);padding:6px 8px;text-align:left}
th{background:var(--tint)}
.note{color:var(--muted);font-size:.8rem;margin-top:12px}

/* Timeline */
.timeline{list-style:none;margin:32px 0 0;padding:0 0 0 22px;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 22px 18px}
.timeline li::before{content:"";position:absolute;left:-30px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.timeline .y{font:600 0.75rem var(--font-mono);color:var(--accent)}
.timeline :is(h2,h3){font-size:1.05rem;margin:2px 0}
.timeline p{margin:0;color:var(--muted);font-size:.93rem}
.refs{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.refs span{border:1px solid var(--line);padding:6px 12px;border-radius:99px;font-size:.9rem}
footer a{color:var(--muted)}
footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:.85rem}
.legal{max-width:70ch}

/* BBS extras */
.bbsonly{display:none}
[data-mode="bbs"] .bbsonly{display:block}
[data-mode="bbs"] .card,[data-mode="bbs"] .widget,[data-mode="bbs"] .ticket,[data-mode="bbs"] .chat,[data-mode="bbs"] .node,[data-mode="bbs"] .steps li,[data-mode="bbs"] .tab,[data-mode="bbs"] .btn,[data-mode="bbs"] .switch{border-style:solid;border-width:2px;border-color:#00aaaa}
[data-mode="bbs"] .switch,[data-mode="bbs"] .tab[aria-selected="true"],[data-mode="bbs"] .btn.primary{background:#aa00aa;color:#fff;border-color:#ff55ff}
[data-mode="bbs"] h1,[data-mode="bbs"] h2{color:#55ffff;text-transform:uppercase;letter-spacing:.04em}
[data-mode="bbs"] h1::before{content:"╔═══ ";color:#00aaaa} [data-mode="bbs"] h2::before{content:"▓▒░ ";color:#aa00aa}
[data-mode="bbs"] .eyebrow{color:#ffaa00}
[data-mode="bbs"] body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.25) 2px 3px);z-index:50}
[data-mode="bbs"] header{background:#0000aa;border-color:#5555ff}
[data-mode="bbs"] .brand{color:#fff}
[data-mode="bbs"] .pill{border-radius:0}
[data-mode="bbs"] .refs span{border-radius:0;border-color:#aa00aa}
[data-mode="bbs"] .timeline{border-left:2px dashed #00aaaa}
[data-mode="bbs"] .timeline li::before{border-radius:0;background:#ffff55;border-color:#ffff55}
.bbsmenu{border:2px solid #00aaaa;padding:12px 16px;margin-top:24px;color:#ffffff;white-space:pre-wrap}
.bbsmenu b{color:#ffff55}
#modem{position:fixed;inset:0;background:#000;color:#55ff55;font:15px/1.5 var(--font-mono);padding:32px;z-index:100;white-space:pre-wrap;display:none}
#modem.on{display:block}

#splash{position:fixed;inset:0;background:#000;z-index:120;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-family:var(--font-mono);cursor:pointer;padding:16px}
#splash.on{display:flex}
#splash pre{margin:0;font:400 clamp(5px,1.45vw,15px)/1 var(--font-mono);letter-spacing:0;max-width:100%;overflow:hidden}
#splash .sub{color:#ffffff;font-size:clamp(11px,1.6vw,15px);text-align:center;min-height:3em}
#splash .blink{color:#55ff55;animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
#term{display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#000;border-top:2px solid #00aaaa;font:14px/1.45 var(--font-mono);color:#aaaaaa}
[data-mode="bbs"] #term{display:block}
[data-mode="bbs"] body{padding-bottom:210px}
#termout{max-height:150px;overflow-y:auto;padding:8px 14px 0;white-space:pre-wrap}
#termout .c{color:#55ffff}#termout .y{color:#ffff55}
#termform{display:flex;gap:8px;padding:6px 14px 10px;align-items:center}
#termform label{color:#55ff55;white-space:nowrap}
#terminp{flex:1;background:transparent;border:0;color:#ffffff;font:inherit;outline:none;min-width:0;caret-color:#55ff55}

.bbs-home{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 260px);padding:24px 16px}
.mbox{min-width:300px;background:#aaaaaa;border:3px solid #fff;border-right-color:#555;border-bottom-color:#555;padding:8px;color:#000;font:15px/1.5 var(--font-mono)}
.mhead{text-align:center;font-weight:700;padding:2px 0 8px;color:#000}
#mitems{background:#0000aa;border:2px solid #fff;padding:12px 6px}
.mi{display:flex;gap:10px;padding:2px 10px;color:#55ffff;cursor:pointer;text-decoration:none}
.mi .mn{color:#fff;width:1.5em}.mi .mt{flex:1}.mi .mk{color:#ffff55}
.mi.sel{background:#00aaaa;color:#000}.mi.sel .mn,.mi.sel .mk{color:#000}
.mhelp{margin-top:10px;color:#000;font-size:13px}.mhelp span{color:#aa0000}
#mnote{margin:8px 0 0;color:#000;font:0.812rem/1.4 var(--font-mono);white-space:pre-wrap;min-height:1.4em}

#sc{margin-top:8px;background:#000;border:2px solid #fff;color:#aaaaaa;font:13px/1.4 var(--font-mono)}
#scout{padding:8px 10px;max-height:190px;overflow-y:auto;white-space:pre-wrap}
#scout .sys{color:#55ffff}#scout .al{color:#ffff55}#scout .me{color:#55ff55}#scout a{color:#fff;background:#aa00aa;padding:0 6px;text-decoration:none}
#scform{display:flex;border-top:1px solid #555}
#scinp{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:inherit;padding:6px 10px;outline:none;caret-color:#55ff55}
#scform button{background:#00aaaa;color:#000;border:0;font:inherit;padding:0 12px;cursor:pointer}

.brand .logo{display:block;height:34px;width:auto}
.brandtext{display:none}
[data-mode="bbs"] .brand .logo{display:none}
[data-mode="bbs"] .brandtext{display:inline}
@media (prefers-color-scheme:dark){:root:not([data-mode="bbs"]) .brand .logo{filter:invert(1) brightness(1.15)}}
.mhead img{display:block;margin:0 auto;max-width:100%;height:auto}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media (max-width:640px){section{padding:40px 0}}

/* ---- Mehrseitige Struktur ---- */
.page .more-row{margin-top:28px}
.card.link{display:block;color:inherit;text-decoration:none}
.card.link:hover{border-color:var(--accent)}
.card.link .more{display:inline-block;margin-top:12px;color:var(--accent);font-weight:600;font-size:.9rem}
.card.link :is(h2,h3){color:var(--ink)}
.brand{display:block}
.legal .narrow{max-width:760px}
.legal h1{margin-bottom:20px}
.legal h2{font-size:1.15rem;margin:32px 0 8px}
.legal p,.legal li{max-width:68ch}
.legal address{font-style:normal;margin:0 0 8px}
.legal .note{border-left:3px solid var(--line);padding-left:12px}
footer a{color:var(--muted)}
.foot-nav{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 8px}
html.dial body>*:not(#modem):not(#splash){visibility:hidden}
.bbs-nav{margin:36px 0 0;color:#55ffff}
.bbs-nav a{color:#ffff55;text-decoration:none}
.sysop-box{max-width:640px;margin:0 auto}
[data-mode="bbs"] .sysop-box #sc{margin-top:16px}
[data-mode="bbs"] .bbs-bar{display:flex;gap:16px;flex-wrap:wrap}
[data-mode="bbs"] .bbs-bar a{color:#fff;text-decoration:none;font-size:14px}
[data-mode="bbs"] .bbs-bar a b{color:#ffff55}
[data-mode="bbs"] .page{padding-top:40px}
[data-mode="bbs"] .hero{padding-top:56px}
[data-mode="bbs"] .card.link{color:#aaaaaa}
[data-mode="bbs"] .card.link .more{color:#ffff55}
@media (max-width:640px){.bar nav{order:5;width:100%;overflow-x:auto;white-space:nowrap;padding-bottom:8px}.bar .brand{margin-right:auto}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
nav a[aria-current="page"]{color:var(--ink);font-weight:600}
nav#mitems{display:block}
.mbox{width:320px;max-width:100%}
.legal p,.legal li,.legal address{overflow-wrap:anywhere}
@media (max-width:640px){
  .bar{gap:10px}
  .bar .brand .logo{height:28px}
  .switch{padding:6px 10px;font-size:0.75rem}
  .lang{padding:6px 8px;font-size:0.75rem}
  .hero{padding:56px 0 24px}
}
@media (max-width:640px){
  [data-mode="bbs"] .bbs-bar a:not(:first-child){display:none}
  [data-mode="bbs"] #term{display:none}
  [data-mode="bbs"] body{padding-bottom:0}
  .bbs-home{padding:16px}
}
.skip{position:absolute;left:8px;top:-60px;z-index:200;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:var(--radius);font:600 0.875rem var(--font-body);text-decoration:none}
.skip:focus{top:8px}

/* Hero-Zahnrad + Retro-Teaser */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero-gear{position:absolute;right:-120px;top:-60px;color:var(--accent);opacity:.09;pointer-events:none;animation:spin 120s linear infinite}
.hero-gear svg{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.teaser{padding:8px 0 0}
.retro-teaser{display:grid;gap:4px;background:#0b0b10;color:#aaaaaa;border:2px solid #00aaaa;border-radius:var(--radius);padding:16px 20px;text-decoration:none;font:15px/1.5 var(--font-mono)}
.retro-teaser:hover{border-color:#55ffff}
.rt-bar{color:#55ff55}
.rt-line{color:#ffff55;font-weight:700}
.rt-sub{color:#aaaaaa;font-size:.88rem}
.rt-cur{display:inline-block;width:.6em;height:1em;background:#ffff55;vertical-align:-.15em;margin-left:.2em;animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
[data-mode="bbs"] .hero-gear{display:none}
@media (max-width:640px){.hero-gear{right:-200px;top:-80px;opacity:.07}}
.refs-label{margin:28px 0 -8px;color:var(--muted);font:600 0.75rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase}

/* Chat-Demo im Rocket.Chat-Stil */
.rc{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.rc-bar{padding:10px 14px;border-bottom:1px solid var(--line);font:700 14px var(--font-body)}
.rc .chat{height:380px;border:0;border-radius:0;gap:14px;padding:12px 14px}
.rc-day{align-self:center;background:var(--line);color:var(--muted);font:600 11px var(--font-body);padding:2px 12px;border-radius:99px}
.rc-msg{display:flex;gap:10px;align-items:flex-start;animation:in .3s ease}
.rc-av{flex:none;width:34px;height:34px;border-radius:4px;display:grid;place-items:center;color:#fff;font:700 15px var(--font-body)}
.rc-body{min-width:0}
.rc-time{color:var(--muted);font-size:12px;margin-left:8px}
.rc-text{font-size:.88rem;line-height:1.45;overflow-wrap:anywhere}
.rc-link{color:var(--accent);cursor:default}
.rc-chev{color:var(--muted);font-size:.8rem}
.rc-att{border-left:3px solid var(--line);padding:2px 0 2px 10px;margin-top:4px}
.rc-att.warn{border-color:#f0b429}
.rc-att.bad{border-color:#c0392b}
.rc-attbody{margin-top:4px}
.rc-fields{display:grid;grid-template-columns:auto auto;gap:6px 28px;margin-top:6px}
.rc-fields b{display:block;font-size:.8rem}
.rc-code{font:12px var(--font-mono);background:var(--line);padding:2px 5px;border-radius:3px}

/* Google-Sheets-Nachbau (Demo 3) */
.gs{background:#fff;color:#202124;border:1px solid #dadce0;border-radius:8px;overflow:hidden;font:13px/1.4 "Segoe UI",Roboto,Arial,sans-serif}
.gs-top{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid #e8eaed}
.gs-ico{flex:none;width:22px;height:30px;background:#188038;border-radius:3px;position:relative}
.gs-ico::after{content:"";position:absolute;left:5px;top:10px;width:12px;height:10px;border:2px solid #fff;border-radius:1px}
.gs-title{font-size:16px;color:#202124}
.gs-menu{display:flex;gap:12px;flex-wrap:wrap;color:#444746;font-size:12.5px}
.gs-fx{display:flex;gap:10px;align-items:center;padding:4px 12px;border-bottom:1px solid #e8eaed;background:#f8f9fa;min-width:0}
.gs-fxl{color:#5f6368;font:italic 13px Georgia,serif}
.gs-fx code{font:12px var(--font-mono);color:#188038;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-scroll{overflow-x:auto}
.gs table{width:100%;min-width:620px;border-collapse:collapse;font:12.5px "Segoe UI",Roboto,Arial,sans-serif}
.gs th,.gs td{border:1px solid #e0e0e0;padding:2px 6px;text-align:left;background:#fff;color:#202124}
.gs .gs-cols th{background:#f8f9fa;color:#5f6368;text-align:center;font-weight:400;padding:2px 4px}
.gs .gs-head th{font-weight:600;background:#fff}
.gs .gs-head th:first-child,.gs .gs-rn{background:#f8f9fa;color:#5f6368;text-align:center;width:28px;font-weight:400}
.gs .gs-num{text-align:right}
.gs td{vertical-align:bottom;height:52px}
.gs .gs-photo{width:96px;padding:0}
.gs-thumb{display:block;width:96px;height:52px;position:relative}
.gs-thumb::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:18px;margin:-9px 0 0 -13px;border:2px solid rgba(255,255,255,.85);border-radius:3px}
.gs-thumb.t0{background:linear-gradient(135deg,#c9a7e6,#ffd6f0)}
.gs-thumb.t1{background:linear-gradient(135deg,#8aa0b8,#d9e2ec)}
.gs-thumb.t2{background:linear-gradient(135deg,#9ec9b0,#e3f4ea)}
.gs-thumb.t3{background:linear-gradient(135deg,#d3b08a,#f4e7d3)}
.hashtag{margin:18px 0 0;color:var(--muted);font:0.812rem var(--font-mono)}

/* Zahnrad-Zeitleiste (Startseite) */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero .hero-gear{display:none}
.era{margin:0;display:grid;gap:12px;justify-items:center}
.era-cap{font:600 0.812rem var(--font-mono);color:var(--muted);letter-spacing:.04em}
.era-wrap{width:min(100%,400px)}
.era-svg{display:block;width:100%;height:auto;overflow:visible}
.era-wheel{transform-origin:100px 100px;transition:transform .9s cubic-bezier(.45,.05,.2,1)}
.era-body{fill:var(--era-body)}
.era-tooth{--tf:var(--era-tooth)}
.era-tooth path{fill:var(--tf);stroke:var(--tf);stroke-width:5;stroke-linejoin:round;cursor:pointer;transition:fill .3s,stroke .3s}
.era-tooth:hover{--tf:var(--era-hover)}
.era-tooth.on{--tf:var(--accent)}
.era-tooth text{font:700 5px var(--font-mono);fill:var(--muted);pointer-events:none}
.era-tooth.on text{fill:var(--accent-ink)}
.era-tooth:focus{outline:none}
.era-tooth:focus-visible path{stroke:var(--ink);stroke-width:1.5}
.era-30{font:700 30px var(--font-head);fill:var(--ink)}
.era-30s{font:600 8px var(--font-mono);fill:var(--muted);letter-spacing:.06em}
.era-marker{fill:var(--accent)}
.era-panel{text-align:center;min-height:118px;max-width:420px}
.era-years{font:600 0.812rem var(--font-mono);color:var(--accent)}
.era-ttl{font:700 1.15rem/1.25 var(--font-head);margin:2px 0 8px}
.era-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.era-chips li{border:1px solid var(--line);border-radius:99px;padding:2px 10px;font-size:.82rem;color:var(--muted);background:var(--panel)}
.era-ctl{display:flex;gap:8px;align-items:center}
.era-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--ink);font:600 0.875rem var(--font-body);cursor:pointer}
.era-btn:hover{border-color:var(--accent)}
.era-hint{font-size:.8rem;color:var(--muted);margin-left:6px}
.era-list{margin:0;padding-left:18px;font-size:.88rem;color:var(--muted)}
.era.js .era-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.era:not(.js) .era-panel,.era:not(.js) .era-ctl{display:none}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .era-wrap{width:min(100%,320px)}
}
@media (prefers-reduced-motion:reduce){.era-wheel{transition:none}}
[data-mode="bbs"] .era{display:none}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
.page h1{font-size:clamp(1.7rem,6.2vw,2.5rem);line-height:1.15}

/* Startseiten-Karten: 2x2, Link immer unten rechts */
.grid.cards4{grid-template-columns:repeat(2,minmax(0,1fr))}
.card.link{display:flex;flex-direction:column}
.card.link p{margin-bottom:0}
.card.link .more{margin-top:auto;padding-top:14px;align-self:flex-end}
@media (max-width:640px){.grid.cards4{grid-template-columns:1fr}}

.h2.h3,h2.h3{font-size:1.1rem}
#splash .splash-skip{color:#ffffff;font:14px var(--font-mono);margin-top:10px}
#splash .splash-skip:focus-visible{outline:2px solid #ffff55;outline-offset:3px}

/* Retro-Zahnrad auf der Retro-Startseite */
.rg-pre{margin:6px auto;font:clamp(7px,1.45vw,11px)/1.2 var(--font-mono);white-space:pre;text-align:center;overflow:hidden;max-width:100%;color:#aaaaaa}
.rg-ctl{display:flex;gap:10px;justify-content:center;margin:14px 0 4px}
.rg-ctl button{background:#000;color:#55ffff;border:2px solid #00aaaa;font:inherit;padding:4px 12px;cursor:pointer}
.rg-ctl button:hover{background:#005f87}
.rg-ctl button:focus-visible{outline:2px solid #ffff55;outline-offset:2px}

/* Retro-Startseite */
.rg-left{align-items:center}
.rg-cap{margin:0;color:#7a7a7a;font:600 13px var(--font-mono);letter-spacing:.04em}
.rg-detail{width:100%;min-height:150px;padding:10px 16px}
.rg-detail .tl-list{columns:2;column-gap:20px}
@media (max-width:900px){.rg-detail .tl-list{columns:1}}
.rg-left{width:min(100%,490px)}
.rg-left .rg-pre{max-width:100%}
/* Rad stabil: Zeilen ohne Luft */
.rg-pre{font:clamp(6px,1.2vw,10px)/1 var(--font-mono);letter-spacing:0;margin:4px auto}
.rg-detail{height:210px;min-height:210px;overflow:hidden}
.rg-left{align-self:flex-start}
/* feste Breite */
.rg-wrap{width:min(100%,900px);justify-content:center}
.rg-left{flex:0 1 490px}
.rg-wrap .mbox{flex:0 0 320px}

/* Rad-Startseite: bündige Zweierspalte */
.rg-grid{display:grid;grid-template-columns:490px 320px;gap:28px;justify-content:center;align-items:stretch;padding:12px 16px;min-height:calc(100vh - 260px)}
.rg-lcol{display:flex;flex-direction:column;align-items:center;gap:6px}
.rg-rcol{display:flex;flex-direction:column;gap:16px}
.rg-rcol .mbox{width:100%}
.rg-info{margin:auto 0 0;border:2px solid #00aaaa;background:#000;color:#ffffff;padding:10px 14px;font:13px/1.5 var(--font-mono);white-space:pre-wrap}
.rg-detail{width:100%;height:auto;min-height:210px;overflow:visible;padding:10px 16px}
.rg-dhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:2px}
.rg-ctl{margin:0;display:flex;gap:6px}
.rg-ctl button{padding:2px 8px;font-size:.8rem}
.rg-detail .tl-list{columns:2;column-gap:20px}
@media (max-width:900px){.rg-grid{grid-template-columns:minmax(0,490px);min-height:0}.rg-rcol{order:-1}.rg-detail .tl-list{columns:1}}

/* zwei Reihen: oben Rad | Menü, unten Detailkasten | Infotafel (gleicher Anfang, gleiche Höhe) */
.rg-grid{display:grid;grid-template-columns:490px 320px;grid-template-rows:auto auto;gap:22px 28px;justify-content:center;align-items:start;padding:12px 16px;min-height:0}
.rg-wheelbox{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.rg-menu{grid-column:2;grid-row:1}
.rg-menu .mbox{width:100%}
.rg-detail{grid-column:1;grid-row:2;align-self:stretch;width:auto;height:auto;min-height:0;overflow:visible;padding:12px 16px;box-sizing:border-box}
.rg-info{grid-column:2;grid-row:2;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;margin:0;border:2px solid #00aaaa;background:#000;color:#ffffff;padding:12px 16px;font:13px/1.5 var(--font-mono);box-sizing:border-box}
@media (max-width:900px){
  .rg-grid{grid-template-columns:minmax(0,490px);grid-template-rows:auto}
  .rg-menu,.rg-wheelbox,.rg-detail,.rg-info{grid-column:1;grid-row:auto}
  .rg-menu{order:-1}
  .rg-detail .tl-list{columns:1}
}
/* feste Höhe der unteren Reihe (größter Inhalt: 7 Stichwörter), damit beim Blättern nichts springt */
.rg-detail{min-height:236px}
/* Detailkasten der Zeitleiste (Retro-Startseite): Rahmen, Zeitraum, Titel, Stichwörter */
.tl-detail{border:2px solid #aa00aa;padding:14px 18px;min-height:190px}
.tl-range{color:#ffff55}
.tl-title{color:#ffffff;font-weight:700;font-size:1.15rem;margin:2px 0 10px}
.tl-list{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.tl-list li{color:#55ff55;break-inside:avoid;padding:1px 0}
.tl-list li::before{content:"► ";color:#00aaaa}