/* Cordeiro · Landingpage
   Grammatik: Fragenzettel. Jedes Kapitel ist eine Frage des Inhabers, darunter die Antwort.
   Farben aus der Marke: Creme, Sand, Waldgrün als ganze Flächen, Braun für Text, Terrakotta nur für Handlungen. */

@font-face {
  font-family: "Young Serif";
  src: url("fonts/young-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marke */
  --creme: #FAF6ED;
  --sand: #E7D8C3;
  --braun: #63351F;
  --gruen: #315B48;
  --terra: #C87950;
  /* abgeleitet, alle auf ihrem Grund ≥ 4,5:1 */
  --braun-weich: #7A5A48;      /* 5,75:1 auf Creme, 4,44 auf Sand → auf Sand nur groß */
  --braun-tief: #2E170B;       /* Schrift auf Terrakotta, 5,07:1 */
  --terra-text: #A0532C;       /* Links auf Creme, 5,17:1 */
  --terra-text-sand: #8E4A27;  /* Links auf Sand, 4,75:1 */
  --gruen-hell: var(--sand);   /* Nebentext auf Waldgrün: Sand aus der Marke, 5,52:1 */
  --linie: color-mix(in oklab, var(--braun) 18%, transparent);
  --schatten: 0 1.5rem 3rem -1.5rem rgb(60 30 15 / 0.38), 0 0.25rem 0.75rem -0.25rem rgb(60 30 15 / 0.18);

  --display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --text: "Atkinson Hyperlegible Next", system-ui, sans-serif;

  --rand: clamp(1rem, 4vw, 3.25rem);
  --zettel: 0rem;
  --kopf-h: 4.25rem;
  --radius: 1.1rem;

  /* Engine-Tokens */
  --sc-canvas: var(--creme);
  --sc-surface: var(--sand);
  --sc-ink: var(--braun);
  --sc-ink-soft: var(--braun-weich);
  --sc-accent: var(--terra);
  --sc-accent-ink: var(--braun-tief);
  --sc-font-display: var(--display);
  --sc-font-text: var(--text);
}
@media (min-width: 1100px) {
  :root { --zettel: 15.5rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--kopf-h); overflow-x: clip; }
/* Wolle, Stempel und Lauftext dürfen über den Rand ragen, aber nie die Seite verbreitern (sonst zoomt das Handy heraus). clip statt hidden, damit die Pins (sticky) weiter funktionieren. */
body, .hero, .kapitel { overflow-x: clip; }
html.ruhig { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--braun);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
[hidden] { display: none !important; }
/* Ohne JavaScript startet die Engine nicht: dann bleibt alles sichtbar. */
html:not(.sc-ready) :is([data-sc-in], [data-sc-stagger] > *) { opacity: 1; transform: none; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p, ul, ol, dl, dd { margin: 0; }
a { color: var(--terra-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--braun); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.springen {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--braun); color: var(--creme); padding: 0.75rem 1rem; border-radius: 0.6rem;
}
.springen:focus { top: 1rem; }

/* ----------------------------------------------------------- Knöpfe -- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0.85rem 1.6rem;
  border: 0; border-radius: 999px;
  background: var(--terra); color: var(--braun-tief);
  font: 700 1.0625rem/1.2 var(--text);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 0.6rem 1.2rem -0.7rem rgb(99 53 31 / 0.55);
  transition: transform 180ms ease-out, background-color 180ms ease-out, box-shadow 180ms ease-out;
}
.knopf:hover { background: #D58A61; transform: translateY(-1px); box-shadow: 0 0.9rem 1.5rem -0.8rem rgb(99 53 31 / 0.6); }
.knopf:active { transform: translateY(1px); }
.knopf[disabled] { opacity: 0.7; cursor: progress; }
.knopf--klein { min-height: 2.75rem; padding: 0.6rem 1.15rem; font-size: 1rem; }

/* ------------------------------------------------------------- Kopf -- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--kopf-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 var(--rand);
  pointer-events: none;
}
.kopf > * { pointer-events: auto; }
.kopf__marke {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--braun); text-decoration: none;
  font: 400 1.45rem/1 var(--display);
  padding: 0.3rem 1rem 0.3rem 0.3rem;
  background: color-mix(in oklab, var(--creme) 88%, transparent);
  backdrop-filter: blur(8px);
  border-radius: 999px;
}
.kopf__marke img { width: 2.6rem; height: 2.6rem; }
.kopf__knopf { margin-left: auto; }
.kopf__fragen { position: relative; margin-left: auto; }
.kopf__fragen + .kopf__knopf { margin-left: 0; }
.kopf__fragen summary {
  list-style: none; cursor: pointer;
  min-height: 2.75rem; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.05rem; border-radius: 999px;
  background: var(--creme); color: var(--braun);
  border: 2px solid var(--braun-weich);
  font-weight: 700;
}
.kopf__fragen summary::-webkit-details-marker { display: none; }
.kopf__fragen summary::after {
  content: ""; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 180ms;
}
.kopf__fragen[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.kopf__fragen ol {
  position: absolute; right: 0; top: calc(100% + 0.5rem);
  width: min(20rem, calc(100vw - 2 * var(--rand)));
  list-style: none; padding: 0.5rem;
  background: var(--creme); border-radius: var(--radius);
  box-shadow: var(--schatten); border: 1px solid var(--linie);
}
.kopf__fragen a {
  display: block; padding: 0.75rem 0.85rem; border-radius: 0.6rem;
  color: var(--braun); text-decoration: none; font-weight: 600;
}
.kopf__fragen a:hover { background: var(--sand); }
@media (min-width: 1100px) {
  .kopf__fragen { display: none; }
  .kopf__fragen + .kopf__knopf { margin-left: auto; }
}

/* ------------------------------------------------- Fragenzettel (Nav) -- */
.zettel { display: none; }
@media (min-width: 1100px) {
  .zettel {
    display: block;
    position: fixed; z-index: 30;
    left: var(--rand); top: 50%;
    width: calc(var(--zettel) - var(--rand) - 1.5rem);
    transform: translateY(-50%);
    color: var(--braun);
    opacity: 0; visibility: hidden;
    transition: opacity 300ms ease-out, visibility 0s 300ms, color 300ms;
  }
  body.nach-hero .zettel { opacity: 1; visibility: visible; transition: opacity 300ms ease-out, color 300ms; }
  .zettel__titel { font: 400 1.25rem/1.2 var(--display); margin-bottom: 0.75rem; padding-left: 2.25rem; }
  .zettel ol { list-style: none; padding: 0; position: relative; }
  .zettel li { position: relative; }
  .zettel a {
    display: block; padding: 0.45rem 0 0.45rem 2.25rem;
    color: inherit; text-decoration: none;
    font-size: 0.98rem; line-height: 1.3;
    opacity: 0.78;
    transition: opacity 200ms;
  }
  .zettel a:hover, .zettel a.ist-aktiv { opacity: 1; }
  .zettel a.ist-aktiv { font-weight: 700; }
  .zettel__lamm {
    position: absolute; left: 0; top: 0;
    width: 1.6rem; height: 1.6rem;
    transform: translateY(var(--lamm-y, 0px));
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.grund-dunkel .zettel { color: var(--creme); }
}

/* -------------------------------------------------------------- Hero -- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: calc(var(--kopf-h) + 1.25rem) var(--rand) clamp(3rem, 8vh, 6rem);
}
.hero__titel {
  font: 400 clamp(2.5rem, 1.4rem + 3.1vw, 4.6rem)/1.04 var(--display);
  letter-spacing: -0.012em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.hero__titel span { display: block; color: var(--gruen); }
.hero__lead { font-size: clamp(1.15rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; max-width: 36ch; margin-bottom: 1.6rem; }

.eintrag__stand { font-weight: 700; margin-bottom: 0.9rem; max-width: 36ch; }
.eintrag__label { display: block; font-size: 1rem; margin-bottom: 0.4rem; }
.eintrag__zeile { display: flex; gap: 0.6rem; max-width: 34rem; }
.eintrag__zeile input { flex: 1; min-width: 0; }
.eintrag input[type="email"], .eintrag input[type="text"] {
  min-height: 3.25rem; padding: 0.7rem 1rem;
  border: 2px solid var(--braun-weich); border-radius: 0.8rem;
  background: #FFFDF8; color: var(--braun);
  font: 400 1.0625rem/1.3 var(--text);
}
.eintrag input::placeholder { color: var(--braun-weich); opacity: 1; }
.eintrag input:focus-visible { outline: 3px solid var(--braun); outline-offset: 2px; border-color: var(--braun); }
.eintrag input[aria-invalid="true"] { border-color: #9B2C1F; }
.eintrag__ok {
  display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start;
  margin-top: 1rem; max-width: 34rem; font-size: 0.95rem; line-height: 1.45; cursor: pointer;
}
.eintrag__ok input { width: 1.35rem; height: 1.35rem; margin: 0.1rem 0 0; accent-color: var(--gruen); }
.eintrag__meldung { margin-top: 0.9rem; font-weight: 700; max-width: 34rem; min-height: 1.5em; }
.eintrag__meldung.ist-fehler { color: #9B2C1F; }
.eintrag__meldung.ist-ok { color: var(--gruen); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Ebenen der Bühne: Wolle hinten, Filmfenster, Foto im Fenster, Stempel und Schlüssel vorn */
.hero__buehne { position: relative; isolation: isolate; }
.ebene { will-change: transform; }
.ebene--wolle {
  position: absolute; z-index: -1;
  width: 78%; right: -10%; top: -22%;
  transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--hp, 0) * 70px + var(--my, 0) * -8px), 0);
}
.wolle { width: 100%; height: auto; fill: var(--sand); }
.film { position: relative; transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--hp, 0) * -40px + var(--my, 0) * 6px), 0); }
.film__fenster {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 1.4rem;
  background: var(--braun);
  box-shadow: var(--schatten);
  outline: 1px solid color-mix(in oklab, var(--braun) 25%, transparent);
}
.film__bild, .film__bild img, .film__fenster video {
  position: absolute; inset: -5%; width: 110%; height: 110%; max-width: none;
  object-fit: cover;
}
.film__bild img { inset: 0; width: 100%; height: 100%; }
.film__bild { transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--hp, 0) * 36px + var(--my, 0) * -10px), 0) scale(1.02); }
.film__fenster video { inset: 0; width: 100%; height: 100%; background: #1A120C; object-fit: contain; transform: none; }
.spielt .film__fenster { aspect-ratio: 16 / 9; }
.film__start { white-space: nowrap; text-decoration: none; }
.film__start small { font-weight: 500; font-size: 0.9rem; opacity: 0.75; margin-left: 0.3rem; }
.film__start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 3.5rem; padding: 0.8rem 1.5rem 0.8rem 1rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--creme); color: var(--braun);
  font: 700 1.1rem/1 var(--text);
  box-shadow: var(--schatten);
}
.film__dreieck {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--terra); position: relative;
}
.film__dreieck::after {
  content: ""; position: absolute; left: 0.8rem; top: 0.6rem;
  border-left: 0.75rem solid var(--braun-tief); border-top: 0.45rem solid transparent; border-bottom: 0.45rem solid transparent;
}
.film__status { margin: 1rem 0 0 auto; font-size: 1rem; color: var(--braun-weich); max-width: 38ch; text-align: right; }
/* Der Stempel „Film in Arbeit“ erscheint nur, wenn der Film fehlt. */
.ebene--stempel { display: none; }
.ohne-film .ebene--stempel { display: block; }

