/* ─────────────────────────────────────────────────────────────
   MAULBEERKEIM ACADEMY — Bauteile der Unterseiten

   Nur was die Startseite nicht schon hat. Die Hülle (Kopf, Menü,
   Fuß, Knöpfe, Etiketten, Einblendungen, Cookie-Dialog) kommt
   unverändert aus basis.css, die Farben aus marke.css.
   ───────────────────────────────────────────────────────────── */

/* ── Kopfzeile ───────────────────────────────────────────────
   Auf der Startseite liegt der Kopf über dem Bild, deshalb steht
   er dort fest. Auf den Unterseiten beginnt gleich Text, darum
   nimmt er hier Platz im Fluss ein. Sonst rutscht die erste
   Überschrift unter ihn. Genauso macht es TRAGKRAFT. */
.kopf{position:sticky;background:rgba(16,12,10,.86);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 var(--kante)}

/* ── Phasen-Farben ────────────────────────────────────────────
   Jede Phase dreht nur den Akzent. Goldrand, Knöpfe, Verlaufs-
   wörter und Links ziehen automatisch mit, weil alles über
   dieselben Variablen läuft. */
body.ph-kinderwunsch{
  --licht:#EFC9C6; --licht-hell:#F9E3E0; --licht-tief:#D49E9A;
  --licht-rgb:239,201,198;
}
body.ph-schwangerschaft{
  --licht:#E6AE9B; --licht-hell:#F4D3C4; --licht-tief:#CE8E7C;
  --licht-rgb:230,174,155;
}
body.ph-babyzeit{
  --licht:#D9A0AE; --licht-hell:#EFC7D0; --licht-tief:#B87C8D;
  --licht-rgb:217,160,174;
}

/* ── Phasen-Leiste unter dem Kopf ─────────────────────────────
   Zeigt, wo man ist und dass es zwei weitere Phasen gibt. */
.phasenleiste{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;
  margin-bottom:1.4rem}
.phasenleiste .zaehler{font-size:.75rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--licht-tief)}
.phasenleiste ol{display:flex;flex-wrap:wrap;gap:.4rem}
.phasenleiste li > span{display:inline-flex;align-items:center;
  padding:.3rem .8rem;border-radius:999px;font-size:.8125rem;font-weight:500;
  color:var(--grau);box-shadow:inset 0 0 0 1px var(--kante)}
.phasenleiste span[aria-current]{color:var(--auf-licht);background-image:var(--verlauf);
  box-shadow:none}

/* ── Karten-Raster, überall gleich ────────────────────────────
   Ein Bauteil für Gefühle, Ebenen, Leistungen. Die Zahl der
   Spalten steuert eine Klasse. */
.raster{display:grid;gap:12px;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:40rem){ .raster{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:62rem){ .raster-3{grid-template-columns:repeat(3,minmax(0,1fr))} }

.karte{position:relative;display:flex;flex-direction:column;gap:.8rem;
  padding:clamp(1.4rem,3vw,2rem);border-radius:var(--rund);
  background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante)}
.karte-nr{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--licht-tief)}
.karte h3{font-family:var(--titel);font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.15;
  color:var(--creme)}
.karte p{font-size:.9688rem;line-height:1.7;color:var(--text)}

/* ── Schritte ─────────────────────────────────────────────────
   Nummer, Titel, Satz. Eine Linie verbindet sie. */
.schritte{display:grid;gap:2rem;grid-template-columns:1fr;margin-top:2rem;position:relative}
@media(min-width:56rem){ .schritte{grid-template-columns:repeat(3,1fr);gap:2.4rem} }
.schritt{position:relative;display:flex;flex-direction:column;gap:.6rem;
  padding-left:3.4rem}
@media(min-width:56rem){ .schritt{padding-left:0;padding-top:3.4rem} }
.schritt::before{content:attr(data-nr);position:absolute;left:0;top:0;
  display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;
  font-family:var(--titel);font-size:1.05rem;font-weight:600;
  color:var(--auf-licht);background-image:var(--verlauf);
  box-shadow:0 4px 14px rgba(0,0,0,.4)}
.schritt h3{font-family:var(--titel);font-size:1.25rem;line-height:1.2;color:var(--creme)}
.schritt p{font-size:.9375rem;line-height:1.65;color:var(--text)}

