/* ============================================================
   k4.css — Korrekturrunde 12.10.2026 (33 Punkte aus dem Reviewer)
   Laedt NACH k3.css und gewinnt. Jede Regel traegt ihre K-Nummer.
   Vorher-Werte wurden an der Live-Seite gemessen (docs/KORREKTURRUNDE-1.md).
   ============================================================ */

/* --- K2 + K29: sekundaere Knoepfe haben eine sichtbare Aussenkontur -------
   Vorher: border-color rgba(0,0,0,0) — der Rahmen war vollstaendig durchsichtig,
   der Knopf stand blank auf dem Hero. Jetzt Kontur + leichte Flaeche, damit er
   auf Bild UND auf ruhigem Grund als Knopf lesbar ist. */
.btn-ghost {
  border-color: rgba(244, 244, 245, 0.46);
  background: rgba(244, 244, 245, 0.05);
}
@media (hover: hover) {
  .btn-ghost:hover { border-color: var(--accent); background: rgba(249, 154, 64, 0.10); }
}

/* --- K3: Icons vertikal zur Karte zentriert ------------------------------- */
.tl-dot { top: 50%; transform: translateY(-50%); }

/* --- K4 + K11: Linie beginnt und endet in der Mitte des ersten/letzten Icons
   Die beiden Werte setzt js/main.js als --tl-oben / --tl-unten (gemessen).
   Ohne JS bleibt der bisherige Verlauf. */
.tl-rail { top: var(--tl-oben, 18px); bottom: var(--tl-unten, 18px); }

/* --- K5: Schrittzahl vor dem Titel ---------------------------------------- */
.tl-card h3 { padding-right: 0; display: flex; align-items: baseline; gap: 0.6em; }
.tl-nr {
  position: static; flex: none;
  font-family: Michroma, sans-serif; font-size: 0.82rem; line-height: 1;
  color: var(--text-muted);
}
.tl-step.is-on .tl-nr { color: var(--accent); }

/* --- K6: Box endet dort, wo der Text endet (vorher lief sie ueber die ganze
   Breite weiter, der Absatz endete bei ~65 Zeichen → halb leere Box) -------- */
/* .tl-card max-width 44.5rem: aufgehoben in Korrekturrunde 2 (28.10.2026), siehe k5.css (K4: Karten auf volle Contentbreite) */

/* --- K10: der Ablauf ist die schlichtere Fassung des Zeitstrahls ----------
   Keine Icon-Kreise, die Schrittzahl steht auf der Linie, flachere Karten.
   So ist es sichtbar nicht zweimal dasselbe Element. */
.tl-schlicht { counter-reset: tlnr; }
.tl-schlicht .tl-step { counter-increment: tlnr; }
.tl-schlicht .tl-dot {
  width: 38px; height: 38px; left: -66px;
  background: var(--box-bg-2, #16171A);
  font-family: Michroma, sans-serif; font-size: 0.78rem; color: var(--text-muted);
}
.tl-schlicht .tl-dot::after { content: counter(tlnr); }
.tl-schlicht .tl-card { padding: var(--box-pad, 18px) var(--box-pad-lg, 24px); }
.tl-schlicht .tl-card h3 { font-size: 1.02rem; margin-bottom: 2px; }
.tl-schlicht .tl-nr { display: none; }          /* die Zahl steht schon auf der Linie */

/* --- K9: der mitfahrende Wagen ruhiger und sauberer gesetzt --------------- */
.tl-marker img { width: 46px; }
.tl-marker:has(img)::before {
  width: 104px; height: 104px;
  background: radial-gradient(circle, rgba(249, 154, 64, 0.26), rgba(249, 154, 64, 0) 70%);
}

/* --- K7: Aufruf unter dem Unfall-Ablauf: Zeichen, Text, Knopf in einer Reihe
   statt Text und Knopf lose nebeneinander ---------------------------------- */
.cta-split {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-4, 20px) var(--sp-5, 28px);
  text-align: left;
}
.cta-split .cta-mark {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(249, 154, 64, 0.12); color: var(--accent);
}
.cta-split .cta-mark .ic { width: 26px; height: 26px; }
.cta-split .cta-copy { margin: 0; max-width: none; color: var(--text); }   /* 56ch-Deckel aufgehoben in Korrekturrunde 2 (28.10.2026), siehe k5.css (K5) */
.cta-split .btn { justify-self: end; }
@media (max-width: 720px) {
  .cta-split { grid-template-columns: auto minmax(0, 1fr); text-align: left; }
  .cta-split .btn { grid-column: 1 / -1; justify-self: stretch; }
}

