/* ============================================================
   EXKLUSIV VERANDA — Startseite
   Hell und ruhig. Das Video läuft in einem Telefonrahmen —
   es ist im Hochformat gedreht, und im Rahmen wirkt das
   gewollt statt beschnitten.
   ============================================================ */

.hero {
  position: relative;
  background: var(--bg);
  padding: clamp(112px, 12vw, 148px) 0 clamp(40px, 5vw, 72px);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  /* auto/auto plus zentrieren: sonst dehnt sich die Textspalte über den
     ganzen Rest und schiebt das Telefon an den Bildschirmrand */
  grid-template-columns: minmax(0, auto) auto;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
}

.hero__links {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 34px);
  min-width: 0;
  max-width: 620px;
}

/* ── Textspalte ─────────────────────────────────────────── */

.hero__claim {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hero__kicker::before {
  content: '';
  width: 34px;
  height: 2px;
  background: var(--rot);
  flex: none;
}

.hero__claim h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: .96;
  letter-spacing: -.035em;
  color: var(--text);
}

.hero__claim h1 .mask {
  display: block;
  overflow: hidden;
  padding-bottom: .07em;
}

.hero__claim h1 .mask > span {
  display: block;
  white-space: nowrap;
}

.hero__claim h1 em {
  font-style: normal;
  color: var(--rot);
}

.hero__lead {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 46ch;
}

.hero__lead b { color: var(--text); font-weight: 500; }

/* ── Konfigurator-Karte ─────────────────────────────────── */

.hero__usp {
  display: block;
  max-width: 480px;
  padding: 22px 24px 20px;
  background: var(--anthrazit);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.hero__usp:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 60px -30px rgba(46, 48, 51, .5);
}

.hero__usp-kopf {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero__usp-kopf b { color: var(--rot-hell); font-weight: 500; }
.hero__usp-kopf i { color: rgba(255, 255, 255, .48); font-style: normal; }

.hero__usp h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.14;
  letter-spacing: -.025em;
  margin-bottom: 8px;
}

.hero__usp p {
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .68);
}

.hero__usp-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.hero__rals { display: flex; gap: 6px; }

.hero__rals span {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, .28);
}

.hero__usp-mehr {
  font-size: .95rem;
  font-weight: 500;
  color: var(--rot-hell);
}

/* ── Kennzahlen ─────────────────────────────────────────── */

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line);
}

.hero__facts div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 0 0;
}

.hero__facts div + div {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.hero__facts b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 1.16rem;
  color: var(--text);
}