/* ── Team ─────────────────────────────────────────────────────── */
.team{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:40rem){ .team{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:68rem){ .team{grid-template-columns:repeat(4,minmax(0,1fr))} }
.kopf-figur{position:relative;display:flex;flex-direction:column;
  border-radius:var(--rund);overflow:hidden;
  background:var(--flaeche-hoch);box-shadow:inset 0 0 0 1px var(--kante)}
.kopf-figur-bild{position:relative;aspect-ratio:4/5;overflow:hidden;
  transform:translateZ(0);backface-visibility:hidden}
.kopf-figur-bild img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) brightness(.96)}
.kopf-figur-text{position:relative;z-index:1;margin-top:-1px;
  display:flex;flex-direction:column;gap:.35rem;
  padding:1.2rem 1.3rem 1.4rem;background:var(--flaeche-hoch)}
.kopf-figur-rolle{font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--licht-tief)}
.kopf-figur-text h3{font-family:var(--titel);font-size:1.3rem;line-height:1.15;color:var(--creme)}
.kopf-figur-beruf{font-size:.8125rem;color:var(--grau)}
.kopf-figur-text p:last-child{font-size:.875rem;line-height:1.65;color:var(--text);margin-top:.3rem}

/* ── Band: ein breiter Block, Bild links, Text rechts ──────────
   Dasselbe Bauteil wie „Danach" auf der Startseite. */
.band{position:relative;display:grid;grid-template-columns:1fr;
  margin-top:clamp(2.5rem,5vw,4rem);border-radius:var(--rund);overflow:hidden;
  text-decoration:none;background:var(--flaeche);
  box-shadow:inset 0 0 0 1px var(--kante)}
@media(min-width:56rem){ .band{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} }
.band-bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--flaeche-hoch);
  transform:translateZ(0);backface-visibility:hidden}
@media(min-width:56rem){ .band-bild{aspect-ratio:auto;height:100%;min-height:16rem} }
.band-bild img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.94)}
@media(min-width:56rem){
  .band-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,transparent 55%,var(--flaeche) 100%)}
}
@media(max-width:55.99rem){
  .band-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 55%,var(--flaeche) 100%)}
}
.band-text{position:relative;z-index:1;display:flex;flex-direction:column;
  gap:.9rem;justify-content:center;padding:clamp(1.6rem,4vw,2.8rem)}
.band-text h2{font-family:var(--titel);font-size:clamp(1.7rem,3vw,2.3rem);
  line-height:1.1;color:var(--creme)}
.band-text p{font-size:1rem;line-height:1.7;color:var(--text);max-width:42rem}

/* ── Traumreise: ein Geschenk, ruhig gerahmt ──────────────────── */
.geschenk-feld .hero-bild{margin:2rem auto 0;max-width:52rem;aspect-ratio:16/9}
@media(max-width:40rem){ .geschenk-feld .hero-bild{aspect-ratio:4/3} }

/* ── Zwischenruf: eine Frage, ein Knopf ───────────────────────── */
.zwischenruf{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1rem 1.6rem;margin-top:clamp(2rem,4vw,3rem);text-align:center}
.zwischenruf p{font-family:var(--titel);font-size:clamp(1.2rem,2.2vw,1.6rem);
  line-height:1.3;color:var(--creme)}

/* ── Zurück-Knopf für die rechtlichen Seiten ──────────────────── */
.zurueck{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  padding:.6rem 1.2rem;border-radius:999px;text-decoration:none;
  font-size:.9063rem;font-weight:600;color:var(--text);
  background:rgba(243,216,218,.05);box-shadow:inset 0 0 0 1px var(--kante-hell);
  transition:color .3s,background .3s}
.zurueck:hover{color:var(--creme);background:rgba(243,216,218,.09)}

/* ═════════════════════════════════════════════════════════════
   Phasen-Seiten sollen sich von der Startseite unterscheiden
   ═════════════════════════════════════════════════════════════ */

/* Die Startseite setzt ihre Abschnittsköpfe mittig. Die Phasen-Seiten
   lesen sich wie ein Text: linksbündig, mit einer feinen Linie davor.
   Das ist der deutlichste Unterschied und kostet nichts. */

body[class*="ph-"] .feld .kopf-block .titel .zwei{display:block}
/* Der Abschluss bleibt mittig, der ist ein Schlusspunkt. */
body[class*="ph-"] .abschluss .titel{margin-left:auto;margin-right:auto}

