@charset "UTF-8";
/* ==========================================================================
   KAHRAMAN GMBH & CO. KG — VODAFONE SHOPS
   global.css v1.0 FINAL · globales Fundament
   --------------------------------------------------------------------------
   Grundlage : Kahraman Designsystem v1.0 (verbindlich)
   Stack     : WordPress · Hello Elementor · Elementor Pro (Flexbox Container)
   Schrift   : "Arimo", Arial, sans-serif — lokal über Elementor eingebunden.
               Diese Datei enthält bewusst KEIN @font-face, KEIN @import,
               KEINEN Google-Fonts-Aufruf und KEINEN Font-Preload.
   Präfix    : kh-  ·  Schema: kh-block__element--modifier
   Sprache   : Sämtliche sichtbaren Texte der Website verwenden die Sie-Form.
               Redaktionelle Texte stehen im Template, nicht in dieser Datei.
   --------------------------------------------------------------------------
   01. DESIGN TOKENS          11. SEARCH OVERLAY
   02. RESET & BASE           12. OFF CANVAS
   03. TYPOGRAPHY             13. MOBILE NAVIGATION
   04. LAYOUT                 14. FOOTER
   05. BUTTONS & CONTROLS     15. STICKY MOBILE ACTION BAR
   06. FORMS                  16. GLOBAL STATES
   07. BADGES/CHIPS/TABS/     17. ACCESSIBILITY
       ACCORDION              18. UTILITIES
   08. CARDS — GLOBAL BASE    19. ELEMENTOR NORMALIZATION
   09. HEADER                 20. RESPONSIVE
   10. DROPDOWN NAVIGATION
   ========================================================================== */


/* ==========================================================
   01. DESIGN TOKENS
   ========================================================== */

:root {

  /* ---------- FARBE · Marke ---------------------------------------- */
  --kh-color-primary-050: #FDECEC;
  --kh-color-primary-100: #F9CFCF;
  --kh-color-primary-500: #E60000;  /* Basis — Flächen, Buttons, große Zahlen */
  --kh-color-primary-600: #BD0000;  /* Hover                                  */
  --kh-color-primary-700: #820000;  /* Active                                 */
  --kh-color-primary-text: #A50000; /* rote Schrift < 24px oder auf Grau      */
  --kh-color-primary-on-dark: #FF6B6B; /* Rot auf surface-900                 */
  --kh-color-primary-contrast: #FFFFFF;

  /* ---------- FARBE · Text ----------------------------------------- */
  --kh-color-ink-900: #1A1A1A;      /* Überschriften                          */
  --kh-color-ink-700: #333333;      /* Fließtext                              */
  --kh-color-ink-500: #6B6B6B;      /* sekundär, Meta                         */
  --kh-color-ink-400: #8C8C8C;      /* Placeholder, disabled                  */
  --kh-color-ink-inverse: #FFFFFF;

  /* ---------- FARBE · Flächen -------------------------------------- */
  --kh-color-surface-000: #FFFFFF;
  --kh-color-surface-050: #FAFAFA;
  --kh-color-surface-100: #F2F2F2;
  --kh-color-surface-200: #E8E8E8;
  --kh-color-surface-900: #1A1A1A;
  --kh-color-surface-brand: #E60000;

  /* ---------- FARBE · Linien --------------------------------------- */
  --kh-color-line-100: #EFEFEF;
  --kh-color-line-200: #E0E0E0;
  --kh-color-line-300: #C9C9C9;
  --kh-color-line-strong: #1A1A1A;

  /* ---------- FARBE · Signale -------------------------------------- */
  --kh-color-focus: #0B6E7F;
  --kh-color-focus-ring: rgba(11, 110, 127, .55);
  --kh-color-success: #00703C;  --kh-color-success-bg: #E3F2E9;
  --kh-color-warning: #A65A00;  --kh-color-warning-bg: #FBF0E0;
  --kh-color-danger:  #A50000;  --kh-color-danger-bg:  #FDECEC;
  --kh-color-info:    #0B6E7F;  --kh-color-info-bg:    #E8F1F3;

  --kh-color-overlay: rgba(0, 0, 0, .56);
  --kh-gradient-brand: linear-gradient(135deg, #820000 0%, #E60000 65%);

  /* ---------- SCHRIFT ---------------------------------------------- */
  /* Arimo ist über Elementor lokal eingebunden.
     Kein @font-face, kein Preload, keine externe Schriftquelle. */
  --kh-font-sans: "Arimo", Arial, sans-serif;
  --kh-font-heading: var(--kh-font-sans);
  --kh-font-weight-regular: 400;
  --kh-font-weight-medium: 500;
  --kh-font-weight-semibold: 600;
  --kh-font-weight-bold: 700;

  --kh-leading-tight: 1.1;
  --kh-leading-snug: 1.25;
  --kh-leading-normal: 1.5;
  --kh-leading-relaxed: 1.65;

  --kh-tracking-tight: -.03em;
  --kh-tracking-snug: -.015em;
  --kh-tracking-normal: 0;
  --kh-tracking-wide: .04em;
  --kh-tracking-label: .06em;

  /* ---------- SCHRIFTGRÖSSEN · fluid ------------------------------- */
  --kh-text-display: clamp(2.25rem, 1.40rem + 3.60vw, 3.75rem);   /* 36 → 60 */
  --kh-text-h1:      clamp(2.00rem, 1.35rem + 2.70vw, 3.00rem);   /* 32 → 48 */
  --kh-text-h2:      clamp(1.625rem, 1.25rem + 1.60vw, 2.25rem);  /* 26 → 36 */
  --kh-text-h3:      clamp(1.3125rem, 1.10rem + .90vw, 1.75rem);  /* 21 → 28 */
  --kh-text-h4:      clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); /* 18 → 21 */
  --kh-text-lead:    clamp(1.0625rem, 1.00rem + .35vw, 1.25rem);  /* 17 → 20 */
  --kh-text-price:   clamp(2.00rem, 1.50rem + 2.00vw, 2.75rem);   /* 32 → 44 */
  --kh-text-body: 1rem;      /* 16 */
  --kh-text-sm:   .875rem;   /* 14 */
  --kh-text-xs:   .75rem;    /* 12 — nie in Formularfeldern */
  --kh-text-label: .8125rem; /* 13, uppercase + tracking-label */
  --kh-text-field: 1rem;     /* 16 — verbindliches Minimum für alle Eingaben */

  /* ---------- ABSTÄNDE · strenger 4-px-Raster ---------------------- */
  --kh-space-3xs: 2px;   /* einzige Ausnahme: Hairlines, Icon-Optik */
  --kh-space-2xs: 4px;
  --kh-space-xs:  8px;
  --kh-space-sm:  12px;
  --kh-space-md:  16px;
  --kh-space-lg:  24px;
  --kh-space-xl:  32px;
  --kh-space-2xl: 48px;
  --kh-space-3xl: 64px;
  --kh-space-4xl: 96px;
  --kh-space-5xl: 128px;

  /* Vertikaler Sektionsrhythmus — zentral, nicht pro Modul */
  --kh-space-section:       clamp(48px, 3vw + 32px, 96px);
  --kh-space-section-tight: clamp(32px, 2vw + 20px, 56px);
  --kh-space-section-roomy: clamp(64px, 5vw + 40px, 128px);
  --kh-space-block:         clamp(24px, 2vw + 12px, 40px);

  /* ---------- CONTAINER & RASTER ----------------------------------- */
  --kh-container-max:    1200px;
  --kh-container-wide:   1440px;
  --kh-container-narrow: 760px;
  --kh-container-form:   560px;
  --kh-container-pad:    clamp(16px, 4vw, 32px);
  --kh-grid-columns: 12;
  --kh-grid-gap:       clamp(16px, 2.5vw, 32px);
  --kh-grid-gap-tight: clamp(12px, 1.5vw, 20px);
  --kh-measure: 68ch;  /* maximale Zeilenlänge für Fließtext */

  /* ---------- BREAKPOINTS · Dokumentation -------------------------- */
  /* Media Queries benötigen Literale. Diese Werte sind die Referenz und
     werden in Abschnitt 20 exakt so verwendet. Elementor ist auf dieselben
     Werte einzustellen. */
  --kh-bp-sm: 480px;
  --kh-bp-md: 768px;
  --kh-bp-lg: 1024px;
  --kh-bp-xl: 1280px;

  /* ---------- RADIEN ----------------------------------------------- */
  --kh-radius-xs: 4px;
  --kh-radius-sm: 6px;   /* Grundmaß — Controls */
  --kh-radius-md: 10px;  /* Cards */
  --kh-radius-lg: 16px;
  --kh-radius-xl: 24px;
  --kh-radius-pill: 999px;
  --kh-radius-circle: 50%;
  --kh-radius-flag: 0 var(--kh-radius-sm) var(--kh-radius-sm) var(--kh-radius-sm);

  /* ---------- SCHATTEN --------------------------------------------- */
  --kh-shadow-xs: 0 1px 2px rgba(0, 0, 0, .06);
  --kh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 4px -1px rgba(0, 0, 0, .08);
  --kh-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, .06), 0 6px 16px -4px rgba(0, 0, 0, .10);
  --kh-shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, .06), 0 16px 40px -8px rgba(0, 0, 0, .14);
  --kh-shadow-header: 0 1px 0 rgba(0, 0, 0, .08), 0 4px 12px -6px rgba(0, 0, 0, .14);
  --kh-shadow-bar: 0 -2px 12px -4px rgba(0, 0, 0, .18);
  --kh-shadow-focus: 0 0 0 2px var(--kh-color-surface-000),
                     0 0 0 5px var(--kh-color-focus-ring);
  --kh-shadow-none: none;

  /* ---------- BEWEGUNG --------------------------------------------- */
  --kh-transition-instant: 80ms;
  --kh-transition-fast:    120ms;
  --kh-transition-base:    200ms;  /* Standard */
  --kh-transition-slow:    320ms;
  --kh-transition-panel:   420ms;  /* Off Canvas, Overlay */
  --kh-ease-standard: cubic-bezier(.2, .7, .3, 1);
  --kh-ease-in-out:   cubic-bezier(.45, .05, .55, .95);
  --kh-ease-emphasis: cubic-bezier(.34, 1.28, .64, 1);
  --kh-transition-colors:
      color var(--kh-transition-base) var(--kh-ease-standard),
      background-color var(--kh-transition-base) var(--kh-ease-standard),
      border-color var(--kh-transition-base) var(--kh-ease-standard);

  /* ---------- EBENEN ----------------------------------------------- */
  --kh-z-base: 0;
  --kh-z-raised: 10;
  --kh-z-sticky: 100;
  --kh-z-actionbar: 150;
  --kh-z-header: 200;
  --kh-z-dropdown: 300;
  --kh-z-overlay: 400;
  --kh-z-drawer: 500;
  --kh-z-modal: 600;
  --kh-z-toast: 700;
  --kh-z-skiplink: 800;

  /* ---------- KOMPONENTENMASSE ------------------------------------- */
  --kh-header-height: 64px;      /* mobil */
  --kh-header-height-lg: 76px;   /* ab 1024px */
  --kh-control-height-sm: 36px;
  --kh-control-height: 44px;     /* Standard = Touch-Minimum */
  --kh-control-height-lg: 52px;
  --kh-field-height: 48px;
  --kh-button-padding-x: 24px;
  --kh-card-padding: clamp(20px, 2vw, 28px);
  --kh-icon-sm: 16px;
  --kh-icon-md: 20px;
  --kh-icon-lg: 24px;
  --kh-icon-xl: 32px;
  --kh-icon-2xl: 48px;
  --kh-tap-min: 44px;
  --kh-map-height: clamp(320px, 52vh, 640px);
  --kh-locator-rail: 400px;
  --kh-actionbar-height: 64px;
  --kh-actionbar-offset: calc(var(--kh-actionbar-height) + env(safe-area-inset-bottom, 0px));

  /* ---------- ERGÄNZENDE KOMPONENTENMASSE -------------------------- */
  /* Nicht Teil des in v1.0 freigegebenen Satzes. Für Off Canvas, Dropdown
     und Suche werden Maße benötigt, die v1.0 nicht festlegt. Sie sind
     hier gebündelt, damit im Review sofort sichtbar ist, was ergänzt
     wurde, und leiten sich aus vorhandenen Werten ab. */
  --kh-offcanvas-sm: 320px;
  --kh-offcanvas-md: var(--kh-locator-rail);  /* 400px */
  --kh-offcanvas-lg: 560px;
  --kh-offcanvas-max: 92vw;
  --kh-dropdown-min: 240px;
  --kh-search-max: 720px;
}

/* Ab 1024px wächst nur die Headerhöhe — alles Übrige skaliert über clamp(). */
@media (min-width: 1024px) {
  :root { --kh-header-height: var(--kh-header-height-lg); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kh-transition-instant: 1ms;
    --kh-transition-fast: 1ms;
    --kh-transition-base: 1ms;
    --kh-transition-slow: 1ms;
    --kh-transition-panel: 1ms;
  }
}


/* ==========================================================
   02. RESET & BASE
   ========================================================== */

/* Bewusst schlank gehalten: Hello Elementor und Elementor Pro bringen
   eigene Grundregeln mit. Zurückgesetzt wird nur, was dem Designsystem
   im Weg steht. Keine aggressiven Resets auf Elementor-Strukturen. */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sprungziele landen nicht unter dem fixierten Header. */
  scroll-padding-top: calc(var(--kh-header-height) + var(--kh-space-md));
  tab-size: 4;
}

/* Verbindlich: bei reduzierter Bewegung bleibt kein erzwungenes
   Smooth Scrolling zurück. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--kh-color-surface-000);
  color: var(--kh-color-ink-700);
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-regular);
  line-height: var(--kh-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* Medien ---------------------------------------------------------------- */

img,
picture,
video,
canvas,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

img { border-style: none; }

svg:not([fill]) { fill: currentColor; }

svg { flex-shrink: 0; }

/* Bild-Seitenverhältnis erhalten, wenn width/height im Markup stehen.
   :where() hält die Spezifität bei null — sonst schlüge diese Regel jede
   Komponentenklasse, die eine feste Bildhöhe setzt (Logo, Card-Medien). */
:where(img[width][height]) { height: auto; }

figure {
  margin: 0;
}

figcaption {
  margin-top: var(--kh-space-xs);
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

/* Text ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--kh-font-heading);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  color: var(--kh-color-ink-900);
  text-wrap: balance;
}

p { margin: 0 0 var(--kh-space-md); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--kh-font-weight-bold); }

small { font-size: var(--kh-text-sm); }

blockquote {
  margin: 0 0 var(--kh-space-md);
  padding-left: var(--kh-space-lg);
  border-left: 3px solid var(--kh-color-primary-500);
  color: var(--kh-color-ink-900);
  font-size: var(--kh-text-lead);
  line-height: var(--kh-leading-relaxed);
}

blockquote cite {
  display: block;
  margin-top: var(--kh-space-xs);
  font-size: var(--kh-text-sm);
  font-style: normal;
  color: var(--kh-color-ink-500);
}

address {
  font-style: normal;
  line-height: var(--kh-leading-normal);
}

hr {
  height: 1px;
  margin: var(--kh-space-xl) 0;
  border: 0;
  background-color: var(--kh-color-line-200);
}

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9375em;
}

/* Links ----------------------------------------------------------------- */

a {
  color: var(--kh-color-primary-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: var(--kh-transition-colors);
}

a:hover { color: var(--kh-color-primary-700); }

/* Listen ---------------------------------------------------------------- */

ul, ol {
  margin: 0 0 var(--kh-space-md);
  padding-left: var(--kh-space-lg);
}

ul:last-child, ol:last-child { margin-bottom: 0; }

li { margin-bottom: var(--kh-space-2xs); }

li::marker { color: var(--kh-color-ink-500); }

/* Listen, die als Layout dienen, tragen kh-Klassen und werden dort
   zurückgesetzt — siehe Abschnitt 18. */

dl { margin: 0 0 var(--kh-space-md); }
dt { font-weight: var(--kh-font-weight-bold); color: var(--kh-color-ink-900); }
dd { margin: 0 0 var(--kh-space-xs); }

/* Tabellen -------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kh-text-sm);
}

caption {
  padding-bottom: var(--kh-space-xs);
  text-align: left;
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

th, td {
  padding: var(--kh-space-sm) var(--kh-space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--kh-color-line-200);
}

th {
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-ink-900);
}

/* Formular-Grundlagen ---------------------------------------------------- */

button,
input,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled { cursor: not-allowed; }

textarea {
  resize: vertical;
  overflow: auto;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: var(--kh-space-sm);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-ink-900);
}

::placeholder {
  color: var(--kh-color-ink-400);
  opacity: 1;
}

/* Auswahl & Scrollbars --------------------------------------------------- */

::selection {
  background-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);
}

:target {
  scroll-margin-top: calc(var(--kh-header-height) + var(--kh-space-md));
}


/* ==========================================================
   03. TYPOGRAPHY
   ========================================================== */

/* Die HTML-Überschriften erhalten sinnvolle Grundwerte, damit auch
   redaktionell gesetzte Inhalte stimmen. Verbindlich für das
   Designsystem sind jedoch die kh-Klassen. */

h1 { font-size: var(--kh-text-h1); line-height: var(--kh-leading-tight); letter-spacing: -.025em; }
h2 { font-size: var(--kh-text-h2); line-height: 1.2;  letter-spacing: -.02em; }
h3 { font-size: var(--kh-text-h3); line-height: 1.28; letter-spacing: var(--kh-tracking-snug); }
h4 { font-size: var(--kh-text-h4); line-height: 1.35; letter-spacing: -.01em; }
h5 { font-size: var(--kh-text-body); line-height: 1.4; }
h6 { font-size: var(--kh-text-sm);   line-height: 1.4; }

.kh-display,
.kh-h1,
.kh-h2,
.kh-h3,
.kh-h4 {
  font-family: var(--kh-font-heading);
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-ink-900);
  text-wrap: balance;
  margin: 0;
}

.kh-display {
  font-size: var(--kh-text-display);
  line-height: 1.05;
  letter-spacing: var(--kh-tracking-tight);
}

.kh-h1 {
  font-size: var(--kh-text-h1);
  line-height: var(--kh-leading-tight);
  letter-spacing: -.025em;
}

.kh-h2 {
  font-size: var(--kh-text-h2);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.kh-h3 {
  font-size: var(--kh-text-h3);
  line-height: 1.28;
  letter-spacing: var(--kh-tracking-snug);
}

.kh-h4 {
  font-size: var(--kh-text-h4);
  line-height: 1.35;
  letter-spacing: -.01em;
}

.kh-lead {
  font-size: var(--kh-text-lead);
  font-weight: var(--kh-font-weight-regular);
  line-height: 1.6;
  color: var(--kh-color-ink-700);
  margin: 0;
}

.kh-text {
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-700);
  margin: 0;
}

.kh-text-sm {
  font-size: var(--kh-text-sm);
  line-height: 1.55;
  color: var(--kh-color-ink-500);
  margin: 0;
}

.kh-label {
  display: block;
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.3;
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-ink-500);
  margin: 0;
}

.kh-price {
  display: block;
  font-size: var(--kh-text-price);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1;
  letter-spacing: var(--kh-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-ink-900);
  margin: 0;
}

.kh-price--brand { color: var(--kh-color-primary-500); }

.kh-price__note {
  display: block;
  margin-top: var(--kh-space-2xs);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-regular);
  letter-spacing: var(--kh-tracking-normal);
  color: var(--kh-color-ink-500);
}

.kh-price__old {
  margin-left: var(--kh-space-xs);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-regular);
  letter-spacing: var(--kh-tracking-normal);
  color: var(--kh-color-ink-500);
  text-decoration: line-through;
}

/* Fließtextbereich: für redaktionelle Inhalte und Rechtstexte. */
.kh-prose {
  max-width: var(--kh-measure);
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
}

.kh-prose > * + * { margin-top: var(--kh-space-md); }

.kh-prose h2 { margin-top: var(--kh-space-xl); }
.kh-prose h3 { margin-top: var(--kh-space-lg); }
.kh-prose h2:first-child,
.kh-prose h3:first-child { margin-top: 0; }

.kh-prose ul,
.kh-prose ol { padding-left: var(--kh-space-lg); }

.kh-prose a { font-weight: var(--kh-font-weight-medium); }

/* Auf dunklen und roten Flächen kippt die gesamte Textfarbrolle. */
.kh-section--dark .kh-display,
.kh-section--dark .kh-h1,
.kh-section--dark .kh-h2,
.kh-section--dark .kh-h3,
.kh-section--dark .kh-h4,
.kh-section--brand .kh-display,
.kh-section--brand .kh-h1,
.kh-section--brand .kh-h2,
.kh-section--brand .kh-h3,
.kh-section--brand .kh-h4 { color: var(--kh-color-ink-inverse); }

.kh-section--dark .kh-lead,
.kh-section--dark .kh-text { color: rgba(255, 255, 255, .88); }

.kh-section--dark .kh-text-sm,
.kh-section--dark .kh-label { color: rgba(255, 255, 255, .72); }

/* Auf der Markenflaeche #E60000 erreicht nur reines Weiss den AA-Wert:
   weiss 100% = 4.81:1, 92% = 4.18:1, 88% = 3.87:1, 82% = 3.46:1.
   Auf #1A1A1A sind abgesenkte Deckungen dagegen unbedenklich (>= 9:1).
   Deshalb wird auf --brand nicht abgesenkt. */
.kh-section--brand .kh-lead,
.kh-section--brand .kh-text,
.kh-section--brand .kh-text-sm,
.kh-section--brand .kh-label { color: var(--kh-color-ink-inverse); }

/* Rot auf Dunkel nur über den dafür vorgesehenen Token. */
.kh-section--dark .kh-price--brand { color: var(--kh-color-primary-on-dark); }


/* ==========================================================
   04. LAYOUT
   ========================================================== */

/* Der vertikale Rhythmus wird ausschließlich hier gesteuert.
   In Elementor bleiben die Padding-Felder leer. */

.kh-section {
  position: relative;
  padding-top: var(--kh-space-section);
  padding-bottom: var(--kh-space-section);
  background-color: var(--kh-color-surface-000);
}

.kh-section--tight {
  padding-top: var(--kh-space-section-tight);
  padding-bottom: var(--kh-space-section-tight);
}

.kh-section--roomy {
  padding-top: var(--kh-space-section-roomy);
  padding-bottom: var(--kh-space-section-roomy);
}

.kh-section--surface { background-color: var(--kh-color-surface-100); }

.kh-section--dark {
  background-color: var(--kh-color-surface-900);
  color: rgba(255, 255, 255, .88);
}

.kh-section--brand {
  background-color: var(--kh-color-surface-brand);
  color: var(--kh-color-ink-inverse);
}

/* --flush: ohne vertikales Polster, z. B. für Karten- und Splitflächen. */
.kh-section--flush {
  padding-top: 0;
  padding-bottom: 0;
}

/* Container --------------------------------------------------------------- */

.kh-container {
  width: 100%;
  max-width: var(--kh-container-max);
  margin-inline: auto;
  padding-inline: var(--kh-container-pad);
}

.kh-container--wide   { max-width: var(--kh-container-wide); }
.kh-container--narrow { max-width: var(--kh-container-narrow); }
.kh-container--form   { max-width: var(--kh-container-form); }

/* Container ohne seitliches Polster — nur für randlose Medien. */
.kh-container--flush { padding-inline: 0; }

/* Raster ------------------------------------------------------------------ */
/* Mobile first: alles beginnt einspaltig, Spalten kommen in Abschnitt 20. */

.kh-grid {
  display: grid;
  gap: var(--kh-grid-gap);
  grid-template-columns: 1fr;
}

.kh-grid--tight { gap: var(--kh-grid-gap-tight); }

/* --auto füllt die Reihe selbstständig und braucht keine Breakpoints. */
.kh-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Stack: vertikale Abstände zwischen Geschwistern. ------------------------- */

.kh-stack {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-md);
}

.kh-stack--xs { gap: var(--kh-space-xs); }
.kh-stack--sm { gap: var(--kh-space-sm); }
.kh-stack--lg { gap: var(--kh-space-lg); }
.kh-stack--xl { gap: var(--kh-space-xl); }
.kh-stack--block { gap: var(--kh-space-block); }

/* Cluster: horizontale Gruppe, die umbricht. ------------------------------ */

.kh-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-space-sm);
}

/* Elementor-Container liefern flex-direction/flex-wrap ueber eigene Variablen
   und setzen sie mit .e-con.e-flex (0,2,0) auf column. Die Klasse wird daher
   verdoppelt (ebenfalls 0,2,0) und gewinnt ueber die spaetere Quellreihenfolge
   — ohne !important und ohne Elementor-IDs. Betrifft jeden Cluster im Builder. */
.kh-cluster.kh-cluster {
  --flex-direction: row;
  --flex-wrap: wrap;
  flex-direction: row;
}

.kh-cluster--xs { gap: var(--kh-space-xs); }
.kh-cluster--lg { gap: var(--kh-space-lg); }
.kh-cluster--between { justify-content: space-between; }
.kh-cluster--center  { justify-content: center; }
.kh-cluster--end     { justify-content: flex-end; }
.kh-cluster--top     { align-items: flex-start; }

/* Section Header ---------------------------------------------------------- */

.kh-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-sm);
  margin-bottom: var(--kh-space-block);
  max-width: var(--kh-measure);
}

.kh-section-header__eyebrow {
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.3;
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-primary-text);
  margin: 0;
}

.kh-section-header__title {
  font-size: var(--kh-text-h2);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--kh-color-ink-900);
  margin: 0;
}

.kh-section-header__lead {
  font-size: var(--kh-text-lead);
  line-height: 1.6;
  color: var(--kh-color-ink-700);
  margin: 0;
}

.kh-section-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-space-sm);
  margin-top: var(--kh-space-2xs);
}

.kh-section-header--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* Farbrollen auf dunklen und roten Flächen. */
.kh-section--dark .kh-section-header__title,
.kh-section--brand .kh-section-header__title { color: var(--kh-color-ink-inverse); }

.kh-section--dark .kh-section-header__lead,
.kh-section--brand .kh-section-header__lead { color: rgba(255, 255, 255, .88); }

.kh-section--dark .kh-section-header__eyebrow { color: var(--kh-color-primary-on-dark); }
.kh-section--brand .kh-section-header__eyebrow { color: rgba(255, 255, 255, .82); }


/* ==========================================================
   05. BUTTONS & CONTROLS
   ========================================================== */

.kh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kh-space-xs);
  min-height: var(--kh-control-height);
  padding-inline: var(--kh-button-padding-x);
  border: 2px solid transparent;
  border-radius: var(--kh-radius-sm);
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
      var(--kh-transition-colors),
      box-shadow var(--kh-transition-base) var(--kh-ease-standard),
      transform var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-button__icon {
  width: var(--kh-icon-md);
  height: var(--kh-icon-md);
  flex: none;
}

/* Varianten --------------------------------------------------------------- */

.kh-button--primary {
  background-color: var(--kh-color-primary-500);
  border-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);
}

.kh-button--primary:hover {
  background-color: var(--kh-color-primary-600);
  border-color: var(--kh-color-primary-600);
  color: var(--kh-color-primary-contrast);
}

.kh-button--primary:active {
  background-color: var(--kh-color-primary-700);
  border-color: var(--kh-color-primary-700);
  transform: translateY(1px);
}

.kh-button--secondary {
  background-color: transparent;
  border-color: var(--kh-color-ink-900);
  color: var(--kh-color-ink-900);
}

.kh-button--secondary:hover {
  background-color: var(--kh-color-ink-900);
  color: var(--kh-color-ink-inverse);
}

.kh-button--secondary:active {
  /* Kein zweites Schwarz: der gedrückte Zustand nutzt denselben Token wie
     Hover und unterscheidet sich über die Verschiebung. Die Textfarbe muss
     mitkippen — auf Touch tritt :active ohne vorheriges :hover auf, sonst
     stünde dunkler Text auf dunkler Fläche. */
  background-color: var(--kh-color-ink-900);
  border-color: var(--kh-color-ink-900);
  color: var(--kh-color-ink-inverse);
  transform: translateY(1px);
}

.kh-button--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--kh-color-primary-text);
  padding-inline: var(--kh-space-sm);
  text-decoration: none;
}

.kh-button--ghost:hover {
  background-color: var(--kh-color-primary-050);
  color: var(--kh-color-primary-700);
}

.kh-button--ghost:active { transform: translateY(1px); }

/* Auf dunklen und roten Flächen ------------------------------------------- */

.kh-section--brand .kh-button--primary,
.kh-section--dark .kh-button--primary {
  background-color: var(--kh-color-surface-000);
  border-color: var(--kh-color-surface-000);
  color: var(--kh-color-ink-900);
}

.kh-section--brand .kh-button--primary:hover,
.kh-section--dark .kh-button--primary:hover {
  background-color: var(--kh-color-surface-100);
  border-color: var(--kh-color-surface-100);
  color: var(--kh-color-ink-900);
}

.kh-section--brand .kh-button--secondary,
.kh-section--dark .kh-button--secondary {
  border-color: var(--kh-color-ink-inverse);
  color: var(--kh-color-ink-inverse);
}

.kh-section--brand .kh-button--secondary:hover,
.kh-section--dark .kh-button--secondary:hover {
  background-color: var(--kh-color-ink-inverse);
  color: var(--kh-color-ink-900);
}

/* Gedrückter Zustand: ohne diese Regeln fiele Primär auf Vodafone-Rot
   und Sekundär auf dunkles Grau zurück — beides auf dunklem bzw. rotem
   Grund unbrauchbar. */
.kh-section--brand .kh-button--primary:active,
.kh-section--dark .kh-button--primary:active {
  background-color: var(--kh-color-surface-200);
  border-color: var(--kh-color-surface-200);
  color: var(--kh-color-ink-900);
}

.kh-section--brand .kh-button--secondary:active,
.kh-section--dark .kh-button--secondary:active {
  background-color: var(--kh-color-surface-100);
  border-color: var(--kh-color-surface-100);
  color: var(--kh-color-ink-900);
}

.kh-section--dark .kh-button--ghost { color: var(--kh-color-primary-on-dark); }
.kh-section--brand .kh-button--ghost { color: var(--kh-color-ink-inverse); }

.kh-section--dark .kh-button--ghost:hover,
.kh-section--brand .kh-button--ghost:hover {
  background-color: rgba(255, 255, 255, .12);
  color: var(--kh-color-ink-inverse);
}

/* Größen ------------------------------------------------------------------ */

.kh-button--lg {
  min-height: var(--kh-control-height-lg);
  padding-inline: var(--kh-space-xl);
  font-size: 1.0625rem;
}

/* 36px: nur zulässig, wenn daneben ein größeres Ziel steht oder das
   Element nicht als alleinstehendes Touch-Ziel dient. */
.kh-button--sm {
  min-height: var(--kh-control-height-sm);
  padding-inline: var(--kh-space-md);
  font-size: var(--kh-text-sm);
  border-width: 1px;
}

.kh-button--sm .kh-button__icon {
  width: var(--kh-icon-sm);
  height: var(--kh-icon-sm);
}

/* Volle Breite ------------------------------------------------------------ */

.kh-button--block {
  display: flex;
  width: 100%;
}

/* Volle Breite ausschließlich auf kleinen Viewports. Buttons werden
   niemals allein wegen --primary oder --secondary breit — das zerstörte
   sonst jede horizontale Komponente wie das Suchformular. */
.kh-button--block-mobile { width: auto; }

/* Zustände ---------------------------------------------------------------- */

.kh-button:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.kh-button:disabled,
.kh-button.is-disabled,
.kh-button[aria-disabled="true"] {
  background-color: var(--kh-color-line-200);
  border-color: var(--kh-color-line-200);
  color: var(--kh-color-ink-400);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.kh-button.is-loading {
  pointer-events: none;
  opacity: .72;
}

/* Icon-Button -------------------------------------------------------------- */

.kh-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--kh-control-height);
  height: var(--kh-control-height);
  padding: 0;
  border: 0;
  border-radius: var(--kh-radius-sm);
  background-color: transparent;
  color: var(--kh-color-ink-900);
  cursor: pointer;
  transition: var(--kh-transition-colors);
}

.kh-icon-button:hover {
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-primary-text);
}

.kh-icon-button:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.kh-icon-button svg {
  width: var(--kh-icon-lg);
  height: var(--kh-icon-lg);
}

/* Textlink mit Chevron ----------------------------------------------------- */

.kh-link {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-primary-text);
  text-decoration: none;
  transition: var(--kh-transition-colors);
}

.kh-link:hover {
  color: var(--kh-color-primary-700);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.kh-link:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: var(--kh-shadow-focus);
}

.kh-link__icon {
  width: var(--kh-icon-sm);
  height: var(--kh-icon-sm);
  transition: transform var(--kh-transition-base) var(--kh-ease-standard);
}

/* Bewegung nur auf Geräten mit echtem Hover — siehe Abschnitt 17. */
@media (hover: hover) and (pointer: fine) {
  .kh-link:hover .kh-link__icon { transform: translateX(2px); }
}

.kh-section--dark .kh-link { color: var(--kh-color-primary-on-dark); }
.kh-section--brand .kh-link { color: var(--kh-color-ink-inverse); }

/* Burger ------------------------------------------------------------------- */

.kh-burger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--kh-control-height);
  height: var(--kh-control-height);
  padding: 0;
  border: 0;
  border-radius: var(--kh-radius-sm);
  background-color: transparent;
  color: var(--kh-color-ink-900);
  cursor: pointer;
}

