/* BewerbungsPilot Einrichtung: Seitenleiste mit Schritten, Karte mit Inhalt. Ein Akzent, ruhige Flaechen. */
:root{
  color-scheme: dark;
  --bg:#0a0c11; --bg2:#0f1219; --card:#141822; --card2:#1a1f2b;
  --line:#222837; --line2:#2d3446; --line3:#3a4360;
  --txt:#e9edf5; --mut:#8e96aa; --mut2:#656d82;
  --accent:#3b82f6; --accent2:#2563eb; --accent-weich:rgba(59,130,246,.14); --accent-rand:rgba(59,130,246,.38);
  --warn:#f59e0b; --fehler:#ef4444; --gut:#22c55e;
  --radius:18px; --radius-s:12px;
  --schatten:0 24px 60px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.03) inset;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0; background:var(--bg); color:var(--txt); min-height:100vh; -webkit-font-smoothing:antialiased;}
button,input,select,textarea{font-family:inherit; font-size:14px;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
.hintergrund{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 480px at 18% -10%, rgba(59,130,246,.16) 0%, transparent 60%),
    radial-gradient(700px 420px at 95% 10%, rgba(37,99,235,.10) 0%, transparent 55%),
    linear-gradient(180deg, #0b0e15 0%, var(--bg) 60%);}
.hintergrund::after{content:""; position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:36px 36px; mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);}
.ico{width:16px; height:16px; vertical-align:-3px; flex:0 0 auto;}

/* ── Rahmen: Seitenleiste + Buehne ────────────────────────────────────────── */
.rahmen > *{min-width:0;}
.rahmen{position:relative; z-index:1; display:grid; grid-template-columns:300px 1fr; gap:0; min-height:100vh; max-width:1240px; margin:0 auto;}
.seitenleiste{position:sticky; top:0; align-self:start; height:100vh; display:flex; flex-direction:column; gap:22px;
  padding:30px 22px 26px 28px; border-right:1px solid var(--line);}
.marke{display:flex; align-items:center; gap:11px;}
.marke-ico{display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:#fff;
  background:linear-gradient(180deg,var(--accent),var(--accent2)); box-shadow:0 8px 22px rgba(59,130,246,.35);}
.marke-ico .ico{width:20px; height:20px; vertical-align:0;}
.marke-text{font-size:17px; font-weight:700; letter-spacing:-.3px; line-height:1.15; display:flex; flex-direction:column;}
.marke-text small{font-size:12px; font-weight:500; color:var(--mut); letter-spacing:.2px;}

.stufen{display:flex; flex-direction:column; gap:4px; flex:1; position:relative;}
.stufe{display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; text-align:left; width:100%;
  padding:9px 10px; border:1px solid transparent; border-radius:var(--radius-s); background:transparent; color:var(--mut); cursor:pointer; transition:.15s;}
.stufe:hover:not(:disabled){background:rgba(255,255,255,.03); color:var(--txt);}
.stufe:disabled,.stufe[aria-disabled="true"]{cursor:default; opacity:.55;}
.stufe-ico{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; border:1px solid var(--line2); background:var(--bg2); color:var(--mut); transition:.15s;}
.stufe-ico .ico{width:16px; height:16px; vertical-align:0;}
.stufe-text{display:flex; flex-direction:column; min-width:0;}
.stufe-titel{font-size:13.5px; font-weight:600; color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.stufe-kurz{font-size:11.5px; color:var(--mut2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;}
.stufe-nr{font-size:11px; color:var(--mut2); font-variant-numeric:tabular-nums;}
.stufe.erledigt{color:var(--txt);}
.stufe.erledigt .stufe-ico{color:var(--gut); border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.10);}
.stufe.aktiv{background:var(--accent-weich); border-color:var(--accent-rand); color:var(--txt);}
.stufe.aktiv .stufe-ico{background:linear-gradient(180deg,var(--accent),var(--accent2)); border-color:transparent; color:#fff; box-shadow:0 6px 16px rgba(59,130,246,.35);}
.stufe.aktiv .stufe-kurz{color:var(--mut);}
.stufe.aktiv .stufe-nr{color:var(--accent);}
.seiten-fuss{display:flex; flex-direction:column; gap:10px;}
.fuss-text{margin:0; font-size:12px; color:var(--mut2); display:flex; align-items:center; gap:7px;}
.fuss-text .ico{width:13px; height:13px; vertical-align:0;}
.fuss-text .konto-mail{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--mut);}
.fuss-text .knopf.klein{padding:4px 9px; font-size:12px;}

.buehne{padding:34px clamp(18px,4vw,48px) 60px; min-width:0;}
.karte{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--card); border:1px solid var(--line2);
  border-radius:var(--radius); padding:clamp(22px,3.4vw,38px); box-shadow:var(--schatten); max-width:860px;}
.karten-kopf{margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.schrittzahl{display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.9px; text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
.karte h1{font-size:26px; margin:0; letter-spacing:-.5px; line-height:1.2;}
.karte h2{font-size:12px; margin:24px 0 8px; color:var(--mut); text-transform:uppercase; letter-spacing:.8px; font-weight:700;}
.karte p{line-height:1.65; margin:8px 0; color:#d5dbe7;}
.karte ul, .karte ol{line-height:1.7; padding-left:22px;}
.hinweis{color:var(--mut); font-size:13px; line-height:1.55;}
.hinweis.pflicht{color:#f5b74a;}
.hinweis.pflicht[hidden]{display:none;}
.meldung{margin-top:16px; padding:12px 14px; border-radius:var(--radius-s); border:1px solid var(--line2); background:var(--card2); line-height:1.5; font-size:14px;}
.meldung.fehler{border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08); color:#fca5a5;}
.meldung.gut{border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.08); color:#bfe9cd;}
.meldung.warn{border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.08); color:#fcd38a;}

.navigation{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; padding-top:18px; border-top:1px solid var(--line);}
.nav-punkte{display:flex; gap:5px;}
.nav-punkte i{width:6px; height:6px; border-radius:3px; background:var(--line2); transition:.2s;}
.nav-punkte i.erledigt{background:var(--line3);}
.nav-punkte i.aktiv{width:18px; background:var(--accent);}

/* ── Knoepfe ──────────────────────────────────────────────────────────────── */
.knopf{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line2); background:var(--card2); color:var(--txt);
  padding:10px 16px; border-radius:11px; cursor:pointer; transition:.12s; white-space:nowrap; font-weight:500; line-height:1.2;}
.knopf:hover{border-color:var(--line3); background:#222a3b;}
.knopf.leise{background:transparent;}
.knopf.haupt{background:linear-gradient(180deg,var(--accent),var(--accent2)); border:0; font-weight:600; color:#fff; box-shadow:0 6px 18px rgba(59,130,246,.3);}
.knopf.haupt:hover{filter:brightness(1.08);}
.knopf.klein{padding:6px 11px; font-size:13px;}
.knopf:disabled{opacity:.5; cursor:default; filter:none; box-shadow:none;}
.knopf .ico{margin:0;}

/* ── Felder ───────────────────────────────────────────────────────────────── */
.feld{display:flex; flex-direction:column; gap:6px; margin:12px 0;}
.feld label{font-size:12.5px; color:var(--mut); font-weight:500;}
.feld input, .feld select, .feld textarea{padding:11px 13px; border-radius:11px; border:1px solid var(--line2);
  background:var(--bg2); color:var(--txt); width:100%; transition:.12s;}
.feld input:hover, .feld select:hover, .feld textarea:hover{border-color:var(--line3);}
.feld input:focus, .feld select:focus, .feld textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weich);}
.feld textarea{min-height:120px; resize:vertical; line-height:1.5;}
.zeile2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.zeile3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media(max-width:640px){ .zeile2, .zeile3{grid-template-columns:1fr;} }

.auswahl{position:relative;}
.vorschlaege{position:absolute; left:0; right:0; top:100%; z-index:5; background:var(--card2);
  border:1px solid var(--line2); border-radius:11px; margin-top:4px; max-height:220px; overflow:auto; display:none; box-shadow:0 14px 34px rgba(0,0,0,.4);}
.vorschlaege.offen{display:block;}
.vorschlaege div{padding:9px 12px; cursor:pointer;}
.vorschlaege div:hover{background:#242c3d;}
.vorschlaege span{color:var(--mut); margin-left:6px; font-size:12px;}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
.chip{background:var(--card2); border:1px solid var(--line2); border-radius:999px; padding:5px 11px; font-size:13px; display:inline-flex; gap:7px; align-items:center;}
.chip b{cursor:pointer; color:var(--mut); font-weight:400; font-size:15px; line-height:1;}
.chip b:hover{color:var(--txt);}

/* Auswahl-Kacheln (Modelle) */
.kacheln{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin-top:10px;}
.kachel{position:relative; border:1px solid var(--line2); border-radius:14px; padding:14px 16px 14px 42px; cursor:pointer; background:var(--bg2); transition:.12s;}
.kachel::before{content:""; position:absolute; left:14px; top:17px; width:16px; height:16px; border-radius:50%; border:2px solid var(--line3); transition:.12s;}
.kachel:hover{border-color:var(--line3);}
.kachel.gewaehlt{border-color:var(--accent-rand); background:var(--accent-weich); box-shadow:0 0 0 3px rgba(59,130,246,.08);}
.kachel.gewaehlt::before{border-color:var(--accent); background:radial-gradient(circle, var(--accent) 45%, transparent 50%);}
.kachel .name{font-weight:650;}
.kachel .text{font-size:12.5px; color:var(--mut); margin-top:4px; line-height:1.45;}
.kachel .wertung{font-size:12px; margin-top:8px; color:var(--mut); font-weight:600;}
.kachel.empfohlen .wertung{color:var(--accent);}
/* Schritt KI (Cloud): zwei Karten, darunter Anbieter und Schluessel */
.ki-karten{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.ki-detail{margin-top:14px; padding:4px 16px 8px; border:1px solid var(--line); border-radius:14px; background:var(--bg2);}
.ki-detail[hidden]{display:none;}
.ki-detail .feld label a{margin-left:8px; color:var(--accent); text-decoration:none;}
.ki-detail .feld label a:hover{text-decoration:underline;}
.hinweis.gut{color:#5fd99a;}

.balken{height:8px; border-radius:999px; background:var(--line); overflow:hidden; margin:12px 0 6px;}
.balken div{height:100%; background:linear-gradient(90deg,var(--accent2),var(--accent)); width:0; transition:width .3s; border-radius:999px;}

/* Zeilenlisten (Rechner, Unterlagen) */
.liste{list-style:none; padding:0; margin:8px 0;}
.liste li{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border:1px solid var(--line); border-radius:13px; margin:7px 0; background:var(--bg2);}
.liste li > span:first-child{font-weight:550;}
.liste li > span:last-child{display:inline-flex; align-items:center; gap:8px; color:#c9d0de; font-size:13.5px;}
.liste .fehlt, .liste .da{display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid transparent;}
.liste .fehlt{color:#f5b74a; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.28);}
.liste .da{color:#5fd99a; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25);}
.liste .bez-feld{flex:1 1 220px; min-width:0;}
.liste .bez-feld input{width:100%; padding:8px 11px; border-radius:9px; border:1px solid var(--line2); background:var(--bg); color:var(--txt); font-weight:550;}
.liste .bez-feld input:hover{border-color:var(--line3);}
.liste .bez-feld input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weich);}

.wochentage{display:flex; gap:6px; flex-wrap:wrap;}
.wochentage label{border:1px solid var(--line2); border-radius:999px; padding:7px 13px; cursor:pointer; user-select:none; font-size:13.5px; transition:.12s; background:var(--bg2);}
.wochentage label:hover{border-color:var(--line3);}
.wochentage input{display:none;}
.wochentage label.an{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;}
.schalter{display:flex; align-items:center; gap:10px; margin:12px 0; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--bg2);}
.schalter input{width:18px; height:18px; accent-color:var(--accent); margin:0;}
.schalter label{cursor:pointer;}

.zusammenfassung{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 0;}
.zusammenfassung dt{color:var(--mut); font-size:11.5px; text-transform:uppercase; letter-spacing:.7px; font-weight:700; margin:0;}
.zusammenfassung dd{margin:0; padding:0;}
.zusammenfassung{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.zusammenfassung dt{display:none;}
.zusammenfassung dd{padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:var(--bg2); font-size:14px; line-height:1.5;}
.zusammenfassung dd::before{content:attr(data-k); display:block; color:var(--mut); font-size:11.5px; text-transform:uppercase; letter-spacing:.7px; font-weight:700; margin-bottom:4px;}
@media(max-width:640px){ .zusammenfassung{grid-template-columns:1fr;} }
.spalte{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px;}

.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(30px);
  background:var(--card2); border:1px solid var(--line2); padding:11px 18px; border-radius:12px;
  opacity:0; transition:.25s; z-index:60; pointer-events:none; box-shadow:0 16px 40px rgba(0,0,0,.45);}
.toast.zeigen{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.fehler{border-color:#5b2630; color:#fca5a5;}

/* ── Schmal: Seitenleiste wird zur Kopfleiste ─────────────────────────────── */
@media(max-width:900px){
  .rahmen{grid-template-columns:1fr;}
  .seitenleiste{position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:18px 18px 12px; gap:14px;}
  .stufen{flex-direction:row; overflow-x:auto; gap:6px; scrollbar-width:none; padding-bottom:4px; min-width:0; max-width:100%;}
  .karte{max-width:100%;}
  .stufen::-webkit-scrollbar{display:none;}
  .stufe{grid-template-columns:30px auto; width:auto; padding:7px 10px 7px 7px;}
  .stufe-ico{width:30px; height:30px;}
  .stufe-kurz, .stufe-nr{display:none;}
  .stufe-text{display:none;}
  .seiten-fuss{display:none;}
  .liste li > span:last-child{flex-wrap:wrap;}
  .navigation{flex-wrap:wrap;}
  .nav-punkte{order:3; width:100%; justify-content:center; margin-top:4px;}
  .buehne{padding:18px 16px 40px;}
}

/* Rechtslinks (Cloud) in der Seitenleiste */
.seiten-fuss .rechtslinks{display:flex; gap:12px; font-size:12px;}
.seiten-fuss .rechtslinks[hidden]{display:none;}
.seiten-fuss .rechtslinks a{color:var(--mut2);}
.seiten-fuss .rechtslinks a:hover{color:var(--txt);}