/* ============================================================
   DORFELITE — Immersionskapsel
   Tokens: DORFELITE BRAND QUICKREF v0.1
   Gold strukturiert. Cyan leuchtet. Grün bestätigt.
   Rot warnt. Grau beruhigt. Schwarz trägt.
   ============================================================ */

:root {
  /* Farbe = Signal, nicht Dekoration */
  --black: #0F0F0F;
  --void: #000000;
  --panel: #1A1A1A;
  --text: #CCCCCC;
  --text-strong: #E0E0E0;
  --gold: #C5A059;
  --cyan: #00C8F8;
  --terminal: #4AF626;
  --status-ok: #5BA832;
  --status-active: #C5A059;
  --status-danger: #A83232;
  --status-muted: #666666;

  /* Ableitungen (nur Transparenzen der Tokens) */
  --gold-28: rgba(197, 160, 89, 0.28);
  --gold-14: rgba(197, 160, 89, 0.14);
  --gold-08: rgba(197, 160, 89, 0.08);

  /* Schrift-Rollen */
  --font-system: 'Teko', 'Arial Narrow', sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-terminal: 'Space Mono', 'Courier New', monospace;

  /* Ruhe: Transitions >= 300ms */
  --t-base: 300ms;
  --t-slow: 600ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* HUD-Rahmen */
  --hud-inset: 18px;
  --hud-pad: calc(var(--hud-inset) + 14px);
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--void); }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* ---------- Canvas-Bühne ---------- */

#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---------- HUD-Rahmen (Markenartefakt) ---------- */

.hud-frame {
  position: fixed;
  inset: var(--hud-inset);
  z-index: 60;
  pointer-events: none;
  border: 1px solid var(--gold-28);
}

.hud-frame i {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
}
.hud-frame i:nth-child(1) { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.hud-frame i:nth-child(2) { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.hud-frame i:nth-child(3) { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.hud-frame i:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

.hud-readout {
  position: fixed;
  z-index: 61;
  font-family: var(--font-terminal);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--status-muted);
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}

.hud-readout strong {
  color: var(--gold);
  font-weight: 400;
}

.hud-readout .ok { color: var(--status-ok); }

#hud-bl { left: var(--hud-pad); bottom: calc(var(--hud-inset) + 8px); }
#hud-br { right: var(--hud-pad); bottom: calc(var(--hud-inset) + 8px); }

/* ---------- Kopf / Navigation ---------- */

.site-head {
  position: fixed;
  top: var(--hud-inset);
  left: var(--hud-inset);
  right: var(--hud-inset);
  z-index: 70;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 1px solid var(--gold-28);
  background: linear-gradient(rgba(15, 15, 15, 0.92), rgba(15, 15, 15, 0.78));
  backdrop-filter: blur(6px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  text-decoration: none;
}

.brand-mark {
  width: 10px;
  height: 10px;
  border: 1px solid var(--gold);
  position: relative;
  flex: none;
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--gold);
}

.brand-name {
  font-family: var(--font-system);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--text-strong);
  line-height: 1;
  transform: translateY(1px);
}

.main-nav {
  display: flex;
  align-items: stretch;
}

.main-nav a {
  display: flex;
  align-items: center;
  padding: 0 22px;
  font-family: var(--font-terminal);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  border-left: 1px solid var(--gold-14);
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.main-nav a:hover { color: var(--gold); background: var(--gold-08); }

.main-nav a[aria-current="page"] {
  color: var(--gold);
  box-shadow: inset 0 -1px 0 var(--gold);
}

.main-nav a .idx { color: var(--status-muted); margin-right: 8px; }

/* Mobile-Menü-Schalter */
.nav-toggle {
  display: none;
  appearance: none;
  background: none;
  border: none;
  border-left: 1px solid var(--gold-14);
  padding: 0 20px;
  cursor: pointer;
  font-family: var(--font-terminal);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: var(--void);
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 0 11vw;
  gap: 4px;
}

.mobile-menu.open { display: flex; }

.mobile-menu a {
  font-family: var(--font-system);
  font-size: clamp(2.6rem, 11vw, 4rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-strong);
  line-height: 1.15;
  padding: 6px 0;
  border-bottom: 1px solid var(--gold-14);
  transition: color var(--t-base) var(--ease), padding-left var(--t-base) var(--ease);
}

.mobile-menu a:hover,
.mobile-menu a[aria-current="page"] { color: var(--gold); }

.mobile-menu .mm-label {
  font-family: var(--font-terminal);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--status-muted);
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* ---------- Cursor-Reticle (nur Desktop) ---------- */

#reticle { display: none; }

@media (pointer: fine) {
  #reticle {
    display: block;
    position: fixed;
    z-index: 90;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    pointer-events: none;
    opacity: 0;
  }
  #reticle::before,
  #reticle::after {
    content: '';
    position: absolute;
    background: var(--gold);
  }
  #reticle::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-0.5px); }
  #reticle::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-0.5px); }
}

