/* ============================================================
   Hanse Gutachten — Kfz-Gutachter Bremen & Bremerhaven
   Dark-Premium im "Köln-Muster" (Master für alle Auto-Seiten):
   redaktionelle Nummerierung, elegante Akzente, ruhige Eleganz.
   Asphalt-Dunkel + Signal-Rot. Hover/teure Effekte nur ab Desktop
   (Migration-Regel 12). Co-located, NIE in globals. Prefix: .kmk-
   ============================================================ */

.kmk-root {
  --kmk-bg: #ffffff;
  --kmk-bg-2: #f4f7fb;
  --kmk-bg-3: #eaeff7;
  --kmk-line: rgba(18, 32, 56, 0.10);
  --kmk-line-strong: rgba(18, 32, 56, 0.16);
  --kmk-text: #1b3e74;
  --kmk-muted: #5b6878;
  --kmk-red: #1F4E9B;
  --kmk-red-light: #2f5cab;
  --kmk-red-deep: #143A78;
  --kmk-amber: #d99a2b;
  --kmk-steel: #67748a;
  --kmk-glow: rgba(31,78,155,0.30);
  --kmk-wrap: 1180px;

  background: var(--kmk-bg);
  color: var(--kmk-text);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.kmk-root *, .kmk-root *::before, .kmk-root *::after { box-sizing: border-box; }
:where(.kmk-root) a { color: inherit; text-decoration: none; }
.kmk-root img { max-width: 100%; display: block; }
.kmk-root h1, .kmk-root h2, .kmk-root h3, .kmk-root h4 { margin: 0; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }
.kmk-root p { margin: 0; }

.kmk-wrap { width: 100%; max-width: var(--kmk-wrap); margin: 0 auto; padding: 0 22px; }

/* Asphalt-Grund: kühles Dunkel mit warmem Signal-Schimmer oben rechts */
.kmk-root::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 640px at 84% -10%, rgba(31, 78, 155, 0.06), transparent 60%),
    radial-gradient(1000px 560px at -10% 8%, rgba(91, 107, 128, 0.05), transparent 58%),
    radial-gradient(1100px 900px at 50% 118%, rgba(31, 78, 155, 0.04), transparent 60%);
}
@media (min-width: 1024px) { .kmk-root::before { animation: hgAmbient 14s ease-in-out infinite; } }
@keyframes hgAmbient { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
.kmk-root > * { position: relative; z-index: 1; }

/* ===================== TYPO-HELFER ===================== */
.kmk-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kmk-red-light);
}
.kmk-h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.kmk-h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.kmk-h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
/* Alle hellen Überschriften in Markenblau (kein Schwarz mehr). Dunkle Bänder (Hero, Parallax) haben eigene helle Overrides. */
.kmk-h2, .kmk-h3, .kmk-stack-title, .kmk-card h3, .kmk-quote, .kmk-rights-col h3 { color: var(--kmk-red); }
.kmk-lead { color: var(--kmk-muted); font-size: clamp(1.02rem, 1.6vw, 1.18rem); }
.kmk-h1, .kmk-h2, .kmk-h3 { text-wrap: balance; }
.kmk-lead, .kmk-prose p, .kmk-card p, .kmk-hero-sub { text-wrap: pretty; }
.kmk-muted { color: var(--kmk-muted); }
.kmk-em { color: var(--kmk-red-light); font-style: normal; }
.kmk-em.amber { color: var(--kmk-amber); }

/* Redaktionelle Nummerierung (I·II·III / 01·02) */
.kmk-num { font-weight: 800; font-size: 1.05rem; line-height: 1; color: var(--kmk-red-light); display: inline-block; }
.kmk-num-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.kmk-num-row::after { content: ''; flex: 1; height: 1px; background: var(--kmk-line); }

.kmk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kmk-red); display: inline-block; flex: 0 0 auto; }

