/* =========================
   VS Technik – Design System (Jimdo Creator)
   Font: Helvetica Neue
   ========================= */

:root{
  --vs-green:#2f6f2f;
  --vs-text:#111827;
  --vs-muted:#4b5563;
  --vs-border:rgba(0,0,0,.10);
  --vs-soft:rgba(0,0,0,.035);
  --vs-white:#fff;
  --vs-radius:18px;
  --vs-shadow:0 10px 22px rgba(0,0,0,.06);
}

html, body{
  margin:0;
  padding:0;
  background:#fff;
  color:var(--vs-text);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }

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

/* Jimdo Overrides (damit nichts links „zieht“) */
#container{ background:#fff !important; }
#content{ width:100% !important; }
#sidebar{ width:0 !important; }
body{ background:#fff !important; }

/* Layout container */
.vs-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 18px;
}

/* Spacing helpers */
.vs-mt-12{ margin-top:12px; }
.vs-mt-18{ margin-top:18px; }
.vs-mt-24{ margin-top:24px; }

/* Typography */
.vs-h2{ margin:0 0 10px; font-size:26px; line-height:1.2; font-weight:800; color:var(--vs-text); }
.vs-h3{ margin:0 0 8px; font-size:16px; line-height:1.25; font-weight:800; color:var(--vs-text); }
.vs-p { margin:0; line-height:1.65; color:var(--vs-muted); }
.vs-small{ font-size:13px; color:var(--vs-muted); line-height:1.5; }

/* Cards */
.vs-card{
  background:var(--vs-white);
  border:1px solid var(--vs-border);
  border-radius:var(--vs-radius);
  padding:18px;
  box-shadow:var(--vs-shadow);
}
.vs-card-soft{
  background:var(--vs-soft);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--vs-radius);
  padding:16px;
}

/* Buttons */
.vs-btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  background:var(--vs-green);
  color:#fff !important;
  font-weight:800;
  text-decoration:none !important;
  border:1px solid rgba(0,0,0,.08);
}
.vs-btn:hover{ filter:brightness(.95); }

.vs-btn-ghost{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.14);
  color:#fff !important;
  font-weight:800;
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,.35);
}

/* Grids */
.vs-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.vs-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }

/* Topbar / Header */
.vs-topbar{
  position:sticky;
  top:0;
  z-index:999;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--vs-border);
}
.vs-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 0;
}
.vs-logo img{ height:44px; width:auto; display:block; }

.vs-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-weight:800;
  font-size:14px;
}
.vs-nav a{
  padding:10px 10px;
  border-radius:12px;
}
.vs-nav a:hover{
  background:rgba(0,0,0,.04);
  text-decoration:none;
}

.vs-cta{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  background:var(--vs-green);
  color:#fff !important;
  font-weight:900;
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none !important;
}
.vs-cta:hover{ filter:brightness(.95); }

/* Main */
.vs-main{ padding:18px 0 36px; background:#fff; }

/* Hero */
.vs-hero{
  border-radius:var(--vs-radius);
  overflow:hidden;
  position:relative;
  min-height:320px;
}
.vs-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.18));
}
.vs-hero-content{
  position:relative;
  padding:34px;
  max-width:760px;
  color:#fff;
}
.vs-hero h1{ margin:0 0 10px; font-size:40px; line-height:1.1; font-weight:900; }
.vs-hero p{ margin:0 0 18px; line-height:1.6; opacity:.95; }

.vs-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.vs-hero-note{ margin-top:10px; font-size:13px; color:rgba(255,255,255,.85); }

/* Zusatzleistungen Block */
.vs-addons{
  background:var(--vs-soft);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--vs-radius);
  padding:18px;
}
.vs-addons-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.vs-addons-cta{
  flex:0 0 240px;
  min-width:220px;
}

/* Lists in cards */
.vs-list{
  margin:0;
  padding-left:18px;
  line-height:1.65;
  color:var(--vs-muted);
}

/* Footer */
.vs-footer{
  border-top:1px solid var(--vs-border);
  background:#f5f6f7;
  padding:22px 0;
  color:var(--vs-muted);
  font-size:14px;
  line-height:1.6;
}
.vs-footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
}

