.
Es bringt aber seine eigene Gestalt mit: 10px Polster, ein
Font-Awesome-Zeichen und eine Flex-Zeile. Hier wird daraus die
Gestalt aus styles.css (.faq summary, .faq-icon).
Die Auszeichnung von Elementor:
details.e-n-accordion-item
summary.e-n-accordion-item-title
span.e-n-accordion-item-title-header > div…-title-text
span.e-n-accordion-item-title-icon > span.e-opened / span.e-closed
div.e-con (der Antwortcontainer)
------------------------------------------------------------------ */
.faq .e-n-accordion,
.faq .e-n-accordion-item{display:block; background:none; border:0; border-radius:0}
.faq .e-n-accordion-item{border-top:1px solid var(--rule)}
.faq .e-n-accordion-item:first-of-type{border-top:0}
.elementor-widget-n-accordion.faq .e-n-accordion-item-title{
display:block; position:relative;
padding:clamp(1.15rem, 1.8vw, 1.5rem) 4rem clamp(1.15rem, 1.8vw, 1.5rem) 0;
background:none; border:0;
font-family:var(--font-display); font-weight:700;
font-size:clamp(1.02rem, .92rem + .28vw, 1.18rem);
letter-spacing:-.015em; color:var(--indigo); line-height:1.35;
transition:color .2s var(--ease);
}
.elementor-widget-n-accordion.faq .e-n-accordion-item-title:hover{color:var(--indigo-deep)}
.faq .e-n-accordion-item-title-header,
.faq .e-n-accordion-item-title-text{display:block; font:inherit; color:inherit; margin:0}
/* Das Zeichen rechts: die Pille aus styles.css statt des Icon-Fonts.
Absolut gesetzt, damit es die Zeilenhoehe nicht diktiert — eine
einzeilige Frage soll nicht hoeher sein als eine zweizeilige. */
.elementor-widget-n-accordion.faq .e-n-accordion-item-title-icon{
position:absolute; right:0; top:50%; transform:translateY(-50%);
width:2rem; height:2rem; flex:none;
border-radius:var(--r-pill);
background:var(--indigo-08);
display:block; padding:0;
transition:background-color .25s var(--ease);
}
/* Elementors Icon-Zeichen (Font Awesome Plus/Minus) verschwindet; die
beiden Balken darueber zeichnet die Pille selbst. */
.elementor-widget-n-accordion.faq .e-n-accordion-item > .e-n-accordion-item-title .e-n-accordion-item-title-icon > span,
.elementor-widget-n-accordion.faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon > span{display:none}
.elementor-widget-n-accordion.faq .e-n-accordion-item-title-icon::before,
.elementor-widget-n-accordion.faq .e-n-accordion-item-title-icon::after{
content:""; position:absolute; inset:50% 28% auto; height:2px; margin-top:-1px;
background:var(--indigo);
transition:transform .3s var(--ease);
}
.elementor-widget-n-accordion.faq .e-n-accordion-item-title-icon::after{transform:rotate(90deg)}
.faq details[open] .e-n-accordion-item-title-icon{
background:color-mix(in srgb, var(--indigo) 16%, var(--paper));
}
.faq details[open] .e-n-accordion-item-title-icon::after{transform:rotate(0deg)}
/* Der Antwortcontainer traegt kein eigenes Polster; das steht am Absatz. */
.faq .e-n-accordion-item > .e-con{
padding:0; border:0;
--padding-top:0; --padding-bottom:0; --padding-left:0; --padding-right:0;
}
/* ------------------------------------------------------------------
16. Wenn der Element-Selektor die Klasse schlaegt
styles.css setzt an mehreren Stellen eine Grundgestalt ueber einen
Element-Selektor (.final p, .head p, .case p) und zeichnet einzelne
Absaetze darueber mit einer Klasse aus. Im Original sitzt die Klasse
am selbst und gewinnt. In Elementor sitzt sie am Widget, das
liegt darin — der Element-Selektor greift dann am
und die
Auszeichnung laeuft ins Leere.
Betroffen waren sechs Absaetze: Lead und Schlusssatz der Relevanz,
die Fallzeile der Referenz sowie Panelkopf, Nachsatz und Mailzeile
im Schlussband. Sie liefen auf 21px Lead-Groesse statt auf ihrer
eigenen Stufe — die Mailzeile war dadurch groesser als der Belegtext
darueber.
------------------------------------------------------------------ */
.elementor-widget.rel-lead p,
.elementor-widget.rel-close p,
.elementor-widget.case-meta p,
.elementor-widget.cta-direct p,
.elementor-widget.after p,
.elementor-widget.talk-head p{
font: inherit;
color: inherit;
letter-spacing: inherit;
text-transform: inherit;
max-width: none;
margin: 0;
}
/* ------------------------------------------------------------------
17. Listen, die eine Reihe sein sollen
.assure und .agenda sind im Original das
selbst. In Elementor
traegt der Wrapper die Klasse, das liegt eine Ebene tiefer —
die Flex-Reihe griff dadurch auf dem Wrapper mit nur einem Kind,
und die Haekchen-Zeilen standen als Bloecke ueber die volle Breite.
------------------------------------------------------------------ */
.elementor-widget.assure ul{
display:flex; flex-wrap:wrap;
column-gap:.85rem; row-gap:.32rem;
margin:0; padding:0; list-style:none;
}
.elementor-widget.assure li{display:flex; align-items:center; gap:.32rem; white-space:nowrap}
.elementor-widget.agenda ul{
display:flex; flex-direction:column; gap:.5rem;
margin:0; padding:0; list-style:none;
}
/* ------------------------------------------------------------------
18. Der Knopf im CTA-Slot
styles.css adressiert ihn als direktes Kind (.cta-slot > .btn). In
Elementor liegt zwischen Slot und der Widget-Wrapper, die Regel
griff deshalb nicht und Elementors Standardpolster blieb stehen.
------------------------------------------------------------------ */
.cta-slot .btn.elementor-button{
width:100%; justify-content:center;
padding:1.05rem 1.1rem;
font-size:1rem; font-weight:600; letter-spacing:-.005em; text-align:center;
}
.cta-slot .btn.elementor-button:hover{transform:translateY(-2px)}
/* ------------------------------------------------------------------
19. Satzbreiten
Elementor deckelt jedes Widget in einem Container pauschal auf
`max-width:100%` (.elementor.elementor .e-con > .elementor-widget).
Diese Regel ist spezifischer als jede Satzbreite aus styles.css und
hat damit saemtliche Zeilenlaengen des Designsystems ausgehebelt —
.head (56ch), .hero .lead (38ch), .rel-lead (42ch), .problem-claim
(24ch), .outcome-lead (50ch), .final-lead (42ch), .services .note
(62ch) und .faq-answer (46ch) liefen alle ueber die volle
Containerbreite.
Der Deckel wird hier aufgehoben, damit die dokumentierte Grenze von
rund 65 Zeichen pro Zeile wieder gilt. Die Widgets bleiben ohne
eigene Satzbreite so breit wie ihr Container — sie sind Blockboxen,
der Deckel war fuer sie ohnehin wirkungslos.
------------------------------------------------------------------ */
/* --measure ist die Satzbreite, die styles.css neben jedem max-width
mitfuehrt. Sie ist per @property als NICHT vererbend deklariert, damit
ein Widget nicht die Breite seines Elternteils erbt; ohne eigenen Wert
greift 100% — also genau Elementors bisheriges Verhalten. So bleibt die
Zeilenlaenge an einer Stelle definiert: in styles.css. */
@property --measure{
syntax: "";
inherits: false;
initial-value: 100%;
}
.elementor.elementor .e-con > .elementor-widget,
.elementor.elementor .e-con > .e-con,
.e-con.e-con > .e-con-inner > .elementor-widget{max-width:var(--measure, 100%)}
/* ------------------------------------------------------------------
20. Zeilenhoehe in Knoepfen und Textlinks
Elementor setzt .elementor-button auf line-height:1. Im Original
erben Knopf und Textlink die Zeilenhoehe des Fliesstexts (1,62) —
der gelbe Knopf im Schlussband war dadurch 52 statt 62 Pixel hoch
und der Textlink 21 statt 32.
------------------------------------------------------------------ */
.elementor-button.btn,
.elementor-button.textlink{line-height:inherit}
/* ------------------------------------------------------------------
21. Die Formatspalten-Ueberschrift
.format-area ist im Original das - selbst: eine Flex-Zeile aus
Zeichen und Text. In Elementor traegt der Wrapper die Klasse, und
das Zeichen stand dadurch ueber statt neben dem Text. Die Reihe
wandert deshalb auf das Ueberschriftenelement darin.
------------------------------------------------------------------ */
.elementor-widget.format-area .elementor-heading-title{
display:flex; align-items:flex-start; gap:.6rem;
font:inherit; color:inherit;
}
/* ------------------------------------------------------------------
22. Der Abstand unter der "Fuer wen"-Zeile
Elementor setzt jedem Widget margin:0. Die einzige Stelle, an der
das einen dokumentierten Wert loescht, ist .services .service-for —
ihre 1,05rem gehoeren zur dritten Zeile des Karten-Subgrids, die
Karten waren dadurch 17px zu niedrig. Elementor raeumt den Abstand
ueber margin-block-end auf .e-con .elementor-widget.elementor-widget
ab — die Gegenregel braucht deshalb dieselbe Eigenschaft und eine
Klasse mehr.
------------------------------------------------------------------ */
.e-con .elementor-widget.elementor-widget.service-for{margin-block-end:1.05rem}
/* ------------------------------------------------------------------
23. Die Schiene des Zeitstrahls
.process::before spannt sich ueber top:3rem/bottom:3rem auf — die
Hoehe ergibt sich also aus beiden Kanten. Elementor legt jedem
Container ein ::before fuer Hintergrund-Overlays an und gibt ihm
height:100%; damit gewann die Hoehe gegen das Kantenpaar, und die
Schiene lief unter Schritt 05 ins Leere statt in der Mitte des
letzten Ziffernblocks zu enden.
------------------------------------------------------------------ */
.elementor .e-con.process::before{height:auto; width:1px}
/* ------------------------------------------------------------------
24. Der Kopf auf schmalen Breiten
styles.css blendet die Navigation ab 1000px ersatzlos aus
(.nav{display:none}) — auf dem Telefon bliebe die Seite damit ohne
Menue. Der Prototyp macht dazu keine weitere Vorgabe, deshalb hier
eine eigene Loesung im System der Seite:
ab 1000px Logo · Umschalter · Knopf
ab 640px Logo · Umschalter (der Knopf steht als letzter
Eintrag im Klapppanel, damit er nicht verlorengeht)
Das Panel benutzt Elementors eigene Klappmechanik; gestaltet ist es
mit den Mitteln der Seite: Canvas-Grund, Instrument Sans, die gelbe
Unterlinie der Hauptnavigation als aktiver Zustand.
------------------------------------------------------------------ */
@media (max-width:1000px){
.site-header .elementor-widget.nav{display:flex; justify-content:flex-end; margin:0}
.site-header .nav .elementor-nav-menu--main{display:none}
.site-header .elementor-menu-toggle{display:flex}
.site-header .wrap{justify-content:space-between; flex-wrap:nowrap; gap:1rem}
.site-header .btn.elementor-button{flex:none}
/* Der Umschalter sitzt rechts. Das Widget haelt auch das Klapppanel,
dessen Breite sonst die Zeile aufspannt — deshalb rechtsbuendig
statt auf Inhaltsbreite. */
.site-header .elementor-widget.nav{margin-inline-start:auto}
}
/* Der Umschalter: kein Kasten, nur das Zeichen in Indigo — als 44px
grosses Ziel, damit er sich mit dem Daumen sicher treffen laesst. */
.site-header .elementor-menu-toggle{
background:none; border:0; padding:0;
width:44px; height:44px;
align-items:center; justify-content:center;
color:var(--indigo); font-size:1.5rem;
border-radius:var(--r-input);
transition:color .2s var(--ease);
}
.site-header .elementor-menu-toggle:hover{background:none; color:var(--indigo-deep)}
.site-header .elementor-menu-toggle svg{fill:currentColor; width:1em; height:1em}
/* Das Klapppanel haengt an Elementor am Menue-Widget und waere damit nur
so breit wie der Umschalter — und begaenne auf dessen Oberkante, also
im Kopf statt darunter. Es wird deshalb am Kopf verankert (der ist
ohnehin position:sticky) und laeuft ueber die volle Breite. */
.site-header .elementor-widget.nav{position:static}
.site-header .elementor-nav-menu--dropdown{
position:absolute; top:100%; left:0; right:0; width:auto;
max-height:calc(100vh - 100%); overflow-y:auto;
}
.site-header .elementor-nav-menu--dropdown{
background:color-mix(in srgb, var(--canvas) 97%, var(--paper));
border-top:1px solid var(--line-soft);
box-shadow:var(--shadow-card);
padding-block:.5rem;
}
.site-header .elementor-nav-menu--dropdown .elementor-item{
font-family:var(--body); font-size:var(--t-body); font-weight:500;
color:var(--slate);
padding:.9rem var(--gutter);
border:0;
transition:color .2s var(--ease), background-color .2s var(--ease);
}
.site-header .elementor-nav-menu--dropdown .elementor-item:hover,
.site-header .elementor-nav-menu--dropdown .elementor-item:focus,
.site-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active{
color:var(--indigo);
background:color-mix(in srgb, var(--indigo) 6%, transparent);
}
/* Der Knopf im Panel: dieselbe Pille wie im Kopf, ueber die volle Breite. */
/* Auf dem Desktop steht der Knopf im Kopf; im Menue waere er doppelt.
Elementor gibt den Eintraegen display:flex mit drei Klassen — die
Gegenregel braucht deshalb vier. */
.site-header .elementor-nav-menu--main .elementor-nav-menu > li.nav-cta{display:none}
.site-header .elementor-nav-menu--dropdown .nav-cta{
margin:.6rem var(--gutter) .35rem;
}
.site-header .elementor-nav-menu--dropdown .nav-cta .elementor-item{
justify-content:center;
background:var(--indigo); color:var(--paper);
border-radius:var(--r-pill);
padding:.85rem 1.25rem;
font-weight:600;
}
.site-header .elementor-nav-menu--dropdown .nav-cta .elementor-item:hover{
background:var(--indigo-deep); color:var(--paper);
}
@media (max-width:640px){
/* Drei Elemente passen bei 375px nicht nebeneinander (Logo 93 +
Knopf 217 + Umschalter 34 gegen 335px Satzbreite). Der Knopf
wandert deshalb ins Panel. */
.site-header .btn.elementor-button{display:none}
}
/* Das Signet bringt nur eine viewBox mit, keine Breite. In einem
Flex-Container loest `width:auto` dadurch zu 0 auf und die Wortmarke
stand allein. Das Seitenverhaeltnis gibt ihm seine Breite zurueck. */
.logo svg{flex:none; aspect-ratio:181 / 237; width:auto}
/* ------------------------------------------------------------------
25. Das Bildpanel im Schlussband auf schmalen Breiten
Ab 1000px loest styles.css das Bild aus der Absolutsetzung
(.final-stage img{position:relative}) — es traegt dort seine eigene
Hoehe, und das Gespraechspanel schiebt sich mit negativem Rand
darueber. Regel 10 setzt aber den Widget-Wrapper unbedingt absolut;
das Bild verlor dadurch seine Hoehe und lag nur noch als schmaler
Streifen hinter dem Panel.
------------------------------------------------------------------ */
@media (max-width:1000px){
.final-stage > .elementor-widget-image{
position:relative; inset:auto;
width:100%; height:auto;
}
.final-stage > .elementor-widget-image img{height:auto}
}
/* ------------------------------------------------------------------
26. Bezugsrahmen fuer absolut gesetzte Bilder
styles.css gibt diesen Slots position:relative, damit das Bild darin
(position:absolute; inset:0) genau sie ausfuellt. Elementor setzt die
Widget-Wrapper auf position:static; das Bild bezog sich dadurch auf
den naechsten positionierten Vorfahren — bei der Befundkarte auf
.finding selbst. Einspaltig lag das Foto dadurch ueber der gesamten
Karte und der Text darauf.
------------------------------------------------------------------ */
.elementor-widget.finding-shot,
.elementor-widget.proc-figure,
.e-con.final-stage,
.e-con.hero-media{position:relative}
/* ------------------------------------------------------------------
27. Der Zeitstrahl auf schmalen Breiten
Ab 640px stellt styles.css die Schritte einspaltig: die Ziffer steht
ueber dem Text, nicht daneben. Die Schiene sitzt aber weiterhin auf
der Ziffernmitte (left:1.63rem) und lief damit quer durch den
Fliesstext. Ohne Ziffernspalte gibt es nichts mehr zu verbinden.
------------------------------------------------------------------ */
@media (max-width:640px){
.process::before{display:none}
.phase-no{background:none}
}
/* ------------------------------------------------------------------
28. Ueberschriften auf schmalen Breiten
Die Basisregel setzt h1-h4 auf text-wrap:balance und hyphens:auto.
In einer 335px-Spalte arbeiten beide gegeneinander: Der Ausgleich
sucht gleich lange Zeilen und nimmt dafuer Trennungen in Kauf, die
gar nicht noetig waeren — "oft zu spaet rich-tig aktiviert." trennte
ein siebenbuchstabiges Wort, das auf der naechsten Zeile Platz hat.
Ohne Ausgleich trennt der Browser nur noch, wenn ein Wort wirklich
breiter ist als die Spalte. Das ist bei deutschen Komposita
(Unternehmensgeschichte) noetig und dort auch richtig.
------------------------------------------------------------------ */
@media (max-width:640px){
h1, h2, h3, h4,
.elementor-heading-title{text-wrap:wrap}
}
/* ------------------------------------------------------------------
29. Der Fuss braucht kein Klappmenue
Elementors Menue-Widget schaltet ab Tablet-Breite auf Umschalter —
im Fuss also ein Burger fuer vier kurze Links. Die Liste bleibt
deshalb auf allen Breiten sichtbar und bricht einfach um; die
Gestalt steht in styles.css (.footer-links).
------------------------------------------------------------------ */
.site-footer .elementor-menu-toggle,
.site-footer .elementor-nav-menu--dropdown{display:none !important}
.site-footer .elementor-nav-menu--main{display:block !important}
/* .footer-links ist im Original das