/* ============================================================================
   EPITOME KABINETT · Komponenten  (setzt tokens.css voraus)
   Präfix ep-. Hairlines statt Kästen, kantige Radien, Messing sparsam.
   ========================================================================== */

/* --- Grundlagen ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--base); }
body {
  margin: 0; background: var(--base); color: var(--ink);
  font-family: var(--f-body); font-size: var(--t-base); line-height: var(--lh-body);
  font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
a { color: var(--brass); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--brass-bright); text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }

/* --- Typografie-Rollen ------------------------------------------------------ */
.ep-display { font-family: var(--f-display); font-weight: 500; letter-spacing: var(--track-display); line-height: var(--lh-tight); color: var(--ink-hi); }
.ep-display--xl { font-size: var(--t-4xl); font-variation-settings: 'opsz' 72; }
.ep-display--lg { font-size: var(--t-3xl); font-variation-settings: 'opsz' 48; }
.ep-display--md { font-size: var(--t-2xl); font-variation-settings: 'opsz' 28; }
.ep-display--sm { font-size: var(--t-xl); font-variation-settings: 'opsz' 22; }
.ep-display--i { font-style: italic; font-weight: 400; }
.ep-lede { font-family: var(--f-display); font-size: var(--t-lg); line-height: var(--lh-snug); color: var(--muted); font-style: italic; font-weight: 400; }
.ep-mono { font-family: var(--f-mono); font-size: var(--t-sm); }
.ep-muted { color: var(--muted); }
.ep-faint { color: var(--faint); }

/* --- Kopfleiste --------------------------------------------------------------- */
.ep-topbar {
  display: flex; align-items: center; gap: var(--s-6); height: var(--h-topbar);
  padding: 0 var(--gutter); background: var(--header); border-bottom: 1px solid var(--line);
}
.ep-brand { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-hi); text-decoration: none; }
.ep-brand:hover { text-decoration: none; color: var(--ink-hi); }
.ep-brand__mark { width: 26px; height: 30px; color: var(--brass); fill: none; stroke: currentColor; stroke-width: 1.25; }
.ep-brand__mark path + path { stroke-width: 1.7; }
.ep-brand__name { font-family: var(--f-display); font-size: 24px; letter-spacing: -.02em; line-height: 1; }
.ep-brand__sub { font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brass); margin-left: var(--s-2); }
.ep-areas { display: flex; gap: var(--s-1); margin-left: var(--s-4); }
.ep-areas a { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-2); color: var(--muted); font-size: var(--t-sm); font-weight: 500; }
.ep-areas a:hover { color: var(--ink); background: var(--raised); text-decoration: none; }
.ep-areas a[aria-current="page"] { color: var(--brass-bright); box-shadow: inset 0 -2px 0 var(--brass); border-radius: var(--r-2) var(--r-2) 0 0; }
.ep-topbar__spacer { flex: 1; }
.ep-stand { display: flex; align-items: center; gap: var(--s-2); font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--faint); letter-spacing: .04em; }
.ep-stand::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); }

/* --- Suchfeld ------------------------------------------------------------------ */
.ep-search { display: flex; align-items: center; gap: var(--s-2); height: var(--ctl-h); width: 320px; max-width: 100%; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--field); color: var(--muted); }
.ep-search:focus-within { border-color: var(--brass); }
.ep-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: var(--t-sm); }
.ep-search input::placeholder { color: var(--faint); opacity: 1; }
.ep-search kbd { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--faint); border: 1px solid var(--line); border-radius: var(--r-1); padding: 1px 5px; }
.ep-search--lg { height: 48px; width: 100%; font-size: var(--t-md); }
.ep-search--lg input { font-size: var(--t-md); }

