/* =========================================================================
   Kunden-Drive, Oberflaeche.

   CI nach .000_Allgemein/marke/README.md: Grund #14161b, Strich #f7f6f2,
   Akzent #4a63e8 (in der Marke nur das f). Keine Kundenfarbe, das hier ist
   unser eigener Dienst.

   Regeln aus dem Hausgebrauch, die hier besonders zaehlen:
   - Kein farbiger Balken an einer Kante, nirgends.
   - Jedes Fuellelement bekommt display:block, sonst ignoriert es seine
     Breite, und der Fortschrittsbalken bleibt leer, obwohl das Skript brav
     Prozente eintraegt.
   - Gleiche Bausteine haben gleiche Masse. Drei Knopfhoehen (48, 40, 34),
     drei Radien (8, 10, 16), eine Uebergangszeit. Die Knoepfe in Fenstern
     sind immer 48 hoch, auch wenn eine Beschriftung zweizeilig wird.
   ========================================================================= */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/dmsans-latin.woff2") format("woff2");
}

:root {
  --grund: #14161b;
  --grund-tief: #0f1115;
  --grund-2: #191c22;
  --grund-3: #20242c;
  --grund-4: #272c36;
  --linie: #2a2f39;
  --linie-2: #3a4150;
  --linie-3: #4a5364;
  --strich: #f7f6f2;
  --strich-2: #bfc3cc;
  --strich-3: #8f96a3;
  --akzent: #4a63e8;
  --akzent-tief: #3d55d8;
  --akzent-hell: #8193f2;
  --akzent-flaeche: rgba(74, 99, 232, .14);
  --gut: #3fa46a;
  --gut-hell: #93d6ad;
  --warn: #d9a441;
  --warn-hell: #f0c979;
  --boese: #d95c4a;
  --boese-hell: #f2b0a6;
  --r-klein: 8px;
  --r: 10px;
  --r-gross: 16px;
  --schatten-1: 0 1px 2px rgba(0, 0, 0, .35);
  --schatten-2: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 12px 28px -14px rgba(0, 0, 0, .55),
                0 2px 6px rgba(0, 0, 0, .25);
  --schatten-3: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 40px 90px -30px rgba(0, 0, 0, .75),
                0 16px 36px -18px rgba(0, 0, 0, .6);
  --uebergang: .18s cubic-bezier(.4, 0, .2, 1);
  --schrift: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-titel: "DM Sans", "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* Ein eigenes "display" schlaegt das hidden-Attribut. Die Ueberschrift
   "Wird uebertragen" stand sonst dauerhaft ueber einer leeren Liste, obwohl
   sie im HTML hidden war. Gemessen am 23.09.2026. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------ Scrollleisten */
/* Zwei Wege, nie am selben Element: Chrome und Edge ignorieren seit Version
   121 alle ::-webkit-scrollbar-Regeln, sobald scrollbar-width oder
   scrollbar-color gesetzt ist, und malen unter Windows dann ihre eigene
   Leiste mit Pfeilknoepfen. Die Standard-Eigenschaften bekommt deshalb nur
   Firefox, ueber diese Weiche. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--linie-2) transparent; }
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--linie-2); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--linie-3); background-clip: content-box; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: transparent; }

html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--strich);
  font: 15px/1.6 var(--schrift);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

a { color: var(--akzent-hell); text-underline-offset: 3px; }
a:hover { color: #a5b2f6; }
a:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; border-radius: 4px; }

h1, h2 { font-family: var(--schrift-titel); text-wrap: balance; }
p { text-wrap: pretty; }

/* -------------------------------------------------------------- Knoepfe --- */
/* Drei Hoehen: 48 (Anmelden), 40 (Normalfall), 34 (Kopfzeile). Die Hoehe
   haengt nie an der Beschriftung. */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px;
  border: 1px solid var(--linie-2); border-radius: var(--r);
  background: var(--grund-3); color: var(--strich);
  font: inherit; font-size: 14px; font-weight: 550; line-height: 1.25;
  cursor: pointer; white-space: nowrap; text-align: center;
  box-shadow: var(--schatten-1);
  transition: background var(--uebergang), border-color var(--uebergang),
              color var(--uebergang), transform var(--uebergang);
}
.knopf svg { width: 17px; height: 17px; flex: none; }
.knopf:hover { background: var(--grund-4); border-color: var(--linie-3); }
.knopf:active { transform: translateY(1px); }
.knopf--haupt {
  background: linear-gradient(180deg, #5670ee, var(--akzent));
  border-color: var(--akzent); color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 8px 20px -10px rgba(74, 99, 232, .8);
}
.knopf--haupt:hover { background: linear-gradient(180deg, #4d67ea, var(--akzent-tief)); border-color: var(--akzent-tief); }
.knopf--warn { background: var(--boese); border-color: var(--boese); color: #fff; }
.knopf--warn:hover { background: #c64a39; border-color: #c64a39; }
.knopf--warn-leise { color: var(--boese-hell); }
.knopf--warn-leise:hover { color: #fff; background: #3a2220; border-color: #6a3630; }
.knopf--leise { background: transparent; box-shadow: none; }
.knopf--gross { min-height: 48px; font-size: 15px; border-radius: var(--r); }
.knopf--klein { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.knopf--klein svg { width: 16px; height: 16px; }
.knopf:disabled { opacity: .5; cursor: default; transform: none; }
.knopf:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.knopf.laedt { cursor: progress; }

/* Symbolknoepfe in den Zeilen: eine Groesse, ein Radius. */
.symbolknopf {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-klein);
  background: transparent; color: var(--strich-2);
  cursor: pointer; padding: 0;
  transition: background var(--uebergang), color var(--uebergang), border-color var(--uebergang);
}
.symbolknopf svg { width: 18px; height: 18px; }
.symbolknopf:hover { background: var(--grund-4); border-color: var(--linie-2); color: var(--strich); }
.symbolknopf--gefahr:hover { background: #3a2220; border-color: #6a3630; color: var(--boese-hell); }
.symbolknopf:focus-visible {
  outline: 2px solid var(--akzent-hell); outline-offset: 1px;
  background: var(--grund-4); color: var(--strich);
}

/* ------------------------------------------------------------ Hinweisblase */
.blase {
  position: fixed; z-index: 400; pointer-events: none;
  max-width: 260px; padding: 6px 10px;
  border: 1px solid var(--linie-2); border-radius: var(--r-klein);
  background: #0b0d10; color: var(--strich);
  font-size: 12.5px; line-height: 1.35; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------ Melder */
.melder {
  display: none; align-items: flex-start; gap: 11px;
  padding: 12px 15px; margin-bottom: 20px;
  border: 1px solid var(--linie-2); border-radius: var(--r);
  background: var(--grund-2); font-size: 14px; line-height: 1.5;
}
.melder.da { display: flex; }
.melder.boese { border-color: #5a2f2c; background: #231918; color: var(--boese-hell); }
.melder.gut { border-color: #2c4a38; background: #172119; color: var(--gut-hell); }
.melder.info { border-color: #34407a; background: #181d31; color: #c6cefa; }
.melder svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }

/* ============================================================== Anmeldung */
.seite-anmelden {
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(74, 99, 232, .20), transparent 62%),
    radial-gradient(900px 560px at 108% 112%, rgba(74, 99, 232, .10), transparent 60%),
    linear-gradient(180deg, var(--grund) 0%, var(--grund-tief) 100%);
  background-attachment: fixed;
}
/* Ein feines Raster, wie auf Millimeterpapier, nur zu ahnen. Es gibt der
   dunklen Flaeche Tiefe, ohne ein Muster zu sein, das man ansieht. */
.seite-anmelden::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 20%, transparent 75%);
}

.anmelde-flaeche {
  position: relative; z-index: 1;
  width: min(100% - 48px, 1080px); margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  grid-template-areas:
    "einfuehrung karte"
    "vorteile    karte"
    "fuss        fuss";
  grid-template-rows: auto auto auto;
  column-gap: clamp(40px, 7vw, 96px);
  align-content: center;
  padding: 56px 0 28px;
}
.anmelde-einfuehrung { grid-area: einfuehrung; align-self: start; }
/* Beide Spalten schliessen oben und unten buendig ab: Die Karte bestimmt die
   Hoehe, links steht die Einfuehrung oben und die Liste der Vorzuege unten. */
.anmelde-karte { grid-area: karte; align-self: stretch; }
.vorteile { grid-area: vorteile; align-self: end; }
.anmelde-fuss { grid-area: fuss; }

.anmelde-marke { display: block; width: 92px; height: auto; margin: 0 0 30px -8px; }
.ueberzeile {
  margin: 0 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--akzent-hell);
}
.anmelde-einfuehrung h1 {
  margin: 0 0 16px; font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.04;
  font-weight: 650; letter-spacing: -.03em;
}
.anmelde-lead { margin: 0; max-width: 40ch; font-size: 17px; line-height: 1.6; color: var(--strich-2); }

.vorteile {
  list-style: none; margin: 36px 0 0; padding: 24px 0 0;
  border-top: 1px solid var(--linie);
  display: grid; gap: 20px; max-width: 460px;
}
.vorteile li {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px;
  align-items: start;
}
.vorteile svg {
  grid-row: span 2; width: 38px; height: 38px; padding: 9px;
  border: 1px solid var(--linie-2); border-radius: var(--r);
  background: var(--grund-2); color: var(--akzent-hell);
}
.vorteile b { font-weight: 600; font-size: 15px; line-height: 1.35; padding-top: 1px; }
.vorteile span { color: var(--strich-3); font-size: 14px; line-height: 1.5; }

.anmelde-karte {
  position: relative;
  padding: 34px 32px 28px;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--r-gross);
  background: linear-gradient(180deg, #1c1f27 0%, #171a20 100%);
  box-shadow: var(--schatten-3);
}
.anmelde-karte h2 { margin: 0 0 6px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.karte-unter { margin: 0 0 24px; font-size: 14.5px; color: var(--strich-2); line-height: 1.55; }

.feld { margin-bottom: 16px; }
.feld label { display: block; font-size: 13.5px; font-weight: 550; color: var(--strich-2); margin-bottom: 7px; }
.feld input {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--linie-2); border-radius: var(--r);
  background: var(--grund-tief); color: var(--strich);
  font: inherit; font-size: 16px;
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.feld input::placeholder { color: #6f7684; }
.feld input:hover { border-color: var(--linie-3); }
/* Rahmen UND Ring: Bei einem Feld, das ohnehin einen Rahmen hat, sieht man
   den Wechsel der Farbe allein kaum. */
.feld input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(74, 99, 232, .35); }
/* Die gelbe oder blaue Flaeche der Browser-Autofuellung passt nie zur CI. */
.feld input:-webkit-autofill,
.feld input:-webkit-autofill:hover,
.feld input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--strich);
  -webkit-box-shadow: 0 0 0 100px var(--grund-tief) inset;
  caret-color: var(--strich);
  transition: background-color 9999s ease-in-out 0s;
}
.feld-mit-knopf { position: relative; }
.feld-mit-knopf input { padding-right: 52px; }
.feld-knopf {
  position: absolute; top: 7px; right: 7px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-klein); background: transparent;
  color: var(--strich-3); cursor: pointer; padding: 0;
  transition: background var(--uebergang), color var(--uebergang);
}
.feld-knopf:hover { background: var(--grund-3); color: var(--strich); }
.feld-knopf:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 0; color: var(--strich); }
.feld-knopf svg { width: 19px; height: 19px; }
.feld-knopf .auge-zu { display: none; }
.feld-knopf[aria-pressed="true"] .auge-auf { display: none; }
.feld-knopf[aria-pressed="true"] .auge-zu { display: block; }
/* Die Zeile fuer den Hinweis auf die Feststelltaste hat immer ihren Platz,
   damit der Knopf darunter nicht springt, wenn sie erscheint. */
.feld-hinweis { margin: 5px 0 0; min-height: 18px; font-size: 13px; line-height: 18px; color: var(--warn-hell); }

.anmelde-karte .knopf--gross { width: 100%; margin-top: 6px; }

.hilfe {
  margin-top: 24px; padding: 18px 18px 16px;
  border: 1px solid var(--linie); border-radius: var(--r);
  background: rgba(0, 0, 0, .18);
}
.hilfe b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.hilfe p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--strich-3); }
.hilfe-wege { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.hilfe-wege a {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  min-height: 40px; padding: 0 12px;
  border: 1px solid var(--linie-2); border-radius: var(--r-klein);
  background: var(--grund-2); color: var(--strich);
  font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: background var(--uebergang), border-color var(--uebergang);
}
.hilfe-wege a:hover { background: var(--grund-3); border-color: var(--linie-3); color: var(--strich); }
.hilfe-wege a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hilfe-wege svg { width: 16px; height: 16px; flex: none; color: var(--akzent-hell); }

.anmelde-fuss {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--linie);
  font-size: 12.5px; color: var(--strich-3); text-align: center;
}

@media (max-width: 900px) {
  .anmelde-flaeche {
    width: min(100% - 32px, 520px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "einfuehrung" "karte" "vorteile" "fuss";
    grid-template-rows: auto;
    padding: 28px 0 22px;
    align-content: start;
  }
  .anmelde-einfuehrung { padding-top: 0; margin-bottom: 26px; }
  .anmelde-marke { width: 76px; margin: 0 0 20px; }
  .anmelde-lead { font-size: 15.5px; }
  .vorteile { margin-top: 32px; }
  .anmelde-fuss { margin-top: 32px; }
  /* Zwei feste Zeilen statt eines Umbruchs, der den Trennpunkt allein ans
     Zeilenende stellt (gesehen bei 390 px). */
  .anmelde-fuss .fuss-trenner { display: none; }
  .anmelde-fuss .fuss-teil { display: block; }
}
@media (max-width: 420px) {
  .anmelde-karte { padding: 26px 20px 22px; }
}

/* ============================================================ Drive-Seite */
.seite-drive {
  background: linear-gradient(180deg, #161920 0, var(--grund) 420px);
  display: flex; flex-direction: column;
}

.kopf {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--linie);
  background: rgba(20, 22, 27, .86);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
          backdrop-filter: saturate(1.2) blur(12px);
}
.kopf-innen {
  width: min(100% - 48px, 960px); margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  min-height: 64px;
}
.marke { display: flex; align-items: center; gap: 14px; min-width: 0; }
.marke img { display: block; width: 62px; height: auto; margin-left: -4px; }
.marke-trenner { width: 1px; height: 22px; background: var(--linie-2); }
.marke b { font-family: var(--schrift-titel); font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.wer { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.wer-name {
  color: var(--strich-2); font-size: 13.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Verwaltungsansicht: ein Band ueber die ganze Breite, damit Robin nie
   vergisst, dass er gerade im Ordner eines Kunden arbeitet. Flaeche und
   Rahmen rundum, kein Balken an einer Kante. */
.verwaltungsband {
  width: min(100% - 48px, 960px); margin: 18px auto 0;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: 1px solid #3c4a9a; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(74, 99, 232, .22), rgba(74, 99, 232, .14));
  color: #dfe4ff; font-size: 14px; line-height: 1.45;
}
.verwaltungsband svg { width: 20px; height: 20px; flex: none; color: #b7c2fa; }
.verwaltungsband b { font-weight: 650; }

.bahn { width: min(100% - 48px, 960px); margin: 0 auto; padding: 38px 0 56px; flex: 1; }

.titel { font-size: clamp(1.7rem, 3.2vw, 2.1rem); font-weight: 650; letter-spacing: -.025em; margin: 0 0 8px; line-height: 1.15; }
.unter { color: var(--strich-2); margin: 0 0 26px; font-size: 15px; max-width: 68ch; }

/* ---------------------------------------------------------- Ablagefeld --- */
.ablage {
  position: relative;
  border: 1.5px dashed var(--linie-2); border-radius: var(--r-gross);
  background:
    radial-gradient(600px 180px at 50% 0%, rgba(74, 99, 232, .08), transparent 70%),
    var(--grund-2);
  padding: 40px 28px 36px; text-align: center;
  transition: border-color var(--uebergang), background-color var(--uebergang);
}
.ablage.drauf { border-color: var(--akzent); background-color: #1b2030; }
.ablage > svg {
  width: 48px; height: 48px; padding: 11px; margin-bottom: 14px;
  border-radius: var(--r); background: var(--akzent-flaeche); color: var(--akzent-hell);
}
.ablage-titel { margin: 0 0 4px; font-family: var(--schrift-titel); font-size: 18px; font-weight: 600; }
.ablage .klein { color: var(--strich-3); font-size: 13.5px; margin: 0 0 20px; }
/* Die native Dateiauswahl bleibt unsichtbar, bedient wird der eigene Knopf.
   tabindex="-1" im HTML haelt sie aus der Tastaturreihenfolge. */
.ablage input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* -------------------------------------------------------- Uebertragung --- */
/* Steht immer da. In Ruhe sagt er "Bereit", waehrend der Uebertragung
   traegt er den Gesamtstand. Der Satz unten hat Platz fuer zwei Zeilen, damit
   der Kasten nicht springt, wenn ein laengerer Satz kommt. */
.uebertragung {
  margin-top: 18px; padding: 20px 22px 18px;
  border: 1px solid var(--linie); border-radius: var(--r-gross);
  background: linear-gradient(180deg, #1a1d24, #171a20);
  box-shadow: var(--schatten-2);
}
.gesamt-kopf { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; min-width: 0; }
.gesamt-kopf h2 {
  margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gesamt-prozent {
  margin-left: auto; flex: none; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--strich);
}
.gesamt-zahlen {
  margin: 10px 0 0; font-size: 13.5px; color: var(--strich-2);
  font-variant-numeric: tabular-nums; min-height: 21px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Zwei Teile: Menge und Tempo, dann die Restzeit. Am Rechner in einer Zeile,
   auf dem Telefon in zwei festen (siehe unten). */
.gz-b:not(:empty)::before { content: " \00b7  "; white-space: pre; }
.gesamt-satz {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--linie);
  font-size: 14px; line-height: 1.5; color: var(--strich-2);
  min-height: calc(2 * 1.5em + 13px);
}
.gesamt-satz svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--akzent-hell); }
.uebertragung[data-zustand="netz"] .gesamt-satz { color: var(--warn-hell); }
.uebertragung[data-zustand="netz"] .gesamt-satz svg { color: var(--warn); }
.uebertragung[data-zustand="fertig"] .gesamt-satz { color: var(--gut-hell); }
.uebertragung[data-zustand="fertig"] .gesamt-satz svg { color: var(--gut); }
.uebertragung[data-zustand="fehler"] .gesamt-satz { color: var(--boese-hell); }
.uebertragung[data-zustand="fehler"] .gesamt-satz svg { color: var(--boese); }
.uebertragung[data-zustand="bereit"] .gesamt-prozent { color: var(--strich-3); }
.uebertragung[data-zustand="fertig"] .spur .fuellung { background: var(--gut); }

/* Die Laufliste steht immer da und ist immer gleich hoch: drei Zeilen, bei
   mehr Dateien scrollt sie innen. Vorher wuchs der Kasten mit jeder Datei
   und schrumpfte mit jeder fertigen, und alles darunter sprang (B 24). */
.liste--lauf { margin-top: 16px; --lauf-zeile: 98px; height: calc(3 * var(--lauf-zeile) + 2px); }

/* ------------------------------------------------------------------ Spur -- */
/* display:block ist Pflicht, sonst ignoriert die Fuellung ihre Breite und
   die Spur bleibt leer, obwohl der Wert gesetzt ist. */
.spur {
  position: relative; display: block; height: 6px;
  background: var(--grund-4); border-radius: 99px; overflow: hidden;
}
.spur--gesamt { height: 10px; }
.fuellung {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--akzent), #6a80f0);
  border-radius: 99px;
  /* Kein Uebergang auf der Breite: Er friert im versteckten Tab ein, und wer
     zurueckkommt, saehe einen Balken auf null (gemessen am 23.09.2026). */
}
/* Nichts messbar: ein gleitendes Stueck statt einer erfundenen Zahl. */
.spur.unbestimmt .fuellung { width: 100% !important; background: transparent; }
.spur.unbestimmt::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  border-radius: 99px; background: linear-gradient(90deg, transparent, var(--akzent-hell), transparent);
  animation: gleiten 1.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes gleiten {
  from { transform: translateX(-110%); }
  to { transform: translateX(310%); }
}
/* Leitung weg: Der Balken bleibt, wo er war, traegt die Warnfarbe und
   atmet. Es ist kein Fehler, es dauert nur. */
.spur.wartet .fuellung, .zeile.wartet .fuellung {
  background: var(--warn); animation: atmen 1.6s ease-in-out infinite;
}
@keyframes atmen { 50% { opacity: .45; } }
.zeile.fertig .fuellung { background: var(--gut); }
.zeile.fehler .fuellung { background: var(--boese); }

/* ---------------------------------------------------------------- Liste -- */
/* Eine feste Zeilenhoehe: Mit der Zahl daneben war die Zeile sonst einen
   Pixel hoeher als ohne, und die Liste darunter rutschte, sobald die erste
   Datei ankam (B 24). */
.abschnitt-titel {
  display: flex; align-items: center; gap: 10px;
  margin: 34px 0 12px; font-size: 12.5px; font-weight: 650; line-height: 20px;
  min-height: 20px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--strich-3);
}
.abschnitt-titel::after { content: ""; flex: 1; height: 1px; background: var(--linie); order: 1; }
/* Ohne Dateien steht keine Zahl da. Dann faellt auch ihr Abstand weg, sonst
   endet die Linie zehn Pixel vor der Liste. */
.abschnitt-zahl:empty { display: none; }
/* Die Zahl bricht nie um: "78" und "MB" standen bei 320 px sonst auf zwei
   Zeilen. */
.abschnitt-zahl {
  order: 2; flex: none; white-space: nowrap; line-height: 20px;
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px;
}
/* Auf schmalen Telefonen passt die Zahl nicht neben die Ueberschrift. Dann
   steht sie darunter, und die zweite Zeile ist immer reserviert, auch ohne
   Zahl: Vorher brach die Ueberschrift mit der ersten Datei um, und die Liste
   rutschte um 20 px. */
@media (max-width: 400px) {
  .abschnitt-titel:has(.abschnitt-zahl) {
    flex-wrap: wrap; align-content: flex-start; min-height: 40px; row-gap: 0;
  }
  .abschnitt-titel > span:first-child { white-space: nowrap; }
}
.abschnitt-hinweis {
  margin: -4px 0 12px; font-size: 13.5px; color: var(--strich-2);
  max-width: 68ch; line-height: 1.5;
}

/* Die Liste waechst nicht endlos mit ihrer Zeilenzahl, sie scrollt innen.
   Die Hoehe laesst viereinhalb Zeilen sehen: Die angeschnittene fuenfte
   zeigt, dass es weitergeht. */
.liste {
  border: 1px solid var(--linie); border-radius: var(--r-gross);
  background: var(--grund-2); overflow-y: auto; overflow-x: hidden;
  max-height: 318px;
  box-shadow: var(--schatten-2);
}
.liste--lauf { max-height: none; background: rgba(0, 0, 0, .14); box-shadow: none; }
.liste--lauf .zeile--lauf { height: var(--lauf-zeile); min-height: 0; }
.leer--lauf { min-height: 100%; font-size: 13.5px; max-width: 46ch; margin: 0 auto; }
/* Die Prozentzahl neben dem Balken gibt es nur auf dem Telefon. */
.lauf-prozent { display: none; }

.zeile {
  display: grid;
  /* Feste Spuren: Der Name darf schrumpfen, Groesse und Aktionen nie. Die
     Aktionsspur ist immer vier Knoepfe breit, auch wenn eine Zeile weniger
     hat, damit die Groessenspalte in allen Listen auf derselben Linie steht. */
  grid-template-columns: 38px minmax(0, 1fr) 84px 148px;
  align-items: center; column-gap: 14px;
  min-height: 68px; padding: 11px 12px 11px 16px;
  border-top: 1px solid var(--linie);
  transition: background var(--uebergang);
}
/* Die erste Zeile behaelt ihre Trennlinie als durchsichtige Kante, sonst
   waere sie einen Pixel niedriger als alle anderen (gemessen 23.09.2026). */
.zeile:first-child { border-top-color: transparent; }
.liste--fertig .zeile:hover { background: rgba(255, 255, 255, .018); }
.zeile .sinn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r); background: var(--grund-3); color: var(--strich-2);
  border: 1px solid var(--linie);
}
.zeile .sinn svg { width: 19px; height: 19px; }
.zeile .name { min-width: 0; display: block; }
.zeile .name b {
  display: block; font-weight: 550; font-size: 14.5px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Lange Namen kuerzt die Seite in der Mitte: Der Anfang bekommt die
   Auslassung, das Ende (drive.js nameTeilen) steht immer ganz da. Passt der
   Name, stehen beide Stuecke lueckenlos hintereinander. "pre", damit ein
   Leerzeichen an der Nahtstelle nicht verschluckt wird. */
.zeile .name b.geteilt, .fertig-name.geteilt { display: flex; }
.zeile .name b.geteilt .n-anfang, .fertig-name.geteilt .n-anfang {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: pre;
}
.zeile .name b.geteilt .n-ende, .fertig-name.geteilt .n-ende { flex: none; white-space: pre; }
.zeile .unterzeile, .zeile .stand {
  display: block; font-size: 12.5px; line-height: 1.5; color: var(--strich-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.zeile--lauf .spur { margin: 6px 0 5px; }
/* Auch am Rechner zwei feste Zeilen: oben Prozent, Menge und Tempo, darunter
   die Restzeit. In einer Zeile war die Restzeit zwischen 724 und 924 px
   abgeschnitten (Pruefbefund vom 25.09.2026), und gerade sie will der Kunde
   sehen. */
.zeile--lauf .stand {
  white-space: normal; height: 3em; text-overflow: clip;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.zeile--lauf .z-teil { white-space: nowrap; }
.zeile .z-teil + .z-teil::before { content: " \00b7  "; white-space: pre; }
/* Steht nach der Trennregel, sonst gewinnt die (gleiche Spezifitaet). */
.zeile--lauf .z-teil + .z-rest::before { content: "\A"; white-space: pre; }
.zeile .mass {
  text-align: right; font-size: 13px; color: var(--strich-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.zeile .tat { display: flex; justify-content: flex-end; min-width: 0; }
.tat-voll { display: flex; gap: 3px; justify-content: flex-end; }
.datum-kurz { display: none; }
.tat-mehr { display: none; }

.zeile.in-schlange .name b { color: var(--strich-2); }
.zeile.fertig .stand { color: var(--gut-hell); }
.zeile.fehler .stand { color: var(--boese-hell); }
.zeile.wartet .stand { color: var(--warn-hell); }

/* Angefangen, aber nicht angekommen. Die Zeile bleibt in Mass und Aufbau
   wie ihre Nachbarn, nur ruhiger. Kein Balken an der Kante. */
.zeile.angefangen { background: rgba(217, 164, 65, .045); }
.zeile.angefangen .sinn { color: var(--warn); }
.zeile.angefangen .name b { color: var(--strich-2); }
.zeile.angefangen .unterzeile { color: var(--warn-hell); }

/* --------------------------------------------------------- Leerer Zustand */
/* Das Geruest steht auch ohne eine einzige Datei. */
.leer {
  display: grid; place-items: center; min-height: 136px; padding: 24px 20px;
  text-align: center; color: var(--strich-3); font-size: 14px;
}

/* ------------------------------------------------------------ Seitenfuss */
.seitenfuss {
  width: min(100% - 48px, 960px); margin: 0 auto;
  padding: 20px 0 30px; border-top: 1px solid var(--linie);
  font-size: 12.5px; color: var(--strich-3); text-align: center; line-height: 1.7;
}
.seitenfuss { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 18px; }
.seitenfuss a { color: var(--strich-2); white-space: nowrap; }

/* ================================================================ Fenster */
/* Eigene Fenster statt confirm() und prompt(). */
.fenster-huelle {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(6, 7, 10, .72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: einblenden .16s ease-out;
}
@keyframes einblenden { from { opacity: 0; } }
.fenster {
  width: min(100%, 460px);
  max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 26px 26px 22px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r-gross);
  background: linear-gradient(180deg, #1d2028, #181b21);
  box-shadow: var(--schatten-3);
  animation: auftauchen .2s cubic-bezier(.2, .8, .2, 1);
}
@keyframes auftauchen { from { transform: translateY(8px) scale(.985); opacity: 0; } }
.fenster h2 { margin: 0 0 8px; font-size: 19px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
.fenster-text, .fenster p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; color: var(--strich-2);
  /* Ein langer Dateiname im Satz lief bei 320 px rechts aus dem Fenster und
     wurde abgeschnitten. Er darf umbrechen, wo es sein muss. */
  overflow-wrap: anywhere; }
/* Zwei Knoepfe, die zusammengehoeren: nebeneinander, je die halbe Breite,
   gleiche Hoehe, auch wenn eine Beschriftung umbricht. */
.fenster-knoepfe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.fenster-knoepfe:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
/* 48 hoch, die grosse Stufe. Bricht eine Beschriftung auf dem Telefon um,
   passen zwei Zeilen hinein, ohne dass der Knopf waechst: Vorher waren es
   44 und bei Umbruch mehr, also eine vierte und fuenfte Hoehe (B 3a). */
.fenster-knoepfe .knopf {
  width: 100%; min-height: 48px; white-space: normal; padding: 5px 14px;
  line-height: 1.2; text-wrap: balance;
}
.fenster-knoepfe.untereinander { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.fenster-knoepfe.untereinander .knopf { justify-content: flex-start; text-align: left; min-height: 48px; padding: 0 16px; font-size: 15px; }
/* Eine Wahl aus drei Wegen: untereinander, aber mittig beschriftet. */
.fenster--wahl .fenster-knoepfe.untereinander .knopf { justify-content: center; text-align: center; }
/* Im Aktionsfenster steht der volle Name, ohne Auslassung: Hier sieht der
   Kunde auf dem Telefon, welche Datei er gerade anfasst. */
.fenster--menue h2 { margin-bottom: 16px; overflow-wrap: anywhere; }

.fenster-feld { margin: 0 0 20px; }
.fenster-label { display: block; font-size: 13.5px; font-weight: 550; color: var(--strich-2); margin-bottom: 7px; }
.name-eingabe {
  display: flex; align-items: stretch;
  border: 1px solid var(--linie-2); border-radius: var(--r);
  background: var(--grund-tief);
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.name-eingabe:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(74, 99, 232, .35); }
.name-eingabe input {
  flex: 1; min-width: 0; height: 46px; padding: 0 13px;
  border: 0; background: transparent; color: var(--strich);
  font: inherit; font-size: 16px; outline: none;
}
.name-endung {
  display: grid; place-items: center; flex: none;
  padding: 0 13px; border-left: 1px solid var(--linie-2);
  color: var(--strich-3); font-size: 14.5px; font-variant-numeric: tabular-nums;
  border-radius: 0 var(--r) var(--r) 0; background: var(--grund-2);
}
.fenster-fehler { margin: 8px 0 0 !important; min-height: 21px; font-size: 13.5px !important; color: var(--boese-hell) !important; }

/* Alles angekommen */
.fenster--fertig { width: min(100%, 520px); }
.fertig-liste {
  margin: 0 0 20px; max-height: 232px; overflow-y: auto;
  border: 1px solid var(--linie); border-radius: var(--r);
  background: rgba(0, 0, 0, .16);
}
.fertig-eintrag {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 76px; align-items: center; column-gap: 10px;
  min-height: 46px; padding: 8px 14px; border-top: 1px solid var(--linie);
  font-size: 14px;
}
.fertig-eintrag:first-child { border-top-color: transparent; }
.haken {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 99px; background: rgba(63, 164, 106, .16); color: var(--gut-hell);
}
.haken svg { width: 15px; height: 15px; }
.fertig-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dateien, die noch fehlen: dasselbe Fenster, die Uhr statt des Hakens. */
.fertig-liste--offen .haken { background: rgba(217, 164, 65, .14); color: var(--warn-hell); }
.fertig-mass { text-align: right; color: var(--strich-3); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Warnung vor der Abmeldung */
.countdown-feld { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 20px; }
.countdown-feld p { margin: 0; }
.countdown {
  display: grid; place-items: center; width: 86px; height: 86px;
  border-radius: 99px; border: 2px solid var(--warn);
  background: rgba(217, 164, 65, .1); color: var(--warn-hell);
  font-family: var(--schrift-titel); font-size: 24px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ================================================================ Schmal */
@media (max-width: 720px) {
  .kopf-innen, .bahn, .seitenfuss, .verwaltungsband { width: calc(100% - 32px); }
  .kopf-innen { min-height: 58px; gap: 12px; }
  .marke img { width: 54px; }
  /* Auf dem Telefon weicht das Wort "Dateiuebergabe", nicht der Name des
     Betriebs: Der Kunde soll sehen, in wessen Ordner er laedt. Der Knopf
     "Abmelden" bleibt immer sichtbar. */
  .marke-trenner, .marke b { display: none; }
  .wer { gap: 10px; }
  .bahn { padding-top: 24px; }
  .ablage { padding: 28px 18px 26px; }
  .uebertragung { padding: 16px 16px 14px; }
  .zeile {
    grid-template-columns: 32px minmax(0, 1fr) 58px 36px;
    column-gap: 10px; padding: 10px 8px 10px 12px; min-height: 64px;
  }
  .zeile .sinn { width: 32px; height: 32px; }
  .zeile .sinn svg { width: 16px; height: 16px; }
  .zeile .mass { font-size: 12.5px; }
  /* Auf dem Telefon darf der Name zweizeilig stehen, statt abgeschnitten zu
     werden. Die Zeile ist dafuer immer gleich hoch, egal ob der Name eine
     oder zwei Zeilen braucht. */
  .liste--fertig .zeile, #offen .zeile { min-height: 82px; }
  .liste--fertig .zeile .name b, #offen .zeile .name b {
    white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-height: 1.35;
  }
  /* Ein geteilter Name steht auf dem Telefon in zwei festen Zeilen: oben der
     Anfang mit Auslassung, darunter das Ende. So bleibt sichtbar, worin sich
     zwei Fassungen unterscheiden, und nichts bricht mitten im Wort um. */
  .liste--fertig .zeile .name b.geteilt, #offen .zeile .name b.geteilt { display: block; }
  .zeile .name b.geteilt .n-anfang, .zeile .name b.geteilt .n-ende {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: pre;
  }
  .datum-lang { display: none; }
  .datum-kurz { display: inline; }
  .seitenfuss { flex-direction: column; }
  .wer-name {
    white-space: normal; font-size: 12.5px; line-height: 1.3; text-align: right;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
  .tat-voll { display: none; }
  .tat-mehr { display: flex; }

  /* Der Gesamtkasten auf dem Telefon: Nichts wird abgeschnitten, und die
     Hoehe haengt nicht an der Laenge der Saetze (Pruefbefund vom 24.09.2026,
     bei 320 px stand dort "Datei 2 von 3 wird ..." und die Restzeit fehlte).
     Der Titel hat zwei feste Zeilen, die Zahlen auch: oben Menge und Tempo,
     darunter die Restzeit. */
  .gesamt-kopf { align-items: flex-end; }
  .gesamt-kopf h2 {
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.3; min-height: 2.6em;
    display: flex; align-items: flex-end;
  }
  .gesamt-zahlen { white-space: normal; overflow: visible; min-height: 3em; line-height: 1.5; }
  .gz-a, .gz-b { display: block; }
  .gz-b:not(:empty)::before { content: none; }
  /* Der Satz darunter hat drei feste Zeilen, bei 380 px und weniger vier. */
  .gesamt-satz { min-height: calc(3 * 1.5em + 13px); }

  /* Eine Zeile der Laufliste auf dem Telefon: oben Symbol, Name (zwei
     Zeilen) und Knopf, darunter der Balken ueber die ganze Breite mit der
     Prozentzahl daneben, darunter Menge und Tempo, dann die Restzeit. Vorher
     standen alle Angaben in der schmalen Namensspalte, und Menge und Tempo
     waren ausgeblendet. */
  .liste--lauf { --lauf-zeile: 124px; height: calc(2 * var(--lauf-zeile) + 2px); }
  .liste--lauf .zeile--lauf {
    grid-template-columns: 32px minmax(0, 1fr) 26px 36px;
    grid-template-rows: 40px 18px 38px;
    grid-template-areas:
      "sinn  name  name  tat"
      "spur  spur  pz    pz"
      "stand stand stand stand";
    row-gap: 4px; align-content: center;
  }
  .zeile--lauf .sinn { grid-area: sinn; }
  .zeile--lauf .tat { grid-area: tat; }
  .zeile--lauf .mass { display: none; }
  .zeile--lauf .name { display: contents; }
  .zeile--lauf .name b {
    grid-area: name; align-self: center;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .zeile--lauf .name b.geteilt { display: block; }
  .zeile--lauf .name b.geteilt .n-anfang, .zeile--lauf .name b.geteilt .n-ende {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: pre;
  }
  .zeile--lauf .spur { grid-area: spur; align-self: center; margin: 0; }
  .zeile--lauf .lauf-prozent {
    grid-area: pz; display: block; align-self: center; text-align: right;
    font-size: 12.5px; line-height: 18px; color: var(--strich-2);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .zeile--lauf .stand {
    grid-area: stand; align-self: start;
    white-space: normal; line-height: 1.5; height: 3em; text-overflow: clip;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .zeile--lauf .z-prozent { display: none; }
  .zeile--lauf .z-teil + .z-menge::before { content: none; }
  .zeile--lauf .z-teil + .z-rest::before { content: "\A"; white-space: pre; }
  .zeile--lauf .z-teil { white-space: nowrap; }

  /* Das Abschlussfenster: Namen wie in der Liste in zwei Zeilen, die
     Groessenspalte so breit wie dort. Alle Eintraege gleich hoch. */
  .fertig-eintrag { grid-template-columns: 26px minmax(0, 1fr) 58px; height: 58px; min-height: 0; }
  .fertig-name {
    white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
  .fertig-name.geteilt { display: block; }
  .fertig-name.geteilt .n-anfang, .fertig-name.geteilt .n-ende {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: pre;
  }
  .fertig-mass { font-size: 12.5px; }
}
@media (max-width: 380px) {
  .wer .knopf svg { display: none; }
  .gesamt-kopf { gap: 10px; }
  .gesamt-satz { min-height: calc(4 * 1.5em + 13px); }
  /* Weniger Rand um und im Fenster, damit zwei Knoepfe nebeneinander bei
     320 px hoechstens zweizeilig werden und in ihre 48 px passen. */
  .fenster-huelle { padding: 12px; }
  .fenster { padding: 22px 16px 16px; max-height: calc(100vh - 24px); }
  .fenster-knoepfe { gap: 8px; }
  .fenster-knoepfe .knopf { padding: 5px 8px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* Die unbestimmte Spur steht dann als ruhiges Muster, nicht als Leere. */
  .spur.unbestimmt::after {
    animation: none; width: 100%; transform: none;
    background: repeating-linear-gradient(90deg, rgba(129, 147, 242, .5) 0 10px, transparent 10px 20px);
  }
  .spur.wartet .fuellung, .zeile.wartet .fuellung { animation: none; opacity: .7; }
}

/* ============================================================ Hinweisseite */
/* Fuer alles, was im Browser als Seite aufgeht und kein Drive ist: ein
   abgelaufener Download-Link aus dem CRM, eine Datei, die es nicht mehr gibt. */
.hinweis-flaeche {
  position: relative; z-index: 1;
  width: min(100% - 32px, 460px); margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; padding: 40px 0;
}
.hinweis-karte h1 { margin: 0 0 10px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.hinweis-karte .knopf { width: 100%; text-decoration: none; }
.hinweis-kontakt { margin: 20px 0 0; font-size: 13.5px; color: var(--strich-3); text-align: center; }