/* =====================================================================
   AKTIONSWOCHE 2026 – DIE LINKE Berlin-Mitte
   Design nach dem CI von "Berlin bezahlbar machen":
   rote Vollflächen, Lila als Akzent, kantige Flächen (kein Radius),
   weiche Schatten (4px 4px 6px), riesige enge Headlines.
   Schriften: Work Sans (Display) + Inter (Fließtext), wie berlin-bezahlbar-machen.de.
   ===================================================================== */

/* ---------- Lokale Schriften (selbst gehostet, keine externen Requests / DSGVO) ---------- */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/worksans-variable.ttf") format("truetype");
}
@font-face {
  font-family: "Work Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/worksans-italic-variable.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-variable.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-italic-variable.ttf") format("truetype");
}

/* ---------- Design Tokens (CI) ---------- */
:root {
  --red:          #FF0000;
  --red-deep:     #CC0000;
  --purple:       #632199;
  --purple-dark:  #3B0F6B;
  --purple-mid:   #8B5CC7;
  --purple-light: #EBEBFF;
  --black:        #000000;
  --gray:         #404040;
  --white:        #FFFFFF;

  --shadow-banner: 4px 4px 6px rgba(0, 0, 0, .25);
  --shadow-button: 0 4px 4px rgba(0, 0, 0, .25);

  --maxw: 85rem;
  --pad-x: clamp(1.25rem, 5vw, 5rem);
  --pad-y: clamp(3rem, 7vw, 5.5rem);

  --font-display: "Work Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  line-height: 1.55;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

::selection { background: var(--purple); color: var(--white); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--black); color: var(--white); padding: 12px 18px;
  font-weight: 800;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

/* Grundraster: jede Sektion ist eine Farbfläche mit innerem Maximal-Container */
section { padding: var(--pad-y) var(--pad-x); }

/* =====================================================================
   TYPOGRAFIE
   ===================================================================== */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900; /* Work Sans Black, wie text-h1/h2/h3 auf berlin-bezahlbar-machen.de */
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .88;
}

/* Highlight-Wort: gedrehter Lila-Kasten (CI-Element)
   Großzügig gepolstert und nur leicht gedreht, damit nichts abgeschnitten
   wirkt und der Text auf dem Lila sauber lesbar bleibt. */
.hl {
  display: inline-block;
  background: var(--purple);
  color: var(--white);
  padding: .1em .3em .16em;
  margin: 0 .06em;
  line-height: 1.02;
  transform: rotate(-2deg);
  box-shadow: var(--shadow-button);
}
/* Überschriften brauchen Luft, sonst schneidet die Drehung oben/unten an */
h1:has(.hl), h2:has(.hl), h3:has(.hl) { padding: .12em 0; }
/* Auf lila Fläche dreht sich das Verhältnis um */
.mitmachen .hl { background: var(--white); color: var(--purple); }
/* Auf rotem Grund braucht das Lila einen hellen Rand, sonst „klebt" es */
.counter .hl, .hero .hl { box-shadow: 0 0 0 2px var(--white), var(--shadow-button); }

/* Sektions-Kopf */
.section-head {
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--maxw); margin: 0 auto 2rem;
}
.section-num {
  font-family: var(--font-display);
  font-weight: 800; /* extrabold */
  font-size: 1.15rem;
  background: var(--black); color: var(--white);
  padding: .25rem .6rem; flex: 0 0 auto;
}
.section-head h2 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); color: var(--red); }
.section-head--light h2 { color: var(--white); }
.section-head--light .section-num { background: var(--white); color: var(--black); }

/* =====================================================================
   BUTTONS (kantig, 2px Rand, Hover -> Lila)
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-display);
  font-weight: 800; /* extrabold, wie CTA-Buttons auf berlin-bezahlbar-machen.de */
  font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
  text-transform: uppercase; letter-spacing: .01em; line-height: 1;
  padding: .7em 1.3em;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--white); color: var(--black);
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-align: center;
}
.btn:hover {
  background: var(--purple); color: var(--white); border-color: var(--purple);
  box-shadow: var(--shadow-button);
}
.btn--big { font-size: clamp(1.15rem, 1rem + .9vw, 1.9rem); padding: .65em 1.2em; }
.btn--mini { font-size: .95rem; padding: .6em 1em; }

/* Auf roter Fläche */
.btn--red   { background: var(--red);   color: var(--white); border-color: var(--white); }
.btn--ghost { background: transparent;  color: var(--white); border-color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--red); border-color: var(--white); }
/* Auf heller Fläche */
.btn--white { background: var(--white); color: var(--red); border-color: var(--red); }
.btn--cta   { background: var(--red);   color: var(--white); border-color: var(--red); }
.btn--nav   { background: var(--white); color: var(--red); border-color: var(--white); font-size: 1rem; padding: .55em .9em; }

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--red);
  box-shadow: var(--shadow-banner);
}
.nav__bar {
  display: flex; align-items: center; gap: 1.4rem;
  max-width: var(--maxw); margin: 0 auto;
  padding: .8rem var(--pad-x);
}
.nav__brand { display: flex; align-items: center; gap: .5rem; color: var(--white); }
.nav__fist { font-size: 1.4rem; }
.nav__brandtext {
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1;
}
.nav__links { display: flex; gap: .3rem; margin-left: auto; }
.nav__links a {
  display: inline-block;
  color: var(--white); font-weight: 700; font-size: 1.02rem;
  padding: .25em .6em; text-decoration: underline;
  transition: transform .3s ease, background .2s ease;
}
.nav__links a:hover { background: var(--purple); text-decoration: none; transform: rotate(-4deg); }

