/* style.css */

/* ================== TOKENS ================== */
:root{
  --bg:#000;
  --text:#f1f5f9;
  --muted:#cbd5e1;

  --accent:#ffe600;
  --focus:#00ffd5;

  --card:#0b0b0b;
  --border:rgba(255,255,255,0.14);

  --radius:18px;
  --shadow:0 10px 28px rgba(0,0,0,0.35);
  --max:1200px;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --brand: "Covered By Your Grace", cursive;
}

*,
*::before,
*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(16px, 0.6vw + 14px, 19px);
  line-height:1.6;
}

/* ================= A11Y ================= */
.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 14px;
  background:#111;
  color:#fff;
  border-radius:10px;
  transform:translateY(-220%);
  z-index:9999;
  text-decoration:none;
}
.skip-link:focus{ transform:translateY(0); }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

a:focus-visible,
button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:4px;
  border-radius:12px;
}

/* ================= PREMIUM WATERMARK ================= */
.premium-wrenches{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
  opacity:0.055;
  mix-blend-mode: soft-light;
}
.premium-wrenches .wrench{
  position:absolute;
  width:clamp(42px, 4.8vw, 110px);
  fill:rgba(255,255,255,0.85);
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,0.65))
    drop-shadow(0 0 10px rgba(255,255,255,0.10));
  transform: translate3d(0,0,0) rotate(var(--rot, 0deg));
  animation:
    floatWM var(--t, 26s) ease-in-out infinite,
    driftWM var(--t2, 36s) ease-in-out infinite;
}
.premium-wrenches .w1{ top:12%; left:7%;  --t:28s; --t2:40s; --rot:-16deg; opacity:.9; }
.premium-wrenches .w2{ top:18%; left:78%; --t:24s; --t2:34s; --rot: 18deg; opacity:.65; width:clamp(34px,4.0vw,88px); }
.premium-wrenches .w3{ top:54%; left:12%; --t:30s; --t2:44s; --rot:-10deg; opacity:.55; width:clamp(30px,3.6vw,82px); }
.premium-wrenches .w4{ top:68%; left:72%; --t:26s; --t2:38s; --rot: 12deg; opacity:.8; }
.premium-wrenches .w5{ top:84%; left:40%; --t:34s; --t2:48s; --rot:-22deg; opacity:.5; width:clamp(28px,3.2vw,74px); }

@keyframes floatWM{
  0%,100%{ transform: translate3d(0,0,0) rotate(var(--rot,0deg)); }
  50%{ transform: translate3d(0,-10px,0) rotate(calc(var(--rot,0deg) + 3deg)); }
}
@keyframes driftWM{
  0%,100%{ margin-left:0; }
  50%{ margin-left:14px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
  .premium-wrenches{ display:none; }
}

/* ================= HEADER ================= */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(0,0,0,0.88);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.logo{
  font-family:var(--brand);
  font-size:clamp(26px, 2.2vw, 38px);
  letter-spacing:0.4px;
  white-space:nowrap;
}

/* ================= BUTTONS ================= */
.pill-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:10px 18px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,0.40);
  background: rgba(255,255,255,0.04);
  color:#fff;
  text-decoration:none;
  font-weight:700;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -3px 0 rgba(0,0,0,0.55);

  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}

.pill-btn:hover{
  transform:translateY(-2px);
  color:var(--accent);
  box-shadow:
    0 14px 26px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -3px 0 rgba(0,0,0,0.62);
}

.pill-btn:active{
  transform:translateY(1px);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.28),
    inset 0 2px 6px rgba(0,0,0,0.55);
}

.icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

.nav-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
}

/* hero ghost button */
.ghost-btn{
  border:1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.22);
}

/* ================= MAIN ================= */
.main{
  position:relative;
  z-index:2;
  max-width:var(--max);
  margin:0 auto;
  padding:26px 16px 80px;
}

/* ================= HERO ================= */
.hero{
  padding:28px 0 44px;
  border-bottom:1px solid var(--border);
}

.hero-inner{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:calc(var(--radius) + 6px);
  background: radial-gradient(1000px 420px at 20% 10%, rgba(255,230,0,0.12), transparent 55%),
              radial-gradient(800px 420px at 90% 40%, rgba(0,255,213,0.08), transparent 60%),
              rgba(255,255,255,0.03);
  box-shadow:var(--shadow);
  padding:clamp(18px, 3vw, 34px);
}

.kicker{
  color:rgba(255,255,255,0.75);
  font-weight:600;
  letter-spacing:0.6px;
  text-transform:uppercase;
  font-size:12px;
}

.hero-title{
  text-align: center;
  margin-top:10px;
  font-family:var(--brand);
  font-size:clamp(44px, 5.2vw, 78px);
  line-height:1.02;
}

.hero-sub{
  margin-top:10px;
  color:rgba(255,255,255,0.80);
  font-size:clamp(16px, 1.1vw + 14px, 22px);
  max-width:60ch;
}

.hero-actions{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.trust{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:18px;
  color:rgba(255,255,255,0.78);
  font-weight:600;
}

/* ================= SECTIONS ================= */
.section{
  padding:56px 0;
  border-bottom:1px solid var(--border);
}
.section:last-of-type{ border-bottom:none; }

.section-head{ margin-bottom:18px; }

.section-title{
  text-align:center;
  font-family:var(--brand);
  font-size:clamp(34px, 3.2vw, 52px);
  letter-spacing:0.4px;
}

/* Grid */
.section-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:22px;
  align-items:stretch;
}

