:root{--bg:#0b0c10;--card:#111318;--fg:#e8eaf0;--muted:#a0a6b5;--border:#20232b;--accent:#0ea5e9;--accent2:#6ee7b7;--ink:#0b0c10;--shadow:0 16px 40px rgba(0,0,0,.35)}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg)}
.container{max-width:1100px;margin:0 auto;padding:0 24px} .section{padding:72px 0}
h1{font-size:48px;line-height:1.08;margin:0 0 16px;letter-spacing:-0.02em} h2{font-size:32px;margin:0 0 10px;letter-spacing:-0.01em}
p.lead{font-size:18px;color:var(--muted);margin:8px 0 18px} .muted{color:var(--muted)}
.grid{display:grid;gap:20px} .g-3{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:980px){.g-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;border:0;cursor:pointer;font-weight:800}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--ink)} .btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--border)}
header{position:sticky;top:0;z-index:10;background:color-mix(in oklab, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
nav{display:flex;align-items:center;justify-content:space-between;height:72px} nav .menu{display:flex;align-items:center;gap:18px}
nav .menu a{color:var(--muted);font-size:15px} nav .menu a:hover{color:var(--fg)} .toggle{border:1px solid var(--border);border-radius:12px;padding:8px 10px;font-size:13px;background:transparent;color:var(--fg);cursor:pointer}
.hero{padding:84px 0;position:relative;overflow:hidden} .hero .art{position:absolute;inset:0;z-index:-1;opacity:.5} .hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.kpis{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .kpi{background:var(--card);border:1px solid var(--border);padding:10px 12px;border-radius:12px;font-weight:700}
.price .card{display:flex;flex-direction:column;gap:12px;min-height:220px} .card .actions{margin-top:auto;display:flex;gap:12px}
input,textarea,select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:transparent;color:var(--fg);font:inherit}
textarea{min-height:120px;resize:vertical} form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:700px){form .row{grid-template-columns:1fr}}
footer{border-top:1px solid var(--border);padding:28px 0;color:var(--muted);font-size:14px}


/* === Responsive Enhancements (v7.5) === */
h1{font-size:clamp(28px,4.2vw,48px);line-height:1.1}
h2{font-size:clamp(22px,3vw,32px)}
p.lead{font-size:clamp(16px,2.2vw,18px)}
@media(max-width:700px){.container{padding:0 16px}.btn{width:100%;padding:14px 18px}.hero{padding:54px 0}.card{padding:18px}.grid{gap:14px}.price .card{min-height:auto}.chip{padding:8px 12px;font-size:13px}.card .actions{gap:10px}input,textarea,select{padding:14px 14px;font-size:16px}textarea{min-height:140px}nav{flex-wrap:wrap;gap:10px}nav .menu{flex-wrap:wrap;gap:10px}}
.hero .art{width:100%;height:auto;object-fit:cover}
@media(max-width:980px){.book-grid{grid-template-columns:1fr}.hero-pkg{padding:32px 0}.pkg-grid{gap:16px}.pkg-grid .card h2{margin-top:0}.pkg-grid .card .actions{margin-top:12px}}



/* === Mobile Relaxed Hero (v7.11) === */
@media(max-width:700px){
  .hero{padding:76px 0 56px}             /* etwas mehr Luft oben/unten */
  .hero .art{opacity:.22; transform:translateY(-8px) scale(1.12)} /* dezenter, weniger dominant */
  .hero .cta{margin-top:18px; gap:12px}
  .kpis{margin-top:18px; gap:12px}
  .kpi{padding:12px 14px; border-radius:14px}
  h1{margin-bottom:10px}
  p.lead{margin-top:6px; margin-bottom:10px}
  .container{padding:0 18px}
}

/* Slightly increase spacing before the price section title on mobile */
@media(max-width:700px){
  #pakete .container{padding-top:8px}
}



/* === KPI spacing boost (v7.12) === */
@media(max-width:700px){
  .kpis{margin-top:24px; gap:16px}
  .kpi{padding:14px 16px; border-radius:16px}
}