/* ══ Upload-Bereich ═════════════════════════════════════════════════
 * Lebt in der Glasscheibe der Startseiten-Komposition (.lkx-colcopy).
 * Farben und Haarlinien wie der Anfrage-Dialog (.nk). Der Fortschritt
 * folgt der GetLayers-Section „Roadmap Ascent“ — Knoten, Zeitleiste,
 * Odometer — in Weiß statt Limette. */
.up {
  --up-ink: #f2f2f2;
  --up-dim: rgba(242, 242, 242, 0.62);
  --up-line: rgba(255, 255, 255, 0.22);
  --up-fill: rgba(255, 255, 255, 0.06);
  --up-ok: #b9f5c8;
  --up-err: #ffb4a8;
  --up-spine: 50%;
  --up-knoten: 72px;

  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  flex: 1;
  min-height: 0;
  padding-top: 8px;
  overflow-y: auto;
  color: var(--up-ink);
  font-size: 16px;
  line-height: 1.45;
}

.up [hidden] { display: none !important; }

.up-titel {
  font-size: clamp(26px, 2.6vw, 44px);
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* Die Scheibe ist hier ein Arbeitsbereich, kein Hero: linksbündig, kurzer
 * Abstand oben, der Inhalt scrollt in .up. */
.lk-divide .lkx-colcopy { align-items: stretch; text-align: left; }
.lk-divide .lkx-gap-a { flex: 0 0 auto; min-height: 0; height: clamp(20px, 5vh, 56px); }

.up .up-titel:focus-visible, .up-titel:focus { outline: none; }
.up-teil { display: flex; flex-direction: column; gap: 16px; }
.up-teil h2 { font-size: 28px; line-height: 1.15; }
.up .up-teil h2:focus-visible, .up-teil h2:focus { outline: none; }
.up-text, .up-meta, .up-ds { color: var(--up-dim); }
.up-anzeige { font-size: 20px; }
.up-ds { font-size: 13px; }
.up-text a, .up-ds a, .up-meldung a { color: inherit; }
.up-label { font-size: 14px; color: var(--up-dim); }
.up-fehler, .up-meldung { color: var(--up-err); font-size: 14px; }

/* ── Code ─────────────────────────────────────────────────────────── */
.up-codezeile {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--up-line);
  border-radius: 14px;
  background: var(--up-fill);
  overflow: hidden;
}

.up-codezeile:focus-within { border-color: rgba(255, 255, 255, 0.7); }
.up-codezeile[data-fehler] { border-color: var(--up-err); }

.up-praefix,
.up-code {
  font-size: 22px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.up-praefix {
  display: flex;
  align-items: center;
  padding: 0 2px 0 16px;
  color: var(--up-dim);
}

.up-code {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 14px 0;
  background: none;
  outline: none;
  text-transform: uppercase;
}

.up-code::placeholder { color: rgba(242, 242, 242, 0.3); }

/* ── Felder und Knöpfe ────────────────────────────────────────────── */
.up-feld {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--up-line);
  border-radius: 14px;
  background: var(--up-fill);
  resize: vertical;
}

.up-feld:focus { outline: none; border-color: rgba(255, 255, 255, 0.7); }

.up .up-btn {
  align-self: flex-start;
  padding: 14px 32px;
  border-radius: 32px;
  background: var(--d-cta, #f2f2f2);
  color: var(--d-cta-ink, #0c0c0c);
  font-size: 18px;
  font-weight: 400;
}

.up .up-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; box-shadow: none; }

.up-btn-ghost {
  padding: 12px 22px;
  border: 1px solid var(--up-line);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.up-btn-ghost:hover { background: var(--up-fill); }
.up :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Ablagefläche ─────────────────────────────────────────────────── */
.up-ablage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 180px;
  padding: 24px;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: 22px;
  background: var(--up-fill);
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}

.up-ablage:hover,
.up[data-ziehen] .up-ablage {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.up-ablage strong { font-size: 20px; font-weight: 400; }
.up-ablage span { color: var(--up-dim); font-size: 14px; }

.up[data-hat-dateien] .up-ablage {
  flex-direction: row;
  min-height: 0;
  padding: 12px 16px;
}

/* ── Bühne (Ascent) ───────────────────────────────────────────────── */
.up-buehne {
  position: relative;
  flex: none;
  height: clamp(190px, 26vh, 320px);
  overflow: hidden;
}

.up-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--up-spine);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16) 16%, rgba(255, 255, 255, 0.16) 84%, transparent);
}

