/* ==========================================================================
   Landingpage. Setzt tokens.css voraus.
   ========================================================================== */

/* ------------------------------------------------------------- Kopfzeile */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--rf-tempo), background-color var(--rf-tempo);
}

.kopf[data-gescrollt="ja"] {
  border-bottom-color: var(--rf-linie);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rf-a-4);
  min-height: 72px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--rf-a-3);
  text-decoration: none;
}

.marke__bild {
  width: auto;
  height: 46px;
  flex: none;
}

.marke__zusatz {
  padding-left: var(--rf-a-3);
  border-left: 1px solid var(--rf-linie);
  font-family: var(--rf-font-titel);
  font-size: var(--rf-t-xs);
  font-weight: 700;
  color: var(--rf-text-leise);
  line-height: 1.2;
}

/* Sternwertung. Die gefuellte Reihe liegt ueber der leeren und wird
   auf den Prozentwert der Bewertung beschnitten. */
.sterne-anzeige {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.sterne-anzeige__leer { opacity: 0.28; }

.sterne-anzeige__voll {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--rf-rot);
}

.sterne-anzeige--hell .sterne-anzeige__voll { color: var(--rf-rot-hell); }

.wertung {
  display: flex;
  align-items: center;
  gap: var(--rf-a-3);
  font-size: var(--rf-t-s);
}

.kopf__aktionen {
  display: flex;
  align-items: center;
  gap: var(--rf-a-4);
}

.kopf__link {
  display: none;
  font-size: var(--rf-t-s);
  font-weight: 600;
  text-decoration: none;
  color: var(--rf-text-leise);
}

.kopf__link:hover { color: var(--rf-text); }

.kopf .rf-knopf {
  min-height: 46px;
  padding-inline: var(--rf-a-5);
  font-size: var(--rf-t-s);
}

@media (max-width: 480px) {
  .marke__zusatz { display: none; }
  .marke__bild { height: 40px; }
}

@media (min-width: 720px) {
  .kopf__link { display: inline-block; }
}

/* ------------------------------------------------------------------ Hero */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--rf-nacht);
  color: var(--rf-text-invers);
  padding-block: var(--rf-a-6) var(--rf-a-8);
}

/* Sehr dezenter roter Lichtschein, kein Farbverlauf ueber die ganze Flaeche. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 60% at 25% 40%, rgba(189, 18, 18, 0.42), transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 75%);
  pointer-events: none;
}

.hero__innen {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--rf-a-8);
  align-items: center;
}

.hero__text { max-width: 42rem; }

/* Etwas kleiner als der Standardtitel, damit Bullets und Knopf ohne Scrollen
   in den ersten Bildschirm passen. */
.hero h1 {
  font-size: clamp(2rem, 3.2vw + 1rem, 3.25rem);
  color: var(--rf-text-invers);
  margin-bottom: var(--rf-a-4);
}

.hero__vorspann {
  font-size: var(--rf-t-l);
  color: rgba(255, 255, 255, 0.74);
  max-width: 34rem;
  margin-bottom: var(--rf-a-5);
}

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-a-3);
  margin-bottom: var(--rf-a-2);
}

.hero .rf-knopf--offen {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--rf-text-invers);
}

.hero .rf-knopf--offen:hover { border-color: rgba(255, 255, 255, 0.7); }

.hero__zusagen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-a-2) var(--rf-a-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--rf-t-s);
  color: rgba(255, 255, 255, 0.66);
}

.hero__zusagen li {
  display: flex;
  align-items: center;
  gap: var(--rf-a-2);
}

.hero__haken {
  flex: none;
  color: var(--rf-rot-hell);
}

.hero__hinweis {
  margin-top: var(--rf-a-4);
  font-size: var(--rf-t-xs);
  color: rgba(255, 255, 255, 0.45);
  max-width: 46ch;
}

@media (min-width: 980px) {
  .hero__innen { grid-template-columns: 1.05fr 0.95fr; }
}

