/* ═══════════════════════════════════════════════════════
   Karriereseite Dresdner S+F-Bau
   Corporate Design: Schwarz-Versalien · Blau · Gold · Anthrazit
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --tinte:#1e1e1e; --grau:#666c74; --linie:#e4e4e4;
  --akzent:#2f6fb2; --akzent-dunkel:#245a92;   /* DSF-Blau */
  --gold:#f2a900;                               /* Logo-Gold */
  --dunkel:#2b2b2b; --dunkel-weich:#3a3a3a;     /* Anthrazit (Fuß) */
  --papier:#ffffff; --grau-bg:#f4f4f4;
  --rund:6px;
  --schatten:0 2px 12px rgba(0,0,0,.06);
  --schatten-gross:0 12px 34px rgba(0,0,0,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Public Sans',system-ui,-apple-system,Arial,sans-serif;
  color:var(--tinte);background:var(--papier);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Archivo',sans-serif;line-height:1.12}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* Buttons */
.btn{display:inline-block;background:var(--akzent);color:#fff;font-family:'Archivo',sans-serif;
  font-weight:700;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;
  padding:12px 22px;border:none;border-radius:var(--rund);cursor:pointer;transition:.15s}
.btn:hover{background:var(--akzent-dunkel)}
.btn-rand{background:transparent;color:var(--akzent);border:2px solid var(--akzent);padding:10px 20px}
.btn-rand:hover{background:var(--akzent);color:#fff}
.btn-dunkel{background:var(--dunkel)}
.btn-dunkel:hover{background:var(--dunkel-weich)}
.btn-voll{width:100%;text-align:center}
.btn-klein{padding:7px 14px;font-size:.76rem}

/* Kopf – weiß mit Logo */
.kopf{background:#fff;border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:20}
.kopf-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:14px}
.marke{display:flex;align-items:center;gap:13px}
.marke img{height:48px;width:auto;display:block}
.marke .marke-text{font-family:'Archivo';font-weight:800;text-transform:uppercase;
  letter-spacing:.10em;font-size:.82rem;color:var(--tinte);border-left:2px solid var(--linie);padding-left:13px}
.kopf nav{display:flex;gap:9px;align-items:center}

/* Hero – Anthrazit mit Versal-Titel */
.hero{background:var(--dunkel);color:#fff;padding:66px 0 70px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--gold),#e07b00)}
.claim{display:inline-block;color:var(--gold);font-family:'Archivo';font-weight:700;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:18px}
.hero p{max-width:640px;color:rgba(255,255,255,.82)}
.kennzahlen{display:flex;gap:36px;margin-top:30px;flex-wrap:wrap}
.kennzahlen strong{display:block;font-family:'Archivo';font-size:1.7rem;font-weight:800;color:#fff}
.kennzahlen span{font-size:.86rem;color:rgba(255,255,255,.62)}

/* Stellenliste */
.abschnitt{padding:58px 0}
.schmal{max-width:780px}
.abschnitt-kopf{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.abschnitt-kopf h2{font-size:1.9rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.abschnitt-kopf p{color:var(--grau)}
.stellen{display:grid;gap:14px}
.karte{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--grau-bg);border:1px solid var(--linie);border-left:4px solid var(--akzent);
  border-radius:var(--rund);padding:22px 26px;transition:.16s}
.karte:hover{background:#eef4fa;box-shadow:var(--schatten);transform:translateX(2px)}
.karte h3{font-size:1.12rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  color:var(--akzent);margin-bottom:9px}
.pfeil{color:var(--akzent);font-size:1.5rem;font-weight:700}
.tags{display:flex;gap:7px;flex-wrap:wrap}
.tag{font-size:.78rem;font-weight:600;padding:4px 11px;border-radius:99px;
  background:#fff;border:1px solid var(--linie);color:var(--grau)}
.tag-akzent{background:rgba(47,111,178,.1);border-color:transparent;color:var(--akzent)}
.tag-hell{background:rgba(255,255,255,.14);border-color:transparent;color:#fff}
.leer{color:var(--grau);background:var(--grau-bg);border:1px solid var(--linie);
  border-radius:var(--rund);padding:34px;text-align:center}
.leer a{color:var(--akzent);font-weight:600}

/* Stellendetail */
.detail-kopf{background:var(--dunkel);color:#fff;padding:46px 0 42px;position:relative}
.detail-kopf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--gold),#e07b00)}
.zurueck{color:rgba(255,255,255,.6);font-size:.9rem;display:inline-block;margin-bottom:14px}
.zurueck:hover{color:#fff}
.detail-kopf h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:900;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:14px}
.detail{display:grid;grid-template-columns:1fr 380px;gap:44px;padding:48px 0;align-items:start}
.inhalt h2{font-size:1.15rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  margin:26px 0 10px;color:var(--tinte)}
.inhalt h2:first-child{margin-top:0}
.einleitung{font-size:1.06rem}
.ul{list-style:none}
.ul li{padding:5px 0 5px 26px;position:relative}
.ul li::before{content:"";position:absolute;left:4px;top:13px;width:9px;height:9px;
  background:var(--akzent);border-radius:2px}
.hinweis{margin-top:26px;padding-top:16px;border-top:1px solid var(--linie);color:var(--grau);font-size:.88rem}
.hinweis-box{background:#fff8e8;border-left:4px solid var(--gold);padding:14px 16px;
  border-radius:var(--rund);margin:16px 0;font-size:.92rem}

/* Formular */
.box{background:#fff;border:1px solid var(--linie);border-top:4px solid var(--akzent);
  border-radius:var(--rund);box-shadow:var(--schatten-gross);padding:28px;position:sticky;top:96px}
.box h2{font-size:1.2rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
.sub{color:var(--grau);font-size:.9rem;margin-bottom:18px}
.feld{margin-bottom:14px}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feld label{display:block;font-size:.85rem;font-weight:600;margin-bottom:5px;color:var(--tinte)}
.feld label span{color:var(--akzent)}
.feld input,.feld textarea,.feld select{width:100%;border:1.5px solid #d5d5d5;border-radius:var(--rund);
  padding:11px 13px;font:inherit;font-size:.95rem;background:#fff}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;border-color:var(--akzent)}
.feld textarea{resize:vertical}
.einwilligung{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--grau);margin:6px 0 16px}
.einwilligung input{margin-top:3px;flex-shrink:0}
.einwilligung a{color:var(--akzent);text-decoration:underline}
.hp{position:absolute;left:-9999px}
.fehler{background:#fdecea;color:#a4271b;border:1px solid #f3c6bd;padding:11px 14px;border-radius:var(--rund);font-size:.9rem;margin-bottom:14px}
.erfolg{background:#e7f4ec;color:#1a6b3f;border:1px solid #bcdcc8;padding:16px;border-radius:var(--rund);font-size:.95rem;margin-bottom:12px}

/* Fuß – Anthrazit */
.fuss{background:var(--dunkel);color:rgba(255,255,255,.6);padding:40px 0 30px;margin-top:44px;font-size:.9rem;
  border-top:5px solid var(--gold)}
.fuss-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fuss strong{color:#fff;font-family:'Archivo';text-transform:uppercase;letter-spacing:.04em}
.fuss a:hover{color:var(--gold)}
.fuss-r{text-align:right}
.klein{font-size:.78rem;opacity:.6;margin-top:6px}

@media(max-width:880px){
  .detail{grid-template-columns:1fr;gap:28px}
  .box{position:static}
  .fuss-in,.fuss-r{text-align:left}
}
@media(max-width:520px){
  .feld-reihe{grid-template-columns:1fr}
  .kopf-in{height:auto;padding:12px 0;flex-wrap:wrap}
  .marke .marke-text{display:none}
}

/* ═══════════════ ADMIN ═══════════════ */
.admin{background:#f1f3f6;min-height:100vh}
.admin-kopf{background:var(--dunkel);color:#fff}
.admin-kopf .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:14px}
.admin-kopf strong{font-family:'Archivo';text-transform:uppercase;letter-spacing:.05em;font-size:.95rem}
.admin-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.admin-nav a{padding:8px 13px;border-radius:var(--rund);font-size:.88rem;color:rgba(255,255,255,.7)}
.admin-nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.admin-nav a.aktiv{background:var(--akzent);color:#fff}
.admin-inhalt{padding:30px 0 60px}
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.zahl{background:#fff;border-radius:var(--rund);padding:18px 20px;box-shadow:var(--schatten);border-left:4px solid var(--akzent)}
.zahl b{display:block;font-family:'Archivo';font-size:1.9rem;line-height:1;font-weight:800;color:var(--dunkel)}
.zahl span{color:var(--grau);font-size:.86rem}
.tafel{background:#fff;border-radius:var(--rund);box-shadow:var(--schatten);overflow:hidden;margin-bottom:22px}
.tafel-kopf{padding:15px 20px;border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tafel-kopf h2{font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:11px 20px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grau);background:#f8f9fb}
td{padding:12px 20px;border-top:1px solid #eef0f3;font-size:.92rem;vertical-align:middle}
tr.klick:hover{background:#f6f9fc;cursor:pointer}
.stat{display:inline-block;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:99px}
.s-neu{background:#fff0d6;color:#9a6a00}
.s-sichtung{background:#e3edfd;color:#2456c1}
.s-pool{background:#ede9fe;color:#6d28d9}
.s-erstgespraech{background:#dbeafe;color:#1e5fa8}
.s-interview{background:#e0edf9;color:#245a92}
.s-zusage{background:#e0f3e6;color:#1a6b3f}
.s-absage{background:#eceef1;color:#6b7280}
.s-aktiv{background:#e0f3e6;color:#1a6b3f}
.s-entwurf{background:#fff0d6;color:#9a6a00}
.s-geschlossen{background:#eceef1;color:#6b7280}
.formular{background:#fff;border-radius:var(--rund);box-shadow:var(--schatten);padding:26px;max-width:800px}
.formular .feld small{color:var(--grau);font-size:.78rem;display:block;margin-top:4px}
.anmelden{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--dunkel);padding:20px}
.anmelden-karte{background:#fff;border-radius:var(--rund);box-shadow:var(--schatten-gross);padding:34px;width:100%;max-width:390px;border-top:4px solid var(--akzent)}
.anmelden-karte h1{font-size:1.35rem;margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.info-zeile{display:flex;padding:9px 0;border-bottom:1px solid #eef0f3;font-size:.92rem}
.info-zeile .k{width:130px;color:var(--grau);flex-shrink:0}
.badge-admin{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--gold);color:#1e1e1e;padding:2px 8px;border-radius:99px;margin-left:6px}
@media(max-width:640px){.paar{grid-template-columns:1fr}}