@charset "utf-8";
/* Markenseite Abenteuer Denken: Nachbau der Startseite von abenteuer-denken.de
   (Video im Kopf, rote Leiste, „Schwere Entscheidung“ mit allen Bereichen und Folgen zum Stöbern, Fragen mit
   aufsteigenden Sprechblasen, Ben und Pia, FAQ, Bilderlaufband).
   Vorlage: src/vorlagen/marke-abenteuer-denken.html */

@font-face {
  font-family: 'BabyMonsta';
  src: url(babymonsta.woff2) format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url(oswald.woff2) format('woff2');
  font-weight: 200 700;
  font-display: swap;
}

:root {
  --rot: #EC1C23;
  --gelb: #FDDD05;
  --schwarz: #000;
  --weiss: #fff;
  --grau: #F1F1F1;
  --nacht: #16161f;
  --comic: 'BabyMonsta', 'Arial Black', sans-serif;
  --oswald: 'Oswald', 'Arial Narrow', sans-serif;
  --text: 'Open Sans', system-ui, sans-serif;
  --breite: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 70px; }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--schwarz);
  font: 400 16px/1.6 var(--text);
  overflow-x: hidden;
  /* BabyMonsta rundet sonst bei manchen Größen Abstände falsch („Geschicht e“) */
  text-rendering: geometricPrecision;
}

img, video { max-width: 100%; }

h1, h2, h3 { margin: 0; font-weight: 400; hyphens: auto; overflow-wrap: break-word; }

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

.unterzeile {
  margin: 14px auto 0;
  font: 600 clamp(19px, 1.9vw, 26px)/1.3 var(--oswald);
}
.unterzeile.rot { color: var(--rot); }

.pille {
  display: inline-block;
  margin: 0;
  padding: 3px 16px 1px;
  background: var(--weiss);
  color: var(--rot);
  border-radius: 999px;
  font: 400 17px/1.4 var(--comic);
}

.knopf {
  display: inline-block;
  margin-top: 22px;
  padding: 7px 22px 5px;
  background: var(--rot);
  color: var(--weiss);
  border-radius: 999px;
  font: 400 18px/1.3 var(--comic);
  text-decoration: none;
  transition: transform .15s;
}
.knopf:hover { transform: scale(1.05); }

/* ---------------------------------------------------------------- Kopf */

.kopf {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px clamp(12px, 2vw, 28px);
  pointer-events: none;
}
.kopf a { pointer-events: auto; }
.kopf-logo img { display: block; width: clamp(84px, 9vw, 140px); height: auto; }
.kopf-heim {
  margin-top: 8px;
  padding: 6px 16px 4px;
  background: var(--weiss);
  color: var(--schwarz);
  border: 3px solid var(--schwarz);
  box-shadow: 4px 4px 0 var(--schwarz);
  font: 400 clamp(15px, 1.4vw, 19px)/1.3 var(--comic);
  text-decoration: none;
}
.kopf-heim:hover { background: var(--gelb); }

.held { background: var(--gelb); }
.held video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* 29 % der Breite statt 56 %: überall gleich viel beschnitten */
  max-height: 29vw;
  min-height: 200px;
  object-fit: cover;
  /* oben fällt nur der leere gelbe Streifen über den Pfeilen weg, der Rest unten */
  object-position: 50% 40%;
}

/* Leiste wie auf abenteuer-denken.de und auf den Seiten der Bereiche (format.css):
   roter Balken, große weiße Einträge in Großbuchstaben, beim Zeigen ein schwarzes Feld. */
.leiste {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 10px;
  padding: 10px 16px;
  background: var(--rot);
}
.leiste a {
  padding: 13px 10px 11px;
  color: var(--weiss);
  font: 400 clamp(20px, 1.85vw, 26px)/1 var(--comic);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s;
}
.leiste a:hover, .leiste a:focus-visible { background: var(--schwarz); color: var(--weiss); }
.leiste a:focus-visible { outline-color: var(--gelb); }

/* ---------------------------------------------------------------- Einstieg + Karten */

