/* Der Verwaltungsbereich (seit 23.09.2026).
 *
 * Verbindlicher Entwurf: wolke\TESTER-ENTWURF.md, Teil C5.
 *
 * KEINE FESTE FARBE. Alles kommt aus den Token in css/farben.css —
 * derselbe Riegel, den werkzeug\pruefen-darkmode.mjs für die ganze Seite
 * hält. So stimmt der Bereich in Hell und Dunkel, ohne dass hier eine
 * zweite Liste gepflegt werden müsste.
 *
 * Die Seite liegt im Gerüst des Kundenbereichs (.kb-inhalt) und erbt
 * dessen Abstände. 390 px: Die Tabelle wird zu Karten, damit nichts
 * waagrecht scrollt.
 */

.vw {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.vw-kopf { display: flex; flex-direction: column; gap: .35rem; }
.vw-titel { margin: 0; font-size: 1.6rem; }
.vw-unter { margin: 0; color: var(--leise); font-size: .92rem; }

/* ── Reiter ───────────────────────────────────────────────────── */

.vw-reiter {
  display: flex;
  gap: .5rem;
  border-bottom: 1px solid var(--rand);
  padding-bottom: .1rem;
  flex-wrap: wrap;
}

.vw-reiterknopf {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--leise);
  font: inherit;
  padding: .5rem .9rem;
  cursor: pointer;
  border-radius: .4rem .4rem 0 0;
}

.vw-reiterknopf:hover { color: var(--text); background: rgba(var(--tint), .04); }
.vw-reiterknopf.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 600; }
.vw-reiterknopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ── Tor: Passkey ─────────────────────────────────────────────── */

.vw-tor {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: .8rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: 46rem;
}

.vw-tor h2 { margin: 0; font-size: 1.15rem; }
.vw-tor p { margin: 0; color: var(--leise); line-height: 1.55; }

/* ── Suche ────────────────────────────────────────────────────── */

.vw-suche { display: flex; gap: .5rem; flex-wrap: wrap; }

.vw-suche input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: .55rem .7rem;
  border: 1px solid var(--feldrand);
  border-radius: .5rem;
  background: var(--grund);
  color: var(--text);
  font: inherit;
}

.vw-suche input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* ── Tabelle ──────────────────────────────────────────────────── */

.vw-tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: .8rem;
  overflow: hidden;
}

.vw-tabelle th,
.vw-tabelle td {
  text-align: left;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--rand);
  font-size: .92rem;
  vertical-align: middle;
}

.vw-tabelle th { color: var(--leise); font-weight: 600; background: rgba(var(--tint), .03); }
.vw-tabelle tbody tr:last-child td { border-bottom: 0; }
.vw-tabelle tbody tr:hover { background: rgba(var(--tint), .03); }

