/* ku-marke-fettabsaugung.css — Farbwelt der Submarke „Fettabsaugung“ (Petrol statt Stahlblau)
   Lädt NACH ku-theme.css und VOR widget-bridge.css (manifest/pack.json assets.css).
   Quelle: Mini Brand Manual + design-tokens Logopaket 15.10.2026 — Petrol #2A747C, Nebelpetrol #DDECEB,
   Sanftes Weiß #F3F7F6; gemeinsam mit der Gefäßpraxis: Tintenblau #0F2733, Graphit #545C61,
   Emblem-Blaugrau #8596A2, Negativ-Emblem #C8D6DC.
   Skala: OKLCH, Hue 205,2°, Anker Stufe 600 = #2A747C (wie --ku-steel-600 = Markenwert der Basis).
   Die Token-NAMEN der Basis bleiben (--ku-steel-*): Komponenten, Gates und Widgets hängen daran.

   A  Tokens und Reste — überschreibt nur Werte, über dieselben Selektoren wie ku-theme.css.
      Prüfung: python3 tools/farb-audit.py (Exit 0 = „0 Reste“).
   B  Submarken-Komponenten — Regeln für die Klassen aus den Header-/Footer-Overrides. */

/* ===========================================================================
   A1 — Primitive
   =========================================================================== */
:root {
  /* Petrol-Skala (Stufe ↔ Basis-Stufe gleicher Rolle) */
  --ku-steel-700: #005c64;   /* Link — 7,74:1 auf Weiß, 6,36:1 auf Nebelpetrol */
  --ku-steel-600: #2a747c;   /* Markenwert, Interaktion — 5,40:1 auf Weiß */
  --ku-steel-500: #518b92;   /* Fokusring auf hellen Flächen — 3,85:1 auf Weiß */
  --ku-steel-400: #73a2a8;
  --ku-steel-300: #95babf;   /* Akzent auf Ink — 8,41:1 auf Ink 950 */
  --ku-steel-200: #b7d3d6;
  --ku-steel-150: #c8dfe2;   /* neu: Hover auf Nebelpetrol (eine Stufe dunkler als die Fläche) */
  --ku-steel-100: #d9ebee;
  --ku-steel-50:  #ebf8fa;
  --ku-steel-verlauf: #3d8088;   /* neu: Ende des Button-Verlaufs — Weiß darauf 4,52:1 */

  /* Hellflächen */
  --ku-paper-100:   #f3f7f6;   /* Sanftes Weiß */
  --ku-tone-a:      #fbfdfd;
  --ku-tone-steel:  #ddeceb;   /* Nebelpetrol: Mesh „Horizont“ und Seitenkopf */
  --ku-tone-edge:   #d4e6e5;
  --ku-tone-mesh-1: #d8e9e8;
  --ku-tone-mesh-2: #d6e7e6;
  --ku-toc-hover:   #f4f9f9;
  --ku-toc-active:  #eff8f7;
  --ku-tone-browser:#e1edec;
  --ku-tone-chip:   #e9f4f3;
  --ku-line-print:  #d5e8e6;
  --ku-cream-200:   #e9f0ef;
  --ku-cream-300:   #dae5e4;

  /* Neutrals: Emblem-Blaugrau bleibt, die übrigen Stufen mit Petrol-Hue getönt */
  --ku-bluegray-600: #616869;   /* Meta — 5,69:1 auf Weiß, 4,68:1 auf Nebelpetrol */
  --ku-bluegray-500: #7a8081;
  --ku-bluegray-400: #8596a2;   /* Emblem-Blaugrau (gemeinsam) */
  --ku-bluegray-200: #c8cdce;
  --ku-bluegray-100: #e4e8e9;
  --ku-bluegray-50:  #f2f6f6;
  --ku-slate-600:    #495152;

  /* gemeinsam, unverändert: --ku-ink-950…700, --ku-logo-grey #545c61 */
}

/* ===========================================================================
   A2 — Semantic (Werte mit festen Farbanteilen)
   =========================================================================== */
