/* ===========================================================================
   Karrierepfad Studio - der Arbeitsplatz des Admins (index.html)
   ---------------------------------------------------------------------------
   Aufbau: links die Seitenleiste mit Kandidaten und ihren Bewerbungen, rechts
   die Arbeitsflaeche. Die Bewerbung ist das, woran gearbeitet wird; der
   Kandidat ist der Ordner darum. Deshalb steht der Kandidat in der Leiste und
   die Bewerbung darunter eingerueckt - und nicht beides als Auswahlfeld im
   Kopf, wo man vor lauter Kennungen nicht sah, wo man ist.
   =========================================================================== */

.app-schale{min-height:100vh;display:grid;grid-template-columns:268px minmax(0,1fr)}

/* --- Seitenleiste -------------------------------------------------------- */
.seitenleiste{
  position:sticky;top:0;height:100vh;z-index:30;
  display:flex;flex-direction:column;
  padding:26px 16px 14px;
  background:var(--flaeche);border-right:1px solid var(--linie);
}
.markenzeile{display:flex;align-items:flex-start;gap:10px;padding:2px 8px 30px}
.markenzeile > div{flex:1;min-width:0}
/* Der Schriftzug wird als Maske gelegt, nicht als Bild eingebunden: so traegt
   er die Farben der Oberflaeche und nicht die aus der Datei. */
.markenlogo{
  width:100%;max-width:196px;aspect-ratio:597/63;display:block;
  background:linear-gradient(90deg,var(--akzent-tief) 0 9.55%,
             var(--dunkel) 9.55% 67.85%,var(--akzent) 67.85% 100%);
  -webkit-mask:url("karrierepfad-logo.svg") center / contain no-repeat;
  mask:url("karrierepfad-logo.svg") center / contain no-repeat;
}
.markenzeile small{
  display:block;margin:7px 0 0 25px;
  color:var(--leise-lesbar);font-size:var(--groesse-11);font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;
}

.nav-ueberschrift{
  margin:0 9px 8px;color:var(--leise-lesbar);
  font-size:var(--groesse-11);font-weight:800;letter-spacing:.17em;text-transform:uppercase;
}
.navigation{padding-bottom:20px;border-bottom:1px solid var(--linie-zart)}
.nav-eintrag{
  position:relative;width:100%;min-height:42px;
  display:flex;align-items:center;gap:10px;
  padding:7px 11px;border:0;border-radius:var(--rund);
  color:var(--sekundaer);background:transparent;text-align:left;font-weight:650;
}
.nav-eintrag:hover{color:var(--dunkel);background:var(--flaeche-still)}
.nav-eintrag.an{color:var(--akzent-dunkel);background:var(--akzent-hell)}
.nav-eintrag.an::before{
  content:"";position:absolute;left:-1px;width:4px;height:20px;
  border-radius:0 3px 3px 0;background:var(--akzent);
}
.nav-eintrag .sym{color:var(--leise-lesbar)}
.nav-eintrag.an .sym{color:var(--akzent)}
.nav-eintrag b{
  margin-left:auto;min-width:22px;padding:2px 7px;border-radius:var(--rund);
  color:var(--weiss);background:var(--fehler);font-size:var(--groesse-11);text-align:center;
}
.nav-eintrag b:empty{display:none}
.nav-eintrag em{margin-left:auto;color:var(--leise-lesbar);font-size:var(--groesse-11);font-style:normal}

/* Die rechte Kante des Plus fluchtet mit den Zahlen der Kandidatenliste
   darunter, die Hoehe mit der kleinen Ueberschrift - vorher stand ein
   grosser Kasten mit dickem Kreuz neben 9-px-Versalien und wirkte wie ein
   Fremdkoerper. Die Flaeche zum Klicken bleibt ueber das Polster gross. */
.listenkopf{display:flex;align-items:center;justify-content:space-between;
            padding:22px 8px 8px 9px}
.listenkopf .nav-ueberschrift{margin:0}
.listenkopf button{
  width:22px;height:22px;display:grid;place-items:center;padding:0;
  border:1px solid var(--linie);border-radius:var(--rund-klein);
  color:var(--sekundaer);background:var(--flaeche);
}
.listenkopf button .sym{width:12px;height:12px;stroke-width:2}
.listenkopf button:hover{border-color:var(--linie-hover);color:var(--akzent-dunkel);
                         background:var(--akzent-hell)}

/* Suchfeld ueber der Kandidatenliste. Wann es erscheint, entscheidet
   editor.js (SUCHFELD_AB) - hier steht nur, wie es aussieht. */
.listensuche{padding:0 4px 8px}
.listensuche input{height:34px;border-radius:var(--rund-klein);font-size:var(--groesse-13)}
.listensuche[hidden]{display:none}

/* Die Liste scrollt, der Rest der Leiste bleibt stehen. */
.kandidatenliste{flex:1;min-height:0;overflow-y:auto;display:grid;
                 gap:3px;align-content:start;margin:0 -4px;padding:0 4px}
