/* ============================================================
   von Caprivi — Custom CSS (Konsolidiert, v2)
   Ersetzt das bisherige Quick CSS KOMPLETT.

   Was ist neu in v2:
   • Burgundy-Variablen synchronisiert mit Theme-Optionen (#5A1620)
   • Hero-, Mission-, Split-, Talk-, Foot-CTA-Klassen hinzu (Schritt 3)
   • Eyebrow mit Bar-Element
   • Lede + Headline-Skalierung
   • Contact-Rows (dt/dd)
   • Locations-Cards
   • Checkliste mit Mini-Bar
   • vc-btn als Avia-unabhängige Button-Klasse (für Text-Blöcke)

   Deploy:
   1. Komplett kopieren
   2. Enfold → Allgemeines Styling → Quick CSS → alten Inhalt ersetzen
   3. Speichern → Hard-Reload (Cmd/Strg + Shift + R) → WP-Rocket-Cache leeren
   ============================================================ */


/* ─── 1. VARIABLEN ────────────────────────────────────────── */
:root {
  --vc-red:         #5A1620;
  --vc-red-hover:   #4A0F1A;
  --vc-red-deep:    #3F0E15;
  --vc-paper:       #FCF8EE;
  --vc-cream:       #EEE5D4;
  --vc-cream-soft:  #F2EBDC;
  --vc-on-red:      #F7EDD8;
  --vc-on-red-mute: #C9A89A;
  --vc-ink:         #1F1A14;
  --vc-ink-soft:    #4A4035;
  --vc-ink-mute:    #7A6F60;
  --vc-rule:        rgba(31,26,20,0.12);
  --vc-rule-on-red: rgba(242,230,207,0.18);
}


/* ─── 2. GLOBALE TYPO ─────────────────────────────────────── */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body, p { letter-spacing: 0.01em; }
h1, h2, h3, h4, h5, h6 { line-height: 1.18; text-wrap: balance; letter-spacing: -0.005em; }
p { text-wrap: pretty; }
b, strong { color: var(--vc-ink) !important; }

#top h1 { font-size: clamp(36px, 3.8vw, 54px) !important; font-weight: 400 !important; line-height: 1.12 !important; letter-spacing: -0.01em !important; }
#top h2 { font-size: clamp(28px, 2.6vw, 40px) !important; font-weight: 400 !important; line-height: 1.12 !important; letter-spacing: -0.01em !important; }
#top h3 { font-size: clamp(18px, 1.4vw, 22px) !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; }

#top .av-special-heading-tag {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif !important;
  font-weight: 400 !important;
}

.no-hyphen { hyphens: none !important; }


/* ─── 3. EYEBROW ──────────────────────────────────────────── */
/* Klein-Caps-Label über Headings. Avia: Special-Heading mit Klasse "vc-eyebrow"
   ODER Text-Block mit folgender HTML-Struktur:
   <div class="vc-eyebrow"><span class="vc-eyebrow__bar"></span><span class="vc-eyebrow__text">…</span></div>
*/
.vc-eyebrow,
#top .av-special-heading.vc-eyebrow .av-special-heading-tag {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--vc-red) !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.vc-eyebrow__bar {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--vc-red);
}
.vc-eyebrow--on-red,
.av_color_footer_color .vc-eyebrow,
.av_color_socket_color .vc-eyebrow {
  color: var(--vc-on-red-mute) !important;
}
.vc-eyebrow--on-red .vc-eyebrow__bar,
.av_color_footer_color .vc-eyebrow__bar { background: var(--vc-on-red-mute) !important; }


/* ─── 4. LEDE (große Intro-Absätze) ───────────────────────── */
.vc-lede {
  font-size: clamp(17px, 1.2vw, 19px) !important;
  line-height: 1.55 !important;
  color: var(--vc-ink-soft) !important;
  max-width: 56ch;
}
.vc-lede--on-red,
.av_color_footer_color .vc-lede { color: var(--vc-on-red) !important; }


/* ─── 5. TOP-BAR ──────────────────────────────────────────── */
#header_meta {
  background: var(--vc-red) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em;
}
#header_meta .container { padding: 9px clamp(18px, 4vw, 56px); box-sizing: border-box; }
#header_meta,
#header_meta *,
#header_meta .phone-info,
#header_meta .phone-info span,
#header_meta .phone-info a,
#header_meta .sub_menu a,
#header_meta .sub_menu li a {
  color: var(--vc-on-red) !important;
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
#header_meta a:hover { color: #ffffff !important; }
#header_meta .sub_menu > ul > li + li > a {
  border-left: 0 !important;
  padding-left: 16px;
}
/* Trennstrich zwischen den Top-Bar-Links entfernt (Kundenwunsch 26.06.) —
   border-left UND ::before/::after-Strich aggressiv deaktiviert (greift
   unabhängig von der genauen Menü-Verschachtelung). */
#header_meta .sub_menu li::before,
#header_meta .sub_menu li::after,
#header_meta .sub_menu li a::before,
#header_meta .sub_menu li a::after { content: none !important; display: none !important; border: 0 !important; }
#header_meta .sub_menu ul,
#header_meta .sub_menu li,
#header_meta .sub_menu li a { border-left: 0 !important; border-right: 0 !important; background-image: none !important; }

/* — Top-Bar MOBIL kompakt (≤989px): Telefon/E-Mail ausblenden, Zielgruppen-Links
   in EINE enge, zentrierte Reihe; geringe vertikale Höhe (vorher 3 große Zeilen). — */
@media only screen and (max-width: 989px) {
  #header_meta .phone-info { display: none !important; }      /* Telefon + E-Mail mobil weg (Kundenwunsch) */
  #header_meta { font-size: 10.5px !important; letter-spacing: 0 !important; }
  #header_meta .container { padding: 5px 10px !important; }
  #header_meta .sub_menu,
  #header_meta .sub_menu > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px 10px !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
  #header_meta .sub_menu > ul > li { margin: 0 !important; float: none !important; }
  #header_meta .sub_menu > ul > li > a,
  #header_meta .sub_menu > ul > li + li > a { padding: 2px 0 !important; line-height: 1.3 !important; white-space: nowrap !important; }
}

/* — Top-Bar Zielgruppen-Links: Pfeil „→" NUR auf Desktop (mobil ohne).
   VORAUSSETZUNG: die 3 Menü-Titel OHNE „ →" pflegen (nur „Für Arbeitgeber" etc.) —
   der Pfeil kommt hier per CSS dazu, damit er mobil sauber wegfällt. — */
@media (min-width: 990px) {
  #header_meta .sub_menu > ul > li > a::after {
    content: " \2192" !important;
    display: inline !important;
    border: 0 !important;
    background: none !important;
  }
}


/* ─── 6. HAUPTNAVIGATION ──────────────────────────────────── */
.av-main-nav > li > a {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;   /* wie Layout 7: serifenlos */
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: visible !important;       /* sonst clipped Enfold die Underline */
}
/* auch die inneren Enfold-Spans zwingen (setzen sonst die Heading-Serifenschrift) */
.av-main-nav > li > a .avia-menu-text,
.av-main-nav > li > a .avia_mega_div,
.av-main-nav ul li a,
.av-main-nav ul li a .avia-menu-text,
/* Dropdown-Submenü → gleiche Schrift wie Hauptnavigation */
#top .av-main-nav .sub-menu li a,
#top .av-main-nav .sub-menu li a .avia-menu-text,
#top .avia_mega_div .sub-menu li a,
#header .sub-menu li a {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
}
/* Mega-Menü: Bildunterschrift + freier HTML-Text auch auf Montserrat
   (Enfold rendert Custom-HTML sonst in der Heading-Serifenschrift) */
#top .avia_mega_div p,
#top .avia_mega_div .avia_mega_menu_content,
#top .avia_mega_div .menu-item p,
#top .avia_mega_div li > *:not(a):not(ul) {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
}
/* Sicher per Klasse: im Menü-Item Feld „CSS Classes" = vc-mega-cap eintragen.
   Deckt Label (bold) + Beschreibungs-Textblock ab. */
#top .avia_mega_div li.vc-mega-cap,
#top .avia_mega_div li.vc-mega-cap *,
#top #menu-item .vc-mega-cap,
#top .vc-mega-cap,
#top .vc-mega-cap * {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
}
.av-main-nav > li > a .avia-menu-fx { background: var(--vc-red) !important; }

/* Hover-/Active-Underline (unabhängig von Avia-Menu-FX-Einstellung) */
/* Underline sitzt direkt unter dem TEXT (.avia-menu-text), nicht am Boden des
   ganzen <a> — sonst rutscht der Strich bei höherem Header weit nach unten. */
.av-main-nav > li > a .avia-menu-text {
  position: relative !important;
  display: inline-block !important;
  line-height: 1.2 !important;        /* erbt sonst Header-Höhe → rote Fläche zu hoch */
}
.av-main-nav > li > a .avia-menu-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--vc-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
  pointer-events: none;
}
.av-main-nav > li > a:hover .avia-menu-text::after,
.av-main-nav > li.current-menu-item > a .avia-menu-text::after,
.av-main-nav > li.current_page_item > a .avia-menu-text::after,
.av-main-nav > li.current-menu-ancestor > a .avia-menu-text::after {
  transform: scaleX(1);
}
/* Anfrage-Button hat KEIN Underline */
#top .menu-item.av-menu-button-bordered > a .avia-menu-text::after,
#top .menu-item.av-menu-button-colored > a .avia-menu-text::after { display: none !important; }

#top .menu-item.av-menu-button-bordered a .avia-menu-text,
#top .menu-item.av-menu-button-colored a .avia-menu-text {
  display: inline-block !important;
  color: #ffffff !important;
  background-color: var(--vc-red) !important;
  border: 1px solid var(--vc-red) !important;
  border-radius: 0 !important;
  font-weight: normal !important;
  padding: 10px 22px !important;      /* Button-Box, nicht volle Header-Höhe */
  line-height: 1 !important;
}


/* ─── 7. BUTTONS — Avia-Buttons ───────────────────────────── */
#top .avia-button {
  background-color: var(--vc-red) !important;
  color: #ffffff !important;
  border: 1px solid var(--vc-red) !important;
  border-radius: 0 !important;
  padding: 14px 26px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  line-height: 1.2 !important;
  transition: all 0.25s ease-in-out !important;
}
#top .avia-button:hover {
  background-color: var(--vc-red-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
}
#top a.avia-button *,
#top a.avia-button .avia_button_icon,
#top a.avia-button [data-av_icon]::before {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Ghost-Variante */
#top .avia-button.vc-btn-ghost,
#top .avia-button.vc-btn--ghost {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--vc-red) !important;
  border: 1px solid var(--vc-red) !important;
  box-shadow: none !important;
}
#top .avia-button.vc-btn-ghost *,
#top .avia-button.vc-btn--ghost *,
#top .avia-button.vc-btn-ghost .avia_button_icon,
#top .avia-button.vc-btn--ghost .avia_button_icon,
#top .avia-button.vc-btn-ghost [data-av_icon]::before,
#top .avia-button.vc-btn--ghost [data-av_icon]::before {
  color: var(--vc-red) !important;
  fill: var(--vc-red) !important;
}
#top .avia-button.vc-btn-ghost:hover,
#top .avia-button.vc-btn--ghost:hover {
  background: var(--vc-red) !important;
  background-color: var(--vc-red) !important;
  color: #ffffff !important;
  border-color: var(--vc-red) !important;
}
#top .avia-button.vc-btn-ghost:hover *,
#top .avia-button.vc-btn--ghost:hover *,
#top .avia-button.vc-btn-ghost:hover .avia_button_icon,
#top .avia-button.vc-btn--ghost:hover .avia_button_icon,
#top .avia-button.vc-btn-ghost:hover [data-av_icon]::before,
#top .avia-button.vc-btn--ghost:hover [data-av_icon]::before {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* AVIA BUTTON-ZEILE: 2. Button wird automatisch zum Ghost
   ----------------------------------------------------------------
   Avia's "Button-Zeile" hat keinen Klassen-Slot auf einzelnen Buttons.
   Lösung: Klasse "vc-cta-row" auf den Wrapper, dann zweiter/letzter
   Button per :last-child zu Ghost stylen. */
#top .vc-cta-row .avia-button:last-child,
#top .vc-cta-row .avia-button:nth-child(2) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--vc-red) !important;
  border: 1px solid var(--vc-red) !important;
  box-shadow: none !important;
}
#top .vc-cta-row .avia-button:last-child *,
#top .vc-cta-row .avia-button:nth-child(2) *,
#top .vc-cta-row .avia-button:last-child .avia_button_icon,
#top .vc-cta-row .avia-button:last-child [data-av_icon]::before {
  color: var(--vc-red) !important;
  fill: var(--vc-red) !important;
}
#top .vc-cta-row .avia-button:last-child:hover,
#top .vc-cta-row .avia-button:nth-child(2):hover {
  background: var(--vc-red) !important;
  background-color: var(--vc-red) !important;
  color: #ffffff !important;
  border-color: var(--vc-red) !important;
}
#top .vc-cta-row .avia-button:last-child:hover *,
#top .vc-cta-row .avia-button:nth-child(2):hover *,
#top .vc-cta-row .avia-button:last-child:hover .avia_button_icon,
#top .vc-cta-row .avia-button:last-child:hover [data-av_icon]::before {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Buttons auf rotem Hintergrund — invertiert */
.av_color_footer_color #top .avia-button,
.av_color_socket_color #top .avia-button {
  background: var(--vc-paper) !important;
  color: var(--vc-red) !important;
  border-color: var(--vc-paper) !important;
}
.av_color_footer_color #top .avia-button:hover { background: #ffffff !important; }
.av_color_footer_color #top a.avia-button *,
.av_color_footer_color #top a.avia-button [data-av_icon]::before {
  color: var(--vc-red) !important;
  fill: var(--vc-red) !important;
}

/* ─── 7b. BUTTONS — Inline-Text-Buttons (.vc-btn ohne avia-button) ── */
/* Für HTML-Blöcke, in denen kein Avia-Button-Element möglich ist */
.vc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--vc-red);
  color: #ffffff !important;
  padding: 14px 26px;
  border-radius: 0;
  font-family: 'montserrat-custom', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none !important;
  border: 1px solid var(--vc-red);
  transition: all 0.25s ease;
}
.vc-btn:hover {
  background: var(--vc-red-hover);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.vc-btn--ghost,
#top a.vc-btn--ghost,
#top .vc-hero__cta a.vc-btn--ghost {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--vc-red) !important;
  border: 1px solid var(--vc-red) !important;
  box-shadow: none !important;
}
.vc-btn--ghost:hover,
#top a.vc-btn--ghost:hover,
#top .vc-hero__cta a.vc-btn--ghost:hover {
  background: var(--vc-red) !important;
  background-color: var(--vc-red) !important;
  color: #ffffff !important;
  border-color: var(--vc-red) !important;
}


/* ─── 7b. GRID-TEXTSPALTEN — GEMEINSAME GEOMETRIE ────────────
   Gilt für ALLE „Bild links / Text rechts"-Grids (Hero, Split, Talk und
   künftige). Rechts großer Freiraum wie Layout-7, links schmal. Padding
   direkt auf die Spalte mit der Klasse (Avia nennt sie „Spalte"), damit es
   IMMER gegen den Avia-Innenabstand gewinnt; max-width greift in Avia-Zellen
   nicht. Werte hier zentral pflegen. */
/* Klassen-universell (KEIN Vorfahr-Zwang): trifft die Body-Klasse egal auf
   welcher Ebene sie sitzt — Hero-Spalte (vc-hero__body), Split-Zelle
   (vc-split__body) und Talk-Textblock (der ebenfalls vc-hero__body trägt). */
#top .vc-hero__body,
#top .vc-split__body,
#top .vc-talk__body {
  padding: clamp(56px, 6vw, 88px) clamp(48px, 8vw, 160px) clamp(56px, 6vw, 88px) clamp(48px, 6.5vw, 112px) !important;
  /* v3 (03.09.): Mittelweg Alt↔Neu — alte Fassung links ~135px (zu luftig),
     v2 nur 72px (zu eng). Jetzt links bis 112px, rechts bis 160px + 640px-
     Content-Kante (§48.2) → ruhiger Lauf auf allen Breiten. */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  max-width: none !important;
  width: 100% !important;         /* füllt die Spalte, auch wenn das Element (Talk-Textblock) ein Flex-Item ist */
  flex: 1 1 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}
/* innere Avia-Wrapper (Zelle/Spalte) im Text-Teil aller drei Grids entschärfen —
   kein zusätzliches Theme-Default-Padding, volle Breite. Bild-Zellen bleiben
   unberührt (die haben eigene Media-Regeln / sollen full-bleed sein). */
#top .vc-hero__body .flex_cell_inner,
#top .vc-hero__body .flex_column,
#top .vc-hero__body .flex_column_inner,
#top .vc-split__body .flex_cell_inner,
#top .vc-split__body .flex_column,
#top .vc-split__body .flex_column_inner,
#top .vc-talk .flex_cell:not(.vc-talk__media) .flex_cell_inner,
#top .vc-talk .flex_cell:not(.vc-talk__media) > .flex_cell_inner > .flex_column {
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
}
/* Mobil (≤989px): schmales, symmetrisches Padding, Inhalt oben */
@media (max-width: 989px) {
  #top .vc-hero__body,
  #top .vc-split__body,
  #top .vc-talk__body {
    padding: 48px 25px !important; /* 25px = Enfold-Container mobil (07.09.) */
    justify-content: flex-start !important;
  }
}


/* ─── 8. HERO ─────────────────────────────────────────────── */
/* DOM-Struktur in Avia (Rastereihe direkt im #main, KEINE Color Section):
   <div class="av-layout-grid-container vc-hero">
     <div class="flex_cell av-gridrow-cell vc-hero__media">     ← Bild-Zelle
       <div class="flex_cell_inner">
         <div class="flex_column vc-hero__media">
           <div class="avia-image-container vc-hero__media">
             <div class="avia-image-overlay-wrap">
               <img …>
     <div class="flex_cell av-gridrow-cell vc-hero__body">      ← Text-Zelle
       <div class="flex_cell_inner">
         <div class="flex_column">… Text + Buttons …
*/

/* Container — keine eigene Höhe/Padding-Krücke; Höhe bestimmt das Bild */
#top .av-layout-grid-container.vc-hero,
#top .vc-hero.av-layout-grid-container {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 660px;   /* Hero-Höhe — hier zentral anpassen */
}

/* Abstand unter dem Hero killen.
   Der Hero ist eine bare Rastereihe direkt in #main → Enfold umschließt
   sie mit einem .container_wrap, der ~50px Default-Padding unten bringt.
   Das ist die Lücke zwischen Hero und roter Sektion. Wrapper + innere
   .container nivellieren. */
#top .container_wrap:has(.av-layout-grid-container.vc-hero),
#top .container_wrap:has(.vc-hero.av-layout-grid-container) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
#top .container_wrap:has(.vc-hero) > .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Bild-Zelle: Bild komplett bis zu allen Rändern stretchen */
#top .vc-hero .flex_cell.vc-hero__media,
#top .vc-hero .vc-hero__media,
#top .vc-hero .vc-hero__media .flex_cell_inner,
#top .vc-hero .vc-hero__media .flex_column,
#top .vc-hero .vc-hero__media .avia-image-container,
#top .vc-hero .vc-hero__media .avia-image-overlay-wrap {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
}
#top .vc-hero .vc-hero__media .avia-image-container { line-height: 0; }
#top .vc-hero .vc-hero__media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 660px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

/* Text-Zelle: vertikale Zentrierung. Padding kommt aus Avia (Zelle
   bearbeiten → Stil → Innenabstand). Fallback hier ohne !important. */
/* Text-Spalte: Padding DIREKT auf das Element mit der Klasse vc-hero__body
   (Avia nennt es „Spalte"). Großes rechtes Padding erzeugt den Freiraum außen
   rechts wie Layout-7 (max-width greift in Avia-Zellen/Spalten nicht). Gewinnt
   IMMER gegen den Avia-Innenabstand. */
#top .vc-hero .vc-hero__body {
  padding: clamp(56px, 6vw, 88px) clamp(48px, 8vw, 160px) clamp(56px, 6vw, 88px) clamp(48px, 6.5vw, 112px) !important;
  /* v3 (03.09.): Mittelweg Alt↔Neu — alte Fassung links ~135px (zu luftig),
     v2 nur 72px (zu eng). Jetzt links bis 112px, rechts bis 160px + 640px-
     Content-Kante (§48.2) → ruhiger Lauf auf allen Breiten. */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
/* innere Avia-Wrapper entschärfen — kein zusätzliches Padding, volle Breite */
#top .vc-hero .vc-hero__body .flex_cell_inner,
#top .vc-hero .vc-hero__body .flex_column,
#top .vc-hero .vc-hero__body .flex_column_inner {
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
}

/* Typo im Hero */
.vc-hero h1, .vc-hero .vc-h1,
#top .vc-hero h1, #top .vc-hero .vc-h1 {
  font-family: 'libre-baskerville-custom', serif !important;
  font-size: clamp(36px, 3.8vw, 54px) !important;   /* exakt Layout-7 (display-size s) */
  line-height: 1.06 !important;                     /* straffer als 1.12 → Zeilen näher */
  letter-spacing: -0.01em !important;
  margin: 16px 0 24px !important;
}

@media (max-width: 989px) {
  #top .av-layout-grid-container.vc-hero { min-height: auto; }
  #top .vc-hero .vc-hero__media img { min-height: 280px !important; }
  #top .vc-hero .vc-hero__body { padding: 48px 25px !important; /* 25px = Enfold-Container mobil (07.09.) */ }
}


/* ─── 9. MISSION-KOPF ─────────────────────────────────────── */
.vc-mission__head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.vc-mission__head .vc-eyebrow { justify-content: center; }
.vc-mission__head h2 { margin: 16px 0 20px !important; }

/* Avia-Variante OHNE Wrapper-Div: alles in der Mission-Section zentrieren.
   Wichtig: der EYEBROW ist display:inline-flex — er reagiert nur, wenn sein
   Avia-Wrapper (.av-special-heading) text-align: center bekommt. */
.vc-section.vc-mission .av-special-heading,
.vc-section.vc-mission .av-special-heading > *,
.vc-section.vc-mission .av_textblock_section,
.vc-section.vc-mission .av_textblock,
.vc-section.vc-mission .vc-eyebrow,
.vc-section.vc-mission .vc-h2,
.vc-section.vc-mission .vc-lede {
  text-align: center !important;
}
.vc-section.vc-mission .vc-lede {
  max-width: 56ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ─── 10. PILLARS (4-Spalter mit Vertikallinien) ──────────── */
.vc-pillar {
  padding: 40px 28px !important;
  position: relative;
  text-align: center;
}
/* Trennlinien zwischen den Pillar-Spalten — mittig zentriertes Segment.
   Fixe Höhe + top:50% + translateY(-50%) → bei ALLEN Spalten identisch
   und auf der vertikalen Mitte des Content-Blocks, egal ob ein Titel
   ein- oder zweizeilig ist. Greift sowohl wenn .vc-pillar direkte
   Geschwister sind ALS AUCH wenn jeder Pillar in eigener Avia-Spalte
   (.flex_column.av_one_fourth) sitzt. */
.vc-pillar + .vc-pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 150px;
  width: 1px;
  background: var(--vc-rule);
}
/* Trennlinien zwischen den Pillar-Spalten — exakt auf der Gap-Mitte.
   Trick: auf Desktop den Enfold-Gutter entfernen (Spalten je 25 %, stoßen
   aneinander) → der linke Spaltenrand IST der echte Spaltenübergang.
   Die 1px-Linie via Background-Gradient sitzt dann mittig im Übergang.
   Der Text stößt dank .vc-pillar-Padding (28px) nicht an die Linie.
   Mobile NICHT anfassen (Enfold stapelt die Spalten dort). */
@media (min-width: 990px) {
  #top .vc-mission .flex_column.av_one_fourth {
    width: 25% !important;
    margin-left: 0 !important;
    clear: none !important;
  }
  #top .vc-mission .flex_column.av_one_fourth + .flex_column.av_one_fourth {
    border-left: 0 !important;
    background-image: linear-gradient(rgba(31,26,20,0.18), rgba(31,26,20,0.18)) !important;
    background-repeat: no-repeat !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-position: left center !important;
    background-size: 1px 150px !important;
  }
}
@media (max-width: 989px) {
  #top .vc-mission .flex_column.av_one_fourth + .flex_column.av_one_fourth {
    background-image: none !important;
    border-left: 0 !important;
  }
}
.vc-pillar__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  color: var(--vc-red);
  display: grid;
  place-items: center;
  font-size: 30px;          /* Glyph-Fallback, falls kein SVG drin */
  line-height: 44px;
}
/* SVG-Outline-Icon (1.6px Stroke, currentColor = Burgundy) */
.vc-pillar__icon svg {
  width: 44px;
  height: 44px;
  display: block;
  color: var(--vc-red);
  stroke: currentColor;
  fill: none;
}
.vc-pillar__title {
  font-family: 'libre-baskerville-custom', serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  margin: 0 0 12px !important;
  color: var(--vc-ink) !important;
}
.vc-pillar__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--vc-ink-soft);
  margin: 0;
}
@media (max-width: 989px) {
  .vc-pillar + .vc-pillar::before { display: none; }
  .vc-pillar { padding: 28px 20px !important; }
}


/* ─── 11. SPLIT (Grid Row — exakt wie der Hero, nur gespiegelt) ─────────
   Als Enfold GRID ROW bauen (av-layout-grid-container), NICHT als Color
   Section. Zwei Zellen 1/2 + 1/2. DOM-Struktur:
   <div class="av-layout-grid-container vc-split">
     <div class="flex_cell av-gridrow-cell vc-split__body">   ← Text-Zelle
       <div class="flex_cell_inner"><div class="flex_column"> … Text …
     <div class="flex_cell av-gridrow-cell vc-split__media">  ← Bild-Zelle
       <div class="flex_cell_inner"><div class="flex_column">
         <div class="avia-image-container"> … img …
   Custom CSS Class: Grid Row = vc-split, Text-Zelle = vc-split__body,
   Bild-Zelle = vc-split__media. Bild als Avia-BILD-Element einsetzen. */

/* Grid-Container randlos — EXAKT wie der Hero (§8). KEINE width/100vw/
   negativen Margins (die erzeugen horizontalen Überlauf → Nachbarsektion
   verrutscht). Full-Bleed kommt — wie beim Hero — daher, dass die Avia-
   Rastereihe selbst auf volle Breite gestellt ist. */
