/* =========================================================
   Reliefhaus – Startseite
   Zuerst fürs Handy gebaut, größere Bildschirme kommen danach.
   ========================================================= */

:root {
  /* =======================================================================
     MARKENFARBEN – aus dem Style Sheet, 02 / Farbwelt
     =======================================================================
     „Waldgrün als Anker. Wärme als Gegengewicht." Die Richtwerte für die
     Verteilung stehen dort ebenfalls und sind hier eingehalten:

         55 % Off-White/Weiß · 25 % Wald-/Tiefgrün · 12 % Salbei/Moos · 8 % Sand

     ⚠️ ZWEI FARBEN SIND KEINE SCHRIFTFARBEN. Das Style Sheet sagt es
     ausdrücklich – „Salbei und Sand nicht für kleine Schrift verwenden" –
     und die Rechnung bestätigt es: Sand auf Weiß ergibt 1,6 : 1, Salbei
     1,8 : 1. Lesbar wird beides erst auf dunklem Grün (7,2 bzw. 6,7 : 1).
     Deshalb gilt hier: Sand und Salbei sind FLÄCHEN, nie Text auf hellem
     Grund. Gemessen, nicht geschätzt. */
  --wald:       #183D32;   /* Primärfarbe · CTA · Links                   */
  --tief:       #102A23;   /* Hero-Flächen · Fuß                          */
  --moos:       #6E8066;   /* Sekundärfarbe · Akzente                     */
  --salbei:     #B9C6B0;   /* Flächen · Highlights                        */
  --sand:       #D9C7A6;   /* warme Akzente                               */
  --offweiss:   #F6F4EE;   /* Haupt-Hintergrund                           */
  --reinweiss:  #FFFEFA;   /* Karten und Eingabefelder                    */
  --graphit:    #202923;   /* Fließtext und Icons                         */

  /* --- Rollen: was die Regeln unten benutzen -------------------------
     Die Namen bleiben, damit nicht jede Regel umgeschrieben werden muss;
     dahinter stehen jetzt die Markenfarben. Die drei Textstufen sind auf
     Kontrast gerechnet (AA = 4,5 : 1 für normalen Text):

         --ink        13,6 : 1 auf Off-White
         --ink-soft    6,9 : 1
         --ink-faint   4,8 : 1   ← knapp über der Grenze, bewusst so */
  --paper:      var(--offweiss);
  --paper-2:    #EDEAE1;
  --ink:        var(--graphit);
  --ink-soft:   #4C564F;
  --ink-faint:  #676D65;
  --line:       #D5DCD4;   /* die „dünne graugrüne Linie" aus 06         */
  --accent:     var(--wald);
  --accent-2:   var(--tief);   /* dunkler beim Darüberfahren, nicht heller */
  --gold:       var(--sand);   /* nur auf dunklem Grund – siehe oben      */

  /* --- Formen (06 / UI-Komponenten) ---------------------------------
     Karten 16–20 px, Buttons 12–14 px, Eingabefelder 10 px. */
  --radius:       18px;
  --radius-knopf: 13px;
  --radius-feld:  20px;
  --radius-eingabe: 10px;

  /* --- Abstände (06 / Abstände & Formen) ----------------------------
         8 px kleine Lücken · 16 px Elemente · 24 px Karten innen
        40 px Abschnitte · 64–96 px Hero/Bildraum                      */
  --luft-1: 8px;
  --luft-2: 16px;
  --luft-3: 24px;
  --luft-4: 40px;
  --luft-5: 72px;

  /* --- Schrift (03 / Typografie) ------------------------------------
     Manrope für Überschriften, Inter für alles andere – höchstens zwei
     Familien. Geladen in `schriften.css`, selbst gehostet.

     ⚠️ Hier stand eine SERIFE (Iowan Old Style). Das Style Sheet
     verlangt „eine klare Sans Serif"; der Variablenname `--serif` wäre
     danach eine Lüge gewesen, deshalb heißt sie jetzt `--display`. */
  --display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --shadow-sm:  0 1px 2px rgba(29,28,26,.06), 0 2px 8px rgba(29,28,26,.05);
  --shadow-md:  0 6px 28px rgba(29,28,26,.13);

  /* Seitenrand – wächst mit dem Bildschirm mit */
  --rand: clamp(20px, 5vw, 48px);
  /* Abstand ZWISCHEN den Feldern. Seit 1.42.0 trennt nicht mehr ein
     Strich, sondern das Weiß dazwischen – dann muss davon auch genug da
     sein. 18 px waren zu wenig: Die Felder lasen sich als ein Block mit
     Fugen, nicht als einzelne Karten. Ein Feld ist 40–72 px hoch
     gepolstert; der Abstand nach außen muss in derselben Größenordnung
     liegen, sonst wirkt er wie ein Fehler. */
  --feld-luecke: 22px;
  /* Seit 1.42.0: weiße Seite, farbiges Feld, weiße Karte darin.
     Die Töne kommen jetzt aus der Markenpalette. */
  --feld:        var(--offweiss);
  --feld-innen:  var(--reinweiss);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  /* 03 / Typografie: Fließtext 16–18 px Desktop, 16 px Mobile,
     Zeilenhöhe 1,5–1,65. Vorher stand hier nichts und die Absätze
     erbten 15 px aus den einzelnen Regeln – darunter wird es auf dem
     Telefon mühsam. */
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Manrope Semibold/Bold, enger gesetzt – große, ruhige Headlines. */
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
h3 { font-weight: 600; }

/* ---------- Der Knopf: überall derselbe, überall groß genug ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* min-height 56 px: bequem mit dem Daumen zu treffen */
  min-height: 56px;
  padding: 15px 26px;
  /* 06 / UI-Komponenten: „Primärbutton – Waldgrün, weiße Schrift,
     Radius 12–14 px". Vorher war er eine Pille (999 px). Eckiger wirkt
     ruhiger und passt zu den Karten mit 16–20 px. */
  border-radius: var(--radius-knopf);
  background: var(--accent);
  color: var(--reinweiss);
  text-decoration: none;
  /* „Buttons: 15–16 px, Semibold, normale Groß-/Kleinschreibung." */
  font-size: 16px;
  font-weight: 600;
  /* Karten und Buttons tragen „keine oder nur sehr weiche Schatten". */
  box-shadow: none;
  transition: background .16s ease, transform .12s ease;
}
.cta em {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  opacity: .78;
  padding-left: 12px;
  border-left: 1px solid rgba(246,243,236,.32);
}
.cta:hover { background: var(--accent-2); }
.cta:active { transform: scale(.985); }
.cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* 06: „Sekundärbutton – Off-White, grüne Kontur. Für zurück oder mehr
   erfahren." Steht auf dunklem Grund, deshalb bleibt er hell. */
