/* Play-Designer — Gestaltungssystem
 *
 * Dauerhaft dunkel, auf Wunsch von Niklas. Das Werkzeug wird abends am
 * Kuechentisch und am Spieltag am Rand des Platzes bedient; ein einziges
 * Thema haelt die Oberflaeche berechenbar und spart den Umschalter.
 *
 * Die Farben sind keine Erfindung, sondern die Notation der Zeichnung:
 * Petrol steht in Diagramm und Oberflaeche fuer Deckung und Bedienung,
 * Gold fuer den Ball, Ziegelrot fuer die Defense. Der AUSDRUCK bleibt
 * hell -- Papier hat kein dunkles Thema, die Druckfarben stehen fest in
 * designer/render.py.
 */

:root {
  /* --- Grundflaechen. Dunkel, mit einem Hauch Petrol im Neutralton. */
  --flaeche:        oklch(0.175 0.012 240);
  --flaeche-panel:  oklch(0.215 0.014 240);
  --flaeche-hoch:   oklch(0.252 0.014 240);
  --flaeche-tief:   oklch(0.148 0.012 240);

  /* --- Schrift */
  --ink:            oklch(0.945 0.006 240);
  --ink-leise:      oklch(0.795 0.010 240);
  --ink-still:      oklch(0.655 0.012 240);

  /* --- Linien */
  --linie:          oklch(0.305 0.014 240);
  --linie-stark:    oklch(0.405 0.016 240);

  /* --- Bedeutung. Identisch mit der Diagrammnotation. */
  --petrol:         oklch(0.755 0.078 220);
  --petrol-tief:    oklch(0.825 0.070 220);
  --auf-petrol:     oklch(0.16 0.012 240);
  --petrol-hell:    oklch(0.285 0.036 222);
  --petrol-rand:    oklch(0.405 0.050 222);
  --gold:           oklch(0.790 0.105 78);
  --gold-hell:      oklch(0.285 0.040 70);
  --ziegel:         oklch(0.715 0.115 32);
  --ziegel-hell:    oklch(0.275 0.045 32);

  /* --- Zustaende */
  --gut:            oklch(0.735 0.115 155);
  --warnung:        oklch(0.790 0.105 78);
  --fehler:         oklch(0.720 0.140 27);
  --fehler-hell:    oklch(0.270 0.055 27);

  /* --- Schrift: eine Familie, feste Stufen. */
  --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs:   0.6875rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;

  /* Rund statt eckig -- durchgaengig, nicht nur an Kacheln. */
  --r1: 8px;
  --r2: 12px;
  --r3: 18px;
  --r4: 26px;
  --rund: 999px;

  --schatten-1: 0 1px 2px oklch(0 0 0 / .32);
  --schatten-2: 0 2px 6px oklch(0 0 0 / .36), 0 10px 28px oklch(0 0 0 / .32);

  /* --- Ebenen. Benannt, nie willkuerliche Zahlen. */
  --z-inhalt: 1;
  --z-haftend: 20;
  --z-menue: 40;
  --z-hinweis: 60;

  --tempo: 180ms;
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);

  /* Formularelemente und Bildlaufleisten sollen mitziehen. */
  color-scheme: dark;
}

/* --- Grundlagen ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--ink);
  font-family: var(--schrift);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.012em;
             text-wrap: balance; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
p { margin: 0 0 0.75rem; max-width: 68ch; text-wrap: pretty; }

a { color: var(--petrol); text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 2px;
  border-radius: var(--r1);
}

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- Kopfleiste ----------------------------------------------------- */

.kopfleiste {
  position: sticky; top: 0; z-index: var(--z-haftend);
  display: flex; align-items: center; gap: 1rem;
  padding: 0.55rem 1rem;
  background: var(--flaeche-panel);
  border-bottom: 1px solid var(--linie);
}

