@charset "UTF-8";
/* ==========================================================================
   creakom.tv — Zentrales Stylesheet v4 (Dark Mode)
   --------------------------------------------------------------------------
   Farbkonzept: CI-Dunkelgrau (#1E2A2C) als Basis, Türkis (#A4D8DE) als
   Leitfarbe, Rot (#B61918) ausschließlich als Handlungsakzent (CTAs).
   Kein weißer Hintergrund auf Sektionsebene.

   TOKEN-ARCHITEKTUR (drei Schichten)
     1. Primitive  --p-*    Rohwerte. Niemals direkt in Komponenten verwenden.
     2. Semantisch --c-*, --space-*, --radius-*, --elev-*
                            Zweckgebundene Aliase. Das ist die Ebene, gegen
                            die Komponenten schreiben.
     3. Komponente --btn-*, --card-*
                            Nur dort, wo eine Komponente eigene Stellschrauben
                            braucht.

   Die semantischen Namen sind bewusst identisch mit v3 geblieben — rund
   2.000 Zeilen und 45 Seiten referenzieren sie. Neu ist, worauf sie zeigen.
   ========================================================================== */

/* ----------------------------------------------------- 1. PRIMITIVE TOKENS */
:root {
  /* CI-Rohwerte — unverändert aus dem Corporate Design */
  --p-turq-500:   #A4D8DE;   /* CI-Türkis */
  --p-red-500:    #B61918;   /* CI-Rot */
  --p-gray-500:   #585858;
  --p-black:      #000000;
  --p-white:      #FFFFFF;

  /* Türkis-Rampe, aus dem CI-Ton abgeleitet */
  --p-turq-200:   #D3EDF0;
  --p-turq-400:   #7ECAD2;
  --p-turq-600:   #5FA9B3;
  --p-turq-700:   #3A7080;
  --p-turq-800:   #2D5059;
  --p-turq-900:   #2A4045;

  --p-red-600:    #8F1413;
  --p-red-300:    #E05A59;   /* Rot auf dunklem Grund lesbar (Fehlertexte) */
  --p-red-200:    #F58885;   /* Rot fuer KLEINTEXT auf dunklen Flaechen.
                                CI-Rot (#B61918) erreicht auf --c-surface nur
                                1,99:1 und ist als Text unlesbar; auch das
                                Fehler-Rot #E05A59 bleibt mit 3,66:1 unter AA.
                                Dieser Wert haelt 4,74-5,54:1 auf allen drei
                                dunklen Kartenflaechen (surface, elevated,
                                surface-2) und erfuellt damit AA fuer Kleintext. */

  /* Neutral-Rampe: eine einzige Reihe für alle Flächen.
     900 = tiefste Fläche, 400 = höchste Erhebung. */
  --p-ink-900:    #10181A;
  --p-ink-800:    #141E20;
  --p-ink-700:    #1A2729;
  --p-ink-600:    #1E2A2C;
  --p-ink-500:    #233235;
  --p-ink-450:    #26383C;
  --p-ink-400:    #2A3D42;

  /* Textrampe */
  --p-fg-100:     #FFFFFF;
  --p-fg-200:     #DCE9EC;
  --p-fg-300:     #C8D8DC;
  --p-fg-400:     #9FB8BE;
  --p-fg-500:     #7E9CA4;
  --p-fg-600:     #6E9098;

  /* Alpha-Skala Türkis — ersetzt ~35 handgesetzte rgba()-Varianten */
  --p-a-turq-04:  rgba(164,216,222,.04);
  --p-a-turq-06:  rgba(164,216,222,.06);
  --p-a-turq-10:  rgba(164,216,222,.10);
  --p-a-turq-14:  rgba(164,216,222,.14);
  --p-a-turq-18:  rgba(164,216,222,.18);
  --p-a-turq-25:  rgba(164,216,222,.25);
  --p-a-turq-35:  rgba(164,216,222,.35);
  --p-a-turq-50:  rgba(164,216,222,.50);
  --p-a-turq-70:  rgba(164,216,222,.70);

  /* Alpha-Skala Weiß — für Text und Rahmen auf Bild-/Farbflächen */
  --p-a-white-08: rgba(255,255,255,.08);
  --p-a-white-12: rgba(255,255,255,.12);
  --p-a-white-20: rgba(255,255,255,.20);
  --p-a-white-30: rgba(255,255,255,.30);
  --p-a-white-70: rgba(255,255,255,.70);
  --p-a-white-88: rgba(255,255,255,.88);

  --p-a-red-10:   rgba(182,25,24,.10);
  --p-a-red-30:   rgba(182,25,24,.30);
  --p-a-red-45:   rgba(182,25,24,.45);
}

/* ---------------------------------------------------- 2. SEMANTISCHE TOKENS */
:root {
  /* -- Farbe: Marke ------------------------------------------------------ */
  --c-black:          var(--p-black);
  --c-gray:           var(--p-gray-500);
  --c-red:            var(--p-red-500);
  --c-red-hover:      var(--p-red-600);
  --c-red-text:       var(--p-red-200);   /* Rot, das als Text funktioniert */
  --c-turquoise:      var(--p-turq-500);
  --c-turquoise-deep: var(--p-turq-600);
  --c-turquoise-soft: var(--p-a-turq-14);
  --c-turquoise-mid:  var(--p-a-turq-25);
  --c-white:          var(--p-white);

  /* -- Farbe: Flächen (Tiefenstaffelung) --------------------------------- *
   * ink      tiefste Ebene — Hero, Footer, Kontrastsektionen
   * base     Standard-Sektion
   * surface  erste Erhebung — Cards
   * elevated zweite Erhebung — Cards auf getönten Flächen, Formularfelder   */
  --c-ink:            var(--p-ink-800);
  --c-ink-deep:       var(--p-ink-900);
  --c-ink-soft:       var(--p-ink-700);
  --c-base:           var(--p-ink-600);
  --c-surface:        var(--p-ink-500);
  --c-surface-2:      var(--p-ink-400);
  --c-elevated:       var(--p-ink-450);

  /* -- Farbe: Rahmen ----------------------------------------------------- */
  --c-line-subtle:    var(--p-a-turq-10);
  --c-line:           var(--p-a-turq-18);
  --c-line-strong:    var(--p-a-turq-25);
  --c-line-active:    var(--p-a-turq-50);

  /* -- Farbe: Text -------------------------------------------------------- *
   * Kontrast gegen --c-base (#1E2A2C):
   *   --c-text        #C8D8DC  11.6:1
   *   --c-text-muted  #7E9CA4   4.9:1   (v3: #6E9098 → 4.2:1, knapp unter AA)
   *   --c-text-faint  #6E9098   4.2:1   nur für Nicht-Text (Trenner, Deko)   */
  --c-heading:        var(--p-fg-100);
  --c-text:           var(--p-fg-300);   /* Fließtext auf dunklem Grund */
  --c-text-strong:    var(--p-fg-200);
  --c-text-muted:     var(--p-fg-500);
  --c-text-faint:     var(--p-fg-600);
  --c-on-ink-muted:   var(--p-fg-500);

  /* Text auf getönten/hellen Flächen (tint, cta-band).
     Eigene Ebene, weil dort andere Kontrastverhältnisse gelten. */
  --c-on-tint:        var(--p-fg-100);
  --c-on-tint-muted:  var(--p-a-white-88);

  /* -- Farbe: Zustände --------------------------------------------------- */
  --c-danger:         var(--p-red-300);
  --c-focus:          var(--p-turq-500);

  /* -- Verläufe ---------------------------------------------------------- */
  --grad-base:        linear-gradient(168deg, var(--p-ink-600) 0%, var(--p-ink-700) 100%);
  --grad-ink:         linear-gradient(168deg, var(--p-ink-800) 0%, var(--p-ink-600) 100%);
  --grad-tint:        linear-gradient(168deg, var(--p-ink-600) 0%, var(--p-turq-900) 100%);
  --grad-turq-deep:   linear-gradient(135deg, var(--p-ink-600) 0%, var(--p-turq-900) 60%, var(--p-turq-800) 100%);
  --grad-turq-accent: linear-gradient(135deg, var(--p-a-turq-18) 0%, var(--p-a-turq-04) 100%);
  --grad-cta:         linear-gradient(110deg, var(--p-ink-800) 0%, var(--p-turq-900) 45%, var(--p-turq-700) 100%);

  /* -- Typografie -------------------------------------------------------- */
  --font-sans: "Segoe UI", "Segoe UI Variable Display", -apple-system,
               BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Neunstufige Skala, durchgehendes Verhältnis. Die vier fluiden Stufen
     skalieren mit dem Viewport, die fünf statischen bleiben stabil.
     Insgesamt ca. 6-8% größer als v4 — auf Wunsch angehoben, rein über
     diese Tokens; kein einziges HTML-Template musste dafür angefasst werden. */
  --fs-display: clamp(2.75rem, 1.3rem + 5.6vw, 5.5rem);
  --fs-h1:      clamp(2.25rem, 1.4rem + 3.1vw, 3.75rem);
  --fs-h2:      clamp(1.8rem, 1.3rem + 2vw, 2.9rem);
  --fs-h3:      clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + .5vw, 1.375rem);
  --fs-body:    1.125rem;
  --fs-small:   0.9375rem;
  --fs-micro:   0.875rem;
  --fs-nano:    0.8125rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Zeilenhöhe nach Größe gestaffelt: große Typo braucht engere Zeilen. */
  --lh-display: 1.02;
  --lh-tight:   1.12;
  --lh-snug:    1.35;
  --lh-body:    1.65;

  /* Optisches Tracking: je größer der Grad, desto enger. */
  --ls-display: -0.03em;
  --ls-heading: -0.018em;
  --ls-body:     0em;
  --ls-caps:     0.12em;
  --ls-caps-wide: 0.15em;

  /* -- Raum -------------------------------------------------------------- *
   * Eine Skala für alle Abstände. Die fluiden Stufen atmen mit dem
   * Viewport, damit auf großen Screens echter Weißraum entsteht.          */
  --space-3xs:  0.25rem;
  --space-2xs:  0.5rem;
  --space-xs:   0.75rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --space-xl:   clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --space-2xl:  clamp(2.75rem, 2rem + 3.4vw, 4.75rem);
  --space-3xl:  clamp(4rem, 2.8rem + 5vw, 7rem);
  --space-4xl:  clamp(5.5rem, 3.6rem + 7.5vw, 10rem);

  --container:      1240px;
  --container-slim: 840px;
  --space-section:  var(--space-3xl);
  --space-gutter:   clamp(1.25rem, 4vw, 2.5rem);
  --angle:          clamp(1.75rem, 4vw, 3.5rem);
  --header-h:       4.6rem;

  /* -- Radius ------------------------------------------------------------ *
   * War durchgehend 3px. Weichere Kanten wirken wertiger, ohne die
   * klare Linienführung aufzugeben. Rückbau: --radius auf 3px setzen.     */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;
  --radius:      var(--radius-md);

  /* -- Erhebung ---------------------------------------------------------- *
   * Mehrstufige, weiche Schatten statt einer harten Kante.                */
  --elev-1: 0 1px 2px rgba(0,0,0,.28);
  --elev-2: 0 2px 4px rgba(0,0,0,.24), 0 6px 14px rgba(0,0,0,.22);
  --elev-3: 0 4px 8px rgba(0,0,0,.24), 0 14px 32px rgba(0,0,0,.30);
  --elev-4: 0 8px 16px rgba(0,0,0,.26), 0 28px 60px rgba(0,0,0,.38);
  --glow-turq: 0 0 0 1px var(--p-a-turq-25), 0 14px 40px rgba(164,216,222,.10);
  --glow-red:  0 8px 26px rgba(182,25,24,.32);

  /* Aliase aus v3 — weiterhin gültig */
  --shadow-card:  var(--elev-2);
  --shadow-glow:  var(--glow-turq);

  /* -- Bewegung ---------------------------------------------------------- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast:      160ms;
  --t-medium:    340ms;
  --t-slow:      620ms;

  /* -- Ebenen (statt Magic Numbers) -------------------------------------- */
  --z-base:    1;
  --z-sticky:  90;
  --z-mega:    99;
  --z-header:  100;
  --z-cookie:  150;
  --z-skip:    300;

  /* -- Glas -------------------------------------------------------------- */
  --blur-sm:   blur(6px);
  --blur-md:   blur(16px);
  --blur-lg:   blur(24px);
}

/* ------------------------------------------------------- 3. KOMPONENTEN-TOKENS */
:root {
  --card-bg:            var(--c-surface);
  --card-bd:            var(--c-line);
  --card-bd-hover:      var(--c-line-active);
  --card-pad:           clamp(1.5rem, 3vw, 2.25rem);
  --card-lift:          -4px;

  --btn-pad-y:          0.95rem;
  --btn-pad-x:          1.9rem;
  --btn-radius:         var(--radius-sm);

  --field-bg:           var(--c-surface-2);
  --field-bd:           var(--c-line-strong);
  --field-bd-focus:     var(--c-turquoise);
  --field-ring:         0 0 0 3px var(--p-a-turq-18);
}

/* Weniger Transparenz, wenn das System es verlangt. */
@media (prefers-reduced-transparency: reduce) {
  :root { --blur-sm: none; --blur-md: none; --blur-lg: none; }
}

/* ------------------------------------------------------------- RESET/BASIS */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-base);
  overflow-x: hidden;
  /* Optische Feinheiten, die auf großen Flächen den Unterschied machen. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  color: var(--c-heading);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 {
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  line-height: var(--lh-snug); letter-spacing: var(--ls-body);
}

p { max-width: 68ch; text-wrap: pretty; }
strong { font-weight: var(--fw-semibold); color: var(--c-heading); }

/* Ziffern springen nicht mehr: einheitliche Breite für alle Kennzahlen. */
.stats__value, .hero__proof-value, .kalk-result__range, .kalk-tier__price,
.starter-card__price, .problem-card__num, .card__num, .hud-meta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: var(--c-turquoise); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--c-white); }

ul[role="list"], ol[role="list"] { list-style: none; }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: var(--z-skip);
  padding: .75rem 1.25rem; background: var(--c-turquoise); color: var(--c-ink);
  font-weight: var(--fw-semibold); border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

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

/* ---------------------------------------------------------------- LAYOUT */
.container { width: min(var(--container), 100% - 2*var(--space-gutter)); margin-inline: auto; }
.container--slim { width: min(var(--container-slim), 100% - 2*var(--space-gutter)); }

/* -- SEKTIONEN -------------------------------------------------------------
   Tiefenstaffelung statt konkurrierender Farbverläufe: jede Sektionsvariante
   besetzt genau eine Ebene der Neutral-Rampe. Der Rhythmus entsteht aus dem
   Wechsel der Ebenen, nicht aus wechselnden Farbwinkeln.

   .section--tint lief in v3 bis #5CA0AA aus. Fließtext in --c-text erreichte
   dort nur ~2:1 statt der geforderten 4.5:1. Die Fläche bleibt türkisstichig,
   aber innerhalb des lesbaren Bereichs.                                     */
.section {
  padding-block: var(--space-section);
  background: var(--c-base);
  position: relative;
}
.section--ink  { background: var(--grad-ink); }
.section--tint { background: var(--grad-tint); }
.section--deep { background: var(--c-ink-deep); }

/* -- KANTEN ----------------------------------------------------------------
   .section--angled-both stand in v3 auf 17 Elementen, ohne dass je eine Regel
   dazu existierte. Statt der ursprünglich gedachten Diagonale — die gegen die
   „klare Linien"-Vorgabe arbeitet — markiert die Klasse jetzt den Ebenen-
   wechsel: eine Türkis-Hairline plus ein weich auslaufender Tiefenverlauf.  */
.section--angled-top,
.section--angled-both { border-top: 1px solid var(--c-line-subtle); }
.section--angled-bottom,
.section--angled-both { border-bottom: 1px solid var(--c-line-subtle); }

.section--angled-top::before,
.section--angled-bottom::after,
.section--angled-both::before,
.section--angled-both::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: var(--space-lg);
  pointer-events: none;
}
.section--angled-top::before,
.section--angled-both::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.22), transparent);
}
.section--angled-bottom::after,
.section--angled-both::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.22), transparent);
}

/* Auf getönten Flächen gilt eine eigene Textebene — sonst kippt der Kontrast. */
.section--tint { color: var(--c-on-tint-muted); }
.section--tint p:not([class]),
.section--tint .section-head p { color: var(--c-on-tint-muted); }
.section--tint h2, .section--tint h3 { color: var(--c-on-tint); }

/* Whitepaper-Landingpage */
.wp-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .wp-grid { grid-template-columns: 1fr; } }
 
.wp-card {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  padding: 1.4rem 1.4rem 1.5rem; cursor: pointer;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow-wrap: anywhere;   /* Hover/Transition: geteiltes Interaktionssystem */
}
.wp-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.wp-card:focus-within { outline: 2px solid var(--c-turquoise); outline-offset: 2px; }
.wp-card.is-selected { border-color: var(--c-turquoise); box-shadow: 0 0 0 2px rgba(164,216,222,.35); }
.wp-card__badge {
  align-self: flex-start; display: inline-flex; flex-direction: column; align-items: center; line-height: 1;
  background: var(--c-ink); color: #fff; border-radius: var(--radius); padding: .5rem .75rem;
  font-weight: var(--fw-bold); font-size: 1.25rem;
}
.wp-card__badge small { font-size: .58rem; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin-top: 3px; }
/* Themenlabel: nutzte CI-Rot als Textfarbe (einzige Stelle im Stylesheet) und
   kam damit auf 1,99:1 — auf dem Screenshot praktisch unlesbar. Jetzt
   --c-red-text, das AA fuer Kleintext haelt. Bei .72rem in Kapitaelchen mit
   Sperrung gilt die Kleintext-Schwelle von 4,5:1, nicht die 3:1 fuer Grosstext. */
.wp-card__topic { color: var(--c-red-text); font-size: .72rem; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; margin-top: .35rem; }
.wp-card__title { color: var(--c-white); font-weight: var(--fw-bold); font-size: 1.1rem; }
.wp-card__preview { color: var(--c-text-muted); font-size: .9rem; }
.wp-card__points { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .3rem; }
.wp-card__points li { position: relative; padding-left: 1.1rem; font-size: .84rem; color: var(--c-text); }
.wp-card__points li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; background: var(--c-turquoise); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.wp-card__check { margin-top: .4rem; color: var(--c-turquoise); font-weight: var(--fw-bold); font-size: .82rem; opacity: 0; }
.wp-card.is-selected .wp-card__check { opacity: 1; }
 
.wp-alert { background: rgba(182,25,24,.10); border: 1px solid rgba(182,25,24,.4); color: var(--c-text); border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: 1.5rem; }
.wp-alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }
 
.wp-done { text-align: center; max-width: 40rem; margin-inline: auto; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: clamp(2rem, 5vw, 3rem); }
.wp-done__icon { width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-turquoise); color: #0E1A1E; font-size: 1.6rem; font-weight: var(--fw-bold); }
.wp-done h2 { margin-bottom: .5rem; }
.wp-done .btn { margin-top: 1.25rem; }
.wp-done__hint { color: var(--c-text-muted); font-size: .9rem; }
.wp-done__more { margin-top: 1.25rem; font-size: .9rem; }
 
/* Kennzahlen (.stats): fehlender Mobile-Fallback fuehrte bei 3-4 festen Spalten
   zu horizontalem Overflow (lange Einzelwort-Labels erzwingen Spaltenbreite).
   Fallback greift auf allen Seiten; !important neutralisiert evtl. Inline-Spalten. */