.cta.hell {
  background: var(--offweiss);
  color: var(--wald);
  box-shadow: inset 0 0 0 1.5px var(--wald);
}
.cta.hell em { opacity: .75; border-left-color: var(--salbei); }
.cta.hell:hover { background: var(--reinweiss); }

/* ---------- Kopf ----------
   Am Handy bewusst NICHT klebend: Dort übernimmt die Leiste unten die
   Rolle des ständig erreichbaren Knopfes, und der Kopf würde beim Scrollen
   nur Überschriften anschneiden und 64 Pixel Bildschirm kosten. */
.kopf {
  position: static;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--rand);
  padding-top: max(12px, env(safe-area-inset-top));
  /* Passt sich der weissen Seite an – die Haarlinie unten bleibt,
     damit der Kopf beim Scrollen eine Kante hat. */
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.marke {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
}
.marke img { width: 34px; height: 34px; border-radius: 9px; }

.kopf-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* Daumenmaß – darunter trifft man auf dem Handy daneben */
  padding: 11px 18px;
  /* Sekundärbutton: Off-White mit grüner Kontur, Radius wie alle Knöpfe. */
  border-radius: var(--radius-knopf);
  border: 1.5px solid var(--wald);
  background: var(--offweiss);
  color: var(--wald);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.kopf-cta:hover { background: var(--wald); color: var(--reinweiss); }

