/* ===================================================================
   flomotion transfer — Kundenseite
   Baut auf dem flomotion Design System (tokens.css) auf.
   Editorial, ruhig, organisch: Serif-Headlines, warmes Off-White,
   Teal nur als Akzent, weiche Radien, federnde Bewegung.
   =================================================================== */

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

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fm-bg);
  color: var(--fm-text);
  font-family: var(--fm-font-text);
  font-size: var(--fm-text-16);
  line-height: var(--fm-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ===================================================================
   Punktfeld im Hintergrund
   Farben liegen als Variablen vor, damit das Skript sie auslesen kann
   und der Wechsel zwischen Hell und Dunkel ohne Sonderfall funktioniert.
   =================================================================== */

/* Kein Farbakzent: die Oberfläche trägt sich über Tinte und Papier.
   Farbe bleibt Statusaussagen vorbehalten (Erfolg, Warnung, Fehler).
   Überschreibt bewusst nur hier — tokens.css bleibt als Kopie des
   Design Systems unangetastet. */
:root {
  --fm-accent:      #4a4a48;
  --fm-accent-deep: #1a1a1a;

  /* Eine gemeinsame Farbfolge für beide Effekte: den Schriftzug im
     Hintergrund und die Kontur des Haupt-Knopfs. Nur hier ändern. */
  --fx-1: #eab308;   /* Gelb    */
  --fx-2: #ef4444;   /* Rot     */
  --fx-3: #3b82f6;   /* Blau    */
  --fx-4: #06b6d4;   /* Cyan    */
  --fx-5: #8b5cf6;   /* Violett */

  /* Die drei weichen Lichtflecken im Knopf greifen daraus */
  --cta-c1: var(--fx-1);
  --cta-c2: var(--fx-3);
  --cta-c3: var(--fx-5);

  /* Grundton des Kastens hinter Einleitung und Dateien.
     Im hellen Modus ist die Seite selbst schon fast weiß (#FAFAF9) — weiß
     auf weiß ergibt gemessen Kontrast 1,000, also nichts. Dort hebt sich
     der Kasten deshalb mit einem sehr schwachen dunklen Ton ab; im dunklen
     Modus mit weiß, wie gewünscht. */
  --kasten: rgba(10, 10, 10, 0.035);

  --fm-dot-from: rgba(10, 10, 10, 0.13);
  --fm-dot-to:   rgba(10, 10, 10, 0.05);
  --fm-dot-glow: rgba(10, 10, 10, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fm-accent:      #c8c8c2;
    --fm-accent-deep: #e8e6e0;

    --kasten: rgba(255, 255, 255, 0.055);

    --fm-dot-from: rgba(250, 250, 249, 0.12);
    --fm-dot-to:   rgba(250, 250, 249, 0.04);
    --fm-dot-glow: rgba(250, 250, 249, 0.09);
  }
}

.dotfield {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--fm-ease-out);
}
.dotfield.is-ready { opacity: 1; }
.dotfield canvas { display: block; width: 100%; height: 100%; }

/* Inhalte über das Feld heben — bewusst OHNE `body > …`:
   ein solcher Selektor ist spezifischer als `.viewer` bzw. `.prep` und würde
   deren `position: fixed` auf `relative` zurücksetzen. Kopfzeile, Betrachter
   und Download-Bühne bringen ihre Ebene ohnehin selbst mit. */
.wrap, .foot { position: relative; z-index: 1; }

/* Während das Vollbild offen ist, tritt der Hintergrund zurück */
body.viewer-open .dotfield { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .dotfield { transition: none; }
}


/* ===================================================================
   Schriftzug als Kontur im Hintergrund
   Nach „Text Hover Effect" (Aceternity UI), übertragen auf die Logo-Pfade.
   Fest im Ansichtsfenster, fast bildschirmbreit, hinter allen Inhalten.
   =================================================================== */

.logomark {
  position: fixed;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(92vw, 1700px);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms var(--fm-ease-out);
}
.logomark.is-ready { opacity: 1; }
.logomark svg { display: block; width: 100%; height: auto; overflow: visible; }

.logomark g { fill: none; stroke-width: 0.3; }

/* Ruhende Kontur — der eigentliche Wasserzeichen-Charakter */
.logomark .lm-ruhe { stroke: var(--fm-logo-linie); }

/* Zeichnet sich beim Laden einmal selbst */
.logomark .lm-zeichnen {
  stroke: var(--fm-logo-linie);
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: lmZeichnen 4s var(--fm-ease-inout) forwards;
}
@keyframes lmZeichnen { to { stroke-dashoffset: 0; } }

/* Farbige Kontur, nur rund um den Zeiger sichtbar */
.logomark .lm-leuchten { stroke: url(#lm-verlauf); }

/* Während das Vollbild offen ist, tritt der Hintergrund zurück */
body.viewer-open .logomark { opacity: 0; }

/* Sehr nah am Hintergrund — der Schriftzug soll die Seite nicht
   überlagern, sondern nur ahnbar sein. */
:root { --fm-logo-linie: rgba(10, 10, 10, 0.028); }
@media (prefers-color-scheme: dark) {
  :root { --fm-logo-linie: rgba(250, 250, 249, 0.032); }
}

@media (prefers-reduced-motion: reduce) {
  .logomark { transition: none; }
  .logomark .lm-zeichnen { animation: none; stroke-dashoffset: 0; }
}

/* --- Kopfzeile ------------------------------------------------------ */

.topbar {
  position: sticky; top: 0; z-index: var(--fm-z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--fm-space-4);
  padding: 16px clamp(18px, 4vw, 48px);
  background: transparent;
}
/* Keine Leiste, keine Kante: erst beim Scrollen legt sich ein weicher Verlauf
   unter die Kopfzeile, damit durchlaufende Inhalte die Schrift nicht stören.
   Der Hintergrund bleibt dabei bis nach oben sichtbar. */
.topbar::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 190%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom,
    var(--fm-bg) 0%,
    color-mix(in srgb, var(--fm-bg) 78%, transparent) 42%,
    color-mix(in srgb, var(--fm-bg) 30%, transparent) 72%,
    transparent 100%);
  transition: opacity var(--fm-duration-slow) var(--fm-ease-out);
}
.topbar.is-stuck::before { opacity: 1; }

