/* =====================================================================
   Seiteneigene Feinheiten der Seite „Kfz-Aktion 2027“.
   Gemeinsame Dateien werden hier nicht geändert.
   Geprüft am 01.10.2026 bei 320, 360, 390, 768, 1024 und 1280 px.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Download-Bereich bei sehr schmalen Handys (320 px, große Schrift).
   Raster-Elemente werden von sich aus nicht schmaler als ihr längstes
   Wort, und „Versicherungsbedingungen“ ist lang.
   --------------------------------------------------------------------- */
.docs,
.docs-head,
.docs-list,
.docs-list a,
.docs-list a > span {
  min-width: 0;
}

.docs-head h3,
.docs-head p,
.docs-list strong,
.docs-list small {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   2. Leistungs-Bausteine als Aufklapper (Daniel, 01.10.2026: mehr
   Aufklapper). Der Kopf des Bausteins ist die Schaltfläche, das Plus
   rechts dreht sich beim Öffnen zum Kreuz, wie bei den kleinen
   Aufklappern in basis.css.
   --------------------------------------------------------------------- */
details.baustein > summary.bs-head {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 56px;
}

details.baustein > summary.bs-head::-webkit-details-marker { display: none; }

details.baustein > summary.bs-head::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font: 800 1.6rem/1 var(--font-head);
  color: var(--block-accent);
  transition: transform .2s;
}

details.baustein[open] > summary.bs-head::after {
  transform: translateY(-50%) rotate(45deg);
}

details.baustein > summary.bs-head:focus-visible {
  outline: 2px solid var(--block-accent);
  outline-offset: -3px;
}

/* ---------------------------------------------------------------------
   3. Unterlagen zum Download als Aufklapper.
   --------------------------------------------------------------------- */
.docs-auf > summary.docs-head {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 44px;
  display: grid;
  gap: 6px;
}

.docs-auf > summary.docs-head::-webkit-details-marker { display: none; }

.docs-auf > summary.docs-head::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font: 800 1.6rem/1 var(--font-head);
  color: var(--link);
  transition: transform .2s;
}

.docs-auf[open] > summary.docs-head::after {
  transform: translateY(-50%) rotate(45deg);
}

.docs-auf > summary.docs-head:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
}

.docs-auf .docs-list { margin-top: 14px; }

/* ---------------------------------------------------------------------
   4. Einheit hinter einer Kennzahl im Hero („15 Mio. €“).
   --------------------------------------------------------------------- */
.score strong .einheit {
  font-style: normal;
  font-size: .42em;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--muted);
}

/* ---------------------------------------------------------------------
   5. Abschnitt „Der Versicherer“ mit dem Dialog-Logo.
   Die Logodatei ist freigestellt (transparent) und hat rundum etwa 12 %
   Rand, der Schriftzug selbst ist also schmaler als die Datei.
   Breite 198 px ergibt einen Schriftzug von rund 150 px.
   --------------------------------------------------------------------- */
.partner {
  display: grid;
  gap: 18px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
}

@media (min-width: 760px) {
  .partner { grid-template-columns: auto 1fr; gap: 34px; padding: 26px 30px; }
}

.partner-logo img {
  display: block;
  width: 198px;
  max-width: 100%;
  height: auto;
}

.partner-text { display: grid; gap: 10px; min-width: 0; }
.partner-text h2 { font-size: 1.5rem; line-height: 1.15; }
.partner-text p { color: var(--ink); font-size: .97rem; line-height: 1.55; }

/* ---------------------------------------------------------------------
   6. Bildband im Aufmacher. Die Datei ist schon auf 1280 x 480 zugeschnitten
   (Quelle 1280 x 960, Ausschnitt ab y=120), deshalb passt das Seitenverhältnis
   genau und es wird nichts weiter beschnitten. Auf allen Breiten gleich, damit
   die Abfrage darunter nicht nach unten rutscht.
   --------------------------------------------------------------------- */
.hero-bild {
  grid-column: 1 / -1;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(20, 23, 29, .06), 0 14px 34px rgba(20, 23, 29, .10);
}

.hero-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 480;
  object-fit: cover;
  object-position: center center;
}

/* ---------------------------------------------------------------------
   7. Kleines Dialog-Logo über der Abfrage, damit sichtbar ist, zu welchem
   Versicherer umgestellt wird (Daniel, 01.10.2026).
   --------------------------------------------------------------------- */
.abfrage-marke {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
}

.abfrage-marke span {
  font: 700 .72rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}

.abfrage-marke img {
  display: block;
  width: 118px;
  height: auto;
  margin-inline-start: -8px;
}

/* ---------------------------------------------------------------------
   8. Pluspunkte im Aufmacher statt der Kennzahlen (Daniel, 01.10.2026:
   „die sind uninteressant die Punkte“). Inhalt sind die Vorteile der
   Aktion, nicht Zahlen aus der Leistungsübersicht.
   --------------------------------------------------------------------- */
.pluspunkte {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 18px 4px;
  display: grid;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

@media (min-width: 760px) {
  .pluspunkte { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .pluspunkte li + li { border-left: 1px solid var(--line); }
}

.pluspunkte li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  min-width: 0;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dark);
  overflow-wrap: anywhere;
}

.pluspunkte svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent-text);
}

/* ---------------------------------------------------------------------
   9. Namensschild im Bild. Mit zwei Zeilen unter dem Namen
   (Versicherungsmakler, Inhaber) war der Abstand ungleich: 1 px zwischen
   Name und erster Zeile, 3 px zwischen den beiden Zeilen. Jetzt trennt ein
   fester Abstand den Namen ab, die beiden Zeilen darunter laufen im
   gleichen Zeilenabstand.
   --------------------------------------------------------------------- */
.me-photo .tag { gap: 0; }
.me-photo .tag strong { margin-bottom: 4px; }
.me-photo .tag span { line-height: 1.4; }

/* ---------------------------------------------------------------------
   10. Abfrage zweispaltig (Daniel, 01.10.2026: „das müsste man formatieren,
   ggfls nebeneinander?“). Vorher stand die Einleitung über die volle Breite
   und das Formular darunter schmal und eingerückt, dazu stand „Kfz-Aktion
   2027“ zweimal da. Jetzt am Computer Text links, Formular rechts; am Handy
   wie bisher untereinander. Der Titel im Formular entfällt, die Überschrift
   des Abschnitts steht ja direkt daneben; die Schrittanzeige bleibt.
   --------------------------------------------------------------------- */
.abfrage-grid { display: grid; gap: 26px; }

@media (min-width: 1000px) {
  .abfrage-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: start;
  }
  .abfrage-text { position: sticky; top: 88px; }
}

.abfrage-text { min-width: 0; display: grid; gap: 18px; align-content: start; }
.abfrage-text .head { margin: 0; }

/* Das Formular füllt seine Spalte, statt eigenständig zentriert zu stehen. */
#anfrage .vorgang { padding-block: 0; min-width: 0; }
#anfrage .vorgang .vg-wrap { max-width: none; width: 100%; padding-inline: 0; }
#anfrage .vorgang .vg-titel { display: none; }
.abfrage-text .free { text-align: left; margin: 0; }