@import url("fonts.css");
/* ==========================================================================
   SailingX-Academy – gemeinsames Layout aller Lektionen
   Änderungen hier wirken auf alle 194 Lektionen.
   ========================================================================== */
:root{
  /* Markenfarben laut SailingX-Markenhandbuch */
  --stage:#122b38; --stage-deep:#10191f;          /* dunkle Bühne */
  --navy:#173746; --navy2:#1f5a78;                 /* Überschriften */
  --accent:#2289c6; --accent-dark:#1b72a6; --accent-soft:#e6f1f8; --indigo:#34479e;
  --sand:#f4f6f7; --ink:#2b2b2b; --muted:#5b6770; --line:#dfe5e9; --white:#ffffff;
  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ok:#1d8a5a; --ok-soft:#e6f4ec; --bad:#c0392b; --bad-soft:#fbeae8;
  --note:#fff5e6; --note-line:#e0a23a; --note-ink:#7a5212;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--sand);font-family:var(--font);font-size:15.5px;color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;}
a{color:var(--navy2);}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* ---------- Kopfleiste (nur wenn die Lektion direkt, ohne Kurs-App, geöffnet wird) ---------- */
.sx-top{background:#fff;border-bottom:1px solid var(--line);}
.sx-top-in{max-width:780px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sx-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:500;font-size:15px;}
.sx-brand img{height:40px;width:auto;display:block;}
.sx-brand span{letter-spacing:.02em;}
.sx-top a.sx-open{background:var(--accent);color:#fff;text-decoration:none;font-size:13px;font-weight:600;padding:7px 12px;border-radius:8px;white-space:nowrap;}

/* ---------- Kopfbereich der Lektion ---------- */
.wrap{max-width:780px;margin:0 auto;padding:0 18px 64px;}
.hero{background:linear-gradient(160deg,var(--stage-deep) 0%,var(--stage) 60%,#133342 100%);color:#fff;padding:30px 18px 26px;}
.hero-inner{max-width:780px;margin:0 auto;}
.crumb{font-size:12.5px;letter-spacing:.02em;color:#9fb6c2;margin:0 0 14px;}
.crumb b{color:#fff;font-weight:600;}
.hero h1{margin:0 0 8px;font-size:27px;font-weight:500;line-height:1.25;}
.hero h1 .lnum{display:inline-block;vertical-align:middle;font-size:14px;font-weight:700;letter-spacing:.02em;background:var(--accent);color:#fff;border-radius:7px;padding:3px 9px;margin:0 10px 4px 0;}
.hero .lead{margin:0;color:#cfe0ee;font-size:16px;max-width:62ch;}
.badges{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);color:#eaf3fb;font-size:13px;padding:6px 12px;border-radius:999px;}

/* ---------- Inhaltskarten ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px 22px;margin-top:22px;}
h2{font-size:20px;font-weight:600;margin:0 0 12px;color:var(--navy);display:flex;align-items:center;gap:10px;}
h2 .n{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--navy2);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;}
h3{font-size:16px;font-weight:600;margin:18px 0 6px;color:var(--navy2);}
p{margin:0 0 12px;}
.objectives{list-style:none;margin:0;padding:0;}
.objectives li{position:relative;padding:7px 0 7px 30px;border-bottom:1px solid var(--line);}
.objectives li:last-child{border-bottom:0;}
.objectives li::before{content:"\2713";position:absolute;left:0;top:7px;color:var(--accent);font-weight:700;}
.step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.step:last-child{border-bottom:0;}
.step .ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--navy2);font-size:20px;display:flex;align-items:center;justify-content:center;}
.step .tx{flex:1;}
.step .tx b{color:var(--navy2);}
.keybox{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;padding:14px 16px;margin-top:8px;}
.keybox p{margin:0;}
.notebox{background:var(--note);border-left:4px solid var(--note-line);border-radius:0 10px 10px 0;padding:12px 16px;margin-top:4px;color:var(--note-ink);font-size:14px;}
.notebox p{margin:0;}
.tag{display:inline-block;font-size:12px;font-weight:600;color:var(--navy2);background:var(--accent-soft);padding:2px 9px;border-radius:6px;margin-right:6px;}
.figcap{margin-top:12px;color:var(--muted);font-size:14px;}
table{border-collapse:collapse;max-width:100%;}
.card table{display:block;overflow-x:auto;}
svg{max-width:100%;}

/* ---------- Interaktive Rechner ---------- */
.calc{background:var(--stage);border-radius:14px;padding:18px 18px 16px;color:#eaf3fb;margin-top:6px;}
.calc h3{color:#fff;font-size:16px;margin:0 0 12px;}
.calc .row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.calc .fld{flex:1 1 120px;}
.calc label{display:block;font-size:12px;color:#a9c4dc;margin-bottom:4px;}
.calc input,.calc select{width:100%;box-sizing:border-box;border:1px solid #2d5566;background:#1a3b4b;color:#fff;border-radius:8px;padding:9px 10px;font-size:15px;font-family:inherit;}
.calc .seg{display:flex;gap:6px;margin-bottom:12px;}
.calc .seg button{flex:1;border:1px solid #2d5566;background:#1a3b4b;color:#cfe0ee;border-radius:8px;padding:8px;font-size:13px;font-weight:600;cursor:pointer;}
.calc .seg button.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.calc .go{margin-top:12px;background:var(--accent);font-family:inherit;border:0;color:#fff;border-radius:8px;padding:11px 18px;font-size:15px;font-weight:600;cursor:pointer;}
.calc .go:hover{background:var(--accent-dark);}
.calc .out{margin-top:14px;background:#1a3b4b;border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.7;display:none;}
.calc .out.show{display:block;}
.calc .out b{color:#7fc0f0;}
.calc .big{font-size:22px;font-weight:700;color:#fff;}
.calc .hint{font-size:12px;color:#89a6c2;margin-top:8px;}

/* ---------- Selbsttest ---------- */
.quiz-intro{color:var(--muted);margin-bottom:4px;}
.quiz-q{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);}
.quiz-q:first-of-type{border-top:0;padding-top:0;}
.qnum{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:4px;}
.qtext{font-weight:600;color:var(--navy);margin-bottom:12px;}
.opt{display:block;width:100%;text-align:left;background:var(--white);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:9px;font-size:15px;font-family:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s;}
.opt:hover{border-color:var(--accent);}
.opt:disabled{cursor:default;}
.opt.correct{border-color:var(--ok);background:var(--ok-soft);}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft);}
.opt .mark{float:right;font-weight:700;}
.opt.correct .mark{color:var(--ok);}
.opt.wrong .mark{color:var(--bad);}
.expl{display:none;font-size:14px;color:var(--muted);background:var(--sand);border-radius:8px;padding:10px 12px;margin-top:2px;}
.expl.show{display:block;}
.result{display:none;margin-top:22px;text-align:center;background:var(--stage);color:#fff;border-radius:12px;padding:22px;}
.result.show{display:block;}
.result .score{font-size:34px;font-weight:700;margin:4px 0;}
.result .msg{color:#cfe0ee;}
.retry{margin-top:14px;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 20px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;}

/* ---------- Vor/Zurück-Navigation ---------- */
.lnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;}
.lnav a{display:flex;flex-direction:column;gap:2px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 16px;text-decoration:none;color:var(--navy2);font-weight:600;font-size:15px;line-height:1.35;transition:border-color .15s,box-shadow .15s;}
.lnav a:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(19,49,79,.08);}
.lnav a small{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.lnav a.next{text-align:right;grid-column:2;}
.lnav a.prev{grid-column:1;}
.foot{margin-top:30px;text-align:center;font-size:12px;color:var(--muted);}
.foot a{color:var(--muted);}

@media(max-width:520px){
  .hero h1{font-size:23px;} h2{font-size:18px;}
  .lnav{grid-template-columns:1fr;} .lnav a.next,.lnav a.prev{grid-column:1;}
  .sx-brand span{display:none;}
}
@media print{
  .sx-top,.lnav,#quiz,.retry{display:none!important;}
  .hero{background:none;color:var(--ink);padding:0;} .hero .lead,.crumb,.crumb b{color:var(--ink);}
  .badge{background:none;color:var(--muted);border:1px solid var(--line);}
  .card{break-inside:avoid;}
}

/* ---------- Brücke zu SailingX (letzte Lektion jedes Moduls) ---------- */
.cta-card{background:linear-gradient(160deg,var(--stage-deep) 0%,var(--stage) 70%,#133342 100%);color:#fff;border:0;position:relative;overflow:hidden;}
.cta-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#e4282b,#f39129,#f5dd2b,#3baa4a,#1fa385,#2289c6,#34479e);}
.cta-card h2{color:#fff;font-weight:500;}
.cta-card p{color:#cfdde5;}
.cta-card .cta-kicker{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#9fb6c2;margin-bottom:6px;}
.cta-btn{display:inline-block;margin-top:4px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;padding:11px 20px;border-radius:10px;}
.cta-btn:hover{background:var(--accent-dark);}

/* ---------- Hinweis auf den Wiederholungsstapel ---------- */
.stapel-hint{margin-top:10px;font-size:14px;color:#cfdde5;}
.stapel-hint a{color:#fff;}

/* ---------- Nur-Rechner-Ansicht (Werkzeugkasten) ---------- */
body.nur-rechner{background:transparent;}
body.nur-rechner .hero,body.nur-rechner .lnav,body.nur-rechner .foot,body.nur-rechner #quiz,body.nur-rechner .cta-card,body.nur-rechner .sx-top{display:none!important;}
body.nur-rechner .wrap{padding:0 0 4px;max-width:none;}
body.nur-rechner main > section.card:not(.hat-rechner){display:none;}
body.nur-rechner section.hat-rechner{margin-top:0;border:0;padding:0;background:transparent;}
body.nur-rechner section.hat-rechner > h2{display:none;}
body.nur-rechner .calc > h3{display:none;}

/* ---------- Animationen (assets/szenen.js) ---------- */
.szene-card .figcap{margin-top:14px;}
.sx-szene{margin:6px 0 0;}
.sx-buehne{position:relative;border-radius:12px;overflow:hidden;background:#dcedf5;box-shadow:inset 0 0 0 1px var(--line);}
.sx-buehne svg{display:block;width:100%;height:auto;}
.sx-cap{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:8px;background:rgba(18,43,56,.88);color:#fff;border-radius:10px;padding:6px 12px 6px 6px;font-size:14px;font-weight:600;max-width:calc(100% - 110px);line-height:1.3;}
.sx-cap-n{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;}
.sx-cap-n:empty{display:none;}
.sx-ctrl{display:flex;align-items:center;gap:8px;margin-top:10px;}
.sx-b{flex:0 0 auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:15px;cursor:pointer;font-family:inherit;}
.sx-b:hover{border-color:var(--accent);}
.sx-play{background:var(--accent);border-color:var(--accent);color:#fff;}
.sx-speed{width:auto;padding:0 10px;font-size:13px;font-weight:600;}
.sx-bar{position:relative;flex:1;height:10px;background:var(--line);border-radius:99px;cursor:pointer;}
.sx-bar > i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:99px;}
.sx-marks b{position:absolute;top:-3px;width:3px;height:16px;margin-left:-1.5px;background:var(--navy);border-radius:2px;opacity:.55;}
.sx-steps{list-style:none;margin:12px 0 0;padding:0;counter-reset:none;}
.sx-steps li button{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;padding:7px 10px;font-family:inherit;font-size:14.5px;line-height:1.45;color:var(--muted);cursor:pointer;border-radius:0 8px 8px 0;}
.sx-steps li button b{color:var(--navy);font-weight:600;}
.sx-steps li button:hover{background:var(--sand);}
.sx-steps li.on button{background:var(--accent-soft);border-left-color:var(--accent);color:var(--ink);}
.sx-sn{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:var(--line);color:var(--navy);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.sx-steps li.on .sx-sn{background:var(--accent);color:#fff;}
.sx-lbl{font-family:var(--font);font-size:12.5px;fill:var(--navy);font-weight:500;paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:3px;stroke-linejoin:round;}
.sx-lbl-c{text-anchor:middle;}
.sx-lbl-r{text-anchor:end;}
.sx-lbl-kai{fill:#5d5546;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11px;stroke:none;}
.sx-lbl-leine{font-size:11.5px;fill:#6b4422;}
.sx-lbl-rot{fill:#b3132b;font-weight:600;}
.sx-lbl-gruen{fill:#157a41;font-weight:600;}
.sx-lbl-hell{fill:#fff;stroke:rgba(8,20,30,.75);}
.sx-lbl-klein{font-size:11px;}
.sx-lbl-gross{font-size:15px;font-weight:600;}
.sx-ruf-t{font-family:var(--font);font-size:13px;font-weight:600;fill:#fff;text-anchor:middle;}
.sx-hud-t{font-family:var(--font);font-size:10.5px;font-weight:700;letter-spacing:.1em;fill:var(--muted);}
.sx-hud-s{font-family:var(--font);font-size:11.5px;fill:#9aa6ae;}
.sx-hud-s.on{fill:var(--navy);font-weight:700;}
@media(max-width:520px){
  .sx-cap{font-size:12.5px;top:6px;left:6px;padding:4px 9px 4px 4px;}
  .sx-steps li button{font-size:13.5px;}
}
@media (max-width:560px){.sx-lbl{font-size:18px;stroke-width:4px;}.sx-lbl-klein,.sx-lbl-kai{font-size:15px;}.sx-lbl-gross{font-size:20px;}}
/* Statische Lehrgrafiken (einheitlicher Stil) */
.fig-wrap{margin:6px 0 0;border-radius:12px;background:#f7fafc;box-shadow:inset 0 0 0 1px var(--line);padding:10px;overflow:hidden;}
.fig-wrap svg{display:block;width:100%;height:auto;}
.fg{font-family:var(--font);font-size:14px;fill:#173746;font-weight:500;paint-order:stroke;stroke:#f7fafc;stroke-width:4px;stroke-linejoin:round;}
.fg-s{font-size:12.5px;fill:#5b6770;}
.fg-h{font-size:16px;font-weight:700;}
.fg-b{font-weight:700;}
.fg-c{text-anchor:middle;}
.fg-e{text-anchor:end;}
.fg-r{fill:#b3132b;}
.fg-g{fill:#157a41;}
.fg-a{fill:#1f6fa6;}
.fg-w{fill:#fff;stroke:rgba(8,20,30,.55);}
.fg-n{stroke:none;}
@media (max-width:560px){.fig-wrap{padding:6px;}.fg{font-size:19px;stroke-width:5px;}.fg-s{font-size:17px;}.fg-h{font-size:21px;}}
@media print{.sx-ctrl{display:none;}}
/* Knoten-Animationen (A.3.1.1): Auswahl mit Vorschaubildern + ein Player je Knoten */
.knoten-wahl{display:none;}
.knoten-js .knoten-wahl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 16px;}
.knoten-wahl button{display:flex;flex-direction:column;gap:5px;padding:6px 6px 8px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-family:inherit;text-align:left;color:var(--ink);transition:border-color .15s,box-shadow .15s;}
.knoten-wahl button:hover{border-color:var(--accent);}
.knoten-wahl button[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--accent-soft);}
.knoten-wahl button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.knoten-bild{display:block;aspect-ratio:8/5;border-radius:8px;overflow:hidden;background:#f4f8fb;}
.knoten-bild svg{display:block;width:100%;height:100%;}
.knoten-name{font-weight:600;font-size:13.5px;line-height:1.25;color:var(--navy);padding:0 2px;}
.knoten-zweck{font-size:12px;line-height:1.3;color:var(--muted);padding:0 2px;}
.knoten-panel{margin-top:6px;}
.knoten-panel + .knoten-panel{margin-top:26px;}
.knoten-js .knoten-panel + .knoten-panel{margin-top:6px;}
.knoten-panel h3{margin:0 0 8px;}
.knoten-info{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.knoten-info > div{background:var(--sand);border-radius:10px;padding:10px 13px;font-size:14.5px;line-height:1.5;}
.knoten-info > div.achtung{background:var(--note);border-left:3px solid var(--note-line);}
.knoten-info b{display:block;color:var(--navy);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;}
@media (max-width:560px){.knoten-info{grid-template-columns:1fr;}.knoten-js .knoten-wahl{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:118px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin-left:-2px;margin-right:-2px;}.knoten-wahl button{scroll-snap-align:start;}.knoten-panel .sx-cap{font-size:12px;padding:4px 9px 4px 4px;left:6px;top:6px;}.knoten-panel .sx-cap-n{width:20px;height:20px;font-size:11.5px;}}
@media print{.knoten-wahl{display:none!important;}.knoten-panel[hidden]{display:block!important;}}