.ebene--stempel {
  position: absolute; z-index: 2;
  right: -1.25rem; top: -2.25rem;
  transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--hp, 0) * -90px + var(--my, 0) * 12px), 0);
}
.stempel-rund {
  width: 7.5rem; height: 7.5rem; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: var(--creme); color: var(--braun);
  border: 3px solid var(--braun);
  outline: 2px solid var(--braun); outline-offset: -9px;
  font: 400 1.05rem/1.15 var(--display);
  transform: rotate(-9deg);
  box-shadow: 0 0.8rem 1.4rem -0.8rem rgb(60 30 15 / 0.5);
}
.stempel-rund span:first-child { font-size: 1.45rem; }

/* ----------------------------------------------------------- Kapitel -- */
.kapitel {
  position: relative;
  padding: clamp(5rem, 13vh, 9rem) var(--rand);
  padding-left: calc(var(--zettel) + var(--rand));
}
.frage {
  font: 400 clamp(1.9rem, 1.4rem + 2.1vw, 3.35rem)/1.12 var(--display);
  letter-spacing: -0.008em;
  margin: 0 0 1.25rem;
  max-width: 19ch;
  text-wrap: balance;
  text-indent: -0.4em;
}
.antwort { font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.32rem); line-height: 1.55; max-width: 40ch; }
.antwort + .antwort, .zeichen + .antwort { margin-top: 1.25rem; }
.antwort--leise { font-style: italic; color: var(--braun-weich); }
/* Nachfrage innerhalb eines Kapitels: dieselbe Stimme wie die Frage, eine Stufe kleiner */
.unterfrage { font: 400 clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem)/1.2 var(--display); margin: 2.25rem 0 0.75rem; max-width: 22ch; text-indent: -0.4em; }
.kapitel__foto img { border-radius: var(--radius); box-shadow: var(--schatten); width: 100%; }

