/* === Charbogen — Atmosphärisches Design-System === */

/* === @font-face === */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond/CormorantGaramond-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond/CormorantGaramond-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond/CormorantGaramond-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond/CormorantGaramond-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond/CormorantGaramond-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/Inter-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* === Design Tokens === */

:root {
  --bg-deep:        oklch(0.14 0.018 55);
  --bg-base:        oklch(0.18 0.020 60);
  --bg-raised:      oklch(0.22 0.022 62);
  --bg-veil:        oklch(0.20 0.025 60 / 0.72);

  --ink-bright:     oklch(0.94 0.020 80);
  --ink:            oklch(0.86 0.022 78);
  --ink-soft:       oklch(0.70 0.022 75);
  --ink-faint:      oklch(0.52 0.020 72);
  --ink-ghost:      oklch(0.40 0.018 70);

  --ember:          oklch(0.74 0.135 62);
  --ember-bright:   oklch(0.82 0.140 70);
  --ember-deep:     oklch(0.58 0.120 50);
  --ember-glow:     oklch(0.74 0.135 62 / 0.18);
  --ember-trace:    oklch(0.74 0.135 62 / 0.32);

  --hairline:       oklch(0.92 0.020 80 / 0.10);
  --hairline-warm:  oklch(0.74 0.135 62 / 0.22);

  --danger:         oklch(0.65 0.20 25);
  --danger-bright:  oklch(0.75 0.20 25);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* === Reset & Base === */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg-deep);
  opacity: 1; /* Überschreibt inline opacity:0 — Body wird sichtbar wenn CSS geladen */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* === Hintergrund-Stack === */

.stage { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }

.gradient {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%,
      oklch(0.34 0.080 55 / 0.55) 0%,
      oklch(0.22 0.040 55 / 0.20) 35%,
      transparent 65%),
    radial-gradient(ellipse 100% 80% at 20% 0%,
      oklch(0.24 0.030 250 / 0.35) 0%,
      transparent 50%),
    linear-gradient(180deg,
      var(--bg-deep) 0%,
      oklch(0.16 0.020 58) 60%,
      oklch(0.20 0.030 50) 100%);
}

/* Campfire-Variante: stärkere Glut unten */
.gradient--campfire {
  background:
    radial-gradient(ellipse 70% 55% at 50% 108%,
      oklch(0.55 0.18 50 / 0.55) 0%,
      oklch(0.42 0.14 48 / 0.32) 22%,
      oklch(0.28 0.08 50 / 0.18) 45%,
      transparent 72%),
    radial-gradient(ellipse 110% 80% at 50% 118%,
      oklch(0.40 0.12 50 / 0.30) 0%,
      transparent 55%),
    radial-gradient(ellipse 90% 70% at 18% -5%,
      oklch(0.24 0.030 250 / 0.30) 0%,
      transparent 52%),
    linear-gradient(180deg,
      var(--bg-deep) 0%,
      oklch(0.16 0.020 58) 50%,
      oklch(0.22 0.045 50) 78%,
      oklch(0.30 0.080 50) 100%);
}

canvas#sky { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.grain {
  position: absolute; inset: -20%; z-index: 5;
  opacity: 0.08; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0 0.65  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: drift 9s ease-in-out infinite alternate;
}

.vignette {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 50% 50%,
    transparent 40%,
    oklch(0.10 0.020 55 / 0.55) 85%,
    oklch(0.08 0.020 55 / 0.85) 100%);
}

/* Stärkere Vignette für Campfire */
.vignette--campfire {
  background: radial-gradient(ellipse 80% 90% at 50% 45%,
    transparent 50%,
    oklch(0.10 0.020 55 / 0.45) 90%,
    oklch(0.06 0.020 55 / 0.85) 100%);
}

.ember-aura {
  position: absolute; left: 0; right: 0; bottom: -10%; height: 60%;
  z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 100%,
    oklch(0.72 0.18 55 / 0.28) 0%,
    oklch(0.62 0.16 50 / 0.14) 28%,
    transparent 65%);
  mix-blend-mode: screen;
  animation: ember-breath 6.5s ease-in-out infinite;
}

/* === Sternbilder === */

.constellation { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.35; }

.constellation-art {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 200px; height: 540px; z-index: 4; pointer-events: none;
  opacity: 0; animation: const-fade-in 2.5s ease 1.4s forwards;
}
.constellation-art.left  { left:  calc(50% - 600px); transform: translateY(-50%) rotate(-14deg); }
.constellation-art.right { right: calc(50% - 600px); transform: translateY(-50%) rotate(14deg); }
.constellation-art svg { width: 100%; height: 100%; display: block; overflow: visible; }

.constellation-lock {
  width: min(220px, 28vw); height: min(260px, 32vw);
  margin: 0 auto 28px; pointer-events: none;
  opacity: 0; animation: const-fade-in 2.8s ease 1.4s forwards;
}
.constellation-lock svg { width: 100%; height: 100%; display: block; overflow: visible; }

.constellation-art .line,
.constellation-lock .line {
  stroke: oklch(0.85 0.140 70 / 0.85); stroke-width: 1.6;
  fill: none; stroke-linecap: round;
  filter: drop-shadow(0 0 5px oklch(0.85 0.14 70 / 0.6));
}
.constellation-art .star,
.constellation-lock .star {
  fill: oklch(0.96 0.08 80);
  filter: drop-shadow(0 0 6px oklch(0.85 0.14 70));
}
.constellation-art .star-major,
.constellation-lock .star-major {
  fill: oklch(0.98 0.10 78);
  filter: drop-shadow(0 0 11px oklch(0.85 0.14 70));
}
.constellation-art .twinkle,
.constellation-lock .twinkle {
  animation: star-twinkle 3.4s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
.constellation-art .twinkle.d2,
.constellation-lock .twinkle.d2 { animation-delay: 0.6s; }
.constellation-art .twinkle.d3,
.constellation-lock .twinkle.d3 { animation-delay: 1.2s; }
.constellation-art .twinkle.d4,
.constellation-lock .twinkle.d4 { animation-delay: 1.8s; }
.constellation-art .twinkle.d5,
.constellation-lock .twinkle.d5 { animation-delay: 2.4s; }

/* === Lagerfeuer === */

.campfire {
  position: fixed; left: 50%; bottom: -20px; transform: translateX(-50%);
  width: min(820px, 88vw); height: 360px; z-index: 1; pointer-events: none;
}
.campfire svg { width: 100%; height: 100%; display: block; overflow: visible; }
.campfire .ink        { fill: none; stroke: oklch(0.62 0.090 55 / 0.78); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.campfire .ink-soft   { fill: none; stroke: oklch(0.55 0.080 55 / 0.45); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.campfire .ink-warm   { fill: none; stroke: oklch(0.78 0.150 65 / 0.85); stroke-width: 1.8; stroke-linecap: round; }
.campfire .ink-bright { fill: none; stroke: oklch(0.92 0.160 75 / 0.95); stroke-width: 2.0; stroke-linecap: round; }
.campfire .ember-hatch {
  stroke: oklch(0.82 0.150 65 / 0.55); stroke-width: 1; stroke-linecap: round;
  filter: drop-shadow(0 0 3px oklch(0.78 0.18 55 / 0.7));
}
.campfire .ember-core {
  fill: oklch(0.88 0.160 70 / 0.85);
  filter: drop-shadow(0 0 8px oklch(0.78 0.18 55 / 0.9));
}

.flame { transform-origin: 50% 100%; transform-box: fill-box; animation: flame-sway 3.2s ease-in-out infinite; }
.flame.f2 { animation-duration: 2.6s; animation-delay: -0.4s; }
.flame.f3 { animation-duration: 3.8s; animation-delay: -1.2s; }
.flame.f4 { animation-duration: 2.9s; animation-delay: -0.8s; }

.campfire .pulse    { animation: ember-pulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.campfire .pulse.p2 { animation-delay: -0.7s; animation-duration: 3.1s; }
.campfire .pulse.p3 { animation-delay: -1.4s; animation-duration: 2.7s; }
.campfire .pulse.p4 { animation-delay: -2.0s; animation-duration: 3.4s; }

/* === Treelines === */

.treeline {
  position: fixed; top: 0; bottom: 0;
  width: clamp(280px, 32vw, 520px); z-index: 1; pointer-events: none;
}
.treeline.left  { left: 0; }
.treeline.right { right: 0; transform: scaleX(-1); }
.treeline svg { width: 100%; height: 100%; display: block; overflow: visible; }

.treeline .trunk-fill   { fill: oklch(0.09 0.018 50 / 0.95); }
.treeline .branch-fill  { fill: oklch(0.09 0.018 50 / 0.92); }
.treeline .bark         { fill: none; stroke: oklch(0.26 0.028 55 / 0.40); stroke-width: 1.2; stroke-linecap: round; }
.treeline .crown-back   { fill: oklch(0.12 0.020 60 / 0.78); }
.treeline .crown-mid    { fill: oklch(0.10 0.018 55 / 0.92); }
.treeline .crown-front  { fill: oklch(0.08 0.016 50 / 0.96); }
.treeline .leaf-tuft    { fill: oklch(0.11 0.020 60 / 0.85); }

.tree-sway   { transform-origin: 50% 100%; transform-box: fill-box; animation: tree-sway 11s ease-in-out infinite; }
.tree-sway.s2{ animation-duration: 14s; animation-delay: -4s; }

/* === Layout === */

.page-standalone {
  position: relative; z-index: 10;
  height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  gap: 32px; padding: 32px 48px;
}

.page-scroll {
  position: relative; z-index: 10;
  min-height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 28px 56px 32px;
}

/* === Topbar === */

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--ink-faint);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.topbar--grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 32px;
}
.topbar--grid .account { justify-self: end; }
.topbar .mark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-soft); }
.topbar .glyph {
  width: 14px; height: 14px;
  border: 1px solid var(--ember-trace); transform: rotate(45deg); position: relative;
}
.topbar .glyph::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--ember); opacity: 0.55;
}
.topbar .meta { display: flex; gap: 28px; }
.topbar .meta span { color: var(--ink-ghost); }
.topbar .meta b { color: var(--ink-soft); font-weight: 500; margin-left: 8px; }