.kh-burger:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.kh-burger__bar,
.kh-burger__bar::before,
.kh-burger__bar::after {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  background-color: currentColor;
  border-radius: 2px;
  transition:
      transform var(--kh-transition-base) var(--kh-ease-standard),
      opacity var(--kh-transition-fast) linear,
      top var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-burger__bar { top: 50%; margin-top: -1px; }
.kh-burger__bar::before { content: ""; top: -7px; margin-left: 0; left: 0; }
.kh-burger__bar::after  { content: ""; top: 7px;  margin-left: 0; left: 0; }

/* Geöffneter Zustand: das Symbol wird zum Kreuz. */
.kh-burger[aria-expanded="true"] .kh-burger__bar { background-color: transparent; }
.kh-burger[aria-expanded="true"] .kh-burger__bar::before { top: 0; transform: rotate(45deg); }
.kh-burger[aria-expanded="true"] .kh-burger__bar::after  { top: 0; transform: rotate(-45deg); }


/* ==========================================================
   06. FORMS
   ========================================================== */

/* Nur globale Bausteine. Seitenspezifische Formularlayouts
   (Kontakt, Bewerbung, Booking) folgen in contact.css. */

.kh-field {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-2xs);
  min-width: 0;
}

.kh-field__label {
  display: block;
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.3;
  color: var(--kh-color-ink-700);
}

/* Pflichtkennzeichnung: das Sternchen steht im Markup, nicht im CSS. */
.kh-field__label-optional {
  font-weight: var(--kh-font-weight-regular);
  color: var(--kh-color-ink-500);
}

.kh-field__input,
.kh-field__select,
.kh-field__textarea {
  display: block;
  width: 100%;
  min-height: var(--kh-field-height);
  padding: var(--kh-space-sm) var(--kh-space-md);
  border: 1px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-surface-000);
  color: var(--kh-color-ink-900);
  font-family: var(--kh-font-sans);
  /* Verbindlich: mindestens 16px. Kleinere Werte lösen in iOS Safari
     beim Fokus einen automatischen Zoom aus. */
  font-size: var(--kh-text-field);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition:
      border-color var(--kh-transition-base) var(--kh-ease-standard),
      box-shadow var(--kh-transition-base) var(--kh-ease-standard),
      background-color var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-field__textarea {
  min-height: calc(var(--kh-field-height) * 2.5);
  line-height: var(--kh-leading-normal);
  resize: vertical;
}

/* Pfeil des Selects als reines CSS-Dreieck — kein Icon-Font, kein Data-URI. */
.kh-field__select {
  padding-right: var(--kh-space-2xl);
  cursor: pointer;
}

.kh-field__select-wrap {
  position: relative;
  display: block;
}

.kh-field__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--kh-space-md);
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--kh-color-ink-500);
  border-bottom: 2px solid var(--kh-color-ink-500);
  transform: rotate(45deg);
  pointer-events: none;
}

.kh-field__input:hover,
.kh-field__select:hover,
.kh-field__textarea:hover { border-color: var(--kh-color-ink-400); }

.kh-field__input:focus,
.kh-field__select:focus,
.kh-field__textarea:focus {
  outline: none;
  border-color: var(--kh-color-focus);
  box-shadow: 0 0 0 3px var(--kh-color-focus-ring);
}

.kh-field__input:focus-visible,
.kh-field__select:focus-visible,
.kh-field__textarea:focus-visible {
  outline: none;
  border-color: var(--kh-color-focus);
  box-shadow: 0 0 0 3px var(--kh-color-focus-ring);
}

.kh-field__input:disabled,
.kh-field__select:disabled,
.kh-field__textarea:disabled {
  background-color: var(--kh-color-surface-100);
  border-color: var(--kh-color-line-200);
  color: var(--kh-color-ink-400);
}

.kh-field__input[readonly],
.kh-field__textarea[readonly] {
  background-color: var(--kh-color-surface-050);
  color: var(--kh-color-ink-500);
}

.kh-field__help {
  font-size: var(--kh-text-sm);
  line-height: 1.45;
  color: var(--kh-color-ink-500);
}

/* Fehler wird über Farbe, Rand, Symbol und Text zugleich vermittelt. */
.kh-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--kh-space-2xs);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.45;
  color: var(--kh-color-danger);
}

.kh-field__error::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: var(--kh-radius-circle);
  background-color: var(--kh-color-danger);
  /* Ausrufezeichen aus zwei Rechtecken, ohne Grafikdatei. */
  box-shadow:
      inset 0 -4px 0 -3px var(--kh-color-surface-000),
      inset 0 3px 0 -1px var(--kh-color-surface-000);
}

.kh-field.has-error .kh-field__input,
.kh-field.has-error .kh-field__select,
.kh-field.has-error .kh-field__textarea,
.kh-field__input[aria-invalid="true"],
.kh-field__select[aria-invalid="true"],
.kh-field__textarea[aria-invalid="true"] {
  border-color: var(--kh-color-danger);
  background-color: var(--kh-color-danger-bg);
}

.kh-field.has-error .kh-field__input:focus,
.kh-field.has-error .kh-field__select:focus,
.kh-field.has-error .kh-field__textarea:focus {
  border-color: var(--kh-color-danger);
  box-shadow: 0 0 0 3px rgba(165, 0, 0, .28);
}

/* Checkbox & Radio --------------------------------------------------------- */

/* Die eigentliche Checkbox ist __mark. Der Input bleibt im Dokument,
   bleibt fokussierbar und bedienbar, ist aber unsichtbar. */
.kh-checkbox { position: relative; }

.kh-checkbox,
.kh-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--kh-space-sm);
  min-height: var(--kh-tap-min);
  padding-block: var(--kh-space-xs);
  font-size: var(--kh-text-body);
  line-height: 1.45;
  color: var(--kh-color-ink-700);
  cursor: pointer;
}

/* Checkbox: der Input liegt unsichtbar über der sichtbaren Marke.
   Er deckt bewusst nur die Box ab, nicht die ganze Zeile — sonst wären
   Links im Label (Datenschutzhinweis) nicht mehr anklickbar. Das Label
   umschließt ohnehin alles und schaltet die Box beim Klick mit. */
.kh-checkbox__input {
  position: absolute;
  left: 0;
  top: calc(var(--kh-space-xs) + 1px);
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.kh-checkbox__mark {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 2px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-xs);
  background-color: var(--kh-color-surface-000);
  pointer-events: none;
  transition:
      background-color var(--kh-transition-fast) var(--kh-ease-standard),
      border-color var(--kh-transition-fast) var(--kh-ease-standard),
      box-shadow var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-checkbox:hover .kh-checkbox__mark { border-color: var(--kh-color-ink-400); }

.kh-checkbox__input:checked + .kh-checkbox__mark {
  background-color: var(--kh-color-primary-500);
  border-color: var(--kh-color-primary-500);
}

/* Häkchen als gedrehter Rahmen — keine Grafik, kein Icon-Font.
   Es sitzt innerhalb der roten Fläche. */
.kh-checkbox__input:checked + .kh-checkbox__mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--kh-color-primary-contrast);
  border-bottom: 2px solid var(--kh-color-primary-contrast);
  transform: rotate(45deg);
}

/* Der Fokus des unsichtbaren Inputs wird auf der Marke dargestellt. */
.kh-checkbox__input:focus-visible + .kh-checkbox__mark {
  box-shadow: var(--kh-shadow-focus);
}

.kh-checkbox__input:disabled + .kh-checkbox__mark {
  border-color: var(--kh-color-line-200);
  background-color: var(--kh-color-surface-100);
}

.kh-checkbox__input:disabled:checked + .kh-checkbox__mark {
  background-color: var(--kh-color-ink-400);
  border-color: var(--kh-color-ink-400);
}

.kh-checkbox__input:disabled { cursor: not-allowed; }

.kh-checkbox:has(.kh-checkbox__input:disabled) {
  color: var(--kh-color-ink-400);
  cursor: not-allowed;
}

/* Radio behält seine Architektur: hier gibt es keine zweite Marke,
   der Input selbst ist das sichtbare Bedienelement. */
.kh-radio__input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 2px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-circle);
  background-color: var(--kh-color-surface-000);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition:
      background-color var(--kh-transition-fast) var(--kh-ease-standard),
      border-color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-radio__input:hover { border-color: var(--kh-color-ink-400); }

.kh-radio__input:checked {
  background-color: var(--kh-color-primary-500);
  border-color: var(--kh-color-primary-500);
  box-shadow: inset 0 0 0 4px var(--kh-color-surface-000);
}

.kh-radio__input:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* Ausgewählt und fokussiert zugleich: der innere Punkt entsteht über
   einen inset-Schatten, der Fokusring über äußere Schatten. Ohne diese
   Regel überschriebe der Fokus den Auswahlpunkt. */
.kh-radio__input:checked:focus-visible {
  outline: none;
  box-shadow:
      inset 0 0 0 4px var(--kh-color-surface-000),
      var(--kh-shadow-focus);
}

.kh-radio__input:disabled {
  border-color: var(--kh-color-line-200);
  background-color: var(--kh-color-surface-100);
  cursor: not-allowed;
}

.kh-checkbox__label,
.kh-radio__label { min-width: 0; }

.kh-checkbox__label a,
.kh-radio__label a { font-weight: var(--kh-font-weight-semibold); }

/* Gruppen ------------------------------------------------------------------ */

.kh-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-lg);
  min-width: 0;
}

.kh-form-group__legend {
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.35;
  color: var(--kh-color-ink-900);
  margin-bottom: var(--kh-space-2xs);
}

/* Mobile first: eine Spalte. Zweispaltig ab 768px, siehe Abschnitt 20. */
.kh-form-row {
  display: grid;
  gap: var(--kh-space-lg);
  grid-template-columns: 1fr;
  min-width: 0;
}

.kh-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-space-sm);
  margin-top: var(--kh-space-xs);
}


/* ==========================================================
   07. BADGES / CHIPS / TABS / ACCORDION
   ========================================================== */

/* Badge — eckig gegen runde Cards. -------------------------------------- */

.kh-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  min-height: 26px;
  padding-inline: var(--kh-space-xs);
  border: 1px solid transparent;
  border-radius: var(--kh-radius-xs);
  font-size: .78125rem;   /* 12.5px */
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
}

.kh-badge__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--kh-radius-circle);
  background-color: currentColor;
}

.kh-badge--primary {
  background-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);
}

.kh-badge--dark {
  background-color: var(--kh-color-ink-900);
  color: var(--kh-color-ink-inverse);
}

.kh-badge--success {
  background-color: var(--kh-color-success-bg);
  color: var(--kh-color-success);
}

.kh-badge--warning {
  background-color: var(--kh-color-warning-bg);
  color: var(--kh-color-warning);
}

/* „Geschlossen“ ist neutral, nicht rot — Rot bleibt Handlungsfarbe. */
.kh-badge--muted {
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-ink-500);
}

.kh-badge--outline {
  background-color: var(--kh-color-surface-000);
  border-color: var(--kh-color-line-300);
  color: var(--kh-color-ink-700);
}

/* Flag: sitzt in der oberen linken Ecke einer Card und trägt deren Kerbe. */
.kh-badge--flag {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--kh-radius-flag);
  background-color: var(--kh-color-ink-900);
  color: var(--kh-color-ink-inverse);
  z-index: var(--kh-z-raised);
}

/* Chip / Filter ----------------------------------------------------------- */

.kh-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  min-height: var(--kh-control-height-sm);
  padding-inline: var(--kh-space-sm);
  border: 1px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-pill);
  background-color: var(--kh-color-surface-000);
  color: var(--kh-color-ink-700);
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  transition: var(--kh-transition-colors);
}

.kh-chip:hover {
  border-color: var(--kh-color-ink-400);
  color: var(--kh-color-ink-900);
}

.kh-chip:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.kh-chip.is-active,
.kh-chip[aria-pressed="true"] {
  background-color: var(--kh-color-primary-500);
  border-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);
}

.kh-chip.is-active:hover,
.kh-chip[aria-pressed="true"]:hover {
  background-color: var(--kh-color-primary-600);
  border-color: var(--kh-color-primary-600);
  color: var(--kh-color-primary-contrast);
}

.kh-chip:disabled,
.kh-chip.is-disabled {
  background-color: var(--kh-color-surface-100);
  border-color: var(--kh-color-line-200);
  color: var(--kh-color-ink-400);
  cursor: not-allowed;
  pointer-events: none;
}

/* Das Entfernen-Kreuz besteht aus zwei gedrehten Linien. */
.kh-chip__remove {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.kh-chip__remove::before,
.kh-chip__remove::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  background-color: currentColor;
  border-radius: 2px;
}

.kh-chip__remove::before { transform: rotate(45deg); }
.kh-chip__remove::after  { transform: rotate(-45deg); }

/* Tabs --------------------------------------------------------------------- */

.kh-tabs { display: block; }

.kh-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--kh-space-xs);
  margin: 0 0 var(--kh-space-lg);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--kh-color-line-200);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.kh-tabs__tab {
  position: relative;
  flex: none;
  min-height: var(--kh-control-height);
  padding-inline: var(--kh-space-md);
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background-color: transparent;
  color: var(--kh-color-ink-500);
  font-family: var(--kh-font-sans);
  font-size: .9375rem;
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
      color var(--kh-transition-base) var(--kh-ease-standard),
      border-color var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-tabs__tab:hover { color: var(--kh-color-ink-900); }

.kh-tabs__tab:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-sm) var(--kh-radius-sm) 0 0;
  box-shadow: var(--kh-shadow-focus);
}

.kh-tabs__tab[aria-selected="true"],
.kh-tabs__tab.is-active {
  color: var(--kh-color-ink-900);
  border-bottom-color: var(--kh-color-primary-500);
}

.kh-tabs__tab:disabled,
.kh-tabs__tab.is-disabled {
  color: var(--kh-color-ink-400);
  cursor: not-allowed;
  pointer-events: none;
}

.kh-tabs__panel { display: block; }

.kh-tabs__panel:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-sm);
  box-shadow: var(--kh-shadow-focus);
}

/* Accordion ---------------------------------------------------------------- */

/* BEWEGUNG DES AUFKLAPPENS
   Die Werte stehen als Eigenschaften am Wurzelelement, damit Kurve und
   Dauer an einer Stelle liegen und main.js die Dauer auslesen kann —
   das Skript braucht sie nur als Sicherheitsfrist, falls transitionend
   einmal ausbleibt. Wer die Bewegung ändern will, ändert sie hier. */
.kh-accordion {
  --kh-accordion-duration: 450ms;
  --kh-accordion-ease: cubic-bezier(.4, 0, .2, 1);
  --kh-accordion-fade: 260ms;
  --kh-accordion-icon: 300ms;

  display: block;
  border-top: 1px solid var(--kh-color-line-200);
}

.kh-accordion__item {
  border-bottom: 1px solid var(--kh-color-line-200);
}

.kh-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-space-md);
  width: 100%;
  min-height: var(--kh-tap-min);
  padding: var(--kh-space-lg) 0;
  border: 0;
  background-color: transparent;
  color: var(--kh-color-ink-900);
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.35;
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  transition: color var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-accordion__trigger:hover { color: var(--kh-color-primary-text); }

.kh-accordion__trigger:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-sm);
  box-shadow: var(--kh-shadow-focus);
}

/* Chevron aus zwei Rahmenkanten, dreht sich beim Öffnen. Ruhiger als
   die übrigen Bedienelemente, damit er nicht vor dem Panel fertig ist:
   300 ms gegen 450 ms, dieselbe Kurve. */
.kh-accordion__icon {
  position: relative;
  flex: none;
  width: var(--kh-icon-lg);
  height: var(--kh-icon-lg);
  transition: transform var(--kh-accordion-icon) var(--kh-accordion-ease);
}

.kh-accordion__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -7px 0 0 -5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.kh-accordion__trigger[aria-expanded="true"] .kh-accordion__icon,
.kh-accordion__item.is-open .kh-accordion__icon { transform: rotate(180deg); }

/* Geschlossen ist der Inhalt nicht im Fluss und nicht fokussierbar.
   Das Umschalten übernimmt main.js — und zwar ausschliesslich über
   hidden: nur dieses Attribut nimmt das Panel aus dem Fluss.

   WARUM DIE HÖHE UND NICHT max-height
   Ein fester Grenzwert müsste die längste denkbare Antwort abdecken.
   Bei kurzen Antworten läuft die Bewegung dann den grössten Teil der
   Zeit durch leeren Raum und wirkt träge; bei einer längeren Antwort
   schneidet er ab. main.js misst deshalb die tatsächliche Höhe, setzt
   sie als Inline-Wert und gibt sie nach der Bewegung wieder frei —
   ein offenes Panel steht am Ende auf height: auto und wächst mit
   seinem Inhalt.

   WARUM DER INNENABSTAND MITLÄUFT
   Das Panel trägt seinen unteren Innenabstand selbst. Bliebe er
   stehen, könnte das Panel nie schmaler als 24 Pixel werden: die
   ersten hundert Millisekunden der Höhenbewegung wären unsichtbar,
   und der Anfang sähe aus wie ein Sprung auf 24. Er wird deshalb
   gemeinsam mit der Höhe geführt, mit derselben Dauer und Kurve.

   BEWUSST padding-bottom UND NICHT padding-block-end
   Nachgemessen: mit der logischen Eigenschaft steht sie zwar in der
   berechneten transition-Liste, wird aber nicht interpoliert — der
   Abstand springt im ersten Bild auf seinen Endwert. Die physische
   Eigenschaft animiert. Die Seite ist durchgehend horizontal-tb und
   ltr; beide Schreibweisen bezeichnen hier dieselbe Kante. */
.kh-accordion__content {
  display: block;
  overflow: hidden;
  opacity: 0;
  padding-bottom: var(--kh-space-lg);
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-700);
  transition:
      height var(--kh-accordion-duration) var(--kh-accordion-ease),
      padding-bottom var(--kh-accordion-duration) var(--kh-accordion-ease),
      opacity var(--kh-accordion-fade) ease;
}

/* hidden ist die einzige Anzeigeschaltung — es wird erst gesetzt, wenn
   die schliessende Bewegung durch ist. */
.kh-accordion__content[hidden] { display: none; }

.kh-accordion__content > :last-child { margin-bottom: 0; }

/* Die Einblendung ist deutlich kürzer als das Aufklappen: die Bewegung
   soll aus der Höhe kommen, nicht aus einem Überblenden.

   Bewusst nur die Klasse am Panel selbst: die Klasse am Element und
   aria-expanded am Auslöser setzt main.js sofort beim Klick — daran
   hängen Haken, Nummer und rote Kante, die nicht warten sollen. Die
   Deckkraft dagegen gehört zur Bewegung und wird deshalb erst mit ihr
   geschaltet. Hingen beide am selben Wahlausdruck, spränge sie. */
.kh-accordion__content.is-open { opacity: 1; }

/* Ohne Bewegung wird geschaltet, nicht animiert. main.js prüft dieselbe
   Einstellung und überspringt die Messung gleich mit. */
@media (prefers-reduced-motion: reduce) {

  .kh-accordion__content,
  .kh-accordion__icon { transition: none; }
}

@keyframes kh-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================
   08. CARDS – GLOBAL BASE ONLY
   ========================================================== */

/* Hier steht ausschließlich die Basis. Die Varianten
   kh-service-card, kh-offer-card, kh-location-card und kh-job-card
   werden in services.css bzw. pages.css definiert und erben von hier.
   Keine Komponente wird in zwei Dateien vollständig gebaut. */

.kh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Gleiche Höhen, sobald die Card in einem Grid liegt. */
  height: 100%;
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
  /* Im Ruhezustand kein Schatten — ein Raster aus vielen Karten
     bliebe sonst unruhig. Der Schatten kommt erst bei Hover. */
  box-shadow: var(--kh-shadow-none);
  overflow: hidden;
  transition:
      border-color var(--kh-transition-base) var(--kh-ease-standard),
      box-shadow var(--kh-transition-base) var(--kh-ease-standard),
      transform var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-card__media {
  position: relative;
  display: block;
  flex: none;
  background-color: var(--kh-color-surface-100);
  overflow: hidden;
}

.kh-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kh-card__media--16x9 { aspect-ratio: 16 / 9; }
.kh-card__media--4x3  { aspect-ratio: 4 / 3; }
.kh-card__media--1x1  { aspect-ratio: 1 / 1; }

.kh-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-sm);
  /* Der Body füllt die Card, damit der Fuß unten bündig steht. */
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--kh-card-padding);
}

.kh-card__title {
  font-size: 1.0625rem;
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--kh-color-ink-900);
  margin: 0;
}

.kh-card__text {
  font-size: var(--kh-text-sm);
  line-height: 1.55;
  color: var(--kh-color-ink-500);
  margin: 0;
}

.kh-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-space-xs);
  font-size: var(--kh-text-sm);
  line-height: 1.4;
  color: var(--kh-color-ink-500);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kh-card__meta > li { margin: 0; }

/* Der Fuß rutscht immer an die Unterkante, damit CTA-Zeilen
   über alle Karten einer Reihe fluchten. */
.kh-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-space-sm);
  margin-top: auto;
  padding-top: var(--kh-space-sm);
}

.kh-card__footer--stacked {
  flex-direction: column;
  align-items: stretch;
}

.kh-card__footer--stacked > .kh-button,
.kh-card__footer--stacked > .kh-button-wrap,
.kh-card__footer--stacked > .kh-button-wrap .elementor-button { width: 100%; }

.kh-card__footer--stacked > .kh-button-wrap .elementor-button { display: flex; }

/* Liegt der Fuß außerhalb des Body, braucht er eigenes Polster. */
.kh-card > .kh-card__footer {
  padding: 0 var(--kh-card-padding) var(--kh-card-padding);
}

/* Klickbare Cards ---------------------------------------------------------- */
/* Nur Karten, die tatsächlich zu einem Ziel führen, heben sich an. */

.kh-card--interactive { cursor: pointer; }

.kh-card--interactive:hover,
.kh-card--interactive:focus-within {
  border-color: var(--kh-color-line-300);
  box-shadow: var(--kh-shadow-md);
}

@media (hover: hover) and (pointer: fine) {
  .kh-card--interactive:hover { transform: translateY(-2px); }
}

.kh-card--interactive:focus-within {
  outline: none;
  box-shadow: var(--kh-shadow-md), var(--kh-shadow-focus);
}

/* Flächenlink: der Titel-Link deckt die ganze Card ab, ohne dass
   verschachtelte Links entstehen. */
.kh-card__link {
  color: inherit;
  text-decoration: none;
}

.kh-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Der Flächenlink besitzt immer einen eigenen sichtbaren Fokus. */
.kh-card__link:focus-visible {
  outline: 2px solid var(--kh-color-focus);
  outline-offset: 2px;
  border-radius: var(--kh-radius-xs);
}

/* Nur wenn die Card selbst den Ring über :focus-within zeichnet,
   entfällt der zweite Ring am Link — der Ersatz ist dann gesichert. */
.kh-card--interactive .kh-card__link:focus-visible { outline: none; }

/* Flächen-Varianten der Basis ---------------------------------------------- */

.kh-card--flat { border-color: transparent; background-color: var(--kh-color-surface-100); }
.kh-card--plain { border-color: transparent; background-color: transparent; }

.kh-card--dark {
  background-color: var(--kh-color-surface-900);
  border-color: var(--kh-color-surface-900);
}

.kh-card--dark .kh-card__title { color: var(--kh-color-ink-inverse); }
.kh-card--dark .kh-card__text,
.kh-card--dark .kh-card__meta { color: rgba(255, 255, 255, .78); }

.kh-card--brand {
  background-color: var(--kh-color-surface-brand);
  border-color: var(--kh-color-surface-brand);
}

.kh-card--brand .kh-card__title { color: var(--kh-color-ink-inverse); }
.kh-card--brand .kh-card__text,
.kh-card--brand .kh-card__meta { color: rgba(255, 255, 255, .88); }

/* Hervorhebung ohne zweite Markenfarbe: Schwarz übernimmt den Kanal,
   damit Rot für Preis und Handlung frei bleibt. */
.kh-card--featured {
  border-width: 2px;
  border-color: var(--kh-color-ink-900);
}


/* ==========================================================
   09. HEADER
   ========================================================== */

/* Sechs Hauptpunkte, ein Dropdown, rechts Suche und CTA.
   Kein Mega-Menü, keine Segment-Metaleiste.
   Die Höhe ist über --kh-header-height fixiert: 64px mobil, 76px ab 1024px. */

.kh-header {
  position: sticky;
  top: 0;
  z-index: var(--kh-z-header);
  background-color: var(--kh-color-surface-000);
  border-bottom: 1px solid var(--kh-color-line-200);
  transition: box-shadow var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-header.is-sticky {
  box-shadow: var(--kh-shadow-header);
  border-bottom-color: transparent;
}

.kh-header__bar {
  width: 100%;
  background-color: inherit;
}

.kh-header__inner {
  display: flex;
  align-items: center;
  gap: var(--kh-space-md);
  width: 100%;
  max-width: var(--kh-container-max);
  min-height: var(--kh-header-height);
  margin-inline: auto;
  padding-inline: var(--kh-container-pad);
}

.kh-header__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-right: auto;
  text-decoration: none;
  color: var(--kh-color-ink-900);
}

.kh-header__logo img,
.kh-header__logo svg {
  display: block;
  width: auto;
  height: 32px;
}

.kh-header__logo:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-sm);
  box-shadow: var(--kh-shadow-focus);
}

.kh-header__actions {
  display: flex;
  align-items: center;
  gap: var(--kh-space-xs);
  flex: none;
}

.kh-header__search-toggle { flex: none; }

/* Der CTA ist mobil ausgeblendet — dort trägt ihn die Action Bar
   bzw. der Fuß des Off-Canvas-Panels. Einblendung ab 768px. */
.kh-header__cta { display: none; }

/* Hauptnavigation ---------------------------------------------------------- */
/* Mobil unsichtbar; die Inhalte liegen dann im Off Canvas. */

.kh-nav { display: none; }

.kh-nav__list {
  display: flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kh-nav__item {
  position: relative;
  margin: 0;
}

.kh-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  min-height: var(--kh-tap-min);
  padding-inline: var(--kh-space-sm);
  border: 0;
  border-radius: var(--kh-radius-sm);
  background-color: transparent;
  color: var(--kh-color-ink-900);
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--kh-transition-colors);
}

.kh-nav__link:hover {
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-primary-text);
}

.kh-nav__link:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* Aktueller Menüpunkt: Unterstrich statt Fläche. */
.kh-nav__link[aria-current="page"],
.kh-nav__item.is-active > .kh-nav__link {
  color: var(--kh-color-ink-900);
  box-shadow: inset 0 -3px 0 0 var(--kh-color-primary-500);
  border-radius: var(--kh-radius-sm) var(--kh-radius-sm) 0 0;
}

.kh-nav__link[aria-current="page"]:focus-visible,
.kh-nav__item.is-active > .kh-nav__link:focus-visible {
  box-shadow: inset 0 -3px 0 0 var(--kh-color-primary-500), var(--kh-shadow-focus);
}


/* ==========================================================
   10. DROPDOWN NAVIGATION
   ========================================================== */

/* Nur „Unternehmen“ besitzt ein Dropdown: Über uns, Karriere, Kontakt.
   Kompakt, kein Mega-Menü. Das Umschalten übernimmt main.js über
   aria-expanded; die Klasse is-open ist als Alternative vorbereitet. */

.kh-nav__item--has-dropdown > .kh-nav__link { padding-right: var(--kh-space-xs); }

/* Chevron am Dropdown-Auslöser. */
.kh-nav__link-caret {
  position: relative;
  width: var(--kh-icon-sm);
  height: var(--kh-icon-sm);
  flex: none;
  transition: transform var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-nav__link-caret::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -5px 0 0 -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.kh-nav__link[aria-expanded="true"] .kh-nav__link-caret { transform: rotate(180deg); }

.kh-nav__dropdown {
  position: absolute;
  top: calc(100% - var(--kh-space-2xs));
  left: 0;
  z-index: var(--kh-z-dropdown);
  display: none;
  min-width: var(--kh-dropdown-min);
  margin: 0;
  padding: var(--kh-space-xs);
  list-style: none;
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
  box-shadow: var(--kh-shadow-lg);
}

.kh-nav__dropdown > li { margin: 0; }

.kh-nav__link[aria-expanded="true"] + .kh-nav__dropdown,
.kh-nav__item.is-open > .kh-nav__dropdown,
.kh-nav__dropdown.is-open {
  display: block;
  animation: kh-dropdown-in var(--kh-transition-base) var(--kh-ease-standard) both;
}

@keyframes kh-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.kh-nav__dropdown-link {
  display: flex;
  align-items: center;
  min-height: var(--kh-tap-min);
  padding: var(--kh-space-xs) var(--kh-space-sm);
  border-radius: var(--kh-radius-sm);
  color: var(--kh-color-ink-700);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-medium);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--kh-transition-colors);
}

.kh-nav__dropdown-link:hover {
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-primary-text);
}

.kh-nav__dropdown-link:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.kh-nav__dropdown-link[aria-current="page"] {
  color: var(--kh-color-ink-900);
  font-weight: var(--kh-font-weight-bold);
}

/* Das Dropdown des letzten Punktes bricht nach rechts aus. */
.kh-nav__item--has-dropdown:last-child > .kh-nav__dropdown {
  left: auto;
  right: 0;
}


/* ==========================================================
   11. SEARCH OVERLAY — ENTFALLEN
   ==========================================================

   Hier stand die Gestaltung einer eigenen, vollflächigen Suchebene
   (.kh-search-overlay). Sie ist entfernt.

   Die Suche ist seit dem Kopfbereich-Ausbau die Elementor-Popup-Vorlage
   „Global Search"; gestaltet wird sie in Abschnitt 25.4. Das Markup für
   diesen Abschnitt hat nie existiert — die Lupe im Kopf zeigte auf ein
   #kh-site-search, das auf keiner Seite gebaut war, und main.js hat die
   Ebene deshalb nie geöffnet.

   Zwei Suchebenen nebeneinander stehen zu lassen, hätte die nächste
   Änderung an der falschen ansetzen lassen.
   ========================================================== */


/* ==========================================================
   12. OFF CANVAS — ENTFALLEN
   ==========================================================

   Hier stand ein universelles Gehäuse für seitliche Panels
   (.kh-offcanvas mit Backdrop, Panel, Kopf, Körper und Fuß). Es ist
   entfernt.

   Das einzige Panel, das die Website braucht, ist die mobile Navigation
   — und die ist heute die Elementor-Popup-Vorlage „Mobile Navigation".
   Elementor bringt Einfahren, Hintergrund, Scroll-Sperre und Fokusfalle
   mit; die Fläche selbst steht in Abschnitt 25.5.

   Auch dieser Abschnitt hatte nie ein Markup: [data-kh-offcanvas] kam
   auf keiner Seite vor. Ein zweites Gehäuse stehen zu lassen, hätte
   später die Frage aufgeworfen, welches denn nun gilt.

   Die Maße --kh-offcanvas-* in Abschnitt 01 bleiben: --kh-offcanvas-md
   ist zugleich --kh-locator-rail und wird vom Standortfinder genutzt.
   ========================================================== */


/* ==========================================================
   13. MOBILE NAVIGATION
   ========================================================== */

/* Inhalt des mobilen Menüs. Keine zweite Drawer-Engine: Gehäuse,
   Einfahren und Zustände gehören dem Elementor-Popup „Mobile
   Navigation" (Fläche in Abschnitt 25.5). Hier steht ausschließlich,
   wie die Menüpunkte selbst aussehen.
   Die Navigationstiefe wird über Flächen unterschieden —
   Ebene 1 weiß, Ebene 2 grau.

   Diese Darstellung ist unverändert geblieben: dasselbe Markup, dieselben
   Klassen, dieselben Tap-Ziele. Nur das Gehäuse darum ist ausgetauscht. */

.kh-mobile-nav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kh-mobile-nav__item {
  margin: 0;
  border-bottom: 1px solid var(--kh-color-line-200);
}

.kh-mobile-nav__item:last-child { border-bottom: 0; }

.kh-mobile-nav__link {
  display: flex;
  align-items: center;
  gap: var(--kh-space-sm);
  min-height: 56px;
  padding: var(--kh-space-sm) var(--kh-space-md);
  color: var(--kh-color-ink-900);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.3;
  text-decoration: none;
  transition: var(--kh-transition-colors);
}

.kh-mobile-nav__link:hover {
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-primary-text);
}

.kh-mobile-nav__link:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.kh-mobile-nav__link[aria-current="page"] {
  color: var(--kh-color-primary-text);
  box-shadow: inset 3px 0 0 0 var(--kh-color-primary-500);
}

/* Zeile mit Unterpunkten: Link und Umschalter liegen nebeneinander,
   damit der Link selbst erreichbar bleibt. */
.kh-mobile-nav__item--has-submenu > .kh-mobile-nav__link { flex: 1 1 auto; }

.kh-mobile-nav__row {
  display: flex;
  align-items: stretch;
}

.kh-mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  min-height: 56px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--kh-color-line-200);
  background-color: transparent;
  color: var(--kh-color-ink-700);
  cursor: pointer;
  transition: var(--kh-transition-colors);
}

.kh-mobile-nav__toggle:hover {
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-primary-text);
}

