/* ══════════════════════════════════════════════════════════════════════════════════════════════
   3.11.0 — Motive › Medien der Werbekunden (Entwurf `docs/entwurf-3110-medien-der-werbekunden.html` V2)

   Werbekunden-Liste mit Speicherbalken (gelb ab 80 %, rot ab 95 %), Kacheln je Datei mit Marken, Ablagefläche,
   Protokoll. Gezeichnet von `wmAnsicht()` in `oberflaeche.html`.
   ⚠ Die Tokens kommen aus `oberflaeche.html` (`:root`), hier steht keine eigene Farbe.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.wm { display:grid; gap:16px; min-width:0; }
.wm-einl { margin:0; color:var(--tinte2); max-width:78ch; font-size:13.5px; }
/* Befund 4: Sprung zum Protokoll unter der langen Kachelliste. */
.wm-link { border:0; background:none; padding:0; font:inherit; color:var(--akzent-tief); text-decoration:underline; cursor:pointer; white-space:nowrap; }
.wm-link:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; }
.wm-mehr { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; padding:0 14px 14px; font-size:13px; color:var(--tinte2); }
.wm-mehr:empty { display:none; }
.wm-zwei { display:grid; grid-template-columns:320px minmax(0, 1fr); gap:16px; align-items:start; min-width:0; }
@media (max-width:1100px) { .wm-zwei { grid-template-columns:minmax(0, 1fr); } }
/* Liegt rechts ein Fenster (geteilte Ansicht), ist die Spalte schmal — dann untereinander. */
main.mb-geteilt .wm-zwei { grid-template-columns:minmax(0, 1fr); }

