/* STYLES: prozess-check.html */

html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-family:'Inter', sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em; }

/* NAV */
nav{
  position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding: 20px clamp(20px, 5vw, 64px); background:rgba(10,20,32,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-mark{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.nav-mark img{ height:32px; width:32px; display:block; }
.nav-mark span{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:17px; letter-spacing:-0.015em; }
.nav-mark em{ font-style:normal; font-weight:600; color:var(--accent); }
.nav-link{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text-muted); text-decoration:none; }
.nav-link:hover, .nav-link.active{ color:var(--accent); }
.nav-cta{
  font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text);
  border:1px solid var(--border); padding:9px 18px; border-radius:2px; text-decoration:none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.nav-cta:hover{ border-color:var(--accent); background:var(--accent-soft); }

/* HERO (ruhiges statisches Raster) */
.hero{
  padding:96px 24px 56px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/90px 90px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/90px 90px,
    radial-gradient(ellipse at 50% 0%, rgba(94,234,212,0.07), transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--border);
}
.hero-inner{ max-width:760px; margin:0 auto; }
.eyebrow{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--accent-2); letter-spacing:0.18em; text-transform:uppercase; display:block; }
.hero h1{ margin-top:16px; font-size:clamp(30px,4.6vw,46px); line-height:1.14; }
.hero p{ margin-top:18px; font-size:16px; line-height:1.7; color:var(--text-muted); }

main{ max-width:760px; margin:0 auto; padding:48px 24px 72px; }

/* FORTSCHRITT */
.check-progress{ margin-bottom:20px; }
.check-step{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); }
.progress-track{ margin-top:10px; height:2px; background:var(--border); }
.progress-bar{ height:2px; width:20%; background:var(--accent); transition:width 0.4s cubic-bezier(.16,1,.3,1); }

/* FRAGEKARTE */
.check-card{ border:1px solid var(--border); background:var(--card-bg); padding:32px 30px; }
.frage-titel{ font-size:clamp(19px,2.6vw,24px); line-height:1.35; }
.frage-hinweis{ margin-top:10px; font-size:14px; line-height:1.7; color:var(--text-muted); }
.antworten{ margin-top:26px; display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.antwort{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--bg); border:none; cursor:pointer;
  padding:16px 18px; font-family:'Inter',sans-serif; font-size:15px; color:var(--text);
  transition: background 0.2s ease, color 0.2s ease;
}
.antwort:hover{ background:var(--bg-2); }
.antwort .marke{
  flex:0 0 auto; width:22px; height:22px; border:1px solid var(--line-bright); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-muted);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.antwort:hover .marke{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

.check-nav{ margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.check-hint{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-muted); opacity:0.8; }

/* ERGEBNIS */
.result-card{ border:1px solid rgba(94,234,212,0.4); background:var(--card-bg); }
.result-head{ padding:30px 30px 0; }
.result-head h2{ margin-top:12px; font-size:clamp(22px,3.2vw,30px); line-height:1.25; }
.result-text{ padding:16px 30px 0; font-size:15px; line-height:1.75; color:var(--text-muted); }
.result-fields{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--border); border-top:1px solid var(--border); margin-top:26px;
}
.r-field{ background:var(--bg); padding:20px 24px; }
.r-field label{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted);
}
.r-field p{ margin-top:8px; font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; color:var(--accent); }
@media (max-width:600px){ .result-fields{ grid-template-columns:1fr; } }

.result-punkte{ padding:24px 30px 0; }
.result-punkte h3{ font-size:15px; color:var(--text); }
.result-punkte ul{ list-style:none; margin-top:12px; }
.result-punkte li{
  font-size:14px; line-height:1.7; color:var(--text-muted);
  padding-left:20px; position:relative; margin-top:10px;
}
.result-punkte li::before{ content:'—'; position:absolute; left:0; color:var(--accent-2); }

.result-actions{ padding:28px 30px 0; display:flex; gap:14px; flex-wrap:wrap; }
.cta-link{
  font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--bg); background:var(--accent);
  padding:14px 28px; border-radius:2px; text-decoration:none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-link:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(94,234,212,0.25); }
.ghost-link{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--text);
  border:1px solid var(--border); background:transparent; cursor:pointer;
  padding:14px 28px; border-radius:2px; text-decoration:none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.ghost-link:hover{ border-color:var(--accent); background:var(--accent-soft); }
#btnNochmal{ margin:22px 30px 30px; }

/* FOOTER */
footer{ background:var(--bg); padding:36px 24px; text-align:center; font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-muted); border-top:1px solid var(--border); }
footer a{ color:var(--text-muted); } footer a:hover{ color:var(--accent); }

/* sanftes Einblenden beim Fragewechsel */
.fade-in{ animation: fadeIn 0.35s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .fade-in{ animation:none; }
  .progress-bar{ transition:none; }
}