/* ===================================================================
   BERLIN – Design System
   8pt-Raster · Type-Scale 1.25 · Nacht/Tag-Themes
   =================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Spacing (8pt) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:192px;

  /* Type scale · 1.25 · base 16 */
  --t-xs:12.8px; --t-sm:14px; --t-base:16px; --t-lg:20px; --t-xl:25px;
  --t-2xl:31px; --t-3xl:39px; --t-4xl:49px; --t-5xl:61px;

  --ff-display:'Big Shoulders Display','Oswald','Helvetica Neue',Impact,sans-serif;
  --ff-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ff-mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;

  /* Radius */
  --r-sm:6px; --r-md:12px; --r-lg:18px; --r-full:999px;

  /* Motion */
  --e-out:cubic-bezier(.16,.84,.44,1);
  --e-in:cubic-bezier(.55,.06,.68,.19);
  --e-both:cubic-bezier(.65,.05,.36,1);

  /* Theme: NACHT (default) – neutrale Grautöne, Berlin-Rot als einziger Akzent */
  --bg:#0C0D0F;
  --bg-deep:#070809;
  --surface:#141619;
  --surface-2:#1B1E22;
  --surface-3:#25292E;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.17);
  --ink:#EDEEF0;
  --ink-2:#A8ACB3;
  --ink-3:#6E747C;
  --accent:#FF3B30;
  --accent-ink:#0C0D0F;

  --map-land:#191B1F;
  --map-land-2:#22262B;
  --map-line:#333940;
  --map-water:#1E4152;
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.7);
  --shadow-lg:0 24px 64px -16px rgba(0,0,0,.8);
  --glow:0 0 0 1px rgba(255,255,255,.06);
  --sky-1:#08090C; --sky-2:#101319; --sky-3:#1C2029;
  --sky-far-a:rgba(12,13,15,.55); --sky-far-b:rgba(12,13,15,.9);
  --sky-near-a:rgba(7,8,9,.94); --sky-near-b:#070809;
  --star-op:1;
}

html[data-theme="tag"]{
  --bg:#F1F2F4;
  --bg-deep:#E3E5E9;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --surface-3:#EAECF0;
  --line:rgba(14,16,20,.13);
  --line-strong:rgba(14,16,20,.26);
  --ink:#0E1014;
  --ink-2:#4C525C;
  --ink-3:#787F8A;
  --accent:#D50C1D;
  --accent-ink:#FFFFFF;

  --map-land:#E4E6EA;
  --map-land-2:#D7DAE0;
  --map-line:#B4B9C1;
  --map-water:#A9C4D4;
  --shadow-md:0 8px 24px -10px rgba(40,35,25,.28);
  --shadow-lg:0 24px 64px -18px rgba(40,35,25,.3);
  --glow:0 0 0 1px rgba(20,24,32,.05);
  --sky-1:#B9CBDC; --sky-2:#DCE2E8; --sky-3:#EFF0F2;
  --sky-far-a:rgba(78,86,98,.40); --sky-far-b:rgba(62,70,82,.60);
  --sky-near-a:rgba(36,40,47,.94); --sky-near-b:#20242A;
  --star-op:0;
}

/* ---------- 2. Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-body); font-size:var(--t-base); line-height:1.6;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .6s var(--e-out), color .6s var(--e-out);
}
img{max-width:100%;display:block}
/* Die Bilder stecken in <picture> (AVIF mit WebP als Rueckfallebene). display:contents
   nimmt das Element aus dem Layout, damit Regeln wie .card-media img{height:100%}
   weiter auf den umgebenden Kasten wirken und nicht auf das <picture>. */
picture{display:contents}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
a{color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}

h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.15;letter-spacing:-.02em}
p{margin:0}

.wrap{width:min(1240px,calc(100% - var(--s6)));margin-inline:auto}
.wrap-narrow{width:min(820px,calc(100% - var(--s6)));margin-inline:auto}

/* Noise overlay – kills the "flat CSS" feel */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Typography helpers ---------- */
.display{font-family:var(--ff-display);font-weight:700;letter-spacing:-.01em;line-height:.92;text-transform:uppercase}
.mono{font-family:var(--ff-mono);font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase}
.lead{font-size:var(--t-lg);line-height:1.62;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}

/* ---------- 4. Progress + Nav ---------- */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:1000;transition:width .1s linear}

#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;gap:var(--s4);
  height:60px;padding:0 var(--s5);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid transparent;
  transform:translateY(-100%);
  transition:transform .45s var(--e-out),border-color .3s;
}
#nav.on{transform:translateY(0);border-bottom-color:var(--line)}
.nav-brand{font-family:var(--ff-display);font-size:var(--t-xl);font-weight:800;letter-spacing:.04em;flex:none}
.nav-brand span{color:var(--accent)}
.nav-links{display:flex;gap:var(--s1);overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;flex:1;margin-left:var(--s5);-webkit-overflow-scrolling:touch}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  flex:none;text-decoration:none;padding:6px 11px;border-radius:var(--r-full);
  font-size:var(--t-sm);color:var(--ink-2);white-space:nowrap;
  transition:background .2s,color .2s;
}
.nav-links a:hover{background:var(--surface-2);color:var(--ink)}
.nav-links a.active{background:var(--ink);color:var(--bg);font-weight:600}

