/* wertkraft.io
 *
 * Aufbau der Startseite nach dem Vorbild der Masterclass-Seite von
 * business.de: durchgehende Baender im Wechsel dunkel und hell, sehr grosse
 * fette Ueberschriften mit einem Wort in der Akzentfarbe, Schluesselstellen im
 * Fliesstext fett und unterstrichen, Haekchenlisten, nummerierte Karten und
 * ein Knopf, der sich nach jedem Block wiederholt.
 *
 * Zwei Abweichungen von der Vorlage, jede mit Grund:
 *   Schrift Avenir statt Roboto, weil Avenir hier Hausschrift ist und keine
 *   fremde Schrift nachgeladen werden darf. Die Datenschutzerklaerung sagt
 *   zu, dass alles vom eigenen Server kommt.
 *   Auf dem Messing-Knopf steht dunkle Tinte, nicht Weiss. Weiss auf Orange
 *   faellt durch die Kontrastpruefung.
 */

:root {
  /* 20.10.2026: von Schwarz (#0b0e10) auf warmes Graphit angehoben. Die
     Seite war Matthias zu dunkel und zu kontrastarm, Vorbild ist das helle
     Band mit dem Messing. Der leise Text ist mitgezogen, sonst faellt er
     auf dem helleren Grund unter 4,5:1. */
  --grund: #1e2226;
  --grund-erhoben: #292e33;
  --linie: #383f45;
  --linie-hell: #4a535a;
  --text: #f1f4f5;
  --text-leise: #b3bdc3;
  --akzent: #c9803c;
  --akzent-hell: #e0a061;
  --akzent-tint: rgba(201, 128, 60, 0.12);
  --warnung: #d4776a;

  --knopf-grund: linear-gradient(100deg, #b9712f 0%, #e0a061 50%, #b9712f 100%);
  --knopf-tinte: #17110a;

  --schrift: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont,
             "Segoe UI", sans-serif;
  --radius: 6px;
  --radius-gross: 14px;
  --uebergang: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --spur: min(1120px, 100% - 2.5rem);
}

/* 110 % (Video Matthias 21.10.2026): er hatte die Seite im Browser auf
   110 % gezoomt, kurz 125 % probiert und ist bei 110 % geblieben, „so finde
   ich das am besten“. Ab Laptopbreite wird deshalb alles, was in rem
   gemessen ist, ein Zehntel groesser, und die Spur waechst mit, sonst
   brechen die Zeilen enger um als im Zoom. Unter 1200 px bleibt es bei
   100 %: Handy und Tablet sind eigens abgestimmt und waren nicht Teil der
   Rueckmeldung.
   ⚠️ 1200 und nicht 1100: zwischen 1100 und 1139 px brach die Kopfzeile der
   Startseite zweizeilig um (98 statt 71 px), mit Arial als Ersatzschrift
   bis etwa 1140 px, und die Ueberschrift trennte „Einzelkaemp-fer“
   (Frischblick 21.10.2026). */
@media (min-width: 1200px) {
  html { font-size: 110%; }
  :root { --spur: min(1232px, 100% - 2.5rem); }
}
/* ⚠️ Die Fragebogen-Seiten muessen bei 1280 x 720 ohne Scrollen passen.
   Mit 110 % rutschte dort die vierte Antwort unter den Rand (Kartenende
   756 statt 681 px, gemessen 21.10.). In niedrigen Fenstern bleiben sie
   deshalb bei 100 %. */
@media (min-width: 1200px) and (max-height: 799px) {
  html:has(body.seite-hell) { font-size: 100%; }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--akzent); color: var(--knopf-tinte); }

:focus-visible {
  outline: 2px solid var(--akzent-hell);
  outline-offset: 2px;
  border-radius: 3px;
}

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5.6vw, 3.55rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.85rem); }
h3 { font-size: 1.1875rem; }

p { margin: 0; max-width: 70ch; }

/* Das Kennzeichen der Vorlage: die entscheidende Stelle im Satz ist fett und
   unterstrichen. Sparsam einsetzen, sonst traegt es nicht mehr. */
.merk {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Ein Wort der Ueberschrift in Messing. */
.akzentwort { color: var(--akzent-hell); }

.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ================================================================= Baender
 *
 * Jeder Abschnitt geht ueber die volle Breite, der Inhalt sitzt in der Spur.
 * `.band-hell` setzt die Farbtoken neu, damit jeder Baustein darin ohne
 * eigene Ausnahme richtig aussieht.
 */

main { width: 100%; }

/* 21.10.2026: von clamp(3.2rem, 6.5vw, 5.5rem) knapper (Video Matthias,
   „zu viel Luft zwischen den Blöcken“). */
.band { padding-block: clamp(2.6rem, 5vw, 4.2rem); }

/* Die Nutzen-Reihe unter der Bühne ist nur drei Zeilen hoch, der volle
   Bandabstand stand dort doppelt so hoch wie der Inhalt. */
.band-knapp { padding-block: clamp(1.8rem, 3.2vw, 2.6rem); }

/* Zwei helle Baender hintereinander sehen aus wie EIN Band. Ohne das hier
   stuende zwischen ihnen der Abstand zweimal, das war im Video die Stelle
   „deutlich mehr Luft als hier“ (vor „Bei uns bist du nie allein“). */
.band-hell + .band-hell { padding-top: 0; }

.band > .spur {
  width: var(--spur);
  margin-inline: auto;
}

.band-dunkel { background: var(--grund); }

.band-hell {
  --grund: #f3f1ed;
  --grund-erhoben: #ffffff;
  --linie: #ded8cf;
  --linie-hell: #c8c0b4;
  --text: #16191b;
  --text-leise: #5d666b;
  --akzent-hell: #8a5220;
  --akzent-tint: rgba(201, 128, 60, 0.14);
  --warnung: #9d3b2c;
  background: var(--grund);
  color: var(--text);
}

/* Der schmale Messingstrich zwischen zwei dunklen Baendern. */
.band-strich { border-top: 3px solid var(--akzent); }

/* ==================================================================== Kopf
 *
 * Volle Breite, Inhalt auf der Spur. Die Innenabstaende rechnen die Spur
 * nach, damit die anderen fuenf Seiten dieselbe Kopfzeile ohne zusaetzliche
 * Huelle benutzen koennen.
 */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.7rem calc((100% - var(--spur)) / 2);
  /* Hell, nicht dunkel: das 3D-W ist schwarz und braucht hellen Grund. Die
     Token werden wie in `.band-hell` neu gesetzt, damit Links, Knopf und
     Hover ohne Sonderregeln stimmen. */
  --grund: #f3f1ed;
  --grund-erhoben: #e9e5de;
  --linie: #ded8cf;
  --text: #16191b;
  --text-leise: #5d666b;
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  color: var(--text);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

.marke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 0.5rem;
  text-decoration: none;
}

/* Das Lockup ist ein Querformat von etwa 4,6:1. Die Hoehe fuehrt, die Breite
   ergibt sich, sonst verzerrt jede Aenderung an der Kopfzeile den Schriftzug. */
.marke { gap: 0.6rem; }
.marke img { width: auto; display: block; }
.marke-w { height: 34px; }
.marke-wort { height: 28px; }

.kopf nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.kopf nav a {
  padding: 0.55rem 0.75rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text-leise);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--uebergang), background var(--uebergang);
}

.kopf nav a:hover { color: var(--text); background: var(--grund-erhoben); }

.knopf-klein {
  margin-left: 0.4rem;
  padding: 0.55rem 1.1rem !important;
  background: var(--knopf-grund);
  color: var(--knopf-tinte) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

.kopf nav a.knopf-klein:hover { background: var(--knopf-grund); filter: brightness(1.08); }

/* ================================================================== Knopf */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  margin-top: 2rem;
  padding: 0.85rem 1.9rem;
  background: var(--knopf-grund);
  color: var(--knopf-tinte);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset,
              0 10px 26px -14px rgba(201, 128, 60, 0.9);
  transition: filter var(--uebergang), transform var(--uebergang);
}

.knopf:hover { filter: brightness(1.08); transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }

.knopf svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Knopf, der mittig zwischen zwei Bloecken wiederholt wird. */
.knopf-reihe {
  margin-top: 2.6rem;
  text-align: center;
}
.knopf-reihe .knopf { margin-top: 0; }

.unter-knopf {
  margin-top: 0.9rem;
  margin-inline: auto;
  font-size: 0.875rem;
  color: var(--text-leise);
}
/* ⚠️ In der linksbuendigen Buehne buendig unter dem Knopf. `margin-inline:
   auto` zentrierte die Zeile sonst in ihrer 70ch-Box, sie stand ab 768 px
   38 bis 80 px rechts vom Knopf (Matthias 21.10.2026, Bildschirmfoto). */
.buehne .unter-knopf { margin-inline: 0; }

/* ================================================================== Bühne */

.buehne {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6.5vw, 5.2rem);
  background:
    radial-gradient(70% 90% at 78% 28%, rgba(201, 128, 60, 0.16), transparent 62%),
    radial-gradient(60% 70% at 10% 105%, rgba(201, 128, 60, 0.08), transparent 60%),
    var(--grund);
}

/* Feines Raster im Hintergrund, ersetzt das Bild der Vorlage, solange keins
   da ist. Rein dekorativ und sehr leise. */
.buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(80% 70% at 50% 35%, #000 20%, transparent 78%);
  pointer-events: none;
}

.buehne > .spur { position: relative; }

.buehne-zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: 3rem;
  align-items: center;
}

.buehne h1 { max-width: 20ch; }

.anriss {
  margin-top: 1.4rem;
  color: var(--text-leise);
  font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
  line-height: 1.55;
}

.anriss .merk { color: var(--text); }

/* Die Zeile mit dem sozialen Beleg unter dem Knopf, wie in der Vorlage. */
.beleg-zeile {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.6rem;
}

.koepfe {
  display: flex;
  flex: none;
}

.kopf-kreis {
  width: 38px;
  height: 38px;
  margin-right: -12px;
  border: 2px solid var(--grund);
  border-radius: 50%;
  background: var(--grund-erhoben);
  display: grid;
  place-items: center;
}

.kopf-kreis svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--text-leise);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.beleg-zeile p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-leise);
}
/* ================================================================ Funnel
 *
 * Aufbau und Masse übernommen von winkelenergie.de
 * (`assets/mobile-polish.css` ab Zeile 1220), Farben auf die Token dieser
 * Seite umgestellt. Die Kacheln tragen hier Icons statt Fotos, deshalb sind
 * sie schmaler und die Bildspalte ist quadratisch.
 */

