/* ============================================================
   Einbett-Ansicht (?embed=1)
   Für fremde Seiten, die das Board in einem iframe zeigen — heute das
   Live-Timing der Rennserver. Zielfenster: volle Breite, 400–600 px hoch,
   Top 10 ohne Scrollen lesbar.

   Alle Regeln hängen an `html.embed` (gesetzt in js/main.js). Ohne diese
   Klasse ändert diese Datei am Board NICHTS — deshalb darf sie auch vor
   mobile.css stehen: `html.embed X` ist spezifischer als `X` und gewinnt
   unabhängig von der Reihenfolge.
   ============================================================ */

/* Alles, was im fremden Rahmen nur Platz kostet oder ins Leere führt. */
/* `:not(.embed--topbar)` statt nur `html.embed`: in der Kopfleisten-Ansicht
   ist die Leiste der EINZIGE Inhalt. Ausdruecklich ausgenommen statt spaeter
   ueberschrieben — beide Regeln haetten dieselbe Spezifitaet, dann entschiede
   allein die Reihenfolge in der Datei. */
html.embed:not(.embed--topbar) .topbar,
html.embed .site-foot,
html.embed .bnav,
html.embed .fx-scanlines,
html.embed .pwa-hinweis { display: none; }

html.embed, html.embed body {
  background: var(--bg-0);
  /* Der Rahmen bringt seine eigene Höhe mit; das Board darf sie nicht sprengen. */
  overflow-x: hidden;
}
/* mobile.css haelt unten 64 px fuer die Leiste frei (Zeile 191) — die gibt es
   hier nicht, und im 500-px-Rahmen entscheiden diese 64 px darueber, ob die
   Top 10 ohne Scrollen lesbar sind (gemessen: 551 px mit, 487 px ohne). */
html.embed body { padding-bottom: 0; }

html.embed .app {
  max-width: none;
  padding: 10px clamp(8px, 2vw, 16px) 8px;
}

.emb { display: flex; flex-direction: column; gap: 6px; }

.emb__kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.emb__titel {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-dim);
}
.emb__mehr {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 1px;
  color: var(--cyan-soft); white-space: nowrap; text-decoration: none;
}
.emb__mehr:hover { color: var(--cyan); }

.emb__liste { display: flex; flex-direction: column; gap: 2px; }

.emb__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 6px;
  border-left: 3px solid var(--line);
  background: rgba(18, 23, 42, 0.45);
}
.emb__row[data-class="GT3"] { border-left-color: var(--gt3); }
.emb__row[data-class="GTE"] { border-left-color: var(--gte); }
.emb__row[data-class="GT4"] { border-left-color: var(--gt4); }

.emb__pos {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--text-faint); text-align: right;
}
.emb__row:nth-child(1) .emb__pos { color: var(--gold); }
.emb__row:nth-child(2) .emb__pos { color: var(--silver); }
.emb__row:nth-child(3) .emb__pos { color: var(--bronze); }

