/* ════════════════════════════════════════════════════════════════
   Cyberpunk-Schicht (Variante C „Mischung“, gewählt im Oktober 2026)
   Liegt NACH styles.css / case.css / legal.css und überschreibt nur
   Farben, Schriften und ein paar Formen. Wer den alten Look zurück
   will, nimmt einfach die eine <link>-Zeile wieder raus.

   Seit 16.10.2026 Edgerunners-Farben: Gelb #fcee0a · Cyan #00f0ff ·
   Rot #ff003c auf Schwarz. Die Variablen heißen weiter --magenta und
   --orange, damit nichts bricht: --magenta trägt jetzt das Gelb,
   --orange das Rot. Ganz unten die Edgerunners-Schicht.
   ════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Permanent Marker";
  src: url("assets/fonts/permanent-marker.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("assets/fonts/caveat-500.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Audiowide";
  src: url("assets/fonts/audiowide.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("assets/fonts/rajdhani-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("assets/fonts/rajdhani-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("assets/fonts/rajdhani-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Share Tech Mono";
  src: url("assets/fonts/share-tech-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Dreifaches :root schlägt jede Theme-Stellung aus styles.css —
   die Seite ist jetzt immer Nacht. */
:root:root:root {
  color-scheme: dark;

  --magenta: #fcee0a;
  --cyan:    #00f0ff;
  --orange:  #ff003c;
  --nacht:   #050505;

  --bg:        #050505;
  --fg:        #f6f5ee;
  --muted:     #aeac9c;
  --line:      rgba(0, 240, 255, 0.22);
  --line-soft: rgba(0, 240, 255, 0.10);
  --grid:      rgba(0, 240, 255, 0.07);
  --hover-bg:  rgba(252, 238, 10, 0.08);
  --accent:    #00f0ff;
  --neon:      #fcee0a;
  --neon-fg:   #050505;
  --headset-gruen: #fcee0a;

  --himmel-oben:  #0c0c08;
  --himmel-unten: #060605;
  --himmel-licht: rgba(252, 238, 10, 0.16);
  --creme:        #050505;
  --abend-oben:   #0b0b08;
  --abend-unten:  #030303;
  --warp-start:   5, 5, 5;

  --font-sans:  "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --font-titel: "Anton", "Rajdhani", sans-serif;
  --font-mono:  "Share Tech Mono", ui-monospace, Consolas, monospace;

  /* abgeschrägte Ecke, wie bei einem Bildschirmrahmen aus dem Spiel */
  --kante: 14px;
}

body {
  font-weight: 500;
  font-size: 1.06rem;
}
::selection { background: var(--magenta); color: var(--nacht); }
:focus-visible { outline-color: var(--cyan); }

/* Der Theme-Schalter hat ausgedient */
#theme-btn { display: none; }

/* ── Überschriften: Audiowide hat nur eine Stärke ──────────────── */
.hero-statement,
.statement-title,
.footer-title,
.warp-line,
.marquee span,
.case-title,
.legal h1 {
  font-family: var(--font-titel);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hero-statement,
.footer-title {
  text-shadow: 0 0 18px rgba(252, 238, 10, 0.45), 0 0 52px rgba(252, 238, 10, 0.22);
}
.statement-title { line-height: 1.18; }
.statement-title .accent {
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.55);
}
.hero-name { font-family: var(--font-titel); font-weight: 400; letter-spacing: 0; }

/* ── Kopf: Logo mit Neonkante ──────────────────────────────────── */
.logo { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.6); }
.logo-suffix { color: var(--magenta); text-shadow: 0 0 10px rgba(252, 238, 10, 0.6); }
.site-header::after { background: linear-gradient(90deg, var(--magenta), var(--cyan)); height: 2px; }
.nav-link:hover { color: var(--cyan); }
.hud-btn:hover { color: var(--magenta); }

/* ── Hero: Neon-Dunst wie in der nassen Gasse ──────────────────── */
.hero {
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(252, 238, 10, 0.30), transparent 70%),
    radial-gradient(50% 55% at 96% 92%, rgba(0, 240, 255, 0.22), transparent 70%),
    radial-gradient(40% 30% at 70% 30%, rgba(255, 0, 60, 0.10), transparent 70%),
    linear-gradient(178deg, var(--himmel-oben) 0%, var(--himmel-unten) 60%, var(--nacht) 100%);
}
.hero-art {
  background:
    linear-gradient(102deg,
      transparent 12%, rgba(252, 238, 10, 0.14) 17%, transparent 23%,
      transparent 38%, rgba(0, 240, 255, 0.12) 44%, transparent 52%,
      transparent 66%, rgba(252, 238, 10, 0.10) 71%, transparent 79%);
}
/* feine Bildschirmzeilen über dem Hero */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
}
.redacted { background: var(--magenta); }
.hero-intro a:hover { border-color: var(--magenta); color: var(--magenta); }

/* ── Fallteile in Neon ─────────────────────────────────────────── */
.fall-tier {
  filter:
    drop-shadow(0 0 0.9rem rgba(252, 238, 10, 0.35))
    drop-shadow(0 0.35rem 0.9rem rgba(0, 0, 0, 0.55));
}
.fall-headset { filter: drop-shadow(0 0 1rem rgba(0, 240, 255, 0.45)); }
/* Helden und Goblins aus der Gildenhalle fallen mit — freigestellt,
   der Schein folgt der Figur statt einem Kasten. */
