/* ===========================
   Design Tokens / Root
=========================== */
:root{
  --header-h: 90px;
  --radius: 22px;

  --brand-green: #145c2f;   /* Primärgrün */
  --brand-green-dark:#0f3e23;
  --wa-green:#25D366;

  --text:#111;
  --bg:#fff;

  --shadow-soft: 0 14px 40px rgba(0,0,0,.15);
  --shadow-strong: 0 8px 25px rgba(0,0,0,.30);
}

/* ===========================
   Global Base
=========================== */
*{ box-sizing:border-box; }

html,body{
  height:100%;
}

body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Utility */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ===========================
   Header / Topbar
=========================== */
.topbar{
  position:sticky;top:0;z-index:1000;
  height:var(--header-h);
  background:transparent;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;
}

.brand img{
  height:70px;width:auto;display:block;object-fit:contain;
}

/* Hamburger */
.hamburger{
  appearance:none;cursor:pointer;
  background:#fff;border:1.5px solid #e2e5e9;
  width:50px;height:50px;border-radius:12px;
  display:grid;place-items:center;
  box-shadow:0 3px 6px rgba(0,0,0,.08);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), 
             box-shadow .25s, border-color .25s;
}
.hamburger:hover{ box-shadow:0 6px 12px rgba(0,0,0,.12); border-color:#d0d5da; }

.hamburger .bars{
  position:relative;width:24px;height:2.6px;background:#222;border-radius:2px;
  transition:background .2s;
}
.hamburger .bars::before,
.hamburger .bars::after{
  content:"";position:absolute;left:0;
  width:24px;height:2.6px;background:#222;border-radius:2px;
  transform-origin:50% 50%;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             top .35s cubic-bezier(.22,.61,.36,1),opacity .2s;
}
.hamburger .bars::before{ top:-8px; }
.hamburger .bars::after{ top:8px; }

.hamburger[aria-expanded="true"]{ transform:rotate(90deg); }
.hamburger[aria-expanded="true"] .bars{ background:transparent; }
.hamburger[aria-expanded="true"] .bars::before{ top:0; transform:rotate(45deg) scaleX(1.05); }
.hamburger[aria-expanded="true"] .bars::after{ top:0; transform:rotate(-45deg) scaleX(1.05); }

/* ===========================
   Scrim (Dunkler Hintergrund)
=========================== */
.scrim{
  position:fixed;inset:0;z-index:1500;display:none;
  background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
}
.scrim.show{ display:block; }

/* ===========================
   Menü-Panel
=========================== */
.menu-panel{
  position:fixed;z-index:2000;left:50%;top:calc(var(--header-h) + 30px);
  transform:translateX(-50%);
  width:min(520px,92vw);background:#fff;color:#111;border-radius:18px;
  box-shadow:0 24px 45px rgba(0,0,0,.25);
  display:none;opacity:0;overflow:hidden;
  transition:opacity .25s ease, transform .25s ease;
}
.menu-panel.open{ display:block; opacity:1; transform:translateX(-50%) translateY(0); }

.menu-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid #eceff3;
}
.menu-title{ font-weight:800;font-size:1.1rem; }