.marke {
  display: flex; align-items: baseline; gap: 0.45rem;
  font-weight: 700; font-size: var(--t-sm); letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.marke .marke-zusatz { font-weight: 500; color: var(--ink-still); }

.kopf-pfad {
  display: flex; align-items: center; gap: 0.4rem; min-width: 0;
  font-size: var(--t-sm); color: var(--ink-leise);
}
.kopf-pfad a { color: var(--ink-leise); text-decoration: none; }
.kopf-pfad a:hover { color: var(--ink); text-decoration: underline; }
.kopf-pfad .jetzt { color: var(--ink); font-weight: 600;
                    overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center;
               gap: 0.4rem; }

/* --- Schaltflaechen -------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem;
  min-height: 34px; padding: 0 0.75rem;
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--ink);
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve);
}
.knopf:hover { background: var(--flaeche-tief); border-color: var(--ink-still); }
.knopf:active { background: var(--flaeche-tief); transform: translateY(0.5px); }
.knopf[disabled], .knopf[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

.knopf.haupt {
  color: var(--auf-petrol); background: var(--petrol);
  border-color: var(--petrol);
}
.knopf.haupt:hover { background: var(--petrol-tief); border-color: var(--petrol-tief); }

.knopf.leise { background: transparent; border-color: transparent;
               color: var(--ink-leise); }
.knopf.leise:hover { background: var(--flaeche-tief); color: var(--ink); }

.knopf.klein { min-height: 28px; padding: 0 0.5rem; font-size: var(--t-xs); }

/* --- Formularfelder -------------------------------------------------- */

.feld { display: flex; flex-direction: column; gap: 0.25rem; }
.feld > label {
  font-size: var(--t-xs); font-weight: 650; color: var(--ink-leise);
  letter-spacing: 0.02em;
}

input[type="text"], input[type="number"], input[type="password"],
select, textarea {
  font: inherit; font-size: var(--t-sm);
  color: var(--ink);
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie-stark);
  border-radius: var(--r2);
  padding: 0.4rem 0.55rem;
  min-height: 34px;
  width: 100%;
  transition: border-color var(--tempo) var(--kurve);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-still); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--petrol); outline-offset: 0; border-color: var(--petrol);
}
input::placeholder, textarea::placeholder { color: var(--ink-still); }
textarea { min-height: 76px; resize: vertical; line-height: 1.5; }

/* --- Etiketten ------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.1rem 0.4rem;
  font-size: var(--t-xs); font-weight: 650;
  border: 1px solid var(--linie-stark); border-radius: var(--r1);
  color: var(--ink-leise); background: var(--flaeche-hoch);
  white-space: nowrap;
}
.chip .punkt { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.chip.warn { color: var(--gold); border-color: var(--gold);
             background: var(--gold-hell); }

/* --- Seiten ---------------------------------------------------------- */

.seite { max-width: 1080px; margin: 0 auto; padding: 1.75rem 1rem 4rem; }
.seitenkopf { display: flex; align-items: flex-end; gap: 1rem;
              margin-bottom: 1.25rem; flex-wrap: wrap; }
.seitenkopf .wachsen { flex: 1 1 auto; min-width: 0; }
.seitenkopf p { margin: 0.15rem 0 0; color: var(--ink-leise);
                font-size: var(--t-sm); }

/* --- Listen statt Kacheln -------------------------------------------- */

.liste { border: 1px solid var(--linie); border-radius: var(--r3);
         overflow: hidden; background: var(--flaeche-hoch); }
.liste > * + * { border-top: 1px solid var(--linie); }

.zeile {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  text-decoration: none; color: inherit;
  transition: background var(--tempo) var(--kurve);
}
a.zeile:hover { background: var(--flaeche-panel); }
.zeile .titel { font-weight: 600; }
.zeile .unter { font-size: var(--t-sm); color: var(--ink-leise); }
.zeile .wachsen { flex: 1 1 auto; min-width: 0; }
.zeile .nummer {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-still);
  font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right;
}

/* --- Leerzustand: erklaert, statt nur festzustellen ------------------ */

.leerzustand {
  border: 1px dashed var(--linie-stark); border-radius: var(--r3);
  padding: 2rem 1.5rem; text-align: center; background: var(--flaeche-panel);
}
.leerzustand h3 { margin-bottom: 0.3rem; }
.leerzustand p { margin: 0 auto 1rem; color: var(--ink-leise);
                 max-width: 46ch; font-size: var(--t-sm); }

/* --- Meldungen -------------------------------------------------------- */