.stats > * { min-width: 0; }
.stats__label { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 430px) { .stats { grid-template-columns: 1fr !important; gap: 1.5rem; } }
.section--ink h2, .section--ink h3 { color: var(--c-white); }

/* ggf. wiederherstellen */
.x-section--ink p { color: var(--c-white); }

.section-head { max-width: 64ch; margin-bottom: clamp(2rem, 4vw, 3.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { margin-top: 1.1rem; }
.section-head--center p { margin-inline: auto; }

/* Eyebrow */
.eyebrow {
  display: flex; align-items: center; gap: .55rem;
  margin-bottom: 1.1rem;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-wide); text-transform: uppercase;
  color: var(--c-turquoise-deep);
}
.eyebrow::before { display: none; }
.section--tint .eyebrow { color: var(--c-turquoise); }

/* ==========================================================================
   GETEILTES INTERAKTIONSSYSTEM
   --------------------------------------------------------------------------
   In v3 definierten .card, .ref-card, .persona, .portfolio__group, .wp-card,
   .starter-card und .kalk-tier jeweils eigene Hover-Übergänge mit leicht
   abweichenden Werten. Hier steht das Verhalten einmal — animiert wird
   ausschließlich transform/box-shadow/border-color/background.
   ========================================================================== */
.card, .ref-card, .persona, .portfolio__group, .wp-card,
.starter-card, .kalk-tier, .svc-card, .kb-link, .role-card, .svc-item {
  transition:
    transform var(--t-medium) var(--ease),
    box-shadow var(--t-medium) var(--ease),
    border-color var(--t-medium) var(--ease),
    background-color var(--t-medium) var(--ease);
  will-change: transform;
}

/* Hover-Zustände nur dort, wo es einen echten Zeiger gibt — sonst bleiben
   sie auf Touch-Geräten nach dem Antippen „kleben". */
@media (hover: hover) and (pointer: fine) {
  .card:hover, .ref-card:hover, .portfolio__group:hover, .persona:hover,
  .starter-card:hover, .svc-card:hover, .role-card:hover, .svc-item:hover {
    transform: translateY(var(--card-lift));
    box-shadow: var(--elev-3), var(--glow-turq);
    border-color: var(--card-bd-hover);
  }
  .wp-card:hover, .kb-link:hover { transform: translateY(-2px); border-color: var(--card-bd-hover); }
}

/* Tastaturbedienung: Der Stretched-Link (.link-more::after) legte den
   Fokusring in v3 auf den kleinen Link statt auf die Karte. Jetzt markiert
   die ganze Karte den Fokus. */
.card:focus-within, .ref-card:focus-within, .persona:focus-within,
.portfolio__group:focus-within, .role-card:focus-within, .svc-item:focus-within {
  border-color: var(--c-turquoise);
  box-shadow: var(--elev-3), 0 0 0 2px var(--p-a-turq-50);
}
.card:focus-within .link-more,
.ref-card:focus-within .link-more,
.persona:focus-within .link-more { color: var(--c-white); }

/* ---------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: 2.75rem;              /* 44px Mindest-Touchziel */
  border: 1px solid transparent; border-radius: var(--btn-radius);
  font: inherit; font-size: 1rem; font-weight: var(--fw-semibold); line-height: 1.2;
  letter-spacing: .005em;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.05em; height: 1.05em; }

.btn--primary { background: var(--c-red); color: var(--c-white); box-shadow: var(--elev-1); }
.btn--primary:hover { background: var(--c-red-hover); color: var(--c-white); box-shadow: var(--glow-red); }

.btn--ghost { background: transparent; color: var(--c-turquoise); border-color: var(--p-a-turq-35); }
.btn--ghost:hover { background: var(--p-a-turq-10); border-color: var(--c-turquoise); color: var(--c-white); }

.btn--ghost-light { background: transparent; color: var(--c-white); border-color: var(--p-a-white-30); }
.btn--ghost-light:hover { border-color: var(--c-turquoise); color: var(--c-turquoise); background: var(--p-a-turq-10); }

.btn--turquoise { background: var(--c-turquoise); color: var(--p-ink-900); font-weight: var(--fw-bold); box-shadow: var(--elev-1); }
.btn--turquoise:hover { background: var(--p-turq-200); color: var(--p-ink-900); box-shadow: 0 8px 26px rgba(164,216,222,.28); }

/* .btn--light stand auf 7 Seiten im Markup, hatte aber nie eine Regel — die
   Buttons rendern dort transparent auf transparentem Grund. Gleiche Optik
   wie .btn--white, damit die Bestandsseiten unverändert bleiben. */
.btn--white,
.btn--light { background: var(--p-a-white-12); color: var(--c-white); border: 1px solid var(--p-a-white-20); }
.btn--white:hover,
.btn--light:hover { background: var(--p-a-white-20); border-color: var(--p-a-white-30); color: var(--c-white); }

.btn--block { width: 100%; }

/* Ladezustand: verhindert unklares "hat sich was getan?" bei Netzwerklatenz
   und macht den Button waehrend eines laufenden fetch() nicht klickbar. */
.btn:disabled { cursor: not-allowed; }
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn--loading::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 1.15rem; height: 1.15rem;
  margin: -0.575rem 0 0 -0.575rem;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: var(--c-white);
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* -- OPTIMIERTER URL-LINK (Kombiniert mit Stretched-Link-Pattern) -- */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: var(--fw-semibold);
  color: var(--c-turquoise);
  width: max-content;
  margin-top: auto;
  padding: 0.6rem 0.9rem;
  min-height: 2.75rem;        /* 44px Mindest-Touchziel */
  border: 1px solid var(--p-a-turq-35);
  border-radius: var(--radius, 3px);
  text-decoration: none;
  /* Stretched-link: position:static bleibt, ::after übernimmt */
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

/* STRETCHED LINK — überspannt die gesamte parent-.card
   Funktioniert weil .card position:relative hat */
.link-more::after {
  content: "";
  position: absolute;
  inset: 0;           /* top/right/bottom/left: 0 — kurzform */
  z-index: 1;
  border-radius: inherit;
}

.link-more::before { display: none; }
/* Pfeil in .link-more — als .link-arrow Span im HTML,
   koexistiert mit ::after (Stretched-Link-Overlay) */
.link-arrow {
  display: inline-block;
  width: .52rem;
  height: .52rem;
  flex-shrink: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform var(--t-fast) var(--ease);
}
.link-more:hover .link-arrow,
.card:hover .link-more .link-arrow,
.ref-card:hover .link-more .link-arrow {
  transform: translateX(4px);
}


/* Hover-State: wird durch das ::after auf der ganzen Karte getriggert */
.card:hover .link-more {
  color: var(--c-white);
  border-color: rgba(164,216,222,.8);
}
/* -- STRETCHED-LINK: Kindelemente über Overlay halten ----------------------
   .link-more::after (z-index:1) deckt die Card ab — alle anderen Elemente
   müssen z-index:2 haben um klickbar/selektierbar zu bleiben.
   Ausnahme: andere <a>-Tags in der Card brauchen ebenfalls z-index:2. */
.card > *:not(.link-more):not(.ref-card__highlight),
.ref-card > *:not(.link-more):not(.ref-card__highlight) {
  position: relative;
  z-index: 2;
}
.card .link-more,
.ref-card .link-more {
  position: relative;
  z-index: 2; /* Text lesbar; ::after (absolut) liegt als Overlay darunter */
}


/* Das Link-Element selbst: z-index:2 damit Text lesbar/selektierbar bleibt,
   aber ::after (z-index:1) liegt darunter als unsichtbare Gesamtfläche */
.card .link-more,
.ref-card .link-more {
  position: relative;
  z-index: 2;
}


.micro-trust { margin-top: .9rem; font-size: var(--fs-small); color: var(--c-text-muted); }
.hero .micro-trust, .cta-band .micro-trust { color: rgba(255,255,255,.55); }

/* ----------------------------------------------------------------- HEADER *
 * Einer von vier Orten, an denen Glas eingesetzt wird (Header, Megamenü,
 * ref-card auf ink, ai-badge). Überall sonst: deckende Flächen.            */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(20,30,32,.82);
  -webkit-backdrop-filter: var(--blur-md) saturate(1.4);
  backdrop-filter: var(--blur-md) saturate(1.4);
  border-bottom: 1px solid var(--c-line);
}
/* Ohne backdrop-filter-Unterstützung deckend, sonst wird der Header unlesbar. */
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--c-ink); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--c-ink); }
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--header-h);
}
.nav__logo img { height: 2.05rem; width: auto; }

.nav__toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; background: none; border: 0; cursor: pointer;
}
.nav__toggle span { display: block; height: 2px; background: var(--c-white); transition: transform var(--t-medium) var(--ease), opacity var(--t-fast); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__list { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 2.1rem); }
.nav__list a:not(.btn) {
  color: var(--c-text); font-size: .9375rem;
  padding-block: .35rem; border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav__list a:not(.btn):hover, .nav__list a[aria-current="page"] {
  color: var(--c-white); border-bottom-color: var(--c-turquoise);
}
.nav__list .btn { padding: .6rem 1.3rem; font-size: .9375rem; }

@media (max-width: 920px) {
  .nav__toggle { display: flex; }
  .nav__list {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #1A2729; border-bottom: 1px solid var(--c-line);
    padding: .5rem var(--space-gutter) 1.25rem;
    display: none;
    /* Eigene Scrollhöhe, damit ausgeklapptes Menü (z. B. Leistungen) scrollbar bleibt */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav__list.is-open { display: flex; }
  .nav__list li { border-top: 1px solid var(--c-line); }
  .nav__list li:has(.btn) { border-top: 0; padding-top: 1rem; }
.nav__list a:not(.btn) {
  display: inline-block;
  color: var(--c-text); 
  font-size: .9375rem;
  padding-block: .35rem; 
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}  .nav__list .btn { width: 100%; }
}

/* ------------------------------------------------------------------- HERO */
.hero {
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: min(92vh, 60rem);
  padding-block: clamp(5rem, 10vw, 8rem);
  background: var(--c-ink); color: var(--c-white);
  overflow: hidden;
}
.hero--sub { min-height: min(72vh, 46rem); }

/* Startseiten-Hero: traegt zusaetzlich die vier .hero__proof-Kennzahlen und
   wurde damit rund 120px hoeher — auf einem maximierten 1080p-Fenster lief er
   dadurch ueber die Falz. Kompakteres Padding und engerer Kennzahlen-Abstand
   holen das zurueck. Bewusst als eigener Modifier statt an .hero/.hero__proof
   direkt: .hero__proof wird von 13 Servicepages mitbenutzt. */
.hero--home { padding-block: clamp(4rem, 8vw, 6.5rem); }
.hero--home .hero__proof { margin-top: 1.75rem; padding-top: 1.25rem; }

.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media > video, .hero__media > img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.7) contrast(.95) saturate(.88);
}

/* -- HERO-ILLUSTRATION "Signal-Routing-Matrix" (anwendungsbereiche.php) -----
   Illustration statt Foto: die Matrix aus dem Regieraum, sechs Signalwege fuer
   die sechs Abteilungen der Seite. Bewusst KEINE eigene Farbwelt — alle Werte
   stammen aus der bestehenden Turquoise-Alpha-Skala.
   Die Geometrie beginnt erst bei viewBox-x 820 von 1600, liegt also rechts der
   Textspalte; was dennoch dahinter liegt, daempft .hero__scrim ohnehin ab.
   Der <svg> faellt nicht unter die img/video-Regel oben, braucht Groesse und
   Positionierung daher selbst. Die Pulse-Animation wird von der globalen
   prefers-reduced-motion-Regel (siehe oben) automatisch stillgelegt. */
.hero-matrix {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
}
/* Tonwertumfang bewusst schmal: die Textspalte (.hero__inner, bis 60rem) ist
   auf schmaleren Screens fast so breit wie der Viewport — es gibt dort also
   keinen textfreien Bereich, in den die Grafik ausweichen koennte. Statt die
   Geometrie pro Breakpoint zu verschieben, ist die gesamte Illustration so
   gedaempft, dass kein Element mit dem Text konkurriert. Die AUSSAGE steckt im
   relativen Kontrast (aktiver vs. offener Kreuzpunkt), nicht in absoluter
   Helligkeit — der bleibt dabei vollstaendig erhalten.
   Struktur etwas angehoben, Leuchtpunkte deutlich zurueckgenommen. */
.hero-matrix__bus   { stroke: var(--p-a-turq-14); stroke-width: 1.5; }
.hero-matrix__line  { stroke: var(--p-a-turq-25); stroke-width: 1.5; }
.hero-matrix__cap   { fill: var(--p-a-turq-25); }
.hero-matrix__point { fill: none; stroke: var(--p-a-turq-25); stroke-width: 1.5; }
.hero-matrix__halo  { fill: var(--p-a-turq-14); }
.hero-matrix__on    { fill: var(--c-turquoise); fill-opacity: .5; }

/* -- HERO-ILLUSTRATIONEN der Anwendungsbereiche-Seiten ----------------------
   Schwestersystem zu .hero-matrix oben: sechs Rollen-Seiten teilen eine
   Bildsprache, die Varianten liegen in partials/hero-illu.php. Gleiche
   Grundsaetze — technische Zeichnung, Turquoise-Alpha-Skala aus dem Token-
   System, schmaler Tonwertumfang, damit nichts mit dem Text konkurriert.
   Der <svg> faellt nicht unter die img/video-Regel, braucht Groesse selbst. */
.hero-illu {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
}
.hero-illu__soft     { fill: none; stroke: var(--p-a-turq-14); stroke-width: 1.5; }
.hero-illu__line     { fill: none; stroke: var(--p-a-turq-25); stroke-width: 1.5; }
.hero-illu__dash     { fill: none; stroke: var(--p-a-turq-25); stroke-width: 1.5; stroke-dasharray: 9 8; }
.hero-illu__node     { fill: none; stroke: var(--p-a-turq-25); stroke-width: 1.5; }
.hero-illu__fill     { fill: var(--p-a-turq-18); }
.hero-illu__halo     { fill: var(--p-a-turq-14); }
.hero-illu__on       { fill: var(--c-turquoise); fill-opacity: .5; }
.hero-illu__onStroke { fill: none; stroke: var(--c-turquoise); stroke-opacity: .5; stroke-width: 2; }
/* Zweistufige Ruecknahme, gekoppelt an eine GEOMETRISCHE Schwelle statt an
   einen willkuerlichen Telefon-Breakpoint: 'slice' wird hoehengetrieben, sobald
   Breite < 1600 * Hero-Hoehe/900 — bei realistischen Hero-Hoehen also ab rund
   1024px. Ab da schneidet es seitlich und zieht die Grafik zwangslaeufig unter
   die Textspalte, die dort fast viewportbreit ist. Genau dann tritt sie zurueck. */
@media (max-width: 1024px) {
  .hero-illu { opacity: .6; }
}
@media (max-width: 640px) {
  .hero-illu { opacity: .65; }
}

/* Laufendes Signal: ein kurzer heller Abschnitt wandert den Signalweg hinab.
   dasharray-Luecke (620) ist groesser als die Linienlaenge (572), damit nie
   zwei Abschnitte gleichzeitig sichtbar sind. */
.hero-matrix__pulse {
  stroke: var(--c-turquoise); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 54 620;
  animation: hm-travel 9s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes hm-travel {
  0%   { stroke-dashoffset: 54;   opacity: 0; }
  12%  { opacity: .45; }
  74%  { opacity: .45; }
  100% { stroke-dashoffset: -626; opacity: 0; }
}
/* Zweistufig wie .hero-illu: ab ~1024px wird 'slice' hoehengetrieben, schneidet
   seitlich und zieht die Matrix unter die Textspalte. Ab da tritt sie zurueck. */
@media (max-width: 1024px) {
  .hero-matrix { opacity: .6; }
}
@media (max-width: 640px) {
  .hero-matrix { opacity: .65; }
}
.hero__media {
  background:
    radial-gradient(90rem 42rem at 85% 10%, rgba(164,216,222,.25), transparent 55%),
    radial-gradient(60rem 40rem at 10% 90%, rgba(30,60,68,.9), transparent 50%),
    #1E2A2C;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(110deg, rgba(8,11,13,.88) 25%, rgba(8,11,13,.68) 65%, rgba(8,11,13,.48)),
    radial-gradient(70rem 46rem at 20% 40%, rgba(8,11,13,.22), transparent 60%);
}
/* Mobile: .hero__inner ist bis 60rem breit, auf Telefonen also fast immer
   viewportbreit - der schraege 110deg-Verlauf oben wurde fuer eine breite
   Desktop-Buehne kalibriert, in der der Text nur die linke, dunkel gehaltene
   Haelfte belegt und rechts ein heller Bildstreifen frei bleibt. Auf
   Telefonbreite liegt der Text ueber der GESAMTEN Breite, der helle Streifen
   verschwindet komplett darunter - das Foto wirkt fast schwarz. Flacherer,
   vertikaler Verlauf plus schwaechere Filter-Abdunkelung geben einen
   erkennbaren Bildeindruck zurueck; object-position schiebt den sichtbaren
   Ausschnitt nach oben, wo bei Personenfotos meist das eigentliche Motiv
   sitzt (Cover-Crop schneidet sonst mittig und trifft selten den Kopf).
   Text-Shadow etwas verstaerkt, um die Lesbarkeit trotz hellerem Grund zu
   halten. */
@media (max-width: 640px) {
  .hero__media > video, .hero__media > img {
    object-position: 50% 30%;
    filter: brightness(.85) contrast(.95) saturate(.9);
  }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(8,11,13,.62) 0%, rgba(8,11,13,.74) 100%),
      radial-gradient(70rem 46rem at 20% 40%, rgba(8,11,13,.18), transparent 60%);
  }
  .hero h1 { text-shadow: 0 2px 24px rgba(0,0,0,.7); }
  .hero__sub { text-shadow: 0 1px 16px rgba(0,0,0,.65); }
}

.hero__inner { max-width: 60rem; }
.hero h1 { font-size: var(--fs-display); color: var(--c-white); text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.hero h1 em { font-style: normal; color: var(--c-turquoise); }
.hero h1 .outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.75); }
.hero__sub {
  margin-top: 1.6rem; max-width: 58ch;
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  color: rgba(255,255,255,.75);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* Status-Chip */
.status-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-bottom: 1.6rem; padding: .45rem 1rem;
  border: 1px solid rgba(164,216,222,.35); border-radius: var(--radius-pill);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-turquoise);
  background: rgba(164,216,222,.06);
}
.status-chip::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--c-red); box-shadow: 0 0 0 0 rgba(182,25,24,.6);
  animation: pulse 2.4s infinite;
}

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.5rem; translate: -50% 0;
  width: 1px; height: 3rem; background: rgba(255,255,255,.2); overflow: hidden;
}
.hero__scroll::after {
  content: ""; position: absolute; inset: 0; background: var(--c-turquoise);
  animation: scrollhint 2.2s var(--ease) infinite;
}

