/* Angehörigenherz – Landingpage, Entwurf vom 29.10.2026 (Konzept v0.5, Abschnitte 4, 5, 8 und 15)
   Hell und leicht: Off-White als Grund, Petrol nur als Akzent (Titel, Symbole, CTA-Karte, Fusszeile),
   Apricot für Buttons und die Lohn-Zahl. Titel in Plus Jakarta Sans, Fliesstext in Fira Sans.
   Mobile zuerst. Umbrüche: 40em (640 px), 64em (1024 px), 73.75em (1180 px: volles Menü), 80em (1280 px).
   Bewegung nur über transform und opacity; bei «Bewegung reduzieren» ist sie aus (Abschnitt 21). */

/* ---------------------------------------------------------------
   1. Schriften – lokal, Teilmengen (Basis-Latein, Latin-1 und – ’ … ‹ ›),
      SIL Open Font License 1.1 (Lizenztexte in assets/fonts/OFL-*.txt)
   --------------------------------------------------------------- */
@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/fira-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/fira-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/fira-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Plus Jakarta Sans: variabel, Gewicht 700 bis 800 (Titel, Lohn-Zahl, Labels, Schrittnummern) */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-700-800.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------
   2. Tokens (Konzept v0.5, Abschnitt 4: Palette unverändert, neue Anwendung)
   --------------------------------------------------------------- */
:root {
  --petrol-950: #0A3540;       /* Fusszeile */
  --petrol-900: #0E3F4A;       /* Titel, CTA-Karte, Button-Schrift */
  --petrol-700: #1A5E6B;       /* Titelakzent, Labels, Symbole, Links */
  --petrol-100: #E2EEEF;       /* Farbfeld hinter Bildern, getönte Flächen */
  --salbei-300: #98B1B5;       /* nur Linie */
  --apricot-400: #F4A964;      /* Buttons, Lohn-Zahl (als Fläche) */
  --apricot-500: #E9954A;      /* Hover der Buttons */
  --amber-800: #8F4A0E;
  --offwhite: #FBF7F0;         /* Grund */
  --sand-100: #F2EADF;         /* Infozeile, Farbfeld hinter Bildern */
  --white: #FFFFFF;
  --ink-900: #23292B;
  --ink-600: #4F585B;
  --line-500: #7A8386;
  --linie-hell: #DCD3C6;       /* dünne Trennlinien */
  --error-700: #B42318;

  /* nur für die Entwurfs-Markierungen, nicht Teil der Palette */
  --entwurf-gelb: #FFF1B8;
  --entwurf-rand: #B98900;

  --schrift-text: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Plus Jakarta Sans", "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fliesstext: 1.125rem;      /* 18 px */
  --hilfstext: 1.125rem;       /* 18 px: Hinweise, Hilfetexte, Fehler */
  --kleintext: 1rem;           /* 16 px */
  --labeltext: 0.8125rem;      /* 13 px: Versal-Labels (Vorgabe Hesq 29.10.2026) */
  --h1: 2.125rem;              /* 34 px */
  --h2: 1.75rem;               /* 28 px */
  --h3: 1.25rem;               /* 20 px */
  --zeilenlaenge: 54ch;
  --breite-inhalt: 70rem;      /* 1120 px */
  --rand: 1.25rem;
  --abstand: 2rem;             /* je Abschnitt oben und unten: zwei Abschnitte stehen mobil 64 px auseinander */
  --kopf-hoehe: 4rem;          /* feste Kopfzeile mobil 64 px */
  --radius: 0.875rem;          /* Felder, Auswahlflächen */
  --radius-karte: 1.5rem;      /* 24 px */
  --radius-bild: 1.75rem;      /* 28 px, alle Ecken gleich */
  --fokus-breite: 3px;

  /* weiche, leicht petrolfarbene Schatten */
  --schatten-1: 0 1px 2px rgb(14 63 74 / 0.05), 0 8px 24px rgb(14 63 74 / 0.06);
  --schatten-2: 0 2px 6px rgb(14 63 74 / 0.06), 0 18px 44px rgb(14 63 74 / 0.10);
  --schatten-karte: 0 4px 12px rgb(14 63 74 / 0.10), 0 24px 56px rgb(14 63 74 / 0.18);

  /* Bewegung: starkes ease-out für UI */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dauer-kurz: 200ms;
  --dauer-einblenden: 450ms;
}

@media (min-width: 40em) {
  :root {
    --rand: 2rem;
    --h1: 3rem;                /* 48 px */
    --h2: 2.25rem;             /* 36 px */
    --abstand: 2.5rem;         /* 80 px zwischen zwei Abschnitten */
  }
}

@media (min-width: 64em) {
  :root {
    --fliesstext: 1.25rem;     /* 20 px */
    --h1: clamp(2.75rem, 1.2rem + 2.8vw, 3.5rem);   /* 48–56 px */
    --h2: clamp(2.25rem, 1.5rem + 1.2vw, 2.5rem);   /* 36–40 px */
    --h3: 1.375rem;            /* 22 px */
    --abstand: 3rem;           /* 96 px zwischen zwei Abschnitten (Vorgabe Hesq: höchstens 96 px Leerraum) */
    --kopf-hoehe: 5rem;        /* 80 px */
  }
}

/* ---------------------------------------------------------------
   3. Basis
   --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Sprungziele landen unter der festen Kopfzeile, nicht dahinter */
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--ink-900);
  font-family: var(--schrift-text);
  font-size: var(--fliesstext);
  font-size-adjust: from-font;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* Platz am Seitenende für Einwilligungs-Hinweis und feste Leiste */
body.hat-banner .fuss {
  padding-bottom: calc(2rem + var(--banner-hoehe, 11rem));
}

body.hat-leiste .fuss {
  padding-bottom: calc(2rem + 5rem);
}

/* Tastaturfokus nicht hinter Hinweis, Leiste oder Kopfzeile verstecken (WCAG 2.4.11) */
html:has(body.hat-banner) {
  scroll-padding-bottom: calc(var(--banner-hoehe, 11rem) + 1rem);
}

html:has(body.hat-leiste) {
  scroll-padding-bottom: 5.5rem;
}

/* Offenes Vollbild-Menü: Seite dahinter scrollt nicht mit */
html.menue-offen {
  overflow: hidden;
}