.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.nav__burger span { width: 26px; height: 3px; background: var(--white); transition: .2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .6rem var(--pad-x) 1.4rem;
  background: var(--red);
  border-top: 2px solid rgba(255, 255, 255, .3);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  color: var(--white); font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.6rem; padding: .5rem .2rem;
}
.mobile-menu .btn { margin-top: .8rem; }

/* =====================================================================
   HERO (rote Vollfläche)
   ===================================================================== */
.hero {
  background: var(--red); color: var(--white);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero__inner { max-width: var(--maxw); margin: 0 auto; }
.hero__col { min-width: 0; }
.hero__col--full { max-width: 52rem; }

.hero__kicker { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.tag {
  font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .4em .7em; border: 2px solid var(--white); color: var(--white);
}
.tag--red { background: var(--white); color: var(--red); }
.tag--outline { background: transparent; }

.hero__title { margin-bottom: 1.1rem; }
.hero__line { display: block; font-size: clamp(3.4rem, 12vw, 8.5rem); line-height: .8; }

.hero__date { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-bottom: 1.3rem; }
.hero__sticker {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.2rem, 1rem + 1.4vw, 2.1rem);
  background: var(--purple); color: var(--white);
  padding: .12em .35em; transform: rotate(-4deg);
}
.hero__place { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }

.hero__lead { font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); font-weight: 500; max-width: 44ch; margin-bottom: 1.6rem; }
.hero__lead strong { font-weight: 800; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.5rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-weight: 700; font-size: .95rem; }

/* =====================================================================
   PROGRAMM (weiße Fläche) – der Kern der Seite
   ===================================================================== */
.programm { background: var(--white); }
.programm__hint { max-width: var(--maxw); margin: 0 auto 1.6rem; font-weight: 600; }

/* Tages-Buttons */
.daybar {
  max-width: var(--maxw); margin: 0 auto 2rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: .5rem;
}
.daytab {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .8rem .4rem;
  border: 2px solid var(--black); background: var(--white); color: var(--black);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.daytab:hover { background: var(--purple-light); }
.daytab__wd { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; }
.daytab__date { font-weight: 700; font-size: .88rem; }
.daytab__dot { width: 7px; height: 7px; background: var(--purple); margin-top: .3rem; opacity: 0; }
.daytab[aria-selected="true"] {
  background: var(--red); color: var(--white); border-color: var(--red);
  box-shadow: var(--shadow-button);
}
.daytab--today .daytab__dot { opacity: 1; }
.daytab[aria-selected="true"] .daytab__dot { background: var(--white); }

/* Tagesansicht */
.dayview { max-width: var(--maxw); margin: 0 auto; }
.day { animation: fadeUp .3s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.day__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  background: var(--black); color: var(--white);
  padding: 1rem 1.2rem; margin-bottom: 1.2rem;
}
.day__wd { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1; }
.day__date { font-weight: 800; font-size: 1.15rem; }
.day__ort { font-weight: 700; background: var(--white); color: var(--black); padding: .15em .6em; font-size: .92rem; }
.day__ort--tbd { opacity: .7; font-style: italic; }
.day__theme {
  margin-left: auto; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  background: var(--purple); color: var(--white); padding: .12em .5em; font-size: 1.05rem;
}
.day__hint { font-weight: 600; font-size: .9rem; color: var(--gray); margin-bottom: .9rem; }

/* Zeitstrahl & Programmblöcke */
.timeline { display: flex; flex-direction: column; gap: .7rem; }

.block {
  position: relative; width: 100%; text-align: left;
  display: grid; grid-template-columns: 108px 1fr auto; align-items: center;
  gap: .6rem 1.2rem;
  padding: 1.15rem 1.3rem;
  /* Farbiger Block in der Typ-Farbe – deutlich getönt, aber gut lesbar */
  background: var(--tint, var(--purple-light));
  border: 3px solid var(--type, var(--red));
  border-radius: 18px;
  box-shadow: var(--shadow-button);
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.block::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 8px; border-radius: 0 8px 8px 0; background: var(--type, var(--red));
}
.block:hover { transform: translateY(-3px); box-shadow: var(--shadow-banner); }

.block__time {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.05;
  color: var(--white); background: var(--type, var(--red));
  padding: .25em .5em; border-radius: 10px; text-align: center;
  justify-self: start; align-self: center;
}
.block__body { display: flex; flex-direction: column; gap: .14rem; min-width: 0; }
.block__type { font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--type, var(--gray)); }
/* Lange Wörter wie „Mieter:innenversammlung" müssen umbrechen dürfen,
   sonst schieben sie sich unter den Details-Button. */