/* Auf dem Handy zaehlt jeder Pixel, der Knopf soll in den ersten Bildschirm. */
@media (max-width: 640px) {
  .hero { padding-block: var(--rf-a-5) var(--rf-a-7); }
  .hero__innen { gap: var(--rf-a-6); }
}

/* Nutzenpunkte im Hero. Ergebnis zuerst, Erklaerung dahinter. */

.vorteile {
  list-style: none;
  margin: 0 0 var(--rf-a-5);
  padding: 0;
  display: grid;
  gap: var(--rf-a-3);
  max-width: 34rem;
}

.vorteile li {
  display: flex;
  align-items: flex-start;
  gap: var(--rf-a-3);
  font-size: var(--rf-t-s);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}

.vorteile strong {
  display: block;
  font-family: var(--rf-font-titel);
  font-size: var(--rf-t-m);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rf-text-invers);
  margin-bottom: 2px;
}

.vorteile__haken {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(189, 18, 18, 0.22);
  color: var(--rf-rot-hell);
}

.hero__mikro {
  font-size: var(--rf-t-xs);
  color: rgba(255, 255, 255, 0.5);
  margin: var(--rf-a-3) 0 var(--rf-a-5);
}

/* Ablauf in drei Schritten, eine Reihe, bewusst knapp. */

.ablauf {
  display: grid;
  gap: var(--rf-a-5);
  margin-bottom: var(--rf-a-7);
}

.ablauf__punkt {
  display: flex;
  align-items: flex-start;
  gap: var(--rf-a-4);
}

.ablauf__nr {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(189, 18, 18, 0.08);
  color: var(--rf-rot);
  font-family: var(--rf-font-titel);
  font-weight: 700;
  font-size: var(--rf-t-s);
}

.ablauf__punkt strong {
  display: block;
  font-family: var(--rf-font-titel);
  font-size: var(--rf-t-m);
  margin-bottom: 2px;
}

.ablauf__punkt span {
  font-size: var(--rf-t-s);
  color: var(--rf-text-leise);
}

@media (min-width: 820px) {
  .ablauf { grid-template-columns: repeat(3, 1fr); gap: var(--rf-a-6); }
}

/* Statische Vorschau der Chat-Oberflaeche */

.vorschau {
  background: var(--rf-weiss);
  color: var(--rf-text);
  border-radius: var(--rf-r-l);
  box-shadow: var(--rf-schatten-3);
  overflow: hidden;
  max-width: 26rem;
  margin-inline: auto;
  width: 100%;
}

.vorschau__kopf {
  display: flex;
  align-items: center;
  gap: var(--rf-a-3);
  padding: var(--rf-a-4) var(--rf-a-5);
  border-bottom: 1px solid var(--rf-linie);
}

.vorschau__punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2fb457;
  flex: none;
}

.vorschau__titel {
  font-family: var(--rf-font-titel);
  font-weight: 700;
  font-size: var(--rf-t-s);
}

.vorschau__status {
  font-size: var(--rf-t-xs);
  color: var(--rf-text-leise);
}

/* Feste Hoehe, damit die Seite beim Tippen nicht springt. Aeltere Zeilen
   laufen oben aus dem Bild. */
.vorschau__verlauf {
  height: 320px;
  padding: var(--rf-a-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--rf-a-4);
  overflow: hidden;
  transition: opacity 320ms ease;
}

.vorschau__verlauf > * {
  flex: none;
  animation: vorschau-rein 260ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes vorschau-rein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Blinkender Strich hinter dem Text, solange der Bot schreibt */
.vorschau__strich {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--rf-rot);
  animation: vorschau-blinken 1s steps(2, start) infinite;
}

@keyframes vorschau-blinken {
  to { visibility: hidden; }
}

/* Drei Punkte, bevor die Antwort kommt */
.vorschau__tippt {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  align-items: center;
  height: 22px;
  padding-left: var(--rf-a-4);
  border-left: 2px solid var(--rf-rot);
}

.vorschau__tippt span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rf-grau-300);
  animation: vorschau-huepf 1.1s infinite ease-in-out;
}