.kh-mobile-nav__toggle:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.kh-mobile-nav__toggle-icon {
  position: relative;
  width: var(--kh-icon-lg);
  height: var(--kh-icon-lg);
  transition: transform var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-mobile-nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -7px 0 0 -5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.kh-mobile-nav__toggle[aria-expanded="true"] .kh-mobile-nav__toggle-icon { transform: rotate(180deg); }

/* Untermenü: Ebene 2 sitzt auf grauer Fläche. ----------------------------- */

.kh-mobile-nav__submenu {
  display: none;
  background-color: var(--kh-color-surface-100);
  border-top: 1px solid var(--kh-color-line-200);
}

.kh-mobile-nav__toggle[aria-expanded="true"] ~ .kh-mobile-nav__submenu,
.kh-mobile-nav__item.is-open > .kh-mobile-nav__submenu,
.kh-mobile-nav__submenu.is-open {
  display: block;
  animation: kh-reveal var(--kh-transition-slow) var(--kh-ease-standard) both;
}

/* Eigener Block: eine ungültige :has()-Regel darf die Selektoren
   darüber nicht mitreißen. */
.kh-mobile-nav__row:has(.kh-mobile-nav__toggle[aria-expanded="true"]) + .kh-mobile-nav__submenu {
  display: block;
  animation: kh-reveal var(--kh-transition-slow) var(--kh-ease-standard) both;
}

.kh-mobile-nav__list--sub {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kh-mobile-nav__list--sub .kh-mobile-nav__item { border-bottom-color: var(--kh-color-line-300); }
.kh-mobile-nav__list--sub .kh-mobile-nav__item:last-child { border-bottom: 0; }

.kh-mobile-nav__list--sub .kh-mobile-nav__link {
  min-height: var(--kh-tap-min);
  padding-left: var(--kh-space-xl);
  font-weight: var(--kh-font-weight-regular);
  color: var(--kh-color-ink-700);
}

.kh-mobile-nav__list--sub .kh-mobile-nav__link:hover {
  background-color: var(--kh-color-surface-200);
  color: var(--kh-color-primary-text);
}

/* Fuß des Panels: Telefon, Termin, rechtliche Kurzlinks. ------------------ */

.kh-mobile-nav__footer {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-sm);
}

.kh-mobile-nav__footer .kh-button,
.kh-mobile-nav__footer .kh-button-wrap,
.kh-mobile-nav__footer .kh-button-wrap .elementor-button { width: 100%; }

.kh-mobile-nav__footer .kh-button-wrap .elementor-button { display: flex; }

.kh-mobile-nav__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-space-xs) var(--kh-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--kh-text-sm);
}

.kh-mobile-nav__meta a {
  color: var(--kh-color-ink-500);
  text-decoration: none;
}

.kh-mobile-nav__meta a:hover {
  color: var(--kh-color-primary-text);
  text-decoration: underline;
}


/* ==========================================================
   14. FOOTER
   ========================================================== */

/* Bewusst reduziert. Zwei Ebenen, eine Achse.

   OBEN    vier gleich breite Linkspalten. Nur Überschrift und Links —
           keine Bilder, keine Logos, keine Karten, keine Fließtexte.
   UNTEN   eine feine Linie, darunter mittig der rechtliche Hinweis, das
           Copyright und zuletzt die Signatur der Agentur.

   WAS HIER NICHT MEHR STEHT
   Der Markenblock mit Kahraman-Logo, Beschreibungssatz und rotem Akzent ist
   entfallen, ebenso die dreizonige Meta-Zeile und die doppelt geführten
   Rechtslinks. Der Footer trägt die Marke über Typografie, Fläche und
   Rhythmus — das Logo steht im Kopf, und dort genügt es. Rot erscheint nur
   noch als Hover-Ton der Links, sonst nirgends.

   Die gesamte Gestaltung steht hier. Am Footer sind in Elementor keine
   Farben, Schriftgrößen, Abstände oder Breiten hinterlegt — das Layout hat
   genau eine Quelle.

   Die Menüs sind native Elementor-Icon-List-Widgets; die Regeln greifen
   deshalb auf deren Markup zu, immer unterhalb einer kh-Klasse und ohne
   Element-IDs. Die Spaltenüberschriften sind bewusst keine <h>-Elemente:
   ein Footer-Label ist eine Wegmarke, keine Gliederungsebene. */

/* WARUM HIER display STEHT
   Elementor gibt seinen Containern die Anzeigeart über .e-con { display:
   var(--display) }. Auf dieser Installation ist Elementors Container-CSS
   auf der Seite nicht vorhanden — die Variable ist leer, die Deklaration
   damit ungültig, und display fällt auf seinen Initialwert zurück: inline.
   Gemessen: 23 von 76 Containern stehen so auf inline.

   Für den Footer ist das nicht egal. Er trägt die dunkle Fläche, und ein
   Inline-Kasten zeichnet seinen Hintergrund um Zeilenboxen statt um den
   ganzen Block — der Footer erschien dadurch weiß. Die Anzeigeart steht
   deshalb hier, wo auch der Rest seiner Gestaltung steht. */
.kh-footer {
  display: block;
  background-color: var(--kh-color-surface-900);
  color: rgba(255, 255, 255, .78);
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-normal);
}

/* Die Layoutregeln stehen bewusst zweistufig (.kh-footer .kh-footer__x).
   Elementor setzt flex-direction über .e-con-full.e-flex — zwei Klassen.
   Eine einzelne kh-Klasse verlöre dagegen, unabhängig von der Ladereihenfolge. */
.kh-footer .kh-footer__inner {
  display: flex;
  flex-direction: column;
  /* Abstände ausschließlich aus dem 4-px-System: 48px mobil, 64px ab 1024px.
     Keine Zwischenwerte, keine clamp()-Rechnerei — beides ergäbe Zahlen, die
     im Designsystem nicht vorkommen. */
  gap: var(--kh-space-2xl);
  width: 100%;
  max-width: var(--kh-container-max);
  margin-inline: auto;
  padding: var(--kh-space-2xl) var(--kh-container-pad);
}

/* Elementor gibt Containern standardmäßig 10px Polster. Im Footer
   kommen sämtliche Abstände aus den Spacing-Tokens — sonst entstehen
   asymmetrische Fluchten zwischen linker und rechter Zone. */
.kh-footer .kh-footer__grid,
.kh-footer .kh-footer__column,
.kh-footer .kh-footer__base,
.kh-footer .kh-footer__credit {
  padding: 0;
}

/* Markenblock — ENTFALLEN -------------------------------------------------

   Hier stand der Markenblock: Kahraman-Logo, ein Beschreibungssatz und ein
   kurzer roter Akzentstrich darüber.

   Der Footer trägt die Marke jetzt über Typografie, Fläche und Rhythmus,
   nicht über ein zweites großes Logo — das Logo steht im Kopf, und dort
   genügt es. Ohne den Markenblock fällt auch das asymmetrische Raster weg:
   die vier Linkspalten stehen auf voller Breite.

   Entfernt statt ausgeblendet, denn das Template führt die Elemente nicht
   mehr. -------------------------------------------------------------------- */

/* Menüspalten ------------------------------------------------------------- */

.kh-footer .kh-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kh-space-xl) var(--kh-space-lg);
}

/* Die doppelt geführte Rechtsspalte wird ausgeblendet.

   Impressum, Datenschutz und Cookie-Einstellungen stehen im Footer zweimal:
   einmal als vierte Menüspalte, einmal in der Meta-Zeile unten. Sichtbar
   bleibt die Meta-Zeile — dort sucht man Rechtslinks, und dort stören sie die
   Gliederung der inhaltlichen Gruppen nicht. Es geht dabei KEIN Ziel verloren:
   beide Listen führen auf dieselben drei Adressen.

   Ausgeblendet statt gelöscht — aus demselben Grund wie bei den Chevrons: eine
   gestalterische Entscheidung soll keine Inhalte aus dem Template entfernen.
   Die Spalte bleibt im Elementor-Editor vorhanden und ist mit einer Zeile hier
   wieder sichtbar.

   Erkannt wird sie an ihrem Inhalt, nicht an ihrer Position: :nth-child(4)
   träfe nach einer Umsortierung die falsche Spalte. Fällt der Cookie-Link
   künftig weg, erscheint die Spalte wieder — ein ungefährlicher Ausgang. */
/* Früher stand die Rechtsspalte zweimal im Footer — hier und noch einmal in
   der Meta-Zeile darunter; deshalb war sie an dieser Stelle ausgeblendet.
   Die Meta-Zeile ist entfallen, die Links stehen nur noch an dieser einen
   Stelle. Vier gleichwertige Spalten, keine Dopplung. */

.kh-footer .kh-footer__column {
  display: flex;
  flex-direction: column;
  /* Die Überschrift sitzt dicht über ihrer Liste — der Abstand zwischen
     den Spalten trägt die Gliederung, nicht der innerhalb. */
  gap: var(--kh-space-3xs);
  min-width: 0;
}

/* Spaltenüberschriften: kompakt und semibold statt groß und fett.
   Eine Footer-Überschrift ist eine Wegmarke, keine Schlagzeile — in der
   Größe einer Überschrift vierter Ordnung wirkte sie lauter als die Marke
   darüber. Als kleines Versalien-Label ordnet sie, ohne zu dominieren.

   Kontrast: rgba(255,255,255,.62) ergibt auf #1A1A1A rund #A8A8A8 und damit
   etwa 7:1 — deutlich über der Anforderung, auch bei 12px. */
.kh-footer__heading,
.kh-footer__heading .elementor-heading-title {
  margin: 0 0 var(--kh-space-2xs);
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.35;
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  /* Überschriften brechen als Wort, nie Buchstabe für Buchstabe. */
  overflow-wrap: break-word;
  hyphens: none;
}

/* Menü = Elementor Icon List --------------------------------------------- */

.kh-footer__menu .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kh-footer__menu .elementor-icon-list-item {
  margin: 0;
}

/* Jedes Ziel erfüllt das Touch-Minimum aus dem Designsystem. */
.kh-footer__menu .elementor-icon-list-item > a {
  display: flex;
  align-items: center;
  /* Abstand Chevron zu Text laut Vorgabe 10–12px. */
  gap: var(--kh-space-sm);
  /* min-height allein trägt das Touch-Ziel — zusätzliches Polster
     würde den Footer nur unnötig hoch machen. */
  min-height: var(--kh-tap-min);
  color: rgba(255, 255, 255, .78);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-regular);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-footer__menu .elementor-icon-list-item > a:hover {
  color: var(--kh-color-primary-on-dark);
}

.kh-footer__menu .elementor-icon-list-item > a:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: 0 0 0 2px var(--kh-color-surface-900),
              0 0 0 5px var(--kh-color-focus-ring);
}

.kh-footer__menu .elementor-icon-list-item > a[aria-current="page"] {
  color: var(--kh-color-ink-inverse);
  font-weight: var(--kh-font-weight-semibold);
}

/* Chevrons: ausgeblendet.

   Ein Pfeil vor jedem einzelnen Link ist das Muster, das einen Footer nach
   Sitemap aussehen lässt. Ohne ihn stehen die Gruppen ruhiger, und der
   Hover-Zustand bleibt EIN Effekt statt drei (vorher: Textfarbe, Icon-Farbe
   und eine Bewegung des Icons gleichzeitig).

   Ausgeblendet, nicht gelöscht: die Symbole stehen weiterhin im Template.
   Eine gestalterische Entscheidung soll keine Inhaltsänderung erzwingen, die
   sich nur über den Elementor-Editor zurücknehmen liesse. Ein Wiedereinschalten
   ist eine Zeile hier. */
.kh-footer__menu .elementor-icon-list-icon {
  display: none;
}

/* Abschluss: Hinweis, Copyright, Signatur --------------------------------- */

/* Unter den vier Spalten folgt nur noch Ruhe: eine feine Linie, darunter
   mittig der rechtliche Hinweis, das Copyright und ganz zuletzt die
   Signatur der Agentur. Drei Zeilen auf einer Achse — keine zweite Leiste,
   keine dritte Zone, keine weitere Trennlinie.

   Die frühere Meta-Zeile mit Rechtslinks ist entfallen: Impressum,
   Datenschutz und Cookie-Einstellungen stehen jetzt in der vierten Spalte
   und damit nur noch an einer Stelle. */

.kh-footer .kh-footer__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kh-space-lg);

  margin-block-start: var(--kh-space-xl);
  padding-block-start: var(--kh-space-2xl);

  /* Sehr zurückhaltende Trennlinie: 10 % Weiß auf der dunklen Fläche, aus
     dem Tokenwert abgeleitet statt als fremde Farbe notiert. Eine harte
     weiße Linie würde den Abschluss abschneiden statt ihn anzuschließen. */
  border-block-start: 1px solid color-mix(in srgb, var(--kh-color-ink-inverse) 10%, transparent);
}

/* Elementor gibt Widgets und Containern in einem Flex-Elternteil die volle
   Breite. Ohne diese Zeile griffe die Zentrierung nicht — jedes Element
   stünde über die ganze Breite und wäre nur scheinbar mittig. */
.kh-footer .kh-footer__base > * {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

/* Rechtlicher Hinweis ----------------------------------------------------- */

/* Wortlaut: „Vertriebspartner", nicht „Partneragentur".
   Das ist der Begriff, den das Projekt bereits führt — im Impressum unter
   Tätigkeit und zweimal auf der Startseite. Der Vertragsstatus wird hier
   nicht neu erfunden. */

.kh-footer .kh-footer__disclaimer,
.kh-footer .kh-footer__disclaimer p {
  margin: 0;
  /* Vorgabe 700–850px Textbreite. */
  max-inline-size: 820px;
  /* Gemessen auf #1A1A1A: .60 ergibt 6,9:1. Der Hinweis ist der wichtigste
     Text dieses Bereichs und deshalb der hellste der drei. */
  color: rgba(255, 255, 255, .60);
  font-size: var(--kh-text-xs);
  line-height: 1.7;
  text-align: center;
  text-wrap: pretty;
}

/* Copyright --------------------------------------------------------------- */
/* Steht zwischen Hinweis und Signatur und ist der leiseste Ton im Footer. */

.kh-footer .kh-footer__copyright,
.kh-footer .kh-footer__copyright p {
  margin: 0;
  /* .38 sah ruhiger aus, ergab aber nur 3,57:1 und fiel damit unter AA.
     .55 sind 6,0:1 — leise genug und trotzdem lesbar. */
  color: rgba(255, 255, 255, .55);
  font-size: var(--kh-text-xs);
  line-height: 1.5;
  text-align: center;
}

/* convi MEDIA Signatur ---------------------------------------------------- */

/* Gestapelt und mittig: „Webdesign by" steht unmittelbar ÜBER dem Zeichen,
   nicht daneben. Das Ergebnis soll wie eine Signatur wirken und nicht wie
   ein zweites Website-Logo — deshalb klein, ruhig und mit Luft nach unten. */

.kh-footer .kh-footer__credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kh-space-xs);
}

/* Elementor gibt Widgets in Flex-Containern volle Breite — Label und Logo
   müssen auf Inhaltsbreite schrumpfen, sonst greift die Zentrierung nicht. */
.kh-footer .kh-footer__credit > * {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

/* Das Label trug früher eine 8px-Typografie direkt im Widget, die hier
   zurückgeholt werden musste. Diese Einstellung ist aus dem Template
   entfernt — die Schrift hat jetzt genau eine Quelle, nämlich diese. */
.kh-footer__credit-label,
.kh-footer__credit-label .elementor-heading-title {
  margin: 0;
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-regular);
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  /* .44 ergab 4,35:1 und lag damit knapp unter AA. .55 sind 6,0:1. */
  color: rgba(255, 255, 255, .55);
}

.kh-footer__credit-logo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kh-tap-min);
  opacity: .78;
  transition: opacity var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-footer__credit-logo a:hover,
.kh-footer__credit-logo a:focus-visible {
  opacity: 1;
}

.kh-footer__credit-logo a:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: 0 0 0 2px var(--kh-color-surface-900),
              0 0 0 5px var(--kh-color-focus-ring);
}

/* Das Bild lädt lazy — ohne aspect-ratio fiele es vor dem Laden auf 0
   zusammen. Die Datei misst 1024 x 400, das Verhältnis ist also 2,56.
   Hier stand zuvor 96/37 (2,594) — ein Maß aus einer anderen Fassung des
   Assets und damit eine leichte Verzerrung. Jetzt steht das Verhältnis
   der tatsächlich ausgelieferten Datei. */
.kh-footer__credit-logo img {
  display: block;
  width: 104px;
  height: auto;
  aspect-ratio: 1024 / 400;
  max-width: 100%;
}

/* Responsive -------------------------------------------------------------- */

/* Drei Stufen: eine Spalte, zwei Spalten, vier Spalten.
   Mobil untereinander, ab 480px zweispaltig — das deckt das Tablet als
   2 x 2 ab — und ab 1024px alle vier nebeneinander.
   Hinweis, Copyright und Signatur stehen auf jeder Breite mittig. */

@media (min-width: 480px) {
  .kh-footer .kh-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  /* Vier gleich breite Spalten in einer Reihe. Kein asymmetrisches Raster
     mehr: ohne Markenblock gibt es keine zweite Zone, die breiter sein
     müsste als die andere. */
  .kh-footer .kh-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--kh-space-2xl);
  }

  .kh-footer .kh-footer__inner {
    padding-block: var(--kh-space-3xl);
  }
}


/* ==========================================================
   15. STICKY MOBILE ACTION BAR
   ========================================================== */

/* Nur unter 768px sichtbar und nur auf Seiten, die sie einsetzen
   (zunächst die Filialseiten). Eingeblendet wird über is-visible,
   gesetzt von main.js, sobald der Hero verlassen ist.
   Animation ausschließlich über transform und opacity. */

.kh-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--kh-z-actionbar);
  display: none;
  grid-template-columns: repeat(3, 1fr);
  min-height: var(--kh-actionbar-height);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: var(--kh-color-surface-000);
  border-top: 1px solid var(--kh-color-line-200);
  box-shadow: var(--kh-shadow-bar);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition:
      transform var(--kh-transition-base) var(--kh-ease-standard),
      opacity var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-actionbar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.kh-actionbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--kh-actionbar-height);
  padding: var(--kh-space-2xs) var(--kh-space-xs);
  border-right: 1px solid var(--kh-color-line-200);
  color: var(--kh-color-ink-900);
  text-align: center;
  text-decoration: none;
  transition: var(--kh-transition-colors);
}

.kh-actionbar__item:last-child { border-right: 0; }

.kh-actionbar__item:hover { background-color: var(--kh-color-surface-100); }

.kh-actionbar__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--kh-color-focus);
}

/* Nur „Termin“ ist rot — eine primäre Handlung pro Leiste. */
.kh-actionbar__item--primary {
  background-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);
  border-right: 0;
}

.kh-actionbar__item--primary:hover { background-color: var(--kh-color-primary-600); }
.kh-actionbar__item--primary:active { background-color: var(--kh-color-primary-700); }

.kh-actionbar__item--primary:focus-visible {
  box-shadow: inset 0 0 0 3px var(--kh-color-surface-000);
}

.kh-actionbar__icon {
  width: var(--kh-icon-lg);
  height: var(--kh-icon-lg);
  flex: none;
}

.kh-actionbar__label {
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.2;
}

/* Seiten mit Action Bar halten unten Freiraum, damit die Leiste keine
   Inhalte verdeckt. Die Klasse sitzt auf dem Body; das Polster wird
   ausschließlich unter 768px angewendet — siehe Abschnitt 20. Oberhalb
   ist die Leiste ausgeblendet und darf keinen Abstand erzeugen. */


/* ==========================================================
   16. GLOBAL STATES
   ========================================================== */

/* Leerer Zustand ---------------------------------------------------------- */
/* Texte stehen im Template — das CSS erzeugt keine Inhalte. */

.kh-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kh-space-sm);
  padding: var(--kh-space-2xl) var(--kh-space-lg);
  text-align: center;
  background-color: var(--kh-color-surface-050);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
}

.kh-empty-state__icon {
  width: var(--kh-icon-2xl);
  height: var(--kh-icon-2xl);
  color: var(--kh-color-ink-400);
  flex: none;
}

.kh-empty-state__title {
  font-size: var(--kh-text-h3);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.28;
  letter-spacing: var(--kh-tracking-snug);
  color: var(--kh-color-ink-900);
  margin: 0;
}

.kh-empty-state__text {
  max-width: 52ch;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-500);
  margin: 0;
}

.kh-empty-state__action { margin-top: var(--kh-space-xs); }

/* Skeleton ---------------------------------------------------------------- */

.kh-skeleton {
  display: block;
  width: 100%;
  min-height: 1em;
  border-radius: var(--kh-radius-xs);
  background-color: var(--kh-color-surface-100);
  background-image: linear-gradient(
      90deg,
      var(--kh-color-surface-100) 0%,
      var(--kh-color-surface-200) 50%,
      var(--kh-color-surface-100) 100%);
  background-size: 200% 100%;
  animation: kh-skeleton 1.4s var(--kh-ease-in-out) infinite;
  /* Der Platzhalter ist reine Optik und wird nicht vorgelesen. */
  color: transparent;
  user-select: none;
}

.kh-skeleton--text { height: 1em; margin-block: .25em; }
.kh-skeleton--title { height: 1.5em; width: 60%; }
.kh-skeleton--media { min-height: 160px; border-radius: var(--kh-radius-md); }
.kh-skeleton--button { height: var(--kh-control-height); width: 140px; border-radius: var(--kh-radius-sm); }

@keyframes kh-skeleton {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kh-skeleton { animation: none; }
}

/* Meldungen --------------------------------------------------------------- */

.kh-message {
  display: flex;
  align-items: flex-start;
  gap: var(--kh-space-sm);
  padding: var(--kh-space-md);
  border: 1px solid var(--kh-color-line-200);
  border-left-width: 3px;
  border-radius: 0 var(--kh-radius-sm) var(--kh-radius-sm) 0;
  background-color: var(--kh-color-surface-050);
  font-size: var(--kh-text-sm);
  line-height: 1.5;
  color: var(--kh-color-ink-700);
}

.kh-message__icon {
  width: var(--kh-icon-md);
  height: var(--kh-icon-md);
  flex: none;
  margin-top: 2px;
}

.kh-message__body { min-width: 0; }

.kh-message__title {
  display: block;
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.35;
  color: var(--kh-color-ink-900);
  margin-bottom: var(--kh-space-2xs);
}

.kh-message--success {
  background-color: var(--kh-color-success-bg);
  border-color: var(--kh-color-line-200);
  border-left-color: var(--kh-color-success);
}

.kh-message--success .kh-message__icon { color: var(--kh-color-success); }

.kh-message--warning {
  background-color: var(--kh-color-warning-bg);
  border-color: var(--kh-color-line-200);
  border-left-color: var(--kh-color-warning);
}

.kh-message--warning .kh-message__icon { color: var(--kh-color-warning); }

.kh-message--error {
  background-color: var(--kh-color-danger-bg);
  border-color: var(--kh-color-line-200);
  border-left-color: var(--kh-color-danger);
}

.kh-message--error .kh-message__icon { color: var(--kh-color-danger); }

.kh-message--info {
  background-color: var(--kh-color-info-bg);
  border-color: var(--kh-color-line-200);
  border-left-color: var(--kh-color-info);
}

.kh-message--info .kh-message__icon { color: var(--kh-color-info); }

/* Übergreifende Zustände -------------------------------------------------- */

.is-loading { cursor: progress; }

[aria-busy="true"] { cursor: progress; }

/* Während ein Panel offen ist, scrollt die Seite dahinter nicht mit.
   Die Klasse setzt main.js auf das body-Element. */
.kh-scroll-locked {
  overflow: hidden;
  /* Verhindert den Sprung, wenn die Scrollleiste verschwindet. */
  scrollbar-gutter: stable;
}

/* Sicherstellen, dass das hidden-Attribut auch dann greift, wenn eine
   Komponentenklasse display setzt. Ohne dies bliebe z. B. ein
   .kh-tabs__panel[hidden] sichtbar. */
[hidden] { display: none; }


/* ==========================================================
   17. ACCESSIBILITY
   ========================================================== */

/* Skip-Link: erstes fokussierbares Element im Body.
   Unsichtbar, bis er den Fokus erhält. */

.kh-skip-link {
  position: absolute;
  top: var(--kh-space-xs);
  left: var(--kh-space-xs);
  z-index: var(--kh-z-skiplink);
  display: inline-flex;
  align-items: center;
  min-height: var(--kh-control-height);
  padding-inline: var(--kh-space-md);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-skip-link:focus,
.kh-skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
  color: var(--kh-color-primary-contrast);
  box-shadow: var(--kh-shadow-focus);
}

/* Nur für Screenreader ---------------------------------------------------- */

.kh-visually-hidden {
  position: absolute !important; /* zwingend: sonst überschreibt Elementors
                                    Widget-Positionierung die Auslagerung und
                                    der Text erscheint sichtbar im Layout. */
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Variante, die bei Tastaturfokus sichtbar wird. */
.kh-visually-hidden--focusable:focus,
.kh-visually-hidden--focusable:focus-visible {
  position: static !important; /* hebt die Regel oben gezielt wieder auf */
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* Fokus ------------------------------------------------------------------- */
/* Grundregel: Fokus wird nie entfernt, sondern ersetzt.
   Der Ring ist teal und damit nie mit einem aktiven Zustand verwechselbar. */

:focus-visible {
  outline: 2px solid var(--kh-color-focus);
  outline-offset: 2px;
  border-radius: var(--kh-radius-xs);
}

/* Komponenten mit eigenem Ring setzen outline: none und liefern
   box-shadow als Ersatz — siehe Abschnitte 05 bis 15. */

/* Ältere Browser ohne :focus-visible bekommen wenigstens :focus. */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus {
    outline: 2px solid var(--kh-color-focus);
    outline-offset: 2px;
  }
}

/* Bewegung ---------------------------------------------------------------- */
/* Die Transition-Tokens sind bereits in Abschnitt 01 heruntergesetzt.
   Hier werden zusätzlich Animationen und Scroll-Verhalten neutralisiert. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-duration: 1ms;
    scroll-behavior: auto;
  }

  .kh-card--interactive:hover { transform: none; }
  .kh-button:active { transform: none; }
}

/* Hover-Bewegungen nur auf Geräten mit echtem Zeiger.
   Touchgeräte lösen Hover beim Antippen aus — das würde springen. */
@media (hover: none) {
  .kh-card--interactive:hover { transform: none; box-shadow: var(--kh-shadow-none); }
  .kh-link:hover .kh-link__icon { transform: none; }
}

/* Erhöhter Kontrast / Windows-Kontrastmodus ------------------------------- */
/* In forced-colors ersetzt das System die Farben. Wichtig ist, dass
   Ränder und Fokus sichtbar bleiben und nicht durch Schatten ersetzt sind. */

@media (forced-colors: active) {
  .kh-button,
  .kh-chip,
  .kh-card,
  .kh-field__input,
  .kh-field__select,
  .kh-field__textarea,
  .kh-offcanvas__panel,
  .kh-nav__dropdown {
    border: 1px solid currentColor;
  }

  .kh-button:focus-visible,
  .kh-icon-button:focus-visible,
  .kh-chip:focus-visible,
  .kh-nav__link:focus-visible,
  .kh-nav__dropdown-link:focus-visible,
  .kh-mobile-nav__link:focus-visible,
  .kh-footer__menu .elementor-icon-list-item > a:focus-visible,
  .kh-footer__legal-menu .elementor-icon-list-item > a:focus-visible,
  .kh-footer__credit-logo a:focus-visible,
  .kh-search-overlay__result:focus-visible,
  .kh-accordion__trigger:focus-visible,
  .kh-tabs__tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    box-shadow: none;
  }

  /* Zustände, die allein über Flächenfarbe kodiert sind, brauchen
     eine zweite Kodierung. */
  .kh-tabs__tab[aria-selected="true"],
  .kh-chip.is-active,
  .kh-chip[aria-pressed="true"] {
    border-bottom: 3px solid currentColor;
  }

  .kh-skeleton { animation: none; background: Canvas; border: 1px solid currentColor; }
  .kh-offcanvas__backdrop { background-color: Canvas; opacity: 1; }
}

/* Touch-Flächen ----------------------------------------------------------- */

/* Auf Geräten mit grobem Zeiger bekommen die 36px-Controls das volle
   Bedienziel von 44px. Am Desktop bleibt die kompakte Höhe erhalten. */
@media (pointer: coarse) {
  .kh-chip,
  .kh-button--sm,
  .kh-chip__remove { min-height: var(--kh-tap-min); }
  /* Der Elementor-Adapter wird in Abschnitt 19 nachgezogen — dort steht
     seine Größendefinition, und bei gleicher Spezifität entscheidet die
     Quellreihenfolge. */

  .kh-chip__remove { min-width: var(--kh-tap-min); }
}

/* Kleine Ziele erhalten eine unsichtbare Vergrößerung, ohne das
   Layout zu verändern. */

.kh-tap-target { position: relative; }

.kh-tap-target::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: var(--kh-tap-min);
  min-height: var(--kh-tap-min);
  transform: translate(-50%, -50%);
}


/* ==========================================================
   18. UTILITIES
   ========================================================== */

/* Bewusst knapp gehalten. Layout entsteht über Komponenten,
   nicht über eine Utility-Sammlung. */

.kh-u-text-center { text-align: center; }

/* Vertikale Abstände zwischen direkten Geschwistern. */
.kh-u-stack-xs > * + * { margin-top: var(--kh-space-xs); }
.kh-u-stack-sm > * + * { margin-top: var(--kh-space-sm); }
.kh-u-stack-md > * + * { margin-top: var(--kh-space-md); }
.kh-u-stack-lg > * + * { margin-top: var(--kh-space-lg); }
.kh-u-stack-xl > * + * { margin-top: var(--kh-space-xl); }

/* Listen, die als Layout dienen, verlieren Punkte und Einzug. */
.kh-u-list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kh-u-list-reset > li { margin: 0; }

/* Breite Inhalte scrollen in ihrem eigenen Container, nie die Seite. */
.kh-u-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sichtbarkeit nach Viewport. Ergänzt in Abschnitt 20. */
.kh-u-hide { display: none; }

/* Ziffern in Spalten fluchten lassen. */
.kh-u-nums { font-variant-numeric: tabular-nums; }


/* ==========================================================
   19. ELEMENTOR NORMALIZATION
   ========================================================== */

/* Ziel: Elementor darf das Designsystem nicht durch Default-Margins,
   Wrapper oder Widget-Styles verfälschen. Bewusst zurückhaltend —
   es werden nur Regeln gesetzt, die kh-Komponenten tatsächlich
   betreffen. Kein !important, keine tiefen Selektorketten. */

/* Flexbox Container -------------------------------------------------------- */
/* Trägt ein Container eine kh-section- oder kh-container-Klasse,
   übernimmt unser System Polster und Breite vollständig. */

.e-con.kh-section,
.e-con.kh-section > .e-con-inner {
  --padding-block-start: 0;
  --padding-block-end: 0;
}

.e-con.kh-container,
.e-con.kh-container > .e-con-inner {
  --content-width: 100%;
  --padding-inline-start: 0;
  --padding-inline-end: 0;
}

/* Der innere Wrapper darf die Breitenbegrenzung nicht erneut anwenden. */
.e-con.kh-container > .e-con-inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Ein Container, der als Grid dient, gibt seine Flex-Voreinstellung ab. */
.e-con.kh-grid > .e-con-inner {
  display: contents;
}

/* Heading Widget ----------------------------------------------------------- */
/* Die kh-Klasse wird am Widget vergeben; der innere Titel erbt. */

.elementor-widget-heading .elementor-heading-title {
  margin: 0;
  font-family: inherit;
  color: inherit;
}