.hero__facts span {
  font-size: .86rem;
  color: var(--text-dim);
  line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════
   TELEFONRAHMEN

   Das Video ist im Hochformat gedreht. Statt es zu beschneiden,
   steht es in einem Telefon — dann liest man es als Aufnahme
   von der Baustelle und nicht als Layoutfehler.
   ══════════════════════════════════════════════════════════ */

.telefon {
  position: relative;
  width: clamp(232px, 23vw, 290px);
  aspect-ratio: 9 / 19.5;
  flex: none;
  border-radius: 44px;
  padding: 9px;
  background: linear-gradient(155deg, #4a4d52 0%, #1c1e21 26%, #131417 62%, #3a3d42 100%);
  box-shadow:
    0 2px 3px rgba(255, 255, 255, .22) inset,
    0 34px 70px -28px rgba(24, 26, 28, .55),
    0 6px 18px -8px rgba(24, 26, 28, .3);
}

.telefon__schirm {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: #0d0e10;
}

.telefon__schirm video,
.telefon__schirm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dynamic Island */
.telefon__insel {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 22px;
  border-radius: 12px;
  background: #08090a;
  z-index: 2;
}

/* Seitentasten */
.telefon__taste {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #26282c, #4a4d52);
}
.telefon__taste--laut  { left: -3px; top: 21%; height: 8%; }
.telefon__taste--leise { left: -3px; top: 31%; height: 8%; }
.telefon__taste--power { right: -3px; top: 25%; height: 11%; }

/* Bildschirmspiegelung — ein Hauch, sonst wirkt es wie ein Aufkleber */
.telefon__schirm::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(122deg,
    rgba(255, 255, 255, .16) 0%,
    rgba(255, 255, 255, .05) 18%,
    transparent 38%);
}

/* Bildunterschrift unter dem Telefon */
.telefon__cap {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.hero__rechts {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  padding-bottom: 8px;
}

/* Kurzfassung "Wer wir sind" unter dem Telefon */
.hero__ueber {
  max-width: 34ch;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.hero__ueber h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 9px;
}

.hero__ueber p {
  font-size: .89rem;
  line-height: 1.62;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.hero__ueber a {
  font-size: .89rem;
  font-weight: 500;
  color: var(--rot);
}

/* ══════════════════════════════════════════════════════════
   SCHMALE FENSTER
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(30px, 6vw, 46px);
  }

  /* Telefon zuerst — auf dem Handy ist das Video der Aufhänger */
  .hero__rechts { order: -1; gap: 0; }
  .telefon { width: min(248px, 62vw); }
  .hero__ueber { display: none; }   /* steht weiter unten vollständig */
}

@media (max-width: 620px) {
  .hero { padding-top: 100px; }
  .hero__claim h1 { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .hero__lead { font-size: 1rem; }
  .telefon { width: min(224px, 58vw); }

  .hero__facts { grid-template-columns: 1fr 1fr; }
  .hero__facts div { padding: 14px 12px 0 0; }
  .hero__facts div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hero__facts div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .hero__facts div:nth-child(n+3) { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .hero__facts b { font-size: 1.05rem; }
  .hero__facts span { font-size: .8rem; }

  .hero__usp h2 { font-size: 1.16rem; }

  /* Logo + Warenkorb + Konfigurator + Burger passen nicht
     nebeneinander — der Konfigurator-Button weicht */
  .nav-right .btn-solid { display: none; }
  .korb-knopf { padding: 11px 13px; }
  .korb-knopf .wort-korb { display: none; }
}

/* Reduzierte Bewegung: Poster statt Video */
@media (prefers-reduced-motion: reduce) {
  .telefon__schirm video { display: none; }
}

/* ══════════════════════════════════════════════════════════
   WER WIR SIND
   ══════════════════════════════════════════════════════════ */

.ueberuns { padding-block: clamp(70px, 9vw, 120px); background: var(--bg); }

.ueberuns-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

.ueberuns-text h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 14px 0 26px;
}

.ueberuns-text p {
  color: var(--text-dim);
  line-height: 1.72;
  margin-bottom: 15px;
  max-width: 54ch;
}

.ueberuns-text p b { color: var(--text); font-weight: 500; }

.ueberuns-fakten {
  display: grid;
  gap: 1px;
  margin-top: 30px;
  border-top: 1px solid var(--line);
}

.ueberuns-fakten div {
  display: grid;
  grid-template-columns: minmax(110px, 150px) 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.ueberuns-fakten b {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rot);
  padding-top: 3px;
}

.ueberuns-fakten span { color: var(--text-dim); font-size: .97rem; }

.ueberuns-bild { position: relative; margin: 0; }
.ueberuns-bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  box-shadow: var(--shadow);
}

@media (max-width: 900px) {
  .ueberuns-grid { grid-template-columns: 1fr; gap: 34px; }
  .ueberuns-bild { order: -1; }
  .ueberuns-bild img { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
  .ueberuns-fakten div { grid-template-columns: 1fr; gap: 3px; }
}

/* ══════════════════════════════════════════════════════════
   MITTEILUNG AUF DEM TELEFON

   Sieht aus wie eine iOS-Mitteilung, ist aber ein echter
   tel:-Link — auf dem Handy wählt ein Tippen sofort.
   ══════════════════════════════════════════════════════════ */

.mitteilung {
  position: absolute;
  z-index: 3;
  top: 44px;
  left: 8px;
  right: 8px;
  display: flex;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 17px;
  text-decoration: none;
  color: #16181a;
  background: rgba(250, 250, 252, .82);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .45);

  /* fährt ein wie eine echte Mitteilung */
  animation: mitteilung-rein .75s cubic-bezier(.16, 1, .3, 1) 1.6s both;
}

@keyframes mitteilung-rein {
  from { opacity: 0; transform: translateY(-26px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.mitteilung__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--rot);
  display: grid;
  place-items: center;
}

.mitteilung__icon svg { width: 19px; height: auto; }

.mitteilung__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.mitteilung__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mitteilung__kopf b {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.mitteilung__kopf i {
  font-style: normal;
  font-size: 10px;
  color: #7c8085;
  flex: none;
}

.mitteilung__leib {
  font-size: 11.5px;
  line-height: 1.32;
  color: #2b2e31;
}

.mitteilung__nr {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--rot);
}

@media (prefers-reduced-motion: reduce) {
  .mitteilung { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   AUFBAU — vier Etappen, scrollgesteuert

   Der Fortschritt kommt als eine typisierte CSS-Variable --p
   von 0 bis 1 auf .af-track. Alles Weitere rechnen die Kinder
   selbst in calc() aus — das JS schreibt einen Wert pro Frame
   statt acht Eigenschaften einzeln zu setzen.
   ══════════════════════════════════════════════════════════ */

@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.aufbau {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
}

.af-track { position: relative; height: 320svh; }

.af-buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  /* Die Navigation liegt fixiert darüber. Ohne diesen Abstand
     verschwindet die Kopfzeile der Sektion darunter. */
  padding-top: 76px;
}

/* ── Kopfzeile ──────────────────────────────────────────── */

.af-kopf {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(20px, 3vw, 36px) var(--gutter) 0;
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
  min-height: 0;
}

.af-kopf h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.45rem, 2.4vw, 2.15rem);
  letter-spacing: -.026em;
  line-height: 1.08;
}

/* ── Bühne ──────────────────────────────────────────────── */

.af-mitte {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(14px, 2.2vw, 26px) var(--gutter);
  display: grid;
  grid-template-columns: 1.42fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  min-height: 0;
}

/* ── Fotostapel ─────────────────────────────────────────── */

.af-fotos {
  position: relative;
  overflow: hidden;
  background: #E4E2DA;
  min-height: 0;
}

.af-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Trapezfunktion: 6 % Strecke auf, halten, 6 % ab — mit Überlappung,
   damit zwei Bilder sich kreuzen statt hart zu springen.
   min() aus Auf- und Abfahrt ergibt das Trapez, clamp begrenzt auf 0…1. */
.af-bild--1 { opacity: clamp(0, min(calc((var(--p) + .06) / .06), calc((.30 - var(--p)) / .06)), 1); }
.af-bild--2 { opacity: clamp(0, min(calc((var(--p) - .22) / .06), calc((.55 - var(--p)) / .06)), 1); }
.af-bild--3 { opacity: clamp(0, min(calc((var(--p) - .47) / .06), calc((.80 - var(--p)) / .06)), 1); }
.af-bild--4 { opacity: clamp(0, min(calc((var(--p) - .72) / .06), calc((1.06 - var(--p)) / .06)), 1); }

/* das erste Bild zieht langsam heran */
.af-bild--1 { scale: calc(1 + .04 * (1 - clamp(0, calc((.30 - var(--p)) / .30), 1))); }

/* Fahne oben links */
.af-fahne {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 15px;
  background: var(--rot);
  color: #fff;
}

.af-fahne span:first-child {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  opacity: .82;
}

.af-fahne span:last-child { font-size: .88rem; font-weight: 500; }

.af-cta {
  position: absolute;
  right: 16px;
  bottom: 22px;
  z-index: 2;
  padding: 12px 17px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s var(--ease), color .25s var(--ease);
}

.af-cta:hover { background: var(--rot); color: #fff; }

/* Fortschritt als Maßband — passt zu einem Betrieb, der in
   Millimetern denkt, und ist kein beliebiger Ladebalken */
.af-fortschritt {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: 14px;
  background: rgba(24, 26, 28, .34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Teilstriche */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, .5) 0 1px,
    transparent 1px 100%
  );
  background-size: 2.5% 6px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}

.af-fortschritt i {
  display: block;
  height: 100%;
  width: calc(var(--p) * 100%);
  background: var(--rot);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, .55) 0 1px,
    transparent 1px 100%
  );
  background-size: 2.5% 6px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}

