/* 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; }
/* Dieselbe Lesebreite wie .schmal, aber an der linken Kante der Seite statt
   in der Mitte. Fuer Seiten, die ueberwiegend in voller Breite gesetzt sind
   und nur einzelne Textabschnitte enthalten: Als zentriertes .breite.schmal
   ruecken die ein und der Blick verliert die durchgehende Kante - auf der
   Sicherheitsseite sprangen zwei Ueberschriften dadurch von 182 px auf
   357 px. Innerhalb eines .breite-Behaelters verwenden. */
.textspalte { 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 {
  /* --dunkel statt --gruen. Der Kommentar oben in dieser Datei sagt es
     selbst: Salbei und Gruen tragen als Textfarbe zu wenig Kontrast. Der
     Kicker hatte damit 2,55:1 bei 12,8 px - gefordert sind 4,5:1, und fuer
     Leserinnen jenseits der sechzig ist das keine Formalie. --dunkel
     (#50745C) kommt auf 4,9:1 und sieht in der Flaeche unveraendert aus. */
  text-transform: uppercase; letter-spacing: .1em; font-size: .8rem;
  font-weight: 800; color: var(--dunkel); 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;
}

/* auto-fit statt fester zwei Spalten - dieselbe Korrektur wie bei .raster-2.
   Die Karte "Fuer Pflegedienste" traegt .pflege-zukunft und ist derzeit
   ausgeblendet. Bei zwei festen Spalten blieb ihre Spalte trotzdem
   reserviert: Die verbleibende Karte klebte links, die rechte Haelfte war
   leer, und die zentrierte Ueberschrift darueber stand dadurch sichtbar
   schief. Mit auto-fit faellt die leere Spur weg, justify-content zentriert
   die eine Karte unter der Ueberschrift. */
.wegweiser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 528px));
  justify-content: center;
  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); }

/* Die Schutzliste der Sicherheitsseite.
   Ersetzt die frühere Tabelle. Links der Begriff, rechts die Erklaerung -
   dieselbe Scanbarkeit wie eine Tabelle, aber mit richtigem Textumbruch und
   ohne die 480-px-Mindestbreite, die auf dem Handy jeden Satz abgeschnitten
   hat. Unter 760 px stapeln Begriff und Erklaerung. */
.schutzliste { display: grid; margin-top: 30px; }
.schutzliste > article {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 8px 40px; padding: 26px 0; border-top: 1px solid var(--linie);
}
.schutzliste > article:last-child { border-bottom: 1px solid var(--linie); }
.schutzliste h3 { margin: 0; font-size: 1.1rem; }
.schutzliste p { margin: 0; color: var(--sek); max-width: 64ch; }
/* Der Fachbegriff steht bewusst leiser als die Erklaerung: Er soll
   nachpruefbar dastehen, aber nicht der erste Satz sein, den das Auge
   findet - sonst gewinnt er die Aufmerksamkeit zurueck, die ihm hier
   gerade genommen wurde. */
