/* ============================================================
   DELTATEC COMPUTER – Messe Lead-Gen / IT-Check
   Brand-konformes Stylesheet (mobile-first)
   ============================================================ */

/* ---- 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 {
  --purple:#320039; --purple-mid:#5A1068; --purple-light:#8B2FA0;
  --green:#A9DA1F; --green-sec:#CDEA7D; --green-dark:#7AAB10;
  --white:#FFFFFF; --bg:#F6F2F7; --bg2:#EDE5F0;
  --text:#1A001F; --text-mid:#5C4466; --text-light:#8A7090;
  --border:#D4C4D8; --dark-bg:#0D0015; --dark-surf:#1A0025;
  --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 15% -10%, rgba(90,16,104,.55), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(169,218,31,.10), transparent 55%),
    linear-gradient(160deg,#0D0015 0%,#1A0025 45%,#0D0015 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:620px; margin:0 auto; }

.brandbar {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:8px 0 22px;
}
.brandbar a { display:inline-block; line-height:0; }
.brandbar img { height:50px; width:auto; max-width:80%; display:block; }
@media (max-width:480px){
  .brandbar img { height:42px; }
}

.card {
  background:var(--white); border-radius:var(--radius-card);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(13,0,21,.45), 0 2px 8px rgba(13,0,21,.3);
  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(--green-dark); }
.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(--green),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(--green-dark); 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; }

/* ---- Intro / Hero step ---- */
.intro-hero {
  background:linear-gradient(135deg,var(--purple) 0%,#5A1068 60%,#320039 100%);
  margin:-24px -22px 22px; padding:30px 24px 26px;
  border-bottom:3px solid var(--green); color:var(--white);
}
.intro-hero .eyebrow { color:var(--green); }
.intro-hero h1 {
  font-family:var(--font-head); font-size:24px; line-height:1.2;
  letter-spacing:.4px; margin-bottom:10px;
}
.intro-hero p { color:rgba(255,255,255,.78); font-size:14.5px; }
.intro-points { list-style:none; margin:6px 0 24px; }
.intro-points li {
  display:flex; gap:11px; align-items:flex-start;
  padding:10px 0; border-bottom:1px solid var(--bg); font-size:14px; color:var(--text-mid);
}
.intro-points li:last-child { border-bottom:none; }
.intro-points .ic {
  flex-shrink:0; width:26px; height:26px; border-radius:7px;
  background:var(--bg); color:var(--purple-mid);
  display:flex; align-items:center; justify-content:center; font-size: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(--purple-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(--green-dark); background:rgba(169,218,31,.10); }
.opt.checked .mark { background:var(--green-dark); border-color:var(--green-dark); }
.opt.checked .mark svg { opacity:1; transform:scale(1); }

/* free text inside step */
.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, .select {
  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, .select:focus {
  outline:none; border-color:var(--purple-mid); box-shadow:0 0 0 3px rgba(139,47,160,.12);
}
.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 checkboxes ---- */
.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(--purple-mid); font-weight:600; }
.consent-block {
  border-top:1px solid var(--bg); 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; }
/* Beide Buttons exakt gleich groß (Lead-Schritt): gleiche Breite, gleiches Padding */
.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;
}
.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(--purple-mid); }
.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:400px; margin:0 auto 6px; }
.thanks a { color:var(--purple-mid); font-weight:600; text-decoration:none; }
.thanks a:hover { color:var(--green-dark); text-decoration:underline; }
.thanks .badge-line {
  margin-top:24px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-light);
}
.thanks .badge-line a { color:inherit; font-weight:inherit; text-decoration:none; }
.thanks .badge-line a:hover { color:var(--green-dark); text-decoration:underline; }

/* ---- Footer ---- */
.foot {
  text-align:center; margin-top:18px; font-size:11.5px; color:rgba(255,255,255,.45);
}
.foot a { color:rgba(169,218,31,.85); text-decoration:none; }
.foot a:hover { text-decoration:underline; }
.foot .sep { margin:0 7px; opacity:.4; }

/* tiny lock note */
.secure-note {
  display:inline-flex; align-items:center; gap:6px; font-size:11px;
  color:var(--text-light); margin-top:14px;
}
.secure-note svg { width:12px; height:12px; }

/* 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-bottom:16px;
}
.banner.show { display:block; }

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