/* ============================================================
   Eure Jahrestage – Website
   Farbwelt wie in der App seit dem Redesign vom 28.09.2026:
   "Leinen" (hell, warm) und "Mitternacht" (dunkel, nachtblau),
   Akzent Koralle statt des früheren Lila.

   In der App wählt der Nutzer das Thema selbst. Im Web gibt es
   dafür keinen sinnvollen Schalter, deshalb folgt die Seite der
   Systemeinstellung: hell = Leinen, dunkel = Mitternacht.
   Die Hexwerte sind 1:1 aus Designsystem.swift übernommen.
   ============================================================ */

/* ---------- Schrift: Handschrift aus der App, lokal gehostet ----------
   Die Dateien liegen in assets/fonts/ (mitgeliefert, Open Font License).
   Lokal einbinden statt Google-CDN: gleiche Darstellung auf allen Systemen
   (auch Linux/Android) und DSGVO-freundlich.                            */
@font-face {
  font-family: "Covered By Your Grace";
  src: url("../assets/fonts/CoveredByYourGrace-Regular.woff2") format("woff2"),
       url("../assets/fonts/CoveredByYourGrace-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens: Leinen ---------- */
:root {
  color-scheme: light dark;

  /* Markenton in zwei Stufen – genau wie in der App.
     marke = Schrift und Zeichen, knopf = volle Flächen.
     Die knallige Koralle trägt als Fläche, als Schrift auf hellem
     Grund fiele sie unter 3:1. */
  --marke: #c9362b;
  --knopf-farbe: #ee4b3b;
  --auf-marke: #ffffff;

  --tinte: #221e1b;
  --tinte-leise: rgba(34, 30, 27, 0.62);
  --tinte-zart: rgba(34, 30, 27, 0.10);

  /* App-Symbol: Korallenherz auf Nachtblau */
  --anthrazit: #151b24;
  --anthrazit-2: #1e2836;
  /* Dunkle Bühnen auf der Seite. In Leinen nachtblau wie das App-Symbol,
     in Mitternacht eine Stufe heller als der Grund, sonst verschwänden sie. */
  --buehne: var(--anthrazit);
  --herz-hell: #ffa393;
  --herz-tief: #d42d1f;

  /* Katalogfarben – unverändert, sie stammen aus den Illustrationen */
  --rose: #f06084;
  --koralle: #f47054;
  --magenta: #dc4494;
  --violett: #8458d8;
  --indigo: #5c68d8;
  --blau: #2c84ec;
  --silber: #90a0b8;
  --gold: #e49424;
  --tuerkis: #0f8986;

  /* Flächen */
  --bg: #f7f4ef;
  --flaeche: #fffefc;
  --flaeche-leise: rgba(255, 254, 252, 0.7);
  --linie: rgba(34, 30, 27, 0.08);
  --rinne: rgba(34, 30, 27, 0.10);

  --herz: linear-gradient(135deg, var(--herz-hell), var(--herz-tief));
  --knopf: linear-gradient(100deg, #f2573f, var(--knopf-farbe));

  /* Schatten warm-braun statt violett */
  --schatten-weich: 0 6px 20px rgba(77, 51, 31, 0.08);
  --schatten-karte: 0 12px 34px rgba(77, 51, 31, 0.10);
  --schatten-tief: 0 26px 60px rgba(40, 26, 16, 0.18);

  --radius-xl: 34px;
  --radius-l: 26px;
  --radius-m: 18px;
  --radius-s: 12px;

  --ui: system-ui, -apple-system, "SF Pro Rounded", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  --handschrift: "Covered By Your Grace", "Segoe Script", "Bradley Hand",
                 "Brush Script MT", cursive;

  --spalte: 1080px;
  --spalte-schmal: 760px;
}

/* ---------- Rhythmus und Überschriften ----------
   Gleiche Art, gleicher Abstand. Alle Werte an einer Stelle,
   mobil werden sie unten gemeinsam verkleinert. */
:root {
  --h2: clamp(2rem, 4.2vw, 2.9rem);  /* eine Größe für jede Abschnittsüberschrift */
  --raum: 48px;           /* Abschnitt oben/unten  ->  96px zwischen zwei Abschnitten */
  --raum-eng: 32px;       /* kleine Abschnitte (Eckdaten, Aufruf)                    */
  --raum-block: 36px;     /* Bild-Text-Abschnitte  ->  72px zwischen zweien          */
  --titel-abstand: 48px;  /* Überschrift -> folgender Inhalt                          */
}

/* ---------- Tokens: Mitternacht ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dort trägt der knallige Ton beides, marke und knopf sind gleich.
       Die Schrift darauf ist dunkel, nicht weiß – Weiß käme nur auf 2,8:1. */
    --marke: #ff6b5b;
    --knopf-farbe: #ff6b5b;
    --auf-marke: #151b24;

    --tinte: #eef0f4;
    --tinte-leise: rgba(238, 240, 244, 0.60);
    --tinte-zart: rgba(238, 240, 244, 0.12);

    --rose: #f27394;
    --koralle: #f58269;
    --magenta: #e061a6;
    --violett: #9975de;
    --indigo: #7a82de;
    --blau: #5299f0;
    --silber: #b3bdcf;
    --gold: #ebb361;
    --tuerkis: #60d2c9;

    --bg: #151b24;
    --buehne: #202936;
    --flaeche: #202936;
    --flaeche-leise: rgba(32, 41, 54, 0.75);
    --linie: rgba(255, 255, 255, 0.09);
    --rinne: rgba(255, 255, 255, 0.12);

    --knopf: linear-gradient(100deg, #ff7f6d, var(--knopf-farbe));

    --schatten-weich: 0 6px 20px rgba(0, 0, 0, 0.30);
    --schatten-karte: 0 12px 34px rgba(0, 0, 0, 0.35);
    --schatten-tief: 0 26px 60px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* Platz für den festen Kopf */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--marke); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.5em; }
/* Lange deutsche Wörter („Datenschutzerklärung“) dürfen auf schmalen Schirmen
   und bei großer Schrift getrennt werden, statt seitlich überzulaufen. */
h1, h2, h3, dt, dd { overflow-wrap: break-word; hyphens: auto; }
p { margin: 0 0 1em; }

/* Sichtbarer Tastatur-Fokus überall */
:focus-visible {
  outline: 3px solid var(--marke);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Sprunglink für Screenreader / Tastatur */
.sprung {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--flaeche);
  color: var(--tinte);
  padding: 12px 18px;
  border-radius: var(--radius-s);
  box-shadow: var(--schatten-karte);
  transition: top 0.18s ease;
  font-weight: 700;
}
.sprung:focus { top: 12px; }

/* Hilfsklasse: nur für Screenreader – z. B. die Überschrift „Eckdaten“ */
.nur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout-Hüllen ---------- */
.huelle {
  width: min(100% - 40px, var(--spalte));
  margin-inline: auto;
}
.huelle-schmal { max-width: var(--spalte-schmal); }

.abschnitt { padding: var(--raum) 0; }
.abschnitt-eng { padding: var(--raum-eng) 0; }

/* ============================================================
   Kopfzeile
   ============================================================ */
.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  width: min(100% - 40px, var(--spalte));
  margin-inline: auto;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.marke-block {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--tinte);
  margin-right: auto;
}
.marke-block img { width: 40px; height: 40px; border-radius: 10px; box-shadow: var(--schatten-weich); }
.marke-wort { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }

.kopf-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.kopf-nav a:not(.knopf) {
  text-decoration: none;
  color: var(--tinte);
  font-weight: 600;
  font-size: 15.5px;
  opacity: 0.85;
}
.kopf-nav a:not(.knopf):hover { opacity: 1; }
/* Der Knopf behält seine eigene Schrift- und Deckkraft */
.kopf-nav .knopf { color: var(--auf-marke); opacity: 1; }


/* ---------- Sprachumschalter DE | EN ----------
   Die aktive Sprache ist ein dunkles Feld (Tinte auf Grund, über 15:1), nicht die
   Markenfarbe: Bei 13px Schrift reicht der Kontrast von Weiß auf Koralle nicht. */
.sprachwahl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}
.sprachwahl > * { padding: 6px 11px; border-radius: 999px; }
.sprachwahl-aktiv { background: var(--tinte); color: var(--bg); }
.kopf-nav .sprachwahl a:not(.knopf) {
  font-size: 13px;
  font-weight: 700;
  color: var(--tinte);
  opacity: 0.85;
}
.kopf-nav .sprachwahl a:not(.knopf):hover {
  opacity: 1;
  background: color-mix(in srgb, var(--marke) 12%, transparent);
}