.k-eintrag{
  width:100%;display:grid;grid-template-columns:30px 1fr auto;
  align-items:center;gap:9px;
  padding:8px;border:1px solid transparent;border-radius:var(--rund);
  color:var(--sekundaer);background:transparent;text-align:left;
}
.k-eintrag:hover{background:var(--flaeche-still)}
.k-eintrag.an{color:var(--dunkel);border-color:var(--linie);background:var(--flaeche-still)}
.k-eintrag strong{display:block;font-size:var(--groesse-13);font-weight:650;
                  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-eintrag small{display:block;margin-top:1px;color:var(--leise-lesbar);font-size:var(--groesse-11);
                 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-eintrag b{
  min-width:20px;padding:2px 6px;border-radius:var(--rund);
  color:var(--akzent-dunkel);background:var(--akzent-hell2);
  font-size:var(--groesse-11);text-align:center;
}
.zeichen{
  width:30px;height:30px;display:grid;place-items:center;border-radius:var(--rund);
  font-size:var(--groesse-11);font-weight:800;letter-spacing:.02em;
  color:var(--akzent-dunkel);background:var(--akzent-hell2);
}
.zeichen.f1{color:var(--zeichen-1);background:var(--zeichen-1-hell)}
.zeichen.f2{color:var(--zeichen-2);background:var(--zeichen-2-hell)}
.zeichen.f3{color:var(--zeichen-3);background:var(--zeichen-3-hell)}
.zeichen.coach{color:var(--weiss);background:var(--akzent-tief)}

/* Bewerbungen des offenen Kandidaten - eingerueckt, mit einer Fuehrungslinie,
   damit die Zugehoerigkeit ohne Erklaerung sichtbar ist. */
.b-liste{display:grid;gap:2px;margin:2px 0 6px 19px;padding-left:11px;
         border-left:1px solid var(--linie)}
.b-eintrag{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;
  padding:7px 9px;border:0;border-radius:var(--rund-klein);
  color:var(--sekundaer);background:transparent;text-align:left;font-size:var(--groesse-12);
}
.b-eintrag:hover{background:var(--flaeche-still)}
.b-eintrag.an{color:var(--akzent-dunkel);background:var(--akzent-hell);font-weight:650}
.b-eintrag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-eintrag i{width:7px;height:7px;border-radius:50%;background:var(--linie)}
.b-eintrag i.entwurf{background:var(--linie-hover)}
.b-eintrag i.versendet{background:var(--akzent)}
.b-eintrag i.eingeladen,.b-eintrag i.zusage{background:var(--ok)}
.b-eintrag i.absage{background:var(--fehler)}
.b-leer{margin:2px 0 6px 30px;color:var(--leise-lesbar);font-size:var(--groesse-11)}
/* Das Archiv (Auftrag 09): eine eingeklappte Zeile in derselben Spalte. */
.b-archiv{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;
  margin-top:3px;padding:5px 9px;border:0;border-radius:var(--rund-klein);background:transparent;
  text-align:left;font-size:var(--groesse-11);font-weight:650;color:var(--leise-lesbar);letter-spacing:.03em}
.b-archiv:hover{background:var(--flaeche-still)}
.b-archiv i{font-style:normal;color:var(--leise-lesbar)}
.b-archiv[aria-expanded="true"] ~ .b-eintrag{color:var(--leise-lesbar)}

/* Die Bewerbungsliste in der Akte (Auftrag 09): Zeilen mit Haekchen, drei
   Gruppen, Sortierung und das Archiv darunter. */
.bw-kopf{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.bw-kopf label{margin:0;font-size:var(--groesse-12)}
.bw-kopf select{width:auto;margin:0}
.bw-kopf .schnell{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.bw-gruppe{margin:14px 0 4px;font-size:var(--groesse-11);font-weight:700;color:var(--leise-lesbar);
           text-transform:uppercase;letter-spacing:.07em}
.bw-gruppe:first-child{margin-top:4px}
.bw-zeile{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;
          padding:9px 10px;border-top:1px solid var(--linie);font-size:var(--groesse-13)}
.bw-zeile:hover{background:var(--flaeche-still)}
.bw-zeile.gewaehlt{background:var(--akzent-hell)}
.bw-zeile .wer{min-width:0}
.bw-zeile .wer b{display:block;color:var(--dunkel);font-weight:600;overflow:hidden;
                 text-overflow:ellipsis;white-space:nowrap}
.bw-zeile .wer small{display:block;color:var(--sekundaer);font-size:var(--groesse-12)}
.bw-zeile .seit{color:var(--leise-lesbar);font-size:var(--groesse-12);white-space:nowrap}
.bw-zeile.archiv .wer b{color:var(--sekundaer);font-weight:500}
.bw-leiste{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:10px 12px;
           border-radius:var(--rund);background:var(--flaeche-still)}
.bw-leiste .zahl{font-size:var(--groesse-13);color:var(--dunkel);margin-right:auto}

.profilkarte{
  margin-top:12px;display:grid;grid-template-columns:30px 1fr auto;
  align-items:center;gap:9px;
  padding:12px 8px 0;border-top:1px solid var(--linie-zart);
}
.profilkarte strong{display:block;font-size:var(--groesse-12)}
.profilkarte small{color:var(--leise-lesbar);font-size:var(--groesse-11)}
.profilkarte button{border:0;color:var(--leise-lesbar);background:transparent;
                    padding:4px 6px;border-radius:var(--rund-klein)}
.profilkarte button:hover{color:var(--dunkel);background:var(--flaeche-still)}

/* --- Kopfleiste ---------------------------------------------------------- */
.hauptflaeche{min-width:0;display:flex;flex-direction:column}
.kopfleiste{
  position:sticky;top:0;z-index:20;height:74px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:0 34px;border-bottom:1px solid var(--linie);
  background:rgba(255,255,255,.92);backdrop-filter:blur(18px);
}
.pfad{display:flex;align-items:center;gap:8px;min-width:0;
      color:var(--leise-lesbar);font-size:var(--groesse-12)}
.pfad i{color:var(--linie-hover);font-style:normal}
.pfad strong{padding:6px 11px;border-radius:var(--rund-voll);color:var(--text);
             background:var(--flaeche-still);font-weight:650;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kopfaktionen{display:flex;align-items:center;gap:9px;flex:0 0 auto}
/* Die Reiter der Mappe im Kopf des Editors (Auftrag 10, Kandidat). */
.kopf-reiter{display:flex;gap:4px;margin:0 auto 0 8px;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}
.kopf-reiter a{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--rund-klein);
  color:var(--sekundaer);font-size:var(--groesse-14);text-decoration:none;white-space:nowrap;line-height:1}
.kopf-reiter a:hover{background:var(--flaeche-still)}
.kopf-reiter a.an{color:var(--akzent-dunkel);background:var(--akzent-hell);font-weight:600}
.kopf-reiter .marke{padding:2px 7px;border-radius:var(--rund-voll);font-size:var(--groesse-11);font-weight:600;
  color:var(--sekundaer);background:var(--flaeche-tief);margin:0}
.kopf-reiter .marke.neu{color:var(--weiss);background:var(--akzent-tief)}
.kopf-reiter .marke.warn{color:var(--warn);background:var(--warn-hell)}
.pfad a.pfad-glied{text-decoration:none}

/* Eingebettet in der Mappe (Auftrag 10, Stufe A): Die Mappe haelt den
   Rahmen - Seitenleiste, Pfad, Kopf der Bewerbung, Schrittleiste und die
   eigenen Reiter verschwinden; die Mappe zeigt sie an ihrer Stelle und
   schaltet die Reiter ueber Nachrichten. Es bleiben Werkraum, Vorschau und
   die zwei Knoepfe "Entwurf sichern" und "PDFs bauen". */
body.eingebettet{background:var(--flaeche)}
body.eingebettet .app-schale{grid-template-columns:1fr;min-height:0}
body.eingebettet .seitenleiste,body.eingebettet #leiste-auf,body.eingebettet #pfad,
body.eingebettet #btn-mappe,body.eingebettet #werkraum .kopfblock,body.eingebettet #schrittleiste,
body.eingebettet #werkraum-reiter{display:none}
body.eingebettet .kopfleiste{height:56px;padding:0 18px;border-bottom:1px solid var(--linie-zart);
  justify-content:flex-end}
body.eingebettet #arbeitsbereich{width:100%;padding:0 18px 40px}
/* Der Rahmen rollt selbst, die Kopfleiste ist 56 statt 74 px hoch - die
   klebenden Teile ruecken entsprechend nach oben. Und die Vorschau darf
   mehr Breite nehmen als im Editor mit Seitenleiste: hier ist sie der
   halbe Sinn der Sache. */
body.eingebettet .vorschaukarte{top:70px;--vs-hoehe:min(1180px,calc(100vh - 120px))}
body.eingebettet .arbeitsraster{grid-template-columns:minmax(460px,1fr) minmax(400px,min(780px,48%))}
@media (min-width:1500px){
  body.eingebettet .arbeitsraster.mit-rail{grid-template-columns:260px minmax(400px,1fr) minmax(400px,min(780px,44%))}
  body.eingebettet .arbeitsraster.mit-rail .anforderungsrail{top:70px;max-height:calc(100vh - 100px)}
}
/* Den naechsten Schritt sagt die Mappe im Blattkopf - der Kasten hier
   waere derselbe Satz ein zweites Mal. */
body.eingebettet #naechster{display:none}
/* Zweizeilige Knoepfe im Kopf ("Entwurf / sichern") sahen aus wie ein
   Fehler - lieber gibt der Pfad links nach, der kuerzt ohnehin mit "...". */
.kopfaktionen .knopf,.kopfaktionen .haupt{white-space:nowrap}
.speicherstatus{margin-right:6px;color:var(--leise-lesbar);font-size:var(--groesse-12);white-space:nowrap}
.speicherstatus i{
  width:7px;height:7px;display:inline-block;margin-right:7px;
  border-radius:50%;background:var(--akzent);vertical-align:1px;
  box-shadow:0 0 0 4px rgba(52,73,237,.09);
}
.speicherstatus.arbeitet i{background:var(--warn);
  box-shadow:0 0 0 4px rgba(138,100,18,.12);animation:pulsen 1.2s infinite}
.speicherstatus.fehler i{background:var(--fehler);
  box-shadow:0 0 0 4px rgba(180,50,31,.12)}
@keyframes pulsen{0%,100%{opacity:1}50%{opacity:.3}}
.nur-schmal{display:none}

/* --- Arbeitsbereich ------------------------------------------------------ */
#arbeitsbereich{width:min(1530px,100%);margin:0 auto;padding:38px 34px 70px}

.kopfblock{display:flex;align-items:center;justify-content:space-between;
           gap:28px;padding:4px 2px 26px}
.ueberzeile{
  width:fit-content;display:flex;align-items:center;gap:7px;
  margin-bottom:13px;padding:7px 12px;
  border:1px solid var(--linie);border-radius:var(--rund-voll);
  color:var(--sekundaer);background:var(--flaeche);font-size:var(--groesse-11);
}
.statuspunkt{width:7px;height:7px;border-radius:50%;background:var(--akzent);
             box-shadow:0 0 0 4px rgba(52,73,237,.09)}
.kopfblock h1{
  margin:0;color:var(--dunkel);
  font-size:clamp(30px,3.2vw,44px);font-weight:780;
  letter-spacing:-.045em;line-height:1;
}
.kopfblock > div > p{margin:11px 0 0;color:var(--sekundaer);font-size:var(--groesse-14)}
.kopfdaten{
  display:flex;align-items:center;gap:18px;flex:0 0 auto;
  padding:12px 12px 12px 19px;border:1px solid var(--linie);border-radius:var(--rund-mittel);
  background:var(--flaeche);
}
.kopfdaten div{padding-right:18px;border-right:1px solid var(--flaeche-tief)}
.kopfdaten small{display:block;color:var(--leise-lesbar);font-size:var(--groesse-11);
                 letter-spacing:.09em;text-transform:uppercase}
.kopfdaten strong{display:block;margin-top:4px;color:var(--dunkel);font-size:var(--groesse-13)}

/* --- Schrittleiste ------------------------------------------------------- */
/* Die vier Schritte einer Bewerbung. Jeder haengt an etwas, das wirklich in
   den Daten steht - keine geschaetzte Prozentzahl. Was hier gruen ist, ist
   auch getan. */
.schrittleiste{
  padding:19px 22px 17px;border:1px solid var(--linie);border-radius:var(--rund-gross);
  background:var(--flaeche);box-shadow:0 7px 24px rgba(2,11,53,.045);
}
.schrittleiste-text{display:flex;justify-content:space-between;
                    margin-bottom:10px;font-size:var(--groesse-12)}
.schrittleiste-text span{color:var(--sekundaer)}
.schrittleiste-text strong{color:var(--akzent-dunkel)}
.fortschritt{height:7px;border-radius:var(--rund-klein);background:var(--flaeche-tief);overflow:hidden}
.fortschritt i{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--akzent-tief) 0%,var(--akzent-dunkel) 38%,
             var(--akzent) 72%,var(--akzent) 100%);
  transition:width .35s ease;
}
.schritte{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:11px;
          color:var(--leise-lesbar);font-size:var(--groesse-11)}
/* Seit v3.16 sind die Schritte Knoepfe (schrittOeffnen) - ohne Rahmen,
   ohne Flaeche, damit die Leiste eine Leiste bleibt. */
.schritte button{min-height:0;padding:3px 0;margin:0;border:0;border-radius:var(--rund-klein);
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;line-height:1.3}
.schritte button:hover{color:var(--dunkel);background:var(--flaeche-tief)}
.schritte .fertig{color:var(--akzent-dunkel)}
.schritte .fertig::before{content:"✓";margin-right:5px}
.schritte .aktuell{color:var(--dunkel);font-weight:700}
.schritte .aktuell::before{content:"●";margin-right:5px;color:var(--akzent);font-size:var(--groesse-11)}
.schritte .offen{text-decoration:underline;text-decoration-color:var(--akzent);text-underline-offset:3px}

/* Eng gefuehrt (v3.16, entscheidungen/0014, Etappe 4): Bei der ersten
   Bewerbung zeigt der eingebettete Werkraum im Reiter Stelle nur die
   Feldgruppe des aktuellen Schritts; die Mappe schaltet die Klasse und den
   Schritt ueber body. Die Enge ist Darstellung, keine Route prueft sie. */
body.eng #tab-stelle fieldset[data-schritt]{display:none}
body.eng[data-schritt="stelle"] #tab-stelle fieldset[data-schritt="stelle"],
body.eng[data-schritt="unternehmen"] #tab-stelle fieldset[data-schritt="unternehmen"],
body.eng[data-schritt="anforderungen"] #tab-stelle fieldset[data-schritt="anforderungen"]{display:block}
/* Schritt 7 im Reiter Gestaltung: der Hinweis zum Bau statt der Vorlagen. */
#pdf-hinweis{display:none;margin-bottom:18px}
body[data-schritt="pdf"] #pdf-hinweis{display:block}
body.eng[data-schritt="pdf"] #tab-gestaltung fieldset[data-schritt="vorlage"],
body.eng[data-schritt="pdf"] #tab-gestaltung>p.hinweis{display:none}

/* Die Einschaetzung je Anforderung (v3.16): drei Knoepfe am rechten Rand. */
.anforderung .selbst{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.anforderung .selbst button{min-height:0;padding:4px 10px;margin:0;border:1px solid var(--linie);
  border-radius:var(--rund-voll);background:var(--flaeche);color:var(--sekundaer);font-size:var(--groesse-12)}
.anforderung .selbst button:hover{border-color:var(--linie-hover);color:var(--dunkel)}
.anforderung .selbst button.an{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel);color:var(--weiss)}
.selbst-marke{margin-left:auto;color:var(--sekundaer);font-size:var(--groesse-11);font-style:italic}
.selbst-marke.fehlt{color:var(--warn)}

/* Die Vorlage der Jobrichtung (v3.16) und die eingeklappten uebrigen. */
.layoutkarte .marke{display:inline-block;margin-top:7px;padding:2px 8px;border-radius:var(--rund-voll);
  background:var(--akzent-hell);color:var(--akzent-dunkel);font-size:var(--groesse-11);font-style:normal;font-weight:600}
.weitere-vorlagen{margin-top:14px}
.weitere-vorlagen summary{cursor:pointer;color:var(--sekundaer);font-size:var(--groesse-13)}
.weitere-vorlagen .layout-auswahl{margin-top:12px}
.hinweis.warn{color:var(--dunkel)}
.hinweis.warn .textknopf{display:inline;padding:0;margin-left:6px}
.entwurfbox{border-style:dashed}

/* --- Reiter -------------------------------------------------------------- */
/* Umbrechen statt abschneiden: Die Akte traegt acht Reiter, und auf einem
   Laptop neben der Seitenleiste passten sie nicht in eine Zeile - "Freigaben"
   und "Zugang" lagen unsichtbar hinter dem Rand, ohne Hinweis, dass es sie
   gibt. Eine zweite Zeile zeigt alles. Erst ganz schmal (unten) wird
   gewischt, dort waeren drei Zeilen Reiter mehr Kopf als Inhalt. */
.bereichsreiter{
  width:fit-content;max-width:100%;display:flex;flex-wrap:wrap;gap:4px;
  margin-top:26px;padding:5px;
  border:1px solid var(--linie);border-radius:var(--rund-mittel);background:var(--flaeche-still);
}
.bereichsreiter button{
  min-height:38px;padding:0 16px;border:0;border-radius:var(--rund);
  color:var(--sekundaer);background:transparent;font-weight:650;white-space:nowrap;
}
.bereichsreiter button:hover{color:var(--dunkel);background:var(--flaeche-tief)}
.bereichsreiter button.an{color:var(--weiss);background:var(--akzent-dunkel)}
.bereichsreiter button span{
  margin-left:7px;padding:2px 7px;border-radius:var(--rund);
  color:var(--akzent-dunkel);background:var(--akzent-hell2);font-size:var(--groesse-11);
}
.bereichsreiter button.an span{color:var(--akzent-dunkel);background:var(--weiss)}

.arbeitsraster{
  display:grid;grid-template-columns:minmax(480px,1fr) minmax(360px,540px);
  gap:26px;align-items:start;padding-top:24px;
}
.editorflaeche{min-width:0}

/* Die dritte Spalte gibt es erst, wenn wirklich Platz dafuer da ist. Darunter
   wuerde sie dem Formular die Breite nehmen, die es zum Schreiben braucht -
   und die Anforderungen stehen ja weiterhin vollstaendig im Reiter Stelle.
   Die Vorschauspalte behaelt ihre Hoechstbreite, solange das Fenster sie
   hergibt - erst gibt das Formular nach. Auf einem knappen Schirm rueckt
   auch sie zusammen; das Blatt rechnet sich dann neu, der Beobachter in
   index.html faengt das ab.

   1500 und nicht 1440: Bei 1440 gingen die drei Mindestbreiten samt
   Seitenleiste und Innenabstand um rund ein Dutzend Pixel ueber das Fenster
   hinaus, und die ganze Seite bekam eine waagerechte Bildlaufleiste. Die
   Schwelle braucht Luft, keine Punktlandung. */
/* Die Panelgestalt einmal fuer beide Faelle: breite Fenster zeigen die
   Leiste als dritte Spalte, schmale klappen sie ueber dem Formular auf. */
.arbeitsraster.mit-rail .anforderungsrail{
  min-width:0;overflow:auto;
  padding:16px 17px;border:1px solid var(--linie);border-radius:var(--rund-mittel);
  background:var(--flaeche-still);
}
@media (min-width:1500px){
  .arbeitsraster.mit-rail{
    grid-template-columns:272px minmax(400px,1fr) minmax(360px,540px);
  }
  .arbeitsraster.mit-rail .anforderungsrail{
    display:block;
    position:sticky;top:96px;
    max-height:calc(100vh - 132px);
  }
  /* Ab hier steht die Leiste ohnehin als Spalte da - der Umschalter im Kopf
     waere ein Knopf ohne Wirkung. */
  #rail-schalter{display:none}
}
/* Unter 1500 px: eingeklappt fehlt die Leiste ganz (display:none oben),
   aufgeklappt legt sie sich in voller Breite ueber die erste Rasterzeile -
   das Formular rueckt nach unten, die Vorschau daneben bleibt benutzbar. */
@media (max-width:1499.98px){
  .arbeitsraster.mit-rail.rail-offen .anforderungsrail{
    display:block;grid-column:1/-1;max-height:340px;
  }
}

/* --- Naechster Schritt --------------------------------------------------- */
.naechster-schritt{
  display:grid;grid-template-columns:38px 1fr auto;gap:14px;align-items:start;
  margin-bottom:18px;padding:17px 19px;
  border:1px solid var(--akzent-linie);border-radius:var(--rund-mittel);background:var(--flaeche-still);
}
.schritt-symbol{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--rund);
  color:var(--weiss);background:var(--akzent-dunkel);
}
.naechster-schritt small{
  display:block;margin-bottom:3px;color:var(--akzent-dunkel);
  font-size:var(--groesse-11);font-weight:800;letter-spacing:.11em;text-transform:uppercase;
}
.naechster-schritt strong{color:var(--dunkel);font-size:var(--groesse-14)}
.naechster-schritt p{margin:4px 0 0;color:var(--sekundaer);font-size:var(--groesse-12)}
.naechster-schritt .knoepfe{display:flex;gap:6px;margin-top:10px}
.naechster-schritt > button:last-child{
  align-self:start;border:0;color:var(--leise-lesbar);background:transparent;
  padding:2px 6px;border-radius:var(--rund-klein);font-size:var(--groesse-18);line-height:1;
}
.naechster-schritt > button:last-child:hover{color:var(--dunkel);background:var(--flaeche-tief)}

/* --- Abschnitte (fieldset/legend) ---------------------------------------- */
/* fieldset und legend bleiben als Elemente stehen - sie sind die richtige
   Auszeichnung fuer eine Gruppe von Feldern und werden von Vorlesegeraeten
   auch so gelesen. Ihr Aussehen ist hier vollstaendig neu gesetzt. */
fieldset{
  min-width:0;margin:0 0 18px;padding:24px;
  border:1px solid var(--linie);border-radius:var(--rund-gross);
  background:var(--flaeche);box-shadow:var(--schatten-karte);
}
legend{
  display:block;float:left;width:100%;margin:0 0 18px;padding:0;
  color:var(--dunkel);font-size:var(--groesse-16);font-weight:760;letter-spacing:-.025em;
}
legend + *{clear:both}
fieldset > .hinweis:first-of-type{margin-top:-10px;margin-bottom:14px}

.block{
  margin:9px 0;padding:12px;
  border:1px solid var(--linie-zart);border-radius:var(--rund);background:var(--flaeche-still);
}
.blockkopf{display:flex;gap:7px;align-items:center;margin-bottom:7px}
.blockkopf .nr{margin-right:auto;color:var(--leise-lesbar);font-size:var(--groesse-11);
               font-weight:650;letter-spacing:.06em;text-transform:uppercase}
.zaehler{margin-top:4px;color:var(--leise-lesbar);font-size:var(--groesse-11);text-align:right}

/* --- Statusreihe der Bewerbung ------------------------------------------- */
.statusreihe{display:flex;gap:6px;flex-wrap:wrap}
.statusreihe button{
  min-height:34px;padding:0 14px;border-radius:var(--rund-voll);
  border:1px solid var(--linie);color:var(--sekundaer);
  background:var(--flaeche-still);font-size:var(--groesse-13);font-weight:600;
}
.statusreihe button:hover{color:var(--dunkel);border-color:var(--linie-hover);background:var(--flaeche-tief)}
.statusreihe button.an{color:var(--weiss);border-color:var(--akzent-dunkel);
                       background:var(--akzent-dunkel)}
.verlauf{margin-top:14px;color:var(--sekundaer);font-size:var(--groesse-12)}
.verlauf div{padding:6px 0;border-top:1px solid var(--linie-zart)}

/* --- Anforderungen ------------------------------------------------------- */
.anforderungsliste{border-top:1px solid var(--linie-zart)}
.anforderung{
  display:grid;grid-template-columns:76px 1fr auto;gap:13px;align-items:start;
  padding:15px 0;border-bottom:1px solid var(--linie-zart);
}
.anforderung h3{margin:0;color:var(--dunkel);font-size:var(--groesse-13);font-weight:650}
.anforderung p{margin:5px 0 0;color:var(--sekundaer);font-size:var(--groesse-12)}
.anforderung .art{margin-top:6px;color:var(--leise-lesbar);font-size:var(--groesse-11);
                  letter-spacing:.06em;text-transform:uppercase}
.deckung{
  padding:5px 9px;border-radius:var(--rund-voll);text-align:center;
  font-size:var(--groesse-11);font-weight:800;letter-spacing:.02em;
}
.deckung.ja{color:var(--ok);background:var(--ok-hell)}
.deckung.teilweise{color:var(--warn);background:var(--warn-hell)}
.deckung.nein{color:var(--fehler);background:var(--fehler-hell)}
.deckung.offen{color:var(--sekundaer);background:var(--flaeche-tief)}

/* --- Anforderungsleiste neben dem Lebenslauf ----------------------------- */
/* Sie steht links vom Formular und laeuft beim Scrollen mit. Nur lesend:
   geaendert wird die Analyse im Reiter Stelle, sonst haette dieselbe Angabe
   zwei Bearbeitungswege. Ausserhalb des Lebenslauf-Reiters ist sie weg -
   siehe .mit-rail weiter unten. */
.anforderungsrail{display:none}
.rail-kopf{display:flex;justify-content:space-between;align-items:center;
           gap:9px;margin-bottom:11px}
.rail-kopf h2{
  margin:0;color:var(--sekundaer);font-size:var(--groesse-11);font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;
}
.rail-filter{display:flex;padding:3px;border-radius:var(--rund-klein);background:var(--flaeche-tief)}
.rail-filter button{
  min-height:25px;padding:0 8px;border:0;border-radius:var(--rund-klein);
  color:var(--sekundaer);background:transparent;font-size:var(--groesse-11);font-weight:650;
}
.rail-filter button.an{color:var(--akzent-dunkel);background:var(--flaeche);
                       box-shadow:0 1px 3px rgba(2,11,53,.09)}
.rail-summe{margin:0 0 4px;color:var(--sekundaer);font-size:var(--groesse-12);line-height:1.55}
.rail-anf{padding:11px 0;border-top:1px solid var(--linie)}
.rail-anf .zeile{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rail-anf .deckung{padding:3px 7px;font-size:var(--groesse-11)}
.rail-anf .art{color:var(--leise-lesbar);font-size:var(--groesse-11);letter-spacing:.06em;
               text-transform:uppercase}
.rail-anf h3{margin:0;color:var(--dunkel);font-size:var(--groesse-13);font-weight:650;
             line-height:1.42}
.rail-anf p{margin:5px 0 0;color:var(--sekundaer);font-size:var(--groesse-11);line-height:1.5}
.rail-leer{margin:0;color:var(--sekundaer);font-size:var(--groesse-12);line-height:1.55}
.rail-fuss{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--linie);
           color:var(--leise-lesbar);font-size:var(--groesse-11);line-height:1.5}
.rail-anf .rail-plus{margin-top:7px;font-size:var(--groesse-12)}

/* Das Formular fuer eine neue Kompetenz. Es klappt unter der Anforderung auf,
   aus der es entsteht - so bleibt sichtbar, wogegen der Beleg geschrieben
   wird. Die Felder sind schmaler als sonst; die Leiste ist 272 px breit. */
.rail-form{
  margin-top:9px;padding:11px 12px;
  border:1px solid var(--linie);border-radius:var(--rund);background:var(--flaeche);
}
.rail-form label{margin:9px 0 4px;font-size:var(--groesse-11)}
.rail-form label:first-child{margin-top:0}
.rail-form input[type=text],.rail-form select{height:34px;font-size:var(--groesse-13)}
.rail-form textarea{font-size:var(--groesse-13)}
.rail-form-fuss{display:flex;gap:7px;margin-top:11px}
.rail-form .sk-melden:empty{display:none}

/* --- Stationen und Kompetenzen ------------------------------------------- */
.station{margin:16px 0;padding-top:14px;border-top:1px solid var(--linie-zart)}
.station:first-of-type{border-top:none;padding-top:0}
.station h4{margin:0;font-size:var(--groesse-14);font-weight:700}
.haken{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 4px;
       align-items:center}
.haken label{display:flex;align-items:center;gap:7px;margin:0;
             color:var(--text);font-size:var(--groesse-12);font-weight:500;cursor:pointer}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--akzent)}