/* --- Register (Seitennavigation) ------------------------------------------------ */
.ep-register { width: var(--w-register); background: var(--panel); border-right: 1px solid var(--line); padding: var(--s-5) 0; }
.ep-register__group { padding: 0 var(--s-4); margin-bottom: var(--s-5); }
.ep-register__group > .ep-label { display: block; padding: 0 var(--s-2); margin-bottom: var(--s-2); }
.ep-register a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); height: 32px; padding: 0 var(--s-2); border-radius: var(--r-2); color: var(--muted); font-size: var(--t-sm); }
.ep-register a:hover { color: var(--ink); background: var(--raised); text-decoration: none; }
.ep-register a[aria-current="page"] { color: var(--brass-bright); background: color-mix(in oklab, var(--brass) 12%, transparent); box-shadow: inset 2px 0 0 var(--brass); }
.ep-register a .ep-count { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--faint); }
.ep-register a[aria-current="page"] .ep-count { color: var(--brass); }

/* --- Brotkrume, Exponat-Blättern, Inhaltsverzeichnis ---------------------------- */
.ep-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--muted); }
.ep-crumbs a { color: var(--muted); }
.ep-crumbs a:hover { color: var(--brass-bright); }
.ep-crumbs li { list-style: none; display: flex; align-items: center; gap: var(--s-2); }
.ep-crumbs li + li::before { content: "/"; color: var(--faint); }
.ep-crumbs ol { display: contents; margin: 0; padding: 0; }
.ep-pager { display: flex; align-items: center; gap: var(--s-2); }
.ep-pager__idx { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); padding-right: var(--s-2); }
.ep-toc { font-size: var(--t-sm); }
.ep-toc > .ep-label { display: block; margin-bottom: var(--s-3); }
.ep-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.ep-toc li a { display: block; padding: 5px 0 5px var(--s-4); color: var(--muted); margin-left: -1px; border-left: 1px solid transparent; }
.ep-toc li a:hover { color: var(--ink); text-decoration: none; }
.ep-toc li a[aria-current="true"] { color: var(--brass-bright); border-left-color: var(--brass); }
.ep-toc li li a { padding-left: var(--s-8); font-size: var(--t-xs); }

/* --- Tafel (Titelblock eines Exponats) ------------------------------------------- */
.ep-plate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-6); align-items: end; padding-bottom: var(--s-5); border-bottom: 1px solid var(--brass-line); }
.ep-plate__kicker { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
.ep-plate__title { font-family: var(--f-display); font-size: clamp(30px, 3vw, 44px); font-weight: 500; letter-spacing: var(--track-display); line-height: 1.1; color: var(--ink-hi); font-variation-settings: 'opsz' 48; }
.ep-plate__orig { font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--muted); font-size: var(--t-lg); margin-top: var(--s-2); }
.ep-plate__inv { text-align: right; }
.ep-plate__inv .ep-label { display: block; margin-bottom: 2px; }
.ep-plate__inv code { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--brass-bright); }

/* --- Schild (Infobox als Messingschild) ------------------------------------------ */
.ep-schild { width: var(--w-schild); max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--brass); border-radius: var(--r-3); box-shadow: var(--shadow-schild); }
.ep-schild__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3); border-bottom: 1px solid var(--line-soft); }
.ep-schild__glyph { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--brass-line); border-radius: var(--r-2); color: var(--brass); background: color-mix(in oklab, var(--brass) 8%, transparent); }
.ep-schild__glyph .ep-icon { width: 20px; height: 20px; }
.ep-schild__title { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.15; color: var(--ink-hi); }
.ep-schild__sub { font-size: var(--t-xs); color: var(--muted); margin-top: 2px; }
.ep-schild__media { padding: var(--s-4); border-bottom: 1px solid var(--line-soft); }
.ep-schild dl { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); margin: 0; }
.ep-schild dt, .ep-schild dd { margin: 0; padding: 9px var(--s-4); border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.ep-schild dt { font-family: var(--f-mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted); padding-top: 11px; }
.ep-schild dd { color: var(--ink); overflow-wrap: anywhere; }
.ep-schild dd .ep-mono { color: var(--muted); }
.ep-schild dt:nth-last-of-type(1), .ep-schild dd:last-of-type { border-bottom: 0; }
.ep-schild__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line-soft); font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--faint); }