.wm-karte { min-width:0; padding:0; overflow:hidden; scroll-margin-top:120px; } /* „Zum Protokoll“: nicht unter der Kopfleiste */
.wm-kk { padding:12px 14px; border-bottom:1px solid var(--linie); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.wm-kk h3 { margin:0; font-size:15px; }
.wm-titel { display:grid; gap:2px; min-width:0; flex:1 1 220px; }
.wm-titel h3 { font-size:17px; overflow-wrap:anywhere; }
.wm-titel small { color:var(--tinte3); font-size:12px; }
.wm-suche { flex:1 1 160px; min-width:0; height:34px; border:1px solid var(--linie2); border-radius:8px; padding:0 10px; background:#fff; font:inherit; }
.wm-dsuche { flex:0 1 200px; }
.wm-lbl { margin-left:auto; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--tinte3); }
.wm-ch { display:inline-flex; gap:8px; align-items:center; font-size:13px; color:var(--tinte2); cursor:pointer; min-height:32px; }
.wm-ch input { width:16px; height:16px; accent-color:var(--akzent); }

/* ── Werbekunden-Liste ── */
.wm-kunden { display:grid; max-height:620px; overflow:auto; }
@media (max-width:1100px) { .wm-kunden { max-height:340px; } }
.wm-kunde { text-align:left; border:0; border-bottom:1px solid var(--linie); background:transparent; padding:10px 14px; cursor:pointer;
  display:grid; gap:4px; font:inherit; color:inherit; width:100%; }
.wm-kunde:hover { background:var(--flaeche2); }
.wm-kunde[aria-pressed="true"] { background:var(--akzent-weich); }
.wm-kunde:focus-visible { outline:2px solid var(--akzent); outline-offset:-2px; }
.wm-kunde small { color:var(--tinte3); font-size:12px; }
.wm-z1 { display:flex; justify-content:space-between; gap:8px; min-width:0; }
.wm-z1 b { overflow-wrap:anywhere; }
.wm-z1 small { flex:none; }
.wm-bib { background:var(--warten-weich); }
.wm-bib[aria-pressed="true"] { background:var(--akzent-weich); }
.wm-balken { display:block; height:6px; border-radius:3px; background:var(--balken-spur); overflow:hidden; }
.wm-balken i { display:block; height:100%; background:var(--ok); }
.wm-balken i.warn { background:var(--warten); }
.wm-balken i.voll { background:var(--stopp); }

/* ── Reiter Alle/Bilder/Entwürfe/Schriften ── */
/* Durchklick 3.11.0, Befund 13: bei 390 px brach die Reihe um („Schriften 0“ allein) — jetzt eine Zeile, waagerecht rollbar. */
.wm-reiter { display:inline-flex; border:1px solid var(--linie2); border-radius:8px; overflow-x:auto; flex-wrap:nowrap; max-width:100%;
  scrollbar-width:thin; }
.wm-reiter button { border:0; background:#fff; padding:6px 12px; cursor:pointer; font:inherit; font-size:13px; min-height:34px; color:var(--tinte);
  white-space:nowrap; flex:none; }
@media (max-width:640px) { .wm-reiter button { padding:6px 9px; } }
.wm-reiter button[aria-pressed="true"] { background:var(--tinte); color:#fff; font-weight:600; }
.wm-reiter small { opacity:.7; margin-left:4px; }

/* ── Ablagefläche ── */
.wm-ablage { margin:14px 14px 0; border:2px dashed var(--linie2); border-radius:10px; padding:12px; display:flex; gap:10px; align-items:center;
  flex-wrap:wrap; color:var(--tinte2); font-size:13px; background:var(--flaeche2); }
.wm-ablage small { flex-basis:100%; color:var(--tinte3); font-size:12px; }
.wm-ablage.drueber { border-color:var(--akzent); background:var(--akzent-weich); }
.wm-fortschritt { margin:12px 14px 0; font-size:12px; color:var(--tinte2); display:grid; gap:4px; }

/* ── Kacheln ── */
.wm-kacheln { padding:14px; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.wm-kacheln > .leer { grid-column:1 / -1; padding:30px 14px; }
.wm-kachel { border:1px solid var(--linie); border-radius:10px; overflow:hidden; background:#fff; display:grid; min-width:0; }
.wm-bild { aspect-ratio:16 / 10; max-width:100%; display:grid; place-items:center; font-size:11px; color:var(--tinte3); position:relative;
  background:var(--flaeche2); overflow:hidden; }
.wm-bild img { width:100%; height:100%; object-fit:contain; display:block; }
.wm-bild.wm-schrift .wm-platz { font-size:20px; color:var(--tinte2); }
.wm-marke { position:absolute; left:6px; top:6px; font-size:10px; font-weight:700; border-radius:999px; padding:1px 7px;
  background:var(--ok-weich); color:var(--ok); max-width:calc(100% - 12px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-marke.wm-betr { left:auto; right:6px; top:auto; bottom:6px; background:var(--akzent-weich); color:var(--akzent-tief); }
.wm-nm { padding:6px 8px 0; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-mt { padding:0 8px 6px; font-size:11px; color:var(--tinte3); }
.wm-ak { display:flex; gap:4px; padding:0 8px 8px; }
.wm-ak button { flex:1; border:1px solid var(--linie2); background:#fff; border-radius:6px; padding:4px 0; font:inherit; font-size:12px; cursor:pointer;
  min-height:30px; color:var(--tinte); }
.wm-ak button:hover { border-color:var(--akzent); }
.wm-ak button.wm-l { color:var(--stopp); border-color:#e7c9c3; }

/* ── Protokoll ── */
.wm-protokoll { padding:6px 14px 12px; display:grid; }
.wm-protokoll > .leer { padding:18px 0; }
.wm-pz { display:grid; grid-template-columns:150px 130px minmax(0, 1fr); gap:10px; padding:7px 0; border-bottom:1px solid var(--linie); font-size:13px; }
.wm-pz:last-child { border-bottom:0; }
.wm-pz small { color:var(--tinte3); }
.wm-pz span:last-child { overflow-wrap:anywhere; }
@media (max-width:640px) { .wm-pz { grid-template-columns:minmax(0, 1fr); gap:2px; } .wm-lbl { margin-left:0; } }

/* ── Fenster: Ansehen, Löschen, Hochladen ── */
.zu-blatt .fp-fenster.fp-fenster-breit { max-width:760px; }
.wm-vorschau { aspect-ratio:16 / 9; max-width:100%; border-radius:8px; display:grid; place-items:center; background:var(--flaeche2);
  overflow:hidden; color:var(--tinte3); margin-bottom:10px; }
.wm-vorschau img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.wm-vorschau-schrift { background:var(--tinte2); color:#fff; font-size:30px; text-align:center; line-height:1.3; padding:12px; }
.wm-info { margin:0 0 8px; color:var(--tinte2); }
.wm-leise { color:var(--tinte3); font-size:12px; }
.wm-warn { background:var(--warten-weich); color:var(--warten); border-radius:8px; padding:8px 10px; font-size:13px; margin:0 0 10px; }
.wm-gewaehlt { background:var(--flaeche2); color:var(--tinte2); border-radius:8px; padding:8px 10px; font-size:13px; margin:0 0 10px; overflow-wrap:anywhere; }
.wm-grund, .wm-notiz { width:100%; }

.wm-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:20px; background:var(--tinte); color:#fff; border-radius:10px;
  padding:10px 14px; font-size:13px; max-width:calc(100vw - 32px); z-index:120; }