/* ── Etappenliste ───────────────────────────────────────── */

.af-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 20px);
  min-height: 0;
}

.af-etappe {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  padding-left: 18px;
  border-left: 2px solid;
}

.af-nr {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--rot);
  padding-top: 5px;
}

.af-inhalt h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  letter-spacing: -.022em;
  line-height: 1.2;
}

/* Beschreibung klappt nur bei der aktiven Etappe auf. Ständen alle
   vier offen, liefe die Liste auf niedrigen Fenstern aus der Bühne. */
.af-mehr {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.af-mehr p {
  margin-top: 7px;
  font-size: .91rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.af-tech {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--text-mute);
}

/* Aktivität je Etappe — dieselbe Trapezform, engere Flanken */
.af-etappe--1 { --a: min(calc((var(--p) + .06) / .05), calc((.28 - var(--p)) / .05)); }
.af-etappe--2 { --a: min(calc((var(--p) - .25) / .05), calc((.53 - var(--p)) / .05)); }
.af-etappe--3 { --a: min(calc((var(--p) - .50) / .05), calc((.78 - var(--p)) / .05)); }
.af-etappe--4 { --a: min(calc((var(--p) - .75) / .05), calc((1.06 - var(--p)) / .05)); }

.af-etappe {
  border-left-color: rgba(200, 32, 42, clamp(0, var(--a), 1));
  opacity: clamp(.4, var(--a), 1);
}

.af-etappe .af-mehr {
  max-height: calc(210px * clamp(0, var(--a), 1));
  opacity: clamp(0, var(--a), 1);
}

/* ── Fußzeile ───────────────────────────────────────────── */

.af-fuss {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 15px var(--gutter);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .92rem;
  color: var(--text-dim);
}

/* ══════════════════════════════════════════════════════════
   AUFBAU AM HANDY

   Kein Sticky, kein Scrub. Vier Fotos hintereinander zu
   scrollen ist auf dem Handy die bessere Lösung als eine
   gequetschte Bühne.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .af-track { height: auto; }

  .af-buehne {
    position: static;
    height: auto;
    display: block;
    padding-top: 0;
  }

  .af-kopf { padding-block: 46px 0; }

  .af-mitte { display: block; padding-block: 24px; }

  /* position bleibt relative — sonst verlieren die absolut gesetzten
     Bilder ihren Bezug und legen sich über die ganze Seite */
  .af-fotos { aspect-ratio: 4 / 3; margin-bottom: 26px; }

  /* Auf dem Handy laufen alle Etappen offen */
  .af-etappe { opacity: 1; border-left-color: var(--rot); }
  .af-etappe .af-mehr { max-height: none; opacity: 1; }

  .af-liste { gap: 22px; }
  .af-fuss { padding-block: 22px 46px; }
  .af-fuss .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .af-bild--1 { scale: 1; }
}

