:root{
  --bg: #0b1210;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.085);
  --text: rgba(255,255,255,.98);
  --muted: rgba(255,255,255,.88);
  --line: rgba(255,255,255,.12);
  --brand: #ff7a18;
  --brand2: #ffb056;
  --ok: #38d996;
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;
}
/* =========================
   HEADER – NUR MOBILE
========================= */

/* Reset */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(255,122,24,.22), transparent 70%),
    radial-gradient(900px 500px at 90% 0%, rgba(255,176,86,.18), transparent 70%),
    linear-gradient(180deg, #3a5f52 0%, #35584b 30%, #2f4b40 60%, #1b2e27 100%);
  background-attachment: fixed;
  line-height: 1.55;
}

a{
  color: inherit;
  text-decoration: none;
}

img{
  max-width: 100%;
  display: block;
}

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

/* ================= HEADER ================= */

header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(42, 66, 58, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 18px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.brand img{
  width: 110px;
  filter:
    drop-shadow(0 8px 18px rgba(0,0,0,.25))
    brightness(1.1)
    contrast(1.1);
}

.brand .name{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand .name strong{
  font-size: 22px;
  letter-spacing: .4px;
}

.brand .name span{
  font-size: 14px;
  opacity: .9;
}

nav ul{
  list-style: none;
  display: flex;
  gap: 18px;
}

nav a{
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  transition: background .2s ease, color .2s ease;
}

nav a:hover{
  background: rgba(255,255,255,.08);
  color: var(--text);
}

/* ================= BUTTONS ================= */

.actions{
  display: flex;
  gap: 10px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.16);
  color: var(--text);
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}

.btn:hover{
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
}

.btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #1b120a;
  font-weight: 650;
  border: none;
  box-shadow: 0 18px 50px rgba(255,122,24,.25);
}

.btn::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.35),
    transparent 70%
  );
  opacity:0;
  transition: opacity .25s ease;
}

.btn:hover::after{
  opacity:1;
}

/* ================= HERO ================= */

.hero{
  padding: 70px 0 40px;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 24px;
}

.hero h1{
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.05;
  margin-bottom: 12px;
}

.hero h1 .hl{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  color: transparent;
}

.hero p{
  max-width: 60ch;
  color: var(--muted);
}

.hero-photo{
  border-radius: var(--radius2);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.hero-photo img{
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}

.hero-photo:hover img{
  transform: scale(1.05);
}

/* ================= SECTIONS ================= */

.section{
  padding: 60px 0;
}

.section h2{
  font-size: 30px;
  margin-bottom: 10px;
  position: relative;
}

.section h2::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  margin-top:10px;
  border-radius:3px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}

.section p.lead{
  max-width: 70ch;
  color: var(--muted);
  margin-bottom: 24px;
}

/* ================= CARDS ================= */

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

.grid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.card{
  padding: 22px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}

.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}

.card h3{
  margin-bottom: 8px;
}

.card p{
  color: var(--muted);
  font-size: 14px;
}

/* ================= REVEAL ================= */

.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.show{
  opacity: 1;
  transform: none;
}

/* ================= FOOTER ================= */

footer{
  padding: 40px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.foot{
  display:flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ================= RESPONSIVE ================= */

/* =========================
   REVIEWS – SAUBER LINKS
========================= */

.review-wrapper{
  position: relative;
  margin-top: 40px;
  padding: 0 60px;
}

.review-slider{
  overflow: hidden;
  width: 100%;
}

.review-track{
  display: flex;
  gap: 24px;
  align-items: stretch;
  transform: translateX(0); /* 🔥 immer links starten */
  transition: transform .5s ease;
}

.review{
  flex: 0 0 520px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  padding: 26px;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  color: white;
}

.review p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
}

.review span{
  font-size: 13px;
  color: rgba(255,255,255,.75);
}

/* Pfeile */
.review-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.6);
  color: white;
  font-size: 26px;
  cursor: pointer;
  z-index: 10;
}

.review-arrow.left{ left: 0; }
.review-arrow.right{ right: 0; }

/* Mobile */

.umzug-highlights{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.uh-card{
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.04)
  );
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

.uh-card strong{
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  color: transparent;
}

.uh-card span{
  font-size: 14px;
  color: var(--muted);
}

.hero-services{
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 15px;
  color: rgba(255,255,255,.85);
}

.hero-services span{
  position: relative;
  padding-left: 18px;
}

.hero-services span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}

.hero-services .sep{
  width:1px;
  height:16px;
  background: rgba(255,255,255,.25);
  padding:0;
}

.hero-services .sep::before{
  display:none;
}/* ===============================
   HERO – BOXEN RECHTS (FINAL)
================================ */

.hero-boxes{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 🔥 DESKTOP = 4 NEBENEINANDER */
  gap: 18px;
  align-items: stretch;
}

/* einzelne Box */
.hero-box{
  display: flex;
  flex-direction: column;
  height: 260px;              /* 🔥 ALLE GLEICH HOCH */
  padding: 22px;

  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.04)
  );
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

/* Titel */
.hero-box h4{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 650;
  color: var(--brand2);
}

/* Subline */
.hero-box .sub{
  font-size: 14px;
  color: rgba(255,255,255,.9);
  margin-bottom: 8px;
}

/* Beschreibung */
.hero-box .desc{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.85);
  margin-top: auto; /* 🔥 Text unten bündig */
}

/* Tablet */

/* Mobile */
.hero-grid{
  display: grid;
  grid-template-columns: 1.25fr .75fr; /* links Text, rechts Punkte */
  gap: 28px;
  align-items: center;
}

/* Rechte Seite */
.hero-points{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 0;
}