.fall-held {
  object-fit: contain;
  filter:
    drop-shadow(0 0 0.8rem rgba(255, 0, 60, 0.4))
    drop-shadow(0 0.35rem 0.8rem rgba(0, 0, 0, 0.55));
}
.fall-glas {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(0, 240, 255, 0.08) 55%, rgba(252, 238, 10, 0.16));
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 1.5rem rgba(0, 240, 255, 0.22);
}
.fall-vinyl { box-shadow: 0 0 1.5rem rgba(252, 238, 10, 0.25); }
.fall-vinyl::after {
  background:
    conic-gradient(rgba(5, 5, 5, 0.55) 0 40deg, transparent 40deg),
    radial-gradient(circle at 42% 36%, #fff8a0, #fcee0a 65%, #a89c00);
}
.fall-pixel { box-shadow: 0 0 0.9rem rgba(252, 238, 10, 0.65); }
.fall-pixel:nth-child(3n) { background: var(--cyan); box-shadow: 0 0 0.9rem rgba(0, 240, 255, 0.65); }
.skeleton { filter: drop-shadow(0 0 1.5rem rgba(0, 240, 255, 0.5)); }

/* ── Aussage ───────────────────────────────────────────────────── */
.statement {
  background:
    radial-gradient(40% 60% at 100% 50%, rgba(0, 240, 255, 0.07), transparent 70%),
    var(--nacht);
}

/* ── Projektkacheln: abgeschrägte Ecke, Neonrand ───────────────── */
.work-figure {
  clip-path: polygon(0 0, calc(100% - var(--kante)) 0, 100% var(--kante),
                     100% 100%, var(--kante) 100%, 0 calc(100% - var(--kante)));
  background: rgba(0, 240, 255, 0.05);
}
.work-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(0, 240, 255, 0.35);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.work-link:hover .work-figure::after,
.work-link:focus-visible .work-figure::after,
.work-item.ist-aktiv .work-figure::after {
  border-color: var(--magenta);
  box-shadow: inset 0 0 22px rgba(252, 238, 10, 0.45);
}
.work-kind {
  top: auto; right: auto;
  left: 0; bottom: 0;
  padding: 0.35rem 0.8rem 0.35rem 0.7rem;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 100%, 0 100%);
  box-shadow: 0 0 14px rgba(252, 238, 10, 0.6);
}
.work-title { color: var(--fg); }
.work-hover-label { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.6); }
.work-hover-frage { font-weight: 700; font-size: clamp(1.25rem, 2.3vw, 1.95rem); letter-spacing: 0; }