/* --- Vitrine (3D-Ansicht) ------------------------------------------------------- */
.ep-vitrine { position: relative; isolation: isolate; border: 1px solid var(--vitrine-line); border-radius: var(--r-4) var(--r-4) 0 0; background: var(--vitrine-bg); overflow: hidden; color: var(--vitrine-ink); }
.ep-vitrine::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(191, 207, 226, .18), transparent); z-index: 2; }
.ep-vitrine::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: var(--shadow-vitrine); z-index: 1; }
.ep-vitrine__stage { position: relative; aspect-ratio: 16 / 10; min-height: 260px; display: grid; place-items: center; }
.ep-vitrine__stage img { position: relative; z-index: 1; width: 62%; height: auto; max-height: 86%; object-fit: contain; transform: translateY(7%); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .45)); }
.ep-podest { position: absolute; left: 50%; bottom: 9%; width: 58%; height: 15%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, color-mix(in oklab, var(--podest) 100%, white 6%), var(--podest) 70%, color-mix(in oklab, var(--podest) 70%, black) 100%); box-shadow: 0 0 0 1px var(--podest-rim), 0 10px 30px rgba(0, 0, 0, .5); }
.ep-podest::after { content: ""; position: absolute; inset: 14% 8%; border-radius: 50%; border: 1px solid rgba(151, 176, 205, .12); }
.ep-vitrine__caption { position: absolute; left: var(--s-4); bottom: var(--s-3); z-index: 2; display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-2xs); color: var(--vitrine-ink); opacity: .85; pointer-events: none; text-shadow: 0 1px 5px #0b1521; }
.ep-vitrine__caption .ep-icon { width: 14px; height: 14px; }
.ep-vitrine__caption i { font-style: normal; color: #5c7186; padding: 0 var(--s-1); }
.ep-vitrine__tag { position: absolute; right: var(--s-4); top: var(--s-3); z-index: 2; }
.ep-vitrine__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); min-height: 52px; padding: var(--s-2) var(--s-3); background: #122132; border: 1px solid var(--vitrine-line); border-top: 0; border-radius: 0 0 var(--r-4) var(--r-4); color: #b9c5d1; }
.ep-vitrine__group { display: flex; align-items: center; gap: var(--s-1); }
.ep-vitrine__group + .ep-vitrine__group { padding-left: var(--s-4); border-left: 1px solid #29394a; }
.ep-vitrine__toolbar .ep-btn--quiet { color: #b9c5d1; }
.ep-vitrine__toolbar .ep-btn--quiet:hover { color: #e5e9ed; background: #203247; }
.ep-vitrine__toolbar .ep-btn--quiet[aria-pressed="true"] { color: #d6c199; background: #2c333a; box-shadow: inset 0 0 0 1px #6d5d42; }
.ep-vitrine__toolbar .ep-vitrine__group--end { margin-left: auto; border-left: 0; padding-left: 0; }
.ep-vitrine--loading .ep-vitrine__stage img { opacity: 0; }
.ep-loading { display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-4); font-size: var(--t-sm); color: #cfdae4; }
.ep-loading__ring { width: 28px; height: 28px; border: 1px solid #405062; border-top-color: #d6c199; border-radius: 50%; animation: ep-spin 1.1s linear infinite; }
@keyframes ep-spin { to { transform: rotate(360deg); } }

/* --- Exponat-Kachel ------------------------------------------------------------- */
.ep-exponat { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--r-3); background: var(--panel); overflow: hidden; color: inherit; text-decoration: none; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ep-exponat:hover { border-color: var(--line-strong); text-decoration: none; color: inherit; transform: translateY(-1px); }
.ep-exponat[aria-current="true"], .ep-exponat--selected { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass-glow); }
.ep-exponat__img { position: relative; aspect-ratio: 1 / .9; background: var(--vitrine-bg); display: grid; place-items: center; overflow: hidden; }
.ep-exponat__img img { position: relative; z-index: 1; width: 78%; height: auto; max-height: 82%; object-fit: contain; transform: translateY(6%); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .45)); }
.ep-exponat__img .ep-podest { width: 64%; height: 14%; bottom: 7%; }
.ep-exponat__body { display: flex; flex-direction: column; gap: 3px; padding: var(--s-3) var(--s-3) var(--s-3); }
.ep-exponat__name { font-size: var(--t-sm); font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.ep-exponat__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--t-2xs); color: var(--muted); }
.ep-exponat__inv { font-family: var(--f-mono); color: var(--faint); }
.ep-exponat__tag { position: absolute; right: var(--s-2); top: var(--s-2); z-index: 2; }
.ep-exponat--row { flex-direction: row; align-items: center; gap: var(--s-3); padding-right: var(--s-3); }
.ep-exponat--row .ep-exponat__img { width: 72px; aspect-ratio: 1; flex: 0 0 auto; }
.ep-exponat--row .ep-exponat__img .ep-podest { height: 16%; }
.ep-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* --- Inventarslot (Item-Icon im Spielraster; slotsX × slotsY) ------------------ */
.ep-slot { --cell: 48px; display: inline-grid; place-items: center; width: calc(var(--cell) * var(--sx, 1)); height: calc(var(--cell) * var(--sy, 1)); background: var(--field); border: 1px solid var(--line); border-radius: var(--r-1); background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: var(--cell) var(--cell); background-position: -1px -1px; }
.ep-slot img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.ep-slot--lg { --cell: 64px; }
.ep-slot--sm { --cell: 32px; }
.ep-slot--ghost { border-style: dashed; color: var(--faint); font-family: var(--f-mono); font-size: var(--t-2xs); }

/* --- Siegel, Badges, Chips, IDs ------------------------------------------------- */
.ep-siegel { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 6px; border: 1px solid color-mix(in oklab, var(--_c) 45%, transparent); border-radius: var(--r-1); background: color-mix(in oklab, var(--_c) 10%, transparent); color: var(--_c); font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ep-siegel .ep-icon { width: 12px; height: 12px; stroke-width: 2; }
.ep-siegel--belegt { --_c: var(--s-belegt); }
.ep-siegel--plausibel { --_c: var(--s-plausibel); }
.ep-siegel--offen { --_c: var(--s-offen); }
.ep-siegel--platzhalter { --_c: var(--s-platzhalter); }
.ep-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-1); font-size: var(--t-xs); font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ink); background: var(--raised); border: 1px solid var(--line); }
.ep-badge--klasse { color: var(--_k); border-color: color-mix(in oklab, var(--_k) 40%, transparent); background: color-mix(in oklab, var(--_k) 12%, transparent); }
.ep-badge--klasse .ep-icon { width: 13px; height: 13px; }
.ep-badge--krieger { --_k: var(--k-krieger); }
.ep-badge--ninja { --_k: var(--k-ninja); }
.ep-badge--schamanin { --_k: var(--k-schamanin); }
.ep-badge--nekromantin { --_k: var(--k-nekromantin); }
.ep-badge--elementalist { --_k: var(--k-elementalist); }
.ep-badge--alle { --_k: var(--muted); }
.ep-badge--neu { color: var(--brass-ink); background: var(--brass); border-color: var(--brass); font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase; }
.ep-badge--aria { color: var(--fr-aria); border-color: color-mix(in oklab, var(--fr-aria) 40%, transparent); background: color-mix(in oklab, var(--fr-aria) 10%, transparent); }
.ep-badge--zetia { color: var(--fr-zetia); border-color: color-mix(in oklab, var(--fr-zetia) 40%, transparent); background: color-mix(in oklab, var(--fr-zetia) 10%, transparent); }
.ep-klassenreihe { display: inline-flex; gap: 3px; }
.ep-klassenreihe i { width: 8px; height: 8px; border-radius: 1px; background: var(--_k); opacity: .35; }
.ep-klassenreihe i.on { opacity: 1; }
.ep-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-2); background: transparent; color: var(--muted); font-size: var(--t-xs); font-weight: 500; white-space: nowrap; }
.ep-chip:hover { color: var(--ink); border-color: var(--line-strong); }
.ep-chip[aria-pressed="true"] { color: var(--brass-bright); border-color: var(--brass); background: color-mix(in oklab, var(--brass) 12%, transparent); }
.ep-chip .ep-count { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--faint); }
.ep-chip[aria-pressed="true"] .ep-count { color: var(--brass); }
.ep-id { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); background: var(--field); border: 1px solid var(--line-soft); border-radius: var(--r-1); padding: 2px 6px; }
.ep-id b { font-weight: 500; color: var(--faint); }
.ep-kreatur { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .04em; color: var(--muted); }