.funnel-abschnitt {
  padding: 1.6rem 0 3rem;
}
.funnel-huelle {
  width: min(680px, 100% - 2rem);
  margin-inline: auto;
}
.funnel-kopfbereich {
  text-align: center;
  margin-bottom: 1.25rem;
}
.funnel-kopfbereich h1 {
  font-size: clamp(1.6rem, 4.5vw, 2.3rem);
  margin-bottom: 0.6rem;
}
.funnel-kopfbereich p {
  margin-inline: auto;
  color: var(--text-leise);
}
.funnel-beleg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  color: var(--text-leise);
}
.funnel-beleg span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.funnel-beleg svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--akzent);
}

.funnel-karte {
  background: var(--grund-erhoben);
  border: 1px solid var(--linie);
  border-radius: calc(var(--radius) * 2);
  padding: 1.25rem;
}

.funnel-kopf { margin-bottom: 1rem; }
.funnel-kopf-reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 32px;
}
.funnel-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem 0.35rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-leise);
  cursor: pointer;
  transition: color var(--uebergang);
}
.funnel-zurueck:hover { color: var(--text); }
.funnel-zurueck svg { width: 16px; height: 16px; }
.funnel-rest {
  font-size: 0.8125rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.funnel-fortschritt {
  height: 4px;
  margin-top: 0.6rem;
  border-radius: 999px;
  background: var(--linie);
  overflow: hidden;
}
.funnel-fortschritt span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--akzent);
  transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Feste Mindesthöhe, damit die Karte zwischen den Schritten nicht springt. */
.funnel-buehne { min-height: 340px; }
.funnel-schritt,
.funnel-formular { animation: funnel-ein 0.28s ease both; }
@keyframes funnel-ein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .funnel-schritt,
  .funnel-formular { animation: none; }
  .funnel-fortschritt span { transition: none; }
}

.funnel-zaehler {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.funnel-frage {
  font-size: clamp(1.15rem, 3.2vw, 1.4rem);
  margin-bottom: 0.3rem;
}
.funnel-hinweis {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-leise);
}

.funnel-kacheln {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}
.funnel-kachel {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  background: var(--grund);
  font: inherit;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--uebergang), background var(--uebergang),
              transform 0.1s ease;
}
.funnel-kachel:hover {
  border-color: var(--akzent);
  background: var(--akzent-tint);
}
.funnel-kachel:active { transform: scale(0.995); }
.funnel-kachel-icon {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--akzent);
}
.funnel-kachel-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 1;
}
.funnel-kachel-pfeil {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--text-leise);
}
.funnel-kachel:hover .funnel-kachel-pfeil { color: var(--akzent); }

.funnel-laden {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  text-align: center;
}
.funnel-laden p {
  margin-top: 1rem;
  color: var(--text-leise);
}
.funnel-kreisel {
  width: 34px;
  height: 34px;
  border: 3px solid var(--linie-hell);
  border-top-color: var(--akzent);
  border-radius: 50%;
  animation: funnel-dreht 0.9s linear infinite;
}
@keyframes funnel-dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .funnel-kreisel { animation-duration: 2.4s; }
}

.funnel-form { margin-top: 1rem; }
.funnel-feld { margin-bottom: 0.8rem; }
.funnel-feld label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8125rem;
  color: var(--text-leise);
}
.funnel-feld input,
.funnel-feld textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  font: inherit;
  /* 16px verhindert, dass iOS beim Hineintippen die Seite heranzoomt. */
  font-size: 1rem;
  transition: border-color var(--uebergang);
}
.funnel-feld textarea { min-height: 84px; resize: vertical; }
.funnel-feld input:focus,
.funnel-feld textarea:focus {
  border-color: var(--akzent);
  outline: none;
}
.funnel-feld input::placeholder,
.funnel-feld textarea::placeholder { color: var(--text-leise); opacity: 0.7; }
.funnel-feld input[aria-invalid="true"] { border-color: var(--warnung); }

.funnel-paar { display: flex; gap: 0.6rem; }
.funnel-paar .funnel-feld:first-child { flex: 0 0 38%; }
.funnel-paar .funnel-feld:last-child { flex: 1; }

.funnel-nachricht { margin: 0 0 0.9rem; }
.funnel-nachricht summary {
  font-size: 0.875rem;
  color: var(--text-leise);
  cursor: pointer;
  padding: 0.25rem 0;
}
.funnel-nachricht summary:hover { color: var(--text); }
.funnel-nachricht[open] summary { margin-bottom: 0.5rem; }

/* Lebenslauf (27.10.2026). Die Zone ist ein <label> fuer das Dateifeld:
   Tippen oeffnet die Auswahl, Ziehen und Ablegen geht auf dem Desktop. Das
   Feld selbst ist nur optisch versteckt, damit es fokussierbar bleibt. */
.funnel-datei-huelle { position: relative; margin: 0 0 1rem; }
.funnel-datei {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  min-height: 44px;
  border: 1.5px dashed var(--linie-hell);
  border-radius: var(--radius);
  background: var(--grund);
  cursor: pointer;
  transition: border-color var(--uebergang), background var(--uebergang);
}
.funnel-datei:hover,
.funnel-datei.zieht { border-color: var(--akzent); background: var(--akzent-tint, transparent); }
.funnel-datei:focus-within { border-color: var(--akzent); outline: 2px solid var(--akzent); outline-offset: 2px; }
.funnel-datei.hat-datei { border-style: solid; border-color: var(--akzent); }
.funnel-datei-eingabe {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.funnel-datei-titel {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.funnel-datei.hat-datei .funnel-datei-titel { padding-right: 5.5rem; }
.funnel-datei-unter { font-size: 0.8125rem; color: var(--text-leise); }
.funnel-datei-weg {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  min-height: 36px;
  padding: 0 0.7rem;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  background: var(--grund-erhoben, var(--grund));
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.funnel-datei-weg:hover { border-color: var(--akzent); }
.funnel-datei-fehler { margin: 0.4rem 0 0; font-size: 0.8125rem; color: var(--warnung); }

.funnel-haken {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--text-leise);
  cursor: pointer;
}
.funnel-haken input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--akzent);
}
.funnel-haken a { color: var(--text); }

/* Honigtopf: aus dem Bild geschoben statt display:none, weil manche Bots
   genau darauf prüfen. */
.funnel-falle { position: absolute; left: -9999px; }

.funnel-meldung {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--warnung);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warnung) 12%, transparent);
  font-size: 0.875rem;
  color: var(--text);
}

.funnel-senden {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1.2rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--akzent);
  color: #10130f;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--uebergang);
}
.funnel-senden:hover:not(:disabled) { background: var(--akzent-hell); }
.funnel-senden:disabled { opacity: 0.6; cursor: default; }

.funnel-am-knopf {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-leise);
}

.funnel-ablauf {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
}
.funnel-ablauf-titel {
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.funnel-ablauf ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.875rem;
  color: var(--text-leise);
}
.funnel-ablauf li { margin-bottom: 0.35rem; }
.funnel-ablauf li:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
  .funnel-karte { padding: 1rem 0.9rem; }
  .funnel-paar { flex-direction: column; gap: 0; }
  .funnel-paar .funnel-feld:first-child { flex: 1; }
}

/* ============================================================ Danke-Seite */

.danke {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  width: min(560px, 100% - 2rem);
  margin: 4rem auto;
}
.danke-zeichen {
  width: 56px;
  height: 56px;
  color: var(--akzent);
}
.danke p { margin-inline: auto; }

/* ============================================================ Rechtstexte */

.rechtstext {
  width: min(720px, 100% - 2.5rem);
  margin: 3rem auto 4rem;
}
.rechtstext h1 { margin-bottom: 1.5rem; }
.rechtstext h2 {
  margin: 2rem 0 0.6rem;
  font-size: 1.125rem;
}
.rechtstext h3 {
  margin: 1.25rem 0 0.4rem;
  color: var(--text-leise);
}
.rechtstext p,
.rechtstext ul { margin: 0 0 0.8rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: 0.3rem; }
.rechtstext a { color: var(--akzent-hell); }
/* Offene Stelle, die noch von Hand gefüllt werden muss. Sichtbar markiert,
   damit sie nicht unbemerkt online bleibt. */
.luecke {
  padding: 0.05rem 0.4rem;
  border: 1px dashed var(--warnung);
  border-radius: 3px;
  color: var(--warnung);
  font-size: 0.9em;
}

/* ============================================================== Bau-Band
 *
 * Steht ueber der Kopfzeile und scrollt mit weg. Absichtlich nicht klebend:
 * ein zweites klebendes Element neben der Kopfzeile frisst auf dem Handy den
 * halben ersten Bildschirm.
 */

.bau-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  background: color-mix(in srgb, var(--akzent) 14%, var(--grund));
  border-bottom: 1px solid color-mix(in srgb, var(--akzent) 35%, transparent);
  color: var(--text);
  font-size: 0.8125rem;
  text-align: center;
}
.bau-punkt {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--akzent);
}
.bau-kasten {
  margin-bottom: 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
  border-radius: var(--radius);
  background: var(--akzent-tint);
}
.bau-kasten p { margin: 0 0 0.5rem; }
.bau-kasten p:last-child { margin-bottom: 0; }

/* =========================================================== Platzhalter
 *
 * Alles hier ist bewusst als Platzhalter erkennbar: gestrichelter Rahmen,
 * gedaempfte Farbe, Beschriftung mit Motiv und Mindestgroesse. Ein Platzhalter,
 * der aussieht wie fertiger Inhalt, bleibt jahrelang stehen.
 */

.platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  padding: 1.2rem;
  min-height: 170px;
  border: 1px dashed var(--linie-hell);
  border-radius: var(--radius);
  background: var(--grund-erhoben);
  text-align: center;
}
.platzhalter svg {
  width: 34px;
  height: 34px;
  flex: none;
  fill: none;
  stroke: var(--text-leise);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}
.platzhalter figcaption {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-leise);
}
.platzhalter figcaption b {
  display: block;
  color: var(--text);
  font-size: 0.8125rem;
  margin-bottom: 0.15rem;
}
.platzhalter-buehne { min-height: 260px; }
.platzhalter-portraet {
  min-height: 0;
  aspect-ratio: 1;
  padding: 0.8rem;
}
.platzhalter-portraet svg { width: 28px; height: 28px; }

