:root{
  --bg: #f8fbff;
  --card: #ffffff;
  --ink: #0f172a;   /* slate-900 */
  --muted: #475569; /* slate-600 */
  /* Corporate-Brand (aus skileum3) */
  --brand-50:#f0f7ff; --brand-100:#d9ebff; --brand-200:#b3d5ff;
  --brand-300:#85bbff; --brand-400:#539cff; --brand-500:#2b7df7;
  --brand-600:#1c63d6; --brand-700:#164db1; --brand-800:#153f8c; --brand-900:#132f66;
  --brand: var(--brand-600);
  --brand-ink: var(--brand-900);
  --ring: rgba(14,165,233,.35);
  --ok: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --shadow: 0 10px 30px rgba(2,8,23,.08);
}
/* Reset & base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";color:var(--ink);background:linear-gradient(180deg,var(--bg),#fff 40%,#fff)}
img{max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1100px;margin-inline:auto;padding:0 20px}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid #e2e8f0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}

.brand .logo{
  display:grid;place-items:center;
  width:42px;height:42px;
  border-radius:16px;
  background: var(--brand);
  color:#fff;
  font-weight:900;
  font-size:1.1rem;
  letter-spacing:.5px;
  box-shadow: var(--shadow);
}

.brand span{font-size:1.05rem}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav a{color:var(--ink);font-weight:600}
.cta{ display:inline-flex;align-items:center;gap:.6rem;background:var(--brand);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;box-shadow:var(--shadow);border:0;transition:.2s ease;}
.cta:hover{ background: var(--brand-700); transform: translateY(-1px); }
.cta:focus{ outline:2px solid transparent; box-shadow:0 0 0 4px rgba(28,99,214,.25); }
.cta svg{width:18px;height:18px}
.menu-btn{display:none;background:transparent;border:0}

/* Hero */
.hero{padding:64px 0 36px}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.eyebrow{
  color:var(--brand-ink);
  background: var(--brand-50);
  border:1px solid var(--brand-200);
  display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700;font-size:.85rem
}