/* ===================== BUTTONS ===================== */
.kmk-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 14px;
  font-weight: 700; font-size: 0.98rem; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  /* Nie breiter als der Platz. Auf einem 360px-Telefon war der Knopf
     „Alle 139 Bewertungen bei Google lesen" 370px breit und stand links und
     rechts ueber dem Bildschirmrand. Statt abzuschneiden darf die Beschriftung
     dort in zwei Zeilen umbrechen. */
  max-width: 100%;
}
@media (max-width: 480px) {
  .kmk-btn { white-space: normal; text-align: center; padding-left: 18px; padding-right: 18px; }
}
.kmk-btn-primary {
  background: linear-gradient(135deg, var(--kmk-red-light), var(--kmk-red) 55%, var(--kmk-red-deep));
  color: #fff;
  box-shadow: 0 10px 30px -10px var(--kmk-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.kmk-btn-ghost { background: rgba(18, 32, 56, 0.035); border-color: var(--kmk-line-strong); color: var(--kmk-text); }
.kmk-btn-whatsapp { background: #25D366; color: #fff; }
@media (min-width: 1024px) {
  .kmk-btn { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, background .3s, border-color .3s; }
  .kmk-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px var(--kmk-glow), inset 0 1px 0 rgba(255,255,255,.3); }
  .kmk-btn-ghost:hover { transform: translateY(-2px); border-color: var(--kmk-red); background: rgba(31,78,155,.08); }
  .kmk-btn-whatsapp:hover { transform: translateY(-2px); filter: brightness(1.05); }
}

/* ===================== HEADER ===================== */
.kmk-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 60;
  transition: background .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.kmk-header.scrolled { background: rgba(255, 255, 255, 0.97); border-bottom-color: var(--kmk-line); box-shadow: 0 6px 24px -18px rgba(20,40,80,0.5); }
@media (min-width: 1024px) { .kmk-header.scrolled { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } }
/* Schlanke Kontakt-Leiste über der Navigation — Header bleibt clean */
.kmk-topbar { position: relative; z-index: 2; background: var(--kmk-red); color: #fff; }
.kmk-topbar-inner { display: flex; align-items: center; justify-content: flex-end; gap: 24px; min-height: 40px; }
.kmk-topbar-claim { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.92); }
.kmk-topbar-claim svg { color: #bcd3f7; }
.kmk-topbar-contact { display: flex; align-items: center; gap: 22px; }
.kmk-topbar-contact a { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 600; color: #fff; white-space: nowrap; }
.kmk-topbar-contact a svg { color: #cfe0fb; }
@media (min-width: 1024px) { .kmk-topbar-contact a { transition: color .2s; } .kmk-topbar-contact a:hover { color: #eaf1ff; } .kmk-topbar-contact a:hover svg { color: #fff; } }
@media (max-width: 900px) { .kmk-topbar-claim { display: none; } .kmk-topbar-inner { justify-content: center; } }
@media (max-width: 700px) { .kmk-topbar { display: none; } }

.kmk-nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 14px; }
.kmk-logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.kmk-logo-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--kmk-red); }
.kmk-logo-icon img { width: 100%; height: 100%; transition: filter .35s ease; }
/* Über dem dunklen Hero-Video: Glyph WEISS; sobald gescrollt: blau (wie Schrift + Nav) */
.kmk-header:not(.scrolled) .kmk-logo-icon img { filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,0.45)); }
.kmk-wordmark { display: flex; flex-direction: column; line-height: 1; }
.kmk-wordmark b { font-size: 1.08rem; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; }
.kmk-wordmark span { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kmk-red-light); margin-top: 4px; }
.kmk-nav-links { display: none; align-items: center; gap: 30px; }
.kmk-nav-link { font-size: 0.95rem; font-weight: 600; color: var(--kmk-text); position: relative; padding: 4px 0; white-space: nowrap; }
/* Über dem dunklen Hero-Video: Header-Schrift hell; sobald gescrollt (weißer Header) wieder dunkel */
.kmk-header:not(.scrolled) .kmk-nav-link,
.kmk-header:not(.scrolled) .kmk-wordmark b { color: #ffffff; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.kmk-header:not(.scrolled) .kmk-wordmark span { color: #a8c4f2; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.kmk-nav-link::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--kmk-red); transition: width .25s ease; }
@media (min-width: 1024px) { .kmk-nav-link:hover::after { width: 100%; } }
/* Gescrollt (weißer Header): Schrift in Blau statt dunkel/schwarz */
.kmk-header.scrolled .kmk-wordmark b,
.kmk-header.scrolled .kmk-nav-link { color: var(--kmk-red); }
.kmk-nav-actions { display: flex; align-items: center; gap: 12px; }
.kmk-tel { display: none; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; color: #fff; background: var(--kmk-red); padding: 8px 14px; border: 1px solid transparent; border-radius: 999px; transition: filter .2s, transform .2s; white-space: nowrap; flex: 0 0 auto; }
.kmk-tel svg { color: #fff; }
.kmk-wa-icon { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: #25D366; color: #fff; flex: 0 0 auto; transition: filter .2s, transform .2s; }
.kmk-wa-icon svg { color: #fff; }
@media (min-width: 1100px) { .kmk-wa-icon { display: inline-flex; } }
@media (min-width: 1024px) { .kmk-wa-icon:hover { filter: brightness(1.06); transform: translateY(-1px); } }
@media (min-width: 1024px) { .kmk-tel:hover { filter: brightness(1.08); transform: translateY(-1px); } }
.kmk-header .kmk-nav-actions .kmk-btn { padding: 8px 18px; font-size: 0.9rem; border-radius: 999px; }
@media (min-width: 1100px) { .kmk-nav-links { display: flex; } .kmk-tel { display: inline-flex; } }
@media (max-width: 759px) { .kmk-nav-actions .kmk-btn-primary { display: none; } }
/* Schmale Telefone (360px und enger): Der Schriftzug ist dort breiter als der
   Platz. Weil er nicht umbrechen darf, schob er den Menue-Knopf 4px ueber den
   rechten Bildschirmrand hinaus — ein Teil der Trefferflaeche lag ausserhalb
   des Bildes. Jetzt darf der Schriftzug schrumpfen; der Knopf behaelt seinen
   Platz. */
@media (max-width: 400px) {
  .kmk-logo { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .kmk-wordmark { min-width: 0; }
  .kmk-root .kmk-wordmark b { font-size: 0.98rem; }
  .kmk-root .kmk-wordmark span { font-size: 0.62rem; letter-spacing: 0.16em; }
  .kmk-logo-icon { width: 44px; height: 44px; }
  .kmk-nav-actions { flex: 0 0 auto; }
}

/* Hamburger + Handy-Menü (Nav-Links sind unter 1100px ausgeblendet) */
.kmk-burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: none; background: transparent; cursor: pointer; color: var(--kmk-red); padding: 0; }
.kmk-header:not(.scrolled) .kmk-burger { color: #fff; }
@media (min-width: 1100px) { .kmk-burger { display: none; } }
.kmk-mobilemenu {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column;
  background: #fff; border-top: 1px solid var(--kmk-line);
  box-shadow: 0 22px 44px -24px rgba(20,40,80,0.5);
  padding: 8px 22px 22px;
  max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
  transition: max-height .35s ease, opacity .25s ease;
}
/* Hoehe am tatsaechlich sichtbaren Bildschirm bemessen (svh = mit sichtbarer
   Adressleiste) und ABZUEGLICH der Kopfzeile, unter der das Menue haengt.
   Vorher: 92vh unterhalb einer 75px hohen Kopfzeile — auf einem 640px hohen
   Telefon reichte das Menue damit rechnerisch bis 664px und die letzten
   Punkte (Kontakt, die beiden Knoepfe) lagen unerreichbar unter dem Rand,
   denn 'overflow: hidden' schnitt sie ab.
   Deshalb im geoeffneten Zustand scrollbar — dann kommt man in jedem Fall an
   alle Punkte. 'overscroll-behavior' verhindert, dass am Ende des Menues die
   Seite dahinter weiterscrollt. */
.kmk-mobilemenu.open {
  max-height: calc(92vh - 80px);
  max-height: calc(100svh - 88px);
  opacity: 1; pointer-events: auto;
  overflow-y: auto; overscroll-behavior: contain;
}
.kmk-mobilemenu-link { padding: 15px 4px; font-size: 1.05rem; font-weight: 700; color: var(--kmk-red); border-bottom: 1px solid var(--kmk-line); }
.kmk-mobilemenu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.kmk-mobilemenu-actions .kmk-btn { width: 100%; }
@media (min-width: 1100px) { .kmk-mobilemenu { display: none; } }

/* ===================== HERO ===================== */
.kmk-hero { position: relative; padding: 150px 0 clamp(64px, 9vh, 104px); min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; }
.kmk-hero > .kmk-wrap { position: relative; z-index: 2; width: 100%; }
/* Aufprall-Video als Hintergrund */
.kmk-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  z-index: 0; pointer-events: none;
  /* leicht hineinzoomen vom oberen Rand. Die KI-Schriftzeile unten ist seit 15.09.2026 auch aus
     Video und Standbild selbst entfernt (ffmpeg delogo), der Zoom bleibt fuer den Bildausschnitt. */
  transform: scale(1.12); transform-origin: center top;
}
/* Dunkler Verlauf für den cinematischen Hero: links/unten dunkel (weiße Schrift lesbar), rechts/oben offen (Video sichtbar), unten weich ins Weiß der Seite */
/* Verlauf: oben/Mitte klar (Crash sichtbar), unten dunkel für den Text, ganz unten weich ins Weiß der Seite */
.kmk-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 34%, rgba(6,10,18,0.40) 50%, rgba(6,10,18,0.72) 70%, rgba(6,10,18,0.88) 88%),
    linear-gradient(180deg, transparent 88%, var(--kmk-bg) 100%);
}
@media (max-width: 760px) {
  .kmk-hero-scrim {
    background:
      linear-gradient(180deg, transparent 0%, transparent 26%, rgba(6,10,18,0.42) 48%, rgba(6,10,18,0.82) 80%, rgba(6,10,18,0.86) 93%),
      linear-gradient(180deg, transparent 88%, var(--kmk-bg) 100%);
  }
}
/* Heller Text auf dem dunklen, cinematischen Hero */
.kmk-hero-inner .kmk-h1 { color: #ffffff; text-shadow: 0 2px 26px rgba(0,0,0,0.45); }
.kmk-hero-inner .kmk-h1 .kmk-em { color: #74a3ec; }
.kmk-hero-inner .kmk-hero-sub { color: rgba(233,240,250,0.92); text-shadow: 0 1px 16px rgba(0,0,0,0.45); }
.kmk-hero-inner .kmk-usp { color: #eaf0f8; text-shadow: 0 1px 12px rgba(0,0,0,0.45); }
.kmk-hero-inner .kmk-usp svg { color: #74a3ec; }
.kmk-hero-inner .kmk-h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
/* Text sitzt unten direkt auf dem Verlauf — kein Kasten, damit oben/Mitte der Crash frei bleibt */
.kmk-hero-inner { max-width: 760px; }
/* Handy: Überschrift kleiner, damit nichts rechts abgeschnitten wird; sauberer Umbruch */
@media (max-width: 600px) {
  .kmk-hero-inner .kmk-h1 { font-size: clamp(1.65rem, 7vw, 2.25rem); }
  .kmk-hero-inner { max-width: 100%; }
}
.kmk-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  background: var(--kmk-red); border: 1px solid transparent; color: #fff;
  margin-bottom: 22px;
}
.kmk-badge .kmk-dot { background: #fff; }
.kmk-h1 .kmk-em { white-space: normal; }
.kmk-hero-sub { margin-top: 20px; max-width: none; }
/* Der Hero-Inhalt sitzt am unteren Rand. Ein groesserer Abstand ueber den
   Knoepfen schiebt deshalb Ortsangabe, Ueberschrift und Beschreibung nach
   oben, waehrend Knoepfe und Merkmale genau dort bleiben, wo sie sind.
   Der Wert waechst mit der Fensterhoehe: auf hohen Bildschirmen stand der
   Text sonst sehr weit unten, auf flachen bliebe sonst kein Platz. */
.kmk-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(40px, 8vh, 96px); }
/* Im Abschluss-Aufruf und auf Unterseiten bleibt der urspruengliche Abstand */
.kmk-subcta .kmk-hero-actions, .kmk-standort .kmk-hero-actions { margin-top: 26px; }
.kmk-usps { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; }
.kmk-usp { display: inline-flex; align-items: center; gap: 9px; font-size: 0.95rem; color: var(--kmk-text); }
.kmk-usp svg { color: var(--kmk-red-light); flex: 0 0 auto; }

/* ===================== STATS ===================== */
.kmk-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--kmk-line); border: 1px solid var(--kmk-line); border-radius: 18px; overflow: hidden;
}
.kmk-stat { background: var(--kmk-bg-2); padding: 26px 20px; text-align: center; }
.kmk-stat-num { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; color: var(--kmk-red); }
.kmk-stat-lbl { margin-top: 6px; font-size: 0.86rem; color: var(--kmk-muted); }
@media (max-width: 760px) { .kmk-stats { grid-template-columns: repeat(2, 1fr); } }
/* Raster-Felder duerfen schmaler werden als ihr laengstes Wort. Sonst wuchsen
   die beiden Kacheln auf einem 360px-Telefon auf je 162px plus Abstand und
   ragten rechts aus dem Bild. */
.kmk-stats > * { min-width: 0; }
/* Sehr schmale Telefone: zwei Kacheln nebeneinander werden zu eng — die
   Zahlen und die Erklaerzeile darunter stehen dann als Wortsalat da. */
@media (max-width: 400px) { .kmk-stats { grid-template-columns: 1fr; } }

/* ===================== SECTIONS ===================== */
.kmk-section { padding: 84px 0; }
/* Folgen zwei Sektionen ohne Farbwechsel aufeinander, addieren sich 84px unten
   und 84px oben zu einer 168px-Luecke. Bei gleichem Hintergrund reicht die
   Haelfte; bei einem Farbwechsel (.soft) bleibt der volle Abstand. */
.kmk-section + .kmk-section:not(.soft) { padding-top: clamp(26px, 3.2vw, 42px); }
.kmk-section.soft + .kmk-section:not(.soft) { padding-top: 84px; }

/* Deko-Sektionen mit gestreuten Kreis-Akzenten im Hintergrund */
.kmk-deco { position: relative; overflow: hidden; }
.kmk-deco > .kmk-wrap { position: relative; z-index: 1; }
/* .kmk-dots* Styles liegen jetzt in dots.css (wiederverwendbar). */

.kmk-section-head { max-width: 720px; margin-bottom: 46px; }
.kmk-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kmk-section-head p { margin-top: 16px; }

/* Leistungen-Grid */
.kmk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 940px) { .kmk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kmk-grid { grid-template-columns: 1fr; } }
/* Feste Zweispaltigkeit — bricht auf schmalen Geraeten trotzdem auf eine
   Spalte um. Vorher stand das als Inline-Stil im Bauteil und liess sich
   deshalb von keiner Handy-Regel mehr ueberstimmen. */
.kmk-grid-zwei { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .kmk-grid-zwei { grid-template-columns: 1fr; } }

/* Bento-Raster: erste Karte groß als Akzent-„Kernleistung" */
.kmk-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 18px; }
/* Leistungen-Sektion: Sektion selbst darf NICHT clippen (sonst klebt sticky nicht) */
.kmk-leist { position: relative; }
.kmk-leist > .kmk-wrap { position: relative; z-index: 1; }
/* Kreise nur im oberen Band der (sehr hohen) Stapel-Sektion — rund um die Überschrift, läuft weich aus.
   Unten am Übergang zur nächsten Sektion bewusst KEINE Kreise → kein harter Schnitt. */
.kmk-deco-layer { position: absolute; top: 0; left: 0; right: 0; height: min(880px, 92vh); z-index: 0; overflow: hidden; pointer-events: none; }

/* ---- Leistungen: Karten fliegen NACHEINANDER von rechts herein und stapeln sich (gepinnt) ----
   .kmk-stack = Scroll-Strecke (100vh pro Einflug). .kmk-stack-pin bleibt stehen, Karten liegen absolut übereinander. */
/* Scroll-Strecke: 6 Karten x ~65vh reicht — 600vh fuehlte sich endlos an */
.kmk-stack { position: relative; height: 420vh; margin-top: clamp(20px, 3vw, 40px); }
/* clip statt visible: die einfliegende Karte wurde sonst ausserhalb des
   Sichtbereichs mitgezeichnet, dadurch standen zwei Karten halb nebeneinander.
   overflow-x: clip bricht das sticky-Verhalten nicht (anders als hidden/auto). */
.kmk-stack-pin {
  position: sticky; top: 0; height: 100vh; display: block; overflow-x: clip;
  /* svh = Hoehe des Bildschirms, WENN die Adressleiste des Telefons sichtbar
     ist. 100vh meint dagegen den Bildschirm OHNE Leiste und ist auf dem Handy
     bis zu 60px groesser als das, was man tatsaechlich sieht — die Karte wurde
     damit zu tief gesetzt und unten von den Leisten angeschnitten.
     Aeltere Browser kennen svh nicht und behalten die Zeile darueber. */
  height: 100svh;
  /* Kopfzeile und Laufband sind FIXIERT und liegen ueber der Karte. Die Karte
     darf deshalb nicht in der Mitte des Fensters stehen, sondern muss mittig
     im freien Streifen dazwischen sitzen — sonst schiebt sich die Kopfzeile
     darueber und die Karte sieht oben abgeschnitten aus. */
  --kmk-frei-oben: 125px;  /* Kontaktleiste 40 + Navigation 85 */
  --kmk-frei-unten: 40px;  /* Laufband am unteren Rand */
}
/* Laufband + Aktionsleiste. Die Hoehe der Leiste wird gemessen (useMobilLeiste),
   weil sie an der Knopfgroesse und am sicheren Bereich unten haengt. Mit dem
   frueheren festen Wert von 98px lag der Rechenwert 16px unter der Wirklichkeit —
   auf flacheren Geraeten waere die Karte unter die Leisten gerutscht. */
@media (max-width: 759px) { .kmk-stack-pin { --kmk-frei-unten: calc(var(--kmk-leiste-h, 80px) + 34px); } }
@media (max-width: 700px) { .kmk-stack-pin { --kmk-frei-oben: 85px; } }  /* Kontaktleiste ausgeblendet */

.kmk-stack-card {
  position: absolute; left: 0; right: 0; margin: 0 auto;
  /* Mitte des freien Streifens statt Mitte des Fensters */
  top: calc(var(--kmk-frei-oben) + (100vh - var(--kmk-frei-oben) - var(--kmk-frei-unten)) / 2);
  top: calc(var(--kmk-frei-oben) + (100svh - var(--kmk-frei-oben) - var(--kmk-frei-unten)) / 2);
  width: min(1080px, 92%);
  /* Nie hoeher als der freie Streifen (minus etwas Luft), sonst wird oben
     und unten trotz Zentrierung wieder etwas verdeckt. */
  height: min(
    clamp(420px, 74vh, 600px),
    calc(100vh - var(--kmk-frei-oben) - var(--kmk-frei-unten) - 40px)
  );
  height: min(
    clamp(420px, 74svh, 600px),
    calc(100svh - var(--kmk-frei-oben) - var(--kmk-frei-unten) - 40px)
  );
  transform: translateY(-50%); will-change: transform; overflow: hidden;
  display: grid; grid-template-columns: 1.12fr 0.88fr;
  background: #fff; border: 1px solid var(--kmk-line); border-radius: 26px;
  box-shadow: 0 30px 60px -30px rgba(20,40,80,0.5);
}
.kmk-stack-body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 20px; }
.kmk-stack-num { display: block; font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: rgba(31,78,155,0.16); }
.kmk-stack-eyebrow { margin-top: 14px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kmk-red); }
.kmk-stack-title { margin-top: 10px; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--kmk-red); text-wrap: balance; }
.kmk-stack-text { color: var(--kmk-muted); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.65; max-width: 46ch; margin-top: auto; }
.kmk-stack-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kmk-red); border-bottom: 1px solid var(--kmk-line-strong); padding-bottom: 6px; transition: color .3s ease, border-color .3s ease; }
.kmk-stack-link svg { transition: transform .3s ease; }
.kmk-stack-link:hover { color: var(--kmk-red); border-color: var(--kmk-red); }
.kmk-stack-link:hover svg { transform: translateX(4px); }
.kmk-stack-visual { position: relative; overflow: hidden; background: #dce7f8; }
.kmk-stack-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* weicher Übergang zur weißen Textseite + dezente Markentönung */
.kmk-stack-visual::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 9%), linear-gradient(180deg, rgba(31,78,155,0.06), transparent 30%); }
.kmk-stack-badge { position: absolute; z-index: 1; top: 18px; left: 18px; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; color: var(--kmk-red);
  background: rgba(255,255,255,0.92); box-shadow: 0 8px 20px -10px rgba(20,40,80,0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Flaches Fenster (z. B. Laptop mit sichtbarer Lesezeichenleiste): der freie
   Streifen zwischen Kopfzeile und Laufband wird knapp. Dann Text und Abstaende
   zusammenruecken, sonst laeuft der Inhalt unten aus der Karte heraus. */
@media (min-width: 761px) and (max-height: 660px) {
  .kmk-stack-body { padding: 20px 28px; gap: 10px; }
  .kmk-stack-num { font-size: 2rem; }
  .kmk-stack-eyebrow { margin-top: 8px; }
  .kmk-stack-title { margin-top: 6px; font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
  .kmk-root .kmk-stack-text { font-size: 0.95rem; line-height: 1.5; }
}

@media (max-width: 760px) {
  /* Hoehe nach Inhalt — ABER gedeckelt: ohne Deckel wuchs die Karte ueber den
     freien Streifen hinaus und verschwand unter Laufband und Aktionsleiste.
     Der Deckel rechnet mit svh, also mit sichtbarer Adressleiste. */
  /* Alle Karten gleich hoch. Vorher stand hier height:auto, die Hoehe richtete
     sich also nach der Textlaenge: gemessen auf iPhone 13 schwankten die sechs
     Karten zwischen 352 und 396 Pixeln. Beim Durchblaettern sprang der Stapel
     dadurch sichtbar. Auf dem Rechner waren sie immer 600 hoch, dort fiel es
     nicht auf. Jetzt eine feste Hoehe, gedeckelt vom freien Streifen zwischen
     Kopfzeile und den beiden festen Leisten. */
  .kmk-stack-card { grid-template-columns: 1fr; min-height: 0; border-radius: 20px; }
  .kmk-stack-card {
    height: min(
      420px,
      calc(100svh - var(--kmk-frei-oben) - var(--kmk-frei-unten) - 12px)
    );
    max-height: calc(100svh - var(--kmk-frei-oben) - var(--kmk-frei-unten) - 12px);
  }
  /* Der Textteil fuellt den Rest unter dem Bild und schiebt bei Bedarf statt
     die Karte zu dehnen. min-height:0 ist noetig, damit er im Grid schrumpfen
     darf, sonst waechst die Karte doch wieder mit dem Inhalt. */
  .kmk-stack-body { min-height: 0; overflow: hidden; }
  .kmk-stack-visual { order: -1; height: 190px; min-height: 0; }
  .kmk-stack-body { padding: 22px 22px 26px; gap: 14px; }
  .kmk-stack-num { font-size: 2.2rem; }
}
/* Kleine Telefone: Auf einem 640px hohen Geraet bleiben zwischen Kopfzeile und
   den beiden festen Leisten nur rund 450px. Die Karte war dort 565px hoch und
   wurde oben UND unten angeschnitten. Hier ruecken Bild, Abstaende und Schrift
   zusammen, damit sie vollstaendig in den freien Streifen passt. */
@media (max-width: 760px) and (max-height: 760px) {
  .kmk-stack-visual { height: 110px; }
  .kmk-stack-body { padding: 14px 18px 16px; gap: 8px; }
  .kmk-stack-num { font-size: 1.7rem; }
  .kmk-root .kmk-stack-title { font-size: 1.12rem; margin-top: 4px; }
  .kmk-root .kmk-stack-eyebrow { margin-top: 6px; font-size: 0.72rem; }
  .kmk-root .kmk-stack-text {
    font-size: 0.9rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
}
.kmk-bento .kmk-card:not(.feature) p {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kmk-bento .kmk-card.feature {
  grid-column: span 2; grid-row: span 2;
  display: flex; flex-direction: column; min-height: 360px;
  background: linear-gradient(150deg, var(--kmk-red-light), var(--kmk-red) 55%, var(--kmk-red-deep));
  border-color: transparent; color: #fff;
  box-shadow: 0 22px 50px -22px var(--kmk-glow);
}
.kmk-bento .kmk-card.feature::before { display: none; }
.kmk-bento .kmk-card.feature .kmk-card-ico { margin-bottom: auto; width: 58px; height: 58px; background: rgba(255,255,255,0.16); color: #fff; }
.kmk-bento .kmk-card.feature h3 { font-size: clamp(1.4rem, 2.3vw, 1.9rem); margin: 20px 0 10px; color: #fff; }
.kmk-bento .kmk-card.feature p { color: rgba(255,255,255,0.9); font-size: 1.04rem; max-width: 38ch; }
/* Plakette: höhere Spezifität, sonst überschreibt .kmk-card > * die absolute Position */
.kmk-card .kmk-card-flag {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  font-size: 0.68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,0.20); padding: 6px 12px; border-radius: 999px;
}
@media (max-width: 940px) {
  .kmk-bento { grid-template-columns: repeat(2, 1fr); }
  .kmk-bento .kmk-card.feature { grid-column: span 2; grid-row: auto; min-height: 260px; }
}
@media (max-width: 600px) {
  .kmk-bento { grid-template-columns: 1fr; }
  .kmk-bento .kmk-card.feature { grid-column: auto; min-height: 0; }
}
.kmk-card {
  background: linear-gradient(180deg, var(--kmk-bg-2), var(--kmk-bg) 140%);
  border: 1px solid var(--kmk-line); border-radius: 18px; padding: 28px 26px;
  position: relative; overflow: hidden;
}
.kmk-card .kmk-card-ico { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(31,78,155,.10); color: var(--kmk-red-light); margin-bottom: 18px; }
.kmk-card h3 { font-size: 1.18rem; margin-bottom: 10px; }
.kmk-card p { color: var(--kmk-muted); font-size: 0.96rem; }
.kmk-card-tag { position: absolute; top: 22px; right: 22px; font-size: 0.72rem; color: var(--kmk-steel); letter-spacing: .1em; }
@media (min-width: 1024px) {
  .kmk-card { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s; }
  .kmk-card:hover { transform: translateY(-4px); border-color: var(--kmk-line-strong); }
}
/* Spotlight-Schein, der der Maus folgt (Desktop) */
.kmk-card > * { position: relative; z-index: 1; }
.kmk-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(31,78,155,0.14), transparent 70%);
}
@media (min-width: 1024px) { .kmk-card:hover::before { opacity: 1; } }

/* ===================== VERSPRECHEN-BAND (dunkel, Premium-Kontrast) ===================== */
.kmk-promise { position: relative; overflow: hidden; background: linear-gradient(135deg, #eaf1fb 0%, #dce7f8 100%); color: var(--kmk-text); padding: clamp(72px, 9vw, 138px) 0; margin: clamp(40px, 6vw, 84px) 0; clip-path: polygon(0 0, 100% 30px, 100% 100%, 0 calc(100% - 30px)); }
@media (max-width: 600px) { .kmk-promise { clip-path: polygon(0 0, 100% 16px, 100% 100%, 0 calc(100% - 16px)); } }
.kmk-promise::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 84% -12%, rgba(59,111,196,0.16), transparent 60%),
    radial-gradient(760px 520px at -8% 112%, rgba(31,78,155,0.10), transparent 58%);
}
@media (min-width: 1024px) { .kmk-promise::before { animation: kmkPromiseGlow 12s ease-in-out infinite; } }
@keyframes kmkPromiseGlow { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.kmk-promise > .kmk-wrap { position: relative; z-index: 1; }
.kmk-promise-inner { max-width: none; }
.kmk-promise-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kmk-red); margin-bottom: 18px; }
.kmk-promise-h { max-width: 840px; font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; color: var(--kmk-red-deep); }
.kmk-promise-h span { color: var(--kmk-red); }
.kmk-promise-sub { margin-top: 18px; max-width: 680px; color: var(--kmk-muted); font-size: clamp(1.02rem, 1.6vw, 1.16rem); line-height: 1.65; text-wrap: pretty; }
/* ---- Versprechen: schwebende Premium-Karten (versetzt, Hover-Glow) ---- */
.kmk-promise-cards { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; gap: 20px; margin-top: 48px; }
@media (max-width: 980px) { .kmk-promise-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 520px) { .kmk-promise-cards { grid-template-columns: 1fr; } }

.kmk-vcard {
  --vc: #1F4E9B; --vc-soft: rgba(31,78,155,0.10); --vc-glow: rgba(31,78,155,0.18);
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; gap: 20px;
  min-height: 344px; padding: 26px 24px;
  background: #fff;
  border: 1px solid rgba(31,78,155,0.12); border-radius: 22px;
  box-shadow: 0 22px 44px -30px rgba(31,78,155,0.45);
}

.kmk-vcard-glow { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, var(--vc-glow), transparent 68%); }

/* Kopfzeile der Karte: Rubrik links, Zusatz rechts. align-items:flex-start, damit
   ein umbrechender Zusatz („Meister seit 1991") oben buendig bleibt. */
.kmk-vcard-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.kmk-vcard-tag { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kmk-muted); border: 1px solid var(--kmk-line); background: #fff; padding: 5px 10px; border-radius: 8px; white-space: nowrap; flex: 0 0 auto; }
/* KEIN nowrap: der Zusatz stiess sonst an den Kartenrand, seit die Rubrik-Schrift
   global auf 0.8rem vergroessert wurde (22.09.2026, „Meister seit 1991"). */
.kmk-vcard-acc { font-size: 0.82rem; font-weight: 700; color: var(--vc); text-align: right;
  min-width: 0; line-height: 1.3; text-wrap: balance; }

.kmk-vcard-icon { position: relative; z-index: 1; align-self: center; justify-self: center;
  display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: var(--vc-soft); color: var(--vc);
  box-shadow: inset 0 0 0 1px rgba(31,78,155,0.10); }

.kmk-vcard-foot { position: relative; z-index: 1; border-top: 1px solid var(--kmk-line); padding-top: 16px; }
.kmk-vcard-num { display: block; font-size: clamp(1.55rem, 2.3vw, 2.05rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--vc); }
/* Der Pfeil sitzt auf jeder Karte an derselben Stelle: rechts auf der letzten Zeile.
   Vorher klebte er bei einzeiligen Beschriftungen am Text und sprang von Karte zu Karte. */
.kmk-vcard-lbl { margin-top: 8px; display: flex; align-items: flex-end; gap: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kmk-muted); line-height: 1.35; }
.kmk-vcard-lbl svg { flex: 0 0 auto; margin-left: auto; margin-bottom: 2px; color: var(--vc); opacity: 0.75; }

/* Versetzte „Schwebe"-Anordnung + Hover nur auf Desktop (GPU-schonend, Touch hat kein Hover) */
@media (min-width: 1024px) {
  .kmk-vcard { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease; }
  .kmk-vcard-glow { transition: opacity .45s ease; }
  .kmk-vcard-icon { transition: transform .45s cubic-bezier(.16,1,.3,1), background-color .45s ease, color .45s ease; }
  .kmk-vcard-num { transition: transform .3s ease; }
  .kmk-vcard:hover { transform: translateY(-8px); border-color: var(--vc); box-shadow: 0 32px 54px -30px var(--vc-glow); }
  .kmk-vcard:hover .kmk-vcard-glow { opacity: 1; }
  .kmk-vcard:hover .kmk-vcard-icon { background: var(--vc); color: #fff; transform: scale(1.07); box-shadow: 0 14px 26px -14px var(--vc-glow); }
  .kmk-vcard:hover .kmk-vcard-num { transform: translateX(3px); }
}
.kmk-promise-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 68px; }
/* Telefon als Pill im gleichen Stil wie der Haupt-Button, nur hell (Sekundär-Aktion) */
.kmk-promise-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border-radius: 14px; white-space: nowrap;
  background: #fff; border: 1px solid var(--kmk-line-strong);
  font-weight: 700; font-size: 0.98rem; color: var(--kmk-red);
  box-shadow: 0 10px 26px -16px rgba(31,78,155,0.40);
}
.kmk-promise-tel svg { color: var(--kmk-red-light); }
@media (min-width: 1024px) {
  .kmk-promise-tel { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, background .3s; }
  .kmk-promise-tel:hover { transform: translateY(-2px); border-color: var(--kmk-red); background: rgba(31,78,155,0.05); }
}

