/* Bruecke zwischen Elementor und dem 24-Spalten-Grid der alten sitio-Seite. Elementor legt um jeden Container ein div.e-con und um jedes Widget ein div.elementor-element. Die Original-IDs sitzen dank _element_id auf genau diesen aeusseren divs, also auf den Grid-Kindern. Damit greift das Original-CSS (#coaching_text_1 { grid-column: 4/15 } usw.) unveraendert. Zu tun bleibt dreierlei: 1. Elementors Abstaende und Breitenbegrenzungen abschalten 2. den display-Modus der Container richtig stellen 3. die inneren Wrapper der Widgets aus dem Layout nehmen Elementor steuert display und Breite ueber CSS-Variablen. Wir setzen deshalb die Variablen, statt die Regeln mit hoeherer Spezifitaet zu ueberschreiben. */ /* ---------- 1. Container ---------- */ /* Zur Spezifitaet, das ist der Knackpunkt: Elementor schreibt pro Seite eine Datei post-.css mit .elementor- .elementor-element.elementor-element- { --display: flex } Das sind drei Klassen (0,3,0), und die Datei laedt nach dieser hier. Deshalb reicht "body .elementor-element.e-con" (0,2,1) nicht aus. Jeder Container traegt zusaetzlich .e-flex, damit kommen wir auf (0,3,1) und gewinnen ohne !important. */ body .elementor-element.e-con.e-flex, body .elementor-element.e-con.e-grid { /* Original-divs waren Blockelemente. ID-Regeln aus coaching.css (z. B. #coaching_bloque_302 { display:flex }) haben Vorrang. */ --display: block; /* Elementor setzt .e-con { position: relative }. Im Original standen die divs auf static; #coaching_1 und #coaching_bloque_1 setzen es selbst. */ position: static; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --widgets-spacing: 0px 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; --padding-block-start: 0px; --padding-block-end: 0px; --padding-inline-start: 0px; --padding-inline-end: 0px; --margin-block-start: 0px; --margin-block-end: 0px; --margin-inline-start: 0px; --margin-inline-end: 0px; --min-height: 0; --width: 100%; } /* Die Sektionen tragen die Klasse .box und sind das 24-Spalten-Raster. --width steuert Elementors max-width-Regel; .box selbst will 1200px. */ body .elementor-element.e-con.box { --display: grid; /* Achtung: --width steuert bei Elementor nicht nur max-width, sondern auch width. Auf 1200px gesetzt waere die Box auch auf dem Handy 1200px breit. Deshalb bleibt --width bei 100% und max-width wird direkt gesetzt, so wie es .box im Original tut. */ --width: 100%; max-width: 1200px; /* o_24.css zentriert .box mit margin-left/right: auto. Elementor baut sein margin aus Variablen zusammen, die weiter oben auf 0 stehen. Deshalb hier zurueck auf auto, sonst klebt die Sektion links. */ --margin-inline-start: auto; --margin-inline-end: auto; /* position bleibt static. coaching.css setzt es fuer #coaching_1 und #coaching_2 selbst auf relative, #coaching_3 bleibt statisch. */ } /* Menue und Fussbereich stecken als rohes Markup in einem html-Widget. Container und Widget verschwinden aus dem Layout, damit das Markup direkt im steht, genau wie in der alten Seite. */ body .elementor-element.e-con.sitio-passthrough { --display: contents; } body .elementor-element.elementor-widget-html.sitio-passthrough { display: contents; } /* ---------- 2. Widgets ---------- */ /* Kein Aussenabstand zwischen Widgets, das Original arbeitet mit eigenen margin-Utilities (mt-50, pb-25 …). Zur max-width: Elementor setzt sie in ".e-con.e-con > .e-con-inner > .elementor-widget" (0,3,0) auf 100%. Die Original-divs hatten keine Begrenzung. Der Selektor unten kommt auf (0,4,1) und gewinnt. */ /* Elementor gibt jedem Widget position:relative, einen Aussenabstand und max-width:100%. Nichts davon hat das Original. Bloecke, die selbst margin oder position setzen (.mb-50, .home_v_tit), werden vom Generator als rohes Markup eingesetzt und sind hier deshalb nicht betroffen. */ body .elementor-element.e-con > .elementor-element.elementor-widget:not(.box), body .elementor-element.elementor-widget:not(.box) { margin-block-end: 0; margin-block-start: 0; max-width: none; position: static; } /* Sonderfall: Auf der Datenschutz- und der Impressum-Seite ist eine .box-Sektion im Original so verschachtelt, dass sie hier als Text-Widget landet statt als Container. Sie muss trotzdem das 24-Spalten-Raster aufspannen, deshalb darf ihr weder max-width noch das Grid genommen werden. o_24.css erledigt das, die Regel oben darf nur nicht dazwischenfunken. */ /* Bei aktivem e_optimized_markup bleibt vom Text-Widget nur dieses eine div uebrig. Es soll das Layout nicht beeinflussen. */ .elementor-widget-text-editor > .elementor-text-editor, .elementor-widget-text-editor > .elementor-widget-container > .elementor-text-editor { display: contents; } /* Das Bild-Widget behaelt seinen inneren Wrapper. */ .elementor-widget-image > .elementor-widget-container { display: contents; } /* Elementor gibt jedem Bild innerhalb von .elementor eigene Grundstile: ".elementor img { height:auto; max-width:100% }". Beide stoeren. height wird hier bewusst NICHT gesetzt, sonst ueberschreibt es die Regel von simpleParallax weiter unten. */ body .elementor-element img, body .elementor-widget-html img { border: none; border-radius: 0; box-shadow: none; max-width: none; } /* simpleParallax wickelt das Bild zur Laufzeit in

. global.css setzt dort width/height auf inherit, verliert aber gegen ".elementor img" (gleiche Spezifitaet, laedt spaeter). Hier gewinnen wir. */ body .simpleParallax, body .simpleParallax img { width: inherit; height: inherit; } /* ---------- 3. Reste ---------- */ /* Elementor haengt an den Seiteninhalt einen Wrapper mit data-elementor-id. Er darf das Grid nicht einschraenken. */ [data-elementor-type="wp-page"] { display: contents; } /* ---------- 4. Aus dem alten Inline-Style im Footer ---------- */ /* Diese Regeln standen in sitio/footer.php in einem