/* ══════════════════════════════════════════════════════════
   DOCK IM TELEFON

   Drei App-Kacheln unten im Display, wie auf einem iOS-Homescreen.
   Es sind echte Links, kein Bild: ein Tippen öffnet den Kanal.
   ══════════════════════════════════════════════════════════ */

.dock {
  position: absolute;
  z-index: 3;
  left: 9px;
  right: 9px;
  bottom: 22px;
  display: flex;
  justify-content: center;
  gap: 13px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(248, 248, 250, .30);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.dock__app {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .45);
  transition: transform .22s var(--ease-out);
}

.dock__app:hover,
.dock__app:focus-visible { transform: translateY(-4px) scale(1.06); }

.dock__app svg { width: 23px; height: 23px; }

.dock__app--tiktok { background: #0b0b0d; }

/* Instagram trägt seinen Verlauf, sonst ist es nicht erkennbar */
.dock__app--instagram {
  background:
    radial-gradient(circle at 28% 106%, #FDF497 0%, #FD5949 45%, #D6249F 68%, #285AEB 100%);
}

.dock__app--facebook { background: #1877F2; }

/* Symbole ohne Profil zeigen beim Hovern/Drücken einen Hinweis.
   Reines CSS, kein Skript. */
.dock__app--bald { position: relative; cursor: default; }

.dock__app--bald::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--anthrazit);
  color: #fff;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}

/* Kleines Dreieck nach unten */
.dock__app--bald::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--anthrazit);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}

.dock__app--bald:hover::after,
.dock__app--bald:hover::before,
.dock__app--bald:focus-visible::after,
.dock__app--bald:focus-visible::before,
.dock__app--bald:active::after,
.dock__app--bald:active::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Home-Indikator */
.telefon__strich {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 34%;
  height: 4px;
  border-radius: 3px;
  /* fast deckend: bei .72 nahm der Strich die Farbe des Videos an
     und wirkte je nach Bildinhalt rot statt weiß */
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 6px rgba(0, 0, 0, .28);
}

/* Auf schmalen Telefonen wird das Dock proportional kleiner */
@media (max-width: 620px) {
  .dock { gap: 10px; padding: 8px 10px; bottom: 19px; }
  .dock__app { width: 36px; height: 36px; border-radius: 9px; }
  .dock__app svg { width: 20px; height: 20px; }
}

/* ══════════════════════════════════════════════════════════
   AUFBAU AM HANDY — Wischen statt Scrollen

   Auf dem Desktop steuert der Scrollfortschritt die Etappen.
   Am Handy gibt es diesen Scrub nicht, dort lagen bisher alle
   vier Fotos übereinander und nur das erste war sichtbar.
   Stattdessen jetzt ein echter Wischer mit Scroll-Snap: das
   Wischen macht der Browser selbst, das JavaScript hält nur
   Zähler, Text und Punkte im Gleichschritt.
   ══════════════════════════════════════════════════════════ */

.af-pfeil, .af-punkte { display: none; }