/* ---------- Boot-Sequenz ---------- */

#boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
}

#boot.done { display: none; }

.boot-inner {
  width: min(560px, 84vw);
}

.boot-log {
  font-family: var(--font-terminal);
  font-size: 0.78rem;
  line-height: 2.1;
  color: var(--terminal);
  min-height: 11em;
  margin: 0 0 22px;
  white-space: pre-line;
}

.boot-log .dim { color: var(--status-muted); }

.boot-bar {
  height: 1px;
  background: var(--gold-14);
  position: relative;
  overflow: hidden;
}

.boot-bar span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--gold);
}

.boot-skip {
  margin-top: 26px;
  appearance: none;
  background: none;
  border: 1px solid var(--gold-28);
  color: var(--status-muted);
  font-family: var(--font-terminal);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.boot-skip:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Layout ---------- */

main {
  position: relative;
  z-index: 1;
}

.shell {
  width: min(1240px, calc(100vw - 2 * var(--hud-pad) - 24px));
  margin: 0 auto;
}

.section {
  padding: clamp(90px, 14vh, 160px) 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  border-bottom: 1px solid var(--gold-28);
  padding-bottom: 16px;
  margin-bottom: clamp(40px, 6vh, 72px);
}

.section-no {
  font-family: var(--font-terminal);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.section-title {
  font-family: var(--font-system);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 0;
  line-height: 1;
}

.section-aside {
  margin-left: auto;
  font-family: var(--font-terminal);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--status-muted);
}

/* ---------- Hero ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 120px;
  position: relative;
}

.hero-kicker {
  font-family: var(--font-terminal);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(18px, 3vh, 30px);
}

.hero-kicker .ok { color: var(--status-ok); }

.display-xl {
  font-family: var(--font-system);
  font-weight: 600;
  font-size: clamp(3.4rem, 11.5vw, 10.5rem);
  line-height: 0.94;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 0;
}

.display-xl .line { display: block; overflow: hidden; }
.display-xl .line > span { display: inline-block; }

.display-xl em {
  font-style: normal;
  color: var(--gold);
}

.hero-sub {
  max-width: 560px;
  margin-top: clamp(26px, 4vh, 44px);
  font-size: 1.0625rem;
  color: var(--text);
}

.hero-meta {
  margin-top: clamp(36px, 6vh, 60px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  font-family: var(--font-terminal);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--status-muted);
}

/* Kino-Hero (Startseite): Video-Bühne hinter der Headline */
.hero-cine {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-cine video,
.hero-cine .hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.85) brightness(0.62) contrast(1.05);
}

/* Abdunklung + Vignette: Text bleibt führend, Video bleibt Atmosphäre */
.hero-cine .hero-cine-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,15,15,0.62) 0%, rgba(15,15,15,0.18) 38%, rgba(15,15,15,0.30) 70%, var(--black) 99%),
    radial-gradient(ellipse at 30% 45%, transparent 30%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

.hero-cine .shell { position: relative; z-index: 2; }

/* Kinoüberschrift: volle Breite, hart, ruhig */
.hero-cine .display-xl {
  font-size: clamp(3.6rem, 12.5vw, 11.5rem);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
}

.hero-cine .hero-sub { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.6); }