/* Responsive */
@media (max-width:920px){
  .vs-hero h1{ font-size:32px; }
  .vs-hero-content{ padding:22px; }
  .vs-grid-2, .vs-grid-3{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .vs-topbar{ position:relative; }
  .vs-topbar-inner{ flex-direction:column; align-items:flex-start; }
  .vs-nav{ width:100%; }
  .vs-footer-grid{ grid-template-columns:1fr; }
}
.vs-hero{ position:relative; border-radius:var(--vs-radius); overflow:hidden; min-height:320px; }
.vs-hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
/* HERO: Lesbarkeit erhöhen */
.vs-hero-overlay{
  background:linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.35)) !important;
}

.vs-hero-content h1,
.vs-hero-content p,
.vs-hero-note{
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* Optional: kleine Textfläche hinter dem Text */
.vs-hero-content{
  background:rgba(0,0,0,.22);
  border-radius:16px;
}
/* 3D-Druck Bereich dezent */
.vs-addons{
  background:rgba(0,0,0,.02) !important;
  border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:none !important;
}

.vs-addons .vs-h2{
  font-size:20px !important;
  opacity:.85;
}

.vs-addons .vs-card{
  box-shadow:none !important;
  border:1px solid rgba(0,0,0,.08) !important;
}

.vs-addons .vs-btn{
  background:rgba(47,111,47,.12) !important;
  color:var(--vs-green) !important;
  border:1px solid rgba(47,111,47,.25) !important;
}

.vs-addons .vs-btn:hover{
  filter:none !important;
  background:rgba(47,111,47,.16) !important;
}
/* === Button Style für ALLE Buttons === */
.vs-btn,
.vs-btn-ghost,
.vs-cta{
  background: rgba(47,111,47,.12) !important;   /* hellgrün */
  color: #2f6f2f !important;                    /* grüner Text */
  border: 1px solid rgba(47,111,47,.30) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.08) !important; /* softer Schatten */
}

/* Hover (leicht stärker, aber nicht „knallig“) */
.vs-btn:hover,
.vs-btn-ghost:hover,
.vs-cta:hover{
  background: rgba(47,111,47,.16) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.10) !important;
  text-decoration: none !important;
}

/* Optional: Buttons gleich breit/zentriert wenn du "width:100%" im HTML setzt */
.vs-btn[style*="width:100%"],
.vs-cta[style*="width:100%"]{
  text-align:center !important;
}
/* ===== HERO: Text lesbarer + klarer abheben ===== */

/* Overlay stärker, damit Text nicht untergeht */
.vs-hero-overlay{
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.25) 100%
  ) !important;
}

/* Text: heller + Schatten für Kontrast */
.vs-hero-content h1{
  color:#fff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,.75) !important;
}

.vs-hero-content p{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.70) !important;
}

/* Standort-Zeile auch klarer */
.vs-hero-note{
  color: rgba(255,255,255,.95) !important;
  font-weight:800 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.75) !important;
}

/* Optional: dezente Glasfläche hinter dem Text (macht’s extrem gut lesbar) */
.vs-hero-content{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(2px);
}

/* ===== HERO Buttons kräftiger/sichtbarer ===== */
.vs-hero .vs-btn,
.vs-hero .vs-btn-ghost,
.vs-hero .vs-cta{
  background: rgba(47,111,47,.22) !important;     /* stärker als normale Buttons */
  border: 1px solid rgba(47,111,47,.55) !important;
  color: #eaffea !important;                      /* sehr heller Text */
  box-shadow: 0 10px 22px rgba(0,0,0,.35) !important;
  font-weight: 900 !important;
  padding: 13px 18px !important;
}

/* Hover: noch einen Tick mehr */
.vs-hero .vs-btn:hover,
.vs-hero .vs-btn-ghost:hover,
.vs-hero .vs-cta:hover{
  background: rgba(47,111,47,.30) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.40) !important;
  transform: translateY(-1px);
}
/* ===== 3D-Druck & Modellbau: dezenter / weniger wuchtig ===== */

/* Gesamter Block: heller, weniger Rahmen/Schatten, mehr Luft */
.vs-addons{
  background: rgba(0,0,0,.015) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  box-shadow: none !important;
  padding: 14px !important;
}

/* Überschrift kleiner und zurückhaltender */
.vs-addons .vs-h2{
  font-size: 18px !important;
  line-height: 1.25 !important;
  opacity: .85 !important;
  margin-bottom: 6px !important;
}

