/*
 Theme Name: Divi-Mastermind-Child-Theme
 Theme URI: https://www.divimastermind.com/
 Description: Dies ist ein <b>ready-to-start</b> Child-Theme f&uuml;r Divi. Entwickelt und bereitgestellt von den Divi Masterminds. Dieses Theme beinhaltet alle notwendigen Dateien, um den schnellen und einfach Start zu erm&ouml;glichen.
 Author: Divi Mastermind - Benny Hozjan und Frank Oschatz
 Author URI: https://divimastermind.com/
 Template: Divi
 Version: 1.0.0
 Tag: divi, child-theme, rawbone, easy-to-use, mastermind, german-group,
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* ==================================================================
   STANDARD CSS
   ================================================================== */

#wpadminbar { z-index: 9999999; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 62.5%; }
/* Basis: 1rem = 10px. Alle Schriftgrößen in rem angeben.
   Beispiel: 1.8rem = 18px, 1.4rem = 14px, 6.8rem = 68px */

.mce-top-part { position: sticky !important; top: -60px; }

.et-fb-field-settings-modal { max-height: 600px !important; }

.lem_fixed_buttons .et_pb_column { padding-bottom: 20px; }
.lem_fixed_buttons .et_pb_button_module_wrapper {
  position: absolute; bottom: 0; left: 0; right: 0; margin: auto;
}

.dropdown_fix ul { right: 0px !important; }


/* ==================================================================
   ORTHOPÄDIE PÄCKERT & DR. MAYER — DESIGN SYSTEM
   ==================================================================

   Farben und Schriften kommen aus dem Divi Variable Manager.
   Nach Import der JSON verfügbar als CSS Custom Properties:

   FARBEN:
   --gcid-primary-color    #7a9a34   Primärfarbe — Praxisgrün
   --gcid-secondary-color  #4a5e20   Sekundärfarbe — Dunkelgrün
   --gcid-heading-color    #2c2a22   Überschriftentextfarbe
   --gcid-body-color       #2c2a22   Fließtextfarbe
   --gcid-link-color       #7a9a34   Linkfarbe
   --gcid-lpnb6i5j58       #FAF8F2   Seitenhintergrund — Cremeweiß
   --gcid-cream-card       #F0EEE6   Karten Hintergrund — Cremegrau
   --gcid-text-muted       #8e8c86   Gedämpfter Text
   --gcid-border           #d4d2cc   Trennlinien
   --gcid-eyebrow-dark     #afbc76   Eyebrow auf dunklem Hintergrund
   --gcid-hero-border      #a6a69e   Kreis-Border auf Hero-Foto

   HINWEIS: --gcid-white wird von Divi nicht als CSS-Variable
   ausgegeben. Weiß wird daher direkt als #ffffff gesetzt.

   SCHRIFTEN:
   --et_global_heading_font  DM Sans
   --et_global_body_font     Inter

   HERO OVERLAY (Divi → Sektion → Hintergrund → Gradient):
   Von: rgba(44, 51, 24, 0.35) oben
   Bis: rgba(44, 51, 24, 0.72) unten (180°)
   ================================================================== */


/* ------------------------------------------------------------------
   EYEBROW-LABELS
   Klasse: op-label-eyebrow
   Auf dunklem BG zusätzlich: op-label-eyebrow--light
   ------------------------------------------------------------------ */

#page-container .op-label-eyebrow {
  font-family: var(--et_global_body_font), sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--gcid-primary-color) !important;
  display: block !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}

#page-container .op-label-eyebrow--light {
  color: var(--gcid-eyebrow-dark) !important;
}


/* ------------------------------------------------------------------
   HERO H1 — Klasse: op-heading-hero
   Spans: op-ht (dünn 300) / op-hb (fett 700)
   ------------------------------------------------------------------ */