/* ===================== PARALLAX-FOTO-BAND ===================== */
.kmk-parallax { position: relative; overflow: hidden; min-height: clamp(420px, 60vh, 620px); display: flex; align-items: center; margin: clamp(40px, 6vw, 84px) 0; background: #0a0f18; }
/* Bild spürbar heller (Kundenwunsch #9: „Grafik ist zu dunkel") */
.kmk-parallax-img { position: absolute; left: 0; top: -20%; width: 100%; height: 140%; object-fit: cover; object-position: center; z-index: 0; will-change: transform; filter: brightness(1.34) saturate(1.06); }
/* Abdunklung nur noch so stark, wie der weiße Text zum Lesen braucht */
.kmk-parallax-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,18,34,0.72) 0%, rgba(10,18,34,0.44) 40%, rgba(10,18,34,0.14) 74%, rgba(10,18,34,0.02) 100%),
    linear-gradient(180deg, rgba(10,18,34,0.18), transparent 32%, transparent 68%, rgba(10,18,34,0.26));
}
.kmk-parallax > .kmk-wrap { position: relative; z-index: 2; width: 100%; }
.kmk-parallax-inner { max-width: 620px; }
.kmk-parallax-eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8fb4ee; margin-bottom: 16px; }
.kmk-parallax-h { font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: #fff; text-wrap: balance; margin-bottom: clamp(34px, 6vh, 64px); text-shadow: 0 2px 24px rgba(0,0,0,0.5); }
.kmk-parallax-h span { color: #74a3ec; }
/* CTA leicht tiefer — echter Abstand statt Versatz, damit der Akzentstrich
   des Blocks (.kmk-wipe::after) direkt unter der Pill bleibt */
.kmk-parallax-inner .kmk-btn-primary { margin-top: clamp(6px, 1.2vh, 12px); }

/* ===== Ablauf: gepinnt, Auto fährt die Strecke, Schritte leuchten nacheinander auf ===== */
.kmk-ablauf { position: relative; height: 300vh; margin: clamp(40px, 6vw, 84px) 0; }
.kmk-ablauf-pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; }
.kmk-ablauf-pin > .kmk-wrap { position: relative; z-index: 1; width: 100%; }

.kmk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; padding-top: 8px; margin-top: clamp(24px, 4vw, 48px); --p: 0; }

/* Strecke (gestrichelt) + Leucht-Füllung + fahrendes Auto — nur Desktop */
.kmk-steps-track { display: none; }
@media (min-width: 901px) {
  .kmk-steps-track { display: block; position: absolute; top: 38px; left: 12.5%; right: 12.5%; height: 4px; z-index: 0;
    background: repeating-linear-gradient(90deg, rgba(31,78,155,0.32) 0 13px, transparent 13px 26px); border-radius: 3px; }
  .kmk-steps-fill { position: absolute; top: 0; left: 0; height: 100%; width: calc(var(--p) * 100%);
    background: linear-gradient(90deg, var(--kmk-red-light), var(--kmk-red)); border-radius: 3px; box-shadow: 0 0 14px rgba(31,78,155,0.55); }
  .kmk-steps-car { position: absolute; top: 50%; left: calc(var(--p) * 100%); transform: translate(-50%, -50%);
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--kmk-red);
    background: #fff; box-shadow: 0 8px 20px -6px var(--kmk-glow), 0 0 0 4px rgba(31,78,155,0.12); z-index: 3; }
}