/* Text etwas kleiner */
.vs-addons .vs-p{
  font-size: 14px !important;
  color: rgba(17,24,39,.78) !important;
}

/* Boxen innen: flach, weniger „Card“-Look */
.vs-addons .vs-card{
  border-radius: 14px !important;
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  padding: 14px !important;
}

/* Listen weniger dominant */
.vs-addons .vs-list{
  color: rgba(17,24,39,.72) !important;
  font-size: 14px !important;
}

/* CTA rechts: weniger massiv */
.vs-addons-cta{
  opacity: .9;
}

/* Button im 3D-Bereich: kleiner & softer (nicht so „hauptsächlich“) */
.vs-addons .vs-btn{
  padding: 10px 14px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  background: rgba(47,111,47,.10) !important;
  border: 1px solid rgba(47,111,47,.25) !important;
  color: var(--vs-green) !important;
  font-weight: 800 !important;
}

/* Hover dezent */
.vs-addons .vs-btn:hover{
  background: rgba(47,111,47,.14) !important;
  transform: none !important;
}

/* Abstand zwischen Head und den 3 Boxen etwas kleiner */
.vs-addons .vs-mt-12{ margin-top: 10px !important; }

.vs-grid-3-main{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:920px){ .vs-grid-3-main{ grid-template-columns:1fr; } }

/* 3D-Kachel bewusst dezenter */
.vs-card-addon{
  background: rgba(0,0,0,.015);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: none;
}
.vs-card-addon .vs-btn{
  background: rgba(47,111,47,.10) !important;
  border: 1px solid rgba(47,111,47,.25) !important;
  color: var(--vs-green) !important;
  box-shadow:none !important;
  padding:10px 14px !important;
}
/* 3D-Kachel soll wie die anderen aussehen */
.vs-card-addon{
  background: var(--vs-white) !important;
  border: 1px solid var(--vs-border) !important;
  box-shadow: var(--vs-shadow) !important;
}
/* Buttons in den 3 Hauptkacheln: gleiche Breite */
.vs-grid-3-main .vs-btn{
  min-width: 170px !important;   /* Breite anpassen: 160–190 ist meist ideal */
  text-align: center !important;
  display: inline-block !important;
}

/* Optional: auf Handy volle Breite, damit es schöner wirkt */
@media (max-width:920px){
  .vs-grid-3-main .vs-btn{
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* 3 Hauptkacheln: gleiche Höhe + Button immer unten */
.vs-grid-3-main{
  align-items: stretch;
}

.vs-grid-3-main > .vs-card{
  display: flex !important;
  flex-direction: column !important;
}

/* Textbereich flexibel, Button-Bereich bleibt unten */
.vs-grid-3-main > .vs-card .vs-mt-12{
  margin-top: auto !important;
}

/* Buttons gleich breit & zentriert */
.vs-grid-3-main .vs-btn{
  min-width: 170px !important;
  text-align: center !important;
  display: inline-block !important;
}

/* Mobile: Buttons über volle Breite */
@media (max-width:920px){
  .vs-grid-3-main .vs-btn{
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* Maschinenpark dezenter */
.vs-machine-wrap{
  background: rgba(0,0,0,.012) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  border-radius: var(--vs-radius) !important;
  padding: 14px !important;
  box-shadow: none !important;
}

/* Maschinenpark-Kacheln: flacher */
.vs-machine-wrap .vs-card{
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,.07) !important;
}

/* Überschrift im Maschinenpark etwas weniger dominant */
.vs-machine-wrap .vs-h2{
  font-size: 20px !important;
  opacity: .88 !important;
}
/* Metalltechnik Hero: Bild sichtbar + Text sehr gut lesbar */
.vs-hero.vs-hero-metall{
  min-height: 260px !important;
}

.vs-hero.vs-hero-metall .vs-hero-img{
  object-fit: cover;
  object-position: center;
  filter: saturate(1.1) contrast(1.05);
}

/* Overlay so, dass Text klar lesbar bleibt */
.vs-hero.vs-hero-metall .vs-hero-overlay{
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.86) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.18) 100%
  ) !important;
}

/* leichte Textbox für maximale Lesbarkeit */
.vs-hero.vs-hero-metall .vs-hero-content{
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
}

.vs-hero.vs-hero-metall h1,
.vs-hero.vs-hero-metall p{
  text-shadow: 0 3px 14px rgba(0,0,0,.75) !important;
}
/* Metalltechnik Hero + Badge */
.vs-hero.vs-hero-metall{ min-height:280px !important; }

