/* =========================================================
   HAXENFÜHRER — Opulenz-Schicht
   Glut-Shader, Lichtkegel, Goldfolie, Fetttropfen.
   ========================================================= */

/* ---------- Scroll-Fortschritt: ein Speckstreifen, der sich füllt ---------- */
.fortschritt {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  background: transparent; pointer-events: none;
}
.fortschritt i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #8C3A12 0%, var(--kruste) 45%, var(--senf) 75%, var(--kruste-hell) 100%);
  box-shadow: 0 0 14px rgba(233,150,60,.8);
  transition: width .08s linear;
}

/* ---------- Vignette über dem Ganzen ---------- */
.vignette {
  position: fixed; inset: 0; z-index: 89; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 42%, transparent 44%, rgba(4,3,2,.55) 100%);
}

/* ---------- Hero: Glas-Ebene, Lichtsäule, Typo-Prunk ---------- */
.held { isolation: isolate; }
.held::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,8,6,.35) 0%, transparent 22%, transparent 72%, var(--russ) 100%);
}

.wortmarke { position: relative; }
.wm-1 {
  position: relative;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
/* Geschmolzener Farbverlauf, der langsam durch die Lettern wandert */
.wm-2 {
  background: linear-gradient(100deg,
    #7A2E0A 0%, var(--glut) 14%, var(--kruste) 28%, #FFE6B0 38%,
    var(--kruste-hell) 48%, var(--kruste) 62%, var(--glut) 78%, #7A2E0A 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: fliessen 11s ease-in-out infinite;
  filter: drop-shadow(0 0 34px rgba(255,83,36,.35));
}
@keyframes fliessen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Gespiegelter Schimmer unter der Wortmarke */
.wortmarke::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.12em; height: .35em;
  background: linear-gradient(to bottom, rgba(233,150,60,.16), transparent);
  filter: blur(14px);
  pointer-events: none;
}

.stempel {
  box-shadow: 0 0 26px -6px rgba(255,83,36,.45), inset 0 0 22px -10px rgba(255,83,36,.6);
  backdrop-filter: blur(2px);
}

/* Kennzahlen: Zahlen mit Metallglanz */
.kennzahlen dd:not(.gag) {
  background: linear-gradient(168deg, #FFF6E8 0%, var(--sahne) 40%, #B9A392 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Krustometer: Glaskuppel ---------- */
.krustometer {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,83,36,.13), transparent 60%),
    linear-gradient(165deg, var(--pfanne-hoch), var(--pfanne-tief));
  box-shadow:
    inset 0 1px 0 rgba(246,234,220,.09),
    inset 0 0 60px -20px rgba(255,83,36,.35),
    0 40px 80px -40px #000;
}
.krustometer::before {
  content: ''; position: absolute; top: -60%; left: -20%; width: 90%; height: 150%;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.055) 50%, transparent 60%);
  transform: rotate(8deg);
  pointer-events: none;
}
#gauge { filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }

/* ---------- Fetttropfen als Abschnittsübergang ---------- */
.tropf {
  display: block; width: 100%; height: 46px; margin: 0;
  position: relative; z-index: 3; margin-top: -1px;
  pointer-events: none;
}
.tropf path { fill: var(--tropf-farbe, var(--pfanne)); }

/* ---------- Abschnittskopf: Riesen-Geisterglyph ---------- */
.abschnitt { overflow: clip; }
.geist-glyph {
  position: absolute; right: -3%; top: 8%;
  width: clamp(240px, 34vw, 520px); height: auto;
  color: var(--sahne); opacity: .022;
  pointer-events: none; z-index: 0;
  transform: rotate(-12deg);
}
.geist-glyph svg { width: 100%; height: 100%; fill: currentColor; }
.abschnitt > .wrap { position: relative; z-index: 1; }

/* Kapitälchen-Zahl vor der Überschrift */
.abschnitt-kopf h2 {
  background: linear-gradient(172deg, #FFFFFF 0%, var(--sahne) 45%, #A08977 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.5));
}

/* ---------- Dossiers: Lichtkegel + 3D-Neigung + Kanten-Verlauf ---------- */
.dossier-grid { perspective: 1400px; }
.dossier {
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden;
  will-change: transform;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .2s ease, box-shadow .3s ease;
}
.dossier::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              rgba(255,155,70,.16), transparent 62%);
  opacity: 0; transition: opacity .3s ease;
}
.dossier:hover::before, .dossier:focus-visible::before { opacity: 1; }
.dossier:hover {
  box-shadow: 0 30px 60px -35px rgba(255,83,36,.55), 0 0 0 1px rgba(233,150,60,.22);
}
/* Flex-Kinder heben sich ohne position:relative über den Lichtkegel —
   sonst verlöre .frisch seine absolute Lage. */
.dossier > * { z-index: 1; }

/* Der Krustenindex bekommt Metallglanz statt Flachfarbe */
.dossier-score {
  background: linear-gradient(168deg, color-mix(in srgb, var(--stufe) 55%, #FFFFFF) 0%, var(--stufe) 55%, color-mix(in srgb, var(--stufe) 62%, #000000) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--stufe) 42%, transparent));
}

/* ---------- Podest: Goldfolie mit wanderndem Schimmer ---------- */
.rang { position: relative; overflow: hidden; }
.rang::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--rang-farbe) 22%, transparent) 48%, transparent 62%);
  background-size: 280% 100%;
  animation: folie 7s ease-in-out infinite;
  opacity: .85;
}
.rang-2::after { animation-delay: .9s; }
.rang-3::after { animation-delay: 1.8s; }
@keyframes folie {
  0%   { background-position: 130% 0; }
  55%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}