/* Schritte bleiben durchgehend dunkelblau — sie LEUCHTEN nur auf (Glow + Puls), wenn das Auto sie erreicht */
.kmk-step { position: relative; z-index: 1; text-align: center; }
.kmk-step-badge {
  width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; font-weight: 800; color: #fff; letter-spacing: -0.01em;
  background: linear-gradient(140deg, var(--kmk-red-light), var(--kmk-red) 55%, var(--kmk-red-deep));
  box-shadow: 0 10px 22px -12px var(--kmk-glow), inset 0 1px 0 rgba(255,255,255,0.28);
  position: relative; z-index: 2; transition: box-shadow .4s ease;
}
.kmk-step.lit .kmk-step-badge { box-shadow: 0 0 0 8px rgba(31,78,155,0.16), 0 0 26px rgba(31,78,155,0.55), 0 14px 30px -8px var(--kmk-glow), inset 0 1px 0 rgba(255,255,255,0.28); animation: kmkBadgePulse .6s ease; }
@keyframes kmkBadgePulse { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
.kmk-step h3 { font-size: 1.12rem; margin: 0 0 8px; color: var(--kmk-red); }
.kmk-step p { color: var(--kmk-muted); font-size: 0.94rem; }

/* Mobil/Tablet: kein Pin, Schritte untereinander, leuchten beim Reinscrollen (JS) */
@media (max-width: 900px) {
  .kmk-ablauf { height: auto; margin: 0; }
  .kmk-ablauf-pin { position: static; min-height: 0; display: block; padding: clamp(56px, 10vw, 90px) 0; }
  .kmk-steps { grid-template-columns: 1fr; gap: 24px; padding-top: 0; max-width: 460px; margin: 24px auto 0; }
}

/* Rechte (zwei Spalten) */
.kmk-rights { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .kmk-rights { grid-template-columns: 1fr; } }
.kmk-rights-col { border: 1px solid var(--kmk-line); border-radius: 18px; padding: 30px 28px; }
.kmk-rights-col.yes { background: linear-gradient(160deg, #e9f1fc 0%, #d8e5f7 100%); border-color: rgba(31,78,155,0.22); border-left: 3px solid var(--kmk-red); }
.kmk-rights-col.no { background: #ffffff; border-left: 3px solid var(--kmk-steel); }
.kmk-rights-col h3 { font-size: 1.2rem; margin-bottom: 18px; }
.kmk-rights-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.kmk-rights-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.98rem; color: var(--kmk-text); }
.kmk-rights-list li svg { flex: 0 0 auto; margin-top: 2px; }
.kmk-rights-col.yes svg { color: var(--kmk-red-light); }
.kmk-rights-col.no svg { color: var(--kmk-steel); }
.kmk-rights-list li span { color: var(--kmk-muted); }

/* Person / Gutachter */
.kmk-person-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 46px; align-items: center; }
@media (max-width: 860px) { .kmk-person-wrap { grid-template-columns: 1fr; gap: 30px; } }
.kmk-portrait { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--kmk-line-strong); background: linear-gradient(160deg, var(--kmk-bg-3), var(--kmk-bg)); aspect-ratio: 4 / 5; display: flex; align-items: flex-end; justify-content: center; }
.kmk-portrait .kmk-portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.kmk-portrait .kmk-portrait-ph { color: var(--kmk-steel); display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 40px; opacity: .8; }
.kmk-portrait .kmk-portrait-ph span { font-size: 0.8rem; letter-spacing: .04em; }
.kmk-portrait-tag { position: absolute; left: 14px; bottom: 14px; font-size: 0.72rem; letter-spacing: .04em; background: rgba(8,10,14,.78); color: #fff; padding: 6px 11px; border-radius: 8px; }
.kmk-quote { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.55; color: var(--kmk-text); margin: 18px 0; font-weight: 400; }
.kmk-quote .kmk-qmark { color: var(--kmk-red); font-weight: 800; }
.kmk-person { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.kmk-person b { font-size: 1.06rem; }
.kmk-person span { font-size: 0.9rem; color: var(--kmk-muted); }
.kmk-creds { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.kmk-creds li { display: flex; align-items: center; gap: 10px; font-size: 0.96rem; font-weight: 600; color: var(--kmk-text); }
.kmk-creds li svg { flex: 0 0 auto; color: var(--kmk-red-light); }

/* FAQ */
.kmk-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
/* Zwei Spalten (Startseite): zehn Fragen untereinander ergaben eine sehr
   lange, schmale Spalte. Die Fragen sind unabhaengig voneinander — nebeneinander
   liest man sie genauso. align-items: start, damit sich eine geoeffnete Antwort
   nicht auf die Nachbarspalte auswirkt. */
.kmk-faq-zwei {
  max-width: 1080px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; gap: 12px clamp(16px, 2vw, 24px);
}
@media (max-width: 860px) { .kmk-faq-zwei { grid-template-columns: 1fr; } }
/* Gleiche Hoehe fuer alle geschlossenen Fragen: manche Fragen passen in eine
   Zeile, andere brauchen zwei — nebeneinander sah das aus wie ein Fehler.
   94px = zwei Zeilen plus Innenabstand. Nur im zweispaltigen Fall noetig;
   untereinander faellt der Unterschied nicht auf und wuerde nur Platz kosten. */
@media (min-width: 861px) {
  .kmk-faq-zwei .kmk-faq-q { min-height: 94px; }
}
.kmk-faq-item { background: linear-gradient(180deg, #eef3fc, #e3edfa); border: 1px solid #d3e0f4; border-radius: 14px; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; }
.kmk-faq-item.open { border-color: #bcd2f0; box-shadow: 0 14px 30px -22px rgba(31,78,155,0.45); }
@media (min-width: 1024px) { .kmk-faq-item:hover { border-color: #bcd2f0; } }
.kmk-faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--kmk-red); padding: 18px 22px; font-size: 1.06rem; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.kmk-faq-q svg { flex: 0 0 auto; color: var(--kmk-red-light); transition: transform .3s ease; }
.kmk-faq-item.open .kmk-faq-q svg { transform: rotate(45deg); }
.kmk-faq-a { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.kmk-faq-item.open .kmk-faq-a { max-height: 640px; }
.kmk-faq-a-inner { padding: 2px 22px 20px; color: var(--kmk-muted); font-size: 0.98rem; max-width: 720px; }

/* Kontakt / CTA */
.kmk-cta { position: relative; }
.kmk-cta-card {
  background: linear-gradient(135deg, var(--kmk-bg-3), var(--kmk-bg-2));
  border: 1px solid var(--kmk-line-strong); border-radius: 24px; padding: clamp(32px, 5vw, 64px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center;
}
@media (max-width: 860px) { .kmk-cta-card { grid-template-columns: 1fr; gap: 32px; } }
.kmk-cta-card h2 { margin-bottom: 16px; }
.kmk-contact-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.kmk-contact-row { display: flex; align-items: center; gap: 13px; font-size: 1rem; }
.kmk-contact-row svg { color: var(--kmk-red-light); flex: 0 0 auto; }
.kmk-contact-row b { font-weight: 700; }
.kmk-form { display: flex; flex-direction: column; gap: 14px; }
.kmk-field label { display: block; font-size: 0.82rem; color: var(--kmk-muted); margin-bottom: 7px; letter-spacing: .02em; }
.kmk-field input, .kmk-field select, .kmk-field textarea {
  width: 100%; background: rgba(18,32,56,.03); border: 1px solid var(--kmk-line-strong); border-radius: 12px;
  padding: 13px 15px; color: var(--kmk-text); font-size: 0.96rem; font-family: inherit; outline: none;
  transition: border-color .2s;
}
.kmk-field input:focus, .kmk-field select:focus, .kmk-field textarea:focus { border-color: var(--kmk-red); }
.kmk-field textarea { resize: vertical; min-height: 96px; }
.kmk-form-note { font-size: 0.8rem; color: var(--kmk-steel); }

/* Footer */
.kmk-footer { border-top: 1px solid var(--kmk-line); padding: 60px 0 40px; margin-top: 30px; background: linear-gradient(180deg, #f3f7fc, #e9f0fa); }
.kmk-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
@media (max-width: 760px) { .kmk-footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.kmk-footer h4 { font-size: 0.8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--kmk-red-light); margin-bottom: 16px; }
.kmk-footer p, .kmk-footer a { color: var(--kmk-muted); font-size: 0.95rem; line-height: 1.9; }
.kmk-footer a:hover { color: var(--kmk-text); }
.kmk-footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--kmk-line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 0.85rem; color: var(--kmk-steel); }
.kmk-footer-links { line-height: 2; }

/* Kanaele im Footer: Google-Bewertungen, Social, WhatsApp.
   Instagram und Facebook erscheinen NUR, wenn in config.ts eine Adresse
   hinterlegt ist (leerer String = aus). Stand 27.08.2026 hat der Betrieb
   keine eigenen Profile, deshalb sind die Felder dort leer. */
.kmk-footer-social a {
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 2.1; transition: color .2s ease;
}
.kmk-footer-social a svg { flex: 0 0 auto; opacity: 0.8; }
.kmk-footer-social a:hover svg { opacity: 1; }
.kmk-footer-legal a { color: var(--kmk-steel); }
.kmk-footer-legal a:hover { color: var(--kmk-red); text-decoration: underline; }
.kmk-areas { color: var(--kmk-muted); font-size: 0.92rem; line-height: 1.8; }

/* Fester Aktionsbalken auf dem Handy */
.kmk-mobilebar { display: none; }
@media (max-width: 759px) {
  .kmk-mobilebar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); border-top: 1px solid var(--kmk-line-strong);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .kmk-mobilebar .kmk-btn { padding: 13px 14px; font-size: 0.92rem; }
  .kmk-footer { padding-bottom: 96px; }

  /* Solange der Aufmacher im Bild steht, ist die Leiste weggeschoben. Der
     Platz bleibt reserviert (die Leiste behaelt ihre Hoehe), damit beim
     Einblenden nichts springt. Gesteuert von useMobilLeiste.ts. */
  .kmk-mobilebar {
    transform: translateY(0);
    transition: transform .28s ease, opacity .28s ease;
  }
  .kmk-mobilebar-aus {
    transform: translateY(115%);
    opacity: 0;
    pointer-events: none;
  }
  /* Wer Bewegung reduziert hat, bekommt den Wechsel ohne Fahrt. */
  @media (prefers-reduced-motion: reduce) {
    .kmk-mobilebar { transition: opacity .2s ease; }
    .kmk-mobilebar-aus { transform: none; }
  }
}

/* ============================================================
   WERDEGANG (Über-uns): Porträt bleibt links stehen, der Zeitstrahl
   scrollt rechts daran vorbei. Die Stationen blenden dabei einzeln ein.
   Voraussetzung: KEIN Elternelement mit overflow hidden/auto — sonst
   funktioniert position: sticky nicht mehr (.kmk-root nutzt overflow-x: clip).
   ============================================================ */
.kmk-vita {
  display: grid; grid-template-columns: minmax(260px, 0.85fr) 1.15fr;
  gap: clamp(28px, 4vw, 56px); align-items: start;
  margin-top: clamp(26px, 3.5vw, 40px);
}
@media (max-width: 900px) { .kmk-vita { grid-template-columns: 1fr; gap: 28px; } }

/* Der stehenbleibende Teil. 145px = fixe Kopfzeile (125) + etwas Luft. */
.kmk-vita-media { position: sticky; top: 145px; }
@media (max-width: 900px) { .kmk-vita-media { position: static; max-width: 420px; } }
@media (max-width: 700px) { .kmk-vita-media { top: 105px; } } /* Kontaktleiste ausgeblendet */

.kmk-vita-figure {
  /* Hoehe begrenzt: waere das Bild so hoch wie der Zeitstrahl, bliebe kein Weg,
     an dem es stehenbleiben koennte — der Effekt fiele aus. 520px ist der
     groesste Wert, bei dem beide Werdegaenge noch sichtbar daran vorbeilaufen. */
  position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: min(62vh, 520px); overflow: hidden;
  border-radius: 24px; border: 1px solid var(--kmk-line);
  background: linear-gradient(150deg, var(--kmk-bg-3), var(--kmk-bg-2));
  box-shadow: 0 30px 62px -40px rgba(20, 40, 80, 0.5);
  display: grid; place-items: center;
}
.kmk-vita-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kmk-vita-figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(8, 16, 30, 0.74) 100%);
}
.kmk-vita-figure figcaption {
  position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px;
  display: flex; flex-direction: column; gap: 3px; color: #fff;
}
.kmk-vita-figure figcaption b { font-size: 1.24rem; font-weight: 800; line-height: 1.2; text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.kmk-vita-figure figcaption small { font-size: 0.86rem; font-weight: 600; color: #bcd3f5; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.kmk-vita-initials {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 104px; height: 104px; border-radius: 50%;
  background: linear-gradient(140deg, var(--kmk-red-light), var(--kmk-red) 60%, var(--kmk-red-deep));
  color: #fff; font-size: 2.2rem; font-weight: 900;
}
/* --- Plaketten in zwei versetzten Reihen -------------------------------
   Eine einzelne Plakette allein in einer Zeile sieht nach Versehen aus.
   Die Aufteilung passiert im Code (koeln-parts.tsx), hier nur das Aussehen:
   die zweite Reihe sitzt leicht eingerueckt, das ergibt den versetzten Look. */
/* Rolle und Jahrgang unter der Kurzvorstellung */
.kmk-root .kmk-vita-rolle {
  margin-top: 14px; color: var(--kmk-red-light);
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.005em;
}

/* --- Zahlenband (Kopf der Ueber-uns-Seite) ------------------------------
   Ersetzt den frueheren reinen Textabschnitt: vier belegte Zahlen sagen in
   einer Zeile, was vorher zwei Absaetze gebraucht haben. */
.kmk-zahlen {
  margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
@media (max-width: 980px) { .kmk-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kmk-zahlen { grid-template-columns: 1fr; } }
.kmk-zahlen > div {
  padding: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(160deg, #fff, var(--kmk-bg-2));
  border: 1px solid var(--kmk-line); border-radius: 18px;
  box-shadow: 0 18px 40px -34px rgba(20, 40, 80, 0.5);
}
.kmk-root .kmk-zahlen dt {
  font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em;
  color: var(--kmk-red); line-height: 1.1;
}
.kmk-root .kmk-zahlen dd {
  margin: 8px 0 0; color: var(--kmk-muted); font-size: 0.92rem; line-height: 1.5;
}

/* --- Sponsoring: Text neben den beiden Vereinen ------------------------- */
.kmk-sponsoring {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
@media (max-width: 900px) { .kmk-sponsoring { grid-template-columns: 1fr; } }
.kmk-root .kmk-sponsoring-note {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  color: var(--kmk-muted); font-size: 0.9rem; font-weight: 600;
}
.kmk-sponsoring-note svg { color: var(--kmk-red-light); }
.kmk-vereine { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kmk-vereine li {
  display: flex; flex-direction: column; gap: 3px;
  padding: clamp(20px, 2.4vw, 26px);
  background: #fff; border: 1px solid var(--kmk-line); border-radius: 18px;
  box-shadow: 0 20px 44px -34px rgba(20, 40, 80, 0.45);
}
.kmk-verein-ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  margin-bottom: 8px; color: var(--kmk-red);
  background: linear-gradient(140deg, rgba(31,78,155,0.13), rgba(31,78,155,0.05));
}
.kmk-root .kmk-vereine b { font-size: 1.05rem; font-weight: 800; color: var(--kmk-red); line-height: 1.3; }
.kmk-root .kmk-vereine small {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--kmk-steel);
}
@media (min-width: 1024px) {
  .kmk-vereine li { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s; }
  .kmk-vereine li:hover { transform: translateY(-3px); border-color: rgba(31,78,155,0.28); }
}

/* --- Reihe, die beim Scrollen seitwaerts durchwandert -------------------
   Grundzustand (Handy, "weniger Bewegung", kein JavaScript): eine ganz normale
   Wisch-Reihe. Erst wenn das Skript den Effekt einschaltet, kommt .aktiv dazu
   und die Sektion bleibt stehen, waehrend die Reihe seitwaerts laeuft. */
.kmk-hscroll { margin-top: clamp(28px, 4vw, 48px); }
/* Abstand wie bei jedem anderen Karten-Raster der Seite (48px am Desktop) —
   die Sektion soll sich in den Rhythmus einfuegen und nicht auffallen.
   Die Ueberschrift verschwindet trotzdem rechtzeitig: beim Einrasten liegt
   ihre Unterkante bei 125 - 48 = 77px und damit hinter der Kopfzeile. */
.kmk-hscroll-pin { }
.kmk-hscroll-spur {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 44px) / 3);
  gap: 22px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 18px; margin: -4px -4px 0;
  scrollbar-width: none;
}
.kmk-hscroll-spur::-webkit-scrollbar { display: none; }
.kmk-hscroll-teil { scroll-snap-align: start; display: flex; }
.kmk-hscroll-teil > * { width: 100%; }
@media (max-width: 900px) { .kmk-hscroll-spur { grid-auto-columns: calc((100% - 22px) / 2); } }
@media (max-width: 620px) { .kmk-hscroll-spur { grid-auto-columns: 86%; gap: 14px; } }

/* Eingeschalteter Effekt: der innere Bereich bleibt stehen, die Reihe wird
   ueber transform bewegt — kein eigenes Scrollen mehr, sonst haette man zwei
   Scroll-Ebenen uebereinander und genau das fuehlt sich kaputt an. */
.kmk-hscroll.aktiv .kmk-hscroll-pin {
  position: sticky;
  /* Kopfzeile und Laufband sind fixiert und lagen sonst ueber den Karten */
  top: 125px;
  /* Nicht den ganzen freien Streifen ausfuellen: bei 735px Hoehe und 300px
     hohen Karten blieben ueber 400px Leerraum, dadurch wirkte der Abstand zur
     Ueberschrift riesig. Jetzt nur so hoch wie noetig. */
  height: min(calc(100vh - 125px - 40px), 540px);
  display: flex; align-items: center;
  /* KEIN eigenes Abschneiden: die Reihe darf ueber die Textspalte hinaus nach
     rechts laufen. Abgeschnitten wird sie erst von der Sektion selbst, und die
     geht ueber die volle Bildschirmbreite (.kmk-deco-sec hat overflow: clip).
     Vorher endete die Reihe an der Kante der Textspalte — das sah aus, als
     waere die Sektion zu schmal. */
  overflow: visible;
}
/* Punktfelder im stehenden Bereich: nur waehrend des Laufs, und hinter den
   Karten. In der Wisch-Fassung (Handy) bleiben sie aus — dort waere der
   Bereich zu schmal und sie laegen quer ueber den Karten. */
.kmk-hscroll > .kmk-hscroll-pin > .kmk-dots { display: none; }
/* Beide Ecken zeigen, auch wenn die Sektion sonst nur eine davon einblendet:
   im stehenden Bereich rahmen sie die Reihe oben rechts und unten links.
   Die Klassen .tr/.bl stehen mit drin, um die abwechselnde Regel der Sektion
   zu ueberstimmen — sonst waeren beide Regeln gleich stark. */
.kmk-hscroll.aktiv > .kmk-hscroll-pin > .kmk-dots.tr,
.kmk-hscroll.aktiv > .kmk-hscroll-pin > .kmk-dots.bl,
.kmk-hscroll.aktiv > .kmk-hscroll-pin > .kmk-dots.rand { display: block; z-index: 0; }

/* Felder in den Seitenraendern — dort liegen keine Karten drueber, deshalb
   sieht man sie wirklich. Ausrichtung ueber margin statt transform: das
   transform gehoert dem Skript, das die Felder beim Lauf mitwandern laesst. */
.kmk-hscroll.aktiv > .kmk-hscroll-pin > .kmk-dots.rand {
  width: clamp(320px, 30vw, 460px);
  top: 50%; bottom: auto; margin-top: -18%;
}
.kmk-hscroll.aktiv > .kmk-hscroll-pin > .kmk-dots.rand.links {
  left: auto; right: 100%; margin-right: -170px;
}
.kmk-hscroll.aktiv > .kmk-hscroll-pin > .kmk-dots.rand.rechts {
  right: auto; left: 100%; margin-left: -170px;
}
.kmk-hscroll.aktiv .kmk-hscroll-spur { position: relative; z-index: 1; }
/* Die Felder der Sektion selbst waehrenddessen aus: sie haengen am unteren
   Rand der ueber 4000px hohen Sektion und tauchten erst ganz am Schluss auf. */
.kmk-section:has(.kmk-hscroll.aktiv) > .kmk-dots { display: none; }

.kmk-hscroll.aktiv .kmk-hscroll-spur {
  overflow: visible; scroll-snap-type: none;
  width: max-content; grid-auto-columns: 460px;
  will-change: transform; padding-bottom: 4px;
  /* Startet an der Kante der Textspalte, weil die Reihe darin liegt. Der
     negative Aussenabstand aus der Wisch-Fassung muss hier weg, sonst stuende
     die erste Karte 4px links davon.
     Rechts derselbe Abstand wie links: waehrend des Laufs wird trotzdem erst
     am Bildschirmrand abgeschnitten, aber am ENDE steht die letzte Karte
     vollstaendig da statt an der Kante zu kleben. */
  padding-left: 0; margin-left: 0;
  padding-right: var(--kmk-hscroll-rand, 24px);
}
/* Kein einzelnes Einblenden innerhalb der Reihe: die Karten weiter rechts
   liegen ausserhalb des Bildes, der Einblende-Beobachter loeste also erst aus,
   wenn eine Karte hereingewandert kam — sie ploppte dann mitten im Lauf auf.
   Die Reihe erscheint als Ganzes, sichtbar ist ab dem ersten Moment alles.
   Hoehere Spezifitaet als .reveal.in, deshalb ohne !important. */
.kmk-hscroll .kmk-hscroll-teil .reveal { opacity: 1; transform: none; transition: none; }

/* Groessere Karten mit mittig sitzendem Inhalt: bei kurzen Texten stand sonst
   alles oben und darunter blieb Leere. Bewusst nicht groesser als das —
   daruber wirken die kurzen Texte in der Flaeche verloren. */
.kmk-hscroll.aktiv .kmk-hscroll-teil > .kmk-card {
  min-height: 400px; padding: 38px 34px;
  display: flex; flex-direction: column; justify-content: center;
  /* Weiss statt des blassen Verlaufs, dazu ein Lichtschein oben links —
     die Karten hoben sich vorher kaum vom Sektionshintergrund ab. */
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(31, 78, 155, 0.09), rgba(31, 78, 155, 0) 55%),
    #fff;
  border-color: rgba(31, 78, 155, 0.14);
  box-shadow: 0 26px 54px -34px rgba(20, 40, 80, 0.5);
}
/* Farbkante oben — gibt jeder Karte eine klare Oberkante statt sie im
   Hintergrund verlaufen zu lassen. */
.kmk-hscroll.aktiv .kmk-hscroll-teil > .kmk-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--kmk-red), var(--kmk-red-light) 60%, rgba(31,78,155,0.15));
  opacity: 0.55; transition: opacity .35s ease;
}
/* Laufende Nummer im Hintergrund (aus dem CSS-Zaehler, keine Daten noetig).

   ACHTUNG: .kmk-card::before ist im Grundstil bereits belegt — dort liegt der
   Lichtschein, der auf dem Desktop der Maus folgt (opacity: 0, erst beim
   Zeigen 1). Ohne die beiden Zeilen unten erbt die Nummer dieses opacity: 0
   und ist unsichtbar, bis man mit der Maus darueberfaehrt. Genau das war der
   Fehler: die 01 fehlte, und die Nummern kamen beim Zeigen statt beim Scrollen.
   Innerhalb der Reihe ersetzt die Nummer den Lichtschein — der Fokus kommt
   hier ohnehin vom Scrollen, nicht von der Maus. */
.kmk-hscroll-spur { counter-reset: kmk-leistung; }
.kmk-hscroll-teil { counter-increment: kmk-leistung; }
.kmk-hscroll.aktiv .kmk-hscroll-teil > .kmk-card::before {
  content: counter(kmk-leistung, decimal-leading-zero);
  /* left und bottom MUESSEN zurueckgesetzt werden: der Lichtschein im
     Grundstil setzt 'inset: 0'. Bleiben left und bottom auf 0, spannt sich die
     Nummer ueber die ganze Karte und der Text steht links statt rechts.
     Und kein 'inset'-Kurzschreiben verwenden — das setzt auch top zurueck,
     dann rutscht die Nummer mitten in den Text. */
  position: absolute; top: 16px; right: 24px; left: auto; bottom: auto;
  pointer-events: none;
  opacity: 1;          /* schlaegt das opacity: 0 des Lichtscheins */
  background: none;    /* der Lichtschein-Verlauf muss weg */
  font-size: 4.2rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: rgba(31, 78, 155, 0.13);
}
/* Symbol als kraeftiges Abzeichen statt blasser Flaeche */
.kmk-hscroll.aktiv .kmk-hscroll-teil .kmk-card-ic {
  width: 60px; height: 60px; border-radius: 17px; color: #fff;
  background: linear-gradient(140deg, var(--kmk-red-light), var(--kmk-red) 55%, var(--kmk-red-deep));
  box-shadow: 0 14px 28px -14px var(--kmk-glow);
}
.kmk-root .kmk-hscroll.aktiv .kmk-hscroll-teil .kmk-h3 { font-size: 1.3rem; }
.kmk-root .kmk-hscroll.aktiv .kmk-hscroll-teil .kmk-card p { font-size: 1.02rem; line-height: 1.65; }

/* Die Karte, die gerade in der Bildmitte steht, tritt hervor. Das Skript
   vergibt die Klasse (siehe ScrollReihe.tsx) — dadurch wandert der Fokus
   mit, waehrend die Reihe durchlaeuft. */
.kmk-hscroll.aktiv .kmk-hscroll-teil > .kmk-card {
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.kmk-hscroll.aktiv .kmk-hscroll-teil.imBlick > .kmk-card {
  transform: translateY(-10px);
  border-color: rgba(31, 78, 155, 0.34);
  box-shadow: 0 40px 70px -34px rgba(20, 40, 80, 0.6), 0 0 0 1px rgba(31, 78, 155, 0.06);
}
.kmk-hscroll.aktiv .kmk-hscroll-teil.imBlick > .kmk-card::after { opacity: 1; }
.kmk-hscroll.aktiv .kmk-hscroll-teil > .kmk-card::before { transition: color .45s ease; }
.kmk-hscroll.aktiv .kmk-hscroll-teil.imBlick > .kmk-card::before { color: rgba(31, 78, 155, 0.24); }
.kmk-hscroll.aktiv .kmk-hscroll-teil.imBlick .kmk-card-ic { box-shadow: 0 18px 34px -12px var(--kmk-glow); }
@media (prefers-reduced-motion: reduce) {
  .kmk-hscroll.aktiv .kmk-hscroll-teil > .kmk-card { transition: none; }
  .kmk-hscroll.aktiv .kmk-hscroll-teil.imBlick > .kmk-card { transform: none; }
}

/* --- Wisch-Fassung (Handy und Tablet) ------------------------------------
   Auf dem Telefon bleibt die Sektion nicht stehen — dort waere ein
   festgehaltener Bildschirm unangenehm. Der Schmuck soll trotzdem mit:
   ohne diese Regeln fehlten der Reihe genau die Dinge, die sie am Desktop
   ausmachen (laufende Nummer, kraeftiges Symbol, Farbkante oben), und die
   Karten wirkten wie eine abgespeckte Restfassung. */
.kmk-hscroll:not(.aktiv) .kmk-hscroll-teil > .kmk-card {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(31, 78, 155, 0.09), rgba(31, 78, 155, 0) 55%),
    #fff;
  border-color: rgba(31, 78, 155, 0.14);
  box-shadow: 0 20px 40px -30px rgba(20, 40, 80, 0.5);
}
.kmk-hscroll:not(.aktiv) .kmk-hscroll-teil > .kmk-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--kmk-red), var(--kmk-red-light) 60%, rgba(31,78,155,0.15));
  opacity: 0.6;
}
/* Gleiche Vorsichtsmassnahme wie oben: .kmk-card::before ist im Grundstil
   der Lichtschein (opacity: 0, inset: 0). Ohne das Zuruecksetzen bliebe die
   Nummer unsichtbar und spannte sich ueber die ganze Karte. */
.kmk-hscroll:not(.aktiv) .kmk-hscroll-teil > .kmk-card::before {
  content: counter(kmk-leistung, decimal-leading-zero);
  position: absolute; top: 12px; right: 18px; left: auto; bottom: auto;
  pointer-events: none; opacity: 1; background: none;
  font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: rgba(31, 78, 155, 0.12);
}
.kmk-hscroll:not(.aktiv) .kmk-hscroll-teil .kmk-card-ic {
  width: 52px; height: 52px; border-radius: 15px; color: #fff;
  background: linear-gradient(140deg, var(--kmk-red-light), var(--kmk-red) 55%, var(--kmk-red-deep));
  box-shadow: 0 12px 24px -14px var(--kmk-glow);
}

/* Wisch-Hinweis: nur solange die Reihe wirklich gewischt wird. */
.kmk-hscroll-wisch {
  margin: 2px 0 0; text-align: right;
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--kmk-muted); opacity: 0.85;
}
.kmk-hscroll.aktiv .kmk-hscroll-wisch { display: none; }

/* --- Waagerechtes Mitwandern beim Scrollen (Wert kommt aus useScrollDrift) */
.kmk-drift { display: flex; transform: translate3d(var(--kmk-drift, 0px), 0, 0); }
.kmk-drift > * { width: 100%; }
@media (min-width: 1024px) { .kmk-drift { transition: transform .2s linear; will-change: transform; } }
@media (prefers-reduced-motion: reduce) { .kmk-drift { transform: none; transition: none; } }

/* --- Nachweise als Siegel-Reihe -----------------------------------------
   Gleich grosse Karten in EINER Reihe: so kann keine allein stehen bleiben.
   Zwei Zeilen Text je Karte — Titel und die ausstellende Stelle. */
.kmk-siegel {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; gap: clamp(10px, 1.2vw, 14px);
}
.kmk-siegel.spalten-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kmk-siegel.spalten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kmk-siegel.spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kmk-siegel.spalten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kmk-siegel.spalten-1 { grid-template-columns: minmax(0, 320px); }
/* Tablet: hoechstens drei nebeneinander, sonst wird der Text zu schmal.
   Bei fuenf Siegeln ergibt das 3 + 2 — beide Zeilen sind gefuellt. */
@media (max-width: 1080px) {
  .kmk-siegel.spalten-5, .kmk-siegel.spalten-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .kmk-siegel { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 460px) {
  .kmk-siegel { grid-template-columns: 1fr !important; }
}

.kmk-siegel li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 14px 15px; border-radius: 14px;
  background: #fff; border: 1px solid var(--kmk-line);
  box-shadow: 0 14px 32px -30px rgba(20, 40, 80, 0.5);
}
.kmk-siegel-ic {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  margin-bottom: 7px; color: var(--kmk-red);
  background: linear-gradient(140deg, rgba(31,78,155,0.13), rgba(31,78,155,0.05));
}
.kmk-root .kmk-siegel b {
  font-size: 0.88rem; font-weight: 800; color: var(--kmk-red); line-height: 1.25;
  letter-spacing: -0.005em;
}
.kmk-root .kmk-siegel small {
  font-size: 0.76rem; font-weight: 400; color: var(--kmk-muted); line-height: 1.38;
}
@media (min-width: 1024px) {
  .kmk-siegel li { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s; }
  .kmk-siegel li:hover { transform: translateY(-3px); border-color: rgba(31,78,155,0.28); box-shadow: 0 24px 46px -28px rgba(20,40,80,0.55); }
}

/* Zeitstrahl rechts */
.kmk-vita-rail {
  list-style: none; margin: 0; padding: 4px 0 4px 28px; position: relative;
  display: grid; gap: clamp(22px, 2.8vw, 34px);
}
.kmk-vita-rail::before {
  content: ''; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--kmk-red), rgba(31, 78, 155, 0.10));
}
.kmk-vita-item { position: relative; display: grid; grid-template-columns: 108px 1fr; gap: 20px; align-items: baseline; }
.kmk-vita-item::before {
  content: ''; position: absolute; left: -28px; top: 9px; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px var(--kmk-red), 0 0 0 5px rgba(31, 78, 155, 0.14);
}
.kmk-root .kmk-vita-year { font-size: 0.95rem; font-weight: 800; color: var(--kmk-red); letter-spacing: -0.01em; }
.kmk-root .kmk-vita-text { color: var(--kmk-muted); font-size: 0.98rem; font-weight: 400; line-height: 1.6; }
@media (max-width: 520px) {
  .kmk-vita-item { grid-template-columns: 1fr; gap: 3px; }
  .kmk-vita-rail { padding-left: 24px; }
  .kmk-vita-item::before { left: -24px; top: 7px; }
}