.block__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); line-height: 1;
  overflow-wrap: break-word; hyphens: auto;
}
.block__short { font-weight: 500; font-size: .95rem; overflow-wrap: anywhere; }
.block__more {
  font-weight: 800; font-size: .8rem; text-transform: uppercase; white-space: nowrap;
  color: var(--white); background: var(--black); padding: .45em .8em; border-radius: 999px;
}

.block__status {
  position: absolute; top: -12px; right: 14px;
  font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .25em .6em; border-radius: 999px; border: 2px solid var(--white);
}
.s-fix     { background: var(--black);        color: var(--white); }
.s-geplant { background: var(--purple);       color: var(--white); }
.s-idee    { background: var(--purple-light); color: var(--black); }

/* Typ-Farben (CI-nah: Rot, Lila, Schwarz, Grau) + passende helle Tönung */
.t-haustuer   { --type: #FF0000; --tint: #FFE8E8; }
.t-coworking  { --type: #632199; --tint: #F0E6F8; }
.t-ausbildung { --type: #000000; --tint: #ECECEC; }
.t-infostand  { --type: #C1272D; --tint: #FBE4E4; }
.t-demo       { --type: #A6192E; --tint: #F7E1E3; }
.t-social     { --type: #8B5CC7; --tint: #F3ECFB; }
.t-special    { --type: #3B0F6B; --tint: #E9E3F5; }
.t-frueh      { --type: #404040; --tint: #EFEFEF; }

.block--muted { opacity: .7; }
.block--slim  { padding-top: .7rem; padding-bottom: .7rem; }

/* Parallel laufende Blöcke */
.parallel { position: relative; border: 2px dashed var(--purple); padding: 1.5rem .7rem .7rem; }
.parallel__tag {
  position: absolute; top: -.85rem; left: .7rem;
  background: var(--purple); color: var(--white);
  font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .18em .6em;
}
.parallel__cols { display: grid; gap: .7rem; }

/* Dach-Block mit eingerückten Unterblöcken */
.span__children { display: flex; flex-direction: column; gap: .7rem; margin: .7rem 0 0 clamp(1rem, 4vw, 3rem); }

/* Leerer Tag */
.day__empty {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
  border: 2px dashed var(--black); padding: clamp(2rem, 6vw, 3.4rem) 1.2rem;
}
.day__empty-emoji { font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1; }
.day__empty-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--red); }
.day__empty-text { max-width: 42ch; font-weight: 500; margin-bottom: .6rem; }

/* Legende */
.legend {
  max-width: var(--maxw); margin: 1.6rem auto 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  font-weight: 700; font-size: .85rem;
}
.legend__item { display: inline-flex; align-items: center; gap: .45rem; }
.legend__swatch { width: 14px; height: 14px; flex: 0 0 auto; }

/* =====================================================================
   UNSER ZIEL (hellila Fläche)
   ===================================================================== */
.ziel { background: var(--purple-light); }
.ziel__inner { max-width: var(--maxw); margin: 0 auto; }
.ziel__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
.ziel__lead { font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); font-weight: 700; line-height: 1.35; margin-bottom: 1rem; }
.ziel__lead strong { background: var(--purple); color: var(--white); padding: 0 .12em; }
.ziel__text p { max-width: 46ch; margin-bottom: .9rem; }

.ziel__facts { display: flex; flex-direction: column; margin-top: 1.6rem; }
.ziel__facts li {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .6rem 0; border-top: 2px solid var(--black); font-weight: 600;
}
.ziel__facts li:last-child { border-bottom: 2px solid var(--black); }
.ziel__facts b {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--red);
  flex: 0 0 auto; min-width: 3.9em;
}

.ziel__chart { margin: 0; }
.ziel__chart img { width: 100%; height: auto; border: 2px solid var(--black); background: var(--white); box-shadow: var(--shadow-banner); }
.ziel__chart figcaption { margin-top: .7rem; font-weight: 600; font-size: .86rem; color: var(--gray); }

/* =====================================================================
   HAUSTÜR-COUNTER (rote Vollfläche)
   ===================================================================== */
.counter { background: var(--red); color: var(--white); }
.counter__intro { max-width: var(--maxw); margin: 0 auto 1.8rem; font-weight: 600; font-size: 1.1rem; }
.counter__note { max-width: var(--maxw); margin: 1.3rem auto 0; font-weight: 600; font-size: .92rem; }

.gauge {
  max-width: var(--maxw); margin: 0 auto;
  background: var(--white); color: var(--black);
  border: 2px solid var(--black); box-shadow: var(--shadow-banner);
  padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.2rem, 4vw, 2rem);
}
.gauge__figures { display: flex; align-items: baseline; gap: .2rem .9rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.gauge__current { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.5rem, 14vw, 8rem); line-height: .82; color: var(--red); }
.gauge__of { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 3.5vw, 1.9rem); }
.gauge__bar { position: relative; height: 40px; border: 2px solid var(--black); background: var(--purple-light); overflow: hidden; }
.gauge__fill { height: 100%; width: 0%; background: var(--purple); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.gauge__pct { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); font-weight: 800; }
.gauge__ticks { display: flex; justify-content: space-between; margin-top: .6rem; font-weight: 700; font-size: .8rem; color: var(--gray); }

.gauge__mark { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.gauge__mark::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; border-left: 3px dashed var(--black); }
.gauge__mark-label {
  position: absolute; top: 50%; left: 8px; transform: translateY(-50%);
  white-space: nowrap; font-weight: 800; font-size: .7rem;
  background: var(--black); color: var(--white); padding: .15em .5em;
}

/* =====================================================================
   RÜCKBLICK (weiße Fläche)
   ===================================================================== */
.rueckblick { background: var(--white); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.rueckblick__inner { max-width: var(--maxw); margin: 0 auto; }
.rueckblick__intro { max-width: 62ch; font-weight: 600; margin-bottom: 1.8rem; }
.rueckblick__note { font-weight: 700; margin-top: 1.4rem; }
.rueckblick__note strong { background: var(--purple); color: var(--white); padding: 0 .15em; }
.rueckblick__galtitle { font-size: clamp(1.3rem, 3.5vw, 2rem); color: var(--red); margin: 2.6rem 0 1rem; }

.rstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }
.rstat {
  display: flex; flex-direction: column; gap: .05rem;
  background: var(--purple-light); border: 2px solid var(--black);
  padding: 1.1rem 1rem;
}
.rstat__emoji { font-size: 1.5rem; line-height: 1; }
.rstat__num { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: .95; color: var(--red); }
.rstat__label { font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: .84rem; }

/* =====================================================================
   BILDER-BAND (läuft automatisch über die ganze Bildschirmbreite)
   Die Bilder werden vollständig gezeigt (contain), nichts wird beschnitten.
   ===================================================================== */
.marquee {
  /* Hoehe einer Kachel und Innenabstand stehen als Variablen hier, weil
     das Band den Platz schon freihalten muss, bevor die Kacheln
     ueberhaupt da sind. */
  --slide-h: clamp(190px, 34vh, 380px);
  --band-pad-t: clamp(.8rem, 2vw, 1.4rem);
  --band-pad-b: clamp(.8rem, 2vw, 1.4rem);
  width: 100%; overflow: hidden;
  padding: var(--band-pad-t) 0 var(--band-pad-b);
}
/* Das Galerie-Band wird erst aufgebaut, wenn jemand hinscrollt (app.js).
   Bis dahin halten wir genau die spaetere Hoehe frei - Kachel plus die
   Innenabstaende - damit die Seite beim Aufbauen nicht springt. */
.marquee:not(.marquee--ready) {
  min-height: calc(var(--slide-h) + var(--band-pad-t) + var(--band-pad-b));
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 60s linear infinite;
}
.marquee__row { display: flex; gap: var(--gap, 1rem); padding-right: var(--gap, 1rem); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Anhalten, wenn jemand hinschaut oder per Tastatur drin ist -
   und ausserdem, solange das Band gar nicht im Bild ist (spart Akku). */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee--paused .marquee__track { animation-play-state: paused; }

.marquee .slide {
  position: relative; margin: 0; flex: 0 0 auto;
  height: var(--slide-h);
  background: var(--black);
  border: 3px solid var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-banner);
}
/* <picture> ist nur die Huelle fuer die Formatwahl (AVIF/JPEG) und soll
   im Layout nicht mitzaehlen - das <img> verhaelt sich so wie vorher. */
.slide picture { display: contents; }

.marquee .slide__img {
  height: 100%; width: auto; max-width: none;
  object-fit: contain;           /* ganzes Bild, kein Beschnitt */
  background: var(--black);
}
.marquee .slide__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .8rem .6rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85));
  color: var(--white); font-weight: 800; font-size: .88rem;
}
/* Das Band unter dem Hero läuft auf Rot weiter, das Galerie-Band auf Weiß */
.marquee--hero { background: var(--red); }
.marquee--galerie { background: var(--white); --band-pad-b: clamp(2rem, 5vw, 3.5rem); }
.marquee--galerie .slide { border-color: var(--black); }

