/* Munchtime Website: Tokens und Bausteine.
   Abgeleitet aus design/index.css (PO-Theme) und den Design-Regeln in
   CLAUDE.md. Die Seite ist wie die App light-only. Farben stehen hier
   als Hex, weil die Website keine Token-Pipeline hat; die Quelle bleibt
   design/index.css. Wer dort etwas aendert, zieht es hier nach. */

/* Lateinischer Teil von Poppins aus dem Google-Fonts-Bestand (v24), als woff2 rund 8 KB je Schnitt statt 155 KB als ttf. */
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Grund und Text */
  --weiss: #ffffff;
  --fg: #0a0a0a;
  --stein: #292524;
  --muted: #737373;
  --rand: #e5e5e5;
  --grau: #f5f5f5;

  /* Markenpaar: Pastellgruen traegt Stein, nie Weiss */
  --gruen: #b9e55c;
  --gruen-flaeche: rgba(185, 229, 92, 0.18);

  /* Akzentpaar: Creme traegt Braun */
  --creme: #f8f4e1;
  --braun: #74512d;

  /* Reserviert */
  --rot: #e7000b;
  --stern: #fbbf24;
  --erledigt: #16a34a;
  --icon: #333333;

  /* Verlaeufe der App (from, to), Winkel wie im GradientBackdrop */
  --modus-kochen: linear-gradient(135deg, #f6a13c, #e0533f);
  --modus-essen: linear-gradient(135deg, #ab6ac2, #e2638f);
  --modus-bestellen: linear-gradient(135deg, #3ea8dd, #2dd4bf);
  --status-offen: linear-gradient(135deg, #f2e38c, #a8d75b);
  --status-partner: linear-gradient(135deg, #f8cb86, #ef9a62);
  --status-ich: linear-gradient(135deg, #b7e8d0, #a6dd93);
  --status-entschieden: linear-gradient(135deg, #bee884, #f3cb52);
  --status-gekippt: linear-gradient(135deg, #dad5c8, #b9b3a2);
  --karte-limette: linear-gradient(135deg, #f2e38c, #a8d75b);
  --karte-koralle: linear-gradient(135deg, #f8cb86, #ef9a62);
  --karte-aqua: linear-gradient(135deg, #bce8d5, #8fd9bf);
  --karte-honig: linear-gradient(135deg, #f7e488, #f0c24b);
  --karte-lachs: linear-gradient(135deg, #fbcbb8, #f3a488);
  --rad: linear-gradient(135deg, #f97316, #facc15);

  /* Form */
  --radius: 24px;
  --radius-sm: 16px;
  --radius-xl: 28px;
  --schatten: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --schatten-gross: 0 1px 3px rgba(0, 0, 0, 0.1), 0 8px 10px -1px rgba(0, 0, 0, 0.1);

  /* Schrift */
  --font: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --breite: 1080px;
  --rand-aussen: 24px;
}

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

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

body {
  margin: 0;
  background: var(--weiss);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

/* hidden gewinnt immer, auch gegen eine display-Regel am Element */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--braun);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Schriftgroessen ---------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

.display {
  font-size: clamp(38px, 6.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-weight: 700;
}

h2,
.h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h3,
.h3 {
  font-size: 24px;
}

h4,
.h4 {
  font-size: 20px;
  font-weight: 600;
}

p {
  margin: 0;
}

.lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--muted);
}

.klein {
  font-size: 14px;
  font-weight: 500;
}

.mini {
  font-size: 12px;
}

.gedeckt {
  color: var(--muted);
}

.kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--braun);
}

.kicker--hell {
  color: var(--braun);
}

/* ---------- Layout ---------- */

.huelle {
  width: min(var(--breite), 100% - 2 * var(--rand-aussen));
  margin-inline: auto;
}

.abschnitt {
  padding-block: clamp(64px, 9vw, 112px);
}

.abschnitt--creme {
  background: var(--creme);
}

.abschnitt--eng {
  padding-block: clamp(40px, 6vw, 72px);
}

.stapel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.raster {
  display: grid;
  gap: 24px;
}

.raster--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.raster--3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

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

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--gruen);
  color: var(--stein);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, transform 120ms ease;
}

.knopf:hover {
  background: #afdc52;
}

.knopf:active {
  transform: translateY(1px);
}

.knopf--gross {
  height: 56px;
  padding: 0 28px;
}

.knopf--klein {
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
}

.knopf--zweit {
  background: var(--grau);
  color: var(--fg);
}

.knopf--zweit:hover {
  background: #ececec;
}

.knopf--geist {
  background: transparent;
  color: var(--fg);
}

.knopf--geist:hover {
  background: var(--creme);
  color: var(--braun);
}

.knopf--rot {
  background: var(--rot);
  color: var(--weiss);
}

.knopf--rot:hover {
  background: #d4000a;
}

/* Auf Verlaufsflaechen: weisse Pille mit dunklem Text, nie Primaergruen */
.knopf--weiss {
  background: var(--weiss);
  color: var(--fg);
}

.knopf--weiss:hover {
  background: rgba(255, 255, 255, 0.9);
}

.knopf--milch {
  background: rgba(255, 255, 255, 0.4);
  color: var(--fg);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* ---------- Chips ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--creme);
  color: var(--braun);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.chip--neutral {
  background: var(--grau);
  color: var(--muted);
}

.chip--mittel {
  padding: 4px 12px;
}

.chip--gross {
  padding: 6px 16px;
  font-size: 14px;
}

/* ---------- Segmente (Tab-Pille) ---------- */

.segmente {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--weiss);
}

.segmente__tab {
  flex: 1;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.segmente__tab[aria-selected="true"] {
  background: var(--gruen);
  color: var(--stein);
}

/* ---------- Karten und Flaechen ---------- */

.karte {
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 24px;
}

.auswahl {
  border: 1px solid var(--rand);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  background: var(--weiss);
}

.auswahl--an {
  border-color: var(--gruen);
  background: var(--gruen-flaeche);
}

/* Buehne: Verlaufsflaeche mit Avocado-Silhouette, dunkler Text */
.buehne {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 40px 28px;
  color: var(--fg);
  isolation: isolate;
}

.buehne__avocado {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  fill: rgba(255, 255, 255, 0.3);
}

.buehne__avocado--gross {
  width: 300px;
  top: -26px;
  right: -96px;
  transform: rotate(16deg);
}

.buehne__avocado--klein {
  width: 150px;
  bottom: -36px;
  left: -54px;
  transform: rotate(-22deg);
  fill: rgba(255, 255, 255, 0.2);
}

.buehne--offen {
  background: var(--status-offen);
}
.buehne--partner {
  background: var(--status-partner);
}
.buehne--ich {
  background: var(--status-ich);
}
.buehne--entschieden {
  background: var(--status-entschieden);
}
.buehne--gekippt {
  background: var(--status-gekippt);
}

/* Modus-Karten sind die einzigen gesaettigten Flaechen mit weissem Text */
.modus {
  color: var(--weiss);
}
.modus--kochen {
  background: var(--modus-kochen);
}
.modus--essen {
  background: var(--modus-essen);
}
.modus--bestellen {
  background: var(--modus-bestellen);
}

/* ---------- Stempel (Wischen) ---------- */

.stempel {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.9);
  color: var(--weiss);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
}

.stempel--rahmen {
  background: transparent;
  border: 4px solid var(--weiss);
  color: var(--weiss);
}

/* ---------- Milchglas-Leiste ---------- */

.milchglas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ---------- Handy-Rahmen ---------- */

.handy {
  --handy-breite: 300px;
  position: relative;
  width: var(--handy-breite);
  aspect-ratio: 402 / 874;
  border-radius: calc(var(--handy-breite) * 0.16);
  background: #0a0a0a;
  padding: calc(var(--handy-breite) * 0.03);
  box-shadow: var(--schatten-gross);
  margin-inline: auto;
}

.handy__schirm {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--handy-breite) * 0.135);
  background: var(--weiss);
}

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

.handy__insel {
  position: absolute;
  top: calc(var(--handy-breite) * 0.055);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--handy-breite) * 0.31);
  height: calc(var(--handy-breite) * 0.085);
  border-radius: 999px;
  background: #0a0a0a;
  z-index: 2;
}

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

/* Zwei Store-Knoepfe als Paar: beide so breit wie der breitere (PO 15.09.), die Spalten teilen sich
   die Breite des breiteren Inhalts. Auf dem Handy (bis 480 px) fuellen beide zusammen die Zeile und
   werden kompakter (kleineres Symbol, kleinere Schrift, weniger Rand), so passen sie ab 360 px Breite
   nebeneinander. Erst darunter stehen sie untereinander, dann mittig. */
.laden {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: max-content;
  max-width: 100%;
}

@media (max-width: 480px) {
  .laden {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 368px;
  }
  .laden .store {
    justify-content: center;
    gap: 8px;
    padding: 0 10px 0 8px;
    min-width: 0;
  }
  .laden .store svg {
    width: 22px;
    height: 22px;
  }
  .laden .store__oben {
    font-size: 10px;
  }
  .laden .store__unten {
    font-size: 17px;
  }
}

/* Untereinander: beide so breit wie der breitere, als Block mittig. */
@media (max-width: 339px) {
  .laden {
    grid-template-columns: 1fr;
    width: max-content;
    margin-inline: auto;
  }
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 18px 0 14px;
  border-radius: 14px;
  background: #0a0a0a;
  color: var(--weiss);
  text-decoration: none;
  line-height: 1.05;
  transition: transform 120ms ease, opacity 120ms ease;
}

.store:hover {
  transform: translateY(-1px);
}

.store svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.store__text {
  display: flex;
  flex-direction: column;
}

.store__oben {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.store__unten {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Navigation und Fusszeile der Website ---------- */

/* Die Pille ist so breit wie der Inhalt darunter (die Huelle, 1080 px) und 60 px hoch.
   Logo-Kreis und Knopf sind 42 px hoch und sitzen mit 8 px Abstand konzentrisch in den
   runden Enden. Marke und Knopf teilen sich den Platz zu gleichen Teilen, so bleiben
   die Links in der Mitte. */
.nav {
  position: sticky;
  top: 12px;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding-inline: var(--rand-aussen);
}

.nav__leiste {
  width: min(var(--breite), 100%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav__marke {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  color: var(--fg);
}

.nav__marke img {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__ende {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.nav__link {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  color: var(--fg);
  white-space: nowrap;
}

.nav__link:hover {
  background: var(--creme);
  color: var(--braun);
}

/* Aktuelle Seite: nur Flaeche, kein Strich (Auswahl-Regel der App) */
.nav__link--hier {
  background: var(--gruen-flaeche);
}

.nav__knopf {
  height: 42px;
  padding: 0 20px;
  font-size: 15px;
}

@media (max-width: 960px) {
  .nav__link {
    padding: 8px 10px;
    font-size: 14px;
  }
}

/* Ab 800 px abwaerts passen die fuenf Links nicht mehr neben Marke und Knopf (bei 770 px fehlen 9 px). */
@media (max-width: 800px) {
  .nav__links {
    display: none;
  }
}

@media (max-width: 560px) {
  .nav__marke span {
    display: none;
  }
}

/* Fusszeile, Aufbau wie bei Sparchef (PO 15.09.): links die Marke mit einem Satz und den Store-Knoepfen,
   rechts die Linkspalten, darunter eine Zeile mit Copyright und Cookie-Hinweis. Auf dem Handy steht alles
   untereinander, die Spalten zu zweit nebeneinander. Flaeche in Creme wie die Abschnitte, ein dunkles
   Gruen wollte der PO nicht. */
.fuss {
  --fuss-text: var(--muted);
  padding-block: 48px 40px;
  background: var(--creme);
  color: var(--fg);
}

.fuss p {
  margin: 0;
}

.fuss__oben {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.fuss__marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.fuss__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
}

.fuss__logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.fuss__text {
  max-width: 360px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fuss-text);
}

.fuss__spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.fuss__spalte {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fuss__spalte h3 {
  font-size: 20px;
  font-weight: 700;
}

.fuss__spalte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}

.fuss__spalte a {
  color: var(--fuss-text);
  text-decoration: none;
}

.fuss__spalte a:hover {
  color: var(--fg);
}

.fuss__unten {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 48px;
  font-size: 14px;
  color: var(--fuss-text);
}

@media (min-width: 700px) {
  .fuss__spalten {
    display: flex;
    gap: clamp(40px, 6vw, 80px);
  }
  .fuss__unten {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 960px) {
  .fuss__oben {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ---------- Aufklapper (Fragen auf der Startseite und in der Hilfe) ---------- */

.fragen {
  border-top: 1px solid var(--rand);
}

.frage {
  border-bottom: 1px solid var(--rand);
}

.frage summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

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

.frage summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--creme);
  color: var(--braun);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  transition: transform 160ms ease;
}

.frage[open] summary::after {
  transform: rotate(45deg);
}

.frage p {
  padding: 0 0 20px;
  max-width: 62ch;
  color: var(--fg);
  opacity: 0.78;
}

/* ---------- Unterseiten: Rechtstexte, Hilfe, Konto loeschen, Einladung, 404 ---------- */

/* Fusszeile bleibt unten, auch wenn eine Seite wenig Inhalt hat */
.unterseite {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.unterseite main {
  flex: 1;
}

/* Kopf jeder Unterseite: Creme-Flaeche wie die Buehnen der Startseite, Maskottchen optional */
.seitenkopf {
  margin-top: clamp(20px, 3vw, 32px);
  padding: clamp(28px, 5vw, 52px) clamp(24px, 5vw, 56px);
  border-radius: var(--radius-xl);
  background: var(--creme);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 40px;
  align-items: center;
}

.seitenkopf__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 46rem;
}

.seitenkopf h1 {
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  /* Lange deutsche Woerter wie "Datenschutzerklaerung" passen auf 360 px nicht in eine Zeile */
  hyphens: auto;
  overflow-wrap: break-word;
}

.seitenkopf .lead {
  max-width: 60ch;
  color: var(--fg);
  opacity: 0.72;
  font-size: clamp(17px, 2vw, 19px);
}

.seitenkopf__stand {
  font-size: 14px;
  color: var(--braun);
}

.seitenkopf img {
  height: clamp(128px, 15vw, 176px);
  width: auto;
}

@media (max-width: 640px) {
  .seitenkopf {
    grid-template-columns: minmax(0, 1fr);
  }

  .seitenkopf img {
    display: none;
  }
}

/* Textseiten: Inhaltsverzeichnis links (ab 1000 px), Text rechts in Lesebreite */
.textseite {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-block: clamp(32px, 5vw, 56px) clamp(56px, 8vw, 96px);
}

@media (min-width: 1000px) {
  .textseite--inhalt {
    grid-template-columns: 220px minmax(0, 68ch);
    gap: 72px;
  }
}

.inhalt {
  font-size: 14px;
}

.inhalt__titel {
  display: block;
  margin-bottom: 8px;
}

.inhalt ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inhalt a {
  display: block;
  padding: 6px 12px;
  border-radius: 12px;
  line-height: 1.35;
  text-decoration: none;
  color: var(--muted);
}

.inhalt a:hover {
  background: var(--creme);
  color: var(--braun);
}

/* Breit: stehendes Verzeichnis. Schmal: Aufklapper ueber dem Text. */
.inhalt--breit {
  display: none;
}

@media (min-width: 1000px) {
  .inhalt--breit {
    display: block;
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .inhalt--schmal {
    display: none;
  }
}

.inhalt--schmal {
  margin-bottom: 32px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-sm);
  padding: 4px 16px;
}

.inhalt--schmal summary {
  cursor: pointer;
  padding: 10px 0;
  font-weight: 600;
  font-size: 15px;
}

.inhalt--schmal ol {
  padding-bottom: 12px;
}

.text {
  max-width: 68ch;
  min-width: 0;
}

.text section {
  scroll-margin-top: 96px;
}

.text section + section {
  margin-top: 40px;
}

.text h2 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: 10px;
}

.text h3 {
  font-size: 18px;
  line-height: 1.35;
  margin: 20px 0 8px;
}

/* Unterpunkte der Datenschutzerklaerung haengen enger am Abschnitt darueber. */
.text section.unter {
  margin-top: 24px;
}

.text section.unter h3 {
  margin-top: 0;
}

.text p {
  margin: 0 0 12px;
}

.text ul,
.text ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.text li {
  margin: 6px 0;
}

.text li::marker {
  color: var(--braun);
}

.text a {
  color: var(--braun);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.text .kompakt p {
  margin: 0 0 2px;
}

.text .kasten {
  margin: 0 0 12px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--grau);
}

.text .kasten p:last-child {
  margin-bottom: 0;
}

/* Nummerierte Schritte, nur fuer echte Reihenfolgen. Inhalt je Schritt in EIN Element
   packen (<li><span>...</span></li>), sonst macht das Raster aus jedem Textstueck eine Spalte.
   ol.schritte statt .schritte, damit die Regel gegen .text ol gewinnt. */
ol.schritte {
  counter-reset: schritt;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.schritte li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0;
}

.schritte li::before {
  content: counter(schritt);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--gruen);
  color: var(--stein);
  font-size: 15px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.schritte li::marker {
  content: none;
}

/* ---------- Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Warteliste (15.09.2026) ----------
   Solange die App nicht im Store ist, oeffnen Store- und Download-Knoepfe dieses Fenster
   (warteliste.js). Dieselbe Form steht auf warteliste.html fuer den Link aus der Mail. */

.warteliste {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 28px 24px 24px;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--weiss);
  color: var(--stein);
  box-shadow: 0 24px 64px -16px rgba(10, 10, 10, 0.35);
  overflow: auto;
}

.warteliste::backdrop {
  background: rgba(10, 10, 10, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  .warteliste[open] { animation: warteliste-auf 180ms ease-out; }
  .warteliste[open]::backdrop { animation: warteliste-grund 180ms ease-out; }
}

@keyframes warteliste-auf {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes warteliste-grund {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 480px) {
  .warteliste {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}

.warteliste__zu {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--grau);
  color: var(--fg);
  cursor: pointer;
}

.warteliste__zu:hover { background: #ececec; }

.warteliste__inhalt {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.warteliste__logo {
  width: 56px;
  height: 56px;
  border-radius: 999px;
}

.warteliste__titel {
  margin: 0;
  padding-right: 44px;
  font-size: 24px;
  line-height: 1.2;
  text-wrap: balance;
}

.warteliste__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.warteliste__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warteliste__feld {
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
}

.warteliste__feld::placeholder { color: #a3a3a3; }

.warteliste__feld:focus-visible {
  outline: 3px solid var(--braun);
  outline-offset: 1px;
  border-radius: 999px;
}

.warteliste__feld[aria-invalid="true"] { border-color: var(--rot); }

.warteliste__form .knopf { width: 100%; }

.warteliste__form .knopf[disabled] { opacity: 0.6; cursor: progress; }

.warteliste__fehler {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--rot);
}

.warteliste__klein {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.warteliste__klein a { color: var(--braun); text-underline-offset: 3px; }

.warteliste__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.warteliste__nur-lesbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.warteliste__haken {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--gruen);
  color: var(--stein);
}

.warteliste__leise {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}