/* Kartenbilder sauber einpassen & alles zentrieren */
/* Card: Klickbare Box für jedes Modell */
.link-block-10 {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;

  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
  padding: 12px;

  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.link-block-10:hover {
  transform: translateY(-3px);
}

/* Bild-Container */
.image-10 {
  display: block;
  margin: 0 auto;
  width: 100%;          /* füllt den Container */
  max-width: 180px;     /* maximale Breite */
  height: auto;         /* überschreibt height-Attribut */
  object-fit: contain;  /* Bild nicht verzerren */
  background: #f9fafb;
  border-radius: 12px;
  aspect-ratio: 1 / 1.05;
}

/* Modell-Name unter dem Bild */
.heading-9 {
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

/* =============================
   Grid Layout für Modelle
   ============================= */

.section-8 .w-dyn-items {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
  gap: 18px;
}
@media (max-width: 991px) {
  .section-8 .w-dyn-items {
    grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  .section-8 .w-dyn-items {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }
}

/* =============================
   Reihentitel (z. B. iPhone-Reihen)
   ============================= */

/* Standard-Styling */
.brand-row-title {
  margin: 28px 0 10px;
  font-size: 26px;
}

/* Für Apple: Titel robust ausblenden */
[data-brand="apple" i] .brand-row-title,
[data-brand="apple" i] .series-title,
body[data-brand="apple" i] .brand-row-title,
body[data-brand="apple" i] .series-title {
  display: none !important;
}

html, body { 
  width: 100%;
  max-width: 100%;
  overflow-x: clip;   /* moderner als hidden, verhindert auch Paint-Leaks */
}

/* Falls in webflow.css/Projekt-CSS irgendwo 100vw steht: neutralisieren */
.waves-section-hero-6,
.waves-gradient-hero-6 {
  max-width: 100% !important;
  width: 100% !important;   /* statt 100vw */
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto;
  overflow: clip;           /* Sicherheit */
}

/* Bilder/Medien nie überlaufen lassen */
img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

.w-nav-overlay {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  overflow-x: clip;
}


/* --- Mega Menu --- */
.nav-item.has-mega { position: relative; }
.nav-link.mega-toggle {
  background: transparent; border: 0; cursor: pointer;
  font: inherit; color: #111; display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-radius: 8px;
}
.nav-link.mega-toggle:focus { outline: 2px solid #0ea5e9; outline-offset: 2px; }

.mega {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 100%; margin-top: 14px;
  width: min(1200px, 96vw);
  background: #fff; border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(2,6,23,.18);
  padding: 18px 20px 20px; display: none; z-index: 9999;
}
.mega.show { display: block; }

.mega-head {
  display:flex; align-items:center; justify-content:space-between;
  padding: 4px 2px 12px; border-bottom: 1px solid rgba(0,0,0,.06);
}
.mega-all { color:#0ea5e9; font-weight:600; text-decoration:none; }
.mega-all:hover { text-decoration:underline; }

.mega-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px;
  padding-top: 14px;
}
.mega-col { min-width: 160px; }
.mega-title {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color:#111; margin: 6px 0 10px; font-weight: 800;
  border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 6px;
}
.mega-list { list-style: none; padding:0; margin:0; }
.mega-list li { margin: 8px 0; }
.mega-list a {
  display:flex; align-items:center; gap:8px;
  color:#111; text-decoration:none; padding: 6px 2px; border-radius:8px;
}
.mega-list a::before { content: "›"; opacity:.5; }
.mega-list a:hover { background:#f7fbff; color:#0ea5e9; }

/* Mega-Liste: „Mehr anzeigen“-Link */
.mega-more{
  display:inline-block;
  margin-top:8px;
  font-weight:600;
  color:#0ea5e9;
  text-decoration:none;
}
.mega-more:hover{ text-decoration:underline; }

/* Sicherheit: nichts abschneiden */
.w-nav-menu{ overflow:visible; }


.w-nav-menu{ overflow:visible; } /* damit Mega nicht abgeschnitten wird */
.mega-more{ display:inline-block; margin-top:8px; font-weight:600; color:#0ea5e9; text-decoration:none; }
.mega-more:hover{ text-decoration:underline; }

/* in deine CSS */
.price-card__row > div:first-child {
  text-transform: capitalize;
}


/* Responsive */
@media (max-width: 991px){
  .mega { width: 96vw; }
  .mega-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px){
  .mega {
    position: fixed; left: 50%; top: 64px; transform: translateX(-50%);
    height: calc(100vh - 80px); overflow: auto; width: 96vw;
  }
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   Layout-Scale & ruhigere Schatten
   ========================================= */
:root{
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: clamp(72px, 8vw, 120px);

  --elev: 0 8px 24px rgba(2,6,23,.08);
  --elev-hover: 0 14px 40px rgba(2,6,23,.16);
}

/* =========================================
   1) Mehr Abstand zwischen Sektionen
   ========================================= */
section { padding-block: var(--space-3xl); }
section + section { margin-top: var(--space-2xl); }

/* Hero: unten gleichmäßiger Abschluss, oben responsiv groß bleiben */
.waves-section-hero-6{
  padding-top: clamp(180px, 22vw, 320px) !important;
  padding-bottom: var(--space-3xl) !important;
}

/* Marken-Block & Kontakt */
#marken{ padding-block: var(--space-3xl); }
.kontakt{ padding-block: var(--space-3xl) !important; }

/* Footer etwas “atmen” lassen */
.waves-footer-1,
.footer-dark,
.footer-dark-2{
  padding-top: var(--space-3xl) !important;
  padding-bottom: var(--space-2xl) !important;
}

/* Mobile etwas kompakter */
@media (max-width: 767px){
  section{ padding-block: var(--space-2xl); }
  section + section{ margin-top: var(--space-xl); }
}

/* =========================================
   2) Größere Gaps in Karten-/Modell-Grids
   (Webflow legt oft 16px fest → wir heben auf 24px an)
   ========================================= */
[class^="collection-list"],
.collection-list,
.collection-list-2,
.collection-list-3,
.collection-list-4,
.collection-list-5,
.collection-list-6,
.collection-list-7,
.collection-list-8,
.collection-list-9,
.collection-list-10,
.collection-list-11,
.collection-list-12,
.collection-list-13,
.collection-list-14,
.collection-list-15,
.collection-list-16,
.collection-list-17{
  gap: 24px !important;
  grid-column-gap: 24px !important;
  grid-row-gap: 24px !important;
  padding-top: 0 !important;
}

/* Auch im Marken-Grid etwas mehr Platz */
#marken .brand-grid{ gap: 24px; }

/* =========================================
   3) Ruhigere Card-Schatten + Hover
   ========================================= */
[class^="collection-item"],
.collection-item,
.collection-item-2,
.collection-item-3,
.collection-item-4,
.collection-item-5,
.collection-item-6,
.collection-item-7,
.collection-item-8,
.collection-item-9,
.collection-item-10,
.collection-item-11,
.collection-item-12,
.collection-item-13,
.collection-item-14,
.collection-item-15,
.collection-item-16,
.collection-item-17{
  box-shadow: var(--elev) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
[class^="collection-item"]:hover,
.collection-item:hover,
.collection-item-2:hover,
.collection-item-3:hover,
.collection-item-4:hover,
.collection-item-5:hover,
.collection-item-6:hover,
.collection-item-7:hover,
.collection-item-8:hover,
.collection-item-9:hover,
.collection-item-10:hover,
.collection-item-11:hover,
.collection-item-12:hover,
.collection-item-13:hover,
.collection-item-14:hover,
.collection-item-15:hover,
.collection-item-16:hover,
.collection-item-17:hover{
  transform: translateY(-2px);
  box-shadow: var(--elev-hover) !important;
}

/* =========================================
   4) Überschriften haben unten konstant Luft
   ========================================= */
h1, h2, h3, h4{
  margin: 0 0 var(--space-l);
}

/* kein zusätzliches Top-Padding für die allererste Section (Hero) */
body > section:first-of-type{
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* falls du lieber hart auf der Startseite zielst (hat die Klasse .section-11): */
.section-11{ padding-top: 0 !important; }

/* optional defensiv – falls irgendein Margin auf dem Hero-Wrapper selbst landet */
.section-11 > .waves-section-hero-6{ margin-top: 0 !important; }

/* Sticky Navbar (läuft beim Scrollen mit) */
.waves-navbar-1.w-nav{
  position: sticky;      /* klebt, sobald sie den Viewport-Rand berührt */
  top: 0;
  z-index: 2000 !important;  /* über Hero / Menüs legen */
  background: rgba(255,255,255,.96); /* fester, leicht transparenter Hintergrund */
  backdrop-filter: saturate(180%) blur(8px); /* Soft-Glass-Effekt (optional) */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}

/* Vorteile-Section */
.benefits{
  padding-block: clamp(48px, 8vw, 96px);
  background:
    radial-gradient(60% 120% at 100% 0, rgba(14,165,233,.08), transparent 60%),
    radial-gradient(50% 80% at 0 100%, rgba(99,102,241,.06), transparent 60%),
    #fff;
}

.benefits__container{ max-width: 1100px; margin: 0 auto; }

.benefits__eyebrow{
  display: inline-block;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef6ff;
  color: #0ea5e9;
  margin: 0 0 10px;
}

.benefits__title{
  margin: 0 0 28px;
  line-height: 1.2;
}

.benefits__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 991px){
  .benefits__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 639px){
  .benefits__grid{ grid-template-columns: 1fr; }
}

.benefits__card{
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "icon text";
  column-gap: 14px;
  row-gap: 6px;
}

.benefits__icon{
  grid-area: icon;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #0ea5e9;                 /* Icon-Farbe */
  background: rgba(14,165,233,.12); /* Icon-Hintergrund */
}

.benefits__card-title{
  grid-area: title;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.benefits__text{
  grid-area: text;
  margin: 0;
  color: #475569;
  font-size: .98rem;
}

/* Einheitliche Seitenränder (links/rechts) für alle Hauptblöcke */
:root{
  --page-max: 1100px;                           /* gemeinsame max. Inhaltsbreite */
  --page-gutter: clamp(20px, 5vw, 48px);        /* gemeinsamer Innenabstand L/R */
}

/* Services-Section (dein .leistungen-section in section-2) */
.leistungen-section{
  max-width: var(--page-max) !important;
  margin-inline: auto !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

/* Benefits-Section (w-container + eigener Container) */
.benefits__container{
  max-width: var(--page-max) !important;
  margin-inline: auto !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

/* Marken-Block: Überschrift und Grid bekommen denselben Rand */
#marken .div-block-21{
  max-width: var(--page-max) !important;
  margin-inline: auto !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}
#marken .wd-brands{
  max-width: var(--page-max) !important;
  margin-inline: auto !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

/* Kontakt-Block (gleiche Ränder für das linke/rechte Spalten-Container) */
.kontakt .w-layout-blockcontainer.container-3{
  max-width: var(--page-max) !important;
  margin-inline: auto !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

/* Footer-Oberteil angleichen */
.waves---main-container-2{
  max-width: var(--page-max) !important;
  margin-inline: auto !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

/* Hero: Items unten, horizontal mittig */
.section-11 .waves-section-hero-6{
  display: flex;
  align-items: flex-end !important;   /* unten */
  justify-content: center !important; /* mittig */
  position: relative;                 /* für den Gradient */
}

/* Wave-Gradient auf max. Viewport-Höhe begrenzen */
.section-11 .waves-gradient-hero-6{
  max-height: 100svh;                 /* moderne Viewport-Einheit */
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.section-11 .waves-title-wrap-hero-5{
  display: flex;
  align-items: center;
}

.section-11 .waves---limit-480{
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

@supports not (height: 100svh){
  .section-11 .waves-gradient-hero-6{ max-height: 100vh; }
}

:root{
  --page-max: 1440px;
  --page-gutter: clamp(20px, 5vw, 48px);

  /* Nav-Variante: gleiche Breite wie Content */
  --nav-max: var(--page-max);
  /* → für Full-Bleed-Nav einfach so setzen:
     --nav-max: none; */
}

/* Navbar-Inhalt ausrichten */
.waves-navbar-1 .waves---nav-container{
  max-width: 1440px;
  padding-inline: var(--page-gutter) !important;
  box-sizing: border-box;
}

/* (nice-to-have) dezente Linie unter klebender Nav */
.waves-navbar-1.w-nav{
  border-bottom: 1px solid rgba(2,6,23,.06);
}

/* ===== Service-Section: Mobile-Layout (≤ 767px) ===== */
@media (max-width: 767px){
  /* Grid: 1 Spalte, kleinere Abstände */
  .section-2 .leistungen-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Card kompakt: Icon links, Text rechts */
  .section-2 .leistung-card{
    display: flex;
    flex-direction: row !important;   /* ← Icon links, Text rechts */
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: 96px;                 /* gute Tap-Höhe */
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
    text-align: left;
  }

  /* Icon kleiner */
  .section-2 .leistung-card img{
    width: 100px;
    height: 84px;
    flex-shrink: 0;
  }

  /* Textblock linksbündig + enger gesetzt */
  .section-2 .lc-text{
    text-align: left !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .section-2 .lc-text h3{
    font-size: 0.98rem;
    line-height: 1.2;
    margin: 0;
  }
  .section-2 .lc-text p{
    font-size: 0.90rem;
    line-height: 1.35;
    color: #4b5563;
    margin: 0;
  }

  /* Section-Ränder etwas enger, damit es nicht gequetscht wirkt */
  .section-2 .leistungen-section{
    padding: 20px 16px;
  }
}

/* Services – Mobile: Gap weg + Hover aus */
@media (max-width: 767px){
  .section-2 .leistung-card{
    gap: 0 !important;                 /* Abstand zwischen Icon & Text: 0 */
  }
  .section-2 .leistung-card img{
    margin-right: 0 !important;        /* sicherheitshalber */
  }
  .section-2 .lc-text{
    margin-left: 0 !important;         /* sicherheitshalber */
  }

  /* Hover neutralisieren (kein Hopser/keine stärkere Schatten) */
  .section-2 .leistung-card:hover{
    transform: none !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.06) !important;
    background: #fff !important;
  }
}

/* ===== Marken-Grid: nie Karten ausblenden (überschreibt inline Regeln) ===== */
#marken .brand-grid > *{
  display: block !important; /* hebt :nth-child(...){display:none} auf */
}

/* ===== Marken-Grid – Spaltenanzahl sauber setzen ===== */
#marken .brand-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

@media (max-width: 991px){
  #marken .brand-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px){
  #marken .brand-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===== Karten auf Mobile etwas kompakter ===== */
#marken .brand-card{
  padding: 18px !important;
  min-height: 140px !important;
  box-shadow: 0 8px 24px rgba(2,6,23,.08) !important;
}

@media (max-width: 767px){
  #marken .brand-card{
    padding: 14px !important;
    min-height: 128px !important;
  }
}

/* Marken-Cards: Icon oben, Name unten, beides mittig */
#marken .brand-card{
  display: flex !important;
  flex-direction: column !important;   /* übereinander statt nebeneinander */
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  gap: 10px;                            /* Abstand zwischen Icon und Name */
}

#marken .brand-logo{
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 6px;
}

#marken .brand-name{
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

/* Mega-Menü: auf Mobile per Tap ein-/ausklappbar */
@media (max-width: 991px){
  .w-nav-menu .has-mega{ position: relative; }

  /* Standard: zu */
  .w-nav-menu .mega{
    display: none;
    position: static;                  /* im Flow unter dem Button */
    background: #fff;
    border: 1px solid rgba(2,6,23,.08);
    border-radius: 12px;
    margin-top: 8px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(2,6,23,.08);
  }

  /* offen, wenn .open an der Elternli */
  .w-nav-menu .has-mega.open .mega{ display: block; }

  /* Mobile: 1-Spalten-Layout im Mega */
  .w-nav-menu .mega-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ===== Mobile-Nav Fixes (≤ 991px) ===== */
@media (max-width: 991px){
  /* Alle Menüeinträge mittig ausrichten */
  .w-nav-menu .w-nav-link{ 
    text-align: center; 
    width: 100%;
    display: block;
  }

  /* "Reparatur" wie ein normaler Menüpunkt stylen & zentrieren */
  .w-nav-menu .mega-toggle{
    all: unset;                 /* nimmt Button-Defaults raus */
    display: block;
    width: 100%;
    text-align: center;
    cursor: pointer;
    padding: 12px 0;
    line-height: 1.2;
  }
  .w-nav-menu .mega-toggle .chev{ margin-left: .25rem; }

  /* Mega-Container im Flow, volle Breite, nicht off-screen */
  .w-nav-menu .mega{
    position: static !important;   /* statt absolute/fixed */
    width: 100% !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    margin: 8px 0 12px;
    display: none;                 /* Standard: zu */
    background: #fff;
    border: 1px solid rgba(2,6,23,.08);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(2,6,23,.08);
    max-height: 60vh;              /* bleibt im Viewport */
    overflow: auto;                 /* scrollbar falls lang */
  }
  .w-nav-menu .has-mega.open .mega{ display: block; }

  /* Innenränder & 1-Spalten-Layout im Mega */
  .w-nav-menu .mega-inner{ padding: 12px; box-sizing: border-box; }
  .w-nav-menu .mega-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* kleine optische Korrektur */
  .w-nav-menu .mega-more{ display: inline-block; margin-top: 6px; }
}

/* === HERO v2 ============================================================= */
.hero-v2{
  position: relative;
  overflow: clip;
  background: radial-gradient(120% 120% at 85% 10%, rgba(14,165,233,.14), transparent 60%),
              radial-gradient(90% 90% at 0% 100%, rgba(99,102,241,.10), transparent 60%),
              #0b1220;
  color: #fff;
  padding: clamp(64px, 10vw, 120px) 0 clamp(36px, 6vw, 64px);
}

/* sanfter Foto/Noise-Layer (optional Bild austauschen) */
.hero-v2__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,18,32,.65) 0%, rgba(11,18,32,.1) 50%, rgba(11,18,32,.65) 100%),
    url('../images/hero-image-main.webp') center/cover no-repeat;
  filter: saturate(1.1) contrast(1.02);
  opacity: .35;
  pointer-events:none;
}

.hero-v2__inner{
  position: relative; z-index: 1;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.hero-v2__eyebrow{
  display:inline-block; margin:0 0 10px;
  padding:6px 10px; border-radius:999px;
  font: 700 .8rem/1 var(--font, 'Open Sans', system-ui);
  letter-spacing:.06em; text-transform:uppercase;
  background: rgba(255,255,255,.08);
  color:#9bd2ff;
}

.hero-v2__title{
  margin: 0 0 8px;
  font: 800 clamp(32px, 5vw, 56px)/1.04 'Open Sans', system-ui;
  letter-spacing: -.02em;
}

.hero-v2__sub{
  color: #dbeafe;
  max-width: 54ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  margin: 0 0 18px;
}

.hero-v2__cta{
  display:flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 14px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: 48px; padding: 0 20px; border-radius: 10px;
  font: 700 16px/1 'Open Sans', system-ui; text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.btn--primary{
  background:#0ea5e9; color:#001018; box-shadow: 0 8px 24px rgba(14,165,233,.33);
}
.btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 36px rgba(14,165,233,.38); }
.btn--ghost{
  color:#dbeafe; outline: 1px solid rgba(219,234,254,.4);
  background: transparent;
}
.btn--ghost:hover{ background: rgba(219,234,254,.08); color:#fff; }

.hero-v2__badges{
  list-style:none; padding:0; margin: 12px 0 0;
  display:flex; gap: 12px; flex-wrap: wrap; color:#c7d2fe;
}
.hero-v2__badges li{
  border:1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: 6px 10px; font-weight: 600; font-size: 13px; backdrop-filter: blur(4px);
}

.hero-v2__trust{
  margin-top: 14px; display:flex; align-items:center; gap:10px;
  color:#9fb6ff; font-weight:600; font-size: 14px;
}
.hero-v2__trust .sep{ opacity:.5; }
.hero-v2__trust img{ width:18px; height:18px; filter: drop-shadow(0 0 3px rgba(255,255,255,.25)); }

/* Visual (rechts) */
.hero-v2__visual{
  position: relative; min-height: 280px;
}
.hero-v2__device{
  width: min(520px, 44vw); max-width: 100%;
  transform: rotate(-8deg) translateY(6px);
  transform-origin: 60% 60%;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.45));
}
.hero-v2__glow{
  position:absolute; inset:auto 0 0 0; height: 180px;
  background: radial-gradient(60% 120% at 50% 0, rgba(99,102,241,.45), rgba(14,165,233,.25) 40%, transparent 70%);
  filter: blur(22px); opacity:.7; pointer-events:none;
}

/* Sticky mini bar (nur auf Mobile sichtbar) */
.hero-v2__sticky{
  position: sticky; bottom: 14px; z-index: 2; margin-top: 12px;
  display:none; gap: 8px; justify-content:center;
}
@media (max-width: 767px){
  .hero-v2__inner{ grid-template-columns: 1fr; text-align: left; }
  .hero-v2__visual{ order: -1; min-height: 0; display:flex; justify-content:center; }
  .hero-v2__device{ width: min(380px, 80vw); transform: rotate(-6deg); }
  .hero-v2__sticky{ display:flex; }
}

/* sanfte „atmen“-Animation */
@keyframes floaty {
  0%, 100% { transform: rotate(-8deg) translateY(6px); }
  50%      { transform: rotate(-8deg) translateY(0px); }
}
.hero-v2__device.is-anim{ animation: floaty 5.5s ease-in-out infinite; }

/* --- HERO v2 Fixes ----------------------------------------------------- */

/* 1) Hintergrundlevel: etwas dunkler & ruhiger, damit Copy mehr knallt */
.hero-v2{
  background:
    radial-gradient(140% 120% at 85% 10%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(90% 90% at 0% 100%, rgba(99,102,241,.08), transparent 60%),
    #0b1220;
}
.hero-v2__bg{
  opacity:.24;                 /* vorher .35 */
  filter: saturate(1.05) contrast(1.02) brightness(.98);
}
.hero-v2::after{               /* leichte Vignette */
  content:""; position:absolute; inset:0;
  background: radial-gradient(80% 70% at 60% 40%, transparent 60%, rgba(0,0,0,.35));
  pointer-events:none;
}

/* 2) Grid sauber zentrieren + Spaltenbreiten begrenzen */
.hero-v2__inner{
  max-width: 1200px;
  grid-template-columns: minmax(0, 560px) minmax(0, 520px);
  align-items: center;
}

/* 3) Typo/Spacing feinjustieren */
.hero-v2__title{ letter-spacing:-.06em; line-height:1.06; }
.hero-v2__sub{ max-width: 48ch; margin-bottom: 20px; }
.hero-v2__cta{ gap: 14px; margin-bottom: 16px; }

/* 4) Badges kompakter in „Chips“-Optik */
.hero-v2__badges{ gap: 10px; }
.hero-v2__badges li{
  padding: 6px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

/* 5) Trust-Bar besser lesbar */
.hero-v2__trust{
  gap: 12px;
  padding: 6px 10px;
  background: rgba(6,12,24,.35);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  width: max-content;
}

/* 6) Visual rechts sicher sichtbar + etwas größer */
.hero-v2__visual{ min-height: 320px; display:flex; align-items:center; justify-content:center; }
.hero-v2__device{
  width: min(540px, 46vw);
  transform: rotate(-8deg) translateY(4px);
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.45));
}
@media (min-width: 1200px){
  .hero-v2__device{ width: 560px; }
}

/* 7) Mobile: Copy zuerst, Visual kleiner, Buttons sticky */
@media (max-width: 767px){
  .hero-v2{ padding-top: 68px; }
  .hero-v2__visual{ order:-1; }
  .hero-v2__device{ width: min(360px, 78vw); transform: rotate(-6deg); }
}

/* 8) Falls dein globaler .w-container zu viel Innenabstand hat, hier etwas straffer */
.section-11 .w-container{ padding-left: 20px; padding-right: 20px; }

.hero-v2__inner--center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width: 760px;
  margin: 0 auto;
}
.hero-v2__inner--center .hero-v2__cta{
  justify-content:center;
}

/* Hero: immer volle Höhe, aber nie größer als 650px */
.hero-v2 {
  height: clamp(500px, 100vh, 650px);
  display: flex;
  align-items: center;
}

/* Höhe: volle Bildschirmhöhe, aber gedeckelt */
.hero-v2 { height: clamp(520px, 100vh, 650px); }

/* Titel ohne <br> schön umbrechen */
.hero-v2__title { text-wrap: balance; }

/* Subtext im Hero mittig ausrichten */
.hero-v2__sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Zentrierte Breite angenehm schmal halten */
.hero-v2__inner--center { max-width: 820px; }

/* Mobile Optimierung für Hero */
@media (max-width: 767px) {
  .hero-v2__title {
    font-size: 1.8rem;   /* kleiner als Desktop */
    line-height: 1.25;   /* lockerer */
    margin-bottom: 12px;
  }

  .hero-v2__sub {
    font-size: 0.95rem;  /* kleinerer Subtext */
    line-height: 1.4;
    margin-bottom: 20px; /* mehr Luft unterhalb */
  }

  .hero-v2__eyebrow {
    font-size: 0.75rem;
    margin-bottom: 10px;
  }

  .hero-v2__cta {
    flex-direction: column; /* Buttons untereinander */
    gap: 10px;
  }

  .hero-v2__cta .btn {
    width: 100%; /* volle Breite */
    max-width: 280px;
    margin: 0 auto; /* mittig */
  }
}


/* Nur den Textteil in den Cards angleichen */
.section-2 .lc-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* alles links bündig */
  justify-content: flex-start;
  gap: 6px;                  /* Abstand zwischen Titel & Text */
  height: 100%;              /* füllt den Card-Bereich */
  text-align: left;
}

.section-2 .lc-text h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0;
}

.section-2 .lc-text p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: #4b5563;
}

.leistung-card{
  gap: 0px !important;
}