/* ============================================================
   components.css — gemeinsame heilmittelklar-Komponenten.
   1:1 extrahiert aus startseite.html + eingabe.html (keine
   Wertaenderung). Nutzt Tokens/Schatten aus tokens.css und wird
   direkt nach tokens.css eingebunden (siehe base_heilmittelklar.html).
   Bloecke: hk-sec-*, hk-btn, hk-grid/hk-card, feat-card-Reihe,
   hk-panel, hk-flow, hk-disclosure.
   ============================================================ */

/* Text-Auswahl global neutral-grau (Kit-Wert) — gilt fuer alle Felder/Seiten,
   die components.css laden. Ueberschreibt farbige Alt-Selektionen. */
::selection, input::selection, textarea::selection { background: var(--selection, rgba(138,138,138,.35)); color: var(--ink); }
::-moz-selection, input::-moz-selection, textarea::-moz-selection { background: var(--selection, rgba(138,138,138,.35)); color: var(--ink); }

.hk-sec-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-3);
  font-size: 13px; font-weight: 500; letter-spacing: .6px;
}
.hk-sec-eyebrow .hk-icon { width: 20px; height: 20px; }
.hk-sec-title {
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.2; letter-spacing: -.01em;
  font-weight: 800; color: var(--ink);
  margin: 14px 0 8px;
}
.hk-sec-lead { color: var(--ink-3); font-size: 16px; max-width: 46rem; margin: 0 0 32px; }

/* ============================================================
   04 · Buttons (UI-Kit) — Soft Neumorphism.
   Nur Tokens aus tokens.css; keine RGBA-Schatten, kein translateY.
   Ruhe = --shadow-raised, gedrueckt = --shadow-inset.
   Hover = Touch: auf Geraeten ohne Hover zeigt :active den
   Hover-Look (siehe @media (hover: none) am Dateiende).
   ============================================================ */
.hk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 15px;
  padding: 14px 26px; min-height: 48px;
  border-radius: 999px; text-decoration: none;
  background: var(--bg); color: var(--ink);
  box-shadow: var(--shadow-raised);
  transition: background .12s, box-shadow .12s;
}
/* Basis-Button: Hover -> warme gelbe Flaeche, saubere Token-Schatten */
@media (hover: hover) {
  .hk-btn:not(:disabled):hover { background: var(--yellow-soft); box-shadow: var(--shadow-raised); }
}
.hk-btn:not(:disabled):active { background: var(--yellow-soft); box-shadow: var(--shadow-inset); }

/* PRIMAER (z. B. „Weiter") */
.hk-btn-primary { background: var(--yellow); }
@media (hover: hover) {
  .hk-btn-primary:not(:disabled):hover { background: var(--yellow-soft); box-shadow: var(--shadow-raised); }
}
.hk-btn-primary:not(:disabled):active { background: var(--yellow); box-shadow: var(--shadow-inset-lg); }

/* DEAKTIVIERT — exakt nach UI-Kit (04 Buttons): eingedrueckt (--shadow-inset),
   keine Opacity. Keine Hover-/Touch-/Active-Reaktion — die Interaktions-Regeln
   oben tragen dafuer :not(:disabled).
   Reihenfolge: erst Basis/Sekundaer, danach Primaer, damit der Primaer-Button
   (Klassen hk-btn + hk-btn-primary) seinen Wert behaelt statt vom .hk-btn:disabled
   ueberschrieben zu werden (gleiche Spezifitaet -> Quellreihenfolge entscheidet). */
.hk-btn[disabled], .hk-btn:disabled {
  background: var(--surface-sub);
  color: var(--na);
  box-shadow: var(--shadow-inset);
  cursor: not-allowed;
  transform: none;
}
/* PRIMAER deaktiviert — gedaempftes Gelb (UI-Kit-Token) */
.hk-btn-primary[disabled], .hk-btn-primary:disabled {
  background: var(--yellow-muted);
  color: var(--yellow-muted-ink);
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-inset);
}

/* ---------- CTA-Button-Gruppe der Landingpages (fuer_*.html) ----------
   Nur Layout-Container; die Button-Optik kommt aus .hk-btn/.hk-btn-primary
   oben und bleibt unangetastet. Zentral hier statt inline pro Seite.
   Desktop: Zeile, Buttons nach Inhalt (kein Strecken), gleiche Hoehe.
   Mobil (<=600px): Spalte, Buttons volle Breite an gleicher linker Kante. */
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: stretch; }
.lp-cta .hk-btn { text-decoration: none; }
@media (max-width: 600px) {
  .lp-cta { flex-direction: column; align-items: stretch; }
  .lp-cta .hk-btn { width: 100%; }
}

/* ---------- Karten-Grid (Weiche, Bereiche, Für-wen) ---------- */
.hk-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 32px;
}
.hk-card {
  background: var(--bg);
  box-shadow: var(--shadow-raised);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--ink); text-decoration: none;
}
.hk-card-badge {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--surface-sub);
  box-shadow: var(--shadow-inset);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); margin-bottom: 4px;
}
.hk-card-name { font-size: 18px; font-weight: 800; line-height: 1.2; }
.hk-card-sub { font-size: 14px; color: var(--ink-3); }
/* Block-/Sektionsueberschrift innerhalb einer Profil-Karte (z. B.
   "Meine Therapiebereiche", "Berufsverband"). Vorher als Inline-style an den
   h2 dupliziert; hier als gemeinsame Kit-Klasse. Bewusst eigener Name statt
   .card-title, da diese lokal in dashboard/qrcode mit anderen Groessen belegt ist. */
.hk-card-title { font-size: 20px; font-weight: 500; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; }
/* Interaktive Kit-Karte (Neumorphismus): gemeinsame Ruhe-/Hover-/Aktiv-Regeln,
   damit pressbare Karten wie "Praxisprofil" dem UI-Kit folgen — zentral hier,
   nicht inline/Template. Klasse an das Karten-Element haengen. */
.hk-card-interactive {
  background: var(--bg);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-raised);
  color: var(--ink);
  font-family: var(--font);
  text-decoration: none;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Als Link (<a>) kein Blau/Unterstreichung — in allen Zustaenden und fuer
   alle Kind-Elemente (Titel, Beschreibung, Icon-Text). */
.hk-card-interactive:hover,
.hk-card-interactive:active,
.hk-card-interactive:focus { color: var(--ink); text-decoration: none; }
.hk-card-interactive * { color: var(--ink); text-decoration: none; }
/* Hover nur auf echten Hover-Geraeten: sonst "klebt" der Gelb-Zustand auf Touch
   nach dem Tap fest und ueberlebt die Zurueck-Navigation (Karte bliebe hellgelb). */
@media (hover: hover) {
  .hk-card-interactive:hover {
    background: var(--yellow-soft);
    box-shadow: 8px 10px 20px var(--nm-dark), -6px -6px 14px var(--nm-light);
  }
}
.hk-card-interactive:active {
  background: var(--yellow-soft);
  box-shadow: var(--shadow-inset-lg);
}
/* Touch (kein echter Hover): :active identisch zum Desktop-Druck — hellgelb +
   Inset. Bewusst NICHT wie :hover (raised), sonst ist der Druck auf Touch nicht
   vom klebenden Hover-Zustand zu unterscheiden und wirkt, als loese er nicht aus. */
@media (hover: none) {
  .hk-card-interactive:active {
    background: var(--yellow-soft);
    box-shadow: var(--shadow-inset-lg);
  }
}
/* Gemeinsame Icon-Scheibe fuer Karten (Praxisprofil-Karte + "Was die Praxis
   verlangt"). Immer hellgelb + eingesenkt (Inset); KEIN Zustands-Selektor, daher
   keine Reaktion auf Hover/Active/Touch. pointer-events:none -> nur die
   umgebende Karte ist klickbar. Selbsttragende Geometrie (runde Scheibe). */
.hk-icon-disc {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--yellow);
  box-shadow: inset 3px 3px 7px var(--nm-dark), inset -3px -3px 7px var(--nm-light);
  pointer-events: none;
}
.hk-icon-disc svg {
  width: 24px; height: 24px;
  stroke: var(--ink);
  stroke-width: 1.8;
  fill: none;
}

