/* ============================================================
   Dach — Startseite über alle Bereiche der Community.
   Drei Entwürfe teilen sich das Grundgerüst (.dach-card); nur die
   Anordnung unterscheidet sich (--kachel / --zeile / --held).
   Nach Marcs Entscheidung bleibt eine Variante, der Rest fliegt raus.
   ============================================================ */

/* --- Akzentfarbe je Bereich --------------------------------- */
.dach-card[data-accent="GT3"], .dach-card__img[data-accent="GT3"] { --ac: var(--gt3); }
.dach-card[data-accent="GTE"], .dach-card__img[data-accent="GTE"] { --ac: var(--gte); }
.dach-card[data-accent="GT4"], .dach-card__img[data-accent="GT4"] { --ac: var(--gt4); }
.dach-card[data-accent="VIOLET"], .dach-card__img[data-accent="VIOLET"] { --ac: var(--violet); }
.dach-card[data-accent="CYAN"], .dach-card__img[data-accent="CYAN"] { --ac: var(--cyan); }

/* --- Karte: gemeinsames Grundgerüst ------------------------- */
.dach-card {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  border-radius: var(--radius); background: var(--card-strong);
  border: 1px solid var(--line); border-top: 3px solid var(--ac, var(--cyan));
  cursor: var(--cur-pointer); text-align: left;
  transition: transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.dach-card:hover {
  transform: translateY(-5px); background: var(--card-hover);
  border-color: var(--line-strong); border-top-color: var(--ac, var(--cyan));
  box-shadow: 0 22px 48px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line-strong);
}
.dach-card:hover .dach-card__title { color: var(--ac, var(--cyan)); }
.dach-card:hover .dach-card__go { color: var(--ac, var(--cyan)); transform: translateX(5px); }
.dach-card:hover .dach-card__foto { transform: scale(1.05); }
.dach-card:hover .dach-card__ph { filter: brightness(1.15); }

/* Gesperrt: sichtbar, aber sichtlich nicht anklickbar. Marc will sie zeigen
   („das geilt die Leute schön auf"), deshalb nur gedämpft, nicht versteckt. */
.dach-card--locked { cursor: default; opacity: 0.86; }
.dach-card--locked:hover { transform: none; box-shadow: none; background: var(--card-strong); }
.dach-card--locked .dach-card__img { filter: grayscale(0.35); }

/* --- Bildfläche: Platzhalter unten, Foto darüber ------------- */
.dach-card__img { position: relative; display: block; overflow: hidden; background: var(--bg-1); }
.dach-card__ph {
  position: absolute; inset: 0; display: grid; place-items: center; transition: filter 0.2s;
  background:
    radial-gradient(ellipse 90% 120% at 20% 0%, color-mix(in srgb, var(--ac, var(--cyan)) 45%, transparent), transparent 65%),
    linear-gradient(135deg, var(--bg-2), var(--bg-0));
}
.dach-card__ico { font-size: clamp(34px, 5vw, 58px); opacity: 0.85; filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.6)); }
/* Das RaM-Logo ist sehr breit und flach (3578x974, ohne Rand in der Datei) und
   wirkte im hohen Kasten dadurch klein — Marc, 13.08.2026. `max-height` deckelt
   es, falls die Karte mal niedriger wird, ohne das Seitenverhaeltnis zu kippen. */
.dach-card__logo {
  width: 88%; max-width: 380px; max-height: 66%; height: auto;
  opacity: 0.95; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.55));
}
.dach-card__foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease-out;
}
/* Banner und Panoramen: ganz zeigen statt beschneiden (gesetzt von
   `bilderAnpassen` in _dach_cards.js). Der Farbverlauf darunter bleibt
   sichtbar und rahmt das Bild ein. */
/* Wenig Rand: bei hohen Bildern (HRC Dash, 1,33:1 in einem breiten Kasten)
   begrenzt die Kartenhoehe die Groesse — jedes Pixel Polster fehlt dann sichtbar. */
.dach-card__foto--ganz { object-fit: contain; padding: 5px; }
/* Verlauf nach unten, damit die Schrift auch auf hellen Screenshots liest. */
.dach-card__img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 35%, rgba(5, 6, 10, 0.55) 100%);
}

/* --- Textblock ---------------------------------------------- */
/* Enger gesetzt als die uebrigen Karten des Boards (Marc, 13.08.): mit den
   Podesten wurden die ersten beiden Karten deutlich hoeher als der Rest.
   Schriftgroessen bleiben unveraendert, nur die Abstaende geben nach. */