.marke{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--rund-voll);
  color:var(--akzent-dunkel);background:var(--akzent-hell2);
  font-size:var(--groesse-11);font-weight:700;letter-spacing:.04em;vertical-align:2px;
}
/* "noch nicht erklaert" an einer Richtung (v3.2): dieselbe Marke in Warnfarbe. */
.marke.warn{color:var(--warn);background:var(--warn-hell)}
/* Bausteine aus anderen Bewerbungen: klappt unter der Station auf, aus der
   heraus er geoeffnet wurde - so bleibt sichtbar, wohin uebernommen wird. */
.textknoepfe{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.baustein-raum{
  margin:9px 0;padding:12px;border:1px solid var(--akzent-hell2);
  border-left:3px solid var(--akzent);border-radius:var(--rund);
  background:var(--akzent-hell);
}
.bs-gruppe{padding:8px 0;border-top:1px solid var(--akzent-hell2)}
.bs-gruppe:first-of-type{border-top:none}
.bs-quelle{margin-bottom:5px;color:var(--sekundaer);font-size:var(--groesse-11);font-weight:650}
.bs-zeile{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;
          padding:5px 0;font-size:var(--groesse-13);line-height:1.5;color:var(--text)}
.bs-zeile small{display:block;color:var(--leise-lesbar);font-size:var(--groesse-11)}
.bs-zeile small.bs-warnung{margin-top:3px;color:var(--warn);font-weight:650}
.bs-sprachen{display:flex;align-items:center;gap:7px;margin:8px 0 0;
             color:var(--sekundaer);font-size:var(--groesse-12);font-weight:500}
.uz{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
    margin:7px 0}
/* Zeilen mit Griff bekommen eine dritte Spalte davor - der Griff ist das
   Draggable, damit Textauswahl im Feld nicht die Zeile mitzieht. */
.uz[data-zieh]{grid-template-columns:auto 1fr auto}
.uz .griff{color:var(--leise-lesbar);cursor:grab;font-size:var(--groesse-13);line-height:1;
           padding:4px 2px;user-select:none}
.uz .griff:active{cursor:grabbing}
.uz small{display:flex;align-items:center;gap:6px;white-space:nowrap;
          color:var(--sekundaer);font-size:var(--groesse-12);cursor:pointer}
.gruppe{display:flex;align-items:center;gap:9px;margin-top:18px}
input.gt-e{
  width:240px;height:34px;padding:0 9px;
  border:1px solid transparent;border-bottom:1px solid var(--linie-hover);
  border-radius:var(--rund-klein) 8px 0 0;background:transparent;
  font-size:var(--groesse-13);font-weight:650;
}
input.gt-e:hover{border-color:var(--linie);border-bottom-color:var(--linie-hover);
                 background:var(--flaeche-still)}
input.gt-e::placeholder{color:var(--leise-lesbar);font-weight:600}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chip{
  position:relative;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border:1px solid var(--linie);border-radius:var(--rund-voll);
  background:var(--flaeche);font-size:var(--groesse-13);cursor:pointer;user-select:none;
}
.chip:hover{border-color:var(--linie-hover)}
.chip.aus{opacity:.45;text-decoration:line-through}
.chip.vorne{color:var(--weiss);border-color:var(--akzent-dunkel);
            background:var(--akzent-dunkel);font-weight:650}
.chip.neu{border-style:dashed}
.chip [contenteditable]{outline:none;min-width:12px}
.chip-x{opacity:.5;font-weight:700;padding:0 2px}
.chip-x:hover{opacity:1;color:var(--fehler)}
/* Sichtbare Werkzeuge statt Geheimgesten: sie erscheinen beim Ueberfahren.
   Ein einfacher Klick auf die Kachel tut nichts Destruktives.

   Sie liegen UEBER der Kachel, nicht darin. Vorher machten sie die Kachel
   beim Ueberfahren um rund 66 px breiter - alle folgenden Kacheln rueckten
   zur Seite, eine volle Zeile brach neu um, und die Kachel, auf die man
   zielte, war nicht mehr dort, wo der Zeiger hinzeigte. Absolut gesetzt
   kostet die Leiste keinen Platz im Fluss und nichts springt mehr.
   Dasselbe Muster wie die Umbruch-Anfasser in der Vorschau. */
/* Ohne Luecke zur Kachel: die Leiste haengt am Hover der Kachel, und vier
   Pixel Nichts dazwischen reichen, damit sie verschwindet, waehrend der
   Zeiger auf dem Weg zu ihr ist. Der Abstand steckt deshalb als
   durchsichtiger Rand IM Kasten, nicht davor. */
.chip-w{
  position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  display:none;gap:2px;z-index:5;
  padding:3px 5px;border:1px solid var(--linie);border-bottom:4px solid transparent;
  border-radius:var(--rund-klein);background:var(--flaeche);
  background-clip:padding-box;box-shadow:0 4px 12px rgba(2,11,53,.13);
  white-space:nowrap;
}
.chip:hover .chip-w{display:inline-flex}
.chip-w b{padding:0 4px;border-radius:var(--rund-klein);color:var(--dunkel);font-size:var(--groesse-11);
          font-weight:400;opacity:.6;cursor:pointer}
.chip-w b:hover{opacity:1;background:rgba(2,11,53,.09)}

.blitz{animation:blitzen 1.3s ease-out}
@keyframes blitzen{0%,64%{background:var(--akzent-hell2)}100%{background:transparent}}

/* --- Umformulieren durch Claude ------------------------------------------ */
.mit-stab{position:relative}
.stab{
  position:absolute;right:10px;bottom:9px;
  min-height:26px;padding:0 10px;border-radius:var(--rund-voll);
  font-size:var(--groesse-12);background:var(--flaeche);opacity:.6;
}
.mit-stab:hover .stab,.stab:focus{opacity:1}
.stab[disabled]{display:none}
body.ohne-claude .stab{display:none}
/* Kandidat ohne Umformulieren-Freigabe: dieselben Knoepfe, anderer Grund. */
body.ohne-umformulieren .stab{display:none}
.menu{
  margin:9px 0;padding:12px;
  border:1px solid var(--akzent-linie);border-radius:var(--rund-mittel);background:var(--akzent-hell);
}
.menu-reihe{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.menu-unten{display:flex;gap:7px;align-items:center}
.menu-unten input{flex:1;height:36px}
.menu-unten select{width:auto;height:36px;padding:0 9px}
/* Die Modellwahl an den Modellknoepfen: kompakt wie das Menue-Select, damit
   sie neben dem Knopf steht statt unter ihm. */
.modellwahl{width:auto;height:36px;padding:0 9px;font-size:var(--groesse-13)}
.vorschlag{
  margin:8px 0;padding:13px 15px;
  border:1px solid var(--linie);border-radius:var(--rund-mittel);background:var(--flaeche);
}
.vorschlag .wodurch{margin-bottom:6px;color:var(--akzent-dunkel);
  font-size:var(--groesse-11);font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.vorschlag p{margin:0 0 9px;line-height:1.6}
.vorschlag .mangel{margin:0 0 9px;color:var(--warn);font-size:var(--groesse-12)}
.vorschlag .knoepfe{display:flex;gap:7px}
.verbrauch{margin-top:7px;color:var(--leise-lesbar);font-size:var(--groesse-12)}

/* --- Gestaltung ---------------------------------------------------------- */
.layout-auswahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.layoutkarte{
  padding:12px;border:1px solid var(--linie);border-radius:var(--rund-mittel);
  background:var(--flaeche);text-align:left;
}
.layoutkarte:hover{border-color:var(--linie-hover)}
.layoutkarte.an{border-color:var(--akzent);box-shadow:0 0 0 2px rgba(52,73,237,.09)}
.layoutkarte strong{display:block;margin-top:9px;font-size:var(--groesse-12)}
.layoutkarte small{display:block;margin-top:2px;color:var(--sekundaer);
                   font-size:var(--groesse-11);line-height:1.4}
.layout-mini{
  height:82px;display:flex;flex-direction:column;gap:5px;
  padding:13px 12px;border-radius:var(--rund-klein);background:var(--flaeche-tief);
}
.layout-mini i{display:block;height:6px;border-radius:2px;background:var(--linie-hover)}
.layout-mini i:first-child{width:55%;height:10px;background:var(--akzent)}
.layout-mini i:last-child{width:75%}
.layout-mini.zweispaltig{flex-direction:row;align-items:flex-start;gap:7px}
.layout-mini.zweispaltig i{width:34%;height:100%;border-radius:5px}
.layout-mini.zweispaltig i:first-child{width:34%;height:100%}
.layout-mini.zweispaltig i:last-child{width:auto;flex:1}
.layout-mini.kompakt{gap:3px;padding-top:10px}
.layout-mini.betont i:first-child{width:85%;background:var(--akzent-tief)}
.farben{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.farben label{margin-top:0}

/* Farbvorschlag der Vorlage. Die Tupfen tragen ihre Farbe als style-Attribut -
   das ist die schon bestehende Ausnahme von der Regel "Farben aus stil.css":
   sie kommen aus den Daten, nicht aus der Oberflaeche. */
.preset{margin-top:14px}
.preset button + button{margin-top:6px}
.preset button{
  display:flex;gap:8px;align-items:center;width:100%;
  padding:9px 12px;border:1px solid var(--linie);border-radius:var(--rund);
  background:var(--flaeche);font-size:var(--groesse-12);text-align:left;
}
.preset button:hover:not(:disabled){border-color:var(--akzent)}
.preset button:disabled{color:var(--leise-lesbar);background:var(--flaeche-tief)}
.preset i{width:13px;height:13px;border-radius:4px;flex-shrink:0;
          border:1px solid rgba(0,0,0,.13)}
.preset i:first-of-type{margin-left:auto}
.preset .hinweis{margin-top:7px}
/* Der Hinweis darunter ist der erste <p> des fieldsets und holt sich damit das
   negative margin-top, das ihn sonst an das Feld darueber heranzieht. Hinter
   dem Vorschlagsknopf wuerde er in dessen Text laufen. */
fieldset > .preset + .hinweis{margin-top:13px}

/* --- Vorschau ------------------------------------------------------------ */
/* Ein A4-Blatt ist 210 mm breit, in CSS-Pixeln knapp 794 - deutlich mehr, als
   die rechte Spalte hat. Vorher lief das Blatt deshalb rechts aus dem Rahmen:
   die Kontaktzeile war abgeschnitten, und was man sah, war ein Ausschnitt und
   nicht das Dokument. Jetzt steht das Blatt in seiner echten Breite im Rahmen
   und wird als Ganzes heruntergerechnet (`--vs-mass`, gesetzt vom Skript).
   Dieselbe Seite, nur kleiner - und damit im richtigen Verhaeltnis.

   --vs-hoehe  sichtbare Hoehe des Ausschnitts, kommt aus dem CSS
   --vs-blatt  Breite des Blattes plus Bildlaufleiste, gemessen im Skript
   --vs-mass   Verkleinerung, 1 ist Originalgroesse */
.vorschaukarte{
  --vs-hoehe:min(1180px,calc(100vh - 250px));
  --vs-blatt:794px;
  --vs-mass:1;
  position:sticky;top:96px;
  /* Ohne das drueckt das Blatt die Spalte auseinander (Rasterfelder sind von
     Haus aus mindestens so breit wie ihr Inhalt) - und weil der Massstab aus
     der Spaltenbreite kommt, waere das eine Katze, die ihren Schwanz jagt. */
  min-width:0;
  padding:15px;border:1px solid var(--linie);border-radius:var(--rund-gross);
  background:var(--flaeche-tief);box-shadow:0 18px 48px rgba(2,11,53,.10);
}
.vorschaukopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
              gap:10px;margin-bottom:12px}
.segment{display:flex;padding:4px;border-radius:var(--rund);background:var(--linie)}
.segment button{
  min-height:31px;padding:0 13px;border:0;border-radius:var(--rund-klein);
  color:var(--sekundaer);background:transparent;font-size:var(--groesse-12);font-weight:650;
}
.segment button.an{color:var(--akzent-dunkel);background:var(--flaeche);
                   box-shadow:0 1px 4px rgba(2,11,53,.09)}

.vorschauwerkzeug{display:flex;align-items:center;gap:6px}
.vorschauwerkzeug .iconknopf{width:31px;height:31px;border-radius:var(--rund-klein)}
.vorschauwerkzeug .iconknopf .sym{width:15px;height:15px}
.vs-mass{
  min-width:54px;min-height:31px;padding:0 9px;
  border:1px solid var(--linie);border-radius:var(--rund-klein);
  color:var(--sekundaer);background:var(--flaeche);
  font-size:var(--groesse-12);font-weight:650;font-variant-numeric:tabular-nums;
}
.vs-mass:hover{border-color:var(--linie-hover);color:var(--dunkel)}

/* Die Buehne ist der Ausschnitt, das Blatt darin traegt die verkleinerte
   Groesse. Das Blatt braucht eigene Masse, weil `transform` das Layout nicht
   anfasst - ohne es haette die Buehne auch bei halber Groesse noch die volle
   Blattbreite zu scrollen. */
.vorschau-buehne{
  overflow:auto;height:var(--vs-hoehe);border-radius:3px;min-width:0;
}
.vorschau-blatt{
  width:calc(var(--vs-blatt) * var(--vs-mass));height:var(--vs-hoehe);
  margin-inline:auto;
  border-radius:3px;background:var(--weiss);
  box-shadow:0 10px 30px rgba(2,11,53,.11);
}
#vorschau{
  display:block;border:0;background:var(--weiss);
  width:var(--vs-blatt);height:calc(var(--vs-hoehe) / var(--vs-mass));
  transform:scale(var(--vs-mass));transform-origin:top left;
}
/* Das gebaute PDF zeigt Chromium mit eigener Anzeige samt eigenem Zoom. Die
   fuellt den Rahmen einfach aus; herunterrechnen wuerde sie zweimal skalieren. */
.vorschaukarte.pdf-modus .vorschau-blatt{width:100%}
.vorschaukarte.pdf-modus #vorschau{
  width:100%;height:var(--vs-hoehe);transform:none;
}
.vorschaukarte.pdf-modus .vs-stufe,
.vorschaukarte.pdf-modus .vs-mass{display:none}

/* Vollbild: fuer den Blick aufs Ganze in Originalgroesse. Die Karte legt sich
   ueber die Arbeitsflaeche, alles darunter bleibt stehen - Escape schliesst. */
/* z-index unter der Verwaltung (100), der Meldung (120) und der Anmeldung
   (150): das Vollbild deckt die Arbeitsflaeche zu, nicht das, was daraufliegt. */
.vorschaukarte.vollbild{
  --vs-hoehe:calc(100vh - 128px);
  position:fixed;inset:0;z-index:90;
  width:auto;margin:0;                 /* schlaegt die Breite aus dem schmalen Fenster */
  border:0;border-radius:0;padding:16px 22px 12px;
  overflow:auto;
}
.vorschaukarte.vollbild .pruefzeile,
.vorschaukarte.vollbild #befunde{max-width:1000px;margin-inline:auto}

.vorschau-fuss{display:flex;justify-content:space-between;align-items:center;
               gap:10px;padding:13px 3px 1px;font-size:var(--groesse-12)}
.vorschau-fuss .stand-text{color:var(--sekundaer)}

/* Pruefzeile: eine Zeile statt eines Kastens. Aufgeklappt stehen die Befunde
   darunter - sie sind meist leer, und ein leerer Kasten kostete oben Platz,
   den die Vorschau besser braucht. */
.pruefzeile{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:11px;padding:11px 13px;
  border:1px solid var(--linie);border-radius:var(--rund);background:var(--flaeche);
  font-size:var(--groesse-12);
}
.pruefzeile .lage{display:flex;align-items:center;gap:8px;color:var(--text)}
.pruefzeile .siegel{
  width:19px;height:19px;display:grid;place-items:center;border-radius:50%;
  color:var(--weiss);background:var(--ok);font-size:var(--groesse-11);
}
.pruefzeile .siegel.warnung{background:var(--warn)}
.pruefzeile .siegel.fehler{background:var(--fehler)}
.pruefzeile button{border:0;background:transparent;color:var(--akzent-dunkel);
                   font-size:var(--groesse-12);font-weight:700}
#befunde{margin-top:9px;padding:4px 13px;border:1px solid var(--linie);
         border-radius:var(--rund);background:var(--flaeche)}