/* Platzhalter, solange kein Bild hinterlegt ist */
.slide--placeholder .slide__ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  height: 100%; aspect-ratio: 3 / 2;
  background: var(--purple-light); color: var(--black);
}
.slide--placeholder .slide__ph-emoji { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1; }
.slide--placeholder .slide__ph-text { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; }

/* Bilder im Programm-Popup (statische Darstellung) */
.modal__media .slide { border: 2px solid var(--black); border-radius: 14px; overflow: hidden; }
.modal__media .slide__img { width: 100%; height: auto; object-fit: contain; }

/* =====================================================================
   KARTE – schematische Standort-Übersicht
   ===================================================================== */
.mapsection { max-width: var(--maxw); margin: clamp(2.5rem, 6vw, 4rem) auto 0; }
.mapsection__title { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); color: var(--red); margin-bottom: .5rem; }
.mapsection__hint { font-weight: 600; margin-bottom: 1.2rem; }
.mapsection__note { margin-top: .9rem; font-size: .82rem; color: var(--gray); font-weight: 600; }

.mapbox {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 1rem; align-items: stretch;
}

.map {
  position: relative;
  /* Eigener Stacking-Context. Ohne das klettern die z-index-Werte aus der
     Karte in die Seite hinaus und legen sich ueber die Sticky-Nav
     (z-index 100): Leaflet nutzt intern bis 1000 (Bedienelemente), das
     Gate lag bei 500. Mit isolation bleiben ALLE Werte hier drin, und die
     Karte selbst zaehlt als ein Element im normalen Fluss - also unter
     Nav (100), Popup (150) und Konfetti (190).
     Deshalb duerfen die Werte unten getrost hoch sein: sie gelten nur
     innerhalb der Karte.                                              */
  isolation: isolate;
  border: 3px solid var(--black); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-banner);
  min-height: 340px;
}
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__pins { position: absolute; inset: 0; }

