/* ============================================================
   k5.css — Korrekturrunde 2 (28.10.2026): EIN System fuer Abstaende,
   Breiten und Bildverteilung. Laedt als letzte Ebene.

   Mike: „einheitliches Paddingsystem, vernuenftige Container-Anordnung,
   gleichmaessige Bildverteilung". Deshalb haengen Sektion, Kopf und Kasten
   an denselben fuenf Tokens, statt dass jede Komponente ihre eigene Zahl
   traegt. Vorher gemessen: Sektionen 108 / 122 / 94 px (1440), 72 / 84 px
   (390), Kopfabstand 49 / 32 / 12 px. Jede Regel traegt ihre K-Nummer,
   Belege in docs/KORREKTURRUNDE-2.md.
   ============================================================ */

/* --- System-Tokens -------------------------------------------------------- */
:root {
  --sec-pad: 80px;     /* jede Sektion oben und unten */
  --head-gap: 48px;    /* Sektionskopf bis Inhalt, Inhalt bis Abschlusskasten */
  --band-pad: 64px;    /* Abschlussband */
  --col-gap: 24px;     /* zwei Bloecke nebeneinander (Text | Bild, Kopf | Liste) */
  --card-gap: 16px;    /* Karten im Raster, Kasten unter Kasten */
}
@media (max-width: 960px) {
  :root { --sec-pad: 64px; --head-gap: 32px; --band-pad: 48px; }
}

/* --- K9 / K11 / K22: ein Polster fuer jede Sektion -------------------------
   Vorher trugen .section und .section-alt verschiedene clamp()-Werte, die
   Galerie zusaetzlich 104px inline. „Haeufige Fragen" stand 216px unter dem
   Inhalt davor und 12px ueber den Fragen: der Kopf klebte an den Karten. */
main > .section,
main > .section-alt,
main > .faq-section,
main > .funnel-section { padding-block: var(--sec-pad); }
.cta-band { padding-block: var(--band-pad); }

/* --- K9: ein Abstand vom Kopf zum Inhalt, eine Kopfbreite ----------------- */
.sec-head,
.faq-section .sec-head,
.funnel-section .sec-head { margin-bottom: var(--head-gap); max-width: none; }
.sec-head > :last-child { margin-bottom: 0; }
.split-wide > .sec-head { margin-bottom: 0; }          /* steht neben der Liste, nicht darueber */
.gallery-section > .sec-head { margin-bottom: 0; }
.gallery-section > .gallery-bleed { margin-top: var(--head-gap); }

/* --- K5: Text in Kaesten fuellt seinen Kasten ------------------------------
   „Fuelle einfach den Text da gleichmaessig auf." Der globale 65ch-Deckel auf
   Absaetzen liess in breiten Kaesten rechts bis zu 435px frei.
   Ausgenommen: der Bewertungsbereich (Passt so). */
:is(.panel:not(.testi-more), .infobox, .tl-card, .funnel-aside, .why-card,
    .faq-card, .contact-card, .tb-copy, .legal-body) p { max-width: none; }

/* Rechtstexte: derselbe Kasten ueber die volle Contentbreite wie ueberall
   (vorher auf 82 Zeichen gedeckelt und mittig, 282px Rand je Seite) */
.legal-body.panel { max-width: none; margin-inline: 0; }

/* --- K6: Abschlusskasten unter einem Ablauf: derselbe Baustein wie unter dem
   Unfall-Ablauf (Zeichen, Text, Knopf in einer Reihe), Abstand aus dem System */
.cta-panel:not(.testi-more) { margin-top: var(--head-gap); }

/* --- K4 / K6 / K21: Zeitstrahl-Karten ueber die volle Contentbreite --------
   Am Schreibtisch steht der Titel links, der Text rechts: die Karte ist breit,
   der Text fuellt seine Spalte und laeuft nicht 130 Zeichen lang. */
