/* GesundPass – öffentliche Website
   Ruhig, warm, kontrastreich. Systemschrift, keine externen Ressourcen,
   keine Cookies, kein Tracking. Farben und Radien folgen dem App-Design. */

:root {
  color-scheme: light dark;

  /* ---- Referenzpalette GesundPass ----
     Beige   #EDE3D1   Creme  #F6F2EA   Weiß   #FFFFFF
     Salbei  #A7C9AB   Grün   #7BA37F   Apricot #F2815E
     Salbei, Grün und Apricot tragen als Textfarbe zu wenig Kontrast
     (2,2:1 bis 3,1:1). Sie werden deshalb ausschließlich für Flächen,
     Symbole und Akzente verwendet. Für Text und Bedienelemente dient das
     dunklere Markengrün aus dem Logo (#50745C, 5,3:1 auf Weiß). */

  --beige: #EDE3D1;
  --creme: #F6F2EA;
  --salbei: #A7C9AB;
  --gruen-hell: #7BA37F;
  --apricot: #F2815E;

  --grund: var(--creme);
  --grund-tief: var(--beige);
  --karte: #FFFFFF;
  --text: #2C3A33;
  --sek: #6B6B6B;
  --gruen: #7BA37F;
  --dunkel: #50745C;
  --linie: #DDD2BD;
  --koralle: #AC4227;

  --radius: 24px;
  --radius-klein: 16px;
  --schatten: 0 1px 2px rgba(44, 58, 51, .05), 0 8px 24px rgba(44, 58, 51, .05);
  --breite: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #16201B;
    --grund-tief: #1E2A24;
    --karte: #232F28;
    --text: #F3EFE6;
    --sek: #C3CBC5;
    --gruen: #A7C9AB;
    --dunkel: #A7C9AB;
    --linie: #45534B;
    --koralle: #F0A092;
    --schatten: none;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background-color: var(--grund);
  background-image:
    radial-gradient(circle at 10% 8%, rgba(167, 201, 171, .24), transparent 30rem),
    radial-gradient(circle at 92% 22%, rgba(242, 129, 94, .10), transparent 28rem),
    linear-gradient(145deg, var(--grund) 0%, color-mix(in srgb, var(--grund) 92%, var(--grund-tief)) 52%, var(--grund) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  body {
    background-image:
      radial-gradient(circle at 12% 7%, rgba(123, 163, 127, .18), transparent 32rem),
      radial-gradient(circle at 90% 25%, rgba(167, 201, 171, .09), transparent 30rem),
      linear-gradient(145deg, #14221B 0%, var(--grund) 48%, #19271F 100%);
  }
}

/* --- Fokus: immer sichtbar --- */
:focus-visible {
  outline: 3px solid var(--dunkel);
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :focus-visible { outline-color: #e8dfcd; }
}

.ueberspringen {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--karte); color: var(--text);
  padding: 14px 20px; border-radius: 0 0 var(--radius-klein) 0;
  text-decoration: none; font-weight: 700;
}
.ueberspringen:focus { left: 0; }

/* --- Kopf und Navigation --- */
.kopf {
  border-bottom: 1px solid var(--linie);
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
}
.kopf {
  position: relative;
}
.kopf-innen {
  max-width: 1320px; margin: auto; padding: 10px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
}
.marke {
  display: inline-flex; align-items: center; min-height: 52px;
  text-decoration: none;
}
/* Wort-Bild-Marke als Bild: Die serifenbetonte Wortmarke laesst sich mit
   Systemschriften nicht nachbilden, deshalb das Originalasset. */
.marke-bild { height: 38px; width: auto; display: block; }
/* Logofassung nach Farbschema. Die dunkelgruene Wortmarke traegt auf dunklem
   Grund zu wenig Kontrast, deshalb eine helle Zweitfassung. */
.marke-bild.dunkel-modus { display: none; }
@media (prefers-color-scheme: dark) {
  .marke-bild.hell-modus { display: none; }
  .marke-bild.dunkel-modus { display: block; }
}
.hauptnav { margin: 0 auto; }
.hauptnav ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 0; padding: 0;
}

/* Aufklappmenü für schmale Displays.
   Bewusst ohne JavaScript – die Seite lädt keine Skripte, und die CSP
   verbietet sie. Ein <details> liesse sich per CSS nicht zuverlässig
   dauerhaft geöffnet halten; deshalb ein Kontrollkästchen, das nur
   visuell versteckt ist und damit per Tastatur bedienbar bleibt. */
.menue-schalter {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.menue-knopf {
  display: none; align-items: center; gap: 12px; cursor: pointer;
  min-height: 52px; padding: 8px 18px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  font-weight: 700; color: var(--text); background: var(--karte);
}
.menue-schalter:focus-visible + .menue-knopf {
  outline: 3px solid var(--dunkel); outline-offset: 3px;
}
.balken {
  width: 20px; height: 2px; background: currentColor; position: relative; flex: none;
}
.balken::before, .balken::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.balken::before { top: -6px; }
.balken::after { top: 6px; }
.hauptnav a {
  display: inline-flex; align-items: center; min-height: 52px;
  padding: 6px 12px; border-radius: var(--radius-klein);
  color: var(--text); text-decoration: none; font-weight: 600;
}
.hauptnav a:hover { background: var(--grund-tief); }
.hauptnav a[aria-current="page"] {
  background: var(--grund-tief); color: var(--dunkel);
  box-shadow: inset 0 -3px 0 var(--gruen);
}

/* --- Grundlayout --- */
main { display: block; }
.breite { max-width: var(--breite); margin: auto; padding: 0 22px; }
.band { padding: 56px 0; }
.band-tief {
  background:
    radial-gradient(circle at 86% 12%, rgba(167, 201, 171, .18), transparent 30rem),
    linear-gradient(135deg, color-mix(in srgb, var(--grund-tief) 92%, var(--grund)) 0%, var(--grund-tief) 100%);
}
.schmal { max-width: 72ch; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); margin: .2em 0 .35em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 .5em; }
h3 { font-size: 1.2rem; margin: 0 0 .4em; }
p { max-width: 68ch; text-wrap: pretty; }
a { color: var(--dunkel); }

.kicker {
  text-transform: uppercase; letter-spacing: .1em; font-size: .8rem;
  font-weight: 800; color: var(--gruen); margin: 0;
}
.fuehrung { font-size: 1.2rem; color: var(--sek); max-width: 62ch; }

/* --- Startbereich --- */
/* Nur vertikal setzen: .held sitzt am selben Element wie .breite und
   wuerde sonst deren seitliches Innenmass loeschen – der Text klebte
   dadurch am Bildschirmrand. */
.held { padding-top: 64px; padding-bottom: 40px; }
.held h1 { max-width: 18ch; }

/* --- Aktionen --- */
.aktionen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.aktion, .aktion-still {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 14px 26px;
  border-radius: var(--radius-klein); font-weight: 700; font-size: 1.03rem;
  text-decoration: none; border: 2px solid transparent;
}
.aktion { background: var(--dunkel); color: var(--grund); }
.aktion:hover { background: var(--gruen); }
@media (prefers-color-scheme: dark) { .aktion { color: #16201B; } }
.aktion-still { border-color: var(--linie); color: var(--dunkel); background: var(--karte); }
.aktion-still:hover { border-color: var(--gruen); }

/* --- Karten --- */
.raster { display: grid; gap: 20px; }
/* auto-fit statt fester zwei Spalten: Eine der beiden Bereichskarten ist über
   .pflege-zukunft ausgeblendet, solange es keine Pflegedienst-Zugänge gibt.
   Bei festen Spalten blieb die rechte Hälfte leer und die Seite sah aus, als
   fehle etwas. auto-fit lässt die leere Spur entfallen, die Obergrenze
   verhindert, dass die verbliebene Karte über die ganze Breite läuft. */
.raster-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 528px));
  justify-content: center;
}
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.karte {
  background: linear-gradient(145deg, var(--karte) 0%, color-mix(in srgb, var(--karte) 94%, var(--grund-tief)) 100%);
  border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--schatten);
  display: flex; flex-direction: column; gap: 4px;
}
.karte p { color: var(--sek); flex-grow: 1; margin-top: 0; }
.karte .aktion, .karte .aktion-still { align-self: flex-start; margin-top: 12px; }

