*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
    /* ── FARB-TOKENS ──────────────────────────────────────────────────────────────
       Übernommen aus dem Gestaltungsentwurf (docs/prototyp-talavy_grundkonzept-vorschlag-ui.html).
       Die Markenfarben sind dabei UNVERÄNDERT: var(--o500), var(--m700), var(--li500), var(--y500), var(--egg) und
       var(--n900) stehen hier mit denselben Werten wie bisher. Neu ist nur, dass sie Namen nach ihrer
       Rolle tragen und eine abgestufte Neutral-Skala danebensteht.

       🔑 WOZU die Neutral-Skala: Bisher lagen rund 350 Grautöne als Transparenz im Code —
          rgba(28,28,28,0.02) bis 0.92, vierzig verschiedene Alphawerte. Eine Transparenz sieht je
          nach Untergrund anders aus: rgba(28,28,28,.07) ergibt auf Weiß #EFEFEF, auf Eierschale
          aber #E1DCCA. Feste Stufen nehmen diese Unsicherheit heraus.

       ⚠️ Diese Transparenzen sind BEWUSST noch nicht umgestellt. Sie hängen am heutigen dunklen
          Untergrund; sie jetzt gegen feste Töne zu tauschen würde das Aussehen verändern. Das
          geschieht zusammen mit dem Flächenwechsel — dann stimmt die Rechnung wieder.

       Kontraste (weiße Schrift, Standard verlangt 4,5:1): --o500 erreicht nur 3,22:1 und trägt
       deshalb KEINE weiße Schrift; dafür gibt es --o700 mit 5,22:1. --m700 12,49:1, --n900 17,04:1.
       --li500 (2,37:1) und --y500 (1,5:1) tragen ausschließlich dunkle Schrift.
       Für weiße Schrift auf Lilac gibt es --li700 (5,17:1) — wie --o700 beim Orange.
       ────────────────────────────────────────────────────────────────────────────── */
    :root {
      /* ── DIE GRAUTÖNE — von DREIZEHN auf FÜNF (Ninas Vorgabe 02.09.2026) ──────────────────
         Gemessen wurde, WOFÜR jeder Ton wirklich benutzt wird. Es sind genau fünf Aufgaben:
           --n0    Weiss: Karten und Flächen (139 Verwendungen)
           --n50   heller Seitengrund
           --n200  Rahmen und Trennlinien
           --n600  zweitrangiger Text
           --n900  Text
         Die acht übrigen Namen bleiben als VERWEIS auf den passenden der fünf. Sie zu löschen
         hiesse, 539 Fundstellen einzeln anzufassen — jede eine Gelegenheit für einen
         Flüchtigkeitsfehler. Der Verweis wirkt identisch und lässt sich später gefahrlos
         auflösen; die Zuordnung steht unten und ist damit nachlesbar statt geraten.

         🔴 DABEI KAM ETWAS ANS LICHT: --n500 (3,97:1) und --n400 (2,53:1) lagen als
            TEXTFARBEN unter der Lesbarkeitsgrenze von 4,5:1 — und --n500 wird 73× für Schrift
            benutzt. Beide zeigen jetzt auf --n600 (6,42:1). Das Zusammenlegen war also nicht
            nur Aufräumen: Es hat 83 Stellen mit zu schwachem Text mitrepariert.
            ⚠️ Der Kontrast-Test des Projekts hatte das nicht gemeldet — er prüft Paare, bei
               denen Schrift UND Fläche in DERSELBEN Regel stehen. Steht die Schriftfarbe
               allein (der Regelfall bei `.nc-hint` & Co.), sieht er sie nicht.

         ⚠️ SICHTBARE FOLGE, die Nina beurteilen muss: --n100 wurde sowohl für Rahmen (41×) als
            auch für Flächen (28×) benutzt. Es zeigt jetzt auf --n200, weil Rahmen überwiegt —
            jene 28 Flächen werden dadurch etwas dunkler. */
      --n0:#FFFFFF; --n50:#F7F6F4; --n200:#E0DCD6; --n600:#635E57; --n900:#1C1C1C;
      /* Verweise auf die fünf */
      --n25:var(--n0);      /* war #FDFCFB — praktisch weiss (Sidebar, Hauptbereich) */
      --n100:var(--n200);   /* war #F0EEEB — überwiegend Rahmen */
      --n150:var(--n200);   /* war #E9E6E2 — Rahmen */
      --n300:var(--n200);   /* war #CBC6BE — Rahmen */
      --n400:var(--n600);   /* war #A8A29A — als Text nur 2,53:1 */
      --n500:var(--n600);   /* war #857F76 — als Text nur 3,97:1 */
      --n700:var(--n900);   /* war #47433D */
      --n800:var(--n900);   /* war #2E2B27 */
      /* Marke — Werte unverändert; --o700/--o900 als kontraststarke Varianten ergänzt */
      --o50:#FDF1E9; --o100:#FADDC9; --o500:#EC671B; --o700:#B84A0E; --o900:#5E2607;
      --m100:#F4E3EC; --m700:#660E36;
      /* --li700 ergaenzt am 30.08.2026: Ninas Wunsch war eine WEISSE Zahl im lilafarbenen
         Kreis. Auf --li500 ergaebe Weiss nur 2,37:1 — unlesbar, und schlechter als das
         Schwarz mit 7,20:1, das dort stand. --li700 traegt Weiss mit 5,17:1 und ist
         erkennbar dasselbe Lilac. Genau dasselbe Verhaeltnis wie --o700 zu --o500. */
      --li100:#F3E9F2; --li500:#CA99C5; --li700:#836380;
      --y100:#FEF3DC; --y500:#FDCC68;
      --neongelb:#EFE931;   /* Brand-Farbe „Neongelb" (05.09.2026) — Verlauf der Kachel „Fortschritt Plan" */
      --egg:#F0EAD7;
      /* Zustände */
      /* --succ-bd ergaenzt am 01.09.2026 fuer „im Namen freigeben" — dasselbe Muster wie
         --dang-bd: ein Rahmen, der zur Flaeche passt statt sie zu ueberschreien.
         ⚠️ --succ auf --succ-bg traegt NUR 4,47:1 und faellt damit unter die geforderten
            4,5:1 — hier stand zuerst die geratene Zahl „5,4:1", bis der Kontrast-Test sie
            widerlegt hat. Wer eine Flaeche fuer --succ braucht, nimmt #EDF7F1 (4,58:1),
            siehe .er-fb-gut und .plan-sel-frei. --succ-bg bleibt fuer Hover-Flaechen ohne
            Schrift darauf. */
      --succ:#15803D; --succ-bg:#E8F5ED; --succ-bd:#BFE0CB; --warn:#7A5500;
      /* Blau = „ist bereits draussen" (Ninas Vorgabe 27.08.2026). Bewusst KEINE Markenfarbe:
         Es ist eine Zustandsfarbe wie Gruen/Gelb/Rot und soll sich von Orange, Magenta und Lilac
         abheben, damit „gepostet" nicht mit einer Marken-Kennzeichnung verwechselt wird.
         Kontrast --info auf --info-bg: 7,1:1 (Standard verlangt 4,5:1). */
      --info:#155C9E; --info-bg:#E6EFF8;
      --dang:#B42318; --dang-bg:#FDEBE9; --dang-bd:#F2C9C5;

      /* Die bisherigen Namen bleiben als Verweis bestehen — 229 Stellen nutzen sie bereits.
         Sie zeigen auf dieselben Werte wie zuvor, es ändert sich also nichts am Aussehen. */
      --black:var(--n900); --lilac:var(--li500); --orange:var(--o500); --magenta:var(--m700);
      --yellow:var(--y500); --eggshell:var(--egg); --cloud:#FEFBFA;
      --muted:rgba(255,255,255,0.38); --muted2:rgba(255,255,255,0.09);
      --sidebar-w:252px;
    }
    body { font-family:'Barlow',sans-serif; font-weight:400; background:var(--n50); color:var(--n900); display:flex; min-height:100vh; font-size:14px; }

    /* ── SIDEBAR ── */
    .sidebar { width:var(--sidebar-w); min-height:100vh; background:var(--n25); display:flex; flex-direction:column; position:fixed; top:0; left:0; z-index:100; border-right:1px solid var(--n200); }
    .sidebar-logo { padding:22px 22px 18px; border-bottom:1px solid var(--n200); }
    .logo-label { font-size:9px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--n600); margin-bottom:3px; }
    .logo-name { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:21px; color:var(--n900); letter-spacing:0.02em; text-transform:uppercase; }
    .logo-name span { color:var(--o700); }
    .sidebar-nav-orig { flex:1; padding:14px 10px; overflow-y:auto; }
    /* ── ABSTAND ZWISCHEN DEN BEREICHEN (Ninas Vorgabe 26.08.2026) ──────────────
       Die Bereiche (Plan · Creation · Control · Brand) waren kaum als Bereiche lesbar: 16px
       Abstand bei 9px Schriftgroesse ist weniger als zwei Zeilenhoehen — das Auge sah eine
       durchlaufende Liste mit Zwischenwoertern.
       🔴 Schlimmer noch: DREI der vier Ueberschriften trugen im Markup `style="margin-top:14px"`
          und hatten dadurch WENIGER Abstand als die CSS-Regel vorsah. Dieselbe Falle wie beim
          Seitenraster am 26.08. — deshalb steht der Abstand jetzt ausschliesslich hier.
       Die erste Ueberschrift einer Navigation braucht den grossen Abstand nicht: ueber ihr
       steht kein Bereich, sondern der Rand. */
    .nav-section-label { font-size:9px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--n600); padding:0 12px; margin:30px 0 7px; }
    .sidebar-nav > .nav-section-label:first-child { margin-top:6px; }
    .nav-item { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:8px; cursor:pointer; transition:background 0.15s,color 0.15s; color:var(--n700); font-size:13px; font-weight:400; margin-bottom:1px; user-select:none; }
    .nav-item:hover { background:var(--n100); color:var(--n900); }
    .nav-item.active { background:var(--o50); color:var(--o700); font-weight:600; }
    .nav-badge { margin-left:auto; background:var(--o700); color:var(--n0); font-size:9px; font-weight:700; padding:2px 6px; border-radius:10px; }
    .nav-optional { margin-left:auto; font-size:9px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--n600); border:1px solid var(--n300); padding:2px 6px; border-radius:8px; }
    .nav-upsell { margin-left:auto; font-size:9px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--warn); background:var(--y100); border:1px solid var(--y500); padding:2px 6px; border-radius:8px; }
    .sidebar-user { padding:14px 18px; border-top:1px solid var(--n200); display:flex; align-items:center; gap:9px; }
    .user-avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--magenta),var(--lilac)); display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:11px; color:var(--n0); flex-shrink:0; }
    .user-name { font-size:12px; font-weight:600; color:var(--n900); }
    .user-plan { font-size:10px; color:var(--warn); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }

    /* ── MAIN ── */
    /* ── DER SEITEN-VERLAUF (Ninas Vorgabe 05.09.2026, „den Spiess umdrehen") ─────────────────
       Nicht mehr die Karten tragen das Lilac, sondern die SEITE: ein Verlauf über den ganzen
       Hauptbereich, ganz oben beginnend (die Kopfleiste ist durchsichtig), volle Stärke bis
       1/3 der Seitenhöhe (Ninas Nachtrag; erst 2/3), danach ausgelaufen. Die Karten darauf sind weiss.
       🔑 Der Verlauf hängt an .main (min-height 100vh, wächst mit der Seite) — „1/3" heisst
          also 1/3 der ganzen Seite, nicht des Bildschirms. */
    .main { --seite-ton:rgba(202,153,197,.08); --seite-ton-0:rgba(202,153,197,0);   /* Nina: um 1/3 heller (war .12) */
      margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh;
      background:linear-gradient(to bottom, var(--seite-ton) 0, var(--seite-ton) 33%, var(--seite-ton-0) 100%), var(--n25); }   /* Ninas Nachtrag: ab 1/3 auslaufen (war 2/3) */
    /* Die Kopfleiste ist durchsichtig und ohne Linie, damit der Verlauf ganz oben ansetzt. Sie
       bleibt haftend; beim Scrollen läuft der Inhalt leicht verwischt darunter durch. */
    .topbar { height:58px; background:transparent; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:0; display:flex; align-items:center; padding:0 26px; gap:10px; position:sticky; top:0; z-index:50; }
    .topbar-breadcrumb { flex:1; font-size:13px; color:var(--n600); }
    .topbar-breadcrumb strong { color:var(--black); font-weight:600; }
    .topbar-actions { display:flex; align-items:center; gap:9px; }

    /* ── MARKEN-WECHSLER (Kopfzeile der Kundenansicht) ──
       Erlaubt den Sprung zu einer anderen Marke, ohne den Umweg über die Seitenleiste.
       🔑 Der Wechsel läuft ausschließlich über openClient() — siehe js/05-stammdaten.js.
       Farben: --n600 auf --n0 ergibt 6,43:1, --o700 auf --o50 ist der Haken der aktiven Marke. */
    .mw-wrap { position:relative; display:inline-block; }
    .mw-btn { display:inline-flex; align-items:center; gap:8px; max-width:320px; padding:5px 10px;
              border-radius:8px; border:1px solid var(--n200); background:var(--n0); cursor:pointer;
              font-family:'Barlow',sans-serif; font-size:13px; color:var(--n600);
              transition:border-color 0.12s, background 0.12s; }
    .mw-btn:hover { border-color:var(--n300); background:var(--n50); }
    .mw-btn strong { color:var(--black); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mw-btn[disabled] { cursor:progress; opacity:0.65; }
    .mw-caret { font-size:10px; color:var(--n500); flex:none; }
    .mw-dot { width:8px; height:8px; border-radius:50%; flex:none; }
    .mw-trenner { height:1px; margin:5px 8px; background:var(--n150); }
    /* Der Pfad steht allein in der Kopfleiste (der Wechsler sitzt in der Seitenleiste). */
    .mw-pfad-teil { color:var(--n600); }
    .mw-pfad-teil + .mw-pfad-teil::before { content:"\203A"; margin:0 9px; color:var(--n400); }
    .mw-pfad-teil:last-child { color:var(--black); font-weight:600; }
    a.mw-pfad-teil { cursor:pointer; }
    a.mw-pfad-teil:hover { color:var(--o700); text-decoration:underline; }
    /* Wechsler im Kopf der Seitenleiste — volle Breite, damit lange Markennamen Platz haben. */
    .sidebar-wechsler { padding:13px 11px; border-bottom:0; }   /* 05.09.2026: Linie unter dem Wechsler weg (Nina) */
    .sidebar-wechsler .mw-wrap { display:block; }
    .sidebar-wechsler .mw-btn { width:100%; max-width:none; padding:9px 11px; font-size:13.5px; }
    .sidebar-wechsler .mw-caret { margin-left:auto; }
    .sidebar-wechsler .mw-menu { top:44px; left:11px; right:11px; min-width:0; }
    .sidebar-logo-fuss { border-bottom:none; border-top:1px solid var(--n200); padding:13px 18px 11px; }
    .sidebar-logo-fuss .logo-label { font-size:8.5px; }
    .sidebar-logo-fuss .logo-name { font-size:15px; }
    /* „Redaktionsplan starten": links Wochenwahl + Knopf, rechts Schwerpunkt/Motto.
       Auf schmalen Fenstern rutscht die rechte Spalte unter die linke. */
    /* Kopf JEDER eigenständigen Seite (Archiv, Markenprofil, Einstellungen, Aufgabenliste,
       Freigabe-Mails, Trends). Weiss, ruhig, ein schmaler Akzentstrich als einzige Farbe —
       dieselbe Sprache wie die Karten.
       🔑 Seit dem 27.08.2026 tragen ihn ALLE Seiten. „Trends & News" hatte als letzte noch
          den magentafarbenen Begrüssungs-Banner (.welcome-banner) — der Rest der Kachel, die
          am 23.08. aus der Agentur-Übersicht entfernt wurde. Ninas Vorgabe: eine Sprache. */
    /* ── DER SEITENKOPF — Baustein 1 des Baukastens (Ninas Vorgabe 02.09.2026) ────────────────
       JEDE Seite beginnt gleich: Überschrift, darunter der kurze orange Strich, dann WEISSRAUM.
       🔻 Die dünne graue Trennlinie (`border-bottom`) ist entfallen. Sie tat dasselbe wie der
          Abstand — den Kopf vom Inhalt trennen — nur lauter, und sie stand in Konkurrenz zum
          orangen Strich direkt darüber: zwei waagrechte Linien übereinander, 20px auseinander.
          Die Hierarchie trägt jetzt allein der Abstand, wie im Seitenraster vorgesehen.
       Das Mass ist die grösste Stufe des Rasters (28px) — dieselbe Luft, die ein Kapitel
       innerhalb einer Karte bekommt, damit Seiten- und Karteninneres gleich atmen. */
    .seiten-kopf { padding:2px 0 0; margin-bottom:28px; }
    /* Ein Seitenkopf mit Knöpfen rechts (Redaktionsplan). Der Titel bleibt dadurch auf
       derselben Höhe wie auf jeder anderen Seite — Ninas Vorgabe 02.09.2026.
       ⚠️ `flex-start`, nicht `center`: Die Titelbox ist durch den orangen Strich darunter
          höher als die Schrift. Bei `center` säßen die Knöpfe optisch zu tief, nämlich
          mittig zu Titel UND Strich statt auf Schrifthöhe.
       ⚠️ `flex-wrap`, damit die Knöpfe auf schmalen Schirmen unter den Titel rutschen,
          statt ihn zusammenzuquetschen. */
    .seiten-kopf-zeile { display:flex; align-items:flex-start; justify-content:space-between;
      gap:16px; flex-wrap:wrap; }
    .seiten-titel { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:30px;
      text-transform:uppercase; letter-spacing:var(--sperrung-titel); color:var(--black); line-height:1.1; }
    /* 🔻 02.09.2026: Der kurze orange Strich unter der Seitenüberschrift ist auf Ninas Vorgabe
       ENTFALLEN — am selben Tag, an dem er zur Regel erhoben wurde. Grund: Seit die Kartenköpfe
       durchgängig lilac hinterlegt sind und jede Karte ihren orangen Streifen an der Oberkante
       trägt, kam der Strich als DRITTES orangefarbenes Element auf dieselbe Seite. Er markierte
       nichts mehr, was der Abstand darunter nicht schon markiert.
       (Die Regel stand hier vom 26.08. bis zum 02.09.2026; ein Wächter im Baukasten hält jetzt
       fest, dass sie NICHT zurückkommt, statt sie zu verlangen.) */
    .seiten-lead { font-size:13px; color:var(--n600); line-height:1.6; max-width:78ch; margin-top:12px; }
    /* ── ZWEISPALTIGE SEITE (Markenprofil, Einstellungen) ──
       Links die Kapitel (bleiben beim Scrollen stehen), rechts der Inhalt in einer weissen Karte,
       unten die Speichern-Leiste. Farbe nur als Akzent: der aktive Kapitelpunkt und der Strich
       unter dem Titel.

       🔑 Diese Klassen hiessen bis zum 27.08.2026 `.mp-*` und gehörten allein dem Markenprofil.
          Als die Einstellungen dasselbe Raster brauchten, waren zwei Wege möglich — und nur einer
          ist erlaubt: die Klasse UMBENENNEN statt sie auszuleihen. Eine bereichsfremde Klasse zu
          benutzen heisst, jede künftige Änderung an ihr ungefragt zu erben (am 25.08. färbte sich
          so ein Speichern-Knopf im Markenprofil stumm mit). Ein zweiter Name für dasselbe Aussehen
          wäre der andere Fehler — er driftet beim nächsten Umbau auseinander. */
    .seiten-layout { display:grid; grid-template-columns:212px 1fr; gap:22px; align-items:start; }
    @media (max-width:920px) { .seiten-layout { grid-template-columns:1fr; } }
    .seiten-nav { position:sticky; top:74px; display:flex; flex-direction:column; gap:2px;
      background:var(--n0); border:1px solid var(--n150); border-radius:12px; padding:8px; }
    .seiten-kapitel { width:100%; text-align:left; padding:9px 11px; border:0; border-radius:8px;
      background:none; cursor:pointer; font-family:'Barlow',sans-serif; font-size:13px;
      color:var(--n700); transition:background 0.12s, color 0.12s; }
    .seiten-kapitel:hover { background:var(--n50); }
    .seiten-kapitel.on { background:var(--o50); color:var(--o700); font-weight:600; }
    /* Die weisse Inhaltskarte JEDER Seite — zweispaltig (Markenprofil, Einstellungen) wie
       einspaltig (Aufgabenliste, Freigabe-Mails). EINE Klasse, kein zweiter Name fürs Gleiche.
       ⚠️ Der Innenabstand ist seit dem 27.08.2026 unten genauso gross wie oben. Vorher stand
          dort 0 — weil die einzige Seite mit dieser Klasse eine Fussleiste hatte, die den Rand
          selbst mitbrachte. Für jede Seite OHNE Fussleiste klebte der Inhalt an der Unterkante. */
    /* 🔻 02.09.2026 (Ninas Vorgabe): Diese Karte sah anders aus als jede andere der Suite — kein
       Kopf, kein oranger Akzentstreifen, nur eine weisse Fläche mit Rahmen. Jetzt trägt sie
       beides und ist damit als dieselbe Sache erkennbar wie die Karten auf den einspaltigen
       Seiten. Der Kapitelname steht als schwarze, fette Überschrift im farbig hinterlegten Kopf;
       die orangen Zwischenüberschriften (`.nc-section`) im Formular darunter BLEIBEN — sie
       gliedern lange Kapitel, und ohne sie wäre nicht mehr zu unterscheiden, was der Titel der
       Karte ist und was ein Abschnitt darin. */
    /* 05.09.2026: derselbe Lilac-Verlauf wie bei `.card` (Kopfhöhe voll, dann über 100px auslaufend). */
    .seiten-inhalt { background:var(--n0); border:1px solid var(--n150); border-radius:12px;
      padding:22px 24px; min-width:0; position:relative;
      /* Eigenes Innenmass: die Formularkapitel sind seit jeher auf 24px gesetzt. Der Kopf holt
         sich denselben Wert, damit Kopf und Feld darunter fluchten. */
      --karte-innen:24px;
      --kopf-ton:rgba(202,153,197,0.12); --kopf-linie:rgba(202,153,197,0.20);
      --kopf-badge:rgba(202,153,197,0.22); }
    /* Der orange Streifen an der Oberkante — dieselben 3px wie bei den anderen Karten.
       🔴 ERST ALS `::before` GEBAUT, das war falsch: Ein 3px hohes Element kann keinen
          12px-Radius zeigen — der Browser stutzt einen Radius, der grösser ist als das
          Element selbst, und die Ecken blieben sichtbar eckig (Ninas Befund 02.09.2026).
          Die anderen Karten lösen das über `overflow:hidden`, das hier aber nicht in Frage
          kommt: Diese Seiten enthalten Auswahlfelder und Aufklapp-Listen, und ein
          abschneidender Container hat im Projekt schon einmal den Wochen-Kalender
          halbiert (24.08.2026).
       🔑 Ein `border-top` löst beides: Ein Rahmen folgt dem `border-radius` seines Elements
          von selbst, ohne Radius-Angabe und ohne abschneidenden Container. */
    /* 🔻 04.09.2026: der orange Rand (`border-top:3px`) ist entfallen — Ninas Vorgabe, die Linie
       bleibt nur den vier Kennzahl-Kacheln. Die Begründung oben (border-top statt ::before)
       gilt weiter, falls sie je zurückkommt. */
    /* Der Kartenkopf sitzt bündig in der Ecke: die negativen Aussenabstände heben den
       Innenabstand der Karte auf — dasselbe Mittel, mit dem die Speichern-Leiste unten
       über die volle Breite läuft. */
    .seiten-inhalt > .card-header { margin:-22px calc(-1 * var(--karte-innen)) 22px;
      border-radius:12px 12px 0 0; }
    /* Die Abschnitte kommen aus den früheren Panels und bringen ihre eigenen Abstände mit —
       hier bekommen sie nur oben Luft, damit die Karte nicht gedrängt wirkt. */
    .seiten-inhalt .form-sec:first-child .nc-section { margin-top:0; }
    /* Die Speichern-Leiste zieht sich über die volle Breite der Karte und sitzt bündig auf
       ihrer Unterkante — die negativen Aussenabstände heben den Innenabstand der Karte wieder
       auf. Vorher lag ihr Trennstrich um 24px eingerückt und endete im Nichts. */
    .seiten-fuss { position:sticky; bottom:0; display:flex; justify-content:flex-end;
      align-items:center; gap:9px; margin:22px -24px -22px; padding:14px 24px;
      background:var(--n0); border-top:1px solid var(--n150); border-radius:0 0 12px 12px; }
    /* ── RECHTE-RASTER (30.08.2026) ──
       Ninas Vorgabe: „Dann die Überschrift ‚Er darf:‘, dann 3 Spalten mit jeweils Checkboxen."
       Dasselbe Raster trägt DREI Seiten — Admin, Team-Seats und den Kunden-Zugang in der
       Marke. Eine Struktur, ein Aussehen, ein Ort zum Ändern.

       🔴 HIER STAND ZUERST EINE EIGENE KLASSE `.recht-kachel` — und das war falsch. Drei
          bestehende Tests haben es sofort gemeldet, und der Kommentar bei `.vq-opt` sagt den
          Grund unmissverständlich: Eine zweite Optionsklasse eröffnet eine dritte
          Beschriftungs-Ebene, und „beinahe gleich" ist nach Ninas Urteil schlimmer als ein
          offener Unterschied. Die Kacheln tragen deshalb `.vq-opt` — Schrift, Rahmen und
          Ankreuzfeld kommen von dort. NEU ist allein das Raster darum herum.
       ⚠️ `auto-fit` statt einer festen Dreierteilung: Auf einer schmalen Spalte werden aus drei
          Kacheln zwei und dann eine. Eine fest dreispaltige Vorgabe hätte den Text auf halber
          Breite umbrechen lassen — die Inhaltsspalte der Einstellungen ist über 600px schmaler
          als das Fenster, gemessen am selben Tag. */
    .rechte-raster { display:grid; gap:9px; margin-top:6px;
      grid-template-columns:repeat(auto-fit, minmax(232px, 1fr)); }
    /* Der Zusatz unter dem Recht: die vorhandene Hinweis-Ebene, keine neue Größe. */
    .rechte-raster .nc-hint { display:block; margin-top:2px; }
    /* ── KPI-AUSWAHL (27.08.2026) ──
       Ankreuzfelder für Kanäle und Kennzahlen über dem Bericht.
       🔑 Sie sind BEDIENUNG, kein Berichtsinhalt: im PDF-Export haben sie nichts verloren.
          Deshalb stehen sie ausserhalb von #kpiReportPrint UND werden beim Drucken ausgeblendet
          — beides nötig, weil der Export über den Druckdialog läuft. */
    .kpi-wahl { padding:14px 22px 4px; }
    .kpi-wahl-reihe { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
    .kpi-wahl-feld { display:flex; align-items:center; gap:7px; font-size:13px; padding:6px 11px;
      border:1px solid var(--n200); border-radius:8px; cursor:pointer; background:var(--n0);
      transition:border-color .15s, background .15s; }
    .kpi-wahl-feld:hover { border-color:var(--o500); background:var(--o50); }
    @media print { .kpi-wahl { display:none; } }

    /* ── AUFGABENLISTE (27.08.2026) ──
       Links die Dienstleister, rechts ihre Aufgaben. Das Raster ist dasselbe wie beim
       Markenprofil (`.seiten-layout`) — hier stehen nur Personen statt Kapiteln in der Spalte.

       🔴 KEIN RAHMEN JE AUFGABE. Ninas Befund: „zu viele Rahmen, die aufeinander treffen."
          Vorher lag eine Karte je Aufgabe in einer Karte je Dienstleister in der Seitenkarte.
          Getrennt wird jetzt durch eine feine Linie — und die entfällt bei der letzten Zeile,
          sonst endet die Liste mit einem Strich ins Nichts (dieselbe Regel wie beim
          Kapitelanfang, siehe .form-sec.kapitel-erster). */
    .seiten-nav .seiten-kapitel .aufg-name { display:block; }
    .seiten-nav .seiten-kapitel .aufg-zahl { display:block; font-size:11px; color:var(--n500);
      margin-top:1px; }
    .seiten-kapitel.on .aufg-zahl { color:var(--o700); }
    .aufg-liste { margin-top:4px; }
    .aufg-zeile { border-bottom:1px solid var(--n150); }
    .aufg-zeile:last-child { border-bottom:0; }
    .aufg-kopf { display:flex; align-items:center; gap:9px; padding:10px 2px; cursor:pointer; }
    .aufg-kopf:hover { background:var(--n25); }
    .aufg-pfeil { flex:0 0 auto; color:var(--o500); font-size:11px; width:10px; }
    .aufg-titel { font-weight:600; font-size:14px; min-width:0; overflow:hidden;
      text-overflow:ellipsis; white-space:nowrap; }
    .aufg-meta { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    /* Der Entfernen-Knopf ist dezent, bis man die Zeile berührt: Er löst eine Rückfrage aus,
       aber er soll nicht wie die Hauptsache aussehen. */
    .aufg-weg { flex:0 0 auto; border:0; background:none; cursor:pointer; color:var(--n400);
      font-size:13px; padding:4px 6px; border-radius:6px; opacity:.45; transition:opacity .12s; }
    .aufg-kopf:hover .aufg-weg { opacity:1; }
    .aufg-weg:hover { color:var(--m700); background:var(--m100); }
    .aufg-auf { padding:2px 2px 16px 21px; }
    /* Das Briefing ist Text zum LESEN, nicht zum Bearbeiten — deshalb ein ruhiger Kasten statt
       eines Eingabefelds. `white-space:pre-wrap` haelt die Zeilen des Dreh-Skripts zusammen;
       ohne sie liefe ein Skript zu einem einzigen Absatz zusammen. */
    .aufg-text { white-space:pre-wrap; font-size:13px; line-height:1.55; color:var(--n800);
      background:var(--n25); border:1px solid var(--n100); border-radius:8px; padding:10px 12px;
      max-height:340px; overflow-y:auto; }
    .aufg-knoepfe { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
    /* Das Notizfeld nimmt die volle Breite (Ninas Vorgabe 27.08.2026: „soll unter die Überschrift
       und sich über die ganze Breite erstrecken"). Ein <textarea> ohne Breitenangabe fällt sonst
       auf die Browser-Vorgabe von rund 166px zurück — dieselbe Falle wie am 24.08. in den
       Karten des Markenprofils. `resize:vertical`, nicht `both`: waagrecht ziehbar liefe es
       aus der Karte heraus. */
    .aufg-auf .form-textarea { width:100%; box-sizing:border-box; resize:vertical; }
    /* ── ZUSTELLWEG-WAHL (27.08.2026) ──
       Zwei grosse Flächen statt zweier kleiner Punkte: Die Wahl hat Folgen (ein Zugang wird
       vergeben oder nicht), da soll man nicht danebentippen.
       ⚠️ Der gesperrte Weg wird ABGEBLENDET, nicht ausgeblendet. Wer ihn nicht sieht, sucht ihn;
          wer ihn grau sieht, liest daneben, warum er nicht geht — und was zu tun ist. */
    .zw-wahl { display:flex; gap:11px; align-items:flex-start; padding:13px 15px; margin-top:8px;
      border:1.5px solid var(--n200); border-radius:10px; cursor:pointer; background:var(--n0);
      transition:border-color .15s, background .15s; }
    .zw-wahl:hover { border-color:var(--o500); background:var(--o50); }
    .zw-wahl input { margin-top:3px; flex:0 0 auto; width:16px; height:16px; cursor:pointer; }
    .zw-wahl > span { display:flex; flex-direction:column; gap:3px; min-width:0; }
    .zw-wahl:has(input:checked) { border-color:var(--o500); background:var(--o50); }
    .zw-wahl.zw-gesperrt { opacity:.6; cursor:default; background:var(--n25); }
    .zw-wahl.zw-gesperrt:hover { border-color:var(--n200); background:var(--n25); }
    /* Der Weg zu den Zugängen muss anklickbar bleiben, auch wenn die Fläche gesperrt ist. */
    .zw-wahl.zw-gesperrt .card-link { pointer-events:auto; cursor:pointer; }
    /* Überfällig = der Termin des Beitrags ist durch, die Aufgabe steht noch offen.
       ⚠️ Magenta ist in dieser Oberfläche dem LÖSCHEN vorbehalten — deshalb das warme Braun der
          übrigen Warnhinweise (--warn), nicht die Gefahrenfarbe. Es ist ein Hinweis, kein Alarm. */
    .aufg-meta.aufg-spaet { color:var(--warn); font-weight:600; }
    .seiten-kapitel .aufg-zahl { white-space:normal; }
    @media (max-width:900px) { .aufg-meta { flex:none; width:100%; order:3; padding-left:19px; }
      .aufg-kopf { flex-wrap:wrap; } }

    /* Der erklärende Satz UNTER einer Kapitel-Überschrift. Er gehört zur Überschrift, nicht zum
       ersten Feld — deshalb steht sein Abstand hier und nicht als `style="margin-bottom"` im
       Markup. Genau solche handgesetzten Werte waren am 26.08. die Ursache für die ungleichen
       Abstände im Markenprofil (14px hier, 4px daneben). */
    .nc-section + .nc-hint { display:block; margin-bottom:12px; line-height:1.55; }
    /* 🔻 02.09.2026 (Ninas Vorgabe): Bis dahin ZWEI Spalten — links die Wochenwahl, rechts
       „Schwerpunkt / Motto". Mit dem vorläufig stillgelegten Motto blieb rechts nichts übrig;
       eine einspaltige Karte über die volle Breite hätte ein Auswahlfeld und einen Knopf auf
       1188px auseinandergezogen. Jetzt EINE Spalte, die Karte mittig und schmal. */
    .kim-start-grid { display:grid; grid-template-columns:1fr;
      gap:22px; padding:16px 20px 24px; align-items:start; }
    /* Weniger als die halbe Breite, mittig — links und rechts bleibt Weissraum.
       ⚠️ `margin-inline:auto` wirkt nur, wenn die Karte eine Breite HAT: ein Block-Element
          nimmt sonst die volle Breite und hat nichts zu zentrieren. Deshalb beides zusammen. */
    .kim-start-karte { max-width:460px; margin-inline:auto; }
    /* 🔻 05.09.2026 (Ninas Vorgabe): die Startkarte ist DURCHGEHEND lilac — derselbe Ton, den der
       Kartenkopf ohnehin trägt (--kopf-ton), jetzt über die ganze Karte — und ohne Linie unter
       „Redaktionsplan starten". Kopf und Körper gehen so nahtlos ineinander über. Der Ton kommt
       aus der Karten-Variablen, nicht als eigener Wert: „gleich heisst gleich". */
    /* 🔻 Am selben Tag (05.09.2026) wieder aufgehoben: Die Startkarte trägt DENSELBEN Verlauf wie
       jede Karte (siehe `.card` weiter unten) — keine eigene Hintergrundregel mehr. Lehre aus dem
       ersten Anlauf bleibt: `.card { background }` steht später im Blatt; eine einfache Klasse
       davor bleibt wirkungslos (Spezifität schlägt Reihenfolge). */
    /* Platz nach unten, damit der aufgeklappte Wochen-Kalender nicht auf der naechsten Karte
       zu liegen scheint. Der Kalender selbst braucht rund 300 px. */
    .card.card-offen { margin-bottom:44px; }
    /* 🔻 02.09.2026 (Ninas Befund: „runde die orange Linie links und rechts ab"):
       Bei den übrigen Karten rundet `overflow:hidden` den Streifen an den Ecken ab. Genau das
       fehlt HIER — `.card.card-offen` trägt `overflow:visible`, damit der Wochen-Kalender
       aufklappen kann (24.08.2026: er wurde sonst halbiert). Der Streifen lief deshalb als
       einziger eckig über die volle Breite.
       🔑 Dieselbe Lösung wie bei der Sidebar-Karte: ein `border-top` folgt dem `border-radius`
          seines Elements von selbst — ohne abschneidenden Container und ohne dass ein 3px
          hohes Element einen 12px-Radius zeigen müsste (was der Browser ohnehin stutzt). */
    /* 🔻 04.09.2026: beide Regeln entfallen — es gibt keinen Streifen mehr, den es zu runden gälte
       (Ninas Vorgabe: orange Linie nur an den vier Kennzahl-Kacheln). */
    @media (max-width:900px) { .kim-start-grid { grid-template-columns:1fr; } }
    /* Die Marken-Punkte sind <button> — sie waren bis zum 23.08.2026 Reiter über den Karten und
       haben ihre IDs behalten, damit showClientTab() und die Paket-Logik weiter greifen. Ein Knopf
       bringt eigene Vorgaben mit; hier auf die Optik eines Navigationspunktes zurückgesetzt. */
    #sidebar-marke button.nav-item { width:100%; text-align:left; border:0; background:none;
      font-family:'Barlow',sans-serif; font-size:13px; font-weight:400; letter-spacing:0;
      text-transform:none; color:var(--n700); }
    #sidebar-marke button.nav-item:hover { background:var(--n100); color:var(--n900); }
    #sidebar-marke button.nav-item.active { background:var(--o50); color:var(--o700); font-weight:600; }
    .mw-menu { display:none; position:absolute; top:38px; left:0; min-width:252px; max-height:60vh;
               overflow-y:auto; padding:5px; background:var(--n0); border:1px solid var(--n150);
               border-radius:12px; box-shadow:0 8px 28px rgba(28,28,28,0.12); z-index:200; }
    .mw-menu.open { display:block; }
    .mw-item { display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:none;
               border-radius:8px; background:none; cursor:pointer; text-align:left;
               font-family:'Barlow',sans-serif; }
    .mw-item:hover { background:var(--n50); }
    .mw-item.on { background:var(--o50); }
    .mw-item-text { min-width:0; flex:1; }
    .mw-item-name { display:block; font-size:13px; font-weight:600; color:var(--black);
                    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mw-item-paket { display:block; font-size:11px; color:var(--n600); }
    .mw-haken { flex:none; font-size:12px; font-weight:700; color:var(--o700); }
    .client-selector { display:flex; align-items:center; gap:7px; padding:5px 11px; background:var(--n0); border:1.5px solid var(--n200); border-radius:8px; cursor:pointer; transition:border-color 0.15s; }
    .client-selector:hover { border-color:var(--n300); }
    .client-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); }
    .client-name { font-size:12px; font-weight:700; }
    .client-arrow { font-size:9px; color:var(--n500); }
    .agency-badge { font-size:9px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; background:rgba(202,153,197,0.15); color:var(--magenta); padding:2px 8px; border-radius:6px; }
    .btn-cta { background:var(--o700); color:var(--n0); border:none; padding:8px 17px; border-radius:8px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; transition:opacity 0.15s,transform 0.1s; white-space:nowrap; }
    .btn-cta:hover { opacity:0.88; transform:translateY(-1px); }
    .btn-ghost { background:transparent; color:var(--black); border:1.5px solid var(--n200); padding:7px 14px; border-radius:8px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
    .btn-ghost:hover { border-color:var(--black); }
    .notif-btn { width:34px; height:34px; border-radius:8px; border:1.5px solid var(--n150); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; position:relative; }
    .notif-dot { position:absolute; top:5px; right:5px; width:7px; height:7px; background:var(--orange); border-radius:50%; border:1.5px solid var(--cloud); }

    .content { padding:26px 30px; flex:1; }
    .view { display:none; }
    .view.active { display:block; }

    /* ── TYPOGRAPHY ── */
    .page-header { margin-bottom:22px; }
    .page-eyebrow { font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--lilac); margin-bottom:5px; }
    .page-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:30px; text-transform:uppercase; letter-spacing:0.01em; line-height:1; }
    .page-sub { margin-top:5px; font-size:13px; font-weight:300; color:var(--n500); }

    /* ── STATS ── */
    .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:22px; }
    /* ── KARTEN ──────────────────────────────────────────────────────────────────
       Alle Karten stehen auf Weiß. Unterschieden werden sie oben durch einen 3 px
       schmalen Streifen: `--akzent` setzt seine Farbe, sonst gilt das Marken-Orange.
       Vorher trugen die vier Statistik-Karten je eine VOLLE Farbfläche (schwarz,
       magenta, lilac, eierschale). Auf weißem Grund wären das vier Farbblöcke
       nebeneinander — der Streifen behält die Unterscheidung, ohne die Fläche. */
    .stat-card { background:var(--n0); border:1px solid var(--n200); border-radius:12px; padding:18px 20px; position:relative; overflow:hidden; color:var(--n900); }
    .stat-dark { --akzent:var(--neongelb); }   /* 05.09.2026: war n900 (Schwarz) — Nina: Neongelb #EFE931 */
    .stat-accent { --akzent:var(--m700); }
    .stat-lilac { --akzent:var(--li500); }
    .stat-warm { background:var(--n0); --akzent:var(--y500); }
    /* War bis 22.08.2026 ein dekorativer heller Kreis in der Ecke — auf dunklem Grund
       ein leichter Schimmer, auf weißem unsichtbar. Jetzt trägt das Element den Streifen. */
    /* 🔻 04.09.2026 (Ninas Vorgabe): Die orange Linie an der Oberkante gibt es NUR NOCH an den
       vier Kennzahl-Kacheln unter „Redaktionsplan" (.stat-card). Vorher stand sie an jeder
       Karte (.card, .kpi-card, .trent-card, Sidebar-Karte, Startkarte, Gruss, KPI-Bericht). */
    /* 🔻 05.09.2026 (Ninas Vorgabe): auch hier KEINE Linie mehr, sondern ein Verlauf in der
       Farbe, die vorher die Linie hatte — oben am stärksten, bis zur Kartenmitte ausgelaufen.
       🔑 `color-mix` mischt die volle Akzentfarbe auf 30 % mit Weiss: So bleibt die Schrift
          (Beschriftung n600, Zahl n900) auf allen vier Kacheln lesbar — auch auf der dunklen.
          Die Zeile davor (`background:var(--n0)`) ist die Rückfalllinie für Browser ohne
          color-mix: Sie ignorieren die Verlaufszeile und zeigen Weiss statt gar nichts. */
    /* 05.09.2026, dritter Dreh (Ninas Vorgabe „alle Kacheln weiss"): auch die Kennzahl-Kacheln
       WEISS. Der Farbverlauf je Kachel (color-mix aus --akzent, 18 %, 18px voll, 90px weiss) galt
       nur wenige Stunden; --akzent bleibt gesetzt, falls er zurückkommt. */
    .stat-card { background:var(--n0); }
    /* 🔻 `.stat-eyebrow` (9px/600/.16em) ist am 27.08.2026 entfallen. Sie war eine DRITTE
       Beschriftungs-Ebene, die der grauen `.form-label` (10px/700/.12em) beinahe glich — und
       „beinahe gleich" ist laut Ninas Urteil schlimmer als ein offener Unterschied. Die vier
       Kennzahl-Kacheln tragen jetzt `.form-label` wie jede andere Beschriftung; geblieben ist
       nur der Abstand zur grossen Zahl darunter, und der steht hier statt im Markup. */
    .stat-card > .form-label { display:block; margin-bottom:7px; }
    .stat-number { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:40px; line-height:1; margin-bottom:2px; color:var(--n900); }
    .stat-warm .stat-number { color:var(--n900); }
    .stat-label { font-size:12px; font-weight:300; color:var(--n600); }
    .stat-delta { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:600; margin-top:6px; color:var(--o700); }
    .stat-warm .stat-delta { color:var(--o700); }
    .goal-bar-wrap { background:var(--n150); border-radius:4px; height:5px; overflow:hidden; margin:10px 0 5px; }
    .goal-bar-fill { height:5px; border-radius:4px; background:var(--orange); transition:width 0.55s ease; }

    /* ── LAYOUT ── */
    .two-col { display:grid; grid-template-columns:1fr 360px; gap:16px; align-items:start; }
    .three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

    /* ── CARDS ── */
    /* 05.09.2026, zweiter Dreh: Karten WEISS — das Lilac trägt jetzt die Seite (.main). Der Verlauf
       an der Karte (var(--kopf-ton) 0 … var(--verlauf-ende)) galt nur wenige Stunden. */
    .card { background:var(--n0); border-radius:12px; border:1px solid var(--n200); overflow:hidden; margin-bottom:14px; position:relative; }
    .card:last-child { margin-bottom:0; }
    /* ── KARTENKOPF — EIN Aussehen für alle (Ninas Vorgabe 02.09.2026) ──────────────────────
       Vorher trugen die 13 Kartenköpfe DREI verschiedene Gestaltungen: zehn schlicht weiss,
       drei per `style="…"` im Markup lilac (in zwei verschiedenen Stärken, 0.12 und 0.22) und
       einer (`#newsCard`) voll lilac mit weisser Schrift. Die Unterschiede waren historisch
       gewachsen, nicht entschieden — genau die „beinahe gleich"-Lage, die laut Ninas Urteil
       schlimmer ist als ein offener Unterschied.

       Jetzt gilt dieser eine Satz für JEDEN Kartenkopf, und zwar HIER statt im Markup. Damit
       sieht eine neue Karte automatisch richtig aus, ohne dass jemand einen Inline-Stil
       abschreiben muss. Zwei Wächter in `dashboard_layout_test.js` halten das offen:
       sie melden einen Kartenkopf mit eigenem Hintergrund und einen Kopf-Badge ohne Klasse.

       🔑 Die beiden Töne sind DASSELBE Lilac (--li500 = #CA99C5 = rgb(202,153,197)) in zwei
          Deckungen: der Kopf trägt 0.12, der Badge darauf 0.22. Deshalb hebt sich der Badge ab,
          ohne eine zweite Farbe einzuführen. Als Variablen, damit ein späterer Ton an EINER
          Stelle geändert wird und nicht an neun. */
    /* 🔑 EIN INNENMASS FUER DIE GANZE KARTE (Ninas Baukasten 02.09.2026).
       Kopf, Körper, Filterzeile und die Tabelle darunter rücken um DENSELBEN Betrag ein. Vorher
       war das dreimal getrennt festgelegt: der Kopf 20px, `.card-body` 24px, und die Tabelle
       trug ihre 20px als handgeschriebene Ausnahme („bündig mit Card-Header-Padding") — ein
       4px-Versatz zwischen Kopf und Körper, den man nicht benennen, aber sehen kann.
       Wer das Mass ändern will, ändert es hier einmal. */
    /* ── DIE SPERRUNG (Zeichenabstand) — festgelegt am 02.09.2026 auf Ninas Vorgabe ─────────
       Vorher trugen die Überschriften SIEBEN verschiedene Werte: 0.02em (Seitentitel,
       Berichtstitel, KW-Kopf), 0.03em (Ideen-Karte), 0.04em (Kartentitel, Einstellungs-Karte),
       0.06em (Abschnitt) — und die Kleinbeschriftungen 0.12em bzw. 0.14em. Kein Wert war
       falsch, aber zusammen ergaben sie kein Bild: Zwei gleich grosse Überschriften
       nebeneinander liefen unterschiedlich weit auseinander.

       ZWEI Ebenen, je ein Wert:
         · `--sperrung-titel` (0.04em) — alles in Barlow Condensed, Versalien, ab 13px.
           0.04em ist der Wert, den die meisten Kartentitel schon trugen; er hält auch bei
           30px, weil Versalien mehr Luft vertragen als Gemischtschrift.
         · `--sperrung-label` (0.12em) — die kleinen Beschriftungen (10px). Sie brauchen
           deutlich mehr, sonst kleben Versalien auf dieser Grösse zusammen.
       Wer den Wert ändern will, ändert ihn hier — nicht an neun Stellen. */
    :root { --sperrung-titel:0.04em; --sperrung-label:0.12em; }

    .card { --kopf-ton:rgba(202,153,197,0.12); --kopf-linie:rgba(202,153,197,0.20); --kopf-badge:rgba(202,153,197,0.22);
      --karte-innen:20px; }
    /* ── DER VERLAUF statt Kopf-Fläche + Linie (Ninas Vorgabe 05.09.2026) ──────────────────────
       Vorher: der Kopf lilac hinterlegt, darunter eine 1px-Linie. Jetzt trägt die KARTE einen
       Verlauf von Lilac nach Weiss: volle Stärke über die Kopfhöhe (--kopf-hoehe), dann — dort,
       wo die Linie sass — beginnt er abzuschwächen und läuft über ~100px in den Körper aus.
       🔑 Der Verlauf sitzt an der Karte, nicht am Kopf: Ein Kopf endet an seiner Unterkante, der
          Verlauf muss aber darüber hinaus in den Körper reichen. Der Kopf selbst wird durchsichtig.
       ⚠️ `--kopf-ton-0` ist derselbe Ton mit Deckkraft 0 — kein `transparent`, sonst mischt der
          Browser über Grau. Wer den Ton ändert, ändert beide. */
    /* Ninas Nachtrag 05.09.: „näher an der oberen Kante beginnen, weniger lang bis wirklich weiss" —
       volle Stärke nur die ersten 18px, bei 90px ist die Karte weiss (vorher 48px / 148px). */
    .card, .seiten-inhalt { --kopf-ton-0:rgba(202,153,197,0); --verlauf-voll:18px; --verlauf-ende:90px; }
    .card-header { padding:15px var(--karte-innen) 12px; display:flex; align-items:center; justify-content:space-between; background:transparent; border-bottom:0; }
    .card-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:var(--sperrung-titel); }
    .card-link { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--orange); cursor:pointer; }
    /* Der Badge rechts im Kopf („STAND 02.09.2026" im Vorbild). Eigene Klasse statt einer Regel
       auf `.card-header .badge`: die Status-Badges (`.badge-geplant` usw.) sollen ihre eigenen
       Farben behalten, falls je einer in einem Kopf landet. Der Wächter sorgt dafür, dass diese
       Klasse nicht vergessen wird. */
    .badge-kopf { background:var(--kopf-badge); color:var(--magenta); }
    /* Der Kartenkörper. Bis zum 02.09.2026 gab es ihn NICHT: jede Karte löste ihr Innenmass
       selbst — mal über eine eigene Kennung (`#newsBody`), mal per `style="padding:16px"` im
       Markup. Damit war der Kopf einheitlich und alles darunter Auslegungssache.
       Das Mass ist bewusst dasselbe wie in `.seiten-inhalt` (22px 24px), damit die auf Karten
       umgestellte Freigabe-Links-Seite ihr gewohntes Innenmass behält und nicht enger wirkt. */
    .card-body { padding:18px var(--karte-innen); min-width:0; }
    /* Die Filterzeile direkt unter dem Kartenkopf (Marken-Auswahl im Archiv und bei den
       Freigabe-Links). Eigene Klasse statt `.card-body`, weil darunter eine Tabelle folgt, die
       ihren eigenen oberen Rand mitbringt — ein zweites Innenmass unten ergäbe eine Lücke. */
    .card-filter { padding:16px var(--karte-innen) 4px; }
    /* Der Erklärtext direkt unter einem Kartenkopf („was steht in dieser Karte?").
       🔻 Er stand an drei Stellen in DREI Fassungen: Kampagnen 8px oben und 20px seitlich,
          Kunden-Ideen und Meldungen 0px oben und 16px seitlich — und zweimal mit einem
          handgeschriebenen `color:#999`, das auf Weiss nur 2,8:1 erreicht und damit unter der
          Lesbarkeitsgrenze von 4,5:1 liegt. Ninas Befund vom 02.09.2026 („der Abstand zur
          Erklärschrift ist viel zu klein") betraf genau die beiden mit 0px.
       Das Mass folgt Ninas Vorbild (Kampagnen); die Schrift kommt aus `.nc-hint`, damit sie
       nicht zum vierten Mal einzeln festgelegt wird. */
    .card-erklaerung { padding:8px var(--karte-innen) 4px; line-height:1.6; }
    /* ── „MEHR INFORMATION" — das eingekreiste i (Ninas Vorgabe 02.09.2026) ──────────────────
       Neben jeder Überschrift, der eine Erklärung folgt, steht ein kleiner grauer Knopf; der
       Text erscheint beim DRÜBERFAHREN rechts daneben. Vorher standen die Erklärungen dauerhaft
       da und machten jede Seite länger, obwohl man sie nach dem zweiten Mal nicht mehr liest.

       🔑 HOVER ALLEIN GENÜGT NICHT. Auf einem Touchgerät gibt es kein „Drüberfahren" — dort
          bliebe der Text unerreichbar. Deshalb DREI Wege zum selben Ergebnis:
            · `:hover`        — Maus, Ninas Wunsch
            · `:focus-within` — Tastatur (Tab auf den Knopf)
            · `.info-offen`   — Klick/Tipp, gesetzt vom Skript (Touch)
       ⚠️ Der Text ist absolut positioniert: Er darf beim Erscheinen NICHTS verschieben. Läge er
          im Fluss, sprängen Karte und Seite bei jeder Mausbewegung.
       ⚠️ `align-items:baseline` am Umschlag: Nur so sitzt der Kreis auf der Grundlinie der
          Schrift daneben — mit `center` schwebt er bei grossen Überschriften zu hoch. */
    .info-wrap { position:relative; display:inline-flex; align-items:baseline; }
    /* Grau statt orange und um ein Drittel kleiner (16px → 11px): Er ist ein Angebot, kein
       Hinweis auf einen Fehler — und soll die Überschrift nicht überstrahlen. */
    .info-knopf { display:inline-flex; align-items:center; justify-content:center;
      width:11px; height:11px; margin-left:6px; padding:0; flex:0 0 auto;
      border:1px solid var(--n400); border-radius:50%; background:none; cursor:help;
      font-family:'Barlow',sans-serif; font-size:8px; font-weight:700; line-height:1;
      text-transform:none; letter-spacing:0; color:var(--n600);
      position:relative; top:-1px; transition:border-color 0.12s, color 0.12s; }
    .info-knopf:hover, .info-wrap:focus-within .info-knopf { border-color:var(--n700); color:var(--n900); }
    /* Der Text — EIN Aussehen für alle. Die Typografie kommt aus `.nc-hint`, hier stehen nur
       Lage, Breite und der Kasten darum. */
    .info-text { display:none; position:absolute; left:100%; top:-6px; z-index:40;
      margin-left:9px; width:320px; max-width:min(320px, 60vw);
      background:var(--n0); border:1px solid var(--n200); border-radius:8px;
      padding:9px 11px; box-shadow:0 6px 18px rgba(28,28,28,.10);
      text-transform:none; letter-spacing:0; line-height:1.55; text-align:left;
      font-weight:400; white-space:normal; }
    .info-wrap:hover > .info-text,
    .info-wrap:focus-within > .info-text,
    .info-text.info-offen { display:block; }
    /* Auf schmalen Schirmen ist rechts kein Platz — dort klappt der Text unter die Überschrift,
       statt aus dem Bild zu laufen. */
    @media (max-width:720px) {
      .info-text { left:auto; right:0; top:calc(100% + 6px); margin-left:0; width:min(320px, 86vw); }
    }
    /* ── BREITE VARIANTE für umfangreiche Erklärungen mit Tabellen (15.09.2026) ─────────────────
       Anlass: Die Grenzen je Kanal (Visual-Fenster, Asset-Bibliothek) passten nicht in 320 px — fast
       jede Zeile brach um, und im Visual-Fenster schnitt die Fußleiste das Ende ab (Ninas Screenshot).
       🔑 Klappt UNTER der Überschrift auf statt rechts daneben: Rechts neben einem Titel ist für 760 px
          selten Platz, darunter fast immer.
       🔑 `top:100%` OHNE Abstand: Eine Lücke zwischen Knopf und Kasten unterbräche das Überfahren —
          wer mit der Maus hineinfährt, um zu scrollen, verlöre den Kasten auf halbem Weg.
       🔑 Höchsthöhe + eigenes Scrollen: So bleibt das Ende erreichbar, wenn darunter wenig Platz ist.
          `overflow:auto` rundet hier keine Ecken ab (die Baukasten-Regel gegen `overflow:hidden` gilt
          Karten mit Aufklapp-Menüs) — es macht nur den Inhalt erreichbar.
       ⚠️ Die Werte hier sind nur der Rückfall. Beim Öffnen setzt `infoBreitPositionieren()`
          (js/11-upload-visual.js) `position:fixed` samt gemessener Lage — sonst schneidet der
          Scroll-Bereich des Visual-Fensters den Kasten rechts und unten ab. */
    .info-text.info-text-breit { left:0; top:100%; margin-left:0; width:min(760px, calc(100vw - 48px));
      max-width:none; max-height:min(72vh, 640px); overflow:auto; padding:12px 16px 10px; z-index:260; }
    .info-grenzen-einleitung { margin-bottom:2px; }
    .info-grenzen-titel { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px;
      text-transform:uppercase; letter-spacing:var(--sperrung-titel); color:var(--n900); margin:9px 0 2px; }
    .info-tabelle-rahmen { overflow-x:auto; }
    .info-grenzen-tabelle { width:100%; border-collapse:collapse; font-size:12px; line-height:1.35; }
    .info-grenzen-tabelle th { text-align:left; font-weight:700; color:var(--n600); white-space:nowrap;
      padding:3px 14px 3px 0; border-bottom:1px solid var(--n200); }
    .info-grenzen-tabelle td { padding:3px 14px 3px 0; border-bottom:1px solid var(--n100); vertical-align:top; color:var(--n800); }
    .info-grenzen-tabelle tr:last-child td { border-bottom:0; }
    .info-grenzen-tabelle tbody td:first-child { font-weight:700; color:var(--n900); white-space:nowrap; }
    .info-grenzen-fuss { margin-top:10px; padding-top:8px; border-top:1px solid var(--n100); color:var(--n600); }
    /* Handy: als Blatt am unteren Rand — neben oder unter einem Titel ist dort kein Platz für Tabellen. */
    @media (max-width:720px) {
      .info-text.info-text-breit { position:fixed; left:12px; right:12px; top:auto; bottom:12px; width:auto; max-height:70vh; }
    }

    /* ── BADGES ── */
    .badge { display:inline-flex; align-items:center; font-size:9px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:3px 8px; border-radius:6px; white-space:nowrap; }
    .badge-geplant    { background:var(--n100); color:var(--n600); }
    .badge-produktion { background:rgba(253,204,104,0.22); color:var(--warn); }
    .badge-fertig     { background:rgba(202,153,197,0.22); color:var(--magenta); }
    .badge-eingeplant { background:rgba(236,103,27,0.12); color:var(--orange); }
    .badge-freigabe   { background:rgba(80,180,80,0.14); color:var(--succ); }

    /* ── MELDUNGS-ABZEICHEN (31.08.2026, Ninas Farbvorgabe) ────────────────────────────────
       🔴 WARUM EIGENE KLASSEN statt der Plan-Abzeichen oben:
          Die Meldungs-Liste lieh sich bis heute `badge-eingeplant`, `badge-fertig` und
          `badge-produktion`. Die tragen in der PLAN-Tabelle eine ganz andere Bedeutung — und
          `index.html` definiert sie dort per Inline-Block mit `!important` nochmals um
          (New=rot, eingeplant/veroeffentlicht=gruen). Folge: „Freigabe ausstehend" erschien
          GRUEN, weil im Plan „eingeplant" gruen heisst. Geliehene Klassen tragen fremde
          Entscheidungen mit — dieselbe Lehre wie bei den Ueberschriften (25.08.2026).
       ⚠️ Deshalb bewusst NEUE Namen: Die alten stehen im Inline-Block unter `!important`;
          ein Ueberschreiben von hier aus wuerde gar nicht greifen. */
    .badge-meldung-warten    { background:var(--n100); color:var(--n600); }              /* wartet auf Freigabe = grau */
    .badge-meldung-frei      { background:rgba(46,125,50,0.16); color:var(--succ); }     /* Freigabe erteilt = gruen */
    .badge-meldung-korrektur { background:rgba(236,103,27,0.16); color:var(--o700); }    /* Kunde hat bearbeitet = orange */
    /* ── SPALTEN DER MELDUNGS-LISTE (31.08.2026, Ninas Vorgabe: Kopfzeile statt Fliesstext) ──
       🔑 Die Breiten sind FEST, und das ist der Kern: Vorher war jede Spalte so breit wie ihr
          Inhalt („Blog · 08.09." schmaler als „Instagram · 07.09."). Eine Kopfzeile darueber
          haette bei jeder Zeile woanders gestanden — eine Ueberschrift, die nicht ueber ihrer
          Spalte steht, ist schlimmer als gar keine.
       ⚠️ Waagerechte Masse (gap, padding) muessen zu `.ag-task-item` passen (index.html) —
          sonst laufen Kopf und Zeilen auseinander. */
    /* 🔻 05.09.2026 (Ninas Vorgabe „fällt aus der Rolle"): Die Liste ist jetzt eine echte .plan-table
       wie die Freigabe-Links — Kopfzeile, Spaltenbreiten und Schriften kommen von dort. Die
       eigenen Flex-Spalten (.meldung-kopf, .meldung-sp-*) samt Handy-Regel sind damit entfallen;
       auf schmalen Schirmen greift die Karten-Darstellung der .plan-table (data-spalte). */
    .meldung-markiert > td { background:rgba(236,103,27,0.06); }
    .meldung-aktion        { display:flex; align-items:center; gap:10px; padding:8px 16px;
                             border-bottom:1px solid var(--n150); background:var(--n50); }
    /* Nicht nur Farbe: Das Wort selbst sagt es. Wer Rot nicht unterscheiden kann, liest es trotzdem. */
    .meldung-spaet { color:var(--dang); font-weight:700; }
    /* Hinweise ohne Spalten (Klärungsbedarf, Serien, Kunden-Ideen): eine Zeile über die volle
       Breite, leicht orange — wie zuvor, nur als Tabellenzeile. */
    .meldung-hinweis > td { background:rgba(236,103,27,.06); }
    .meldung-hinweis-text { white-space:normal; margin-top:4px; }
    .meldung-caret { color:var(--o700); }
    .meldung-kommentar > td { cursor:default; }
    .meldung-kommentar-text { padding:10px 12px; background:rgba(236,103,27,.07); border-radius:8px; font-size:13px; color:var(--o900); white-space:pre-wrap; user-select:text; cursor:text; }
    /* Fehlergrund unter dem Status (07.08.2026). publish und der Ayrshare-Webhook schreiben seit
       jeher `fehler_grund` in die Datenbank — angezeigt wurde er nie. Bewusst KEIN white-space:nowrap:
       der Text soll in der Zelle umbrechen dürfen, statt die Tabelle zu sprengen. Voller Text im title. */
    .status-fehlergrund { margin-top:4px; max-width:220px; font-size:10px; line-height:1.35; color:var(--dang); cursor:help; white-space:normal; overflow-wrap:anywhere; }
    .kanal-badge { font-size:9px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:3px 8px; border-radius:6px; white-space:nowrap; }
    /* Jeder Kanal führt seine Farbe zusätzlich als Variable `--kanal-farbe`. Damit können
       andere Bauteile (z. B. die Filter-Chips über dem Plan) DIESELBE Farbe verwenden, ohne
       sie zu wiederholen — ein Kanal, eine Farbe, an jeder Stelle der Suite. */
    .k-insta      { --kanal-farbe:#a837c5; background:rgba(168,55,197,0.13);  color:#a837c5; }
    .k-linkedin   { --kanal-farbe:#0077B5; background:rgba(0,119,181,0.13);   color:#0077B5; }
    .k-youtube    { --kanal-farbe:#cc0000; background:rgba(255,0,0,0.10);     color:#cc0000; }
    .k-tiktok     { --kanal-farbe:var(--n900); background:rgba(18,18,18,0.10);    color:var(--n900); }
    .k-facebook   { --kanal-farbe:#1877F2; background:rgba(24,119,242,0.13);  color:#1877F2; }
    .k-newsletter { --kanal-farbe:#db2777; background:rgba(236,72,153,0.13);  color:#db2777; }
    .k-blog       { --kanal-farbe:#0d9488; background:rgba(20,184,166,0.13);  color:#0d9488; }
    .k-threads    { --kanal-farbe:var(--n900); background:var(--n150);    color:var(--n900); }
    .k-x          { --kanal-farbe:var(--n900); background:var(--n150);    color:var(--n900); }
    .k-gmb        { --kanal-farbe:#4285F4; background:rgba(66,133,244,0.13);  color:#4285F4; }
    .k-other      { --kanal-farbe:var(--n500); background:var(--n100);    color:var(--n600); }
    .kpi-up { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; color:var(--succ); }
    .kpi-down { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; color:var(--dang); }

    /* ── UPCOMING ROWS ── */
    .upcoming-row { display:grid; grid-template-columns:38px 1fr 88px 80px 108px; align-items:center; padding:11px 20px; border-bottom:1px solid var(--n100); gap:11px; cursor:pointer; transition:background 0.12s; }
    .upcoming-row:last-child { border-bottom:none; }
    .upcoming-row:hover { background:rgba(236,103,27,0.04); }
    .upcoming-hdr { font-size:9px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--n600); display:grid; grid-template-columns:38px 1fr 88px 80px 108px; gap:11px; padding:8px 20px; }
    .date-day { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:17px; color:var(--black); line-height:1; text-align:center; }
    .date-month { font-size:9px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--n600); text-align:center; }
    .upcoming-title { font-size:12px; font-weight:600; margin-bottom:2px; }
    .upcoming-meta { font-size:11px; color:var(--n500); }

    /* ── ACTIVITY ── */
    .activity-item { display:flex; align-items:flex-start; gap:10px; padding:11px 20px; border-bottom:1px solid var(--n100); }
    .activity-item:last-child { border-bottom:none; }
    .activity-icon { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; margin-top:1px; }
    .ai-lilac { background:rgba(202,153,197,0.15); }
    .ai-orange { background:rgba(236,103,27,0.12); }
    .ai-green  { background:rgba(80,180,80,0.12); }
    .ai-yellow { background:rgba(253,204,104,0.2); }
    .activity-text { font-size:12px; line-height:1.4; margin-bottom:2px; }
    .activity-text strong { font-weight:700; }
    .activity-time { font-size:10px; color:var(--n600); }

    /* ── TRENT CARD ── */
    /* Wie die Statistik-Karten: weiße Fläche, Lilac-Streifen oben. Der Avatar behält seinen
       dunklen Verlauf — weiße Schrift darauf hält 5,3:1 und bleibt lesbar. */
    .trent-card { background:var(--n0); border:1px solid var(--n200); border-radius:12px; padding:18px 20px; color:var(--n900); margin-bottom:13px; position:relative; overflow:hidden; --akzent:var(--li500); }
    .trent-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
    .trent-avatar { width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,var(--magenta),var(--lilac)); display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:12px; color:var(--n0); }
    .trent-name { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:0.04em; }
    .trent-sub { font-size:10px; font-weight:300; color:var(--n600); }
    .progress-bar-wrap { background:var(--n150); border-radius:4px; height:3px; margin:9px 0 5px; }
    .progress-bar-fill { height:3px; border-radius:4px; background:var(--o500); width:65%; }

    /* ── KPI WIDGET ── */
    /* Bis 22.08.2026 eine schwarze Fläche. Jetzt weiß mit orangem Streifen — die Zahlen
       tragen die Aufmerksamkeit, nicht der Hintergrund. */
    .kpi-card { background:var(--n0); border:1px solid var(--n200); border-radius:12px; padding:18px 20px; color:var(--n900); margin-bottom:13px; position:relative; overflow:hidden; --akzent:var(--o500); }
    .kpi-insight-row { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--n150); }
    .kpi-insight-row:last-child { border-bottom:none; }
    .kpi-format-name { font-size:12px; font-weight:600; color:var(--n900); }
    .kpi-format-meta { font-size:10px; font-weight:300; color:var(--n600); margin-top:1px; }
    .kpi-bar-wrap { flex:1; margin:0 12px; background:var(--n150); border-radius:3px; height:4px; }
    .kpi-bar-fill { height:4px; border-radius:3px; }
    .kpi-bar-orange { background:var(--orange); }
    .kpi-bar-lilac  { background:var(--lilac); }
    .kpi-bar-yellow { background:var(--yellow); }

    /* ── KANAL COLORS for table rows ── */
    .row-instagram  { background:rgba(168,55,197,0.05); }
    .row-linkedin   { background:rgba(0,119,181,0.05); }
    .row-youtube    { background:rgba(255,0,0,0.04); }
    .row-tiktok     { background:rgba(18,18,18,0.04); }
    .row-facebook   { background:rgba(24,119,242,0.05); }
    .row-newsletter { background:rgba(236,72,153,0.05); }
    .row-blog       { background:rgba(20,184,166,0.05); }

    /* ── PLAN TABLE ── */
    .plan-controls { display:flex; align-items:center; gap:9px; margin-bottom:14px; flex-wrap:wrap; }
    .kw-tabs { display:flex; background:var(--n0); border:1px solid var(--n150); border-radius:8px; overflow:hidden; }
    .kw-tab { padding:7px 16px; font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; color:var(--n500); transition:background 0.12s,color 0.12s; border-right:1px solid var(--n150); }
    .kw-tab:last-child { border-right:none; }
    .kw-tab.active { background:var(--black); color:var(--n0); }
    .filter-select { padding:7px 30px 7px 11px; border:1.5px solid var(--n200); border-radius:8px; background:var(--n0); font-family:'Barlow',sans-serif; font-size:12px; font-weight:600; color:var(--black); cursor:pointer; outline:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%231C1C1C' fill-opacity='.4' d='M5 6L0 0h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; }
    /* 05.09.2026 (Ninas Vorgabe „keine Kachel in der Kachel"): Die scrollende Hülle bleibt (neun
       Spalten brauchen sie), aber ohne eigenen Rahmen und ohne Rundung — die Tabelle sitzt direkt
       in der Karte, wie im Archiv. Vorher: border 1px n100 + radius 12px. */
    .plan-table-wrap { background:transparent; overflow-x:auto; }
    .plan-table { width:100%; border-collapse:collapse; min-width:820px; }
    /* Agentur-Übersicht: Thema-Spalte schneidet ab statt horizontalem Scrollen */
    .plan-table-wrap.agency-narrow { overflow-x:hidden; }
    .plan-table-wrap.agency-narrow .plan-table { min-width:0; table-layout:fixed; }
    .plan-table-wrap.agency-narrow .plan-table th:nth-child(1), .plan-table-wrap.agency-narrow .plan-table td:nth-child(1) { width:60px; }
    .plan-table-wrap.agency-narrow .plan-table th:nth-child(3), .plan-table-wrap.agency-narrow .plan-table td:nth-child(3) { width:30%; }
    .plan-table-wrap.agency-narrow .plan-table th:nth-child(4), .plan-table-wrap.agency-narrow .plan-table td:nth-child(4) { width:70px; }
    .plan-table-wrap.agency-narrow .plan-table th:nth-child(5), .plan-table-wrap.agency-narrow .plan-table td:nth-child(5) { width:120px; }
    .plan-table-wrap.agency-narrow .plan-table td { overflow:hidden; }
    /* 05.09.2026 (Ninas Vorgabe): Der graue Tabellenkopf endet oben nicht mehr als harte Kante,
       sondern läuft von der Linie unten nach oben weich aus — ab etwa der halben Zeilenhöhe ist
       er weiss. `to top`: unten (an der Linie) voll, oben nichts. Jede Zelle trägt denselben
       Verlauf, zusammen ergibt das EINE durchgehende Fläche. */
    .plan-table thead th { font-size:9px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--n600); padding:9px 13px; text-align:left; border-bottom:1px solid var(--n100); background:linear-gradient(to top, var(--n50) 0, rgba(247,246,244,0) 55%); white-space:nowrap; }
    .plan-table tbody tr { border-bottom:1px solid var(--n100); cursor:pointer; }
    .plan-table tbody tr:last-child { border-bottom:none; }
    .plan-table tbody tr:hover { filter:brightness(0.965); }
    .plan-table tbody tr.row-selected { outline:2px solid var(--lilac); outline-offset:-2px; }
    .plan-table td { padding:11px 13px; font-size:12px; vertical-align:middle; }
    /* Erste/letzte Spalte bündig mit dem Innenmass der Karte. Der Wert stand hier bis zum
       02.09.2026 als Zahl mit dem Hinweis „bündig mit Card-Header-Padding (20px)" — eine
       Verabredung, die beim nächsten Ändern des Kopfes stillschweigend gebrochen worden wäre.
       Jetzt ist es dieselbe Variable; ausserhalb einer `.card` bleibt es bei 20px. */
    .plan-table th:first-child, .plan-table td:first-child { padding-left:var(--karte-innen, 20px); }
    .plan-table th:last-child, .plan-table td:last-child { padding-right:var(--karte-innen, 20px); }

    /* ── AUSWAHL-SPALTE ganz links (Ninas Vorgabe 26.08.2026) ──────────────────────
       Vor der Kalenderwoche steht ein Kaestchen. Damit lassen sich Beitraege markieren und
       gemeinsam loeschen — bis dahin ging Loeschen nur einzeln aus dem Bearbeiten-Fenster.
       Schmal und ohne eigenen Rahmen: Die Spalte soll die Tabelle nicht verschieben.
       ⚠️ `padding-right:0` — sonst schoebe das grosszuegige Zellen-Padding die KW-Spalte
          sichtbar nach rechts, und der Plan waere ploetzlich breiter als der Bildschirm. */
    .plan-table th.plan-chk-th, .plan-table td.plan-chk { width:34px; padding-right:0; }
    .plan-table td.plan-chk { cursor:default; }
    .plan-table .plan-chk input[type=checkbox] { width:15px; height:15px; cursor:pointer; accent-color:var(--o500); vertical-align:middle; }
    .plan-table th.plan-chk-th input[type=checkbox] { width:15px; height:15px; cursor:pointer; accent-color:var(--o500); vertical-align:middle; }
    .plan-nr { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; color:var(--n600); }
    .plan-title-main { font-weight:600; font-size:12px; margin-bottom:2px; }
    .plan-hook { font-size:11px; font-weight:300; color:var(--n500); font-style:italic; }
    .action-btn { padding:4px 9px; border-radius:6px; border:1.5px solid var(--n200); background:transparent; font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; color:var(--black); transition:all 0.12s; white-space:nowrap; }
    .action-btn:hover { background:var(--black); color:var(--n0); border-color:var(--black); }
    .action-btn.primary { background:var(--o700); color:var(--n0); border-color:var(--o700); }
    .action-btn.approve { background:rgba(80,180,80,0.12); color:var(--succ); border-color:rgba(80,180,80,0.3); }

    /* ── FORMAT LEGEND ── */
    .format-legend { display:flex; align-items:center; gap:6px; margin-bottom:13px; flex-wrap:wrap; }
    .fmt-pill { display:flex; align-items:center; gap:4px; padding:3px 9px; border-radius:6px; font-size:10px; font-weight:700; }

    /* ── CONTENT CYCLE ── */
    .cycle-grid { display:grid; grid-template-columns:100px repeat(7,1fr); gap:4px; margin-bottom:20px; }
    .cycle-header { font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--n500); text-align:center; padding:8px 0; }
    .cycle-channel { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--n500); display:flex; align-items:center; padding:0 4px; }
    .cycle-cell { border-radius:8px; padding:5px 7px; min-height:46px; display:flex; flex-direction:column; justify-content:center; font-size:10px; font-weight:600; transition:opacity 0.12s; cursor:pointer; }
    .cycle-cell:hover { opacity:0.85; }
    .cc-empty { background:var(--n50); color:var(--n600); text-align:center; font-size:11px; }
    /* Plattform-Farben */
    .cc-instagram  { background:rgba(168,55,197,0.15);  color:#a837c5; }
    .cc-linkedin   { background:rgba(0,119,181,0.14);   color:#0077B5; }
    .cc-youtube    { background:rgba(255,0,0,0.11);     color:#cc0000; }
    .cc-tiktok     { background:rgba(18,18,18,0.10);    color:var(--n900); }
    .cc-facebook   { background:rgba(24,119,242,0.13);  color:#1877F2; }
    .cc-newsletter { background:rgba(236,72,153,0.14);  color:#db2777; }
    .cc-blog       { background:rgba(20,184,166,0.14);  color:#0d9488; }
    .cc-recommended { outline:2px dashed var(--orange); }
    /* Channel-Label Farben */
    .cycle-ch-instagram { color:#a837c5; }
    .cycle-ch-linkedin  { color:#0077B5; }
    .cycle-ch-youtube   { color:#cc0000; }
    .cycle-ch-tiktok    { color:var(--n900); }
    .cycle-ch-facebook  { color:#1877F2; }
    .cycle-ch-newsletter{ color:#db2777; }
    .cycle-ch-blog      { color:#0d9488; }
    .cycle-time { font-size:9px; font-weight:400; opacity:0.7; margin-top:2px; }

    .kpi-reco-list { display:flex; flex-direction:column; gap:10px; }
    .kpi-reco-item { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:10px; background:var(--n50); border:1px solid var(--n100); }
    .kpi-reco-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
    .kpi-reco-title { font-size:12px; font-weight:700; margin-bottom:3px; }
    .kpi-reco-text { font-size:11px; font-weight:300; color:var(--n600); line-height:1.4; }
    .kpi-reco-item.highlight { background:rgba(236,103,27,0.06); border-color:rgba(236,103,27,0.2); }

    /* ── ASSET LIBRARY ── */
    .upload-zone { border:2px dashed var(--n200); border-radius:12px; padding:36px; text-align:center; cursor:pointer; transition:border-color 0.2s,background 0.2s; margin-bottom:20px; }
    .upload-zone:hover { border-color:var(--orange); background:rgba(236,103,27,0.03); }
    .upload-icon { font-size:32px; margin-bottom:10px; }
    .upload-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:17px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
    .upload-sub { font-size:12px; font-weight:300; color:var(--n500); }
    .asset-filters { display:flex; gap:8px; margin-bottom:16px; }
    .asset-filter { padding:6px 14px; border-radius:20px; border:1.5px solid var(--n200); background:var(--n0); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; color:var(--n600); transition:all 0.12s; }
    .asset-filter.active { background:var(--black); color:var(--n0); border-color:var(--black); }
    .asset-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
    .asset-item { background:var(--n0); border-radius:10px; border:1.5px solid var(--n100); overflow:hidden; cursor:pointer; transition:border-color 0.15s,box-shadow 0.15s; }
    .asset-item:hover { border-color:var(--lilac); box-shadow:0 4px 14px rgba(28,28,28,0.08); }
    .asset-thumb { width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:28px; }
    .at-image { background:var(--n100); }
    .at-text  { background:rgba(202,153,197,0.15); }
    .at-link  { background:rgba(253,204,104,0.2); }
    .at-video { background:rgba(102,14,54,0.08); }
    .asset-info { padding:10px 12px; }
    .asset-name { font-size:11px; font-weight:600; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .asset-meta { font-size:10px; color:var(--n600); }
    .asset-tag { display:inline-block; font-size:9px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; padding:2px 6px; border-radius:4px; margin-top:5px; }
    .at-image-tag { background:rgba(240,234,215,0.8); color:var(--n500); }
    .at-text-tag  { background:rgba(202,153,197,0.2); color:var(--magenta); }
    .at-link-tag  { background:rgba(253,204,104,0.25); color:var(--warn); }
    .at-video-tag { background:rgba(102,14,54,0.1); color:var(--magenta); }

    /* ── SETTINGS ── */
    .settings-tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:2px solid var(--n150); }
    .settings-tab { padding:9px 18px; font-size:13px; font-weight:600; letter-spacing:0.04em; cursor:pointer; color:var(--n500); border-bottom:2px solid transparent; margin-bottom:-2px; transition:color 0.12s,border-color 0.12s; }
    .settings-tab.active { color:var(--orange); border-bottom-color:var(--orange); }
    .settings-panel { display:none; }
    .settings-panel.active { display:block; }
    .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-bottom:17px; }
    .form-group { display:flex; flex-direction:column; gap:5px; }
    .form-group.full { grid-column:1 / -1; }
    .form-label { font-size:10px; font-weight:700; letter-spacing:var(--sperrung-label); text-transform:uppercase; color:var(--n500); }
    .form-input,.form-textarea { padding:9px 12px; border:1.5px solid var(--n200); border-radius:8px; font-family:'Barlow',sans-serif; font-size:13px; color:var(--black); background:var(--n0); outline:none; transition:border-color 0.15s; }
    .form-input:focus,.form-textarea:focus { border-color:var(--lilac); }
    .form-textarea { resize:vertical; min-height:78px; }
    .settings-card { background:var(--n0); border-radius:12px; border:1px solid var(--n100); padding:20px; max-width:780px; margin-bottom:14px; }
    .settings-card-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:var(--sperrung-titel); margin-bottom:3px; }
    .settings-card-sub { font-size:13px; font-weight:300; color:var(--n500); margin-bottom:16px; }
    .social-connect-list { display:flex; flex-direction:column; gap:8px; }
    .social-item { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid var(--n150); border-radius:10px; }
    .social-item.connected { border-color:rgba(80,180,80,0.28); background:rgba(80,180,80,0.025); }
    .social-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
    .si-instagram { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
    .si-linkedin  { background:#0077b5; }
    .si-youtube   { background:#ff0000; }
    .ss-connected { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--succ); }

    /* ── PRICING ── */
    .pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
    .pricing-card { background:var(--n0); border-radius:14px; border:1.5px solid var(--n150); padding:24px 20px; display:flex; flex-direction:column; }
    .pricing-card.featured { background:var(--black); color:var(--n0); border-color:transparent; }
    .pricing-card.agency-max { border-color:var(--lilac); background:rgba(202,153,197,0.04); }
    .pricing-tier { font-size:9px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:4px; }
    .pricing-card:not(.featured) .pricing-tier { color:var(--lilac); }
    .pricing-card.featured .pricing-tier { color:var(--yellow); }
    .pricing-card.agency-max .pricing-tier { color:var(--magenta); }
    .pricing-name { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:28px; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:3px; }
    .pricing-who { font-size:11px; font-weight:300; margin-bottom:14px; }
    .pricing-card:not(.featured) .pricing-who { color:var(--n500); }
    .pricing-card.featured .pricing-who { color:rgba(255,255,255,0.55); }
    .pricing-price { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:36px; line-height:1; margin-bottom:2px; }
    .pricing-period { font-size:12px; font-weight:300; margin-bottom:18px; }
    .pricing-card:not(.featured) .pricing-period { color:var(--n500); }
    .pricing-card.featured .pricing-period { color:rgba(255,255,255,0.45); }
    .pricing-divider { height:1px; margin:14px 0; }
    .pricing-card:not(.featured) .pricing-divider { background:var(--n100); }
    .pricing-card.featured .pricing-divider { background:rgba(255,255,255,0.1); }
    .pricing-features { list-style:none; display:flex; flex-direction:column; gap:7px; flex:1; margin-bottom:18px; }
    .pricing-feature { font-size:12px; font-weight:300; display:flex; gap:7px; align-items:flex-start; line-height:1.35; }
    .pricing-card:not(.featured) .pricing-feature { color:var(--n600); }
    .pricing-card.featured .pricing-feature { color:rgba(255,255,255,0.72); }
    .pf-check { font-weight:700; flex-shrink:0; margin-top:1px; }
    .pricing-card:not(.featured) .pf-check { color:var(--orange); }
    .pricing-card.featured .pf-check { color:var(--yellow); }
    .pricing-card.agency-max .pf-check { color:var(--magenta); }
    .pricing-btn { padding:11px; border-radius:9px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer; text-align:center; transition:opacity 0.15s; }
    .pricing-card:not(.featured):not(.agency-max) .pricing-btn { background:var(--n100); border:1.5px solid var(--n200); color:var(--black); }
    .pricing-card.featured .pricing-btn { background:var(--o700); border:none; color:var(--n0); }
    .pricing-card.agency-max .pricing-btn { background:var(--magenta); border:none; color:var(--n0); }
    .pricing-btn:hover { opacity:0.82; }
    .pricing-popular { display:inline-block; font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; background:var(--yellow); color:var(--black); padding:3px 9px; border-radius:6px; margin-bottom:8px; }

    /* ── UPSELL ADDONS ── */
    .addons-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
    .addon-card { background:var(--n0); border-radius:12px; border:1.5px solid var(--n100); padding:18px; }
    .addon-icon { font-size:22px; margin-bottom:10px; }
    .addon-name { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:3px; }
    .addon-desc { font-size:12px; font-weight:300; color:var(--n500); line-height:1.4; margin-bottom:12px; }
    .addon-price { font-size:14px; font-weight:700; color:var(--orange); margin-bottom:10px; }
    .addon-btn { width:100%; padding:8px; border-radius:8px; background:rgba(236,103,27,0.08); border:1.5px solid rgba(236,103,27,0.2); font-family:'Barlow',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--orange); cursor:pointer; transition:all 0.15s; }
    .addon-btn:hover { background:var(--o700); color:var(--n0); }

    /* ── NOTIFICATION DROPDOWN ── */
    .notif-dropdown { display:none; position:absolute; top:44px; right:0; width:310px; background:var(--n0); border-radius:12px; border:1px solid var(--n150); box-shadow:0 8px 28px rgba(28,28,28,0.12); z-index:200; overflow:hidden; }
    .notif-dropdown.open { display:block; }
    .notif-drop-header { padding:12px 16px 9px; border-bottom:1px solid var(--n100); display:flex; align-items:center; justify-content:space-between; }
    .notif-drop-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:0.04em; }
    .notif-drop-clear { font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--orange); cursor:pointer; }
    .notif-entry { display:flex; gap:10px; padding:11px 16px; border-bottom:1px solid var(--n100); cursor:pointer; transition:background 0.12s; align-items:flex-start; }
    .notif-entry:hover { background:var(--n50); }
    .notif-entry:last-child { border-bottom:none; }
    .notif-entry.unread { background:rgba(236,103,27,0.04); }
    .notif-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
    .ni-upload { background:rgba(236,103,27,0.12); }
    .ni-task { background:rgba(202,153,197,0.15); }
    .ni-done { background:rgba(80,180,80,0.12); }
    .notif-text { font-size:12px; line-height:1.4; flex:1; }
    .notif-text strong { font-weight:700; }
    .notif-time { font-size:10px; color:var(--n600); margin-top:2px; }
    .notif-wrap { position:relative; }

    /* ── MEDIA PREVIEW ── */
    .media-strip { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
    .media-thumb-item { width:80px; height:60px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:22px; position:relative; overflow:hidden; cursor:pointer; border:1.5px solid var(--n150); transition:border-color 0.15s; flex-shrink:0; }
    .media-thumb-item:hover { border-color:var(--lilac); }
    .mt-image { background:var(--n100); }
    .mt-video { background:rgba(102,14,54,0.08); }
    .media-type-tag { position:absolute; bottom:4px; right:4px; font-size:8px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; background:var(--n600); color:var(--n0); padding:1px 5px; border-radius:3px; }
    .media-add { background:var(--n50); border:2px dashed var(--n200); border-radius:8px; width:80px; height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; font-size:10px; font-weight:600; color:var(--n600); gap:3px; transition:border-color 0.15s; flex-shrink:0; }
    .media-add:hover { border-color:var(--orange); color:var(--orange); }

    /* ── TASKS ── */
    .task-list { display:flex; flex-direction:column; gap:7px; margin-bottom:10px; }
    .task-item { display:flex; align-items:flex-start; gap:9px; padding:10px 12px; border-radius:9px; border:1.5px solid var(--n150); background:var(--n0); }
    .task-item.task-done { background:rgba(80,180,80,0.04); border-color:rgba(80,180,80,0.2); }
    .task-assignee-chip { padding:3px 8px; border-radius:6px; font-size:9px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
    .ta-kunde { background:rgba(253,204,104,0.25); color:var(--warn); }
    .ta-videograf { background:rgba(202,153,197,0.2); color:var(--magenta); }
    .ta-nina { background:rgba(236,103,27,0.12); color:var(--orange); }
    .task-text { font-size:12px; font-weight:300; color:var(--black); flex:1; line-height:1.4; }
    .task-status { font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; }
    .ts-offen { color:var(--n600); }
    .ts-erledigt { color:var(--succ); }
    .task-add-row { display:flex; gap:7px; align-items:center; }
    .task-assignee-select { padding:6px 10px; border:1.5px solid var(--n200); border-radius:7px; font-family:'Barlow',sans-serif; font-size:12px; color:var(--black); background:var(--n0); outline:none; cursor:pointer; }
    .task-input { flex:1; padding:6px 10px; border:1.5px solid var(--n200); border-radius:7px; font-family:'Barlow',sans-serif; font-size:12px; color:var(--black); outline:none; transition:border-color 0.15s; }
    .task-input:focus { border-color:var(--lilac); }
    .assignee-row { display:flex; align-items:center; gap:7px; margin-top:5px; }
    .assignee-chip { display:flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:10px; font-weight:700; }
    .ac-working { background:rgba(253,204,104,0.22); color:var(--warn); }

    /* ── SIDEBAR BOTTOM ── */
    .sidebar-nav { flex:1; padding:14px 10px; overflow-y:auto; display:flex; flex-direction:column; }
    .nav-spacer { flex:1; min-height:10px; }
    /* `.nav-bottom-sep` — die 1px-Trennlinie am Ende der Navigation — ist am 27.08.2026 entfallen
       (Ninas Vorgabe). Sie lief quer durch Fred, der seit demselben Tag aus dem Hilfe-Feld nach
       oben herausschaut: Eine Linie, die eine Figur durchschneidet, sieht nach Fehler aus.
       ⚠️ KEINE leere Regel stehen lassen — sie saehe beim naechsten Umbau so aus, als gehoere
          dort noch etwas hin. Der Abschluss nach unten bleibt: `.sidebar-logo-fuss` hat
          `border-top`. */

    /* ── PREVIEW PANEL ── */
    .preview-overlay { display:none; position:fixed; inset:0; background:var(--n400); z-index:200; }
    .preview-overlay.open { display:block; }
    .preview-panel { position:fixed; top:0; right:0; bottom:0; width:500px; background:var(--n0); z-index:210; transform:translateX(100%); transition:transform 0.26s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; box-shadow:-6px 0 36px rgba(28,28,28,0.1); }
    .preview-panel.open { transform:translateX(0); }

    /* Zentriertes Modal (für Kunde- und Content-Piece-Bearbeiten) */
    .preview-overlay.centered { align-items:center; justify-content:center; padding:24px; background:var(--n100); }

    /* Gesamtansicht (Liste aller Content-Pieces, inline editierbar) */
    .pf-card { background:var(--n0); border:1px solid var(--n150); border-radius:14px; padding:18px; margin-bottom:16px; box-shadow:0 2px 10px rgba(0,0,0,.03); }
    .pf-meta { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--n500); margin-bottom:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .pf-meta b { color:var(--orange); }
    .pf-meta .pf-status { margin-left:auto; font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; background:var(--n100); color:var(--n700); text-transform:none; letter-spacing:0; }
    .pf-visuals { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
    .pf-visual-tile-wrap { position:relative; width:110px; height:110px; }
    .pf-visual-tile { width:110px; height:110px; object-fit:cover; border-radius:8px; border:1px solid var(--n150); display:block; background:var(--n50); cursor:pointer; }
    .pf-visual-del { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; border:none; background:var(--n600); color:var(--n0); font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; padding:0; line-height:1; }
    .pf-visual-del:hover { background:var(--dang); }
    .pf-visual-add { width:110px; height:110px; border-radius:8px; border:2px dashed var(--n200); background:transparent; color:var(--n500); font-size:30px; cursor:pointer; transition:all .15s; font-weight:300; line-height:1; }
    .pf-visual-add:hover { border-color:var(--orange); color:var(--orange); background:rgba(236,103,27,.04); }
    .pf-visual-empty { display:flex; align-items:center; gap:14px; padding:14px 18px; border:1.5px dashed rgba(236,103,27,.4); border-radius:10px; background:rgba(236,103,27,.05); margin:10px 0; }
    .pf-visual-empty-text { color:var(--orange); font-weight:700; font-size:13px; flex:1; }
    .pf-visual-add-big { background:var(--o700); color:var(--n0); border:none; border-radius:8px; padding:9px 16px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:filter .15s; }
    .pf-visual-add-big:hover { filter:brightness(.95); }
    .pf-field { margin-top:12px; }
    .pf-field label { display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--n500); margin-bottom:5px; }
    .pf-field input.pf-input, .pf-field textarea.pf-input { width:100%; border:1.5px solid var(--n150); border-radius:8px; padding:9px 11px; font-family:'Barlow',sans-serif; font-size:13px; color:var(--black); outline:none; transition:border-color .15s; box-sizing:border-box; }
    .pf-field input.pf-input:focus, .pf-field textarea.pf-input:focus { border-color:var(--lilac); }
    .pf-field textarea.pf-input { resize:vertical; min-height:80px; line-height:1.5; }
    .pf-actions { display:flex; gap:10px; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--n100); }
    .pf-actions .pf-fulledit { color:var(--lilac); font-size:12px; font-weight:600; text-decoration:none; cursor:pointer; }
    .pf-actions .pf-fulledit:hover { text-decoration:underline; }
    .pf-actions .pf-save { margin-left:auto; background:var(--o700); color:var(--n0); border:none; border-radius:8px; padding:8px 16px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; opacity:.4; pointer-events:none; transition:opacity .15s; }
    .pf-actions .pf-save.dirty { opacity:1; pointer-events:auto; }
    .pf-actions .pf-save.dirty:hover { filter:brightness(.95); }
    .pf-actions .pf-saved { color:var(--succ); font-size:12px; font-weight:600; }
    .pf-actions .pf-del { background:transparent; border:1.5px solid rgba(178,59,59,.3); color:var(--dang); border-radius:8px; padding:8px 14px; font-family:'Barlow',sans-serif; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
    .pf-actions .pf-del:hover { background:rgba(178,59,59,.06); }
    /* Status-Aktion-Leiste (inline freigeben/produzieren etc.) */
    .pf-statusbar { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding:12px; background:var(--n0); border-radius:10px; }
    .pf-statusbar:empty { display:none; }
    .pf-act { border:none; border-radius:8px; padding:9px 16px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:filter .15s; }
    .pf-act:hover { filter:brightness(.95); }
    .pf-act-primary { background:var(--succ); color:var(--n0); }
    .pf-act-secondary { background:var(--n0); color:var(--magenta); border:1.5px solid rgba(102,14,54,.3); }
    .pf-act-warn { background:var(--o700); color:var(--n0); }
    .pf-act-info { font-size:12px; color:var(--n500); font-style:italic; padding:9px 0; }
    /* Kunden-Status-Hinweis in der Karte */
    .pf-kunde { margin:10px 0 0; padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; }
    .pf-kunde-pending { background:var(--n100); color:var(--n600); }
    .pf-kunde-ok { background:rgba(63,163,77,.14); color:var(--succ); }
    .pf-kunde-change { background:rgba(102,14,54,.1); color:var(--magenta); }

    /* KW-Filter-Leiste im Redaktionsplan-Header */
    .plan-kw-bar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:12px 20px 0; }
    .plan-kw-bar-lbl { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--n500); margin-right:4px; }
    /* Leiste erscheint nur, solange per Shift-Klick etwas ausgewählt ist — sonst weiß niemand,
       dass eine Auswahl aktiv ist und wie man sie wieder los wird. */
    .plan-sel-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 20px 0; font-size:13px; }
    /* Der einzige Weg zum Mehrfach-Loeschen — und er existiert nur, solange wirklich etwas
       markiert ist. Ein dauerhaft sichtbarer Loeschen-Knopf neben „+ Spontaner Post" waere die
       meiste Zeit tot und stuende genau dort, wo man taeglich hinklickt. */
    .plan-sel-del { background:var(--dang-bg); color:var(--dang); border:1.5px solid var(--dang-bd); padding:5px 12px; border-radius:8px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
    .plan-sel-del:hover { background:var(--dang); color:var(--n0); border-color:var(--dang); }

    /* „Im Namen des Kunden freigeben" — gruen, weil es das Gegenteil von Loeschen ist und die
       Leiste sonst nur eine rote Gefahr kennt (Ninas Vorgabe 01.09.2026).
       🔑 EIGENE KLASSE, keine geliehene: `.plan-sel-del` traegt die Entscheidungen des
          Loeschen-Knopfs mit — wer dort je die Form aendert, aendert sonst still auch diesen
          hier (Lehre 25.08.2026, „geliehene Klassen tragen fremde Entscheidungen mit").
       ⚠️ #EDF7F1 statt var(--succ-bg): auf --succ-bg traegt die Schrift nur 4,47:1. Genau
          dieselbe Stelle hat schon .er-fb-gut getroffen — deshalb hier derselbe Wert und
          keine zweite Erfindung. */
    /* Beschriftung einer Freigabe in der Meldungs-Tabelle (01.09.2026). Eigene Klasse statt
       einer geliehenen Abzeichen-Klasse: Die Abzeichen der Plan-Tabelle werden in index.html
       per !important umdefiniert — wer sie ausleiht, traegt fremde Entscheidungen mit
       (Lehre 01.09.2026). Gruen, weil es dieselbe Aussage ist wie „✓ Freigegeben" im Plan. */
    .pm-art-freigabe { display:inline-block; margin-top:2px; font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--succ); background:#EDF7F1; border:1px solid var(--succ-bd); border-radius:6px; padding:1px 6px; }
    /* Rückmeldung des Kunden in der Meldungs-Tabelle (18.09.2026). Dieselbe Farbe wie „✎ Änderung"
       im Redaktionsplan: Beides heisst „der Kunde will etwas anders haben". Der Text steht voll
       unter dem Titel (bewusst nicht abgeschnitten, siehe Baukasten-Vorgabe). */
    .pm-art-rueckmeldung { display:inline-block; margin-top:2px; font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#660E36; background:rgba(102,14,54,.10); border:1px solid rgba(102,14,54,.25); border-radius:6px; padding:1px 6px; }
    .pm-rueckmeldung-text { margin-top:4px; font-size:12px; line-height:1.4; color:#660E36; white-space:pre-line; overflow-wrap:anywhere; }

    /* Kurzes Aufblinken eines Eingabefelds, auf das eine Meldung zeigt (01.09.2026).
       🔑 Der Fokusrahmen allein genuegt auf dem Handy nicht — und genau dort landen die meisten
          Kundinnen des Portals. Zwei Sekunden, dann ist es wieder still. */
    @keyframes feldBlinken {
      0%, 100% { box-shadow: 0 0 0 0 rgba(236,103,27,0); }
      15%, 65% { box-shadow: 0 0 0 3px rgba(236,103,27,.45); }
    }
    .feld-blinkt { animation: feldBlinken 1s ease-in-out 2; border-color: var(--o500) !important; }
    /* Wer Bewegung im Betriebssystem abgestellt hat, bekommt den Rahmen ohne Blinken. */
    @media (prefers-reduced-motion: reduce) {
      .feld-blinkt { animation: none; box-shadow: 0 0 0 3px rgba(236,103,27,.45); }
    }

    .plan-sel-frei { background:#EDF7F1; color:var(--succ); border:1.5px solid var(--succ-bd); padding:5px 12px; border-radius:8px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
    .plan-sel-frei:hover { background:var(--succ); color:var(--n0); border-color:var(--succ); }

    /* „gepostet" in der Freigabe-Spalte — blau hinterlegt (Ninas Vorgabe 27.08.2026).
       Blau ist im Dashboard sonst nirgends belegt und sagt damit eindeutig: Dieser Beitrag ist
       draussen, hier ist nichts mehr zu tun. Der Knopf „Archivieren" in der Aktion-Spalte bleibt
       unveraendert bestehen — er ist der einzige Schritt, der danach noch kommt. */
    .badge-gepostet { background:var(--info-bg); color:var(--info); font-weight:700; }

    /* Notizfeld: volle Breite, grosszuegige Hoehe (Ninas Vorgabe 27.08.2026). Dieselben Werte
       gelten fuer das Feld beim Anlegen UND beim Bearbeiten — eine Notiz, die man in einem
       grossen Feld geschrieben hat, will man nicht in einem kleinen korrigieren. */
    .notiz-feld { width:100%; box-sizing:border-box; padding:10px 12px; resize:vertical; min-height:120px; line-height:1.5; font-family:'Barlow',sans-serif; font-size:14px; }
    /* Notizen ZWEISPALTIG (Ninas Vorgabe 27.08.2026): Eine Notiz ist selten so lang, dass sie
       die volle Breite braucht — untereinander gestapelt entstand eine sehr lange, luftige Liste.
       🔑 Aus der Trennlinie wird dabei ein Rahmen: Nebeneinander trennt eine Linie unten nichts
          mehr, sie sieht nur noch wie ein Fehler aus.
       ⚠️ Die Notiz, die gerade BEARBEITET wird, nimmt beide Spalten (`notiz-breit`). Am 27.08.
          wurde das Schreibfeld ausdrücklich von zwei auf acht Zeilen vergrössert, weil man
          „in ein Guckloch schrieb" — in einer halben Spalte wäre genau das zurück. */
    .notiz-raster { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-items:start; }
    @media (max-width:900px) { .notiz-raster { grid-template-columns:1fr; } }
    .notiz-karte { border:1px solid var(--n150); border-radius:10px; padding:11px 13px;
      background:var(--n0); min-width:0; }
    .notiz-karte.notiz-breit { grid-column:1 / -1; }

    /* ── BEGRUESSUNG (Ninas Vorgabe 27.08.2026, Platzierung nach ihrem Screenshot) ──
       Sie sitzt OBEN LINKS, nicht in der Bildmitte, und legt sich NICHT verdunkelnd ueber die
       Seite: Das Dashboard bleibt dahinter normal lesbar.
       🔑 WARUM DAS ZUSAMMENGEHOERT: Eine mittige Karte auf abgedunkeltem Grund liest sich als
          Unterbrechung — man muss sie wegklicken. Eine Karte in der Ecke auf normaler Seite ist
          ein Gruss im Vorbeigehen; nach zwei Sekunden ist sie ohnehin weg.
       ⚠️ `pointer-events` bleibt trotzdem Pflicht — die Huelle deckt weiterhin die ganze Seite ab,
          damit man den Gruss ueberall wegklicken kann. Ohne das Umschalten schluckte sie danach
          jeden Klick, und man saehe nicht, woran es liegt. */
    .gruss-huelle { position:fixed; inset:0; z-index:400; display:flex; align-items:flex-start; justify-content:flex-start;
                    padding:14px; background:transparent; opacity:0; visibility:hidden; pointer-events:none;
                    transition:opacity .35s ease, visibility 0s linear .35s; }
    .gruss-huelle.on { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .35s ease, visibility 0s; }
    .gruss-karte { background:var(--n0); border-radius:18px; padding:64px 56px 70px; width:min(640px, 92vw);
                   box-shadow:0 24px 70px rgba(28,28,28,.22); text-align:left;
                   transform:translateY(-8px) scale(.98); transition:transform .35s cubic-bezier(.2,.8,.3,1); }
    .gruss-huelle.on .gruss-karte { transform:translateY(0) scale(1); }
    /* Der obere Akzentstreifen der Kacheln, hier als Rahmenoberkante — der Gruss gehoert
       sichtbar zur Suite und ist keine fremde Einblendung. */
    .gruss-karte { position:relative; overflow:hidden; }
    /* 🔻 04.09.2026: der orange Streifen (::before) ist entfallen — nur die Kennzahl-Kacheln tragen ihn noch. */
    .gruss-karte img { display:block; max-width:100%; height:auto; }
    .gruss-text { display:flex; flex-direction:column; gap:2px; }
    .gruss-zeile1 { font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase;
                    letter-spacing:.03em; font-size:clamp(30px, 4.4vw, 50px); color:var(--n900); line-height:1.04; }
    .gruss-zeile2 { font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase;
                    letter-spacing:.03em; font-size:clamp(30px, 4.4vw, 50px); color:var(--o500); line-height:1.04; }
    /* Wer Bewegung reduziert hat, bekommt den Gruss ohne Animation — aber weiterhin zwei Sekunden. */
    @media (prefers-reduced-motion:reduce) {
      .gruss-huelle, .gruss-karte { transition:none; }
      .gruss-huelle.on .gruss-karte { transform:none; }
    }
    }

    /* Kundensupport-Adresse unter dem Hilfe-Chat. Unterstrichen, damit sie als Link erkennbar
       ist — die Fusszeile ist sonst reiner Hinweistext und niemand vermutet dort einen Klick. */
    .help-mail { color:var(--o700); font-weight:700; text-decoration:underline; }
    .help-mail:hover { color:var(--o900); }
    .plan-sel-cnt { font-weight:700; color:var(--orange,var(--o500)); }
    .plan-sel-hint { color:var(--n500); }
    .plan-kw-chip { border:1.5px solid var(--n200); background:var(--n0); color:var(--n600); border-radius:999px; padding:4px 13px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:700; cursor:pointer; transition:all .15s; }
    .plan-kw-chip:hover { border-color:var(--lilac); color:var(--magenta); }
    .plan-kw-chip.active { background:var(--magenta); border-color:var(--magenta); color:var(--n0); }
    /* Kanal-Chips tragen die Farbe IHRES Kanals statt des einheitlichen Magenta — dieselbe
       Farbe wie das Abzeichen unten in der Tabelle. So findet man den Kanal über die Farbe,
       nicht über den Text. Die Regeln stehen NACH `.active`, damit sie dort gewinnen. */
    .plan-kw-chip-kanal { border-color:var(--kanal-farbe,var(--n200)); color:var(--kanal-farbe,var(--n600)); background:var(--n0); }
    .plan-kw-chip-kanal:hover { border-color:var(--kanal-farbe); color:var(--kanal-farbe); filter:brightness(.9); }
    .plan-kw-chip-kanal.active { background:var(--kanal-farbe); border-color:var(--kanal-farbe); color:var(--n0); }

    /* ── Feed-Ansicht: Wochen-Mockup (reine Schau) ──
       Seit dem 24.08.2026 eine eigene Seite (#ctab-feed) statt eines Overlays. */
    /* 05.09.2026 (Ninas Befund „in der Feed-Ansicht wie abgehackt"): Die Fläche trug einen eigenen
       deckenden Grund (--cloud) und schnitt den Lilac-Verlauf der Karte hart ab. Jetzt durchsichtig —
       die Feed-Karten darin haben eigenen Rahmen und Schatten und brauchen keinen Untergrund. */
    .pf-seite { padding:18px 20px; background:transparent; border-radius:0 0 12px 12px; }
    .pf-kopf-hinweis { font-size:12px; color:var(--n600); font-weight:400; max-width:520px; line-height:1.4; }
    .pf-week { margin-bottom:26px; }
    .pf-week-head { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:18px; letter-spacing:var(--sperrung-titel); color:var(--magenta); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin:0 0 14px; padding-bottom:0; }
    /* 🔻 02.09.2026: Die 2px-Linie unter „KW …" ist entfallen (Ninas Vorgabe). Sie war der
       letzte Rest desselben Musters, das auch der Seitenkopf hatte: eine Linie, die tut,
       was der Abstand ohnehin tut. Der Abstand darunter ist dafür von 10px auf 14px
       gewachsen — ohne Linie braucht die Trennung etwas mehr Luft. */
    .pf-week-count { font-family:'Barlow',sans-serif; font-weight:600; font-size:11px; letter-spacing:0; text-transform:none; color:var(--n500); }
    /* 🔴 minmax(168px,…) erzwang 1236 px für sieben Tage — in 1086 px Seitenbreite fiel der
       Sonntag hinter den Rand (Ninas Befund 25.08.2026). minmax(0,…) teilt die vorhandene
       Breite auf: alle sieben Tage stehen nebeneinander, ohne seitliches Scrollen. */
    .pf-week-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:7px; padding-bottom:4px; }
    .pf-day { background:var(--n50); border-radius:10px; padding:6px 5px; min-width:0; }
    .pf-day-head { display:flex; align-items:baseline; gap:6px; padding:2px 4px 8px; }
    .pf-day-wd { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--n600); }
    .pf-day-date { font-size:10px; color:var(--n600); font-weight:600; }
    .pf-day-stack { display:flex; flex-direction:column; gap:10px; }
    .pf-day-stack-row { flex-direction:row; flex-wrap:wrap; }
    .pf-day-empty { text-align:center; color:var(--n600); font-size:18px; padding:14px 0; }
    .pf-week-extra { margin-top:12px; background:var(--n50); border-radius:12px; padding:8px; }

    /* Beitrags-Mockup — der Aufbau richtet sich nach dem Kanal (siehe PF_KANAL_DARSTELLUNG) */
    .pf-mock { background:var(--n0); border:1px solid var(--n150); border-radius:12px; overflow:hidden; cursor:pointer; box-shadow:0 1px 6px rgba(0,0,0,.04); transition:box-shadow .15s, transform .1s; display:flex; flex-direction:column; }
    .pf-mock:hover { box-shadow:0 4px 16px rgba(102,14,54,.14); transform:translateY(-1px); }
    .pf-day-stack-row .pf-mock { width:200px; }
    .pf-mock-top { display:flex; align-items:center; gap:5px; padding:6px 7px; }
    .pf-mock-ava { width:17px; height:17px; border-radius:50%; background:linear-gradient(135deg,var(--magenta),var(--lilac)); color:var(--n0); font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    /* Markenname und Kanal stehen UNTEREINANDER — nebeneinander bliebe in einer 135 px breiten
       Spalte von beidem nur ein Stummel übrig (gemessen 25.08.2026). */
    .pf-mock-ident { display:flex; flex-direction:column; min-width:0; overflow:hidden; }
    .pf-mock-brand { font-size:10px; font-weight:700; color:var(--black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pf-mock-fmt { font-size:8px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--n500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pf-mock-titel { padding:2px 7px 4px; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:12px; line-height:1.2; color:var(--black); }
    .pf-mock-media { position:relative; width:100%; background:var(--n100); overflow:hidden; }
    /* Seitenverhältnisse nach Kanal und Format (Recherche 18.08.2026) */
    .pf-ratio-45 { aspect-ratio:4/5; }
    .pf-ratio-11 { aspect-ratio:1/1; }
    .pf-ratio-916 { aspect-ratio:9/16; }
    .pf-ratio-169 { aspect-ratio:16/9; }
    .pf-ratio-191 { aspect-ratio:1.91/1; }
    .pf-mock-img { width:100%; height:100%; object-fit:cover; display:block; }
    .pf-mock-noimg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--n600); font-size:11px; font-style:italic; background:var(--n100); }
    .pf-mock-carousel { position:absolute; top:6px; right:6px; background:var(--n600); color:var(--n0); font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; }
    .pf-mock-dots { position:absolute; bottom:6px; left:0; right:0; display:flex; justify-content:center; gap:4px; }
    .pf-dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.5); }
    .pf-dot.on { background:var(--n0); }
    /* Bei „Text zuerst" (LinkedIn, Facebook, Threads, X) sitzt das Bild UNTER dem Text und
       schliesst die Karte ab — es braucht deshalb keinen Abstand nach unten. */
    .pf-aufbau-text-oben .pf-mock-media { margin-top:2px; }

    /* Der Beitragstext. Jeder Baustein steht auf einer eigenen Zeile, in derselben Reihenfolge,
       in der er veröffentlicht wird (captionBauen in engine.ts).
       🔑 NICHTS DAVON IST FETT (Ninas Vorgabe 25.08.2026). Im echten Beitrag ist es das auch
          nicht — auch die Hook nicht, obwohl sie die Rolle einer Überschrift spielt. Wer sie
          hier fett setzt, zeigt eine Wirkung, die es im Feed nicht gibt. */
    .pf-mock-cap { padding:2px 7px 5px; font-size:10.5px; line-height:1.45; color:var(--n700); }
    .pf-mock-cap > span { display:block; white-space:pre-wrap; word-break:break-word; font-weight:400; }
    .pf-mock-cap > span + span { margin-top:4px; }
    /* Die Hook steht seit 15.08.2026 als erste Zeile IM Beitrag, nicht mehr daneben —
       inline würde sie mit der Caption zu einem Satz verschmelzen. Eigene Zeile ja, Fettdruck nein. */
    .pf-mock-hook { display:block; color:var(--n700); }
    .pf-mock-text { color:var(--n700); }
    .pf-mock-cta { color:var(--n700); }
    .pf-mock-credit { color:var(--n600); font-size:9.5px; }
    /* Hashtags stehen im Feed als Verweise da — farbig, aber nicht fett. */
    .pf-mock-tags { font-size:9.5px; color:var(--m700); }
    .pf-mock-leer { color:var(--n600); font-style:italic; }
    /* Der Abschnittpunkt des Kanals — ab hier klappt die Plattform den Beitrag ein.
       Grau und unauffällig, genau wie „… mehr" im echten Feed. */
    /* inline, weil es im echten Feed an den Text anschliesst — nicht darunter steht. */
    .pf-mock-mehr { display:inline; margin-left:3px; font-size:9.5px; color:var(--n500); }
    .pf-mock-hart { display:block; margin:3px 0 0; color:var(--warn); font-weight:600; }
    .pf-mock-foot { padding:5px 7px 7px; margin-top:auto; }
    .pf-mock-story { border-color:rgba(202,153,197,.55); box-shadow:0 1px 8px rgba(202,153,197,.25); }
    .pf-mock-story .pf-mock-media { outline:2px solid var(--lilac); outline-offset:-2px; }

    /* Ein Beitrag mit den Stories, die an ihm hängen (quelle_id) — sie stehen darunter und
       gehören sichtbar zusammen. */
    .pf-bund { display:flex; flex-direction:column; gap:4px; border-left:2px solid rgba(202,153,197,.5); border-radius:10px; padding-left:4px; }
    .pf-mock-anhang { border-color:rgba(202,153,197,.45); }
    .pf-anhang-label { padding:4px 7px 0; font-size:8px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--lilac); }

    /* reservierte Slots als Mockup-Platzhalter */
    .pf-mock-slot { align-items:center; text-align:center; padding:12px 8px; justify-content:center; min-height:96px; }
    .pf-slot-txt { font-weight:700; font-size:11px; color:var(--black); }
    .pf-slot-sub { font-size:9px; color:var(--n500); margin-top:3px; line-height:1.35; }
    .pf-mock-trend { background:rgba(236,103,27,.06); border-color:rgba(236,103,27,.4); }
    .pf-mock-trend .pf-slot-txt { color:var(--o700); }
    .pf-mock-spontan { background:rgba(214,188,120,.16); border-color:rgba(214,188,120,.6); }
    .pf-mock-spontan .pf-slot-txt { color:var(--warn); }

    /* Visual-Quelle Radio-Group im Bearbeiten-Modal */
    .vq-opt { display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border:1.5px solid var(--n150); border-radius:8px; cursor:pointer; font-size:13px; line-height:1.45; transition:border-color .12s, background .12s; }
    .vq-opt:hover { border-color:rgba(202,153,197,.6); background:rgba(202,153,197,.04); }
    /* Ankreuzfelder ergaenzt am 30.08.2026 (Zugriffsrechte Kundenportal). Bewusst DIESELBE
       Regel statt einer zweiten Optionsklasse: Eine eigene haette eine dritte
       Beschriftungs-Ebene eroeffnet — genau das, was design_standard_test.js verhindert. */
    .vq-opt input[type=radio], .vq-opt input[type=checkbox] { margin-top:3px; accent-color:var(--lilac); flex:none; }
    .vq-opt input:checked + span { color:var(--black); }
    .vq-opt:has(input:checked) { border-color:var(--lilac); background:rgba(202,153,197,.08); }

    /* Ein Recht, das FESTSTEHT: sichtbar an, aber nicht anfassbar. Eine Zustandsvariante
       derselben Klasse — wie `.nc-section-warn` bei den Überschriften: gleiche Typografie,
       abweichend nur, was den Zustand zeigt.
       🔴 WARUM `.vq-opt.fest` ALLEIN NICHT REICHT — und warum das Verschieben nichts half:
          `:has()` übernimmt die Spezifität seines ARGUMENTS. `.vq-opt:has(input:checked)` zählt
          damit (0,2,1), `.vq-opt.fest` nur (0,2,0) — die Angehakt-Farbe gewinnt unabhängig von
          der Reihenfolge im Stylesheet. Gemessen kam Lilac heraus, obwohl hier Grau steht und
          die Regel weiter unten stand. Deshalb trägt die Variante dasselbe `:has()`.
          Dieselbe Falle wie am 19.08.2026 bei `.ag-side{display:grid}`: Eine Regel, die dasteht
          und nicht wirkt, sieht man im CSS nie — nur im Browser. */
    .vq-opt.fest,
    .vq-opt.fest:has(input:checked) { background:var(--n50); border-color:var(--n150);
      border-style:dashed; cursor:default; }
    .vq-opt.fest:hover { border-color:var(--n150); background:var(--n50); }
    .vq-opt.fest input { opacity:.55; }
    .vq-opt:has(input:disabled) { cursor:default; }

    /* Agentur-Vorschau-Overlay (read-only Anzeige eines Content-Pieces) */
    .ap-meta { font-size:12px; color:var(--n700); margin-bottom:14px; display:flex; flex-wrap:wrap; gap:8px 14px; }
    .ap-meta b { color:var(--black); }
    .ap-field { margin-top:14px; }
    .ap-field label { display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--n500); margin-bottom:5px; }
    .ap-field .ap-val { background:var(--n0); border:1px solid var(--n150); border-radius:8px; padding:10px 12px; font-size:13px; color:var(--black); white-space:pre-wrap; line-height:1.5; min-height:18px; }
    .ap-field .ap-val.empty { color:var(--n500); font-style:italic; }
    .ap-visual { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
    .ap-visual img, .ap-visual video { width:110px; height:110px; object-fit:cover; border-radius:8px; border:1px solid var(--n150); background:var(--n900); }

    /* Agentur-Tages-Overlay (Kalender-Klick) */
    .ad-list { display:flex; flex-direction:column; gap:8px; }
    .ad-row { display:grid; grid-template-columns:14px 110px 1fr 90px 80px auto; gap:10px; align-items:center; padding:11px 14px; background:var(--n0); border:1px solid var(--n100); border-radius:10px; cursor:pointer; transition:background .12s,border-color .12s; font-size:13px; }
    .ad-row:hover { background:rgba(202,153,197,.07); border-color:rgba(202,153,197,.4); }
    .ad-dot { width:10px; height:10px; border-radius:50%; }
    .ad-kunde { font-weight:600; }
    .ad-thema { color:var(--black); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ad-kanal, .ad-format { font-size:11px; color:var(--n500); text-transform:uppercase; letter-spacing:.06em; }
    @media (max-width:680px){
      .ad-row { grid-template-columns:14px 1fr auto; }
      .ad-kanal, .ad-format { display:none; }
    }
    .preview-overlay.centered .preview-panel {
      position:relative; top:auto; right:auto; bottom:auto;
      width:min(760px, 96vw); max-height:90vh;
      border-radius:16px;
      transform:none !important; transition:none;
      box-shadow:0 24px 64px rgba(28,28,28,0.28);
    }
    .preview-header { padding:18px 22px 14px; border-bottom:1px solid var(--n100); display:flex; align-items:flex-start; gap:10px; }
    .preview-close { width:30px; height:30px; border-radius:8px; border:1.5px solid var(--n200); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--n500); flex-shrink:0; margin-left:auto; }
    .preview-meta-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:7px; }
    .preview-title-text { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:18px; text-transform:uppercase; letter-spacing:0.02em; line-height:1.1; }
    .preview-body { flex:1; overflow-y:auto; padding:18px 22px; }
    .preview-section-label { font-size:9px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--n600); margin-bottom:9px; margin-top:18px; }
    .preview-section-label:first-child { margin-top:0; }
    .preview-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .preview-info-item { background:var(--n50); border-radius:8px; padding:9px 11px; }
    .preview-info-label { font-size:9px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--n600); margin-bottom:3px; }
    .preview-info-value { font-size:12px; font-weight:600; }
    .preview-content-box { background:var(--n0); border:1.5px solid var(--n100); border-radius:10px; padding:14px; font-size:13px; font-weight:300; line-height:1.65; color:var(--black); white-space:pre-line; }
    .preview-comment-box { width:100%; border:1.5px solid var(--n150); border-radius:8px; padding:9px 11px; font-family:'Barlow',sans-serif; font-size:13px; color:var(--black); resize:none; outline:none; min-height:65px; transition:border-color 0.15s; }
    .preview-comment-box:focus { border-color:var(--lilac); }
    .comment-item { display:flex; gap:9px; padding:9px 0; border-bottom:1px solid var(--n100); }
    .comment-item:last-child { border-bottom:none; }
    .comment-avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--magenta),var(--lilac)); display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:9px; color:var(--n0); flex-shrink:0; }
    .comment-author { font-size:11px; font-weight:700; margin-bottom:2px; }
    .comment-text { font-size:12px; font-weight:300; color:var(--n600); line-height:1.4; }
    .comment-time { font-size:10px; color:var(--n600); margin-top:2px; }
    /* 🔴 `flex-wrap:wrap` seit dem 31.08.2026 — vorher lief der letzte Knopf über den Rand
       hinaus, sobald die Leiste zu schmal wurde (Ninas Screenshot). Gemessen: Im Piece-Fenster
       brauchen die Knöpfe der Agentur 562px, das Panel hat bei einem 500px-Fenster aber nur
       480px. Ohne Umbruch schiebt Flexbox den Rest einfach hinaus, ohne Scrollbalken und ohne
       Hinweis.
       🔑 Das behebt die URSACHE, nicht den Anlass: Der Auslöser waren sechs Knöpfe im
          Kundenportal — aber auch vier laufen bei genügend schmalem Fenster über, und der
          nächste hinzugefügte Knopf hätte es wieder getan. */
    .preview-footer { padding:14px 22px; border-top:1px solid var(--n100); display:flex;
      gap:7px; flex-wrap:wrap; }
    .share-btn { display:flex; align-items:center; gap:5px; padding:7px 12px; border-radius:8px; border:1.5px solid var(--n200); background:transparent; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; color:var(--n500); transition:all 0.15s; }
    .share-btn:hover { border-color:var(--lilac); color:var(--lilac); }

    .divider { height:1px; background:var(--n100); margin:16px 0; }
    .optional-banner { background:var(--eggshell); border-radius:12px; padding:16px 20px; display:flex; align-items:center; gap:14px; margin-bottom:20px; }
    .optional-title { font-weight:700; font-size:13px; margin-bottom:2px; }
    .optional-sub { font-size:12px; font-weight:300; color:var(--n500); }

    /* ── AGENCY OVERVIEW ── */
    .client-kpi-card { background:var(--n0); border-radius:12px; border:1.5px solid var(--n100); padding:16px 18px; cursor:pointer; transition:border-color 0.15s,box-shadow 0.15s; }
    .client-kpi-card:hover { border-color:var(--lilac); box-shadow:0 4px 14px rgba(28,28,28,0.07); }
    .client-kpi-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
    .client-kpi-name { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:0.04em; flex:1; }
    .client-kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:11px; }
    .client-kpi-stat { background:var(--n50); border-radius:7px; padding:8px 10px; }
    .client-kpi-stat-val { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:20px; }
    .client-kpi-bar-wrap { background:var(--n100); border-radius:3px; height:3px; margin-bottom:7px; }
    .client-kpi-bar-fill { height:3px; border-radius:3px; }
    /* ── MINI CALENDAR ── */
    .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
    .cal-header-day { font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--n600); text-align:center; padding:4px 0; }
    .cal-day { height:30px; display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; position:relative; font-size:11px; color:var(--n500); transition:background 0.12s; }
    .cal-day:hover { background:var(--n50); }
    .cal-day.cal-today { background:var(--black); color:var(--n0); font-weight:700; }
    .cal-day.cal-has-post::after { content:''; position:absolute; bottom:3px; width:4px; height:4px; border-radius:50%; background:var(--orange); }
    .cal-day.cal-today.cal-has-post::after { background:var(--yellow); }
    .cal-day.cal-other-month { color:var(--n600); }
    .cal-day.cal-multi-post::after { background:var(--lilac); width:7px; height:4px; border-radius:2px; }
    /* ── TRENDS ── */
    .trend-source { display:inline-flex; align-items:center; font-size:9px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:2px 7px; border-radius:5px; background:var(--n100); color:var(--n600); }
    .trend-entry { padding:11px 0; border-bottom:1px solid var(--n100); }
    .trend-entry:last-child { border-bottom:none; padding-bottom:0; }
    .trend-title { font-size:12px; font-weight:700; margin-bottom:3px; line-height:1.35; }
    .trend-desc { font-size:11px; font-weight:300; color:var(--n500); line-height:1.4; margin-bottom:4px; }
    /* ── TASKS OVERVIEW ── */
    .task-overview-item { display:flex; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid var(--n100); border-radius:6px; transition:background 0.12s; margin:0 -8px; padding-left:8px; padding-right:8px; }
    .task-overview-item:last-child { border-bottom:none; }
    .task-overview-item:hover { background:rgba(202,153,197,0.12); }
    .task-client-chip { font-size:9px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:2px 7px; border-radius:5px; white-space:nowrap; flex-shrink:0; }
    /* ── SIDEBAR ADDITIONS ── */
    .nav-back-btn { display:flex; align-items:center; gap:7px; padding:9px 12px 11px; font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--n600); cursor:pointer; transition:color 0.15s; border-bottom:1px solid var(--n200); margin-bottom:12px; }
    .nav-back-btn:hover { color:var(--n900); }
    .nav-client-chip { margin:0 10px 14px; padding:8px 12px; background:rgba(202,153,197,0.12); border-radius:8px; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:0.05em; color:var(--lilac); border:1px solid rgba(202,153,197,0.18); }
    .client-status-dot { border-radius:50%; flex-shrink:0; }
    /* ── BRANDING & TONE ── */
    .content-saule-card { background:var(--n0); border:1.5px solid var(--n150); border-radius:10px; padding:16px; }
    .content-saule-num { font-size:9px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--lilac); margin-bottom:4px; }
    .persona-card { background:var(--n0); border:1.5px solid var(--n150); border-radius:12px; padding:18px; }
    .persona-name { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:18px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:3px; }
    .persona-age { font-size:11px; font-weight:300; color:var(--n500); margin-bottom:10px; }
    .persona-section { font-size:9px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--n600); margin-bottom:5px; margin-top:10px; }
    .tone-tag { display:inline-flex; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; margin:3px; }
    .tone-do { background:rgba(80,180,80,0.12); color:var(--succ); }
    .tone-dont { background:rgba(200,40,40,0.09); color:var(--dang); }
    .agency-only-banner { background:rgba(102,14,54,0.06); border:1.5px solid rgba(102,14,54,0.12); border-radius:10px; padding:10px 14px; display:flex; align-items:center; gap:9px; margin-bottom:18px; font-size:12px; font-weight:600; color:var(--magenta); }

    /* ══ PHASE 1 FEATURES ══ */

    /* ── IDEEN-POOL ── */
    /* Die Filterleiste steht hier, weil sie hier entstanden ist — sie gehört dem Ideen-Bereich
       aber NICHT: Asset-Bibliothek und Freigabe-Mails benutzen sie ebenso. Sie hiess bis zum
       27.08.2026 `.ideen-filter-*` und ist deshalb neutral umbenannt worden. `.filter-select`
       selbst stand da schon — WORTGLEICH und ohne einen einzigen Benutzer (siehe oben bei
       .kw-tab). Zwei Namen für dasselbe Aussehen, genau der Fall, vor dem die Bauvorgabe warnt;
       die Doppelung ist mit der Umbenennung verschwunden. */
    .filter-bar { display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
    .ideen-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
    .ideen-card { background:var(--n0); border-radius:12px; border:1.5px solid var(--n100); padding:16px 18px; display:flex; flex-direction:column; gap:8px; transition:border-color 0.15s,box-shadow 0.15s; cursor:pointer; }
    .ideen-card:hover { border-color:var(--lilac); box-shadow:0 4px 14px rgba(28,28,28,0.07); }
    .ideen-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
    .ideen-card-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:var(--sperrung-titel); line-height:1.1; }
    .ideen-card-desc { font-size:12px; font-weight:300; color:var(--n600); line-height:1.5; flex:1; }
    .ideen-card-footer { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px; }
    .ideen-status { display:inline-flex; align-items:center; font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:3px 8px; border-radius:6px; white-space:nowrap; }
    .is-offen      { background:var(--n100); color:var(--n600); }
    .is-geplant    { background:rgba(253,204,104,0.25); color:var(--warn); }
    .is-verwendet  { background:rgba(80,180,80,0.14); color:var(--succ); }
    .is-archiviert { background:var(--n50); color:var(--n600); }
    .ideen-kanal-tag { display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; padding:3px 8px; border-radius:6px; }
    .ik-instagram  { background:rgba(168,55,197,0.14);  color:#a837c5; }
    .ik-linkedin   { background:rgba(0,119,181,0.14);   color:#0077B5; }
    .ik-youtube    { background:rgba(255,0,0,0.11);     color:#cc0000; }
    .ik-tiktok     { background:rgba(18,18,18,0.10);    color:var(--n900); }
    .ik-facebook   { background:rgba(24,119,242,0.13);  color:#1877F2; }
    .ik-newsletter { background:rgba(236,72,153,0.14);  color:#db2777; }
    .ik-blog       { background:rgba(20,184,166,0.14);  color:#0d9488; }
    .ik-threads    { background:rgba(18,18,18,0.10);    color:var(--n900); }
    .ik-gbp        { background:rgba(52,168,83,0.14);   color:var(--succ); }
    .ik-alle       { background:var(--n100);    color:var(--n600); }
    .ideen-thema-tag { font-size:9px; font-weight:600; padding:3px 8px; border-radius:6px; background:rgba(202,153,197,0.14); color:var(--magenta); }
    /* Neue Idee Modal */
    .ideen-modal-overlay { display:none; position:fixed; inset:0; background:var(--n400); z-index:300; align-items:center; justify-content:center; }
    .ideen-modal-overlay.open { display:flex; }
    .ideen-modal { background:var(--n0); border-radius:14px; padding:28px; width:480px; max-width:95vw; box-shadow:0 12px 40px rgba(28,28,28,0.15); }
    .ideen-modal-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:20px; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:18px; }
    .ideen-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }

    /* ── INSTAGRAM GRID-VORSCHAU ── */
    .grid-controls { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
    .grid-account-select { padding:8px 32px 8px 12px; border:1.5px solid var(--n200); border-radius:8px; background:var(--n0); font-family:'Barlow',sans-serif; font-size:13px; font-weight:600; color:var(--black); cursor:pointer; outline:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%231C1C1C' fill-opacity='.4' d='M5 6L0 0h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
    .grid-wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; max-width:640px; }
    .ig-cell { aspect-ratio:3/4; border-radius:4px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; cursor:pointer; transition:opacity 0.15s; }
    .ig-cell:hover { opacity:0.88; }
    .ig-cell.empty { background:var(--n100); border:2px dashed var(--n200); border-radius:4px; }
    /* Drag & Drop: gezogener Beitrag halbtransparent, Ziel-Zelle orange umrandet */
    .ig-cell.ig-dragging { opacity:.4; }
    .ig-cell.ig-dragover { outline:3px solid var(--orange); outline-offset:-3px; z-index:2; }
    .ig-cell.filled-reel    { background:rgba(202,153,197,0.35); }
    .ig-cell.filled-carousel{ background:rgba(253,204,104,0.35); }
    .ig-cell.filled-post    { background:rgba(102,14,54,0.12); }
    .ig-cell.filled-blog    { background:rgba(240,234,215,0.9); }
    .ig-cell-label { font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--n500); text-align:center; padding:4px; }
    .ig-cell.filled-reel .ig-cell-label    { color:var(--magenta); }
    .ig-cell.filled-carousel .ig-cell-label{ color:var(--warn); }
    .planned-overlay { position:absolute; inset:0; background:rgba(236,103,27,0.12); border:2px solid var(--orange); border-radius:4px; display:flex; align-items:center; justify-content:center; }
    .ig-date-tag { position:absolute; bottom:5px; left:5px; font-size:8px; font-weight:700; background:var(--n600); color:var(--n0); padding:2px 5px; border-radius:3px; }
    .grid-legend { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
    .grid-legend-item { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:600; color:var(--n500); }
    .grid-legend-dot { width:10px; height:10px; border-radius:2px; }

/* ── KANBAN BOARD ── */
.kanban-board { display:flex; gap:13px; align-items:flex-start; overflow-x:auto; padding-bottom:16px; }
.kanban-column { flex:1; min-width:210px; max-width:280px; background:var(--n0); border-radius:12px; border:1px solid var(--n100); display:flex; flex-direction:column; }
/* 05.09.2026 (Ninas Vorgabe): keine Linie unter „Offen / Geplant / …" — stattdessen ein Verlauf in
   der Spaltenfarbe, wie bei den Karten: oben voll (18px), bei 90px weiss. Vorher: flache Tönung
   über die ganze Spalte + Linie unter dem Kopf. */
.kanban-column-header { padding:12px 14px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom:0; }
.kanban-col-title { font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--n500); }
.kanban-col-count { font-size:11px; font-weight:700; background:var(--n150); color:var(--n600); padding:2px 7px; border-radius:10px; }
/* 05.09.2026, abends (Ninas Vorgabe): der farbige Verlauf in der Farbe der Spalten-Überschrift ist
   ZURÜCK — von oben nach unten, 18px voll, bei 90px weiss. (Nachmittags kurz weiss.) */
.kanban-column { --spalte-ton:rgba(28,28,28,0.10); --spalte-ton-0:rgba(28,28,28,0);
  background:linear-gradient(to bottom, var(--spalte-ton) 0, var(--spalte-ton) 18px, var(--spalte-ton-0) 90px), var(--n0); }
.kanban-col-offen     { --spalte-ton:rgba(236,103,27,0.16); --spalte-ton-0:rgba(236,103,27,0); }
.kanban-col-offen    .kanban-col-title { color:rgba(236,103,27,0.8); }
.kanban-col-offen    .kanban-col-count { background:rgba(236,103,27,0.12); color:var(--orange); }
.kanban-col-geplant  { --spalte-ton:rgba(200,40,40,0.13); --spalte-ton-0:rgba(200,40,40,0); }
.kanban-col-geplant  .kanban-col-title { color:rgba(200,40,40,0.7); }
.kanban-col-geplant  .kanban-col-count { background:rgba(200,40,40,0.1); color:var(--dang); }
.kanban-col-verwendet { --spalte-ton:rgba(80,180,80,0.16); --spalte-ton-0:rgba(80,180,80,0); }
.kanban-col-verwendet .kanban-col-title { color:var(--succ); }
.kanban-col-verwendet .kanban-col-count { background:rgba(80,180,80,0.18); color:var(--succ); }
.kanban-col-archiviert { --spalte-ton:rgba(28,28,28,0.10); --spalte-ton-0:rgba(28,28,28,0); }
.kanban-col-archiviert .kanban-col-title { color:var(--n600); }
.kanban-col-archiviert .kanban-col-count { background:var(--n100); color:var(--n600); }
.kanban-column-body { padding:10px 8px; display:flex; flex-direction:column; gap:8px; min-height:120px; transition:background 0.15s; }
.kanban-column-body.drag-over { background:rgba(202,153,197,0.1); border-radius:0 0 12px 12px; }
.kanban-empty { text-align:center; font-size:11px; color:var(--n600); padding:20px 10px; font-weight:300; }
/* Kanban Karten — kompakter als Grid-Karten */
.kanban-board .ideen-card { cursor:grab; margin-bottom:0; padding:12px 13px; }
.kanban-board .ideen-card:active { cursor:grabbing; }
.kanban-board .ideen-card.dragging { opacity:0.45; transform:scale(0.97); box-shadow:0 6px 20px rgba(28,28,28,0.15); }
.kanban-board .ideen-card-title { font-size:13px; }
.kanban-board .ideen-card-desc { font-size:11px; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }

/* ── VIEW TOGGLE (Liste / 2 Wochen / Monat) ── */
.view-toggle { display:flex; gap:4px; align-items:center; }
.vtoggle {
  padding:5px 12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  border:1.5px solid var(--n200);
  border-radius:6px;
  background:transparent;
  color:var(--n500);
  cursor:pointer;
  transition:all 0.15s;
  white-space:nowrap;
}
.vtoggle:hover { border-color:var(--orange); color:var(--orange); }
.vtoggle.active { background:var(--black); color:var(--n0); border-color:var(--black); }

/* ── KALENDER ── */
.cal-title {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  font-size:20px;
  text-transform:uppercase;
  margin-bottom:12px;
  color:var(--black);
  letter-spacing:0.03em;
}
.cal-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:5px;
}
.cal-head {
  text-align:center;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--n500);
  padding:5px 0;
}
.cal-cell {
  min-height:90px;
  border:1.5px solid var(--n150);
  border-radius:8px;
  padding:7px 6px 5px;
  background:var(--n25);
  position:relative;
  transition:border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.cal-cell.cal-today {
  border-color:var(--orange);
  background:rgba(236,103,27,0.04);
}
.cal-cell.cal-outmonth { opacity:0.45; }
.cal-cell.cal-drop-hover {
  border-color:var(--orange);
  background:rgba(236,103,27,0.08);
  box-shadow:0 0 0 2px rgba(236,103,27,0.22);
}
.cal-cell-num {
  font-size:11px;
  font-weight:700;
  color:var(--n600);
  margin-bottom:5px;
  line-height:1;
}
.cal-today .cal-cell-num {
  color:var(--orange);
  font-size:12px;
}
.cal-cell-posts { display:flex; flex-direction:column; gap:3px; }

.cal-chip {
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:4px 6px;
  border-radius:5px;
  cursor:grab;
  transition:opacity 0.14s, transform 0.12s;
  user-select:none;
}
.cal-chip:hover { transform:scale(1.03); box-shadow:0 2px 8px rgba(28,28,28,0.12); }
.cal-chip.cal-dragging { opacity:0.3; cursor:grabbing; }
.cal-chip-fmt {
  font-size:8px;
  font-weight:800;
  letter-spacing:0.07em;
  text-transform:uppercase;
  opacity:0.65;
}
.cal-chip-title {
  font-size:9px;
  font-weight:600;
  line-height:1.3;
}
/* Plattform-Farben */
.cal-chip-instagram  { background:rgba(168,55,197,0.14);  color:#a837c5; }
.cal-chip-linkedin   { background:rgba(0,119,181,0.14);   color:#0077B5; }
.cal-chip-youtube    { background:rgba(255,0,0,0.11);     color:#cc0000; }
.cal-chip-tiktok     { background:rgba(18,18,18,0.10);    color:var(--n900); }
.cal-chip-facebook   { background:rgba(24,119,242,0.13);  color:#1877F2; }
.cal-chip-newsletter { background:rgba(236,72,153,0.14);  color:#db2777; }
.cal-chip-blog       { background:rgba(20,184,166,0.14);  color:#0d9488; }
.cal-chip-other      { background:var(--n100);    color:var(--n600); }

/* ── DRAG & DROP LISTE ── */
.plan-table tbody tr[draggable="true"] { cursor:grab; }
.plan-table tbody tr[draggable="true"]:active { cursor:grabbing; }
.plan-table tbody tr.tbl-dragging { opacity:0.3; }
.plan-table tbody tr.tbl-drop-target { outline:2px solid var(--orange); outline-offset:-2px; background:rgba(236,103,27,0.07) !important; }
.drag-handle { font-size:13px; color:var(--n600); letter-spacing:1px; cursor:grab; user-select:none; }

/* ── KUNDEN-MODUS ── */
.kunden-modus .agenten-only { display:none !important; }
.kunden-banner {
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  background:rgba(168,55,197,0.07);
  border:1.5px solid rgba(168,55,197,0.22);
  border-radius:10px;
  margin-bottom:14px;
  font-size:12px;
  font-weight:600;
  color:#a837c5;
  gap:14px;
}
.kunden-banner-text { flex:1; }
.kunden-banner-close { background:none; border:1.5px solid rgba(168,55,197,0.35); border-radius:6px; padding:4px 10px; cursor:pointer; font-size:11px; font-weight:700; color:#a837c5; white-space:nowrap; }
.kunden-banner-close:hover { background:rgba(168,55,197,0.1); }

/* ── TAGESANSICHT MODAL ── */
.dayview-panel {
  background:var(--n0); border-radius:16px; width:100%; max-width:700px;
  max-height:82vh; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(28,28,28,0.28);
}
.dayview-header {
  padding:22px 24px 16px; display:flex; align-items:flex-start;
  justify-content:space-between; border-bottom:1px solid var(--n100); flex-shrink:0;
}
.dayview-eyebrow { font-size:9px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--lilac); margin-bottom:4px; }
.dayview-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:24px; text-transform:uppercase; letter-spacing:0.02em; }
.dayview-count { font-size:12px; font-weight:300; color:var(--n500); margin-top:3px; }
.dayview-close { background:var(--n100); border:none; width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--n600); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dayview-close:hover { background:var(--n200); }
.dayview-toolbar {
  padding:11px 24px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--n100); flex-shrink:0; gap:12px; flex-wrap:wrap;
}
.dayview-sort { display:flex; align-items:center; gap:5px; }
.dv-sort { padding:4px 10px; font-size:11px; font-weight:700; border:1.5px solid var(--n200); border-radius:6px; background:transparent; color:var(--n500); cursor:pointer; transition:all 0.12s; }
.dv-sort:hover { border-color:var(--lilac); color:var(--magenta); }
.dv-sort.active { background:var(--black); color:var(--n0); border-color:var(--black); }
#dayViewBody { overflow-y:auto; flex:1; }
/* Listenansicht */
.dayview-list-row { display:flex; align-items:center; gap:12px; padding:13px 24px; border-bottom:1px solid var(--n100); cursor:pointer; transition:background 0.12s; }
.dayview-list-row:last-child { border-bottom:none; }
.dayview-list-row:hover { background:var(--n50); }
/* Kartenansicht */
.dayview-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; padding:16px 24px; }
.dayview-card { border-radius:10px; padding:14px; cursor:pointer; border:1.5px solid var(--n100); background:var(--n25); transition:transform 0.12s,box-shadow 0.12s; display:flex; flex-direction:column; gap:8px; }
.dayview-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(28,28,28,0.1); }
.dayview-card-top { display:flex; align-items:center; justify-content:space-between; }
.dayview-card-title { font-size:13px; font-weight:700; line-height:1.35; }
.dayview-card-hook { font-size:11px; font-weight:400; color:var(--n500); font-style:italic; line-height:1.3; }
.dayview-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px; border-top:1px solid var(--n100); }
/* Kalender-Tage klickbar */
.cal-day { cursor:pointer; }
.cal-day:hover { background:rgba(236,103,27,0.10); border-radius:6px; }

/* ===== Etappe C: Content-Cycle / Asset-Bibliothek / KPI-Auswertung ===== */
/* Content-Cycle (Wochenkalender) */
.cyc-wrap { overflow-x:auto; }
.cyc-cal { display:grid; grid-template-columns:repeat(7,minmax(110px,1fr)); border:1px solid var(--n150); border-radius:10px; overflow:hidden; min-width:680px; }
.cyc-cal-day { border-right:1px solid var(--n150); display:flex; flex-direction:column; min-height:130px; }
.cyc-cal-day:last-child { border-right:none; }
.cyc-cal-dayhead { display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--n600); padding:8px 10px; background:var(--n50); border-bottom:1px solid var(--n150); }
.cyc-cal-cnt { background:var(--o700); color:var(--n0); font-size:9px; font-weight:700; border-radius:8px; padding:1px 6px; min-width:16px; text-align:center; }
.cyc-cal-cnt:empty { display:none; }
.cyc-cal-body { padding:8px; display:flex; flex-direction:column; gap:5px; flex:1; }
.cyc-cal-chip { color:var(--n0); font-size:10px; font-weight:700; padding:4px 8px; border-radius:6px; text-align:center; line-height:1.25; }
.cyc-cal-empty { color:var(--n600); font-size:13px; text-align:center; padding-top:8px; }
.cyc-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.cyc-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:14px; font-size:12px; color:var(--n600); }
.cyc-leg { display:inline-flex; align-items:center; }
.cyc-leg-ist { color:var(--magenta,var(--m700)); font-weight:700; margin-left:5px; }
.cyc-sum { margin-top:14px; font-size:13px; color:var(--n600); }
.cyc-zus { margin-top:16px; }
.cyc-zus-h { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lilac,var(--li500)); margin-bottom:8px; }
.cyc-zus-tag { display:inline-block; background:rgba(202,153,197,.18); color:var(--m700); font-size:11px; font-weight:600; padding:4px 11px; border-radius:12px; margin:0 6px 6px 0; }

/* Asset-Bibliothek */
.asset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.asset-card { display:flex; flex-direction:column; border:1px solid var(--n150); border-radius:10px; overflow:hidden; text-decoration:none; background:var(--n0); transition:box-shadow .15s, transform .15s; }
.asset-card:hover { box-shadow:0 6px 18px rgba(28,28,28,.12); transform:translateY(-2px); }
/* Figuren (SAAS-14 Etappe 2, js/37-figuren.js) */
.figuren-liste { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.figur-karte { display:flex; gap:12px; border:1px solid var(--n200); border-radius:10px; padding:10px; background:var(--n0); }
.figur-fotos { display:grid; grid-template-columns:repeat(2,52px); gap:4px; align-content:start; }
.figur-foto { width:52px; height:52px; object-fit:cover; border-radius:6px; background:var(--n50); }
.figur-text { flex:1; min-width:0; }
.figur-name { font-weight:700; color:var(--n900); }
.figur-knoepfe { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.figur-auswahl { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; max-height:260px; overflow-y:auto; padding:2px; }
.figur-wahl { padding:0; border:2px solid transparent; border-radius:8px; background:none; cursor:pointer; }
.figur-wahl.an { border-color:var(--o700); }
.figur-wahl.markiert { border-color:#c0392b; box-shadow:0 0 0 2px rgba(192,57,43,.35); }
.figur-wahl:focus-visible { outline:2px solid var(--o700); outline-offset:2px; }
.figur-einwilligung { margin-top:14px; padding:12px; border:1px solid var(--n200); border-radius:8px; background:var(--n50); }
.figur-einwilligung-haken { display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:1.45; }
.asset-thumb { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--n100); }
.asset-pdf { display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:26px; color:var(--o700); background:rgba(236,103,27,.10); }
.asset-meta { padding:8px 10px; display:flex; flex-direction:column; gap:2px; }
.asset-kanal { font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.asset-thema { font-size:11px; color:var(--n600); line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* KPI-Auswertung (Report + Druck) */
.kpi-rep-head { display:flex; justify-content:space-between; align-items:flex-end; padding:18px 22px 14px; border-bottom:2px solid var(--orange,var(--o500)); }
/* 🔻 02.09.2026: Der Berichtstitel steht seit Ninas Umbau im KARTENKOPF darüber. Im Markup
   bleibt er trotzdem stehen — aber nur fürs PDF: Am Bildschirm stünde „Social Media-Report"
   sonst zweimal untereinander, im Export fehlte er ohne ihn ganz. */
.kpi-rep-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:26px; text-transform:uppercase; letter-spacing:var(--sperrung-titel); display:none; }
@media print { .kpi-rep-title { display:block; } }
.kpi-rep-client { font-size:13px; color:var(--n500); }
.kpi-rep-date { font-size:12px; color:var(--n500); }
.kpi-rep-section { font-size:10px; font-weight:700; letter-spacing:var(--sperrung-label); text-transform:uppercase; color:var(--lilac,var(--li500)); padding:18px 22px 0; }
.kpi-rep-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; padding:12px 22px; }
.kpi-rep-card { border:1px solid var(--n150); border-radius:10px; padding:14px 16px; }
/* Hob die Engagement-Rate bis 22.08.2026 mit schwarzer Flaeche hervor. Im Kundenreport,
   der gedruckt wird, kostet das viel Farbe und passt nicht mehr zum hellen Schema. Die
   Hervorhebung liegt jetzt im Akzentstreifen und im orangen Rahmen. */
.kpi-rep-card { position:relative; overflow:hidden; }
.kpi-rep-card.kpi-rep-dark { background:var(--n0); border-color:var(--o100); }
/* 🔻 04.09.2026: der orange Streifen (::before) ist entfallen — nur die Kennzahl-Kacheln tragen ihn noch. */
.kpi-rep-card.kpi-rep-dark .kpi-rep-lbl, .kpi-rep-card.kpi-rep-dark .kpi-rep-sub { color:var(--n600); }
.kpi-rep-card.kpi-rep-dark .kpi-rep-val { color:var(--o700); }
.kpi-rep-lbl { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--n500); }
.kpi-rep-val { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:30px; line-height:1.1; margin:4px 0 2px; }
.kpi-rep-sub { font-size:11px; color:var(--n500); }
.kpi-rep-foot { padding:8px 22px 18px; font-size:10px; color:var(--n500); }
/* ── KPI-Ausbau 07.09.2026: Monatsvergleich, Verlaufskurve, Demografie ──────────────────────
   Alles im Innenmass des Reports (22px), Text in Texttönen, Farbe nur an der Marke selbst. */
.kpi-rep-untertitel { font-size:12px; color:var(--n500); padding:2px 22px 0; }
.kpi-rep-delta { font-size:11px; font-weight:700; }
.kpi-rep-delta.plus { color:#2E7D32; }
.kpi-rep-delta.minus { color:#B3261E; }
.kpi-rep-delta.gleich { color:var(--n500); }
/* Verlaufskurve: zwei kleine Diagramme je Kanal nebeneinander (Reichweite, Follower). */
.kpi-kurven { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; padding:12px 22px; }
.kpi-kurve { border:1px solid var(--n150); border-radius:10px; padding:12px 14px 8px; }
.kpi-kurve-titel { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--n500); margin-bottom:6px; }
.kpi-kurve svg { display:block; width:100%; height:auto; overflow:visible; }
.kpi-kurve .gitter { stroke:var(--n150); stroke-width:1; }
.kpi-kurve .achse { font-size:10px; fill:var(--n500); }
.kpi-kurve .linie { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.kpi-kurve .punkt { stroke:var(--n0); stroke-width:2; }
.kpi-kurve .treffer { fill:transparent; cursor:default; }
.kpi-kurve .endwert { font-size:11px; font-weight:700; fill:var(--n900); }
.kpi-kurve-leer { font-size:12px; color:var(--n500); padding:8px 0 4px; }
.kpi-tooltip { position:fixed; z-index:400; pointer-events:none; background:var(--n900); color:var(--n0); font-size:12px; line-height:1.35; padding:6px 9px; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.kpi-tooltip strong { font-size:13px; }
/* Demografie: Balken höchstens 24px stark, 4px gerundetes Datenende, Beschriftung in Texttönen. */
.kpi-demo { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 24px; padding:12px 22px; }
.kpi-demo-block-titel { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--n500); margin-bottom:6px; }
.kpi-demo-zeile { display:grid; grid-template-columns:minmax(64px,1fr) 2fr 40px; align-items:center; gap:8px; font-size:12px; color:var(--n900); padding:3px 0; }
.kpi-demo-zeile .kpi-demo-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kpi-demo-spur { height:12px; background:var(--n100); border-radius:0 4px 4px 0; }
.kpi-demo-balken { height:12px; border-radius:0 4px 4px 0; }
.kpi-demo-zeile .kpi-demo-wert { text-align:right; color:var(--n600); font-variant-numeric:tabular-nums; }
.kpi-demo-leer { font-size:12px; color:var(--n500); padding:6px 22px 4px; }
@media print { .kpi-tooltip { display:none; } .kpi-kurve, .kpi-demo { break-inside:avoid; } }
.top-post-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--n100); }
.top-post-row:last-child { border-bottom:none; }
.top-post-rank { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:20px; color:var(--orange,var(--o500)); width:22px; text-align:center; flex:0 0 auto; }
.top-post-thumb { width:46px; height:46px; border-radius:8px; object-fit:cover; flex:0 0 auto; }
.top-post-thumb-empty { background:var(--n100); display:flex; align-items:center; justify-content:center; color:var(--n600); }
.top-post-thumb-empty svg { width:20px; height:20px; }
.top-post-meta { flex:1 1 auto; min-width:0; }
.top-post-text { font-size:13px; color:var(--n900); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-post-sub { font-size:11px; color:var(--n500); margin-top:2px; }
.top-post-stats { display:flex; gap:12px; font-size:12px; color:var(--n600); flex:0 0 auto; }
.top-net-block { margin-bottom:14px; }
.top-net-block:last-child { margin-bottom:0; }
.top-net-head { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--n600); padding:4px 0 2px; }
.top-net-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }

/* ---------- Branchen-Trends pro Kunde ---------- */
.trends-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.trends-branche { font-size:13px; color:var(--n900); }
.trends-stand { font-size:11px; color:var(--n500); margin:2px 0 12px; }
.trends-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.trend-card { border:1px solid var(--n150); border-left:3px solid var(--orange,var(--o500)); border-radius:10px; padding:13px 15px; background:var(--n0); }
.trend-card-titel { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:16px; line-height:1.2; margin-bottom:6px; }
.trend-card-date { display:inline-block; font-size:10.5px; font-weight:700; color:var(--orange,var(--o500)); background:rgba(236,103,27,.10); border-radius:5px; padding:2px 7px; margin-bottom:7px; letter-spacing:.01em; }
.trend-card-text { font-size:12.5px; color:var(--n700); line-height:1.5; }
.trend-card-relevanz { font-size:11.5px; color:var(--n600); margin-top:8px; line-height:1.45; }
.trend-card-relevanz span { font-weight:700; color:var(--magenta,var(--m700)); }
.trend-card-foot { margin-top:9px; font-size:11px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.trend-card-foot a { color:var(--orange,var(--o500)); text-decoration:none; }
.trend-card-foot a:hover { text-decoration:underline; }
.trend-card-use { background:var(--o700); color:var(--n0); border:0; border-radius:6px; padding:5px 10px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; flex:0 0 auto; }
.trend-card-use:hover { filter:brightness(1.05); }
/* Trend-Slot im Content-Cycle */
.cyc-cal-chip.cyc-cal-trend { background:rgba(236,103,27,.12); color:var(--orange,var(--o500)); border:1px dashed var(--orange,var(--o500)); }
.cyc-dot-trend { background:transparent !important; color:var(--orange,var(--o500)); display:inline-flex; align-items:center; justify-content:center; font-size:11px; width:auto; }
.cyc-cal-chip.cyc-cal-spontan { background:rgba(253,204,104,.20); color:var(--warn); border:1px dashed #f4a400; }
.cyc-dot-spontan { background:transparent !important; color:#f4a400; display:inline-flex; align-items:center; justify-content:center; font-size:11px; width:auto; }
/* KW-Badge: jede Kalenderwoche eine eigene kräftige TALAVY-Farbe (Farbe inline pro Woche gesetzt) */
.kw-badge { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:6px; white-space:nowrap; }
/* Trend-Content-Zeile — sticht mit zartem Orange + linkem Streifen heraus (Rest bleibt weiß) */
.plan-table tbody tr.plan-row-trend > td { background:rgba(236,103,27,.07); }
.plan-table tbody tr.plan-row-trend:hover > td { background:rgba(236,103,27,.12); }
.plan-table tbody tr.plan-row-trend > td:first-child { box-shadow:inset 6px 0 0 var(--orange,var(--o500)); }
/* Story-Zeile: KEINE eigene Farbe mehr (Ninas Ansage 26.08.2026).
   Bis dahin lag ein helles Rosa (#F48FB1) ueber der ganzen Zeile — eine markenfremde Farbe, die
   jede Story lauter machte als alles andere im Plan. Die Klasse `plan-row-story` wird seither
   gar nicht mehr vergeben (siehe renderPlan in js/06-redaktionsplan.js); dass eine Zeile eine
   Story ist, steht in der Spalte „Format".
   ⚠️ Keine leere Regel stehen lassen: Eine Regel `.plan-row-story > td { }` haette beim naechsten
      Umbau ausgesehen, als gehoere dort noch etwas hin. */
/* Spontan-Slot-Zeile (reserviert) — bernsteingelb, abgegrenzt vom orangen Trend-Slot */
.plan-table tbody tr.plan-row-spontan > td { background:rgba(253,204,104,.20); }
.plan-table tbody tr.plan-row-spontan:hover > td { background:rgba(253,204,104,.30); }
.plan-table tbody tr.plan-row-spontan > td:first-child { box-shadow:inset 6px 0 0 #f4a400; }

/* Kampagnen-Zeile — Lilac aus dem Markenkanon (03.08.2026).
   Eine Kampagne addiert Beiträge zum bestehenden Plan; ohne Kennzeichnung wundert man sich,
   woher die zusätzlichen Zeilen kommen.

   ⚠️ Bewusst ANDERS gebaut als die Regeln darüber: Die Kampagne ist eine ZUORDNUNG, kein Format.
   Derselbe Beitrag kann zugleich eine Story sein. Deshalb ist `plan-row-kampagne` additiv:
     · der linke Streifen ist IMMER lilac → „gehört zu einer Kampagne"
     · der Hintergrund nur, wenn die Zeile nicht schon Story/Trend/Spontan färbt → das Format
       bleibt erkennbar, denn es entscheidet über die Produktion.
   So verdeckt keine der beiden Angaben die andere. */
.plan-table tbody tr.plan-row-kampagne > td:first-child { box-shadow:inset 6px 0 0 var(--lilac,var(--li500)); }
.plan-table tbody tr.plan-row-kampagne:not(.plan-row-trend):not(.plan-row-spontan) > td {
  background:rgba(202,153,197,.20);
}
.plan-table tbody tr.plan-row-kampagne:not(.plan-row-trend):not(.plan-row-spontan):hover > td {
  background:rgba(202,153,197,.30);
}

/* ── TAGESFARBEN als Streifen an der linken Kante der Zeile ───────────────────────────
   (Ninas Idee vom 27.08.2026 — auf Staging erprobt, seither die gueltige Form)

   🔑 VIER FORMEN WURDEN PROBIERT, und die Lehre steckt im Weg dorthin:
      1. FLAECHE (Zell-Hintergrund) — muss stark transparent sein, sonst erschlaegt sie den Text.
         Dann aber liegen alle fuenf Toene dicht beieinander: schwaechster Nachbar-Abstand 7,7
         von 255. Genau das, was die Faerbung verhindern sollte.
      2. LINIE unter der ganzen Zeile — Farbe durfte voll bleiben (Abstand 162), aber eine Linie
         in JEDER Zeile ergibt ein Gitter.
      3. DREIECK in der linken unteren Ecke — unscheinbar und gut sichtbar, aber ohne Bezug zur
         uebrigen Gestaltung.
      4. STREIFEN an der linken Kante — dieselbe Sprache wie die Kennzahl-Kacheln, und durch die
         zusammenwachsenden Zeilen entsteht EINE Spaltenlinie, die pro Tag die Farbe wechselt.
      🔑 Nicht die FARBWAHL war je das Problem, sondern die FLAECHE, die sie einnimmt.

   Alle Beitraege EINES Tages tragen dieselbe Farbe. Wechselt die Farbe, faengt ein neuer Tag an.
   3px wie der Akzentstreifen der Kennzahl-Kacheln (`.stat-card::before`), nur senkrecht.

   🔴 WARUM EIN EIGENES ELEMENT UND KEIN `border-left` — teuer nachgemessen am 27.08.2026:
      Der erste Anlauf setzte `border-left:3px` an der ersten Zelle. Im Blatt stand 3px, zu sehen
      war knapp die Haelfte. Ursache: `.plan-table` arbeitet mit `border-collapse:collapse`. Dort
      liegen Raender MITTIG auf der Zellenkante — vom aeussersten Rand faellt also die Haelfte
      nach aussen, und dort verdeckt ihn der 1px-Rahmen von `.plan-table-wrap`, das wegen
      `overflow-x:auto` ausserdem beschneidet. Ninas Rueckmeldung („darf ruhig so dick sein wie
      bei den Kacheln") war die Beobachtung genau dieses Effekts.
      🔑 Die Kacheln haben dasselbe Problem nie gehabt, weil sie ihren Streifen als eigenes
         Element zeichnen. Genau das machen wir hier auch: ein absolut gesetztes `::before` liegt
         INNERHALB der Zelle, wird nicht zusammengefasst und nicht beschnitten — 3px sind 3px.
      ⚠️ Wer hier auf `border-left` zurueckbaut, bekommt still wieder eine halb so dicke Linie.
      Ein Test liest die Breite aus der Kachel-Regel, damit beide nie auseinanderlaufen.

   🔑 DIE LINKE KANTE IST NICHT FREI. Vier Zustaende markieren dort bereits:
      Trend-Zeile, Spontan-Slot, Kampagne und die eigene Auswahl. Deshalb sind ihre Streifen von
      `inset 3px` auf `inset 6px` verbreitert: Die aeusseren 3px verdeckt der Tagesstreifen, die
      inneren 3px bleiben als Zustands-Streifen sichtbar. Ergebnis wie zuvor — 3px Tag, 3px
      Zustand — nur beide garantiert in voller Staerke.
      Die Alternative waere gewesen, den Zustands-Streifen zu opfern; dann saehe man an der Zeile
      nicht mehr, dass sie zu einer Kampagne gehoert oder markiert ist.
   ⚠️ Zeilen OHNE Datum tragen keinen Tagesstreifen; ihr Zustands-Streifen ist dort 6px statt 3px.
      Rein kosmetisch und praktisch nie zu sehen — im Redaktionsplan hat jeder Beitrag ein Datum.

   🔻 04.09.2026 (Ninas Vorgabe): nur noch ZWEI Toene, die sich pro Tag abwechseln —
      Lilac · Eierschale. Vorher fuenf (Orange · Magenta · Lilac · Schwarz · Eierschale).
      Die Anzahl steht als PLAN_TAG_FARBEN in js/06-redaktionsplan.js; ein Test misst beides.
   ⚠️ Lilac steht damit an derselben Kante wie der Kampagnen-Streifen. Auf einer Kampagnen-Zeile
      an einem Lilac-Tag verschmelzen beide. */
.plan-table tbody tr > td:first-child { position:relative; }
.plan-table tbody tr.plan-tag-c0 > td:first-child::before,
.plan-table tbody tr.plan-tag-c1 > td:first-child::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; pointer-events:none;
}
.plan-table tbody tr.plan-tag-c0 > td:first-child::before { background:var(--li500); }   /* Lilac      */
.plan-table tbody tr.plan-tag-c1 > td:first-child::before { background:var(--egg); }     /* Eierschale */

/* ---------- Instagram Grid-Vorschau ---------- */
/* Der zweispaltige Rahmen (.ig-grid-layout/-main/-side) ist am 25.08.2026 mit der Kachel
   „Format-Mix" entfallen — die Grid-Vorschau steht seither allein auf voller Breite. */
.ig-grid-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ig-grid-sub { font-size:11px; color:var(--n500); margin-top:2px; line-height:1.4; }
.ig-grid-counter { font-size:12px; font-weight:600; color:var(--n500); white-space:nowrap; }
.ig-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; max-width:420px; }
.ig-cell { position:relative; aspect-ratio:3/4; border-radius:3px; overflow:hidden; cursor:pointer; background:var(--n100); transition:transform .12s, box-shadow .12s; }
.ig-cell:hover { transform:scale(1.03); box-shadow:0 4px 14px rgba(28,28,28,.18); z-index:2; }
.ig-cell-media { width:100%; height:100%; object-fit:cover; display:block; }
.ig-cell-fmt { position:absolute; top:5px; left:5px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--n900); background:rgba(255,255,255,.85); padding:2px 6px; border-radius:4px; }
.ig-date-tag { position:absolute; bottom:5px; right:5px; font-size:9px; font-weight:600; color:var(--n0); background:var(--n600); padding:2px 6px; border-radius:4px; }
.ig-cell-empty { background:rgba(236,103,27,.06); border:2px dashed rgba(236,103,27,.4); }
.ig-cell-planned { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; }
.ig-cell-fmt-plan { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--n500); }
.ig-cell-plandate { font-size:11px; font-weight:700; color:var(--orange,var(--o500)); line-height:1.25; }
/* 05.09.2026 (Ninas Vorgabe): Die Legende „Reel · Carousel …" klebte am unteren Kartenrand und
   trug darüber eine dünne Linie. Jetzt Luft nach unten (18px wie das Raster darüber), keine Linie. */
.ig-grid-legend { display:flex; flex-wrap:wrap; gap:14px; padding:0 20px 18px; }
.ig-leg { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--n600); }
.ig-leg-dot { width:12px; height:12px; border-radius:3px; flex:0 0 auto; }
.ig-leg-planned { background:rgba(236,103,27,.1); border:2px dashed var(--orange,var(--o500)); }

