/* =============================================================================
 * social.css — Social Media (Beiträge je Unternehmen), Gestaltung nach dem
 * Entwurf „Falax Social – Beiträge je Bereich“. Alle Klassen tragen „sz-“,
 * damit nichts mit dem Rest der App kollidiert.
 * ========================================================================== */
/* Die Farben stehen in einer EIGENEN Regel, die auch außerhalb von .sz gilt.
   GRUND: Fenster (openModal) hängen in #modalRoot — also außerhalb der Social-Seite.
   Dort waren --sz-navy und Co. nicht definiert, und ein Knopf mit
   "background: var(--sz-navy); color: #fff" wurde weiß auf weiß — unsichtbar.
   Wer sz-Klassen in einem Fenster benutzt, hängt "sz-fenster" an den Inhalt. */
.sz, .sz-fenster {
  --sz-navy: #1B2A57; --sz-accent: #EFA22B; --sz-line: #D6D9DE; --sz-line-soft: #EDEFF2;
  --sz-text: #1B2A57; --sz-text-2: #565C66; --sz-text-3: #6B7280; --sz-muted: #8A9099;
  --sz-media: #EBEDF1; --sz-chip: #F4F5F7; --sz-green: #2F7A55; --sz-red: #B3261E;
  --sz-warn-bg: #FDF3E2; --sz-warn-fg: #6B4404; --sz-r: 10px;
}
.sz {
  color: var(--sz-text); display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.4;
}
/* Innerhalb eines Fensters brauchen die sz-Knöpfe dieselben Grundregeln wie auf der
   Seite — sie stehen sonst nur unter ".sz" und greifen dort nicht.
   ACHTUNG BEIM BENENNEN: ".sz-farben" war schon vergeben (der Farbwähler für die
   Firmenfarbe, weiter unten). Die Klasse hier heißt deshalb ".sz-fenster" — sonst
   wurden die Knöpfe zu runden 30-px-Farbtupfern. */
.sz-fenster .sz-knopf { height: 38px; padding: 0 14px; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; background: #fff; border: 1px solid var(--sz-line);
  border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500; color: var(--sz-text);
  cursor: pointer; white-space: nowrap; }