/* Badge oben rechts */
.vs-hero-badge{
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  gap:10px;
}

.vs-hero-badge img{
  height:42px;
  width:auto;
  display:block;
}

/* Overlay für gute Lesbarkeit */
.vs-hero.vs-hero-metall .vs-hero-overlay{
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.22) 100%
  ) !important;
}

/* Textfläche für maximale Lesbarkeit */
.vs-hero.vs-hero-metall .vs-hero-content{
  background: rgba(0,0,0,.26) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
}

.vs-hero.vs-hero-metall h1,
.vs-hero.vs-hero-metall p{
  text-shadow: 0 3px 14px rgba(0,0,0,.75) !important;
}

/* Mobile: Badge kleiner */
@media (max-width:920px){
  .vs-hero-badge{ top:10px; right:10px; padding:8px 10px; }
  .vs-hero-badge img{ height:34px; }
}
/* Metall & KFZ Hero exakt gleich hoch */
.vs-hero.vs-hero-metall,
.vs-hero.vs-hero-kfz{
  min-height: 280px !important; /* wenn Metall anders ist: hier denselben Wert eintragen */
}

/* Optional: wenn auf Handy etwas kleiner sein soll */
@media (max-width:920px){
  .vs-hero.vs-hero-metall,
  .vs-hero.vs-hero-kfz{
    min-height: 240px !important;
  }
}
/* Metall, KFZ, 3D Hero: gleiche Höhe */
.vs-hero.vs-hero-metall,
.vs-hero.vs-hero-kfz,
.vs-hero.vs-hero-3d{
  min-height: 280px !important;
}

@media (max-width:920px){
  .vs-hero.vs-hero-metall,
  .vs-hero.vs-hero-kfz,
  .vs-hero.vs-hero-3d{
    min-height: 240px !important;
  }
}

/* 3D Hero Overlay wie bei den anderen */
.vs-hero.vs-hero-3d .vs-hero-overlay{
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.22) 100%
  ) !important;
}

.vs-hero.vs-hero-3d .vs-hero-content{
  background: rgba(0,0,0,.26) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
}

.vs-hero.vs-hero-3d h1,
.vs-hero.vs-hero-3d p{
  text-shadow: 0 3px 14px rgba(0,0,0,.75) !important;
}
/* =========================
   Mobile Optimierung (Jimdo)
   ========================= */

/* 1) Header/Topbar: sauber stapeln */
@media (max-width:900px){
  .vs-topbar{ position:relative !important; }
  .vs-topbar-inner{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
    padding:12px 0 !important;
  }

  .vs-logo img{ height:40px !important; }

  /* Navigation: auf Zeilen umbrechen, größere Klickflächen */
  .vs-nav{
    width:100% !important;
    gap:6px !important;
  }
  .vs-nav a{
    padding:10px 12px !important;
  }

  /* CTA im Header: volle Breite */
  .vs-cta{
    width:100% !important;
    text-align:center !important;
  }
}

/* 2) Wrapper-Padding etwas größer (damit nichts am Rand klebt) */
@media (max-width:600px){
  .vs-wrap{ padding:0 14px !important; }
}

/* 3) Hero: Höhe + Textfläche + Badge mobile-tauglich */
@media (max-width:920px){
  .vs-hero{ min-height:240px !important; }

  .vs-hero-content{
    padding:18px !important;
    max-width:100% !important;
  }

  .vs-hero h1{ font-size:28px !important; }
  .vs-hero p{ font-size:14px !important; }

  .vs-hero-badge{
    top:10px !important;
    right:10px !important;
    padding:8px 10px !important;
    border-radius:12px !important;
  }
  .vs-hero-badge img{ height:30px !important; }
}

/* 4) Grids: 3 Spalten -> 1 Spalte */
@media (max-width:920px){
  .vs-grid-2,
  .vs-grid-3,
  .vs-grid-3-main,
  .vs-machine-grid{
    grid-template-columns:1fr !important;
  }
}

/* 5) Karten: etwas weniger Padding auf Mobile */
@media (max-width:600px){
  .vs-card{ padding:14px !important; }
  .vs-card-soft{ padding:14px !important; }
}