@media print {
  body * { visibility:hidden; }
  #kpiReportPrint, #kpiReportPrint * { visibility:visible; }
  #kpiReportPrint { position:absolute; left:0; top:0; width:100%; padding:0; }
  .kpi-rep-card.kpi-rep-dark { background:var(--n0) !important; border-color:var(--o100) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .kpi-rep-head { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ════════════════ Hilfe-Chat — der Bot heisst FRED (seit 27.08.2026) ════════════════ */
/* Auslöser unten in der grauen Seitenleiste */
.help-trigger {
  margin:0 8px 10px; padding:10px 12px; border-radius:10px;
  background:var(--o50); border:1px solid var(--o100);
  color:var(--o700); cursor:pointer; display:flex; align-items:center; gap:10px;
  font-family:'Barlow',sans-serif; font-size:12.5px; font-weight:600;
  transition:background 0.15s, transform 0.1s;
  /* Fred schaut oben rechts heraus (Ninas Vorgabe 27.08.2026).
     ⚠️ KEIN `overflow:hidden` — genau das wuerde ihn am Rand abschneiden. Der Bezugspunkt
        (`position:relative`) muss trotzdem hier liegen, sonst richtet er sich an der Seite aus.
     ⚠️ Der obere Rand der Leiste liegt darueber: Der Auslöser braucht Luft nach oben, sonst
        schneidet der Kartenrand der Seitenleiste ihm den Kopf ab. Deshalb `margin-top`. */
  position:relative; margin-top:74px; padding-right:96px;
}
.help-trigger:hover { background:var(--o100); }
.help-trigger:active { transform:scale(0.98); }
.help-trigger .ht-sub { display:block; font-size:10px; font-weight:400; color:var(--n600); margin-top:1px; }
/* Freds Oberkoerper. Er sitzt mit den Fuessen auf der Unterkante des Feldes und ragt nach OBEN
   heraus — so wirkt er, als lehne er sich an das Feld, statt darauf zu schweben.
   `pointer-events:none`: Der Klick soll den Auslöser treffen, nicht das Bild; sonst haengt ein
   Klick auf Freds durchsichtige Ecken ins Leere. */
/* 🔑 DOPPELT SO GROSS wie zuerst gebaut (Ninas Vorgabe 27.08.2026): 144px statt 72px — bei 72px
   war das Gesicht zu klein, um Fred zu erkennen, und darum geht es bei einem Bot mit Namen.
   ⚠️ DREI WERTE HAENGEN ZUSAMMEN und muessen gemeinsam wachsen:
     · `width`        — Freds Groesse
     · `padding-right` am Auslöser — der Platz, den er dem Text wegnimmt
     · `margin-top`   am Auslöser — die Luft nach oben, sonst schneidet der Rand ihm den Kopf ab
     Wer nur die Breite aendert, bekommt Fred auf dem Text oder ohne Kopf. Ein Test misst, dass
     alle drei zusammenpassen.
   🔑 Er braucht WENIGER Platz als er breit ist: Sein Koerper nimmt nur die mittleren ~60% des
      Bildes ein, links und rechts ist es durchsichtig. Deshalb darf er rechts ueber die Kante
      hinausragen — sichtbar wird davon nichts.
      ⚠️ Nachgemessen: bei `right:-10px` endete er exakt an der Kante der Seitenleiste (252px),
         weiter rechts ragte er in den Inhalt. Seit dem 27.08.2026 steht er auf Ninas Wunsch
         18px weiter links (`right:8px`) — dadurch bleibt rechts von ihm ein sichtbarer Rand
         zur Kante, und er wirkt weniger angeklebt. */
/* 🔑 FRED IST IM RUHEZUSTAND UNSICHTBAR (Ninas Vorgabe 27.08.2026: „Fred lenkt mich zu sehr von
      der Arbeit ab. Er darf nur erscheinen, wenn man mit der Maus drüber streift, dann aber in
      der aktuellen vollen Größe … in voller Dichte").
      Er erscheint beim Überfahren des Auslösers — unverändert gross, ohne Verkleinerung, mit
      voller Deckkraft. Nur das Einblenden ist weich, damit er nicht aufpoppt.

   🔴 UNSICHTBAR HEISST AUCH KLICK-DURCHLÄSSIG. `opacity:0` allein nimmt einem Element seine
      Klickfläche NICHT — Fred läge dann als unsichtbares Hindernis über den Menüpunkten, und
      ein Klick auf „Markenprofil" öffnete den Hilfe-Chat. Genau dieser Fehler ist am 27.08.2026
      schon einmal passiert, nur andersherum: Fred SAH aus wie anklickbar und war es nicht.
      Deshalb wandert `pointer-events` mit der Sichtbarkeit.

   ⚠️ `.help-trigger:hover` greift auch, wenn der Zeiger über Freds KOPF steht — der ragt über
      den Auslöser hinaus, ist aber sein Nachkomme im Markup. Ohne das könnte man ihn nie
      erreichen, sobald er einmal sichtbar ist.

   🔑 `.ht-zeigen` ist derselbe Zustand, nur über eine Klasse auslösbar. Headless Chrome kennt
      keinen echten Mauszeiger — ohne diesen Schalter liesse sich der Hover-Zustand nicht
      MESSEN, und der Klick-Test auf Freds Brust (scripts/messe-layout.mjs) prüfte einen Fred,
      den es so nicht gibt. Die Klasse steht bewusst in DERSELBEN Regel: Was gemessen wird, ist
      die echte Deklaration und keine Nachbildung. */
.ht-fred {
  position:absolute; right:8px; bottom:0; width:144px; height:auto;
  opacity:0; pointer-events:none;
  cursor:pointer; transition:opacity .18s ease, transform .18s ease;
  /* 🔴 FRED IST ANKLICKBAR — und das war er bis zum 27.08.2026 NICHT, obwohl es so aussah:
        Er hatte `pointer-events:none`, Klicks gingen also durch ihn hindurch. Sein UNTERER Teil
        liegt ueber dem orangen Feld und oeffnete deshalb den Chat — sein KOPF ragt darueber
        hinaus, dort war nichts. Man klickt aber auf das Gesicht.

     🔑 WARUM NICHT EINFACH `pointer-events:auto`: Das Bild ist ein Rechteck von 144x155px, sein
        Koerper nimmt davon nur die mittleren ~60% ein — der Rest ist durchsichtig. Ein volles
        Rechteck legte eine unsichtbare Klickflaeche ueber die Menuepunkte darueber und
        verschluckte deren Klicks. Sichtbar waere davon nichts; man klickt auf „Markenprofil" und
        landet im Hilfe-Chat.

     🔑 `clip-path` loest beides mit einer Zeile: Es beschneidet die Form UND die Klickflaeche.
        Uebrig bleibt der Streifen, in dem Fred wirklich steht (25%–86% der Bildbreite); alles
        daneben ist wieder durchlaessig. Sichtbar aendert sich nichts — dort ist das Bild ohnehin
        durchsichtig. Ein Klick-Test misst genau das: Mitte trifft Fred, Ecke trifft ihn nicht. */
  clip-path:inset(0 14% 0 25%);
}
/* Der Hover-Zustand: volle Groesse, volle Deckkraft, anklickbar. `:focus-within` nimmt die
   Tastatur mit — wer sich mit der Tabulatortaste auf den Auslöser stellt, soll Fred auch sehen. */
.help-trigger:hover .ht-fred,
.help-trigger:focus-within .ht-fred,
.help-trigger.ht-zeigen .ht-fred { opacity:1; pointer-events:auto; }

/* 🔑 Beim Oeffnen verschwindet er GANZ (Ninas Vorgabe) — sein Bild steht dann oben im Chat.
   Zwei Freds gleichzeitig waeren einer zu viel.
   ⚠️ MUSS NACH der Hover-Regel stehen: Bei gleicher Spezifität gewinnt die spätere. Stünde sie
      davor, bliebe Fred bei geöffnetem Chat sichtbar, solange die Maus auf dem Auslöser ruht. */
body.help-offen .ht-fred { opacity:0; pointer-events:none; transform:translateY(6px); }
body.help-offen .help-trigger { padding-right:12px; }

/* Chat-Fenster (klappt unten links auf) */
.help-panel {
  position:fixed; left:14px; bottom:14px; width:344px; max-width:calc(100vw - 28px);
  height:480px; max-height:calc(100vh - 28px); z-index:300;
  background:var(--n0); border-radius:16px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,0.32); display:none; flex-direction:column;
  border:1px solid rgba(0,0,0,0.06);
}
.help-panel.open { display:flex; animation:helpIn 0.18s ease; }
@keyframes helpIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

.help-head { background:var(--black); padding:13px 15px; display:flex; align-items:center; gap:11px; }
/* 06.09.2026 (Nina): kein orange-gelber Ring mehr hinter Freds rundem Foto — der Verlauf schien
   durch die durchsichtigen Ecken des PNG als „Rändchen". */
.help-head .hh-avatar { width:34px; height:34px; border-radius:50%; background:transparent; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; overflow:hidden; }
/* Freds rundes Bild fuellt den Kreis. `overflow:hidden` am Kreis schneidet es rund zu — dadurch
   bleibt der orange Verlauf als Grund sichtbar, solange das Bild laedt oder wenn es fehlt. */
.help-head .hh-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.help-head .hh-title { color:var(--n0); font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:16px; line-height:1; }
.help-head .hh-sub { color:var(--lilac); font-size:9.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; margin-top:3px; }
.help-head .hh-close { margin-left:auto; background:none; border:none; color:var(--muted); font-size:21px; cursor:pointer; line-height:1; padding:2px 5px; }
.help-head .hh-close:hover { color:var(--n0); }

/* 06.09.2026 (Nina): statt Eierschale das Lilac-Verlaufsschema der Spalten — oben voll, bei 90px weiss. */
.help-body { flex:1; overflow-y:auto; padding:15px; display:flex; flex-direction:column; gap:10px; background:linear-gradient(to bottom, rgba(202,153,197,.18) 0, rgba(202,153,197,.18) 18px, rgba(202,153,197,0) 90px), var(--n0); }
.help-msg { max-width:87%; padding:10px 13px; border-radius:13px; font-size:13px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.help-msg.bot { align-self:flex-start; background:var(--n0); color:var(--black); border-bottom-left-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.help-msg.user { align-self:flex-end; background:var(--o700); color:var(--n0); border-bottom-right-radius:4px; }
.help-msg.bot strong { color:var(--magenta); font-weight:700; }
.help-typing { align-self:flex-start; background:var(--n0); padding:12px 14px; border-radius:13px; border-bottom-left-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,0.06); display:flex; gap:4px; }
.help-typing span { width:6px; height:6px; border-radius:50%; background:var(--lilac); animation:helpDot 1.2s infinite; }
.help-typing span:nth-child(2){ animation-delay:0.2s; }
.help-typing span:nth-child(3){ animation-delay:0.4s; }
@keyframes helpDot { 0%,60%,100%{ opacity:0.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.help-foot { padding:11px; border-top:1px solid rgba(0,0,0,0.07); background:var(--n0); display:flex; gap:8px; align-items:flex-end; }
.help-foot textarea { flex:1; resize:none; border:1px solid rgba(0,0,0,0.14); border-radius:10px; padding:9px 11px; font-family:'Barlow',sans-serif; font-size:13px; line-height:1.4; max-height:90px; outline:none; }
.help-foot textarea:focus { border-color:var(--orange); }
/* Trug bis zum 23.08.2026 nur ein Pfeilsymbol und war 38px breit. Ohne Symbol braucht der
   Knopf eine Beschriftung — und dafür Platz. */
.help-send { min-width:74px; height:38px; flex-shrink:0; border:none; border-radius:10px; padding:0 14px; background:var(--o700); color:var(--n0); font-family:'Barlow',sans-serif; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:opacity 0.15s; }
.help-send:disabled { opacity:0.45; cursor:default; }
.help-hint { font-size:10px; color:var(--n600); text-align:center; padding:0 0 8px; background:var(--n0); }

/* Redaktionsplan Drag & Drop — flüssigere Rückmeldung (Block 2): gezogene Zeile blasser,
   Ziel-Zeile klar markiert (Tönung + Linie oben) statt „bockigem" Ziehen ohne Feedback. */
/* Per Shift-Klick ausgewählte Zeilen — kräftiger als die Ziel-Markierung beim Ziehen, damit
   Auswahl und Drop-Ziel nie verwechselt werden. */
/* ⚠️ Die Selektoren tragen seit dem 26.08.2026 `.plan-table tbody` vor sich. Urspruenglich, weil
   die Tagesfarbe damals eine FLAECHE war und ueberstimmt werden musste. Sie ist inzwischen ein
   Rand und steht der Auswahl nicht mehr im Weg — der lange Selektor bleibt trotzdem: Er ist
   eindeutiger und haelt die Auswahl auch gegen kuenftige Zellenfarben. */
.plan-table tbody tr.plan-row-selected > td,
.plan-table tbody tr.plan-row-selected:hover > td { background:rgba(236,103,27,0.16); }
.plan-table tbody tr.plan-row-selected > td:first-child { box-shadow:inset 6px 0 0 0 var(--orange,var(--o500)); }
tr.plan-row-dragging { opacity:.45; }
.plan-table tbody tr.plan-row-dragover > td,
.plan-table tbody tr.plan-row-dragover:hover > td { background:rgba(236,103,27,0.12); box-shadow:inset 0 2px 0 0 var(--orange); }
/* Markiert wird der ganze Ziel-TERMIN (alle Zeilen des Tages, z. B. Instagram + Facebook als
   Cross-Post). Die Linie oben nur einmal — sonst bekäme jede Zeile der Gruppe einen eigenen Strich. */
.plan-table tbody tr.plan-row-dragover + tr.plan-row-dragover > td { box-shadow:none; }

/* Kurzes Aufleuchten nach einer Aktion (scrollToPieceRow). Steht bewusst als LETZTE der
   Zeilenfarben im Blatt: Es muss Tagesfarbe, Format, Kampagne und Auswahl ueberstrahlen —
   sonst leuchtet es genau dort nicht, wo man es am dringendsten braucht. */
.plan-table tbody tr.plan-row-flash > td,
.plan-table tbody tr.plan-row-flash:hover > td { background:rgba(236,103,27,.16); transition:background-color .3s; }

/* Deaktivierte CTA-Buttons sichtbar ausgrauen (z. B. „✓ Visual hinzufügen" während des Uploads) */
.btn-cta:disabled { opacity:0.4; cursor:not-allowed; }
.btn-cta:disabled:hover { opacity:0.4; transform:none; }

/* Feste Upload-Anzeige unten rechts — bleibt sichtbar, auch wenn das Visual-Fenster zu ist */
#uploadHud { position:fixed; right:18px; bottom:18px; z-index:9999; width:290px; max-width:calc(100vw - 36px);
  background:var(--n0); border:1px solid var(--n200); border-radius:12px; box-shadow:0 8px 28px rgba(28,28,28,.18);
  padding:12px 14px; font-family:'Barlow',sans-serif; font-size:13px; color:var(--n900); }
#uploadHud .uh-title { font-weight:700; margin-bottom:8px; }
#uploadHud .uh-row { margin-bottom:9px; }
#uploadHud .uh-pct { float:right; font-weight:700; color:var(--orange); margin-left:8px; }
#uploadHud .uh-name { display:inline-block; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
#uploadHud .uh-bar { height:6px; border-radius:99px; background:var(--n150); margin-top:5px; overflow:hidden; }
#uploadHud .uh-bar-fill { height:100%; background:var(--orange); border-radius:99px; transition:width .2s; }
#uploadHud .uh-wait { color:var(--n600); margin-bottom:8px; }
#uploadHud .uh-hint { color:var(--n500); font-size:11px; margin-top:6px; line-height:1.35; }

/* ── Feedback: Eintrag in der Seitenleiste + Prioritäts-Auswahl ──
   Bis 16.09.2026 ein schwebender Knopf unten rechts — er verdeckte die letzten Zeilen des Plans. */
.sidebar-feedback {
  margin:0 8px 10px; padding:6px 12px; border:0; background:none; text-align:left;
  font-family:'Barlow',sans-serif; font-size:12px; font-weight:600; color:var(--n600); cursor:pointer;
  border-radius:8px;
}
.sidebar-feedback:hover, .sidebar-feedback:focus-visible { color:var(--o700); background:var(--o50); }

.fb-prio { display:flex; gap:8px; }
.fb-prio-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--n0); border:1.5px solid var(--n200); border-radius:9px;
  padding:9px 6px; cursor:pointer;
  font-family:'Barlow',sans-serif; font-size:11px; font-weight:600; color:var(--n600);
  transition:border-color 0.12s, background 0.12s, color 0.12s;
}
.fb-prio-btn b { font-size:16px; font-weight:800; color:var(--black); }
.fb-prio-btn:hover { border-color:rgba(236,103,27,0.5); }
.fb-prio-btn.active { border-color:var(--orange); background:rgba(236,103,27,0.08); color:var(--orange); }
.fb-prio-btn.active b { color:var(--orange); }

.fb-shot-drop {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:14px; border:1.5px dashed var(--n200); border-radius:9px;
  cursor:pointer; color:var(--n600); font-size:13px; font-weight:600; text-align:center;
  transition:border-color 0.12s, background 0.12s;
}
.fb-shot-drop:hover { border-color:var(--orange); background:rgba(236,103,27,0.04); }
.fb-shot-hint { font-size:11px; font-weight:400; color:var(--n500); }
.fb-shot-preview { position:relative; display:flex; }
.fb-shot-preview img { max-width:100%; max-height:200px; border-radius:9px; border:1px solid var(--n150); }
.fb-shot-remove {
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:7px;
  border:none; background:var(--n600); color:var(--n0); cursor:pointer; font-size:12px; line-height:1;
}
.fb-shot-remove:hover { background:var(--n800); }


/* Verbesserungsmanager: 👍/👎 auf die Caption im Piece-Editor */
#erFeedbackBox { margin-top:-4px; }
/* ── Content-Piece bearbeiten: Rahmendaten treten zurück (Ninas Vorgabe 25.08.2026) ──
   Kanal, Format, Datum und Uhrzeit sind informativ. Sie standen vorher als vier volle
   Formularfelder ganz oben und zogen die Aufmerksamkeit vom Inhalt weg. */
/* Der Kasten trägt seit dem 25.08.2026 auch den Standardzeit-Hinweis (erMeta) als zweite Zeile.
   Er stand vorher über dem Kasten und gehört inhaltlich zur Uhrzeit — deshalb darunter und
   rechtsbündig, direkt unter dem Feld, das er erklärt (Ninas Vorgabe).
   🔑 ZEILEN-Abstand und `padding` sind bewusst gleich (12 px): So ist der Abstand über dem Satz
      genau so groß wie der darunter. Nachgemessen — mit 10 px Zeilenabstand waren es oben 10 und
      unten 13 px, und das sah unruhig aus. Der SPALTEN-Abstand bleibt bei 10 px, er hat mit der
      Zentrierung nichts zu tun. */
.er-rahmen { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px 10px; margin-bottom:10px;
             padding:12px; background:var(--n50); border:1px solid var(--n150); border-radius:10px; }
.er-rahmen-fuss { grid-column:1 / -1; text-align:right; margin:0; line-height:1.4; }
.er-rahmen-feld { min-width:0; }
/* 🔑 Im Rahmen-Kasten galt bis zum 25.08.2026 eine eigene Beschriftung (9px/.1em) — sie sah
   fast, aber nicht ganz aus wie .form-label. Solche Beinahe-Gleichheiten sind der Grund, warum
   ein Fenster unruhig wirkt. Jetzt gilt überall derselbe graue Standard. */
.er-rahmen .form-label { display:block; margin-bottom:3px; }
.er-rahmen-opt { font-weight:400; letter-spacing:0; text-transform:none; color:var(--n400); }
/* ⚠️ width:100% ist PFLICHT. Ein <input> ohne Breitenangabe fällt in einem Grid- oder
   Flex-Kind auf die Browser-Standardbreite zurück (gemessen: 157 px in einer 716 px breiten
   Karte) — dieselbe Falle wie im Markenprofil am 24.08.2026. Im CSS ist das nicht zu sehen,
   nur im Browser zu messen. */
.er-rahmen .form-input { width:100%; box-sizing:border-box; padding:5px 8px; font-size:12.5px; background:var(--n0); }
.er-status-feld .form-input { width:100%; box-sizing:border-box; }
/* Dasselbe im Visual-Fenster: „Name des Fotografen" steht direkt im Fensterkörper, nicht in
   einer .form-group — und war deshalb 155 px schmal statt über die volle Breite (gemessen). */
#fgFotografAlle { width:100%; box-sizing:border-box; }
@media (max-width:620px) { .er-rahmen { grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* Status: halbe Breite, der Umschalter daneben. Grau statt orange — von Hand einen Status zu
   setzen ist der seltene Ausnahmefall und keine Handlungsaufforderung. */
.er-status-zeile { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-bottom:14px; }
.er-status-feld { flex:1 1 50%; min-width:220px; max-width:50%; }
.er-status-details { flex:1 1 40%; min-width:200px; padding-top:14px; }
/* ── Der dezente Knopf ────────────────────────────────────────────────────────────────
   Für Wege, die es geben MUSS, aber selten gebraucht werden — „Status ändern / zurücksetzen"
   und „Visual hinzufügen" (Ninas Vorgabe 25.08.2026). Grau statt orange: Orange ist in dieser
   Oberfläche die Farbe der Handlungsaufforderung, und beides ist keine. */
.btn-dezent, .er-status-summary {
  cursor:pointer; display:inline-block; list-style:none; padding:6px 13px; border-radius:7px;
  background:var(--n100); border:1px solid var(--n200); color:var(--n600);
  font-family:'Barlow',sans-serif; font-weight:600; font-size:12.5px; }
.er-status-summary::-webkit-details-marker { display:none; }
.btn-dezent:hover, .er-status-summary:hover { border-color:var(--n300); color:var(--n700); background:var(--n150); }
@media (max-width:620px) { .er-status-feld { max-width:100%; flex-basis:100%; } .er-status-details { padding-top:0; } }

/* Die Caption wächst mit ihrem Inhalt (erAutoHoehe). Der Deckel steht im JS — hier nur die
   Untergrenze, damit ein kurzer Text das Feld nicht auf eine Zeile schrumpfen lässt. */
.er-caption { min-height:150px; resize:vertical; }

/* Mehr Luft zwischen den Feldern (Ninas Vorgabe 25.08.2026) — bewusst NUR in diesem Fenster,
   damit die übrigen Formulare unverändert bleiben. */
#editRowOverlay .preview-body > .form-group { margin-bottom:18px; }
#editRowOverlay .preview-body > .form-grid { margin-bottom:18px; gap:16px; }
#editRowOverlay .form-group { gap:6px; }

.er-fb-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.er-fb-label { font-size:11px; font-weight:600; color:var(--n500); letter-spacing:0.02em; }
.er-fb-btn { background:transparent; color:var(--black); border:1.5px solid var(--n200); padding:5px 11px; border-radius:8px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:600; cursor:pointer; transition:border-color 0.15s,background 0.15s; white-space:nowrap; }
.er-fb-btn:hover:not(:disabled) { border-color:var(--black); }
.er-fb-btn:disabled { opacity:0.45; cursor:default; }
/* Die Bewertung ist farbig codiert (Ninas Vorgabe 25.08.2026): grün = guter Ton,
   Brand-Magenta = nicht unser Ton. Vorher waren beide neutral grau und nicht unterscheidbar. */
/* ⚠️ NICHT var(--succ-bg): #15803D darauf erreicht nur 4,47:1 — knapp unter den geforderten
   4,5:1, gemessen vom Kontrast-Test. Eine Spur heller, und es stimmt (4,58:1). Das Magenta-
   Gegenstück liegt mit 10,14:1 weit darüber und bleibt, wie es ist. */
.er-fb-gut { border-color:var(--succ); color:var(--succ); background:#EDF7F1; }
.er-fb-gut:hover:not(:disabled) { border-color:var(--succ); filter:brightness(0.97); }
.er-fb-schlecht { border-color:var(--magenta); color:var(--magenta); background:var(--m100); }
.er-fb-schlecht:hover:not(:disabled) { border-color:var(--magenta); filter:brightness(0.97); }
.er-fb-status { font-size:11px; font-weight:600; }
.er-fb-status.ok { color:var(--succ); }
.er-fb-status.err { color:var(--magenta); }
/* Eigene Stil-Regeln: das Textfeld stand ohne Breitenangabe neben seinem Label und war
   166 px schmal. Es fuellt jetzt die Breite und hat Platz fuer mehrere Regeln. */
#ncStilManuell { display:block; width:100%; min-height:120px; }
.er-fb-note { display:flex; gap:8px; margin-top:8px; align-items:center; flex-wrap:wrap; }
.er-fb-note .form-input { flex:1; min-width:180px; }
/* „Merken" bewahrt (grün), „Neu schreiben" greift ein (Brand-Magenta) — Ninas Vorgabe 25.08.2026. */
.er-fb-save { background:transparent; color:var(--succ); border:1.5px solid var(--succ); padding:6px 13px; border-radius:8px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; cursor:pointer; white-space:nowrap; }
.er-fb-save:hover:not(:disabled) { background:var(--succ-bg); }
.er-fb-rewrite { background:var(--magenta); color:var(--n0); border:none; padding:7px 15px; border-radius:8px; font-family:'Barlow',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; cursor:pointer; white-space:nowrap; }
.er-fb-rewrite:hover:not(:disabled) { opacity:0.9; }
.er-fb-save:disabled, .er-fb-rewrite:disabled { opacity:0.45; cursor:default; }

/* Verbesserungsmanager: Panel „Gelernte Stil-Regeln" in Marke bearbeiten */
/* Gelernte Stil-Regeln: das Feld war leer nur 41 px hoch — zu wenig, um darin zu lesen.
   Untergrenze und mehr Raum nach oben (Ninas Vorgabe 24.08.2026). */
/* Seit dem 27.08.2026 ein <textarea>, kein <div> mehr — die gelernten Regeln sind korrigierbar.
   Die Optik bleibt bewusst dieselbe (heller Grund, gleiche Schriftgroesse): Es ist weiterhin ein
   Text, den die Suite geschrieben hat, kein leeres Eingabefeld.
   ⚠️ `resize:vertical` statt `both` — waagrecht ziehbar wuerde es aus dem Formular herauslaufen. */
.nc-stil-auto { white-space:pre-wrap; font-family:'Barlow',sans-serif; font-size:12.5px; line-height:1.5; background:var(--n50); border:1px solid var(--n150); border-radius:8px; padding:12px 14px; color:var(--n800); min-height:130px; max-height:340px; overflow:auto; width:100%; box-sizing:border-box; resize:vertical; }
.nc-stil-auto.nc-stil-leer { color:var(--n500); font-style:italic; }
.nc-stil-konflikt { background:rgba(236,103,27,.09); border:1px solid rgba(236,103,27,.32); border-radius:8px; padding:10px 12px; font-size:12.5px; line-height:1.5; color:var(--warn); margin-bottom:10px; white-space:normal; }
.nc-hint.nc-ok { color:var(--succ); font-weight:600; }
.nc-hint.nc-err { color:var(--magenta); font-weight:600; }


/* ── „Visual hinzufügen": die drei Wege sind gleichwertig (Ninas Vorgabe 25.08.2026) ──
   Vorher stand das native Dateifeld allein oben und die beiden anderen Wege als blasse
   Ghost-Buttons darunter — das las sich wie „Datei" zuerst, alles andere zweite Wahl. */
.fg-wege { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
/* Grau wie der dezente Knopf (Ninas Korrektur 25.08.2026): Die drei Wege sind eine AUSWAHL,
   keine Handlungsaufforderung — orange nebeneinander schrie das Fenster an. */
.fg-weg-btn { flex:1 1 auto; background:var(--n100); color:var(--n700); border:1px solid var(--n200);
              padding:9px 16px; border-radius:8px; font-family:'Barlow',sans-serif; font-size:12px;
              font-weight:700; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
              white-space:nowrap; transition:background 0.15s, border-color 0.15s; }
.fg-weg-btn:hover { background:var(--n150); border-color:var(--n300); }
.fg-weg-btn:disabled { opacity:0.45; cursor:default; transform:none; }
/* Setzt KI-Kennzeichnung und Fotograf/Copyright vom Upload-Teil ab. */
.fg-trenner { margin:24px 0 18px; border-top:1px solid var(--n150); }
/* Heller Grund statt des kräftigen Graus — das Fenster steht jetzt mittig, und rundherum
   wirkte var(--n400) sehr dunkel (Ninas Vorgabe 25.08.2026). Der Schlagschatten am Panel
   hält die Abgrenzung, die vorher der dunkle Schleier übernahm. */
.preview-overlay.fg-hell { background:rgba(255,255,255,0.82); }
.preview-overlay.fg-hell .preview-panel { box-shadow:0 24px 64px rgba(28,28,28,0.22), 0 0 0 1px var(--n150); }
/* Die grauen Kästen im Fenster ebenfalls auf Weiß — sonst bleibt es innen grau. */
.preview-overlay.fg-hell #fgMediathekPicker { background:var(--n0); }


/* ── Kategorie-Überschrift, Warn-Variante ──────────────────────────────────────
   Gleiche Schrift, Größe und Zeichenabstand wie jede .nc-section — NUR die Farbe weicht ab,
   und zwar mit Grund: Hier wird gelöscht. Eine abweichende Farbe ist zulässig, eine abweichende
   Typografie nicht (siehe Bauvorgabe „Überschriften-Standard"). */
.nc-section.nc-section-warn { color:var(--magenta); border-bottom-color:rgba(102,14,54,.2); }


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Handy, Tablet, kleine Laptops (Ninas Vorgabe 27.08.2026)

   AUSGANGSLAGE: Das Dashboard war fuer den Schreibtisch gebaut. Feste Seitenleiste (252px),
   Tabellen ab 820px Mindestbreite, Overlays mit fester 500px-Breite — auf einem Handy war
   praktisch nichts bedienbar.

   🔑 ALLES AN EINER STELLE, nicht verstreut. Bei Anpassungen ueber die ganze Datei verteilt
      weiss beim naechsten Umbau niemand mehr, was zusammengehoert, und die Haelfte bleibt stehen.
      Wer eine neue Komponente baut, ergaenzt sie HIER — nicht neben ihrer eigenen Regel.

   DIE DREI SCHWELLEN, und warum genau diese:
     ≤1100px  Der Inhalt wird einspaltig (steht bereits weiter oben, hier nicht wiederholt).
     ≤900px   Die Seitenleiste passt nicht mehr NEBEN den Inhalt. Ab hier wird sie zur Schublade.
              900 statt 768, weil 252px Leiste + 820px Tabelle schon vorher nicht mehr aufgehen.
     ≤700px   Die Tabelle passt nicht mehr QUER. Ab hier wird jede Zeile zu einer Karte.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Der Knopf, der die Schublade oeffnet ──────────────────────────────────────────────────
   Steht immer im Markup und ist auf grossen Schirmen ausgeblendet — nicht umgekehrt. Ein Knopf,
   den JavaScript erst einbauen muesste, fehlt genau dann, wenn das Skript klemmt. */
.nav-schalter { display:none; width:40px; height:40px; flex:none; align-items:center; justify-content:center;
                border:1.5px solid var(--n200); border-radius:9px; background:var(--n0); cursor:pointer; padding:0; }
.nav-schalter span { display:block; width:17px; height:2px; background:var(--n800); border-radius:2px; position:relative; }
.nav-schalter span::before, .nav-schalter span::after { content:''; position:absolute; left:0; width:17px; height:2px; background:var(--n800); border-radius:2px; }
.nav-schalter span::before { top:-5px; }
.nav-schalter span::after { top:5px; }
/* Der Schleier hinter der offenen Schublade. Er ist der Weg zurueck: Antippen schliesst. */
.nav-schleier { display:none; position:fixed; inset:0; background:rgba(28,28,28,.42); z-index:99; }

@media (max-width:900px) {
  /* ── Seitenleiste wird zur Schublade ────────────────────────────────────────────────────
     ⚠️ `transform` statt `display:none`: Die Leiste muss im Baum bleiben. Wird sie ausgeblendet,
        verliert jeder Menuepunkt seine Markierung, und `showClientTab()` schreibt ins Leere —
        genau die Sorte stiller Fehler, die erst Wochen spaeter auffaellt. */
  .sidebar { transform:translateX(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
             box-shadow:none; }
  body.nav-offen .sidebar { transform:translateX(0); box-shadow:6px 0 36px rgba(28,28,28,.18); }
  body.nav-offen .nav-schleier { display:block; }
  .nav-schalter { display:flex; }
  /* Der Inhalt nimmt die ganze Breite — die Leiste liegt jetzt DARUEBER, nicht daneben.
     🔴 GEMESSEN AM 27.08.2026, und ohne Messung nicht zu finden: `.main` bekam trotz der Regel
        unten nur 233 statt 485 Pixel. Grund: In `index.html` steht NACH diesem Blatt noch
        `.main { width:calc(100vw - var(--sidebar-w,252px)) }`. Bei gleicher Spezifitaet gewinnt,
        was spaeter kommt — die 252px der Leiste wurden also weiter abgezogen, obwohl die Leiste
        laengst als Schublade darueberliegt. Ein Viertel des Bildschirms blieb leer.
     🔑 DIE LOESUNG IST DIE VARIABLE, nicht ein staerkerer Selektor: `--sidebar-w` auf 0 zu setzen
        wirkt auf JEDE Stelle, die damit rechnet — hier, in `index.html` und in allem, was spaeter
        dazukommt. Ein Wettrennen um Spezifitaet haette nur diese eine Zeile gewonnen. */
  :root { --sidebar-w:0px; }
  .main { margin-left:0; width:100%; max-width:100%; }
  /* Die Leiste braucht jetzt eine eigene Breite — sie kann nicht mehr `--sidebar-w` nehmen. */
  .sidebar { width:min(84vw, 300px); }
  .content { padding:18px 16px; }
  .topbar { padding:0 14px; gap:8px; }

  /* ── Overlays ueber die volle Breite ────────────────────────────────────────────────────
     Ein 500px-Panel auf einem 390px-Schirm haengt zu einem Viertel ausserhalb. */
  .preview-panel { width:100%; }
  .preview-overlay.centered .preview-panel { width:96vw; max-height:92vh; }
  .preview-header { padding:14px 16px 12px; }

  /* Zwei- und dreispaltige Raster einspaltig. Untereinander ist auf schmalen Schirmen immer
     lesbar; nebeneinander wird jede Spalte zu schmal fuer ihren Inhalt. */
  .two-col, .three-col, .form-grid, .preview-info-grid, .client-kpi-grid,
  .pricing-grid, .addons-grid, .stats-grid, .ideen-cards-grid { grid-template-columns:1fr; }
  .seiten-layout { grid-template-columns:1fr; }

  /* Die Kopfzeilen der Karten duerfen umbrechen — sonst schiebt der letzte Knopf die
     Ueberschrift aus der Karte heraus. */
  .card-header { flex-wrap:wrap; row-gap:8px; }
}

@media (max-width:700px) {
  /* ── Der Redaktionsplan wird zu KARTEN ──────────────────────────────────────────────────
     🔑 CSS-ONLY, kein zweiter Rendering-Weg. Dieselben Zeilen, dieselbe Auswahl, dasselbe
        Loeschen — nur anders angeordnet. Eine zweite Darstellung mit eigenem Code waere die
        bekannte Falle: Zwei Ansichten desselben Sachverhalts driften auseinander, und der Fehler
        faellt nur in einer davon auf (so geschehen am 15.08.2026 mit gleich DREI Ansichten).
     Die Spaltennamen liefert `data-spalte` an jeder Zelle (renderPlan in js/06-redaktionsplan.js). */
  .plan-table-wrap { border:none; background:transparent; overflow:visible; }
  .plan-table { min-width:0; display:block; }
  .plan-table thead { display:none; }              /* der Kopf steht jetzt in jeder Zelle */
  .plan-table tbody { display:block; }
  .plan-table tbody tr { display:block; background:var(--n0); border:1px solid var(--n150);
                         border-radius:12px; margin-bottom:10px; padding:10px 12px 12px; position:relative; }
  /* 🔴 HIER STAND ZUERST `display:flex` MIT DEM NAMEN LINKS DANEBEN — und das war falsch.
     In einer Flex-Zelle wird JEDES Kind ein eigenes Element derselben Zeile. Die Themen-Zelle
     enthaelt aber drei (Titel, Kampagnen-Marker, Hook): Sie standen nebeneinander, und der Hook
     lief rechts aus der Karte heraus. Gefunden nur, weil die Seite wirklich gemessen wurde —
     ein Test, der Text prueft, sieht so etwas nie.
     `display:block` mit dem Namen DARUEBER traegt dagegen jeden Zelleninhalt: einen Text, drei
     verschachtelte Bloecke, mehrere Knoepfe. Die Karte wird etwas hoeher — das ist der Preis
     dafuer, dass nichts herauslaeuft, egal was in der Zelle steht. */
  .plan-table tbody tr > td { display:block; padding:6px 0 2px; border:none; font-size:13px;
                              max-width:100%; overflow-wrap:anywhere; }
  .plan-table tbody tr > td::before {
    content:attr(data-spalte); display:block; font-size:9px; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:var(--n500); margin-bottom:2px;
  }
  /* Zellen ohne Beschriftung (die Auswahl ganz links) brauchen keine Spalte davor. */
  .plan-table tbody tr > td:not([data-spalte])::before { content:none; }
  /* Das Kaestchen sitzt oben rechts in der Karte. Die erste Zeile bekommt dafuer rechts Platz —
     ohne das legte es sich bei langen Themen auf den Text. */
  .plan-table tbody tr > td.plan-chk { position:absolute; top:12px; right:12px; width:auto; padding:0; }
  .plan-table tbody tr > td.plan-chk::before { content:none; }
  .plan-table tbody tr > td[data-spalte="KW"] { padding-right:34px; }
  /* Der Tagesstreifen wandert von der ersten Zelle an die linke Kante der KARTE — sonst saesse
     er an einem Kaestchen oben rechts und saegte die Aussage „gehoert zu diesem Tag" ab. */
  .plan-table tbody tr > td:first-child::before { display:none; }
  .plan-table tbody tr.plan-tag-c0::before, .plan-table tbody tr.plan-tag-c1::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    border-radius:12px 0 0 12px; pointer-events:none;
  }
  .plan-table tbody tr.plan-tag-c0::before { background:var(--li500); }
  .plan-table tbody tr.plan-tag-c1::before { background:var(--egg); }
  /* Ziehen ist auf einem Touchscreen ohnehin nicht der Weg — der Hinweis darauf waere irrefuehrend. */
  .drag-hint { display:none; }
  .plan-table tbody tr[draggable="true"] { cursor:default; }

  /* Kacheln und Raster, die auch bei 360px noch tragen */
  .stat-row { grid-template-columns:1fr; }
  .asset-grid { grid-template-columns:repeat(2,1fr); }
  .grid-wrap, .dayview-card-grid { grid-template-columns:repeat(2,1fr); }
  /* Wochen-Raster mit sieben Spalten: waagrecht schiebbar statt auf 40px je Tag gequetscht. */
  .cal-grid, .pf-week-grid, .cyc-cal { overflow-x:auto; }

  /* ── Fingerkuppen brauchen Flaeche ──────────────────────────────────────────────────────
     44px ist das ueblich empfohlene Mindestmass. Betrifft nur, was wirklich angetippt wird. */
  .nav-item, .btn-cta, .btn-ghost, .pa-btn, .preview-close { min-height:40px; }
  .plan-table .plan-chk input[type=checkbox],
  .plan-table th.plan-chk-th input[type=checkbox] { width:20px; height:20px; }

  .content { padding:14px 12px; }
  .gruss-karte { padding:28px 24px; }
}

/* ── Sehr schmal (≤400px): das letzte, was noch Platz kostet ─────────────────────────────── */
@media (max-width:400px) {
  /* Das Konto-Schildchen in der Kopfzeile ist eine Zusatzinfo — der Pfad ist wichtiger. */
  .topbar-actions .agency-badge { display:none; }
  .asset-grid, .grid-wrap, .dayview-card-grid { grid-template-columns:1fr; }
}

/* ── Zugriffsrechte Kundenportal (SAAS-09, 30.08.2026) ──────────────────────
   Eine Zeile je Person: Kopf mit Name und Knöpfen, darunter die fünf Häkchen.
   🔑 HIER STEHT NUR ANORDNUNG, KEINE TYPOGRAFIE. Die Häkchen selbst tragen
      `.vq-opt` — dieselbe Optionsklasse wie die Serien-Auswahl. Eine eigene
      Schriftregel waere eine dritte Beschriftungs-Ebene gewesen; genau die
      faengt design_standard_test.js ab (Bauvorgabe `ueberschriften-standard-suite`). */
.kz-zeile{border:1px solid var(--n200);border-radius:10px;padding:12px 14px;margin-bottom:10px;}
.kz-aus{opacity:.55;}
.kz-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.kz-name{font-weight:600;}
.kz-meta{font-size:12px;color:var(--n600);margin-top:2px;}
.kz-knoepfe{display:flex;gap:8px;flex:0 0 auto;}
.kz-weg{color:#660E36;border-color:#660E36;}
.kz-rechte{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
/* Die fuenf Punkte stehen nebeneinander statt untereinander — sie sind kurz, und eine Liste
   aus fuenf breiten Karten je Person haette den Abschnitt unlesbar lang gemacht. */
.kz-rechte .vq-opt{flex:0 0 auto;align-items:center;padding:7px 11px;}

/* „Bearbeitet von … am … um …" (SAAS-09 Bauteil D, 30.08.2026).
   Steht rechts in der Ton-Reihe unter der Caption. `margin-left:auto` schiebt sie ans Ende der
   Flex-Zeile — ohne handgesetzten Abstand, damit messe:design nicht anschlaegt. */
.er-bearbeitet{margin-left:auto;font-size:12px;color:var(--n600);white-space:nowrap;}

/* ── Zähler für neue Kundenmeldungen (SAAS-09 Bauteil E, 30.08.2026) ────────
   An drei Stellen dieselbe Gestalt (Seitenleiste Marke, Seitenleiste Agentur, Karte).
   🔄 Ninas Vorgabe war am 30.08. „ein lilac Kreis" und ist am 01.09. zu ORANGE geworden,
      nachdem sie es in Betrieb gesehen hat. Der Kreis ist das Signal „hier ist etwas Neues";
      Lilac bedeutet im Rest der Oberfläche nichts Dringendes.
   ℹ️ Die alte Warnung „nicht mit .nav-badge verwechseln, die ist orange" ist damit hinfällig:
      `.nav-badge` steht in KEINER Datei mehr im Markup (am 01.09. gemessen — weder in
      index.html noch in einem Modul). Zwei Zahlen nebeneinander gibt es also nicht. */
.nav-zaehler{margin-left:auto;flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;
  /* 🔴 ORANGE, NICHT LILAC (Ninas Vorgabe 01.09.2026). Der Kreis ist das Signal „hier ist etwas
     Neues" — Orange ist die Signalfarbe der Marke; Lilac bedeutet im Rest der Oberflaeche nichts
     Dringendes.
     ⚠️ --o700, NICHT --o500: Weiss auf dem hellen Marken-Orange traegt nur 2,4:1 und ist
        unlesbar. --o700 ist erkennbar dasselbe Orange und traegt Weiss mit 5,22:1 — derselbe
        Grund, aus dem es --li700 gab. Der Kontrast-Test misst genau das. */
  border-radius:10px;background:var(--o700);color:var(--n0);
  font-size:11px;font-weight:700;line-height:20px;text-align:center;}
.nav-zaehler[hidden]{display:none;}

/* Die Zeitangabe in der Agentur-Liste (01.09.2026). Eigene Klasse, keine geliehene: Sie soll
   leise sein — Marke und Zahl tragen die Aufmerksamkeit, das Datum beantwortet nur die
   Rueckfrage „wann?". Auf schmalen Schirmen faellt sie weg, bevor der Text abgeschnitten wird. */
.ag-task-zeit{flex:0 0 auto;font-size:11px;color:var(--n500);white-space:nowrap;}
@media (max-width:640px){ .ag-task-zeit{display:none;} }

/* Sortierbare Spaltenköpfe. Ein echter Knopf, kein klickbares <th> — sonst ist die
   Tabelle nicht per Tastatur bedienbar (frontend.md: „Echte Buttons statt klickbarer divs"). */
.th-sort{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-align:left;letter-spacing:inherit;text-transform:inherit;}
.th-sort:hover{color:var(--o700);}
/* Der Haken-Knopf in der Meldungszeile. */
.pm-okay{border:1px solid var(--n200);background:var(--n0);border-radius:6px;padding:2px 8px;
  cursor:pointer;font-size:12px;color:var(--n600);}
.pm-okay:hover{border-color:var(--lilac);color:var(--black);}
.pm-quittiert{opacity:.5;}

/* ── Kundenportal: die reduzierte Ansicht (SAAS-09 Bauteil C, 30.08.2026) ───
   🔑 EIN MERKMAL STATT EINER LISTE VON KENNUNGEN. Alles, was der Kunde nicht
      sehen darf, trägt im Markup `data-kp="aus"`. Wer künftig einen Abschnitt
      ergänzt, entscheidet direkt dort — und muss keine Liste in einer anderen
      Datei nachziehen, die sonst still veraltet.
   ⚠️ `!important` ist hier kein Notbehelf, sondern nötig: Mehrere Stellen im
      Dashboard setzen `style="display:…"` per Skript (Status-Block, Visual-Weg,
      Briefing). Ohne !important gewönne der Inline-Stil und der Abschnitt käme
      beim Kunden doch wieder zum Vorschein.
   🔴 UND DAS BLEIBT KOSMETIK. Der echte Riegel sitzt in der Datenbank
      (trg_redaktionsplan_kunde_spalten). Wer hier etwas einblendet, öffnet
      keine Tür — er sieht nur ein Feld, dessen Speichern die Datenbank abweist. */
body.kundenportal [data-kp="aus"]{display:none !important;}
body:not(.kundenportal) [data-kp="nur"]{display:none !important;}
/* Ohne Marken-Wechsler und ohne Agentur-Punkte bleibt oben eine Lücke. */
body.kundenportal #sidebar-agentur{padding-top:4px;}

/* ── Paket-Sichtbarkeit (SAAS-13, 12.09.2026) ──────────────────────────────
   DASSELBE MUSTER WIE DAS KUNDENPORTAL EINE ZEILE HÖHER — bewusst, nicht zufällig:
   Ein zweites, andersartiges System neben `data-kp` hätte bedeutet, dass man bei
   jedem neuen Bedienelement an zwei Mechaniken denken muss.

   SO LIEST MAN ES: `data-paket="freigabe"` am Element heißt „gehört zum Schalter
   freigabe". Sichtbar bleibt es nur, wenn am `<body>` die Klasse `paket-freigabe`
   steht — die setzt `paketKlassenSetzen()` in js/36-paket-sichtbarkeit.js, nachdem
   der Katalog geladen ist. Ein Element kann mehreren Schaltern zugeordnet sein
   (`data-paket="freigabe kampagnen"`), deshalb `~=` (enthält dieses Wort).

   🔑 WARUM CSS UND NICHT EIN JAVASCRIPT-DURCHLAUF: Mehrere Bedienelemente entstehen
      erst beim Zeichnen und werden dabei neu erzeugt — die Freigabe-Spalte im
      Redaktionsplan zum Beispiel. Ein einmaliger Durchlauf beim Anmelden würde sie
      beim nächsten Neuzeichnen wieder hereinlassen. Eine CSS-Regel greift immer,
      auch für Elemente, die es beim Anmelden noch gar nicht gab.

   ⚠️ `!important` aus demselben Grund wie oben: An etlichen Stellen setzt Skript-Code
      `style.display` selbst (showClientTab, openClient, setzeProfilAbschnitt). Ohne
      !important gewönne der Inline-Stil und das Element käme zurück.

   ⚠️ `body.paket-geladen` als Bedingung: SOLANGE DAS PAKET UNBEKANNT IST, WIRD NICHTS
      VERSTECKT. Damit bleibt die Ansicht für alle bestehenden Konten exakt wie bisher,
      falls der Katalog einmal nicht antwortet — fail-open in der KOSMETIK ist richtig,
      weil der echte Riegel serverseitig sitzt. (Fail-closed gilt dort, wo geschützt
      wird: in gating.ts und in den DB-Triggern.)

   🔴 UND DAS BLEIBT KOSMETIK. Ein ausgeblendeter Knopf hat noch nie jemanden
      aufgehalten. Wer diese Regel im Browser abschaltet, sieht das Bedienelement —
      und scheitert dann am Server. Genau so ist es gedacht. */
body.paket-geladen:not(.paket-freigabe)      [data-paket~="freigabe"]{display:none !important;}
body.paket-geladen:not(.paket-aufgabenliste) [data-paket~="aufgabenliste"]{display:none !important;}
body.paket-geladen:not(.paket-kampagnen)     [data-paket~="kampagnen"]{display:none !important;}
body.paket-geladen:not(.paket-meldungen)     [data-paket~="meldungen"]{display:none !important;}
body.paket-geladen:not(.paket-archiv)        [data-paket~="archiv"]{display:none !important;}
body.paket-geladen:not(.paket-reporting)     [data-paket~="reporting"]{display:none !important;}
body.paket-geladen:not(.paket-newsletter)    [data-paket~="newsletter"]{display:none !important;}
body.paket-geladen:not(.paket-whitelabel)    [data-paket~="whitelabel"]{display:none !important;}
body.paket-geladen:not(.paket-content_sprachen) [data-paket~="content_sprachen"]{display:none !important;}
/* `ads` hängt an ZWEI Quellen (Nina 12.09.2026): am Paket-Schalter `features.ads` (ab Pro im
   Paket enthalten, kein Zusatzmodul) UND am Konto-Schalter `accounts.ads_aktiv` (Ausrollbremse).
   `paketKlassenBerechnen()` setzt die Klasse nur, wenn BEIDE zutreffen. */
body.paket-geladen:not(.paket-ads)           [data-paket~="ads"]{display:none !important;}
/* Mehrere Seats zu verwalten ergibt nur Sinn, wenn das Paket mehr als einen erlaubt.
   Das ist keine Feature-Frage, sondern eine Grenze — deshalb eine eigene Klasse. */
body.paket-geladen:not(.paket-mehrere-seats) [data-paket-seats]{display:none !important;}

/* ── Upgrade-Fenster: Ergebnis (SAAS-13, 13.09.2026) ──────────────────────────
   Ninas Vorgabe: Nach dem Wechsel kein kleiner grauer Hinweissatz, sondern eine
   grosse, eindeutige Meldung, die sagt, was jetzt geht. Lilac-Fläche wie die
   Paket-Karte im Angebot — dieselbe Farbe heisst dasselbe Thema. */
.up-ergebnis { background:var(--li100); border:1px solid var(--li500); border-radius:12px; padding:24px 22px; margin-bottom:16px; }
.up-ergebnis-titel { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:26px; line-height:1.15; text-transform:uppercase; letter-spacing:0.02em; color:var(--n900); }
.up-ergebnis-text { margin:10px 0 0; font-size:16px; line-height:1.55; color:var(--n900); }

/* ── GROSSANSICHT (Baustein, 04.09.2026) ──────────────────────────────────────────────────
   Eine Großansicht für Bild, Reel, Reel-Cover und Karussell (js/34-grossansicht.js).
   🔑 Sie ist ein .preview-overlay (zentrale Schließlogik), aber dunkel und ohne Fensterrahmen:
      Das Medium selbst ist das Fenster. z-index 320 = über dem Content-Piece-Fenster (210) und
      unter Gruss (400) und Upload-Anzeige (9999).
   🔑 `object-fit: contain` + max-height: nie beschnitten, nie gestreckt, nie größer als der Schirm.
      Genau das fehlte im Browser-Vollbild. */
.preview-overlay.ga-huelle { z-index:320; background:rgba(28,28,28,.9); align-items:center; justify-content:center; padding:56px 64px; }
.ga-buehne { display:flex; flex-direction:column; align-items:center; gap:14px; min-width:0; max-width:100%; max-height:100%; }
/* 🔴 GEMESSEN (04.09.2026): `max-width:100%` allein reichte auf Handybreite NICHT — das Bild lief
   rechts aus dem Schirm. Ein Bild mit Eigenbreite 1080px zwingt den Flex-Kasten auf seine
   Mindestbreite, und das Prozent löst sich dagegen auf. Die Grenze rechnet deshalb am Schirm
   selbst (100vw minus Rand) — die kann kein Kasten dazwischen verfälschen. */
.ga-medium { display:block; max-width:min(1080px, calc(100vw - 128px)); max-height:84vh; width:auto; height:auto; object-fit:contain; border-radius:12px; background:var(--n900); box-shadow:0 18px 60px rgba(0,0,0,.45); }
.ga-fuss { position:fixed; left:0; right:0; bottom:16px; text-align:center; color:var(--n0); font-size:12px; letter-spacing:0.04em; pointer-events:none; }
.ga-zu, .ga-pfeil { position:fixed; width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); background:rgba(28,28,28,.6); color:var(--n0); cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; }
.ga-zu { top:14px; right:14px; font-size:16px; }
.ga-pfeil { top:50%; transform:translateY(-50%); font-size:30px; padding-bottom:4px; }
.ga-pfeil-zurueck { left:14px; }
.ga-pfeil-weiter { right:14px; }
.ga-zu:hover, .ga-pfeil:hover { background:var(--o500); border-color:var(--o500); }
.ga-zu:focus-visible, .ga-pfeil:focus-visible, .ga-kachel:focus-visible { outline:2px solid var(--o500); outline-offset:2px; }
.ga-abspielen { flex:none; }

/* Die kleinen Kacheln im Content-Piece-Fenster: echte Knöpfe, spielen nichts ab. */
.ga-kachel { position:relative; width:120px; height:120px; padding:0; border:1px solid var(--n200); border-radius:8px; background:var(--n50); cursor:zoom-in; display:inline-flex; align-items:center; justify-content:center; }
.ga-kachel img, .ga-kachel video { width:100%; height:100%; object-fit:cover; border-radius:7px; display:block; pointer-events:none; }
.ga-kachel-cover { border:2px solid var(--o500); }
.ga-kachel-spalte { display:inline-flex; flex-direction:column; align-items:center; gap:2px; }
.ga-kachel-text { font-size:10px; color:var(--n600); }
.ga-kachel-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:rgba(28,28,28,.62); color:var(--n0); font-size:13px; display:flex; align-items:center; justify-content:center; padding-left:3px; pointer-events:none; }
@media (max-width:900px) {
  .preview-overlay.ga-huelle { padding:64px 12px 40px; }
  .ga-medium { max-height:76vh; max-width:calc(100vw - 24px); }
  .ga-pfeil { top:auto; bottom:44px; transform:none; width:40px; height:40px; font-size:26px; }
}

/* ════════════════ CONTENT SHOOTING PLAN (SAAS-15, 15.09.2026) ════════════════
   Logik: js/38-content-shooting.js. Am Entwurf mit Nina abgenommen:
   Kacheln OHNE Visuals, höchstens DREI nebeneinander — sonst werden sie schmal und ziehen sich lang. */
.csp-kopf-felder { display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; padding:18px var(--karte-innen) 4px; }
.csp-kopf-felder .form-group { gap:6px; }
.csp-kopf-felder textarea { width:100%; box-sizing:border-box; min-height:96px; resize:vertical; }
.csp-neu { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.csp-neu .form-input { flex:1 1 140px; min-width:0; }
.csp-tag-druck { display:none; font-weight:700; font-size:14px; }
.csp-speicher-fehler { color:var(--o700); font-weight:600; }
.csp-bereich { padding:0 var(--karte-innen) 20px; }
.csp-bereich .nc-section { display:flex; align-items:center; gap:8px; }
.csp-bereich .nc-section .badge { font-family:'Barlow',sans-serif; letter-spacing:var(--sperrung-titel); }
.csp-bereich > .form-label { display:block; margin-bottom:6px; }
.csp-bereich > textarea { width:100%; box-sizing:border-box; resize:none; overflow:hidden; }
.csp-raster { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.csp-kachel { background:var(--n0); border:1.5px solid var(--n100); border-radius:12px; padding:16px 16px 14px;
  display:flex; flex-direction:column; gap:12px; position:relative; min-width:0; }
.csp-kachel-marke { font-weight:700; font-size:14px; color:var(--black); padding-right:30px; }
.csp-kachel-meta { font-size:12px; color:var(--n600); margin-top:2px; }
.csp-feld { display:flex; flex-direction:column; gap:5px; }
.csp-wert { font-size:13px; color:var(--black); line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.csp-wert.csp-gekuerzt { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.csp-mehr, .csp-verschieben { background:none; border:0; padding:0; color:var(--o700); font:600 12px 'Barlow',sans-serif; cursor:pointer; align-self:flex-start; }
.csp-kachel textarea { width:100%; box-sizing:border-box; min-height:64px; font-size:12.5px; line-height:1.45; resize:none; overflow:hidden; }
.csp-raus { position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:6px; border:1.5px solid var(--n200);
  background:var(--n0); color:var(--n600); cursor:pointer; font-size:15px; line-height:1; }
.csp-raus:hover, .csp-raus:focus-visible { border-color:var(--o700); color:var(--o700); }
.csp-leer { border:1.5px dashed var(--n200); border-radius:12px; padding:26px 18px; text-align:center; color:var(--n500); font-size:13px; margin-top:16px; }
.csp-aktionen { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin:14px 0 30px; }
.csp-plan .plan-chk-th, .csp-plan .plan-chk { display:none; }
.csp-waehlen .csp-plan .plan-chk-th, .csp-waehlen .csp-plan .plan-chk { display:table-cell; }
.csp-waehlen .csp-plan tbody tr { cursor:pointer; }
.csp-plan tbody tr.csp-gewaehlt { background:rgba(236,103,27,.07); }
.csp-im-plan { font-size:10px; font-weight:700; letter-spacing:var(--sperrung-label); text-transform:uppercase; color:var(--o700); margin-top:3px; }
.csp-partner-liste { display:flex; flex-direction:column; gap:8px; margin:12px 0 16px; }
.csp-partner { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid var(--n100); border-radius:10px; cursor:pointer; font-size:13px; }
.csp-partner input { accent-color:var(--o500); width:16px; height:16px; flex:0 0 auto; }
.csp-partner small { display:block; color:var(--n500); font-size:11px; }
/* Unter „Bearbeitet von …" im Beitragsfenster (Ninas Vorgabe 15.09.2026). Leer = unsichtbar. */
.er-shooting-skript { text-align:right; font-size:12px; color:var(--n600); margin-top:4px; }
.er-shooting-skript:empty { display:none; }
@media (max-width:1180px) { .csp-raster { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:760px) {
  .csp-kopf-felder { grid-template-columns:1fr; }
  .csp-raster { grid-template-columns:1fr; }
}
/* Textkopie der Felder nur für den Druck (cspDruckPaareBilden) — am Bildschirm nie sichtbar. */
.csp-druck-text { display:none; }
/* PDF-Export über den Druckdialog: nur die Plan-Karte, ohne Knöpfe und Auswahl. */
@media print {
  body.csp-druck * { visibility:hidden; }
  body.csp-druck #cspPlanKarte, body.csp-druck #cspPlanKarte * { visibility:visible; }
  body.csp-druck #cspPlanKarte { position:absolute; left:0; top:0; width:100%; border:0; }
  body.csp-druck .csp-raus, body.csp-druck .csp-verschieben, body.csp-druck .csp-mehr,
  body.csp-druck #cspTagWahl, body.csp-druck #cspNeuBox, body.csp-druck #cspSpeicherStand { display:none !important; }
  body.csp-druck .csp-tag-druck { display:block; }
  body.csp-druck .csp-wert.csp-gekuerzt { display:block; -webkit-line-clamp:unset; overflow:visible; }
  /* Je ZWEI Kacheln eine Seite (Ninas Vorgabe 16.09.2026): Die Paare baut cspDruckPaareBilden().
     Das Raster selbst ist im Druck ein einfacher Block — im Grid zerschnitt der Druck die Kacheln. */
  body.csp-druck .csp-raster { display:block; }
  body.csp-druck .csp-druck-paar { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; align-items:start;
    break-inside:avoid; page-break-inside:avoid; break-after:page; page-break-after:always; }
  body.csp-druck .csp-druck-paar-letztes { break-after:auto; page-break-after:auto; }
  body.csp-druck .csp-kachel { break-inside:avoid; page-break-inside:avoid; }
  body.csp-druck .csp-kachel textarea { display:none; }
  body.csp-druck .csp-druck-text { display:block; }
  body.csp-druck textarea { border:0; padding:0; }
}