/* A.0.100.0 — Krankenwagen bei vorfahrt.de (tafeln/vorfahrt.js, daten/vorfahrt.js): Adressleiste wie Shoppital und Placebo, Kopf des
   Händlers in Nachtblau mit Blaulicht und rotem Strich, die drei Wagen als Karten wie im Autohaus (Bild auf hellem Boden, Aufkleber,
   Stichpunkte, Werte als Balken, Preis, roter Knopf), darunter der Ankauf deines Fuhrparks. Farben: Nachtblau, Signalrot, Warngelb. */

.tafel.vf-tafel {
  --vf-blau: #14284b; --vf-blau2: #2a4f8c; --vf-rot: #e2332a; --vf-rot2: #c0241c; --vf-gelb: #ffd21f; --vf-grau: #f2f4f7; --vf-linie: #dde2ea;
  --vf-leise: #5b6880;
  width: min(98%, 64em); height: min(100%, 46em); background: #fff; color: var(--vf-blau); border: 1px solid #a9b3c2; border-radius: .55em;
}
.vf-tafel .tafel-kopf { background: linear-gradient(#eef1f5, #dde3ea); color: var(--vf-blau); padding: .3em .35em .3em .6em; border-bottom: 1px solid var(--vf-linie); }
.vf-tafel .tafel-kopf h2 { flex: 1; min-width: 0; font-family: var(--schrift); font-weight: 700; font-size: .8em; letter-spacing: 0; padding: .22em .85em;
  border-radius: 999px; background: #fff; border: 1px solid var(--vf-linie); color: var(--vf-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-tafel .tafel-kopf h2::before { content: '🔒 '; font-size: .9em; }
.vf-tafel .tafel-zu { color: var(--vf-blau); width: 1.9em; height: 1.6em; border-radius: .35em; display: grid; place-items: center; background: transparent; }
.vf-tafel .tafel-zu:hover, .vf-tafel .tafel-zu:focus-visible { background: #d93a3a; color: #fff; outline: none; }
.vf-tafel .tafel-inhalt { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.vf-tafel .tafel-fuss { background: var(--vf-grau); border-top: 1px solid var(--vf-linie); }
.vf { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.vf .knopf:focus-visible { outline: 2px solid var(--vf-rot); outline-offset: 2px; }

/* Kopf des Händlers */
.vf-kopf { flex: none; display: flex; align-items: center; gap: .9em; padding: .45em 1em; background: var(--vf-blau); color: #fff; border-bottom: .22em solid var(--vf-rot); }
.vf-logo { display: flex; align-items: center; gap: .3em; }
.vf-zeichen { width: 1.9em; height: 1.9em; flex: none; }
.vf-logo b { font: 700 1.45em/1 var(--zier); letter-spacing: -.01em; color: #fff; }
.vf-claim { color: #c6d1e4; font-weight: 700; font-size: .88em; }
.vf-claim i { color: var(--vf-gelb); font-style: italic; }
.vf-kunde { margin-left: auto; display: flex; align-items: center; gap: .35em; padding: .2em .7em .2em .5em; border-radius: 999px; background: rgba(255, 255, 255, .1);
  font-size: .85em; white-space: nowrap; min-width: 0; }
.vf-kunde b { overflow: hidden; text-overflow: ellipsis; }
.vf-kunde small { color: #c6d1e4; font-weight: 700; margin-right: .15em; }
.vf-kunde .logo { width: 1.5em; height: 1.5em; flex: none; }

/* Garage und Konto */
.vf-band { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15em 1em; padding: .35em 1em; background: var(--vf-grau);
  border-bottom: 1px solid var(--vf-linie); font-size: .85em; color: var(--vf-leise); }
.vf-band b { color: var(--vf-blau); }

/* die Seite rollt für sich */
.vf-seite { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: .75em 1em 1em; }
.vf-hallo { margin: 0 0 .65em; font-weight: 700; }
.vf h3 { margin: .3em 0 .5em; font: 700 1.08em/1.2 var(--zier); color: var(--vf-blau); }
.vf h3 + .vf-unter { margin-top: -.3em; }

/* die Wagen als Karten */
.vf-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; margin-bottom: 1em; }
.vf-karte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vf-linie); border-radius: .7em; overflow: clip;
  box-shadow: 0 .15em .45em rgba(20, 40, 75, .09); }
/* das Bild füllt seinen Kasten (gleich hoch in allen Karten, egal wie hoch der Wagen gemalt ist), steht unten auf dem „Boden“ */
.vf-bild { position: relative; aspect-ratio: 16 / 7; overflow: clip; background: linear-gradient(#f8fafd 0 62%, #e3e8ef 62% 100%); }
.vf-bild img { position: absolute; left: .7em; top: .6em; width: calc(100% - 1.4em); height: calc(100% - .95em); object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 .3em .2em rgba(20, 40, 75, .28)); }
.vf-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3em; line-height: 1; }
.vf-marke { position: absolute; left: .55em; top: .5em; padding: .1em .5em; border-radius: .3em; background: var(--vf-gelb); color: var(--vf-blau);
  font: 700 .72em/1.35 var(--schrift); font-style: normal; text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 .08em .15em rgba(20, 40, 75, .2); }
.vf-text { display: flex; flex-direction: column; gap: .3em; padding: .55em .75em .75em; flex: 1 1 auto; }
.vf-text h4 { margin: 0; font: 700 1.02em/1.2 var(--zier); color: var(--vf-blau); }
.vf-pitch { margin: 0; font-size: .84em; line-height: 1.35; color: var(--vf-leise); }
.vf-punkte { margin: 0; padding-left: 1.05em; font-size: .8em; line-height: 1.35; }
.vf-punkte li::marker { color: var(--vf-rot); }
.vf-werte { display: grid; grid-template-columns: auto minmax(0, 1fr) 2em; gap: .2em .5em; align-items: center; margin: .25em 0 0; font-size: .78em; }
.vf-werte dt { color: var(--vf-leise); font-weight: 700; }
.vf-werte dd { margin: 0; height: .5em; border-radius: 999px; background: var(--vf-grau); overflow: clip; box-shadow: inset 0 0 0 1px var(--vf-linie); }
.vf-werte dd i { display: block; height: 100%; background: linear-gradient(90deg, var(--vf-blau2), #3f74c8); border-radius: inherit; }
.vf-werte > b { text-align: right; }
.vf-preis { margin: auto 0 0; padding-top: .4em; display: flex; align-items: baseline; justify-content: space-between; gap: .4em; border-top: 1px dashed var(--vf-linie); }
.vf-preis b { font: 700 1.38em/1 var(--zier); color: var(--vf-rot2); }
.vf-preis small { font-size: .72em; color: var(--vf-leise); text-align: right; }
.vf .knopf.vf-kaufen { display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; margin-top: .35em; padding: .45em .7em; border: none;
  border-radius: .5em; background: var(--vf-rot); color: #fff; font-weight: 700; box-shadow: 0 .12em 0 var(--vf-rot2); }
.vf .knopf.vf-kaufen:hover:not(:disabled) { background: var(--vf-rot2); }
.vf .knopf.vf-kaufen:disabled { background: #b8c0cc; box-shadow: none; filter: none; opacity: 1; }
.vf-grund { margin: 0; font-size: .74em; font-weight: 700; color: var(--vf-rot2); }

/* Ankauf: dein Fuhrpark */
.vf-unter { margin: 0 0 .5em; font-size: .85em; color: var(--vf-leise); }
.vf-fuhrpark { display: flex; flex-direction: column; gap: .4em; }
.vf-wagen { display: grid; grid-template-columns: 5.5em minmax(0, 1.2fr) minmax(0, 1fr) auto auto; align-items: center; gap: .8em; padding: .35em .7em .35em .45em;
  background: #fff; border: 1px solid var(--vf-linie); border-radius: .6em; }
.vf-wagen.weg { background: var(--vf-grau); }
.vf-wagen-bild { display: grid; place-items: center; }
.vf-wagen-bild img { width: 100%; height: auto; display: block; filter: drop-shadow(0 .15em .1em rgba(20, 40, 75, .25)); }
.vf-wagen-name { display: flex; flex-direction: column; min-width: 0; }
.vf-wagen-name small, .vf-zustand small, .vf-ankauf small { font-size: .74em; color: var(--vf-leise); font-weight: 700; }
.vf-zustand { display: flex; flex-direction: column; gap: .15em; }
.vf-ankauf { display: flex; flex-direction: column; align-items: flex-end; }
.vf-ankauf b { font: 700 1.1em/1.1 var(--zier); color: var(--vf-blau); }
.vf .knopf.vf-verkaufen { padding: .35em .9em; border: 1.5px solid var(--vf-blau); border-radius: .5em; background: #fff; color: var(--vf-blau); font-weight: 700; }
.vf .knopf.vf-verkaufen:hover:not(:disabled) { background: var(--vf-blau); color: #fff; }
.vf-leer { margin: 0; padding: .7em .9em; border: 1px dashed var(--vf-linie); border-radius: .6em; color: var(--vf-leise); font-weight: 700; }
.vf-klein { margin: 1.1em 0 0; font-size: .72em; line-height: 1.45; color: var(--vf-leise); }

/* schmal (Handy): eine Karte je Zeile, Bild links; Fuhrpark ohne Balken */
@container (max-width: 760px) {
  .vf-claim { display: none; }
  .vf-karten { grid-template-columns: minmax(0, 1fr); gap: .5em; }
  .vf-karte { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr); }
  .vf-bild { aspect-ratio: auto; min-height: 6em; }
  .vf-bild img { object-position: 50% 60%; }
  .vf-wagen { grid-template-columns: 4.5em minmax(0, 1fr) auto auto; }
  .vf-zustand { display: none; }
}
@container (max-width: 480px) {
  .vf-karte { display: flex; }
  .vf-bild { aspect-ratio: 16 / 7; }
  .vf-kunde small { display: none; }
  .vf-wagen { grid-template-columns: 3.8em minmax(0, 1fr) auto auto; gap: .5em; }
  .vf-wagen-name small { display: none; }
}
/* niedrig (Handy quer): Kopf schmaler, ohne Gruß */
@media (max-height: 500px) {
  .vf-kopf { padding: .3em .8em; }
  .vf-logo b { font-size: 1.2em; }
  .vf-zeichen { width: 1.5em; height: 1.5em; }
  .vf-hallo { display: none; }
  .vf-band { padding: .2em .8em; }
  .vf-seite { padding-top: .5em; }
}