.elementor-widget-heading.kh-h1 .elementor-heading-title,
.elementor-widget-heading.kh-h2 .elementor-heading-title,
.elementor-widget-heading.kh-h3 .elementor-heading-title,
.elementor-widget-heading.kh-h4 .elementor-heading-title,
.elementor-widget-heading.kh-display .elementor-heading-title {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* ABSATZ-VARIANTE DES HEADING-WIDGETS
   -------------------------------------------------------------
   Das Heading-Widget wird auf dieser Website auch für Fliesstext
   verwendet: header_size „p" gibt dann <p class="elementor-heading-title">
   aus. Für diesen Fall galt die Regel oben nicht, und zwei fremde
   Regeln griffen durch:

     frontend.min.css   .elementor-heading-title { line-height: 1 }   (0,1,0)
     post-<id>.css      .elementor-widget-heading .elementor-heading-title
                        { font-weight: var(--e-global-typography-primary-font-weight) }

   Gemessen am 17.09.2026 auf der ausgelieferten Seite: 68 von 158
   Absatz-Widgets standen dadurch in Halbfett mit Zeilenabstand 1,0 —
   Schriftgrad und Zeilenhöhe exakt gleich. Betroffen waren unter
   anderem jeder kh-section-header__lead, jeder Eyebrow und jedes
   kh-text-sm; mehrzeilige Absätze klebten zusammen.

   Die kh-Klasse sitzt am Widget, die Schrift steht im Kind. Trägt das
   Kind kein echtes Überschriftenelement, gehört die Typografie also
   dem Wrapper. Die Auswahl über den Elementnamen (0,2,2) schlägt beide
   fremden Regeln und lässt h1–h6 unberührt. */

.elementor-widget-heading p.elementor-heading-title,
.elementor-widget-heading span.elementor-heading-title,
.elementor-widget-heading div.elementor-heading-title {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* Text Editor -------------------------------------------------------------- */

.elementor-widget-text-editor { color: inherit; }

.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

.elementor-widget-text-editor.kh-prose > .elementor-widget-container {
  max-width: var(--kh-measure);
}

/* Trägt das Widget eine Typografieklasse, gelten deren Werte.
   Der innere Wrapper und die Absätze erben sie — der Wrapper wird
   nicht auf die body-Werte zurückgesetzt. */
.elementor-widget-text-editor > .elementor-widget-container,
.elementor-widget-text-editor > .elementor-widget-container > p,
.elementor-widget-text-editor > .elementor-widget-container > ul,
.elementor-widget-text-editor > .elementor-widget-container > ol {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Button Widget ------------------------------------------------------------ */
/* Adapter für native Elementor-Button-Widgets. Die kh-button-wrap-Klassen
   werden am WIDGET vergeben; gestaltet wird ausschließlich die
   .elementor-button darin. Der Wrapper selbst bleibt unsichtbar und
   erhält weder Fläche noch Rahmen noch Polster.
   Ergebnis ist optisch identisch mit .kh-button aus Abschnitt 05.
   Es sind keine Elementor-Farbeinstellungen und keine Inline-Styles nötig. */

.elementor-widget-button .elementor-button {
  font-family: var(--kh-font-sans);
  text-decoration: none;
}

/* Der Wrapper ist kein Button. */
.kh-button-wrap {
  background: none;
  border: 0;
  padding: 0;
}

/* Basis — entspricht .kh-button */
.kh-button-wrap .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kh-space-xs);
  min-height: var(--kh-control-height);
  padding: 0 var(--kh-button-padding-x);
  border: 2px solid transparent;
  border-radius: var(--kh-radius-sm);
  background-color: transparent;
  color: var(--kh-color-ink-900);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.2;
  fill: currentColor;
  transition:
      var(--kh-transition-colors),
      box-shadow var(--kh-transition-base) var(--kh-ease-standard),
      transform var(--kh-transition-fast) var(--kh-ease-standard);
}

/* Fokus fuer JEDEN Elementor-Button — auch ausserhalb von
   .kh-button-wrap. Die allgemeine :focus-visible-Regel in
   Abschnitt 17 setzt nur eine teale Kontur mit 2px Abstand; auf
   einer roten Flaeche liegt die direkt auf Rot und ist kaum zu
   erkennen. Der doppelte Ring schiebt zuerst Weiss dazwischen und
   ist dadurch auf jedem Untergrund sichtbar. */
.elementor-button:focus-visible,
.elementor-button-link:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* Primär — entspricht .kh-button--primary */
.kh-button-wrap--primary .elementor-button {
  background-color: var(--kh-color-primary-500);
  border-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);
}

.kh-button-wrap--primary .elementor-button:hover {
  background-color: var(--kh-color-primary-600);
  border-color: var(--kh-color-primary-600);
  color: var(--kh-color-primary-contrast);
}

.kh-button-wrap--primary .elementor-button:active {
  background-color: var(--kh-color-primary-700);
  border-color: var(--kh-color-primary-700);
  transform: translateY(1px);
}

/* Sekundär — entspricht .kh-button--secondary */
.kh-button-wrap--secondary .elementor-button {
  background-color: transparent;
  border-color: var(--kh-color-ink-900);
  color: var(--kh-color-ink-900);
}

.kh-button-wrap--secondary .elementor-button:hover {
  background-color: var(--kh-color-ink-900);
  color: var(--kh-color-ink-inverse);
}

.kh-button-wrap--secondary .elementor-button:active {
  background-color: var(--kh-color-ink-900);
  border-color: var(--kh-color-ink-900);
  color: var(--kh-color-ink-inverse);
  transform: translateY(1px);
}

/* Ghost — entspricht .kh-button--ghost */
.kh-button-wrap--ghost .elementor-button {
  background-color: transparent;
  border-color: transparent;
  padding: 0 var(--kh-space-sm);
  color: var(--kh-color-primary-text);
}

.kh-button-wrap--ghost .elementor-button:hover {
  background-color: var(--kh-color-primary-050);
  color: var(--kh-color-primary-700);
}

.kh-button-wrap--ghost .elementor-button:active { transform: translateY(1px); }

/* Größen — entsprechen .kh-button--sm / --lg */
.kh-button-wrap--sm .elementor-button {
  min-height: var(--kh-control-height-sm);
  padding: 0 var(--kh-space-md);
  border-width: 1px;
  font-size: var(--kh-text-sm);
}

.kh-button-wrap--lg .elementor-button {
  min-height: var(--kh-control-height-lg);
  padding: 0 var(--kh-space-xl);
  font-size: 1.0625rem;
}

/* Touch-Minimum, analog zu .kh-button--sm in Abschnitt 17. Steht hier,
   weil die Größendefinition darüber sonst gewinnen würde. */
@media (pointer: coarse) {
  .kh-button-wrap--sm .elementor-button { min-height: var(--kh-tap-min); }
}

/* Volle Breite */
.kh-button-wrap--block,
.kh-button-wrap--block .elementor-button {
  width: 100%;
}

.kh-button-wrap--block .elementor-button { display: flex; }

/* Volle Breite ausschließlich unter 480px — die Regel steht in
   Abschnitt 20. Hier nur die Grundstellung: am Desktop keine
   erzwungene Breite. */
.kh-button-wrap--block-mobile,
.kh-button-wrap--block-mobile .elementor-button { width: auto; }

/* Auf dunklen und roten Flächen dreht sich die Farbrolle.
   Die Werte sind deckungsgleich mit Abschnitt 05 — Primär kehrt dabei
   niemals zu Rot zurück. */
.kh-section--brand .kh-button-wrap--primary .elementor-button,
.kh-section--dark .kh-button-wrap--primary .elementor-button {
  background-color: var(--kh-color-surface-000);
  border-color: var(--kh-color-surface-000);
  color: var(--kh-color-ink-900);
}

.kh-section--brand .kh-button-wrap--primary .elementor-button:hover,
.kh-section--dark .kh-button-wrap--primary .elementor-button:hover {
  background-color: var(--kh-color-surface-100);
  border-color: var(--kh-color-surface-100);
  color: var(--kh-color-ink-900);
}

.kh-section--brand .kh-button-wrap--primary .elementor-button:active,
.kh-section--dark .kh-button-wrap--primary .elementor-button:active {
  background-color: var(--kh-color-surface-200);
  border-color: var(--kh-color-surface-200);
  color: var(--kh-color-ink-900);
}

.kh-section--brand .kh-button-wrap--secondary .elementor-button,
.kh-section--dark .kh-button-wrap--secondary .elementor-button {
  background-color: transparent;
  border-color: var(--kh-color-ink-inverse);
  color: var(--kh-color-ink-inverse);
}

.kh-section--brand .kh-button-wrap--secondary .elementor-button:hover,
.kh-section--dark .kh-button-wrap--secondary .elementor-button:hover {
  background-color: var(--kh-color-ink-inverse);
  color: var(--kh-color-ink-900);
}

.kh-section--brand .kh-button-wrap--secondary .elementor-button:active,
.kh-section--dark .kh-button-wrap--secondary .elementor-button:active {
  background-color: var(--kh-color-surface-100);
  border-color: var(--kh-color-surface-100);
  color: var(--kh-color-ink-900);
}

/* Ghost — Farbrollen exakt wie .kh-button--ghost in Abschnitt 05. */
.kh-section--dark .kh-button-wrap--ghost .elementor-button {
  color: var(--kh-color-primary-on-dark);
}

.kh-section--brand .kh-button-wrap--ghost .elementor-button {
  color: var(--kh-color-ink-inverse);
}

.kh-section--dark .kh-button-wrap--ghost .elementor-button:hover,
.kh-section--brand .kh-button-wrap--ghost .elementor-button:hover {
  background-color: rgba(255, 255, 255, .12);
  color: var(--kh-color-ink-inverse);
}

/* Zustände. Stehen bewusst NACH den Dark-/Brand-Regeln: bei gleicher
   Spezifität entscheidet die Quellreihenfolge, sonst sähe ein
   deaktivierter Button auf dunklem Grund weiterhin bedienbar aus.
   Die Klassen dürfen am Widget oder am Button selbst sitzen. */
.kh-button-wrap .elementor-button:disabled,
.kh-button-wrap .elementor-button[aria-disabled="true"],
.kh-button-wrap .elementor-button.is-disabled,
.kh-button-wrap.is-disabled .elementor-button,
.kh-section--dark .kh-button-wrap.is-disabled .elementor-button,
.kh-section--brand .kh-button-wrap.is-disabled .elementor-button {
  background-color: var(--kh-color-line-200);
  border-color: var(--kh-color-line-200);
  color: var(--kh-color-ink-400);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.kh-button-wrap .elementor-button.is-loading,
.kh-button-wrap.is-loading .elementor-button {
  pointer-events: none;
  opacity: .72;
}

/* Elementor legt den Text in ein eigenes span. */
.elementor-widget-button .elementor-button-content-wrapper { gap: var(--kh-space-xs); }
.elementor-widget-button .elementor-button-text { flex-grow: 0; }

/* Icon Widget -------------------------------------------------------------- */

.elementor-widget-icon .elementor-icon {
  color: inherit;
  fill: currentColor;
}

.elementor-widget-icon .elementor-icon svg {
  width: var(--kh-icon-xl);
  height: var(--kh-icon-xl);
}

.elementor-widget-icon.kh-icon-brand .elementor-icon { color: var(--kh-color-primary-500); }

/* Image Widget ------------------------------------------------------------- */

.elementor-widget-image img {
  display: block;
  border-radius: inherit;
}

.elementor-widget-image figure { margin: 0; }

.elementor-widget-image figcaption {
  margin-top: var(--kh-space-xs);
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

.elementor-widget-image.kh-media-rounded img { border-radius: var(--kh-radius-md); }

/* Form Widget -------------------------------------------------------------- */
/* Elementor Pro Forms sollen wie unsere Felder aussehen, ohne dass jedes
   Feld einzeln konfiguriert wird. */

.elementor-form .elementor-field-group { margin-bottom: 0; }

.elementor-form .elementor-field-group > label {
  display: block;
  margin-bottom: var(--kh-space-2xs);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.3;
  color: var(--kh-color-ink-700);
}

.elementor-form .elementor-field-textual {
  min-height: var(--kh-field-height);
  padding: var(--kh-space-sm) var(--kh-space-md);
  border: 1px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-surface-000);
  color: var(--kh-color-ink-900);
  font-family: var(--kh-font-sans);
  /* Mindestens 16px — verhindert den automatischen Zoom in iOS Safari. */
  font-size: var(--kh-text-field);
  line-height: 1.4;
}

.elementor-form .elementor-field-textual:focus {
  outline: none;
  border-color: var(--kh-color-focus);
  box-shadow: 0 0 0 3px var(--kh-color-focus-ring);
}

.elementor-form .elementor-field-textual::placeholder { color: var(--kh-color-ink-400); }

.elementor-form .elementor-button {
  min-height: var(--kh-control-height);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  transition: var(--kh-transition-colors);
}

.elementor-form .elementor-button:hover { background-color: var(--kh-color-primary-600); }

.elementor-message {
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-sm);
  line-height: 1.5;
}

.elementor-message.elementor-message-success { color: var(--kh-color-success); }
.elementor-message.elementor-message-danger { color: var(--kh-color-danger); }

.elementor-field-group .elementor-field-subgroup label { font-weight: var(--kh-font-weight-regular); }

/* Nested Accordion --------------------------------------------------------- */
/* Falls das Widget statt unserer Komponente eingesetzt wird, folgt es
   denselben Maßen. Bevorzugt wird .kh-accordion aus Abschnitt 07. */

.elementor-widget-n-accordion .e-n-accordion-item-title {
  min-height: var(--kh-tap-min);
  padding: var(--kh-space-lg) 0;
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--kh-color-ink-900);
  border-bottom: 1px solid var(--kh-color-line-200);
}

.elementor-widget-n-accordion .e-n-accordion-item-title:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.elementor-widget-n-accordion .e-n-accordion-item > .e-con { padding-bottom: var(--kh-space-lg); }

/* Sonstiges ---------------------------------------------------------------- */

/* Elementors Bearbeitungshilfen dürfen das Layout nicht verschieben. */
.elementor-widget-container > :last-child { margin-bottom: 0; }

/* Ein Widget, das selbst eine kh-Karte ist, darf sich strecken. */
.elementor-widget.kh-card { height: 100%; }

/* Im Editor bleibt das Off-Canvas-Panel bedienbar, damit Inhalte
   gepflegt werden können, ohne dass JavaScript läuft. */
.elementor-editor-active .kh-offcanvas,
.elementor-editor-preview .kh-offcanvas {
  position: relative;
  height: auto;
  visibility: visible;
  pointer-events: auto;
}

.elementor-editor-active .kh-offcanvas__panel,
.elementor-editor-preview .kh-offcanvas__panel {
  position: relative;
  width: 100%;
  transform: none;
  box-shadow: none;
}

.elementor-editor-active .kh-offcanvas__backdrop,
.elementor-editor-preview .kh-offcanvas__backdrop { display: none; }

.elementor-editor-active .kh-actionbar,
.elementor-editor-preview .kh-actionbar {
  /* display muss mitgesetzt werden: die Basisklasse steht auf none und
     die Einblendung greift erst unter 768px. Gilt nur für die
     Bearbeitung — im Frontend bleibt die Leiste auf Mobil beschränkt. */
  display: grid;
  position: relative;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.elementor-editor-active .kh-search-overlay,
.elementor-editor-preview .kh-search-overlay {
  position: relative;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}


/* ==========================================================
   20. RESPONSIVE
   ========================================================== */

/* Mobile first. Schriftgrößen, Sektionsabstände, Container-Polster und
   Raster-Gutter skalieren bereits über clamp() und brauchen hier nichts.
   Dieser Abschnitt enthält ausschließlich, was fluid nicht lösbar ist:
   Spaltenzahlen, Ein- und Ausblendungen, Richtungswechsel.

   Custom Properties sind in Media Queries nicht verwendbar — deshalb
   stehen hier die Literale 480 / 768 / 1024 / 1280. Sie entsprechen
   --kh-bp-sm / --kh-bp-md / --kh-bp-lg / --kh-bp-xl.
   Elementor ist auf dieselben Werte einzustellen. */


/* ---------- bis 479px ---------------------------------------------------- */

@media (max-width: 479px) {
  /* Volle Breite nur in klar definierten Kontexten und über den
     expliziten Modifier — nie pauschal über die Farbvariante. */
  .kh-button--block-mobile { display: flex; width: 100%; }

  .kh-section-header__actions > .kh-button,
  .kh-form-actions > .kh-button,
  .kh-card__footer > .kh-button,
  .kh-offcanvas__footer > .kh-button,
  .kh-empty-state__action > .kh-button,
  /* Dieselben Kontexte für native Elementor-Button-Widgets: der Wrapper
     und die Schaltfläche darin. Keine pauschale Vollbreite für alle
     Elementor-Buttons. */
  .kh-section-header__actions > .kh-button-wrap,
  .kh-form-actions > .kh-button-wrap,
  .kh-card__footer > .kh-button-wrap,
  .kh-offcanvas__footer > .kh-button-wrap,
  .kh-empty-state__action > .kh-button-wrap,
  .kh-section-header__actions > .kh-button-wrap .elementor-button,
  .kh-form-actions > .kh-button-wrap .elementor-button,
  .kh-card__footer > .kh-button-wrap .elementor-button,
  .kh-offcanvas__footer > .kh-button-wrap .elementor-button,
  .kh-empty-state__action > .kh-button-wrap .elementor-button,
  /* Expliziter Modifier am Widget. */
  .kh-button-wrap--block-mobile,
  .kh-button-wrap--block-mobile .elementor-button { width: 100%; }

  .kh-section-header__actions > .kh-button-wrap .elementor-button,
  .kh-form-actions > .kh-button-wrap .elementor-button,
  .kh-card__footer > .kh-button-wrap .elementor-button,
  .kh-offcanvas__footer > .kh-button-wrap .elementor-button,
  .kh-empty-state__action > .kh-button-wrap .elementor-button,
  .kh-button-wrap--block-mobile .elementor-button { display: flex; }

  /* Das Suchformular bleibt zweizeilig bedienbar: Feld oben, Schaltfläche
     darunter über die volle Breite. */
  .kh-search-overlay__input { flex-basis: 100%; }
  .kh-search-overlay__submit { width: 100%; }
}


/* ---------- bis 767px ---------------------------------------------------- */

@media (max-width: 767px) {
  /* Die Action Bar existiert nur auf kleinen Viewports. */
  .kh-actionbar { display: grid; }

  /* Nur hier darf sie Freiraum am Seitenfuß beanspruchen. */
  .kh-has-actionbar { padding-bottom: var(--kh-actionbar-offset); }

  .kh-u-hide-mobile { display: none; }
}


/* ---------- ab 480px ----------------------------------------------------- */

@media (min-width: 480px) {
  .kh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- ab 768px ----------------------------------------------------- */

@media (min-width: 768px) {
  .kh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Text | Bild — das 1:1-Leitmotiv. */
  .kh-grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .kh-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-form-row--full { grid-template-columns: 1fr; }

  /* Der Termin-CTA erscheint im Header. */
  .kh-header__cta { display: inline-flex; }

  /* Section Header mit Aktionen nebeneinander. */
  .kh-section-header--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    max-width: none;
    gap: var(--kh-space-lg);
  }

  .kh-section-header--split .kh-section-header__actions { margin-top: 0; }

  /* Footer-Raster und Rechtsleiste werden vollständig in Abschnitt 14
     gesteuert — hier stehen bewusst keine konkurrierenden Regeln mehr. */

  /* Off-Canvas-Panels bekommen auf Tablets etwas mehr Luft. */
  .kh-offcanvas__header,
  .kh-offcanvas__body,
  .kh-offcanvas__footer { padding-inline: var(--kh-space-lg); }

  .kh-u-hide-desktop { display: none; }
}


/* ---------- ab 1024px ---------------------------------------------------- */

@media (min-width: 1024px) {
  /* Die Hauptnavigation erscheint bewusst erst ab 1280px — siehe den
     folgenden Block. Zwischen 1024 und 1279 passen Logo, sechs
     Menüpunkte, Suche und CTA nicht nebeneinander, ohne dass Texte
     gekürzt oder Punkte versteckt werden müssten. Bis dahin führt
     der Off Canvas die Navigation. */

  .kh-header__logo img,
  .kh-header__logo svg { height: 36px; }

  .kh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Inhalt plus Randspalte, z. B. Ergebnisliste neben der Karte. */
  .kh-grid--sidebar { grid-template-columns: var(--kh-locator-rail) minmax(0, 1fr); }
  .kh-grid--sidebar-right { grid-template-columns: minmax(0, 1fr) var(--kh-locator-rail); }

  /* Karten dürfen auf großen Flächen etwas mehr Innenabstand tragen —
     der Wert bleibt innerhalb des in v1.0 definierten clamp-Bereichs. */
  .kh-search-overlay__header { min-height: var(--kh-header-height); }
}


/* ---------- ab 1280px ---------------------------------------------------- */

@media (min-width: 1280px) {
  /* Ab hier trägt die Kopfzeile die Navigation selbst.
     Der Off Canvas bleibt als Komponente verfügbar — etwa für
     Standortfilter — wird hier aber nicht mehr für das Hauptmenü genutzt. */
  .kh-nav { display: block; }

  .kh-burger { display: none; }

  /* Nur die Kopfzeile darf breiter laufen als der Inhaltscontainer,
     damit die sechs Menüpunkte ohne Kürzung nebeneinander stehen.
     Inhaltscontainer bleiben bei 1200px. */
  .kh-header__inner {
    max-width: var(--kh-container-wide);
    gap: var(--kh-space-lg);
  }

  /* Kompaktere Navigationsmaße: 15px Text, 8px seitliches Polster.
     Die Zeilenhöhe von 44px bleibt als Bedienziel erhalten. */
  .kh-nav__list { gap: var(--kh-space-2xs); }

  .kh-nav__link {
    padding-inline: var(--kh-space-xs);
    font-size: .9375rem;
  }

  .kh-grid--split-wide { grid-template-columns: 1.15fr 1fr; }
}


/* ---------- ab 1440px ---------------------------------------------------- */

@media (min-width: 1440px) {
  /* Auf sehr breiten Schirmen bekommt die Navigation wieder Luft. */
  .kh-nav__list { gap: var(--kh-space-2xs); }

  .kh-nav__link {
    padding-inline: var(--kh-space-sm);
    font-size: var(--kh-text-body);
  }
}


/* ---------- Druck --------------------------------------------------------- */

@media print {
  .kh-header,
  .kh-footer,
  .kh-actionbar,
  .kh-offcanvas,
  .kh-search-overlay,
  .kh-skip-link { display: none; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .kh-section {
    padding-block: 12pt;
    background: none;
  }

  .kh-card {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
  }

  .kh-button {
    border: 1px solid #000;
    background: none;
    color: #000;
  }

  a { color: #000; text-decoration: underline; }
}

/* ==========================================================
   21. ELEMENTOR V3 – HEADER ADAPTER
   ========================================================== */

/*
 * Klassischer Elementor-V3-Header.
 *
 * Elementor:
 * - Image Widget
 * - Nav Menu Widget
 * - Icon Widget
 * - Button Widget
 *
 * global.css bleibt die visuelle Source of Truth.
 */


/* ----------------------------------------------------------
   HEADER LAYOUT
   ---------------------------------------------------------- */

.elementor-location-header .e-con.kh-header {
	width: 100%;
}

.elementor-location-header .e-con.kh-header__bar {
	width: 100%;
}

.elementor-location-header .e-con.kh-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;

	width: 100%;
	max-width: var(--kh-container-wide);

	min-height: var(--kh-header-height);

	margin-inline: auto;
	padding-inline: var(--kh-container-pad);

	column-gap: var(--kh-space-lg);
}


/* ----------------------------------------------------------
   LOGO
   ---------------------------------------------------------- */

.elementor-location-header
.elementor-widget-image.kh-header__logo {
	width: auto;
	max-width: none;

	margin: 0;

	justify-self: start;
}

.elementor-location-header
.elementor-widget-image.kh-header__logo
.elementor-widget-container {
	display: flex;
	align-items: center;

	width: auto;
}

.elementor-location-header
.elementor-widget-image.kh-header__logo a {
	display: inline-flex;
	align-items: center;

	text-decoration: none;
}

.elementor-location-header
.elementor-widget-image.kh-header__logo img {
	display: block;

	width: auto;
	height: 52px;

	max-width: none;
}


/* ----------------------------------------------------------
   NAV WIDGET
   ---------------------------------------------------------- */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap {
	width: 100%;
	min-width: 0;
	max-width: none;

	margin: 0;

	justify-self: stretch;
}


/* Elementor Desktop Navigation */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main {
	display: block;

	width: 100%;
}


/* Hauptliste */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
> ul.elementor-nav-menu {
	display: flex;

	flex-flow: row nowrap;

	align-items: center;
	justify-content: center;

	width: 100%;

	margin: 0;
	padding: 0;

	gap: var(--kh-space-2xs);

	list-style: none;
}


/* Hauptpunkte */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
> ul.elementor-nav-menu
> li.menu-item {
	position: relative;

	display: block;

	flex: 0 0 auto;

	margin: 0;
	padding: 0;
}


/* ----------------------------------------------------------
   NAV LINKS
   ---------------------------------------------------------- */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
> ul.elementor-nav-menu
> li.menu-item
> a.elementor-item {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: var(--kh-tap-min);

	padding: 0 var(--kh-space-sm);

	border: 0;
	border-radius: var(--kh-radius-sm);

	background: transparent;

	color: var(--kh-color-ink-900);

	font-family: var(--kh-font-sans);
	font-size: var(--kh-text-body);
	font-weight: var(--kh-font-weight-semibold);
	line-height: 1.2;

	text-decoration: none;
	white-space: nowrap;

	box-shadow: none;

	transition: var(--kh-transition-colors);
}


/* Elementor Pointer-Effekte neutralisieren */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-item::before,

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-item::after {
	display: none;
}


/* Hover */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
a.elementor-item:hover {
	background-color: var(--kh-color-surface-100);

	color: var(--kh-color-primary-text);
}


/* Fokus */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
a.elementor-item:focus-visible {
	outline: none;

	background-color: var(--kh-color-surface-100);

	color: var(--kh-color-ink-900);

	box-shadow: var(--kh-shadow-focus);
}


/* ----------------------------------------------------------
   AKTIVER MENÜPUNKT
   ---------------------------------------------------------- */

/*
 * Elementor setzt aktuell eine grüne Global-Color auf
 * .elementor-item-active.
 *
 * Unser Design:
 * schwarzer Text + Vodafone-roter Unterstrich.
 */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
a.elementor-item.elementor-item-active,

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
a.elementor-item[aria-current="page"] {
	background: transparent;

	color: var(--kh-color-ink-900);

	box-shadow:
		inset 0 -3px 0
		var(--kh-color-primary-500);
}


/* ----------------------------------------------------------
   SUB-ARROW
   ---------------------------------------------------------- */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-item
.sub-arrow {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	margin-left: var(--kh-space-2xs);
	padding: 0;
}

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-item
.sub-arrow svg {
	width: 10px;
	height: 10px;

	fill: currentColor;
}


/* ----------------------------------------------------------
   DROPDOWN
   ---------------------------------------------------------- */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
ul.sub-menu {
	min-width: var(--kh-dropdown-min);

	margin: 0;
	padding: var(--kh-space-xs);

	border: 1px solid var(--kh-color-line-200);
	border-radius: var(--kh-radius-md);

	background: var(--kh-color-surface-000);

	box-shadow: var(--kh-shadow-lg);
}


/* Dropdown Links */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
ul.sub-menu
a.elementor-sub-item {
	display: flex;

	align-items: center;

	min-height: var(--kh-tap-min);

	padding:
		var(--kh-space-xs)
		var(--kh-space-sm);

	border: 0;
	border-radius: var(--kh-radius-sm);

	background: transparent;

	color: var(--kh-color-ink-700);

	font-family: var(--kh-font-sans);
	font-size: var(--kh-text-body);
	font-weight: var(--kh-font-weight-medium);
	line-height: 1.3;

	text-decoration: none;

	white-space: nowrap;
}

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
ul.sub-menu
a.elementor-sub-item:hover {
	background-color: var(--kh-color-surface-100);

	color: var(--kh-color-primary-text);
}


/* ----------------------------------------------------------
   ELEMENTOR MOBILE NAV OUTPUT DEAKTIVIEREN
   ---------------------------------------------------------- */

/*
 * Das mobile Hauptmenü bauen wir später selbst als Off Canvas.
 * Elementors zusätzlich gerendertes Dropdown-Menü brauchen wir nicht.
 */

.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
> .elementor-widget-container
> .elementor-nav-menu--dropdown {
	display: none;
}


/* ----------------------------------------------------------
   HEADER ACTIONS
   ---------------------------------------------------------- */

.elementor-location-header
.e-con.kh-header__actions {
	display: flex;

	flex-flow: row nowrap;

	align-items: center;
	justify-content: flex-end;

	width: auto;
	min-width: max-content;

	margin: 0;
	padding: 0;

	gap: var(--kh-space-xs);

	justify-self: end;
}

.elementor-location-header
.kh-header__actions
> .elementor-element {
	flex: 0 0 auto;

	width: auto;
	max-width: none;

	margin: 0;
}


/* ----------------------------------------------------------
   SEARCH ICON WIDGET
   ---------------------------------------------------------- */

.elementor-location-header
.elementor-widget-icon.kh-search-wrap.kh-header__search-toggle {
	width: auto;
	max-width: none;

	margin: 0;

	color: var(--kh-color-ink-900);
}


/* Elementor Wrapper */

.elementor-location-header
.elementor-widget-icon.kh-search-wrap.kh-header__search-toggle
.elementor-icon-wrapper {
	display: flex;

	align-items: center;
	justify-content: center;

	line-height: 1;
}


/* Tatsächlicher anklickbarer Search Link */

.elementor-location-header
.elementor-widget-icon.kh-search-wrap.kh-header__search-toggle
a.elementor-icon {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: var(--kh-control-height);
	height: var(--kh-control-height);

	padding: 0;

	border: 0;
	border-radius: var(--kh-radius-sm);

	background: transparent;

	color: var(--kh-color-ink-900);
	fill: var(--kh-color-ink-900);

	text-decoration: none;

	transition: var(--kh-transition-colors);
}


/* Elementor kann Farbe direkt auf SVG setzen.
   Deshalb gezielt überschreiben. */

.elementor-location-header
.elementor-widget-icon.kh-search-wrap.kh-header__search-toggle
a.elementor-icon svg {
	display: block;

	width: var(--kh-icon-lg);
	height: var(--kh-icon-lg);

	color: currentColor;
	fill: currentColor;
}


/* Search Hover */

.elementor-location-header
.elementor-widget-icon.kh-search-wrap.kh-header__search-toggle
a.elementor-icon:hover {
	background-color: var(--kh-color-surface-100);

	color: var(--kh-color-primary-text);
	fill: var(--kh-color-primary-text);
}


/* Search Fokus */

.elementor-location-header
.elementor-widget-icon.kh-search-wrap.kh-header__search-toggle
a.elementor-icon:focus-visible {
	outline: none;

	color: var(--kh-color-ink-900);
	fill: var(--kh-color-ink-900);

	box-shadow: var(--kh-shadow-focus);
}


/* ----------------------------------------------------------
   CTA
   ---------------------------------------------------------- */

.elementor-location-header
.elementor-widget-button.kh-header__cta {
	flex: 0 0 auto;

	width: auto;
	max-width: none;

	margin: 0;
}


/* ==========================================================
   RESPONSIVE HEADER V3
   ========================================================== */


/* Mobile + Tablet */

@media (max-width: 1279px) {

	.elementor-location-header
	.e-con.kh-header__inner {
		display: flex;

		align-items: center;

		max-width: var(--kh-container-max);

		gap: var(--kh-space-md);
	}

	.elementor-location-header
	.elementor-widget-nav-menu.kh-nav-wrap {
		display: none;
	}

}


/* Desktop */

@media (min-width: 1280px) {

	.elementor-location-header
	.elementor-widget-nav-menu.kh-nav-wrap {
		display: block;
	}

}


/* Große Desktop-Auflösung */

@media (min-width: 1440px) {

	.elementor-location-header
	.elementor-widget-nav-menu.kh-nav-wrap
	.elementor-nav-menu--main
	> ul.elementor-nav-menu
	> li.menu-item
	> a.elementor-item {
		padding-inline: var(--kh-space-sm);
		font-size: var(--kh-text-body);
	}

}

/* ==========================================================
   ELEMENTOR V3 NAV – INTERACTION STATES
   ========================================================== */

/* Normale Hauptnavigation */
.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
.elementor-nav-menu
> li.menu-item
> a.elementor-item:not(.elementor-item-active):hover {
	background-color: var(--kh-color-surface-100);
	color: var(--kh-color-primary-text);
}

/* Tastaturfokus */
.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
.elementor-nav-menu
> li.menu-item
> a.elementor-item:not(.elementor-item-active):focus-visible {
	background-color: var(--kh-color-surface-100);
	color: var(--kh-color-primary-text);
	outline: none;
	box-shadow: var(--kh-shadow-focus);
}

/* Aktuelle Seite */
.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
.elementor-nav-menu
> li.menu-item
> a.elementor-item.elementor-item-active,
.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
.elementor-nav-menu
> li.menu-item
> a.elementor-item[aria-current="page"] {
	background-color: transparent;
	color: var(--kh-color-ink-900);
	box-shadow: inset 0 -3px 0 var(--kh-color-primary-500);
}

/* Submenu Hover */
.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
.sub-menu
a.elementor-sub-item:hover {
	background-color: var(--kh-color-surface-100);
	color: var(--kh-color-primary-text);
}

/* Submenu Tastaturfokus */
.elementor-location-header
.elementor-widget-nav-menu.kh-nav-wrap
.elementor-nav-menu--main
.sub-menu
a.elementor-sub-item:focus-visible {
	background-color: var(--kh-color-surface-100);
	color: var(--kh-color-primary-text);
	outline: none;
	box-shadow: var(--kh-shadow-focus);
}

/* ==========================================================
   22. ART DIRECTION — TIEFE, MEDIEN, AKZENTE
   ==========================================================

   Wiederverwendbares Formen- und Medienvokabular. Es gilt fuer
   jede Seite und wird dort eingesetzt, wo eine Flaeche Tiefe
   oder ein Bild einen Rahmen braucht — nicht flaechendeckend.

   Grundsatz: Dekor liegt IMMER unter dem Inhalt, nimmt keine
   Klicks entgegen und traegt keine Information. Wer die Regeln
   abschaltet, verliert Wirkung, nie Inhalt.
   ========================================================== */


/* --- 22.1 Flaechenabstufung ------------------------------- */

/* Dritte Stufe zwischen Weiss und #F2F2F2. Damit muessen
   benachbarte Abschnitte nicht zwischen zwei Extremen springen. */
.kh-section--soft { background-color: var(--kh-color-surface-050); }


/* --- 22.2 Tiefe ------------------------------------------- */

/* Gemeinsame Buehne fuer alle Dekorebenen. */
.kh-section--depth,
.kh-section--dots,
.kh-section--glow,
.kh-section--ring { isolation: isolate; }

.kh-section--depth > *,
.kh-section--dots > *,
.kh-section--glow > *,
.kh-section--ring > * {
  position: relative;
  z-index: 1;
}

.kh-section--depth::before,
.kh-section--dots::before,
.kh-section--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Sehr flacher Verlauf von oben — gibt der Flaeche eine Richtung,
   ohne als Farbe aufzufallen. */
.kh-section--depth::before {
  background-image: linear-gradient(
      180deg,
      rgba(26, 26, 26, .05) 0%,
      rgba(26, 26, 26, 0) 44%);
}

.kh-section--dark.kh-section--depth::before {
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, .06) 0%,
      rgba(255, 255, 255, 0) 50%);
}