.vorschau__tippt span:nth-child(2) { animation-delay: 0.16s; }
.vorschau__tippt span:nth-child(3) { animation-delay: 0.32s; }

@keyframes vorschau-huepf {
  0%, 60%, 100% { transform: none; background: var(--rf-grau-300); }
  30% { transform: translateY(-4px); background: var(--rf-rot); }
}

.vorschau__bot {
  font-size: var(--rf-t-s);
  border-left: 2px solid var(--rf-rot);
  padding-left: var(--rf-a-4);
}

.vorschau__kunde {
  align-self: flex-end;
  max-width: 85%;
  background: var(--rf-schwarz);
  color: var(--rf-text-invers);
  font-size: var(--rf-t-xs);
  font-weight: 600;
  padding: var(--rf-a-2) var(--rf-a-4);
  border-radius: var(--rf-r-pill);
}

.vorschau__preis {
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-m);
  padding: var(--rf-a-4) var(--rf-a-5);
  background: var(--rf-grau-50);
}

.vorschau__zahl {
  font-family: var(--rf-font-titel);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.vorschau__fussnote {
  font-size: var(--rf-t-xs);
  color: var(--rf-text-leise);
  margin-top: var(--rf-a-1);
}

/* ------------------------------------------------------------ Kennzahlen */

.kennzahlen {
  border-bottom: 1px solid var(--rf-linie);
  background: var(--rf-weiss);
}

.kennzahlen__gitter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rf-a-5) var(--rf-a-4);
  padding-block: var(--rf-a-7);
}

.kennzahl__wert {
  font-family: var(--rf-font-titel);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

.kennzahl__wort {
  font-size: var(--rf-t-s);
  color: var(--rf-text-leise);
  margin-top: var(--rf-a-2);
}

@media (min-width: 760px) {
  .kennzahlen__gitter { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------- Bereich */

.bereich { padding-block: var(--rf-a-9); }

.bereich--ruhig { background: var(--rf-flaeche-ruhig); }

.bereich--rot {
  background: var(--rf-rot);
  color: var(--rf-text-invers);
}

.bereich--rot h2 { color: var(--rf-text-invers); }

.bereich__kopf {
  max-width: 42rem;
  margin-bottom: var(--rf-a-7);
}

.bereich--zentriert .bereich__kopf {
  margin-inline: auto;
  text-align: center;
}

.bereich--zentriert .rf-vorspann { margin-inline: auto; }

/* -------------------------------------------------------------- Schritte */

.schritte {
  display: grid;
  gap: var(--rf-a-5);
}

.schritt {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--rf-r-m);
  padding: var(--rf-a-6) var(--rf-a-5) var(--rf-a-5);
}

.schritt__nummer {
  font-family: var(--rf-font-titel);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: var(--rf-a-3);
}

.schritt h3 {
  font-size: 1.25rem;
  margin-bottom: var(--rf-a-2);
}

.schritt p {
  font-size: var(--rf-t-s);
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

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

/* ---------------------------------------------------------------- Karten */

.karten {
  display: grid;
  gap: var(--rf-a-5);
}

.karte {
  background: var(--rf-weiss);
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-m);
  padding: var(--rf-a-6) var(--rf-a-5);
  transition: border-color var(--rf-tempo), box-shadow var(--rf-tempo), transform var(--rf-tempo);
}

.karte:hover {
  border-color: var(--rf-grau-300);
  box-shadow: var(--rf-schatten-2);
  transform: translateY(-2px);
}

.karte__zeichen {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--rf-r-s);
  background: rgba(189, 18, 18, 0.08);
  color: var(--rf-rot);
  margin-bottom: var(--rf-a-4);
}

.karte h3 {
  font-size: 1.125rem;
  margin-bottom: var(--rf-a-2);
}

.karte p {
  font-size: var(--rf-t-s);
  color: var(--rf-text-leise);
  margin: 0;
}

@media (min-width: 720px) {
  .karten { grid-template-columns: repeat(2, 1fr); }
}

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

/* ------------------------------------------------------------ Leistungen */

.leistungen {
  display: grid;
  gap: var(--rf-a-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.leistung {
  display: flex;
  align-items: flex-start;
  gap: var(--rf-a-3);
  padding: var(--rf-a-4);
  background: var(--rf-weiss);
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-s);
  font-size: var(--rf-t-s);
}

.leistung strong {
  display: block;
  font-family: var(--rf-font-titel);
  font-size: var(--rf-t-m);
}

.leistung span { color: var(--rf-text-leise); }

.leistung__haken {
  flex: none;
  color: var(--rf-rot);
  margin-top: 4px;
}

/* ---------------------------------------------------------------- Gebiet */

.gebiet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-a-2);
  list-style: none;
  margin: 0 0 var(--rf-a-5);
  padding: 0;
}