@media (min-width: 961px) {
  .tl-card {
    display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: var(--sp-6, 32px); align-items: center;
  }
  .tl-card h3, .tl-card p { margin: 0; }
}

/* --- K18 / K19 / K20 / K25: Text und Bild ---------------------------------
   Gleiche Spalten, gleiche Hoehe (das Bild fuellt die Hoehe des Textkastens),
   und in aufeinanderfolgenden Sektionen wechselt das Bild die Seite.
   Vorher setzte .flip das Bild auf order:2, wo es ohnehin stand: beide rechts. */
.tb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); }
@media (min-width: 961px) {
  .tb { align-items: stretch; }
  .tb > .tb-copy.panel { justify-content: center; }
  /* Der Text gibt die Hoehe vor, das Bild fuellt sie: absolut gesetzt traegt
     das Foto nichts zur Reihenhoehe bei (ein Hochformat zog sonst den
     Textkasten auf 750px und liess ihn halb leer stehen). */
  .tb-media { position: relative; display: block; margin: 0; min-width: 0; min-height: 340px; }
  .tb-media img {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none;
    aspect-ratio: auto !important; object-fit: cover;
  }
  .tb.flip > .tb-media, .tb.flip > .map-frame { order: -1; }
}
@media (max-width: 960px) {
  .tb { grid-template-columns: minmax(0, 1fr); }
  .tb.flip > .tb-media { order: 0; }
}