.vw-nummer { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Eine lange Adresse darf die Tabelle nicht sprengen — und sie wird
   nie gekürzt angezeigt, sondern umgebrochen: Wer ein Konto sucht,
   muss die ganze Adresse lesen können. */
.vw-mail { word-break: break-all; }

.vw-chip {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .8rem;
  border: 1px solid var(--rand);
  color: var(--leise);
  margin-right: .3rem;
}

.vw-chip.gut { color: var(--gut-chip); border-color: rgba(var(--gut-rgb), .45); }
.vw-chip.warnung { color: var(--warn-stark); border-color: var(--warn-rand); }
/* Ein Chip direkt im Kasten (etwa „Per Mail verschickt“ beim Code) —
   sonst zieht ihn die Spalte des Kastens auf die ganze Breite. */
.vw-block > .vw-chip { align-self: flex-start; }

.vw-blaettern { display: flex; align-items: center; gap: .75rem; }
.vw-seitenzahl { color: var(--leise); font-size: .9rem; }

/* ── Ein Konto ────────────────────────────────────────────────── */

.vw-block {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: .8rem;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.vw-block h2 { margin: 0; font-size: 1.05rem; }

.vw-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .35rem 1.25rem;
}

.vw-feld { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0;
           border-bottom: 1px dotted var(--rand); }
.vw-feldname { color: var(--leise); font-size: .9rem; }
.vw-feldwert { font-size: .9rem; text-align: right; word-break: break-word; }

.vw-bestellung { border: 1px solid var(--rand); border-radius: .6rem; padding: .7rem .85rem;
                 display: flex; flex-direction: column; gap: .4rem; }
.vw-bestellkopf { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.vw-posten { margin: 0; padding-left: 1.1rem; font-size: .9rem; color: var(--leise); }
.vw-summe { margin: 0; font-size: .9rem; }
.vw-lizenz { margin: 0; font-size: .92rem; }

/* ── Der Verkauf (seit 19.10.2026): Ampel, Fälle, Widerrufe, Zuordnen ── */
.vw-block h3 { margin: .35rem 0 0; font-size: .95rem; }
.vw-ampel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.vw-ampel-zeile { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; font-size: .92rem; }
.vw-ampel-punkt { flex: 0 0 auto; width: .7rem; height: .7rem; border-radius: 50%; background: var(--leise);
                  align-self: flex-start; margin-top: .35rem; }
.vw-ampel-zeile.gruen .vw-ampel-punkt { background: var(--gut-chip); }
.vw-ampel-zeile.gelb .vw-ampel-punkt { background: var(--warn-stark); }
.vw-ampel-zeile.rot .vw-ampel-punkt { background: var(--fehler); }
.vw-ampel-text { flex: 1 1 18rem; color: var(--leise); }
.vw-fall { flex-wrap: wrap; align-items: center; }
.vw-fallsatz { display: block; margin-top: .2rem; color: var(--leise); font-size: .88rem; }
.vw-widerruf { flex: 1 1 100%; }
.vw-zuordnen { border: 1px dashed var(--rand); border-radius: .6rem; padding: .7rem .85rem;
               display: flex; flex-direction: column; gap: .45rem; }
.vw-zuordnen-zeile { display: flex; gap: .5rem; align-items: center; font-size: .92rem; }
/* Belege (seit 19.10.2026): „PDF laden“ neben der Zeile, die Jahreswahl der Belegliste. */
.vw-belegzeile { margin: .15rem 0; }
.vw-belegzeile .knopf { margin-left: .6rem; vertical-align: baseline; }
.vw-auswahl { padding: .45rem .6rem; border: 1px solid var(--feldrand); border-radius: .5rem;
              background: var(--grund); color: var(--text); font: inherit; }
.vw-auswahl:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* ── Testerplätze (Stufe 2) ───────────────────────────────────── */

/* Eine Karte je Programm der Runde. Keine feste Farbe — alles über die
   Grundwerte, damit Hell und Dunkel ohne zweite Liste stimmen. */
.vw-platz { border: 1px solid var(--rand); border-radius: .6rem;
            padding: .7rem .85rem; margin: 0 0 .6rem;
            display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.vw-platz:last-of-type { margin-bottom: 0; }
.vw-platzkopf { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
/* Was absichtlich NICHT in der Runde ist. Ruhig, kein Warnton: Es ist
   eine Entscheidung, kein Fehler. */
.vw-draussen { border: 1px dashed var(--rand); border-radius: .6rem;
               padding: .7rem .85rem; color: var(--leise); font-size: .9rem;
               display: flex; flex-direction: column; gap: .35rem; }
.vw-draussen p { margin: 0; }

/* ── Die Dauer beim Freigeben und Verlängern (seit 28.09.2026) ─── */

/* Drei gleich breite Felder: 90 Tage, 1 Jahr, Unbefristet. Am Handy
   daumenbreit (ein Drittel der Zeile, mindestens 44 px hoch), am Rechner
   nicht breiter als nötig. Das Auswahlfeld selbst ist unsichtbar, bleibt
   aber mit der Tastatur erreichbar (Tab in die Gruppe, Pfeiltasten
   wechseln); gezeigt wird seine Beschriftung. Nur Token, keine feste Farbe. */
.vw-dauer { border: 1px solid var(--rand); border-radius: .6rem; margin: 0;
            padding: .55rem .8rem .75rem; display: flex; flex-direction: column;
            gap: .55rem; min-width: 0; }
.vw-dauer legend { color: var(--leise); font-size: .9rem; padding: 0 .3rem; }
.vw-dauerwahl { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: .4rem; max-width: 30rem; }
.vw-dauerwahl input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0;
                      opacity: 0; pointer-events: none; }
.vw-dauerwahl label { display: flex; align-items: center; justify-content: center; text-align: center;
                      min-height: 2.75rem; padding: .35rem .5rem; line-height: 1.2;
                      border: 1px solid var(--feldrand); border-radius: .55rem;
                      background: var(--grund); color: var(--text); font-size: .92rem;
                      cursor: pointer; user-select: none;
                      /* Nie mitten im Wort brechen (28.09.2026): Mit
                         `overflow-wrap: anywhere` stand bei 360 px
                         „Unbefriste / t“ da. Wenn es doch eng wird, trennt
                         der Browser nach den Regeln der Sprache. */
                      overflow-wrap: normal; hyphens: auto; }
.vw-dauerwahl label:hover { border-color: var(--akzent); }
.vw-dauerwahl input:checked + label { border-color: var(--akzent); color: var(--akzent); font-weight: 600;
                                      background: rgba(var(--akzent-rgb), .12);
                                      box-shadow: inset 0 0 0 1px var(--akzent); }
.vw-dauerwahl input:focus-visible + label { outline: 2px solid var(--akzent); outline-offset: 2px; }
.vw-dauervorschau { margin: 0; color: var(--leise); font-size: .85rem; line-height: 1.45; }
/* Am Handy steckt die Wahl in drei Rahmen (Block, Platz, Gruppe): etwas
   weniger Rand, damit „Unbefristet“ und „+ 90 Tage“ auf eine Zeile passen. */
@media (max-width: 480px) {
  .vw-dauer { padding: .5rem .55rem .65rem; }
  .vw-dauerwahl { gap: .3rem; }
  .vw-dauerwahl label { padding: .3rem .2rem; font-size: .88rem; }
}
/* Unter 400 px (28.09.2026, gemessen bis 320 px): etwas kleiner, damit
   „Unbefristet“ — fett, wenn gewählt — in 77 px auf eine Zeile passt. */
@media (max-width: 400px) {
  .vw-dauerwahl label { padding: .3rem .1rem; font-size: .82rem; }
}

/* ── Schlüssel und Rechner (Stufe 4b) ─────────────────────────── */

/* Die Rechner eines Platzes. Der Name ist fremder Text aus dem Netz und
   steht nur als Text da; lange Namen brechen um statt die Karte zu
   sprengen. */
.vw-rechner { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.vw-rechner li { display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: center;
                 padding: .4rem .6rem; border: 1px solid var(--rand); border-radius: .5rem; }
.vw-rechnername { font-weight: 600; overflow-wrap: anywhere; }
/* Der Kasten, der den Schlüssel EINMAL zeigt: große Schrift, gut
   abzulesen, fünf Gruppen durch die Bindestriche. */
.vw-einmal { border: 2px solid var(--akzent, var(--rand)); }
.vw-schluessel { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                 font-size: clamp(1.05rem, 3.6vw, 1.5rem); letter-spacing: .04em;
                 margin: .2rem 0 .8rem; overflow-wrap: anywhere; user-select: all; }
/* Der QR-Code bleibt dunkel auf hell, auch im dunklen Thema: Der helle
   Grund samt Ruhezone steckt im SVG selbst (js/verwaltung.js, vwQrSvg),
   deshalb braucht es hier keine feste Farbe. */
.vw-qr { display: inline-block; border-radius: .4rem; overflow: hidden;
         margin: 0 0 .8rem; line-height: 0; }
.vw-qr svg { display: block; max-width: 100%; height: auto; }

/* ── Protokoll ────────────────────────────────────────────────── */

.vw-protokoll { list-style: none; margin: 0; padding: 0;
                border: 1px solid var(--rand); border-radius: .8rem;
                background: var(--karte); overflow: hidden; }
.vw-protokoll li { display: flex; gap: .85rem; padding: .5rem .8rem;
                   border-bottom: 1px solid var(--rand); font-size: .9rem; flex-wrap: wrap; }
.vw-protokoll li:last-child { border-bottom: 0; }
.vw-zeit { color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vw-satz { flex: 1 1 18rem; }

/* ── Werkzeuge über der Liste (seit 23.09.2026, Stufe 1b) ─────── */

.vw-werkzeuge { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Formulare und Nachfragen ─────────────────────────────────── */

.vw-formzeile { display: flex; flex-direction: column; gap: .25rem; }
.vw-formzeile label { color: var(--leise); font-size: .9rem; }

.vw-formzeile input,
.vw-formzeile select {
  padding: .55rem .7rem;
  border: 1px solid var(--feldrand);
  border-radius: .5rem;
  background: var(--grund);
  color: var(--text);
  font: inherit;
  max-width: 26rem;
}

.vw-formzeile input:focus-visible,
.vw-formzeile select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Oben ausrichten, nicht mittig: Am Handy bricht die Beschriftung auf
   zwei Zeilen um, und ein Haken in deren Mitte sieht aus, als gehörte er
   zur zweiten. */
.vw-haken { display: flex; align-items: flex-start; gap: .5rem; }
.vw-haken input { margin-top: .2rem; }
.vw-haken label { color: var(--leise); font-size: .9rem; }
.vw-haken input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* „Gleich per Mail an die Person schicken“ samt Sprache (seit 26.09.2026)
   unter „Schlüssel ausgeben“ und in der Nachfrage „Neuen Schlüssel
   ausgeben?“. Die Auswahl rückt am Handy unter die Beschriftung. */
.vw-schluesselpost { flex-wrap: wrap; align-items: center; margin-top: .5rem; }
.vw-schluesselpost input { margin-top: 0; }
.vw-schluesselpost select {
  padding: .3rem .5rem; border: 1px solid var(--feldrand); border-radius: .5rem;
  background: var(--grund); color: var(--text); font: inherit; font-size: .9rem;
}
.vw-schluesselpost select:disabled { opacity: .55; }
.vw-schluesselpost select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Die Nachfrage vor einem Eingriff. Sie hebt sich ab, ohne zu schreien:
   Ein rot blinkender Kasten wird weggeklickt, ein ruhiger gelesen. */
.vw-nachfrage {
  border: 1px solid var(--warn-rand);
  background: var(--warn-flaeche);
  border-radius: .7rem;
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.vw-nachfrage h3 { margin: 0; font-size: 1rem; }
.vw-nachfrage p { margin: 0; line-height: 1.55; font-size: .92rem; }

.vw-knopfreihe { flex-wrap: wrap; gap: .5rem; }

/* Der einzige Knopf, der etwas endgültig wegnimmt, sieht auch so aus.
   Die Farbe kommt aus den Token (css/farben.css) — keine feste Farbe. */
.knopf.gefahr {
  border-color: var(--warn-rand);
  color: var(--warn-stark);
}

.knopf.gefahr:hover { background: var(--warn-flaeche); }

/* Der endgültige Knopf in der Nachfrage: deutlich, aber nicht der weiße
   Hauptknopf — sonst stünde heller Text auf warnfarbenem Grund. Eigene
   Regel statt .knopf.haupt, weil beide dieselbe Stärke haben und sonst
   die Reihenfolge der Dateien über die Lesbarkeit entschiede. */
.knopf.haupt.gefahr {
  background: var(--warn-flaeche);
  border-color: var(--warn-rand);
  color: var(--warn-stark);
  font-weight: 600;
}

.knopf.haupt.gefahr:hover { filter: none; background: rgba(var(--warn-rgb), .18); }

/* ── Geschenk- und Rabattcodes (seit 25.09.2026, GUTSCHEIN-ENTWURF G) ──
   Keine feste Farbe, wie überall hier. */

.vw-gruppe { border: 1px solid var(--rand); border-radius: .6rem; padding: .6rem .8rem .7rem;
             margin: 0; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.vw-gruppe legend { color: var(--leise); font-size: .9rem; padding: 0 .3rem; }
.vw-gruppe-innen { display: flex; flex-direction: column; gap: .35rem; }
.vw-gruppe[hidden], .vw-gruppe-innen[hidden], .vw-haken[hidden], .vw-hinweis[hidden] { display: none; }
/* Der Code in Vierergruppen: dieselbe Schrift wie der Schlüssel. */
.vw-code { letter-spacing: .08em; }
.vw-notiz { overflow-wrap: anywhere; }
.vw-codepost { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.vw-codepost input, .vw-codepost select {
  padding: .45rem .6rem; border: 1px solid var(--feldrand); border-radius: .5rem;
  background: var(--grund); color: var(--text); font: inherit; min-width: 0;
}
.vw-codepost input { flex: 1 1 14rem; }
.vw-codepost input:focus-visible, .vw-codepost select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.vw-codepost .vw-hinweis { flex: 1 1 100%; }

/* Die Karte zum Drucken: am Bildschirm unsichtbar, im Druck das Einzige.
   Gedruckt wird hell — die Token in css/farben.css sind im Druck die
   hellen Werte. */
.vw-druckkarte { display: none; }

@media print {
  body.vw-druckt * { visibility: hidden; }
  body.vw-druckt .vw-druckkarte, body.vw-druckt .vw-druckkarte * { visibility: visible; }
  body.vw-druckt .vw-druckkarte {
    display: block; position: absolute; left: 0; top: 0; width: 12cm;
    border: 1px solid var(--rand); border-radius: .4cm; padding: .8cm; color: var(--text);
  }
  .vw-druckmarke { font-weight: 700; font-size: 14pt; margin: 0 0 .3cm; }
  .vw-druckwas { margin: 0 0 .3cm; }
}

/* ── Der Reiter „Downloads“ (seit 28.09.2026) ─────────────────── */

/* Dateiname und Prüfsumme brechen um statt die Tabelle zu sprengen — ganz
   lesbar bleiben sie trotzdem: Wer eine SHA-256 vergleicht, braucht jedes
   Zeichen. */
.vw-dateiname { overflow-wrap: anywhere; }
.vw-dateiname .vw-chip { margin-top: .25rem; white-space: nowrap; }
.vw-sha { min-width: 0; }
.vw-shawert { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
              font-size: .78rem; overflow-wrap: anywhere; word-break: break-all; user-select: all;
              max-width: 18rem; }
.vw-sha .vw-hinweis { display: block; }

@media (max-width: 640px) {
  /* Am Handy steht die Prüfsumme unter ihrer Beschriftung, nicht daneben. */
  .vw-dateien td.vw-sha { flex-direction: column; align-items: flex-start; }
  .vw-shawert { max-width: 100%; }
}

/* ── Kleinkram ────────────────────────────────────────────────── */

.vw-leer { color: var(--leise); margin: 0; }
.vw-hinweis { color: var(--leise); font-size: .85rem; margin: 0; }
.vw-meldung { margin: 0; color: var(--text); background: rgba(var(--akzent-rgb), .07);
              border: 1px solid rgba(var(--akzent-rgb), .25); border-radius: .5rem;
              padding: .55rem .75rem; font-size: .92rem; }
.vw-warnung { margin: 0; color: var(--warn-stark); background: var(--warn-flaeche);
              border: 1px solid var(--warn-rand); border-radius: .5rem;
              padding: .55rem .75rem; font-size: .92rem; }

/* ── Am Handy (390 px) ────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Aus der Tabelle werden Karten: Eine sechsspaltige Tabelle auf 390 px
     scrollt sonst waagrecht, und dann sieht man die Adresse nicht mehr. */
  .vw-tabelle, .vw-tabelle tbody, .vw-tabelle tr, .vw-tabelle td { display: block; width: 100%; }
  .vw-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vw-tabelle tr { border-bottom: 1px solid var(--rand); padding: .5rem .2rem; }
  .vw-tabelle tr:last-child { border-bottom: 0; }
  .vw-tabelle td { border-bottom: 0; padding: .2rem .7rem;
                   display: flex; gap: .6rem; justify-content: space-between; align-items: baseline; }
  /* Ohne Spaltenkopf braucht jeder Wert seinen Namen — sonst steht da
     eine nackte 0 und niemand weiss, wovon. `attr(data-name)` nimmt nur
     die Beschriftung aus js/verwaltung.js, nie einen Wert aus den Daten. */
  .vw-tabelle td[data-name]::before {
    content: attr(data-name);
    color: var(--leise);
    font-size: .85rem;
    flex: 0 0 auto;
  }
  .vw-feld { flex-direction: column; gap: 0; }
  .vw-feldwert { text-align: left; }
  .vw-titel { font-size: 1.35rem; }
}

/* ── Der Reiter „3D-Einreichungen“ (seit 28.09.2026) ──────────────
   Je Einreichung ein Kasten: Kopf mit Zustand, Angaben, Beschreibung mit
   ihren eigenen Zeilen, Fotos (vom Server, nur für die Verwaltung),
   Knöpfe und das Feld für die Begründung. Nur Token. */
.vw-einreichung { margin-top: .6rem; }
.vw-einreichungkopf { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.vw-einreichungkopf h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.vw-einreichungfelder { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.vw-einreichungfelder dt { color: var(--leise); font-size: .88rem; }
.vw-einreichungfelder dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.vw-einreichungtext { margin: 0; white-space: pre-line; line-height: 1.55; font-size: .92rem; overflow-wrap: anywhere; }
/* Der Inhalt einer 3MF (seit 28.09.2026, Nachprüfung). Nur Token. */
.vw-einreichunginhalt { font-size: .88rem; }
.vw-einreichunginhalt summary { cursor: pointer; color: var(--leise); }
.vw-einreichunginhalt ul { margin: .35rem 0 0; padding-left: 1.2rem; overflow-wrap: anywhere; }
.vw-einreichungbilder { display: flex; flex-wrap: wrap; gap: .5rem; }
.vw-einreichungbilder img {
  width: 150px; height: 112px; object-fit: cover; border-radius: .5rem;
  border: 1px solid var(--rand); background: var(--flaeche);
}
.vw-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.vw-einreichunggrund { display: grid; gap: .35rem; }
.vw-einreichunggrund label { color: var(--leise); font-size: .88rem; }
.vw-einreichunggrund textarea {
  width: 100%; padding: .5rem .65rem; border-radius: .5rem; border: 1px solid var(--feldrand);
  background: var(--grund); color: var(--text); font: inherit; font-size: .92rem; resize: vertical;
}
.vw-einreichunggrund .knopf { justify-self: start; }
@media (max-width: 560px) {
  .vw-einreichungfelder { grid-template-columns: 1fr; }
  .vw-einreichungfelder dd { margin-bottom: .3rem; }
}