/* ============================================================
   PK-RASTER — das Haus-System von Pflegeklartext
   Stand 02.08.2026 · Entwurf, NICHT live · Freigabe durch pruefer

   Verhaeltnis zu pk.css:
   Diese Datei ERSETZT pk.css nicht und definiert keine Farbe neu.
   Sie setzt AUF den Farb-Token von pk.css auf und ergaenzt genau das,
   was dort fehlt: eine geschlossene Groessen-, Abstands-, Radien- und
   Zustands-Ordnung, und daraus die zwoelf Bauteile.
   Ladefolge: /assets/pk.css  ->  pk-raster.css

   Regel ueber allem: die Vorbilder liefern die REIHENFOLGE der Bloecke.
   Alles Sichtbare (Schrift, Farbe, Abstand, Form, Zustand, Bewegung)
   kommt aus Ebene 1 dieser Datei. Sonst fuehlen sich fuenf Oberflaechen
   wie fuenf Produkte an.
   ============================================================ */

/* ══ EBENE 1 · DIE GESCHLOSSENEN WERTELISTEN ══════════════════
   Geschlossen heisst: ein neuer Wert ist eine Entscheidung, kein
   Tastendruck. raster_pruefer.py faellt rot, wenn einer auftaucht.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* --- Schrift: SIEBEN Groessen, keine achte ---------------- */
  --fs-titel:30px;      /* Seitentitel, Lora            */
  --fs-frage:23px;      /* die Frage selbst, Lora       */
  --fs-h2:21px;         /* Abschnittstitel, Lora        */
  --fs-h3:18px;         /* Bauteil-Titel, Grotesk 600   */
  --fs-lead:18px;       /* Vorspann-Absatz              */
  --fs-text:17px;       /* GRUNDSCHRIFT — harte Untergrenze fuer alles, was Inhalt traegt */
  --fs-beiwerk:15px;    /* NUR Nicht-Inhalt: Modulname, Schrittzaehler, Bildunterschrift,
                           Rechts-Fussnote. Absolute Untergrenze im ganzen Haus. */

  --lh-eng:1.25;        /* Lora-Zeilen        */
  --lh-weit:1.6;        /* Fliesstext         */
  --ls-caps:1.2px;      /* Kapitaelchen       */

  /* --- Abstand: EINE Leiter, Schrittweite 4 ----------------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px;

  /* --- Form: DREI Radien, keine vierte ---------------------- */
  --r-s:10px;   /* innen: Chip, Feld, Haken, Zahlenkoerper   */
  --r-m:14px;   /* aussen: JEDE Karte, JEDER Knopf, JEDER Reiter */
  --r-l:20px;   /* Seiten-Panel, Buehne                      */
  --r-voll:999px;

  /* --- Kante: zwei Rollen, sauber getrennt ------------------ */
  /* --line (aus pk.css, 1,25:1) = dekorativ. Traegt NIE eine Bedienung. */
  /* UMGESTELLT 16.08.2026: war #8a7a63 (Braun, letzter Rest der
     abgeschafften Creme-Welt). Neu ein gedaempftes Petrol. Sichtbarkeit steigt:
     4,49 auf Weiss statt 4,16, WCAG 1.4.11 verlangt 3,0 fuer Bedienelemente. */
  --linie-tragend:#5F7D74;   /* Kante eines BEDIENBAREN Bauteils.
                                gemessen: 3,90 bg · 4,16 weiss · 3,57 bg-soft · 3,63 wash — alle >=3 */
  --kante-ruhe:1.5px;
  --kante-aktiv:2px;

  /* --- Tap-Ziel ------------------------------------------- */
  --tap:44px;        /* absolute Untergrenze, ueberall        */
  --tap-fluss:56px;  /* alles, was den Nutzer weiterbringt    */

  /* --- Bewegung: zwei Dauern, eine Kurve ------------------- */
  --dur-1:.12s;   /* Zustandswechsel unter dem Finger */
  --dur-2:.2s;    /* Aufklappen, Reiterwechsel        */
  --kurve:cubic-bezier(.2,.6,.3,1);

  /* --- Fehlerfarben (aus pk.css .wl-msg, hier zentral) ----- */
  --rot-linie:#b4453a;   /* 5,10 auf bg */
  --rot-wash:#fbeae8;
  --rot-ink:#8f3a30;     /* 6,41 auf rot-wash */

  --maxw-fluss:640px;    /* Fragebogen/Kasse: schmaler als Lesetext */
}