.nav-schalter {
  display: none;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  border-radius: var(--radius-s);
  width: 44px; height: 40px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.nav-schalter span,
.nav-schalter span::before,
.nav-schalter span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--tinte);
  border-radius: 2px;
  position: relative;
}
.nav-schalter span::before { position: absolute; top: -6px; }
.nav-schalter span::after { position: absolute; top: 6px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  color: var(--auf-marke);
  background: var(--knopf);
  border: 0;
  padding: 13px 22px;
  border-radius: 999px;
  box-shadow: var(--schatten-karte);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.knopf:hover { transform: translateY(-1px); box-shadow: var(--schatten-tief); }
.knopf:active { transform: translateY(0); }
.knopf-klein { padding: 9px 16px; font-size: 15px; }

/* Hilfsklasse für zurückhaltende Zweitknöpfe – derzeit ungenutzt, aber praktisch */
.knopf-zart {
  background: var(--flaeche);
  color: var(--marke);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten-weich);
}
.knopf-zart:hover { box-shadow: var(--schatten-karte); }

/* ============================================================
   Held / Hero – heller Leinen-Grund; Icon und Überschrift laufen beim
   Scrollen etwas langsamer mit (js/main.js, nicht bei „Bewegung reduzieren“)
   ============================================================ */
.held {
  position: relative;
  overflow-x: clip;               /* der Lichtschein darf nicht seitlich überstehen */
  background: var(--bg);
  color: var(--tinte);
  text-align: center;
  padding: 74px 0 56px;
}
.held-innen { position: relative; z-index: 1; will-change: transform; }
/* ein einziger, ruhiger Lichtschein hinter dem Icon – wandert mit dem Icon */
.held-innen::before {
  /* Mittelpunkt = Mitte des Symbols (halbe Symbolhöhe 64px) */
  content: "";
  position: absolute;
  --schein: 520px;
  top: calc(64px - var(--schein) / 2);
  left: 50%;
  width: var(--schein); height: var(--schein);
  max-width: 120vw; max-height: 120vw;
  transform: translateX(-50%);
  background: radial-gradient(circle,
      rgba(238, 75, 59, var(--schein-stark, 0.20)) 0%,
      rgba(238, 75, 59, calc(var(--schein-stark, 0.20) * 0.45)) 34%,
      rgba(238, 75, 59, calc(var(--schein-stark, 0.20) * 0.12)) 56%,
      transparent 70%);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) { .held { --schein-stark: 0.42; } }

.held-icon {
  width: 128px; height: 128px;
  border-radius: 28px;
  margin: 0 auto 22px;
  box-shadow: 0 18px 40px rgba(21, 27, 36, 0.28);
  animation: herz-heben 5.2s ease-in-out infinite;
}
@keyframes herz-heben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.held-titel {
  font-family: var(--handschrift);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 5.4rem);
  line-height: 0.98;
  margin: 0 0 10px;
  color: var(--tinte);
}
.held-unter {
  font-size: clamp(1.1rem, 3.4vw, 1.5rem);
  color: var(--tinte-leise);
  max-width: 42ch;
  margin: 0 auto 26px;
  text-wrap: balance;
}
.held-knoepfe {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.plattform {
  margin-top: 16px;
  color: var(--tinte-leise);
  font-size: 14.5px;
  letter-spacing: 0.01em;
}

/* Übergang von der dunklen Bühne in den hellen Verlauf */
/* App-Store-Badge (Platzhalter) */
/* App-Store-Badge: Apples offizielle Grafik.
   Sie darf nicht verändert werden – deshalb hier kein Radius, keine Farbe
   und kein Schatten auf dem Bild selbst. Das Seitenverhältnis (2,9916)
   steckt in den width/height-Angaben im HTML; height:auto sorgt dafür,
   dass es auch dort exakt bleibt. */
.badge {
  display: inline-flex;
  text-decoration: none;
  transition: transform 0.14s ease, opacity 0.14s ease;
}
.badge:hover { transform: translateY(-1px); opacity: 0.9; }
.badge:active { transform: translateY(0); }
.badge img { display: block; width: 180px; height: auto; }
.badge:focus-visible { outline: 3px solid var(--marke); outline-offset: 4px; border-radius: 10px; }

/* ============================================================
   Screenshot-Reihe (Rahmen steckt im PNG, seitlich scrollbar)
   ============================================================ */
.schau-bereich {
  position: relative;
  z-index: 2;
}
/* Dunkler Streifen hinter den Telefonen, versetzt: Er beginnt im oberen
   Drittel der Geräte und endet vor ihrem unteren Rand. So ragen die
   Telefone oben und unten in den hellen Grund. */
.schau-bereich::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(8px + 170px);
  height: 300px;
  background: var(--buehne);
  z-index: -1;
}
@media (max-width: 337px) { .schau-bereich::before { top: calc(8px + 32vw); height: 56vw; } }
.schau {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.schau:focus-visible { outline: 3px solid var(--marke); outline-offset: -3px; border-radius: var(--radius-m); }
.schau::-webkit-scrollbar { height: 8px; }
.schau::-webkit-scrollbar-thumb { background: var(--tinte-zart); border-radius: 8px; }
.schau-band {
  /* Ein Schritt der Pfeilsteuerung: Bildbreite plus Abstand. */
  --schau-bild: 250px;
  --schau-luft: 24px;
  display: flex;
  gap: var(--schau-luft);
  align-items: flex-start;
  /* Nur so breit wie die Bilder – so kann margin:auto die Reihe zentrieren,
     wenn Platz da ist. Reicht der Platz nicht, wird über .schau gescrollt. */
  width: max-content;
  margin-inline: auto;
  padding: 8px 40px 30px 20px;
}

.geraet {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 250px;
  max-width: 74vw;
  margin: 0;
}
/* Der iPhone-Rahmen ist Teil des Bildes. Kein Rahmen, kein Radius,
   kein Schatten – jede zusätzliche Kante würde nur stören. */
.geraet img {
  display: block;
  width: 100%;
  height: auto;
}
.geraet-titel {
  text-align: center;
  margin-top: 16px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--tinte-leise);
}

