/* =========================================================
   clubseite.ch – Verkaufs-Startseite (hell), Welle 24
   Nur für index.html. Schriften lokal über assets/fonts/fonts.css.
   Farben ausschliesslich über die Tokens unten.
   ========================================================= */
:root{
  color-scheme: light;
  --cs-bg:#F3F5F2;
  --cs-paper:#FFFFFF;
  --cs-soft:#E9EDE8;
  --cs-line:#DDE3DC;
  --cs-ink:#0D1210;
  --cs-ink-2:#3A4540;
  --cs-muted:#56615B;
  --cs-green:#0E7A3E;
  --cs-green-dark:#0A5C2E;
  --cs-green-soft:#E3F5EA;
  --cs-on-green:#FFFFFF;
  --cs-alert:#B42318;
  --cs-focus:#1D4ED8;
  --cs-head:'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --cs-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cs-r:12px;
  --cs-max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cs-bg);color:var(--cs-ink);font-family:var(--cs-body);font-size:17px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--cs-green)}
a:hover{color:var(--cs-green-dark)}
:focus-visible{outline:3px solid var(--cs-focus);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--cs-head);text-transform:uppercase;line-height:1;margin:0;font-weight:700;letter-spacing:.005em}
h2{font-size:clamp(34px,5vw,48px)}
p{margin:0}
.wrap{max-width:var(--cs-max);margin:0 auto;padding:0 24px}
.show-s{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--cs-ink);color:var(--cs-paper);padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px;color:var(--cs-paper)}
.kicker{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cs-green)}
.lead{color:var(--cs-muted);max-width:760px}

/* Knöpfe */
.btn{min-height:48px;padding:0 20px;border-radius:var(--cs-r);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid var(--cs-green);background:transparent;color:var(--cs-green);cursor:pointer;font-family:inherit;text-align:center}
.btn:hover{background:var(--cs-green-soft);color:var(--cs-green-dark)}
.btn.prim{background:var(--cs-green);color:var(--cs-on-green)}
.btn.prim:hover{background:var(--cs-green-dark);color:var(--cs-on-green)}
.btn.lg{min-height:54px;padding:0 24px;font-size:17px}
.btn.sm{min-height:44px;padding:0 16px}

/* Kopf */
.top{background:var(--cs-paper);border-bottom:1px solid var(--cs-line);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-top:12px;padding-bottom:12px}
.logo{font-family:var(--cs-head);font-size:30px;font-weight:700;color:var(--cs-ink);text-decoration:none;line-height:1}
.logo span,.foot-logo span{color:var(--cs-green)}
.logo:hover{color:var(--cs-ink)}
.nav{display:flex;gap:4px 22px;flex:1 1 auto;font-size:16px;font-weight:500}
.nav a{color:var(--cs-ink);text-decoration:none;padding:10px 0;white-space:nowrap}
.nav a:hover{color:var(--cs-green);text-decoration:underline}
.top-cta{display:flex;gap:10px;margin-left:auto}