/* Der Hintergrund folgt der Startseite und damit TRAGKRAFT.
   Die Phase zeigt sich über den Akzent, nicht über den Grund. */

/* Knöpfe im Auftakt nebeneinander, solange Platz ist. */
.auftakt .tatreihe{flex-wrap:wrap}
@media(min-width:30rem){ .auftakt .tatreihe .knopf{flex:0 1 auto} }
@media(max-width:29.99rem){ .auftakt .tatreihe .knopf{width:100%} }

/* ── Symbole für Körper, Verstand und Seele ───────────────────── */
.ebene-zeichen{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;
  color:var(--licht);background:rgba(var(--licht-rgb),.1);
  box-shadow:inset 0 0 0 1px rgba(var(--licht-rgb),.22)}
.ebene-zeichen svg{width:1.5rem;height:1.5rem}

/* ── Passt das? Zwei Haltungen, klar unterschieden ─────────────
   Links die Einladung, rechts die ehrliche Absage. Links trägt die
   Farbe der Phase, rechts bleibt still. */
.passt{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:56rem){ .passt{grid-template-columns:1.05fr .95fr} }
.passt-block{position:relative;display:flex;flex-direction:column;gap:1.2rem;
  padding:clamp(1.6rem,3.5vw,2.4rem);border-radius:var(--rund);overflow:hidden}
.passt-ja{background:
  radial-gradient(120% 90% at 0% 0%,rgba(var(--licht-rgb),.10),transparent 70%),
  var(--flaeche-hoch)}
.passt-nein{background:var(--flaeche)}
.passt-nein::before{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;box-shadow:inset 0 0 0 1px var(--kante)}
.passt-kopf{display:flex;align-items:center;gap:.8rem}
.passt-zeichen{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;flex:none}
.passt-ja .passt-zeichen{color:var(--auf-licht);background-image:var(--verlauf)}
.passt-nein .passt-zeichen{color:var(--grau);background:rgba(243,216,218,.06);
  box-shadow:inset 0 0 0 1px var(--kante)}
.passt-zeichen svg{width:1.1rem;height:1.1rem}
.passt-block h3{font-family:var(--titel);font-size:clamp(1.4rem,2.4vw,1.75rem);
  line-height:1.15;color:var(--creme)}
.passt-nein h3{color:var(--grau)}
.passt-block ul{display:flex;flex-direction:column}
.passt-block li{position:relative;padding:.85rem 0 .85rem 1.6rem;
  font-size:.9375rem;line-height:1.6;color:var(--text);
  border-top:1px solid var(--kante)}
.passt-block li:first-child{border-top:0;padding-top:0}
.passt-block li:last-child{padding-bottom:0}
.passt-ja li::before{content:"";position:absolute;left:0;top:1.35rem;
  width:.5rem;height:.5rem;border-radius:50%;background-image:var(--verlauf)}
.passt-ja li:first-child::before{top:.5rem}
.passt-nein li{color:var(--grau)}
.passt-nein li::before{content:"";position:absolute;left:0;top:1.6rem;
  width:.7rem;height:1px;background:var(--grau-tief)}
.passt-nein li:first-child::before{top:.75rem}

/* ── Ursprung: Zellhaufen mit dem Logo darüber ────────────────── */
.ursprung{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center;
  grid-template-columns:1fr;margin-top:2rem}
@media(min-width:56rem){ .ursprung{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} }
.ursprung-bild{position:relative;justify-self:center;width:min(100%,22rem);
  aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--kante),0 24px 60px rgba(0,0,0,.45)}
.ursprung-bild img.zelle{width:100%;height:100%;object-fit:cover;
  filter:saturate(.5) brightness(.75)}
/* Das Logo liegt mittig darüber und zeigt, woher die Form kommt. */
/* Die Schwebe-Animation aus marke.css setzt selbst ein transform.
   Darum zentriert eine Hülle, und das Logo darf darin schweben. */
.ursprung-logo{position:absolute;left:50%;top:50%;width:58%;
  transform:translate(-50%,-50%);display:block;pointer-events:none;z-index:1}
.ursprung-logo .logo-figur{width:100%;height:auto;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
.ursprung-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(closest-side,transparent 40%,rgba(16,11,15,.55) 100%)}
.ursprung-text{display:flex;flex-direction:column;gap:1rem}
.ursprung-text p{font-size:1rem;line-height:1.75;color:var(--text)}