.intro {
  position: relative;
  padding: 0 16px clamp(60px, 7vw, 100px);
  /* Verlauf in festen Abständen, damit er gleich bleibt, wie lang die Liste darunter
     auch wird: schwarz, solange der weiße Text läuft (Handy bis etwa 575 px), dann bald weiß */
  background: linear-gradient(180deg, #000 0, #000 540px, #5c5c5c 780px, #dcdcdc 1000px, #fff 1200px);
  /* clip statt hidden: so bleibt das Detailfeld im Kasten beim Scrollen stehen (sticky) */
  overflow: clip;
  isolation: isolate;
}
.intro-sterne {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: .75;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

.intro-text {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
  color: var(--weiss);
  text-align: center;
}
.intro-text .unterzeile:first-child { margin-top: 0; }
.intro-text > p:last-child { max-width: 900px; margin: 16px auto 0; font-size: 16.5px; }

.dreh {
  margin-top: 14px;
  color: var(--rot);
  font: 400 clamp(40px, 7vw, 96px)/1 var(--comic);
  text-transform: uppercase;
}
/* Das wechselnde Wort: alle Wörter liegen übereinander, eins ist sichtbar */
.dreh-wort {
  display: inline-grid;
  vertical-align: bottom;
  perspective: 600px;
}
.dreh-wort > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: rotateX(90deg);
  transform-origin: 50% 50% -.3em;
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .3s;
}
.dreh-wort > span.an { opacity: 1; transform: none; }
.dreh-wort > span.weg { opacity: 0; transform: rotateX(-90deg); }
/* Ohne Skript bleibt das erste Wort stehen */
.dreh-wort:not(.laeuft) > span:first-child { opacity: 1; transform: none; }

.wahl {
  max-width: var(--breite);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) clamp(16px, 3.4vw, 44px);
  background: var(--weiss);
  border-radius: 12px;
  text-align: center;
}
.wahl h2 {
  color: var(--rot);
  font: 400 clamp(40px, 5.4vw, 72px)/1.05 var(--comic);
  text-transform: uppercase;
}
.wahl-text {
  max-width: 900px;
  margin: 18px auto 0;
  font: 600 clamp(18px, 1.8vw, 24px)/1.3 var(--oswald);
}

/* ---------------------------------------------------------------- Stöbern
   Im Kasten „Schwere Entscheidung“ alle Bereiche und Folgen wie die Hörspiele auf
   der Startseite von Nachklang: Pillen je Bereich, links die gewählte Folge oder
   die Karte des gewählten Bereichs, rechts die Liste mit Sortierung und Suche
   (lib/marken.js, stoebernHtml; stoebern.js). */

.stoebern { margin-top: clamp(32px, 4vw, 52px); text-align: left; }
/* Farbe und Textur je Bereich: Gelb, Grün und Mint wie auf abenteuer-denken.de,
   Hellgrün = Erzähl mal! (dort „Zaubergeschichten“), Limette = Gelb ins Grün gedreht */