/* ---------- Hero ----------
   02 / Farbwelt: „Tiefgrün #102A23 – Hero-Flächen, Footer." Der Hero ist
   damit die eine große dunkle Fläche der Seite; alles darunter bleibt
   hell. Das trifft auch die Verteilung aus dem Style Sheet (25 % Wald-/
   Tiefgrün) deutlich besser als eine Seite, auf der nur der Abschluss
   grün ist.

   ⚠️ Auf dieser Fläche kehren sich die Farben um: Der Hauptknopf wird
   HELL, nicht waldgrün – Waldgrün auf Tiefgrün ergibt 1,3 : 1 und wäre
   kaum zu sehen. Hell auf dunkel sind es 13 : 1. */
.hero {
  padding: var(--luft-5) clamp(20px, 5vw, 56px);
  /* Am Handy stand der Hero früher von Kante zu Kante, die Felder
     darunter eingerückt – zwei verschiedene Spalten auf einer Seite.
     Jetzt ist der Hero dieselbe Karte wie alle anderen. */
  margin: 10px var(--rand) var(--feld-luecke);
  background: var(--tief);
  border-radius: var(--radius-feld);
  color: var(--reinweiss);
}
.hero h1 { color: var(--reinweiss); }
.hero .lead { color: var(--salbei); }
.hero .lead strong { color: var(--reinweiss); }

/* Endlich an der richtigen Stelle: Sand ist eine warme Akzentfarbe und
   auf Tiefgrün mit 9,2 : 1 bestens lesbar. Auf hellem Grund war sie es
   mit 1,6 : 1 nie – siehe den Kasten oben bei den Markenfarben. */
.augenmerk {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sand);
}

.hero h1 {
  margin: 0 0 16px;
  /* 03 / Typografie: H1 36–52 px Desktop, 32–38 px Mobile. Vorher ging
     es bis 62 px – das Style Sheet will „große, RUHIGE Headlines", und
     62 px auf einer weißen Seite sind eher laut als ruhig. */
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.1;
}

.lead {
  margin: 0 0 26px;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 34em;
}
/* ⚠️ `20 × 20 cm` darf nicht umbrechen. Ohne das stand im Hero
   „…3D-gedrucktes Bild, 20" und in der nächsten Zeile „× 20 cm" – eine
   Maßangabe, die mitten im Mal-Zeichen zerfällt. */
.lead strong { color: var(--ink); font-weight: 600; white-space: nowrap; }

.hero .cta {
  width: 100%;
  background: var(--offweiss);
  color: var(--wald);
  box-shadow: none;
}
.hero .cta:hover { background: var(--reinweiss); }
.hero .cta em { border-left-color: var(--salbei); opacity: .8; }

.beleg {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13.5px;
  /* Steht jetzt im dunklen Hero – Salbei hat dort 8,5 : 1. */
  color: var(--salbei);
}
.beleg li { display: flex; align-items: center; gap: 7px; }
.beleg li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sand);
  flex: none;
}

/* ---------- Video / Grafik ---------- */
/* ⚠️ Vorher zog ein negatives `margin` das Bild am Handy bis an die
   Kanten des Heros. Das hatte zwei Haken: Das Bild lag mit eckigen Ecken
   über den runden Ecken der dunklen Karte, und es klebte an der Kante –
   genau der Fehler, der am Rechner auch beim Text auftrat. Jetzt hält
   das Bild denselben Abstand wie der Text und bringt seine eigene
   Rundung mit. */
.hero-medium { margin: 30px 0 0; }

.medium-rahmen {
  position: relative;
  background: var(--accent);
  overflow: hidden;
  border-radius: var(--radius);
}
.medium-rahmen video {
  width: 100%;
  height: auto;
  display: block;
  background: #0f1211;
}

/* ---------- Bilderfolge im Hero ----------
   Die Bilder liegen übereinander und werden ineinander geblendet. Damit das
   ohne Springen geht, bekommt der Rahmen ein festes Seitenverhältnis, sobald
   die Folge läuft – vorher richtet er sich nach der Grafik. */