/* --- Tabellen, Kennwerte, Bonusplätze, Kurve ------------------------------------ */
.ep-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.ep-table th { text-align: left; padding: 8px 10px; font-family: var(--f-mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--brass-line); white-space: nowrap; }
.ep-table th[aria-sort] { color: var(--brass-bright); }
.ep-table th[aria-sort]::after { content: " ↑"; }
.ep-table th[aria-sort="descending"]::after { content: " ↓"; }
.ep-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ep-table tbody tr:hover td { background: color-mix(in oklab, var(--raised) 60%, transparent); }
.ep-table .num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.ep-table .cell-name { font-weight: 600; color: var(--ink); }
.ep-table--wrap { overflow-x: auto; }
.ep-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--s-5); margin: 0; }
.ep-kv dt { font-family: var(--f-mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.ep-kv dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.ep-kv dt:last-of-type, .ep-kv dd:last-of-type { border-bottom: 0; }
.ep-bonus { display: grid; grid-template-columns: repeat(5, 1fr) 12px repeat(2, 1fr); gap: 6px; align-items: stretch; }
.ep-bonus__sep { width: 1px; background: var(--brass-line); justify-self: center; }
.ep-bonus__slot { min-height: 58px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--field); display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.ep-bonus__slot .ep-label { font-size: 9px; }
.ep-bonus__slot .val { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--ink-hi); }
.ep-bonus__slot .name { font-size: var(--t-xs); color: var(--ink); line-height: 1.25; }
.ep-bonus__slot--leer { border-style: dashed; color: var(--faint); }
.ep-bonus__slot--hoch { border-color: var(--brass-line); background: color-mix(in oklab, var(--brass) 6%, var(--field)); }
.ep-kurve { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; align-items: end; height: 96px; }
.ep-kurve__bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.ep-kurve__bar i { display: block; height: calc(var(--v) * 1%); background: var(--brass); border-radius: 3px 3px 0 0; opacity: .9; min-height: 3px; }
.ep-kurve__bar i.dim { background: var(--line-strong); }
.ep-kurve__bar b { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-family: var(--f-mono); font-size: var(--t-2xs); font-weight: 400; color: var(--muted); }
.ep-kurve__axis { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 4px; }
.ep-kurve__axis span { text-align: center; font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--faint); }