#top .av-layout-grid-container.vc-split,
#top .vc-split.av-layout-grid-container {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 560px;
}
#top .container_wrap:has(.av-layout-grid-container.vc-split),
#top .container_wrap:has(.vc-split.av-layout-grid-container) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
#top .container_wrap:has(.av-layout-grid-container.vc-split) > .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Bild-Zelle: Avia-Bild bis zu allen Rändern stretchen (full-bleed) */
#top .vc-split .flex_cell.vc-split__media,
#top .vc-split .vc-split__media,
#top .vc-split .vc-split__media .flex_cell_inner,
#top .vc-split .vc-split__media .flex_column,
#top .vc-split .vc-split__media .avia-image-container,
#top .vc-split .vc-split__media .avia-image-overlay-wrap {
  width: 100% !important;
  height: 100% !important;
}
#top .vc-split .vc-split__media .avia-image-container { line-height: 0; }
#top .vc-split .vc-split__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  min-height: 560px;
}

/* Text-Zelle: vertikale Zentrierung + Padding IDENTISCH zum Hero
   (64px oben/unten, 48px links/rechts) → Text sitzt genauso nah am
   rechten Rand wie der Hero-Text, gleiche vertikale Linie. */
#top .vc-split .vc-split__body {
  padding: clamp(56px, 6vw, 88px) clamp(48px, 8vw, 160px) clamp(56px, 6vw, 88px) clamp(48px, 6.5vw, 112px) !important;
  /* v3 (03.09.): Mittelweg Alt↔Neu — alte Fassung links ~135px (zu luftig),
     v2 nur 72px (zu eng). Jetzt links bis 112px, rechts bis 160px + 640px-
     Content-Kante (§48.2) → ruhiger Lauf auf allen Breiten. */   /* Freiraum rechts wie Hero/Layout-7, direkt auf die Spalte */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#top .vc-split .vc-split__body .flex_cell_inner,
#top .vc-split .vc-split__body .flex_column,
#top .vc-split .vc-split__body .flex_column_inner {
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
}
#top .vc-split .vc-split__body h2,
#top .vc-split .vc-split__body .vc-h2 {
  font-size: clamp(28px, 2.6vw, 40px) !important;
  margin: 16px 0 24px !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: break-word;
  text-wrap: balance;
}
/* Avia-Textblock-Wrapper nivellieren (wie Hero) */
#top .vc-split .vc-split__body .av_textblock_section,
#top .vc-split .vc-split__body .avia_textblock { margin-top: 0 !important; }

@media (max-width: 989px) {
  #top .av-layout-grid-container.vc-split { min-height: auto !important; }
  #top .vc-split .vc-split__media img { min-height: 280px !important; }
  #top .vc-split .vc-split__body {
    padding: 48px 25px !important; /* 25px = Enfold-Container mobil (07.09.) */
    justify-content: flex-start !important;   /* Inhalt oben, kein Leerraum unten */
    height: auto !important;
  }
}


/* ─── 12. CHECKLISTE (Mini-Bar statt Bullet) ──────────────── */
.vc-checklist {
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 24px;
}
.vc-checklist li {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding-left: 0 !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--vc-ink-soft);
  margin: 10px 0 !important;
}
.vc-checklist li::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 1px;
  margin-top: calc(0.8em - 0.5px);   /* Mitte der ersten Zeile */
  background: var(--vc-red);
}

/* ─── 12b. SPLIT-STATS + CTA (unter der Checkliste) ───────── */
.vc-split__meta {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.vc-stat__n {
  font-family: 'libre-baskerville-custom', serif;
  font-size: 36px;
  color: var(--vc-red);
  display: block;
  line-height: 1;
}
.vc-stat__l {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vc-ink-mute);
  margin-top: 8px;
  display: block;
}
.vc-split__cta { margin-top: 24px; }


/* ─── 13. CTA-RED (Anfrage-Block) ─────────────────────────── */
.vc-cta-red h2,
.vc-cta-red .vc-h2--on-red {
  color: var(--vc-on-red) !important;
  font-family: 'libre-baskerville-custom', serif !important;
  margin: 12px 0 18px !important;
}

/* Intro-Spalte: Headline + Lede + Inline-Kontakt */
.vc-cta-red .vc-cta-red__intro .vc-lede { max-width: 48ch; }

/* Inline-Kontakt-Liste (Telefon + E-Mail unter der Lede) */
.vc-inline-contact {
  display: grid;
  gap: 18px;
  margin: 32px 0 0;
}
.vc-inline-contact > div {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--vc-rule-on-red);
}
.vc-inline-contact > div:last-child { border-bottom: 1px solid var(--vc-rule-on-red); }
.vc-inline-contact dt {
  font-family: 'montserrat-custom', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vc-on-red-mute);
  font-weight: 600;
  align-self: center;
  margin: 0;
}
.vc-inline-contact dd {
  margin: 0;
  font-size: 15px;
  color: var(--vc-on-red);
}
.vc-inline-contact--on-red dd a {
  color: var(--vc-on-red) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(247,237,216,0.4);
  transition: border-color .2s ease;
}
.vc-inline-contact--on-red dd a:hover { border-bottom-color: var(--vc-on-red); }

/* Service-Card-Reihe: Sitzt in DER GLEICHEN Color Section vc-cta-red,
   getrennt durch ein Avia-„Trennlinie / Leerraum"-Element.
   Trennlinie wird in voncaprivi.css unten farblich angepasst. */

/* Avia-Trennlinie auf burgundy-Sections — Klasse "vc-rule-on-red"
   ----------------------------------------------------------------
   Damit der User in Avia keinen Hex eingeben muss, überschreiben wir
   die Border-Farbe per CSS auf unseren on-red-Rule-Ton. */
#top .vc-rule-on-red .hr-inner,
#top .vc-rule-on-red .hr-inner-style,
#top .vc-rule-on-red.hr .hr-inner,
#top .vc-rule-on-red .av-special-divider,
#top .vc-cta-red .hr-custom .hr-inner,
#top .vc-cta-red .hr-custom .hr-inner-style {
  border-color: var(--vc-rule-on-red) !important;
  background: var(--vc-rule-on-red) !important;
}
/* Position/Breite: Avia-Standard zentriert die Linie kurz → auf VOLLE
   Containerbreite zwingen, linksbündig, ohne Extra-Versatz. */
#top .vc-rule-on-red.hr,
#top .vc-rule-on-red .hr {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: clamp(14px, 1.6vw, 22px) !important;
  margin-bottom: clamp(14px, 1.6vw, 22px) !important;
  text-align: left !important;
}
#top .vc-rule-on-red .hr-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Avia-Trennlinie auf Cream-Sections — Klasse "vc-rule-ink"
   (z. B. ober-/unterhalb der Pillar-Reihe als Rahmen). */
#top .vc-rule-ink .hr-inner,
#top .vc-rule-ink .hr-inner-style,
#top .vc-rule-ink.hr .hr-inner,
#top .vc-rule-ink .av-special-divider {
  border-color: var(--vc-rule) !important;
  background: var(--vc-rule) !important;
}


/* ─── 14. SERVICE-CARDS (3 auf rotem Hintergrund) ─────────── */
.vc-svc-card {
  padding: 32px 28px !important;
  border: 1px solid var(--vc-rule-on-red) !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: background .25s ease, transform .25s ease;
  height: 100%;
}
.vc-svc-card:hover {
  background: var(--vc-red-deep) !important;
  transform: translateY(-2px);
}
.vc-svc-card__num {
  display: block;
  font-family: 'montserrat-custom', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vc-on-red-mute);
  margin-bottom: 6px;
}
.vc-svc-card__title {
  font-family: 'libre-baskerville-custom', serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--vc-on-red) !important;
  margin: 0 0 14px !important;
  line-height: 1.25 !important;
}
.vc-svc-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--vc-on-red);
  opacity: 0.86;
  margin: 0 0 20px;
}
.vc-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'montserrat-custom', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  color: var(--vc-on-red) !important;
  border-bottom: 1px solid rgba(247,237,216,0.4);
  padding-bottom: 2px;
  transition: border-color .2s ease;
}
.vc-link-arrow:hover { border-bottom-color: var(--vc-on-red); }


/* ─── 15. AUDIENCE-CARDS (2× 1/2) ─────────────────────────── */
.vc-aud-card {
  background: var(--vc-paper) !important;
  border: 1px solid var(--vc-rule) !important;
  border-radius: 0 !important;
  padding: 44px 40px !important;
  transition: background .25s ease;
  height: 100%;
}
.vc-aud-card:hover { background: #ffffff !important; }
.vc-aud__num {
  display: block;
  font-family: 'montserrat-custom', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vc-red);
  margin-bottom: 14px;
}
.vc-aud__title {
  font-family: 'libre-baskerville-custom', serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--vc-ink) !important;
  margin: 0 0 18px !important;
}
.vc-aud__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--vc-ink-soft);
  margin: 0 0 20px;
}
.vc-aud__list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 0 24px;
}
.vc-aud__list li {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding-left: 0 !important;
  position: static;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vc-ink-soft);
  margin: 10px 0 !important;
}
.vc-aud__list li::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 1px;
  margin-top: calc(0.8em - 0.5px);   /* Mitte der ersten Zeile — wie .vc-checklist */
  background: var(--vc-red);
  position: static;
  left: auto;
  top: auto;
}
@media (max-width: 989px) {
  .vc-aud-card { padding: 32px 24px !important; }
}

/* wpautop wickelt die Eyebrow-Zeile (…</span>&nbsp;) in ein klassenloses <p> →
   dessen Absatz-Margin erzeugt zu großen Abstand zur Headline. Struktur-basiert
   neutralisieren (kein :has nötig): das einzige klassenlose <p> in der Karte ist
   der wpautop-Wrapper (die Beschreibung trägt .vc-aud__desc). */
#top .vc-aud > p:not([class]) { margin: 0 0 7px !important; padding: 0 !important; }
#top .vc-aud > p:not([class]) br { display: none !important; }
#top .vc-aud .vc-aud__num { margin: 0 !important; }
#top .vc-aud .vc-aud__title { margin-top: 0 !important; }
#top .vc-aud p:empty { display: none !important; }

/* Audience-Button-Wrapper im Text-Block (Button als <a class="vc-btn">,
   NICHT als Avia-Button-Element). Abstand nach oben zur Liste. */
.vc-aud__cta { margin-top: 28px; }
.vc-aud__cta .vc-btn { margin: 0; }

/* (Legacy) Falls doch ein Avia-Button in der Karte steckt: kompakt zwingen */
#top .vc-aud-card .avia-button,
#top .vc-aud-card .avia_button,
#top .vc-aud-card a.avia-button {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 14px 26px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  margin-top: 28px !important;
}


/* ─── 16. TALK (Bild + Kontaktblock) ──────────────────────── */
.vc-talk .vc-talk__media,
.vc-talk .vc-talk__media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  min-height: 520px;
}
#top .vc-talk .vc-talk__body {
  /* 1:1 wie Hero: rechts großer Freiraum, links schmal, direkt auf die Spalte, gewinnt gegen Avia */
  padding: clamp(56px, 6vw, 88px) clamp(48px, 8vw, 160px) clamp(56px, 6vw, 88px) clamp(48px, 6.5vw, 112px) !important;
  /* v3 (03.09.): Mittelweg Alt↔Neu — alte Fassung links ~135px (zu luftig),
     v2 nur 72px (zu eng). Jetzt links bis 112px, rechts bis 160px + 640px-
     Content-Kante (§48.2) → ruhiger Lauf auf allen Breiten. */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#top .vc-talk .vc-talk__body .flex_cell_inner,
#top .vc-talk .vc-talk__body .flex_column,
#top .vc-talk .vc-talk__body .flex_column_inner {
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
}
.vc-talk .vc-talk__body h2 { margin: 16px 0 20px !important; }
@media (max-width: 989px) {
  .vc-talk .vc-talk__media img { min-height: 280px; }
  #top .vc-talk .vc-talk__body {
    padding: 48px 25px !important; /* 25px = Enfold-Container mobil (07.09.) */
    justify-content: flex-start !important;
  }
}

/* Contact-Rows (dt/dd Definition-List) */
.vc-contact-rows {
  margin: 32px 0 0;
  display: grid;
  gap: 18px;
}
.vc-contact-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--vc-rule);
}
.vc-contact-row:last-child { border-bottom: 1px solid var(--vc-rule); }
.vc-contact-row dt {
  font-family: 'montserrat-custom', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vc-ink-mute);
  font-weight: 600;
  align-self: center;
}
.vc-contact-row dd {
  font-size: 15px;
  color: var(--vc-ink);
  margin: 0;
}
.vc-contact-row dd a {
  color: var(--vc-red) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(90,22,32,0.3);
  transition: border-color .2s ease;
}
.vc-contact-row dd a:hover { border-bottom-color: var(--vc-red); }
/* Kontakt-Zeilen mobil GARANTIERT stapeln: echtes Block-Layout statt Grid (sonst
   rutscht das Label per align-self:center neben den mehrzeiligen Wert → „AnschriftKönigstraße 33"). */
@media (max-width: 989px) {
  .vc-contact-row { display: block !important; padding: 14px 0; }
  .vc-contact-row dt { display: block; align-self: auto; margin-bottom: 3px; }
  .vc-contact-row dd { display: block; }
}

/* ROBUSTE div/span-Variante der Kontakt-Zeilen — WordPress/wpautop entfernt im
   Text-Block die <dl>/<dt>/<dd>-Tags (dann klebt „AnschriftKönigstraße 33"). Daher
   Label/Wert als <span class="vc-contact-row__k"> / <span class="vc-contact-row__v">.
   Markup-Beispiel siehe Bauplan Schritt-15 §07. */
.vc-contact-row .vc-contact-row__k {
  font-family: 'montserrat-custom', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vc-ink-mute);
  font-weight: 600;
  align-self: center;
}
.vc-contact-row .vc-contact-row__v { font-size: 15px; color: var(--vc-ink); }
.vc-contact-row .vc-contact-row__v a {
  color: var(--vc-red) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(90,22,32,0.3);
  transition: border-color .2s ease;
}
.vc-contact-row .vc-contact-row__v a:hover { border-bottom-color: var(--vc-red); }
@media (max-width: 989px) {
  .vc-contact-row .vc-contact-row__k { display: block; align-self: auto; margin-bottom: 3px; }
  .vc-contact-row .vc-contact-row__v { display: block; }
}


/* ─── 17. FOOT-CTA (3 Burgundy-Cards) ─────────────────────── */
/* KOPF — Variante B: Headline links + Lede rechts (2 Spalten 1/2+1/2).
   In Avia: Spalte 1 = vc-foot-cta__head-left (H2), Spalte 2 =
   vc-foot-cta__head-right (Lede). Beide Zellen Vertical Align „Mitte". */
#top .vc-foot-cta__head-left h2,
#top .vc-foot-cta__head-left .vc-h2--on-red,
#top .vc-foot-cta__head-left .av-special-heading .av-special-heading-tag {
  color: var(--vc-on-red) !important;
  font-family: 'libre-baskerville-custom', serif !important;
  font-size: clamp(36px, 3.8vw, 54px) !important;   /* wie Hero-H1 → stärkerer Abgang */
  line-height: 1.06 !important;
  letter-spacing: -0.01em !important;
  font-weight: 400 !important;
  margin: 0 !important;
  max-width: 14ch;
}
.vc-foot-cta__head-right .vc-lede,
.vc-foot-cta__head-right .vc-lede--on-red {
  color: var(--vc-on-red) !important;
  font-size: 17px !important;         /* wie der Lede-Text der Talk-Sektion */
  line-height: 1.6 !important;
  opacity: 0.92;
  max-width: 44ch;
  margin: 0 !important;
}
/* Mobile/Tablet: Kopf-Spalten stapeln (Enfold), Headline darf voll breit */
@media (max-width: 989px) {
  .vc-foot-cta__head-left h2,
  .vc-foot-cta__head-left .vc-h2--on-red { max-width: none; }
  .vc-foot-cta__head-right .vc-lede,
  .vc-foot-cta__head-right .vc-lede--on-red { max-width: none; margin-top: 12px !important; }
}

/* (Legacy) Zentrierte Kopf-Variante A — bleibt für Rückwärtskompat. */
.vc-foot-cta__top {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.vc-foot-cta__top .vc-eyebrow { justify-content: center; }
.vc-foot-cta__top h2,
.vc-foot-cta__top .vc-h2--on-red {
  color: var(--vc-on-red) !important;
  font-family: 'libre-baskerville-custom', serif !important;
  margin: 14px 0 0 !important;
}

/* Layout-7-Optik: KEINE Kästen, sondern vertikale Trennlinien ZWISCHEN den
   drei Spalten. Rahmen weg, stattdessen border-left auf Spalte 2 & 3. */
#top .vc-foot-cta .vc-loc,
.vc-loc {
  padding: 0 clamp(12px, 1.4vw, 22px) 0 0 !important;   /* kleines rechtes Padding → horizontale Linien reichen fast bis zur Trennlinie (wie Layout 7) */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: 100% !important;
}
/* Spalten näher an die Trennlinie ziehen (großer Avia-Zeilenabstand unter der
   Linie raus → Abstand über/unter der Trennlinie optisch gleich). */
#top .vc-foot-cta .flex_column.vc-loc,
#top .vc-foot-cta .av_one_third.vc-loc {
  margin-top: clamp(-150px, -11vw, -85px) !important;
}
/* Trennlinie vor Spalte 2 & 3 (Enfold: erste Spalte trägt .first) */
#top .vc-foot-cta .flex_column.vc-loc:not(.first),
#top .vc-foot-cta .av_one_third.vc-loc:not(.first) {
  border-left: 1px solid var(--vc-rule-on-red) !important;
  padding-left: clamp(28px, 3vw, 56px) !important;
}
/* Kontakt-Block: dezenter Abstand nach oben (Fußzeilen-Fluchtung nur mit Flex,
   das aber den Text schrumpfen ließ → bewusst weggelassen). */
#top .vc-foot-cta .vc-loc__contact { margin-top: 8px; }
/* ERZWUNGEN: volle Breite auf Spalte + Text-Wrapper + Kontakt-Block, damit die
   horizontale Linie (border-top von .vc-loc__contact) über die ganze Spalte läuft
   und fast bis zur vertikalen Trennlinie reicht (wie Layout 7). */
#top .vc-foot-cta .vc-loc,
#top .vc-foot-cta .vc-loc .flex_column_inner,
#top .vc-foot-cta .vc-loc .avia_textblock,
#top .vc-foot-cta .vc-loc .av_textblock_section,
#top .vc-foot-cta .vc-loc__contact {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Layout-7-Feinschliff Footer-Spalten:
   (a) Spalten oben bündig unter der Trennlinie (kein Leerraum-Gap oben) */
#top .vc-foot-cta .flex_column.vc-loc,
#top .vc-foot-cta .av_one_third.vc-loc {
  align-self: flex-start !important;
  height: auto !important;
}
/* (b) KEIN Eyebrow-Strich vor den Spalten-Labels (Layout-7: reine Kapitälchen) */
#top .vc-foot-cta .vc-loc .vc-eyebrow::before,
#top .vc-foot-cta .vc-loc .vc-eyebrow__bar,
#top .vc-foot-cta .vc-loc .av-special-heading.vc-eyebrow .av-special-heading-tag::before {
  display: none !important;
  content: none !important;
}
#top .vc-foot-cta .vc-loc .vc-eyebrow,
#top .vc-foot-cta .vc-loc .av-special-heading.vc-eyebrow .av-special-heading-tag {
  padding-left: 0 !important;
}
@media (max-width: 989px) {
  /* gestapelt: vertikale Linie → horizontale Linie oben */
  #top .vc-foot-cta .flex_column.vc-loc:not(.first),
  #top .vc-foot-cta .av_one_third.vc-loc:not(.first) {
    border-left: 0 !important;
    border-top: 1px solid var(--vc-rule-on-red) !important;
    padding-left: 0 !important;
    padding-top: 32px !important;
    margin-top: 32px !important;
  }
}
.vc-loc__city {
  font-family: 'libre-baskerville-custom', serif;
  font-size: 24px;
  color: var(--vc-on-red);
  margin: 14px 0 18px;
}
.vc-loc__addr {
  font-size: 14px;
  line-height: 1.65;
  color: var(--vc-on-red);
  opacity: 0.86;
  margin-bottom: 24px;
}
.vc-loc__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--vc-rule-on-red);
}
.vc-loc__contact a {
  font-size: 14px;
  color: var(--vc-on-red) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
  width: fit-content;
}
.vc-loc__contact a:hover { border-bottom-color: var(--vc-on-red); }


/* ─── 18. FOOTER (Brand-Block in Widget) ──────────────────── */
.vc-footer-brand { text-align: center; padding: 24px 0; }
.vc-footer-logo { max-height: 44px; width: auto; margin-bottom: 14px; }
.vc-footer-tag {
  font-size: 13px;
  color: var(--vc-on-red);
  opacity: 0.78;
  margin: 0;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}


/* ─── 18b. SOCKET (Enfold Fußzeilen-Leiste) höher ────────────
   Layout-7-Optik: mehr Luft ober-/unterhalb der ©-Zeile + Links. */
#top #socket .container {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}


/* ─── 19. STATS (Avia Counter Number) ─────────────────────── */
.vc-stat .avia-animated-number-title {
  font-family: 'libre-baskerville-custom', serif !important;
  font-size: 36px !important;
  color: var(--vc-red) !important;
  font-weight: 400 !important;
}
.vc-stat .avia-animated-number-desc {
  font-size: 12px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vc-ink-mute) !important;
  margin-top: 8px;
}


/* ─── 20. SECTION PADDING ─────────────────────────────────── */
.avia-section { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); }
.avia-section.av-minimal-section { padding: 0 !important; }

/* ─── 20b. GLOBALER, RESPONSIVER SEKTIONS-ABSTAND (27.06.2026) ───
   EINE Quelle der Wahrheit für den vertikalen Innenabstand ALLER
   Inhalts-Color-Sections. Überschreibt das Avia-Padding-Feld, damit kein
   per-Sektion-Wert mehr zu enge/zu weite Abstände erzeugt. Full-Bleed-
   Sektionen (Hero/Split/Talk = Rastereihen) sind ausgenommen (padding:0).
   Das 2-Karten-Raster .vc-split liegt INNERHALB dieser Sektionen und ist
   hier irrelevant (die Sektion selbst trägt die Klasse nicht). */
#top .avia-section.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk),
#top .av-section-color-overlay-wrap.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}
/* CSS ist alleinige Quelle: Avia-„Custom Margins" (Außenabstand, z. B. 96px top/bottom)
   auf ALLEN vc-Sektionen neutralisieren — unabhängig von der Verschachtelung (KEIN
   direkter Kind-Kombinator). Der vertikale Rhythmus kommt ausschließlich aus dem
   Padding oben (bzw. 0 bei Full-Bleed). Damit ist es egal, was im Avia-Feld steht. */
#top .avia-section.vc-section,
#top .av-section-color-overlay-wrap.vc-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* HORIZONTALE Ausrichtung: CSS ist alleinige Quelle. In Enfold kann die SPALTE ein
   manuelles Innen-Padding (z. B. Right Padding 48px) und/oder einen 6%-Gutter tragen
   → Inhalt sitzt asymmetrisch/links. NUR für die zentrierten Code-Block-Sektionen
   (die ein .vc-eh enthalten) Spalten-Padding + Gutter neutralisieren. WICHTIG: NICHT
   pauschal auf alle vc-Sektionen — sonst verlieren Spalten-Karten (z. B. Footer .vc-loc,
   die selbst flex_column sind) ihr gewolltes Innenpadding. */
#top .vc-section:has(.vc-eh) .flex_column {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 989px) {
  #top .vc-section:has(.vc-eh) > .container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