.tgl{
  display:inline-flex;align-items:center;gap:var(--s2);
  height:36px;padding:0 var(--s3);border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--surface);
  font-size:var(--t-sm);color:var(--ink-2);
  transition:border-color .2s,color .2s,transform .2s var(--e-out),background .2s;
}
.tgl:hover{border-color:var(--line-strong);color:var(--ink);transform:translateY(-1px)}
.tgl[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tgl svg{width:16px;height:16px;flex:none}

/* ---------- 5. HERO ---------- */
#hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 52%,var(--sky-3) 100%);transition:background .8s var(--e-out)}
.stars{position:absolute;inset:0;opacity:var(--star-op);transition:opacity .8s var(--e-out)}
/* Horizontglühen. Nachts ein schwacher roter Schein in der Leitfarbe,
   tagsüber neutraler Dunst. Der frühere Warmton stammte aus der Sandpalette. */
.glowline{
  position:absolute;left:0;right:0;bottom:22%;height:38vh;
  background:radial-gradient(58% 100% at 50% 100%,rgba(255,59,48,.15),transparent 72%);
  pointer-events:none;
}
html[data-theme="tag"] .glowline{
  background:radial-gradient(58% 100% at 50% 100%,rgba(255,255,255,.55),transparent 72%);
}

#skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;display:block;z-index:1}
.hero-scrim{position:absolute;left:0;right:0;bottom:0;height:44vh;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 72%,transparent) 62%,color-mix(in srgb,var(--bg) 92%,transparent))}
.hero-inner{position:relative;z-index:3;padding:0 var(--s5) var(--s8)}
.hero-kicker{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);color:var(--ink-2)}
.hero-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

.hero-title{
  font-family:var(--ff-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(76px,20.5vw,340px);line-height:.82;letter-spacing:-.03em;
  margin:0 0 var(--s5);display:flex;flex-wrap:wrap;
}
.hero-title span{display:inline-block;transform:translateY(110%);opacity:0;
  animation:letterIn .95s var(--e-out) forwards}
.hero-title span.accent{color:var(--accent)}
@keyframes letterIn{to{transform:translateY(0);opacity:1}}
.hero-sub{max-width:640px;font-size:var(--t-lg);line-height:1.6;color:var(--ink-2)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s7);margin-top:var(--s6);align-items:start}
.hero-meta > div{display:flex;flex-direction:column;gap:var(--s2)}
.hero-meta .mono{line-height:1}
.hero-clock{font-family:var(--ff-mono);font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.hero-status{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;line-height:1}

.scrolldown{position:absolute;bottom:var(--s5);right:var(--s5);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);color:var(--ink-2)}
.scrolldown .mono{writing-mode:vertical-rl;letter-spacing:.22em}
.scrolldown .rail{position:relative;width:2px;height:56px;border-radius:1px;background:var(--line-strong);overflow:hidden}
.scrolldown .rail::after{content:'';position:absolute;inset:0;border-radius:1px;
  background:linear-gradient(180deg,transparent,var(--accent) 40%,var(--accent));animation:drop 1.9s var(--e-both) infinite}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* Easter-egg hint on the sphere */
#tvsphere{cursor:pointer}
.papst-flash{animation:papst 1.4s var(--e-out)}
@keyframes papst{0%,100%{opacity:0}20%,70%{opacity:1}}