#befunde[hidden]{display:none}
.befund{display:flex;gap:9px;padding:9px 0;font-size:var(--groesse-13);
        border-bottom:1px solid var(--linie-zart);cursor:pointer}
.befund:last-child{border-bottom:none}
.befund .punkt{flex:0 0 8px;height:8px;margin-top:6px;border-radius:50%}
.befund.fehler .punkt{background:var(--fehler)}
.befund.warnung .punkt{background:var(--warn)}
.befund.ok .punkt{background:var(--ok)}
.befund code{display:block;margin-top:2px;color:var(--leise-lesbar);font-size:var(--groesse-11)}

/* --- Die Uebersicht (js/uebersicht.js) --------------------------------- */
.ue-kopf{display:flex;flex-wrap:wrap;gap:var(--abstand-3) var(--abstand-6);align-items:flex-end;
         justify-content:space-between;margin-bottom:var(--abstand-4)}
.ue-kopf h1{margin:0 0 4px;font-size:var(--groesse-28);letter-spacing:-.02em}
.ue-kopf .hinweis{margin:0;font-size:var(--groesse-14)}
.ue-kopf .hinweis b{color:var(--warn)}
.ue-filter{display:flex;flex-wrap:wrap;gap:var(--abstand-2);align-items:center}
.ue-filter input[type=search]{width:220px;height:38px}
.ue-filter select{width:auto;height:38px;padding-right:30px}
.ue-haken{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0 4px;
          color:var(--text);font-size:var(--groesse-13);font-weight:500;cursor:pointer;min-height:38px}