/* ---------------------------------------------------------------- MARQUEE */
.marquee {
  --marquee-speed: 25s;
  overflow: hidden;
  max-width: 100vw;
  padding-block: 1.1rem;
  background: linear-gradient(90deg, #141E20 0%, #1E2A2C 50%, #141E20 100%);
  border-block: 1px solid var(--c-line);
  color: var(--c-white);
  display: flex;
}

.marquee__track {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  width: max-content;
  animation: marquee-infinite var(--marquee-speed) linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track { 
  animation-play-state: paused; 
}

.marquee__group { 
  display: flex; 
  gap: clamp(1.5rem, 4vw, 3rem); 
  align-items: center; 
}

.marquee__group span {
  display: inline-flex; 
  align-items: center; 
  gap: clamp(1.5rem, 4vw, 3rem);
  font-size: clamp(.85rem, 2.2vw, 1.05rem);
  font-weight: var(--fw-light);
  letter-spacing: .08em; 
  text-transform: uppercase; 
  white-space: nowrap;
  color: rgba(255, 255, 255, .65);
}

.marquee__group span::after {
  content: "·"; 
  color: var(--c-turquoise); 
  opacity: .6;
  font-size: 1.2rem; 
  line-height: 1;
}

/* Endloser, ruckelfreier CSS-Loop */
@keyframes marquee-infinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* A11y / Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.5rem;
  }
  .marquee__group:last-child { 
    display: none; 
  }
}
/* -------------------------------------------------------------- TRUST BAR *
 * In v3 stand hier eine Regel und in der Startseite (damals cktv.php, heute
 * index.php) ein <style>-Block, der sie mit abweichenden Werten und
 * !important überschrieb. Jetzt nur noch hier.
 *
 * Die Logo-Dateien (assets/ref_logos/) sind farbig und für helle Flächen
 * gestaltet — ein Weiß-Silhouetten-Filter wie in v3/v4 ergibt hier keinen
 * Sinn mehr. Stattdessen bekommen sie ihre eigene helle "Glass"-Fläche
 * (.trust__panel) auf dem dunklen Sektionshintergrund: ein breiter,
 * heller Riegel mit weichem Weiß-Glow, der wie eine eigene Lichtquelle auf
 * --c-ink wirkt. Sobald die Logos umbrechen (schmale Screens), wird daraus
 * bewusst KEIN immer höherer Riegel — ab dort trägt jedes Logo stattdessen
 * seine eigene kleine helle Chip-Fläche, siehe Media Query unten. */
.trust {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-ink);
}
.trust__intro {
  margin-inline: auto; margin-bottom: var(--space-lg);
  max-width: 60ch; text-align: center;
  font-size: var(--fs-small); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-text-muted);
}

.trust__panel {
  /* Schmaler (weniger Padding) und transparenter als zuvor — die Fläche
     selbst tritt zurück, der Glow übernimmt das "Weiß". */
  background: linear-gradient(155deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  border: 1px solid rgba(255,255,255,.7);
  border-radius: clamp(1.25rem, 4vw, 2.25rem);
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.75rem, 4vw, 3rem);
  -webkit-backdrop-filter: var(--blur-md) saturate(140%);
  backdrop-filter: var(--blur-md) saturate(140%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.55),     /* heller Rand, "Glas"-Kante */
    0 0 50px rgba(255,255,255,.4),       /* reines Weiß, nah an der Kante */
    0 0 130px rgba(255,255,255,.22),     /* weiter Glow, strahlt in --c-ink aus */
    0 25px 55px rgba(0,0,0,.35);         /* erdet die Flaeche, sonst wirkt sie ausgeschnitten */
}

.trust__logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  padding: 0; margin: 0; list-style: none;
}
.trust__logos li { display: flex; align-items: center; justify-content: center; }

.trust__logos img {
  height: 2.5rem;
  width: auto;
  object-fit: contain;
  transition: transform var(--t-medium) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .trust__logos img:hover { transform: translateY(-2px) scale(1.05); }
}

/* Ab hier brechen 10 Logos zuverlässig auf mehrere Zeilen um — ein einzelner
   Glas-Riegel würde dabei nur immer höher statt breiter, und wirkt dann nicht
   mehr wie eine Bar. Deshalb: Panel-Optik aus, jedes Logo bekommt statt-
   dessen seine eigene kleine helle Fläche, unabhängig davon, wie der Umbruch
   fällt bleibt der Kontrast pro Logo garantiert. */
@media (max-width: 640px) {
  .trust__panel {
    background: none; border: 0; box-shadow: none; backdrop-filter: none;
    -webkit-backdrop-filter: none; padding: 0;
  }
  .trust__logos { gap: .65rem; }
  .trust__logos li {
    background: linear-gradient(155deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
    border: 1px solid rgba(255,255,255,.55);
    border-radius: var(--radius-md);
    padding: .6rem 1rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 10px 22px rgba(0,0,0,.3);
  }
  .trust__logos img { height: 1.65rem; }
}

/* ------------------------------------------------------------------ GRIDS */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 840px)  { .grid--2, .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .grid--4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ CARDS */
.card {
  position: relative;
  display: flex; flex-direction: column; gap: .9rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}   /* Hover/Transition: geteiltes Interaktionssystem */

.section--tint .card  { background: rgba(164,216,222,.06); border-color: rgba(164,216,222,.18); }
.section--ink .card   { background: rgba(164,216,222,.05); border-color: rgba(164,216,222,.12); }
.section--tint .card:hover, .section--ink .card:hover { border-color: rgba(164,216,222,.45); }

.card__kicker {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-turquoise-deep);
}
.card p { font-size: .9875rem; color: var(--c-text); }

.card__icon {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  background: rgba(164,216,222,.1);
  border: 1px solid rgba(164,216,222,.25);
  border-radius: var(--radius);
  color: var(--c-turquoise);
}
.card__icon .icon { width: 1.5rem; height: 1.5rem; }

.card__list { display: grid; gap: .5rem; font-size: .9375rem; color: var(--c-text); }
.card__list li { position: relative; padding-left: 1.15rem; }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .4rem; height: .4rem; background: var(--c-turquoise);
  border-radius: 50%;
}

/* Karten-Varianten */
.card--core    { border-top: 2px solid rgba(182,25,24,.6); }
.card--creative { border-top: 2px solid rgba(164,216,222,.5); }

.card__badge {
  align-self: flex-start; padding: .2rem .65rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
}
.card__badge--core    { background: rgba(182,25,24,.12); border: 1px solid rgba(182,25,24,.3); color: #E05A59; }
.card__badge--creative { background: rgba(164,216,222,.12); border: 1px solid rgba(164,216,222,.3); color: var(--c-turquoise); }

.card--step .card__num {
  font-size: 2.6rem; font-weight: var(--fw-light); line-height: 1;
  color: rgba(164,216,222,.4);
}

/* --------------------------------------------------------------- STORYLINE */
.timeline { position: relative; display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }
.timeline::before {
  content: ""; position: absolute; left: .52rem; top: .4rem; bottom: .4rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--c-turquoise), rgba(164,216,222,.15));
}
.timeline__item { position: relative; padding-left: 2.6rem; }
.timeline__item::before {
  content: ""; position: absolute; left: 0; top: .35rem;
  width: 1.0rem; height: 1.0rem; background: var(--c-turquoise);
  border-radius: 50%;
}
.timeline__kicker {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .15em; text-transform: uppercase; color: var(--c-turquoise-deep);
}
.timeline__item h3 { margin-top: .35rem; font-size: 1.45rem; font-weight: var(--fw-light); }
.timeline__item p { margin-top: .6rem; }

/* ----------------------------------------------------------------- FOTOS */
.photo {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
}
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.photo:hover img { transform: scale(1.045); }
.photo--43  { aspect-ratio: 4 / 3; }
.photo--169 { aspect-ratio: 16 / 9; }
.photo--45  { aspect-ratio: 4 / 5; }

.photo figcaption,
.photo .photo__caption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.25rem 1.15rem .85rem;
  background: linear-gradient(transparent, rgba(0,0,0,.80));
  color: var(--c-white); font-size: var(--fs-small);
}

/* Mosaik */
.mosaic {
  display: grid; gap: clamp(.75rem, 1.5vw, 1.15rem);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(8rem, 16vw, 13rem);
}
.mosaic .photo { border: 0; }
.mosaic .photo:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic .photo:nth-child(4) { grid-column: span 2; }

/* Video-Frame */
.video-frame { position: relative; overflow: hidden; border-radius: var(--radius); background: #141E20; border: 1px solid var(--c-line); }
.video-frame video, .video-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .88; }
.video-frame__hud {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1rem;
  background: linear-gradient(rgba(0,0,0,.3), transparent 30%, transparent 70%, rgba(0,0,0,.5));
}
.video-frame__row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.live-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .75rem; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2);
  color: var(--c-white); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .1em; text-transform: uppercase;
}
.live-chip::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--c-red); animation: pulse 1.6s infinite;
}
.hud-meta {
  color: rgba(255,255,255,.7); font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums; letter-spacing: .08em;
}
.vu { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.1rem; }
.vu i { width: 3px; background: var(--c-turquoise); animation: vu 1s ease-in-out infinite alternate; }
.vu i:nth-child(1) { height: 40%; animation-delay: -.2s; }
.vu i:nth-child(2) { height: 90%; animation-delay: -.5s; }
.vu i:nth-child(3) { height: 60%; animation-delay: -.1s; }
.vu i:nth-child(4) { height: 100%; animation-delay: -.7s; }
.vu i:nth-child(5) { height: 50%; animation-delay: -.35s; }
@keyframes vu { from { transform: scaleY(.35); } to { transform: scaleY(1); } }


/* ---------------------------------------------------------------- PERSONAS */
.persona {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.35rem 1.5rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}   /* Hover/Transition: geteiltes Interaktionssystem */
.persona .icon { flex: none; width: 1.6rem; height: 1.6rem; color: var(--c-turquoise); margin-top: .15rem; }
.persona h3 { font-size: 1.05rem; color: var(--c-white); }
.persona p { font-size: .9375rem; margin-top: .25rem; color: var(--c-text); }

/* --------------------------------------------------------------- KENNZAHLEN */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stats__value {
  font-size: clamp(2.4rem, 1.5rem + 2.8vw, 3.75rem);
  font-weight: var(--fw-light); line-height: 1.05; color: var(--c-white);
}
.stats__value span { color: var(--c-turquoise); }
.stats__label { margin-top: .5rem; font-size: var(--fs-small); color: var(--c-text-muted); }

/* ------------------------------------------------------------------ SPLIT */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--start { align-items: start; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; } }

.checklist { display: grid; gap: .85rem; }
.checklist li { position: relative; padding-left: 1.85rem; color: var(--c-text); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .28em;
  width: 1.1rem; height: 1.1rem;
  background: rgba(164,216,222,.1); border: 1px solid rgba(164,216,222,.3); border-radius: 50%;
}
.checklist li::after {
  content: ""; position: absolute; left: .32rem; top: .52em;
  width: .5rem; height: .28rem;
  border-left: 2px solid var(--c-turquoise); border-bottom: 2px solid var(--c-turquoise);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------- CTA-BAND *
 * Der Gradient endete in v3 bei #7ECAD2. Weißer Fließtext bei 65 % Deckkraft
 * erreichte darauf ~1.8:1. Der Verlauf bleibt als bewusster Höhepunkt, endet
 * aber im tieferen Türkis; der Text steht jetzt bei voller Deckkraft.       */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--grad-cta);
  border-block: 1px solid var(--c-line);
  color: var(--c-on-tint);
  padding-block: var(--space-xl);
}
/* Feine Lichtkante oben — trennt das Band von der Sektion darüber. */
.cta-band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--p-a-turq-50), transparent);
}
.cta-band__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-md);
}
.cta-band h2 { color: var(--c-on-tint); font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem); max-width: 32ch; }
.cta-band p { color: var(--c-on-tint-muted); margin-top: .4rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* -------------------------------------------------------------------- FAQ */
.faq { display: grid; border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0;
  font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--c-heading);
  cursor: pointer; list-style: none;
  transition: color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-turquoise); }

/* Plus/Minus als gezeichnetes Zeichen statt Textwechsel: der waagerechte
   Strich bleibt stehen, der senkrechte fährt auf null zusammen. */
.faq summary::after {
  content: ""; flex: none;
  width: .8rem; height: .8rem;
  color: var(--c-turquoise);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: background-size var(--t-medium) var(--ease);
}
.faq details[open] summary::after { background-size: 100% 1.5px, 1.5px 0%; }
.faq details > p { padding: 0 0 1.5rem; color: var(--c-text); max-width: 72ch; }

/* ------------------------------------------------------------ KONTAKT/FORM */
.contact-aside { display: grid; gap: 1.4rem; align-content: start; }
.contact-aside__item strong { display: block; color: var(--c-white); }

.form { display: grid; gap: 1.15rem; }
.form__field { display: grid; gap: .4rem; }
.form__field label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-white); }

.form input, .form select, .form textarea {
  width: 100%; padding: .85rem 1rem;
  min-height: 2.75rem;              /* 44px Mindest-Touchziel */
  font: inherit; color: var(--c-white);
  background: var(--field-bg);
  border: 1px solid var(--field-bd);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form input::placeholder, .form textarea::placeholder { color: var(--c-text-muted); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--field-bd-focus);
  box-shadow: var(--field-ring);
}
.form textarea { min-height: 8rem; resize: vertical; }

/* ------------------------------------------------------------- STICKY-CTA *
 * Blendet sich aus, sobald das Kontaktformular im Blick ist — dort ist der
 * Button redundant und verdeckt auf schmalen Screens Inhalt.               */
.sticky-cta {
  position: fixed; z-index: var(--z-sticky);
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--glow-red);
  transition: opacity var(--t-medium) var(--ease),
              transform var(--t-medium) var(--ease),
              visibility var(--t-medium);
}
.sticky-cta[data-hidden] {
  opacity: 0; visibility: hidden;
  transform: translateY(1rem) scale(.96);
  pointer-events: none;
}

/* ----------------------------------------------------------------- FOOTER */
.site-footer {
  background: var(--c-ink-deep);
  color: var(--c-text-muted);
  padding-block: var(--space-2xl) 2rem;
  font-size: var(--fs-small);
  border-top: 1px solid var(--c-line);
}
.site-footer a { color: var(--c-text); }
.site-footer a:hover { color: var(--c-turquoise); }

.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--c-line);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-grid h3 {
  color: var(--c-white); font-size: var(--fs-small); font-weight: var(--fw-semibold);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem;
}
.footer-grid ul { display: grid; gap: .6rem; }

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.75rem;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
/* Wirkt wie die Nachbar-<a>-Links, ist aber ein <button> ohne Ziel-URL —
   oeffnet stattdessen erneut das Cookie-Banner (siehe footer.php-Script). */
.footer-link-btn {
  font-family: inherit; font-size: inherit; color: var(--c-text);
  background: none; border: none; padding: 0; cursor: pointer;
}
.footer-link-btn:hover { color: var(--c-turquoise); }

/* ----------------------------------------------------------------- ICONS */
.icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------- SCROLL-REVEAL */
@media (prefers-reduced-motion: no-preference) {
  body[data-animate] .reveal {
    opacity: 0; transform: translateY(18px);
    transition: opacity .65s var(--ease), transform .65s var(--ease);
  }
  body[data-animate] .reveal.is-visible { opacity: 1; transform: none; }
  body[data-animate] .reveal[data-delay="1"] { transition-delay: .08s; }
  body[data-animate] .reveal[data-delay="2"] { transition-delay: .16s; }
  body[data-animate] .reveal[data-delay="3"] { transition-delay: .24s; }
}

/* ==========================================================================
   REFERENZEN-SEKTION & HIGHLIGHTS
   ========================================================================== */

/* Referenz-Spotlight-Karte — dunkel, türkis-akzentuiert */
.ref-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  border-top: 2px solid var(--p-a-turq-35);
}   /* Hover/Transition: geteiltes Interaktionssystem */

/* Auf section--ink: vom dunklen Sektionshintergrund abheben */
.section--ink .ref-card {
  background: rgba(20,30,32,.82);
  border-color: var(--c-line-strong);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
}
@media (hover: hover) and (pointer: fine) {
  .section--ink .ref-card:hover { background: rgba(32,46,50,.92); }
}
.ref-card__eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-turquoise-deep);
}
.ref-card__logo {
  display: flex; align-items: center;
  height: 1.75rem; font-size: 1.05rem; font-weight: var(--fw-semibold);
  color: var(--c-white); letter-spacing: -.02em;
}
/* p-Farbe in ref-card explizit setzen — überschreibt .section--ink p-Vererbung */
.ref-card p { color: var(--c-text); font-size: .9375rem; max-width: none; }
.section--ink .ref-card p { color: var(--c-text); }

.ref-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.ref-card__tag {
  padding: .2rem .65rem; border-radius: var(--radius-pill);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  background: rgba(164,216,222,.1);
  border: 1px solid rgba(164,216,222,.28);
  color: var(--c-turquoise);
}
.ref-card__highlight {
  /* position:absolute funktioniert nur wenn kein position:relative vom
     .ref-card > * Selektor überschrieben wird ? daher !important nötig */
  position: absolute !important;
  top: 0; right: 1.25rem;
  z-index: 3;
  padding: .35rem .85rem .5rem;
  background: var(--c-turquoise); color: #0D1F22;
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 0 0 4px 4px;
  white-space: nowrap;
  width: auto;                         /* verhindert volle Breite */
  pointer-events: none;
}

/* Technologie-Highlight-Box neben einer ref-card.
   Trug ihre Gestaltung in v3 vollständig als inline style. */
.ref-highlight-box {
  display: flex; flex-direction: column; gap: var(--space-sm);
  min-width: 0;
  padding: var(--card-pad);
  background: rgba(14,26,30,.85);
  border: 1px solid var(--c-line-strong);
  border-left: 3px solid var(--c-turquoise);
  border-radius: var(--radius);
}
.ref-highlight-box h3 { color: var(--c-heading); }

.ref-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.2rem, 3vw, 2.5rem); margin-top: 2rem;
}
.ref-logo {
  display: flex; align-items: center; justify-content: center;
  height: 2.4rem; min-width: 6rem; padding: .4rem 1rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  font-size: .875rem; font-weight: var(--fw-semibold); color: var(--c-text-muted);
  opacity: .7; filter: grayscale(1);
  transition: opacity var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ref-logo:hover { opacity: 1; filter: grayscale(0); border-color: var(--c-turquoise); color: var(--c-white); }

/* Logo-Leiste referenzen.php: gleiche helle "Glass"-Fläche wie die Trust Bar
   unter dem Hero (index.php, .trust__panel/.trust__logos) statt der dunklen
   .ref-logo-Boxen — die Referenz-Logos sind farbig/dunkel und brauchen eine
   helle Fläche für Kontrast. .ref-trust erlaubt Breite/Gap-Anpassungen für
   die höhere Logo-Anzahl (20 statt 10), ohne .trust__panel selbst anzufassen. */
.ref-trust .trust__logos { row-gap: 1.1rem; }

/* Bild-Platzhalter: solange kein PNG unter assets/ref_logos/ existiert, bleibt
   der Firmenname (.ref-logo__text) sichtbar. onload setzt is-loaded sobald
   das Bild geladen ist -> Text wird ausgeblendet, Logo ersetzt ihn. onerror
   entfernt das <img> komplett, siehe Chip-Regel für :not(:has(...)) unten. */
.ref-logo__img { display: none; }
.ref-logo__img.is-loaded { display: block; }
.ref-logo__img.is-loaded ~ .ref-logo__text { display: none; }
.ref-logo__text {
  font-size: .95rem; font-weight: var(--fw-semibold);
  color: var(--c-ink); letter-spacing: -.01em; white-space: nowrap;
}
/* Platzhalter ohne Bild bekommen eine eigene helle Chip-Fläche, damit nackter
   Text nicht verloren neben den Logo-Bildern auf der Glass-Fläche wirkt.
   Scoped auf .ref-trust (nur referenzen.php) — ohne dieses Prefix griff die
   Regel auch auf die normalen <li><img></li>-Logos im Hero von index.php,
   da die dort keine .ref-logo__img-Klasse tragen und :not(:has(...)) daher
   ebenfalls zutraf. */
.ref-trust .trust__logos li:not(:has(.ref-logo__img)) {
  background: linear-gradient(155deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-pill);
  padding: .5rem 1.1rem;
}

.industry-roll {
  display: flex; flex-wrap: wrap; gap: .55rem 1rem;
  margin-top: 1.5rem; padding: 1.5rem;
  background: rgba(164,216,222,.05);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.industry-roll span { font-size: var(--fs-small); color: var(--c-text-muted); white-space: nowrap; }
.industry-roll span::after { content: " ·"; margin-left: .35rem; opacity: .3; }
.industry-roll span:last-child::after { display: none; }

.clevel-band { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; margin-top: clamp(1.5rem,3vw,2.5rem); }
.clevel-item {
  flex: 1 1 14rem;
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.25rem;
  background: rgba(164,216,222,.06);
  border: 1px solid rgba(164,216,222,.15);
  border-radius: var(--radius);
}
.clevel-item strong { display: block; color: var(--c-white); font-size: .9375rem; }

.badge-hologram {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .25rem .75rem; border-radius: var(--radius-pill);
  background: rgba(164,216,222,.1);
  border: 1px solid rgba(164,216,222,.4);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  color: var(--c-turquoise); letter-spacing: .08em; text-transform: uppercase;
}
.badge-hologram::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--c-turquoise); box-shadow: 0 0 8px var(--c-turquoise);
}


