/* Comic-klar: Comic-Welt wie „comic“, aber ruhiger.
   Gerade Panels, ein einheitlicher kleiner Schatten, mehr Luft.
   Schräg sind nur: Cover-Rahmen, Story-Panels, Sticker. */

@font-face { font-family: 'Baloo 2'; src: url('fonts/baloo-2-latin-wght-normal.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Luckiest Guy'; src: url('fonts/luckiest-guy-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('fonts/lexend-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Gochi Hand'; src: url('fonts/gochi-hand-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --gutter: #0f5132;     /* Dschungelgrün: Seitenhintergrund */
  --gutter-deep: #0a3d25;
  --ink: #12261c;        /* Tusche */
  --paper: #ffffff;
  --sky: #9ed8f5;
  --orange: #ffa51f;     /* MAX-Orange */
  --red: #e8432e;        /* Dino-Rot */
  --sun: #ffd23f;        /* Sonnengelb */
  --muted: #3d5247;

  --display: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;  /* Überschriften, mit Kleinbuchstaben */
  --accent: 'Luckiest Guy', 'Arial Black', sans-serif;                    /* nur kurze Akzente */
  --body: 'Lexend', system-ui, sans-serif;
  --hand: 'Gochi Hand', 'Comic Sans MS', cursive;

  --line: 3px;
  --shadow: 5px 5px 0 var(--ink);
  --shadow-s: 3px 3px 0 var(--ink);
  --gap: clamp(18px, 2vw, 28px);
  --section: clamp(56px, 8vw, 112px);
  --max: 1200px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--gutter); color: var(--ink);
  font: 400 17px/1.65 var(--body);
}
main { overflow-x: clip; }
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0 0 .45em; }
p { margin: 0 0 1em; }
a { color: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--sun); padding: 8px 14px; border: 3px solid var(--ink); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.site-header :focus-visible, .site-footer :focus-visible, .caption--free:focus-visible, .plain :focus-visible { outline-color: var(--sun); }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 600px) { .wrap { padding-inline: 16px; } }

/* ---------- Typo ---------- */

h1, h2, h3, h4, .btn, .points dt {
  font-family: var(--display); font-weight: 800; letter-spacing: -.01em;
}
h1 { font-size: clamp(37px, 5.4vw, 64px); line-height: 1.02; }
/* „Dino-Expedition.“ nicht am Bindestrich trennen (passt ab 360 px Breite) */
@media (min-width: 360px) { h1 em { white-space: nowrap; } }
h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.02; }
/* Betonung: orange, mit dünner Tusche-Kontur wie gelettert */
h1 em, h2 em {
  font-style: normal; color: var(--orange);
  text-shadow:
    -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink),
    0 -1.5px 0 var(--ink), 0 1.5px 0 var(--ink), -1.5px 0 0 var(--ink), 1.5px 0 0 var(--ink),
    3px 3px 0 var(--ink);
}
.body-l { font-size: 19px; }
.lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; max-width: 34em; }
.hint { font-size: 15px; color: var(--muted); }

/* ---------- Panels ---------- */

.panel {
  position: relative; background: var(--paper);
  border: var(--line) solid var(--ink); border-radius: 6px; box-shadow: var(--shadow);
  padding: clamp(24px, 3.6vw, 52px);
}
.panel > :last-child { margin-bottom: 0; }
.dots {
  background-image: radial-gradient(rgb(18 38 28 / .13) 1.5px, transparent 1.7px);
  background-size: 11px 11px;
}

/* Erzähler-Kasten an der Panel-Ecke (Luckiest Guy: kurz, laut erlaubt) */
.caption {
  position: absolute; top: -18px; left: 22px; z-index: 2; margin: 0;
  background: var(--sun); border: 3px solid var(--ink); padding: 7px 12px 3px;
  font: 400 15px/1.1 var(--accent); letter-spacing: .03em; text-transform: uppercase;
}
.panel:has(> .caption) { padding-top: clamp(40px, 4.4vw, 60px); }
.caption--free {
  position: static; display: table; margin: calc(var(--gap) * 2) auto 0;
  font-size: clamp(15px, 1.6vw, 18px); padding: 10px 16px 6px; box-shadow: var(--shadow-s);
}