/* ---------- Pfeilsteuerung unter der Reihe (nur Desktop) ---------- */
.schau-steuerung {
  display: none;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
}
.schau-knopf {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--marke);
  box-shadow: var(--schatten-weich);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}
.schau-knopf svg { width: 22px; height: 22px; }
.schau-knopf:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--schatten-karte); }
.schau-knopf:active:not(:disabled) { transform: translateY(0); }
.schau-knopf:disabled { opacity: 0.32; cursor: default; box-shadow: none; }

/* Ab Tablet aufwärts: Pfeile statt Scrollbalken, und die Reihe beginnt
   eingerückt – sonst wirkt der Einstieg mit neun Bildern erschlagend.
   Der Einzug entspricht zwei Bildbreiten: Bild 1 startet dort, wo sonst
   Bild 3 stünde. Mobil bleibt alles unverändert. */
@media (min-width: 681px) {
  .schau-steuerung { display: flex; }
  .schau {
    scroll-snap-type: none;         /* die Pfeile übernehmen das Weiterrücken */
    scrollbar-width: none;
  }
  .schau::-webkit-scrollbar { display: none; }
  .schau-band {
    padding-left: min(calc(2 * (var(--schau-bild) + var(--schau-luft))), 34vw);
  }
}

/* ============================================================
   Text-Abschnitte
   ============================================================ */