.brand {
  /* An der Mitte ausrichten, nicht an der Schriftlinie: sonst sitzt das
     Logo gegenüber dem Wort daneben mehrere Pixel zu hoch. */
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--fm-text);
}
.brand-mark { display: block; line-height: 0; }
.brand-mark svg { display: block; height: 17px; width: auto; }
.brand-sub {
  font-size: var(--fm-text-12);
  letter-spacing: var(--fm-track-wider);
  text-transform: uppercase;
  color: var(--fm-text-faint);
  padding-left: 12px;
  border-left: 1px solid var(--fm-line-strong);
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.lang {
  font-size: var(--fm-text-12);
  font-weight: 500;
  letter-spacing: var(--fm-track-wide);
  color: var(--fm-text-faint);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--fm-radius-pill);
  transition: color var(--fm-duration-fast) var(--fm-ease-out), background var(--fm-duration-fast) var(--fm-ease-out);
}
.lang:hover { color: var(--fm-text); background: var(--fm-bg-soft); }

/* --- Schaltflächen --------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--fm-radius-pill);
  font-family: var(--fm-font-text);
  font-size: var(--fm-text-15);
  font-weight: 500;
  letter-spacing: var(--fm-track-snug);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--fm-duration-fast) var(--fm-ease-spring),
              background var(--fm-duration-fast) var(--fm-ease-out),
              box-shadow var(--fm-duration-normal) var(--fm-ease-out),
              opacity var(--fm-duration-fast) var(--fm-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-sm { padding: 9px 16px; font-size: var(--fm-text-14); }

.btn-primary {
  background: var(--fm-text);
  color: var(--fm-bg);
  box-shadow: var(--fm-shadow-sm);
}
.btn-primary:hover { box-shadow: var(--fm-shadow-md); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--fm-text);
  border-color: var(--fm-line-strong);
}
.btn-ghost:hover { background: var(--fm-bg-soft); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border: 1px solid var(--fm-line); border-radius: var(--fm-radius-pill);
  background: transparent; color: var(--fm-text-soft);
  cursor: pointer; text-decoration: none;
  transition: color var(--fm-duration-fast) var(--fm-ease-out),
              border-color var(--fm-duration-fast) var(--fm-ease-out),
              background var(--fm-duration-fast) var(--fm-ease-out),
              transform var(--fm-duration-fast) var(--fm-ease-spring);
}
.icon-btn:hover { color: var(--fm-text); border-color: var(--fm-line-strong); background: var(--fm-bg-soft); transform: translateY(-1px); }

/* --- Grundlayout ----------------------------------------------------- */

.wrap {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 76px) clamp(18px, 4vw, 48px) 72px;
}
.wrap.centered { display: grid; place-items: center; padding-top: clamp(48px, 12vh, 140px); }

/* --- Einleitung ------------------------------------------------------ */

.intro { margin-bottom: clamp(26px, 4vw, 44px); }

/* Titel links, Haupt-Download rechts daneben — das spart oben Höhe */
.intro-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
}
.intro-text { flex: 1; min-width: 0; max-width: 46rem; }
.intro-kopf .btn-cta { flex: 0 0 auto; margin-top: 4px; }

.eyebrow {
  margin: 0 0 var(--fm-space-4);
  font-size: var(--fm-text-11);
  font-weight: 500;
  letter-spacing: var(--fm-track-widest);
  text-transform: uppercase;
  color: var(--fm-text-faint);
  animation: rise var(--fm-duration-slow) var(--fm-ease-organic) both;
}

.title {
  margin: 0;
  font-family: var(--fm-font-serif);
  font-size: clamp(34px, 5.4vw, 60px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--fm-track-tight);
  animation: rise var(--fm-duration-slow) 60ms var(--fm-ease-organic) both;
}

.message {
  margin: var(--fm-space-5) 0 0;
  max-width: 40rem;
  font-size: var(--fm-text-17);
  line-height: var(--fm-leading-relaxed);
  color: var(--fm-text-soft);
  animation: rise var(--fm-duration-slow) 120ms var(--fm-ease-organic) both;
}

.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin: var(--fm-space-6) 0 0; padding: 0; list-style: none;
  font-size: var(--fm-text-14);
  color: var(--fm-text-soft);
  animation: rise var(--fm-duration-slow) 180ms var(--fm-ease-organic) both;
}
.meta li { display: inline-flex; align-items: center; gap: 6px; }
/* Trennpunkt hängt am vorangehenden Eintrag — beim Umbruch beginnt sonst
   eine Zeile mit dem Punkt. */
.meta li:not(:last-child)::after {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--fm-text-faint); margin-left: 12px;
}
.meta strong { color: var(--fm-text); font-weight: 500; }

.empty { color: var(--fm-text-soft); font-size: var(--fm-text-17); }


/* --- Haupt-Download: der wichtigste Weg auf der Seite ------------------ */

.btn-cta {
  /* Aufbau wie in der Vorlage: außen die Fläche mit den Verläufen, darüber
     eine eigene deckende Innenfläche. Sichtbar bleibt vom Verlauf deshalb
     nur der schmale Rand — eine wandernde, leuchtende Kontur. */
  position: relative;
  display: inline-block;
  padding: 5px;                      /* das ist die Kontur */
  border-radius: var(--fm-radius-pill);
  background: #24242a;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  box-shadow: inset 0 0.5px 1px 0 rgba(255, 255, 255, 0.18),
              var(--fm-shadow-md);
  animation: rise var(--fm-duration-slow) 240ms var(--fm-ease-organic) both;
  transition: transform var(--fm-duration-normal) var(--fm-ease-spring),
              box-shadow var(--fm-duration-normal) var(--fm-ease-out);
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: var(--fm-shadow-lg); }
.btn-cta:active { transform: translateY(0) scale(.99); }

/* Die Innenfläche verdeckt den Verlauf bis auf den Rand.
   Beim Überfahren tauschen Kreis und Beschriftung die Seiten — dieselbe
   Bewegung wie beim Knopf „Projekt starten" auf flomotion.design, nur
   spiegelbildlich, weil der Kreis hier links steht. Werte der Vorlage:
   500 ms, cubic-bezier(.4, 0, .2, 1). */
.btn-cta .cta-inner {
  position: relative;
  z-index: 1;
  display: block;
  padding: 12px 24px 12px 66px;
  border-radius: var(--fm-radius-pill);
  background: #0f0f0f;
  color: #fafaf9;
  transition: padding 560ms cubic-bezier(.4, 0, .2, 1);
}
/* Die Beschriftung rückt in die Gegenrichtung — unterwegs kreuzen sich
   beide, und der Kreis geht dabei über die Schrift hinweg. */
