:root{
  --bg:#0b1220;
  --bg2:#0f1b33;
  --text:#eaf0ff;
  --muted:#b9c6e6;
  --line:rgba(255,255,255,.10);
  --blue:#2b6cff;
  --blue2:#1f4dd6;
  --shadow: 0 14px 40px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 26px;
  --container: 1160px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(43,108,255,.22), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(43,108,255,.12), transparent 55%),
              linear-gradient(180deg, #07101f 0%, #070b14 100%);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
p{margin:0 0 12px}
strong{color:#ffffff}

.container{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
}

.section{padding:56px 0}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.h2{
  font-size: clamp(22px, 2.2vw, 34px);
  margin:0 0 10px;
  letter-spacing:.2px;
}
.h3{
  font-size: 18px;
  margin:0 0 8px;
}
.muted{color:var(--muted)}
.fineprint{font-size:12px; color:rgba(234,240,255,.72); margin-top:12px}

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background: rgba(7,11,20,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
}
.topbar__name{
  font-weight:800;
  letter-spacing:.3px;
}
.topbar__tag{
  display:block;
  font-size:12px;
  color:rgba(234,240,255,.70);
  margin-top:2px;
}
.topbar__cta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid var(--line);
  font-weight:700;
  font-size:14px;
}
.pill--primary{
  background: linear-gradient(180deg, var(--blue), var(--blue2));
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(43,108,255,.35);
}
.pill--ghost{background: rgba(255,255,255,.05)}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 16px;
  border-radius: 14px;
  border:1px solid var(--line);
  font-weight:800;
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease;
  user-select:none;
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.05)}
.btn--primary{
  background: linear-gradient(180deg, var(--blue), var(--blue2));
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(43,108,255,.30);
}
.btn--ghost{background: rgba(255,255,255,.06)}
.btn--full{width:100%}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(7,11,20,.88), rgba(7,11,20,.60) 55%, rgba(7,11,20,.90)),
    url("../bilder/hero.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.hero__inner{
  position:relative;
  padding: 44px 0 58px;
}
.hero__content{max-width: 800px}
.kicker{
  display:inline-block;
  padding:8px 12px;
  border-radius: 999px;
  background: rgba(43,108,255,.15);
  border:1px solid rgba(43,108,255,.25);
  color:rgba(234,240,255,.95);
  margin:0 0 14px;
  font-weight:700;
}
.hero__title{
  font-size: clamp(30px, 3.6vw, 52px);
  margin:0 0 12px;
  line-height:1.12;
  letter-spacing:.2px;
}
.hero__subtitle{
  color: rgba(234,240,255,.82);
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 700px;
}
.hero__badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:18px 0 18px;
}
.badge{
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  font-weight:700;
  font-size:13px;
}
.hero__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* Grid / Cards */
.grid{display:grid; gap:18px}
.grid--two{grid-template-columns: 1.1fr .9fr}
@media (max-width: 920px){
  .grid--two{grid-template-columns: 1fr}
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:18px;
}