/* Punktmatrix — ein Raster, das man eher spuert als sieht.
   Die Maske laesst es nach unten auslaufen, damit es nicht wie
   eine Tapete wirkt. Ohne Maskenunterstuetzung bleibt es flaechig
   und ist bei 5 % Deckkraft immer noch unauffaellig. */
.kh-section--dots::before {
  background-image: radial-gradient(
      var(--kh-color-ink-900) .8px,
      transparent .8px);
  background-size: 22px 22px;
  opacity: .05;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
}

.kh-section--dark.kh-section--dots::before {
  background-image: radial-gradient(
      var(--kh-color-surface-000) .8px,
      transparent .8px);
  opacity: .08;
}

/* Rot als Licht statt als Farbe: eine weiche Flaeche mit
   sehr niedriger Deckkraft. */
.kh-section--glow::before {
  background-image: radial-gradient(
      58% 68% at 86% 10%,
      rgba(230, 0, 0, .07) 0%,
      rgba(230, 0, 0, 0) 70%);
}

.kh-section--glow-left::before {
  background-image: radial-gradient(
      58% 68% at 12% 88%,
      rgba(230, 0, 0, .06) 0%,
      rgba(230, 0, 0, 0) 70%);
}

/* Grosser Ring, der bewusst aus dem Raster laeuft. Eine Form,
   kein Muster — deshalb nur einmal pro Seite. */
.kh-section--ring { overflow: hidden; }

.kh-section--ring::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline-end: -13vw;
  inset-block-start: -15vw;
  inline-size: 42vw;
  block-size: 42vw;
  max-inline-size: 580px;
  max-block-size: 580px;
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-circle);
  pointer-events: none;
}

.kh-section--dark.kh-section--ring::after { border-color: rgba(255, 255, 255, .14); }

/* Spiegelung fuer Abschnitte, deren Inhalt rechts steht. */
.kh-section--ring-start::after {
  inset-inline-end: auto;
  inset-inline-start: -13vw;
}


/* --- 22.3 Akzentlinie ------------------------------------- */

/* Kurze rote Kante als Auftakt — ersetzt dort, wo es passt, das
   wiederholte Eyebrow-Wort. */
.kh-accent-line {
  display: block;
  inline-size: 48px;
  block-size: 3px;
  border-radius: var(--kh-radius-xs);
  background-color: var(--kh-color-primary-500);
}

.kh-section--dark .kh-accent-line { background-color: var(--kh-color-primary-on-dark); }


/* --- 22.4 Statement --------------------------------------- */

/* Ein einzelner grosser Satz mit roter Kante. Traegt eine Aussage
   allein — ohne Eyebrow, ohne Karte, ohne Icon. */
.kh-statement {
  position: relative;
  padding-inline-start: var(--kh-space-md);
  border-inline-start: 3px solid var(--kh-color-primary-500);
}

.kh-statement__text {
  font-size: var(--kh-text-h3);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--kh-color-ink-900);
  max-width: 26ch;
  margin: 0;
}

.kh-statement--lg .kh-statement__text { font-size: var(--kh-text-h2); }

.kh-section--dark .kh-statement { border-inline-start-color: var(--kh-color-primary-on-dark); }
.kh-section--dark .kh-statement__text { color: var(--kh-color-ink-inverse); }


/* --- 22.5 Hintergrundtypografie — bewusst NICHT gebaut ----
   Eine grosse Jahreszahl als Flaeche hinter der Zeitleiste stand
   auf der Wunschliste. Sie braucht ein zweites Textelement, das
   denselben Wert noch einmal enthaelt; Elementor bietet fuer ein
   Heading-Widget kein aria-hidden, Vorlesewerkzeuge saegen die
   Jahreszahl also zweimal an. Der gestalterische Gewinn wiegt das
   nicht auf. Stattdessen traegt die Jahreszahl selbst — gross
   gesetzt, siehe about.css, Abschnitt 03. */


/* --- 22.6 Editorial-Medien -------------------------------- */

/* Rahmen fuer inhaltlich relevante Bilder. Wird auf das
   Elementor-Bildwidget gesetzt, damit das Bild ein <img> bleibt
   und einen Alternativtext behalten kann — kein Hintergrundbild. */
.kh-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-100);
}

/* Das Bildwidget gibt das <img> je nach Elementor-Fassung direkt aus
   oder in einem Container, einer figure oder einem Link. Alle vier Wege
   werden auf volle Hoehe gestellt, damit object-fit greift. */
.kh-media > .elementor-widget-container,
.kh-media > figure,
.kh-media > a,
.kh-media > .elementor-widget-container > figure,
.kh-media > .elementor-widget-container > a { display: block; block-size: 100%; }

.kh-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--kh-transition-slow) var(--kh-ease-standard);
}

/* Seitenverhaeltnisse — nicht jedes Bild ist 16:9. */
.kh-media--1x1  { aspect-ratio: 1 / 1; }
.kh-media--4x3  { aspect-ratio: 4 / 3; }
.kh-media--3x4  { aspect-ratio: 3 / 4; }
.kh-media--16x9 { aspect-ratio: 16 / 9; }
.kh-media--21x9 { aspect-ratio: 21 / 9; }

.kh-media--sharp { border-radius: var(--kh-radius-sm); }

/* Sehr zurueckhaltender Zoom. Kein Schwenk, keine Blende. */
.kh-media--zoom:hover img,
.kh-media--zoom:focus-within img { transform: scale(1.03); }

/* Verlauf fuer Text auf dem Bild. Nur einsetzen, wenn dort
   tatsaechlich Text steht. */
.kh-media--shade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 38%,
      rgba(0, 0, 0, .55) 100%);
}

/* Kleine Karte, die sich ueber die Bildkante legt. */
.kh-media-note {
  position: relative;
  z-index: 2;
  margin-block-start: calc(var(--kh-space-lg) * -1);
  margin-inline: var(--kh-space-md);
  padding: var(--kh-space-sm) var(--kh-space-md);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-color-surface-000);
  box-shadow: var(--kh-shadow-md);
}


/* --- 22.7 Neutrale Bildflaeche ---------------------------- */

/* Fuer Stellen, an denen ein echtes Foto fehlt: eine ruhige
   gestaltete Flaeche, die live bestehen kann und spaeter ohne
   Layoutwechsel durch ein Bild ersetzt wird. Ausdruecklich KEIN
   graues Platzhalterfeld mit Beschriftung. */
.kh-media-slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-050);
  background-image:
      radial-gradient(52% 60% at 78% 16%, rgba(230, 0, 0, .06) 0%, rgba(230, 0, 0, 0) 70%),
      radial-gradient(var(--kh-color-ink-900) .9px, transparent .9px);
  background-size: auto, 24px 24px;
  border: 1px solid var(--kh-color-line-200);
}

.kh-media-slot::after {
  content: "";
  position: absolute;
  inset-inline-end: -18%;
  inset-block-end: -30%;
  inline-size: 68%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-circle);
  pointer-events: none;
}


/* Auf dunklem Grund kehrt sich die Flaeche um: ein helles
   Rechteck waere dort ein Loch. Punktraster und Ring bleiben,
   nur heller gegen Dunkel statt dunkler gegen Hell. */
.kh-section--dark .kh-media-slot {
  background-color: rgba(255, 255, 255, .04);
  background-image:
      radial-gradient(52% 60% at 78% 16%, rgba(255, 107, 107, .10) 0%, rgba(255, 107, 107, 0) 70%),
      radial-gradient(rgba(255, 255, 255, .22) .9px, transparent .9px);
}

.kh-section--dark .kh-media-slot::after { border-color: rgba(255, 255, 255, .16); }


/* --- 22.8 Faktenleiste ------------------------------------ */

/* Horizontale Zahlen-/Faktenreihe. Ersetzt drei gleiche Karten
   dort, wo der Inhalt nur aus Wert und Bezeichnung besteht. */
.kh-factsbar {
  display: grid;
  gap: var(--kh-space-md);
  grid-template-columns: 1fr;
  padding-block: var(--kh-space-md);
  border-block: 1px solid var(--kh-color-line-200);
}

.kh-factsbar__item { display: flex; flex-direction: column; gap: var(--kh-space-3xs); }

.kh-factsbar__value {
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h3);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-ink-900);
  margin: 0;
}

.kh-factsbar__label {
  font-size: var(--kh-text-sm);
  line-height: 1.5;
  color: var(--kh-color-ink-500);
  margin: 0;
}

.kh-section--dark .kh-factsbar { border-block-color: rgba(255, 255, 255, .16); }
.kh-section--dark .kh-factsbar__value { color: var(--kh-color-ink-inverse); }
.kh-section--dark .kh-factsbar__label { color: rgba(255, 255, 255, .72); }

@media (min-width: 48em) {
  .kh-factsbar { grid-template-columns: repeat(3, 1fr); gap: var(--kh-space-lg); }
  .kh-factsbar--4 { grid-template-columns: repeat(4, 1fr); }
}


/* --- 22.9 Ruhiges Verhalten ------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .kh-media img { transition: none; }

  .kh-media--zoom:hover img,
  .kh-media--zoom:focus-within img { transform: none; }
}


/* --- 22.10 Belegstreifen ---------------------------------- */

/* ABGRENZUNG zur Faktenleiste (22.8): kh-factsbar ist fuer
   gleichartige Wert/Bezeichnung-Paare gebaut und formatiert ihre
   Kinder selbst. Der Belegstreifen nimmt dagegen FREMDE, bereits
   fertige Komponenten auf — Bewertung, Oeffnungsstatus, Hinweis —
   und gibt ihnen nur eine gemeinsame Flaeche mit Trennern. Beides
   nebeneinander zu haben ist Absicht, nicht Dopplung: wer Zahlen
   zeigt, nimmt 22.8, wer Belege zeigt, nimmt diesen hier. */
.kh-proof-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-space-md) var(--kh-space-lg);
  padding: var(--kh-space-md) var(--kh-card-padding);
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
  box-shadow: var(--kh-shadow-sm);
}

/* Der Trenner sitzt am Element, nicht als eigenes Markup — so
   bleibt der Streifen beim Umbrechen sauber und die Vorlage frei
   von Dekorationselementen. */
.kh-proof-strip > * + * {
  position: relative;
  padding-inline-start: var(--kh-space-lg);
}

@media (min-width: 48em) {

  .kh-proof-strip > * + *::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 10%;
    inline-size: 1px;
    background-color: var(--kh-color-line-200);
  }
}

/* Auf schmalen Geraeten untereinander statt gequetscht nebeneinander. */
@media (max-width: 47.9375em) {

  .kh-proof-strip { flex-direction: column; align-items: flex-start; }
  .kh-proof-strip > * + * { padding-inline-start: 0; }
}

.kh-section--dark .kh-proof-strip {
  background-color: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: var(--kh-shadow-none);
}

.kh-section--dark .kh-proof-strip > * + *::before { background-color: rgba(255, 255, 255, .16); }


/* --- 22.11 Kennzahlenkarte -------------------------------- */

/* Die erhabene Form der Faktenleiste: eine einzelne Zahl auf
   eigener Flaeche, fuer Raster, in denen eine Kennzahl neben
   anderen Inhalten steht. Wo mehrere Zahlen NUR untereinander
   stehen, bleibt 22.8 die ruhigere Wahl. */
.kh-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-2xs);
  padding: var(--kh-card-padding);
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
}

/* Die rote Kante ist der Akzent — eine Flaeche, kein Anstrich. */
.kh-stat-card--accent { border-block-start: 3px solid var(--kh-color-primary-500); }

.kh-stat-card__value {
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h2);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-tight);
  letter-spacing: var(--kh-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-ink-900);
  margin: 0;
}

.kh-stat-card__label {
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-500);
  margin: 0;
}

.kh-section--dark .kh-stat-card {
  background-color: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .16);
}

.kh-section--dark .kh-stat-card--accent { border-block-start-color: var(--kh-color-primary-on-dark); }
.kh-section--dark .kh-stat-card__value { color: var(--kh-color-ink-inverse); }
.kh-section--dark .kh-stat-card__label { color: rgba(255, 255, 255, .72); }


/* --- 22.12 Symbolzeile ------------------------------------ */

/* Symbol links, Text rechts. Ersetzt die dritte gleiche Karte
   dort, wo der Inhalt eigentlich nur eine Aufzaehlung ist. Das
   Symbol bekommt eine feste Spur, damit mehrere Zeilen
   untereinander auf einer Kante stehen. */
.kh-icon-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--kh-space-sm) var(--kh-space-md);
}

.kh-icon-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-color-primary-050);
  color: var(--kh-color-primary-text);
}

.kh-icon-item__icon svg { inline-size: 20px; block-size: 20px; }

.kh-icon-item__title {
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-semibold);
  line-height: var(--kh-leading-snug);
  color: var(--kh-color-ink-900);
  margin: 0;
}

.kh-icon-item__text {
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-500);
  margin: 0;
}

/* Titel und Text teilen sich die zweite Spalte. */
.kh-icon-item__title,
.kh-icon-item__text { grid-column: 2; }
.kh-icon-item__icon { grid-row: span 2; }

.kh-section--dark .kh-icon-item__icon {
  background-color: rgba(255, 107, 107, .14);
  color: var(--kh-color-primary-on-dark);
}

.kh-section--dark .kh-icon-item__title { color: var(--kh-color-ink-inverse); }
.kh-section--dark .kh-icon-item__text { color: rgba(255, 255, 255, .72); }


/* ==========================================================
   23. MARKENFLAECHE, BRAND-GEOMETRIE UND BEWEGUNG
   ==========================================================

   Der Kopfbereich jeder Hauptseite ist die einzige grosse rote
   Flaeche der Seite. Alles Uebrige bleibt hell, hellgrau oder
   dunkel — „Rot ist ein Werkzeug, kein Anstrich".

   Die Geometrie rechts im Kopf ist KEIN Logo. Sie zitiert die
   Kreisform der Marke, zeichnet sie aber nicht nach. Das echte
   Vodafone-Zeichen wird ausschliesslich als vorhandenes Asset
   eingesetzt (siehe 23.5) und nie umgefaerbt.

   Dekor liegt immer unter dem Inhalt, nimmt keine Klicks an und
   traegt keine Information.
   ========================================================== */


/* --- 23.1 Die rote Markenflaeche -------------------------- */

/* Wird IMMER zusammen mit kh-section--brand gesetzt. Von dort
   kommen die Farbrollen fuer Ueberschrift, Lead, Eyebrow und
   beide Schaltflaechenarten (Abschnitt 04 und 19); hier kommen
   Verlauf, Geometrie und Bewegung dazu. */
.kh-hero-brand {
  position: relative;
  isolation: isolate;

  /* Das Motiv laeuft bewusst ueber die Kante hinaus und wird dort
     beschnitten. Ohne das entsteht ein waagerechter Seitenlauf —
     gemessen am 17.09.2026 bei 768px und 1024px auf drei von vier
     Seiten. Ein Kopf, aus dem ein Bild herausragen soll, setzt das
     gezielt zurueck (siehe about.css) und bemisst das Motiv dafuer
     so, dass es den Abschnitt nicht verlaesst. */
  overflow: hidden;
  color: var(--kh-color-ink-inverse);

  /* Rot als Verlauf, nicht als Flaeche: oben links Licht, unten
     rechts Tiefe. Der Grundton bleibt exakt #E60000. */
  background-color: var(--kh-color-surface-brand);
  background-image:
      radial-gradient(118% 92% at 6% -6%, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, 0) 56%),
      radial-gradient(96% 118% at 102% 104%, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 62%);

  /* Mittelpunkt des Markenmotivs, gemessen von der linken bzw. oberen
     Kante des Abschnitts. Ringe UND Markenzeichen haengen an diesem
     einen Punkt; je Seite wird nur er verschoben. */
  --kh-ring-cx: 25%;
  --kh-ring-cy: 44%;
  /* Ein einziges Mass steuert das ganze Motiv: das Signet. Feld,
     Wellenfront und Nachlaeufer leiten sich davon ab. */
  --kh-mark-size: 76px;
}

.kh-hero-brand > * {
  position: relative;
  z-index: 1;
}


/* --- 23.2 Ringgeometrie ----------------------------------- */

/* DAS VOLLSTAENDIGE VODAFONE-SIGNET IM MITTELPUNKT
   -------------------------------------------------------------
   Das Asset ist der offizielle Speechmark: roter Aussenkreis,
   deckend weisse Innenflaeche, aussen transparent.

   Auf rotem Grund verschwindet der rote Aussenkreis — er hat exakt
   dieselbe Farbe wie die Flaeche. Sichtbar blieb deshalb nur die
   weisse Innenform, also der Tropfen allein. Genau das war der
   gemeldete Fehler.

   NACHGEPRUEFT AUF NEUTRALEM GRUND (#333, Weiss, Schachbrett): das
   Asset ist eine ROTE VOLLFLAECHE in Kreisform mit dem weissen
   Speechmark als Aussparung. Nicht ein Ring, sondern eine Scheibe.

   WARUM DER ERSTE ANLAUF NICHT WIRKEN KONNTE
   Das dunkle Feld lag UNTER dem Zeichen und war gleich gross. Die
   Scheibe ist aber deckend — sie hat das Feld restlos verdeckt. Die
   Deckkraft des Elements wirkt erst auf das FERTIG zusammengesetzte
   Ergebnis, nicht zwischen den Ebenen. Die Kreisflaeche blieb
   dadurch reines #E60000 auf reinem #E60000 und damit unsichtbar;
   uebrig blieb nur die weisse Aussparung, also der Tropfen allein.
   Genau dieser Fehler war gemeldet.

   DIE LOESUNG: nicht das Zeichen abdunkeln, sondern SEINE UMGEBUNG.
   Das Element ist 2,6-mal so gross wie das Zeichen und traegt zwei
   Ebenen: oben das unveraenderte Asset auf Zeichengroesse, darunter
   ein weicher dunkler Hof, der bei 38,46 Prozent — exakt am Rand der
   Scheibe — beginnt und nach aussen ausblendet.

   Damit liegt die Scheibe als HELLERE Kreisform in einem dunkleren
   Feld. Der Aussenkreis wird sichtbar, ohne dass am Asset selbst
   etwas veraendert wird: nicht umgefaerbt, nicht maskiert, nicht
   gefiltert, nicht verzerrt, nicht in den Proportionen angetastet.

   NEBENEFFEKT ZUGUNSTEN DER LESBARKEIT: der Hof dunkelt das Rot auf
   rund #A10000 ab. Weiss darauf erreicht 8,4:1 statt 4,81:1 auf
   reinem #E60000. Anders als die frueher hier liegende weisse Platte
   verschlechtert der Hof den Text also nicht, sondern verbessert
   ihn. */
.kh-hero-brand::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inline-size: calc(var(--kh-mark-size) * 2.6);
  block-size: calc(var(--kh-mark-size) * 2.6);
  inset-inline-start: var(--kh-ring-cx);
  inset-block-start: var(--kh-ring-cy);
  translate: -50% -50%;
  background-image:
      url("../../../../uploads/2026/09/favicon.webp"),
      radial-gradient(circle closest-side at center,
          rgba(0, 0, 0, .5) 0 38.46%,
          rgba(0, 0, 0, .3) 58%,
          rgba(0, 0, 0, 0) 100%);
  background-size: 38.46% 38.46%, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  opacity: .6;
}

/* DAS VODAFONE-ZEICHEN ALS WASSERZEICHEN IM MITTELPUNKT
   -------------------------------------------------------------
   Vorher sass das Zeichen auf einer deckend weissen Kreisplatte.
   Die war gut lesbar, wirkte aber wie eine eigenstaendige
   Logo-Plakette und nicht wie Hintergrundgrafik. Sie ist entfernt.

   Jetzt liegt das Asset unveraendert und OHNE Platte auf dem Rot,
   nur mit niedriger Deckkraft. Nachgemessen bei .10, .16, .25 und
   .40: die deckend weisse Innenflaeche des Zeichens mischt sich
   dabei zu einem helleren Rot, und die Silhouette des Speechmarks
   bleibt sauber erkennbar. Das Asset selbst wird nicht angefasst —
   nicht umgefaerbt, nicht maskiert, nicht gefiltert, nicht verzerrt.

   Die Deckkraft liegt bewusst in derselben Groessenordnung wie die
   Ringe (.11 bis .16), damit Zeichen und Geometrie als EINE
   Hintergrundgrafik gelesen werden.

   ACHTUNG KONTRAST: unter dem Zeichen hellt der Grund auf rund
   rgb(234,46,46) auf; Weiss darauf erreicht nur noch etwa 3,6:1.
   Das Zeichen darf deshalb NICHT hinter Fliesstext liegen. Die
   Mittelpunkte in den Seitendateien sind entsprechend gesetzt und
   mit einem eigenen Test abgesichert. */
/* DER RADAR — EIN DURCHGEHENDER STROM VON IMPULSEN
   -------------------------------------------------------------
   Vorher: EIN Ringpaket wuchs von der Mitte nach aussen, verblasste
   und begann von vorn. Zwischen zwei Durchlaeufen entstand dabei
   zwangslaeufig eine Luecke — der gemeldete Start-Stopp-Eindruck.

   VORLAGE IST DIE FRUEHERE FASSUNG, NACHGEMESSEN AM VIDEO
   Aus der Bildschirmaufnahme vom 17.09.2026 laesst sich die alte
   Welle Bild fuer Bild auslesen. Waagerechter Schnitt durch den
   Mittelpunkt bei Sekunde 2,9:

       r =  28..364   (230,  0,  0)   reines #E60000
       r =      370   (239, 87, 80)   die Kante: Weiss bei 34 Prozent
       r >=     376   (233, 34, 29)   aussen um 13 Prozent aufgehellt

   Also EINE scharfe, duenne, helle Kante, die nach aussen laeuft.
   Die Bahn ueber einen Durchlauf, ebenfalls gemessen (Radius in
   Bildpunkten, Geburt bei 42, Ende bei 386):

       0,0s  42    1,0s 150    2,0s 238    3,0s 295    4,0s 333
       5,0s 358    6,0s 374    7,0s 384    7,4s 386

   Das ist ein starkes Ease-out. Angepasst ergibt sich
   cubic-bezier(.175,.425,.35,.95) — quadratisches Restmittel 0,0033
   ueber 32 Messpunkte. Genau diese Kurve laeuft jetzt.

   Der Zyklus der Vorlage dauerte 9 Sekunden, davon stand die Welle
   die letzten rund 1,5 Sekunden fast still und verblasste. DAS war
   die Pause. Die Bewegung selbst war richtig.

   WIE DIE PAUSE VERSCHWINDET
   Nicht durch eine andere Bewegung, sondern durch ZWEI davon. Jede
   Welle traegt ihren eigenen Radius in einer registrierten
   Eigenschaft (--kh-radar-1 und -2) und ihre eigene Animation mit
   eigener Verzoegerung: 0 und -4,5 Sekunden. Waehrend eine Welle
   aussen ausklingt, ist die naechste schon unterwegs.

   Zwei und nicht drei: die Vorlage zeigt zu jedem Zeitpunkt genau
   EINE Welle, dafuer kraeftig. Mit drei ueberlagerten Schweifen
   entstand ein flaechiger Schleier von 0,02 bis 0,03 ueber fast dem
   ganzen Radius — der Grund, vor dem die Kante stehen soll, war
   damit selbst schon aufgehellt. Zwei Wellen reichen fuer einen
   lueckenlosen Strom und halten die Flaeche dazwischen sauber.

   Registrierte Eigenschaften sind noetig, weil nur sie interpoliert
   werden koennen. Ohne @property waere der Wert ein Text und die
   Animation wuerde springen.

   WARUM DIE NAHT NICHT SICHTBAR IST
   Der Beweis laeuft hier anders als bei einem Muster, das sich
   wiederholt. Eine Welle startet bei 10 Prozent des Radius und endet
   bei 96. Die Maske gibt erst ab 20 Prozent etwas frei und ist ab 94
   wieder undurchsichtig. Der Sprung von 96 zurueck auf 10 findet
   also vollstaendig im unsichtbaren Bereich statt. Es gibt nichts zu
   sehen, was springen koennte.

   Die Vorgaengerfassung (ein gleichmaessiges Ringmuster, dessen
   Abstand von 100 auf 200 Prozent wuchs) war NICHT nahtlos: eine
   Verdopplung des Abstands halbiert die Ringzahl, aus 11,2 / 23,2 /
   35,2 wird 22,4 / 46,4 / 70,4 — ein anderes Muster. Auch die
   geometrische Zwischenfassung war zwar nahtlos, sah der Vorlage
   aber nicht aehnlich: gleichmaessig gleitende Baender statt einer
   beschleunigt geborenen und auslaufenden Kante.

   FREIE INNENZONE: die Maske haelt bis 20 Prozent des Radius alles
   frei. Das Signet endet bei 11 Prozent. Zwischen Zeichen und erster
   sichtbarer Welle liegen damit 0,4 Zeichenbreiten Ruhe — keine
   Welle laeuft durch das Logo.

   Die Maske liegt auf dem Element und bewegt sich NICHT mit. Deshalb
   wandert nicht die Sichtbarkeitsgrenze, sondern nur das Signal. */
.kh-hero-brand::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inline-size: var(--kh-radar-size, calc(var(--kh-mark-size) * 9));
  block-size: var(--kh-radar-size, calc(var(--kh-mark-size) * 9));
  inset-inline-start: var(--kh-ring-cx);
  inset-block-start: var(--kh-ring-cy);
  translate: -50% -50%;

  /* ZWEI WELLEN, ZWEI EBENEN — AUFBAU NACH DER VORLAGE
     Der Radius kommt aus einer registrierten Eigenschaft und wird je
     Welle einzeln animiert; daher laufen beide unabhaengig und
     zeitversetzt.

     Der Aufbau einer Welle ist am Video ausgemessen (Radialschnitt
     bei 0,5 / 1,5 / 2,5 / 4,0 / 6,0 Sekunden):

         innen bis zur Kante   durchsichtig — sauberes Rot
         die Kante             1,00  (scharf, wenige Punkte breit)
         Band 1, bis 1,69 r    0,40
         Band 2, bis 2,37 r    0,23
         danach                durchsichtig

     Die Breite der Baender ist nicht fest, sondern 0,68 Frontradius
     je Band — nachgemessen 35px bei r=51, 78 bei 114, 109 bei 160,
     138 bei 204, 156 bei 228. Das Verhaeltnis ist auf vier
     Nachkommastellen konstant. Deshalb stehen hier Faktoren auf den
     Radius (1.69, 2.37) und keine festen Abstaende.

     ENTSCHEIDEND SIND DIE HARTEN KANTEN. Die Vorfassung hatte statt
     der Baender einen weich auslaufenden Schweif — gemessen 0,027
     ueber 190px. Der las sich als Dunst, nicht als Ring. Die
     Uebergaenge hier sind 0,2 Prozentpunkte breit, also praktisch
     Stufen. */
  background-image:
      radial-gradient(circle closest-side at center,
          rgba(255, 255, 255, 0) calc(var(--kh-radar-1) - .55%),
          rgba(255, 255, 255, var(--kh-radar-hell, .3)) calc(var(--kh-radar-1) - .3%),
          rgba(255, 255, 255, var(--kh-radar-hell, .3)) calc(var(--kh-radar-1) + .3%),
          rgba(255, 255, 255, calc(var(--kh-radar-hell, .3) * .4)) calc(var(--kh-radar-1) + .55%),
          rgba(255, 255, 255, calc(var(--kh-radar-hell, .3) * .4)) calc(var(--kh-radar-1) * 1.69),
          rgba(255, 255, 255, calc(var(--kh-radar-hell, .3) * .23)) calc(var(--kh-radar-1) * 1.69 + .2%),
          rgba(255, 255, 255, calc(var(--kh-radar-hell, .3) * .23)) calc(var(--kh-radar-1) * 2.37),
          rgba(255, 255, 255, 0) calc(var(--kh-radar-1) * 2.37 + .2%)),
      radial-gradient(circle closest-side at center,
          rgba(255, 255, 255, 0) calc(var(--kh-radar-2) - .55%),
          rgba(255, 255, 255, var(--kh-radar-hell, .3)) calc(var(--kh-radar-2) - .3%),
          rgba(255, 255, 255, var(--kh-radar-hell, .3)) calc(var(--kh-radar-2) + .3%),
          rgba(255, 255, 255, calc(var(--kh-radar-hell, .3) * .4)) calc(var(--kh-radar-2) + .55%),
          rgba(255, 255, 255, calc(var(--kh-radar-hell, .3) * .4)) calc(var(--kh-radar-2) * 1.69),
          rgba(255, 255, 255, calc(var(--kh-radar-hell, .3) * .23)) calc(var(--kh-radar-2) * 1.69 + .2%),
          rgba(255, 255, 255, calc(var(--kh-radar-hell, .3) * .23)) calc(var(--kh-radar-2) * 2.37),
          rgba(255, 255, 255, 0) calc(var(--kh-radar-2) * 2.37 + .2%));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  /* DIE MASKE — FREIE INNENZONE, KLARZONE, AUSBLENDUNG
     Bis 20 Prozent des Radius vollstaendig frei: dort steht das
     Signet (es endet bei 11 Prozent), dazwischen bleibt Ruhe.

     Bis --kh-radar-klar traegt die Welle ihre volle Helligkeit. Ab
     dort faellt sie auf ein Fuenftel.

     Das ist keine Kosmetik, sondern gerechnet. Weiss auf #E60000
     erreicht nur 4,81:1 — der Kopf hat also fast keinen Spielraum
     nach oben. Eine Kante mit 30 Prozent Weiss hellt den Grund auf
     rgb(238,77,77) auf, und weisser Text darauf faellt auf 3,64:1.
     Das ist unter AA.

     Die Grenze liegt bei 10,8 Prozent Weiss (4,50:1). Ein Fuenftel
     von 30 sind 6 Prozent und damit 4,73:1 — sicher. Die Welle darf
     also ueber Fliesstext laufen, sobald sie ausgeduennt ist, aber
     nicht vorher.

     Jede Seite setzt --kh-radar-klar auf ihren GEMESSENEN textfreien
     Radius (Skript p6-klar). Wo der Text so nah steht, dass es keine
     klare Zone gibt — „Ueber uns" und „Unsere Filialen" —, nimmt die
     Seite stattdessen --kh-radar-hell auf 0,10 zurueck. Dort ist die
     Welle dann durchgehend weich statt scharf. Das ist eine bewusste
     Abwaegung zugunsten der Lesbarkeit, keine Nachlaessigkeit. */
  -webkit-mask-image: radial-gradient(
      circle closest-side at center,
      transparent 0 20%,
      #000 30%,
      #000 var(--kh-radar-klar, 36%),
      rgba(0, 0, 0, .2) calc(var(--kh-radar-klar, 36%) + 10%),
      transparent 96%);
          mask-image: radial-gradient(
      circle closest-side at center,
      transparent 0 20%,
      #000 30%,
      #000 var(--kh-radar-klar, 36%),
      rgba(0, 0, 0, .2) calc(var(--kh-radar-klar, 36%) + 10%),
      transparent 96%);
}

/* WO DAS MOTIV SITZEN DARF
   -------------------------------------------------------------
   Die Ringe duerfen hinter dem Text liegen — sie sind Konturen mit
   11 bis 16 Prozent Deckkraft und stoeren nicht. Die Platte NICHT:
   sie ist deckend weiss und wuerde Text verdecken. Gemessen am
   17.09.2026 lag sie im ersten Versuch mitten im Lead der
   Startseite und hat ein Wort unlesbar gemacht.

   Der Mittelpunkt wird deshalb je Seite in das freie Feld unterhalb
   der Schaltflaechen gelegt (--kh-ring-cx / --kh-ring-cy in der
   jeweiligen Seitendatei). Die Ringe laufen von dort nach oben
   hinter den Text und werden unten angeschnitten.

   Unter 1024px gibt es kein solches Feld: der Kopf ist dort
   einspaltig, Text und Bild fuellen ihn vollstaendig. Das Motiv
   entfaellt — das ist dieselbe Grenze, ab der auch die Bewegung
   einsetzt. */
@media (max-width: 63.99em) {

  .kh-hero-brand::before,
  .kh-hero-brand::after { display: none; }
}


/* --- 23.3 Bewegungssystem --------------------------------- */

/* Ausdruecklich kein wandernder Punkt mehr: der frueher hier
   laufende Umlaufpunkt las sich wie ein Slider-Indikator und ist
   ersatzlos entfallen. Keine Rotation, kein Ping, keine kurzen
   Zyklen. Das Signet bleibt still, damit das Zeichen scharf steht;
   die Bewegung gehoert allein den Impulsen.

   DER RADAR — nahtlos, weil das Muster nach einem Zyklus mit sich
   selbst zusammenfaellt. Kein Sprung, keine Luecke, kein Neustart.

   Acht Sekunden je Schritt, LINEAR. Jede Beschleunigung wuerde einen
   Rhythmus erzeugen und damit das Stocken zurueckbringen. Ein Impuls
   braucht rund 37 Sekunden von der Innenkante bis zum Ausblenden. */