.ue-haken input{width:16px;height:16px;margin:0;accent-color:var(--akzent)}
.ue-leer{padding:40px 0;text-align:center}
/* Die Tabelle rollt bei Bedarf in sich - nie die Seite. */
.ue-tabelle{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--rund-mittel);background:var(--flaeche)}
.ue-tabelle table{width:100%;min-width:720px;border-collapse:collapse;font-size:var(--groesse-14)}
.ue-tabelle th{text-align:left;padding:10px 14px;border-bottom:1px solid var(--linie);
  font-size:var(--groesse-11);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--leise-lesbar);white-space:nowrap}
.ue-tabelle td{padding:10px 14px;border-bottom:1px solid var(--linie-zart);vertical-align:top}
.ue-tabelle tr:last-child td{border-bottom:0}
.ue-tabelle tbody tr{cursor:pointer}
.ue-tabelle tbody tr:hover{background:var(--flaeche-still)}
.ue-tabelle .zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ue-name{display:block;padding:0;margin:0;border:0;background:transparent;text-align:left;
         color:var(--dunkel);font-weight:650;font-size:var(--groesse-14)}
.ue-name:hover{color:var(--akzent-dunkel);text-decoration:underline}
.ue-tabelle td small{display:block;margin-top:2px;color:var(--leise-lesbar);font-size:var(--groesse-12);
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ue-tabelle .ue-termin{white-space:normal}
.ue-wartet{max-width:360px}
.ue-wartet b{color:var(--akzent-dunkel)}
.ue-wartet b.dringend{color:var(--warn)}
.ue-mehr{color:var(--leise-lesbar);font-size:var(--groesse-12)}
.ue-still{color:var(--leise-lesbar)}
.ue-zuletzt{white-space:nowrap;color:var(--sekundaer)}

/* --- Anmeldung ----------------------------------------------------------- */
/* Liegt ueber allem, solange keine gueltige Sitzung da ist. Die Daten dahinter
   sind trotzdem sicher - jede API-Route verlangt das Cookie. Das Fenster ist
   Komfort, die Kontrolle sitzt im Server. */
#anmeldung{
  position:fixed;inset:0;z-index:150;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(140deg,var(--akzent-tief),var(--akzent-tief) 60%,var(--akzent-dunkel));
}
/* Das hidden-Attribut wirkt ueber display:none - die Browser-Regel ist aber
   schwaecher als das display:flex eine Zeile hoeher. Diese Regel gibt hidden
   seine Wirkung zurueck. */