#page-container .op-heading-hero {
  font-family: var(--et_global_heading_font), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(3.8rem, 5vw, 6.8rem) !important;
  line-height: 1.08em !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 0 28px 0 !important;
}

#page-container .op-heading-hero .op-ht { font-weight: 300 !important; }
#page-container .op-heading-hero .op-hb { font-weight: 700 !important; }


/* ------------------------------------------------------------------
   SECTION H2 — Klasse: op-heading-section
   Auf dunklem BG zusätzlich: op-heading-section--light
   Spans: op-ht (dünn 300) / op-hb (fett 600)
   ------------------------------------------------------------------ */

#page-container .op-heading-section {
  font-family: var(--et_global_heading_font), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(2.8rem, 3.5vw, 5rem) !important;
  line-height: 1.12em !important;
  letter-spacing: -0.02em !important;
  color: var(--gcid-heading-color) !important;
  margin: 0 0 24px 0 !important;
}

#page-container .op-heading-section--light { color: #ffffff !important; }
#page-container .op-heading-section .op-ht { font-weight: 300 !important; }
#page-container .op-heading-section .op-hb { font-weight: 600 !important; }


/* ------------------------------------------------------------------
   H3 KARTEN — Klasse: op-heading-card
   ------------------------------------------------------------------ */

#page-container .op-heading-card {
  font-family: var(--et_global_heading_font), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(2.3rem, 2vw, 2.8rem) !important;
  line-height: 1.2em !important;
  letter-spacing: -0.01em !important;
  color: var(--gcid-heading-color) !important;
  margin: 0 0 10px 0 !important;
}


/* ------------------------------------------------------------------
   TEAM-PERSONEN-INFO
   Klassen: op-person-role / op-person-name / op-person-specialty
   ------------------------------------------------------------------ */

#page-container .op-person-role {
  font-family: var(--et_global_body_font), sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--gcid-primary-color) !important;
  display: block !important;
  margin-top: 14px !important;
  margin-bottom: 4px !important;
}

#page-container .op-person-name {
  font-family: var(--et_global_heading_font), sans-serif !important;
  font-weight: 600 !important;
  font-size: 2rem !important;
  line-height: 1.2em !important;
  letter-spacing: -0.01em !important;
  color: var(--gcid-heading-color) !important;
  display: block !important;
  margin-bottom: 2px !important;
}

#page-container .op-person-specialty {
  font-family: var(--et_global_body_font), sans-serif !important;
  font-weight: 300 !important;
  font-size: 1.4rem !important;
  color: var(--gcid-text-muted) !important;
  display: block !important;
}


/* ------------------------------------------------------------------
   KONTAKT-TABELLE
   ------------------------------------------------------------------ */

#page-container .op-contact-table {
  width: 100% !important;
  border-top: 1px solid var(--gcid-border) !important;
}

#page-container .op-contact-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 40px !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid var(--gcid-border) !important;
}

#page-container .op-contact-row__label {
  font-family: var(--et_global_body_font), sans-serif !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--gcid-text-muted) !important;
  min-width: 70px !important;
  flex-shrink: 0 !important;
}

#page-container .op-contact-row__value {
  font-family: var(--et_global_heading_font), sans-serif !important;
  color: var(--gcid-heading-color) !important;
}


/* ==================================================================
   BLURB-MODULE ALS KREIS-BUTTONS
   ==================================================================

   Klassen (Divi → Erweitert → CSS-Klasse):
   op-blurb--hero-light   44px  weiße Linie   Hero auf Foto
   op-blurb--md           44px  grüne Linie   Sektionen
   op-blurb--card         40px  grüne Linie   Team-/Leistungskarten
   op-blurb--sm           36px  grüne Linie   Sprechstunden
   Zentrierung zusätzlich: op-center

   SCROLL-DOWN: Klasse op-blurb--scroll auf Icon-Modul (et_pb_icon)

   HINWEIS: Divi Core setzt padding: 10px auf .et-pb-icon —
   wird hier explizit auf 0 zurückgesetzt.
   --gcid-white wird von Divi nicht ausgegeben → #ffffff direkt.
   ================================================================== */

