/* N1P Konfigurator-Abo – Widget im Stil der N1P-Hauptseite (Stufen-Umschalter, Rundinstrumente, Preis-Pille, Wertetabelle).
   Grundfarben kommen aus dem Mandanten (Widget-Klasse, :root): --p primär, --pt Text auf primär, --t Text, --h Hintergrund,
   --f Fläche, --r Radius, --s Schriftgröße, --b Breite. Alles andere wird davon abgeleitet, damit helle und dunkle
   Farbsätze gleich gut funktionieren. Kontraste: --t2/--t3 ≥ 4,5:1 auf --h und --f, Feldrand ≥ 3:1. */
:root {
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", Roboto, Arial, sans-serif;
  --t2: color-mix(in srgb, var(--t) 80%, var(--h));
  --t3: color-mix(in srgb, var(--t) 66%, var(--h));
  --pa: color-mix(in srgb, var(--p) 78%, var(--t));           /* Primärfarbe als Schrift; die Widget-Klasse setzt einen geprüften Wert (≥ 4,5:1) */
  --linie: color-mix(in srgb, var(--t) 12%, transparent);
  --linie-stark: color-mix(in srgb, var(--t) 22%, transparent);
  --feldrand: color-mix(in srgb, var(--t) 55%, var(--h));
  --bahn: color-mix(in srgb, var(--t) 13%, var(--h));
  --f2: color-mix(in srgb, var(--f) 90%, var(--t));
  --glanz: color-mix(in srgb, var(--p) 55%, transparent);
  --hauch: color-mix(in srgb, var(--p) 10%, transparent);
  --schatten: 0 24px 48px -28px rgba(0, 0, 0, .8);
  --r-karte: calc(var(--r) * 1.5);
  --r-innen: max(0px, calc(var(--r) - 4px));
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dauer: .35s;
}
:root[data-ton="hell"] {
  --glanz: color-mix(in srgb, var(--p) 35%, transparent);
  --hauch: color-mix(in srgb, var(--p) 6%, transparent);
  --schatten: 0 18px 40px -30px rgba(0, 0, 0, .35);
  --f2: color-mix(in srgb, var(--f) 70%, var(--h));
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--h); color: var(--t); font: 400 var(--s)/1.5 var(--schrift); -webkit-text-size-adjust: 100%; }
h1, h2, h3, p { margin: 0; }
button, select { font: inherit; color: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--pa); outline-offset: 3px; }

.k { max-width: var(--b); margin: 0 auto; padding: 16px; display: grid; gap: 14px; }

/* Kopf: Logo und Firmenname des Mandanten */
.kopf { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.logo { display: block; max-height: 48px; max-width: min(200px, 45%); height: auto; }
.kopf__text { min-width: 0; }
.kopf h1 { font-size: 1.25em; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.kopf__titel { margin-top: 2px; font-size: .72em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }

/* Karten */
.karte {
  padding: 18px; border-radius: var(--r-karte); border: 1px solid var(--linie);
  background: linear-gradient(180deg, var(--f2), var(--f)); box-shadow: var(--schatten);
}
.abschnitt-titel { margin-bottom: 14px; font-size: .75em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }

/* Auswahl in vier Schritten */
.felder { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 12px; grid-template-columns: minmax(0, 1fr); }
.feld { display: grid; gap: 8px; min-width: 0; }
.feld label { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: .92em; }
.nr {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--linie-stark); font-size: .78rem; font-weight: 800; color: var(--t2); font-variant-numeric: tabular-nums;
  transition: background-color var(--dauer), border-color var(--dauer), color var(--dauer), box-shadow var(--dauer);
}
.feld.ist-aktiv .nr { border-color: var(--p); color: var(--pa); box-shadow: 0 0 0 4px var(--hauch); }
.feld.ist-erledigt .nr { background: var(--p); border-color: var(--p); color: var(--pt); }
.auswahlfeld { position: relative; display: block; }
.auswahlfeld::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px; pointer-events: none;
  border-right: 2px solid var(--t2); border-bottom: 2px solid var(--t2); transform: rotate(45deg);
}
select {
  appearance: none; -webkit-appearance: none; display: block; width: 100%; min-height: 48px; padding: 10px 44px 10px 14px;
  font-weight: 500; color: var(--t); background: var(--h); border: 1px solid var(--feldrand); border-radius: var(--r);
  cursor: pointer; text-overflow: ellipsis; transition: border-color var(--dauer);
}
select option { background: var(--h); color: var(--t); }
select:hover:not(:disabled) { border-color: var(--t2); }
select:focus-visible { outline: 2px solid var(--pa); outline-offset: 2px; border-color: var(--p); }
select:disabled { cursor: not-allowed; color: var(--t3); border-style: dashed; background: transparent; }
.feld:has(select:disabled) .auswahlfeld::after { border-color: var(--t3); }
select[aria-busy="true"] { color: var(--t2); }