#anmeldung[hidden]{display:none}
#anmeldung form{
  width:340px;padding:32px;border-radius:var(--rund-gross);
  background:var(--flaeche);box-shadow:0 30px 80px rgba(2,11,53,.4);
}
#anmeldung .markenlogo{max-width:170px;margin-bottom:22px}
#anmeldung button{width:100%;margin-top:20px}
#anm-fehler{min-height:1.2em;margin-top:9px;color:var(--fehler);font-size:var(--groesse-12)}

/* --- Verwaltung ---------------------------------------------------------- */
#verwaltung{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:flex-start;justify-content:center;
  padding:38px 16px;overflow:auto;background:rgba(2,11,53,.45);
  backdrop-filter:blur(3px);
}
#verwaltung[hidden]{display:none}
.vw-karte{
  width:min(760px,100%);border-radius:var(--rund-gross);
  padding:0 26px 26px;background:var(--flaeche);
  box-shadow:0 30px 80px rgba(2,11,53,.3);
}
.vw-kopf{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;gap:12px;
  padding:22px 0 14px;border-bottom:1px solid var(--linie);
  background:var(--flaeche);
}
.vw-kopf h2{margin:0;font-size:var(--groesse-18);font-weight:760;letter-spacing:-.025em}
.vw-kopf .wer{color:var(--sekundaer);font-size:var(--groesse-12)}
.vw-kopf button{margin-left:auto}
.vw-reiter{display:flex;flex-wrap:wrap;gap:4px;margin-top:16px}
.vw-reiter button{
  min-height:32px;padding:0 12px;border:1px solid var(--linie);border-radius:var(--rund-klein);
  color:var(--sekundaer);background:var(--flaeche);font-size:var(--groesse-13);font-weight:600;
}
.vw-reiter button:hover{color:var(--dunkel);background:var(--flaeche-still)}
.vw-reiter button.an{color:var(--weiss);border-color:var(--akzent-dunkel);
                     background:var(--akzent-dunkel)}
