/* portal-embed-vorschau.css — Optik der Live-Vorschau (Etappe 6).
 *
 * WARUM DIESE DATEI ES EIN DRITTES MAL GIBT. Der Discord-Look steht im Projekt
 * schon zweimal (`.dc-embed` und `.em-card` in app/static/css/style.css) — beide
 * sind hier nicht benutzbar, weil style.css im Portal nie geladen wird. Ein Link
 * darauf zoege das gesamte Dashboard-Stylesheet mit seinen eigenen Tokens in
 * jede Portalseite; das waere die groessere Verschlechterung.
 *
 * KEIN HARTES HEX, NIRGENDS. Alle Farben kommen aus den OKLCH-Tokens von
 * app.css. Die einzige Ausnahme ist der Akzentbalken der Karte — der ist
 * NUTZERDATE (der Farbwaehler des Formulars) und wird von
 * portal-embed-vorschau.js zur Laufzeit gesetzt.
 * `tests/test_embed_vorschau_kette.py` prueft beides.
 *
 * KEINE GOOGLE FONTS. Die Schriften sind self-hosted (@font-face in app.css);
 * Google Fonts blockt die CSP.
 *
 * DIE VORSCHAU SOLL WIE EINE VORSCHAU AUSSEHEN und nicht wie ein
 * Discord-Fenster: abgesetzte Buehne mit gestricheltem Rand, sichtbar
 * beschriftet. Wer sie fuer den echten Client haelt, glaubt ihr mehr, als sie
 * verspricht — sie zeigt Struktur und Text, nicht Discords Pixel.
 */

.emv-wurzel { display: block; margin-top: 16px; }

.emv > .ph .emv-status { font-weight: 550; }
.emv-status.ok { color: var(--primary-2); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
.emv-status.warn { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.emv-quelle { font-size: 0.82rem; margin-bottom: 12px; max-width: 62ch; }

/* ── Die Buehne ───────────────────────────────────────────────────────────── */
.emv-buehne {
  background: var(--bg);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-3);
  padding: 26px 14px 14px;
  position: relative;
}
.emv-buehne-innen { position: relative; }
/* Sitzt im oberen Innenabstand der Buehne (26px), nicht darueber: der Bezug ist
   `.emv-buehne-innen`, und deren Oberkante liegt bereits um diesen Abstand
   eingerueckt. Bei -34px stuende die Beschriftung 8px AUSSERHALB des
   gestrichelten Rahmens und ragte in den Absatz darueber. */
.emv-marke {
  position: absolute; top: -19px; left: -2px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
}
/* Ein Stand, der nicht mehr zur Eingabe passt, wird zurueckgenommen statt
   weiterhin selbstbewusst dazustehen. Der Grund steht als Kasten darunter. */
.emv-wurzel.veraltet .emv-buehne { opacity: 0.42; filter: saturate(0.5); }
.emv-wurzel.veraltet .emv-buehne,
.emv-buehne { transition: opacity var(--t-2) var(--e-out); }

/* ── Discord-Karte (Components-V2-Container / klassisches Embed) ──────────── */
.dcv-karte {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 13px 15px;
  max-width: 62ch;
}
.dcv-karte.mit-balken { border-left: 4px solid var(--border-2); }
.dcv-karte + .dcv-karte { margin-top: 10px; }

.dcv-h1, .dcv-h2 { font-family: var(--font-display); color: var(--ink); margin: 10px 0 4px; }
.dcv-h1 { font-size: 1.16rem; }
.dcv-h2 { font-size: 1.02rem; }
.dcv-h3 {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 650;
  color: var(--ink-2); margin: 10px 0 2px;
}
.dcv-karte > *:first-child, .dcv-td > *:first-child { margin-top: 0; }

/* `pre-wrap`: Umbrueche und Leerzeilen stehen so, wie sie getippt wurden —
   Discord macht es genauso. `break-word`, damit eine lange URL die Karte nicht
   auseinanderdrueckt. */
.dcv-text {
  white-space: pre-wrap; overflow-wrap: break-word;
  font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); margin: 4px 0;
}
.dcv-klein {
  font-size: 0.76rem; line-height: 1.45; color: var(--faint);
  white-space: pre-wrap; overflow-wrap: break-word; margin: 3px 0;
}
.dcv-verlinkt { color: var(--info); }
.dcv-leer { color: var(--faint); font-size: 0.88rem; padding: 10px 0; }

.dcv-trenner { height: 1px; background: var(--border-2); margin: 11px 0; border: 0; }
.dcv-trenner.unsichtbar { background: transparent; }