/* Text, der noch nicht stimmt. Gedaempft und schraeg, damit im Screenshot
   sofort auffaellt, was noch fehlt. */
.platzhalter-text {
  color: var(--text-leise);
  font-style: italic;
}
.platzhalter-zitat {
  margin: 0;
  padding-left: 0.9rem;
  border-left: 2px dashed var(--linie-hell);
  color: var(--text-leise);
  font-style: italic;
}
.platzhalter-hinweis {
  margin-top: 1.2rem;
  padding: 0.6rem 0.75rem;
  border: 1px dashed color-mix(in srgb, var(--akzent) 35%, transparent);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--text-leise);
}
.platzhalter-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  min-height: 52px;
  padding: 0 1rem;
  border: 1px dashed var(--linie-hell);
  border-radius: var(--radius);
  color: var(--text-leise);
  font-size: 0.8125rem;
}


/* =========================================================== Kennzahlen
 *
 * Helles schmales Band direkt unter der Buehne, drei bis vier grosse Zahlen.
 */

.belege-band { padding-block: clamp(2rem, 3.5vw, 2.8rem); }

.belege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.6rem;
  text-align: center;
}

.beleg {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.beleg-zahl {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
}

.beleg-zahl.platzhalter-text { color: var(--text-leise); }

.beleg-text {
  font-size: 0.875rem;
  color: var(--text-leise);
}

.belege .platzhalter-hinweis {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  text-align: left;
}

/* ============================================================= Blockkopf */

.block-kopf { margin-bottom: 2.4rem; text-align: center; }
.block-kopf .anriss { max-width: 62ch; margin-inline: auto; }

.block-kopf-mitte {
  text-align: center;
}
.block-kopf-mitte .anriss { margin-inline: auto; }

/* ================================================================ Märkte
 *
 * Zwei grosse Karten nebeneinander, Bildplatzhalter oben, Text darunter.
 */

.maerkte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.markt {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--grund-erhoben);
}

.markt-titel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.markt-titel svg {
  width: 30px;
  height: 30px;
  flex: none;
  fill: none;
  stroke: var(--akzent-hell);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.markt p { color: var(--text-leise); }
.markt .platzhalter { min-height: 150px; }

/* ========================================================= Häkchenliste */

.haken-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.8rem 3rem;
}

.haken-liste li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
}

.haken-liste svg {
  width: 21px;
  height: 21px;
  margin-top: 0.22rem;
  flex: none;
  fill: none;
  stroke: var(--akzent-hell);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Nur die Ueberschrift des Punktes ist ein Block. Ohne den Kindselektor
   trifft die Regel auch `.merk` im Fliesstext und reisst jede hervorgehobene
   Stelle auf eine eigene Zeile. */
.haken-liste > li > div > b { display: block; margin-bottom: 0.2rem; }
.haken-liste p { color: var(--text-leise); font-size: 0.9375rem; }

.hinweis {
  margin-top: 2rem;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

/* ================================================================ Stufen
 *
 * Nummerierte Karten. Die Ziffer haengt auf breiten Bildschirmen links aus
 * der Karte heraus wie in der Vorlage, unter 720 px rutscht sie hinein,
 * sonst wird sie am Rand abgeschnitten.
 */

.stufen {
  list-style: none;
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0 0 0 3.6rem;
}

.stufe {
  position: relative;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--linie-hell);
  border-radius: var(--radius-gross);
  background: var(--grund-erhoben);
}

.stufe-nr {
  position: absolute;
  left: -3.6rem;
  top: 1rem;
  width: 3.1rem;
  text-align: right;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--akzent-hell);
}

.stufe h3 { margin-bottom: 0.35rem; }
.stufe p { color: var(--text-leise); font-size: 0.9375rem; }

@media (max-width: 720px) {
  .stufen { padding-left: 0; }

  .stufe-nr {
    position: static;
    display: block;
    width: auto;
    text-align: left;
    margin-bottom: 0.2rem;
    font-size: 1.9rem;
  }
}

/* ================================================================= Logos */

.logos-titel {
  margin: 0 auto 1.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
  text-align: center;
}

.logos-reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.logos .platzhalter-hinweis {
  max-width: 62ch;
  margin-inline: auto;
}

/* ============================================================ Vergleich
 *
 * Aufbau wie eine Produktvergleichstabelle bei einem Haendler: links das
 * Merkmal, in der Mitte der Markt, rechts die eigene Spalte, hervorgehoben
 * und durchgehend mit Haken. Die eigene Spalte traegt oben eine Messingkante
 * und einen Tint, damit das Auge ihr folgt.
 */

.vergleich-rahmen {
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--grund-erhoben);
}

.vergleich {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.vergleich th,
.vergleich td {
  padding: 0.95rem 1.1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie);
}

.vergleich thead th {
  padding-block: 0.9rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--text-leise);
  background: color-mix(in srgb, var(--linie) 45%, transparent);
  white-space: nowrap;
}

/* Die eigene Spalte, in Kopf und Koerper. */
.vergleich thead th:last-child {
  color: var(--text);
  background: color-mix(in srgb, var(--akzent) 22%, var(--grund-erhoben));
  border-top: 3px solid var(--akzent);
}

.vergleich tbody th {
  width: 1%;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.vergleich td { color: var(--text-leise); }

.vergleich td:last-child {
  color: var(--text);
  background: var(--akzent-tint);
  border-left: 1px solid color-mix(in srgb, var(--akzent) 35%, transparent);
}
.vergleich tbody tr:nth-child(even) th,
.vergleich tbody tr:nth-child(even) td:first-of-type {
  background: color-mix(in srgb, var(--linie) 30%, transparent);
}
.vergleich tbody tr:nth-child(even) td:last-child {
  background: color-mix(in srgb, var(--akzent) 19%, var(--grund-erhoben));
}

.vergleich tbody tr:last-child th,
.vergleich tbody tr:last-child td { border-bottom: 0; }

/* Zelle mit Zeichen davor. */
.zelle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
}

.zelle svg {
  width: 17px;
  height: 17px;
  margin-top: 0.2rem;
  flex: none;
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zelle-nein svg { stroke: var(--warnung); }
.zelle-ja svg { stroke: var(--akzent-hell); }

/* ====================================================== Erfolgsgeschichten */

.geschichten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.3rem;
}

.geschichte {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.4rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--grund-erhoben);
  box-shadow: 0 18px 40px -34px rgba(0, 0, 0, 0.55);
}

.geschichte .platzhalter-portraet {
  width: 84px;
  max-width: 84px;
  border-radius: 50%;
}

.geschichte h3 { margin-bottom: 0.15rem; font-size: 1.0625rem; }

.geschichte-rolle {
  margin: 0;
  font-size: 0.8125rem;
}

.geschichte blockquote { font-size: 0.9375rem; }

/* ================================================================ Galerie */

.platzhalter-reihe,
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* ==================================================================== FAQ
 *
 * Zwei Spalten aus umrandeten Kaesten, wie in der Vorlage. Das Dreieck
 * kippt beim Aufklappen.
 */

/* Zwischentitel, seit die Fragen nach Vertriebspartner und Door-to-Door
   getrennt stehen (27.10.2026). */
.faq-gruppe {
  margin: 2.2rem 0 1rem;
  font-size: 1.15rem;
  color: var(--akzent-hell);
}
.faq-gruppe:first-of-type { margin-top: 0; }

.faq-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.faq {
  border: 2px solid var(--linie-hell);
  border-radius: var(--radius-gross);
  background: var(--grund-erhoben);
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 11px solid var(--akzent-hell);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transition: transform var(--uebergang);
}

.faq[open] summary::before { transform: rotate(90deg); }
.faq summary:hover { color: var(--akzent-hell); }

.faq p {
  margin: 0;
  padding: 0 1.2rem 1.15rem 2.9rem;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

/* ================================================================ Schluss */

.schluss { text-align: center; }
.schluss h2 { margin-bottom: 0.7rem; }
.schluss p {
  margin-inline: auto;
  color: var(--text-leise);
  font-size: 1.0625rem;
}

/* ==================================================================== Fuß
 *
 * Volle Breite wie die Kopfzeile, Innenabstand rechnet die Spur nach.
 */

footer {
  width: 100%;
  padding: 2.4rem calc((100% - var(--spur)) / 2) 2.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: center;
  background: var(--grund);
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
  font-size: 0.875rem;
}

footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-leise);
  text-decoration: none;
  text-underline-offset: 3px;
}

footer a:hover { color: var(--text); text-decoration: underline; }

footer span { font-weight: 700; color: var(--text); margin-right: auto; }

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.4rem;
}

/* ================================================================= Schmal */

@media (max-width: 860px) {
  .buehne-zweispaltig { grid-template-columns: 1fr; gap: 2rem; }
  .haken-liste { grid-template-columns: 1fr; gap: 1.4rem; }
  .faq-raster { grid-template-columns: 1fr; }
  .buehne h1 { max-width: none; }
}

@media (max-width: 620px) {
  .kopf nav a:not(.knopf-klein) { display: none; }
  .knopf { width: 100%; justify-content: center; }
  .knopf-reihe .knopf { width: auto; }

  /* Die Vergleichstabelle wird auf dem Handy zu Bloecken: drei Spalten
     nebeneinander sind bei 390 px nicht mehr lesbar. */
  .vergleich-rahmen { border: 0; border-radius: 0; background: none; }
  .vergleich thead { display: none; }
  .vergleich, .vergleich tbody, .vergleich tr, .vergleich th, .vergleich td {
    display: block;
    width: 100%;
  }
  .vergleich tr {
    margin-bottom: 1rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    overflow: hidden;
  }
  /* `width: 1%` aus der Tischfassung ist spezifischer als die Block-Regel
     oben und ueberlebt sie sonst. Ergebnis waere ein weisser Zipfel links
     oben in jeder Karte. */
  .vergleich tbody th {
    width: auto;
    background: var(--grund-erhoben);
    border-bottom: 1px solid var(--linie);
  }
  .vergleich td { border-bottom: 0; }
  .vergleich td::before {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-leise);
  }
  .vergleich td:nth-of-type(1)::before { content: "Andere Anbieter"; }
  .vergleich td:nth-of-type(2)::before { content: "wertkraft"; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ============================================ Werbetext-Bausteine
 *
 * Aus dem Meta-Aufbau des Werbetexter-Trainings: erst die Symptome, die die
 * Zielgruppe an sich selbst kennt, dann das Problem dahinter, dann die
 * Lösung, dann das Bild der Zukunft. Die drei Bausteine hier tragen die
 * Abschnitte, die es vorher nicht gab.
 */

/* Symptome. Gleiche Liste wie die Haken, nur mit Kreuz statt Haken und in
   der Warnfarbe. */
.symptome svg { stroke: var(--warnung); stroke-width: 2.6; }
.symptome > li > div > b { color: var(--text); }

/* Der Satz, um den sich der ganze Abschnitt dreht. Gross gesetzt, damit er
   auch beim Ueberfliegen haengen bleibt. */
.leitsatz {
  font-size: clamp(1.1875rem, 2.3vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
  font-weight: 500;
  max-width: 34ch;
}

.folgerung {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  counter-reset: folge;
}

.folgerung li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: baseline;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--linie);
}