/* Sprechblasen */
.bubble {
  position: relative; display: inline-block; margin: 0;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 22px;
  padding: 9px 18px; font: 400 23px/1.15 var(--hand); color: var(--ink);
}
.bubble::before, .bubble::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; }
.bubble--left::before { left: -17px; top: 50%; translate: 0 -50%; border-width: 10px 17px 10px 0; border-color: transparent var(--ink) transparent transparent; }
.bubble--left::after { left: -11px; top: 50%; translate: 0 -50%; border-width: 7px 12px 7px 0; border-color: transparent var(--paper) transparent transparent; }
.bubble--up::before { top: -17px; left: 28px; border-width: 0 10px 17px 10px; border-color: transparent transparent var(--ink) transparent; }
.bubble--up::after { top: -11px; left: 31px; border-width: 0 7px 12px 7px; border-color: transparent transparent var(--paper) transparent; }

.says { display: flex; align-items: center; gap: 20px; margin: 0 0 22px; }
.says-face {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%;
  border: 3px solid var(--ink); box-shadow: var(--shadow-s); background: var(--sky);
}

/* Lautmalerei-Sticker (schräg erlaubt) */
.sticker {
  position: absolute; z-index: 3; pointer-events: none;
  filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(3px 3px 0 var(--ink));
}
.sticker > span {
  display: grid; place-items: center; width: 118px; aspect-ratio: 1;
  background: var(--red); color: var(--sun); font: 400 20px/1 var(--accent); text-transform: uppercase; text-align: center;
  clip-path: polygon(50.0% 0.0%, 58.2% 13.9%, 71.7% 5.0%, 73.1% 21.1%, 89.1% 18.8%, 83.3% 33.9%, 98.7% 38.9%, 87.0% 50.0%, 98.7% 61.1%, 83.3% 66.1%, 89.1% 81.2%, 73.1% 78.9%, 71.7% 95.0%, 58.2% 86.1%, 50.0% 100.0%, 41.8% 86.1%, 28.3% 95.0%, 26.9% 78.9%, 10.9% 81.2%, 16.7% 66.1%, 1.3% 61.1%, 13.0% 50.0%, 1.3% 38.9%, 16.7% 33.9%, 10.9% 18.8%, 26.9% 21.1%, 28.3% 5.0%, 41.8% 13.9%);
}
.sticker--roar { top: 36%; right: -22px; rotate: 12deg; }
.sticker--gratis { top: -34px; left: -26px; rotate: -12deg; }
.sticker--gratis > span { background: var(--orange); color: var(--ink); width: 110px; font-size: 22px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px 10px; border: 3px solid var(--ink); border-radius: 12px;
  background: var(--orange); color: var(--ink); text-decoration: none;
  font-size: 19px; line-height: 1.15; box-shadow: var(--shadow-s);
  transition: transform .12s ease, box-shadow .12s ease; cursor: pointer;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--ghost { background: var(--paper); }
.btn--small { font-size: 15px; padding: 7px 14px 5px; border-radius: 10px; }
/* Vor dem Verkaufsstart: gelber Ankündigungs-Kasten statt Knopf, mit Kalender-Punkt */
.btn.is-bald { background: var(--sun); box-shadow: none; cursor: default; border-style: dashed; }
.btn.is-bald::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); flex: none; }
.btn.is-bald:hover, .btn.is-bald:active { transform: none; box-shadow: none; }

.link { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--orange); }
.link:hover { text-decoration-color: var(--ink); }

/* Kaufen: Knopf + Preis in einer Zeile */
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 14px; }
.price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.price strong { font: 800 30px/1 var(--display); }
.price span { font-size: 14px; color: var(--muted); }

/* ---------- Header ---------- */