.gebiet li {
  padding: var(--rf-a-2) var(--rf-a-4);
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-pill);
  background: var(--rf-weiss);
  font-size: var(--rf-t-s);
  color: var(--rf-text-leise);
}

/* ------------------------------------------------------------- Preisband */

.preisband {
  display: grid;
  gap: var(--rf-a-6);
  align-items: center;
}

.preisband__zahl {
  font-family: var(--rf-font-titel);
  font-weight: 800;
  font-size: var(--rf-t-preis);
  letter-spacing: -0.03em;
  line-height: 1;
}

.preisband__karte {
  background: var(--rf-weiss);
  color: var(--rf-text);
  border-radius: var(--rf-r-m);
  padding: var(--rf-a-6);
  box-shadow: var(--rf-schatten-2);
}

.preisband__zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--rf-a-4);
  padding-block: var(--rf-a-3);
  border-bottom: 1px solid var(--rf-linie);
  font-size: var(--rf-t-s);
}

.preisband__zeile:last-of-type { border-bottom: 0; }

.preisband__zeile strong { font-family: var(--rf-font-titel); }

@media (min-width: 900px) {
  .preisband {
    grid-template-columns: 1fr 1fr;
    gap: var(--rf-a-8);
  }
}

/* ------------------------------------------------------------------- FAQ */

.faq {
  max-width: var(--rf-breite-schmal);
  margin-inline: auto;
}

.faq__eintrag { border-bottom: 1px solid var(--rf-linie); }

.faq__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rf-a-4);
  width: 100%;
  min-height: 64px;
  padding: var(--rf-a-4) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--rf-font-titel);
  font-weight: 700;
  font-size: var(--rf-t-m);
  letter-spacing: -0.01em;
  cursor: pointer;
}

.faq__zeichen {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rf-linie);
  border-radius: 50%;
  color: var(--rf-rot);
  transition: transform var(--rf-tempo), background-color var(--rf-tempo), color var(--rf-tempo);
}

.faq__frage[aria-expanded="true"] .faq__zeichen {
  transform: rotate(45deg);
  background: var(--rf-rot);
  color: var(--rf-text-invers);
  border-color: var(--rf-rot);
}

.faq__antwort {
  display: none;
  padding-bottom: var(--rf-a-5);
  font-size: var(--rf-t-s);
  color: var(--rf-text-leise);
  max-width: 62ch;
}

.faq__antwort[data-offen="ja"] { display: block; }

/* ------------------------------------------------------------- Abschluss */

.abschluss {
  background: var(--rf-nacht);
  color: var(--rf-text-invers);
  border-radius: var(--rf-r-l);
  padding: var(--rf-a-8) var(--rf-a-5);
  text-align: center;
}

.abschluss h2 { color: var(--rf-text-invers); }

.abschluss p {
  color: rgba(255, 255, 255, 0.7);
  margin-inline: auto;
}

/* -------------------------------------------------------------- Fusszeile */

.fuss {
  background: var(--rf-weiss);
  border-top: 1px solid var(--rf-linie);
  padding-block: var(--rf-a-7) var(--rf-a-6);
  font-size: var(--rf-t-s);
  color: var(--rf-text-leise);
}

.fuss__gitter {
  display: grid;
  gap: var(--rf-a-6);
  margin-bottom: var(--rf-a-6);
}