.medium-rahmen.mit-bildern { aspect-ratio: 1 / 1; }

.bilderfolge {
  position: absolute;
  inset: 0;
  /* Senkrecht scrollt die Seite, waagerecht wischt landing.js die Bilder. */
  touch-action: pan-y;
}

.bilderfolge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Sichtbar 3 s (FOLGE_MS in landing.js), Wechsel in 0,9 s. */
  transition: opacity 0.9s ease-in-out;
}
.bilderfolge img.an { opacity: 1; }

/* Die Punkte zum Weiterklicken. Sie liegen auf dem Bild, deshalb hell mit
   Schatten – so bleiben sie auf einem hellen wie auf einem dunklen Foto
   erkennbar. */
.folge-punkte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.folge-punkte button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.folge-punkte button:hover { background: rgba(255, 255, 255, 0.75); }
.folge-punkte button[aria-current='true'] {
  background: #fff;
  transform: scale(1.35);
}
.folge-punkte button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keinen
   Wechsel – nur das erste Bild. Weiterklicken geht trotzdem. */
@media (prefers-reduced-motion: reduce) {
  .bilderfolge img { transition: none; }
}

/* Fällt ein, solange weder Bilder noch Video da sind: gezeichnete Höhenlinien */
.relief-grafik { width: 100%; height: auto; display: block; }

/* ---------- Blöcke ---------- */
/* EIN BLOCK IST EIN FELD, KEIN STRICH.
   Vorher lief die Seite durchgehend in Papierton und wurde mit einer
   1-px-Linie geteilt. Jetzt steht jeder Block als eigene Flaeche auf
   Weiss. Der Abstand dazwischen trennt – deshalb weder Rahmen noch
   Schlagschatten. */
.block {
  padding: 44px clamp(20px, 5vw, 40px);
  margin: 0 var(--rand) var(--feld-luecke);
  background: var(--feld);
  border-radius: var(--radius-feld);
}
/* Den Abstand nach oben bringt der Hero schon mit (`margin-bottom`).
   Noch einmal 10 px hier wären doppelt gerechnet. */
.block:first-of-type { margin-top: 0; }
.block h2 {
  margin: 0 0 26px;
  /* H2: 26–32 px Desktop, 22–26 px Mobile */
  font-size: clamp(23px, 3.2vw, 31px);
  line-height: 1.22;
}
.unter {
  margin: 40px 0 16px;
  font-size: clamp(17px, 4.6vw, 21px);
}

/* ---------- Drei Schritte ---------- */
.schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
}
.schritte li { position: relative; padding-left: 50px; }
.nr {
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--reinweiss);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
}
.schritte h3 { margin: 4px 0 7px; font-size: 19px; }
.schritte p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink-soft); }

/* ---------- Galerie ---------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.galerie img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  /* 12 % Salbei/Moos aus der Farbverteilung: Salbei ist eine FLÄCHE.
     Hier als ruhiger Platzhalter hinter den Bildern. */
  background: var(--salbei);
  box-shadow: var(--shadow-sm);
}
/* Das erste Bild bekommt die volle Breite – es trägt den Block */
.galerie img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

/* ---------- Fakten ---------- */
.fakten { margin: 0; display: grid; }
/* Die Zeilen der Faktenliste standen in einem Gitter aus Linien. Jetzt
   ist jede Zeile eine helle Flaeche im farbigen Block – dieselbe Logik
   eine Ebene tiefer, und ohne einen einzigen Strich. */
.fakten { gap: 6px; }
.fakten > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 12px 16px;
  background: var(--feld-innen);
  border-radius: 11px;
}
.fakten dt { font-size: 14px; color: var(--ink-faint); flex: none; }
.fakten dd { margin: 0; font-size: 14.5px; font-weight: 600; text-align: right; }

/* ---------- Extras ---------- */
.extras { display: grid; gap: 14px; }
/* Weisse Karte im farbigen Block. Der Schlagschatten ist raus: Die
   Farbe hebt sie schon ab, und zwei Mittel fuer dieselbe Aussage sind
   eines zu viel. */
