/* Olive Video – Website. Oben die Kamerafahrt über die ganze Höhe, der Kopf liegt durchsichtig darüber.
   Darunter helle, ruhige Abschnitte wie ein gutes Exposé: viel Weiß, warme helle Flächen, große Bilder,
   Haarlinien statt Kästen, eine Akzentfarbe (Olive). Bewusst nur hell. Alles kommt vom eigenen Server
   (keine fremden Schriften, kein Tracking). */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --weiss: #ffffff;        /* Seite */
  --stein: #f5f4ef;        /* zweite Fläche: warmes Leinen */
  --tinte: #16181b;        /* Text, Knöpfe */
  --tinte-2: #4b5056;      /* Fließtext */
  --grau: #7b8188;         /* Beschriftungen */
  --linie: #e7e5dd;        /* Haarlinien */
  --linie-dunkel: rgba(22, 24, 27, 0.16);
  --akzent: #6f7c3c;       /* Akzent: Olive */
  --akzent-text: #55602b;  /* Olive als Schrift auf Weiß */
  --akzent-hell: #d6deb0;  /* helles Olive auf dem Video */
  --blatt: #8a9a4a;        /* Blatt im Logo */
  --nacht: #0e1012;        /* nur hinter Videos */
  --schatten: 0 34px 70px -36px rgba(22, 24, 27, 0.38), 0 12px 24px -18px rgba(22, 24, 27, 0.14);
  --schatten-weich: 0 20px 44px -28px rgba(22, 24, 27, 0.3), 0 2px 6px rgba(22, 24, 27, 0.04);
  --rund: 14px;
  --sanft: cubic-bezier(0.2, 0.7, 0.2, 1);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --breite: 76rem;
  --rand: clamp(1rem, 4vw, 2.5rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font: 400 1.0625rem/1.65 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--akzent); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
::selection { background: var(--akzent-hell); color: var(--tinte); }
p { margin: 0 0 1em; }
.wrap { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sr:focus { position: fixed; left: 1rem; top: calc(1rem + env(safe-area-inset-top, 0px)); width: auto; height: auto; clip-path: none; white-space: normal; z-index: 50; background: var(--tinte); color: var(--weiss); padding: 0.6rem 0.9rem; border-radius: 4px; }
.ganz { white-space: nowrap; }

/* ---------- Schrift ---------- */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 420;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 6vw, 5.4rem); line-height: 0.99; margin: 0.8rem 0 1.2rem; }
h2 { font-size: clamp(2.1rem, 3.9vw, 3.4rem); line-height: 1.04; margin: 0.7rem 0 1.1rem; }
h3 { font-size: 1.1rem; font-weight: 650; line-height: 1.35; margin: 0 0 0.4rem; text-wrap: balance; }
.dachzeile {
  font: 650 0.72rem/1.2 var(--font-text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akzent-text);
  margin: 0;
}
.abschnitt-kopf .dachzeile, .muster-kopf .dachzeile, .muster-feature-text .dachzeile, .angebot-text .dachzeile, .preis-text .dachzeile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.abschnitt-kopf .dachzeile::before, .muster-kopf .dachzeile::before, .muster-feature-text .dachzeile::before, .angebot-text .dachzeile::before,
.preis-text .dachzeile::before {
  content: "";
  width: 1.9rem;
  height: 1.5px;
  background: var(--akzent);
  flex: none;
}
.lead { font-size: 1.18rem; line-height: 1.6; color: var(--tinte-2); max-width: 36rem; }
.klein { font-size: 0.9rem; color: var(--grau); }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--linie);
  transition: background-color 0.35s, border-color 0.35s, -webkit-backdrop-filter 0.35s, backdrop-filter 0.35s;
}
.kopf .wrap { display: flex; align-items: center; gap: 2rem; min-height: 4.6rem; }
.marke { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.marke .logo { display: block; height: 2.1rem; width: auto; overflow: visible; }
.logo-olive { fill: var(--akzent); }
.logo-blatt { fill: var(--blatt); }
.logo-schrift { fill: var(--tinte); }
.logo path { transition: fill 0.35s; }
.nav { display: flex; gap: 1.9rem; margin-left: auto; font-size: 0.93rem; }
.nav a { position: relative; text-decoration: none; color: var(--tinte-2); transition: color 0.2s; white-space: nowrap; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--sanft);
}
.nav a:hover { color: var(--tinte); }
.nav a:hover::after { transform: scaleX(1); }
.kopf .knopf { padding: 0.72rem 1.15rem; font-size: 0.9rem; }
/* Sprachwahl DE | EN: jede führt auf dieselbe Seite in der anderen Sprache */
.sprachen { display: inline-flex; align-items: center; font: 650 0.76rem/1 var(--font-text); letter-spacing: 0.1em; flex: none; }
.sprachen a { padding: 0.5rem 0.55rem; text-decoration: none; color: var(--grau); transition: color 0.2s; }
.sprachen a + a { border-left: 1px solid var(--linie-dunkel); }
.sprachen a:hover, .sprachen a[aria-current="true"] { color: var(--tinte); }
.kopf.ueber-video:not(.fest) .sprachen a { color: rgba(255, 255, 255, 0.68); }
.kopf.ueber-video:not(.fest) .sprachen a:hover, .kopf.ueber-video:not(.fest) .sprachen a[aria-current="true"] { color: var(--weiss); }
.kopf.ueber-video:not(.fest) .sprachen a + a { border-left-color: rgba(255, 255, 255, 0.35); }
@media (max-width: 75rem) { .kopf .wrap { gap: 1.4rem; } .nav { gap: 1.3rem; } }
@media (max-width: 66rem) {
  .nav { display: none; }
  .sprachen { margin-left: auto; }
}
.knopf-kurz { display: none; }
.kopf .knopf { white-space: nowrap; }
@media (max-width: 30rem) {
  .kopf .wrap { gap: 0.7rem; min-height: 4rem; }
  .marke .logo { height: 1.6rem; }
  .kopf .knopf { padding: 0.6rem 0.95rem; font-size: 0.82rem; }
  .kopf .knopf-lang { display: none; }
  .kopf .knopf-kurz { display: inline; }
  /* Klein: nur die andere Sprache zeigen */
  .sprachen a[aria-current="true"] { display: none; }
  .sprachen a + a { border-left: 0; }
}

