/* Pickadoc Erlebnis-Demo — Gestaltung.
 *
 * Bewusst eigenstaendig: keine Abhaengigkeit auf die Marketing-Seite, damit
 * dieser Ordner ohne Bauschritt auf jedem Hoster liegen kann. Die Tokens sind
 * dieselben wie in "homepage 2026/tokens.css" (Marke: #d862c8), damit die
 * Demo nicht wie ein Fremdkoerper aussieht.
 */

:root {
  --pink: #d862c8;
  --pink-light: #e89fdd;
  --pink-ultra: #fbeefa;
  --pink-tint: #fdf6fc;
  --ink: #3a3a3a;
  --ink-light: #4c4a4a;
  --btn: #2f2f2f;
  --btn-hover: #1b1b1b;
  --font: #6f6f72;
  --white: #fff;
  --alt: #f5f6f8;
  --grid: #e8e9ed;
  --gruen: #2f8b5d;
  --gruen-bg: #e6f5ec;
  --gelb-bg: #faf2da;
  --gelb-fg: #b07d18;
  --rot: #cf3b30;
  --rot-bg: #fde7e5;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --sh-sm: 0 2px 8px rgba(40, 40, 45, 0.05);
  --sh-md: 0 10px 30px rgba(40, 40, 45, 0.08);
  --sh-lg: 0 24px 60px rgba(40, 40, 45, 0.12);
  --grad-ink: linear-gradient(145deg, #3c3c3c 0%, #2c2c2c 100%);
  --grad-pink: linear-gradient(135deg, #d862c8, #b13fa0);
  --schrift: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

/* `hidden` muss wirklich verstecken.
 *
 * Das `display: none` fuer [hidden] kommt aus dem Browser-Standardstil, und
 * der verliert gegen JEDE eigene display-Regel — auch gegen eine schwache wie
 * `.knopf { display: inline-flex }`. Folge (gesehen im Film-Modus): die
 * Stationen setzen `el.hidden = true`, der Knopf bleibt trotzdem stehen und
 * verspricht "Verbinden und sprechen", obwohl gerade nichts zu verbinden ist.
 * Einmal hier hart gesetzt gilt es fuer alle Stationen. */
[hidden] {
  display: none !important;
}

/* MINDEST-Hoehe, nicht feste Hoehe.
 *
 * Mit height:100% blieb der Seitenkoerper genau einen Bildschirm hoch, waehrend
 * der Inhalt darunter hinauslief. Die klebende Fussleiste klebt aber am unteren
 * Rand DIESES Koerpers - sie parkte deshalb eine Bildschirmhoehe tief, schob
 * sich beim Scrollen mitten ueber den Inhalt und war am Ende langer Stationen
 * gar nicht mehr erreichbar (gemessen am 18.08.2026 auf 390 px). */
html {
  min-height: 100%;
}
body {
  min-height: 100vh;
  /* svh = die kleine Fassung der Fensterhoehe: auf dem Telefon zaehlt die
   * Adressleiste damit nicht doppelt. Browser ohne svh nehmen die Zeile
   * darueber. */
  min-height: 100svh;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--alt);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

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

/* ---------------------------------------------------------- Kopf + Schiene */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--grid);
}

.kopf__reihe {
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.marke__punkt {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--grad-pink);
}
.marke__zusatz {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--pink);
  border-radius: 6px;
  padding: 3px 6px;
}

