/* 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}
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}
/* ---------- 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. */

.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}

/* ---------- 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)}

.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}
  .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}
@media(max-width:900px){
  .foot .footin{grid-template-columns:1fr;gap:18px;padding:22px 16px 26px}
}

/* ---------- 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}
.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}
.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}

/* ---------- 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}
.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)}