.stoebern [data-bereich="denkmal"] { --farbe: #FDDD05; --textur: url(raster-gelb.webp); }
.stoebern [data-bereich="hoermal"] { --farbe: #47C607; --textur: url(raster-gruen.webp); }
.stoebern [data-bereich="warmal"] { --farbe: #D9E021; --textur: url(raster-limette.webp); }
.stoebern [data-bereich="fragmal"] { --farbe: #6EF4CB; --textur: url(raster-mint.webp); }
.stoebern [data-bereich="erzaehlmal"] { --farbe: #A8DD2C; --textur: url(raster-hellgruen.webp); }
.stoebern-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stoebern button { cursor: pointer; }

.stoebern-pillen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.stoebern-pille {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 20px 8px;
  border: 3px solid var(--schwarz);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--schwarz);
  font: 400 clamp(18px, 1.7vw, 22px)/1 var(--comic);
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
.stoebern-pille span { font: 600 14px/1 var(--oswald); opacity: .65; }
.stoebern-pille:hover { background: var(--farbe, var(--gelb)); }
.stoebern-pille[aria-pressed="true"] { background: var(--farbe, var(--rot)); box-shadow: 4px 4px 0 var(--schwarz); transform: translate(-2px, -2px); }
.stoebern-pille[data-filter=""][aria-pressed="true"] { color: var(--weiss); }
.stoebern-pille[aria-pressed="true"] span { opacity: .85; }

.stoebern-deck {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
}

/* Die gewählte Folge oder der gewählte Bereich: Karte auf der Textur des Bereichs (alle in
   derselben Größe gekachelt, damit die Punkte gleich groß sind), bleibt beim Scrollen stehen */
.stoebern-detail { position: sticky; top: 92px; }
.stoebern-karte { position: relative; padding: 20px 20px 24px; background: var(--farbe, var(--gelb)) var(--textur, url(raster-gelb.webp)) 0 0 / 1600px 900px repeat; }
.stoebern-cover { position: relative; }
.stoebern-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 6px solid var(--weiss);
  box-shadow: 6px 6px 0 var(--schwarz);
}
.stoebern-karte.is-laeuft .stoebern-cover::after {
  content: "Läuft!";
  position: absolute;
  z-index: 2;
  top: -30px;
  right: -26px;
  display: grid;
  place-items: center;
  width: 120px;
  aspect-ratio: 1100 / 932;
  padding-bottom: 4px;
  background: url(burst-weiss.webp) center / contain no-repeat;
  color: var(--rot);
  font: 400 21px/1 var(--comic);
  transform: rotate(8deg);
  animation: stoebernKnall .4s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes stoebernKnall {
  from { transform: rotate(8deg) scale(.2); }
  to { transform: rotate(8deg) scale(1); }
}
.stoebern-marken { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.stoebern-bereich, .stoebern-nr, .stoebern-offline {
  padding: 4px 13px 2px;
  border-radius: 999px;
  background: var(--schwarz);
  color: var(--weiss);
  font: 400 15px/1.3 var(--comic);
  text-decoration: none;
}
.stoebern-bereich { background: var(--rot); }
a.stoebern-bereich:hover { background: var(--schwarz); }
.stoebern-offline { background: var(--weiss); color: var(--schwarz); box-shadow: inset 0 0 0 2px var(--schwarz); }
.stoebern-titel {
  margin-top: 14px;
  color: var(--rot);
  font: 400 clamp(28px, 2.6vw, 38px)/1.02 var(--comic);
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: manual;
}
.stoebern-text { display: -webkit-box; margin: 12px 0 0; overflow: hidden; font-size: 15px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; }
.stoebern-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.stoebern-tags li { padding: 3px 10px 2px; border: 2px solid var(--schwarz); border-radius: 999px; background: var(--weiss); font: 600 13px/1.3 var(--oswald); }
.stoebern-spieler {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 5px 16px 5px 5px;
  border: 3px solid var(--schwarz);
  border-radius: 999px;
  background: var(--weiss);
  box-shadow: 4px 4px 0 var(--schwarz);
}
.stoebern-hoeren {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 18px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--rot);
  color: var(--weiss);
  font: 400 18px/1 var(--comic);
  transition: background-color .15s;
}
.stoebern-hoeren:hover { background: var(--schwarz); }
.stoebern-hoeren svg { width: 22px; height: 22px; fill: currentColor; }
.stoebern-spur { flex: 1 1 auto; display: flex; align-items: center; min-width: 30px; height: 26px; }
.stoebern-spur i { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--rot) calc(var(--pv, 0) * 100%), rgba(0, 0, 0, .16) 0); }
.stoebern-karte.is-on .stoebern-spur { cursor: pointer; }
.stoebern-zeit { flex: none; font: 600 15px/1 var(--oswald); font-variant-numeric: tabular-nums; }
/* Karte eines Bereichs: Außen-Cover, Beschreibung, Knopf zur Sendungsseite */
.stoebern-text--ganz { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.stoebern .stoebern-los { margin-top: 18px; border: 3px solid var(--schwarz); box-shadow: 3px 3px 0 var(--schwarz); }
/* Folge: Knopf zur Folgenseite (statt des Players), auch das Cover führt dorthin */
.stoebern .stoebern-zur-folge {
  margin-top: 20px;
  padding: 9px 26px 7px;
  border: 3px solid var(--schwarz);
  box-shadow: 4px 4px 0 var(--schwarz);
  font-size: 20px;
}
.stoebern-cover a { display: block; transition: transform .15s; }
.stoebern-cover a:hover { transform: translate(-2px, -2px); }
.stoebern-cover a:hover img { box-shadow: 8px 8px 0 var(--schwarz); }

/* Liste mit Sortierung und Suche */
.stoebern-liste { min-width: 0; }
.stoebern-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.stoebern-sort { display: inline-flex; gap: 2px; padding: 3px; border: 3px solid var(--schwarz); border-radius: 999px; background: var(--weiss); }
.stoebern-sort button { padding: 8px 14px 6px; border: 0; border-radius: 999px; background: none; color: var(--schwarz); font: 400 16px/1 var(--comic); }
.stoebern-sort button:hover { background: var(--gelb); }
.stoebern-sort button[aria-pressed="true"] { background: var(--schwarz); color: var(--weiss); }
.stoebern-suche { display: flex; align-items: center; gap: 8px; width: min(280px, 100%); height: 48px; padding: 0 16px; border: 3px solid var(--schwarz); border-radius: 999px; background: var(--weiss); transition: box-shadow .15s; }
.stoebern-suche:focus-within { box-shadow: 4px 4px 0 var(--schwarz); }
.stoebern-suche svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--schwarz); stroke-width: 2.6; stroke-linecap: round; }
.stoebern-suche input { flex: 1; width: 0; min-width: 0; border: 0; background: none; color: var(--schwarz); font: 500 16px/1 var(--oswald); outline: none; }
.stoebern-suche input::placeholder { color: rgba(0, 0, 0, .5); }

.stoebern-folgen { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--schwarz); }
.stoebern-folge {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto 52px;
  align-items: center;
  gap: 16px;
  padding: 10px 10px 10px 8px;
  border-bottom: 2px solid rgba(0, 0, 0, .12);
  transition: background-color .15s;
}
.stoebern-folge[hidden] { display: none; }
.stoebern-folge:hover, .stoebern-folge.is-sel { background: color-mix(in srgb, var(--farbe) 28%, var(--weiss)); }
.stoebern-folge__cover { display: block; width: 68px; height: 68px; border: 3px solid var(--schwarz); background: var(--grau); object-fit: cover; }
.stoebern-folge__text { min-width: 0; }
.stoebern-folge__titel { display: block; overflow: hidden; color: var(--schwarz); font: 400 21px/1.15 var(--comic); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
a.stoebern-folge__titel::after { content: ""; position: absolute; inset: 0; }
.stoebern-folge__unter { display: flex; align-items: center; gap: 7px; margin-top: 5px; overflow: hidden; color: #333; font: 500 14.5px/1.2 var(--oswald); white-space: nowrap; }
.stoebern-folge__unter .stoebern-offline { padding: 2px 8px 1px; font-size: 12px; }
.stoebern-punkt { flex: none; width: 13px; height: 13px; border: 2px solid var(--schwarz); border-radius: 50%; background: var(--farbe); }
.stoebern-folge__dauer { font: 600 16px/1 var(--oswald); font-variant-numeric: tabular-nums; }
.stoebern-folge.is-on .stoebern-folge__dauer { color: var(--rot); }
.stoebern-play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 3px solid var(--schwarz);
  border-radius: 50%;
  background: var(--rot);
  color: var(--weiss);
  transition: transform .15s;
}
.stoebern-play:hover { transform: scale(1.08); }
.stoebern-play svg { width: 22px; height: 22px; fill: currentColor; }
/* Fortschritt als Ring um den Knopf (--pv setzt stoebern.js an der Zeile) */
.stoebern-play::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: conic-gradient(var(--rot) calc(var(--pv, 0) * 360deg), rgba(0, 0, 0, .14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  opacity: 0;
  transition: opacity .2s;
}
.stoebern-folge.is-on .stoebern-play::before { opacity: 1; }
.stoebern-aus { display: none; }
[aria-pressed="true"] > .stoebern-an { display: none; }
[aria-pressed="true"] > .stoebern-aus { display: block; }
.stoebern-leer { margin: 26px 0 0; font: 600 20px/1.3 var(--oswald); text-align: center; }
.stoebern .stoebern-mehr { display: block; margin: 26px auto 0; border: 3px solid var(--schwarz); box-shadow: 4px 4px 0 var(--schwarz); }
.stoebern .stoebern-mehr[hidden] { display: none; }

/* ---------------------------------------------------------------- Fragen */

.fragen {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: 0 clamp(16px, 3vw, 40px);
  margin-top: clamp(60px, 9vw, 130px);
  padding: clamp(28px, 3vw, 44px) clamp(16px, 7vw, 120px) 0;
  background: #6ff0cd url(raster-mint.webp) center / cover;
}
.fragen-text { align-self: center; padding-bottom: clamp(28px, 3vw, 44px); }
/* Ben und Pia sind größer als der Block und ragen oben heraus */
.fragen .fragen-figur {
  position: relative;
  z-index: 1;
  width: min(46vw, 660px);
  max-width: none;
  /* zählt nur zum Teil zur Höhe: der Text bestimmt den Block, der Rest ragt heraus */
  margin-top: calc(min(46vw, 660px) * -.42);
}
.fragen h2, .explorer h2 {
  margin-top: 18px;
  color: var(--rot);
  font: 400 clamp(42px, 5.6vw, 80px)/1 var(--comic);
  text-transform: uppercase;
}
.fragen .unterzeile, .explorer .unterzeile { margin-left: 0; max-width: 620px; }
.fragen-figur, .explorer-figur { display: block; width: 100%; max-width: 640px; height: auto; justify-self: end; }

/* ---------------------------------------------------------------- Ben und Pia */

.duo {
  max-width: var(--breite);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 100px) 16px;
  text-align: center;
}
.duo h2 {
  color: var(--rot);
  font: 400 clamp(30px, 4.6vw, 64px)/1.05 var(--comic);
  text-transform: uppercase;
}
.duo .unterzeile { max-width: 860px; }
.duo-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  margin-top: clamp(32px, 4vw, 48px);
  border: 8px solid var(--rot);
  background: var(--schwarz);
}
.duo-spalte { padding: clamp(20px, 2.4vw, 32px); color: var(--weiss); font-size: 14.5px; line-height: 1.55; }
.duo-spalte h3 { margin-bottom: 14px; color: var(--rot); font: 400 clamp(26px, 2.6vw, 36px)/1.1 var(--comic); }
.duo-spalte p { margin: 0; }
.duo-pia { text-align: right; }
.duo-ben { text-align: left; }
.duo-bild { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- FAQ */

.faq {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 16px clamp(64px, 8vw, 100px);
  text-align: center;
}
.faq h2 {
  font: 400 clamp(40px, 5.6vw, 76px)/1.02 var(--comic);
  text-transform: uppercase;
}
.faq .unterzeile { max-width: 900px; }
.faq-liste { margin-top: clamp(32px, 4vw, 48px); text-align: left; }
.faq details { margin-top: 10px; }
.faq summary {
  position: relative;
  padding: 9px 46px 7px 14px;
  background: var(--nacht);
  color: var(--weiss);
  font: 400 clamp(15px, 1.5vw, 19px)/1.3 var(--comic);
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font: 700 22px/1 var(--text);
}
.faq details[open] summary { background: var(--rot); }
.faq details[open] summary::after { content: '\2212'; }
.faq details > div { padding: 14px 8px 8px; font-size: 15.5px; }
.faq details p { margin: 0 0 10px; }
.faq details ul { margin: 0 0 12px; padding-left: 22px; }

/* ---------------------------------------------------------------- Explorer + Laufband */

.explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: 0 clamp(16px, 3vw, 40px);
  margin-top: clamp(60px, 9vw, 130px);
  padding: clamp(28px, 3vw, 44px) clamp(16px, 7vw, 120px) 0;
  background: var(--gelb) url(raster-gelb.webp) repeat;
}
.explorer-text { align-self: center; padding-bottom: clamp(28px, 3vw, 44px); }
/* wie bei den Fragen: Ben und Pia sind größer als der Block und ragen oben heraus
   (das Bild hat oben 12 % leeren Rand, deshalb etwas mehr Überstand) */
.explorer .explorer-figur {
  position: relative;
  z-index: 1;
  width: min(44vw, 640px);
  max-width: none;
  margin-top: calc(min(44vw, 640px) * -.5);
}
.explorer .unterzeile { color: var(--schwarz); font-size: clamp(18px, 1.6vw, 22px); }
.explorer h2 { font-size: clamp(36px, 4.3vw, 62px); }

.laufband {
  overflow: hidden;
  background: var(--schwarz);
  border-top: 8px solid var(--rot);
  border-bottom: 8px solid var(--rot);
}
.laufband-lauf {
  display: flex;
  width: max-content;
  animation: laufband 420s linear infinite;
}
.laufband:hover .laufband-lauf { animation-play-state: paused; }
.laufband img {
  display: block;
  flex: 0 0 auto;
  width: clamp(170px, 19vw, 300px);
  height: clamp(170px, 19vw, 300px);
  object-fit: cover;
}
@keyframes laufband {
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------- Fuß */

.fuss-gelb {
  padding: clamp(28px, 3vw, 40px) 16px;
  background: var(--gelb) url(raster-gelb.webp) repeat;
}
.fuss-logo { display: block; width: clamp(110px, 11vw, 160px); height: auto; margin: 0 auto; }
.fuss-rot {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 16px 9px;
  background: var(--rot);
  list-style: none;
}
.fuss-rot li + li::before { content: '|'; margin: 0 16px; color: rgba(255, 255, 255, .6); }
.fuss-rot a { color: var(--weiss); font: 400 16px/1.3 var(--comic); text-decoration: none; }
.fuss-rot a:hover { color: var(--gelb); }
.fuss-rot a:focus-visible { outline-color: var(--gelb); }
.fuss-schwarz { margin: 0; padding: 10px 16px; background: var(--schwarz); color: var(--weiss); text-align: center; font: 400 13px/1.4 var(--comic); }

/* ---------------------------------------------------------------- schmal */

@media (max-width: 1000px) {
  .duo-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo-bild { grid-column: 1 / -1; grid-row: 1; height: auto; }
}

/* niedrige Fenster: das Detailfeld soll beim Scrollen ganz zu sehen bleiben */
@media (max-height: 880px) {
  .stoebern-cover { width: 68%; }
  .stoebern-marken { margin-top: 18px; }
}

@media (max-width: 900px) {
  .stoebern-deck { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .stoebern-detail { display: none; position: static; }
  .stoebern-detail.is-bereich { display: block; }
  .stoebern-karte--bereich { display: grid; grid-template-columns: clamp(110px, 30%, 200px) minmax(0, 1fr); gap: 0 18px; align-items: start; padding: 16px; }
  .stoebern-karte--bereich .stoebern-cover img { border-width: 4px; box-shadow: 4px 4px 0 var(--schwarz); }
  .stoebern-karte--bereich .stoebern-marken { margin-top: 0; }
  .stoebern-karte--bereich .stoebern-titel { margin-top: 10px; font-size: clamp(22px, 4.6vw, 30px); }
}

@media (max-width: 760px) {
  .fragen, .explorer { grid-template-columns: minmax(0, 1fr); padding-top: 48px; }
  .fragen-text, .explorer-text { padding-bottom: 8px; text-align: center; }
  .fragen .unterzeile, .explorer .unterzeile { margin-left: auto; }
  .fragen-figur, .explorer-figur { justify-self: center; width: min(100%, 440px); }
  .fragen { margin-top: 0; }
  .fragen .fragen-figur, .explorer .explorer-figur { width: min(100%, 440px); margin-top: 0; }
  .explorer { margin-top: 0; }
  .duo-box { grid-template-columns: minmax(0, 1fr); }
  .duo-pia, .duo-ben { text-align: left; }
}

@media (max-width: 520px) {
  .leiste { gap: 0 2px; padding: 6px 4px; }
  /* in Großbuchstaben passen die fünf Bereiche nicht in eine Zeile */
  .leiste a { padding: 10px 6px 8px; font-size: clamp(14px, 4.1vw, 19px); text-transform: none; }
  .kopf { padding: 8px 10px; }
  .kopf-logo img { width: 62px; }
  .kopf-heim { margin-top: 2px; padding: 3px 9px 2px; border-width: 2px; box-shadow: 3px 3px 0 var(--schwarz); font-size: 13px; }
  .stoebern-pillen { gap: 8px; }
  .stoebern-pille { padding: 8px 13px 6px; font-size: 16px; }
  .stoebern-karte--bereich { grid-template-columns: 96px minmax(0, 1fr); gap: 0 14px; padding: 12px; }
  .stoebern-karte--bereich .stoebern-text { font-size: 14.5px; }
  .stoebern .stoebern-los { margin-top: 12px; font-size: 16px; }
  .stoebern-leiste { flex-direction: column; align-items: stretch; }
  .stoebern-sort { justify-content: space-between; }
  .stoebern-sort button { flex: 1; padding: 8px 6px 6px; font-size: 15px; }
  .stoebern-suche { width: 100%; }
  .stoebern-folge { grid-template-columns: 56px minmax(0, 1fr) 46px; gap: 12px; padding: 10px 4px; }
  .stoebern-folge__cover { width: 56px; height: 56px; }
  .stoebern-folge__titel { font-size: 18px; white-space: normal; }
  .stoebern-folge__unter { flex-wrap: wrap; white-space: normal; font-size: 13.5px; }
  .stoebern-folge__dauer { display: none; }
  .stoebern-play { width: 44px; height: 44px; }
  .stoebern-play svg { width: 19px; height: 19px; }
  .fuss-rot li + li::before { margin: 0 10px; }
}