.topbar nav { display: flex; justify-content: center; gap: 4px; }
.topbar nav a {
  color: var(--ink-faint); text-decoration: none;
  padding: 10px 22px; letter-spacing: 0.32em;
  border-bottom: 1px solid transparent; position: relative;
  transition: color .25s, border-color .25s;
}
.topbar nav a:hover { color: var(--ink-bright); border-bottom-color: var(--ember-trace); }
.topbar nav a[aria-current="page"] { color: var(--ember-bright); border-bottom-color: var(--ember); }
.topbar nav a[aria-current="page"]::before { content: "\b7"; color: var(--ember); margin-right: 8px; }

.topbar .account {
  display: inline-flex; align-items: center; gap: 18px; color: var(--ink-soft);
}
.topbar .account .who b { color: var(--ink-bright); font-weight: 500; margin-left: 8px; }
.topbar .account .logout {
  color: var(--ink-faint); text-decoration: none;
  padding: 8px 0; letter-spacing: 0.32em;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.topbar .account .logout:hover { color: var(--ink-bright); border-bottom-color: var(--ember-trace); }

/* === Center Stage (Login, Fehler, Logout) === */

.center {
  display: grid; place-items: center; align-content: center; gap: 44px;
}

.heraldry {
  text-align: center; display: grid; gap: 14px; justify-items: center;
  animation: rise 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.heraldry--lg { gap: 26px; animation-duration: 1.4s; }

.world-mark {
  display: inline-flex; align-items: center; gap: 16px;
  color: var(--ink-faint);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.42em; text-transform: uppercase;
}
.world-mark .line {
  width: 56px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-warm), transparent);
}

.wordmark {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 5vw, 72px); line-height: 1.05;
  color: var(--ink-bright); letter-spacing: -0.005em;
  margin: 0; position: relative; text-wrap: balance;
  max-width: min(720px, 86vw);
}
.wordmark--xl {
  font-size: clamp(48px, 7vw, 104px); line-height: 0.95;
  letter-spacing: -0.01em; white-space: nowrap; max-width: none;
}
.wordmark .amp { color: var(--ember); font-style: italic; font-weight: 300; }
.wordmark::after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  transform: translateX(-50%); width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember-trace) 30%, var(--ember-trace) 70%, transparent);
}

.tagline {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 18px; color: var(--ink-soft); margin: 0; letter-spacing: 0.01em;
}

.greeting {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1;
  color: var(--ink-bright); margin: 0; letter-spacing: 0.005em;
}
.greeting .name { font-style: normal; font-weight: 400; color: var(--ember-bright); }

.sub-tagline {
  color: var(--ink-faint); font-family: var(--serif); font-style: italic;
  font-size: 16px; margin: 0; max-width: 56ch;
}

/* === Form Components === */

form.codex, .codex {
  width: min(440px, 90vw);
  display: grid; gap: 22px;
  animation: rise 1.4s cubic-bezier(.2,.7,.2,1) 0.15s both;
}

.error-actions {
  width: min(520px, 92vw); justify-items: center; gap: 18px; margin-top: 8px;
}

.field { display: grid; gap: 8px; position: relative; }
.field label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 10px;
}
.field label::before {
  content: ""; width: 4px; height: 4px;
  background: var(--ember); transform: rotate(45deg); opacity: 0.7;
}
.field input {
  appearance: none; background: transparent; border: 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-bright);
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  padding: 8px 2px 10px;
  transition: border-color .25s ease, color .25s ease;
  caret-color: var(--ember);
}
.field input::placeholder { color: var(--ink-ghost); font-style: italic; }
.field input:focus { outline: none; border-bottom-color: var(--ember); }
.field input:focus + .underglow,
.field input:not(:placeholder-shown) + .underglow { transform: scaleX(1); }

.underglow {
  height: 1px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, var(--ember) 50%, transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

/* === Buttons === */

a.seal, button.seal, .seal {
  margin-top: 4px;
  display: inline-flex; text-decoration: none;
  align-items: center; justify-content: center; gap: 14px;
  padding: 16px 28px;
  background: transparent;
  border: 1px solid var(--ember-trace);
  color: var(--ink-bright);
  font-family: var(--serif); font-size: 18px; font-weight: 500;
  letter-spacing: 0.02em; cursor: pointer;
  position: relative; overflow: hidden; white-space: nowrap;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.seal::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, var(--ember-glow), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.seal::after {
  content: ""; position: absolute; top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, oklch(0.95 0.04 80 / 0.18), transparent);
  transition: left .8s cubic-bezier(.2,.7,.2,1);
}
.seal:hover { border-color: var(--ember); color: var(--ember-bright); }
.seal:hover::before { opacity: 1; }
.seal:hover::after { left: 150%; }

.seal .arrow { width: 18px; height: 1px; background: currentColor; position: relative; }
.seal .arrow::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg); transform-origin: right center;
}

.ghost-link {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-ghost); text-decoration: none;
  background: none; border: none; cursor: pointer;
  padding: 8px 4px;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.ghost-link:hover { color: var(--ink-soft); border-bottom-color: var(--ember-trace); }

/* === Triptychon / Diptychon === */

.main-stage {
  display: grid; grid-template-rows: auto 1fr;
  gap: 32px; padding: 24px 0 0; align-content: start;
}

.triptych {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(440px, 1.5fr) minmax(280px, 1fr);
  gap: 28px; align-items: stretch;
  max-width: 1480px; width: 100%; margin: 0 auto;
  padding: 8px 0 240px;
  animation: rise 1.4s cubic-bezier(.2,.7,.2,1) 0.15s both;
}

/* === Gate (Meisterinterface) === */

.gate {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 18px; padding: 32px 28px 28px;
  background: linear-gradient(180deg,
    oklch(0.20 0.025 60 / 0.45) 0%,
    oklch(0.16 0.020 55 / 0.30) 100%);
  border: 1px solid var(--hairline);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color .35s, transform .35s, background .35s;
}
.gate::before, .gate::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-warm), transparent);
}
.gate::before { top: 0; }
.gate::after  { bottom: 0; }
.gate:hover {
  border-color: var(--ember-trace); transform: translateY(-2px);
  background: linear-gradient(180deg,
    oklch(0.24 0.040 55 / 0.55) 0%,
    oklch(0.22 0.060 55 / 0.40) 100%);
}

/* Gate als Formular-Container (nicht klickbar als Ganzes, enthält interaktive Elemente) */
.gate--form { cursor: default; }

.gate-corner { position: absolute; width: 14px; height: 14px; border: 1px solid var(--ember-trace); }
.gate-corner.tl { top: 8px; left: 8px;     border-right: none; border-bottom: none; }
.gate-corner.tr { top: 8px; right: 8px;    border-left: none;  border-bottom: none; }
.gate-corner.bl { bottom: 8px; left: 8px;  border-right: none; border-top: none; }
.gate-corner.br { bottom: 8px; right: 8px; border-left: none;  border-top: none; }

.gate .icon { display: flex; justify-content: center; padding: 14px 0 4px; }
.gate .icon svg { width: 96px; height: 96px; overflow: visible; }
.gate .icon .line {
  fill: none; stroke: oklch(0.85 0.140 70 / 0.85); stroke-width: 1.2;
  filter: drop-shadow(0 0 4px oklch(0.85 0.14 70 / 0.5));
}
.gate .icon .star      { fill: oklch(0.96 0.08 80); filter: drop-shadow(0 0 5px oklch(0.85 0.14 70)); }
.gate .icon .star-major{ fill: oklch(0.98 0.10 78); filter: drop-shadow(0 0 9px oklch(0.85 0.14 70)); }

.gate-label {
  text-align: center; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-faint);
}
.gate-title {
  text-align: center; font-family: var(--serif); font-weight: 400;
  font-size: 32px; line-height: 1.05; color: var(--ink-bright); margin: 0;
}
.gate-desc {
  text-align: center; font-family: var(--serif); font-style: italic;
  font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 0;
  max-width: 32ch; justify-self: center;
}
.gate-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 8px; padding-top: 14px;
  border-top: 1px solid var(--hairline);
  background: transparent; border-left: none; border-right: none; border-bottom: none;
  color: var(--ember-bright); cursor: pointer;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase;
}
.gate-cta .arrow { width: 22px; height: 1px; background: currentColor; position: relative; }
.gate-cta .arrow::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

.gate-cta--ghost {
  border-top: none; margin-top: 0; padding-top: 0;
  color: var(--ink-ghost); cursor: pointer; background: none; border: none;
  transition: color .25s;
}
.gate-cta--ghost:hover { color: var(--ember-bright); }

.gate-form {
  display: grid; gap: 16px; width: 100%;
  padding-top: 14px; border-top: 1px solid var(--hairline);
}

/* === Charakter-Hub === */

.hub {
  position: relative;
  display: grid; gap: 22px; padding: 32px 32px 28px;
  background: linear-gradient(180deg,
    oklch(0.22 0.030 55 / 0.55) 0%,
    oklch(0.18 0.025 55 / 0.40) 100%);
  border: 1px solid var(--hairline-warm);
}
.hub::before, .hub::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember-trace), transparent);
}
.hub::before { top: 0; }
.hub::after  { bottom: 0; }

.hub-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px;
}
.hub-head .label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-faint);
}
.hub-head .title {
  font-family: var(--serif); font-weight: 400;
  font-size: 30px; line-height: 1.1; color: var(--ink-bright); margin: 4px 0 0;
}
.hub-head .all-link {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none;
  padding: 6px 4px; border-bottom: 1px solid var(--hairline-warm);
  transition: color .25s, border-color .25s;
  display: inline-flex; gap: 10px; align-items: center;
}
.hub-head .all-link:hover { color: var(--ink-bright); border-bottom-color: var(--ember); }
.hub-head .all-link .arrow {
  width: 18px; height: 1px; background: currentColor; position: relative;
}
.hub-head .all-link .arrow::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

.char-list { display: grid; grid-template-columns: 1fr; gap: 12px; }

.char-card {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 18px; align-items: center;
  padding: 18px; background: oklch(0.16 0.020 55 / 0.45);
  border: 1px solid var(--hairline);
  overflow: hidden;
  transition: border-color .35s, background .35s, transform .35s;
}
.char-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .5s ease;
}
.char-card:hover {
  border-color: var(--ember-trace); background: oklch(0.20 0.040 55 / 0.55);
  transform: translateY(-2px);
}
.char-card:hover::after { transform: scaleX(1); }