.btn-cta:hover .cta-inner,
.btn-cta:focus-visible .cta-inner { padding-left: 24px; padding-right: 66px; }

/* Beim Überfahren zieht der Kreis quer durch den Knopf und geht dabei über
   die Schrift hinweg. Damit das sauber aussieht, wird er dafür deckend —
   ein heller Stein, der über die Zeile wandert. Tempo und Kurve wie beim
   Knopf „Projekt starten" auf flomotion.design. */
.btn-cta .cta-icon {
  position: absolute;
  top: 50%; left: 14px;
  translate: 0 -50%;
  z-index: 2;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(250, 250, 249, 0.12);
  transition: left 560ms cubic-bezier(.4, 0, .2, 1),
              background 260ms ease,
              color 260ms ease;
}
.btn-cta:hover .cta-icon,
.btn-cta:focus-visible .cta-icon {
  left: calc(100% - 52px);
  background: #fafaf9;
  color: #0f0f0f;
}

/* Der Pfeil dreht sich dabei einmal ganz mit — der Kreis wirkt dadurch
   wie ein Stein, der über die Zeile rollt. Eine volle Umdrehung, damit der
   Pfeil am Ende wieder richtig herum steht. */
.btn-cta .cta-icon svg {
  display: block;
  transition: rotate 560ms cubic-bezier(.4, 0, .2, 1);
}
.btn-cta:hover .cta-icon svg,
.btn-cta:focus-visible .cta-icon svg { rotate: 360deg; }
/* Der Kreis liegt jetzt über der Fläche statt in der Zeile — die Höhe
   ergibt sich damit aus der Beschriftung. */
.btn-cta .cta-text {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; min-width: 0;
}
.btn-cta .cta-label {
  font-size: var(--fm-text-16);
  font-weight: 500;
  letter-spacing: var(--fm-track-snug);
  line-height: 1.2;
}
.btn-cta .cta-meta {
  font-size: var(--fm-text-12);
  line-height: 1.2;
  opacity: .62;
  font-variant-numeric: tabular-nums;
}

/* --- Bewegter Verlauf mit Korn (nach „Noise Background", Aceternity UI) ----
   Übertragen auf reines CSS/JS: drei Radialverläufe driften mit
   unterschiedlichem Tempo, darüber ein Streifen und eine Rauschtextur. */

.btn-cta .cta-fx {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.btn-cta .cta-fx .g { position: absolute; inset: 0; will-change: background; }
.btn-cta .g1 {
  opacity: .4;
  background: radial-gradient(circle at var(--x1, 50%) var(--y1, 50%), var(--cta-c1) 0%, transparent 50%);
}
.btn-cta .g2 {
  opacity: .3;
  background: radial-gradient(circle at var(--x2, 50%) var(--y2, 50%), var(--cta-c2) 0%, transparent 50%);
}
.btn-cta .g3 {
  opacity: .25;
  background: radial-gradient(circle at var(--x3, 50%) var(--y3, 50%), var(--cta-c3) 0%, transparent 50%);
}
.btn-cta .cta-strip {
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  opacity: .8;
  filter: blur(4px);
  transform: translateX(var(--sx, 0px));
  background: linear-gradient(to right,
              var(--fx-1), var(--fx-2), var(--fx-3), var(--fx-4), var(--fx-5));
}
.btn-cta .cta-noise {
  position: absolute; inset: 0;
  background-image: url("/assets/noise.png");
  background-size: 160px 160px;
  opacity: .2;
  mix-blend-mode: overlay;
}

/* --- Dateiraster ------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.card {
  display: flex; flex-direction: column;
  background: var(--fm-bg-card);
  border: 1px solid var(--fm-line);
  border-radius: var(--fm-radius-xl);
  overflow: hidden;
  box-shadow: var(--fm-shadow-xs);
  animation: rise var(--fm-duration-slower) var(--fm-ease-organic) both;
  animation-delay: calc(220ms + var(--d, 0ms));
  transition: transform var(--fm-duration-normal) var(--fm-ease-organic),
              box-shadow var(--fm-duration-normal) var(--fm-ease-out),
              border-color var(--fm-duration-normal) var(--fm-ease-out);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fm-shadow-lg);
  border-color: transparent;
}

.card-media {
  position: relative;
  display: block; width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0; margin: 0; border: 0;
  background: var(--fm-bg-soft);
  cursor: pointer;
  overflow: hidden;
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--fm-duration-slower) var(--fm-ease-organic), opacity var(--fm-duration-slow) var(--fm-ease-out);
}
.card:hover .card-media img { transform: scale(1.035); }

.card-media .placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--fm-accent) 10%, transparent), transparent 62%),
    var(--fm-bg-soft);
}
.card-media .ext {
  font-family: var(--fm-font-mono);
  font-size: var(--fm-text-14);
  letter-spacing: var(--fm-track-wider);
  color: var(--fm-text-soft);
}
/* Bei Video und Audio sitzt in der Mitte das Play-Symbol —
   das Format wandert dann in die Ecke, statt sich zu verdecken. */
.kind-video .card-media .ext,
.kind-audio .card-media .ext {
  position: absolute; left: 12px; bottom: 11px;
  font-size: var(--fm-text-11);
}

.card-media .play {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  color: #fff;
  background: rgba(10, 10, 10, 0.42);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  scale: 1;
  transition: scale var(--fm-duration-normal) var(--fm-ease-spring), background var(--fm-duration-normal) var(--fm-ease-out);
}
.card-media .play svg { margin-left: 2px; }
.card:hover .card-media .play { scale: 1.08; background: rgba(10, 10, 10, 0.58); }

.card-media .badge {
  position: absolute; right: 10px; bottom: 10px;
  padding: 4px 9px;
  border-radius: var(--fm-radius-pill);
  font-size: var(--fm-text-11);
  font-weight: 500;
  letter-spacing: var(--fm-track-snug);
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.card-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 16px;
}
.card-text { min-width: 0; flex: 1; }
.card-foot .name {
  margin: 0;
  font-size: var(--fm-text-14);
  font-weight: 500;
  letter-spacing: var(--fm-track-snug);
  /* Bis zu zwei Zeilen statt einer abgeschnittenen — lange Namen brechen
     notfalls mitten im Wort, damit nichts unlesbar verschwindet. */
  /* Drei Zeilen fangen auch lange Exportnamen ab; die Karten dürfen dafür
     unterschiedlich hoch sein — lesbar schlägt bündig. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
/* Datei kam nach dem ersten Öffnen dazu */
.neu-marke {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: var(--fm-radius-pill);
  background: color-mix(in srgb, var(--fm-success) 20%, transparent);
  color: var(--fm-success);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fm-track-wide);
  text-transform: uppercase;
  vertical-align: 1px;
}

.card-foot .sub {
  margin: 3px 0 0;
  font-size: var(--fm-text-12);
  color: var(--fm-text-faint);
  font-variant-numeric: tabular-nums;
}


/* --- Umschalter Raster / Liste ---------------------------------------- */

.dateileiste {
  display: flex; justify-content: flex-end;
  margin-bottom: 12px;
}

.ansicht-schalter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--fm-line-strong);
  border-radius: var(--fm-radius-pill);
  background: transparent;
  color: var(--fm-text-soft);
  font-family: var(--fm-font-text);
  font-size: var(--fm-text-13);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--fm-duration-fast) var(--fm-ease-out),
              background var(--fm-duration-fast) var(--fm-ease-out),
              border-color var(--fm-duration-fast) var(--fm-ease-out);
}
.ansicht-schalter:hover { color: var(--fm-text); background: var(--fm-bg-soft); border-color: var(--fm-line-strong); }

