/*
 * OmniDex Steckbrief-Seite (Frontend Schritt 4, 14.10.2026).
 * Nur Struktur, kein endgueltiges Design. Farben kommen aus dem Seitentext (currentColor)
 * und aus halbtransparentem Grau, damit helle und dunkle Seiten gleich gut aussehen.
 * Variante A: zwei Spalten ab 62em, darunter eine Spalte. Alle Klassen beginnen mit "omx-".
 */
.omx-entry {
	--omx-border: rgba(128, 128, 128, 0.35);
	--omx-surface: rgba(128, 128, 128, 0.08);
	--omx-gap: 1.5rem;
	--omx-radius: 0.5rem;
	max-width: 72rem;
	margin: 0 auto;
	padding: 1rem;
}

.omx-entry .omx-muted { opacity: 0.7; }

.omx-entry .omx-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Brotkrumen */
.omx-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 0.75rem; padding: 0; list-style: none; font-size: 0.875rem; opacity: 0.75; }
.omx-crumbs li + li::before { content: "\203A"; margin-right: 0.25rem; }

/* Kopf */
.omx-head__body { display: flex; flex-direction: column; gap: 1rem; }
.omx-head__cover img { display: block; max-width: 100%; height: auto; border-radius: var(--omx-radius); }
.omx-head__title { margin: 0 0 0.5rem; line-height: 1.15; }
.omx-head__synonyms, .omx-head__updated { margin: 0 0 0.5rem; font-size: 0.9375rem; }

/* Kurzfakten: Kacheln so breit wie ihr Text, als Gruppe mittig, Text mittig. Lange Werte brechen
   in der Kachel um und laufen nie aus der Seite (Tobias, 14.10.: "nach rechts raus"). */
.omx-keyfacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2.5rem; margin: 1rem 0; padding: 0; }
.omx-keyfacts > div { flex: 0 1 auto; max-width: 18rem; min-width: 0; text-align: center; }
.omx-keyfacts dt { font-size: 0.875rem; opacity: 0.7; }
.omx-keyfacts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Chips (Typ, Themen) */
.omx-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.omx-chip { padding: 0.125rem 0.625rem; border: 1px solid var(--omx-border); border-radius: 999px; background: var(--omx-surface); font-size: 0.875rem; }

/* Ankerleiste */
.omx-anchors { position: sticky; top: 0; z-index: 5; margin: 1rem 0; padding: 0.5rem 0; border-bottom: 1px solid var(--omx-border); background: Canvas; }
.omx-anchors ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.omx-anchors a { text-decoration: none; }
.omx-anchors a:hover, .omx-anchors a:focus { text-decoration: underline; }
.omx-block { scroll-margin-top: 4rem; }

/* Spalten: Handy = eine Spalte in der Reihenfolge --m-order, Desktop = zwei Spalten */
.omx-layout { display: flex; flex-direction: column; gap: var(--omx-gap); }
.omx-main, .omx-side { display: contents; }
.omx-block { order: var(--m-order, 0); min-width: 0; }
.omx-block__title { margin: 0 0 0.75rem; font-size: 1.25rem; }

@media (min-width: 62em) {
	.omx-head__body { flex-direction: row; align-items: flex-start; }
	.omx-head__cover { flex: 0 0 22rem; max-width: 22rem; }
	.omx-head__main { flex: 1 1 auto; min-width: 0; }
	.omx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; gap: 2rem; }
	.omx-main, .omx-side { display: flex; flex-direction: column; gap: var(--omx-gap); }
	.omx-block { order: 0; }
	/* Nur eine Spalte: Seite mittig und schmal (lesbar, kein leeres Loch) */
	.omx-layout--main, .omx-layout--side { display: block; }
}

/* Eine Spalte (Hauptspalte oder nur Seitenspalte): ganze Seite mittig, schmaler. */
.omx-entry--main, .omx-entry--side { max-width: 46rem; }

/* Fakten */
.omx-facts { margin: 0; }
.omx-facts__row { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 0.5rem; padding: 0.375rem 0; border-bottom: 1px solid var(--omx-border); }
.omx-facts__row:last-child { border-bottom: 0; }
.omx-facts dt { min-width: 0; opacity: 0.75; overflow-wrap: anywhere; hyphens: auto; }
.omx-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.omx-side .omx-block--facts, .omx-side .omx-block--extra, .omx-side .omx-block--themes { padding: 1rem; border: 1px solid var(--omx-border); border-radius: var(--omx-radius); background: var(--omx-surface); }

/* Karten (Attributsgruppen) */
.omx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.omx-card { padding: 1rem; border: 1px solid var(--omx-border); border-radius: var(--omx-radius); background: var(--omx-surface); }
.omx-card__title { margin: 0 0 0.5rem; font-size: 1.0625rem; }

/* Fuss-Zone (Themen, Verwandte Steckbriefe): unter beiden Spalten, auf allen Seiten gleich. */
.omx-foot { display: flex; flex-direction: column; gap: var(--omx-gap); margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--omx-border); }
.omx-foot .omx-block__title { font-size: 1.125rem; }
.omx-news { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.omx-news li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.625rem 0.875rem; border: 1px solid var(--omx-border); border-radius: var(--omx-radius); background: var(--omx-surface); }
.omx-news a { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.omx-news__date { font-size: 0.875rem; opacity: 0.7; white-space: nowrap; }
.omx-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.omx-related a { display: block; height: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--omx-border); border-radius: var(--omx-radius); background: var(--omx-surface); text-decoration: none; overflow-wrap: anywhere; }
.omx-related a:hover, .omx-related a:focus { text-decoration: underline; }

/* Ja-Abzeichen, Texte */
.omx-badge { display: inline-block; padding: 0 0.5rem; border-radius: 999px; background: var(--omx-surface); border: 1px solid var(--omx-border); font-size: 0.875rem; }
.omx-teaser { font-size: 1.125rem; }
.omx-teaser p { margin: 0 0 0.75rem; }