.fuss h3 {
  font-size: var(--rf-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rf-text);
  margin-bottom: var(--rf-a-3);
}

.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rf-a-2);
}

.fuss a { text-decoration: none; }

.fuss a:hover {
  color: var(--rf-text);
  text-decoration: underline;
}

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-a-3) var(--rf-a-5);
  justify-content: space-between;
  padding-top: var(--rf-a-5);
  border-top: 1px solid var(--rf-linie);
  font-size: var(--rf-t-xs);
}

/* Impressum und Datenschutz stehen ganz unten, Pflichtangaben. */
.fuss__recht {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-a-2) var(--rf-a-4);
  align-items: center;
}

.fuss__recht a {
  font-weight: 600;
  color: var(--rf-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.fuss__bild { height: 56px; width: auto; margin-bottom: var(--rf-a-3); }

@media (min-width: 760px) {
  .fuss__gitter { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Der feste CTA auf dem Handy darf die Pflichtangaben nicht verdecken. */
@media (max-width: 819px) {
  .fuss { padding-bottom: calc(var(--rf-a-8) + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------- Rechner-Overlay */

/* Der Chat liegt in einem Rahmen ueber der Seite. Er wird erst geladen, wenn
   der Kunde den Knopf drueckt, vorher kostet er nichts. */

.rechner {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}

.rechner[data-offen="ja"] { display: block; }

.rechner__hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 3, 0.6);
  animation: rechner-auf 200ms ease both;
}

.rechner__fenster {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: var(--rf-weiss);
  overflow: hidden;
  animation: rechner-hoch 240ms cubic-bezier(0.2, 0, 0, 1) both;
}

.rechner__rahmen {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.rechner__zu {
  position: absolute;
  top: var(--rf-a-4);
  right: var(--rf-a-4);
  z-index: 2;
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--rf-weiss);
  cursor: pointer;
}

.rechner__zu:hover { background: rgba(255, 255, 255, 0.26); }

@media (min-width: 680px) {
  .rechner__fenster {
    width: min(100% - 2 * var(--rf-a-6), 640px);
    height: min(100% - 2 * var(--rf-a-6), 880px);
    border-radius: var(--rf-r-l);
    box-shadow: var(--rf-schatten-3);
  }

  /* Auf dem Desktop liegt neben dem Fenster Platz, dort steht das Kreuz.
     Auf dem Handy reicht das Kreuz im Kopf des Chats. */
  .rechner__zu { display: grid; }
}

@keyframes rechner-auf {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rechner-hoch {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

body.rechner-offen { overflow: hidden; }

/* --------------------------------------------------- Mobiler Abschluss-CTA */

/* Auf dem Handy dauerhaft sichtbar, damit der Rechner ohne Scrollen
   erreichbar ist. Kein Einblenden erst nach dem Hero mehr. */
.mobil-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: var(--rf-a-3) var(--rf-a-4) calc(var(--rf-a-3) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rf-linie);
  transform: translateY(0);
}

/* Damit die feste Leiste am Ende nichts verdeckt. */
@media (max-width: 819px) {
  body { padding-bottom: 5rem; }
}

@media (min-width: 820px) {
  .mobil-cta { display: none; }
  body { padding-bottom: 0; }
}

/* Einblenden beim Scrollen */

.auf {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.2, 0, 0, 1);
}

.auf[data-sichtbar="ja"] {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------ Orte im Hero */

.orte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-a-2);
  margin: 0 0 var(--rf-a-5);
  padding: 0;
  list-style: none;
}

.orte li {
  display: inline-flex;
  align-items: center;
  gap: var(--rf-a-2);
  padding: 6px var(--rf-a-4) 6px var(--rf-a-3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--rf-r-pill);
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--rf-t-s);
  font-weight: 600;
  color: var(--rf-text-invers);
}

.orte svg { color: var(--rf-rot-hell); }

/* ------------------------------------------------------------------- Weg

   Vier Schritte mit laufenden Pfeilen. Die Zeichen leuchten nacheinander
   auf, ein Durchlauf dauert 8 Sekunden. prefers-reduced-motion stellt alles
   still (tokens.css).
*/

.weg-bereich,
.verteil-bereich { padding-block: var(--rf-a-8); }

.weg-kopf {
  max-width: 40rem;
  margin: 0 auto var(--rf-a-7);
  text-align: center;
}

.weg-kopf h2 { font-size: var(--rf-t-h2); margin-bottom: var(--rf-a-3); }

.weg-kopf__vorspann {
  font-size: var(--rf-t-l);
  color: var(--rf-text-leise);
}

.weg {
  --weg-luecke: var(--rf-a-7);
  --weg-zeichen: 64px;
  display: grid;
  gap: var(--weg-luecke);
  max-width: 26rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.weg__schritt {
  position: relative;
  display: grid;
  grid-template-columns: var(--weg-zeichen) 1fr;
  gap: var(--rf-a-4);
  align-items: center;
}

.weg__zeichen {
  width: var(--weg-zeichen);
  height: var(--weg-zeichen);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rf-weiss);
  color: var(--rf-rot);
  box-shadow: var(--rf-schatten-2);
  animation: weg-puls 8s infinite;
}

.weg__schritt:nth-child(2) .weg__zeichen { animation-delay: 2s; }
.weg__schritt:nth-child(3) .weg__zeichen { animation-delay: 4s; }
.weg__schritt:nth-child(4) .weg__zeichen { animation-delay: 6s; }

@keyframes weg-puls {
  0%, 24%, 100% {
    background: var(--rf-weiss);
    color: var(--rf-rot);
    transform: scale(1);
  }
  4%, 20% {
    background: var(--rf-rot);
    color: var(--rf-weiss);
    transform: scale(1.08);
  }
}

.weg__text strong {
  display: block;
  font-family: var(--rf-font-titel);
  font-size: var(--rf-t-m);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.weg__text span {
  display: block;
  font-size: var(--rf-t-s);
  line-height: 1.5;
  color: var(--rf-text-leise);
}

/* Pfeil zum naechsten Schritt. Auf dem Handy senkrecht unter dem Zeichen,
   ab 820px waagerecht. Die Striche laufen ueber ein verschobenes Muster. */
.weg__pfeil {
  position: absolute;
  left: calc(var(--weg-zeichen) / 2 - 1px);
  top: calc(50% + var(--weg-zeichen) / 2 + 8px);
  height: calc(50% + var(--weg-luecke) - var(--weg-zeichen) / 2 - 16px);
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--rf-rot) 0 6px, transparent 6px 12px);
  background-size: 2px 12px;
  animation: fluss-senkrecht 0.9s linear infinite;
}

.weg__pfeil::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--rf-rot);
  border-bottom: 2px solid var(--rf-rot);
  transform: translateX(-50%) rotate(45deg);
}