.pin {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: 0;
}
.pin__dot {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--red); color: var(--white);
  border: 3px solid var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1;
  box-shadow: var(--shadow-button);
  transition: transform .16s ease, background .16s ease;
}
.pin__label {
  font-weight: 800; font-size: .74rem; white-space: nowrap;
  background: var(--white); color: var(--black);
  border: 2px solid var(--black); border-radius: 999px;
  padding: .12em .5em;
}
/* Beschriftung über den Punkt legen (bei dicht beieinander liegenden Orten) */
.pin--flip { flex-direction: column-reverse; transform: translate(-50%, -10%); }
.pin:hover .pin__dot { transform: scale(1.12); }
.pin--active .pin__dot { background: var(--purple); transform: scale(1.18); }
.pin--active .pin__label { background: var(--purple); color: var(--white); border-color: var(--purple); }

.mappanel {
  background: var(--purple-light);
  border: 3px solid var(--black); border-radius: 18px;
  padding: 1.2rem 1.1rem;
  box-shadow: var(--shadow-button);
}
.mappanel__title { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); color: var(--red); margin-bottom: .3rem; }
.mappanel__adresse { font-weight: 600; font-size: .88rem; margin-bottom: 1rem; }
.mappanel__empty { font-weight: 600; font-size: .92rem; color: var(--gray); }

.mapaktionen { display: flex; flex-direction: column; gap: .5rem; }
.mapaktion {
  width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: .1rem;
  background: var(--tint, var(--white));
  border: 2px solid var(--type, var(--black));
  border-radius: 14px; padding: .6rem .8rem;
  transition: transform .14s ease, box-shadow .14s ease;
}
.mapaktion:hover { transform: translateX(3px); box-shadow: var(--shadow-button); }
.mapaktion__when { font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--type, var(--gray)); }
.mapaktion__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; line-height: 1.05; overflow-wrap: anywhere; }

/* =====================================================================
   KARTE – OpenStreetMap (Leaflet) + Datenschutz-Gate
   Die Kartenbilder kommen erst nach einem Klick auf "Karte laden".
   Solange liegt die schematische SVG-Karte darunter und die Pins
   funktionieren dort genauso.
   ===================================================================== */

/* Leaflet-Buehne: liegt ueber der SVG, ist aber leer und unsichtbar,
   bis die Karte initialisiert wurde. */
.map__osm { position: absolute; inset: 0; display: none; background: var(--purple-light); }
.map--osm .map__osm { display: block; }
/* Ist die echte Karte da, verschwindet die Ersatzkarte samt ihren Pins. */
.map--osm .map__svg,
.map--osm .map__pins { display: none; }

/* ---------- Datenschutz-Gate ---------- */
.mapgate {
  /* 1100 = ueber allem, was Leaflet aufbaut (dort ist 1000 das Hoechste).
     Karten-intern, siehe isolation in .map. */
  position: absolute; inset: 0; z-index: 1100;
  display: grid; place-items: center;
  padding: 1rem;
  background: rgba(59, 15, 107, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.mapgate--hidden { display: none; }
.mapgate__card {
  max-width: 30rem; text-align: center;
  background: var(--white); color: var(--black);
  border: 3px solid var(--black); border-radius: 18px;
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow-banner);
}
.mapgate__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); line-height: 1.1;
  color: var(--red); margin-bottom: .5rem;
}
.mapgate__text { font-size: .86rem; font-weight: 600; line-height: 1.45; margin-bottom: .9rem; }
.mapgate__actions {
  display: flex; flex-wrap: wrap; gap: .5rem .8rem;
  align-items: center; justify-content: center;
  margin-bottom: .7rem;
}
/* Sekundaere Aktion: bewusst zurueckhaltend, aber gut treffbar */
.mapgate__skip {
  font-weight: 800; font-size: .8rem; color: var(--purple);
  text-decoration: underline; text-underline-offset: 3px;
  padding: .4em .2em; cursor: pointer;
}
.mapgate__skip:hover { color: var(--red); }
.mapgate__note { font-size: .74rem; font-weight: 600; color: var(--gray); line-height: 1.4; }
.mapgate__note a { color: var(--purple); text-decoration: underline; }
/* Fehlermeldung, falls Leaflet oder die Kacheln nicht laden */
.mapgate__fail { color: var(--red-deep); font-weight: 800; font-size: .8rem; margin-top: .5rem; }