.folgerung li:last-child { border-bottom: 0; padding-bottom: 0; }

.folgerung li::before {
  counter-increment: folge;
  content: counter(folge);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--akzent-hell);
}

/* Der Tagesablauf. Gleiche Karte wie `.stufe`, die Ziffer ist hier eine
   Uhrzeit und deshalb breiter und kleiner. */

@media (max-width: 720px) {
}

/* ================================= Bauteile von der Pricing-Masterclass
 *
 * Gesehen auf andreasbaulig.de/pmc. Drei Dinge, die dort tragen und die hier
 * gefehlt haben:
 *   eine kleine Frage ueber der Ueberschrift, die den Leser einordnet
 *   eine Reihe aus drei grossen Linien-Icons mit je einem Nutzen
 *   Zickzack: gefuellte Karte und Bild im Wechsel links und rechts
 */

/* Die kleine Zeile ueber der Ueberschrift. */
.kicker {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akzent-hell);
}

/* ------------------------------------------------------- Nutzen-Reihe */

.nutzen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.4rem 2rem;
  text-align: center;
}

.nutzen article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.nutzen svg {
  width: 58px;
  height: 58px;
  margin-bottom: 0.4rem;
  fill: none;
  stroke: var(--akzent-hell);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nutzen h3 { font-size: 1.1875rem; }
.nutzen p { color: var(--text-leise); font-size: 0.9375rem; max-width: 34ch; }

/* ------------------------------------------------------------ Zickzack */

.zickzack {
  display: grid;
  gap: clamp(2rem, 4vw, 3.2rem);
}

.zickzack > article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.8rem);
  align-items: center;
}

/* Jede zweite Reihe dreht die Spalten. `order` statt eines zweiten
   Markups, damit die Vorlesereihenfolge stimmt. */
.zickzack > article:nth-child(even) > .zick-karte { order: 2; }

.zick-karte {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--radius-gross);
  /* `--grund-erhoben`, nicht `--grund`: auf dem hellen Band ist `--grund`
     exakt die Bandfarbe, die Karte waere unsichtbar. */
  background: var(--grund-erhoben);
  color: var(--text);
  border: 1px solid var(--linie);
  box-shadow: 0 26px 60px -40px rgba(0, 0, 0, 0.5);
}

.zick-karte .markt-titel { margin-bottom: 0.9rem; }
.zick-karte p { color: var(--text-leise); }
.zick-karte p + p { margin-top: 0.8rem; }

/* „Für wen es passt“: drei Karten in einer Reihe, alle gleich hoch. Im
   Zickzack stand die dritte allein in einer zweiten Zeile, und `center`
   setzte die beiden oberen unterschiedlich hoch (Video Matthias 21.10.). */
.zickzack.zickzack-drei > article {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

@media (max-width: 860px) {
  .zickzack > article,
  .zickzack.zickzack-drei > article { grid-template-columns: 1fr; }
  .zickzack > article:nth-child(even) > .zick-karte { order: 0; }
}

/* --------------------------------------------------------- CTA-Karte */

.tat-karte {
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--akzent);
  border-radius: var(--radius-gross);
  background: var(--grund-erhoben);
  box-shadow: 0 30px 70px -45px rgba(0, 0, 0, 0.9);
  text-align: center;
}

.tat-karte p { margin-inline: auto; }
.tat-karte .knopf { margin-top: 1.5rem; }

/* Platzhalter leiser stellen: sie sollen erkennbar bleiben, aber nicht
   lauter sein als der fertige Inhalt daneben. */
.platzhalter {
  border-color: color-mix(in srgb, var(--linie-hell) 70%, transparent);
  background: color-mix(in srgb, var(--grund-erhoben) 60%, transparent);
}
.platzhalter figcaption { opacity: 0.75; }

/* ======================================================= Handy-Durchgang
 *
 * Gemessen bei 390 und 360 Breite auf allen sechs Seiten. Kein waagerechter
 * Ueberlauf, Funnel-Kacheln 58 px, Formularfelder 48 px mit 16 px Schrift
 * (darunter zoomt iOS beim Antippen hinein). Was auffiel, steht hier.
 */

/* 1. Die klebende Kopfzeile war 89 px hoch, weil der Knopf auf zwei Zeilen
      umbrach. Zusammen mit dem Bau-Band gingen 149 px vom Bildschirm weg.
      Kleinere Schrift und engere Innenabstaende halten ihn einzeilig. */
@media (max-width: 620px) {
  .kopf { padding-block: 0.5rem; }
  .knopf-klein {
    margin-left: 0;
    padding: 0.5rem 0.85rem !important;
    font-size: 0.8125rem !important;
    white-space: nowrap;
  }
  .marke img { height: 26px; }
}

/* 2. Sprungmarken landeten exakt unter der klebenden Kopfzeile: die
      Ueberschrift war nach jedem Klick im Menue unsichtbar. */