/* Nur registrierte Eigenschaften lassen sich interpolieren. Ohne
   diese drei Zeilen waere --kh-radar-1 ein Text, und die Animation
   wuerde von Wert zu Wert springen statt zu gleiten.

   Die Anfangswerte sind so gewaehlt, dass ein Browser ohne
   @property-Unterstuetzung drei ruhende Wellen zeigt statt gar
   nichts. Dieselben Werte gelten bei reduzierter Bewegung. */
@property --kh-radar-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 30%;
}

@property --kh-radar-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 72%;
}

@keyframes kh-motion-radar-1 {
  from { --kh-radar-1: 10%; }
  to   { --kh-radar-1: 96%; }
}

@keyframes kh-motion-radar-2 {
  from { --kh-radar-2: 10%; }
  to   { --kh-radar-2: 96%; }
}

/* Eine sehr langsam wandernde Lichtkante fuer dunkle Flaechen.
   Nur transform — die Kante ist ein schraeger Verlauf, der quer
   ueber die Flaeche zieht. */
@keyframes kh-motion-sheen {
  0%   { transform: translate3d(-40%, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate3d(140%, 0, 0); opacity: 0; }
}

/* Bewegung erst ab Laptopbreite: auf kleinen Geraeten kostet sie
   Strom und bringt nichts. */
@media (min-width: 64em) {

  /* Das Signet bleibt ruhig stehen. Ein mitatmendes Logo hat den
     Eindruck von Start und Stopp verstaerkt; die Bewegung gehoert
     den Impulsen. */

  /* Zwei Wellen, gleiche Kurve, um einen halben Zyklus versetzt. Die
     negative Verzoegerung setzt die zweite Welle sofort mitten in
     ihren Lauf — beim Laden steht damit nie eine leere Flaeche da,
     auf die erst eine Welle zulaufen muss.

     DIE DAUER GEHOERT ZUR SEITE, NICHT HIERHER
     Eine feste Dauer fuer alle Seiten war ein Fehler. Die Welle legt
     je Zyklus 86 Prozent des Radius zurueck — bei gleicher Dauer ist
     sie auf einem grossen Motiv also entsprechend schneller. Gemessen
     bei 1440px mit den frueheren 9 Sekunden ueberall:

         Startseite / Ueber uns   Radius 259   24,8 px/s
         Standorte                Radius 432   41,3 px/s
         Karriere                 Radius 492   47,0 px/s
         Unsere Filialen          Radius 540   51,6 px/s

     Karriere lief damit fast doppelt so schnell wie die Startseite,
     und genau so sah es auch aus. Jede Seite setzt deshalb
     --kh-radar-dauer passend zu ihrem Radius, Ziel sind rund
     25 px/s ueberall. */
  .kh-hero-brand.kh-motion::after {
    animation:
        kh-motion-radar-1 var(--kh-radar-dauer, 9s)
            cubic-bezier(.175, .425, .35, .95) 0s infinite,
        kh-motion-radar-2 var(--kh-radar-dauer, 9s)
            cubic-bezier(.175, .425, .35, .95)
            calc(var(--kh-radar-dauer, 9s) * -.5) infinite;
  }
}


/* --- 23.3b Bewegte Flaechen ausserhalb des Kopfes --------- */

/* Eine dezente Lichtkante, die alle 18 Sekunden einmal ueber eine
   dunkle Flaeche zieht. Opt-in ueber die Klasse, nicht automatisch:
   pro Seite sind zwei bis vier Bewegungsmomente vorgesehen, nicht
   mehr. */
.kh-motion-sheen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.kh-motion-sheen > * {
  position: relative;
  z-index: 1;
}

.kh-motion-sheen::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 38%;
  pointer-events: none;
  background-image: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .055) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-40%, 0, 0);
}

@media (min-width: 64em) {

  .kh-motion-sheen::after {
    animation: kh-motion-sheen 18s var(--kh-ease-in-out) infinite;
    will-change: transform, opacity;
  }
}


/* --- 23.4 Bausteine der Markenflaeche --------------------- */

/* DIE KENNZEICHNUNG IN PILLENFORM
   Kein neues Element: das ohnehin vorhandene Eyebrow des
   Abschnittskopfes bekommt auf der roten Flaeche eine andere
   Darstellung. Kontur statt Flaeche, damit das Rot nicht doppelt
   auftraegt. Gilt fuer jeden Kopf mit kh-hero-brand — „Ueber uns",
   „Karriere" und „Unsere Filialen" teilen sich diese eine Regel. */
.kh-hero-brand .kh-section-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-xs);
  inline-size: auto;
  max-inline-size: max-content;
  /* Ohne align-self zieht der Elementor-Flex-Container das Widget auf
     die volle Spaltenbreite — die Pille waere dann 1116px breit.
     Gemessen am 17.09.2026 auf der Karriereseite. */
  align-self: flex-start;
  padding: 7px var(--kh-space-sm) 7px var(--kh-space-xs);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--kh-radius-pill);
}

.kh-hero-brand .kh-section-header__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--kh-radius-circle);
  background-color: var(--kh-color-ink-inverse);
}

/* Farbrollen fuer Text, den das Designsystem nicht schon abdeckt.
   Weiss auf #E60000 ergibt 4,81:1 und besteht AA. */
.kh-hero-brand .kh-text,
.kh-hero-brand .kh-text-sm,
.kh-hero-brand p { color: rgba(255, 255, 255, .92); }

.kh-hero-brand a:not(.elementor-button) { color: var(--kh-color-ink-inverse); }


/* --- 23.5 Vodafone-Zeichen als Wasserzeichen -------------- */

/* NUR AUF HELLEN FLAECHEN.

   Das vorhandene Asset ist der offizielle Speechmark in Rot auf
   transparentem Grund — mit deckend weisser Innenflaeche. Als
   Maske wuerde diese Innenflaeche mitgezeichnet und aus dem
   Zeichen eine volle Scheibe; das waere eine Verzerrung des Logos.
   Es wird deshalb unveraendert eingesetzt: rotes Zeichen, sehr
   geringe Deckkraft, ausschliesslich auf Weiss, Off-White oder
   Hellgrau.

   Eine weisse Fassung fuer rote und dunkle Flaechen kommt erst,
   wenn ein offizielles weisses Asset vorliegt. Bis dahin tragen
   diese Flaechen die Ringgeometrie aus 23.2.

   Der Pfad fuehrt vom Stilverzeichnis des Themes in die Mediathek:
   assets/css/ -> assets/ -> convi/ -> themes/ -> wp-content/ */
.kh-brand-mark {
  position: relative;
  isolation: isolate;
  /* Das Zeichen ragt bewusst ueber die Kante hinaus und wird dort
     beschnitten — sonst entstuende ein waagerechter Seitenlauf. */
  overflow: hidden;
}

.kh-brand-mark > * {
  position: relative;
  z-index: 1;
}

.kh-brand-mark::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inline-size: clamp(200px, 24vw, 380px);
  aspect-ratio: 1 / 1;
  inset-inline-end: -4%;
  inset-block-start: -10%;
  background-image: url("../../../../uploads/2026/09/favicon.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .05;
}

/* Spiegelung fuer Abschnitte, deren Inhalt rechts steht. */
.kh-brand-mark--start::before {
  inset-inline-end: auto;
  inset-inline-start: -5%;
  inset-block-start: auto;
  inset-block-end: -16%;
}

@media (max-width: 47.99em) {
  .kh-brand-mark::before { inline-size: 180px; opacity: .04; }
}


/* --- 23.5b Helle Karten auf farbiger Flaeche -------------- */

/* Eine helle Karte auf roter oder dunkler Flaeche fuehrt ihre EIGENE
   Farbwelt. Ohne diese Regel erben Ueberschrift, Label und Fliesstext
   darin das Weiss der Flaeche und verschwinden auf dem hellen Grund.

   Gemessen am 17.09.2026 auf der Standortseite: nach dem Umstellen des
   Kopfes auf die Markenflaeche stand die Kontaktkarte vollstaendig
   leer da — Adresse und Telefonnummer waren weiss auf Weiss.

   Karten, die selbst dunkel oder rot sind, bleiben ausgenommen. */

.kh-section--brand .kh-card:not(.kh-card--dark):not(.kh-card--brand),
.kh-section--dark  .kh-card:not(.kh-card--dark):not(.kh-card--brand) {
  color: var(--kh-color-ink-700);
}

.kh-section--brand .kh-card:not(.kh-card--dark):not(.kh-card--brand) :is(.kh-display, .kh-h1, .kh-h2, .kh-h3, .kh-h4, .kh-card__title),
.kh-section--dark  .kh-card:not(.kh-card--dark):not(.kh-card--brand) :is(.kh-display, .kh-h1, .kh-h2, .kh-h3, .kh-h4, .kh-card__title) {
  color: var(--kh-color-ink-900);
}

.kh-section--brand .kh-card:not(.kh-card--dark):not(.kh-card--brand) :is(.kh-text, .kh-lead, .kh-prose, .kh-card__text),
.kh-section--dark  .kh-card:not(.kh-card--dark):not(.kh-card--brand) :is(.kh-text, .kh-lead, .kh-prose, .kh-card__text) {
  color: var(--kh-color-ink-700);
}

.kh-section--brand .kh-card:not(.kh-card--dark):not(.kh-card--brand) :is(.kh-text-sm, .kh-label, .kh-card__meta),
.kh-section--dark  .kh-card:not(.kh-card--dark):not(.kh-card--brand) :is(.kh-text-sm, .kh-label, .kh-card__meta) {
  color: var(--kh-color-ink-500);
}

/* Links in einer solchen Karte behalten ihre Linkfarbe. Ohne das
   wuerden sie wie Fliesstext aussehen — die Telefonnummer auf der
   Standortseite war nach der Farbkorrektur oben nicht mehr als Link
   erkennbar. --kh-color-primary-text erreicht auf Weiss 8,6:1. */
.kh-section--brand .kh-card:not(.kh-card--dark):not(.kh-card--brand) a:not(.elementor-button):not(.kh-button),
.kh-section--dark  .kh-card:not(.kh-card--dark):not(.kh-card--brand) a:not(.elementor-button):not(.kh-button) {
  color: var(--kh-color-primary-text);
}


/* --- 23.6 Feines Raster ----------------------------------- */

/* Eine Ebene Tiefe fuer Flaechen, die sonst nur Text tragen —
   senkrechte Haarlinien im Spaltenmass, nach unten auslaufend.
   Eingesetzt auf den beiden Fragenbereichen (Startseite, Karriere),
   deshalb steht es hier und nicht in einer Seitendatei. */
.kh-section--lines {
  position: relative;
  isolation: isolate;
}

.kh-section--lines > * {
  position: relative;
  z-index: 1;
}

.kh-section--lines::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
      90deg,
      var(--kh-color-line-200) 0 1px,
      transparent 1px 96px);
  opacity: .6;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}


/* --- 23.7 Was hier BEWUSST NICHT steht --------------------
   Ein dunkles Vollbreiten-Band und ein versetztes Viererraster
   waren als globale Komponenten geplant. Beide werden derzeit an
   genau EINER Stelle gebraucht — das Band auf der Startseite, das
   versetzte Raster auf der Karriereseite. Eine globale Komponente
   mit einem einzigen Nutzer ist keine Komponente, sondern toter
   Code an der falschen Stelle. Sie stehen deshalb in home.css
   bzw. career.css. Sobald eine zweite Seite sie braucht, gehoeren
   sie hierher.
   --------------------------------------------------------- */


/* --- 23.8 Ruhiges Verhalten ------------------------------- */

@media (prefers-reduced-motion: reduce) {

  /* Saemtliche dekorative Bewegung aus. Ringe und Wasserzeichen
     bleiben statisch sichtbar. */
  /* Signet und Impulsringe bleiben statisch sichtbar — das Muster
     haelt an, statt zu verschwinden. */
  /* Die beiden Wellen halten an, wo ihre Anfangswerte sie hinsetzen:
     bei 30 und 72 Prozent. Das Bild bleibt damit vollstaendig, nur
     ohne Bewegung. */
  .kh-hero-brand.kh-motion::after { animation: none; }

  .kh-motion-sheen::after {
    animation: none;
    will-change: auto;
    opacity: 0;
  }
}


/* ==========================================================
   24. ABSCHLUSSPANEL
   ==========================================================
   WAS DAS LÖST

   Ein Durchgang über alle neun Seiten hat gezeigt, dass sie alle
   dieselbe schwächste Stelle haben — und zwar dieselbe: den
   Abschluss. Gemessen wurden je Abschnitt Bilder, Karten,
   Aufzählungen, Trennlinien und die Flächenfarbe. Ergebnis:

       kh-home-cta        keine Bilder, keine Karten, 1 Linie
       kh-about-cta       keine Bilder, keine Karten, 2 Linien
       kh-career-cta      keine Bilder, keine Karten, 2 Linien
       kh-locator-cta     keine Bilder, keine Karten, 2 Linien
       kh-services-cta    keine Bilder, keine Karten, 2 Linien
       kh-solutions-cta   keine Bilder, keine Karten, 2 Linien
       kh-shops-cta       keine Bilder, keine Karten, 1 Linie
       kh-business-cta    keine Bilder, keine Karten, 1 Linie
       kh-location-cta    keine Bilder, keine Karten, 2 Linien

   Neun Mal Überschrift, Absatz, Schaltflächen auf heller Fläche.
   Jede Seite endete also mit derselben leisesten Stelle — genau
   dort, wo die Entscheidung fallen soll.

   DIE ANTWORT IST EIN BAUSTEIN, KEINE NEUN LÖSUNGEN
   Statt neun Abschnitte einzeln umzubauen, bekommt der Abschluss
   eine eigene Komponente: eine dunkle, eingerückte Fläche mit
   abgerundeter Kante, rotem Anschnitt links, langsam wanderndem
   Ringmotiv und zweispaltigem Satz. Die Seiten behalten ihre
   Texte und ihre Schaltflächen; was sich ändert, ist die
   Komposition — aus einem Band wird ein Panel.

   WARUM DUNKEL UND NICHT ROT
   Sechs der neun Seiten haben bereits einen roten Kopf. Ein rotes
   Panel am Fuss hätte die Seite zwischen zwei gleichen Flächen
   eingeklemmt. Dunkel setzt den Schlusspunkt, ohne die Marke zu
   verdoppeln — und lässt die rote Schaltfläche darin zum
   hellsten Punkt der Fläche werden.

   ELEMENTOR-FALLE · PSEUDO-ELEMENTE
   ::before und ::after der Elementor-Container gehören sonst
   dessen Hintergrund-Overlays. Diese Container tragen keinen in
   Elementor gesetzten Hintergrund — die Pseudo-Elemente sind hier
   also frei. Das gilt nur, solange das so bleibt.
   ========================================================== */

.kh-cta-panel {
  padding-block: clamp(40px, 3vw + 20px, 80px);
}

.kh-cta-panel > .kh-container {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(32px, 3vw + 16px, 64px);
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-900);
}

/* Der rote Anschnitt an der linken Kante. Vier Pixel, volle Höhe —
   das einzige Rot auf der Fläche ausser der Schaltfläche. */
.kh-cta-panel > .kh-container::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4px;
  background-color: var(--kh-color-primary-500);
  z-index: 0;
}

/* Das Ringmotiv. Konturen mit 5 bis 9 Prozent Deckkraft auf
   #1A1A1A: weisser Text darauf liegt bei 15:1 und darüber, die
   Lesbarkeit ist an keiner Stelle betroffen. */
.kh-cta-panel > .kh-container::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -8%;
  inline-size: clamp(300px, 38vw, 560px);
  block-size: clamp(300px, 38vw, 560px);
  translate: 0 -50%;
  border-radius: 50%;
  background:
      radial-gradient(circle closest-side at center,
        transparent 0 40%, rgba(255, 255, 255, .09) 40.6%, transparent 41.4%),
      radial-gradient(circle closest-side at center,
        transparent 0 62%, rgba(255, 255, 255, .06) 62.6%, transparent 63.4%),
      radial-gradient(circle closest-side at center,
        transparent 0 84%, rgba(255, 255, 255, .05) 84.6%, transparent 85.4%);
  pointer-events: none;
  z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {

  .kh-cta-panel > .kh-container::after {
    animation: kh-cta-drift 38s linear infinite;
  }
}

@keyframes kh-cta-drift {
  from { rotate: 0deg;   scale: 1; }
  50%  { rotate: 180deg; scale: 1.05; }
  to   { rotate: 360deg; scale: 1; }
}

/* Alles Inhaltliche liegt über dem Motiv. */
.kh-cta-panel > .kh-container > * { position: relative; z-index: 1; }


/* --- 24.1 Farbrollen im Panel ----------------------------- */

/* Die Abschnitte liegen auf hellen Flächen; ihre Textklassen sind
   entsprechend gesetzt. Im Panel kippen sie. Die Regeln stehen mit
   zwei Klassen und gewinnen damit über die Grundrollen aus
   Abschnitt 03. */

.kh-cta-panel .kh-h1,
.kh-cta-panel .kh-h2,
.kh-cta-panel .kh-h3,
.kh-cta-panel .kh-h4,
.kh-cta-panel .kh-display,
.kh-cta-panel .kh-section-header__title,
.kh-cta-panel .kh-statement__text { color: var(--kh-color-ink-inverse); }

.kh-cta-panel .kh-lead,
.kh-cta-panel .kh-text,
.kh-cta-panel .kh-prose,
.kh-cta-panel .kh-section-header__lead { color: rgba(255, 255, 255, .88); }

.kh-cta-panel .kh-text-sm,
.kh-cta-panel .kh-label { color: rgba(255, 255, 255, .72); }

.kh-cta-panel .kh-section-header__eyebrow { color: var(--kh-color-primary-on-dark); }

.kh-cta-panel .kh-statement { border-inline-start-color: var(--kh-color-primary-on-dark); }

/* Freie Absätze und Hinweiszeilen, die keine Textklasse tragen. */
.kh-cta-panel p:not([class]) { color: rgba(255, 255, 255, .88); }

.kh-cta-panel .kh-services-cta__note,
.kh-cta-panel .kh-solutions-cta__note,
.kh-cta-panel .kh-shops-cta__note,
.kh-cta-panel .kh-business-cta__note { color: rgba(255, 255, 255, .72); }

.kh-cta-panel a:not(.elementor-button) { color: var(--kh-color-ink-inverse); }


/* --- 24.2 Schaltflächen im Panel -------------------------- */

/* Primär bleibt rot: auf #1A1A1A ist #E60000 der hellste Punkt der
   Fläche, und weisser Text darauf hält seine 4,81:1.
   Sekundär war dunkle Kontur auf Hell und wäre hier unsichtbar —
   sie wird zur hellen Kontur. */
.kh-cta-panel .kh-button-wrap--secondary .elementor-button {
  border-color: rgba(255, 255, 255, .58);
  color: var(--kh-color-ink-inverse);
}

.kh-cta-panel .kh-button-wrap--secondary .elementor-button:hover {
  background-color: var(--kh-color-ink-inverse);
  border-color: var(--kh-color-ink-inverse);
  color: var(--kh-color-surface-900);
}

.kh-cta-panel .kh-button-wrap--ghost .elementor-button {
  color: var(--kh-color-primary-on-dark);
}


/* --- 24.3 Satz im Panel ----------------------------------- */

/* Zweispaltig ab 62em: Aussage links, Handlung rechts. Ein
   zentrierter Abschluss (so standen „Über uns", „Karriere" und
   „Unsere Filialen") stellt beide gleich — im Panel soll die
   Aussage führen und die Schaltfläche folgen. */
@media (min-width: 62em) {

  /* GEMESSEN UND KORRIGIERT · EXPLIZITE ZEILEN
     Der erste Entwurf stellte die Schaltflächen mit

         grid-column: 2; grid-row: 1 / -1; align-self: center;

     neben den Text. Gemessen standen sie danach oben statt mittig:
     Textspalte 1438 bis 1730, Schaltflächen bei 1443.

     Der Grund ist die Zeile -1. Sie bezeichnet die letzte Linie des
     EXPLIZITEN Rasters. Ohne grid-template-rows hat das explizite
     Raster gar keine Zeilen; 1 / -1 fällt damit auf eine einzige
     Zeile zusammen und align-self hat nichts, worin es zentrieren
     könnte.

     Jetzt bekommen Eyebrow, Titel und Lead feste Zeilennummern.
     Damit hat das explizite Raster drei Zeilen, und 1 / 4 spannt
     tatsächlich über alle drei. */
  .kh-cta-panel > .kh-container > .kh-section-header {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 72px);
    row-gap: var(--kh-space-sm);
    align-items: start;
    max-width: none;
    margin-block-end: 0;
    text-align: start;
  }

  .kh-cta-panel > .kh-container > .kh-section-header > .kh-section-header__eyebrow {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .kh-cta-panel > .kh-container > .kh-section-header > .kh-section-header__title {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .kh-cta-panel > .kh-container > .kh-section-header > .kh-section-header__lead {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }

  .kh-cta-panel > .kh-container > .kh-section-header > .kh-section-header__actions {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    justify-content: flex-start;
  }

  .kh-cta-panel .kh-section-header__title { max-width: 18ch; }
  .kh-cta-panel .kh-section-header__lead { max-width: 44ch; }
}

/* Zentrierte Abschlüsse tragen kh-section-header--center. Im Panel
   wird links ausgerichtet — sonst stünde der Text mittig und die
   Schaltflächen daneben, was auseinanderfällt. */
.kh-cta-panel .kh-section-header--center { text-align: start; align-items: flex-start; }
.kh-cta-panel .kh-section-header--center .kh-section-header__actions { justify-content: flex-start; }


/* ==========================================================
   25. STICKY HEADER UND KOPF-POPUPS
   ==========================================================

   EBENEN
       --kh-z-header   200   die Kopfleiste selbst
       Elementor-Popup 9999  Suche und mobile Navigation

   Beide Popups liegen damit über der Kopfleiste, ohne dass hier ein
   z-index gesetzt werden müsste. Der Wert 9999 stammt aus Elementors
   Dialog-Modul und wird bewusst NICHT überschrieben.

   EIGENTÜMER
   Sticky        global.css (Darstellung) + main.js StickyHeader (Zustand)
   Suche         Elementor-Popup „Global Search"
   Mobile Menü   Elementor-Popup „Mobile Navigation"
   ========================================================== */


/* --- 25.1 Kopfzeile: konstanter Fluss, kompakte Leiste ---- */

/*
 * WARUM ZWEI EBENEN
 *
 * Ein sticky Element behält seinen Platz im Dokumentfluss. Würde die
 * Kopfzeile selbst beim Scrollen niedriger, verkürzte sich dieser Platz
 * und der Inhalt darunter ruckte um die Differenz nach oben — genau der
 * Sprung, den Abschnitt 1.3 des Auftrags ausschließt.
 *
 * Deshalb hält .kh-header die Höhe des Ausgangszustands und rührt sich
 * nie. Schrumpfen darf ausschließlich .kh-header__bar, die sichtbare
 * Leiste. Der frei werdende Streifen darunter ist durchsichtig und lässt
 * Klicks durch.
 *
 * Layout Shift ist damit konstruktionsbedingt null, nicht bloß klein.
 */

:root {
  --kh-header-height-sticky:    56px;  /* mobil,      12,5 % kompakter */
  --kh-header-height-sticky-lg: 64px;  /* ab 1024px,  15,8 % kompakter */
  --kh-header-logo-sticky:      44px;  /* aus 52px */
}

@media (min-width: 1024px) {
  :root { --kh-header-height-sticky: var(--kh-header-height-sticky-lg); }
}

/*
 * WO DAS STICKY SITZT
 *
 * Gemessen, nicht angenommen: an .kh-header selbst wirkt es nicht. Ein
 * sticky Element klebt ausschließlich innerhalb seines Elternelements —
 * und das ist hier Elementors <header>-Wrapper, exakt so hoch wie die
 * Kopfzeile. Die Leiste hat dort null Spielraum und scrollt sofort mit
 * weg. Genau deshalb war die Kopfzeile bisher nicht sticky, obwohl
 * position: sticky seit jeher in Abschnitt 09 steht.
 *
 * Das Sticky gehört auf den Wrapper: dessen Elternelement ist der body,
 * und der ist die ganze Seite hoch. Dort sitzt auch der konstante Platz
 * im Dokumentfluss.
 */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: var(--kh-z-header);

  /* Der Platz im Dokument. Ändert sich nie. */
  min-height: var(--kh-header-height);

  /* Nur die Leiste selbst nimmt Klicks an. */
  pointer-events: none;
}

.elementor-location-header .e-con.kh-header {
  position: static;

  /* Aus demselben Grund wie im Footer ausdrücklich gesetzt: ohne Elementors
     Container-CSS steht --display leer und die Kopfzeile fiele auf inline
     zurück. Die Leiste darin trägt die weiße Fläche — ein Inline-Kasten
     zeichnete die nur um seine Zeilenboxen. */
  display: block;

  /* Fläche und Linie wandern auf die Leiste. */
  background-color: transparent;
  border-bottom: 0;

  /* Elementors Container-Vorgabe ist rundum 10px. Oben und unten machte
     sie die Leiste 20px höher als das Höhenmaß vorgibt; links und rechts
     hätte sie eine sichtbare Lücke erzeugt, seit die weiße Fläche auf der
     Leiste darin liegt und nicht mehr auf diesem Container — die Seite
     schiene dann neben der Kopfzeile durch. Deshalb rundum 0; der Abstand
     zum Inhalt sitzt auf .kh-header__inner. */
  padding: 0;

  pointer-events: none;
}

.elementor-location-header .e-con.kh-header__bar {
  display: block;
  pointer-events: auto;

  /* Die Leiste selbst laeuft randlos von Kante zu Kante. Der Abstand zum
     Inhalt sitzt eine Ebene tiefer auf .kh-header__inner und kommt dort
     aus --kh-container-pad. */
  padding: 0;
  inline-size: 100%;

  background-color: var(--kh-color-surface-000);
  border-bottom: 1px solid var(--kh-color-line-200);

  transition:
    box-shadow var(--kh-transition-base) var(--kh-ease-standard),
    border-color var(--kh-transition-base) var(--kh-ease-standard),
    background-color var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-header.is-sticky .kh-header__bar {
  background-color: rgba(255, 255, 255, .92);
  border-bottom-color: transparent;
  box-shadow: var(--kh-shadow-header);
}

@supports (backdrop-filter: saturate(180%) blur(12px)) {
  .kh-header.is-sticky .kh-header__bar {
    backdrop-filter: saturate(180%) blur(12px);
  }
}

.elementor-location-header .kh-header.is-sticky .e-con.kh-header__inner {
  min-height: var(--kh-header-height-sticky);
}

.elementor-location-header
.kh-header.is-sticky
.elementor-widget-image.kh-header__logo img {
  height: var(--kh-header-logo-sticky);
}

.elementor-location-header .e-con.kh-header__inner,
.elementor-location-header .elementor-widget-image.kh-header__logo img {
  transition:
    min-height var(--kh-transition-base) var(--kh-ease-standard),
    height var(--kh-transition-base) var(--kh-ease-standard);
}


/* --- 25.2 Burger ------------------------------------------ */

/*
 * Sichtbar nur unterhalb von 1280px — genau dort, wo Abschnitt 21 die
 * Hauptnavigation ausblendet. Es gibt keine Breite, in der beide
 * zugleich stehen oder beide fehlen.
 */

.elementor-location-header .kh-header__burger { display: none; }

.elementor-location-header .kh-header__burger .elementor-icon-wrapper { line-height: 0; }

.elementor-location-header .kh-header__burger a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  inline-size: var(--kh-tap-min);
  block-size: var(--kh-tap-min);

  padding: 0;
  border: 0;
  border-radius: var(--kh-radius-sm);

  background-color: transparent;
  color: var(--kh-color-ink-900);

  cursor: pointer;
  transition: var(--kh-transition-colors);
}

.elementor-location-header .kh-header__burger a:hover {
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-primary-text);
}

.elementor-location-header .kh-header__burger a:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.elementor-location-header .kh-header__burger svg {
  inline-size: var(--kh-icon-lg);
  block-size: var(--kh-icon-lg);
  fill: currentColor;
}

@media (max-width: 1279px) {

  .elementor-location-header .kh-header__burger { display: block; }

  /*
   * Lupe und Burger gehören an den rechten Rand.
   *
   * Ab 1280px besorgt das die Rasterspalte der Navigation. Darunter ist
   * die Navigation ausgeblendet und die Zeile fällt auf Flex zurück —
   * dann fehlt der Platzhalter in der Mitte und die beiden Schaltflächen
   * rücken direkt neben das Logo (gemessen bei 390px: Aktionen endeten
   * bei 261 statt 374).
   *
   * Abschnitt 09 löst das über margin-right: auto am Logo, Abschnitt 21
   * überschreibt das aber mit margin: 0. Statt diese Kette wieder
   * umzudrehen, schiebt sich die Aktionsgruppe hier selbst nach rechts —
   * das wirkt unabhängig davon, was am Logo steht.
   */
  .elementor-location-header .e-con.kh-header__actions {
    margin-inline-start: auto;
  }
}


/* --- 25.3 Popup-Gehäuse: Elementor-Optik entfernen -------- */

/*
 * Elementor bringt für jedes Popup eine eigene Fläche mit: Rahmen,
 * Innenabstand, Schatten und einen Schließen-Schalter oben rechts.
 * Nichts davon soll zu sehen sein — der Inhalt gestaltet sich selbst
 * und bringt seinen eigenen Schließen-Schalter mit.
 *
 * :has() wählt genau die beiden Popups aus, ohne ihre IDs zu kennen.
 * Ein drittes Popup bliebe davon unberührt.
 */

.dialog-widget:has(.kh-pop) .dialog-widget-content {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  max-width: none;
}

.dialog-widget:has(.kh-pop) .dialog-message {
  padding: 0;
  max-height: none;
  overflow: visible;
}

/* Der einzige Schließen-Schalter ist der eigene im Inhalt. */
.dialog-widget:has(.kh-pop) .dialog-close-button { display: none; }

/* Gemeinsame Grundfläche beider Popups. */
.kh-pop {
  position: relative;
  display: flex;
  flex-direction: column;

  inline-size: 100%;
  background-color: var(--kh-color-surface-000);
  color: var(--kh-color-ink-900);
  font-family: var(--kh-font-sans);

  /* Randlose Geräte: die Leiste unten bleibt frei. */
  padding-block-end: env(safe-area-inset-bottom, 0px);
}

.kh-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-space-md);

  flex: none;
  min-block-size: var(--kh-header-height);
  padding-inline: var(--kh-container-pad);
  padding-block: var(--kh-space-sm);
}

.kh-pop__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;

  inline-size: var(--kh-tap-min);
  block-size: var(--kh-tap-min);

  border-radius: var(--kh-radius-sm);
  color: var(--kh-color-ink-700);
  text-decoration: none;

  transition: var(--kh-transition-colors);
}

.kh-pop__close:hover {
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-primary-text);
}

.kh-pop__close:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.kh-pop__close svg {
  inline-size: var(--kh-icon-lg);
  block-size: var(--kh-icon-lg);
}


/* --- 25.4 Suche: Fläche, Marke, Eingabe ------------------- */

/* ZWEI ZUSTAENDE: VOLLBILD AUF DEM TELEFON, MODAL AB TABLET
   -------------------------------------------------------------
   VORGEFUNDEN AM 20.09.2026
   Die Suche war auf JEDER Breite eine randlose Flaeche: das
   Elementor-Gehaeuse stand auf inline-size: 100vw, die Flaeche auf
   min-block-size: 82vh ab 768px — gemessen bei 1440x900 ein Kasten
   von 1440x738 an der oberen linken Ecke, ohne Radius. Auf dem
   Telefon ist das richtig, auf dem Desktop ist es kein Dialog,
   sondern eine zweite Seite ueber der Seite.

   Die Lage kommt aus den Popup-Einstellungen der Vorlage
   (horizontal center, vertical top, Breite 100vw). Geaendert wird
   sie hier und nicht dort: die Vorlage soll ihre
   Animationseinstellungen unangetastet behalten, und dieselbe
   Arbeitsteilung gilt bereits fuer das Mobilmenue in 25.5.

   HIER STEHT KEINE BEWEGUNG
   Kein keyframes, kein transform, kein opacity-Uebergang fuer das
   Oeffnen und Schliessen. Ein- und Ausfahren bleiben vollstaendig
   bei Elementor (derzeit fadeIn/fadeOut, 0.3s) und werden dort
   eingestellt. Uebrig bleiben nur die ueblichen Zustaende von
   Schaltflaechen und Treffern. */

/* --- Telefon: Vollbild ------------------------------------- */

.dialog-widget:has(.kh-pop--search) .dialog-widget-content {
  inline-size: 100vw;
  max-inline-size: none;
}

.kh-pop--search {
  block-size: 100dvh;
  overflow: hidden;   /* die Markenflächen ragen bewusst über die Kante */
  isolation: isolate;
  border-radius: 0;
}

/* Randlose Geraete: der Kopf rutscht unter die Statusleiste, wenn
   er nur das uebliche Polster traegt. Unten sorgt .kh-pop bereits
   fuer den Abstand zur Systemleiste. */
.kh-pop--search .kh-pop__head {
  padding-block-start: calc(var(--kh-space-sm) + env(safe-area-inset-top, 0px));
}