/* -- FEHLENDE KLASSEN (Ergänzung) ------------------------------------------- */

/* CTA-Band Variante: dunkel-türkis statt Gradient */
.cta-band--ink {
  background: linear-gradient(160deg, #141E20 0%, #1E2A2C 100%);
  border-color: rgba(164,216,222,.15);
}

/* Zitat-Block */
.quote {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-left: 3px solid rgba(164,216,222,.4);
  background: rgba(164,216,222,.05);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.quote p {
  font-size: 1.0625rem; color: var(--c-white);
  font-weight: var(--fw-light); max-width: none;
}
.quote footer {
  margin-top: 1rem; font-size: var(--fs-small); color: var(--c-text-muted);
}

/* Timeline-Varianten */
.timeline__item--now h3 {
  color: var(--c-turquoise); font-weight: var(--fw-semibold); font-size: 1.3rem;
}
.timeline__item--now::before {
  background: var(--c-turquoise);
  box-shadow: 0 0 8px rgba(164,216,222,.5);
}
.timeline__item--origin::before { background: rgba(164,216,222,.4); }
.timeline__item--origin h3 { color: var(--c-text-muted); }

/* Formular-Datenschutz-Zeile */
.form__consent {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: var(--fs-small); color: var(--c-text);
}
.form__consent input {
  width: 1.15rem; height: 1.15rem; margin-top: .2rem;
  accent-color: var(--c-turquoise); flex: none;
}

/* Footer Brand-Spalte */
.footer-brand img { height: 1.75rem; margin-bottom: 1rem; }
.footer-brand p { max-width: 34ch; color: var(--c-text-muted); }

/* Optionales Formularfeld-Label */
.optional { font-weight: var(--fw-regular); color: var(--c-text-muted); }


/* ==========================================================================
   MEHRSTUFIGES FORMULAR (.mf-form)
   ========================================================================== */

.mf-form {
  width: 100%;
}

/* Fortschrittsbalken */
.mf-progress {
  height: 3px;
  background: rgba(164,216,222,.15);
  border-radius: 99px;
  margin-bottom: .6rem;
  overflow: hidden;
}
.mf-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #3A7080, var(--c-turquoise));
  border-radius: 99px;
  transition: width .4s var(--ease);
  width: 0%;
}
.mf-step-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 1.75rem;
}

/* Schritte: nur aktiver sichtbar */
.mf-step {
  display: none;
  animation: mf-in .28s var(--ease) both;
}
.mf-step.is-active { display: block; }

@keyframes mf-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.mf-step__title {
  font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem);
  font-weight: var(--fw-light);
  color: var(--c-white);
  margin-bottom: .65rem;
}
.mf-step__sub {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  margin-bottom: 1.75rem;
}

/* Themen-Kacheln (Schritt 1) */
.mf-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .65rem;
}
@media (max-width: 400px) { .mf-tiles { grid-template-columns: 1fr; } }
.mf-tile {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  color: var(--c-text);
  font: inherit;
  font-size: .9375rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.mf-tile .icon { flex: none; width: 1.15rem; height: 1.15rem; color: var(--c-turquoise); }
.mf-tile:hover {
  border-color: rgba(164,216,222,.45);
  background: rgba(164,216,222,.08);
  color: var(--c-white);
  transform: translateY(-2px);
}
.mf-tile.is-selected {
  border-color: var(--c-turquoise);
  background: rgba(164,216,222,.14);
  color: var(--c-white);
}

/* Zurück-Button */
.mf-back {
  background: none;
  border: none;
  color: var(--c-text-muted);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: 0;
  margin-bottom: 1.25rem;
  transition: color var(--t-fast) var(--ease);
}
.mf-back:hover { color: var(--c-turquoise); }

/* Topic-Badge (Schritt 2) */
.mf-topic-badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .85rem;
  margin-bottom: 1rem;
  background: rgba(164,216,222,.12);
  border: 1px solid rgba(164,216,222,.3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-turquoise);
}

/* Dynamische Qualifizierungsfragen */
.mf-dynamic { margin-bottom: 1.5rem; }

/* Einzige Abstandsquelle zwischen Fragen-Blöcken — bewusst hier statt als
   grid-gap auf einem Wrapper, weil der Kalkulator seine Fragen (#k-fields)
   in ein einfaches <div> ohne .mf-dynamic-Klasse rendert. Vorher hatten
   dessen Fragen dadurch 0px Abstand zueinander. */
.mf-question { margin-bottom: 1.75rem; }
.mf-question:last-child { margin-bottom: 0; }
/* Im Kalkulator groesserer Abstand als im Kontaktformular: hier stehen bis zu
   6 Fragen samt Hinweistext hintereinander, das braucht mehr Luft als die 3
   kurzen Formularschritte. #kalk-Praefix gibt genug Spezifitaet, um die
   Basisregel unabhaengig von der Position im Stylesheet zu schlagen. */
#kalk .mf-question { margin-bottom: 3rem; }
#kalk .mf-question:last-child { margin-bottom: 0; }

.mf-question__label {
  font-size: .9375rem;
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  margin-bottom: .75rem;
  max-width: none;
}
.mf-options {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: 100%;
}
.mf-option {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
}
/* radio UND checkbox: der Kalkulator nutzt Checkboxen fuer die
   Mehrfachauswahl "Zusatzoptionen", das Kontaktformular nur Radios. */
.mf-option input[type="radio"], .mf-option input[type="checkbox"] { display: none; }
.mf-option span {
  display: inline-block;
  max-width: 100%;
  padding: .45rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
  /* War weiße-space:nowrap — dadurch wurden lange Optionslabels (z. B.
     „Volles Launch-Paket (Opener, Templates, Schulung)") auf schmalen
     Phones unsichtbar über den Viewport-Rand hinaus abgeschnitten, statt
     umzubrechen. Jetzt bricht der Pill-Text bei Bedarf um. */
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}
.mf-option:hover span {
  border-color: rgba(164,216,222,.4);
  color: var(--c-white);
  background: rgba(164,216,222,.07);
}
.mf-option input[type="radio"]:checked + span,
.mf-option input[type="checkbox"]:checked + span {
  background: rgba(164,216,222,.18);
  border-color: var(--c-turquoise);
  color: var(--c-white);
}
/* Mehrfachauswahl bekommt ein Haekchen, damit sie sich sichtbar von der
   Einfachauswahl unterscheidet — sonst raet der Nutzer, ob er mehrere
   Optionen waehlen darf. */
.mf-option input[type="checkbox"] + span::before {
  content: "+ ";
  color: var(--c-turquoise);
  font-weight: var(--fw-bold);
}
.mf-option input[type="checkbox"]:checked + span::before { content: "\2713 "; }

/* Fehler-Markierung — die Meldung steht jetzt als eigenes Element direkt
   unter der Frage (.mf-question__error), nicht mehr als ::after am Label.
   Grund: ein echtes Element ist für Screenreader erreichbar und lässt sich
   ein- und ausblenden, ohne den Labeltext zu verändern. */
.mf-question--error .mf-option span {
  border-color: var(--p-a-red-45);
}
.mf-question__error {
  margin-top: .5rem;
  color: var(--c-danger);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
}
.mf-question__error[hidden] { display: none; }

/* Schritt 3: 2-spaltig für Name/Unternehmen */
.mf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0;
}
@media (max-width: 560px) { .mf-row { grid-template-columns: 1fr; } }

/* Ungültige Felder */
.mf-invalid {
  border-color: rgba(182,25,24,.6) !important;
  box-shadow: 0 0 0 3px rgba(182,25,24,.12) !important;
}

/* Erfolgs-Screen */
.mf-success {
  text-align: center;
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.mf-success__icon {
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  background: rgba(164,216,222,.15);
  border: 2px solid var(--c-turquoise);
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--c-turquoise);
}
.mf-success h3 { color: var(--c-white); font-size: 1.5rem; }
.mf-success p  { color: var(--c-text-muted); max-width: 36ch; }

/* WhatsApp-Button */
.whatsapp-float {
  position: fixed; bottom: 20px; left: 20px;
  background-color: #25d366; color: #fff;
  border-radius: 50px; text-align: center;
  box-shadow: 2px 2px 10px rgba(0,0,0,.35);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  text-decoration: none; padding: 10px 15px;
  font-family: var(--font-sans); font-size: 14px;
  transition: transform .2s ease-in-out, background-color .2s;
}
.whatsapp-float:hover { background-color: #1aab52; color: #fff; transform: scale(1.03); }
.whatsapp-icon { width: 24px; height: 24px; fill: white; margin-right: 8px; }

/* Inline Stats-Grid (3 Spalten) — auf Mobile umbrechen */
.stats-inline {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 640px) {
  .stats-inline {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ==========================================================================
   V4 — CONVERSION-ENHANCEMENTS (neue Gestaltungselemente)
   ========================================================================== */

/* -- Hero: Kennzahl-Chips unter den CTAs ----------------------------------- */
.hero__proof {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero__proof-item { display: flex; flex-direction: column; gap: .1rem; }
.hero__proof-value {
  font-size: 1.6rem; font-weight: var(--fw-light); color: var(--c-white);
  line-height: 1; letter-spacing: -.01em;
}
.hero__proof-value span { color: var(--c-turquoise); }
.hero__proof-label {
  font-size: var(--fs-micro); color: rgba(255,255,255,.6);
  letter-spacing: .04em;
}

/* -- EINORDNUNG: die drei Ebenen (Position 3 der Startseite) ----------------
   Spiegelt die drei .svc-tier-Koepfe des Leistungsblocks. Bewusst FLACHER
   gehalten als .role-card (kein Kartenhintergrund, nur eine Oberkante), weil
   die Rollen-Karten wenige Sektionen weiter unten sonst wie eine Wiederholung
   desselben Rasters wirken. Die Oberkante uebernimmt das Turquoise-Akzent-
   Prinzip der .svc-tier-Koepfe. */
.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

.pillar { padding-top: 1.25rem; border-top: 2px solid var(--p-a-turq-35); }
.pillar__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: .9rem;
  border-radius: var(--radius-sm);
  background: rgba(164,216,222,.1);
  border: 1px solid rgba(164,216,222,.25);
}
.pillar__icon .icon { width: 1.25rem; height: 1.25rem; color: var(--c-turquoise); }
.pillar__title {
  font-size: 1.25rem; font-weight: var(--fw-light);
  color: var(--c-heading); letter-spacing: -.01em;
}
.pillar__tag {
  margin-top: .2rem; font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-turquoise);
}
.pillar p:last-child { margin-top: .8rem; font-size: .9375rem; color: var(--c-text); }

/* -- PROBLEM-SEKTION (emotionaler Einstieg) --------------------------------
   .problem-grid/.problem-card werden von der Startseite nicht mehr genutzt
   (siehe Kommentar in index.php bei #einordnung), stehen aber weiterhin fuer
   die Servicepages zur Verfuegung. */
.problem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; } }
.problem-card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(160deg, rgba(182,25,24,.06), rgba(30,42,44,.4));
  border: 1px solid rgba(182,25,24,.2);
  border-radius: var(--radius);
  overflow: hidden;
}
.problem-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: linear-gradient(var(--c-red), transparent);
}
.problem-card__num {
  font-size: 2.75rem; font-weight: var(--fw-light);
  color: rgba(255,255,255,.9); line-height: 1; margin-bottom: .5rem;
}
.problem-card h3 { font-size: 1.1rem; color: var(--c-white); margin-bottom: .5rem; }
.problem-card p { font-size: .9375rem; color: var(--c-text); }
.problem-resolve {
  margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.5rem, 3vw, 2rem);
  background: rgba(164,216,222,.06);
  border: 1px solid rgba(164,216,222,.25);
  border-left: 3px solid var(--c-turquoise);
  border-radius: var(--radius);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.problem-resolve p { font-size: 1.0625rem; color: var(--c-white); font-weight: var(--fw-light); max-width: 60ch; }
.problem-resolve strong { color: var(--c-turquoise); font-weight: var(--fw-semibold); }

/* -- LEISTUNGEN: Bild-Hintergrund-Karten (visuell reicher) ----------------- */
.svc-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 15rem; padding: 1.5rem;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  isolation: isolate;
}   /* Hover/Transition: geteiltes Interaktionssystem */
.svc-card__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .3; transition: transform .7s var(--ease), opacity .4s var(--ease);
}
.svc-card:hover .svc-card__bg { transform: scale(1.06); opacity: .42; }
.svc-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,30,32,.45) 0%, rgba(20,30,32,.88) 70%, rgba(20,30,32,.96) 100%);
}
.svc-card__kicker {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-turquoise);
  margin-bottom: .5rem;
}
.svc-card h3 { color: var(--c-white); font-size: 1.2rem; margin-bottom: .4rem; }
.svc-card p { color: rgba(255,255,255,.8); font-size: .9rem; margin-bottom: .9rem; }
.svc-card .link-more {
  position: relative; z-index: 3;
  align-self: flex-start; border-color: rgba(164,216,222,.5);
}

/* -- PROZESS-SEKTION "So arbeiten wir" ------------------------------------- */
.process-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem);
  counter-reset: step;
}
@media (max-width: 860px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .process-steps { grid-template-columns: 1fr; } }
.process-step {
  position: relative; padding: 1.5rem;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); counter-increment: step;
}
.process-step::before {
  content: counter(step, decimal-leading-zero);
  display: block; font-size: 1.75rem; font-weight: var(--fw-light);
  color: var(--c-turquoise); margin-bottom: .75rem; letter-spacing: -.02em;
}
.process-step h3 { font-size: 1.05rem; color: var(--c-white); margin-bottom: .4rem; }
.process-step p { font-size: .875rem; color: var(--c-text); }
.process-step__connector {
  position: absolute; top: 2.4rem; right: -.75rem; z-index: 2;
  width: 1.5rem; height: 1px; background: rgba(164,216,222,.3);
}
@media (max-width: 860px) { .process-step__connector { display: none; } }

/* -- INLINE-CTA (Mid-Page Conversion-Anker) -------------------------------- */
.inline-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(110deg, rgba(164,216,222,.1), rgba(164,216,222,.03));
  border: 1px solid rgba(164,216,222,.3); border-radius: var(--radius);
}
.inline-cta__text { flex: 1 1 20rem; }
.inline-cta__text strong { display: block; color: var(--c-white); font-size: 1.0625rem; font-weight: var(--fw-semibold); margin-bottom: .2rem; }
.inline-cta__text span { color: var(--c-text-muted); font-size: .9rem; }

/* -- VIDEO-SLOT groß (16:9 Showcase) --------------------------------------- */
.video-showcase {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: var(--radius);
  border: 1px solid var(--c-line); background: #0B0F11;
  isolation: isolate;
}
.video-showcase img, .video-showcase video {
  width: 100%; height: 100%; object-fit: cover; opacity: .55;
}
.video-showcase__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center; padding: 2rem;
  background: linear-gradient(rgba(11,15,17,.3), rgba(11,15,17,.6));
}
.video-showcase__play {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: rgba(164,216,222,.15); border: 2px solid var(--c-turquoise);
  display: grid; place-items: center; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.video-showcase__play:hover { transform: scale(1.08); background: rgba(164,216,222,.28); }
.video-showcase__play svg { width: 1.75rem; height: 1.75rem; fill: var(--c-turquoise); stroke: none; margin-left: 4px; }
.video-showcase__label { color: var(--c-white); font-size: 1.05rem; font-weight: var(--fw-semibold); }
.video-showcase__sub { color: rgba(255,255,255,.65); font-size: .875rem; }

/* -- OFFENES FREITEXT-FELD im Formular (Schritt 2) ------------------------- */
.mf-textarea {
  width: 100%; padding: .8rem 1rem; margin-top: .5rem;
  font: inherit; color: var(--c-white);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  resize: vertical; min-height: 3.5rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.mf-textarea::placeholder { color: var(--c-text-muted); opacity: .8; }
.mf-textarea:focus {
  outline: none;
  border-color: var(--c-turquoise);
  box-shadow: 0 0 0 3px rgba(164,216,222,.18);
}

/* ==========================================================================
   PROJEKTKALKULATOR (kalkulator.html)
   Nutzt die mf-* Formularoptik; hier nur Ergebnis- & Zusatz-Styles.
   ========================================================================== */
/* .kalk-wrap entfiel mit dem zweispaltigen Kalkulator-Hero (.kalk-hero__inner). */

/* Hinweis-Kacheln für nicht kalkulierbare Services */
.mf-tile--info {
  opacity: .75; cursor: default;
  border-style: dashed;
}
.mf-tile--info:hover { transform: none; border-color: var(--c-line-strong); }
.mf-tile--info .mf-tile__hint {
  display: block; font-size: var(--fs-micro); color: var(--c-turquoise);
  margin-top: .3rem;
}

/* Ergebnis-Panel */
.kalk-result {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(150deg, rgba(164,216,222,.1), rgba(30,42,44,.3));
  border: 1px solid rgba(164,216,222,.35);
  border-radius: var(--radius);
}
.kalk-result__label {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-turquoise);
  margin-bottom: .4rem;
}
.kalk-result__range {
  font-size: clamp(1.9rem, 4.5vw, 2.75rem); font-weight: var(--fw-light);
  color: var(--c-white); line-height: 1.15; letter-spacing: -.02em;
}
.kalk-result__monthly {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--c-line);
}
.kalk-result__monthly .kalk-result__range { font-size: clamp(1.3rem, 3vw, 1.75rem); }