.char-sigil {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.12 0.020 55 / 0.7); border: 1px solid var(--hairline-warm);
  position: relative; flex-shrink: 0;
}
.char-sigil::before, .char-sigil::after {
  content: ""; position: absolute; width: 8px; height: 8px;
  border: 1px solid var(--ember-trace);
}
.char-sigil::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.char-sigil::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.sigil-line       { fill: none; stroke: oklch(0.85 0.140 70 / 0.7); stroke-width: 1; stroke-linecap: round; }
.sigil-star       { fill: oklch(0.96 0.08 80); filter: drop-shadow(0 0 4px oklch(0.85 0.14 70)); }
.sigil-star-major { fill: oklch(0.98 0.10 78); filter: drop-shadow(0 0 7px oklch(0.85 0.14 70)); }

.char-meta {
  display: grid; gap: 2px; align-content: center; min-width: 0;
  text-decoration: none; color: inherit;
}
.char-name {
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; line-height: 1.05; color: var(--ink-bright);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.char-class {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.char-last {
  margin-top: 4px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-ghost);
}

/* Mikro-Buttons am rechten Rand */
.char-actions {
  display: flex; gap: 6px; align-items: center;
  opacity: 0.3; transition: opacity .3s;
}
.char-card:hover .char-actions { opacity: 1; }

.char-action {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-faint); font-size: 13px;
  cursor: pointer; text-decoration: none;
  transition: border-color .25s, color .25s;
}
.char-action:hover { border-color: var(--ember-trace); color: var(--ink-bright); }
.char-action--danger:hover { border-color: var(--danger); color: var(--danger-bright); }

.empty-state {
  color: var(--ink-ghost); font-family: var(--serif); font-style: italic;
  font-size: 15px; text-align: center; padding: 24px 0;
}

/* === Footer === */

.footer-theme {
  position: relative; z-index: 11;
  display: grid; place-items: center; padding-top: 24px; pointer-events: none;
}
.footer-theme--spread {
  display: flex; justify-content: space-between; align-items: end;
  color: var(--ink-ghost); font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase;
}
.inscription {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--ink-ghost); letter-spacing: 0.04em;
}
.footer-theme--spread .inscription {
  font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink-faint);
}
.footer-theme--spread .coords { display: flex; gap: 24px; }

/* === Toast (Compat mit base.js) === */

.save-toast {
  position: fixed; bottom: -60px; left: 50%; transform: translateX(-50%);
  padding: 12px 28px; z-index: 999;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-bright);
  background: oklch(0.20 0.040 55 / 0.92);
  border: 1px solid var(--ember-trace);
  backdrop-filter: blur(8px);
  transition: bottom .4s cubic-bezier(.2,.7,.2,1);
}
.save-toast.show { bottom: 24px; }
.save-toast.error { border-color: var(--danger); }

/* === App-Dialog (Ersatz für prompt/confirm, base.js appDialog) === */

.app-dialog-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.10 0.015 55 / 0.60);
  backdrop-filter: blur(4px);
}
.app-dialog {
  width: min(420px, calc(100vw - 48px));
  background: var(--bg-raised);
  border: 1px solid var(--hairline-warm);
  border-radius: 10px;
  padding: 22px 24px;
  box-shadow: 0 18px 48px oklch(0.08 0.010 55 / 0.55);
  animation: rise .18s cubic-bezier(.2,.7,.2,1);
}
.app-dialog-titel {
  font-family: var(--serif); font-weight: 500; font-size: 22px;
  color: var(--ink-bright); margin: 0 0 8px;
}
.app-dialog-text { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.app-dialog-input {
  width: 100%;
  font-family: var(--sans); font-size: 14px;
  color: var(--ink-bright); background: var(--bg-base);
  border: 1px solid var(--hairline); border-radius: 6px;
  padding: 8px 10px; margin: 0 0 16px;
  outline: none; caret-color: var(--ember);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-dialog-input:focus { border-color: var(--ember-trace); box-shadow: 0 0 0 2px var(--ember-glow); }
.app-dialog-buttons { display: flex; justify-content: flex-end; gap: 10px; }

/* === Animationen === */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes drift {
  from { transform: translate(0,0); }
  to   { transform: translate(-6px,-4px); }
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}
@keyframes const-fade-in { to { opacity: 1; } }
@keyframes ember-breath {
  0%, 100% { opacity: 0.85; transform: translateY(0); }
  50%      { opacity: 1.00; transform: translateY(-6px); }
}
@keyframes flame-sway {
  0%, 100% { transform: scaleY(1) translateX(0); opacity: 0.85; }
  25%      { transform: scaleY(1.08) translateX(-1px); opacity: 1; }
  50%      { transform: scaleY(0.94) translateX(1.5px); opacity: 0.75; }
  75%      { transform: scaleY(1.05) translateX(-0.5px); opacity: 0.95; }
}
@keyframes ember-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1.00; }
}
@keyframes tree-sway {
  0%, 100% { transform: rotate(-0.25deg); }
  50%      { transform: rotate(0.25deg); }
}

/* === Responsive === */

@media (max-width: 1100px) {
  .constellation-art { display: none; }
}

@media (max-width: 1024px) {
  .page-scroll { padding: 24px 32px 32px; }
  .triptych { grid-template-columns: 1fr; gap: 24px; padding-bottom: 220px; }
  .hub { order: -1; }
}

@media (max-width: 720px) {
  .page-standalone { padding: 20px 22px; }
  .page-scroll { padding: 20px 22px 24px; }
  .topbar nav { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .topbar .account .who { display: none; }
  .topbar .meta { display: none; }
  .footer-theme--spread { display: none; }
  .greeting { font-size: 26px; }
  .gate-title { font-size: 24px; }
  .wordmark { font-size: clamp(28px, 8vw, 44px); }
  .campfire { height: 240px; width: min(640px, 92vw); }
  .treeline { width: clamp(140px, 32vw, 220px); }
  .constellation-lock { width: 60vw; height: 70vw; margin-bottom: 20px; }
  .char-list { grid-template-columns: 1fr; }
}

/* === App-Komponenten (Editor- & Lobby-Seiten) === */

.app-page {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: 96px;
}

.app-page h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px;
  color: var(--ink-bright);
  letter-spacing: 0.005em;
  margin: 0 0 6px;
}

.app-page h1 .name { color: var(--ember-bright); }

.app-page h2 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-page h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hairline-warm), transparent);
}

.app-page h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 10px;
}

.app-page p { color: var(--ink-soft); line-height: 1.55; }

.panel {
  background: var(--bg-veil);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 0 0 22px;
  backdrop-filter: blur(6px);
}

.panel--accent { border-color: var(--hairline-warm); }

.app-page input[type="text"],
.app-page input[type="number"],
.app-page input[type="password"],
.app-page select,
.app-page textarea {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-bright);
  background: var(--bg-base);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  caret-color: var(--ember);
}

.app-page input:focus,
.app-page select:focus,
.app-page textarea:focus {
  border-color: var(--ember-trace);
  box-shadow: 0 0 0 2px var(--ember-glow);
}

.app-page input[readonly] { color: var(--ink-soft); background: transparent; }

.app-page select { cursor: pointer; }
.app-page select optgroup { background: var(--bg-base); color: var(--ink-faint); }
.app-page select option { background: var(--bg-base); color: var(--ink); }

.app-page label { color: var(--ink-soft); font-size: 13px; }

.app-page button, .btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline-warm);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.app-page button:hover, .btn:hover {
  color: var(--ember-bright);
  border-color: var(--ember);
  background: var(--ember-glow);
}

.app-page button:active, .btn:active { transform: translateY(1px); }

.btn--primary {
  color: var(--ember-bright);
  border-color: var(--ember);
  background: var(--ember-glow);
}

.btn--danger { border-color: var(--danger); color: var(--danger-bright); }
.btn--danger:hover { background: oklch(0.65 0.20 25 / 0.15); color: var(--danger-bright); border-color: var(--danger-bright); }

.app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.app-table th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline-warm);
}

.app-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}

.app-table tfoot td { border-bottom: none; color: var(--ink-soft); }

.app-table input { width: 100%; }

.remove-x {
  color: var(--ink-ghost);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.remove-x:hover { color: var(--danger-bright); }

.log-entry {
  padding: 8px 12px;
  margin-bottom: 6px;
  background: var(--bg-base);
  border-left: 2px solid var(--ember-trace);
  border-radius: 0 6px 6px 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.log-entry b, .log-entry strong { color: var(--ink-bright); font-weight: 600; }
.log-entry .result { color: var(--ember-bright); font-size: 1.15em; font-weight: 600; }

.ini-row {
  padding: 6px 12px;
  margin: 2px 0;
  border-radius: 6px;
  color: var(--ink-soft);
}

.ini-row--active {
  background: var(--ember-glow);
  border-left: 2px solid var(--ember);
  color: var(--ink-bright);
  font-weight: 600;
}

/* === Statbar (Editor-Footer) === */

.statbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 10px 56px;
  background: color-mix(in oklab, var(--bg-deep) 88%, transparent);
  border-top: 1px solid var(--hairline-warm);
  backdrop-filter: blur(10px);
  font-size: 13px;
  color: var(--ink-soft);
}

.statbar input { max-width: 90px; }

.statbar .stat-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.statbar .popup {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  background: var(--bg-raised);
  border: 1px solid var(--hairline-warm);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.45);
}

.statbar .stat-group:hover .popup,
.statbar .stat-group:focus-within .popup { display: block; }

.statbar .popup .popup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.statbar .popup .popup-row:last-child { margin-bottom: 0; }
.statbar .popup button { padding: 5px 10px; }

.statbar .money-wrap { justify-self: end; }

@media (max-width: 900px) {
  .statbar { grid-template-columns: 1fr; gap: 10px; padding: 10px 20px; }
  .statbar .money-wrap { justify-self: start; flex-wrap: wrap; }
  .app-page { padding-bottom: 180px; }
}

/* === Editor-Kompatibilitätsschicht (Klassen aus style.css, Tokens aus dem Ember-Theme) === */

.app-page {
  --bg-card: var(--bg-veil);
  --bg-input: var(--bg-base);
  --bg-hover: var(--bg-raised);
  --border: var(--hairline);
  --border-light: var(--hairline-warm);
  --accent: var(--ember);
  --accent-hover: var(--ember-bright);
  --accent-dim: var(--ember-glow);
  --error: var(--danger);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--ink-faint);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --radius-sm: 4px;
  --radius-md: 8px;
}

