/* ==========================================================
   PolishUp Autopflege – Global Styles
   Dark Premium Design (Black / Blue)
   ========================================================== */

/* ---------- CSS Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root{
  --bg-main:#0b0b0b;
  --bg-secondary:#121212;
  --bg-card:#161616;

  --text-main:#ffffff;
  --text-muted:#b5b5b5;

  --blue-main:#1ea7ff;
  --blue-dark:#1284cc;

  --border-color:#242424;
}

/* ---------- Base ---------- */
body{
  font-family:"Inter","Segoe UI",Arial,sans-serif;
  background:var(--bg-main);
  color:var(--text-main);
  line-height:1.6;
}

a{
  text-decoration:none;
  color:var(--text-main);
  transition:color .25s ease, opacity .25s ease;
}
a:hover{ color:var(--blue-main); }

p{ color:var(--text-muted); font-size:1rem; }
h1,h2,h3,h4{ font-weight:600; color:var(--text-main); line-height:1.25; }
h1{ font-size:2.6rem; }
h2{ font-size:2rem; }
h3{ font-size:1.35rem; }

strong{ color:var(--text-main); }

/* ---------- Layout ---------- */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 1.5rem;
}

.section{ padding:5rem 0; }

/* ---------- Header (dünner) ---------- */
header{
  background:rgba(11,11,11,.92);
  border-bottom:1px solid var(--border-color);
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter: blur(8px);
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:64px; /* vorher 80px */
}

.logo{
  font-size:1rem;
  letter-spacing:1.8px;
  color:var(--blue-main);
  font-weight:600;
  text-transform:none;
}

/* ---------- Navigation ---------- */
nav ul{
  list-style:none;
  display:flex;
  gap:1.6rem;
  align-items:center;
}

nav li{ position:relative; }
nav a{
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:1px;
  opacity:.92;
}
nav a:hover{ opacity:1; }

/* Dropdown (Desktop Hover) */
.dropdown{
  display:none;
  position:absolute;
  top:120%;
  left:0;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  min-width:230px;
  padding:.45rem 0;
}

.dropdown a{
  display:block;
  padding:.65rem 1.2rem;
  font-size:.9rem;
  text-transform:none;
  letter-spacing:.2px;
}

nav li:hover .dropdown{ display:block; }

/* ---------- Mobile Navigation ---------- */
.burger{
  display:none;
  font-size:1.35rem;
  color:var(--blue-main);
  cursor:pointer;
}

.mobile-nav{
  display:none;
  background:var(--bg-main);
  border-top:1px solid var(--border-color);
}

.mobile-nav ul{
  list-style:none;
  padding:1rem 1.2rem;
}

.mobile-nav li{ margin-bottom:1rem; }

.mobile-nav a{
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:1px;
}

/* Mobile Dropdown: erst zu, dann per JS öffnen */
.mobile-nav .dropdown{
  display:none;
  position:static;
  border:none;
  background:transparent;
  padding:.5rem 0 0 .2rem;
  min-width:auto;
}
.mobile-nav .dropdown a{
  padding:.55rem 0;
  color:var(--text-muted);
}
.mobile-nav .dropdown.active{ display:block; }

.mobile-nav.active{ display:block; }

/* ---------- Hero (links ausgerichtet + Visual rechts) ---------- */
.hero{
  min-height:84vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 70% 55%, rgba(30,167,255,.10), transparent 65%),
    radial-gradient(700px 420px at 25% 35%, rgba(30,167,255,.06), transparent 60%),
    linear-gradient(rgba(0,0,0,.50), rgba(0,0,0,.60));
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:3rem;
  align-items:center;
  padding:2.2rem 0;
}

.hero-kicker{
  color:var(--blue-main);
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:.85rem;
  margin-bottom:.9rem;
}

.hero h1 span{ color:var(--blue-main); }

.hero-lead{
  max-width:640px;
  margin-top:1.2rem;
}

.trust-row{
  margin-top:1.7rem;
  display:flex;
  gap:1.6rem;
  flex-wrap:wrap;
}

.trust-item{
  display:flex;
  gap:.5rem;
  align-items:center;
  color:var(--text-muted);
  font-size:.95rem;
}
.trust-item i{ color:var(--blue-main); }