/* Reverse */
.section-grid.reverse{
  grid-template-columns: 0.85fr 1.15fr;
}
.section-grid.reverse .media{ order:2; }
.section-grid.reverse .content{ order:1; }

/* Media */
.media{
  width:100%;
  height:720px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#0a0a0a;
  border:1px solid rgba(255,255,255,0.06);
}

.media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Map fills */
.media.map{ position:relative; }
.media.map iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Content */
.content{ padding:6px 2px; }

/* Inklusive */
.incl{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:14px;
}
.incl-title{
  font-weight:900;
  letter-spacing:0.3px;
  color:rgba(255,255,255,0.88);
  margin-bottom:8px;
}
.incl-list{
  list-style:none;
  display:grid;
  gap:6px;
  color:rgba(255,255,255,0.78);
}
.incl-list li::before{
  content:"✓";
  color:var(--accent);
  margin-right:8px;
  font-weight:900;
}

/* Prices container same height */
.prices-content{
  height:720px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.price-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.price-list li{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;

  padding:16px 18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.price-list li span{
  color:rgba(255,255,255,0.82);
  font-weight:600;
  font-size:clamp(18px, 1.2vw, 22px);
}

.price-list li strong{
  font-family:var(--sans);
  font-weight:900;
  font-size:clamp(22px, 1.6vw, 30px);
  color:var(--accent);
  white-space:nowrap;
}

.price-note{
  margin-top:10px;
  font-size:clamp(14px, 1vw, 16px);
  color:rgba(255,255,255,0.65);
}

/* Kontakt right block: wrap long email/address */
.contact-content .price-list li strong,
.contact-content .price-list li a{
  display:block;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.25;
}
.contact-content a{
  color:var(--accent);
  text-decoration:none;
}
.contact-content a:hover{ text-decoration:underline; }

/* Map placeholder */
.map-placeholder{
  width:100%;
  height:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:20px;
  gap:16px;
}
.map-placeholder p{
  color:rgba(255,255,255,0.75);
  max-width:38ch;
}

/* ================= STEPS ================= */
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}

.step{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:0 10px 28px rgba(0,0,0,0.25);
}
.step-no{
  font-weight:900;
  color:rgba(255,255,255,0.25);
  font-size:42px;
  letter-spacing:1px;
}
.step-title{
  margin-top:6px;
  font-weight:900;
  font-size:18px;
}
.step-text{
  margin-top:8px;
  color:rgba(255,255,255,0.75);
}

/* ================= FOOTER ================= */
.footer{
  padding:44px 16px;
  text-align:center;
  border-top:1px solid var(--border);
  margin-top:24px;
}
.footer-brand{
  color:rgba(255,255,255,0.75);
  margin-bottom:12px;
}
.footer-links{
  list-style:none;
  display:flex;
  gap:14px;
  justify-content:center;
}
.footer a{
  color:rgba(255,255,255,0.85);
  text-decoration:none;
}
.footer a:hover{
  color:var(--accent);
  text-decoration:underline;
}

/* ================= MODAL ================= */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.62);
  backdrop-filter: blur(4px);
  z-index:2000;
}

.modal{
  position:fixed;
  inset:0;
  z-index:2100;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.modal-content{
  width:min(680px, 94vw);
  background:#0c0c0c;
  color:var(--text);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:calc(var(--radius) + 6px);
  padding:22px 18px;
  position:relative;
  box-shadow:0 22px 60px rgba(0,0,0,0.55);

  max-height:90vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.modal-content h2{
  font-family:var(--brand);
  font-size:clamp(34px, 3vw, 46px);
  margin-bottom:10px;
}
.modal-content h3{
  margin-top:14px;
  margin-bottom:6px;
  font-size:16px;
  font-weight:900;
}
.modal-content p{
  color:rgba(255,255,255,0.82);
  margin-bottom:10px;
}
.modal-close{
  position:absolute;
  right:12px;
  top:8px;
  border:none;
  background:transparent;
  color:#fff;
  font-size:32px;
  cursor:pointer;
}

.hidden{ display:none; }

/* ================= COOKIE BANNER ================= */
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:rgba(12,12,12,0.92);
  backdrop-filter: blur(8px);
  border-top:1px solid var(--border);
  padding:16px 14px;
  z-index:3000;
}

.cookie-content{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.cookie-content p{
  color:rgba(255,255,255,0.78);
  max-width:70ch;
}

.cookie-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ================= WALKER ================= */
#walker{
  position: fixed;   /* ← WICHTIG */
  top: 180px;
  left: 10%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: url("/images/logo.png") center no-repeat;
  background-size: contain;
  box-shadow: var(--shadow);
  transition: top .8s ease, left .8s ease;
  z-index: 9999;     /* ← ganz oben */
}

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .header-inner{
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
    gap:10px;
  }
  .nav-list{
    flex-wrap:wrap;
    justify-content:center;
  }
}

@media (max-width:900px){
  .section-grid,
  .section-grid.reverse{
    grid-template-columns:1fr;
  }

  .section-grid.reverse .media,
  .section-grid.reverse .content{
    order:initial;
  }

  .media{ height:420px; }
  .prices-content{ height:auto; }

  .steps{ grid-template-columns:1fr; }

  #walker{
    display:block;
    width:70px;
    height:70px;
    top:120px;
    left:10px;
  }

  .price-list li{
    flex-direction:column;
    align-items:flex-start;
  }
  .price-list li strong{
    align-self:flex-end;
    white-space:normal;
  }
}

@media (max-width:520px){
  .pill-btn{ padding:9px 14px; }
  .hero-title{ font-size:clamp(40px, 9vw, 56px); }
}