/* Form */
.form{margin-top:12px}
.form__row{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
label{font-weight:800; font-size:13px; color:rgba(234,240,255,.88)}
input{
  padding:14px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(9,14,26,.65);
  color:var(--text);
  outline:none;
}
input::placeholder{color:rgba(234,240,255,.45)}
input:focus{
  border-color: rgba(43,108,255,.55);
  box-shadow: 0 0 0 3px rgba(43,108,255,.18);
}
.form__footer{margin-top:10px}

/* Contact */
.contact__head{display:flex; gap:14px; align-items:center}
.contact__photo{
  width:86px; height:86px;
  border-radius: 18px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
}
.contact__role{margin:0 0 2px; color:rgba(234,240,255,.75); font-size:12px}
.contact__box{
  margin-top:14px;
  padding:14px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
}
.contact__item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.contact__item:last-child{border-bottom:none}
.contact__label{color:rgba(234,240,255,.70); font-size:13px}
.contact__value{font-weight:900}
.contact__note{
  margin-top:14px;
  padding:12px 14px;
  border-radius: 18px;
  background: rgba(43,108,255,.12);
  border: 1px solid rgba(43,108,255,.22);
}

/* Features */
.features{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){ .features{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 620px){ .features{grid-template-columns: 1fr} }

.feature{
  background: rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
  min-height: 160px;
}
.feature__icon{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  font-size:30px;
  border-radius: 18px;
  background: rgba(43,108,255,.14);
  border:1px solid rgba(43,108,255,.20);
  margin-bottom:10px;
}

/* Media */
.media{
  background: rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.media__img{width:100%; height: 320px; object-fit:cover}
@media (max-width: 920px){ .media__img{height: 240px} }
.media__caption{
  padding:12px 14px;
  color:rgba(234,240,255,.72);
  font-size:13px;
}

/* Reviews Slider (CSS only) */
.reviews{
  position:relative;
  margin-top:18px;
  height: 360px;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  overflow:hidden;
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
@media (max-width: 720px){ .reviews{height: 520px;} }

.review{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  opacity:0;
  transform: translateX(10px);
  transition: opacity .5s ease, transform .5s ease;
}
@media (max-width: 720px){
  .review{grid-template-columns: 1fr; grid-template-rows: 220px 1fr;}
}
.review__image img{width:100%; height:100%; object-fit:cover}
.review__content{
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.review__meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius: 999px;
  background: rgba(43,108,255,.14);
  border:1px solid rgba(43,108,255,.22);
  font-weight:900;
  font-size:12px;
}
.stars{
  letter-spacing:2px;
  color:#ffd36a;
  font-weight:900;
}
.review__who{
  margin-top:6px;
  color:rgba(234,240,255,.70);
  font-weight:700;
  font-size:13px;
}

/* Autoplay: 5 Slides, je 5s => 25s */
.review--1{animation: slideShow 25s infinite; animation-delay: 0s}
.review--2{animation: slideShow 25s infinite; animation-delay: 5s}
.review--3{animation: slideShow 25s infinite; animation-delay: 10s}
.review--4{animation: slideShow 25s infinite; animation-delay: 15s}
.review--5{animation: slideShow 25s infinite; animation-delay: 20s}

@keyframes slideShow{
  0%{opacity:0; transform: translateX(10px)}
  8%{opacity:1; transform: translateX(0)}
  20%{opacity:1; transform: translateX(0)}
  28%{opacity:0; transform: translateX(-10px)}
  100%{opacity:0}
}

/* CTA */
.cta{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  align-items:center;
  padding:18px;
  border-radius: var(--radius2);
  border:1px solid rgba(43,108,255,.22);
  background: linear-gradient(180deg, rgba(43,108,255,.18), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}
@media (max-width: 920px){
  .cta{grid-template-columns: 1fr}
}

/* Trust */
.trust{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  margin-top:16px;
}
@media (max-width: 980px){ .trust{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 520px){ .trust{grid-template-columns: 1fr} }

.trust__item{
  background: rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
}
.trust__icon{
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  font-size:34px;
  border-radius: 20px;
  background: rgba(43,108,255,.14);
  border:1px solid rgba(43,108,255,.20);
  margin-bottom:10px;
}
.trust__title{font-weight:900; margin-bottom:6px}
.trust__text{color:rgba(234,240,255,.76); font-size:13px}

/* Textblock + Citylinks */
.textblock{
  margin-top:12px;
  padding:16px;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
}

.citylinks{
  margin-top:18px;
  padding:16px;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.citylinks__title{font-weight:900; margin-bottom:10px}
.citylinks__grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:10px;
}
@media (max-width: 980px){ .citylinks__grid{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 520px){ .citylinks__grid{grid-template-columns: repeat(2, 1fr)} }
.citylinks__grid a{
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  text-align:center;
  font-weight:800;
  color:rgba(234,240,255,.92);
}
.citylinks__grid a:hover{border-color: rgba(43,108,255,.45)}

/* FAQ */
.faq{
  margin-top:16px;
  display:grid;
  gap:10px;
}
.faq__item{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.faq__item summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
  outline:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__content{
  margin-top:10px;
  color: rgba(234,240,255,.80);
}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding:22px 0;
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.footer__brand{font-weight:900}
.footer__muted{color:rgba(234,240,255,.70); font-size:12px}
.footer__right{display:flex; gap:14px; flex-wrap:wrap}
.footer__right a{color:rgba(234,240,255,.80)}
.footer__right a:hover{color:#ffffff}
/* ============ Mobile Bottom Bar (WhatsApp + Call) ============ */
.bottombar{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 50;

  display: none; /* nur mobil */
  gap: 10px;

  background: rgba(7,11,20,.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.bottombar__btn{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 14px 12px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.bottombar__btn--call{
  background: rgba(255,255,255,.06);
}

.bottombar__btn--wa{
  background: linear-gradient(180deg, var(--blue), var(--blue2));
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(43,108,255,.30);
}

@media (max-width: 820px){
  .bottombar{display:flex;}
  /* damit die Bottombar nichts überdeckt */
  body{padding-bottom: 92px;}
}
/* ============ Step2 Extras: One-column + Choices + Textarea ============ */
.grid--one{grid-template-columns: 1fr}

.hero--compact .hero__bg{
  background:
    linear-gradient(90deg, rgba(7,11,20,.90), rgba(7,11,20,.68) 60%, rgba(7,11,20,.92)),
    url("../bilder/hero.jpg");
  background-size: cover;
  background-position: center;
}

.hero__inner--compact{padding: 30px 0 34px}
.hero__title--compact{font-size: clamp(26px, 3vw, 40px)}

.sep{
  border:0;
  border-top:1px solid rgba(255,255,255,.10);
  margin:16px 0;
}

.mini-info{
  margin-top:12px;
  padding:12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  color: rgba(234,240,255,.84);
}
.mini-info strong{color:#fff}

.form__row--two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 620px){
  .form__row--two{grid-template-columns: 1fr}
}

/* Choice Buttons (Klick-Auswahl) */
.choice__input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.choices{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}

.choice{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight:900;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease;
}

.choice:hover{transform: translateY(-1px); filter: brightness(1.05)}
.choice__input:checked + .choice{
  border-color: rgba(43,108,255,.55);
  background: rgba(43,108,255,.16);
  box-shadow: 0 0 0 3px rgba(43,108,255,.12);
}

/* Textarea */
.textarea{
  width:100%;
  padding:14px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(9,14,26,.65);
  color:var(--text);
  outline:none;
  resize: vertical;
}
.textarea::placeholder{color:rgba(234,240,255,.45)}
.textarea:focus{
  border-color: rgba(43,108,255,.55);
  box-shadow: 0 0 0 3px rgba(43,108,255,.18);
}
/* === FIX: Review-Bild darf Text nie wegdrücken === */
.reviews .review__image{
  height: 280px;          /* Desktop-Höhe – kannst du später feinjustieren */
  overflow: hidden;
  border-radius: 18px;    /* passt zu deinem Look */
}

@media (max-width: 720px){
  .reviews .review__image{
    height: 240px;        /* Handy-Höhe */
    border-radius: 18px;
  }
}

.reviews .review__image img{
  width: 100%;
  height: 200%;
  object-fit: cover;      /* Bild wird sauber beschnitten, nie verzerrt */
  display: block;
}
.topbar__brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.topbar__logo img{
  height:34px;
  width:auto;
  display:block;
}
/* === Topbar Mobil Fix === */
@media (max-width: 768px){

  .topbar__inner{
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar__brand{
    width: 100%;
    justify-content: flex-start;
  }

  .topbar__cta{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .topbar__cta a{
    flex: 1 1 auto;
    text-align: center;
  }
}
/* Hero Buttons: Desktop bleibt, Mobil: 1 oben + 2 nebeneinander */
@media (max-width: 720px){
  .hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }

  /* Anfrage oben, volle Breite */
  .hero__actions .btn--primary{
    flex: 0 0 100%;
    text-align:center;
    justify-content:center;
  }

  /* Mobil + Festnetz darunter, 2 Spalten */
  .hero__actions .btn--ghost{
    flex: 1 1 calc(50% - 10px);
    text-align:center;
    justify-content:center;
  }
}
/* Mobile: Anfrage-Button über die Telefon-Buttons */
@media (max-width: 768px) {
  .hero_actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .hero_actions .btn-primary {
    grid-column: 1 / -1; /* über beide Spalten */
  }
}
html{ scroll-behavior: auto; }  /* wir steuern es per JS */
/* Mobil: Platz für die feste Bottom-Bar, damit Footer/Impressum nicht überdeckt wird */
@media (max-width: 768px){
  body{
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
}
/* Mobile: Footer klickbar machen trotz Bottom-Bar */
@media (max-width: 768px){
  .bottombar{
    pointer-events: auto;
  }

  footer{
    position: relative;
    z-index: 5;
  }
}
@media (max-width: 768px){
  footer{
    margin-bottom: 110px;
    z-index: 10;
  }
}
@media (max-width: 820px){
  .bottombar{display:flex;}

  /* iPhone/Android: Platz für Bottom-Bar + Safe-Area */
  body{
    padding-bottom: calc(160px + env(safe-area-inset-bottom));
  }

  /* Extra Sicherheit: Footer-Inhalt wird garantiert über der Bar sichtbar/klickbar */
  .footer{
    margin-bottom: calc(70px + env(safe-area-inset-bottom));
  }
}
/* MOBILE: Footer über der festen Bottom-Bar sichtbar machen */
@media (max-width: 820px) {

  .footer {
    padding-bottom: 160px; /* Platz für Call + WhatsApp */
  }

  .footer_right {
    position: relative;
    z-index: 2;
  }

}
/* Zurück-Button (Impressum / Datenschutz) */
.backlink{
  position: fixed;
  right: 20px;
  bottom: 110px; /* oberhalb der Bottom-Bar */
  z-index: 50;

  background: rgba(20,28,47,0.95);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  transition: transform .2s ease, opacity .2s ease;
}

.backlink:hover{
  transform: translateY(-2px);
  opacity: .9;
}

/* Mobil: etwas höher wegen WhatsApp/Anrufen */
@media (max-width: 820px){
  .backlink{
    bottom: 150px;
    font-size: 13px;
  }
}