/* ── Tunnel ────────────────────────────────────────────────────── */
.warp-vinyl {
  background:
    radial-gradient(circle at center, #030303 0 2.4%, transparent 2.6%),
    radial-gradient(circle at center, #fff45c 0 11%, #fcee0a 11% 17.5%, transparent 18%),
    linear-gradient(115deg, transparent 40%, rgba(0, 240, 255, 0.14) 47%, transparent 55%),
    repeating-radial-gradient(circle at center, #1a1a12 0 3px, #0a0a07 3px 6px);
  box-shadow:
    0 0 4rem rgba(252, 238, 10, 0.35),
    0 0 9rem rgba(0, 240, 255, 0.15),
    0 2rem 5rem rgba(0, 0, 0, 0.6);
}
.warp-line { letter-spacing: 0; }
.warp-line.is-finale {
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(0, 240, 255, 0.6), 0 0 4rem rgba(0, 240, 255, 0.35);
}
.warp-satellit { font-weight: 600; letter-spacing: 0; }
.warp-satellit:nth-of-type(odd)  { text-shadow: 0 0 14px rgba(252, 238, 10, 0.6); }
.warp-satellit:nth-of-type(even) { text-shadow: 0 0 14px rgba(0, 240, 255, 0.6); }
.warp-skelett { filter: drop-shadow(0 0 1.5rem rgba(252, 238, 10, 0.55)); }

/* ── Laufband und Footer ──────────────────────────────────────── */
.banner {
  background: linear-gradient(180deg, var(--nacht) 0%, var(--abend-oben) 78%);
}
.marquee span {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cyan);
  text-shadow: 0 0 22px rgba(0, 240, 255, 0.35);
}
.marquee .sep {
  color: var(--magenta);
  -webkit-text-stroke: 0;
  text-shadow: 0 0 16px rgba(252, 238, 10, 0.8);
}
.site-footer {
  background:
    radial-gradient(55% 45% at 85% 10%, rgba(252, 238, 10, 0.20), transparent 70%),
    radial-gradient(45% 40% at 5% 95%, rgba(0, 240, 255, 0.14), transparent 70%),
    linear-gradient(180deg, var(--abend-oben), var(--abend-unten));
}
.footer-link:hover { color: var(--cyan); }
.footer-link:hover .footer-link-label { color: var(--magenta); }

/* ── Projektseiten (case.css) ──────────────────────────────────── */
.case-kicker, .case-label { color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  .hero::after { display: none; }
}

/* ── Glas-Gruß: „lets go“ statt „moin“ ─────────────────────────── */
/* ── Gruß: „lets go“ in Neonschrift mit Glitch (seit 16.10.) ─────
   Aus dem Entwurf C: weiße Schrift mit Cyan-Leuchten, zwei farbige
   Risshälften (Magenta oben, Orange unten), die alle 3,2 s kurz
   auseinanderzucken, und eine verschwommene Spiegelung darunter. */
.neon-wort {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  pointer-events: none;
  perspective: 70rem;
  text-align: center;
}
.neon-gruss, .neon-spiegel {
  margin: 0;
  font-family: var(--font-titel);
  font-weight: 400;
  font-size: clamp(4.2rem, 15vw, 13rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  white-space: nowrap;
}
.neon-gruss {
  position: relative;
  color: transparent;
  -webkit-text-stroke: 2px var(--cyan);
}
.neon-voll {
  display: block;
  position: relative;
  color: #f6f5ee;
  -webkit-text-stroke: 0;
  text-shadow: 0 0 8px var(--cyan), 0 0 28px var(--cyan), 0 0 60px rgba(0, 240, 255, 0.6);
  animation: neonGlitch 3.2s steps(1) infinite;
}
.neon-voll::before, .neon-voll::after {
  content: attr(data-t);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  text-shadow: none;
  mix-blend-mode: screen;
}
.neon-voll::before { color: var(--magenta); clip-path: inset(0 0 62% 0); animation: neonRiss1 3.2s steps(1) infinite; }
.neon-voll::after  { color: var(--orange, #ff003c); clip-path: inset(58% 0 0 0); animation: neonRiss2 3.2s steps(1) infinite; }
@keyframes neonGlitch { 0%, 86%, 100% { transform: none; } 87% { transform: translate(3px, -2px) skewX(-8deg); } 89% { transform: translate(-3px, 1px); } 91% { transform: none; } }
@keyframes neonRiss1 { 0%, 84%, 100% { transform: translate(-3px, 0); } 85% { transform: translate(-14px, -3px); } 88% { transform: translate(9px, 2px); } }
@keyframes neonRiss2 { 0%, 84%, 100% { transform: translate(3px, 0); } 86% { transform: translate(16px, 3px); } 90% { transform: translate(-8px, 0); } }
.neon-spiegel {
  height: 0.55em;
  overflow: hidden;
  margin-top: 2px;
  color: var(--cyan);
  transform: scaleY(-1);
  filter: blur(3px);
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 75%);
          mask-image: linear-gradient(0deg, #000, transparent 75%);
  animation: neonWellen 4s ease-in-out infinite;
}
@keyframes neonWellen { 50% { transform: scaleY(-1) skewX(4deg); filter: blur(4px); } }
/* Die dritte Zeile des großen Satzes ist kleiner, sonst frisst sie den Kopf */
/* Auf dem Handy etwas tiefer, damit der Gruß nicht am Vorstellungstext klebt */
@media (max-width: 700px) { .neon-wort { top: 58%; } }
.hero-statement .hero-statement-klein {
  display: block;
  margin-top: 0.25em;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .neon-voll, .neon-voll::before, .neon-voll::after, .neon-spiegel { animation: none; }
}
.skeleton { filter: hue-rotate(-85deg) saturate(1.5) drop-shadow(0 0 1.5rem rgba(252, 238, 10, 0.45)); }
.warp-skelett { filter: hue-rotate(40deg) saturate(1.3) drop-shadow(0 0 1.5rem rgba(0, 240, 255, 0.55)); }
/* „frag mich“ im Footer bleibt das alte Glasbild, nur ins Magenta gedreht */
.site-footer .glas-wort { filter: hue-rotate(-160deg) saturate(2.2) brightness(1.25); }

/* Kachel mit Video statt Standbild (Claudias Rundgang) */
.work-figure .work-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #efe6d4;
}

/* ════════════════════════════════════════════════════════════════
   Zwischenstopp im Tunnel: die Gildenhalle
   Liegt als Ebene in der haftenden Tunnelbühne. script.js öffnet
   mitten im Flug einen Kreis (clip-path), dahinter die Taverne bei
   Nacht. Die Kamera fährt auf die Tür, dann durch die drei
   Stockwerke (Schankraum → Keller → Dachgeschoss), und der Kreis
   schließt sich wieder. Die Tür sitzt im Außenbild bei 45,3 % / 62 %.
   Figuren sind Bildstreifen: n Einzelbilder nebeneinander, die
   background-position springt mit steps() von Bild zu Bild.
   ════════════════════════════════════════════════════════════════ */
.tav {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background: #07040f;
  visibility: hidden;
  clip-path: circle(0px at 50% 50%);
}
.tav.is-da { visibility: visible; }
/* Außerhalb des Bildes stehen alle Figuren still */
.tav:not(.is-da) .tav-figur,
.tav:not(.is-da) .tav-drache { animation-play-state: paused; }

.tav-aussen,
.tav-flut,
.tav-bau { position: absolute; will-change: transform, opacity; }
.tav-aussen {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 60%;
}
.tav-flut {
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--tx, 50%) var(--ty, 55%), #ffe2b0 0%, #ff9a3c 30%, rgba(252, 238, 10, 0.55) 62%, rgba(5, 5, 5, 0.2) 90%);
}
.tav-bau { left: 0; top: 0; opacity: 0; }
.tav-etage {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
}
.tav-etage-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Neon-Dunst wie im übrigen Tunnel, damit die Comicbilder zur Seite passen */
.tav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(80% 70% at 50% 50%, transparent 55%, rgba(5, 5, 5, 0.7) 100%),
    linear-gradient(120deg, rgba(252, 238, 10, 0.12), transparent 45%, rgba(0, 240, 255, 0.10));
}

/* ── Figuren ──────────────────────────────────────────────────── */
.tav-figur {
  position: absolute;
  left: var(--x, 50%);
  bottom: calc(100% - var(--fuss));
  height: calc(var(--fh) * 0.0785%);
  aspect-ratio: var(--fw) / var(--fh);
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-size: calc(var(--n) * 100%) 100%;
  animation: tav-streifen var(--takt, 0.9s) steps(var(--n), jump-none) var(--warte, 0s) infinite;
}
.tav-spiegel { transform: translateX(-50%) scaleX(-1); }
@keyframes tav-streifen {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}
/* Läufer gehen hin und her und drehen sich am Wendepunkt um */
.tav-geht {
  animation:
    tav-streifen var(--takt, 0.7s) steps(var(--n), jump-none) var(--warte, 0s) infinite,
    tav-gehen var(--gang, 16s) linear var(--gwarte, 0s) infinite;
}
@keyframes tav-gehen {
  0%     { left: var(--von); transform: translateX(-50%) scaleX(1); }
  49.99% { left: var(--bis); transform: translateX(-50%) scaleX(1); }
  50%    { left: var(--bis); transform: translateX(-50%) scaleX(-1); }
  100%   { left: var(--von); transform: translateX(-50%) scaleX(-1); }
}
.tav-ritter       { --n: 5; --fw: 280; --fh: 382; }
.tav-soeldner     { --n: 5; --fw: 292; --fh: 375; }
.tav-magier       { --n: 5; --fw: 251; --fh: 320; }
.tav-hexenmeister { --n: 5; --fw: 240; --fh: 315; }
.tav-barde        { --n: 5; --fw: 224; --fh: 312; }
.tav-schmied      { --n: 5; --fw: 294; --fh: 418; }
.tav-peon         { --n: 5; --fw: 170; --fh: 248; --takt: 0.75s; }
.tav-peonlauf     { --n: 6; --fw: 140; --fh: 190; --takt: 0.6s; }
.tav-waldlaeufer  { --n: 6; --fw: 186; --fh: 330; --takt: 0.75s; }
.tav-druide       { --n: 6; --fw: 192; --fh: 318; --takt: 0.75s; }
/* Die Bilder kommen erst, wenn der Tunnel naht (script.js setzt
   .is-geladen) — sonst lädt jeder Besucher 1,8 MB auf Vorrat. */
.tav.is-geladen .tav-ritter       { background-image: url("assets/gilde/ritter-angriff.webp"); }
.tav.is-geladen .tav-soeldner     { background-image: url("assets/gilde/soeldner-angriff.webp"); }
.tav.is-geladen .tav-magier       { background-image: url("assets/gilde/magier-angriff.webp"); }
.tav.is-geladen .tav-hexenmeister { background-image: url("assets/gilde/hexenmeister-angriff.webp"); }
.tav.is-geladen .tav-barde        { background-image: url("assets/gilde/barde-angriff.webp"); }
.tav.is-geladen .tav-schmied      { background-image: url("assets/gilde/schmied-angriff.webp"); }
.tav.is-geladen .tav-peon         { background-image: url("assets/gilde/peon-arbeit.webp"); }
.tav.is-geladen .tav-peonlauf     { background-image: url("assets/gilde/peon-lauf.webp"); }
.tav.is-geladen .tav-waldlaeufer  { background-image: url("assets/gilde/waldlaeufer-lauf.webp"); }
.tav.is-geladen .tav-druide       { background-image: url("assets/gilde/druide-lauf.webp"); }

/* Der Drache schiebt sich von rechts ins Dachgeschoss */
.tav-drache {
  position: absolute;
  right: 0;
  bottom: 6%;
  z-index: 4;
  height: min(62%, 52vw);
  width: auto;
  aspect-ratio: 1376 / 768;
  transform: translateX(100%);
  pointer-events: none;
  filter: drop-shadow(0 0 2rem rgba(255, 0, 60, 0.35));
  animation: tav-schnauben 3.2s ease-in-out infinite;
}
@keyframes tav-schnauben {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -1.5%; }
}

/* ── Bildunterschriften im HUD-Stil ──────────────────────────── */
.tav-schild {
  position: absolute;
  z-index: 5;
  left: var(--pad);
  bottom: calc(var(--bar) + 1.4rem);
  max-width: min(34rem, calc(100% - 2 * var(--pad)));
  margin: 0;
  padding: 0.9rem 1.1rem 1rem;
  background: rgba(5, 5, 5, 0.86);
  border: 1px solid rgba(0, 240, 255, 0.5);
  border-left: 3px solid var(--magenta);
  box-shadow: 0 0 1.6rem rgba(0, 240, 255, 0.18);
  /* Kein backdrop-filter: unter dem clip-path-Kreis malt Chrome damit
     grauen Schnee außerhalb des Kreises. */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}
.tav-schild.is-da { opacity: 1; transform: none; pointer-events: auto; }
/* Hochkant steht das Stockwerk in der Mitte — das Schild rutscht
   nach oben, damit es keine Füße verdeckt. */
@media (max-aspect-ratio: 1/1) {
  .tav-schild { bottom: auto; top: calc(var(--bar) + 0.8rem); }
}
.tav-ort {
  margin: 0 0 0.35rem;
  color: var(--cyan);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}
.tav-satz {
  margin: 0;
  color: #fff;
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  line-height: 1.3;
}
.tav-link {
  display: inline-block;
  margin-top: 0.7rem;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.tav-link:hover,
.tav-link:focus-visible { color: var(--magenta); }

/* Ohne Bewegung gibt es keinen Flug — und damit keinen Zwischenstopp */
@media (prefers-reduced-motion: reduce) {
  .tav { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   Archiv: Diskettenbox mit den älteren Projekten
   ════════════════════════════════════════════════════════════════ */
/* Nur noch vier Kacheln: die letzte ist keine Schlusskachel mehr */
.work-item:last-child { grid-column: 3 / 5; margin-top: clamp(2rem, 6vw, 5rem); }
.work-item:last-child .work-figure { aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
  .work-item:last-child { grid-column: 1; margin-top: 0; }
  .work-item:last-child .work-figure { aspect-ratio: 2 / 1; }
}

.archiv, .disketten-flug { --disk: clamp(7.2rem, 12.5vw, 11rem); }
.archiv {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  margin-top: clamp(5rem, 12vw, 9rem);
}
.archiv-hinweis { color: var(--cyan); margin: 0; text-shadow: 0 0 8px rgba(0, 240, 255, 0.6); }

/* Die Box: rauchgraues Plastik von vorn, Deckel nach hinten geklappt */
.archiv-box {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  width: clamp(13rem, 24vw, 18rem);
  aspect-ratio: 1.25;
  transform-origin: 100% 100%;
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
  filter: drop-shadow(0 0 18px rgba(252, 238, 10, 0.35));
}
.archiv-box:hover { transform: rotate(-3deg) translateY(-4px); filter: drop-shadow(0 0 26px rgba(252, 238, 10, 0.6)); }
.archiv-box:focus-visible { outline: 2px solid var(--cyan); outline-offset: 8px; }

.archiv-deckel {
  position: absolute;
  left: 4%; right: 4%;
  top: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(120, 100, 170, 0.35), rgba(60, 40, 110, 0.55));
  border: 1px solid rgba(0, 240, 255, 0.45);
  transform: perspective(30rem) rotateX(58deg);
  transform-origin: 50% 100%;
}
.archiv-koerper {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 76%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 3%;
  padding: 0 7%;
}
/* Disketten, die oben aus der Box schauen */
.archiv-ruecken {
  flex: 1;
  height: 58%;
  margin-top: -18%;
  background: var(--c);
  border-radius: 3px 3px 0 0;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25), 0 0 10px color-mix(in srgb, var(--c) 60%, transparent);
}
.archiv-ruecken:nth-child(odd)  { transform: translateY(6%) rotate(-2deg); }
.archiv-ruecken:nth-child(3n)   { transform: translateY(-4%) rotate(2deg); }
/* Die Front: halbdurchsichtig, damit man die Disketten ahnt */
.archiv-front {
  position: absolute;
  inset: 22% 0 0 0;
  display: grid;
  place-content: center;
  gap: 0.25rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(40, 25, 80, 0.72), rgba(14, 8, 34, 0.94));
  border: 1px solid rgba(0, 240, 255, 0.55);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  box-shadow: inset 0 0 24px rgba(0, 240, 255, 0.18);
}
.archiv-front span {
  font-family: var(--font-titel);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--fg);
  letter-spacing: 0.12em;
  text-shadow: 0 0 10px rgba(252, 238, 10, 0.8);
}
.archiv-front small {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* Umkippen: über die rechte untere Ecke, mit kurzem Zögern */
.archiv.ist-offen .archiv-box {
  animation: umkippen 0.6s cubic-bezier(0.5, -0.4, 0.6, 1.2) forwards;
  pointer-events: none;
}
@keyframes umkippen {
  0%   { transform: rotate(0); }
  25%  { transform: rotate(-6deg); }
  100% { transform: rotate(94deg) translateY(4%); }
}
.archiv.ist-offen .archiv-hinweis { opacity: 0; }
.archiv-ruecken { transition: opacity 0.2s linear 0.3s; }
.archiv.ist-offen .archiv-ruecken { opacity: 0; }

/* ── Eine Diskette (3,5 Zoll), wie aus der Schublade ────────────
   Schwarzes Plastik, Metallschieber oben, ein Papieretikett mit
   farbigem Kopfstreifen. Beschriftet von Hand: Titel mit Edding,
   der Inhalt mit Kuli. Die Farbe des Projekts steckt nur im Streifen
   und im Leuchten beim Überfahren. */
.disketten {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.diskette {
  position: relative;
  display: block;
  width: var(--disk);
  aspect-ratio: 1 / 1.03;
  background:
    radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.05), transparent 60%),
    linear-gradient(160deg, #3a3842 0%, #1d1c22 45%, #141318 100%);
  clip-path: polygon(0 0, calc(100% - 7%) 0, 100% 7%, 100% 100%, 0 100%);
  border-radius: 3px;
  color: #1b2a6b;
  text-decoration: none;
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
  transform: rotate(var(--neig, 0deg));
}
/* feine Kante und zwei Rillen im Plastik */
.diskette::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  box-shadow: inset 0 -6px 0 -5px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
/* Schreibschutz-Fenster unten links */
.diskette::after {
  content: "";
  position: absolute;
  left: 5%;
  bottom: 4%;
  width: 7%;
  height: 7%;
  background: #08070b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.diskette:hover,
.diskette:focus-visible,
.diskette.ist-gewaehlt {
  filter: drop-shadow(0 0 14px var(--c)) drop-shadow(0 0 28px rgba(252, 238, 10, 0.4));
  transform: translateY(-4px) rotate(var(--r, var(--neig, 0deg))) scale(1.06);
  outline: none;
}
/* Metallschieber oben, mit Fenster */
.diskette-schieber {
  position: absolute;
  top: 0;
  left: 22%;
  width: 56%;
  height: 30%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.15)),
    linear-gradient(180deg, #e4e8ee, #9aa2af);
  border-radius: 0 0 2px 2px;
}
.diskette-schieber::after {
  content: "";
  position: absolute;
  top: 16%;
  left: 58%;
  width: 20%;
  height: 64%;
  background: #121016;
  border-radius: 1px;
}
/* Papieretikett mit farbigem Kopfstreifen und Linien */
.diskette-etikett {
  position: absolute;
  left: 8%; right: 8%;
  top: 37%;
  bottom: 11%;
  padding: 7% 7% 5%;
  background:
    linear-gradient(180deg, var(--c) 0 9%, transparent 9%),
    repeating-linear-gradient(180deg, transparent 0 calc(1.05em - 1px), rgba(40, 90, 200, 0.2) calc(1.05em - 1px) 1.05em) 0 0.9em,
    #f6f1e4;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.15);
  display: grid;
  align-content: start;
  gap: 0.1rem;
  overflow: hidden;
  transform: rotate(-0.6deg);
}
.diskette-etikett b {
  margin-top: 0.35em;
  font-family: "Permanent Marker", var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--disk) * 0.105);
  line-height: 1.05;
  letter-spacing: 0;
  color: #15131c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.diskette-inhalt {
  font-family: "Caveat", cursive;
  font-weight: 500;
  font-size: calc(var(--disk) * 0.098);
  line-height: 1.02;
  color: #1d3fa8;
  transform: rotate(-1deg);
}
.diskette-etikett small {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: calc(var(--disk) * 0.05);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c6478;
}
/* eingeprägtes HD unten rechts */
.diskette-hd {
  position: absolute;
  right: 5%;
  bottom: 0.6%;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(var(--disk) * 0.055);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.28);
}