/* ---------- 6. Number strip ---------- */
#numbers{border-block:1px solid var(--line);background:var(--surface);position:relative;z-index:5}
.numgrid{display:grid;grid-template-columns:repeat(6,1fr)}
.numcell{padding:var(--s7) var(--s4);border-right:1px solid var(--line);text-align:center}
.numcell:last-child{border-right:0}
.numval{font-family:var(--ff-display);font-size:var(--t-4xl);font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.numval .u{font-size:.45em;margin-left:.18em;color:var(--ink-2);letter-spacing:0}
.numlabel{margin-top:var(--s2);font-size:var(--t-sm);color:var(--ink-2)}
.numnote{margin-top:2px;font-size:var(--t-xs);color:var(--ink-3);font-style:italic}

/* ---------- 7. Section chrome ---------- */
.section{padding:var(--s11) 0;position:relative}
.section + .section{border-top:1px solid var(--line)}

/* Jedes Themenfeld färbt seinen Kopfbereich minimal in die eigene Akzentfarbe */
/* --tc-ink ist die kontrastsichere Textvariante der Themenfarbe. Sie muss dort
   deklariert werden, wo auch --tc gesetzt ist – sonst greift der Rotfallback. */
.theme-sec,.modal-box,.map-detail{--tc-ink:var(--tc);isolation:isolate}
html[data-theme="tag"] .theme-sec,
html[data-theme="tag"] .modal-box,
html[data-theme="tag"] .map-detail{--tc-ink:color-mix(in srgb,var(--tc) 68%,#000)}
.theme-sec::before{content:'';position:absolute;inset:0 0 auto;height:30%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--tcs,transparent),transparent 82%);opacity:.9}
html[data-theme="tag"] .theme-sec::before{opacity:.42}
.theme-sec > *{position:relative;z-index:1}
.sec-head{display:grid;grid-template-columns:120px 1fr;gap:var(--s6);align-items:start;margin-bottom:var(--s9)}
.sec-no{
  font-family:var(--ff-display);font-size:var(--t-5xl);font-weight:800;line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--tc-ink,var(--accent));
}
.sec-title{font-family:var(--ff-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(40px,7.2vw,104px);line-height:.9;letter-spacing:-.025em;margin-bottom:var(--s4)}
.sec-kicker{display:inline-flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);
  padding:5px 12px;border-radius:var(--r-full);
  background:var(--tcs,var(--surface-2));color:var(--tc-ink,var(--accent));
  font-family:var(--ff-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
.sec-lead{max-width:66ch;font-size:var(--t-lg);line-height:1.62;color:var(--ink-2)}

/* Reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.rv.in{opacity:1;transform:none}

/* ---------- 8. Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--s5)}
.card-wrap{position:relative;display:flex}
.card-wrap > .card{flex:1;min-width:0}

/* Merken-Stern */
.favbtn{
  position:absolute;top:var(--s3);right:var(--s3);z-index:3;
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:rgba(10,12,16,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.72);
  transition:transform .25s var(--e-out),color .25s,background .25s,border-color .25s;
}
.favbtn svg{width:18px;height:18px}
.favbtn svg:not([fill]){fill:currentColor}
.favbtn:hover{transform:scale(1.12);color:#fff;border-color:rgba(255,255,255,.4)}
.favbtn.on{color:#FFC53D;border-color:rgba(255,197,61,.6);background:rgba(10,12,16,.72)}
.favbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.favbtn.big{position:static;width:auto;height:40px;padding:0 var(--s4);gap:var(--s2);
  border-radius:var(--r-full);background:var(--surface-2);border-color:var(--line);
  color:var(--ink-2);display:inline-flex;align-items:center;flex:none}
.favbtn.big span{font-size:var(--t-sm);font-weight:600}
.favbtn.big:hover{transform:translateY(-1px);color:var(--ink)}
.favbtn.big.on{color:#C8971B;background:rgba(255,197,61,.12);border-color:rgba(255,197,61,.45)}
html[data-theme="tag"] .favbtn.on{color:#B8860B}

/* Eigene Liste: schwebt unten rechts, erscheint mit dem ersten Eintrag */
#merkbtn{
  position:fixed;right:var(--s5);bottom:var(--s5);z-index:850;
  display:inline-flex;align-items:center;gap:var(--s2);
  height:48px;padding:0 var(--s5);border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);
  box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);
  font-size:var(--t-sm);font-weight:600;
  animation:fabIn .45s var(--e-out);
  transition:transform .25s var(--e-out),border-color .2s;
}
#merkbtn[hidden]{display:none}
#merkbtn:hover{transform:translateY(-2px);border-color:var(--accent)}
#merkbtn svg{width:17px;height:17px;color:#FFC53D;flex:none}
#merkbtn svg:not([fill]){fill:currentColor}
#merkbtn.only-seen svg{color:#4FAF7C}
html[data-theme="tag"] #merkbtn svg{color:#B8860B}
html[data-theme="tag"] #merkbtn.only-seen svg{color:#2E7D52}
#merkcount{font-variant-numeric:tabular-nums}
@keyframes fabIn{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}

.pin.fav .dot{stroke:#FFC53D;stroke-width:2.4}
.pin.seen .dot{stroke:#4FAF7C;stroke-width:2.4}

/* Gesehen: stille Markierung auf der Kachel, kein zweiter Knopf */
.seenflag{
  position:absolute;top:var(--s3);left:var(--s3);z-index:3;
  display:none;align-items:center;gap:5px;padding:5px 10px 5px 7px;border-radius:var(--r-full);
  background:rgba(79,175,124,.92);color:#08110C;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
}
.seenflag svg{width:12px;height:12px}
.card-wrap.is-seen .seenflag{display:inline-flex}
.card-wrap.is-seen .card-tag{display:none}
.card-wrap.is-seen .card-media img{filter:saturate(.42) contrast(1.02) brightness(.92)}
.card-wrap.is-seen .card{border-color:rgba(79,175,124,.35)}

/* Zwei Zustandsknöpfe in der Detailansicht */
.markrow{display:flex;gap:var(--s2);flex-wrap:wrap;flex:none}
.favbtn.big.seen.on{color:#2E7D52;background:rgba(79,175,124,.14);border-color:rgba(79,175,124,.5)}
html[data-theme="tag"] .favbtn.big.seen.on{color:#1F6B42}

/* Fortschritt in „Meine Orte" */
.progress-card{margin-top:var(--s6);padding:var(--s5);border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line)}
.pc-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  font-size:var(--t-base);color:var(--ink-2)}
.pc-head strong{font-family:var(--ff-display);font-size:var(--t-2xl);color:var(--ink);line-height:1}
.pc-rail{height:6px;border-radius:3px;background:var(--surface-3);margin-top:var(--s3);overflow:hidden}
.pc-rail span{display:block;height:100%;border-radius:3px;background:#4FAF7C;
  transition:width .8s var(--e-out)}
.pc-note{margin-top:var(--s3);font-size:var(--t-sm);color:var(--ink-3)}

.merk-group{margin-top:var(--s6)}
.mg-head{display:flex;align-items:center;gap:var(--s2);
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s3)}
.mg-head svg{width:13px;height:13px}
.mg-head span{margin-left:auto;font-size:12px}
.merk-item.done .mi-img img{filter:saturate(.4) brightness(.9)}
.merk-item.done .favbtn,.merk-item.done .favbtn.on{color:#2E7D52}
.merk-item.done .favbtn svg{stroke-width:3}
.card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  cursor:pointer;text-align:left;
  /* Buttons zentrieren ihren Inhalt senkrecht – das erzeugt sonst Lücken,
     sobald eine Kachel vom Raster auf Nachbarhöhe gestreckt wird. */
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  transition:transform .45s var(--e-out),border-color .3s,box-shadow .45s var(--e-out);
  will-change:transform;
}
.card > .card-media{flex:none}
.card > .card-body{flex:1}
.card:hover{transform:translateY(-6px);border-color:var(--tc,var(--accent));box-shadow:var(--shadow-lg)}
.card:focus-visible{outline:2px solid var(--tc,var(--accent));outline-offset:3px}
.card-media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2);
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  transition:transform .8s var(--e-out),filter .5s;filter:saturate(.86) contrast(1.04)}
.card:hover .card-media img{transform:scale(1.07);filter:saturate(1) contrast(1.04)}
.card-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,8,11,.72));opacity:.85}
html[data-theme="tag"] .card-media::after{background:linear-gradient(180deg,transparent 46%,rgba(20,24,32,.55))}
.card-tag{
  position:absolute;top:var(--s3);left:var(--s3);z-index:2;
  padding:4px 9px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--tc,var(--accent)) 88%,black);
  color:#fff;font-family:var(--ff-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
}
.card-body{display:block;padding:var(--s4) var(--s4) var(--s5)}
.card-title{font-size:var(--t-lg);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.card-sub{margin-top:var(--s1);font-size:var(--t-sm);color:var(--ink-3)}
.card-cta{margin-top:var(--s3);display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tc-ink,var(--accent))}
.card-cta svg{width:12px;height:12px;transition:transform .3s var(--e-out)}
.card:hover .card-cta svg{transform:translateX(4px)}