:target,
section[id],
[id] > .spur {
  scroll-margin-top: 5.5rem;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 3. „Datenschutzerklaerung" lief bei 390 px aus der Ueberschrift heraus.
      Lange Komposita gibt es in diesen Texten oefter. */
h1, h2, h3, .rechtstext li {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 4. Zu kleine Schrift an zwei Stellen, die echte Bedienhinweise sind. */
.funnel-zaehler { font-size: 0.8125rem; }
.logos-titel { font-size: 0.8125rem; }

/* 5. Die Zustimmungszeile im Funnel war 18 px hoch. Das Kaestchen selbst
      laesst sich nicht vergroessern, ohne es zu verzerren, also bekommt die
      ganze Zeile die Flaeche: das Etikett gehoert zum Kaestchen. */
.funnel-haken {
  min-height: 44px;
  padding-block: 0.35rem;
  cursor: pointer;
}

/* 6. Auf der Danke-Seite ist die Mailadresse der einzige Weg weiter. */
.danke a[href^="mailto"] {
  display: inline-block;
  min-height: 44px;
  padding: 0.7rem 0;
}

/* Die Mailadressen in den Rechtstexten bleiben gewoehnliche Textlinks in
   22 px Zeilenhoehe. Sie einzeln auf 44 px aufzublasen zerreisst den Absatz,
   und wer die Adresse braucht, findet sie zusaetzlich im Fuss, dort mit
   voller Flaeche. */


/* ============================================ Handy-Durchgang, zweite Runde
 *
 * Der erste Durchgang hat gemessen, was aus dem Kasten laeuft und was zu klein
 * zum Tippen ist. Diese Runde misst etwas anderes: was ein Besucher sieht,
 * BEVOR er scrollt. Gemessen wurde bei 375 x 667 (iPhone SE, das kleinste noch
 * verbreitete Geraet) gegen die Live-Fassung.
 *
 * Befund 1: der Hauptknopf der Startseite lag mit seiner Unterkante bei 697 px,
 *           also 30 px unter der Falz. Wer nicht scrollt, sieht ihn nie ganz.
 *           Ursache ist die Ueberschrift: sechs Zeilen mit Waisenwoertern
 *           („von einem", „nie bekommst,").
 * Befund 2: auf der Bewerbungsseite waren von vier Antwortkacheln nur zwei
 *           sichtbar. Die vier Belegzeilen darueber brachen auf drei Reihen
 *           um (zwei, eins, eins) und schoben die Frage um 180 px nach unten.
 */

@media (max-width: 620px) {
  /* Zu 1. Die Schriftgroesse der Ueberschrift kommt aus einer clamp-Formel mit
     5,6vw. Bei 375 px sind das 2,2rem, die untere Schranke. Die Schranke ist
     fuer den Bildschirm zu hoch, also wird sie hier gesenkt. `text-wrap:
     balance` verteilt die Zeilen gleichmaessig, statt die letzte Zeile mit
     einem Wort stehen zu lassen. */
  .buehne h1 {
    font-size: 1.95rem;
    line-height: 1.12;
    text-wrap: balance;
  }
  .buehne .kicker { margin-bottom: 0.65rem; }
  .buehne .anriss { margin-block: 0.9rem 1.25rem; }
  .buehne { padding-block: 1.6rem 2rem; }

  /* Zu 2. Vier Belegzeilen in einer zentrierten Flex-Reihe brechen bei 375 px
     auf drei Reihen um und sehen zerrissen aus. Als zweispaltiges Raster mit
     linksbuendigem Text sind es zwei saubere Reihen, und die Haken stehen
     untereinander statt versetzt. */
  .funnel-beleg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    gap: 0.45rem 0.7rem;
    margin-top: 0.75rem;
    text-align: left;
    font-size: 0.78125rem;
  }
  .funnel-beleg span { align-items: flex-start; }
  .funnel-beleg svg { margin-top: 0.15em; }

  .funnel-kopfbereich { margin-bottom: 0.9rem; }
  .funnel-kopfbereich h1 { font-size: 1.5rem; text-wrap: balance; }
  .funnel-kopfbereich p { text-wrap: balance; }
  .funnel-abschnitt { padding-block: 1.4rem 2rem; }
}

/* Befund 3: ohne `color-scheme` zeichnet der Browser das Zustimmungskaestchen,
   die Bildlaufleiste und die Textmarkierung in der Hellfassung, mitten in eine
   dunkle Seite hinein. `accent-color` faerbt nur den gesetzten Haken, nicht das
   leere Kaestchen. Die hellen Baender sind davon nicht betroffen, sie enthalten
   keine Bedienelemente des Browsers. */
:root { color-scheme: dark; }

/* Befund 4: beim Antippen legt der mobile Browser ein graues Rechteck ueber das
   Element. Auf dunklem Grund sieht das nach einem Fehler aus. Abschalten darf
   man es nur, wenn man selbst eine Rueckmeldung gibt, sonst weiss der Besucher
   nicht, ob sein Tippen angekommen ist. */
@media (hover: none) {
  a, button, label, summary { -webkit-tap-highlight-color: transparent; }
  .funnel-kachel:active {
    transform: scale(0.985);
    border-color: var(--akzent);
    background: var(--akzent-tint);
  }
  .knopf:active,
  .knopf-klein:active,
  .funnel-senden:active { transform: scale(0.985); filter: brightness(0.94); }
  .funnel-zweitknopf:active { transform: scale(0.985); border-color: var(--akzent); }
  .funnel-textlink:active { color: var(--text); }
  .funnel-haken:active span { color: var(--text); }
}

/* Befund 5: auf der Bewerbungsseite stand die erste Antwortkachel bei 542 px.
   Bei 667 px Bildschirmhoehe war damit genau eine von vier Antworten sichtbar.
   Der Besucher sieht die Frage, aber nicht, dass es mehr als eine Antwort gibt.
   Die 542 px setzen sich aus lauter kleinen Vorspannteilen zusammen, deshalb
   wird an mehreren Stellen zugleich gekuerzt.

   Der groesste Posten sind die vier Belegzeilen (79 px mit Abstand). Sie sind
   Rueckversicherung, kein Wegweiser, und wirken unter der Karte genauso. Mit
   `display: contents` verliert die Huelle ihren eigenen Kasten, ihre drei
   Kinder ruecken ins Raster der Seite auf und lassen sich einzeln sortieren.
   Ohne diesen Kniff waere `order` wirkungslos, weil die Belegzeilen ein
   Enkelkind des Rasters waeren, kein Kind. */
@media (max-width: 620px) {
  .funnel-huelle {
    display: grid;
    gap: 0;
  }
  .funnel-kopfbereich { display: contents; }
  .funnel-kopfbereich h1 { order: 1; text-align: center; margin-bottom: 0.45rem; }
  .funnel-kopfbereich p  { order: 2; text-align: center; margin-bottom: 0.85rem; }
  .funnel-karte          { order: 3; padding: 0.9rem; }
  .funnel-beleg          { order: 4; margin-top: 1.1rem; }

  /* Der Abstand oben und die Innenabstaende der Karte tragen zusammen weitere
     30 px bei, ohne etwas zu zeigen. */
  .funnel-abschnitt { padding: 0.9rem 0 2.4rem; }
  .funnel-kopf { margin-bottom: 0.65rem; }
  .funnel-hinweis { margin-bottom: 0.15rem; }
}

/* Befund 6: die Zeile ueber der Ueberschrift brach als „FUER HANDELSVERTRETER
   IM / ENERGIEVERTRIEB" um und liess ein Wort allein stehen. `balance` teilt
   die beiden Zeilen an der Sinngrenze. */
@media (max-width: 620px) {
  .kicker { text-wrap: balance; }
}

/* Nachtrag zu Befund 5: im Zweispalter brach „Schulung vor dem ersten Termin"
   in der vierten Zelle um und liess „Termin" allein stehen. Seit die Zeilen
   unter der Karte stehen, kosten sie keinen Platz mehr ueber der Falz, also
   duerfen sie untereinander stehen und als Liste gelesen werden. */
@media (max-width: 620px) {
  .funnel-beleg { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Kein Befund, sondern Messrauschen: Logo und Kopfknopf messen 43,9986 px.
   Chrome legt Boxen auf Subpixel, in CSS-Pixeln sind es bereits 44. Diese
   Regel aendert heute nichts und steht nur als Riegel da, damit die beiden
   beim naechsten Schrift- oder Abstandswechsel nicht wirklich darunter
   fallen. Wer hier misst: die Schwelle gehoert auf 43,5, nicht auf 44. */
@media (max-width: 620px) {
  .kopf .marke,
  .kopf .knopf-klein { min-height: 44px; }
  .kopf .marke { display: inline-flex; align-items: center; }
}

/* Befund 8: bei 320 px lief die ganze Seite waagerecht ueber (347 statt 320).
   Ursache ist der Kopf: der Knopf steht auf `white-space: nowrap`, damit er
   nicht zweizeilig wird, und schiebt zusammen mit dem Logo den Kopf breiter
   als den Bildschirm. Ein einziger ueberbreiter Kasten kippt die gesamte
   Seite, nicht nur sich selbst.
   320 px ist das iPhone SE der ersten Bauarten und manches Android-Geraet im
   Sparmodus. Statt den Knopf umbrechen zu lassen, schrumpfen Logo und Knopf
   gemeinsam so weit, dass beide nebeneinander passen. */
@media (max-width: 380px) {
  /* Die Schrift des Knopfes bleibt bei 13 px. Der Platz kommt aus dem Logo
     und aus den Innenabstaenden, nicht aus der Lesbarkeit. */
  .marke img { height: 20px; }
  .knopf-klein {
    padding: 0.5rem 0.55rem !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0;
  }
  .kopf { gap: 0.4rem; }
}


/* ======================================== „Was nicht dein Job ist"
 *
 * Ersetzt seit dem 17.09. den Tagesablauf an der Stelle der Future
 * Projection. Zwei Spalten je Zeile: links die Arbeit, die wegfaellt,
 * rechts wer sie stattdessen macht. Die linke Spalte ist durchgestrichen,
 * damit man die Liste auch lesen kann, ohne den Text zu lesen.
 *
 * Bewusst KEINE Uebernahme der Optik aus der Vergleichstabelle. Die arbeitet
 * mit Kreuz gegen Haken und zwei Anbietern; wuerde diese Liste genauso
 * aussehen, laesen beide Baender wie dasselbe Bauteil zweimal.
 */

.nichtjob {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie);
}
.nichtjob li {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linie);
}
.nichtjob-weg {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-leise);
  /* Der Durchstrich ist die eigentliche Aussage. Er darf deshalb nicht
     mausgrau sein wie der Text, sondern traegt die Warnfarbe. */
  text-decoration: line-through;
  text-decoration-color: var(--warnung);
  text-decoration-thickness: 1.5px;
}
.nichtjob-weg svg {
  width: 17px;
  height: 17px;
  flex: none;
  align-self: flex-start;
  margin-top: 0.2em;
  color: var(--warnung);
  /* Das Kreuz gehoert nicht zum Wort, also auch nicht unter den Strich. */
  text-decoration: none;
}
.nichtjob-wer {
  font-size: 0.875rem;
  color: var(--text-leise);
}

.nichtjob-schluss {
  margin-top: 1.8rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--linie-hell);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius);
  background: var(--grund-erhoben);
}
.nichtjob-schluss p { margin: 0; color: var(--text-leise); }
.nichtjob-dein {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem !important;
  font-size: 1.1875rem;
  color: var(--text) !important;
}
.nichtjob-dein svg { width: 20px; height: 20px; flex: none; color: var(--akzent-hell); }
.nichtjob-dein b { font-weight: 700; }

@media (max-width: 620px) {
  /* Zwei Spalten sind bei 375 px zu eng: die rechte Spalte bekaeme vier
     Woerter pro Zeile. Untereinander, mit der Zustaendigkeit eingerueckt
     unter der durchgestrichenen Arbeit. */
  .nichtjob li {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.8rem 0;
  }
  .nichtjob-weg { font-size: 1rem; }
  .nichtjob-wer { padding-left: 1.65rem; font-size: 0.875rem; }
  .nichtjob-schluss { padding: 1rem 1.1rem; }
  .nichtjob-dein { font-size: 1.0625rem; }
}

/* „Dein Job:" und der Rest des Satzes waren zwei getrennte Flex-Kinder und
   wurden am Handy einzeln umgebrochen: „Dein" und „Job:" standen unterein-
   ander. Der ganze Satz gehoert in EIN Kind, dann bricht er als Satz um. */
.nichtjob-dein > span { min-width: 0; }


/* ==================================== Ausstiegsseite /kein-treffer/
 *
 * Erreicht nur, wer im Funnel angibt, dass eine Selbstaendigkeit fuer ihn
 * nicht in Frage kommt. Das ist der einzige harte Ausstieg im Trichter, und
 * er ist fachlich zwingend: eine Handelsvertretung IST eine selbstaendige
 * Taetigkeit (HGB §84). Die Seite baut auf `.danke` auf, braucht aber mehr
 * Breite, weil hier ein Sachverhalt erklaert wird statt eines Dankes.
 */
.danke-breit { width: min(680px, 100% - 2rem); text-align: left; align-items: stretch; }
.danke-breit .danke-zeichen { align-self: center; }
.danke-breit h1 { text-align: center; }
/* Die Absaetze fuellen die Spalte wie die Kaesten darunter. Mit `max-width:
   70ch` und `margin-inline: auto` schrumpften sie im Flex-Kasten und standen
   zwischen 700 und 1200 px 15 px eingerueckt neben den Kaesten (21.10.2026).
   Die kurze Zeile unter dem Knopf bleibt mittig unter dem mittigen Knopf. */
.danke-breit > p:not(.unter-knopf) { max-width: none; margin-inline: 0; }
.danke-zeichen-warn { color: var(--warnung); }

.ausstieg-wege {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.ausstieg-wege > div {
  padding: 1rem 1.15rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius);
  background: var(--grund-erhoben);
}
.ausstieg-wege b { display: block; margin-bottom: 0.3rem; color: var(--text); }
.ausstieg-wege p { margin: 0; color: var(--text-leise); font-size: 0.9375rem; }


/* ============================================ Einwand im Funnel
 *
 * Weicher Einwand zwischen zwei Fragen. Bewusst NICHT in der Warnfarbe der
 * Fehlermeldung: hier ist nichts schiefgegangen, es geht gleich weiter.
 */
.funnel-einwand-kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent-hell);
}
.funnel-einwand-kopf svg { width: 18px; height: 18px; flex: none; }
.funnel-frage-klein {
  margin: 0 0 0.6rem;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--text);
}
.funnel-einwand .funnel-hinweis { margin-bottom: 1.2rem; }

/* Zwischenansicht (27.10.2026, KI-Anruf „Lieber nicht"): Hauptknopf wie
 * beim Einwand, darunter ein leiser Zurueck-Knopf und ein Textlink fuer den
 * Weg ohne KI. Farben nur ueber Token, damit hell und dunkel stimmen. */