.schutz-fachlich { margin-top: .7em; font-size: .89rem; }
@media (max-width: 760px) {
  .schutzliste > article { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
}

/* Schaubild in der Schutzliste.
   Alle Farben kommen aus den Themenvariablen, damit die Zeichnung im
   Dunkelmodus nicht als weisser Block stehen bleibt - genau der Fehler, der
   auf der Abo-Seite die Preise unsichtbar gemacht hat. */
.schaubild { margin: 22px 0 0; }
.schaubild svg { display: block; width: 100%; height: auto; max-width: 640px; }
.schaubild figcaption {
  margin-top: 10px; color: var(--sek); font-size: .89rem;
}
.sb-kasten rect:first-child {
  fill: color-mix(in srgb, var(--grund-tief) 60%, transparent);
  stroke: var(--linie); stroke-width: 1.5;
}
.sb-geraet { fill: none; stroke: var(--dunkel); stroke-width: 2.5; }
.sb-punkt { fill: var(--dunkel); }
.sb-schloss, .sb-geraetlinie {
  fill: none; stroke: var(--dunkel); stroke-width: 2.5; stroke-linecap: round;
}
.sb-pfeil { fill: none; stroke: var(--gruen); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sb-nr {
  fill: var(--dunkel); font-size: 13px; font-weight: 800; text-anchor: middle;
  letter-spacing: .1em;
}
.sb-beschriftung { fill: var(--sek); font-size: 13px; text-anchor: middle; }

/* --- 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); }

/* Auf dem Handy stapeln statt seitwaerts schieben.
   Die Tabelle hat min-width: 480px und lag damit in ihrem eigenen
   Scrollbereich. Auf einem 375-px-Schirm war jeder Satz rechts
   abgeschnitten - fuer jede einzelne Zeile musste man quer wischen. Bei
   dieser Zielgruppe ist das keine Unbequemlichkeit, sondern ein Abbruch.
   Die Tabelle hat nur zwei Spalten (Begriff, Erklaerung); gestapelt liest
   sie sich wie eine Begriffsliste, und die Reihenfolge Begriff -> Erklaerung
   bleibt auch fuer eine Sprachausgabe richtig. */
@media (max-width: 640px) {
  table { min-width: 0; }
  /* Der Spaltenkopf wird gestapelt sinnlos ("Bereich" ueber jedem Begriff),
     bleibt aber fuer die Sprachausgabe erhalten. */
  thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  tbody tr { display: block; padding: 6px 0 16px; border-bottom: 1px solid var(--linie); }
  tbody tr:last-child { border-bottom: 0; }
  tbody th, tbody td { display: block; padding: 4px 0; border-bottom: 0; }
  tbody th { padding-top: 10px; }
}

/* --- 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;
  /* Gedeckelt statt volle Bildschirmhoehe. Wer im Menue auf "Abo & Preise"
     klickt, bekam eine ganze Bildschirmseite ohne eine einzige Zahl - die
     Preistabelle begann erst 762 px weiter unten. Mit dem Deckel schaut der
     naechste Abschnitt oben herein und zeigt, dass es weitergeht. */
  min-height: min(600px, calc(100vh - 138px));
  min-height: min(600px, 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 {
  /* 25ch waren fuer drei Saetze viel zu schmal: Der Absatz brach in fuenf
     Zeilenfragmente ("... sicher an einem / Ort. Sie entscheiden selbst,
     was / Sie speichern und mit wem Sie / es teilen."). Umbrueche mitten im
     Satzglied lesen sich stockend. 34ch bringt die Zeilen an die
     Satzgrenzen. */
  max-width: 34ch; 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;
}
/* Der ausdrueckliche Weg zu den Preisen. Die Seite heisst im Menue
   "Abo & Preise"; dann muss von der ersten Bildschirmseite aus auch ohne
   Scrollen erkennbar sein, wo die Preise stehen. */
.abo-zupreisen {
  margin: 18px 0 0; color: var(--dunkel); font-weight: 700;
  font-size: 1rem; text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--dunkel) 35%, transparent);
  padding-bottom: 2px;
}
.abo-zupreisen:hover { border-bottom-color: var(--dunkel); }
.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(--dunkel); 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(--dunkel);
  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;
}
/* Die Vorsorgepaket-Karte unter der Preistabelle.
   Quer statt hochkant: Sie ist kein dritter Plan, sondern ein Zusatz
   daneben - die Form sagt das, bevor man den Text liest. */
.vorsorge-karte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: 24px 40px; align-items: center;
  margin: 22px 0 0; padding: 28px 30px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: linear-gradient(145deg, var(--karte), color-mix(in srgb, var(--karte) 94%, var(--grund-tief)));
  box-shadow: var(--schatten);
}
.vorsorge-karte h3 { margin: 14px 0 .4em; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.vorsorge-karte p { margin: 0; color: var(--sek); max-width: 58ch; }
.vorsorge-karte .preis-tag { margin: 0; }
.vorsorge-preis { display: grid; gap: 14px; justify-items: start; }
.vorsorge-preis .preis { margin: 0; }
.vorsorge-preis .abo-teaser-cta { width: 100%; }
@media (max-width: 760px) {
  .vorsorge-karte { grid-template-columns: 1fr; padding: 24px 22px; }
}

.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; }

