/* ============================================================
   heilmittelklar.de — Design Tokens & Basis
   Quelle: Margos UI-Kit / Icon-Kit v0.1 (Soft Neumorphism · WCAG 2.1 AA)
   Diese Datei = FUNDAMENT: Tokens, Reset, Basis-Typografie, Links,
   Schatten-Utilities, Icon-Basis, Marke (Wortmarke/Bildmarke).
   Komponenten-CSS (Buttons, Selects, Rechner, Tabelle …) folgt in
   einem separaten Schritt — bewusst NICHT hier, um das Fundament
   schlank und stabil zu halten.
   Schriften via Google-Fonts-<link> im base_heilmittelklar.html.
   ============================================================ */

:root {
  /* — Flächen / Поверхности — */
  --bg:           #EAEAEA;   /* Seitenhintergrund + Neumorphismus-Basis */
  --surface:      #EAEAEA;   /* Karten = gleiche Farbe (echtes Neumorphismus) */
  --surface-sub:  #E3E3E3;   /* leicht vertiefte Innenfläche */
  --mint:         #CFDED9;   /* Tuerkis/Mint — getoente, vertiefte Flaeche · Felder/Karten (aus UI-Kit) */

  /* — Akzente / Акценты — */
  --yellow:       #E8B800;   /* Hauptaktion · Eigenanteil · CTA-Unterlage */
  --yellow-soft:  #FAF4CC;   /* helle gelbe Hervorhebung (Sample bleibt) */
  --yellow-muted:     #E3D7A2;   /* UI-Kit 04 Buttons „Deaktiviert" — gedämpfte gelbe Fläche */
  --yellow-muted-ink: #8C825C;   /* UI-Kit 04 Buttons „Deaktiviert" — gedämpfter Text darauf */
  --hover-soft:   #EDECE4;   /* Hover — kaum sichtbarer warmer Grauton */
  --active:       #33373E;   /* ausgewählt / aktiv — Graphit (Standard) */
  --active-ink:   #33373E;   /* hervorgehobene Zahl auf hellem Grund */
  --blue-graphite: #33435C;  /* dunkles Blaugrau — aktive/Hover-Flaeche (Bereich-Tabs) */
  --blue:         #5B8EC4;   /* SPARSAM — Links & einzelne Schlüsselmomente, NIE neben Gelb */
  --blue-ink:     #2F5980;   /* Link-Text auf hellem Grund (AA) */

  /* — Ampel: NUR in Vergleichstabelle / Светофор только в таблице — */
  --green:        #157538;   /* ↑ über BBhV — Kit-Wert, ~4.8:1 auf --bg (WCAG AA) */
  --amber:        #7A5000;   /* → Warnzone */
  --red:          #8B1A1A;   /* ↓ unter GKV / Fehlertext (kontraststark) */
  --orange:       #E96F38;   /* Warnung / Fehler-Akzent — nur Fläche/Rand/Icon, nicht als Text */
  --orange-text:  #B5471A;   /* Fehler-Hinweistext — AA-taugliches Pendant zu --orange */
  --na:           #8A8A8A;   /* k. A. — keine Daten / Verweigerung */
  --selection:    rgba(138,138,138,.35); /* Text-Auswahl global (Kit-Grau, s. components.css) */

  /* — Text / Текст — */
  --ink:          #1A1A1A;   /* 14.5:1 auf --bg → AAA */
  --ink-2:        #4A4A4A;   /* Sekundär */
  --ink-3:        #5E5E5E;   /* Labels / Captions — AA (≥4,5 auf --bg) */

  /* — Neumorphismus-Schatten / Тени (нейтральные!) — */
  --nm-light:     #ffffff;
  --nm-dark:      #c7c7c7;
  --nm-dist:      5px;       /* Tiefe — via Tweak steuerbar */
  --nm-blur:      11px;

  --shadow-raised:    var(--nm-dist) var(--nm-dist) var(--nm-blur) var(--nm-dark),
                      calc(-1 * var(--nm-dist)) calc(-1 * var(--nm-dist)) var(--nm-blur) var(--nm-light);
  --shadow-raised-sm: 3px 3px 7px var(--nm-dark), -3px -3px 7px var(--nm-light);
  --shadow-inset:     inset 2px 2px 5px var(--nm-dark), inset -2px -2px 5px var(--nm-light);
  --shadow-inset-lg:  inset 3px 3px 7px var(--nm-dark), inset -3px -3px 7px var(--nm-light);
  --shadow-inset-blue: inset 3px 3px 6px rgba(0,0,0,.50), inset -2px -2px 5px rgba(255,255,255,.10); /* Inset fuer dunkle Flaechen (Blaugrau) */

  /* — Radius / Скругления — */
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  /* — Layout / Разметка — */
  --content-width: 960px;   /* gemeinsame Inhaltsbreite: Header + Sektionen (= .hk-start).
                               Linke/rechte Kante von Logo, Nav und Section-Text fluchten. */

  /* — Typografie / Типографика — */
  --font: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

/* Textauswahl — unser dezentes Grau (kein Browser-Blau) */
::selection { background: rgba(138, 138, 138, .35); color: var(--ink); }
input::selection, textarea::selection { background: rgba(138, 138, 138, .35); color: var(--ink); }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}