/* ---------- 9. Modal ---------- */
#modal{position:fixed;inset:0;z-index:1100;display:none;place-items:center;padding:var(--s5)}
#modal.on{display:grid}
.modal-bg{position:absolute;inset:0;background:rgba(4,6,9,.72);backdrop-filter:blur(8px);animation:fade .3s var(--e-out)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-box{
  position:relative;width:min(940px,100%);max-height:88svh;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);animation:pop .42s var(--e-out);
}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.modal-box::-webkit-scrollbar{width:8px}
.modal-box::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:4px}
.modal-hero{position:relative;aspect-ratio:16/8;background:var(--surface-2);overflow:hidden}
.modal-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.modal-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,var(--surface))}
/* Bildnachweis oben links – unten kollidiert er mit dem Titel */
.imgcredit{position:absolute;left:var(--s4);top:var(--s4);z-index:2;max-width:calc(100% - 96px);
  font-family:var(--ff-mono);font-size:10px;line-height:1.5;letter-spacing:.04em;
  color:rgba(255,255,255,.7);background:rgba(8,10,14,.5);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);padding:5px 10px;border-radius:var(--r-sm);
  transition:background .25s,color .25s}
.imgcredit:hover{background:rgba(8,10,14,.78);color:rgba(255,255,255,.92)}
.imgcredit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.imgcredit a:hover{color:#fff}

/* Bildnachweis-Liste */
.credit-list{margin-top:var(--s6);border-top:1px solid var(--line)}
.credit-row{display:grid;grid-template-columns:1.4fr 1.5fr auto auto;gap:var(--s4);align-items:baseline;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.credit-row .cr-w{font-weight:600}
.credit-row .cr-a{color:var(--ink-2)}
.credit-row .cr-l,.credit-row .cr-p{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.credit-row a{text-decoration:underline;text-underline-offset:2px}
.credit-row a:hover{color:var(--accent)}
.foot-actions{display:flex;gap:var(--s4);align-items:center}
.foot-actions button,.foot-actions a{text-decoration:underline;text-underline-offset:3px;color:var(--ink-2)}
.foot-actions button:hover,.foot-actions a:hover{color:var(--accent)}
.modal-close{
  position:absolute;top:var(--s4);right:var(--s4);z-index:3;width:40px;height:40px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(10,12,16,.66);color:#fff;backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);transition:transform .25s var(--e-out),background .25s;
}
.modal-close:hover{transform:rotate(90deg) scale(1.06);background:var(--accent)}
.modal-body{padding:var(--s6) var(--s7) var(--s7);margin-top:-64px;position:relative;z-index:2}
.modal-title{font-family:var(--ff-display);font-size:clamp(34px,5vw,60px);font-weight:800;
  text-transform:uppercase;line-height:.94;letter-spacing:-.02em}
.modal-sub{margin-top:var(--s2);color:var(--tc-ink,var(--accent));font-family:var(--ff-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
.modal-head{display:flex;gap:var(--s5);align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.modal-txt{margin-top:var(--s5);font-size:var(--t-base);line-height:1.7;color:var(--ink-2);max-width:66ch}

/* „Warum hin" – die Kernaussage, direkt unter dem Titel */
.whybox{margin-top:var(--s6);padding:var(--s5) var(--s5) var(--s5) var(--s6);border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);position:relative;overflow:hidden}
.whybox::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc,var(--accent))}
.whybox .wl{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tc-ink,var(--accent));margin-bottom:var(--s2)}
.whybox p{font-size:var(--t-lg);line-height:1.55;color:var(--ink);letter-spacing:-.01em}

/* Weiterführende Links */
.linkrow{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--line)}
.linkrow a,.linkrow button{display:inline-flex;align-items:center;height:38px;padding:0 var(--s4);
  border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface-2);
  font-size:var(--t-sm);color:var(--ink-2);text-decoration:none;
  transition:border-color .2s,color .2s,transform .2s var(--e-out)}
.linkrow a:hover,.linkrow button:hover{border-color:var(--line-strong);color:var(--ink);transform:translateY(-1px)}
.linkrow a.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.linkrow a.primary:hover{color:var(--bg);opacity:.86}