/* Dunkelmodus der Abo-Seite.
   Hier lag der schwerste Fehler der ganzen Website. Die Karten behielten im
   Dunkelmodus ihre cremefarbene Flaeche (--karte: #F8F3E9), waehrend --text
   auf #F4F0E8 umsprang. Fuer die Teaserkarten hatte jemand zwei Textfarben
   von Hand nachgezogen; fuer die Preiskarten nicht. Ergebnis: Auf der einen
   Seite, die Preise nennen soll, waren "0 €", "6,99 €" und saemtliche
   Leistungszeilen fast weiss auf Creme - also unlesbar. Wer sein Geraet auf
   Dunkel stehen hat, sah eine Preisseite ohne Preise.

   Eine Flaeche, die sich nicht mitdreht, waehrend die Schrift es tut, muss
   jede einzelne Textfarbe von Hand nachziehen - und genau das geht einmal
   gut und beim naechsten Abschnitt schief. Die Karten drehen jetzt mit, wie
   auf jeder anderen Seite dieser Website. Nebenbei ist eine leuchtend helle
   Flaeche auf dunklem Grund abends das Gegenteil der Ruhe, die diese Marke
   verspricht. */
@media (prefers-color-scheme: dark) {
  .abo-einstieg {
    --grund: #172820;
    --grund-tief: #1E3328;
    --karte: #24332B;
    --text: #F4F0E8;
    --sek: #C9D4CC;
    --dunkel: #A8D2AE;
    --gruen: #A8D2AE;
    --salbei: #2B4939;
    --linie: #46584D;
    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: #24332B; border-color: #46584D; }
  .abo-minimenue nav a { color: #F4F0E8; }
  .abo-minimenue nav a:hover,
  .abo-minimenue nav a[aria-current="page"] { background: #33473A; }
  .abo-teaserkarte {
    border-color: #3D5046;
    background: linear-gradient(145deg, #26362D 0%, #1F2E26 100%);
    box-shadow: none;
  }
  .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;
}
/* Die Bildspalte.
   Hier lag vorher eine getoente Flaeche mit Radius und Innenabstand, damit
   die rechte Haelfte eine sichtbare Kante bekommt. Das ging nach hinten los:
   Die Illustration ist freigestellt - rund 55 % ihrer Flaeche sind
   transparent - und rendert 470x271, die Flaeche daneben aber 518x629. Die
   Grafik schwamm also in einem sichtbaren, zu 57 % leeren Kasten. Im
   Dunkelmodus kam die helle Traegerflaeche des Bildes hinzu, und aus zwei
   ineinander liegenden Rechtecken in verschiedenen Farben wurde ein
   aufgeklebtes Foto.
   Eine 16:9-Grafik laesst sich neben einer hohen Textspalte nicht auf
   gleiche Hoehe bringen, ohne sie zur Haelfte zu beschneiden. Die Buehne
   bleibt deshalb reine Layouthilfe: Sie haelt die Illustration auf
   Texthoehe mittig, traegt aber keine eigene Farbe. */
.held-buehne { display: grid; place-items: center; }
/* align-self: center ist hier keine Kosmetik, sondern Pflicht.
   .held-raster steht auf align-items: stretch (damit die Bildspalte auf
   Texthoehe kommt). Auf der Startseite liegt dazwischen die Buehne, das
   Bild selbst wird also nicht gedehnt. Auf "Kennenlernen" und "Fuer
   Pflegedienste" haengt das <img> aber direkt im Raster - dort hat der
   Stretch es in die Hoehe gezogen: 760x427 wurden als 518x319 dargestellt,
   das Seitenverhaeltnis fiel von 1,78 auf 1,62 bzw. 1,48. Die Menschen auf
   den Bildern waren sichtbar gestaucht. Mit align-self: center behaelt das
   Bild seine eigene Hoehe, egal wie hoch die Zeile ist. */
.held-bild { width: 100%; height: auto; display: block; align-self: center; }

/* --- Produktfilm auf der Kennenlernseite --- */
.produktfilm-bereich { padding-top: 30px; }
.produktfilm-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem);
  gap: 28px 64px;
  align-items: end;
  margin-bottom: 26px;
}
.produktfilm-kopf h2 { margin-bottom: 0; }
.produktfilm-kopf > p { margin: 0; color: var(--sek); }
.produktfilm-rahmen {
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: clamp(18px, 3vw, 30px);
  background: #f7f4ed;
  box-shadow: 0 24px 70px rgba(44, 58, 51, .13);
}
.produktfilm {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #f7f4ed;
}
.produktfilm-hinweis {
  margin: 12px 4px 0;
  color: var(--sek);
  font-size: .9rem;
}
@media (prefers-color-scheme: dark) {
  .produktfilm-rahmen,
  .produktfilm { background: #1e2a24; }
}
@media (max-width: 760px) {
  .produktfilm-bereich { padding-top: 16px; }
  .produktfilm-kopf { grid-template-columns: 1fr; gap: 12px; }
  .produktfilm-rahmen { border-radius: 18px; }
}
.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.
   In den Bereichskarten bekommen sie im Dunkelmodus eine helle Trägerfläche,
   sonst verschwinden die Umrisse im Hintergrund. Dort stört das nicht: Die
   Fläche sitzt im Kopf einer Karte und liest sich als Kartenbild.
   Das Startbild ist bewusst ausgenommen. Es steht frei auf der Seite, und
   eine Trägerfläche hätte dort nichts zu umranden - sie wirkte wie ein
   aufgeklebtes Foto. Die Figuren der Zeichnung sind hell ausgefüllt und
   heben sich auch ohne sie deutlich vom dunklen Grund ab. */
@media (prefers-color-scheme: dark) {
  .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; }
/* Der Absendeknopf war als .knopf .primaer ausgezeichnet - zwei Klassen,
   die es in dieser Datei nie gegeben hat. Der Knopf war damit voellig
   ungestylt: 120x22 px in 13,3 px Systemschrift, ein nackter Browserknopf
   auf der einen Seite, auf der die Besucherin tatsaechlich etwas tun soll.
   Er benutzt jetzt dieselbe Form wie jeder andere Hauptknopf der Website.
   font: inherit ist noetig, weil Knoepfe die Seitenschrift nicht erben. */
.kontaktformular button { margin-top: 1.1rem; justify-self: start; font: inherit; cursor: pointer; }
.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(--dunkel);
  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; }
}
@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; }