.funnel-zwischen .funnel-frage-klein { margin-bottom: 1.2rem; }
.funnel-zweitknopf {
  width: 100%;
  min-height: 48px;
  margin-top: 0.6rem;
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color var(--uebergang);
}
.funnel-zweitknopf:hover { border-color: var(--akzent); }
.funnel-textlink {
  display: block;
  margin: 0.9rem auto 0;
  padding: 0.4rem 0.5rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-leise);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.funnel-textlink:hover { color: var(--text); }


/* ======================================= Kontrast der Formularfelder
 *
 * Gemeldet am 17.09.: „das ist so dunkel, man kann das kaum lesen."
 * Nachgemessen nach WCAG, und der Befund stimmte an drei Stellen:
 *
 *   Rahmen gegen die Karte      1,56:1   verlangt sind 3,0 (Bedienelement)
 *   Flaeche gegen die Karte     1,10:1   das Feld war praktisch unsichtbar
 *   Platzhalter auf der Flaeche 4,46:1   verlangt sind 4,5 (Text)
 *
 * Die Flaeche war `var(--grund)` und damit DUNKLER als die Karte, auf der
 * sie liegt. Ein eingelassenes Feld ist gestalterisch in Ordnung, aber dann
 * muss der Rahmen die Form tragen, und der war zu schwach dafuer.
 *
 * Der Platzhalter scheiterte an der Deckkraft: 0.7 auf `--text-leise` ergibt
 * gezeichnet #707b81. Deckkraft ist bei Kontrastfragen immer die Falle, weil
 * im Quelltext eine ganz andere Farbe steht als auf dem Schirm.
 *
 * Nachgemessen mit den neuen Werten:
 *   Rahmen gegen die Karte      3,37:1
 *   Rahmen gegen die Flaeche    3,47:1
 *   Platzhalter auf der Flaeche 6,26:1
 *   Eingetragener Text          16,6:1
 */
.funnel-feld input,
.funnel-feld textarea {
  background: #11171a;
  border-color: #646e74;
}
.funnel-feld input::placeholder,
.funnel-feld textarea::placeholder {
  color: #8d9aa1;
  /* Keine Deckkraft mehr: sie macht jede Kontrastangabe unpruefbar. */
  opacity: 1;
}
/* Das Etikett benennt das Feld und ist keine Nebensache. */
.funnel-feld label { color: var(--text); font-weight: 600; }

/* Der Fokusrahmen muss sich vom ruhenden Rahmen ABHEBEN, sonst sieht man
   nicht, in welchem Feld man gerade steht. Zwei Pixel Ring statt nur einer
   Farbaenderung, weil der Akzent auf Dunkel aehnlich hell wirkt wie das
   neue Grau. */
.funnel-feld input:focus,
.funnel-feld textarea:focus {
  border-color: var(--akzent-hell);
  box-shadow: 0 0 0 2px var(--akzent-tint);
}


/* ================================================ Kultur im Galerie-Band
 *
 * Das Band hiess „Bei uns im Alltag" und bestand aus vier Bildplatzhaltern
 * ohne ein einziges Argument. Es war damit das einzige Band der Seite, das
 * nichts behauptet. Hier steht jetzt, was der Auftraggeber als eigentlichen
 * Grund nennt, warum Leute bleiben: Anspruch, Fachtiefe, Buero, Team.
 *
 * Vier Punkte in zwei Reihen, KEINE Haken-Liste: die gibt es im
 * Loesungsband schon, und zwei gleich aussehende Listen auf einer Seite
 * lesen sich wie ein Versehen.
 */
.kultur {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2.4rem;
  margin-bottom: 2.6rem;
  text-align: left;
}
.kultur-punkt svg {
  width: 30px;
  height: 30px;
  margin-bottom: 0.7rem;
  color: var(--akzent-hell);
}
.kultur-punkt h3 {
  margin-bottom: 0.4rem;
  font-size: 1.125rem;
}
.kultur-punkt p {
  margin: 0;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

@media (max-width: 760px) {
  .kultur { grid-template-columns: 1fr; gap: 1.5rem; }
}


/* ============================ Ein Schritt, ein Bildschirm im Funnel
 *
 * Vorbild: weissbrenner-vertrieb.de. Dort fuellt jede Frage den ganzen
 * Bildschirm, ueber der Frage steht nichts als das Logo. Bei uns schoben
 * sich Ueberschrift und Vorspann bei JEDER Frage erneut ins Bild und
 * drueckten die Antworten nach unten.
 *
 * Sie verschwinden ab der zweiten Ansicht (Klasse kommt aus funnel.js).
 * Der Uebergang ist eine Blende, kein Springen: ohne sie ruckt die Karte
 * beim ersten Klick um rund 90 px nach oben.
 */
.funnel-kopfbereich h1,
.funnel-kopfbereich > p {
  transition: opacity 0.2s ease;
}
.funnel-unterwegs .funnel-kopfbereich h1,
.funnel-unterwegs .funnel-kopfbereich > p {
  display: none;
}

/* Die Belegzeilen bleiben stehen. Sie sind Rueckversicherung genau an der
   Stelle, an der jemand ueberlegt, ob er weitermacht, und kosten auf dem
   Handy nichts mehr: sie stehen dort unter der Karte. */


/* ======================================== Danke-Seite, neuer Aufbau
 *
 * Bis zum 17.09. war das eine schmale zentrierte Spalte mit zwei Saetzen.
 * Vorbild ist jetzt die Danke-Seite von winkelenergie.de: Bestaetigung,
 * dann ein Video „was passiert als Naechstes", dann Belege. Der Moment
 * direkt nach dem Abschicken ist der mit der hoechsten Aufmerksamkeit,
 * und er wurde bisher mit einem Knopf „Zurueck zur Startseite" verschenkt.
 *
 * Die Seite nutzt jetzt dieselben Baender wie die Startseite. Das alte
 * `.danke` bleibt bestehen, die Ausstiegsseite /kein-treffer/ baut darauf.
 */
.danke-seite .danke-kopf {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 2rem;
}
.danke-seite .danke-kopf .danke-zeichen {
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
  color: var(--akzent);
}
.danke-seite .danke-kopf .anriss { margin-inline: auto; }

/* Das Videofeld ist breiter als ein Bildplatzhalter und haelt sein
   Seitenverhaeltnis, damit die Seite beim spaeteren Einsetzen des Videos
   nicht springt. */
.platzhalter-video {
  /* ⚠️ `width: 100%` mit `box-sizing: border-box`. Ohne beides zaehlen die
     1,2 rem Innenabstand und der Rahmen ZUSAETZLICH zur Breite, und bei
     320 px lief die Seite um 2 px ueber. Gemessen, nicht vermutet. */
  width: 100%;
  max-width: 52rem;
  box-sizing: border-box;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
}

.danke-kontakt {
  margin-top: 2.2rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius);
  background: var(--grund-erhoben);
}
.danke-kontakt p { margin: 0; color: var(--text-leise); }
.danke-kontakt b { color: var(--text); }

.galerie-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) {
  .galerie-zwei { grid-template-columns: 1fr; }
}

/* Ein zweiter, leiser Knopf fuer Wege, die nicht das Ziel der Seite sind. */
.knopf-still {
  background: none;
  color: var(--text-leise);
  border: 1px solid var(--linie-hell);
  box-shadow: none;
}
.knopf-still:hover { color: var(--text); border-color: var(--akzent); }


/* =============================== Umbau 20.10.2026 nach Matthias' Durchgang
 *
 * Platzhalter raus, Pitch auf Team und Auftraggeber, Kopfzeile hell,
 * Baender Graphit. Neue Bausteine stehen hier gesammelt.
 */

/* Buehnenbild rechts, echtes Foto statt Platzhalter. */
.buehne-bild {
  margin: 0;
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
  border: 1px solid var(--linie);
}
.buehne-bild img,
.markt-bild img,
.galerie-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.buehne-bild { aspect-ratio: 4 / 3; }

/* Seit 27.10.2026 (Video Matthias) steht im Hero statt des Fotos das W, gross
   und fett. Das W ist mattschwarz, auf Graphit also auf einer Creme-Kachel
   wie im Fuss (ANLEITUNG der Marke: nie invertieren). */
/* Das W frei auf dem dunklen Grund, als Drehung aus dem Blender-Modell (Wertkraft/werkzeug/w_dreh.py).
   Die Kachel entfällt hier bewusst: das Kantenlicht im Render und der Schein dahinter tragen den
   Kontrast. Standbild und Video liegen deckungsgleich, das Standbild ist Bild 0 des Videos. */
.buehne-marke {
  position: relative;
  margin: 0 -9%;
  aspect-ratio: 4 / 3;
}
.buehne-marke::before {
  content: "";
  position: absolute;
  inset: -4% 2%;
  background: radial-gradient(closest-side, rgba(201, 128, 60, 0.26), rgba(201, 128, 60, 0.08) 58%, transparent);
  pointer-events: none;
}
.buehne-marke img,
.buehne-marke video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.buehne-marke video { visibility: hidden; }
.buehne-marke.laeuft video { visibility: visible; }
.buehne-marke.laeuft img { visibility: hidden; }
.buehne-marke video:focus { outline: none; }
@media (max-width: 860px) {
  .buehne-marke { margin: 0 -4%; }
}

/* Symptome als Karten: war eine zweite Hakenliste und sah nach Versehen aus. */
.symptome-karten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.symptome-karten li {
  padding: 1.25rem 1.3rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--grund-erhoben);
}
.symptome-karten svg {
  width: 22px;
  height: 22px;
  margin-bottom: 0.7rem;
  fill: none;
  stroke: var(--warnung);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.symptome-karten b { display: block; margin-bottom: 0.35rem; line-height: 1.3; }
.symptome-karten p { color: var(--text-leise); font-size: 0.9375rem; }
@media (max-width: 860px) { .symptome-karten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .symptome-karten { grid-template-columns: 1fr; } }

/* Drei Saeulen: Team, Produkt, Auftraggeber. Zentriert, grosse Ziffer. */
.saeulen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  text-align: center;
}
.saeulen li {
  padding: 1.6rem 1.4rem 1.5rem;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--akzent);
  border-radius: var(--radius-gross);
  background: var(--grund-erhoben);
  box-shadow: 0 26px 60px -44px rgba(0, 0, 0, 0.5);
}
.saeule-nr {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--akzent-hell);
}
.saeulen h3 { margin-bottom: 0.5rem; font-size: 1.1875rem; }
.saeulen p { margin-inline: auto; color: var(--text-leise); font-size: 0.9375rem; }
@media (max-width: 760px) { .saeulen { grid-template-columns: 1fr; } }