/* Hero mit Bild-Anker (Archivframe rechts) */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.hero-grid .display-xl { font-size: clamp(2.8rem, 6.8vw, 6.6rem); }
.hero-grid .archive-frame { max-height: 62vh; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .archive-frame { max-width: 480px; }
}

/* Signaturlicht: die einzige Cyan-Fläche der Seite */
.signature-light {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan) 35%, var(--cyan) 65%, transparent);
  opacity: 0.55;
}

/* ---------- Typo-Bausteine ---------- */

.label-mono {
  font-family: var(--font-terminal);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--status-muted);
}

.lede {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.6;
  color: var(--text-strong);
  max-width: 760px;
}

.lede strong { color: var(--gold); font-weight: 500; }

/* ---------- Panels ---------- */

.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gold-14);
  border: 1px solid var(--gold-14);
}

.panel {
  background: var(--panel);
  padding: clamp(26px, 3vw, 40px);
  position: relative;
}

.panel::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.panel:hover::before { opacity: 1; }

.panel h3 {
  font-family: var(--font-system);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 14px 0 12px;
  line-height: 1;
}

.panel p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text);
}

.panel .label-mono { color: var(--gold); }

/* ---------- Register (Listenzeilen) ---------- */

.register { border-top: 1px solid var(--gold-28); }

.register-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 30px 6px;
  border-bottom: 1px solid var(--gold-14);
  text-decoration: none;
  transition: background var(--t-base) var(--ease), padding-left var(--t-base) var(--ease);
}

a.register-row:hover { background: var(--gold-08); padding-left: 18px; }

.register-row .rid {
  font-family: var(--font-terminal);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--status-muted);
}

.register-row .rname {
  font-family: var(--font-system);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-strong);
  line-height: 1;
}

.register-row .rsub {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  margin-top: 8px;
}

/* ---------- Status-Token ---------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-terminal);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  background: currentColor;
}

.status.ok { color: var(--status-ok); }
.status.active { color: var(--status-active); }
.status.muted { color: var(--status-muted); }
.status.danger { color: var(--status-danger); }

/* ---------- Terminal-Block ---------- */

.terminal-block {
  background: var(--void);
  border: 1px solid var(--gold-14);
  padding: clamp(22px, 3vw, 36px);
  font-family: var(--font-terminal);
  font-size: 0.8125rem;
  line-height: 2;
  color: var(--terminal);
  overflow-x: auto;
  white-space: pre;
}

.terminal-block .dim { color: var(--status-muted); }
.terminal-block .gold { color: var(--gold); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  border: 1px solid var(--gold);
  font-family: var(--font-terminal);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: color var(--t-base) var(--ease);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t-base) var(--ease);
}

.btn:hover::before { transform: scaleY(1); }
.btn:hover { color: var(--void); }
.btn > * { position: relative; }

.btn .arrow { font-family: var(--font-ui); }

/* ---------- Zweispalter ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

.split .sticky-col { position: sticky; top: 130px; }

/* ---------- Filter-Liste (Entscheidungsfilter) ---------- */

.filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: filter;
}

.filter-list li {
  counter-increment: filter;
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 20px 6px;
  border-bottom: 1px solid var(--gold-14);
  font-family: var(--font-system);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.filter-list li::before {
  content: '0' counter(filter);
  font-family: var(--font-terminal);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.filter-list li em {
  font-style: normal;
  color: var(--status-muted);
}

/* ---------- Footer ---------- */

.site-foot {
  border-top: 1px solid var(--gold-28);
  margin-top: clamp(60px, 10vh, 120px);
  padding: 44px 0 calc(var(--hud-inset) + 40px);
}

.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 60px;
  justify-content: space-between;
  align-items: baseline;
}

.foot-claim {
  font-family: var(--font-system);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.foot-links a {
  font-family: var(--font-terminal);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--status-muted);
  transition: color var(--t-base) var(--ease);
}

.foot-links a:hover { color: var(--gold); }

/* ---------- Artikel-Schicht (Guide & Rechtsseiten) ---------- */

/* Elementor-Globals aus dem Live-Export auf Kapsel-Tokens mappen */
:root {
  --e-global-color-accent: var(--gold);
  --e-global-color-text: var(--text);
  --e-global-color-secondary: var(--status-muted);
  --e-global-typography-primary-font-family: 'Teko';
  --e-global-typography-text-font-family: 'Inter';
}

.page-head {
  padding: 150px 0 30px;
}

.page-head .crumb {
  font-family: var(--font-terminal);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 18px;
}

.page-head .crumb:hover { text-decoration: underline; text-underline-offset: 4px; }

.page-head h1 {
  font-family: var(--font-system);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 0.96;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 0;
}

.article {
  max-width: 880px;
  padding-bottom: 40px;
}

.article h1 {
  font-family: var(--font-system);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-strong);
  margin: 0 0 16px;
}