/* Aufschlüsselung */
.kalk-breakdown { margin-top: clamp(1.75rem, 3.5vw, 2.25rem); display: grid; gap: .75rem; }
.kalk-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem;
  padding: .75rem .9rem;
  background: rgba(20,30,32,.5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font-size: var(--fs-small);
}
.kalk-row span:first-child { color: var(--c-text); }
/* War white-space:nowrap — bei langen Fragen + langen Antworten (z. B.
   "Volles Launch-Paket (Opener, Templates, Schulung)") lief die Zeile auf
   schmalen Screens über den Viewport-Rand hinaus, weil flex-wrap fehlte
   UND der Wert nicht umbrechen durfte. Jetzt bricht die Antwort bei Bedarf
   auf eine eigene Zeile um, statt zu überlaufen. */
.kalk-row span:last-child { color: var(--c-white); text-align: right; }
@media (max-width: 480px) {
  .kalk-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .kalk-row span:last-child { text-align: left; font-weight: var(--fw-semibold); }
}

.kalk-note {
  margin-top: clamp(1.5rem, 3vw, 2rem); font-size: var(--fs-micro); color: var(--c-text-muted);
  line-height: 1.6;
}
.kalk-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 4vw, 2.5rem); }

/* -- KALKULATOR: Budgetklassen-Karten (3 Tiers) ---------------------------- */
.kalk-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: clamp(2rem, 4vw, 2.5rem);
}
@media (max-width: 860px) { .kalk-tiers { grid-template-columns: 1fr; } }
.kalk-tier {
  display: flex; flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 2.5vw, 1.75rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  position: relative;
}
.kalk-tier--featured {
  border-color: var(--c-turquoise);
  background: linear-gradient(160deg, rgba(164,216,222,.08), var(--c-surface));
  box-shadow: 0 0 40px rgba(164,216,222,.08);
}
.kalk-tier__flag {
  position: absolute; top: 0; right: 1rem;
  transform: translateY(-50%);
  padding: .25rem .75rem;
  background: var(--c-turquoise); color: var(--c-ink);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px;
}
.kalk-tier__name {
  font-size: 1.05rem; font-weight: var(--fw-semibold);
  color: var(--c-white); margin-bottom: .15rem;
}
.kalk-tier__tag { font-size: var(--fs-micro); color: var(--c-text-muted); margin-bottom: 1rem; }
.kalk-tier__price {
  font-size: 1.25rem; font-weight: var(--fw-light); color: var(--c-white);
  line-height: 1.25; letter-spacing: -.01em;
}
.kalk-tier__monthly { font-size: var(--fs-small); color: var(--c-turquoise); margin-top: .3rem; }
.kalk-tier__features {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--c-line);
  display: grid; gap: .45rem;
  font-size: var(--fs-small); color: var(--c-text);
}
.kalk-tier__features li { list-style: none; padding-left: 1.1rem; position: relative; }
.kalk-tier__features li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--c-turquoise);
}

/* -- ANWENDUNGSBEREICH-SEITEN: Use-Case-Karten mit Größenklassen ----------- */
.uc-size {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .7rem; margin-bottom: .75rem;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; border: 1px solid;
}
.uc-size--s { color: var(--c-turquoise); border-color: rgba(164,216,222,.4); background: rgba(164,216,222,.08); }
.uc-size--m { color: #E8C36A; border-color: rgba(232,195,106,.4); background: rgba(232,195,106,.08); }
.uc-size--l { color: #E88A6A; border-color: rgba(232,138,106,.4); background: rgba(232,138,106,.08); }
.uc-outcome {
  margin-top: .75rem; padding-top: .75rem;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small); color: var(--c-turquoise);
}
.uc-outcome strong { color: var(--c-turquoise); font-weight: var(--fw-semibold); }

/* Persona-Karten klickbar machen (Stretched-Link wie .card) */
.persona { position: relative; overflow: hidden; }
.persona > *:not(.link-more) { position: relative; z-index: 2; }
.persona .link-more { position: relative; z-index: 2; margin-top: 1.5em; }

/* ==========================================================================
   WISSENS-/RATGEBERSEITEN (SEO/AEO-Layer)
   ========================================================================== */
.kb { max-width: 50rem; margin-inline: auto; }
.kb--wide { max-width: 64rem; }

/* Brotkrumen */
.kb-crumb {
  display: flex; flex-wrap: wrap; gap: .4rem .55rem; align-items: center;
  font-size: var(--fs-micro); color: var(--c-text-muted); margin-bottom: 1rem;
}
.kb-crumb a { color: var(--c-turquoise); text-decoration: none; }
.kb-crumb a:hover { text-decoration: underline; }
.kb-crumb span[aria-hidden] { opacity: .5; }

/* Direktantwort (AEO: Antwort zuerst) */
.kb-answer {
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.6vw, 1.9rem);
  background: rgba(164,216,222,.08);
  border: 1px solid rgba(164,216,222,.28);
  border-left: 3px solid var(--c-turquoise);
  border-radius: var(--radius);
  margin: 1.4rem 0 1.9rem;
}
.kb-answer__label {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-turquoise); margin-bottom: .5rem;
}
.kb-answer p { font-size: 1.05rem; line-height: 1.65; color: var(--c-white); font-weight: var(--fw-light); }
.kb-answer p + p { margin-top: .7rem; }

/* Fließtext */
.kb-prose h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem); color: var(--c-white);
  font-weight: var(--fw-light); margin: 2.1rem 0 .7rem; letter-spacing: -.01em;
}
.kb-prose h3 {
  font-size: 1.08rem; color: var(--c-white);
  font-weight: var(--fw-semibold); margin: 1.5rem 0 .5rem;
}
.kb-prose p { margin-bottom: .95rem; line-height: 1.72; }
.kb-prose ul, .kb-prose ol { margin: 0 0 1.1rem 0; padding-left: 1.15rem; display: grid; gap: .45rem; }
.kb-prose li { line-height: 1.6; }
.kb-prose ul li::marker { color: var(--c-turquoise); }
.kb-prose ol li::marker { color: var(--c-turquoise); font-weight: 600; }
.kb-prose strong { color: var(--c-white); font-weight: var(--fw-semibold); }
.kb-prose a { color: var(--c-turquoise); }

/* Tabelle */
.kb-table { width: 100%; border-collapse: collapse; margin: 1.1rem 0 1.4rem; font-size: var(--fs-small); }
.kb-table th, .kb-table td {
  text-align: left; padding: .68rem .85rem;
  border-bottom: 1px solid var(--c-line);
}
.kb-table th { color: var(--c-white); font-weight: var(--fw-semibold); background: rgba(164,216,222,.07); }
.kb-table td { color: var(--c-text); }

/* Inhaltsverzeichnis */
.kb-toc {
  padding: 1.1rem 1.3rem; border: 1px solid var(--c-line);
  border-radius: var(--radius); background: var(--c-surface); margin: 1.5rem 0 2rem;
}
.kb-toc p {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-turquoise); margin-bottom: .6rem;
}
.kb-toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.kb-toc a { color: var(--c-text); font-size: var(--fs-small); }
.kb-toc a:hover { color: var(--c-turquoise); }

/* FAQ-Block */
.kb-faq { display: grid; gap: .8rem; margin: 1.3rem 0 1.8rem; }
.kb-faq__item {
  padding: 1rem 1.2rem; background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--radius);
}
.kb-faq__q { color: var(--c-white); font-weight: var(--fw-semibold); font-size: .98rem; margin-bottom: .35rem; }
.kb-faq__a { font-size: var(--fs-small); line-height: 1.65; color: var(--c-text); }

/* Weiterlesen-Kacheln */
.kb-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; margin-top: 1.4rem; }
.kb-link {
  display: block; padding: .95rem 1.1rem; text-decoration: none;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-turquoise-deep); border-radius: var(--radius);
}   /* Hover/Transition: geteiltes Interaktionssystem */
.kb-link__k { display: block; font-size: var(--fs-micro); color: var(--c-turquoise); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .25rem; }
.kb-link__t { display: block; color: var(--c-white); font-size: .95rem; font-weight: var(--fw-semibold); line-height: 1.35; }

/* Hub-Index */
.kb-index { display: grid; gap: 1.6rem; }
.kb-group h2 { font-size: 1.2rem; color: var(--c-white); font-weight: var(--fw-semibold); margin-bottom: .2rem; }
.kb-group > p { font-size: var(--fs-small); color: var(--c-text-muted); margin-bottom: .8rem; }
.kb-list { list-style: none; display: grid; gap: .45rem; }
.kb-list a { color: var(--c-text); font-size: .95rem; text-decoration: none; display: inline-flex; gap: .5rem; }
.kb-list a:hover { color: var(--c-turquoise); }
.kb-list a::before {
  content: "";
  flex: 0 0 auto;
  width: 0; height: 0;
  margin-top: .38rem;
  border-style: solid;
  border-width: .3rem 0 .3rem .45rem;
  border-color: transparent transparent transparent var(--c-turquoise-deep);
}

.kb-meta { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--c-line); font-size: var(--fs-micro); color: var(--c-text-muted); }

/* Wissens-Hubs (Fragen/Ratgeber/Glossar): Schnellnavigation + Kategorie-Karten */
.kb-quicknav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.kb-quicknav a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.05rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  color: var(--c-on-ink-muted); font-size: var(--fs-small); font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.kb-quicknav a:hover { border-color: var(--c-turquoise); color: var(--c-white); background: rgba(164,216,222,.12); }
.kb-quicknav a span { opacity: .6; font-weight: var(--fw-regular); }

.kb-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: 1.5rem; }
.kb-cat { scroll-margin-top: 6rem; }
.kb-cat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.kb-cat__count {
  flex: none; padding: .25rem .7rem; border-radius: var(--radius-pill);
  background: rgba(164,216,222,.1); border: 1px solid rgba(164,216,222,.28);
  color: var(--c-turquoise); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .04em; white-space: nowrap;
}
.kb-cat h2 { font-size: 1.3rem; margin: .1rem 0 .35rem; }
.kb-cat > p { color: var(--c-text-muted); font-size: .93rem; margin-bottom: .3rem; }
.kb-cat .kb-list { padding-top: .5rem; border-top: 1px solid var(--c-line); }
.kb-cat .kb-list a { font-size: .93rem; }

/* Ratgeber-Übersicht: Leitfaden-Karten mit Schritt-Badge */
.kb-guide__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.kb-guide__steps {
  flex: none; padding: .25rem .7rem; border-radius: var(--radius-pill);
  background: rgba(164,216,222,.1); border: 1px solid rgba(164,216,222,.28);
  color: var(--c-turquoise); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .04em; white-space: nowrap;
}
.kb-guide h2 { font-size: 1.15rem; margin: .1rem 0 .1rem; }
.kb-guide > p { font-size: .93rem; }

/* ==========================================================================
   WISSENS-BAUSTEINE (visuelle Ebene über dem Fließtext)
   --------------------------------------------------------------------------
   Die Detailseiten waren zuvor reiner Prosatext. Diese Komponenten heben das
   heraus, was ein fachfremder Leser zuerst braucht: Größenordnungen, Warnungen,
   Entscheidungen und Reihenfolgen. Alle Bausteine leben innerhalb .kb-prose
   und überschreiben dessen Absatz-/Listenabstände bewusst.
   ========================================================================== */

/* -- Kopf-Metazeile: Lesezeit, Prüfstand, Art der Angaben ------------------ */
.kb-facts { display: flex; flex-wrap: wrap; gap: .45rem 1.15rem; margin-top: 1.15rem; }
.kb-facts span { display: inline-flex; align-items: center; gap: .42rem; font-size: var(--fs-micro); color: var(--c-on-ink-muted); letter-spacing: .03em; }
.kb-facts .icon { width: .95rem; height: .95rem; color: var(--c-turquoise); flex: none; }

/* -- „In 30 Sekunden": Kernaussagen vor dem Fließtext ---------------------- */
.kb-key {
  margin: 0 0 1.9rem; padding: 1.15rem 1.35rem;
  background: rgba(164,216,222,.06);
  border: 1px solid rgba(164,216,222,.25); border-radius: var(--radius);
}
.kb-key__t {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-turquoise);
}
.kb-key__t .icon { width: 1.05rem; height: 1.05rem; }
.kb-key ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.kb-key li { position: relative; padding-left: 1.7rem; font-size: .97rem; line-height: 1.58; color: var(--c-white); font-weight: var(--fw-light); }
.kb-key li::before {
  content: ""; position: absolute; left: .18rem; top: .46em;
  width: .58rem; height: .3rem;
  border-left: 2px solid var(--c-turquoise); border-bottom: 2px solid var(--c-turquoise);
  transform: rotate(-45deg);
}

/* -- Hinweiskästen: Warnung / Praxistipp / Faustregel ---------------------- */
.kb-note {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem;
  margin: 1.5rem 0 1.7rem; padding: 1.05rem 1.25rem;
  background: rgba(164,216,222,.05);
  border: 1px solid var(--c-line); border-left: 3px solid var(--c-turquoise);
  border-radius: var(--radius);
}
.kb-note > .icon { width: 1.35rem; height: 1.35rem; color: var(--c-turquoise); margin-top: .12rem; flex: none; }
.kb-note__t { color: var(--c-white); font-weight: var(--fw-semibold); font-size: .96rem; margin-bottom: .3rem; }
.kb-note p { margin: 0 0 .55rem; font-size: .94rem; line-height: 1.62; color: var(--c-text); }
.kb-note p:last-child { margin-bottom: 0; }
.kb-note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.kb-note li { position: relative; padding-left: 1.1rem; font-size: .93rem; line-height: 1.55; color: var(--c-text); }
.kb-note li::before { content: ""; position: absolute; left: 0; top: .58em; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; opacity: .5; }
.kb-note--warn { border-left-color: #E05A59; background: rgba(182,25,24,.07); }
.kb-note--warn > .icon { color: #E05A59; }
.kb-note--rule { border-left-color: var(--c-turquoise-deep); background: rgba(255,255,255,.035); }

/* -- Glossar-Chip: markiert erklärte Fachbegriffe im Fließtext ------------- */
.kb-prose a.kb-term {
  color: var(--c-white); text-decoration: none;
  border-bottom: 1px dotted rgba(164,216,222,.6);
}
.kb-prose a.kb-term:hover { color: var(--c-turquoise); border-bottom-color: var(--c-turquoise); }
.kb-term::after {
  content: "i";
  display: inline-flex; align-items: center; justify-content: center;
  width: .95em; height: .95em; margin-left: .3em; vertical-align: .3em;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: .6em; font-style: italic; font-weight: var(--fw-bold);
  opacity: .7;
}

/* -- Preisspannen als Balken auf gemeinsamer Skala ------------------------- */
.kb-range { display: grid; gap: .75rem; margin: 1.35rem 0 .8rem; }
.kb-range__row { display: grid; grid-template-columns: 10.5rem 1fr auto; gap: .9rem; align-items: center; }
.kb-range__label { font-size: .91rem; color: var(--c-white); font-weight: var(--fw-semibold); }
.kb-range__track {
  position: relative; height: .72rem; border-radius: var(--radius-pill);
  background: rgba(164,216,222,.09); border: 1px solid rgba(164,216,222,.15);
}
.kb-range__bar {
  position: absolute; top: -1px; bottom: -1px;
  left: var(--from); right: calc(100% - var(--to));
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--c-turquoise-deep), var(--c-turquoise));
}
.kb-range__val { font-size: .88rem; color: var(--c-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kb-legend { font-size: var(--fs-micro); color: var(--c-text-muted); margin: 0 0 1.5rem; }
@media (max-width: 660px) {
  .kb-range__row { grid-template-columns: 1fr auto; row-gap: .4rem; }
  .kb-range__label { grid-row: 1; grid-column: 1; }
  .kb-range__val   { grid-row: 1; grid-column: 2; }
  .kb-range__track { grid-row: 2; grid-column: 1 / -1; }
}

/* -- Stufen-/Modellkarten statt Tabellenzeilen ----------------------------- */
.kb-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: 1rem; margin: 1.35rem 0 1.7rem; }
.kb-tier {
  padding: 1.15rem 1.25rem; background: var(--c-surface);
  border: 1px solid var(--c-line); border-top: 2px solid var(--c-turquoise-deep);
  border-radius: var(--radius);
}
.kb-tier__n { color: var(--c-white); font-size: 1.05rem; font-weight: var(--fw-semibold); }
.kb-tier__p { margin: .15rem 0 .8rem; color: var(--c-turquoise); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.kb-tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.kb-tier li { position: relative; padding-left: 1.3rem; font-size: .88rem; line-height: 1.5; color: var(--c-text); }
.kb-tier li::before {
  content: ""; position: absolute; left: .1rem; top: .42em;
  width: .5rem; height: .27rem;
  border-left: 2px solid var(--c-turquoise); border-bottom: 2px solid var(--c-turquoise);
  transform: rotate(-45deg);
}

/* -- Direktvergleich: zwei Optionen gegenübergestellt ---------------------- */
.kb-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; margin: 1.4rem 0 1.8rem; }
.kb-vs__side {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1.25rem; background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--radius);
}
.kb-vs__x {
  align-self: center; padding: .38rem .8rem; border-radius: var(--radius-pill);
  background: rgba(164,216,222,.08); border: 1px solid var(--c-line);
  color: var(--c-turquoise); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .1em; text-transform: uppercase;
}
.kb-vs__head { display: flex; align-items: center; gap: .75rem; }
.kb-vs__head .card__icon { width: 2.4rem; height: 2.4rem; flex: none; }
.kb-vs__head .card__icon .icon { width: 1.2rem; height: 1.2rem; }
.kb-prose .kb-vs__head h3 { margin: 0; font-size: 1.1rem; }
.kb-vs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.kb-vs li { position: relative; padding-left: 1.4rem; font-size: .91rem; line-height: 1.52; color: var(--c-text); }
.kb-vs__pro li::before {
  content: ""; position: absolute; left: .1rem; top: .4em;
  width: .55rem; height: .3rem;
  border-left: 2px solid var(--c-turquoise); border-bottom: 2px solid var(--c-turquoise);
  transform: rotate(-45deg);
}
.kb-vs__con li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: .62rem; height: 2px; background: #E05A59; }
.kb-vs__best {
  margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--c-line);
  font-size: .92rem; line-height: 1.55; color: var(--c-white);
}
.kb-vs__best strong { color: var(--c-turquoise); }
@media (max-width: 840px) {
  .kb-vs { grid-template-columns: 1fr; }
  .kb-vs__x { justify-self: center; }
}

/* -- Bewertungsbalken und Preisniveau in Tabellen -------------------------- */
.kb-tablewrap { overflow-x: auto; margin: 1.1rem 0 1.4rem; }
.kb-tablewrap .kb-table { margin: 0; }
.kb-meter {
  display: inline-block; position: relative; overflow: hidden;
  width: 3.2rem; height: .4rem; margin-right: .55rem; vertical-align: .06em;
  background: rgba(164,216,222,.16); border-radius: var(--radius-pill);
}
.kb-meter::before {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--v, 3) / 5 * 100%);
  background: linear-gradient(90deg, var(--c-turquoise-deep), var(--c-turquoise));
  border-radius: inherit;
}
.kb-cost { color: var(--c-turquoise); font-weight: var(--fw-semibold); letter-spacing: .1em; }
.kb-cost span { opacity: .3; }