.zwischenwort {
  color: var(--marke);
  font-weight: 800;
  font-size: 14.5px;
  margin: 0 0 8px;
}
.abschnitt-titel {
  
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.abschnitt-lauf { color: var(--tinte-leise); max-width: 60ch; font-size: 1.08rem; }

/* Das letzte Element eines Abschnitts oder Textblocks bringt keinen eigenen
   Außenabstand mit. Sonst addiert sich z. B. der Absatzrand (1em) unbemerkt
   zum Abschnittsabstand – genau das machte die Lücken so groß. */
.abschnitt .huelle > :last-child,
.abschnitt-eng .huelle > :last-child,
.schutz-band .huelle > :last-child,
.block-text > :last-child,
.karte > :last-child { margin-bottom: 0; }

/* Eine Größe für jede Abschnittsüberschrift – vorher gab es vier. */
.gross-satz,
.abschnitt-titel,
.block h2,
.schutz-band h2 {
  font-size: var(--h2);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
/* Abstand zwischen Überschrift und dem, was folgt */
.abschnitt-kopf { margin-bottom: var(--titel-abstand); }
/* Ein Satz unter einem Kartengitter, mit demselben Abstand wie über dem Gitter (seit Version 3). */
.abschnitt-nachsatz { margin-top: var(--titel-abstand); }
.abschnitt-kopf .abschnitt-titel,
.abschnitt-kopf h2 { margin-bottom: 0; }

.mitte { text-align: center; margin-inline: auto; }
.mitte .abschnitt-titel, .mitte .abschnitt-lauf { margin-inline: auto; }

/* ============================================================
   Highlights-Gitter (Funktionen)
   ============================================================ */
.gitter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 52px 38px;
}
.karte { text-align: center; }
.karte .sinnbild { margin-inline: auto; }
.karte {
  /* Bewusst ohne Fläche, Rahmen und Schatten: Die Seite soll atmen.
     Halt geben allein das Sinnbild und der Abstand. */
  padding: 0;
}
.karte h3 { font-size: 1.17rem; margin-bottom: 6px; }
.karte p { color: var(--tinte-leise); margin: 0; font-size: 0.99rem; }

.sinnbild {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  color: #fff;
}
.sinnbild svg { width: 27px; height: 27px; }
/* Farbzuordnung wie im App-Katalog */
.f-rose { background: linear-gradient(140deg, #f28fac, var(--rose)); }
.f-koralle { background: linear-gradient(140deg, #f7a58f, var(--koralle)); }
.f-magenta { background: linear-gradient(140deg, #e57ac0, var(--magenta)); }
.f-violett { background: linear-gradient(140deg, #ab8ee8, var(--violett)); }
.f-indigo { background: linear-gradient(140deg, #8b93ec, var(--indigo)); }
.f-blau { background: linear-gradient(140deg, #6fa9ee, var(--blau)); }
.f-gold { background: linear-gradient(140deg, #e6b45c, var(--gold)); }
.f-silber { background: linear-gradient(140deg, #aeb8c7, var(--silber)); }

/* ============================================================
   FAQ – native details/summary
   ============================================================ */
.faq { max-width: var(--spalte-schmal); margin-inline: auto; }
.faq-liste { margin-top: 30px; }

details.frage {
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
details.frage + details.frage { margin-top: 0; }

summary.frage-kopf {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 22px;
  position: relative;
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--tinte);
}
summary.frage-kopf::-webkit-details-marker { display: none; }
summary.frage-kopf::after {
  content: "";
  position: absolute;
  right: 22px; top: 50%;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--marke);
  border-bottom: 2.5px solid var(--marke);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.22s ease;
}
details[open] summary.frage-kopf::after { transform: translateY(-30%) rotate(-135deg); }
summary.frage-kopf:hover { color: var(--marke); }
/* details hat overflow:hidden – ein außen liegender Fokusrahmen würde
   abgeschnitten. Deshalb hier nach innen zeichnen. */
summary.frage-kopf:focus-visible { outline-offset: -3px; border-radius: var(--radius-m); }

.frage-text {
  padding: 0 22px 22px;
  color: var(--tinte-leise);
}
.frage-text p { margin: 0 0 0.7em; }
.frage-text p:last-child { margin-bottom: 0; }
.frage-text a { font-weight: 600; }

/* ============================================================
   Abschluss-Aufruf
   ============================================================ */
.aufruf {
  position: relative;
  overflow: hidden;
  background: var(--buehne);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 58px 30px;
  text-align: center;
  box-shadow: var(--schatten-tief);
}
.aufruf::before {
  content: "";
  position: absolute; inset: -40% 30% auto;
  height: 320px;
  background: radial-gradient(circle at 50% 0, rgba(255, 107, 91, 0.26), transparent 60%);
}
.aufruf-innen { position: relative; z-index: 1; }
.aufruf .handzeile {
  color: #fff;
  font-family: var(--handschrift);
  font-size: clamp(1.8rem, 6vw, 3rem);
  line-height: 1.05;
  margin: 0 auto 12px;
  max-width: 18ch;
}
.aufruf p { color: rgba(255, 255, 255, 0.82); max-width: 42ch; margin: 0 auto 26px; }

/* ============================================================
   Fußzeile
   ============================================================ */
.fuss {
  padding: 56px 0 40px;
  color: var(--tinte-leise);
}
.fuss-innen {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 60px;
  justify-content: space-between;
}
.fuss-marke { max-width: 300px; }
.fuss-marke .marke-block { margin-bottom: 12px; }
.fuss-marke p { font-size: 0.95rem; }
.fuss-spalten { display: flex; gap: 60px; flex-wrap: wrap; }
.fuss-spalte h2 { font-size: 0.95rem; color: var(--tinte); margin: 0 0 12px; }
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; }
.fuss-spalte li { margin: 8px 0; }
.fuss-spalte a { color: var(--tinte-leise); text-decoration: none; }
.fuss-spalte a:hover { color: var(--marke); text-decoration: underline; }
.fuss-unten {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--linie);
  font-size: 0.88rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

/* ============================================================
   Unterseiten (Support / Recht)
   ============================================================ */
.seiten-kopf {
  padding: 56px 0 10px;
  text-align: center;
}
.seiten-kopf h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.seiten-kopf p { color: var(--tinte-leise); max-width: 54ch; margin-inline: auto; }

.text-block {
  background: var(--flaeche);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-karte);
  padding: 34px clamp(22px, 5vw, 48px);
  margin-bottom: 24px;
}
.text-block h2 {
  font-size: 1.4rem;
  margin-top: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linie);
}
.text-block h3 { font-size: 1.1rem; margin-top: 26px; }
.text-block p, .text-block li { color: var(--tinte-leise); }
.text-block a { font-weight: 600; }
.text-block ul { padding-left: 22px; }
.platzhalter {
  display: inline;
  background: color-mix(in srgb, var(--marke) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--marke) 45%, transparent);
  border-radius: var(--radius-s);
  padding: 2px 8px;
  color: var(--marke);
  font-weight: 700;
  font-style: normal;
}
.platzhalter.block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  padding: 86px 0;
}
/* Kontakt-Kachel (Support, Bedienungshilfen): dunkle Fläche wie der Hero */
.kontakt-kachel {
  background: var(--buehne);
  color: #fff;
  border-radius: var(--radius-l);
  padding: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 30px;
  box-shadow: var(--schatten-tief);
}
.kontakt-kachel .icon-gross {
  width: 62px; height: 62px; border-radius: 17px;
  background: var(--herz);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.kontakt-kachel .icon-gross svg { width: 32px; height: 32px; color: #fff; }
.kontakt-text { flex: 1 1 240px; }
.kontakt-text h2 { border: 0; margin: 0 0 4px; color: #fff; font-size: 1.35rem; }
.kontakt-text p { color: rgba(255, 255, 255, 0.82); margin: 0; }

/* ---------- Bedienungshilfen: vier gleichrangige Säulen ----------
   VoiceOver, große Schrift, Dunkelmodus und reduzierte Bewegung – dieselben
   vier Angaben wie in der Bedienungshilfen-Auskunft im App Store, deshalb auf
   einer Ebene. Zwei mal zwei, mobil untereinander. */
.saeulen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.saeule {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-weich);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.saeule .sinnbild { margin-bottom: 14px; }
.saeule h3 { font-size: 1.12rem; margin: 0 0 8px; }
.saeule p { color: var(--tinte-leise); margin: 0 0 14px; font-size: 0.97rem; }
.saeule .geprueft {
  margin-top: auto;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--marke);
}
.saeulen-detail { margin-top: 18px; }

.hilfe-gitter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.hilfe-karte {
  background: var(--flaeche);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-weich);
  padding: 22px;
}
.hilfe-karte h3 { font-size: 1.05rem; margin-bottom: 6px; }
.hilfe-karte p { color: var(--tinte-leise); margin: 0; font-size: 0.97rem; }

/* ============================================================
   Versionen und Neuerungen
   ============================================================ */
.neu-hinweis { margin-top: 14px; font-size: 14.5px; }
.neu-hinweis a { color: var(--marke); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.neu-hinweis a:hover { border-bottom-width: 2px; }

.versions-sprung ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.versions-sprung a {
  display: inline-block; min-width: 48px; padding: 8px 12px; text-align: center;
  border-radius: 999px; background: var(--flaeche); box-shadow: var(--schatten-weich);
  color: var(--tinte); font-weight: 700; font-size: 14.5px; text-decoration: none;
}
.versions-sprung a:hover { color: var(--marke); }

.versionen { display: grid; gap: 18px; }
.version {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 28px;
  background: var(--flaeche); border-radius: var(--radius-l); box-shadow: var(--schatten-weich);
  padding: 28px; scroll-margin-top: 90px;
}
.version-neu { grid-template-columns: minmax(0, 1fr) 200px; gap: 14px 32px; box-shadow: var(--schatten-karte); }
.version-neu.ohne-bild { grid-template-columns: minmax(0, 1fr); }
.version-neu .version-kopf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.version-neu .version-datum { margin-top: 0 !important; }
.version-neu .version-inhalt h2 { font-size: 1.6rem; }
.version-kopf p { margin: 0; }
.version-nummer { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }
.version-marke {
  display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; vertical-align: 2px;
  background: var(--marke); color: var(--auf-marke); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.version-datum { color: var(--tinte-leise); font-size: 0.95rem; margin-top: 4px !important; }
.version-inhalt h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 8px; }
.version-inhalt > p { color: var(--tinte-leise); }
.version-inhalt .block-liste { margin: 12px 0 0; }
.version-dank { margin-top: 14px; font-weight: 700; color: var(--marke) !important; }
.version-heute { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--tinte-zart); color: var(--tinte) !important; font-size: 0.95rem; }
.version-links { margin-top: 12px; font-size: 0.95rem; }
.version-links a { color: var(--marke); font-weight: 700; }
.version-bild img { display: block; width: 100%; max-width: 220px; height: auto; margin-inline: auto; }

@media (max-width: 760px) {
  .version, .version-neu { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .version-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
  .version-datum { margin-top: 0 !important; }
  .version-bild img { max-width: 52vw; }
}

/* ============================================================
   Blog
   ============================================================ */
.brotkrumen { padding-top: 30px; font-size: 14px; }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.brotkrumen li { color: var(--tinte-leise); }
.brotkrumen li + li::before { content: "›"; margin: 0 8px; color: var(--tinte-leise); }
.brotkrumen a { color: var(--tinte-leise); text-decoration: none; }
.brotkrumen a:hover { color: var(--marke); text-decoration: underline; }
.brotkrumen [aria-current] { color: var(--tinte); font-weight: 600; }

.artikel-kopf { padding: 22px 0 4px; }
.artikel-kopf h1 { font-size: clamp(1.9rem, 5.2vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.artikel-daten { color: var(--tinte-leise); font-size: 15px; }
.artikel-einstieg { font-size: 1.15rem; line-height: 1.55; margin: 8px 0 26px; }

.artikel-inhalt {
  background: var(--flaeche); border-radius: var(--radius-l); box-shadow: var(--schatten-weich);
  padding: 22px 26px; margin-bottom: 12px;
}
.artikel-inhalt h2 { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-leise); margin: 0 0 8px; }
.artikel-inhalt ol { margin: 0; padding-left: 1.4em; }
.artikel-inhalt li { margin: 5px 0; padding-left: 2px; }
.artikel-inhalt a { color: var(--tinte); text-decoration-color: var(--rinne); text-underline-offset: 3px; }
.artikel-inhalt a:hover { color: var(--marke); text-decoration-color: currentColor; }

.artikel-text h2 { font-size: clamp(1.4rem, 3.4vw, 1.75rem); font-weight: 800; letter-spacing: -0.015em; margin: 40px 0 12px; scroll-margin-top: 90px; }
.artikel-text a { text-underline-offset: 3px; }
.artikel-text h3 { font-size: 1.15rem; font-weight: 800; margin: 26px 0 8px; }
.artikel-text h2 + h3 { margin-top: 14px; }
.artikel-text .block-liste { margin: 0 0 1em; }
.artikel-text .block-liste li { color: var(--tinte); }
.artikel-text section > :last-child { margin-bottom: 0; }

.artikel-tabelle { margin: 6px 0 1.2em; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--schatten-weich); background: var(--flaeche); }
.artikel-tabelle table { width: 100%; border-collapse: collapse; font-size: 0.96rem; line-height: 1.45; }
.artikel-tabelle th, .artikel-tabelle td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--linie); overflow-wrap: break-word; hyphens: auto; }
.artikel-tabelle th { background: var(--tinte-zart); font-weight: 800; font-size: 0.86rem; letter-spacing: 0.03em; }
.artikel-tabelle tbody tr:last-child td { border-bottom: 0; }
.artikel-tabelle td:first-child { white-space: nowrap; font-weight: 700; }
.artikel-tabelle td:nth-child(2) { font-weight: 600; }

.artikel-aufruf { margin: 48px 0 0; padding: 46px 26px; }
.artikel-weiter { margin-top: 52px; }
.artikel-weiter > h2 { font-size: clamp(1.4rem, 3.4vw, 1.75rem); font-weight: 800; margin-bottom: 18px; }
.artikel .zurueck { margin: 30px 0 48px; }

.blog-liste { display: grid; gap: 18px; }
.blog-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.blog-karte {
  position: relative; display: flex; flex-direction: column;
  background: var(--flaeche); border-radius: var(--radius-l); box-shadow: var(--schatten-weich);
  padding: 24px 22px 22px; transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.blog-karte:hover { box-shadow: var(--schatten-karte); transform: translateY(-2px); }
.blog-marke { font-family: var(--handschrift); color: var(--marke); font-size: 1.55rem; line-height: 1; margin: 0 0 10px; }
.blog-karte h3 { font-size: 1.12rem; font-weight: 800; line-height: 1.25; margin: 0 0 10px; }
.blog-karte h3 a { color: var(--tinte); text-decoration: none; }
.blog-karte h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.blog-karte h3 a:focus-visible { outline: none; }
.blog-karte:has(a:focus-visible) { outline: 3px solid var(--marke); outline-offset: 3px; }
.blog-karte p { color: var(--tinte-leise); font-size: 0.97rem; margin: 0 0 14px; }
.blog-karte .blog-datum { font-size: 0.86rem; margin: -4px 0 10px; }
.blog-karte .blog-mehr { color: var(--marke); font-weight: 700; margin: auto 0 0; }
.blog-karte .blog-marke { color: var(--marke); font-size: 1.55rem; margin-bottom: 10px; }
.blog-karte-gross { padding: 34px clamp(24px, 5vw, 40px) 30px; box-shadow: var(--schatten-karte); }
.blog-karte-gross .blog-marke { font-size: 2rem; }
.blog-karte-gross h3 { font-size: clamp(1.45rem, 3.6vw, 1.9rem); letter-spacing: -0.015em; }
.blog-karte-gross p { font-size: 1.04rem; max-width: 58ch; }

@media (max-width: 760px) {
  .blog-gitter { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
  /* Schmale Handys: jede Tabellenzeile als kleiner Block – Datum und Anlass oben, Hintergrund darunter */
  .artikel-tabelle thead { display: none; }
  .artikel-tabelle table, .artikel-tabelle tbody, .artikel-tabelle tr { display: block; }
  .artikel-tabelle tr { padding: 12px 16px; border-bottom: 1px solid var(--linie); }
  .artikel-tabelle tbody tr:last-child { border-bottom: 0; }
  .artikel-tabelle td { display: inline; padding: 0; border: 0; }
  .artikel-tabelle td:first-child { white-space: nowrap; color: var(--marke); }
  .artikel-tabelle td:first-child::after { content: " · "; color: var(--tinte-leise); }
  .artikel-tabelle td:nth-child(3) { display: block; margin-top: 3px; color: var(--tinte-leise); }
  .artikel-inhalt { padding: 18px 18px; }
}
/* Lange Tabellen und Listen: gekürzt mit Knopf „Alle … anzeigen“ (Script in main.js) */
.gekuerzt .zusatz { display: none !important; }
.artikel-tabelle.gekuerzt { position: relative; }
.artikel-tabelle.gekuerzt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--flaeche) 0%, transparent), var(--flaeche));
  pointer-events: none;
}
.mehr-knopf {
  display: flex; align-items: center; gap: 8px; margin: -2px auto 1.6em;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--marke);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px;
  box-shadow: var(--schatten-weich); padding: 10px 18px; cursor: pointer;
}
.mehr-knopf::after {
  content: ""; width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.mehr-knopf[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
.mehr-knopf:hover { box-shadow: var(--schatten-karte); }
.mehr-knopf[hidden] { display: none; }

/* Häufige Fragen im Artikel: dasselbe Akkordeon wie auf der Startseite, in der Textspalte */
.artikel-faq { margin: 4px 0 0; border-top: 1px solid var(--linie); }
.artikel-faq summary.frage-kopf { padding: 16px 44px 16px 0; font-size: 1.04rem; }
.artikel-faq summary.frage-kopf::after { right: 8px; }
.artikel-faq .frage-text { padding: 0 0 18px; color: var(--tinte); }

/* Breite Tabellen (mehr als drei Spalten): auf dem Handy je Zeile ein Block,
   jede Angabe mit ihrer Spaltenüberschrift davor */
@media (max-width: 600px) {
  /* Die Spaltenköpfe stehen als data-label vor jedem Wert */
  .artikel-tabelle.breit thead { display: none; }
  .artikel-tabelle.breit table, .artikel-tabelle.breit tbody, .artikel-tabelle.breit tr, .artikel-tabelle.breit td { display: block; }
  .artikel-tabelle.breit tr { padding: 12px 16px; border-bottom: 1px solid var(--linie); }
  .artikel-tabelle.breit tbody tr:last-child { border-bottom: 0; }
  .artikel-tabelle.breit td { padding: 2px 0; border: 0; white-space: normal; font-weight: 400; color: var(--tinte); }
  .artikel-tabelle.breit td:first-child { font-weight: 800; color: var(--marke); margin-bottom: 4px; }
  .artikel-tabelle.breit td:first-child::after { content: none; }
  .artikel-tabelle.breit td:not(:first-child)::before { content: attr(data-label) ": "; color: var(--tinte-leise); font-weight: 600; }
  .artikel-tabelle.breit td:nth-child(3) { margin-top: 0; color: var(--tinte); }
}
@media print {
  .artikel-aufruf, .artikel-weiter, .brotkrumen { display: none !important; }
  .gekuerzt .zusatz { display: revert !important; }
  .artikel-tabelle.gekuerzt::after, .mehr-knopf { display: none !important; }
}

/* Zurück-Link */
.zurueck {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--marke); font-weight: 700;
  margin-top: 8px;
}

/* ============================================================
   Anpassung an kleine Schirme
   ============================================================ */

.block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
  padding: var(--raum-block) 0;
}

/* Jeder zweite Block spiegelt sich */
.block:nth-of-type(even) .block-bild { order: -1; }

.block-text { min-width: 0; }
.block .block-wort {   /* .block p ist spezifischer – deshalb mit .block davor */
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--marke);
  margin: 0 0 10px;
}
.block h2 { margin: 0 0 18px; }
.block p { margin: 0 0 14px; color: var(--tinte-leise); font-size: 1.04rem; }
.block-liste { margin: 0; padding: 0; list-style: none; }
.block-liste li {
  position: relative;
  padding-left: 26px;
  margin: 9px 0;
  color: var(--tinte-leise);
}
.block-liste li::before {
  content: "";
  position: absolute; left: 4px; top: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--marke);
}

/* Die Bildseite. Der iPhone-Rahmen steckt im Bild selbst (transparentes PNG,
   als WebP umgewandelt) – deshalb hier weder Rahmen noch Radius noch Schatten.
   Jede zusätzliche Kante würde doppelt wirken. */
.block-bild { display: grid; place-items: center; }
.block-bild img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* Einblenden beim Scrollen – nur wenn das Skript es freigibt (Klasse am <html>).
   Ohne JavaScript oder mit „Bewegung reduzieren“ stehen die Bilder einfach da. */
.block { overflow-x: clip; }
.einblenden .block-bild img,
.einblenden .block-text {
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.einblenden .block:not(.sichtbar) .block-bild img { opacity: 0; transform: translate3d(40px, 0, 0); }
.einblenden .block:nth-of-type(even):not(.sichtbar) .block-bild img { transform: translate3d(-40px, 0, 0); }
.einblenden .block:not(.sichtbar) .block-text { opacity: 0; transform: translate3d(0, 14px, 0); }
.einblenden .block.sichtbar .block-text { transition-delay: 0.12s; }

/* ============================================================
   Großes Statement – ein Satz, viel Luft, kein Kasten
   ============================================================ */
.gross-satz {
  
  margin: 6px 0 26px;
  text-wrap: balance;
}

/* ============================================================
   Datenschutz – das einzige bewusste Farbband der Seite,
   randlos über die volle Breite statt als Karte im Raster.
   ============================================================ */
.schutz-band {
  background: var(--buehne);
  color: #fff;
  padding: 88px 0;
}
.schutz-band h2 {
  color: #fff;
  
  margin: 6px 0 20px;
}
.schutz-band > .huelle > p:not(.zwischenwort) { color: rgba(255, 255, 255, 0.76); font-size: 1.08rem; }
/* Auf der dunklen Bühne immer die helle Koralle – die dunkle (Leinen) käme nur auf 2,7:1 */
.schutz-band .zwischenwort { color: #ff6b5b; }
.schutz-punkte {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 30px;
  margin-top: 0;
  text-align: center;
}
.schutz-punkt b {
  display: block;
  font-size: 1.24rem;
  letter-spacing: -0.02em;
  margin-bottom: 7px;
}
.schutz-punkt span { font-size: 0.94rem; color: rgba(255, 255, 255, 0.62); }
/* Große, transparente Linien-Symbole über den vier Punkten */
.schutz-sinnbild { display: block; width: 76px; height: 76px; margin: 0 auto 16px; color: rgba(255, 255, 255, 0.42); }

/* ============================================================
   Bewertungen aus dem App Store – direkt unter den Screenshots
   ============================================================ */
.stimmen { padding: 64px 0 24px; }
.stimmen-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stimme figure { margin: 0; height: 100%; display: flex; flex-direction: column; background: var(--flaeche); border-radius: var(--radius-l); box-shadow: var(--schatten-weich); padding: 24px; }
.stimme-sterne { display: flex; gap: 3px; margin: 0 0 12px; color: #b5710c; }  /* 3,5:1 auf Leinen */
@media (prefers-color-scheme: dark) { .stimme-sterne { color: var(--gold); } }
.stimme-sterne svg { width: 18px; height: 18px; }
.stimme-titel { font-weight: 800; margin: 0 0 6px; }
.stimme blockquote { margin: 0 0 16px; flex: 1; }
.stimme blockquote p { margin: 0; color: var(--tinte-leise); }
.stimme figcaption { font-size: 0.9rem; color: var(--tinte-leise); }
.stimme figcaption time { white-space: nowrap; }
.stimmen-hinweis { margin: 22px auto 0; max-width: 70ch; text-align: center; font-size: 0.9rem; color: var(--tinte-leise); }
.stimmen-hinweis a { color: var(--marke); font-weight: 700; }
@media (max-width: 1040px) { .stimmen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .stimmen-liste { grid-template-columns: minmax(0, 1fr); gap: 14px; } .stimmen { padding-top: 48px; } }

/* ============================================================
   Eckdaten – nüchterne Zeile statt App-Store-Karten
   ============================================================ */
.eckdaten {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 26px;
  margin: 0;
  padding: 34px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.eckdaten dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 7px;
}
.eckdaten dd { margin: 0; font-weight: 600; font-size: 1.02rem; }

@media (max-width: 1100px) {
  .gitter { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  /* Blöcke untereinander – Bühne immer über dem Text, damit die
     Reihenfolge beim Vorlesen und beim Scrollen gleich bleibt. */
  .block { grid-template-columns: 1fr; gap: 30px; padding: var(--raum-block) 0; }
  .block:nth-of-type(even) .block-bild { order: 0; }
  .block-bild { order: -1; }
  .einblenden .block:not(.sichtbar) .block-bild img,
  .einblenden .block:nth-of-type(even):not(.sichtbar) .block-bild img { transform: translate3d(0, 32px, 0); }
  .schutz-punkte { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .eckdaten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .gitter { grid-template-columns: repeat(2, 1fr); gap: 44px 30px; }
}

/* Menü-Knopf statt Navigation: Mit „Updates“, „Blog“, dem Sprachumschalter und
   dem Knopftext braucht die Kopfzeile rund 1030px. Unter 1080px wird sie zum Menü,
   damit zwischen Logo und Menü Luft bleibt. */
.kopf-nav a, .marke-wort { white-space: nowrap; }
@media (max-width: 1080px) {
  .kopf-nav {
    position: absolute;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linie);
    padding: 8px 20px 16px;
    display: none;
  }
  .kopf-nav.offen { display: flex; }
  .kopf-nav a:not(.knopf) { padding: 12px 4px; border-top: 1px solid var(--linie); }
  .kopf-nav a:not(.knopf):first-child { border-top: 0; }
  .kopf-nav .sprachwahl { align-self: flex-start; margin: 12px 0 2px; }
  .kopf-nav .sprachwahl a:not(.knopf) { padding: 6px 11px; border-top: 0; }
  .kopf-nav .knopf { margin-top: 10px; justify-content: center; }
  .nav-schalter { display: flex; }
}

@media (max-width: 680px) {
  :root {
    --raum: 36px;
    --raum-eng: 24px;
    --raum-block: 24px;
    --titel-abstand: 30px;
  }
  body { font-size: 16px; }

  .gitter { grid-template-columns: 1fr; }
  .hilfe-gitter { grid-template-columns: 1fr; }
  .saeulen { grid-template-columns: 1fr; }
  .eckdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Bildleiste als zentriertes Karussell: der seitliche Innenabstand
     rückt das erste (und letzte) Bild in die Mitte, die snap-Mitte hält
     jedes folgende Bild zentriert. */
  .schau-band {
    margin-inline: 0;
    padding-inline: max(20px, calc((100% - 250px) / 2));
  }
}

/* ============================================================
   Bewegung reduzieren
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Sehr schmale Geräte (iPhone SE und ähnlich)
   ============================================================ */
@media (max-width: 380px) {
  .marke-wort { font-size: 16px; }
  .marke-block img { width: 34px; height: 34px; }
  .kopf-innen { gap: 10px; }
}

/* ============================================================
   Textmarkierung im Markenton
   ============================================================ */
::selection { background: color-mix(in srgb, var(--marke) 24%, transparent); color: var(--tinte); }

/* ============================================================
   Druck – vor allem für Impressum und Datenschutz
   ============================================================ */
@media print {
  .einblenden .block .block-bild img, .einblenden .block .block-text { opacity: 1 !important; transform: none !important; }
  .kopf, .nav-schalter, .sprung, .fuss-spalten, .aufruf, .schau { display: none !important; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .text-block, .karte, details.frage {
    box-shadow: none;
    border: 1px solid #bbb;
    break-inside: avoid;
  }
  /* Aufgeklappt drucken, sonst fehlen die Antworten auf dem Papier */
  details.frage { overflow: visible; }
  details.frage > .frage-text { display: block !important; }
  /* Neuere Chrome-Fassungen blenden über ::details-content aus */
  details.frage::details-content { content-visibility: visible !important; }
  summary.frage-kopf::after { display: none; }
  a { color: #000; text-decoration: underline; }
  /* Zieladresse hinter externen Links ausgeben */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .platzhalter { border: 1px dashed #999; color: #000; }
}

/* ============================================================
   Beziehungsrechner (Blog) – Script in js/rechner.js
   ============================================================ */
.artikel-faq summary.frage-kopf h3 { font: inherit; color: inherit; margin: 0; letter-spacing: normal; }
.artikel-text code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; background: var(--tinte-zart); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }

.rechner {
  background: radial-gradient(300px 300px at calc(100% + 60px) -30px, color-mix(in srgb, var(--herz-hell) 30%, transparent), transparent 70%), var(--flaeche);
  border-radius: var(--radius-xl); box-shadow: var(--schatten-karte);
  padding: 28px clamp(18px, 4.5vw, 36px) 24px; margin: 0 0 26px;
}
.rechner-marke { font-family: var(--handschrift); color: var(--marke); font-size: 1.7rem; line-height: 1; margin: 0 0 6px; }
.rechner h2 { font-size: clamp(1.35rem, 3.2vw, 1.65rem); font-weight: 800; letter-spacing: -0.015em; margin: 0 0 18px; }
.rechner-ergebnis h3 {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinte-leise); margin: 30px 0 10px;
}

/* Eingabe */
.rechner-felder { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 12px 14px; align-items: end; }
.rechner-feld { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.rechner-feld label { font-weight: 700; font-size: 15px; }
.rechner-feld label span { font-weight: 400; color: var(--tinte-leise); }
.rechner-feld input {
  font: inherit; font-size: 17px; font-weight: 600; color: var(--tinte); background: var(--bg);
  border: 1.5px solid transparent; border-radius: var(--radius-m); padding: 12px 14px; min-height: 52px; width: 100%;
  -webkit-appearance: none; appearance: none; color-scheme: light dark;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); transition: border-color 0.15s ease, background 0.15s ease;
}
.rechner-feld input:hover { border-color: var(--rinne); }
.rechner-feld input:focus-visible { outline: none; border-color: var(--marke); background: var(--flaeche); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marke) 18%, transparent); }
.rechner-feld input[aria-invalid="true"] { border-color: var(--marke); }
.rechner-los .knopf { min-height: 52px; justify-content: center; padding-inline: 26px; }
.rechner-fehler { color: var(--marke); font-weight: 700; margin: 12px 0 0; }

/* Ergebnis */
.rechner-ergebnis { margin-top: 26px; }
.rechner-buehne {
  --hell: #ffffff; --hell-leise: rgba(255, 255, 255, 0.68);
  background: radial-gradient(320px 320px at 80px calc(100% + 20px), rgba(255, 107, 91, 0.30), transparent 70%), var(--anthrazit); color: var(--hell); border-radius: var(--radius-l);
  padding: 24px clamp(18px, 4vw, 28px) 20px; box-shadow: var(--schatten-tief);
}
.rechner-ergebnis .rechner-hand {
  font-family: var(--handschrift); font-size: 1.6rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--herz-hell); margin: 0 0 4px; line-height: 1;
}
.rechner-satz { font-size: clamp(1.25rem, 3.4vw, 1.6rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.28; margin: 0 0 18px; color: var(--hell); }
.rechner-satz:focus { outline: none; }
.rechner-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.rechner-zahlen > div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-m); padding: 12px 14px;
}
.rechner-zahlen dd { margin: 0; font-size: clamp(1.15rem, 3.2vw, 1.5rem); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--hell); }
.rechner-zahlen dt { font-size: 13.5px; color: var(--hell-leise); margin-top: 3px; }
.rechner-kachel.live dd { color: var(--herz-hell); }

/* Kalenderblatt */
.rechner-blatt {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 64px; min-height: 64px; border-radius: var(--radius-s); overflow: hidden;
  background: var(--flaeche); box-shadow: var(--schatten-weich); border: 1px solid var(--linie); text-align: center;
}
.rechner-blatt::before { content: ""; align-self: stretch; height: 9px; background: var(--knopf); }
.rechner-blatt b { font-size: 1.45rem; font-weight: 800; line-height: 1; margin-top: 6px; color: var(--tinte); }
.rechner-blatt span { font-size: 11px; font-weight: 700; color: var(--tinte-leise); margin: 3px 4px 7px; line-height: 1.1; }

.rechner-jahrestag { display: flex; align-items: center; gap: 16px; background: var(--bg); border-radius: var(--radius-m); padding: 14px 16px; }
.rechner-jahrestag p { margin: 0; font-weight: 600; }

.rechner-meilensteine { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rechner-meilensteine li { display: flex; align-items: center; gap: 14px; background: var(--bg); border-radius: var(--radius-m); padding: 10px 14px 10px 10px; }
.rechner-meilensteine .rechner-blatt { width: 54px; min-height: 54px; }
.rechner-meilensteine .rechner-blatt b { font-size: 1.2rem; margin-top: 5px; }
.rechner-ms-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rechner-ms-text strong { font-size: 1.02rem; }
.rechner-wann { color: var(--tinte-leise); font-size: 0.92rem; }
.rechner-bis {
  flex: none; font-size: 0.86rem; font-weight: 700; color: var(--marke); white-space: nowrap;
  background: var(--flaeche); border: 1px solid color-mix(in srgb, var(--marke) 30%, transparent); border-radius: 999px; padding: 4px 11px;
}
.rechner-zuletzt { color: var(--tinte-leise); font-size: 0.93rem; margin: 10px 0 0; }

.rechner-erlebt { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.rechner-erlebt > div {
  display: flex; flex-direction: row-reverse; align-items: baseline; gap: 7px;
  background: var(--bg); border-radius: 999px; padding: 8px 15px;
}
.rechner-erlebt dd { margin: 0; font-weight: 800; color: var(--marke); font-variant-numeric: tabular-nums; }
.rechner-erlebt dt { font-size: 0.95rem; }

.rechner-teilen { margin: 26px 0 0; }
.rechner-teilen::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 8l5-5 5 5M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 8l5-5 5 5M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rechner-teilen[hidden] { display: none; }
.rechner-status { min-height: 1.4em; margin: 8px 0 0; color: var(--tinte-leise); font-size: 0.95rem; }
.rechner-hinweis {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--tinte-leise); font-size: 0.9rem; line-height: 1.5; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--linie);
}
.rechner-hinweis::before {
  content: ""; width: 16px; height: 18px; flex: none; margin-top: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-color-scheme: dark) {
  .rechner-buehne { background: radial-gradient(320px 320px at 80px calc(100% + 20px), rgba(255, 107, 91, 0.26), transparent 70%), #0e131a; border: 1px solid rgba(255, 255, 255, 0.06); }
  .rechner-blatt { background: var(--bg); }
}
@media (max-width: 560px) {
  .rechner { border-radius: var(--radius-l); }
  .rechner-felder { grid-template-columns: minmax(0, 1fr); }
  .rechner-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rechner-zahlen > div:nth-child(n+5) { grid-column: 1 / -1; }
  .rechner-meilensteine li { flex-wrap: wrap; }
  .rechner-ms-text { flex-basis: calc(100% - 70px); }
  .rechner-bis { margin-left: 68px; }
}
@media print {
  .rechner-form, .rechner-teilen, .rechner-status { display: none; }
  .rechner { box-shadow: none; border: 1px solid #ccc; }
  .rechner-buehne { background: none; color: inherit; box-shadow: none; border: 1px solid #ccc; }
}