h1,
h2,
h3 {
  font-family: var(--schrift-titel);
  color: var(--petrol-900);
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  margin: 0 0 0.5em;
  color: var(--ink-900);
  font-size: var(--h1);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

h2 {
  margin: 0 0 0.5em;
  font-size: var(--h2);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Plus Jakarta Sans setzt den Punkt weit ab; bei enger Laufweite wirkt er losgelöst. Ausgleich in Titeln und Zahlen. */
.punkt {
  margin-left: -0.06em;
}

.lohn__zahl .punkt {
  margin-inline: -0.05em;
}

h3 {
  margin: 0 0 0.35em;
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Titel, die Ziel eines Sprungs sind (tabindex="-1"), zeigen keinen Fokusrahmen bei Mausklick */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

p,
li,
summary,
label,
legend {
  max-width: var(--zeilenlaenge);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--petrol-700);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--petrol-900);
}

/* Telefonnummern nie mitten in der Nummer umbrechen */
a[href^="tel:"] {
  white-space: nowrap;
}

/* Telefon-Links im Fliesstext und in Fehlermeldungen: Klickfläche mindestens 44 px, ohne die Zeile zu erhöhen */
p:not(.hero__telefon):not(.menue__telefon) > a[href^="tel:"],
.feld__fehler a[href^="tel:"],
.textseite li > a[href^="tel:"] {
  position: relative;
}

p:not(.hero__telefon):not(.menue__telefon) > a[href^="tel:"]::before,
.feld__fehler a[href^="tel:"]::before,
.textseite li > a[href^="tel:"]::before {
  content: "";
  position: absolute;
  inset: -0.75rem 0;
}

/* Links im Satz («Datenschutzerklärung», «Gut zu wissen»): ebenfalls mindestens 44 px */
.feld--einwilligung label a,
.frage__antwort p > a,
.einwilligung p a,
.mehr a {
  position: relative;
}

.feld--einwilligung label a::before,
.frage__antwort p > a::before,
.mehr a::before {
  content: "";
  position: absolute;
  inset: -0.75rem 0;
}

/* Im Einwilligungs-Hinweis nur nach oben vergrössert: Die Knöpfe folgen mit 4 px Abstand (Abschnitt 19).
   Auf Desktop stehen die Knöpfe daneben. */
.einwilligung p a::before {
  content: "";
  position: absolute;
  inset: -0.625rem 0 0;
}

@media (min-width: 64em) {
  .einwilligung p a::before {
    inset: -1rem 0 -0.5rem;
  }
}

:focus-visible {
  outline: var(--fokus-breite) solid var(--petrol-700);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

.visuell-versteckt {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprunglink {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--white);
  color: var(--petrol-900);
  font-weight: 600;
  border: 2px solid var(--petrol-900);
  border-radius: 999px;
}

.sprunglink:focus {
  top: 1rem;
}

.huelle {
  width: 100%;
  max-width: calc(var(--breite-inhalt) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Wörter wie «E-Mail» in schmalen Spalten nicht am Bindestrich trennen */
.kein-umbruch {
  white-space: nowrap;
}

.js .nur-ohne-js {
  display: none;
}

/* Gegenstück: nur mit JavaScript sinnvoll (Regler des Lohnrechners, Hinweis auf die Rechnerwerte im Formular) */
html:not(.js) .nur-mit-js {
  display: none;
}

.symbol {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

/* Versal-Label über jedem Abschnittstitel, mit kurzem Strich davor (Vorgabe Hesq 29.10.2026).
   13 px ist die einzige Schrift unter 16 px neben dem Einwilligungs-Hinweis (Konzept v0.5, Abschnitt 5). */
.label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: none;
  margin: 0 0 1rem;
  color: var(--petrol-700);
  font-family: var(--schrift-titel);
  font-size: var(--labeltext);
  font-weight: 700;
  font-feature-settings: "case";
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.label::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

/* ---------------------------------------------------------------
   4. Buttons: Pillenform
   --------------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.5rem;          /* 56 px */
  padding: 0.75rem 1.75rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--schrift-text);
  font-size: 1.1875rem;        /* 19 px */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dauer-kurz) ease,
    border-color var(--dauer-kurz) ease,
    color var(--dauer-kurz) ease,
    box-shadow var(--dauer-kurz) ease,
    transform 160ms var(--ease-out);
}

.knopf:active {
  transform: scale(0.98);
}

@media (min-width: 64em) {
  .knopf {
    font-size: 1.25rem;        /* 20 px */
  }
}

@media (max-width: 39.99em) {
  .knopf {
    width: 100%;
  }
}

/* Hauptbutton: Apricot, Schrift petrol-900 (5.85:1). Rahmen petrol-900, weil sich Apricot vom hellen Grund
   kaum abhebt (1.84:1, Konzept 4, Regel 2). */
.knopf--haupt {
  background: var(--apricot-400);
  color: var(--petrol-900);
  border-color: var(--petrol-900);
}

.knopf--haupt:hover {
  background: var(--apricot-500);
  color: var(--petrol-900);
  box-shadow: 0 8px 22px rgb(233 149 74 / 0.35);
}

/* Auf Petrol (CTA-Karte, Fusszeile) braucht der Hauptbutton keinen dunklen Rahmen */
.auf-petrol .knopf--haupt {
  border-color: var(--apricot-400);
}

.auf-petrol .knopf--haupt:hover {
  border-color: var(--apricot-500);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}

/* Kleiner Hauptbutton in der Kopfzeile: 44 px hoch, 16 px Schrift */
.knopf--klein {
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
}

/* Zweitrangiger Button: Rahmen-Pill, petrol-900 auf Weiss (11.48:1). Seit der Gestaltungsprüfung keine
   Petrol-Fläche mehr: Petrol ist nur Akzent, und «Anrufen» soll neben «Anfragen» nicht gleich stark wirken. */
.knopf--zweit {
  background: var(--white);
  color: var(--petrol-900);
  border-color: var(--petrol-900);
}

.knopf--zweit:hover {
  background: var(--petrol-100);
  border-color: var(--petrol-900);
  color: var(--petrol-900);
}

/* Gleichwertige Buttons im Einwilligungs-Hinweis */
.knopf--rahmen {
  background: var(--white);
  color: var(--petrol-900);
  border-color: var(--petrol-900);
}

.knopf--rahmen:hover {
  background: var(--petrol-100);
  color: var(--petrol-900);
}

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

/* ---------------------------------------------------------------
   5. Infozeile und feste Kopfzeile mit Menü
   --------------------------------------------------------------- */
.infozeile {
  background: var(--sand-100);
  color: var(--ink-900);
  font-size: var(--kleintext);
  line-height: 1.4;
}

.infozeile__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
  min-height: 2.5rem;
  padding-block: 0.25rem;
}

.infozeile__telefon,
.infozeile__antwort {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.infozeile__telefon {
  position: relative;
  color: var(--petrol-900);
  font-weight: 600;
  text-decoration: none;
}

/* Klickfläche 44 px, ohne die schmale Zeile zu erhöhen */
.infozeile__telefon::before {
  content: "";
  position: absolute;
  inset: -0.625rem -0.25rem;
}

.infozeile__telefon:hover {
  text-decoration: underline;
}

.infozeile .symbol {
  color: var(--petrol-700);
}

.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--white);
  border-bottom: 1px solid var(--linie-hell);
  transition: box-shadow var(--dauer-kurz) ease;
}

/* Schatten erst, wenn die Seite unter der Kopfzeile durchläuft (seite.js) */
.kopf.ist-gescrollt {
  box-shadow: 0 6px 20px rgb(14 63 74 / 0.08);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--kopf-hoehe);
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-right: auto;
  border-radius: 0.5rem;
}

.logo img {
  display: block;
  width: auto;
  height: 2.5rem;              /* 40 px */
}

.hauptnav,
.kopf .sprachen,
.kopf__aktion {
  display: none;
}

.hauptnav__liste {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hauptnav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink-900);
  font-size: 1.0625rem;        /* 17 px */
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Unterstrich wächst von links: beim Überfahren und beim aktiven Abschnitt */
.hauptnav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45rem;
  height: 2px;
  border-radius: 1px;
  background: var(--petrol-700);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dauer-kurz) var(--ease-out);
}

/* «true»: Abschnitt auf der Leselinie (seite.js); «page»: die aktuelle Unterseite (Lohnrechner) */
.hauptnav a:is([aria-current="true"], [aria-current="page"]) {
  color: var(--petrol-700);
}

.hauptnav a:is([aria-current="true"], [aria-current="page"])::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .hauptnav a:hover::after {
    transform: scaleX(1);
  }
}

/* Sprachwahl: nur DE aktiv, FR und IT folgen */
.sprachen {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--schrift-titel);
  font-size: var(--kleintext);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sprachen li {
  max-width: none;
}

.sprachen__aktiv,
.sprachen__folgt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2.75rem;
}

.sprachen__aktiv {
  color: var(--petrol-900);
  text-decoration: underline;
  text-decoration-color: var(--petrol-700);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Ausgegraut (inaktiv, nicht bedienbar); title «folgt» */
.sprachen__folgt {
  color: var(--line-500);
  cursor: not-allowed;
}

.menueknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--petrol-900);
  cursor: pointer;
  transition: background-color var(--dauer-kurz) ease;
}

.menueknopf svg {
  width: 1.75rem;
  height: 1.75rem;
}

.menueknopf:hover {
  background: var(--petrol-100);
}

@media (min-width: 40em) {
  .kopf__aktion {
    display: inline-flex;
    width: auto;
  }
}

@media (min-width: 64em) {
  .logo img {
    height: 3rem;              /* 48 px */
  }
}

/* Volles Menü ab 1180 px; darunter der Menüknopf */
@media (min-width: 73.75em) {
  .hauptnav {
    display: block;
  }

  .kopf .sprachen {
    display: flex;
    padding-left: 1rem;
    border-left: 1px solid var(--linie-hell);
  }

  .kopf__innen {
    gap: 1.75rem;
  }

  .menueknopf:not(.menueknopf--zu) {
    display: none;
  }
}

/* Vollbild-Menü (<dialog>) */
.menue {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--offwhite);
  color: var(--ink-900);
}

.menue::backdrop {
  background: rgb(14 63 74 / 0.35);
}

@media (prefers-reduced-motion: no-preference) {
  .menue[open] {
    animation: menue-ein 220ms var(--ease-out);
  }
}

@keyframes menue-ein {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.menue__innen {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100%;
  max-width: calc(36rem + 2 * var(--rand));
  margin-inline: auto;
  padding: 0 var(--rand) 2rem;
}

.menue__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--kopf-hoehe);
  border-bottom: 1px solid var(--linie-hell);
}

.menue__titel {
  margin: 0;
  color: var(--petrol-900);
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.menue__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menue__liste li {
  max-width: none;
}

.menue__liste a {
  display: flex;
  align-items: center;
  min-height: 3.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linie-hell);
  color: var(--petrol-900);
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-decoration: none;
}

/* Niedrige Bildschirme (z. B. 390 × 664): sechs Menüpunkte samt Sprachwahl ohne Scrollen, Zeilen 50 statt 60 px */
@media (max-height: 45em) {
  .menue__liste a {
    min-height: 3.125rem;
  }
}

.menue__liste a:is([aria-current="true"], [aria-current="page"]) {
  color: var(--petrol-700);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.menue__aktion {
  width: 100%;
}

.menue__telefon {
  margin: 0;
  color: var(--ink-900);
}

.menue__telefon a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
}

.sprachen--menue {
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--linie-hell);
}