/* BASIS ----------------------------------------------------------- */

#page-container .et_pb_blurb[class*="op-blurb"] .et_pb_blurb_content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

#page-container .et_pb_blurb[class*="op-blurb"].op-center .et_pb_blurb_content {
  justify-content: center !important;
}

#page-container .et_pb_blurb[class*="op-blurb"] .et_pb_image_wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  background: none !important;
}

#page-container .et_pb_blurb[class*="op-blurb"] .et_pb_main_blurb_image {
  border-radius: 50% !important;
  border: 2px solid var(--gcid-primary-color) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  transition: background 200ms ease, border-color 200ms ease !important;
}

/* Divi Core setzt padding: 10px auf .et-pb-icon → auf 0 zurücksetzen
   + Pfeil 4px nach oben: margin-top: -4px                          */
#page-container .et_pb_blurb[class*="op-blurb"] .et-pb-icon {
  line-height: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin-top: -4px !important;
  color: var(--gcid-primary-color) !important;
  transition: color 200ms ease !important;
  transform: none !important;
}

#page-container .et_pb_blurb[class*="op-blurb"] .et_pb_blurb_description p,
#page-container .et_pb_blurb[class*="op-blurb"] .et_pb_blurb_description {
  font-family: var(--et_global_body_font), sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--gcid-heading-color) !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color 200ms ease !important;
  white-space: nowrap !important;
}

#page-container .et_pb_blurb[class*="op-blurb"] .et_pb_blurb_description strong,
#page-container .et_pb_blurb[class*="op-blurb"] .et_pb_blurb_description b {
  font-weight: 700 !important;
}

#page-container .et_pb_blurb[class*="op-blurb"] .et_pb_blurb_container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Hover Basis */
#page-container .et_pb_blurb[class*="op-blurb"]:hover .et_pb_main_blurb_image {
  background: var(--gcid-primary-color) !important;
  border-color: var(--gcid-primary-color) !important;
}
#page-container .et_pb_blurb[class*="op-blurb"]:hover .et-pb-icon {
  color: #ffffff !important;
}
#page-container .et_pb_blurb[class*="op-blurb"]:hover .et_pb_blurb_description p,
#page-container .et_pb_blurb[class*="op-blurb"]:hover .et_pb_blurb_description {
  color: var(--gcid-primary-color) !important;
}

/* op-blurb--hero-light — 44px, weiße Linie ----------------------- */

#page-container .et_pb_blurb.op-blurb--hero-light .et_pb_main_blurb_image,
#page-container .et_pb_blurb.op-blurb--hero-light .et_pb_image_wrap {
  width: 44px !important;  height: 44px !important;
  min-width: 44px !important;  min-height: 44px !important;
}
#page-container .et_pb_blurb.op-blurb--hero-light .et_pb_main_blurb_image {
  border-color: rgba(255, 255, 255, 0.65) !important;
}
#page-container .et_pb_blurb.op-blurb--hero-light .et-pb-icon {
  font-size: 1.8rem !important;
  color: #ffffff !important;
}
#page-container .et_pb_blurb.op-blurb--hero-light .et_pb_blurb_description p,
#page-container .et_pb_blurb.op-blurb--hero-light .et_pb_blurb_description {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 1.3rem !important;
}
#page-container .et_pb_blurb.op-blurb--hero-light:hover .et_pb_main_blurb_image {
  background: var(--gcid-primary-color) !important;
  border-color: var(--gcid-primary-color) !important;
}
#page-container .et_pb_blurb.op-blurb--hero-light:hover .et-pb-icon {
  color: #ffffff !important;
}
#page-container .et_pb_blurb.op-blurb--hero-light:hover .et_pb_blurb_description p,
#page-container .et_pb_blurb.op-blurb--hero-light:hover .et_pb_blurb_description {
  color: #ffffff !important;
}