/* Es wird immer das Symbol der Ansicht gezeigt, in die gewechselt wird */
.ansicht-schalter .sym-raster { display: none; }
.ansicht-schalter[aria-pressed="true"] .sym-liste { display: none; }
.ansicht-schalter[aria-pressed="true"] .sym-raster { display: block; }

/* --- Listenansicht ------------------------------------------------------ */

.grid.ist-liste {
  grid-template-columns: 1fr;
  gap: 8px;
}
.grid.ist-liste .card { flex-direction: row; align-items: stretch; }
.grid.ist-liste .card:hover { transform: none; box-shadow: var(--fm-shadow-md); }

.grid.ist-liste .card-media {
  width: 108px; flex: 0 0 108px;
  aspect-ratio: auto;
  border-right: 1px solid var(--fm-line);
}
.grid.ist-liste .card:hover .card-media img { transform: none; }
.grid.ist-liste .card-media .play { width: 34px; height: 34px; }
.grid.ist-liste .card-media .play svg { width: 15px; height: 15px; }
.grid.ist-liste .card-media .badge { right: 6px; bottom: 6px; font-size: 10px; padding: 2px 6px; }
.grid.ist-liste .kind-video .card-media .ext,
.grid.ist-liste .kind-audio .card-media .ext { display: none; }

.grid.ist-liste .card-foot { flex: 1; padding: 12px 14px 12px 16px; }

/* Feste Zeilenhöhe: sonst wächst eine Zeile, sobald ihr Name umbricht,
   und die Liste wirkt ausgefranst. Die Höhe ist so bemessen, dass zwei
   Namenszeilen hineinpassen — bei Listenbreite sind das mehrere hundert
   Zeichen, also praktisch jeder Dateiname. */
.grid.ist-liste .card { height: 84px; }
.grid.ist-liste .card-foot .name { -webkit-line-clamp: 2; }

@media (max-width: 620px) {
  .grid.ist-liste .card-media { width: 84px; flex-basis: 84px; }
  /* Schmaler Bildschirm: weniger Zeichen pro Zeile, dafür drei Zeilen Platz */
  .grid.ist-liste .card { height: 104px; }
  .grid.ist-liste .card-foot .name { -webkit-line-clamp: 3; }
}

/* --- Vollbild-Betrachter ---------------------------------------------- */

.viewer {
  position: fixed; inset: 0; z-index: var(--fm-z-modal);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(8, 8, 8, 0.9);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  color: #f4f4f2;
  animation: fade var(--fm-duration-normal) var(--fm-ease-out) both;
}
.viewer[hidden] { display: none; }
.viewer:focus { outline: none; }