.sprachen--menue .sprachen__folgt .visuell-versteckt {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0 0 0 0.25em;
  overflow: visible;
  clip: auto;
  clip-path: none;
  font-family: var(--schrift-text);
  font-weight: 400;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------
   6. Bilder: weiche Ecken (alle gleich) und leicht versetztes Farbfeld dahinter
   --------------------------------------------------------------- */
.bild {
  margin: 0;
}

.bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-bild);
  object-fit: cover;
}

.bild--feld {
  position: relative;
  isolation: isolate;
  margin: 0 0.75rem 0.75rem 0;  /* Platz für das versetzte Feld */
}

.bild--feld::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-bild);
  background: var(--petrol-100);
  transform: translate(0.75rem, 0.75rem);
}

.bild--feld-sand::before {
  background: var(--petrol-100);   /* seit der Gestaltungsprüfung wie die übrigen: Sand war auf Off-White kaum sichtbar */
}

@media (min-width: 64em) {
  .bild--feld {
    margin: 0 1.25rem 1.25rem 0;
  }

  .bild--feld::before {
    transform: translate(1.25rem, 1.25rem);
  }
}

/* ---------------------------------------------------------------
   7. Hero (hell): Text, Bild mit Lohn-Karte, Kurzformular
   --------------------------------------------------------------- */
.hero {
  padding-block: 1.75rem var(--abstand);
}

/* Mobil: Titel, Einleitung, Bild mit Lohn-Karte, Kurzformular, Telefon (Review Hesq 28.10.2026) */
.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "text"
    "bild"
    "formular"
    "telefon";
}

.hero__text {
  grid-area: text;
}

.hero__titel {
  margin: 0 0 1rem;
  /* Bezug für die Gruppe «einen Lohn erhalten.» (Container-Abfrage in em, siehe unten) */
  container-type: inline-size;
}

.akzent {
  color: var(--petrol-700);    /* 6.88:1 auf Off-White */
}

/* «einen Lohn erhalten.» nicht mitten im Akzent trennen, sobald die Gruppe in eine Zeile passt
   (in Plus Jakarta Sans 8.96 em breit; «em» bezieht sich auf die Titelschrift, deshalb auch bei grosser
   Grundschrift ohne Überlauf) */
@container (min-width: 9.2em) {
  .akzent-gruppe {
    white-space: nowrap;
  }
}

.hero__einleitung {
  max-width: 34em;
  margin: 0 0 2rem;
}

.hero__aktionen {
  display: none;               /* Mobil folgt das Kurzformular direkt auf das Bild */
}

.hero__telefon {
  grid-area: telefon;
  margin: 1.25rem 0 0;
  color: var(--ink-900);
}

.hero__telefon a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
}

.hero__bild {
  grid-area: bild;
  position: relative;
  display: flex;
  flex-direction: column;
}

.hero__bild .bild img {
  aspect-ratio: 5 / 4;
  object-position: center 42%;
}

/* Lohn-Karte: «bis zu CHF 37.90» gross, darunter «brutto pro anerkannter Pflegestunde*» (nicht verhandelbar).
   Apricot als Fläche, Zahl in petrol-900 (5.85:1): Apricot als Schrift auf hellem Grund hätte nur 1.84:1. */
.lohn-karte {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  width: min(22rem, calc(100% - 2rem));
  margin: -3.25rem 0 0 0.75rem;
  padding: 1rem 1.25rem 1.1rem;
  border-radius: var(--radius-karte);
  background: var(--apricot-400);
  color: var(--petrol-900);
  box-shadow: var(--schatten-karte);
  container-type: inline-size;   /* Bezug für die Grösse der Lohn-Zahl (cqi) */
}

.lohn {
  margin: 0;
  color: var(--petrol-900);
  font-family: var(--schrift-titel);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: lining-nums proportional-nums;
}

/* «bis zu CHF 37.90» immer auf einer Zeile (R1): rund 6.2 × die Schriftgrösse breit, deshalb höchstens 15 % der
   Kartenbreite. Ältere Browser ohne cqi nehmen die erste Angabe. */
.lohn__zahl {
  display: block;
  font-size: 2.75rem;          /* 44 px */
  font-size: min(2.75rem, 15cqi);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.lohn__bis {
  font-size: 0.5em;            /* halb so gross, gleiche Farbe, gleiche Zeile (Konzept 5) */
  letter-spacing: 0;
}

.lohn__zeile {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--schrift-text);
  font-size: 1.125rem;         /* 18 px */
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

/* Sternchen zur Unterseite «Gut zu wissen»: Klickfläche 44 × 32 px um das Zeichen */
.stern {
  position: relative;
  padding: 0 0.15em 0 0;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.stern::before {
  content: "";
  position: absolute;
  inset: -0.625rem -0.5rem;
}

.stern:hover {
  color: inherit;
  text-decoration: underline;
}

.hero__formular {
  grid-area: formular;
  position: relative;
  z-index: 2;
  margin: 2rem 0 0;
}

@media (min-width: 40em) {
  .lohn-karte {
    width: min(24rem, calc(100% - 3rem));
    margin-top: -4rem;
    margin-left: 1.25rem;
  }

  .lohn__zahl {
    font-size: 3.25rem;        /* 52 px */
    font-size: min(3.25rem, 15cqi);
  }

  .hero__bild .bild img {
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 64em) {
  .hero {
    padding-block: 3.5rem var(--abstand);
  }

  .hero__raster {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas:
      "text bild"
      "formular formular";
    column-gap: 4.5rem;
    align-items: center;
  }

  .hero__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
  }

  .hero__aktionen .hero__telefon {
    margin: 0;
  }

  .hero__telefon--mobil {
    display: none;
  }

  .hero__bild .bild img {
    aspect-ratio: 1 / 1;
    max-height: min(32rem, 64vh);
    object-position: center 40%;
  }

  /* Lohn-Karte überlappt das Bild unten links und ragt in die Textspalte */
  .lohn-karte {
    position: absolute;
    left: -2.5rem;
    bottom: 2.5rem;
    width: 25rem;
    width: min(25rem, calc(100% + 2.5rem));   /* bei grosser Schrift nie über die Bildkante hinaus */
    margin: 0;
    padding: 1.25rem 1.5rem 1.4rem;
  }

  .lohn__zahl {
    font-size: 3.5rem;         /* 56 px */
    font-size: min(3.5rem, 15cqi);
  }

  .lohn__zeile {
    font-size: 1.25rem;
  }

  .hero__formular {
    margin-top: 4.5rem;
  }
}

/* ---------------------------------------------------------------
   8. Formular-Karten und Kontaktwunsch
   --------------------------------------------------------------- */
.karte {
  padding: 1.5rem;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius-karte);
  background: var(--white);
  color: var(--ink-900);
  box-shadow: var(--schatten-2);
}

.formular-karte__titel {
  margin-bottom: 0.3em;
  font-size: 1.75rem;          /* 28 px */
}

.formular-abschnitt .formular-karte__titel {
  font-size: var(--h2);
}

.formular-karte__titel:focus {
  outline: none;
}

.formular-karte__titel:focus-visible {
  outline: var(--fokus-breite) solid var(--petrol-700);
}

.formular-karte__einleitung {
  color: var(--ink-600);
}

@media (min-width: 40em) {
  .karte {
    padding: 2rem;
  }
}

@media (min-width: 64em) {
  /* Kurzformular auf Desktop (Startseite und Lohnrechner): Titel links, Felder rechts */
  .hero__formular,
  .rechner__formular {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    column-gap: 4rem;
    padding: 3rem 3.5rem;
  }

  :is(.hero__formular, .rechner__formular) .formular-karte__titel {
    font-size: 2.25rem;
  }

  /* Titel links oben, ohne getönte Fläche über die ganze Höhe (Gestaltungsprüfung: Fläche war zu zwei Dritteln leer) */
  :is(.hero__formular, .rechner__formular) .formular-karte__kopf {
    align-self: start;
  }

  .formular-karte__einleitung {
    margin-bottom: 0;
    color: var(--ink-900);
  }
}

/* Kontaktwunsch: zwei grosse Auswahlflächen statt Dropdown */
.wahl {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
  gap: 0.75rem;
}

.wahl__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.5rem;
  max-width: none;
  padding: 0.75rem 1rem;
  border: 2px solid var(--line-500);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink-900);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color var(--dauer-kurz) ease, background-color var(--dauer-kurz) ease, box-shadow var(--dauer-kurz) ease;
}

.wahl__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.wahl__symbol {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--petrol-700);
}

.wahl__option > span:not(.wahl__marke) {
  min-width: 0;
  overflow-wrap: anywhere;
}

@container (max-width: 11rem) {
  .wahl__symbol {
    display: none;
  }
}

.wahl__marke {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-left: auto;
  border: 2px solid var(--line-500);
  border-radius: 50%;
  background: var(--white);
}

.wahl__option:hover {
  border-color: var(--petrol-700);
}

.wahl__option:has(input:checked) {
  border-color: var(--petrol-700);
  background: var(--petrol-100);
  box-shadow: inset 0 0 0 1px var(--petrol-700);
}