.app-page .form-block, .app-page .aspect-box, .app-page .kampfstil-item,
.app-page .slot-card, .app-page .player-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--space-md);
  transition: border-color 0.15s ease;
}
.app-page .form-block:hover, .app-page .aspect-box:hover { border-color: var(--border-light); }

.app-page .form-group { margin-bottom: var(--space-md); }
.app-page .form-group label { display: block; margin-bottom: var(--space-xs); }
.app-page .form-group input { width: 100%; }
.app-page .form-group-inline { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.app-page .form-group-inline input { width: auto; flex-grow: 1; }
.app-page .form-group-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); }
.app-page .form-group-header label { margin-bottom: 0; }

.app-page .three-column-container { display: flex; gap: var(--space-md); margin-bottom: var(--space-md); }
.app-page .two-column-container { display: flex; gap: var(--space-md); }
.app-page .two-column-container .column { flex: 1; }
.app-page .column {
  flex: 1;
  border: 1px solid var(--border);
  padding: var(--space-md);
  border-radius: 10px;
  background: var(--bg-card);
}
.app-page .column h3, .app-page .column h4 { text-align: center; }
.app-page .column h4 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.app-page .side-by-side-container { display: flex; gap: var(--space-lg); align-items: flex-start; margin-bottom: var(--space-md); }
.app-page .side-by-side-left, .app-page .side-by-side-right { flex: 1; }
.app-page .two-thirds-one-third-container { display: flex; gap: var(--space-lg); align-items: flex-start; }
.app-page .left-section { flex: 3; }
.app-page .right-section { flex: 1; }
.app-page .name-fields-row { display: flex; gap: var(--space-lg); }
.app-page .name-fields-row .form-group { flex: 1; }
.app-page .side-by-side-inputs { display: flex; gap: var(--space-lg); }
.app-page .side-by-side-inputs .form-group { display: flex; align-items: center; gap: var(--space-sm); }
.app-page .side-by-side-inputs .form-group label { margin-bottom: 0; }

.app-page .aspect-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); }
.app-page .aspect-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); }
.app-page .aspect-header h1 { margin: 0; font-size: 1.15em; }
.app-page .aspect-header input[type="number"] { width: 7ch; }
.app-page .merkmal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xs); }
.app-page .merkmal-header h2 { margin: 0; font-size: 0.9em; font-family: var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); display: block; }
.app-page .merkmal-header h2::after { display: none; }
.app-page .merkmal-header output { font-size: 0.9em; color: var(--accent-hover); font-family: var(--mono); }

.app-page .attribute-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.app-page .attribute-grid .form-group { display: flex; align-items: center; gap: var(--space-sm); }
.app-page .attribute-grid .form-group label { width: 140px; text-align: right; margin-bottom: 0; white-space: nowrap; display: inline-block; }

.app-page .input-with-result { display: flex; gap: var(--space-xs); }
.app-page .input-with-result input { width: 80px; }
.app-page .final-value {
  width: 60px;
  text-align: center;
  background: var(--accent-dim);
  border: 1px solid var(--border);
  color: var(--accent-hover);
  padding: var(--space-sm);
  border-radius: 6px;
  font-family: var(--mono);
  font-weight: 600;
}
.app-page .ak-rk-group { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.app-page .ak-rk-group label { flex-shrink: 0; width: 80px; text-align: right; }
.app-page .ak-rk-group .small-input { width: 70px; }
.app-page .ak-rk-group .group-label { font-weight: 600; min-width: 25px; }
.app-page .ak-rk-group .final-value { width: 70px; }

.app-page .add-btn { cursor: pointer; color: var(--accent-hover); font-weight: 500; transition: color 0.15s; }
.app-page .add-btn:hover { color: var(--ember); }
.app-page .remove-btn { cursor: pointer; color: var(--danger); margin-left: var(--space-xs); transition: color 0.15s; }
.app-page .remove-btn:hover { color: var(--danger-bright); }
.app-page .dropdown-container { margin-bottom: var(--space-sm); display: flex; align-items: center; gap: 6px; }
.app-page .dropdown-container select { min-width: 0; }
.app-page .dropdown-container .kampf-merkmal { flex: 1; }

.app-page .image-placeholder {
  width: 50%;
  padding-top: 50%;
  background: var(--bg-card);
  border: 1px dashed var(--border-light);
  position: relative;
  margin: 0 auto;
  border-radius: 10px;
}
.app-page .image-placeholder::before {
  content: "bildfunktion folgt";
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--ink-ghost);
}

.app-page input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; margin: var(--space-xs) 0; border: none; padding: 0; box-shadow: none; }
.app-page input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: var(--track-color, var(--hairline)); border-radius: 3px; }
.app-page input[type=range]::-moz-range-track { width: 100%; height: 6px; cursor: pointer; background: var(--track-color, var(--hairline)); border-radius: 3px; }
.app-page input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: var(--ember); cursor: pointer; margin-top: -5px; }
.app-page input[type=range]::-moz-range-thumb { height: 16px; width: 16px; border-radius: 50%; background: var(--ember); border: none; cursor: pointer; }

.app-page .tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--hairline-warm);
}
.app-page .tab-btn {
  border: none;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--ink-faint);
  padding: 10px 18px;
}
.app-page .tab-btn:hover { color: var(--ink-bright); background: var(--ember-glow); }
.app-page .tab-btn.active { color: var(--ember-bright); box-shadow: inset 0 -2px 0 var(--ember); background: var(--ember-glow); }

@media (max-width: 1000px) {
  .app-page .attribute-grid { grid-template-columns: repeat(2, 1fr); }
  .app-page .three-column-container,
  .app-page .two-column-container,
  .app-page .side-by-side-container,
  .app-page .two-thirds-one-third-container,
  .app-page .name-fields-row,
  .app-page .side-by-side-inputs { flex-direction: column; }
  .app-page .column { width: 100%; }
  .app-page .aspect-container { grid-template-columns: 1fr; }
}

.statbar .stat-field {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 70px;
}

.statbar .stat-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  white-space: nowrap;
}

.statbar .stat-value {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ember-bright);
}

.statbar .stat-value.stat-negative { color: var(--danger-bright); }

.statbar .stat-group { cursor: default; }

.statbar .popup-hint {
  font-size: 11px;
  color: var(--ink-ghost);
  margin-top: 8px;
}

.statbar .stat-input {
  width: 64px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ember-bright);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  text-align: center;
  padding: 1px 4px;
}

.statbar .stat-input:hover { border-color: var(--hairline-warm); }
.statbar .stat-input:focus { border-color: var(--ember-trace); box-shadow: 0 0 0 2px var(--ember-glow); outline: none; }

.statbar .popup--right { left: auto; right: 0; }

.geld-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 2px 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
}

.geld-row span:last-child { color: var(--ember-bright); }
.geld-row--leer { color: var(--ink-ghost); }
.geld-row--leer span:last-child { color: var(--ink-ghost); }

.app-page .equip-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  text-align: right;
  min-height: 14px;
}

/* === UI-Feinschliff: Fokus, Aktionen, Sprungnavigation === */

.app-page button:focus-visible,
.btn:focus-visible,
.app-page .tab-btn:focus-visible,
.app-page select:focus-visible,
.app-page input[type="checkbox"]:focus-visible,
.app-page input[type="range"]:focus-visible,
.char-action:focus-visible,
.gate-cta:focus-visible,
.ghost-link:focus-visible {
  outline: 2px solid var(--ember-trace);
  outline-offset: 2px;
}

.topbar nav a:focus-visible,
.topbar .account .logout:focus-visible,
.hub-head .all-link:focus-visible,
.char-meta:focus-visible {
  outline: 2px solid var(--ember-trace);
  outline-offset: 2px;
  border-radius: 4px;
}

.gate:focus-visible,
.seal:focus-visible {
  outline: 2px solid var(--ember-trace);
  outline-offset: 3px;
}

.char-card:focus-within .char-actions { opacity: 1; }

.editor-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 1100px) {
  .table-scroll { overflow-x: auto; padding-bottom: 240px; margin-bottom: -240px; }
  .table-scroll .app-table { min-width: 960px; }
}

.app-page .jump-nav {
  position: sticky;
  top: 12px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 20px;
  padding: 6px 8px;
  background: color-mix(in oklab, var(--bg-deep) 85%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.app-page .jump-nav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.app-page .jump-nav a:hover,
.app-page .jump-nav a:focus-visible,
.app-page .jump-nav a[aria-current="page"] { color: var(--ember-bright); background: var(--ember-glow); }
.app-page .jump-nav .jump-sep { width: 1px; align-self: stretch; background: var(--hairline); margin: 0 6px; }

.app-page .anchor-block { scroll-margin-top: 76px; }

.app-page .reiter-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.app-page .reiter-legende .legende-titel {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}

.app-page .reiter-legende b { color: var(--ink-soft); font-weight: 500; }

.app-page .merkmal-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.app-page .mod-badge {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-ghost);
  min-width: 26px;
  text-align: right;
}

.app-page .merkmal-header output:empty::before {
  content: "\2013";
  color: var(--ink-ghost);
}

#kampfstile-container { display: grid; gap: 16px; }

/* === Wiki === */

.wiki-nav {
  position: sticky;
  top: 12px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 24px;
  padding: 6px 8px;
  background: color-mix(in oklab, var(--bg-deep) 85%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.wiki-nav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.wiki-nav a:hover,
.wiki-nav a:focus-visible { color: var(--ember-bright); background: var(--ember-glow); }
.wiki-nav a.active { color: var(--ember-bright); background: var(--ember-glow); }

.wiki-breadcrumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-ghost);
  margin: 0 0 14px;
}

.wiki-breadcrumb a { color: var(--ink-faint); text-decoration: none; transition: color 0.15s ease; }
.wiki-breadcrumb a:hover { color: var(--ember-bright); }
.wiki-breadcrumb span { margin: 0 4px; }

.wiki-lead { max-width: 70ch; margin: 0 0 26px; }

.wiki-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.wiki-section { margin-bottom: 30px; }

a.wiki-card {
  display: block;
  background: var(--bg-veil);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 18px 20px;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: border-color 0.15s ease, background 0.15s ease;
}

a.wiki-card:hover,
a.wiki-card:focus-visible {
  border-color: var(--ember-trace);
  background: color-mix(in oklab, var(--bg-veil) 85%, var(--ember-glow));
  outline: none;
}

a.wiki-card p { margin: 0; font-size: 13px; }

/* --- Artikel-Symbole (Wappen aus Front-Matter 'symbol') --- */
.wiki-symbol--glyph {
  font-family: var(--serif);
  color: var(--ember-bright);
  line-height: 1;
}

.wiki-symbol--tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: color-mix(in oklab, var(--ember-bright) 75%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px 9px;
  line-height: 1.5;
  white-space: nowrap;
}

/* Auf den Übersichtskarten: dezente Zeile über dem Titel */
.wiki-symbol--card { display: inline-block; margin-bottom: 6px; }
.wiki-symbol--card.wiki-symbol--glyph { font-size: 20px; }

/* Auf der Detailseite: neben dem Titel, an der Grundlinie ausgerichtet */
.wiki-symbol--titel { vertical-align: middle; margin-left: 6px; }
.wiki-symbol--titel.wiki-symbol--glyph { font-size: 0.7em; }

.wiki-count {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--ember-bright);
  margin: 6px 0 !important;
}

