/*
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)
   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;
}

/* ==========================================================
   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;
  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 .12s ease,
             box-shadow .18s ease,
             border-color .18s ease,
             background-color .18s ease,
             color .18s ease;
}

/* 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: #000;
}

/* Zustand: Hover & Fokus
   Liefert visuelles Feedback mit Schatten und leichter Y-Translation.
   Fokus nutzt focus-visible für Tastaturfreundlichkeit ohne Outline.
*/
.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{
  background: rgba(143,175,76,.5) !important;
  border-color: rgba(143,175,76,.8) !important;
  box-shadow:
    0 0 15px rgba(143,175,76,.4),
    0 0 5px  rgba(143,175,76,.5) inset,
    var(--rg-menu-shadow);
  transform: translateY(-1px);
  outline:none;
  color:#000 !important;
}

/* Zustand: Aktiv
   Reagiert auf WP-Klassen und färbt aktive Menüpunkte ein.
*/
.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{
  border-color: var(--rg-menu-border-strong);
  color: var(--rg-menu-brand);
}

/* --- 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.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(--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 h2,
.rg-hero2 .rg-hero2-col-card .et_pb_module_header{
  margin:0 0 12px 0;
  font-weight:800;
  color:#6B7564;
}
.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: #E00000;
  --color-neutral-100: #FFFFFF;
  --color-neutral-200: #F2F2F2;
  --color-neutral-800: #222222;

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

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:.7rem 1.1rem;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .06s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.btn:active{ transform:translateY(1px); }
.btn[disabled], .btn--disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

.btn--primary{ background:var(--color-primary); color:#fff; border:1px solid transparent; }
.btn--primary:hover{
  background:rgba(143,175,76,.5) !important;
  border-color:rgba(143,175,76,.8) !important;
  box-shadow:0 0 15px rgba(143,175,76,.4), 0 0 5px rgba(143,175,76,.5) inset;
}
.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;
}
.btn--accent{ background:var(--color-accent); color:#fff; border:1px solid transparent; }
.btn--accent:hover{
  background:rgba(224,0,0,.5) !important;
  border-color:rgba(224,0,0,.5) !important;
  box-shadow:0 0 15px rgba(224,0,0,.4), 0 0 5px rgba(224,0,0,.5) inset;
}

.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{ padding:.45rem .8rem; font-size:.9rem; }
.btn--lg{ padding:.9rem 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%;
}