/* Hinweis unter der Hakenliste mittig. */
.hinweis-mitte { text-align: center; margin-inline: auto; }

/* Marktbilder im Zickzack. */
.markt-bild {
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-gross);
  overflow: hidden;
  border: 1px solid var(--linie);
  box-shadow: 0 26px 60px -40px rgba(0, 0, 0, 0.5);
}

/* Hersteller als Namen, klein und leise. Keine Logos. */
.hersteller { padding-block: 2rem; }
.hersteller-reihe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2.2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.hersteller .logos-titel { margin-bottom: 0.9rem; }

/* Monogramm statt Portraet, bis echte Fotos mit Einwilligung da sind. */
.monogramm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--akzent-tint);
  border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
  color: var(--akzent-hell);
  font-size: 1.5rem;
  font-weight: 700;
}
.geschichte blockquote { margin: 0; color: var(--text-leise); }
.geschichte-rolle { color: var(--text-leise); }

/* Galerie mit echten Bildern. */
.galerie-bild {
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-gross);
  overflow: hidden;
  border: 1px solid var(--linie);
}

/* Fusszeile auf Graphit mit heller Schrift bleibt, wie gehabt. */

/* Bewerbungsseite hell: Matthias will den Funnel nicht auf Schwarz. Die
   Seite setzt die hellen Token auf body und kommt ohne Scrollen aus. */
body.seite-hell {
  --grund: #f3f1ed;
  --grund-erhoben: #ffffff;
  --linie: #ded8cf;
  --linie-hell: #c8c0b4;
  --text: #16191b;
  --text-leise: #5d666b;
  --akzent-hell: #8a5220;
  --akzent-tint: rgba(201, 128, 60, 0.14);
  --warnung: #9d3b2c;
}
body.seite-hell .funnel-abschnitt { padding-top: 1rem; }
body.seite-hell .funnel-kopfbereich h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 0.4rem; }
body.seite-hell .funnel-kopfbereich { margin-bottom: 0.9rem; }
body.seite-hell .funnel-buehne { min-height: 300px; }
body.seite-hell footer { border-top: 1px solid var(--linie); }

/* Der lange Knopftext sprengte bei 390 px die Kopfzeile und damit die
   ganze Seite nach rechts. Schmal steht ein kurzer Text, breit der volle. */
.nur-schmal { display: none; }
@media (max-width: 720px) {
  .nur-breit { display: none; }
  .nur-schmal { display: inline; }
}
.kopf { overflow: hidden; }
/* Funnel ohne Scrollen auch auf 1280 x 720: Kopf knapper, Fusszeile flacher. */
body.seite-hell .funnel-abschnitt { padding: 0.6rem 0 1.2rem; }
body.seite-hell .funnel-kopfbereich { margin-bottom: 0.7rem; }
body.seite-hell .funnel-kopfbereich h1 { font-size: clamp(1.4rem, 3.5vw, 1.75rem); margin-bottom: 0.3rem; }
body.seite-hell .funnel-kopfbereich > p { font-size: 0.9375rem; }
body.seite-hell .funnel-beleg { margin-top: 0.5rem; }
body.seite-hell .funnel-karte { padding: 1rem 1.1rem; }
body.seite-hell .funnel-buehne { min-height: 0; }
body.seite-hell footer { padding-block: 1.2rem; }

/* Danke-Seite: Teamfoto statt Videoplatzhalter. */
.danke-bild {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  border-radius: var(--radius-gross);
  overflow: hidden;
  border: 1px solid var(--linie);
}
.danke-bild img { display: block; width: 100%; height: auto; }

/* Fusszeile: nur das W, kein Schriftzug (Matthias 20.10.). Auf Graphit die
   helle Silhouette, auf der hellen Bewerbungsseite das dunkle Original. */
.fuss-marke {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  /* V04 ist mattschwarz; auf Graphit braucht das W eine helle Kachel, wie das Favicon. */
  background: #f3f1ed;
}
.fuss-marke img { height: 26px; width: auto; display: block; }

.zahlen { list-style:none; margin:1.6rem 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; text-align:center; }
.zahlen li b { display:block; font-size:2rem; font-weight:700; color:var(--akzent-hell); letter-spacing:-.03em; }
.zahlen li span { font-size:.85rem; color:var(--text-leise); }
@media (max-width:720px){ .zahlen { grid-template-columns:1fr 1fr; } }
.faq p a { color: var(--akzent-hell); font-weight:600; }

/* Lange Absaetze am Handy linksbuendig: zentrierter Flattersatz ueber sechs Zeilen liest sich schlecht. */
@media (max-width: 640px) {
  .block-kopf .anriss, .leitsatz.mitte { text-align: left !important; }
}

/* Schluss-Kasten am Handy: Knopf über die volle Kartenbreite, damit
   „Vertriebspartnerschaft anfragen“ einzeilig bleibt. */
@media (max-width: 480px) {
  .tat-karte { padding-inline: 1rem; }
  .tat-karte .knopf { display: flex; justify-content: center; width: 100%; padding-inline: 0.75rem; }
}

/* ============================================================ Stellen
 *
 * /bewerben/ ist seit 21.10.2026 die Auswahl der Stelle (Video Matthias):
 * drei Karten, jede fuehrt direkt in ihren Fragebogen unter
 * /bewerben/<stelle>/. Die Karten sind gleich hoch, der Knopf sitzt immer
 * unten, auch wenn ein Titel zweizeilig ist und der Nachbar nicht.
 */
.stellen-abschnitt { padding: clamp(1.6rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.6rem); }
/* In rem, damit die Breite die 110 % ab Laptopbreite mitmacht. */
.stellen-huelle { width: min(65rem, 100% - 2rem); margin-inline: auto; }
.stellen-kopf { text-align: center; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.stellen-kopf h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 0.6rem; }
.stellen-kopf p { max-width: 52ch; margin: 0 auto; color: var(--text-leise); }

.stellen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.stellen > li { display: flex; }

.stelle-karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 1.4rem 1.4rem 1.35rem;
  background: var(--grund-erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 18px 40px -32px rgba(0, 0, 0, 0.45);
  transition: border-color var(--uebergang), transform var(--uebergang),
              box-shadow var(--uebergang);
}
.stelle-karte:hover {
  border-color: var(--akzent);
  transform: translateY(-2px);
  box-shadow: 0 24px 46px -30px rgba(0, 0, 0, 0.5);
}
.stelle-badge {
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--akzent-tint);
  color: var(--akzent-hell);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stelle-icon {
  width: 46px;
  height: 46px;
  margin-top: 0.35rem;
  fill: none;
  stroke: var(--akzent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stelle-karte h2 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.015em; }
.stelle-karte p { margin: 0; color: var(--text-leise); font-size: 0.9375rem; }
/* `margin-top: auto` schiebt den Knopf an den Kartenboden. */
.stelle-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  background: var(--knopf-grund);
  color: var(--knopf-tinte);
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: 0 10px 22px -14px rgba(201, 128, 60, 0.9);
}
.stelle-knopf svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--uebergang);
}
.stelle-karte:hover .stelle-knopf { filter: brightness(1.08); }
.stelle-karte:hover .stelle-knopf svg { transform: translateX(3px); }
.stellen-fuss {
  margin: 1.4rem auto 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-leise);
}

@media (max-width: 860px) {
  .stellen { grid-template-columns: 1fr; gap: 0.9rem; }
  .stelle-karte { padding: 1.15rem 1.15rem 1.1rem; }
  .stelle-icon { width: 40px; height: 40px; }
}

/* Eingabefelder auf der hellen Bewerbungsseite (21.10.2026). Die Felder
   waren seit 17.09. hart dunkel (#11171a), aus der Zeit, als der Fragebogen
   auf schwarzem Grund lag. Seit die Seite hell ist (20.10.), standen dort
   dunkle Kaesten auf weisser Karte. `color-scheme` mit, sonst zeichnet der
   Browser Haken und Autofill weiter in der Dunkelfassung.
   Nachgemessen: Rahmen gegen Karte 3,77:1, gegen Feld 3,68:1, Platzhalter
   4,71:1, Text 17,2:1, Fokusrahmen 6,19:1. */