/* --- NUR DER TREFFERBEREICH SCROLLT ------------------------
   Kopf und Eingabe stehen, darunter laeuft der Inhalt. Die
   Flaeche steht auf overflow: hidden (die Ringe sollen an der
   Kante abgeschnitten werden) — ohne eine eigene Scrollflaeche
   waeren lange Trefferlisten deshalb schlicht abgeschnitten.

   Startzustand, Treffer und Leermeldung sind Geschwister und
   immer nur zu einem sichtbar; verborgene tragen hidden und sind
   keine Flex-Elemente. Deshalb bekommen alle drei dieselbe Rolle,
   und die jeweils sichtbare wird zur Scrollflaeche. */
.kh-pop--search .kh-pop__body {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  flex: 1 1 auto;
}

.kh-pop--search .kh-pop__headline,
.kh-pop--search .kh-pop__field { flex: none; }

.kh-pop--search .kh-pop__intro,
.kh-pop--search .kh-pop__results,
.kh-pop--search .kh-pop__empty {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--kh-color-line-300) transparent;
}

/* --- Ab 768px: zentriertes Modal ---------------------------- */

@media (min-width: 768px) {

  /* DIE SENKRECHTE LAGE STEHT NICHT HIER
     Elementor schreibt sie als #elementor-popup-modal-375 in eine
     eigene Datei — ein ID-Selektor (1,0,0), gegen den eine
     Klassenregel nicht ankommt; gemessen blieb das Modal trotz
     align-items: center oben an der Kante. Statt das mit
     !important zu erzwingen, steht vertical_position jetzt auf
     center, wo es hingehoert: in den Popup-Einstellungen der
     Vorlage. Die Animationseinstellungen dort sind unberuehrt.

     Die Regel hier bleibt als Rueckfalllinie stehen, falls die
     Vorlage einmal ohne diese Einstellung ankommt. */
  .dialog-widget:has(.kh-pop--search) { align-items: center; }

  .dialog-widget:has(.kh-pop--search) .dialog-widget-content {
    inline-size: min(92vw, 880px);
    max-block-size: min(82vh, 760px);
  }

  .kh-pop--search {
    block-size: auto;
    max-block-size: min(82vh, 760px);
    border: 1px solid var(--kh-color-line-200);
    border-radius: var(--kh-radius-xl);
    box-shadow: var(--kh-shadow-lg);
  }

  /* Auf dem Telefon traegt der Kopf den Sicherheitsabstand des
     Geraets. Im Modal gibt es keinen. */
  .kh-pop--search .kh-pop__head { padding-block-start: var(--kh-space-sm); }

  /* Die Innenabstaende waren fuer eine randlose Flaeche gedacht
     (48/32/64). Im Modal ist das zu viel Luft fuer zu wenig
     Flaeche. */
  .kh-pop--search .kh-pop__body { padding: var(--kh-space-lg) var(--kh-space-xl) var(--kh-space-xl); }

  /* MASSSTAB · DIE EINGABE WAR FUER EINE GANZE SEITE GESETZT
     Gemessen: Ueberschrift 48px, Eingabe 28px in einem 70px hohen
     Feld. Auf einer randlosen Flaeche stimmt das; in einem 880px
     breiten Modal ist es eine Plakatschrift. Die Vorgabe nennt
     52–60px Feldhoehe und 17–19px Schrift.

     Das Telefon behaelt seinen Massstab: dort ist die Suche
     weiterhin eine eigene Ansicht. */
  .kh-pop--search .kh-pop__headline {
    font-size: clamp(1.625rem, 1.1rem + 1.2vw, 2rem);
  }

  /* Das Feld kam auf 70px: 12px Polster oben und unten plus die
     Zeile darin. Mit 8px liegt es bei rund 56px und damit im
     Bereich der Vorgabe. */
  .kh-pop--search .kh-pop__field {
    min-block-size: 56px;
    padding-block: var(--kh-space-2xs);
  }

  .kh-pop--search .kh-pop__input {
    font-size: 1.125rem;
    line-height: 1.4;
  }
}

/* Markenflächen. Rein dekorativ, ohne Bewegung. */

.kh-pop__rings,
.kh-pop__signet {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Ringgeometrie wie in Abschnitt 23: konzentrische Hairlines. */
.kh-pop__rings {
  inset-inline-start: -14%;
  inset-block-start: -28%;

  inline-size: clamp(420px, 58vw, 760px);
  aspect-ratio: 1 / 1;

  border-radius: var(--kh-radius-circle);
  background:
    radial-gradient(circle,
      transparent 0 34%,
      rgba(230, 0, 0, .05) 34% 34.35%,
      transparent 34.35% 52%,
      rgba(230, 0, 0, .04) 52% 52.3%,
      transparent 52.3% 72%,
      rgba(230, 0, 0, .03) 72% 72.25%,
      transparent 72.25%);
}

/* Vodafone-Signet, transparent — gleiche Quelle wie .kh-brand-mark. */
.kh-pop__signet {
  inset-inline-end: -5%;
  inset-block-end: -8%;

  inline-size: clamp(200px, 26vw, 400px);
  aspect-ratio: 1 / 1;

  background-image: url("../../../../uploads/2026/09/favicon.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .05;
}

@media (max-width: 47.99em) {
  .kh-pop__signet { inline-size: 180px; opacity: .04; }
  .kh-pop__rings { inline-size: 380px; inset-block-start: -18%; }
}

.kh-pop--search .kh-pop__head {
  position: relative;
  z-index: 1;
  align-items: flex-start;
}

.kh-pop__eyebrow {
  margin: 0;
  padding-block-start: var(--kh-space-xs);

  color: var(--kh-color-primary-text);
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kh-pop__body {
  position: relative;
  z-index: 1;

  inline-size: 100%;
  max-inline-size: 860px;
  margin-inline: auto;

  padding-inline: var(--kh-container-pad);
  padding-block: var(--kh-space-lg) var(--kh-space-3xl);
}

@media (min-width: 768px) {
  .kh-pop__body { padding-block: var(--kh-space-2xl) var(--kh-space-3xl); }
}

.kh-pop__headline {
  margin: 0 0 var(--kh-space-lg);
  color: var(--kh-color-ink-900);
  font-size: var(--kh-text-h1);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.12;
  letter-spacing: -.01em;
}

/* Eingabefeld */

.kh-pop__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--kh-space-sm);

  padding-block: var(--kh-space-sm);
  border-block-end: 2px solid var(--kh-color-line-300);

  transition: border-color var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-pop__field:focus-within { border-block-end-color: var(--kh-color-primary-500); }

.kh-pop__field-icon {
  flex: none;
  inline-size: var(--kh-icon-lg);
  block-size: var(--kh-icon-lg);
  color: var(--kh-color-ink-500);
}

.kh-pop__field:focus-within .kh-pop__field-icon { color: var(--kh-color-primary-text); }

.kh-pop__input {
  flex: 1 1 auto;
  min-inline-size: 0;

  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;

  color: var(--kh-color-ink-900);
  font-family: var(--kh-font-sans);
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.75rem);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.3;
}

.kh-pop__input::placeholder {
  color: var(--kh-color-ink-400);
  font-weight: var(--kh-font-weight-regular);
}

/* Der Fokus sitzt auf der Linie des Feldes, nicht auf einem zweiten Ring. */
.kh-pop__input:focus,
.kh-pop__input:focus-visible { outline: none; }

.kh-pop__input::-webkit-search-decoration,
.kh-pop__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.kh-pop__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;

  inline-size: var(--kh-tap-min);
  block-size: var(--kh-tap-min);

  padding: 0;
  border: 0;
  border-radius: var(--kh-radius-circle);
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-ink-700);
  cursor: pointer;

  transition: var(--kh-transition-colors);
}

.kh-pop__clear:hover {
  background-color: var(--kh-color-surface-200);
  color: var(--kh-color-primary-text);
}

.kh-pop__clear:focus-visible { outline: none; box-shadow: var(--kh-shadow-focus); }
.kh-pop__clear svg { inline-size: var(--kh-icon-md); block-size: var(--kh-icon-md); }

/* Während des Abrufs wandert die Linie sanft. Kein Spinner, kein Text. */
.kh-pop--search.is-loading .kh-pop__field { border-block-end-color: var(--kh-color-primary-100); }


/* --- 25.4b Suche: Startzustand, Leermeldung, Treffer ------ */

.kh-pop__intro,
.kh-pop__empty { padding-block-start: var(--kh-space-xl); }

.kh-pop__hint,
.kh-pop__empty-text {
  margin: 0 0 var(--kh-space-lg);
  color: var(--kh-color-ink-500);
  font-size: var(--kh-text-lead);
  line-height: 1.5;
}

.kh-pop__empty-text { color: var(--kh-color-ink-700); }
.kh-pop__empty-text span { font-weight: var(--kh-font-weight-semibold); }

.kh-pop__quicks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-space-xs);
}

.kh-pop__quick {
  display: inline-flex;
  align-items: center;

  min-block-size: var(--kh-tap-min);
  padding-inline: var(--kh-space-md);

  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-pill);

  background-color: var(--kh-color-surface-000);
  color: var(--kh-color-ink-900);

  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  text-decoration: none;

  transition: var(--kh-transition-colors);
}

.kh-pop__quick:hover {
  background-color: var(--kh-color-surface-100);
  border-color: var(--kh-color-line-300);
  color: var(--kh-color-primary-text);
}

.kh-pop__quick:focus-visible { outline: none; box-shadow: var(--kh-shadow-focus); }

/* Treffer */

.kh-pop__results { padding-block-start: var(--kh-space-lg); }

.kh-pop__group + .kh-pop__group { margin-block-start: var(--kh-space-xl); }

.kh-pop__group-title {
  margin: 0 0 var(--kh-space-xs);
  color: var(--kh-color-ink-500);
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

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

.kh-pop__hit { margin: 0; border-block-start: 1px solid var(--kh-color-line-100); }

.kh-pop__hit-link {
  display: flex;
  align-items: center;
  gap: var(--kh-space-md);

  min-block-size: 64px;
  padding-block: var(--kh-space-sm);
  padding-inline: var(--kh-space-xs);

  color: var(--kh-color-ink-900);
  text-decoration: none;

  transition: var(--kh-transition-colors);
}

.kh-pop__hit-link:hover {
  background-color: var(--kh-color-surface-050);
  color: var(--kh-color-primary-text);
}

.kh-pop__hit-link:focus-visible { outline: none; box-shadow: var(--kh-shadow-focus); }

.kh-pop__hit-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.kh-pop__hit-meta {
  color: var(--kh-color-ink-500);
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Der Öffnungsstatus trägt die Farbe seiner Aussage — dieselben
   Zustandsfarben wie auf den Standortseiten. */
.kh-pop__hit-meta[data-tone="success"] { color: var(--kh-color-success); }
.kh-pop__hit-meta[data-tone="warning"] { color: var(--kh-color-warning); }
.kh-pop__hit-meta[data-tone="danger"] { color: var(--kh-color-danger); }

.kh-pop__hit-title {
  color: inherit;
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.25;
}

.kh-pop__hit-sub {
  color: var(--kh-color-ink-500);
  font-size: var(--kh-text-sm);
  line-height: 1.4;

  /* Zwei Zeilen genügen; der Rest wird abgeschnitten. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kh-pop__hit-arrow {
  flex: none;
  inline-size: var(--kh-icon-md);
  block-size: var(--kh-icon-md);
  color: var(--kh-color-ink-400);
  transition: transform var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-pop__hit-link:hover .kh-pop__hit-arrow {
  color: var(--kh-color-primary-500);
  transform: translateX(3px);
}


/* --- 25.5 Mobile Navigation ------------------------------- */

/*
 * Echtes Off-Canvas-Panel: es sitzt rechts, füllt die volle Höhe und ist
 * nie ein zentriertes Fenster. Breite und Einfahren stehen in den
 * Popup-Einstellungen der Vorlage; hier steht nur die Fläche.
 *
 * Die Menüpunkte selbst tragen weiterhin die Darstellung aus Abschnitt
 * 13 — dieselben Klassen, dieselben Flächen, dieselben Tap-Ziele.
 * Hier steht nur, was das Panel drumherum ausmacht.
 */

.dialog-widget:has(.kh-pop--nav) .dialog-widget-content {
  inline-size: min(90vw, 460px);
  max-inline-size: none;
  block-size: 100dvh;
}

.kh-pop--nav {
  block-size: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;   /* der Hintergrund scrollt nicht mit */
  -webkit-overflow-scrolling: touch;
}

.kh-pop--nav .kh-pop__head {
  position: sticky;
  top: 0;
  z-index: 2;

  background-color: var(--kh-color-surface-000);
  border-block-end: 1px solid var(--kh-color-line-200);
}

.kh-pop__brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  line-height: 1.15;
}

.kh-pop__brand-mark {
  color: var(--kh-color-primary-500);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: -.01em;
}

.kh-pop__brand-name {
  color: var(--kh-color-ink-500);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
}

/* Suchzeile */

.kh-pop__searchrow {
  display: flex;
  align-items: center;
  gap: var(--kh-space-sm);

  inline-size: 100%;
  min-block-size: 56px;

  margin: 0;
  padding-inline: var(--kh-container-pad);

  border: 0;
  border-block-end: 1px solid var(--kh-color-line-200);

  background-color: var(--kh-color-surface-050);
  color: var(--kh-color-ink-700);

  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  text-align: start;

  cursor: pointer;
  transition: var(--kh-transition-colors);
}

.kh-pop__searchrow:hover {
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-primary-text);
}

.kh-pop__searchrow:focus-visible { outline: none; box-shadow: var(--kh-shadow-focus); }

.kh-pop__searchrow svg {
  flex: none;
  inline-size: var(--kh-icon-md);
  block-size: var(--kh-icon-md);
}

.kh-pop__nav { flex: 1 1 auto; }

/* Handlungen und Rechtliches */

.kh-pop__actions {
  display: flex;
  flex-direction: column;
  gap: var(--kh-space-xs);

  padding-inline: var(--kh-container-pad);
  padding-block: var(--kh-space-lg) var(--kh-space-sm);
}

.kh-pop__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-block-size: var(--kh-tap-min);
  padding-inline: var(--kh-space-lg);

  border: 1px solid var(--kh-color-primary-500);
  border-radius: var(--kh-radius-sm);

  background-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);

  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  text-align: center;
  text-decoration: none;

  transition: var(--kh-transition-colors);
}

.kh-pop__cta:hover {
  background-color: var(--kh-color-primary-600);
  border-color: var(--kh-color-primary-600);
  color: var(--kh-color-primary-contrast);
}

.kh-pop__cta:focus-visible { outline: none; box-shadow: var(--kh-shadow-focus); }

.kh-pop__cta--ghost {
  background-color: transparent;
  border-color: var(--kh-color-line-300);
  color: var(--kh-color-ink-900);
}

.kh-pop__cta--ghost:hover {
  background-color: var(--kh-color-surface-100);
  border-color: var(--kh-color-line-strong);
  color: var(--kh-color-primary-text);
}

.kh-pop__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-space-2xs) var(--kh-space-xs);

  margin: 0;
  padding-inline: var(--kh-container-pad);
  padding-block: var(--kh-space-sm) var(--kh-space-lg);

  font-size: var(--kh-text-xs);
}

.kh-pop__legal a {
  color: var(--kh-color-ink-500);
  text-decoration: none;
}

.kh-pop__legal a:hover {
  color: var(--kh-color-primary-text);
  text-decoration: underline;
}

.kh-pop__legal a:focus-visible { outline: none; box-shadow: var(--kh-shadow-focus); }
.kh-pop__legal span { color: var(--kh-color-line-300); }


/* --- 25.5.1 Off-Canvas als native Elementor-Struktur ------- */

/*
 * Die Vorlage „Mobile Navigation" (Popup 377) bestand aus einem
 * einzigen Shortcode-Widget. Sie besteht jetzt aus echten
 * Elementor-Containern und -Widgets; einzig die Menueliste kommt
 * weiterhin aus [kh_mobile_nav], weil sie das gepflegte
 * WordPress-Menue „main" abbildet und die Umschalter fuer
 * MobileNav aus main.js mitbringt.
 *
 * DAS PROBLEM DIESER UMSTELLUNG
 * Handgeschriebenes Markup war
 *
 *     <a class="kh-pop__close">…</a>
 *
 * Elementor schreibt dagegen
 *
 *     <div class="… kh-pop__close …"><a class="elementor-button">…</a></div>
 *
 * Die Klasse landet an der Huelle, bedienbar ist aber das Element
 * darin. Wuerde man die vorhandenen Regeln umschreiben, verloere
 * das Suchpopup 375 seine Gestaltung — es benutzt weiterhin das
 * handgeschriebene Markup.
 *
 * Deshalb hier ein reiner Zusatz, in zwei Schritten:
 *   1. Die Huelle nimmt display: contents und verschwindet aus dem
 *      Layout. Der Knopf selbst wird zum Flex-Kind seiner Zeile —
 *      genau die Rolle, die vorher das <a> hatte.
 *   2. Elementors eigenes Knopf-Aussehen wird abgeraeumt, und die
 *      vorhandenen kh-pop-Regeln werden auf das innere Element
 *      gespiegelt.
 *
 * Nichts davon beruehrt Popup 375 oder die Desktop-Navigation.
 */

/* GEMESSEN AUF 320x568 · DAS PANEL BRACH IN ZWEI SPALTEN
   -------------------------------------------------------------
   Das Panel ist eine Flex-Spalte mit fester Hoehe (100dvh). Als
   handgeschriebenes div hatte es keinen Umbruch. Elementor-
   Container erlauben ihn: passt der Inhalt nicht in die Hoehe,
   wandern die letzten Kinder in eine ZWEITE Spalte daneben.

   Gemessen bei 320x568: .kh-pop__actions und .kh-pop__legal
   standen bei x=320 statt x=32 — also genau eine Panelbreite zu
   weit rechts, unerreichbar hinter dem rechten Rand. Auf hoeheren
   Geraeten fiel es nicht auf, weil der Inhalt dort hineinpasst.

   Kein Umbruch: was nicht hineinpasst, wird gescrollt — dafuer
   steht overflow-y weiter oben. */
.kh-pop--nav { flex-wrap: nowrap; }

.kh-pop--nav .kh-pop__close,
.kh-pop--nav .kh-pop__searchrow,
.kh-pop--nav .kh-pop__cta,
.kh-pop--nav .kh-pop__legal-link { display: contents; }

/* Elementors Knopf-Grundlage abraeumen. Die Kette mit
   .elementor-widget-button schlaegt .elementor-button.elementor-size-sm,
   das Polster und Schriftgroesse setzt. */
.kh-pop--nav .elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kh-space-sm);

  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;

  color: inherit;
  font-family: var(--kh-font-sans);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  text-decoration: none;
  fill: currentColor;
}

.kh-pop--nav .elementor-widget-button .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-sm);
}

.kh-pop--nav .elementor-widget-button .elementor-button-icon { display: inline-flex; }

.kh-pop--nav .elementor-widget-button .elementor-button-icon svg {
  inline-size: var(--kh-icon-md);
  block-size: var(--kh-icon-md);
}

/* Schliessen — spiegelt .kh-pop__close aus Abschnitt 25.1. */
.kh-pop--nav .kh-pop__close .elementor-button {
  flex: none;
  inline-size: var(--kh-tap-min);
  block-size: var(--kh-tap-min);
  border-radius: var(--kh-radius-sm);
  color: var(--kh-color-ink-700);
  transition: var(--kh-transition-colors);
}

.kh-pop--nav .kh-pop__close .elementor-button:hover {
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-primary-text);
}

.kh-pop--nav .kh-pop__close .elementor-button:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* Der Knopf traegt keinen Text, nur das Zeichen. Die Beschriftung
   fuer Vorlesewerkzeuge kommt aus aria-label am Verweis selbst
   (Elementor: benutzerdefinierte Attribute). */
.kh-pop--nav .kh-pop__close .elementor-button-text { display: none; }

/* Suchzeile — spiegelt .kh-pop__searchrow aus Abschnitt 25.5. */
.kh-pop--nav .kh-pop__searchrow .elementor-button {
  justify-content: flex-start;
  inline-size: 100%;
  min-block-size: 56px;
  padding-inline: var(--kh-container-pad);
  border-block-end: 1px solid var(--kh-color-line-200);
  background-color: var(--kh-color-surface-050);
  color: var(--kh-color-ink-700);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  text-align: start;
  cursor: pointer;
  transition: var(--kh-transition-colors);
}

.kh-pop--nav .kh-pop__searchrow .elementor-button:hover {
  background-color: var(--kh-color-surface-100);
  color: var(--kh-color-primary-text);
}

.kh-pop--nav .kh-pop__searchrow .elementor-button:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* Handlungen — spiegelt .kh-pop__cta und --ghost. */
.kh-pop--nav .kh-pop__cta .elementor-button {
  inline-size: 100%;
  min-block-size: var(--kh-tap-min);
  padding-inline: var(--kh-space-lg);
  border: 1px solid var(--kh-color-primary-500);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-primary-500);
  color: var(--kh-color-primary-contrast);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  transition: var(--kh-transition-colors);
}

.kh-pop--nav .kh-pop__cta .elementor-button:hover {
  background-color: var(--kh-color-primary-600);
  border-color: var(--kh-color-primary-600);
  color: var(--kh-color-primary-contrast);
}

.kh-pop--nav .kh-pop__cta .elementor-button:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

.kh-pop--nav .kh-pop__cta--ghost .elementor-button {
  background-color: transparent;
  border-color: var(--kh-color-line-300);
  color: var(--kh-color-ink-900);
}

.kh-pop--nav .kh-pop__cta--ghost .elementor-button:hover {
  background-color: var(--kh-color-surface-100);
  border-color: var(--kh-color-line-strong);
  color: var(--kh-color-primary-text);
}

/* Die beiden Handlungen sitzen untereinander mit dem Abstand aus
   .kh-pop__actions. Weil die Huellen display: contents tragen,
   greift dessen gap direkt auf die Knoepfe. */

/* Rechtliches — spiegelt .kh-pop__legal a. Statt eines Absatzes
   mit Trennzeichen sind es jetzt drei eigene Widgets; der Abstand
   kommt aus dem gap von .kh-pop__legal. */
.kh-pop--nav .kh-pop__legal-link .elementor-button {
  min-block-size: var(--kh-tap-min);
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-regular);
  color: var(--kh-color-ink-500);
}

.kh-pop--nav .kh-pop__legal-link .elementor-button:hover {
  color: var(--kh-color-primary-text);
  text-decoration: underline;
}

.kh-pop--nav .kh-pop__legal-link .elementor-button:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: var(--kh-shadow-focus);
}

/* Der Wortlaut der Marke steht jetzt in zwei Ueberschriften-Widgets.
   ELEMENTOR-FALLE: auf p.elementor-heading-title greift Abschnitt
   19 mit (0,2,1); eine Regel an der Huelle allein bliebe ohne
   Wirkung auf Groesse und Gewicht. Deshalb hier das p in der Kette. */
.kh-pop--nav .kh-pop__brand-mark p.elementor-heading-title {
  color: var(--kh-color-primary-500);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.15;
  letter-spacing: -.01em;
}

.kh-pop--nav .kh-pop__brand-name p.elementor-heading-title {
  color: var(--kh-color-ink-500);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.15;
}

/* Die Navigation soll den freien Platz einnehmen, damit Handlungen
   und Rechtliches unten stehen. Als Elementor-Container braucht sie
   den Wert ausdruecklich. */
.kh-pop--nav .kh-pop__nav { flex: 1 1 auto; }


/* --- 25.6 Reduzierte Bewegung ----------------------------- */

@media (prefers-reduced-motion: reduce) {

  .elementor-location-header .e-con.kh-header__inner,
  .elementor-location-header .elementor-widget-image.kh-header__logo img,
  .elementor-location-header .e-con.kh-header__bar,
  .kh-pop__hit-arrow {
    transition-duration: 1ms;
  }

  /* Elementors Ein- und Ausblendung der Popups ebenfalls. */
  .dialog-widget:has(.kh-pop) .dialog-widget-content {
    animation-duration: 1ms !important;
  }
}


/* --- 25.7 Korrekturen aus der Abnahme --------------------- */

/*
 * Burger und Lupe tragen dieselbe Farbe.
 *
 * Elementor färbt Icon-Widgets über die Kit-Farbe des Widgets. Für die
 * Lupe hebt Abschnitt 21 das bereits auf; der Burger braucht dieselbe
 * Selektorentiefe, sonst gewinnt die Kit-Farbe und die beiden
 * Schaltflächen nebeneinander hätten unterschiedliche Farben (gemessen:
 * Lupe #1A1A1A, Burger #E60000).
 */
.elementor-location-header
.elementor-widget-icon.kh-header__burger
.elementor-icon {
  color: var(--kh-color-ink-900);
}

.elementor-location-header
.elementor-widget-icon.kh-header__burger
.elementor-icon:hover {
  color: var(--kh-color-primary-text);
}

.elementor-location-header
.elementor-widget-icon.kh-header__burger
.elementor-icon svg {
  fill: currentColor;
}

/*
 * Kopfzeile der Suche steht auf derselben Spalte wie der Inhalt.
 *
 * Ohne das säße die Vorzeile ganz links und der Schließen-Schalter ganz
 * rechts am Fensterrand, während Überschrift, Feld und Treffer in einer
 * 860px breiten Spalte stehen — zwei Raster in einer Fläche.
 */
.kh-pop--search .kh-pop__head {
  inline-size: 100%;
  max-inline-size: 860px;
  margin-inline: auto;
}

/*
 * Kleinste Geräte: das Logo gibt nach.
 *
 * Gemessen bei 320px: Logo (173px bei 52px Höhe) + Lupe (44) + Burger
 * (44) + zwei Abstände (32) + Seitenrand (32) ergeben 325px. Die Zeile
 * brach deshalb um und die Leiste war 125px statt 64px hoch. Mit 40px
 * Logohöhe bleiben rund 285px — die Leiste bleibt einzeilig.
 */
@media (max-width: 479px) {

  .elementor-location-header
  .elementor-widget-image.kh-header__logo img {
    height: 40px;
  }

  .elementor-location-header
  .kh-header.is-sticky
  .elementor-widget-image.kh-header__logo img {
    height: 34px;
  }
}


/* ==========================================================
   COMPLIANZ – Vodafone / Kahraman
   ==========================================================
   Gilt fuer Complianz 7.5.5, Banner "banner-1", Variante optin,
   Position bottom-right, Typ cmplz-categories-type-save-preferences.

   LIVE AUDITIERT AM 18.09.2026, nicht aus der Dokumentation
   abgeleitet. Vorgefundener Aufbau:

     .cmplz-cookiebanner.banner-1.optin.cmplz-bottom-right   526x414
     |- .cmplz-header      -> .cmplz-logo (leer) .cmplz-title .cmplz-close
     |- .cmplz-divider.cmplz-divider-header
     |- .cmplz-body        -> .cmplz-message .cmplz-categories
     |     .cmplz-category.cmplz-functional    sichtbar
     |     .cmplz-category.cmplz-preferences   VERBORGEN
     |     .cmplz-category.cmplz-statistics    sichtbar
     |     .cmplz-category.cmplz-marketing     sichtbar
     |- .cmplz-links.cmplz-information         VERBORGEN
     |- .cmplz-divider.cmplz-footer
     |- .cmplz-buttons
     |     button.cmplz-accept            sichtbar 140x45
     |     button.cmplz-deny              sichtbar 140x45
     |     button.cmplz-view-preferences  VERBORGEN
     |     button.cmplz-save-preferences  sichtbar 186x45
     |     a.cmplz-manage-options.tcf     VERBORGEN
     |- .cmplz-documents.cmplz-links      -> Datenschutz, Impressum

   Ausserhalb des Banners: button.cmplz-manage-consent mit der Klasse
   cmplz-dismissed, VERBORGEN.

   DIE WICHTIGSTE REGEL DIESES BLOCKS
   Hier steht an keiner Stelle display, visibility, opacity oder
   content auf einem Complianz-Bedienelement. Wer ein Element
   ausgibt und wer es zeigt, entscheidet Complianz — hier wird
   ausschliesslich das Aussehen gesetzt: Farbe, Rahmen, Radius,
   Mass, Schrift, Abstand, Fokus.

   Der Schalter einer Kategorie ist NICHT .cmplz-category-toggle
   (das ist die Klapp-Schaltflaeche fuer die Beschreibung, mit
   aria-expanded), sondern input.cmplz-consent-checkbox plus
   label.cmplz-label. Das Eingabefeld liegt absolut mit opacity 0,
   gezeichnet wird die Spur in .cmplz-label::before und der Knopf
   in ::after. Beide werden hier nur umgefaerbt und vergroessert —
   ohne content, damit nichts entsteht, was Complianz nicht selbst
   vorgesehen hat.

   Gefunden und beabsichtigt NICHT angetastet: die Kategorie
   "Einstellungen" (preferences) ist verborgen, ebenso
   "Einstellungen ansehen", die TCF-Verweise und die schwebende
   Schaltflaeche "Einwilligung verwalten". Keine Regel hier macht
   eines davon sichtbar.

   Spezifitaet: Complianz liefert sein Banner-CSS mit hoher
   Gewichtung aus. Wo eine Klasse allein nicht reicht, steht
   .cmplz-cookiebanner davor. !important steht nur an den drei
   Stellen, an denen Complianz seine Farben inline bzw. mit
   eigenem !important setzt — nachgemessen, nicht vorsorglich.
   ========================================================== */

/* --- Panel ------------------------------------------------- */

/* ZENTRIERTES DIALOGPANEL
   -------------------------------------------------------------
   Complianz setzt die Lage ueber inset und die Klasse
   cmplz-bottom-right — gemessen inset: 318.5px 10px 10px 904px,
   also unten rechts, 526px breit und 572px hoch.

   inset: 0 plus margin: auto zentriert ein fixiertes Element in
   beiden Achsen, sobald Breite und Hoehe begrenzt sind. Die Hoehe
   bleibt inhaltsabhaengig (fit-content) mit einer Obergrenze —
   das Panel ist damit nie hoeher als noetig und nie hoeher als
   das Fenster.

   Die Position wird geaendert, display/visibility/opacity nicht.

   Das Polster wandert vom Panel in die Abschnitte: dadurch laufen
   die Trennlinien ueber die volle Breite, statt 20px vor dem Rand
   zu enden. */
body .cmplz-cookiebanner {
  inset: 0;
  margin: auto;

  /* KOMPOSITION STATT EINZELWERTE
     Die Vorgaengerfassung war 760px breit und geschlossen 679px
     hoch. Das ist kein Dialog mehr, das ist eine Seite in einem
     Rahmen. 680px Breite und eine Obergrenze fuer die Hoehe
     zwingen die Komposition in ein Format, das als Fenster
     gelesen wird — und machen aus der Hoehe eine gesetzte
     Groesse statt einer Summe von Innenabstaenden. */
  inline-size: min(680px, calc(100vw - 32px));
  max-inline-size: none;
  block-size: fit-content;

  /* DIE HOEHE IST EIN DECKEL, KEINE SUMME
     -------------------------------------------------------------
     Die Vorgabe nennt 500–560 geschlossen und 610–670 mit einer
     geoeffneten Kategorie. Beides ergibt sich auf dem Desktop aus
     den Abschnitten selbst — gemessen 537 geschlossen und 638.4
     mit einer offenen Kategorie, ohne dass der Deckel eingreift.

     Der Deckel greift dort, wo Complianz die Knoepfe untereinander
     stellt (bis 768px) oder wo mehrere Kategorien offen stehen.
     Dann endet das Panel bei 670px — der oberen Grenze der
     Vorgabe — und die letzten Zeilen kommen ueber den
     Inhaltsbereich nachgescrollt. Die Beschreibungstexte gehoeren
     Complianz und werden nicht gekuerzt; gekuerzt wird der Rahmen,
     nicht der Inhalt.

     Auf schmalen Geraeten gilt stattdessen calc(100vh - 16px) aus
     der Regel weiter unten: dort ist der Bildschirm das Mass. */
  max-block-size: min(670px, calc(100vh - 40px));
  padding: 0;
  border: 1px solid var(--kh-color-line-200);
  border-radius: 16px;
  background-color: var(--kh-color-surface-000);

  /* Ein Schatten, der traegt, ohne sich zu zeigen: eine feine
     Kontaktkante plus ein weiter, sehr weicher Abwurf. */
  box-shadow:
      0 1px 2px rgba(0, 0, 0, .04),
      0 18px 44px -14px rgba(0, 0, 0, .20);
  font-family: var(--kh-font-body, inherit);
  color: var(--kh-color-ink-900);

  /* KOPF UND AKTIONEN STEHEN, NUR DER INHALT SCROLLT
     -------------------------------------------------------------
     Complianz legt das Panel als Raster mit sechs Zeilen aus:
     Kopf, Haarlinie, Inhalt, Haarlinie, Knoepfe, Rechtsverweise
     (gemessen grid-template-rows mit sechs Werten; die verborgenen
     Bereiche sind keine Rasterelemente). Nur die dritte Zeile darf
     nachgeben — minmax(0, 1fr) gibt ihr den freien Platz und
     erlaubt ihr, unter ihre Inhaltshoehe zu fallen. Erst das macht
     overflow-y im Inhalt wirksam.

     overflow-y bleibt zusaetzlich am Panel: sollte Complianz in
     einer anderen Konfiguration eine Zeile mehr ausgeben, scrollt
     im schlechtesten Fall das ganze Panel — nichts wird
     abgeschnitten. */
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  overflow-y: auto;

  /* DIE 50px, DIE NIEMAND GESETZT HAT
     -------------------------------------------------------------
     Gemessen: das Panel war 608px hoch, die sechs Zeilen ergaben
     zusammen aber nur 556. Die Differenz war der Zeilenabstand des
     Rasters — Complianz setzt gap: 10px auf dem Panel, fuenf
     Zwischenraeume, 50px.

     Das ist der Grund, warum sich die Hoehe ueber einzelne
     Polsterwerte nicht einfangen liess: der groesste Einzelposten
     stand in keinem Polster. Die Abschnitte trennen sich ueber die
     Haarlinien, nicht ueber Luft; der Zeilenabstand entfaellt.
     Der Spaltenabstand bleibt unberuehrt. */
  row-gap: 0;

  /* GEMESSEN UND KORRIGIERT
     Ohne align-content ziehen die Rasterzeilen den freien Platz
     unter sich auf, sobald das Panel seine Maximalhoehe erreicht.
     Auf 320x800 war das Panel 778px hoch und die drei Knoepfe
     kamen auf je 162px statt 48. Mit start behalten die Zeilen
     ihre Inhaltshoehe; reicht der Platz nicht, scrollt der Inhalt
     — wofuer overflow-y darueber schon steht. */
  align-content: start;
}