/* Merkliste */
.merk-list{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s6)}
.merk-item{display:flex;align-items:center;gap:var(--s4);padding:var(--s3);position:relative;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.merk-item .mi-img{flex:none;width:76px;height:56px;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-3)}
.merk-item .mi-img img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.merk-item .mi-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mi-title{font-size:var(--t-base);font-weight:600;text-align:left;color:var(--ink)}
.mi-title:hover{color:var(--accent)}
.mi-meta{font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.mi-sub{font-size:var(--t-sm);color:var(--ink-3)}
.merk-item .favbtn{position:static;flex:none;background:transparent;border-color:transparent;color:#FFC53D}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  margin-top:var(--s6);background:transparent;border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 0 0 1px var(--line)}
.fact{background:var(--surface);padding:var(--s4);box-shadow:0 0 0 1px var(--line)}
.fact-k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fact-v{margin-top:var(--s1);font-size:var(--t-base);font-weight:600}
.funbox{
  margin-top:var(--s6);padding:var(--s5);border-radius:var(--r-md);
  background:var(--tcs,var(--surface-2));border-left:3px solid var(--tc,var(--accent));
}
.funbox .fl{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tc-ink,var(--accent))}
.funbox p{line-height:1.62}

/* ---------- 10. MAP ---------- */
.map-shell{display:grid;grid-template-columns:1fr 340px;gap:var(--s6);align-items:start}
.map-frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-deep);border:1px solid var(--line);
}
#berlinmap{display:block;width:100%;height:auto;touch-action:pan-y}
.d-shape{fill:var(--map-land);stroke:var(--map-line);stroke-width:.8;transition:fill .3s}
.d-shape:hover{fill:var(--map-land-2)}
.w-lake{fill:var(--map-water);opacity:.72}
.w-river{fill:none;stroke:var(--map-water);stroke-width:2.4;stroke-linecap:round;opacity:.85}
.w-creek{fill:none;stroke:var(--map-water);stroke-width:.9;opacity:.5}
#wallpath{fill:none;stroke:#FF3B30;stroke-width:3.2;stroke-dasharray:8 5;stroke-linecap:round;opacity:0;transition:opacity .5s;filter:drop-shadow(0 0 5px rgba(255,59,48,.9))}
#wallpath.on{opacity:1;animation:march 3s linear infinite}
@keyframes march{to{stroke-dashoffset:-24}}
.pin{cursor:pointer}
.pin circle.hit{fill:transparent}
.pin circle.dot{stroke:var(--bg-deep);stroke-width:1.6;transition:r .3s var(--e-out),opacity .3s}
.pin:hover circle.dot{r:8}
.pin.mute{opacity:.16;pointer-events:none}
.pin .ring{fill:none;stroke-width:1.4;opacity:0;transition:opacity .3s}
.pin:hover .ring,.pin.sel .ring{opacity:.9;animation:ripple 1.6s var(--e-out) infinite}
@keyframes ripple{0%{r:7;opacity:.9}100%{r:19;opacity:0}}
.maplabel{font-family:var(--ff-mono);font-size:9px;letter-spacing:.06em;fill:var(--ink-3);pointer-events:none;text-transform:uppercase}

.map-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:var(--s4)}
.filterbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4)}
.filter-h{font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--surface-2);font-size:var(--t-sm);color:var(--ink-2);
  transition:all .22s var(--e-out);
}
.chip:hover{border-color:var(--line-strong);color:var(--ink);transform:translateY(-1px)}
.chip .sw{width:8px;height:8px;border-radius:50%;flex:none}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.map-detail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;min-height:200px}
.map-detail .ph{padding:var(--s6) var(--s4);text-align:center;color:var(--ink-3);font-size:var(--t-sm)}
.map-detail img{width:100%;aspect-ratio:16/10;object-fit:cover}
.map-detail .mb{padding:var(--s4)}
.map-detail h3{font-size:var(--t-lg);letter-spacing:-.015em}
.map-detail .ms{font-family:var(--ff-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--tc-ink,var(--accent));margin-top:2px}
.map-detail p{margin-top:var(--s3);font-size:var(--t-sm);line-height:1.58;color:var(--ink-2)}
.map-detail .more{margin-top:var(--s4);width:100%;padding:10px;border-radius:var(--r-sm);
  background:var(--ink);color:var(--bg);font-size:var(--t-sm);font-weight:600;transition:opacity .2s}
.map-detail .more:hover{opacity:.85}
.maptip{position:absolute;pointer-events:none;padding:6px 10px;border-radius:var(--r-sm);
  background:var(--ink);color:var(--bg);font-size:var(--t-xs);font-weight:600;white-space:nowrap;
  opacity:0;transform:translate(-50%,-160%);transition:opacity .18s;z-index:6}
.maptip.on{opacity:1}

/* Zoom-Steuerung */
.mapzoom{position:absolute;right:var(--s3);bottom:var(--s3);z-index:5;display:flex;flex-direction:column;gap:6px}
.mapzoom button{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);
  backdrop-filter:blur(10px);color:var(--ink-2);font-size:17px;font-weight:600;line-height:1;
  transition:color .2s,border-color .2s,transform .2s var(--e-out)}
.mapzoom button:hover{color:var(--ink);border-color:var(--line-strong);transform:translateY(-2px)}
.mapzoom button.rs{font-family:var(--ff-mono);font-size:9px;letter-spacing:.04em}
#mapviewport{transition:transform .55s var(--e-out)}
#mapviewport.dragging{transition:none}
.map-frame.grab #berlinmap{cursor:grab}
.map-frame.grabbing #berlinmap{cursor:grabbing}
.maphint{position:absolute;left:var(--s3);bottom:var(--s3);z-index:5;font-family:var(--ff-mono);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);pointer-events:none}

/* ---------- 11. Viz shared ---------- */
.viz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s7);margin-bottom:var(--s8)}
.viz-h{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:flex-end;margin-bottom:var(--s6)}
.viz-t{font-family:var(--ff-display);font-size:var(--t-2xl);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.viz-d{margin-top:var(--s2);font-size:var(--t-sm);color:var(--ink-2);max-width:56ch}

/* --- 11a Wall timeline --- */
.tl-track{position:relative;height:80px;margin:var(--s7) 0 var(--s6)}
.tl-line{position:absolute;left:0;right:0;top:38px;height:2px;background:var(--line)}
.tl-fill{position:absolute;left:0;top:38px;height:2px;background:var(--accent);transition:width .35s var(--e-out)}
.tl-node{position:absolute;top:30px;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:var(--surface-2);border:2px solid var(--line-strong);transition:all .3s var(--e-out)}
.tl-node:hover{transform:scale(1.25);border-color:var(--accent)}
.tl-node.on{background:var(--accent);border-color:var(--accent);transform:scale(1.3);box-shadow:0 0 0 6px rgba(255,59,48,.18)}
.tl-node .yr{position:absolute;top:-28px;left:50%;transform:translateX(-50%);
  font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);opacity:0;
  transition:opacity .25s,color .3s;pointer-events:none;
  background:var(--surface);padding:2px 5px;border-radius:4px}
