/* ============================================================================
   SCHLANKE TEXTFORMATIERUNG — geteiltes Bauteil (2026-08-25).

   EIN Editor für alle Fliesstext-Felder: Projektbeschreibung, „Über mich" im
   Kandidaten-Dossier, „Über uns" auf der Firmenseite. Vorher war jedes dieser
   Felder Klartext, und jedes Speichern machte aus <h2>/<ul>/<strong> eine Folge
   von <p> — beim Projekt-Dossier hat es 107 Projekte erwischt.

   Bewusst als eigene Datei und nicht dreimal kopiert: die Firmenseite lebt in
   landing.css, das Dossier in cockpit-*.css. Drei Fassungen derselben Leiste
   liefen garantiert auseinander — genau so ist heute die App-Kopfzeile mit drei
   verschiedenen Abstaenden entstanden.

   Deshalb Tokens MIT FALLBACK: --c2-* existiert nur in der Cockpit-Welt.
   ========================================================================== */

/* Die Leiste erscheint nur, wenn wirklich bearbeitet wird — DREI Schaltwege, weil die
   Oberflaechen den Bearbeiten-Zustand verschieden ausdruecken:

     html[data-mode="edit"]  Cockpit-Dossiers (Feld steht auch im Lesemodus im DOM)
     .is-editing             Firmenseite (ein Formular umschliesst die ganze Seite)
     .rt-bar.is-on           Fly-in im Master-View — dort ENTSTEHT die Leiste erst beim
                             Bearbeiten und verschwindet danach wieder; sie ist also per
                             Definition sichtbar, sobald es sie gibt.

   Der dritte Fall fehlte zuerst: das Feld war da, die Leiste unsichtbar. Genau so sah es
   aus wie „kein Editor drin" (Thomas, 2026-08-25). */
.rt-bar{display:none}
html[data-mode="edit"] .rt-bar,
.is-editing .rt-bar,
.rt-bar.is-on{display:flex;align-items:center;gap:4px;margin:0 0 10px}

.rt-b{font-family:inherit;font-size:var(--c2-fs-small,14px);font-weight:600;line-height:1;
  color:var(--c2-ink-2,#565A5E);background:transparent;border:1px solid transparent;border-radius:7px;
  min-width:30px;height:30px;padding:0 8px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.rt-b:hover{background:var(--c2-surface-2,rgba(0,0,0,.04));color:var(--c2-ink,#0A0A0A);
  border-color:var(--c2-line-3,rgba(0,0,0,.14))}
.rt-b:active{transform:translateY(1px)}
.rt-sep{width:1px;height:18px;background:var(--c2-line-2,rgba(0,0,0,.08));margin:0 4px}

/* Der Inhalt. Ruhige Abstufung statt fetter Riesen-Ueberschriften: die Beschreibung
   ist Teil einer Seite, nicht selbst ein Dokument mit eigener Titelhierarchie. */
.rt-doc > :first-child{margin-top:0}
.rt-doc > :last-child{margin-bottom:0}
.rt-doc h2,.rt-doc h3{font-size:var(--c2-fs-h2,17px);font-weight:700;letter-spacing:-.01em;
  color:var(--c2-ink,#0A0A0A);margin:22px 0 8px}
.rt-doc p{margin:0 0 12px}
.rt-doc ul,.rt-doc ol{margin:0 0 14px;padding-left:22px}
.rt-doc li{margin:0 0 5px}
.rt-doc strong{font-weight:650;color:var(--c2-ink,#0A0A0A)}

/* Bearbeitbarer Zustand auf Flaechen ohne eigene .ce-edit-Regeln (Firmenseite). */
.is-editing .rt-doc[contenteditable]{outline:1px solid var(--c2-line-3,rgba(0,0,0,.14));
  outline-offset:6px;border-radius:5px;cursor:text}
.is-editing .rt-doc[contenteditable]:focus{outline:2px solid var(--c2-accent,#1FB5E8)}

/* Ein leeres contenteditable ist 0px hoch — es waere unsichtbar und nicht anklickbar.
   Und es zeigt von sich aus keinen Platzhalter; :empty::before holt ihn aus data-ph. */
.rt-doc[contenteditable]{min-height:120px}
.rt-doc[contenteditable]:empty::before{content:attr(data-ph);color:var(--c2-ink-3,#9A9A94);pointer-events:none}
/* Browser hinterlassen beim Leeren oft ein einzelnes <br> — dann greift :empty nicht mehr. */
.rt-doc[contenteditable]:focus::before{content:none}