/*
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
   2. Hero-Bereich (.rg-hero2)
   3. Globale Button-Utilities
   4. Layout-Utilities (.vertikal-zentrieren, .box-right)

   Hinweis: Divi-spezifisches CSS (Menü-Kacheln, Menü-Buttons,
   Header/Footer, Zeilenbreite) liegt in Divi Custom CSS (DB).
   ========================================================== */

/* ==========================================================
   Raphael gGmbH – Master Stylesheet

   Überblick
   - Enthält globale Variablen, Hero v2 und Button-Styles
   - 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.
   ========================================================== */
@font-face{
  font-family:"Source Sans 3";
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url("fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Source Sans 3";
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url("fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

: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;
  --rg-font-sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

}

/* DIVI 5 setzt --et_global_body_font / --et_global_heading_font via Inline-Style
   in einem zweiten :root-Block NACH dem Child-Theme — wir müssen daher mit
   !important und höherer Specificity überschreiben, um den sans-serif-Fallback
   wieder einzuschleusen (für den Fall, dass Source Sans 3 nicht lädt). */
:root, html, body{
  --et_global_body_font: "Source Sans 3", sans-serif !important;
  --et_global_heading_font: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* Basis-Typo-Farbe */
body,
h1,h2,h3,h4,h5,h6{
  color:#262626;
}
body,
button,
input,
select,
textarea{
  font-family:var(--rg-font-sans);
  font-weight:400;
}
h1,h2{
  color:#415930;
}
h1{
  font-weight:700;
}
h2,h3,h4,h5,h6{
  font-weight:600;
}
h1,h2,h3,h4,h5,h6{
  text-transform: none;
}

/* ==========================================================
   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-hero .et_pb_image{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.rg-hero2 .et_pb_image{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.rg-hero .et_pb_image_wrap,
.rg-hero2 .et_pb_image_wrap,
.rg-hero2 .rg-hero2-image{
  display:flex !important;
  justify-content:center !important;
  width:100%;
}
.rg-hero .et_pb_image_wrap img,
.rg-hero .et_pb_text_inner img,
.rg-hero2 .et_pb_image_wrap img,
.rg-hero2 .et_pb_text_inner img,
.rg-hero2 .rg-hero2-image img{
  display:block;
  margin-left:auto !important;
  margin-right:auto !important;
  object-position:center center;
}
.rg-hero img,
.rg-hero2 img{
  margin-left:auto !important;
  margin-right:auto !important;
}
.rg-hero .et_pb_with_background,
.rg-hero2 .et_pb_with_background,
.rg-hero [style*="background-image"],
.rg-hero2 [style*="background-image"]{
  background-position:center center !important;
}
.rg-header-image img{
  object-position:center center !important;
}
.rg-hero2 .rg-hero2-image img{
  /* Original-Bild ohne Hard-Crop: horizontal mittig und vollständig sichtbar. */
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  object-position:center center !important;
  display:block;
  border-radius:12px;
}
.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{
  /* DIVI 5 wrappt Text-Module jetzt grundsätzlich in <p>, was diese Regel
     auf LIVE (DIVI 4) nie ausgelöst hat. Damit das Rendering wie unter
     DIVI 4 bleibt, übernehmen wir hier die Body-Defaults statt der
     ursprünglich vorgesehenen Card-Sonderfarbe. */
  margin:0 0 16px 0;
  line-height:1.7em; /* entspricht 27.2px auf 16px – wie LIVE-Body */
  color:#262626;     /* statt #6B7564 – LIVE-Body-Farbe */
}
.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: 46px;
}

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


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

.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);
}

/* ==========================================================
   DIVI 5 Floating Footer-Buttons – Icon-Anzeige (2026-05-18)

   Hintergrund:
   - DIVI 5.5.2 füllt zwar `data-icon` mit den UTF-8-Bytes aus dem
     Block-JSON. Die Theme-Builder-Deferred-CSS generiert aber
     widersprüchliche Regeln (.et_pb_button_X_tb_footer::after{content:""})
     in höherer Specificity, sodass attr(data-icon) in der Praxis nicht
     greift.
   - Daher hardcoden wir die Glyphen und neutralisieren die Default-
     Positionierung (absolute + translateY(-50%) + opacity:0).
   - Icons stammen aus der Block-Config:
       Button 0 → ETmodules U+E090 (Telefonhörer)
       Button 1 → FontAwesome U+F2B6 (paper-plane)
   ========================================================== */
/* Specificity-Wettrennen: DIVI generiert eine Theme-Builder-Regel
   `body #page-container .et_pb_section .et_pb_button_X_tb_footer::after
    { font-size: inherit !important; content: ""; }`
   Da `.btn-pill { font-size: 0 }` ist, erbt das Icon dadurch 0px Größe.
   Wir müssen daher die gleiche oder höhere Specificity (1 ID + ≥2 Klassen)
   verwenden, damit unsere Werte gewinnen. */
body #page-container a.et_pb_button_0_tb_footer.btn-pill::after,
body #page-container a.et_pb_button_1_tb_footer.btn-pill::after{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  font-size: 1.3rem !important;
}
body #page-container a.et_pb_button_0_tb_footer.btn-pill::after{
  content: "\e090" !important; /* ETmodules: Telefonhörer */
  font-family: "ETmodules" !important;
  font-weight: 400 !important;
}
body #page-container a.et_pb_button_1_tb_footer.btn-pill::after{
  content: "\f2b6" !important; /* Font Awesome: paper-plane */
  font-family: "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
}
/* DIVI-Default-Chevron (::before mit content:"\35") unterdrücken */
body #page-container a.et_pb_button_0_tb_footer.btn-pill::before,
body #page-container a.et_pb_button_1_tb_footer.btn-pill::before{
  display: none !important;
  content: none !important;
}