/* Held */
.hero{background:var(--cs-paper)}
.hero .wrap{display:flex;flex-wrap:wrap;gap:40px;align-items:center;padding-top:56px;padding-bottom:72px}
.hero-text{flex:3 1 480px;display:flex;flex-direction:column;gap:18px;min-width:0}
.hero h1{font-size:clamp(42px,6.4vw,72px);line-height:.95}
.hero h1 em{font-style:normal;color:var(--cs-green)}
.hero .sub{font-size:20px;color:var(--cs-ink-2);max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{font-size:15px;color:var(--cs-muted)}
.phones{flex:2 1 320px;display:flex;justify-content:center;gap:16px;align-items:flex-end;margin:0}
.phone{border-radius:32px;border:6px solid var(--cs-line);background:var(--cs-paper);padding:14px;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.35}
.phone.p1{width:210px;height:420px}
.phone.p2{width:150px;height:300px;border-radius:26px;background:var(--cs-bg);padding:12px;gap:8px;font-size:12px}
.ph-t{font-family:var(--cs-head);font-size:22px;font-weight:700;text-transform:uppercase}
.p2 .ph-t{font-size:18px}
.ph-card{background:var(--cs-soft);border-radius:12px;padding:10px}
.ph-card b{display:block;color:var(--cs-green);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.ph-card.alert{border:1px solid var(--cs-alert)}
.ph-card.alert b{color:var(--cs-alert)}
.ph-amt{font-family:var(--cs-head);font-size:24px;font-weight:700}
.ph-row{display:flex;gap:6px;margin-top:6px}
.ph-row span{border:1px solid var(--cs-line);border-radius:8px;padding:2px 8px;background:var(--cs-paper)}
.ph-row span.on{background:var(--cs-green);border-color:var(--cs-green);color:var(--cs-on-green)}
.ph-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ph-grid span{background:var(--cs-paper);border-radius:8px;padding:8px 4px;text-align:center}
.ph-grid span.on{background:var(--cs-green-soft)}
.ph-pay{margin-top:auto;background:var(--cs-green);color:var(--cs-on-green);border-radius:8px;padding:8px;text-align:center;font-weight:600}
.phones figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Vertrauensleiste */
.trust{background:var(--cs-paper);border-bottom:1px solid var(--cs-line);border-top:1px solid var(--cs-line)}
.trust ul{list-style:none;margin:0 auto;max-width:var(--cs-max);padding:18px 24px;display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:center;font-size:16px;font-weight:500;color:var(--cs-ink-2)}
.trust li::before{content:"✓ ";color:var(--cs-green);font-weight:700}

/* Abschnitte */
.sec{padding:72px 0 0}
.sec > .wrap{display:flex;flex-direction:column;gap:24px}
.sec-head{display:flex;flex-direction:column;gap:8px;max-width:760px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.card{background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:6px}
.card h3{font-family:var(--cs-body);text-transform:none;font-size:21px;font-weight:700;line-height:1.25}
.card p{color:var(--cs-muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.chips li{background:var(--cs-green-soft);color:var(--cs-green-dark);border-radius:99px;padding:8px 16px;font-weight:500}
.more-link{font-weight:600}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0;counter-reset:st}
.steps li{display:flex;flex-direction:column;gap:8px;counter-increment:st}
.steps li::before{content:counter(st);width:48px;height:48px;border-radius:99px;background:var(--cs-green);color:var(--cs-on-green);display:flex;align-items:center;justify-content:center;font-family:var(--cs-head);font-size:24px;font-weight:700}
.steps h3{font-family:var(--cs-body);text-transform:none;font-size:21px;font-weight:700;line-height:1.25}
.steps p{color:var(--cs-muted)}

/* Preise */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:10px}
.plan.top-plan{border:2px solid var(--cs-green)}
.plan-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.plan h3{font-family:var(--cs-body);text-transform:none;font-size:22px;font-weight:700}
.badge{background:var(--cs-green);color:var(--cs-on-green);border-radius:99px;padding:2px 10px;font-size:13px;font-weight:600}
.plan .for{color:var(--cs-muted);font-size:16px}
.price{font-family:var(--cs-head);font-size:44px;font-weight:700;line-height:1.1}
.price small{font-family:var(--cs-body);font-size:17px;font-weight:400;color:var(--cs-muted)}
.once{font-size:16px;color:var(--cs-muted)}
.plan ul{margin:4px 0 8px;padding:0 0 0 20px;color:var(--cs-ink-2);font-size:16px}
.plan ul li{margin:3px 0}
.plan .btn{margin-top:auto;width:100%}
.price-note{font-size:16px;color:var(--cs-muted)}
.price-note strong{color:var(--cs-ink)}

/* Pilot + Vereinsarten */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pilot{background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px}
.pilot h3{font-family:var(--cs-body);text-transform:none;font-size:26px;font-weight:700}
.pilot p{color:var(--cs-muted)}
.pilot .ph{font-style:italic}
.types{display:flex;flex-direction:column;gap:12px}
.types h2{font-size:clamp(32px,4.5vw,40px)}
.pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pills a,.pills span{min-height:44px;padding:0 14px;border-radius:99px;background:var(--cs-paper);border:1px solid var(--cs-line);color:var(--cs-ink);text-decoration:none;display:flex;align-items:center}
.pills a:hover{border-color:var(--cs-green);color:var(--cs-green-dark)}

/* Login-Hinweis */
.login-box{background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:20px;padding:24px 28px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.login-box > div{flex:1 1 420px;display:flex;flex-direction:column;gap:6px}
.login-box h2{font-size:clamp(28px,4vw,34px)}
.login-box p{color:var(--cs-muted)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:14px;padding:0 20px}
.faq summary{font-weight:600;cursor:pointer;padding:16px 0;list-style-position:outside}
.faq details p{margin:0 0 16px;color:var(--cs-muted)}

/* Abschluss + Kontakt */
.cta{background:var(--cs-green);color:var(--cs-on-green);border-radius:24px;padding:40px;display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:center}
.cta h2{font-size:clamp(34px,5vw,52px)}
.cta p{margin-top:10px}
.cta-btns{display:flex;flex-direction:column;gap:10px}
.btn.inv{background:var(--cs-paper);color:var(--cs-green-dark);border-color:var(--cs-paper)}
.btn.inv:hover{background:var(--cs-green-soft);color:var(--cs-green-dark)}
.btn.ghost{border-color:var(--cs-on-green);color:var(--cs-on-green)}
.btn.ghost:hover{background:var(--cs-green-dark);color:var(--cs-on-green)}
.cta :focus-visible{outline-color:var(--cs-on-green)}

.contact{background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:20px;padding:28px;display:grid;grid-template-columns:1fr 1.4fr;gap:28px}
.contact .info{display:flex;flex-direction:column;gap:10px}
.contact .info p{color:var(--cs-muted)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form .full{grid-column:1 / -1}
.form label{display:block;font-weight:600;font-size:15px;margin-bottom:4px}
.form input,.form select,.form textarea{width:100%;min-height:46px;border:1px solid var(--cs-muted);border-radius:10px;padding:10px 12px;font:inherit;font-size:16px;background:var(--cs-paper);color:var(--cs-ink)}
.form textarea{min-height:110px;resize:vertical}
.form .note{font-size:14px;color:var(--cs-muted);margin-top:8px}

/* Fuss */
.foot{background:var(--cs-paper);border-top:1px solid var(--cs-line);color:var(--cs-muted);font-size:15px;margin-top:72px}
.foot .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px 48px;padding-top:36px;padding-bottom:28px}
.foot-col{display:flex;flex-direction:column;gap:6px}
.foot-col h2{font-family:var(--cs-body);text-transform:none;font-size:15px;font-weight:700;color:var(--cs-ink)}
.foot-col a{color:var(--cs-muted);padding:3px 0}
.foot-col a:hover{color:var(--cs-green-dark)}
.foot-logo{font-family:var(--cs-head);font-size:24px;font-weight:700;color:var(--cs-ink)}
.foot-bottom{border-top:1px solid var(--cs-line)}
.foot-bottom .wrap{display:block;padding-top:14px;padding-bottom:18px;font-size:14px}

/* Tablet */
@media (max-width:1024px){
  .cards,.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
}
/* Handy */
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .top .wrap{gap:6px 12px;padding-top:10px;padding-bottom:0}
  .logo{font-size:26px}
  .top{position:static}
  .top .wrap{flex-wrap:wrap}
  .top-cta{gap:8px}
  .hide-s{display:none}
  .show-s{display:inline}
  .top-cta .btn{min-height:44px;padding:0 12px;font-size:15px}
  .nav{order:3;flex:1 1 100%;overflow-x:auto;gap:18px;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .hero .wrap{padding-top:32px;padding-bottom:44px;gap:28px}
  .hero .sub{font-size:18px}
  .hero-cta .btn{flex:1 1 100%}
  .phone.p1{width:190px;height:380px}
  .phone.p2{width:130px;height:270px}
  .trust ul{padding:14px 16px;gap:6px 18px;justify-content:flex-start;font-size:15px}
  .sec{padding-top:52px}
  .cards,.plans,.steps,.split,.cta,.form{grid-template-columns:1fr}
  .cta{padding:28px 20px}
  .contact{padding:22px 18px}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .foot-col:first-child{grid-column:1 / -1}
}
@media (max-width:360px){
  .phone.p2{display:none}
}
@media print{
  .top{position:static}
  .phones,.top-cta,.form{display:none}
}

/* Preise 2 – Welle 35: Preis pro zahlendes Mitglied (ersetzt .plans im Abschnitt #pakete) */
.pr2-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:start}
.pr2-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.pr2-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:0}
.pr2-num{font-family:var(--cs-head);font-weight:700;font-size:clamp(60px,9vw,96px);line-height:.95;color:var(--cs-green);white-space:nowrap}
.pr2-per{font-size:clamp(18px,2.2vw,22px);font-weight:600;color:var(--cs-ink);line-height:1.3;flex:1 1 220px}
.pr2-staffel{width:100%;border-collapse:separate;border-spacing:0;background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:16px;overflow:hidden}
.pr2-staffel th,.pr2-staffel td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--cs-line);font-size:17px}
.pr2-staffel tbody tr:last-child td{border-bottom:0}
.pr2-staffel th{background:var(--cs-soft);font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cs-ink-2)}
.pr2-staffel th:last-child,.pr2-staffel td:last-child{text-align:right;font-weight:700}
.pr2-min{background:var(--cs-paper);border:1px solid var(--cs-line);border-left:4px solid var(--cs-green);border-radius:12px;padding:14px 16px;color:var(--cs-ink-2);font-size:16px}
.pr2-min strong{color:var(--cs-ink)}
.pr2-bsp{background:var(--cs-green);color:var(--cs-on-green);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pr2-bsp h3{font-size:28px}
.pr2-bsp table{width:100%;border-collapse:collapse}
.pr2-bsp th,.pr2-bsp td{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.28);font-size:16px;font-weight:400;text-align:left;vertical-align:top}
.pr2-bsp td{text-align:right;white-space:nowrap;padding-left:12px}
.pr2-bsp .pr2-zw th,.pr2-bsp .pr2-zw td{font-weight:700}
.pr2-bsp .pr2-sum th,.pr2-bsp .pr2-sum td{font-family:var(--cs-head);font-size:30px;font-weight:700;border-bottom:0;padding-top:14px;vertical-align:baseline}
.pr2-bsp p{font-size:15px}
.pr2-bsp .btn{align-self:flex-start}
.pr2-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.pr2-tiles li{background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:6px}
.pr2-tiles h3{font-family:var(--cs-body);text-transform:none;font-size:19px;font-weight:700;line-height:1.25;color:var(--cs-green-dark)}
.pr2-tiles p{color:var(--cs-muted);font-size:16px}
.pr2-tiles .pr2-all{background:var(--cs-green-soft);border:2px solid var(--cs-green)}
.pr2-tiles .pr2-all p{color:var(--cs-ink-2)}
.pr2-motto{margin:0;padding:18px 22px;border-left:4px solid var(--cs-green);background:var(--cs-paper);border-radius:0 12px 12px 0}
.pr2-motto p{font-family:var(--cs-head);font-size:clamp(22px,3vw,30px);font-weight:700;line-height:1.15;color:var(--cs-ink)}
@media (max-width:1024px){
  .pr2-grid{grid-template-columns:1fr}
  .pr2-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .pr2-tiles{grid-template-columns:1fr}
  .pr2-staffel th,.pr2-staffel td{padding:12px 14px;font-size:16px}
  .pr2-staffel th{font-size:13px}
  .pr2-bsp{padding:22px 18px}
  .pr2-bsp .btn{align-self:stretch}
}