/* Auf den Phasen-Seiten steht links mehr Text und ein längerer
   Knopf, darum bekommt die linke Spalte etwas mehr Breite. Sonst
   rutscht der zweite Knopf unter den ersten. */
@media(min-width:62rem){
  body[class*="ph-"] .auftakt-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}
body[class*="ph-"] .auftakt .tatreihe{gap:.7rem}
body[class*="ph-"] .auftakt .tatreihe .knopf{padding-left:1.3rem;padding-right:1.3rem}

/* ── Vergleich: aus dem Zellhaufen wurde das Logo ──────────────
   Nachgebaut von der bisherigen Seite. Links das Mikroskopbild,
   rechts das Logo, der Griff schiebt die Kante hin und her. */
.vergleich{position:relative;width:100%;max-width:34rem;margin:2rem auto 0;
  aspect-ratio:1;border-radius:var(--rund);overflow:hidden;
  background:var(--flaeche-hoch);box-shadow:inset 0 0 0 1px var(--kante-hell),0 24px 60px rgba(0,0,0,.45);
  user-select:none;touch-action:pan-y}
.vergleich-seite{position:absolute;inset:0;display:grid;place-items:center}
.vergleich-seite{overflow:hidden}
/* Am Bild abgetastet, nicht geschätzt: die Blase liegt bei 680 Pixeln
   Kantenlänge zwischen 76 und 583 quer und zwischen 82 und 591 hoch.
   Das sind 508 Pixel Durchmesser, also 74,7 Prozent des Rahmens, und
   ihre Mitte sitzt 1,5 Prozent links und 0,5 Prozent über der Mitte.
   Der Ring des Logos füllt 90 Prozent seines Feldes. Angeglichen wird
   über das Logo, das Foto bleibt unangetastet und damit scharf. */
.vergleich-seite img{width:100%;height:100%;object-fit:cover}
.vergleich-rechts{clip-path:inset(0 0 0 50%)}
/* Im Logobild misst der Ring senkrecht 92 Prozent der Bildhöhe, im Foto
   füllt die Blase 74,7 Prozent des Rahmens. 74,7 geteilt durch 92 sind
   81 Prozent. Der Versatz nach links gleicht aus, dass die Blase im Foto
   nicht genau mittig sitzt. */
.vergleich-rechts .logo-figur{width:81%;height:81%;transform:translate(-2.1%,.4%)}
.vergleich-griff{position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:3;
  transform:translateX(-50%);cursor:ew-resize;
  background:linear-gradient(180deg,rgba(246,224,180,.25),var(--licht-hell) 50%,rgba(246,224,180,.25));
  box-shadow:0 0 20px rgba(246,224,180,.45)}
.vergleich-knauf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
  color:#3A1321;background-image:var(--verlauf);
  box-shadow:0 6px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.vergleich-knauf svg{width:1.1rem;height:1.1rem}
.vergleich-griff:focus-visible{outline:3px solid var(--licht-hell);outline-offset:4px}
.vergleich-schild{position:absolute;top:1rem;z-index:2;pointer-events:none;
  padding:.28rem .7rem;border-radius:999px;
  font-size:.625rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--licht-hell);background:rgba(16,11,15,.8);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(246,224,180,.3)}
.vergleich-schild.links{left:1rem}
.vergleich-schild.rechts{right:1rem}
.vergleich-hinweis{margin-top:.9rem;text-align:center;font-size:.8125rem;color:var(--grau)}

/* ── Leuchtsatz, wie die Bühne auf der TRAGKRAFT-Seite ──────────
   Zwei ruhige Sätze, die beim Scrollen Zeile für Zeile aufhellen.
   Die Regeln dafür stehen schon in basis.css, hier nur die Farbe
   der begleitenden Figur. */
body[class*="ph-"] .leucht-figur{width:min(100%,11rem)}
/* basis.css blendet die Figur unter 56rem aus, so macht es TRAGKRAFT.
   Hier soll sie auch auf dem Handy stehen, nur kleiner und über dem
   Text, damit sie die Zeilen nicht schmal drückt. */
@media(max-width:55.99rem){
  body[class*="ph-"] .leucht-figur{display:block;order:-1;width:min(60%,8rem);
    margin:0 auto .4rem}
}