/* Senkrecht mittig: seit die Bildhoehe die Karte bestimmt, haben kurze Karten
   Platz uebrig. Unten angeschlagen sah das nach vergessener Luecke aus. */
.dach-card__body {
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding: 12px 18px 11px; flex: 1;
}
.dach-card__kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ac, var(--cyan));
}
.dach-card__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.15; transition: color 0.18s;
}
.dach-card__teaser { color: var(--text-dim); font-size: 14.5px; line-height: 1.5; }
.dach-card__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding-top: 7px; }
.dach-chip {
  font-family: var(--font-mono); font-size: 12px; padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(8, 10, 18, 0.45); color: var(--text-dim);
}
.dach-chip b { color: var(--text); font-weight: 700; }
.dach-card__lock {
  font-family: var(--font-mono); font-size: 12px; padding: 4px 11px; border-radius: 99px;
  border: 1px solid var(--ac, var(--cyan)); color: var(--ac, var(--cyan));
  background: color-mix(in srgb, var(--ac, var(--cyan)) 12%, transparent);
}
.dach-card__go {
  margin-left: auto; font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--text-faint); transition: color 0.18s, transform 0.18s;
}

/* --- Anordnung: breite Zeilen, Bild links ------------------- */
.dach-grid--zeile { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.dach-card--zeile { flex-direction: row; align-items: stretch; border-top: 1px solid var(--line); border-left: 3px solid var(--ac, var(--cyan)); }
.dach-card--zeile:hover { border-left-color: var(--ac, var(--cyan)); }
/* Marcs Bilder sind seit 14.08. alle 16:9. Der Kasten hat jetzt dasselbe Format,
   dadurch fuellen sie ihn randlos aus — nichts wird beschnitten, nichts
   eingerahmt, und alle vier Karten sind gleich hoch. Der Platzhalter erzwingt
   die Hoehe; die Karte kann nur hoeher werden, wenn der Text mehr braucht.
   Marc, 01.09.2026: „breiter, dafuer weniger hoch — sonst sieht man nicht alle
   Bereiche". Die Hoehe folgt hier dem 16:9 der BILDSPALTE, also macht eine
   schmalere Spalte die Karte flacher UND den Textblock breiter. Genau ein Wert
   statt zweier gegenlaeufiger Schrauben. Die Einbett-Ansicht setzt ihre eigene
   Breite (embed.css:138,152) und bleibt davon unberuehrt — geprueft. */
.dach-card--zeile .dach-card__img { flex: 0 0 clamp(190px, 24%, 300px); }
.dach-card--zeile .dach-card__img::before { content: ''; display: block; padding-top: 56.25%; }
.dach-card--zeile .dach-card__img::after { background: linear-gradient(to right, transparent 45%, rgba(5, 6, 10, 0.5) 100%); }
.dach-card--zeile .dach-card__body { padding: 13px 20px; }

/* --- Flacher, ohne Inhalt wegzuwerfen (Marc, 01.09.2026) ----
   Gemessen kam die Kartenhoehe NICHT vom Bild, sondern vom Textblock:
   Kicker 14 + Titel 24 + Text 44 + Zahlen 33 + Podest 50. Ein schmaleres Bild
   allein macht die Karten mit Podest deshalb kein Stueck flacher.
   Der gewonnene Platz steckt in der BREITE — also wandern Kennzahlen und
   Podest nebeneinander in EINE Zeile statt untereinander.
   ⚠️ Bewusst ausgenommen: die Einbett-Ansicht der Rennserver. Sie blendet den
   Beschreibungstext ohnehin aus und ist auf ihre heutige Hoehe abgestimmt —
   nachgemessen 144 px, die darf sich nicht bewegen. */
html:not(.embed--start) .dach-card--zeile .dach-card__body {
  display: grid; align-content: center;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "kicker kicker" "titel titel" "text text" "zahlen podest";
  column-gap: 18px;
}
html:not(.embed--start) .dach-card--zeile .dach-card__kicker { grid-area: kicker; }
html:not(.embed--start) .dach-card--zeile .dach-card__title  { grid-area: titel; }
html:not(.embed--start) .dach-card--zeile .dach-card__teaser { grid-area: text; }
html:not(.embed--start) .dach-card--zeile .dach-card__foot   { grid-area: zahlen; }
html:not(.embed--start) .dach-card--zeile .dach-pod {
  grid-area: podest; margin-top: 8px; padding-top: 7px;
  border-top: 1px solid var(--line); border-left: 0;
}
/* Eine Zeile Beschreibung — zusammen mit der geteilten Fusszeile bringt das die
   fuenf Bereiche auf einen Bildschirm. Der ganze Text steht im Bereich selbst. */
html:not(.embed--start) .dach-card--zeile .dach-card__teaser {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Podest auf der Lizenzserver-Karte ----------------------
   Die drei schnellsten mit Bestzeit. Nachgereicht von _dach_live.js, deshalb
   darf hier nichts an der Karte haengen, das ohne Podest kaputtginge. */
.dach-pod {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line);
}
.dach-pod__kopf {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-faint); width: 100%;
}
.dach-pod__it {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 2px 9px 2px 6px; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(8, 10, 18, 0.45);
  transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
.dach-pod__it[data-fahrer] { cursor: var(--cur-pointer); }
.dach-pod__it[data-fahrer]:hover {
  border-color: var(--pl, var(--cyan)); background: rgba(8, 10, 18, 0.75); transform: translateY(-1px);
}
.dach-pod__it[data-rang="1"] { --pl: var(--gold); }
.dach-pod__it[data-rang="2"] { --pl: var(--silver); }
.dach-pod__it[data-rang="3"] { --pl: var(--bronze); }
.dach-pod__m { font-size: 14px; line-height: 1; }
.dach-pod__n { font-weight: 600; font-size: 13.5px; color: var(--pl, var(--text)); }
.dach-pod__t {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: var(--text-dim);
}

@media (max-width: 620px) {
  .dach-pod { gap: 5px 9px; }
  .dach-pod__n { font-size: 12.5px; }
  .dach-pod__t { font-size: 11.5px; }
}

/* --- Kopf der Startseite kompakt ----------------------------
   Die Bereiche sollen ohne Scrollen sichtbar sein (Marc, 13.08.). Logo und
   Titel sagen dasselbe — das Logo traegt es, der Titel darf deutlich kleiner
   sein. Gilt nur fuer das Dach, die Bereichsseiten bleiben wie sie sind. */
.dach .landing-hero { padding: 2px 0 0; }
/* Marc, 01.09.2026: alle fuenf Bereiche sollen ohne Scrollen zu sehen sein.
   Nach dem Flacherziehen der Karten fehlten bei 1250 px Fensterhoehe exakt
   23 px — die kommen aus dem Kopf, nicht aus den Karten. Logo von 101 auf
   rund 78 px, damit bleibt es die Marke und frisst nicht die Liste. */
.dach .landing-hero__logo { width: clamp(140px, 19vw, 215px); margin-bottom: 6px; }
.dach .landing-hero__sub { margin-top: 4px; }
.dach .landing-hero__title { font-size: clamp(21px, 3.1vw, 33px); margin: 6px 0 8px; }
.dach .landing-hero__sub { font-size: 15px; max-width: 74ch; }
.dach .section-head { margin: 14px 0 14px; }

/* --- Bereichsseite: Rücksprung aufs Dach -------------------- */
.zurueck {
  display: inline-block; font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
  color: var(--text-faint); padding: 4px 0 2px; transition: color 0.18s, transform 0.18s;
}
.zurueck:hover { color: var(--cyan); transform: translateX(-3px); }
.landing-hero--bereich { padding-top: 4px; }

/* --- Responsive --------------------------------------------- */
/* Unter 980 px stapelt die Karte (Bild oben, Text darunter). Dort ist die
   geteilte Fusszeile falsch: die Spalte ist zu schmal, Zahlen und Podest
   quetschen sich und die Karte wird HOEHER statt flacher — gemessen 414 statt
   292 px bei 412 px Breite. Also zurueck auf untereinander. */
@media (max-width: 980px) {
  html:not(.embed--start) .dach-card--zeile .dach-card__body {
    display: flex; flex-direction: column;
  }
  html:not(.embed--start) .dach-card--zeile .dach-card__teaser { -webkit-line-clamp: 2; }
}

@media (max-width: 980px) {
  .dach-card--zeile { flex-direction: column; }
  .dach-card--zeile .dach-card__img { flex: none; aspect-ratio: 16 / 7; }
  .dach-card--zeile .dach-card__img::after {
    background: linear-gradient(to bottom, transparent 35%, rgba(5, 6, 10, 0.55) 100%);
  }
}