@media (min-width:760px){
  :root{ --fs-titel:38px; --fs-frage:27px; --fs-h2:24px; }
}

/* Ruhe-Bedarf gilt fuer ALLE Bauteile dieser Datei, ausnahmslos. */
@media (prefers-reduced-motion:reduce){
  :root{ --dur-1:0s; --dur-2:0s; }
}

/* ── Fokus: EIN Ring im ganzen Haus ───────────────────────── */
.pk-raster :is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus);   /* 5,81 auf bg · 6,20 auf weiss */
  outline-offset:2px;
  border-radius:var(--r-s);
}
/* auf der dunklen Petrol-Buehne traegt Petrol nicht (2,08) -> Creme (11,45) */
.pk-stage-deep :is(a,button,summary):focus-visible{ outline-color:var(--cream-on-deep) }

.pk-raster{ font-size:var(--fs-text); line-height:var(--lh-weit) }
.pk-raster p{ font-size:var(--fs-text); line-height:var(--lh-weit); color:var(--ink-soft) }
.pk-lead{ font-size:var(--fs-lead); color:var(--ink-soft) }
.pk-beiwerk{ font-size:var(--fs-beiwerk); color:var(--ink-soft) }

/* ══ EBENE 2 · DIE BAUTEILE ═══════════════════════════════════
   Jedes Bauteil existiert GENAU EINMAL und wird von mehreren
   Oberflaechen benutzt. Nicht "sieht gleich aus" — IST dasselbe.
   ═══════════════════════════════════════════════════════════ */

/* ---- 0 · Knopf-Hierarchie · GENAU DREI RAENGE --------------
   Regel: genau EIN Primaer-Knopf je Bildschirm.
   Gilt fuer Fragebogen, Cockpit, Ratgeber, Landing, Kasse. */