.sz-fenster .sz-knopf.sz-haupt { background: var(--sz-navy); border-color: var(--sz-navy); color: #fff; font-weight: 600; }
.sz-fenster .sz-waehler { display: flex; gap: 8px; flex-wrap: wrap; }
.sz-fenster .sz-waehler label { height: 34px; padding: 0 12px; display: inline-flex; align-items: center;
  border: 1px solid var(--sz-line); border-radius: 17px; font-size: 13px; cursor: pointer; background: #fff; }
.sz-fenster .sz-waehler label:hover { border-color: var(--sz-navy); }
.sz-fenster .sz-eingabe { height: 38px; width: 100%; padding: 0 12px; background: #fff;
  border: 1px solid var(--sz-line); border-radius: 8px; font: inherit; font-size: 13px; }
.sz-fenster .sz-beschriftung { font-size: 11.5px; font-weight: 600; color: var(--sz-text-2);
  text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 4px; }
.sz-fenster .sz-hilfe { font-size: 12px; color: var(--sz-muted); }
.sz-fenster .sz-feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sz-fenster .sz-feld > label { font-size: 11.5px; font-weight: 600; color: var(--sz-text-2);
  text-transform: uppercase; letter-spacing: .5px; }
.sz * { box-sizing: border-box; }
.sz h1, .sz h2, .sz h3 { margin: 0; }
.sz button, .sz input, .sz select, .sz textarea { font: inherit; color: inherit; }
.sz button { cursor: pointer; }
.sz a { color: inherit; }

/* ---------- Kopf: Titel + Unter-Navigation ---------- */
.sz-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sz-marke { display: flex; flex-direction: column; gap: 2px; }
.sz-marke .sz-titel { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; color: var(--sz-navy); display: inline-flex; align-items: center; gap: 9px; }
.sz-marke .sz-unter { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--sz-muted); }
.sz-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.sz-nav button { height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; border: 1px solid transparent; background: transparent; font-size: 13.5px; color: var(--sz-text-3); font-weight: 500; }
.sz-nav button:hover { background: #fff; border-color: var(--sz-line); color: var(--sz-navy); }
.sz-nav button.an { background: var(--sz-navy); color: #fff; font-weight: 600; }
.sz-nav .sz-zahl { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--sz-accent); color: var(--sz-navy); border-radius: 10px; font-size: 11px; font-weight: 700; }
.sz-nav .sz-neu { background: var(--sz-accent); color: var(--sz-navy); border-color: var(--sz-accent); font-weight: 600; }
.sz-nav .sz-neu:hover { filter: brightness(1.05); background: var(--sz-accent); color: var(--sz-navy); }

/* ---------- Bereichs-Reiter ---------- */
.sz-reiter { height: 50px; padding: 0 12px; background: #fff; border: 1px solid var(--sz-line); border-radius: var(--sz-r); display: flex; align-items: stretch; gap: 2px; overflow-x: auto; }
.sz-reiter > button { flex-shrink: 0; padding: 0 13px; display: flex; align-items: center; gap: 8px; background: transparent; border: none; border-bottom: 3px solid transparent; border-top: 3px solid transparent; font-size: 13.5px; color: var(--sz-text-3); white-space: nowrap; }
.sz-reiter > button:hover { color: var(--sz-navy); }
.sz-reiter > button.an { color: var(--sz-navy); font-weight: 600; border-bottom-color: var(--sz-accent); }
.sz-punkt { width: 9px; height: 9px; border-radius: 5px; flex-shrink: 0; display: inline-block; }
.sz-reiter .sz-hinweis { margin-left: auto; display: flex; align-items: center; font-size: 12px; color: var(--sz-muted); white-space: nowrap; padding-left: 12px; }

/* ---------- Seitenkopf + Werkzeuge ---------- */
.sz-seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.sz-seitenkopf h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; color: var(--sz-navy); }
.sz-seitenkopf .sz-unter { font-size: 13px; color: var(--sz-text-3); margin-top: 3px; }
.sz-werkzeuge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sz-eingabe { height: 38px; padding: 0 12px; background: #fff; border: 1px solid var(--sz-line); border-radius: 8px; font-size: 13px; color: var(--sz-text); outline: none; }
.sz-eingabe:focus { border-color: var(--sz-navy); }
textarea.sz-eingabe { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.sz-knopf { height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #fff; border: 1px solid var(--sz-line); border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--sz-text); text-decoration: none; white-space: nowrap; }
.sz-knopf:hover { border-color: #b9bec7; }
.sz-knopf.sz-haupt { background: var(--sz-navy); border-color: var(--sz-navy); color: #fff; font-weight: 600; }
.sz-knopf.sz-haupt:hover { background: #24376e; }
.sz-knopf.sz-akzent { background: var(--sz-accent); border-color: var(--sz-accent); color: var(--sz-navy); font-weight: 600; }
.sz-knopf.sz-gruen { background: var(--sz-green); border-color: var(--sz-green); color: #fff; font-weight: 600; }
.sz-knopf.sz-rot { color: var(--sz-red); }
.sz-knopf.sz-klein { height: 32px; padding: 0 10px; font-size: 12px; }
.sz-knopf:disabled { opacity: .5; cursor: default; }

/* Filter-Pillen */
.sz-pillen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sz-pille { height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border-radius: 17px; font-size: 13px; background: #fff; color: var(--sz-text-2); border: 1px solid var(--sz-line); }
.sz-pille.an { background: var(--sz-navy); color: #fff; border-color: var(--sz-navy); font-weight: 600; }
.sz-pille .sz-punkt { width: 8px; height: 8px; }

/* ---------- Kanban ---------- */
.sz-spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.sz-spalte { display: flex; flex-direction: column; gap: 10px; min-width: 0; border-radius: var(--sz-r); }
.sz-spalte.sz-ziel { outline: 2px dashed var(--sz-navy); outline-offset: 4px; }
.sz-spalte .sz-spaltenkopf { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.sz-spalte h2 { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--sz-text-2); }
.sz-spalte .sz-anzahl { font-size: 12px; font-weight: 600; color: var(--sz-muted); }
.sz-karten { display: flex; flex-direction: column; gap: 10px; min-height: 76px; }
.sz-leer { min-height: 76px; border: 1px dashed var(--sz-line); border-radius: var(--sz-r); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--sz-muted); padding: 10px; text-align: center; }

.sz-karte { background: #fff; border: 1px solid var(--sz-line); border-radius: var(--sz-r); padding: 10px; display: flex; flex-direction: column; gap: 9px; cursor: pointer; transition: box-shadow .12s, transform .12s; }
.sz-karte:hover { box-shadow: 0 4px 14px rgba(27,42,87,.10); transform: translateY(-1px); }
.sz-karte.sz-zieht { opacity: .5; }
.sz-karte .sz-medien { height: 88px; border-radius: 6px; background: var(--sz-media); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; overflow: hidden; position: relative; }
.sz-karte .sz-medien img, .sz-karte .sz-medien video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sz-karte .sz-medien .sz-label { font-size: 10px; font-weight: 500; color: var(--sz-muted); }
.sz-karte .sz-medien .sz-label.sz-ueber { position: absolute; right: 6px; bottom: 6px; background: rgba(27,42,87,.85); color: #fff; padding: 2px 6px; border-radius: 4px; }
.sz-karte h3 { font-size: 13.5px; font-weight: 600; line-height: 1.32; color: var(--sz-navy); overflow-wrap: anywhere; }
.sz-chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sz-chip { height: 21px; padding: 0 7px; display: inline-flex; align-items: center; gap: 5px; background: var(--sz-chip); border-radius: 4px; font-size: 10.5px; font-weight: 500; color: var(--sz-text-2); white-space: nowrap; }
.sz-chip .sz-punkt { width: 6px; height: 6px; }
.sz-chip.sz-warn { background: var(--sz-warn-bg); color: var(--sz-warn-fg); font-weight: 600; }
.sz-chip.sz-ok { background: #E6F2EC; color: var(--sz-green); font-weight: 600; }
.sz-chip.sz-fehler { background: #FBE9E7; color: var(--sz-red); font-weight: 600; }
.sz-karte .sz-zeit { display: flex; align-items: center; gap: 6px; padding-top: 7px; border-top: 1px solid var(--sz-line-soft); font-size: 11.5px; color: var(--sz-text-3); }

/* ---------- Übersicht ---------- */
.sz-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sz-kachel { background: #fff; border: 1px solid var(--sz-line); border-radius: var(--sz-r); padding: 16px; display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--sz-navy); cursor: pointer; }
.sz-kachel:hover { box-shadow: 0 4px 14px rgba(27,42,87,.10); }
.sz-kachel h2 { font-size: 17px; font-weight: 700; color: var(--sz-navy); }
.sz-kachel .sz-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sz-kachel .sz-zahl { background: #F4F5F7; border-radius: 6px; padding: 8px 4px; text-align: center; }
.sz-kachel .sz-zahl b { display: block; font-size: 18px; font-weight: 700; color: var(--sz-navy); }
.sz-kachel .sz-zahl span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--sz-muted); }
.sz-kachel .sz-naechste { font-size: 12.5px; color: var(--sz-text-2); display: flex; flex-direction: column; gap: 4px; }
.sz-kachel .sz-naechste b { color: var(--sz-navy); font-weight: 600; }

.sz-liste { display: flex; flex-direction: column; gap: 10px; }
.sz-zeile { background: #fff; border: 1px solid var(--sz-line); border-radius: var(--sz-r); padding: 12px 14px; display: flex; align-items: center; gap: 14px; }
.sz-zeile .sz-vorschau { width: 72px; height: 54px; border-radius: 6px; background: var(--sz-media); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--sz-muted); font-size: 10px; }
.sz-zeile .sz-vorschau img, .sz-zeile .sz-vorschau video { width: 100%; height: 100%; object-fit: cover; }
.sz-zeile .sz-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sz-zeile .sz-mitte h3 { font-size: 14px; font-weight: 600; color: var(--sz-navy); }
.sz-zeile .sz-meta { font-size: 12px; color: var(--sz-text-3); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sz-zeile .sz-aktionen { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Formular ---------- */
.sz-formular { background: #fff; border: 1px solid var(--sz-line); border-radius: var(--sz-r); padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
.sz-formular .sz-haupt, .sz-formular .sz-neben { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sz-feld { display: flex; flex-direction: column; gap: 6px; }
/* Feld-Beschriftungen.
   ZWEI Fallstricke stecken in diesem einen Selektor:
   a) `.sz-ablage` ist ebenfalls ein <label> und ein direktes Kind von `.sz-feld` —
      ohne das :not() erwischt die Regel den ganzen Ablage-Kasten, und der stand
      dadurch in winzigen GROSSBUCHSTABEN da („BILDER ODER VIDEOS HIERHER ZIEHEN
      ODER TIPPEN ZUM AUSWÄHLEN…"). So war er nie gemeint.
   b) Seit dem KI-Knopf sitzt die Beschriftung „Text" in `.sz-feldkopf` und ist damit
      KEIN direktes Kind mehr — sie fiel aus der Regel heraus und stand als einzige
      in 14 px dunkel da. Deshalb steht `.sz-feldkopf > label` ausdrücklich dabei. */
.sz-feld > label:not(.sz-ablage), .sz-feld .sz-feldkopf > label, .sz-feld .sz-beschriftung {
  font-size: 11.5px; font-weight: 600; color: var(--sz-text-2); text-transform: uppercase; letter-spacing: .5px; }
.sz-feld .sz-hilfe { font-size: 12px; color: var(--sz-muted); }
.sz-feld .sz-eingabe { width: 100%; }
.sz-waehler { display: flex; gap: 8px; flex-wrap: wrap; }
.sz-waehler label { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--sz-line); border-radius: 18px; font-size: 13px; cursor: pointer; background: #fff; font-weight: 500; color: var(--sz-text-2); text-transform: none; letter-spacing: 0; }
.sz-waehler label.an { background: var(--sz-navy); border-color: var(--sz-navy); color: #fff; }
.sz-waehler label.sz-aus { opacity: .55; }
.sz-waehler input { display: none; }
.sz-status-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sz-status-wahl label { height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--sz-line); border-radius: 8px; font-size: 12.5px; cursor: pointer; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--sz-text-2); }
.sz-status-wahl label.an { border-color: var(--sz-navy); background: #EEF1F8; font-weight: 600; color: var(--sz-navy); }
.sz-status-wahl input { display: none; }
.sz-medien-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.sz-medium { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; background: var(--sz-media); overflow: hidden; border: 1px solid var(--sz-line); }
.sz-medium img, .sz-medium video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sz-medium .sz-weg { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 11px; border: none; background: rgba(27,42,87,.85); color: #fff; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
/* Dauer nach OBEN LINKS. Die untere Zeile gehört jetzt ganz dem Knopf „Bild wählen" —
   bei einer 113 px breiten Kachel am Telefon ist unten kein Platz für beides, und das
   Löschkreuz sitzt oben rechts, oben links ist also frei. */
.sz-medium .sz-dauer { position: absolute; left: 4px; top: 4px; background: rgba(27,42,87,.85); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; }
/* Der Ablage-Kasten. Eigene Typografie, damit die Feld-Regel oben ihn nicht mehr
   in Versalien zwingt: eine fette Zeile, darunter klein die Formate. */
.sz-ablage { border: 1.5px dashed #c3cbd6; border-radius: 10px; padding: 16px 18px;
  text-align: center; color: var(--sz-muted); cursor: pointer; background: #FAFBFC;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0;
  transition: border-color .12s, background .12s; }
.sz-ablage:hover { border-color: var(--sz-navy); background: #F4F6FA; }
.sz-ablage.sz-ueber { border-color: var(--sz-navy); border-style: solid; background: #EEF1F8; color: var(--sz-navy); }
.sz-ablage input { display: none; }
.sz-ablage b { color: var(--sz-navy); font-size: 14px; font-weight: 600;
  text-transform: none; letter-spacing: 0; }
.sz-ablage .ico { color: var(--sz-navy); opacity: .7; margin-bottom: 2px; }
.sz-ablage .sz-formate-liste { font-size: 11.5px; color: #8A9099; }
.sz-formular .sz-aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 8px; border-top: 1px solid var(--sz-line-soft); }
.sz-formular .sz-aktionen .sz-rechts { margin-left: auto; }
.sz-farben { display: flex; gap: 8px; flex-wrap: wrap; }
.sz-farben button { width: 30px; height: 30px; border-radius: 15px; border: 3px solid transparent; padding: 0; }
.sz-farben button.an { border-color: var(--sz-navy); box-shadow: 0 0 0 2px #fff inset; }
.sz-hinweisbox { background: var(--sz-warn-bg); color: var(--sz-warn-fg); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; }
.sz-infobox { background: #EEF1F8; color: var(--sz-navy); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; }
.sz-fehlerbox { background: #FBE9E7; color: var(--sz-red); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; }
.sz-ergebnisse { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.sz-ergebnisse div { display: flex; gap: 8px; align-items: flex-start; }
.sz-ergebnisse a { color: var(--sz-navy); }
.sz-fortschritt { height: 6px; background: var(--sz-line-soft); border-radius: 3px; overflow: hidden; }
.sz-fortschritt div { height: 100%; background: var(--sz-navy); width: 0; transition: width .2s; }

/* ---------- Kalender ---------- */
.sz-kalender { background: #fff; border: 1px solid var(--sz-line); border-radius: var(--sz-r); overflow: hidden; }
.sz-kalender .sz-wochentage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--sz-line); }
.sz-kalender .sz-wochentage div { padding: 8px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--sz-muted); }
/* minmax(0,1fr) + min-width:0 (01.10.2026): Ein Grid-Kind ist sonst mindestens so breit wie
   sein Inhalt — lange, nicht umbrechende Titel machten die Spalten breiter als die Seite,
   und der Sonntag hing unsichtbar rechts außerhalb. */
.sz-kalender .sz-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sz-kalender .sz-tag { min-width: 0; min-height: 132px; border-right: 1px solid var(--sz-line-soft); border-bottom: 1px solid var(--sz-line-soft); padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.sz-kalender .sz-tag .sz-nummer { display: flex; align-items: baseline; gap: 5px; }
.sz-kalender .sz-tag .sz-monatsname { font-size: 10.5px; font-weight: 500; color: var(--sz-muted); }
.sz-kalender .sz-tag.sz-heute { background: #FFFBF2; }
/* Die Wochenkarte in klein — Vorschaubild, Uhrzeit, Art, Kanalpunkte, Titel in zwei Zeilen. */
.sz-kalender .sz-wkarte-monat { padding: 5px; gap: 4px; border-radius: 7px; flex-direction: row; align-items: flex-start; }
.sz-kalender .sz-wkarte-monat .sz-thumb.hoch { width: 36px; height: 64px; border-radius: 4px; }
.sz-kalender .sz-wkarte-monat .sz-thumb.quer { width: 64px; height: 36px; border-radius: 4px; }
.sz-kalender .sz-wkarte-monat .sz-thumb.quadrat { width: 44px; height: 44px; border-radius: 4px; }
.sz-kalender .sz-wkarte-monat .sz-thumb .sz-artmarke { font-size: 7.5px; padding: 0 3px; left: 2px; top: 2px; }
.sz-kalender .sz-wkarte-monat .sz-thumb .sz-dauer { display: none; }
.sz-kalender .sz-wkarte-monat .sz-wrechts { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.sz-kalender .sz-wkarte-monat .sz-wkarte-kopf { gap: 4px; }
.sz-kalender .sz-wkarte-monat .sz-wkarte-uhr { font-size: 11.5px; }
.sz-kalender .sz-wkarte-monat .sz-wmarke { font-size: 8.5px; padding: 0 4px; }
.sz-kalender .sz-wkarte-monat h3 { font-size: 11px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sz-kalender .sz-wkarte-monat .sz-wkarte-bereich { font-size: 10px; }
.sz-kalender .sz-tag:nth-child(7n) { border-right: none; }
.sz-kalender .sz-tag.sz-fremd { background: #FAFBFC; }
.sz-kalender .sz-tag .sz-nummer { font-size: 12px; font-weight: 600; color: var(--sz-text-2); }
.sz-kalender .sz-tag.sz-fremd .sz-nummer { color: var(--sz-muted); }
.sz-kalender .sz-tag.sz-heute .sz-nummer span { background: var(--sz-accent); color: var(--sz-navy); border-radius: 10px; padding: 0 6px; }
.sz-kalender .sz-eintrag { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 4px; font-size: 11px; color: var(--sz-navy); background: #F4F5F7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-left: 3px solid var(--sz-navy); cursor: pointer; }
.sz-kalender .sz-eintrag:hover { background: #E9ECF2; }
.sz-kalender .sz-eintrag.sz-vorschlag { border-left-style: dashed; color: var(--sz-text-3); }
.sz-kalender .sz-eintrag .sz-uhr { font-weight: 600; flex-shrink: 0; }
.sz-kalender .sz-eintrag .sz-t { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Kanäle ---------- */
.sz-kanal { background: #fff; border: 1px solid var(--sz-line); border-radius: var(--sz-r); padding: 12px 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sz-kanal .sz-netz { width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.sz-kanal .sz-infos { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.sz-kanal .sz-infos b { font-size: 14px; color: var(--sz-navy); }
.sz-kanal .sz-infos span { font-size: 12px; color: var(--sz-text-3); }
.sz-kanal .sz-infos .sz-f { color: var(--sz-red); }

/* ---------- Handy-Upload ---------- */
.sz-handy { max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.sz-handy .sz-ablage { padding: 34px 18px; font-size: 15px; }
.sz-handy .sz-ablage b { display: block; font-size: 17px; margin-bottom: 4px; }
.sz-bereichswahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sz-bereichswahl button { min-height: 48px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--sz-line); border-radius: 8px; font-size: 13.5px; font-weight: 500; background: #fff; text-align: left; color: var(--sz-text); }
.sz-bereichswahl button.an { border-color: var(--sz-navy); background: #EEF1F8; font-weight: 600; }

/* ---------- Einstellungen ---------- */
.sz-karten-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.sz-box { background: #fff; border: 1px solid var(--sz-line); border-radius: var(--sz-r); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sz-box h2 { font-size: 16px; font-weight: 700; color: var(--sz-navy); display: flex; align-items: center; gap: 8px; }
.sz-box ol { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--sz-text-2); line-height: 1.5; }
.sz-box code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #F4F5F7; padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1100px) { .sz-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sz-formular { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .sz-spalten { grid-template-columns: 1fr; }
  .sz-seitenkopf h1 { font-size: 20px; }
  .sz-kalender .sz-tag { min-height: 60px; padding: 3px; gap: 3px; }
  .sz-kalender .sz-eintrag .sz-t { display: none; }
  /* Am Handy nur das Vorschaubild mit Uhrzeit darunter — Text passt in 1/7 der Breite nicht. */
  .sz-kalender .sz-wkarte-monat { padding: 2px; flex-direction: column; align-items: center; gap: 1px; }
  .sz-kalender .sz-wkarte-monat .sz-thumb.hoch { width: 26px; height: 46px; }
  .sz-kalender .sz-wkarte-monat .sz-thumb.quer { width: 44px; height: 25px; }
  .sz-kalender .sz-wkarte-monat .sz-thumb.quadrat { width: 32px; height: 32px; }
  .sz-kalender .sz-wkarte-monat .sz-thumb .sz-artmarke { display: none; }
  .sz-kalender .sz-wkarte-monat h3, .sz-kalender .sz-wkarte-monat .sz-wmarke, .sz-kalender .sz-wkarte-monat .sz-wpunkte, .sz-kalender .sz-wkarte-monat .sz-wkarte-bereich { display: none; }
  .sz-kalender .sz-wkarte-monat .sz-wkarte-uhr { font-size: 9.5px; }
  .sz-zeile { flex-wrap: wrap; }
  .sz-zeile .sz-aktionen { width: 100%; justify-content: flex-start; }
  .sz-bereichswahl { grid-template-columns: 1fr; }
  .sz-nav button { height: 34px; padding: 0 9px; font-size: 12.5px; }
}

/* ---- Video abspielen, Vorschaubild, KI-Text (v393) ---- */

/* Das Abspiel-Dreieck sagt, dass die Kachel etwas tut, wenn man sie antippt.
   Vorher war sie stumm — man konnte nicht prüfen, was man verschickt. */
.sz-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, .55);
  color: #fff; font-size: 15px; line-height: 38px; text-align: center;
  pointer-events: none; }
.sz-medium { cursor: pointer; }

/* Vorschaubild festlegen — unten RECHTS.
   Vorher stand er unten links auf denselben Koordinaten wie die Dauer-Blase
   (.sz-dauer, left/bottom 4px) und lag als kleines dunkles Quadrat darüber: als
   Knopf nicht zu erkennen, die Dauer halb verdeckt. Deshalb die andere Ecke, eine
   Beschriftung und ein heller Rand. */
.sz-thumbknopf { position: absolute; right: 5px; bottom: 5px; height: 24px;
  border: none; border-radius: 12px;
  /* HELL, nicht dunkel: Auf einem Foto oder Videobild geht eine dunkle Fläche
     unter — genau daran lag es, dass der Knopf „nicht da" schien. Weiß mit
     dunklem Text und einem Schatten liest sich auf jedem Bild. */
  background: #fff; color: #1B2A57; font: inherit; font-weight: 600;
  font-size: 11px; line-height: 1; padding: 0 9px; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sz-thumbknopf:hover { background: #eef2f7; }

/* Der Betrachter */
.sz-schau { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .88);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.sz-schau-innen { max-width: min(96vw, 1000px); max-height: 92vh; display: flex;
  flex-direction: column; gap: 10px; }
.sz-schau video, .sz-schau img { max-width: 100%; max-height: 82vh; border-radius: 12px;
  background: #000; display: block; margin: 0 auto; }
.sz-schau-fuss { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; color: #fff; font-size: 13px; }
.sz-schau-zu { border: 1px solid rgba(255, 255, 255, .35); background: transparent;
  color: #fff; border-radius: 9px; padding: 7px 14px; cursor: pointer; font: inherit; }
.sz-schau-zu:hover { background: rgba(255, 255, 255, .12); }

/* KI-Knopf neben der Feldbeschriftung */
.sz-feldkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sz-ki { border: 1px solid var(--sz-linie, #d6d9de); background: #fff; border-radius: 9px;
  padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sz-ki:hover:not(:disabled) { background: #f4f6f5; }
.sz-ki:disabled { opacity: .6; cursor: default; }

@media (max-width: 560px) {
  .sz-schau { padding: 8px; }
  .sz-schau video, .sz-schau img { max-height: 74vh; }
}

/* ---------------------------------------------------------------------------
   Seitenverhältnis: auf der Kachel und als Klartextzeile darunter.
   Belegte Stellen der Kachel: Dauer oben links, Löschkreuz oben rechts,
   „Bild wählen" unten rechts.
   Die Marke steht deshalb UNTER der Dauer und nicht unten links: Bei 118 px
   Kachelbreite passen Marke und „Bild wählen" nicht in dieselbe Zeile — die Marke
   verschwand zur Hälfte hinter dem Knopf.
   -------------------------------------------------------------------------- */
.sz-medium .sz-format { position: absolute; left: 4px; top: 24px;
  background: rgba(27, 42, 87, .85); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .02em; padding: 2px 6px; border-radius: 4px; }
/* Bei einem BILD steht keine Dauer darüber — dann rückt die Marke nach oben. */
.sz-medium:not(:has(.sz-dauer)) .sz-format { top: 4px; }
/* 9:16 ist das Format, das ohne Beschneiden als Reel, TikTok und Short durchgeht —
   deshalb grün statt blau: ein Blick genügt. */
.sz-medium .sz-format-hoch { background: rgba(47, 122, 85, .9); }

.sz-formate { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.sz-formatzeile { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sz-ink, #1B2A57); }
.sz-formatmarke { flex: 0 0 auto; min-width: 42px; text-align: center;
  background: #eef1f6; color: #1B2A57; font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 5px; }
.sz-formatmarke.sz-format-hoch { background: #dff0e6; color: #1d5c3c; }

/* Hinweis = erklärt nur, was passiert. Warnung = das Ergebnis leidet sichtbar.
   Bewusst dieselbe Farbgebung wie im Rechnungsversand (blau bzw. gelb). */
.sz-fmt-hinweis, .sz-fmt-warnung { font-size: 12.5px; line-height: 1.45;
  padding: 7px 10px; border-radius: 7px; border-left: 3px solid; }
.sz-fmt-hinweis { background: #eaf1fb; border-color: #2f6fed; color: #1c3f7d; }
.sz-fmt-warnung { background: #fdf4e3; border-color: #EFA22B; color: #6b4a08; }

@media (max-width: 560px) {
  .sz-formatzeile { font-size: 12px; }
  .sz-fmt-hinweis, .sz-fmt-warnung { font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   Abschnitte im Beitrag — statt einer flachen Reihe aus zehn Feldern.
   Nummern folgen der Lesereihenfolge: am PC links 1 und 2, rechts 3 und 4;
   am Telefon rutscht die rechte Spalte darunter, also 1-2-3-4 von oben nach unten.
   -------------------------------------------------------------------------- */
.sz-abschnitt { border: 1px solid var(--sz-line); border-radius: 10px; background: #fff; overflow: hidden; }
.sz-abschnitt + .sz-abschnitt { margin-top: 14px; }
.sz-abschnitt-kopf { display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: #F7F9FB; border-bottom: 1px solid var(--sz-line-soft); }
.sz-abschnitt-nr { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sz-navy); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.sz-abschnitt-nr.sz-nr-ergebnis { background: var(--sz-gruen, #2F7A55); }
.sz-abschnitt-titel { font-size: 14px; font-weight: 700; color: var(--sz-navy); line-height: 1.2; }
.sz-abschnitt-unter { font-size: 11.5px; color: var(--sz-muted); margin-top: 1px; }
.sz-abschnitt-koerper { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
/* Die Spalten enthalten jetzt Abschnitte, keine losen Felder mehr — der eigene
   Abstand der Abschnitte genügt. */
.sz-formular .sz-haupt, .sz-formular .sz-neben { gap: 0; }

/* Schmale Ablage, sobald schon etwas hochgeladen ist. */
.sz-ablage.sz-ablage-klein { flex-direction: row; justify-content: center; gap: 8px;
  padding: 10px 14px; }
.sz-ablage.sz-ablage-klein b { font-size: 12.5px; }
.sz-ablage.sz-ablage-klein .sz-formate-liste, .sz-ablage.sz-ablage-klein > div:not(.sz-formate-liste) { display: none; }
.sz-ablage.sz-ablage-klein .ico { margin-bottom: 0; }

/* Warnungen nach Kanal gebündelt: der Kanalname einmal, darunter die Punkte. */
.sz-fmt-kanal { display: flex; align-items: center; gap: 6px; font-weight: 700;
  margin-bottom: 3px; }
.sz-fmt-punkte { margin: 2px 0 0; padding-left: 17px; }
.sz-fmt-punkte li { margin: 2px 0; }

@media (max-width: 560px) {
  .sz-abschnitt-koerper { padding: 12px; gap: 12px; }
  .sz-abschnitt-kopf { padding: 10px 12px; }
  .sz-abschnitt-titel { font-size: 13.5px; }
}

/* ---------------------------------------------------------------------------
   Kalender: Wochenansicht mit sieben Tagesspalten (Vorgabe) und Umschalter.
   -------------------------------------------------------------------------- */
.sz-kalnav { display: inline-flex; border: 1px solid var(--sz-line); border-radius: 8px; overflow: hidden; background: #fff; }
.sz-kalnav .sz-knopf { border: none; border-radius: 0; height: 36px; }
.sz-kalnav .sz-knopf + .sz-knopf { border-left: 1px solid var(--sz-line); }
.sz-umschalter { display: inline-flex; border: 1px solid var(--sz-line); border-radius: 8px; overflow: hidden; background: #fff; }
.sz-umschalter .sz-knopf { border: none; border-radius: 0; height: 36px; min-width: 74px; }
.sz-umschalter .sz-knopf + .sz-knopf { border-left: 1px solid var(--sz-line); }
.sz-umschalter .sz-knopf.an { background: var(--sz-navy); color: #fff; font-weight: 600; }

/* KEIN align-items: start — die Tagesspalten sollen gleich hoch sein, sonst steht
   eine Spalte mit zwei Beiträgen doppelt so hoch wie die leere daneben und die
   Woche sieht ausgefranst aus. */
.sz-wochenraster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.sz-wtag { background: #fff; border: 1px solid var(--sz-line); border-radius: var(--sz-r); overflow: hidden; min-width: 0; }
/* Der heutige Tag wird hervorgehoben — sonst sucht man ihn jedes Mal. */
.sz-wtag.sz-wheute { border-color: var(--sz-navy); box-shadow: 0 0 0 1px var(--sz-navy); }
.sz-wtag-kopf { padding: 9px 11px; border-bottom: 1px solid var(--sz-line-soft); }
.sz-wtag-name { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--sz-muted); }
.sz-wtag-zahl { font-size: 21px; font-weight: 700; color: var(--sz-navy); line-height: 1.1; }
.sz-wtag.sz-wheute .sz-wtag-name, .sz-wtag.sz-wheute .sz-wtag-zahl { color: var(--sz-navy); }
.sz-wtag-koerper { padding: 9px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }

/* Beitragskarte in der Tagesspalte. Die Farbe kommt vom STATUS — orange wartet auf
   Freigabe, blau ist geplant, grün ist raus, grau ist noch Entwurf. */
.sz-wkarte { border: 1px solid var(--sz-line); border-radius: 8px; padding: 9px;
  display: flex; flex-direction: column; gap: 5px; cursor: pointer; background: #fff;
  transition: box-shadow .12s, transform .12s; }
.sz-wkarte:hover { box-shadow: 0 4px 14px rgba(27,42,87,.12); transform: translateY(-1px); }
.sz-wkarte.sz-w-freigabe { background: #FDF3E2; border-color: #EFA22B; }
.sz-wkarte.sz-w-geplant  { background: #EEF1F8; border-color: #C3CCE4; }
.sz-wkarte.sz-w-live     { background: #E9F4EE; border-color: #9DC9B2; }
.sz-wkarte.sz-w-entwurf  { background: #FAFBFC; border-style: dashed; }
.sz-wkarte-bereich { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sz-text-2); font-weight: 500; }
.sz-wkarte-kopf { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sz-wkarte-uhr { font-size: 13px; font-weight: 700; color: var(--sz-navy); font-variant-numeric: tabular-nums; }
.sz-wkarte-status { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--sz-text-2); }
.sz-wkarte h3 { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--sz-navy); overflow-wrap: anywhere; }
.sz-wkarte-fuss { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sz-wmarke { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  background: #fff; border: 1px solid var(--sz-line); color: var(--sz-text-2); padding: 1px 5px; border-radius: 4px; }
.sz-wkanaele { font-size: 11px; color: var(--sz-text-2); overflow-wrap: anywhere; }

/* „+ Beitrag" steht in JEDER Spalte — auch in vollen, man plant oft mehrere am Tag. */
.sz-wneu { border: 1px dashed var(--sz-line); background: transparent; border-radius: 8px;
  padding: 10px 6px; font-size: 12px; color: var(--sz-muted); width: 100%; }
.sz-wneu:hover { border-color: var(--sz-navy); color: var(--sz-navy); background: #F7F9FB; }

.sz-legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--sz-text-2); padding: 2px; }
.sz-legende > span { display: inline-flex; align-items: center; gap: 6px; }
.sz-legende-punkt { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Tablet: vier Spalten, die Woche bricht in zwei Zeilen um — sieben Spalten auf
   768 px ergeben 95 px je Tag, da passt kein Titel mehr hinein. */
@media (max-width: 1100px) { .sz-wochenraster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sz-wochenraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Telefon: die Tage untereinander, Kopf und Karten nebeneinander — als Spalten wäre
   jeder Tag nur noch ein schmaler Streifen. */
@media (max-width: 520px) {
  .sz-wochenraster { grid-template-columns: 1fr; gap: 8px; }
  .sz-wtag { display: flex; }
  .sz-wtag-kopf { flex: 0 0 62px; border-bottom: none; border-right: 1px solid var(--sz-line-soft); display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .sz-wtag-koerper { flex: 1 1 auto; min-height: 0; padding: 8px; }
  .sz-wtag-zahl { font-size: 19px; }
}

/* ---------------------------------------------------------------------------
   Balken während einer laufenden Veröffentlichung.
   Vorher war minutenlang nichts zu sehen außer einer kleinen Marke an der Karte —
   und die Seite zeichnete sich alle 3 Sekunden komplett neu. Jetzt steht hier,
   was läuft und wie lange schon; neu gezeichnet wird nur bei echter Änderung.
   -------------------------------------------------------------------------- */
.sz-laufbalken { display: flex; align-items: center; gap: 12px;
  background: #EEF1F8; border: 1px solid #C3CCE4; border-radius: var(--sz-r);
  padding: 11px 14px; color: var(--sz-navy); font-size: 13px; }
.sz-laufbalken b { font-size: 13.5px; }
.sz-laufunter { font-size: 12px; color: var(--sz-text-2); margin-top: 2px; }
.sz-laufuhr { margin-left: auto; font-size: 12.5px; font-weight: 600;
  color: var(--sz-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sz-laufrad { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #C3CCE4; border-top-color: var(--sz-navy);
  animation: sz-dreh .9s linear infinite; }
@keyframes sz-dreh { to { transform: rotate(360deg); } }
/* Wer Bewegung im Bild nicht mag, bekommt keinen sich drehenden Ring. */
@media (prefers-reduced-motion: reduce) { .sz-laufrad { animation: none; } }
@media (max-width: 560px) {
  .sz-laufbalken { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .sz-laufuhr { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------------------
   Vorschau: der Beitrag so, wie ihn das Netzwerk zeigt.
   Die Maße sind bewusst nah am Original (Instagram-Feed ist rund 470 px breit),
   damit die Kürzung der Bildunterschrift an derselben Stelle greift wie dort.
   -------------------------------------------------------------------------- */
.vs-reiter { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.vs-reiter .sz-knopf.an { background: var(--sz-navy); border-color: var(--sz-navy); color: #fff; font-weight: 600; }
.vs-buehnenrand { display: flex; justify-content: center; background: var(--sz-chip); border-radius: var(--sz-r); padding: 14px; }
.vs-karte { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--sz-line);
  border-radius: 10px; overflow: hidden; color: #1B2A57; }

.vs-kopf { display: flex; align-items: center; gap: 9px; padding: 9px 11px; }
.vs-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.vs-konto { font-size: 13px; font-weight: 600; }
.vs-ort { font-size: 11px; color: var(--sz-muted); }

.vs-bild { position: relative; width: 100%; background: #111; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.vs-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* „Ganzes Bild zeigen": derselbe Rahmen, aber nichts wird abgeschnitten — so sieht
   man unmittelbar, WAS der Zuschnitt wegnimmt. */
.vs-bild.vs-ganz img { object-fit: contain; }
.vs-leerrahmen { aspect-ratio: 1; background: var(--sz-media); }
.vs-leer { color: var(--sz-muted); font-size: 12px; text-align: center; padding: 12px; }
.vs-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff;
  font-size: 17px; line-height: 44px; text-align: center; pointer-events: none; }

.vs-karussell { position: relative; }
.vs-zaehler { position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.vs-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: #1B2A57;
  font-size: 15px; line-height: 26px; padding: 0; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.vs-links { left: 8px; } .vs-rechts { right: 8px; }
.vs-punkte { display: flex; justify-content: center; gap: 4px; padding: 7px 0 2px; }
.vs-punkt-klein { width: 6px; height: 6px; border-radius: 50%; background: #c7ccd4; }
.vs-punkt-klein.an { background: #2f6fed; }

.vs-leiste { padding: 8px 11px 4px; font-size: 16px; letter-spacing: 3px; color: #1B2A57; }
.vs-rechts-sym { float: right; }
.vs-unten { padding: 2px 11px 12px; font-size: 13px; line-height: 1.45; }
.vs-text { display: inline; overflow-wrap: anywhere; white-space: pre-wrap; }
.vs-tag { color: #2f6fed; }
.vs-mehr { color: var(--sz-muted); }

/* Facebook */
.vs-fb .vs-ort::before { content: ''; }
.vs-fbtext { padding: 0 11px 9px; font-size: 13.5px; line-height: 1.45; }
.vs-fbleiste { border-top: 1px solid var(--sz-line-soft); font-size: 12px; letter-spacing: 0;
  color: var(--sz-text-2); padding: 8px 11px; }
.vs-fbraster { display: grid; gap: 2px; }
.vs-fbraster.n2 { grid-template-columns: 1fr 1fr; }
.vs-fbraster.n3 { grid-template-columns: 1fr 1fr; }
.vs-fbraster.n3 .vs-fbfeld:first-child { grid-column: span 2; }
.vs-fbraster.n4 { grid-template-columns: 1fr 1fr; }
.vs-fbfeld { position: relative; aspect-ratio: 1; background: var(--sz-media); overflow: hidden; }
.vs-fbraster.n3 .vs-fbfeld:first-child { aspect-ratio: 2 / 1; }
.vs-fbfeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-mehrzahl { position: absolute; inset: 0; background: rgba(0,0,0,.45); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }

/* TikTok / Reel — Vollbild hochkant */
.vs-hoch { max-width: 260px; background: #000; }
.vs-buehne { position: relative; }
.vs-hochtext { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 11px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: 12.5px; }
.vs-konto-hell { font-weight: 700; margin-bottom: 3px; }
.vs-hoch .vs-tag { color: #8ab4ff; }
.vs-hoch .vs-mehr { color: #d8dce2; }

/* YouTube */
.vs-ytunten { padding: 9px 11px 12px; }
.vs-yttitel { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 3px; overflow-wrap: anywhere; }
.vs-hinweisgross { padding: 22px 16px; text-align: center; color: var(--sz-text-2); font-size: 13px; }

.vs-info { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.vs-infozeile { font-size: 12.5px; color: var(--sz-text-2); }
.vs-schnitt { color: #6b4a08; }

/* Übersetzung */
.sz-feldknoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.sz-uebersetzung { background: var(--sz-chip); border: 1px solid var(--sz-line); border-radius: 8px;
  padding: 11px 13px; margin: 6px 0 10px; max-height: 40vh; overflow: auto; }
/* Arabisch, Hebräisch und Persisch laufen von rechts nach links. Ohne das stünde der
   Vorschlag falsch herum und man könnte ihn nicht beurteilen. */
.sz-uebersetzung.rtl { direction: rtl; text-align: right; }
.sz-ueb-titel { font-weight: 700; margin-bottom: 6px; }
.sz-ueb-text { white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere; }
.sz-ueb-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .vs-buehnenrand { padding: 10px; }
  .vs-karte { max-width: 100%; }
  .vs-hoch { max-width: 230px; }
}

/* ---- Beitragsart je Netzwerk, Frage nach dem Hochladen, Stand-Zeile (26.09.2026) ---- */
.sz-artwahl { display: flex; flex-direction: column; gap: 12px; }
.sz-artzeile { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; align-items: center; }
.sz-artzeile .sz-hilfe { grid-column: 2; }
.sz-artnetz { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--sz-text, #1B2A57); }
@media (max-width: 640px) { .sz-artzeile { grid-template-columns: 1fr; } .sz-artzeile .sz-hilfe { grid-column: 1; } }
.sz-frage-grund { display: flex; align-items: center; justify-content: center; padding: 16px; }
.sz-frage { background: #fff; color: #1B2A57; border-radius: 14px; padding: 20px 22px; width: min(560px, 100%); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.sz-frage h2 { margin: 0; font-size: 18px; }
.sz-frage-knoepfe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.sz-statuszeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; min-height: 38px; }
.sz-standmarke { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.sz-link { background: none; border: 0; padding: 0; color: #4A6FA5; text-decoration: underline; cursor: pointer; font: inherit; font-size: 12.5px; }
.sz-aktionen .sz-knopf { gap: 6px; }
/* ---- Eigene Uhrzeit je Netzwerk (28.09.2026) ---- */
.sz-jekanal { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sz-jezeile { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; }
@media (max-width: 640px) { .sz-jezeile { grid-template-columns: 1fr; } }
/* ---- Aufrufe je Beitrag (28.09.2026) ---- */
.sz-stat { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--sz-text-2, #3b4252); margin-top: 6px; }
.sz-stat b { font-weight: 700; color: var(--sz-navy, #1B2A57); }
.sz-stat .sz-stat-alt { color: var(--sz-muted, #8A9099); font-size: 11.5px; }
.sz-statnetz { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; align-items: baseline; font-size: 13px; padding: 6px 0; border-top: 1px solid #f0f2f6; }
.sz-statnetz .sz-stat { margin-top: 0; }

/* ---- Kompakte Beitragskarte + Kalenderkarte mit Vorschaubild (28.09.2026) ----
   „Viel zu groß … ein Reel als Reel zeigen … die Videos zeigen, ohne viel Text". */
.sz-spalte { gap: 8px; }
.sz-karte.sz-kompakt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 8px 10px; align-items: start; }
.sz-thumb { position: relative; flex: 0 0 auto; border-radius: 6px; overflow: hidden; background: var(--sz-media, #EEF1F5); display: flex; align-items: center; justify-content: center; color: var(--sz-muted); }
.sz-thumb.hoch { width: 54px; height: 96px; }
.sz-thumb.quer { width: 112px; height: 63px; }
.sz-thumb.quadrat { width: 76px; height: 76px; }
.sz-thumb img, .sz-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sz-thumb .sz-artmarke { position: absolute; left: 3px; top: 3px; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #E4405F; color: #fff; padding: 1px 5px; border-radius: 3px; }
.sz-thumb .sz-dauer { position: absolute; right: 3px; bottom: 3px; font-size: 9.5px; font-weight: 600; background: rgba(27,42,87,.85); color: #fff; padding: 1px 4px; border-radius: 3px; }
.sz-kompakt .sz-krechts { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sz-kompakt h3 { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sz-kzeile { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.sz-mini { height: 18px; padding: 0 6px; display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; background: var(--sz-chip); font-size: 10.5px; font-weight: 600; color: var(--sz-text-2); }
.sz-mini .sz-punkt { width: 6px; height: 6px; }
.sz-mini.sz-warn { background: var(--sz-warn-bg); color: var(--sz-warn-fg); }
.sz-mini.sz-ok { background: #E6F2EC; color: var(--sz-green); }
.sz-mini.sz-fehler { background: #FBE9E7; color: var(--sz-red); }
.sz-kompakt .sz-zeit { border-top: 0; padding-top: 0; font-size: 11px; flex-wrap: wrap; }
.sz-kompakt .sz-kstat { color: var(--sz-text-2); }
.sz-wkarte { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 8px; }
.sz-wkarte .sz-thumb.hoch { width: 40px; height: 71px; }
.sz-wkarte .sz-thumb.quer { width: 80px; height: 45px; }
.sz-wkarte .sz-thumb.quadrat { width: 56px; height: 56px; }
.sz-wkarte .sz-thumb .sz-artmarke { font-size: 8px; padding: 1px 4px; }
.sz-wkarte .sz-wrechts { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sz-wkarte .sz-wkarte-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sz-wkarte .sz-wpunkte { display: inline-flex; gap: 3px; align-items: center; }
.sz-wkarte .sz-wpunkte .sz-punkt { width: 7px; height: 7px; }
.sz-wkarte h3 { font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.sz-wkarte .sz-wkarte-bereich { font-size: 10.5px; }

/* ===== Struktur wie die App + klare Trennung der Unternehmen (17.10.2026) ===== */
.sz-kopf2 { display: flex; flex-direction: column; gap: 12px; }
.sz-kopf2 .acc-reiter-karte { margin: 0; }
.sz-reiter2 { flex-wrap: wrap; }
.sz-reiter2 .acc-reiter-zahl.warn { background: #FDB913; color: #111827; }
.sz-firmen-wrap { display: flex; flex-direction: column; gap: 0; }
.sz-firmen { height: auto; min-height: 0; padding: 8px; gap: 8px; flex-wrap: wrap; align-items: center; border-radius: 14px; }
.sz-firmen > button { border: 1px solid #E7E4DC !important; border-radius: 999px; padding: 7px 13px !important; height: auto; font-weight: 600; color: #374151; background: #FFFFFF; }
.sz-firmen > button.sz-firma { border-left: 4px solid var(--fc) !important; }
.sz-firmen > button.an { background: color-mix(in srgb, var(--fc, #FDB913) 14%, #FFFFFF); border-color: var(--fc, #FDB913) !important; color: #111827; font-weight: 700; box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc, #FDB913) 30%, transparent); }
.sz-firma-zahl { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #F3F4F6; font-size: 11.5px; color: #4B5563; text-align: center; }
.sz-firmen > button.an .sz-firma-zahl { background: var(--fc); color: #FFFFFF; }
.sz-firmenband { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -6px; padding: 14px 14px 8px; border: 1px solid color-mix(in srgb, var(--fc) 35%, #E7E4DC); border-top: 0; border-radius: 0 0 14px 14px; background: color-mix(in srgb, var(--fc) 9%, #FFFFFF); font-size: 13.5px; color: #374151; }
.sz-firmenband b { color: #111827; }
.sz-firmenband-rechts { margin-left: auto; font-size: 12.5px; color: #6B7280; }
.sz-wkarte { border-left: 4px solid var(--fc, #9CA3AF) !important; }