/* Über dem Video: durchsichtig mit weißem Logo. Ohne JavaScript scrollt der Kopf mit dem Video weg
   (absolute); mit JavaScript bleibt er stehen und bekommt beim Scrollen den weißen Grund (.fest). */
.kopf.ueber-video {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.kopf.ueber-video.lebt { position: fixed; }
.kopf.ueber-video:not(.fest) .logo-olive, .kopf.ueber-video:not(.fest) .logo-schrift { fill: var(--weiss); }
.kopf.ueber-video:not(.fest) .logo-blatt { fill: var(--akzent-hell); }
.kopf.ueber-video:not(.fest) .nav a { color: rgba(255, 255, 255, 0.9); }
.kopf.ueber-video:not(.fest) .nav a:hover { color: var(--weiss); }
.kopf.ueber-video:not(.fest) .knopf { background: var(--weiss); border-color: var(--weiss); color: var(--tinte); }
.kopf.ueber-video:not(.fest) .knopf:hover { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); }
.kopf.ueber-video.fest {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--linie);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font: 650 1rem/1.1 var(--font-text);
  padding: 1rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid var(--tinte);
  background: var(--tinte);
  color: var(--weiss);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--sanft);
}
.knopf:hover { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); }
.knopf:active { transform: translateY(1px); }
.knopf.zweit { background: transparent; color: var(--tinte); }
.knopf.zweit:hover { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
.knopf-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 2rem; }