/* Öffentliche Angebotsseiten: persönlich / Fachkraft / Einrichtung */
.gp-angebote{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,1.6fr);gap:18px;margin-top:32px;align-items:stretch}
.gp-angebot{min-width:0;display:flex;flex-direction:column;overflow:hidden}.gp-angebot .pfeil-link{margin-top:auto;padding-top:18px}.gp-angebot .karten-bild{max-height:190px;object-fit:cover}.gp-angebot-small .tag{margin-top:12px}.gp-angebot-small h3{font-size:1.2rem}
.gp-marketing-hero{padding-top:76px;padding-bottom:76px}.gp-marketing-hero h1{max-width:820px}.gp-marketing-hero .fuehrung{max-width:760px}.gp-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}.gp-feature-grid .karte{min-width:0}.gp-narrow{max-width:860px}.gp-narrow h2:not(:first-child){margin-top:42px}
@media(max-width:950px){.gp-angebote{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.gp-angebot-small{grid-column:1 / -1}.gp-feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.gp-angebote,.gp-feature-grid{grid-template-columns:1fr}.gp-angebot-small{grid-column:auto}.gp-marketing-hero{padding-top:44px;padding-bottom:44px}}

/* =====================================================================
   Berufliche GesundPass-Angebote | 2026-10
   Öffentliches Marketing, ausschließlich die Website. Keine Portal-UI.
   Optik: bestehende Creme-/Salbei-/Tannengrün-Palette, kein Fremddesign.
   ===================================================================== */
.gp-fk-landing .kopf-cta { white-space: nowrap; }
.gp-fk-hero { padding: clamp(50px, 7vw, 98px) 0 72px; overflow: hidden; }
.gp-fk-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.gp-fk-hero-copy { min-width: 0; }
.gp-fk-hero .kicker { margin-bottom: 26px; }
.gp-fk-hero h1 { max-width: 14ch; font-size: clamp(2.8rem, 5.15vw, 5rem); line-height: 1.06; letter-spacing: -.045em; margin: 0 0 25px; }
.gp-fk-hero h1 em { color: var(--dunkel); font-style: normal; }
.gp-fk-hero .fuehrung { max-width: 53ch; font-size: clamp(1.08rem, 1.6vw, 1.23rem); line-height: 1.67; margin-bottom: 0; }
.gp-fk-hero .aktionen { margin-top: 32px; }
.gp-fk-hero .aktionen .aktion { gap: 12px; }
.gp-fk-subline { margin: 27px 0 0; max-width: 60ch; font-size: .88rem; color: var(--sek); line-height: 1.75; }
.gp-fk-subline strong { color: var(--text); }
.gp-fk-subline span { padding: 0 6px; color: var(--dunkel); }
.gp-fk-hero-detail { position: relative; isolation: isolate; border-radius: 32px; padding: 26px; background: var(--karte); border: 1px solid var(--linie); box-shadow: 0 18px 60px rgba(30,56,39,.10); }
.gp-fk-hero-detail::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(circle at 96% 2%, color-mix(in srgb, var(--salbei) 38%, transparent), transparent 57%); pointer-events: none; }
.gp-fk-detail-head { display: flex; gap: 16px; align-items: center; margin-bottom: 26px; }
.gp-fk-detail-head > div { display: grid; gap: 4px; min-width: 0; }
.gp-fk-detail-head strong { font-size: 1.25rem; line-height: 1.25; }
.gp-fk-detail-mark { display: flex; align-items: center; justify-content: center; flex: none; width: 50px; height: 50px; border-radius: 16px; color: #FFF; background: #50745C; font-size: 2rem; font-weight: 700; line-height: 1; }
.gp-fk-detail-eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: .69rem; color: var(--dunkel); font-weight: 800; }
.gp-fk-mini-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 15px; border-top: 1px solid var(--linie); padding: 21px 0; }
.gp-fk-mini-row > div { display: grid; min-width: 0; }
.gp-fk-mini-row strong { color: var(--text); font-size: 1.04rem; line-height: 1.4; }
.gp-fk-mini-row span:not(.gp-fk-mini-num) { font-size: .89rem; color: var(--sek); }
.gp-fk-mini-num { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; background: var(--grund-tief); color: var(--dunkel); font-size: .78rem; font-weight: 800; }
.gp-fk-detail-note { font-size: .8rem; color: var(--sek); margin: 10px 0 0; }
.gp-fk-proof { padding: 29px 0; background: color-mix(in srgb, var(--salbei) 22%, var(--grund)); border-block: 1px solid var(--linie); }
.gp-fk-proof-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.gp-fk-proof-row p { margin: 0; padding-left: 20px; border-left: 3px solid var(--dunkel); line-height: 1.45; }
.gp-fk-proof-row strong, .gp-fk-proof-row span { display: block; }
.gp-fk-proof-row span { color: var(--sek); font-size: .9rem; }
.gp-fk-section-intro { max-width: 800px; margin-bottom: 38px; }
.gp-fk-section-intro h2 { font-size: clamp(2rem,3.7vw,3.2rem); line-height: 1.12; letter-spacing: -.03em; max-width: 21ch; margin: 14px 0 20px; }
.gp-fk-section-intro .fuehrung { max-width: 58ch; font-size: 1.1rem; }
.gp-fk-section-intro.mitte h2, .gp-fk-section-intro.mitte p { margin-left: auto; margin-right: auto; }
.gp-fk-section-intro.mitte h2 { max-width: 24ch; }
.gp-fk-section-intro.mitte { max-width: 940px; margin: 0 auto 38px; text-align: center; }
.gp-fk-scenes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.gp-fk-scene { min-width: 0; padding: 31px 27px 27px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); display: flex; flex-direction: column; box-shadow: var(--schatten); }
.gp-fk-scene-idx { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 850; color: var(--dunkel); margin-bottom: 28px; }
.gp-fk-scene h3 { font-size: clamp(1.18rem, 1.75vw, 1.55rem); line-height: 1.25; }
.gp-fk-scene p { color: var(--sek); flex: 1; margin-bottom: 34px; }
.gp-fk-scene-meta { border-top: 1px solid var(--linie); padding-top: 15px; font-size: .82rem; font-weight: 800; color: var(--dunkel); }
.gp-fk-tools-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.gp-fk-tool { min-width: 0; background: var(--karte); border-radius: 21px; border: 1px solid var(--linie); padding: 28px; min-height: 238px; display: flex; flex-direction: column; }
.gp-fk-tool-main { background: color-mix(in srgb, var(--salbei) 30%, var(--karte)); }
.gp-fk-tool-nr { display: inline-flex; font-size: .78rem; font-weight: 850; letter-spacing: .1em; color: var(--dunkel); margin-bottom: 30px; }
.gp-fk-tool h3 { font-size: 1.3rem; }
.gp-fk-tool p { margin: 0; font-size: .96rem; color: var(--sek); }
.gp-fk-tool-label { margin-top: auto; padding-top: 20px; font-size: .78rem; font-weight: 750; color: var(--dunkel); }
.gp-fk-tool-disclaimer { margin: 25px 0 0; font-size: .89rem; color: var(--sek); }
.gp-fk-split { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(32px,5vw,90px); align-items: center; }
.gp-fk-belong h2, .gp-org-value h2 { font-size: clamp(1.85rem,3.5vw,2.8rem); line-height: 1.16; max-width: 20ch; margin: 18px 0 25px; }
.gp-fk-belong p:not(.kicker), .gp-org-value p:not(.kicker) { color: var(--sek); }
.gp-fk-belong p strong, .gp-org-value p strong { color: var(--text); }
.gp-fk-belong-panel { padding: clamp(24px,3vw,42px); background: var(--karte); border: 1px solid var(--linie); border-radius: 28px; box-shadow: var(--schatten); }
.gp-fk-belong-panel .gp-fk-belong-top { margin: 0 0 25px; font-size: 1rem; font-weight: 850; color: var(--text); }
.gp-fk-belong-panel ol { margin: 0 0 25px; padding: 0; list-style: none; }
.gp-fk-belong-panel li { display: flex; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.gp-fk-belong-panel li span { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--salbei) 45%, var(--grund)); color: var(--dunkel); font-size: .84rem; font-weight: 800; }
.gp-fk-belong-panel li strong { font-size: .93rem; line-height: 1.4; }
.gp-fk-belong-panel > p:last-child { margin: 22px 0 0; color: var(--sek); font-size: .84rem; }
.gp-fk-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.gp-fk-price-card { background: var(--karte); border: 1px solid var(--linie); border-radius: 26px; padding: 32px; display: flex; flex-direction: column; min-width: 0; }
.gp-fk-price-card-featured { border: 2px solid var(--dunkel); }
.gp-fk-price-card .tag { align-self: flex-start; }
.gp-fk-price-card h3 { font-size: 1.48rem; margin: 20px 0 8px; }
.gp-fk-price-tag { margin: 16px 0 4px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.gp-fk-price-tag strong { font-size: clamp(2.6rem,5vw,3.6rem); line-height: 1; letter-spacing: -.055em; }
.gp-fk-price-tag span { color: var(--sek); font-size: .92rem; }
.gp-fk-price-card .gp-fk-trial { color: var(--dunkel); font-weight: 800; margin: 10px 0 12px; }
.gp-fk-price-card > p:not(.gp-fk-trial):not(.gp-fk-price-tag) { color: var(--sek); }
.gp-fk-price-card ul { list-style: none; padding: 0; margin: 16px 0 30px; display: grid; gap: 11px; }
.gp-fk-price-card li { position: relative; padding-left: 26px; font-size: .95rem; }
.gp-fk-price-card li::before { content: '✓'; position: absolute; left: 0; font-weight: 850; color: var(--dunkel); }
.gp-fk-price-card .aktion, .gp-fk-price-card .aktion-still { margin-top: auto; width: 100%; text-align: center; }
.gp-fk-price-card small { margin-top: 18px; font-size: .8rem; color: var(--sek); }
.gp-fk-faq .gp-narrow { max-width: 860px; }
.gp-fk-faq .faq-kompakt { margin-top: 28px; }
.gp-fk-end { padding-top: 76px; padding-bottom: 76px; }
.gp-fk-end-inner { padding: 42px; background: color-mix(in srgb, var(--salbei) 25%, var(--karte)); border-radius: 27px; border: 1px solid var(--linie); display: flex; gap: 25px; justify-content: space-between; align-items: center; }
.gp-fk-end h2 { font-size: clamp(1.7rem,3vw,2.7rem); margin: 12px 0 14px; }
.gp-fk-end p:not(.kicker) { color: var(--sek); margin-bottom: 0; }
.gp-fk-end .aktionen { flex: 0 1 290px; margin: 0; }
.gp-fk-end .aktionen a { width: 100%; text-align: center; }
/* Fachkraft-Teaser, bestehende 60-30-10-Aufteilung bleibt erhalten */
.gp-fk-startgrafik { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 7px; min-height: 126px; border-radius: var(--radius-klein); padding: 19px; margin-bottom: 12px; background: linear-gradient(145deg,color-mix(in srgb, var(--salbei) 46%,var(--grund)),color-mix(in srgb, var(--salbei) 18%,var(--karte))); }
.gp-fk-startgrafik span { display: inline-flex; padding: 8px 10px; border-radius: 10px; background: var(--karte); border: 1px solid var(--linie); color: var(--dunkel); font-weight: 750; font-size: .74rem; }
.gp-angebot .gp-angebot-preis { font-size: .82rem; border-top: 1px solid var(--linie); padding-top: 12px; margin-top: auto; line-height: 1.55; }
.gp-angebot-preis strong { color: var(--text); }
/* Fachkraftpreis auf bestehender Abo-Seite, klar getrennt vom Privatabo */
.gp-fk-abo-bridge { margin-top: 20px; padding-top: 68px; padding-bottom: 74px; border-top: 1px solid var(--linie); background: var(--grund); }
.gp-fk-abo-bridge .fuehrung { max-width: 70ch; }
.gp-fk-abo-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 30px; }
.gp-fk-abo-option { padding: 28px; border: 1px solid var(--linie); border-radius: 21px; background: var(--karte); }
.gp-fk-abo-option h3 { margin-bottom: 16px; }
.gp-fk-abo-amount { font-size: 2.35rem; font-weight: 850; letter-spacing: -.035em; margin: 0 0 13px; line-height: 1.1; }
.gp-fk-abo-amount small { font-size: .86rem; font-weight: 600; letter-spacing: 0; color: var(--sek); }
.gp-fk-abo-option > p:not(.gp-fk-abo-amount) { min-height: 72px; color: var(--sek); }
.gp-fk-abo-small { font-size: .84rem; color: var(--sek); margin-top: 20px; }
@media (max-width: 1000px) { .gp-fk-hero-grid { grid-template-columns: 1fr; } .gp-fk-hero h1 { max-width: 17ch; } .gp-fk-hero-detail { max-width: 650px; } .gp-fk-scenes { grid-template-columns: repeat(2,minmax(0,1fr)); } .gp-fk-scenes article:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .gp-fk-hero { padding-top: 42px; padding-bottom: 48px; } .gp-fk-hero h1 { font-size: clamp(2.55rem,9vw,3.7rem); } .gp-fk-hero-detail { padding: 22px; } .gp-fk-proof-row { grid-template-columns: 1fr; gap: 15px; } .gp-fk-scenes, .gp-fk-tools-grid, .gp-fk-price-grid, .gp-fk-abo-options, .gp-fk-split { grid-template-columns: 1fr; } .gp-fk-scenes article:last-child { grid-column: auto; } .gp-fk-tool { min-height: auto; } .gp-fk-section-intro h2 { font-size: clamp(1.9rem,8vw,2.55rem); } .gp-fk-end-inner { padding: 27px; display: block; } .gp-fk-end .aktionen { margin-top: 25px; } .gp-fk-abo-option > p:not(.gp-fk-abo-amount) { min-height: 0; } }
@media (max-width: 420px) { .gp-fk-hero .aktionen a { width: 100%; } .gp-fk-hero-detail { border-radius: 22px; } .gp-fk-price-card { padding: 24px; } .gp-fk-hero-detail .gp-fk-mini-row { grid-template-columns: 35px minmax(0,1fr) 18px; gap: 10px; } .gp-fk-mini-num { height: 35px; width: 35px; } }
@media (prefers-reduced-motion: reduce) { .gp-fk-landing * { scroll-behavior: auto; } }
/* Auf großen Bildschirmen bleibt die öffentliche Navigation einzeilig,
   ohne kleinere Displays mit zu vielen Links zu überladen. */