.wiki-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.wiki-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ember-bright);
  background: var(--ember-glow);
  border: 1px solid var(--hairline-warm);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.wiki-tag--magie {
  color: oklch(0.78 0.10 300);
  background: oklch(0.60 0.14 300 / 0.14);
  border-color: oklch(0.70 0.12 300 / 0.30);
}

.wiki-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.wiki-panel-head h3 { margin-bottom: 4px; }
.wiki-panel-head .wiki-tags { margin-top: 0; }

.wiki-panel-compact { margin-bottom: 0; }
.wiki-panel--magie { border-left: 2px solid oklch(0.70 0.12 300 / 0.45); }

.wiki-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0 0 12px;
}

.wiki-desc { margin: 0; font-size: 13px; }

.wiki-key {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-ghost);
  white-space: nowrap;
}

.wiki-meta { display: flex; flex-wrap: wrap; gap: 14px 32px; }

.wiki-meta-key {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}

.wiki-meta-value { color: var(--ink-bright); font-weight: 500; }

.wiki-statlist { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.wiki-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 180px;
}

.wiki-stat-name { color: var(--ink-soft); font-size: 13px; }

.wiki-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
}

.wiki-badge--high { color: var(--ember-bright); background: var(--ember-glow); }
.wiki-badge--mid  { color: var(--ink); background: var(--hairline); }
.wiki-badge--low  { color: var(--ink-faint); background: var(--bg-base); }
.wiki-badge--zero { color: var(--ink-ghost); background: transparent; }

.wiki-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.wiki-chip {
  padding: 5px 12px;
  background: var(--bg-base);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
}

.wiki-chip-key {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-ghost);
  margin-left: 4px;
}

.wiki-chip-value {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ember-bright);
  margin-left: 6px;
}

.wiki-scroll { overflow-x: auto; }

.wiki-matrix th,
.wiki-matrix td { text-align: center; white-space: nowrap; }

.wiki-matrix tbody th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--hairline);
}

.wiki-matrix td { font-family: var(--mono); font-size: 12px; }
.wiki-matrix td.val-high { color: var(--ember-bright); font-weight: 600; }
.wiki-matrix td.val-mid  { color: var(--ink-soft); }
.wiki-matrix td.val-low  { color: var(--ink-ghost); }

.wiki-formel {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg-deep);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ember-bright);
  overflow-x: auto;
}

.wiki-param-block { margin-top: 12px; }

.wiki-param-titel {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.wiki-cols { display: flex; flex-wrap: wrap; gap: 16px; }
.wiki-cols .panel { flex: 1; min-width: 250px; margin-bottom: 0; }

.wiki-listenzeile {
  padding: 5px 0;
  color: var(--ink-soft);
  font-size: 14px;
  border-bottom: 1px solid var(--hairline);
}

.wiki-listenzeile:last-child { border-bottom: none; }

.wiki-capitalize { text-transform: capitalize; }

/* Artikel-Fließtext (gerendertes Markdown aus content/) */

.wiki-prose { max-width: 76ch; }

.wiki-prose h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-bright);
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline-warm);
}

.wiki-prose h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-bright);
  margin: 20px 0 8px;
}

.wiki-prose p { margin: 0 0 12px; color: var(--ink-soft); line-height: 1.65; }

.wiki-prose ul,
.wiki-prose ol { margin: 0 0 12px; padding-left: 22px; color: var(--ink-soft); line-height: 1.65; }
.wiki-prose li { margin-bottom: 4px; }

.wiki-prose a { color: var(--ember-bright); text-decoration: none; }
.wiki-prose a:hover { text-decoration: underline; }

.wiki-prose table {
  display: block;              /* Tabellen scrollen selbst (wie .wiki-scroll) */
  overflow-x: auto;
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  font-size: 13px;
}

.wiki-prose th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 6px 12px;
  border-bottom: 1px solid var(--hairline);
}

.wiki-prose td {
  padding: 6px 12px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
}

/* In-World-Zitat: Zierstrich + Serifen-Kursive in Ember */
.wiki-prose blockquote,
.wiki-zitat {
  margin: 16px 0;
  padding: 10px 18px;
  border-left: 2px solid var(--ember-trace);
  background: color-mix(in oklab, var(--ember-glow) 40%, transparent);
  border-radius: 0 8px 8px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
}

.wiki-prose blockquote p { margin: 0; color: inherit; }

.wiki-zitat { margin: 12px 0 0; font-size: 13px; }

/* Kompakte Variante für Fluff in Karten (Materialien) */
.wiki-prose--kompakt { margin-top: 10px; font-size: 13px; }
.wiki-prose--kompakt p { margin-bottom: 8px; font-size: 13px; }

.wiki-kategorie-titel {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 18px 0 12px;
}

/* Rüstkammer: Wert/Gewicht/Haltbarkeit-Zeile */
.wiki-katalog-werte {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 10px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.wiki-katalog-werte strong { color: var(--ember-bright); font-weight: 600; }

/* Seltenheits-Badges (Rüstkammer) */
.wiki-badge--gewoehnlich { color: var(--ink-faint); background: var(--bg-base); }
.wiki-badge--selten { color: oklch(0.78 0.10 250); background: oklch(0.60 0.12 250 / 0.14); }
.wiki-badge--legendaer { color: var(--ember-bright); background: var(--ember-glow); }
.wiki-badge--einzigartig {
  color: oklch(0.78 0.10 300);
  background: oklch(0.60 0.14 300 / 0.14);
  border: 1px solid oklch(0.70 0.12 300 / 0.30);
}

/* === Rüstkammer-Umbau: Kategoriesymbole, Zeilenliste, Detailseite === */

.wiki-symbol {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ink-faint);
}

.wiki-symbol--gross {
  width: 30px;
  height: 30px;
  color: var(--ember-bright);
}

.wiki-katalog-liste {
  display: flex;
  flex-direction: column;
  background: var(--bg-veil);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.wiki-katalog-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
}

.wiki-katalog-row:last-child { border-bottom: none; }

.wiki-katalog-row:hover {
  background: color-mix(in oklab, var(--ember-glow) 45%, transparent);
}

.wiki-katalog-row:hover .wiki-symbol,
.wiki-katalog-row:hover .wiki-katalog-name { color: var(--ember-bright); }

.wiki-katalog-row--magie { box-shadow: inset 2px 0 0 oklch(0.70 0.12 300 / 0.45); }

.wiki-katalog-text {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wiki-katalog-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-bright);
}

.wiki-katalog-kurz {
  font-size: 12.5px;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60ch;
}

.wiki-katalog-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: none;
}

.wiki-katalog-wert {
  flex: none;
  min-width: 90px;
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ember-bright);
}

.wiki-detail-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.wiki-detail-kopf h1 { margin: 0; }

.wiki-zitat--detail { margin: 0 0 22px; font-size: 15px; }

/* === Ende Rüstkammer-Umbau === */

/* Geheimwissen-Warnbox (details/summary): Entity-Spoiler und
   intern-Detailseiten. Zugeklappt steht nur die Warnung + der Knopf
   „Geheimes Wissen anzeigen"; der Inhalt erscheint erst nach dem Klick.
   Markup: _spoilerbox() in modules/wiki.py bzw. Makro geheimwissen
   (wiki/partials/_geheim.html) — synchron halten. */
.wiki-spoiler {
  margin: 22px 0 6px;
  background: color-mix(in oklab, var(--bg-veil) 70%, var(--ember-glow));
  border: 1px dashed var(--hairline-warm);
  border-left: 3px solid var(--danger);
  border-radius: 10px;
}

.wiki-spoiler-warnung {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.wiki-spoiler-warnung::-webkit-details-marker { display: none; }

.wiki-spoiler-titel {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--danger-bright);
}

.wiki-spoiler-hinweis {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
}

.wiki-spoiler-knopf {
  margin-left: auto;
  padding: 4px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--ember-bright);
  border: 1px solid var(--ember-trace);
  border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.wiki-spoiler-warnung:hover .wiki-spoiler-knopf {
  color: var(--ink-bright);
  border-color: var(--ember);
}

.wiki-spoiler[open] > .wiki-spoiler-warnung { border-bottom: 1px dashed var(--hairline-warm); }
.wiki-spoiler[open] .wiki-spoiler-knopf { display: none; }

.wiki-spoiler-inhalt { padding: 14px 18px 16px; }
.wiki-spoiler-inhalt > :last-child { margin-bottom: 0; }

/* intern-Detailseiten (Artikel/Bücher): Warnbox als Interstitial —
   etwas mehr Bühne, gleiche Mechanik. */
.wiki-spoiler--seite { margin: 30px 0; }
.wiki-spoiler--seite > .wiki-spoiler-warnung { padding: 22px 24px; }
.wiki-spoiler--seite .wiki-spoiler-titel { font-size: 12px; }
.wiki-spoiler--seite .wiki-spoiler-inhalt { padding: 18px 24px 22px; }

/* Suchtreffer aus intern-Quellen: Platzhalter statt Inhalts-Snippet */
.wiki-suchtreffer-geheim {
  color: var(--danger-bright);
  font-style: italic;
}

/* Systemseiten (Magie/Karma/Kampf): Abschnittstitel, eingebettete Artikel */
.wiki-systemteil {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-bright);
  margin: 34px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline-warm);
}

.wiki-abschnitt { margin-bottom: 26px; }
.wiki-abschnitt h2 .wiki-link { font-family: var(--sans); font-size: 12px; margin-left: 8px; }

.wiki-systemlinks { margin: -14px 0 28px; }
a.wiki-chip { text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; }
a.wiki-chip:hover,
a.wiki-chip:focus-visible { border-color: var(--ember-trace); color: var(--ember-bright); }