.wahl__option:has(input:checked) .wahl__marke {
  border-color: var(--petrol-700);
  background: var(--petrol-700) radial-gradient(circle, var(--white) 0 32%, transparent 34%);
}

.wahl__option:has(input:focus-visible) {
  outline: var(--fokus-breite) solid var(--petrol-700);
  outline-offset: 2px;
}

.wahl__option:has(input[aria-invalid="true"]) {
  border-color: var(--error-700);
}

/* Kurzformular: nur das Kontaktfeld zur gewählten Antwortart (ohne JavaScript beide, mit Hinweis) */
.js .formular[data-formular="kurz"]:has(input[name="kontaktweg"][value="telefon"]:checked) [data-kontaktfeld="email"],
.js .formular[data-formular="kurz"]:has(input[name="kontaktweg"][value="email"]:checked) [data-kontaktfeld="telefon"] {
  display: none;
}

.freiwillig {
  display: none;
}

.js .formular:has(input[name="kontaktweg"][value="telefon"]:checked) [data-kontaktfeld="email"] .freiwillig,
.js .formular:has(input[name="kontaktweg"][value="email"]:checked) [data-kontaktfeld="telefon"] .freiwillig {
  display: inline;
}

/* Browser ohne :has(): das echte Optionsfeld zeigt Auswahl und Fokus */
@supports not selector(:has(*)) {
  .wahl__option input {
    position: static;
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    opacity: 1;
    accent-color: var(--petrol-700);
  }

  .wahl__marke {
    display: none;
  }

  .js .formular[data-kontaktweg="telefon"] [data-kontaktfeld="email"] .freiwillig,
  .js .formular[data-kontaktweg="email"] [data-kontaktfeld="telefon"] .freiwillig {
    display: inline;
  }
}

/* ---------------------------------------------------------------
   9. Vertrauenszeile mit Häkchen
   --------------------------------------------------------------- */
.vertrauen {
  border-block: 1px solid var(--linie-hell);
}

.vertrauen__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2rem;
  margin-block: 0;
  padding-block: 1.5rem;
  list-style: none;
}

.vertrauen__liste > li {
  max-width: none;
}

.vertrauen__punkt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-900);
  font-weight: 400;            /* leise Zeile, kein Inhaltsblock (Gestaltungsprüfung) */
  line-height: 1.45;
}

.vertrauen__punkt > span {
  min-width: 0;
}

.vertrauen__symbol {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--petrol-700);
}

/* Nummer bleibt beisammen und rutscht als Ganzes auf die nächste Zeile; nur wenn sie allein nicht mehr passt
   (200 % Schrift auf 320 px), bricht sie an den Leerzeichen */
.vertrauen__punkt a {
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: var(--petrol-900);
  white-space: normal;
}

.vertrauen__punkt a::after {
  content: "";
  position: absolute;
  inset: -0.75rem 0;
}

.vertrauen__partner {
  flex-wrap: wrap;
}

/* Logo von Spitex Glatt (nur auf hellem Grund: auf Petrol ist das blaue «Glatt» nicht lesbar) */
.partnerlogo {
  display: block;
  width: auto;
  height: 2rem;                /* 32 px in der Vertrauenszeile */
}

@media (min-width: 40em) {
  .vertrauen__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80em) {
  .vertrauen__liste {
    grid-template-columns: minmax(min-content, 1.2fr) minmax(min-content, 1fr) minmax(0, 2fr) minmax(min-content, 1.3fr);
    padding-block: 1.75rem;
  }

  .vertrauen__liste > li + li {
    padding-left: 2rem;
    border-left: 1px solid var(--linie-hell);
  }
}

/* ---------------------------------------------------------------
   10. Abschnitte: Off-White, getrennt durch Abstand und Linien; nur «So funktioniert es» auf Sand
   --------------------------------------------------------------- */
.abschnitt {
  padding-block: var(--abstand);
}

/* Eine Sand-Fläche über die volle Breite gibt dem Ablauf einen eigenen Takt (Feinschliff 29.10.2026). Alle übrigen
   Abschnitte bleiben Off-White, Weiss bleibt den Karten (Formulare, Zitat) vorbehalten. */
.abschnitt--sand {
  background: var(--sand-100);
}

.abschnitt__kopf {
  max-width: 46rem;
  margin-bottom: 2.5rem;
}

.abschnitt__kopf h2 {
  margin-bottom: 0;
}

.abschnitt__einleitung {
  margin: 1.25rem 0 0;
}

.abschnitt__aktion {
  margin: 3rem 0 0;
}

@media (min-width: 64em) {
  .abschnitt__kopf {
    margin-bottom: 3.5rem;
  }
}

/* Zweispaltig mit Bild (Pflege, Partner) */
.zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}

@media (min-width: 64em) {
  .zweispaltig {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 5.5rem;
  }

  .zweispaltig--bild-links {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .zweispaltig--bild-links .zweispaltig__bild {
    order: -1;
  }
}

/* ---------------------------------------------------------------
   11. Lohn: drei Argumente mit dünnen Linien, daneben Bild M4 (die grosse Zahl steht nur noch im Hero)
   --------------------------------------------------------------- */
.lohn-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.argumente {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie-hell);
  list-style: none;
}

.argument {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 1.25rem;
  max-width: none;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linie-hell);
}

.argument__symbol {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--petrol-700);
}

.argument p {
  margin: 0;
}

/* Link «Lohn berechnen» unter dem Lohn-Argument (zum Lohnrechner, Konzept v0.5, 3.5) */
.argument .mehr {
  margin-top: 0.5rem;
}

@media (min-width: 64em) {
  .lohn-raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 5.5rem;
  }

  /* Bild links, Argumente rechts; im Code steht das Bild nach der Liste (mobil folgt es den Argumenten) */
  .lohn__bild {
    grid-column: 1;
    grid-row: 1;
  }

  .lohn__bild img {
    aspect-ratio: 1 / 1;
    object-position: 50% 50%;
  }
}

/* ---------------------------------------------------------------
   12. So funktioniert es: 01 / 02 / 03 mit dünnen Linien
   --------------------------------------------------------------- */
.schritte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schritt {
  position: relative;
  max-width: none;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie-hell);
}

/* Kurzer Petrol-Strich auf der Linie, wird beim Erscheinen gezeichnet (Abschnitt 21) */
.schritt::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.5rem;
  height: 3px;
  background: var(--petrol-700);
  transform-origin: left center;
}

.schritt__nummer {
  display: block;
  margin-bottom: 1rem;
  color: var(--petrol-700);
  font-family: var(--schrift-titel);
  font-size: 2.75rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.schritt p {
  max-width: 40ch;
  margin: 0;
}

@media (min-width: 64em) {
  .schritte {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }

  .schritt__nummer {
    font-size: 3.5rem;
  }
}

/* ---------------------------------------------------------------
   13. Für wen: Bild mit Zitatkarte, Gruppen als Liste mit dünnen Linien
   --------------------------------------------------------------- */
.fuer-wen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.fuer-wen__bild {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
}

.fuer-wen__bild .bild img {
  aspect-ratio: 3 / 2;
  object-position: center 35%;
}

/* Zitatkarte «Verwandtschaft ist keine Voraussetzung.» über dem unteren Bildrand */
.zitat-karte {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  width: min(21rem, calc(100% - 2rem));
  margin: -3rem 0 0 0.75rem;
  padding: 1rem 1.25rem 1.1rem;
  border-radius: var(--radius-karte);
  background: var(--white);
  box-shadow: var(--schatten-karte);
}

.leitsatz {
  max-width: none;
  color: var(--petrol-900);
  font-family: var(--schrift-titel);
  font-size: 1.375rem;         /* 22 px */
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.gruppen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie-hell);
  list-style: none;
}

.gruppe {
  max-width: none;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linie-hell);
}

.gruppe h3 {
  margin-bottom: 0.25rem;
}

.gruppe p {
  margin: 0;
  color: var(--ink-600);
}

@media (min-width: 40em) {
  .gruppen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }

  /* fünfte Gruppe nicht allein in einer halben Zeile */
  .gruppe:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .leitsatz {
    font-size: 1.625rem;       /* 26 px */
  }
}

@media (min-width: 64em) {
  .fuer-wen {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "bild kopf"
      "bild liste";
    grid-template-rows: auto 1fr;
    column-gap: 5.5rem;
  }

  .fuer-wen__kopf {
    grid-area: kopf;
  }

  .fuer-wen__liste {
    grid-area: liste;
    align-self: start;
  }

  .fuer-wen__bild {
    grid-area: bild;
    align-self: start;
    margin: 0;
  }

  .fuer-wen__bild .bild img {
    aspect-ratio: 4 / 5;
  }

  .zitat-karte {
    position: absolute;
    right: -2.5rem;
    bottom: 2.5rem;
    width: 19rem;
    margin: 0;
    padding: 1.25rem 1.5rem 1.4rem;
  }
}