/* innere Avia-.container-Hülle nicht zusätzlich vertikal padden (sonst doppelt) */
#top .vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) > .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (max-width: 1100px) {
  #top .avia-section.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk),
  #top .av-section-color-overlay-wrap.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
}
@media (max-width: 767px) {
  #top .avia-section.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk),
  #top .av-section-color-overlay-wrap.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}
@media (max-width: 480px) {
  #top .avia-section.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk),
  #top .av-section-color-overlay-wrap.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}

/* GENERISCHER SECTION-WRAPPER (Klasse "vc-section" auf jeder Color Section)
   ----------------------------------------------------------------
   Konvention: Color Section bekommt IMMER "vc-section vc-<name>".
   Hier hängen wir gemeinsame Defaults dran. Sektion-spezifische Modifier
   überschreiben unten. */
.vc-section { /* hook für globale section-defaults, derzeit leer */ }

/* Sektionen ohne eigenes Default-Padding (Hero/Split/Talk sind full-bleed) */
.vc-hero.avia-section,
.vc-split.avia-section,
.vc-talk.avia-section,
.vc-section.vc-hero,
.vc-section.vc-split,
.vc-section.vc-talk { padding: 0 !important; }

/* Mit voller Specificity gegen Avia's color-set + section padding */
#top .avia-section.vc-section.vc-hero,
#top .avia-section.vc-section.vc-split,
#top .avia-section.vc-section.vc-talk,
#top .avia-section.vc-hero,
#top .avia-section.vc-split,
#top .avia-section.vc-talk,
#top .av-section-color-overlay-wrap.vc-section.vc-hero,
#top .av-section-color-overlay-wrap.vc-section.vc-split,
#top .av-section-color-overlay-wrap.vc-section.vc-talk {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Auch die innere .container-Hülle nivellieren */
#top .vc-section.vc-hero .container,
#top .vc-section.vc-split .container,
#top .vc-section.vc-talk .container { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Sicherheitsnetz: Wenn der Modifier nur auf der Rastereihe sitzt.
   WICHTIG: split NUR als Rastereihen-Variante (.av-layout-grid-container),
   sonst trifft :has() auch das 2-Karten-Raster <div class="vc-split"> in
   Hub-/Service-Intros und nullt deren Sektions-Padding (zu enger Abstand). */
.avia-section:has(.vc-hero),
.avia-section:has(.av-layout-grid-container.vc-split),
.avia-section:has(.vc-talk) { padding: 0 !important; }

/* AVIA-Default-Spacing zwischen aufeinanderfolgenden Top-Level-Sektionen
   (Color Section → Color Section / Grid-Row → Color Section etc.) killen.
   Avia gibt mit verschiedenen Klassen-Kombis margin-top/bottom dazu — wir
   nullen das pauschal innerhalb von #main. */
#top #main > .avia-section,
#top #main > .av-layout-grid-container,
#top #main > .av_one_full,
#top #main > .container_wrap,
#top #main > .flex_section { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Avia setzt teils auf .avia-builder-el-* margins — auch dort entstauben */
#top #main > [class*="avia-builder-el-"] { margin-top: 0 !important; margin-bottom: 0 !important; }


/* ─── 21. GRAVITY FORMS / AVIA CONTACT FORM (auf Rot) ─────── */
/* Greift auf Footer-Color-Sections UND auf jeder Section mit
   .vc-cta-red oder .vc-form--on-red (robust gegen Color-Set-Varianten) */
.av_color_footer_color .gform_wrapper input[type="text"],
.av_color_footer_color .gform_wrapper input[type="email"],
.av_color_footer_color .gform_wrapper input[type="tel"],
.av_color_footer_color .gform_wrapper textarea,
.av_color_footer_color .gform_wrapper select,
.av_color_footer_color #top .avia_ajax_form input[type="text"],
.av_color_footer_color #top .avia_ajax_form input[type="email"],
.av_color_footer_color #top .avia_ajax_form textarea,
.vc-cta-red .gform_wrapper input[type="text"],
.vc-cta-red .gform_wrapper input[type="email"],
.vc-cta-red .gform_wrapper input[type="tel"],
.vc-cta-red .gform_wrapper textarea,
.vc-cta-red .gform_wrapper select,
.vc-form--on-red input[type="text"],
.vc-form--on-red input[type="email"],
.vc-form--on-red input[type="tel"],
.vc-form--on-red textarea,
.vc-form--on-red select {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(247,237,216,0.35) !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  font-family: 'montserrat-custom', sans-serif !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
.av_color_footer_color .gform_wrapper label,
.av_color_footer_color .gform_wrapper .gfield_label,
.av_color_footer_color #top .avia_ajax_form label,
.vc-cta-red .gform_wrapper label,
.vc-cta-red .gform_wrapper .gfield_label,
.vc-form--on-red label {
  color: var(--vc-on-red) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px !important;
}
.av_color_footer_color .gform_wrapper input::placeholder,
.av_color_footer_color .gform_wrapper textarea::placeholder,
.av_color_footer_color #top .avia_ajax_form input::placeholder,
.av_color_footer_color #top .avia_ajax_form textarea::placeholder,
.vc-cta-red .gform_wrapper input::placeholder,
.vc-cta-red .gform_wrapper textarea::placeholder,
.vc-form--on-red input::placeholder,
.vc-form--on-red textarea::placeholder {
  color: rgba(247,237,216,0.55) !important;
}
.av_color_footer_color .gform_wrapper input:focus,
.av_color_footer_color .gform_wrapper textarea:focus,
.av_color_footer_color #top .avia_ajax_form input:focus,
.av_color_footer_color #top .avia_ajax_form textarea:focus,
.vc-cta-red .gform_wrapper input:focus,
.vc-cta-red .gform_wrapper textarea:focus,
.vc-form--on-red input:focus,
.vc-form--on-red textarea:focus {
  outline: 0 !important;
  border-bottom-color: var(--vc-on-red) !important;
}

form[id^="gform_"] input[type="submit"],
.vc-cta-red .gform_wrapper input[type="submit"],
.vc-form--on-red input[type="submit"],
#top .avia_ajax_form .button {
  background: var(--vc-paper) !important;
  color: var(--vc-red) !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
  border: 1px solid var(--vc-paper) !important;
  padding: 14px 26px !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  transition: all 0.25s ease-in-out !important;
  cursor: pointer;
}
form[id^="gform_"] input[type="submit"]:hover,
.vc-cta-red .gform_wrapper input[type="submit"]:hover,
.vc-form--on-red input[type="submit"]:hover,
#top .avia_ajax_form .button:hover {
  background: #ffffff !important;
  color: var(--vc-red) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
}

/* ─── 21b. GRAVITY FORMS — Layout-Feinheiten ─────────────── */
/* Spaltenlayout (Half-Width) — Gravity 2.5+ */
.av_color_footer_color .gform_wrapper .gform_fields,
.vc-cta-red .gform_wrapper .gform_fields,
.vc-form--on-red .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
}
.av_color_footer_color .gform_wrapper .gfield--width-full,
.av_color_footer_color .gform_wrapper .gfield.vc-field--full,
.av_color_footer_color .gform_wrapper .ginput_container_textarea,
.av_color_footer_color .gform_wrapper .gfield_consent,
.av_color_footer_color .gform_wrapper .gform_footer,
.vc-cta-red .gform_wrapper .gfield--width-full,
.vc-cta-red .gform_wrapper .gfield.vc-field--full,
.vc-cta-red .gform_wrapper .gfield_textarea,
.vc-cta-red .gform_wrapper .gfield_consent,
.vc-cta-red .gform_wrapper .gform_footer,
.vc-form--on-red .gfield--width-full,
.vc-form--on-red .gfield_textarea,
.vc-form--on-red .gfield_consent,
.vc-form--on-red .gform_footer { grid-column: 1 / -1; }

/* AUTO-Layout (unabhängig von Gravity-Feldbreite-Setting):
   Die ersten 4 Felder = Half-Width, alle weiteren = Full-Width.
   Reihenfolge im Form: 1 Name · 2 Unternehmen · 3 E-Mail · 4 Telefon
   · 5 Ihr Anliegen (textarea) · 6 DSGVO · 7 Submit */
.vc-cta-red .gform_wrapper .gform_fields .gfield:nth-child(-n+4),
.vc-form--on-red .gform_fields .gfield:nth-child(-n+4) {
  grid-column: span 1 !important;
}
.vc-cta-red .gform_wrapper .gform_fields .gfield:nth-child(n+5),
.vc-form--on-red .gform_fields .gfield:nth-child(n+5) {
  grid-column: 1 / -1 !important;
}

/* (entfernt: justify-content:flex-start — wurde später durch flex-end
   überschrieben; der finale Footer ist rechtsbündig, s. weiter unten) */

.av_color_footer_color .gform_wrapper textarea,
.vc-cta-red .gform_wrapper textarea,
.vc-form--on-red textarea { min-height: 120px !important; resize: vertical; }

/* Required-Stern */
.av_color_footer_color .gform_wrapper .gfield_required,
.vc-cta-red .gform_wrapper .gfield_required { color: var(--vc-on-red-mute) !important; }

/* Validation-Errors */
.av_color_footer_color .gform_wrapper .gfield_error .gfield_label,
.av_color_footer_color .gform_wrapper .validation_message,
.vc-cta-red .gform_wrapper .gfield_error .gfield_label,
.vc-cta-red .gform_wrapper .validation_message {
  color: #FFD0A8 !important;
}
.av_color_footer_color .gform_wrapper .gfield_error input,
.av_color_footer_color .gform_wrapper .gfield_error textarea,
.vc-cta-red .gform_wrapper .gfield_error input,
.vc-cta-red .gform_wrapper .gfield_error textarea {
  border-bottom-color: #FFD0A8 !important;
}

/* Consent-Checkbox */
.av_color_footer_color .gform_wrapper .gfield_consent .gfield_consent_label,
.av_color_footer_color .gform_wrapper .gfield_consent label,
.vc-cta-red .gform_wrapper .gfield_consent .gfield_consent_label,
.vc-cta-red .gform_wrapper .gfield_consent label {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
  color: var(--vc-on-red) !important;
  line-height: 1.5;
}
.av_color_footer_color .gform_wrapper .gfield_consent input[type="checkbox"],
.vc-cta-red .gform_wrapper .gfield_consent input[type="checkbox"] {
  accent-color: var(--vc-on-red);
  margin-right: 10px;
}
.av_color_footer_color .gform_wrapper .gfield_consent a,
.vc-cta-red .gform_wrapper .gfield_consent a {
  color: var(--vc-on-red) !important;
  border-bottom: 1px solid rgba(247,237,216,0.5);
}

/* Submit rechtsbündig im Footer */
.av_color_footer_color .gform_wrapper .gform_footer,
.vc-cta-red .gform_wrapper .gform_footer,
.vc-form--on-red .gform_footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px !important;
  padding-top: 8px !important;
}

/* Confirmation nach Submit */
.av_color_footer_color .gform_confirmation_message,
.av_color_footer_color .gform_confirmation_wrapper,
.vc-cta-red .gform_confirmation_message,
.vc-cta-red .gform_confirmation_wrapper {
  font-size: 16px;
  color: var(--vc-on-red) !important;
  padding: 24px 0;
  border-top: 1px solid var(--vc-rule-on-red);
  border-bottom: 1px solid var(--vc-rule-on-red);
}

@media (max-width: 700px) {
  .av_color_footer_color .gform_wrapper .gform_fields,
  .vc-cta-red .gform_wrapper .gform_fields,
  .vc-form--on-red .gform_fields {
    grid-template-columns: 1fr;
  }
}


/* ─── 22. PERSY / COACHY (Plugin) ─────────────────────────── */
.cs-input:hover, .cs-select:hover,
.cs-input:focus, .cs-select:focus { border-color: var(--vc-red) !important; }
.cs-widget__container { max-width: 1440px !important; margin: 0 auto; }
.cs-color--primary { color: var(--vc-red) !important; fill: var(--vc-red) !important; }
.cs-color--background { background-color: var(--vc-red) !important; }
.cs-color--border-before::before { background: var(--vc-red) !important; }


/* ─── 23. SOCIAL HOVER ────────────────────────────────────── */
#top .social_bookmarks li a { transition: all 0.25s ease-in-out !important; }
#top .social_bookmarks li:hover a { background: var(--vc-red) !important; }


/* ============================================================
   ─── 25. HOTFIX HERO v2.1 (26.05.2026) ──────────────────────
   Behebt drei Hero-Probleme:
   (1) Strich vor "Personalvermittlung für die Pflege" fehlt
   (2) Abstand H1 → Lede-Text viel zu groß
   (3) Buttons untereinander statt nebeneinander
   ============================================================ */

/* (1) EYEBROW — sauberer einzelner Strich vor dem Text
   ----------------------------------------------------------------
   Avia rendert Special-Heading als <h…> mit zusätzlicher
   .special-heading-border (Linie nach dem Text). Beides ausschalten,
   nur unseren ::before-Strich behalten. */

/* Avia's interne Default-Linien KOMPLETT ausblenden — alle Hooks
   (Special Heading hat je nach Style: .special-heading-border,
   .av-segment-heading-line, ::after Pseudo, eigene inline border) */
#top .av-special-heading.vc-eyebrow,
#top .av-special-heading.vc-eyebrow .av-special-heading-tag,
#top .av-special-heading.vc-eyebrow .av-subheading {
  border: 0 !important;
  box-shadow: none !important;
}
#top .av-special-heading.vc-eyebrow .special-heading-border,
#top .av-special-heading.vc-eyebrow .av-subheading,
#top .av-special-heading.vc-eyebrow .av-special-heading-after-titel,
#top .av-special-heading.vc-eyebrow .special-heading-inherit,
#top .av-special-heading.vc-eyebrow .av-segment-heading-line,
#top .av-special-heading.vc-eyebrow .av-segment-heading-line-pre,
#top .av-special-heading.vc-eyebrow .av-segment-heading-line-after,
#top .av-special-heading.vc-eyebrow + .special-heading-border,
#top .av-special-heading.vc-eyebrow::after,
#top .av-special-heading.vc-eyebrow .av-special-heading-tag::after { display: none !important; border: 0 !important; background: transparent !important; }

/* Alte Bar-Spans aus dem alten Markup ENDGÜLTIG weg */
.vc-eyebrow .vc-eyebrow__bar,
#top .vc-eyebrow .vc-eyebrow__bar { display: none !important; visibility: hidden !important; width: 0 !important; }

/* Unser einziger Strich — als ::before am Eyebrow-Element.
   WICHTIG: NICHT auf den .av-special-heading-Wrapper oder Spalten
   anwenden, sonst werden die zu inline-block + bekommen 40px Padding
   → Zentrierung bricht. */
.vc-eyebrow:not(.av-special-heading):not(.flex_column):not(.av_one_full):not(.av_one_half):not(.av_one_third):not(.av_two_third):not(.av_one_fourth):not(.av_three_fourth):not(.av_one_fifth),
#top .av-special-heading.vc-eyebrow .av-special-heading-tag {
  position: relative !important;
  padding-left: 40px !important;
  display: inline-block !important;
  gap: 0 !important;
}
.vc-eyebrow:not(.av-special-heading):not(.flex_column):not(.av_one_full):not(.av_one_half):not(.av_one_third):not(.av_two_third):not(.av_one_fourth):not(.av_three_fourth):not(.av_one_fifth)::before,
#top .av-special-heading.vc-eyebrow .av-special-heading-tag::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 1px !important;
  background: var(--vc-red) !important;
  display: block !important;
}
/* Eyebrow-Strich auf rotem Grund: helles Beige statt Rot.
   Greift sowohl die span-Variante (mit .vc-eyebrow--on-red) als auch
   die Avia-Variante (H6-Tag im Footer/Socket/Foot-CTA-Kontext, oder
   wenn .vc-eyebrow--on-red direkt am Wrapper bzw. am H6-Tag sitzt). */
/* Span/Div-Variante (Text-Block). MUSS die volle :not()-Kette + #top
   tragen, sonst gewinnt die Basis-Strich-Regel (dunkelrot, Spezifit\u00e4t
   0,9,1) trotz !important. Zus\u00e4tzlich kontext-basiert: jeder .vc-eyebrow
   INNERHALB der roten Sektion (.vc-cta-red / Footer-Color) wird automatisch
   beige \u2014 Modifier-Klasse dann optional. */
#top .vc-eyebrow--on-red:not(.av-special-heading):not(.flex_column):not(.av_one_full):not(.av_one_half):not(.av_one_third):not(.av_two_third):not(.av_one_fourth):not(.av_three_fourth):not(.av_one_fifth)::before,
#top .vc-cta-red .vc-eyebrow:not(.av-special-heading):not(.flex_column):not(.av_one_full):not(.av_one_half):not(.av_one_third):not(.av_two_third):not(.av_one_fourth):not(.av_three_fourth):not(.av_one_fifth)::before,
#top .av_color_footer_color .vc-eyebrow:not(.av-special-heading):not(.flex_column):not(.av_one_full):not(.av_one_half):not(.av_one_third):not(.av_two_third):not(.av_one_fourth):not(.av_three_fourth):not(.av_one_fifth)::before,
#top .av_color_footer_color .av-special-heading.vc-eyebrow .av-special-heading-tag::before,
#top .av_color_socket_color .av-special-heading.vc-eyebrow .av-special-heading-tag::before,
#top .av_color_primary_color .av-special-heading.vc-eyebrow .av-special-heading-tag::before,
#top .vc-foot-cta .av-special-heading.vc-eyebrow .av-special-heading-tag::before,
#top .vc-section[class*="footer"] .av-special-heading.vc-eyebrow .av-special-heading-tag::before,
/* Modifier direkt am Special-Heading-Wrapper */
#top .av-special-heading.vc-eyebrow--on-red .av-special-heading-tag::before,
/* Modifier direkt am H6-Tag */
#top .av-special-heading .av-special-heading-tag.vc-eyebrow--on-red::before {
  background: var(--vc-on-red-mute) !important;
}

/* ─── EINHEITLICHER ABSTAND EYEBROW (H6) → H2 ──────────────
   Mobile-First. Spacing kommt ausschließlich vom Eyebrow-Wrapper
   margin-bottom; nachfolgende Heading-Wrapper bekommen margin-top:0,
   damit Avia-Defaults den Abstand nicht inkonsistent machen. */

/* Eyebrow-Wrapper: BLOCK + margin-bottom, sonst neutral.
   WICHTIG: display:block überschreibt den display:inline-flex-Leak aus
   Sektion 3. Ohne das schrumpft der Wrapper auf Inhaltsbreite und
   margin:0 auto am Tag kann nicht zentrieren. */
#top .av-special-heading.vc-eyebrow {
  display: block !important;
  align-items: initial !important;
  gap: 0 !important;
  margin: 0 0 14px !important;   /* Mobile */
  padding: 0 !important;
}
#top .av-special-heading.vc-eyebrow .av-special-heading-tag { margin: 0 !important; }

/* On-Red-Modifier: Text-Farbe (Strich-Farbe ist oben separat geregelt) */
.vc-eyebrow--on-red:not(.av-special-heading),
#top .av-special-heading.vc-eyebrow--on-red .av-special-heading-tag,
#top .av-special-heading .av-special-heading-tag.vc-eyebrow--on-red,
#top .vc-foot-cta .av-special-heading.vc-eyebrow .av-special-heading-tag {
  color: var(--vc-on-red-mute) !important;
}

/* Folgender Heading-Wrapper (H2/H3) klebt am Eyebrow — kein extra
   margin-top (deckt direkte Geschwister + Avia-Wrapper dazwischen ab) */
#top .av-special-heading.vc-eyebrow + .av-special-heading,
#top .av-special-heading.vc-eyebrow + .av-special-heading > .av-special-heading-tag,
#top .av-special-heading.vc-eyebrow + .av_textblock_section + .av-special-heading,
#top .flex_column > .av-special-heading.vc-eyebrow + .av-special-heading {
  margin-top: 0 !important;
}
#top .av-special-heading.vc-eyebrow + .av-special-heading .av-special-heading-tag {
  margin-top: 0 !important;
}

/* Tablet */
@media (min-width: 768px) {
  #top .av-special-heading.vc-eyebrow { margin-bottom: 16px !important; }
}
/* Desktop */
@media (min-width: 1024px) {
  #top .av-special-heading.vc-eyebrow { margin-bottom: 18px !important; }
}

/* (Legacy-Wrapper-Klassen .vc-mission__head / .vc-foot-cta__top sind
   obsolet — jetzige Architektur kettet alles an .vc-section.vc-mission
   bzw. .vc-section.vc-foot-cta. Keine padding-Kompensation nötig.) */


/* (1b) EYEBROW ZENTRIEREN — robust & toleranter
   --------------------------------------------------------------
   Avia legt "Benutzerdefinierte CSS-Klasse" je nach Element/Version mal
   am .av-special-heading-Wrapper, mal am .av-special-heading-tag (H6)
   ab. Wir decken BEIDE Stellen ab und triggern unabhängig von .vc-eyebrow.

   Das Eyebrow-Tag ist display:inline-block mit padding-left:40px für den
   Strich. text-align:center am Wrapper ist FRAGIL — Avia setzt manchmal
   eigene inline-styles am Tag, die das übersteuern. Verlässlicher: das
   Tag selbst zum Block mit width:max-content + auto-Margins machen.
   Wirkt unabhängig von text-align und ist immun gegen Avia-Overrides.

   Aktiv:
   - automatisch in .vc-mission und .vc-foot-cta
   - via Modifier-Klasse vc-eyebrow--center (egal ob am Wrapper oder Tag)
   - via Enfolds Avia-Center-Klassen (av-special-heading-center,
     av_heading_align_center) */

/* TAG zentrieren — alle möglichen Plätze der Modifier-Klasse */
#top .vc-section.vc-mission .av-special-heading .av-special-heading-tag,
#top .vc-section.vc-foot-cta .av-special-heading .av-special-heading-tag,
/* Klasse am Wrapper */
#top .av-special-heading.vc-eyebrow--center .av-special-heading-tag,
#top .av-special-heading.av-special-heading-center .av-special-heading-tag,
#top .av-special-heading.av_heading_align_center .av-special-heading-tag,
/* Klasse direkt am Tag (H6) */
#top .av-special-heading .av-special-heading-tag.vc-eyebrow--center,
#top .av-special-heading-tag.vc-eyebrow.vc-eyebrow--center,
#top .av-special-heading-tag.vc-eyebrow--center {
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* WRAPPER zentrieren (Fallback / Geschwister-Spans wie .special-heading-border) */
#top .vc-section.vc-mission .av-special-heading,
#top .vc-section.vc-foot-cta .av-special-heading,
#top .av-special-heading.vc-eyebrow--center,
#top .av-special-heading.av-special-heading-center,
#top .av-special-heading.av_heading_align_center,
#top .av-special-heading:has(> .av-special-heading-tag.vc-eyebrow--center) {
  text-align: center !important;
}


/* (2) ABSTAND H1 → LEDE FIXEN
   --------------------------------------------------------------
   Vorher: H1 margin-bottom 24px + Avia-<p>-margin-top ~28px = ~52px Lücke.
   Jetzt: H1 unten 8px, Lede oben 0. Eyebrow → H1 bleibt großzügig (20px). */
.vc-hero h1,
.vc-hero .vc-h1,
#top .vc-hero h1,
#top .vc-hero .av-special-heading.vc-h1 .av-special-heading-tag {
  margin: 20px 0 8px !important;
}
.vc-hero .vc-lede,
#top .vc-hero .vc-lede,
#top .vc-hero p.vc-lede {
  margin-top: 0 !important;
  margin-bottom: 28px !important;
}
/* Avia umschließt Text-Blöcke oft mit eigenem Wrapper, der margin-top
   erzwingt — hier nivellieren */
.vc-hero .av_textblock_section,
.vc-hero .avia_textblock { margin-top: 0 !important; }


/* (3) BUTTONS NEBENEINANDER STATT GESTAPELT
   --------------------------------------------------------------
   Variante A: Text-Block mit <div class="vc-hero__cta">…</div>
   Variante B: Zwei Avia-Buttons direkt in der Spalte (Enfold stapelt
   die per Default als Blockelemente — wir zwingen sie in Flex). */
.vc-hero__cta,
#top .vc-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
/* Avia rendert jeden Button in eigenem .avia-button-wrap (Block) — in beiden
   Wrappern (Hero + Talk/CTA-Row) inline-flex erzwingen, sonst stapeln sie. */
#top .vc-cta-row .avia-button-wrap,
#top .vc-cta-row .avia-button { display: inline-flex !important; margin: 0 !important; vertical-align: top; }
/* Variante B: Avia rendert jeden Button in eigenem .avia-button-wrap.
   Wir machen die Wraps inline-flex. */
.vc-hero .vc-hero__body .avia-button-wrap,
.vc-hero .vc-hero__body .avia_textblock + .avia-button-wrap {
  display: inline-flex !important;
  margin: 0 12px 0 0 !important;
}
.vc-hero .vc-hero__body .avia-button-wrap:last-child { margin-right: 0 !important; }
/* Falls Buttons in einem eigenen <div>-Wrapper liegen */
.vc-hero .vc-hero__body > .flex_column > .avia-button-wrap { display: inline-flex !important; }

/* Talk/CTA OHNE Wrapper: zwei <a class="vc-btn"> direkt im Text-Block
   (.vc-hero__body). Avia kapselt den Text in .avia_textblock, daher
   KEIN direktes Kind (>) verwenden — descendant. wpautop legt die Buttons
   in eigene <p> bzw. trennt mit <br>: button-tragende <p> als inline-flex
   (fließen nebeneinander, egal ob getrennte <p> oder ein <p> mit <br>). */
#top .vc-hero__body p:has(.vc-btn) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 12px 0 0;
  vertical-align: top;
}
#top .vc-hero__body p:has(.vc-btn) br { display: none; }
#top .vc-hero__body p:has(.vc-btn) .vc-btn { margin: 0 !important; }
@media (max-width: 600px) {
  #top .vc-hero__body p:has(.vc-btn) { display: flex; width: 100%; margin-right: 0; }
  #top .vc-hero__body p:has(.vc-btn) .vc-btn { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
  .vc-hero__cta, #top .vc-cta-row, #top .vc-eh__cta { gap: 8px !important; }
  .vc-hero__cta .vc-btn,
  #top .vc-cta-row .vc-btn,
  #top .vc-cta-row .avia-button,
  #top .vc-eh__cta .vc-btn { width: 100%; justify-content: center; }
}


/* ─── 24. MOBILE LOGIK (989 px) ───────────────────────────── */
@media only screen and (max-width: 989px) {
  #top #wrap_all h1, #top #wrap_all h2, #top #wrap_all h3,
  #top #wrap_all .av-special-heading-tag,
  #top #wrap_all .tp-caption {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  .html_stretched.responsive #top #wrap_all #header { position: relative !important; }
  .responsive #top #main { padding-top: 0 !important; margin-top: 0 !important; }
  .responsive.html_header_transparency #top #header {
    background-color: var(--vc-paper) !important;
    position: relative !important;
  }
  #top h1 { font-size: clamp(32px, 8vw, 42px) !important; }
}


/* ============================================================
   ─── 26. HOTFIX FORM v3 (07.06.2026) — WP 7 / Enfold 7.1.5 ───
   Problem nach Update: Gravity Forms aktiviert sein EIGENES
   12-Spalten-CSS-Grid (.gform_fields = grid). Unser altes §21b
   erzwang grid-template-columns: 1fr 1fr (2 Spalten) + nth-child-
   Spans → die Felder kollidierten und kollabierten auf Minimal-
   breite (NAME · UNTERNEHMEN · TELEFON · MAIL klemmen oben).

   Lösung: NICHT gegen GF kämpfen — GF's 12-Spalten-Raster nutzen.
   Feldbreiten werden im GF-EDITOR gesetzt (siehe Anleitung im Chat):
   Name/Unternehmen/Telefon/E-Mail = „Halbe Breite", Anliegen/DSGVO
   = „Volle Breite". Dieser Block überschreibt §21 + §21b komplett.
   ============================================================ */

/* (a) Container zurück auf Gravitys natives 12-Spalten-Raster */
#top .vc-cta-red .gform_wrapper .gform_fields,
#top .av_color_footer_color .gform_wrapper .gform_fields,
#top .vc-form--on-red .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  grid-column-gap: 26px !important;
  grid-row-gap: 22px !important;
}

/* (b) Default: JEDES Feld volle Breite.
   Neutralisiert die alten §21b nth-child(span 1)-Regeln (höhere
   Specificity + !important + spätere Quellposition gewinnt). */
#top .vc-cta-red .gform_wrapper .gform_fields > .gfield,
#top .av_color_footer_color .gform_wrapper .gform_fields > .gfield,
#top .vc-form--on-red .gform_fields > .gfield {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* (c) Editor-Feldbreiten respektieren (Enfold/GF setzen diese Klassen,
   wenn man im Feld „Erscheinungsbild → Feldbreite" wählt). Specificity
   bewusst höher als (b) durch zusätzliche .gfield--width-* Klasse. */
#top .vc-cta-red .gform_wrapper .gform_fields > .gfield.gfield--width-half,
#top .av_color_footer_color .gform_wrapper .gform_fields > .gfield.gfield--width-half,
#top .vc-form--on-red .gform_fields > .gfield.gfield--width-half {
  grid-column: span 6 !important;
}
#top .vc-cta-red .gform_wrapper .gform_fields > .gfield.gfield--width-third,
#top .av_color_footer_color .gform_wrapper .gform_fields > .gfield.gfield--width-third,
#top .vc-form--on-red .gform_fields > .gfield.gfield--width-third {
  grid-column: span 4 !important;
}
#top .vc-cta-red .gform_wrapper .gform_fields > .gfield.gfield--width-two-thirds,
#top .av_color_footer_color .gform_wrapper .gform_fields > .gfield.gfield--width-two-thirds,
#top .vc-form--on-red .gform_fields > .gfield.gfield--width-two-thirds {
  grid-column: span 8 !important;
}

/* (d) Sicherheitsnetz: Manuelle Halb-Breite ohne Editor-Setting —
   Klasse „vc-field--half" am Feld (GF: Erweitert → CSS-Klasse). */