/* op-blurb--md — 44px, grüne Linie ------------------------------ */

#page-container .et_pb_blurb.op-blurb--md .et_pb_main_blurb_image,
#page-container .et_pb_blurb.op-blurb--md .et_pb_image_wrap {
  width: 44px !important;  height: 44px !important;
  min-width: 44px !important;  min-height: 44px !important;
}
#page-container .et_pb_blurb.op-blurb--md .et-pb-icon {
  font-size: 1.8rem !important;
}

/* op-blurb--card — 40px, grüne Linie ---------------------------- */

#page-container .et_pb_blurb.op-blurb--card .et_pb_main_blurb_image,
#page-container .et_pb_blurb.op-blurb--card .et_pb_image_wrap {
  width: 40px !important;  height: 40px !important;
  min-width: 40px !important;  min-height: 40px !important;
}
#page-container .et_pb_blurb.op-blurb--card .et-pb-icon {
  font-size: 1.6rem !important;
}
#page-container .et_pb_blurb.op-blurb--card .et_pb_blurb_description p,
#page-container .et_pb_blurb.op-blurb--card .et_pb_blurb_description {
  font-size: 1.1rem !important;
}

/* op-blurb--sm — 36px, grüne Linie ------------------------------ */

#page-container .et_pb_blurb.op-blurb--sm .et_pb_main_blurb_image,
#page-container .et_pb_blurb.op-blurb--sm .et_pb_image_wrap {
  width: 36px !important;  height: 36px !important;
  min-width: 36px !important;  min-height: 36px !important;
}
#page-container .et_pb_blurb.op-blurb--sm .et-pb-icon {
  font-size: 1.4rem !important;
}
#page-container .et_pb_blurb.op-blurb--sm .et_pb_blurb_description p,
#page-container .et_pb_blurb.op-blurb--sm .et_pb_blurb_description {
  font-size: 1.1rem !important;
}


/* ==================================================================
   ICON-MODUL — SCROLL-DOWN BUTTON
   Klasse: op-blurb--scroll op-center (et_pb_icon Modul)
   ================================================================== */

#page-container .et_pb_icon.op-blurb--scroll {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  cursor: pointer !important;
}

#page-container .et_pb_icon.op-blurb--scroll .et_pb_icon_wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.60) !important;
  background: transparent !important;
  overflow: hidden !important;
  transition: transform 300ms ease, border-color 200ms ease,
              background 200ms ease !important;
}

#page-container .et_pb_icon.op-blurb--scroll .et-pb-icon {
  font-size: 2rem !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin-top: -4px !important;
  color: #ffffff !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
}

#page-container .et_pb_icon.op-blurb--scroll:hover .et_pb_icon_wrap {
  transform: translateY(6px) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

#page-container .et_pb_icon.op-blurb--scroll:hover .et-pb-icon {
  color: #ffffff !important;
}


/* ==================================================================
   GRAVITY FORMS
   ================================================================== */

:root {
  --primary-color:      #333333;
  --accent-color:       #007BFF;
  --accent-color-light: #0056b3;
  --error-color:        #B22222;
  --background-gray:    #F5F5F5;
  --text-color:         #222222;
  --placeholder-color:  rgba(34, 34, 34, 0.5);
  --success-background: rgba(0, 123, 255, 0.2);
  --error-background:   rgba(178, 34, 34, 0.1);
}

html body article .et-l .et_pb_section .et_pb_module .gform_wrapper form .gform_footer.top_label,
footer .et_pb_section .et_pb_module .gform_wrapper form .gform_footer.top_label {
  margin-top: 1.5em;
  padding: 1em 0;
  border-top: 1px solid var(--accent-color-light);
  float: left;
  width: 98%;
  margin-right: 2%;
}

