/* KLICK-AUTO auf der Seite Fahrzeugfolierung (Matzes Wunsch 2026-10-13, Probe 3 Fassung 14, Marco 2026-10-14).
   Kunde tippt am Musterfahrzeug Flächen an, die Liste daneben hakt mit, „Damit anfragen“ füllt das Formular
   der Startseite vor (klick-auto.js?v=eda4d6c708, anfrage.js?v=c0c7330a59). Gelb der Masken = Gelb der Haken, damit Auto und Liste
   sichtbar zusammengehören. Ecken eckig und harte Linien wie der Rest der Unterseiten.
   Fensterregel (Marco): Bühne und Liste passen zusammen ins Fenster. Die Bühne wird darum über die
   Fensterhöhe begrenzt, nicht nur über die Spaltenbreite. */

.klick-auto { --ka-gelb: #ffe600; --ka-bild: 2400 / 1250; row-gap: var(--sp-4); }
.klick-auto .ka-werkbank {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-3) var(--sp-5); align-items: start;
}
.ka-werkbank .ka-liste { grid-column: 2; grid-row: 1 / span 2; }

/* FAHRZEUGWAHL vor allem anderen (Marco 2026-10-15): sie tauscht Bild, Masken und Wörter der Liste,
   darum steht sie über der Bühne und ist als vier sichtbare Knöpfe gebaut, nicht als Klappliste. */
