/* Manrope (SIL OFL), self-hosted, variable 200 to 800. Set 2026-09-12. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/manrope-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: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/manrope-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; } /** * Theme Name: Hello Elementor Child * Author: Elementor Team * Template: hello-elementor * Text Domain: hello-elementor-child * Description: A plain-vanilla * Version: 1.2.4 */ #preview-action{ display: none !important; } /* mgportal login, Task 6 */ .mg-lang-switcher .elementor-widget-container { text-align: center; } .mg-lang { display: inline-flex; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #ffffff; overflow: hidden; box-shadow: none; } /* Fix round 1 (Task 6): ".mg-lang__item" alone is 1 class (specificity 0,1,0), which loses to Elementor's global kit/reset rules at 0,1,1 ("elementor img" for the flag border-radius, ".elementor-kit-4 a" for the text color) since those load later in the cascade. Every switcher rule below is now scoped under ".mg-lang" as well, so the class count wins on the specificity comparison without needing !important. */ .mg-lang .mg-lang__item { display: inline-flex; align-items: center; gap: 8px; height: 36px; min-height: 36px; padding: 0 14px; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: #1a1a1a; text-decoration: none; background-color: transparent; transition: background-color 150ms ease, color 150ms ease; } .mg-lang .mg-lang__item img { display: block; width: 18px; height: 12px; border-radius: 2px; } .mg-lang .mg-lang__item.is-current { background-color: #1a1a1a; color: #ffffff; cursor: default; } .mg-lang .mg-lang__item:not(.is-current):hover { background-color: #f0f0f0; color: #1a1a1a; } .mg-lang .mg-lang__item:focus-visible { outline: 2px solid #1a1a1a; outline-offset: -2px; } /* Fix round 1: rest of the viewport (below the section) was light grey (body background) at 1920x1080. Body class on Post 2 confirmed as "page-id-2" (curl of the live page). Elementor's own generated CSS (uploads/elementor/css/post-2.css) sets "body.elementor-page-2 { background-color: var(--e-global-color-secondary) }" (#F6F6F6) at equal specificity but later in the cascade, so !important is needed to win reliably. */ body.page-id-2 { background-color: #1a1a1a !important; } /* mgportal login, Task 2 */ .elementor-login input:focus-visible, .elementor-login .elementor-button:focus-visible, .elementor-widget-button a:focus-visible, .elementor-login a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .elementor-login input:focus-visible { outline-color: #1a1a1a; outline-offset: -3px; } /* Fix round 1 (Task 2): Elementor core frontend.min.css ships ".elementor-field-group .elementor-field-textual:focus{outline:0}" at specificity (0,3,0), which beats ".elementor-login input:focus-visible" at (0,2,1): the class count (3 vs 2) decides before the element count is even compared, so the input lost outline-style/width to that rule (outline-color/outline-offset still applied, since those are set by a separate, later longhand rule below at equal specificity to the Elementor rule's shorthand, which is not enough on its own but happened to not be contested for those two properties in testing). Adding the ".elementor-field-group" ancestor class (present on the field wrapper, see DOM) to the same selectors raises both rules to (0,3,1), which wins outright. Selectors from the block above are kept verbatim per the brief ("nicht kürzen"); these are additions, not replacements. */ .elementor-login .elementor-field-group input:focus-visible, .elementor-login .elementor-button:focus-visible, .elementor-widget-button a:focus-visible, .elementor-login a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .elementor-login .elementor-field-group input:focus-visible { outline-color: #1a1a1a; outline-offset: -3px; } /* mgportal login, Task 3 */ /* Body-Schrift auf der Login-Seite: Theme-Reset setzt den System-Stack auf body; die Elementor-Kit-Typografie-Variablen (Manrope) greifen nur auf Text-/Ueberschriften-Widgets, nicht auf body selbst. Korrigierter Selektor (Brief hatte ".page-id-2 body", das nie matcht, da body die Klasse selbst traegt, nicht ein Vorfahre davon ist): "body.page-id-2" wie in Task 1/6 bereits verwendet. */ body.page-id-2, .page-id-2 .elementor-login { font-family: "Manrope", sans-serif; } /* "Passwort vergessen?"-Link: kein Typografie-Control im Login-Widget (Elementor-Pro login.php kennt nur links_color / links_hover_color, siehe modules/forms/widgets/login.php), deshalb Child-CSS auf .elementor-login a wie im Brief vorgegeben. Farbe bleibt unveraendert (bereits #f6f6f6 ueber das Widget-Setting links_color gesetzt, hoehere Spezifitaet als hier). */ .elementor-login a { font-family: "Manrope", sans-serif; font-size: 15px; line-height: 24px; text-decoration: underline; } /* Fix round 1 (Task 3): two rules beat ".elementor-login a" (0,1,1) above for two of its four properties. (1) Elementor Pro widget-login.min.css ships ".elementor-login .elementor-lost-password{font-size:.85em}" at (0,2,0), which wins on class count alone regardless of load order, so font-size stayed at 13.6px. (2) Elementor core frontend.min.css ships ".elementor a{text-decoration:none}" at the same (0,1,1) as the rule above, loaded later in (elementor-frontend-css comes after child-style-css), so it won on source order and text-decoration stayed "none". Adding the link's own ".elementor-lost-password" class (confirmed in the DOM, see Task 2 report) raises specificity to (0,2,1), which beats both outright. The rule above is kept per the brief's literal selector; this is an addition, not a replacement. */ .elementor-login a.elementor-lost-password { font-size: 15px; line-height: 24px; text-decoration: underline; } /* mgportal registrieren, Task 5 */ /* Body-Hintergrund ausserhalb der Karte: Elementor generiert "body.elementor-page-278 { background-color: var(--e-global-color-secondary) }" (post-278.css) an derselben Spezifitaet (0,1,1) wie "body.page-id-278" hier, aber spaeter im Cascade (siehe Task 6, body.page-id-2), deshalb !important wie beim Login-Pendant. Body-Klasse vor Aenderung per curl bestaetigt (page-id-278 vorhanden). */ body.page-id-278 { background-color: #1a1a1a !important; } /* d) Fokusring auf den JetEngine-Formularfeldern (Selektor aus dem Brief, verbatim). ".elementor-widget-button a" aus der Login-Regel ist hier nicht anwendbar: das Formular ist JetEngine-gerendert, kein Elementor-Button-Widget ist im DOM vorhanden. */ .jet-form__field:focus-visible, .jet-form button:focus-visible, .jet-form__submit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Verification fix: die 452px-Karte macht die Postleitzahl-Spalte (3 von 12, ca. 90px) schmaler als das ungebrochene Wort "Postleitzahl*" (kein Leerzeichen zum Umbrechen), das Label lief deshalb sichtbar in "Ort*" hinein (Screenshot vor Fix: plz-crop.png). ".jet-form__label-text" erlaubt jetzt einen Wortumbruch, betrifft nur lange Labels ohne Leerzeichen. */ .elementor-element-2aa6b6a .jet-form__label-text { overflow-wrap: break-word; word-break: break-word; } /* e) Eingabetext auf Manrope (Label-Typografie ist bereits Manrope 20px ueber das Elementor-Widget-Setting labels_typography_font_family, siehe post-278-elementor-data.json vor Aenderung: keine CSS noetig dafuer). */ .elementor-element-2aa6b6a .jet-form__field { font-family: "Manrope", sans-serif; } /* f) Submit "Registrierung anfragen" als gefuellter Primaerbutton, wie "Anmelden" nach Task 3 (button_background_color #FFFFFF, button_text_color #1A1A1A, button_background_hover_color #E6E6E6, 150ms). Elementor generiert fuer dieses Widget ".elementor-278 .elementor-element.elementor-element-2aa6b6a .jet-form__submit{ background-color:#00000000; ... }" bei Spezifitaet (0,4,0); der Selektor unten haengt "body.page-id-278" (Typ + Klasse) davor, was bei gleicher Klassenzahl durch den zusaetzlichen Typselektor gewinnt, kein !important noetig. Hover-Regel entsprechend gegen Elementors Hover-Regel bei (0,5,0). */ body.page-id-278 .elementor-element-2aa6b6a .jet-form__submit-wrap .jet-form__submit { background-color: #ffffff; color: #1a1a1a; height: 54px; transition: background-color 150ms ease, color 150ms ease; } body.page-id-278 .elementor-element-2aa6b6a .jet-form__submit-wrap .jet-form__submit:hover { background-color: #e6e6e6; color: #1a1a1a; } /* Formularfelder erben die globale Schrift (Elementor-Checkout setzt sonst Roboto) */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection, .elementor-field-group input, .elementor-field-group textarea { font-family: inherit; } .woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea, .woocommerce-checkout .select2-selection__rendered, .woocommerce-cart input, .woocommerce-account input { font-family: inherit !important; } /* Elementor Pro WooCommerce-Widgets bringen Roboto mit, auf die globale Schrift ziehen */ .elementor-widget-woocommerce-checkout-page, .elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-my-account, .elementor-widget-woocommerce-purchase-summary, .e-woo-select2-wrapper .select2-results__option, .e-wc-message-notice .button, .e-wc-info-notice .button { font-family: "Manrope", sans-serif !important; } .woocommerce input.qty, .woocommerce .quantity input, .woocommerce-cart-form input, .woocommerce-cart-form button, .woocommerce-cart-form select { font-family: "Manrope", sans-serif !important; }