/* 2 · Merkt das jemand */
.kapitel--merkt {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5.5rem); align-items: center;
}
.zeichen { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: 0.15rem; max-width: 40ch; }
.zeichen li {
  position: relative; padding: 0.7rem 0 0.7rem 2.1rem;
  border-bottom: 1px solid var(--linie);
  font-size: 1.125rem; line-height: 1.45;
}
.zeichen li::before {
  content: ""; position: absolute; left: 0.2rem; top: 1.25rem;
  width: 1rem; height: 2px; background: var(--terra); transform: rotate(-8deg);
}

/* 3 · Die Schur */
.kapitel--schur { background: var(--sand); padding: 0; }
.schur {
  /* Kein position hier: die Engine macht die Bühne sticky, und sticky ist selbst Bezugsrahmen für die Locken. */
  display: grid; grid-template-columns: minmax(16rem, 4fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: center;
  padding: calc(var(--kopf-h) + 1rem) var(--rand) 2rem calc(var(--zettel) + var(--rand));
}
.kapitel--schur .frage { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.9rem); }
.kapitel--schur .antwort { font-size: 1.15rem; }
.schur__liste { list-style: none; padding: 0; margin-top: 1.4rem; display: grid; gap: 0.35rem; }
.schur__liste li { font-size: 1.05rem; line-height: 1.35; position: relative; padding-left: 1.75rem; }
.schur__liste li::before {
  content: ""; position: absolute; left: 0; top: 0.3rem;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 2px solid var(--braun-weich);
  transition: background-color 200ms, border-color 200ms;
}
.schur__liste li span { transition: color 200ms; background: linear-gradient(var(--braun), var(--braun)) no-repeat 0 55% / 0 2px; transition: background-size 380ms ease-out, color 200ms; }
.schur__liste li.ist-weg span { background-size: 100% 2px; color: var(--braun-weich); }
.schur__liste li.ist-weg::before { background: var(--creme); border-color: var(--braun); }
.schur__bleibt {
  margin-top: 1.4rem; font-weight: 700; max-width: 34ch; line-height: 1.45;
  opacity: 0; transform: translateY(8px); transition: opacity 400ms, transform 400ms;
}
.schur__bleibt.ist-da { opacity: 1; transform: none; }