.meldung {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.6rem 0.75rem; border-radius: var(--r2);
  font-size: var(--t-sm);
  border: 1px solid var(--linie-stark); background: var(--flaeche-panel);
}
.meldung.fehler { color: var(--fehler); border-color: var(--fehler);
                  background: var(--fehler-hell); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ======================================================================
   Oberflaechen — Glaskacheln
   ----------------------------------------------------------------------
   Auf Wunsch von Niklas: runde, spiegelnde Kacheln statt Formularseiten.
   Damit Glas ueberhaupt wirkt, braucht der Hintergrund etwas zum Brechen —
   deshalb zwei sehr schwache Lichtquellen hinter allem. Ohne die waere
   der Weichzeichner reine Behauptung.
   ====================================================================== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 12% -8%,
      oklch(0.755 0.078 220 / .16), transparent 62%),
    radial-gradient(46rem 34rem at 96% 4%,
      oklch(0.790 0.105 78 / .10), transparent 60%),
    radial-gradient(70rem 50rem at 50% 118%,
      oklch(0.715 0.115 32 / .07), transparent 64%);
}
body > * { position: relative; z-index: var(--z-inhalt); }

/* --- die Kachel selbst ------------------------------------------------ */

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.15rem 1.2rem;
  border-radius: var(--r3);
  background: linear-gradient(
      160deg,
      oklch(1 0 0 / .075) 0%,
      oklch(1 0 0 / .028) 42%,
      oklch(1 0 0 / .012) 100%);
  border: 1px solid oklch(1 0 0 / .085);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow:
    0 1px 0 0 oklch(1 0 0 / .11) inset,
    0 18px 40px -22px oklch(0 0 0 / .8);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              box-shadow var(--tempo) var(--kurve);
}

/* Der Lichtstreifen auf der Oberkante — das, was Glas zu Glas macht. */
.kachel::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, oklch(1 0 0 / .38) 22%, oklch(1 0 0 / .38) 78%, transparent);
  pointer-events: none;
}

a.kachel:hover, button.kachel:hover {
  transform: translateY(-2px);
  border-color: oklch(1 0 0 / .17);
  box-shadow:
    0 1px 0 0 oklch(1 0 0 / .15) inset,
    0 26px 52px -24px oklch(0 0 0 / .9);
}
a.kachel:active, button.kachel:active { transform: translateY(0); }

/* Teamfarbe als Schimmer in der Ecke, gesetzt per --ton. */
.kachel.getoent::before {
  content: "";
  position: absolute;
  width: 15rem; height: 15rem;
  right: -6rem; top: -7rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ton, transparent) 0%, transparent 68%);
  opacity: .5;
  pointer-events: none;
}

.kachelraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: 1rem;
}

/* --- Wappen ------------------------------------------------------------ */

.wappen {
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--r2);
  display: grid; place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: oklch(1 0 0 / .07);
  border: 1px solid oklch(1 0 0 / .1);
  font-weight: 700; font-size: var(--t-md);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.wappen img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.wappen.gross { width: 4.75rem; height: 4.75rem; font-size: var(--t-xl);
                border-radius: var(--r3); }
.wappen.klein { width: 2.1rem; height: 2.1rem; font-size: var(--t-xs);
                border-radius: var(--r1); }

/* --- Kachelinhalt ------------------------------------------------------ */