/* Fahrer und Auto untereinander: in 400 px Höhe ist Breite das knappe Gut. */
.emb__wer { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.emb__name {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.emb__land { margin-right: 5px; }
.emb__auto {
  font-size: 11px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.emb__zeit { font-size: 14px; font-weight: 700; color: var(--cyan-soft); }
.emb__gap  { font-size: 11px; color: var(--text-faint); min-width: 56px; text-align: right; }

.emb__leer { padding: 24px 8px; text-align: center; color: var(--text-faint); font-size: 13px; }

.emb__fuss {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  letter-spacing: 1px; padding-top: 4px;
}

/* Schmale Rahmen (Live-Timing am Telefon): Abstand zum Rundenrückstand fällt weg. */
@media (max-width: 420px) {
  html.embed .emb__gap { display: none; }
  html.embed .emb__row { grid-template-columns: 26px minmax(0, 1fr) auto; }
}

/* ============================================================
   Einbett-Ansicht "Startseite"  (?embed=1&view=start)
   Fuer Seiten mit wechselnden Strecken, wo eine Nordschleife-Liste
   inhaltlich fremd waere (Bitte des Rennserver-Betreibers, 30.08.2026).

   Bewusst KEINE zweite Startseite, sondern das echte Dach verdichtet:
   aendert Marc die Bereiche, aendert sich der Rahmen automatisch mit.
   Gemessen ungekuerzt: 1.799 px bei 1000 px Breite — im 500-px-Rahmen
   unbrauchbar, daher die Kuerzungen unten.
   ============================================================ */

/* Gesperrte Bereiche fliegen raus: sie sind bewusst kein <a>
   (_dach_cards.js) und fuehren nirgendwo hin. Im Rahmen waeren das zwei
   tote Kacheln auf der halben Flaeche. */
html.embed--start .dach-card--locked,
/* Erklaertexte und Credit gehoeren auf die eigene Seite, nicht in den
   fremden Rahmen — dort zaehlt nur der Weg ins Board. */
html.embed--start .landing-info,
html.embed--start .landing-credit { display: none; }

/* Titelbereich: Logo und Fliesstext raus, Zeile und Ueberschrift bleiben. */
html.embed--start .landing-hero { padding: 0 0 10px; }
html.embed--start .landing-hero__logo,
html.embed--start .landing-hero__sub { display: none; }
html.embed--start .landing-hero__title { font-size: clamp(22px, 3.4vw, 30px); margin: 2px 0 0; }
html.embed--start .landing-hero__eyebrow { font-size: 10px; letter-spacing: 2px; }

html.embed--start .section-head { margin: 0 0 8px; }

/* Kacheln: Bildflaeche schmaler (ihre Hoehe folgt dem 16:9-Verhaeltnis aus
   dach.css) und der Beschreibungstext raus. Kicker, Titel und die
   Kennzahlen bleiben — die tragen die Entscheidung, wohin man klickt. */
html.embed--start .dach-grid--zeile { gap: 10px; margin-bottom: 0; }
html.embed--start .dach-card--zeile .dach-card__img { flex: 0 0 clamp(110px, 22%, 170px); }
html.embed--start .dach-card__body { padding: 8px 12px; gap: 1px; }
html.embed--start .dach-card__teaser { display: none; }
html.embed--start .dach-card__title { font-size: 17px; }
html.embed--start .dach-card__foot { padding-top: 5px; }

/* Schmale Rahmen: dach.css stellt die Karten unter 980 px auf "Bild oben,
   Text darunter" um (Zeile 174-180). Im Rahmen ist genau das falsch — so
   wuchs die Seite bei 640 px auf 1.356 px. Die Zeilenform bleibt deshalb
   bis ganz nach unten erhalten, nur schmaler. `aspect-ratio: auto` hebt die
   16:7-Vorgabe der Handy-Regel auf, damit wieder das ::before-Verhaeltnis
   (16:9) die Bildhoehe bestimmt. */
html.embed--start .dach-card--zeile { flex-direction: row; }
html.embed--start .dach-card--zeile .dach-card__img {
  flex: 0 0 clamp(96px, 24%, 170px); aspect-ratio: auto;
}
html.embed--start .dach-card--zeile .dach-card__img::after {
  background: linear-gradient(to right, transparent 45%, rgba(5, 6, 10, 0.5) 100%);
}

/* Unter 780 px Rahmenbreite umbricht das Podest auf der Lizenzserver-Karte
   in mehrere Zeilen und traegt dann mehr Hoehe als Aussage: gemessen 640 px
   Inhalt bei 700 px Breite mit Podest, 423 px ohne. Kicker, Titel und die
   Kennzahlen bleiben — die tragen den Klick. */
@media (max-width: 780px) {
  html.embed--start .dach-pod { display: none; }
}

/* Im Rahmen bestimmt der Textblock die Kartenhoehe (Kennzahlen + Podest),
   der Bildkasten wird per `align-items: stretch` mitgestreckt — gemessen
   170x142 statt der 16:9 aus dach.css. Die Automatik in `_dach_cards.js`
   (`passeAn`) misst beim Laden des Bildes und damit VOR dem nachgereichten
   Podest; sie bliebe auf "formatfuellend" und schnitte rund ein Drittel des
   Banners ab. Im Rahmen zeigen wir Banner deshalb IMMER ganz — dort traegt
   die Schrift im Bild ("Fahr die HRC Lizenz 6:30") die halbe Aussage.
   Der gleiche Zeitfehler trifft auch die normale Startseite zwischen rund
   980 und 1300 px Breite; das ist dort separat zu beheben (Beobachtung
   vom 30.08.2026), nicht ueber diese Datei. */
html.embed--start .dach-card__foto { object-fit: contain; padding: 3px; }

/* ============================================================
   Einbett-Ansicht "Banner"  (?embed=1&view=banner)
   Flache Zeile ueber die volle Breite, oben auf einer fremden Seite.
   Der Betreiber traegt EINE feste Hoehe ins CSS ein — die Hoehe muss
   deshalb ueber 360 bis 2560 px stabil bleiben, nicht nur "meistens".
   ============================================================ */

/* KEINE Maximalbreite. Die 1800 px, die hier zuerst standen, liessen den
   Banner auf dem 2500-px-Rahmen des Betreibers als schmale Spalte mit je
   380 px Leere daneben stehen — "sieht nach Fehler aus, nicht nach Absicht"
   (Rueckmeldung 30.08.2026, nachgemessen: #app sass bei 380..2180). Die
   Kopfleisten-Ansicht laeuft ohnehin buendig durch; beide Einbettungen
   verhalten sich jetzt gleich. */
html.embed--banner .app { padding: 10px clamp(10px, 2vw, 22px); max-width: none; }

.bnr {
  display: flex; align-items: stretch; gap: clamp(10px, 1.6vw, 20px);
  /* Umbruch erlaubt: unter ~700 px rutscht die Marke ueber die Felder,
     statt die Felder unlesbar schmal zu quetschen. */
  flex-wrap: wrap;
}

.bnr__marke { display: flex; align-items: center; flex: 0 0 auto; }
.bnr__marke img {
  height: clamp(38px, 4.4vw, 58px); width: auto; display: block;
  filter: drop-shadow(0 0 14px rgba(255, 46, 151, 0.35));
}

/* Die drei Felder teilen sich den Rest zu gleichen Teilen. `min-width: 0`
   ist Pflicht, sonst wird ein Flex-Kind nie schmaler als sein Inhalt und
   der Banner waechst in die Breite statt umzubrechen. */
.bnr__felder { display: flex; flex: 1 1 420px; gap: clamp(8px, 1.2vw, 14px); min-width: 0; }

.bnr__feld {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 8px clamp(9px, 1vw, 14px);
  border-radius: 8px; text-decoration: none;
  border: 1px solid var(--line); border-left: 3px solid var(--ac, var(--cyan));
  background: rgba(18, 23, 42, 0.5);
  transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
.bnr__feld:hover { background: var(--card-hover); transform: translateY(-1px); }
.bnr__feld[data-accent="GT3"] { --ac: var(--gt3); }
.bnr__feld[data-accent="GTE"] { --ac: var(--gte); }
.bnr__feld[data-accent="GT4"] { --ac: var(--gt4); }
.bnr__feld[data-accent="CYAN"] { --ac: var(--cyan); }

/* 10,5 px waren zu klein: die Zeile trug den Bezug zur Zahl darunter nicht,
   auf einer fremden Seite standen damit nur ein Name und eine Zahl im Raum. */
.bnr__label {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Der Bezug ("· Bestzeit") traegt die Aussage und darf deshalb nicht als
   Erstes wegfallen — er steht in der Akzentfarbe des Bereichs. */
.bnr__bezug { color: var(--ac, var(--cyan)); font-weight: 700; }
.bnr__wert { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bnr__wer {
  font-size: clamp(13px, 1.15vw, 16px); font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bnr__zahl {
  font-family: var(--font-mono); font-size: clamp(12px, 1.05vw, 15px);
  color: var(--ac, var(--cyan)); white-space: nowrap; margin-left: auto;
}
.bnr__lade { color: var(--text-faint); }

/* Ab 1000 px untereinander statt nebeneinander — frueher als die 700 px, die
   hier zuerst standen. Grund: seit das Label den Bezug mittraegt
   ("Race am Mittwoch · Meisterschaft"), passt es zwischen 720 und 900 px nicht
   mehr in ein Drittel der Breite und wurde abgeschnitten (gemessen: 3 von 3
   Feldern). Untereinander hat jedes Feld die volle Breite. */
@media (max-width: 1000px) {
  html.embed--banner .bnr { gap: 8px; }
  html.embed--banner .bnr__marke img { height: 30px; }
  html.embed--banner .bnr__felder { flex-direction: column; flex-basis: 100%; gap: 5px; }
  html.embed--banner .bnr__feld { flex-direction: row; align-items: center; gap: 10px; padding: 5px 10px; }
  html.embed--banner .bnr__label { flex: 0 1 auto; font-size: 11px; letter-spacing: 0.8px; }
  html.embed--banner .bnr__wert { flex: 1 1 auto; justify-content: flex-end; }
}

/* Der Betreiber traegt EINE feste Hoehe ins CSS ein, der Inhalt ist aber je
   nach Breite 71 bis 152 px hoch. Ohne diese Regel klebte der Banner bei
   breiten Fenstern oben und darunter stuende ein leeres Feld — das sieht nach
   Fehler aus. Also: volle Hoehe einnehmen und den Inhalt darin zentrieren.
   Damit sieht jede vom Betreiber gewaehlte Hoehe ab 155 px richtig aus. */
html.embed--banner, html.embed--banner body { height: 100%; }
html.embed--banner .app {
  min-height: 100%; display: flex; flex-direction: column; justify-content: center;
}

/* ============================================================
   Einbett-Ansicht "Kopfleiste"  (?embed=1&view=topbar)
   Nur die ECHTE obere Leiste aus index.html — Logo, Menuepunkte,
   "Join Lizenzserver". Kein Nachbau: aendert Marc die Leiste,
   aendert sich der Rahmen beim Rennserver mit.
   ============================================================ */

/* In dieser Ansicht ist die Leiste der ganze Inhalt. */
html.embed--topbar #app,
html.embed--topbar .site-foot { display: none; }

/* Wie beim Banner traegt der Betreiber EINE feste Hoehe ins CSS ein. Also
   volle Rahmenhoehe einnehmen und die Leiste darin zentrieren, statt sie
   oben kleben zu lassen und darunter ein leeres Feld zu zeigen. */
html.embed--topbar, html.embed--topbar body { height: 100%; }
html.embed--topbar body { display: flex; flex-direction: column; justify-content: center; }

/* `sticky` braucht es hier nicht — es gibt nichts zum Wegscrollen — und der
   untere Rand wuerde im fremden Rahmen als fremde Linie stehen. */
html.embed--topbar .topbar { position: static; border-bottom: 0; }

/* Die flachen Menuepunkte tragen bewusst dieselbe Optik wie die Knoepfe der
   echten Navigation (.nav-group__btn in css/nav.css) — nur ohne Aufklapper,
   der im flachen Rahmen unsichtbar aufginge. */
.navflach__i {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 99px; text-decoration: none;
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.navflach__i:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }

/* Symbol je Bereich in einem quadratischen Feld mit der Bereichsfarbe.
   Das Feld traegt die Zuordnung — ein Zeichen allein saehe im Neon-Umfeld
   nach Fremdkoerper aus. `line-height: 1` verhindert, dass die Zeichen die
   Leiste hoeher machen als das Feld selbst. */
.navflach__sym {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  border: 1px solid color-mix(in srgb, var(--ac, var(--cyan)) 45%, transparent);
  background: color-mix(in srgb, var(--ac, var(--cyan)) 14%, transparent);
}
.navflach__i[data-accent="GT3"] { --ac: var(--gt3); }
.navflach__i[data-accent="GTE"] { --ac: var(--gte); }
.navflach__i[data-accent="GT4"] { --ac: var(--gt4); }
.navflach__i[data-accent="CYAN"] { --ac: var(--cyan); }
.navflach__i:hover .navflach__sym {
  border-color: var(--ac, var(--cyan));
  background: color-mix(in srgb, var(--ac, var(--cyan)) 24%, transparent);
}

/* Ab 1050 px verdichten, nicht erst ab 900: gemessen brach die Leiste bei
   940-1000 px in zwei Zeilen um (109 px statt 97 px), weil Marke, vier Punkte
   und der Join-Knopf nebeneinander nicht mehr passten. Verdichtet passen sie
   wieder in eine Zeile — und die Hoehe bleibt ueber die ganze Spanne unter dem
   Wert, den der Betreiber fest eintraegt. */
/* mobile.css:183 blendet die obere Navigation unter 760 px komplett aus — am
   Handy uebernimmt die feste Leiste unten. Die gibt es im Einbett-Modus aber
   nicht, es blieben also nur Logo und Join-Knopf uebrig (gemessen: #topnav
   0x0 px bei 560 und 390 px Breite). In dieser Ansicht muss die Leiste die
   Punkte selbst tragen. */
html.embed--topbar .topnav { display: flex; }

@media (max-width: 1050px) {
  html.embed--topbar .topbar { flex-wrap: wrap; gap: 4px 10px; padding: 6px 12px; }
  html.embed--topbar .brand__logo { height: 30px; }
  html.embed--topbar .brand__sub { display: none; }
  html.embed--topbar .navflach__i { padding: 5px 9px; gap: 6px; font-size: 12.5px; letter-spacing: 0.6px; }
  html.embed--topbar .navflach__sym { width: 22px; height: 22px; border-radius: 6px; font-size: 13px; }
  html.embed--topbar .server-badge { font-size: 11px; padding: 5px 10px; }
}

/* Unter 480 px braucht die Navigation zwei Zeilen — vier Punkte mit
   "Race am Mittwoch" und "Driver Academy" passen dort in keine. Zusammen mit
   der Markenzeile ergab das 130 px und damit mehr, als der Betreiber fest
   eintragen wollte. Enger gesetzt bleibt es unter 120 px, ohne dass ein Punkt
   verschwindet — ein weggelassener Menuepunkt waere schlechter als eine
   kleinere Schrift. */
@media (max-width: 480px) {
  html.embed--topbar .topbar { gap: 3px 8px; padding: 5px 10px; }
  html.embed--topbar .brand__logo { height: 26px; }
  html.embed--topbar .topnav { gap: 2px; }
  html.embed--topbar .navflach__i { padding: 3px 6px; gap: 5px; font-size: 11px; letter-spacing: 0.2px; }
  html.embed--topbar .navflach__sym { width: 19px; height: 19px; border-radius: 5px; font-size: 11px; }
  html.embed--topbar .server-badge { font-size: 10px; padding: 4px 8px; }
}

/* Unter 520 px reicht auch die volle Zeilenbreite nicht mehr fuer Label und
   Wert nebeneinander (gemessen: 2 abgeschnittene Texte bei 360 px). Dort
   steht der Wert unter seinem Label — lieber eine Zeile mehr als ein
   halber Satz. */
@media (max-width: 520px) {
  html.embed--banner .bnr__feld { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 9px; }
  html.embed--banner .bnr__label { flex: none; white-space: normal; font-size: 9.5px; letter-spacing: 0.4px; }
  html.embed--banner .bnr__wert { justify-content: space-between; }
  html.embed--banner .bnr__wer { font-size: 12.5px; }
  html.embed--banner .bnr__zahl { font-size: 12px; }
}