/* deutliche Fokus-Sichtbarkeit für Tastatur / слабовидящие */
:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--active);
  outline-offset: 2px;
  border-radius: 6px;
}

/* tabellarische Ziffern überall, wo Zahlen stehen */
.tnum { font-variant-numeric: tabular-nums; }

/* Links — unser Blau, sparsam, nie neben Gelb.
   GLOBAL: Ruhe = KEIN Unterstrich. Hover UND Touch = Unterstrich in der
   Textfarbe (text-decoration-color: currentColor) — folgt damit automatisch
   jedem color-Wechsel im jeweiligen Zustand (z. B. .hk-link-inverse,
   .hk-nav-link, Footer „Rechtliches" grau->blau). Touch = Hover via
   @media (hover: none) :active. Ausgenommen (nie unterstrichen): Buttons
   ([class*="btn"], inkl. .hk-btn*, .btn-*, .tp-btn), Icon-/Bild-Links
   (.ic-disc, .hk-brand-link/Logo) und Auswahl-Karten-Links (.feat-card
   Weiche, .hk-card Fachbereich — ganze Karte klickbar, kein
   Text-Unterstrich auf hover/tap). */
a, .link {
  color: var(--blue-ink);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  font-weight: 600;
  cursor: pointer;
}
a:not([class*="btn"]):not(.ic-disc):not(.hk-brand-link):not(.feat-card):not(.hk-card):not(.kachel-chip):not(.hk-card-interactive):not(.bereich-tab):hover,
a:not([class*="btn"]):not(.ic-disc):not(.hk-brand-link):not(.feat-card):not(.hk-card):not(.kachel-chip):not(.hk-card-interactive):not(.bereich-tab):active,
.link:hover, .link:active {
  text-decoration: underline;
  text-decoration-color: currentColor;
}
@media (hover: none) {
  a:not([class*="btn"]):not(.ic-disc):not(.hk-brand-link):not(.feat-card):not(.hk-card):not(.kachel-chip):not(.hk-card-interactive):not(.bereich-tab):active,
  .link:active {
    text-decoration: underline;
    text-decoration-color: currentColor;
  }
}

/* ---------- Icon-Basis (Macro _icons.html) ---------- */
.hk-icon { width: 1.3em; height: 1.3em; display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }


/* ---------- Marke: Wortmarke & Bildmarke ---------- */
.hk-wordmark { font-size: 26px; font-weight: 800; letter-spacing: -.8px; color: var(--ink); line-height: 1; display: inline-block; }
.hk-wordmark .light { font-weight: 400; }
.hk-wordmark .klar { position: relative; }
.hk-wordmark .klar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 4px; background: var(--yellow); border-radius: 3px; }