.schiene {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.schiene::-webkit-scrollbar {
  display: none;
}

.schiene__punkt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #9a9aa0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 6px 13px 6px 6px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.schiene__punkt:hover {
  color: var(--ink);
}
.schiene__nr {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--alt);
  border: 1px solid var(--grid);
  flex: none;
}
.schiene__punkt.ist-fertig {
  color: var(--gruen);
}
.schiene__punkt.ist-fertig .schiene__nr {
  background: var(--gruen-bg);
  border-color: #cde9d8;
  color: var(--gruen);
}
.schiene__punkt.ist-hier {
  color: #fff;
  background: var(--btn);
  border-color: var(--btn);
}
.schiene__punkt.ist-hier .schiene__nr {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}
@media (max-width: 860px) {
  .schiene__wort {
    display: none;
  }
  /* 44 px ist der Richtwert fuer eine Flaeche, die ein Daumen sicher trifft;
   * vorher waren die Punkte 36 px und man erwischte den Nachbarn. */
  .schiene__punkt {
    padding: 0;
    width: 44px;
    height: 44px;
    justify-content: center;
  }
}

.band {
  flex: none;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--gelb-bg);
  color: var(--gelb-fg);
  border: 1px solid #f0e2bd;
  white-space: nowrap;
}
.band.ist-live {
  background: var(--gruen-bg);
  color: var(--gruen);
  border-color: #cde9d8;
}
.band.ist-live::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gruen);
  margin-right: 7px;
  animation: pochen 1.6s infinite;
}
@keyframes pochen {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.band__kurz {
  display: none;
}
/* Auf dem Telefon war das Band frueher ganz ausgeblendet. Das war der
 * schlimmste Platz dafuer: Fast alle Interessenten schauen die Demo am Handy,
 * und die Aussage "das Band sagt immer die Wahrheit" stimmte dort nicht.
 * Jetzt bleibt es stehen, nur eben kurz: "Live" oder "Aufzeichnung". */
@media (max-width: 700px) {
  .band {
    padding: 4px 9px;
    font-size: 0.62rem;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .band__lang {
    display: none;
  }
  .band__kurz {
    display: inline;
  }
}

/* ------------------------------------------------------------------ Buehne */

.mitte {
  flex: 1;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 24px 24px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.stationskopf {
  margin: 0 0 22px;
  max-width: 780px;
}
.stationskopf__kicker {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
  background: var(--pink-ultra);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 12px;
}
.stationskopf__titel {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 10px;
  color: var(--ink);
}
.stationskopf__satz {
  margin: 0;
  font-size: 1.05rem;
  color: var(--font);
}
.stationskopf--showcase .stationskopf__kicker {
  letter-spacing: 0.16em;
}
.stationskopf--showcase .stationskopf__titel {
  font-size: clamp(1.55rem, 3.8vw, 2.35rem);
  max-width: 16ch;
}
.stationskopf--showcase .stationskopf__satz {
  max-width: 40em;
  font-size: 1.02rem;
  line-height: 1.5;
}

.buehne {
  flex: 1;
  min-height: 0;
}

.station {
  animation: auftauchen 0.4s ease both;
}
@keyframes auftauchen {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .station {
    animation: none;
  }
}

/* -------------------------------------------------------------------- Fuss */

.fuss {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--grid);
}
.fuss__reihe {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Leere Leiste = weg. Der Platz gehoert dann dem Inhalt. */
.fuss.ist-leer {
  display: none;
}
.fuss__zaehler {
  font-size: 0.85rem;
  color: var(--font);
  font-weight: 600;
}
.fuss__hinweis {
  flex: 1;
  font-size: 0.88rem;
  color: var(--pink);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
}
.fuss__hinweis.ist-da {
  opacity: 1;
}
.fuss__knoepfe {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

/* --------------------------------------------------- Fuss auf dem Telefon
 *
 * Fast alle Interessenten schauen das auf dem Handy an. Die Fussleiste war
 * eine einzige Flex-Reihe: auf 390 px wurde der Hinweissatz in eine schmale
 * Spalte gequetscht, die Leiste wuchs auf bis zu 295 px und legte sich als
 * Block mitten ueber den Inhalt. Deshalb hier:
 *   - Hinweis auf eigene Zeile, hart auf zwei Zeilen begrenzt
 *   - Zaehler kurz ("3/7"), Knoepfe gross genug zum Treffen
 *   - die Buehne bekommt unten Luft in Hoehe der Leiste
 * Die Leiste ist damit hoechstens ~130 px hoch und verdeckt nichts mehr. */
@media (max-width: 700px) {
  .fuss__reihe {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .fuss__hinweis {
    order: -1;
    flex: 1 0 100%;
    font-size: 0.82rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Ohne Hinweis keine leere Zeile. */
  .fuss__hinweis:not(.ist-da) {
    display: none;
  }
  .fuss__zaehler {
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .fuss__knoepfe {
    gap: 8px;
  }
  .fuss__knoepfe .knopf {
    min-height: 46px;
    padding: 12px 20px;
  }
  .mitte {
    padding: 14px 16px 10px;
  }
}

/* ------------------------------------------------- App-Rahmen (bis 900 px)
 *
 * "Die Seite ist eine normale Webseite. Ich will das App-Feeling. Nix
 * scrollen!!!" (Dr. Petsas, 18.08.2026). Der Rahmen steht deshalb fest auf
 * Bildschirmhoehe: Kopf oben, Leiste unten, dazwischen genau ein Blatt. Was
 * nicht draufpasst, kommt aufs naechste Blatt (scripts/blaettern.js) — nichts
 * wird abgeschnitten, nichts scrollt. */
@media (max-width: 900px) {
  html,
  body {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .mitte {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .buehne {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .blatt {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(28px);
    transition: transform 0.28s ease, opacity 0.22s ease;
  }
  .blatt.ist-vorbei {
    transform: translateX(-28px);
  }
  .blatt.ist-da {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  /* Ein Blatt ist eine Buehne, kein Container mit Eigenleben. */
  .blatt > * {
    margin: 0;
    flex: none;
  }
  .blatt > .wahl {
    flex: 1 1 auto;
  }
  /* Die geblaetterte Station spannt sich ueber die ganze Buehne und traegt die
   * Blaetter in sich (Bedienung bleibt so an ihr haengen). */
  .station--geblaettert {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    animation: none;
  }
  .stationskopf--imBlatt {
    margin: 0 0 4px;
  }
  /* Keine Leiste mehr.
   *
   * "Die Leiste ist immer noch da" (Dr. Petsas, 18.08.2026). Am Telefon soll
   * unten kein weisses Band mit Rahmen stehen, sondern nur das Noetigste
   * schweben: wo man ist und wie es weitergeht. Geblaettert wird ohnehin mit
   * dem Finger; die beiden kleinen Knoepfe bleiben nur, damit auch jemand
   * weiterkommt, der nicht wischt. */
  .fuss {
    background: transparent;
    backdrop-filter: none;
    border-top: 0;
  }
  .fuss__reihe {
    padding: 2px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 6px 10px;
  }
  .fuss__zaehler {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
  }
  .fuss__knoepfe .knopf {
    min-height: 38px;
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: 999px;
  }
  @media (prefers-reduced-motion: reduce) {
    .blatt {
      transition: none;
    }
  }
}

/* ---------------------------------------------- Handy-Gestaltung (bis 700 px)
 *
 * "du hast einfach das scrollen abgeschalten. du musst das responsive fuer
 * handys redesignen. ich sehe immer nur die haelfte" (Dr. Petsas, 18.08.2026).
 * Hier wird die Seite wirklich fuer ein Telefon gesetzt: kleinere Schrift,
 * weniger Luft, beide Wahlkarten auf einem Bildschirm. Nicht verkleinern,
 * nicht abschneiden. */
@media (max-width: 700px) {
  .kopf__reihe {
    padding: 8px 12px;
    gap: 10px;
  }
  .marke {
    font-size: 0.92rem;
    gap: 6px;
  }
  .marke__punkt {
    width: 16px;
    height: 16px;
  }
  .schiene__punkt {
    width: 36px;
    height: 36px;
  }
  .mitte {
    padding: 10px 14px 8px;
  }
  .stationskopf {
    margin: 0 0 10px;
  }
  .stationskopf__kicker {
    font-size: 0.62rem;
    padding: 4px 10px;
    margin-bottom: 6px;
  }
  .stationskopf__titel {
    font-size: 1.28rem;
    line-height: 1.15;
    margin: 0 0 6px;
  }
  .stationskopf__satz {
    font-size: 0.86rem;
    line-height: 1.4;
  }
  /* Startseite = die zwei Kacheln. Der Stationskopf frisst sonst den Text
   * in den Kacheln (Dr. Petsas, 18.08.2026). */
  .station--einstieg .stationskopf,
  .mitte:has(.station--einstieg) > .stationskopf {
    display: none;
  }
  .stationskopf--imBlatt .stationskopf__satz {
    font-size: 0.86rem;
  }
  .karte {
    padding: 16px;
    border-radius: 16px;
  }
  /* Der Weg-Zettel ist am Rechner sinnvoll. Am Telefon ist er ein zweites
   * Blatt und damit genau der sinnlose Extra-Klick, den Dr. Petsas nicht
   * will: die Entscheidung steht auf EINER Seite. */
  .faden {
    display: none;
  }
  .wahl {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .wahl__karte {
    flex: 1;
    min-height: 0;
    padding: 16px 16px 14px;
    border-radius: 16px;
    justify-content: flex-start;
    overflow: hidden;
  }
  .wahl__karte h3,
  .wahl__kurz,
  .wahl__aktion {
    flex: none;
  }
  .wahl__karte h3 {
    font-size: 1.2rem;
    margin: 0 0 8px;
  }
  .wahl__marke {
    margin-bottom: 8px;
  }
  .wahl__lang {
    display: none;
  }
  .wahl__kurz {
    display: block;
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .wahl__aktion {
    padding: 13px 16px;
    font-size: 0.95rem;
    border-radius: 12px;
  }
  .merkliste {
    gap: 8px;
  }
  .merkliste li {
    font-size: 0.86rem;
    gap: 8px;
  }
  .zwei {
    gap: 12px;
  }
}

/* ------------------------------------------------------------------ Knoepfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 24px;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.knopf:hover:not(:disabled) {
  transform: translateY(-2px);
}
.knopf--haupt {
  background: var(--btn);
  color: #fff;
  box-shadow: var(--sh-sm);
}
.knopf--haupt:hover:not(:disabled) {
  background: var(--btn-hover);
}
.knopf--pink {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 8px 22px rgba(216, 98, 200, 0.28);
}
.knopf--pink:hover:not(:disabled) {
  background: #c44eb4;
}
.knopf--rand {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--grid);
}
.knopf--rand:hover:not(:disabled) {
  border-color: var(--pink);
  color: var(--pink);
}
.knopf--gross {
  padding: 15px 30px;
  font-size: 1rem;
  border-radius: var(--r-md);
}
.knopf:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------- gemeinsame Bloecke */

.karte {
  background: var(--white);
  border: 1px solid var(--grid);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 26px;
}

.zwei {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}
/* Raster-Kinder haben von sich aus `min-width: auto` und wachsen bis zu ihrem
   breitesten Inhalt — eine einzige breite Tabelle (Zahnschema) schob damit die
   ganze Seite auf dem Handy waagerecht. `min-width: 0` gibt der Spalte die
   Bildschirmbreite zurueck; was dann noch zu breit ist, scrollt in SICH. */
.zwei > * { min-width: 0; }
@media (min-width: 940px) {
  .zwei {
    grid-template-columns: 1fr 1fr;
  }
  .zwei--breit-links {
    grid-template-columns: 1.35fr 0.65fr;
  }
  .zwei--breit-rechts {
    grid-template-columns: 0.65fr 1.35fr;
  }
}

.rahmen {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--grid);
  background: #fff;
  box-shadow: var(--sh-lg);
}
.rahmen__leiste {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  background: var(--alt);
  border-bottom: 1px solid var(--grid);
}
.rahmen__punkte {
  display: flex;
  gap: 6px;
}
.rahmen__punkte i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d2d4d9;
}
.rahmen__punkte i:nth-child(1) {
  background: #e6726a;
}
.rahmen__punkte i:nth-child(2) {
  background: #e9c46a;
}
.rahmen__punkte i:nth-child(3) {
  background: #86c9a4;
}
.rahmen__adresse {
  flex: 1;
  max-width: 380px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--font);
  background: #fff;
  border: 1px solid var(--grid);
  border-radius: var(--r-pill);
  padding: 5px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rahmen__fenster {
  display: block;
  width: 100%;
  height: min(72vh, 760px);
  border: 0;
  background: #fff;
}

.merkliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.merkliste li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--font);
}
.merkliste b {
  color: var(--ink);
}
.merkliste__haken {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gruen-bg);
  color: var(--gruen);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  margin-top: 1px;
}

.notiz {
  font-size: 0.88rem;
  color: var(--font);
  margin: 14px 0 0;
}
.notiz--warn {
  background: var(--gelb-bg);
  color: var(--gelb-fg);
  border: 1px solid #f0e2bd;
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-weight: 600;
}

.feld {
  display: block;
  margin-bottom: 16px;
}
.feld__wort {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.feld input[type="text"],
.feld input[type="url"],
.feld input[type="email"],
.feld input[type="tel"] {
  width: 100%;
  font: inherit;
  padding: 13px 15px;
  border: 1px solid var(--grid);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
}
.feld input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(216, 98, 200, 0.15);
}

/* Startseite: ein Titel, zwei Kacheln, sonst nichts.
 *
 * "die navi oben raus, swipen nicht erlauben und den titel ordentlich bauen
 * dass alles auf der page passt" (Dr. Petsas, 18.08.2026). */
body.seite-start .kopf,
body.seite-start .fuss,
body.seite-start .stationskopf {
  display: none !important;
}
body.seite-start {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
body.seite-start .mitte,
body.seite-start .buehne,
body.seite-start .wahl,
body.seite-start .wahl__karte {
  touch-action: none;
  overscroll-behavior: none;
}
body.seite-start .mitte {
  flex: 1;
  min-height: 0;
  max-width: 520px;
  padding: 16px 16px 20px;
}
body.seite-start .buehne,
body.seite-start .station--einstieg {
  height: 100%;
  min-height: 0;
}
body.seite-start .wahl {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 12px;
  grid-template-columns: 1fr;
}
body.seite-start .wahl__titel {
  flex: none;
  margin: 0 0 4px;
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
}
body.seite-start .wahl__karte {
  flex: 1 1 0;
  min-height: 0;
}

/* -------------------------------------------------------- Einstieg (Wahl) */

.wahl {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .wahl {
    grid-template-columns: 1.15fr 0.85fr;
  }
}
.wahl__karte {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--grid);
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
}
.wahl__karte--stark {
  border-color: var(--pink-light);
  background: linear-gradient(150deg, var(--pink-tint), #fff 60%);
  box-shadow: var(--sh-md);
}
.wahl__marke {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink);
  background: #fff;
  border: 1px solid var(--pink-light);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}
.wahl__karte h3 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.wahl__karte p {
  margin: 0 0 20px;
  color: var(--font);
  font-size: 0.96rem;
}
@media (min-width: 701px) {
  .wahl__kurz {
    display: none;
  }
}
.wahl__karte form,
.wahl__karte .wahl__tat,
.wahl__aktion {
  margin-top: auto;
}
.wahl__aktion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--pink);
  color: #fff;
}
.wahl__aktion--rand {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--grid);
}

.uhr {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 900;
  color: var(--pink);
  font-variant-numeric: tabular-nums;
}
.uhr__zahl {
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
.uhr__wort {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--font);
}