/* ============================================================
   KI-IT-KOMPASS OWL – Landing + Wizard
   Gemeinsame Farbwelt: Deltatec (Lila/Limegrün) + KI-Zentrum NRW (Blau/Grün)
   ============================================================ */

/* ---- Fonts ---- */
@font-face { font-family:'Pirulen'; src:url('fonts/pirulen_rg.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'MyriadPro'; src:url('fonts/MyriadPro-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'MyriadPro'; src:url('fonts/MyriadPro-Semibold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'MyriadPro'; src:url('fonts/MyriadPro-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

/* ---- Tokens ---- */
:root {
  /* Deltatec */
  --purple:#320039; --purple-mid:#5A1068; --purple-light:#8B2FA0;
  --green:#A9DA1F; --green-sec:#CDEA7D; --green-dark:#7AAB10;
  /* KI-Zentrum NRW */
  --blue:#1b64b5; --blue-dark:#13468a; --blue-light:#3f86d6; --ki-green:#97b63d;
  /* Neutrale */
  --white:#FFFFFF; --bg:#F4F2F8; --bg2:#EAE6F1;
  --text:#1A001F; --text-mid:#54466B; --text-light:#867d96;
  --border:#D6CFE0;
  /* Kombinierter Dunkel-Hintergrund (Lila → Blau) */
  --dark-bg:#0e0a26;
  --font-head:'Pirulen','Arial Narrow',Arial,sans-serif;
  --font-body:'MyriadPro','Trebuchet MS',Arial,sans-serif;
  --radius:8px; --radius-card:14px; --radius-pill:24px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body); color:var(--text); line-height:1.55;
  background:var(--dark-bg);
  background-image:
    radial-gradient(900px 600px at 12% -10%, rgba(90,16,104,.60), transparent 60%),
    radial-gradient(820px 560px at 100% 4%, rgba(27,100,181,.45), transparent 58%),
    radial-gradient(600px 500px at 50% 110%, rgba(151,182,61,.12), transparent 60%),
    linear-gradient(160deg,#1b0f3a 0%,#101a44 55%,#0e0a26 100%);
  background-attachment:fixed;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  padding:18px 14px 40px;
}

/* ---- Shell ---- */
.wrap { width:100%; max-width:580px; margin:0 auto; }

.brandbar {
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin:0 auto 22px; padding:14px 26px; flex-wrap:wrap; max-width:fit-content;
  background:rgba(13,8,34,.45); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-pill); backdrop-filter:blur(6px);
}
.brandbar .bb-link {
  display:inline-flex; align-items:center; line-height:0; transition:opacity .15s;
  outline:none; border:0; border-radius:6px; -webkit-tap-highlight-color:transparent;
}
.brandbar .bb-link:hover { opacity:.82; }
.brandbar .bb-link:focus { outline:none; }
.brandbar .bb-link:focus-visible { outline:2px solid var(--green-sec); outline-offset:5px; }
.brandbar img { display:block; width:auto; }
.brandbar .bb-delta { height:54px; }
.brandbar .bb-ki    { height:132px; }
.brandbar .bb-x { color:rgba(255,255,255,.3); font-size:14px; }
@media (max-width:560px){
  .brandbar { flex-direction:column; gap:12px; padding:16px 26px; }
  .brandbar .bb-x { display:none; }
}

.card {
  background:var(--white); border-radius:var(--radius-card);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(10,6,30,.5), 0 2px 8px rgba(10,6,30,.35);
  overflow:hidden;
}

/* ---- Progress ---- */
.progress-head { padding:18px 22px 0; }
.progress-meta {
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-head); font-size:9px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--text-light); margin-bottom:8px;
}
.progress-meta .step-accent { color:var(--blue); }
.progress-track { height:6px; background:var(--bg2); border-radius:20px; overflow:hidden; }
.progress-fill {
  height:100%; width:0%; border-radius:20px;
  background:linear-gradient(90deg,var(--blue),var(--green-dark));
  transition:width .45s cubic-bezier(.4,0,.2,1);
}

/* ---- Step body ---- */
.step { display:none; padding:24px 22px 26px; animation:fade .35s ease; }
.step.active { display:block; }
@keyframes fade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