body.seite-hell { color-scheme: light; }
body.seite-hell .funnel-feld input,
body.seite-hell .funnel-feld textarea {
  background: #fdfcfa;
  border-color: #8b8279;
}
body.seite-hell .funnel-feld input::placeholder,
body.seite-hell .funnel-feld textarea::placeholder { color: #6b7378; }
/* ⚠️ Die Regel oben (0,2,2) schlug die allgemeinen Fokus- und Fehlerregeln
   (0,2,1): im Fokus blieb der Rahmen grau, nur ein Schimmer von 1,13:1 war
   zu sehen, und `aria-invalid` faerbte nicht mehr rot (Frischblick
   21.10.2026). Deshalb hier mit hoeherer Spezifitaet (0,3,2) und einem echten Ring:
   Fokusring 6,35:1 gegen die Karte, Fehlerrahmen 6,62:1 gegen das Feld. */
body.seite-hell .funnel-feld input:focus,
body.seite-hell .funnel-feld textarea:focus {
  border-color: var(--akzent-hell);
  outline: 2px solid var(--akzent-hell);
  outline-offset: 1px;
  box-shadow: none;
}
body.seite-hell .funnel-feld input[aria-invalid="true"] { border-color: var(--warnung); }

/* Absendeknopf beim Ueberfahren: `--akzent-hell` ist auf der hellen Seite
   Dunkelbraun (#8a5220), darauf stand die dunkle Knopftinte mit 2,95:1.
   Heller statt dunkler: 6,73:1 am Pixel gemessen.
   ⚠️ Nur auf Geraeten mit Maus: am Handy bleibt :hover nach dem Antippen
   haengen und ueberdeckte die Druckrueckmeldung (:active, dunkler), der
   Knopf wurde beim Druecken heller statt dunkler (Frischblick Runde 2). */
body.seite-hell .funnel-senden:hover:not(:disabled) { background: var(--akzent); }
@media (hover: hover) {
  body.seite-hell .funnel-senden:hover:not(:disabled) { filter: brightness(1.08); }
}
/* ⚠️ Die Flaeche gilt OHNE Medienabfrage: am Handy bleibt :hover nach dem
   Antippen haengen, und sonst griff dort die allgemeine Regel mit dem
   dunklen `--akzent-hell` (2,95:1, Frischblick Runde 3). Nur der hellere
   Filter ist Maus-Geraeten vorbehalten. */

/* ================================================ Danke-Seite mit Lea
 * (Matthias 29.10.2026) Nur mit ?anruf=ki, gesteuert von /lea-anruf.js:
 * ein klingelndes Handy mit Lea als Anruferin und ein Countdown, damit der
 * Anruf nicht als unbekannte Nummer weggedrueckt wird. Farben nur ueber die
 * Token des dunklen Bandes; Gruen und Rot nur auf den beiden Telefontasten.
 */
.lea-anruf[hidden], .lea-ziel[hidden], .lea-uhr[hidden] { display: none; }
.mit-lea .danke-bild { display: none; }

.lea-anruf {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 58rem;
  margin: 0 auto;
  /* Die Wellen wachsen ueber das Handy hinaus. clip statt hidden, damit kein
     Scrollbereich entsteht (bei 390 px lief die Seite sonst quer ueber). */
  overflow: clip;
}

.lea-buehne {
  position: relative;
  display: grid;
  place-items: center;
  width: 280px;
  height: 460px;
}
.lea-welle {
  position: absolute;
  top: 50%; left: 50%;
  width: 240px; height: 240px;
  margin: -120px 0 0 -120px;
  border: 2px solid var(--akzent);
  border-radius: 50%;
  opacity: 0;
  animation: lea-welle 2.7s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.lea-welle:nth-child(2) { animation-delay: 0.9s; }
.lea-welle:nth-child(3) { animation-delay: 1.8s; }
@keyframes lea-welle {
  0%   { transform: scale(0.55); opacity: 0.55; }
  100% { transform: scale(1.75); opacity: 0; }
}

.lea-geraet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 216px;
  height: 436px;
  box-sizing: border-box;
  padding: 3.2rem 1.1rem 1.7rem;
  border: 2px solid var(--linie-hell);
  border-radius: 38px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(201, 128, 60, 0.22), transparent 62%),
    linear-gradient(170deg, #2b3137, #121417);
  box-shadow: inset 0 0 0 6px #0b0d0f, 0 34px 70px -24px rgba(0, 0, 0, 0.75);
  color: var(--text);
  text-align: center;
  animation: lea-vibrieren 2.7s ease-in-out infinite;
}
.lea-insel {
  position: absolute;
  top: 15px; left: 50%;
  width: 72px; height: 21px;
  margin-left: -36px;
  border-radius: 12px;
  background: #000;
}
.lea-geraet p { margin: 0; }
.lea-geraet-status {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.lea-avatar {
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  margin: 1.6rem 0 1rem;
  border-radius: 50%;
  background: var(--knopf-grund);
  color: var(--knopf-tinte);
  font-size: 2.4rem;
  font-weight: 700;
  box-shadow: 0 0 0 6px rgba(201, 128, 60, 0.16), 0 12px 30px -10px rgba(201, 128, 60, 0.8);
}
.lea-geraet-name { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.01em; }
.lea-geraet-firma { margin-top: 0.15rem !important; color: var(--text-leise); font-size: 0.9rem; }
.lea-geraet-nummer { margin-top: 0.5rem !important; color: var(--text-leise); font-size: 0.8rem; letter-spacing: 0.04em; }
.lea-tasten { display: flex; gap: 3.4rem; margin-top: auto; }
.lea-taste {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
}
.lea-taste svg { width: 26px; height: 26px; fill: #fff; }
.lea-taste-nein { background: #d4554a; }
.lea-taste-ja { background: #34a865; animation: lea-annehmen 1.35s ease-out infinite; }
@keyframes lea-annehmen {
  0%   { box-shadow: 0 0 0 0 rgba(52, 168, 101, 0.6); }
  100% { box-shadow: 0 0 0 18px rgba(52, 168, 101, 0); }
}
@keyframes lea-vibrieren {
  0%, 58%, 80%, 100% { transform: rotate(0); }
  61% { transform: rotate(-2.4deg) translateX(-2px); }
  64% { transform: rotate(2.4deg) translateX(2px); }
  67% { transform: rotate(-2.4deg) translateX(-2px); }
  70% { transform: rotate(2.4deg) translateX(2px); }
  73% { transform: rotate(-1.2deg); }
  76% { transform: rotate(1.2deg); }
}

.lea-etikett {
  margin: 0 0 0.6rem;
  color: var(--akzent-hell);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lea-text h2 { margin: 0; font-size: clamp(1.8rem, 4.2vw, 2.6rem); line-height: 1.12; }
.lea-unterzeile { margin: 0.7rem 0 0; color: var(--text-leise); font-size: 1.05rem; }

.lea-uhr { position: relative; width: 136px; height: 136px; margin: 1.5rem 0 1.4rem; }
.lea-uhr svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lea-uhr circle { fill: none; stroke-width: 8; }
.lea-ring-grund { stroke: var(--linie); }
.lea-ring-fortschritt {
  stroke: var(--akzent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s linear, stroke 0.3s;
}
.lea-uhr-mitte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lea-sekunden { font-size: 2.1rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.lea-uhr-text { margin-top: 0.3rem; color: var(--text-leise); font-size: 0.8rem; }

.lea-ziel {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 1.3rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius);
  background: var(--grund-erhoben);
}
.lea-ziel-etikett, .lea-ziel-hilfe { color: var(--text-leise); font-size: 0.85rem; }
.lea-ziel-nummer { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.lea-ziel-hilfe a { color: var(--akzent-hell); }

.lea-schritte { margin: 0; padding-left: 1.2rem; color: var(--text-leise); }
.lea-schritte li + li { margin-top: 0.55rem; }
.lea-schritte b { color: var(--text); }
.lea-nowrap { white-space: nowrap; }
.lea-knopf { margin-top: 1.5rem; }
.lea-fussnote { margin: 0.9rem 0 0; color: var(--text-leise); font-size: 0.875rem; }

/* Nochmal-Knopf (Matthias 07.11.2026): erst nach dem Countdown, einmal je
 * Bewerbung. Ein <button>, darum Rahmen und Schrift zuruecksetzen. */
.lea-nochmal[hidden] { display: none; }
.lea-nochmal { margin: 0 0 1.4rem; }
.lea-nochmal-frage { margin: 0; font-weight: 700; color: var(--text); }
.lea-nochmal-knopf { margin-top: 0.7rem; border: 0; font-family: inherit; cursor: pointer; }
.lea-nochmal-knopf[disabled] { cursor: default; opacity: 1; filter: saturate(0.4); transform: none; }
.lea-nochmal-knopf[hidden] { display: none; }
.lea-nochmal-meldung { margin: 0.7rem 0 0; color: var(--text); }
.lea-nochmal-meldung:empty { display: none; }

/* Wunschzeit (Matthias 08.11.2026): ausserhalb der Anrufzeiten „Jetzt
 * telefonieren“ oder Tag und Stunde waehlen. Knoepfe sind <button>, darum
 * Rahmen und Schrift zuruecksetzen. Gesperrt wird ueber Farbe, nicht ueber
 * opacity (die senkt den Kontrast unbemerkt). */
.lea-wunsch[hidden] { display: none; }
.lea-wunsch { margin: 1.5rem 0 1.4rem; }
.lea-wunsch-jetzt { margin-top: 0; border: 0; font-family: inherit; cursor: pointer; }
.lea-wunsch-jetzt[disabled] { cursor: default; filter: saturate(0.4); transform: none; }
.lea-wunsch-oder { margin: 1.4rem 0 0.6rem; font-weight: 700; color: var(--text); }
.lea-wunsch-tage, .lea-wunsch-stunden { display: grid; gap: 0.45rem; max-width: 26rem; }
.lea-wunsch-tage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lea-wunsch-stunden { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0.55rem; }
.lea-wahl {
  display: grid;
  place-items: center;
  gap: 0.1rem;
  min-height: 44px;
  padding: 0.45rem 0.3rem;
  border: 1px solid var(--linie-hell);
  border-radius: 8px;
  background: var(--grund-erhoben);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--uebergang), background var(--uebergang);
}
.lea-wahl small { color: var(--text-leise); font-size: 0.78rem; font-weight: 500; }
.lea-wahl:hover { border-color: var(--akzent); }
.lea-wahl[aria-pressed="true"] {
  border-color: var(--akzent);
  background: var(--akzent-tint);
  box-shadow: inset 0 0 0 1px var(--akzent);
}
.lea-wahl[aria-pressed="true"] small { color: var(--text); }
.lea-wahl:focus-visible, .lea-wunsch-knopf:focus-visible {
  outline: 2px solid var(--akzent-hell);
  outline-offset: 2px;
}
.lea-wunsch-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 0.9rem;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid var(--akzent);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.lea-wunsch-knopf:hover:not([disabled]) { background: var(--akzent-tint); }
.lea-wunsch-knopf[disabled] { border-color: var(--linie-hell); color: var(--text-leise); cursor: default; }
.lea-wunsch-meldung { margin: 0 0 1.4rem; color: var(--text); font-weight: 600; }
.lea-wunsch-meldung:empty { display: none; }

/* Countdown abgelaufen: es klingelt jetzt, der Ring wird gruen. */
.lea-jetzt .lea-ring-fortschritt { stroke: #34a865; }
.lea-jetzt .lea-geraet { animation-duration: 1.4s; }

/* Ausserhalb der Anrufzeit: ruhiges Bild, kein Klingeln. */
.lea-spaeter .lea-welle { display: none; }
.lea-spaeter .lea-geraet, .lea-spaeter .lea-taste-ja { animation: none; }
.lea-spaeter .lea-ziel { margin-top: 1.4rem; }

@media (max-width: 760px) {
  .lea-anruf { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .lea-buehne { width: 100%; height: 400px; }
  .lea-geraet { transform-origin: 50% 50%; scale: 0.9; }
  .lea-uhr { margin-inline: auto; }
  .lea-text { text-align: center; }
  .lea-ziel, .lea-schritte { text-align: left; }
  .lea-knopf, .lea-nochmal-knopf { width: 100%; justify-content: center; box-sizing: border-box; }
  .lea-wunsch-jetzt, .lea-wunsch-knopf { width: 100%; justify-content: center; box-sizing: border-box; }
  .lea-wunsch-tage, .lea-wunsch-stunden { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lea-welle { display: none; }
  .lea-geraet, .lea-taste-ja { animation: none; }
  .lea-ring-fortschritt { transition: none; }
}