.vw-teil{padding-top:6px}
.vw-feld2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.vw-hinweis{margin:10px 0 16px;color:var(--sekundaer);font-size:var(--groesse-13);line-height:1.6}
.vw-melden{display:none;margin-top:14px;padding:11px 14px;border-radius:var(--rund);
           font-size:var(--groesse-13)}
.vw-melden.gut{display:block;color:var(--ok);background:var(--ok-hell);
               border:1px solid var(--ok-linie)}
.vw-melden.schlecht{display:block;color:var(--fehler);background:var(--fehler-hell);
                    border:1px solid var(--fehler-linie)}
/* Das Transkript des Setup-Gespraechs in der Akte (Auftrag 08): so, wie es
   an Prompt 01 geht - Markdown als Text, umbrechend, nichts gerendert. */
.transkript{margin-top:14px;padding:14px 16px;max-height:60vh;overflow:auto;
            border:1px solid var(--linie);border-radius:var(--rund);
            background:var(--flaeche-still);white-space:pre-wrap;
            font-size:var(--groesse-13);line-height:1.6}
/* Die drei Schritt-Haken der Auswertung (v3.1) in einer Zeile mit dem Knopf. */
.haken-inline{display:inline-flex;align-items:center;gap:6px;margin:0;
              font-size:var(--groesse-13);font-weight:600;cursor:pointer;
              text-transform:none;letter-spacing:0}