h1{font-size:clamp(1.9rem, 2.2rem + 1.5vw, 3.2rem);line-height:1.08;margin:.6rem 0}
.lead{font-size:1.12rem;color:var(--muted);max-width:60ch}
.hero-card{background:var(--card);border:1px solid #e2e8f0;border-radius:var(--radius-2xl);padding:22px;box-shadow:var(--shadow)}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.pill{border:1px solid #e2e8f0;background:#fff;padding:6px 10px;border-radius:999px;font-weight:600;color:#0f172a}

/* Sections */
section{padding:70px 0}
h2{font-size:2rem;margin:.2rem 0 1rem}
.muted{color:var(--muted)}

.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{background:var(--card);border:1px solid #e2e8f0;border-radius:var(--radius-xl);padding:20px;box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .3rem;font-size:1.2rem}
.icon{width:22px;height:22px}
.row{display:flex;gap:12px;align-items:flex-start}

.list{display:grid;gap:10px}
.list li{display:flex;gap:10px;align-items:flex-start}
.check{color:var(--ok)}

/* Pricing */
.pricing{display:grid;grid-template-columns:1fr;gap:18px}
.price{font-size:2.2rem;font-weight:900}
.fine{font-size:.95rem;color:var(--muted)}

/* FAQ */
.faq-item{border:1px solid #e2e8f0;border-radius:16px;padding:16px;background:#fff}
.faq-q{display:flex;justify-content:space-between;gap:14px;cursor:pointer}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-a{max-height:300px;margin-top:10px}

/* Footer */
footer{background:#0b1220;color:#cbd5e1;padding:60px 0}
footer a{color:#e2e8f0}

/* Floating WhatsApp */
.float-wa{position:fixed;right:18px;bottom:18px;z-index:60}
.float-wa a{display:inline-flex;align-items:center;gap:10px;background:#22c55e;color:white;padding:12px 16px;border-radius:999px;font-weight:800;box-shadow:var(--shadow)}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  nav ul{display:none;position:absolute;top:64px;right:20px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:var(--shadow);padding:12px}
  nav ul.open{display:grid}
  nav ul a{padding:8px 10px}
  .menu-btn{display:inline-flex}
}

/* Portrait */
.portrait{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.portrait img{width:220px;height:220px;object-fit:cover;border-radius:24px;box-shadow:var(--shadow);border:4px solid #fff}

/* Products */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product-card{position:relative;background:var(--card);border:1px solid #e2e8f0;border-radius:var(--radius-2xl);padding:22px;box-shadow:var(--shadow)}
.product-card h3{margin:.2rem 0 .4rem;font-size:1.25rem}
.product-card .price{font-size:1.9rem}
.perks{display:grid;gap:8px;margin:10px 0}
.perks li{display:flex;gap:8px}
.ribbon{position:absolute;top:14px;right:14px;background:#22c55e;color:#fff;font-weight:800;font-size:.75rem;padding:6px 10px;border-radius:999px}
.strike{text-decoration:line-through;color:#94a3b8}

@media (max-width: 900px){
  .product-grid{grid-template-columns:1fr}
}

/* Booking */
.booking-card .booking-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.booking-card label{display:flex;flex-direction:column;font-weight:600;gap:6px}
.booking-card input,.booking-card select,.booking-card textarea{width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:12px}
.booking-summary{margin-top:10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media (max-width: 900px){.booking-card .booking-grid{grid-template-columns:1fr}}

/* Emphasize hero icons */
.hero-card .row{gap:16px;align-items:center}
.hero-card .row .icon{
  width:36px;height:36px; /* bigger */
  padding:10px; /* visual weight */
  border-radius:14px;
  background: radial-gradient(120% 120% at 0% 0%, #e0f2fe 0%, #f0f9ff 60%);
  box-shadow: var(--shadow);
  color: var(--brand-ink);
  flex-shrink:0;
}

/* Make list checkmarks look like badges */
.list .check{
  display:inline-grid;place-items:center;
  width:22px;height:22px;line-height:1;
  border-radius:999px;
  background:#22c55e;color:#fff;font-weight:900;
  margin-top:2px;
  flex-shrink:0;
}

/* Ordered list styling to preserve numbers */
.olist{display:grid;gap:10px;padding-left:1rem}
.olist li{list-style:decimal inside}

/* Monatsabo: Split-Block für Basic/Intensiv */
.plan-split{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
.plan{ border:1px solid #e2e8f0; border-radius:16px; padding:14px; background:#fff; }
.plan h4{ margin:0 0 4px; font-size:1.05rem; }
.plan .price{ font-size:1.25rem; font-weight:800; margin:4px 0 10px; }
.plan .cta{ width:100%; justify-content:center; }
@media (max-width:900px){ .plan-split{ grid-template-columns:1fr; } }

/* --- Spec list: Grid + display:contents (vorherige Lösung, ohne „Tabelle“) --- */
.spec-list{
  display:grid;
  grid-template-columns: 22px clamp(14rem, 24vw, 22rem) 1fr; /* check | label | desc */
  column-gap:16px;
  row-gap:12px;
  align-items:start;
}
.spec-list li{ display:contents; } /* jedes <li> bricht in Grid-Zellen auf */
.spec-list .label{ font-weight:700; }
.spec-list .dash{ display:none; }  /* evtl. vorhandenes Dash-Span ausblenden */
.spec-list .desc{
  color:var(--muted);
  line-height:1.55;
  hyphens:auto;
  overflow-wrap:anywhere;
}
.spec-list .desc::before{ content:"—"; margin-right:.6rem; opacity:.6; }

/* Mehr Platz für die linke Spalte auf grossen Screens */
@media (min-width: 900px){
  #gymivorbereitung .grid-2{ grid-template-columns: 1.25fr 0.75fr; }
  #multicheck .grid-2{      grid-template-columns: 1.25fr 0.75fr; }
}

/* Feedback / Reviews */
.reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.review-card{background:var(--card);border:1px solid #e2e8f0;border-radius:var(--radius-xl);padding:18px;box-shadow:var(--shadow)}
.review-card blockquote{margin:6px 0 8px;line-height:1.6}
.review-card .stars{font-size:1rem;letter-spacing:2px;color:var(--ok)}
.review-card figcaption{font-size:.95rem;color:var(--muted)}
.badge{display:inline-block;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:4px 10px;font-weight:600}
.center{display:flex;justify-content:center;margin-top:12px}
.cta.outline{background:#fff;color:var(--brand-ink);border:1px solid #e2e8f0}

/* „Mehr anzeigen“: zusätzliche Karten anfangs verstecken */
.review-grid .extra{display:none}
.review-grid.show-all .extra{display:block}

@media (max-width:900px){
  .review-grid{grid-template-columns:1fr}
}


a{color:var(--brand);text-decoration:none}
a:hover{opacity:1;color:var(--brand-700)}
nav a{color:var(--ink);font-weight:600}
nav a:hover{color:var(--brand-700)}

.hero{position:relative}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(60% 60% at 15% 10%, var(--brand-50) 0%, transparent 60%);
}


/* Tag-based lists used in Gymi + Multicheck */
.tag-list{display:grid;gap:10px}
.tag-list li{display:grid;grid-template-columns:max-content 1fr;gap:12px;align-items:start}
.tag{display:inline-flex;align-items:center;gap:8px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:6px 10px;font-weight:700;white-space:nowrap}
.tag-desc{color:var(--muted)}

/* Steps timeline */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:10px 0 16px}
.step{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:10px 12px;box-shadow:var(--shadow)}
.bubble{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--brand);color:#fff;font-weight:900;flex-shrink:0}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* Booking: inline checkbox */
.inline-flex{display:flex;align-items:center;gap:10px;font-weight:600}
.booking-card input[disabled], .booking-card select[disabled], .booking-card textarea[disabled]{background:#f8fafc;color:#94a3b8}

/* CTA outline variant existing; ensure hover/active */
.cta.outline:hover{transform:translateY(-1px)}

/* === Maintenance-Layout Extras === */

.maintenance-hero{
  align-items:stretch;
}

.maintenance-card{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Status-Badge oben in der Karte */
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#ecfdf3;
  color:#166534;
  font-weight:600;
  font-size:.9rem;
}
.status-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--ok);
  box-shadow:0 0 0 6px rgba(34,197,94,.18);
}

/* Liste mit Umbau-Infos */
.status-list{
  list-style:none;
  margin:6px 0 0;
  padding:0;
  display:grid;
  gap:10px;
  font-size:.95rem;
}
.status-list li{
  display:grid;
  gap:2px;
}
.status-list .label{
  font-weight:600;
}
.status-list .desc{
  color:var(--muted);
  line-height:1.5;
}

/* Fortschrittsbalken */
.progress-note{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #e2e8f0;
  display:grid;
  gap:6px;
  font-size:.9rem;
}
.progress-bar{
  position:relative;
  width:100%;
  height:7px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}
.progress-fill{
  position:absolute;
  inset:0;
  width:70%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--brand-300),var(--brand-600));
}

/* Extra-Abstand für Infokarte */
.info-hint{
  margin-top:22px;
}

@media (max-width: 900px){
  .maintenance-hero{
    grid-template-columns:1fr;
  }
}