/* Gemeinsames Fundament beider Module.
   Modulspezifisches CSS bleibt in der jeweiligen Seite — hier steht nur,
   was Kampagnenplanung und Scouting sich wirklich teilen. */

/* Variante C — „Signal". Hell und weit, Navigation oben, Inhalt über die ganze
   Breite. Fast alles ist #1D232C auf Weiß; genau eine warme Signalfarbe trägt,
   was anzuklicken ist oder gerade läuft. Sie steht in --acc und nirgends sonst. */
:root{
  --bg:#F6F7F9;               /* Seitengrund, unter dem die Karten liegen */
  --panel:#FFFFFF; --panel2:#F6F7F9;
  --line:#E7EAEE; --line2:#F1F3F6;
  --tx:#1D232C; --tx2:#5B6673; --tx3:#98A2AF;
  --acc:#FF5230; --acc2:#FFEEE9; --accd:#E63E1E;
  /* Phasenfarben der Kampagne: kodieren Daten, nicht Bedienung. Sie bleiben
     unterscheidbar, sind aber auf den wärmeren Grund heruntergeholt. */
  --p1:#B26A00; --p1b:#FFF3DF; --p1t:#7A4900;
  --q:#5B6673;  --qb:#F1F3F6;  --qt:#3C4552;
  --p2:#B03A5B; --p2b:#FBEAEF; --p2t:#7E2740;
  --dl:#6D5BC4; --dlb:#EEEBFA; --dlt:#443586;
  --ok:#12805C; --okb:#E3F5EE; --okt:#0B5D42;
  --warn:#B26A00; --warnb:#FFF3DF; --warnt:#7A4900;
  --bad:#C0392B; --badb:#FCEAE7; --badt:#8E2A1F;
  --rail:236px;               /* Breite der Modulleiste links */
  --sh:0 1px 2px rgba(29,35,44,.04),0 8px 24px rgba(29,35,44,.05);
}
*{box-sizing:border-box}
/* `hidden` muss stärker sein als jedes `display:` aus einer Klasse. Der
   Browser bringt die Regel selbst mit, aber nur mit der Kraft eines
   Elementstils — jede Klasse mit `display:flex` sticht sie. Aufgefallen ist
   das am Entwurfsbalken im Start-up-Blatt: Er war seit jeher versteckt und
   stand trotzdem als leerer gelber Streifen über dem Kopf. Ein Element,
   das `hidden` heißt, darf nicht zu sehen sein — ausnahmslos. */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1320px;margin:0 auto;padding:30px 28px 90px}
header{margin-bottom:6px}
header h1{font-size:36px;margin:0 0 10px;letter-spacing:-.035em;font-weight:700;line-height:1.05}
.hdbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
a.lnk{color:var(--acc);font-weight:600;font-size:13px;cursor:pointer;text-decoration:none;
  border-bottom:1px solid rgba(255,82,48,.35)}