/* Meldungen (Laden, Fehler) */
.hinweisleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hinweisleiste:has(.meldung:empty):has(.erneut[hidden]) { display: none; }
.meldung:empty { display: none; }
.meldung { font-size: .92em; color: var(--t2); }
.meldung.ist-fehler {
  flex: 1 1 260px; padding: 10px 14px; border-radius: var(--r); color: var(--t);
  background: var(--hauch); border: 1px solid var(--p);
}
.erneut {
  min-height: 44px; padding: 0 18px; border-radius: var(--r); cursor: pointer; font-weight: 700;
  background: transparent; border: 1px solid var(--feldrand);
}
.erneut:hover { border-color: var(--t2); }

/* Leerzustand */
.leer { display: grid; justify-items: center; gap: 6px; padding: 26px 18px; text-align: center; color: var(--t2); font-size: .92em; }
.leer__bild { width: 52px; height: 52px; fill: none; stroke: var(--t3); stroke-width: 2; stroke-linecap: round; margin-bottom: 4px; }
.leer__bild circle { fill: var(--t3); stroke: none; }
.leer__titel { color: var(--t); font-weight: 700; font-size: 1.08em; }
.leer p:last-child { max-width: 38ch; }

/* Ergebnis */
.ergebnis { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.ergebnis.ist-neu { animation: ein .5s var(--ease-out) both; }
@keyframes ein { from { transform: translateY(10px); } }
.ergebnis[aria-busy="true"] .ergebnis__haupt, .ergebnis[aria-busy="true"] .werte { opacity: .45; transition: opacity .2s; }
.ergebnis__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ergebnis__fahrzeug { flex-basis: 100%; font-size: .75em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.ergebnis__fahrzeug:empty { display: none; }
.ergebnis__titel { font-size: clamp(1.25em, 4vw, 1.6em); font-weight: 800; font-style: italic; line-height: 1.15; letter-spacing: -.015em; overflow-wrap: anywhere; }
.ergebnis__titel:focus { outline: none; }
.chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: .78em; font-weight: 700; letter-spacing: .04em; color: var(--t2); background: var(--h); border: 1px solid var(--linie-stark);
}
.chip:empty { display: none; }
.ergebnis__haupt { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.steuerung { display: grid; gap: 12px; min-width: 0; }

/* Stufen-Umschalter (Radiogruppe) */
.stufen {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 4px; border-radius: var(--r); background: var(--h); border: 1px solid var(--linie-stark);
}
.stufen__marker {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: var(--r-innen);
  background: var(--p); box-shadow: 0 8px 22px -8px var(--glanz); transition: transform .5s var(--ease-out);
}
.stufen[data-index="1"] .stufen__marker { transform: translateX(100%); }
.stufen[data-index="2"] .stufen__marker { transform: translateX(200%); }
.stufe {
  position: relative; z-index: 1; min-height: 52px; padding: 4px 2px; display: grid; place-content: center; gap: 1px;
  border: 0; border-radius: var(--r-innen); background: none; cursor: pointer; line-height: 1.2;
  font-weight: 700; font-size: .95em; color: var(--t2); transition: color var(--dauer);
}
.stufe:hover:not([aria-disabled="true"]):not([aria-checked="true"]) { color: var(--t); }
.stufe[aria-checked="true"] { color: var(--pt); }
.stufe:focus-visible { outline: 2px solid var(--t); outline-offset: -4px; }
.stufe[aria-checked="true"]:focus-visible { outline-color: var(--pt); }
.stufe__na { display: none; font-size: .68em; font-weight: 600; }
.stufe[aria-disabled="true"] { cursor: not-allowed; color: var(--t3); }
.stufe[aria-disabled="true"] .stufe__name { text-decoration: line-through; text-decoration-color: var(--linie-stark); }
.stufe[aria-disabled="true"] .stufe__na { display: block; }
.stufen__info { font-size: .85em; color: var(--t3); }
.stufen__info:empty { display: none; }

/* Preis-Pille und Anfrage */
.aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.preis {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--h);
  font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3;
}
.preis::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t3); }
.preis.preis--fest::before { background: var(--p); box-shadow: 0 0 0 3px var(--hauch); }
.preis.preis--serie { font-weight: 600; color: var(--t2); }
.preis:empty { display: none; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: var(--r); border: 1px solid var(--p); background: var(--p); color: var(--pt); font-weight: 700; text-decoration: none;
  line-height: 1.25; text-align: center; cursor: pointer;
  box-shadow: 0 10px 24px -12px var(--glanz); transition: transform var(--dauer) var(--ease-out), filter var(--dauer), background-color var(--dauer);
}
.knopf svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dauer) var(--ease-out); }
.knopf:hover { filter: brightness(1.08); }
.knopf--anfrage:hover svg { transform: translateX(3px); }
.knopf:active { transform: scale(.98); }
.knopf:focus-visible { outline: 2px solid var(--t); outline-offset: 3px; }