/* Die Haarlinien: Complianz liefert die Trenner mit 0 Hoehe aus,
   sie tragen dadurch nichts. Eine Linie ordnet Kopf, Inhalt und
   Aktionen sichtbar zueinander — jetzt randlos und mit deutlich
   kleinerem Abstand als in der ersten Fassung (12px). */
/* Gemessen trugen die Trenner margin: 0 -20px und ragten damit auf
   beiden Seiten aus dem Panel heraus. Im scrollenden Panel ist das
   eine unnoetige Ueberbreite — die Linie soll genau so breit sein
   wie das Panel. */
/* Gemessen trugen die Trenner margin: 0 -20px und waren damit
   718px breit in einem 680px-Panel — der Panelinhalt war 20px
   ueberbreit. Die erste Fassung ohne body verlor: Complianz setzt
   den Aussenabstand mit derselben Gewichtung (0,2,0) und laedt
   spaeter. Mit body (0,2,1) entscheidet diese Regel. */
body .cmplz-cookiebanner .cmplz-divider {
  border-block-start: 1px solid var(--kh-color-line-200);
  margin: 0;
}

/* --- Kopf -------------------------------------------------- */

/* EIN KOPF ALS BAND, NICHT ALS ABSCHNITT
   Waagerecht 22px — dasselbe Mass wie Inhalt, Knoepfe und
   Rechtsverweise, damit eine einzige senkrechte Kante durch das
   ganze Panel laeuft. Senkrecht 21px: der Titel ist 22px gross
   und 1.25 zeilig (27.5px), das Schliessen-Zeichen bringt es mit
   seinem Aussenmass auf 26px — die Zeile kommt damit auf rund
   69px und liegt im Bereich 68–72. */
/* GEMESSEN AUF 430px: DER TITEL BRACH UM
   Complianz legt den Kopf als Raster mit drei festen Spalten aus —
   gemessen 100px / 176px / 100px. Das leere Logo bekam 100px, das
   Schliessen-Zeichen ebenfalls 100, und „Einwilligung verwalten"
   musste sich auf 176px in zwei Zeilen falten; die Kopfzeile war
   dort 85.5px hoch statt 64.

   Mit auto fuer die Randspalten nimmt das leere Logo 0px, das
   Zeichen seine 44, und der Titel bekommt den Rest. Faende sich
   spaeter doch ein Logo im Banner, bemisst auto es nach seinem
   Inhalt — es wird nichts verborgen, nur nichts reserviert. */
body .cmplz-cookiebanner .cmplz-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 21px 22px;
  align-items: center;
}

/* Complianz setzt die Titelgroesse mit eigener Kette und laedt
   spaeter — die erste Fassung mit zwei Klassen blieb ohne
   Wirkung, gemessen 15px statt der gesetzten 17px. Mit body und
   dem Kopf davor entscheidet diese Regel. */
body .cmplz-cookiebanner .cmplz-header .cmplz-title {
  font-family: var(--kh-font-heading, inherit);
  font-size: 1.375rem;
  font-weight: var(--kh-font-weight-bold, 700);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--kh-color-ink-900);

  /* Complianz zentriert den Titel. In einem Kopf mit dem
     Schliessen-Zeichen rechts und ohne Gegenstueck links ist das
     nicht mittig, sondern daneben: gemessen lag die Titelmitte
     19px links der Panelmitte, weil die Titelspalte vor dem
     Zeichen endet. Dazu steht auf dieser Website jede Ueberschrift
     linksbuendig — auch der Vorspann direkt darunter. Linksbuendig
     ist hier keine Geschmacksfrage, sondern die Kante, an der das
     ganze Panel haengt.

     NACHGEMESSEN: text-align allein genuegte nicht. Complianz
     zentriert nicht den Text, sondern das Element —
     justify-self: center im Kopfraster. Der Titel war dadurch
     schmalgezogen (229.9px) und mittig gesetzt; seine Mitte lag
     18px links der Panelmitte. Beides steht hier jetzt auf
     Anfang. */
  justify-self: start;
  text-align: start;
}

/* Das Schliessen-Zeichen war 20x20 gross. Die Trefffläche waechst
   ueber Polster auf 44x44, das Zeichen selbst bleibt 20px — die
   Grafik kommt von Complianz und wird nicht ersetzt. */
/* Complianz setzt width und height mit derselben Gewichtung
   (.cmplz-cookiebanner .cmplz-close) und laedt spaeter — gemessen
   blieb es bei 24px. Der Kopf als zusaetzliche Klasse entscheidet. */
/* 44x44 bleibt die Trefffläche, das Zeichen bleibt 20px. Die
   negativen Aussenabstaende der ersten Fassung zogen den Knopf
   fast an die Panelkante (gemessen 10px Rest). Jetzt nur noch
   senkrecht ausgeglichen, waagerecht traegt der Kopfabstand von
   26px — sichtbarer Rand, gleiche Trefffläche. */
body .cmplz-cookiebanner .cmplz-header .cmplz-close {
  inline-size: 44px;
  block-size: 44px;
  padding: 12px;
  /* Aussenmass 26px (44 minus zweimal 9): das Zeichen treibt die
     Kopfhoehe nicht. Waagerecht -8px, damit der Knopf 14px vor
     der Panelkante endet — sichtbarer Rand bei gleicher
     Trefffläche. */
  margin-block: -9px;
  margin-inline: 0 -8px;
  border-radius: var(--kh-radius-sm, 6px);
  color: var(--kh-color-ink-500);
  transition: var(--kh-transition-colors);
}

body .cmplz-cookiebanner .cmplz-header .cmplz-close:hover {
  color: var(--kh-color-ink-900);
}

body .cmplz-cookiebanner .cmplz-header .cmplz-close:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* --- Text -------------------------------------------------- */

/* DER INHALT IST DER EINZIGE BEREICH, DER NACHGIBT
   Die Zeile im Panelraster steht auf minmax(0, 1fr); hier kommt
   das Scrollen dazu. min-block-size: 0 ist dabei nicht
   dekorativ: ein Rasterelement hat als Mindesthoehe seine
   Inhaltshoehe, und ohne diese Aufhebung wuerde der Bereich statt
   zu scrollen einfach ueber das Panel hinauswachsen.

   Der Balken ist schmal und neutral gehalten — er soll die
   Kategorien nicht anschieben. */
body .cmplz-cookiebanner .cmplz-body {
  padding: 18px 22px 20px;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--kh-color-line-300) transparent;
}

/* DER FEHLER, DEN NUR DAS AUGE FINDET
   -------------------------------------------------------------
   Gemessen: der Inhaltsbereich war 678px breit, innen 634px — die
   Kategorienkarten und der Vorspann aber nur 484px. Beide standen
   damit 150px vor der rechten Kante, waehrend die Knoepfe darunter
   die volle Breite nahmen. Die Karten hingen im Panel, statt es
   auszufuellen; keine Zahl aus der Vorgabe hat das verraten.

   Die Ursache ist Complianz' eigene Bannerbreite: die
   Konfiguration steht auf 526px, und daraus wird auf diesen
   Bloecken eine feste Breite gesetzt (526 minus zweimal 21 = 484).
   Sobald das Panel nicht mehr 526px breit ist, stimmt sie nicht.

   Mit auto folgen beide dem Inhaltsbereich. Gemessen: Karten und
   Knoepfe stehen jetzt auf derselben Kante (403 bis 1037), und der
   Vorspann braucht fuenf statt sechs Zeilen — das Panel wurde von
   558 auf 537px kuerzer, ohne dass ein Polster angefasst wurde. */
body .cmplz-cookiebanner .cmplz-body .cmplz-message,
body .cmplz-cookiebanner .cmplz-body .cmplz-categories {
  inline-size: auto;
  max-inline-size: none;
}

body .cmplz-cookiebanner .cmplz-body::-webkit-scrollbar { inline-size: 8px; }

body .cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-track {
  background-color: transparent;
}

body .cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--kh-radius-pill, 999px);
  background-clip: content-box;
  background-color: var(--kh-color-line-300);
}

/* Gemessen 12px — Complianz setzt die Schriftgroesse mit eigener
   Kette. Mit body und dem Koerper davor greift die Vorgabe. */
/* 14px statt 15px und 1.5 statt 1.55: der Vorspann ist Begleitung,
   nicht Inhalt. Er soll gelesen werden koennen, ohne mit den
   Kategorietiteln um Aufmerksamkeit zu ringen. */
body .cmplz-cookiebanner .cmplz-body .cmplz-message {
  font-size: .875rem;
  line-height: 1.5;
  margin-block-end: 17px;
  color: var(--kh-color-ink-700);
}

/* Gemessen blieben die Verweise auf rgb(59,41,255), also dem
   Standardblau: Complianz setzt die Linkfarbe aus seiner eigenen
   Eigenschaft --cmplz_link_color und laedt spaeter. Das
   vorangestellte body entscheidet. */
/* ZWEIMAL NACHGEMESSEN, BIS ES STIMMTE
   Erster Anlauf: .cmplz-cookiebanner .cmplz-documents a — blieb
   ohne Wirkung. Zweiter: dasselbe mit body davor — ebenfalls
   ohne. Die gewinnende Regel ist

       .cmplz-cookiebanner .cmplz-links .cmplz-link

   also DREI Klassen (0,3,0). Meine Fassung hatte zwei Klassen und
   ein Element (0,2,1) und war damit schwaecher — bei
   Spezifitaetsvergleichen zaehlt die Klassenspalte vor der
   Elementspalte. Gemessen blieb die Linkfarbe auf rgb(59,41,255).

   Jetzt dieselbe Kette plus body: (0,3,1). */
body .cmplz-cookiebanner .cmplz-links .cmplz-link,
body .cmplz-cookiebanner .cmplz-message a {
  color: var(--kh-color-primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body .cmplz-cookiebanner .cmplz-links .cmplz-link:hover,
body .cmplz-cookiebanner .cmplz-message a:hover {
  color: var(--kh-color-primary-700);
  text-decoration-thickness: 2px;
}

.cmplz-cookiebanner .cmplz-documents a:focus-visible,
.cmplz-cookiebanner .cmplz-message a:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs, 4px);
  box-shadow: var(--kh-shadow-focus);
}

/* Die Rechtsverweise sitzen naeher am Knopfblock als zuvor
   (gemessen lagen 58px dazwischen) und tragen einen ruhigen
   Unterstrich statt eines dicken. */
/* DER ABSCHLUSS, NICHT EIN WEITERER ABSCHNITT
   13px Abstand nach oben (der Knopfblock gibt unten keinen mehr),
   15px nach unten, und die Verweise stehen mittig — zwei kurze
   Worte zentriert schliessen die Komposition ruhiger ab als zwei
   linksbuendige, die eine vierte Kante oeffnen. */
body .cmplz-cookiebanner .cmplz-documents {
  padding: 13px 22px 15px;
  font-size: .8125rem;
}

body .cmplz-cookiebanner .cmplz-documents ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .cmplz-cookiebanner .cmplz-links .cmplz-link {
  text-decoration-thickness: 1px;
}

/* --- Kategorien -------------------------------------------- */

/* KOMPAKTE ZEILEN STATT GROSSER KARTEN
   Gemessen waren die drei Zeilen je 73px hoch, ohne Rahmen und
   ohne Radius — sie lasen sich als Bloecke. Jetzt eine Zeile mit
   Haarlinie, Radius und ruhigem Grund.

   Der Abstand steht als margin, nicht als gap: .cmplz-categories
   ist ein normaler Block, kein Flex- oder Grid-Behaelter, und ein
   display darauf zu setzen ist nicht noetig. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category {
  margin-block-end: 8px;
  padding: 0;
  border: 1px solid var(--kh-color-line-200);
  border-radius: 8px;
  background-color: var(--kh-color-surface-100, #f7f7f7);
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category:last-child {
  margin-block-end: 0;
}

/* Titel, Schalter und Klappzeichen in einer Zeile: der Titel
   nimmt den Platz, die beiden Bedienelemente stehen rechts mit
   Luft dazwischen. Vorher standen die Spalten auf 383px / 46px /
   15px — die 44px breite Klappschaltflaeche lief damit aus ihrer
   15px-Spalte heraus bis 3px an die Panelkante. Genau das war der
   Eindruck „Pfeile zu weit aussen". */
/* EINE ZEILE, EINE RECHTE ZONE
   -------------------------------------------------------------
   Die Vorgabe beschreibt rechts eine gemeinsame Aktionszone aus
   Statuswort bzw. Schalter und Klappzeichen. Complianz legt beide
   als eigene Rasterspalten aus; ein zusaetzlicher Behaelter
   laesst sich ohne Eingriff in das Markup nicht erzeugen — und
   Markup wird hier nicht angefasst.

   Dieselbe Wirkung entsteht ueber den Abstand: der Spaltenabstand
   faellt von 14 auf 10px, und der Titel traegt rechts 8px
   Eigenpolster. Zwischen Titel und Zone liegen damit 18px,
   zwischen Schalter und Klappzeichen 10px. Die beiden
   Bedienelemente lesen sich als Gruppe, weil sie naeher
   beieinander stehen als am Titel.

   DIE ZEILENHOEHE IST JETZT GESETZT, NICHT ERRECHNET
   56px = 22px Inhalt (Schalterspur; Titel 20.8px, Klappzeichen
   im Aussenmass 22px) plus zweimal 16px Polster plus die zwei
   Haarlinien der Karte. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: 10px;
  row-gap: 0;
  align-items: center;
  padding: 16px;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
  padding-inline-end: 8px;
}

/* Complianz setzt die Titelgroesse mit fuenf Klassen
   (… .cmplz-category-header .cmplz-category-title). Meine Kette
   hatte vier plus body und war damit schwaecher — gemessen 14px
   statt der gesetzten 16. Der Kopf der Zeile muss mit in die
   Kette. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
  font-size: 1rem;
  font-weight: var(--kh-font-weight-semibold, 600);
  line-height: 1.3;
  color: var(--kh-color-ink-900);
}

/* „Immer aktiv" ist eine Feststellung, kein Ruf. Klein, ruhig,
   im funktionalen Gruen des Designsystems. */
/* GEMESSEN: DIESE REGEL HATTE NIE GEWIRKT
   Die erste Fassung stand mit vier Klassen plus body und verlor
   gegen Complianz — gemessen blieben 12px, Gewicht 500 und
   rgb(0,128,0), also reines Gruen. Dass 12px zufaellig dem
   damaligen Sollwert entsprachen, hat den Fehlschlag verdeckt.
   Nachgeprueft: erst die Kette mit .cmplz-category und
   .cmplz-category-header entscheidet — dieselben fuenf Klassen,
   die Complianz fuer Titel, Schalter und Klappzeichen benutzt.
   Kein !important noetig, nachgemessen.

   Der Ton ist jetzt #00703C aus dem Designsystem: dasselbe Gruen,
   das die Seite fuer „geoeffnet" verwendet, und deutlich ruhiger
   als das Standardgruen. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
  font-size: .6875rem;
  font-weight: var(--kh-font-weight-semibold, 600);
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--kh-color-success);
}

/* Aufgeklappte Beschreibung: derselbe Kasten, kleiner Satz, eine
   Haarlinie als Trennung — kein zweites Panel. */
/* Das Element traegt die Klasse .cmplz-description; Complianz
   setzt die Schriftgroesse mit vier Klassen (0,4,0). Der erste
   Anlauf sprach es ueber den id-Anfang an und kam auf (0,3,1) —
   gemessen blieben 12px statt der gesetzten 14. Dieselbe Kette
   plus body entscheidet. */
/* DER GEOEFFNETE ZUSTAND WAR DER GROESSTE FEHLER
   -------------------------------------------------------------
   Vorgefunden: die Beschreibung sass mit 18px Aussenabstand in
   der Karte, die Haarlinie darueber endete deshalb 18px vor
   beiden Kanten. Damit entstand optisch ein zweiter Kasten in der
   Karte — der Eindruck, es oeffne sich ein eigener Bereich, statt
   dass eine Zeile mehr zeigt.

   Jetzt kein Aussenabstand, sondern Polster: die Haarlinie laeuft
   ueber die volle Kartenbreite und trennt die Zeile von ihrem
   Detail, wie eine Tabellenzeile ihre Fortsetzung. Die Zeile
   selbst bleibt 56px hoch, der Text ist 13px und ruhig — kein
   min-height, die Karte waechst nur um das, was der Satz braucht. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
  margin: 0;
  padding: 10px 16px 14px;
  border-block-start: 1px solid var(--kh-color-line-200);
  font-size: .8125rem;
  line-height: 1.47;
  color: var(--kh-color-ink-500);
}

/* DAS KLAPPZEICHEN
   -------------------------------------------------------------
   Geprueft: genau EIN Zeichen je Kategorie — ein span
   .cmplz-icon.cmplz-open mit einem einzigen svg, kein zweites
   Symbol, kein Browser-Standardpfeil, kein Pseudoelement. Hier
   entsteht keines dazu.

   Es ist eine gefuellte FontAwesome-Kontur, kein Strich: eine
   Strichstaerke laesst sich daran nicht setzen. Gesteuert werden
   Groesse, Farbe und Drehung.

   40x40 statt 44x44: die Zeilenhoehe folgt dem hoechsten Element
   in der Zeile, und mit 44 kam die Kategorie auf 72px. Mit 40
   liegt sie bei 66 — innerhalb der Vorgabe und weiterhin ueber
   dem Mindestmass fuer Berührungen. */
/* Auch hier fuenf Klassen bei Complianz: der Aussenabstand der
   ersten Fassung wurde verworfen (gemessen margin: 0px), und das
   Klappzeichen sass 18px von der Zeilenkante statt der
   verlangten 12–16. Mit dem Zeilenkopf in der Kette und -4px
   sind es 14px. */
/* 44x44 TREFFFLAECHE, OHNE DIE ZEILE ZU VERGROESSERN
   -------------------------------------------------------------
   Die Zeilenhoehe folgt dem hoechsten Element in der Zeile. Ein
   einfach auf 44px vergroessertes Klappzeichen haette die Zeile
   von 72 auf 76px getrieben (mobil von 62 auf 70).

   Der Knopf ist deshalb 44x44 gross, traegt aber senkrecht je
   2px negativen Aussenabstand: sein AUSSENMASS bleibt 40px, die
   Zeile bleibt 72px, und die Trefffläche ragt symmetrisch je 2px
   ueber die Zeile hinaus. Das Rasterelement bleibt dabei mittig,
   weil der Ueberstand oben und unten gleich ist.

   Kein content, kein Pseudoelement, kein display: die Vergroesserung
   entsteht am Knopf selbst. Das Zeichen darin bleibt 11px. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle {
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  /* Senkrecht je 11px negativ: das Aussenmass bleibt 22px und
     bestimmt die 56px-Zeile nicht mit. Waagerecht -7px: der Knopf
     endet 9px vor der Kartenkante (16px Polster minus 7), die
     Trefffläche bleibt vollstaendig innerhalb der Karte. */
  margin: -11px -7px -11px 0;
  border-radius: var(--kh-radius-sm, 6px);
  color: var(--kh-color-ink-900);
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-toggle svg {
  inline-size: auto;
  block-size: 11px;
  transition: rotate 200ms var(--kh-ease-standard, ease);
}

/* Zugeklappt zeigt das Zeichen nach unten, aufgeklappt nach oben.
   Gedreht wird nur die Grafik — aria-expanded setzt Complianz. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-toggle[aria-expanded="true"] svg {
  rotate: 180deg;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-toggle:hover {
  background-color: var(--kh-color-line-200);
}

.cmplz-cookiebanner .cmplz-category-toggle:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

@media (prefers-reduced-motion: reduce) {

  body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-toggle svg {
    transition: none;
  }
}

/* --- Schalter ---------------------------------------------- */

/* Spur: vorgefunden 28x15 in #555. Jetzt 44x24 im neutralen Grau,
   rot sobald eingewilligt ist. Der Knopf ist Complianz' eigenes
   ::after und wird nur bemessen und verschoben. */
/* SPEZIFITAET UND GEOMETRIE
   Complianz zeichnet den Schalter mit

     .cmplz-cookiebanner .cmplz-categories .cmplz-category
       .cmplz-banner-checkbox .cmplz-label::before / ::after

   also fuenf Klassen. Mein erster Anlauf stand mit drei dagegen und
   blieb ohne Wirkung — gemessen weiterhin 28x15 in #555. Die
   Selektoren hier tragen dieselbe Kette plus body.

   Die Spur waechst von 28x15 auf 40x22, der Knopf von 11 auf 16px.
   Die drei zusammenhaengenden Werte — Spurbreite, Knopfgroesse und
   der linke Abstand im eingeschalteten Zustand — stehen bewusst
   beieinander: 40 minus 16 minus zweimal 3 Rand ergibt die 21px,
   um die der Knopf wandert.

   content und display werden NICHT angefasst: Complianz setzt
   beides auf diesen Pseudoelementen selbst und zeichnet damit den
   Zustand. Hier stehen nur Farbe, Mass und Lage. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label {
  padding-inline-start: 46px;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before {
  inline-size: 40px;
  block-size: 22px;
  inset-block-start: -11px;
  inset-inline-start: 0;
  border-radius: var(--kh-radius-pill, 999px);
  background-color: var(--kh-color-line-300);
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::after {
  inline-size: 16px;
  block-size: 16px;
  inset-block-start: -8px;
  inset-inline-start: 3px;
  border-radius: var(--kh-radius-circle, 50%);
  background-color: var(--kh-color-surface-000);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before {
  background-color: var(--kh-color-primary-500, #E60000);
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::after {
  inset-inline-start: 21px;
}

/* Complianz setzt beim Fokus einen blauen Ring. Hier der Ring des
   Designsystems, damit er zu jedem anderen Fokus der Seite passt. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label::before {
  box-shadow: var(--kh-shadow-focus);
}

/* --- Schaltflaechen ---------------------------------------- */

/* GEMESSEN UND KORRIGIERT · FLEX-WRAP
   Der erste Anlauf setzte hier flex-wrap: wrap. Das war falsch und
   sofort sichtbar: Complianz gibt jedem Knopf

       .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { width: 100% }

   Im nicht umbrechenden Flex-Behaelter schrumpfen die drei Knoepfe
   damit auf je ein Drittel (gemessen 140 / 140 / 186px). MIT
   Umbruch belegt jeder eine eigene Zeile — der Banner wuchs von
   414 auf 674px Hoehe. Der Umbruch steht deshalb nur noch in der
   Regel fuer schmale Geraete, wo er gewollt ist.

   Der Abstand zwischen den Knoepfen kommt von Complianz
   (--cmplz_banner_margin) und bleibt dort. */
body .cmplz-cookiebanner .cmplz-buttons {
  margin: 0;
  /* Unten 0: der Abstand zu den Rechtsverweisen wird EINMAL
     vergeben, und zwar dort. Zweimal Polster uebereinander war der
     Grund, warum zwischen Knoepfen und Verweisen zuletzt 29px
     standen statt der vorgesehenen 12–14. */
  padding: 18px 22px 0;
  gap: 10px;
  /* Die Knoepfe tragen ihre eigene Hoehe aus min-block-size und
     werden nicht auf die Zeilenhoehe gestreckt. */
  align-items: center;
  align-content: start;
}

/* SMARTERE BREITEN — NUR AB TABLET
   -------------------------------------------------------------
   Die Vorgabe nennt ein Raster 1fr 1fr 1.35fr. Als Raster mit
   drei festen Spuren waere es falsch, sobald Complianz einen
   vierten Knopf zeigt. Dieselbe Verteilung entsteht ueber die
   Flex-Anteile — und ein zusaetzlicher Knopf ordnet sich von
   allein ein.

   GEMESSEN UND KORRIGIERT
   Diese Anteile standen zuerst ohne Medienabfrage. Complianz gibt
   den Knoepfen white-space: nowrap; mit flex-basis 0 konnten sie
   deshalb nicht unter ihre Textbreite schrumpfen und liefen bei
   390px waagerecht aus der Zeile heraus — gemessen 332px breit
   bei 370px Panelbreite, dazu 162px hoch.

   Unterhalb von 48em bleibt die Knopfanordnung deshalb
   vollstaendig bei Complianz: dort stapelt es die Knoepfe selbst,
   und das hat vorher sauber funktioniert. */
/* GEMESSEN UND NACHGESCHAERFT · DIE GRENZE IST 769px, NICHT 768
   Complianz stellt die Knoepfe bei genau 768px noch untereinander:
   gemessen flex-direction: column aus seiner eigenen Medienabfrage
   (max-width: 768px). Meine Anteile standen ab 48em — also ab
   768px — und trafen damit auf eine Spalte. In einer Spalte wirkt
   flex-basis: 0 in der Hoehe; die Knoepfe hielten ihre 46px nur,
   weil min-block-size und align-content dagegenstanden. Das ist
   eine Falle, kein Zustand. Die Anteile gelten deshalb erst ab
   769px — genau dort, wo Complianz selbst eine Reihe bildet. */
@media (min-width: 48.0625em) {

  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { flex: 1 1 0; }

  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
    flex-grow: 1.35;
  }
}

/* Gemeinsames Mass fuer alles, was Complianz hier sichtbar zeigt.
   Kein display, keine Hoehe per height — min-height plus Polster.

   SPEZIFITAET: Complianz setzt min-height und padding mit
   .cmplz-cookiebanner .cmplz-buttons .cmplz-btn, also drei Klassen,
   und laedt sein Banner-CSS NACH global.css. Bei gleicher Gewichtung
   gewinnt dann Complianz — gemessen blieb die Hoehe auf 45px. Das
   vorangestellte body macht aus (0,3,0) ein (0,3,1) und entscheidet
   unabhaengig von der Ladereihenfolge. */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  min-block-size: 46px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: var(--kh-radius-sm, 6px);
  font-family: inherit;
  font-size: .875rem;
  font-weight: var(--kh-font-weight-semibold, 600);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: var(--kh-transition-colors);
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* Akzeptieren: der primaere Weg. Complianz setzt seine Blautoene
   mit eigenem !important, deshalb hier ebenfalls — nachgemessen,
   ohne !important blieb der Knopf blau. */
/* GEMESSEN UND KORRIGIERT · FARBSTUFE
   Der erste Anlauf nahm primary-600 fuer den Ruhezustand. Die
   Palette in Abschnitt 01 ist aber

       --kh-color-primary-500: #E60000   Basis
       --kh-color-primary-600: #BD0000   Hover
       --kh-color-primary-700: #820000   Active

   Der Knopf war damit im Ruhezustand schon auf der Hover-Farbe
   (gemessen rgb(189,0,0)) und beim Ueberfahren passierte nichts
   Sichtbares. Jetzt 500 / 600 / 700 — genau die drei Werte aus
   der Vorgabe. */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
  background-color: var(--kh-color-primary-500, #E60000) !important;
  border-color: var(--kh-color-primary-500, #E60000) !important;
  color: var(--kh-color-ink-inverse, #fff) !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
  background-color: var(--kh-color-primary-600, #BD0000) !important;
  border-color: var(--kh-color-primary-600, #BD0000) !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-accept:active {
  background-color: var(--kh-color-primary-700, #820000) !important;
  border-color: var(--kh-color-primary-700, #820000) !important;
}

/* Ablehnen und Einstellungen speichern: gleiche Hoehe, helle
   Flaeche, feine Kontur. Gestylt werden sie nur, weil Complianz
   sie auf dieser Website sichtbar ausgibt. */
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
  background-color: var(--kh-color-surface-000) !important;
  border-color: var(--kh-color-line-300) !important;
  color: var(--kh-color-ink-900) !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover {
  border-color: var(--kh-color-primary-text) !important;
  color: var(--kh-color-primary-text) !important;
}

/* --- Schwebende Schaltflaeche ------------------------------- */

/* Falls Complianz sie zeigt, passt sie zur Website. Auf dieser
   Installation traegt sie cmplz-dismissed und ist verborgen —
   daran aendert diese Regel nichts, sie setzt keine Sichtbarkeit. */
.cmplz-manage-consent {
  min-block-size: 44px;
  padding: 10px 16px;
  border: 1px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-sm, 6px);
  background-color: var(--kh-color-surface-000);
  font-family: inherit;
  font-size: .8125rem;
  font-weight: var(--kh-font-weight-semibold, 600);
  color: var(--kh-color-ink-900);
}

.cmplz-manage-consent:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* --- Schmale Geraete --------------------------------------- */

/* --- Tablet ------------------------------------------------ */

/* ENTFALLEN: die eigene Tabletbreite.
   Sie stand hier, weil das Panel auf dem Desktop 760px breit war
   und fuer 768px auf 680px verkleinert werden musste. Mit
   min(680px, calc(100vw - 32px)) als Grundmass gilt genau dieser
   Wert jetzt ueberall — eine Sonderregel fuer Tablet waere eine
   Wiederholung derselben Zahl. */


/* --- Schmale Geraete --------------------------------------- */

@media (max-width: 29.99em) {

  /* Volle Breite minus 20px, zentriert, und nur der Inhalt
     scrollt: overflow-y steht auf dem Panel, nicht auf der Seite. */
  body .cmplz-cookiebanner {
    inline-size: calc(100vw - 16px);
    max-block-size: calc(100vh - 16px);
    border-radius: 14px;
  }

  /* 19px senkrecht: das Schliessen-Zeichen bringt sein Aussenmass
     von 26px mit, die Kopfzeile kommt damit auf 64px. */
  body .cmplz-cookiebanner .cmplz-header { padding: 19px 18px; }
  body .cmplz-cookiebanner .cmplz-body { padding: 16px 18px 18px; }
  body .cmplz-cookiebanner .cmplz-buttons { padding: 16px 18px 0; gap: 9px; }
  body .cmplz-cookiebanner .cmplz-documents { padding: 13px 18px 14px; }

  body .cmplz-cookiebanner .cmplz-header .cmplz-title { font-size: 1.1875rem; }
  body .cmplz-cookiebanner .cmplz-body .cmplz-message { font-size: .875rem; }

  /* Zeilenhoehe auf etwa 60px: das Klappzeichen gibt das Mass
     vor, also 36px plus 2 mal 12px Polster. */
  /* Dieselbe Kettenlaenge wie in der Desktopregel: nachdem dort
     .cmplz-category-header dazukam, verlor die kuerzere Mobilregel
     gegen die eigene Desktopfassung — gemessen 66px Zeilenhoehe
     und ein 40px-Klappzeichen statt der vorgesehenen 60 und 36.
     Mit 36px Zeichen und 12px Polster sind es 60px. */
  /* Dieselbe 56px-Zeile wie auf dem Desktop, nur mit 14px
     waagerechtem Polster: 22px Inhalt plus zweimal 16px plus die
     beiden Haarlinien. Die Zeilenhoehe unterscheidet sich zwischen
     Telefon und Desktop nicht mehr — es gibt keinen Grund dafuer,
     und zwei Masse sind zwei Fehlerquellen. */
  body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
    column-gap: 10px;
    padding: 16px 14px;
  }

  /* Auch mobil 44x44 als Trefffläche, Aussenmass 22px. Waagerecht
     -6px: der Knopf endet 8px vor der Kartenkante. */
  body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle {
    inline-size: 44px;
    block-size: 44px;
    margin: -11px -6px -11px 0;
  }

  body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
    padding: 10px 14px 13px;
  }

  /* Untereinander statt nebeneinander: hier ist der Umbruch
     gewollt, weil drei Knoepfe auf 320px nebeneinander je 90px
     breit waeren. Complianz gibt den Knoepfen bereits width: 100%
     — mit Umbruch belegt jeder eine Zeile, ohne dass hier eine
     Breite gesetzt werden muss.

     Verborgene Knoepfe stehen auf display: none und sind damit
     keine Flex-Elemente; der Umbruch erreicht sie nicht.

     ENTFALLEN: die Flex-Anteile fuer schmale Geraete. Sie waren
     der Versuch, den oben beschriebenen Ueberlauf zu heilen, den
     ich selbst erzeugt hatte. Ohne die Anteile gibt es ihn nicht,
     und Complianz stapelt die Knoepfe hier von sich aus. */
  body .cmplz-cookiebanner .cmplz-buttons { flex-wrap: wrap; }
}


/* ==========================================================
   ENDE global.css
   ========================================================== */