/* Zweite Chance nach "Ohne Karte weiter" – Chip in der Kartenecke */
.maplater {
  position: absolute; z-index: 1090; right: .6rem; bottom: .6rem;
  background: var(--white); color: var(--black);
  border: 3px solid var(--black); border-radius: 999px;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: .7rem; letter-spacing: .03em;
  padding: .45em .8em;
  box-shadow: var(--shadow-button);
  cursor: pointer;
}
.maplater:hover { background: var(--red); color: var(--white); }
.maplater[hidden] { display: none; }

/* Link vom Panel raus zu OpenStreetMap */
.mappanel__osm {
  display: inline-block; margin-bottom: .9rem;
  font-weight: 800; font-size: .78rem; color: var(--purple);
  text-decoration: underline; text-underline-offset: 3px;
}
.mappanel__osm:hover { color: var(--red); }

/* ---------- Pins als Leaflet-Marker ----------
   Der Marker-Wrapper ist 0x0 gross und sitzt genau auf der Koordinate.
   Der .pin darin bringt sein eigenes translate(-50%,-100%) mit, also
   greift die gleiche Optik wie auf der Ersatzkarte. */
.pinmarker { width: 0; height: 0; pointer-events: none; }
.pinmarker .pin { left: 0; top: 0; pointer-events: auto; }
/* Der gewaehlte Ort liegt ueber den anderen, damit sein Label lesbar
   bleibt. Das macht Leaflet selbst per setZIndexOffset in app.js - per CSS
   waere es unzuverlaessig, weil Leaflet jedem Marker laufend einen
   z-index aus seiner Bildschirmposition zuweist. */

/* ---------- Leaflet an die CI anpassen ---------- */
.map .leaflet-container {
  height: 100%; width: 100%;
  background: var(--purple-light);
  font-family: var(--font-body);
  outline: none;
}
/* Raster-Kacheln entfaerben: sie werden zur ruhigen Grundlage, die roten
   und lila Pins bleiben die einzigen Farbakzente.
   Bewusst nur auf <img>-Kacheln: die Vektor-Karte (MapLibre) zeichnet in
   ein <canvas> im gleichen Pane und soll die Liberty-Farben behalten.
   grayscale/contrast/brightness rechnen pro Pixel, an den Kachelkanten
   entstehen also keine Naehte. */
.map .leaflet-tile-pane img.leaflet-tile { filter: grayscale(1) contrast(.92) brightness(1.06); }

/* Zoom-Buttons im Stil der Seite: dicker schwarzer Rahmen, harter Schatten */
.map .leaflet-bar {
  border: 3px solid var(--black); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-button);
}
.map .leaflet-bar a,
.map .leaflet-bar a:hover {
  width: 32px; height: 32px; line-height: 30px;
  background: var(--white); color: var(--black);
  border-bottom: 2px solid var(--black);
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
}
.map .leaflet-bar a:last-child { border-bottom: none; }
.map .leaflet-bar a:hover { background: var(--red); color: var(--white); }
.map .leaflet-bar a.leaflet-disabled { background: #EEE; color: #AAA; }
.map .leaflet-control-zoom-in,
.map .leaflet-control-zoom-out { border-radius: 0; }

/* Pflicht-Attribution: klein, aber lesbar und ungefiltert */
.map .leaflet-control-attribution {
  background: rgba(255, 255, 255, .92);
  border-top: 2px solid var(--black); border-left: 2px solid var(--black);
  border-top-left-radius: 10px;
  padding: .2em .55em;
  font-size: .68rem; font-weight: 600; color: var(--gray);
}
.map .leaflet-control-attribution a { color: var(--purple); text-decoration: underline; }
.map .leaflet-control-attribution svg { display: none; }

/* "Alle Orte zeigen"-Knopf unten links */
.map .mapreset {
  border: 3px solid var(--black); border-radius: 12px;
  background: var(--white); color: var(--black);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: .7rem; letter-spacing: .03em;
  padding: .4em .7em;
  box-shadow: var(--shadow-button);
  cursor: pointer;
}
.map .mapreset:hover { background: var(--purple); color: var(--white); }

/* =====================================================================
   MITMACHEN (lila Vollfläche)
   ===================================================================== */
.mitmachen { background: var(--purple); color: var(--white); }
.mitmachen .section-head { justify-content: center; }
.mitmachen .section-head h2 { color: var(--white); }
.mitmachen .section-num { background: var(--white); color: var(--purple); }
.mitmachen__inner { max-width: 55rem; margin: 0 auto; text-align: center; }

.mitmachen__statement { font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem); font-weight: 800; line-height: 1.22; margin-bottom: 1rem; }
.mitmachen__statement--sub { font-size: clamp(1.05rem, 1rem + .6vw, 1.35rem); font-weight: 600; margin-bottom: 2.2rem; }

.linkcta { margin-bottom: 2.4rem; }
.linkcta__lead { font-weight: 700; margin-bottom: 1rem; }
.linkcta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.4rem); line-height: 1;
  padding: .6em 1.1em;
  background: var(--white); color: var(--purple);
  border: 2px solid var(--white);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.linkcta__btn:hover { background: var(--red); color: var(--white); box-shadow: var(--shadow-button); }
.linkcta__btn--blanko { opacity: .72; cursor: default; }
.linkcta__note { margin-top: .8rem; font-weight: 600; font-size: .9rem; }