body[class*="ph-"] .leucht-figur .logo-figur{width:100%;height:auto;
  filter:drop-shadow(0 0 34px rgba(var(--licht-rgb),.4))}

/* Karten dürfen unter dem Zeiger nachgeben, wie bei TRAGKRAFT.
   kippen.js bindet sich an .kachel, darum tragen unsere Karten
   diese Klasse mit. */
.karte.kachel,.passt-block.kachel{transform-origin:center;
  transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .4s var(--weich)}
/* Der Verweis trägt seine eigene Linie im Verlauf, die Standard-
   Unterstreichung des Browsers stört dabei. */
.ursprung-text .danach-link{text-decoration:none}

/* ═════════════════════════════════════════════════════════════
   Rechtliche Seiten, Bauteile 1:1 von TRAGKRAFT übernommen
   ═════════════════════════════════════════════════════════════ */
.seitenkopf{padding:clamp(3rem,7vw,5rem) 0 clamp(2rem,4vw,3rem);
  background:radial-gradient(70% 90% at 50% 0%,rgba(var(--licht-rgb),.16),transparent 70%)}
.seitenkopf h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.06;letter-spacing:-.035em;
  margin-top:1.2rem;max-width:22ch;padding-bottom:.06em}
.seitenkopf .einleitung{font-size:1.125rem;color:var(--text);max-width:40rem;margin-top:1.2rem}

.text-seite{padding-bottom:clamp(3rem,7vw,5rem);display:flex;flex-direction:column;gap:.7rem}
.text-seite > *{max-width:52rem}
.text-seite h2{font-family:var(--titel);font-size:clamp(1.15rem,2.2vw,1.35rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.3;color:var(--creme);margin-top:1.6rem}
.text-seite h2:first-of-type{margin-top:.4rem}
/* Nur die nummerierten Überschriften stehen in einer Zeile mit ihrer Ziffer.
   Ohne Ziffer bleibt die Überschrift ein Block und bricht auf schmalen
   Bildschirmen normal um. */
.text-seite h2:has(.nr){display:flex;align-items:baseline;gap:.6rem}
.text-seite h2 .nr{flex:none;display:grid;place-items:center;width:1.7rem;height:1.7rem;
  border-radius:50%;font-family:var(--schrift);font-size:.8125rem;font-weight:700;
  color:var(--licht-hell);background:rgba(var(--licht-rgb),.12);
  box-shadow:inset 0 0 0 1px rgba(var(--licht-rgb),.3)}
.text-seite h3{font-family:var(--titel);font-size:1.0625rem;font-weight:600;line-height:1.3;
  color:var(--creme);margin-top:1.2rem}
.text-seite p{font-size:.9688rem;line-height:1.65;color:var(--text)}
.text-seite p b,.text-seite p strong{color:var(--creme);font-weight:600}
.text-seite a{color:var(--licht-hell);text-underline-offset:3px}
.text-seite ul{display:flex;flex-direction:column;gap:.45rem;margin:.2rem 0 .6rem}
.text-seite li{position:relative;padding-left:1.1rem;font-size:.9688rem;line-height:1.6;color:var(--text)}
.text-seite li::before{content:"";position:absolute;left:0;top:.68rem;width:.35rem;height:.35rem;
  border-radius:50%;background:var(--licht-tief)}

.fakten{display:grid;grid-template-columns:1fr;gap:.2rem 1.6rem;margin:.4rem 0 1rem;
  padding:clamp(1.1rem,2.4vw,1.5rem);border-radius:var(--rund-klein);
  background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante)}
@media(min-width:44rem){ .fakten{grid-template-columns:minmax(9rem,11rem) 1fr} }
.fakten dt{font-size:.8125rem;font-weight:700;letter-spacing:.04em;color:var(--licht-hell);
  padding-top:.7rem}
@media(min-width:40rem){ .fakten dt{border-bottom:1px solid var(--kante);padding-bottom:.7rem} }
@media(max-width:40rem){ .fakten dt{padding-bottom:0;border-bottom:0} }
.fakten dd{margin:0;font-size:.9688rem;line-height:1.6;color:var(--text);padding-top:.7rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--kante)}
.fakten dt:last-of-type,.fakten dd:last-of-type{border-bottom:0}
.fakten a{color:var(--licht-hell)}