.kachelkopf { display: flex; align-items: center; gap: 0.8rem; }
.kachelkopf .wachsen { flex: 1 1 auto; min-width: 0; }
.kacheltitel {
  font-size: var(--t-md); font-weight: 650; letter-spacing: -0.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kachelunter { font-size: var(--t-sm); color: var(--ink-still); }

.zahlen { display: flex; gap: 1.25rem; margin-top: auto; padding-top: 0.35rem; }
.zahl { display: flex; flex-direction: column; gap: 0.1rem; }
.zahl b {
  font-size: var(--t-lg); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.zahl span { font-size: var(--t-xs); color: var(--ink-still); }

/* --- Kachel als Aktion (gestrichelt) ---------------------------------- */

.kachel.aktion {
  align-items: center; justify-content: center; text-align: center;
  min-height: 9.5rem;
  border-style: dashed;
  border-color: oklch(1 0 0 / .16);
  background: oklch(1 0 0 / .018);
}
.kachel.aktion::after { display: none; }
.kachel.aktion:hover { border-color: var(--petrol); background: oklch(1 0 0 / .045); }
.kachel.aktion .zeichen {
  width: 2.6rem; height: 2.6rem; border-radius: var(--rund);
  display: grid; place-items: center;
  background: var(--petrol); color: var(--auf-petrol);
  font-size: 1.35rem; font-weight: 400; line-height: 1;
}

/* --- Seitenkopf mit Wappen -------------------------------------------- */

.buehnenkopf {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.6rem 1.35rem;
  border-radius: var(--r4);
  background: linear-gradient(160deg,
    oklch(1 0 0 / .07), oklch(1 0 0 / .015));
  border: 1px solid oklch(1 0 0 / .09);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  margin-bottom: 1.5rem;
  position: relative; overflow: hidden;
  flex-wrap: wrap;
}
.buehnenkopf .wachsen { flex: 1 1 14rem; min-width: 0; }
.buehnenkopf h1 { font-size: clamp(1.35rem, 3.4vw, 1.85rem); }
.buehnenkopf .unterzeile {
  color: var(--ink-leise); font-size: var(--t-sm); margin-top: 0.2rem;
}
.buehnenkopf .aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* --- Abschnittsüberschrift -------------------------------------------- */

.abschnitt {
  display: flex; align-items: baseline; gap: 0.7rem;
  margin: 2.1rem 0 0.85rem;
}
.abschnitt h2 { font-size: var(--t-md); font-weight: 650; }
.abschnitt .zaehler {
  font-size: var(--t-xs); color: var(--ink-still);
  font-variant-numeric: tabular-nums;
}
.abschnitt .rest { flex: 1 1 auto; height: 1px;
                   background: linear-gradient(90deg, var(--linie), transparent); }

/* --- Wegweiser (dreistufig) ------------------------------------------- */

.wegweiser {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: 0.5rem 0 0;
  counter-reset: schritt;
  padding: 0;
  list-style: none;
}
.wegweiser li {
  counter-increment: schritt;
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.85rem 0.95rem;
  border-radius: var(--r2);
  background: oklch(1 0 0 / .035);
  border: 1px solid oklch(1 0 0 / .07);
  margin: 0;
  font-size: var(--t-sm);
}
.wegweiser li::before {
  content: counter(schritt);
  flex: 0 0 auto;
  width: 1.55rem; height: 1.55rem; border-radius: var(--rund);
  display: grid; place-items: center;
  background: var(--petrol); color: var(--auf-petrol);
  font-size: var(--t-xs); font-weight: 700;
}
.wegweiser b { display: block; color: var(--ink); }
.wegweiser span { color: var(--ink-still); }

/* --- Formulare in Glas ------------------------------------------------- */

.formkarte {
  max-width: 34rem; margin: 0 auto;
  padding: 1.5rem 1.5rem 1.35rem;
  border-radius: var(--r4);
  background: linear-gradient(160deg, oklch(1 0 0 / .07), oklch(1 0 0 / .02));
  border: 1px solid oklch(1 0 0 / .09);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 24px 60px -30px oklch(0 0 0 / .9);
}
.formfelder { display: flex; flex-direction: column; gap: 1.05rem; }
.formfuss {
  display: flex; gap: 0.6rem; justify-content: flex-end;
  margin-top: 1.35rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  flex-wrap: wrap;
}
.hinweistext { font-size: var(--t-xs); color: var(--ink-still); margin: 0; }
.feldfehler {
  font-size: var(--t-xs); color: var(--fehler);
  background: var(--fehler-hell); border-radius: var(--r1);
  padding: 0.25rem 0.5rem; margin: 0;
}

input[type="text"], input[type="number"], input[type="password"],
input[type="search"], select, textarea {
  border-radius: var(--r2);
  background: oklch(1 0 0 / .045);
  border-color: oklch(1 0 0 / .12);
}
input[type="file"] {
  font: inherit; font-size: var(--t-sm); color: var(--ink-leise);
  width: 100%;
}
input[type="file"]::file-selector-button {
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--ink); background: oklch(1 0 0 / .08);
  border: 1px solid oklch(1 0 0 / .14);
  border-radius: var(--rund);
  padding: 0.35rem 0.8rem; margin-right: 0.7rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: oklch(1 0 0 / .13); }

/* --- Farbwahl im Formular --------------------------------------------- */

.farbzeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.farbzeile input.farbfeld { width: 7.5rem; font-family: var(--mono); }
.farbtupfer {
  width: 1.75rem; height: 1.75rem; border-radius: var(--rund);
  border: 1px solid oklch(1 0 0 / .2); padding: 0; cursor: pointer;
  transition: transform var(--tempo) var(--kurve);
}
.farbtupfer:hover { transform: scale(1.12); }

/* --- Logo-Vorschau ----------------------------------------------------- */

.logovorschau {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem; border-radius: var(--r2);
  background: oklch(1 0 0 / .03); border: 1px dashed oklch(1 0 0 / .12);
}

/* --- Meldungen --------------------------------------------------------- */

.meldungen { display: flex; flex-direction: column; gap: 0.5rem;
             margin-bottom: 1.1rem; }
.meldung {
  border-radius: var(--r2);
  background: oklch(1 0 0 / .05);
  border-color: oklch(1 0 0 / .1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.meldung.erfolg { color: var(--gut); border-color: var(--gut); }

/* --- Listen runder ----------------------------------------------------- */

.liste {
  border-radius: var(--r3);
  background: oklch(1 0 0 / .035);
  border-color: oklch(1 0 0 / .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.liste > * + * { border-top-color: oklch(1 0 0 / .06); }
a.zeile:hover { background: oklch(1 0 0 / .05); }

.leerzustand {
  border-radius: var(--r4);
  border-color: oklch(1 0 0 / .13);
  background: oklch(1 0 0 / .025);
}

/* Wer weniger Bewegung will, bekommt keine Schwebeeffekte. */
@media (prefers-reduced-motion: reduce) {
  a.kachel:hover, button.kachel:hover { transform: none; }
}

/* Geraete ohne Weichzeichner bekommen eine kraeftigere Flaeche, damit die
   Kachel nicht durchsichtig und damit unlesbar wirkt. */
@supports not (backdrop-filter: blur(1px)) {
  .kachel, .buehnenkopf, .formkarte, .liste {
    background: var(--flaeche-panel);
  }
}

/* Schmale Seite fuer Formulare. */
.seite.schmal { max-width: 44rem; }

/* Der Pfad in der Kopfleiste ist der Weg zurueck — auf kleinen Schirmen
   zaehlt nur noch die letzte Stufe. */
@media (max-width: 40rem) {
  .kopf-pfad > *:not(.jetzt) { display: none; }
  .buehnenkopf { padding: 1.15rem 1rem; border-radius: var(--r3); }
  .buehnenkopf .aktionen { width: 100%; }
  .buehnenkopf .aktionen .knopf { flex: 1 1 auto; }
}

/* Titel und Unterzeile sind spans (damit sie in einem <a> stehen duerfen)
   und brauchen deshalb ausdrueckliche Blockdarstellung. */
.kachelkopf .wachsen { display: block; }
.kacheltitel, .kachelunter { display: block; }
.zahl span { display: block; }

/* --- Dateiwahl mit eigener Beschriftung -------------------------------- */
/* Der native Knopf heisst je nach Browsersprache „Choose File" — in einer
   deutschen Oberflaeche stoert das. Das Feld bleibt bedienbar und fuer
   Screenreader sichtbar, nur optisch ersetzt. */
.dateiwahl { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dateiwahl input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.dateiwahl .auswahlknopf {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 0 0.85rem; border-radius: var(--rund);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  background: oklch(1 0 0 / .08); border: 1px solid oklch(1 0 0 / .14);
  cursor: pointer;
  transition: background var(--tempo) var(--kurve);
}
.dateiwahl .auswahlknopf:hover { background: oklch(1 0 0 / .14); }
.dateiwahl input[type="file"]:focus-visible + .auswahlknopf {
  outline: 2px solid var(--petrol); outline-offset: 2px;
}
.dateiname { font-size: var(--t-xs); color: var(--ink-still); }