/* Kompakte Schrittfolge: Nummer und Überschrift stehen in einer Zeile.
   Jeder Schritt bleibt als eigenständiges, ruhig abgerundetes Fenster erkennbar. */
.start-schritte .raster {
  grid-template-columns: 1fr;
  max-width: 980px;
  margin-inline: auto;
  gap: 16px;
}
.start-schritte .karte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "nummer titel"
    ". text";
  align-items: start;
  column-gap: 14px;
  row-gap: 8px;
  padding: 26px 30px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--karte) 96%, var(--grund-tief));
  box-shadow: var(--schatten);
}
.start-schritte .karte .kicker {
  grid-area: nummer;
  width: auto;
  height: auto;
  display: block;
  align-self: baseline;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--dunkel);
  font-size: .8rem;
  letter-spacing: .08em;
  line-height: 1.15;
}
.start-schritte .karte h3 {
  grid-area: titel;
  margin: 0;
  align-self: baseline;
  font-size: clamp(1.12rem, 2vw, 1.28rem);
}
.start-schritte .karte > p:not(.kicker) {
  grid-area: text;
  flex-grow: 0;
  max-width: 76ch;
  margin: 0;
}

.wegweiser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wegweiser .karte { min-height: 260px; }
.zeichen {
  width: 56px; height: 56px; border-radius: 18px; margin-bottom: 12px;
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
  background: var(--salbei); color: #223A2A;
}
.zeichen.beruflich { background: var(--beige); color: #4A4335; }
@media (prefers-color-scheme: dark) {
  .zeichen { background: #33493C; color: #DCEBDE; }
  .zeichen.beruflich { background: #40392E; color: #ECE2CF; }
}

/* --- Listen mit Häkchen: Bedeutung nie nur über Farbe --- */
.punkte { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.punkte li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.punkte li::before {
  content: "✓"; color: var(--dunkel); font-weight: 800; line-height: 1.5;
}
.punkte.minus li::before { content: "✕"; color: var(--koralle); }

dl.fragen { margin: 0; }
dl.fragen > div {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 14px;
}
dl.fragen dt { font-weight: 750; font-size: 1.08rem; }
dl.fragen dd { margin: .5em 0 0; color: var(--sek); }

/* --- Hinweise --- */
.hinweis, .warnung {
  border-left: 5px solid var(--gruen); border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  padding: 18px 22px; margin: 24px 0; background: var(--karte);
}
.warnung { border-left-color: var(--koralle); }
.hinweis p, .warnung p { margin: .4em 0 0; color: var(--sek); }
.hinweis strong, .warnung strong { color: var(--text); }

/* Eine Zusage, keine Warnung.
   Ein Pruefschritt, der noch aussteht, stand vorher im korallenroten
   .warnung-Kasten und las sich damit wie ein Defekt. Er ist aber eine
   Selbstverpflichtung: gleiche ruhige Kartenflaeche wie der uebrige
   Inhalt, gruene Kante, eigene Ueberschrift und mehr Innenabstand als
   .hinweis - dieser Abschnitt soll gelesen werden, nicht ueberblaettert. */
.zusage {
  border: 1px solid var(--linie); border-left: 5px solid var(--gruen);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 26px 30px; margin: 30px 0 0; background: var(--karte);
}
.zusage h3 { margin: 0 0 .6em; font-size: 1.2rem; }
.zusage p { margin: .6em 0 0; color: var(--sek); }
.zusage p:first-of-type { margin-top: 0; }

.offen {
  border: 2px dashed var(--linie); border-radius: var(--radius);
  padding: 22px 26px; margin: 24px 0; background: transparent;
}
.offen ul { margin: .6em 0 0; padding-left: 1.3em; color: var(--sek); }
.offen li { margin: .35em 0; }

/* --- Tabelle --- */
.tabellenrahmen { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 480px; margin-top: 12px; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-weight: 750; }
td { color: var(--sek); }

/* --- Fußzeile --- */
.fuss {
  border-top: 1px solid var(--linie);
  background:
    radial-gradient(circle at 16% 0%, rgba(167, 201, 171, .16), transparent 24rem),
    linear-gradient(145deg, var(--grund-tief), color-mix(in srgb, var(--grund-tief) 88%, var(--grund)));
  margin-top: 24px;
}
.fuss-innen {
  max-width: var(--breite); margin: auto; padding: 40px 20px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
}
.fuss h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sek); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin: 0; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; }
.fuss a:hover { text-decoration: underline; }
.fuss-notiz {
  max-width: var(--breite); margin: auto; padding: 0 20px 36px;
  color: var(--sek); font-size: .93rem;
}
.fuss-notiz p { max-width: 80ch; }

/* --- Schmale Displays --- */
@media (max-width: 860px) {
  .raster-3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .band { padding: 40px 0; }
  .held { padding-top: 32px; padding-bottom: 24px; }
  .breite { padding: 0 20px; }
  .karte { padding: 24px 22px; }
  .start-schritte .karte {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    padding: 22px 20px;
  }
  dl.fragen > div { padding: 20px 22px; }
  .raster-2, .wegweiser { grid-template-columns: 1fr; }
  .wegweiser .karte { min-height: 0; }
  .fuss-innen { grid-template-columns: 1fr; gap: 18px; }
  /* Kopfzeile schmal: Logo und Menueschalter in einer Zeile,
     die Aktionen darunter ueber die volle Breite. */
  .kopf-innen { gap: 10px 14px; }
  .hauptnav { margin: 0 0 0 auto; order: 2; width: auto; position: static; }
  .menue-knopf { display: flex; }
  .hauptnav ul {
    display: none; flex-direction: column; gap: 2px; padding: 10px 0 6px;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 12;
    background: var(--karte); border-bottom: 1px solid var(--linie);
  }
  .menue-schalter:checked ~ ul { display: flex; }
  .hauptnav a { width: 100%; padding: 10px 22px; border-radius: 0; }
  .kopf-aktionen { order: 3; width: 100%; gap: 8px; }
  .kopf-aktionen .anmelden { flex: 0 0 auto; }
  .kopf-cta { flex: 1; justify-content: center; }
  .aktionen .aktion, .aktionen .aktion-still { width: 100%; }
}

/* ---- Abo-Einstieg: Preise erst im geschützten Privatportal ---- */
.abo-einstieg {
  --grund: #F7F2E8;
  --grund-tief: #EEE7DA;
  --karte: #FFFDF8;
  --text: #203229;
  --sek: #52635B;
  --dunkel: #173F2D;
  --gruen: #3F7754;
  --salbei: #DDE7D9;
  --linie: #C8D1C8;
  color-scheme: light dark;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: var(--grund);
  background-image:
    radial-gradient(circle at 12% 12%, rgba(123, 163, 127, .28), transparent 31rem),
    radial-gradient(circle at 88% 30%, rgba(242, 129, 94, .10), transparent 28rem),
    linear-gradient(145deg, #FBF7EF 0%, var(--grund) 48%, #F0E8DA 100%);
  background-attachment: fixed;
  color: var(--text);
}
.abo-einstieg .ueberspringen { background: var(--dunkel); color: #fff; }
.abo-minikopf {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--linie);
  background: color-mix(in srgb, var(--grund) 86%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
.abo-minimarke { display: inline-flex; align-items: center; min-height: 52px; }
.abo-minimarke img { display: block; width: auto; height: 31px; }
.abo-minimarke .dunkel-modus { display: none; }
.abo-minimenue { position: relative; }
.abo-minimenue summary {
  min-width: 52px; min-height: 52px; display: grid; place-items: center;
  cursor: pointer; list-style: none; border-radius: 50%; color: var(--dunkel);
  font-size: 1.35rem; letter-spacing: .08em;
}
.abo-minimenue summary::-webkit-details-marker { display: none; }
.abo-minimenue summary:hover { background: var(--grund-tief); }
.abo-minimenue nav {
  position: absolute; z-index: 5; top: 56px; right: 0;
  width: min(280px, calc(100vw - 36px)); display: grid; padding: 8px;
  border: 1px solid var(--linie); border-radius: 16px; background: var(--karte);
  box-shadow: 0 18px 50px rgba(44,56,48,.14);
}
.abo-minimenue nav a {
  min-height: 48px; display: flex; align-items: center; padding: 8px 13px;
  border-radius: 11px; color: var(--text); text-decoration: none;
}
.abo-minimenue nav a:hover, .abo-minimenue nav a[aria-current="page"] { background: var(--salbei); }
.abo-produktbuehne {
  width: min(100%, 600px); margin: 0 auto;
  min-height: calc(100vh - 138px); min-height: calc(100svh - 138px);
  padding: clamp(18px, 4vh, 46px) 26px 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.abo-appsymbol {
  width: clamp(96px, 14vw, 128px); height: clamp(96px, 14vw, 128px);
  margin-bottom: 28px; border-radius: 25%;
  box-shadow: 0 18px 45px rgba(52,70,59,.16), 0 0 36px rgba(123,163,127,.18);
}
.abo-produktbuehne h1 {
  margin: 0 0 18px; color: var(--dunkel); font-size: clamp(3rem, 8vw, 5rem);
  line-height: 1; letter-spacing: -.045em;
}
.abo-produkttext {
  max-width: 25ch; margin: 0; color: var(--text);
  font-size: clamp(1.25rem, 3vw, 1.58rem); font-weight: 680; line-height: 1.18;
}
.abo-anmelden {
  min-width: 150px; min-height: 52px; margin-top: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 27px; border-radius: 999px; background: var(--dunkel);
  color: #fff; text-decoration: none; font-size: 1.05rem; font-weight: 750;
}
.abo-anmelden:hover { background: var(--gruen); }
.abo-anmeldehinweis {
  max-width: 34ch; margin: 50px 0 0; color: var(--sek);
  font-size: .95rem; line-height: 1.4;
}
.abo-teaserbereich {
  padding: clamp(76px, 9vw, 128px) 24px clamp(86px, 10vw, 140px);
  border-top: 1px solid var(--linie);
  background:
    radial-gradient(circle at 50% -4%, rgba(123,163,127,.34), transparent 38%),
    radial-gradient(circle at 8% 54%, rgba(167,201,171,.15), transparent 26rem),
    radial-gradient(circle at 94% 80%, rgba(242,129,94,.08), transparent 24rem),
    linear-gradient(145deg, var(--grund-tief), color-mix(in srgb, var(--grund-tief) 88%, var(--grund)));
}
.abo-teaserkopf {
  max-width: 760px; margin: 0 auto clamp(44px, 6vw, 72px); text-align: center;
}
.abo-teaser-kicker {
  margin: 0 0 14px; color: var(--gruen); font-size: .87rem; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase;
}
.abo-teaserkopf h2 {
  max-width: 17ch; margin: 0 auto; color: var(--dunkel); font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  line-height: 1.02; letter-spacing: -.045em;
}
.abo-teaserkopf > p:last-child {
  max-width: 620px; margin: 24px auto 0; color: var(--sek);
  font-size: clamp(1.06rem, 1.7vw, 1.25rem); line-height: 1.55;
}
.abo-teaserraster {
  width: min(1120px, 100%); margin: 0 auto; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch;
}
.abo-teaserkarte {
  min-height: 310px; padding: 34px; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(4.8rem, auto) 1fr; align-content: start;
  border: 1px solid var(--linie); border-radius: 28px;
  background: linear-gradient(145deg, #fffdf8 0%, #f8f3e9 100%);
  box-shadow: 0 20px 46px rgba(52,70,59,.09);
}
.abo-teasernummer {
  display: block; margin-bottom: 52px; color: var(--gruen);
  font-size: .87rem; font-weight: 750; letter-spacing: .12em;
}
.abo-teaserkarte h3 {
  margin: 0; color: var(--dunkel); font-size: clamp(1.65rem, 2.5vw, 2.15rem);
  line-height: 1.08; letter-spacing: -.035em;
}
.abo-teaserkarte p {
  margin: 18px 0 0; color: var(--sek); font-size: 1rem; line-height: 1.55;
}
.abo-teaserabschluss {
  max-width: 720px; margin: clamp(50px, 7vw, 80px) auto 0; text-align: center;
}
.abo-teaserabschluss p {
  margin: 0 auto 24px; color: var(--sek); font-size: .87rem; line-height: 1.5;
}
.abo-teaser-cta {
  display: inline-flex; min-height: 52px; align-items: center; justify-content: center;
  padding: 0 27px; border-radius: 999px; background: var(--dunkel); color: #fff;
  font-size: 1rem; font-weight: 750; text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease;
}
.abo-teaser-cta:hover { transform: translateY(-1px); background: var(--gruen); }
.abo-teaser-cta:focus-visible { outline: 3px solid var(--gruen); outline-offset: 4px; }
.abo-minifuss {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  padding: 20px; font-size: .78rem;
}
.abo-minifuss a { color: var(--sek); text-decoration: none; }
.abo-minifuss a:hover { color: var(--dunkel); text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  .abo-einstieg {
    --grund: #172820;
    --grund-tief: #1E3328;
    --karte: #F8F3E9;
    --text: #F4F0E8;
    --sek: #D2DDD5;
    --dunkel: #F4F0E8;
    --gruen: #A8D2AE;
    --salbei: #2B4939;
    --linie: #61776A;
    background-image:
      radial-gradient(circle at 12% 10%, rgba(123,163,127,.28), transparent 34rem),
      radial-gradient(circle at 88% 34%, rgba(167,201,171,.13), transparent 30rem),
      linear-gradient(145deg, #13271D 0%, #1B3427 50%, #14291F 100%);
  }
  .abo-minikopf { background: rgba(23, 40, 32, .84); }
  .abo-minimarke .hell-modus { display: none; }
  .abo-minimarke .dunkel-modus { display: block; }
  .abo-minimenue nav { background: #F8F3E9; border-color: #AEBBB1; }
  .abo-minimenue nav a { color: #203229; }
  .abo-minimenue nav a:hover,
  .abo-minimenue nav a[aria-current="page"] { background: #DDE7D9; }
  .abo-teaserkarte {
    border-color: #AEBBB1;
    background: linear-gradient(145deg, #FFFDF8 0%, #F3EBDD 100%);
  }
  .abo-teaserkarte h3 { color: #173F2D; }
  .abo-teaserkarte p { color: #405249; }
  .abo-teasernummer { color: #356C4A; }
  .abo-anmelden,
  .abo-teaser-cta { background: #B7DDBB; color: #10241A; }
  .abo-anmelden:hover,
  .abo-teaser-cta:hover { background: #D0E8D2; }
}
@media (max-width: 600px) {
  .abo-minikopf { padding: 8px 10px; }
  .abo-minimarke img { height: 28px; }
  .abo-produktbuehne { justify-content: flex-start; padding-top: 18px; }
  .abo-appsymbol { margin-bottom: 25px; }
  .abo-anmelden { margin-top: 46px; }
  .abo-anmeldehinweis { margin-top: 46px; }
  .abo-teaserraster { grid-template-columns: 1fr; }
  .abo-teaserkarte { min-height: 0; grid-template-rows: auto auto auto; }
  .abo-teasernummer { margin-bottom: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .abo-teaser-cta { transition: none; }
}

@media (prefers-contrast: more) {
  :root { --linie: #55645E; --sek: #3C4A45; }
  .karte { border-width: 2px; }
  /* Nur die feine Kontur verstaerken. Ein pauschales border-width: 2px hat
     hier die farbige 5px-Kante links mitgeschrumpft - ausgerechnet im
     Kontrastmodus wurde die Kennzeichnung also schwaecher. */
  .hinweis, .warnung, .zusage {
    border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px;
  }
}

/* Nur für Screenreader sichtbar (z. B. Tabellenbeschriftungen). */
.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =====================================================================
   Startseite nach Designreferenz: Hero zweispaltig, Merkmalsleiste,
   Bereichskarten mit Tag, Sicherheitsband.
   ===================================================================== */

/* --- Kopf mit Aktionen --- */

.kopf-aktionen { display: flex; align-items: center; gap: 4px; }
.kopf-aktionen .anmelden {
  display: inline-flex; align-items: center; min-height: 52px; padding: 6px 14px;
  color: var(--text); text-decoration: none; font-weight: 600; border-radius: var(--radius-klein);
}
.kopf-aktionen .anmelden:hover { background: var(--grund-tief); }
.kopf-cta {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px;
  background: var(--dunkel); color: var(--grund); border-radius: var(--radius-klein);
  text-decoration: none; font-weight: 700;
}
.kopf-cta:hover { background: var(--gruen); }
@media (prefers-color-scheme: dark) { .kopf-cta { color: #16201B; } }

/* --- Hero --- */
.held-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  /* stretch statt center: Die Bildspalte fuellt die Hoehe der Textspalte.
     Vorher schwebte die freigestellte Grafik mittig in einer mehr als
     doppelt so hohen Spalte - das war die Unruhe, die auffiel. */
  align-items: stretch;
}
/* Eine ruhige Flaeche traegt das Bild. Sie gibt der rechten Spalte eine
   Kante, sodass beide Haelften als gleich grosse Bloecke lesen. */
.held-buehne {
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--grund-tief) 55%, var(--karte));
}
.held-bild { width: 100%; height: auto; display: block; }
.zusicherung {
  display: flex; align-items: center; gap: 10px; margin-top: 22px;
  color: var(--sek); font-size: .98rem;
}
.zusicherung svg { flex: none; }

/* Preiszeile unter den Handlungsknöpfen.
   Der Preis stand bisher nur im angemeldeten Bereich – erreichbar erst nach
   einer Registrierung, die man ohne Preiskenntnis nicht macht. Wer einen
   Preis sucht und nicht findet, rechnet mit dem Schlimmsten. */
.held-preis {
  margin-top: 18px;
  color: var(--sek);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 34rem;
}
.held-preis strong { color: var(--text); }
/* Der Satz zum Stand der App. Kleiner als der Preis, aber im selben Block:
   Wer den Preis liest, soll im selben Atemzug erfahren, ab wann er gilt. */
.held-stand { display: inline-block; margin-top: 6px; font-size: .94rem; }

/* --- Merkmalsleiste --- */
.merkmale {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.merkmale > div {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start;
  padding: 30px 26px 30px 0;
}
.merkmale > div + div { border-left: 1px solid var(--linie); padding-left: 26px; }
/* h2, nicht h3: Die drei Merkmale stehen direkt unter der h1 der Seite, ohne
   Zwischenüberschrift. Als h3 war es ein Sprung in der Gliederung, den eine
   Sprachausgabe als fehlende Ebene ansagt. Die Größe bleibt bewusst klein –
   die Rangfolge macht hier die Gestaltung, nicht die Schriftgröße. */
.merkmale h2 { margin: 0 0 .25em; font-size: 1.05rem; }
.merkmale p { margin: 0; color: var(--sek); font-size: .98rem; }
.abzeichen {
  width: 56px; height: 56px; border-radius: 50%; background: var(--salbei);
  display: grid; place-items: center;
}
@media (prefers-color-scheme: dark) { .abzeichen { background: #33493C; } }

/* Die vier Grundsätze der Sicherheitsseite.
   Vorher eine Häkchenliste - vier tragende Aussagen sahen darin aus wie eine
   Merkmalsaufzählung. Als Paare aus Überschrift und Satz bekommen sie die
   Ruhe, die zu ihrem Gewicht passt. */
.grundsaetze-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 48px;
  margin-top: 28px;
}
.grundsaetze-raster h3 { margin: 0 0 .35em; font-size: 1.18rem; }
.grundsaetze-raster p { margin: 0; color: var(--sek); }
@media (max-width: 760px) {
  .grundsaetze-raster { grid-template-columns: 1fr; gap: 26px; }
}

/* Drei konkrete Situationen unter der Merkmalsleiste.
   Gleiche Rasterlogik wie .merkmale, aber mit Luft und ohne Trennlinien: Es
   sind kurze Geschichten, keine Eigenschaften. */
/* Eigener Abstand: .breite bringt nur die Seitenränder mit, die vertikale
   Luft kommt sonst von .band. Ohne sie klebte der Abschnitt an der
   Merkmalsleiste darüber. */
/* padding-top/-bottom einzeln, nicht als Kurzschreibweise: "padding: 52px 0"
   haette den seitlichen Innenabstand von .breite ueberschrieben - der ganze
   Abschnitt stand dann 22 px weiter links als jeder andere auf der Seite. */
.momente-bereich { padding-top: 52px; padding-bottom: 8px; }
.momente {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 26px;
}
.momente h3 { margin: 0 0 .4em; font-size: 1.15rem; }
.momente p { margin: 0; color: var(--sek); }
@media (max-width: 900px) {
  .momente { grid-template-columns: 1fr; gap: 22px; }
}

/* --- Bereichskarten mit Tag --- */
.mitte { text-align: center; }
.mitte p { margin-left: auto; margin-right: auto; }
.tag {
  display: inline-block; align-self: flex-start; font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px;
  border-radius: 999px; margin-bottom: 14px;
  background: var(--salbei); color: #223A2A;
}
.tag.beruflich { background: #FCE2DA; color: #8C3323; }
@media (prefers-color-scheme: dark) {
  .tag { background: #33493C; color: #DCEBDE; }
  .tag.beruflich { background: #4F2E27; color: #F5C9BE; }
}
.bereichskarte {
  background: linear-gradient(145deg, var(--karte), color-mix(in srgb, var(--karte) 94%, var(--grund-tief)));
}
.bereichskarte .karten-bild {
  width: 100%; height: auto; border-radius: var(--radius-klein); margin-bottom: 20px; display: block;
}
.pfeil-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  font-weight: 750; color: var(--dunkel); text-decoration: none;
  border-bottom: 2px solid var(--gruen); align-self: flex-start; margin-top: 8px;
}
.pfeil-link:hover { gap: 16px; }
@media (prefers-reduced-motion: no-preference) { .pfeil-link { transition: gap .15s; } }

/* --- Sicherheitsband --- */
.band-titel { display: flex; align-items: center; gap: 16px; }
.band-titel h2 { margin: 0; }

/* --- Häkchenliste: Text muss normal umbrechen --- */
.punkte li {
  display: block; position: relative; padding-left: 32px;
  grid-template-columns: none;
}
.punkte li::before {
  position: absolute; left: 0; top: 0; width: 22px; text-align: center;
}

@media (max-width: 900px) {
  .held-raster { grid-template-columns: 1fr; gap: 28px; }
  .merkmale { grid-template-columns: 1fr; }
  .merkmale > div { padding: 24px 0; }
  .merkmale > div + div { border-left: 0; border-top: 1px solid var(--linie); padding-left: 0; }
}
@media (max-width: 760px) {
  .kopf-aktionen { margin-left: 0; width: 100%; }
  .kopf-cta { flex: 1; justify-content: center; }
}

/* Notrufhinweis: rot, aber nie allein über Farbe – der Text sagt es auch. */
.notruf { color: var(--koralle); }
.notruf strong { color: var(--koralle); }

/* Die Illustrationen sind freigestellte Strichzeichnungen mit dunklen Konturen.
   Im Dunkelmodus bekommen sie eine helle Trägerfläche, sonst verschwinden die
   Umrisse im Hintergrund. */
@media (prefers-color-scheme: dark) {
  .held-bild, .karten-bild { background: var(--beige); padding: 8px; }
}

/* ---- Kontaktformular ---- */
.kontaktformular { display: grid; gap: .35rem; margin: 1.5rem 0; }
.kontaktformular label { font-weight: 600; margin-top: .9rem; }
.kontaktformular label:first-child { margin-top: 0; }
.kontaktformular input, .kontaktformular textarea {
  font: inherit; color: inherit; width: 100%;
  padding: .7rem .85rem; border-radius: 12px;
  border: 1px solid var(--linie);
  background: color-mix(in srgb, var(--karte) 94%, var(--grund));
}
.kontaktformular textarea { resize: vertical; min-height: 9rem; }
.kontaktformular input:focus-visible, .kontaktformular textarea:focus-visible {
  outline: 3px solid var(--dunkel); outline-offset: 1px;
}
.kontaktformular .warnung, .kontaktformular .klein { margin-top: 1.1rem; }
.kontaktformular button { margin-top: 1.1rem; justify-self: start; }
.freiwillig { font-weight: 400; color: var(--sek); }
.klein { font-size: .9rem; color: var(--sek); }

/* ---- Abo und Preise ---- */
.abo-held { padding-top: 78px; padding-bottom: 64px; text-align: center; }
.abo-held h1 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.abo-held .fuehrung { margin-left: auto; margin-right: auto; }
.abo-aktionen { justify-content: center; }
.abo-vertrauen {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  list-style: none; padding: 0; margin: 30px 0 0; color: var(--sek); font-size: .95rem;
}
.abo-vertrauen li::before { content: "✓"; color: var(--dunkel); font-weight: 800; margin-right: 8px; }
.preis-status {
  max-width: 74ch; margin: 30px auto 0; padding: 15px 20px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: linear-gradient(145deg, var(--karte), color-mix(in srgb, var(--karte) 94%, var(--grund-tief)));
  color: var(--sek); font-size: .93rem;
}
.preis-status strong { color: var(--text); }
.abo-einstieg { margin-bottom: 30px; }
.free-leiste {
  display: grid; grid-template-columns: 1fr auto minmax(300px, .9fr); gap: 28px;
  align-items: center; margin-bottom: 22px; padding: 28px;
  background: linear-gradient(145deg, var(--karte), color-mix(in srgb, var(--karte) 94%, var(--grund-tief)));
  border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.free-leiste h3 { margin-top: 12px; font-size: 1.45rem; }
.free-leiste p { margin-bottom: 0; color: var(--sek); }
.free-preis { text-align: right; }
.free-preis strong { display: block; color: var(--text); font-size: 2.3rem; line-height: 1; }
.free-preis span { display: block; margin-top: 7px; font-size: .88rem; }
.kompakt-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kompakt-liste li { position: relative; padding-left: 27px; color: var(--sek); }
.kompakt-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--dunkel); font-weight: 800; }
.preis-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.preis-raster-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preis-karte {
  position: relative; display: flex; flex-direction: column; padding: 28px 24px;
  background: linear-gradient(145deg, var(--karte), color-mix(in srgb, var(--karte) 94%, var(--grund-tief)));
  border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.preis-karte.preis-empfohlen { border: 2px solid var(--dunkel); }
.preis-karte.preis-free { background: color-mix(in srgb, var(--karte) 76%, var(--grund-tief)); }
.preis-tag {
  display: inline-flex; align-self: flex-start; padding: 7px 12px;
  border-radius: 999px; background: var(--grund-tief); color: var(--dunkel);
  font-size: .76rem; line-height: 1.25; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.preis-tag.voll { background: var(--dunkel); color: var(--grund); }
@media (prefers-color-scheme: dark) { .preis-tag.voll { color: #16201B; } }
.modell { margin: 24px 0 5px; color: var(--dunkel); font-weight: 750; }
.preis-karte h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
.preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin: 26px 0 4px; }
.preis strong { color: var(--text); font-size: clamp(2rem, 3.5vw, 2.7rem); line-height: 1; letter-spacing: -.04em; }
.preis span { color: var(--sek); font-weight: 650; }
.preis-monat { margin: 0 0 24px; color: var(--sek); font-size: .93rem; }
.preis-liste { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 13px; }
.preis-liste li { position: relative; padding-left: 30px; }
.preis-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--dunkel); font-weight: 850; }
.preis-karte .aktion, .preis-karte .aktion-still { width: 100%; margin-top: auto; }
.karten-klein { margin: 16px 0 0; color: var(--sek); font-size: .82rem; line-height: 1.45; }
.preis-fussnote { margin: 20px auto 0; max-width: 86ch; color: var(--sek); text-align: center; font-size: .84rem; }
.aktionscode-band { background: linear-gradient(135deg, var(--gruen-flaeche), var(--grund)); }
.aktionscode-karte {
  padding: 30px; background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.aktionscode-karte p {
  display: flex; justify-content: space-between; gap: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--linie); color: var(--sek);
}
.aktionscode-karte p:first-child { margin-top: 0; }
.aktionscode-karte strong { color: var(--text); }
.aktionscode-karte .aktion { width: 100%; margin-top: 14px; }
.aktionscode-karte small { display: block; margin-top: 14px; color: var(--sek); line-height: 1.5; }
.abo-tabelle { margin-top: 30px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); }
.abo-tabelle table { margin: 0; }
.abo-tabelle th:first-child { color: var(--text); }
.fairness-raster { display: grid; grid-template-columns: .85fr 1.15fr; gap: 58px; align-items: start; }
.fairness-liste { padding: 28px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); }
.abo-fragen { display: grid; gap: 12px; margin-top: 28px; }
.abo-fragen details { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 0 22px; }
.abo-fragen summary { cursor: pointer; min-height: 60px; display: flex; align-items: center; gap: 14px; font-weight: 750; list-style: none; }
.abo-fragen summary::-webkit-details-marker { display: none; }
.abo-fragen summary::after { content: "+"; margin-left: auto; color: var(--dunkel); font-size: 1.45rem; line-height: 1; }
.abo-fragen details[open] summary::after { content: "−"; }
.abo-fragen details p { margin-top: 0; color: var(--sek); }
.abo-abschluss {
  margin-top: 54px; margin-bottom: 70px; padding: 52px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--karte); text-align: center; box-shadow: var(--schatten);
}
.abo-abschluss h2, .abo-abschluss p { margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .free-leiste { grid-template-columns: 1fr auto; }
  .free-leiste .kompakt-liste { grid-column: 1 / -1; }
  .fairness-raster { grid-template-columns: 1fr; gap: 28px; }
  .preis-raster-drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preis-raster-drei .preis-free { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .abo-held { padding-top: 46px; padding-bottom: 40px; }
  .preis-raster { grid-template-columns: 1fr; }
  .preis-raster-drei .preis-free { grid-column: auto; }
  .preis-karte { padding: 28px 24px; }
  .free-leiste { grid-template-columns: 1fr; padding: 24px 22px; }
  .free-preis { text-align: left; }
  .free-leiste .kompakt-liste { grid-column: auto; }
  .abo-abschluss { margin-top: 34px; margin-bottom: 44px; padding: 34px 22px; }
}


/* ---- Temporär zurückgestellter Pflegedienstbereich ----
   Der Quellcode bleibt erhalten. Entfernen/überschreiben dieser Regel macht
   die markierten Hinweise auf der öffentlichen Website wieder sichtbar. */
.pflege-zukunft { display: none !important; }

/* ---- Kompaktes FAQ auf der Startseite ---- */
.start-faq { padding-top: 72px; padding-bottom: 78px; }
.faq-kompakt { max-width: 860px; margin: 30px auto 0; display: grid; gap: 12px; }
.faq-kompakt details { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 0 22px; box-shadow: 0 8px 24px rgba(20,40,31,.035); }
.faq-kompakt summary { cursor: pointer; min-height: 64px; display: flex; align-items: center; gap: 16px; font-weight: 750; list-style: none; }
.faq-kompakt summary::-webkit-details-marker { display: none; }
.faq-kompakt summary::after { content: "+"; margin-left: auto; color: var(--dunkel); font-size: 1.45rem; line-height: 1; }
.faq-kompakt details[open] summary::after { content: "−"; }
.faq-kompakt details p { margin-top: 0; padding-right: 36px; color: var(--sek); }
.faq-mehr { justify-content: center; margin-top: 24px; }

/* --- Der Weg zum Start (Punkt 1) ---------------------------------------
   Drei nummerierte Schritte statt einer kleingedruckten Einschraenkung.
   Gleiches Raster wie .momente, aber mit Nummer und einer duennen Linie
   darueber: Die Linie macht aus drei Karten sichtbar einen Weg mit
   Reihenfolge - das ist die Information, die hier zaehlt. */
.startweg {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px; margin: 36px 0 0; padding: 0; list-style: none;
}
.startweg > li { padding-top: 20px; border-top: 2px solid var(--linie); }
.startweg-nummer {
  display: block; margin-bottom: 10px; color: var(--gruen);
  font-size: .87rem; font-weight: 750; letter-spacing: .12em;
}
.startweg h3 { margin: 0 0 .4em; font-size: 1.15rem; }
.startweg p { margin: 0; color: var(--sek); }
.startweg-aktionen { justify-content: center; margin-top: 34px; }
@media (max-width: 900px) {
  .startweg { grid-template-columns: 1fr; gap: 24px; }
}
/* Im Kontrastmodus ist var(--gruen) auf heller Flaeche knapp - dieselbe
   Korrektur wie bei .abo-teasernummer weiter oben. */
@media (prefers-contrast: more) {
  .startweg-nummer { color: #356C4A; }
}
@media (max-width: 760px) {
  .start-faq { padding-top: 52px; padding-bottom: 58px; }
  .faq-kompakt details { padding: 0 18px; }
  .faq-kompakt details p { padding-right: 0; }
}

/* Ersatz für zwei style-Attribute im Markup.
   Die Sicherheitsrichtlinie der Website erlaubt nur Stile aus eigenen
   Dateien (style-src 'self'). Inline-Stile wurden vom Browser verworfen –
   der Abstand fehlte also, ohne dass es jemandem auffiel. */
.raster-abstand { margin-top: 28px; }
.app-kicker { margin-top: 36px; }