.pk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font:inherit; font-size:var(--fs-text); font-weight:600; line-height:1.2;
  min-height:var(--tap-fluss); padding:var(--s3) var(--s6);
  border-radius:var(--r-m); border:var(--kante-ruhe) solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background var(--dur-1) var(--kurve),border-color var(--dur-1) var(--kurve);
}
.pk-btn svg{ width:20px; height:20px; flex:0 0 auto }
.pk-btn--primaer{ background:var(--teal-cta); color:#fff }        /* weiss/teal-cta = 4,76 (AA) */
.pk-btn--primaer:hover{ background:var(--teal-deep) }             /* weiss/teal-deep = 6,20 */
.pk-btn--zweit{ background:var(--surface); color:var(--teal-deep); border-color:var(--linie-tragend) }
.pk-btn--zweit:hover{ background:var(--teal-wash); border-color:var(--teal-deep) }
.pk-btn--still{ background:none; color:var(--ink-soft); border-color:transparent; padding:var(--s3) var(--s2); min-height:var(--tap) }
.pk-btn--still:hover{ color:var(--teal-deep); text-decoration:underline }
.pk-btn[disabled],.pk-btn[aria-disabled="true"]{
  background:var(--bg-soft); color:var(--ink-soft);  /* ink-soft/bg-soft = 5,70 — lesbar bleibt lesbar */
  border-color:var(--line); cursor:not-allowed;
}
.pk-btn--breit{ width:100% }
/* Preis im Knopf (Norma-Muster): der Betrag steht IM Knopf, nicht daneben. */
.pk-btn .pk-btn-preis{ font-weight:700; margin-left:var(--s1) }

/* ---- 1 · AUSWAHLKARTE · das Bauteil der Einheitlichkeit -----
   Ein und dieselbe Klasse in: Fragebogen (Antwort), Kasse (Zahlart),
   Bereitlegen-Bildschirm (Auswahl), Ratgeber (Kapitelwahl).
   Vier Zustaende. Farbe traegt NIE allein (WCAG 1.4.1):
   gewaehlt = Fuellung + 2px-Kante + gefuellter Punkt + Fettung. */
.pk-optliste{ display:flex; flex-direction:column; gap:var(--s3); margin:0; padding:0; list-style:none }
.pk-opt{
  display:flex; align-items:flex-start; gap:var(--s3);
  width:100%; text-align:left; font:inherit; color:var(--ink);
  background:var(--surface);
  border:var(--kante-ruhe) solid var(--linie-tragend);   /* 4,16 auf weiss — die Karte ist SICHTBAR eine Karte */
  border-radius:var(--r-m);
  padding:var(--s4); min-height:60px; cursor:pointer;
  transition:background var(--dur-1) var(--kurve),border-color var(--dur-1) var(--kurve);
}
.pk-opt:hover{ background:var(--teal-wash); border-color:var(--teal-deep) }
.pk-opt-punkt{
  width:24px; height:24px; flex:0 0 auto; margin-top:1px;
  border:2px solid var(--linie-tragend); border-radius:var(--r-voll);
  display:flex; align-items:center; justify-content:center; background:var(--surface);
}
.pk-opt-punkt svg{ width:14px; height:14px; color:#fff; opacity:0 }
.pk-opt-t{ font-size:var(--fs-text); font-weight:500; color:var(--ink); line-height:1.35 }
/* Erklaerzeile ist INHALT -> bleibt auf 17px. Gestuft wird ueber Gewicht
   und Farbe, nicht ueber Groesse. Das ist die Regel, die 17px tragbar macht. */
.pk-opt-sub{ display:block; font-size:var(--fs-text); font-weight:400; color:var(--ink-soft); margin-top:var(--s1); line-height:1.45 }

.pk-opt[aria-checked="true"],.pk-opt.is-gewaehlt{
  background:var(--teal-wash);
  border-color:var(--teal); border-width:var(--kante-aktiv);   /* teal/bg = 3,78 (>=3 fuer Nicht-Text) */
  padding:calc(var(--s4) - .5px);                              /* Sprung durch dickere Kante ausgleichen */
}
.pk-opt[aria-checked="true"] .pk-opt-t,.pk-opt.is-gewaehlt .pk-opt-t{ font-weight:700 }
.pk-opt[aria-checked="true"] .pk-opt-punkt,.pk-opt.is-gewaehlt .pk-opt-punkt{ background:var(--teal-deep); border-color:var(--teal-deep) }
.pk-opt[aria-checked="true"] .pk-opt-punkt svg,.pk-opt.is-gewaehlt .pk-opt-punkt svg{ opacity:1 }

.pk-opt[disabled],.pk-opt[aria-disabled="true"]{
  background:var(--bg-soft); border-color:var(--line); cursor:not-allowed;
}
.pk-opt[disabled] .pk-opt-t,.pk-opt[aria-disabled="true"] .pk-opt-t{ color:var(--ink-soft) }   /* 5,70 */
.pk-opt[disabled] .pk-opt-sub,.pk-opt[aria-disabled="true"] .pk-opt-sub{ color:var(--ink-soft) }
.pk-opt[disabled]:hover,.pk-opt[aria-disabled="true"]:hover{ background:var(--bg-soft); border-color:var(--line) }

/* ---- 2 · FRAGE-BLOCK (Visible) -----------------------------
   Reihenfolge vom Vorbild: Modulname klein · Frage gross ·
   Erklaerzeile · gestufte Antworten als ganze Saetze. */
/* width:100% ist Pflicht, nicht Schmuck: body ist in pk.css ein Flex-Container.
   Ein Flex-Kind mit margin-inline:auto stretcht NICHT mehr und faellt auf seine
   fit-content-Breite zurueck, also auf max-width — auf 375px waeren das 640px
   und die Seite bekaeme einen Querbalken. Am 02.08.2026 im 375er-Rahmen gemessen. */
.pk-frage{ width:100%; max-width:var(--maxw-fluss); margin-inline:auto }
.pk-frage-modul{
  display:inline-flex; align-items:center; gap:var(--s3);
  font-size:var(--fs-beiwerk); font-weight:700; letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--teal-deep); margin-bottom:var(--s3);
}
/* EIN Eyebrow-Ritual im Haus: Gold-Haarlinie, keine bunte Pille. */
.pk-frage-modul::before{ content:""; width:24px; height:1px; background:var(--sand); flex:0 0 auto }
.pk-frage-t{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-frage); line-height:var(--lh-eng); color:var(--ink); margin:0;
}
.pk-frage-warum{
  font-size:var(--fs-text); color:var(--ink-soft); line-height:1.5;
  margin:var(--s3) 0 0; padding:var(--s3) var(--s4);
  background:var(--bg-soft); border-left:3px solid var(--teal); border-radius:0 var(--r-s) var(--r-s) 0;
}
.pk-frage .pk-optliste{ margin-top:var(--s5) }