/* ── Die Vorschau beim Überfahren ─────────────────────────────────
   Eine Karte mit dem alten Vorschaubild. Sie baut sich aus Pixeln
   in der Diskettenfarbe auf, dann zerfallen die Pixel und geben das
   Bild frei — wie früher die Kacheln, nur rückwärts: erst lädt die
   Diskette, dann sieht man, was drauf ist. Gezeichnet von script.js. */
.disk-vorschau {
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  width: min(25rem, calc(100vw - 2rem));
  display: block;
  color: var(--fg);
  text-decoration: none;
  background: rgba(5, 5, 5, 0.94);
  border: 1px solid var(--vf, var(--cyan));
  box-shadow: 0 0 22px color-mix(in srgb, var(--vf, #00f0ff) 55%, transparent), 6px 6px 0 var(--magenta);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s linear, visibility 0s linear 0.12s;
  pointer-events: none;
}
.disk-vorschau.ist-da {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.08s linear;
}
.disk-vorschau.ist-da.ist-tippbar { pointer-events: auto; }
.disk-vorschau-bild {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #000;
}
.disk-vorschau-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
}
.disk-vorschau.ist-frei .disk-vorschau-bild img { opacity: 1; }
.disk-vorschau-bild canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.disk-vorschau-text {
  padding: 0.8rem 1rem 0.9rem;
  display: grid;
  gap: 0.45rem;
}
.disk-vorschau-text p {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}
.disk-vorschau-text span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}
.disk-vorschau-text span::after { content: " →"; }