.eyebrow {
  font-family:var(--font-head); font-size:10px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--blue); margin-bottom:10px;
}
.q-title {
  font-family:var(--font-head); color:var(--purple);
  font-size:21px; line-height:1.25; letter-spacing:.3px; margin-bottom:6px;
}
.q-sub { color:var(--text-mid); font-size:14px; margin-bottom:18px; }

/* ---- Landing / Hero ---- */
.hero {
  background:
    radial-gradient(600px 300px at 80% -20%, rgba(27,100,181,.55), transparent 60%),
    linear-gradient(135deg,#320039 0%,#3a1170 45%,#13468a 100%);
  margin:-24px -22px 20px; padding:30px 24px 26px;
  border-bottom:3px solid var(--green); color:var(--white);
}
.hero .eyebrow { color:var(--green-sec); }
.hero h1 {
  font-family:var(--font-head); font-size:30px; line-height:1.12;
  letter-spacing:.6px; margin-bottom:8px;
}
.hero-claim { color:rgba(255,255,255,.82); font-size:15px; margin-bottom:22px; }

/* zwei Gesichter */
.faces { display:flex; gap:14px; }
.face { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
.face-img {
  width:92px; height:92px; border-radius:50%; overflow:hidden;
  border:3px solid rgba(255,255,255,.85); box-shadow:0 6px 18px rgba(0,0,0,.35);
  background:#fff;
}
.face-img img { width:100%; height:100%; object-fit:cover; display:block; }
.face figcaption { margin-top:10px; display:flex; flex-direction:column; gap:1px; }
.face-name { font-family:var(--font-head); font-size:13px; color:#fff; letter-spacing:.3px; }
.face-role { font-size:11.5px; color:rgba(255,255,255,.72); line-height:1.3; }
.face-org  { font-size:11px; color:var(--green-sec); font-weight:600; margin-top:2px; }
.face-org a { color:inherit; text-decoration:none; border-bottom:1px solid rgba(205,234,125,.45); padding-bottom:1px; transition:border-color .15s; }
.face-org a:hover { border-color:var(--green-sec); }

/* Feature-Liste (Produkt-USPs) */
.features { list-style:none; margin:4px 0 22px; }
.features li {
  display:flex; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--bg2);
  font-size:15px; font-weight:600; color:var(--text);
}
.features li:last-child { border-bottom:none; }
.features .fchk {
  flex-shrink:0; width:24px; height:24px; border-radius:7px;
  background:linear-gradient(135deg,var(--green-dark),var(--ki-green));
  display:flex; align-items:center; justify-content:center;
}
.features .fchk svg { width:14px; height:14px; }

.intro-time {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-head); font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-light); margin-bottom:18px;
}

