/* ============================================================
   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(48px, 5vw, 72px) clamp(48px, 11vw, 240px) clamp(48px, 5vw, 72px) clamp(24px, 2vw, 36px) !important;
  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 20px !important;
    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(48px, 5vw, 72px) clamp(40px, 8vw, 190px) clamp(48px, 5vw, 72px) clamp(24px, 2vw, 36px) !important;
  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 20px !important; }
}


/* ─── 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(48px, 5vw, 72px) clamp(48px, 11vw, 240px) clamp(48px, 5vw, 72px) clamp(24px, 2vw, 36px) !important;   /* 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 20px !important;
    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(48px, 5vw, 72px) clamp(40px, 8vw, 190px) clamp(48px, 5vw, 72px) clamp(24px, 2vw, 36px) !important;
  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 20px !important;
    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); }

@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: 600px !important; }
/* 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; }
}