/* ==========================================================================
   Selbsttest / Explorationsbogen — restyled onto the site's design tokens.
   Structure and class names match the tool's own JS (renderStep/renderResult/
   exportPDF build these class names as strings) — only appearance changed here,
   the tool's logic in the inline <script> is untouched.
   ========================================================================== */

.bogen-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 32px 90px;
}
.bogen-shell a { color: inherit; }

.hub-nav { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.reset-btn {
  font-family: var(--font-body); font-size: 0.85rem; background: var(--cream-light);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 16px;
  cursor: pointer; color: var(--ink-soft); text-decoration: none;
}
.reset-btn:hover { border-color: var(--rust); color: var(--rust); }

.helper-toggle {
  font-family: var(--font-body); font-style: italic; font-size: 0.9rem;
  background: var(--teal-tint); border: 1px solid var(--sage); color: #3a4f34;
  border-radius: var(--radius); padding: 10px 16px; cursor: pointer; margin-bottom: 20px;
  width: 100%; text-align: left;
}
.helper-box {
  background: var(--teal-tint); border: 1px solid var(--sage); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 20px; font-size: 0.92rem; color: #3a4f34; line-height: 1.65;
}
.helper-box b { color: #3a4f34; }

.eyebrow {
  font-family: var(--font-body); font-style: italic; font-size: 1rem;
  color: var(--sage); display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 4px var(--rust-tint); flex-shrink: 0; }
.bogen-shell h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 10px; }
.subtitle { color: var(--ink-soft); font-size: 1.02rem; max-width: 60ch; margin: 0 0 24px; }

.progress-wrap { margin-bottom: 26px; }
.progress-track { position: relative; height: 5px; background: var(--cream-deep); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.progress-fill { height: 100%; background: var(--rust); border-radius: 99px; transition: width .35s ease; }
.progress-label { font-family: var(--font-body); font-size: 0.82rem; color: var(--sage); margin-top: 8px; display: flex; justify-content: space-between; }

.panel {
  background: var(--cream-light); border: 1px solid var(--line); border-radius: 4px; padding: 30px 28px;
  box-shadow: var(--shadow); margin-bottom: 20px;
}
.step-eyebrow { font-family: var(--font-body); font-style: italic; font-size: 0.85rem; color: var(--sage); margin-bottom: 6px; }
.step-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 560; margin: 0 0 6px; color: var(--teal-dark); }
.step-sub { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 22px; max-width: 58ch; }

.qblock { margin-bottom: 28px; }
.qblock:last-child { margin-bottom: 6px; }
.qtext { font-size: 1.02rem; font-weight: 600; margin-bottom: 13px; color: var(--ink); }
.opt-grid { display: flex; flex-direction: column; gap: 8px; }
.opt-btn {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 13px 15px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--cream); font-family: var(--font-body); font-size: 0.96rem;
  cursor: pointer; color: var(--ink); transition: border-color .15s ease, background .15s ease;
}
.opt-btn:hover { border-color: var(--rust); }
.opt-btn .mark {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--text-faint, #9c9384);
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent;
}
.opt-btn.multi .mark { border-radius: 4px; }
.opt-btn.selected { border-color: var(--rust); background: var(--rust-tint); }
.opt-btn.selected .mark { background: var(--rust); border-color: var(--rust); color: #fff; }
.opt-btn.skip { opacity: 0.7; font-style: italic; }

.textarea-field {
  width: 100%; min-height: 84px; padding: 13px 15px; border-radius: 4px; border: 1px solid var(--line);
  background: var(--cream); font-family: var(--font-body); font-size: 0.96rem; color: var(--ink); outline: none; resize: vertical;
}
.textarea-field:focus { border-color: var(--rust); }
.optional-tag { font-family: var(--font-body); font-style: italic; font-size: 0.78rem; color: var(--sage); margin-left: 8px; }

.nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; }
.nav-btn { font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; padding: 12px 24px; border-radius: 3px; cursor: pointer; border: 1px solid transparent; }
.nav-btn.primary { background: var(--rust); color: #fff; }
.nav-btn.primary:hover { background: var(--rust-dark); }
.nav-btn.primary:disabled { background: var(--line); color: #a89a8a; cursor: not-allowed; }
.nav-btn.ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.nav-btn.ghost:hover { border-color: var(--rust); color: var(--rust); }

.intro-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 11px; }
.intro-list li { display: flex; gap: 12px; font-size: 0.95rem; color: var(--ink-soft); }
.intro-list li .num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--rust-tint); color: var(--rust-dark);
  font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; display: flex; align-items: center; justify-content: center;
}
.privacy-note { background: var(--cream); border: 1px solid var(--line); border-radius: 4px; padding: 15px 17px; font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 24px; }
.method-note { background: var(--teal-tint); border: 1px solid var(--teal); border-radius: 4px; padding: 17px 19px; font-size: 0.93rem; color: #2d4f4a; margin-bottom: 22px; line-height: 1.65; }
.method-note b { color: #223c38; }

.crisis-box { border: 1.5px solid #7A1620; background: rgba(122,22,32,0.06); border-radius: 4px; padding: 19px; margin: 16px 0; color: #4a0e15; }
.crisis-box .cb-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin: 0 0 8px; color: #7A1620; }
.crisis-box p { font-size: 0.94rem; margin: 0 0 10px; line-height: 1.6; }
.crisis-box ul { margin: 0; padding-left: 20px; font-size: 0.94rem; }
.crisis-box li { margin-bottom: 6px; }
.crisis-box b { color: #7A1620; }

.cflag { border: 1px solid var(--rust); background: var(--rust-tint); border-radius: 4px; padding: 19px; margin-bottom: 15px; }
.cflag .cf-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--rust-dark); margin: 0 0 6px; }
.cflag p { font-size: 0.94rem; color: #6b4519; margin: 0; line-height: 1.55; }

.nflag { border: 1px solid #3D6FA5; background: rgba(61,111,165,0.08); border-radius: 4px; padding: 19px; margin-bottom: 15px; }
.nflag .nf-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #2d4f78; margin: 0 0 6px; }
.nflag p { font-size: 0.94rem; color: #2d4f78; margin: 0; line-height: 1.55; }

.rflag-strength { border: 1px solid var(--sage); background: var(--teal-tint); border-radius: 4px; padding: 19px; margin-bottom: 15px; }
.rflag-strength .rs-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #3a4f34; margin: 0 0 6px; }
.rflag-strength p { font-size: 0.94rem; color: #3a4f34; margin: 0; line-height: 1.55; }

.domain-box { border: 1px solid var(--line); border-radius: 4px; padding: 17px 19px; margin-bottom: 11px; background: var(--cream-light); }
.domain-box .db-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.domain-box .db-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--teal-dark); }
.domain-box .db-level { font-family: var(--font-body); font-style: italic; font-size: 0.85rem; color: var(--rust); font-weight: 600; }
.domain-box .db-bar { height: 6px; border-radius: 99px; background: var(--cream-deep); overflow: hidden; margin-bottom: 9px; }
.domain-box .db-bar-fill { height: 100%; background: var(--rust); }
.domain-box p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

.pattern-card { border: 1px solid var(--line); border-radius: 4px; padding: 19px; margin-bottom: 13px; background: var(--cream-light); }
.pattern-card .p-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin-bottom: 6px; color: var(--teal-dark); }
.pattern-card p { font-size: 0.94rem; color: var(--ink-soft); margin: 0; }

.notiz-card { border: 1px solid var(--line); border-radius: 4px; padding: 19px; margin-bottom: 13px; background: var(--cream-light); }
.notiz-card .nc-title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin: 0 0 8px; color: var(--ink); }
.notiz-card p { font-size: 0.94rem; color: var(--ink-soft); margin: 0; white-space: pre-wrap; }

.section-label { font-family: var(--font-body); font-style: italic; font-size: 0.92rem; color: var(--sage); margin: 28px 0 11px; }
.section-label:first-child { margin-top: 0; }

.disclaimer-box { background: var(--cream); border: 1px solid var(--line); border-radius: 4px; padding: 17px 19px; font-size: 0.88rem; color: var(--ink-soft); margin-top: 24px; line-height: 1.6; }
.disclaimer-box b { color: var(--ink); }

.result-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

@media (max-width: 600px) {
  .bogen-shell { padding: 32px 20px 70px; }
  .panel { padding: 24px 20px; }
}