/* ===================== REVEAL (sanftes Einblenden) ===================== */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.d1.in { transition-delay: .08s; }
.reveal.d2.in { transition-delay: .16s; }
.reveal.d3.in { transition-delay: .24s; }
.reveal.d4.in { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   CRASH-SCROLL-ANIMATION  (Prefix: .kmk-cc-)
   Zwei Autos rasen aufeinander zu, krachen, gehen kaputt.
   Scroll-getrieben. Transform-basiert (GPU-schonend).
   ============================================================ */
.kmk-cc-track { position: relative; height: 300vh; }
@media (max-width: 760px) { .kmk-cc-track { height: 260vh; } }
.kmk-cc-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.kmk-cc-stage { position: relative; width: 100%; height: 100%; }

/* Straße: nur Asphalt (Fahrbahn) – reicht bis übers Rad, Autos stehen in der Straße */
.kmk-cc-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, #333944 0%, #2c313b 42%, #20252d 100%);
}
/* Unterbrochene weiße Mittellinie – direkt unter den Reifen */
.kmk-cc-road {
  position: absolute; left: 0; right: 0; bottom: 23%; height: 5px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.82) 0 38px, transparent 38px 82px);
}

/* Autos */
.kmk-cc-car { position: absolute; bottom: calc(26% - 2px); left: 50%; width: clamp(180px, 26vw, 350px); will-change: transform; }
.kmk-cc-flip { transform: scaleX(1); }
.kmk-cc-flip.mirror { transform: scaleX(-1); }
.kmk-cc-car-pos { will-change: transform; }
.kmk-cc-car-art { transform-origin: 50% 100%; will-change: transform; }
.kmk-cc-car svg { width: 100%; height: auto; display: block; overflow: visible; }
.kmk-cc-car img { width: 100%; height: auto; display: block; }
.kmk-cc-car .kmk-cc-car-art { position: relative; }
/* Heiles Auto sichtbar, beschädigtes liegt deckungsgleich darüber und blendet beim Aufprall ein */
.kmk-cc-img-ok { opacity: 1; transition: opacity .12s ease; }
.kmk-cc-img-crash { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; opacity: 0; transition: opacity .12s ease; }
.kmk-cc-stage.is-crashed .kmk-cc-img-ok { opacity: 0; }
.kmk-cc-stage.is-crashed .kmk-cc-img-crash { opacity: 1; }
@media (min-width: 1024px) { .kmk-cc-car img { filter: drop-shadow(0 14px 12px rgba(0,0,0,0.28)); } }

/* Front-Knautschzone */
.kmk-cc-front { transform-box: fill-box; transform-origin: 0% 50%; }
.kmk-cc-hood { transform-box: fill-box; transform-origin: 0% 100%; }
.kmk-cc-glass { transition: opacity .15s; }
.kmk-cc-crack { transform-box: fill-box; opacity: 0; }

/* Aufprall-Blitz */
.kmk-cc-flash { position: absolute; left: 50%; top: 38%; width: 60vmin; height: 60vmin; transform: translate(-50%,-50%) scale(0.2); border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,210,120,.5) 35%, transparent 68%); }

/* Trümmer / Splitter */
.kmk-cc-debris { position: absolute; left: 50%; bottom: 30%; width: 1px; height: 1px; pointer-events: none; }
.kmk-cc-shard { position: absolute; left: 0; top: 0; width: 10px; height: 10px; opacity: 0; will-change: transform, opacity; }
.kmk-cc-shard.glass { background: rgba(190, 225, 255, .9); width: 7px; height: 7px; }
.kmk-cc-shard.metal { background: var(--kmk-steel); }
.kmk-cc-shard.spark { background: var(--kmk-amber); width: 5px; height: 5px; border-radius: 50%; }

/* Rauch */
.kmk-cc-smoke { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); pointer-events: none; opacity: 0; }
.kmk-cc-smoke span { position: absolute; bottom: 0; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(120,128,140,.5), transparent 70%); }

/* Text-Captions */
.kmk-cc-caption { position: absolute; left: 0; right: 0; top: 16%; text-align: center; padding: 0 22px; pointer-events: none; }
.kmk-cc-cap { position: absolute; left: 0; right: 0; padding: 0 22px; opacity: 0; transition: opacity .4s ease; }
.kmk-cc-cap h2 { font-size: clamp(1.6rem, 4.5vw, 3rem); }
.kmk-cc-cap p { margin-top: 12px; color: var(--kmk-muted); font-size: clamp(1rem, 1.8vw, 1.2rem); max-width: 620px; margin-left: auto; margin-right: auto; }
.kmk-cc-cap .kmk-cc-cta { margin-top: 24px; pointer-events: auto; display: inline-flex; }

/* Scroll-Hinweis */
.kmk-cc-hint { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: var(--kmk-muted); font-size: 0.8rem; letter-spacing: .14em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity .3s; }
.kmk-cc-hint .kmk-cc-mouse { width: 22px; height: 34px; border: 2px solid var(--kmk-line-strong); border-radius: 12px; position: relative; }
.kmk-cc-hint .kmk-cc-mouse::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; background: var(--kmk-red-light); border-radius: 2px; transform: translateX(-50%); }
@media (min-width: 1024px) { .kmk-cc-hint .kmk-cc-mouse::after { animation: hgScrollDot 1.6s ease-in-out infinite; } }
@keyframes hgScrollDot { 0%,100% { opacity:.3; transform: translate(-50%,0);} 50% { opacity:1; transform: translate(-50%,8px);} }

/* ---- AUFPRALL-ZUSTAND (.is-crashed) ---- */
.kmk-cc-stage.is-crashed .kmk-cc-car-art { transform: translateY(-3px) rotate(-2.4deg); transition: transform .18s cubic-bezier(.36,.07,.19,.97); }
.kmk-cc-stage.is-crashed .kmk-cc-front { transform: scaleX(.52) skewY(-3deg); transition: transform .18s cubic-bezier(.36,.07,.19,.97); }
.kmk-cc-stage.is-crashed .kmk-cc-hood { transform: rotate(-15deg) translateY(-4px); transition: transform .2s cubic-bezier(.36,.07,.19,.97); }
.kmk-cc-stage.is-crashed .kmk-cc-glass { opacity: .22; }
.kmk-cc-stage.is-crashed .kmk-cc-crack { opacity: .9; transition: opacity .1s .04s; }
/* Ruhezustand: sanft zurückfedern, wenn nicht im Crash */
.kmk-cc-front, .kmk-cc-hood, .kmk-cc-car-art { transition: transform .4s cubic-bezier(.16,1,.3,1); }

/* Blitz */
.kmk-cc-stage.is-crashed .kmk-cc-flash { animation: hgFlash .5s ease-out forwards; }
@keyframes hgFlash {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  12% { opacity: .95; transform: translate(-50%,-50%) scale(.7); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); }
}

/* Splitter / Funken */
.kmk-cc-stage.is-crashed .kmk-cc-shard { animation: hgShard .9s cubic-bezier(.18,.7,.35,1) forwards; }
@keyframes hgShard {
  0% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  85% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.4); }
}

/* Rauch steigt nach dem Aufprall */
.kmk-cc-stage.is-crashed .kmk-cc-smoke { animation: hgSmokeShow .4s .2s ease-out forwards; }
.kmk-cc-stage.is-crashed .kmk-cc-smoke span { animation: hgSmoke 2.4s ease-out infinite; }
@keyframes hgSmokeShow { to { opacity: 1; } }
@keyframes hgSmoke {
  0% { transform: translate(var(--sx,0), 0) scale(.4); opacity: 0; }
  25% { opacity: .55; }
  100% { transform: translate(var(--sx,0), -150px) scale(1.5); opacity: 0; }
}
@media (max-width: 760px) { .kmk-cc-smoke span { display: none; } }
@media (min-width: 761px) { .kmk-cc-smoke span:nth-child(2) { animation-delay: .6s; } .kmk-cc-smoke span:nth-child(3) { animation-delay: 1.1s; } }

@media (prefers-reduced-motion: reduce) {
  .kmk-cc-track { height: auto; }
  .kmk-cc-sticky { position: relative; height: auto; min-height: 70vh; padding: 60px 0; }
  .kmk-cc-hint, .kmk-cc-flash, .kmk-cc-shard, .kmk-cc-smoke { display: none; }
  .kmk-cc-cap { position: static; opacity: 1 !important; margin-bottom: 30px; }
  .kmk-cc-caption { position: static; }
}

/* ===================== RATGEBER / BLOG (Startseite-Teaser) ===================== */
.kmk-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 820px) { .kmk-blog-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }
.kmk-blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--kmk-line); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 44px -32px rgba(20,40,80,0.4); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
@media (min-width: 1024px) { .kmk-blog-card:hover { transform: translateY(-4px); border-color: rgba(31,78,155,0.25); box-shadow: 0 28px 54px -30px rgba(20,40,80,0.5); } }
.kmk-blog-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #dce7f8; }
.kmk-blog-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
@media (min-width: 1024px) { .kmk-blog-card:hover .kmk-blog-img img { transform: scale(1.05); } }
.kmk-blog-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px; flex: 1; }
.kmk-blog-cat { align-self: flex-start; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kmk-red); background: #eaf1fb; padding: 5px 11px; border-radius: 999px; }
.kmk-blog-title { font-size: 1.15rem; font-weight: 800; line-height: 1.25; color: var(--kmk-red); }
.kmk-blog-excerpt { color: var(--kmk-muted); font-size: 0.95rem; line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.kmk-blog-more { display: inline-flex; align-items: center; gap: 7px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kmk-red); margin-top: 4px; }

/* --- Ratgeber-Übersicht -------------------------------------------------
   Gleiche Karten wie auf der Startseite, nur mehr davon. */
.kmk-blog-grid-alle { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .kmk-blog-grid-alle { grid-template-columns: repeat(2, 1fr); max-width: none; } }
@media (max-width: 720px) { .kmk-blog-grid-alle { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* Kachel statt Foto: für Beiträge, zu denen es keine eigene Aufnahme gibt.
   Lieber eine ehrliche Farbfläche als ein gekauftes Symbolbild. */
/* Themen-Kachel — traegt die Beitraege, zu denen es keine eigene Aufnahme gibt.
   Bewusst kein gekauftes Symbolbild. Die Flaeche greift die Hausfarbe und die
   Fahrbahn-Markierung des uebrigen Designs auf, damit die Karte gesetzt wirkt
   statt nach einem fehlenden Bild auszusehen. */
.kmk-blog-kachel {
  position: relative; overflow: hidden;
  display: grid; place-items: center; color: #fff;
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(255,255,255,0.18), rgba(255,255,255,0) 58%),
    linear-gradient(140deg, var(--kmk-red) 0%, var(--kmk-red-deep) 100%);
}
.kmk-blog-kachel::before {
  content: ''; position: absolute; left: -12%; right: -12%; top: 63%; height: 5px;
  border-radius: 999px; transform: rotate(-7deg);
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.45) 0 26px, rgba(255,255,255,0) 26px 54px);
}
.kmk-blog-kachel svg { position: relative; opacity: 0.92; }

/* Suchfeld + Teilen-Leiste über der Übersicht */
.kmk-ratgeber-leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.kmk-suche {
  display: flex; align-items: center; gap: 10px; flex: 1 1 320px; max-width: 520px;
  padding: 11px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--kmk-line-strong);
  box-shadow: 0 14px 34px -28px rgba(20, 40, 80, 0.5);
}
.kmk-suche svg { flex: 0 0 auto; color: var(--kmk-red-light); }
.kmk-suche input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font: inherit; font-size: 0.95rem; color: var(--kmk-text);
}
.kmk-suche input::placeholder { color: var(--kmk-steel); }
.kmk-suche button {
  flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--kmk-bg-3); color: var(--kmk-red);
}
/* :empty — ohne Suchbegriff steht dort nichts, dann soll auch kein Abstand
   entstehen. Das Element bleibt im Dokument, damit Screenreader die
   Trefferzahl beim Tippen ansagen koennen. */
.kmk-root .kmk-suche-info { color: var(--kmk-muted); font-size: 0.88rem; margin-bottom: 18px; }
.kmk-root .kmk-suche-info:empty { margin-bottom: 0; }

.kmk-teilen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kmk-teilen-label {
  display: inline-flex; align-items: center; gap: 7px; margin-right: 4px;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--kmk-muted);
}
.kmk-teilen-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--kmk-red);
  background: var(--kmk-bg-2); border: 1px solid rgba(31, 78, 155, 0.16);
}
.kmk-teilen-btn.wa { color: #128C4B; border-color: rgba(18, 140, 75, 0.22); }
@media (min-width: 1024px) {
  .kmk-teilen-btn { transition: background .25s ease, border-color .25s ease, transform .25s ease; }
  .kmk-teilen-btn:hover { transform: translateY(-2px); border-color: var(--kmk-red); background: #eaf1fb; }
  .kmk-teilen-btn.wa:hover { border-color: #128C4B; background: #e8f7ee; }
}

.kmk-suche-leer {
  text-align: center; max-width: 560px; margin: 40px auto 0;
  padding: clamp(26px, 3.4vw, 38px);
  background: var(--kmk-bg-2); border: 1px solid var(--kmk-line); border-radius: 20px;
}
.kmk-root .kmk-suche-leer p { color: var(--kmk-muted); margin-bottom: 20px; }
.kmk-blog-cta { display: flex; justify-content: center; margin-top: clamp(38px, 5vw, 60px); }
/* Im Team-Abschluss enger, damit die drei Bloecke einen Rhythmus ergeben */
.kmk-team-more .kmk-blog-cta { margin-top: clamp(24px, 3vw, 34px); }

/* --- Halle & Hebebuehne: das Unterscheidungsmerkmal des Bueros -----------
   Ausdruecklicher Kundenwunsch, dass beides deutlich sichtbar wird. Deshalb
   eigene Kacheln statt einer Haekchen-Liste und ein Schild auf dem Foto. */
.kmk-standort-badge {
  position: absolute; z-index: 2; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: var(--kmk-red);
  font-size: 0.83rem; font-weight: 800; letter-spacing: 0.01em;
  box-shadow: 0 10px 26px -14px rgba(20, 40, 80, 0.6);
}
@media (min-width: 1024px) {
  .kmk-standort-badge { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* Vorteile hier vor Ort — kompakt neben dem Text.
   Die frueheren drei grossen Kacheln („Eigene Hebebuehne", „Ueberdachte
   Halle", „Gleichmaessiges Licht") sind auf Kundenwunsch entfallen. */
.kmk-standort-vorort { margin-top: 20px; }
.kmk-root .kmk-standort-vorort li { font-size: 1rem; }

/* Drei Aufnahmen aus der Besichtigungshalle. Gleich hohe Bilder, damit die
   Reihe ruhig wirkt; auf dem Handy untereinander mit flacherem Zuschnitt. */
.kmk-halle-galerie {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px); margin-top: clamp(30px, 4vw, 48px);
}
.kmk-halle-galerie figure {
  margin: 0; border: 1px solid var(--kmk-line); border-radius: 16px;
  overflow: hidden; background: #fff;
  box-shadow: 0 20px 44px -34px rgba(20, 40, 80, 0.45);
}
.kmk-halle-galerie img {
  display: block; width: 100%; height: clamp(180px, 20vw, 240px);
  object-fit: cover;
}
.kmk-halle-galerie figcaption {
  padding: 13px 16px 15px; color: var(--kmk-muted);
  font-size: 0.9rem; line-height: 1.5;
}
@media (max-width: 820px) {
  .kmk-halle-galerie { grid-template-columns: 1fr; }
  .kmk-halle-galerie img { height: 200px; }
}

/* Weg zu den restlichen Fragen — farblich wie die Fragekaesten darueber,
   damit der Knopf als Teil der FAQ-Liste gelesen wird und nicht als Fremdkoerper.
   Bewusst nur hier und nicht an .kmk-btn-ghost allgemein: den gibt es auch auf
   weissem und auf dunklem Grund, dort waere diese Faerbung falsch. */
.kmk-faq-more { display: flex; justify-content: center; margin-top: clamp(26px, 3.2vw, 38px); }
.kmk-faq-more .kmk-btn-ghost {
  background: linear-gradient(180deg, #eef3fc, #e3edfa);
  border-color: #d3e0f4;
  color: var(--kmk-red);
}
@media (min-width: 1024px) {
  .kmk-faq-more .kmk-btn-ghost:hover {
    border-color: #bcd2f0;
    background: linear-gradient(180deg, #e7eefb, #d8e5f7);
    box-shadow: 0 14px 30px -22px rgba(31, 78, 155, 0.45);
  }
}

/* Weg zum Werdegang — sitzt direkt unter der letzten Person */
.kmk-team-cta { display: flex; justify-content: center; margin-top: clamp(26px, 3.4vw, 40px); }
.kmk-team-cta .kmk-btn-primary { font-size: 1rem; padding: 13px 26px; }

/* ============================================================
   UNTERSEITEN-BAUSTEINE (KoelnLayout + koeln-parts)
   Damit alle Unterseiten exakt das Startseiten-Design tragen.
   ============================================================ */

/* Header ist auf Unterseiten immer solide; Schatten erst beim Scrollen */
.kmk-header.scrolled.shadow { box-shadow: 0 6px 24px -18px rgba(20,40,80,0.5); }

/* Seiten-Hero (klärt die fixe Kopfzeile mit padding-top) */
.kmk-pagehero { position: relative; overflow: hidden; padding: clamp(112px, 15vw, 168px) 0 clamp(40px, 6vw, 72px); background: linear-gradient(180deg, var(--kmk-bg-2), var(--kmk-bg)); border-bottom: 1px solid var(--kmk-line); }
/* Inhalt ueber Punktfeld und Lichtschein heben */
.kmk-pagehero > .kmk-wrap { position: relative; z-index: 1; }
/* Der Kopf ist breit, aber flach — in Standardgroesse fuellen die Punktfelder
   ihn komplett aus. Kleiner gehalten wirken sie wie Ecken-Deko. */
.kmk-pagehero .kmk-dots { width: clamp(300px, 33vw, 500px); }
/* Weicher Lichtschein hinter der Ueberschrift — gegen den leeren Eindruck */
.kmk-pagehero-glow {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 46%; width: min(1100px, 118%); aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(31, 78, 155, 0.10), rgba(31, 78, 155, 0) 70%);
}
/* Schmaler Markenstrich unter der Augenbraue */
.kmk-pagehero .kmk-eyebrow { position: relative; padding-bottom: 12px; display: inline-block; }
.kmk-pagehero .kmk-eyebrow::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--kmk-red), rgba(31, 78, 155, 0.15));
}
.kmk-pagehero .kmk-h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-top: 14px; }
.kmk-pagehero .kmk-lead { color: var(--kmk-muted); }
.kmk-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--kmk-muted); margin-bottom: 20px; }
.kmk-crumbs a { color: var(--kmk-red-light); }
.kmk-crumbs a:hover { text-decoration: underline; }
.kmk-crumbs-sep { color: var(--kmk-steel); margin: 0 2px; }
.kmk-crumbs [aria-current="page"] { color: var(--kmk-text); }