.close-btn{
  appearance:none;border:none;background:#f3f4f6;border:1px solid #e5e7eb;
  width:42px;height:42px;border-radius:10px;cursor:pointer;display:grid;place-items:center;
}
.close-btn:before{ content:"✕";font-size:18px;color:#111; }

.menu-body{
  padding:22px 18px 130px;display:grid;gap:16px;
}
.menu-list{
  list-style:none;margin:0;padding:0;display:grid;gap:12px;
}
.menu-link{
  display:block;text-align:center;text-decoration:none;color:#111;
  font-weight:800;font-size:1.15rem;padding:12px 14px;
  background:#f7f8fa;border:1px solid #eceff3;border-radius:12px;
  transition:background .2s, color .2s, transform .1s;
}
.menu-link:hover{ background:#eef1f5;color:var(--brand-green); }
.menu-link:active{ transform:translateY(1px); }

.menu-cta{
  background:var(--brand-green);color:#fff;text-decoration:none;
  padding:15px 20px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:800;box-shadow:0 6px 22px rgba(0,0,0,.25);
  width:min(300px,90%);margin:40px auto 20px;transition:all .2s ease;
}
.menu-cta:hover{ background:var(--brand-green-dark);transform:translateY(-1px); }

/* ===========================
   Hero-Karte (Bild + Overlay)
=========================== */
.hero-card {
  position: relative;
  width: min(1100px, 96vw);
  margin: 20px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: #111;
  height: clamp(380px, 52vh, 500px);

  /* statt zentriertem Inhalt -> Inhalt nach oben */
  display: flex;
  align-items: flex-start; /* Inhalt oben ausrichten */
  justify-content: center;
  text-align: center;
}

/* Inhalt etwas vom Rand entfernt */
.content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 720px;
  padding: 1rem;
  text-align: center;

  /* Abstand von oben, damit’s gut aussieht */
  margin-top: 2.5rem; /* höher = weiter unten, kleiner = weiter oben */
  padding-inline: clamp(12px, 4vw, 24px);
}

/* Hintergrundbild */
.hero-card::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:url("https://i.ibb.co/tPZPcQCb/schluesseldienst.jpg") center/cover no-repeat;
}

/* Overlay für Lesbarkeit */
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 100%);
}

/* Inhalt (Titel, Bullets) */
.content{
  position:relative;z-index:2;color:#fff;
  max-width:720px;padding:1rem;text-align:center;
  padding-inline:clamp(12px,4vw,24px);
}

/* Titel + Untertitel */
.title{
  font-size:clamp(2.4rem,7vw,5rem);
  font-weight:900;text-transform:uppercase;line-height:1.05;
  margin:0 0 .4rem 0;
  text-shadow:0 3px 12px rgba(0,0,0,.7);
}
.subtitle{
  display:block;font-size:clamp(1rem,2.6vw,2rem);
  font-weight:700;color:#fff;margin-top:.4rem;text-transform:none;
  letter-spacing:.5px;opacity:.95;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}

/* Bullets */
.bullets{
  list-style:none;margin:1.2rem auto 0;padding:0;
  display:grid;gap:.9rem;justify-items:center;
}
.bullet{
  display:flex;align-items:center;gap:.8rem;
  font-size:clamp(1.1rem,2.5vw,1.4rem);font-weight:800;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.icon{
  font-size:1.8rem;color:#fff;opacity:.9;min-width:2rem;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
  transition:transform .25s ease, opacity .25s ease;
}
.bullet:hover .icon{ transform:scale(1.1); opacity:1; }

/* ===========================
   CTA-Bar unter dem Foto
=========================== */
.cta-bar{
  position:relative;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  width:100%;max-width:360px;
  margin:-35px auto 60px; /* leichte Überlappung mit dem Bild */
}

/* Buttons */
.btn{
  width:100%;text-align:center;text-decoration:none;border:none;
  border-radius:999px;padding:1rem 1.4rem;
  font-weight:800;font-size:1rem;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  box-shadow:var(--shadow-strong);
  transition:transform .25s ease, filter .25s ease;
}
.btn i{ font-size:1.2rem;color:#fff; }

/* Anrufen */
.btn.call,
.btn.whatsapp {
  background: var(--brand-green); /* dein Marken-Grün */
  color: #fff;
}

.btn.call:hover,
.btn.whatsapp:hover {
  transform: translateY(-3px);
  filter: brightness(1.15);
  background: var(--brand-green-dark); /* etwas dunkler beim Hover */
}
Damit 

/* ===========================
   Responsive Tweaks
=========================== */
@media (max-width:420px){
  .title{ font-size:clamp(1.8rem,9vw,3rem); letter-spacing:.5px; }
}

@media (max-width:340px){
  .title{ font-size:clamp(1.5rem,9.8vw,2.6rem); }
}

/* ===========================
   Motion Preferences
=========================== */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
}@media (max-width: 480px) {
  .content {
    margin-top: 1.5rem;
  }
}