/* --- K8 + K30: Inhalt der Textbox mittig statt oben ----------------------- */
.split-wide > .sec-head.panel { justify-content: center; }

/* --- K28: Abstand zwischen den Containern links und rechts deutlich kleiner
   (vorher 64px) ------------------------------------------------------------ */
.split-wide { gap: var(--sp-5, 28px); }

/* --- K27: Abstand zwischen den Boxen "Was uns ausmacht" kleiner (vorher 32px) */
.why-grid { gap: var(--sp-3, 16px); }

/* --- K22 + K23 + K32: Bild nicht in voller Hoehe, Text vertikal zentriert -- */
/* .tb align-items:center + Bild max-height 460px: aufgehoben in Korrekturrunde 2 (28.10.2026), siehe k5.css (K19: Bild so hoch wie der Textkasten) */
.tb-copy { justify-content: center; }

/* --- K25: Leistungen als saubere Container statt blanker Zeilen ----------- */
.feature-cards > li {
  background: var(--box-bg-2, #16171A);
  border: 1px solid var(--box-line, rgba(244, 244, 245, 0.10));
  border-radius: var(--r-box, 14px);
  padding: var(--box-pad, 18px) var(--box-pad-lg, 24px);
  margin: 0;
}
.feature-cards { display: grid; gap: var(--sp-3, 16px); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* --- K14 + K26: Fragen ansprechender, Einleitung steht jetzt darunter ----- */
.faq-cards .faq-card { transition: border-color 0.2s var(--ease, ease), background 0.2s var(--ease, ease); }
.faq-cards .faq-card[open] { border-color: rgba(249, 154, 64, 0.42); background: var(--box-bg-2, #16171A); }
.faq-cards summary { padding: calc(var(--box-pad, 18px) + 2px) var(--box-pad-lg, 24px); gap: 0.9em; }
.faq-cards summary > span { font-weight: 600; }
@media (hover: hover) { .faq-cards .faq-card:hover { border-color: rgba(244, 244, 245, 0.26); } }
/* .faq-section .faq-info max-width 72ch: aufgehoben in Korrekturrunde 2 (28.10.2026), siehe k5.css (K10) */

/* --- K16 + K17: Kontaktcontainer schmaler, rechts auf der Flucht, sauber
   angeordnet statt Text irgendwo linksbuendig ------------------------------ */
/* .funnel-aside max-width 520px rechtsbuendig: aufgehoben in Korrekturrunde 2 (28.10.2026), siehe k5.css (K13/K26) */
.funnel-aside { text-align: left; }
.funnel-aside-text { margin: 0; color: var(--text-muted); }
.funnel-aside .contact-row { display: grid; gap: 12px; margin: 0; }
.funnel-aside .contact-row li { display: flex; align-items: center; gap: 12px; }

/* --- K18: Social-Zeichen rechts neben dem Text, vertikal zentriert -------- */
.footer-follow-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: nowrap; margin-top: var(--sp-4, 20px);
}
.footer-follow-row .footer-follow { min-width: 0; }      /* darf umbrechen, statt die Zeile zu sprengen */
.footer-follow-row .footer-social { flex: none; }
.footer-follow-row .footer-follow { margin: 0; }
.footer-follow-row .footer-social { margin: 0; }

/* --- K19: Leistungen als eigene schmale Leiste, horizontal zentriert ------ */
.footer-services {
  border-top: 1px solid var(--box-line, rgba(244, 244, 245, 0.10));
  background: rgba(244, 244, 245, 0.03);
}
.footer-services-inner {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 28px; padding-block: 14px;
}
.footer-services-inner a {
  color: var(--text-muted); text-decoration: none; font-size: 0.92rem;
  padding: 10px 2px; min-height: 44px; display: inline-flex; align-items: center;
}
@media (hover: hover) { .footer-services-inner a:hover { color: var(--accent); } }

/* --- K20 + K21: Fussspalten in aehnlicher Hoehe, Marke kompakter ---------- */
.footer-claim { margin: 10px 0 0; max-width: 34ch; }
/* Nebenwirkung von K19 behoben: Das Raster war auf vier Spalten ausgelegt
   (2fr 1.3fr 1fr 1.2fr). Ohne die Leistungen-Spalte endete der Fuss bei zwei
   Dritteln der Breite. Drei Spalten fuellen jetzt die volle Inhaltsbreite. */
/* Spaltenanteile 1.6fr 1.2fr 1fr: aufgehoben in Korrekturrunde 2 (28.10.2026), siehe k5.css (K14: Spalten verteilt, Reihe endet an der Content-Kante) */
.footer-grid > * { align-content: start; }
nav.footer-col a { padding-block: 7px; }                  /* K21: nur die Menuespalten, Trefferflaeche >= 44px */
/* K21: Die Kontaktspalte war mit 271px die laengste (Kontaktliste 175 + Zeiten 52).
   Engere Zeilen bringen sie auf die Hoehe der Nachbarspalten, ohne Inhalt zu streichen. */
.footer-contact { gap: 10px; }
.footer-contact li { align-items: center; }


/* --- Team: seit 26.10.2026 sieben Personen ------------------------------
   Mit sechs Karten ging das Dreierraster glatt auf, mit sieben blieb in der
   letzten Reihe eine einzelne Karte stehen. Vier Spalten ergeben 4 + 3. */
.team-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Karte ohne Portraet (Elke Mehrhof): die Initialenflaeche bekommt denselben
   ruhigen Verlauf wie ein Foto, damit sie neben den Portraets nicht leer wirkt. */
.team-card.is-blank .team-photo,
.team-photo:not(:has(img)) {
  background: radial-gradient(circle at 50% 38%, #26272B, #141518 70%);
}

/* --- K31 (Runde 1) Teamfoto 32:9: aufgehoben in Korrekturrunde 2 (28.10.2026), siehe k5.css (K24: Teambild deutlich groesser,
   Gruppenbild ganz sichtbar im eigenen Format 3:2) */

/* --- K33: Karte fuellt ihren Rahmen, keine Luecke unten ------------------- */
.map-frame { display: grid; min-height: 420px; }
.map-frame > * { grid-area: 1 / 1; height: 100%; }
.map-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.map-consent { display: grid; place-items: center; height: 100%; }

/* --- K12: Lightbox fuer die Hallen-Galerie, ohne Beschriftung ------------- */
.gallery img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  border: 0; padding: 0; margin: 0; background: rgba(8, 9, 11, 0.94);
  z-index: 1200;
}
.lightbox::backdrop { background: rgba(8, 9, 11, 0.94); }
.lightbox[hidden] { display: none !important; }
/* Gemessen (12.10.2026): Im Bestand bekommt das <dialog> display:flex und fing im
   geschlossenen Zustand als unsichtbare Flaeche alle Klicks auf der Galerie ab.
   Der geschlossene Zustand wird deshalb ausdruecklich gesetzt. */
dialog.lightbox:not([open]) { display: none !important; }
.lightbox-figure { margin: 0; width: 100%; height: 100%; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); }
.lightbox-figure img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: var(--r-box, 14px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lightbox-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(22, 23, 26, 0.88); color: var(--text);
  border: 1px solid var(--box-line, rgba(244, 244, 245, 0.14));
}
.lightbox-prev { left: clamp(10px, 3vw, 28px); }
.lightbox-next { right: clamp(10px, 3vw, 28px); }
.lightbox-close { top: clamp(10px, 3vw, 24px); right: clamp(10px, 3vw, 28px); transform: none; }
@media (hover: hover) { .lightbox-btn:hover { border-color: var(--accent); color: var(--accent); } }
.lightbox-btn .ic { width: 22px; height: 22px; }
.lightbox-prev .ic { transform: rotate(90deg); }
.lightbox-next .ic { transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
  .faq-cards .faq-card { transition: none; }
}