/* ---------------------------------------------------------------
   14. Was als Pflege zählt (kurz) und Partner
   --------------------------------------------------------------- */
.haekchen-liste {
  max-width: 40rem;
  margin: 0 0 1.75rem;
  padding: 0;
  border-top: 1px solid var(--linie-hell);
  list-style: none;
}

.haekchen-liste li {
  position: relative;
  max-width: none;
  padding: 0.875rem 0 0.875rem 2.5rem;
  border-bottom: 1px solid var(--linie-hell);
}

.haekchen-liste li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 1.2rem;
  width: 1.2rem;
  height: 0.6rem;
  border-left: 3px solid var(--petrol-700);
  border-bottom: 3px solid var(--petrol-700);
  transform: rotate(-45deg);
}

/* Ohne Bild (M4 steht seit dem Feinschliff bei «Was Sie erhalten»): Liste links, rechts bleibt die Fläche frei */
.pflege__satz {
  margin-bottom: 0.5rem;
  text-wrap: pretty;
}

.mehr {
  margin: 0;
}

.mehr a {
  font-weight: 600;
}

.partner__logo {
  margin: 0 0 1.5rem;
}

.partner__logo .partnerlogo {
  height: 2.75rem;             /* 44 px */
}

.partner__standorte {
  color: var(--ink-900);
}

.partner__adresse {
  margin-bottom: 0;
  color: var(--ink-600);
  font-size: var(--kleintext);
  line-height: 1.5;
}

/* ---------------------------------------------------------------
   15. Häufige Fragen: Akkordeon mit Plus/Minus (Höhe animiert in seite.js)
   --------------------------------------------------------------- */
.fragen-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.fragen {
  max-width: 52rem;
}

@media (min-width: 64em) {
  .fragen-raster {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: 4rem;
  }

  .fragen-raster__kopf {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 2rem);
  }
}

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

.frage:first-of-type {
  border-top: 1px solid var(--linie-hell);
}

.frage summary {
  position: relative;
  display: flex;
  align-items: center;
  max-width: none;
  min-height: 3.5rem;
  padding: 1.25rem 3.75rem 1.25rem 0;
  color: var(--petrol-900);
  font-family: var(--schrift-titel);
  font-size: var(--h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  transition: color var(--dauer-kurz) ease;
  /* Kreis hinter Plus und Minus */
  background: radial-gradient(circle at calc(100% - 1.375rem) 50%, var(--petrol-100) 0 1.125rem, transparent 1.15rem) no-repeat;
}

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

/* Plus aus zwei Balken; beim Öffnen wird der senkrechte Balken flach: Minus */
.frage summary::before,
.frage summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.875rem;
  width: 1rem;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--petrol-700);
}

.frage summary::after {
  transform: rotate(90deg);
  transition: transform 260ms var(--ease-out);
}

.frage[open] summary::after,
.frage.wird-geoeffnet summary::after {
  transform: rotate(90deg) scaleX(0);
}

.frage.wird-geschlossen summary::after {
  transform: rotate(90deg);
}

@media (hover: hover) and (pointer: fine) {
  .frage summary:hover {
    color: var(--petrol-700);
  }
}

.frage__antwort {
  overflow: hidden;
}

.frage__antwort > :first-child {
  margin-top: 0;
}

.frage__antwort > :last-child {
  margin-bottom: 0;
  padding-bottom: 1.5rem;
}

/* ---------------------------------------------------------------
   16. Formularfelder
   --------------------------------------------------------------- */
.formular {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.formular__hinweis-oben {
  margin: 0;
  color: var(--ink-600);
  font-size: var(--hilfstext);
  line-height: 1.5;
}

/* minmax(0, 1fr): Eingabefelder bringen eine eigene Mindestbreite mit; bei grosser Grundschrift auf 320 px
   liefen sie sonst über den Rand der Karte */
.feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem;
  min-width: 0;
}

.feld[hidden] {
  display: none;
}

.feld label,
.feld legend {
  color: var(--ink-900);
  font-size: var(--fliesstext);
  font-weight: 600;
  line-height: 1.6;
}

.feld__hilfe {
  margin: 0;
  color: var(--ink-600);
  font-size: var(--hilfstext);
  line-height: 1.5;
}

.feld input[type="text"],
.feld input[type="tel"],
.feld input[type="email"],
.feld select,
.feld textarea {
  width: 100%;
  min-height: 3.5rem;          /* 56 px */
  padding: 0.75rem 1rem;
  border: 2px solid var(--line-500);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink-900);
  font-family: var(--schrift-text);
  font-size: 1.125rem;         /* 18 px */
  line-height: 1.4;
  transition: border-color var(--dauer-kurz) ease, box-shadow var(--dauer-kurz) ease;
}

.feld select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--petrol-700) 50%),
    linear-gradient(135deg, var(--petrol-700) 50%, transparent 50%);
  background-position: calc(100% - 24px) 55%, calc(100% - 16px) 55%;
  background-size: 8px 8px, 8px 8px;
  background-repeat: no-repeat;
}

.feld textarea {
  min-height: 8rem;
  resize: vertical;
}

.feld input:hover,
.feld select:hover,
.feld textarea:hover {
  border-color: var(--ink-600);
}

.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  border-color: var(--petrol-700);
}

.feld :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--error-700);
}

.feld__fehler {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  color: var(--error-700);
  font-size: var(--hilfstext);
  font-weight: 600;
  line-height: 1.5;
}

.karte .feld__fehler a:not(.knopf) {
  color: var(--error-700);
}

.feld__fehler[hidden] {
  display: none;
}

/* Symbol zum Fehlertext (Regel 5: nie nur Farbe) */
.feld__fehler::before {
  content: "!";
  content: "!" / "";
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--error-700);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.feldgruppe {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.feldgruppe legend {
  margin-bottom: 0.5rem;
  padding: 0;
  color: var(--ink-900);
  font-size: var(--fliesstext);
  font-weight: 600;
  line-height: 1.6;
}

.feldgruppe__reihe {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 40em) {
  .feldgruppe__reihe {
    grid-template-columns: 9rem 1fr;
  }

  /* Postleitzahl: Hilfetext neben dem schmalen Feld */
  .feld--plz {
    grid-template-columns: 8rem 1fr;
    grid-template-areas:
      "beschriftung beschriftung"
      "eingabe hilfe"
      "fehler fehler";
    column-gap: 1rem;
    align-items: center;
  }

  .feld--plz label {
    grid-area: beschriftung;
  }

  .feld--plz input {
    grid-area: eingabe;
  }

  .feld--plz .feld__hilfe {
    grid-area: hilfe;
  }

  .feld--plz .feld__fehler {
    grid-area: fehler;
  }
}

/* Einwilligung: Häkchen 28 × 28 px, ganzer Text anklickbar */
.feld--einwilligung {
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: start;
}

.feld--einwilligung input[type="checkbox"] {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0.15rem 0 0;
  accent-color: var(--petrol-700);
  cursor: pointer;
}

.feld--einwilligung label {
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
  cursor: pointer;
}

.feld--einwilligung .feld__fehler {
  grid-column: 1 / -1;
}

.formular .knopf--haupt {
  width: 100%;
}

.formular__hinweis {
  margin: -0.5rem 0 0;
  color: var(--ink-600);
  font-size: var(--hilfstext);
  line-height: 1.5;
}

/* Honeypot: für Menschen unsichtbar */
.feld--honig {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Vollständiges Formular */
.formular-abschnitt .karte {
  max-width: 46rem;
  margin-inline: auto;
}

@media (min-width: 64em) {
  .formular-abschnitt .karte {
    padding: 3rem 3.5rem;
  }
}

/* ---------------------------------------------------------------
   17. CTA-Karte vor der Fusszeile (Petrol) und Fusszeile (Petrol)
   --------------------------------------------------------------- */
.cta {
  padding-bottom: var(--abstand);
}

/* Spalte wächst nicht mit dem längsten Wort des Buttons (grosse Grundschrift, schmale Bildschirme) */
.cta__karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding: 2.5rem 1.5rem;
  border-radius: 2rem;
  background:
    radial-gradient(120% 130% at 100% 0%, rgb(26 94 107 / 0.55) 0%, rgb(26 94 107 / 0) 60%),
    var(--petrol-900);
  color: var(--offwhite);
}

.cta__text {
  container-type: inline-size;   /* Bezug für die Grösse der Telefonnummer */
}

.auf-petrol h2,
.auf-petrol h3 {
  color: var(--white);
}

.auf-petrol .label {
  color: var(--petrol-100);
}

.auf-petrol :focus-visible {
  outline-color: var(--apricot-400);
}

.auf-petrol a:not(.knopf) {
  color: var(--offwhite);
}

/* Telefon gross in Weiss auf Petrol (am ungünstigsten Punkt 9.7:1). Nicht Apricot: das bleibt Buttons und Lohn-Zahl */
.auf-petrol a.cta__telefon {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin: 0.5rem 0 0.75rem;
  color: var(--white);
  font-family: var(--schrift-titel);
  font-size: 2.5rem;
  font-size: min(2.75rem, 14cqi);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-decoration: none;
}

.auf-petrol a.cta__telefon:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.cta__erreichbarkeit {
  margin: 0;
}

.cta__aktion {
  margin: 0;
}

@media (min-width: 64em) {
  .cta__karte {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
    padding: 4.5rem 5rem;
  }

  .auf-petrol a.cta__telefon {
    font-size: 3rem;           /* 48 px: kleiner als die Kennzahl */
    font-size: min(3rem, 14cqi);
  }
}

.fuss {
  padding-block: 3.5rem 2rem;
  background: var(--petrol-950);
  color: var(--petrol-100);
  font-size: var(--kleintext);
  line-height: 1.5;
}

.fuss__oben {
  display: grid;
  gap: 1.75rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgb(152 177 181 / 0.35);
}

/* Logo auf heller Fläche (keine Negativfassung, Konzept 6) */
.fuss__logo {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: var(--offwhite);
}

.fuss__logo img {
  display: block;
  width: auto;
  height: 2.75rem;             /* 44 px */
}

.fuss__marke p {
  margin: 0.75rem 0 0;
}

.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss__links a,
.fuss__links .link-knopf {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--offwhite);
}