/* Kontaktleiste (WhatsApp, Anrufen, E-Mail, Anfragen): der erste sichtbare Knopf in der Akzentfarbe, weitere als Umriss
   auf dem Hintergrund (--pa ist auf --h geprüft ≥ 4,5:1). Ein einzelner Knopf steht wie bisher neben der Preis-Pille. */
.kontaktleiste { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
.kontaktleiste:not(:has(.knopf:not([hidden]))) { display: none; }
.kontaktleiste:has(.knopf:not([hidden]) ~ .knopf:not([hidden])) { flex: 1 1 100%; }
.kontaktleiste .knopf { flex: 1 1 auto; padding: 0 18px; gap: 8px; }
.kontaktleiste .knopf:not([hidden]) ~ .knopf { background: var(--h); color: var(--pa); border-color: var(--pa); box-shadow: none; }
.kontaktleiste .knopf:not([hidden]) ~ .knopf:hover { filter: none; background: var(--hauch); }

/* Rundinstrumente */
.anzeigen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.anzeige {
  position: relative; container-type: inline-size; min-width: 0; text-align: center; padding: 12px 8px 14px;
  border-radius: var(--r); border: 1px solid var(--linie);
  background: radial-gradient(80% 70% at 50% 45%, var(--hauch), transparent 70%), var(--h);
}
.anzeige__skala { display: block; width: 100%; height: auto; overflow: visible; }
.anzeige__bahn { fill: none; stroke: var(--bahn); stroke-width: 6; stroke-linecap: round; }
.anzeige__wert { fill: none; stroke: var(--p); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--glanz)); }
.anzeige--nm .anzeige__wert { stroke: var(--t); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--t) 30%, transparent)); }
.anzeige__ticks line { stroke: var(--t3); stroke-width: 1.2; }
.anzeige__ticks line.gross { stroke: var(--t2); stroke-width: 2; }
.anzeige__serie { stroke: var(--t3); stroke-width: 2.5; stroke-linecap: round; opacity: 0; transition: opacity var(--dauer); }
.anzeige.zeigt-serie .anzeige__serie { opacity: .95; }
.anzeige__nadel path { fill: var(--p); }
.anzeige--nm .anzeige__nadel path { fill: var(--t); }
.anzeige__nadel circle { fill: var(--f); stroke: var(--t2); stroke-width: 1.5; }
.anzeige__text {
  /* SVG 200×150 füllt die Inhaltsbreite (100cqi): die Zahl steht in der Öffnung unter dem Nadelzentrum (y 92 ≙ 46cqi) */
  position: absolute; left: 0; right: 0; top: calc(12px + 51cqi);
  display: flex; justify-content: center; align-items: baseline; gap: 4px; pointer-events: none;
}
.anzeige__zahl { font-size: clamp(1.2rem, 17cqi, 3rem); font-weight: 800; font-style: italic; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.anzeige__einheit { font-size: clamp(.72rem, 7cqi, 1rem); font-weight: 700; color: var(--t2); }
.anzeige__label { margin-top: 2px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.anzeige__delta { margin-top: 4px; min-height: 1.5em; font-size: clamp(.78rem, 7cqi, .95rem); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pa); }
.anzeige--nm .anzeige__delta { color: var(--t); }
.anzeige__delta.ist-serie { color: var(--t3); font-weight: 600; }

/* Motor ohne Stufenwerte */
.auf-anfrage { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r); background: var(--h); border: 1px solid var(--linie-stark); color: var(--t2); }
.auf-anfrage__titel { color: var(--t); font-weight: 800; }
.ist-ohne-stufen .stufen, .ist-ohne-stufen .stufen__info, .ist-ohne-stufen .aktion, .ist-ohne-stufen .werte { display: none; }