#top .vc-cta-red .gform_wrapper .gform_fields > .gfield.vc-field--half,
#top .av_color_footer_color .gform_wrapper .gform_fields > .gfield.vc-field--half,
#top .vc-form--on-red .gform_fields > .gfield.vc-field--half {
  grid-column: span 6 !important;
}

/* (e) Enfold 7: GF-Inputs wieder transparent + Unterstrich erzwingen.
   Enfold 7 verpasst Form-Feldern neue Default-Box-Styles → hier
   robust gegen die neue .gravity-theme / .gform-theme Klasse. */
#top .vc-cta-red .gform_wrapper.gravity-theme input,
#top .vc-cta-red .gform_wrapper.gform-theme input,
#top .vc-cta-red .gform_wrapper input,
#top .vc-cta-red .gform_wrapper textarea,
#top .av_color_footer_color .gform_wrapper input,
#top .av_color_footer_color .gform_wrapper textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(247,237,216,0.35) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  padding: 8px 0 !important;
  box-shadow: none !important;
}

/* (f) Mobile: alles volle Breite */
@media (max-width: 767px) {
  #top .vc-cta-red .gform_wrapper .gform_fields > .gfield,
  #top .av_color_footer_color .gform_wrapper .gform_fields > .gfield,
  #top .vc-form--on-red .gform_fields > .gfield {
    grid-column: 1 / -1 !important;
  }
}


/* ============================================================
   ─── 27. HOTFIX CTA-INTRO LÜCKE (08.06.2026) ───
   Problem: Zwischen Eyebrow „Schnelle Anfrage" und der H2
   klafft eine ~80px-Lücke. Ursache: leerer Absatz/<br> im
   Textblock ODER Avia-Element-Abstand zwischen den Elementen.
   Lösung: Abstände in der Intro-Spalte hart normalisieren und
   leere Absätze kollabieren. Eyebrow→H2 fester, definierter
   Abstand (18px), H2→Lede 14px.
   ============================================================ */

/* Spalte oben verankern + Eigen-Abstände raus */
#top .vc-cta-red .flex_cell,
#top .vc-cta-red .flex_cell_inner { vertical-align: top !important; }
#top .vc-cta-red__intro { padding-top: 0 !important; margin-top: 0 !important; }

/* Erstes Element (Eyebrow) bündig nach oben */
#top .vc-cta-red__intro > *:first-child,
#top .vc-cta-red__intro .av_textblock_section:first-child,
#top .vc-cta-red__intro .av_textblock_section:first-child > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Leere Absätze im Intro-Textblock kollabieren (fängt die
   "2x Enter"-Lücke ab, ohne dass man ins HTML muss) */
#top .vc-cta-red__intro .av_textblock_section p:empty,
#top .vc-cta-red__intro .av_textblock p:empty { display: none !important; margin: 0 !important; }
#top .vc-cta-red__intro br + br { display: none !important; }

/* Definierte Abstände Eyebrow → H2 → Lede */
#top .vc-cta-red__intro .vc-eyebrow--on-red { margin: 0 0 18px 0 !important; }
#top .vc-cta-red__intro .vc-h2--on-red { margin: 0 0 14px 0 !important; }
#top .vc-cta-red__intro .vc-lede--on-red { margin: 0 0 28px 0 !important; }


/* ============================================================
   ─── 27b. EYEBROW → H2 LÜCKE, STRUKTURUNABHÄNGIG (08.06.2026) ─
   Restproblem nach §27: Im Live-Build sind Eyebrow + H2 als
   ZWEI getrennte Avia-„Special Heading"-Elemente gebaut. Der
   Abstand kommt dann NICHT vom Tag (das §27 anfasst), sondern
   vom .av-special-heading-WRAPPER (Avia gibt dem margin-top/bottom
   je nach Version/Color-Set). §27 traf den Wrapper nicht — diese
   Lücke sieht man identisch im Mission-Kopf UND im CTA-Intro.

   Lösung: In beiden Kontexten (vc-mission + vc-cta-red__intro)
   ALLE Heading-/Textblock-Wrapper auf margin-top:0 zwingen und
   den EINZIGEN definierten Abstand über die Eyebrow-Wrapper-
   Unterkante geben. Adjazenz-unabhängig (egal was dazwischen liegt).
   ============================================================ */

/* (a) Generelle Nullung aller Wrapper-Eigenabstände im Block */
#top .vc-section.vc-mission .av-special-heading,
#top .vc-section.vc-mission .av_textblock_section,
#top .vc-section.vc-mission .av_textblock,
#top .vc-section.vc-mission .avia_textblock,
#top .vc-cta-red__intro .av-special-heading,
#top .vc-cta-red__intro .av_textblock_section,
#top .vc-cta-red__intro .av_textblock,
#top .vc-cta-red__intro .avia_textblock {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* (b) Der EINE definierte Abstand: Eyebrow-Wrapper-Unterkante.
   Trifft beide Bauweisen — Klasse am .av-special-heading-Wrapper
   ODER am H6-Tag (dann den umschließenden Wrapper über :has()). */
#top .vc-section.vc-mission .av-special-heading.vc-eyebrow,
#top .vc-section.vc-mission .av-special-heading:has(.vc-eyebrow),
#top .vc-cta-red__intro .av-special-heading.vc-eyebrow,
#top .vc-cta-red__intro .av-special-heading:has(.vc-eyebrow),
#top .vc-cta-red__intro .vc-eyebrow--on-red {
  margin: 0 0 18px 0 !important;
}

/* (c) H2-Wrapper klebt direkt unter dem Eyebrow — kein Eigen-Top */
#top .vc-section.vc-mission .av-special-heading:has(.vc-h2),
#top .vc-section.vc-mission .av-special-heading:has(h2),
#top .vc-cta-red__intro .av-special-heading:has(.vc-h2--on-red),
#top .vc-cta-red__intro .av-special-heading:has(h2) {
  margin-top: 0 !important;
}
/* Und auch das Tag selbst (falls Avia inline-margin am H2/H6 setzt) */
#top .vc-section.vc-mission .av-special-heading .av-special-heading-tag,
#top .vc-cta-red__intro .av-special-heading .av-special-heading-tag {
  margin-top: 0 !important;
}

/* (d) H2 → Lede: definierter, kleiner Abstand statt Avia-Default */
#top .vc-section.vc-mission .vc-lede,
#top .vc-cta-red__intro .vc-lede--on-red {
  margin-top: 14px !important;
}

/* (e) Leere Avia-Subheading-/Border-Reste, die Höhe erzeugen, raus */
#top .vc-section.vc-mission .av-special-heading .av-subheading:empty,
#top .vc-cta-red__intro .av-special-heading .av-subheading:empty {
  display: none !important;
}


/* ============================================================
   ─── 28. EINHEITLICHER ABSTAND EYEBROW → HEADLINE (24.06.2026) ─
   Vereinheitlicht den Abstand Subline→Headline über ALLE Sektionen
   (Hero, Mission, Split, CTA-Intro). Eine Quelle der Wahrheit:
   • Eyebrow margin-bottom = 0  (egal ob Special-Heading-Wrapper oder Span)
   • Headline margin-top    = 20px
   → Gap immer exakt 20px, unabhängig von der Bauweise.
   Margin-bottom der Headlines (zur Lede) bleibt unangetastet.
   ============================================================ */

/* (a) Eyebrow: Eigen-Abstand unten raus */
#top .vc-hero .av-special-heading.vc-eyebrow,
#top .vc-hero .vc-eyebrow,
#top .vc-split__body .av-special-heading.vc-eyebrow,
#top .vc-split__body .vc-eyebrow,
#top .vc-section.vc-mission .av-special-heading.vc-eyebrow,
#top .vc-section.vc-mission .vc-eyebrow,
#top .vc-cta-red__intro .av-special-heading.vc-eyebrow,
#top .vc-cta-red__intro .vc-eyebrow {
  margin-bottom: 0 !important;
}

/* (b) Headline: einheitlicher Abstand oben zum Eyebrow */
#top .vc-hero h1,
#top .vc-hero .vc-h1,
#top .vc-hero .av-special-heading.vc-h1 .av-special-heading-tag,
#top .vc-split__body h2,
#top .vc-split__body .vc-h2,
#top .vc-split__body .av-special-heading .av-special-heading-tag,
#top .vc-section.vc-mission h2,
#top .vc-section.vc-mission .vc-h2,
#top .vc-section.vc-mission .av-special-heading:has(.vc-h2) .av-special-heading-tag,
#top .vc-cta-red__intro h2,
#top .vc-cta-red__intro .vc-h2--on-red,
#top .vc-cta-red__intro .av-special-heading .av-special-heading-tag {
  margin-top: 20px !important;
}
/* Auch die Avia-Heading-WRAPPER nivellieren, damit kein Doppel-Abstand
   entsteht (Wrapper-margin-top 0 → der definierte Abstand kommt vom Tag) */
#top .vc-section.vc-mission .av-special-heading:has(.vc-h2),
#top .vc-split__body .av-special-heading:not(.vc-eyebrow),
#top .vc-cta-red__intro .av-special-heading:not(.vc-eyebrow) {
  margin-top: 0 !important;
}


/* ============================================================
   ─── 29. UNTERSEITE „ERFOLG MIT HERZ" (Schritt 4) ───────────
   Architektur-Entscheidung (25.06.2026):
   • Bilder NUR als Klammer: Hero (oben) + Talk (unten) — beide
     „Bild links / Text rechts" → nutzen die bestehenden Module
     §8 vc-hero bzw. §16 vc-talk. KEIN gespiegeltes Bild-rechts.
   • Alle Themen-Blöcke dazwischen sind ZENTRIERTE, container-
     begrenzte Code-Block-Sektionen (kein Full-Bleed-Rand → keine
     Abstands-Fallen über die Screengrößen).
   Jede dieser Sektionen = 1 Color Section + 1 Code-Block mit
   einem .vc-eh-Wrapper. Markup-Snippets stehen in
   handoff/Schritt-4-ErfolgMitHerz.md.
   ============================================================ */

/* — Gemeinsamer zentrierter Block (Eyebrow + H2 + Lede mittig) — */
#top .vc-eh { text-align: center; }
#top .vc-eh__head { max-width: 760px; margin: 0 auto; }
#top .vc-eh .vc-eyebrow { justify-content: center; }
#top .vc-eh h2,
#top .vc-eh .vc-h2 {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif !important;
  color: var(--vc-ink) !important;
  margin: 20px 0 0 !important;          /* Eyebrow → H2 = 20px, wie §28 */
}
#top .vc-eh .vc-lede {
  margin: 14px auto 0 !important;       /* H2 → Lede = 14px */
  max-width: 62ch;
}
#top .vc-eh__cta { margin-top: 40px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }  /* zentrierte CTA-Reihe (vorher kein Flex → Buttons stapelten) */

/* Mobil: vc-eh-Block sauber zentriert + volle Breite (Code-Block-Spalten bekommen
   in Enfold sonst asymmetrisches Spalten-Padding → Block wirkt schmal/links). */
@media (max-width: 989px) {
  #top .vc-eh { text-align: center !important; }
  #top .vc-eh__head { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
  #top .vc-eh .vc-lede { margin-left: auto !important; margin-right: auto !important; }
  #top .vc-stats-row { margin-left: auto !important; margin-right: auto !important; }
}

/* Auf rotem Grund (Sektion 03 „Was uns stark macht") hell */
#top .vc-eh--on-red h2,
#top .vc-eh--on-red .vc-h2 { color: var(--vc-on-red) !important; }
#top .vc-eh--on-red .vc-lede { color: var(--vc-on-red) !important; opacity: .9; }

/* vc-btn invertiert auf rotem Grund (cremeweiß) */
#top a.vc-btn--on-red,
#top .vc-eh--on-red a.vc-btn {
  background: var(--vc-paper) !important;
  color: var(--vc-red) !important;
  border-color: var(--vc-paper) !important;
}
#top a.vc-btn--on-red:hover,
#top .vc-eh--on-red a.vc-btn:hover {
  background: #ffffff !important;
  color: var(--vc-red) !important;
}

/* — 29.1 ZITAT-BLOCK (Sektion 01 „Was uns bewegt") — */
#top .vc-quote {
  max-width: 820px;
  margin: 56px auto 0;
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid var(--vc-rule);
}
#top .vc-quote blockquote {
  margin: 0;
  padding-left: 0 !important;
  border-left: 0 !important;
  border: 0 !important;
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--vc-red);
}
#top .vc-quote figcaption {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vc-ink-mute);
}

/* — 29.2 NUMMERN-REIHE (Sektion 02 „Wie wir arbeiten") — */
#top .vc-steps {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--vc-rule);
  border-bottom: 1px solid var(--vc-rule);
  text-align: left;
}
#top .vc-steps__item { padding: 40px 28px; }
#top .vc-steps__item + .vc-steps__item { border-left: 1px solid var(--vc-rule); }
#top .vc-steps__n {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif;
  font-size: 30px;
  line-height: 1;
  color: var(--vc-red);
}
#top .vc-steps__t {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vc-ink-soft);
}
@media (max-width: 989px) {
  #top .vc-steps { grid-template-columns: 1fr 1fr; }
  #top .vc-steps__item + .vc-steps__item { border-left: 0; }
  #top .vc-steps__item:nth-child(n+3) { border-top: 1px solid var(--vc-rule); }
}
@media (max-width: 600px) {
  #top .vc-steps { grid-template-columns: 1fr; }
  #top .vc-steps__item:nth-child(n+2) { border-top: 1px solid var(--vc-rule); }
}

/* — 29.3 KENNZAHLEN-BAND (Sektion 03 „Was uns stark macht", auf Rot) — */
#top .vc-stats-row {
  margin-top: 56px;
  width: 100%;
  display: flex;            /* Flex statt grid(4) → 3 ODER 4 Zellen füllen immer die volle Breite */
  flex-wrap: wrap;
  border-top: 1px solid var(--vc-rule-on-red);
  border-bottom: 1px solid var(--vc-rule-on-red);
}
#top .vc-stats-row__cell { flex: 1 1 0; min-width: 180px; padding: 40px 24px; text-align: center; }
#top .vc-stats-row__cell + .vc-stats-row__cell { border-left: 1px solid var(--vc-rule-on-red); }
#top .vc-stats-row__n {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif;
  font-size: 46px;
  line-height: 1;
  color: var(--vc-on-red);
}
#top .vc-stats-row__n--sm { font-size: 28px; line-height: 1.3; }
#top .vc-stats-row__l {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vc-on-red-mute);
}
/* Variante auf HELLEM Grund (Cream/Paper) — sonst cremefarbene Schrift unsichtbar */
#top .vc-stats-row--on-light { border-top-color: var(--vc-rule); border-bottom-color: var(--vc-rule); }
#top .vc-stats-row--on-light .vc-stats-row__cell + .vc-stats-row__cell { border-left-color: var(--vc-rule); }
#top .vc-stats-row--on-light .vc-stats-row__n { color: var(--vc-red); }
#top .vc-stats-row--on-light .vc-stats-row__l { color: var(--vc-ink-mute); }
@media (max-width: 989px) {
  #top .vc-stats-row__cell { flex: 1 1 50%; }
  #top .vc-stats-row__cell:nth-child(odd) { border-left: 0; }
  #top .vc-stats-row__cell:nth-child(n+3) { border-top: 1px solid var(--vc-rule-on-red); }
  #top .vc-stats-row--on-light .vc-stats-row__cell:nth-child(n+3) { border-top-color: var(--vc-rule); }
}
@media (max-width: 600px) {
  #top .vc-stats-row__cell { flex: 1 1 100%; }
  #top .vc-stats-row__cell:nth-child(n+2) { border-top: 1px solid var(--vc-rule-on-red); border-left: 0; }
  #top .vc-stats-row--on-light .vc-stats-row__cell:nth-child(n+2) { border-top-color: var(--vc-rule); }
}

/* — 29.4  2-KARTEN-RASTER (Sektion 04 Badges + 05 Standorte) — */
#top .vc-cards2 {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
@media (max-width: 700px) { #top .vc-cards2 { grid-template-columns: 1fr; } }

/* Badge-Karte (04 „Warum man uns vertraut") */
#top .vc-badge {
  background: var(--vc-paper);
  border: 1px solid var(--vc-rule);
  padding: 40px 36px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  height: 100%;
}
#top .vc-badge__icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border: 1px solid var(--vc-red);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--vc-red);
}
#top .vc-badge__icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; }
#top .vc-badge__org {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vc-ink-mute);
}
#top .vc-badge__title {
  margin: 6px 0 8px;
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif !important;
  font-size: 24px;
  line-height: 1.2;
  color: var(--vc-ink);
}
#top .vc-badge__desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--vc-ink-soft); }

/* Standort-Karte (05 „Team & Ansprechpartner") */
#top .vc-locc {
  background: var(--vc-cream-soft);
  border: 1px solid var(--vc-rule);
  padding: 36px;
  height: 100%;
}
#top .vc-locc__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vc-red);
  font-weight: 600;
}
#top .vc-locc__city {
  margin: 8px 0 6px;
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif !important;
  font-size: 26px;
  color: var(--vc-ink);
}
#top .vc-locc__addr { font-size: 14px; line-height: 1.65; color: var(--vc-ink-soft); }


/* ============================================================
   §30 — UNTERSEITE „ARBEITNEHMERÜBERLASSUNG" (Schritt 4.2)
   Neue, containerbegrenzte Module (kein Full-Bleed). Bauplan:
   handoff/Schritt-4-Arbeitnehmerueberlassung.md
   ============================================================ */

/* — 30.1  PRINZIP — 3 Rollen-Karten (Sektion 01) — */
#top .vc-cards3 {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
#top .vc-roli {
  background: var(--vc-cream-soft);
  border: 1px solid var(--vc-rule);
  padding: 36px 32px;
  height: 100%;
}
#top .vc-roli__role {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vc-red);
}
#top .vc-roli__title {
  margin: 10px 0 10px;
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif !important;
  font-size: 21px;
  line-height: 1.25;
  color: var(--vc-ink);
}
#top .vc-roli__desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--vc-ink-soft); }
@media (max-width: 850px) { #top .vc-cards3 { grid-template-columns: 1fr; } }

/* — 30.2  VERTRAUENSSIGNALE — 4 Kennzahlen auf hellem Grund (Sektion 01) — */
#top .vc-statline {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--vc-rule);
  border-bottom: 1px solid var(--vc-rule);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
#top .vc-statline__cell { padding: 32px 24px; text-align: center; }
#top .vc-statline__cell + .vc-statline__cell { border-left: 1px solid var(--vc-rule); }
#top .vc-statline__n {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif;
  font-size: 40px;
  line-height: 1;
  color: var(--vc-red);
}
#top .vc-statline__n--sm { font-size: 26px; line-height: 1.3; }
#top .vc-statline__l {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vc-ink-mute);
}
@media (max-width: 850px) {
  #top .vc-statline { grid-template-columns: 1fr 1fr; }
  #top .vc-statline__cell:nth-child(odd) { border-left: 0; }
  #top .vc-statline__cell:nth-child(n+3) { border-top: 1px solid var(--vc-rule); }
}
@media (max-width: 560px) {
  #top .vc-statline { grid-template-columns: 1fr; }
  #top .vc-statline__cell:nth-child(n+2) { border-top: 1px solid var(--vc-rule); }
}

/* — 30.3  SPLIT — 2 Zielgruppen-Karten (Deep-Pages, IN .vc-eh) —
   WICHTIG: auf .vc-eh gescoped, sonst Kollision mit der Startseiten-
   Split (.av-layout-grid-container.vc-split, Schritt 3). */
#top .vc-eh .vc-split {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
#top .vc-splitc {
  background: var(--vc-paper);
  border: 1px solid var(--vc-rule);
  padding: 44px 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#top .vc-splitc__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--vc-red);
  margin-bottom: 16px;
}
#top .vc-splitc__title {
  margin: 0 0 16px;
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif !important;
  font-weight: 400 !important;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.2;
  color: var(--vc-ink);
}
#top .vc-splitc__desc { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--vc-ink-soft); }
#top .vc-splitc__cta { margin-top: auto; padding-top: 6px; }
@media (max-width: 850px) { #top .vc-eh .vc-split { grid-template-columns: 1fr; } }

/* Tick-Liste (Strich-Marker) — auch in Split-Karten genutzt */
#top .vc-ticks { list-style: none !important; padding: 0 !important; margin: 0 0 4px !important; display: flex; flex-direction: column; gap: 10px; }
#top .vc-ticks li {
  list-style: none !important;
  margin: 0 !important;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55 !important;
  color: var(--vc-ink-soft);
}
#top .vc-ticks li::before {
  content: "";
  flex: 0 0 14px;
  height: 1px;
  margin-top: 10px;
  background: var(--vc-red);
}

/* — 30.4  WARUM VON CAPRIVI — 6 Leistungen auf Rot (Sektion 03) — */
#top .vc-why {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--vc-rule-on-red);
  border: 1px solid var(--vc-rule-on-red);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
#top .vc-why__item { background: var(--vc-red); padding: 34px 30px; }
#top .vc-why__n {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif;
  font-size: 22px;
  line-height: 1;
  color: var(--vc-on-red-mute);
}
#top .vc-why__t { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--vc-on-red); }
@media (max-width: 850px) { #top .vc-why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #top .vc-why { grid-template-columns: 1fr; } }

/* — 30.5  FAQ-TEASER — Q&A-Liste (Sektion 04) — */
#top .vc-faq {
  margin-top: 48px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--vc-rule);
  text-align: left;
}
#top .vc-faq__item { padding: 32px 0; border-bottom: 1px solid var(--vc-rule); }
#top .vc-faq__q {
  margin: 0 0 10px;
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif !important;
  font-weight: 400 !important;
  font-size: 21px;
  line-height: 1.3;
  color: var(--vc-ink);
}
#top .vc-faq__a { margin: 0; font-size: 15px; line-height: 1.6; color: var(--vc-ink-soft); max-width: 72ch; }


/* ============================================================
   §31 — UNTERSEITE „EXECUTIVE SEARCH" (Schritt 4.3)
   Neue, containerbegrenzte Module. Bauplan:
   handoff/Schritt-4-ExecutiveSearch.md
   ============================================================ */

/* — 31.1  FEATURE-RASTER — 4 Punkte „Wie wir vorgehen" (Sektion 01) — */
#top .vc-feat4 {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--vc-rule);
  border-left: 1px solid var(--vc-rule);
  text-align: left;
}
#top .vc-feat4__item {
  padding: 32px 34px;
  border-right: 1px solid var(--vc-rule);
  border-bottom: 1px solid var(--vc-rule);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vc-ink-soft);
}
#top .vc-feat4__item::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 1px;
  margin-top: calc(0.8em - 0.5px);
  background: var(--vc-red);
}
@media (max-width: 700px) { #top .vc-feat4 { grid-template-columns: 1fr; } }

/* — 31.2  PROZESS-FLOW — nummerierte Schritte auf Rot (Sektion 03) — */
#top .vc-flow {
  margin: 60px auto 0;
  padding: 0;
  list-style: none;
  max-width: 860px;
  border-top: 1px solid var(--vc-rule-on-red);
  text-align: left;
}
#top .vc-flow li {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 24px 4px;
  border-bottom: 1px solid var(--vc-rule-on-red);
}
#top .vc-flow__n {
  flex: 0 0 auto;
  min-width: 42px;
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif;
  font-size: 24px;
  line-height: 1;
  color: var(--vc-on-red-mute);
}
#top .vc-flow__t { font-size: 17px; line-height: 1.5; color: var(--vc-on-red); }
@media (max-width: 560px) {
  #top .vc-flow li { gap: 16px; }
  #top .vc-flow__n { min-width: 34px; font-size: 20px; }
  #top .vc-flow__t { font-size: 15px; }
}


/* ============================================================
   §32 — HAUPTSEITE „KONTAKT" (Schritt 5)
   Gravity Form auf hellem Grund (Paper) + Standort-Layout.
   Bauplan: handoff/Schritt-5-Kontakt.md
   ============================================================ */

/* — 32.1  FORMULAR-RAHMEN — die GF in eine weiße Karte setzen — */
#top .vc-formwrap {
  max-width: 760px;
  margin: 48px auto 0;
  background: #ffffff;
  border: 1px solid rgba(31,26,20,0.14);
  padding: clamp(28px, 4vw, 48px);
}

/* — 32.2  GRAVITY-FORM-FELDER (auf Paper, flaches Cream-Design) — */
#top .vc-gform .gfield_label,
#top .vc-formwrap .gfield_label {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--vc-ink-soft) !important;
  margin-bottom: 7px !important;
}
#top .vc-formwrap input[type="text"],
#top .vc-formwrap input[type="email"],
#top .vc-formwrap input[type="tel"],
#top .vc-formwrap textarea,
#top .vc-formwrap select {
  width: 100% !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(31,26,20,0.22) !important;
  background: #ffffff !important;
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  color: var(--vc-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .18s ease;
}
#top .vc-formwrap input:focus,
#top .vc-formwrap textarea:focus,
#top .vc-formwrap select:focus { border-color: var(--vc-red) !important; }
#top .vc-formwrap textarea { resize: vertical; min-height: 120px; }

/* Rollen-Auswahl (GF Radio-Buttons) als segmentierte Schalter —
   im GF-Editor das Radio-Feld „Ich bin …" mit CSS Ready Class `vc-roleseg` versehen. */
#top .vc-roleseg .gfield_radio {
  display: flex !important;
  gap: 10px;
  flex-wrap: wrap;
}
#top .vc-roleseg .gchoice {
  flex: 1 1 0;
  margin: 0 !important;
}
#top .vc-roleseg .gchoice input { position: absolute; opacity: 0; pointer-events: none; }
#top .vc-roleseg .gchoice label {
  display: block;
  text-align: center;
  padding: 12px 18px;
  border: 1px solid rgba(90,22,32,0.4);
  color: var(--vc-red);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all .18s ease;
}
#top .vc-roleseg .gchoice input:checked + label {
  background: var(--vc-red);
  color: #ffffff;
  border-color: var(--vc-red);
}

/* DSGVO-Zeile + Submit */
#top .vc-formwrap .gfield_consent_label,
#top .vc-formwrap .ginput_container_consent label { font-size: 13px !important; line-height: 1.5 !important; color: var(--vc-ink-soft) !important; }
#top .vc-formwrap .gform_footer input[type="submit"] {
  background: var(--vc-red) !important;
  color: #ffffff !important;
  border: 1px solid var(--vc-red) !important;
  border-radius: 0 !important;
  padding: 15px 30px !important;
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer;
  transition: background .2s ease;
}
#top .vc-formwrap .gform_footer input[type="submit"]:hover { background: var(--vc-red-hover) !important; }