/* Mit Skript: die Disketten warten in der Box */
.archiv.js .disketten { display: none; }
.archiv.js.ist-offen .disketten { display: flex; }

/* Die fliegende Ebene über allem */
.disketten-flug {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.disketten-flug .diskette {
  position: absolute;
  left: 0; top: 0;
  pointer-events: auto;
}
.archiv-zu {
  position: fixed;
  z-index: 71;
  left: 50%;
  bottom: calc(var(--bar) + 1rem);
  transform: translateX(-50%);
  appearance: none;
  border: 1px solid var(--cyan);
  background: rgba(5, 5, 5, 0.85);
  color: var(--cyan);
  padding: 0.7rem 1.2rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4), 5px 5px 0 var(--magenta);
}
.archiv-zu:hover { background: var(--cyan); color: var(--nacht); }

/* Alles, was die Disketten wegschieben */
.wird-verdraengt {
  transition: transform 0.75s cubic-bezier(0.55, -0.25, 0.3, 1.1), opacity 0.6s var(--ease) !important;
}

/* ════════════════════════════════════════════════════════════════
   Edgerunners-Schicht (seit 16.10.2026)
   Fabian wollte Stil, Farben und den Verzerr-Effekt von der
   Edgerunners-Seite: Gelb und Schwarz als Grundton, Cyan und Rot
   als Funken, dicke schmale Großbuchstaben, eckige Knöpfe mit
   Kerbe. Der Verzerr-Effekt selbst steckt in script.js
   („Verzerren“), das SVG-Filter dazu baut das Skript.
   ════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Anton";
  src: url("assets/fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ── Überschriften: schmal, fett, mit Farbversatz an der Kante ──── */
