/* Alen feedback, 20.10.2026 — local review draft; v5 remains unchanged. */

/* One primary action, one recognisable button shape. */
.button,
.hero .button,
#start .button,
.header nav > a.nav-call,
#category-cta {
  border-radius: 8px;
  min-height: 50px;
  padding: 15px 22px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
.header nav > a.nav-call { min-height: 46px; padding: 13px 18px; }
.header nav { gap: 24px; }
.hero-note { font-weight: 700; color: var(--text); }
.proof-metric > strong { min-height: 1em; }
.route-map-group { min-width: 0; }
.route-caption { font-size: 11px; text-align: center; margin: 2px 0 12px; }
.route-board-label { font-size: 11px; white-space: nowrap; }
.form-result { scroll-margin-top: 16px; }

/* Keep the quiet layout, remove the long unstructured section gaps. */
main > #problem { padding-block: 88px 56px; }
main > #so-funktionierts { padding-block: 64px 64px; }
main > #produkte { padding-block: 76px 64px; }
main > #sicherheit { padding-block: 76px 64px; }
main > #ueber-uns { padding-block: 76px 72px; }
main > #warum-jetzt { padding-block: 76px 72px; }
main > #zugang { padding-block: 76px 64px; }
main > #fragen { padding-block: 64px 52px; }
main > #start { padding-block: 64px 140px; }

#so-funktionierts::before,
#sicherheit::before,
#ueber-uns::before,
#warum-jetzt::before,
#fragen::before,
#start::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--wrap);
  transform: translateX(-50%);
  border-top: 1px solid var(--border);
}
.problem-intro { margin-top: 0; }
.problem-card .card-takeaway { margin-top: 18px; }
.problem-close { margin-top: 32px; max-width: 880px; }
.section-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  padding-top: 26px;
  margin-top: 30px;
  border-top: 1px solid var(--border);
}
.problem-action { justify-content: space-between; }
.problem-action p { max-width: 480px; font-size: 16px; }
.section-action .button { flex-shrink: 0; }
.process-action { margin-top: 34px; }
.process-action .compare-trigger { margin-top: 0; }

/* Orange is an interaction/brand accent; green stays reserved for status. */
.detail-index { color: var(--accent-2); }
.category-choice {
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  transition: background-color .18s, border-color .18s;
}
.choice-marker { line-height: 1; text-align: center; }
.category-choice:hover,
.category-choice:focus-visible {
  background: #302A29;
  border-color: var(--accent-2);
}
.category-choice:hover strong,
.category-choice:hover .choice-index,
.category-choice:hover .choice-marker,
.category-choice:focus-visible strong { color: var(--accent-2); }
.category-choice.active { background: #232D3C; border-color: #9A735D; }
.category-choice.active::before { background: var(--accent-2); }
.category-choice.active:hover,
.category-choice.active:focus-visible { background: #302A29; }
.category-choice.active .choice-marker { color: var(--accent-2); }
.security-icon,
.fact-icon svg { stroke: var(--accent-2); }
#category-cta { margin-top: 24px; }
.flow-cta p strong { font-weight: 700; }

/* Separate the founders from the narrative without creating another blank section. */
.founder-grid {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.story-actions { margin-top: 28px; gap: 16px; }

/* Same progressive line and nodes as the first three-step section. */
.early-process { position: relative; border-top: 0 !important; }
.early-process::before,
.early-process::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-strong);
}
.early-process::after {
  background: var(--text);
  transform: scaleX(var(--early-progress, 0));
  transform-origin: left;
}
.early-process li { position: relative; padding-top: 26px; }
.early-process li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  z-index: 1;
}
.early-process li.is-active::before { background: var(--text); border-color: var(--text); }
.early-process li.is-active .early-number,
.early-process li:hover .early-number { color: var(--accent-2); }
.early-number { transition: color .25s; }

/* A subtle open state, without turning the FAQ into an orange wall. */
.faq-grid { row-gap: 24px; }
.faq-contact { margin-top: 0; }
.faq-list details {
  padding-inline: 18px;
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  border-radius: 8px;
  transition: background-color .18s, border-color .18s;
}
.faq-list details[open] {
  background: #272A30;
  border-color: #8F6244;
}
.faq-list details[open] summary { color: var(--accent-2); }
.faq-list summary { padding-right: 30px; }
.faq-list summary:focus-visible { outline-offset: 0; }
.faq-contact a { white-space: nowrap; }

@media (max-width: 1150px) and (min-width: 951px) {
  .header nav { gap: 16px; }
  .header nav > a { font-size: 13px; }
  .header nav > a.nav-call { font-size: 12px; padding-inline: 14px; }
  .hero .actions { align-items: flex-start; }
}
@media (max-width: 950px) {
  .header nav { gap: 8px; }
  .problem-action p { max-width: 100%; }
}
@media (max-width: 600px) {
  main > #problem { padding-block: 58px 38px; }
  main > #so-funktionierts { padding-block: 48px 44px; }
  main > #produkte,
  main > #sicherheit,
  main > #ueber-uns,
  main > #warum-jetzt,
  main > #zugang { padding-block: 52px 44px; }
  main > #fragen { padding-block: 48px 36px; }
  main > #start { padding-block: 48px 114px; }
  .hero h1 { font-size: clamp(35px, 10.8vw, 42px); }
  .button, .hero .button, #start .button, #category-cta { padding-inline: 17px; }
  .section-action { align-items: stretch; flex-direction: column; gap: 18px; margin-top: 26px; padding-top: 22px; }
  .section-action .button { width: 100%; }
  .section-action .text-link { align-self: flex-start; }
  .problem-action p { font-size: 15px; }
  .story-actions { align-items: stretch; flex-direction: column; }
  .story-actions .button { width: 100%; }
  .story-actions .small { text-align: center; }
  .founder-grid { margin-top: 36px; padding-top: 24px; }
  #category-cta { width: 100%; }
  .flow-category-grid { grid-template-columns: minmax(0, 1fr); }
  .flow-choices { min-width: 0; }
  .category-choice strong, .flow-category-detail h3 { hyphens: auto; overflow-wrap: anywhere; }
  .early-process { padding-left: 26px !important; gap: 34px !important; }
  .early-process::before, .early-process::after { left: 3px; right: auto; top: 0; bottom: 0; height: auto; width: 2px; }
  .early-process::after { transform: scaleY(var(--early-progress, 0)); transform-origin: top; }
  .early-process li { padding-top: 0; }
  .early-process li::before { top: 3px; left: -27px; }
  .faq-grid { row-gap: 0; }
  .faq-contact { margin-top: 24px; }
  .faq-list details { padding-inline: 14px; }
  .faq-list summary { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .early-process::after { transform: none; }
  .early-process li::before { background: var(--text); border-color: var(--text); }
}