@keyframes fluss-senkrecht { to { background-position: 0 12px; } }
@keyframes fluss-waagerecht { to { background-position: 12px 0; } }

@media (min-width: 820px) {
  .weg {
    --weg-luecke: var(--rf-a-5);
    max-width: none;
    grid-template-columns: repeat(4, 1fr);
  }

  .weg__schritt {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    align-content: start;
    text-align: center;
  }

  .weg__text span { max-width: 22ch; margin-inline: auto; }

  .weg__pfeil {
    top: calc(var(--weg-zeichen) / 2 - 1px);
    left: calc(50% + var(--weg-zeichen) / 2 + 12px);
    width: calc(100% + var(--weg-luecke) - var(--weg-zeichen) - 24px);
    height: 2px;
    background: repeating-linear-gradient(to right, var(--rf-rot) 0 6px, transparent 6px 12px);
    background-size: 12px 2px;
    animation-name: fluss-waagerecht;
  }

  .weg__pfeil::after {
    left: auto;
    right: 0;
    top: 50%;
    bottom: auto;
    border-bottom: 0;
    border-top: 2px solid var(--rf-rot);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* ------------------------------------------------------------- Verteiler

   Start-PLZ, Rechner, Gabel, zwei Teams. landing.js setzt data-ziel und
   data-wechsel, der Rest ist CSS.
*/

.verteiler {
  display: grid;
  justify-items: center;
  max-width: 1000px;
  margin: 0 auto var(--rf-a-7);
}

.verteiler__start {
  min-width: 14rem;
  padding: var(--rf-a-4) var(--rf-a-5);
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-m);
  background: var(--rf-weiss);
  box-shadow: var(--rf-schatten-2);
  text-align: center;
}

.verteiler__etikett {
  display: block;
  font-family: var(--rf-font-titel);
  font-size: var(--rf-t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rf-text-leise);
}

.verteiler__plz {
  display: block;
  font-family: var(--rf-font-titel);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.verteiler__ort {
  display: block;
  font-size: var(--rf-t-s);
  color: var(--rf-text-leise);
}

.verteiler__plz,
.verteiler__ort {
  transition: opacity 260ms ease, transform 260ms ease;
}

.verteiler[data-wechsel="ja"] .verteiler__plz,
.verteiler[data-wechsel="ja"] .verteiler__ort {
  opacity: 0;
  transform: translateY(-8px);
}

.verteiler__leitung {
  width: 2px;
  height: 40px;
  background: repeating-linear-gradient(to bottom, var(--rf-rot) 0 6px, transparent 6px 12px);
  background-size: 2px 12px;
  animation: fluss-senkrecht 0.9s linear infinite;
}

.verteiler__bot {
  display: inline-flex;
  align-items: center;
  gap: var(--rf-a-3);
  padding: var(--rf-a-2) var(--rf-a-5) var(--rf-a-2) var(--rf-a-2);
  border-radius: var(--rf-r-pill);
  background: var(--rf-nacht);
  color: var(--rf-text-invers);
  box-shadow: var(--rf-schatten-3);
}

.verteiler__bot strong {
  display: block;
  font-family: var(--rf-font-titel);
  font-size: var(--rf-t-s);
  line-height: 1.3;
}

.verteiler__bot small {
  display: block;
  font-size: var(--rf-t-xs);
  color: rgba(255, 255, 255, 0.65);
}

.verteiler__bot-zeichen {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rf-rot);
  animation: bot-denkt 2.4s ease-out infinite;
}

@keyframes bot-denkt {
  0% { box-shadow: 0 0 0 0 rgba(189, 18, 18, 0.55); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(189, 18, 18, 0); }
}

.verteiler__gabel {
  width: 100%;
  max-width: 22rem;
  height: 64px;
}

.verteiler__gabel svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.verteiler__gabel--quer { display: none; }

.verteiler__ast {
  fill: none;
  stroke: var(--rf-grau-300);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  vector-effect: non-scaling-stroke;
  transition: stroke 260ms ease;
}

.verteiler[data-ziel="luebeck"] .verteiler__ast--luebeck,
.verteiler[data-ziel="hamburg"] .verteiler__ast--hamburg {
  stroke: var(--rf-rot);
  animation: ast-fluss 0.9s linear infinite;
}

@keyframes ast-fluss { to { stroke-dashoffset: -12; } }

.verteiler__ziele {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rf-a-3);
  width: 100%;
  max-width: 30rem;
}