/* --- Artikel-Typografie ----------------------------------------------------------- */
.ep-prose { max-width: var(--w-prose); font-size: var(--t-md); line-height: var(--lh-loose); color: var(--ink); }
.ep-prose > * + * { margin-top: 1em; }
.ep-prose h2 { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 500; line-height: 1.2; margin-top: 2em; padding-top: .7em; border-top: 1px solid var(--line); color: var(--ink-hi); font-variation-settings: 'opsz' 28; }
.ep-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ep-prose h3 { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 500; line-height: 1.25; margin-top: 1.6em; color: var(--ink-hi); }
.ep-prose h2 .ep-label, .ep-prose h3 .ep-label { display: block; margin-bottom: 6px; }
.ep-prose p { margin-top: .9em; }
.ep-prose ul, .ep-prose ol { padding-left: 1.3em; }
.ep-prose li + li { margin-top: .35em; }
.ep-prose blockquote { margin: 1.4em 0; padding: var(--s-3) var(--s-5); border-left: 2px solid var(--brass); background: color-mix(in oklab, var(--brass) 6%, transparent); font-family: var(--f-display); font-style: italic; font-size: var(--t-lg); line-height: 1.4; color: var(--ink); }
.ep-prose blockquote cite { display: block; margin-top: .5em; font-family: var(--f-mono); font-style: normal; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted); }
.ep-prose code { font-family: var(--f-mono); font-size: .82em; color: var(--brass-bright); background: color-mix(in oklab, var(--brass) 9%, transparent); border-radius: var(--r-1); padding: 0 4px; }
.ep-prose strong { color: var(--ink-hi); font-weight: 600; }
.ep-prose figure { margin: 1.6em 0; }
.ep-prose figcaption { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--muted); }
.ep-prose sup a { font-family: var(--f-mono); font-size: .72em; color: var(--brass); padding: 0 2px; }
.ep-fussnoten { margin-top: var(--s-10); padding-top: var(--s-4); border-top: 1px solid var(--brass-line); font-size: var(--t-sm); color: var(--muted); }
.ep-fussnoten ol { margin: var(--s-3) 0 0; padding-left: 1.6em; }
.ep-fussnoten li { padding-left: .3em; }
.ep-fussnoten li + li { margin-top: .5em; }
.ep-fussnoten li::marker { font-family: var(--f-mono); color: var(--brass); }
.ep-quelle { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--faint); }
.ep-quelle .ep-icon { width: 12px; height: 12px; }