.site-header { position: sticky; top: 0; z-index: 20; background: var(--gutter); border-bottom: var(--line) solid var(--ink); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 8px; }
.logo img { width: 128px; }
.site-header nav { display: flex; gap: 26px; }
.site-header nav a { color: var(--paper); text-decoration: none; font-weight: 500; font-size: 15px; }
.site-header nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--sun); text-underline-offset: 6px; }
@media (max-width: 900px) { .site-header nav { display: none; } .logo img { width: 108px; } }
@media (max-width: 420px) { .site-header .btn--small { font-size: 13px; padding: 6px 10px 4px; } .site-header .btn.is-bald::before { display: none; } }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(24px, 3.4vw, 48px) var(--section); }
.panel--hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  padding: 0; overflow: hidden;
}
.hero-text { padding: clamp(28px, 4.4vw, 64px); }
.hero-text h1 { margin-bottom: 22px; }
.hero-text .lead { margin-bottom: 22px; }
.hero-says { margin-bottom: 26px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 28px; list-style: none; }
.facts li { background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 13px; font-size: 14px; font-weight: 600; }
.hero-insta { margin: 0; font-size: 15px; }

/* Ohne Szene: Cover im Rahmen auf Himmelblau */
.hero-cover {
  order: 2; display: grid; place-items: center; padding: clamp(28px, 4vw, 56px);
  background-color: var(--sky); border-left: var(--line) solid var(--ink);
}
.cover-frame { width: min(100%, 420px); border: var(--line) solid var(--ink); box-shadow: 8px 8px 0 var(--ink); rotate: 2deg; background: var(--paper); }

/* Mit Szene („Splash-Page“): Kulisse füllt das Panel, das Buch steht auf der Steinplatte,
   der Text sitzt als eigenes weißes Panel links darüber. */
