/*
Theme Name:   Marieluise Ruf – Divi Child
Theme URI:    https://fairwilly.de/
Description:  Child Theme für Divi 5. Alle individuellen Anpassungen (CSS, PHP, Templates) gehören hierher – so bleiben sie bei Divi-Updates erhalten. Farben, Schriften und Größen werden als Divi-Variablen gepflegt.
Author:       fairwilly Webservice and more...
Author URI:   https://fairwilly.de/
Template:     Divi
Version:      1.3.2
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  mlruf-child
Tags:         divi, child-theme
*/

/* =============================================================================
   INHALT
   1. Design-Tokens (Hinweis: liegen in Divi)
   2. Basis / Typografie
   3. Header & Navigation
   4. Inhalte / Divi-Module
   5. Footer
   6. Formulare & Buttons
   7. Utilities
   8. Responsive (Divi-Breakpoints)
   ========================================================================== */


/* 1. Design-Tokens =========================================================
   Farben, Schriftgrößen, Zeilenhöhen und Abstände liegen als **Divi-Variablen**
   (Website-Einstellungen → Variablen) und werden dort gepflegt – bewusst nicht
   hier, damit es keine zweite Quelle gibt.

   Grundlage: Ansicht_Homepage_Seiten_2026.pdf (InDesign-Entwurf, 16.03.2026);
   die gemessenen Werte stehen in der README.
   ========================================================================== */


/* 2. Basis / Typografie ====================================================
   Schrift, Größen, Farben und Gewichte kommen aus den Divi-Variablen.
   Hier nur, was Divi nicht erreicht.
   ========================================================================== */


/* 3. Header & Navigation =================================================== */

/* Hauptmenue-Dropdown (Level 2)
   1. Der Menue-Zeile den eigenen Stacking-Context nehmen (Divi setzt Zeile 10,
      Spalte 5). Erst dann wirkt das z-index 9999 des Submenues global und liegt
      ueber der Logo-Zeile (z-index 10), waehrend die Logo-Spirale zugleich ueber
      dem gelben Menue-Band bleibt. Die Logo-Zeile ragt in dieses Band hinein und
      wuerde dort die Maus abfangen, deshalb pointer-events: none - die beiden
      Logo-Grafiken sind keine Links.
   2. Divi legt Dropdown und Links fest auf 240 bzw. 200 px, wodurch die
      Eintraege mehrzeilig umbrechen. Breite aufmachen und Level 2 auf
      Fliesstextgroesse setzen (Divi-Variable Fliesstext). */

.et-l--header .et_pb_row:has(.et_pb_menu),
.et-l--header .et_pb_row:has(.et_pb_menu) > .et_pb_column {
	z-index: auto !important;
}

.et-l--header .et_pb_row:has(.et_pb_image) {
	pointer-events: none;
}

.et-menu li ul.sub-menu {
	width: 400px;
}

.et-menu li ul.sub-menu li,
.et-menu li ul.sub-menu li a {
	width: 100%;
}

.et-menu li ul.sub-menu li a {
	font-size: var(--gvid-ilfdrl1ubk, 1.0625rem);
	line-height: 1.3;
}


/* 4. Inhalte / Divi-Module ================================================= */

/* Vollbreites Bild (.fullwidthImage)
   Bleibt immer 100 % breit. Ab ca. 1140 px Containerbreite ist die Höhe auf
   400 px gedeckelt – das Bild wird dann oben/unten beschnitten statt
   mitzuwachsen. Darunter bleibt es unverändert proportional. */
.fullwidthImage img {
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: cover;
	object-position: center;
}

/* TinyPNG wraps images in <picture>; as a flex item it shrinks to the
   image's intrinsic width, so stretch it to the full wrapper width */
.fullwidthImage .et_pb_image_wrap > picture {
	display: block;
	width: 100%;
	flex: 1 1 100%;
}

/* Vollflächiges Hintergrundvideo (.vollflaechigesVideo)
   Spalte mit Hintergrundvideo, gleiche Geometrie wie .fullwidthImage:
   Seitenverhältnis 1140:400, ab 1140 px Breite auf 400 px Höhe gedeckelt.
   Das Video füllt die Spalte und wird mittig beschnitten.
   !important, weil MediaElement.js und Divis Zentrier-Skript Breite, Höhe
   und einen negativen linken Rand inline am Video und am Player-Container setzen.
   Der Zusatz .et-pb-background-video hebt die Spezifität über Divis eigene Regel
   .et-pb-background-video .mejs-video { left: 50% }, die nach der style.css lädt. */
.vollflaechigesVideo {
	aspect-ratio: 1140 / 400;
	max-height: 400px;
}

.vollflaechigesVideo .et-pb-background-video .mejs-container,
.vollflaechigesVideo .et-pb-background-video .mejs-inner,
.vollflaechigesVideo .et-pb-background-video .mejs-mediaelement,
.vollflaechigesVideo .et-pb-background-video mediaelementwrapper {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	margin: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.vollflaechigesVideo .et-pb-background-video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0 !important;
	object-fit: cover;
	object-position: center;
}


/* Anchor targets: breathing room when jumping via in-page links.
   Divi 5 smooth scroll respects scroll-margin-top. #start is excluded,
   its section already has enough top padding. */
#symptome,
#ganzheitlicher-weg {
	scroll-margin-top: clamp(1.5rem, 4vw, 3rem);
}


/* 5. Footer ================================================================ */


/* 6. Formulare & Buttons =================================================== */


/* 7. Utilities ============================================================= */
.mlruf-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* 8. Responsive (Divi-Breakpoints) ========================================= */
/* Divi nutzt: 980px (Tablet), 767px (Phone) */

@media (max-width: 980px) {

}

@media (max-width: 767px) {

}

/* Testimonials (plugin mlruf-testimonials): stars in the logo yellow.
   body prefix: plugin CSS loads later with equal specificity */
body .mlruf-testimonials {
	--mlruf-t-star: #fec800;
}