.extra-karte {
  background: var(--feld-innen);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.extra-karte h4 {
  margin: 0 0 9px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.extra-karte h4 span {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  flex: none;
}
.extra-karte p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* ---------- Fragen ---------- */
/* Jede Frage ist eine eigene helle Flaeche statt einer Zeile zwischen
   zwei Strichen. Das macht die Liste auf dem Telefon deutlich ruhiger:
   Vorher lagen zehn Linien untereinander, jetzt zehn Flaechen. */
.faq { display: grid; gap: 8px; }
.faq details {
  background: var(--feld-innen);
  border-radius: 12px;
  padding: 0 16px;
}
.faq details[open] { padding-bottom: 4px; }
.faq summary {
  /* min-height für den Daumen, list-style weg für eigenes Zeichen */
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 14px 0;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-size: 21px;
  font-weight: 400;
  color: var(--accent);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 46em;
}

/* ---------- Abschluss ---------- */
/* Der Abschluss ist ebenfalls ein Feld – nur in der kraeftigen Farbe,
   weil er der letzte Anstoss ist und auffallen soll. */
.schluss {
  padding: 56px clamp(20px, 5vw, 40px);
  margin: 0 var(--rand) var(--feld-luecke);
  background: var(--accent);
  color: var(--paper);
  text-align: center;
  border-radius: var(--radius-feld);
}
/* Ohne die Zeile darunter (seit 1.45.0 gestrichen) trägt die Überschrift
   den Abstand zum Knopf allein. */
.schluss h2 { margin: 0 0 28px; font-size: clamp(26px, 7vw, 38px); }
.schluss p { margin: 0 0 28px; font-size: 16px; opacity: .8; }
.schluss .cta { width: 100%; max-width: 420px; }
.schluss .preis-hinweis { margin: 14px 0 0; font-size: 13px; opacity: .75; }

/* ---------- Fuß ----------
   Das Style Sheet nennt Tiefgrün auch für den Footer. Hier steht direkt
   darüber schon der waldgrüne Abschluss – zwei dunkle Flächen hinter-
   einander wären eine zu viel und würden den Abschluss schwächen, der
   die letzte Aktion trägt. Der Fuß bleibt deshalb hell; die 25 % Grün
   kommen aus Hero und Abschluss zusammen. */
.fuss {
  padding: 30px var(--rand);
  /* Platz für die klebende Leiste am Handy */
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-faint);
  text-align: center;
}
.fuss p { margin: 0 0 4px; }
.fuss a { color: var(--ink-soft); }

/* ---------- Klebender Knopf am Handy ---------- */
.klebe-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 12px var(--rand);
  padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  animation: hoch .22s ease;
}
.klebe-cta .cta { width: 100%; }
@keyframes hoch { from { transform: translateY(100%); } to { transform: none; } }

/* =========================================================
   Ab Tablet: zwei Spalten, mehr Luft
   ========================================================= */