/* — 32.3  ERREICHBARKEIT + STANDORTE — 2-Spalten — */
#top .vc-contact2 {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
@media (max-width: 800px) { #top .vc-contact2 { grid-template-columns: 1fr; } }
#top .vc-reach {
  background: var(--vc-paper);
  border: 1px solid var(--vc-rule);
  padding: 40px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
#top .vc-reach__label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vc-ink-mute); }
#top .vc-reach__val { font-size: 18px; color: var(--vc-ink); text-decoration: none; }
#top a.vc-reach__val:hover { color: var(--vc-red); }
#top .vc-locstack { display: flex; flex-direction: column; gap: 24px; }
#top .vc-locc--sm { background: var(--vc-paper); border: 1px solid var(--vc-rule); padding: 32px 36px; }
#top .vc-locc--sm .vc-locc__city { font-size: 24px; margin: 6px 0; }

/* — 32.4  KARTEN-PLATZHALTER (consent-konform) — */
#top .vc-mapwrap {
  margin-top: 24px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  min-height: 300px;
  border: 1px solid var(--vc-rule);
  background:
    repeating-linear-gradient(135deg, rgba(31,26,20,0.04) 0, rgba(31,26,20,0.04) 2px, transparent 2px, transparent 14px),
    #E5DAC4;
  display: grid;
  place-items: center;
  text-align: center;
}


/* ============================================================
   §33 — TIEFSEITE „FÜR ARBEITGEBER · ARBEITNEHMERÜBERLASSUNG"
   (Schritt 6) — kleine Helfer; Rest wiederverwendet (§29/§30).
   Bauplan: handoff/Schritt-6-FuerArbeitgeber-Arbeitnehmerueberlassung.md
   ============================================================ */

/* — 33.1  BREADCRUMB (im Hero) — */
#top .vc-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vc-ink-mute);
  margin-bottom: 4px;
}
#top .vc-crumb a { color: var(--vc-red); text-decoration: none; }
#top .vc-crumb a:hover { text-decoration: underline; }

/* — 33.2  4-SPALTEN-KARTEN (Sektion 01 „Situationen") — */
#top .vc-cards4 {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
#top .vc-cards4 .vc-roli { background: var(--vc-cream-soft); border: 1px solid var(--vc-rule); padding: 34px 30px; height: 100%; }
#top .vc-roli__n {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif;
  font-size: 26px;
  line-height: 1;
  color: var(--vc-red);
  margin-bottom: 10px;
}
@media (max-width: 980px) { #top .vc-cards4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #top .vc-cards4 { grid-template-columns: 1fr; } }

/* — 33.3  3-SPALTEN-VARIANTE der Nummern-Reihe (Sektion 02) — */
#top .vc-steps3 { grid-template-columns: repeat(3, 1fr); max-width: 1080px; margin-left: auto; margin-right: auto; }
#top .vc-steps__h {
  margin: 16px 0 8px;
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif;
  font-size: 20px;
  line-height: 1.25;
  color: var(--vc-ink);
}
@media (max-width: 760px) {
  #top .vc-steps3 { grid-template-columns: 1fr; }
  #top .vc-steps3 .vc-steps__item + .vc-steps__item { border-left: 0; border-top: 1px solid var(--vc-rule); }
}
#top .vc-eh__note { margin: 32px auto 0; max-width: 62ch; text-align: center; font-size: 15px; line-height: 1.6; color: var(--vc-ink-soft); }

/* — 33.4  CHECKLISTE 2-spaltig auf Rot (Sektion 03 „Was wir übernehmen") — */
#top .vc-checklist {
  margin: 60px auto 0 !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  text-align: left;
}
/* Im Split/Talk/Hero-Textkörper enger an die Lede (dort ist der Block vertikal
   zentriert → 60px wirken zu groß). Wie in allen anderen Textspalten. */
#top .vc-split .vc-checklist,
#top .vc-hero .vc-checklist,
#top .vc-talk .vc-checklist {
  margin-top: 28px !important;
}
#top .vc-checklist li {
  list-style: none !important;
  margin: 0 !important;
  padding: 20px 0 !important;          /* Enfold-List-Reset überschreiben */
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 16px;
  line-height: 1.5 !important;
  color: var(--vc-ink);
  border-bottom: 1px solid var(--vc-rule);   /* feine Trennlinie wie im Mockup */
}
#top .vc-checklist li::before {
  content: "";
  flex: 0 0 14px;          /* eigene 14px-Spalte links — Strich liegt nie im Text */
  height: 1px;
  margin-top: 11px;        /* mittig auf der ersten Textzeile (line-height 1.5 × 16px) */
  background: var(--vc-red);
}
#top .vc-checklist--on-red li { color: var(--vc-on-red); border-bottom: 1px solid var(--vc-rule-on-red); }
#top .vc-checklist--on-red li::before { background: var(--vc-on-red-mute); }
@media (max-width: 700px) { #top .vc-checklist { grid-template-columns: 1fr; gap: 0; } }


/* ============================================================
   §34 — TIEFSEITE „FÜR PFLEGEFACHKRÄFTE · ARBEITNEHMERÜBERLASSUNG"
   (Schritt 7) — Gehaltsliste + Prämien-Band auf Rot.
   Bauplan: handoff/Schritt-7-FuerPflegekraefte-Arbeitnehmerueberlassung.md
   Rest wiederverwendet: vc-cards4 (§33), vc-checklist (§33, hell),
   vc-steps (§29), vc-faq (§30), vc-talk, vc-crumb (§33).
   ============================================================ */

/* — 34.1  GEHALTSLISTE (Sektion 03, auf Rot) — */
#top .vc-pay {
  margin: 56px auto 0;
  max-width: 760px;
  border-top: 1px solid var(--vc-rule-on-red);
}
#top .vc-pay__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--vc-rule-on-red);
}
#top .vc-pay__role { font-size: 17px; line-height: 1.4; color: var(--vc-on-red); }
#top .vc-pay__amount {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif;
  font-size: 24px;
  line-height: 1;
  color: var(--vc-on-red);
  white-space: nowrap;
}

/* — 34.2  PRÄMIEN-BAND (Sektion 03, 3 Zellen auf Rot) — */
#top .vc-perks {
  margin: 40px auto 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--vc-rule-on-red);
  border: 1px solid var(--vc-rule-on-red);
}
#top .vc-perks__cell { background: var(--vc-red); padding: 26px 24px; text-align: center; }
#top .vc-perks__val {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif;
  font-size: 24px;
  line-height: 1.15;
  color: var(--vc-on-red);
}
#top .vc-perks__label { margin-top: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vc-on-red-mute); }
#top .vc-pay__note { margin: 24px auto 0; max-width: 62ch; text-align: center; font-size: 13px; line-height: 1.6; color: var(--vc-on-red); opacity: 0.7; }
@media (max-width: 620px) {
  #top .vc-perks { grid-template-columns: 1fr; }
  #top .vc-pay__row { flex-direction: column; align-items: flex-start; gap: 4px; }
}


/* ============================================================
   §35 — SEO-LP „STELLENANZEIGEN PFLEGE" (Schritt 14)
   Sektion 02 „Berufsgruppen & Verdienst": gestapelte Rollen-Karten.
   Bauplan: handoff/Schritt-14-Stellen-Pflege.md · Mockup: Stellenanzeigen Pflege.dc.html
   (Rest wiederverwendet: vc-eh §29, vc-eyebrow, vc-lede, vc-btn.)
   ============================================================ */

/* — 35.1  ROLLEN-LISTE (gestapelte Karten) — */
#top .vc-rolelist {
  margin: 56px auto 0;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#top .vc-role {
  background: var(--vc-paper);
  border: 1px solid var(--vc-rule);
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
#top .vc-role__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
#top .vc-role__title {
  margin: 0;
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif !important;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  color: var(--vc-ink);
}
#top .vc-role__pay {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif;
  font-size: 26px;
  line-height: 1;
  color: var(--vc-red);
  white-space: nowrap;
}
#top .vc-role__cond { font-size: 13px; letter-spacing: 0.04em; color: var(--vc-red); }
#top .vc-role__task {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--vc-rule);
  font-size: 14px;
  line-height: 1.6;
  color: var(--vc-ink-soft);
}
#top .vc-role__tasklabel {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vc-ink-mute);
}


/* ============================================================
   §36 — STELLENBÖRSE PFLEGE · persy / GermanPersonnel JobWidget 2.9
   (Schritt 14, /stellenboerse-pflege/) — Default-Look (orange/grau, Open Sans,
   Pillen-Buttons, Icons, Radius/Stern/Datum) 1:1 auf das von-Caprivi-Layout bringen.

   Embed im Code-/HTML-Element der Seite (NICHT hier) — CI-Farbe + Platzhalter via JS:
     <link rel="stylesheet" href="//statics.germanpersonnel.de/widget/2.9/stylesheets/components.css" name="cs-widget-stylesheet">
     <script src="//statics.germanpersonnel.de/widget/2.9/scripts/components.js"></script>
     <div id="widget"></div>
     <script>
       JW.create({ widgetType:'basic', container:'#widget', jobExchange:'f2L1v3d0',
         options:{ ciColor:'#5A1620', jobadInfo:{ "date-created":false,"date-modified":false,"date-published":false } } });
       (function p(){var w=document.querySelector('#widget .cs-input--what'),e=document.querySelector('#widget .cs-input--where');
         if(w&&e){w.placeholder='Beruf / Stichwort';e.placeholder='Ort / Region';}else setTimeout(p,200);})();
     </script>
   Regeln überschreiben components.css (#widget = höhere Spezifität). Bei persy-Versionswechsel (≠2.9) Klassen prüfen.
   ============================================================ */

/* --- SUCHLEISTE (Default grau #E6E7E9) → Cream --- */
#top #widget .cs-widget-simple { background: var(--vc-cream) !important; padding: 30px 28px !important; }
#top #widget .cs-widget-simple__location-wrapper { border: 1px solid rgba(31,26,20,0.18) !important; background: var(--vc-paper) !important; }
#top #widget .cs-input {
  background: var(--vc-paper) !important;
  border: 1px solid rgba(31,26,20,0.18) !important;
  border-radius: 0 !important;
  color: var(--vc-ink) !important;
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-size: 16px !important;
}
#top #widget .cs-input--what, #top #widget .cs-input--where { padding-left: 18px !important; }
#top #widget .cs-input::placeholder { color: var(--vc-ink-mute) !important; font-family: 'montserrat-custom','Montserrat',sans-serif !important; font-style: normal !important; }
/* Feld-Icons (Koffer/Pin) raus */
#top #widget .cs-input--what ~ .cs-icon, #top #widget .cs-input--where ~ .cs-icon { display: none !important; }
/* Radius-Box, Trenner & „Suche zurücksetzen" raus */
#top #widget .cs-widget-simple__radius-wrapper,
#top #widget .cs-widget-simple__separator,
#top #widget .cs-widget-simple__clear-wrapper { display: none !important; }
/* „SUCHEN"-Button → Burgundy, eckig, ohne Lupe */
#top #widget .cs-button--search,
#top #widget .cs-color--background {
  background: var(--vc-red) !important;
  color: var(--vc-on-red) !important;
  border-radius: 0 !important;
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  padding: 10px 34px !important;
  width: auto !important;
  min-width: 180px !important;
}
#top #widget .cs-button--search:hover { background: var(--vc-red-hover) !important; }
#top #widget .cs-button--search .cs-icon { display: none !important; }
/* Vorgefilterte Berufsgruppen-Unterseite: Script belegt das Beruf-Feld mit der Rolle vor + readonly
   (Seite IST der Filter); Ort bleibt frei filterbar. Optische Markierung als „fixiert". */
#top #widget.vc-fixed .cs-input--what[readonly] {
  background: var(--vc-cream-soft) !important;
  color: var(--vc-red) !important;
  font-weight: 600 !important;
  cursor: default !important;
}

/* --- ERGEBNIS-KOPFZEILE: Zähler + Sortierung raus, Pagination bleibt --- */
#top #widget .cs-widget-results__counter,
#top #widget .cs-widget-results__sort { display: none !important; }
#top #widget .cs-color--primary { color: var(--vc-red) !important; }
/* Pagination: helle Default-Unterstriche (4px border-bottom) komplett weg — an Zahlen, Pfeilen UND den …-Punkten */
#top #widget .cs-pagination__number-text,
#top #widget .cs-pagination__number,
#top #widget .cs-pagination__button,
#top #widget .cs-pagination__dots { border-bottom-color: transparent !important; }
/* aktive Zahl: roter Strich */
#top #widget .cs-pagination__number--active,
#top #widget .cs-pagination__number:hover { color: var(--vc-red) !important; }
#top #widget .cs-pagination__number--active .cs-pagination__number-text,
#top #widget .cs-pagination__number:hover .cs-pagination__number-text { color: var(--vc-red) !important; border-bottom-color: var(--vc-red) !important; }
/* Pfeile < > : nur bei Hover roter Strich */
#top #widget .cs-pagination__button:hover { color: var(--vc-red) !important; border-bottom-color: var(--vc-red) !important; }

/* --- ERGEBNISLISTE --- */
#top #widget .cs-widget-results { padding: 0 !important; }
#top #widget .cs-widget-results__results { background: transparent !important; }
#top #widget .cs-result__link { border-bottom: 1px solid var(--vc-rule) !important; padding-left: 30px !important; padding-right: 10px !important; }
#top #widget .cs-result:first-child { border-top: 1px solid var(--vc-rule) !important; }
/* Hover-Akzentbalken → Burgundy, dünner (2px) und mit Abstand zum Text (link padding-left 30px) */
#top #widget .cs-result__link:before { background: var(--vc-red) !important; width: 2px !important; }
/* Titel → Libre Baskerville, Icon raus */
#top #widget .cs-result__title {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif !important;
  font-weight: 400 !important;
  color: var(--vc-ink) !important;
  font-size: 22px !important;
  padding-left: 0 !important;
}
#top #widget .cs-result__title .cs-icon { display: none !important; }
#top #widget .cs-result__link:hover .cs-result__title { color: var(--vc-red) !important; }
/* Ort → Montserrat gedämpft, Pin raus */
#top #widget .cs-result__location-details { padding-left: 0 !important; font-family: 'montserrat-custom','Montserrat',sans-serif !important; color: var(--vc-ink-mute) !important; }
#top #widget .cs-result__location-details .cs-icon { display: none !important; }
#top #widget .cs-result__location-item { font-family: 'montserrat-custom','Montserrat',sans-serif !important; color: var(--vc-ink-mute) !important; }
/* Dezente Zusatz-Zeile pro Stelle (echte persy-Felder: Anstellungsart + „Neu" ≤14 Tage) — vom Code-Block-Script ergänzt */
#top #widget .vc-jobmeta {
  margin-top: 4px;
  font-family: 'montserrat-custom','Montserrat',sans-serif !important;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--vc-red);
  display: flex;
  align-items: center;
  gap: 8px;
}
#top #widget .vc-jobmeta__new {
  background: var(--vc-red);
  color: var(--vc-on-red);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
}
/* Datum + Stern raus */
#top #widget .cs-result__date, #top #widget .cs-result__favorite { display: none !important; }
/* Reservierten Leerraum des leeren Apply-Wrappers entfernen */
#top #widget .cs-result__apply-button-wrapper:empty { display: none !important; }
#top #widget .cs-result__row--main-info { margin-bottom: 0 !important; }
/* „Zur Stelle →"-Button rechts (ganze Zeile ist ohnehin ein Link) */
#top #widget .cs-result__column--small { padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; }
#top #widget .cs-result__column--small:after {
  content: 'Zur Stelle \2192'; display: inline-block; white-space: nowrap;
  border: 1px solid var(--vc-red); color: var(--vc-red); background: transparent;
  padding: 11px 20px; font-family: 'montserrat-custom','Montserrat',sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  transition: background-color .15s linear, color .15s linear;
}
#top #widget .cs-result__link:hover .cs-result__column--small:after { background: var(--vc-red); color: var(--vc-on-red); }

/* — Enfold-Theme-Reste neutralisieren (Listenpunkte an den <li>-Jobzeilen) — */
#top #widget ul, #top #widget ol,
#top #widget .jobad-list,
#top #widget .cs-widget-results__results { list-style: none !important; }
#top #widget li, #top #widget .jobad-item, #top #widget .cs-result {
  list-style: none !important; list-style-type: none !important; background-image: none !important;
}
#top #widget li::before, #top #widget li::after,
#top #widget .jobad-item::before { content: none !important; background: none !important; display: none !important; }
#top #widget li::marker, #top #widget .jobad-item::marker { content: "" !important; }


/* ============================================================
   §37 — WERTE-ICONS „Erfolg mit Herz" (Startseite, Sektion 04, auf Rot)
   Line-Icons (Layout 7) über jedem der 4 Werte im vc-stats-row.
   Auf Rot → helle Icons; auf hellem Grund (--on-light) → rote Icons.
   HTML/Bauplan: handoff/Schritt-16-Werte-Icons-Startseite.md
   ============================================================ */
#top .vc-stats-row__ico {
  width: 48px; height: 48px; margin: 0 auto 18px;
  color: var(--vc-on-red-mute, #E2C7B5);
  display: block;
}
#top .vc-stats-row__ico svg { width: 100%; height: 100%; display: block; }
#top .vc-stats-row--on-light .vc-stats-row__ico { color: var(--vc-red); }


/* ============================================================
   §38 — STARTSEITE NEUTRAL (/startseite/) — Layout-7-Fassung, neutrale Texte.
   Bauplan: handoff/Schritt-17-Startseite-neutral.md · Mockup: Startseite (neutral).dc.html
   Reuse: vc-hero (Hero + Split-Haltung), vc-talk (Kontakt), vc-eh/vc-cards2/vc-aud-card
   (Audience), vc-stats-row__ico (§37). Neu hier: roter CTA-Block, Pillars, Inline-Stats.
   ============================================================ */

/* — Roter CTA-Block „Schnelle Anfrage" (Color Section Footer/Burgundy) — */
#top .vc-cta-red { text-align: left; }
#top .vc-cta-red .vc-eyebrow { justify-content: flex-start; }
#top .vc-cta-red .vc-h2 { color: var(--vc-on-red) !important; margin: 16px 0 0 !important; }
#top .vc-cta-red .vc-lede { color: var(--vc-on-red) !important; opacity: 0.9; margin: 16px 0 0 !important; max-width: 52ch; }
#top .vc-cta-red__contact .vc-btn { margin-top: 22px; align-self: flex-start; }
#top .vc-cta-red__grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start;
}
#top .vc-cta-red__contact { display: flex; flex-direction: column; }
#top .vc-cta-red__contact .row {
  display: flex; justify-content: space-between; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--vc-rule-on-red); font-size: 15px; color: var(--vc-on-red);
}
#top .vc-cta-red__contact .row:last-child { border-bottom: 0; }
#top .vc-cta-red__contact .row .lbl { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vc-on-red-mute); }
#top .vc-cta-red__contact .row a { color: var(--vc-on-red); text-decoration: none; }

#top .vc-svc2 { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#top .vc-svc-card { border: 1px solid var(--vc-rule-on-red); padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; }
#top .vc-svc-card__num { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vc-on-red-mute); }
#top .vc-svc-card__title { font-family: 'libre-baskerville-custom', serif; font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--vc-on-red); margin: 0; }
#top .vc-svc-card__desc { margin: 0; font-size: 15px; line-height: 1.6; color: var(--vc-on-red); opacity: 0.86; }
#top .vc-svc-card__link { margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--vc-on-red); text-decoration: none; }

/* — Mission-Pillars (4, zentriert, dezente Trennlinien; auf hellem Grund) — */
#top .vc-pillars { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: repeat(4, 1fr); }
#top .vc-pillar {
  padding: 8px clamp(20px, 2vw, 30px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
  border-left: 1px solid var(--vc-rule);
}
#top .vc-pillar:first-child { border-left: 0; }
#top .vc-pillar__ico { width: 48px; height: 48px; color: var(--vc-red); }
#top .vc-pillar__ico svg { width: 100%; height: 100%; display: block; }
#top .vc-pillar__title { font-family: 'libre-baskerville-custom', serif; font-size: 20px; color: var(--vc-ink); }
#top .vc-pillar__desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--vc-ink-mute); }

/* — Inline-Stats-Paar (Split „Unsere Haltung") — */
#top .vc-inline-stats { display: flex; gap: 48px; padding-top: 20px; margin-top: 4px; border-top: 1px solid var(--vc-rule); }
#top .vc-inline-stats .n { display: block; font-family: 'libre-baskerville-custom', serif; font-size: 34px; line-height: 1; color: var(--vc-red); }
#top .vc-inline-stats .l { display: block; margin-top: 4px; font-size: 13px; letter-spacing: 0.04em; color: var(--vc-ink-mute); }


/* ============================================================
   §40 — NEUE TONALITÄT (Testseiten Ton-1/2/3, Stand 28.07.)
   Zweischicht-Aufbau: Sichtbereich oben + „Tiefenschicht" unten.
   Baupläne: handoff/Avia-Ton-1|2|3-*.txt
   ============================================================ */

/* — Tiefenschicht: ruhige SEO/GEO-Leseschicht unter dem Sichtbereich — */
#top .vc-deep {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left;
}
#top .vc-deep .vc-eyebrow { margin-bottom: 36px; }
#top .vc-deep__item { padding: 34px 0; border-top: 1px solid var(--vc-rule); }
#top .vc-deep__item:first-of-type { padding-top: 0; border-top: 0; }
#top .vc-deep__item h3 {
  margin: 0 0 14px !important;
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', serif;
  font-size: clamp(21px, 1.7vw, 26px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  color: var(--vc-ink);
}
#top .vc-deep__item p { margin: 0; font-size: 16px; line-height: 1.72; color: var(--vc-ink-soft); }
#top .vc-deep__item p + p { margin-top: 14px; }
#top .vc-deep__item strong { color: var(--vc-ink); font-weight: 600; }

/* — Tag-Zeile (Berufsgruppen / Zielgruppen, mittig, umbrechend) — */
#top .vc-taglist {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 18px; margin: 24px auto 0; padding-top: 22px;
  border-top: 1px solid var(--vc-rule);
  font-size: 14px; letter-spacing: 0.04em; color: var(--vc-ink-mute);
}
#top .vc-taglist .sep { opacity: 0.45; }
#top .vc-taglist--on-red { border-top-color: var(--vc-rule-on-red); color: var(--vc-on-red); font-size: 16px; }

/* — Kennzahlen-Band auf hellem Grund (4 Zellen) — */
#top .vc-trust {
  margin: clamp(44px, 5vw, 64px) auto 0; max-width: 1140px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--vc-rule); border-bottom: 1px solid var(--vc-rule);
}
#top .vc-trust__cell { padding: 36px 26px; text-align: center; }
#top .vc-trust__cell + .vc-trust__cell { border-left: 1px solid var(--vc-rule); }
#top .vc-trust__n { display: block; font-family: 'libre-baskerville-custom', serif; font-size: 34px; line-height: 1; color: var(--vc-red); }
#top .vc-trust__l { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--vc-ink-mute); }
#top .vc-seals { margin: 28px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; font-size: 13px; letter-spacing: 0.04em; color: var(--vc-ink-mute); }
@media (max-width: 989px) {
  #top .vc-trust { grid-template-columns: 1fr 1fr; }
  #top .vc-trust .vc-trust__cell:nth-child(3) { border-left: 0; }
  #top .vc-trust .vc-trust__cell:nth-child(n+3) { border-top: 1px solid var(--vc-rule); }
}
@media (max-width: 560px) {
  #top .vc-trust { grid-template-columns: 1fr; }
  #top .vc-trust .vc-trust__cell { border-left: 0 !important; }
  #top .vc-trust .vc-trust__cell:nth-child(n+2) { border-top: 1px solid var(--vc-rule); }
}

/* — 4-Spalten-Variante der Nummern-Reihe + Fassung auf Rot — */
#top .vc-steps4 { grid-template-columns: repeat(4, 1fr); max-width: 1140px; margin-left: auto; margin-right: auto; }
#top .vc-steps--on-red { border-color: var(--vc-rule-on-red); }
#top .vc-steps--on-red .vc-steps__item + .vc-steps__item { border-left-color: var(--vc-rule-on-red); }
#top .vc-steps--on-red .vc-steps__n { color: var(--vc-on-red-mute); }
#top .vc-steps--on-red .vc-steps__h { color: var(--vc-on-red); }
#top .vc-steps--on-red .vc-steps__t { color: var(--vc-on-red); opacity: 0.86; }
@media (max-width: 989px) {
  #top .vc-steps4 { grid-template-columns: 1fr 1fr; }
  #top .vc-steps--on-red .vc-steps__item:nth-child(n+3) { border-top: 1px solid var(--vc-rule-on-red); }
}
@media (max-width: 600px) {
  #top .vc-steps4 { grid-template-columns: 1fr; }
  #top .vc-steps--on-red .vc-steps__item:nth-child(n+2) { border-top: 1px solid var(--vc-rule-on-red); }
}

/* — Absenderzeile unter der Hero-H1 — */
#top .vc-signature { margin: 0; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vc-red); }
#top .av_color_footer_color .vc-signature { color: var(--vc-on-red-mute); }

@media (max-width: 989px) {
  #top .vc-cta-red__grid { grid-template-columns: 1fr; }
  #top .vc-svc2 { grid-template-columns: 1fr; }
  #top .vc-pillars { grid-template-columns: 1fr 1fr; }
  #top .vc-pillar { border-left: 0; }
}
@media (max-width: 560px) { #top .vc-pillars { grid-template-columns: 1fr; } }


/* ============================================================
   §39 — SLIDER REVOLUTION „Startseite 1" → Website-Look (nur CSS)
   Schrift = Webspace-@font-face der Site ('libre-baskerville-custom' /
   'montserrat-custom'), NICHT die Google-Lib im Rev Slider. Textbreite,
   Zeilenhöhe, Laufweite, Button — alles hier, damit im SR-Editor nur die
   drei Layer-Klassen gesetzt werden müssen:
     Titel  → Klasse  vc-rs-title
     Text   → Klasse  vc-rs-desc
     Sub    → Klasse  vc-rs-eyebrow   (Zeile über dem Titel, z. B. „Erfolg mit Herz")
     Button → Klasse  vc-rs-btn   (ins Feld „HTML Class" — die vorhandene
                                   Internal-Class .sr7-btn bleibt daneben stehen)
   (!important nötig, da Rev Slider Inline-Styles/Google-Font setzt.)
   ============================================================ */
#top .vc-rs-eyebrow,
#top .vc-rs-eyebrow *,
#top .tp-caption.vc-rs-eyebrow,
#top .tp-caption.vc-rs-eyebrow * {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(11px, 0.8vw, 12px) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  color: var(--vc-red) !important;
}
/* Strich vor der Subline (wie Website-Eyebrows) */
#top .vc-rs-eyebrow::before,
#top .tp-caption.vc-rs-eyebrow::before {
  content: "" !important;
  display: inline-block !important;
  width: 36px !important;
  height: 1px !important;
  margin-right: 14px !important;
  vertical-align: middle !important;
  background: var(--vc-red) !important;
}
#top .vc-rs-title,
#top .vc-rs-title *,
#top .tp-caption.vc-rs-title,
#top .tp-caption.vc-rs-title * {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 3.8vw, 54px) !important;   /* exakt wie Website-H1, alle Screens */
  line-height: 1.12 !important;
  letter-spacing: -0.5px !important;
  color: var(--vc-ink) !important;
  max-width: 640px !important;               /* Textbreite wie die anderen Heros */
  white-space: normal !important;
}
#top .vc-rs-desc,
#top .vc-rs-desc *,
#top .tp-caption.vc-rs-desc,
#top .tp-caption.vc-rs-desc * {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(17px, 1.2vw, 19px) !important;   /* exakt wie Website-Lede */
  line-height: 1.6 !important;
  color: var(--vc-ink-soft) !important;
  max-width: 640px !important;
  white-space: normal !important;
}
#top .vc-rs-btn,
#top .vc-rs-btn *,
#top .tp-caption.vc-rs-btn,
#top .vc-rs-btn.sr7-btn {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  border-radius: 0 !important;
  background: var(--vc-red) !important;
  color: var(--vc-on-red) !important;
}
#top .vc-rs-btn:hover,
#top .tp-caption.vc-rs-btn:hover { background: var(--vc-red-hover) !important; }