/* ---- 3 · SEGMENTIERTE FORTSCHRITTSANZEIGE (Hers/Visible) ---
   Ein Segment je Kapitel. Der Fortschritt beginnt nie optisch bei
   null, ohne dass ein Balken gefaelscht wird: Kapitel 1 ist voll,
   sobald es hinter dem Nutzer liegt. Der Zaehler sagt die Wahrheit. */
.pk-prog{ display:block }
.pk-prog-segs{ display:flex; gap:var(--s1); margin:0; padding:0; list-style:none }
.pk-prog-seg{ flex:1; height:8px; border-radius:var(--r-voll); background:var(--bg-soft); overflow:hidden }
.pk-prog-seg>i{ display:block; height:100%; width:0; background:var(--teal); border-radius:var(--r-voll); transition:width var(--dur-2) var(--kurve) }
.pk-prog-seg.is-voll>i{ width:100% }
.pk-prog-seg.is-jetzt{ box-shadow:0 0 0 2px var(--teal-wash) }
.pk-prog-meta{
  display:flex; justify-content:space-between; gap:var(--s3);
  font-size:var(--fs-beiwerk); color:var(--ink-soft); margin-top:var(--s2);
}
.pk-prog-meta b{ color:var(--ink); font-weight:600 }

/* ---- 4 · WERT-KACHEL mit GEWICHTSZEILE (Chime) --------------
   Chimes Loesung fuer unser Gewichtungs-Problem: das Gewicht steht
   als TEXT an der Kachel, kein Diagramm-Trick.
   Dieselbe Flaeche wie das Hinweisfeld im Ratgeber: gleicher
   Radius, gleicher Schatten, gleicher Innenabstand. */
.pk-kacheln{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) }
.pk-kachel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  padding:var(--s4); box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:var(--s2);
}
.pk-kachel-ic{ width:36px; height:36px; border-radius:var(--r-s); background:var(--teal-wash); color:var(--teal-deep); display:flex; align-items:center; justify-content:center }
.pk-kachel-ic svg{ width:20px; height:20px }
.pk-kachel-lab{ font-size:var(--fs-text); font-weight:600; color:var(--ink); line-height:1.3 }
.pk-kachel-wert{ font-size:var(--fs-text); color:var(--teal-deep); font-weight:700 }
.pk-kachel-gewicht{
  font-size:var(--fs-beiwerk); color:var(--ink-soft);
  border-top:1px solid var(--line); padding-top:var(--s2); margin-top:auto;
}

/* ---- 5 · WAAGERECHTER BALKEN, gewichtsproportional ----------
   Statt Netzdiagramm (dessen Flaeche von der Achsenreihenfolge
   abhaengt): die Spurbreite entspricht dem Gewicht im Verfahren.
   Selbstversorgung 40 % ist vierzig Prozent breit. */
.pk-balken{ display:flex; flex-direction:column; gap:var(--s3); margin:0; padding:0; list-style:none }
.pk-balken-zeile{ display:grid; grid-template-columns:1fr; gap:var(--s1) }
.pk-balken-kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3) }
.pk-balken-lab{ font-size:var(--fs-text); color:var(--ink); font-weight:500 }
.pk-balken-gew{ font-size:var(--fs-beiwerk); color:var(--ink-soft); white-space:nowrap }
/* Die Bahn traegt das Gewicht, NICHT die ganze Zeile. Beschriftung und Fusszeile
   behalten immer die volle Breite. Auf 375px quetschte die alte Fassung sonst
   den Text der 10-Prozent-Zeile auf ein Drittel der Breite. Am 02.08. gesehen. */
.pk-balken-bahn{ display:block }
.pk-balken-spur{ position:relative; display:block; height:14px; border-radius:var(--r-voll); background:var(--teal-wash); overflow:hidden }
.pk-balken-spur>i{ display:block; height:100%; background:var(--teal); border-radius:var(--r-voll) }
/* Stufenmarke: 3px in --ink. Gemessen 2,94 gegen die Fuellung, also knapp
   unter 3 — deshalb traegt sie NIE allein: der Wert steht immer als Text daneben. */
.pk-balken-marke{ position:absolute; top:-3px; bottom:-3px; width:3px; background:var(--ink); border-radius:2px }
.pk-balken-fuss{ font-size:var(--fs-beiwerk); color:var(--ink-soft) }

