/*
Theme Name: Book Your Jetski — Comic Wave (DE/EN)
Theme URI: https://book-your-jetski.com
Author: ChatGPT
Description: One-page WordPress Theme im 1:1 Comic-Wave-Look, zweisprachig (DE/EN) mit Polylang-Sprachumschalter.
Version: 1.1.0
Text Domain: book-your-jetski
*/

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700&family=Luckiest+Guy&display=swap');

:root{
  --sky1:#3cc2ff;
  --sky2:#77d9ff;
  --sky3:#a7e8ff;
  --deep:#0c4a6e;
  --btn:#f97316;
  --accent:#fde047;
  --sand:#fff4dc;
  --text:#0f172a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--sky1), var(--sky2) 40%, var(--sky3) 100%);
  background-attachment: fixed;
}

.header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-bottom:2px solid #e2f2ff;
}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:14px}
.logo{height:52px;width:auto}
.nav a{color:var(--deep);text-decoration:none;font-weight:800;margin:0 10px}

.lang-switch{display:flex;gap:8px;align-items:center;margin-left:10px}
.lang-switch a,.lang-switch span{
  background:white;border:2px solid #0b3b5a;color:#0b3b5a;
  padding:6px 10px;border-radius:999px;font-weight:800;text-decoration:none;font-size:14px;
}
.lang-switch .current-lang{background:#0b3b5a;color:white}

.hero{
  position:relative; overflow:hidden;
  padding:70px 0 0;
  color:#062a40;
}
.hero h1{
  font-family:'Luckiest Guy', cursive;
  font-size:clamp(38px,6vw,64px);
  margin:0 0 8px; letter-spacing:0.5px;
  text-shadow: 0 3px 0 rgba(255,255,255,.65);
}
.hero p.lead{font-size:clamp(16px,2.2vw,22px);max-width:700px;margin:0 0 18px;font-weight:600}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  background:var(--btn);color:white;padding:14px 20px;border-radius:999px;border:none;
  font-weight:900; text-decoration:none; display:inline-block; box-shadow:0 8px 0 #bb4e0e; transform:translateY(0);
}
.btn:active{transform:translateY(2px); box-shadow:0 6px 0 #bb4e0e;}
.btn.secondary{background:#ffffff;color:var(--deep);border:3px solid var(--deep); box-shadow:0 8px 0 #083247}

.hero .waves{position:relative; height:140px; margin-top:20px; background:url('./assets/images/wave-top.svg') bottom/cover no-repeat}

.section{padding:70px 0; background:white; position:relative}
.section.alt{background:var(--sand)}
.section .sep{position:absolute; left:0; right:0; top:-1px; height:120px; background:url('./assets/images/wave-sep.svg') top/cover no-repeat}
.section h2{font-size:clamp(28px,4.5vw,40px); margin:0 0 20px; color:var(--deep); font-weight:900; letter-spacing:.3px}
.badge{display:inline-block;background:var(--accent);color:#111827;padding:6px 12px;border-radius:999px;font-weight:900;margin-bottom:12px;border:2px solid #facc15}

.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:white;border-radius:20px;box-shadow:0 16px 30px rgba(2,132,199,.18);padding:20px;border:2px solid #e2f2ff}

.price-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:16px;overflow:hidden}
.price-table th,.price-table td{padding:16px 14px;border-bottom:1px solid #e2e8f0;text-align:left;font-weight:700}
.price-table thead th{background:#ecfeff;color:#083247}
.price-table tr:last-child td{border-bottom:none}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.timeline .step{background:linear-gradient(180deg,#ffffff,#eafaff);border:3px solid var(--sky2);border-radius:16px;padding:18px;text-align:center;font-weight:900;box-shadow:0 10px 0 #bfefff}

.model-card img{max-width:280px;height:auto}
.model-specs li{margin:8px 0;font-weight:700}

.footer{background:#062a40;color:#e2f2ff;padding:36px 0;margin-top:0;border-top:3px solid #0b3b5a}
.footer a{color:#e2f2ff;text-decoration:none;font-weight:700}

.whatsapp{
  position:fixed; right:18px; bottom:18px; width:64px; height:64px; border-radius:50%;
  background:white;border:3px solid #16a34a; box-shadow:0 12px 26px rgba(0,0,0,.2);
  display:grid; place-items:center; z-index:80;
}
.whatsapp img{width:30px;height:30px}

@media (max-width:900px){
  .grid.cols-2{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .timeline{grid-template-columns:1fr}
  .nav a{margin:0 6px}
  .logo{height:44px}
}