/* ============================================================
   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 }

/* 🔴 Die Fragekarte ist das Werkzeug der Seite — sie ist die EINZIGE dunkle
   Fläche und hebt sich damit von allem anderen ab (Andreas, 01.08.2026:
   "Das ist das, was die Leute ausfüllen sollen").
   Schwarz ist dasselbe wie im Header (--header-bg), Weiß als Text darauf —
   beides genau so im Brand Guide vorgesehen. Grün bleibt Akzent: Rand,
   Ziffer, Auswahl. NIE Grün als Fläche für längere Texte (Brand Guide). */
.frage{ border:1px solid rgba(18,156,139,.5); border-radius:22px;
  background:var(--header-bg); color:var(--header-ink);
  padding:26px 24px 22px; margin:0 0 18px; min-inline-size:0;
  box-shadow:0 22px 48px rgba(0,0,0,.24), 0 0 0 5px rgba(18,156,139,.10);
  /* Lässt den Browser Radios und Schieberegler dunkel rendern statt hell
     auf schwarzem Grund. */
  color-scheme:dark }

/* 🔴 float statt der normalen legend-Darstellung. Ein <legend> sitzt sonst
   AUF der Rahmenlinie — bei zweizeiligen Fragen stand die Überschrift halb
   über dem Kasten (Screenshot Andreas, 01.08.2026, Frage 1). Nur float oder
   position:absolute holen ein legend aus diesem Sonderplatz heraus;
   display:block allein genügt laut Spezifikation nicht. */
.frage legend{ float:left; width:100%; font-family:var(--font-head); font-weight:700;
  font-size:clamp(24px,3.4vw,34px); line-height:1.12; padding:0; margin:0 0 4px }
.frage > *:not(legend){ clear:both }
.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 }

/* Alles, was INNERHALB der schwarzen Karte liegt, muss umgefärbt werden.
   Bewusst als eigener Block: Wer die Karte je wieder hell macht, löscht genau
   diesen Abschnitt und nichts sonst. */
.frage .opt{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);
  color:var(--header-ink) }
.frage .opt:hover{ border-color:var(--green); background:rgba(18,156,139,.18) }
.frage .opt:has(input:checked){ border-color:var(--green); background:rgba(18,156,139,.28) }
.frage .zusatzfrage,
.frage .entscheidungshilfe{ border-top-color:rgba(255,255,255,.22) }
.frage .hinweis,
.frage .zf-warum,
.frage .frage-bilder figcaption{ color:rgba(255,255,255,.68) }
.frage .entscheidungshilfe ul.cases li{ color:rgba(255,255,255,.74) }
.frage .entscheidungshilfe ul.cases strong{ color:var(--header-ink) }
.frage .frage-bilder img{ border-color:rgba(255,255,255,.18) }

/* 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) }

/* Zwei Karten nebeneinander — seit 01.08.2026. Im Jetboard-Zweig steht mo-jet
   auf jeder Ergebnisseite, auch wenn ein Awake empfohlen wurde (Andreas).
   Die Klasse .zwei setzt oberflaeche.js, wenn es ein zweites Board gibt. */
.ergebnis.zwei{ max-width:1060px }
.karten{ display:grid; gap:20px; grid-template-columns:1fr; align-items:start }
.ergebnis.zwei .karten{ grid-template-columns:1fr 1fr }
/* Die zweite Karte ist gleichwertig, aber nicht die Empfehlung: gleicher
   Rahmen, kein Schatten. */
.ergebnis .karte-zweit{ box-shadow:none; background:transparent }
.ergebnis .karte-zweit h2{ font-size:clamp(24px,3.6vw,34px) }
.ergebnis .karte-zweit .preis{ font-size:21px }
/* Der Fußblock steht unter beiden Karten, nicht in einer davon. */
.ergebnis .karte-fuss{ margin-top:20px; box-shadow:none }
.ergebnis .karte-fuss .dazu{ margin-top:0; padding-top:0; border-top:0 }

@media (max-width:900px){
  .ergebnis.zwei .karten{ grid-template-columns:1fr }
}
.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 }

/* ---------------- Autorität und Ablauf (neu 01.08.2026) ----------------
   Vorbild efoilgc: Belege und Ablauf stehen ÜBER dem Werkzeug, nicht darunter.
   Aufbau bewusst von .kontakt geerbt — es ist dieselbe Art Kasten. */
.autoritaet, .ablauf{ max-width:760px; margin:28px auto 0; padding:24px 26px;
  border:1px solid var(--line); border-radius:20px; background:var(--card) }