/* Faellig-Liste */
/* Die Filterzeile darueber: reine Ansicht, nichts wird gespeichert. */
.fa-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.fa-filter label{margin:0;flex:0 0 auto}
.fa-filter select{width:auto;height:34px;font-size:var(--groesse-13)}
.fa-filter[hidden]{display:none}
.fa-zeile{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin:9px 0;padding:13px 15px;
  border:1px solid var(--linie);border-radius:var(--rund-mittel);background:var(--flaeche);
}
.fa-zeile.dringend{border-color:var(--warn-linie);background:var(--warn-hell)}
.fa-zeile .kand{font-weight:650}
.fa-zeile .txt{color:var(--sekundaer);font-size:var(--groesse-13)}
.fa-zeile .knoepfe{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
/* Die Coach-Sicht (v3.6): je Kandidat eine Zeile, die Aenderungen seit dem
   Tag als Marken darunter. */
.sg-marken{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;font-size:var(--groesse-12);color:var(--sekundaer)}
.sg-marke{background:var(--flaeche-tief);border-radius:var(--rund-voll);padding:2px 9px}
.sg-marke.neu{background:var(--ok-hell);color:var(--ok)}
.sl-kasten{
  margin-bottom:14px;padding:13px 15px;border-radius:var(--rund-mittel);font-size:var(--groesse-13);
  border:1px solid var(--akzent-linie);background:var(--akzent-hell);
}
.sl-kasten.ruht{border-color:var(--linie);background:var(--flaeche-still)}
.sl-kasten b{display:block;margin-bottom:4px}
.sl-meldung{margin-top:7px;padding-left:11px;border-left:2px solid var(--akzent-linie);
            color:var(--text)}
.sl-meldung.schlecht{border-left-color:var(--fehler-linie);color:var(--fehler)}
.sl-punkt{display:inline-block;width:8px;height:8px;margin-right:7px;
          border-radius:50%;background:var(--akzent);animation:pulsen 1.2s infinite}
.fa-wahl{flex:0 0 auto}

/* --- Fruehere Staende ----------------------------------------------------- */
/* Das Bedienelement zum Sicherheitsnetz _versionen/ (js/versionen.js) -
   zurueckhaltend, zugeklappt, an vier Orten mit derselben Optik. */
.versionen{margin-top:14px;border:1px solid var(--linie);border-radius:var(--rund);
           background:var(--flaeche-still)}
.versionen summary{padding:11px 14px;color:var(--sekundaer);cursor:pointer;
                   font-size:var(--groesse-13);font-weight:650}
.versionen summary:hover{color:var(--dunkel)}
.versionen[open] summary{color:var(--dunkel);
                         border-bottom:1px solid var(--linie-zart)}
.versionen-liste{padding:2px 14px 10px}
.version-zeile{display:flex;gap:12px;align-items:center;justify-content:space-between;
               padding:9px 0;border-top:1px solid var(--linie-zart);font-size:var(--groesse-13)}
.version-zeile:first-child{border-top:0}
.version-zeile b{font-weight:650;font-variant-numeric:tabular-nums}

/* Kosten */
.ko-gross{font-size:var(--groesse-32);font-weight:780;letter-spacing:-.035em}
.ko-neben{margin-top:4px;color:var(--sekundaer);font-size:var(--groesse-13)}
.ko-tab{width:100%;border-collapse:collapse;margin-top:18px;font-size:var(--groesse-13)}
.ko-tab th{
  padding:0 9px 8px 0;border-bottom:1px solid var(--linie);text-align:left;
  color:var(--leise-lesbar);font-size:var(--groesse-11);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;
}
.ko-tab td{padding:9px 9px 9px 0;border-bottom:1px solid var(--linie-zart)}
.ko-tab td.zahl,.ko-tab th.zahl{text-align:right}
/* Differenzbericht (Verwaltung → Auswertung). Einzelfaelle stehen leiser da:
   erst die Wiederholung ueber Bewerbungen hinweg macht eine Wendung zur Regel. */
.st-gruppe{margin:18px 0 6px}
.st-zahlen{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
.st-zahlen div{flex:1 1 110px;padding:10px 12px;border-radius:var(--rund);
               background:var(--flaeche-still);border:1px solid var(--linie-zart)}
.st-zahlen b{display:block;font-size:var(--groesse-20);letter-spacing:-.02em;color:var(--dunkel)}
.st-zahlen span{color:var(--sekundaer);font-size:var(--groesse-12)}
.st-tab{margin-top:4px}
.st-tab td{padding:6px 9px 6px 0}
.st-tab td:first-child{width:74%}
.st-tab s{color:var(--leise-lesbar)}
.st-tab tr.st-einzeln td{color:var(--leise-lesbar)}
.st-regeln-kopf{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
.st-regeln{margin-top:10px;padding:12px;border:1px solid var(--akzent-hell2);
           border-left:3px solid var(--akzent);border-radius:var(--rund);background:var(--akzent-hell)}
.st-regel{padding:8px 0;border-top:1px solid var(--akzent-hell2)}
.st-regel p{margin:4px 0}
.st-regel .marke{margin-left:0;margin-right:8px}
.st-regel .marke.st-stark{color:var(--ok);background:var(--ok-hell)}
.st-regel .marke.st-schwach{color:var(--sekundaer);background:var(--flaeche-tief)}
/* Sortierbare Spaltenkoepfe: der Knopf erbt die Kopf-Optik, damit die
   Tabelle aussieht wie vorher - nur eben klickbar, mit sichtbarem Pfeil. */
.ko-sort{border:0;padding:0;background:transparent;cursor:pointer;
         color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.ko-sort:hover{color:var(--dunkel)}
.ko-sort .pfeil{margin-left:4px;font-size:var(--groesse-11);vertical-align:1px}

/* --- Kandidatenakte ------------------------------------------------------ */
/* Die Akte liegt im Hauptbereich und uebernimmt dessen Scrollflaeche - sie
   ist eine Ansicht neben Leerzustand und Werkraum, kein Fenster darueber.
   Ihre Reiter sind dieselben wie im Werkraum (.bereichsreiter); nur der
   Abstand nach oben entfaellt, den macht schon der Kopfblock. */
#akte .kopfblock{padding-bottom:20px}
#akte .bereichsreiter{margin-top:0}
/* Formulare lesen sich in voller Breite des Arbeitsbereichs schlecht - die
   Teile behalten ungefaehr die Breite des frueheren Fensters. */
.ak-teil{width:min(880px,100%);padding-top:22px}
#ak-melden{width:min(880px,100%)}

/* Breadcrumb: der Kandidat ist klickbar und fuehrt zurueck in die Akte -
   der Rueckweg aus dem Werkraum, ohne die Seitenleiste zu bemuehen. */
.pfad .pfad-glied{
  padding:6px 11px;border:0;border-radius:var(--rund-voll);
  color:var(--akzent-dunkel);background:var(--flaeche-tief);
  font-size:var(--groesse-12);font-weight:650;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pfad .pfad-glied:hover{background:var(--akzent-hell)}

/* --- Schmalere Fenster --------------------------------------------------- */
@media (max-width:1240px){
  .arbeitsraster{grid-template-columns:minmax(420px,1fr) minmax(320px,400px)}
  #arbeitsbereich{padding-inline:24px}
  /* Der Speicherstatus schrumpft auf seinen Punkt, statt zu verschwinden -
     der Text bleibt fuer Vorlesegeraete im Dokument und haengt fuer alle
     anderen am title (gesetzt in js/meldung.js). */
  .speicherstatus span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .speicherstatus i{margin-right:0}
}
@media (max-width:1040px){
  .app-schale{grid-template-columns:224px minmax(0,1fr)}
  .arbeitsraster{grid-template-columns:1fr}
  .vorschaukarte{position:static;width:min(620px,100%);margin-inline:auto;
                 --vs-hoehe:min(1180px,86vh)}
  .kopfblock{align-items:flex-start}
}
@media (max-width:820px){
  .app-schale{display:block}
  .nur-schmal{display:inline-grid}
  .seitenleiste{
    position:fixed;left:0;top:0;width:min(310px,86vw);
    transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:16px 0 60px rgba(2,11,53,.3);
  }
  .seitenleiste.offen{transform:translateX(0)}
  .leisten-schatten{position:fixed;inset:0;z-index:25;border:0;
                    background:rgba(2,11,53,.45)}
  /* Drei Knoepfe und der Pfad passen auf dem Telefon nicht in eine Zeile -
     dann rutschen die Knoepfe in eine zweite, statt ueber den Rand zu laufen. */
  .kopfleiste{height:auto;min-height:62px;flex-wrap:wrap;padding:10px 16px;gap:8px 10px}
  .pfad{flex:1 1 auto}
  .kopfaktionen{margin-left:auto}
  .pfad span,.pfad i{display:none}
  /* Auf dem Telefon nur der Kandidat im Pfad - er ist der Rueckweg in die
     Akte. Die Firma steht ohnehin gross im Kopfblock, und zwei auf "Dem..."
     und "Beisp..." gekuerzte Pillen sagten nichts mehr. */
  .pfad .pfad-glied ~ strong{display:none}
  .kopfaktionen{gap:6px}
  .kopfaktionen .knopf,.kopfaktionen .haupt{min-height:36px;padding:0 11px;font-size:var(--groesse-13)}
  #arbeitsbereich{padding:22px 16px 50px}
  .kopfblock{display:block}
  .kopfdaten{margin-top:20px}
  .schritte{grid-template-columns:1fr 1fr;gap:6px}
  .anforderung .selbst{justify-content:flex-start}
  .bereichsreiter{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .bereichsreiter button{flex:0 0 auto}
  .arbeitsraster{padding-top:16px}
  fieldset{padding:18px}
  .zwei,.vw-feld2,.farben,.layout-auswahl{grid-template-columns:1fr}
  .anforderung{grid-template-columns:70px 1fr}
  .anforderung > button{grid-column:2;justify-self:start;padding:0}
  .meldungen{right:14px;left:14px;bottom:14px;align-items:stretch}
  .meldung{right:14px;left:14px;bottom:14px;max-width:none}
}

/* Der Werkraum ohne Stelle (v3.16, entscheidungen/0014): der Grundlebenslauf
   einer Jobrichtung. Was an einer Bewerbung haengt, verschwindet - die
   Reiter Stelle und Anschreiben, die Schrittleiste, der Bau, das Anschreiben
   in der Vorschau, die Bausteine aus anderen Bewerbungen, das Heben einer
   Station ins Profil und die KI-Knoepfe am Text (Umformulieren braucht eine
   Bewerbung). Die Sperren dahinter sitzen im Server; hier verschwindet nur,
   was ins Leere fuehrte. */
body.grundlage #reiter-stelle,body.grundlage #reiter-anschreiben,body.grundlage #schrittleiste,
body.grundlage #naechster,body.grundlage #btn-bauen,body.grundlage [data-pdf="anschreiben"],
body.grundlage [data-bs-oeffnen],body.grundlage [data-insprofil],body.grundlage .stab,
body.grundlage #pdf-link{display:none}
body.grundlage .arbeitsraster{grid-template-columns:minmax(460px,1fr) minmax(400px,min(780px,48%))}
#grund-sprache{font:inherit;font-size:var(--groesse-13);font-weight:600;color:var(--dunkel);
  border:0;background:transparent;padding:0;max-width:140px}