/* Ohne Stufenwerte, aber mit gewählten Zusatzwünschen: Anfrage-Knopf zeigen (ohne Preis-Pille) */
.ist-ohne-stufen .preis { display: none; }
.ist-ohne-stufen.hat-optionswahl .aktion { display: flex; }

/* Zusatzwünsche der Werkstatt (Vorbild Hauptseite): natives <details>, standardmäßig zu; Kacheln mit echter Checkbox */
.ergebnis[aria-busy="true"] .optionen { opacity: .45; transition: opacity .2s; }
.optionen { border-radius: var(--r); background: var(--h); border: 1px solid var(--linie-stark); min-width: 0; }
.optionen__kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px; align-items: center;
  min-height: 64px; padding: 14px 14px 14px 16px; border-radius: var(--r); cursor: pointer; list-style: none;
}
.optionen__kopf::-webkit-details-marker { display: none; }
.optionen__kopf::marker { content: ""; }
.optionen__kopf > * { grid-column: 1; min-width: 0; }
.optionen__kopf > .optionen__zeichen { grid-column: 2; grid-row: 1 / span 3; }
.optionen__kopf:focus-visible { outline: 2px solid var(--pa); outline-offset: -2px; }
.optionen__titel { font-size: 1em; font-weight: 800; font-style: italic; line-height: 1.3; transition: color var(--dauer); }
.optionen__vorschau { color: var(--t2); font-size: .9em; line-height: 1.4; overflow-wrap: anywhere; }
.optionen__auswahl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
.optionen__abzeichen {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px;
  background: var(--p); color: var(--pt); font-size: .8em; font-weight: 800; white-space: nowrap;
}
.optionen__summe { font-size: .88em; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.optionen__zeichen {
  position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--feldrand); color: var(--t2);
  transition: transform var(--dauer) var(--ease-out), border-color var(--dauer), color var(--dauer);
}
.optionen__zeichen::before, .optionen__zeichen::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: currentColor;
}
.optionen__zeichen::after { transform: rotate(90deg); }
.optionen__klapp[open] > .optionen__kopf { border-bottom: 1px solid var(--linie); border-radius: var(--r) var(--r) 0 0; }
.optionen__klapp[open] .optionen__zeichen { transform: rotate(135deg); border-color: var(--pa); color: var(--pa); }
@media (hover: hover) and (pointer: fine) {
  .optionen__kopf:hover .optionen__titel { color: var(--pa); }
  .optionen__kopf:hover .optionen__zeichen { border-color: var(--pa); }
  .kachel__wahl:hover .kachel__name { color: var(--pa); }
}
.optionen__inhalt { display: grid; gap: 16px; padding: 14px 12px; }
.optionen__text { color: var(--t2); font-size: .9em; }
.optionen__gruppen { display: grid; gap: 18px; min-width: 0; }
.optionen__gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.optionen__gruppentitel { padding: 0; margin-bottom: 10px; font-size: .75em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.optionen__raster { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.kachel { min-width: 0; border-radius: var(--r); background: var(--f); border: 1px solid var(--linie-stark); transition: border-color var(--dauer), box-shadow var(--dauer); }
.kachel.ist-gewaehlt { border-color: var(--pa); box-shadow: 0 0 0 1px var(--pa); }
.kachel__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.kachel__wahl {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 56px;
  padding: 10px 10px 10px 14px; border-radius: var(--r) 0 0 var(--r); cursor: pointer;
}
.kachel.ohne-info .kachel__wahl { border-radius: var(--r); }
.kachel__box {
  appearance: none; -webkit-appearance: none; display: grid; place-content: center; flex: none; width: 22px; height: 22px; margin: 0;
  border: 2px solid var(--feldrand); border-radius: max(4px, calc(var(--r) / 3)); background: var(--h); cursor: pointer;
  transition: background-color var(--dauer), border-color var(--dauer);
}
.kachel__box::before {
  content: ""; width: 6px; height: 11px; margin-top: -3px; border-right: 2.5px solid var(--pt); border-bottom: 2.5px solid var(--pt);
  transform: rotate(45deg) scale(0); transition: transform .15s var(--ease-out);
}
.kachel__box:checked { background: var(--p); border-color: var(--pa); }
.kachel__box:checked::before { transform: rotate(45deg) scale(1); }
.kachel__box:focus-visible { outline: 2px solid var(--pa); outline-offset: 2px; }
.kachel__text { display: grid; gap: 2px; min-width: 0; }
.kachel__name { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; transition: color var(--dauer); }
.kachel__preis { font-size: .88em; font-weight: 600; line-height: 1.3; color: var(--t2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kachel__info {
  display: grid; place-items: center; width: 48px; min-height: 48px; padding: 0; background: none; border: 0;
  border-left: 1px solid var(--linie); border-radius: 0 var(--r) var(--r) 0; color: var(--t2); cursor: pointer;
}
.kachel__info svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.kachel__info:hover, .kachel__info[aria-expanded="true"] { color: var(--t); background: var(--hauch); }
.kachel__info:focus-visible { outline: 2px solid var(--pa); outline-offset: -3px; }
.kachel__details { padding: 12px 14px 14px; border-top: 1px solid var(--linie); color: var(--t2); font-size: .9em; white-space: pre-line; overflow-wrap: anywhere; }

/* Wertetabelle aller Stufen (auch ohne Animation und für Bildschirmleser) */
.werte { padding: 14px 12px 6px; border-radius: var(--r); background: var(--h); border: 1px solid var(--linie); }
.werte table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.werte caption { text-align: left; padding: 0 4px 10px; font-size: .85em; color: var(--t2); }
.werte th, .werte td { padding: 10px 6px; text-align: left; vertical-align: middle; border-top: 1px solid var(--linie); }
.werte thead th { border-top: 0; font-size: .72em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.werte tbody th { font-weight: 700; white-space: nowrap; }
.werte tr.ist-aktiv th { color: var(--pa); }
.werte .wert { display: block; font-weight: 700; white-space: nowrap; }
.werte .na { color: var(--t3); font-size: .88em; }
.werte .preis-zelle { font-weight: 600; color: var(--t2); }
.werte tr.ist-aktiv .preis-zelle { color: var(--t); }
.balken { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--bahn); overflow: hidden; }
.balken span { display: block; height: 100%; background: var(--t3); transform: scaleX(var(--anteil, 0)); transform-origin: left; transition: transform .6s var(--ease-out), background-color var(--dauer); }
.werte tr.ist-aktiv .balken span { background: var(--p); }

.fuss { font-size: .8em; color: var(--t3); }
.fuss--melden { margin-top: 4px; }
.fuss a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fuss a:focus-visible { outline: 2px solid var(--pa); outline-offset: 2px; border-radius: 2px; }
/* Schlichte Kontaktzeile (ohne vorausgefüllten Text): Telefon, WhatsApp, E-Mail; Tippflächen ≥ 44 px hoch */
.fuss--kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: 4px; }
.fuss--kontakt a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px; color: var(--t2); overflow-wrap: anywhere; }
.fuss--kontakt svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .fuss--kontakt a:hover { color: var(--pa); } }

/* Breiter: Felder nebeneinander, Steuerung links und Rundinstrumente rechts */
@media (min-width: 360px) {
  /* Klasse und Marke nebeneinander; Modell und Motor (lange Bezeichnungen) über die volle Breite */
  .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feld[data-schritt="modell"], .feld[data-schritt="motor"] { grid-column: 1 / -1; }
}
@media (min-width: 720px) {
  .k { padding: 20px; gap: 16px; }
  .karte { padding: 22px; }
  .felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); }
  .feld[data-schritt="modell"], .feld[data-schritt="motor"] { grid-column: auto; }
  .ergebnis__haupt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 22px; }
  .werte { padding: 16px 16px 8px; }
}