/* Bereichs-Umschalter auf /praxis/preise (Kit-Pillen). Verschoben aus dem
   lokalen <style> von preise.html; die BeihilfeDigital-Variante
   (templates/praxis/preise.html) bleibt unberuehrt. */
.bereich-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.bereich-tab {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 20px;
  border: none; border-radius: 22px;
  font-size: 15px; font-weight: 700;
  background: var(--mint); color: var(--ink);
  box-shadow: var(--shadow-raised-sm);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
/* Hover nur auf echten Hover-Geraeten (sonst klebt Graphit auf Touch). */
@media (hover: hover) {
  .bereich-tab:hover { background: var(--blue-graphite); color: #fff; box-shadow: var(--shadow-raised-sm); }
}
/* Ausgewaehlt: eingesenkt, kein Gelb. Nach :hover, damit der aktive Tab beim
   Hovern seinen Inset-Look behaelt. */
.bereich-tab.is-active { background: var(--blue-graphite); color: #fff; box-shadow: var(--shadow-inset-blue); }
/* Touch: :active wie der Desktop-Hover (Graphit + Weiss). */
@media (hover: none) {
  .bereich-tab:active { background: var(--blue-graphite); color: #fff; box-shadow: var(--shadow-raised-sm); }
}

/* kompaktere Karten (Bereiche, Für-wen) */
.hk-grid--compact .hk-card { padding: 18px 18px; min-height: 128px; }
.hk-grid--compact .hk-card-badge { width: 40px; height: 40px; border-radius: 10px; }
.hk-grid--compact .hk-card-name { font-size: 16px; }

/* ---------- Weiche — .feat-card-Muster (exakt aus UI-Kit) ---------- */
/* align-items: stretch -> beide Karten immer gleich hoch (so hoch wie die
   hoechste); keine feste height. Nebeneinander (Desktop) via Flexbox-Default. */
.featured-row { display: flex; align-items: stretch; gap: 20px; position: relative; }
.feat-backing { position: absolute; inset: 11px -10px 11px -10px; background: var(--yellow); z-index: 0; border-radius: var(--r-md); }
.feat-card { position: relative; z-index: 1; flex: 1; background: var(--bg); border-radius: var(--r-lg); padding: 20px 20px 18px; box-shadow: 0 3px 10px rgba(30,30,30,.12); transition: transform .14s ease, box-shadow .14s ease; cursor: pointer; text-decoration: none; color: inherit; }
.feat-card:hover { transform: translateY(-2px); background: var(--hover-soft); box-shadow: 0 12px 26px rgba(30,30,30,.22); }
.feat-card:active { transform: translateY(0) scale(.99); background: var(--yellow); box-shadow: var(--shadow-inset-lg); }
.feat-card.main { flex: 1.25; }
.card-label { font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.card-value { font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1.05; }
/* font-weight explizit 400: sonst erbt .card-sub das Gewicht des Karten-
   Elements — <a> traegt global a{font-weight:600} (tokens.css), <button> 400.
   Explizit setzen haelt die Zeile auf allen Seiten gleich duenn/leicht. */
.card-sub { font-size: 13px; font-weight: 400; color: var(--ink-3); margin-top: 5px; }

/* ---------- Problem (Beispiel-Panel) ---------- */
.hk-panel {
  background: var(--bg);
  box-shadow: var(--shadow-inset);
  border-radius: var(--r-md);
  padding: 30px 28px;
  margin-top: 32px;
}
.hk-flow {
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: 12px; margin-top: 4px;
}
.hk-flow-step {
  flex: 1 1 150px;
  background: var(--bg);
  box-shadow: var(--shadow-raised);
  border-radius: var(--r-sm);
  padding: 18px 20px;
}
.hk-flow-step .amt {
  font-size: 24px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.hk-flow-step.is-eigenanteil { box-shadow: var(--shadow-inset-lg); background: var(--hover-soft); }
.hk-flow-step.is-eigenanteil .amt { color: var(--active-ink); }
.hk-flow-step .cap {
  display: block; margin-top: 8px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-3);
}
.hk-flow-arrow {
  align-self: center; color: var(--ink-3);
  display: inline-flex; align-items: center;
}
.hk-flow-arrow .hk-icon { width: 1.5em; height: 1.5em; }

/* ---------- Interessenkonflikt ---------- */
.hk-disclosure {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--surface-sub);
  box-shadow: var(--shadow-inset-lg);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin-top: 24px;
  margin-bottom: 28px;
  color: var(--ink-2); font-size: 14.5px; line-height: 1.5;
}
/* Icon = erhabene Kit-Scheibe. Das .hk-icon IST das <svg> (kein Wrapper);
   die 25px-Glyphe entsteht aus 48px minus 2×11.5px Padding (vgl. hk-tipp-scheibe). */
.hk-disclosure .hk-icon {
  width: 48px; height: 48px; padding: 11.5px; box-sizing: border-box;
  flex-shrink: 0; border-radius: 50%;
  background: var(--bg); box-shadow: var(--shadow-raised-sm);
  stroke: var(--ink-3); stroke-width: 1.9; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Ab Desktop Icon & Text auf einer Linie; mobil bleibt Icon oben (flex-start). */
@media (min-width: 768px) {
  .hk-disclosure { align-items: center; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .hk-flow-arrow { transform: rotate(90deg); width: 100%; justify-content: center; }
  /* Gestapelt (Mobile): Grid mit grid-auto-rows: 1fr haelt beide Karten
     auf gleiche Hoehe (die hoehere zieht die andere mit) — ohne feste height. */
  .featured-row { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 14px; }
  .featured-row .feat-card,
  .featured-row .feat-card.main { flex: none; width: 100%; }
  .featured-row .feat-backing { inset: -10px 11px; }
  /* Titel/Lead auf denselben linken Einzug wie der Karten-Text (feat-card padding-left: 20px) */
  .hk-sec-title,
  .hk-sec-lead { padding-left: 20px; }
  /* Touch: kein Hover — Hover-Look aus dem Kit via :active zeigen (Klickbarkeit) */
  .feat-card:active {
    transform: translateY(-2px);
    background: var(--hover-soft);
    box-shadow: 0 12px 26px rgba(30,30,30,.22);
  }
}

/* ============================================================
   Touch = Druck fuer Buttons: Geraete ohne Hover zeigen beim
   Antippen (:active) den GEDRUECKTEN Kit-Look (eingedrueckt,
   Inset-Schatten) — identisch zum Maus-:active. Der Beruehrt-
   Zustand (helles Gelb erhaben) kommt aus der hover:hover-Regel
   oben und bleibt davon unberuehrt.
   Gilt fuer Basis .hk-btn und die Primaer-Variante.
   ============================================================ */
@media (hover: none) {
  .hk-btn:not(:disabled):active {
    background: var(--yellow-soft);
    box-shadow: var(--shadow-inset);
  }
  .hk-btn-primary:not(:disabled):active {
    background: var(--yellow);
    box-shadow: var(--shadow-inset-lg);
  }
}

/* ============================================================
   Transparenz-Zeilenliste (loest die Punkte-Matrix ab):
   Schloss-Icon + Fuellbalken (Meter) + Name/Untertitel.
   Gleiche Jinja-Logik (z.spalte 1/2/3, z.stern). Nur Tokens
   aus tokens.css — keine eigenen Farb-/Schatten-Werte.
   ============================================================ */
.trow-transp { display:flex; flex-direction:column; gap:0; margin-top:24px; }
.trow-transp .trow { display:flex; align-items:center; gap:16px; padding:15px 6px; border-bottom:1px solid var(--surface-sub); }
.trow-transp .trow:last-child { border-bottom:none; }
.trow-transp .t-ico { width:42px; height:42px; border-radius:50%; flex-shrink:0; background:var(--surface-sub); box-shadow:var(--shadow-inset); display:flex; align-items:center; justify-content:center; }
.trow-transp .t-ico svg { width:22px; height:22px; stroke:var(--ink-2); stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.trow-transp .t-meter { display:inline-flex; gap:5px; flex-shrink:0; }
.trow-transp .t-seg { width:24px; height:11px; border-radius:3px; background:var(--surface-sub); box-shadow:var(--shadow-inset); }
.trow-transp .t-seg.on { background:var(--active); box-shadow:var(--shadow-raised-sm); }
.trow-transp .t-text { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.trow-transp .t-name { font-size:16px; font-weight:800; color:var(--ink); }
.trow-transp .t-sub { font-size:13px; color:var(--ink-2); }
@media (max-width:560px) { .trow-transp { padding-left: 20px; } .trow-transp .trow { flex-wrap:wrap; } .trow-transp .t-text { flex-basis:100%; } }

/* ============================================================
   Float-Label-Felder (.fl-field) — Banking-App-Stil: das Label
   schwebt bei Fokus/Ausfuellen nach oben. Nur Tokens aus tokens.css.
   Voraussetzung im Markup: <input> MUSS vor dem <label> stehen
   (Geschwister-Selektor input:not(:placeholder-shown) + label) und
   placeholder=" " tragen, damit :placeholder-shown greift.
   ============================================================ */
.fl-field { position: relative; min-width: 0; }
.fl-field + .fl-field { margin-top: 14px; }
.fl-field input {
  font-family: var(--font); font-size: 17px; color: var(--ink);
  background: var(--bg); border: none; border-radius: var(--r-sm);
  padding: 23px 16px 9px; width: 100%; box-shadow: inset 3px 3px 6px var(--nm-dark), inset -2px -2px 5px var(--nm-light); caret-color: var(--active);
}
.fl-field:not(.is-error):not(.is-valid) input:focus { outline: none; box-shadow: var(--shadow-inset), 0 0 0 1.5px var(--active); }
.fl-field label {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--na); font-size: 16px; pointer-events: none; white-space: nowrap;
  transition: top .15s, font-size .15s, color .15s, transform .15s;
}
.fl-field input:focus + label,
.fl-field input:not(:placeholder-shown) + label {
  top: 9px; transform: none; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink-3);
}
.fl-field input:-webkit-autofill + label {
  top: 9px; transform: none; font-size: 11px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3);
}
@media (hover: hover) {
  .fl-field:not(.is-error):not(.is-valid) input:hover:not(:focus):not(:disabled) { box-shadow: var(--shadow-inset), 0 0 0 1px rgba(51,55,62,.28); }
}
.fl-field:not(.is-error):not(.is-valid) input:active:not(:focus):not(:disabled) { box-shadow: var(--shadow-inset), 0 0 0 1px rgba(51,55,62,.28); }
@media (hover: none) {
  .fl-field:not(.is-error):not(.is-valid) input:active:not(:focus):not(:disabled) { box-shadow: var(--shadow-inset), 0 0 0 1px rgba(51,55,62,.28); }
}
.fl-field.is-error input { box-shadow: var(--shadow-inset), 0 0 0 1.5px var(--orange); padding-right: 46px; }
.fl-field.is-error input:focus { outline: none; box-shadow: var(--shadow-inset), 0 0 0 1.5px var(--orange); }
.fl-field.is-valid input:focus { outline: none; box-shadow: var(--shadow-inset), 0 0 0 1.5px var(--green); }
/* Autofill (Chrome) uebermalt den Ring per !important (tokens.css). Hoehere
   Spezifitaet + !important holt Fehler-/Gueltig-Ring zurueck; --bg-Fuellung bleibt. */
.fl-field.is-error input:-webkit-autofill,
.fl-field.is-error input:-webkit-autofill:hover,
.fl-field.is-error input:-webkit-autofill:focus {
  box-shadow: var(--shadow-inset), 0 0 0 1000px var(--bg) inset, 0 0 0 1.5px var(--orange) !important;
}
.fl-field.is-valid input:-webkit-autofill,
.fl-field.is-valid input:-webkit-autofill:hover,
.fl-field.is-valid input:-webkit-autofill:focus {
  box-shadow: var(--shadow-inset), 0 0 0 1000px var(--bg) inset, 0 0 0 1.5px var(--green) !important;
}
/* Warndreieck: vertikal mittig in der Feldhoehe (top:50% + translateY), rechter
   Slot deckungsgleich mit .fl-clear/Auge (dort right:7px, 40px breit -> Mitte bei
   27px; das 22px-Icon bei right:16px hat dieselbe Mitte -> kein Springen beim
   Wechsel Warndreieck <-> Kreuz). */
.fl-field .err-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; pointer-events: none; }
.fl-field .err-icon svg { width: 22px; height: 22px; stroke: var(--orange); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   Universelle Fehler-Mechanik (.fl-field.is-error) — global fuer JEDES
   Formularfeld auf jeder Seite, die components.css laedt. Kit-Verhalten:
   sobald ein .fl-field die Klasse .is-error traegt, erscheinen automatisch
   (a) der orange Rahmen (oben, Regel .fl-field.is-error input),
   (b) das Warndreieck-Icon rechts (.err-icon) und
   (c) der Fehler-Hinweistext darunter (.field-hint).
   Pro Feld muss man also nur .is-error setzen + den Hint-Text fuellen.

   KEIN Pflicht-JS: Das Aufdecken verlangt :not([hidden]); Seiten mit eigener
   Steuerung ueber das [hidden]-Attribut (z. B. widerruf_erklaeren.html mit
   Icon-Slot-Priorisierung) behalten die volle Kontrolle und bleiben unberuehrt.
   ============================================================ */
/* Warndreieck: standardmaessig aus. Icon-Slot-Prioritaet nach Kit/Alfa/T-J:
   Hat das Feld Text, gewinnt IMMER das Kreuz (.fl-clear) — auch bei Fehler und
   ausserhalb des Fokus. Das Warndreieck erscheint nur, wenn KEIN sichtbares
   Kreuz da ist (Feld leer oder Feld ohne .fl-clear, z. B. Passwort). So bleibt
   stets nur EIN Icon im rechten Slot. */
.fl-field .err-icon { display: none; }
.fl-field.is-error:not(:focus-within):not(:has(> .fl-clear:not([hidden]))) .err-icon:not([hidden]) { display: block; }
/* Fehler-Hinweistext (im .fl-field): aus, bis .is-error am Feld steht. Kit-Ton
   --orange-text/#B5471A (als Text AA-tauglich, dunkler als der --orange-Rahmen/Icon).
   WICHTIG absolut/aus dem Fluss (top:100%, direkt unter dem Feld): ein in-flow
   Hint vergroessert sonst die .fl-field-Hoehe -> top:50% der Icons zentriert
   dann auf den hoeheren Container und drueckt err-icon/fl-clear nach unten.
   Absolut positioniert bleibt die Feldhoehe = Input-Hoehe -> alle Icons (Auge,
   Kreuz, Warndreieck) stehen exakt mittig. */
.fl-field .field-hint { display: none; position: absolute; top: 100%; left: 0; right: 0; color: var(--orange-text, #B5471A); font-weight: 600; font-size: 13px; line-height: 1.35; margin-top: 6px; }
.fl-field.is-error .field-hint:not([hidden]) { display: block; }
/* Platz fuer den absoluten Hint reservieren (nur Felder mit eigenem Hint im
   Fehlerzustand), damit er das Folgeelement nicht ueberlappt. 42px = zwei
   Zeilen (line-height 1.35) plus margin-top, ohne Ueberlappung. */
.fl-field.is-error:has(> .field-hint) { margin-bottom: 42px; }

/* Ergaenzung: fehlende .fl-field-Zustaende 1:1 aus UI-Kit (05 Formelemente) */
.fl-field.is-valid input { box-shadow: var(--shadow-inset), 0 0 0 1.5px var(--green); padding-right: 46px; }
.fl-field .ok-icon { position:absolute; right:14px; top:50%; transform:translateY(-50%); width:22px; height:22px; pointer-events:none; }
.fl-field .ok-icon svg { width:22px; height:22px; stroke:var(--green); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.fl-field.is-valid.has-clear input { padding-right: 78px; }
.fl-field.is-valid .ok-icon { right: 52px; }
.field-hint.is-error { color:var(--red); font-weight:600; display:block; margin-top:6px; }
.fl-field.has-clear input { padding-right:48px; }
/* Automatisches Kreuz (validate.js setzt kein .has-clear): sobald ein sichtbares
   .fl-clear im Feld steht, rechts Platz schaffen, damit Text nicht darunter
   laeuft. 46px analog zu .is-valid/.is-error. Bei Fehler zeigt das Kit immer nur
   EIN Icon im rechten Slot (Warndreieck ODER Kreuz), 46px reichen also auch dann. */
.fl-field:has(> .fl-clear:not([hidden])) input { padding-right: 46px; }
.fl-clear { position:absolute; right:7px; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:none; background:transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-3); -webkit-tap-highlight-color:transparent; transition:background .15s, color .15s; }
.fl-clear svg { width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
@media (hover: hover) { .fl-clear:hover { background: var(--hover-soft); color: var(--ink); } }
.fl-clear:active { background: var(--hover-soft); color: var(--ink); }
@media (hover: none) {
  .fl-clear:active { background: var(--hover-soft); color: var(--ink); }
}
.fl-clear[hidden] { display:none; }
.fl-field.is-error .fl-clear { color: var(--ink-3); }
.fl-clear::before { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; }
.fl-field.is-disabled input { opacity:.55; cursor:not-allowed; color:var(--na); }
.fl-field.is-readonly input { padding-right:46px; cursor:default; color:var(--ink-2); }
.fl-field .lock-icon { position:absolute; right:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; pointer-events:none; }
.fl-field .lock-icon svg { width:20px; height:20px; stroke:var(--ink-3); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.fl-field.has-icon-left input { padding-left:46px; }
.fl-field.has-icon-left label { left:46px; }
.fl-field .ico-left { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; pointer-events:none; color:var(--ink-3); }
.fl-field .ico-left svg { width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* Passwort-Auge (.fl-eye) — 1:1 aus UI-Kit (05 Formelemente). Umschalten per JS
   (Klasse .is-on am Button, nicht per id → funktioniert auf mehreren Feldern).
   .is-on = Passwort verborgen → durchgestrichenes Auge (.eye-off) sichtbar. */
.fl-field.has-eye input { padding-right: 48px; }
.fl-eye { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s; }
.fl-eye svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fl-eye .eye-off { display: none; }
.fl-eye.is-on .eye-open { display: none; }
.fl-eye.is-on .eye-off { display: inline; }
@media (hover: hover) { .fl-eye:hover { background: var(--hover-soft); color: var(--ink); } }
.fl-eye:active { background: var(--hover-soft); color: var(--ink); }
/* Bei Fehler (ungefokussiert) weicht das Auge dem Warndreieck — wie .fl-clear. */
.fl-field.is-error:not(:focus-within) .fl-eye { display: none; }

/* Neutrale Feld-Hinweiszeile — kein Kit-Pendant (.field-hint ist rot/nur bei
   Fehler). Als GESCHWISTER nach .fl-field, sonst bricht die 50%-Zentrierung
   von Label/Auge. Bei Fehler weicht der neutrale Hint dem roten field-hint. */
.fl-hint { display: block; font-size: 13px; color: var(--ink-3); margin-top: 6px; }
/* Hint unter einer Checkbox-Zeile: an der Label-Textlinie ausrichten.
   38px = .check-box (26px) + gap (12px) der .check-row. Wiederverwendbar. */
.fl-hint--checkbox { margin-left: 38px; }
.fl-hint + .fl-field { margin-top: 14px; }
.fl-field.is-error + .fl-hint { display: none; }

/* ============================================================
   Formular-Vertikalrhythmus — GEMEINSAM fuer die Praxis-Registrierung
   (/praxis/registrierung, standalone) und das Praxisprofil (/praxis/profil,
   im .hk-portal). Beide Seiten beziehen Reihen-, Zeilen- und Button-Abstand
   AUSSCHLIESSLICH von hier, damit sie identisch aussehen und an EINER Stelle
   gepflegt werden. (Der Name .field bleibt bewusst seiten-lokal — er ist
   projektweit anders belegt; nur die eindeutig benannten Regeln sind geteilt.)
   minmax(0,…): sonst blockt die min-content-Breite der Felder das Schrumpfen
   und sprengt die Reihe auf 320–375px. field-row: Oberkanten buendig, darum
   kein .fl-field+.fl-field-14px INNEN. ============================================================ */
.field-row { display: grid; grid-template-columns: minmax(0,140px) minmax(0,1fr); gap: 12px; align-items: start; margin-top: 14px; margin-bottom: 8px; }
.field-row .fl-field { position: relative; }
.field-row .fl-field + .fl-field { margin-top: 0; }
.field-row .field-hint,
.field-row .fl-hint { white-space: normal; line-height: 1.35; margin-top: 6px; }
.field-row .fl-field input,
.field-row .fl-field .input-look { min-height: 58px; }
.row-hint { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
/* Abstand Formularende -> primaerer Absende-Button. */
.reg-submit { display: block; margin: 12px auto 0; min-width: 260px; }
@media (max-width: 600px) { .reg-submit { width: 100%; } }

/* Zurueck-Link im Praxis-Portal — einheitlich wie die Rechtstext-Links im
   Footer: Ruhe grau, hover UND Touch blau mit Unterstreichung. */
.back-link { color: var(--ink-3); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.back-link:hover,
.back-link:active { color: var(--blue-ink); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
@media (hover: none) { .back-link:active { color: var(--blue-ink); text-decoration: underline; text-decoration-color: currentColor; } }
.back-link svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ===== Formular-Sammelmeldung (.form-summary) — 1:1 aus UI-Kit (11 · 5 ·
   Zusammenfassung/Banner oben am Formular). rgba/#fff sind Kit-Werte (Alpha-
   Varianten von --orange/--red bzw. Weiss), keine erfundenen Farben. ===== */
.form-summary { position: relative; border-radius: var(--r-md); background: rgba(233,111,56,.08); border: 1px solid rgba(233,111,56,.30); padding: 20px 22px; }
.fs-head { display: flex; align-items: center; gap: 14px; }
.fs-text { font-size: 13px; font-weight: 400; line-height: 1.5; }
.fs-title { font-size: 16.5px; font-weight: 800; color: var(--ink); }
.fs-list { list-style: none; margin: 14px 0 0; padding-left: 62px; display: flex; flex-direction: column; gap: 11px; }
.fs-list li { font-size: 15px; color: var(--ink-2); position: relative; }
.fs-list li::before { content: ""; position: absolute; left: -18px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.fs-list b { color: var(--ink); font-weight: 700; }
.fs-link { color: var(--red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(139,26,26,.45); font-weight: 600; cursor: pointer; border-radius: 5px; padding: 2px 5px; margin: -2px -5px; transition: background .12s, color .12s; }
@media (hover: hover) { .fs-link:hover { background: var(--yellow-soft); color: var(--red); text-decoration-color: var(--red); } }
.fs-link:active { background: var(--yellow-soft); color: var(--red); text-decoration-color: var(--red); }
@media (hover: none) {
  .fs-link:active { background: var(--yellow-soft); color: var(--red); text-decoration-color: var(--red); }
}
/* Icon-Scheibe (Kit) — nur die im Banner genutzten Varianten inset + warn */
.note-disc { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.note-disc svg { width: 25px; height: 25px; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.note-disc.inset { background: var(--surface-sub); box-shadow: var(--shadow-inset); }
.note-disc.warn svg { stroke: var(--orange); }
.note-disc.success svg { stroke: #157538; }

/* ===== Buttons — 1:1 aus UI-Kit (04 Buttons) ===== */
/* .btn-primary = Alias fuer Praxis-Portal-Seiten: deren Buttons tragen nur die
   Klasse .btn-primary (kein .btn / .btn-primary-yellow) und erben hierueber das
   Box-Modell UND alle Kit-Zustaende (hover/active/disabled). */
.btn, .btn-primary{font-family:var(--font);font-size:16px;font-weight:700;border:none;cursor:pointer;text-decoration:none;padding:0 22px;height:52px;min-width:200px;border-radius:22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:box-shadow .15s,transform .05s;}
.btn-primary-yellow, .btn-primary{background:var(--yellow);color:var(--ink);box-shadow:var(--shadow-raised-sm);transition:background .15s,box-shadow .15s;}
.btn-primary-yellow:hover:not(:disabled), .btn-primary:hover:not(:disabled){background:var(--yellow-soft);box-shadow:5px 5px 12px var(--nm-dark),-4px -4px 10px var(--nm-light);}
.btn-primary-yellow:disabled, .btn-primary:disabled, .btn-primary[disabled]{background:var(--yellow-muted);color:var(--yellow-muted-ink);cursor:not-allowed;box-shadow:var(--shadow-inset);}
.btn-secondary{background:var(--bg);color:var(--ink);border:none;box-shadow:var(--shadow-raised-sm);}
.btn-secondary:hover:not(:disabled){background:var(--yellow-soft);box-shadow:5px 5px 12px var(--nm-dark),-4px -4px 10px var(--nm-light);}
.btn-secondary:disabled{background:var(--surface-sub);color:var(--na);box-shadow:var(--shadow-inset);cursor:not-allowed;}
@media (hover:none){
  /* Sticky-Hover auf Touch vermeiden: :hover auf Ruhezustand zuruecksetzen.
     Der Gedrueckt-Look kommt aus der EINZIGEN :active-Regel NACH diesem Block
     (yellow + shadow-inset-lg) und greift auf Maus UND Touch identisch. */
  .btn-primary-yellow:hover:not(:disabled), .btn-primary:hover:not(:disabled){background:var(--yellow);box-shadow:var(--shadow-raised-sm);}
  .btn-secondary:hover:not(:disabled){background:var(--bg);box-shadow:var(--shadow-raised-sm);}
}
/* Gedrueckt-Look (Kit "eingedrueckt/Inset"). MUSS nach dem @media(hover:none)-
   Hover-Reset stehen: bei Touch feuern :hover (sticky) UND :active gleichzeitig,
   gleiche Spezifitaet (0,3,0) -> die spaetere Regel gewinnt. Frueher lag :active
   VOR dem Reset und wurde auf Touch ueberschrieben -> kein Druck-Feedback.
   Ungegatet -> greift auf Maus UND Touch, auf allen Portal-Seiten. */
.btn-primary-yellow:active:not(:disabled), .btn-primary:active:not(:disabled){background:var(--yellow);box-shadow:var(--shadow-inset-lg);}
/* .btn-secondary: gleicher Grund wie oben — die :active-Regel MUSS NACH dem
   @media(hover:none)-Hover-Reset stehen, sonst ueberschreibt der klebende
   :hover auf Touch den Druck und es gibt kein Gedrueckt-Feedback. */
.btn-secondary:active:not(:disabled){background:var(--yellow-soft);box-shadow:var(--shadow-inset);}
/* Preise-speichern-Button (heilmittelklar/preise.html): Kit-Optik der gelben
   Hauptaktion. Eigene Klasse (nicht .btn-primary-yellow), weil Touch-:active
   hier BEWUSST hellgelb wie Hover ist (nicht der Gedrueckt-Look der geteilten
   Kit-Regel). Breite/Zentrierung liefert das Template lokal. */
.btn-save {
  background: var(--yellow); color: var(--ink);
  box-shadow: var(--shadow-raised-sm);
  border: none; height: 52px; border-radius: 22px;
  font-family: var(--font); font-size: 16px; font-weight: 700;
  cursor: pointer; transition: background .15s, box-shadow .15s;
}
.btn-save:hover:not(:disabled) { background: var(--yellow-soft); box-shadow: 5px 5px 12px var(--nm-dark), -4px -4px 10px var(--nm-light); }
.btn-save:active:not(:disabled) { background: var(--yellow); box-shadow: var(--shadow-inset-lg); }
/* Touch: :active MUSS der Gedrueckt-Look sein (satteres Gelb + inset-lg), klar
   unterscheidbar vom hellgelben, klebenden :hover-Beruehrtzustand. MUSS nach
   .btn-save:hover UND der Basis-:active-Regel stehen: bei Touch feuern :hover
   (sticky) und :active gleichzeitig, gleiche Spezifitaet -> spaetere gewinnt. */
@media (hover: none) {
  .btn-save:active:not(:disabled) { background: var(--yellow); box-shadow: var(--shadow-inset-lg); }
}
/* Praxis-Portal (alle .hk-portal-Seiten): Formular-Submit-Buttons folgen der
   Kit-Breite — inhaltsbreit mit min-width 200px und mittig in ihrer Umgebung,
   statt kartenbreit. Hoehere Spezifitaet (0,2,0) ueberschreibt lokale
   .btn-primary{width:100%}-Regeln einzelner Portal-Templates (z. B. profil.html).
   Unter 520px volle Breite. Wirkt nur im eingeloggten Portal, nicht auf den
   Auth-Seiten (die liegen ausserhalb von .hk-portal). */
.hk-portal .btn-primary{display:flex;width:fit-content;min-width:200px;margin-left:auto;margin-right:auto;}
@media (max-width:520px){
  .hk-portal .btn-primary{width:100%;min-width:0;}
  /* PLZ + Ort: auf schmalem Screen einspaltig untereinander, jedes volle
     Breite, Abstand 14px wie zwischen den uebrigen Feldern. */
  .field-row{grid-template-columns:1fr;gap:14px;}
}
.btn-chev{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* Ladespinner im Absende-Button (validate.js setzt ihn beim Submit). Farbe
   erbt via currentColor die gedaempfte Button-Schrift, keine eigene Farbe. */
.btn-spinner{width:18px;height:18px;flex:none;animation:hk-spin .8s linear infinite;}
@keyframes hk-spin{to{transform:rotate(360deg);}}
.eingabe-nav{
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  gap:16px;
  margin-top:32px;
}
/* Beide Nav-Buttons exakt gleiche Ober-/Unterkante: identische Hoehe (.btn 52px),
   keine Einzel-Margins, gemeinsame Streckung statt zentrierter Ausrichtung. */
.eingabe-nav .btn{align-self:stretch;margin:0;}
@media (max-width:420px){
  .eingabe-nav .btn{min-width:0;flex:1 1 0;padding:0 14px;}
}

/* ===== Radio-Auswahl — aus UI-Kit, adaptiert auf echte input[type=radio]
   ohne JS (Zustand via :has(input:checked)). Neumorph wie .btn/.note-disc. ===== */
.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-group.row { flex-direction: row; gap: 12px; align-items: stretch; }
@media (max-width: 560px) {
  .radio-group.row { flex-direction: column; }
}
.radio {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0; min-height: 52px; padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--bg);
  box-shadow: var(--shadow-raised-sm);
  font-size: 16px; font-weight: 600; color: var(--ink-2);
  cursor: pointer;
  transition: background .12s, box-shadow .12s, color .12s;
}
.radio input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.radio-dot {
  position: relative; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-sub);
  box-shadow: var(--shadow-inset);
  transition: background .12s, box-shadow .12s;
}
.radio:has(input:checked) {
  color: var(--ink); font-weight: 700;
}
.radio:has(input:checked) .radio-dot {
  background: var(--active);
  box-shadow: var(--shadow-raised-sm);
}
.radio:has(input:checked) .radio-dot::after {
  content: ""; position: absolute; inset: 7px;
  border-radius: 50%; background: #fff;
}
@media (hover: hover) {
  .radio:has(input:not(:checked)):hover { background: var(--yellow-soft); }
}
.radio:has(input:not(:checked)):active { box-shadow: var(--shadow-inset); }
.radio:has(input:focus-visible) { outline: 2px solid var(--active); outline-offset: 2px; }
.radio-txt small { display: block; font-size: 14px; font-weight: 400; color: var(--ink-3); }

/* ===== Formular-Sektion (.form-section) — Rahmen für Kicker (ÜBER der Nische)
   + Nische. Selbst ohne Optik; hält nur den Abstand zwischen den Blöcken. ===== */
.form-section {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}
/* Formular-Nische (.form-block) — vertiefte neumorphe Fläche aus UI-Kit,
   ersetzt die klassische fieldset-Kontur. Enthält NUR die Felder. */
.form-block {
  background: var(--bg);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-inset);
  padding: 20px var(--block-pad, 20px);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Sektions-Kicker (UI-Kit): steht als eigene Kopfzeile ÜBER der Nische
   (fieldset-legend hat Sonderverhalten → display:block). */
.kicker {
  display: block;
  width: 100%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
  padding: 0;
  float: none;
}

/* ===== Kopf — Wortmarke / Bildmarke (aus base_heilmittelklar.html ausgelagert) =====
   Bildmarke "Hk" 1:1 aus UI-Kit (BRAND/HEADER), OHNE .bm-disc. 28px an Header-Hoehe
   angepasst. Standardmaessig aus; Umschaltung Wortmarke<->Bildmarke bei <365px:
   UNTER 365px nur kompakte Bildmarke, volle Wortmarke raus (display:none ->
   Screenreader liest den Markennamen nur EINMAL). AB 365px umgekehrt. */
.bildmarke { display: inline-flex; align-items: baseline; font-weight: 800; letter-spacing: 0; line-height: 1; color: var(--ink); font-size: 28px; }
.bildmarke .bm-gl { display: inline-block; }
.bildmarke .bm-line { display: inline-block; width: .13em; height: .70em; background: var(--yellow); border-radius: .05em; margin: 0 .045em; }
/* Nur umschalten, wenn die Brand-Link auch eine Wortmarke hat (Portal-Kopf).
   Login nutzt .hk-brand-link mit NUR Bildmarke → bleibt auf allen Breiten sichtbar. */
.hk-brand-link:has(.hk-wordmark) .bildmarke { display: none; }
@media (max-width: 364.98px) {
  .hk-brand-link:has(.hk-wordmark) .hk-wordmark { display: none; }
  .hk-brand-link:has(.hk-wordmark) .bildmarke { display: inline-flex; }
}

/* Konto-/Anmelden-Disc (.ic-disc) — aus base_heilmittelklar.html hierher
   verschoben, damit die runde Icon-Scheibe auch auf den Praxis-Seiten
   (dashboard u. a.) greift, die base_heilmittelklar NICHT erben. */
.hk-nav .btn-primary-yellow,
.hk-nav .ic-disc { box-shadow: var(--shadow-raised-sm); transition: box-shadow .12s, background .12s, color .12s, transform .1s; }
.hk-nav .ic-disc { width: 44px; height: 44px; min-height: 44px; padding: 0; border: none; border-radius: 50%; justify-content: center; flex: 0 0 auto; background: var(--bg); color: var(--active); }
.hk-nav .ic-disc .hk-icon { width: 22px; height: 22px; }
@media (hover: hover) { .hk-nav a.ic-disc:hover { background: var(--yellow-soft); box-shadow: 7px 7px 16px var(--nm-dark), -6px -6px 13px var(--nm-light); } }
.hk-nav a.ic-disc:active { background: var(--yellow-soft); box-shadow: var(--shadow-inset); }

/* Sekundaer-Button in der Kopf-Nav (z. B. „Abmelden" im Praxis-Portal).
   Form (Hoehe, Padding, Radius) kommt wie beim gelben Hauptbutton aus der
   .hk-nav a-Basis in tokens.css — hier NUR Farbe und Zustaende. */
.hk-nav .btn-secondary { background: var(--bg); color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.hk-nav .btn-secondary:hover:not(:disabled) { background: var(--yellow-soft); color: var(--ink); box-shadow: 7px 7px 16px var(--nm-dark), -6px -6px 13px var(--nm-light); }
.hk-nav .btn-secondary:active:not(:disabled) { background: var(--yellow-soft); transform: none; box-shadow: var(--shadow-inset); }

/* Innere Inhaltsspalte des Portals — deckungsgleiche Breite mit .hk-header-inner
   (beide max-width: var(--content-width) + margin:auto), damit die linke Kante
   von Logo/Nav und Seiteninhalt fluchtet. */
.hk-portal { max-width: var(--content-width); margin: 0 auto; }

/* Mobile Kopf-Regeln — aus base_heilmittelklar.html hierher verschoben, damit
   sie auch auf den Praxis-Seiten greifen (die base_heilmittelklar NICHT erben).
   NUR Kopf: kleineres Logo, Nav-Umbruchschutz, straffere Button-Paddings. */
@media (max-width: 600px) {
  .hk-nav { gap: 8px; flex-wrap: nowrap; }
  /* Logo kleiner; gelber Unterstrich bei „klar" bleibt (tokens .klar::after) */
  .hk-wordmark { font-size: 20px; }
}
@media (max-width: 560px) {
  .hk-nav .btn-primary-yellow {
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (max-width: 400px) {
  .hk-header-inner { gap: 8px; }        /* Basis 16px aus tokens.css */
  .hk-nav { gap: 6px; }                 /* Basis 8px aus @600px */
  .hk-nav .btn-primary-yellow {
    padding-left: 6px;
    padding-right: 6px;
  }
  .hk-nav .btn-primary-yellow .hk-icon { display: none; }
}

/* ===== Checkbox (aus UI-Kit adaptiert) =====
   Kit nutzt <button aria-checked>; hier auf echtes <input type="checkbox">
   umgebaut (formularfähig, OHNE JS). Zustand über :has(input:checked). */
.check-row { display: flex; align-items: center; gap: 12px; }
.check-row + .check-row { margin-top: 12px; }
/* Lange, mehrzeilige Labels (Consent-Absätze): Box oben statt vertikal
   zentriert. Wiederverwendbar auf allen Seiten, die das Kit laden. */
.check-row.is-multiline { align-items: flex-start; }

/* Wrapper-Label: visuell verstecktes input + sichtbare .check-box */
.check { display: inline-flex; cursor: pointer; }
.check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.check-box {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  border: none;
  background: var(--surface-sub);
  box-shadow: inset 3px 3px 7px var(--nm-dark),
              inset -3px -3px 6px #ffffff,
              inset 0 0 0 1px rgba(0,0,0,.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  position: relative;
  cursor: pointer;
}
/* unsichtbare 44px-Touch-Zielfläche */
.check-box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.check-box svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

/* Zustand: ausgewählt */
.check:has(input:checked) .check-box {
  background: var(--active);
  box-shadow: var(--shadow-raised-sm);
}
.check:has(input:checked) .check-box svg { opacity: 1; }

/* Fokus-Ring (Tastatur) */
.check:has(input:focus-visible) .check-box {
  outline: 2px solid var(--active);
  outline-offset: 2px;
}

/* Hover: nur auf echten Hover-Geräten, nur unausgewählt und nicht disabled */
@media (hover: hover) {
  .check:has(input:not(:checked):not(:disabled)) .check-box:hover {
    background: var(--yellow-soft);
  }
}
/* Active: OHNE Media-Query — Eingedrückt-Feedback auf Maus UND Touch */
.check:has(input:not(:disabled)) .check-box:active {
  background: var(--yellow-soft);
  box-shadow: var(--shadow-inset), inset 0 0 0 1px rgba(0,0,0,.45);
}

/* Fehlerzustand */
.check-box.is-error,
.check.is-error .check-box {
  box-shadow: inset 3px 3px 7px var(--nm-dark),
              inset -3px -3px 6px #ffffff,
              0 0 0 1.5px var(--orange);
}

/* Disabled */
.check:has(input:disabled) {
  opacity: .5;
  cursor: not-allowed;
}
.check:has(input:disabled) .check-box { cursor: not-allowed; }

.check-label { font-size: 16px; color: var(--ink-2); }

/* Gruppen-Fehler: EINE dezente orange Kontur um eine ganze Feldgruppe (z.B. die
   Therapiebereich-Checkboxen), statt jedes Element einzeln zu markieren. Der
   Fehlertext steht wie gehabt separat darunter. Ring wie .check/.select is-error
   (kein Layout-Shift durch box-shadow); Padding gibt der Gruppe etwas Luft.
   Wiederverwendbar auf beliebigen Gruppen-Containern. */
.group-error {
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1.5px var(--orange);
  padding: 12px;
}

/* ===== Dropdown / Auswahlliste (aus UI-Kit) =====
   Custom-Select mit Floating-Label, Chevron, Panel + Optionen. Interaktion
   (öffnen/schließen, Tastatur, is-open/is-flip/is-active) kommt aus JS/Markup;
   hier nur die Optik. Alle Werte 1:1 aus dem Kit. */
.select { position: relative; }
.select-trigger {
  font-family: var(--font);
  font-size: 17px;
  color: var(--ink);
  text-align: left;
  background: var(--bg);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 23px 48px 9px 16px;
  width: 100%;
  min-height: 58px;
  box-shadow: inset 3px 3px 6px var(--nm-dark), inset -2px -2px 5px var(--nm-light);
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .15s;
  min-width: 0;
}
.select-value { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select.is-placeholder .select-value { color: var(--na); }
.select-label {
  position: absolute;
  left: 16px;
  top: 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
  white-space: nowrap;
}
.select-chev {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
  color: var(--ink-3);
  transition: transform .2s;
}
.select-chev svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.select.is-open .select-chev { transform: translateY(-50%) rotate(180deg); }
.select.is-open .select-trigger { box-shadow: var(--shadow-inset), 0 0 0 1.5px var(--active); }
.select-trigger:focus-visible { outline: none; box-shadow: var(--shadow-inset), 0 0 0 1.5px var(--active); }
.select-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 8px;
  box-shadow: 6px 8px 20px var(--nm-dark), -5px -5px 14px var(--nm-light), 0 0 0 1px rgba(0,0,0,.06);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Vertikaler Abstand zwischen den Dropdown-Punkten (nur Desktop-Panel;
     die mobile .sheet-list nutzt ihren eigenen gap). */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.select-panel[hidden] { display: none; }
.select.is-flip .select-panel { top: auto; bottom: calc(100% + 8px); }
.select-option {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink-2);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 9px;
  padding: 0 12px;
  min-height: 46px;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s;
}
.select-option .opt-check { width: 18px; height: 18px; flex-shrink: 0; margin-left: auto; opacity: 0; }
.select-option .opt-check svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.select-option[aria-selected="true"] { background: var(--active); color: #fff; font-weight: 700; }
.select-option[aria-selected="true"] .opt-check { opacity: 1; }
.select-option.is-active:not([aria-selected="true"]):not([aria-disabled="true"]) { background: var(--yellow-soft); }
@media (hover: hover) { .select .select-option:hover:not([aria-selected="true"]):not([aria-disabled="true"]) { background: var(--yellow-soft); color: var(--ink); } }
.select .select-option:active:not([aria-selected="true"]):not([aria-disabled="true"]) { background: var(--active); color: #fff; box-shadow: inset 2px 2px 6px rgba(0,0,0,.5), inset -2px -2px 5px rgba(255,255,255,.08); }
.select-option[aria-disabled="true"] { color: var(--na); cursor: not-allowed; }
@media (hover: hover) { .select:not(.is-disabled):not(.is-open) .select-trigger:hover { background: var(--hover-soft); } }
.select:not(.is-disabled) .select-trigger:active { box-shadow: var(--shadow-inset); }
.select.is-error .select-trigger { box-shadow: var(--shadow-inset), 0 0 0 1.5px var(--orange); }
.select.is-error .select-chev { color: var(--ink-3); }
.select.is-disabled { opacity: .55; }
.select.is-disabled .select-trigger { cursor: not-allowed; color: var(--na); }
.select.is-disabled .select-chev { color: var(--na); }

/* === Mobil-Schutz: Inhalte duerfen die Spalte nicht sprengen === */
.form-section, .form-block, .fl-field, .select, .check, .radio, .bereich-grid { min-width: 0; max-width: 100%; }
.select-trigger { min-width: 0; max-width: 100%; overflow: hidden; }
.select-value, .fl-hint, .check-label { min-width: 0; max-width: 100%; }
.select-value { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select-option { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* === Auswahlliste mit Suche (Combobox) — aus dem UI-Kit === */
.select.is-combo .select-input {
  font-family: var(--font); font-size: 17px; color: var(--ink);
  background: var(--bg); border: none; border-radius: var(--r-sm); width: 100%;
  padding: 23px 48px 9px 16px; min-height: 58px;
  box-shadow: inset 3px 3px 6px var(--nm-dark), inset -2px -2px 5px var(--nm-light);
  caret-color: var(--active);
}
.select.is-combo .select-input::placeholder { color: var(--na); }
.select.is-combo .select-input:focus { outline: none; box-shadow: var(--shadow-inset), 0 0 0 1.5px var(--active); }
.select.is-error.is-combo .select-input { box-shadow: var(--shadow-inset), 0 0 0 1.5px var(--orange); }
.select-clear {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
  cursor: pointer; display: none; align-items: center; justify-content: center;
  color: var(--ink-3); -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s; z-index: 2;
}
.select-clear svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .select-clear:hover { background: var(--hover-soft); color: var(--ink); } }
.select-clear:active { background: var(--surface-sub); color: var(--ink); }
.select.show-clear .select-chev { display: none; }
.select.show-clear .select-clear { display: inline-flex; }
.select-empty { padding: 14px 12px; font-size: 15px; color: var(--na); text-align: center; }
.select-empty[hidden] { display: none; }
.select-option[hidden] { display: none; }

/* Native Passwort-/Reveal-Icons der Browser ausblenden — wir nutzen unser .fl-eye */
input::-ms-reveal, input::-ms-clear { display: none !important; }
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button,
input[type="password"]::-webkit-caps-lock-indicator {
  visibility: hidden !important; display: none !important;
  width: 0 !important; margin: 0 !important; pointer-events: none !important;
}

/* === Hinweis-Plakette (Risiko) — aus dem UI-Kit === */
.note { display: flex; gap: 16px; align-items: flex-start; background: var(--bg); border-radius: var(--r-md); box-shadow: var(--shadow-raised); padding: 20px 22px; position: relative; overflow: hidden; }
.note.risk { padding-left: 26px; }
.note.risk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--orange); }
.note-body { min-width: 0; flex: 1; padding-top: 2px; }
.note-title { font-size: 16.5px; font-weight: 800; color: var(--ink); letter-spacing: -.1px; }
.note-text { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; margin-top: 3px; }

/* Combobox: Label wie Float-Label — mittig wenn leer, oben bei Fokus/Eingabe */
.select.is-combo .select-label {
  top: 50%; transform: translateY(-50%);
  font-size: 16px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--na);
  transition: top .15s, transform .15s, font-size .15s, color .15s, font-weight .15s;
}
.select.is-combo .select-input:focus ~ .select-label,
.select.is-combo .select-input:not(:placeholder-shown) ~ .select-label,
.select.is-combo:has(.select-input:not(:placeholder-shown)) .select-label {
  top: 9px; transform: none;
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink-3);
}

/* Combobox offen = aktiver Zustand: Rahmen + Label oben */
.select.is-combo.is-open .select-input,
.select.is-combo.is-open .select-trigger {
  box-shadow: var(--shadow-inset), 0 0 0 1.5px var(--active);
}
.select.is-combo.is-open .select-label {
  top: 9px; transform: none;
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink-3);
}

/* === Mobiler Auswahl-Sheet (Bottom-Sheet) — live, aus dem UI-Kit === */
.select-sheet-scrim { position: fixed; inset: 0; background: rgba(26,26,26,.42); z-index: 900; opacity: 0; transition: opacity .2s; }
.select-sheet-scrim.is-open { opacity: 1; }
.select-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 901; background: var(--bg); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 26px rgba(0,0,0,.22); padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .25s ease; max-height: 80vh; display: flex; flex-direction: column; }
.select-sheet.is-open { transform: translateY(0); }
.select-sheet .sheet-grip, .hk-modal-card .sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.20); margin: 5px auto 10px; }
.select-sheet .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 12px; }
.select-sheet .sheet-title { font-size: 15px; font-weight: 800; color: var(--ink); }
.select-sheet .sheet-x { position: relative; width: 34px; height: 34px; flex-shrink: 0; border: none; cursor: pointer; border-radius: 50%; background: var(--surface-sub); box-shadow: var(--shadow-raised-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }
.select-sheet .sheet-x svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.select-sheet .sheet-x::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; }
.select-sheet .sheet-search { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: var(--r-sm); padding: 12px 14px; box-shadow: inset 3px 3px 6px var(--nm-dark), inset -2px -2px 5px var(--nm-light); margin-bottom: 10px; }
.select-sheet .sheet-search svg { width: 18px; height: 18px; stroke: var(--ink-3); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.select-sheet .sheet-search input { border: none; background: transparent; outline: none; font-family: var(--font); font-size: 16px; color: var(--ink); width: 100%; }
.select-sheet .sheet-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.select-sheet .sheet-opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; font-family: var(--font); font-size: 15px; line-height: 1.4; color: var(--ink-2); padding: 12px 14px; border-radius: 12px; }
.select-sheet .sheet-opt[aria-selected="true"] { background: var(--active); color: #fff; font-weight: 700; }
.select-sheet .sheet-opt:active:not([aria-selected="true"]) { background: var(--active); color: #fff; box-shadow: inset 2px 2px 6px rgba(0,0,0,.5), inset -2px -2px 5px rgba(255,255,255,.08); }
.select-sheet .sheet-opt .so-check { margin-left: auto; width: 18px; height: 18px; opacity: 0; flex-shrink: 0; }
.select-sheet .sheet-opt[aria-selected="true"] .so-check { opacity: 1; }
.select-sheet .sheet-opt .so-check svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.select-sheet .sheet-empty { text-align: center; color: var(--na); font-size: 14px; padding: 20px 0; }
.select-sheet[hidden], .select-sheet-scrim[hidden] { display: none; }
@media (hover: hover) { .select-sheet .sheet-opt:hover:not([aria-selected="true"]) { background: var(--yellow-soft); color: var(--ink); } }

.select-sheet .sheet-list { gap: 6px; }
.select-sheet .sheet-opt .so-check { margin-top: 2px; }

/* Löschen-Knopf im Sheet-Suchfeld */
.sheet-search { position: relative; }
.sheet-search-clear { border: none; background: transparent; cursor: pointer; width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); border-radius: 50%; padding: 0; }
.sheet-search-clear svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sheet-search-clear[hidden] { display: none; }
.sheet-search-clear:active { background: var(--surface-sub); color: var(--ink); }
.select-sheet .sheet-opt[hidden] { display: none !important; }

/* Erfolgs-/Fehlermeldung (Kit-Plakette) — gemeinsam im Praxis-Portal. */
.hk-flash { display: flex; gap: 16px; align-items: center; background: var(--bg); border-radius: var(--r-md); box-shadow: var(--shadow-raised); padding: 20px 22px; margin: 26px 0; }
.hk-flash-disc { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: var(--surface-sub); box-shadow: var(--shadow-inset); display: flex; align-items: center; justify-content: center; }
.hk-flash-disc svg { width: 25px; height: 25px; stroke: #157538; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hk-flash-text { font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.hk-flash-error .hk-flash-disc svg { stroke: var(--orange); }

/* ===== Bestaetigungs-Modal (Kit) — allgemeine Vorlage, Inhalt kommt spaeter =====
   Wie im UI-Kit: KEINE Abdunklung, kein backdrop-filter — der Grund bleibt der
   normale var(--bg). Desktop: zentrierte Karte. Mobil (<=460px): Bottom-Sheet am
   unteren Rand mit vorhandenem .sheet-grip. Buttons sind die bestehenden
   .btn-secondary (links) und .btn-primary-yellow (rechts) — keine eigenen
   Button-Stile, nur Groesse/Layout im Modal-Kontext. */
.hk-modal-scrim {
  position: fixed; inset: 0; z-index: 1000;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.hk-modal-scrim[hidden] { display: none; }
/* Statt Abdunklung: bei offener Modalke (body.modal-open, gesetzt von modal.js)
   wirkt das gesamte Portal "ausgeschaltet" — ALLES auf var(--na): Ueberschriften,
   Labels, Eingabewerte, Links, Icons. Die Modal-Karte liegt AUSSERHALB von
   .hk-portal und bleibt unberuehrt; die Kopf-Nav (.hk-nav) ebenfalls. Sanfter
   Farbwechsel (.18s) gegen Blinken; wirkt Desktop + Bottom-Sheet gleich. */
.hk-portal,
.hk-portal :where(h1, h2, h3, h4, p, label, small, li, .card-title, .card-desc, .fl-hint, .field-hint, .kicker, .row-hint) {
  transition: color .18s;
}
body.modal-open .hk-portal,
body.modal-open .hk-portal * { color: var(--na) !important; }
body.modal-open .hk-portal svg { stroke: var(--na) !important; }
/* Gelbe Portal-Buttons: Kit-Disabled-Look, keine Hover-Reaktion. Buttons in der
   Modal-Karte liegen ausserhalb .hk-portal und bleiben normal. */
body.modal-open .hk-portal .btn-primary,
body.modal-open .hk-portal .btn-primary-yellow,
body.modal-open .hk-portal .btn-save {
  background: var(--yellow-muted) !important;
  color: var(--yellow-muted-ink) !important;
  box-shadow: var(--shadow-inset) !important;
  cursor: not-allowed !important;
}
.hk-modal-card {
  box-sizing: border-box;
  width: 100%; max-width: 360px;
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-raised);
  padding: 28px 28px 24px;
}
.hk-modal-card .sheet-grip { display: none; }        /* nur mobil sichtbar */
.hk-modal-title { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0; text-align: center; }
.hk-modal-text { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 10px 0 0; text-align: left; }
.hk-modal-actions { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.hk-modal-actions .btn-secondary, .hk-modal-actions .btn-primary-yellow {
  min-width: 0; height: 48px; padding: 0 22px; font-size: 15px;
}
/* Gedrueckt-Look der Modal-Buttons — auch auf Touch: steht nach dem globalen
   @media(hover:none)-Hover-Reset und gewinnt daher per Reihenfolge. Die Buttons
   liegen in .hk-modal-card (ausserhalb .hk-portal), das Disabled-Ausgrauen des
   Portals trifft sie nicht. */
.hk-modal-actions .btn-secondary:active { background: var(--yellow-soft); box-shadow: var(--shadow-inset); }
.hk-modal-actions .btn-primary-yellow:active { background: var(--yellow); box-shadow: var(--shadow-inset-lg); }
@media (max-width: 460px) {
  .hk-modal-scrim { align-items: flex-end; padding: 0; }
  .hk-modal-card {
    max-width: none;
    border-radius: 24px 24px 0 0;
    /* Seitliches Padding haelt beide Buttons vom Bildschirmrand weg (Abbrechen
       wird nicht abgeschnitten); box-sizing border-box oben rechnet es ein. */
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 24px -10px var(--nm-dark), 0 -1px 0 var(--nm-light), inset 0 2px 3px var(--nm-light);
  }
  .hk-modal-card .sheet-grip { display: block; }
  .hk-modal-actions { gap: 10px; }
  .hk-modal-actions .btn-secondary, .hk-modal-actions .btn-primary-yellow {
    flex: 1 1 0; padding: 0 12px;
  }
}

/* Abstand der beiden Footer-Pillen (Partnerlogin / Vertrag widerrufen).
   Beide liegen NICHT im selben Container: Partnerlogin steckt in der
   Rechtliches-nav, "Vertrag widerrufen" haengt direkt in .hk-footer-inner.
   Horizontal trennt sie bereits dessen column-gap (24px); beim Umbruch
   (Mobil-Layout, gleicher <=600px-Breakpoint wie die Partner-Pille) blieb
   nur der 8px-row-gap -> hier auf 10px angehoben. Kein gemeinsamer
   flex-Container noetig, nur margin an der zweiten Pille. */
@media (max-width: 600px) {
  .hk-footer .hk-widerruf-btn { margin-top: 10px; }
}