@media (min-width: 1060px) {
  .kopf-innen { max-width: 1440px; gap: 6px 12px; }
  .hauptnav ul { gap: 0; }
  .hauptnav a { padding-inline: 7px; font-size: .9rem; }
  .kopf-aktionen { gap: 2px; }
  .kopf-aktionen .anmelden { padding-inline: 10px; }
}


/* GesundPass – Korrektur Navigation 2026-10-18.
   Das mobile Menue muss oberhalb der Landingpage liegen (eigener
   Stapelkontext), optisch erkennbar und per Tastatur bedienbar bleiben. */
.kopf { position: relative; z-index: 100; isolation: isolate; }
.kopf-innen { position: relative; }
@media (max-width: 760px) {
  .kopf { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--grund); }
  .hauptnav ul {
    z-index: 101; background: var(--karte); color: var(--text);
    border: 1px solid var(--linie); border-top: 0;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 20px 35px rgba(16, 37, 26, .22);
    padding: 12px 14px 18px;
    max-height: min(75vh, 620px); overflow-y: auto;
    overflow-x: hidden; overscroll-behavior: contain;
  }
  .hauptnav a {
    display: flex; min-height: 47px; padding: 11px 16px;
    color: var(--text); background: transparent;
    border-radius: 12px;
  }
  .hauptnav a:hover, .hauptnav a:focus-visible { background: var(--grund-tief); }
  .hauptnav a[aria-current="page"] { background: var(--grund-tief); }
  .menue-schalter:checked + .menue-knopf { background: var(--grund-tief); }
  .kopf-aktionen { justify-content: flex-end; }
  .kopf-aktionen .anmelden { min-height: 42px; }
}
[hidden] { display: none !important; }
.registrierung-hinweis { margin-top: 1rem; color: var(--sek); font-size: .92rem; }