.fuss p {
  margin: 0 0 0.5rem;
}

.fuss__anbieter {
  color: var(--petrol-100);
}

@media (min-width: 64em) {
  .fuss__oben {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .fuss__links {
    justify-content: flex-end;
  }
}

/* Knopf, der wie ein Link aussieht (Cookie-Einstellungen) */
.link-knopf {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--petrol-700);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.link-knopf:hover {
  color: var(--petrol-900);
}

.auf-petrol .link-knopf,
.auf-petrol .link-knopf:hover {
  color: var(--offwhite);
}

/* Platzhalter in eckigen Klammern: erscheinen nicht im Betrieb (Konzept 0) */
.platzhalter {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border: 2px dashed var(--line-500);
  border-radius: 0.375rem;
  background: var(--white);
  color: var(--ink-600);
  font-size: var(--kleintext);
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;     /* lange Platzhalter brechen bei grosser Schrift statt überzulaufen */
}

/* ---------------------------------------------------------------
   18. Unterseiten (Gut zu wissen, Danke, Impressum, Datenschutz)
   --------------------------------------------------------------- */
.textseite {
  padding-block: 3rem var(--abstand);
}

.textseite .huelle {
  max-width: calc(48rem + 2 * var(--rand));
}

.textseite h1 {
  margin-bottom: 0.6em;
}

.textseite__abschnitt {
  margin-bottom: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linie-hell);
}

.textseite__abschnitt h2 {
  font-size: 1.625rem;
}

.textseite__abschnitt h3 {
  margin-top: 1.5rem;
}

.textseite .haekchen-liste {
  margin-bottom: 1.5rem;
}

/* «nicht automatisch vergütet»: Strich statt Häkchen */
.strich-liste {
  max-width: 40rem;
  margin: 0 0 1.5rem;
  padding: 0;
  border-top: 1px solid var(--linie-hell);
  list-style: none;
}

.strich-liste li {
  position: relative;
  max-width: none;
  padding: 0.875rem 0 0.875rem 2.5rem;
  border-bottom: 1px solid var(--linie-hell);
}

.strich-liste li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.5rem;
  width: 1.25rem;
  height: 3px;
  background: var(--ink-600);
}

.hinweis-satz {
  color: var(--petrol-900);
  font-weight: 600;
}

.textseite__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 64em) {
  .textseite {
    padding-top: 4.5rem;
  }

  .textseite__abschnitt h2 {
    font-size: 2rem;
  }
}

.danke-schritte {
  display: grid;
  gap: 0;
  margin: 0 0 2rem;
  padding: 0;
  border-top: 1px solid var(--linie-hell);
  list-style: none;
  counter-reset: danke;
}

.danke-schritte > li {
  position: relative;
  max-width: none;
  padding: 1.25rem 0 1.25rem 4rem;
  border-bottom: 1px solid var(--linie-hell);
  counter-increment: danke;
}