/* ---------- Held: Kamerafahrt über die ganze Höhe ---------- */
.held {
  position: relative;
  min-height: 100vh;
  min-height: max(36rem, min(100svh, 64rem));
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--stein);
}
.held-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.held-schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(14, 16, 18, 0.45) 0%, rgba(14, 16, 18, 0) 24%),
    linear-gradient(to top, rgba(14, 16, 18, 0.72) 0%, rgba(14, 16, 18, 0.26) 42%, rgba(14, 16, 18, 0) 68%),
    linear-gradient(to right, rgba(14, 16, 18, 0.38) 0%, rgba(14, 16, 18, 0) 58%);
}
.held-inhalt { position: relative; padding-block: 8rem clamp(3rem, 8vw, 6rem); color: var(--weiss); width: 100%; }
.held-inhalt h1 { max-width: 17ch; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.22); }
.held-inhalt .lead { color: rgba(255, 255, 255, 0.92); max-width: 33rem; }
.held-inhalt .dachzeile { color: rgba(255, 255, 255, 0.88); display: flex; align-items: center; gap: 0.8rem; }
.held-inhalt .dachzeile::before { content: ""; width: 1.9rem; height: 1.5px; background: var(--akzent-hell); }
.held-inhalt .knopf { background: var(--weiss); border-color: var(--weiss); color: var(--tinte); }
.held-inhalt .knopf:hover { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); }
.held-inhalt .knopf.zweit { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.7); color: var(--weiss); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.held-inhalt .knopf.zweit:hover { background: var(--weiss); border-color: var(--weiss); color: var(--tinte); }
.held-marke {
  position: absolute;
  right: calc(max(0px, (100% - var(--breite)) / 2) + var(--rand));
  bottom: clamp(3rem, 8vw, 6rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font: 650 0.68rem/1 var(--font-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.held-marke::before { content: ""; width: 1.6rem; height: 1px; background: rgba(255, 255, 255, 0.7); }
@media (max-width: 64rem) { .held-marke { display: none; } }
/* Ohne freigegebenes Video: heller Kopf, dunkle Schrift */
.held.ohne-video { min-height: 0; }
.held.ohne-video .held-inhalt { color: var(--tinte); padding-block: clamp(3.5rem, 9vw, 7rem); }
.held.ohne-video .held-inhalt .lead { color: var(--tinte-2); }
.held.ohne-video .held-inhalt .dachzeile { color: var(--akzent-text); }
.held.ohne-video .held-inhalt .dachzeile::before { background: var(--akzent); }
.held.ohne-video .held-inhalt h1 { text-shadow: none; }
.held.ohne-video .held-inhalt .knopf { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
.held.ohne-video .held-inhalt .knopf.zweit { background: transparent; border-color: var(--tinte); color: var(--tinte); }

/* Fakten unter dem Video */
.fakten { border-bottom: 1px solid var(--linie); }
.fakten dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fakten dl > div { padding: 2rem 1.4rem 2.1rem 1.6rem; border-right: 1px solid var(--linie); }
.fakten dl > div:first-child { padding-left: 0; }
.fakten dl > div:last-child { border-right: 0; }
.fakten dt { font: 420 clamp(1.6rem, 2.4vw, 2.1rem)/1.05 var(--font-display); font-variation-settings: "opsz" 144; letter-spacing: -0.015em; color: var(--tinte); }
.fakten dd { margin: 0.45rem 0 0; color: var(--grau); font-size: 0.93rem; }
@media (max-width: 52rem) {
  .fakten dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fakten dl > div { border-right: 0; padding-left: 0; border-bottom: 1px solid var(--linie); }
  .fakten dl > div:nth-child(odd) { border-right: 1px solid var(--linie); }
  .fakten dl > div:nth-child(even) { padding-left: 1.2rem; }
  .fakten dl > div:nth-last-child(-n + 2) { border-bottom: 0; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(5rem, 10vw, 8.5rem); }
.abschnitt.stein { background: var(--stein); }
.abschnitt-kopf { max-width: 46rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.abschnitt-kopf p { color: var(--tinte-2); margin: 0; }
.abschnitt-kopf p.dachzeile { color: var(--akzent-text); }

/* Vorher – Nachher: ein Foto und die Fahrt daraus */
.vergleich {
  --spalt: clamp(1rem, 2.6vw, 2rem);
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spalt);
}
.vergleich figure { margin: 0; display: grid; gap: 0.9rem; min-width: 0; }
.vergleich-bild { position: relative; aspect-ratio: 16 / 9; border-radius: var(--rund); overflow: hidden; background: var(--stein); box-shadow: var(--schatten-weich); }
.vergleich-bild img, .vergleich-bild video { width: 100%; height: 100%; object-fit: cover; }
.vergleich-pfeil {
  position: absolute;
  left: 50%;
  top: 28%;
  top: calc((100cqw - var(--spalt)) * 9 / 64);
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 50%;
  background: var(--weiss);
  box-shadow: 0 14px 34px -12px rgba(22, 24, 27, 0.4);
}
.vergleich-pfeil svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 50rem) {
  .vergleich { grid-template-columns: minmax(0, 1fr); }
  .vergleich-pfeil { display: none; }
}
.chip {
  position: absolute;
  left: 0.9rem;
  top: 0.9rem;
  font: 650 0.68rem/1 var(--font-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--tinte);
}
.chip.gold { background: var(--akzent); color: var(--weiss); }
.vergleich figcaption { color: var(--tinte-2); font-size: 0.96rem; }
.vergleich figcaption b { color: var(--tinte); }
.vergleich-paar + .vergleich-paar { margin-top: clamp(3rem, 7vw, 5rem); }
.vergleich-quelle { margin: clamp(2.2rem, 4vw, 3rem) 0 0; }
.vergleich-titel {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font: 420 clamp(1.45rem, 2.2vw, 1.75rem)/1.2 var(--font-display);
  font-variation-settings: "opsz" 72;
  margin: 0 0 1.2rem;
}

/* Ablauf: eine echte Reihenfolge, deshalb große Ziffern */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 52rem) { .schritte { grid-template-columns: minmax(0, 1fr); } }
.schritt { position: relative; min-width: 0; padding-top: 1.6rem; border-top: 1px solid var(--linie-dunkel); }
.schritt::before { content: ""; position: absolute; left: 0; top: -1px; width: 2.6rem; height: 2px; background: var(--akzent); }
.schritt-nr {
  display: block;
  font: 380 clamp(2.8rem, 4.4vw, 3.8rem)/1 var(--font-display);
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.03em;
  color: var(--akzent);
  margin-bottom: 1.3rem;
}
.schritt h3 { font-size: 1.15rem; }
.schritt p { margin: 0; color: var(--tinte-2); }

/* Was wir können: Haarlinien statt Kästen */
.vorteile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2.4rem clamp(1.6rem, 3vw, 2.6rem); }
.vorteile > div { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--linie-dunkel); }
.vorteile > div::before { content: ""; position: absolute; left: 0; top: -1px; width: 2.6rem; height: 2px; background: var(--akzent); }
.vorteile h3 { font: 450 1.5rem/1.15 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -0.01em; margin-bottom: 0.7rem; }
.vorteile p { margin: 0; color: var(--tinte-2); }

/* Muster: eins groß, mehrere im Raster */
.muster-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4.5vw, 4rem);
  align-items: center;
  color: inherit;
  text-decoration: none;
}
@media (max-width: 56rem) { .muster-feature { grid-template-columns: minmax(0, 1fr); } }
.muster-feature-bild { position: relative; aspect-ratio: 16 / 9; border-radius: var(--rund); overflow: hidden; background: var(--stein); box-shadow: var(--schatten); }
.muster-feature-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--sanft); }
.muster-feature:hover .muster-feature-bild img { transform: scale(1.03); }
.muster-feature-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--tinte);
  transform: translate(-50%, -50%);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s var(--sanft), background-color 0.35s, color 0.35s;
}
.muster-feature-play .film-start-dreieck { width: 1.15rem; height: 1.3rem; margin-left: 0.3rem; }
.muster-feature:hover .muster-feature-play { transform: translate(-50%, -50%) scale(1.07); background: var(--akzent); color: var(--weiss); }
.muster-feature-text h3 {
  font: 420 clamp(1.8rem, 2.8vw, 2.5rem)/1.08 var(--font-display);
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.018em;
  margin: 0.9rem 0 1rem;
}
.muster-feature-text p { color: var(--tinte-2); margin: 0 0 1rem; }
.muster-feature-text p.dachzeile { color: var(--akzent-text); margin: 0; }
.muster-feature-text .knopf { margin-top: 0.8rem; }
.muster-feature:hover .knopf.zweit { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
.muster-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.8rem; }
.muster-karte { display: grid; gap: 1rem; align-content: start; text-decoration: none; }
.muster-karte img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--rund);
  background: var(--stein);
  box-shadow: var(--schatten-weich);
  transition: transform 0.4s var(--sanft);
}
.muster-karte.hoch img { aspect-ratio: 4 / 5; }
.muster-karte:hover img { transform: translateY(-4px); }
.muster-karte .text { display: grid; gap: 0.25rem; }
.muster-karte h3 { font: 450 1.5rem/1.15 var(--font-display); font-variation-settings: "opsz" 72; margin: 0; }
.muster-karte .weiter { font-weight: 650; text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; margin-top: 0.3rem; }