/* ---- Options ---- */
.options { display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
.opt {
  position:relative; display:flex; align-items:center; gap:13px;
  padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--white); cursor:pointer; transition:all .15s; user-select:none;
}
.opt:hover { border-color:var(--blue-light); background:var(--bg); }
.opt input { position:absolute; opacity:0; pointer-events:none; }
.opt .mark {
  flex-shrink:0; width:22px; height:22px; border-radius:6px;
  border:2px solid var(--border); background:var(--white);
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.opt[data-type="radio"] .mark { border-radius:50%; }
.opt .mark svg { width:13px; height:13px; opacity:0; transform:scale(.4); transition:all .15s; }
.opt .label { font-size:14.5px; color:var(--text); font-weight:600; }
.opt.checked { border-color:var(--blue); background:rgba(27,100,181,.08); }
.opt.checked .mark { background:var(--blue); border-color:var(--blue); }
.opt.checked .mark svg { opacity:1; transform:scale(1); }

.freetext-wrap { margin-top:14px; }

/* ---- Form fields ---- */
.field { margin-bottom:15px; }
.field-label {
  display:block; font-family:var(--font-head); font-size:9.5px; font-weight:700;
  color:var(--text-mid); margin-bottom:6px; text-transform:uppercase; letter-spacing:.8px;
}
.field-label .req { color:var(--green-dark); }
.input, .textarea {
  width:100%; padding:12px 13px; border:1.5px solid var(--border);
  border-radius:var(--radius); font-size:15px; color:var(--text);
  font-family:var(--font-body); background:var(--white); transition:border-color .15s;
}
.input:focus, .textarea:focus {
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,100,181,.14);
}
.textarea { resize:vertical; min-height:88px; }
.field-row { display:flex; gap:12px; }
.field-row > .field { flex:1; }
.input.err, .textarea.err { border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.field-error { color:#DC2626; font-size:12px; margin-top:5px; display:none; }
.field-error.show { display:block; }

/* ---- Consent ---- */
.consent { display:flex; gap:11px; align-items:flex-start; padding:12px 0; cursor:pointer; }
.consent input { position:absolute; opacity:0; pointer-events:none; }
.consent .box {
  flex-shrink:0; width:22px; height:22px; border-radius:6px; margin-top:1px;
  border:2px solid var(--border); background:var(--white);
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.consent .box svg { width:13px; height:13px; opacity:0; transform:scale(.4); transition:all .15s; }
.consent.checked .box { background:var(--green-dark); border-color:var(--green-dark); }
.consent.checked .box svg { opacity:1; transform:scale(1); }
.consent .ctext { font-size:13px; color:var(--text-mid); line-height:1.5; }
.consent .ctext a { color:var(--blue); font-weight:600; }
.consent-block { border-top:1px solid var(--bg2); margin-top:6px; padding-top:6px; }
.consent-block.err .box { border-color:#DC2626; }

/* ---- Buttons / nav ---- */
.actions { display:flex; gap:10px; align-items:center; margin-top:22px; }
.actions-equal .btn { flex:1 1 0; padding:14px 18px; }
.btn {
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.8px;
  font-size:12px; border:none; border-radius:var(--radius); cursor:pointer;
  padding:14px 22px; transition:all .15s; display:inline-flex;
  align-items:center; justify-content:center; gap:8px; text-decoration:none;
}
.btn-primary { background:var(--green); color:var(--purple); flex:1; }
.btn-primary:hover { background:var(--green-dark); color:var(--white); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-ghost { background:transparent; color:var(--text-mid); border:1.5px solid var(--border); padding:14px 18px; }
.btn-ghost:hover { background:var(--bg); color:var(--blue); }
.btn-block { width:100%; }

/* ---- Thank you ---- */
.thanks { text-align:center; padding:46px 26px 44px; }
.thanks .check {
  width:74px; height:74px; border-radius:50%; margin:0 auto 20px;
  background:rgba(169,218,31,.16); display:flex; align-items:center; justify-content:center;
}
.thanks .check svg { width:38px; height:38px; }
.thanks h2 { font-family:var(--font-head); color:var(--purple); font-size:22px; margin-bottom:10px; }
.thanks p { color:var(--text-mid); font-size:15px; max-width:410px; margin:0 auto 6px; }
.thanks .restart-wrap { margin:26px 0 2px; display:flex; justify-content:center; max-width:none; }
.thanks .restart-wrap .btn { flex:0 0 auto; padding:14px 26px; }
.thanks .badge-line {
  margin-top:24px; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-head); font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-light);
}
.thanks .badge-line a {
  color:var(--blue); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; transition:color .15s;
}
.thanks .badge-line a:hover { color:var(--purple-mid); }

/* ---- Footer ---- */
.foot { text-align:center; margin-top:18px; font-size:11.5px; color:rgba(255,255,255,.5); }
.foot a { color:rgba(151,182,61,.95); text-decoration:none; }
.foot a:hover { text-decoration:underline; }
.foot .sep { margin:0 7px; opacity:.4; }

/* ---- error banner ---- */
.banner {
  display:none; background:#FEF2F2; border:1px solid #FECACA; border-left:4px solid #DC2626;
  color:#991B1B; font-size:13px; padding:11px 14px; border-radius:var(--radius); margin:0 0 16px;
}
.banner.show { display:block; margin:18px 22px -4px; }

@media (max-width:420px){
  .hero h1{ font-size:25px; } .q-title{ font-size:19px; }
  .face-img{ width:80px; height:80px; }
  .field-row{ flex-direction:column; gap:0; }
}