/* Schmal: Tabelle als Zeilenkarten, Werte nebeneinander, Preis darunter */
@media (max-width: 559px) {
  .k { padding: 12px; }
  .karte { padding: 16px; }
  .anzeigen { gap: 8px; }
  .anzeige { padding: 10px 4px 12px; }
  .anzeige__text { top: calc(10px + 51cqi); }
  .werte { padding: 12px 12px 4px; }
  .werte caption { display: block; }
  .werte thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .werte table, .werte tbody { display: block; }
  .werte tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 2px; border-top: 1px solid var(--linie); }
  .werte th, .werte td { display: block; padding: 0; border: 0; }
  .werte tbody th, .werte .preis-zelle, .werte td.na-zeile { grid-column: 1 / -1; }
  .werte td[data-label]::before { content: attr(data-label); display: block; font-size: .7em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
  .aktion .kontaktleiste { flex: 1 1 100%; }
  .kontaktleiste .knopf { flex: 1 1 140px; padding: 0 14px; }
}

/* Rückfall für Browser ohne color-mix (z. B. Safari < 16.2): einfache Ableitungen aus den Mandantenfarben.
   --pa setzt die Widget-Klasse ohnehin als geprüften Hex-Wert. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --t2: var(--t); --t3: var(--t); --f2: var(--f); --bahn: var(--f);
    --linie: rgba(128, 128, 128, .25); --linie-stark: rgba(128, 128, 128, .45); --feldrand: #8a8a8a;
    --glanz: transparent; --hauch: transparent;
  }
  .werte .preis-zelle { color: var(--t); }
}
/* Rückfall ohne Container-Einheiten (cqi): Zahl unter das Instrument statt in die Bogenöffnung */
@supports not (top: 1cqi) {
  .anzeige__text { position: static; margin-top: -1.6em; }
  .anzeige__zahl { font-size: 1.6rem; }
  .anzeige__einheit { font-size: .8rem; }
  .anzeige__delta { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .k { max-width: none; }
  .karte { box-shadow: none; }
}