a.lnk:hover{border-bottom-color:var(--acc)}
.pill{background:var(--acc2);color:var(--accd);border-radius:100px;padding:3px 11px;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.pill.sync{background:var(--panel2);color:var(--tx2)}
.pill.sync.err{background:var(--badb);color:var(--bad)}
/* Karten: weiß auf dem grauen Grund, weiche Kante, ein Hauch Schatten. */
/* scroll-margin: die Kopfleiste bleibt stehen, ein angesprungener Abschnitt
   würde sonst darunter verschwinden. */
section{margin-top:20px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:22px 24px 24px;box-shadow:var(--sh);scroll-margin-top:68px}
h2{font-size:19px;margin:0 0 18px;letter-spacing:-.025em;font-weight:700;
  display:flex;align-items:center;gap:12px}
/* Die Abschnittsnummer wird zum Zeichen: dunkles Plättchen statt grauer Ziffer. */
h2 .num{width:26px;height:26px;border-radius:8px;background:var(--tx);color:#fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex:none;font-variant-numeric:tabular-nums;letter-spacing:0}
h2 .lnk{margin-left:auto;font-size:12px}
h2 .pill{margin-left:auto;font-weight:600}
/* Stehen Pille und Link nebeneinander, schiebt nur die Pille — der Link folgt. */
h2 .pill + .lnk{margin-left:0}
/* Und stehen zwei Links da, schiebt nur der erste. Sonst risse `margin-left:auto`
   sie an die beiden Enden der Zeile, und was zusammengehört, stünde am
   weitesten auseinander. */
h2 .lnk + .lnk{margin-left:14px}
/* ---------- Zuklappen ----------
   Die Überschrift ist der Schalter, der Pfeil nur sein sichtbares Ende. Er
   schiebt sich selbst nach rechts — es sei denn, dort steht schon etwas, das
   schiebt: dann würde ein zweites `margin-left:auto` den Raum aufteilen und
   Titel, Pille und Link auseinanderziehen. */
h2{cursor:pointer}
h2 .falt{margin-left:auto;flex:none;width:26px;height:26px;padding:0;border:0;
  border-radius:8px;background:none;color:var(--tx3);cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:.15s}
h2 .pill ~ .falt,h2 .lnk ~ .falt{margin-left:8px}
h2 .falt svg{width:16px;height:16px}
h2:hover .falt{color:var(--tx2);background:var(--panel2)}
section.zu h2 .falt{transform:rotate(-90deg)}
/* Der Inhalt wird an der Section verborgen, nicht an jedem Kind: was ein Modul
   beim Neuzeichnen hineinschreibt, ist damit von selbst mit verborgen. */
section.zu>*:not(h2){display:none}
section.zu{padding-bottom:20px}
section.zu h2{margin-bottom:0}
svg{display:block;width:100%;height:auto;overflow:visible}
.hint{font-size:12.5px;color:var(--tx3)}
.note{margin-top:16px;border-radius:13px;padding:14px 17px;font-size:12.5px}
.note.warn{background:var(--p1b);color:var(--p1t)}
/* Die Fußzeile stand einmal als eine zentrierte Zeile in jeder Seite. Sie wird
   jetzt von der Hülle geschrieben und steht weiter unten im Stylesheet. */

/* ---------- Auswahlleiste, Zählkapsel, unsichtbare Überschrift ----------
   Diese drei standen bis zum 01.10.2026 im Scouting-Stylesheet, weil sie dort
   entstanden sind. Mit dem Start-up-Register brauchte sie ein zweites Modul —
   und ein zweiter Satz derselben Regeln wäre der Anfang zweier Wahrheiten
   darüber, wie eine Auswahl aussieht. Modulfremd sind sie ohnehin nicht: Eine
   Leiste mit Beschriftung links und Knöpfen rechts ist eine Form des Hauses,
   keine des Scoutings. */
.pfil{display:grid;grid-template-columns:auto 1fr;gap:9px 13px;
  align-items:center;margin-bottom:14px}
.pgl{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx3);white-space:nowrap;text-align:right;user-select:none}
.pgr{display:flex;gap:7px;flex-wrap:wrap;align-items:center;min-width:0}
.pfil .vor:not(.on){background:var(--panel2)}
.rz{border-radius:100px;padding:1px 9px;font-size:11px;font-weight:800;
  font-variant-numeric:tabular-nums;margin-left:7px}
.rz.gelb{background:var(--warnb);color:var(--warnt)}
.rz.rot{background:var(--badb);color:var(--badt)}
.rz.gr{background:var(--line2);color:var(--tx2)}
/* Eine Überschrift, die nur Vorleseprogramme hören. Über einer Spalte aus
   lauter gleichen Knöpfen sagt ein sichtbares Wort nichts, was der Knopf nicht
   selbst sagt — fehlen darf es trotzdem nicht. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{background:#fff;border:1px solid var(--line);color:var(--tx);border-radius:11px;
  padding:8px 16px;font-size:13px;cursor:pointer;font-family:inherit;font-weight:600;transition:.13s}
.btn:hover{border-color:var(--tx3)}
.btn:disabled{opacity:.5;cursor:default}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.pri:hover{background:var(--accd);border-color:var(--accd)}
.btn.dgr{color:var(--bad);border-color:#F3CFC9}
.btn.dgr:hover{background:var(--badb);border-color:var(--bad);color:var(--badt)}
.btn.on{background:var(--tx);border-color:var(--tx);color:#fff}
.btn.on:hover{background:#000;border-color:#000}
.btn.sm{padding:6px 13px;font-size:12px;border-radius:9px}
.btn i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:0}
.divider{width:1px;height:22px;background:var(--line);margin:0 4px}

/* ---------- Der Ladebalken im Knopf selbst ----------
   Kein Kasten in der Ecke, kein Streifen am Seitenkopf: Die Anzeige sitzt in
   dem Knopf, auf den geklickt wurde. Wer wissen will, ob *dieser* Klick
   angekommen ist, sieht dorthin, wohin er geklickt hat — alles andere muss er
   erst suchen, und das kostet genau die Aufmerksamkeit, die die Wartezeit ihm
   ohnehin schon abverlangt.

   Der Balken ist ein `::after` hinter dem Text. `isolation:isolate` ist die
   Bedingung dafür, dass `z-index:-1` funktioniert, ohne den Knopf hinter seine
   eigene Umgebung zu schieben: Es macht den Knopf zum eigenen Stapelraum, und
   „-1" heißt dann „unter meiner Beschriftung", nicht „unter der Karte".

   `.dlp:disabled` setzt die Deckkraft bewusst zurück. Ein gesperrter Knopf ist
   sonst halb durchsichtig — richtig, solange „gesperrt" heißt „geht nicht",
   falsch, wenn es heißt „arbeitet gerade". Ein blasser Balken sähe aus wie ein
   Fehler. */
.dlp{position:relative;overflow:hidden;isolation:isolate}
.dlp::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--dlp,0%);
  background:var(--acc2);z-index:-1;transition:width .14s linear}
.dlp.pri::after{background:rgba(255,255,255,.28)}
.dlp:disabled{opacity:1;cursor:progress}
.dlp[aria-disabled="true"]{cursor:progress}
/* Wenn die Größe unbekannt ist, gibt es keinen ehrlichen Stand — dann läuft
   ein Streifen durch, der sagt „es passiert etwas", ohne zu behaupten, wie
   weit. Ein Balken, der bei 30 % stehenbleibt, weil niemand die Gesamtzahl
   kennt, ist eine Falschaussage. */