.point{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.point .icon{
  font-size: 22px;
  line-height: 1;
  margin-top: 2px;
}

.point strong{
  display: block;
  font-size: 16px;
  font-weight: 650;
  color: var(--brand2);
  margin-bottom: 4px;
}

.point p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
}

/* Mobile */
/* ====== DATENSCHUTZ ====== */
.privacy{
  margin-top: 18px;
}

.privacy-label{
  display: flex;
  align-items: center;
  gap: 10px;              /* 🔥 Abstand Checkbox ↔ Text */
  font-size: 13px;
  color: rgba(255,255,255,.85);
  cursor: pointer;
}

.privacy-label input{
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  flex-shrink: 0;
}

.privacy-label a{
  color: var(--brand2);
  text-decoration: underline;
}

.privacy-label a:hover{
  color: var(--brand);
}

/* ====== PDF DOWNLOAD ====== */
.pdf-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  font-size:14px;
  font-weight:600;
}

.pdf-link:hover{
  background:rgba(255,255,255,.18);
}
/* ====== DROPDOWN NAV ====== */

.has-dropdown{
  position: relative;
}

.has-dropdown > a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Pfeil */
.has-dropdown > a::after{
  content: "▾";
  font-size: 12px;
  opacity: .8;
}

/* Dropdown Menü */
.dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;

  background: rgba(42,66,58,.98);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 8px;

  box-shadow: 0 18px 50px rgba(0,0,0,.4);

  display: none;              /* 🔴 WICHTIG */
  z-index: 1000;
}

/* Desktop Hover */
@media (min-width: 901px){
.dropdown{
  display: none;
}

.dropdown.open{
  display: block;
}
}

/* Mobile: Hover deaktiviert */
@media (max-width: 900px){
  .has-dropdown:hover .dropdown{
    display: none;
  }

  .dropdown.open{
    display: block;
  }
}

/* Dropdown Links */
.dropdown li{
  list-style: none;
}

.dropdown a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.9);
}

.dropdown a:hover{
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* Trennlinie */
.dropdown-divider{
  height: 1px;
  margin: 6px 0;
  background: rgba(255,255,255,.15);
}
nav ul li a{
  display: inline-flex;
  align-items: center;
  height: 40px;          /* 🔥 fixes Höhenproblem */
  line-height: 40px;     /* 🔥 gleiche Baseline */
  padding: 0 12px;
}

/* Dropdown Pfeil */
.has-dropdown > a::after{
  content: "▾";
  font-size: 12px;
  margin-left: 6px;
  position: relative;
  top: 1px;              /* 🔥 Feinausrichtung */
  opacity: .8;
}
/* =================================================
   MOBILE LAYOUT – SAUBER & KONTROLLIERT
   bricht Desktop NICHT
================================================= */
/* =========================
   MOBILE MENU – CLEAN
========================= */
/* =========================
   ANFRAGE – FORM DESIGN
========================= */

.anfrage-page .container{
  max-width: 760px;
}

/* Überschrift */
.anfrage-page h1{
  font-size: 36px;
  margin-bottom: 6px;
}

.anfrage-page p{
  color: var(--muted);
}

/* Formular */
.anfrage-page form{
  margin-top: 28px;
  padding: 26px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Labels */
.anfrage-page label{
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 18px 0 6px;
  color: rgba(255,255,255,.9);
}

/* Inputs */
.anfrage-page input,
.anfrage-page textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-size: 15px;
}

.anfrage-page input::placeholder{
  color: rgba(255,255,255,.45);
}

.anfrage-page input:focus,
.anfrage-page textarea:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255,122,24,.25);
}

/* Reihen */
.anfrage-page .row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Mobile */
@media (max-width: 700px){
  .anfrage-page .row{
    grid-template-columns: 1fr;
  }
}

/* Datei-Upload */
.anfrage-page input[type="file"]{
  background: transparent;
  padding: 8px 0;
}

/* Datenschutz */
.anfrage-page .privacy{
  margin-top: 20px;
}

/* Submit Button */
.anfrage-page .submit{
  margin-top: 26px;
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #1b120a;
  border: none;
  cursor: pointer;
  box-shadow: 0 18px 50px rgba(255,122,24,.35);
}

.anfrage-page .submit:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
/* =========================
   KONTAKT-SEITE
========================= */

.contact-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 40px;
}

@media (max-width: 800px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
}

.contact-photo{
  border-radius: var(--radius2);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.05);
}

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

.contact-card{
  padding: 26px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}

.contact-item{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-item span{
  font-size: 12px;
  color: var(--muted);
}

.contact-item a{
  font-size: 16px;
  font-weight: 600;
}
/* =========================
   ÜBER UNS – BEWERTUNGEN
========================= */

.review-wrapper{
  position: relative;
  width: 100%;
  margin-top: 28px;
}

.review-slider{
  width: 100%;
  overflow: hidden;
}

.review-track{
  display: flex;
  gap: 20px;
  width: max-content;
  transition: transform .45s ease;
}

.review{
  width: 520px;
  min-height: 160px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  color: white;
}

.review p{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,.95);
}

.review span{
  font-size: 13px;
  color: rgba(255,255,255,.75);
}

/* Pfeile */
.review-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.55);
  color: white;
  font-size: 28px;
  cursor: pointer;
  z-index: 5;
}

.review-arrow.left{
  left: -24px;
}

.review-arrow.right{
  right: -24px;
}

@media (max-width: 900px){

  .review-wrapper{
    padding: 0 10px;          /* 🔥 vorher 60px → jetzt fast Fullwidth */
  }

  .review-slider{
    overflow: hidden;
  }

  .review-track{
    display: flex;
    gap: 0;
    width: 100%;
    transition: transform .4s ease;
  }

  .review{
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding: 22px 24px;       /* 🔥 mehr Luft innen */
    border-radius: 18px;
  }
}