.rang > * { z-index: 1; }
.rang-score {
  background: linear-gradient(168deg, #FFFFFF 0%, var(--rang-farbe) 45%, color-mix(in srgb, var(--rang-farbe) 55%, #000) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--rang-farbe) 45%, transparent));
}
.rang-1 {
  box-shadow: 0 0 0 1px rgba(239,196,99,.25), 0 40px 90px -50px rgba(239,196,99,.6);
}

/* ---------- Gummikruste: nervöses Flackern des Randes ---------- */
.schande { position: relative; overflow: hidden; }
.schande::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--mies);
  box-shadow: 0 0 18px 2px rgba(224,82,63,.6);
  animation: zucken 4.5s ease-in-out infinite;
}
@keyframes zucken {
  0%, 88%, 100% { opacity: 1; }
  90% { opacity: .25; }
  93% { opacity: .9; }
  95% { opacity: .35; }
}

/* ---------- Knöpfe: magnetisch + Glanzkante ---------- */
.btn-glut {
  position: relative; overflow: hidden;
  will-change: transform;
}
.btn-glut::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  transition: left .6s cubic-bezier(.2,.7,.3,1);
}
.btn-glut:hover::after { left: 120%; }

/* ---------- Glasige Bedienleisten ---------- */
.steuerung {
  background: linear-gradient(180deg, rgba(27,22,19,.6), rgba(19,16,13,.25));
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 1.1rem clamp(1rem, 2.5vw, 1.4rem);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(246,234,220,.05);
}

/* ---------- Formular: geprägte Felder ---------- */
.feld input, .feld textarea, .such-feld input, .sortier select {
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}
.feld input:focus, .feld textarea:focus {
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(233,150,60,.16);
}
.formular fieldset { position: relative; }

/* Schieber-Wert mit Glut */
.schieber-wert {
  background: linear-gradient(168deg, #FFE9C6, var(--kruste) 55%, #A2480F);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(233,150,60,.5));
}

/* ---------- Akte: Papierprägung ---------- */
.akte {
  box-shadow: 0 60px 120px -40px #000, 0 0 0 1px rgba(233,150,60,.14);
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(255,83,36,.08), transparent 60%),
    var(--pfanne);
}
.akte-lokal {
  background: linear-gradient(170deg, #FFFFFF, var(--sahne) 50%, #9D8674);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.akte-score {
  background: linear-gradient(168deg, color-mix(in srgb, var(--stufe) 50%, #FFF) 0%, var(--stufe) 55%, color-mix(in srgb, var(--stufe) 60%, #000) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--stufe) 45%, transparent));
}

/* ---------- Scroll-getriebene Drift (nur wo unterstützt) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .abschnitt-kopf, .dossier, .rang, .waehrungen li, .krustometer {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 72%;
    }
    @keyframes drift {
      from { transform: translateY(26px) scale(.985); }
      to   { transform: translateY(0) scale(1); }
    }
    /* Neigung darf die Drift nicht überschreiben */
    .dossier.gekippt { animation: none; }
  }
}

/* ---------- Laufband: Prägung ---------- */
.laufband {
  background: linear-gradient(180deg, var(--kruste-hell) 0%, var(--kruste) 40%, #C4761F 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 6px rgba(0,0,0,.28);
}
.laufband-spur span { text-shadow: 0 1px 0 rgba(255,255,255,.22); }

/* ---------- Fuß: Glut am Horizont ---------- */
.fuss {
  position: relative;
  background:
    radial-gradient(80% 120% at 50% 130%, rgba(255,83,36,.16), transparent 60%),
    var(--pfanne-tief);
}
.fraktur {
  background: linear-gradient(168deg, var(--kruste-hell), var(--kruste) 45%, #8C3A12);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(233,150,60,.35));
}

@media (prefers-reduced-motion: reduce) {
  .wm-2 { animation: none; }
  .rang::after { animation: none; }
  .schande::after { animation: none; }
}

/* =========================================================
   Fluss-Korrekturen: Spans, die Blockverhalten brauchen
   ========================================================= */
.dossier-az, .dossier-lokal, .dossier-stadt, .dossier-score,
.w-name, .w-text, .k-name,
.schande-titel, .schande-lokal, .schande-zitat,
.rang-medaille, .rang-lokal, .rang-stadt, .rang-zitat,
.geraet-label, .geraet-sub, .pz-anzahl-label,
.dossier-note { display: block; }

.dossier-kopf > span:first-child { min-width: 0; }
.punkt-grund { display: block; min-width: 0; }
.messwerte, .dossier-punkte, .rang-punkte { min-width: 0; }
.dossier-titel, .dossier-anriss { display: block; }
.dossier-anriss {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  line-clamp: 3; overflow: hidden;
}

/* Burst-Splitter behalten ihre Währungsfarbe */
.burst i { color: inherit; }