/* -- Entscheidungshilfe: Wenn … dann ------------------------------------- */
.kb-decide { display: grid; gap: .55rem; margin: 1.35rem 0 1.7rem; }
.kb-decide__row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: .95rem; align-items: center;
  padding: .85rem 1.1rem; background: rgba(164,216,222,.04);
  border: 1px solid var(--c-line); border-radius: var(--radius);
}
.kb-decide__if { font-size: .92rem; line-height: 1.5; color: var(--c-text); }
.kb-decide__then { font-size: .92rem; line-height: 1.5; color: var(--c-white); font-weight: var(--fw-semibold); }
.kb-decide .icon { width: 1.15rem; height: 1.15rem; color: var(--c-turquoise); flex: none; }
@media (max-width: 660px) {
  .kb-decide__row { grid-template-columns: auto 1fr; gap: .5rem .7rem; }
  .kb-decide__if { grid-column: 1 / -1; }
}

/* -- Schemazeichnungen (Inline-SVG, keine Bilddateien) --------------------- */
.kb-figure {
  margin: 1.6rem 0 1.8rem; padding: 1.3rem;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.kb-figure svg { display: block; width: 100%; height: auto; }
.kb-figure figcaption { margin-top: .95rem; padding-top: .85rem; border-top: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-text-muted); line-height: 1.55; }
.kb-figure__key { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem .9rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.kb-figure__key li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; font-size: .87rem; line-height: 1.45; color: var(--c-text); }
.kb-figure__key b {
  display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: .05rem;
  background: rgba(164,216,222,.14); border: 1px solid rgba(164,216,222,.4); border-radius: 50%;
  color: var(--c-turquoise); font-size: .7rem; font-weight: var(--fw-bold);
}
/* Zeichnungs-Primitive — einheitliche Linienoptik für alle Schemata */
.kb-figure .s-room { fill: rgba(164,216,222,.035); stroke: rgba(164,216,222,.38); stroke-width: 1.5; }
.kb-figure .s-dash { fill: none; stroke: rgba(164,216,222,.22); stroke-width: 1.5; stroke-dasharray: 5 5; }
.kb-figure .s-obj  { fill: rgba(164,216,222,.12); stroke: rgba(164,216,222,.55); stroke-width: 1.5; }
.kb-figure .s-acc  { fill: rgba(164,216,222,.55); stroke: none; }
.kb-figure .s-fig  { fill: rgba(182,25,24,.55); stroke: #E05A59; stroke-width: 1.5; }
.kb-figure .s-ray  { fill: none; stroke: rgba(255,255,255,.32); stroke-width: 1.5; stroke-linecap: round; }
.kb-figure .s-dim  { fill: none; stroke: var(--c-turquoise); stroke-width: 1.2; stroke-dasharray: 3 3; }
.kb-figure .s-txt  { fill: rgba(255,255,255,.82); font-size: 13px; font-weight: 600; }
.kb-figure .s-sub  { fill: rgba(255,255,255,.5); font-size: 11.5px; }
.kb-figure .s-dimt { fill: var(--c-turquoise); font-size: 11.5px; font-weight: 600; }
.kb-figure .s-num  { fill: rgba(164,216,222,.16); stroke: rgba(164,216,222,.55); stroke-width: 1.2; }
.kb-figure .s-numt { fill: var(--c-turquoise); font-size: 11px; font-weight: 700; text-anchor: middle; }
/* Bildflächen: aktiv leuchtend (s-led) vs. ausgewaschen (s-scr) */
.kb-figure .s-led  { fill: rgba(164,216,222,.55); stroke: var(--c-turquoise); stroke-width: 1.5; }
.kb-figure .s-scr  { fill: rgba(164,216,222,.09); stroke: rgba(164,216,222,.4); stroke-width: 1.5; }
.kb-figure .s-hi   { fill: rgba(255,255,255,.8); }
.kb-figure .s-lo   { fill: rgba(255,255,255,.14); }
.kb-figure .s-cone { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.16); stroke-width: 1; }
.kb-figure .s-shadow { fill: rgba(0,0,0,.5); stroke: none; }
.kb-figure .s-warn { fill: none; stroke: #E05A59; stroke-width: 1.5; }
.kb-figure .s-warnf { fill: rgba(182,25,24,.5); stroke: #E05A59; stroke-width: 1.5; }
.kb-figure .s-warnt { fill: #E05A59; font-size: 11.5px; font-weight: 600; }
.kb-figure .s-grid { fill: none; stroke: rgba(164,216,222,.45); stroke-width: 1; }

/* ============================================================ MEGAMENÜ
   Ausklappbares Leistungs-Panel im Header. Nur Icon + Text, sehr schlicht.
   Desktop: absolutes Vollbreiten-Panel unter dem Header (Hover/Klick).
   Mobil:   inline als Akkordeon im Hamburger-Menü.
   ------------------------------------------------------------------- */
/* --header-h steht im Token-Block ganz oben. */
html { scroll-padding-top: calc(var(--header-h) + 1rem); }

.nav__item--mega { display: flex; align-items: center; }

.nav__mega-toggle {
display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; 
  font-size: .9375rem; 
  line-height: inherit;
  color: var(--c-text);
  padding-block: .35rem; border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav__mega-toggle:hover,
.nav__mega-toggle[aria-expanded="true"] {
  color: var(--c-white); border-bottom-color: var(--c-turquoise);
}
.nav__caret {
  width: .8rem; height: .8rem; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-fast) var(--ease);
}
.nav__mega-toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.mega { position: absolute; inset: 100% 0 auto 0; z-index: var(--z-mega);
  background: rgba(16,24,26,.94);
  -webkit-backdrop-filter: var(--blur-lg) saturate(1.3);
  backdrop-filter: var(--blur-lg) saturate(1.3);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--elev-4);
}
@supports not (backdrop-filter: blur(1px)) { .mega { background: var(--c-ink-deep); } }
.mega[hidden] { display: none; }
.mega__inner {
  display: grid; grid-template-columns: minmax(0,1fr) 15rem;
  gap: 2.5rem; padding-block: 1.75rem;
}
.mega__eyebrow {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .15em; text-transform: uppercase; color: var(--c-turquoise-deep);
  margin-bottom: 1rem;
}
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1.25rem; }
.mega__item {
  display: grid; grid-template-columns: 1.5rem 1fr; column-gap: .8rem;
  padding: .7rem .75rem; border-radius: var(--radius); text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.mega__item:hover { background: var(--c-turquoise-soft); }
.mega__item .icon { grid-row: span 2; width: 1.4rem; height: 1.4rem; color: var(--c-turquoise); margin-top: .15rem; }
.mega__name { color: var(--c-white); font-size: .95rem; line-height: 1.3; }
.mega__item:hover .mega__name { color: var(--c-turquoise); }
.mega__desc { color: var(--c-text-muted); font-size: .8rem; line-height: 1.4; }

.mega__col--rail { border-left: 1px solid var(--c-line); padding-left: 2.5rem; }
.mega__link {
  display: flex; align-items: center; gap: .7rem; padding: .6rem 0;
  color: var(--c-text); font-size: .9375rem; text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.mega__link .icon { width: 1.2rem; height: 1.2rem; color: var(--c-turquoise); flex: none; }
.mega__link:hover { color: var(--c-white); }

/* -------- Mobil: Megamenü inline als Akkordeon -------- */
@media (max-width: 920px) {
  .nav__item--mega { display: block; }
  .nav__mega-toggle {
    width: 100%; justify-content: space-between; display: flex;
    padding: .9rem 0; border-bottom: 0;
  }
  .mega { position: static; inset: auto; background: transparent;
    border: 0; box-shadow: none; }
  .mega__inner { display: block; width: 100%; padding: 0 0 .75rem; }
  .mega__grid { grid-template-columns: 1fr; }
  .mega__item { padding: .6rem 0; }
  .mega__eyebrow { margin-top: .5rem; }
  .mega__col--rail {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--c-line); margin-top: .5rem; padding-top: .5rem;
  }
}

/* ==================================================== LEISTUNGEN 3x3 + PORTFOLIO
   Dezente Hervorhebung der Kernfelder (Glow), Conversion-Kacheln,
   Portfolio-Überblick und beautified Referenz-„Client-Roll".
   --------------------------------------------------------------------------- */

/* Kernfelder: dezenter Glow statt Bildhintergrund */
.card--featured { box-shadow: var(--shadow-glow); }
.section--tint .card--featured {
  background: rgba(164,216,222,.11);
  border-color: rgba(164,216,222,.40);
}
.section--tint .card--featured:hover { border-color: var(--c-turquoise); }
.card--featured .card__icon {
  background: rgba(164,216,222,.18);
  border-color: rgba(164,216,222,.45);
}

/* Conversion-Kacheln im Leistungs-Grid */
.section--tint .card--cta {
  justify-content: center;
  background: #0E1A1E;
  border-color: rgba(164,216,222,.30);
}
.card--cta h3 { color: var(--c-white); }
.card--cta p  { color: rgba(255,255,255,.72); }
.card--cta .btn { align-self: flex-start; margin-top: .35rem; }
.section--tint .card--cta-alt { border-color: rgba(182,25,24,.45); }
.section--tint .card--cta:hover { border-color: var(--c-turquoise); }
.section--tint .card--cta-alt:hover { border-color: var(--c-red); }

/* Portfolio-Überblick: drei Ebenen */
.portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 840px) { .portfolio { grid-template-columns: 1fr; } }
.portfolio__group {
  display: flex; flex-direction: column; gap: .75rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-top: 2px solid var(--c-turquoise);
  border-radius: var(--radius);
}   /* Hover/Transition: geteiltes Interaktionssystem */
.portfolio__head { display: flex; align-items: center; gap: .7rem; }
.portfolio__head .icon { width: 1.45rem; height: 1.45rem; color: var(--c-turquoise); flex: none; }
.portfolio__head h3 { font-size: 1.15rem; }
.portfolio__tag {
  color: var(--c-turquoise-deep); font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
}
.portfolio__group > p:not(.portfolio__tag) { font-size: .9375rem; color: var(--c-text); }
.portfolio__fields { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.portfolio__fields a {
  font-size: var(--fs-small); color: var(--c-text);
  padding: .3rem .8rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.portfolio__fields a:hover { color: var(--c-white); border-color: var(--c-turquoise); background: rgba(164,216,222,.08); }

/* Referenz-„Client-Roll": Firmennamen als dezente Pills */
.client-roll { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }
.client-roll__label {
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-turquoise-deep);
  margin-bottom: 1.25rem;
}
.client-roll__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .65rem;
}
.client-roll__list li {
  font-size: .9rem; color: var(--c-text); white-space: nowrap;
  padding: .45rem 1rem;
  background: rgba(164,216,222,.05);
  border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.client-roll__list li:hover { color: var(--c-white); border-color: var(--c-turquoise); background: rgba(164,216,222,.10); }
.client-roll__more { border-style: dashed !important; color: var(--c-text-muted) !important; }

/* ==========================================================================
   KALKULATOR — EINSTIEGSPAKETE (Starter-Karten)
   ========================================================================== */
/* ==========================================================================
   KALKULATOR — HERO (zweispaltig mit Illustration)
   Bewusst flach gehalten: der Kalkulator soll ohne Scrollen angeschnitten
   sein. Deshalb steht hier nur die Kurzfassung der Einstiegspakete als
   horizontale Leiste — die ausfuehrlichen Karten folgen UNTER dem Rechner.
   ========================================================================== */
.kalk-hero { padding-block: clamp(4.5rem, 7vw, 5.5rem) clamp(2rem, 3.5vw, 3rem); }
.kalk-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* Eine Stufe kleiner als --fs-h1: in der schmaleren Textspalte braeuchte die
   Display-Groesse drei Zeilen und schoebe den Rechner unter die Falz. */
.kalk-hero h1 { font-size: var(--fs-h2); }
.kalk-hero__lead {
  margin-top: 1rem; max-width: 52ch;
  color: var(--c-on-ink-muted);
}
.kalk-hero__lead strong { color: var(--c-turquoise); font-weight: var(--fw-semibold); }
.kalk-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

.kalk-hero__strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem;
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
}
.kalk-hero__strip-label {
  font-size: var(--fs-nano); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-text-muted);
}
.kalk-hero__strip ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.kalk-hero__strip a {
  display: inline-block; padding: .3rem .8rem;
  font-size: var(--fs-nano); color: var(--c-text); text-decoration: none;
  background: rgba(164,216,222,.05);
  border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.kalk-hero__strip a b { color: var(--c-turquoise); font-weight: var(--fw-semibold); }
.kalk-hero__strip a:hover { border-color: var(--c-turquoise); background: rgba(164,216,222,.12); color: var(--c-white); }

/* -- Illustration: drei Budgetspannen auf einer Achse ---------------------- */
/* max-width begrenzt zugleich die Hoehe der Grid-Zeile: die Grafik ist mit
   460:336 breiter als hoch, 26rem ergeben ~304 px — knapp unter der Hoehe der
   Textspalte, damit sie den Rechner nicht nach unten druckt. */
.kalk-hero__art { justify-self: end; width: 100%; max-width: 26rem; }
.kalk-art { display: block; width: 100%; height: auto; }
.kalk-art__title {
  font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-semibold);
  fill: var(--c-white);
}
.kalk-art__label { font-family: var(--font-sans); font-size: 13px; fill: var(--c-text-muted); }
.kalk-art__label--on { fill: var(--c-turquoise); font-weight: var(--fw-semibold); }
.kalk-art__axis { font-family: var(--font-sans); font-size: 11px; fill: var(--c-text-faint); }
.kalk-art__rule { stroke: rgba(164,216,222,.18); stroke-width: 1; }
.kalk-art__grid line { stroke: rgba(164,216,222,.10); stroke-width: 1; stroke-dasharray: 2 6; }
.kalk-art__track { fill: rgba(164,216,222,.07); }
.kalk-art__bar {
  fill: url(#kaBar);
  transform-box: fill-box; transform-origin: left center;
  animation: kalkBarIn .7s var(--ease) backwards;
  animation-delay: var(--d, 0s);
}
.kalk-art__bar--featured { filter: drop-shadow(0 0 10px rgba(164,216,222,.45)); }
@keyframes kalkBarIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

@media (max-width: 900px) {
  /* Auf schmalen Screens weg: dort zaehlt jeder Pixel, den der Kalkulator
     frueher sichtbar wird. Die Grafik ist Beiwerk, keine Information. */
  .kalk-hero__inner { grid-template-columns: 1fr; }
  .kalk-hero__art { display: none; }
}

/* Feste 3 Spalten (3 x 2 bei sechs Karten). auto-fit hatte bei 1240 px fuenf
   Spalten a ~215 px erzeugt — zu schmal fuer die Stichpunktlisten, jede zweite
   Zeile brach mitten im Begriff um. Mit 3 Spalten sind es ~389 px pro Karte. */
.starter-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 900px)  { .starter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .starter-grid { grid-template-columns: 1fr; } }

.starter-card {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: clamp(1.75rem, 3.5vw, 2.25rem);
  background: rgba(164,216,222,.05);
  border: 1px solid rgba(164,216,222,.14);
  border-radius: var(--radius);
}   /* Hover/Transition: geteiltes Interaktionssystem */

.starter-card__name { font-size: 1rem; font-weight: var(--fw-semibold); color: var(--c-white); }

.starter-card__price {
  margin-top: .5rem;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: var(--fw-light);
  color: var(--c-white); letter-spacing: -.01em;
}
.starter-card__price span { font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--c-text-muted); }

.starter-card__use { margin-top: 1rem; font-size: var(--fs-small); color: var(--c-white); }

.starter-card__list {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
  display: grid; gap: .65rem;
  font-size: var(--fs-small); color: var(--c-text);
}
.starter-card__list li { list-style: none; padding-left: 1.1rem; position: relative; }
.starter-card__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--c-turquoise);
}

.starter-card__up {
  margin-top: auto; padding-top: 1.25rem;
  font-size: var(--fs-micro); color: var(--c-turquoise-deep);
  line-height: 1.6;
}

/* ==========================================================================
   KALKULATOR — HINWEIS-BOXEN
   .kalk-band ist die getönte Hinweisbox (Schritt 1: Einordnung des
   Kalkulators, Schritt 3: Spannen-Disclaimer). Das frühere Mitarbeiterband-
   Gate inkl. .kalk-band__pill* und .mf-tiles.is-locked ist entfallen: die
   Preise hängen jetzt an Projektfaktoren, nicht mehr an der Firmengröße.
   ========================================================================== */
.kalk-band {
  padding: 1.35rem 1.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.25rem);
  background: rgba(164,216,222,.06);
  border: 1px solid rgba(164,216,222,.25);
  border-radius: var(--radius);
}
.kalk-band__hint {
  margin-top: .25rem; margin-bottom: 1rem;
  font-size: var(--fs-small); color: var(--c-text-muted);
}
/* Titel innerhalb einer Hinweisbox */
.kalk-band__title {
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  color: var(--c-white); margin-bottom: .35rem;
}

/* Empfehlungs-/Kontexthinweise (Schritt 2 + Schritt 3) */
.kalk-band__note {
  margin-top: .75rem; margin-bottom: 1.75rem; padding-top: .75rem;
  border-top: 1px dashed var(--c-line);
  font-size: var(--fs-small); color: var(--c-turquoise);
}

/* Spannen-Disclaimer im Ergebnis: bewusst wärmer als die Türkis-Hinweise,
   damit er nicht als weiterer Servicehinweis überlesen wird. */
