/* ═══════════════════════════════════════════════════════════
   Stellenmodul: Stil der internen Seiten (Anmeldung, Baukasten,
   Bewerbungseingang). Kundenneutral, hell, ruhig.

   Die Marke kommt ueber CSS-Variablen aus kunde.json
   ("design.vars", Praefix --m-). Fehlt ein Wert, gilt der
   Standard hier. Die oeffentlichen Seiten (Stellenliste,
   Anzeigen) nutzen diese Datei NICHT, sie tragen das Design
   der Kundenwebsite in den Vorlagen.
   ═══════════════════════════════════════════════════════════ */
:root{
  --m-schrift:system-ui,-apple-system,'Segoe UI',sans-serif;
  --m-akzent:#1f6feb;        /* Markenfarbe: Knoepfe, Haken, aktive Zustaende */
  --m-akzent-d:#174f9e;      /* dunklere Stufe fuer Hover */
  --m-akzent-hell:#e8f0fd;   /* zarte Flaeche hinter aktiven Zeilen */
  --m-dunkel:#111111;        /* Kopfzeilen, Hauptknopf */
  --m-grund:#f4f4f2;         /* Seitenhintergrund */
  --m-grund-2:#ebebe8;
  --m-weiss:#ffffff;
  --m-ink:#111111;
  --m-ink-2:#444444;
  --m-ink-3:#808080;
  --m-line:rgba(0,0,0,.12);
  --m-ok:#2e8b57;
  --m-warn:#d9640f;
  --m-rot:#d1202c;
  --m-r:6px;
  --m-r-l:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--m-schrift);font-size:16px;line-height:1.5;color:var(--m-ink);background:var(--m-grund)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--m-akzent);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--m-dunkel);color:#fff;padding:.85rem 1.4rem}
.skip:focus{left:0}