/* ---- EMPFOHLEN: EIN HTML-Layer mit echten Website-Klassen -------------------
   Statt separater SR-Layer (Titel/Text/Button) EINEN „HTML"-Layer anlegen und
   den Markup-Block unten einfügen. Er nutzt die echten Hero-Klassen
   (.vc-eyebrow / .vc-h1 / .vc-lede / .vc-btn) → rendert exakt wie der Website-Hero,
   inkl. Subline-Strich + korrekter Größen (SR fasst HTML-Kinder nicht an).
   Nur dieser Wrapper regelt Breite + vertikale Abstände: */
#top .vc-rs-hero { max-width: 640px !important; }  /* = Content-Kante der Klammern (§48.2) */
/* Vertikaler Rhythmus wie Website-Hero (feste Abstände statt Column-Flex,
   damit die Buttons NICHT als Flex-Spalte stapeln) */
#top .vc-rs-hero .vc-eyebrow { display: flex; align-items: center; margin: 0 0 16px !important; }
#top .vc-rs-hero .vc-h1   { display: block; margin: 0 0 18px !important; max-width: 100%; }
#top .vc-rs-hero .vc-lede { display: block; margin: 0 0 26px !important; max-width: 52ch; }
/* Buttons nebeneinander — ob im <div class="vc-rs-hero__cta"> ODER als direkte
   <a> (SR flacht den Wrapper oft ab). Beides abgedeckt, ohne :has: */
#top .vc-rs-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
#top .vc-rs-hero > .vc-btn { display: inline-flex; margin: 0 14px 0 0 !important; }
@media (max-width: 778px) {
  #top .vc-rs-hero { max-width: none !important; text-align: center; }
  #top .vc-rs-hero .vc-eyebrow { justify-content: center; }
  #top .vc-rs-hero__cta { justify-content: center; }
  #top .vc-rs-hero > .vc-btn { margin: 0 7px 0 0 !important; }
}

/* ============================================================
   §41 — HOTFIX Enfold 8.0 / Gravity Forms 2.9 (21.08.2026)
   Symptome nach dem Update: blauer Standard-Submit, dunkle Labels
   auf Rot, zentrierte Labels auf /kontakt/.
   Ursache: GF rendert den Submit jetzt auch als <button> (nicht nur
   <input type="submit">) und bringt das neue "Orbital"-Theme mit
   (blauer Primary, neue Label-Klasse .gform-field-label, kein
   eigenes text-align mehr). Regeln decken ALT + NEU ab, nichts entfernt.
   ============================================================ */

/* — 41.0 Orbital-Primaerfarbe global auf Burgundy mappen — */
#top .gform_wrapper.gform-theme,
#top .gform_wrapper {
  --gform-theme-color-primary: var(--vc-red);
  --gform-theme-color-primary-contrast: #ffffff;
  --gform-theme-color-primary-darker: var(--vc-red-hover);
  --gform-theme-color-primary-lighter: var(--vc-red);
}

/* — 41.1 Submit-Button: alle Render-Varianten (input ODER button) —
   Standard = Burgundy auf hellen Seiten … */
#top .gform_wrapper input[type="submit"],
#top .gform_wrapper button[type="submit"],
#top .gform_wrapper .gform_button,
#top .avia_ajax_form input[type="submit"],
#top .avia_ajax_form .button {
  background: var(--vc-red) !important;
  color: #ffffff !important;
  border: 1px solid var(--vc-red) !important;
  border-radius: 0 !important;
  padding: 15px 30px !important;
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
#top .gform_wrapper input[type="submit"]:hover,
#top .gform_wrapper button[type="submit"]:hover,
#top .gform_wrapper .gform_button:hover,
#top .avia_ajax_form input[type="submit"]:hover,
#top .avia_ajax_form .button:hover {
  background: var(--vc-red-hover) !important;
  color: #ffffff !important;
}

/* … auf Rot invertiert (Paper-Button), wie bisher: */
#top :is(.av_color_footer_color, .footer_color, .vc-cta-red, .vc-form--on-red) :is(.gform_wrapper, .avia_ajax_form) :is(input[type="submit"], button[type="submit"], .gform_button, .button) {
  background: var(--vc-paper) !important;
  color: var(--vc-red) !important;
  border-color: var(--vc-paper) !important;
}
#top :is(.av_color_footer_color, .footer_color, .vc-cta-red, .vc-form--on-red) :is(.gform_wrapper, .avia_ajax_form) :is(input[type="submit"], button[type="submit"], .gform_button, .button):hover {
  background: #ffffff !important;
  color: var(--vc-red) !important;
}

/* — 41.2 Labels: neue GF-Klasse .gform-field-label mit abdecken — */
/* Auf Rot: helles Cream, Uppercase-Miniatur wie gehabt */
#top :is(.av_color_footer_color, .footer_color, .vc-cta-red, .vc-form--on-red) .gform_wrapper :is(label, .gfield_label, .gform-field-label, .gform-field-label__text, legend) {
  color: var(--vc-on-red) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
/* Auf Hell (Kontakt-Karte): dunkel + linksbuendig */
#top :is(.vc-formwrap, .vc-gform) :is(.gfield_label, .gform-field-label, .gform-field-label__text, legend.gfield_label) {
  color: var(--vc-ink-soft) !important;
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* — 41.2b Feld-Beschreibungen + Sublabels (GF 2.9 rendert sie grau) — */
/* Auf Rot: helles Cream, gut lesbar */
#top :is(.av_color_footer_color, .footer_color, .vc-cta-red, .vc-form--on-red) .gform_wrapper :is(.gfield_description, .gform-field-description, .ginput_complex label, .gfield_required, .gform_required_legend) {
  color: var(--vc-on-red) !important;
  opacity: 0.85;
}
#top :is(.av_color_footer_color, .footer_color, .vc-cta-red, .vc-form--on-red) .gform_wrapper ::placeholder {
  color: rgba(247,237,216,0.55) !important;
  opacity: 1;
}
/* Auf Hell (Kontakt-Karte): ink-soft statt Orbital-Grau */
#top :is(.vc-formwrap, .vc-gform) :is(.gfield_description, .gform-field-description, .ginput_complex label) {
  color: var(--vc-ink-soft) !important;
  font-size: 13px !important;
}
#top :is(.vc-formwrap, .vc-gform) .gform_wrapper ::placeholder {
  color: rgba(31,26,20,0.45) !important;
  opacity: 1;
}

/* — 41.3 Ausrichtung: Formular erbt kein Zentrieren des Umfelds — */
#top .gform_wrapper,
#top .gform_wrapper .gfield,
#top .gform_wrapper .gfield_label,
#top .gform_wrapper .gform-field-label {
  text-align: left;
}
/* Roter Block: Submit rechtsbuendig (wie freigegebenes Layout) */
#top :is(.av_color_footer_color, .footer_color, .vc-cta-red, .vc-form--on-red) .gform_wrapper .gform_footer {
  display: flex;
  justify-content: flex-end;
}
/* Helle Kontakt-Karte: Submit linksbuendig */
#top .vc-formwrap .gform_footer {
  display: flex;
  justify-content: flex-start;
}

/* — 41.4 Orbital-Eingabefelder in unseren Scopes zuruecksetzen — */
#top :is(.av_color_footer_color, .footer_color, .vc-cta-red, .vc-form--on-red) .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(247,237,216,0.35) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
#top .vc-formwrap :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
  background: #ffffff !important;
  border: 1px solid rgba(31,26,20,0.22) !important;
  border-radius: 0 !important;
  color: var(--vc-ink) !important;
  box-shadow: none !important;
}

/* — 41.5 Rev Slider: CTA-Zeile buendig und in einer Linie — */
#top .vc-rs-hero { text-align: left; }
#top .vc-rs-hero__cta {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 0 !important;
}
#top .vc-rs-hero__cta .vc-btn { margin: 0 !important; }
/* SR7 wandelt Zeilenumbrüche des Layer-HTML in <br> — die werden im
   Flex-Container zu leeren Items und schieben die Buttons nach rechts.
   Stray-<br> im Slider-Hero komplett neutralisieren: */
#top .vc-rs-hero br { display: none !important; }
/* Slider-Titel elementunabhängig: Slides 2+3 nutzen <h2 class="vc-h1">
   (nur EIN echtes <h1> pro Seite) — Look bleibt identisch zu Slide 1: */
#top .vc-rs-hero .vc-h1 {
  font-family: 'libre-baskerville-custom', 'Libre Baskerville', Georgia, serif !important;
  font-size: clamp(36px, 3.8vw, 54px) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  color: var(--vc-ink);
}

/* ============================================================
   §42 — SEKTIONS-RHYTHMUS VEREINHEITLICHT (01.09.2026)
   Alle Color-Sections bekommen exakt denselben vertikalen
   Abstand (Referenz: 3-Karten-Sektion, clamp 72→120px) —
   unabhängig davon, was im Avia-Feld "Abstand" gewählt ist,
   und sicher gegen die Enfold-8.0-Ladereihenfolge.
   ============================================================ */
#top .avia-section {
  padding-top: clamp(72px, 9vw, 120px) !important;
  padding-bottom: clamp(72px, 9vw, 120px) !important;
}
/* Enfolds "Abstand"-Auswahl legt ihr Padding auf den inneren
   .container — neutralisieren, sonst addiert es sich: */
#top .avia-section > .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Ausnahmen: bewusst randlose Sektionen (z.B. reine Slider-
   Sektion): Custom-Class "vc-flush" setzen. */
#top .avia-section.av-minimal-section,
#top .avia-section.vc-flush {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   §43 — ENFOLD-8.0-FIX: BILD-KLAMMERN ALS SEKTIONEN + §42-SCOPE
   (01.09.2026)
   Befund Startseiten-Import: Der 8.0-Debug-Import verliert die
   Zelleninhalte von Rastereihen (av_layout_row) → riesige leere
   Farbfläche. Hero/Split/Talk werden deshalb ab jetzt als normale
   Farb-Sektion mit zwei 1/2-Spalten importiert; dieses Kapitel
   stellt den identischen Look her (Bild full-bleed links, Text
   mittig rechts). Zusätzlich Korrektur: §42 hatte auch Rastereihen
   und Klammern vertikal gepolstert — hier wieder auf 0.
   ============================================================ */

/* — 43.0 Klammern + (Alt-)Rastereihen raus aus dem §42-Raster — */
#top .avia-section.vc-hero,
#top .avia-section.vc-split,
#top .avia-section.vc-talk,
#top .avia-section.av-layout-grid-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* — 43.1 Container der Klammer-Sektion: full-bleed + Flex — */
#top .avia-section.vc-hero > .container,
#top .avia-section.vc-split > .container,
#top .avia-section.vc-talk > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}
#top .avia-section.vc-hero > .container::before,
#top .avia-section.vc-hero > .container::after,
#top .avia-section.vc-split > .container::before,
#top .avia-section.vc-split > .container::after,
#top .avia-section.vc-talk > .container::before,
#top .avia-section.vc-talk > .container::after { display: none !important; }

/* — 43.2 Spalten exakt 50/50, ohne Enfold-Gutter — */
#top .avia-section.vc-hero .container > .flex_column,
#top .avia-section.vc-split .container > .flex_column,
#top .avia-section.vc-talk .container > .flex_column {
  width: 50% !important;
  margin: 0 !important;
  float: none !important;
}

/* — 43.3 Bild-Spalte: Bild deckt die halbe Sektion (wie Rasterzelle) — */
#top .avia-section.vc-hero .vc-hero__img,
#top .avia-section.vc-hero .vc-hero__media,
#top .avia-section.vc-split .vc-split__media,
#top .avia-section.vc-split .vc-split__img,
#top .avia-section.vc-talk .vc-talk__img,
#top .avia-section.vc-talk .vc-talk__media {
  position: relative !important;
  overflow: hidden;
  min-height: clamp(440px, 56vh, 680px);
  height: auto !important;
}
#top .avia-section.vc-hero .vc-hero__img .avia-image-container,
#top .avia-section.vc-hero .vc-hero__media .avia-image-container,
#top .avia-section.vc-split .vc-split__media .avia-image-container,
#top .avia-section.vc-split .vc-split__img .avia-image-container,
#top .avia-section.vc-talk .vc-talk__img .avia-image-container,
#top .avia-section.vc-talk .vc-talk__media .avia-image-container {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  line-height: 0;
}
#top .avia-section.vc-hero .vc-hero__img .avia-image-overlay-wrap,
#top .avia-section.vc-hero .vc-hero__media .avia-image-overlay-wrap,
#top .avia-section.vc-split .vc-split__media .avia-image-overlay-wrap,
#top .avia-section.vc-talk .vc-talk__img .avia-image-overlay-wrap,
#top .avia-section.vc-hero .vc-hero__img img,
#top .avia-section.vc-hero .vc-hero__media img,
#top .avia-section.vc-split .vc-split__media img,
#top .avia-section.vc-split .vc-split__img img,
#top .avia-section.vc-talk .vc-talk__img img,
#top .avia-section.vc-talk .vc-talk__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0 !important;
}

/* — 43.4 Text-Spalte mittig; Wrapper-Ränder neutral — */
#top .avia-section.vc-hero .vc-hero__body,
#top .avia-section.vc-split .vc-split__body,
#top .avia-section.vc-talk .vc-talk__body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#top .avia-section.vc-hero .vc-hero__body .avia_codeblock_section,
#top .avia-section.vc-split .vc-split__body .avia_codeblock_section,
#top .avia-section.vc-talk .vc-talk__body .avia_codeblock_section,
#top .avia-section.vc-hero .vc-hero__body .avia_codeblock,
#top .avia-section.vc-split .vc-split__body .avia_codeblock,
#top .avia-section.vc-talk .vc-talk__body .avia_codeblock { margin: 0 !important; }

/* Streu-<br> in CTA-Zeilen nie als Umbruch rendern */
#top .vc-hero__cta br, #top .vc-split__cta br, #top .vc-talk__cta br { display: none !important; }

/* — 43.5 Mobil: stapeln (Bild oben, Text darunter) — */
@media (max-width: 989px) {
  #top .avia-section.vc-hero > .container,
  #top .avia-section.vc-split > .container,
  #top .avia-section.vc-talk > .container { flex-direction: column !important; }
  #top .avia-section.vc-hero .container > .flex_column,
  #top .avia-section.vc-split .container > .flex_column,
  #top .avia-section.vc-talk .container > .flex_column { width: 100% !important; }
  #top .avia-section.vc-hero .vc-hero__img,
  #top .avia-section.vc-hero .vc-hero__media,
  #top .avia-section.vc-split .vc-split__media,
  #top .avia-section.vc-talk .vc-talk__img,
  #top .avia-section.vc-talk .vc-talk__media { min-height: 320px; }
}

/* ============================================================
   §44 — ABSTÄNDE GLOBAL REDUZIERT + 8.0-NACHARBEIT (01.09.2026)
   (a) Sektions-Rhythmus kleiner: clamp 48→88px (ersetzt §42-Werte).
   (b) Enfold-Innenabstände in allen Verschachtelungen neutral.
   (c) Trenner-Linie (Content/Sidebar-Border) aus.
   (d) Medien-Spalten der Klammern: Spann-Anker .vc-keep + Spalten-
       Hintergrundbild wirkt als Cover (Fallback, falls das leere
       Bild-Element beim 8.0-Import verworfen wird).
   ============================================================ */
#top .avia-section {
  padding-top: clamp(48px, 5.5vw, 88px) !important;
  padding-bottom: clamp(48px, 5.5vw, 88px) !important;
}
#top .avia-section.av-minimal-section,
#top .avia-section.vc-flush,
#top .avia-section.vc-hero,
#top .avia-section.vc-split,
#top .avia-section.vc-talk,
#top .avia-section.av-layout-grid-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#top .avia-section .container { padding-top: 0 !important; padding-bottom: 0 !important; }
#top #main .content, #top #main .template-page { padding-top: 0 !important; padding-bottom: 0 !important; }
#top .content, #top .sidebar, #top .template-page { border: none !important; }

#top .vc-keep { display: block; width: 100%; height: 100%; }
#top .avia-section.vc-hero .vc-hero__img,
#top .avia-section.vc-hero .vc-hero__media,
#top .avia-section.vc-split .vc-split__media,
#top .avia-section.vc-talk .vc-talk__img,
#top .avia-section.vc-talk .vc-talk__media {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ============================================================
   §45 — KLAMMER-SPALTEN STRUKTUR-UNABHÄNGIG (01.09.2026)
   Befund Startseite: Bild-Spalte rendert 100% breit ÜBER dem Text.
   Enfold 8.0 legt zwischen .container und den Spalten offenbar
   Zwischen-Wrapper an → die §43-Kindselektoren griffen nicht überall.
   Hier: Wrapper transparent schalten (display:contents), Breiten an
   den Spalten-KLASSEN festmachen, Desktop-Richtung erzwingen.
   ============================================================ */
#top .avia-section.vc-hero > .container > *:not(.flex_column):not(.av-parallax):not(.av-section-color-overlay-wrap),
#top .avia-section.vc-split > .container > *:not(.flex_column):not(.av-parallax):not(.av-section-color-overlay-wrap),
#top .avia-section.vc-talk > .container > *:not(.flex_column):not(.av-parallax):not(.av-section-color-overlay-wrap) {
  display: contents;
}
@media (min-width: 990px) {
  #top .avia-section.vc-hero > .container,
  #top .avia-section.vc-split > .container,
  #top .avia-section.vc-talk > .container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  #top .avia-section.vc-hero .vc-hero__img,
  #top .avia-section.vc-hero .vc-hero__media,
  #top .avia-section.vc-split .vc-split__media,
  #top .avia-section.vc-talk .vc-talk__img,
  #top .avia-section.vc-talk .vc-talk__media,
  #top .avia-section.vc-hero .vc-hero__body,
  #top .avia-section.vc-split .vc-split__body,
  #top .avia-section.vc-talk .vc-talk__body {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    margin: 0 !important;
    float: none !important;
  }
}
@media (max-width: 989px) {
  #top .avia-section.vc-hero .vc-hero__img,
  #top .avia-section.vc-hero .vc-hero__media,
  #top .avia-section.vc-split .vc-split__media,
  #top .avia-section.vc-talk .vc-talk__img,
  #top .avia-section.vc-talk .vc-talk__media,
  #top .avia-section.vc-hero .vc-hero__body,
  #top .avia-section.vc-split .vc-split__body,
  #top .avia-section.vc-talk .vc-talk__body {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ============================================================
   §46 — RASTEREIHEN FINAL (01.09.2026, Nutzer-Befund)
   Slider + Bild-Klammern laufen als Rastereihe (av_layout_row),
   nicht als Farb-Sektion. Reihen sind immer flush; Codeblock-
   Wrapper in Reihen ohne Eigenabstand. Gilt unabhängig davon,
   welche Zusatzklassen Enfold 8.0 der Reihe gibt.
   ============================================================ */
#top .av-layout-grid-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#top .av-layout-grid-container .avia_codeblock_section,
#top .av-layout-grid-container .avia_codeblock { margin: 0 !important; }

/* — §46b: Klammer-Klasse darf auf der ZELLE ODER direkt auf dem
   BILD-ELEMENT liegen (alte Bauweise, Nutzer-Screenshot 01.09.) — */
#top .av-layout-grid-container .flex_cell:has(.vc-split__media),
#top .av-layout-grid-container .flex_cell:has(.vc-hero__img),
#top .av-layout-grid-container .flex_cell:has(.vc-talk__img) {
  position: relative;
  overflow: hidden;
  min-height: clamp(440px, 56vh, 680px);
}
#top .flex_cell > .avia-image-container.vc-split__media,
#top .flex_cell > .avia-image-container.vc-hero__img,
#top .flex_cell > .avia-image-container.vc-talk__img,
#top .flex_cell .avia-image-container.vc-split__media,
#top .flex_cell .avia-image-container.vc-hero__img,
#top .flex_cell .avia-image-container.vc-talk__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  line-height: 0;
}
#top .avia-image-container.vc-split__media img,
#top .avia-image-container.vc-hero__img img,
#top .avia-image-container.vc-talk__img img,
#top .avia-image-container.vc-split__media .avia-image-overlay-wrap,
#top .avia-image-container.vc-hero__img .avia-image-overlay-wrap,
#top .avia-image-container.vc-talk__img .avia-image-overlay-wrap {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* ============================================================
   §47 · SR7-SLIDER: TYPO-VERERBUNG (03.09.2026)
   Der SR7-HTML-Layer vererbt die Slider-eigene Schrift → Lede
   fiel auf Serif/falsche Größe zurück. Explizit = Website-Typo;
   h1-Regel steht in §41.5.
   ============================================================ */
#top .vc-rs-hero {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
}
#top .vc-rs-hero .vc-lede,
#top .vc-rs-hero p {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-size: clamp(17px, 1.2vw, 19px) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: var(--vc-ink-soft) !important;
}
#top .vc-rs-hero .vc-eyebrow {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
}

/* ============================================================
   §48 · TIEFENSCHICHT: RUHIGER ABSCHLUSS (03.09.2026)
   ============================================================ */
#top .avia-section.vc-ton-deep {
  padding-top: clamp(48px, 6vw, 72px) !important;
  padding-bottom: clamp(56px, 7vw, 88px) !important;
}
#top .vc-deep .vc-eyebrow { margin-bottom: 28px; }

/* ============================================================
   §49 · KLAMMER-GEOMETRIE FINAL (03.09.2026)
   Ersetzt die Iterationen §47–§51 vom selben Tag — EINE
   konsolidierte Regelgruppe für Hero/Split/Talk, beide Bauarten.
   Referenz = Live-Rev-Slider (Export 03.09.):
   · Einzug der SR-Content-Spalte: 50px im 1240er-Grid, skaliert
     mit der Breite → Formel 4.032vw (77px @1920, 59px @1440).
     Links wie rechts identisch; die Luft rechts entsteht aus der
     640px-Content-Kante — exakt wie der Slider-Lede.
   · Text sitzt exakt mittig zur Bildhöhe.
   Spezifität bewusst über Avias generierter Zellen-Regel
   (.responsive #top #wrap_all .flex_cell.av-uid…{padding:64px}).
   ============================================================ */

/* — 49.1 Reihen: Mindesthöhe + Zellen strecken — */
.responsive #top #wrap_all .av-layout-grid-container.vc-hero,
.responsive #top #wrap_all .av-layout-grid-container.vc-split,
.responsive #top #wrap_all .av-layout-grid-container.vc-talk,
.responsive #top #wrap_all .avia-section.vc-hero .container,
.responsive #top #wrap_all .avia-section.vc-split .container,
.responsive #top #wrap_all .avia-section.vc-talk .container {
  min-height: clamp(540px, 60vh, 720px);
}
.responsive #top #wrap_all .av-layout-grid-container.vc-hero,
.responsive #top #wrap_all .av-layout-grid-container.vc-split,
.responsive #top #wrap_all .av-layout-grid-container.vc-talk {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch !important;
}
@media only screen and (min-width: 990px) {
  .responsive #top #wrap_all .av-layout-grid-container.vc-hero > .flex_cell,
  .responsive #top #wrap_all .av-layout-grid-container.vc-split > .flex_cell,
  .responsive #top #wrap_all .av-layout-grid-container.vc-talk > .flex_cell {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
/* Bild-Zellen-Minimum auf denselben Wert (ersetzt §46b-Wert): */
#top .av-layout-grid-container .flex_cell:has(.vc-split__media),
#top .av-layout-grid-container .flex_cell:has(.vc-hero__img),
#top .av-layout-grid-container .flex_cell:has(.vc-talk__img) {
  min-height: clamp(540px, 60vh, 720px);
}

/* — 49.2 Text-Zellen: EIN Einzug (SR-Formel), exakt mittig — */
.responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-hero__body,
.responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-split__body,
.responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-talk__body,
.responsive #top #wrap_all .avia-section.vc-hero .flex_column.vc-hero__body,
.responsive #top #wrap_all .avia-section.vc-split .flex_column.vc-split__body,
.responsive #top #wrap_all .avia-section.vc-talk .flex_column.vc-talk__body {
  padding: clamp(56px, 6vw, 88px) 80px !important;   /* horizontal exakt SR-Kante (80px fix); vertikal Standard-Polster: bei kurzem Text zentriert die Mindesthöhe (symmetrisches Padding verschiebt nichts), bei langem Text hält es den einheitlichen Mindestabstand oben/unten */
  display: grid !important;
  align-content: center !important;
  justify-items: start;
  height: auto !important;
  min-height: 0 !important;
}

/* — 49.3 Wrapper-Kette neutral (Ursache aller Doppel-Einzüge) — */
.responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-hero__body .flex_cell_inner,
.responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-split__body .flex_cell_inner,
.responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-talk__body .flex_cell_inner,
.responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-hero__body .flex_column,
.responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-split__body .flex_column,
.responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-talk__body .flex_column {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;   /* Enfold kappt flex_cell_inner auf die halbe Container-Breite (800px)
                                   und zentriert sie in der 960er-Zelle → das waren die zweiten ~80px.
                                   Ohne !important verlor unsere Aufhebung. */
}
#top .vc-hero__body .av_textblock_section,
#top .vc-split__body .av_textblock_section,
#top .vc-talk__body .av_textblock_section {
  padding: 0 !important;
  margin: 0 !important;
}

/* — 49.4 Content-Kante: alles endet auf einer Linie — */
.responsive #top #wrap_all .vc-hero__body .avia_textblock,
.responsive #top #wrap_all .vc-split__body .avia_textblock,
.responsive #top #wrap_all .vc-talk__body .avia_textblock,
.responsive #top #wrap_all .vc-hero__body .avia_codeblock,
.responsive #top #wrap_all .vc-split__body .avia_codeblock,
.responsive #top #wrap_all .vc-talk__body .avia_codeblock {
  max-width: 640px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