.hero-statement,
.statement-title,
.footer-title,
.warp-line,
.marquee span,
.case-title,
.legal h1,
.hero-name {
  font-family: var(--font-titel);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.hero-statement,
.footer-title,
.case-title,
.legal h1 {
  text-shadow: -2px 0 0 rgba(255, 0, 60, 0.9), 2px 0 0 rgba(0, 240, 255, 0.9), 0 0 34px rgba(252, 238, 10, 0.18);
}
.hero-statement { line-height: 0.92; }
.hero-name { line-height: 0.95; letter-spacing: 0.02em; }
.hero-statement .hero-statement-klein { letter-spacing: 0.02em; text-shadow: -1px 0 0 rgba(255, 0, 60, 0.8); }
/* Der Gruß bleibt in der Neonschrift, die Fabian ausgesucht hat */
.neon-gruss, .neon-spiegel { font-family: "Audiowide", "Rajdhani", sans-serif; }

/* Dunkler Schleier hinter der festen Kopfleiste, damit sie auch über
   der gelben Fläche lesbar bleibt (wie bei Edgerunners) */
.site-header { background: linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0)); }
.site-header::after { background: linear-gradient(90deg, var(--magenta), var(--cyan) 60%, var(--orange)); }

/* ── Eckige Knöpfe mit Kerbe ──────────────────────────────────────
   Rahmen per clip-path als Ring (evenodd), unten rechts abgeschrägt,
   links ein kleiner Strich. Beim Überfahren füllt sich der Knopf
   gelb, der Text wird schwarz. */