/* CTA */
.btn{
  display:inline-block;
  margin-top:2.1rem;
  padding:.85rem 2.1rem;
  border:1px solid var(--blue-main);
  color:var(--blue-main);
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:.9rem;
  transition: all .25s ease;
}
.btn:hover{
  background:var(--blue-main);
  color:#000;
}

/* ---------- Hero Visual (ruhige Animation rechts) ---------- */
.hero-visual{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.visual-wrap{
  width:340px;
  height:340px;
  position:relative;
  border-radius:24px;
}

.visual-card{
  position:absolute;
  inset:0;
  border-radius:24px;
  background:
    radial-gradient(120px 120px at 30% 25%, rgba(30,167,255,.20), transparent 60%),
    radial-gradient(140px 140px at 75% 70%, rgba(30,167,255,.12), transparent 62%),
    linear-gradient(180deg, rgba(22,22,22,.95), rgba(12,12,12,.95));
  border:1px solid rgba(36,36,36,.9);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

/* Pulsierende Ringe */
.ring{
  position:absolute;
  inset:18px;
  border-radius:22px;
  border:1px solid rgba(30,167,255,.22);
  animation:pulse 3.2s ease-in-out infinite;
}
.ring.r2{
  inset:46px;
  border-color: rgba(30,167,255,.16);
  animation-duration: 4.4s;
}
.ring.r3{
  inset:74px;
  border-color: rgba(30,167,255,.12);
  animation-duration: 5.4s;
}

/* Schwebendes Icon */
.visual-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:92px;
  height:92px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,11,11,.65);
  border:1px solid rgba(30,167,255,.25);
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
  animation: floaty 3.6s ease-in-out infinite;
}
.visual-icon i{
  font-size:2.4rem;
  color:var(--blue-main);
}

/* Kleine Stat-Badges */
.visual-badge{
  position:absolute;
  padding:.65rem .9rem;
  border-radius:16px;
  background: rgba(11,11,11,.70);
  border:1px solid rgba(36,36,36,.9);
  color:var(--text-muted);
  font-size:.9rem;
  display:flex;
  gap:.55rem;
  align-items:center;
  backdrop-filter: blur(8px);
  animation: floaty 4.4s ease-in-out infinite;
}
.visual-badge i{ color:var(--blue-main); }

.badge-1{ top:22px; left:22px; animation-delay:.2s; }
.badge-2{ bottom:22px; right:22px; animation-delay: .6s; }

/* Animations */
@keyframes floaty{
  0%,100%{ transform: translate(-50%,-50%) translateY(0); }
  50%{ transform: translate(-50%,-50%) translateY(-10px); }
}
@keyframes pulse{
  0%,100%{ opacity:.55; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.015); }
}

/* ---------- Services ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
  margin-top:3rem;
}

.service-card{
  background:var(--bg-card);
  padding:2rem;
  border:1px solid var(--border-color);
  transition:transform .25s ease, border .25s ease;
}

.service-card:hover{
  transform:translateY(-5px);
  border-color:var(--blue-main);
}

.service-card i{
  font-size:2rem;
  color:var(--blue-main);
  margin-bottom:1rem;
}

/* ---------- Footer (groß & professionell) ---------- */
footer{
  background:var(--bg-secondary);
  border-top:1px solid var(--border-color);
  padding:4rem 0; /* etwas größer */
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2.2rem;
}

footer p, footer a{
  font-size:.92rem;
  color:var(--text-muted);
}

footer a:hover{ color:var(--blue-main); }

footer h3{
  font-size:1.05rem;
  margin-bottom:.8rem;
}

footer i{
  color:var(--blue-main);
  margin-right:.55rem;
}

/* ---------- Forms ---------- */
form{ max-width:600px; }

input, textarea{
  width:100%;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:.85rem;
  color:#fff;
  margin-bottom:1rem;
}

input:focus, textarea:focus{
  outline:none;
  border-color:var(--blue-main);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  nav{ display:none; }
  .burger{ display:block; }

  .hero-inner{
    grid-template-columns: 1fr;
    gap:2rem;
  }
  .hero-visual{
    justify-content:flex-start;
  }
  .visual-wrap{
    width:320px;
    height:320px;
  }
}

@media (max-width: 520px){
  h1{ font-size:2.05rem; }
  .trust-row{ gap:1rem; }
  .visual-wrap{ width:290px; height:290px; }
}