.tl-node:hover .yr{opacity:1;color:var(--ink)}
.tl-node.on .yr{opacity:1;color:var(--accent);font-weight:600}
.tl-axis{position:absolute;left:0;right:0;top:58px;height:16px}
.tl-tick{position:absolute;transform:translateX(-50%);font-family:var(--ff-mono);font-size:10px;color:var(--ink-3)}
.tl-tick::before{content:'';position:absolute;left:50%;top:-14px;width:1px;height:7px;background:var(--line-strong)}
.tl-panel{display:grid;grid-template-columns:auto 1fr;gap:var(--s6);align-items:start;min-height:150px}
.tl-year{font-family:var(--ff-display);font-size:clamp(60px,10vw,132px);font-weight:800;line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--accent);font-variant-numeric:tabular-nums}
.tl-t{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;margin-bottom:var(--s3)}
.tl-d{font-size:var(--t-lg);line-height:1.6;color:var(--ink-2);max-width:58ch}
.tl-ctrls{display:flex;gap:var(--s2);margin-top:var(--s5)}

.wallfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-top:var(--s7)}
.wf{background:var(--surface);padding:var(--s5) var(--s4);text-align:center}
.wf .v{font-family:var(--ff-display);font-size:var(--t-3xl);font-weight:700;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.wf .v .u{font-size:.42em;margin-left:.16em;color:var(--ink-2);font-family:var(--ff-mono);font-weight:400}
.wf .l{margin-top:var(--s2);font-size:var(--t-xs);color:var(--ink-2);line-height:1.4}

/* --- 11b Reichstag / Christo --- */
.reich-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:center}
#reichsvg{width:100%;height:auto;display:block}
.wrapfabric{opacity:0;transition:opacity .9s var(--e-out)}
.wrapped .wrapfabric{opacity:1}
.wrapped .reich-solid{opacity:0;transition:opacity .9s var(--e-out)}
.reich-solid{transition:opacity .9s var(--e-out)}
.domecount{font-family:var(--ff-mono);font-size:var(--t-4xl);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.rampctl{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5)}

/* --- 11c Heights --- */
.hchart{position:relative;display:flex;align-items:flex-end;gap:var(--s3);height:440px;
  padding-top:var(--s6);border-bottom:1px solid var(--line-strong)}
.hbar{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;cursor:default}
.hbar .fill{width:100%;border-radius:4px 4px 0 0;height:var(--h,0);transition:height 1.3s var(--e-out);position:relative;
  background-image:linear-gradient(180deg,rgba(255,255,255,.18),transparent 42%)}
.href-list{display:none;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
  font-family:var(--ff-mono);font-size:var(--t-xs);color:var(--ink-3);line-height:1.8}
.hbar .fill::after{content:'';position:absolute;inset:0;border-radius:4px 4px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.hbar .hv{order:-1;text-align:center;margin-bottom:6px;
  font-family:var(--ff-mono);font-size:var(--t-xs);font-weight:600;opacity:0;transition:opacity .5s .9s}
.hbar.in .hv{opacity:1}
.hbar .hn{margin-top:var(--s3);font-size:var(--t-xs);color:var(--ink-2);text-align:center;
  line-height:1.3;height:34px;display:flex;align-items:flex-start;justify-content:center}
.hbar:hover .fill{filter:brightness(1.18)}
.href{position:absolute;left:0;right:0;border-top:1px dashed var(--line-strong);pointer-events:none}
.href span{position:absolute;right:0;top:-18px;font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);
  background:var(--surface);padding:0 6px}
.elev{margin-top:var(--s7);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5)}
.elev-read{font-family:var(--ff-display);font-size:var(--t-4xl);font-weight:800;font-variant-numeric:tabular-nums;line-height:1;min-width:190px}
.elev-read small{font-size:.4em;color:var(--ink-2);margin-left:.2em}

/* Papstrache */
.papst-wrap{display:grid;grid-template-columns:1fr 320px;gap:var(--s7);align-items:center;margin-top:var(--s8);
  padding-top:var(--s7);border-top:1px solid var(--line)}
#papstsvg{width:100%;max-width:340px;margin-inline:auto;display:block}
#papstcross{opacity:0;transition:opacity .25s}

/* --- 11d Treasures timeline --- */
.tr-scroll{overflow-x:auto;padding-bottom:var(--s5);scrollbar-width:thin;cursor:grab;
  scrollbar-color:var(--surface-3) transparent}
.tr-scroll.grabbing{cursor:grabbing}
.tr-scroll::-webkit-scrollbar{height:6px}
.tr-scroll::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}
.tr-rail{display:flex;gap:var(--s5);padding:var(--s6) var(--s1) var(--s4);position:relative;min-width:max-content}
.tr-rail::before{content:'';position:absolute;left:0;right:0;top:24px;height:1px;background:var(--line)}
.tr-item{position:relative;width:264px;flex:none;padding-top:var(--s6)}
.tr-item::before{content:'';position:absolute;top:20px;left:24px;width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:2px solid var(--tc,var(--accent))}
.tr-item.star::before{background:var(--tc,var(--accent));box-shadow:0 0 0 5px var(--tcs,transparent)}
.tr-y{font-family:var(--ff-mono);font-size:var(--t-xs);color:var(--tc-ink,var(--accent));letter-spacing:.06em}
.tr-card{margin-top:var(--s3);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:transform .35s var(--e-out),border-color .3s}
.tr-card:hover{transform:translateY(-4px);border-color:var(--tc,var(--accent))}
.tr-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tr-b{padding:var(--s4)}
.tr-n{font-weight:600;font-size:var(--t-base);letter-spacing:-.01em}
.tr-m{font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.tr-d{margin-top:var(--s3);font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}

/* --- 11e Areas --- */
.area-wrap{display:grid;grid-template-columns:1fr 340px;gap:var(--s7);align-items:center}
.area-stage{display:flex;flex-direction:column;align-items:center;gap:var(--s5)}
#areasvg{width:100%;max-width:440px;height:auto}
.area-cap{min-height:44px;text-align:center;font-size:var(--t-sm);color:var(--ink-2);max-width:38ch;line-height:1.5}
.area-cap strong{color:var(--ink);font-weight:600}
.ag{transition:opacity .25s var(--e-out)}
.ag rect{transition:fill-opacity .25s var(--e-out),stroke-width .25s}
.area-legend{display:flex;flex-direction:column;gap:var(--s3)}
.al{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid transparent;transition:border-color .25s,transform .25s var(--e-out)}
.al:hover{border-color:var(--line-strong);transform:translateX(3px)}
.al .sw{width:12px;height:12px;border-radius:3px;flex:none}
.al .an{font-size:var(--t-sm);font-weight:600}
.al .av{margin-left:auto;font-family:var(--ff-mono);font-size:var(--t-xs);color:var(--ink-2)}
.al .ax{font-size:var(--t-xs);color:var(--ink-3)}

/* --- 11f Bouncer --- */
.bounce-wrap{display:grid;grid-template-columns:300px 1fr;gap:var(--s7);align-items:start}
.bouncer{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--bg-deep);border:1px solid var(--line)}
#bouncersvg{width:100%;display:block}
.b-mood{padding:var(--s4);border-top:1px solid var(--line);font-family:var(--ff-mono);font-size:var(--t-xs);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:center;min-height:46px;
  display:flex;align-items:center;justify-content:center}