/* Sektions-Varianten */
.kmk-section.soft { background: var(--kmk-bg-2); }
/* Sektion mit Punktfeld (Unterseiten). clip statt hidden — hidden wuerde das
   position: sticky im Werdegang ausser Kraft setzen. */
.kmk-deco-sec { position: relative; overflow: clip; }
.kmk-deco-sec > .kmk-wrap { position: relative; z-index: 1; }
/* Abwechselnd oben rechts / unten links — beide Felder in jeder Sektion
   waeren zu viel, immer dieselbe Ecke waere monoton. */
.kmk-deco-sec:nth-of-type(even) .kmk-dots.bl { display: none; }
.kmk-deco-sec:nth-of-type(odd) .kmk-dots.tr { display: none; }
.kmk-section-head.center { text-align: center; margin-left: auto; margin-right: auto; max-width: 760px; }
.kmk-section-head.center .kmk-num-row::after { display: none; }
.kmk-section-head.center .kmk-lead { margin-left: auto; margin-right: auto; }

/* Prosa (Ratgeber-Artikel & Rechtstexte) */
.kmk-prose { max-width: 800px; color: var(--kmk-text); font-size: 1.05rem; line-height: 1.75; }
.kmk-prose > * + * { margin-top: 1.1em; }
.kmk-prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--kmk-red); margin-top: 1.8em; }
.kmk-prose h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 800; color: var(--kmk-red); margin-top: 1.5em; }
.kmk-prose p, .kmk-prose li { color: var(--kmk-muted); }
.kmk-prose strong { color: var(--kmk-text); font-weight: 700; }
.kmk-prose a { color: var(--kmk-red-light); text-decoration: underline; text-underline-offset: 2px; }
.kmk-prose ul, .kmk-prose ol { padding-left: 1.3em; }
.kmk-prose ul li, .kmk-prose ol li { margin-top: 0.5em; }
.kmk-prose ul { list-style: disc; }
.kmk-prose ol { list-style: decimal; }
.kmk-prose blockquote { border-left: 3px solid var(--kmk-red); padding: 4px 0 4px 20px; color: var(--kmk-text); font-style: italic; }
.kmk-note { margin: 1.5em 0; padding: 18px 22px; border-radius: 14px; background: var(--kmk-bg-3); border-left: 3px solid var(--kmk-red); color: var(--kmk-text); font-weight: 500; line-height: 1.6; }

/* Häkchen-Liste */
.kmk-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.kmk-check li { display: flex; gap: 12px; align-items: flex-start; color: var(--kmk-muted); line-height: 1.55; }
.kmk-check li svg { color: var(--kmk-red); flex: 0 0 auto; margin-top: 3px; }
.kmk-check li strong { color: var(--kmk-text); font-weight: 700; }

/* Karte mit Icon (koeln-parts InfoCard) */
.kmk-card-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--kmk-bg-3); color: var(--kmk-red); margin-bottom: 16px; }
.kmk-card-link { display: flex; flex-direction: column; }
.kmk-card-more { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kmk-red); margin-top: 16px; }
@media (min-width: 1024px) { .kmk-card-link { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s; } .kmk-card-link:hover { transform: translateY(-4px); border-color: rgba(31,78,155,0.25); box-shadow: 0 28px 54px -30px rgba(20,40,80,0.5); } }

/* Abschluss-CTA */
.kmk-subcta { position: relative; overflow: hidden; text-align: center; padding: clamp(40px, 6vw, 68px) clamp(24px, 5vw, 56px); border-radius: 24px; background: linear-gradient(135deg, #eaf1fb 0%, #dce7f8 100%); border: 1px solid var(--kmk-line); }
.kmk-subcta .kmk-hero-actions { justify-content: center; }
.kmk-subcta .kmk-lead { margin: 14px auto 0; max-width: 620px; }

/* Split (Text neben Bild) */
.kmk-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.kmk-split-media { border-radius: 20px; overflow: hidden; box-shadow: var(--kmk-shadow, 0 24px 60px -30px rgba(20,40,80,0.4)); aspect-ratio: 4 / 3; }
.kmk-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .kmk-split { grid-template-columns: 1fr; } }

/* ============================================================
   KONTAKT-UNTERSEITE (Formular · Kontakt-Infos · Karte)
   ============================================================ */
.kmk-contact-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 44px; align-items: start; }
@media (max-width: 920px) { .kmk-contact-grid { grid-template-columns: 1fr; gap: 32px; } }
/* Raster-Felder duerfen schmaler werden als ihr laengster unteilbarer Inhalt.
   Ohne diese Zeile wuchs die Spalte auf einem 360px-Telefon auf 389px — die
   Karte mit dem Formular ragte 51px ueber den rechten Bildschirmrand hinaus.
   Grund ist eine Voreinstellung von CSS-Rastern: ein Feld schrumpft von sich
   aus nie unter den laengsten Inhalt, hier eine lange E-Mail-Zeile. */
.kmk-contact-grid > * { min-width: 0; }
.kmk-contact-info, .kmk-contact-info a { overflow-wrap: anywhere; }

/* Kontakt-Infos (Label über Wert, mit Icon-Kachel) */
.kmk-contact-info { display: flex; flex-direction: column; gap: 16px; }
.kmk-contact-info .kmk-contact-row { align-items: flex-start; gap: 14px; }
.kmk-ci-ic { width: 46px; height: 46px; border-radius: 11px; background: var(--kmk-bg-3); color: var(--kmk-red); display: grid; place-items: center; flex: none; }
.kmk-ci-ic svg { color: var(--kmk-red); }
.kmk-contact-info .kmk-contact-row strong { display: block; color: var(--kmk-text); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.kmk-contact-info .kmk-contact-row a, .kmk-contact-info .kmk-contact-row span { color: var(--kmk-muted); font-size: 1.02rem; font-weight: 600; }
.kmk-contact-info .kmk-contact-row a:hover { color: var(--kmk-red); }

/* Formular-Helfer */
.kmk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .kmk-row2 { grid-template-columns: 1fr; } }
.kmk-file { display: flex; align-items: center; gap: 12px; padding: 16px; border: 2px dashed var(--kmk-line-strong); border-radius: 12px; background: var(--kmk-bg-2); color: var(--kmk-red); font-weight: 600; font-size: 0.94rem; cursor: pointer; }
.kmk-file:hover { border-color: var(--kmk-red); }
.kmk-file input { display: none; }
.kmk-form-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 0.88rem; color: var(--kmk-muted); }
.kmk-form-consent input { margin-top: 3px; flex: none; }
.kmk-form-consent a { color: var(--kmk-red); text-decoration: underline; }
.kmk-captcha-ph { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--kmk-muted); border: 1px dashed var(--kmk-line); border-radius: 12px; padding: 12px 14px; }
.kmk-captcha-ph svg { color: var(--kmk-red); flex: none; }
.kmk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kmk-form-success { text-align: center; padding: 40px 20px; }
.kmk-form-success svg { color: #2e9e5b; margin: 0 auto 14px; display: block; }
.kmk-form-success p { color: var(--kmk-muted); }

/* Button-Größen */
.kmk-btn-lg { padding: 17px 30px; font-size: 1.06rem; }
.kmk-btn-block { width: 100%; }

/* Karte (Google Maps, erst auf Klick geladen) */
.kmk-map { border-radius: 20px; overflow: hidden; border: 1px solid var(--kmk-line); min-height: 340px; box-shadow: var(--kmk-shadow, 0 24px 60px -30px rgba(20,40,80,0.4)); }
.kmk-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.kmk-map-ph { width: 100%; font-family: inherit; border: 1px dashed var(--kmk-line-strong); background: var(--kmk-bg-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; cursor: pointer; padding: 30px; transition: background .2s ease, border-color .2s ease; }
.kmk-map-ph svg { color: var(--kmk-red); }
.kmk-map-ph strong { color: var(--kmk-text); font-size: 1.05rem; }
.kmk-map-ph span { font-size: 0.88rem; color: var(--kmk-muted); line-height: 1.5; }
.kmk-map-ph:hover { border-color: var(--kmk-red); background: var(--kmk-bg-3); }

/* ============================================================
   LESBARKEIT (Kundenwunsch aus der Besprechung)
   Überschriften kräftiger, Fließtext größer und dunkler, Logo und
   Kopfzeile größer. Bewusst gebündelt am Ende, damit sich die
   Stärke an einer Stelle nachjustieren lässt.
   ============================================================ */

/* Grauton anheben: der weiche Fließtext war für Brillenträger zu blass */
.kmk-root { --kmk-muted: #44526a; --kmk-steel: #55637a; line-height: 1.7; }

/* Überschriften: kräftig, aber nicht wuchtig — 900 wirkte zusammen mit der
   Größe erschlagend und nahm dem Fließtext die Aufmerksamkeit. */
.kmk-root h1, .kmk-root h2 { font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }
.kmk-root h3, .kmk-root h4 { font-weight: 700; letter-spacing: -0.008em; line-height: 1.25; }
.kmk-root .kmk-h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
/* ---- Typografische Skala ----
   Ruhig und klar abgestuft: Ueberschriften deutlich groesser als Fliesstext,
   Fliesstext in normaler Staerke. Vorher war alles gross UND halbfett, dadurch
   fehlte die Hierarchie und die Seite wirkte klobig. */
.kmk-root .kmk-h2 { font-size: clamp(1.72rem, 3.1vw, 2.45rem); }
.kmk-root .kmk-h3 { font-size: clamp(1.12rem, 1.6vw, 1.32rem); }
.kmk-promise-h, .kmk-parallax-h { font-weight: 800; letter-spacing: -0.015em; }
.kmk-promise-h { font-size: clamp(1.8rem, 3.3vw, 2.6rem); }
.kmk-parallax-h { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.kmk-hero-inner .kmk-h1 { font-size: clamp(2rem, 3.7vw, 2.95rem); }
.kmk-root .kmk-hero-inner { max-width: 880px; }
@media (max-width: 600px) { .kmk-hero-inner .kmk-h1 { font-size: clamp(1.8rem, 7.2vw, 2.35rem); } }
/* Handy: die feste Aktionsleiste am unteren Rand darf die letzten Zeilen nicht verdecken.
   Statt fester Mindesthöhe wächst der Hero mit dem Inhalt und hält unten Abstand. */
@media (max-width: 759px) {
  .kmk-root .kmk-hero { min-height: 0; padding-top: 96px; padding-bottom: 132px; }
  .kmk-root .kmk-hero-actions { margin-top: 22px; }
  .kmk-root .kmk-usps { margin-top: 18px; gap: 8px 20px; }
}

/* Fliesstext: gut lesbar (ca. 17px), aber in normaler Staerke — nicht halbfett.
   Fett bleibt den Ueberschriften und Hervorhebungen vorbehalten. */
.kmk-root .kmk-lead { font-size: clamp(1rem, 1.15vw, 1.08rem); font-weight: 400; line-height: 1.65; }
.kmk-root .kmk-prose { font-size: 1.04rem; line-height: 1.72; }
.kmk-root .kmk-prose p, .kmk-root .kmk-prose li { font-weight: 400; }
.kmk-root .kmk-stack-text { font-size: clamp(0.98rem, 1.2vw, 1.06rem); font-weight: 400; }
.kmk-root .kmk-card p { font-size: 0.98rem; font-weight: 400; }
.kmk-root .kmk-usp { font-size: 0.98rem; font-weight: 500; }
.kmk-root .kmk-stat-lbl { font-size: 0.92rem; font-weight: 400; }
.kmk-root .kmk-step h3 { font-size: 1.14rem; }
.kmk-root .kmk-step p { font-size: 0.98rem; font-weight: 400; }
.kmk-root .kmk-rights-col h3 { font-size: 1.2rem; }
.kmk-root .kmk-rights-list li { font-size: 1rem; }
.kmk-root .kmk-rights-list li span { font-weight: 400; }
.kmk-root .kmk-creds li { font-size: 0.98rem; font-weight: 550; }
.kmk-root .kmk-check li { font-size: 0.99rem; font-weight: 400; }
.kmk-root .kmk-quote { font-size: clamp(1.14rem, 1.6vw, 1.34rem); font-weight: 400; line-height: 1.6; }
.kmk-root .kmk-faq-q { font-size: 1.05rem; font-weight: 700; }
.kmk-root .kmk-faq-a-inner { font-size: 0.99rem; font-weight: 400; }
.kmk-root .kmk-blog-title { font-size: 1.14rem; }
.kmk-root .kmk-blog-excerpt { font-size: 0.96rem; font-weight: 400; }
.kmk-root .kmk-contact-row { font-size: 1rem; font-weight: 400; }
.kmk-root .kmk-contact-info .kmk-contact-row a,
.kmk-root .kmk-contact-info .kmk-contact-row span { font-size: 1rem; }
.kmk-root .kmk-footer p, .kmk-root .kmk-footer a { font-size: 0.96rem; }
.kmk-root .kmk-areas { font-size: 0.94rem; }
.kmk-root .kmk-crumbs { font-size: 0.88rem; }

/* Kleinteile, die vorher fast zu klein zum Lesen waren */
.kmk-root .kmk-stack-eyebrow, .kmk-root .kmk-vcard-tag { font-size: 0.8rem; }
.kmk-root .kmk-vcard-lbl { font-size: 0.8rem; }
.kmk-root .kmk-eyebrow, .kmk-root .kmk-promise-eyebrow, .kmk-root .kmk-parallax-eyebrow { font-size: 0.88rem; }
.kmk-root .kmk-blog-cat, .kmk-root .kmk-stack-link, .kmk-root .kmk-blog-more, .kmk-root .kmk-card-more { font-size: 0.82rem; }
.kmk-root .kmk-badge { font-size: 0.92rem; }
.kmk-root .kmk-form-note { font-size: 0.9rem; }
.kmk-root .kmk-form-consent { font-size: 0.95rem; }

/* Formular: größere Beschriftungen und Eingabefelder */
/* Formular kompakt: schlanke Felder, ruhige Beschriftungen — erdrueckt nicht mehr */
.kmk-root .kmk-field label { font-size: 0.85rem; font-weight: 500; color: var(--kmk-muted); margin-bottom: 5px; }
.kmk-root .kmk-field input, .kmk-root .kmk-field select, .kmk-root .kmk-field textarea { font-size: 0.98rem; padding: 10px 13px; border-radius: 10px; }
.kmk-root .kmk-field textarea { min-height: 76px; }
.kmk-root .kmk-form { gap: 11px; }

/* Kopfzeile und Logo eine Spur größer (Kundenwunsch) */
.kmk-root .kmk-nav { height: 84px; }
.kmk-root .kmk-logo-icon { width: 62px; height: 62px; }
.kmk-root .kmk-wordmark b { font-size: 1.24rem; }
.kmk-root .kmk-wordmark span { font-size: 0.8rem; letter-spacing: 0.18em; }
.kmk-root .kmk-nav-link { font-size: 1.04rem; font-weight: 700; }
.kmk-root .kmk-tel { font-size: 0.98rem; font-weight: 700; padding: 10px 17px; }
.kmk-root .kmk-header .kmk-nav-actions .kmk-btn { font-size: 0.98rem; padding: 10px 21px; }
.kmk-root .kmk-mobilemenu-link { font-size: 1.16rem; }
.kmk-root .kmk-btn { font-size: 1.04rem; font-weight: 700; }
.kmk-root .kmk-mobilebar .kmk-btn { font-size: 1rem; }
@media (max-width: 480px) {
  .kmk-root .kmk-logo-icon { width: 50px; height: 50px; }
  .kmk-root .kmk-wordmark b { font-size: 1.04rem; }
  .kmk-root .kmk-wordmark span { font-size: 0.68rem; letter-spacing: 0.12em; }
  .kmk-root .kmk-nav { height: 74px; }
}
/* Der Hero muss unter der jetzt höheren Kopfzeile bleiben */
.kmk-root .kmk-hero { padding-top: 168px; }
.kmk-root .kmk-pagehero { padding-top: clamp(126px, 16vw, 184px); }

/* Sprungziele der Navigation dürfen nicht unter der festen Kopfzeile landen */
.kmk-root #top, .kmk-root #kundenstimmen, .kmk-root #leistungen, .kmk-root #ablauf,
.kmk-root #rechte, .kmk-root #team, .kmk-root #faq,
.kmk-root #ratgeber-teaser, .kmk-root #kontakt { scroll-margin-top: 96px; }

/* ============================================================
   KUNDENSTIMMEN (Kundenwunsch: gut sichtbar, direkt unter dem Hero)
   ============================================================ */
.kmk-voices { padding-top: clamp(48px, 6vw, 76px); }
.kmk-voices-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.kmk-google-g { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

.kmk-voices-score {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 16px 24px; border-radius: 18px;
  background: #fff; border: 1px solid var(--kmk-line-strong);
  box-shadow: 0 18px 40px -26px rgba(31, 78, 155, 0.5);
}
.kmk-voices-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding-right: 18px; border-right: 1px solid var(--kmk-line); }
.kmk-voices-brand b { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; color: var(--kmk-text); }
.kmk-voices-score-num { font-size: 2.5rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: var(--kmk-red); }
.kmk-voices-score-meta { display: flex; flex-direction: column; gap: 5px; font-size: 0.94rem; font-weight: 600; color: var(--kmk-muted); }
@media (min-width: 1024px) {
  .kmk-voices-score { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s; }
  .kmk-voices-score:hover { transform: translateY(-3px); border-color: var(--kmk-red); }
}

.kmk-stars { display: inline-flex; gap: 2px; }
.kmk-stars svg { color: #d7dfeb; fill: #d7dfeb; }
.kmk-stars svg.on { color: #e8a92b; fill: #e8a92b; }

.kmk-voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 940px) { .kmk-voices-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .kmk-voices-grid { grid-template-columns: 1fr; } }

.kmk-voice {
  position: relative; overflow: hidden; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px 28px 26px; min-height: 300px;
  background: #fff; border: 1px solid var(--kmk-line); border-radius: 20px;
  box-shadow: 0 20px 44px -32px rgba(20, 40, 80, 0.4);
}
.kmk-voice-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kmk-voice-src { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--kmk-steel); }
.kmk-voice-text { margin: 0; font-size: 1.04rem; line-height: 1.62; font-weight: 450; color: var(--kmk-text); display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.kmk-voice-by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--kmk-line); }
.kmk-voice-by > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kmk-voice-by b { font-size: 1.02rem; font-weight: 800; color: var(--kmk-red); }
.kmk-voice-by small { font-size: 0.86rem; color: var(--kmk-muted); }
.kmk-voice-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-align: center;
  background: linear-gradient(140deg, var(--kmk-red-light), var(--kmk-red) 60%, var(--kmk-red-deep));
  color: #fff; font-size: 1.05rem; font-weight: 800;
}

/* Antwort des Inhabers, klar abgesetzt vom Zitat */
.kmk-voice-answer {
  font-size: 0.96rem; font-weight: 450; line-height: 1.55; color: var(--kmk-muted);
  background: var(--kmk-bg-2); border-left: 3px solid var(--kmk-red-light);
  border-radius: 0 10px 10px 0; padding: 12px 14px;
}
.kmk-voice-answer strong { color: var(--kmk-red); font-weight: 800; }

/* Schlagworte, die Google aus den Rezensionen zieht */
.kmk-voices-intro { max-width: 620px; }
.kmk-voices-intro .kmk-h2 { margin-top: 12px; }
.kmk-voices-tags { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kmk-voices-tags li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.92rem; font-weight: 600; color: var(--kmk-muted);
  background: var(--kmk-bg-2); border: 1px solid var(--kmk-line);
  padding: 7px 14px; border-radius: 999px;
}
.kmk-voices-tags b { font-weight: 800; color: var(--kmk-red); }

/* Pflichthinweis nach § 5b Abs. 3 UWG */
.kmk-voices-hint { max-width: 74ch; text-align: center; font-size: 0.92rem; line-height: 1.6; color: var(--kmk-steel); }
@media (min-width: 1024px) {
  .kmk-voice { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s; }
  .kmk-voice:hover { transform: translateY(-4px); border-color: rgba(31,78,155,0.25); box-shadow: 0 28px 54px -30px rgba(20,40,80,0.5); }
}

.kmk-voices-cta { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 38px; }

/* ============================================================
   TEAM (Kundenwunsch: Gesichter statt Anonymität)
   Redaktionelles Porträt: Foto mit Namensschild neben Werdegang
   und Qualifikationen, darunter ein Streifen echter Fotos.
   ============================================================ */
.kmk-crew {
  /* Bildspalte etwas breiter: Portraet-Verhaeltnis statt schmalem Streifen */
  display: grid; grid-template-columns: 0.95fr 1.15fr; align-items: stretch;
  gap: 0; overflow: hidden;
  max-width: 1080px; margin: 0 auto;
  background: #fff; border: 1px solid var(--kmk-line); border-radius: 28px;
  box-shadow: 0 34px 70px -40px rgba(20, 40, 80, 0.5);
}
/* Abstand zwischen den Team-Karten (klebten vorher aneinander) */
.kmk-crew + .kmk-crew { margin-top: clamp(30px, 4.5vw, 56px); }
/* Etwas Luft zwischen Abschnitts-Kopf und erster Karte */
.kmk-team .kmk-section-head { margin-bottom: clamp(40px, 5vw, 60px); }
@media (max-width: 900px) { .kmk-crew { grid-template-columns: 1fr; } }

/* --- Foto mit Namensschild --- */
.kmk-crew-media {
  /* Hoeher als der Textteil: ein hochkantes Portrait in einem querformatigen
     Rahmen wirkt sonst stark angeschnitten. Mehr Rahmenhoehe = mehr vom
     Portrait sichtbar, der Kopf bekommt Luft. */
  position: relative; overflow: hidden; min-height: 460px;
  background: linear-gradient(150deg, var(--kmk-bg-3), var(--kmk-bg-2));
  display: grid; place-items: center;
}
/* Näher am Gesicht: die Vorlage ist hochkant, ohne Zoom bliebe das Gesicht klein */
.kmk-crew-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Standard-Zoom fuer weit aufgenommene Fotos; ein Studio-Portrait setzt
     --kmk-crew-zoom auf einen kleineren Wert (siehe teamData.ts). */
  transform: scale(var(--kmk-crew-zoom, 1.28)); transform-origin: 52% 26%;
}
/* Schmale Geräte: quadratischer Rahmen, dafuer ohne Zusatz-Zoom — sonst wird
   vom Hochformat nur ein Ausschnitt sichtbar und der Kopf angeschnitten.
   MUSS nach der Grundregel stehen: gleiche Spezifitaet, die spaetere gewinnt.
   (Stand vorher davor und hat deshalb nie gegriffen.) */
@media (max-width: 900px) {
  /* Portraits im Hochformat statt im Quadrat: ein Mensch wirkt in 4:5 deutlich
     ruhiger als in einem quadratischen Ausschnitt, der Kopf bekommt Luft und
     die Schultern werden nicht angeschnitten. Gedeckelt, damit das Bild auf
     kleinen Geraeten nicht den ganzen Bildschirm einnimmt. */
  .kmk-crew-media { aspect-ratio: 4 / 5; min-height: 0; max-height: 62svh; }
  .kmk-crew-img { transform: scale(1); }
  /* Das Namensschild sass 20px ueber der Unterkante und verschwand damit hinter
     der festen Leiste mit Anrufen/WhatsApp (zusammen rund 114px hoch). Jetzt
     sitzt es hoeher, mit kraeftigerem Verlauf dahinter, damit es auf hellen
     Bildstellen lesbar bleibt. */
  .kmk-crew-plate { left: 20px; right: 20px; bottom: 26px; }
  .kmk-crew-plate b { font-size: 1.62rem; }
  .kmk-crew-plate small { font-size: 0.95rem; }

}
/* Verlauf nach unten, damit das Schild sicher lesbar bleibt */
.kmk-crew-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 46%, rgba(8, 16, 30, 0.72) 100%);
}
/* Auf schmalen Geraeten kraeftiger: das Portrait ist dort im Hochformat und
   der Name steht oft auf einer hellen Bildstelle.
   MUSS nach der Grundregel stehen, gleiche Spezifitaet, die spaetere gewinnt.
   Genau daran ist die Quadrat-Regel weiter oben schon einmal gescheitert. */