#top .vc-hero__body .vc-lede,
#top .vc-split__body .vc-lede,
#top .vc-talk__body .vc-lede { max-width: 100% !important; }
#top .vc-hero__body .avia_textblock > :first-child,
#top .vc-split__body .avia_textblock > :first-child,
#top .vc-talk__body .avia_textblock > :first-child { margin-top: 0 !important; }
#top .vc-hero__body .avia_textblock > :last-child,
#top .vc-split__body .avia_textblock > :last-child,
#top .vc-talk__body .avia_textblock > :last-child { margin-bottom: 0 !important; }

/* — 49.5 CTA-Reihen: fester Button-Abstand — */
#top .vc-hero__cta,
#top .vc-split__cta,
#top .vc-talk__cta,
#top .vc-rs-hero__cta,
#top .vc-eh__cta {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px !important;
}
#top .vc-hero__cta .vc-btn,
#top .vc-split__cta .vc-btn,
#top .vc-talk__cta .vc-btn { margin: 0 !important; }

/* — 49.6 Mobil: gestapelt, oben ausgerichtet — */
@media (max-width: 989px) {
  .responsive #top #wrap_all .av-layout-grid-container.vc-hero,
  .responsive #top #wrap_all .av-layout-grid-container.vc-split,
  .responsive #top #wrap_all .av-layout-grid-container.vc-talk,
  .responsive #top #wrap_all .avia-section.vc-hero .container,
  .responsive #top #wrap_all .avia-section.vc-split .container,
  .responsive #top #wrap_all .avia-section.vc-talk .container { min-height: 0; }
  .responsive #top #wrap_all .av-layout-grid-container.vc-hero > .flex_cell,
  .responsive #top #wrap_all .av-layout-grid-container.vc-split > .flex_cell,
  .responsive #top #wrap_all .av-layout-grid-container.vc-talk > .flex_cell {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-hero__body,
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-split__body,
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-talk__body,
  .responsive #top #wrap_all .avia-section.vc-hero .flex_column.vc-hero__body,
  .responsive #top #wrap_all .avia-section.vc-split .flex_column.vc-split__body,
  .responsive #top #wrap_all .avia-section.vc-talk .flex_column.vc-talk__body {
    padding: 48px 25px !important; /* 25px = Enfold-Container mobil (07.09.) */
    align-content: start !important;
  }
}


/* — 49.7 Sicherung: 80px-Kante bleibt FIX auf allen Breiten —
   (auch ≥1600px, falls Enfold dort erneut Container-Kappungen
   oder eigene Zell-Paddings anlegt) */
@media only screen and (min-width: 990px) {
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-hero__body,
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-split__body,
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-talk__body,
  .responsive #top #wrap_all .avia-section.vc-hero .flex_column.vc-hero__body,
  .responsive #top #wrap_all .avia-section.vc-split .flex_column.vc-split__body,
  .responsive #top #wrap_all .avia-section.vc-talk .flex_column.vc-talk__body {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-hero__body .flex_cell_inner,
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-split__body .flex_cell_inner,
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-talk__body .flex_cell_inner,
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-hero__body .flex_column,
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-split__body .flex_column,
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-talk__body .flex_column {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}


/* — 49.8 Großbild-Fix (03.09.): Auf breiten Screens blieb ein
   zweiter ~80px-Versatz — Enfold kappt/zentriert die Inner-Kette
   dort erneut, und zwar auch wenn die Zelle NICHT die Klasse
   av-gridrow-cell trägt (die bisherigen Resets griffen dann nicht).
   Darum hier OHNE diese Klassen-Annahme, direkt über vc-__body: */
.responsive #top #wrap_all .vc-hero__body .flex_cell_inner,
.responsive #top #wrap_all .vc-split__body .flex_cell_inner,
.responsive #top #wrap_all .vc-talk__body .flex_cell_inner,
.responsive #top #wrap_all .vc-hero__body .flex_column,
.responsive #top #wrap_all .vc-split__body .flex_column,
.responsive #top #wrap_all .vc-talk__body .flex_column,
.responsive #top #wrap_all .vc-hero__body .flex_column_div,
.responsive #top #wrap_all .vc-split__body .flex_column_div,
.responsive #top #wrap_all .vc-talk__body .flex_column_div,
.responsive #top #wrap_all .vc-hero__body .av_textblock_section,
.responsive #top #wrap_all .vc-split__body .av_textblock_section,
.responsive #top #wrap_all .vc-talk__body .av_textblock_section {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
/* Reihe + Zellen: keine Breiten-Kappung auf Ultrawide */
.responsive #top #wrap_all .av-layout-grid-container.vc-hero,
.responsive #top #wrap_all .av-layout-grid-container.vc-split,
.responsive #top #wrap_all .av-layout-grid-container.vc-talk {
  max-width: none !important;
  width: 100% !important;
}
@media only screen and (min-width: 990px) {
  .responsive #top #wrap_all .av-layout-grid-container.vc-hero > .flex_cell,
  .responsive #top #wrap_all .av-layout-grid-container.vc-split > .flex_cell,
  .responsive #top #wrap_all .av-layout-grid-container.vc-talk > .flex_cell {
    min-width: 50% !important;
  }
}
/* Content-Kante bleibt allein am Textblock (640px, linksbündig): */
.responsive #top #wrap_all .vc-hero__body .avia_textblock,
.responsive #top #wrap_all .vc-split__body .avia_textblock,
.responsive #top #wrap_all .vc-talk__body .avia_textblock {
  margin-left: 0 !important;
  margin-right: auto !important;
}


/* — 49.9 BILDER VOLL SICHTBAR (03.09.) —
   Ursache der "abgeschnittenen" Bilder: Zelle (≈4:3 quer) + cover
   schneidet jedes Bild, dessen Format nicht der Zelle entspricht
   (Platzhalter war quadratisch → unten weg). Lösung zweiteilig:
   (1) Bild-Zellen erhalten festes Format 4:3 — die Reihenhöhe folgt
       dem Bild, die Mindesthöhe wird per min() gedeckelt und kann
       das Format nicht mehr übersteuern.
   (2) Bilder ab jetzt im Format 4:3 QUER exportieren (1440×1080px)
       → deckungsgleich mit der Zelle = 100% sichtbar auf allen
       Breiten. (Ersetzt die frühere Hochformat-Empfehlung.)
   Wächst der Text höher als das Bildformat, wächst die Zelle mit —
   dann (und nur dann) beschneidet cover minimal. */
#top .av-layout-grid-container .flex_cell:has(.vc-split__media),
#top .av-layout-grid-container .flex_cell:has(.vc-hero__img),
#top .av-layout-grid-container .flex_cell:has(.vc-talk__img),
#top .avia-section.vc-hero .flex_column.vc-hero__img,
#top .avia-section.vc-hero .flex_column.vc-hero__media,
#top .avia-section.vc-split .flex_column.vc-split__media,
#top .avia-section.vc-talk .flex_column.vc-talk__img,
#top .avia-section.vc-talk .flex_column.vc-talk__media {
  aspect-ratio: 4 / 3;
  min-height: 0 !important;
  height: auto !important;
}
/* Alte img-Mindesthöhen neutralisieren (erzwangen sonst Beschnitt): */
#top .av-layout-grid-container .flex_cell:has(.vc-split__media) img,
#top .av-layout-grid-container .flex_cell:has(.vc-hero__img) img,
#top .av-layout-grid-container .flex_cell:has(.vc-talk__img) img,
#top .avia-section.vc-hero .vc-hero__img img,
#top .avia-section.vc-hero .vc-hero__media img,
#top .avia-section.vc-split .vc-split__media img,
#top .avia-section.vc-talk .vc-talk__img img,
#top .avia-section.vc-talk .vc-talk__media img {
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
/* Reihen-Mindesthöhe: nie höher als die 4:3-Bildhöhe (37.5vw = 50vw·3/4),
   sonst würde die Zelle das Bild wieder überragen und cover schneiden: */
@media only screen and (min-width: 990px) {
  .responsive #top #wrap_all .av-layout-grid-container.vc-hero,
  .responsive #top #wrap_all .av-layout-grid-container.vc-split,
  .responsive #top #wrap_all .av-layout-grid-container.vc-talk,
  .responsive #top #wrap_all .avia-section.vc-hero .container,
  .responsive #top #wrap_all .avia-section.vc-split .container,
  .responsive #top #wrap_all .avia-section.vc-talk .container {
    min-height: min(clamp(540px, 60vh, 720px), 37.5vw) !important;
  }
}


/* ============================================================
   §50 · OPTIK-KORREKTUREN 04.09.2026 (css_korrekturen.docx)
   ============================================================ */

/* — 50.1 BLOG: Header überlappte die Beitrags-Überschrift —
   Ursache: §44 nullt "#top #main .content" global (für die
   ALB-Seiten korrekt, dort machen die Sektionen die Abstände).
   Blog-/Archiv-Templates haben aber KEINE Sektionen → Titel
   rutschte unter den Header. Vertikal-Polster nur dort zurück: */
#top #main .content.template-blog,
#top #main .content.template-single-blog,
#top.single-post #main .content,
#top.archive #main .content,
#top.category #main .content,
#top.search #main .content,
#top.error404 #main .content {
  padding-top: clamp(40px, 5vw, 72px) !important;
  padding-bottom: clamp(48px, 6vw, 88px) !important;
}

/* — 50.2 KARTEN: Buttons auf gemeinsamer Grundlinie —
   In Karten-Reihen (vc-cards2/vc-aud-card, z. B. /fuer-aerzte/)
   sitzt der Button am unteren Kartenrand, sobald Karten neben-
   einander stehen. margin-top:auto = Button rutscht ans Ende;
   der Absatz darüber behält seine Marge als Mindestabstand.
   Beim Mobil-Umbruch (1 Spalte) folgt der Button wieder direkt
   dem Text — Karte ist dann inhaltshoch. */
#top .vc-cards2 { align-items: stretch; }
#top .vc-aud-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
#top .vc-aud-card .vc-btn { margin-top: auto !important; }
#top .vc-aud-card p:last-of-type { margin-bottom: 24px !important; }
@media (max-width: 700px) {
  #top .vc-aud-card .vc-btn { margin-top: 8px !important; }
}

/* — 50.3 GRAVITY /kontakt/: Scope-Konflikt Rot × Formwrap —
   D25 hatte das Formular in .vc-formwrap (= helle Karten-Optik,
   §32) INNERHALB der roten Sektion → beide Scopes griffen
   gleichzeitig (weiße Karte + transparente Rot-Inputs + dunkle
   Labels auf Rot). Fix: Formwrap im Avia-Block entfernt (neue
   D25-Datei!), Formular liegt wie auf der Startseite nackt in
   der Footer-Color-Sektion und erbt die Rot-Optik aus §21/§41.
   Hier nur noch: Breite kappen + zentrieren, Submit links. */
#top .vc-anfrage .gform_wrapper {
  max-width: 760px;
  margin: 48px auto 0 !important;   /* Luft zwischen Lede und erstem Feld (04.09.) */
}
#top .vc-anfrage .gform_footer { justify-content: flex-start !important; }


/* — 50.4 CHECKLISTE in vc-eh-Sektionen: EINSPALTIG (04.09.) —
   Das 2-Spalten-Grid aus §33.4 stammt vom breiten Rot-Band; in
   den zentrierten Themen-Sektionen (vc-eh) wirken 3 Punkte im
   Zickzack unruhig (Screen C16 "Kurz erklärt"). Dort: eine
   Spalte, untereinander. Klammern (Hero/Split/Talk) waren schon
   einspaltig; das breite Rot-Band (vc-focus etc.) bleibt 2-spaltig. */
#top .vc-eh .vc-checklist {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* — 50.5 TAG-ZEILE schmaler (04.09., /arbeitnehmerueberlassung/
   "Für wen"): Die Berufsgruppen-Zeile lief über die volle
   Sektionsbreite — jetzt wie die Checklisten auf die schmale
   Content-Kante gekappt und zentriert; Trennlinie oben kürzt mit. */
#top .vc-taglist {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* — 50.6 GF FILE-UPLOAD auf Rot (05.09., /initiativbewerbung/):
   GF-2.9-Dropzone kommt grau/weiß — im vc-anfrage-Scope auf
   Rot-Optik bringen (transparent, Cream-Rahmen wie Inputs). */
#top .vc-anfrage .gform_fileupload_multifile .gform_drop_area {
  background: rgba(252, 248, 238, 0.06) !important;
  border: 1px dashed rgba(252, 248, 238, 0.45) !important;
  border-radius: 0 !important;
  color: var(--vc-cream) !important;
  padding: 32px 20px !important;
}
#top .vc-anfrage .gform_drop_instructions,
#top .vc-anfrage .gform_fileupload_rules,
#top .vc-anfrage .ginput_preview,
#top .vc-anfrage .gfield_description {
  color: rgba(252, 248, 238, 0.85) !important;
}
#top .vc-anfrage .gform_drop_area .gform_button_select_files {
  background: var(--vc-paper) !important;
  color: var(--vc-red) !important;
  border: none !important;
  padding: 12px 22px !important;
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  cursor: pointer;
}
#top .vc-anfrage .ginput_preview button,
#top .vc-anfrage .gform_delete_file {
  color: var(--vc-cream) !important;
  background: transparent !important;
}


/* — 50.7 EINHEITLICHE SEKTIONS-LUFT (07.09.): Karten-Grid direkt
   am Sektionsanfang (ohne Head) erzeugte oben 56px Extra-Luft
   (margin-top von .vc-cards2) → Abstand oben ≠ unten. Sicherung:
   erstes Kind in vc-eh startet ohne Eigen-Margin — gilt jetzt
   auch, falls künftig Sektionen ohne Head gebaut werden. */
#top .vc-eh > :first-child { margin-top: 0 !important; }
#top .vc-eh > :last-child { margin-bottom: 0 !important; }


/* ============================================================
   §51 · MOBILE (07.09.2026) — Startseite Runde 1
   ============================================================ */

/* — 51.1 TOP-BAR einzeilig: 3 Zielgruppen-Links kompakt in einer
   Reihe, Telefon mobil ausgeblendet (steht im Footer + Kontakt;
   alternativ Topbar ganz aus: #top #header_meta{display:none}). */
@media only screen and (max-width: 767px) {
  #top #header_meta {
    min-height: 0;
    padding: 11px 0 9px !important;   /* Luft oben/unten — klebte am Rand (12.09.) */
  }
  #top #header_meta .container { padding: 0 10px !important; }
  #top #header_meta .phone-info { display: none !important; }
  #top #header_meta .sub_menu { float: none !important; width: 100% !important; text-align: center; }
  #top #header_meta .sub_menu > ul {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  #top #header_meta .sub_menu > ul > li {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;   /* Trennstriche raus — brauchen Platz */
  }
  #top #header_meta .sub_menu > ul > li > a {
    font-size: 12px !important;        /* war 10px — zu klein (12.09.) */
    letter-spacing: 0.02em !important;
    padding: 4px 0 !important;
    line-height: 1.2 !important;
  }
}
@media only screen and (max-width: 359px) {
  #top #header_meta .sub_menu > ul { gap: 12px; }
  #top #header_meta .sub_menu > ul > li > a { font-size: 11px !important; }
}


/* — 51.2 HERO-UMSCHALTER (07.09.): SR-Slider nur ≥990px; darunter
   statischer Avia-Hero (Klasse vc-only-mobile). Der Slider-Reihe
   im Builder die Klasse vc-only-desktop geben. */
@media only screen and (max-width: 989px) {
  #top .vc-only-desktop { display: none !important; }
}
@media only screen and (min-width: 990px) {
  #top .vc-only-mobile { display: none !important; }
}


/* — 51.3 ENFOLD-SLIDESHOW als Hero-Bild (08.09.): Easy Slider in
   der Bild-Zelle der Mobile-Hero-Reihe (Klasse vc-hero__img auf
   dem Slideshow-Element) → füllt die Zelle wie das av_image. */
#top .av-layout-grid-container .flex_cell:has(.avia-slideshow.vc-hero__img) { overflow: hidden; }
#top .avia-slideshow.vc-hero__img,
#top .avia-slideshow.vc-hero__img > ul,
#top .avia-slideshow.vc-hero__img .avia-slideshow-inner {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}
#top .avia-slideshow.vc-hero__img li,
#top .avia-slideshow.vc-hero__img li a,
#top .avia-slideshow.vc-hero__img li img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center 25% !important;
}
/* Punkte-Navigation dezent auf dem Foto: */
#top .avia-slideshow.vc-hero__img .avia-slideshow-dots {
  bottom: 14px;
}
#top .avia-slideshow.vc-hero__img .avia-slideshow-dots a {
  background: rgba(252, 248, 238, 0.5);
  border: none;
}
#top .avia-slideshow.vc-hero__img .avia-slideshow-dots a.active {
  background: var(--vc-cream);
}


/* — 51.4 MOBILE-SLIDER TYPO (09.09.): Das Mobile/Tablet-SR-Modul
   nutzt Title/Description-TEXT-Layer (kein HTML-Layer). Klassen
   im Editor gesetzt: Column-41 = vc-rs-hero, Title = vc-h1,
   Description = vc-lede. SR schreibt Font inline auf den Layer →
   hier hart überstimmen. */
#top .vc-rs-hero .vc-h1,
#top .sr7-layer.vc-h1 {
  font-family: 'baskerville-custom', 'Libre Baskerville', Georgia, serif !important;
  font-size: clamp(32px, 8.5vw, 44px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  font-weight: 400 !important;
  color: var(--vc-ink) !important;
  text-align: left !important;
}
#top .vc-rs-hero .vc-lede,
#top .sr7-layer.vc-lede {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: var(--vc-ink-soft) !important;
  text-align: left !important;
}
#top .sr7-layer.vc-eyebrow {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--vc-red) !important;
  text-align: left !important;
}


/* — 51.5 MOBILE-SLIDER: BILD-REIHE GEDECKELT (11.09.). Das
   Mobil/Tablet-SR-Modul (Klasse vc-msl-img auf der Bild-Reihe,
   je Slide via Attributes gesetzt) — Editor-Höhenfelder griffen
   nicht, daher per CSS: Bildband oben fix, Foto als Cover,
   Text-Reihe rückt nach (SR7-Zonen stapeln Reihen im Flow). */
/* (51.5 ENTFERNT 11.09. — Slider-Geometrie wird ausschließlich im SR-Editor gepflegt; CSS macht beim Mobile-Modul nur noch Typo, §51.4.) */


/* ============================================================
   §52 · MOBILE SCHNELLZUGRIFF-LEISTE (12.09.2026)
   Fixierte Leiste am unteren Rand <990px: drei GLEICHWERTIGE
   Felder in Burgundy, getrennt durch 1px-Linie in Buttonfarbe
   +30% Helligkeit (#8C5C63), Icons statt Ziffern.
   Markup: child-theme/functions.php, Punkt 7.
   ============================================================ */
#top .vc-mobile-bar { display: none; }

@media only screen and (max-width: 989px) {
  /* Top-Bar mobil aus — Zielgruppen stehen im Burger + hier unten */
  #top #header_meta { display: none !important; }

  #top .vc-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--vc-red);
    border-top: 1px solid #8C5C63;
    padding: 0 0 env(safe-area-inset-bottom);
    font-family: 'montserrat-custom', 'Montserrat', sans-serif;
  }
  #top .vc-mobile-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 62px;
    padding: 10px 6px;
    text-decoration: none;
    background: var(--vc-red);
    color: var(--vc-cream) !important;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    border-right: 1px solid #8C5C63;   /* Trennlinie = Buttonfarbe +30% hell */
  }
  #top .vc-mobile-bar a:last-child { border-right: none; }
  #top .vc-mobile-bar a:hover,
  #top .vc-mobile-bar a:focus,
  #top .vc-mobile-bar a:active { color: #fff !important; background: var(--vc-red); }
  #top .vc-mobile-bar__ico {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    fill: none;
  }
  /* Marken-Signet (Favicon) — dunkles Rot auf Rot wäre unsichtbar,
     daher auf Cream eingefärbt; gleiche optische Größe wie die Linien-Icons */
  #top .vc-mobile-bar__ico--brand {
    width: 26px;                 /* Signet ist querformatig → optisch etwas größer */
    height: 20px;
    object-fit: contain;
    /* kein Filter nötig — PNG liegt bereits in Cream vor */
  }

  /* Leiste verdeckt nichts */
  #top #wrap_all { padding-bottom: 66px; }
  #top #scroll-top-link { bottom: 78px !important; }
}
@media only screen and (max-width: 359px) {
  #top .vc-mobile-bar a { font-size: 10px; letter-spacing: 0.04em; }
}


/* ============================================================
   §53 · DREIER-KARTENREIHE (12.09.2026)
   Wie vc-cards2, aber drei gleich breite Karten über die volle
   Content-Breite (D27 /leistungen/). Ab 900px dreispaltig,
   darunter einspaltig gestapelt.
   ============================================================ */
#top .vc-cards3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-top: 56px;
  max-width: none;
}
#top .vc-eh .vc-cards3 { max-width: none; }
@media (max-width: 899px) {
  #top .vc-cards3 { grid-template-columns: 1fr; gap: 20px; }
}


/* ============================================================
   §54 · GRAVITY FORMS MOBIL EINSPALTIG (12.09.2026)
   GF 2.9 hält die 1/2-Spalten (gfield--width-half u. ä.) auch
   auf kleinen Screens nebeneinander → Felder zu schmal.
   Unter 768px: jedes Feld volle Breite. Gilt für alle Formulare
   (Startseite, /kontakt/, /initiativbewerbung/).
   ============================================================ */
@media only screen and (max-width: 767px) {
  #top .gform_wrapper .gform_fields {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  #top .gform_wrapper .gfield,
  #top .gform_wrapper .gfield--width-half,
  #top .gform_wrapper .gfield--width-third,
  #top .gform_wrapper .gfield--width-two-thirds,
  #top .gform_wrapper .gfield--width-quarter {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Alte GF-Spaltenklassen (pre-2.5) ebenfalls umbrechen: */
  #top .gform_wrapper .gf_left_half,
  #top .gform_wrapper .gf_right_half,
  #top .gform_wrapper .gf_left_third,
  #top .gform_wrapper .gf_middle_third,
  #top .gform_wrapper .gf_right_third {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Mehrteilige Felder (Name Vor-/Nachname) ebenfalls stapeln: */
  #top .gform_wrapper .ginput_complex span {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 12px;
  }
}


/* — 54.2 NACHSCHÄRFUNG (12.09.): §54 griff nicht — GF 2.9 setzt
   das Spaltenraster auf .gform_wrapper.gravity-theme .gform_fields
   (12-Spalten-Grid) und die Feldbreite per [class*="gfield--width-"].
   Jetzt exakt diese Selektoren, Breakpoint auf 989px (inkl.
   Tablet-Portrait). Dazu: Luft zwischen Text und Formular in
   ALLEN roten Anfrage-Sektionen (nicht nur .vc-anfrage). */
@media only screen and (max-width: 989px) {
  #top .gform_wrapper.gravity-theme .gform_fields,
  #top .gform_wrapper .gform_fields {
    display: grid !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 22px !important;
  }
  #top .gform_wrapper .gform_fields > .gfield,
  #top .gform_wrapper .gform_fields > [class*="gfield--width-"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Abstand Text → Formular (Startseite + alle Anfrage-Sektionen) */
#top .vc-anfrage .gform_wrapper,
#top .av_color_footer_color .gform_wrapper,
#top .vc-section .gform_wrapper {
  margin-top: clamp(40px, 5vw, 64px) !important;
}


/* — 54.3 (12.09.): Auf der Startseite blieb das Formular 2-spaltig —
   die älteren Rot-Scopes (.vc-cta-red / .vc-form--on-red /
   .av_color_footer_color, §21) setzen das 12-Spalten-Raster mit
   höherer Spezifität als §54.2. Hier dieselben Scopes, mobil. */
@media only screen and (max-width: 989px) {
  #top .vc-cta-red .gform_wrapper .gform_fields,
  #top .vc-form--on-red .gform_wrapper .gform_fields,
  #top .av_color_footer_color .gform_wrapper .gform_fields,
  #top .vc-anfrage .gform_wrapper .gform_fields,
  #top .vc-formwrap .gform_wrapper .gform_fields {
    display: grid !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 22px !important;
  }
  #top .vc-cta-red .gform_wrapper .gform_fields > .gfield,
  #top .vc-form--on-red .gform_wrapper .gform_fields > .gfield,
  #top .av_color_footer_color .gform_wrapper .gform_fields > .gfield,
  #top .vc-anfrage .gform_wrapper .gform_fields > .gfield,
  #top .vc-formwrap .gform_wrapper .gform_fields > .gfield,
  #top .vc-cta-red .gform_wrapper .gform_fields > .gfield.gfield--width-half,
  #top .vc-form--on-red .gform_wrapper .gform_fields > .gfield.gfield--width-half,
  #top .av_color_footer_color .gform_wrapper .gform_fields > .gfield.gfield--width-half {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ============================================================
   §55 · MENÜPUNKTE AUSBLENDEN (12.09.2026)
   Klasse im WP-Menü eintragen: Design → Menüs → Menüpunkt
   aufklappen → Feld "CSS-Klassen" (falls unsichtbar: oben rechts
   "Ansicht anpassen" → CSS-Klassen anhaken).
     vc-hide-mobile   → nur im Burger/Mobil aus (≥990px sichtbar)
     vc-hide-desktop  → nur im Desktop-Menü aus (mobil sichtbar)
     vc-hide          → überall aus
   ============================================================ */
/* Enfold klont die Menüpunkte in die Burger-Liste #av-burger-menu-ul
   (und in #mobile-advanced) — alle Container mitnehmen, sonst greift
   die Klasse im Overlay nicht. */
#top li.vc-hide,
#top #av-burger-menu-ul li.vc-hide,
#top #mobile-advanced li.vc-hide,
#top .av-burger-overlay li.vc-hide,
html li.vc-hide { display: none !important; }

@media only screen and (max-width: 989px) {
  #top li.vc-hide-mobile,
  #top #av-burger-menu-ul li.vc-hide-mobile,
  #top #mobile-advanced li.vc-hide-mobile,
  #top .av-burger-overlay li.vc-hide-mobile,
  #top .av-burger-overlay-scroll li.vc-hide-mobile,
  html li.vc-hide-mobile { display: none !important; }
}
@media only screen and (min-width: 990px) {
  #top li.vc-hide-desktop,
  #top #avia-menu li.vc-hide-desktop,
  html li.vc-hide-desktop { display: none !important; }
}