/* ---- 6 · ZONEN-BAND fuer den Korridor (Bevel/Chime) ---------
   Fuenf Zonen, Zahlengrenzen, markierte Spanne. Die Zonen sind
   NICHT nur farbig getrennt: jede traegt ihre Zahl. */
.pk-zonen{ display:block }
.pk-zonen-band{ display:flex; gap:2px; margin:0; padding:0; list-style:none }
/* Die unmarkierten Zonen brauchen eine eigene Kante: ihre Fuellung liegt bei
   1,09:1 gegen die Seitenflaeche und verschwindet sonst. Mit 1px --linie-tragend
   (3,90:1) liest sich das Band auf JEDER Flaeche als Band. Am 02.08. auf 375px gesehen. */
.pk-zonen-z{
  flex:1; height:38px; background:var(--surface);
  border:1px solid var(--linie-tragend);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-beiwerk); font-weight:600; color:var(--ink);
}
.pk-zonen-z:first-child{ border-radius:var(--r-s) 0 0 var(--r-s) }
.pk-zonen-z:last-child{ border-radius:0 var(--r-s) var(--r-s) 0 }
/* Markierte Zone: teal-deep statt teal, damit die Zahl darauf 6,20:1 erreicht
   statt 4,03:1. Die Marke traegt trotzdem nie allein, der Klartext-Satz sagt es noch einmal. */
.pk-zonen-z.is-spanne{ background:var(--teal-deep); border-color:var(--teal-deep); color:#fff; font-weight:700 }
.pk-zonen-skala{ display:flex; justify-content:space-between; font-size:var(--fs-beiwerk); color:var(--ink-soft); margin-top:var(--s2) }
.pk-zonen-satz{ font-size:var(--fs-text); color:var(--ink); margin-top:var(--s3); line-height:1.5 }
.pk-zonen-satz b{ color:var(--teal-deep) }

/* ---- 7 · REITERSTREIFEN fuer Kapitel (Slack) ----------------
   Waagerecht scrollbar auf 375px, aber JEDER Reiter ist ein
   sichtbarer Knopf — kein Wisch-Raetsel. */
.pk-reiter{ display:flex; gap:var(--s2); overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--s2); scrollbar-width:thin }
.pk-reiter a{
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:var(--tap);
  padding:var(--s2) var(--s4); border-radius:var(--r-m);
  border:var(--kante-ruhe) solid var(--linie-tragend); background:var(--surface);
  font-size:var(--fs-text); font-weight:500; color:var(--ink); text-decoration:none; white-space:nowrap;
}
.pk-reiter a:hover{ background:var(--teal-wash); border-color:var(--teal-deep) }
.pk-reiter a[aria-current="page"]{ background:var(--teal-deep); border-color:var(--teal-deep); color:#fff; font-weight:700 }  /* weiss/teal-deep = 6,20 */

/* ---- 8 · ZURUECK/WEITER-KETTE mit echten Titeln (Udemy) -----
   Linktext ist der Kapiteltitel, nie "weiter". */
.pk-kette{ display:grid; grid-template-columns:1fr; gap:var(--s3); border-top:1px solid var(--line); padding-top:var(--s5) }
.pk-kette a{
  display:flex; flex-direction:column; gap:var(--s1);
  min-height:var(--tap-fluss); padding:var(--s3) var(--s4);
  border:var(--kante-ruhe) solid var(--linie-tragend); border-radius:var(--r-m);
  background:var(--surface); text-decoration:none;
}
.pk-kette a:hover{ background:var(--teal-wash); border-color:var(--teal-deep) }
.pk-kette-lab{ font-size:var(--fs-beiwerk); color:var(--ink-soft); text-transform:uppercase; letter-spacing:var(--ls-caps); font-weight:700 }
.pk-kette-t{ font-size:var(--fs-text); font-weight:600; color:var(--teal-deep); line-height:1.35 }
.pk-kette .is-weiter{ text-align:right }

/* ---- 9 · AUFKLAPPBEREICH mit SICHTBAREM PFEIL ---------------
   <details>/<summary>: konventionell, tastaturfaehig, ohne JS.
   Der Pfeil ist immer da, auch zu. */
.pk-klapp{ border:var(--kante-ruhe) solid var(--linie-tragend); border-radius:var(--r-m); background:var(--surface); overflow:hidden }
.pk-klapp+.pk-klapp{ margin-top:var(--s3) }
.pk-klapp>summary{
  display:flex; align-items:center; gap:var(--s3); justify-content:space-between;
  min-height:var(--tap-fluss); padding:var(--s3) var(--s4); cursor:pointer;
  font-size:var(--fs-text); font-weight:600; color:var(--ink); list-style:none;
}
.pk-klapp>summary::-webkit-details-marker{ display:none }
.pk-klapp>summary:hover{ background:var(--teal-wash) }
.pk-klapp-pfeil{ width:22px; height:22px; flex:0 0 auto; color:var(--teal-deep); transition:transform var(--dur-2) var(--kurve) }
.pk-klapp[open] .pk-klapp-pfeil{ transform:rotate(180deg) }
.pk-klapp-inhalt{ padding:0 var(--s4) var(--s4); font-size:var(--fs-text); color:var(--ink-soft); line-height:var(--lh-weit) }

/* ---- 10 · LISTE MIT HAKEN (Bereitlegen-Bildschirm) ----------- */
.pk-haken{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3) }
.pk-haken li{ display:flex; align-items:flex-start; gap:var(--s3); font-size:var(--fs-text); color:var(--ink); line-height:1.45 }
.pk-haken-ic{
  width:26px; height:26px; flex:0 0 auto; border-radius:var(--r-voll);
  background:var(--teal-wash); color:var(--teal-deep);
  display:flex; align-items:center; justify-content:center;
}
.pk-haken-ic svg{ width:15px; height:15px }
.pk-haken small{ display:block; font-size:var(--fs-text); color:var(--ink-soft); font-weight:400 }