/* --- K10 / K12: FAQ-Box ueber die volle Breite, mit direktem Draht ---------- */
.faq-section .faq-info {
  max-width: none; margin: var(--card-gap) 0 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--card-gap) var(--col-gap);
}
.faq-info > .ic { margin: 0; }
.faq-info-text p { margin: 0; }
.faq-info-text p + p { margin-top: 6px; }
.faq-info-frage { color: var(--text-muted); }
.faq-info-frage strong { color: var(--text); }
.faq-info-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faq-info-knoepfe .btn { width: 100%; justify-content: center; white-space: nowrap; }
@media (max-width: 960px) {
  .faq-section .faq-info { grid-template-columns: auto minmax(0, 1fr); }
  .faq-info-knoepfe { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .faq-info-knoepfe { grid-template-columns: minmax(0, 1fr); }
}

/* --- K13 / K26: Kontaktleiste unter dem Funnel ueber die volle Breite -------
   Text links, Telefon / E-Mail / Adresse rechts, beide vertikal mittig.
   Vorher 520px breit im rechten Drittel. Der Funnel selbst bleibt (Passt so). */
.funnel-aside {
  max-width: none; margin: var(--card-gap) 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--col-gap) var(--sp-7, 48px);
}
.funnel-aside .contact-row {
  margin: 0; padding: 0 0 0 var(--sp-7, 48px);
  border-top: 0; border-left: 1px solid var(--line);
  display: grid; gap: 12px;
}
@media (max-width: 960px) {
  .funnel-aside { grid-template-columns: minmax(0, 1fr); }
  .funnel-aside .contact-row { padding: var(--card-gap) 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* --- K14 / K15: Fuss verteilt sich ueber die Contentbreite -----------------
   Spalten so breit wie ihr Inhalt, gleiche Luecken, die letzte endet an der
   rechten Kante. Vorher 1.6fr 1.2fr 1fr: Luecken 75 / 149px. */
.footer-grid {
  grid-template-columns: auto auto auto; justify-content: space-between;
  column-gap: var(--sp-7, 48px);
}
@media (max-width: 1100px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-content: stretch; } }
@media (max-width: 600px)  { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-claim { max-width: none; }   /* vorher 34ch: „Auto." stand allein in Zeile 2 */
/* K16 / K17: der Textlink „Design" ist raus (das Badge bleibt); Impressum und
   Datenschutz stehen in der Mittelspalte des 1fr-auto-1fr-Rasters (k3.css). */

/* --- K7 / K8: Lightbox ----------------------------------------------------
   Jedes Bild steht vollstaendig in einem Rahmen desselben Formats (3:2),
   hoechstens 960px breit und 78% der Fensterhoehe hoch. Vorher fuellte das
   Bild das Fenster bis an den Rand. */
.lightbox-figure { padding: clamp(16px, 4vw, 48px) clamp(16px, 8vw, 112px); }
.lightbox-figure img {
  width: min(960px, 100%, 78vh * 1.5); height: auto; max-width: none; max-height: none;
  aspect-ratio: 3 / 2; object-fit: contain;
  background: var(--box-bg, #16171A);
  border: 1px solid var(--box-line, rgba(244, 244, 245, 0.10));
}

/* Knoepfe immer ueber dem Bild: eine V1-Regel (.lightbox img) hebt das Bild auf
   z-index 1, am Handy lag es sonst ueber dem Weiter-Pfeil */
.lightbox-btn { z-index: 2; }
@media (max-width: 640px) {
  /* Handy: Rahmen ueber die volle Breite im Hochformat 3:4 (sonst 358 x 239 px),
     Schliessen oben, Pfeile unter dem Bild statt darauf */
  .lightbox-figure { padding: 76px 16px 100px; }
  .lightbox-figure img { width: min(100%, (100vh - 176px) * 0.75); aspect-ratio: 3 / 4; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 28px; transform: none; }
  .lightbox-prev { left: calc(50% - 64px); }
  .lightbox-next { right: calc(50% - 64px); }
}

/* --- K24: Teambild deutlich groesser --------------------------------------
   Gruppenbild in seinem eigenen Format 3:2 ueber die volle Contentbreite,
   alle Personen ganz (vorher 32:9-Streifen, 42 % des Bildes sichtbar). */
.team-foto { margin: 0 0 var(--col-gap); }
.team-foto img { width: 100%; height: auto; object-fit: cover; }
/* Sieben Karten: die zweite Reihe (3) steht mittig unter der ersten (4), statt
   rechts ein leeres Feld zu lassen. Feste Kartenbreite = ein Viertel der Reihe. */
.team-grid { margin-top: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--card-gap); }
.team-grid > .team-card { flex: 0 0 calc((100% - 3 * var(--card-gap)) / 4); min-width: 0; }
@media (max-width: 1024px) { .team-grid > .team-card { flex-basis: calc((100% - var(--card-gap)) / 2); } }
@media (max-width: 640px)  { .team-grid > .team-card { flex-basis: 100%; } }

/* --- K25 / K27: Karten im Raster mit einer Luecke ------------------------- */
.why-grid, .feature-cards, .contact-cards, .faq-cards { gap: var(--card-gap); }

/* --- K23: „Passt dazu" in der Machart der Leistungskarten ----------------- */
.passt-grid { gap: var(--card-gap); }

/* --- K1: handwerklicher Spruch im Ladebildschirm --------------------------- */
.pl-spruch {
  margin: 0 auto 12px; max-width: none; text-align: center;   /* globaler 65ch-Deckel zog ihn aus der Mitte */
  font-family: Michroma, sans-serif; font-size: clamp(0.82rem, 1.5vw, 0.98rem);
  letter-spacing: 0.04em; color: var(--text);
  opacity: 0; animation: pl-status-in 0.7s var(--ease, ease) 0.85s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .pl-spruch { animation: none; opacity: 1; }
}

/* --- K2: Hero neu -----------------------------------------------------------
   Links die Aussage, rechts „die Leitung": die vier Bereiche haengen an EINER
   Linie, die in EINE Nummer muendet. Das ist der Satz der Ueberschrift als
   Bild statt zwei Standardknoepfen unter einer Standardzeile. */
.hero-k5 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.hero-k5-inner {
  flex: 1; position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: var(--sp-7, 48px); align-items: center;
  padding-top: calc(var(--nav-h) + var(--subnav-h) + 48px); padding-bottom: 48px;
}
.hero-k5 .hero-copy { min-width: 0; }
.hero-k5 h1.h1-xl { font-size: clamp(2.4rem, 4.6vw, 4.2rem); max-width: none; }
.hero-k5 .hero-sub { margin-bottom: 0; }

.hero-leitung {
  position: relative;
  background: rgba(12, 13, 15, 0.92);
  border: 1px solid var(--box-line, rgba(244, 244, 245, 0.10));
  border-radius: var(--r-box, 14px);
  padding: var(--box-pad-lg, 24px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.hl-kopf { margin: 0 0 12px; font-size: 0.9rem; color: var(--text-muted); }
.hl-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative; }
/* Die Leitung: grau als Spur, orange als Fluss von Bereich zu Nummer.
   Anfang und Ende liegen in der Mitte des ersten bzw. letzten Kreises. */
.hl-liste::before, .hl-liste::after {
  content: ""; position: absolute; left: 17px; width: 2px;
  top: 20px; bottom: 30px; border-radius: 2px;
  background: rgba(244, 244, 245, 0.16);
}
.hl-liste::after { background: linear-gradient(var(--accent), #E8420A); transform-origin: top; }
.hl-liste a {
  display: flex; align-items: center; gap: 14px; padding-block: 2px;
  color: var(--text); text-decoration: none; min-height: 36px;
}
.hl-liste a > .ic {
  position: relative; z-index: 1; flex: none; box-sizing: border-box;
  width: 36px; height: 36px; padding: 8px; border-radius: 50%;
  background: #1C1D21; border: 1px solid var(--box-line, rgba(244, 244, 245, 0.10));
  color: var(--accent);
}
@media (hover: hover) {
  .hl-liste a:hover { color: var(--accent); }
  .hl-liste a:hover > .ic { border-color: var(--accent); }
}
.hl-nummer { margin-top: 10px; }
.hl-nummer a { min-height: 0; height: 60px; }   /* feste Hoehe: Kreismitte immer 30px ueber der Unterkante (= Linienende) */
.hl-nummer a > .ic { background: var(--accent); border-color: var(--accent); color: #111214; }
.hl-nummer a > span {
  display: grid; gap: 2px;
  font-family: Michroma, sans-serif; font-size: clamp(1.02rem, 1.3vw, 1.18rem); letter-spacing: 0.02em;
  white-space: nowrap;
}
.hl-nummer small { font-family: Inter, sans-serif; font-size: 0.8rem; letter-spacing: 0; color: var(--text-muted); }
.hl-zeiten { list-style: none; margin: 10px 0 0 50px; padding: 0; display: grid; gap: 2px; font-size: 0.85rem; color: var(--text-muted); }
.hl-zeiten li { display: flex; gap: 8px; }
.hl-zeiten li span:first-child { min-width: 4.6em; }
.hl-knoepfe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
.hl-knoepfe .btn { width: 100%; justify-content: center; white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  html.pl-open .hl-liste::after, html.pl-skip .hl-liste::after {
    animation: hl-fluss 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
  }
  html.js.pl-lock .hero-leitung { animation: fade-up 0.8s var(--ease) 0.6s both; }
  html.pl-open .hero-leitung, html.pl-skip .hero-leitung { animation: none; }
}
@keyframes hl-fluss { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* --- K3: drei Kacheln unter dem Hero -----------------------------------------
   Inhalt horizontal mittig; der Pfeil steht direkt hinter dem Titel und hat
   damit in jeder Kachel denselben Abstand (vorher am rechten Rand: 86 / 62 /
   31px hinter dem umbrechenden Text). Ohne Weichzeichner (Scroll-Glaette). */
.hero-k5 .hero-tiles { position: relative; z-index: 1; gap: var(--card-gap); padding-bottom: 48px; }
.hero-k5 .hero-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 18px 20px;
  background: rgba(12, 13, 15, 0.92);
  border: 1px solid var(--box-line, rgba(244, 244, 245, 0.10));
  border-radius: var(--r-box, 14px);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero-k5 .ht-kopf { display: inline-flex; align-items: center; gap: 10px; grid-column: auto; color: var(--text); font-size: inherit; }
.hero-k5 .ht-kopf > .ic:first-child { flex: none; width: 26px; height: 26px; color: var(--accent); }
.hero-k5 .ht-kopf strong { color: var(--text); font-size: 1rem; }
.hero-k5 .ht-kopf .ic-arrow { flex: none; width: 18px; height: 18px; }
.hero-k5 .ht-text { grid-column: auto; color: var(--text-muted); font-size: 0.86rem; line-height: 1.4; text-wrap: balance; }

@media (max-width: 960px) {
  .hero-k5-inner {
    grid-template-columns: minmax(0, 1fr); gap: var(--sp-6, 32px);
    padding-top: calc(var(--nav-h) + 40px); padding-bottom: 32px;
  }
  .hero-k5 .hero-tiles { grid-template-columns: minmax(0, 1fr); padding-bottom: 32px; }
  /* laengste Zeile „ein Ansprechpartner." = 9,79em: Groesse aus der Spaltenbreite,
     damit jede der drei Zeilen auch bei 320px in einer Zeile steht */
  .hero-k5 h1.h1-xl { font-size: min(3.4rem, calc((100vw - 48px) / 10)); }
}


/* ============================================================
   Firmenkunden & Fuhrpark (28.10.2026, Anschreiben Miklos Kozak)
   ============================================================ */

/* Mega-Menue: fuenf Leistungen in einer Reihe statt 4 + 1 */
.mega-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Funnel Schritt 1: acht Anliegen. Am Schreibtisch 3 + 3 + 2, die letzte Reihe
   mittig (Sechserraster, jede Kachel zwei Spalten); bis 860px zwei Spalten = 4 Reihen */
@media (min-width: 861px) {
  .fn-step[data-step="1"] .fn-tiles-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fn-step[data-step="1"] .fn-tiles-3 > .fn-tile { grid-column: span 2; }
  .fn-step[data-step="1"] .fn-tiles-3 > .fn-tile:nth-child(7):nth-last-child(2) { grid-column: 2 / span 2; }
}

/* Schmale Breiten: Spalten duerfen unter ihre Wortbreite schrumpfen (1fr wuchs bei 320px um 26px ueber den Rand) */
@media (max-width: 860px) {
  .fn-tiles-3, .fn-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fn-tile-box strong { overflow-wrap: break-word; hyphens: manual; }
}

/* Startseite „Fuer Firmen und Fuhrparks": vier Punkte im Raster, zwei gleich breite Knoepfe */
.fk-punkte {
  list-style: none; margin: var(--col-gap) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--col-gap);
}
.fk-punkte li { display: flex; align-items: flex-start; gap: 12px; margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.fk-punkte li > .ic { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--accent); }
.fk-punkte strong { display: block; color: var(--text); }
.fk-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: var(--col-gap); }
.fk-knoepfe .btn { width: 100%; justify-content: center; }
@media (max-width: 560px) {
  .fk-punkte, .fk-knoepfe { grid-template-columns: minmax(0, 1fr); }
}

/* Leistungsseite: Qualifikation und Partner als Zeile unter den Vorteilen (Partner als Text, ohne Logos) */
.partner-zeile {
  margin: var(--card-gap) 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap) var(--col-gap);
}
.partner-zeile dt { margin: 0 0 4px; font-size: 0.85rem; color: var(--text-muted); }
.partner-zeile dd { margin: 0; color: var(--text); }
@media (max-width: 760px) { .partner-zeile { grid-template-columns: minmax(0, 1fr); } }

/* Leitsatz aus Miklos' Anschreiben (28.10.2026) unter dem Claim im Fuss */
.footer-motto {
  margin: 8px 0 0; max-width: none;
  font-family: Michroma, sans-serif; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-muted);
}