@import url("fonts.css");
/* ==========================================================================
   SailingX-Academy – Layout für Startseite, Kursübersicht und Infoseiten
   Farben & Schrift laut SailingX-Markenhandbuch
   ========================================================================== */
:root{
  --stage:#122b38; --stage-deep:#10191f; --stage-3:#133342;
  --navy:#173746; --navy2:#1f5a78;
  --accent:#2289c6; --accent-dark:#1b72a6; --accent-soft:#e6f1f8; --indigo:#34479e;
  --sand:#f4f6f7; --ink:#2b2b2b; --muted:#5b6770; --line:#dfe5e9; --white:#fff; --ok:#1d8a5a;
  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --rainbow:linear-gradient(90deg,#e4282b,#f39129,#f5dd2b,#3baa4a,#1fa385,#2289c6,#34479e);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;}
a{color:var(--navy2);}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}

/* ---------- Kopfzeile: weiß mit Farblogo (Markenhandbuch) ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);}
.topbar-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 20px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);}
.brand img{width:160px;height:auto;display:block;}
.brand span{font-weight:500;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-left:12px;border-left:1px solid var(--line);}
.topnav{display:flex;align-items:center;gap:22px;font-size:15px;}
.topnav a{text-decoration:none;color:var(--ink);}
.topnav a:hover,.topnav a[aria-current]{color:var(--accent);}
.topnav a.cta{background:var(--accent);color:#fff;font-weight:600;padding:9px 18px;border-radius:10px;}
.topnav a.cta:hover{background:var(--accent-dark);color:#fff;}

/* ---------- Bühne (dunkel) ---------- */
.stage{position:relative;background:linear-gradient(160deg,var(--stage-deep) 0%,var(--stage) 55%,var(--stage-3) 100%);color:#fff;overflow:hidden;}
.stage-in{max-width:1080px;margin:0 auto;padding:72px 20px 80px;position:relative;z-index:2;}
.kicker{display:block;font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#9fb6c2;margin-bottom:18px;}
.stage h1{margin:0 0 18px;font-size:46px;font-weight:500;line-height:1.12;max-width:17ch;}
.stage p.sub{margin:0 0 30px;font-size:18px;color:#cfdde5;max-width:56ch;}
.btns{display:flex;flex-wrap:wrap;gap:12px;}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:16px;padding:13px 24px;border-radius:11px;font-family:inherit;border:0;cursor:pointer;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);}
.btn-ghost:hover{background:rgba(255,255,255,.1);}
.stats{display:flex;flex-wrap:wrap;gap:40px;margin-top:48px;}
.stats b{display:block;font-size:30px;font-weight:600;}
.stats span{font-size:14px;color:#9fb6c2;}
.rainbow{height:4px;background:var(--rainbow);}

/* ---------- Abschnitte ---------- */
section.block{padding:72px 0;}
h2.sec{font-size:30px;font-weight:500;color:var(--navy);margin:0 0 8px;text-align:center;}
p.seclead{text-align:center;color:var(--muted);font-size:17px;max-width:60ch;margin:0 auto 40px;}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;}
.fcard{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px 24px;}
.fcard .ic{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);font-size:24px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.fcard h3{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--navy);}
.fcard p{margin:0;color:var(--muted);font-size:15px;}
.mods{background:var(--white);}
.lvl-head{margin:34px 0 14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.lvl-head:first-child{margin-top:0;}
.lvl-head h3{margin:0;font-size:22px;font-weight:600;color:var(--navy);}
.lvl-head span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.mcard{position:relative;border:1px solid var(--line);border-radius:14px;padding:20px 20px 18px 78px;text-decoration:none;color:inherit;display:block;background:var(--sand);transition:transform .12s,box-shadow .12s,border-color .12s;}
.mcard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(18,43,56,.1);border-color:var(--accent);}
.mcard .mn{position:absolute;left:18px;top:20px;width:44px;height:44px;border-radius:11px;background:var(--stage);color:#fff;font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;}
.mcard h4{margin:0 0 4px;font-size:17px;font-weight:600;color:var(--navy);line-height:1.3;}
.mcard p{margin:0 0 10px;font-size:14px;color:var(--muted);line-height:1.5;}
.mcard .cnt{font-size:13px;color:var(--navy2);font-weight:500;}
.mcard .mbar{height:5px;background:var(--line);border-radius:99px;margin-top:10px;overflow:hidden;}
.mcard .mbar i{display:block;height:100%;width:0;background:var(--ok);}
.band{background:var(--stage);color:#fff;text-align:center;padding:64px 20px;}
.band h2{font-size:30px;font-weight:500;margin:0 0 12px;}
.band p{color:#cfdde5;font-size:17px;margin:0 0 26px;}

a.fcard{color:inherit;transition:border-color .12s,box-shadow .12s,transform .12s;}
a.fcard:hover{border-color:var(--accent);box-shadow:0 10px 26px rgba(18,43,56,.1);transform:translateY(-3px);}
.sx-box{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:34px 38px;position:relative;overflow:hidden;}
.sx-box::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--rainbow);}
.sx-box h2{font-size:28px;font-weight:500;color:var(--navy);margin:0 0 10px;}
.sx-box p{color:var(--muted);max-width:56ch;margin:0 0 22px;}
.sx-box img{flex:0 0 auto;width:170px;height:auto;}
@media(max-width:720px){.sx-box{flex-direction:column-reverse;align-items:flex-start;padding:26px 22px;}.sx-box img{width:110px;}}

/* ---------- Unterseiten (Übersicht, Impressum, Datenschutz) ---------- */
.pagehead{background:linear-gradient(160deg,var(--stage-deep) 0%,var(--stage) 60%,var(--stage-3) 100%);color:#fff;padding:44px 0 36px;}
.pagehead h1{margin:0 0 8px;font-size:34px;font-weight:500;}
.pagehead p{margin:0;color:#cfdde5;max-width:70ch;}
.page{padding-top:28px;padding-bottom:64px;}
.prose{max-width:780px;}
.prose h2{font-size:21px;font-weight:600;color:var(--navy);margin:34px 0 8px;}
.prose h3{font-size:17px;font-weight:600;color:var(--navy2);margin:22px 0 6px;}
.prose p,.prose li{color:var(--ink);}
.todo{background:#fff3cd;color:#6b4e00;border-radius:4px;padding:0 4px;font-weight:600;}
.hinweis{background:#fff5e6;border-left:4px solid #e0a23a;border-radius:0 10px 10px 0;padding:14px 18px;color:#7a5212;font-size:14.5px;margin:18px 0 8px;}

/* Kursübersicht */
.ov-tools{margin-top:16px!important;}
.ov-tools button{font-family:inherit;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:7px 14px;font-size:13px;cursor:pointer;}
h2.lvl{font-size:22px;font-weight:600;color:var(--navy);margin:34px 0 10px;}
h2.lvl span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-left:8px;}
details.ov-mod{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-top:12px;overflow:hidden;}
details.ov-mod summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 18px;}
details.ov-mod summary::-webkit-details-marker{display:none;}
.ov-num{flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:var(--stage);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;}
.ov-t{flex:1;font-weight:600;color:var(--navy);font-size:17px;line-height:1.3;}
.ov-t small{display:block;font-weight:400;color:var(--muted);font-size:13.5px;margin-top:3px;}
.ov-c{font-size:13px;color:var(--navy2);font-weight:500;white-space:nowrap;}
ol.ov-list{list-style:none;margin:0;padding:0 0 8px;border-top:1px solid var(--line);}
ol.ov-list li.ov-ch{padding:14px 18px 4px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
ol.ov-list a{display:flex;gap:12px;align-items:baseline;padding:9px 18px;text-decoration:none;color:var(--ink);font-size:15px;}
ol.ov-list a:hover{background:var(--accent-soft);}
.ov-ln{flex:0 0 auto;min-width:64px;font-weight:600;color:var(--accent);font-size:13.5px;}
.ov-d{margin-left:auto;color:var(--muted);font-size:13px;white-space:nowrap;}

/* ---------- Fußzeile ---------- */
.sitefoot{background:var(--stage-deep);color:#9fb6c2;font-size:14px;}
.sitefoot .foot-in{max-width:1080px;margin:0 auto;padding:30px 20px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;}
.sitefoot b{color:#fff;font-weight:500;}
.sitefoot a{color:#cfdde5;}
.sitefoot img{width:120px;height:auto;display:block;margin-bottom:6px;}

@media(max-width:720px){
  .brand img{width:130px;} .brand span{display:none;}
  .topnav{gap:12px;font-size:14px;} .topnav a:not(.cta){display:none;}
  .stage h1{font-size:33px;} .stage-in{padding:48px 20px 56px;} h2.sec{font-size:25px;}
  .ov-c{display:none;} .ov-d{display:none;}
}