/* Theme Name: SCIT Elementor Child Theme URI: https://system-coreit.de/ Description: Schlankes Child-Theme fuer Hello Elementor, angepasst fuer mds25.de. Author: System coreIT GmbH Author URI: https://system-coreit.de/ Template: hello-elementor Version: 1.0.0 Text Domain: scit-elementor-child */ /* --------------------------------------------------------------------------- * Ausgleich fuer den Wechsel Astra -> Hello Elementor (2026-08-28) * * Alle Werte hier sind NICHT geraten, sondern vor dem Wechsel im Browser an den * berechneten Stilen gemessen (Playwright auf mon, 3 Seiten x 3 Bildschirm- * breiten) und gegen Astras erzeugtes CSS gegengelesen. Hello Elementor liefert * durchweg andere Vorgaben; ohne diese Zeilen verschiebt sich die ganze Seite. * ------------------------------------------------------------------------- */ /* Grundmass. * ⚠️ Astra skaliert das Grundmass ab 921 px auf 91,2 % (14,592 px). Hello * Elementor tut das nicht. Ohne diese Media-Query wuerde jede rem-Angabe auf * Tablet und Handy um 9,6 % wachsen. Das Rezept anderer Umbauten (wascher: * 93,75 % durchgehend, lknails: 16 px durchgehend) passt hier NICHT. */ html { font-size: 100%; } @media (max-width: 921px) { html { font-size: 91.2%; } } /* Grundschrift. Astra lieferte einen System-Stack, kein Roboto — Roboto steht * nur in den Elementor-Widgets. Hello Elementor bringt zwar einen aehnlichen * Stack mit, aber Zeilenhoehe 1.5 statt 1.65 und Farbe #333 statt #334155. */ body, button, input, select, textarea, .ast-button, .ast-custom-button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.65; } body { color: #334155; } /* Verweise. Hello Elementor liefert sonst #c36 (rosa) statt Astras Blau. */ a { color: #046bd2; } a:hover, a:focus { color: #045cb4; } /* Ueberschriften. Hello Elementor: Gewicht 500, Zeilenhoehe 1.2, eigene Groessen. */ h1, h2, h3, h4, h5, h6, .entry-content :where(h1, h2, h3, h4, h5, h6) { font-weight: 600; color: #1e293b; } h1, .entry-content :where(h1) { font-size: 2.25rem; line-height: 1.4em; } h2, .entry-content :where(h2) { font-size: 1.875rem; line-height: 1.3em; } h3, .entry-content :where(h3) { font-size: 1.5rem; line-height: 1.3em; } h4, .entry-content :where(h4) { font-size: 1.25rem; line-height: 1.2em; } h5, .entry-content :where(h5) { font-size: 1.125rem; line-height: 1.2em; } h6, .entry-content :where(h6) { font-size: 1rem; line-height: 1.25em; } @media (max-width: 921px) { h1, .entry-content :where(h1) { font-size: 1.875rem; } h2, .entry-content :where(h2) { font-size: 1.5625rem; } h3, .entry-content :where(h3) { font-size: 1.25rem; } } /* Zeilenhoehe der Elementor-Ueberschriften. * ⚠️ Diese sechs Regeln hat Astra mitgeliefert — sie bestimmen die Zeilenhoehe * JEDES Ueberschrift-Widgets, das keine eigene gesetzt hat. Gemessen: die 64-px- * H1 der Startseite hatte 89,6 px = 1,4em, genau aus dieser Regel. */ h1.elementor-heading-title { line-height: 1.4em; } h2.elementor-heading-title { line-height: 1.3em; } h3.elementor-heading-title { line-height: 1.3em; } h4.elementor-heading-title { line-height: 1.2em; } h5.elementor-heading-title { line-height: 1.2em; } h6.elementor-heading-title { line-height: 1.25em; } /* Absatzabstand. Astra: 1.6em, Hello Elementor: 0.9rem. * * ⚠️ Hello Elementor umschliesst den Inhalt mit .page-content, Astra mit * .entry-content — und auf der Startseite hatte Astra ueberhaupt keinen * solchen Wrapper. Beide Namen stehen deshalb nebeneinander. * * ⚠️⚠️ Das :where() ist der eigentliche Trick und kein Schoenheitsfehler: * es setzt die Spezifitaet des Bereichs auf NULL, die Regel zaehlt also wie * ein blosses "p". Astras Fassung lag an zweiter Stelle im Kopfbereich und * verlor damit gegen Elementors spaetere Regeln — auf der Startseite gegen * ".pnmb p { margin-bottom: 0 }" aus dem Kit. Diese Datei laedt dagegen als * LETZTE. Ohne :where() wuerde sie ".pnmb p" schlagen und alle 17 Absaetze * der Startseite bekaemen Abstand, den sie vorher nicht hatten (nachgemessen: * Seitenhoehe 6272 -> 6426 px). Mit :where() gewinnt wieder das Kit. */ :where(.entry-content, .page-content) p { margin-bottom: 1.6em; } /* Absaetze in Aufzaehlungen ohne Abstand — Astra hatte dafuer eine eigene * Regel; ohne sie waechst die Datenschutzseite um neun Abstaende. */ :where(.entry-content, .page-content) li > p { margin-bottom: 0; } /* Aussenabstaende der Ueberschriften. Astra: oben 0, unten 20 px. * Hello Elementor: oben 0.5rem, unten 1rem — und das rem-Mass schrumpft auf * dem Handy zusaetzlich mit (7,3 statt 0 und 14,6 statt 20 px, nachgemessen). * * Betrifft nur Ueberschriften im FLIESSTEXT. Elementors Ueberschriften-Widget * setzt ".elementor-widget-heading .elementor-heading-title { margin: 0 }" und * ist damit staerker — genau wie unter Astra. */ h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 20px; } /* Aufzaehlungen. Hello Elementor setzt die Aussenabstaende auf 0 und laesst * die Einrueckung beim Browservorgabewert 40 px; Astra lieferte 16 px oben und * unten bei 20 px Einrueckung. Ohne diese Regel ruecken alle Aufzaehlungen der * Datenschutzseite 20 px weiter ein und verlieren ihren Abstand. */ :where(.entry-content, .page-content) ul, :where(.entry-content, .page-content) ol { margin-block-start: 16px; margin-block-end: 16px; padding-inline-start: 20px; } /* Der Container der Datenschutzseite — und NUR dieser einen Seite. * * ⭐ Astra behandelte die drei Seiten unterschiedlich: Startseite und Impressum * liefen ohne Container voll breit, die Datenschutzseite steckte in Astras * ".ast-container" (max. 1240 px inkl. 20 px Seitenabstand). Das ist keine * Absicht, sondern eine Astra-Eigenheit — diese eine Seite war nie auf das * Seitenbaukasten-Layout umgestellt. * * Gemessen (Astra, mobil 390 px): Textspalte 330 px, 30 px vom Bildschirmrand. * Ohne diese Regel sind es 370 px und 10 px — der Text klebt am Rand. * Am Desktop ist der Unterschied rechnerisch NULL: dort landet die Textspalte * so oder so 150 px vom Rand entfernt, nur die durchsichtige Huelle drumherum * ist breiter. Nachgerechnet und nachgemessen. * * 🔜 Wenn die Seite bewusst voll breit laufen soll, kann diese Regel weg — * dann ist es eine Entscheidung und kein unbemerkter Nebeneffekt. */ body.page-id-3 .page-content { max-width: 1240px; margin-inline: auto; padding-inline: 20px; } /* Lange Woerter umbrechen. Astra hatte ".entry-content { word-wrap: break-word }", * Hello Elementor hat gar nichts dergleichen. * * ⭐⭐ Das ist kein Schoenheitsdetail: Auf dem Impressum steht die Ueberschrift * "Verbraucherstreitbeilegung/Universalschlichtungsstelle". Ohne Umbruch ist * sie am Handy rund 600 px breit und schiebt die Seite auf 609 px Breite — * gemessener waagerechter Ueberlauf, den es unter Astra nicht gab. */ :where(.entry-content, .page-content) { overflow-wrap: break-word; } /* Trennlinien. Astra: 1 px in #ccc mit 1.5em Abstand darunter. * Hello Elementor laesst dem Browser freie Hand — daraus wird eine 2 px hohe * Rahmenlinie ohne Abstand. Sichtbar im Impressum. */ hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } /* ⚠️⚠️ Und derselbe Strich noch einmal — staerker. * Elementor setzt "body .elementor hr" ... nein: Elementor setzt * ".elementor hr { background-color: transparent }" und schlaegt damit die * Regel darueber. Astra hatte genau dafuer eine eigene, staerkere Fassung * ("body .elementor hr"). Ohne sie bleibt der Strich unsichtbar — die Seite * ist dann exakt gleich hoch, aber die drei Trennlinien im Impressum fehlen. * Gemessen: Pixel 204,204,204 vorher gegen 255,255,255 nachher. */ body .elementor hr { background-color: #ccc; margin: 0; } /* Verweise im Fliesstext unterstreichen. * Astra: ".ast-single-post .entry-content a { text-decoration: underline }". * Ohne diese Regel verlieren die beiden langen Gesetzes- und EU-Verweise im * Impressum ihre Unterstreichung (nachgemessen: 275 bzw. 254 Bildpunkte in * #046bd2, die nach dem Wechsel weiss waren). * * ⚠️ Die Staerke ist mit Absicht dieselbe wie bei Astra (zwei Klassen + Element). * Schreibt man sie schwaecher, greift sie nicht; schreibt man sie staerker, * bekommen auch Schaltflaechen und Menues im Inhalt eine Unterstreichung, die * sie vorher nicht hatten. */ body.page .page-content a, body.page .entry-content a { text-decoration: underline; }