/* ============================================================
   eFoil Kaufberatung — Seitenstile.
   Setzt auf brand.css auf (Farben, Schriften, Header, Footer)
   und übernimmt Hero, .info und .wrap eins zu eins vom eFoil Doctor,
   damit beide Seiten wie eine Familie aussehen.
   Keine externen Requests.
   ============================================================ */

:root{ --maxw:1120px }

/* 🔴 Muss ganz oben stehen und !important sein: Mehrere Bausteine setzen unten
   display:flex oder display:grid — das schlägt die eingebaute [hidden]-Regel des
   Browsers, und ausgeblendete Elemente blieben sichtbar. Gefunden am 24.07.2026,
   als die Steuerungsknöpfe neben dem fertigen Ergebnis stehen blieben. */
[hidden]{ display:none !important }

body{ margin:0; background:var(--bg); color:var(--ink); font-size:17px; line-height:1.6 }
a{ color:var(--green); text-decoration:none }
a:hover{ text-decoration:underline }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px }
main{ padding:6px 0 54px }

/* ---------------- Hero (identisch zum Doctor) ---------------- */
.hero{ padding:46px 0 22px; text-align:center }
.hero .kicker{ color:var(--green); font-family:var(--font-head); font-weight:700;
  font-size:clamp(46px,8.5vw,92px); line-height:.95; letter-spacing:.01em; margin:0 0 6px }
h1{ font-family:var(--font-head); font-weight:700; font-size:clamp(30px,5vw,52px);
  line-height:1.0; letter-spacing:.01em; margin:0 0 14px }
.hero p.lead{ color:var(--muted); font-size:19px; margin:0 auto; max-width:60ch }
.hero .ai{ display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  color:var(--muted); font-size:13.5px; font-weight:600 }
.hero .ai .dot{ width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 4px rgba(18,156,139,.16) }

/* ---------------- Der Fragebogen ---------------- */
.beratung{ max-width:760px; margin:22px auto 0; padding:0 4px }

/* Erklärung nur relevant, solange kein JavaScript läuft. */
.ohne-js{ background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; color:var(--muted); font-size:15px; margin:0 0 26px }

.frage{ border:1px solid var(--line); border-radius:20px; background:var(--card-2);
  padding:22px 22px 18px; margin:0 0 18px; min-inline-size:0 }
.frage legend{ font-family:var(--font-head); font-weight:700;
  font-size:clamp(24px,3.4vw,34px); line-height:1.1; padding:0 6px; margin-left:-6px }
.frage legend .nr{ display:block; font-family:var(--font-body); font-size:13px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green);
  margin-bottom:6px }

.opt{ display:flex; align-items:flex-start; gap:12px; padding:13px 16px; margin:10px 0 0;
  border:1px solid var(--line); border-radius:14px; background:var(--bg); cursor:pointer;
  transition:border-color .14s ease, background .14s ease }
.opt:hover{ border-color:var(--green) }
.opt input{ margin:3px 0 0; accent-color:var(--green); flex:0 0 auto; width:18px; height:18px }
.opt span{ flex:1 }
.opt:has(input:checked){ border-color:var(--green); background:rgba(18,156,139,.07) }
.opt:has(input:focus-visible){ outline:2px solid var(--green); outline-offset:2px }
.opt.inline{ display:inline-flex; margin:0 8px 0 0; padding:7px 13px }

/* Bilder in Frage 2 — sie erklären "schweben oder fahren" besser als Worte. */
.frage-bilder{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0 4px }
.frage-bilder figure{ margin:0 }
.frage-bilder img{ display:block; width:100%; height:auto; aspect-ratio:1/1;
  object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:14px }
.frage-bilder figcaption{ color:var(--muted); font-size:13.5px; line-height:1.45;
  margin-top:8px }

/* Zusatz- und Folgefragen sitzen sichtbar eingerückt in ihrer Hauptfrage. */
.zusatzfrage,
.entscheidungshilfe{ margin-top:20px; padding-top:16px; border-top:1px dashed var(--line) }
.entscheidungshilfe ul.cases{ list-style:none; padding:0; margin:12px 0 0 }
.entscheidungshilfe ul.cases li{ position:relative; padding:0 0 0 22px; margin:0 0 9px;
  color:var(--muted); font-size:15.5px; line-height:1.55 }
.entscheidungshilfe ul.cases li::before{ content:""; position:absolute; left:0; top:8px;
  width:7px; height:7px; border-radius:50%; background:var(--green) }