.schur__buehne { position: relative; display: grid; gap: 0.8rem; align-content: center; }
.browser {
  position: relative;
  height: min(64svh, 40rem);
  background: var(--creme);
  border-radius: 1rem;
  box-shadow: var(--schatten);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--braun) 22%, transparent);
}
.browser__leiste {
  height: 2.6rem; display: flex; align-items: center; gap: 0.9rem; padding: 0 0.9rem;
  background: #EFE6D7; border-bottom: 1px solid var(--linie);
}
.browser__punkte { display: flex; gap: 0.35rem; }
.browser__punkte i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: color-mix(in oklab, var(--braun) 28%, var(--creme)); }
.browser__adresse {
  flex: 1; max-width: 26rem; display: flex; align-items: center; gap: 0.5rem;
  background: var(--creme); border-radius: 999px; padding: 0.25rem 0.9rem;
  font-size: 0.875rem; color: var(--braun);
}
.browser__warnung { color: #9B2C1F; font-weight: 700; }
.browser__warnung::after { content: " ·"; color: var(--braun-weich); font-weight: 400; }
.browser__schloss { display: none; width: 0.7rem; height: 0.55rem; border-radius: 2px; background: var(--gruen); position: relative; margin-top: 0.3rem; }
.browser__schloss::before {
  content: ""; position: absolute; left: 0.12rem; top: -0.38rem; width: 0.46rem; height: 0.5rem;
  border: 2px solid var(--gruen); border-bottom: 0; border-radius: 0.3rem 0.3rem 0 0;
}
.browser.ist-neu .browser__warnung { display: none; }
.browser.ist-neu .browser__schloss { display: inline-block; }
.browser__seite { position: absolute; inset: 2.6rem 0 0 0; overflow: hidden; container-type: size; }

/* Neue Beispielseite „Gasthaus Seidel“: bewusst eine eigene Gestaltung, nicht die von Cordeiro.
   So sieht eine Seite aus, die die Anwendung baut. Maße in cqw, damit sie mit dem Browserfenster wächst. */
@font-face { font-family: "Seidel Fraunces"; src: url("fonts/fraunces-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Seidel Fraunces"; src: url("fonts/fraunces-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Seidel Mono"; src: url("fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
.neu {
  --u: min(1cqw, 1.24cqh); /* Breite oder Höhe des Fensters, je nachdem, was knapper ist */
  --s-papier: #EEE4D1; --s-tinte: #2A1A12; --s-gruen: #1F3A2E; --s-messing: #C99A45; --s-linie: #CDBB9C;
  position: absolute; inset: 0; overflow: hidden;
  background: var(--s-papier); color: var(--s-tinte);
  display: grid; grid-template-columns: 1.08fr 0.92fr; grid-template-rows: auto 1fr auto;
  font-family: "Seidel Fraunces", Georgia, serif;
}
.neu__kopf { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(2.6 * var(--u)) calc(4 * var(--u)) 0; }
.neu__marke { display: flex; align-items: center; gap: calc(1.2 * var(--u)); font-style: italic; font-weight: 400; font-size: calc(3.9 * var(--u)); line-height: 1; }
.neu__marke i { width: calc(1.5 * var(--u)); height: calc(1.5 * var(--u)); border-radius: 50%; background: var(--s-messing); }
.neu__nav { display: flex; gap: calc(3 * var(--u)); margin-left: auto; font-style: italic; font-weight: 400; font-size: calc(1.9 * var(--u)); }
.neu__pille { border: 1.5px solid var(--s-tinte); border-radius: 99px; padding: calc(0.9 * var(--u)) calc(2.2 * var(--u)); font-weight: 600; font-size: calc(1.7 * var(--u)); white-space: nowrap; }
.neu__buehne { grid-column: 1; grid-row: 2; align-self: center; padding: calc(2 * var(--u)) 0 calc(2 * var(--u)) calc(4 * var(--u)); position: relative; z-index: 1; }
.neu__kicker { font: 500 calc(1.45 * var(--u))/1.4 "Seidel Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: calc(1.8 * var(--u)); }
.neu__titel { font-weight: 600; font-size: calc(7.4 * var(--u)); line-height: 0.98; letter-spacing: -0.025em; max-width: 9.5em; }
.neu__titel em { font-style: italic; font-weight: 400; color: var(--s-gruen); }
.neu__unter { font-style: italic; font-weight: 400; font-size: calc(2.35 * var(--u)); line-height: 1.45; margin-top: calc(2 * var(--u)); }
.neu__knoepfe { display: flex; align-items: center; gap: calc(2.6 * var(--u)); margin-top: calc(3 * var(--u)); }
.neu__knopf { background: var(--s-gruen); color: var(--s-papier); border-radius: 99px; padding: calc(1.5 * var(--u)) calc(3 * var(--u)); font-weight: 600; font-size: calc(1.9 * var(--u)); white-space: nowrap; }
.neu__link { font-style: italic; font-size: calc(1.9 * var(--u)); border-bottom: 1.5px solid currentColor; white-space: nowrap; }
.neu__bild { grid-column: 2; grid-row: 2; position: relative; margin: calc(2.4 * var(--u)) calc(4 * var(--u)) calc(2.4 * var(--u)) calc(1 * var(--u)); border-radius: 50%; overflow: hidden; background: #6E5A3E; }
.neu__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 60%; transform: scale(1.12); }
.neu__siegel {
  position: absolute; z-index: 2; width: calc(13 * var(--u)); height: calc(13 * var(--u));
  left: 58%; bottom: calc(18 * var(--u));
  color: var(--s-tinte); border-radius: 50%; background: var(--s-messing);
}
.neu__siegel text { font: 500 8.6px "Seidel Mono", monospace; letter-spacing: 1.6px; fill: currentColor; }
.neu__siegel .neu__siegel-mitte { font: 600 15px "Seidel Fraunces", serif; letter-spacing: 0; }
.neu__siegel-dreh { transform-origin: 50px 50px; animation: neu-drehen 24s linear infinite; }
@keyframes neu-drehen { to { transform: rotate(360deg); } }
.neu__karte { grid-column: 1 / -1; grid-row: 3; background: var(--s-gruen); color: var(--s-papier); padding: calc(2.2 * var(--u)) calc(4 * var(--u)) calc(2.6 * var(--u)); }
.neu__karte-kopf { display: flex; justify-content: space-between; gap: calc(2 * var(--u)); font: 500 calc(1.35 * var(--u))/1.4 "Seidel Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--s-messing); padding-bottom: calc(1.2 * var(--u)); border-bottom: 1px solid color-mix(in oklab, var(--s-papier) 30%, transparent); }
.neu__karte ul { list-style: none; padding: 0; margin: calc(1.4 * var(--u)) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(3 * var(--u)); }
.neu__karte li { display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); }
.neu__karte li span { font-weight: 600; font-size: calc(2.05 * var(--u)); line-height: 1.3; }
.neu__karte li b { font: italic 400 calc(1.9 * var(--u))/1 "Seidel Fraunces", serif; color: var(--s-messing); }
.neu__karte li b::after { content: " €"; }

/* Fassung Arztpraxen: dieselbe Bauart, eigene Farben (kühles Papier, Petrol, Ocker) und Hinweise statt Preisen */
.neu--praxis { --s-papier: #F1F0EA; --s-tinte: #1D2B2E; --s-gruen: #25504D; --s-messing: #E8C27A; --s-linie: #C9CFC8; } /* Ocker auf Petrol 5,3:1 */
.neu--praxis .neu__karte li span { line-height: 1.35; }
.neu--praxis .neu__karte li b { font-size: calc(1.75 * var(--u)); line-height: 1.4; }
.neu--praxis .neu__titel { font-size: calc(6.1 * var(--u)); }
.neu--praxis .neu__karte li b::after { content: none; }
.neu--praxis .neu__siegel .neu__siegel-mitte { font-size: 12px; }
.alt--praxis .alt__galerie span { background-image: url("assets/p-wartebereich.webp"); }

/* Handy: die neue Seite ist fürs Handy gebaut, nicht nur verkleinert. */
@container (max-width: 33.99rem) {
  .neu { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  .neu__kopf { padding: 3.6cqw 5cqw; gap: 3cqw; }
  .neu__marke { font-size: 6.4cqw; gap: 2cqw; }
  .neu__marke i { width: 2.4cqw; height: 2.4cqw; }
  .neu__nav { display: none; }
  .neu__pille { margin-left: auto; font-size: 3.4cqw; padding: 1.6cqw 3.6cqw; }
  .neu__bild { grid-column: 1; grid-row: 2; margin: 0 5cqw; height: 27cqw; border-radius: 99px; }
  .neu__siegel { width: 19cqw; height: 19cqw; left: auto; right: 2cqw; bottom: auto; top: 26cqw; }
  .neu__buehne { grid-row: 3; align-self: center; padding: 3cqw 5cqw; }
  .neu__kicker, .neu__knoepfe { display: none; }
  .neu__titel { font-size: 8.8cqw; max-width: 8.6em; }
  .neu__unter { font-size: 3.8cqw; margin-top: 2cqw; }
  .neu__karte { grid-row: 4; padding: 3.6cqw 5cqw 4.4cqw; }
  .neu__karte-kopf { font-size: 2.5cqw; padding-bottom: 2cqw; }
  .neu__karte-kopf span + span { display: none; }
  .neu__karte ul { grid-template-columns: 1fr; gap: 1.6cqw; margin-top: 2.4cqw; }
  .neu__karte li { flex-direction: row; justify-content: space-between; gap: 3cqw; }
  .neu__karte li:nth-child(3) { display: none; }
  .neu__karte li span { font-size: 3.7cqw; }
  .neu__karte li b { font-size: 3.7cqw; white-space: nowrap; }
}

@container (max-width: 33.99rem) {
  .neu--praxis .neu__karte li { flex-direction: column; gap: 0.4cqw; }
  .neu--praxis .neu__titel { font-size: 8.2cqw; }
  .neu--praxis .neu__bild { height: 23cqw; }
  .neu--praxis .neu__siegel { top: 22cqw; }
  .neu--praxis .neu__karte li:first-child { display: none; } /* auf dem Handy nur der Urlaub mit Vertretung */
  .neu--praxis .neu__karte li b { font-size: 3.4cqw; white-space: normal; }
  .neu--praxis .neu__siegel .neu__siegel-mitte { font-size: 11px; }
}

/* Alte Beispielseite: 760 px breit, wird per Skript auf die Fensterbreite skaliert */
.alt {
  position: absolute; inset: 0; z-index: 2;
  background: #BDBDBD repeating-linear-gradient(45deg, #C4C4C4 0 6px, #BABABA 6px 12px);
  clip-path: inset(var(--schnitt, 0%) 0 0 0);
}
.alt__blatt {
  width: 760px; margin: 0 auto; transform-origin: top left;
  background: #FFFFF0; color: #000080;
  font: 11px/1.35 Verdana, Geneva, Tahoma, sans-serif;
  border: 3px outset #DDD;
  position: absolute; left: 0; top: 0;
  transform: scale(var(--alt-s, 1));
}
.alt__lauf { background: #000080; color: #FFFF00; font-weight: bold; padding: 4px 0; overflow: hidden; white-space: nowrap; }
.alt__lauf span { display: inline-block; padding-left: 100%; animation: lauf 16s linear infinite; }
@keyframes lauf { to { transform: translateX(-100%); } }
.alt__kopf { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: linear-gradient(#FFF6C8, #F2D580); border-bottom: 2px ridge #C9A63F; }
.alt__name { font: bold 34px/1 "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive; color: #8B0000; text-shadow: 2px 2px 0 #FFD700; }
.alt__zaehler { font-size: 10px; color: #000; background: #FFF; padding: 3px 6px; border: 1px solid #888; }
.alt__zaehler b { display: inline-block; background: #000; color: #0F0; font: bold 12px/1 "Courier New", monospace; padding: 2px 3px; margin-left: 1px; }
.alt__raster { display: grid; grid-template-columns: 130px 1fr; }
.alt__menue { list-style: none; padding: 8px; margin: 0; background: #E8E0C8; border-right: 2px groove #CCC; }
.alt__menue li { margin-bottom: 5px; padding: 4px 6px; background: linear-gradient(#FFF, #CCC); border: 2px outset #EEE; color: #000080; font-weight: bold; text-decoration: underline; }
.alt__inhalt { padding: 10px 14px 14px; display: grid; gap: 10px; }
.alt__aufbau { background: #222; color: #FFF; padding: 6px 10px; font-weight: bold; border: 6px solid #FFD700; border-image: repeating-linear-gradient(-45deg, #FFD700 0 8px, #222 8px 16px) 6; }
.alt__aufbau b { color: #FF0; }
.alt__zeile { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: start; }
.alt__zeile img { width: 120px; height: 90px; object-fit: cover; border: 2px solid #000080; filter: saturate(0.55) contrast(0.85) blur(0.6px); }
.alt__urlaub { color: #C00000; font-weight: bold; font-size: 13px; }
.alt__ie { font-size: 9px; color: #666; border: 1px dashed #999; padding: 3px 6px; }
.alt__gaeste { background: #FFC0CB; padding: 5px 8px; color: #800080; font-weight: bold; }
.alt__fuss { font-size: 9px; color: #666; border-top: 1px solid #CCC; padding-top: 6px; }
.alt [data-ballast] { position: relative; transform-origin: center; will-change: transform, opacity; }
.alt [data-ballast].wird-geschoren { outline: 3px dashed var(--terra); outline-offset: 3px; }

.scherkante {
  position: absolute; left: 0; right: 0; top: var(--schnitt, 0%); z-index: 3;
  height: 1.4rem; margin-top: -0.2rem;
  background:
    radial-gradient(circle at 0.7rem 0.2rem, var(--creme) 0.62rem, transparent 0.66rem) 0 0 / 1.4rem 1.4rem repeat-x;
  filter: drop-shadow(0 3px 2px rgb(60 30 15 / 0.25));
  border-top: 3px solid var(--terra);
  opacity: 0; pointer-events: none;
}
.scherkante.ist-aktiv { opacity: 1; }

.schur__hinweis { font-size: 0.95rem; color: var(--braun); }
.korb {
  position: relative; height: 3.4rem;
  border-radius: 999px; background: color-mix(in oklab, var(--braun) 12%, var(--sand));
  box-shadow: inset 0 2px 6px rgb(60 30 15 / 0.18);
}
.korb__schild { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 0.95rem; }
.locke { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.locke svg { display: block; width: 100%; height: 100%; fill: var(--creme); stroke: color-mix(in oklab, var(--braun) 45%, var(--sand)); stroke-width: 10; overflow: visible; }

/* 4 · Baukasten */
.kapitel--baukasten {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  grid-template-areas: "text foto" "tabelle foto";
  gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: start;
}
.kapitel--baukasten .kapitel__text { grid-area: text; }
.kapitel--baukasten .kapitel__foto { grid-area: foto; align-self: center; }
.vergleich { grid-area: tabelle; width: 100%; border-collapse: collapse; font-size: 1.1rem; line-height: 1.4; }
.vergleich th {
  text-align: left; padding: 0 1rem 0.8rem 0;
  font: 400 1.4rem/1.2 var(--display);
  border-bottom: 2px solid var(--braun);
}
.vergleich th:first-child { color: var(--braun-weich); }
.vergleich td { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; width: 50%; }
.vergleich td:first-child { color: var(--braun-weich); }
.vergleich td:last-child { font-weight: 700; }
.vergleich td:last-child span { display: inline-block; padding-left: 1.7rem; position: relative; }
.vergleich td:last-child span::before {
  content: ""; position: absolute; left: 0; top: 0.1rem; width: 1.2rem; height: 1.2rem;
  background: url("assets/cordeiro.svg") center / contain no-repeat;
}

/* 5 · Technik */
.kapitel--technik { background: var(--gruen); color: var(--creme); padding: 0; }
.technik {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding: calc(var(--kopf-h) + 1rem) var(--rand) 2.5rem calc(var(--zettel) + var(--rand));
}
.technik__foto { height: min(76svh, 46rem); }
.technik__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.5); }
.kapitel--technik .frage { font-size: clamp(1.8rem, 1.3rem + 1.7vw, 3rem); }
.haken { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: 1rem; max-width: 44ch; }
.haken li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.9rem; align-items: start; font-size: 1.1rem; line-height: 1.45; }
.haken strong { font-weight: 700; }
.haken p { color: var(--gruen-hell); }
.haken strong { color: var(--creme); }
.haken__marke {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 2px dashed var(--gruen-hell);
  position: relative;
}
.haken__marke::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: url("assets/cordeiro.svg") center / 100% no-repeat;
  opacity: 0; transform: scale(1.6) rotate(-25deg);
  transition: opacity 220ms ease-out, transform 360ms cubic-bezier(0.3, 1.5, 0.5, 1);
}
.haken li.ist-gestempelt .haken__marke { border-color: transparent; }
.haken li.ist-gestempelt .haken__marke::after { opacity: 1; transform: none; }
.kapitel--technik :focus-visible, .kapitel--schluss :focus-visible { outline-color: var(--creme); }

/* 6 · Selbst ändern */
.kapitel--selbst {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  grid-template-areas: "text handy" "form handy";
  gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start;
}
.kapitel--selbst .kapitel__text { grid-area: text; }
.vf-hinweis { margin-top: 1.25rem; font-size: 0.95rem; color: var(--braun-weich); max-width: 46ch; }
.vf-eingabe {
  grid-area: form; display: grid; gap: 0.75rem; max-width: 34rem;
  padding: 1.5rem; border-radius: var(--radius);
  background: #FFFDF8; border: 1px solid var(--linie); box-shadow: var(--schatten);
}
.vf-titel { font: 400 1.4rem/1.2 var(--display); }
.vf-eingabe label { font-weight: 700; }
.vf-eingabe textarea {
  width: 100%; resize: vertical; min-height: 5.5rem;
  padding: 0.75rem 0.9rem; border-radius: 0.7rem;
  border: 2px solid var(--braun-weich); background: var(--creme); color: var(--braun);
  font: 400 1.1rem/1.45 var(--text);
}
.vf-vorschlaege { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vf-vorschlag {
  min-height: 2.75rem; padding: 0.5rem 0.9rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--braun-weich); background: transparent; color: var(--braun);
  font: 600 0.95rem/1.2 var(--text);
}
.vf-vorschlag:hover { background: var(--sand); }
.vf-eingabe .knopf { justify-self: start; }

.vf-handy {
  grid-area: handy; justify-self: center;
  width: 100%; max-width: 20rem;
  border-radius: 2.4rem; padding: 0.7rem;
  background: var(--braun);
  box-shadow: var(--schatten);
}
.vf-seite {
  border-radius: 1.8rem; overflow: hidden;
  background: #FBF8F1; color: #23301F;
  min-height: 33rem; position: relative;
}
.vf-seite__kopf { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.1rem 0.8rem; font: 800 1.05rem/1 var(--text); color: #2F4A22; }
.vf-seite__menue { display: grid; gap: 4px; }
.vf-seite__menue i { display: block; width: 1.2rem; height: 2px; background: #2F4A22; }
.vf-seite img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vf-seite__hinweis {
  margin: 0.9rem 0.9rem 0; padding: 0.75rem 0.85rem; border-radius: 0.7rem;
  background: #F6E3B4; color: #3A2A08; font-size: 0.95rem; line-height: 1.4;
  animation: auftauchen 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vf-seite__hinweis.ist-ferien { background: #F3D2C2; color: #4A1C0C; }
.vf-seite__art { display: block; font-weight: 800; font-size: 0.8rem; margin-bottom: 0.15rem; }
.vf-seite__titel { padding: 0.9rem 1.1rem 0.6rem; font: 800 1.35rem/1.3 var(--text); }
.vf-seite__zeiten { padding: 0 1.1rem 1.2rem; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.vf-seite__zeiten div { display: flex; justify-content: space-between; border-bottom: 1px solid #E2DCCD; padding-bottom: 0.3rem; }
.vf-seite__zeiten dt { font-weight: 700; }
.vf-seite__sa.ist-neu { background: #F6E3B4; border-radius: 0.3rem; padding: 0 0.3rem; }
.vf-freigabe {
  position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.6rem 0.6rem 0.6rem 0.9rem; border-radius: 1.2rem;
  background: var(--braun); color: var(--creme); font-size: 0.875rem; line-height: 1.3;
  animation: auftauchen 360ms ease-out;
}
.vf-freigabe.ist-frei { background: var(--gruen); }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* 7 · Kosten */
.kapitel--kosten {
  background: var(--sand);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.kapitel--kosten a { color: var(--terra-text-sand); }
.preisschild-halter { justify-self: start; width: min(100%, 27rem); padding: 1.5rem 0.5rem; }
.preisschild {
  position: relative;
  width: min(100%, 27rem);
  padding: 2.4rem 2.2rem 2rem 3.6rem;
  background: var(--creme);
  clip-path: polygon(2.2rem 0, 100% 0, 100% 100%, 2.2rem 100%, 0 calc(100% - 2.2rem), 0 2.2rem);
  filter: drop-shadow(0 1.2rem 1.4rem rgb(60 30 15 / 0.28));
  rotate: -2deg;
}
.preisschild__loch {
  position: absolute; left: 1.15rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -0.55rem;
  border-radius: 50%; background: var(--sand); box-shadow: inset 0 2px 3px rgb(60 30 15 / 0.35);
}
.preisschild__preis { font: 400 1.35rem/1.1 var(--display); }
.preisschild__zahl { display: block; font-variant-numeric: lining-nums; font-size: clamp(3.6rem, 3rem + 2.5vw, 5rem); line-height: 1; letter-spacing: -0.02em; color: var(--gruen); }
.preisschild__einmal { margin-top: 0.5rem; font-weight: 700; }
.preisschild__liste { list-style: none; padding: 1rem 0 0; margin-top: 1rem; border-top: 2px dashed var(--linie); display: grid; gap: 0.4rem; }
.preisschild__liste li { padding-left: 1.6rem; position: relative; }
.preisschild__liste li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.45rem; width: 0.8rem; height: 0.45rem;
  border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg);
}
.preisschild__klein { margin-top: 1.1rem; font-size: 0.9rem; line-height: 1.45; color: var(--braun-weich); }

/* 8 · Schluss */
.kapitel--schluss {
  background: var(--gruen); color: var(--creme);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "text karte" "foto karte" "fuss fuss";
  gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start;
  padding-bottom: 2rem;
}
.kapitel--schluss .kapitel__text { grid-area: text; }
.kapitel--schluss a { color: var(--creme); }
.schluss__foto { grid-area: foto; }
.schluss__foto img { border-radius: var(--radius); width: 100%; max-height: 34rem; object-fit: cover; object-position: 50% 22%; box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.55); }

.antwortkarte {
  grid-area: karte; position: relative;
  background: var(--creme); color: var(--braun);
  border-radius: 0.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 2rem 3.5rem -2rem rgb(0 0 0 / 0.6);
  display: grid; gap: 1.1rem;
  rotate: 1deg;
}
.antwortkarte a { color: var(--terra-text); }
.antwortkarte__kopf { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 2px solid var(--braun); }
.antwortkarte__an { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.15 var(--display); }
.antwortkarte__marke {
  width: 4.4rem; height: 4.4rem; padding: 0.35rem; background: var(--sand);
  -webkit-mask: radial-gradient(circle at 0.3rem 0.3rem, transparent 0.18rem, #000 0.2rem) -0.3rem -0.3rem / 0.6rem 0.6rem;
          mask: radial-gradient(circle at 0.3rem 0.3rem, transparent 0.18rem, #000 0.2rem) -0.3rem -0.3rem / 0.6rem 0.6rem;
  rotate: 4deg;
}
.feld { display: grid; gap: 0.3rem; }
.feld label { font-weight: 700; font-size: 1rem; }
.feld label span { font-weight: 400; color: var(--braun-weich); }
.antwortkarte input[type="email"], .antwortkarte input[type="text"] {
  border-width: 0 0 2px; border-radius: 0; background: transparent; padding-left: 0.1rem;
}
.antwortkarte .knopf { justify-self: start; }
.antwortkarte input[type="email"], .antwortkarte input[type="text"] { min-height: 2.6rem; padding-block: 0.35rem; }
.kopf__knopf { transition: opacity 200ms; }
body.im-schluss .kopf__knopf { opacity: 0; pointer-events: none; }
.stempel {
  position: absolute; right: 1.5rem; bottom: 1.5rem;
  display: grid; place-content: center; text-align: center;
  width: 9rem; height: 9rem; border-radius: 50%;
  border: 4px solid var(--gruen); color: var(--gruen);
  font: 400 1.3rem/1.15 var(--display);
  rotate: -14deg;
  opacity: 0; transform: scale(1.8);
  pointer-events: none;
}
.stempel__datum { font: 700 0.9rem/1.2 var(--text); margin-top: 0.2rem; }
.antwortkarte.ist-angekommen .stempel { opacity: 0.92; transform: none; transition: opacity 200ms ease-out, transform 380ms cubic-bezier(0.3, 1.6, 0.5, 1); }

.fuss {
  grid-area: fuss;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in oklab, var(--creme) 30%, transparent);
  font-size: 0.95rem;
}
.fuss__marke { display: inline-flex; align-items: center; gap: 0.6rem; font: 400 1.3rem/1 var(--display); }
.fuss__links { list-style: none; padding: 0; display: flex; gap: 1.5rem; }
.fuss__links a { display: inline-block; padding: 0.4rem 0; }
.fuss__klein { flex-basis: 100%; color: var(--gruen-hell); max-width: 70ch; }

/* ----------------------------------------------------------- Tablet -- */
@media (max-width: 1099px) {
  .schur { grid-template-columns: 1fr; align-content: center; gap: 1rem; }
  .schur__text .antwort { display: none; }
  .schur__liste { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.6rem; }
  .schur__bleibt { margin-top: 0.6rem; }
  .browser { height: min(50svh, 34rem); }
}

/* ------------------------------------------------------------- Handy -- */
@media (max-width: 760px) {
  :root { --kopf-h: 4rem; }
  body { font-size: 1.0625rem; }
  .kopf { background: color-mix(in oklab, var(--creme) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); gap: 0.5rem; }
  .kopf__marke { background: none; padding: 0; font-size: 1.3rem; backdrop-filter: none; }
  .kopf__marke img { width: 2.3rem; height: 2.3rem; }
  .kopf__fragen summary { padding: 0.5rem 0.75rem; }
  .kopf .knopf--klein { padding: 0.6rem 0.9rem; }

  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: calc(var(--kopf-h) + 1.5rem);
    min-height: 0;
  }
  .hero__text { display: contents; }
  .hero__titel { order: 1; font-size: clamp(2.2rem, 9.4vw, 2.9rem); margin-bottom: 1rem; }
  .hero__lead { order: 2; margin-bottom: 1.6rem; }
  .hero__buehne { order: 3; margin: 0.5rem 0.4rem 2.6rem; }
  .eintrag--kurz { order: 4; }
  .eintrag__zeile { flex-direction: column; }
  .eintrag__zeile .knopf { width: 100%; }
  .film__fenster { aspect-ratio: 4 / 5; }
  .spielt .film__fenster { aspect-ratio: 16 / 9; }
  .ebene--stempel { right: -0.6rem; top: -1.6rem; }
  .stempel-rund { width: 6rem; height: 6rem; font-size: 0.9rem; }
  .stempel-rund span:first-child { font-size: 1.2rem; }
  .film__status { max-width: none; }
  .ebene--wolle { width: 92%; right: -18%; top: -10%; }

  .kapitel { padding: 4.5rem var(--rand); }
  .frage { font-size: clamp(1.75rem, 7.4vw, 2.2rem); text-indent: 0; }
  .unterfrage { text-indent: 0; }
  .kapitel--merkt, .kapitel--baukasten, .kapitel--kosten, .kapitel--schluss, .kapitel--selbst { grid-template-columns: 1fr; }
  .kapitel--merkt { gap: 2rem; }
  .kapitel--merkt .kapitel__foto { order: 2; }
  .kapitel--baukasten { grid-template-areas: "text" "foto" "tabelle"; }
  .kapitel--baukasten .kapitel__foto img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 18%; }
  .vergleich { font-size: 1rem; }
  .vergleich td { padding-right: 0.6rem; }

  .kapitel--schur { padding: 0; }
  .schur { padding: calc(var(--kopf-h) + 0.6rem) var(--rand) 1rem; gap: 0.6rem; }
  .kapitel--schur .frage { font-size: 1.6rem; margin-bottom: 0.4rem; }
  .schur__liste { gap: 0.15rem 0.9rem; }
  .schur__liste li { font-size: 0.875rem; padding-left: 1.3rem; }
  .schur__liste li::before { width: 0.8rem; height: 0.8rem; top: 0.25rem; }
  .schur__bleibt { font-size: 0.9rem; margin-top: 0.4rem; }
  .browser { height: 50svh; }
  .browser__adresse { font-size: 0.8rem; }
  .korb { height: 2.8rem; }
  .schur__hinweis { font-size: 0.875rem; }

  .kapitel--technik { padding: 0; }
  .technik { grid-template-columns: 1fr; padding: calc(var(--kopf-h) + 1rem) var(--rand) 1.5rem; gap: 1.2rem; align-content: center; }
  .technik__foto { display: none; }
  .kapitel--technik .frage { font-size: 1.7rem; }
  .haken { gap: 0.7rem; margin-top: 1rem; }
  .haken li { font-size: 1rem; grid-template-columns: 2rem 1fr; gap: 0.7rem; }
  .haken__marke { width: 2rem; height: 2rem; }

  .kapitel--selbst { grid-template-areas: "text" "form" "handy"; }
  .vf-eingabe { padding: 1.1rem; }

  .preisschild { padding: 2rem 1.5rem 1.6rem 3rem; }
  .kapitel--schluss { grid-template-areas: "text" "karte" "foto" "fuss"; }
  .antwortkarte { rotate: 0deg; }
  .stempel { width: 7rem; height: 7rem; font-size: 1.05rem; right: 1rem; bottom: 5.5rem; }
}

@media (max-width: 380px) {
  .kopf__knopf { padding-inline: 0.85rem; }
  .kopf__marke span { font-size: 1.15rem; }
}

/* -------------------------------------------- Reduzierte Bewegung -- */
@media (prefers-reduced-motion: reduce) {
  .ebene, .film, .film__bild, .ebene--wolle, .ebene--stempel { transform: none !important; }
  .alt__lauf span { animation: none; padding-left: 0; }
  .knopf, .zettel__lamm, .haken__marke::after, .schur__liste li span { transition: none; }
  .vf-seite__hinweis, .vf-freigabe, .neu__siegel-dreh { animation: none; }
}

/* Mehr altes Zeug, damit die alte Seite das Fenster füllt wie damals */
.alt__galerie { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.alt__galerie span { width: 64px; height: 48px; border: 2px solid #000080; background: url("assets/schur-braten.webp") center / cover; filter: saturate(0.5) blur(0.5px); }
.alt__galerie span:nth-child(3) { background-position: 20% 30%; }
.alt__galerie span:nth-child(4) { background-position: 80% 70%; }
.alt__galerie span:nth-child(5) { background-position: 50% 10%; }
.alt__links { color: #000080; }

/* Der Stempel bekommt seinen eigenen Platz neben der Meldung */
.antwortkarte .eintrag__meldung { padding-right: 10rem; }
@media (max-width: 760px) {
  .antwortkarte .eintrag__meldung { padding-right: 0; padding-bottom: 7.5rem; }
  .stempel { bottom: 1.25rem; }
}

/* Sehr schmale Handys: Wortmarke kleiner, damit „Fragen“ und „Eintragen“ daneben passen */
@media (max-width: 400px) {
  .kopf { gap: 0.4rem; }
  .kopf__marke { font-size: 1.15rem; gap: 0.4rem; }
  .kopf__marke img { width: 2.1rem; height: 2.1rem; }
  .kopf__fragen summary { padding: 0.5rem 0.65rem; gap: 0.35rem; }
  .kopf .knopf--klein { padding: 0.6rem 0.75rem; }
}
@media (max-width: 340px) {
  .kopf__marke span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}