/* Bruecke zwischen Elementors Bausteinen und dem Entwurfs-Stylesheet. * * Sie ist absichtlich kurz. Der grosse Teil dessen, was hier anfangs stand, * war nur ein Kampf um die Ladereihenfolge — geloest dadurch, dass site.css * seit dem 26.08.2026 NACH Elementors CSS geladen wird. Uebrig bleibt, was * sich nicht durch Reihenfolge loesen laesst: Elementor haengt die * Entwurfsklasse an die aeussere Huelle eines Bausteins, waehrend das * eigentliche Element eine Ebene tiefer sitzt. * * Geladen auf allen Seiten der Website. * * WARUM an einigen Stellen "html body" davor steht: Im EDITOR ist auf die * Ladereihenfolge kein Verlass — Elementor spielt sein CSS dort nachtraeglich * ein und gewinnt jeden Gleichstand, auch wenn diese Datei auf der * ausgelieferten Seite spaeter kommt. Regeln, die gegen eine Vorgabe des * Gestaltungssatzes antreten, brauchen deshalb Spezifitaet statt Reihenfolge. * Ohne das erschien der umrandete Knopf im Editor dunkel gefuellt und war * nicht lesbar. Am 26.08.2026 gesehen. */ /* Ueberschrift: die Klasse traegt die Huelle, der Titel steht darin. */ .elementor-widget-heading .elementor-heading-title { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; } /* Fliesstext: der Absatz erbt von der Huelle, bringt aber keinen eigenen Abstand mit — die Abstaende kommen aus dem Entwurf. Bewusst KEIN "font: inherit" hier: das wuerde Regeln wie ".rows p" aushebeln, die den Absatz gezielt ansprechen. */ .elementor-widget-text-editor p { margin: 0; } /* Knoepfe. Aussehen und Masze des Standardknopfs stehen seit dem 26.08.2026 im Elementor-Gestaltungssatz, nicht mehr hier — dadurch zeigt der Editor von sich aus den Marken-Knopf, und ein Klick auf die Farbpalette kann ihn nicht mehr versehentlich umfaerben. Hier bleibt nur, was der Gestaltungssatz nicht kennt. */ /* Mindestgroesze der Tippflaeche — dafuer gibt es keinen Regler im Kit. */ html body .elementor-widget-button .elementor-button { min-height: 44px; } /* Die zweite Knopfart: umrandet statt gefuellt. Der Gestaltungssatz kennt nur einen Knopf, also ist die Ausnahme hier richtig aufgehoben. */ /* Die zweite Knopfart: umrandet statt gefuellt. Der Gestaltungssatz kennt nur einen Knopf, also ist die Ausnahme hier richtig aufgehoben. Wichtig dazu in den Baustein-Daten: bei diesen Knoepfen steht der Hintergrundtyp ausdruecklich auf leer. Er steuert, OB Elementor ueberhaupt eine Regel fuer die Flaeche einspritzt. Bleibt er ungesetzt, greift die Vorgabe des Bausteins (globale Akzentfarbe) und erzeugt eine Regel mit vier Klassen, gegen die hier kein Ankommen ist — der Knopf war dann im Editor dunkel gefuellt und unlesbar. Mit leerem Typ entsteht keine solche Regel, und diese Zeilen genuegen ohne !important. (26.08.2026, Hinweis von Ferdinand: im Editor den Hintergrundtyp umschalten macht ihn weisz.) */ html body .af-btn--ghost .elementor-button { background: transparent; color: var(--fg-strong); border-color: var(--border-2); } html body .af-btn--ghost .elementor-button:hover { background: var(--bg-section); color: var(--fg-strong); border-color: var(--border-2); } /* Die erste Knopfart: gefuellt. Fehlte hier bis zum 10.09.2026, und der Mangel war im hellen Modus unsichtbar — deshalb ist er lange stehen geblieben. Elementors globale Akzentfarbe ist ein fester Hexwert (#112233) und dreht sich beim Themenwechsel nicht mit. Im Dunkelmodus hatte der Knopf damit exakt die Hintergrundfarbe der Seite: Kontrast 1,00, gemessen auf /preise/ am CTA "30 Tage kostenlos testen". Sichtbar blieb nur die weisze Schrift, die Knopfflaeche war weg — und der umrandete Nebenknopf daneben sah dadurch klickbarer aus als die Hauptaktion. Aufgefallen durch einen oeffentlichen Kommentar, nicht durch uns. Zwei Klassen plus zwei Elemente schlagen die zwei Klassen der Baustein-Regel (.elementor-widget-button .elementor-button). Kein !important noetig. */ html body .af-btn--primary .elementor-button { background-color: var(--primary); color: var(--primary-fg); border-color: transparent; } html body .af-btn--primary .elementor-button:hover { background-color: var(--primary-h); color: var(--primary-fg); } /* Elementor legt zwischen die Abschnitte 20 px Behaelterabstand, die im Entwurf nicht vorkommen. Dort ist "padding:74px 0" der GANZE Rhythmus, und die farbigen Baender tragen ihre Haarlinien oben und unten, weil sie unmittelbar aneinanderstossen sollen. Mit den 20 px schwebt die Linie stattdessen frei, und zwischen zwei Abschnitten stehen 168 px statt der entworfenen 148. Am 10.09.2026 von aussen als "ungewollte Pixel zwischen zwei Abschnitten" gemeldet — zu Recht. Der Wandler setzt keine Luecke, sie ist Elementors Vorgabe, die niemand ueberschrieben hat. :has(> .section) trifft genau den Seitenbehaelter, der unsere Abschnitte haelt, und laesst jeden anderen Container in Ruhe. */ .e-con:has(> .section){row-gap:0} /* Elementor stellt jeden Container auf "Spalte". Wo der Entwurf eine Reihe meint, muss die Richtung zurueckgedreht werden. */ .e-con.ctarow, .e-con.pills { flex-direction: row; align-items: center; } /* Die Huellen um den Knopf sollen die Reihe nicht auseinanderziehen. Bewusst NICHT "display: contents": ein Element ohne eigene Box laesst sich im Editor nicht anklicken, auswaehlen oder ziehen, und Elementor hebt die Angabe dort auf. Die Huellen bleiben deshalb normale Kaesten und werden selbst zu Elementen der Reihe. Am 26.08.2026 im Editor gesehen. */ .e-con.ctarow > .elementor-widget { width: auto; flex: 0 0 auto; } /* Eine Zeile aus .rows ist im Entwurf ein
  • , hier ein Container. Der Entwurf spricht ".rows>li" an, was einen Container nicht trifft. */ .rows > .e-con.row { border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 24px 0; align-items: start; } .e-con.row > .e-con { display: block; padding: 0; } /* Der Aufklapper bringt eigene Rahmen, Flaechen und ein eigenes Zeichen mit; das Aussehen kommt aus ".faq" im Entwurf. */ .faq .e-n-accordion-item { border: 0; border-bottom: 1px solid var(--border); background: none; } .faq summary.e-n-accordion-item-title { padding: 20px 0; background: none; border: 0; } .faq .e-n-accordion-item-title-icon { display: none; } .faq .e-con { padding: 0; } /* Abstaende der nachgestellten Verweiszeile und des letzten Kopfblocks. */ .af-nachsatz { margin-top: 26px; } .af-ohne-abstand { margin-bottom: 0; } /* Elementors Knopf-Vorgabe trifft nicht nur .elementor-button, sondern jedes gewoehnliche