:root {
  --elevation-btn:       0 18px 36px -18px rgba(42, 116, 124, .45);
  --elevation-btn-hover: 0 18px 36px -18px rgba(42, 116, 124, .52);
  --surface-texture: radial-gradient(60% 50% at 20% 10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
                     radial-gradient(56% 50% at 86% 82%, rgba(115, 162, 168, .11) 0%, rgba(115, 162, 168, 0) 64%);
  --border-hair:        rgba(42, 116, 124, .10);
  --interactive-fill:       linear-gradient(120deg, var(--ku-steel-700) 0%, var(--ku-steel-600) 42%, var(--ku-steel-verlauf) 100%);
  --interactive-fill-hover: linear-gradient(120deg, var(--ku-steel-700) 0%, var(--ku-steel-600) 100%);
}

/* ===========================================================================
   A3 — Kontext-Flächen
   Auf Nebelpetrol unterschreitet Petrol 600 als Text knapp 4,5:1 (4,44:1) — Akzenttext und Fokusring
   gehen dort eine Stufe dunkler; Hover eine Stufe unter die Fläche.
   =========================================================================== */
.ku-section--muted {
  --surface-texture: linear-gradient(to bottom, #d4e6e5 0%, rgba(212, 230, 229, .96) 8%, rgba(212, 230, 229, 0) 22%),
                     radial-gradient(42% 46% at 6% 48%, rgba(255, 255, 255, .82), rgba(255, 255, 255, 0) 70%),
                     radial-gradient(70% 55% at 86% 100%, rgba(81, 139, 146, .22), rgba(81, 139, 146, 0) 70%),
                     linear-gradient(180deg, var(--ku-tone-mesh-1) 0%, var(--ku-tone-steel) 40%, var(--ku-tone-mesh-2) 100%);
  --surface-hover:   var(--ku-steel-150);
  --text-accent:     var(--ku-steel-700);
  --focus-ring:      var(--ku-steel-600);   /* 4,44:1 auf Nebelpetrol, auch in den dunkleren Mesh-Zonen ≥ 3:1 */
}
.ku-section--hero {
  --surface-texture: radial-gradient(55% 62% at 76% 26%, rgba(115, 162, 168, .26), rgba(115, 162, 168, 0) 62%),
                     radial-gradient(52% 58% at 14% 88%, rgba(42, 116, 124, .18), rgba(42, 116, 124, 0) 66%),
                     radial-gradient(46% 42% at 22% 6%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 98%);
  --surface-hover:   var(--ku-steel-150);
  --text-accent:     var(--ku-steel-700);
  --focus-ring:      var(--ku-steel-600);
}

/* ===========================================================================
   A4 — Reste mit festen Werten (gleiche Selektoren wie ku-theme.css)
   =========================================================================== */
:root .ku-section--muted {
  --ku-tone-edge: linear-gradient(to bottom, #d4e6e5 0%, rgba(212, 230, 229, .96) 8%, rgba(212, 230, 229, 0) 22%);
  background-color: var(--ku-tone-steel);
  background-image: var(--ku-tone-edge), radial-gradient(42% 46% at 6% 48%, color-mix(in srgb, var(--ku-paper-50) 82%, transparent), transparent 70%), radial-gradient(70% 55% at 86% 100%, color-mix(in srgb, var(--ku-steel-500) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--ku-tone-mesh-1) 0%, var(--ku-tone-steel) 40%, var(--ku-tone-mesh-2) 100%);
}
:root .ku-section--muted:not(.ku-seitenkopf) {
  --ku-tone-edge: linear-gradient(to bottom, #d4e6e5 0%, rgba(212, 230, 229, .96) 8%, rgba(212, 230, 229, 0) 22%);
}
.ku-anfrage__notiz { background: var(--ku-toc-active); }
.ku-anfrage__option[aria-checked="true"] { background: var(--ku-toc-hover); }
.ku-anfrage__pille[aria-checked="true"] { background: var(--ku-toc-hover); }
.ku-anfrage__prev:hover { background: var(--ku-toc-active); }
:where(.ku-start) .ku-kartenreihe--bewertungen:not(.ku-section--muted, .ku-section--hero, .ku-section--brand, .ku-section--paper) { background-image:
  radial-gradient(60% 52% at 50% 6%, var(--ku-paper-50) 0%, color-mix(in srgb, var(--ku-paper-50) 0%, transparent) 58%),
  radial-gradient(46% 44% at 88% 88%, color-mix(in srgb, var(--ku-steel-400) 5.5%, transparent) 0%, color-mix(in srgb, var(--ku-steel-400) 0%, transparent) 60%); }
:where(.ku-start) .ku-teaser--start:not(.ku-section--muted, .ku-section--hero, .ku-section--brand, .ku-section--paper) { background-image:
  radial-gradient(58% 48% at 82% 12%, var(--ku-paper-50) 0%, color-mix(in srgb, var(--ku-paper-50) 0%, transparent) 60%),
  radial-gradient(50% 46% at 10% 80%, color-mix(in srgb, var(--ku-steel-400) 5%, transparent) 0%, color-mix(in srgb, var(--ku-steel-400) 0%, transparent) 62%); }

/* widget-bridge.css lädt danach — :root davor hebt die Spezifität über den Panzer */
:root button[data-ku-anfrage-option][aria-checked="true"] { background: var(--ku-toc-hover); }
:root button[data-ku-anfrage-pille][aria-checked="true"] { background: var(--ku-toc-hover); }

/* Präsentationsattribute im Widget-Markup (stroke="#126E97" in class-ku-abschluss.php und
   class-ku-footer.php) — CSS schlägt das Attribut, das Markup bleibt Basis-Code */
.ku-abschluss a[href^="tel:"] > svg[stroke],
.ku-footer__link--sekundaer > svg[stroke] { stroke: var(--ku-steel-600); }

/* ===========================================================================
   B — Submarken-Komponenten (Header-/Footer-Overrides)
   =========================================================================== */

/* Mega-Panel mit Spalten (Fettabsaugung: Körperzonen · Für wen · Methode & Ablauf · Region).
   Mobil eine Spalte im Akkordeon; ab 1024 px zwei balancierte Textspalten (lange und kurze Gruppen
   gleichen sich aus), die Liste eine Stufe kleiner als im einfachen Panel, damit vier Gruppen samt
   Aktion ohne Scrollen in die linke Hälfte passen. */
.ku-header__mega-spalten { margin: var(--space-1) 0 var(--space-5); }
.ku-header__mega-spalte { min-width: 0; break-inside: avoid; }
.ku-header__mega-spalte + .ku-header__mega-spalte { margin-top: var(--space-4); }
.ku-header__mega-spaltenkopf {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--ku-ink-900) 8%, transparent);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-meta);
}
.ku-header__mega-spalte .ku-header__mega-liste {
  font-size: clamp(1.1rem, 1rem + .3vw, 1.25rem);
  line-height: 1.3;
}
.ku-header__mega-spalte .ku-header__mega-leistung { padding-block: .25rem; }
@media (min-width: 1024px) {
  .ku-header__mega-spalten { columns: 2; column-gap: var(--space-5); }
  .ku-header__mega-spalte + .ku-header__mega-spalte { margin-top: 0; }
  .ku-header__mega-spalte { padding-bottom: var(--space-4); }
}

/* Claim im Footer: eine ruhige Zeile Playfair zwischen Linkspalten und Basiszeile */
.ku-footer__claim {
  margin: 0;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--ft-line);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ft-fg);
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .ku-footer__claim { padding: 4rem 0; }
}

/* Submarke: Wortmarke im Kopf wie Gefäßpraxis (Basis 0.3.5, .ku-logo--marke): Unterzeile „Fettabsaugung | Düsseldorf“,
   erster Teil in Petrol, Rest in Grau; ab 100 px Scrolltiefe (is-kompakt) tritt sie zurück, die Wortmarke gleitet mittig zum Emblem. */
.ku-header .ku-logo__unterzeile { color: var(--text-meta); }
.ku-header .ku-logo__unterzeile > span { color: var(--text-accent); }