.entscheidungshilfe ul.cases strong{ color:var(--ink); font-weight:600 }
.zf-frage{ font-weight:600; margin:0 }
.zf-warum{ color:var(--muted); font-size:14px; margin:10px 0 0 }
.frage .hinweis{ color:var(--muted); font-size:14.5px; line-height:1.55; margin:16px 0 0 }

/* Gewicht */
.schieber{ margin-top:14px }
.schieber input[type=range]{ width:100%; accent-color:var(--green) }
.schieber output{ display:block; font-family:var(--font-head); font-weight:700;
  font-size:44px; line-height:1.1; color:var(--green); text-align:center; margin:6px 0 2px }
.schieber .einheit{ text-align:center; margin-top:8px }

/* Steuerung */
.steuerung{ display:flex; gap:12px; align-items:center; margin:26px 0 0 }
.steuerung button{ font:inherit; font-weight:700; border-radius:14px; padding:13px 26px;
  cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--ink) }
.steuerung .btn-weiter{ background:var(--green); border-color:var(--green); color:#fff }
.steuerung .btn-weiter:hover{ background:var(--green-d); border-color:var(--green-d) }
.steuerung .btn-zurueck:hover{ border-color:var(--green); color:var(--green) }
.steuerung button:disabled{ opacity:.45; cursor:default }

/* Fortschritt — nur mit JavaScript sichtbar.
   Die Schritte sind anklickbar: zurück immer, vorwärts nur bis zum bereits
   erreichten Schritt. Sonst überspränge man unbeantwortete Fragen. */
.fortschritt{ max-width:760px; margin:0 auto 22px; padding:0 4px }
.fortschritt .schritte{ display:flex; align-items:center; list-style:none; margin:0; padding:0 }
.fortschritt .schritte li{ display:flex; align-items:center; flex:1; min-width:0 }
.fortschritt .schritte li:last-child{ flex:0 0 auto }
/* Verbindungslinie hinter jedem Punkt außer dem letzten */
.fortschritt .schritte li::after{ content:""; flex:1; height:2px; background:var(--line);
  margin:0 5px; border-radius:2px }
.fortschritt .schritte li:last-child::after{ display:none }
.fortschritt .schritte li:has(.erledigt)::after{ background:var(--green) }

.fortschritt button{ background:none; border:0; padding:0; font:inherit; cursor:pointer;
  display:block }
.fortschritt button[disabled]{ cursor:default }
.fortschritt .pkt{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  border:2px solid var(--line); background:var(--card); color:var(--muted);
  font-size:13.5px; font-weight:700; line-height:1;
  transition:border-color .14s ease, background .14s ease, color .14s ease }
.fortschritt .erledigt .pkt{ border-color:var(--green); color:var(--green) }
.fortschritt .ist-aktiv .pkt{ border-color:var(--green); background:var(--green); color:#fff }
.fortschritt button:not([disabled]):hover .pkt{ border-color:var(--green) }
.fortschritt button:focus-visible .pkt{ outline:2px solid var(--green); outline-offset:3px }
.fortschritt .ziel .pkt{ font-size:15px }

/* Für Bildschirmleser: der Punkt zeigt nur eine Zahl, hier steht der ganze Satz. */
.nurlesbar{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0 }

/* ---------------- Ergebnis ---------------- */
.ergebnis{ max-width:760px; margin:30px auto 0; padding:0 4px }
.ergebnis .karte{ border:1px solid var(--line); border-radius:20px; background:var(--card);
  padding:26px; box-shadow:0 18px 50px rgba(0,0,0,.06) }
.ergebnis .rolle{ color:var(--green); font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; margin:0 0 6px }
.ergebnis .bild{ display:block; width:100%; max-width:420px; height:auto; aspect-ratio:1/1;
  object-fit:contain; background:#fff; border-radius:16px; margin:0 auto 18px }
.ergebnis .dazu li img{ width:52px; height:52px; object-fit:contain; background:#fff;
  border-radius:8px; vertical-align:middle; margin-right:12px }
.ergebnis h2{ font-family:var(--font-head); font-weight:700; font-size:clamp(30px,5vw,46px);
  line-height:1.05; margin:0 0 10px }
.ergebnis .preis{ font-size:24px; font-weight:700; margin:0 0 14px }
.ergebnis .daten{ color:var(--muted); font-size:15px; margin:0 0 16px }
.ergebnis .begruendung p{ margin:0 0 12px }
.ergebnis .dazu{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line) }
.ergebnis .dazu h3{ font-size:17px; margin:0 0 10px }
.ergebnis .dazu ul{ list-style:none; padding:0; margin:0 }
.ergebnis .dazu li{ padding:9px 0; border-bottom:1px solid var(--line) }
.ergebnis .dazu li:last-child{ border-bottom:0 }
.ergebnis .warnung{ background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12;
  border-radius:14px; padding:13px 16px; margin:0 0 16px; font-size:15.5px }
.ergebnis .neu{ margin-top:18px }

@media (prefers-color-scheme: dark){
  .ergebnis .warnung{ background:#2a2410; border-color:#5c4a12; color:#fbbf24 }
}

/* ---------------- Beratungstext (identisch zum Doctor) ---------------- */
.info{ max-width:760px; margin:56px auto 8px; padding:0 4px }
.info h2{ font-size:24px; line-height:1.25; margin:38px 0 12px; color:var(--ink) }
.info h2:first-child{ margin-top:0 }
.info h3{ font-size:19px; line-height:1.3; margin:28px 0 10px; color:var(--ink) }
.info p{ color:var(--muted); font-size:16px; line-height:1.65; margin:0 0 14px }
.info a{ color:var(--green); font-weight:600 }
.info ul.cases{ list-style:none; padding:0; margin:0 0 14px }
.info ul.cases li{ position:relative; padding:0 0 0 22px; margin:0 0 10px;
  color:var(--muted); font-size:16px; line-height:1.6 }
.info ul.cases li::before{ content:""; position:absolute; left:0; top:9px; width:8px;
  height:8px; border-radius:50%; background:var(--green) }
.info ul.cases strong{ color:var(--ink); font-weight:600 }
.info .note{ font-size:14px; line-height:1.6; color:var(--muted);
  border-top:1px solid var(--line); padding-top:14px; margin-top:24px }

/* Tabellen scrollen auf schmalen Bildschirmen in sich, nie die Seite */
.regeltabelle{ width:100%; border-collapse:collapse; margin:0 0 18px; font-size:15.5px;
  display:block; overflow-x:auto }
.regeltabelle caption{ text-align:left; color:var(--muted); font-size:14px;
  font-weight:600; padding:0 0 8px }
.regeltabelle th, .regeltabelle td{ text-align:left; padding:10px 14px 10px 0;
  border-bottom:1px solid var(--line); vertical-align:top }
.regeltabelle th{ font-weight:700; white-space:nowrap }
.regeltabelle td{ color:var(--muted) }
.regeltabelle td:first-child{ color:var(--ink); font-weight:600; white-space:nowrap }

/* Modellkarten */
.boards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px;
  margin:0 0 18px }
.board{ border:1px solid var(--line); border-radius:16px; background:var(--card);
  padding:16px 18px }
.board img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain;
  margin:0 0 10px; background:#fff; border-radius:10px }
.board h3{ font-size:17px; margin:0 0 4px; color:var(--ink) }
.board .rolle{ color:var(--green); font-size:13px; font-weight:600; margin:0 0 10px }
.board .preis{ font-size:19px; font-weight:700; color:var(--ink); margin:0 0 6px }
.board .daten{ color:var(--muted); font-size:14px; margin:0 }

/* ---------------- Kontakt ---------------- */
.kontakt{ max-width:760px; margin:56px auto 0; padding:28px; border:1px solid var(--line);
  border-radius:20px; background:var(--card) }
.kontakt h2{ font-family:var(--font-head); font-weight:700; font-size:clamp(26px,4vw,38px);
  line-height:1.05; margin:0 0 12px }
.kontakt p{ color:var(--muted); font-size:16px; line-height:1.65; margin:0 0 12px }
.kontakt .person{ color:var(--ink); font-size:18px; margin:18px 0 4px }
.kontakt .wege{ font-size:18px; font-weight:600; margin:0 0 16px }
.kontakt .wege .sep{ color:var(--muted); margin:0 8px }
.kontakt ul.quals{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line);
  padding-top:14px }
.kontakt ul.quals li{ position:relative; padding:0 0 0 22px; margin:0 0 8px;
  color:var(--muted); font-size:15px; line-height:1.55 }
.kontakt ul.quals li::before{ content:""; position:absolute; left:0; top:8px; width:7px;
  height:7px; border-radius:50%; background:var(--green) }

@media (max-width:640px){
  .info{ margin-top:38px }
  .info h2{ font-size:21px }
  .frage{ padding:18px 16px 14px }
  .kontakt{ padding:22px 18px }
  .steuerung button{ flex:1; padding:13px 16px }
  /* Neun Punkte plus Ziel müssen auch auf ein schmales Display passen. */
  .fortschritt .pkt{ width:25px; height:25px; font-size:12px }
  .fortschritt .schritte li::after{ margin:0 3px }
}