html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield select,
html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=number],
footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield select,
footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=number] {
  border: 1px solid var(--accent-color);
  border-radius: 3px;
  padding: 0 1.5rem;
  background: var(--background-gray);
  color: var(--text-color);
  height: 45px;
  box-sizing: border-box;
}

html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input:focus,
footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input:focus {
  border-color: var(--accent-color-light);
  background: rgba(255, 255, 255, 1.0);
  outline: none;
}

html body article .et-l .et_pb_section .et_pb_module .gform_wrapper textarea,
footer .et_pb_section .et_pb_module .gform_wrapper textarea {
  border: 1px solid var(--accent-color);
  border-radius: 3px;
  padding: 1rem;
  background: var(--background-gray);
  color: var(--text-color);
  font-size: 1.6rem;
  min-height: 120px;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

html body article .et-l .et_pb_section .et_pb_module .gform_wrapper textarea:focus,
footer .et_pb_section .et_pb_module .gform_wrapper textarea:focus {
  border-color: var(--accent-color-light);
  background: rgba(255, 255, 255, 1.0);
  outline: none;
}

html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_footer input.button,
footer .et_pb_section .et_pb_module .gform_wrapper .gform_footer input.button {
  background-color: var(--accent-color) !important;
  border: 1px solid var(--accent-color) !important;
  color: #fff !important;
  text-transform: uppercase;
  padding: 1.3rem 2.5rem !important;
  cursor: pointer;
  transition: 0.3s;
  font-size: 1.4rem;
}

html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_footer input.button:hover,
footer .et_pb_section .et_pb_module .gform_wrapper .gform_footer input.button:hover {
  background-color: var(--accent-color-light) !important;
  border-color: var(--accent-color-light) !important;
  color: #fff !important;
}

html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield .gfield_label,
footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
  color: var(--text-color);
  font-weight: 400;
  font-size: 1.6rem;
}

html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_validation_errors h2.gform_submission_error,
footer .et_pb_section .et_pb_module .gform_wrapper .gform_validation_errors h2.gform_submission_error {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--error-color);
}

html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform-body > div.gform_fields > div > div.validation_message.gfield_validation_message,
footer .et_pb_section .et_pb_module .gform_wrapper .gform-body > div.gform_fields > div > div.validation_message.gfield_validation_message {
  border: solid 1px var(--error-color);
  border-radius: 5px;
  color: var(--error-color);
  padding: 1.2rem;
}

html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input::placeholder,
footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input::placeholder {
  color: var(--placeholder-color);
}


/* ==================================================================
   FIX: --gcid-border wird von Divi nicht ausgegeben
   Trennlinien direkt mit Hex-Wert #d4d2cc
   ================================================================== */

#page-container .op-contact-table {
  border-top-width: 1px !important;
  border-top-style: solid !important;
  border-top-color: #d4d2cc !important;
}

#page-container .op-contact-row {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: #d4d2cc !important;
}


/* ==================================================================
   KONTAKT-INFO BLOCK
   Klasse: op-contact-info (Divi Text-Modul)

   STRATEGIE:
   Layout wie op-footer-links — jede op-ci-row wird wie ein Footer-Link
   behandelt mit ›-Pfeil davor, dezentem Label inline + Wert/Link,
   und Hover-Effekt (Padding-Slide + grüne Border-Linie).

   font-size + line-height werden NICHT gesetzt → kommen vom
   Divi Builder / Variable Manager (gleiche Werte wie Navigation/
   Sprechstunden).

   HTML-Struktur im Text-Modul:
   <div class="op-contact-info">
     <strong>Kontakt</strong>
     <span class="op-ci-row">
       <span class="op-ci-label">Telefon</span>
       <span class="op-ci-val"><a href="tel:+4960224046">06022 4046</a></span>
     </span>
     ...
   </div>
   ================================================================== */