.ka-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.ka-wahl-titel { font-weight: 600; font-size: 1.02rem; color: var(--ink-1); }
.ka-wahl-knoepfe { display: flex; }
.ka-wahl button {
  font: 600 0.95rem/1.15 var(--font-body); padding: var(--sp-2) var(--sp-3); min-height: 40px;
  border: 1px solid var(--line-2); background: none; color: var(--ink-1); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ka-wahl button + button { border-left: 0; }
.ka-wahl button:hover { background: var(--paper-1); }
.ka-wahl button[aria-pressed="true"] { background: var(--ink-1); color: var(--paper-0); border-color: var(--ink-1); }
.ka-wahl button:focus-visible { outline: 3px solid var(--ka-gelb); outline-offset: 2px; position: relative; }

/* BÜHNE: Grundbild plus je Fläche eine Maske (Gelb, halb deckend, Kante kräftiger). */
.ka-buehne {
  position: relative; background: #4a4a4b;
  width: 100%;
  /* 150 px: Überschriftzeile darüber plus Abstand, damit Überschrift, Bühne und Liste zusammen ins Fenster passen. */
  max-width: calc((100vh - var(--kopf-hoehe) - 200px) * 2400 / 1250);
  max-width: calc((100svh - var(--kopf-hoehe) - 200px) * 2400 / 1250);
}
.ka-flaeche {
  position: relative; aspect-ratio: var(--ka-bild);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.ka-lagen { position: absolute; inset: 0; visibility: hidden; }
.ka-lagen.aktiv { visibility: visible; }
.ka-lagen img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; -webkit-user-drag: none;
}
.ka-lagen .ka-m { opacity: 0; transition: opacity 0.12s; }
.ka-lagen .ka-m.hover { opacity: 0.55; }
.ka-lagen .ka-m.an { opacity: 1; }

.ka-muster {
  position: absolute; left: var(--sp-2); top: var(--sp-2); z-index: 2;
  font-size: 0.82rem; font-weight: 500; color: #e2e3e1; background: rgba(0, 0, 0, 0.42); padding: 2px var(--sp-2);
  pointer-events: none;
}
.ka-umschalter { position: absolute; right: var(--sp-2); top: var(--sp-2); z-index: 2; display: flex; }
.ka-umschalter button {
  font: 600 0.92rem/1 var(--font-body); padding: var(--sp-2) var(--sp-3); min-height: 36px;
  border: 1px solid rgba(243, 243, 241, 0.55); background: rgba(18, 18, 19, 0.72); color: #f3f3f1; cursor: pointer;
}
.ka-umschalter button + button { border-left: 0; }
.ka-umschalter button[aria-pressed="true"] { background: #f3f3f1; color: #121213; border-color: #f3f3f1; }
.ka-umschalter button:focus-visible { outline: 3px solid var(--ka-gelb); outline-offset: 2px; position: relative; }

/* KOMPLETT (Matzes Meldung #32): erste Zeile der Liste, gleicher Haken wie die Flächen, damit klar ist,
   dass sie dieselbe Auswahl schaltet. Als Zeile statt eigenem Block, damit der Abschnitt ins Fenster passt
   (auf schmalen Schirmen füllt sie das achte Feld des Rasters, das vorher die Scheiben hatten). */
.ka-zeilen .ka-komplett { font-weight: 600; white-space: normal; }   /* bricht auf schmalen Handys (bis 375 px) in zwei Zeilen um */
.ka-zeilen button[data-k="seiten"] { white-space: normal; }   /* „Seitenwand und Türen“ (Matze #33) passt am Handy nicht in eine Zeile */

/* KOMPLETT-HINWEIS (Matze 2026-10-15): Info-Knopf rechts in der Komplett-Zeile, Text als Einblendung (popover).
   Liegt über dem Abschnitt, statt darunter aufzuklappen, damit der Abschnitt mobil ins Fenster passt. */
.ka-zeilen .ka-alles { display: flex; align-items: center; gap: var(--sp-2); }
.ka-zeilen .ka-alles .ka-komplett { flex: 1 1 auto; min-width: 0; }
.ka-zeilen .ka-info {
  position: relative; flex: none; width: 26px; height: 26px; min-height: 26px; padding: 0; gap: 0; justify-content: center;
  border: 2px solid var(--ink-3); border-radius: 50%; font: 700 0.9rem/1 var(--font-body); color: var(--ink-1);
}
.ka-zeilen .ka-info::before { content: none; }
.ka-zeilen .ka-info::after { content: ""; position: absolute; inset: -9px; }   /* Trefferfläche 44 px fürs Handy */
.ka-zeilen .ka-info:hover { background: none; border-color: var(--ink-1); }
.ka-zeilen .ka-info:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 2px; }
.ka-info-text {
  width: min(34rem, calc(100% - 2 * var(--sp-4))); margin: auto; padding: var(--sp-5);
  border: 2px solid var(--ink-1); background: var(--paper-0); color: var(--ink-1);
}
.ka-info-text::backdrop { background: rgb(0 0 0 / 0.55); }
.ka-info-text h3 { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
.ka-info-text p { margin: 0 0 var(--sp-3); line-height: 1.5; }
.ka-info-zu { margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-size: 1rem; }
/* Ohne popover (Safari vor 17): kein Knopf, der Text steht schlicht unter der Liste. */
@supports not selector(:popover-open) {
  .ka-zeilen .ka-info, .ka-info-zu { display: none; }
  .ka-info-text { width: auto; margin: var(--sp-3) 0 0; padding: 0; border: 0; }
}

/* LISTE: Klartext dessen, was Matze bekommt. Echte Schaltflächen, per Tastatur bedienbar. */
.ka-zeilen { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line-1); }
.ka-zeilen li { border-top: 1px solid var(--line-1); }
.ka-zeilen button {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 36px; padding: var(--sp-2) var(--sp-1);
  font: 500 1.02rem/1.2 var(--font-body); color: var(--ink-1); text-align: left; white-space: nowrap;
  background: none; border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ka-zeilen button::before {
  content: ""; flex: none; width: 20px; height: 20px; box-sizing: border-box;
  display: grid; place-items: center; font: 700 14px/1 var(--font-body); color: #121213;
  border: 2px solid var(--ink-3);
}
/* Haken als Schriftzeichen, nicht als SVG-Datenadresse: die Bauplatz-CSP (img-src 'self') sperrt data:. */
.ka-zeilen button[aria-pressed="true"]::before { content: "✓"; border-color: var(--ka-gelb); background: var(--ka-gelb); }
.ka-zeilen button small { white-space: normal; color: var(--ink-3); font-size: 0.85rem; font-weight: 400; margin-left: auto; padding-left: var(--sp-2); text-align: right; }
.ka-zeilen button.hover, .ka-zeilen button:hover { background: var(--paper-1); }
.ka-zeilen button:focus-visible { outline: 3px solid var(--ink-1); outline-offset: -3px; }

.ka-fuss { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.ka-los { justify-content: center; padding: var(--sp-3) var(--sp-4); }
.ka-stand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

@media (max-width: 1100px) {
  .klick-auto .ka-werkbank { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .ka-buehne { max-width: none; }
  .ka-werkbank .ka-liste { grid-column: auto; grid-row: auto; }
  .ka-wahl-knoepfe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .ka-wahl { gap: var(--sp-2); }
  .ka-zeilen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
  .ka-zeilen li:nth-child(2) { border-top: 1px solid var(--line-1); }
  .ka-fuss { margin-top: var(--sp-3); }
  .ka-zeilen button { min-height: 40px; }
}
@media (max-width: 760px) {
  /* Handy: Abschnitt muss zwischen Kopf (112 px) und Leiste unten (72 px) passen. */
  /* Meldung #32: Der Scheiben-Satz in der Einleitung kostet eine Zeile, darum hier enger (Abstände, Zeilen 36 px). */
  .klick-auto { padding-block: var(--sp-6); row-gap: var(--sp-2); }
  .klick-auto .ka-werkbank { gap: var(--sp-3); }
  .klick-auto .text > p { font-size: 1rem; }
  .ka-zeilen { column-gap: var(--sp-3); }
  .ka-zeilen button { min-height: 36px; font-size: 0.95rem; gap: var(--sp-2); padding-inline: 0; }
  .ka-zeilen button small { display: none; }
  .ka-zeilen button::before { width: 18px; height: 18px; }
  .ka-umschalter button { min-height: 32px; padding: 6px 10px; font-size: 0.85rem; }
  .ka-muster { font-size: 0.75rem; }
  .ka-fuss { gap: var(--sp-2); margin-top: var(--sp-1); }
  /* Fahrzeugwahl: Überschrift nur für Vorleseprogramme, die vier Namen sprechen für sich (Fensterregel). */
  .ka-wahl-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .klick-auto .ka-werkbank { row-gap: 4px; }
  .ka-wahl button { min-height: 36px; padding: 2px 4px; font-size: 0.85rem; line-height: 1.05; }
  .ka-wahl .ka-oder { display: none; }   /* „Sportwagen / Coupé“ als zwei Zeilen ohne Schrägstrich, passt in ein Viertel */
  .ka-wahl .ka-zweit { display: block; }
  .ka-los { min-height: 44px; padding-block: 6px; }
}
@media (max-width: 400px) { .ka-wahl button { font-size: 0.78rem; padding-inline: 2px; } }
@media (prefers-reduced-motion: reduce) { .ka-lagen .ka-m { transition: none; } }
/* Fahrzeugwahl unter 480 px: zwei Reihen zu zwei Knöpfen, Namen in einer Zeile. Vorher vier schmale Knöpfe mit
   zweizeiligen Namen in 0,78 rem (Prüfung Handy 2026-10-21). */
@media (max-width: 480px) {
  .ka-wahl-knoepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ka-wahl button { font-size: 0.92rem; padding: 4px 6px; }
  .ka-wahl .ka-oder, .ka-wahl .ka-zweit { display: inline; }
  .ka-wahl button:nth-child(3) { border-left: 1px solid var(--line-2); }
  .ka-wahl button:nth-child(n + 3) { border-top: 0; }
}