.mitmachen__help { text-align: left; max-width: 40rem; margin: 0 auto; }
.mitmachen__lead { font-weight: 700; margin-bottom: .8rem; }
.checklist { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.checklist li { display: flex; gap: .7rem; font-weight: 500; }
.checklist li::before { content: "✓"; font-weight: 900; flex: 0 0 auto; }
.mitmachen__hint { font-size: .92rem; font-weight: 600; }

/* =====================================================================
   MODAL / POPUP
   ===================================================================== */
.modal { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.modal__box {
  position: relative; z-index: 1;
  width: min(46rem, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--white); border: 2px solid var(--black); box-shadow: var(--shadow-banner);
  padding: 2.4rem clamp(1.2rem, 4vw, 2.2rem) 1.8rem;
  animation: modalIn .22s ease both;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.modal__close {
  position: absolute; top: 0; right: 0;
  width: 42px; height: 42px; background: var(--black); color: var(--white);
  font-size: 1.1rem; line-height: 1;
}
.modal__close:hover { background: var(--purple); }
.modal__kicker { display: block; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .4rem; }
.modal__title { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); margin-bottom: .9rem; }
.modal__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.chip { font-weight: 700; font-size: .8rem; background: var(--purple-light); padding: .3em .7em; }
.chip--day { background: var(--black); color: var(--white); }
.modal__text { margin-bottom: .9rem; }
.modal__bullets { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.2rem; }
.modal__bullets li { display: flex; gap: .6rem; font-weight: 600; }
.modal__bullets li::before { content: "→"; color: var(--purple); font-weight: 900; flex: 0 0 auto; }
.modal__media { display: grid; gap: .7rem; margin: 1.2rem 0; }
.modal__cta { margin-top: .6rem; }

/* =====================================================================
   FOOTER (rote Fläche)
   Nachgebaut nach dem unteren, roten Band von berlin-bezahlbar-machen.de:
   rote Vollfläche, weiße Schrift, drei Spalten, das Logo rechts. Die
   Sektion darüber ("Mitmachen") ist lila - damit ergibt sich von selbst
   dieselbe Folge lila -> rot wie auf der Vorlage.

   Die Vorlage hält den Footer flach (24px Innenabstand auf dem Handy,
   40px am Desktop) und arbeitet ohne graue Linien: getrennt wird über
   Abstand, nicht über Rahmen.
   ===================================================================== */
.footer {
  background: var(--red); color: var(--white);
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--pad-x);
}
.footer__top {
  max-width: var(--maxw); margin: 0 auto 1.8rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.75rem);
  align-items: start;
}

/* Logo rechts und ohne Kasten - so wie auf der Vorlage. Die lila Fläche
   und die weiße Schrift stecken schon im SVG; der rote Keil geht im roten
   Grund auf. Genau dieser Effekt ist auf der Vorlage gewollt. */
.footer__brandcol { justify-self: end; text-align: right; }
.footer__logo {
  width: 100%; max-width: 184px; height: auto; display: block;
  margin: 0 0 .9rem auto;
}
/* Groesse wie vorher (~1.3rem). Das rote Band der Vorlage bleibt in der
   Hierarchie flach - sein groesster Text ist 18-21px; die grossen 24-32px
   gehoeren dort zum lila Band darueber. */
.footer__slogan {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.375rem); line-height: 1.05;
}

/* Links: klein, unterstrichen, Inter 500 - die Linkgröße der Vorlage
   (14px auf dem Handy, 16px am Desktop). */
.footer__navcol h3 {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  text-transform: uppercase;
  color: var(--white); margin-bottom: .6rem;
}
.footer__navcol a {
  display: block; padding: .25rem 0;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(.875rem, .6875rem + .3906vw, 1rem);
  line-height: 1.4;
  text-decoration: underline;
}
.footer__navcol a:hover { color: var(--purple-light); }

/* Die Standorte sind unser Gegenstück zum Adressblock der Vorlage.
   Statt der grauen Linien von vorher jetzt zartes Weiß - Grau auf Rot
   wird schmutzig. */
.footer__orte {
  max-width: var(--maxw); margin: 0 auto 1.4rem;
  border-top: 2px solid rgba(255, 255, 255, .35);
  border-bottom: 2px solid rgba(255, 255, 255, .35);
  padding: 1.1rem 0;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1rem, .9rem + .3vw, 1.125rem); line-height: 1.5;
  color: rgba(255, 255, 255, .92);
}
.footer__orte strong { color: var(--white); font-weight: 700; }

.footer__bottom {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(.75rem, .5625rem + .3906vw, .875rem); line-height: 1.4;
  color: rgba(255, 255, 255, .88);
}
.footer__legal { text-decoration: underline; }
.footer__legal:hover { color: var(--purple-light); }
.footer__made { margin-left: auto; }

/* =====================================================================
   IMPRESSUM / DATENSCHUTZ
   ===================================================================== */