.viewer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(14px, 3vw, 28px);
}
.viewer-title { min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.viewer-title .v-name {
  font-size: var(--fm-text-15); font-weight: 500;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.viewer-title .v-count {
  font-size: var(--fm-text-12); color: rgba(244, 244, 242, 0.5);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.viewer-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.viewer .btn-ghost { color: #f4f4f2; border-color: rgba(255, 255, 255, 0.22); }
.viewer .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.viewer .icon-btn { color: rgba(244, 244, 242, 0.75); border-color: rgba(255, 255, 255, 0.2); }
.viewer .icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }

.viewer-stage {
  position: relative;
  z-index: 1;
  display: grid; place-items: center;
  padding: 0 var(--stage-pad);
  min-height: 0;
  --stage-pad: clamp(14px, 6vw, 80px);
}

/* Die Bedienelemente stehen im Markup VOR der Bühne. Ohne ausdrückliche Ebene
   läge die (positionierte) Bühne darüber und würde jeden Klick auf die Pfeile
   abfangen — der Klick landete dann auf dem Hintergrund und schloss das Fenster. */
.viewer-bar,
.viewer-foot { position: relative; z-index: 2; }
.viewer .nav { z-index: 2; }
/* Absolut positioniert und mittig per margin:auto — nur so lösen sich die
   Prozentangaben zuverlässig gegen die Bühnenhöhe auf. Als Rasterelement
   würde das Video die Bühne überragen und seine Steuerleiste abschneiden. */
.viewer-stage video,
.viewer-stage img,
.viewer-stage iframe {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto; height: auto;
  max-width: calc(100% - 2 * var(--stage-pad));
  max-height: 100%;
  border-radius: var(--fm-radius-md);
  animation: pop var(--fm-duration-slow) var(--fm-ease-organic) both;
}
.viewer-stage video,
.viewer-stage img {
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  background: #000;
}
.viewer-stage img { object-fit: contain; }
.viewer-stage iframe {
  width: min(1000px, calc(100% - 2 * var(--stage-pad)));
  height: 100%;
  border: 0;
  background: #fff;
}
.viewer-stage .audio-stage {
  width: min(560px, 100%);
  padding: 40px 34px;
  border-radius: var(--fm-radius-xl);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  animation: pop var(--fm-duration-slow) var(--fm-ease-organic) both;
}
.viewer-stage .audio-stage .aname { font-size: var(--fm-text-17); margin: 0 0 22px; }
.viewer-stage audio { width: 100%; }

.viewer-stage .fallback {
  text-align: center; max-width: 30rem;
  animation: pop var(--fm-duration-slow) var(--fm-ease-organic) both;
}
.viewer-stage .fallback .fb-ext {
  display: inline-grid; place-items: center;
  width: 78px; height: 78px; margin-bottom: 22px;
  border-radius: var(--fm-radius-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--fm-font-mono); font-size: var(--fm-text-14);
  letter-spacing: var(--fm-track-wide);
  color: rgba(244, 244, 242, 0.8);
}
.viewer-stage .fallback p { margin: 0 0 6px; font-size: var(--fm-text-17); }
.viewer-stage .fallback .sub { color: rgba(244, 244, 242, 0.55); font-size: var(--fm-text-14); }

.viewer-foot {
  padding: 14px clamp(14px, 3vw, 28px) 22px;
  text-align: center;
  font-size: var(--fm-text-12);
  color: rgba(244, 244, 242, 0.5);
  font-variant-numeric: tabular-nums;
}

.viewer .nav {
  position: absolute; top: 50%; translate: 0 -50%;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f4f4f2;
  cursor: pointer;
  scale: 1;
  transition: background var(--fm-duration-fast) var(--fm-ease-out), scale var(--fm-duration-fast) var(--fm-ease-spring), opacity var(--fm-duration-fast) var(--fm-ease-out);
}
.viewer .nav:hover { background: rgba(255, 255, 255, 0.16); scale: 1.06; }
.viewer .nav.prev { left: clamp(10px, 2vw, 26px); }
.viewer .nav.next { right: clamp(10px, 2vw, 26px); }
/* Kein pointer-events:none — sonst fällt der Klick durch den Pfeil auf den
   Hintergrund und schließt das Fenster. Ein deaktivierter Knopf schluckt den
   Klick von sich aus. */
.viewer .nav[disabled] { opacity: 0.22; cursor: default; }
.viewer .nav[disabled]:hover { background: rgba(255, 255, 255, 0.07); scale: 1; }

/* --- Karten-Panel (Passwort, Fehler, Startseite) ------------------------ */

.panel {
  width: min(480px, 100%);
  padding: clamp(30px, 5vw, 44px);
  background: var(--fm-bg-card);
  border: 1px solid var(--fm-line);
  border-radius: var(--fm-radius-2xl);
  box-shadow: var(--fm-shadow-md);
  text-align: center;
  animation: rise var(--fm-duration-slow) var(--fm-ease-organic) both;
}
.panel-icon {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 20px;
  border-radius: var(--fm-radius-lg);
  background: var(--fm-bg-soft);
  color: var(--fm-text-soft);
}
.panel-title {
  margin: 0 0 12px;
  font-family: var(--fm-font-serif);
  font-size: var(--fm-text-28);
  font-weight: 400;
  letter-spacing: var(--fm-track-tight);
}
.panel-body {
  margin: 0 0 26px;
  color: var(--fm-text-soft);
  font-size: var(--fm-text-15);
}

.pw-form { display: flex; gap: 10px; }
.pw-form input {
  flex: 1; min-width: 0;
  padding: 13px 18px;
  border: 1px solid var(--fm-line-strong);
  border-radius: var(--fm-radius-pill);
  background: var(--fm-bg);
  color: var(--fm-text);
  font-family: var(--fm-font-text);
  font-size: var(--fm-text-15);
  transition: border-color var(--fm-duration-fast) var(--fm-ease-out), box-shadow var(--fm-duration-fast) var(--fm-ease-out);
}
.pw-form input:focus {
  outline: none;
  border-color: var(--fm-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fm-accent) 22%, transparent);
}
.pw-error { margin: 14px 0 0; font-size: var(--fm-text-14); color: var(--fm-error); }

/* --- Fußzeile ---------------------------------------------------------- */

/* Der Fußbereich enthält nur Text: er läuft ganz normal mit,
   ohne Trennlinie und ohne eigene Fläche. */
.foot {
  padding: 26px clamp(18px, 4vw, 48px) max(36px, calc(env(safe-area-inset-bottom) + 26px));
  text-align: center;
}
.foot-note {
  max-width: 44rem; margin: 0 auto 10px;
  font-size: var(--fm-text-12);
  line-height: var(--fm-leading-relaxed);
  color: var(--fm-text-faint);
}
.foot-brand { margin: 0; font-size: var(--fm-text-12); color: var(--fm-text-faint); }
.foot-brand a { color: var(--fm-text-soft); text-decoration: none; }
.foot-brand a:hover { color: var(--fm-text); }

/* --- Bewegung ---------------------------------------------------------- */

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop  { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

body.viewer-open { overflow: hidden; }

/* --- Kleine Bildschirme ------------------------------------------------- */

/* --- Kleine Bildschirme ------------------------------------------------- */

/* Randbereiche von Notch und Home-Indikator freihalten */
.topbar { padding-left: max(clamp(18px, 4vw, 48px), env(safe-area-inset-left));
          padding-right: max(clamp(18px, 4vw, 48px), env(safe-area-inset-right)); }
.wrap   { padding-left: max(clamp(18px, 4vw, 48px), env(safe-area-inset-left));
          padding-right: max(clamp(18px, 4vw, 48px), env(safe-area-inset-right)); }
.viewer-foot { padding-bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px)); }
.viewer-bar  { padding-top: max(16px, env(safe-area-inset-top)); }

@media (max-width: 720px) {
  .brand-sub { display: none; }
  .grid { grid-template-columns: 1fr; }

  /* Der Hauptknopf nimmt die volle Breite — auf dem Telefon der klarste Weg */
  .intro-kopf { flex-direction: column; align-items: stretch; gap: 0; }
  .intro-text { max-width: none; }
  .btn-cta { display: block; width: 100%; margin-top: var(--fm-space-6); }
  .btn-cta .cta-inner { padding: 14px 20px 14px 66px; }
  .btn-cta:hover .cta-inner,
  .btn-cta:focus-visible .cta-inner { padding-left: 20px; padding-right: 66px; }

  /* Tippflächen auf komfortable Größe */
  .icon-btn { width: 42px; height: 42px; flex-basis: 42px; }
  .lang { padding: 10px 12px; }
  .card-foot { padding: 13px 12px 13px 15px; }

  .viewer-bar { gap: 10px; }
  .viewer-title .v-count { display: none; }
  .viewer .nav { width: 42px; height: 42px; }
  .viewer .nav.prev { left: 8px; }
  .viewer .nav.next { right: 8px; }
  .viewer-stage { --stage-pad: 10px; }
  .viewer .btn-ghost span { display: none; }
  .viewer .btn-ghost { padding: 11px; }

  .prep-box { padding: 32px 24px 26px; }
  .pw-form { flex-direction: column; }
  .pw-form .btn { width: 100%; }
}

/* Sehr schmale Geräte */
@media (max-width: 380px) {
  .title { font-size: 30px; }
  .meta { gap: 6px 12px; font-size: var(--fm-text-13); }
  .meta li:not(:last-child)::after { margin-left: 8px; }
}

/* Zeigegeräte ohne Hover (Touch): keine hängenden Hover-Zustände */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: var(--fm-shadow-xs); }
  .card:hover .card-media img { transform: none; }
  .card:hover .card-media .play { scale: 1; }
  .btn-cta:hover { transform: none; box-shadow: var(--fm-shadow-md); }
  .btn-cta .cta-inner, .btn-cta .cta-icon { transition: none; }
  .btn-cta:hover .cta-inner, .btn-cta:focus-visible .cta-inner { padding: 12px 24px 12px 66px; }
  .btn-cta:hover .cta-icon, .btn-cta:focus-visible .cta-icon { left: 14px; }
  .btn-cta .cta-icon svg { transition: none; }
  .btn-cta:hover .cta-icon svg, .btn-cta:focus-visible .cta-icon svg { rotate: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .eyebrow, .title, .message, .meta, .panel,
  .viewer, .viewer-stage video, .viewer-stage img, .viewer-stage iframe,
  .viewer-stage .audio-stage, .viewer-stage .fallback { animation: none !important; }
}


