/* ===== Kfz-Seite Fassung 5 (Demo 15.10.2026), Magazin-Look =====
   Gleicher Look wie das Kfz-Karussell auf Instagram (Beitrag-Kfz-Treue):
   echtes Foto, Waldgrün, Source Serif mit goldener Kursive, Messing-Linien.
   Nur Brand-Tokens aus style.css, keine Anzeigenfarben. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero wie Anzeige K2c: Foto abgedunkelt, weiße Schlagzeile, Siegel, weiße Karte */
.kz5-hero { position: relative; color: #fff; background: var(--forest-deep); overflow: hidden; }
.kz5-hero__foto { display: block; width: 100%; height: 230px; object-fit: cover; object-position: 30% 35%; }
.kz5-hero::before { content: none; }
.kz5-hero__raster { position: relative; z-index: 2; display: grid; gap: 18px; padding-top: 6px; padding-bottom: 28px; }
.kz5-hero__raster .kz5-siegel { position: absolute; right: 14px; top: -112px; margin: 0; width: 128px; height: 128px; }
.kz5-hero__raster .kz5-siegel strong { font-size: 2.6rem; }
@media (max-width: 63.99em) { .kz5-karte__foto { display: none; } .kz5-titel { font-size: clamp(1.9rem, 7.6vw, 2.6rem); } }
.kz5-krumen .breadcrumb__list, .kz5-krumen a { color: rgba(255,255,255,.75); }
.kz5-krumen .breadcrumb__item[aria-current] { color: #fff; }
.kz5-marke { margin: 16px 0 0; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--forest); font: 600 .9rem/1 var(--font-body); padding: 9px 16px 9px 12px; border-radius: 999px; }
.kz5-marke span { font: 700 1.15rem/1 var(--font-display); color: var(--brass); }
.kz5-titel { margin: 16px 0 0; max-width: 15ch; font: 800 clamp(2.1rem, 8.6vw, 4rem)/1.04 var(--font-body); letter-spacing: -.025em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.kz5-siegel { justify-self: end; margin: -8px 4px 0 0; width: 150px; height: 150px; border-radius: 50%; background: #fff; color: var(--forest); display: grid; place-content: center; text-align: center; transform: rotate(-8deg); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.kz5-siegel span { font: 700 1.05rem/1 var(--font-body); }
.kz5-siegel strong { font: 800 3.1rem/1 var(--font-body); color: var(--clay); letter-spacing: -.03em; margin: 4px 0; }
.kz5-karte { background: #fff; color: var(--forest); border-radius: 18px; padding: 20px 18px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.kz5-karte__titel { margin: 0 0 14px; font: 800 1.45rem/1.15 var(--font-body); letter-spacing: -.015em; color: var(--forest); }
.kz5-karte__inhalt { display: grid; gap: 14px; align-items: center; }
.kz5-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kz5-haken li { position: relative; padding-left: 28px; font: 600 1.02rem/1.35 var(--font-body); color: var(--forest); }
.kz5-haken li::before { content: ""; position: absolute; left: 2px; top: .22em; width: 13px; height: 7px; border-left: 2.5px solid var(--clay); border-bottom: 2.5px solid var(--clay); transform: rotate(-45deg); }
.kz5-karte__foto { margin: 0; text-align: center; }
.kz5-karte__foto img { width: 100%; max-height: 180px; object-fit: cover; object-position: 50% 30%; border-radius: 10px; display: block; }
.kz5-karte__foto figcaption { margin-top: 6px; font: 600 .85rem/1.2 var(--font-body); color: var(--forest); }
.kz5-karte__knopf { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--clay); color: #fff; font: 700 1.15rem/1 var(--font-body); padding: 16px 18px; border-radius: 10px; text-decoration: none; transition: background .15s; }
.kz5-karte__knopf svg { width: 18px; height: 18px; fill: #fff; }
.kz5-karte__knopf:hover { background: #9E4C30; }
.kz5-karte__hinweis { margin: 10px 0 0; text-align: center; font: 400 .85rem/1.4 var(--font-body); color: var(--ink-soft); }
.kz5-karte__hinweis a { color: var(--forest); }
.kz5-band__klein a { color: #fff; }
.kz5-karte__fuss { margin: 10px 0 0; font: 400 .72rem/1.45 var(--font-body); color: var(--ink-soft); }

/* Formular */
.kz5-schnell { background: var(--bone); padding: 52px 0 60px; scroll-margin-top: 80px; }
.kz5-schnell__raster { display: grid; gap: 32px; }
.kz5-schnell__kopf .lead { max-width: 32rem; }
.kz5-person { margin: 22px 0 0; display: flex; align-items: center; gap: 14px; }
.kz5-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.kz5-person figcaption { display: grid; font: 600 .95rem/1.35 var(--font-body); color: var(--ink); }
.kz5-person figcaption span { font-weight: 400; color: var(--ink-soft); }

.kz5-form { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--forest); padding: 22px 20px 20px; display: grid; gap: 18px; }
.kz5-form__gruppe { border: 0; margin: 0; padding: 0; }
.kz5-form__gruppe legend, .kz5-feld label { font: 600 .9rem/1.3 var(--font-body); margin-bottom: 8px; display: block; padding: 0; color: var(--ink); }
.kz5-feld label span { font-weight: 400; color: var(--sage-deep); }
.kz5-feld label span::before { content: "· "; }
.kz5-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kz5-chip input { position: absolute; opacity: 0; pointer-events: none; }
.kz5-chip span { display: inline-block; padding: 10px 15px; border: 1px solid var(--rule-strong, rgba(16,32,27,.24)); border-radius: 999px; font: 500 .92rem/1 var(--font-body); cursor: pointer; background: var(--paper); color: var(--ink); transition: background .15s, border-color .15s; }
.kz5-chip span:hover { border-color: var(--forest); }
.kz5-chip input:checked + span { background: var(--forest); color: var(--bone); border-color: var(--forest); }
.kz5-chip input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.kz5-feld input { width: 100%; font: 400 1.05rem/1.2 var(--font-body); padding: 13px 14px; border: 1px solid var(--rule-strong, rgba(16,32,27,.24)); border-radius: 3px; background: var(--bone); color: var(--ink); }
.kz5-feld input::placeholder { color: var(--sage-deep); opacity: .8; }
.kz5-feld input:focus { outline: 2px solid var(--forest); outline-offset: 1px; background: var(--paper); }
.kz5-feld.is-fehler input { border-color: var(--clay); }
.kz5-fehler { margin: 6px 0 0; color: #9A4428; font: 600 .85rem/1.2 var(--font-body); }
.kz5-reihe { display: grid; gap: 18px; }
.kz5-senden { width: 100%; justify-content: center; font-size: 1.05rem; padding-block: 16px; }
.kz5-recht, .kz5-alt { margin: 0; font: 400 .8rem/1.5 var(--font-body); color: var(--ink-soft); }
.kz5-alt a, .kz5-recht a { color: var(--forest); }

/* Wer steht dahinter */
.kz5-echt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; }
.kz5-echt__raster { display: grid; gap: 18px; }
.kz5-echt__frage { margin: 0; font: 600 1.3rem/1.2 var(--font-display); color: var(--forest); }
.kz5-echt__frage em { display: block; font-weight: 400; color: var(--accent-text); }
.kz5-echt__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kz5-echt__liste li { display: grid; gap: 2px; padding-left: 14px; border-left: 1px solid var(--brass); font: 400 .88rem/1.45 var(--font-body); color: var(--ink-soft); }
.kz5-echt__liste strong { color: var(--ink); font-weight: 600; }
.kz5-echt__liste a { color: var(--forest); }

/* Echter Fall */
.kz5-fallteil { background: var(--paper); padding: 64px 0; scroll-margin-top: 80px; }
.kz5-fallteil__raster { display: grid; gap: 28px; }
.kz5-fallteil__kopf .lead { max-width: 34rem; }
.kz5-beleg { border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); padding: 22px 0 24px; }
.kz5-beleg__daten { margin: 0 0 18px; display: grid; gap: 10px; }
.kz5-beleg__daten div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 10px; font: 400 .92rem/1.45 var(--font-body); }
.kz5-beleg__daten dt { font-weight: 600; color: var(--accent-text); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; padding-top: .2em; }
.kz5-beleg__daten dd { margin: 0; }
.kz5-beleg__vergleich { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kz5-beleg__vergleich > div { padding: 18px 0; display: grid; gap: 4px; }
.kz5-beleg__neu { padding-left: 18px !important; border-left: 1px solid var(--line); }
.kz5-beleg__vergleich span { font: 600 .72rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sage-deep); }
.kz5-beleg__vergleich strong { font: 600 clamp(2rem, 7vw, 3rem)/1 var(--font-display); color: var(--ink); }
.kz5-beleg__alt strong { font-weight: 400; color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--clay); text-decoration-thickness: 2px; }
.kz5-beleg__neu strong { color: var(--forest); }
.kz5-beleg__vergleich small { font: 400 .8rem/1.3 var(--font-body); color: var(--ink-soft); }
.kz5-beleg__summe { margin: 18px 0 6px; font: 400 1.05rem/1.5 var(--font-body); }
.kz5-beleg__summe strong { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; font-weight: 600; color: var(--forest); }
.kz5-beleg__klein { margin: 0 0 20px; font: 400 .78rem/1.5 var(--font-body); color: var(--ink-soft); }
.kz5-beleg__knopf { display: inline-block; background: var(--forest); color: var(--bone); font: 600 .98rem/1 var(--font-body); padding: 14px 20px; border-radius: 3px; text-decoration: none; }
.kz5-beleg__knopf:hover { background: var(--forest-deep); }

/* Wissen (SEO) */
.kz5-wissen__raster { display: grid; gap: 24px; }
.kz5-wissen__text { max-width: 40rem; }
.kz5-wissen__text p { margin: 0 0 16px; }
.kz5-schritte { margin: 8px 0 22px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.kz5-schritte li { counter-increment: s; display: grid; grid-template-columns: 2.4rem 1fr; gap: 6px; }
.kz5-schritte li::before { content: counter(s); font: 600 1.9rem/1 var(--font-display); color: var(--accent-text); }
.kz5-wissen__weiter { font-size: .92rem; }
.kz5-wissen__quelle { font-size: .78rem; color: var(--sage-deep); }

/* Film-Abschnitt */
.kz5-film { background: var(--bone); padding: 56px 0; }
.kz5-film .kz3-film { margin-top: 20px; }

/* Startseite: Kfz-Band wie Anzeige K2c */
.kz5-band { position: relative; overflow: hidden; color: #fff; background: var(--forest-deep); }
.kz5-band__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.kz5-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,38,29,.8) 0%, rgba(7,38,29,.5) 60%, rgba(7,38,29,.35) 100%); z-index: 1; }
.kz5-band__raster { position: relative; z-index: 2; display: grid; gap: 20px; padding-top: 40px; padding-bottom: 44px; align-items: center; }
.kz5-band__titel { margin: 16px 0 0; max-width: 16ch; font: 800 clamp(1.9rem, 6.5vw, 3.2rem)/1.06 var(--font-body); letter-spacing: -.025em; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.kz5-band__knopf { display: inline-flex; margin-top: 22px; padding-inline: 26px; }
.kz5-band__klein { margin: 14px 0 0; max-width: 36rem; font: 400 .72rem/1.45 var(--font-body); color: rgba(255,255,255,.72); }
.kz5-siegel--band { justify-self: start; }

@media (min-width: 40em) {
  .kz5-reihe { grid-template-columns: 1fr 1fr; }
  .kz5-echt__liste { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 52em) {
  .kz5-band__raster { grid-template-columns: 1fr auto; padding-top: 64px; padding-bottom: 64px; }
  .kz5-siegel--band { justify-self: center; align-self: center; margin: 0 40px 0 0; width: 190px; height: 190px; }
  .kz5-siegel--band strong { font-size: 4rem; }
}
@media (min-width: 64em) {
  .kz5-hero__foto { position: absolute; top: 0; right: 0; width: 52%; height: 100%; object-position: 32% 40%; }
  .kz5-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--forest-deep) 0%, var(--forest-deep) 48%, rgba(7,38,29,.55) 56%, rgba(7,38,29,0) 68%); }
  .kz5-hero__raster .kz5-siegel { position: static; }
  .kz5-hero__raster { grid-template-columns: 7fr 5fr; grid-template-areas: "oben siegel" "karte siegel"; gap: 28px 40px; padding-top: 28px; padding-bottom: 56px; min-height: min(760px, calc(100vh - 110px)); align-content: space-between; }
  .kz5-hero__oben { grid-area: oben; }
  .kz5-siegel { grid-area: siegel; align-self: end; justify-self: end; margin-bottom: 40px !important; width: 210px; height: 210px; margin: 0; }
  .kz5-siegel span { font-size: 1.45rem; }
  .kz5-siegel strong { font-size: 4.4rem; }
  .kz5-karte { grid-area: karte; max-width: 680px; padding: 28px 30px 20px; }
  .kz5-karte__titel { font-size: 1.9rem; }
  .kz5-karte__inhalt { grid-template-columns: 1.15fr 1fr; gap: 24px; }
  .kz5-haken li { font-size: 1.15rem; }
  .kz5-schnell { padding: 80px 0 88px; }
  .kz5-schnell__raster { grid-template-columns: 5fr 6fr; gap: 72px; align-items: start; }
  .kz5-form { padding: 30px 30px 26px; }
  .kz5-echt__raster { grid-template-columns: 1fr 3fr; align-items: center; }
  .kz5-echt__liste { grid-template-columns: repeat(4, 1fr); }
  .kz5-fallteil { padding: 96px 0; }
  .kz5-fallteil__raster { grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; }
  .kz5-wissen__raster { grid-template-columns: 4fr 7fr; gap: 64px; }
}