.panel--hero.has-scene { position: relative; min-height: clamp(560px, 48vw, 660px); align-items: center; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.hero-scene { position: absolute; inset: 0; background: var(--sky); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.hero-stage {
  position: absolute; left: 59%; right: 2%; bottom: 7%; height: 74%;
  display: flex; justify-content: center; align-items: flex-end;
}
.hero-book {
  position: relative; z-index: 1; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 3px 2px rgb(40 26 10 / .45)) drop-shadow(10px 16px 14px rgb(40 26 10 / .28));
}
/* Kontaktschatten auf der Steinplatte, damit das Buch steht und nicht schwebt */
.contact {
  position: absolute; bottom: -14px; left: 50%; translate: -50% 0; width: min(78%, 330px); height: 34px;
  background: radial-gradient(closest-side, rgb(48 30 12 / .55), rgb(48 30 12 / .22) 55%, transparent);
}
/* kompakter, damit das Hero-Panel auf einen Bildschirm passt */
.has-scene .hero-says { margin-bottom: 18px; }
.has-scene .hero-text h1, .has-scene .hero-text .lead { margin-bottom: 18px; }
.has-scene .facts { margin-bottom: 22px; }
.has-scene .hero-text {
  position: relative; z-index: 2; grid-column: 1;
  margin: clamp(20px, 2.4vw, 30px); padding: clamp(24px, 2.6vw, 36px);
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: 6px; box-shadow: var(--shadow);
}

@media (max-width: 900px) {
  .panel--hero { grid-template-columns: minmax(0, 1fr); }
  .hero-cover { order: -1; border-left: 0; border-top: 0; border-bottom: var(--line) solid var(--ink); padding-block: 28px 36px; }
  .cover-frame { width: min(70%, 320px); }
  .panel--hero.has-scene { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .hero-scene { position: relative; height: clamp(380px, 100vw, 560px); border-bottom: var(--line) solid var(--ink); }
  .hero-bg { object-position: 58% 85%; }
  .hero-stage { left: 10%; right: 10%; bottom: 6%; height: 80%; }
  .has-scene .hero-text { margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: clamp(24px, 6vw, 40px); }
}
@media (max-width: 520px) {
  .says-face { width: 50px; height: 50px; }
  .bubble--left { font-size: 21px; }
  .price strong { font-size: 26px; }
}

/* ---------- Abschnitte ---------- */

.block { padding-bottom: var(--section); }
#abschluss { padding-bottom: clamp(48px, 6vw, 80px); }

/* Max: Text + Video, darunter der Comicstreifen */
.grid-max { display: grid; gap: calc(var(--gap) * 1.6); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.panel--maxtext .body-l { max-width: 30em; }
.panel--video { padding: 0; overflow: hidden; max-width: 420px; justify-self: center; width: 100%; }
.max-video { position: relative; margin: 0; }
.max-video video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sky); }
.max-video-toggle {
  position: absolute; right: 14px; bottom: 14px;
  padding: 7px 14px 5px; border: 3px solid var(--ink); border-radius: 10px;
  background: var(--sun); color: var(--ink); font: 800 15px/1.1 var(--display);
  box-shadow: var(--shadow-s); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.max-video-toggle:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.max-video-toggle:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
@media (max-width: 800px) { .grid-max { grid-template-columns: minmax(0, 1fr); } }

/* Comicstreifen: Panels nie breiter als die Bilder (344 px), leicht schräg */
.strip {
  list-style: none; padding: 0; margin: calc(var(--gap) * 2.4) 0 0;
  display: grid; gap: calc(var(--gap) * 1.4) var(--gap);
  grid-template-columns: repeat(3, minmax(0, 344px)); justify-content: center;
}
.panel--story { padding: 0 0 16px; display: flex; flex-direction: column; box-shadow: var(--shadow-s); }
.panel--story img { width: 100%; aspect-ratio: 344 / 300; object-fit: cover; border-bottom: 3px solid var(--ink); }
.panel--story .bubble { align-self: flex-start; margin: -18px 14px 0; font-size: 21px; }
.panel--story:nth-child(odd) { rotate: -.8deg; }
.panel--story:nth-child(even) { rotate: .7deg; }
.panel--endcard { padding: 0; background: var(--sky); }
.panel--endcard img { border-bottom: 0; aspect-ratio: auto; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .strip { grid-template-columns: repeat(2, minmax(0, 344px)); } }
@media (max-width: 460px) {
  .strip { gap: 22px 14px; }
  .panel--story .bubble { font-size: 17px; padding: 7px 11px; margin-inline: 8px; }
}

/* Auftritt des Streifens beim Hineinscrollen */
@media (prefers-reduced-motion: no-preference) {
  .js .strip .pop { animation: pop .5s cubic-bezier(.34, 1.5, .64, 1) both paused; animation-delay: calc(var(--i) * 110ms); }
  .js .strip .pop .bubble { animation: bubble .3s cubic-bezier(.34, 1.7, .64, 1) both paused; animation-delay: calc(var(--i) * 110ms + 240ms); }
  .js .strip.is-in .pop, .js .strip.is-in .pop .bubble { animation-play-state: running; }
}
@keyframes pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes bubble { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }

/* Urzeit */
.intro-grid { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; }
.intro-grid .body-l { max-width: 32em; }
.era-index ol { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.era-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px 9px; border: 3px solid var(--ink); border-radius: 8px; text-decoration: none; box-shadow: var(--shadow-s); transition: transform .12s ease, box-shadow .12s ease; }
.era-index a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.index--trias a { background: var(--sun); }
.index--jura a { background: var(--sky); }
.index--kreide a { background: var(--orange); }
.index-name { font: 400 26px/1 var(--accent); text-transform: uppercase; }
.index-time { font-size: 13px; font-weight: 600; text-align: right; }
.era-index .hint { margin: 0; }
@media (max-width: 860px) { .intro-grid { grid-template-columns: minmax(0, 1fr); } }

.era { margin-top: calc(var(--section) * .8); }
/* Zeitalter-Kopf: kein eigenes Panel, sondern ein farbiger Streifen mit Kontur */
.era-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px clamp(24px, 3.4vw, 48px); align-items: center;
  padding: 18px clamp(20px, 3vw, 36px); border: var(--line) solid var(--ink); border-radius: 6px; box-shadow: var(--shadow);
}
.era--trias .era-head { background: var(--sun); }
.era--jura .era-head { background: var(--sky); }
.era--kreide .era-head { background: var(--orange); }
.era-head h3 { margin: 0; display: grid; }
.era-name { font: 400 clamp(52px, 7vw, 92px)/.85 var(--accent); text-transform: uppercase; color: var(--paper);
  text-shadow: -2.5px -2.5px 0 var(--ink), 2.5px -2.5px 0 var(--ink), -2.5px 2.5px 0 var(--ink), 2.5px 2.5px 0 var(--ink), 0 2.5px 0 var(--ink), 0 -2.5px 0 var(--ink), 2.5px 0 0 var(--ink), -2.5px 0 0 var(--ink), 5px 5px 0 var(--ink); }
.era-title { font-size: 22px; line-height: 1.1; margin-top: 10px; }
.era-time { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px; }
.era-info p:last-child { margin: 0; max-width: 44em; }
@media (max-width: 700px) { .era-head { grid-template-columns: minmax(0, 1fr); } }

.pages { display: grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: calc(var(--gap) * 1.4) 0 0; list-style: none; }
.panel--page { padding: 10px 10px 20px; box-shadow: var(--shadow-s); transition: translate .2s ease, box-shadow .2s ease; }
.panel--page:hover { translate: 0 -4px; box-shadow: 5px 7px 0 var(--ink); }
.page { display: block; width: 100%; padding: 0; border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); cursor: zoom-in; }
.pages h4 { font-size: 21px; line-height: 1.05; margin: 14px 6px 6px; overflow-wrap: anywhere; }
.pages p { font-size: 15px; line-height: 1.5; margin: 0 6px; color: #23382d; }
.panel--empty { margin-top: var(--gap); text-align: center; }
@media (max-width: 1000px) { .pages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) {
  .pages { gap: 14px; } .pages h4 { font-size: 17px; } .pages p { font-size: 14px; } .panel--page { padding: 6px 6px 14px; }
  .sticker--roar { right: -8px; top: 30%; } .sticker--roar > span { width: 92px; font-size: 16px; }
}

/* Wissen */
.wissen-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; }
.wissen-head h2 { margin: 0; }
/* Abzeichen wie Sticker: leicht gedreht und gestaffelt, Text im Bild – nie kleiner als 110 px */
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.badges li { width: 150px; filter: drop-shadow(3px 4px 0 rgb(18 38 28 / .35)); }
.badges li:nth-child(1) { rotate: -7deg; }
.badges li:nth-child(2) { rotate: 4deg; translate: 0 10px; }
.badges li:nth-child(3) { rotate: -3deg; }
@media (max-width: 700px) { .badges { width: 100%; } .badges li { width: 112px; } }
.points { display: grid; gap: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 18px 0 0; border-top: 3px solid var(--ink); }
.points div { padding: 18px 18px 4px 0; }
.points div + div { padding-left: 18px; border-left: 2px solid rgb(18 38 28 / .2); }
.points dt { font-size: 22px; line-height: 1.1; margin-bottom: 6px; overflow-wrap: anywhere; }
.points dt::before { content: ''; display: block; width: 28px; height: 6px; border-radius: 3px; background: var(--orange); margin-bottom: 12px; }
.points dd { margin: 0; font-size: 15px; line-height: 1.55; }
.panel--wide { padding: 0; overflow: hidden; margin-top: calc(var(--gap) * 1.6); }
.panel--wide img { width: 100%; }
.grid-two--wissen { margin-top: calc(var(--gap) * 1.6); align-items: center; }
.plain { color: var(--paper); }
.plain .body-l { font-size: 20px; max-width: 30em; margin: 0; }
.panel--gift { background: var(--sun); }
.panel--gift h3 { font-size: 28px; line-height: 1.05; }
@media (max-width: 1000px) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .points div, .points div + div { padding: 16px 16px 4px 0; border-left: 0; }
  .points div:nth-child(even) { padding-left: 16px; border-left: 2px solid rgb(18 38 28 / .2); }
}
@media (max-width: 460px) {
  .points { grid-template-columns: minmax(0, 1fr); }
  .points div:nth-child(even) { padding-left: 0; border-left: 0; }
  .points dt { font-size: 20px; }
}