.legal { background: var(--white); }
.legal__inner { max-width: 52rem; margin: 0 auto; }
.legal__title { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.4rem); color: var(--red); margin-bottom: 1.6rem; }
.legal__block { margin-bottom: 2rem; }
.legal__block h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); color: var(--red); margin-bottom: .7rem; }
.legal__block h3 { font-size: 1.15rem; margin: 1rem 0 .4rem; }
.legal__block p, .legal__block li { margin-bottom: .6rem; }
.legal__block ul { list-style: disc; padding-left: 1.3rem; }
.legal__back { margin-top: 2rem; }

/* =====================================================================
   KONFETTI
   ===================================================================== */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 190; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 10px; height: 16px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: .2; } }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
  .nav__burger { display: none !important; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  /* Anmelde-Button nur ausblenden, wo es auch ein Burger-Menü gibt (Startseite) */
  .nav__bar > .btn--nav:has(~ .nav__burger) { display: none; }
  .nav__burger { display: flex; }
  .ziel__grid { grid-template-columns: 1fr; }
  /* Zwei Spalten: die Logo-Spalte beginnt eine Zeile tiefer und wird
     dort wieder links ausgerichtet. */
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brandcol { justify-self: start; text-align: left; }
  .footer__logo { margin-right: auto; margin-left: 0; }
  .daybar { grid-template-columns: repeat(3, 1fr); }
  .mapbox { grid-template-columns: 1fr; }
  /* Auf einer Spalte darf die Karte hoeher werden - sonst bleibt vom
     Kartenbild neben dem Gate kaum etwas uebrig. */
  .map { min-height: 420px; }
}

/* ---------- Handy ---------- */
@media (max-width: 620px) {
  :root { --pad-y: clamp(2.2rem, 8vw, 3rem); }

  /* Nav & Hero */
  .nav__brandtext { font-size: 1.3rem; }
  .hero__line { font-size: clamp(3rem, 17vw, 5rem); }
  .hero__sticker { font-size: 1.15rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__meta { font-size: .88rem; gap: .3rem .7rem; }
  .tag { font-size: .68rem; padding: .35em .55em; }

  /* Programm: Blöcke werden gestapelt, Zeit als Zeile darüber */
  .daybar { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .daytab { padding: .6rem .3rem; }
  .daytab__wd { font-size: 1.05rem; }
  .daytab__date { font-size: .78rem; }

  .block { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem .9rem 1rem; }
  .block::before { top: 0; bottom: auto; left: 14px; right: 14px; width: auto; height: 6px; border-radius: 0 0 8px 8px; }
  .block__time { font-size: 1.05rem; padding: .2em .55em; }
  .block__more { display: none; }
  .block__status { right: 10px; font-size: .62rem; }

  .day__head { padding: .8rem .9rem; }
  .day__theme { margin-left: 0; width: 100%; }
  /* Parallele Aktionen untereinander statt nebeneinander
     (die Spaltenbreiten kommen per Inline-Style aus app.js) */
  .parallel { padding: 1.4rem .5rem .5rem; }
  .parallel__cols { grid-template-columns: 1fr !important; }

  /* Karte */
  .map { min-height: 340px; }
  .pin__dot { width: 28px; height: 28px; font-size: .85rem; border-width: 2px; }
  .pin__label { font-size: .66rem; padding: .1em .4em; }
  .mappanel { padding: 1rem .9rem; }
  /* Gate-Karte kompakter, damit sie auf kleinen Displays nicht ueberlaeuft */
  .mapgate { padding: .6rem; }
  .mapgate__card { padding: .9rem .85rem; }
  .mapgate__text { font-size: .78rem; margin-bottom: .7rem; }
  .mapgate__note { font-size: .68rem; }
  .map .leaflet-bar a,
  .map .leaflet-bar a:hover { width: 28px; height: 28px; line-height: 26px; font-size: 1.05rem; }

  /* Bilder-Band */
  .marquee { --slide-h: clamp(150px, 26vh, 220px); }
  .marquee .slide { border-width: 2px; border-radius: 12px; }
  .marquee .slide__cap { font-size: .76rem; padding: 1.2rem .6rem .5rem; }
  .marquee__row { --gap: .6rem; }

  /* Zahlen & Rest */
  .rstats { grid-template-columns: 1fr 1fr; }
  .rstat { padding: .9rem .8rem; }
  .gauge { padding: 1.2rem 1rem; }
  .gauge__current { font-size: clamp(3rem, 20vw, 5rem); }
  .gauge__ticks { font-size: .68rem; }
  .linkcta__btn { width: 100%; font-size: 1.25rem; padding: .7em .8em; }
  .modal__box { padding: 2.2rem 1rem 1.4rem; max-height: 92vh; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__made { margin-left: 0; }
  /* Kein font-size mehr fuer .footer__orte: das clamp() im Footer regelt
     die Groesse schon selbst und wuerde hier nur ueberschrieben. */
}

/* Sehr schmale Geräte */
@media (max-width: 400px) {
  .daybar { grid-template-columns: repeat(2, 1fr); }
  .rstats { grid-template-columns: 1fr; }
}

/* =====================================================================
   MOTION-PREFERENCES
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  /* Das Bilder-Band läuft nicht von selbst, sondern wird gescrollt */
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none !important; transform: none !important; }
  .marquee__row[aria-hidden="true"] { display: none; }
}