/* =====================================================================
   Seiteneigene Stildatei der Seite „Kfz-Aktion 2027 mit der AXA“.
   Aufbau wie assets/css/kfz-aktion.css der Dialog-Seite (Vorlage), dazu
   Abschnitt 0 mit den blauen Farben. Gemeinsame Dateien werden hier nicht
   geändert.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Blau statt Orange (Daniel, 01.10.2026: „nur mit einem anderen
   Versicherer und in blau statt orange“; Blauton am 01.10.2026 bestätigt:
   das AXA-Blau aus dem Logo, #00008F).
   Das ist eine bewusste Abweichung vom Markenbild von format plus und gilt
   nur für diese Seite. Die Farben der Marke stehen in
   gemeinsam/marken/formatplus/assets/css/marke.css (:root) und bleiben dort
   unverändert; hier werden sie für alles innerhalb von body neu gesetzt.
   Unverändert bleiben: WhatsApp-Grün (--wa …), Sterne (--star), der helle
   Seitengrund und die Schriften.
   --------------------------------------------------------------------- */
body {
  --accent: #00008f;
  --accent-text: #00008f;
  --accent-on-dark: #aab2ff;
  --btn: #00008f;
  --btn-hover: #2222b3;
  --btn-ink: #ffffff;
  --link: #00008f;
  --eyebrow: #00008f;
  --tint: #eef0fb;
  --tint-2: #d9ddf5;
  --block-bg: #e8ebfa;
  --block-line: #b8bfe9;
  --block-accent: #00008f;
  --feature-bg: linear-gradient(135deg, #d9ddf5, #eef0fb);
  --feature-check: #00008f;
  --result-bg: #00008f;
  --result-ink: #ffffff;
}

/* Das Markenzeichen „digital“ bleibt orange, auch auf der blauen Seite. */
.logo-dig { color: #ec8a2b; }

/* Ablauf als hellblaues Band, damit zwischen Leistungen (creme) und
   Über mich (weiß) keine zwei gleichen Flächen aufeinandertreffen. */
.ablauf-sec {
  background: var(--tint);
  border-block: 1px solid var(--tint-2);
}

/* ---------------------------------------------------------------------
   0a. Einleitung in Daniels Worten, ganz oben im Aufmacher (Daniel,
   01.10.2026: „ganz oben als gut sichtbare Einleitung“). Weiße Karte mit
   blauer Kante, dunkle Schrift statt der grauen Einleitung der Vorlage.
   Am Handy steht sie direkt unter der Überschrift, am Computer rechts
   daneben.
   --------------------------------------------------------------------- */
.einleitung {
  display: grid;
  gap: 12px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--tint-2);
  border-left: 5px solid var(--accent);
  border-radius: var(--r);
  padding: 20px 20px 22px;
  box-shadow: 0 2px 6px rgba(20, 23, 29, .05), 0 14px 34px rgba(0, 0, 143, .09);
}

.einleitung p {
  margin: 0;
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.einleitung .hinweis {
  font-size: .93rem;
  color: var(--muted);
  padding-left: 12px;
  border-left: 2px solid var(--tint-2);
}

.einleitung .eilt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--tint);
  border-radius: 12px;
  padding: 12px 14px;
}

.einleitung .eilt svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

.einleitung .eilt span { min-width: 0; }
.einleitung .actions { margin-top: 4px; }

/* Am Computer steht die Überschrift mittig neben der Einleitung, und die
   Karte bekommt etwas mehr Breite. Die Vorlage richtet unten aus; mit der
   hohen Karte entstünde links über der Überschrift eine leere Fläche. */
@media (min-width: 900px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: center;
  }
}

/* ---------------------------------------------------------------------
   1. Leistungs-Bausteine als Aufklapper. Der Kopf des Bausteins ist die
   Schaltfläche, das Plus rechts dreht sich beim Öffnen zum Kreuz.
   --------------------------------------------------------------------- */
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;
}

/* ---------------------------------------------------------------------
   2. Unterlagen zum Download als Aufklapper (wird gebraucht, sobald die
   Bedingungen des Tarifs mobil komfort da sind). Bei 320 px brechen die
   langen Titel um.
   --------------------------------------------------------------------- */
.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;
}

.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; }

/* ---------------------------------------------------------------------
   3. Abschnitt „Der Versicherer“ mit dem AXA-Logo. Die Logodatei ist das
   blaue Quadrat ohne Rand (480 x 480).
   --------------------------------------------------------------------- */
.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: 104px;
  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; }

/* ---------------------------------------------------------------------
   4. Bildband im Aufmacher. Die Datei ist schon auf 1280 x 480 zugeschnitten
   (Quelle 2010 x 782, Ausschnitt ab y=12, Höhe 754).
   --------------------------------------------------------------------- */
.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;
}

/* ---------------------------------------------------------------------
   5. Kleines AXA-Logo über der Abfrage, damit sichtbar ist, zu welchem
   Versicherer umgestellt wird.
   --------------------------------------------------------------------- */
.abfrage-marke {
  display: flex;
  align-items: center;
  gap: 12px;
  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: 46px;
  height: auto;
}

/* ---------------------------------------------------------------------
   6. Pluspunkte im Aufmacher (vier Vorteile der Aktion mit Haken).
   --------------------------------------------------------------------- */
.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(2, minmax(0, 1fr)); gap: 14px 0; }
  .pluspunkte li:nth-child(2n) { border-left: 1px solid var(--line); }
}

@media (min-width: 1200px) {
  .pluspunkte { grid-template-columns: repeat(4, minmax(0, 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);
}

/* ---------------------------------------------------------------------
   7. Abfrage zweispaltig: am Computer Text links, Formular rechts; am Handy
   untereinander. Der Titel im Formular entfällt, die Überschrift des
   Abschnitts steht 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; }