/* Anfrageseiten (z. B. /anfrage/tesla-model-y-winterraeder/): Hero, Konfigurator,
   Specs, Reifentabelle, Nutzen-Text, Vertrauen. Baut auf den Tokens und
   Bausteinen von styles.css auf (lex-head, lex-body, lex-chips, tool-table,
   cards, btn). Eigene Datei, damit die geteilte styles.css unangetastet bleibt;
   wird nur auf Anfrageseiten nach styles.css geladen. Praefix af- = Anfrage.

   Das Anfrageformular selbst steht in css/formular.css (Fragment aus
   build/formulare.py) und wird davor geladen; die af-Regeln zu Eingabefeldern,
   Fussleiste, Status und Danke-Block stehen nur noch dort. */

/* --- Kopf: Titel links, Bild rechts ------------------------------------- */
.af-hero .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-12); align-items: center; }
.af-hero__bild { margin: 0; }
.af-hero__bild img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-lg);
  background: var(--surface); border: var(--hairline-w) solid var(--hairline);
}
.af-hero__bild figcaption { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--ink-soft); }
.af-preis { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.af-preis__wert { font-size: var(--fs-h2); font-weight: var(--fw-heavy); line-height: var(--lh-tight); color: var(--black); }
.af-preis__hinweis { font-size: var(--fs-meta); color: var(--ink-soft); }
.af-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.af-hero__fakten { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); padding: 0; list-style: none; }
.af-hero__fakten li {
  padding: var(--sp-1) var(--sp-3) 6px; background: var(--surface); border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius); font-size: var(--fs-meta); font-weight: var(--fw-bold); color: var(--black);
}

/* --- Abschnittskoepfe im Seitenkoerper ----------------------------------- */
.af-abschnitt + .af-abschnitt { margin-top: var(--sp-14); padding-top: var(--sp-12); border-top: var(--hairline-w) solid var(--hairline); }
.af-abschnitt__kopf { max-width: 760px; margin-bottom: var(--sp-8); }
.af-abschnitt__kopf .h2 { margin-bottom: var(--sp-3); }
.af-abschnitt__lead { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink-soft); }

/* --- Konfigurator: Fragen als pr-Bloecke (styles.css), Zusammenfassung daneben */
.af-konfig { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-10); align-items: start; }
.af-konfig fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.af-konfig legend { padding: 0; }
.af-konfig .pr-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.af-konfig .pr-tiles--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.af-konfig .pr-tile { padding: var(--sp-3) var(--sp-4); }
.af-konfig .pr-tile b { font-size: var(--fs-body); }
.af-konfig .pr-tile i { font-size: var(--fs-meta); }
.af-farbe {
  width: 100%; max-width: 340px; border: var(--control-w) solid var(--black); border-radius: 0; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); font-size: var(--fs-body); color: var(--black);
}
.af-farbe:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 3px var(--black); }

.af-summe {
  position: sticky; top: calc(var(--header-h) + var(--sp-4));
  background: var(--light); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-7) var(--sp-7);
  border-left: 5px solid var(--yellow);
}
.af-summe__tag {
  display: inline-block; margin-bottom: var(--sp-3); padding: var(--sp-1) var(--sp-2) 3px;
  background: var(--surface); border: var(--hairline-w) solid var(--hairline);
  font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-soft);
}
.af-summe__titel { font-size: var(--fs-h4); font-weight: var(--fw-heavy); line-height: var(--lh-head); color: var(--black); }
.af-summe__liste { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.af-summe__liste li { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: var(--hairline-w) solid var(--hairline); font-size: var(--fs-body); line-height: var(--lh-snug); }
.af-summe__liste li:first-child { border-top: 0; }
.af-summe__liste b { flex: none; min-width: 7.5em; font-weight: var(--fw-heavy); color: var(--black); }
.af-summe__liste span { color: var(--ink-soft); }
.af-summe__hinweis { margin-top: var(--sp-4); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--ink-soft); }
.af-summe__hinweis--warn { color: var(--black); font-weight: var(--fw-bold); border-left: 3px solid var(--amber); padding-left: var(--sp-3); }
.af-summe .btn { margin-top: var(--sp-5); }

/* --- Technische Daten ---------------------------------------------------- */
.af-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.af-specs__karte { min-width: 0; }
.af-specs__karte h3 { font-size: var(--fs-h4); font-weight: var(--fw-heavy); margin-bottom: var(--sp-2); }
.af-specs__karte .tool-table { min-width: 0; }
.af-specs__karte .tool-table th { white-space: nowrap; }
.af-specs__karte .tool-table tbody tr.is-aktiv td { background: var(--yellow); color: var(--black); }
.af-specs__basis { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-2) var(--sp-4); }
.af-specs__basis li { font-size: var(--fs-body); line-height: var(--lh-snug); color: var(--ink-soft); padding: var(--sp-2) 0; border-bottom: var(--hairline-w) solid var(--hairline); }
.af-specs__basis b { display: block; font-size: var(--fs-caption); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--black); }
.af-specs__fuss { margin-top: var(--sp-4); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--ink-soft); }
.af-specs__fuss a, .af-abschnitt__lead a { color: var(--black); font-weight: var(--fw-bold); border-bottom: 2px solid var(--yellow); }
.af-specs__fuss a:hover, .af-abschnitt__lead a:hover { border-bottom-color: var(--black); }

/* --- Reifentabelle (EU-Label): scrollt auf schmalen Viewports statt die Seite zu sprengen.
   styles.css definiert .table-scroll nur innerhalb von .prose. */
.af-abschnitt .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#reifen .tool-table { min-width: 720px; }
#reifen .tool-table td:first-child { white-space: nowrap; }

/* --- Nutzen-Text: zwei Spalten Prosa ------------------------------------ */
.af-nutzen { columns: 2; column-gap: var(--sp-12); }
.af-nutzen > * { break-inside: avoid; }
.af-nutzen h3 { font-size: var(--fs-h4); font-weight: var(--fw-heavy); margin-bottom: var(--sp-2); }
.af-nutzen p { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink-soft); margin-bottom: var(--sp-6); }
.af-nutzen a { color: var(--black); font-weight: var(--fw-bold); border-bottom: 2px solid var(--yellow); }
.af-nutzen a:hover { border-bottom-color: var(--black); }

/* --- Vertrauen: drei Karten ---------------------------------------------- */
.af-vertrauen .card { border: var(--hairline-w) solid var(--hairline); }
.af-vertrauen .card:hover { transform: none; box-shadow: none; }
.af-vertrauen .card__icon { display: block; width: 48px; height: 48px; padding: var(--sp-2); margin: var(--sp-6) var(--sp-7) 0; background: var(--yellow); border-radius: var(--radius); }

/* --- Schmale Viewports --------------------------------------------------- */
@media (max-width: 960px) {
  .af-hero .container, .af-konfig, .af-specs { grid-template-columns: 1fr; }
  .af-konfig .pr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af-summe { position: static; }
  .af-nutzen { columns: 1; }
}
@media (max-width: 720px) {
  .af-konfig .pr-tiles, .af-konfig .pr-tiles--zwei { grid-template-columns: 1fr; }
  .af-hero__bild { order: -1; }
}