/* ===================================================================
   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);
}

/* Die Filterleiste steht seit 22.09.2026 in gate.css -- sie wird
   inzwischen auf drei Seiten gebraucht, und gate.css laedt jede.
   Sie hier zu lassen hiesse, sie beim vierten Mal wieder zu
   kopieren; genau so ist .knopf-still schon einmal auf einer
   Seite als nacktes Kaestchen erschienen. */

/* ---------- 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; }


/* ALLES UNTER DER KOPFZEILE GEHOERT NEBEN DAS ZEICHEN (01.10.2026).
   ---------------------------------------------------------------------
   Filipe: "es sieht sogar noch richtig scheisse aus wenn ich da was
   hochladen will."

   Die ersten vier Kinder sitzen, wo sie sollen: Zeichen, Name, Knoepfe,
   Metazeile. Alles DANACH wird vom Raster automatisch verteilt -- und
   landet in der ersten freien Zelle. Das ist die ZEICHENSPALTE, und die
   ist 34 Pixel breit. Gemessen (pruef-dateien-liste.mjs): "Fassung 2"
   stand in 34 px und ragte 22 px heraus; auf 390 px traf es zusaetzlich
   die Metazeile ("1,9 MB" brach in zwei Zeilen) und "Sichtbar fuer",
   das 49 px herausragte.

   Diese Bloecke bekommen deshalb ausdruecklich die Spalten ab der
   zweiten. Auf das Zeichen folgt dann nichts mehr -- und genau so war
   es gemeint. */
.datei > .fassung,
.datei > .datei__freigaben,
.datei > .datei__wahl { grid-column: 2 / -1; }

@media (max-width: 720px) {
  .datei { grid-template-columns: 34px 1fr; }
  .datei__knoepfe { grid-row: auto; grid-column: 1 / -1; margin-top: 9px; }
  /* Nur hier: Am Rechner sitzt die Metazeile richtig (Zeile 2, Spalte 2).
     Sobald die Knoepfe aber ueber die ganze Breite gehen, rutscht sie
     hinter ihnen in die Zeichenspalte. */
  .datei > .datei__zeile { grid-column: 2 / -1; }
}

/* 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); }