.wiki-formelkasten-eintrag { margin-bottom: 18px; }
.wiki-formelkasten-eintrag:last-child { margin-bottom: 0; }
.wiki-formelkasten-eintrag .wiki-formel { margin: 8px 0 10px; }

/* MathML-Formeldarstellung (server-gerendert via latex2mathml) */
.wiki-formel--math {
  font-family: var(--serif);
  font-size: 17px;
}
.wiki-formel--math math {
  display: block;
  text-align: center;
  color: var(--ember-bright);
}
.wiki-formel-roh { margin-top: 8px; }
.wiki-formel-roh > summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  list-style: none;
}
.wiki-formel-roh > summary::-webkit-details-marker { display: none; }
.wiki-formel-roh > summary::before { content: "▸ "; }
.wiki-formel-roh[open] > summary::before { content: "▾ "; }
.wiki-formel-roh .wiki-formel { margin-top: 6px; }

/* Einklappbare Blöcke: Matrizen am Seitenende, Karma-Aspekt-Gruppen */
.wiki-details {
  margin: 0 0 14px;
  background: var(--bg-veil);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

.wiki-details summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 13px 18px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-bright);
  transition: color 0.15s ease;
}

.wiki-details summary::-webkit-details-marker { display: none; }

.wiki-details summary::before {
  content: '\25B8';
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ember-bright);
  transition: transform 0.15s ease;
}

.wiki-details[open] summary::before { transform: rotate(90deg); }
.wiki-details summary:hover { color: var(--ember-bright); }

.wiki-details > :not(summary) { margin-left: 18px; margin-right: 18px; }
.wiki-details > :last-child:not(summary) { margin-bottom: 16px; }

.wiki-details-meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-ghost);
}

/* Vertikale Spaltenköpfe für die großen Matrizen (35/62/122 Spalten) */
.wiki-matrix--rotiert thead th { vertical-align: bottom; }
.wiki-matrix--rotiert thead th span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  max-height: 240px;
}

/* Zaubertyp-Badges (Ember-gedeckt): Sonne warm, Mond kühl, Stern violett */
.wiki-badge--sonne { color: oklch(0.80 0.09 80); background: oklch(0.62 0.10 80 / 0.14); }
.wiki-badge--mond  { color: oklch(0.80 0.05 250); background: oklch(0.62 0.07 250 / 0.14); }
.wiki-badge--stern { color: oklch(0.78 0.10 300); background: oklch(0.60 0.14 300 / 0.14); }

.wiki-merkmal-tabelle .wiki-badge { margin-right: 4px; }

@media (max-width: 768px) {
  .wiki-grid { grid-template-columns: 1fr; }
  .wiki-cols { flex-direction: column; }
}

/* Dezente Wiki-Verweise aus den Editor-Seiten */
.wiki-link {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.wiki-link::after { content: ' \2197'; opacity: 0.7; }
.wiki-link:hover,
.wiki-link:focus-visible { color: var(--ember-bright); }
.tab-wiki { text-align: right; margin: 2px 0 6px; }

/* === Admin === */
/* Nutzerverwaltung (/admin): Tabelle, Einmal-Passwort-Panel, Badges */

.admin-page { max-width: 1100px; margin: 0 auto; }

.admin-quelle { font-size: 13px; color: var(--ink-faint); }
.admin-quelle code,
.admin-hint code,
.admin-pass-wert {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: oklch(0.18 0.02 55 / 0.6);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 6px;
}

.admin-pass-panel {
  margin: 14px 0 20px;
  padding: 14px 18px;
  border: 1px solid var(--ember);
  border-radius: 8px;
  background: var(--ember-glow);
}
.admin-pass-titel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-bright);
  margin-bottom: 8px;
}
.admin-pass-wert {
  display: inline-block;
  font-size: 15px;
  padding: 6px 12px;
  margin-right: 10px;
  user-select: all;
}
.admin-pass-hinweis { font-size: 12px; color: var(--ink-soft); margin: 8px 0 0; }

.admin-table td { vertical-align: middle; }
.admin-table td b { color: var(--ink); font-weight: 600; }

.admin-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--hairline-warm);
  color: var(--ink-soft);
  white-space: nowrap;
}
.admin-badge--aus { border-color: var(--danger); color: var(--danger-bright); }

.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-actions .btn { padding: 4px 10px; font-size: 11px; }

.admin-hint { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }

.admin-form { margin-top: 8px; }
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
  margin-bottom: 14px;
}
.admin-form-grid label { display: flex; flex-direction: column; gap: 4px; }

/* === Wiki-Suche === */
/* Suchfeld in der Wiki-Nav + Trefferliste auf /wiki/suche */

.wiki-suchform {
  margin-left: auto;
  flex: 0 1 230px;
  min-width: 140px;
  display: flex;
  align-items: center;
}

.wiki-suchform input[type="search"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--bg-base);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 6px 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.wiki-suchform input[type="search"]::placeholder { color: var(--ink-ghost); }

.wiki-suchform input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--ember-trace);
  background: color-mix(in oklab, var(--bg-base) 80%, var(--ember-glow));
}

.wiki-suchgruppe {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 26px 0 10px;
}

.wiki-suchzaehler {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-ghost);
}

.wiki-suchliste {
  display: flex;
  flex-direction: column;
  background: var(--bg-veil);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

a.wiki-suchtreffer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
}

a.wiki-suchtreffer:last-child { border-bottom: none; }

a.wiki-suchtreffer:hover,
a.wiki-suchtreffer:focus-visible {
  background: color-mix(in oklab, var(--ember-glow) 45%, transparent);
  outline: none;
}

a.wiki-suchtreffer:hover .wiki-suchtreffer-titel { color: var(--ember-bright); }

.wiki-suchtreffer .wiki-tag { flex: none; margin-top: 2px; }

.wiki-suchtreffer-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wiki-suchtreffer-titel {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-bright);
  transition: color 0.15s ease;
}