/* ============================================================
   §56 · FOOTER MOBIL: KOMPAKTER (12.09.2026)
   Die Kontaktzeilen (Telefon/E-Mail) und die Link-Liste
   (Gesprächstermin, LinkedIn) standen mobil zu weit auseinander
   — Absatzmargen aus dem Textblock. Nur <990px.
   ============================================================ */
@media only screen and (max-width: 989px) {
  #top .vc-foot-cta .vc-loc__contact,
  #top .vc-foot-cta .vc-loc__links { margin-top: 14px !important; padding-top: 14px !important; }

  #top .vc-foot-cta .vc-loc p,
  #top .vc-foot-cta .vc-loc__contact p,
  #top .vc-foot-cta .vc-loc__links p,
  #top .vc-foot-cta .vc-loc li,
  #top .vc-foot-cta .avia_textblock p {
    margin: 0 0 8px !important;
    line-height: 1.45 !important;
  }
  #top .vc-foot-cta .vc-loc p:last-child,
  #top .vc-foot-cta .avia_textblock p:last-child { margin-bottom: 0 !important; }

  #top .vc-foot-cta .vc-loc ul,
  #top .vc-foot-cta .vc-loc__links ul { margin: 0 !important; }
  #top .vc-foot-cta .vc-loc ul li { margin: 0 0 8px !important; }
  #top .vc-foot-cta .vc-loc ul li:last-child { margin-bottom: 0 !important; }

  /* Spaltenabstand beim Stapeln ebenfalls straffen */
  #top .vc-foot-cta .flex_column.vc-loc,
  #top .vc-foot-cta .av_one_third.vc-loc {
    margin-top: 24px !important;
    padding-top: 20px !important;
  }
}


/* ============================================================
   §57 · NUMMERN-REIHE: TYPO + RAHMEN (12.09.2026)
   (a) Die Schritt-Texte liefen in Baskerville (Heading-Erbe) —
       sie sind Fließtext, also Montserrat wie Checklisten.
   (b) Bei 8 Elementen in 4 Spalten: linke Trennlinie nur, wenn
       das Element NICHT am Zeilenanfang steht; Zeilentrenner
       oben ab Zeile 2. Ersetzt die alte "+ .vc-steps__item"-Regel,
       die bei Umbrüchen falsche Kanten zog.
   ============================================================ */
#top .vc-steps__h,
#top .vc-steps--on-red .vc-steps__h {
  font-family: 'montserrat-custom', 'Montserrat', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

@media only screen and (min-width: 990px) {
  #top .vc-steps4 .vc-steps__item { border-left: 1px solid var(--vc-rule) !important; }
  #top .vc-steps4.vc-steps--on-red .vc-steps__item { border-left-color: var(--vc-rule-on-red) !important; }
  #top .vc-steps4 .vc-steps__item:nth-child(4n+1) { border-left: 0 !important; }
  #top .vc-steps4 .vc-steps__item:nth-child(n+5) { border-top: 1px solid var(--vc-rule) !important; }
  #top .vc-steps4.vc-steps--on-red .vc-steps__item:nth-child(n+5) { border-top-color: var(--vc-rule-on-red) !important; }
}
@media only screen and (max-width: 989px) and (min-width: 601px) {
  #top .vc-steps4 .vc-steps__item { border-left: 1px solid var(--vc-rule-on-red) !important; }
  #top .vc-steps4 .vc-steps__item:nth-child(odd) { border-left: 0 !important; }
  #top .vc-steps4 .vc-steps__item:nth-child(n+3) { border-top: 1px solid var(--vc-rule-on-red) !important; }
}
@media only screen and (max-width: 600px) {
  #top .vc-steps4 .vc-steps__item { border-left: 0 !important; padding: 28px 0; }
  #top .vc-steps4 .vc-steps__item:nth-child(n+2) { border-top: 1px solid var(--vc-rule-on-red) !important; }
}


/* — 57.2 (12.09.): ES-Vorgehen jetzt 6 Schritte als 3×2 im
   engeren Inhaltsbereich (vc-steps3) — 4×2 mit halbleerer Zeile
   wirkte unruhig. Rahmen analog zu §57: links nur, wenn nicht
   am Zeilenanfang; Zeilentrenner ab Zeile 2. */
#top .vc-steps3 { max-width: 1080px; }
@media only screen and (min-width: 990px) {
  #top .vc-steps3 .vc-steps__item { border-left: 1px solid var(--vc-rule) !important; }
  #top .vc-steps3.vc-steps--on-red .vc-steps__item { border-left-color: var(--vc-rule-on-red) !important; }
  #top .vc-steps3 .vc-steps__item:nth-child(3n+1) { border-left: 0 !important; }
  #top .vc-steps3 .vc-steps__item:nth-child(n+4) { border-top: 1px solid var(--vc-rule) !important; }
  #top .vc-steps3.vc-steps--on-red .vc-steps__item:nth-child(n+4) { border-top-color: var(--vc-rule-on-red) !important; }
}
@media only screen and (max-width: 989px) {
  #top .vc-steps3 { grid-template-columns: 1fr !important; }
  #top .vc-steps3 .vc-steps__item { border-left: 0 !important; }
  #top .vc-steps3 .vc-steps__item:nth-child(n+2) { border-top: 1px solid var(--vc-rule-on-red) !important; }
}


/* ============================================================
   §58 · MOBILE SEITENKANTE VEREINHEITLICHT (12.09.2026)
   Befund (Nutzer-Screens): auf Mobil zogen drei Quellen
   unterschiedliche Einzüge —
     (a) §49.2 Klammer-Textzellen: 80px fix (Desktop-SR-Kante,
         galt bis 320px runter → Text klebte relativ weit innen,
         Buttons brachen um),
     (b) §29 vc-eh-Sektionen: .container 24px,
     (c) Enfold-Defaults: .container 50px + Spalten-Padding
         (rote Foot-CTA, GF-Sektionen, Tiefenschicht).
   Folge: je Sektion eine andere linke/rechte Kante, obwohl der
   Inhalt mobil überall zentriert läuft.

   Fix: EINE Variable --vc-edge-m, fluid und für alle
   Sektionstypen identisch — Klammern, Farb-Sektionen, vc-eh,
   Tiefenschicht, Foot-CTA, Formular-Sektionen. Ab 990px bleibt
   alles unverändert (§49 gilt weiter).
   Werte: 20px (320er) → 32px (ab ~580px Viewport).
   ============================================================ */
@media only screen and (max-width: 989px) {
  #top { --vc-edge-m: clamp(22px, 5.8vw, 34px); }   /* 13.09.: +2px auf Nutzerwunsch */

  /* — 58.1 Klammern (Hero/Split/Talk), beide Bauarten — */
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-hero__body,
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-split__body,
  .responsive #top #wrap_all .flex_cell.av-gridrow-cell.vc-talk__body,
  .responsive #top #wrap_all .avia-section.vc-hero .flex_column.vc-hero__body,
  .responsive #top #wrap_all .avia-section.vc-split .flex_column.vc-split__body,
  .responsive #top #wrap_all .avia-section.vc-talk .flex_column.vc-talk__body {
    padding: clamp(40px, 8vw, 64px) var(--vc-edge-m) !important;
    justify-items: stretch !important;   /* Inhalt darf die Kante nutzen (war start + 640px) */
  }
  .responsive #top #wrap_all .vc-hero__body .avia_textblock,
  .responsive #top #wrap_all .vc-split__body .avia_textblock,
  .responsive #top #wrap_all .vc-talk__body .avia_textblock,
  .responsive #top #wrap_all .vc-hero__body .avia_codeblock,
  .responsive #top #wrap_all .vc-split__body .avia_codeblock,
  .responsive #top #wrap_all .vc-talk__body .avia_codeblock {
    max-width: none !important;          /* 640px-Kante ist mobil wirkungslos, sonst Rest-Asymmetrie */
  }

  /* — 58.2 Alle übrigen vc-Sektionen: Container = dieselbe Kante — */
  #top .avia-section.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) > .container,
  #top .av-section-color-overlay-wrap.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) > .container,
  #top .vc-section:has(.vc-eh) > .container,
  #top .avia-section.vc-ton-deep > .container,
  #top .avia-section.vc-cta-red > .container,
  #top .avia-section.vc-foot-cta > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--vc-edge-m) !important;
    padding-right: var(--vc-edge-m) !important;
    box-sizing: border-box !important;
  }
  /* Enfold-Spaltenpolster INNERHALB dieser Container auf 0 —
     sonst addiert sich je Sektion ein zweiter, ungleicher Einzug. */
  #top .avia-section.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) > .container > .template-page,
  #top .avia-section.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) .entry-content-wrapper,
  #top .avia-section.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) .flex_column,
  #top .avia-section.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) .av_one_full,
  #top .avia-section.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) .avia_textblock,
  #top .avia-section.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) .avia_codeblock,
  #top .avia-section.vc-section:not(.vc-hero):not(.vc-split):not(.vc-talk) .av_textblock_section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* — 58.3 Module, die eigene Breiten/Einzüge mitbringen — */
  #top .vc-eh,
  #top .vc-eh__head,
  #top .vc-eh .vc-lede,
  #top .vc-deep,
  #top .vc-steps,
  #top .vc-steps3,
  #top .vc-steps4,
  #top .vc-checklist,
  #top .vc-cards2,
  #top .vc-cards3,
  #top .vc-cards4,
  #top .vc-statline,
  #top .vc-trust,
  #top .vc-stats-row,
  #top .vc-faq,
  #top .vc-quote,
  #top .vc-pay__note {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Karten behalten ihr INNERES Polster (Rahmen sitzt auf der Kante) */
  #top .vc-aud-card,
  #top .vc-role,
  #top .vc-splitc,
  #top .vc-reach { padding-left: 24px !important; padding-right: 24px !important; }

  /* — 58.4 Foot-CTA / Standort-Spalten: kein Extra-Einzug — */
  #top .vc-foot-cta .vc-loc,
  #top .vc-foot-cta .flex_column.vc-loc:not(.first),
  #top .vc-foot-cta .av_one_third.vc-loc:not(.first) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* — 58.5 Gravity Forms sitzen flush im Sektions-Container — */
  #top .gform_wrapper,
  #top .vc-formwrap,
  #top .vc-cta-red .gform_wrapper,
  #top .av_color_footer_color .gform_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}


/* ============================================================
   §59 · BUTTONS MOBIL DURCHGEHEND FULL-WIDE (13.09.2026)
   Befund (Nutzer-Screens): Klammer-/CTA-Reihen waren mobil
   bereits 100% breit (§23 bei ≤600px), Karten-Buttons
   (vc-aud-card, vc-role, vc-splitc, vc-cards*) blieben
   inhaltsbreit und linksbündig → gemischtes Bild.
   Entscheid: full-wide überall. Gilt bis 767px, darüber
   (Tablet/Desktop) unverändert inhaltsbreit.
   Umschalten auf inhaltsbreit = width:auto in 59.1.
   ============================================================ */
@media only screen and (max-width: 767px) {

  /* — 59.1 Jeder Inhalts-Button volle Breite, Label zentriert — */
  #top .vc-section a.vc-btn,
  #top .vc-eh a.vc-btn,
  #top .vc-deep a.vc-btn,
  #top .vc-aud-card a.vc-btn,
  #top .vc-role a.vc-btn,
  #top .vc-role__cta a.vc-btn,
  #top .vc-splitc a.vc-btn,
  #top .vc-splitc__cta a.vc-btn,
  #top .vc-cards2 a.vc-btn,
  #top .vc-cards3 a.vc-btn,
  #top .vc-cards4 a.vc-btn,
  #top .vc-aud__cta a.vc-btn,
  #top .vc-cta-red a.vc-btn,
  #top .vc-cta-red__contact a.vc-btn,
  #top .vc-foot-cta a.vc-btn,
  #top .vc-hero__cta a.vc-btn,
  #top .vc-split__cta a.vc-btn,
  #top .vc-talk__cta a.vc-btn,
  #top .vc-eh__cta a.vc-btn,
  #top .vc-cta-row a.vc-btn {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    align-self: stretch !important;   /* hebt align-self:flex-start (§40 Rot-Block) auf */
  }

  /* — 59.2 CTA-Reihen stapeln statt umbrechen (gleiche Lücke) — */
  #top .vc-hero__cta,
  #top .vc-split__cta,
  #top .vc-talk__cta,
  #top .vc-eh__cta,
  #top .vc-cta-row,
  #top .vc-role__cta,
  #top .vc-splitc__cta,
  #top .vc-aud__cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* — 59.3 Einzelne Buttons ohne Wrapper (Karten, Textblöcke) — */
  #top .vc-aud-card p:has(> a.vc-btn),
  #top .vc-role p:has(> a.vc-btn),
  #top .vc-splitc p:has(> a.vc-btn),
  #top .vc-eh p:has(> a.vc-btn) {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-right: 0 !important;
  }

  /* Abstand Karten-Button zum Text bleibt ruhig */
  #top .vc-aud-card a.vc-btn { margin-top: 8px !important; }
}


/* ============================================================
   §60 · FOOT-CTA MOBIL: LÜCKE TRENNLINIE → „HAUPTSITZ" (13.09.2026)
   Befund: zwischen der horizontalen Trennlinie (border-top der
   gestapelten Standort-Spalte) und dem Eyebrow standen ~150px.
   Addiert aus: §33 padding-top 32 + margin-top 32, Enfold-
   Spaltenabstand auf Mobil (~30px) und dem eigenen margin-top
   des Eyebrows (§28). Hier auf EINEN Wert gebündelt.
   ============================================================ */
@media only screen and (max-width: 989px) {
  #top .vc-foot-cta .flex_column.vc-loc:not(.first),
  #top .vc-foot-cta .av_one_third.vc-loc:not(.first) {
    padding-top: 26px !important;
    margin-top: 26px !important;
  }
  /* Enfold-Spaltenabstand + Eigen-Margins der ersten Kinder raus */
  #top .vc-foot-cta .vc-loc > *:first-child,
  #top .vc-foot-cta .vc-loc .av_one_full:first-child,
  #top .vc-foot-cta .vc-loc .flex_column_table:first-child,
  #top .vc-foot-cta .vc-loc .av_textblock_section:first-child,
  #top .vc-foot-cta .vc-loc .avia_textblock > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #top .vc-foot-cta .vc-loc .vc-eyebrow,
  #top .vc-foot-cta .vc-loc .av-special-heading.vc-eyebrow,
  #top .vc-foot-cta .vc-loc .av-special-heading.vc-eyebrow .av-special-heading-tag {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Kopfspalte: kein Extra-Polster unter dem Lede (die Linie
     gehört zur Standort-Spalte, nicht zum Kopf) */
  #top .vc-foot-cta .vc-foot-cta__head-left,
  #top .vc-foot-cta .flex_column.first {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  #top .vc-foot-cta .vc-foot-cta__head-left > *:last-child,
  #top .vc-foot-cta .flex_column.first .avia_textblock > *:last-child {
    margin-bottom: 0 !important;
  }
}


/* ============================================================
   §60 · FOOTER MOBIL: ABSTAND TRENNLINIE → SPALTENKOPF (13.09.2026)
   Befund: ungleicher Abstand unter den horizontalen Trennlinien.
   - Spalte 2/3 tragen die Linie selbst (border-top) → Abstand
     Linie→Label = padding-top (20px, §56).
   - Spalte 1 („Hauptsitz") steht unter der Kopf-Trennlinie und
     bekam zusätzlich margin-top 24px (§56) + padding-top 20px
     = 44px → sichtbar größerer Abstand als bei Frankfurt.
   Fix: EIN Wert --vc-loc-gap für Linie→Kopf in allen Spalten;
   der Spaltenabstand (Luft ÜBER der Linie) läuft separat über
   margin-top. Überschreibt §56 und die Desktop-Negativmarge.
   ============================================================ */
@media only screen and (max-width: 989px) {
  #top .vc-foot-cta { --vc-loc-gap: 20px; --vc-loc-sep: 28px; }

  /* Spalte 1 („Hauptsitz"): sitzt unter der Kopf-Trennlinie */
  #top .vc-foot-cta .flex_column.vc-loc.first,
  #top .vc-foot-cta .av_one_third.vc-loc.first,
  #top .vc-foot-cta .flex_column.vc-loc:first-of-type,
  #top .vc-foot-cta .av_one_third.vc-loc:first-of-type {
    margin-top: 0 !important;
    padding-top: var(--vc-loc-gap) !important;
  }

  /* Spalte 2/3: Luft über der eigenen Linie + gleicher Abstand darunter */
  #top .vc-foot-cta .flex_column.vc-loc:not(.first),
  #top .vc-foot-cta .av_one_third.vc-loc:not(.first) {
    margin-top: var(--vc-loc-sep) !important;
    padding-top: var(--vc-loc-gap) !important;
  }

  /* Kein zusätzlicher Vorlauf aus Textblock/Label */
  #top .vc-foot-cta .vc-loc > .flex_column_inner,
  #top .vc-foot-cta .vc-loc .avia_textblock,
  #top .vc-foot-cta .vc-loc .av_textblock_section { margin-top: 0 !important; padding-top: 0 !important; }
  #top .vc-foot-cta .vc-loc .vc-eyebrow,
  #top .vc-foot-cta .vc-loc .av-special-heading:first-child,
  #top .vc-foot-cta .vc-loc .avia_textblock > *:first-child { margin-top: 0 !important; }
  #top .vc-foot-cta .vc-loc .av-special-heading { padding-bottom: 0 !important; }
}


/* ============================================================
   §61 · HERO-UMSCHALTER AUF TABLET (13.09.2026)
   Befund (Nutzer, iPad Pro 11 = 834px CSS-Breite): der
   DESKTOP-Slider war sichtbar — Halb-Bild links, Text
   überlappend. Zwei Ursachen:
     (a) §51.2 schaltet erst unter 990px um → iPad quer
         (1024/1180px) bleibt in jedem Fall Desktop,
     (b) der Umschalter greift NUR, wenn die Slider-Reihe im
         Builder die Klasse vc-only-desktop trägt; fehlt sie,
         bleibt der Slider stehen.
   Fix: Grenze auf 1329px — Nutzer-Befund 13.09.: ab 1330px
   Viewport sitzt der Desktop-Slider korrekt (Halb-Bild + Text
   in einer Linie), darunter kippt die Konstruktion. Deckt iPad
   hoch und quer sowie kleine Laptops ab. Zusätzlich
   klassenunabhängiger Griff aufs SR7-Modul.
   Ersetzt §51.2 (bleibt als Basis stehen, wird hier erweitert).
   ============================================================ */
@media only screen and (max-width: 1329px) {
  #top .vc-only-desktop { display: none !important; }
  /* KORREKTUR 13.09.: NICHT pauschal alle rs-module verstecken — das
     mobile SR-Modul (§51.4) ist selbst eines und wäre mit verschwunden.
     Nur Module, die in einer als Desktop markierten Reihe liegen. */
  #top .vc-only-desktop rs-module-wrap,
  #top .vc-only-desktop rs-module,
  #top .vc-only-desktop .rev_slider_wrapper,
  #top .vc-only-desktop .forcefullwidth_wrapper_tp_banner { display: none !important; }
  #top .vc-only-mobile { display: block !important; }
}
@media only screen and (min-width: 1330px) {
  #top .vc-only-mobile { display: none !important; }
}


/* ============================================================
   §62 · KLAMMER-BILD SCHLIESST NACH UNTEN (13.09.2026)
   Befund (Nutzer, 1330px): unter dem Klammer-Bild blieb ein
   Cream-Streifen bis zur nächsten Sektion — erst ab ~1454px
   bündig. Ursache: bei der RASTERREIHEN-Bauart (av_layout_row,
   §49) bestimmt die Text-Zelle die Reihenhöhe. Das Bild liegt
   im normalen Fluss und behält seine Eigenhöhe (Breite ÷
   Seitenverhältnis); wird die Text-Zelle höher — was passiert,
   sobald die Spalte schmaler wird und der Text mehr Zeilen
   braucht — entsteht unter dem Bild der Rest. Ab ~1454px ist
   der Text kurz genug, beide Höhen passen zufällig.
   Fix: Bild wie in §43.3 (Farb-Sektions-Bauart) absolut über
   die ganze Zelle legen und als Cover skalieren — die Zelle
   folgt dann IMMER der Reihenhöhe, unabhängig vom Textumfang.
   Nur ≥990px (gestapelt gilt weiter min-height aus §8/§15/§16).
   ============================================================ */
@media only screen and (min-width: 990px) {
  /* Zelle = Positionsrahmen, volle Reihenhöhe */
  #top .av-layout-grid-container .flex_cell.vc-hero__media,
  #top .av-layout-grid-container .flex_cell.vc-split__media,
  #top .av-layout-grid-container .flex_cell.vc-talk__media {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    height: auto !important;
    align-self: stretch !important;
  }
  /* Wrapper-Kette bis zum Bild durchreichen */
  #top .av-layout-grid-container .flex_cell.vc-hero__media > .flex_cell_inner,
  #top .av-layout-grid-container .flex_cell.vc-split__media > .flex_cell_inner,
  #top .av-layout-grid-container .flex_cell.vc-talk__media > .flex_cell_inner {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #top .av-layout-grid-container .flex_cell.vc-hero__media .flex_column,
  #top .av-layout-grid-container .flex_cell.vc-split__media .flex_column,
  #top .av-layout-grid-container .flex_cell.vc-talk__media .flex_column,
  #top .av-layout-grid-container .flex_cell.vc-hero__media .avia-image-container,
  #top .av-layout-grid-container .flex_cell.vc-split__media .avia-image-container,
  #top .av-layout-grid-container .flex_cell.vc-talk__media .avia-image-container,
  #top .av-layout-grid-container .flex_cell.vc-hero__media .avia-image-overlay-wrap,
  #top .av-layout-grid-container .flex_cell.vc-split__media .avia-image-overlay-wrap,
  #top .av-layout-grid-container .flex_cell.vc-talk__media .avia-image-overlay-wrap {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    display: block !important;
  }
  #top .av-layout-grid-container .flex_cell.vc-hero__media img,
  #top .av-layout-grid-container .flex_cell.vc-split__media img,
  #top .av-layout-grid-container .flex_cell.vc-talk__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
  /* Klasse liegt beim 8.0-Muster auf dem BILD-Element statt auf der
     Zelle — dann die Elternzelle über :has greifen. */
  #top .av-layout-grid-container .flex_cell:has(.vc-hero__img),
  #top .av-layout-grid-container .flex_cell:has(.vc-split__img),
  #top .av-layout-grid-container .flex_cell:has(.vc-talk__img) {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    align-self: stretch !important;
  }
  #top .av-layout-grid-container .flex_cell:has(.vc-hero__img) > .flex_cell_inner,
  #top .av-layout-grid-container .flex_cell:has(.vc-split__img) > .flex_cell_inner,
  #top .av-layout-grid-container .flex_cell:has(.vc-talk__img) > .flex_cell_inner {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  #top .av-layout-grid-container .vc-hero__img img,
  #top .av-layout-grid-container .vc-split__img img,
  #top .av-layout-grid-container .vc-talk__img img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  /* Reihe streckt beide Zellen gleich hoch (falls Enfold sie auf
     Inhaltshöhe lässt) */
  #top .av-layout-grid-container.vc-hero,
  #top .av-layout-grid-container.vc-split,
  #top .av-layout-grid-container.vc-talk { align-items: stretch !important; }
}


/* ============================================================
   §63 · IPAD: KLAMMERN STAPELN WIE DER HERO (13.09.2026)
   Der Hero schaltet jetzt bei 1330px auf die mobile Fassung
   (§61), die Bild-Klammern standen aber bis 990px weiter
   zweispaltig → auf dem iPad (834–1180px, quer bis 1366px)
   ein Mischbild: mobiler Hero oben, schmale 50/50-Klammern
   darunter mit sehr engen Textspalten.
   Fix: gleiche Schwelle. Bis 1329px stapeln Klammern —
   Bild oben (feste Mindesthöhe), Text darunter mit der
   Mobil-Seitenkante aus §58. Ab 1330px gilt §49/§62 unverändert.
   ============================================================ */
@media only screen and (min-width: 990px) and (max-width: 1329px) {
  #top .av-layout-grid-container.vc-hero,
  #top .av-layout-grid-container.vc-split,
  #top .av-layout-grid-container.vc-talk {
    display: block !important;
    min-height: 0 !important;
  }
  #top .av-layout-grid-container.vc-hero > .flex_cell,
  #top .av-layout-grid-container.vc-split > .flex_cell,
  #top .av-layout-grid-container.vc-talk > .flex_cell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  /* Bild-Zelle: fester Bildstreifen, Cover (kein §62-Absolutmodus) */
  #top .av-layout-grid-container .flex_cell.vc-hero__media,
  #top .av-layout-grid-container .flex_cell.vc-split__media,
  #top .av-layout-grid-container .flex_cell.vc-talk__media,
  #top .av-layout-grid-container .flex_cell:has(.vc-hero__img),
  #top .av-layout-grid-container .flex_cell:has(.vc-split__img),
  #top .av-layout-grid-container .flex_cell:has(.vc-talk__img) {
    position: relative !important;
    height: clamp(320px, 38vw, 460px) !important;
    overflow: hidden !important;
  }
  #top .av-layout-grid-container .flex_cell.vc-hero__media > .flex_cell_inner,
  #top .av-layout-grid-container .flex_cell.vc-split__media > .flex_cell_inner,
  #top .av-layout-grid-container .flex_cell.vc-talk__media > .flex_cell_inner,
  #top .av-layout-grid-container .flex_cell:has(.vc-hero__img) > .flex_cell_inner,
  #top .av-layout-grid-container .flex_cell:has(.vc-split__img) > .flex_cell_inner,
  #top .av-layout-grid-container .flex_cell:has(.vc-talk__img) > .flex_cell_inner {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  #top .av-layout-grid-container .flex_cell.vc-hero__media img,
  #top .av-layout-grid-container .flex_cell.vc-split__media img,
  #top .av-layout-grid-container .flex_cell.vc-talk__media img,
  #top .av-layout-grid-container .vc-hero__img img,
  #top .av-layout-grid-container .vc-split__img img,
  #top .av-layout-grid-container .vc-talk__img img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  /* Text-Zelle: Mobil-Kante, keine 640px-Kappung, volle Breite */
  #top .av-layout-grid-container .flex_cell.vc-hero__body,
  #top .av-layout-grid-container .flex_cell.vc-split__body,
  #top .av-layout-grid-container .flex_cell.vc-talk__body {
    padding: clamp(48px, 6vw, 72px) clamp(28px, 4.5vw, 56px) !important;
    display: block !important;
    min-height: 0 !important;
  }
  #top .vc-hero__body .avia_textblock,
  #top .vc-split__body .avia_textblock,
  #top .vc-talk__body .avia_textblock,
  #top .vc-hero__body .avia_codeblock,
  #top .vc-split__body .avia_codeblock,
  #top .vc-talk__body .avia_codeblock { max-width: 760px !important; }
}