/* Ein Abschnitt ist "Text links, Accessory rechts" (Discord: Section mit
   Thumbnail oder Knopf). Der Text steckt in EINEM Wrapper — frueher stand hier
   `> *:first-child`, und weil das JS ein DocumentFragment einhaengte, traf die
   Regel bei mehreren Textbloecken nur den ersten: er bekam Basis 0 und brach
   zeichenweise um, waehrend die uebrigen mit `flex-basis: auto` den Platz
   nahmen. `min-width: 0` bleibt Pflicht, sonst sprengt eine lange URL ohne
   Leerzeichen die Karte. */
.dcv-abschnitt { display: flex; gap: 12px; align-items: flex-start; }
.dcv-abschnitt > .dcv-abschnitt-inhalt { flex: 1 1 auto; min-width: 0; }
.dcv-abschnitt > *:not(.dcv-abschnitt-inhalt) { flex: 0 0 auto; }

.dcv-feld { margin: 8px 0; }
.dcv-feld.nebeneinander { display: inline-block; vertical-align: top; min-width: 33%; padding-right: 12px; }

.dcv-autor { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dcv-autor-name { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.dcv-fuss { display: flex; align-items: center; gap: 8px; margin-top: 11px; }

/* ── Bilder ──────────────────────────────────────────────────────────────── */
.dcv-bild { margin: 9px 0; max-width: 100%; }
.dcv-img { border-radius: var(--r-2); max-height: 260px; width: auto; }
.dcv-autor .dcv-bild, .dcv-fuss .dcv-bild { margin: 0; flex: 0 0 auto; }
.dcv-autor .dcv-img, .dcv-fuss .dcv-img { width: 20px; height: 20px; border-radius: 50%; }
.dcv-galerie { display: flex; flex-wrap: wrap; gap: 8px; }

/* Der Platzhalter fuer ein Bild, das die CSP nicht laden laesst. Er sieht
   bewusst nach „hier fehlt etwas absichtlich" aus und nicht nach Fehler —
   den Satz dazu liefert der Block „Bilder in dieser Vorschau" darunter. */
.dcv-bild-ph {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--r-2);
  border: 1px dashed var(--border-2); background: var(--surface-3);
  color: var(--muted); font-size: 0.8rem;
}
.dcv-bild-ph-i { font-size: 1rem; color: var(--faint); }
.dcv-bild-ph-t { font-weight: 600; }
.dcv-bild-ph-q { font-size: 0.72rem; color: var(--faint); }
.dcv-autor .dcv-bild-ph, .dcv-fuss .dcv-bild-ph { padding: 3px 7px; font-size: 0.72rem; }

.dcv-unbekannt {
  font-size: 0.78rem; color: var(--muted); font-style: italic;
  border-left: 2px solid var(--border-2); padding-left: 9px; margin: 8px 0;
}

/* ── Ehrlichkeit ─────────────────────────────────────────────────────────── */
.emv-ehrlich { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.emv-versteckt { display: none; }

.emv-block {
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--r-2); background: var(--surface-2); padding: 11px 13px;
}
.emv-block-h { font-weight: 650; font-size: 0.86rem; color: var(--ink-2); margin-bottom: 5px; }
.emv-satz { font-size: 0.83rem; color: var(--muted); margin: 0; max-width: 68ch; }
.emv-liste { margin: 6px 0 0; padding-left: 18px; font-size: 0.83rem; color: var(--muted); }
.emv-liste li { margin: 2px 0; }

.emv-block.warnung { border-left-color: var(--danger); }
.emv-block.warnung .emv-block-h { color: var(--danger); }
.emv-block.fehler { border-left-color: var(--warning); }
.emv-block.fehler .emv-block-h { color: var(--warning); }
.emv-block.verworfen { border-left-color: var(--accent); }
.emv-block.bild, .emv-block.hinweis { border-left-color: var(--info); }
.emv-block.grenzen { border-left-color: var(--border-2); }

/* ── Grenzbalken ─────────────────────────────────────────────────────────── */
.emv-grenze + .emv-grenze { margin-top: 9px; }
.emv-grenze-kopf { display: flex; justify-content: space-between; gap: 12px; font-size: 0.79rem; }
.emv-grenze-l { color: var(--muted); }
.emv-grenze-z { color: var(--ink-2); }
.emv-schiene {
  height: 5px; margin-top: 4px; border-radius: var(--r-pill);
  background: var(--surface-3); overflow: hidden;
}
.emv-fuell {
  height: 100%; border-radius: var(--r-pill); background: var(--primary);
  transition: width var(--t-2) var(--e-out);
}
.emv-grenze.knapp .emv-fuell { background: var(--warning); }
.emv-grenze.knapp .emv-grenze-z { color: var(--warning); }
.emv-grenze.drueber .emv-fuell { background: var(--danger); }
.emv-grenze.drueber .emv-grenze-z { color: var(--danger); }

@media (max-width: 640px) {
  .emv-buehne { padding: 24px 10px 10px; }
  .dcv-feld.nebeneinander { display: block; min-width: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .emv-buehne, .emv-fuell { transition: none; }
}