darin. Die inneren Tags werden deshalb über Nachfahren-Selektoren angesprochen. Die Selektoren liegen bewusst eine Klasse höher als Elementors eigene (`.elementor-widget-heading .elementor-heading-title`), damit die Marke gewinnt, egal in welcher Reihenfolge die Stylesheets geladen werden. 2. Ein Container mit content_width:"boxed" schiebt `.e-con-inner` zwischen sich und seine Kinder; ein Grid auf dem Container erreicht die Karten dann nicht. Layout-Container laufen darum mit content_width:"full". [DOM-PROBE] markiert Absicherungen für den Fall, dass Punkt 2 doch anders gerendert wird. Sie kosten nichts, wenn die Annahme stimmt, und können nach der Probe an der Live-Installation entfallen. ============================================================ */ /* ---- Prozess-Raster (Sektion 4) ---- */ /* Spaltenzahl als Variable, damit das Raster nicht doppelt gepflegt werden muss — sie vererbt sich bis in ein etwaiges .e-con-inner. */ :is(.theme-label,.theme-assesi) .proc{--proc-cols:repeat(4,1fr)} @media(max-width:860px){:is(.theme-label,.theme-assesi) .proc{--proc-cols:1fr 1fr}} @media(max-width:480px){:is(.theme-label,.theme-assesi) .proc{--proc-cols:1fr}} /* Schlägt Elementors `.e-con{display:flex}` über die höhere Spezifität. */ :is(.theme-label,.theme-assesi) .proc{display:grid;grid-template-columns:var(--proc-cols);gap:18px} /* [DOM-PROBE] Liegt doch ein .e-con-inner dazwischen, wandert das Raster eine Ebene tiefer. Ohne :has()-Unterstützung fällt die Regel weg und es bleibt beim Grid oben — die Annahme "full". */ :is(.theme-label,.theme-assesi) .proc:has(>.e-con-inner){display:block} :is(.theme-label,.theme-assesi) .proc:has(>.e-con-inner)>.e-con-inner{display:grid;grid-template-columns:var(--proc-cols);gap:18px} /* ---- Prozessschritt-Karte ---- */ /* position:relative trägt das Icon; gap:0, weil die Abstände über die Margins der einzelnen Teile laufen, nicht über den Container-Gap. */ :is(.theme-label,.theme-assesi) .proc-step{position:relative;gap:0} /* [DOM-PROBE] Bei "boxed" trägt das .e-con-inner den Gap, nicht die Karte. */ :is(.theme-label,.theme-assesi) .proc-step>.e-con-inner{gap:0} /* Elementor setzt zwischen Widgets einen Grundabstand — hier stört er. Der Neutralisierer liegt zwangsläufig hoch in der Spezifität und würde auch die gewollten Abstände der Basisregeln schlucken; die beiden Zeilen danach holen sie auf gleicher Ebene zurück. */ :is(.theme-label,.theme-assesi) .proc-step .elementor-widget:not(:last-child){margin-block-end:0} :is(.theme-label,.theme-assesi) .proc-step .elementor-widget.proc-step__n{margin-block-end:1.1rem;width:40px;height:40px} :is(.theme-label,.theme-assesi) .proc-step .elementor-widget.proc-step__t{margin-block-end:.45rem} /* Ziffer: der Kreis ist der Widget-Wrapper, die Zahl steckt darin. Breite/Höhe stehen absichtlich in der hoch spezifischen Regel oben — Elementor gibt Widgets in Containern eine Breite (mindestens `.elementor-widget{width:100%}`, je nach Version auch als Kind-Selektor `.e-con>.elementor-widget`). Auf gleicher Stufe würde die spätere Datei gewinnen und aus dem Kreis eine Pille über die volle Kartenbreite machen. */ /* `color:#fff` steht hier und nicht nur im Grundzug weiter oben. Muss es auch: Die Grundzug-Regel `.proc-step__n{background:navy;color:#fff}` liegt bei (0,1,0), und der Widget-Grundwert `:is(.theme-label,.theme-assesi) [class*="elementor-widget-"]{color:var(--text-body)}` liegt bei (0,2,0) — er gewinnt und faerbte die Ziffer navy. Auf navyem Grund. Gemessen 1:1, also unsichtbar; auf der Startseite betraf das die vier Prozessschritte. Der Hintergrund kam durch, die Schriftfarbe nicht — deshalb faellt so etwas beim Draufsehen nicht auf, sondern nur beim Nachmessen. `.elementor-widget.proc-step__n` und nicht nur `.proc-step__n`: Beide laegen sonst bei (0,2,0), und dann entschiede die Reihenfolge in der Datei — der Widget-Grundwert steht weiter unten und gewaenne. Zwei Klassen heben die Regel auf (0,3,0). */ :is(.theme-label,.theme-assesi) .elementor-widget.proc-step__n{flex:none; font-variant-numeric:tabular-nums;color:#fff} :is(.theme-label,.theme-assesi) .proc-step__n .elementor-heading-title{font-family:var(--font-display);font-weight:800; font-size:1rem;line-height:1;color:inherit;font-variant-numeric:tabular-nums;margin:0} /* Titel. margin:0 überall, weil die Browser-Default-Margin der Überschrift sonst die Zentrierung bzw. den Abstand verschiebt — Elementor setzt sie zwar selbst zurück, verlassen wollen wir uns darauf nicht. */ :is(.theme-label,.theme-assesi) .proc-step__t .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:1.02rem;line-height:1.35;color:var(--text-strong);margin:0} /* Beschreibung: der Text-Editor liefert
im .elementor-widget-container. */ :is(.theme-label,.theme-assesi) .proc-step__d p{margin:0;font-size:.88rem;line-height:1.6;color:var(--text-soft)} :is(.theme-label,.theme-assesi) .proc-step__d p+p{margin-top:.6rem} /* Icon je Schritt. Der Modifier sitzt am Ziffern-WIDGET, nicht am Karten-Container: Klassen auf Containern überleben den Import in Elementor 4.2.1 nicht (siehe Block „Inhaltsbasierte Selektoren"), Klassen auf Widgets schon. Das ::before wird absolut positioniert und verlässt damit den Ziffernkreis; Bezug ist die Karte, weil sie position:relative trägt. Obere rechte Ecke, damit es die Ziffer nicht verdrängt. Die Farbe kommt über currentColor aus der Basisregel des Icon-Blocks. */ /* position:static hebt Elementors `position:relative` am Widget auf. Sonst waere der 40px-Kreis der Bezugspunkt und das Icon landete unter ihm statt in der Kartenecke — so geschehen im ersten Import-Durchgang. */ :is(.theme-label,.theme-assesi) .proc-step__n[class*="--ico-"]{position:static} /* Auf Mitte des Ziffernfelds statt auf dessen Oberkante, und leiser. Vorher stand das Symbol als gleichwertiges Element rechts neben dem gefuellten Ziffernfeld — die Karte hatte zwei Blickfaenger. */ :is(.theme-label,.theme-assesi) .proc-step__n[class*="--ico-"]::before{position:absolute;top:2.3rem;right:1.5rem; width:22px;height:22px;color:var(--accent-ink);opacity:.7} /* ---- Button-Reihe ---- */ /* Abstand und Umbruch kommen aus den nativen Flex-Settings des Containers (Muster aus elementor-15). Diese Regeln setzen dasselbe noch einmal als Absicherung: der Elementor-Grundabstand zwischen Widgets stört in einer Reihe, und ohne width:auto zieht Elementor die Buttons auf volle Breite. */ :is(.theme-label,.theme-assesi) .btn-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px} :is(.theme-label,.theme-assesi) .btn-row .elementor-widget{margin-block-end:0;width:auto} /* [DOM-PROBE] Bei "boxed" liegt die Reihe eine Ebene tiefer — ohne das stapeln die Buttons untereinander. */ :is(.theme-label,.theme-assesi) .btn-row:has(>.e-con-inner){display:block} :is(.theme-label,.theme-assesi) .btn-row:has(>.e-con-inner)>.e-con-inner{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px} /* ---- Sektionskopf in nativen Widgets ---- */ /* Elementors Kit-Regel setzt eine font-family auf .elementor-heading-title und schlaegt damit die Vererbung vom Wrapper. Jede gestylte Ueberschrift braucht die Familie deshalb ausdruecklich — sonst haengt sie am Elementor-Kit. */ :is(.theme-label,.theme-assesi) .eyebrow .elementor-heading-title{font-family:var(--font-display)} /* .eyebrow braucht nichts: der Wrapper trägt inline-flex und den ✓-Marker, die Typografie kommt aus den Widget-Settings (Handoff §2). Titel und Lede dagegen müssen ihre Werte an das innere Tag weiterreichen, sonst gewinnt Elementors Kit-Typografie. */ :is(.theme-label,.theme-assesi) .sec-title .elementor-heading-title{font:inherit;color:inherit;letter-spacing:inherit;margin:0} :is(.theme-label,.theme-assesi) .sec-lede p{margin:0;font:inherit;color:inherit} :is(.theme-label,.theme-assesi) .sec-lede p+p{margin-top:.9rem} /* ============================================================ INHALTSBASIERTE SELEKTOREN — Container ohne eigene Klassen Befund aus dem Pilot-Import (Elementor 4.2.1, Juli 2026): `_css_classes` auf CONTAINERN überlebt den Weg JSON → Bibliotheks-Vorlage → Seite nicht. Im Export der Vorlage stehen die Werte noch (`section`, `sec-head`, `proc`, `proc-step`, `btn-row`), im gerenderten HTML fehlen sie vollständig. Von Hand im Editor eingetragene Klassen erscheinen dagegen — der Verlust liegt also am Einfüge-Weg, nicht am Schlüsselnamen. Auf WIDGETS funktionieren Klassen zuverlässig; alle sechs Widget-Klassen der Sektion kamen unverändert an. Konsequenz: die Container werden über ihren INHALT angesprochen statt über eine eigene Klasse. Die Karte ist „der Container, der eine .proc-step__n enthält". Das ist strukturell statt sprechend, dafür unabhängig davon, ob Container-Klassen ankommen. Diese Regeln sind additiv zu den klassenbasierten oben. Kommen die Container-Klassen doch an, setzen beide Wege dieselben Werte — kein Konflikt. Fallen sie weg, trägt dieser Block allein. Zwei Voraussetzungen, beide in der Zielinstallation geprüft: - :has() wird unterstützt. Fehlt es, fallen die Regeln weg, ohne etwas zu beschädigen — dann trägt der klassenbasierte Weg oben, soweit die Klassen ankommen. - Die Layout-Container laufen mit content_width:"full" und haben damit KEIN .e-con-inner. Die Probe an der Installation hat das bestätigt: von 17 Containern trugen nur die drei "boxed"-Container aus Kopf- und Fußzeile ein inneres Element. Die Selektoren unten nutzen deshalb den direkten Kind-Kombinator. Bekäme ein Layout-Container doch "boxed", griffen sie nicht mehr — der Generator setzt für diese Container aber immer "full". ============================================================ */ /* Prozessschritt-Karte = Container, der die Ziffer direkt enthält */ :is(.theme-label,.theme-assesi) .e-con:has(>.proc-step__n){position:relative;gap:0; background:#fff;border:var(--card-border);border-radius:var(--r-card); box-shadow:var(--card-shadow);padding:1.7rem 1.5rem} :is(.theme-label,.theme-assesi) .e-con:has(>.proc-step__n) .elementor-widget:not(:last-child){margin-block-end:0} :is(.theme-label,.theme-assesi) .e-con:has(>.proc-step__n) .elementor-widget.proc-step__n{margin-block-end:1.1rem;width:40px;height:40px} :is(.theme-label,.theme-assesi) .e-con:has(>.proc-step__n) .elementor-widget.proc-step__t{margin-block-end:.45rem} /* Prozess-Raster = Container, dessen Kinder solche Karten sind */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.proc-step__n){--proc-cols:repeat(4,1fr); display:grid;grid-template-columns:var(--proc-cols);gap:18px} @media(max-width:860px){:is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.proc-step__n){--proc-cols:1fr 1fr}} @media(max-width:480px){:is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.proc-step__n){--proc-cols:1fr}} /* Button-Reihe = Container, dessen Kinder Button-Widgets sind */ /* Auch hier `.e-con-inner` mit aufgenommen: Die Reihe kommt im Kopfband und in der Fusszeile vor, und dort sind die Container boxed. Ohne das behielten die Widgets Elementors Grundabstand von 20px — im Konsultationsband war das eine um 9px zu hohe Zeile. */ :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.elementor-widget-button){display:flex;flex-direction:row; flex-wrap:wrap;align-items:center;gap:12px} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.elementor-widget-button)>.elementor-widget{margin-block-end:0;width:auto} /* Sektionskopf = Container, der den Eyebrow direkt enthält */ /* Der Abstand ist zweimal geschrumpft: 56px rissen ein Loch zwischen Ueberschrift und Inhalt, und auch 2.2rem lasen sich mit dem Container-Gap darunter noch als Bruch — Kundenbefund vom 07.08.2026 (Startseite, Vorspann → normative Grundlage bzw. → Versicherer-Kacheln). Der Rest des Abstands kommt aus dem Gap des Sektionsrahmens. */ /* `60ch` stand hier bis 0.33.0 und war zu breit: im Browser 679px, also rund 95 Zeichen je Zeile statt der gemeinten 60. Siehe --kopfbreite in tokens.css. */ :is(.theme-label,.theme-assesi) .e-con:has(>.eyebrow){max-width:var(--kopfbreite); margin-bottom:clamp(1rem,2vw,1.4rem)} /* Sektionsrahmen über die technische ID `sek-NN`. Inhaltsbasiert wäre er nicht eindeutig — der Hero trägt einen anderen Kicker als die übrigen Sektionen, und ein `:has(>.e-con>.eyebrow)` finge je nach Tiefe auch das umgebende Band. `_element_id` kommt beim Import nachweislich an. */ /* width:100% ist nicht redundant. Der Rahmen ist Flex-Kind eines Bandes; `margin-left/right:auto` schaltet dort das Strecken ab, und ohne eigene Breite schrumpft er auf seinen Inhalt. Sichtbar wird das erst bei schmalem Inhalt — im Browser gemessen, nicht vermutet. */ :is(.theme-label,.theme-assesi) [id^="sek-"]{width:100%;max-width:1240px;margin-left:auto;margin-right:auto; padding:var(--section-y) var(--section-x)} /* ============================================================ KOMPONENTEN DER STARTSEITE — inhaltsbasiert Alle Container werden ueber ihren INHALT angesprochen, nie ueber eine eigene Klasse: `_css_classes` auf Containern ueberlebt den Import in Elementor 4.2.1 nicht (siehe Block darueber). Vertrag: das ERSTE Widget einer Komponente traegt die Marker-Klasse. Der Container ist dann `.e-con:has(>.marker)`, das Raster `.e-con:has(>.e-con>.marker)`. Zustaende und Varianten sitzen als zweite Klasse am selben Widget — ebenfalls, weil Container sie verlieren wuerden. Zweispaltige Abschnitte: das erste Widget der linken Spalte traegt `split__a`. Damit ist die Reihe `.e-con:has(>.e-con>.split__a)`. ============================================================ */ /* ---- Zweispalter (Hero, Kosten, Aktuelles, Association) ---- */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.split__a), :is(.theme-label,.theme-assesi) .e-con-inner:has(>.e-con>.e-con-inner>.split__a){display:grid;grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem);align-items:start} @media(max-width:900px){:is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.split__a), :is(.theme-label,.theme-assesi) .e-con-inner:has(>.e-con>.e-con-inner>.split__a){grid-template-columns:1fr;gap:2.5rem}} /* ---- Karten-Grundform (alle Kartentypen teilen sie) ---- */ :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.trust-card__label), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.num-card__n), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.principle-card__n), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.v-card__title), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.blog-card__tag), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.actor-card__mark), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.compare-box__t), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.showcase__seal){position:relative;gap:0;background:#fff; border:var(--card-border);border-radius:var(--r-card);box-shadow:var(--card-shadow); padding:1.7rem 1.5rem} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.trust-card__label) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.num-card__n) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.principle-card__n) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.v-card__title) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.blog-card__tag) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.actor-card__mark) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.compare-box__t) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.showcase__seal) .elementor-widget:not(:last-child){margin-block-end:.55rem} /* Dieselbe Neutralisierung fuer die Komponenten ohne Kartenflaeche. Ohne sie traegt Elementors Grundabstand zwischen Widgets (20px) die Abstaende, nicht unsere Margins — in der Timeline faellt das als lockere Zeile auf. */ :is(.theme-label,.theme-assesi) .e-con:has(>.tl-item__date) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) .e-con:has(>.kbox__label) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) .e-con:has(>.norm-box__label) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) .e-con:has(>.pilot-cta__t) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) .e-con:has(>.newsletter-cta__t) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) .e-con:has(>.assoc-visual__name) .elementor-widget:not(:last-child){margin-block-end:0} /* ---- Sektion 1: Hero ---- */ /* Hintergrundbild. Es haengt an der ID des AEUSSEREN Bandes, nicht an einer Klasse: Container-Klassen ueberleben den Import nicht, `_element_id` schon (Pilot-Befund). Und es haengt am Band, nicht am Rahmen `[id="sek-01"]` — der ist auf 1240px begrenzt, das Bild soll randlos laufen. Warum nicht ueber Elementors `background_image` im Seiten-JSON: Der Key steht in allen Referenz-Exporten leer (`{url:"",id:"",size:""}`). Die Form ist damit belegt, ein gefuellter Fall nicht — und ob Elementor eine blosse URL ohne Media-ID ausspielt, waere geraten. Ueber CSS ist es belegbar, in der Werkstatt aenderbar und beim naechsten Import nicht in Gefahr. `isolation:isolate` haelt den Schleier im eigenen Stapel; ohne ihn legt sich `z-index:-1` der Lime-Unterstreichung in der H1 unter den Schleier und verschwindet. */ :is(.theme-label,.theme-assesi) [id="hero-bild"]{ position:relative;isolation:isolate; background-color:var(--hero-grund); background-image:var(--hero-bild); background-size:cover; background-position:var(--hero-bildlage); background-repeat:no-repeat} /* Der Schleier. Links deckend genug fuer navyfarbenen Text auf einem beliebigen Bildpunkt, rechts durchsichtig — dort steht nur die weisse Musterzertifikat-Karte, und die ist selbst undurchsichtig. Die Prozentwerte sind Anteile des BANDES, nicht der Textspalte: Das Band laeuft randlos, der Inhalt liegt mittig in 1240px. Auf 1920px Breite beginnt der Rahmen bei 18 % und die Textspalte endet bei 55 %; auf 2560px endet sie bei 54 %. Deckend bis 58 % traegt beide Faelle. */ :is(.theme-label,.theme-assesi) [id="hero-bild"]::before{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(100deg, rgb(255 255 255 / calc(var(--hero-schleier) + .12)) 0%, rgb(255 255 255 / var(--hero-schleier)) 58%, rgb(255 255 255 / calc(var(--hero-schleier) * .42)) 78%, rgb(255 255 255 / calc(var(--hero-schleier) * .26)) 100%)} :is(.theme-label,.theme-assesi) [id="hero-bild"]>*{position:relative;z-index:1} /* Unter 900px faellt der Zweispalter in eine Spalte (siehe split__a). Der Text steht dann ueber der GANZEN Breite, also auch ueber dem Teil, der oben durchsichtig sein darf. Der Schleier wird deshalb gleichmaessig — und zwar auf genau dem Wert, der nachgerechnet und im Browser gemessen ist. Ein hoeherer Wert bringt keine Sicherheit dazu, sondern loescht nur das Bild aus: Bei .86 war auf schmalen Breiten nichts mehr davon zu sehen. */ @media(max-width:900px){ :is(.theme-label,.theme-assesi) [id="hero-bild"]::before{ background:rgb(255 255 255 / var(--hero-schleier))} :is(.theme-label,.theme-assesi) [id="hero-bild"]{background-position:72% 46%}} :is(.theme-label,.theme-assesi) .hero__eyebrow .elementor-heading-title{font:inherit;color:inherit;letter-spacing:inherit;margin:0} :is(.theme-label,.theme-assesi) .hero__h1 .elementor-heading-title{font-family:var(--font-display);font-weight:800; letter-spacing:-.03em;line-height:1.05;font-size:var(--fs-display);color:var(--text-strong);margin:0} .theme-label .hero__h1 em{font-style:normal;position:relative;z-index:0;color:var(--text-strong)} .theme-assesi .hero__h1 em{font-style:normal;color:var(--accent)} .theme-label .hero__h1 em::after{content:'';position:absolute;left:0;right:0;bottom:.08em;height:.32em; background:var(--ci-lime);opacity:.4;z-index:-1;border-radius:3px} :is(.theme-label,.theme-assesi) .hero__lede p{margin:0;font-size:1.12rem;line-height:1.75;color:var(--text-soft);max-width:48ch} /* Trust-Karten: dreispaltige Reihe unter dem Hero-Text */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.trust-card__label), :is(.theme-label,.theme-assesi) .e-con-inner:has(>.e-con>.e-con-inner>.trust-card__label){display:grid;grid-template-columns:repeat(3,1fr); gap:12px;margin-top:2.2rem} @media(max-width:620px){:is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.trust-card__label), :is(.theme-label,.theme-assesi) .e-con-inner:has(>.e-con>.e-con-inner>.trust-card__label){grid-template-columns:1fr}} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.trust-card__label){padding:1rem 1.1rem;box-shadow:none;background:#fff} :is(.theme-label,.theme-assesi) .trust-card__label[class*="--ico-"]{display:flex;align-items:center;gap:8px} :is(.theme-label,.theme-assesi) .trust-card__label[class*="--ico-"]::before{width:18px;height:18px;color:var(--accent-ink)} :is(.theme-label,.theme-assesi) .trust-card__label .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:.86rem;color:var(--text-strong);margin:0} :is(.theme-label,.theme-assesi) .trust-card__d p{margin:0;font-size:.76rem;line-height:1.5;color:var(--text-soft)} /* Showcase (Musterzertifikat) */ :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.showcase__seal){padding:2.4rem 2rem;text-align:center} /* Kopfzeile und Status tragen ihr Symbol neben dem Text, nicht darueber — der generische --ico-Grundzug rendert das ::before sonst als Block. */ :is(.theme-label,.theme-assesi) .showcase__kopf{display:flex;align-items:center;justify-content:center;gap:8px} :is(.theme-label,.theme-assesi) .showcase__kopf::before{width:16px;height:16px;color:var(--accent-ink)} :is(.theme-label,.theme-assesi) .showcase__kopf .elementor-heading-title{font-family:var(--font-body); font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--text-soft);margin:0} :is(.theme-label,.theme-assesi) .showcase__status{display:flex;align-items:flex-start;gap:8px} :is(.theme-label,.theme-assesi) .showcase__status::before{width:18px;height:18px;margin-top:1px; color:var(--accent-ink)} :is(.theme-label,.theme-assesi) .showcase__seal .elementor-heading-title{font-family:var(--font-display);font-size:.58rem; font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0} /* Die feste Größe steht in der hoch spezifischen Regel: Elementor gibt Widgets in Containern eine Breite, und auf gleicher Stufe gewinnt die spätere Datei — aus dem Kreis würde sonst eine Ellipse. */ :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.showcase__seal)>.elementor-widget.showcase__seal{width:128px;height:128px; border-radius:50%;margin:0 auto 1.7rem;background:var(--ci-navy);display:grid;place-items:center; position:static;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--cta-bg),0 14px 30px rgba(2,0,68,.20)} :is(.theme-label,.theme-assesi) .showcase__pname .elementor-heading-title{font-family:var(--font-display);font-weight:800; font-size:1.08rem;color:var(--text-strong);margin:0} :is(.theme-label,.theme-assesi) .showcase__issuer p{margin:0;font-size:.8rem;color:var(--text-soft)} :is(.theme-label,.theme-assesi) .showcase__issuer b{color:var(--accent-ink);font-weight:600} :is(.theme-label,.theme-assesi) .showcase__status p{margin:0;text-align:left;padding:12px 15px;border-radius:13px; background:var(--surface-soft);font-size:.84rem;line-height:1.55;color:var(--text-body)} :is(.theme-label,.theme-assesi) .showcase__foot p{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--text-faint)} /* ---- Sektion 2: Vorteile (num-card, 2x2) ---- */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.num-card__n){display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:760px){:is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.num-card__n){grid-template-columns:1fr}} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.num-card__n){padding:2rem 1.9rem} :is(.theme-label,.theme-assesi) .num-card__n{position:static} :is(.theme-label,.theme-assesi) .num-card__n[class*="--ico-"]::before{position:absolute;top:2rem;right:1.9rem; width:24px;height:24px;color:var(--accent-ink);opacity:.7} :is(.theme-label,.theme-assesi) .num-card__n .elementor-heading-title{font-family:var(--font-display);font-weight:800; font-size:1.6rem;line-height:1;color:var(--accent-ink);font-variant-numeric:tabular-nums;margin:0 0 .8rem} :is(.theme-label,.theme-assesi) .num-card__t .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:1.1rem;line-height:1.3;color:var(--text-strong);margin:0} :is(.theme-label,.theme-assesi) .num-card__d p{margin:0;font-size:.92rem;line-height:1.65;color:var(--text-soft)} /* ---- Sektion 3: Kriterien (principle-card + norm-box) ---- */ /* 300px statt 240px Mindestbreite: Bei 1240px Inhaltsbreite passten vorher vier Karten in die Reihe, die fuenfte stand allein darunter. Mit 300px sind es drei — fuenf Prinzipien stehen dann 3+2. */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.principle-card__n){display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.principle-card__n){padding:1.5rem 1.4rem} :is(.theme-label,.theme-assesi) .principle-card__n{position:static} :is(.theme-label,.theme-assesi) .principle-card__n[class*="--ico-"]::before{position:absolute;top:1.5rem;right:1.4rem; width:20px;height:20px;color:var(--accent-ink);opacity:.7} :is(.theme-label,.theme-assesi) .principle-card__n .elementor-heading-title{font-family:var(--font-display);font-weight:800; font-size:.78rem;letter-spacing:.1em;color:var(--accent-ink);margin:0 0 .5rem} :is(.theme-label,.theme-assesi) .principle-card__t .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:.98rem;line-height:1.35;color:var(--text-strong);margin:0} :is(.theme-label,.theme-assesi) .principle-card__d p{margin:0;font-size:.86rem;line-height:1.6;color:var(--text-soft)} :is(.theme-label,.theme-assesi) .e-con:has(>.norm-box__label){gap:0;background:var(--surface-soft); border-left:3px solid var(--cta-bg);border-radius:var(--r-card);padding:1.3rem 1.5rem;margin-top:0} :is(.theme-label,.theme-assesi) .norm-box__label .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 .5rem} :is(.theme-label,.theme-assesi) .norm-box__d p{margin:0;font-size:.9rem;line-height:1.65; color:var(--text-soft);max-width:var(--lesebreite)} /* ---- Sektion 5: Platzhalter-Versicherer + pilot-cta ---- */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.v-card__title){display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.v-card__title){padding:1.6rem 1.5rem} :is(.theme-label,.theme-assesi) .v-card__title{position:static} :is(.theme-label,.theme-assesi) .v-card__title[class*="--ico-"]::before{position:relative;width:26px;height:26px; color:var(--accent-ink);opacity:.6;margin-bottom:.9rem} :is(.theme-label,.theme-assesi) .v-card__title .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:1rem;color:var(--text-strong);margin:0} :is(.theme-label,.theme-assesi) .v-card__d p{margin:0;font-size:.84rem;line-height:1.55;color:var(--text-soft)} /* Der Kasten war gestrichelt und ohne Knopf — er las sich wie ein deaktivierter Platzhalter, nicht wie eine Einladung. Jetzt eine Flaeche mit Akzentkante und einem echten Knopf. */ /* flex-direction:column ist hier zwingend: Die Button-Reihen-Regel weiter oben (.e-con:has(>.elementor-widget-button)) setzt row fuer JEDEN Container mit direktem Button-Kind — auch fuer diese Karte. Beide Regeln stehen bei (0,3,0); diese hier gewinnt nur, weil sie spaeter kommt. Gemessen: vorher standen Titel, Text und Knopf in einer Zeile ohne Zwischenraum („Ihr Unternehmen hier?Versicherungsunternehmen…"). */ :is(.theme-label,.theme-assesi) .e-con:has(>.pilot-cta__t){flex-direction:column;align-items:flex-start;gap:0;background:var(--surface-soft); border:1px solid var(--border);border-left:4px solid var(--cta-bg); border-radius:var(--r-card);padding:1.8rem 1.7rem;margin-top:16px} :is(.theme-label,.theme-assesi) .pilot-cta__t .elementor-heading-title{font-family:var(--font-display);font-weight:800; font-size:1.05rem;color:var(--text-strong);margin:0 0 .5rem} :is(.theme-label,.theme-assesi) .pilot-cta__d p{margin:0;font-size:.9rem;line-height:1.65;color:var(--text-soft)} /* ---- Sektion 6: Kosten (kbox navy/lime) ---- */ :is(.theme-label,.theme-assesi) .e-con:has(>.kbox__label){gap:0;border-radius:var(--r-card);padding:1.8rem 1.7rem} :is(.theme-label,.theme-assesi) .e-con:has(>.kbox__label):not(:last-child){margin-bottom:16px} :is(.theme-label,.theme-assesi) .e-con:has(>.kbox--navy){background:var(--ci-navy)} :is(.theme-label,.theme-assesi) .e-con:has(>.kbox--lime){background:#fff;border:1px solid var(--border)} :is(.theme-label,.theme-assesi) .kbox__label .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 1rem} :is(.theme-label,.theme-assesi) .kbox--navy .elementor-heading-title{color:var(--cta-bg)} :is(.theme-label,.theme-assesi) .kbox--lime .elementor-heading-title{color:var(--accent-ink)} :is(.theme-label,.theme-assesi) .kbox__list ul{list-style:none;margin:0;padding:0} :is(.theme-label,.theme-assesi) .kbox__list li{display:flex;align-items:flex-start;gap:10px;padding:7px 0; font-size:.9rem;line-height:1.55} :is(.theme-label,.theme-assesi) .kbox__list li::before{content:'';flex:none;width:16px;height:16px;margin-top:3px; background-color:var(--cta-bg); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/contain no-repeat} :is(.theme-label,.theme-assesi) .e-con:has(>.kbox--navy) .kbox__list li{color:rgba(255,255,255,.86)} :is(.theme-label,.theme-assesi) .e-con:has(>.kbox--lime) .kbox__list li{color:var(--text-body)} :is(.theme-label,.theme-assesi) .kbox__note p{margin:1rem 0 0;padding-top:.9rem;font-size:.78rem;line-height:1.5} :is(.theme-label,.theme-assesi) .e-con:has(>.kbox--navy) .kbox__note p{border-top:1px solid var(--border-on-dark);color:rgba(255,255,255,.6)} :is(.theme-label,.theme-assesi) .e-con:has(>.kbox--lime) .kbox__note p{border-top:1px solid var(--border);color:var(--text-faint)} :is(.theme-label,.theme-assesi) .kosten__text p{margin:0 0 1rem;font-size:.98rem;line-height:1.75;color:var(--text-soft)} /* ---- Sektion 7: Timeline + Blog + Newsletter ---- */ :is(.theme-label,.theme-assesi) .tl-head .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 1rem} :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.tl-item__date){display:flex;flex-direction:column;gap:0; border-top:1px solid var(--border)} :is(.theme-label,.theme-assesi) .e-con:has(>.tl-item__date){gap:0;display:grid;grid-template-columns:36px 1fr; column-gap:16px;padding:18px 4px;border-bottom:1px solid var(--border)} :is(.theme-label,.theme-assesi) .tl-item__date{grid-column:2;position:static} :is(.theme-label,.theme-assesi) .tl-item__date::after{content:'';position:absolute;left:4px;top:20px;width:36px;height:36px; border-radius:50%;display:block} :is(.theme-label,.theme-assesi) .tl-done::after{background:var(--cta-bg)} :is(.theme-label,.theme-assesi) .tl-active::after{background:var(--ci-gold);box-shadow:0 0 0 5px rgba(245,197,3,.2)} :is(.theme-label,.theme-assesi) .tl-future::after{background:#fff;border:2px solid var(--border-strong)} :is(.theme-label,.theme-assesi) .tl-item__date .elementor-heading-title{font-family:var(--font-body); font-size:.68rem;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--accent-ink);margin:0 0 2px} :is(.theme-label,.theme-assesi) .tl-item__t{grid-column:2} :is(.theme-label,.theme-assesi) .tl-item__t .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:1rem;color:var(--text-strong);margin:0 0 .3rem} :is(.theme-label,.theme-assesi) .tl-item__d{grid-column:2} :is(.theme-label,.theme-assesi) .tl-item__d p{margin:0;font-size:.88rem;line-height:1.6;color:var(--text-soft)} :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.blog-card__tag){display:flex;flex-direction:column;gap:12px} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.blog-card__tag){padding:1.3rem 1.4rem} :is(.theme-label,.theme-assesi) .blog-card__tag .elementor-heading-title{display:inline-block;font-family:var(--font-display); font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cta-fg); background:var(--cta-bg);border-radius:var(--r-chip);padding:4px 10px;margin:0} :is(.theme-label,.theme-assesi) .blog-card__t .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:.98rem;line-height:1.4;color:var(--text-strong);margin:0} :is(.theme-label,.theme-assesi) .blog-card__meta p{margin:0;font-size:.76rem;color:var(--text-faint)} :is(.theme-label,.theme-assesi) .e-con:has(>.newsletter-cta__t){gap:0;background:var(--ci-navy);border-radius:var(--r-card); padding:1.7rem 1.6rem;margin-top:4px} :is(.theme-label,.theme-assesi) .newsletter-cta__t{position:static} :is(.theme-label,.theme-assesi) .newsletter-cta__t[class*="--ico-"]::before{position:relative;width:26px;height:26px; color:var(--cta-bg);margin-bottom:.8rem} :is(.theme-label,.theme-assesi) .newsletter-cta__t .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:1rem;line-height:1.4;color:#fff;margin:0 0 1rem} /* ---- Sektion 8: Akteure ---- */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.actor-card__mark){display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.actor-card__mark){padding:1.9rem 1.8rem} :is(.theme-label,.theme-assesi) .actor-card__mark{position:static} :is(.theme-label,.theme-assesi) .actor-card__mark[class*="--ico-"]::before{position:relative;width:26px;height:26px; color:var(--accent-ink);opacity:.7;margin-bottom:1rem} :is(.theme-label,.theme-assesi) .actor-card__mark .elementor-heading-title{display:inline-grid;place-items:center; min-width:52px;height:52px;padding:0 12px;border-radius:14px;background:var(--ci-navy);color:#fff; font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:.04em;margin:0 0 1rem} :is(.theme-label,.theme-assesi) .actor-card__mark[class*="--ico-"] .elementor-heading-title{display:none} :is(.theme-label,.theme-assesi) .actor-card__name .elementor-heading-title{font-family:var(--font-display);font-weight:800; font-size:1.05rem;color:var(--text-strong);margin:0 0 .2rem} :is(.theme-label,.theme-assesi) .actor-card__role .elementor-heading-title{font-family:var(--font-body); font-size:.72rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--accent-ink);margin:0 0 .7rem} :is(.theme-label,.theme-assesi) .actor-card__d p{margin:0;font-size:.9rem;line-height:1.65;color:var(--text-soft)} /* ---- Sektion 9: Association-Teaser ---- */ :is(.theme-label,.theme-assesi) .assoc__text p{margin:0 0 1rem;font-size:.98rem;line-height:1.75;color:var(--text-soft)} /* flex-direction:column aus demselben Grund wie bei pilot-cta: Die Button-Reihen-Regel (.e-con:has(>.elementor-widget-button)) setzt row fuer JEDEN Container mit direktem Button-Kind — also auch fuer diesen Kasten. Ohne Gegenregel stehen Name, Text und Knopf nebeneinander, und der Kasten laeuft mit Leerflaeche voll (Kundenbefund 07.08.2026). Beide Regeln stehen bei (0,3,0); diese gewinnt nur, weil sie spaeter kommt. */ :is(.theme-label,.theme-assesi) .e-con:has(>.assoc-visual__name){flex-direction:column;align-items:flex-start; gap:0;background:var(--ci-navy);border-radius:var(--r-card); padding:1.9rem 1.8rem;position:relative;overflow:hidden} :is(.theme-label,.theme-assesi) .e-con:has(>.assoc-visual__name)>.elementor-widget{width:100%} :is(.theme-label,.theme-assesi) .e-con:has(>.assoc-visual__name)>.elementor-widget-button{width:auto} :is(.theme-label,.theme-assesi) .e-con:has(>.assoc-visual__name)::before{content:'';position:absolute;top:-40%;right:-25%; width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(48,85,160,.55),transparent 70%)} :is(.theme-label,.theme-assesi) .assoc-visual__name .elementor-heading-title{font-family:var(--font-display);font-weight:800; font-size:1.1rem;line-height:1.35;color:#fff;margin:0 0 .9rem;position:relative} :is(.theme-label,.theme-assesi) .assoc-visual__d p{margin:0 0 1.2rem;font-size:.9rem;line-height:1.7; color:rgba(255,255,255,.78);position:relative} /* ---- Sektion 10: DIN-Norm ---- */ :is(.theme-label,.theme-assesi) .din__text{max-width:var(--lesebreite)} :is(.theme-label,.theme-assesi) .din__text p{margin:0 0 1rem;font-size:.98rem;line-height:1.75;color:var(--text-soft)} :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.compare-box__t){display:grid;grid-template-columns:1fr 1fr;gap:14px; margin-top:1.4rem} @media(max-width:760px){:is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.compare-box__t){grid-template-columns:1fr}} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.compare-box__t){padding:1.7rem 1.6rem;background:#fff;box-shadow:none} :is(.theme-label,.theme-assesi) .compare-box__t .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:1rem;line-height:1.35;color:var(--text-strong);margin:0} :is(.theme-label,.theme-assesi) .compare-box__d p{margin:0;font-size:.88rem;line-height:1.65;color:var(--text-soft)} /* ---- Baender ---- */ :is(.theme-label,.theme-assesi) .e-con.band-warm,:is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.e-con>.band-warm__mark){background:var(--surface-soft)} /* ---- Sektion 11: Abschluss-CTA (Navy-Band) ---- */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.schluss-cta__t){background:var(--ci-navy);border-radius:var(--r-card); padding:clamp(2.4rem,5vw,3.4rem) clamp(1.6rem,4vw,3rem)} :is(.theme-label,.theme-assesi) .e-con:has(>.schluss-cta__t){gap:0;max-width:56ch;position:relative;z-index:1} /* Die rechte Haelfte blieb leer, weil die Textspalte auf 56ch begrenzt ist. Ein grosses, leises Siegel fuellt sie — rein dekorativ, deshalb als ::after und nicht als Widget. Unter 900px faellt es weg, dort waere es nur Gedraenge. Im Kreis liegt cta-upload.svg als PLATZHALTER (Kundenwunsch 07.08.2026): ein Bildmotiv soll hier hin. Sobald eines da ist, ersetzt es die Datei unter assets/img/ — der Pfad bleibt derselbe. */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.schluss-cta__t)::after{content:'';position:absolute; right:4%;top:50%;transform:translateY(-50%);width:min(260px,30%);aspect-ratio:1; border-radius:999px;pointer-events:none; background:url("../img/cta-upload.svg") center/50% no-repeat; border:2px solid color-mix(in srgb,var(--cta-bg) 55%,transparent); box-shadow:inset 0 0 0 14px rgba(255,255,255,.04), inset 0 0 0 16px color-mix(in srgb,var(--cta-bg) 28%,transparent)} @media(max-width:900px){:is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.schluss-cta__t)::after{display:none}} :is(.theme-label,.theme-assesi) .e-con:has(>.schluss-cta__t) .elementor-widget:not(:last-child){margin-block-end:0} :is(.theme-label,.theme-assesi) .schluss-cta__t .elementor-heading-title{font-family:var(--font-display);font-weight:800; letter-spacing:-.025em;line-height:1.15;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.1rem); color:#fff;margin:0 0 .9rem} :is(.theme-label,.theme-assesi) .schluss-cta__t em{font-style:normal;color:var(--cta-bg)} :is(.theme-label,.theme-assesi) .schluss-cta__d p{margin:0;font-size:1.02rem;line-height:1.75;color:rgba(255,255,255,.78)} /* ============================================================ UNTERSEITEN — /kriterien, /kosten, /din-norm, /kontakt Derselbe Klassen-Vertrag wie auf der Startseite: Marker am ersten Widget, Container ueber :has(>.marker). Die Unterseiten setzen ueberwiegend die bestehenden Komponenten wieder ein; neu sind nur Seitenkopf, Hinweisbox und die beiden Kontakt-Bausteine. ============================================================ */ /* Seitenkopf: wie sec-title, aber als H1 und eine Stufe groesser */ /* KEIN hyphens:auto am Rechner: Chrome trennt sonst, sobald das letzte Wort nicht mehr in die Zeile passt — „Herunterla-den" stand so im Kundenabzug vom 07.08.2026. overflow-wrap:break-word bleibt als Netz fuer Woerter, die laenger sind als die ganze Zeile. Auf schmalen Breiten kommt hyphens:auto zurueck (Media-Regel unten): „Kompositversicherungen" lief bei 390px als einziger Ueberlauf im 59-Seiten-Abzug ueber den Rahmen (427 > 390). */ :is(.theme-label,.theme-assesi) .page-title .elementor-heading-title{font-family:var(--font-display);font-weight:800; overflow-wrap:break-word; letter-spacing:-.03em;line-height:1.08;font-size:clamp(2.1rem,1.5rem + 2.4vw,3rem); color:var(--text-strong);margin:0} @media(max-width:600px){ :is(.theme-label,.theme-assesi) :is(.page-title,.sec-title) .elementor-heading-title, .sec-title{hyphens:auto} } .theme-label .page-title em{font-style:normal;position:relative;z-index:0;color:var(--text-strong)} .theme-assesi .page-title em{font-style:normal;color:var(--accent)} .theme-label .page-title em::after{content:'';position:absolute;left:0;right:0;bottom:.07em;height:.3em; background:var(--ci-lime);opacity:.4;z-index:-1;border-radius:3px} /* Der Vorspann ist Fliesstext und laeuft auf Lesebreite — auch dann, wenn die Ueberschrift darueber die groessere --kopfbreite ausnutzen darf. */ :is(.theme-label,.theme-assesi) .page-lede, :is(.theme-label,.theme-assesi) .sec-lede{max-width:var(--lesebreite)} :is(.theme-label,.theme-assesi) .page-lede p{margin:0 0 .9rem;font-size:1.08rem;line-height:1.75;color:var(--text-soft)} :is(.theme-label,.theme-assesi) .page-lede p:last-child{margin-bottom:0} /* Hinweisbox: markiert den Entwurfsstand. Gold nur als Flaeche und Rand, nie als Textfarbe — der Text steht in Navy (Kontrastregel CI). */ :is(.theme-label,.theme-assesi) .e-con:has(>.hinweis__label){gap:0;background:#FDF7DE; border:1px solid rgba(245,197,3,.55);border-left:4px solid var(--ci-gold); border-radius:var(--r-card);padding:1.1rem 1.3rem} :is(.theme-label,.theme-assesi) .e-con:has(>.hinweis__label) .elementor-widget:not(:last-child){margin-block-end:0} :is(.theme-label,.theme-assesi) .hinweis__label .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ci-navy);margin:0 0 .45rem} /* Der Kasten darf ueber die volle Breite laufen — er ist ein Band, das auffallen soll. Sein TEXT nicht: gemessen bis 139 Zeichen je Zeile. Hier steht `em` statt --lesebreite, und das ist kein Schoenheitsfehler. --lesebreite ist ein rem-Mass, also fest; dieser Text setzt aber kleiner als der Fliesstext. In dieselbe Breite passen dann mehr Zeichen — mit --lesebreite waren es noch 92 je Zeile. `em` bezieht sich auf die Schriftgroesse des Absatzes selbst und haelt die ZEICHENZAHL konstant, statt die Breite. Fuer Kleingedrucktes ist das die richtige Einheit. */ :is(.theme-label,.theme-assesi) .hinweis__d p{margin:0 0 .45rem;font-size:.86rem;line-height:1.6; color:var(--text-body);max-width:34em} :is(.theme-label,.theme-assesi) .hinweis__d p:last-child{margin-bottom:0} /* Fliesstext der Unterseiten */ /* Zeilenlaenge begrenzen: ueber die volle Rahmenbreite kaeme der Fliesstext auf rund 150 Zeichen je Zeile und waere kaum noch lesbar. */ :is(.theme-label,.theme-assesi) .seite__text{max-width:var(--lesebreite)} :is(.theme-label,.theme-assesi) .seite__text p{margin:0 0 1rem;font-size:.98rem;line-height:1.75;color:var(--text-soft)} :is(.theme-label,.theme-assesi) .seite__text p:last-child{margin-bottom:0} /* Kontakt: Kanal-Karten */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.kanal-card__t){display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px} :is(.theme-label,.theme-assesi) .e-con:has(>.kanal-card__t){position:relative;gap:0;background:#fff; border:var(--card-border);border-radius:var(--r-card);box-shadow:var(--card-shadow); padding:1.8rem 1.7rem} :is(.theme-label,.theme-assesi) .e-con:has(>.kanal-card__t) .elementor-widget:not(:last-child){margin-block-end:.55rem} :is(.theme-label,.theme-assesi) .kanal-card__t{position:static} :is(.theme-label,.theme-assesi) .kanal-card__t[class*="--ico-"]::before{position:relative;width:26px;height:26px; color:var(--accent-ink);opacity:.7;margin-bottom:.9rem} :is(.theme-label,.theme-assesi) .kanal-card__t .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:1.02rem;line-height:1.35;color:var(--text-strong);margin:0} :is(.theme-label,.theme-assesi) .kanal-card__d p{margin:0 0 .5rem;font-size:.9rem;line-height:1.65;color:var(--text-soft)} :is(.theme-label,.theme-assesi) .kanal-card__d p:last-child{margin-bottom:0} /* Kontakt: Datenblock (Anschrift, Erreichbarkeit) */ :is(.theme-label,.theme-assesi) .e-con:has(>.daten__label){gap:0;background:#fff; border:var(--card-border);border-radius:var(--r-card);box-shadow:var(--card-shadow);padding:1.8rem 1.7rem} :is(.theme-label,.theme-assesi) .e-con:has(>.daten__label) .elementor-widget:not(:last-child){margin-block-end:0} :is(.theme-label,.theme-assesi) .daten__label .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 1rem} :is(.theme-label,.theme-assesi) .daten__d p{margin:0 0 .7rem;font-size:.94rem;line-height:1.7; color:var(--text-body);max-width:var(--lesebreite)} :is(.theme-label,.theme-assesi) .daten__d p:last-child{margin-bottom:0} :is(.theme-label,.theme-assesi) .daten__d a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px} /* ============================================================ KOPF- UND FUSSZEILE — inhaltsbasiert Die Blockregeln weiter oben (.nav, .footer, .brand …) gehoeren zum One-Pager-Entwurf und haengen an Container-Klassen. Im Theme-Builder gilt derselbe Befund wie auf den Seiten: Container-Klassen sind nicht verlaesslich, Widget-Klassen schon. Deshalb hier dieselbe Bauweise — Marker am ersten Widget, Container ueber :has(>.marker). Kopf: Band > Reihe > Marke > .kz__mark Fuss: Band > Raster > Spalte > .fz__name / .fz__col-h ============================================================ */ /* ---- Kopfzeile ---- */ /* BOXED-CONTAINER: DIE EBENE, DIE ALLES KIPPEN LIESS --------------------------------------------------- Ein Container mit content_width "boxed" traegt ein zusaetzliches `.e-con-inner` zwischen sich und seinem Inhalt. Auf Seiten kommt das nicht vor (der Generator setzt ueberall "full"), im THEME BUILDER schon — der Pilot-Abzug hat es festgehalten: von 17 Containern trugen genau die drei aus Kopf- und Fusszeile ein inneres Element. Diese Ebene bricht jede Regel, die mit `>` auf einen Marker zielt: Aus `Reihe > Marke > .kz__mark` wird `Reihe > .e-con-inner > Marke > .e-con-inner > .kz__mark`. Die Widget-Regeln greifen weiter — deshalb sah der Kopf auf assesi.eu nach richtiger Marke und richtigem Knopf aus, ohne jedes Layout: keine Reihe, kein Raster, kein 1240er-Rahmen, das Menue untereinander. Nachgestellt in der Vorschau: 348px statt 69px Kopfhoehe. Zwei Konsequenzen, beide unten angewandt: 1. Baender haengen an ihrer `_element_id` (`kopf`, `fuss`) statt an einer Kette aus drei Ebenen. IDs ueberleben den Import nachweislich. 2. Jede Container-Regel nennt `:is(.e-con,.e-con-inner)` als Traeger und, wo eine Ebene dazwischenliegt, beide Formen des Kindes. Getroffen wird dann immer das Element, das den Inhalt TATSAECHLICH haelt — ob boxed oder nicht. `:is()` zaehlt sein spezifischstes Argument, die Spezifitaet bleibt also dieselbe wie bei `.e-con` allein. `width:100%` ist nicht redundant — dieselbe Falle wie beim Sektionsrahmen. Das Band ist Flex-Kind seiner Umgebung; ohne eigene Breite schrumpft es auf seinen Inhalt. Auf assesi.eu endete die Navy-Flaeche dadurch mitten auf der Seite, waehrend die Schaltflaeche rechts daneben ausserhalb davon stand. */ /* Zwei unabhaengige Wege zum Band, weil keiner allein alles abdeckt: die technische ID (ueberlebt den Import, haengt an keiner Tiefe) und „der aeusserste Container, der die Marke enthaelt" — `:not(.e-con .e-con)` schliesst Reihe und Markenblock aus, die sie ebenfalls enthalten. Dasselbe `:not()` haengt auch an der ID: Auf assesi-label.eu steckt `#kopf` in einem aeusseren Container, weil darueber noch das Konsultationsband liegt. Ohne die Einschraenkung traegt der Kopf dort zwei Baender uebereinander — sichtbar als doppelte Trennlinie. */ :is(.theme-label,.theme-assesi) [id="kopf"]:not(.e-con .e-con), :is(.theme-label,.theme-assesi) .e-con:has(.kz__mark):not(.e-con .e-con), :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.e-con>.kz__mark):not(.e-con .e-con){position:sticky;top:0;z-index:50; width:100%;background:var(--nav-bg);color:var(--nav-fg); border-bottom:1px solid color-mix(in srgb,var(--nav-fg) 16%,transparent)} /* flex-wrap:nowrap ist nicht kosmetisch. `.e-con` bringt von Elementor `flex-wrap:wrap` mit; sobald Marke, Menue und die beiden Schaltflaechen zusammen breiter werden als die Zeile, bricht der Kopf in zwei Zeilen um — auf assesi.eu war genau das zu sehen. Statt umzubrechen soll die Zeile eng werden; die Abstufungen dafuer stehen weiter unten. */ :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.e-con>.kz__mark), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.e-con>.e-con-inner>.kz__mark){width:100%;max-width:1240px;margin-left:auto; margin-right:auto;padding:0 var(--section-x);min-height:68px; display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:14px} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.e-con>.kz__mark)>.elementor-widget, :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.e-con>.e-con-inner>.kz__mark)>.elementor-widget{width:auto;margin-block-end:0} /* Marke: Zeichen, Wortmarke, Zusatz */ /* gap in EINER Angabe: ein nachfolgendes `gap:0` wuerde das column-gap wieder auf null setzen — Zeichen und Wortmarke klebten aneinander. */ :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.kz__mark){display:grid; grid-template-columns:auto auto;grid-template-rows:auto auto; align-items:center;gap:0 11px;margin-right:auto;flex:none} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.kz__mark)>.elementor-widget{width:auto;margin-block-end:0} /* Logoplatz. Ohne gesetztes Bild rendert Elementor im Widget nichts — dann nimmt es auch keine Rasterzelle ein und die Textmarke traegt den Kopf. Mit Bild belegt es beide Zeilen, und Zeichen, Wortmarke und Zusatz treten zurueck: Die Marke soll nicht zweimal im Kopf stehen. */ :is(.theme-label,.theme-assesi) .kz__logo:not(:has(img)){display:none} :is(.theme-label,.theme-assesi) .kz__logo{grid-area:1 / 1 / 3 / 3;display:flex;align-items:center} :is(.theme-label,.theme-assesi) .kz__logo img{display:block;height:38px;width:auto;max-width:220px; object-fit:contain} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.kz__logo img)>:is(.kz__mark,.kz__name,.kz__tag){display:none} /* Zweiter Weg zum Logo: Design → Customizer → Website-Informationen → Logo. Den setzt functions.php als eigene Regel im
um — dort ist die Bildadresse bekannt und das Seitenverhaeltnis ausgerechnet. Hier steht deshalb nur der Zustand OHNE Logo. */ :is(.theme-label,.theme-assesi) .kz__mark{grid-row:1 / span 2} :is(.theme-label,.theme-assesi) .kz__mark .elementor-heading-title{display:grid;place-items:center; width:34px;height:34px;border-radius:7px; background:linear-gradient(135deg,var(--ci-blue),var(--ci-navy)); border:1px solid rgba(255,255,255,.25); font-family:var(--font-display);font-weight:800;font-size:.95rem;color:#fff;margin:0} :is(.theme-label,.theme-assesi) .kz__name{grid-column:2} :is(.theme-label,.theme-assesi) .kz__name .elementor-heading-title{font-family:var(--font-display);font-weight:800; font-size:1.12rem;letter-spacing:.02em;line-height:1.05;color:var(--nav-fg);margin:0} :is(.theme-label,.theme-assesi) .kz__tag{grid-column:2} :is(.theme-label,.theme-assesi) .kz__tag .elementor-heading-title{font-family:var(--font-body);font-size:.56rem; font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:color-mix(in srgb,var(--nav-fg) 60%,transparent);margin:4px 0 0} /* Navigation. `.kz__nav ul` war zu weit gefasst. Elementor Pro rendert im Menue-Widget MEHRERE Listen: das Hauptmenue und daneben das Klappmenue fuer schmale Breiten. Beide waagerecht zu setzen ist falsch — das Klappmenue soll untereinander stehen und auf breiten Fenstern gar nicht erscheinen. Deshalb liegt die waagerechte Reihe jetzt am Hauptmenue, und das Klappmenue behaelt seine eigene Darstellung. `min-width:0` daneben: Die Kopfzeile laeuft mit flex-wrap:nowrap. Ohne diese Angabe kann ein Flex-Kind nicht unter seine Inhaltsbreite schrumpfen und schiebt stattdessen alles Nachfolgende aus der Zeile heraus, statt selbst enger zu werden. */ :is(.theme-label,.theme-assesi) .kz__nav{flex:0 1 auto;min-width:0} :is(.theme-label,.theme-assesi) .kz__nav .elementor-nav-menu--main>ul, :is(.theme-label,.theme-assesi) .kz__nav .elementor-nav-menu--main ul.elementor-nav-menu{ list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0} /* Fallback fuer den Fall, dass die Hauptmenue-Huelle fehlt: dann greift die Reihe an der ersten Liste des Widgets, aber nur an dieser. */ :is(.theme-label,.theme-assesi) .kz__nav>ul:first-of-type{ list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0} :is(.theme-label,.theme-assesi) .kz__nav li{margin:0;list-style:none} :is(.theme-label,.theme-assesi) .kz__nav a{font-family:var(--font-body);font-size:.9rem;font-weight:500; color:color-mix(in srgb,var(--nav-fg) 82%,transparent);transition:color var(--dur-base)} :is(.theme-label,.theme-assesi) .kz__nav a:hover,:is(.theme-label,.theme-assesi) .kz__nav a[aria-current]{color:var(--nav-fg)} /* Die beiden Kopf-Buttons sind kleiner als die der Seiten. */ :is(.theme-label,.theme-assesi) .kz__quer .elementor-button, :is(.theme-label,.theme-assesi) .kz__cta .elementor-button{font-family:var(--font-body);font-size:.82rem; font-weight:700;padding:9px 16px;line-height:1.2} :is(.theme-label,.theme-assesi) .kz__quer .elementor-button{font-weight:600} :is(.theme-label,.theme-assesi) .kz__quer .elementor-button:hover{background:color-mix(in srgb,var(--accent-2) 12%,transparent)} /* Zwischenstufe, damit `nowrap` oben nicht zum Ueberlauf wird: Bevor etwas verschwindet, ruecken erst die Menuepunkte zusammen. */ @media(max-width:1180px){ :is(.theme-label,.theme-assesi) .kz__nav ul{gap:18px} :is(.theme-label,.theme-assesi) .kz__nav a{font-size:.85rem} } @media(max-width:900px){ /* Auf schmalen Breiten traegt Elementors Burger die Navigation; der Querverweis wandert dorthin mit und wird hier ausgeblendet. */ :is(.theme-label,.theme-assesi) .kz__quer{display:none} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.e-con>.kz__mark), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.e-con>.e-con-inner>.kz__mark){gap:10px} } @media(max-width:560px){ /* Nicht mehr die CTA ausblenden — sie ist die primaere Handlung der Seite und war mobil ersatzlos weg (der Burger traegt nur das WordPress-Menue). Stattdessen treten Wortmarke und Zusatz zurueck; das Zeichen (bzw. Logo) genuegt als Marke. Gemessen: Zeichen 34px + CTA + Burger passen in 390px. */ :is(.theme-label,.theme-assesi) :is(.kz__name,.kz__tag){display:none} :is(.theme-label,.theme-assesi) .kz__cta .elementor-button{font-size:.76rem;padding:8px 12px} } /* ---- Fusszeile ---- */ /* width:100% aus demselben Grund wie beim Kopfband — sonst schrumpft die Navy-Flaeche auf den Inhalt statt ueber die volle Breite zu laufen. */ :is(.theme-label,.theme-assesi) [id="fuss"]:not(.e-con .e-con), :is(.theme-label,.theme-assesi) .e-con:has(.fz__name):not(.e-con .e-con), :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.e-con>.fz__name):not(.e-con .e-con){width:100%; background:var(--ci-navy);color:rgba(255,255,255,.75)} /* Das Raster zaehlt seine Spalten NICHT ab. Vorher standen hier vier feste Spalten — das passte fuer assesi-label.eu (Marke + drei Linkspalten), aber assesi.eu hat vier Linkspalten, und die fuenfte Kachel „Kontakt" fiel in eine zweite Zeile unter die Marke. Zwischen beiden Zeilen klaffte dann eine leere Flaeche von der Hoehe der laengsten Spalte. Jetzt ist nur die Markenspalte gesetzt; jede weitere Spalte entsteht als implizite Spalte gleicher Breite. Drei, vier oder fuenf Linkspalten bleiben damit immer in einer Zeile. */ :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.e-con>.fz__name), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.e-con>.e-con-inner>.fz__name){width:100%;max-width:1240px; margin-left:auto;margin-right:auto; padding:clamp(3rem,6vw,4.5rem) var(--section-x) 2.5rem; display:grid;grid-template-columns:minmax(0,1.4fr); grid-auto-flow:column;grid-auto-columns:minmax(0,1fr); gap:clamp(1.5rem,2.6vw,2.5rem)} @media(max-width:900px){ :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.e-con>.fz__name), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.e-con>.e-con-inner>.fz__name){ grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;row-gap:2.5rem}} @media(max-width:560px){ :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.e-con>.fz__name), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.e-con>.e-con-inner>.fz__name){ grid-template-columns:1fr}} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.fz__name), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.fz__col-h){gap:0;align-content:start} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.fz__name) .elementor-widget:not(:last-child), :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.fz__col-h) .elementor-widget:not(:last-child){margin-block-end:0} :is(.theme-label,.theme-assesi) .fz__name .elementor-heading-title{font-family:var(--font-display);font-weight:800; font-size:1.12rem;letter-spacing:.02em;color:#fff;margin:0} :is(.theme-label,.theme-assesi) .fz__tag p{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.6); margin:1rem 0 0;max-width:34ch} :is(.theme-label,.theme-assesi) .fz__cross{width:auto} :is(.theme-label,.theme-assesi) .fz__cross .elementor-button{margin-top:1.3rem;font-family:var(--font-body); font-size:.82rem;font-weight:600;padding:8px 14px} :is(.theme-label,.theme-assesi) .fz__cross .elementor-button:hover{background:rgba(180,205,0,.14)} :is(.theme-label,.theme-assesi) .fz__col-h .elementor-heading-title{font-family:var(--font-display);font-size:.72rem; font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.5);margin:0 0 1.1rem} :is(.theme-label,.theme-assesi) .fz__links a{display:block;font-size:.92rem;color:rgba(255,255,255,.8); padding:6px 0;transition:color var(--dur-base)} :is(.theme-label,.theme-assesi) .fz__links a:hover{color:#fff} :is(.theme-label,.theme-assesi) .fz__note p{margin:.9rem 0 0;font-size:.76rem;line-height:1.5; color:rgba(255,255,255,.5)} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.fz__bar-l){width:100%;max-width:1240px;margin-left:auto; margin-right:auto;padding:1.5rem var(--section-x); border-top:1px solid var(--border-on-dark); display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between; align-items:center;gap:14px} :is(.theme-label,.theme-assesi) :is(.e-con,.e-con-inner):has(>.fz__bar-l)>.elementor-widget{width:auto;margin-block-end:0} :is(.theme-label,.theme-assesi) .fz__bar-l p{margin:0;font-size:.8rem;color:rgba(255,255,255,.55)} /* Der Flex-Kontext muss dort sitzen, wo die Links tatsaechlich stehen. Das ist je nach Einstellung eine andere Ebene: Mit Elementors optimierter DOM-Ausgabe (in der Zielinstallation aktiv, belegt im DOM-Abzug vom 4.8.2026) entfaellt .elementor-widget-container, und die Links haengen direkt am .elementor-element. Deshalb beide. */ :is(.theme-label,.theme-assesi) .fz__bar-r, :is(.theme-label,.theme-assesi) .fz__bar-r > .elementor-widget-container{display:flex;flex-wrap:wrap;gap:18px} :is(.theme-label,.theme-assesi) .fz__bar-r a{font-size:.8rem;color:rgba(255,255,255,.7)} :is(.theme-label,.theme-assesi) .fz__bar-r a:hover{color:#fff} /* ============================================================ KOMPONENTEN VON assesi.eu Derselbe Klassen-Vertrag wie beim Siegel-Auftritt. Die meisten Bausteine sind geteilt — kanal-card traegt hier die Vorteils- und Vision-Kacheln, actor-card die Traeger, blog-card die Beitraege. Neu sind nur die sechs Komponenten, fuer die es dort keine Entsprechung gab. ============================================================ */ /* ---- Stat-Kachel (Was ist ASSESI) ---- */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.stat-card__n){display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px} :is(.theme-label,.theme-assesi) .e-con:has(>.stat-card__n){gap:0;background:#fff;border:var(--card-border); border-radius:var(--r-card);box-shadow:var(--card-shadow);padding:1.6rem 1.5rem} :is(.theme-label,.theme-assesi) .e-con:has(>.stat-card__n) .elementor-widget:not(:last-child){margin-block-end:.5rem} :is(.theme-label,.theme-assesi) .stat-card__n .elementor-heading-title{font-family:var(--font-display);font-weight:800; font-size:1.45rem;line-height:1.1;color:var(--accent-ink);margin:0} :is(.theme-label,.theme-assesi) .stat-card__d p{margin:0;font-size:.86rem;line-height:1.6;color:var(--text-soft)} /* ---- Veranstaltungszeile ---- */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.event-row__meta){display:flex;flex-direction:column;gap:0; border-top:1px solid var(--border)} :is(.theme-label,.theme-assesi) .e-con:has(>.event-row__meta){gap:0;padding:18px 4px;border-bottom:1px solid var(--border)} :is(.theme-label,.theme-assesi) .e-con:has(>.event-row__meta) .elementor-widget:not(:last-child){margin-block-end:0} :is(.theme-label,.theme-assesi) .event-row__meta .elementor-heading-title{font-family:var(--font-body);font-size:.68rem; font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 5px} :is(.theme-label,.theme-assesi) .event-row__t .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:1rem;line-height:1.35;color:var(--text-strong);margin:0 0 .35rem} :is(.theme-label,.theme-assesi) .event-row__ort{position:static} /* Ohne das steht das Symbol in einer eigenen Zeile: das ::before haengt am .elementor-element, der Absatz eine Ebene tiefer — und beide Ebenen sind Bloecke. Welche es gibt, haengt an Elementors optimierter DOM-Ausgabe; in der Zielinstallation entfaellt der Widget-Container (DOM-Abzug vom 4.8.2026). Deshalb beide. */ :is(.theme-label,.theme-assesi) .event-row__ort > .elementor-widget-container{display:inline} :is(.theme-label,.theme-assesi) .event-row__ort > p{display:inline} :is(.theme-label,.theme-assesi) .event-row__ort[class*="--ico-"]::before{display:inline-block;vertical-align:-3px; width:15px;height:15px;margin-right:6px;color:var(--accent-ink);opacity:.7} :is(.theme-label,.theme-assesi) .event-row__ort p{display:inline;margin:0;font-size:.84rem;color:var(--text-soft)} :is(.theme-label,.theme-assesi) .event-row__ort a{color:var(--accent-ink);font-weight:600; text-decoration:underline;text-underline-offset:3px} /* ---- Logo-Platzhalter (Unterstuetzer) ---- */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.logo-slot__t){display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px} :is(.theme-label,.theme-assesi) .e-con:has(>.logo-slot__t){gap:0;display:grid;place-items:center;min-height:104px; padding:1.2rem 1rem;border:2px dashed rgba(2,0,68,.16);border-radius:var(--r-card); background:transparent;text-align:center} :is(.theme-label,.theme-assesi) .e-con:has(>.logo-slot__t) .elementor-widget{margin-block-end:0;width:auto} :is(.theme-label,.theme-assesi) .logo-slot__t{position:static;display:grid;justify-items:center} :is(.theme-label,.theme-assesi) .logo-slot__t[class*="--ico-"]::before{width:24px;height:24px; color:var(--text-faint);margin-bottom:.5rem} :is(.theme-label,.theme-assesi) .logo-slot__t .elementor-heading-title{font-family:var(--font-body);font-size:.78rem; font-weight:600;color:var(--text-faint);margin:0} /* ---- Traegerzeile (Supported by) ---- */ :is(.theme-label,.theme-assesi) .traeger p{margin:1.8rem 0 0;font-size:.72rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--text-faint)} /* ---- Badge (Verweis auf die Schwesterseite) ---- */ :is(.theme-label,.theme-assesi) .badge__t{position:static;width:auto} :is(.theme-label,.theme-assesi) .badge__t .elementor-heading-title{display:inline-flex;align-items:center;gap:8px; font-family:var(--font-body);font-size:.8rem;font-weight:700;color:var(--ci-navy); background:var(--cta-bg);border-radius:var(--r-chip);padding:7px 14px;margin:1.2rem 0 0} :is(.theme-label,.theme-assesi) .badge__t[class*="--ico-"]::before{position:absolute;width:0;height:0;overflow:hidden} /* ---- Fragen und Antworten (natives accordion-Widget) ---- */ /* 60rem (960px) Deckel: Ueber die volle Rahmenbreite (1240px) wirkten die Klappzeilen wie Balken, und der Text darin stand gestaucht am linken Rand — Kundenbefund vom 07.08.2026. */ :is(.theme-label,.theme-assesi) .faq{width:100%;max-width:60rem} :is(.theme-label,.theme-assesi) .faq .elementor-accordion-item{border:var(--card-border);border-radius:var(--r-card); background:#fff;box-shadow:var(--card-shadow);margin-bottom:12px;overflow:hidden} /* Auf/Zu-Signal per CSS: Icon-Keys sind im Widget verboten (Handoff §6.7), ein Akkordeon ohne Indikator ist aber als Bedienelement nicht erkennbar — gerade hier, wo die Vertiefung bewusst hinter den Klappen liegt. */ :is(.theme-label,.theme-assesi) .faq .elementor-tab-title{position:relative; font-family:var(--font-display);font-weight:700; font-size:1rem;line-height:1.4;padding:1.15rem 3rem 1.15rem 1.7rem;cursor:pointer} :is(.theme-label,.theme-assesi) .faq .elementor-tab-title a{color:var(--text-strong)} :is(.theme-label,.theme-assesi) .faq .elementor-tab-title::after{content:'+';position:absolute; right:1.4rem;top:50%;transform:translateY(-50%);font-family:var(--font-body);font-weight:400; font-size:1.35rem;line-height:1;color:var(--accent-ink)} :is(.theme-label,.theme-assesi) .faq .elementor-tab-title.elementor-active::after{content:'−'} /* Lesebreite auch hier. Ohne sie lief die Antwort ueber die volle Rahmenbreite — im Abzug bis 156 Zeichen je Zeile, der hoechste Wert im ganzen Bestand. Ein Akkordeon verleitet dazu, das zu uebersehen: Man sieht die Zeilenlaenge erst nach dem Aufklappen. */ :is(.theme-label,.theme-assesi) .faq .elementor-tab-content{padding:0 1.7rem 1.4rem;font-size:.92rem; line-height:1.7;color:var(--text-soft);max-width:var(--lesebreite)} :is(.theme-label,.theme-assesi) .faq .elementor-tab-content p{margin:0 0 .7rem} :is(.theme-label,.theme-assesi) .faq .elementor-tab-content p:last-child{margin-bottom:0} /* ---- Pflichtseiten: durchnummerierter Fliesstext ---- */ :is(.theme-label,.theme-assesi) .recht__h .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:1.05rem;line-height:1.35;color:var(--text-strong);margin:2.4rem 0 .7rem} :is(.theme-label,.theme-assesi) .recht__t p{margin:0 0 .8rem;font-size:.94rem;line-height:1.75;color:var(--text-soft)} :is(.theme-label,.theme-assesi) .recht__t p:last-child{margin-bottom:0} :is(.theme-label,.theme-assesi) .recht__t a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px} :is(.theme-label,.theme-assesi) .recht__t code{font-size:.86em;background:var(--surface-soft);border-radius:5px;padding:1px 5px} /* Der Fliesstext bleibt lesbar schmal, die Ueberschriften ebenso. */ :is(.theme-label,.theme-assesi) .recht__h,:is(.theme-label,.theme-assesi) .recht__t{max-width:var(--lesebreite)} /* Elementors Grundabstand zwischen Widgets (20px) legt sich sonst auf die Margins oben — der Abstand Ueberschrift/Text waere groesser als gedacht. `.elementor-widget` mit dazu, sonst gleiche Spezifitaet und die spaeter geladene Datei gewinnt. */ :is(.theme-label,.theme-assesi) .elementor-widget.recht__h,:is(.theme-label,.theme-assesi) .elementor-widget.recht__t{margin-block-end:0} /* ============================================================ THEMENSEITEN — Bausteine fuer laengere Inhaltsseiten Glossar, Presse, Newsletter, Netzwerk und die Themenseiten brauchen fuenf Formen, die es bisher nicht gab. Alles andere kommt aus dem vorhandenen Bestand. ============================================================ */ /* ---- Kennzahlen-Band auf Navy ---- */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.e-con>.kpi__n){background:var(--ci-navy);border-radius:var(--r-card); padding:clamp(2rem,4vw,2.8rem) clamp(1.4rem,3vw,2.4rem)} :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.kpi__n){display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(1.4rem,3vw,2.4rem)} :is(.theme-label,.theme-assesi) .e-con:has(>.kpi__n){gap:0;text-align:center} :is(.theme-label,.theme-assesi) .e-con:has(>.kpi__n) .elementor-widget:not(:last-child){margin-block-end:.35rem} :is(.theme-label,.theme-assesi) .kpi__n .elementor-heading-title{font-family:var(--font-display);font-weight:600; letter-spacing:-.01em;line-height:1;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.2rem); color:var(--cta-bg);margin:0} :is(.theme-label,.theme-assesi) .kpi__d p{margin:0;font-size:.84rem;line-height:1.5;color:rgba(255,255,255,.72)} /* ---- Zitatflaeche ---- */ :is(.theme-label,.theme-assesi) .e-con:has(>.zitat__t){gap:0;position:relative;background:#fff; border:var(--card-border);border-left:4px solid var(--cta-bg);border-radius:var(--r-card); box-shadow:var(--card-shadow); padding:clamp(1.6rem,3vw,2.2rem) clamp(1.6rem,3vw,2.4rem)} :is(.theme-label,.theme-assesi) .e-con:has(>.zitat__t) .elementor-widget:not(:last-child){margin-block-end:0} :is(.theme-label,.theme-assesi) .zitat__t{position:static} :is(.theme-label,.theme-assesi) .zitat__t[class*="--ico-"]::before{width:26px;height:26px;color:var(--cta-bg); margin-bottom:.9rem} :is(.theme-label,.theme-assesi) .zitat__t .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:clamp(1.05rem,.95rem + .5vw,1.28rem);line-height:1.5;letter-spacing:-.01em; color:var(--text-strong);margin:0} :is(.theme-label,.theme-assesi) .zitat__q p{margin:1rem 0 0;font-size:.82rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--accent-ink)} /* ---- Glossar: Sprungleiste und Eintraege ---- */ /* Wie bei .fz__bar-r: mit optimierter DOM-Ausgabe fehlt der Widget-Container, die Links haengen direkt am Element. */ :is(.theme-label,.theme-assesi) .az-bar, :is(.theme-label,.theme-assesi) .az-bar > .elementor-widget-container{display:flex;flex-wrap:wrap;gap:6px} :is(.theme-label,.theme-assesi) .az-bar a{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 6px; border:1px solid var(--border);border-radius:var(--r-chip);background:#fff; font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--accent-ink); transition:background var(--dur-base),color var(--dur-base)} :is(.theme-label,.theme-assesi) .az-bar a:hover{background:var(--accent-ink);color:#fff} :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.def-item__t){display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px} :is(.theme-label,.theme-assesi) .e-con:has(>.def-item__t){gap:0;background:#fff;border:var(--card-border); border-radius:var(--r-card);box-shadow:var(--card-shadow);padding:1.5rem 1.5rem} :is(.theme-label,.theme-assesi) .e-con:has(>.def-item__t) .elementor-widget:not(:last-child){margin-block-end:.5rem} :is(.theme-label,.theme-assesi) .def-item__t .elementor-heading-title{font-family:var(--font-display);font-weight:800; font-size:1rem;line-height:1.3;color:var(--text-strong);margin:0} :is(.theme-label,.theme-assesi) .def-item__d p{margin:0 0 .55rem;font-size:.88rem;line-height:1.65;color:var(--text-soft)} :is(.theme-label,.theme-assesi) .def-item__d p:last-child{margin-bottom:0} :is(.theme-label,.theme-assesi) .def-item__d a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px} /* ---- Material zum Herunterladen ---- */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.dl-item__t){display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px} :is(.theme-label,.theme-assesi) .e-con:has(>.dl-item__t){gap:0;display:grid;grid-template-columns:auto 1fr; column-gap:16px;align-items:start;background:#fff;border:var(--card-border); border-radius:var(--r-card);box-shadow:var(--card-shadow);padding:1.4rem 1.5rem} :is(.theme-label,.theme-assesi) .e-con:has(>.dl-item__t) .elementor-widget{margin-block-end:0} :is(.theme-label,.theme-assesi) .dl-item__t{grid-column:2;position:static} :is(.theme-label,.theme-assesi) .dl-item__t[class*="--ico-"]::before{position:absolute;left:1.5rem;top:1.5rem; width:22px;height:22px;color:var(--accent-ink);opacity:.75} :is(.theme-label,.theme-assesi) .e-con:has(>.dl-item__t){position:relative;padding-left:calc(1.5rem + 22px + 16px)} :is(.theme-label,.theme-assesi) .dl-item__t .elementor-heading-title{font-family:var(--font-display);font-weight:700; font-size:.98rem;line-height:1.35;color:var(--text-strong);margin:0} :is(.theme-label,.theme-assesi) .dl-item__d{grid-column:2} :is(.theme-label,.theme-assesi) .dl-item__d p{margin:.35rem 0 0;font-size:.8rem;line-height:1.5;color:var(--text-faint)} :is(.theme-label,.theme-assesi) .dl-item__d a{color:var(--accent-ink);font-weight:600; text-decoration:underline;text-underline-offset:3px} /* ---- Aufruf-Kasten fuer einen laufenden Prozess ---- Steht in Sektion 7 der Startseite und weist auf die laufende Konsultation hin. Navy, weil die Sektion hell ist: ein weiterer heller Kasten ginge zwischen Zeitstrahl und Blog-Karten unter. Der Button traegt die Akzentvariante — Lime beim Siegel, Gold bei der Association. Beide sind auf Navy als FLAECHE zulaessig; die Schrift darauf ist Navy, nicht umgekehrt. */ :is(.theme-label,.theme-assesi) .e-con:has(>.aktion-box__label){display:block; background:var(--surface-invert);border-radius:var(--r-card); padding:clamp(1.5rem,3vw,2.1rem);margin-bottom:clamp(2rem,4vw,2.8rem)} :is(.theme-label,.theme-assesi) .aktion-box__label{margin-block-end:0} :is(.theme-label,.theme-assesi) .aktion-box__label .elementor-heading-title{font-family:var(--font-body); font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);margin:0} :is(.theme-label,.theme-assesi) .aktion-box__label[class*="--ico-"]::before{display:inline-block; vertical-align:-3px;width:15px;height:15px;margin-right:7px;color:var(--accent)} :is(.theme-label,.theme-assesi) .aktion-box__label > .elementor-widget-container{display:inline} :is(.theme-label,.theme-assesi) .aktion-box__label > h6{display:inline} :is(.theme-label,.theme-assesi) .aktion-box__t{margin-block-end:0} :is(.theme-label,.theme-assesi) .aktion-box__t .elementor-heading-title{font-family:var(--font-display); font-weight:800;letter-spacing:-.02em;line-height:1.2; font-size:clamp(1.2rem,1rem + .9vw,1.55rem);color:var(--text-on-dark);margin:.55rem 0 0} :is(.theme-label,.theme-assesi) .aktion-box__d p{margin:.5rem 0 0;font-size:.96rem;line-height:1.65; color:rgba(255,255,255,.8);max-width:68ch} /* ============================================================ KONSULTATIONSSEITE — /konsultation Derselbe Klassen-Vertrag wie ueberall: Marker am ERSTEN Widget der Komponente, Container ueber `:has(>.marker)`. Drei Bausteine kommen hier dazu. Sie sind bewusst nicht auf die Konsultation beschraenkt — eine Frist, eine Position und ein aufklappbarer Themenblock werden im Konsultationsprozess wieder gebraucht, und der Prozess laeuft in Runden. ============================================================ */ /* ---- Fristkasten ---- Auffaellig, aber nicht alarmierend: Akzentkante und heller Grund statt Signalfarbe. Die Frist ist eine Einladung, keine Drohung. */ :is(.theme-label,.theme-assesi) .e-con:has(>.deadline__label){display:block; background:var(--surface-soft);border:1px solid var(--border); border-left:4px solid var(--accent-2);border-radius:var(--r-card); padding:1.2rem 1.5rem;margin-top:1.8rem} :is(.theme-label,.theme-assesi) .deadline__label{margin-block-end:0} :is(.theme-label,.theme-assesi) .deadline__label .elementor-heading-title{font-family:var(--font-body); font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--text-soft);margin:0} :is(.theme-label,.theme-assesi) .deadline__d p{margin:.4rem 0 0;font-family:var(--font-display); font-weight:700;font-size:1.05rem;line-height:1.45;color:var(--text-strong)} /* ---- Themenblock ---- Nummer, Titel, Kurzfassung, optional die Position, dann das Akkordeon. Die Karte traegt den Rahmen; das Akkordeon darin nicht noch einmal, sonst stehen zwei Rahmen ineinander. */ :is(.theme-label,.theme-assesi) .e-con:has(>.e-con>.topic__n){display:grid;gap:20px} :is(.theme-label,.theme-assesi) .e-con:has(>.topic__n){display:block;background:#fff; border:var(--card-border);border-radius:var(--r-card);box-shadow:var(--card-shadow); padding:clamp(1.5rem,3vw,2.1rem)} :is(.theme-label,.theme-assesi) .topic__n{margin-block-end:0} :is(.theme-label,.theme-assesi) .topic__n .elementor-heading-title{display:inline-grid;place-items:center; min-width:34px;height:34px;border-radius:var(--r-chip);background:var(--surface-soft); border:1px solid var(--border);font-family:var(--font-display);font-weight:800; font-size:.8rem;color:var(--accent-ink);margin:0} :is(.theme-label,.theme-assesi) .topic__h{margin-block-end:0} :is(.theme-label,.theme-assesi) .topic__h .elementor-heading-title{font-family:var(--font-display); font-weight:800;letter-spacing:-.015em;font-size:1.15rem;line-height:1.3; color:var(--text-strong);margin:.7rem 0 0} :is(.theme-label,.theme-assesi) .topic__kurz p{margin:.7rem 0 0;font-size:.98rem;line-height:1.7; color:var(--text-soft);max-width:var(--lesebreite)} /* Das Akkordeon im Themenblock steht ohne eigene Karte — der Block ist schon eine. Nur die Trennlinie bleibt, damit die Klappzeile als Bedienelement lesbar ist. box-shadow, margin-bottom und max-width muessen hier AUSDRUECKLICH zurueck: das Widget traegt `faq topic__acc`, und der .faq-Grundzug gibt jedem Eintrag Karte, Schatten und 12px Abstand. Ohne die Gegenregeln schwebten in der Themenkarte rahmenlose Schattenkaesten uebereinander — Kundenbefund vom 07.08.2026 („Mehrfachschatten, schwer einzuordnen"). */ :is(.theme-label,.theme-assesi) .topic__acc{margin-top:1.3rem;max-width:none} :is(.theme-label,.theme-assesi) .topic__acc .elementor-accordion-item{background:transparent;border:0; border-top:1px solid var(--border);border-radius:0;box-shadow:none;margin-bottom:0;overflow:visible} :is(.theme-label,.theme-assesi) .topic__acc .elementor-accordion-item + .elementor-accordion-item{margin-top:0} :is(.theme-label,.theme-assesi) .topic__acc .elementor-tab-title{position:relative;padding:.9rem 2.2rem .9rem 0;font-size:.94rem; color:var(--accent-ink)} :is(.theme-label,.theme-assesi) .topic__acc .elementor-tab-title a{color:var(--accent-ink)} :is(.theme-label,.theme-assesi) .topic__acc .elementor-tab-title.elementor-active{background:transparent} :is(.theme-label,.theme-assesi) .topic__acc .elementor-tab-title::after{content:'+';position:absolute; right:.2rem;top:50%;transform:translateY(-50%);font-family:var(--font-body);font-weight:400; font-size:1.2rem;line-height:1;color:var(--accent-ink)} :is(.theme-label,.theme-assesi) .topic__acc .elementor-tab-title.elementor-active::after{content:'−'} /* 34em statt --lesebreite: Der Klapptext setzt kleiner als der Fliesstext, und das rem-Mass ergaebe zu viele Zeichen je Zeile (gemessen 87 in der Literaturliste). em haelt die Zeichenzahl konstant — Regel siehe CLAUDE.md, „Lesebreite haengt an der Schriftgroesse". */ :is(.theme-label,.theme-assesi) .topic__acc .elementor-tab-content{padding:0 0 1.2rem;max-width:34em} :is(.theme-label,.theme-assesi) .topic__acc .elementor-tab-content li{font-size:.9rem;line-height:1.6; margin-bottom:.6rem} :is(.theme-label,.theme-assesi) .topic__einladung p{margin:1.2rem 0 0;padding-top:1.1rem; border-top:1px solid var(--border);font-size:.94rem;line-height:1.65; color:var(--text-strong);max-width:var(--lesebreite)} /* ---- Konsultationsformular ---- Das Formular steht in einem warmen Band und braucht deshalb keine zweite helle Flaeche darunter — der weisse Grund genuegt, um es vom Band abzusetzen. Alles Uebrige (Felder, Beschriftungen, Pflichtmarkierung, Absendeknopf) traegt der Block „ELEMENTOR-WIDGETS IM CI" weiter unten; hier steht nur, was diesem einen Formular eigen ist. */ /* Das Formular nimmt die volle Rahmenbreite. Der 60rem-Deckel aus 0.42.0 ist wieder weg: Er stammte aus der Uebertragung der Akkordeon-Regel, und bei einem Fragebogen stimmt die Analogie nicht. Ein Akkordeon ist Lesestoff, ein Formular ist Bedienflaeche — dort schadet Breite nicht, sie gibt den Antwortknoepfen Platz. Kundenbefund vom 07.08.2026: „zu klein und winzig". */ :is(.theme-label,.theme-assesi) .konsult-form{margin-top:1.6rem} /* Der Abstand zwischen den Feldgruppen kommt sonst aus Elementors eigenem Stylesheet und haengt an dessen Spaltenraster. Hier steht er ausdruecklich: Die Felder dieses Formulars laufen alle ueber die volle Breite, ein Raster mit einer Spalte trifft also genau zu — und der Abstand ist damit unser Wert, nicht Elementors. */ :is(.theme-label,.theme-assesi) .konsult-form .elementor-form-fields-wrapper{ display:grid;grid-template-columns:1fr;gap:1.7rem 0} /* Die Beschriftung traegt seit 0.42.0 die Entscheidung selbst — ein bis zwei Saetze statt drei Woertern. Sie ist damit die eigentliche Frage und setzt wie eine: groesser als eine Feldbeschriftung, in Navy, auf Lesebreite. 40em statt 34em, und weiterhin em statt rem — die Zeichenzahl soll konstant bleiben, nicht die Breite (Regel siehe CLAUDE.md). */ :is(.theme-label,.theme-assesi) .konsult-form .elementor-field-label{ font-family:var(--font-display);font-size:1.05rem;font-weight:700;line-height:1.45; color:var(--text-strong);max-width:40em;margin-bottom:.9rem} /* Eingabefelder eine Stufe groesser als im Grundzug: Ein Fragebogen wird ausgefuellt, nicht ueberflogen. */ :is(.theme-label,.theme-assesi) .konsult-form :is(.elementor-field-textual,textarea,select){ font-size:1rem;padding:13px 16px} :is(.theme-label,.theme-assesi) .konsult-form .elementor-field-type-textarea textarea{min-height:10rem} /* ---- Skalenfrage als Knopfreihe ---- Fuenf nackte Radioknoepfe mit Kleinschrift daneben sind auf einer Konsultationsseite die schwaechste Form der Wahl: winzige Trefferflaeche, kein Zustand auf einen Blick. Stattdessen fuenf gleich breite Knoepfe, die die Zeile fuellen; der gewaehlte ist ausgefuellt. ZUM MARKUP: `div.elementor-field-group.elementor-field-type-