/* ===================================================================
   Dateiablage mit Freigabe-Ablauf.
   =================================================================== */

.ablage {
  display: grid; place-items: center; gap: 6px;
  padding: 34px 20px; margin-bottom: 16px;
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  cursor: pointer; text-align: center;
  transition: border-color var(--tempo), background var(--tempo);
}
.ablage:hover, .ablage:focus-visible {
  border-color: rgba(63, 189, 245, .5);
  background: rgba(63, 189, 245, .05);
  outline: none;
}
/* Während eine Datei darüber schwebt, deutlich sichtbar -- sonst weiß
   niemand, ob das Loslassen an dieser Stelle etwas bewirkt. */
.ablage[data-bereit="ja"] {
  border-color: var(--akzent);
  border-style: solid;
  background: rgba(63, 189, 245, .10);
}
.ablage__zeichen {
  width: 30px; height: 30px;
  fill: none; stroke: var(--text-still);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ablage:hover .ablage__zeichen, .ablage[data-bereit="ja"] .ablage__zeichen { stroke: var(--akzent); }
.ablage__text { margin: 0; font-size: .92rem; color: var(--text-leise); }
.ablage__text strong { color: var(--akzent); }
.ablage__klein { margin: 0; font-size: .78rem; color: var(--text-still); }

.hochlade-zeile { margin-bottom: 18px; }
.hochlade-zeile select {
  min-width: 240px; padding: 9px 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}

.fortschritt {
  margin: 0 0 14px; padding: 10px 14px;
  background: rgba(63, 189, 245, .08);
  border: 1px solid rgba(63, 189, 245, .3);
  border-radius: var(--radius-klein);
  font-size: .86rem; color: var(--text-leise);
}

.filter { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
.filter .schritt[aria-pressed="true"] {
  /* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
     hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
  --f: var(--akzent);
  color: #fff;
  background:
    linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
                    color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
    linear-gradient(150deg, var(--f),
                    color-mix(in srgb, var(--f) 45%, transparent)) border-box;
  box-shadow: 0 4px 16px -9px var(--f);
}

/* ---------- Liste ------------------------------------------------------- */

.datei {
  display: grid; gap: 4px 16px; align-items: center;
  grid-template-columns: 34px 1fr auto;
  padding: 13px 16px; margin-bottom: 9px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--rand);
  border-radius: var(--radius-klein);
}
.datei[data-status="entwurf"]     { border-left-color: #6f89a8; }
.datei[data-status="review"]      { border-left-color: #e0a33c; }
.datei[data-status="freigegeben"] { border-left-color: #4dab77;
                                    background: rgba(77, 171, 119, .05); }

.datei__zeichen {
  grid-row: span 2; width: 26px; height: 26px;
  fill: none; stroke: var(--text-still);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.datei__name { font-weight: 600; font-size: .93rem; word-break: break-word; }
.datei__zeile {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: .78rem; color: var(--text-still);
}
.datei__knoepfe { grid-row: span 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.marke-status {
  padding: 1px 9px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.marke-status[data-status="entwurf"]     { background: rgba(111, 137, 168, .18); color: #a8bdd4; }
.marke-status[data-status="review"]      { background: rgba(224, 163, 60, .16); color: #e6b45c; }
.marke-status[data-status="freigegeben"] { background: rgba(77, 171, 119, .18); color: #79d1a2; }


@media (max-width: 720px) {
  .datei { grid-template-columns: 34px 1fr; }
  .datei__knoepfe { grid-row: auto; grid-column: 1 / -1; margin-top: 9px; }
}

/* Hinweis statt Ablegefeld, wenn jemand nicht hochladen darf. */
.nur-lesen {
  margin: 0 0 22px; padding: 15px 18px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius-klein);
  font-size: .88rem; color: var(--text-leise); line-height: 1.5;
}
.nur-lesen strong { color: var(--text); }

/* ===================================================================
   Wer darf die Datei sehen (28.08.2026).

   Kleine Schalter statt <select multiple>: Dort verliert man mit einem
   Fehlklick die ganze Auswahl, und auf dem Handy ist sie kaum
   bedienbar. Hier ist jeder Name ein eigener Schalter, der sichtbar an
   oder aus ist.
   =================================================================== */

.hochlade-zeile { display: grid; gap: 16px; margin-bottom: 22px; }

.wahl, .datei__wahl { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.datei__wahl { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand); }

.wahl__knopf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; cursor: pointer;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rand); border-radius: 999px;
  color: var(--text-leise); font: inherit; font-size: .84rem;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.wahl__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
.wahl__rolle {
  font-size: .7rem; font-weight: 600; letter-spacing: .03em;
  color: var(--text-still);
}
/* Ausgewählt trägt die Farbe der Rolle -- man sieht auf einen Blick,
   ob eine Datei an Creator, Scouts oder beide geht. */
.wahl__knopf[data-an="ja"] { color: #fff; font-weight: 600; }
.wahl__knopf[data-an="ja"][data-rolle="creator"] {
  border-color: rgba(63, 189, 245, .55); background: rgba(63, 189, 245, .16);
}
.wahl__knopf[data-an="ja"][data-rolle="scout"] {
  border-color: rgba(138, 118, 255, .55); background: rgba(138, 118, 255, .16);
}
.wahl__knopf[data-an="ja"][data-rolle="admin"] {
  border-color: rgba(232, 192, 125, .55); background: rgba(232, 192, 125, .16);
}
.wahl__knopf[data-an="ja"] .wahl__rolle { color: rgba(255, 255, 255, .75); }

.datei__freigaben {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--rand);
}
.datei__schild {
  font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-still);
}
.marke-person {
  padding: 3px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 600;
  color: var(--text-leise);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand);
}
.marke-person--leer { color: var(--text-still); font-weight: 400; font-style: italic; }

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

/* =====================================================================
   FASSUNGEN (15.09.2026)

   "Fassung 2" ist eine Nummer und bleibt ruhig. "nicht mehr aktuell"
   ist eine Warnung und darf auffallen -- aber nicht schreien: Sie steht
   an einer Datei, die niemand falsch gemacht hat, sie ist nur alt.
   ===================================================================== */

.fassung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.fassung__nummer {
  font-size: .78rem; font-weight: 640; color: var(--text-still);
  font-variant-numeric: tabular-nums;
}
.fassung__alt {
  font-size: .78rem; font-weight: 640;
  padding: 2px 9px; border-radius: 999px;
  color: #d8a76a;
  border: 1px solid color-mix(in srgb, #cc9451 45%, transparent);
}
.fassung__loesen {
  font: inherit; font-size: .76rem;
  padding: 2px 9px; border-radius: 999px; cursor: pointer;
  color: var(--text-still);
  background: none;
  border: 1px solid var(--rand);
}
.fassung__loesen:hover { color: var(--text); border-color: var(--rand-hell); }