.kalk-band--range {
  background: rgba(232,195,106,.07);
  border-color: rgba(232,195,106,.3);
}
.kalk-band--range .kalk-band__title { color: #E8C36A; }

/* "ab X €"-Hinweis in den Service-Kacheln (Schritt 1) */
.mf-tile { flex-wrap: wrap; }
.mf-tile__typical {
  flex-basis: 100%;
  margin-top: .3rem; padding-left: calc(1.15rem + .75rem);
  font-size: var(--fs-micro); font-weight: var(--fw-regular); color: var(--c-turquoise);
}

/* ==========================================================================
   KALKULATOR — "ERGEBNIS SENDEN"-PANEL
   Gleicher Kartenkörper wie .kalk-band, aber eigene Klasse: hier steckt ein
   interaktives Formular drin, keine reine Hinweisbox.
   ========================================================================== */
.kalk-send {
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
  padding: 1.5rem 1.75rem;
  background: rgba(164,216,222,.05);
  border: 1px solid rgba(164,216,222,.2);
  border-radius: var(--radius);
}
.kalk-send__title { font-size: 1rem; font-weight: var(--fw-semibold); color: var(--c-white); margin-bottom: .35rem; }
.kalk-send__hint { font-size: var(--fs-small); color: var(--c-text-muted); margin-bottom: 1.25rem; }
.kalk-send .form { position: relative; } /* Bezugsrahmen fuer den absolut positionierten Honeypot */
/* .form setzt display:grid, .mf-success display:flex — beides Autorenregeln,
   die das native [hidden] (UA-Stylesheet, display:none) im Kaskaden-Ursprung
   IMMER schlagen, unabhaengig von Spezifitaet. Ergebnis ohne diese Zeile:
   das per JS gesetzte hidden-Attribut hat keinerlei sichtbare Wirkung — das
   Formular UND die Erfolgsmeldung waeren gleichzeitig sichtbar. Nur fuer
   die beiden hier per JS umgeschalteten IDs erzwungen, damit .form/.mf-success
   im Kontaktformular (partials/kontakt.php) und auf danke.php unangetastet
   bleiben. */
#k-send-form[hidden], #k-send-success[hidden] { display: none !important; }
/* Erfolgs-Meldung hier kompakter als auf danke.php — passt in die Karte statt
   eine ganze Sektion zu fuellen. */
.kalk-send .mf-success { padding: 1rem 0 0; }
.kalk-send .mf-success__icon { width: 2.75rem; height: 2.75rem; font-size: 1.2rem; }
.kalk-send .mf-success h3 { font-size: 1.15rem; }

/* ==========================================================================
   KALKULATOR — ZURÜCK-BUTTON besser sichtbar + Abstand zur Ergebnis-Zeile
   ========================================================================== */
.mf-back {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(164,216,222,.05);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  color: var(--c-text);                 /* statt --c-text-muted: bessere Lesbarkeit */
  font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: .55rem 1.1rem;
  margin-bottom: 1.25rem;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.mf-back:hover { color: var(--c-white); border-color: var(--c-turquoise); background: rgba(164,216,222,.12); }
.mf-back:focus-visible { outline: 2px solid var(--c-turquoise); outline-offset: 2px; }

/* Zurück + Primary-CTA nebeneinander: eigener Abstand nach oben + saubere Spaltenbreiten
   (löst zu wenig Abstand zu den Kalkulatorangaben + macht Zurück nicht mehr gleich breit
   wie der Primary-Button gestreckt) */
#kalk .mf-row {
  margin-top: 2rem;
  align-items: center;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
}
@media (max-width: 560px) {
  #kalk .mf-row { grid-template-columns: 1fr; gap: .75rem; }
}

/* ==========================================================================
   MOBILE-OVERFLOW: defensive Ergänzung
   html zusätzlich zu body absichern; „clip" statt „hidden" erhält position:sticky
   (siehe Projekt-Konvention: overflow-x:hidden nur auf body, nie auf html).
   ========================================================================== */
html { overflow-x: clip; }

/* ==========================================================================
   KI-KENNZEICHNUNG (Art. 50 Abs. 4 EU AI Act) — Bild-Badges
   Nutzt die offiziellen, kostenlosen EU-Icons:
   https://digital-strategy.ec.europa.eu/de/policies/eu-icons-labelling-ai-generated-content
   Wichtig: Muss klar erkennbar sein — kein unsichtbares Mini-Wasserzeichen.
   ========================================================================== */

/* An jeden Bild-Container anhängen, der noch kein position:relative hat */
.ai-figure { position: relative; }

.ai-badge {
  position: absolute;
  z-index: 5;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .26rem .55rem .26rem .35rem;
  background: rgba(20, 30, 32, .78);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-pill, 999px);
  color: #fff;
  font-size: .75rem;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: .02em;
  line-height: 1;
  pointer-events: none; /* rein informativ — blockiert keine Klicks/Links auf dem Bild */
}
.ai-badge img { height: .85rem; width: auto; flex: none; display: block; }
.ai-badge__text { white-space: nowrap; }

/* ── Standard-Darstellung: NUR das offizielle EU-Label (.ai-badge--bare) ──
   Die Grafik bringt ihren eigenen Hintergrund (Kreis/Kasten) und den
   eingebrannten Schriftzug schon mit — unsere Pille entfällt komplett,
   kein Hintergrund, kein Rahmen von uns. Größe bewusst deutlich über der
   früheren Icon-Pille: das Label muss aus sich heraus lesbar sein, ohne
   dass eine eigene Fläche zusätzlichen Kontrast liefert. Seitenverhältnis
   ist NICHT einheitlich (Level 1 "AI" ist quadratisch/rund, "AI GENERATED"
   / "AI MODIFIED" sind als Grafik gut dreimal so breit wie hoch) — deshalb
   feste Höhe + width:auto, nie eine feste Breite. */
.ai-badge--bare {
  background: none; border: none; padding: 0; backdrop-filter: none;
}
.ai-badge--bare img { height: 2.25rem; width: auto; }
.ai-badge--bare .ai-badge__text { display: none; }

/* Positionen (Standard-Empfehlung: untere rechte Ecke) */
.ai-badge--bottom-right { bottom: .5rem; right: .5rem; }
.ai-badge--bottom-left  { bottom: .5rem; left: .5rem; }
.ai-badge--top-right    { top: .5rem;    right: .5rem; }
.ai-badge--top-left     { top: .5rem;    left: .5rem; }

/* ── Alternative: eigene Pille um das transparente Icon (opaqueSvg=false) ──
   Nur noch relevant, wenn explizit die alte Optik gewünscht ist. compact
   darin: nur Icon ohne sichtbaren Text. Text bleibt für Screenreader über
   aria-label auf dem Wrapper erhalten — display:none betrifft nur die
   visuell doppelte Kopie. */
.ai-badge--compact .ai-badge__text { display: none; }
.ai-badge--compact { padding: .3rem; }
.ai-badge--compact img { height: .8rem; }

@media (max-width: 480px) {
  .ai-badge { font-size: .68rem; padding: .24rem .5rem .24rem .3rem; }
  .ai-badge img { height: .78rem; width: auto; }
  .ai-badge--bare img { height: 1.9rem; }
  .ai-badge--compact { padding: .26rem; }
  .ai-badge--compact img { height: .72rem; }
}

/* ==========================================================================
   v4 — SERVICE-BLOCK
   --------------------------------------------------------------------------
   Ersetzt auf der Startseite die frühere Doppelung aus „Serviceportfolio"
   (3 Gruppen) und dem 7-Karten-Raster. Die drei Ebenen bleiben als
   Gliederung erhalten, die sieben Geschäftsfelder stehen kompakt darunter.
   ========================================================================== */
.svc-tiers { display: grid; gap: var(--space-xl); }

.svc-tier { display: grid; gap: var(--space-md); }

/* Kopfzeile einer Ebene: Icon, Titel, Merksatz, Zähler. */
.svc-tier__head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .5rem var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--c-line);
}
.svc-tier__icon {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  align-self: center;
  background: var(--p-a-turq-10);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  color: var(--c-turquoise);
}
.svc-tier__icon .icon { width: 1.2rem; height: 1.2rem; }
.svc-tier__title { font-size: var(--fs-h3); color: var(--c-heading); margin-right: .25rem; }
.svc-tier__tag {
  color: var(--c-turquoise-deep); font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
}
.svc-tier__count {
  margin-left: auto;
  font-size: var(--fs-micro); color: var(--c-text-muted);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Die Felder selbst: je ein Satz, der den Anwendungsfall trägt. */
.svc-items { display: grid; gap: var(--space-sm); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .svc-items { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-items { grid-template-columns: 1fr; } }

.svc-item {
  position: relative;
  display: grid; grid-template-columns: 1.5rem 1fr;
  column-gap: var(--space-xs); row-gap: .3rem;
  align-content: start;
  padding: var(--space-md) var(--space-md) calc(var(--space-md) - .15rem);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
}
.svc-item .icon {
  grid-row: span 3; width: 1.35rem; height: 1.35rem;
  color: var(--c-turquoise); margin-top: .15rem;
}
.svc-item__name {
  color: var(--c-heading); font-size: 1.0625rem;
  font-weight: var(--fw-semibold); line-height: var(--lh-snug);
}
.svc-item__use {
  color: var(--c-text); font-size: var(--fs-small);
  line-height: 1.55; max-width: 42ch;
}
/* Anwendungsfall-Zeile: was der Kunde damit konkret tut. */
.svc-item__for {
  margin-top: .15rem;
  color: var(--c-turquoise-deep); font-size: var(--fs-micro);
  letter-spacing: .01em;
}
.svc-item__for strong { color: var(--c-turquoise); font-weight: var(--fw-semibold); }

/* Ganze Kachel klickbar, Text bleibt markierbar. */
.svc-item__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc-item__link { color: inherit; }
.svc-item:hover .svc-item__name { color: var(--c-turquoise); }

/* Abschluss des Blocks: die beiden Conversion-Kacheln. */
.svc-close {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md); margin-top: var(--space-xl);
}
@media (max-width: 780px) { .svc-close { grid-template-columns: 1fr; } }

/* ==========================================================================
   v4 — ROLLEN-EINSTIEG
   --------------------------------------------------------------------------
   „Enterprise Gateway"-Schritt: Selbstzuordnung nach Rolle. Führt auf die
   bestehenden Anwendungsbereich-Seiten.
   ========================================================================== */
.role-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 940px) { .role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .role-grid { grid-template-columns: 1fr; } }

.role-card {
  position: relative;
  display: flex; flex-direction: column; gap: .5rem;
  padding: var(--space-md);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  border-left: 2px solid var(--p-a-turq-35);
}
.role-card__head { display: flex; align-items: center; gap: .65rem; }
.role-card__head .icon { width: 1.35rem; height: 1.35rem; color: var(--c-turquoise); flex: none; }
.role-card__role {
  color: var(--c-heading); font-size: 1rem;
  font-weight: var(--fw-semibold); line-height: var(--lh-snug);
}
.role-card p { font-size: var(--fs-small); color: var(--c-text); max-width: 40ch; }
.role-card__go {
  margin-top: auto; padding-top: .75rem;
  min-height: 2.5rem;         /* Die ganze Karte ist klickbar (::after),
                                 der Label-Bereich bleibt trotzdem großzügig. */
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--c-turquoise); font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.role-card__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.role-card__go .link-arrow { transition: transform var(--t-fast) var(--ease); }
.role-card:hover .role-card__go .link-arrow { transform: translateX(4px); }
.role-card:hover { border-left-color: var(--c-turquoise); }

/* ==========================================================================
   v4 — REFERENZ-SPOTLIGHT
   --------------------------------------------------------------------------
   Ersetzt den vollständig inline gestylten Hologramm-Block auf der Startseite.
   ========================================================================== */
.ref-spotlight {
  display: grid; 
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-lg) var(--space-xl);
  align-items: center;
  padding: var(--space-lg);
  background: rgba(14,26,30,.85);
  border: 1px solid var(--c-line-strong);
  border-left: 3px solid var(--c-turquoise);
  border-radius: var(--radius);
}
@media (max-width: 860px) { .ref-spotlight { grid-template-columns: 1fr; } }

.ref-spotlight h3 { color: var(--c-heading); margin-top: .6rem; }
.ref-spotlight__lead {
  color: var(--c-on-ink-muted); margin-top: .65rem;
  max-width: 48ch; margin-bottom: var(--space-md);
}
.ref-spotlight__facts { display: flex; flex-wrap: wrap; gap: .75rem; }
.ref-spotlight__facts .clevel-item { flex: 1 1 14rem; min-width: min(15rem, 100%); }

.ref-spotlight__media {
  position: relative; 
  width: 100%; 
  aspect-ratio: 16 / 10;
  background: var(--p-a-white-08);
  border: 1px solid var(--p-a-white-12);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ref-spotlight__media img,
.ref-spotlight__media video { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

/* --- NEU: Layout-Anpassungen für den unteren Bereich --- */

/* Client-Roll (Referenznennungen) über die volle Grid-Breite strecken */
.ref-spotlight > .client-roll {
  grid-column: 1 / -1;
  width: 100%;
}

/* Zitat-Container über die volle Breite strecken und vertikal stapeln */
.ref-spotlight > .grid.grid--2 {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column; 
  gap: var(--space-md); 
  width: 100%;
}

/* Einzelne Zitate auf volle Breite setzen */
.ref-spotlight > .grid.grid--2 > .quote {
  width: 100%;
}

/* ==========================================================================
   v4 — BROTKRUMEN & QUERVERWEISE (Leistungsseiten)
   ========================================================================== */
.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem;
  margin-bottom: var(--space-sm);
  font-size: var(--fs-micro); color: var(--c-on-ink-muted);
}
.crumb a { color: var(--p-a-white-70); }
.crumb a:hover { color: var(--c-turquoise); }
.crumb span[aria-hidden] { opacity: .45; }
.crumb [aria-current] { color: var(--c-turquoise); }

.crosslinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 860px) { .crosslinks { grid-template-columns: 1fr; } }

/* ==========================================================================
   v4 — UTILITIES
   --------------------------------------------------------------------------
   Ersetzen die verstreuten inline style="…"-Attribute. Bewusst knapp
   gehalten: nur was mehr als zweimal gebraucht wird.
   ========================================================================== */
.u-mt-sm { margin-top: var(--space-sm); }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mb-md { margin-bottom: var(--space-md); }
.u-mb-lg { margin-bottom: var(--space-lg); }
.u-mb-xl { margin-bottom: var(--space-xl); }

.u-measure      { max-width: 58ch; }
.u-measure-wide { max-width: 68ch; }
.u-center       { text-align: center; }
.u-muted        { color: var(--c-text-muted); }
.u-on-ink       { color: var(--c-on-ink-muted); }

/* Zentrierte Fließtext-Zeile unter einem Raster (Deeplinks o. Ä.). */
.u-footnote {
  text-align: center; margin-top: var(--space-md);
  color: var(--c-text-muted); font-size: var(--fs-small);
  max-width: none;
}

.link-row {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md);
  align-items: center;
}
/* Innerhalb einer Textzeile stehende Variante: kein margin-top:auto, damit
   sie nicht ans Ende eines Flex-Containers rutscht. */
.link-more--inline { 
  margin-top: 0; 
  position: relative; /* Zwingt den ::after-Layer in die eigenen Grenzen */
}

/* Einleitungssatz unter einer Sektionsüberschrift. */
.section-lead {
  font-size: var(--fs-lead);
  color: var(--c-text);
  max-width: 62ch;
}

/* ==========================================================================
   v4 — NACHGEZOGENE KLASSEN
   --------------------------------------------------------------------------
   Diese Klassen standen in v3 im Markup, hatten aber nie eine Regel
   (.link-row, .link-more--inline, .section-lead) oder ersetzen jetzt
   inline gesetzte Styles.
   ========================================================================== */

/* Titel innerhalb einer Referenzkarte */
.ref-card__title {
  color: var(--c-heading);
  font-size: 1.15rem;
  margin-top: .25rem;
}

/* Hervorgehobene Tag-Variante (auf den Leistungsseiten 9× inline gesetzt) */
.ref-card__tag--strong {
  background: var(--c-turquoise-soft);
  border-color: var(--c-turquoise);
  color: var(--c-white);
}

/* Reihe hervorgehobener Tags unterhalb eines Referenztextes */
.ref-tags {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: var(--space-sm);
}

/* Zitat mit eigenem Abstand nach oben, schmaler gesetzt */
.quote--spaced { margin-top: var(--space-2xl); max-width: 46rem; }

/* Neutralisierte Logo-Pill (ohne eigene Rahmenfarbe) */
.ref-logo--plain { border-color: var(--c-line); }

/* Kontakt-Seitenspalte */
.contact-aside__alt {
  margin-left: .5rem;
  color: var(--c-turquoise);
  font-size: var(--fs-small);
}
.contact-aside__actions {
  display: flex; flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  align-items: flex-start;
}
.contact-aside__actions .btn { width: 100%; max-width: 22rem; justify-content: flex-start; }

/* ==========================================================================
   v4 — MAPS-CONSENT
   --------------------------------------------------------------------------
   Ersetzt den vollständig inline gestylten Consent-Block. Der Rahmen bleibt
   nach dem Laden erhalten, nur der Inhalt wird zur Karte.
   ========================================================================== */
.maps-consent {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .5rem;
  width: 100%; min-height: 25rem;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--elev-2);
  overflow: hidden;
}
.maps-consent__icon {
  width: 2.5rem; height: 2.5rem;
  color: var(--c-turquoise);
  margin-bottom: var(--space-2xs);
}
.maps-consent__title {
  font-size: 1.0625rem; font-weight: var(--fw-semibold);
  color: var(--c-heading);
}
.maps-consent__text {
  max-width: 46ch;
  margin-bottom: var(--space-md);
  font-size: var(--fs-small); line-height: 1.6;
  color: var(--c-text-muted);
}
.maps-consent__text a { text-decoration: underline; }

/* Geladener Zustand: Rahmen bleibt, Inhalt ist die Karte. */
.maps-consent.is-loaded { display: block; padding: 0; min-height: 0; }
.maps-consent.is-loaded iframe {
  display: block; border: 0; width: 100%; min-height: 25rem;
}

* ==========================================================================
   TEAM — Ansprechpartner-Karten (Foto + Name/Rolle + Kontakt-Icons)
   Struktur: .team-card > .team-card__image-wrapper > .team-card__image
                        > .team-card__content > __name, __role, __contact   */
.team-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease);
}
.team-card:hover { border-color: var(--card-bd-hover); }
 
.team-card__image-wrapper {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-surface-2);
}
.team-card__image {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease);
}
.team-card:hover .team-card__image { transform: scale(1.045); }
 
.team-card__content {
  display: flex; flex-direction: column;
  flex: 1;
  gap: .2rem;
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
.team-card__name {
  font-size: 1rem; font-weight: var(--fw-semibold);
  color: var(--c-heading); line-height: var(--lh-snug);
}
.team-card__role {
  font-size: var(--fs-small); color: var(--c-text-muted);
  line-height: var(--lh-snug);
}
.team-card__contact {
  display: flex; gap: .5rem;
  /* .team-card ist flex-column -> margin-top:auto schiebt die Icons
     zuverlässig ans Kartenende, auch bei unterschiedlich langen Rollen */
  margin-top: auto;
  padding-top: .75rem;
}
.team-card__contact a {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  color: var(--c-text-muted);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.team-card__contact a:hover,
.team-card__contact a:focus-visible {
  color: var(--c-turquoise);
  border-color: var(--c-line-active);
  background: var(--c-turquoise-soft);
}
.team-card__contact .icon { width: 1.1rem; height: 1.1rem; }

/* ==========================================================================
   RECHTLICHE SEITEN (Impressum, Datenschutz, AGB)
   --------------------------------------------------------------------------
   .legal, .clause, .legal-flag etc. hatten zuvor keinerlei eigene Regeln —
   h2 lief dadurch auf die globale --fs-h2 (bis 2,9rem) ohne Abstands-
   steuerung zwischen den Abschnitten. Hier ein eigenes, dichteres System
   für lange Rechtstexte: kleinere Zwischenüberschriften, klare Trennlinien
   zwischen Abschnitten, nummerierte Klauseln als Hänge-Layout.
   ========================================================================== */
.legal-head { margin-bottom: var(--space-2xl); }
.legal-sub {
  margin-top: var(--space-sm); max-width: 62ch;
  font-size: var(--fs-lead); font-weight: var(--fw-light);
  color: var(--c-on-ink-muted);
}

.legal h2 {
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem);
  font-weight: var(--fw-semibold);
  margin: var(--space-2xl) 0 var(--space-sm);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--c-line);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal h3 {
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  margin: var(--space-lg) 0 var(--space-2xs);
}
.legal p { margin: 0 0 var(--space-sm); }
.legal ul, .legal ol { margin: 0 0 var(--space-md); padding-left: 1.3rem; display: grid; gap: .5rem; }
.legal li { line-height: var(--lh-body); }
.legal ul li::marker { color: var(--c-turquoise); }
.legal ol li::marker { color: var(--c-turquoise); font-weight: var(--fw-semibold); }
.legal a { text-decoration: underline; text-underline-offset: .15em; text-decoration-color: var(--c-line-active); }
.legal a:hover { text-decoration-color: currentColor; }

.legal-lead {
  font-size: var(--fs-lead); font-weight: var(--fw-light); color: var(--c-white);
  max-width: 60ch; margin-bottom: var(--space-xl);
}

/* Nummerierte Klauseln (AGB): Ziffer hängt links, Text im Fließtext-Block */
.clause {
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.clause__no {
  padding-top: .15em;
  font-weight: var(--fw-bold); color: var(--c-turquoise);
  font-variant-numeric: tabular-nums; font-size: var(--fs-small);
}
.clause__body p { margin: 0 0 var(--space-2xs); }
.clause__body p:last-child { margin-bottom: 0; }
.clause__body ul { margin-top: var(--space-2xs); }

/* Kontaktkarte innerhalb einer Klausel (Schlichtungsstelle etc.) */
.dgri {
  margin: var(--space-sm) 0; padding: var(--space-sm) var(--space-md);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-turquoise-deep); border-radius: var(--radius);
  font-size: var(--fs-small); line-height: var(--lh-snug);
}

/* Hinweisbox für offene Punkte (z. B. Bildnachweise vor Veröffentlichung) */
.legal-flag {
  margin: var(--space-sm) 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: rgba(182,25,24,.07); border: 1px solid rgba(182,25,24,.25);
  border-left: 3px solid #E05A59; border-radius: var(--radius);
}
.legal-flag strong { display: block; color: var(--c-white); margin-bottom: var(--space-2xs); }
.legal-flag ul { margin: 0; padding-left: 1.2rem; }
.legal-flag li { font-size: var(--fs-small); color: var(--c-text); }

.legal-stand {
  margin-top: var(--space-2xl); padding-top: var(--space-md);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-micro); color: var(--c-text-muted);
}