/* Preise 3 – Welle 38: Einheitspreis CHF 0.75 (Kundenentscheid 20.10. 08:40) – Beispieltabelle statt Staffel */
.pr3-bsp td:first-child{font-weight:600;color:var(--cs-ink)}
.pr3-bsp th:nth-child(2),.pr3-bsp td:nth-child(2){text-align:right;white-space:nowrap}
.pr3-bsp td:last-child{white-space:nowrap}
.pr3-bsp small{font-weight:400;color:var(--cs-muted);font-size:13px}
@media (max-width:560px){.pr3-bsp th,.pr3-bsp td{padding:12px 10px;font-size:15px}.pr3-bsp small{display:block}}

/* Startseite: echte Bildschirme (2.0 Okt. 2026) */
.sh-lead{font-size:17px;color:#4a554f;margin:6px 0 24px}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.sh-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;background:#fff;border:1px solid #e3e8e4;border-radius:18px;padding:14px;transition:box-shadow .15s}
.sh-card:hover{box-shadow:0 10px 26px rgba(13,18,16,.12)}
.sh-bild{display:block;aspect-ratio:390/560;overflow:hidden;border-radius:12px;background:#f3f5f2;border:1px solid #e3e8e4}
.sh-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.sh-t{font:800 20px 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.3px}
.sh-x{font-size:15px;line-height:1.45;color:#4a554f}