/* Äußerer Container + Divi-Wrapper */
#page-container .op-contact-info,
#page-container .op-contact-info > div {
  font-family: var(--et_global_body_font), sans-serif !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* BR-Tags von WordPress wpautop ausblenden (sonst Zeilenumbrüche) */
#page-container .op-contact-info br,
#page-container .op-contact-info > div br {
  display: none !important;
}

/* "KONTAKT" Überschrift — gleicher Stil wie strong in op-footer-links */
#page-container .op-contact-info strong,
#page-container .op-contact-info > div strong {
  font-family: var(--et_global_body_font), sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #afbc76 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* Zeile = Block, KEIN Pfeil-Prefix, KEIN Hover-Effekt (ist Info, kein Menüpunkt) */
#page-container .op-contact-info .op-ci-row {
  display: block !important;
  padding: 2px 0 !important;
  border-left: none !important;
  position: relative !important;
  color: rgba(255, 255, 255, 0.75) !important;
  min-width: 0 !important;
  gap: 0 !important;
  transition: none !important;
}

/* ::before und ::after explizit deaktivieren (kein ›-Pfeil, kein Theme-Icon) */
#page-container .op-contact-info .op-ci-row::before,
#page-container .op-contact-info .op-ci-row::after {
  content: none !important;
  display: none !important;
}

/* Label dezent vorne (Telefon, Telefax, E-Mail) — kein eigener font-size */
#page-container .op-contact-info .op-ci-label {
  display: inline !important;
  min-width: 0 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding-top: 0 !important;
  margin-right: 6px !important;
}

#page-container .op-contact-info .op-ci-label::after {
  content: ':' !important;
}

/* Wert */
#page-container .op-contact-info .op-ci-val {
  display: inline !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Link verhält sich wie normaler Text: keine Underline, keine Color-Änderung,
   kein Hover-Effekt, kein Theme-Link-Icon (::before/::after) */
#page-container .op-contact-info .op-ci-val a,
#page-container .op-contact-info .op-ci-val a:link,
#page-container .op-contact-info .op-ci-val a:visited,
#page-container .op-contact-info .op-ci-val a:hover,
#page-container .op-contact-info .op-ci-val a:focus,
#page-container .op-contact-info .op-ci-val a:active {
  color: inherit !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: none !important;
}

#page-container .op-contact-info .op-ci-val a::before,
#page-container .op-contact-info .op-ci-val a::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Hover auf die Zeile EXPLIZIT abgeschaltet (Slide/Border/Color sollen nicht greifen) */
#page-container .op-contact-info .op-ci-row:hover {
  padding-left: 0 !important;
  border-left-color: transparent !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
#page-container .op-contact-info .op-ci-row:hover .op-ci-val,
#page-container .op-contact-info .op-ci-row:hover .op-ci-val a {
  color: rgba(255, 255, 255, 0.85) !important;
}


/* ==================================================================
   FOOTER-LINKS
   Klasse: op-footer-links (Divi Text-Modul)

   STRATEGIE:
   - font-size + line-height werden im Divi Builder / Variable Manager gesetzt
   - Diese CSS steuert NUR Layout, Farben, Hover-Effekt
   - KEIN !important auf font-size / line-height → Variable Manager greift
   ================================================================== */

/* Container — kein font-size/line-height hier, kommt vom Builder */
body #page-container .op-footer-links,
body #page-container .op-footer-links > p,
body #page-container .op-footer-links > div {
  font-family: var(--et_global_body_font), sans-serif !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* strong als Eyebrow-Label */
body #page-container .op-footer-links strong,
body #page-container .op-footer-links > p strong,
body #page-container .op-footer-links > div strong {
  font-family: var(--et_global_body_font), sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #afbc76 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* Links — KEIN line-height !important → Variable Manager steuert */