/* Lieferumfang wie ein Datenblatt */
.datenblatt { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 5vw, 5rem); }
@media (max-width: 46rem) { .datenblatt { grid-template-columns: minmax(0, 1fr); } }
.datenblatt > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: 1.3rem 0 1.35rem; border-top: 1px solid var(--linie-dunkel); }
.datenblatt dt { font: 420 1.5rem/1.1 var(--font-display); font-variation-settings: "opsz" 72; color: var(--akzent-text); }
.datenblatt dd { margin: 0; }
.datenblatt dd strong { display: block; margin-bottom: 0.15rem; }
.datenblatt dd span { color: var(--tinte-2); }

/* Vergleich Dreh vor Ort gegen Olive Video */
.tabelle-huelle { overflow-x: auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten-weich); }
table { border-collapse: collapse; width: 100%; min-width: 36rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { padding-block: 1.35rem; font: 650 0.72rem/1.2 var(--font-text); letter-spacing: 0.15em; text-transform: uppercase; color: var(--grau); }
tbody th { font-weight: 650; }
table.gegenueber { min-width: 32rem; }
.gegenueber thead th:last-child { color: var(--akzent-text); background: rgba(111, 124, 60, 0.08); }
.gegenueber tbody th { width: 10rem; color: var(--grau); font-weight: 600; font-size: 0.92rem; }
.gegenueber td { color: var(--tinte-2); }
.gegenueber td.gut { color: var(--tinte); font-weight: 650; background: rgba(111, 124, 60, 0.08); }
.gegenueber td.gut::before {
  content: "";
  display: inline-block;
  width: 0.34rem;
  height: 0.62rem;
  margin: 0 0.75rem 0 0.1rem;
  border: solid var(--akzent);
  border-width: 0 2px 2px 0;
  transform: translateY(-0.12rem) rotate(45deg);
}

/* Preis: klare Aussage links, die Zusagen als Karte rechts */
.preis-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
@media (max-width: 56rem) { .preis-raster { grid-template-columns: minmax(0, 1fr); } }
.preis-text h2 { max-width: 13ch; }
.preis-text .lead { max-width: 30rem; }
.preis-karte { background: var(--stein); border-radius: 26px; padding: clamp(1.8rem, 3.6vw, 3rem); }
.preis-karte .dachzeile { margin-bottom: 1.3rem; }
.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.haken li { position: relative; display: grid; gap: 0.12rem; padding-left: 2.5rem; }
.haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
}
.haken strong { font-weight: 650; line-height: 1.35; }
.haken span { color: var(--tinte-2); font-size: 0.95rem; line-height: 1.45; }
.preis-trenner { height: 1px; background: var(--linie-dunkel); margin: 1.8rem 0 1.4rem; }
.preis-extras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.preis-extras li { font-size: 0.88rem; line-height: 1.2; color: var(--tinte-2); background: var(--weiss); border: 1px solid var(--linie); border-radius: 999px; padding: 0.5rem 0.85rem; }