.wiki-suchtreffer-snippet {
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* Treffer-Markierung im Ember-Ton */
.wiki-suchtreffer-snippet mark,
.wiki-page mark {
  background: var(--ember-glow);
  color: var(--ember-bright);
  border-radius: 3px;
  padding: 0 2px;
}

@media (max-width: 768px) {
  .wiki-suchform { flex-basis: 100%; margin-left: 0; }
}

/* === Symbol-Ausbau: Arten, Materialien, Aspekte, Index-Kacheln === */

/* Gedämpfte Glyphen-Variante — Symbole als Beiwerk, nicht als Blickfang */
.wiki-symbol--dezent { color: var(--ink-faint); }

/* Glyphe vor Überschriften/Panel-Titeln (Art-Gruppen, Material-Karten, Aspekte) */
h1 .wiki-symbol--glyph,
h2 .wiki-symbol--glyph,
h3 .wiki-symbol--glyph,
summary > .wiki-symbol--glyph {
  font-size: 0.8em;
  margin-right: 8px;
}

/* Art-Gruppentitel der Spezies-Übersicht */
.wiki-art-titel { display: flex; align-items: baseline; }
.wiki-art-titel .wiki-details-meta { margin-left: 10px; }

/* Kampf-Aspekt-Panels: Inline-SVG neben dem Titel */
h3 .wiki-symbol--aspekt {
  vertical-align: -4px;
  margin-right: 8px;
}

/* Zustands-Chips im Livespiel: Symbol vor dem Zustandsnamen */
.zustand-chip .zustand-symbol {
  color: var(--ember-bright);
  font-size: 1.05em;
  line-height: 1;
}

/* === Wiki: Welt-Bereiche (Dreiteilung allgemein/catonium/auralis) === */
/* Jede Bereichssektion trägt eine eigene dezente Hintergrund-Tönung —
   neutral-ember für Allgemeines, kühles Kristallblau für Catonium,
   warmes Gold-Rot für Auralis; Himmelswelt vorbereitet. Die Töne sind
   als oklch-Alphaflächen auf die Ember-Palette abgestimmt. */

.wiki-bereich {
  --bereich-tint:   oklch(0.74 0.135 62 / 0.05);
  --bereich-line:   oklch(0.74 0.135 62 / 0.16);
  --bereich-accent: var(--ember-bright);
  background: linear-gradient(180deg, var(--bereich-tint), transparent 85%);
  border: 1px solid var(--bereich-line);
  border-radius: 14px;
  padding: 24px 26px 10px;
  margin: 0 0 30px;
  scroll-margin-top: 84px;
}

.wiki-bereich--catonium {
  --bereich-tint:   oklch(0.62 0.10 245 / 0.07);
  --bereich-line:   oklch(0.68 0.10 245 / 0.20);
  --bereich-accent: oklch(0.80 0.08 245);
}

.wiki-bereich--auralis {
  --bereich-tint:   oklch(0.66 0.14 40 / 0.07);
  --bereich-line:   oklch(0.72 0.13 40 / 0.20);
  --bereich-accent: oklch(0.80 0.11 45);
}

.wiki-bereich--himmelwelt {
  --bereich-tint:   oklch(0.72 0.07 200 / 0.06);
  --bereich-line:   oklch(0.76 0.07 200 / 0.18);
  --bereich-accent: oklch(0.82 0.07 200);
}

.wiki-bereich-kopf {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.wiki-bereich-titel {
  margin: 0;
  color: var(--bereich-accent);
}

.wiki-bereich-kurz {
  margin: 6px 0 20px;
  max-width: 70ch;
  color: var(--ink-soft);
  font-size: 14px;
}

.wiki-bereich-zahl {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
}

/* Sprungtabs über den Bereichen */
.wiki-bereich-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}

.wiki-bereich-tab,
.wiki-bereich-chip {
  --bereich-tint:   oklch(0.74 0.135 62 / 0.08);
  --bereich-line:   oklch(0.74 0.135 62 / 0.22);
  --bereich-accent: var(--ember-bright);
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 14px;
  border: 1px solid var(--bereich-line);
  border-radius: 999px;
  background: var(--bereich-tint);
  color: var(--bereich-accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.wiki-bereich-tab--catonium, .wiki-bereich-chip--catonium {
  --bereich-tint:   oklch(0.62 0.10 245 / 0.10);
  --bereich-line:   oklch(0.68 0.10 245 / 0.28);
  --bereich-accent: oklch(0.80 0.08 245);
}

.wiki-bereich-tab--auralis, .wiki-bereich-chip--auralis {
  --bereich-tint:   oklch(0.66 0.14 40 / 0.10);
  --bereich-line:   oklch(0.72 0.13 40 / 0.28);
  --bereich-accent: oklch(0.80 0.11 45);
}

.wiki-bereich-tab--himmelwelt, .wiki-bereich-chip--himmelwelt {
  --bereich-tint:   oklch(0.72 0.07 200 / 0.09);
  --bereich-line:   oklch(0.76 0.07 200 / 0.26);
  --bereich-accent: oklch(0.82 0.07 200);
}

.wiki-bereich-tab:hover, .wiki-bereich-tab:focus-visible,
.wiki-bereich-chip:hover, .wiki-bereich-chip:focus-visible {
  border-color: var(--bereich-accent);
  background: color-mix(in oklab, var(--bereich-tint) 60%, var(--bereich-line));
  outline: none;
}

.wiki-bereich-tab .wiki-bereich-zahl,
.wiki-bereich-chip .wiki-bereich-zahl {
  color: color-mix(in oklab, var(--bereich-accent) 65%, transparent);
}

/* Bereichs-Badge im Breadcrumb der Artikel-Detailseite */
.wiki-bereich-badge {
  --bereich-accent: var(--ember-bright);
  --bereich-line:   oklch(0.74 0.135 62 / 0.22);
  --bereich-tint:   oklch(0.74 0.135 62 / 0.08);
  display: inline-block;
  margin-left: 10px;
  padding: 1px 10px;
  border: 1px solid var(--bereich-line);
  border-radius: 999px;
  background: var(--bereich-tint);
  color: var(--bereich-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  vertical-align: 1px;
}

.wiki-bereich-badge--catonium {
  --bereich-accent: oklch(0.80 0.08 245);
  --bereich-line:   oklch(0.68 0.10 245 / 0.28);
  --bereich-tint:   oklch(0.62 0.10 245 / 0.10);
}

.wiki-bereich-badge--auralis {
  --bereich-accent: oklch(0.80 0.11 45);
  --bereich-line:   oklch(0.72 0.13 40 / 0.28);
  --bereich-tint:   oklch(0.66 0.14 40 / 0.10);
}

.wiki-bereich-badge--himmelwelt {
  --bereich-accent: oklch(0.82 0.07 200);
  --bereich-line:   oklch(0.76 0.07 200 / 0.26);
  --bereich-tint:   oklch(0.72 0.07 200 / 0.09);
}

.wiki-bereich-badge:hover { border-color: var(--bereich-accent); }

/* Bereichs-Filter-Chips auf der Suchseite */
.wiki-bereich-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 24px;
}

.wiki-bereich-chip.active {
  border-color: var(--bereich-accent);
  box-shadow: inset 0 0 0 1px var(--bereich-accent);
}

@media (max-width: 768px) {
  .wiki-bereich { padding: 18px 16px 6px; }
}

/* === Wiki: Material-Gruppen & Götter-Symbole ================================
   Material-Übersicht: Gruppen-Sektionen mit Sprungchips (nutzt die
   .wiki-bereich-tab-Optik); Götter: Symbol-Tag an Karte und Detail-Titel. */

.wiki-material-gruppe { scroll-margin-top: 84px; }

.wiki-material-gruppe + .wiki-material-gruppe { margin-top: 10px; }

/* Sprungchip mit vorangestellter Gruppen-Glyphe */
.wiki-material-chip-symbol {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1;
  align-self: center;
}

/* Kompakte Material-Zeilen der Übersicht: Glyphen bündig in einer Spalte */
.wiki-material-row .wiki-symbol--glyph {
  flex: none;
  width: 24px;
  text-align: center;
  font-size: 16px;
}

/* Götter-Symbol („Rabe über Wellen") als Kapitälchen-Tag auf der Karte:
   nicht mitschrumpfen und nicht am Kartenlayout ziehen */
.wiki-card .wiki-panel-head .wiki-symbol--tag {
  flex: none;
  align-self: center;
}

/* Auf der Detailseite größer neben dem Namen */
.wiki-symbol--gott.wiki-symbol--tag {
  font-size: 13px;
  padding: 4px 14px;
  letter-spacing: 0.16em;
  vertical-align: 0.35em;
  margin-left: 14px;
  color: var(--ember-bright);
  border-color: color-mix(in oklab, var(--ember-bright) 35%, transparent);
}

/* Götter-Wappen als kuratierte Glyphe (GOTT_SYMBOL_GLYPHE): auf den
   Übersichtskarten groß statt Text-Tag, der Wappentext hängt im title */
.wiki-card .wiki-panel-head .wiki-symbol--glyph.wiki-symbol--gott {
  flex: none;
  align-self: center;
  font-size: 22px;
}

/* Detail-Kopf: Glyphe neben dem Namen, Wappentext als kleiner Beitext */
h1 .wiki-symbol--glyph.wiki-symbol--gott {
  font-size: 0.75em;
  margin-left: 12px;
  margin-right: 0;
  vertical-align: -0.05em;
}

h1 .wiki-symbol--wappentext {
  font-size: 12px;
  padding: 3px 12px;
  letter-spacing: 0.14em;
  vertical-align: 0.4em;
  margin-left: 10px;
  color: color-mix(in oklab, var(--ember-bright) 75%, transparent);
  border-color: color-mix(in oklab, var(--ember-bright) 30%, transparent);
}

/* === Katalog-Picker (Inventar-Editor) === */
/* Kompakter Ersatz fürs Riesen-Dropdown: Suchfeld + gruppierte Scroll-Liste,
   Klick übernimmt den Eintrag als Inventar-Zeile (Mehrfach-Übernahme). */
.katalog-picker { margin-bottom: 12px; }

.katalog-picker__kopf {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.katalog-picker__kopf input[type="search"] {
  flex: 1 1 220px;
  max-width: 340px;
}

.katalog-picker__liste {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--hairline-warm);
  border-radius: 8px;
  background: var(--bg-raised);
}

.katalog-picker__gruppe {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 5px 12px 4px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--hairline-warm);
  color: var(--ember);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.katalog-picker__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 5px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.katalog-picker__item:hover,
.katalog-picker__item:focus-visible {
  background: var(--ember-glow);
}

.katalog-picker__meta {
  color: var(--ink-faint);
  font-size: 12px;
  white-space: nowrap;
}

.katalog-picker__leer {
  padding: 10px 12px;
  color: var(--ink-faint);
}

.katalog-picker__hint {
  margin: 6px 0 0;
  color: var(--ink-faint);
  font-size: 12px;
}

/* === Bibliothek === */
/* Regal (/wiki/bibliothek): Buchdeckel-Karten mit Rücken/Falz und goldener
   Prägelinie. Leseansicht (/wiki/bibliothek/<key>): .buch-seite — bewusst
   helles Pergament auch im Ember-Dark-Theme, das Buch IST hell. */

.buch-regal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 28px 22px;
  align-items: start;
}

a.buch-deckel {
  display: block;
  aspect-ratio: 5 / 7;
  padding: 12px;
  text-decoration: none;
  border-radius: 3px 10px 10px 3px; /* flacher Falz links, runder Schnitt rechts */
  background:
    linear-gradient(105deg,
      oklch(0.31 0.048 45) 0%,
      oklch(0.25 0.042 40) 55%,
      oklch(0.21 0.036 38) 100%);
  border: 1px solid oklch(0.36 0.05 50 / 0.6);
  box-shadow:
    inset 4px 0 0 oklch(0.16 0.03 35),
    inset 12px 0 16px -10px oklch(0 0 0 / 0.6),
    0 12px 26px -14px oklch(0 0 0 / 0.75);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

a.buch-deckel:hover,
a.buch-deckel:focus-visible {
  transform: translateY(-4px);
  border-color: var(--ember-trace);
  box-shadow:
    inset 4px 0 0 oklch(0.16 0.03 35),
    inset 12px 0 16px -10px oklch(0 0 0 / 0.6),
    0 18px 32px -14px oklch(0 0 0 / 0.8),
    0 0 24px -6px var(--ember-glow);
  outline: none;
}

.buch-deckel-rahmen {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 16px 12px;
  text-align: center;
  border: 1px solid oklch(0.62 0.09 78 / 0.35); /* goldene Prägelinie */
  border-radius: 2px 6px 6px 2px;
}

.buch-praegung {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  color: oklch(0.72 0.09 80 / 0.85);
  margin: 8px 0 auto;
}

/* wappen-Makro auf dem Deckel: Prägung überschreibt die Ember-Glyphenfarbe */
.buch-deckel .wiki-symbol--glyph { color: oklch(0.72 0.09 80 / 0.85); }

.buch-deckel-titel {
  font-family: var(--serif);
  font-variant: small-caps;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: oklch(0.82 0.07 78);
}

.buch-deckel-untertitel {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.35;
  color: oklch(0.68 0.06 75 / 0.85);
  margin-top: 6px;
}

.buch-deckel-autor {
  font-family: var(--serif);
  font-variant: small-caps;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: oklch(0.66 0.06 75 / 0.75);
  margin: auto 0 6px;
}

.buch-regal-kurz {
  margin: 10px 4px 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  text-align: center;
}

/* --- Buchseite (Leseansicht) --- */

.buch-seite {
  /* Eigene Papier-Palette — unabhängig vom Ember-Theme. Die Tinte ist
     bewusst dunkel (~#2a2118), das Papier leicht gedämpft: WCAG-AA-Kontrast
     auf allen Textstufen (tinte ≈ 12:1, tinte-soft ≈ 6:1, rubrik ≈ 5:1). */
  --papier:      oklch(0.93 0.024 84);
  --papier-tief: oklch(0.90 0.028 82);
  --papier-rand: oklch(0.84 0.035 80);
  --tinte:       oklch(0.27 0.024 55);
  --tinte-soft:  oklch(0.40 0.028 52);
  --rubrik:      oklch(0.43 0.105 40); /* Rubrizierungs-Rotbraun */
  --buch-linie:  oklch(0.27 0.024 55 / 0.3);

  max-width: 780px;
  margin: 0 auto 44px;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 7vw, 88px);
  background: linear-gradient(180deg, var(--papier), var(--papier-tief));
  color: var(--tinte);
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.65;
  border: 1px solid var(--papier-rand);
  border-radius: 3px;
  box-shadow:
    0 2px 0 oklch(0.84 0.04 78),   /* Seitenschnitt: gestapelte Blätter */
    0 4px 0 oklch(0.80 0.045 75),
    0 6px 0 oklch(0.76 0.05 72),
    0 28px 60px -24px oklch(0 0 0 / 0.75);
}

/* Titelblatt */
.buch-titelblatt {
  text-align: center;
  margin: 0 0 42px;
  padding-bottom: 32px;
  border-bottom: 4px double var(--buch-linie);
}

.buch-titel-symbol {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--rubrik);
  margin-bottom: 16px;
}

.buch-seite .buch-titelblatt h1 {
  font-family: var(--serif);
  font-variant: small-caps;
  font-size: clamp(34px, 6vw, 48px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--tinte);
  margin: 0 0 12px;
}

.buch-untertitel {
  font-style: italic;
  font-size: 19px;
  color: var(--tinte-soft);
  margin: 0 0 18px;
}

.buch-autor {
  font-variant: small-caps;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--tinte-soft);
  margin: 0;
}