.verteiler__ziel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rf-a-2);
  padding: var(--rf-a-5) var(--rf-a-3) var(--rf-a-4);
  border: 2px solid var(--rf-linie);
  border-radius: var(--rf-r-m);
  background: var(--rf-weiss);
  text-align: center;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.verteiler__ziel strong {
  display: block;
  font-family: var(--rf-font-titel);
  font-size: var(--rf-t-s);
  white-space: nowrap;
}

.verteiler__ziel span span {
  display: block;
  font-size: var(--rf-t-xs);
  line-height: 1.4;
  color: var(--rf-text-leise);
}

.verteiler__bild {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--rf-grau-100);
  color: var(--rf-grau-500);
  transition: background-color 260ms ease, color 260ms ease;
}

.verteiler__bild img { width: 100%; height: 100%; object-fit: cover; }

.verteiler__neu {
  position: absolute;
  top: -11px;
  left: 50%;
  padding: 2px var(--rf-a-3);
  border-radius: var(--rf-r-pill);
  background: var(--rf-rot);
  color: var(--rf-text-invers);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.verteiler[data-ziel="luebeck"] [data-ziel-name="luebeck"],
.verteiler[data-ziel="hamburg"] [data-ziel-name="hamburg"] {
  border-color: var(--rf-rot);
  box-shadow: 0 18px 36px -20px rgba(189, 18, 18, 0.6);
  transform: translateY(-3px);
}

.verteiler[data-ziel="luebeck"] [data-ziel-name="luebeck"] .verteiler__bild,
.verteiler[data-ziel="hamburg"] [data-ziel-name="hamburg"] .verteiler__bild {
  background: rgba(189, 18, 18, 0.1);
  color: var(--rf-rot);
}

.verteiler[data-ziel="luebeck"] [data-ziel-name="luebeck"] .verteiler__neu,
.verteiler[data-ziel="hamburg"] [data-ziel-name="hamburg"] .verteiler__neu {
  opacity: 1;
  transform: translate(-50%, 0);
}

.verteil-bereich__aktion { text-align: center; margin: 0; }

@media (min-width: 820px) {
  .verteiler {
    grid-template-columns: auto 64px auto 120px minmax(0, 18rem);
    justify-content: center;
    align-items: center;
  }

  .verteiler__leitung {
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--rf-rot) 0 6px, transparent 6px 12px);
    background-size: 12px 2px;
    animation-name: fluss-waagerecht;
  }

  .verteiler__gabel {
    max-width: none;
    height: 100%;
    align-self: stretch;
  }

  .verteiler__gabel--quer { display: block; }
  .verteiler__gabel--hoch { display: none; }

  .verteiler__ziele {
    grid-template-columns: 1fr;
    gap: var(--rf-a-5);
  }

  .verteiler__ziel {
    flex-direction: row;
    align-items: center;
    gap: var(--rf-a-4);
    padding: var(--rf-a-4);
    text-align: left;
  }

  .verteiler__ziel strong { font-size: var(--rf-t-m); }

  .verteiler__neu { left: auto; right: var(--rf-a-4); transform: translate(0, 6px); }

  .verteiler[data-ziel="luebeck"] [data-ziel-name="luebeck"] .verteiler__neu,
  .verteiler[data-ziel="hamburg"] [data-ziel-name="hamburg"] .verteiler__neu {
    transform: translate(0, 0);
  }

  .verteiler[data-ziel="luebeck"] [data-ziel-name="luebeck"],
  .verteiler[data-ziel="hamburg"] [data-ziel-name="hamburg"] {
    transform: translateX(4px);
  }
}

/* ------------------------------------------------------------ Team */

.team {
  display: grid;
  gap: var(--rf-a-6);
  align-items: center;
}

@media (min-width: 860px) {
  .team { grid-template-columns: 1fr 1fr; }
}

.team__bild {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: var(--rf-r-l);
}

.team__text p { color: var(--rf-text-leise); margin-top: var(--rf-a-3); }

.team__leute {
  list-style: none;
  padding: 0;
  margin: var(--rf-a-5) 0 0;
  display: grid;
  gap: var(--rf-a-4);
}

.team__leute li { display: flex; gap: var(--rf-a-3); align-items: center; line-height: 1.45; }
.team__leute img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
}
.team__leute strong { display: block; color: var(--rf-text); }
.team__leute a { color: var(--rf-rot); font-weight: 600; text-decoration: none; }
.team__text .team__zeiten { font-size: var(--rf-t-xs); margin-top: var(--rf-a-4); }

.verteiler__bild img { object-position: 50% 25%; }

.verteiler__ziel .verteiler__person {
  display: block;
  font-weight: 600;
  color: var(--rf-text);
  margin-bottom: 2px;
}