/* kombi.css · SJ Automotive, der Fahrerplatz
   Kombiinstrument, Leuchten, Befund und Farbregel. Dunkel ist hier nur der
   Gegenstand; der Seitengrund bleibt weiß. */

/* ------------------------------------------------------------ Bühne */
.fahrer__buehne {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: clamp(24px, 4vw, 64px);
  padding: calc(var(--kopf-h) + 16px) var(--sc-gutter) 20px;
  max-width: calc(var(--sc-maxw) + 2 * var(--sc-gutter)); margin-inline: auto;
}
.fahrer__links { display: grid; gap: 22px; align-content: center; }
.fahrer__text { position: relative; min-height: 14rem; }
.fahrer__leistungen { font-size: 1.02rem; }
.fahrer__zeile { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; margin: 0; }
.fahrer__zeile .fliess { margin-top: 14px; }
.fahrer__cockpit { display: grid; gap: 14px; }

.kombi {
  position: relative;
  display: grid; grid-template-columns: 1fr 1.08fr 1fr; align-items: center; gap: clamp(8px, 1.5vw, 22px);
  padding: clamp(16px, 2vw, 28px);
  border-radius: 999px / 46%;
  background: radial-gradient(120% 90% at 50% 0%, #20262F 0%, var(--kombi-grund) 58%);
  color: var(--kombi-tinte);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .08), inset 0 -2px 0 hsl(0 0% 0% / .5), var(--sc-e3);
}
.uhr { width: 100%; height: auto; }
.uhr__rand { fill: #0C0F14; stroke: #2B323D; stroke-width: 2; }
.uhr__bogen { fill: none; stroke: #2E3643; stroke-width: 2; }
.uhr__strich { stroke: #6F7A8C; stroke-width: 1.6; stroke-linecap: round; }
.uhr__strich--gross { stroke: #E9EDF3; stroke-width: 2.6; }
.uhr__strich--rot { stroke: var(--rot-leuchte); }
.uhr__zahl { fill: #C9D0DB; font-family: var(--sc-font-display); font-weight: 600; font-size: 15px; text-anchor: middle; dominant-baseline: central; }
.uhr__einheit { fill: #7F8A9C; font-family: var(--sc-font-text); font-size: 10px; text-anchor: middle; letter-spacing: 0.04em; }
.uhr__nadel { transform-origin: 100px 100px; transform: rotate(calc(-135deg + var(--n, 0) * 270deg)); }
.uhr__nadel path { fill: var(--rot-leuchte); }
.uhr__nabe { fill: #2B323D; stroke: #0C0F14; stroke-width: 2; }
.kombi[data-zustand="aus"] .uhr__zahl, .kombi[data-zustand="aus"] .uhr__strich--gross { fill-opacity: .45; stroke-opacity: .45; }

.kombi__mitte { display: grid; gap: clamp(8px, 1.2vw, 16px); justify-items: center; }
.kombi__anzeige {
  margin: 0; min-width: 11ch; text-align: center;
  padding: 6px 14px; border-radius: 8px;
  background: #0A0D11; box-shadow: inset 0 0 0 1px #262D38;
  font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(0.92rem, 0.8rem + 0.4vw, 1.12rem); letter-spacing: 0.04em;
  color: var(--kombi-weich);
}
.kombi[data-zustand="bereit"] .kombi__anzeige { color: var(--gruen-leuchte); }
.kombi[data-zustand="test"] .kombi__anzeige { color: var(--kombi-tinte); }
.kombi[data-zustand="auswahl"] .kombi__anzeige { color: var(--kombi-tinte); }

.kombi__lampen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(4px, 0.6vw, 8px); width: 100%; }
.lampe {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: grid; justify-items: center; gap: 2px;
  padding: 6px 2px; border-radius: 10px; min-height: 44px;
  color: var(--kombi-aus);
  transition: background-color 160ms var(--sc-ease-out);
}
.lampe svg { width: clamp(28px, 2.6vw, 38px); height: clamp(28px, 2.6vw, 38px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lampe svg .voll { fill: currentColor; stroke: none; }
.lampe svg .strich { stroke-dasharray: 2.6 2.2; }
.lampe__name { font-size: 0.7rem; line-height: 1.1; color: var(--kombi-weich); letter-spacing: 0.02em; white-space: nowrap; }
.lampe.an.lampe--rot { color: var(--rot-leuchte); }
.lampe.an.lampe--gelb { color: var(--gelb-leuchte); }
.lampe.an .lampe__name { color: var(--kombi-tinte); }
.lampe:focus-visible { outline: 2px solid #8FB0FF; outline-offset: 1px; }
/* Ruhend, aber antippbar: etwas heller als „aus“. Nie für eine leuchtende
   Lampe, sonst frisst die Regel die Farbe der gewählten (gleiche Spezifität). */
.kombi[data-zustand="bereit"] .lampe:not(.an), .kombi[data-zustand="auswahl"] .lampe:not(.an) { color: #566074; }
@media (hover: hover) and (pointer: fine) {
  .lampe:hover { background: hsl(0 0% 100% / .06); }
  .kombi[data-zustand="bereit"] .lampe:hover .lampe__name { color: var(--kombi-tinte); }
}
.lampe[aria-pressed="true"] { background: hsl(0 0% 100% / .09); box-shadow: inset 0 0 0 1.5px hsl(0 0% 100% / .22); }

.kombi__hinweis {
  margin: 4px 0 0; text-align: center; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem); color: var(--sc-ink);
  opacity: var(--hinweis, 0); transform: translate3d(0, calc((1 - var(--hinweis, 0)) * 8px), 0);
}

.befund {
  min-height: 11.5rem;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: #FFFFFF;
  box-shadow: var(--sc-e1), inset 0 0 0 1px var(--sc-hairline);
}
/* Grundzustand: die Farbregel, die jede Leuchte liest. */
.farbregel { display: grid; gap: 0; }
.farbregel__zeile { margin: 0; display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sc-hairline); }
.farbregel__zeile:first-child { padding-top: 2px; }
.farbregel__zeile:last-child { border-bottom: 0; padding-bottom: 2px; }
.farbregel__zeile strong { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.2rem; }
.farbregel__zeile strong::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.farbregel__zeile--rot strong { color: var(--rot-schrift); }
.farbregel__zeile--rot strong::before { background: var(--rot-leuchte); }
.farbregel__zeile--gelb strong { color: var(--gelb-schrift); }
.farbregel__zeile--gelb strong::before { background: var(--gelb-leuchte); }
.farbregel__zeile--gruen strong { color: var(--gruen-schrift); }
.farbregel__zeile--gruen strong::before { background: #fff; box-shadow: inset 0 0 0 2px var(--gruen-schrift); }
.farbregel__zeile span { color: var(--sc-ink-soft); }
.befund__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 6px; }
.befund__name { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; margin: 0; }
.befund__stufe { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.befund__stufe::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.befund__stufe--rot { color: var(--rot-schrift); }
.befund__stufe--gelb { color: var(--gelb-schrift); }
.befund__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.befund__raster p { margin: 0; line-height: 1.45; }
.befund__raster strong { display: block; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 600; margin-bottom: 2px; }
.befund__tun { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.befund__tun .knopf { min-height: 46px; }
.befund__bei { margin: 0; font-weight: 600; }


@media (prefers-reduced-motion: reduce) {
  .kombi__hinweis { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .fahrer__buehne { grid-template-columns: 1fr; align-content: start; gap: 8px; padding-top: calc(var(--kopf-h) + 10px); padding-bottom: calc(var(--daumen-h) + 8px); }
  .fahrer__links { gap: 6px; }
  /* Ist eine Leuchte gewählt, gehört der Platz dem Befund: Sätze und
     Hinweis treten zurück, die Knöpfe stehen nebeneinander. */
  .fahrer.ist-gewaehlt .fahrer__links, .fahrer.ist-gewaehlt .kombi__hinweis { display: none; }
  .befund__tun { display: grid; grid-template-columns: 1fr 1fr; }
  .befund__bei { grid-column: 1 / -1; font-size: 0.9rem; }
  .befund__tun .knopf { padding: 0 10px; }
  .fahrer__text { min-height: 6.4rem; }
  .fahrer__leistungen { font-size: 0.86rem; gap: 4px 0; }
  .fahrer__leistungen span { padding-right: 8px; margin-right: 8px; }
  .fahrer__zeile .titel { font-size: 1.9rem; }
  .fahrer__zeile .fliess { margin-top: 4px; font-size: 1rem; }
  .fahrer__zeile.titel--mittel { font-size: 1.45rem; }
  .kombi { grid-template-columns: 1fr 1fr; grid-template-areas: "dz kmh" "mitte mitte"; border-radius: 28px; padding: 12px 12px 10px; gap: 6px 10px; }
  .kombi__uhr--dz { grid-area: dz; } .kombi__uhr--kmh { grid-area: kmh; } .kombi__mitte { grid-area: mitte; }
  .uhr { max-width: 150px; margin-inline: auto; }
  .kombi__anzeige { position: absolute; top: 12px; left: 50%; translate: -50% 0; min-width: 0; font-size: 0.8rem; padding: 4px 8px; }
  .lampe svg { width: 28px; height: 28px; }
  .kombi__hinweis { font-size: 1.05rem; margin: 0; }
  .befund { min-height: 0; padding: 12px 14px; }
  .befund__name { font-size: 1.3rem; }
  .befund__raster { grid-template-columns: 1fr; gap: 4px; font-size: 0.94rem; }
  .befund__raster p:first-child { display: none; }
  .befund__tun { margin-top: 8px; gap: 6px 12px; }
  .befund__tun .knopf { min-height: 44px; padding: 0 16px; font-size: 0.95rem; }
  .farbregel__zeile { grid-template-columns: 4.4rem 1fr; padding: 6px 0; font-size: 0.94rem; }
  .farbregel__zeile strong { font-size: 1.05rem; }

}

/* Kurze Telefone (etwa 375 x 667): Uhren kleiner, Sätze knapper, damit der
   Befund samt Knöpfen über der Daumenleiste endet. */
@media (max-width: 860px) and (max-height: 760px) {
  .fahrer__buehne { gap: 4px; padding-top: calc(var(--kopf-h) + 4px); }
  .fahrer__text { min-height: 4.6rem; }
  .fahrer__zeile .titel { font-size: 1.5rem; }
  .fahrer__zeile.titel--mittel { font-size: 1.2rem; }
  .fahrer__zeile .fliess { display: none; }
  .fahrer__leistungen { display: none; }
  .uhr { max-width: 108px; }
  .kombi { padding: 8px 10px 6px; gap: 2px 8px; }
  .lampe { min-height: 40px; padding: 2px; }
  .lampe svg { width: 24px; height: 24px; }
  .lampe__name { font-size: 0.64rem; }
  .kombi__hinweis { font-size: 0.95rem; }
  .befund { padding: 8px 12px; }
  .befund__raster { font-size: 0.86rem; }
  .befund__name { font-size: 1.15rem; }
  .befund__tun .knopf { min-height: 40px; }
  .befund__bei { font-size: 0.86rem; }
  .farbregel__zeile { padding: 4px 0; font-size: 0.86rem; }
}