/* Der Zurück-Knopf ist unsere Ergänzung, TRAGKRAFT hat ihn nicht. */
.seitenkopf .zurueck{margin-bottom:.4rem}
.text-seite .zurueck{align-self:flex-start;margin-top:clamp(2rem,4vw,3rem)}

/* Ohne feste Größe wird das SVG so groß wie sein Kasten. */
.zurueck svg{flex:none;width:1.15em;height:.95em}

/* Die Traumreise-Standbilder tragen ihren Titel schon im Bild. Unsere
   eigene Überschrift lag genau darauf. Sie entfällt hier, der Hinweis
   rutscht unter das Geschehen. */
.geschenk-feld .video-titel{display:none}
.geschenk-feld .video-worte{position:absolute;left:0;right:0;bottom:3.4rem;
  max-width:none;text-align:center;align-items:center;padding:0 1.5rem}
@media(max-width:40rem){ .geschenk-feld .video-worte{bottom:4.2rem} }

/* ── Abschluss: ein warmes Licht statt zweier Schleier ──────────
   basis.css legt dort zwei Scheine übereinander, einen atmenden
   Kreis und einen maskierten Verlauf. In Terrakotta ergibt das
   Wärme, in Altrosa einen grauen Nebel mit sichtbarer Kante.
   Wir ersetzen beide durch dasselbe Licht wie im Auftakt. */
.abschluss::before{display:none}
.abschluss::after{background:
  radial-gradient(40% 20% at 50% 104%,rgba(255,201,140,.26),transparent 68%),
  radial-gradient(58% 26% at 50% 106%,rgba(232,164,143,.26),transparent 70%),
  radial-gradient(88% 38% at 50% 116%,rgba(124,40,74,.5),transparent 72%);
  -webkit-mask-image:none;mask-image:none}

/* ── Kontaktformular ───────────────────────────────────────────
   Von TRAGKRAFT übernommen, nur die Klasse heißt anders:
   .feld ist in basis.css schon ein Seitenabschnitt, damit beide Formulare
   sich gleich anfühlen. Die Farben kommen über die Variablen aus
   marke.css, also erscheint es hier in Altrosa statt Terrakotta. */
.formular{border-radius:var(--rund);padding:clamp(1.4rem,4vw,2.4rem);background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante);
  display:grid;gap:1.1rem;margin-bottom:clamp(3rem,6vw,5rem)}
.eingabe-paar{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:40rem){ .eingabe-paar{grid-template-columns:1fr 1fr} }
.eingabe[hidden]{display:none}
.eingabe{display:flex;flex-direction:column;gap:.4rem}
.eingabe label{font-size:.9375rem;font-weight:600;color:var(--creme)}
.eingabe label span{color:var(--licht-hell)}
/* Der Zusatz hinter einer Beschriftung ist ein Hinweis, kein Teil
   der Beschriftung. Deshalb leiser und ohne Fettung. */
.eingabe label .fein-inline{font-weight:400;color:var(--grau)}
.eingabe input,.eingabe select,.eingabe textarea{width:100%;font:inherit;font-size:1rem;color:var(--creme);background:var(--grund);
  border:1px solid rgba(243,216,218,.42);border-radius:12px;padding:.8rem 1rem;transition:border-color .2s,box-shadow .2s}
.eingabe textarea{min-height:10rem;resize:vertical}
.eingabe select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--grau) 50%),linear-gradient(135deg,var(--grau) 50%,transparent 50%);
  background-position:calc(100% - 1.3rem) 55%,calc(100% - .95rem) 55%;background-size:.35rem .35rem;background-repeat:no-repeat;padding-right:2.4rem}