.danke-schritte > li::before {
  content: counter(danke, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.15rem;
  color: var(--petrol-700);
  font-family: var(--schrift-titel);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.danke-schritte p {
  margin: 0;
}

.danke-schritte .nur-nach-bestaetigung {
  margin-top: 0.5rem;
}

.entwurf-stempel {
  display: inline-block;
  margin: 0 0 1.5rem;
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--entwurf-rand);
  border-radius: 0.5rem;
  background: var(--entwurf-gelb);
  color: var(--ink-900);
  font-weight: 700;
}

/* ---------------------------------------------------------------
   19. Einwilligungs-Hinweis und feste Leiste (Mobil)
   Kompakt (Review Hesq vom 28.10.2026): auf 390 px Breite höchstens 96 px hoch, Text in zwei Zeilen, Knöpfe
   nebeneinander. Das geht nur mit 14 px Schrift (nur von 390 bis 439 px) und 44 px hohen Knöpfen (Ausnahme von
   «kein Text unter 16 px» und «Buttons 56 px», Konzept 5 und 8). Ab 1024 px Text 18 px, Knöpfe 56 px.
   --------------------------------------------------------------- */
.einwilligung {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  padding: 0.3125rem 0 0.25rem;
  border-top: 2px solid var(--petrol-900);
  background: var(--white);
  color: var(--ink-900);
  box-shadow: 0 -8px 24px rgb(14 63 74 / 0.16);
}

.einwilligung[hidden] {
  display: none;
}

.einwilligung__innen {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.einwilligung p {
  margin: 0;
  font-size: 1rem;             /* 16 px */
  line-height: 1.3;
}

/* Nur von 390 bis 439 px: Mit 14 px passt der Text dort in zwei Zeilen (gemessen; 16 px brauchen drei) */
@media (min-width: 24.375em) and (max-width: 27.49em) {
  .einwilligung p {
    font-size: 0.875rem;       /* 14 px */
  }
}

/* Nebeneinander, solange jeder Knopf 9rem bekommt; bei grosser Grundschrift untereinander */
.einwilligung__knoepfe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 0.5rem;
}

/* 44 px hoch (Klickfläche nach Konzept 8), Schriftgrösse aus .knopf */
.einwilligung .knopf {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.25rem 0.375rem;
}

@media (max-width: 39.99em) {
  /* Schmalerer Seitenrand: Erst ab 366 px Textbreite reichen zwei Zeilen */
  .einwilligung__innen {
    padding-inline: 0.75rem;
  }
}

@media (min-width: 64em) {
  .einwilligung {
    padding: 0.625rem 0;
    border-top-width: 3px;
  }

  .einwilligung__innen {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .einwilligung p {
    max-width: 60ch;
    font-size: var(--hilfstext);
    line-height: 1.5;
  }

  .einwilligung__knoepfe {
    flex: none;
    grid-template-columns: auto auto;
  }

  .einwilligung .knopf {
    width: auto;
    min-width: 11rem;
    min-height: 3.5rem;
    padding: 0.5rem 1.25rem;
  }
}

.leiste {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linie-hell);
  background: var(--white);
  box-shadow: 0 -6px 18px rgb(14 63 74 / 0.14);
}

.leiste[hidden] {
  display: none;
}

.leiste .knopf {
  width: 100%;
}

@media (min-width: 64em) {
  .leiste {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   20. Druck: alles sichtbar, ohne feste Elemente, dunkle Schrift statt Weiss auf Petrol
   --------------------------------------------------------------- */
@media print {
  .bewegung .einblenden--wartet {
    opacity: 1;
    transform: none;
  }

  .bewegung .schritt::before,
  .bewegung [data-einblenden] {
    transform: none;
    transition: none;
  }

  .einwilligung,
  .leiste,
  .infozeile,
  .menueknopf,
  .menue {
    display: none !important;
  }

  .kopf {
    position: static;
  }

  .cta__karte,
  .fuss {
    background: none;
    color: var(--ink-900);
  }

  .auf-petrol h2,
  .auf-petrol h3,
  .auf-petrol a:not(.knopf),
  .auf-petrol .label,
  .fuss__anbieter,
  .auf-petrol .link-knopf {
    color: var(--petrol-900);
  }

  .auf-petrol a.cta__telefon {
    color: var(--amber-800);
  }
}

/* ---------------------------------------------------------------
   21. Bewegung (dezent, nur transform und opacity)
   Einblenden: seite.js setzt «einblenden--wartet» nur bei Elementen unterhalb des sichtbaren
   Bereichs und nimmt die Klasse beim ersten Erscheinen wieder weg (einmalig, 450 ms, 12 px).
   --------------------------------------------------------------- */
.bewegung [data-einblenden] {
  transition:
    opacity var(--dauer-einblenden) var(--ease-out),
    transform var(--dauer-einblenden) var(--ease-out);
}

.bewegung .einblenden--wartet {
  opacity: 0;
  transform: translateY(12px);
}

/* Versatz innerhalb einer Gruppe (60 ms) */
.bewegung [data-einblenden="2"] { transition-delay: 60ms; }
.bewegung [data-einblenden="3"] { transition-delay: 120ms; }
.bewegung [data-einblenden="4"] { transition-delay: 180ms; }
.bewegung [data-einblenden="5"] { transition-delay: 240ms; }

/* Petrol-Strich der Schritte wird beim Erscheinen gezeichnet, Schritt für Schritt */
.bewegung .schritt::before {
  transform: scaleX(0);
  transition: transform 500ms var(--ease-out) 150ms;
}

.bewegung .schritt:nth-child(2)::before {
  transition-delay: 350ms;
}

.bewegung .schritt:nth-child(3)::before {
  transition-delay: 550ms;
}

.bewegung .schritte.ist-sichtbar .schritt::before {
  transform: scaleX(1);
}

/* Alles aus bei reduzierter Bewegung */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }

  .knopf:active {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
   22. Entwurfs-Markierungen
   Alle hängen an der Klasse «entwurf» auf <body>. Seit v0.5 ist sie auf allen Seiten aus
   (Kundenwunsch 29.10.2026); offene Bestätigungen stehen nur noch im Konzept.
   Ausnahme: .entwurf-stempel (Abschnitt 18) bleibt und wird mit dem fehlenden Inhalt ersetzt.
   --------------------------------------------------------------- */
.entwurf .bestaetigung-offen {
  border-left: 0.375rem solid var(--entwurf-rand);
  background: var(--entwurf-gelb);
}

.entwurf .bestaetigung-offen::after {
  content: "Bestätigung Kunde offen";
  display: block;
  margin-top: 0.5rem;
  color: var(--ink-900);
  font-family: var(--schrift-text);
  font-size: var(--kleintext);
  font-weight: 600;
  line-height: 1.4;
}

.nur-nach-bestaetigung {
  display: none;
}

.entwurf .nur-nach-bestaetigung {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
}

.entwurf-notiz {
  display: none;
}

.entwurf .entwurf-notiz {
  display: block;
  margin: 0.25rem 0 0;
  padding: 0.375rem 0.625rem;
  border-left: 0.375rem solid var(--entwurf-rand);
  border-radius: 0.25rem;
  background: var(--entwurf-gelb);
  color: var(--ink-900);
  font-size: var(--kleintext);
  font-weight: 600;
}

.entwurf .textseite .entwurf-notiz {
  margin-bottom: 1rem;
}

/* ---------------------------------------------------------------
   23. Kontrastmodus (Windows): Linien, Häkchen und Auswahlflächen bleiben sichtbar
   --------------------------------------------------------------- */
@media (forced-colors: active) {
  .feld select {
    appearance: auto;
    background-image: none;
  }

  .label::before,
  .schritt::before,
  .strich-liste li::before,
  .frage summary::before,
  .frage summary::after {
    background: CanvasText;
  }

  .haekchen-liste li::before {
    border-color: CanvasText;
  }

  .wahl__option:has(input:checked) .wahl__marke {
    background: Highlight;
    forced-color-adjust: none;
  }

  /* Regler des Lohnrechners: Verläufe fallen im Kontrastmodus weg, der Fokusring aus Schatten ebenso */
  .regler__eingabe::-webkit-slider-runnable-track {
    background: CanvasText;
  }

  .regler__eingabe::-moz-range-track {
    background: CanvasText;
  }

  .regler__skala > span::before {
    background: CanvasText;
  }

  .regler__eingabe:focus-visible {
    outline: var(--fokus-breite) solid Highlight;
    outline-offset: 2px;
  }
}

/* ---------------------------------------------------------------
   24. Erster Bildschirm und Pill in der Kopfzeile (Gestaltungsprüfung und O43, 29.10.2026)
   Unter 1024 px steht die Lohn-Karte direkt unter dem Titel, vor Einleitung und Bild. So stehen Titel, «bis zu
   CHF 37.90» und «brutto pro anerkannter Pflegestunde*» im ersten Bildschirm über dem Einwilligungs-Hinweis, der
   unten bleibt (Variante B; die schmale Zeile unter der Kopfzeile wäre mit dem unveränderten Text 87 bis 106 px
   hoch). Im Code bleibt die Reihenfolge Titel, Einleitung, Bild, Lohn-Karte: Text- und Bildspalte lösen sich dafür
   auf (display: contents, beides div ohne Rolle). Die Pill «Jetzt anfragen» steht in der Kopfzeile (ab 360 px,
   Schwellen unten), bis die feste Leiste erscheint.
   --------------------------------------------------------------- */
@media (max-width: 63.99em) {
  .hero__text,
  .hero__bild {
    display: contents;
  }

  .hero__raster {
    grid-template-areas:
      "label"
      "titel"
      "karte"
      "einleitung"
      "bild"
      "formular"
      "telefon";
  }

  .hero__text > .label {
    grid-area: label;
  }

  .hero__titel {
    grid-area: titel;
  }

  .lohn-karte {
    grid-area: karte;
    width: min(24rem, 100%);
    margin: 0.25rem 0 1.5rem;
  }

  .hero__einleitung {
    grid-area: einleitung;
    margin-bottom: 1.75rem;
  }

  .hero__bild > .bild {
    grid-area: bild;
  }
}

/* 320 bis 359 px (auch Handys mit vergrösserter Anzeige): Titel vierzeilig statt fünfzeilig (29 px; «jemanden zu
   Hause?» ist dann 265 px breit, Platz 280 px), Infozeile zweizeilig (ohne Uhr-Symbol bricht «Antwort innerhalb
   eines Arbeitstags» nicht um), Lohn-Karte etwas knapper. So endet die Karte bei 320 × 568 über dem Hinweis.
   Auf den Unterseiten etwas weniger Abstand oben. */
@media (max-width: 22.49em) {
  .hero {
    padding-top: 1.25rem;
  }

  .hero__titel {
    font-size: 1.8125rem;
  }

  .lohn-karte {
    margin-top: 0;
    padding-block: 0.875rem 0.9375rem;
  }

  .infozeile__antwort .symbol {
    display: none;
  }

  /* «Gut zu wissen»: Lohnsatz mit «Höchstwert, keine Zusage» bei 320 × 568 ganz über dem Hinweis */
  .textseite {
    padding-top: 1.25rem;
  }

  .textseite__abschnitt {
    padding-top: 1.5rem;
  }
}

/* Unter 390 px: Knopftext im Hinweis 16 px, damit «Nur notwendige» auf 320 px einzeilig bleibt (Knopf 44 statt 58 px) */
@media (max-width: 24.374em) {
  .einwilligung .knopf {
    font-size: 1rem;
  }
}

@media (max-width: 39.99em) {
  .kopf__innen {
    gap: 0.5rem;
  }

  .kopf__aktion {
    padding-inline: 1rem;
  }

  body.hat-leiste .kopf__aktion {
    display: none;
  }
}

/* Die Pill steht nur, wenn sie neben Logo und Menüknopf auf eine Zeile passt. Schwellen in rem, weil Logo, Pill und
   Menüknopf mit der Grundschrift wachsen: So greift die Regel auch bei grosser Schrift. Bedarf bei 100 %: unter
   640 px 330 px (20.6 rem), mit kleinerem Logo 313 px (19.6 rem), ab 640 px höchstens 381 px (23.8 rem). Browser ohne Container-Abfragen behalten die
   Regel aus Abschnitt 6 (Pill ab 640 px). */
.kopf__innen {
  container: kopf / inline-size;
}

@supports (container-type: inline-size) {
  .kopf__aktion {
    display: none;
  }

  @container kopf (min-width: 19.75rem) {
    .kopf__aktion {
      display: inline-flex;
      width: auto;
    }
  }

  /* 360 bis 374 px: Logo 36 statt 40 px hoch und Pill etwas schmaler, damit sie auch dort steht (313 px Bedarf) */
  @media (max-width: 39.99em) {
    @container kopf (19.75rem <= width < 20.75rem) {
      .logo img {
        height: 2.25rem;
      }

      .kopf__aktion {
        padding-inline: 0.875rem;
      }
    }
  }

  @media (min-width: 40em) {
    @container kopf (width < 24rem) {
      .kopf__aktion {
        display: none;
      }
    }
  }
}

/* «Für wen» zwischen 1024 und 1279 px: Liste einspaltig, sonst nur 17 bis 23 Zeichen pro Zeile */
@media (min-width: 64em) and (max-width: 79.99em) {
  .fuer-wen .gruppen {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------
   25. Lohnrechner (Unterseite, Konzept v0.5, 3.17)
   Mobil: Kopf, Regler, Ergebnis-Karte, Kurzformular, Telefon. Desktop: Kopf und Regler links, Ergebnis-Karte rechts
   auf halber Höhe, Kurzformular darunter über die volle Breite. Die Ergebnis-Karte ist die einzige Apricot-Fläche
   der Seite (Konzept 15: Apricot bleibt dem Angebot vorbehalten), Zahl in petrol-900 (5.85:1). Ihre drei Zeilen
   stehen auf allen Breiten in derselben Karte wie die Zahl.
   --------------------------------------------------------------- */
.rechner {
  padding-block: 1.75rem var(--abstand);
}

.rechner__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "kopf"
    "eingabe"
    "ergebnis";
}

.rechner__kopf {
  grid-area: kopf;
}

.rechner__einleitung {
  max-width: 34em;
  margin: 0 0 1.5rem;
}

.rechner__eingabe,
.rechner__ohne-js {
  grid-area: eingabe;
}

.rechner__ohne-js {
  margin: 0;
  padding-block: 1.25rem;
  border-block: 1px solid var(--linie-hell);
}

/* Regler: Name links, Wert gross daneben, darunter Spur und Stufen. Griff 44 px (Konzept 8). */
.regler {
  --daumen: 2.75rem;
  --spur: 0.375rem;
  padding: 1.125rem 0 0.75rem;
  border-top: 1px solid var(--linie-hell);
  container-type: inline-size;   /* Bezug für die Grösse des Werts (cqi) */
}

.regler:last-child {
  border-bottom: 1px solid var(--linie-hell);
}

.regler__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1rem;
  margin-bottom: 0.25rem;
}

.regler__name {
  font-weight: 600;
}

.regler__wert {
  color: var(--petrol-900);
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  font-size: min(1.5rem, 8cqi);  /* «1½ Stunden» passt auch bei 200 % Grundschrift auf 320 px */
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.regler__eingabe {
  --anteil: 0;
  display: block;
  width: 100%;
  height: var(--daumen);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Spur: Petrol bis zur Griffmitte (rechner.js setzt --anteil), danach line-500 (3.63:1, Bedienelement ab 3:1) */
.regler__eingabe::-webkit-slider-runnable-track {
  height: var(--spur);
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--petrol-700) 0 calc(var(--daumen) / 2 + (100% - var(--daumen)) * var(--anteil)),
    var(--line-500) 0);
}

.regler__eingabe::-moz-range-track {
  height: var(--spur);
  border-radius: 999px;
  background: var(--line-500);
}

.regler__eingabe::-moz-range-progress {
  height: var(--spur);
  border-radius: 999px;
  background: var(--petrol-700);
}

/* Griff weiss mit Rahmen petrol-900 (10.75:1 auf Off-White) */
.regler__eingabe::-webkit-slider-thumb {
  width: var(--daumen);
  height: var(--daumen);
  margin-top: calc((var(--spur) - var(--daumen)) / 2);
  border: 2px solid var(--petrol-900);
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--schatten-1);
  -webkit-appearance: none;
  appearance: none;
}

.regler__eingabe::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--daumen);
  height: var(--daumen);
  border: 2px solid var(--petrol-900);
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--schatten-1);
}