/* Gratis */
.panel--gratis { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.sheet { position: relative; background: var(--paper); border: 2px solid var(--ink); padding: 10px; box-shadow: var(--shadow-s); }
.sheet img { width: 100%; }
@media (max-width: 900px) { .panel--gratis { grid-template-columns: minmax(0, 1fr); } .sheet { margin: 18px 6px 0; } }

/* Community + Ausblick */
.grid-two { display: grid; gap: calc(var(--gap) * 1.4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.panel--sky { background: var(--sky); }
.panel--orange { background: var(--orange); }
.panel--sky .hint { color: var(--ink); }
.grid-two h2 { font-size: clamp(32px, 3.2vw, 44px); }
@media (max-width: 800px) { .grid-two { grid-template-columns: minmax(0, 1fr); } }

/* Autor: ruhig, für Erwachsene */
.autor-grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; }
/* Foto als Panel im Tusche-Rahmen, volles 4:5 ohne Beschnitt */
.autor-photo { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--sky); border: var(--line) solid var(--ink); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; }
.autor-photo img { width: 100%; height: 100%; object-fit: cover; }
.quote { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.12; }
.quote::before { content: '„'; }
.quote::after { content: '“'; }
.panel--autor p { max-width: 38em; }
.signature { font: 400 26px/1.2 var(--hand); }
@media (max-width: 800px) { .autor-grid { grid-template-columns: minmax(0, 1fr); } .autor-photo { width: min(100%, 360px); justify-self: center; } }

/* FAQ */
.panel--faq { max-width: 880px; margin-inline: auto; }
details { border-top: 2px solid var(--ink); }
details:last-child { border-bottom: 2px solid var(--ink); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-weight: 600; font-size: 18px; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 50%; font: 800 22px/1 var(--display); transition: rotate .2s ease, background .2s ease; }
details[open] summary::after { rotate: 45deg; background: var(--sun); }
details p { margin: 0 0 18px; max-width: 46em; }

/* Abschluss */
.panel--finale { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; background-color: var(--sun); }
.finale-text .buy { margin: 8px 0 0; }
.finale-media { position: relative; max-width: 400px; justify-self: center; }
.finale-bild { border: var(--line) solid var(--ink); box-shadow: 8px 8px 0 var(--ink); rotate: 2deg; background: var(--paper); }
/* Preisschild auf der Steinplatte (MAX-Stein), Seitenverhältnis der Grafik beibehalten */
.price-stone {
  position: absolute; left: -44px; bottom: 28px; z-index: 2; margin: 0;
  width: 172px; aspect-ratio: 1890 / 1654; rotate: -8deg;
  display: grid; place-content: center; text-align: center; color: var(--ink);
  background: url('assets/img/steinplatte-480.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(4px 5px 0 rgb(18 38 28 / .45));
}
.price-stone strong { font: 800 36px/1 var(--display); }
.price-stone span { font-size: 13px; font-weight: 600; }
@media (max-width: 800px) { .panel--finale { grid-template-columns: minmax(0, 1fr); } .finale-media { max-width: 300px; } .price-stone { left: -14px; width: 140px; } .price-stone strong { font-size: 30px; } }

/* ---------- Footer ---------- */

.site-footer { color: var(--paper); padding-block: 48px 40px; border-top: var(--line) solid var(--ink); background: var(--gutter-deep); }
.footer-inner { display: grid; gap: 16px; font-size: 15px; }
.footer-inner img { width: 130px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { color: var(--paper); text-decoration-color: var(--sun); text-underline-offset: 4px; }
.site-footer p { margin: 0; opacity: .85; }

/* ---------- Lightbox ---------- */

.lightbox { padding: 0; border: var(--line) solid var(--ink); border-radius: 6px; box-shadow: 8px 8px 0 var(--ink); max-width: min(92vw, 720px); background: var(--paper); overflow: visible; }
.lightbox::backdrop { background: rgb(10 61 37 / .85); }
.lightbox img { max-height: 86vh; width: auto; margin: 0 auto; }
.lightbox form { position: absolute; top: -18px; right: -18px; }
.lightbox button { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--ink); background: var(--sun); color: var(--ink); font: 800 28px/1 var(--display); cursor: pointer; box-shadow: var(--shadow-s); }
@media (max-width: 600px) { .lightbox form { top: 8px; right: 8px; } }

/* ---------- Rechtliches ---------- */

.legal-main { max-width: 760px; margin: 48px auto; padding: clamp(22px, 4vw, 44px); background: var(--paper); border: var(--line) solid var(--ink); border-radius: 6px; box-shadow: var(--shadow); }
@media (max-width: 800px) { .legal-main { margin: 24px 16px; } }
.legal-main h1 { font-size: clamp(36px, 6vw, 52px); }
.legal-main h2 { font-size: 22px; margin-top: 28px; }
.legal-main a { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .panel--page, summary::after, .max-video-toggle, .era-index a { transition: none; }
}