.q-box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s6)}
.q-step{font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.q-t{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;margin:var(--s3) 0 var(--s5)}
.q-opts{display:flex;flex-direction:column;gap:var(--s3)}
.q-opt{text-align:left;padding:var(--s4);border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);transition:all .22s var(--e-out);font-size:var(--t-base)}
.q-opt:hover{border-color:var(--accent);transform:translateX(4px);background:var(--surface-3)}
.q-opt:disabled{opacity:.4;pointer-events:none}
.q-result{text-align:center;padding:var(--s5) 0}
.q-verdict{font-family:var(--ff-display);font-size:clamp(56px,10vw,128px);font-weight:800;line-height:.85;text-transform:uppercase}
.q-verdict.no{color:var(--accent)}
.q-verdict.yes{color:#4FAF7C}
.q-why{margin-top:var(--s4);color:var(--ink-2);max-width:48ch;margin-inline:auto;line-height:1.6}

/* --- 11g Sequencer --- */
.seq{display:grid;gap:var(--s3);margin-top:var(--s5)}
.seq-row{display:grid;grid-template-columns:74px 1fr;gap:var(--s3);align-items:center}
.seq-lab{font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.seq-steps{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}
.step{aspect-ratio:1;border-radius:4px;background:var(--surface-3);border:1px solid transparent;
  transition:background .16s,transform .16s var(--e-out),box-shadow .16s;min-height:0;min-width:0}
.step:nth-child(4n+1){background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.step.on{background:var(--tc,#8A7BE0);box-shadow:0 0 12px -2px var(--tc,#8A7BE0)}
.step.cur{transform:scale(1.22);border-color:var(--ink)}
.seq-ctrls{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;margin-top:var(--s6)}
.bigbtn{display:inline-flex;align-items:center;gap:var(--s3);height:48px;padding:0 var(--s5);
  border-radius:var(--r-full);background:var(--ink);color:var(--bg);font-weight:600;
  transition:transform .25s var(--e-out),opacity .2s}
.bigbtn:hover{transform:translateY(-2px)}
.bigbtn:active{transform:translateY(0)}
.bigbtn.alt{background:transparent;border:1px solid var(--line-strong);color:var(--ink)}
.bpm{display:flex;align-items:center;gap:var(--s3);font-family:var(--ff-mono);font-size:var(--t-sm)}

/* Range inputs */
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
  background:var(--surface-3);outline:none;width:180px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--ink);cursor:pointer;border:3px solid var(--bg);box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:transform .2s var(--e-out)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.16)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ink);
  cursor:pointer;border:3px solid var(--bg)}

/* --- 11h Counters (BER / Currywurst) --- */
.fun-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s5)}
.fun-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s4)}
.fun-card h3{font-family:var(--ff-display);font-size:var(--t-xl);text-transform:uppercase;font-weight:700}
/* Ost/West-Vergleich der Ampelmännchen */
.ampel-card{grid-column:1/-1}
.ampel-compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s2)}
.ampel-fig{margin:0;display:flex;gap:var(--s4);align-items:flex-start}
.ampel-signal{flex:none;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:14px;
  background:#0B0D10;border:1px solid rgba(255,255,255,.1)}
.ampel-signal .lamp{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.035);transition:background .45s var(--e-out),box-shadow .45s var(--e-out)}
.ampel-signal .lamp svg{width:44px;height:auto;opacity:.16;transition:opacity .45s var(--e-out)}
.ampel-signal .lamp.lit svg{opacity:1}
.ampel-signal .lamp.red.lit{background:rgba(255,59,48,.14);box-shadow:0 0 22px -4px rgba(255,59,48,.55)}
.ampel-signal .lamp.green.lit{background:rgba(79,175,124,.14);box-shadow:0 0 22px -4px rgba(79,175,124,.55)}
.ampel-fig figcaption{font-size:var(--t-sm);line-height:1.5;color:var(--ink-2)}
.ampel-fig figcaption strong{color:var(--ink);font-family:var(--ff-display);font-size:var(--t-lg);
  text-transform:uppercase;letter-spacing:.02em}
.bigno{font-family:var(--ff-display);font-size:clamp(44px,7vw,80px);font-weight:800;line-height:.9;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--tc-ink,var(--accent))}
.wurstbtn{align-self:flex-start;position:relative}
.wurstbtn svg{width:104px;height:104px;transition:transform .12s var(--e-out)}
.wurstbtn:active svg{transform:scale(.9) rotate(-6deg)}
.pop{position:absolute;left:50%;top:0;pointer-events:none;font-family:var(--ff-mono);font-size:var(--t-sm);
  font-weight:700;color:var(--accent);animation:popup .9s var(--e-out) forwards}