/* --- Hinweis (Leitplanke), Leerzustand, Toast ------------------------------------ */
.ep-hinweis { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--panel); font-size: var(--t-sm); line-height: 1.5; color: var(--ink); }
.ep-hinweis .ep-icon { width: 20px; height: 20px; color: var(--_c, var(--brass)); margin-top: 1px; }
.ep-hinweis__title { display: block; font-weight: 600; color: var(--ink-hi); margin-bottom: 2px; }
.ep-hinweis p { margin: 0; color: var(--muted); }
.ep-hinweis--beleg { --_c: var(--s-plausibel); border-color: var(--brass-line); }
.ep-hinweis--server { --_c: var(--s-offen); }
.ep-hinweis--platzhalter { --_c: var(--s-platzhalter); border-color: color-mix(in oklab, var(--s-platzhalter) 40%, transparent); }
.ep-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-10) var(--s-6); border: 1px dashed var(--line); border-radius: var(--r-3); }
.ep-empty .ep-icon { width: 32px; height: 32px; color: var(--faint); stroke-width: 1.2; }
.ep-empty h3 { margin-top: var(--s-4); font-family: var(--f-display); font-size: var(--t-xl); font-weight: 500; color: var(--ink-hi); }
.ep-empty p { margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--t-sm); max-width: 38ch; }
.ep-empty .ep-btn { margin-top: var(--s-5); }
.ep-toast { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: var(--shadow-pop); font-size: var(--t-sm); }
.ep-toast .ep-icon { color: var(--s-belegt); }