.article h2 {
  font-family: var(--font-system);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin: 2.4em 0 0.6em;
}

.article h3 {
  font-family: var(--font-system);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  color: var(--text-strong);
  margin: 1.8em 0 0.5em;
}

.article p, .article li { font-size: 1rem; color: var(--text); }
.article ul, .article ol { padding-left: 1.3em; }
.article li { margin-bottom: 0.5em; }
.article li::marker { color: var(--gold); }

.article a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article a:hover { color: var(--text-strong); }

.article strong { color: var(--text-strong); font-weight: 600; }

.article hr { border: 0; border-top: 1px solid var(--gold-14); margin: 2.5em 0; }

.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 1.5em 0;
}
.article th, .article td {
  border: 1px solid var(--gold-14);
  padding: 10px 14px;
  text-align: left;
}
.article th { font-family: var(--font-terminal); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

.article img { height: auto; border: 1px solid var(--gold-14); }

/* Elementor-Icon-SVGs aus dem Export: ohne width/height-Attribut riesig + schwarz */
.article svg {
  width: 0.85em;
  height: 0.85em;
  fill: var(--gold);
  flex: none;
}

.article li:has(> svg) {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-left: -1.3em;
}

.article blockquote {
  margin: 1.5em 0;
  padding: 4px 0 4px 20px;
  border-left: 1px solid var(--gold);
  color: var(--text-strong);
}

/* ---------- Archivframe (Bilder = Beweis, nicht Dekoration) ---------- */

.archive-frame {
  position: relative;
  display: block;
  border: 1px solid var(--gold-28);
  background: var(--void);
  overflow: hidden;
  margin: 0;
}

.archive-frame::before,
.archive-frame::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 2;
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
}
.archive-frame::before { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; }
.archive-frame::after { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; }

.archive-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.04) brightness(0.82);
  transition: filter var(--t-slow) var(--ease);
}

.archive-frame:hover img,
.archive-frame:focus-within img { filter: saturate(0.92) contrast(1.02) brightness(0.94); }

/* Grid-Auflage über dem Bild */
.archive-frame .af-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(197,160,89,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,160,89,0.07) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Metadaten-Leiste (Hover/Fokus; auf Touch immer sichtbar) */
.archive-frame .af-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 26px 14px 10px;
  font-family: var(--font-terminal);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.archive-frame:hover .af-meta,
.archive-frame:focus-within .af-meta { opacity: 1; transform: none; }

@media (pointer: coarse) {
  .archive-frame .af-meta { opacity: 1; transform: none; }
}

.archive-frame .af-meta .af-id { color: var(--gold); }
.archive-frame .af-meta .af-ok { color: var(--status-ok); }

.af-169 { aspect-ratio: 16 / 9; }
.af-43 { aspect-ratio: 4 / 3; }
.af-prt { aspect-ratio: 3 / 4; }

/* UI-/Overlay-Screens: nicht abdunkeln, die Screens sind selbst dunkel */
.af-screen img, .af-screen:hover img { filter: none; }

.panel .archive-frame { margin: 0 0 18px; }

/* ---------- Guide-Hub ---------- */

.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.guide-index {
  position: sticky;
  top: 130px;
  border: 1px solid var(--gold-14);
  background: var(--panel);
  padding: 26px;
}