@media (max-width: 900px) {
  .kmk-crew-media::after {
    background: linear-gradient(180deg, transparent 38%, rgba(8, 16, 30, 0.55) 72%, rgba(8, 16, 30, 0.86) 100%);
  }
}
.kmk-crew-initials {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%;
  background: linear-gradient(140deg, var(--kmk-red-light), var(--kmk-red) 60%, var(--kmk-red-deep));
  color: #fff; font-size: 2.3rem; font-weight: 900; letter-spacing: 0.02em;
  box-shadow: 0 14px 30px -14px var(--kmk-glow);
}
.kmk-crew-plate {
  position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px;
  display: flex; flex-direction: column; gap: 3px; color: #fff;
}
.kmk-crew-plate b { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.15; text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.kmk-crew-plate small { font-size: 0.92rem; font-weight: 600; color: #bcd3f5; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }

/* --- Werdegang und Qualifikationen --- */
.kmk-crew-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3vw, 40px); }

.kmk-crew-bio { margin-top: 12px; color: var(--kmk-muted); font-size: 1.02rem; font-weight: 450; line-height: 1.6; }

.kmk-crew-chips { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--kmk-line); display: flex; flex-wrap: wrap; gap: 8px; }
.kmk-crew-chips li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 700; color: var(--kmk-red);
  background: var(--kmk-bg-2); border: 1px solid rgba(31, 78, 155, 0.16);
  padding: 7px 12px; border-radius: 999px;
}
.kmk-crew-chips svg { flex: 0 0 auto; color: var(--kmk-red-light); }

@media (min-width: 1024px) {
  .kmk-crew-img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
  /* Relativ zum jeweiligen Zoom, sonst springt ein Studio-Portrait beim Hover */
  .kmk-crew:hover .kmk-crew-img { transform: scale(calc(var(--kmk-crew-zoom, 1.28) * 1.04)); }
}

/* --- Fotostreifen aus dem Alltag --- */
/* ---------- Durchlaufendes Band, fixiert am unteren Rand (Kundenwunsch #2) ---------- */
.kmk-ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  overflow: hidden; pointer-events: none;
  background: var(--kmk-red); color: #fff;
  border-top: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 -8px 24px -18px rgba(20,40,80,0.6);
}
/* exakt so hoch wie die Kontakt-Leiste oben (40px), damit beide Streifen gleich wirken */
.kmk-ticker { height: 40px; }
.kmk-ticker-track { display: flex; align-items: center; height: 100%; width: max-content; animation: kmkTicker 42s linear infinite; }
.kmk-ticker-row { display: inline-flex; align-items: center; height: 100%; flex: 0 0 auto; }
.kmk-ticker-item {
  display: inline-flex; align-items: center; height: 100%;
  padding: 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
  color: rgba(255,255,255,0.94);
}
.kmk-ticker-item i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.5); margin: 0 26px; }
@keyframes kmkTicker { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .kmk-ticker-track { animation: none; } }
/* Handy: der feste Aktionsbalken hat Vorrang, das Band sitzt darüber */
/* Laufband ueber der festen Aktionsleiste. Die Hoehe der Leiste misst das
   Skript (useMobilLeiste) — sie haengt an der Knopfgroesse UND am sicheren
   Bereich am unteren Rand, den iPhones mit Home-Indikator beanspruchen.
   Mit dem frueheren festen Wert von 64px lag das Laufband 16px ueber der
   Leiste. Der Ersatzwert greift nur, bis das Skript gemessen hat. */
@media (max-width: 759px) {
  .kmk-ticker { bottom: var(--kmk-leiste-h, 80px); height: 34px; }
  .kmk-ticker-item { font-size: 0.78rem; padding: 0; }

  /* Solange die Aktionsleiste weg ist (erster Abschnitt), waere der Platz
     darunter leer und das Band wuerde schweben. Es wandert deshalb um genau
     die Leistenhoehe nach unten an den Rand — per transform statt ueber
     bottom, damit der Wechsel den Aufbau nicht neu berechnet. */
  .kmk-ticker { transition: transform .28s ease; }
  .kmk-ohne-leiste .kmk-ticker { transform: translateY(var(--kmk-leiste-h, 80px)); }
  @media (prefers-reduced-motion: reduce) {
    .kmk-ticker { transition: none; }
  }
}
/* Inhalt darf nicht unter dem Band verschwinden */
.kmk-footer { padding-bottom: 52px; }
/* Auf dem Handy liegen ZWEI feste Leisten uebereinander: Aktionsleiste und
   Laufband. 52px reichten dafuer nicht — die letzten Zeilen des Fussbereichs
   verschwanden dahinter. */
@media (max-width: 759px) {
  .kmk-footer { padding-bottom: calc(var(--kmk-leiste-h, 80px) + 52px); }
}

/* Standort-Sektion: Vorteile vor Ort + abgedeckte Fahrzeuge */
/* Bild gross genug, damit die Sektion nicht gedraengt wirkt, aber gedeckelt —
   es soll nicht ueber die ganze Bildschirmhoehe laufen. */
.kmk-standort { align-items: center; }
/* position: relative, damit das Schild "Unsere Halle in Herne" im Bild sitzt.
   Hoehe knapper gehalten: bei 540px ragte das Bild deutlich ueber die
   Textspalte hinaus und die Sektion wirkte kopflastig. */
.kmk-standort .kmk-split-media { position: relative; aspect-ratio: 4 / 5; max-height: 470px; align-self: center; }
@media (max-width: 860px) { .kmk-standort .kmk-split-media { aspect-ratio: 4 / 3; max-height: none; } }
/* .kmk-root p { margin: 0 } ist spezifischer — daher hier mit .kmk-root davor,
   sonst greift der Abstand nicht und der Hinweis klebt am Text darueber. */
.kmk-root .kmk-standort-note { margin-top: 26px; }
.kmk-standort-note {
  padding: 16px 20px; border-radius: 14px;
  background: var(--kmk-bg-2); border-left: 3px solid var(--kmk-red-light);
  color: var(--kmk-muted); font-size: 0.98rem; line-height: 1.6;
}
.kmk-vehicles {
  margin-top: clamp(48px, 6vw, 76px); padding: clamp(30px, 4vw, 46px) clamp(24px, 4vw, 44px);
  background: var(--kmk-bg-2); border: 1px solid var(--kmk-line); border-radius: 22px; text-align: center;
}
.kmk-vehicles .kmk-lead { margin-left: auto; margin-right: auto; max-width: 620px; }
.kmk-vehicle-list {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
}
.kmk-vehicle-list li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--kmk-line);
  font-size: 0.95rem; font-weight: 600; color: var(--kmk-text);
}
.kmk-vehicle-list li svg { flex: 0 0 auto; color: var(--kmk-red-light); }
@media (min-width: 1024px) {
  .kmk-vehicle-list li { transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s; }
  .kmk-vehicle-list li:hover { transform: translateY(-2px); border-color: var(--kmk-red-light); }
}

/* --- Unterer Abschluss der Team-Sektion ---------------------------------
   Bilderstreifen, Sponsoring und Weiterlesen-Button sitzen auf EINER Breite
   (1080px = Breite der Personen-Karten). Vorher hatte jeder Block eine eigene
   Breite (940 / 720 / voll) und drei verschiedene Abstaende — das wirkte
   unsortiert. Jetzt: gleiche Kante links und rechts, gleicher Rhythmus. */
.kmk-team-more { max-width: 1080px; margin: clamp(44px, 5.5vw, 68px) auto 0; }

/* Kleine Zwischenueberschrift mit auslaufender Linie — gibt dem Bilderstreifen
   eine Ueberschrift, statt ihn unvermittelt beginnen zu lassen. */
.kmk-team-more-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.kmk-root .kmk-team-more-head h3 {
  margin: 0; flex: 0 0 auto;
  font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; color: var(--kmk-text);
}
.kmk-team-more-head::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--kmk-line);
}

/* Sponsoring-Hinweis (Startseite, unter dem Team) */
/* Sponsoring: Foto — Text — Vereine, drei Spalten ueber die volle Breite.
   Erst stand hier ein durchlaufender Satz (letzte Zeile nur zwei Woerter),
   dann alles links gestapelt (rechte Haelfte des 1080px-Kastens leer).
   Diese Aufteilung nutzt die Breite UND laesst jeden Vereinsnamen auf einer
   eigenen Zeile stehen. */
.kmk-sponsor {
  /* Textspalte gedeckelt: sonst zieht sie sich auf ihre volle Inhaltsbreite
     und der dritten Spalte bleibt kaum Platz — die Pillen klebten dann am
     rechten Rand, statt mittig dazwischen zu stehen. */
  display: grid; grid-template-columns: 280px minmax(0, 320px) 1fr;
  align-items: center; column-gap: 0; row-gap: 16px;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding: 16px; border-radius: 14px;
  background: var(--kmk-bg-2); border: 1px solid var(--kmk-line);
}
.kmk-sponsor-bild { margin: 0 clamp(18px, 2.2vw, 30px) 0 0; border-radius: 11px; overflow: hidden; align-self: stretch; }
.kmk-sponsor-bild img { display: block; width: 100%; height: 100%; min-height: 158px; object-fit: cover; }

.kmk-sponsor-text { display: flex; align-items: flex-start; gap: 14px; }
.kmk-sponsor-ic {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(140deg, rgba(31,78,155,0.13), rgba(31,78,155,0.05));
}
.kmk-sponsor-ic svg { color: var(--kmk-red); }
.kmk-sponsor p { margin: 0; color: var(--kmk-muted); font-size: 0.95rem; line-height: 1.55; }
.kmk-root .kmk-sponsor-kopf { color: var(--kmk-red); font-size: 1.12rem; font-weight: 800; }
.kmk-root .kmk-sponsor-sub { margin-top: 6px; font-size: 0.95rem; }

/* Ein Verein pro Zeile — so kann kein Wort allein am Ende haengen. Die
   geschuetzten Leerzeichen im Markup halten „1920/28 e. V." zusammen. */
.kmk-sponsor-vereine {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 9px; justify-items: stretch;
  /* Mittig im verbleibenden Platz zwischen Text und rechtem Rand */
  justify-self: center;
}
.kmk-sponsor-vereine li {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid rgba(31, 78, 155, 0.18);
  background: #fff;
  color: var(--kmk-text); font-size: 0.94rem; font-weight: 700;
  white-space: nowrap;
}

/* Mittlere Breiten: Vereine unter den Text, Foto bleibt links */
@media (max-width: 1040px) {
  .kmk-sponsor { grid-template-columns: 240px 1fr; }
  .kmk-sponsor-vereine {
    grid-column: 2; grid-auto-flow: column;
    justify-content: start; justify-self: start;
  }
}
/* Telefon: alles untereinander, Foto oben. Das Symbol steht dabei nur noch
   neben der Ueberschrift — sonst blieben fuer den Text nur 222px und der
   Vereinsname brach mitten im Namen um. */
@media (max-width: 760px) {
  .kmk-sponsor { grid-template-columns: 1fr; row-gap: 14px; }
  .kmk-sponsor-bild { margin-right: 0; }
  .kmk-sponsor-bild img { height: 190px; min-height: 0; }
  .kmk-sponsor-text { padding: 0 4px; }
  .kmk-sponsor-vereine { grid-column: 1; grid-auto-flow: row; justify-self: stretch; padding: 0 4px 4px; }
  .kmk-sponsor-vereine li { justify-content: flex-start; white-space: normal; }
}

/* Vier schmale Kacheln nebeneinander. Vorher 2x2 auf 940px — jedes Bild war
   dann rund 460px breit und hat die Sektion erschlagen. Die Fotos begleiten
   den Text, sie sind nicht der Hauptinhalt. */