/* Bildmarke „H|k" — gelber Strich zwischen den Buchstaben */
.hk-bildmarke { display: inline-flex; align-items: baseline; font-size: 24px; font-weight: 800; line-height: 1; color: var(--ink); }
.hk-bildmarke .bm-gl { display: inline-block; }
.hk-bildmarke .bm-line { display: inline-block; width: .13em; height: .70em; background: var(--yellow); border-radius: .05em; margin: 0 .045em; }
.hk-bildmarke.on-dark { color: #fff; }

/* ---------- Layout-Hülle (Header/Main/Footer der base) ---------- */
.hk-page { min-height: 100dvh; display: flex; flex-direction: column; }
.hk-header { position: sticky; top: 0; z-index: 50; padding: 0 24px; background: rgba(234,234,234,.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,.07); }
.hk-header-inner { max-width: var(--content-width); margin: 0 auto; padding: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hk-header a.hk-brand-link { text-decoration: none; }
.hk-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hk-nav a { text-decoration: none; color: var(--ink-2); font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 18px; min-height: 44px; display: inline-flex; align-items: center; box-shadow: var(--shadow-raised-sm); background: var(--bg); transition: background .12s, color .12s; }
@media (hover: hover) { .hk-nav a:hover { background: var(--yellow-soft); color: var(--ink); } }
.hk-nav a:active { background: var(--yellow-soft); color: var(--ink); }
@media (hover: none) {
  .hk-nav a:active { background: var(--yellow-soft); color: var(--ink); }
}
.hk-main { flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 40px 24px 80px; }
.hk-footer { border-top: 1px solid rgba(0,0,0,.07); background: var(--surface-sub); }
.hk-footer-inner { max-width: 1100px; margin: 0 auto; padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
/* Die beiden Footer-navs (Rechtliches + Inhalte) stehen als EINE Gruppe:
   enger Innen-Gap (20px) haelt sie zusammen, der groessere Gap der
   .hk-footer-inner (40px) trennt Bildmarke | nav-Gruppe | Partnerlogin. */
.hk-footer-navgroup { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
/* Mobil: alle Bloecke linksbuendig untereinander an derselben linken Kante;
   Partnerlogin klemmt nicht neben dem Copyright, sondern steht mit Abstand.
   (Die 10px-Regel fuer .hk-widerruf-btn liegt weiter in components.css.) */
@media (max-width: 600px) {
  .hk-footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hk-footer-navgroup { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hk-footer .hk-partner-btn { margin-top: 10px; }
}
.hk-footer a { color: var(--ink-3); text-decoration: none; cursor: pointer; }
.hk-footer a:hover,
.hk-footer a:active { color: var(--active); }
@media (hover: none) {
  .hk-footer a:active { color: var(--active); }
}
/* Rechtstext-Links (Impressum, Datenschutz, AGB, Widerrufsbelehrung,
   Nutzungsbedingungen): Ruhezustand grau (--ink-3, s.o.), aber :hover UND
   :active zum Link-Blau --blue-ink. :active gibt bewusst DIESELBE Farbe wie
   :hover, damit der Tap auf dem Handy (kein Hover) identisch reagiert.
   Nur die Rechts-Nav — Bildmarke und die gelbe Widerruf-Pille bleiben. */
.hk-footer nav[aria-label="Rechtliches"] a:hover,
.hk-footer nav[aria-label="Rechtliches"] a:active { color: var(--blue-ink); }
@media (hover: none) {
  .hk-footer nav[aria-label="Rechtliches"] a:active { color: var(--blue-ink); }
}
/* Invertierte Variante der Rechtstext-Links: blau ruhend, grau bei
   hover/touch — exakt dieselben Token-Werte wie oben, nur vertauscht
   (Ruhe <-> hover/active). :active spiegelt :hover fuer den Tap ohne
   Hover; @media (hover:none) macht die Touch-Variante explizit.
   Fuer Kontakt-/mailto-Links (z. B. Impressum). */
.hk-link-inverse { color: var(--blue-ink); text-decoration: none; cursor: pointer; }
.hk-link-inverse:hover,
.hk-link-inverse:active { color: var(--ink-3); }
@media (hover: none) {
  .hk-link-inverse:active { color: var(--ink-3); }
}
/* Im Footer MUSS die Inversion die Rechts-Nav-Regeln oben schlagen:
   .hk-footer nav[aria-label="Rechtliches"] a:hover ist (0,3,2). Deshalb die
   Inversion NUR mit .hk-footer a.hk-link-inverse (0,3,1) zu scopen reicht
   NICHT (Nav-Blau gewinnt -> Link bliebe blau). Gleiches nav[aria-label]-
   Scope -> (0,4,2) im :hover/:active und schlaegt die Nav-Regel sauber.
   Der Unterstrich folgt via globalem currentColor automatisch dem Grau. */
.hk-footer nav[aria-label="Rechtliches"] a.hk-link-inverse,
.hk-footer nav[aria-label="Inhalte"] a.hk-link-inverse { color: var(--blue-ink); white-space: nowrap; }
.hk-footer nav[aria-label="Rechtliches"] a.hk-link-inverse:hover,
.hk-footer nav[aria-label="Rechtliches"] a.hk-link-inverse:active,
.hk-footer nav[aria-label="Inhalte"] a.hk-link-inverse:hover,
.hk-footer nav[aria-label="Inhalte"] a.hk-link-inverse:active { color: var(--ink-3); }
@media (hover: none) {
  .hk-footer nav[aria-label="Rechtliches"] a.hk-link-inverse:active,
  .hk-footer nav[aria-label="Inhalte"] a.hk-link-inverse:active { color: var(--ink-3); }
}
/* CTA-Spalte im Header: gelber Button oben, Transparenz-Link rechtsbuendig
   darunter (align-items:flex-end). flex:0 0 auto = Spalte behaelt Button-Breite,
   schrumpft nie. .hk-nav align-items:flex-start haelt den Disc oben an der
   Button-Zeile. */
.hk-header .hk-nav { align-items: flex-start; margin-left: auto; }
.hk-header .hk-cta-col { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
/* Transparenz-Link steht nach der .hk-nav und umbricht per flex-wrap in die
   zweite Zeile (flex:0 0 100%); linksbuendig unter dem Logo. */
.hk-header .hk-header-inner { flex-wrap: wrap; }
/* Transparenz-Link: schlichter Textlink (kein Pill-Stil der .hk-nav a-Basis) —
   Flaeche/Schatten/Radius/min-height neutralisiert. */
.hk-header .hk-nav-link { color: var(--ink-3); background: none; box-shadow: none; flex: 0 0 100%; padding: 0; margin: 6px 0 0 0; text-align: left; min-height: 0; border-radius: 0; text-decoration: none; white-space: nowrap; font-weight: 600; }
.hk-header .hk-nav-link:hover,
.hk-header .hk-nav-link:active { color: var(--blue-ink); }
@media (hover: none) {
  .hk-header .hk-nav-link:active { color: var(--blue-ink); }
}
@media (max-width: 600px) {
  .hk-main { padding: 28px 16px 64px; }
  .hk-header { padding: 0 16px; }
  .hk-header-inner { padding: 12px 0; }
}

/* Chrome/WebKit-Autofill: die blaue UA-Faerbung entfernen und unsere Farben
   erzwingen. Nur hier ist !important noetig — die Autofill-Styles des Browsers
   lassen sich anders nicht ueberschreiben. Der box-shadow kombiniert BEIDE
   Effekte: zuerst die neumorphe Inset-Optik (var(--shadow-inset)), dahinter
   die grosse --bg-Fuellung, die den Autofill-Grund uebermalt. Reihenfolge
   zaehlt — die Inset-Schatten stehen VOR der Fuellung, damit sie sichtbar
   obenauf gemalt werden. Die 5000s-Transition haelt den Zustand beim Fokus. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  box-shadow: var(--shadow-inset), 0 0 0 1000px var(--bg) inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--active) !important;
  transition: background-color 5000s ease-in-out 0s;
}