/* Fokus am Griff: 2 px Abstand, 3 px petrol-700 (Konzept 4, Regel 4) */
.regler__eingabe:focus {
  outline: none;
}

.regler__eingabe:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--offwhite), 0 0 0 5px var(--petrol-700);
}

.regler__eingabe:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--offwhite), 0 0 0 5px var(--petrol-700);
}

/* Stufen genau unter der Griffmitte: Die Mitte des Griffs wandert von --daumen/2 bis 100 % − --daumen/2.
   --n ist die Zahl der Abstände, --i die Stelle der Stufe (nth-child unten). */
.regler__skala {
  --n: 5;
  position: relative;
  height: 2rem;
}

.regler__skala[data-skala="tage"] {
  --n: 6;
}

.regler__skala > span {
  --i: 0;
  position: absolute;
  top: 0;
  left: calc(var(--daumen) / 2 + (100% - var(--daumen)) * var(--i) / var(--n));
  min-width: 1.75rem;
  padding-top: 0.625rem;
  transform: translateX(-50%);
  color: var(--ink-600);
  font-family: var(--schrift-titel);
  font-size: var(--kleintext);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.regler__skala > :nth-child(2) { --i: 1; }
.regler__skala > :nth-child(3) { --i: 2; }
.regler__skala > :nth-child(4) { --i: 3; }
.regler__skala > :nth-child(5) { --i: 4; }
.regler__skala > :nth-child(6) { --i: 5; }
.regler__skala > :nth-child(7) { --i: 6; }

/* Kurzer Strich über jeder Stufe */
.regler__skala > span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 0.375rem;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--line-500);
}

.regler__skala > span[data-aktiv] {
  color: var(--petrol-900);
}

.regler__skala > span[data-aktiv]::before {
  background: var(--petrol-700);
}

/* Ergebnis-Karte: «bis zu CHF X» gross und ohne Umbruch, «pro Monat brutto» darunter, dann die Beispielrechnung
   und die Klärung in 18 px (Vorgabe: mindestens 16 px). Kein Trennstrich: Zahl und Zeilen bleiben eine Einheit. */
.ergebnis-karte {
  grid-area: ergebnis;
  align-self: start;
  margin-top: 1.75rem;
  padding: 1.25rem 1.25rem 1.375rem;
  border-radius: var(--radius-karte);
  background: var(--apricot-400);
  color: var(--petrol-900);
  box-shadow: var(--schatten-2);
  container-type: inline-size;   /* Bezug für die Grösse der Zahl (cqi) */
}

.ergebnis {
  max-width: none;
  margin: 0;
  color: var(--petrol-900);
  font-family: var(--schrift-titel);
  font-weight: 800;
  line-height: 1;
}

/* «bis zu CHF 4’590» ist rund 6.3 × die Schriftgrösse breit: höchstens 15 % der Kartenbreite, sonst 44 px.
   Proportionale Ziffern wie auf der Lohn-Karte; die schmale 1 steht sonst mit viel Luft vor dem Apostroph. */
.ergebnis__zahl {
  display: block;
  font-size: 2.75rem;
  font-size: min(3.25rem, 15cqi);
  font-variant-numeric: lining-nums proportional-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.ergebnis__bis {
  font-size: 0.5em;            /* wie auf der Lohn-Karte: halb so gross, gleiche Farbe, gleiche Zeile */
  letter-spacing: 0;
}

.ergebnis__betrag {
  display: inline-block;       /* für die kurze Bewegung beim Wechsel (rechner.js) */
}

/* Tausender-Apostroph: Plus Jakarta Sans setzt ihn mit breitem Rand, in der grossen Zahl wirkt er losgelöst */
.ergebnis__apostroph {
  margin-inline: -0.07em -0.03em;
}

.ergebnis__einheit {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.375rem;         /* 22 px */
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ergebnis__beispiel,
.ergebnis__klaerung {
  max-width: none;
  font-size: var(--hilfstext);
  line-height: 1.5;
}

.ergebnis__beispiel {
  margin: 1rem 0 0;
  font-weight: 600;
}

.ergebnis__klaerung {
  margin: 0.625rem 0 0;
}

/* Link auf Apricot: petrol-900, unterstrichen (5.85:1); Klickfläche mindestens 44 px; Fokus petrol-900 */
.ergebnis-karte a {
  position: relative;
  color: var(--petrol-900);
  font-weight: 600;
}

.ergebnis-karte a::before {
  content: "";
  position: absolute;
  inset: -0.75rem 0;
}

.ergebnis-karte :focus-visible {
  outline-color: var(--petrol-900);
}

.rechner__formular {
  margin: 2rem 0 0;
}

.rechner__telefon {
  margin: 1.25rem 0 0;
}

@media (min-width: 40em) {
  .ergebnis-karte {
    padding: 1.75rem 2rem 2rem;
  }

  .ergebnis__einheit {
    font-size: 1.5rem;         /* 24 px */
  }
}

@media (min-width: 64em) {
  .rechner {
    padding-top: 3.5rem;
  }

  /* Die Antwort steht grösser als die Frage: Karte breiter als die Lohn-Karte der Startseite, Zahl bis 64 px */
  .rechner__raster {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas:
      "kopf ergebnis"
      "eingabe ergebnis";
    column-gap: 4.5rem;
  }

  .ergebnis-karte {
    align-self: center;
    margin-top: 0;
  }

  .ergebnis__zahl {
    font-size: min(4rem, 15cqi);
  }

  .rechner__formular {
    margin-top: 4rem;
  }
}

/* 320 bis 359 px: etwas weniger Abstand oben (wie die übrigen Unterseiten) */
@media (max-width: 22.49em) {
  .rechner {
    padding-top: 1.25rem;
  }
}

/* [TELEFONZEITEN] fällt vor dem Deploy auf: gelb, durchgezogen, fett (golive.sh bricht ab, solange es steht) */
.platzhalter.platzhalter--zeiten {
  border: 2px solid var(--entwurf-rand);
  background: var(--entwurf-gelb);
  color: var(--ink-900);
  font-weight: 700;
}