/* ── Knoepfe und Links ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--m-dunkel);color:#fff;padding:.85rem 1.5rem;border:0;border-radius:100px;
  cursor:pointer;font-weight:650;font-size:.93rem;line-height:1;text-decoration:none;
  transition:background .2s,transform .15s,box-shadow .2s;white-space:nowrap;
}
.btn:hover{background:#000;box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.btn:active{transform:scale(.97)}
.btn--acc{background:var(--m-akzent);color:#fff}
.btn--acc:hover{background:var(--m-akzent-d)}
.btn--pri{background:var(--m-dunkel)}
.btn--full{width:100%}
.btn[disabled]{opacity:.55;cursor:wait}
.lnk{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:650;color:var(--m-ink);
  text-decoration:none;border:0;background:none;padding:0 0 .2rem;cursor:pointer;
  border-bottom:2px solid var(--m-akzent);font-size:.9rem;
}
.lnk:hover{color:var(--m-akzent-d)}
.kicker{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--m-akzent-d);margin:0 0 .9rem}

/* ── Formulare ── */
.frm__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.frm__f{margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.frm__f label{font-size:.79rem;font-weight:650;color:var(--m-ink-2);letter-spacing:.02em}
.frm__f input,.frm__f select,.frm__f textarea{
  color:var(--m-ink);background:var(--m-weiss);border:1.5px solid var(--m-line);border-radius:var(--m-r);
  padding:.8rem 1rem;font-size:.95rem;width:100%;
}
.frm__f input:focus,.frm__f select:focus,.frm__f textarea:focus{border-color:var(--m-akzent);outline:none}
.frm__chk{display:flex;gap:.75rem;align-items:flex-start;margin:.6rem 0 1.4rem;font-size:.85rem;color:var(--m-ink-2);line-height:1.5;cursor:pointer}
.frm__chk input{margin-top:.22rem;width:18px;height:18px;accent-color:var(--m-akzent);flex:none}
.frm__stat{font-size:.88rem;font-weight:600;margin:1rem 0 0;min-height:1.2em}
.frm__stat.ok,.anmeld__stat.ok{color:var(--m-ok)}
.frm__stat.err,.anmeld__stat.err{color:var(--m-rot)}
@media(max-width:560px){.frm__row{grid-template-columns:1fr}}

/* ── Anmeldung ── */
.anmeld{min-height:100vh;display:grid;place-items:center;padding:2rem 1rem}
.anmeld__box{width:min(100%,460px);background:var(--m-weiss);border:1px solid var(--m-line);
  border-radius:var(--m-r-l);padding:clamp(1.6rem,4vw,2.6rem);box-shadow:0 30px 60px -40px rgba(0,0,0,.3)}
.anmeld__logo{display:block;margin:0 0 1.6rem}
.anmeld__logo img{max-width:160px;max-height:48px;height:auto;display:block}
.anmeld__h1{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;margin:0 0 .5rem;line-height:1.1}
.anmeld__lead{color:var(--m-ink-2);font-size:.95rem;margin:0 0 1.6rem}
.anmeld__merken{margin:0 0 1.2rem}
.anmeld__stat{font-size:.86rem;margin:.9rem 0 0;min-height:1px}
.anmeld__hilfe{margin:1.2rem 0 0;font-size:.86rem;color:var(--m-ink-3)}
.anmeld__zurueck{margin:.9rem 0 0;font-size:.86rem}
.anmeld__fertig[hidden]{display:none}
.anmeld__fuss{margin:1.6rem 0 0;font-size:.78rem;color:var(--m-ink-3);text-align:center}

/* ── Baukasten ── */
.bk-body{background:var(--m-grund);min-height:100vh;display:flex;flex-direction:column}
@media(min-width:1001px){.bk-body{height:100vh;overflow:hidden}}
.bk-top{
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding:.8rem clamp(1rem,3vw,2rem);background:var(--m-weiss);border-bottom:1px solid var(--m-line);
  position:sticky;top:0;z-index:20;
}
.bk-logo img{max-width:140px;max-height:40px;height:auto;display:block}
.bk-titel{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:12rem}
.bk-titel b{font-size:1rem;font-weight:750;letter-spacing:-.02em}
.bk-titel span{font-size:.78rem;color:var(--m-ink-3)}
.bk-mit{display:flex;flex-direction:column;gap:.15rem;font-size:.76rem;color:var(--m-ink-3)}
.bk-mit label{display:flex;align-items:center;gap:.35rem;cursor:pointer;white-space:nowrap}
.bk-mit input{accent-color:var(--m-akzent);cursor:pointer}
.bk-abmelden{flex:none;font-size:.82rem;font-weight:650;color:var(--m-ink-3);text-decoration:none;border-bottom:1px solid var(--m-line);padding-bottom:2px}
.bk-abmelden:hover{color:var(--m-ink)}

.bk-main{flex:1;display:grid;grid-template-columns:minmax(400px,1fr) 1.15fr;gap:0;min-height:0}
.bk-panel{padding:clamp(1.2rem,2.5vw,2rem);overflow-y:auto;background:var(--m-grund);border-right:1px solid var(--m-line)}

.bk-step{display:flex;align-items:baseline;gap:.75rem;margin:2rem 0 1rem;flex-wrap:wrap}
.bk-step:first-child{margin-top:0}
.bk-num{width:1.6rem;height:1.6rem;border-radius:50%;background:var(--m-dunkel);color:#fff;flex:none;
  display:grid;place-items:center;font-size:.8rem;font-weight:750}
.bk-step h2{font-size:1.1rem;font-weight:750;letter-spacing:-.02em;margin:0}
.bk-step p{width:100%;margin:.2rem 0 0 2.35rem;font-size:.85rem;color:var(--m-ink-3);line-height:1.5}
.bk-step code{background:rgba(0,0,0,.07);border-radius:4px;padding:.12em .38em;font:600 .88em/1 ui-monospace,Menlo,monospace}

.bk-felder{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.bk-felder label{display:flex;flex-direction:column;gap:.35rem;font-size:.79rem;font-weight:650;color:var(--m-ink-2)}
.bk-felder .bk-voll{grid-column:1/-1}
.bk-felder select,.bk-felder input{background:var(--m-weiss);border:1.5px solid var(--m-line);border-radius:var(--m-r);
  padding:.65rem .8rem;font-size:.92rem;font-weight:400;color:var(--m-ink)}
.bk-felder select:focus,.bk-felder input:focus{border-color:var(--m-akzent);outline:none}

.bk-check{display:flex;flex-direction:column;gap:.4rem}
.bk-pruef{display:flex;align-items:center;gap:.6rem;font-size:.85rem;padding:.55rem .8rem;border-radius:var(--m-r)}
.bk-pruef span{width:1.15rem;height:1.15rem;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;flex:none}
.bk-pruef.is-ok{background:rgba(46,139,87,.1);color:var(--m-ok)}
.bk-pruef.is-ok span{background:var(--m-ok);color:#fff}
.bk-pruef.is-warn{background:rgba(217,100,15,.1);color:var(--m-warn)}
.bk-pruef.is-warn span{background:var(--m-warn);color:#fff}

.bk-vorschau{display:flex;flex-direction:column;background:var(--m-grund-2);min-height:0}
.bk-vorschau__bar{display:flex;align-items:center;gap:.45rem;padding:.7rem 1rem;background:var(--m-dunkel);flex:none}
.bk-dot{width:.6rem;height:.6rem;border-radius:50%;background:rgba(255,255,255,.22)}
.bk-url{margin-left:.8rem;font-size:.76rem;color:rgba(255,255,255,.6);background:rgba(255,255,255,.07);
  padding:.28rem .8rem;border-radius:100px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bkFrame{flex:1;width:100%;border:0;background:#fff;min-height:0}

@media(max-width:1000px){
  .bk-main{grid-template-columns:1fr}
  .bk-panel{border-right:0;border-bottom:1px solid var(--m-line)}
  .bk-vorschau{min-height:70vh}
  #bkFrame{min-height:70vh}
}
@media(max-width:560px){.bk-felder{grid-template-columns:1fr}}

/* Auswahllisten */
.bk-wahl{display:flex;flex-direction:column;gap:.3rem}
.bk-w{display:flex;align-items:flex-start;gap:.7rem;background:var(--m-weiss);border:1.5px solid var(--m-line);
  border-radius:var(--m-r);padding:.65rem .8rem;cursor:pointer;transition:border-color .2s,opacity .2s}
.bk-w:hover{border-color:var(--m-akzent)}
.bk-w.is-aus{opacity:.45}
.bk-w input{width:17px;height:17px;accent-color:var(--m-akzent);cursor:pointer;flex:none;margin-top:.16rem}
.bk-w__txt{flex:1;font-size:.87rem;line-height:1.5;color:var(--m-ink-2);border-radius:3px;outline:none;cursor:text}
.bk-w__txt:focus{background:var(--m-akzent-hell);box-shadow:0 0 0 3px var(--m-akzent-hell)}
.bk-w.is-aus .bk-w__txt{text-decoration:line-through;text-decoration-color:var(--m-ink-3)}
.bk-w__griff{flex:none;border:0;background:none;padding:0 .15rem;margin:-.05rem 0 0 -.3rem;font-size:1.05rem;line-height:1.4;
  color:var(--m-ink-3);cursor:grab;touch-action:none;user-select:none;border-radius:3px}
.bk-w__griff:hover,.bk-w__griff:focus-visible{color:var(--m-akzent)}
.bk-w.is-zieht{border-color:var(--m-akzent);box-shadow:0 6px 18px rgba(0,0,0,.14);opacity:1;position:relative;z-index:1}
.bk-w.is-zieht .bk-w__griff{cursor:grabbing}

.bk-neu{display:flex;gap:.5rem;margin-top:.6rem}
.bk-neu input{flex:1;background:var(--m-weiss);border:1.5px dashed var(--m-line);border-radius:var(--m-r);padding:.6rem .8rem;font-size:.87rem}
.bk-neu input:focus{border-color:var(--m-akzent);border-style:solid;outline:none}
.bk-plus{flex:none;background:var(--m-dunkel);color:#fff;border:0;border-radius:var(--m-r);padding:.6rem 1rem;font-size:.82rem;font-weight:650;cursor:pointer}
.bk-plus:hover{background:#000}

.bk-radio{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.bk-radio label{display:flex;align-items:center;gap:.6rem;background:var(--m-weiss);border:1.5px solid var(--m-line);border-radius:var(--m-r);
  padding:.65rem .8rem;cursor:pointer;font-size:.87rem;font-weight:600;color:var(--m-ink-2)}
.bk-radio label:has(input:checked){border-color:var(--m-akzent);background:var(--m-akzent-hell);color:var(--m-ink)}
.bk-radio input{width:16px;height:16px;accent-color:var(--m-akzent);cursor:pointer;flex:none}
.bk-gehalt{margin-top:.6rem;grid-template-columns:1fr 1fr 1fr}
.bk-gehalt[hidden],.bk-gehalt label[hidden]{display:none}

.bk-social{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.bk-social textarea,.bk-text{width:100%;background:var(--m-weiss);border:1.5px solid var(--m-line);border-radius:var(--m-r);
  padding:.8rem .9rem;font-size:.88rem;line-height:1.6;color:var(--m-ink-2);resize:vertical}
.bk-text{color:var(--m-ink);font-size:.92rem}
.bk-text--klein{font-size:.85rem;color:var(--m-ink-2)}
.bk-social textarea:focus,.bk-text:focus{border-color:var(--m-akzent);outline:none}
@media(max-width:560px){.bk-radio,.bk-gehalt{grid-template-columns:1fr}}

.bk-karussell{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:.9rem}
.bk-karussell figure{margin:0;display:flex;flex-direction:column;gap:.4rem}
.bk-karussell img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--m-dunkel);border:1px solid var(--m-line);border-radius:var(--m-r)}
.bk-karussell figcaption{font-size:.72rem;color:var(--m-ink-3);font-weight:650;letter-spacing:.04em}
@media(max-width:520px){.bk-karussell{grid-template-columns:1fr}}

.bk-modus{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:0 0 2rem;padding-bottom:1.6rem;border-bottom:1px solid var(--m-line)}
.bk-modus__b{display:flex;flex-direction:column;gap:.15rem;text-align:left;cursor:pointer;background:var(--m-weiss);
  border:1.5px solid var(--m-line);border-radius:var(--m-r);padding:.85rem .95rem;color:var(--m-ink-3);transition:.16s}
.bk-modus__b b{font-size:.98rem;font-weight:750;letter-spacing:-.02em;color:var(--m-ink-2)}
.bk-modus__b span{font-size:.78rem;line-height:1.4}
.bk-modus__b:hover{border-color:var(--m-akzent)}
.bk-modus__b.is-an{background:var(--m-dunkel);border-color:var(--m-dunkel);color:rgba(255,255,255,.72)}
.bk-modus__b.is-an b{color:#fff}
.bk-modus__b[disabled]{opacity:.45;cursor:not-allowed}
@media(max-width:560px){.bk-modus{grid-template-columns:1fr}}

.bk-bild{display:flex;flex-direction:column;gap:.9rem}
.bk-datei{align-self:flex-start;cursor:pointer}
.bk-datei input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bk-datei span{display:inline-block;background:var(--m-dunkel);color:#fff;border-radius:var(--m-r);padding:.62rem 1.1rem;font-size:.88rem;font-weight:650}
.bk-bild__vor img{width:100%;max-height:260px;object-fit:cover;display:block;border:1px solid var(--m-line);border-radius:var(--m-r);background:var(--m-dunkel)}
.bk-bild__vor p{margin:.5rem 0 0;font-size:.8rem;color:var(--m-ink-3)}

.bk-bearb{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  background:#fff7e6;border:1.5px solid #f0b429;border-radius:var(--m-r);padding:.8rem 1rem;margin:0 0 1rem}
.bk-bearb[hidden]{display:none}
.bk-bearb p{margin:0;font-size:.88rem;line-height:1.45}
.bk-bearb span{font-size:.8rem;color:var(--m-ink-3)}
.bk-bearb .lnk{flex:none;font-size:.82rem;white-space:nowrap}

/* Verwalten-Dialog */
.vw{border:1px solid var(--m-line);border-radius:var(--m-r-l);padding:0;max-width:44rem;width:92vw;background:var(--m-weiss);color:var(--m-ink)}
.vw::backdrop{background:rgba(0,0,0,.45)}
.vw__kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.4rem .8rem;border-bottom:1px solid var(--m-line)}
.vw__kopf b{font-size:1.08rem;font-weight:750}
.vw__zu{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--m-ink-3);cursor:pointer;padding:0 .2rem}
.vw__zu:hover{color:var(--m-ink)}
.vw__hinweis{margin:0;padding:.8rem 1.4rem 0;font-size:.82rem;color:var(--m-ink-3)}
.vw__body{padding:.6rem 1.4rem 1.4rem;max-height:62vh;overflow-y:auto}
.vw__leer{color:var(--m-ink-3);font-size:.9rem;padding:1rem 0}
.vw h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--m-akzent-d);font-weight:750;margin:1.2rem 0 .5rem}
.vw h4:first-child{margin-top:.6rem}
.vw__z{display:flex;align-items:center;gap:.9rem;padding:.6rem 0;border-bottom:1px solid var(--m-line)}
.vw__z:last-child{border-bottom:0}
.vw__z div{flex:1;min-width:0}
.vw__z a{display:block;font-size:.94rem;font-weight:650;color:var(--m-ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw__z a:hover{text-decoration:underline}
.vw__z span{font-size:.78rem;color:var(--m-ink-3)}
.vw__b,.vw__x{flex:none;width:2rem;height:2rem;border:1px solid var(--m-line);border-radius:var(--m-r);background:var(--m-weiss);
  font-size:1.05rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s}
.vw__b{color:var(--m-ink)}
.vw__b:hover{background:var(--m-dunkel);border-color:var(--m-dunkel);color:#fff}
.vw__x{color:var(--m-rot)}
.vw__x:hover{background:var(--m-rot);border-color:var(--m-rot);color:#fff}
.vw__b[disabled],.vw__x[disabled]{opacity:.4;cursor:wait}

/* Kennwort-Dialog */
.kw{border:1px solid var(--m-line);border-radius:var(--m-r-l);padding:1.6rem;max-width:24rem;background:var(--m-weiss)}
.kw form{display:grid;gap:.8rem}
.kw label{display:grid;gap:.25rem;font-size:.85rem}
.kw input{border:1.5px solid var(--m-line);border-radius:var(--m-r);padding:.6rem .8rem}
.kw__akt{display:flex;gap:.6rem;justify-content:flex-end}

/* ── Bewerbungseingang ── */
.bw-wrap{max-width:880px;margin:0 auto;padding:2.2rem 1.2rem 4rem}
.bw-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--m-dunkel);padding-bottom:.9rem;margin-bottom:1.4rem}
.bw-kopf h1{font-size:1.5rem;margin:0}
.bw-hinweis{font-size:.85rem;color:var(--m-ink-3);margin:0 0 1.2rem}
.bw-leer{color:var(--m-ink-3);padding:2rem 0}
.bw{background:var(--m-weiss);border:1px solid var(--m-line);border-radius:var(--m-r-l);padding:1.2rem 1.4rem;margin-bottom:1rem}
.bw b{font-size:1.05rem}
.bw .bw-meta{font-size:.8rem;color:var(--m-ink-3);margin:.15rem 0 .6rem}
.bw .bw-zeile{font-size:.9rem;margin:.15rem 0}
.bw .bw-zeile span{color:var(--m-ink-3)}
.bw .bw-text{font-size:.9rem;background:var(--m-grund);border-radius:var(--m-r);padding:.7rem .9rem;margin:.6rem 0;white-space:pre-wrap}
.bw .bw-dateien{display:flex;gap:.6rem;flex-wrap:wrap;margin:.5rem 0}
.bw .bw-dateien a{font-size:.83rem;font-weight:650;color:var(--m-akzent-d)}
.bw .bw-akt{margin-top:.6rem}
.bw .bw-akt button{font-size:.78rem;color:var(--m-rot);background:none;border:1px solid var(--m-line);border-radius:var(--m-r);padding:.35rem .7rem;cursor:pointer}