/* ---- 11 · HINWEISFELD fuer die Seitenspalte (Deel) ----------
   Teilt Radius, Schatten und Innenabstand mit der Wert-Kachel.
   Genau EINES je Ratgeber-Seite. */
.pk-hinweis{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--teal);
  border-radius:var(--r-m); padding:var(--s4); box-shadow:var(--shadow-1);
}
.pk-hinweis--sand{ border-left-color:var(--sand); background:var(--sand-soft) }
.pk-hinweis-t{ font-size:var(--fs-h3); font-weight:700; color:var(--ink); margin:0 0 var(--s2); line-height:1.3 }
.pk-hinweis p{ font-size:var(--fs-text); color:var(--ink-soft); margin:0 0 var(--s3) }
.pk-hinweis p:last-child{ margin-bottom:0 }

/* ---- 12 · NUMMERIERTE SCHRITTKARTE (Landingpage/Chime) ------ */
.pk-schritte{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3); counter-reset:pkschritt }
.pk-schritt{
  display:flex; gap:var(--s4); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m);
  padding:var(--s4); box-shadow:var(--shadow-1);
}
.pk-schritt-nr{
  flex:0 0 auto; width:36px; height:36px; border-radius:var(--r-voll);
  background:var(--teal-wash); color:var(--teal-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-text); font-weight:700;
}
.pk-schritt-t{ font-size:var(--fs-h3); font-weight:700; color:var(--ink); margin:0 0 var(--s1); line-height:1.3 }
.pk-schritt p{ margin:0 }

/* ── Fluss-Container: Fragebogen und Kasse teilen ihn ───────── */
.pk-karte{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:var(--s6) var(--s5); box-shadow:var(--shadow-1);
  width:100%; max-width:var(--maxw-fluss); margin-inline:auto;   /* siehe Hinweis bei .pk-frage */
}
.pk-fussleiste{
  display:flex; align-items:center; gap:var(--s3);
  margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line);
}
.pk-fussleiste .pk-btn--primaer{ margin-left:auto }

/* ── 375px: eine Spalte, volle Knopfbreite ─────────────────── */
@media (max-width:479px){
  .pk-kacheln{ grid-template-columns:1fr }
  .pk-fussleiste{ flex-direction:column-reverse; align-items:stretch }
  .pk-fussleiste .pk-btn--primaer{ margin-left:0; width:100% }
  .pk-fussleiste .pk-btn--still{ width:100% }
  .pk-karte{ padding:var(--s5) var(--s4); border-radius:var(--r-m) }
}
@media (min-width:560px){
  .pk-kette{ grid-template-columns:1fr 1fr }
}