/* Kapitelnavigation (aus dem Markdown-TOC) */
.buch-toc {
  text-align: center;
  margin: 0 0 46px;
}

.buch-toc-titel {
  font-variant: small-caps;
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--tinte-soft);
  margin-bottom: 10px;
}

.buch-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.buch-toc li { margin: 3px 0; }

.buch-toc a {
  font-style: italic;
  font-size: 16px;
  color: var(--tinte-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--buch-linie);
  transition: color 0.15s ease;
}

.buch-toc a:hover,
.buch-toc a:focus-visible { color: var(--rubrik); }

/* Fließtext — gedruckte Anmutung. color explizit: .app-page p setzt sonst
   das helle Dark-Theme-Grau (--ink-soft) auf jeden Absatz im Buch. */
.buch-seite p {
  margin: 0 0 1em;
  text-align: justify;
  hyphens: auto;
  color: var(--tinte);
}

.buch-seite a {
  color: var(--rubrik);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.buch-seite a:hover { text-decoration-style: solid; }

.buch-seite strong { font-weight: 600; color: var(--tinte); }
.buch-seite em { color: inherit; }

/* Kapitelüberschriften mit Ornament-Trenner.
   display/text-transform explizit: .app-page h2 leakt sonst flex +
   uppercase + ::after-Hairline in die Buchtypo. */
.buch-seite h2 {
  display: block;
  font-family: var(--serif);
  font-variant: small-caps;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  text-align: center;
  color: var(--tinte);
  margin: 2.4em 0 0.9em;
}

.buch-seite h2::after { content: none; }

.buch-seite h2::before {
  content: "❦";
  display: block;
  font-size: 17px;
  color: var(--rubrik);
  margin-bottom: 14px;
}

.buch-seite h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  color: var(--tinte);
  margin: 1.8em 0 0.6em;
}

/* Initiale am Kapitelanfang */
.buch-seite h2 + p::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 3.6em;
  line-height: 0.82;
  font-weight: 500;
  color: var(--rubrik);
  padding: 0.04em 0.1em 0 0;
}

/* Gedruckt wirkende Zitate: zentriert kursiv zwischen Haarlinien */
.buch-seite blockquote {
  margin: 1.8em auto;
  max-width: 48ch;
  padding: 0.9em 0.5em;
  border: none;
  border-top: 1px solid var(--buch-linie);
  border-bottom: 1px solid var(--buch-linie);
  background: transparent;
  font-style: italic;
  color: var(--tinte-soft);
}

.buch-seite blockquote p {
  margin: 0.3em 0;
  text-align: center;
  hyphens: none;
}

.buch-seite hr {
  width: 120px;
  margin: 2.2em auto;
  border: none;
  border-top: 1px solid var(--buch-linie);
}

.buch-seite ul,
.buch-seite ol {
  margin: 0 0 1em;
  padding-left: 1.6em;
}

.buch-seite li { margin: 0.35em 0; }
.buch-seite li::marker { color: var(--rubrik); }

.buch-seite table {
  width: 100%;
  margin: 1.4em 0;
  border-collapse: collapse;
  font-size: 16px;
}

.buch-seite th,
.buch-seite td {
  padding: 6px 12px;
  border: none;
  border-bottom: 1px solid var(--buch-linie);
  background: transparent;
  color: var(--tinte);
  text-align: left;
}

.buch-seite th {
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--buch-linie);
}

.buch-seite code {
  font-family: var(--mono);
  font-size: 0.82em;
  background: oklch(0.88 0.03 80 / 0.6);
  color: var(--tinte);
  border-radius: 3px;
  padding: 1px 5px;
}

.buch-schluss {
  text-align: center;
  font-size: 20px;
  color: var(--rubrik);
  margin-top: 44px;
}

/* === Formel-Rendering (KaTeX, self-hosted in static/katex/) ============= */
/* katex-init.js ersetzt das MathML in [data-latex] durch KaTeX-HTML.
   Zentriert, angenehm groß, Ember-Farbwelt; Display-Math für die großen
   Formeln, inline für kurze. MathML-Fallback (ohne JS) erbt die Regeln. */

.wiki-formel--math {
  text-align: center;
}

.wiki-formel--math .katex {
  font-size: 1.15em;
  color: var(--ember-bright);
}

.wiki-formel--math .katex-display {
  margin: 6px 0;
  padding: 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.wiki-formel--display.katex-rendered {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Formelkasten (Seitenleiste der Systemseiten): etwas kompakter. */
.wiki-formelkasten .wiki-formel--math .katex {
  font-size: 1.05em;
}

/* --- Talente-Seite: aufklappbare Talent-Eintraege --- */
.wiki-talente {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  align-items: start;
}

.wiki-talent {
  background: var(--bg-base);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
}

.wiki-talent > summary {
  padding: 6px 12px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wiki-talent > summary::-webkit-details-marker { display: none; }

.wiki-talent > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-right: 1px solid var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.wiki-talent[open] > summary::before { transform: rotate(45deg); }

.wiki-talent[open] > summary { color: var(--ember-bright); }

.wiki-talent > summary:hover,
.wiki-talent > summary:focus-visible { color: var(--ember-bright); }

.wiki-talent > p {
  margin: 0;
  padding: 0 12px 10px 26px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.wiki-talent--leer { padding: 6px 12px; }

/* === Wiki: Seitenreiter (Systemseiten Magie/Karma) ====================== */
/* CSS-only Tabs über Radio-Inputs (Makro tabs_kopf in wiki/_system.html).
   Aufbau: .wiki-tabs > radios + .wiki-tab-bar + .wiki-tab-panel-Sektionen.
   Sichtbarkeit und aktiver Reiter laufen über :checked ~ nth-of-type;
   unterstützt bis zu 5 Reiter. Radios bleiben fokussierbar (Pfeiltasten). */

.wiki-tabs { margin-top: 18px; }

.wiki-tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wiki-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--hairline-warm);
}

.wiki-tab-label {
  cursor: pointer;
  padding: 9px 16px 8px;
  margin-bottom: -1px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 9px 9px 0 0;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.wiki-tab-label:hover { color: var(--ink-bright); }

.wiki-tabs > .wiki-tab-panel { display: none; }

/* Aktiver Reiter: Label hervorheben, zugehöriges Panel zeigen. */
.wiki-tabs > .wiki-tab-radio:nth-of-type(1):checked ~ .wiki-tab-bar .wiki-tab-label:nth-child(1),
.wiki-tabs > .wiki-tab-radio:nth-of-type(2):checked ~ .wiki-tab-bar .wiki-tab-label:nth-child(2),
.wiki-tabs > .wiki-tab-radio:nth-of-type(3):checked ~ .wiki-tab-bar .wiki-tab-label:nth-child(3),
.wiki-tabs > .wiki-tab-radio:nth-of-type(4):checked ~ .wiki-tab-bar .wiki-tab-label:nth-child(4),
.wiki-tabs > .wiki-tab-radio:nth-of-type(5):checked ~ .wiki-tab-bar .wiki-tab-label:nth-child(5) {
  color: var(--ember-bright);
  background: var(--bg-veil);
  border-color: var(--hairline-warm);
  border-bottom-color: var(--bg-base);
}

.wiki-tabs > .wiki-tab-radio:nth-of-type(1):checked ~ .wiki-tab-panel:nth-of-type(1),
.wiki-tabs > .wiki-tab-radio:nth-of-type(2):checked ~ .wiki-tab-panel:nth-of-type(2),
.wiki-tabs > .wiki-tab-radio:nth-of-type(3):checked ~ .wiki-tab-panel:nth-of-type(3),
.wiki-tabs > .wiki-tab-radio:nth-of-type(4):checked ~ .wiki-tab-panel:nth-of-type(4),
.wiki-tabs > .wiki-tab-radio:nth-of-type(5):checked ~ .wiki-tab-panel:nth-of-type(5) {
  display: block;
}

/* Tastaturfokus auf dem (unsichtbaren) Radio sichtbar machen. */
.wiki-tab-radio:nth-of-type(1):focus-visible ~ .wiki-tab-bar .wiki-tab-label:nth-child(1),
.wiki-tab-radio:nth-of-type(2):focus-visible ~ .wiki-tab-bar .wiki-tab-label:nth-child(2),
.wiki-tab-radio:nth-of-type(3):focus-visible ~ .wiki-tab-bar .wiki-tab-label:nth-child(3),
.wiki-tab-radio:nth-of-type(4):focus-visible ~ .wiki-tab-bar .wiki-tab-label:nth-child(4),
.wiki-tab-radio:nth-of-type(5):focus-visible ~ .wiki-tab-bar .wiki-tab-label:nth-child(5) {
  outline: 1px solid var(--ember-trace);
  outline-offset: 2px;
}

/* Erster Systemteil-Titel im Panel braucht keinen großen Abstand nach oben. */
.wiki-tab-panel > .wiki-systemteil:first-child { margin-top: 0; }

/* Geheimwissen-Sektion auf /wiki/personen (Die Verborgenen) — Warn-Ästhetik
   der Spoilerboxen: gestrichelter Rahmen, Gefahren-Kante, Mono-Titel. */
.wiki-bereich--verborgen {
  --bereich-tint:   oklch(0.55 0.16 25 / 0.06);
  --bereich-line:   oklch(0.62 0.16 25 / 0.28);
  --bereich-accent: var(--danger-bright);
  border-style: dashed;
  border-left: 3px solid var(--danger);
}

.wiki-verborgen-titel {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--danger-bright);
}