/* --- Tastaturbedienung -------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--fm-accent);
  outline-offset: 2px;
  border-radius: var(--fm-radius-sm);
}
/* Innerhalb beschnittener Kacheln muss der Ring nach innen zeigen,
   sonst schneidet ihn das overflow:hidden der Karte an. */
.card-media:focus-visible { outline-offset: -3px; border-radius: 0; }
.viewer :focus-visible { outline-color: #fff; }

/* ===================================================================
   Wartezustände
   Zwei Sorten: das Schnüren des Sammel-Downloads (eigene Bühne) und
   das stille Puffern von Medien (nur ein feiner Ring).
   =================================================================== */

.prep {
  position: fixed; inset: 0; z-index: var(--fm-z-modal);
  display: grid; place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--fm-bg) 72%, transparent);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  animation: fade var(--fm-duration-normal) var(--fm-ease-out) both;
}
.prep[hidden] { display: none; }
.prep.is-leaving { animation: fadeOut var(--fm-duration-slow) var(--fm-ease-out) both; }

.prep-box {
  width: min(390px, 100%);
  padding: 38px 34px 30px;
  background: var(--fm-bg-card);
  border: 1px solid var(--fm-line);
  border-radius: var(--fm-radius-2xl);
  box-shadow: var(--fm-shadow-xl);
  text-align: center;
  animation: rise var(--fm-duration-slow) var(--fm-ease-organic) both;
}

/* --- Bühne: Blätter fliegen ein und legen sich zum Stapel ------------ */

.prep-art {
  position: relative;
  width: 112px; height: 92px;
  margin: 0 auto 26px;
}
.prep-art .sheet {
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 46px;
  margin: -23px 0 0 -32px;
  border-radius: 8px;
  /* Vom Kartenton abgehoben — funktioniert in beiden Farbwelten */
  background: color-mix(in srgb, var(--fm-text) 9%, var(--fm-bg-card));
  border: 1px solid color-mix(in srgb, var(--fm-text) 16%, transparent);
  box-shadow: var(--fm-shadow-sm);
  animation: sheetStack 2400ms var(--fm-ease-organic) infinite;
}
.prep-art .s1 { --y: 11px; animation-delay: 0ms; }
.prep-art .s2 { --y:  0px; animation-delay: 170ms; }
.prep-art .s3 { --y:-11px; animation-delay: 340ms;
  background: color-mix(in srgb, var(--fm-text) 15%, var(--fm-bg-card)); }

@keyframes sheetStack {
  0%       { opacity: 0; transform: translateY(calc(var(--y) + 30px)) scale(.92) rotate(-6deg); }
  20%      { opacity: 1; }
  40%, 74% { opacity: 1; transform: translateY(var(--y)) scale(1) rotate(0deg); }
  100%     { opacity: 0; transform: translateY(calc(var(--y) - 12px)) scale(.97) rotate(2deg); }
}

/* Der Akzentstreifen legt sich wie ein Band über den fertigen Stapel. */
.prep-art .band {
  position: absolute; left: 50%; top: 50%;
  width: 78px; height: 2px; margin: -1px 0 0 -39px;
  border-radius: 2px;
  background: var(--fm-accent);
  transform-origin: left center;
  animation: bandSweep 2400ms var(--fm-ease-inout) infinite;
}
@keyframes bandSweep {
  0%, 46%   { opacity: 0; transform: scaleX(0); }
  58%       { opacity: 1; transform: scaleX(1); }
  80%       { opacity: 1; transform: scaleX(1); }
  100%      { opacity: 0; transform: scaleX(1); }
}

.prep-title {
  margin: 0 0 7px;
  font-family: var(--fm-font-serif);
  font-size: var(--fm-text-21);
  font-weight: 400;
  letter-spacing: var(--fm-track-snug);
}
.prep-sub {
  margin: 0 0 24px;
  font-size: var(--fm-text-13);
  line-height: var(--fm-leading-relaxed);
  color: var(--fm-text-soft);
  min-height: 2.6em;
}

.prep-bar {
  height: 2px; border-radius: 2px;
  background: var(--fm-line);
  overflow: hidden;
}
.prep-bar i {
  display: block; height: 100%; width: 36%;
  border-radius: 2px;
  background: var(--fm-accent-deep);
  animation: barSweep 1500ms var(--fm-ease-inout) infinite;
}
@keyframes barSweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

/* --- Zustand „läuft" ------------------------------------------------- */