/* Fragen: Überschrift links, Fragen rechts */
.fragen-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.fragen-raster .abschnitt-kopf { position: sticky; top: 7rem; margin-bottom: 0; }
.fragen-raster .abschnitt-kopf p:last-child { margin-top: 1.2rem; }
@media (max-width: 56rem) {
  .fragen-raster { grid-template-columns: minmax(0, 1fr); }
  .fragen-raster .abschnitt-kopf { position: static; }
}
.fragen { border-top: 1px solid var(--linie-dunkel); }
.fragen details { border-bottom: 1px solid var(--linie-dunkel); }
.fragen summary { cursor: pointer; list-style: none; padding: 1.35rem 3rem 1.35rem 0; font-weight: 620; font-size: 1.04rem; position: relative; transition: color 0.2s; }
.fragen summary:hover { color: var(--akzent-text); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: "+";
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  font: 300 1.8rem/1 var(--font-display);
  color: var(--akzent-text);
  transition: transform 0.3s var(--sanft);
}
.fragen details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fragen .antwort { padding: 0 2rem 1.5rem 0; color: var(--tinte-2); max-width: 44rem; }
.fragen .antwort p:last-child { margin-bottom: 0; }

/* Unser Anspruch + Abschluss: eine ruhige, große Karte mit der einen Bitte */
.abschluss-karte {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 6vw, 6rem);
  align-items: end;
  background: var(--stein);
  border-radius: 30px;
  padding: clamp(2rem, 5.5vw, 4.5rem);
}
@media (max-width: 56rem) { .abschluss-karte { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.abschluss-zeichen { display: block; width: 2.9rem; height: 2.9rem; margin-bottom: 1.4rem; }
.abschluss-text h2 { max-width: 17ch; margin: 0.7rem 0 0.9rem; }
.abschluss-text .lead { margin: 0; max-width: 32rem; }
.abschluss-knoepfe { display: grid; gap: 0.9rem; justify-items: stretch; }
.abschluss-knoepfe .knopf { padding-block: 1.1rem; }
.abschluss-mail {
  justify-self: center;
  font-weight: 600;
  color: var(--tinte-2);
  text-decoration: none;
  border-bottom: 1.5px solid var(--akzent);
  padding-bottom: 0.1rem;
  overflow-wrap: anywhere;
}
.abschluss-mail:hover { color: var(--tinte); }

/* ---------- Muster-Seite ---------- */
.muster-kopf { padding-block: clamp(3rem, 7vw, 5.5rem) 2rem; }
.muster-kopf h1 { font-size: clamp(2.4rem, 4.8vw, 4.1rem); max-width: 22ch; }
.muster-film { padding-bottom: clamp(3rem, 7vw, 5rem); }

/* Der Vorher-Nachher-Film */
.film { margin: 0; max-width: 68rem; }
.film-bild { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 18px; overflow: hidden; background: var(--stein); box-shadow: var(--schatten); }
.film.hoch .film-bild { aspect-ratio: 9 / 16; max-height: 80vh; margin-inline: auto; }
.film video { width: 100%; height: 100%; object-fit: contain; background: var(--nacht); }
.film-oben {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(0.6rem, 1.5vw, 1rem);
  pointer-events: none;
  font: 650 clamp(0.62rem, 1.3vw, 0.74rem)/1 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.film-phase { padding: 0.5rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--tinte); transition: background-color 0.25s, color 0.25s; }
.ist-nachher .film-phase { background: var(--akzent); color: var(--weiss); }
.film-tc { padding: 0.5rem 0.7rem; border-radius: 999px; background: rgba(14, 16, 18, 0.45); color: var(--akzent-hell); font-family: var(--font-mono); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.film-start {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.05rem 1.55rem 1.05rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--weiss);
  color: var(--tinte);
  font: 650 1rem/1 var(--font-text);
  cursor: pointer;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s, transform 0.3s var(--sanft);
}
.film-start:hover { background: var(--akzent); color: var(--weiss); transform: translate(-50%, -50%) scale(1.04); }
.film-start-dreieck { display: block; width: 0.8rem; height: 0.9rem; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.film-start .film-dauer { font: 600 0.84rem/1 var(--font-mono); opacity: 0.6; }
.laeuft .film-start { display: none; }
.film-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding-top: 1rem; font-size: 0.9rem; color: var(--grau); }
.film-leiste button {
  font: 650 0.85rem/1 var(--font-text);
  color: var(--tinte);
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  padding: 0.6rem 1rem;
  cursor: pointer;
}
.film-leiste button:hover, .film-leiste button[aria-current="true"] { border-color: var(--akzent); color: var(--akzent-text); }
.film-quelle { margin-left: auto; min-width: 0; }
.film-leiste .film-quelle:only-child { margin-left: 0; }
@media (max-width: 34rem) { .film-quelle { margin-left: 0; flex-basis: 100%; } }
/* Vor dem Abspielen: das Startbild ist geteilt (links das Exposé-Foto, rechts die Fahrt) */
.film-chip-vorher, .film-chip-nachher {
  position: absolute;
  top: clamp(0.6rem, 1.5vw, 1rem);
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  font: 650 clamp(0.62rem, 1.3vw, 0.72rem)/1 var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
.film-chip-vorher { left: clamp(0.6rem, 1.5vw, 1rem); background: rgba(255, 255, 255, 0.94); color: var(--tinte); }
.film-chip-nachher { left: calc(50% + clamp(0.6rem, 1.5vw, 1rem)); background: var(--akzent); color: var(--weiss); }
.laeuft .film-chip-vorher, .laeuft .film-chip-nachher { display: none; }
.film:not(.laeuft) .film-tc { visibility: hidden; }
/* Fürs Handy: der 4:5-Film (oben das Foto, darunter die Fahrt), sonst der 16:9-Film */
.nur-handy { display: none; }
.film.hochkant { max-width: 30rem; }
.film.hochkant .film-bild { aspect-ratio: 4 / 5; border-radius: 16px; }
.film.hochkant video { object-fit: cover; background: var(--weiss); }
.film.hochkant .film-start { top: 77%; }  /* auf der Fahrt, nicht auf dem Pfeil zwischen den Bildern */
@media (max-width: 43.75rem) {
  .nur-gross { display: none; }
  .nur-handy { display: block; }
}
/* Filme im Kinoformat ohne Balken (z. B. 1920 × 816) */
.film.breit .film-bild { aspect-ratio: 1920 / 816; }
.film.breit video { object-fit: cover; }

.vorher-fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.2rem; max-width: 60rem; margin: 0; padding: 0; list-style: none; }
.vorher-fotos img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: var(--stein); box-shadow: var(--schatten-weich); }
.angebot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 3.5rem;
  align-items: center;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 20px;
  box-shadow: var(--schatten);
  padding: clamp(1.8rem, 4.5vw, 3.2rem);
}
@media (max-width: 46rem) { .angebot { grid-template-columns: minmax(0, 1fr); } }
.angebot h2 { margin: 0 0 0.5rem; }
.angebot p { margin: 0; color: var(--tinte-2); max-width: 36rem; }
.angebot-text { display: grid; gap: 1rem; }
.angebot-text p.dachzeile { color: var(--akzent-text); }
.angebot-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8rem; min-width: 15rem; }
.angebot-liste li { position: relative; padding-left: 1.6rem; font-weight: 600; }
.angebot-liste li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.36em;
  width: 0.34rem;
  height: 0.62rem;
  border: solid var(--akzent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@media (max-width: 46rem) { .angebot-liste { min-width: 0; } }
.muster-hinweis { margin: 1.2rem 0 0; }
.muster-hinweis:empty { display: none; }

/* ---------- Rechtstexte ---------- */
.recht { max-width: 48rem; padding-block: clamp(3rem, 7vw, 5rem); }
.recht h1 { font-size: clamp(2.4rem, 4.6vw, 3.5rem); }
.recht h2 { font: 650 1.2rem/1.35 var(--font-text); margin: 2.3rem 0 0.6rem; letter-spacing: 0; }
.recht p, .recht li { color: var(--tinte-2); }
.recht address { font-style: normal; color: var(--tinte); line-height: 1.7; }
.fehlt { background: var(--akzent-hell); color: var(--tinte); padding: 0 0.3em; font-weight: 650; border-radius: 3px; }
.stand { margin-top: 2.5rem; font-size: 0.9rem; color: var(--grau); }

/* ---------- Fuß ---------- */
.fuss { background: var(--stein); color: var(--tinte-2); font-size: 0.94rem; padding-top: clamp(3.5rem, 7vw, 5rem); border-top: 1px solid var(--linie); }
.fuss-oben { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.fuss-marke .logo { display: block; height: 2.3rem; width: auto; overflow: visible; }
.fuss-marke p { max-width: 21rem; margin: 1.1rem 0 0; color: var(--grau); }
.fuss-spalte { display: grid; gap: 0.55rem; align-content: start; justify-items: start; }
.fuss-spalte .dachzeile { color: var(--grau); margin-bottom: 0.4rem; }
.fuss a { text-decoration: none; transition: color 0.2s; }
.fuss a:hover { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--akzent); }
.fuss-unten {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 1.4rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  color: var(--grau);
  font-size: 0.86rem;
}
.fuss-unten::before { content: ""; position: absolute; top: 0; left: var(--rand); right: var(--rand); height: 1px; background: var(--linie-dunkel); }
@media (max-width: 46rem) {
  .fuss-oben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
}

/* ---------- Sprache beim ersten Besuch (site.js) ---------- */
.sprachwahl-box {
  position: fixed;
  z-index: 40;
  right: 1.4rem;
  bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  width: min(21rem, calc(100% - 1.5rem));
  padding: 1.05rem 1.15rem 1.1rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 22px;
  box-shadow: 0 34px 80px -34px rgba(22, 24, 27, 0.5), 0 10px 24px -14px rgba(22, 24, 27, 0.22);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--sanft), transform 0.5s var(--sanft);
}
.sprachwahl-box.da { opacity: 1; transform: none; }
.sprachwahl-titel { margin: 0 2.4rem 0.75rem 0; font: 650 0.95rem/1.35 var(--font-text); color: var(--tinte); }
.sprachwahl-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.sprachwahl-knoepfe .knopf { padding: 0.85rem 1rem; font-size: 0.95rem; }
.sprachwahl-zu {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--grau);
  font: 300 1.5rem/1 var(--font-text);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.sprachwahl-zu:hover { background: var(--stein); color: var(--tinte); }
