/* views.css — Styles für die gemeinsamen Medien-Ansichten (views.js).
   Genutzt von deliveries.html (Portal) und share.html (Kundensicht). */

/* ===== Player: Glasleiste (Variante B, gewaehlt 2026-07-31) =====
   Die Steuerung sitzt in einer schwebenden Pille mit Milchglas, abgesetzt vom
   Rand, statt unter einem Verlauf ueber dem Bild. Sie bringt ihren eigenen Grund
   mit und traegt deshalb auf hellen wie dunklen Frames gleich gut. Genutzt von
   deliveries.html (Portal) und share.html (Kundensicht), damit sich beide gleich
   anfuehlen. Die Farben sind hier absichtlich fest und laufen NICHT ueber Tokens:
   der Player liegt in beiden Themes auf dem Video. */
.vl-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 999px;
  background: rgba(18,14,16,.55);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}
.vl-pill button { background: none; border: 0; padding: 0; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none; }
.vl-pill .material-symbols-outlined { font-size: 22px; color: #fff !important; transition: color .15s; }
.vl-pill button:hover .material-symbols-outlined { color: #F20D46 !important; }
/* Zeitanzeige laeuft in der Fliesstext-Schrift, nicht in der Display-Schrift:
   Unbounded ist als Headline-Schrift gebaut, ihre Ziffern tragen zu viel
   Charakter fuer eine Zahl, die sich sekuendlich aendert. Gilt fuer alle
   Wiedergabe-Zahlen (Zeitanzeige, Hover-Zeit, Timecode-Chips). */
.vl-pill .vl-p-time { font-family: 'Funnel Display', sans-serif; font-weight: 600; font-size: 11.5px;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; color: rgba(255,255,255,.9) !important;
  white-space: nowrap; flex: none; }
.vl-pill .vl-p-q { font-family: 'Unbounded'; font-weight: 900; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.75) !important; background: none;
  padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); flex: none; }