.guide-index .gi-title {
  font-family: var(--font-terminal);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}

.guide-index ol {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.guide-index ol a {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  font-family: var(--font-terminal);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--status-muted);
  border-bottom: 1px solid var(--gold-08);
  transition: color var(--t-base) var(--ease), padding-left var(--t-base) var(--ease);
}

.guide-index ol a:hover { color: var(--text-strong); }
.guide-index ol a.gi-active { color: var(--gold); padding-left: 8px; }

.guide-index .gi-hint {
  font-family: var(--font-terminal);
  font-size: 0.625rem;
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: var(--status-muted);
  margin: 0;
}

.guide-index .gi-hint strong { color: var(--status-ok); font-weight: 400; }

/* Einstiegs- und Kapitelkarten */
.guide-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--gold-14);
  padding: clamp(22px, 2.5vw, 32px);
  text-decoration: none;
  position: relative;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.guide-card:hover { border-color: var(--gold); background: #1e1d1a; }

.guide-card h3 {
  font-family: var(--font-system);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 10px 0 8px;
  line-height: 1;
}

.guide-card p {
  margin: 0 0 18px;
  font-size: 0.875rem;
  color: var(--text);
  flex: 1;
}

.guide-card .gc-cta {
  font-family: var(--font-terminal);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.guide-card:hover .gc-cta { text-decoration: underline; text-underline-offset: 4px; }

.gc-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-terminal);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid currentColor;
}
.gc-badge.einstieg { color: var(--status-ok); }
.gc-badge.wichtig { color: var(--status-active); }
.gc-badge.vertiefung { color: var(--status-muted); }

.card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- HUD-Statusmeldung (Systemverhalten) ---------- */

#hud-status {
  position: fixed;
  left: var(--hud-pad);
  bottom: calc(var(--hud-inset) + 26px);
  z-index: 61;
  font-family: var(--font-terminal);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terminal);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  white-space: nowrap;
}

#hud-status.show { opacity: 0.85; }

/* ---------- Reveal-Grundzustand ---------- */

html.js [data-reveal] { opacity: 0; transform: translateY(28px); }
html.js.reduced [data-reveal] { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .panel-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split .sticky-col { position: static; }
  .main-nav { display: none; }
  .nav-toggle { display: block; min-height: 48px; }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-index { position: static; order: -1; }
  .card-grid-2 { grid-template-columns: 1fr; }
  #hud-status { display: none; }
}

@media (max-width: 640px) {
  :root { --hud-inset: 10px; --hud-pad: calc(var(--hud-inset) + 8px); }
  body { font-size: 0.9375rem; }
  .brand { padding: 12px 14px; }
  .brand-name { font-size: 1.2rem; letter-spacing: 0.24em; }
  .register-row { grid-template-columns: 1fr; gap: 10px; padding: 24px 4px; }
  .register-row .rid { order: -1; }
  #hud-br { display: none; }
  .section { padding: 70px 0; }
  .section-aside { display: none; }
}

/* ---------- Ruhe: reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Artikel-Komponenten (Iteration 4: Guide-Redesign) ---------- */

.badge {
  display: inline-block;
  font-family: var(--font-terminal);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.badge-danger { color: var(--status-danger); }
.badge-ok { color: var(--status-ok); }
.badge-gold { color: var(--gold); }

.spec-tier { margin: clamp(30px, 4vw, 44px) 0; }
.spec-tier-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.spec-tier-head h4 { margin: 0; }
.spec-terminal { margin-bottom: 16px; }

.callout {
  background: var(--panel);
  border-left: 2px solid var(--gold);
  padding: 18px 22px;
  margin: 22px 0;
}
.callout h4 { margin: 0 0 8px; }
.callout p { margin: 0; }

.article hr {
  border: 0;
  height: 1px;
  background: var(--gold-14);
  margin: clamp(40px, 6vw, 64px) 0;
}

.article .article-frame { margin: 28px 0; max-width: 760px; }
.article .article-frame img { border: 0; }

/* Artikel-Bilder dürfen den fixierten Header nie überlagern */
.article img, .article .archive-frame { position: relative; z-index: 0; }