.autoritaet h2, .ablauf h2{ font-size:20px; margin:0 0 16px; color:var(--ink) }

.autoritaet .kacheln{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:14px; margin:0 0 18px }
.autoritaet .kachel{ text-align:center }
.autoritaet .kachel strong{ display:block; font-family:var(--font-head); font-weight:700;
  font-size:clamp(24px,4vw,32px); line-height:1.1; color:var(--ink) }
.autoritaet .kachel span{ display:block; margin-top:4px; color:var(--muted);
  font-size:13.5px; line-height:1.4 }

.autoritaet .zitat{ margin:0 0 18px; padding:0 0 0 16px; border-left:3px solid var(--green) }
.autoritaet .zitat p{ margin:0 0 6px; font-size:17px; line-height:1.55; color:var(--ink) }
.autoritaet .zitat cite{ font-style:normal; font-size:14px; color:var(--muted) }

.autoritaet ul.quals{ list-style:none; padding:14px 0 0; margin:0;
  border-top:1px solid var(--line) }
.autoritaet ul.quals li{ position:relative; padding:0 0 0 22px; margin:0 0 8px;
  color:var(--muted); font-size:15px; line-height:1.55 }
.autoritaet ul.quals li:last-child{ margin-bottom:0 }
.autoritaet ul.quals li::before{ content:""; position:absolute; left:0; top:8px; width:7px;
  height:7px; border-radius:50%; background:var(--green) }
.autoritaet ul.quals a{ color:var(--green); font-weight:600 }
/* Store-Verweise der App-Zeile — bewusst ohne Blockpräfix, damit sie im
   Autoritäts- UND im Kontaktblock gleich aussehen. */
ul.quals .verweise{ font-size:14px }
ul.quals .verweise a{ color:var(--green); font-weight:600; white-space:nowrap }

.ablauf ol.schritte{ list-style:none; padding:0; margin:0; display:grid; gap:12px }
.ablauf ol.schritte li{ position:relative; padding:0 0 0 40px; color:var(--muted);
  font-size:15px; line-height:1.55 }
.ablauf ol.schritte strong{ display:block; color:var(--ink); font-weight:600; font-size:16px }
.ablauf ol.schritte .nr{ position:absolute; left:0; top:1px; width:26px; height:26px;
  border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center }

/* Der Vorsichtshinweis gilt beim Durchklicken genauso wie beim Lesen ohne
   JavaScript — er bleibt also stehen. Bewusst OHNE Kasten: Er stand vorher als
   graue Karte direkt über der Fragekarte und nahm ihr die Aufmerksamkeit. */
.beratung .hinweis-vorsicht{ max-width:60ch; margin:0 auto 18px; text-align:center;
  color:var(--muted); font-size:14.5px; line-height:1.55 }

@media (max-width:640px){
  .autoritaet, .ablauf{ padding:20px 18px }
}

/* ---------------- 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 }
}

/* ============ Sprachwahl (02.08.2026, zweite Fassung) ============
   🔴 Die erste Fassung saß in der schwarzen Kopfleiste. Auf dem Smartphone
      liefen die acht Flaggen neben Logo und Burger-Knopf aus dem Bild und
      waren nicht antippbar — gefunden von Andreas am Telefon, nicht am
      Schreibtisch.
   ✅ Jetzt wie beim eFoil Doctor: zentrierte Reihe unter dem Vorspann, die
      umbrechen darf. Form und Farbe kommen aus brand.css (.lang-flags /
      .lang-flag) — dort sind sie für hellen Hintergrund gebaut, und genau
      dort stehen sie jetzt. Hier steht nur noch die Platzierung.
   🔑 Dass beide Befunde vom Vormittag — weiße Kacheln UND Überlauf — dieselbe
      Ursache hatten, zeigt sich erst hier: eine Klasse im falschen
      Zusammenhang. */
.hero .lang-flags{ margin:22px 0 0; gap:8px }
.hero .lang-flag{ padding:7px 14px; font-size:14px }
/* Auf schmalen Displays kleiner, damit möglichst wenige Zeilen entstehen —
   aber nie unter 44 px Tipphöhe (Fingerbreite). */
@media (max-width:640px){
  .hero .lang-flags{ gap:6px; margin-top:18px }
  .hero .lang-flag{ padding:8px 11px; font-size:13px; min-height:44px }
  .hero .lang-flag .flag{ width:21px; height:14px }
}