/* 6) Buttons: immer gut klickbar und nicht zu klein */
@media (max-width:600px){
  .vs-btn, .vs-cta, .vs-btn-ghost{
    width:100% !important;
    text-align:center !important;
    padding:13px 16px !important;
  }
}

/* 7) Kontaktblock (2 Kontakte + Button): untereinander, Button nicht rechts ausgerichtet */
@media (max-width:920px){
  /* Grid in deinem Metall-Kontaktblock */
  section .vs-card div[style*="grid-template-columns:repeat(2"]{
    grid-template-columns:1fr !important;
  }

  /* rechte Button-Spalte im Kontaktblock */
  section .vs-card div[style*="min-width:240px"]{
    width:100% !important;
  }
  section .vs-card div[style*="text-align:right"]{
    text-align:left !important;
  }
}
/* 3D-Hero: Text soll nicht unter den Badge laufen */
.vs-hero.vs-hero-3d .vs-hero-content{
  padding-right: 140px !important; /* reserviert Platz für den Badge */
}

/* Mobile: Badge kleiner + Text noch kompakter */
@media (max-width:920px){
  .vs-hero.vs-hero-3d .vs-hero-content{
    padding-right: 110px !important;
  }

  .vs-hero.vs-hero-3d .vs-hero-badge{
    padding: 7px 9px !important;
  }
  .vs-hero.vs-hero-3d .vs-hero-badge img{
    height: 26px !important;
  }
}

/* Sehr schmal (z.B. iPhone SE): Badge nach unten rechts schieben */
@media (max-width:420px){
  .vs-hero.vs-hero-3d .vs-hero-badge{
    top: auto !important;
    bottom: 10px !important;
    right: 10px !important;
  }
  .vs-hero.vs-hero-3d .vs-hero-content{
    padding-right: 18px !important; /* Badge ist unten, Text braucht keinen Platz rechts */
  }
}
/* Header Navigation Buttons (dezenter als CTA) */
.vs-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.vs-navbtn{
  display:inline-block;
  padding:10px 14px;
  border-radius:14px;
  background: rgba(47,111,47,.10);
  border: 1px solid rgba(47,111,47,.22);
  color: var(--vs-green) !important;
  font-weight:800;
  text-decoration:none !important;
  box-shadow:none;
}

.vs-navbtn:hover{
  background: rgba(47,111,47,.16);
  border-color: rgba(47,111,47,.28);
}

/* Damit der rechte "Anfrage senden" Button dominant bleibt */
.vs-cta{
  background: rgba(47,111,47,.18) !important;
  border: 1px solid rgba(47,111,47,.30) !important;
  color: var(--vs-green) !important;
}

/* Mobile: Nav Buttons in 2 Spalten */
@media (max-width:900px){
  .vs-nav{ width:100%; }
  .vs-navbtn{
    flex:1 1 calc(50% - 10px);
    text-align:center;
  }
}
/* Jimdo Pflicht-Navigation: NUR live verstecken, im Creator sichtbar lassen */
.vs-jimdo-nav{
  position:static;
  width:auto;
  height:auto;
  overflow:visible;
}

/* Live-Seite: Jimdo Nav verstecken */
body:not(.cms-edit) .vs-jimdo-nav{
  position:absolute !important;
  left:-99999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

}

/* Unsere Button-Navigation */
.vs-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.vs-navbtn{
  display:inline-block;
  padding:10px 14px;
  border-radius:14px;
  background: rgba(47,111,47,.10);
  border: 1px solid rgba(47,111,47,.22);
  color: var(--vs-green) !important;
  font-weight:800;
  text-decoration:none !important;
}

.vs-navbtn:hover{
  background: rgba(47,111,47,.16);
  border-color: rgba(47,111,47,.28);
}

/* Mobile: Buttons in 2 Spalten */
@media (max-width:900px){
  .vs-nav{ width:100%; }
  .vs-navbtn{
    flex:1 1 calc(50% - 10px);
    text-align:center;
  }
}
/* Header-Buttons kleiner / dezenter */
.vs-navbtn{
  padding: 7px 10px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: rgba(47,111,47,.08) !important;
  border: 1px solid rgba(47,111,47,.18) !important;
}

/* etwas weniger Abstand zwischen den Buttons */
.vs-nav{
  gap: 8px !important;
}
.vs-hero.vs-hero-about .vs-hero-overlay{
  background: linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,.18)) !important;
}