body #page-container .op-footer-links a,
body #page-container .op-footer-links > p a,
body #page-container .op-footer-links > div a {
  display: block !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  padding: 2px 0 2px 18px !important;
  border-left: 2px solid transparent !important;
  position: relative !important;
  transition: color 200ms ease,
              padding-left 200ms ease,
              border-color 200ms ease !important;
}

/* Pfeil-Prefix */
body #page-container .op-footer-links a::before,
body #page-container .op-footer-links > p a::before,
body #page-container .op-footer-links > div a::before {
  content: '\203A' !important;
  position: absolute !important;
  left: 3px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 1.6rem !important;

  transition: color 200ms ease !important;
}

/* Hover */
body #page-container .op-footer-links a:hover,
body #page-container .op-footer-links > p a:hover,
body #page-container .op-footer-links > div a:hover {
  color: #ffffff !important;
  padding-left: 22px !important;
  border-left-color: #7a9a34 !important;
}

body #page-container .op-footer-links a:hover::before,
body #page-container .op-footer-links > p a:hover::before,
body #page-container .op-footer-links > div a:hover::before {
  color: #7a9a34 !important;
}

/* BR verstecken */
body #page-container .op-footer-links br,
body #page-container .op-footer-links > p br,
body #page-container .op-footer-links > div br {
  display: none !important;
}




/* ===========================================================================
   Mitarbeiter-Karten · Divi Plus Filter Grid (Pee-Aye Creative · dp-dfg-*)

   - Bild bündig an die Karten-Kanten (kein Rand, kein Innenabstand)
   - Gleichmäßige Abstände innen in der weißen Textbox unter dem Bild
   - Fluid responsive via clamp() — kein Media-Query nötig
   =========================================================================== */

/* --- 1) Karten-Wrapper ---
   Plugin-Default hat 1px Border + 10px horizontales Padding.
   Beides raus, damit das Foto bündig an die Karten-Kante anschließt. */
.dp-dfg-container .dp-dfg-item.mitarbeiter {
	border:  none;
	padding: 0;
}

/* --- 2) Foto / Figure ---
   Plugin-Default ist margin: 0 -10px (Kompensation für die 10px Item-Padding).
   Da wir das Item-Padding entfernt haben, müssen auch diese negativen
   Margins weg, sonst ragt das Bild über die Karte hinaus. */
.dp-dfg-container .dp-dfg-item.mitarbeiter .dp-dfg-image {
	margin: 0;
}

/* --- 3) Header-Box (mit Name) ---
   Padding oben + links/rechts, unten = 0 (kleiner Gap kommt aus Custom-Content) */
.dp-dfg-container .dp-dfg-item.mitarbeiter .dp-dfg-header {
	padding:
		clamp(1rem, 2vw, 1.5rem)   /* oben */
		clamp(1rem, 2vw, 1.5rem)   /* rechts */
		0                          /* unten */
		clamp(1rem, 2vw, 1.5rem);  /* links */
}

/* Titel-Margins resetten (h3 hat im Theme Default-Margins) */
.dp-dfg-container .dp-dfg-item.mitarbeiter .dp-dfg-header .entry-title {
	margin:  0;
	padding: 0;
}

/* --- 4) Custom-Content-Box (mit Berufsbezeichnung) ---
   Kleiner Gap oben (zum Namen), normales Padding unten + seitlich */
.dp-dfg-container .dp-dfg-item.mitarbeiter .dp-dfg-custom-content {
	padding:
		clamp(0.35rem, 0.8vw, 0.6rem)  /* oben = Gap zum Titel */
		clamp(1rem, 2vw, 1.5rem)       /* rechts */
		clamp(1rem, 2vw, 1.5rem)       /* unten */
		clamp(1rem, 2vw, 1.5rem);      /* links */
}

/* Paragraph-Margins resetten (<p> hat Default-Margins) */
.dp-dfg-container .dp-dfg-item.mitarbeiter .dp-dfg-custom-content .dp-dfg-custom-field {
	margin:  0;
	padding: 0;
}