:root{
  /* Neutral-dunkles Farbschema */
  --bg:#0e0e10; 
  --bg2:#141417; 
  --card:#1a1a1d; 
  --line:#2a2a2e;

  --muted:#c7c7c7; 
  --text:#ffffff; 
  --head:#ffffff; 
  --brand:#f0f0f0; /* Button-/Akzent-Hintergründe: hellgrau, NICHT blau */

  --ok:#34d399; 
  --warn:#fbbf24; 
  --danger:#fb7185;

  --r:18px; 
  --max:1200px;
  --shadow:0 10px 30px rgba(0,0,0,.35)
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Links neutral hell statt blau */
a{color:var(--head);text-decoration:none}
a:hover{color:var(--muted)}

img{max-width:100%;display:block}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding:0 20px}

/* Buttons: helles Grau mit schwarzer Schrift (gute Lesbarkeit) */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 1.2rem;border-radius:999px;
  background:var(--brand);color:#000;font-weight:700;
  box-shadow:var(--shadow);
  transition:transform .15s ease,filter .2s;
}
.btn:hover{transform:translateY(-1px);filter:saturate(1.02)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}

/* Badges/Chips neutral dunkel */
.badge{
  display:inline-flex;gap:.45rem;align-items:center;
  background:#232326;border:1px solid #2f2f33;
  color:#e7e7e7;font-size:.8rem;padding:.35rem .6rem;border-radius:999px
}

/* Header/Kopfbereich */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(14,14,16,.78);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.65rem 0}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{width:40px;height:40px;border-radius:10px}
.brand b{color:var(--head);letter-spacing:.2px}
.menu{display:flex;gap:1rem;align-items:center}
.menu a{color:var(--text);opacity:.9}
.menu a:hover{opacity:1}


/* Menü-Button „Angebot anfragen“ – hellgrau mit schwarzer Schrift */
header .btn,
.site-header .btn,
.menu .btn,
nav .btn {
  background: #f5f5f5 !important;   /* heller Button */
  color: #000 !important;            /* schwarze Schrift */
  border: 1px solid #d9d9d9 !important;
  box-shadow: var(--shadow);
}

header .btn:hover,
.site-header .btn:hover,
.menu .btn:hover,
nav .btn:hover {
  background: #e3e3e3 !important;   /* leicht dunkler beim Hover */
  color: #000 !important;
}


/* Burger/ Menü-Trigger ohne Blautöne */
.burger{
  display:none;align-items:center;gap:.4rem;
  background:#1b1b1e;border:1px solid var(--line);
  padding:.5rem .7rem;border-radius:12px;color:#ececec
}

/* Sections */
section{padding:64px 0;border-top:1px solid var(--line)}
h1,h2,h3{color:var(--head);margin:0 0 10px}
p.lead{color:var(--muted);margin:0 0 22px}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero .wrap{display:grid;gap:26px;align-items:center;padding:54px 0}
.hero h1{font-size:clamp(1.9rem,3.8vw,3.1rem);line-height:1.15}
.hero p{color:var(--muted);margin:.5rem 0 1.1rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}

/* Hero-Visual: keine blauen Gradients/Overlays */
.hero-visual{


  position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  min-height:260px;
  background:linear-gradient(180deg,#1a1a1d,#111);
}
.hero-visual::after{content:"";position:absolute;inset:0;background:transparent;opacity:0}

/* Grids */
.grid{display:grid;grid-template-columns:1fr;gap:16px}

/* Karten (u. a. „Warum wir?“, Pakete etc.) — keine blauen Kästen */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.card h3{margin:.2rem 0}
.card p{color:var(--muted)}

/* Features */
.features{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.features li{display:flex;gap:.55rem}
.features li::before{content:"✓";color:var(--ok);font-weight:900}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gallery img{height:170px;object-fit:cover;border-radius:14px;border:1px solid var(--line)}

/* Pricing-like cards (ohne Preise) */
.pricing{display:grid;gap:16px}
.price{position:relative}
.price .tag{position:absolute;top:12px;right:12px}
/* Blaue Subline neutralisieren */
.kicker{font-size:.9rem;color:#e0e0e0}

/* Steps (vorher blau) */
.steps{display:grid;gap:12px}
.step{
  border:1px dashed #3a3a3f;
  background:#151517;
  border-radius:16px;padding:14px
}

/* Contact */
form{display:grid;gap:10px}
label{font-size:.9rem;color:#e0e0e0}
input,textarea,select{
  background:#1a1a1d;border:1px solid var(--line);
  color:var(--text);padding:12px;border-radius:12px
}

/* Sticky WhatsApp */
.whats-app{position:fixed;right:16px;bottom:16px;z-index:60}
.whats-app a{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1rem;border-radius:999px;
  background:#25D366;color:#032;box-shadow:var(--shadow);font-weight:700
}

/* Footer */
footer{padding:36px 0;border-top:1px solid var(--line);color:#cfcfcf}

/* Responsive */
@media (max-width:820px){
  .burger{display:inline-flex}
  .menu{
    display:none;flex-direction:column;position:absolute;top:62px;right:20px;
    background:#1a1a1d;border:1px solid var(--line);
    border-radius:12px;padding:10px;width:min(92vw,320px)
  }
}
@media (min-width:680px){
  .menu{gap:1.2rem}
  .hero .wrap{grid-template-columns:1.05fr .95fr}
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Kontaktformular Verbesserungen (unverändert, nur Farben greifen oben) */
#kontakt form { width: 100%; max-width: 100%; align-self: stretch; }
#kontakt form label { display: block; margin-bottom: 14px; }
#kontakt input, #kontakt textarea, #kontakt select {
  width: 100%; max-width: 100%; box-sizing: border-box;
  padding: 14px 16px; font-size: 16px; line-height: 1.4; border-radius: 12px;
}
#kontakt textarea { min-height: 140px; resize: vertical; }
#kontakt .btn[type="submit"] { width: 100%; padding: 14px 18px; }
@media (min-width: 900px) {
  #kontakt .grid.two { grid-template-columns: 3fr 2fr; column-gap: 24px; }
  #kontakt form { max-width: 760px; }
}





/* === Oben-Abstand hart reduzieren (Hero/erste Sektion) === */
.hero,
.hero .wrap,
main,
.content,
.page,
section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hero gezielt etwas Luft, aber klein halten */
.hero .wrap {
  padding-top: 14px !important;   /* vorher 54px */
  padding-bottom: 32px;           /* unten moderat */
}

/* Häufige "sticky header spacer" neutralisieren */
.header-spacer,
.site-header-spacer,
.sticky-spacer,
.sticky-header-spacer {
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: none !important;
}

/* Falls der Header selbst unten noch Luft lässt */
header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom-width: 1px; /* nur Linie, kein Abstand */
}

/* Auf kleinen Screens sicherstellen */
@media (max-width: 820px) {
  .hero .wrap { padding-top: 10px !important; }
}

/* Höhe deines Sticky-Headers eintragen (≈ Navbar-Höhe) */
html{
  scroll-behavior: smooth;
  scroll-padding-top: 64px;   /* ggf. auf 72/78 anpassen */
}

/* Für Sprünge zu Ankern/Abschnitten */
section[id],
[id^="section-"],
h1[id], h2[id], h3[id]{
  scroll-margin-top: 64px;    /* gleicher Wert wie oben */
}