.up-zeilen {
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(180deg, transparent 2%, #000 26%, #000 74%, transparent 98%);
  mask: linear-gradient(180deg, transparent 2%, #000 26%, #000 74%, transparent 98%);
}

.up-zeile {
  position: absolute;
  top: 0;
  /* Rechts verankert skaliert die Zeile nach links (1,09x, -18 px): 36 px
   * Luft links, damit der Anfang des Namens sichtbar bleibt. */
  left: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: calc(var(--up-spine) - var(--up-knoten) / 2 - 20px - 36px);
  transform-origin: 100% 50%;
  will-change: transform, opacity;
  font-size: 14px;
  white-space: nowrap;
}

.up-zname { overflow: hidden; text-overflow: ellipsis; }

.up-zeile::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.up-zeile[data-status="angenommen"]::after { background: var(--up-ok); }
.up-zeile[data-status="abgelehnt"]::after,
.up-zeile[data-status="quarantaene"]::after,
.up-zeile[data-status="fehler"]::after { background: var(--up-err); }
.up-zeile[data-status="pruefung"]::after { background: #fff; animation: up-puls 1.2s ease-in-out infinite; }

.up-strich {
  position: absolute;
  top: 0;
  left: calc(var(--up-spine) - 7px);
  width: 14px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.up-glow {
  position: absolute;
  top: 50%;
  left: var(--up-spine);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(3px);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 36%, transparent 66%);
  animation: up-atmen 3.4s ease-in-out infinite;
}

.up-knoten {
  position: absolute;
  top: 50%;
  left: var(--up-spine);
  width: var(--up-knoten);
  height: var(--up-knoten);
  transform: translate(-50%, -50%);
}

.up-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#fff calc(var(--p, 0) * 360deg), rgba(255, 255, 255, 0.09) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

.up-face {
  position: absolute;
  inset: 5px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  background: radial-gradient(120% 120% at 50% 18%, rgba(40, 40, 46, 0.92), rgba(10, 10, 12, 0.92) 82%);
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.up-face svg {
  width: 42%;
  height: 42%;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: up-wippen 2.6s ease-in-out infinite;
}

.up-zahl {
  position: absolute;
  top: 50%;
  left: calc(var(--up-spine) + var(--up-knoten) / 2 + 28px);
  display: flex;
  align-items: baseline;
  transform: translateY(-50%);
}

.up-odo {
  display: flex;
  font-size: clamp(44px, 4.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.up-ziffer {
  position: relative;
  width: 0.62em;
  height: 1em;
  overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
  transition: width 0.3s, opacity 0.3s;
}

.up-ziffer-aus { width: 0; opacity: 0; }
.up-streifen { display: flex; flex-direction: column; will-change: transform; }
.up-streifen span { display: flex; align-items: center; justify-content: center; height: 1em; }
.up-prozent { margin-left: 0.15em; color: var(--up-dim); font-size: 24px; }

.up-balken { display: none; height: 2px; background: rgba(255, 255, 255, 0.12); }
.up-balken i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }

.up-werte { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--up-dim); font-size: 14px; }

/* ── Dateiliste ───────────────────────────────────────────────────── */
.up-liste { display: flex; flex-direction: column; gap: 4px; }

.up-liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 12px;
  background: var(--up-fill);
  font-size: 14px;
}

.up-lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-lgroesse, .up-lstatus { flex: none; color: var(--up-dim); white-space: nowrap; }
.up-liste li[data-status="angenommen"] .up-lstatus { color: var(--up-ok); }
.up-liste li[data-status="abgelehnt"] .up-lstatus,
.up-liste li[data-status="quarantaene"] .up-lstatus,
.up-liste li[data-status="fehler"] .up-lstatus { color: var(--up-err); }

.up-lweg,
.up-lnochmal {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--up-line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  line-height: 1;
}

.up-lweg:hover,
.up-lnochmal:hover { background: rgba(255, 255, 255, 0.12); }

.up-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.up-aktionen .up-btn { align-self: auto; }

/* ── Rückfrage vor dem Abschluss (Glas wie der Anfrage-Dialog) ───── */
.nk.up-bestaetigen { width: min(460px, calc(100vw - 32px)); }
.nk.up-bestaetigen[open] { gap: 16px; padding: 28px; }
.up-bestaetigen h2 { font-size: 24px; line-height: 1.2; }
.up-bestaetigen p { color: rgba(242, 242, 242, 0.62); }
.up-bestaetigen .up-aktionen { position: relative; z-index: 3; }

@keyframes up-puls { 50% { opacity: 0.3; } }
@keyframes up-atmen { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes up-wippen { 0%, 100% { transform: translateY(1.5px); } 50% { transform: translateY(-2.5px); } }

@media (max-width: 860px) {
  /* Gestapelt füllt die Scheibe den Bildschirm unter der Navigation und
   * scrollt selbst; die Rechtslinks bleiben als schmale Leiste darunter. */
  .lk-divide .lkx-colcopy { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 20px; background: rgba(8, 10, 16, 0.72); }
  .lk-divide .lkx-gap-a { height: 20px; }
  .lk-divide .lkx-colviz { flex: none; min-height: 0; height: 48px; background: var(--d-panel); display: flex; align-items: center; }
  .lk-divide .lkx-legal { position: static; padding-inline: var(--d-pad-x); }
  .up { flex: none; min-height: auto; }
  .up { --up-spine: 62%; --up-knoten: 60px; overflow: visible; }
  .up-buehne { height: 210px; }
  .up[data-hat-dateien] .up-ablage { flex-direction: column; padding: 14px 16px; }
  .up-zahl { left: calc(var(--up-spine) + var(--up-knoten) / 2 + 12px); }
  .up-odo { font-size: clamp(34px, 9vw, 48px); }
  .up-prozent { font-size: 18px; }
  .up-glow { width: 200px; height: 200px; }
}

/* Reduzierte Bewegung: keine Zeitleiste, kein Atmen — Zahl und Balken. */
@media (prefers-reduced-motion: reduce) {
  .up-glow, .up-face svg, .up-zeile::after { animation: none; }
  .up-spine, .up-zeilen, .up-glow, .up-knoten { display: none; }
  .up-buehne { height: auto; overflow: visible; display: flex; flex-direction: column; gap: 8px; }
  .up-zahl { position: static; transform: none; }
  .up-balken { display: block; }
  .up-ziffer { transition: none; }
}

/* ── Hintergrund: Longplay-Wiese ───────────────────────────────────
 * Der Fernseher steht im Video bei ~66 % der Breite: rechts neben dem Panel.
 * Im Hochformat zeigt der Ausschnitt auf ihn statt auf die Bildmitte; der
 * Zoom der Startseite (TV-Kopf) entfällt hier. */
.lk-bg video.up-hg { object-position: 66% 50%; }

@media (max-width: 859px) {
  .lk-bg video.up-hg {
    object-position: 68% 50%;
    transform: none;
  }
}

/* ── Fragebogen: Hinweisblock und Dialog #ufDialog (Look aus .nk-*) ── */
.uf-block {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}
.uf-block[hidden] { display: none; }
.uf-titel strong { font-weight: inherit; color: #f2f2f2; }
.uf-stand, .uf-text { color: rgba(242, 242, 242, 0.62); }
.uf-text { font-size: 14px; }
.uf-warnung { color: #ffb4a8; font-size: 13px; }
.uf-warnung[hidden] { display: none; }
.uf-block .up-btn-ghost { justify-self: start; }
.up-sperre { color: rgba(242, 242, 242, 0.62); font-size: 13px; text-align: right; }
.up-sperre[hidden] { display: none; }
.uf .nk-punkte { flex-wrap: wrap; }
.uf .nk-punkte button {
  all: unset;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
}
.uf .nk-punkte button:disabled { cursor: default; }
.uf .nk-punkte button:focus-visible { outline: 2px solid #f2f2f2; outline-offset: 2px; }
.uf-meldung:not([hidden]) { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.uf-meldung p { width: 100%; }
.uf-meldung .nk-btn { padding: 12px 18px; font-size: 14px; }
.uf-meldung .nk-btn[hidden] { display: none; }

/* Telefon: Titel und Schließen oben, die sieben Punkte darunter in einer Zeile. */
@media (max-width: 860px) {
  .uf .nk-kopf { grid-template-columns: 1fr auto; row-gap: 14px; }
  .uf .nk-punkte { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; }
}