.dlp.dlpx::after{width:38%;background:var(--acc2);animation:dlpwander 1.1s ease-in-out infinite}
@keyframes dlpwander{0%{left:-38%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){
  .dlp::after{transition:none}
  .dlp.dlpx::after{animation:none;left:0;width:100%;opacity:.5}
}

/* ---------- Lange Texte: erst der Anfang, auf Wunsch der Rest ----------
   Beide Fassungen stehen im Dokument, umgeschaltet wird per Klasse: so ist der
   volle Text auch dann vorhanden, wenn jemand die Seite durchsucht oder
   ausdruckt, und das Aufklappen kostet keinen Neuaufbau.

   Stand einmal in der Kampagnenseite, als sie die einzige war, die kürzt. Der
   Medienbaukasten kürzt seither auch — und zwei Seiten mit derselben Mechanik
   und je eigenem Stylesheet wären zwei Aufklapper, die verschieden aussehen. */
.lang>.tv{display:none}
.lang.auf>.tk{display:none}
.lang.auf>.tv{display:inline}
.lang:not(.auf)>.tk:after{content:" …"}
.mehr{border:0;background:none;padding:0;margin-left:6px;font:inherit;font-size:11.5px;
  font-weight:700;color:var(--acc);cursor:pointer;font-family:inherit;white-space:nowrap}
.mehr:hover{text-decoration:underline}

/* ---------- Suchzeile und Filterknöpfe ----------
   Ein Suchfeld links, daneben Gruppen von Pillen — eine Gruppe je Frage, die
   man an die Menge stellt. Die eingeschaltete Pille ist dunkel und nicht bunt:
   Auf einer Fläche mit fünf Gruppen wäre Farbe die fünfte Bedeutung, und der
   Blick müsste raten, welche zusammengehören.

   Kam aus dem Portfolio hierher, als der Medienbaukasten dieselbe Leiste
   brauchte. Sie ist keine Portfolio-Eigenheit, sondern die Bauform für jede
   Seite, die eine große Menge zeigt und sie eingrenzen lässt. */
.suchz{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.suchz input[type=search]{flex:1;min-width:200px;padding:9px 13px;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-size:13px;background:var(--panel);color:var(--tx)}
.suchz input[type=search]:focus{outline:none;border-color:var(--tx3)}
.filt{display:flex;gap:5px;flex-wrap:wrap}
.filt button{font:inherit;font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:100px;
  border:1px solid var(--line);background:var(--panel);color:var(--tx2);cursor:pointer;
  transition:.13s}
.filt button:hover{border-color:var(--tx3);color:var(--tx)}
.filt button.on{background:var(--tx);color:#fff;border-color:var(--tx)}

/* ---------- Navigation ----------
   Zwei Leisten mit getrennten Aufgaben. Rechts stehen senkrecht die Module:
   sie werden mehr, und eine senkrechte Liste verträgt Zuwachs, den eine
   Querleiste irgendwann nicht mehr hergibt. Rechts und nicht links, weil der
   Blick beim Lesen links anfängt — der Inhalt bekommt die Kante.

   Oben quer stehen die Abschnitte der aktuellen Seite. Die wechseln mit jeder
   Seite und sind Sprungmarken, keine Orte. */
.rail{position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:45;
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 16px 16px;gap:18px}

/* Wortmarke: Stern plus venture.OS. Der Punkt trägt die Akzentfarbe — sie steht
   in --acc, damit er beim Farbwechsel von allein mitgeht. */
.marke{display:flex;align-items:center;gap:10px}
.marke .stern{width:22px;height:22px;flex:none;fill:var(--tx)}
.marke .wm{font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--tx);line-height:1.1}
.marke .wm i{font-style:normal;color:var(--acc)}
.rail .brand{text-decoration:none;flex:none;padding:0 6px}

/* Ein Modul ist ein Ort, kein Knopf — deshalb zwei Zeilen: wohin es geht und
   was einen dort erwartet. Der Platz dafür ist da, sobald die Leiste steht. */
.rail .mods{display:flex;flex-direction:column;gap:3px}
.rail .mod{text-decoration:none;color:var(--tx2);padding:9px 11px;border-radius:12px;
  cursor:pointer;transition:.13s;display:block}
.rail .mod b{display:block;font-size:13.5px;font-weight:600;color:var(--tx);line-height:1.3}
.rail .mod span{display:block;font-size:11.5px;color:var(--tx3);line-height:1.35;margin-top:1px}
.rail .mod:hover{background:var(--panel2)}
.rail .mod.act{background:var(--tx)}
.rail .mod.act b{color:#fff}
.rail .mod.act span{color:rgba(255,255,255,.62)}

/* Das Untermenü des aktiven Moduls. Eingerückt hinter einer Linie: die
   Einrückung sagt „gehört zu dem darüber", die Linie hält die Einträge
   zusammen, damit sie nicht wie ein zweites Modul aussehen. Eine Zeile je
   Eintrag, ohne Beschreibung — der Ort ist schon benannt, ein Untertitel wäre
   die dritte Erklärung derselben Sache. */
.rail .unter{display:flex;flex-direction:column;gap:1px;margin:4px 0 6px 12px;
  padding-left:12px;border-left:2px solid var(--line)}
.rail .ut{text-decoration:none;font-size:12.5px;font-weight:600;color:var(--tx3);
  padding:5px 9px;border-radius:9px;transition:.13s}
.rail .ut:hover{background:var(--panel2);color:var(--tx)}
.rail .ut.act{color:var(--accd);background:var(--acc2)}

.rail .rfoot{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.rail .pill.sync{align-self:flex-start;margin-left:4px}
.rail .who{display:flex;align-items:center;gap:9px;background:#fff;width:100%;
  border:1px solid var(--line);border-radius:100px;padding:5px 14px 5px 5px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--tx);transition:.13s;text-align:left}
.rail .who:hover{border-color:var(--tx3)}
.rail .who .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Die Abschnittsleiste: Pillen, dieselbe Sprache wie die Reiter der Pipeline.
   Sie bleibt oben stehen, damit die Sprungmarken auch auf Seite drei erreichbar
   sind. Wer ihre Höhe ändert, muss `section{scroll-margin-top}` und das
   rootMargin in spyRail() mitziehen. */
.subbar{position:sticky;top:0;z-index:40;background:rgba(246,247,249,.9);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.subbar .subin{max-width:1320px;margin:0 auto;padding:11px 28px;display:flex;gap:6px;
  flex-wrap:wrap}
.subbar .sub2{font-size:12px;font-weight:600;color:var(--tx2);text-decoration:none;
  padding:5px 12px;border-radius:100px;cursor:pointer;background:var(--panel);
  border:1px solid var(--line);white-space:nowrap;transition:.13s}
.subbar .sub2:hover{border-color:var(--tx3);color:var(--tx)}
.subbar .sub2.act{background:var(--acc2);color:var(--accd);border-color:transparent}
/* Zugeklappt: blasser und gestrichelt umrandet. Der Eintrag bleibt anklickbar
   und klappt den Abschnitt beim Anspringen wieder auf — er ist der Weg zurück
   zu etwas, das man selbst weggeräumt hat. */
.subbar .sub2.zu{color:var(--tx3);border-style:dashed;background:transparent}
.subbar .sub2.zu:hover{color:var(--tx2)}
body.hasrail{padding-left:var(--rail)}

/* Schmal: die Leiste legt sich quer unter den Inhalt statt an die Kante. Eine
   248-px-Spalte neben einer 360-px-Seite wäre keine Navigation mehr. */
@media(max-width:900px){
  body.hasrail{padding-left:0;padding-bottom:0}
  .rail{position:static;width:auto;flex-direction:row;align-items:center;
    border-right:none;border-bottom:1px solid var(--line);padding:10px 16px;gap:12px;
    overflow-x:auto}
  .rail .mods{flex-direction:row;gap:4px}
  .rail .mod{padding:6px 12px;border-radius:100px;white-space:nowrap}
  .rail .mod span{display:none}
  /* Quer gelegt gibt es keine Einrückung mehr, an der die Zugehörigkeit
     hinge — die Unterseiten reihen sich deshalb einfach hinter ihr Modul und
     unterscheiden sich nur durch die hellere Füllung davon. */
  .rail .unter{flex-direction:row;gap:4px;margin:0;padding-left:0;border-left:none}
  .rail .ut{padding:6px 12px;border-radius:100px;white-space:nowrap;background:var(--panel2)}
  .rail .rfoot{margin-top:0;margin-left:auto;flex-direction:row;align-items:center}
  .rail .who{width:auto;padding:4px}
  .rail .who .nm,.rail .pill.sync{display:none}
  /* Nur in der Leiste weicht die Wortmarke; im Fuß und auf dem Anmeldeschirm
     bleibt sie stehen — dort ist Platz, und dort ist sie der Absender. */
  .rail .marke .wm{display:none}
  .subbar .subin{padding:9px 16px;overflow-x:auto;flex-wrap:nowrap}
  .wrap{padding:20px 16px 60px}
  header h1{font-size:27px}
}

/* ---------- Fußzeile ----------
   Steht auf jeder Seite und trägt den Absender: Firma, Anschrift und den Weg
   zum Support. Sie liegt außerhalb von `.wrap`, damit die Trennlinie über die
   volle Breite läuft — der Fuß ist nicht Teil des Inhalts, sondern das, was
   darunter kommt. */
.foot{border-top:1px solid var(--line);background:var(--panel);margin-top:40px}
.foot .footin{max-width:1320px;margin:0 auto;padding:26px 28px 30px;
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:start}
.foot .fcol .marke{margin-bottom:9px}
.foot .fcol .marke .stern{width:18px;height:18px}
.foot .fcol .marke .wm{font-size:15px}
.foot .fh{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tx3);margin-bottom:7px}
.foot .fadr{margin:0;font-size:12px;line-height:1.62;color:var(--tx3)}
.foot .fadr b{color:var(--tx2);font-weight:600}
.foot .fnav{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.foot .fnav a{font-size:12.5px;font-weight:600;color:var(--acc);text-decoration:none}
.foot .fnav a:hover{text-decoration:underline}
.foot .fbeta{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx3);background:var(--panel2);border:1px solid var(--line);
  border-radius:100px;padding:2px 10px}
/* Der Knopf für die Rückmeldung sieht aus wie der Verweis darunter und nicht
   wie ein Knopf im Formular. Er ist ein Weg und kein Vorgang — und ein grauer
   Kasten in der Fußzeile zöge mehr Aufmerksamkeit auf sich als die Arbeit
   darüber. Der Punkt davor sagt trotzdem: hier passiert etwas. */
.foot .frueck{font:inherit;font-size:12.5px;font-weight:600;color:var(--acc);
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:7px}
.foot .frueck::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--acc);flex:none}
.foot .frueck:hover{text-decoration:underline}
@media(max-width:900px){
  .foot .footin{grid-template-columns:1fr;gap:18px;padding:22px 16px 26px}
}

/* ---------- Rückmeldung ----------
   Die drei Arten stehen als Schalterzeile und nicht als Auswahlliste: Was zur
   Wahl steht, ist hier die halbe Frage, und eine zugeklappte Liste verbirgt
   genau das. Der gewählte Schalter ist dunkel und nicht orange — die
   Signalfarbe gehört dem Senden, nicht der Wahl davor. */
.rmarten{display:flex;gap:7px;flex-wrap:wrap}
.rmarten .rmart{font:inherit;font-size:13px;font-weight:600;padding:7px 15px;
  border:1px solid var(--line);border-radius:100px;background:#fff;color:var(--tx2);
  cursor:pointer;transition:.13s}
.rmarten .rmart:hover{border-color:var(--tx3)}
.rmarten .rmart.an{background:var(--tx);border-color:var(--tx);color:#fff}
.rmwas{margin:7px 0 0;min-height:17px}
.rmopt{font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--tx3);margin-left:6px}
/* Der Kasten ist so hoch, dass ein Bildschirmfoto darin etwas zeigt, und so
   niedrig, dass der Dialog nicht zur Bildergalerie wird. Leer trägt er die
   Anleitung, voll das Bild — beides an derselben Stelle, damit sich beim
   Einfügen nichts verschiebt. */
.rmbild{position:relative;border:1px dashed var(--line);border-radius:11px;
  background:var(--panel2);min-height:104px;display:flex;align-items:center;
  justify-content:center;padding:14px;text-align:center;overflow:hidden}
.rmbild:focus{outline:none;border-color:var(--tx3)}
.rmbild.drueber{border-color:var(--acc);background:var(--p1b)}
.rmbild.voll{padding:0;border-style:solid;background:#fff;min-height:0}
.rmleer b{display:block;font-size:13px;margin-bottom:4px}
.rmleer .rmwahl{font:inherit;font-size:12.5px;color:var(--acc);background:none;
  border:0;padding:0;cursor:pointer;text-decoration:underline}
.rmvor{display:block;width:100%;max-height:260px;object-fit:contain;background:#fff}
.rmweg{position:absolute;top:7px;right:7px;width:26px;height:26px;line-height:1;
  font-size:17px;border:1px solid var(--line);border-radius:50%;background:#fff;
  color:var(--tx2);cursor:pointer}
.rmweg:hover{color:var(--bad);border-color:var(--bad)}
.rmkontext{margin:12px 0 0;font-size:11.5px}
.rmmeld{margin:10px 0 0;font-size:12.5px;color:var(--tx3);min-height:17px}
.rmmeld.err{color:var(--bad)}

/* ---------- Modal ----------
   Der Wert muss über dem der .gate (200) liegen. Der erzwungene Passwortwechsel
   ist der eine Dialog, der aufgeht, während der Anmeldeschirm noch steht — lag
   die Maske darunter, verschwand er hinter dem deckenden Verlauf und die
   Anmeldung blieb sichtbar bei „Prüfe …" stehen. */
.mask{position:fixed;inset:0;background:rgba(29,35,44,.5);z-index:300;display:flex;
  align-items:flex-start;justify-content:center;padding:48px 20px;overflow-y:auto;
  backdrop-filter:blur(2px)}
.dlg{background:#fff;border-radius:20px;width:100%;max-width:560px;
  box-shadow:0 24px 60px rgba(29,35,44,.28);overflow:hidden}
.dlg.wide{max-width:940px}
.dlg .hd{padding:18px 24px 14px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:10px}
.dlg .hd h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.dlg .hd .cl{margin-left:auto;cursor:pointer;color:var(--tx3);font-size:20px;line-height:1;
  padding:0 4px;border-radius:6px}
.dlg .hd .cl:hover{background:var(--panel2);color:var(--tx)}
.dlg .bd{padding:20px 24px}
.dlg .ft{padding:14px 24px 18px;display:flex;gap:9px;align-items:center;border-top:1px solid var(--line2)}
.dlg .ft .sp{margin-left:auto}
/* Zwei Bänder ganz oben im Dialog, die es vorher nicht gab.

   Das rote sagt, dass jemand anderes drinsitzt — es steht über dem Formular,
   nicht darunter: Wer es erst nach dem Tippen liest, hat umsonst getippt.
   Das gelbe meldet den eigenen Zwischenstand oder bietet einen gefundenen an;
   es ist bewusst leiser, denn es ist eine Beruhigung und keine Warnung. */
.gsperrt{background:var(--badb);color:var(--badt);border:1px solid #F3CFC9;
  border-radius:12px;padding:9px 12px;font-size:12.5px;line-height:1.5;margin-bottom:14px}
.gsperrt b{font-weight:700}
.entw{background:var(--warnb);color:var(--warnt);border:1px solid #F0DCB6;
  border-radius:12px;padding:8px 12px;font-size:12.5px;line-height:1.5;margin-bottom:14px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.entw.ok{background:var(--panel2);color:var(--tx3);border-color:var(--line)}
.entw .btn{padding:4px 10px}
/* Ein gesperrtes Formular soll auch so aussehen — sonst tippt jemand hinein
   und wundert sich, dass nichts erscheint. */
.dlg .bd input:disabled,.dlg .bd select:disabled,.dlg .bd textarea:disabled{
  background:var(--panel2);color:var(--tx2);cursor:not-allowed}
.f{margin-bottom:13px}
.f>label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;color:var(--tx3);margin-bottom:4px}
.f input,.f select,.f textarea{width:100%;padding:9px 12px;border:1px solid var(--line);
  border-radius:11px;font-size:13.5px;font-family:inherit;color:var(--tx);background:#fff}
.f textarea{resize:vertical;min-height:64px;line-height:1.5}
/* Der Rahmen im Fokus ist dunkel, nicht orange: die Signalfarbe gehört dem,
   was läuft oder geklickt werden will, nicht dem Feld, in dem man ohnehin steht. */
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--tx);
  box-shadow:0 0 0 3px rgba(29,35,44,.09)}
.f input[type=color]{padding:2px;height:36px;cursor:pointer}
/* Ein Kästchen ist kein Textfeld. Die Regel oben meint Eingabefelder und zieht
   sie auf die volle Breite — sie trifft aber jedes `input` in einem `.f`, also
   auch das Häkchen. Ein 435 Pixel breites Kästchen schiebt in einer Flex-Zeile
   seine eigene Beschriftung bis an den Rand des Dialogs und darüber hinaus: Im
   Erledigen-Dialog des Scoutings stand der Name des Kontakts deshalb weit
   rechts, in einer 72 Pixel schmalen Spalte Wort für Wort umgebrochen, und die
   zweite Spalte lag ganz außerhalb des Fensters. */
.f input[type=checkbox],.f input[type=radio]{width:auto;padding:0}
/* ---------- Das Schreibfeld mit Leiste ----------
   Leiste und Feld liegen in einem Rahmen und nicht in zweien: Sie sind ein
   Bedienelement, und zwei Rahmen sähen aus wie zwei. Den Fokusrahmen trägt
   deshalb der Kasten und nicht das Feld darin. */
.rte{border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}
.rte:focus-within{border-color:var(--tx);box-shadow:0 0 0 3px rgba(29,35,44,.09)}
.rtl{display:flex;gap:2px;padding:5px 6px;border-bottom:1px solid var(--line);
  background:var(--panel2);flex-wrap:wrap}
.rtl button{font:inherit;font-size:12.5px;line-height:1;min-width:28px;height:26px;
  padding:0 7px;border:1px solid transparent;border-radius:7px;background:none;
  color:var(--tx2);cursor:pointer}
.rtl button:hover{background:#fff;border-color:var(--line);color:var(--tx)}
.rtl button:disabled{opacity:.4;cursor:not-allowed;background:none;border-color:transparent}
/* Mindesthöhe wie beim `textarea` nebenan, damit ein Formular mit beiden
   Feldarten nicht aussieht wie zwei verschiedene Formulare. */
.rtf{min-height:132px;max-height:420px;overflow:auto;padding:10px 12px;
  font-size:13.5px;line-height:1.6;color:var(--tx);outline:none}
.rtf[contenteditable=false]{background:var(--panel2);color:var(--tx2);cursor:not-allowed}
.rtf:empty:before{content:attr(data-ph);color:var(--tx3)}
/* Die Abstände im Schreibfeld sind enger als im Fließtext: Wer hier schreibt,
   will sehen, wie viel er geschrieben hat, und nicht, wie viel Luft
   dazwischen ist. */
.rtf>:first-child{margin-top:0} .rtf>:last-child{margin-bottom:0}
.rtf p{margin:0 0 9px} .rtf h3{font-size:14px;margin:14px 0 6px}
.rtf ul,.rtf ol{margin:0 0 9px;padding-left:21px} .rtf li{margin:0 0 3px}
.rtf blockquote{margin:0 0 9px;padding-left:11px;border-left:2px solid var(--line);
  color:var(--tx2)}
.rtf a{color:var(--acc)}
.frow{display:grid;gap:11px}
.frow.c2{grid-template-columns:1fr 1fr} .frow.c3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:640px){.frow.c2,.frow.c3{grid-template-columns:1fr}}
.sub{font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  color:var(--tx3);margin:22px 0 10px}
.sub:first-child{margin-top:0}

/* ---------- Kleine Zahlenfelder ----------
   Sechs Kennzahlen als volle Formularzeilen hätten den Maßnahmendialog auf die
   doppelte Höhe gebracht. `auto-fit` statt `auto-fill`: Bei drei Feldern in
   einer Zeile sollen es drei breite sein und nicht drei schmale neben einer
   leeren Spalte.

   `tabular-nums` in einem Eingabefeld sieht nach Kleinkram aus und ist keiner:
   Untereinander stehende Zahlen mit unterschiedlich breiten Ziffern lassen sich
   nicht auf einen Blick der Größe nach vergleichen, und genau das tut jemand,
   der eine Spalte mit Reichweiten von Hand durchgeht. */
.kpig{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px}
.kpif{display:flex;flex-direction:column;gap:4px;min-width:0}
.kpif>span{font-size:11px;font-weight:600;color:var(--tx2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kpif>span i{font-style:normal;color:var(--tx3);font-weight:500}
.kpif input{width:100%;box-sizing:border-box;font-variant-numeric:tabular-nums}

/* ---------- Dateien ---------- */
.fl{border:1px solid var(--line);border-radius:11px;padding:3px 7px;background:#FCFCFD}
.fi{display:flex;align-items:center;gap:9px;padding:6px 2px;font-size:12.5px;
  border-bottom:1px dashed var(--line2)}
.fi:last-child{border-bottom:none}
.fi .ic{color:var(--tx3);font-size:11px}
.fi .nm{flex:1;color:var(--acc);cursor:pointer;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fi .nm:hover{text-decoration:underline}
.fi .sz{color:var(--tx3);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fi .rm{cursor:pointer;color:var(--tx3);font-weight:700;padding:0 6px;border-radius:5px}
.fi .rm:hover{background:#FEF2F2;color:#B91C1C}
/* Die Sammelzeile ist keine Datei, sondern eine Aussage über alle Dateien darüber.
   Deshalb trennt sie eine durchgezogene Linie von der gestrichelten Reihe ab, und
   deshalb trägt sie kein Kreuz zum Entfernen: es gäbe nichts zu entfernen, was nicht
   schon oben stünde. Der Name bleibt anklickbar orange, weil er dieselbe Handlung
   auslöst wie die Namen darüber — nur eben für alle auf einmal. */
.fi.fall{border-top:1px solid var(--line);border-bottom:none;margin-top:3px;padding-top:8px}
.fi.fall .ic{color:var(--acc)}
.fi.fall .nm{font-weight:700}
.fnone{color:var(--tx3);font-size:12px;padding:6px 2px}
.fadd{display:flex;align-items:center;gap:10px;margin-top:8px}
.fhint{font-size:11px;color:var(--tx3)}
.ferr{font-size:11.5px;color:#B91C1C;margin-top:5px;min-height:15px}

/* ---------- Anmeldung ---------- */
.gate{position:fixed;inset:0;background:linear-gradient(160deg,#1D232C,#2B3441);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px}
.gate .box{background:#fff;border-radius:20px;padding:32px 34px 30px;width:370px;max-width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.gate h2{display:block;font-size:18px;margin:0 0 6px}
/* Auf dem Anmeldebildschirm steht die Marke mittig und etwas größer. */
.gate h2.marke{display:flex;justify-content:center;margin:0 0 10px}
.gate h2.marke .stern{width:26px;height:26px}
.gate h2.marke .wm{font-size:22px}
.gate p{margin:0 0 20px;font-size:12.5px;color:var(--tx3);text-align:center}
.gate .f{margin-bottom:11px;text-align:left}
.gate .err{color:var(--bad);font-size:12.5px;margin-top:4px;min-height:18px;text-align:center}
.gate button{margin-top:6px;width:100%}
/* Wer angemeldet ist, aber dieses Modul nicht sehen darf, bekommt hier die
   Module, die er sehen darf — statt einer Sackgasse. */
.gate .gnav{display:flex;flex-direction:column;gap:7px}
.gate .gnav .btn{width:100%;text-decoration:none;text-align:center}

/* Das zweite Gesicht derselben Schicht: liegt ein Token vor, wird nicht das
   Passwortfeld gezeigt, sondern gewartet. Heller Grund statt dunklem Verlauf,
   keine Karte, kein Feld — nur Marke und Balken. Der Unterschied ist nicht
   Kosmetik: der dunkle Anmeldeschirm bei jedem Modulwechsel las sich wie ein
   Rauswurf. */
.gate.lade{background:var(--bg)}
.gate.lade .box{display:none}
.gate .laden{display:flex;flex-direction:column;align-items:center;gap:15px}
.gate .laden .marke .stern{width:26px;height:26px}
.gate .laden .marke .wm{font-size:22px}
.gate .laden p{margin:0;font-size:12.5px;color:var(--tx3)}
.gate .laden .bal{width:190px;height:3px;border-radius:2px;background:var(--line);
  overflow:hidden}
.gate .laden .bal i{display:block;width:38%;height:100%;border-radius:2px;
  background:var(--acc);animation:gzieh 1.15s ease-in-out infinite}
@keyframes gzieh{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
/* Wer das nicht sehen will, bekommt einen ruhenden Balken statt eines zuckenden. */
@media(prefers-reduced-motion:reduce){.gate .laden .bal i{animation:none;width:100%;opacity:.5}}

/* ---------- Gesichter ----------
   Überall dort, wo eine Person steht. Der Grundbaustein steht hier einmal, die
   Seiten setzen nur noch die Größe über `.kl` / `.gr` oder eine eigene Regel —
   sonst hätte jede Stelle ihre eigene Vorstellung davon, wie ein Bild in einem
   Kreis sitzt.

   Die Farbe der Person liegt als Hintergrund darunter, auch wenn ein Foto
   darüberliegt: sie trägt in der Zehntelsekunde vor dem Dekodieren und sie
   bleibt die Rückfallebene, wenn ein Bild einmal kaputt ist. */
.av{width:26px;height:26px;border-radius:50%;flex:none;overflow:hidden;
  color:#fff;font-size:10.5px;font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tx3);vertical-align:middle;user-select:none}
.av img{width:100%;height:100%;object-fit:cover;display:block}
/* Helle Fotos vor hellen Karten brauchen eine Kante, sonst franst der Kreis
   aus. Innen liegend, damit sie die Größe nicht verändert. */
.av.hasbild{box-shadow:inset 0 0 0 1px rgba(29,35,44,.16)}
.av.gr{width:48px;height:48px;font-size:15px}
.av.kl{width:18px;height:18px;font-size:8px}

/* ---------- Profilbild wechseln ---------- */
.bdlg{display:flex;gap:18px;align-items:flex-start}
.bdvor{width:96px;height:96px;border-radius:50%;flex:none;overflow:hidden;
  border:1px solid var(--line);background:var(--panel2)}
.bdvor img{width:100%;height:100%;object-fit:cover;display:block}
.bdvor .bdini{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:30px;font-weight:700}
.bdtxt{flex:1;min-width:0}
.bdtxt b{display:block;font-size:15px;letter-spacing:-.01em;margin-bottom:4px}
.bdakt{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media(max-width:520px){.bdlg{flex-direction:column;align-items:center;text-align:center}}

/* ---------- Kontokarte ---------- */
.konto{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.konto b{display:block;font-size:15px;letter-spacing:-.01em}
.konto span{display:block;font-size:12.5px;color:var(--tx3)}

/* ---------- Abbildungen ----------
   Diese Regeln standen bis zum 02.09.2026 in einem eigenen Stylesheet, weil es dort die
   einzigen Abbildungen der Anwendung gab. Mit dem Controlling-Dashboard gibt es
   sie an zwei Stellen — und zwei Dashboards, die dieselbe Formensprache
   sprechen sollen, dürfen sie nicht in zwei Dateien buchstabieren. Was hier
   steht, ist der Rahmen; was eine bestimmte Zeichnung braucht, bleibt bei ihr.

   Gemeinsam ist ihnen die Dreiteilung: Titel, ein Satz, der sagt, was man
   sieht, dann die Zeichnung, dann eine Ableitung. Eine Abbildung ohne Satz
   darunter ist eine Behauptung mit Achsen.

   Von Hand gezeichnet und ohne Bibliothek — das ist keine Sparsamkeit: Diese
   Anwendung hat keinen Build-Schritt, eine Diagrammbibliothek käme also als
   weiteres Skript über die Leitung und brächte ihre eigene Typografie mit. */
.figs{display:grid;gap:16px}
.figs.zwei{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
.fig{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:17px 19px}
.fig>h3{margin:0 0 3px;font-size:14.5px;letter-spacing:-.02em}
.fig>p.was{margin:0 0 15px;font-size:12px;color:var(--tx3);line-height:1.5}
.fig>p.folg{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line2);
  font-size:12px;color:var(--tx2);line-height:1.6}
.fig svg{display:block;width:100%;height:auto;overflow:visible}
.fig .ax{stroke:var(--line);stroke-width:1}
.fig .gr{stroke:var(--line2);stroke-width:1}
.fig text{font-family:inherit;fill:var(--tx3);font-size:10.5px}
.fig text.wert{fill:var(--tx);font-weight:700;font-variant-numeric:tabular-nums}
.fig text.nam{fill:var(--tx2);font-weight:600}

/* Legende: kleine Marken unter der Zeichnung statt Beschriftung darin. */
.leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:11px;color:var(--tx3)}
.leg span{display:inline-flex;align-items:center;gap:6px}
.leg i{width:11px;height:11px;border-radius:3px;display:block;background:var(--tx3)}
.leg i.kreis{border-radius:100px}
.leg i.hohl{background:none;border:2px solid var(--tx2)}

/* ---------- Kennzahlkacheln ---------- */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  margin-bottom:18px}
.kpi div{background:var(--panel2);border:1px solid var(--line2);border-radius:13px;padding:12px 14px}
.kpi b{display:block;font-size:22px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  line-height:1.15}
.kpi span{display:block;font-size:11.5px;color:var(--tx3);margin-top:3px;line-height:1.4}
.kpi.kl{gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi.kl b{font-size:18px}
.kpi.kl div{padding:10px 13px}