.legal a.legal-back {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: var(--space-2xl);
  color: var(--c-turquoise); font-weight: var(--fw-semibold);
  text-decoration: none;
}
.legal-back .icon { width: 1rem; height: 1rem; transition: transform var(--t-fast) var(--ease); }
.legal-back:hover { color: var(--c-white); }
.legal-back:hover .icon { transform: translateX(-4px); }

/* ==========================================================================
   LEISTUNGSÜBERSICHTEN (PDF-Onepager für Interessenten)
   ========================================================================== */
.pdf-viewer {
  margin-bottom: var(--space-xl);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; background: #000;
}
.pdf-viewer__bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem; background: var(--c-surface);
}
.pdf-viewer__bar strong { font-size: .95rem; font-weight: var(--fw-semibold); color: var(--c-white); }
.pdf-viewer__bar a { margin-left: auto; color: var(--c-turquoise); font-size: var(--fs-small); text-decoration: none; }
.pdf-viewer__bar a:hover { color: var(--c-white); text-decoration: underline; }
.pdf-viewer iframe { display: block; width: 100%; height: 82vh; min-height: 30rem; border: 0; background: #222; }

.pdf-meta { font-size: var(--fs-micro); color: var(--c-text-muted); }
.pdf-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; }

.empty-state {
  padding: var(--space-xl); text-align: center;
  border: 1px dashed var(--c-line); border-radius: var(--radius);
  color: var(--c-text-muted); font-size: 1rem;
}

/* ==========================================================================
   BILD-PLATZHALTER — grau, kein Stock-Material.
   Kombiniert mit den bestehenden .photo/.photo--43 etc. Aspect-Ratio-Klassen:
   <div class="photo photo--43 img-placeholder">…</div>. Überschreibt Rahmen/
   Hintergrund von .photo bewusst (steht im Quellcode danach).
   ========================================================================== */
.img-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .65rem; text-align: center; padding: 1.5rem;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 14px, rgba(255,255,255,.055) 14px 28px),
    var(--c-surface);
  border: 1px dashed var(--c-line-strong);
}
.img-placeholder .icon { width: 2.1rem; height: 2.1rem; color: var(--c-text-faint); opacity: .7; }
.img-placeholder__label {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .04em; color: var(--c-text-faint); max-width: 26ch; line-height: 1.5;
}

/* ==========================================================================
   MOBILE-OVERRIDES — bewusst als letzter Block der Datei
   --------------------------------------------------------------------------
   Media Queries verändern die Spezifität NICHT — bei gleicher Spezifität
   gewinnt in der CSS-Cascade die Regel, die WEITER UNTEN in der Datei steht,
   unabhängig davon, ob sie in einer @media-Bedingung steckt. Ein Override
   mitten in der Datei wird von jeder gleich-spezifischen Basisregel, die
   danach kommt, wieder überschrieben — genau das ist hier mit den
   Kalkulator-Mobile-Werten passiert (.starter-grid, .kalk-band,
   .kalk-band__note lagen weiter unten und haben den Override lautlos
   ausgehebelt). Deshalb: alle Mobile-Overrides ab jetzt hier ans Dateiende.
   ========================================================================== */

/* -- KALKULATOR: mehr Luft auf schmalen Screens ----------------------------
   #kalk-Präfix, damit es NICHT auf .mf-tiles im Kontaktformular durchschlägt
   — die teilt sich die Klasse mit dem Kalkulator-Widget. .kalk-band__note
   bewusst OHNE Präfix: hat eine einzige globale Abstandsregel, die hier für
   Kalkulator UND Kontaktformular gleich verstärkt wird. #kalk .mf-question
   dagegen MIT Präfix und eigenem, größerem Wert als das Kontaktformular
   (dort bleibt die alte .mf-question-Regel unverändert bestehen). */
@media (max-width: 640px) {
  .starter-grid { gap: 1.75rem; margin-top: 2.75rem; }
  .starter-card { padding: 1.75rem; }
  .kalk-band { padding: 1.5rem 1.25rem; margin-bottom: 2rem; }
  #kalk .mf-tiles { gap: 1rem; }
  .mf-dynamic { margin-bottom: 2rem; }
  .mf-question { margin-bottom: 2.25rem; }
  #kalk .mf-question { margin-bottom: 3.5rem; }
  .kalk-band__note { margin-bottom: 2.25rem; }
  #kalk .mf-options { gap: .65rem; }
  .kalk-tiers { gap: 1.5rem; margin-top: 2.25rem; }
  .kalk-tier { padding: 2rem 1.5rem; }
  .kalk-breakdown { margin-top: 2rem; gap: .9rem; }
  .kalk-actions { gap: 1.25rem; margin-top: 2.25rem; }
}

/* -- RECHTLICHE SEITEN: schmalere Klausel-Nummern auf kleinen Screens ------ */
@media (max-width: 640px) {
  .legal-head { margin-bottom: var(--space-xl); }
  .legal h2 { margin-top: var(--space-xl); padding-top: var(--space-lg); }
  .clause { grid-template-columns: 2.25rem 1fr; gap: .75rem; margin-bottom: var(--space-sm); }
}

/* -- LEISTUNGSÜBERSICHTEN: kürzere PDF-Vorschau auf schmalen Screens ------- */
@media (max-width: 640px) {
  .pdf-viewer iframe { height: 65vh; min-height: 22rem; }
}

/* -- HERO-KENNZAHLEN (Startseite): Inline-Zeile statt Chip-Spalten ----------
   Als 2x2-Raster kosteten die vier Chips auf Telefonbreite 204px und haben den
   Startseiten-Hero von 788px auf 992px getrieben — er passte damit nicht mehr
   in einen 812px-Viewport, in den er vorher exakt hineinreichte. Deshalb hier
   Wert und Label pro Chip nebeneinander (statt uebereinander) und der ganze
   Block als umbrechende Zeile mit Trennpunkten: dieselbe Information, rund ein
   Drittel der Hoehe. Nur .hero--home, damit die 13 Servicepages, die
   .hero__proof ebenfalls nutzen, ihre Spaltenoptik behalten. */
@media (max-width: 640px) {
  .hero--home { padding-block: 3.25rem; }
  .hero--home .hero__proof {
    gap: .35rem 1rem; margin-top: 1.4rem; padding-top: 1.1rem;
  }
  .hero--home .hero__proof-item {
    flex-direction: row; align-items: baseline; gap: .35rem;
  }
  .hero--home .hero__proof-value { font-size: 1.05rem; }
  /* Trennpunkt zwischen den Angaben, beim letzten Element weggelassen. */
  .hero--home .hero__proof-item:not(:last-child)::after {
    content: "·"; margin-left: .6rem; color: rgba(255,255,255,.3);
  }
}

/* ==========================================================================
   BLOG
   Zwei Bausteine: die Uebersicht (/blog) und das Artikel-Layout
   (/blog/*). Bewusst wenig Neues — Textsatz, Tabellen, Hinweisboxen
   und schematische Grafiken kommen aus dem bestehenden .kb-*-System der
   Wissensseiten, damit Blog und Wissens-Hub wie eine Publikation wirken.
   Neu ist nur, was es dort nicht gibt: Karten mit Bild, die Filter-/Sortier-
   leiste und zwei Bloecke fuer Kennzahlen bzw. Balken.
   ========================================================================== */

/* -- Werkzeugleiste: Themenfilter + Sortierung ----------------------------- */
.blog-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.35rem; padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--c-line);
}
.blog-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
/* Optik bewusst identisch zu .kb-quicknav (Wissens-Hub) — gleiche Funktion,
   gleiches Aussehen; hier nur als <button> statt Anker. */
.blog-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.75rem; padding: .5rem 1rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--c-text);
  font-family: inherit; font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.blog-chip:hover { border-color: var(--c-turquoise); color: var(--c-white); background: rgba(164,216,222,.12); }
.blog-chip span { opacity: .6; font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.blog-chip.is-active {
  border-color: var(--c-turquoise); color: var(--c-white); background: rgba(164,216,222,.16);
}
.blog-chip.is-active span { opacity: .85; color: var(--c-turquoise); }

.blog-sort { display: flex; align-items: center; gap: .6rem; }
.blog-sort label { font-size: var(--fs-micro); color: var(--c-text-muted); }
.blog-sort select {
  min-height: 2.75rem; padding: .5rem 2.1rem .5rem .85rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm);
  background-color: var(--c-surface); color: var(--c-white);
  font-family: inherit; font-size: var(--fs-micro);
  cursor: pointer; appearance: none;
  /* Caret als data-URI: kein zusaetzlicher Request. Faerbt sich nicht mit,
     daher fest auf Turquoise (--p-turq-500 = #A4D8DE). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4D8DE' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 1rem;
}
.blog-sort select:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

.blog-count {
  margin-bottom: 1.35rem;
  font-size: var(--fs-micro); color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

/* -- Artikelkarten --------------------------------------------------------- */
.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
/* Das Filter-Skript setzt/entfernt [hidden]. Im Grid-Kontext muss das explizit
   auf display:none gehen, sonst bliebe die Rasterzelle als Luecke stehen. */
.blog-card[hidden] { display: none; }
.blog-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-surface); overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.blog-card:hover { border-color: var(--c-line-active); transform: translateY(-3px); }
.blog-card:focus-within { border-color: var(--c-turquoise); }
.blog-card__link {
  display: flex; flex-direction: column; height: 100%;
  color: inherit; text-decoration: none;
}
.blog-card__media {
  aspect-ratio: 16 / 9; overflow: hidden; flex: none;
  /* Farbverlauf als Grund: Karten ohne Bild bleiben so gestalterisch intakt. */
  background: linear-gradient(135deg, #1E2A2C, #141E20);
  border-bottom: 1px solid var(--c-line);
}
.blog-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .9; transition: transform .7s var(--ease), opacity .3s var(--ease);
}
.blog-card:hover .blog-card__media img { transform: scale(1.045); opacity: 1; }
.blog-card__body {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.35rem 1.35rem 1.5rem;
  flex: 1;
}
.blog-card__topic {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-turquoise);
}
.blog-card__title {
  font-size: 1.12rem; line-height: 1.35; font-weight: var(--fw-semibold);
  color: var(--c-white); margin: 0;
}
.blog-card__excerpt {
  font-size: var(--fs-small); line-height: 1.6; color: var(--c-text);
  margin: 0;
}
.blog-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  padding-top: .8rem;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-micro); color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
  /* An den unteren Kartenrand: bei unterschiedlich langen Titeln/Teasern
     liegen die Metazeilen aller Karten damit auf einer Linie. */
  margin: auto 0 0;
}
.blog-card__meta span[aria-hidden] { opacity: .5; }

.blog-empty {
  display: grid; gap: 1rem; justify-items: start;
  padding: 2rem; border: 1px dashed var(--c-line-strong); border-radius: var(--radius);
  color: var(--c-text-muted);
}
/* WICHTIG: Ein eigenes display in den Regeln oben schlaegt das display:none,
   das Browser dem [hidden]-Attribut per Default-Stylesheet mitgeben. Ohne
   diese Zeile blieben Werkzeugleiste und Leer-Hinweis dauerhaft sichtbar,
   obwohl das Markup/JS sie versteckt. Gleiches Muster wie .blog-card[hidden]. */
.blog-toolbar[hidden], .blog-empty[hidden] { display: none; }

/* -- Artikel-Hero ---------------------------------------------------------- */
/* .hero setzt --fs-display (bis 5.5rem) — richtig fuer Kampagnen-Headlines,
   deutlich zu gross fuer einen Artikeltitel, der aus einem ganzen Satz besteht.
   Etwas flacher und mit gedeckelter Schriftgroesse. */
.hero--article { min-height: min(58vh, 34rem); }
.hero--article h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  max-width: 30ch;
}
.hero--article .hero__sub { max-width: 62ch; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); }
.hero--article .kb-crumb { margin-bottom: 1.1rem; }
.hero--article .kb-facts { margin-top: 1.6rem; }

/* -- Artikeltext ----------------------------------------------------------- */
/* Erbt den kompletten Satz von .kb-prose; hier nur der Vorspann und etwas
   mehr Luft um die eingebetteten Bloecke, weil Blogtexte laenger laufen als
   die kompakten Wissensseiten. */
.blog-prose > *:first-child { margin-top: 0; }
.blog-prose .blog-lead {
  font-size: clamp(1.06rem, 1rem + .4vw, 1.22rem); line-height: 1.65;
  color: var(--c-text-strong); font-weight: var(--fw-light);
  margin-bottom: 1.6rem; padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--c-line);
}
.blog-prose figure, .blog-prose .blog-kpi, .blog-prose .kb-range { margin-block: 1.8rem; }

/* -- Kennzahlen-Block ------------------------------------------------------ */
.blog-kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.25rem 1.5rem;
  padding: 1.5rem; border: 1px solid var(--c-line); border-radius: var(--radius);
  background: rgba(164,216,222,.05);
}
.blog-kpi__item { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.blog-kpi__value {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1;
  font-weight: var(--fw-light); color: var(--c-white);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.blog-kpi__value span { color: var(--c-turquoise); }
.blog-kpi__label {
  font-size: var(--fs-micro); line-height: 1.4; color: var(--c-text-muted);
  overflow-wrap: anywhere; hyphens: auto;
}
.blog-kpi__note {
  grid-column: 1 / -1; margin: 0; padding-top: 1rem;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-micro); line-height: 1.55; color: var(--c-text-muted);
}

/* -- Balkendiagramm in HTML/CSS -------------------------------------------- */
/* Absichtlich kein SVG: Balkenhoehen entstehen aus --h (Prozent), es sind
   keine berechneten Koordinaten noetig. Das laesst sich beim Schreiben eines
   Artikels zuverlaessig ausfuellen, ohne die Grafik zu zerlegen. Fuer echte
   Schemazeichnungen (Grundrisse, Signalwege) weiter .kb-figure mit SVG nutzen. */
.blog-bars {
  margin: 0; padding: 1.5rem;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: rgba(164,216,222,.04);
}
.blog-bars__plot {
  display: flex; align-items: flex-end; gap: clamp(.5rem, 2vw, 1.5rem);
  height: 13rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--c-line-strong);
}
.blog-bars__item {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: .5rem; flex: 1 1 0; min-width: 0; height: 100%;
}
.blog-bars__val {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--c-white);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.blog-bars__bar {
  width: 100%; max-width: 4.5rem; height: var(--h, 50%);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: linear-gradient(180deg, rgba(164,216,222,.62), rgba(164,216,222,.22));
  border: 1px solid rgba(164,216,222,.5); border-bottom: none;
}
/* Ein hervorgehobener Balken pro Grafik — die Aussage, nicht Dekoration. */
.blog-bars__item--accent .blog-bars__bar {
  background: linear-gradient(180deg, rgba(182,25,24,.55), rgba(182,25,24,.18));
  border-color: #E05A59;
}
.blog-bars__item--accent .blog-bars__val { color: var(--c-red-text); }
.blog-bars__cap {
  font-size: var(--fs-nano); color: var(--c-text-muted); text-align: center;
  line-height: 1.3; overflow-wrap: anywhere;
}
.blog-bars figcaption {
  margin-top: .95rem; padding-top: .85rem; border-top: 1px solid var(--c-line);
  font-size: var(--fs-small); color: var(--c-text-muted); line-height: 1.55;
}

/* -- Blog auf schmalen Screens -------------------------------------------- */
@media (max-width: 640px) {
  /* Sortierung volle Breite unter die Chips, statt gequetscht daneben. */
  .blog-toolbar { flex-direction: column; align-items: stretch; }
  .blog-sort { justify-content: space-between; }
  .blog-sort select { flex: 1; margin-left: .5rem; }
  .blog-card__body { padding: 1.15rem 1.15rem 1.3rem; }
  /* Diagramm niedriger, Beschriftungen umbrechen sonst in die Balken. */
  .blog-bars { padding: 1.1rem; }
  .blog-bars__plot { height: 10.5rem; gap: .4rem; }
  .blog-kpi { padding: 1.15rem; gap: 1.1rem; }
}

/* ==========================================================================
   COOKIE-CONSENT-DIALOG
   Siehe partials/cookie-consent.php. Bewusst als klassischer, unübersehbarer
   Dialog mit abgedunkeltem Overlay statt einer dezenten Randleiste — kein
   Schliessen ohne Wahl, kein Klick-ausserhalb, kein Escape (siehe JS dort).
   ========================================================================== */
.cookie-overlay {
  position: fixed; inset: 0; z-index: var(--z-cookie);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-gutter);
  background: rgba(8,11,13,.72);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
}
.cookie-overlay[hidden] { display: none; }
/* Solange der Dialog offen ist, lässt sich die Seite dahinter nicht
   scrollen — verstärkt, dass hier eine Entscheidung erwartet wird. */
body.has-cookie-overlay { overflow: hidden; }

.cookie-modal {
  width: min(30rem, 100%);
  max-height: 100%; overflow-y: auto;
  padding: var(--space-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-lg);
  box-shadow: var(--elev-4);
  text-align: center;
}
.cookie-modal:focus-visible { outline: none; } /* per JS fokussiert, kein Klick-Fokusring nötig */
.cookie-modal__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: 1rem;
  border-radius: var(--radius-pill);
  background: rgba(164,216,222,.12); color: var(--c-turquoise);
}
.cookie-modal__icon .icon { width: 1.5rem; height: 1.5rem; }
.cookie-modal__title {
  font-size: 1.25rem; font-weight: var(--fw-semibold); color: var(--c-white);
  margin-bottom: .65rem;
}
.cookie-modal__text {
  font-size: var(--fs-small); line-height: 1.6; color: var(--c-text);
  margin: 0 0 1.5rem;
}
.cookie-modal__text a { color: var(--c-turquoise); }
.cookie-modal__actions { display: flex; gap: .85rem; }
/* Gleiche Groesse fuer beide Optionen — Ablehnen darf nicht kleiner/unauffaelliger
   wirken als Akzeptieren, sonst waere das ein Dark Pattern. */
.cookie-modal__btn { flex: 1; }

@media (max-width: 640px) {
  /* Als Bottom-Sheet statt zentriertem Dialog: bekannteres Muster auf
     Telefonbreite, volle Breite statt Rand-Abstand auf allen Seiten. */
  .cookie-overlay { align-items: flex-end; padding: 0; }
  .cookie-modal {
    width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-md);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  }
  .cookie-modal__actions { flex-direction: column; }
}