@media (max-width: 900px) {

  .af-fotos {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .af-fotos::-webkit-scrollbar { display: none; }

  /* aus dem Stapel wird eine Reihe */
  .af-bild {
    position: relative;
    inset: auto;
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
    opacity: 1;          /* überschreibt die --p-Rechnung des Desktops */
    scale: 1;
  }

  /* Fahne und Fortschritt bleiben über dem Wischer stehen */
  .af-fahne,
  .af-fortschritt,
  .af-cta { position: absolute; }
  .af-cta { right: 12px; bottom: 26px; }

  .af-pfeil {
    position: absolute;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px;                 /* Tippfläche mindestens 44 px */
    height: 44px;
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    color: var(--text);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px -4px rgba(24, 26, 28, .45);
    cursor: pointer;
  }

  .af-pfeil--zurueck { left: 10px; }
  .af-pfeil--vor { right: 10px; }
  .af-pfeil[disabled] { opacity: .35; pointer-events: none; }

  .af-punkte {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin: 16px 0 4px;
  }

  .af-punkte button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--line-hi);
    cursor: pointer;
    transition: background .25s var(--ease), transform .25s var(--ease);
  }

  .af-punkte button.aktiv { background: var(--rot); transform: scale(1.35); }

  /* Nur die Etappe zum aktuellen Foto steht offen. Alle vier
     untereinander wären am Handy eine Textwand. */
  .af-etappe { display: none; }
  .af-etappe.aktiv { display: grid; }
  .af-liste { gap: 0; margin-top: 4px; }
}

/* ══════════════════════════════════════════════════════════
   KONTAKTFORMULAR
   ══════════════════════════════════════════════════════════ */

.kontakt { padding-block: clamp(70px, 9vw, 120px); background: var(--bg-alt); border-top: 1px solid var(--line); }

.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

.kontakt-text h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 14px 0 20px;
}

.kontakt-text p { color: var(--text-dim); line-height: 1.7; max-width: 44ch; }

.kontakt-daten {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px 20px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.kontakt-daten dt {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding-top: 3px;
}

.kontakt-daten dd { margin: 0; color: var(--text); line-height: 1.5; }
.kontakt-daten a { color: var(--text); }
.kontakt-daten a:hover { color: var(--rot); }

/* ── Formular ───────────────────────────────────────────── */

.kontakt-form {
  background: var(--bg);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kf-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kf-feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.kf-feld label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.kf-feld input,
.kf-feld textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-hi);
  padding: 13px 14px;
  border-radius: 0;
  width: 100%;
  transition: border-color .2s var(--ease);
}

.kf-feld input:focus,
.kf-feld textarea:focus { outline: none; border-color: var(--rot); }
.kf-feld textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

/* Fehlende Pflichtfelder werden beim Absenden so markiert */
.kf-feld.fehlt input,
.kf-feld.fehlt textarea { border-color: var(--rot); }

.kf-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--text-dim);
  cursor: pointer;
}
.kf-check input { margin-top: 3px; flex: none; accent-color: var(--rot); }
.kf-check a { color: var(--rot); }
.kf-check.fehlt { color: var(--rot); }

.kf-meldung {
  padding: 12px 14px;
  background: rgba(200, 32, 42, .06);
  border-left: 3px solid var(--rot);
  font-size: .92rem;
  line-height: 1.55;
}
.kf-meldung a { color: var(--rot); font-weight: 500; }

.kontakt-form .btn { align-self: flex-start; }

.kf-danke {
  padding: 18px 20px;
  background: var(--bg-alt);
  border-left: 3px solid var(--rot);
}
.kf-danke b { display: block; margin-bottom: 6px; font-size: 1.05rem; }
.kf-danke p { font-size: .95rem; line-height: 1.6; color: var(--text-dim); }
.kf-danke span { font-family: var(--mono); font-size: .82rem; color: var(--text-mute); }

@media (max-width: 900px) {
  .kontakt-grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 560px) {
  .kf-reihe { grid-template-columns: 1fr; }
  .kontakt-daten { grid-template-columns: 1fr; gap: 3px 0; }
  .kontakt-daten dd { margin-bottom: 12px; }
  .kontakt-form .btn { width: 100%; justify-content: center; }
}

/* App-Symbol in der Mitteilung: das Zeichen ist anthrazit, auf dem
   roten Feld braucht es Weiß. brightness(0) macht es schwarz,
   invert(1) daraus Weiß - ohne eine zweite Bilddatei. */
.mitteilung__icon img {
  width: 20px;
  height: auto;
  filter: brightness(0) invert(1);
}