.eingabe input:focus,.eingabe select:focus,.eingabe textarea:focus{outline:none;border-color:var(--licht);box-shadow:0 0 0 3px rgba(var(--licht-rgb),.25)}
.eingabe[data-fehler] input,.eingabe[data-fehler] textarea{border-color:#E07A6A}
.eingabe .fehler{display:none;font-size:.8438rem;color:#F0A294}
.eingabe[data-fehler] .fehler{display:block}
.honig{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.meldung{padding:1rem 1.2rem;border-radius:var(--rund-klein);font-size:.9688rem}
.meldung[hidden]{display:none}
.meldung.gut{background:rgba(127,169,138,.14);box-shadow:inset 0 0 0 1px rgba(127,169,138,.35)}
.meldung.schlecht{background:rgba(224,122,106,.12);box-shadow:inset 0 0 0 1px rgba(224,122,106,.35)}
.kontakt-raster{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(min-width:56rem){ .kontakt-raster{grid-template-columns:1.5fr 1fr} }
.kontakt-seite{border-radius:var(--rund);padding:1.6rem;background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante);display:grid;gap:.8rem}
.kontakt-seite h2{font-size:1.25rem;letter-spacing:-.02em}
.kontakt-seite p{font-size:.9688rem;color:var(--text)}
.kontakt-seite a{color:var(--licht-hell);text-underline-offset:3px}
.einwilligung{display:flex;gap:.7rem;align-items:flex-start;font-size:.875rem;line-height:1.55;color:var(--text);cursor:pointer}
.einwilligung input{flex:none;width:1.1rem;height:1.1rem;margin-top:.2rem;accent-color:var(--licht)}
.einwilligung[data-fehler] span{color:#F0A294}
.einwilligung[data-fehler] span{color:#F0A294}
.fehler-haken{display:none;font-size:.8438rem;color:#F0A294;margin:.2rem 0 0 1.8rem}
.einwilligung[data-fehler] ~ .fehler-haken{display:block}

.kontakt-schreiben{margin-top:clamp(3rem,8vw,5rem)}
.kontakt-schreiben>*{max-width:48rem}
.kontakt-schreiben h2{font-family:var(--titel);font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.02em;margin:0 0 1.2rem}

/* ── Mehrstufiges Kontaktformular ──────────────────────────────
   Vier Schritte wie in der bisherigen Fassung. Ohne JavaScript stehen
   alle vier untereinander, deshalb steckt die Aufteilung im Skript. */
.stufen-leiste{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:0 0 1.6rem;padding:0;
  list-style:none;counter-reset:stufe}
.stufen-leiste li{counter-increment:stufe;display:flex;align-items:center;gap:.45rem;
  font-size:.8125rem;color:var(--grau)}
.stufen-leiste li::before{content:counter(stufe);display:grid;place-items:center;
  width:1.5rem;height:1.5rem;border-radius:50%;font-size:.75rem;font-weight:700;
  color:var(--grau);box-shadow:inset 0 0 0 1px var(--kante-hell)}
.stufen-leiste li[aria-current]{color:var(--creme)}
.stufen-leiste li[aria-current]::before{color:var(--auf-licht);background-image:var(--verlauf);box-shadow:none}
.stufen-leiste li.erledigt::before{color:var(--licht-hell);box-shadow:inset 0 0 0 1px var(--licht-tief)}
/* Auf schmalen Bildschirmen passen vier Schritte nicht in eine Zeile.
   Drei oben und einer allein darunter sieht schief aus, darum zwei
   mal zwei. */
@media(max-width:30rem){ .stufen-leiste{display:grid;grid-template-columns:1fr 1fr} }
.formstufe{border:0;margin:0;padding:0;display:grid;gap:1.1rem;min-width:0}
.formstufe[hidden]{display:none}
.formstufe legend{padding:0;font-family:var(--titel);font-size:clamp(1.3rem,2.4vw,1.7rem);
  letter-spacing:-.02em;color:var(--creme)}
.wahl-frage{font-size:.9375rem;font-weight:600;color:var(--creme)}
.eingabe-wahl{gap:.55rem}
.wahl{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .9rem;border-radius:12px;
  background:var(--grund);box-shadow:inset 0 0 0 1px rgba(243,216,218,.42);cursor:pointer;
  font-size:.9375rem;color:var(--text);transition:box-shadow .2s,color .2s}
.wahl:hover{color:var(--creme)}
.wahl input{flex:none;margin-top:.15rem;accent-color:var(--licht)}
.wahl:has(input:checked){color:var(--creme);box-shadow:inset 0 0 0 1.5px var(--licht)}
.eingabe-wahl[data-fehler] .wahl{box-shadow:inset 0 0 0 1.5px #E07A6A}
.eingabe-wahl .fehler{display:none;font-size:.8438rem;color:#F0A294}
.eingabe-wahl[data-fehler] .fehler{display:block}
.stufen-tasten{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
/* Das Skript blendet die gerade nicht passenden Knöpfe mit hidden aus.
   Ohne diese Zeile gewinnt das display aus der Knopf-Regel. */
.stufen-tasten .knopf[hidden]{display:none}