.vl-pill .vl-p-q:hover { color: #fff !important; border-color: rgba(255,255,255,.35); }
/* Zeitleiste in der Pille: duenn, waechst unter der Maus */
.vl-pill .vl-p-bar { position: relative; flex: 1 1 auto; min-width: 60px; height: 14px;
  cursor: pointer; touch-action: none; }
.vl-pill .vl-p-bar .tl-track,
.vl-pill .vl-p-bar .tl-buf,
.vl-pill .vl-p-bar .tl-prog { position: absolute; top: 6px; height: 3px; border-radius: 3px;
  transition: height .15s, top .15s; }
.vl-pill .vl-p-bar .tl-track { left: 0; right: 0; background: rgba(255,255,255,.22); }
.vl-pill .vl-p-bar .tl-buf { left: 0; width: 0%; background: rgba(255,255,255,.34); }
.vl-pill .vl-p-bar .tl-prog { left: 0; width: 0%; background: #F20D46; }
.vl-pill .vl-p-bar:hover .tl-track,
.vl-pill .vl-p-bar:hover .tl-buf,
.vl-pill .vl-p-bar:hover .tl-prog { height: 5px; top: 5px; }
.vl-pill .tl-prog::after { content: ''; position: absolute; right: -5px; top: 50%;
  width: 10px; height: 10px; border-radius: 50%; background: #fff;
  transform: translateY(-50%); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
@media (max-width: 560px) {
  .vl-pill { gap: 8px; padding: 8px 10px; }
  .vl-pill .vl-p-time { font-size: 10px; }
}

/* ===== Player: Steuerung blendet aus, wenn die Maus weg ist =====
   Sichtbar bleibt sie bei Pause (sonst verliert man den Player aus dem Blick)
   und sobald etwas darin den Tastaturfokus hat (sonst waere sie nicht bedienbar
   ohne Maus). Animiert werden nur opacity und transform. */
.vl-ctl-auto {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.16,1,.30,1), transform .22s cubic-bezier(.16,1,.30,1);
}
#video-container:hover .vl-ctl-auto,
#video-container:focus-within .vl-ctl-auto,
#video-container.vl-paused .vl-ctl-auto,
.vl-stage:hover .vl-ctl-auto,
.vl-stage:focus-within .vl-ctl-auto,
.vl-stage.vl-paused .vl-ctl-auto {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Ohne Maus (Touch) gibt es kein Hover, dort bleibt die Steuerung stehen. */
@media (hover: none) {
  .vl-ctl-auto { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .vl-ctl-auto { transition: none; }
}

/* ===== Ansichten (views.js): Toolbar, Raster, Kompakt, Liste ===== */
.vl-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.vl-seg { display:flex; gap:2px; padding:3px; border-radius:9999px; background:var(--surf-a040, rgba(255,255,255,0.04)); border:1px solid var(--line-a070, rgba(255,255,255,0.07)); }
.vl-seg-btn { width:30px; height:28px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
  color:var(--fg-a400, rgba(255,255,255,0.4)); background:transparent; border:0; cursor:pointer; transition:background .15s, color .15s; }
.vl-seg-btn:hover { color:var(--fg-1, #fff); }
.vl-seg-btn.on { background:#F20D46; color:var(--fg-1, #fff); }
.vl-size { display:flex; align-items:center; gap:8px; }
.vl-size input[type=range] { width:96px; accent-color:#F20D46; }
/* Sortierung gehoert zur Steuerung und steht bei den anderen Bedienelementen.
   Vorher stand hier margin-left:auto, das hat sie auf breiten Schirmen ans
   andere Zeilenende geschoben und wie ein verirrtes Element wirken lassen. */
.vl-sort { display:flex; align-items:center; gap:6px; }
.vl-sort select { background:var(--bg-ctl, #1a1618); border:1px solid var(--line-a080, rgba(255,255,255,0.08)); border-radius:9999px; color:var(--fg-1, #fff);
  font-family:'Unbounded'; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:7px 12px; outline:none; cursor:pointer; }
.vl-sort button { width:30px; height:30px; border-radius:50%; background:var(--bg-ctl, #1a1618); border:1px solid var(--line-a080, rgba(255,255,255,0.08));
  color:var(--fg-a600, rgba(255,255,255,0.6)); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.vl-sort button:hover { color:var(--fg-1, #fff); }

.vl-grid { display:grid; gap:16px; align-items:start; }
.vl-folder-thumb { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--bg-s1b,#1a1a1a),var(--bg-dim,#111)); }
/* Sobald ein Ordner ein Vorschaubild aus seinem Inhalt zeigt, ist er von einem Video
   oder Bild nicht mehr zu unterscheiden. Diese kleine Marke unten links sagt weiter
   "das ist ein Ordner", ohne das Bild zuzudecken. */
.vl-folder-mark { position:absolute; left:8px; bottom:8px; z-index:10; display:flex;
  align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); pointer-events:none; }
.vl-folder-mark .material-symbols-outlined { font-size:15px; color:rgba(255,255,255,0.85); }
/* Im Mosaik steht der Ordnername dauerhaft unten, dort waere die Marke im Weg.
   Ordner haben keine Auswahl-Box, also ist oben links frei. */
.vl-folder-mark.sm { left:5px; top:5px; bottom:auto; width:19px; height:19px; border-radius:6px; }
.vl-folder-mark.sm .material-symbols-outlined { font-size:12px; }

/* Shine: ein Lichtstreifen wandert beim Darueberfahren einmal schraeg ueber die
   Ordner-Kachel. Nur auf Ordnern, damit die Geste etwas bedeutet und nicht jede
   Kachel glitzert. Animiert werden ausschliesslich transform und opacity.
   Der Streifen liegt ueber dem Vorschaubild (z-index 6), aber unter Play-Knopf,
   Haekchen und Ordner-Marke, die alle hoeher sitzen.
   Im Light-Theme traegt Weiss auf Weiss nicht, dort glaenzt es warm rot. */
.folder-cover::before {
  content:''; position:absolute; top:-30%; bottom:-30%; left:-40%; width:45%;
  z-index:6; pointer-events:none; opacity:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.42), transparent);
  transform:translateX(0) rotate(8deg);
  transition:transform .85s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
[data-theme="light"] .folder-cover::before {
  background:linear-gradient(100deg, transparent, rgba(242,13,70,0.20), transparent);
}
.film-card:hover .folder-cover::before,
.vl-tile:hover.folder-cover::before {
  opacity:1; transform:translateX(320%) rotate(8deg);
}
@media (prefers-reduced-motion: reduce) {
  .folder-cover::before { transition:none; }
  .film-card:hover .folder-cover::before,
  .vl-tile:hover.folder-cover::before { opacity:0; transform:none; }
}

/* Dauer-Badge auf der Kachel ist ebenfalls eine Wiedergabe-Zahl → Fliesstext-Schrift. */
.vl-badge { position:absolute; top:8px; right:8px; z-index:10; padding:2px 8px; border-radius:9999px;
  font-family:'Funnel Display', sans-serif; font-size:10px; font-weight:600; font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,0.7); color:#ffd000; border:1px solid rgba(255,208,0,0.3); }

.vl-group { font-family:'Unbounded'; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--fg-a450, rgba(255,255,255,0.45)); margin:22px 0 10px; }
.vl-group:first-child { margin-top:0; }
.vl-compact { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--tile,150px),1fr)); gap:3px; }
.vl-compact .vl-tile { position:relative; aspect-ratio:1; overflow:hidden; border-radius:4px; background:var(--bg-dim, #111);
  cursor:pointer; transition:transform .18s cubic-bezier(.34,1.56,.64,1); }
.vl-compact .vl-tile:hover { transform:scale(1.03); z-index:2; }
/* Ordner im Mosaik: braucht eigene Regel, weil `.vl-compact .vl-tile` mit zwei Klassen
   die einfache .folder-cover-Regel weiter unten ueberschreiben wuerde. Kachel ist
   quadratisch, darum der 4:3-Zuschnitt statt 16:9, der beschneidet weniger. */
.vl-compact .vl-tile.folder-cover {
  background: var(--bg-dim, #111) url('Assets/folder-cover-dark-4x3.v3.webp') center / cover no-repeat;
}
[data-theme="light"] .vl-compact .vl-tile.folder-cover {
  /* Der Papierton des Bildes selbst, nicht --fg-1. Das ist im Light-Theme die
     Vordergrundfarbe (#0A0708), da blitzte beim Laden Schwarz auf. */
  background-color: #DCCEBD;
  background-image: url('Assets/folder-cover-light-4x3.v5.webp');
}
/* Im Mosaik zeigen alle Bilder volle Helligkeit, auch Entwuerfe. Der Entwurfsstatus
   haengt stattdessen als kleiner Punkt oben rechts an der Kachel. */
.vl-compact .vl-tile.draft img { opacity:1; }
.vl-compact .vl-tile.draft::after {
  content:''; position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:#ffd000; box-shadow:0 0 0 2px rgba(0,0,0,.55); pointer-events:none; z-index:3;
}
.vl-compact .vl-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.vl-compact .vl-play { position:absolute; top:6px; left:6px; font-size:16px; color:var(--fg-1, #fff);
  text-shadow:0 2px 8px rgba(0,0,0,.7); font-variation-settings:'FILL' 1; }
.vl-compact .vl-name { position:absolute; left:0; right:0; bottom:0; padding:14px 8px 6px; font-size:10px;
  color:var(--fg-1, #fff); background:linear-gradient(to top,rgba(0,0,0,.85),transparent); opacity:0; transition:opacity .15s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vl-compact .vl-tile:hover .vl-name, .vl-compact .vl-name.always { opacity:1; }

/* Auswahl: gleiches Häkchen in allen drei Modi */
.vl-check { position:absolute; top:8px; left:8px; z-index:12; width:24px; height:24px; border-radius:7px;
  background:rgba(0,0,0,0.55); border:1px solid var(--line-a350, rgba(255,255,255,0.35)); display:flex; align-items:center;
  justify-content:center; cursor:pointer; opacity:0; transition:opacity .15s;
  padding:0; margin:0; -webkit-appearance:none; appearance:none; }
.vl-check .material-symbols-outlined { color:transparent; }
.film-card:hover .vl-check, .vl-tile:hover .vl-check, .vl-row:hover .vl-check { opacity:1; }
/* Per Tastatur erreichbar: sichtbar werden und sich zeigen, sobald der Fokus draufliegt */
.vl-check:focus-visible { opacity:1; outline:2px solid #F20D46; outline-offset:2px; }
.vl-check:active { transform:scale(.92); }
.vl-check.on { opacity:1; background:#F20D46; border-color:#F20D46; }
/* Der Chip ist in beiden Themes derselbe rote Fleck, also bleibt das Häkchen weiss.
   Mit --fg-1 wurde es im Light-Theme dunkel auf Rot und war kaum zu erkennen. */
.vl-check.on .material-symbols-outlined { color:#fff; }
.film-card.sel, .vl-tile.sel { outline:2px solid #F20D46; outline-offset:-2px; }
.vl-row.sel { background:rgba(242,13,70,0.09); }
/* In der Liste sitzt das Häkchen in der Zeile, nicht absolut */
.vl-c-name .vl-check { position:static; opacity:1; width:20px; height:20px; border-radius:6px;
  background:transparent; border-color:var(--fg-a220, var(--line-a220, rgba(255,255,255,0.22))); flex-shrink:0; }
.vl-c-name .vl-check.on { background:#F20D46; border-color:#F20D46; }

#vl-actionbar { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:200;
  display:flex; align-items:center; gap:12px; background:var(--bg-s1, #161616); border:1px solid var(--line-a120, rgba(255,255,255,0.12));
  border-radius:9999px; padding:10px 14px 10px 20px; box-shadow:0 14px 44px rgba(0,0,0,0.55); }
.vl-ab-count { font-family:'Unbounded'; font-size:12px; font-weight:700; color:var(--fg-1, #fff); white-space:nowrap; }
#vl-actionbar button { font-family:'Unbounded'; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; border:0; border-radius:9999px; padding:9px 16px; cursor:pointer;
  transition:opacity .15s, transform .1s; white-space:nowrap; }
#vl-actionbar button:active { transform:scale(.96); }
#vl-actionbar button:focus-visible { outline:2px solid var(--fg-1, #fff); outline-offset:2px; }
.vl-ab-ghost { background:transparent; color:var(--fg-a500, rgba(255,255,255,0.5)); }
.vl-ab-ghost:hover { color:var(--fg-1, #fff); }
.vl-ab-main { background:#F20D46; color:#fff; }
.vl-ab-danger { background:var(--bg-s3, #2a2528); color:#ff453a; }
/* Freigeben ist die einzige aufbauende Aktion in der Leiste und traegt darum das
   Gruen, das im Kontextmenue und im Ordnerkopf schon fuer "Veroeffentlichen" steht.
   So konkurriert sie nicht mit dem Rot der Uebergabe-Aktionen. */
.vl-ab-go { display:inline-flex; align-items:center; gap:6px; color:#fff;
  background:linear-gradient(135deg,#30d158,#28a745); box-shadow:0 4px 16px rgba(48,209,88,0.25); }
.vl-ab-go .material-symbols-outlined { font-size:15px; }
.vl-ab-main:hover, .vl-ab-go:hover, .vl-ab-danger:hover { opacity:.88; }

.vl-list { border:1px solid var(--line-a060, rgba(255,255,255,0.06)); border-radius:14px; overflow:hidden; }
.vl-row { display:grid; grid-template-columns:minmax(0,1fr) 90px 90px 120px 150px; align-items:center;
  gap:12px; padding:9px 14px; cursor:pointer; border-bottom:1px solid var(--line-a040, rgba(255,255,255,0.04)); }
.vl-row:last-child { border-bottom:0; }
.vl-row:hover { background:var(--surf-a035, rgba(255,255,255,0.035)); }
.vl-row.vl-head { cursor:default; background:var(--surf-a030, rgba(255,255,255,0.03)); font-family:'Unbounded'; font-size:9px;
  font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-a400, rgba(255,255,255,0.4)); }
.vl-row.vl-head .sortable { cursor:pointer; display:flex; align-items:center; gap:4px; }
.vl-row.vl-head .sortable:hover, .vl-row.vl-head .active { color:var(--fg-1, #fff); }
.vl-c-name { display:flex; align-items:center; gap:10px; min-width:0; }
.vl-row-thumb { width:40px; height:28px; object-fit:cover; border-radius:5px; flex-shrink:0; background:var(--bg-s1b, #1a1a1a); }
.vl-row-ico { font-size:22px; color:var(--fg-a350, rgba(255,255,255,0.35)); width:40px; text-align:center; flex-shrink:0; }
.vl-row-title { font-size:13px; color:var(--fg-1, #fff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vl-row-draft { font-family:'Unbounded'; font-size:8px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; padding:2px 7px; border-radius:9999px; background:var(--surf-a100, rgba(255,255,255,0.1));
  color:var(--fg-a750, rgba(255,255,255,0.75)); flex-shrink:0; }
.vl-c-type, .vl-c-size, .vl-c-dim, .vl-c-date { font-size:12px; color:var(--fg-a450, rgba(255,255,255,0.45));
  font-variant-numeric:tabular-nums; }
@media (max-width: 720px) {
  .vl-row { grid-template-columns:minmax(0,1fr) 80px; }
  .vl-c-type, .vl-c-dim, .vl-c-date { display:none; }
}

/* ===== Kunden-Freigabe (review-core.js) ===== */
/* Grün und Gelb tragen auf dem Foto, auf hellen Theme-Flaechen (Chips, Liste,
   Aktionsleiste) sind sie zu blass. Deshalb je Zustand eine zweite, dunklere
   Fassung fuer Schrift und Rahmen, genau wie --accent-ink das fuer Rot macht. */
:root, [data-theme="dark"] {
  --rv-ok-ink: #30d158;
  --rv-warn-ink: #ffd000;
}
[data-theme="light"] {
  --rv-ok-ink: #1B7F3B;
  --rv-warn-ink: #8A5A00;
}
/* Der Zustandspunkt sitzt oben rechts, das Auswahl-Haekchen oben links: beide
   sind damit gleichzeitig sichtbar und stossen sich nie. Die Farbe kommt ueber
   --rv aus review-core.js, damit alle drei Zustaende eine Regel teilen. */
.vl-rv { position:absolute; top:8px; right:8px; z-index:12; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--rv, #fff);
  box-shadow:0 2px 8px rgba(0,0,0,0.35); }
.vl-rv .material-symbols-outlined { font-size:14px; color:#0d0d0d; }
/* "raus" traegt keinen hellen Punkt: auf einem hellen Foto verschwaende ein
   weisses Kreuz auf hellem Grund. Dunkler Grund, helles Zeichen, klar lesbar. */
.vl-rv.vl-rv-out { background:rgba(18,16,17,0.78); border:1px solid rgba(255,255,255,0.25); }
.vl-rv.vl-rv-out .material-symbols-outlined { color:#fff; }
/* Steht schon eine Marke (Versionen, Kommentare) oben rechts, rueckt sie nach
   links weg. Reihenfolge im Markup: erst Punkt, dann Marke. */
.vl-rv + .vl-badge { right:36px; }
.vl-compact .vl-rv { top:5px; right:5px; width:17px; height:17px; }
.vl-compact .vl-rv .material-symbols-outlined { font-size:11px; }
/* Im Mosaik sitzt die Entwurfs-Marke ebenfalls oben rechts. Der Freigabe-Punkt
   liegt darueber, also rueckt er zur Seite statt sie zu verdecken. */
.vl-compact .vl-tile.draft .vl-rv { right:26px; }
/* "raus" bleibt sichtbar, tritt aber zurueck: der Blick soll an dem haengen,
   was noch Arbeit macht. */
.film-card.vl-rv-out .film-thumb img, .vl-compact .vl-tile.vl-rv-out img { opacity:0.32; }
/* Liste: eigene Spalte, deshalb ein Raster mehr. */
.vl-list.vl-with-rv .vl-row { grid-template-columns:minmax(0,1fr) 90px 90px 110px 170px 150px; }
.vl-c-rv { display:flex; align-items:center; gap:6px; font-size:12px; min-width:0;
  color:var(--fg-a450, rgba(255,255,255,0.45)); }
.vl-c-rv .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.vl-c-rv .rv-txt { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 720px) {
  .vl-list.vl-with-rv .vl-row { grid-template-columns:minmax(0,1fr) 80px; }
  .vl-c-rv { display:none; }
}

/* Drei Schnellknoepfe auf der Kachel (nur Raster). Sie liegen unten im Bild und
   erscheinen beim Drueberfahren, damit sie die Vorschau nicht dauerhaft zustellen.
   Ohne Maus (Touch) stehen sie fest, sonst waeren sie unerreichbar. */
.vl-rvquick { position:absolute; left:0; right:0; bottom:0; z-index:11; display:flex; gap:6px;
  justify-content:center; padding:8px; background:linear-gradient(to top, rgba(8,6,7,.72), transparent);
  opacity:0; transition:opacity .15s; }
.film-card:hover .vl-rvquick, .film-card:focus-within .vl-rvquick { opacity:1; }
.vl-rvq { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(18,16,17,.82); border:1px solid rgba(255,255,255,.18); color:#fff; cursor:pointer;
  transition:transform .15s, opacity .15s; }
.vl-rvq .material-symbols-outlined { font-size:16px; color:#fff; }
.vl-rvq:hover { transform:scale(1.08); }
.vl-rvq:active { transform:scale(.92); }
.vl-rvq:focus-visible { outline:2px solid #F20D46; outline-offset:2px; opacity:1; }
.vl-rvq.on[data-rvq="approved"] { background:#30d158; border-color:#30d158; }
.vl-rvq.on[data-rvq="approved"] .material-symbols-outlined { color:#0d0d0d; }
.vl-rvq.on[data-rvq="edit"] { background:#ffd000; border-color:#ffd000; }
.vl-rvq.on[data-rvq="edit"] .material-symbols-outlined { color:#0d0d0d; }
.vl-rvq.on[data-rvq="out"] { background:rgba(255,255,255,.9); border-color:#fff; }
.vl-rvq.on[data-rvq="out"] .material-symbols-outlined { color:#0d0d0d; }
@media (hover:none) { .vl-rvquick { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .vl-rvquick { transition:none; }
  .vl-rvq { transition:none; }
  .vl-rvq:hover { transform:none; }
}

/* Zaehler- und Filterzeile ueber dem Raster */
.vl-rvbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vl-rvchip { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; min-height:38px; border-radius:9999px;
  background:var(--surf-a040, rgba(255,255,255,0.04)); border:1px solid var(--line-a070, rgba(255,255,255,0.07));
  color:var(--fg-a600, rgba(255,255,255,0.6)); font-family:'Funnel Display',sans-serif; font-size:12px;
  cursor:pointer; transition:transform .15s, opacity .15s; }
.vl-rvchip:hover { transform:translateY(-1px); color:var(--fg-1, #fff); }
.vl-rvchip:active { transform:scale(.97); }
.vl-rvchip:focus-visible { outline:2px solid #F20D46; outline-offset:2px; }
/* Aktiver Filter: im Light-Theme das dunklere Marken-Rot (--accent-ink), sonst
   steht weisse Schrift bei 12px unter dem Lesbarkeitsminimum. */
.vl-rvchip.on { background:var(--accent-ink, #F20D46); border-color:var(--accent-ink, #F20D46); color:#fff; }
.vl-rvchip .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.vl-rvchip .num { font-variant-numeric:tabular-nums; opacity:.75; }
.vl-rvchip.go { background:linear-gradient(135deg,#30d158,#28a745); border-color:transparent; color:#fff; }
/* Solange noch etwas offen ist, ist der Abschluss kein Angebot: dann faellt auch
   die Farbe weg, sonst sieht der Knopf klickbar aus und ist es nicht. */
.vl-rvchip[disabled] { background:var(--surf-a040, rgba(255,255,255,0.04));
  border-color:var(--line-a070, rgba(255,255,255,0.07)); color:var(--fg-a350, rgba(255,255,255,0.35));
  cursor:default; }
.vl-rvchip[disabled]:hover { transform:none; color:var(--fg-a350, rgba(255,255,255,0.35)); }

/* Knoepfe in der Aktionsleiste (Mehrfachauswahl) */
.vl-ab-sep { width:1px; height:18px; background:var(--line-a120, rgba(255,255,255,0.12)); flex:none; }
#vl-actionbar .vl-ab-rv { border:1px solid var(--line-a140, rgba(255,255,255,0.14)); background:transparent;
  color:var(--fg-1, #fff); }
#vl-actionbar .vl-ab-rv:hover { opacity:.85; }
/* Schrift und Rahmen in der Ink-Fassung: die Leiste steht im Light-Theme auf
   Weiss, dort waeren die hellen Marken-Toene nicht mehr zu lesen. */
#vl-actionbar .vl-ab-rv.approved { border-color:var(--rv-ok-ink, #30d158); color:var(--rv-ok-ink, #30d158); }
#vl-actionbar .vl-ab-rv.edit { border-color:var(--rv-warn-ink, #ffd000); color:var(--rv-warn-ink, #ffd000); }
#vl-actionbar .vl-ab-rv.out { border-color:var(--line-a180, rgba(255,255,255,0.18)); color:var(--fg-a700, rgba(255,255,255,0.7)); }

/* Fussleiste in der Grossansicht (Lightbox und Player) */
.vl-rvfoot { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px 16px; }
.vl-rvbtn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:9999px;
  border:1px solid var(--line-a140, rgba(255,255,255,0.14)); background:var(--surf-a050, rgba(255,255,255,0.05));
  color:var(--fg-1, #fff); font-family:'Funnel Display',sans-serif; font-size:13px; cursor:pointer;
  transition:transform .15s, opacity .15s; }
.vl-rvbtn:hover { transform:translateY(-1px); }
.vl-rvbtn:active { transform:scale(.96); }
.vl-rvbtn:focus-visible { outline:2px solid #F20D46; outline-offset:2px; }
.vl-rvbtn kbd { font-family:'Funnel Display',sans-serif; font-size:10px; opacity:.6; line-height:1;
  border:1px solid currentColor; border-radius:4px; padding:2px 5px; }
.vl-rvbtn.approved.on { background:rgba(48,209,88,0.16); border-color:var(--rv-ok-ink, #30d158); color:var(--rv-ok-ink, #30d158); }
.vl-rvbtn.edit.on { background:rgba(255,208,0,0.16); border-color:var(--rv-warn-ink, #ffd000); color:var(--rv-warn-ink, #ffd000); }
.vl-rvbtn.out.on { background:var(--surf-a120, rgba(255,255,255,0.12));
  border-color:var(--fg-a400, rgba(255,255,255,0.45)); color:var(--fg-1, #fff); }
.vl-rvfoot .vl-rvhint { font-size:11px; color:var(--fg-a350, rgba(255,255,255,0.35)); }
/* Die Lightbox bringt ihren dunklen Grund selbst mit (Inline-Style, den das Theme
   nicht anfasst), ist also in BEIDEN Themes dunkel. Sie traegt deshalb die
   Bestandsklasse .vl-on-dark (theme.js), die dort die Dark-Tokens wieder
   herstellt: Rahmen, Flaechen und die Ink-Faelle stimmen damit von allein.
   Die GEERBTE Textfarbe repariert .vl-on-dark aber nicht: color wird vom body
   als fertiger Wert vererbt, ein neu gesetztes --fg-1 loest ihn nicht neu auf.
   Deshalb hier einmal ausdruecklich, sonst stand der Dateiname im Light-Theme
   dunkel auf dunklem Grund (galt schon vor der Freigabe-Leiste). */
#vl-lightbox, #vl-lb { color: var(--fg-1, #fff); }
@media (max-width: 640px) {
  .vl-rvfoot .vl-rvbtn { flex:1 1 28%; justify-content:center; padding:13px 10px; }
  .vl-rvfoot .vl-rvhint { display:none; }
  .vl-rvchip { min-height:44px; padding:10px 15px; }
}

/* Kurzer Hinweis unten rechts (gespeichert, zurueckgerollt, Link inaktiv) */
.vl-rvtoast { position:fixed; right:20px; bottom:20px; z-index:900; display:flex; align-items:center; gap:12px;
  background:var(--bg-s1, #161616); border:1px solid var(--line-a120, rgba(255,255,255,0.12)); border-radius:12px;
  padding:11px 15px; box-shadow:0 14px 44px rgba(0,0,0,0.5); font-family:'Funnel Display',sans-serif; font-size:13px;
  color:var(--fg-1, #fff); opacity:0; transform:translateY(8px); transition:opacity .18s, transform .18s; }
.vl-rvtoast.on { opacity:1; transform:translateY(0); }
.vl-rvtoast button { background:none; border:0; color:#F20D46; cursor:pointer; font-size:12px;
  font-family:'Funnel Display',sans-serif; text-decoration:underline; padding:0; }
.vl-rvtoast button:hover { opacity:.8; }
.vl-rvtoast button:active { transform:scale(.96); }
.vl-rvtoast button:focus-visible { outline:2px solid #F20D46; outline-offset:2px; }
/* Auf schmalen Schirmen sitzt die Aktionsleiste unten mittig. Der Hinweis rueckt
   darueber und nimmt die volle Breite, sonst laufen lange Meldungen ueber den
   Rand oder liegen auf der Leiste. */
@media (max-width: 560px) {
  .vl-rvtoast { left:12px; right:12px; bottom:88px; }
}
@media (prefers-reduced-motion: reduce) {
  .vl-rvtoast, .vl-rvchip, .vl-rvbtn { transition:none; }
  .vl-rvchip:hover, .vl-rvbtn:hover { transform:none; }
}


/* ===== Kachel-Optik: Markup stammt aus views.js ===== */

/* ===== Film-poster video cards ===== */
.film-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-dim, #111);
  border: 1px solid var(--line-a050, rgba(255,255,255,0.05));
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s ease;
}
.film-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 8px 24px rgba(242,13,70,0.08);
}
.film-card:active { transform: translateY(-2px) scale(0.99); }

/* Solange ein Drei-Punkte-Menue offen ist, darf die Karte NICHT transformiert
   sein. Grund: ein transform macht das Element zum Bezugsrahmen fuer
   position:fixed. Das Menue haengt sich aber bewusst per fixed an den Viewport,
   um dem overflow:hidden der Karte zu entkommen. Mit aktivem Hover-Transform
   greift das nicht mehr, das Menue wird relativ zur Karte platziert und
   weggeschnitten. Es tauchte deshalb erst auf, wenn man die Maus zur Seite
   bewegt hat und der Hover wegfiel.
   transition:none ist dabei kein Schoenheitsfehler, sondern Teil des Fixes: mit
   Transition faehrt der Transform ueber 0.4s zurueck und bleibt in dieser Zeit
   weiter Bezugsrahmen. Die Position wird aber sofort nach dem Klick gemessen. */
.film-card.ctx-open,
.film-card.ctx-open:hover,
.folder-tile.ctx-open,
.folder-tile.ctx-open:hover,
.vl-tile.ctx-open,
.vl-tile.ctx-open:hover {
  transform: none !important;
  transition: none !important;
}

/* Play button pulse on card hover */
.film-play {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(242,13,70,0.85);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), opacity 0.3s;
  opacity: 0;
  transform: scale(0.7);
  box-shadow: 0 4px 24px rgba(242,13,70,0.4);
}
.film-card:hover .film-play {
  opacity: 1;
  transform: scale(1);
}

/* Image treatment — gradient overlay + color tint */
.film-thumb {
  position: relative;
  aspect-ratio: var(--thumb-ratio, 16/9);
  overflow: hidden;
}
.film-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
/* Ordner-Startbild: liegt als Ebene unter dem echten Cover und trägt,
   wenn keins da ist oder es nicht lädt. Theme-Wechsel per CSS, kein JS.

   ⚠️ Der Dateiname trägt eine Version (.v3.). Netlify liefert Assets mit
   `cache-control: max-age=31536000, immutable` aus. `immutable` heißt, der
   Browser fragt NIE nach, bis sich die URL ändert. Ein neues Bild unter dem
   alten Namen kommt bei niemandem an, der die Seite schon einmal geladen hat,
   auch nicht nach hartem Neuladen. Wer das Bild tauscht, zählt die Version
   hoch und passt die vier Stellen hier plus die zwei in admin.html an. */
.folder-cover {
  background: var(--bg-dim, #111) url('Assets/folder-cover-dark.v3.webp') center / cover no-repeat;
}
[data-theme="light"] .folder-cover {
  background-color: #DCCEBD;
  background-image: url('Assets/folder-cover-light.v5.webp');
}
.film-card:hover .film-thumb img {
  transform: scale(1.05);
}
.film-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    #0d0d0d 0%,
    rgba(13,13,13,0.7) 35%,
    rgba(13,13,13,0.1) 60%,
    transparent 100%
  );
}
/* Der Verlauf blendet das Cover in die Karte darunter und endet deshalb auf deren
   Farbe. Ohne diesen Gegenpart lief im Light-Theme jedes Cover unten nach #0d0d0d,
   also ins Schwarze. Betrifft alle Kacheln, nicht nur Ordner. */
/* Im Dark-Modus darf der Verlauf tief greifen, dort blendet dunkel in dunkel und
   man sieht es kaum. Auf Weiss ist derselbe Weg brutal: er hat die untere Haelfte
   jeder Kachel ausgebleicht und aus dem Papier-Icon eine weisse Flaeche gemacht.
   Hier reicht ein kurzer Saum ganz unten, nur damit die Kante nicht hart bricht. */
[data-theme="light"] .film-thumb::after {
  background: linear-gradient(to top,
    rgba(255,255,255,0.8) 0%,
    rgba(255,255,255,0.25) 10%,
    transparent 26%
  );
}

/* Hover video preview scrubber */
.film-thumb .hover-preview {
  position: absolute; inset: 0; z-index: 5;
  object-fit: cover; width: 100%; height: 100%;
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}
.film-card:hover .hover-preview.loaded { opacity: 1; }
.film-thumb .scrub-bar {
  position: absolute; bottom: 0; left: 0; height: 3px; z-index: 6;
  background: #F20D46; width: 0%; transition: width 0.05s linear;
  pointer-events: none;
}
.film-card:hover .scrub-bar { opacity: 1; }

/* Draft tiles — nur das Thumbnail dimmen, der Name bleibt hell und lesbar */
.film-card.draft .film-thumb { opacity: 0.45; transition: opacity .25s ease; }
.film-card.draft:hover .film-thumb { opacity: 0.75; }
.draft-badge {
  position: absolute; top: 8px; left: 8px; z-index: 10;
  padding: 3px 10px; border-radius: 999px;
  font-size: 9px; font-family: 'Unbounded'; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--surf-a140, rgba(255,255,255,0.14)); color: var(--fg-a850, rgba(255,255,255,0.85));
  backdrop-filter: blur(8px); border: 1px solid var(--line-a140, rgba(255,255,255,0.14));
  transition: transform .15s ease;
}
/* Das Häkchen sitzt an derselben Ecke. Sobald es auftaucht, ruecht "Entwurf"
   daneben, statt sich davon zur Haelfte verdecken zu lassen. */
.film-card:hover .draft-badge, .film-card.sel .draft-badge { transform: translateX(32px); }
@media (prefers-reduced-motion: reduce) { .draft-badge { transition: none; } }
/* Kachel-Namen sind IMMER hell und lesbar */
.film-card h3 { color: var(--fg-1, #fff) !important; opacity: 1 !important; }
.film-card .film-meta { color: var(--fg-a500, rgba(255,255,255,0.5)); }

/* Laufende Uploads — Kachel im Werden.
   Sie sitzt im selben Grid wie die fertigen Medien, damit im Ordner sichtbar
   bleibt, was gerade hochlaedt. Das Upload-Symbol unten rechts zeigt denselben
   Vorgang global, ersetzt die Kachel hier aber nicht: wer den Ordner ansieht,
   soll die Datei im Ordner sehen. */
.vl-up-card { cursor: default; }
.vl-up-card:hover { transform: none; box-shadow: none; }
.vl-up-thumb {
  display: flex; align-items: center; justify-content: center;
  background: var(--surf-a050, rgba(255,255,255,0.05));
  border-bottom: 1px solid var(--line-a080, rgba(255,255,255,0.08));
}
.vl-up-thumb::after { content: none; }   /* kein Verlauf, es liegt kein Bild darunter */
.vl-up-ico {
  font-size: 30px; color: var(--fg-a300, rgba(255,255,255,0.3));
  animation: vl-up-puls 1.8s ease-in-out infinite;
}
.vl-up-card.is-error .vl-up-ico, .vl-up-row.is-error .vl-up-ico, .vl-up-tile.is-error .vl-up-ico {
  color: #F20D46; animation: none;
}
@keyframes vl-up-puls { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vl-up-ico { animation: none; } }

.vl-up-track {
  height: 4px; border-radius: 999px; overflow: hidden;
  background: var(--surf-a100, rgba(255,255,255,0.1));
  margin-bottom: 6px;
}
.vl-up-fill {
  height: 100%; border-radius: 999px; background: #F20D46;
  transition: width 0.3s ease;
}
.vl-up-card.is-error .vl-up-fill, .vl-up-row.is-error .vl-up-fill { background: var(--fg-a300, rgba(255,255,255,0.3)); }
/* Mosaik: der Balken liegt als schmale Leiste unten in der Kachel */
.vl-up-track.mosaik { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; z-index: 3; }
/* Liste: schmaler Balken direkt hinter dem Namen */
.vl-up-track.zeile { flex: 0 0 90px; margin: 0 0 0 10px; }

/* Zwei Klassen im Selektor, weil `.vl-compact .vl-tile` sonst Hintergrund und
   Cursor zurueckgewinnt (hoehere Spezifitaet). */
.vl-compact .vl-tile.vl-up-tile {
  display: flex; align-items: center; justify-content: center;
  background: var(--surf-a050, rgba(255,255,255,0.05));
  cursor: default;
}
.vl-compact .vl-tile.vl-up-tile:hover { transform: none; }
.vl-up-row { cursor: default; }
.vl-up-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Context menu */
.ctx-menu { position: absolute; right: 8px; bottom: 8px; z-index: 10; }
/* Der Knopf sitzt auf dem Kachelfuss, also auf der Flaeche der Karte und nicht
   auf dem Bild. Er nimmt deshalb die Theme-Farben statt eines festen Schwarz:
   im Light-Theme war der harte schwarze Kreis ein Fremdkoerper auf der hellen
   Karte. --bg-s2 ist dunkel im Dark-, sandfarben im Light-Theme. */
.ctx-trigger { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-s2, #1f1f1f); border: 1px solid var(--line-a100, rgba(255,255,255,0.1)); backdrop-filter: blur(8px); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s, background 0.15s; }
.film-card:hover .ctx-trigger, .folder-tile:hover .ctx-trigger { opacity: 1; }
/* Solange das Menue offen ist, bleibt der Knopf sichtbar, auch wenn die Maus
   die Karte laengst verlassen hat (das Menue haengt am body, nicht an der Karte). */
.film-card.ctx-open .ctx-trigger, .folder-tile.ctx-open .ctx-trigger, .vl-tile.ctx-open .ctx-trigger { opacity: 1; }
.ctx-trigger:hover { background: var(--surf-a140, rgba(255,255,255,0.14)); }
.ctx-trigger:active { transform: scale(0.94); }

/* ---------- Wegploppen beim Loeschen ----------
   Geloeschtes verschwindet sofort und sichtbar, statt stehen zu bleiben, bis
   Datenbank und Storage durch sind. Kurz und hart am Ende, damit es nach
   "weg" aussieht und nicht nach "wird ausgeblendet". */
@keyframes vl-weg-anim {
  0%   { opacity: 1;   transform: scale(1); }
  18%  { opacity: 0.9; transform: scale(1.05); }
  100% { opacity: 0;   transform: scale(0.66); }
}
.vl-weg {
  pointer-events: none;
  animation: vl-weg-anim 0.2s cubic-bezier(.4, 0, .9, .25) forwards;
  transform-origin: center;
  z-index: 1;
}
/* Zeilen kippen nicht in sich zusammen, die schrumpfen zur Seite weg. */
.vl-row.vl-weg { animation-name: vl-weg-zeile; }
@keyframes vl-weg-zeile {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .vl-weg { animation: none; opacity: 0; }
}
.ctx-trigger:focus-visible { opacity: 1; outline: none; border-color: #F20D46; box-shadow: 0 0 0 1px #F20D46; }
.ctx-item:focus-visible { outline: none; background: var(--surf-a060, rgba(255,255,255,0.06)); box-shadow: 0 0 0 1px #F20D46 inset; }
.ctx-item:active { transform: scale(0.98); }
.ctx-dropdown { position: absolute; right: 0; bottom: 36px; background: var(--bg-s1b, #1a1a1a); border: 1px solid var(--line-a100, rgba(255,255,255,0.1)); border-radius: 12px; padding: 4px; min-width: 150px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); display: none; z-index: 20; }
.ctx-dropdown.open { display: block; }
.ctx-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; font-family: 'Funnel Display'; color: var(--fg-a700, rgba(255,255,255,0.7)); border: none; background: none; width: 100%; text-align: left; transition: background 0.15s; }
.ctx-item:hover { background: var(--surf-a060, rgba(255,255,255,0.06)); color: var(--fg-1, #fff); }
.ctx-item.danger { color: #F20D46; }
.ctx-item.danger:hover { background: rgba(242,13,70,0.1); }

/* ---------- Wisch-Modus (Handy) ---------- */
/* Eine Karte je Bild. Bewegt wird ausschliesslich ueber transform und opacity,
   alles andere zwingt den Browser bei jedem Bild zum Neuberechnen des Layouts,
   und genau das macht das Wischen ruckelig. */
#vl-sw{
  position:fixed; inset:0; z-index:85;
  /* Deckend, nicht durchscheinend. Bei 0.97 schimmerte die Galerie dahinter
     durch (heller Text auf dunklem Grund reicht dafuer schon), und beim Sichten
     zieht jede Bewegung im Hintergrund den Blick vom Bild weg. */
  background:#0a0708;
  display:flex; flex-direction:column;
  opacity:0; transition:opacity .16s ease;
  overscroll-behavior:contain;
}
#vl-sw.offen{ opacity:1; }

.sw-kopf{ display:flex; align-items:center; gap:12px; padding:12px 16px; flex:none; }
.sw-titel{ font-size:13px; font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sw-meta{ font-size:11px; color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums; }
.sw-x{
  margin-left:auto; flex:none; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.08); border:0; color:#fff; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, background-color .12s ease;
}
.sw-x:hover{ background:rgba(255,255,255,.14); }
.sw-x:active{ transform:scale(.94); }
.sw-x:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }

.sw-stapel{ position:relative; flex:1 1 auto; margin:4px 16px 8px; min-height:0; }
.sw-karte{
  position:absolute; inset:0; border-radius:18px; overflow:hidden;
  background:#161616; border:1px solid rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
.sw-karte img{ width:100%; height:100%; object-fit:contain; }
/* Die naechste Karte liegt sichtbar dahinter. Ohne sie wirkt der Stapel leer,
   sobald die oberste wegfliegt, und man sieht kurz nur den Hintergrund. */
.sw-hinten{ transform:scale(.94) translateY(10px); opacity:.55; }
/* touch-action:none, NICHT pan-y. pan-y hiesse: das vertikale Wischen gehoert
   dem Browser. Genau das sind hier aber zwei der vier Gesten (hoch bearbeiten,
   runter ueberspringen). Auf einem echten Geraet haette Safari sie abgefangen
   und die Seite gescrollt, statt die Karte dem Finger folgen zu lassen.

   Zu sehen war das in keinem automatischen Test: synthetische Touch-Events
   gehen direkt an das Element und umgehen die Gestenvergabe des Browsers
   vollstaendig. Der Fehler haette erst auf Klaras Handy gestanden.

   Die Listener duerfen deshalb passiv bleiben: mit touch-action:none kommt
   ohnehin jede Geste bei uns an, ein preventDefault waere nur Ballast. */
.sw-vorn{ box-shadow:0 20px 50px rgba(0,0,0,.55); touch-action:none; }

.sw-marke{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  padding:8px 16px; border-radius:999px; font-weight:800; font-size:13px;
  letter-spacing:.1em; opacity:0; pointer-events:none;
  border:2px solid currentColor; background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
}
.sw-marke.approved{ color:#30d158; }
.sw-marke.out{ color:rgba(255,255,255,.75); }
.sw-marke.edit{ color:#ffd000; }
.sw-marke.skip{ color:rgba(255,255,255,.5); }

.sw-fuss{ display:flex; align-items:center; justify-content:center; gap:14px; padding:6px 16px 4px; flex:none; }
.sw-btn{
  width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, background-color .12s ease, opacity .12s ease;
}
.sw-btn .material-symbols-outlined{ font-size:26px; }
.sw-btn:active{ transform:scale(.9); }
.sw-btn:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.sw-btn.zurueck{ width:44px; height:44px; }
.sw-btn.zurueck:disabled{ opacity:.3; cursor:default; }
.sw-btn.out:hover, .sw-btn.out.on{ background:rgba(255,255,255,.16); }
.sw-btn.edit{ color:#ffd000; }
.sw-btn.edit:hover, .sw-btn.edit.on{ background:rgba(255,208,0,.18); }
.sw-btn.approved{ color:#30d158; }
.sw-btn.approved:hover, .sw-btn.approved.on{ background:rgba(48,209,88,.18); }
.sw-btn.on{ border-color:currentColor; }

.sw-hinweis{
  padding:4px 20px 16px; text-align:center; flex:none;
  font-size:11px; line-height:1.6; color:rgba(255,255,255,.45);
}
.sw-hinweis button{
  display:block; margin:6px auto 0; background:none; border:0; padding:4px 8px;
  color:rgba(255,255,255,.75); text-decoration:underline; cursor:pointer; font-size:11px;
}
.sw-hinweis button:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }

.sw-fertig{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; color:rgba(255,255,255,.7);
}
.sw-fertig .material-symbols-outlined{ font-size:44px; color:#30d158; }
.sw-fertig button{
  margin-top:6px; padding:10px 20px; border-radius:999px; border:0;
  background:#F20D46; color:#fff; font-weight:700; font-size:13px; cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
}
.sw-fertig button:active{ transform:scale(.95); }
.sw-fertig button:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }