/* ============================================================
   Fahrerprofil, Fassung 2: Bereichs-Reiter und die zwei Auto-Karten.
   Uebernommen aus der abgenommenen Vorlage `_entwuerfe/profil-v2.css`.
   Die Karten-Grundoptik steht in `diagramme.css` (.dia-karte); hier
   kommt nur dazu, was das Board bisher nicht kannte.
   ============================================================ */
/* --- Bereichs-Reiter --- */
.reiter { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line);
          margin-bottom: 22px; position: sticky; top: 0; background: rgba(5,6,10,.94);
          backdrop-filter: blur(10px); z-index: 20; padding-top: 6px; }
.rtab { background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
        font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 1px;
        text-transform: uppercase; color: var(--text-dim); padding: 14px 16px; min-height: 48px; }
.rtab:hover { color: var(--text); }
.rtab[aria-selected="true"] { color: var(--cyan); border-bottom-color: var(--cyan); }
.rtab small { color: var(--text-faint); font-weight: 400; margin-left: 5px; }
.panel { display: none; }
.panel[data-aktiv] { display: block; }

/* --- Die zwei Autos, klar benannt --- */
.autos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.auto { position: relative; padding: 16px 18px; overflow: hidden; }
.auto--ram { border-color: rgba(255,46,151,.36);
             background: linear-gradient(180deg, rgba(255,46,151,.07), transparent 60%); }
.auto--tourist { border-color: rgba(0,229,255,.32);
                 background: linear-gradient(180deg, rgba(0,229,255,.06), transparent 60%); }
.auto__titel { font-family: var(--font-display); font-size: 13px; font-weight: 800;
               letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 3px; }
.auto--ram .auto__titel { color: var(--magenta-soft); }
.auto--tourist .auto__titel { color: var(--cyan-soft); }
.auto__wo { font-size: 12px; color: var(--text-faint); margin-bottom: 12px; }
.auto__bild { aspect-ratio: 16/9; display: grid; place-items: center; }
/* Umriss und Bild liegen im selben Feld — der Umriss ist aber NUR der
   Rueckfall und bleibt verborgen, solange ein Bild da ist.

   ⚠️ Ohne die zweite Regel schien er durch: die Auto-Fotos sind freigestellte
   PNG mit durchsichtigem Hintergrund, dahinter stand deutlich sichtbar der
   gezeichnete Umriss (Marcs Bildschirmfoto 17.08.2026). `:has()` fragt genau
   das Richtige: „liegt in diesem Stapel noch ein Bild?" — `onerror` entfernt
   das Bild, erst dann erscheint der Umriss. Kennt ein Browser `:has()` nicht,
   bleibt der Umriss verborgen; dann steht im Fehlerfall ein leeres Feld da.
   Das ist der harmlosere der beiden Ausgaenge. */
.auto__stapel { display: grid; place-items: center; width: 100%; }
.auto__stapel > * { grid-area: 1 / 1; width: 100%; }
.auto__stapel > .car-photo__ph { display: none; }
.auto__stapel:not(:has(img)) > .car-photo__ph { display: grid; place-items: center; }
.auto__bild img { width: 100%; display: block; object-fit: contain; }
.auto__name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px;
              margin-top: 6px; }
.auto__daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px;
               border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.auto__daten b { font-family: var(--font-mono); font-size: 16px; display: block; margin-top: 2px; }

/* --- Kennzahlen-Streifen --- */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
          margin-bottom: 22px; }
.zahl { padding: 14px 16px; border-left: 3px solid var(--ak, var(--cyan)); }
.zahl b { display: block; font-family: var(--font-mono); font-size: 24px; margin: 4px 0 2px; }
.zahl span.note { color: var(--text-dim); font-size: 12px; }

/* --- Die zwei Autos, klar benannt --- */
.autos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.auto { position: relative; padding: 16px 18px; overflow: hidden; }
.auto--ram { border-color: rgba(255,46,151,.36);
             background: linear-gradient(180deg, rgba(255,46,151,.07), transparent 60%); }
.auto--tourist { border-color: rgba(0,229,255,.32);
                 background: linear-gradient(180deg, rgba(0,229,255,.06), transparent 60%); }
.auto__titel { font-family: var(--font-display); font-size: 13px; font-weight: 800;
               letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 3px; }
.auto--ram .auto__titel { color: var(--magenta-soft); }
.auto--tourist .auto__titel { color: var(--cyan-soft); }
.auto__wo { font-size: 12px; color: var(--text-faint); margin-bottom: 12px; }
.auto__bild { aspect-ratio: 16/9; display: grid; place-items: center; }
.auto__bild img { width: 100%; display: block; object-fit: contain; }
.auto__name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px;
              margin-top: 6px; }
.auto__daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px;
               border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.auto__daten b { font-family: var(--font-mono); font-size: 16px; display: block; margin-top: 2px; }


@media (max-width: 900px) { .autos { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .zahlen { grid-template-columns: 1fr 1fr; } }

/* Kopf ohne das Auto rechts: die beiden Autos stehen jetzt gleichwertig
   im Ueberblick, nicht mehr eines klein in der Kopfzeile. */
.profile-top--schmal { grid-template-columns: auto 1fr; }
.profile-top--schmal .profile-car { display: none; }
/* Rennauto ohne jedes Bild (3 von 31 Gemeldeten) bzw. nur mit Umriss. */
.auto__leer { aspect-ratio: 16/9; display: grid; place-items: center; color: var(--text-faint);
              font-size: 12.5px; border: 1px dashed var(--line-strong); border-radius: 9px; }
.auto__hinweis { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; font-style: italic; }