@media (max-width: 40rem) {
  /* Auf dem Handy eine schmale Leiste unten: das Video oben bleibt frei */
  .sprachwahl-box { left: 0.75rem; right: 0.75rem; width: auto; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); padding: 0.85rem 0.95rem 0.9rem; }
}

/* ---------- Sanftes Einblenden (setzt site.js, nur ohne „Bewegung reduzieren“) ---------- */
.zeigen { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--sanft), transform 0.9s var(--sanft); }
.zeigen.da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .zeigen { opacity: 1; transform: none; }
}

/* ---------- Handy: kleinere Schrift, engere Abstände, nichts zum Seitwärtswischen ---------- */
@media (max-width: 40rem) {
  body { font-size: 1rem; line-height: 1.6; }
  h1 { font-size: 2.3rem; line-height: 1.02; margin: 0.6rem 0 0.9rem; }
  h2 { font-size: 1.85rem; line-height: 1.08; margin: 0.55rem 0 0.8rem; }
  h3 { font-size: 1.02rem; }
  .lead { font-size: 1.04rem; line-height: 1.55; }
  .dachzeile { font-size: 0.66rem; letter-spacing: 0.15em; }
  .abschnitt-kopf .dachzeile::before, .muster-kopf .dachzeile::before, .muster-feature-text .dachzeile::before,
  .angebot-text .dachzeile::before, .held-inhalt .dachzeile::before { width: 1.3rem; }
  .abschnitt { padding-block: 3.75rem; }
  .abschnitt-kopf { margin-bottom: 1.8rem; }
  .knopf { font-size: 0.95rem; padding: 0.9rem 1.3rem; }

  /* Held am Handy: oben die Überschrift, darunter die Kamerafahrt als ganzes Bild im Querformat (nichts abgeschnitten),
     darunter der KI-Hinweis und ein Knopf. Die Karte liegt halb auf dem Leinen, halb auf dem Weiß. Der Kopf ist oben
     durchsichtig auf dem Leinen und wird beim Scrollen weiß. Text und zweiter Knopf gibt es nur am großen Bildschirm. */
  .kopf.ueber-video:not(.fest) .logo-olive { fill: var(--akzent); }
  .kopf.ueber-video:not(.fest) .logo-blatt { fill: var(--blatt); }
  .kopf.ueber-video:not(.fest) .logo-schrift { fill: var(--tinte); }
  .kopf.ueber-video:not(.fest) .sprachen a { color: var(--grau); }
  .kopf.ueber-video:not(.fest) .sprachen a + a { border-left-color: var(--linie-dunkel); }
  .kopf.ueber-video:not(.fest) .knopf { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
  .held {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr 1fr auto auto;
    align-items: start;
    padding-top: calc(4.6rem + env(safe-area-inset-top, 0px));
    background: var(--stein);
    overflow: visible;
  }
  .held::after { content: ""; grid-row: 4 / -1; grid-column: 1; align-self: stretch; background: var(--weiss); }
  .held-inhalt { display: contents; color: var(--tinte); }
  .held-inhalt > *, .held-marke, .held-video { position: relative; z-index: 1; grid-column: 1; }
  .held-inhalt .dachzeile { grid-row: 1; margin: 1.5rem var(--rand) 0; color: var(--akzent-text); }
  .held-inhalt .dachzeile::before { background: var(--akzent); }
  .held-inhalt h1 { grid-row: 2; margin: 0.75rem var(--rand) 1.6rem; font-size: 2.15rem; line-height: 1.04; max-width: 11em; text-shadow: none; text-wrap: balance; }
  .held-video {
    grid-row: 3 / 5;
    inset: auto;
    grid-column: 1;
    width: calc(100% - 2 * var(--rand));
    height: auto;
    aspect-ratio: 16 / 9;
    margin-inline: var(--rand);
    border-radius: var(--rund);
    background: var(--nacht);
    box-shadow: var(--schatten);
  }
  .held-schleier, .held-inhalt .lead, .held-inhalt .knopf.zweit { display: none; }
  .held-marke {
    grid-row: 5;
    inset: auto;
    display: flex;
    margin: 0.9rem var(--rand) 0;
    gap: 0.6rem;
    font-size: 0.56rem;
    letter-spacing: 0.15em;
    color: var(--grau);
  }
  .held-marke::before { width: 1.1rem; background: var(--akzent); }
  .held-inhalt .knopf-reihe { grid-row: 6; margin: 1.5rem var(--rand) 2.6rem; }
  .held-inhalt .knopf { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); padding: 0.85rem 1.4rem; font-size: 0.93rem; }

  .fakten dl > div { padding: 1.15rem 0.9rem 1.2rem 0; }
  .fakten dl > div:nth-child(even) { padding-left: 1rem; }
  .fakten dt { font-size: 1.3rem; }
  .fakten dd { font-size: 0.84rem; margin-top: 0.3rem; }

  .vergleich-titel { font-size: 1.3rem; margin-bottom: 0.9rem; }
  .vergleich figcaption { font-size: 0.9rem; }
  .vergleich-paar + .vergleich-paar { margin-top: 2.5rem; }
  .chip { font-size: 0.6rem; padding: 0.45rem 0.6rem; left: 0.7rem; top: 0.7rem; }

  /* Vorher – Nachher: das Foto als kleine Karte oben links im Video, wie im Mail-Film, statt zwei großer Bilder */
  .vergleich { display: block; }
  .vergleich figure:first-of-type { position: absolute; z-index: 2; top: 0.65rem; left: 0.65rem; width: 38%; }
  .vergleich figure:first-of-type .vergleich-bild {
    border: 2px solid var(--weiss);
    border-radius: 10px;
    box-shadow: 0 10px 26px -8px rgba(14, 16, 18, 0.55);
  }
  .vergleich figure:first-of-type figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vergleich figure:first-of-type .chip { font-size: 0.5rem; letter-spacing: 0.12em; padding: 0.3rem 0.45rem; top: 0.35rem; left: 0.35rem; }
  .vergleich figure:last-of-type .chip { left: auto; right: 0.7rem; }

  /* Vergleich Dreh vor Ort: eine Karte, je Zeile erst unser Wert, darunter klein der Dreh vor Ort */
  .tabelle-huelle { overflow: visible; padding: 0.15rem 1.15rem; }
  table.gegenueber, .gegenueber tbody, .gegenueber th, .gegenueber td { display: block; width: auto; min-width: 0; }
  .gegenueber thead { display: none; }
  .gegenueber tr { display: flex; flex-direction: column; padding: 0.95rem 0; border-bottom: 1px solid var(--linie); }
  .gegenueber tr:last-child { border-bottom: 0; }
  .gegenueber th, .gegenueber td { padding: 0; border: 0; }
  .gegenueber tbody th {
    order: 1;
    font: 650 0.64rem/1.2 var(--font-text);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--akzent-text);
  }
  .gegenueber td.gut { order: 2; background: none; margin-top: 0.45rem; font-size: 1rem; line-height: 1.4; }
  .gegenueber td:not(.gut) { order: 3; margin-top: 0.3rem; font-size: 0.82rem; line-height: 1.45; color: var(--grau); }
  .gegenueber td:not(.gut)::before { content: attr(data-label) ": "; font-weight: 600; }

  .schritte { gap: 1.6rem; }
  .schritt { padding-top: 1.2rem; }
  .schritt-nr { font-size: 2.3rem; margin-bottom: 0.8rem; }
  .vorteile { gap: 1.6rem; }
  .vorteile > div { padding-top: 1.15rem; }
  .vorteile h3 { font-size: 1.25rem; margin-bottom: 0.45rem; }
  .muster-feature { gap: 1.3rem; }
  .muster-feature-text h3 { font-size: 1.55rem; margin: 0.7rem 0 0.7rem; }
  .muster-feature-play { width: 3.8rem; height: 3.8rem; }
  .datenblatt > div { grid-template-columns: 4.7rem minmax(0, 1fr); gap: 0.8rem; padding: 1rem 0 1.05rem; }
  .datenblatt dt { font-size: 1.2rem; }
  .preis-karte { padding: 1.5rem 1.3rem; border-radius: 20px; }
  .haken { gap: 1rem; }
  .haken li { padding-left: 2.2rem; }
  .haken li::before { width: 1.4rem; height: 1.4rem; background-size: 0.9rem; }
  .knopf-reihe { margin-top: 1.5rem; }
  .fragen summary { font-size: 0.97rem; padding: 1.1rem 2.6rem 1.1rem 0; }
  .fragen .antwort { padding-right: 0; font-size: 0.95rem; }
  .abschluss-karte { padding: 1.7rem 1.35rem 1.5rem; border-radius: 22px; margin-top: 3rem; }
  .abschluss-zeichen { width: 2.4rem; height: 2.4rem; margin-bottom: 1rem; }

  .muster-kopf { padding-block: 2.2rem 1.4rem; }
  .muster-kopf h1 { font-size: 2.1rem; }
  .film-start { padding: 0.8rem 1.15rem 0.8rem 1rem; font-size: 0.9rem; }
  .angebot { padding: 1.5rem 1.3rem; border-radius: 16px; }
  .recht h1 { font-size: 2.1rem; }
  .fuss { font-size: 0.9rem; }
}

/* Ganz schmal ist der Kopf niedriger (siehe oben), der Held rückt mit */
@media (max-width: 30rem) { .held { padding-top: calc(4rem + env(safe-area-inset-top, 0px)); } }