.prep.is-done .prep-art .sheet,
.prep.is-done .prep-art .band { animation: none; opacity: 0; }
.prep.is-done .prep-bar i {
  width: 100%; animation: none;
  background: var(--fm-success);
  transition: width var(--fm-duration-slow) var(--fm-ease-out);
}

.prep-check {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0;
}
.prep.is-done .prep-check { opacity: 1; }
.prep-check svg { width: 54px; height: 54px; color: var(--fm-success); }
.prep-check circle, .prep-check path {
  stroke-dasharray: var(--len, 100);
  stroke-dashoffset: var(--len, 100);
}
.prep.is-done .prep-check circle { animation: draw 620ms var(--fm-ease-out) forwards; }
.prep.is-done .prep-check path   { animation: draw 380ms var(--fm-ease-out) 260ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* --- Puffern im Betrachter -------------------------------------------- */

.stage-spin {
  position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.85);
  animation: spin 720ms linear infinite;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--fm-duration-normal) var(--fm-ease-out);
}
.stage-spin.is-on { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Bilder blenden sich ein, statt hart aufzuploppen. */
.viewer-stage img.is-loading { opacity: 0; }
.viewer-stage img { transition: opacity var(--fm-duration-slow) var(--fm-ease-out); }

/* --- Schaltflächen mit Wartezustand ------------------------------------ */

.btn.is-busy { pointer-events: none; }
.btn.is-busy > span, .btn.is-busy > svg { opacity: .35; }
.btn.is-busy::after {
  content: ""; position: absolute;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin 640ms linear infinite;
}
.btn { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .prep-art .sheet, .prep-art .band, .prep-bar i,
  .stage-spin, .btn.is-busy::after { animation: none !important; }
  .prep-art .sheet { opacity: 1; transform: translateY(var(--y)); }
  .prep-bar i { width: 100%; }
}

/* Der Verlauf im Schriftzug bezieht dieselben Farben — eine Quelle für beide */
.logomark #lm-verlauf stop:nth-child(1) { stop-color: var(--fx-1); }
.logomark #lm-verlauf stop:nth-child(2) { stop-color: var(--fx-2); }
.logomark #lm-verlauf stop:nth-child(3) { stop-color: var(--fx-3); }
.logomark #lm-verlauf stop:nth-child(4) { stop-color: var(--fx-4); }
.logomark #lm-verlauf stop:nth-child(5) { stop-color: var(--fx-5); }

/* ===================================================================
   Anmerkungen (Abnahme)
   Nur sichtbar, wenn die Abnahme für den Transfer eingeschaltet ist.
   Am Rechner als Spalte neben dem Medium, am Telefon als Blatt darunter.
   =================================================================== */

.viewer.ist-abnahme { grid-template-columns: 1fr 340px; grid-template-areas: "bar bar" "stage rev" "foot rev"; }
.viewer.ist-abnahme .viewer-bar   { grid-area: bar; }
.viewer.ist-abnahme .viewer-stage { grid-area: stage; }
.viewer.ist-abnahme .viewer-foot  { grid-area: foot; }

.rev {
  grid-area: rev;
  display: flex; flex-direction: column;
  min-height: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.rev-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rev-titel { font-size: var(--fm-text-15); font-weight: 500; }
.rev-zahl  { font-size: var(--fm-text-12); color: rgba(244, 244, 242, 0.5); font-variant-numeric: tabular-nums; }

.rev-liste { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }
.rev-leer  { padding: 22px 6px; text-align: center; font-size: var(--fm-text-13); color: rgba(244,244,242,.45); }

.rev-eintrag {
  padding: 11px 12px;
  border-radius: var(--fm-radius-md);
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background var(--fm-duration-fast) var(--fm-ease-out);
}
.rev-eintrag:hover { background: rgba(255, 255, 255, 0.09); }
.rev-eintrag.ist-erledigt { opacity: .5; }
.rev-eintrag .rev-zeile { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.rev-eintrag .rev-autor { font-size: var(--fm-text-13); font-weight: 500; }
.rev-eintrag .rev-marke {
  font-size: 11px; padding: 1px 7px; border-radius: var(--fm-radius-pill);
  background: rgba(255,255,255,.12); color: rgba(244,244,242,.8);
  font-variant-numeric: tabular-nums;
}
.rev-eintrag .rev-erledigt-marke { background: color-mix(in srgb, var(--fm-success) 30%, transparent); color: #d5e6d5; }
.rev-eintrag .rev-text { font-size: var(--fm-text-13); line-height: 1.5; color: rgba(244,244,242,.9); white-space: pre-line; }
.rev-eintrag .rev-meta { margin-top: 5px; font-size: 11px; color: rgba(244,244,242,.4); }
.rev-eintrag .rev-weg {
  border: 0; background: none; padding: 0; margin-left: 8px;
  color: rgba(244,244,242,.45); font-size: 11px; cursor: pointer; text-decoration: underline;
}
.rev-eintrag .rev-weg:hover { color: var(--fm-error); }

.rev-fuss { padding: 12px 14px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.rev-neu { width: 100%; color: #f4f4f2; border-color: rgba(255,255,255,.22); }
.rev-neu:hover { background: rgba(255,255,255,.1); }
.rev-neu.ist-aktiv { background: rgba(255,255,255,.16); }
.rev-hinweis { margin: 10px 2px 0; font-size: var(--fm-text-12); color: rgba(244,244,242,.6); line-height: 1.45; }

.rev-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.rev-form input, .rev-form textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--fm-radius-md);
  background: rgba(0,0,0,.35);
  color: #f4f4f2;
  font: inherit;
  font-size: var(--fm-text-13);
  resize: none;
}
.rev-form input:focus, .rev-form textarea:focus {
  outline: none; border-color: rgba(255,255,255,.45);
}
.rev-aktionen { display: flex; gap: 8px; justify-content: flex-end; }
.rev-aktionen .btn-primary { background: #fafaf9; color: #0a0a0a; }

/* --- Markierungen auf dem Medium ---------------------------------------- */

.rev-pin {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
  transition: transform var(--fm-duration-fast) var(--fm-ease-spring);
}
.rev-pin:hover, .rev-pin.ist-aktiv { transform: scale(1.18); }
.rev-pin.ist-erledigt { opacity: .45; }

/* Die Bühne nimmt Klicks entgegen, während eine Anmerkung gesetzt wird */
.viewer.setzt-anmerkung .viewer-stage { cursor: crosshair; }
.viewer.setzt-anmerkung .viewer-stage video { pointer-events: none; }

/* --- Zeitleiste mit den Stellen ----------------------------------------- */

.rev-spur {
  position: relative;
  height: 4px;
  margin: 10px var(--stage-pad, 20px) 0;
  border-radius: 2px;
  background: rgba(255,255,255,.14);
}
.rev-spur i {
  position: absolute; top: -3px;
  width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%;
  background: #fafaf9;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(10,10,10,.5);
}
.rev-spur i.ist-erledigt { background: var(--fm-success); }

@media (max-width: 900px) {
  /* Am Telefon liegen die Anmerkungen unter dem Medium */
  .viewer.ist-abnahme {
    grid-template-columns: 1fr;
    grid-template-areas: "bar" "stage" "rev" "foot";
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  .rev { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); max-height: 46vh; }
}

/* Vorläufige Marke, solange die Anmerkung noch geschrieben wird */
.rev-pin.ist-entwurf {
  background: var(--fx-1, #eab308);
  border-color: #fff;
  pointer-events: none;
  animation: revPuls 1.6s ease-in-out infinite;
}
@keyframes revPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234,179,8,.45); }
  50%      { box-shadow: 0 0 0 9px rgba(234,179,8,0); }
}
.rev-stelle {
  margin: 0 0 8px;
  font-size: var(--fm-text-11);
  letter-spacing: var(--fm-track-wide);
  text-transform: uppercase;
  color: var(--fx-1, #eab308);
}
@media (prefers-reduced-motion: reduce) { .rev-pin.ist-entwurf { animation: none; } }

/* Hinweis über der Dateiliste, wenn die Abnahme läuft */
.abnahme-hinweis {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fm-text-12);
  color: var(--fm-text-soft);
}
@media (max-width: 640px) {
  .dateileiste { flex-wrap: wrap; row-gap: 8px; }
  .abnahme-hinweis { flex-basis: 100%; order: 2; }
}

/* --- Abnahme nur im eigenen Fenster ------------------------------------- */

/* Der normale Klick auf die Kachel zeigt weiterhin nur die Datei. Erst der
   Knopf „Anmerken" öffnet den Betrachter mit dem Anmerkungsfeld — dort wird
   dann nicht geblättert, damit die Anmerkungen bei ihrer Datei bleiben. */
.viewer .rev { display: none; }
.viewer.ist-abnahme .rev { display: flex; }
.viewer.ist-abnahme .nav { display: none; }

.card-rev { position: relative; }
.card-rev .rev-anzahl {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 15px; height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--fm-text);
  color: var(--fm-bg);
  font-size: 10px; font-weight: 600; line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Ohne Blättern ist die Zählung „1 von 2" irreführend */
.viewer.ist-abnahme .v-count { display: none; }

/* --- Standbild, wenn der Browser die Bildspur nicht dekodieren kann ------ */

/* Schnittformate wie ProRes liest der Browser zwar als Container, die
   Bildspur bleibt ihm aber verschlossen. Statt einer leeren Fläche zeigen
   wir das beim Hochladen erzeugte Standbild und sagen, woran es liegt. */
/* Die Bühne zentriert ihr Kind — ohne feste Breite schrumpft der Kasten
   auf die Textbreite und das Standbild bliebe winzig. */
.viewer-stage .fallback.hat-standbild {
  width: min(880px, calc(100% - 2 * var(--stage-pad, 20px)));
  max-width: none;
  padding: 0;
}
/* Die Regel für Medien auf der Bühne nimmt Bilder aus dem Fluss — hier
   soll das Standbild aber mit dem Text zusammen einen Block bilden. */
.viewer-stage .fallback .fb-standbild {
  position: static;
  inset: auto;
  margin: 0 auto 22px;
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: 52vh;
  border-radius: var(--fm-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.viewer-stage .fallback.hat-standbild .fb-ext {
  width: 54px; height: 54px; margin-bottom: 14px;
  font-size: var(--fm-text-12);
}
.viewer-stage .fallback.hat-standbild p { max-width: 52ch; margin-inline: auto; }
.viewer-stage .fallback.hat-standbild p:first-of-type { font-size: var(--fm-text-15); line-height: 1.5; }

/* ======================================================================
   Hinweiskasten
   Schnittformate wie ProRes kann kein Browser zeigen. Statt eines
   Abspielfensters, in dem nichts läuft, erscheint ein kleiner Kasten mit
   dem Standbild, der Erklärung und dem Weg zur Datei.
   ====================================================================== */

.hinweis {
  position: fixed; inset: 0; z-index: var(--fm-z-modal);
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  animation: fade var(--fm-duration-normal) var(--fm-ease-out) both;
}
.hinweis[hidden] { display: none; }

.hinweis-karte {
  width: min(420px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 20px;
  border-radius: var(--fm-radius-xl);
  background: var(--fm-bg-card, #fff);
  border: 1px solid var(--fm-line);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
  text-align: center;
  animation: pop var(--fm-duration-slow) var(--fm-ease-organic) both;
}

.hinweis-name {
  margin: 0 0 10px;
  font-size: var(--fm-text-15);
  font-weight: 500;
  word-break: break-word;
}
.hinweis-text {
  margin: 0 0 6px;
  font-size: var(--fm-text-13);
  line-height: 1.55;
  color: var(--fm-text-soft);
}
.hinweis-sub {
  margin: 0;
  font-size: var(--fm-text-12);
  color: var(--fm-text-faint);
}
.hinweis-akt {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 18px;
}
.hinweis-akt .btn { flex: 1 1 auto; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .hinweis, .hinweis-karte { animation: none; }
}

/* ======================================================================
   Kasten hinter der Übergabe
   Fasst Absender, Titel und Dateien zu einer Fläche zusammen — sehr
   zurückhaltend, damit Punktfeld und Logo-Kontur dahinter sichtbar bleiben.
   ====================================================================== */

.wrap.hat-kasten {
  flex: 0 1 auto;
  margin-top: clamp(16px, 3vw, 30px);
  margin-bottom: clamp(24px, 4vw, 40px);
  padding: clamp(26px, 4vw, 46px) clamp(18px, 3vw, 40px) clamp(30px, 4vw, 50px);
  border-radius: clamp(18px, 2.4vw, 30px);
  background: var(--kasten);
}

@media (max-width: 620px) {
  .wrap.hat-kasten {
    margin-inline: 12px;
    width: auto;
    border-radius: 18px;
  }
}