@media (min-width: 760px) {
  /* Am Rechner sind die Felder größer, also braucht auch die Fuge
     dazwischen mehr – sonst schrumpft sie optisch mit. */
  :root { --feld-luecke: 32px; }

  .kopf { position: sticky; top: 0; }

  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
    /* Dieselbe Spalte wie die Felder darunter – sonst beginnt die
       Überschrift bei 0 und das erste Feld bei 45. */
    width: min(1240px, 100% - 2 * var(--rand));
    margin: 0 auto var(--feld-luecke);
    /* ⚠️ Hier stand `padding-left: 0; padding-right: 0`, damit der Text
       in derselben Spalte beginnt wie die Felder darunter. Das war zwei
       Dinge auf einmal verlangt: Die Spalte IST jetzt die Karte – also
       braucht sie innen eigene Polsterung, sonst klebt die Überschrift
       an der linken und das Bild an der rechten Kante. Genau so sah es
       im Bildschirmfoto aus: Text bei x = 48, Kante bei x = 48.
       Gemessen wird das jetzt in pruefung-aussehen.js. */
    padding: 56px clamp(28px, 3.4vw, 48px);
  }
  .hero-medium { margin: 0; }
  .hero .cta { width: auto; }
  /* Sterne unter den Knopf, nicht daneben (seit 1.59.0, Ansage des
     Betreibers): Als `inline-flex` rutschten sie am Rechner rechts neben
     den schmalen Knopf – mit nur einem Leerzeichen Abstand, wie angeklebt.
     Als eigene Zeile stehen sie überall gleich: unter dem Knopf. */
  .hero .sterne-leiste { display: flex; width: max-content; }

  /* ⚠️ `margin: 0 auto` hat hier den Abstand NACH UNTEN mitgenommen, den
     `.block` seit 1.42.0 braucht – die Felder klebten aneinander. Und der
     Abschluss stand nicht in derselben Spalte: Er war breiter als alle
     Felder darüber, weil die Begrenzung auf 1240 px nur für `.block`
     galt. Gefunden an den gemessenen Kanten im Bildschirmfoto – 140 px
     links beim Feld, 65 px beim Abschluss. */
  /* `max-width` plus `margin: auto` allein genügt nicht: Zwischen 760 und
     1240 px blieb kein Rand übrig, die Felder liefen von Kante zu Kante
     und das Weiss ringsum verschwand. `width: min(…)` behält den Rand bei
     JEDER Breite und zentriert trotzdem. Gemessen bei 900 px: vorher
     0 → 900, jetzt 48 → 852. */
  .block,
  .schluss {
    width: min(1240px, 100% - 2 * var(--rand));
    margin: 0 auto var(--feld-luecke);
  }
  .block { padding-top: 72px; padding-bottom: 72px; }
  .schritte { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .extras { grid-template-columns: 1fr 1fr; }
  .galerie { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .galerie img:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }

  .fakten { grid-template-columns: 1fr 1fr; column-gap: 44px; }

  .fuss { padding-bottom: 40px; }
  /* Am Rechner braucht es die klebende Leiste nicht */
  .klebe-cta { display: none !important; }
}

@media (min-width: 1040px) {
  .fakten { grid-template-columns: repeat(3, 1fr); }
}

/* Wer Bewegung nicht mag, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- Bewertungen (seit 1.56.0) ----------
   Die Sterne sind EIN Textzeichen-Band, das per Verlauf genau bis zum
   Schnitt gefüllt wird – 4,8 Sterne sind also wirklich 96 % gefüllt, nicht
   gerundet auf fünf. `--wert` setzt landing.js. */
.sterne {
  --wert: 5;
  --voll: var(--wald);
  --leer: rgba(24, 61, 50, .18);
  display: inline-block;
  /* Genau so breit wie die fünf Sterne – in einem Grid würde die Zeile
     sonst gestreckt, und 4 von 5 wären optisch trotzdem fünf volle. */
  width: max-content;
  justify-self: start;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 2px;
  background: linear-gradient(90deg, var(--voll) calc(var(--wert) / 5 * 100%), var(--leer) 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sterne::before { content: "★★★★★"; }
.sterne-gross { font-size: 30px; letter-spacing: 4px; }

/* Im Hero auf dunklem Grund: Sand ist hier lesbar (7,2 : 1). */
.sterne-leiste {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 14px 0 0;
  color: var(--salbei);
  font-size: 14.5px;
  text-decoration: none;
}
.sterne-leiste .sterne { --voll: var(--sand); --leer: rgba(255, 254, 250, .22); }
.sterne-leiste:hover .sterne-zahl { color: var(--reinweiss); text-decoration: underline; }
.sterne-zahl strong { color: var(--reinweiss); }

.bewertung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: -8px 0 22px; }
.bewertung-kopf p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.bewertung-kopf strong { color: var(--ink); font-size: 19px; }

.bewertungen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.bewertungen li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px 18px 16px;
  background: var(--feld-innen);
  border-radius: 12px;
}
.bewertungen blockquote { margin: 0; font-size: 15.5px; line-height: 1.55; }
.bewertungen .wer { font-size: 13px; color: var(--ink-soft); }
.bewertung-hinweis { margin: 22px 0 0; max-width: 70ch; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }