/*
Theme Name: Divi Child Theme
Description: DIVI ChildTheme für die Raphael Gesellschaft gGmbH inkl. Funcions und angepasster Style.css
Author: Christophorus Dienstleistungen gGmbH
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Template: Divi
Version: 1.1.0
Text Domain: divi-child-theme
*/

/* ==========================================================
   Inhaltsübersicht
   1. Globale Variablen & Tokens (Menü & Buttons)
   2. Menü-Kacheln (.rg-menu-tiles)
   2.1 Menü-Buttons (.rg-menu-buttons)
   3. Hero-Bereich (.rg-hero2)
   4. Globale Button-Utilities
   5. Globale Zeilenbreite
   ========================================================== */

/* ==========================================================
   Raphael gGmbH – Master Stylesheet (Final, 04.09.2025 mit allen Fixes)
   
   Überblick
   - Enthält globale Variablen, Menü-Kachel-Layout, Hero v2 und Button-Styles
   - Optimierungen für Desktop/Tablet/Mobil inkl. Divi-spezifischer Klassen
   - Fokus: konsistente Abstände, Hover-Feedback, klare Typografie, volle Breite
   
   Herkunft/Zusammenführung
   - Basis: style.css (Server-Version) + Hero2 aus Original _style.css
   - Anpassungen: Hero2 Card Fix (Overlap, kein Radius), alte Split-Logik,
     doppelte Höhe, gleiche Breite, Schriftfarben, Hover, Margin-Left/Right Fix
   
   Hinweise zur Pflege
   - Divi Breakpoints: Desktop ≥ 981px, Tablet 768–980px, Mobil ≤ 767px
   - Klassen wie .et_pb_menu__menu stammen aus Divi und sollten unverändert
     beibehalten werden, damit die Theme-Funktionalität erhalten bleibt.
   ========================================================== */

/* ==========================================================
   1. Globale Variablen & Tokens
   ----------------------------------------------------------
   Zweck: zentrale Steuerung von Farben, Abständen und Typografie.
   Hinweis: Werte werden in den folgenden Komponenten wiederverwendet.
   ========================================================== */
:root{
  /* Menü-Kachel-Tokens */
  --rg-menu-bg: #FFFFFF;             /* Grundfläche der Kacheln */
  --rg-menu-border: #E9ECE4;         /* Standardrahmen der Kacheln */
  --rg-menu-border-strong: #D7DCCD;  /* Rahmenfarbe für aktive Zustände */
  --rg-menu-text: #6B7564;           /* Standard-Textfarbe im Menü */
  --rg-menu-brand: #8FAF4C;          /* Markenakzent (z.B. aktiv) */

  --rg-menu-radius: 0;
  --rg-menu-shadow: 0 1px 2px rgba(0,0,0,.06);
  --rg-menu-shadow-hover: 0 6px 20px rgba(0,0,0,.08);

  --rg-menu-pad-y: 48px;
  --rg-menu-pad-x: 32px;
  --rg-menu-min-h: 128px;

  --rg-menu-font-desktop: 1.2rem;
  --rg-menu-font-tablet:  1.05rem;
  --rg-menu-font-mobile:  0.95rem;
}

/* Basis-Typo-Farbe */
body,
h1,h2,h3,h4,h5,h6{
  color:#262626;
}
h1,h2,h3,h4,h5,h6{
  text-transform: uppercase;
}
/* ==========================================================
   2. Menü-Kacheln (.rg-menu-tiles)
   ----------------------------------------------------------
   Enthält Grundlayout, Hover-Zustände und responsive Varianten.
   Unterabschnitte:
     2.1 Basis-Reset
     2.2 Kachel-Optik & Interaktion
     2.3 Legacy Desktop-Spacing (Fallback)
     2.4 Mobile Layout
     2.5 Desktop Split Layout (Grid)
     2.6 Tablet-Navigation (Burger)
   ========================================================== */

/* --- 2.1 Basis-Reset ------------------------------------- */
/* Entfernt Listen-Defaults und erzeugt die flexiblen Kachelcontainer. */
.rg-menu-tiles .et_pb_menu__menu > nav > ul{
  display:flex;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
  justify-content:flex-start;
}
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li{
  margin:0;
  padding:0;
  list-style:none;
  flex:1; /* gleiche Breite für alle Items (Grid-ähnlich per Flex) */
}

/* --- 2.2 Kachel-Optik & Interaktion ---------------------- */
/* Definiert Aussehen, Abstände und Hover/Focus-Verhalten der Menülinks. */
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li > a{
  /* Layout */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  width:100%;

  /* Abmessungen */
  padding:var(--rg-menu-pad-y) var(--rg-menu-pad-x);
  min-height:var(--rg-menu-min-h);

  /* Optik */
  background:var(--rg-menu-bg);
  color:var(--rg-menu-text);
  border:1px solid var(--rg-menu-border);
  border-radius:var(--rg-menu-radius);
  box-shadow:var(--rg-menu-shadow);

  /* Typografie */
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:var(--rg-menu-font-desktop) !important;
  line-height:1.1;

  /* Interaktion */
  transition:transform .14s ease,
             box-shadow .14s ease,
             filter .14s ease,
             border-color .14s ease,
             background-color .14s ease;
}

.rg-menu-tiles .et_pb_menu__menu > nav > ul > li > a::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.08));
  opacity:0;
  transition:opacity .14s ease;
  pointer-events:none;
}

/* Anpassung: Items 1–4 Schriftfarben
   Heben die ersten vier Hauptpunkte farblich hervor; beim Hover stärkerer Kontrast.
*/
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li:nth-child(-n+4) > a {
  color: var(--color-primary);
}
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li:nth-child(-n+4) > a:hover {
  color: var(--tesc-hover-text,#000);
}

/* Zustand: Hover, Fokus & Aktiv
   Visuelles Feedback inkl. WP-Active-Klassen behält den Hover-Look dauerhaft. */
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li > a:hover,
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li > a:focus-visible,
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li > a:active,
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li.current-menu-item > a,
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li.current_page_item > a,
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li.current-menu-ancestor > a{
  background:rgba(var(--tesc-hover-rgb,143,175,76),.5) !important;
  /*border-color:rgba(var(--tesc-hover-rgb,143,175,76),.8) !important;
  box-shadow:0 0 15px rgba(var(--tesc-hover-rgb,143,175,76),.4),
             0 0 5px rgba(var(--tesc-hover-rgb,143,175,76),.5) inset,
             var(--rg-menu-shadow, 0 0 0 rgba(0,0,0,0));*/
  transform:translateY(-1px);
  outline:none;
  color:var(--tesc-hover-text,#000) !important;
}

.rg-menu-tiles .et_pb_menu__menu > nav > ul > li > a:hover::before,
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li > a:focus-visible::before,
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li.current-menu-item > a::before,
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li.current_page_item > a::before,
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li.current-menu-ancestor > a::before{
  opacity:var(--tesc-shine-o,.65);
}

/* --- 2.3 Legacy Desktop-Spacing (Fallback) ---------------- */
/* Beibehalt der ursprünglichen Margins, falls das Grid deaktiviert wird. */
@media (min-width:981px){
  .rg-menu-tiles .et_pb_menu__menu > nav > ul > li:nth-child(1) > a,
  .rg-menu-tiles .et_pb_menu__menu > nav > ul > li:nth-child(2) > a,
  .rg-menu-tiles .et_pb_menu__menu > nav > ul > li:nth-child(3) > a{
    margin-right:1.5em;
  }
  .rg-menu-tiles .et_pb_menu__menu > nav > ul > li:nth-child(4) > a{
    margin-right:0;
  }
  .rg-menu-tiles .et_pb_menu__menu > nav > ul > li:nth-child(5){
    margin-left:10em;  /* größerer Abstand zwischen Block 1–4 und 5–6 */
    margin-right:1.5em; /* zusätzlicher rechter Außenabstand */
    flex:1;
    width:100%;
  }
  .rg-menu-tiles .et_pb_menu__menu > nav > ul > li:nth-child(6){
    flex:1;
    width:100%; /* gleiche Breite wie Item 5 */
  }
}

/* --- 2.4 Mobile Layout ------------------------------------ */
/* Stapelt die Kacheln und zieht den Container auf volle Viewportbreite. */
@media (max-width:767px){
  .rg-menu-tiles .et_pb_menu__menu > nav > ul{
    display:block;
  }
  .rg-menu-tiles .et_pb_menu__menu > nav > ul > li{
    margin:0 0 10px 0;
  }
  .rg-menu-tiles .et_pb_menu__menu > nav > ul > li > a{
    width:100%;
    padding:12px 16px;
    min-height:46px;
    font-size:var(--rg-menu-font-mobile) !important;
  }

  /* Mobil: Menübereich auf volle Breite ziehen */
  #page-container .et_pb_section.rg-menu-tiles .et_pb_row,
  #page-container .rg-menu-tiles.et_pb_row,
  #page-container .rg-menu-tiles .et_pb_row{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .rg-menu-tiles .et_pb_column,
  .rg-menu-tiles .et_pb_menu,
  .rg-menu-tiles .et_pb_menu__wrap,
  .rg-menu-tiles .et_pb_menu__menu,
  .rg-menu-tiles .et_mobile_menu{
    width:100% !important;
    max-width:none !important;
  }

  /* Header (Theme Builder): volle Breite fürs mobile Menü */
  .et-l--header .et_pb_row{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .et-l--header .et_pb_column,
  .et-l--header .et_pb_menu,
  .et-l--header .et_pb_menu__wrap,
  .et-l--header .et_pb_menu__menu{
    width:100% !important;
    max-width:none !important;
  }
  .et-l--header .et_mobile_menu{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
  }
}

/* --- 2.5 Desktop Split Layout (CSS Grid) ------------------ */
/* Grid-Variante: vier Spalten links, Spacer, zwei Spalten rechts. */
@media (min-width:981px){
  .rg-menu-tiles .et_pb_menu__menu > nav > ul{
    display:grid;
    /* 4 Spalten links, Spacer, 2 Spalten rechts */
    grid-template-columns: repeat(4, 1fr) 7em repeat(2, 1fr);
    gap: 1.5em; /* ergibt ~10em Gesamt-Abstand zwischen 4 und 5 */
    margin:0;
    padding:0;
  }
  /* Vorherige Spezial-Margins aushebeln, da das Grid die Positionen steuert */
  .rg-menu-tiles .et_pb_menu__menu > nav > ul > li{ margin:0 !important; list-style:none; }
  .rg-menu-tiles .et_pb_menu__menu > nav > ul > li > a{ margin:0 !important; }
  /* 5 und 6 rechts nach dem Spacer positionieren (Grid-Spalten 6 und 7) */
  .rg-menu-tiles .et_pb_menu__menu > nav > ul > li:nth-child(5){ grid-column:6; }
.rg-menu-tiles .et_pb_menu__menu > nav > ul > li:nth-child(6){ grid-column:7; }

/* ==========================================================
   2.1 Menü-Buttons (.rg-menu-buttons)
   ----------------------------------------------------------
   Alternative Menü-Optik: Links als Primary-Buttons,
   Dropdowns über volle Containerbreite.
   ========================================================== */
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > a{
  --btn-padding-y:.71em;
  --btn-padding-inline:.71em;
  --btn-hover-padding-delta:2rem;
  --btn-padding-inline-hover:calc(var(--btn-padding-inline) + var(--btn-hover-padding-delta));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  box-sizing:border-box;
  border-radius:var(--radius-pill);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:var(--btn-padding-y) var(--btn-padding-inline) !important;
  line-height:1.7em !important;
  background:transparent;
  color:var(--color-neutral-800) !important;
  border:1px solid var(--color-primary);
  box-shadow:var(--shadow-sm);
  position:relative;
  transition:padding .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > a:hover,
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > a:focus,
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > a:focus-visible{
  padding:var(--btn-padding-y) var(--btn-padding-inline-hover) !important;
  background:var(--color-primary) !important;
  color:#ffffff !important;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.rg-menu-buttons .et-menu-nav > ul.et-menu > li.rg-menu-active > a{
  display:inline-block;
  box-sizing:border-box;
  height:3rem;
  line-height:3rem;
  padding:0 1.8rem !important;
  margin:0 !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
  background:var(--color-primary);
  color:var(--color-neutral-100) !important;
  border-radius:calc(3rem / 2);
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:1.1rem;
  box-shadow:var(--shadow-sm);
  text-align:center;
  min-width:10rem;
}
.rg-menu-buttons .et-menu-nav > ul.et-menu > li.menu-item-has-children > a{
  padding-right:2.4rem;
}
.rg-menu-buttons .et-menu-nav > ul.et-menu > li.menu-item-has-children > a:after{
  right:.9rem;
  top:50%;
  transform:translateY(-50%);
  position:absolute;
  color:currentColor;
}
.rg-menu-buttons .et-menu-nav > ul.et-menu > li.rg-menu-active.menu-item-has-children > a{
  padding-right:2.6rem !important;
}
@media (min-width: 981px){
  /* Header-Menü bündig zum Logo links und Button rechts */
  .et_pb_row_1_tb_header.rg-container{
    width:80% !important;
    max-width:2560px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .et_pb_section_0_tb_header .et_pb_menu_0_tb_header .et_pb_menu_inner_container{
    width:80%;
    max-width:2560px;
    margin-left:auto;
    margin-right:auto;
  }
  .et_pb_section_0_tb_header .et_pb_menu_0_tb_header .et_pb_menu__wrap,
  .et_pb_section_0_tb_header .et_pb_menu_0_tb_header .et_pb_menu__menu,
  .et_pb_section_0_tb_header .et_pb_menu_0_tb_header .et-menu-nav,
  .et_pb_section_0_tb_header .et_pb_menu_0_tb_header .et-menu-nav > ul.et-menu{
    width:100%;
  }
  .et_pb_section_0_tb_header .et_pb_menu_0_tb_header .et-menu-nav > ul.et-menu{
    display:flex;
    justify-content:space-between;
  }
  .rg-menu-buttons .et-menu-nav{
    position:relative;
  }
  .rg-menu-buttons .et-menu-nav > ul.et-menu > li{
    position:static;
  }
  .rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    box-sizing:border-box;
  }
  .rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px 18px;
    align-items:stretch;
    justify-items:stretch;
  }
  .rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li{
    display:block;
  }
  .rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li > a{
    display:block;
    width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (max-width: 767px){
  .rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu{
    display:block;
  }
  .rg-menu-buttons .rg-menu-thumb{
    display:none !important;
  }
}

/* Explizite Blank-Klasse für Mobile-Menü-Modul */
@media (max-width: 980px){
  .rg-menu-mobile-blank .et_pb_menu__menu{
    display:none !important;
    height:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .rg-menu-mobile-blank .et_pb_menu__menu .et-menu-nav,
  .rg-menu-mobile-blank .et_pb_menu__menu .et-menu{
    display:none !important;
  }
  .et_pb_section_3_tb_header .rg-menu-mobile-blank .et_pb_menu__menu,
  .et_pb_section_3_tb_header .rg-menu-mobile-blank .et_pb_menu__menu .et-menu-nav,
  .et_pb_section_3_tb_header .rg-menu-mobile-blank .et_pb_menu__menu .et-menu,
  .et_pb_section_3_tb_header .rg-menu-mobile-blank .et_pb_menu__menu ul.et-menu{
    display:none !important;
  }
  .et_pb_section_3_tb_header .rg-menu-mobile-blank .et_pb_menu__wrap > .et_pb_menu__menu{
    display:none !important;
    height:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .rg-menu-mobile-blank .et_mobile_nav_menu{
    display:block !important;
  }
  .rg-menu-mobile-blank .rg-menu-thumb,
  .rg-menu-mobile-blank .rg-menu-item-inner,
  .rg-menu-mobile-blank .rg-menu-item-inner::before{
    display:none !important;
  }
  .rg-menu-mobile-blank .et_mobile_menu{
    display:none !important;
  }
  .rg-menu-mobile-blank .mobile_nav.closed .et_mobile_menu{
    display:none !important;
  }
  .rg-menu-mobile-blank .mobile_nav.opened .et_mobile_menu{
    display:block !important;
  }
  .rg-menu-mobile-blank .et_mobile_menu .sub-menu{
    display:none;
  }
  .rg-menu-mobile-blank .et_mobile_menu .menu-item-has-children > a + .sub-menu{
    display:none;
  }
  .rg-menu-mobile-blank .et_mobile_menu .menu-item-has-children.visible > a + .sub-menu{
    display:block;
  }
}

/* Doppeltes Mobile-Menü verhindern: Desktop-Menümodul auf Mobile ausblenden */
@media (max-width: 980px){
  .rg-menu-buttons:not(.rg-menu-mobile-blank) .et_pb_menu__menu,
  .rg-menu-buttons:not(.rg-menu-mobile-blank) .et_mobile_nav_menu{
    display:none !important;
  }
}

.rg-menu-buttons .rg-menu-item-inner{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
}
.rg-menu-buttons .rg-menu-thumb{
  flex:0 0 auto;
  width:64px;
  height:36px;
  object-fit:cover;
  border-radius:6px;
}
.rg-menu-buttons .rg-menu-text{
  display:inline-block;
  white-space:nowrap;
}
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li > a,
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li > a:hover,
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li > a:focus,
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li > a:focus-visible{
  color:inherit !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Dropdown Marker: roter Punkt bei Hover/Aktiv vor Thumbnail */
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li > a .rg-menu-item-inner::before{
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  background:transparent;
  flex:0 0 auto;
  margin-right:4px;
}
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li > a:hover .rg-menu-item-inner::before,
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li > a:focus .rg-menu-item-inner::before,
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li > a:focus-visible .rg-menu-item-inner::before,
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li.current-menu-item > a .rg-menu-item-inner::before,
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li.current-menu-ancestor > a .rg-menu-item-inner::before,
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li.current-menu-parent > a .rg-menu-item-inner::before,
.rg-menu-buttons .et-menu-nav > ul.et-menu > li > ul.sub-menu > li.rg-menu-active > a .rg-menu-item-inner::before{
  background:#e00000;
}
}

/* --- 2.6 Tablet-Navigation (Burger) ----------------------- */
@media (min-width:768px) and (max-width:980px){
  .rg-menu-tiles .et_pb_menu__menu > nav > ul{
    /* Tablet nutzt Burger-Menü -> Desktop-UL ausblenden, Grid irrelevant */
    margin:0;
    padding:0;
  }
  .rg-menu-tiles .et_pb_menu__menu > nav > ul > li{ margin:0; list-style:none; }

  /* Full-Bleed: Menü auf volle Viewportbreite ziehen (Row bleibt 80%) */
  .rg-menu-tiles{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
  }
  /* Innere Container ohne seitliche Polster */
  .rg-menu-tiles .et_pb_menu__wrap,
  .rg-menu-tiles .et_pb_menu__menu{
    width:100% !important;
    max-width:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Tablet: Burger-Menü anzeigen, Desktop-Menü ausblenden
     Divi schaltet hier typischerweise auf das mobile Menü um. */
  .rg-menu-tiles .et_mobile_nav_menu,
  .rg-menu-tiles .et_pb_menu__toggle{ display:block !important; }
  .rg-menu-tiles .et_pb_menu__menu{ display:none !important; }
  .rg-menu-tiles .et_mobile_menu{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
  }
}

/* ==========================================================
   3. Hero-Bereich (.rg-hero2)
   ----------------------------------------------------------
   Aufbau: zweispaltig (Bild links, Card rechts) mit Overlap-Effekt.
   Fokus: variable Steuerung für Schatten, Radien, Abstände und Bildzuschnitt.
   Nutzung:
     - Wrapper: .rg-hero2
     - Reihe:   .rg-hero2-row
     - Bild:    .rg-hero2-image (optional Fokus-Helfer)
     - Card:    .rg-hero2-col-card
   ========================================================== */
.rg-hero2{
  /* Grundoptik */
  --hero2-card-bg: #DDE2C6;
  --hero2-card-radius: 0;
  --hero2-card-shadow: 0 14px 34px rgba(0,0,0,.10);

  /* Layoutverschiebung & seitliche Abstände */
  --hero2-overlap: 60px;
  --hero2-side-gap: 3%;
  --hero2-row-maxw: 1280px;

  /* Bildverhältnis */
  --hero2-img-aspect: 16/9;

  /* Card-Padding nach Breakpoints */
  --hero2-card-pad-desktop: 28px 32px;
  --hero2-card-pad-tablet:  22px 24px;
  --hero2-card-pad-mobile:  18px 18px;

  /* Card-Breitenlimit */
  --hero2-card-maxw: 520px;
}
.rg-hero2 .rg-hero2-row{
  /* Container richtet beide Spalten aus und begrenzt die breite. */
  position: relative;
  max-width: var(--hero2-row-maxw);
  margin-inline: auto;
  display:flex;
  align-items:center;
  gap:0;
  overflow:visible;
}
.rg-hero2 .rg-hero2-image img{
  /* Bild füllt die Breite vollständig und ist dank aspect-ratio 16:9. */
  width:100%;
  aspect-ratio:var(--hero2-img-aspect);
  height:auto;
  object-fit:cover;
  object-position:center center;
  display:block;
  border-radius:12px;
}
@supports not (aspect-ratio: 1){
  /* Fallback für Browser ohne aspect-ratio-Unterstützung: fixe Höhen. */
  .rg-hero2 .rg-hero2-image img{ height:320px; }
  @media (max-width: 980px){ .rg-hero2 .rg-hero2-image img{ height:240px; } }
  @media (max-width: 767px){ .rg-hero2 .rg-hero2-image img{ height:180px; } }
}
.rg-hero2 .rg-hero2-col-card{
  /* Überlagerte Card rechts vom Bild. */
  position:relative;
  z-index:5;
  background:var(--color-box-bg, var(--hero2-card-bg));
  border-radius:var(--hero2-card-radius);
  box-shadow:var(--hero2-card-shadow);
  padding:var(--hero2-card-pad-desktop);
  margin-left: calc(var(--hero2-overlap) * -1); /* Überlappung der Card über das Bild */
  margin-right: var(--hero2-side-gap);
  max-width: var(--hero2-card-maxw);
}
.rg-hero2 .rg-hero2-col-card h1,
.rg-hero2 .rg-hero2-col-card .et_pb_module_header{
  margin:0 0 12px 0;
  font-weight:800;
  color:#262626;
}
.rg-hero2 .rg-hero2-col-card h2{
  margin:0 0 12px 0;
}
.rg-hero2 .rg-hero2-col-card p{
  margin:0 0 16px 0;
  line-height:1.6;
  color:#6B7564;
}
.rg-hero2 .rg-hero2-col-card .btn{ margin-top:8px; }
.rg-hero2 .rg-hero2-image.focus-top img       { object-position:center top; }
.rg-hero2 .rg-hero2-image.focus-bottom img    { object-position:center bottom; }
.rg-hero2 .rg-hero2-image.focus-left img      { object-position:left center; }
.rg-hero2 .rg-hero2-image.focus-right img     { object-position:right center; }
.rg-hero2 .rg-hero2-image.focus-top-right img { object-position:right 20%; }
.rg-hero2 .rg-hero2-image.focus-top-left img  { object-position:left 20%; }
@media (max-width: 980px){ /* Tablet und kleiner: Card unter das Bild, reduziertes Padding */
  .rg-hero2 .rg-hero2-row{ display:block; }
  .rg-hero2 .rg-hero2-col-card{
    margin:16px 0 0 0;
    max-width:none;
    padding:var(--hero2-card-pad-tablet);
    border-radius:0;
  }
}
@media (max-width: 767px){ /* Mobil: kompaktes Padding & reduzierte Radien */
  .rg-hero2 .rg-hero2-col-card{
    padding:var(--hero2-card-pad-mobile);
    border-radius:0;
  }
}

/* --- 3.1 Desktop Fullwidth Fix ---------------------------- */
/* Entfernt den rechten Außenabstand und erzwingt volle Breite. */
@media (min-width: 981px){
  /* Seitenabstand rechts entfernen und Zeile volle Breite erlauben */
  .rg-hero2{ --hero2-side-gap: 0; }
  .rg-hero2 .rg-hero2-row{
    max-width: none;
    width: 100%;
  }
  /* Card ohne Max-Breite und ohne rechten Außenabstand */
  .rg-hero2 .rg-hero2-col-card{
    margin-right: 0;
    max-width: none;
  }
  /* Optionale Spaltenverteilung für stabilen Layoutsplit */
  .rg-hero2 .rg-hero2-image{ flex: 1 1 58%; }
  .rg-hero2 .rg-hero2-col-card{ flex: 1 1 42%; }
}

/* ==========================================================
   4. Globale Button-Utilities
   ----------------------------------------------------------
   BEM-orientierte Klassen für Farbausprägungen, Varianten und Größen.
   Schwerpunkt: Tastaturbedienbarkeit und sanfte Übergänge.
   ========================================================== */
:root{
  /* Button-Farb- und Utility-Tokens */
  --color-primary: #8FAF4C;
  --color-secondary: #DDE2C6;
  --color-accent: #415930;
  --color-accent-hover: #E00000;
  --color-neutral-100: #FFFFFF;
  --color-neutral-200: #F2F2F2;
  --color-neutral-800: #222222;
  --color-box-bg: #C7D7A6;

  --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --focus-ring: 0 0 0 3px rgba(0,112,243,.35);
  --rg-header-cta-height: 56px;
}

/* ----------------------------------------------------------
   Globale H2-Badge-Optik (angelehnt an btn-primary)
   ---------------------------------------------------------- */
h2{
  margin-bottom:.6em;
}
h2 + p{ margin-top:0; }

.h2-badge h2{
  display:inline-block;
  box-sizing:border-box;
  height:3rem;
  line-height:3rem;
  padding:0 1.8rem !important;
  margin:0 !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
  background:var(--color-primary);
  color:var(--color-neutral-100);
  border-radius:calc(3rem / 2);
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:1.1rem;
  box-shadow:var(--shadow-sm);
  text-align:center;
  min-width:10rem;
}
.h2-badge *{ color:inherit; }
.h2-badge + p{ margin-top:.75rem; }

.btn,
.et_builder_submit_button,
button[name="et_builder_submit_button"],
.et_pb_contact_submit{
  --btn-padding-y:.7rem;
  --btn-padding-inline:1.1rem;
  --btn-hover-padding-delta:2rem;
  --btn-padding-inline-hover:calc(var(--btn-padding-inline) + var(--btn-hover-padding-delta));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  box-sizing:border-box;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:var(--btn-padding-y) var(--btn-padding-inline) !important;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  border-width:1px !important;
  transition:padding .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover,
.btn:focus,
.btn:focus-visible,
.et_builder_submit_button:hover,
.et_builder_submit_button:focus,
.et_builder_submit_button:focus-visible,
button[name="et_builder_submit_button"]:hover,
button[name="et_builder_submit_button"]:focus,
button[name="et_builder_submit_button"]:focus-visible,
.et_pb_contact_submit:hover,
.et_pb_contact_submit:focus,
.et_pb_contact_submit:focus-visible{
  padding:var(--btn-padding-y) var(--btn-padding-inline-hover) !important;
  border-width:1px !important;
}
.btn:focus-visible,
.et_builder_submit_button:focus-visible,
button[name="et_builder_submit_button"]:focus-visible,
.et_pb_contact_submit:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.btn:active,
.et_builder_submit_button:active,
button[name="et_builder_submit_button"]:active,
.et_pb_contact_submit:active{ transform:translateY(1px); }
.btn[disabled],
.btn--disabled,
.et_builder_submit_button[disabled],
button[name="et_builder_submit_button"][disabled],
.et_pb_contact_submit[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }

.btn--primary,
.btn.btn-primary,
.et_builder_submit_button,
button[name="et_builder_submit_button"],
.et_pb_contact_submit{
  background:var(--color-primary);
  color:#fff;
  border:1px solid transparent;
}
.btn--primary:hover,
.btn.btn-primary:hover,
.btn--primary:focus,
.btn.btn-primary:focus,
.et_builder_submit_button:hover,
.et_builder_submit_button:focus,
button[name="et_builder_submit_button"]:hover,
button[name="et_builder_submit_button"]:focus,
.et_pb_contact_submit:hover,
.et_pb_contact_submit:focus{
  background:var(--color-primary) !important;
  border:1px solid transparent !important;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.btn--secondary{ background:var(--color-secondary); color:#2b2b2b; border:1px solid transparent; }
.btn--secondary:hover{
  background:rgba(221,226,198,.5) !important;
  border-color:rgba(221,226,198,.5) !important;
  box-shadow:0 0 15px rgba(221,226,198,.4), 0 0 5px rgba(221,226,198,.5) inset;
}
.et_builder_submit_button,
button[name="et_builder_submit_button"],
.et_pb_contact_submit{
  gap:0 !important;
}
.btn--accent,
.btn.btn-accent{
  background:var(--color-accent);
  color:#fff;
  border:1px solid transparent;
}
.btn--accent:hover,
.btn.btn-accent:hover,
.btn--accent:focus,
.btn.btn-accent:focus{
  background:var(--color-accent-hover) !important;
  border:1px solid transparent !important;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

button[name="et_builder_submit_button"]::after,
.et_pb_contact_submit::after{
  content:"" !important;
  display:inline-block !important;
  width:0 !important;
  height:20px !important;
  margin-left:0;
  position:static !important;
  transform:translateX(4px) !important;
  opacity:0 !important;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, width .2s ease, margin .2s ease;
  vertical-align:middle;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' ry='2' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M3 7l9 7 9-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
button[name="et_builder_submit_button"]:hover::after,
button[name="et_builder_submit_button"]:focus::after,
.et_pb_contact_submit:hover::after,
.et_pb_contact_submit:focus::after{
  width:20px !important;
  margin-left:.6rem;
  transform:none !important;
  opacity:1 !important;
}

.btn--outline{ background:transparent; border-color:currentColor; }
.btn--ghost{ background:transparent; border-color:transparent; box-shadow:none; }
.btn--link{ background:transparent; border:none; box-shadow:none; padding:0; text-transform:none; }
.btn--sm,
.btn.btn-sm{
  --btn-padding-y:.45rem;
  --btn-padding-inline:.8rem;
  font-size:.9rem;
}
.btn--lg,
.btn.btn-lg{
  --btn-padding-y:.9rem;
  --btn-padding-inline:1.35rem;
  font-size:1.05rem;
}

/* ==========================================================
   5. Globale Zeilenbreite (Fallback)
   ----------------------------------------------------------
   Setzt Standard-Rows auf 80 % Breite (max 2560px) und zentriert sie.
   Die Utility-Klasse .rg-fullwidth deaktiviert diese Regel bei Bedarf.
   ========================================================== */
#page-container .et_pb_section:not(.et_pb_fullwidth_section) .et_pb_row{
  width:80%;
  max-width:2560px;
  margin-left:auto;
  margin-right:auto;
}
.et_pb_row.rg-fullwidth{
  width:100% !important;
  max-width:none !important;
}

/* Vertikales Zentrieren von Elementen */
.vertikal-zentrieren{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  height:100%;
  width:100%;
}

/* Header Row: Suchfeld & CTA bündig und vertikal zentriert */
.et_pb_row_0_tb_header{
  align-items:center !important;
}
.et_pb_row_0_tb_header .et_pb_column{
  display:flex;
  align-items:center;
}
.et_pb_row_0_tb_header .et_pb_module{
  margin-bottom:0 !important;
  width:100%;
}
.et_pb_row_0_tb_header .et_pb_search .et_pb_searchform > div{
  display:flex;
  align-items:center;
}
.et_pb_row_0_tb_header .et_pb_search input.et_pb_s{
  height:var(--rg-header-cta-height);
  box-sizing:border-box;
  width:100%;
  padding:0 18px;
  border-radius:var(--radius-pill);
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
}
.et_pb_row_0_tb_header .et_pb_search,
.et_pb_row_0_tb_header .et_pb_search.et_pb_with_border{
  border:0 !important;
  box-shadow:none !important;
}
.et_pb_row_0_tb_header .et_pb_search input.et_pb_s:focus,
.et_pb_row_0_tb_header .et_pb_search input.et_pb_s:active{
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
}
.et_pb_row_0_tb_header .et_pb_button_0_tb_header{
  display:flex !important;
  align-items:center;
  justify-content:center;
  height:var(--rg-header-cta-height);
  width:100%;
  box-sizing:border-box;
  padding:0 18px !important;
}
.box-right{
background:var(--color-box-bg);
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;
box-shadow: 6px 6px 18px -7px rgba(0,0,0,0.3);
}

/* ==========================================================
   6. Header-Menü: Fallback-Wrapping
   ----------------------------------------------------------
   Verhindert Überlauf des Hauptmenüs, falls der Burger-Toggle
   (Divi Breakpoint < 981px) in individuellen Headern nicht greift.
   Wrappt die Items auf zwei Zeilen und zentriert die Links.
   ========================================================== */
@media (max-width: 1200px){
  .et-l--header .et-menu-nav > ul.et-menu{
    display:flex;
    flex-wrap:wrap;
    gap:12px 18px;
    justify-content:center;
    white-space:normal;
  }
  .et-l--header .et-menu-nav > ul.et-menu > li{
    flex:1 1 42%;
    text-align:center;
  }
  .et-l--header .et-menu-nav > ul.et-menu > li > a{
    width:100%;
    display:block;
  }
}
@media (max-width: 980px){
  .et-l--header .et-menu-nav > ul.et-menu > li{
    flex-basis:100%;
  }
}