@keyframes popup{to{transform:translate(-50%,-64px);opacity:0}}

/* Ampelmann walker */
#walker{position:fixed;left:var(--s5);bottom:var(--s5);width:82px;z-index:800;pointer-events:none;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--e-out),transform .5s var(--e-out);
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45))}
#walker.on{opacity:1;transform:none}
#walker svg{width:100%;height:auto;display:block}
.amp-leg,.amp-arm{transform-origin:center top;transition:transform .12s linear}

/* Konami rain */
.rain{position:fixed;top:-80px;z-index:9997;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(115vh) rotate(var(--rot,360deg))}}

/* ---------- 12. Footer ---------- */
footer{padding:var(--s9) 0 var(--s7);border-top:1px solid var(--line);background:var(--bg-deep)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s7)}
.foot-brand{font-family:var(--ff-display);font-size:var(--t-4xl);font-weight:800;text-transform:uppercase;line-height:.9}
.foot-brand span{color:var(--accent)}
/* War frueher h5, auf h4 gehoben, damit die Ueberschriftenkette keine Ebene
   ueberspringt. font-weight und line-height stehen hier ausdruecklich, weil die
   Sammelregel h1,h2,h3,h4 weiter oben fuer h5 nicht galt: sonst wuerden die
   Beschriftungen duenner (600 statt 700) und 4,5px flacher. */
.foot h4{font-family:var(--ff-mono);font-size:10px;font-weight:700;line-height:1.6;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s3)}
.foot p,.foot li{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.foot a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.foot a:hover{color:var(--ink);border-color:var(--accent)}
.foot-bottom{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;font-size:var(--t-xs);color:var(--ink-3)}

/* ---------- 13. Responsive ---------- */
@media (max-width:1080px){
  .map-shell{grid-template-columns:1fr}
  .map-side{position:static}
  /* Das Detailfeld saesse hier weit unter der Karte: ein Tipp bliebe unbemerkt.
     Stattdessen oeffnet der Punkt direkt die Detailansicht. */
  .map-detail{display:none}
  .map-frame{position:sticky;top:72px}
  .maphint{content:none}
  .pin .hit{r:20}
  .pin.sel .dot{stroke:var(--ink);stroke-width:3}
  .reich-wrap,.area-wrap,.papst-wrap,.bounce-wrap{grid-template-columns:1fr}
  .numgrid{grid-template-columns:repeat(3,1fr)}
  .numcell:nth-child(3n){border-right:0}
  .numcell:nth-child(-n+3){border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  :root{--s11:96px;--s9:64px;--s8:48px;--s7:32px}
  .sec-head{grid-template-columns:1fr;gap:var(--s4)}
  .sec-no{font-size:var(--t-3xl)}
  .viz{padding:var(--s5)}
  .tl-panel{grid-template-columns:1fr;gap:var(--s4)}
  /* Höhenchart kippt auf Mobil in die Waagerechte */
  .hchart{flex-direction:column;height:auto;gap:10px;padding-top:0;border-bottom:0;align-items:stretch}
  .hbar{flex:none;flex-direction:row;align-items:center;justify-content:flex-start;height:32px}
  .hbar .hn{order:-2;flex:0 0 104px;height:auto;margin:0;text-align:left;font-size:11px;align-items:center;line-height:1.2}
  .hbar .hv{order:2;flex:none;margin:0 0 0 10px;width:54px;text-align:left}
  .hbar .fill{height:100%;width:var(--h,0);border-radius:0 4px 4px 0;transition:width 1.1s var(--e-out)}
  .hbar .fill::after{border-radius:0 4px 4px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
  .href{display:none}
  .href-list{display:block}
  .elev-read{min-width:0}
  #papstsvg{max-width:100%}
  .area-wrap{gap:var(--s5)}
  .modal-body{padding:var(--s5) var(--s5) var(--s6);margin-top:-40px}
  .foot-grid{grid-template-columns:1fr;gap:var(--s6)}
  .numgrid{grid-template-columns:repeat(2,1fr)}
  .numcell{padding:var(--s5) var(--s3)}
  .numval{font-size:var(--t-2xl)}
  .nav-brand{font-size:var(--t-lg)}
  #walker{display:none}
  #merkbtn{right:var(--s4);bottom:var(--s4);height:52px;padding:0 var(--s4);gap:6px}
  #merkbtn .mb-label{display:none}
  /* Platz schaffen, damit der schwebende Knopf die Statuszeile nicht ueberdeckt */
  .hero-inner{padding-bottom:var(--s9)}
  .hero-meta{gap:var(--s5)}
  .hero-clock,.hero-status{font-size:var(--t-xl)}
  .markrow{width:100%}
  .markrow .favbtn.big{flex:1;justify-content:center}
  .ampel-compare{grid-template-columns:1fr;gap:var(--s5)}
  .credit-row{grid-template-columns:1fr auto;gap:var(--s2) var(--s3)}
  .credit-row .cr-a{grid-column:1/-1}
  .modal-head{gap:var(--s4)}
  #skyline{height:24vh;min-height:168px}
  .hero-scrim{height:32vh}
  .seq{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent;padding-bottom:var(--s2)}
  .seq-row{grid-template-columns:52px 1fr;min-width:540px}
  .mapzoom{flex-direction:row;right:auto;left:var(--s3)}
  .maphint{display:none}
  .cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4)}
}
@media (max-width:520px){
  .numgrid{grid-template-columns:1fr 1fr}
  .hero-inner{padding-bottom:var(--s8)}
  .seq-steps{gap:2px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .hero-title span{opacity:1;transform:none}
}

/* print-ish safety */
@media (max-width:360px){ .wrap,.wrap-narrow{width:calc(100% - var(--s4))} }