.kmk-gallery {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 18px); margin: 0;
}
@media (max-width: 860px) { .kmk-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 619px) { .kmk-gallery { gap: 10px; } }
.kmk-gallery-item {
  margin: 0; overflow: hidden; border-radius: 14px;
  background: #fff; border: 1px solid var(--kmk-line);
  box-shadow: 0 16px 34px -30px rgba(20, 40, 80, 0.45);
  display: flex; flex-direction: column;
}
.kmk-gallery-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
/* Feste Hoehe fuer zwei Zeilen: sonst sind die vier Kacheln unterschiedlich
   hoch und die Bildunterschriften sitzen auf verschiedenen Linien. */
.kmk-gallery-item figcaption {
  padding: 11px 13px 13px; font-size: 0.84rem; font-weight: 500; line-height: 1.45;
  color: var(--kmk-muted); flex: 1;
  display: flex; align-items: center; min-height: calc(2 * 1.45em + 24px);
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .kmk-gallery-item { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
  .kmk-gallery-item:hover { transform: translateY(-5px); border-color: rgba(31,78,155,0.25); box-shadow: 0 30px 58px -32px rgba(20,40,80,0.5); }
  .kmk-gallery-item img { transition: transform .5s cubic-bezier(.16,1,.3,1); }
  .kmk-gallery-item:hover img { transform: scale(1.05); }
}

/* ============================================================
   SIGNATURE (Kundenwunsch: „etwas außergewöhnlicher")
   1. Fortschrittsleiste am oberen Rand
   2. Ruhig treibende Fahrbahn-Markierung im Hintergrund
   3. Überschriften, die wie ein Scan von links aufgedeckt werden
   Alles teure/bewegte nur ab Desktop (Migrations-Regel 12).
   ============================================================ */

/* 1. Fortschrittsleiste — zeigt, wie weit man in der Seite ist */
.kmk-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80;
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, var(--kmk-red-light), var(--kmk-red) 60%, var(--kmk-amber));
  box-shadow: 0 0 12px rgba(31, 78, 155, 0.45);
}

/* 2. Fahrbahn-Markierungen, die langsam schräg durchs Bild ziehen.
      Sehr blass — sie sollen Tiefe geben, nicht auffallen. */
.kmk-road-bg { display: none; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .kmk-road-bg {
    display: block; position: fixed; inset: -30% -30%; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(
      118deg,
      rgba(31, 78, 155, 0.026) 0 2px,
      transparent 2px 52px
    );
    will-change: transform;
    animation: kmkRoadDrift 26s linear infinite;
  }
}
@keyframes kmkRoadDrift {
  from { transform: translate3d(0, 0, 0); }
  /* Genau eine Rasterlänge: 52px Periode / cos(118°-90°) = 52 / 0,4695 = 110,75px → nahtloser Umlauf */
  to   { transform: translate3d(0, 110.75px, 0); }
}

/* 3. Überschriften werden von links aufgedeckt, ein Lichtstrich läuft mit */
.kmk-wipe { position: relative; }
.kmk-wipe > .kmk-h2,
.kmk-wipe > .kmk-promise-h,
.kmk-wipe > .kmk-parallax-h { clip-path: inset(0 100% 0 0); }
.kmk-wipe.in > .kmk-h2,
.kmk-wipe.in > .kmk-promise-h,
.kmk-wipe.in > .kmk-parallax-h {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s cubic-bezier(.16, 1, .3, 1) .1s;
}
.kmk-wipe::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--kmk-red), rgba(31, 78, 155, 0));
  pointer-events: none;
}
.kmk-wipe.in::after { width: 118px; transition: width .85s cubic-bezier(.16, 1, .3, 1) .35s; }
/* Bei zentrierten Abschnitts-Koepfen sitzt der linksbuendige Akzentstrich unter
   dem Fliesstext und wirkt wie ein Fehler -> dort ausblenden. */
.kmk-section-head.center.kmk-wipe::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .kmk-wipe > .kmk-h2, .kmk-wipe > .kmk-promise-h, .kmk-wipe > .kmk-parallax-h { clip-path: none !important; }
  .kmk-wipe::after { display: none; }
  .kmk-road-bg { display: none; }
}


/* ============================================================
   HANDY: Beruehrflaechen
   Textlinks waren 27-29px hoch. Auf einem Touchscreen ist das zu wenig —
   Faustregel sind rund 44px, sonst trifft man daneben. Betrifft vor allem die
   Kontaktzeilen (Telefon, WhatsApp, E-Mail) und die Weiterlesen-Links in den
   Leistungskarten, also genau die Stellen, an denen jemand handeln will.
   Ueber min-height und Innenabstand statt fester Hoehe, damit der Textfluss
   unveraendert bleibt.
   ============================================================ */
@media (max-width: 759px) {
  .kmk-stack-link,
  .kmk-contact-row { min-height: 44px; }
  /* Alle Links im Fussbereich, auch die ohne eigene Klasse (Telefon,
     WhatsApp, E-Mail in der Kontaktspalte) */
  .kmk-footer a,
  .kmk-crumbs a,
  .kmk-contact-info a,
  .kmk-form-consent a { display: inline-block; padding: 7px 0; }
  .kmk-teilen-btn { min-height: 44px; }
  /* Links mitten im Fliesstext (Impressum, Datenschutz): hier darf der
     Innenabstand die Zeilen NICHT auseinanderschieben — der negative
     Aussenabstand hebt das Wachstum wieder auf, die Trefferflaeche bleibt
     trotzdem groesser. */
  .kmk-prose p a { display: inline-block; padding: 9px 0; margin: -9px 0; }
  /* „Zurück zum Ratgeber" am Ende eines Beitrags — stand als einzelne
     22px hohe Zeile da. Nur als echter Link (a): in den Karten ist dasselbe
     Element ein reines Textstueck ohne eigene Trefferflaeche. */
  a.kmk-card-more { min-height: 44px; align-items: center; }

  /* Formularfelder mindestens 16px: Safari auf dem iPhone zoomt beim
     Antippen automatisch hinein, sobald die Schrift kleiner ist — die Seite
     springt dann und man muss von Hand zurueckzoomen. */
  .kmk-root .kmk-field input,
  .kmk-root .kmk-field select,
  .kmk-root .kmk-field textarea,
  .kmk-root .kmk-form input,
  .kmk-root .kmk-form select,
  .kmk-root .kmk-form textarea,
  /* Suchfeld im Ratgeber — hing vorher bei 15,2px und loeste damit beim
     Antippen dasselbe automatische Hineinzoomen aus. */
  .kmk-root .kmk-suche input { font-size: 16px; }

  /* Ankreuzfeld war 13x13px — mit dem Finger kaum zu treffen. */
  .kmk-root .kmk-form input[type="checkbox"] {
    width: 22px; height: 22px; flex: 0 0 auto;
  }
  .kmk-form-consent { align-items: flex-start; gap: 12px; }
}

/* ============================================================
   „Nicht nur Pkw." — Fahrzeugarten unter den Leistungen
   Aufbau aus Ervins Entwurf uebernommen (Bild in der Aenderungsliste vom
   17.08.2026): Ueberschrift, Einleitung, zwei Spalten mit durchnummerierten
   Zeilen und Symbol rechts, darunter Hinweis mit Knopf.
   Ervins Fassung ist dunkel — unsere Seite ist hell, deshalb helle Flaeche
   mit blauem Schimmer statt dunkler Sektion.
   ============================================================ */
.kmk-fzblock {
  margin-top: clamp(38px, 5vw, 68px);
  padding: clamp(28px, 3.4vw, 46px);
  border: 1px solid var(--kmk-line); border-radius: 24px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(31, 78, 155, 0.08), rgba(31, 78, 155, 0) 60%),
    #fff;
  box-shadow: 0 30px 60px -42px rgba(20, 40, 80, 0.5);
}
.kmk-fzblock-kopf { max-width: 60ch; }
.kmk-root .kmk-fzblock-kopf .kmk-h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.kmk-root .kmk-fzblock-kopf p {
  margin-top: 12px; color: var(--kmk-muted);
  font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.65;
}

/* Zwei Spalten, Nummerierung laeuft SPALTENWEISE (01 links, 02 rechts) —
   genau wie in Ervins Entwurf. Deshalb ein Raster mit Zeilenfluss, nicht
   zwei getrennte Listen. */
.kmk-fzliste {
  list-style: none; margin: clamp(24px, 3vw, 38px) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 3.5vw, 56px);
}
.kmk-fzliste li {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px;
  padding: 15px 2px 15px 0;
  border-bottom: 1px solid var(--kmk-line);
}
.kmk-fz-nr {
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em;
  color: var(--kmk-red-light); font-variant-numeric: tabular-nums;
}
.kmk-root .kmk-fz-name {
  font-size: clamp(1rem, 1.4vw, 1.14rem); font-weight: 800;
  color: var(--kmk-red); letter-spacing: -0.01em;
}
.kmk-fz-ic {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; color: var(--kmk-red);
  background: linear-gradient(140deg, rgba(31,78,155,0.12), rgba(31,78,155,0.04));
}
@media (min-width: 1024px) {
  .kmk-fzliste li { transition: border-color .3s ease; }
  .kmk-fzliste li:hover { border-color: var(--kmk-line-strong); }
  .kmk-fz-ic { transition: transform .3s ease, box-shadow .3s ease; }
  .kmk-fzliste li:hover .kmk-fz-ic {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -12px var(--kmk-glow);
  }
}

/* Abschlusszeile mit Knopf */
.kmk-fzblock-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; margin-top: clamp(24px, 3vw, 36px);
}
.kmk-root .kmk-fzblock-fuss p {
  margin: 0; max-width: 48ch;
  color: var(--kmk-muted); font-size: 0.98rem; line-height: 1.6;
}

@media (max-width: 700px) {
  .kmk-fzliste { grid-template-columns: 1fr; }
  .kmk-fzliste li { padding: 13px 0; gap: 12px; }
  .kmk-fz-ic { width: 34px; height: 34px; }
  .kmk-fzblock-fuss { flex-direction: column; align-items: stretch; }
  .kmk-fzblock-fuss .kmk-btn { width: 100%; }
}

/* Kurzbewertung / Vollgutachten auf der Oldtimer-Seite: zwei gleich hohe
   Karten mit Leistungsumfang. Der Kunde hat den Umfang beider Wege
   ausdruecklich aufgelistet haben wollen. */
.kmk-bewertung { display: flex; flex-direction: column; }
.kmk-bewertung .kmk-check { margin-top: 16px; }
.kmk-root .kmk-bewertung-note {
  margin-top: auto; padding-top: 16px;
  color: var(--kmk-muted); font-size: 0.92rem;
}

/* ============================================================
   HANDY IM QUERFORMAT
   Beanstandung des Kunden (17.08.2026): „Website durch Banner und Buttons in
   der Queransicht nicht nutzbar."

   Gemessen auf einem quer gehaltenen Telefon (834x390): Kopfzeile 125px plus
   Laufband 40px = 165px, also 42 Prozent des Bildschirms, ohne dass ein
   einziges Wort Inhalt zu sehen war. Auf einem kleineren Geraet (667x375)
   kommt die Aktionsleiste dazu — dann sind es rund 65 Prozent.

   Das Drehen sperren geht auf einer Website nicht: Die Browser erlauben das
   nur im Vollbild, und auf dem iPhone gar nicht. Also wird umformatiert.

   Ausloeser ist die HOEHE, nicht die Breite: ein Tablet im Querformat
   (1024x768) hat genug Platz und bleibt unveraendert.
   ============================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  /* Kontaktstreifen ganz weg — die Nummer steht in der Aktionsleiste */
  .kmk-topbar { display: none; }
  /* Kopfzeile flach: 125px -> 54px */
  .kmk-root .kmk-nav { height: 54px; }
  .kmk-root .kmk-logo-icon { width: 38px; height: 38px; }
  .kmk-root .kmk-wordmark b { font-size: 0.95rem; }
  .kmk-root .kmk-wordmark span { font-size: 0.6rem; letter-spacing: 0.14em; }
  /* Laufband aus: reine Zierde, kostet hier aber 40px von 390px */
  .kmk-ticker { display: none; }
  /* Aktionsleiste bleibt — sie ist der Weg zum Anruf. Nur flacher. */
  .kmk-mobilebar { padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); }
  .kmk-mobilebar .kmk-btn { padding: 9px 12px; font-size: 0.88rem; }
  .kmk-root .kmk-mobilebar .kmk-btn { font-size: 0.9rem; }

  /* Hero: nicht mehr bildschirmfuellend, sonst scrollt man durch ein Foto */
  .kmk-root .kmk-hero { min-height: 0; padding-top: 74px; padding-bottom: 34px; }
  .kmk-root .kmk-h1 { font-size: clamp(1.5rem, 4.2vw, 2.1rem); }
  .kmk-root .kmk-hero-sub { font-size: 0.95rem; }
  .kmk-usps { gap: 6px; }

  /* Sektionsabstaende zusammenruecken */
  .kmk-section { padding-top: 44px; padding-bottom: 44px; }

  /* Stapel-Sektion: quer ist Breite da, Hoehe nicht — also Bild neben den
     Text statt darueber, und der Text kuerzer angerissen. */
  .kmk-stack-pin { --kmk-frei-oben: 54px; --kmk-frei-unten: calc(var(--kmk-leiste-h, 62px) + 8px); }
  .kmk-stack-card { grid-template-columns: 1.25fr 0.75fr; }
  .kmk-stack-visual { order: 0; height: auto; min-height: 0; }
  .kmk-stack-body { padding: 12px 16px 14px; gap: 6px; }
  .kmk-stack-num { font-size: 1.4rem; }
  .kmk-root .kmk-stack-title { font-size: 1.05rem; margin-top: 2px; }
  .kmk-root .kmk-stack-eyebrow { margin-top: 4px; font-size: 0.66rem; }
  .kmk-root .kmk-stack-text {
    font-size: 0.85rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .kmk-stack-link { font-size: 0.68rem; padding-bottom: 3px; }

  /* Menue: bei 390px Hoehe bleiben nach der Kopfzeile keine 340px — es muss
     scrollen, sonst sind die unteren Punkte nicht erreichbar. */
  .kmk-mobilemenu.open { max-height: calc(100svh - 62px); }
  .kmk-mobilemenu-link { padding: 11px 4px; font-size: 0.98rem; }

  /* Foto-Baender flacher, sonst fuellt ein einzelnes Bild den Bildschirm */
  .kmk-halle-galerie img { height: 150px; }
  .kmk-sponsor-bild img { height: 140px; }
  .kmk-parallax { min-height: 0; }
}

/* Schutz gegen einzeln stehende Woerter am Zeilenende (Kundenwunsch:
   „da darf kein Wort einzeln stehen"). `text-wrap: pretty` weist den Browser
   an, den Umbruch so zu waehlen, dass die letzte Zeile nicht zu kurz wird.
   Betrifft die Stellen mit mehrzeiligen Kurztexten. */
.kmk-crew-plate small,
.kmk-vita-rolle,
.kmk-vita-text,
.kmk-siegel small,
.kmk-gallery figcaption,
.kmk-halle-galerie figcaption,
.kmk-sponsor-sub,
.kmk-stack-text,
.kmk-lead,
.kmk-prose p,
.kmk-card p { text-wrap: pretty; }

/* ============================================================
   SILBENTRENNUNG AUF SCHMALEN GERAETEN
   Deutsche Komposita wie „Sachverstaendigenassistent" oder
   „Ersteinschaetzung" passen auf einem 390px-Telefon nicht neben ein zweites
   Wort. Ohne Trennung landen sie allein in der letzten Zeile — genau das,
   was der Kunde nicht will („da darf kein Wort einzeln stehen").
   Die Seite ist als deutsch ausgezeichnet (<html lang="de">), deshalb trennt
   der Browser korrekt nach deutschen Regeln.
   Nur unterhalb von 620px: am Schreibtisch ist genug Platz, dort sehen
   Trennstriche unruhig aus.
   ============================================================ */
@media (max-width: 620px) {
  /* Nur Fliesstext. In Ueberschriften und Rollenzeilen wirken Trennstriche
     unruhig — die werden weiter unten mit geschuetzten Leerzeichen geloest. */
  .kmk-root .kmk-lead,
  .kmk-root .kmk-stack-text,
  .kmk-root .kmk-card p,
  .kmk-root .kmk-crew-bio,
  .kmk-root .kmk-vita-text,
  .kmk-root .kmk-siegel small,
  .kmk-root .kmk-prose p {
    hyphens: auto;
    -webkit-hyphens: auto;
    /* Zwei Zeichen vor und nach dem Trennstrich reichen im Deutschen nicht —
       drei sieht ruhiger aus und vermeidet Trennungen wie „Ab-teilung". */
    hyphenate-limit-chars: 8 4 4;
  }
}

/* ============================================================
   VERBANDS- UND ZERTIFIZIERUNGSLOGOS
   Der Kunde hat sie vermisst. Die Dateien stammen aus seinem Briefkopf, der
   der Aenderungsliste beilag — deshalb Rasterbilder und bewusst klein
   dargestellt: hochskaliert wuerden die Kanten sichtbar.
   ============================================================ */
.kmk-verbaende { margin-top: clamp(26px, 3.4vw, 44px); }
.kmk-root .kmk-verbaende-kopf {
  margin: 0 0 14px; font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--kmk-red-light);
}
.kmk-verbaende ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}
.kmk-verbaende li {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-radius: 16px;
  background: #fff; border: 1px solid var(--kmk-line);
  box-shadow: 0 18px 40px -34px rgba(20, 40, 80, 0.45);
}
.kmk-verbaende img {
  flex: 0 0 auto; height: 34px; width: auto;
  /* Der Scan hat einen leichten Grauschleier — die Kanten werden dadurch
     sauberer, ohne die Farben zu verfaelschen. */
  mix-blend-mode: multiply;
}
.kmk-verbaende span {
  color: var(--kmk-muted); font-size: 0.88rem; line-height: 1.5; text-wrap: pretty;
}
@media (max-width: 760px) {
  .kmk-verbaende ul { grid-template-columns: 1fr; }
  .kmk-verbaende li { padding: 14px 16px; gap: 13px; }
  .kmk-verbaende img { height: 30px; }
  .kmk-verbaende span { font-size: 0.85rem; }
}