/* --- Steuerung ------------------------------------------------------------------------ */
.ep-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ctl-h); padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel); color: var(--ink); font-size: var(--t-sm); font-weight: 500; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.ep-btn:hover { border-color: var(--line-strong); background: var(--raised); text-decoration: none; color: var(--ink-hi); }
.ep-btn:disabled { opacity: .4; cursor: not-allowed; }
.ep-btn--primary { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); }
.ep-btn--primary:hover { background: var(--brass-bright); border-color: var(--brass-bright); color: var(--brass-ink); }
.ep-btn--outline { background: transparent; border-color: var(--brass-line); color: var(--brass-bright); }
.ep-btn--outline:hover { background: color-mix(in oklab, var(--brass) 12%, transparent); border-color: var(--brass); }
.ep-btn--quiet { background: transparent; border-color: transparent; color: var(--muted); padding: 0 10px; }
.ep-btn--quiet:hover { background: var(--raised); color: var(--ink); }
.ep-btn--quiet[aria-pressed="true"] { color: var(--brass-bright); background: color-mix(in oklab, var(--brass) 12%, transparent); box-shadow: inset 0 0 0 1px var(--brass-line); }
.ep-btn--icon { width: var(--ctl-h); padding: 0; }
.ep-btn--sm { height: var(--ctl-h-sm); padding: 0 10px; font-size: var(--t-xs); }
.ep-btn--sm.ep-btn--icon { width: var(--ctl-h-sm); }
.ep-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ep-field > .ep-label { font-size: var(--t-2xs); }
.ep-input, .ep-select { height: var(--ctl-h); padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--field); color: var(--ink); font-size: var(--t-sm); width: 100%; min-width: 0; }
.ep-input::placeholder { color: var(--faint); opacity: 1; }
.ep-input:hover, .ep-select:hover { border-color: var(--line-strong); }
.ep-input:focus, .ep-select:focus { border-color: var(--brass); outline: 0; box-shadow: none; }
.ep-select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.ep-tabs { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border: 1px solid var(--line-soft); border-radius: var(--r-3); background: var(--header); }
.ep-tabs button { height: 30px; padding: 0 14px; border-radius: var(--r-1); color: var(--muted); font-size: var(--t-sm); font-weight: 500; }
.ep-tabs button:hover { color: var(--ink); background: var(--raised); }
.ep-tabs button[aria-selected="true"] { color: var(--brass-bright); background: var(--raised); box-shadow: inset 0 0 0 1px var(--brass-line); }
.ep-pagination { display: flex; align-items: center; gap: 4px; }
.ep-pagination button { min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-2); color: var(--muted); font-family: var(--f-mono); font-size: var(--t-xs); }
.ep-pagination button:hover { color: var(--ink); background: var(--raised); }
.ep-pagination button[aria-current="page"] { color: var(--brass-bright); box-shadow: inset 0 0 0 1px var(--brass-line); background: color-mix(in oklab, var(--brass) 10%, transparent); }
.ep-pagination i { color: var(--faint); font-style: normal; padding: 0 4px; }
.ep-switch { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--muted); cursor: pointer; }
.ep-switch i { position: relative; width: 34px; height: 18px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--field); transition: background var(--dur), border-color var(--dur); }
.ep-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 1px; background: var(--muted); transition: transform var(--dur) var(--ease), background var(--dur); }
.ep-switch input { position: absolute; opacity: 0; }
.ep-switch input:checked + i { background: color-mix(in oklab, var(--brass) 20%, var(--field)); border-color: var(--brass); }
.ep-switch input:checked + i::after { transform: translateX(16px); background: var(--brass-bright); }
.ep-switch input:focus-visible + i { box-shadow: var(--focus); }

/* --- Seitenraster ------------------------------------------------------------------------ */
.ep-page { max-width: var(--w-page); margin: 0 auto; }
.ep-workspace { display: grid; grid-template-columns: var(--w-register) minmax(0, 1fr); min-height: 640px; }
.ep-article { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-schild); gap: var(--s-10); padding: var(--s-8) var(--gutter) var(--s-14); background: var(--stage); }
.ep-article__aside { display: flex; flex-direction: column; gap: var(--s-5); }
.ep-article__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.ep-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); padding: var(--s-6) var(--gutter); border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--faint); letter-spacing: .03em; }
@media (max-width: 1100px) { .ep-article { grid-template-columns: 1fr; } .ep-schild { width: 100%; } }
@media (max-width: 800px) { .ep-workspace { grid-template-columns: 1fr; } .ep-register { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); } .ep-topbar { gap: var(--s-3); padding: 0 var(--s-4); } .ep-areas { display: none; } .ep-search { width: 100%; } }