.btn,
.site-header .nav-link,
.tav-link,
.work-hover-label {
  --kn: 11px;
  --knopf: var(--magenta);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 1.15rem 0.56rem 1.45rem;
  border: 0;
  color: var(--knopf);
  background: rgba(0, 0, 0, 0.55);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kn)), calc(100% - var(--kn)) 100%, 0 100%);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: none;
  transition: background-color 0.12s linear, color 0.12s linear;
}
.btn::before,
.site-header .nav-link::before,
.tav-link::before,
.work-hover-label::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 1;
  background: var(--knopf);
  pointer-events: none;
  transition: none;
  clip-path: polygon(evenodd,
    0 0, 100% 0, 100% calc(100% - var(--kn)), calc(100% - var(--kn)) 100%, 0 100%, 0 0,
    1.5px 1.5px, 1.5px calc(100% - 1.5px), calc(100% - var(--kn) - 0.6px) calc(100% - 1.5px),
    calc(100% - 1.5px) calc(100% - var(--kn) - 0.6px), calc(100% - 1.5px) 1.5px, 1.5px 1.5px);
}
.btn::after,
.site-header .nav-link::after,
.tav-link::after,
.work-hover-label::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  width: 0.55rem;
  height: 2px;
  margin-top: -1px;
  background: var(--knopf);
  transform: none;
  transition: none;
}
.btn:hover,
.btn:focus-visible,
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible,
.tav-link:hover,
.tav-link:focus-visible,
.work-link:hover .work-hover-label,
.work-link:focus-visible .work-hover-label,
.work-item.ist-aktiv .work-hover-label {
  background: var(--knopf);
  color: #000;
  border-color: transparent;
}
.btn:hover::after,
.site-header .nav-link:hover::after,
.tav-link:hover::after,
.work-link:hover .work-hover-label::after,
.work-item.ist-aktiv .work-hover-label::after { background: #000; transform: none; }
.btn-primary { background: var(--magenta); color: #000; }
.btn-primary:hover { --knopf: var(--cyan); background: var(--cyan); color: #000; }
.site-header .nav-link {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 0.45rem 0.95rem 0.4rem 1.2rem;
  --kn: 8px;
}
.work-hover-label { margin-top: 0.4rem; font-size: 0.8rem; }

/* ── Die gelbe Fläche: „Wie das läuft“ ────────────────────────────
   Wie die gelben Abschnitte bei Edgerunners: schwarze Schrift,
   oben eine ausgefranste Kante und schwarze Schraffur. */
.statement {
  --fg: #0a0a0a;
  --muted: #2e2c08;
  --accent: #ff003c;
  --headset-gruen: #000;
  position: relative;
  color: var(--fg);
  background: var(--magenta);
  margin-top: 18px;
}
.statement::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -17px;
  height: 18px;
  background: var(--magenta);
  clip-path: polygon(0 100%, 0 62%, 4% 62%, 4.6% 30%, 5.4% 62%, 19% 62%, 20% 0, 21.4% 62%, 37% 62%, 37.6% 38%,
    38.4% 62%, 52% 62%, 53% 12%, 54.2% 62%, 70% 62%, 70.8% 44%, 71.6% 62%, 86% 62%, 87% 8%, 88.2% 62%, 100% 62%, 100% 100%);
}
.statement::after {
  content: "";
  position: absolute;
  left: var(--pad);
  top: 1.2rem;
  width: clamp(7rem, 16vw, 13rem);
  height: 0.9rem;
  background: repeating-linear-gradient(115deg, #000 0 4px, transparent 4px 9px);
}
.statement-label { color: #000; }
.statement-title { text-shadow: 2px 0 0 rgba(0, 240, 255, 0.85); line-height: 1.02; }
.statement-title .accent { color: #ff003c; text-shadow: 2px 0 0 rgba(0, 0, 0, 0.9); }
.statement-text { color: #1d1b06; font-weight: 600; }
.statement ::selection { background: #000; color: var(--magenta); }

/* Unter der gelben Fläche wieder Schwarz, mit gerader Kante und
   gelbem Schraffurstreifen rechts */
.work { position: relative; }
.work::before {
  content: "";
  position: absolute;
  right: var(--pad);
  top: 0;
  width: clamp(6rem, 14vw, 11rem);
  height: 0.7rem;
  background: repeating-linear-gradient(115deg, var(--magenta) 0 4px, transparent 4px 9px);
}

/* Kachel-Etiketten: gelb mit schwarzer Schrift */
.work-kind { background: var(--magenta); color: #000; box-shadow: 0 0 14px rgba(252, 238, 10, 0.45); }

/* ── Verzerren: kurze Störung beim Überfahren ─────────────────────
   Das Filter baut script.js. Solange .verzerrt sitzt, hängt es am
   Element; der Farbversatz kommt aus dem Filter selbst. */
.verzerrt { will-change: filter; }
@media (prefers-reduced-motion: reduce) {
  .verzerrt { filter: none !important; }
}

/* Startbild: Schwarz mit wenig Gelb (viel Gelb auf Schwarz wird oliv),
   dafür Rot oben rechts und Cyan unten rechts */
.hero {
  background:
    radial-gradient(55% 45% at 10% 0%, rgba(252, 238, 10, 0.12), transparent 70%),
    radial-gradient(40% 40% at 88% 8%, rgba(255, 0, 60, 0.16), transparent 70%),
    radial-gradient(50% 55% at 96% 92%, rgba(0, 240, 255, 0.20), transparent 70%),
    linear-gradient(178deg, var(--himmel-oben) 0%, var(--himmel-unten) 60%, var(--nacht) 100%);
}
/* Auf hellen Kachelfarben (Cyan) steht die Frage schwarz */
.work-hover-frage { color: var(--hover-text, #fff); }

/* ════════════════════════════════════════════════════════════════
   Gildenhalle wie im Original (seit 16.10.2026)
   Fabian wollte den Zwischenstopp näher an seiner echten Gildenhalle:
   Holztafeln mit Goldschrift (Georgia), zwei Tränke für den
   Verbrauch, die Ehrentafel, Namensschilder über den Helden und im
   Keller die Peons des Tages. Alle Titel und Werte sind ausgedacht.
   Die Tränke malt script.js („Gildenhalle: Tränke“).
   ════════════════════════════════════════════════════════════════ */
.tav { --gh-holz: rgba(32, 22, 15, 0.86); --gh-rand: #4a3424; --gh-gold: #e8b84a; --gh-mut: #b49c7c; --gh-fg: #f1e6d2; }
.tav-etage { container-type: inline-size; }

.gh-hud {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--gh-fg);
}
.tav.ist-innen .gh-hud { opacity: 1; }
.gh-tafelholz {
  position: absolute;
  margin: 0;
  background: var(--gh-holz);
  border: 0.13rem solid var(--gh-rand);
  border-radius: 0.7rem;
  box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.55);
}
.gh-h { margin: 0; font-size: 1rem; font-weight: 700; color: var(--gh-gold); letter-spacing: 0.04em; }
.gh-u { margin: 0.7rem 0 0.3rem; font-size: 0.74rem; color: var(--gh-mut); text-transform: uppercase; letter-spacing: 0.08em; }
.gh-m { display: block; font-size: 0.68rem; color: var(--gh-mut); font-weight: 400; }

.gh-kopf {
  left: var(--pad);
  top: calc(var(--bar) + 0.6rem);
  display: flex;
  gap: 0.3rem 0.8rem;
  align-items: baseline;
  padding: 0.35rem 0.9rem;
  font-size: 0.95rem;
}
.gh-kopf b { color: var(--gh-gold); font-size: 1.15rem; }
.gh-sub { color: var(--gh-mut); font-size: 0.78rem; }

.gh-verbrauch {
  left: var(--pad);
  top: calc(var(--bar) + 3.5rem);
  width: 7.6rem;
  padding: 0.6rem 0.45rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: center;
  text-align: center;
}
.gh-phiole canvas { display: block; width: 5.4rem; height: 5.4rem; margin: 0 auto 0.15rem; }
.gh-phiole b { display: block; font-size: 0.82rem; }
.gh-phiole span { display: block; font-size: 0.66rem; color: var(--gh-mut); line-height: 1.3; }

.gh-tafel {
  right: var(--pad);
  top: calc(var(--bar) + 0.6rem);
  width: 18.5rem;
  padding: 0.65rem 0.55rem;
  background: rgba(32, 22, 15, 0.94);
  transition: opacity 0.6s ease;
}
/* Kommt der Drache, macht die Tafel ihm Platz */
.tav.drache-da .gh-tafel { opacity: 0; }
.gh-eintrag {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.22rem 0.35rem;
  border-left: 0.25rem solid hsl(var(--farbe), 75%, 48%);
  border-radius: 0.45rem;
}
.gh-eintrag + .gh-eintrag { margin-top: 0.15rem; }
.gh-platz { flex: none; width: 1.3rem; text-align: center; font-size: 0.92rem; }
.gh-bild {
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25) url("assets/gilde/portraets.webp") no-repeat;
  background-size: 800% 100%;
  background-position: calc(var(--b) * 100% / 7) 0;
}
.gh-tx { flex: 1; min-width: 0; }
.gh-ti {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.22;
}
.gh-lv { flex: none; text-align: right; font-size: 0.76rem; color: var(--gh-gold); font-weight: 700; }
.gh-trenn { margin-top: 0.7rem; padding-top: 0.1rem; border-top: 0.13rem solid var(--gh-rand); }
@media (max-height: 760px) {
  .gh-trenn { display: none; }
  .gh-phiole canvas { width: 4.2rem; height: 4.2rem; }
}

/* ── Namensschilder über den Helden ───────────────────────────────
   Sie stehen im Stockwerk und fahren mit der Kamera. Die Größe hängt
   an der Breite des Stockwerks (cqw), damit sie zum Bild passen. */
.gh-schild {
  --gh-k: 2.2em;
  position: absolute;
  z-index: 1;
  left: var(--x, 50%);
  bottom: calc(100% - var(--fuss) + var(--fh) * 0.0785% + 0.5em + var(--stufe, 0) * 3.6em);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  font: 700 clamp(8.5px, 0.66cqw, 14px) / 1.15 Georgia, "Times New Roman", serif;
  pointer-events: none;
}
/* Linie vom Schild zum Kopf */
.gh-schild::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 0.1em);
  width: 2px;
  height: calc(0.5em + var(--stufe, 0) * 3.6em);
  margin-left: -1px;
  background: rgba(255, 230, 180, 0.55);
}
.gh-geht { animation: gh-mitgehen var(--gang, 16s) linear var(--gwarte, 0s) infinite; }
@keyframes gh-mitgehen {
  0%   { left: var(--von); }
  50%  { left: var(--bis); }
  100% { left: var(--von); }
}
.tav:not(.is-da) .gh-geht { animation-play-state: paused; }
.gh-band {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5em;
  max-width: 15em;
  margin: 0 -0.55em;
  padding: 0.35em 0.9em 0.35em 0.8em;
  background: #ead6ae;
  border: 0.18em solid #5a3d22;
  border-radius: 0.45em;
  box-shadow: inset 0.55em 0 0 hsl(var(--farbe), 75%, 48%), 0 0.25em 0.6em rgba(0, 0, 0, 0.45);
  color: #2a1406;
}
.gh-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Level-Wappen */
.gh-wappen {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 2.1em;
  margin-left: 0.3em;
  padding-bottom: 0.25em;
  background: #2a1d14;
  color: #ffd54a;
  font-size: 0.95em;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%);
}
/* Kugeln: links Leben (rot, ab 80 % voll giftgrün), rechts Mana */
.gh-kugel {
  --k1: #ff7a7a; --k2: #c8161f; --k3: #6e0a0f;
  position: relative;
  z-index: 2;
  flex: none;
  width: var(--gh-k);
  height: var(--gh-k);
  border-radius: 50%;
  border: 0.16em solid #b8862f;
  box-shadow: 0 0 0 0.16em #120b06, 0 0.2em 0.5em rgba(0, 0, 0, 0.5);
  background:
    radial-gradient(ellipse 32% 18% at 32% 26%, rgba(255, 255, 255, 0.32) 0 99%, transparent 100%),
    linear-gradient(to top, var(--k3) 0, var(--k2) calc(var(--v) * 55%), var(--k1) calc(var(--v) * 100%), #24170f calc(var(--v) * 100%));
}
.gh-mana { --k1: #9ccbff; --k2: #2161d8; --k3: #0c2a78; }
.gh-gift { --k1: #d2ff6a; --k2: #4fbf14; --k3: #1d5a08; }
.gh-gift::after {
  content: "☠";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.05em;
  text-shadow: 0 0 3px #000;
}
.gh-xp {
  position: absolute;
  left: calc(var(--gh-k) - 0.2em);
  right: calc(var(--gh-k) - 0.2em);
  top: calc(100% + 0.25em);
  height: 0.38em;
  border-radius: 1em;
  background: linear-gradient(90deg, rgba(242, 242, 242, 0.88) calc(var(--xp) * 100%), rgba(0, 0, 0, 0.5) 0);
}
.gh-arbeit { background: linear-gradient(90deg, #fff calc(var(--xp) * 100%), rgba(0, 0, 0, 0.5) 0); box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.6); }
/* Marken über dem Band */
.gh-marke {
  position: absolute;
  bottom: calc(100% + 0.25em);
  padding: 0.2em 0.55em;
  border-radius: 0.35em;
  font-style: normal;
  font-size: 0.85em;
  white-space: nowrap;
  color: #fff;
}
.gh-faellig { right: 0; background: #b3121b; }
.gh-guenstig { right: 0; background: #2161d8; }
.gh-wartet { left: 0; background: #d9a521; color: #2a1406; }

/* ── Keller: die Ehrenwand ─────────────────────────────────────── */
.gh-wand {
  position: absolute;
  left: 42.5%;
  width: 15.5%;
  top: 14.5%;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
}
.gh-pergament {
  padding: 0.55cqw 0.4cqw 0.6cqw;
  background: #ead6ae;
  border: 0.22cqw solid #5a3d22;
  border-radius: 0.4cqw;
  box-shadow: 0 0.3cqw 0.8cqw rgba(0, 0, 0, 0.5);
  color: #2a1406;
}
.gh-pergament b { display: block; font-size: 1.32cqw; line-height: 1.15; }
.gh-pergament i { display: block; font-size: 0.72cqw; color: #6a4a2a; line-height: 1.2; }
.gh-rahmen-reihe { display: flex; justify-content: center; gap: 0.9cqw; margin-top: 2.1cqw; }
.gh-rahmen {
  position: relative;
  margin: 0;
  width: 4.4cqw;
}
/* Nagel und Schnur */
.gh-rahmen::before {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: -0.85cqw;
  height: 0.85cqw;
  background:
    radial-gradient(circle at 50% 0.16cqw, #3a2a20 0.14cqw, transparent 0.16cqw),
    linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(30, 20, 12, 0.8) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(30, 20, 12, 0.8) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat;
}
.gh-rahmen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 0.42cqw;
  background:
    linear-gradient(hsl(var(--farbe), 30%, 26%), hsl(var(--farbe), 30%, 26%)) content-box,
    linear-gradient(135deg, #fbe39a, #d9a63a 45%, #8a5c14);
  outline: 1px solid #5a3a08;
  box-shadow: 0.3cqw 0.4cqw 0 rgba(0, 0, 0, 0.35);
}
.gh-rahmen figcaption {
  margin-top: 0.35cqw;
  font-size: clamp(7px, 0.62cqw, 12px);
  color: #f1e6d2;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

/* ── Handy und hochkant: eine schmale Leiste unten ─────────────── */
@media (max-aspect-ratio: 1/1) {
  .gh-kopf { display: none; }
  .gh-verbrauch {
    top: auto;
    bottom: calc(var(--bar) + 0.5rem);
    width: 7.3rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.1rem 0.35rem;
    padding: 0.35rem 0.3rem 0.4rem;
  }
  .gh-verbrauch .gh-h { width: 100%; font-size: 0.72rem; }
  .gh-phiole { width: 2.9rem; }
  .gh-phiole canvas { width: 2.6rem; height: 2.6rem; }
  .gh-phiole b { font-size: 0.56rem; font-weight: 400; color: var(--gh-mut); white-space: nowrap; }
  .gh-phiole span { display: none; }
  .gh-tafel {
    top: auto;
    bottom: calc(var(--bar) + 0.5rem);
    left: calc(var(--pad) + 7.7rem);
    width: auto;
    padding: 0.35rem 0.4rem 0.4rem;
  }
  .gh-tafel .gh-h { font-size: 0.72rem; }
  .gh-tafel .gh-u, .gh-trenn, .gh-eintrag:nth-of-type(n + 4) { display: none; }
  .gh-eintrag { gap: 0.3rem; padding: 0.12rem 0.25rem; }
  .gh-eintrag + .gh-eintrag { margin-top: 0.05rem; }
  .gh-platz { width: 1rem; font-size: 0.72rem; }
  .gh-bild { width: 1.5rem; height: 1.5rem; }
  .gh-ti { -webkit-line-clamp: 1; font-size: 0.68rem; }
  .gh-tx .gh-m { display: none; }
  .gh-lv { font-size: 0.64rem; }
  .gh-lv .gh-m { display: none; }
}