/* ========================================================================== Hanna Sacher – Designsystem-Klassenschicht -------------------------------------------------------------------------- Anwendung: Klassenname im Elementor-Feld "CSS-Klassen" (Erweitert) des jeweiligen Elements eintragen. Die Klasse ersetzt dann die entsprechenden Widget-Einstellungen — NICHT beides setzen: eine Einstellung am Element erzeugt eine Regel mit Spezifität (0,4,0) und schlägt die Klasse (0,1,0) bis (0,2,0). Genau so gewollt: das Element bleibt der Notausgang für Einzelfälle, die Klasse trägt den Normalfall. Alle Werte sind aus dem Startseiten-Prototyp (Post 9637) ausgelesen, der pixelweise gegen den Figma-Entwurf geprüft wurde. ========================================================================== */ :root { /* Markenfarben – identisch mit den Global Colors des Elementor-Kits */ --hs-bordeaux: #7A2742; --hs-rose: #A23559; --hs-creme: #FBF6F3; --hs-sand: #F3E3D7; --hs-white: #FFFFFF; --hs-icon: #DDB2A5; /* X-/Haken-Icons */ --hs-eyebrow-mute: #DDB2A5; /* gedämpftes Altrosa der Eyebrow-Zeilen */ --hs-serif: "Editors Note", Georgia, "Times New Roman", serif; --hs-sans: "Open Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --hs-section-space: 90px; /* Standard-Sektionsluft oben/unten */ --hs-gutter: 20px; /* seitlicher Mindestrand */ --hs-content: 1240px; /* Content-Raster, identisch mit dem Kit */ } /* ========================================================================== 1. Sektionen Container-Padding läuft bei Elementor über CSS-Variablen, nicht über padding-Deklarationen. Deshalb werden hier die Variablen gesetzt. ========================================================================== */ .hs-section { --padding-top: var(--hs-section-space); --padding-bottom: var(--hs-section-space); --padding-left: var(--hs-gutter); --padding-right: var(--hs-gutter); } .hs-section--tight { --padding-top: 70px; --padding-bottom: 70px; } .hs-section--slim { --padding-top: 48px; --padding-bottom: 48px; } .hs-section--flush { --padding-top: 0; --padding-bottom: 0; } .hs-section--creme { background-color: var(--hs-creme); } .hs-section--sand { background-color: var(--hs-sand); } .hs-section--bordeaux { background-color: var(--hs-bordeaux); } .hs-section--rose { background-color: var(--hs-rose); } .hs-section--white { background-color: var(--hs-white); } /* Auf kleinen Geräten ist die volle Sektionsluft zu viel Leerraum. */ @media (max-width: 767px) { .hs-section { --padding-top: 56px; --padding-bottom: 56px; } .hs-section--tight{ --padding-top: 48px; --padding-bottom: 48px; } .hs-section--slim { --padding-top: 36px; --padding-bottom: 36px; } .hs-section--flush{ --padding-top: 0; --padding-bottom: 0; } } /* Rasterflucht: eine randlose Fläche endet trotzdem exakt an der Kante des 1240er-Contentrasters. 100vw ist hier falsch — es zählt die Scrollbar mit. Bewusste Ausnahme von der Regel "Element schlägt Klasse": diese beiden Helfer stehen auf der Spezifität von Elementors Element-Regel (0,3,0) und gewinnen über die Ladereihenfolge. Sonst könnte man sie nicht benutzen — Elementors Dimensions-Feld lässt keine einzelne Seite frei, und ein eingetragener Links-Wert würde die Rasterflucht still überschreiben. */ .elementor .e-con.hs-bleed-left { --padding-left: max(var(--hs-gutter), calc((100% - var(--hs-content)) / 2)); } .elementor .e-con.hs-bleed-right { --padding-right: max(var(--hs-gutter), calc((100% - var(--hs-content)) / 2)); } /* ========================================================================== 2. Karten ========================================================================== */ .hs-card { --padding-top: 46px; --padding-right: 34px; --padding-bottom: 40px; --padding-left: 34px; --gap: 12px 12px; --row-gap: 12px; --column-gap: 12px; background-color: var(--hs-white); } .hs-card--creme { background-color: var(--hs-creme); } .hs-card--sand { background-color: var(--hs-sand); } /* Karte AUF Sandflaeche (Erfolgsgeschichten, Masse-Sektion) - Figma 596:235: #FFFFFF bei 30 % Deckkraft ueber Sand = #F7EBE3. Bewusst als rgba und nicht als Mischwert: so bleibt es Figmas Angabe. (24.09.2026) */ .hs-card--hauch { background-color: rgba(255, 255, 255, 0.3); } .hs-card--bordeaux { background-color: var(--hs-bordeaux); } /* Rosé-Karte: 16.09.2026 ergänzt. Die Painpoint-Box der Challenge-LP steht im Figma auf #A23559 (Knoten 938:158, Rectangle 3) — gebaut war sie Bordeaux. Eigene Klasse statt Inline-Farbe, damit `.hs-on-dark` sie wie die Bordeaux- Variante behandelt und der Text weiß bleibt (s. Regel bei .hs-on-dark). */ .hs-card--rose { background-color: var(--hs-rose); } /* Ruhigere Karte für Aufzählungen und Schritt-Kacheln. */ .hs-card--calm { --padding-top: 34px; --padding-right: 30px; --padding-bottom: 34px; --padding-left: 30px; } @media (max-width: 767px) { .hs-card { --padding-top: 34px; --padding-right: 24px; --padding-bottom: 30px; --padding-left: 24px; } } /* ========================================================================== 3. Buttons Die Klasse sitzt am Widget-Wrapper, gestylt wird der innere . Reihenfolge beachten: Basis zuerst, Varianten danach — gleiche Spezifität. ========================================================================== */ .hs-btn .elementor-button { font-family: var(--hs-sans); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 0; padding: 17px 34px; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* Primär: Rosé auf hellem Grund. */ .hs-btn--primary .elementor-button { background-color: var(--hs-rose); color: var(--hs-white); fill: var(--hs-white); border: 0; } .hs-btn--primary .elementor-button:hover, .hs-btn--primary .elementor-button:focus { background-color: var(--hs-bordeaux); color: var(--hs-white); } /* Hell: SAND auf dunklem Grund (Bordeaux-/Rosé-Flächen). Figma 07.09.2026 gegengeprüft: im GESAMTEN Entwurf gibt es nur zwei Knopf-Flächen -- #A23559 (46x) und #F3E3D7 Sand (21x). Creme #FBF6F3 kommt 54x vor, aber ausschliesslich als SEKTIONS-/Kartenflaeche (Problem, Angebote, Boni, Bewertungen), nie als Knopf. Vorher stand hier faelschlich --hs-creme: die Zuordnung war beim Aufbau des Systems geraten, nicht abgelesen. Hover spiegelt jetzt nach hell (Sand -> Creme), analog zu --primary (Rose -> Bordeaux). */ .hs-btn--light .elementor-button { background-color: var(--hs-sand); color: var(--hs-bordeaux); fill: var(--hs-bordeaux); border: 0; padding: 18px 40px; } .hs-btn--light .elementor-button:hover, .hs-btn--light .elementor-button:focus { background-color: var(--hs-creme); color: var(--hs-bordeaux); } /* Ghost: nur Kontur, für Fotos und die Kopfzeile. */ .hs-btn--ghost .elementor-button { background-color: transparent; color: var(--hs-white); fill: var(--hs-white); border: 1px solid var(--hs-white); padding: 15px 34px; } .hs-btn--ghost .elementor-button:hover, .hs-btn--ghost .elementor-button:focus { background-color: var(--hs-white); color: var(--hs-bordeaux); fill: var(--hs-bordeaux); } /* ========================================================================== 4. Typografie ========================================================================== */ /* Eyebrow – die gesperrte Versalzeile über den Überschriften. Die Sperrung ist im Entwurf immer proportional zur Schriftgröße (0,2 em). */ /* Laufweite 3 px und Zeilenhoehe 15 px sind die Figma-Werte: 25 Eyebrows mit Open Sans 14 / w700 / VERSAL tragen ALLE lh 15 und ls 3 (gemessen 09.09.2026). Die scheinbaren Ausreisser im Entwurf (lh 22 und 30) sind keine Eyebrows, sondern Knopftexte und Kartenueberschriften - sie haben Laufweite 0. Vorher: .2em (=2,8 px) und 1.6. Live gegengeprueft: kein Eyebrow ist mehrzeilig. */ .hs-eyebrow .elementor-heading-title { font-family: var(--hs-sans); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; line-height: 15px; color: var(--hs-eyebrow-mute); } /* --wide ist groesser: eigene Zeilenhoehe, sonst wuerden die 15 px der Basis greifen. */ /* Zeilenhoehe als PIXELWERT, nicht als Faktor: Figma zeigt 28,0 px, `1.6` ergab 28,8. Der Faktor stand im Protokoll schon als offener Fehler („.hs-eyebrow--wide (1.6 statt 28)"). Korrigiert 15.09.2026 beim Presse-Abgleich. */ .hs-eyebrow--wide .elementor-heading-title { font-size: 18px; letter-spacing: .3em; line-height: 28px; } /* Hero */ /* --wide gilt NUR auf dem Desktop. Auf 375 px wurde die Kickerzeile dadurch groesser als die Ueberschrift darunter: Eyebrow 18/28,8 mit 5,4 px Laufweite gegen eine H1 von 29 px — der Kicker brach auf fuenf Zeilen um und erschlug die Ueberschrift (Chris, 15.09.2026: „da ist das Stirnfaltencheck viel zu gross und die Ueberschrift eigentlich viel zu klein"). Maßstab ist die Ueber-Hanna-Seite, dort mobil gemessen: Eyebrow 14/15 mit 3 px Laufweite, H1 34/42. Das sind genau die Werte der BASIS-Eyebrow — mobil faellt `--wide` deshalb auf sie zurueck. Gilt fuer jede Seite mit dem Modifier (7 Generatoren). */ @media (max-width: 767px) { .hs-eyebrow--wide .elementor-heading-title { font-size: 14px; letter-spacing: 3px; line-height: 15px; } } .hs-eyebrow--small .elementor-heading-title { font-size: 14px; } /* Namen auf den Testimonial-Karten. Eigene Klasse, weil sie NICHT die Eyebrow-Metrik haben: Figma zeigt sie 34x als Open Sans 15/30, w700, ls 1,5, VERSAL, #7A2742 - ohne eine einzige Ausnahme. Bisher liefen sie ueber .hs-eyebrow--small (14/22,4/ls2,8) mit, was die Klasse fuer zwei verschiedene Dinge benutzt hat. Die offene Frage 9 an Hanna betrifft die SCHRIFTFAMILIE (Editor's Note?), nicht diese Masse. (09.09.2026) */ .hs-tname .elementor-heading-title { font-family: var(--hs-sans); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; line-height: 30px; color: var(--hs-bordeaux); } .hs-eyebrow--rose .elementor-heading-title { color: var(--hs-rose); } .hs-eyebrow--bordeaux .elementor-heading-title { color: var(--hs-bordeaux); } .hs-eyebrow--light .elementor-heading-title { color: var(--hs-white); } .hs-eyebrow--mute .elementor-heading-title { color: var(--hs-eyebrow-mute); } /* --mute holt das Altrosa zurueck, wo der Kontext `hs-on-dark` auf Sand stellt. Figma zeigt die Eyebrow auf dunklem Grund als #DDB2A5 (15x im Entwurf); Sand kommt als Eyebrow-Farbe gar nicht vor. Die Kontextregel bleibt trotzdem stehen: in der About-Sektion gibt Figma Creme vor, sie ist also nicht pauschal falsch. Deshalb ein Modifier statt einer Aenderung mit Reichweite. (09.09.2026) */ .hs-h1 .elementor-heading-title { font-family: var(--hs-serif); font-size: 60px; font-weight: 300; line-height: 70px; color: var(--hs-bordeaux); } /* Zeilenhoehe 1.28: Editor's Note hat im GESAMTEN Figma diesen Faktor — bei 40 px sind es 83 Vorkommen mit lh 51,2 und KEINE Ausnahme (gemessen 09.09.2026). Vorher stand 1.2 = 48 px. Die am 08.09. gebaute .hs-about nutzt bereits 51. */ .hs-h2 .elementor-heading-title { font-family: var(--hs-serif); font-size: 40px; font-weight: 300; line-height: 1.28; color: var(--hs-bordeaux); } /* 28 px statt 27 und Faktor 1.28: Figma zeigt Editor's Note 28/35,8 — 60 Vorkommen, ebenfalls ohne Ausnahme. Vorher 27 px / 1.25. (09.09.2026) */ .hs-h3 .elementor-heading-title { font-family: var(--hs-serif); font-size: 28px; font-weight: 300; line-height: 1.28; color: var(--hs-bordeaux); } /* 16.09.2026: dieselben Werte fuer TEXT-EDITOR-Widgets mit `hs-h3`. Die Regel darueber trifft nur `.elementor-heading-title`, also Ueberschriften. Die Painpoint-Zitate der Challenge-LP sind Text-Widgets (sie brauchen die typografischen Anfuehrungszeichen im Fliesstext) und fielen deshalb auf `.elementor-widget-text-editor` = 18/34 zurueck, obwohl `hs-h3` gesetzt war. Figma 938:148/159/169/179 sagt uebereinstimmend Editor's Note 28/35,8. Zeilenhoehe als PIXELWERT, nicht als Faktor - Lehre vom 12.09.2026. Spezifitaet (0,2,1) schlaegt `.elementor-widget-text-editor` (0,1,0). */ .hs-h3.elementor-widget-text-editor p { font-family: var(--hs-serif); font-size: 28px; font-weight: 300; line-height: 35.8px; color: var(--hs-bordeaux); } /* 16.09.2026: dasselbe fuer `hs-h2` auf TEXT-EDITOR-Widgets — Hannas Ansage (WhatsApp): „Wir sehen uns am 12. Oktober in der Challenge." und „Bis zum 12. Oktober – ich freu mich auf dich!" sollen in Editor's Note stehen, „so wie im letzten meeting auch fuer die anderen bitte-Seiten". 🔑 Warum es ueberhaupt Open Sans war: die Zeile MUSS ein Text-Widget sein, weil der Thrive-Shortcode fuer das Datum nur dort laeuft — im Ueberschriften- Widget erschiene er als sichtbarer Text. `.hs-h2 .elementor-heading-title` trifft aber nur Ueberschriften, also fiel die Zeile auf `.elementor-widget-text-editor` zurueck. Exakt dieselbe Falle wie oben bei `hs-h3` am selben Tag. Reichweite vor dem Einbau ueber die DATENBANK gezaehlt: genau **zwei** Elemente site-weit tragen `hs-h2` auf einem Text-Widget (10814/10815, beide `ab-h`). Die Regel greift damit automatisch auch fuer die noch zu bauenden Bitte/Danke-Seiten, die aus demselben Generator kommen. 🔴 DIESE REGEL SETZT NUR FAMILIE UND SCHNITT — bewusst KEINE Groesse und KEINE Farbe. Erster Anlauf hatte beides mitgesetzt (40/51,2 in Bordeaux) und damit die Zeile **unsichtbar** gemacht: sie steht auf dem Bordeaux-Band und war danach Bordeaux auf Bordeaux. Die Annahme, Elementors Inline-Werte wuerden gewinnen, war falsch — Elementor schreibt sie auf den CONTAINER (`.elementor-element- .elementor-widget-container`), diese Regel trifft das `p` direkt und ist dafuer spezifischer. 🔑 Lehre: eine Klassenregel, die auf `p` zielt, ueberschreibt die im Baukasten gesetzten Werte des Elements. Wer nur die Schriftart aendern will, aendert auch nur die Schriftart. */ .hs-h2.elementor-widget-text-editor p { font-family: var(--hs-serif); font-weight: 300; } @media (max-width: 1024px) { .hs-h1 .elementor-heading-title { font-size: 44px; line-height: 1.15; } } @media (max-width: 767px) { .hs-h1 .elementor-heading-title { font-size: 34px; line-height: 42px; } .hs-h2 .elementor-heading-title { font-size: 28px; } .hs-h3 .elementor-heading-title { font-size: 23px; } .hs-h3.elementor-widget-text-editor p { font-size: 23px; line-height: 29.4px; } } /* Fließtext – 18/34 ist der verifizierte Figma-Wert und zugleich die Vorgabe "große Schrift" für die Zielgruppe 50+. ACHTUNG, beide Selektoren sind nötig: Elementor 4 rendert mit "optimized markup" und lässt bei Text-Widgets sowohl den `.elementor-widget-container` als auch den umschließenden

weg — der Text sitzt dann direkt im Widget-Element. Ältere Versionen (und andere Widgets) haben den Wrapper weiterhin. Wer nur eines von beiden anspricht, stylt auf einer der beiden Seiten ins Leere, ohne dass es einen Fehler gibt. */ .hs-body, .hs-body .elementor-widget-container { font-family: var(--hs-sans); font-size: 18px; font-weight: 400; line-height: 34px; color: var(--hs-bordeaux); } .hs-body p:last-child { margin-bottom: 0; } /* Die Sektion "Ich bin Hanna Sacher" -- auf fuenf Seiten identisch gemeint. Figma 07.09.2026, Rahmen "About" auf drei Leinwaenden gemessen: LP Kurs Gesamt Gesicht 343:202 -- LP Challenge 938:341 -- LP Quiz 413:441 Ueberschrift Editor's Note 40 / w300 / Zeilenhoehe 51 / #FFFFFF Fliesstext Open Sans 18 / w400 / Zeilenhoehe 26 / #FFFFFF Die GROESSEN kommen aus .hs-h2 (40) und .hs-body (18); hier stehen nur die beiden ZEILENHOEHEN, die von den Standardwerten abweichen (.hs-h2 rechnet 1.2 = 48px, .hs-body setzt 34px). Bewusst eine eigene Klasse statt einer Aenderung an .hs-body: 18px-Text hat im Entwurf mehrere Zeilenhoehen (26x84, 30x38, 34x15, 28x14, 24x2) -- eine zentrale Umstellung wuerde Sektionen treffen, die richtig sind. */ .hs-about .hs-h2 .elementor-heading-title { line-height: 51px; } .hs-about .hs-body, .hs-about .hs-body .elementor-widget-container { line-height: 26px; } /* Kleinzeile als TEXT-Widget einfaerben. Die Regel darunter trifft nur `.elementor-heading-title` -- von 158 `hs-note` auf der Seite sind aber 151 Text-Widgets (gemessen 08.09.2026). Ohne eigene Farbe erben die Elementors Kit-Textfarbe und wirken schwarz (Chris zur VIP-Seite: "die Farbe ist schwarz"). 🔑 DIE STELLUNG IST HIER ENTSCHEIDEND, nicht nur die Spezifitaet: `.hs-on-dark .elementor-widget-text-editor` weiter unten hat dieselbe Gewichtung (0,2,0). Stand diese Regel DAHINTER, gewann sie und faerbte die Kleinzeilen auf dunklen Sektionen bordeaux statt weiss -- genau so am 08.09.2026 einmal passiert und im Browser aufgefallen. Deshalb VOR den Kontextschaltern, wie `.hs-body` es auch macht. Elementors Einzelfarben (0,3,0) bleiben unberuehrt -- die grauen Testimonial-Zitate auf 9790/9809 aendern sich dadurch nicht. */ .hs-note.elementor-widget-text-editor { color: var(--hs-bordeaux); } /* Kleingedruckte Zeile unter Buttons ("Kostenlos · In unter 3 Minuten · …") */ .hs-note .elementor-heading-title { font-family: var(--hs-sans); font-size: 14px; font-weight: 400; line-height: 20px; color: var(--hs-bordeaux); } /* ========================================================================== 5. Kontextschalter Auf einen Container gelegt, dreht .hs-on-dark alle Textfarben darin auf Weiß. Muss nach den Typo-Regeln stehen: gleiche Spezifität, späteres Vorkommen gewinnt. ========================================================================== */ .hs-on-dark .elementor-heading-title, .hs-on-dark .elementor-widget-text-editor, .hs-on-dark .elementor-widget-container, .hs-on-dark .hs-body, .hs-on-dark p, .hs-on-dark li { color: var(--hs-white); } .hs-on-dark .hs-eyebrow .elementor-heading-title { color: var(--hs-sand); } /* Der Modifier --mute steht weiter oben auf (0,2,0) und verliert gegen die Zeile darueber (0,3,0). Deshalb hier auf gleicher Spezifitaet und SPAETER nachgezogen. Gemessen, nicht vermutet: ohne diese Zeile blieb die Eyebrow Sand. (09.09.2026) */ .hs-on-dark .hs-eyebrow--mute .elementor-heading-title { color: var(--hs-eyebrow-mute); } /* Dieselbe Falle fuer --light: der Modifier stand auf (0,2,0) und verlor gegen die Sand-Zeile (0,3,0) - die Eyebrow der Erfolgsgeschichten rendete Sand, obwohl der Generator ausdruecklich `--light` setzt und Figma dort WEISS vorgibt (596:104 und 596:384; es sind die beiden einzigen weissen Eyebrows im ganzen Entwurf, sonst 14x Altrosa). Deshalb auf gleicher Spezifitaet und SPAETER nachgezogen. Sichtbare Reichweite: nur die Erfolgsgeschichten - die beiden anderen `--light`-Stellen (Bonus-Banner der Kursseiten) sind standardmaessig ausgeblendet, der Blog-Hero hat seine eigene Regel. (12.09.2026) */ .hs-on-dark .hs-eyebrow--light .elementor-heading-title { color: var(--hs-white); } /* ---- FAQ-Akkordeon (nativ, ohne Plugin-Abhaengigkeit) ---- */ .hs-faq .hs-faq__item{border-bottom:1px solid #D9C4B6;} .hs-faq .hs-faq__frage{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 0;font-family:'Open Sans',sans-serif;font-size:16px;font-weight:600;line-height:26px;color:#7A2742;} .hs-faq .hs-faq__frage::-webkit-details-marker{display:none;} .hs-faq .hs-faq__frage::after{content:'+';flex:0 0 auto;font-size:24px;font-weight:300;line-height:24px;color:#A23559;} .hs-faq .hs-faq__item[open] .hs-faq__frage::after{content:'\2212';} .hs-faq .hs-faq__antwort{padding:0 0 24px;font-size:14px;line-height:25px;} .hs-faq .hs-faq__antwort p{margin:0 0 14px;} .hs-faq .hs-faq__antwort p:last-child{margin-bottom:0;} .hs-faq .hs-faq__antwort ul{margin:0 0 14px;padding-left:20px;} .hs-faq .hs-faq__antwort li{margin-bottom:8px;} /* ---- Runde Bonus-Fotos ---- */ .hs-bonus-foto img{border-radius:50%;object-fit:cover;aspect-ratio:1/1;} /* ---- Hervorhebungen in Bewertungs-Karten ---- */ .hs-note mark,.hs-body mark{background:#F6DCDC;color:inherit;padding:0 2px;} /* Serifenlose Ueberschrift. Alle drei Groessenklassen (.hs-h1/-h2/-h3) sind Editor's Note; fuer Unterzeilen braucht es dieselbe Groesse in Open Sans. Additiv, aendert von sich aus nichts -- greift nur, wo die Klasse steht. Erste Verwendung: VIP-Aufzeichnungsseite 10864 (Chris, 08.09.2026). */ .hs-h--sans .elementor-heading-title { font-family: var(--hs-sans); font-weight: 400; } /* ---- Helle Karte in dunkler Sektion: Textfarbe zurueckdrehen ---- .hs-on-dark faerbt alles darin weiss. Karten, die selbst hell sind, muessen davon ausgenommen werden, sonst steht weisse Schrift auf Sand. ---- */ .hs-on-dark .hs-card:not(.hs-card--bordeaux), .hs-on-dark .hs-card:not(.hs-card--bordeaux) *{color:#7A2742;} .hs-on-dark .hs-card:not(.hs-card--bordeaux) .hs-eyebrow{color:#7A2742;} .hs-on-dark .hs-card:not(.hs-card--bordeaux) .hs-eyebrow--rose{color:#A23559;} /* Zeile 291 (`… .hs-card:not(…) *`) trifft das Ueberschriften-Element DIREKT mit (0,3,0) und schlaegt damit die Rose-Regel darueber, die nur den Wrapper einfaerbt. Figma gibt fuer die Garantie-Eyebrow ausdruecklich #A23559 vor -> gezielt nachziehen. */ .hs-on-dark .hs-card:not(.hs-card--bordeaux) .hs-eyebrow--rose .elementor-heading-title{color:var(--hs-rose);} /* ---- Presse-Logos auf einheitliche Hoehe ---- */ .hs-presse-logo img{height:38px;width:auto;max-width:100%;object-fit:contain;} /* ---- Gleich hohe Karten in einer Zeile ---- `hs-gleich` auf die ZEILE legen: alle Spalten strecken sich auf die Hoehe der hoechsten, die Karte darin fuellt die Spalte. Kein `height:100%` auf der Spalte - eine feste Hoehe gegen einen Elternteil ohne definierte Hoehe hebelt `align-self:stretch` aus und die Spalte faellt auf Inhaltshoehe zurueck. ---- */ .hs-gleich > .e-con{align-self:stretch;} .hs-gleich > .e-con > .e-con{height:100%;} /* 🔴 `hs-gleich` streckt die SPALTE - nicht aber Elementors Widget-Huelle darin. Steht in der Spalte ein HTML-Widget statt eines Containers, bleibt es auf Inhaltshoehe stehen und die Karte endet ueber der Spaltenkante (gemessen 15.09.2026 auf der Ueber-Mich-Seite: Spalte 697, Widget 674 - 23 px Luft unter der weissen Flaeche). Bis dahin verdeckt, weil `.hs-pv` eine `min-height` hatte, auf die alle Karten fielen. ⚠️ Bewusst als EIGENE Klasse und nicht an `.hs-gleich`: die steckt 21x in fuenf Seiten - eine Aenderung dort trifft vier fertige Seiten ungeprueft. Die anderen Seiten sind auf denselben Fall noch zu pruefen. */ .hs-pvreihe > .e-con > .elementor-widget-html, .hs-pvreihe > .e-con > .elementor-widget-html > .elementor-widget-container { height: 100%; } /* ---- Stapel: Icon/Foto liegt AUF der Kartenkante ---- Ohne z-index malt die spaeter folgende Flaeche ueber das Icon - es sieht aus, als saesse das Icon hinter der Karte. ---- */ .hs-stapel{display:flex;flex-direction:column;height:100%;} .hs-stapel__vorn{position:relative;z-index:2;flex:0 0 auto;} .hs-stapel__flaeche{position:relative;z-index:1;} /* Elementor setzt flex-grow je Container mit gleicher Spezifitaet - ohne !important faellt die Flaeche auf Inhaltshoehe zurueck. */ .hs-stapel > .hs-stapel__flaeche{flex-grow:1 !important;} /* Runde Bonus-Fotos */ .hs-bonus-foto img{border-radius:50%;object-fit:cover;aspect-ratio:1/1;} /* ---- Formular (Warteliste) ---- */ /* 16.09.2026 auf Figma gezogen (Chris' Freigabe): die Eintragefelder sind im Entwurf 415 px breit (938:374/375 und 938:327/328, je x 835 w 415), gebaut waren sie 458 - die alte Grenze von 520 px liess sie einfach die Spalte fuellen. Die Challenge-LP ist laut Bestandsaufnahme der Massstab fuer alle Eintrageformulare, deshalb hier zentral und nicht seitenweise. 🔴 NACHTRAG, selber Tag (Chris' Fund): 415 hart gesetzt war zu eng. Unsere Knopftexte sind laenger als Figmas "Meinen Platz jetzt sichern - kostenlos" (339 px) - sie kommen aus Notion. Gemessen auf der Anmeldeseite: "MEINEN PLATZ JETZT SICHERN - FUER 0 EUR KOSTENLOS" braucht 459 "JA, ICH MOECHTE IN 5 TAGEN ECHTE EFFEKTE SEHEN!" braucht 453 Bei 415 stand das letzte Wort halb ausserhalb des Knopfes. Die Warteliste ("AUF DIE WARTELISTE - KOSTENLOS") passt dagegen. Deshalb KEINE feste Breite je Seite, sondern eine Regel, die sich selbst einstellt: `width: max-content` macht das Formular so breit wie sein breitestes Kind - also wie der Knopf -, `min-width` haelt Figmas 415 als Untergrenze, `max-width: 100%` verhindert, dass es aus der Spalte laeuft. Kurzer Knopftext -> 415 wie im Entwurf. Langer -> genau so breit wie noetig. Damit braucht keine weitere Seite mit langem Knopftext eine Sonderregel. */ .hs-form{display:flex;flex-direction:column;gap:6px;width:max-content;min-width:min(415px,100%);max-width:100%;margin:0 auto;text-align:left;} /* 🔴 16.09.2026 (Chris' Fund): Formular und die Aufzaehlung darunter ("Für 0 € – keine versteckten Kosten." …) standen auf verschiedenen linken Kanten. Das Formular ist zentriert und nur so breit wie sein Knopf, die Aufzaehlung fuellte die ganze 48%-Spalte und begann dadurch weiter links. Der Generator legt beide jetzt in EINE `.hs-formbox`. Diese Box traegt die Breite - so breit wie ihr breitestes Kind, also wie der Knopf, mindestens Figmas 415 px -, und beide Kinder fuellen sie zu 100 %. Damit liegen Felder, Knopf und Aufzaehlung zwangslaeufig auf derselben linken Kante, unabhaengig von der Laenge des Knopftextes. Doppelte Klasse gegen Elementors `.e-con{width:100%}` (0,1,0). */ .hs-formbox.hs-formbox { width: max-content; min-width: min(415px, 100%); max-width: 100%; margin-inline: auto; } /* Innerhalb der Box gibt die Box das Mass vor, nicht mehr das Formular. */ .hs-formbox .hs-form { width: 100%; min-width: 0; } /* --- Die Aufzaehlung auf die Kante des Formulars (20.09.2026) ------------- Chris, nachdem die drei Punkte ueber das Formular gewandert waren: sie sollen „linksbuendig mit dem Eintrageformular" stehen. GEMESSEN (1440 px), linke Kanten in der `.hs-formbox`: Label / Eingabefeld / Knopf 799 (rel 0) `li` der Aufzaehlung 839 (rel 40) <- 40 px zu weit rechts Ursache: der Browser-Standard `ul { padding-left: 40px }`, in dem die Aufzaehlungspunkte gezeichnet werden (`list-style-position: outside`). 🔑 Der Einzug laesst sich nicht einfach auf 0 setzen, ohne die Punkte zu verlieren: bei `outside` wuerden sie links aus der Box ragen, bei `inside` rutscht der TEXT um die Punktbreite nach rechts. Deshalb Punkte aus und ein eigener Punkt im Textfluss — so beginnt die Zeile exakt auf der Formularkante. ⚠️ Das Figma kennt diese Aufzaehlung gar nicht (die CTA-Rahmen fuehren nur Ueberschrift, Datumszeile, Felder und Knopf) — sie kommt aus Notion. Es gibt hier also keine Entwurfsvorgabe, an der man sich ausrichten koennte. */ .hs-formbox .hs-body ul { list-style: none; padding-left: 0; margin: 0; } .hs-formbox .hs-body li { padding-left: 0; } .hs-formbox .hs-body li::before { content: "•"; margin-right: 8px; } .hs-form__label{font-family:'Open Sans',sans-serif;font-size:13px;font-weight:600;color:#7A2742;margin-top:10px;} /* Feldhoehe 46 statt 52 (16.09.2026, Figma 938:374 h=46): 10 Polster oben + 24 Zeilenhoehe + 10 unten + 2 Rahmen = 46. */ .hs-form__feld{font-family:'Open Sans',sans-serif;font-size:15px;line-height:24px;color:#7A2742;background:#FFFFFF;border:1px solid #DDB2A5;border-radius:0;padding:10px 16px;width:100%;} .hs-form__feld::placeholder{color:#B79A92;} .hs-form__feld:focus{outline:none;border-color:#A23559;} .hs-form__btn{margin-top:20px;font-family:'Open Sans',sans-serif;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#FFFFFF;background:#A23559;border:0;border-radius:0;padding:16px 28px;cursor:pointer;} .hs-form__btn:hover{background:#7A2742;} .hs-form__notiz{margin-top:14px;font-family:'Open Sans',sans-serif;font-size:12px;line-height:18px;color:#A23559;background:#F6DCDC;padding:10px 12px;} /* ========================================================================== 6. Erfolgsgeschichten – Story-Karten -------------------------------------------------------------------------- Der Figma-Entwurf (Node 596:2) ist ein MUSTER: Er zeigt zwei Sektionen, den Einschub, den Zwischen-CTA und die Masse-Sektion. Die uebrigen acht Einwand-Sektionen folgen demselben Aufbau. Gemessene Werte aus dem Render: Karte 1240 px breit, Innenabstand 40, Bildspalte 730, Spalte 50, Text 380. Fotovergleich-Karte 308 px hoch, Video-Karte 522 px. Bild links / rechts wechselt zeilenweise. Das macht der Generator ueber die REIHENFOLGE der Spalten, nicht ueber `flex-direction: row-reverse` – so stimmt auch die Vorlese- und Tab-Reihenfolge mit dem Gesehenen ueberein. ========================================================================== */ /* Name ueber einem Fotovergleich: Editor's Note, wie auf allen anderen Seiten */ .hs-story__name .elementor-heading-title { /* 🔴 24.09.2026 UMGESTELLT - der offene Punkt von oben ist entschieden. Hier stand bis dahin Figmas Open Sans Bold 15px/uppercase/ls 1,5 mit dem Vermerk: "Hanna wuenschte im Call Editor's Note; in 15px traegt diese Schrift aber nicht ... Chris hat am 05.09.2026 entschieden: hier gilt Figma. BEI HANNA GEGENPRUEFEN." Hanna hat gegengeprueft (Notion, 17.09.2026): "Vorname ebenfalls wieder wie ueberall einheitlich in Editors Note." und an anderer Stelle "gefaellt mir gut in Editors note!". Damit gilt die seitenuebergreifende Namensregel auch hier. 🔑 Die Werte sind die verbindliche Rezeptur, live von der Startseite 9637 abgelesen und seit dem 21.09. auf der Quiz-LP im Einsatz: Editor's Note 40/51,2, w300, ls 0, text-transform none, #7A2742. ⚠️ `text-transform` und `letter-spacing` muessen AUSDRUECKLICH zurueck- gesetzt werden - sonst blieben die Versalien und die Sperrung stehen. ⚠️ Die Klasse laeuft ausschliesslich auf 10167 (geprueft am 24.09.2026, ebenso `hs-story__person` und `hs-pls`) - deshalb hier im CSS und nicht als Eigenwert an 55 einzelnen Widgets. */ font-family: var(--hs-serif); font-size: 40px; font-weight: 300; text-transform: none; letter-spacing: 0; line-height: 51.2px; color: var(--hs-bordeaux); } /* Kurzes Zitat neben einem Fotovergleich */ .hs-story__zitat, .hs-story__zitat .elementor-widget-container { font-family: var(--hs-sans); font-size: 18px; /* 🔴 24.09.2026: `font-style: italic` ENTFERNT. Hanna (Notion, 17.09.): "Auf den anderen Seiten haben wir Zitate oder Gedankengaenge in kursiv und das moechte ich auch so beibehalten. Bei DIESER Seite, wo ja fast der gesamte Fliesstext bei den Testimonials Zitate sind, finde ich es leserlicher, nicht kursiv zu machen, sondern Standard und dafuer die Fettungen." Chris hat dasselbe unabhaengig angesagt. ⚠️ Das Kursiv kam aus DIESER Klasse, nicht aus `` im Text - im Generator gibt es kein einziges ``. Wer es im Markup sucht, findet nichts. Die Klasse laeuft nur auf 10167. */ font-style: normal; line-height: 30px; color: var(--hs-bordeaux); } .hs-story__zitat p:last-child { margin-bottom: 0; } /* Name ueber einem Video-Testimonial: gross und in Serif */ .hs-story__person .elementor-heading-title { font-family: var(--hs-serif); /* Figma (Erfolgsgeschichten): Editor's Note 40px #7A2742 - vorher 36px und Rose, was weder dem Entwurf noch Hannas Regel entsprach (04.09.2026). */ font-size: 40px; font-weight: 300; /* Figma 596:420 / 596:434 / 603:451: lh 51,2 px = 1,28 x 40 (Editor's-Note-Regel). 1,15 ergab 46 px. (12.09.2026) */ line-height: 51.2px; color: var(--hs-bordeaux); } /* ---- Kleine Serifen-Überschrift 24/30,72 ---- Eigener Figma-Stil, NICHT eine Ausnahme von `.hs-h3`: Editor's Note 24 px kommt **11x sichtbar** im Entwurf vor — 6x auf der Presse-Seite (Artikel- und Podcast-Titel) und 5x auf Über Mich (Timeline-Kartentitel). `.hs-h3` bleibt davon unberührt: dessen 28/35,8 sind mit 52 Vorkommen ebenso eindeutig belegt. Gezählt am 15.09.2026 über alle sichtbaren Knoten. Über Mich nutzt dafür die eigene `.hs-tl__titel`; die bleibt, weil die Seite fertig ist — diese Klasse hier ist die neutrale Fassung für alle anderen. */ .hs-h4 .elementor-heading-title { font-family: var(--hs-serif); font-size: 24px; font-weight: 300; line-height: 30.72px; color: var(--hs-bordeaux); } /* ---- Anrisstext 14/22 ---- Figma Presse 633:309 (Print) — die drei Artikel-Anrisse stehen auf Open Sans 14/22, nicht auf den 18/34 von `.hs-body`. Eigene Klasse statt einer Schriftgröße am Widget, damit eine spätere zentrale Korrektur sie erreicht. */ .hs-anriss, .hs-anriss .elementor-widget-container, .hs-anriss p { font-family: var(--hs-sans); font-size: 14px; line-height: 22px; color: var(--hs-bordeaux); } /* Problem / Loesung / Ergebnis. Die Beschriftung steht als am Absatzanfang und wird per display:block zur eigenen Zeile – so bleibt das HTML ein normaler Absatz und der Text haengt nicht an einer Listenstruktur. */ .hs-pls, .hs-pls .elementor-widget-container { font-family: var(--hs-sans); font-size: 14px; line-height: 22px; color: var(--hs-bordeaux); } .hs-pls p { margin: 0 0 20px; } .hs-pls p:last-child { margin-bottom: 0; } /* 🔴 24.09.2026: `display:block` + `uppercase` hier ENTFERNT. Die Regel galt JEDEM im Block - richtig nur, solange dort ausschliesslich die Beschriftungen fett standen. Seit Hannas Notion-Fettungen stehen auch Fettungen mitten im Satz dort, und jede riss den Absatz zu einer eigenen Versalzeile auf (Chris hat es gefunden: Barbara, Eveline, Rosemarie ...). ➜ Die Beschriftung traegt jetzt `hs-vnlabel` (16.x unten, gleiche Werte: 14 px / w700 / uppercase / block / 2 px) - gesetzt im Generator `erfolgsgeschichten.py`, `_pls_labels`. Hier bleibt nur die Fettung. Figma 596:412: Zeichen-Override auf 14 px, nur `fontWeight: 700`. */ .hs-pls strong { font-weight: 700; } /* P/L/E auf einer BILD-Karte (Screenshot statt Video: Sabine, Manuela) - 24.09.2026. Figma hat 14/22 nur fuer die Videokarte (`596:412`, Name 40 px Editor's Note). Eine Karte mit kleinem Versal-Namen + Bild ist dort eine Fotokarte, Text **18/30** (`596:393`) - wie `.hs-story__zitat`. Vorher stand Sabines Text neben Cocos Zitat sichtbar kleiner (Chris). Die Beschriftungen (`hs-vnlabel`, 14 px) bleiben - wie in den Zitat-Karten. */ .hs-pls--bild, .hs-pls--bild .elementor-widget-container { font-size: 18px; line-height: 30px; } /* Ankerlink unter einem Zitat ("Ich will auch solche Ergebnisse") */ .hs-story__link a { font-family: var(--hs-sans); /* Figma 596:247: Open Sans 14 / 30, w700. Vorher 15 px / w600 und die Zeilenhoehe fehlte ganz - sie kam mit 34 px aus der Grundschrift. Die Unterstreichung ist unsere Zutat (Figma zeigt keine), sie bleibt, weil der Link sonst nicht als Link zu erkennen waere. (12.09.2026) */ font-size: 14px; font-weight: 700; line-height: 30px; color: var(--hs-bordeaux); text-decoration: underline; text-underline-offset: 4px; } .hs-story__link a:hover { color: var(--hs-rose); } /* 16:9-Einbettung ohne Plugin-Abhaengigkeit. Die Flaeche traegt schon vor dem Laden die Sandfarbe, damit an der Stelle kein weisses Loch steht – und `aspect-ratio` reserviert die Hoehe, sodass Sprungmarken weiter unten nicht durch Nachladen verrutschen. */ /* 🔴 Ein HTML-Widget braucht eine DEFINITE Breite, sonst kollabiert seine Hoehe auf 0. Gefunden am 12.09.2026 durch Chris' Handy-Screenshot: die Videos lagen MOBIL ueber dem Text. Ursache gemessen, nicht vermutet: Spalte (Flex) -> HTML-Widget (Hoehe 0) -> .hs-video (Hoehe 161, korrekt) `offsetHeight` des Widgets war 0, `scrollHeight` 161 - der Inhalt ragte also heraus. Grund: Wenn ein Flex-Container die Hoehe seines Kindes ermittelt, rechnet er mit UNBESTIMMTER Breite. `.hs-video { width: 100% }` ist dann ebenfalls unbestimmt, `aspect-ratio` kann keine Hoehe ableiten und das Widget traegt 0 bei. Auf dem Desktop faellt es nicht auf, weil die Spalte dort 62 % breit ist. Sieben Kandidaten durchgemessen; nur eine definite Breite am Widget wirkt (padding-top-Prozent, container-queries, flex-shrink, flow-root, display:grid halfen alle NICHT - Prozentwerte scheitern an derselben unbestimmten Breite). Das Starterset war als einziges heil: dort steht `hs-video` direkt AM Widget. Reichweite gemessen: bei 1440 und 768 px aendert die Regel NICHTS (0 von 34 Widgets). Bei 375 px korrigiert sie Erfolgsgeschichten 34/34, Challenge 4/5 (zwei Bewertungsgitter standen sogar auf Breite 0) und die Aufzeichnungen 1/1. Breiten und x-Positionen bleiben ueberall gleich - nur Hoehen werden richtig. */ .elementor-widget-html { width: 100%; } .hs-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #E4D3C8; } .hs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Auf dem Handy stapeln die Spalten. Steht das Bild im Entwurf rechts, kaeme es dabei UNTER den Text – bei einem Vorher-Nachher-Vergleich ist das die falsche Reihenfolge. `column-reverse` dreht nur die Darstellung, nicht das Markup. Das !important ist noetig, weil Elementor `flex-direction` je Container mit gleicher Spezifitaet setzt. */ @media (max-width: 767px) { .hs-story--bildrechts { flex-direction: column-reverse !important; } } /* Bewertungs-Screenshots packen statt rastern. Die Screenshots sind sehr unterschiedlich hoch (600x500 bis 600x900). In einem starren Spaltenraster richtet sich jede Zeile nach dem hoechsten Bild und darunter klaffen Luecken. `columns` fuellt stattdessen von oben nach unten auf. `break-inside: avoid` verhindert, dass ein Screenshot zwischen zwei Spalten zerschnitten wird. */ .hs-ssgitter { column-count: 3; column-gap: 24px; } .hs-ssgitter img { display: block; width: 100%; height: auto; margin: 0 0 24px; break-inside: avoid; } @media (max-width: 1024px) { .hs-ssgitter { column-count: 2; } } @media (max-width: 600px) { .hs-ssgitter { column-count: 1; } } /* Hero mit Foto: auf dem Handy Text ueber Bild lesbar halten. Auf dem Desktop steht der Text in der leeren Wandflaeche links neben Hanna. Auf 375 px bleibt dafuer kein Platz - `cover` zeigt dort fast nur noch sie, und der Text lag ohne diese Flaeche mitten im Motiv. Die Flaeche liegt UNTER dem Inhalt (::before + z-index), damit das Foto sichtbar bleibt und nur der Kontrast steigt. */ .hs-hero-foto { position: relative; } @media (max-width: 767px) { .hs-hero-foto::before { content: ""; position: absolute; inset: 0; background: rgba(247, 235, 227, .78); pointer-events: none; } /* Heroes mit EIGENEM mobilen Bild brauchen GAR KEINEN Schleier. Dort steht der Text auf eigens freigeraeumter Wandflaeche und Hanna sitzt darunter — der Schleier wuerde nur SIE aufhellen. 🔑 Geschichte dieser Regel: am 15.09.2026 als VERLAUF angelegt (oben voll, ab 64 % frei), dann nicht benutzt, weil der Hero auf „Hanna hinter dem Text" umgebaut wurde. Am 19.09.2026 wieder in Betrieb — diesmal ganz ohne Schleier, auf Hannas Vorgabe: *„hinter dem bordeauxfarbenen Text soll dieses Beige zu sehen sein, so wie rechts auf dem Desktop."* Auf dem Desktop liegt dort kein Schleier; mobil jetzt auch nicht mehr. GERECHNET: Bordeaux #7A2742 auf der Wand (223, 205, 190) = **6,20 : 1** — deutlich ueber AA (4,5). Der Schleier war fuer Lesbarkeit also ohnehin nicht noetig, sobald der Text nicht mehr auf dem Motiv liegt. ⚠️ Doppelte Klasse, weil die Regel darueber dieselbe Gewichtung (0,1,0) hat — ein einfacher Modifier waere gesetzt und wirkungslos. ⚠️ Gilt NUR fuer Heroes mit dieser Klasse. `.hs-hero-foto` steht auf drei Seiten (Erfolgsgeschichten, Starterset, Stirnfalten-Check); die anderen beiden behalten ihren flaechigen Schleier. */ .hs-hero-foto.hs-hero-foto--eigenmobil::before { background: none; } .hs-hero-foto > * { position: relative; z-index: 1; } } /* --- Feste Zeilenbreite darf nie über den Viewport hinausragen ------------- Die Hero-Zeilen tragen `width: 1240px` (Starterset, Stirnfalten-Check, Challenge-LP, Challenge-Warteliste). Elementor setzt das als feste Breite OHNE `max-width` — bei Fenstern zwischen 768 und 1240 px schiebt die Zeile die Seite waagerecht auf. Gemessen 15.09.2026 bei 1009 px: Überstand 115 px auf allen vier Seiten, die Seite ließ sich seitlich scrollen. `max-width: 100%` lässt die Zeile ab da mitschrumpfen; die Spalten stehen ohnehin prozentual (46/54) und stauchen sauber. */ .hs-hero-foto > .e-con, .hs-hero-dunkel > .e-con, .elementor .e-con.hs-breitfest { max-width: 100%; } /* `hs-breitfest` ist für jeden Container gedacht, der aus dem Entwurf eine feste Pixelbreite mitbringt. Elementors eigenes `max_width` am Container wird nicht ausgespielt (15.09.2026 geprüft: `max-width` blieb `none`), deshalb über die Klasse. Offen stehen noch: `ga-box` (1030 px, vier Kursseiten) und `jd-foto` (1000 px, Quiz-LP). */ /* --- Hero mit GANZER Figur (15.09.2026) ------------------------------------- Chris: *„da haben wir ja das Bild, wo sie steht, und da sollte sie dann schon in der Gaenze auch zu sehen sein."* Auf dem Stirnfalten-Check war sie ab dem Knie ab. Warum eine feste Hoehe das nicht kann: `cover` skaliert auf die BREITE. Hannas Hoehe am Schirm ist 866/2200 x Fensterbreite = 0,394 x W — bei 1920 px also 756 px. In einen 640 px hohen Hero passt sie nur bis 1626 px Fensterbreite. Die Herohoehe muss also MITWACHSEN. Gerechnet (Bild 2200x1133, Hanna y154..1020, Ausschnitt 60 % von oben): Fenster Hero Luft ueber Kopf Luft unter den Fuessen 1440 640 40 px 33 px 1920 826 36 px 34 px 2560 1101 48 px 44 px 3440 1479 66 px 64 px `max(640px, …)` haelt die untere Grenze, damit der Hero auf schmalen Desktops nicht flach zusammenfaellt. Nur ab 768 px — darunter gilt die eigene mobile Hoehe aus dem Generator. */ @media (min-width: 768px) { .hs-hero-foto.hs-hero-foto--ganzfigur { min-height: max(640px, 43vw);} /* Starterset: anderes Bild, anderer Wert. Dort SITZT Hanna und reicht bis an die Unterkante (y212..1132 von 1133) — ein Ausschnitt wie beim Stirnfalten-Check wuerde sie immer anschneiden. Das Bild ist deshalb auf 2200x990 gebracht (oben 143 px leere Wand weg). 990/2200 = 45 %, also traegt 45vw es bei JEDER Breite ohne senkrechten Beschnitt — gemessen 0 px bei 1280/1440/1920/2560. Ueber ihrem Kopf bleiben 70 px (7,1 %). Chris, 15.09.2026: „die Groesse vom Hero-Bereich finde ich ja fast gut … aber dann muesste das Bild entsprechend angepasst werden." */ .hs-hero-foto.hs-hero-foto--ganzfigur45 { min-height: max(640px, 45vw);} } /* Kurs-Hero Gesamt Gesicht (9790/9809) — 16.09.2026, Chris' Befund: „das Bild von Hanna ist im Figma komplett zu sehen, also auch die Fuesse, und auf unseren Seiten sind sie abgeschnitten." Dieselbe Rechnung wie bei `--ganzfigur45`, nur mit den Massen DIESES Bildes: `kurs-header.webp` ist **2200 x 1133** → 1133/2200 = **51,5 %**. Damit traegt `51.5vw` den Hero bei JEDER Breite ohne senkrechten Beschnitt. Vorher stand im Generator eine feste `min-height: 720`: bei 1440 px ergab das einen Kasten von 2,0 gegen ein Bildverhaeltnis von 1,942 — gemessen wurden rund 12 px unten weggeschnitten, und genau dort stehen ihre Fuesse. `max(640px, …)` haelt die Untergrenze auf schmalen Desktops, wie bei den anderen beiden Varianten. Nur ab 768 px — darunter gilt der eigene mobile Zuschnitt aus dem Generator. ⚠️ Eine eigene Klasse statt `hs-hero-foto`: die traegt einen ::before-Verlauf, und dieser Hero hat bereits sein eigenes Overlay (Figmas #3B2C24 @ 45 %). */ @media (min-width: 768px) { .hs-hero-kurs { min-height: max(640px, 51.5vw); } } /* Hero der Kursseite „Stirn & Augen" (10806/10807). 🔴 16.09.2026 — bis heute stand im Generator, fuer diese Seite gebe Figma nichts vor, die Leinwand enthalte „nur den Header". Das war eine Wortverwechslung: die Leinwand heisst „LP Stirn + Augen Kurs **Header**" (Node 1143:24) und mit „Header" ist dort der **Hero** gemeint, nicht das Menueband. Sie ist das EINZIGE eigene Design dieser Seite — alles andere erbt sie von der Kursseite Gesamt Gesicht. 🔑 Sprachregelung ab jetzt (Chris, 16.09.2026): **Header = Menueband oben (Template 9750), Hero = der erste Inhaltsbereich darunter.** Hannas Notion und dieses Figma nennen den Hero „Header" — das ist IHRE Beschriftung. Figma-Sollwerte bei 1440: Hero 778 hoch (davon 80 Menueband), Flaeche #F3E3D7, Foto `VND04898-1v_bearb` **ohne Schleier**, Text Bordeaux. Das Foto liegt dort 1510 breit bei x -53, also 4,9 % breiter als das Fenster. 778/1440 = **54vw**; das Bildverhaeltnis 1,941 ergibt bei dieser Hoehe genau die 1510 — senkrecht wird nichts beschnitten, waagerecht konstant 4,9 % bei jeder Breite. ⚠️ Damit weicht diese Klasse bewusst von der Register-Regel „vw = Bildhoehe/Bildbreite" (= 51,5) ab: Figma zoomt das Foto absichtlich. Gegengeprueft am Figma-Render selbst — von Hanna faellt dabei nichts weg, ihr Arm ist schon im Originalfoto oben angeschnitten. Nur ab 768 px; darunter traegt der eigene mobile Aufbau (Text auf Wand, Foto als eigener Block darunter). 🔴 16.09.2026, Chris' Befund + Screenshot: „der Hero ist bei mir viel zu gross, Hanna riesig, ganz grosser Freiraum oben, unter dem Knopf sehe ich den Text gar nicht mehr." Ursache gemessen: sein Fenster ist **1930 px breit, aber nur rund 830 px hoch sichtbar** (zwei Lesezeichenleisten + WP-Adminleiste). 54vw davon sind **1042 px** — 212 mehr, als er sehen kann. Der Textblock ist in diesen 1042 px zentriert, also steht oben Leere und unten faellt die Kleinzeile unter die Kante. 🔑 **Mein Messfehler: nur die BREITE variiert (1440/1920/2560), die Hoehe immer grosszuegig gelassen.** Eine Hoehe in `vw` muss gegen die FENSTERHOEHE geprueft werden — sonst waechst sie auf breiten, flachen Fenstern aus dem Bild. Das ist derselbe Denkfehler wie am Vormittag in Eintrag (12), nur um 90 Grad gedreht. Deshalb der Deckel `min(54vw, 100svh - 80px)`: bis 1440 px aendert er nichts (778 < verfuegbare Hoehe), darueber haelt er den Hero im sichtbaren Bereich. `svh` = die WIRKLICH sichtbare Hoehe; `vh` steht als Rueckfallebene davor. Wird gedeckelt, beschneidet `cover` senkrecht — `background-position` haelt den Ausschnitt oben, damit Hannas Kopf bleibt und unten der Hocker faellt. */ @media (min-width: 768px) { .hs-hero-sa { min-height: max(640px, min(54vw, calc(100vh - 80px))); } .hs-hero-sa { min-height: max(640px, min(54vw, calc(100svh - 80px))); } } /* Erfolgsgeschichten-Hero: Textblock 100 px in das 1240er-Raster eingerueckt. Figma (Gruppe 853:28) setzt Eyebrow/H1/Unterzeile auf x 200 bei 805 px Breite - also genau so eingerueckt wie der Text jeder anderen Sektion dieser Seite (Figma x 202 <-> live x 193). Der Hero war der einzige Ausreisser und begann bei x 100. Die 65 % Breite stehen im Generator, der Einzug hier. ⚠️ NUR ab 1440 px. Darunter schrumpft der 1240er-Kasten, Hanna wandert im `cover`-Zuschnitt nach links, und der Einzug schoebe den Text in sie hinein. Gemessen (Motivkante gegen Textblockende): 1440 -> 60 px Luft, 1366 -> 40, 1280 -> 17, 1200 -> -5. Ohne Einzug bleibt es bis 1025 px positiv (15 px) - und damit besser als der Zustand vor dem 12.09., der ab 1030 px kollidierte. Doppelte Klasse fuer (0,2,0), damit Elementors eigene Container-CSS nicht gewinnt. */ .hs-hero-eg__text.hs-hero-eg__text { margin-left: 0; } @media (min-width: 1440px) { .hs-hero-eg__text.hs-hero-eg__text { margin-left: 100px; } } /* ========================================================================== 11. Timeline (Ueber-Mich-Seite) -------------------------------------------------------------------------- Gemessen aus Figma J9qdZkXLLrroqEaKG6ir2I, Node 280:17 (1440 x 12000): Mittellinie x720 (2 px), Raute 18 px Bounding-Box (= 13 px Quadrat, 45 gedreht), Karte 500 breit, Innenabstand 24, linke Karte 168..667, rechte 773..1289. Der Entwurf zeigt nur fuenf Stationen - er ist ein Muster, kein Vollbild. Gebaut werden alle 17 Stationen aus Notion. Warum die Karten als HTML-Widget und nicht als Elementor-Container: 17 Stationen mit Fotogruppe, Titel, Teaser und Aufklapp-Text waeren rund 200 Container. Die durchgehende Linie braucht ausserdem EIN Elternelement mit ::before - in einer Kette von Elementor-Containern ginge sie an jeder Widget-Huelle verloren. Dieselbe Entscheidung wie bei `.hs-ssgitter`. ========================================================================== */ /* Figma 280:311 setzt den Einleitungstext auf **955 px**, nicht auf die vollen 1240 des Rasters. Bei 18 px waeren das sonst rund 130 Zeichen je Zeile. */ /* ⚠️ Elementor haelt hier `.e-con.e-con > .e-con-inner > .elementor-widget { max-width: 100% }` aus `frontend.min.css` dagegen - das sind **(0,4,0)**. Eine verdoppelte Klasse (0,3,0) verliert. Deshalb ihre Struktur nachgebaut: (0,5,0). Gemessen am 15.09.2026, nachdem die verdoppelte Fassung wirkungslos blieb. */ .hs-tl-kopf.hs-tl-kopf > .e-con-inner > .hs-body.hs-body, .hs-tl-kopf.hs-tl-kopf > .e-con-inner > .hs-note.hs-note, .hs-tl-kopf.hs-tl-kopf > .hs-body.hs-body, .hs-tl-kopf.hs-tl-kopf > .hs-note.hs-note { max-width: 955px; margin-inline: auto; } .hs-tl { position: relative; } /* Die Linie laeuft von der ersten Raute bis zum Sektionsende durch und wird im Rose-Band von `.hs-band-anschluss` in Weiss fortgesetzt (so im Entwurf). FARBE: **bordeaux**, nicht rose - im Render gemessen (122,39,66 bei x720). Stand bis 31.08. faelschlich auf Rose. */ /* ⚠️ Die Hoehe MUSS explizit stehen. `.hs-tl` ist selbst ein `.e-con`, und Elementor hat auf `.e-con::before` eine eigene Regel mit `height: 100%` (fuer Hintergrund-Overlays). Die schlaegt ein `bottom: -90px` — gemessen: ein identisch gestyltes Testelement wurde 8513 px hoch, das Pseudo-Element nur 8423, also exakt Containerhoehe. Sichtbar war das als **Luecke zwischen Linienende und Rose-Band**: die Linie hoerte an der letzten Karte auf, obwohl sie im Entwurf bis an die Bandkante durchlaeuft (dort im Figma bordeaux bis y3762, erst IM Band weiss). */ .elementor .e-con.hs-tl::before { content: ""; position: absolute; left: 50%; top: 0; height: calc(100% + var(--hs-section-space)); width: 2px; margin-left: -1px; background: var(--hs-bordeaux); } /* Elementor haengt jedes Widget in einen eigenen Wrapper. Ohne diese Zeile waeren die Zeilen nur so breit wie ihr Inhalt und die Ausrichtung bricht. */ /* Warum ein FESTER Rhythmus und kein variabler Zug: Chris am 31.08.: "der Abstand zwischen den einzelnen Boxen ist zu gross. Der ist auch unterschiedlich gross. Das sieht nicht gut aus." Ein negativer Zug (`margin-block-start: -Z`) macht den Versatz abhaengig von der Kartenhoehe: Versatz = Blockhoehe - Z. Bei Bloecken von 558 bis 906 waren das 358 bis 706 px - eben ungleichmaessig. Jetzt bekommt jede Station eine **feste Hoehe A**. Die Karte darf nach unten herausragen; das ist unschaedlich, weil die naechste Station auf der anderen Seite steht. Damit gilt: Versatz zur Vorstation (andere Seite) = A (immer gleich) Luecke zur Vorvorstation (gleiche Seite) = 2A - Blockhoehe Die zweite Bedingung bindet A an die HOECHSTE Karte: A >= (hoechster Block + gewuenschte Luecke) / 2 Gewaehlt: **A = 400**. Zwei Dinge haben das moeglich gemacht: - die 3-Stufen-Formel-Station stellte zwei Grafiken uebereinander (906 px) und hat damit den Rhythmus diktiert; sie stehen jetzt NEBENEINANDER (592 px) - die Jahreszahl liegt seit 31.08. AUF der Kartenoberkante statt darueber (so das Figma), der Block ist damit 52 px kuerzer Kartenhoehen 506..656, also: Versatz durchgehend **400**, Luecke auf derselben Seite **144..294 px**. ⚠️ Waechst eine Karte ueber 680 px, wird die Luecke auf derselben Seite zu eng. Dann A neu rechnen oder die Karte entlasten. ⚠️ `pointer-events`: die Station ragt ueber die naechste hinweg. Ohne die Ausnahme unten faengt sie deren Klicks ab. */ .elementor .e-con.hs-tl { display: flow-root; } .hs-tl__seite { width: 100%; height: auto; pointer-events: none; } .hs-tl__spalte { position: relative; pointer-events: auto; width: calc(50% - 53px); max-width: 500px; } .hs-tl__seite--links .hs-tl__spalte { margin-left: auto; margin-right: calc(50% + 53px); } .hs-tl__seite--rechts .hs-tl__spalte { margin-right: auto; margin-left: calc(50% + 53px); } /* Elementor setzt `.e-con .elementor-widget.elementor-widget { margin-block-end: 0 }` - doppelte Klasse (0,3,0) UND logische Eigenschaft. Eigene Abstandsregeln muessen dieselbe Verdopplung nachbauen. Hier steht der Rhythmus in der Hoehe, Margins bleiben deshalb auf 0. */ .elementor .e-con .hs-tl__seite.hs-tl__seite { margin-block-end: 0; margin-block-start: 0; } /* 🔑 DER TAKT KOMMT AUS DEM FIGMA, nicht aus dem Gefuehl. Im Entwurf (Canvas 280:17) stehen die Karten NICHT auseinander, sie ueberlappen: Karte 1 endet y1828, Karte 2 beginnt y1462 -> -366 Karte 2 endet y2277, Karte 3 beginnt y2011 -> -266 Karte 3 endet y2730, Karte 4 beginnt y2493 -> -237 Karte 4 endet y3031, Karte 5 beginnt y2896 -> -135 Mittel -251. Auf derselben Seite bleiben dabei 166 bis 216 px Luft. Chris am 15.09. zur ersten Fassung (+56): "viel zu weit auseinander" - richtig. ⚠️ -251 geht bei uns NICHT: Figmas Karten sind 538-815 px hoch (Text zugeklappt), unsere sind seit W-04 **372 bis 1270**. Die Luecke auf derselben Seite ist `Hoehe(i+1) + 2X`; die kuerzeste Zwischenkarte (Station 11, 372 px) bindet. Bei X = -150 bleiben dort noch 72 px, bei -180 nur 12 px. Gewaehlt: **-150** - der mildeste Wert, den das Figma selbst zeigt. */ .elementor .e-con .hs-tl__seite.hs-tl__seite + .hs-tl__seite { margin-block-start: -150px; } .hs-tl__zeile { position: relative; } /* Die Raute sitzt an der KARTENOBERKANTE, nicht ueber der Jahreszahl - im Render sitzen alle fuenf Rauten exakt auf dem Kartenanfang (1293/1290, 1465/1462, 2010/2011, 2493/2493, 2899/2896). Als Pseudo-Element an der Karte verrutscht sie auch dann nicht, wenn die Jahreszahl zweizeilig wird. */ .hs-tl__karte { position: relative; } .hs-tl__karte::after { content: ""; position: absolute; top: 0; width: 13px; height: 13px; background: var(--hs-bordeaux); } .hs-tl__seite--links .hs-tl__karte::after { right: -53px; transform: translateX(50%) rotate(45deg); } .hs-tl__seite--rechts .hs-tl__karte::after { left: -53px; transform: translateX(-50%) rotate(45deg); } /* Die Jahreszahl liegt MITTIG AUF der Kartenoberkante, nicht darueber - im Render ueber drei Stationen gemessen: Text y1447..1475 bei Kartenoberkante 1462, also 15 px darueber und 13 px darin (ebenso 1996..2024 / 2011 und 2880..2908 / 2896). Sie steht damit halb auf der Creme-, halb auf der weissen Flaeche - beides traegt Bordeaux. Absolut positioniert, damit sie die Karte nicht nach unten schiebt: das spart 52 px Blockhoehe und erlaubt den engeren Rhythmus. Die 24 px Kartenpolsterung fangen die untere Haelfte auf, es kollidiert nichts. */ .hs-tl__jahr { position: absolute; top: 0; left: 0; right: 0; z-index: 2; transform: translateY(-50%); font-family: var(--hs-serif); font-size: 38px; font-weight: 300; line-height: 48.64px; color: var(--hs-bordeaux); text-align: center; margin: 0; } .hs-tl__karte { background: var(--hs-white); padding: 24px; } .hs-tl__titel { font-family: var(--hs-serif); font-size: 24px; font-weight: 300; line-height: 30.72px; color: var(--hs-bordeaux); margin: 0 0 14px; } .hs-tl__fotos + .hs-tl__titel, .hs-tl__bu + .hs-tl__titel { margin-top: 22px; } .hs-tl__teaser, .hs-tl__rest { font-family: var(--hs-sans); font-size: 14px; line-height: 22px; color: var(--hs-bordeaux); } .hs-tl__teaser p, .hs-tl__rest p { margin: 0 0 14px; } .hs-tl__teaser p:last-child, .hs-tl__rest p:last-child { margin-bottom: 0; } .hs-tl__rest ul { margin: 0 0 14px; padding-left: 20px; } .hs-tl__rest li { margin-bottom: 10px; } .hs-tl__bu { font-family: var(--hs-sans); font-size: 12px; font-style: italic; line-height: 18px; color: var(--hs-bordeaux); /* 18.09.2026 Hanna: war --hs-rose (#A23559, hell) — die Bildunterschrift stand als einziger Text der Station im hellen Rot, Titel und Teaser daneben in #7A2742. Gemessen und angeglichen. Einziges Vorkommen der Klasse site-weit. */ margin: 10px 0 0; } .hs-tl__credit { font-family: var(--hs-sans); font-size: 11px; line-height: 16px; color: #B79A92; margin: 10px 0 0; } /* Aufklapper - nativ ueber

, ohne Plugin, wie `.hs-faq`. */ .hs-tl__mehr { margin-top: 18px; } .hs-tl__mehr > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid #E7D5CA; border-bottom: 1px solid #E7D5CA; font-family: var(--hs-sans); font-size: 13px; font-weight: 700; letter-spacing: .12em; line-height: 15px; /* Figma 280:155 - ohne das erbt Elementors 1,5 = 19,5 */ text-transform: uppercase; color: var(--hs-bordeaux); } .hs-tl__mehr > summary::-webkit-details-marker { display: none; } .hs-tl__mehr > summary::after { content: "+"; flex: 0 0 auto; font-size: 22px; font-weight: 300; line-height: 22px; letter-spacing: 0; color: var(--hs-rose); } .hs-tl__mehr[open] > summary { border-bottom-color: transparent; } .hs-tl__mehr[open] > summary::after { content: "\2212"; } .hs-tl__rest { padding-top: 4px; } /* Seit 15.09.2026 steht in der Timeline der gesamte Text offen (W-04): Teaser und Rest folgen direkt aufeinander und brauchen denselben Absatzabstand wie zwei Absaetze. In der Mythos-Karte liegt der Rest weiter im
, dort greift diese Regel nicht. */ .hs-tl__teaser + .hs-tl__rest { padding-top: 0; margin-top: 14px; } /* --- Fotogruppen -------------------------------------------------------- */ .hs-tl__fotos img { display: block; width: 100%; } /* Ein Foto: fester Ausschnitt, Anker nach oben gezogen. Bei hochformatigen Portraits schneidet `cover` sonst unten weg - oder mittig durch das Gesicht. Dieselbe Falle wie beim Hero der Kursseite (Anker `100% 15%`). */ .hs-tl__fotos--voll img { height: 300px; object-fit: cover; object-position: center 28%; } /* Hochformat-Quellen in einem 3:2-Querformatkasten verlieren mehr als die Haelfte des Bildes - am 15.09.2026 gemessen: `tl-praxis-grenzen` 900x1350 auf 452x300 = 56 % Formatverlust, ebenso `tl-nr1`; `tl-award` 828x997 = 45 %, `tl-praxis-gruendung` 600x744 = 46 %. Hanna im Call `[1:40:29]`: beim Hochformat-Foto "muss die Box angepasst werden" (W-13). 4:5 laesst ein 2:3-Foto nur noch 17 % verlieren und haelt die Karte trotzdem in einer lesbaren Hoehe. Ein Vollformat (2:3) waere 678 px hoch. */ .hs-tl__fotos--hoch img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: center 22%; } /* Umgekehrter Fall: querformatige Quellen in der hochformatigen Paar-Kachel. Gemessen: `tl-logo-tools` 900x503 und `tl-logo-wangen` 900x504 auf 221x250 = 51 bzw. 50 %, `tl-tv-studio` 640x360 = 50 %. Alle drei sind 16:9. */ .hs-tl__fotos--paarquer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hs-tl__fotos--paarquer img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: center 40%; } /* Zwei Fotos nebeneinander - im Entwurf die Prolog-Karte. */ .hs-tl__fotos--paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hs-tl__fotos--paar img { height: 250px; object-fit: cover; object-position: center 28%; } /* Vier Fotos - Community und Videostudio. */ .hs-tl__fotos--raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hs-tl__fotos--raster img { height: 175px; object-fit: cover; object-position: center 28%; } /* Collage: grosses Foto, kleines rechts unten daruebergelegt - im Entwurf die Karte 2013-2016. Das kleine Foto ragt bewusst ueber die Kante hinaus. */ .hs-tl__fotos--collage { position: relative; padding-bottom: 40px; } .hs-tl__fotos--collage img:first-child { width: 76%; height: 320px; object-fit: cover; object-position: center 24%; } .hs-tl__fotos--collage img:last-child { position: absolute; right: -14px; bottom: 0; width: 46%; height: 130px; object-fit: cover; } /* Nebeneinander, unbeschnitten - fuer die Station mit Muskel-Grafik UND Formel. Gestapelt war die Karte 906 px hoch und damit die hoechste der Seite; sie hat den Rhythmus der ganzen Timeline diktiert (A haette 528 sein muessen). Nebeneinander sind es 644 px und A = 440 geht auf. */ .hs-tl__fotos--nebeneinander { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; } .hs-tl__fotos--nebeneinander img { width: auto; max-width: 100%; max-height: 250px; height: auto; object-fit: contain; margin: 0 auto; } /* Frei: unbeschnitten, gestapelt. Fuer die Fotovergleiche (Vorlage 6, 900x320) und die Formel-Grafik - beide duerfen nicht angeschnitten werden, und die Formel ist transparent und braucht die weisse Karte als Grund. */ .hs-tl__fotos--frei { display: flex; flex-direction: column; gap: 12px; align-items: center; } .hs-tl__fotos--frei img { height: auto; } /* Einzelne Grafik, die weder beschnitten noch riesig werden darf. Ohne diese Deckelung lief die hochformatige Muskel-Grafik (800x1263) in der 452 px breiten Karte auf 714 px Hoehe und riss ein Loch ueber die halbe Karte. */ .hs-tl__fotos img.hs-tl__foto--eng { width: auto; max-width: 100%; max-height: 250px; height: auto; object-fit: contain; } /* Foto unter dem Text - Hannas Vorgabe fuer die Nr.-1-Station: "Bild bewusst unten, sodass 'Sieg' visuell unterstrichen" (oben wuerde es das Ergebnis vorwegnehmen). Gilt genauso fuer den Wendepunkt: "Fotos unten damit es erst nach dem Text die Aufloesung gibt". */ .hs-tl__fotos--unten { margin-top: 22px; } /* --- Handy -------------------------------------------------------------- */ @media (max-width: 900px) { /* Linie und Raute muessen auf dem Handy exakt aufeinander sitzen: die Raute haengt an der Zeile INNERHALB der 38-px-Polsterung, die Linie an der Aussenkante. Gemessen standen sie sonst 7 px auseinander. */ .elementor .e-con.hs-tl::before { left: 0; margin-left: 0; } /* Einspaltig gibt es keinen Rhythmus und keine Ueberlappung: feste Hoehe weg, sonst wuerden sich die Karten uebereinanderschieben. */ .hs-tl__seite, .hs-tl__seite:last-child { width: auto; height: auto; padding-left: 38px; } /* ⚠️ Einspaltig stehen die Karten UNTEREINANDER, nicht wechselseitig - der negative Takt von oben (-150) wuerde sie ineinanderschieben. Diese Regel steht spaeter in der Datei und gewinnt bei gleicher Gewichtung. */ .elementor .e-con .hs-tl__seite.hs-tl__seite + .hs-tl__seite { margin-block-start: 40px; } .hs-tl__spalte { width: auto; max-width: none; margin-left: 0; margin-right: 0; } .hs-tl__seite--links .hs-tl__spalte, .hs-tl__seite--rechts .hs-tl__spalte { margin-left: 0; margin-right: 0; } .hs-tl__seite--links .hs-tl__karte::after, .hs-tl__seite--rechts .hs-tl__karte::after { left: -38px; right: auto; transform: translateX(-50%) rotate(45deg); } .hs-tl__jahr { text-align: left; font-size: 26px; line-height: 32px; padding-left: 20px; } .hs-tl__karte { padding: 20px; } .hs-tl__titel { font-size: 21px; line-height: 29px; } .hs-tl__fotos--collage img:last-child { right: 0; } .hs-tl__fotos--nebeneinander { grid-template-columns: 1fr; } } /* ========================================================================== 12. Private Einblicke (Ueber-Mich-Seite) Foto buendig an der Kartenkante, Text mittig darunter - so im Entwurf. ========================================================================== */ /* Alle fuenf Karten sind im Entwurf **gleich hoch (492)**, das Foto ist **270** hoch und buendig an der Oberkante; der Text steht in den restlichen 222 px **mittig**. Reihe 2 hat im Entwurf KEINE zwei gleich breiten Karten: Komplementaermedizin ist **816** breit (= zwei Spalten plus Zwischenraum), Qi Gong **393** (= eine Spalte) - gemessen bei y8300..8500. `min-height` statt `height`, damit ein laengerer Text die Karte wachsen laesst statt zu ueberlaufen. */ .hs-pv { background: var(--hs-white); min-height: 492px; height: 100%; display: flex; flex-direction: column; } /* Der Ausschnitt muss JE BILD sitzen - ein gemeinsamer Wert geht nicht auf. Werte an einem Kontaktbogen ausgesucht, nicht geschaetzt. 🔑 HOCHFORMAT seit 15.09.2026 (Wunsch W-12, Call `[00:51:13-00:51:49]`): "Dass man es besser sieht. Bei dem Agroyoga ... das weicht zwar ab, aber finde, macht jetzt trotzdem mehr Sinn, sodass man das besser sehen kann. Und dann quasi die zweite Reihe auch - und beim linken unteren Bild, dass das quasi auch gleich lang ist." Alle fuenf Quellen sind hochformatig (0,56 bis 0,75), nur Tanzen ist quadratisch (0,98). Im alten 393x270-Kasten (1,46) gingen davon 33 bis 62 % verloren - beim Acroyoga-Handstand blieb ein unlesbarer Ausschnitt. **3:4** statt fester 270 px: trifft `pv-natur` exakt, kostet Qi Gong und TCM 11 %, Tanzen 24 %, Acroyoga 25 % - gegen vorher 49 bis 62 %. Als Verhaeltnis, nicht als Pixelhoehe, damit es in jeder Spaltenbreite haelt. ⚠️ Komplementaermedizin laeuft ueber ZWEI Spalten (65,81 % gegen 31,72 %, Faktor 2,0747) und muss quer bleiben. Damit sie trotzdem "gleich lang" ist: 3/4 x 2,0747 = **1,556**. Dann sind beide Fotos der zweiten Reihe bei jeder Breite exakt gleich hoch. */ .hs-pv__foto img { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: center 25%; } .hs-pv--tcm .hs-pv__foto img { aspect-ratio: 1.556; } .hs-pv--acroyoga .hs-pv__foto img { object-position: center 58%; } .hs-pv--tanzen .hs-pv__foto img { object-position: center 25%; } .hs-pv--natur .hs-pv__foto img { object-position: center 42%; } .hs-pv--tcm .hs-pv__foto img { object-position: center 40%; } .hs-pv--qigong .hs-pv__foto img { object-position: center 22%; } .hs-pv__text { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 22px 24px 26px; text-align: center; } .hs-pv__text p.hs-pv__titel { font-family: var(--hs-sans); font-size: 14px; line-height: 23px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hs-bordeaux); margin: 0 0 10px; } /* Figma (303:302, 303:312, 303:316, 303:320, 303:324): Open Sans 400 **16/26** in **#7A2742**. Bis 15.09. stand hier 14/23 in Rose - dieselbe Sorte Abweichung wie beim Timeline-Teaser. Hanna im Call `[1:38:13]`: "dass alles dunkelrot ist", dazu W-10 "alle Fliesstextschriften quasi dunkelrot". ⚠️ Diese Regel (0,1,1) schlaegt `.hs-pv__titel` (0,1,0) - die Kleinzeile stand deshalb ebenfalls in Rose, obwohl ihre eigene Regel Bordeaux sagt. Mit der Korrektur hier zieht sie automatisch mit. */ .hs-pv__text p { font-family: var(--hs-sans); font-size: 16px; line-height: 26px; color: var(--hs-bordeaux); margin: 0 0 10px; } .hs-pv__text p:last-child { margin-bottom: 0; } @media (max-width: 767px) { /* Einspaltig traegt die feste Hoehe nicht mehr - dann waeren kurze Texte von Leerraum umgeben. */ .hs-pv { min-height: 0; } /* ⚠️ Eine feste `height` schaltet `aspect-ratio` ab (Breite UND Hoehe gesetzt = Verhaeltnis wird ignoriert). Einspaltig gibt es keine zweite Spalte mehr, an die sich die Komplementaermedizin anpassen muesste - deshalb bekommt auch sie hier das Hochformat und zeigt damit mehr vom Bild. */ .hs-pv__foto img, .hs-pv--tcm .hs-pv__foto img { aspect-ratio: 3 / 4; height: auto; } } /* ========================================================================== 13. Aufklapp-Karte auf Flaeche (Ueber-Mich, Abschnitt "Gemeinsamer Feind") Gleiche Mechanik wie die Timeline-Karte, nur ueber die volle Rasterbreite. ========================================================================== */ .hs-mythos { background: var(--hs-creme); padding: 46px 100px; margin-bottom: 24px; } .hs-mythos:last-child { margin-bottom: 0; } .hs-mythos .hs-tl__teaser, .hs-mythos .hs-tl__rest { font-size: 16px; line-height: 26px; } .hs-mythos__titel { font-family: var(--hs-serif); font-size: 40px; font-weight: 300; line-height: 51.2px; color: var(--hs-bordeaux); margin: 0 0 20px; } @media (max-width: 767px) { .hs-mythos { padding: 28px 24px; } .hs-mythos__titel { font-size: 25px; line-height: 34px; } } /* ========================================================================== 14. Grossflaechige Fotos neben Text (Ueber-Mich: Hero, Vision, Mission) -------------------------------------------------------------------------- Bewusst als und NICHT als Container-Hintergrundbild: Elementors Lazy-Load blendet Container-Hintergruende auf dieser Installation dauerhaft aus (siehe Bau-Doku Kursseite, 22.08.). Ein ist davon nicht betroffen und reserviert ueber width/height ausserdem seinen Platz. ========================================================================== */ /* Hero: EIN durchgehendes Bild ueber die volle Breite, Claim rechts darueber. Hanna hat am 01.09.2026 ein eigens retuschiertes Querformat geliefert - sie sitzt links, ab 39,8 % der Breite laeuft das Bild in eine voellig flache Sandflaeche aus. Deshalb steht der Claim auf ruhiger Flaeche und braucht KEINE Abdunkelung; Notions Vorgabe "Desktop-Breite, vollflaechig" ist damit erfuellt, und die frueher noetige Abweichung entfaellt. Die Hintergrundfarbe ist bewusst die Flaechenfarbe DES BILDES (#F8EBE3, gemessen), nicht --hs-sand: so bleibt die Kante unsichtbar, wenn das Bild noch laedt oder auf sehr breiten Schirmen nicht ganz aufgeht. ⚠️ Kein Container-Hintergrundbild, sondern ein echtes : Elementors Lazy-Load fuer Container-Hintergruende ist auf dieser Installation kaputt, und srcset/sizes lieferte hier schon einmal die 683-px-Variante auf 1441 px. ⚠️ Die Hoehe ist FEST auf den Entwurfswert 720 px. Sie hat zwischenzeitlich mit der Fensterbreite mitgewachsen (bis 900 px) - das war falsch: die Textspalte wird auf breiten Schirmen ja BREITER und damit kuerzer, der mittig gesetzte Text rutschte also doppelt nach unten (gemessen 262 px unter der Sektionskante statt 157 px wie im Hero der Presse-Seite). Chris am 02.09.: "es ist viel Freiraum oben ... der Text sollte etwa auf der Hoehe beginnen wie bei Presse." Bei 720 px sind es 172 px - Presse-Niveau. Die Leerflaeche ueber Hannas Kopf ist NICHT hier geloest, sondern im Bild: `um-bilder-aufbereiten.py` schneidet oben 210 px weg (ihr Dutt begann erst bei 27,3 % der Bildhoehe). Ueber `object-position` allein ging das nicht - bei 1440 px ist das Bild fast vollstaendig sichtbar, die Leerflaeche liegt also IM Bild und nicht im Ausschnitt. */ .hs-hero-voll { position: relative; overflow: hidden; background-color: #F8EBE3; min-height: 720px; justify-content: center; } .hs-hero-voll__bild { position: absolute; inset: 0; z-index: 0; } .hs-hero-voll__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; } /* `left`, nicht `center`: unterhalb von 1440 px skaliert `cover` ueber die Hoehe und schneidet seitlich. Rechts liegt nur leere Flaeche, links sitzt Hanna. */ .elementor .e-con.hs-hero-voll > .e-con { position: relative; z-index: 1; } /* Der Textbeginn haengt an der MOTIVKANTE, nicht am Raster. Hanna am 02.09.: "der Text ist etwas zu nah am Knie dran, da braeuchte es mehr Abstand". Gemessen stimmte das - der Text begann sogar LINKS der Motivkante (bei 1440 px um 41 px, bei 1804 px um 13 px). Ursache ist ein Grundkonflikt dieser Bauform: das **Bild laeuft ueber die volle Fensterbreite**, der **Text ist ans 1240er-Raster gebunden**. Die Motivkante waechst also mit der Fensterbreite, der Textbeginn nicht - auf breiten Schirmen laufen sie zwangslaeufig ineinander. Ein fester Prozentwert kann das nicht loesen, egal welcher. Zielabstand **68 px** - das ist der Wert aus Sabines Figma: dort endet das Foto bei x600 und der Text beginnt bei x668. (Hanna: "weiss nicht wie die Text-Positionen von Sabine im Figma angegeben sind" - das ist die Antwort.) Wo die Motivkante liegt, haengt daran, wie `cover` skaliert: schmal (Fenster < ~1685): ueber die HOEHE -> Kante konstant 720 x 992/1078 = 662,6 px -> Rand 663px breit (Fenster > ~1685): ueber die BREITE -> Kante waechst mit 992/2500 x Sektionsbreite -> Rand 39,7vw - 6px ⚠️ Der Rand liegt AUF der Motivkante, nicht 68 px daneben - die 68 px kommen aus dem `padding-left` der Spalte, das ohnehin schon da ist. Beim ersten Versuch hatte ich beides addiert und war bei 136 px Abstand. (992 = gemessene rechte Motivkante im Bild, 1078 = Bildhoehe.) `max()` nimmt jeweils den groesseren der beiden - genau am Umschaltpunkt sind sie gleich, der Uebergang ist also stufenlos. ⚠️ `width: auto` ueberschreibt Elementors `--width: 58,3 %`. Der Wert steht weiterhin im Generator (als Rueckfallebene und weil `colw()` eine Breite verlangt), ist hier aber bewusst ausser Kraft - sonst waere der Abstand wieder an das Raster gekoppelt statt an das Bild. Doppelte Klasse + logische Eigenschaft, weil Elementors eigene Regeln (`--width` auf (0,3,0), `margin-inline` mit verdoppelter Klasse) sonst gewinnen - dieselbe Falle wie bei der Timeline. */ .elementor .e-con .hs-hero-voll__text.hs-hero-voll__text { margin-inline-start: max(663px, calc(39.7vw - 6px)); width: auto; flex: 1 1 auto; min-width: 0; } /* Unterhalb von 1280 px bleibt neben dem Motiv zu wenig Platz: die Motivkante liegt dort konstant bei 662 px, die Textspalte waere schmaler als 520 px und der Claim wuerde zerfasern. Deshalb ab hier gestapelt - Bild als Band oben, Text darunter. Das Bild geht dafuer aus der absoluten Lage zurueck in den Fluss; die Sektionsfarbe ist dieselbe wie die Bildflaeche, die Kante faellt nicht auf. ⚠️ Vorlaeufig: die Ansicht unter 1280 px (Tablet und Handy) ist ein eigener, noch offener Durchgang. Vorher lag diese Grenze bei 767 px - dazwischen stand der Text auf Hanna. */ @media (max-width: 1279px) { .hs-hero-voll { min-height: 0; } .hs-hero-voll__bild { position: static; } .hs-hero-voll__bild img { height: 300px; } .elementor .e-con .hs-hero-voll__text.hs-hero-voll__text { margin-inline-start: 0; width: 100%; } } @media (max-width: 767px) { .hs-hero-voll__bild img { height: 260px; } } .hs-halbfoto, .hs-halbfoto .elementor-widget-container, .hs-halbfoto figure { height: 100%; } .hs-halbfoto img { display: block; width: 100%; height: 100%; min-height: 560px; object-fit: cover; object-position: center 25%; } @media (max-width: 767px) { /* 🔴 19.09.2026, Chris: „Können wir die Bilder ein bisschen länger anzeigen? Sie sind im Moment quadratisch … damit ein bisschen mehr von Hanna angezeigt wird, aber gleich viel bei beiden." Vorher `height: 360px` fest. Bei 355 px Breite war das Fenster praktisch quadratisch (355x360) und der Beschnitt senkrecht 146..1638 von 1800 — Hannas Fingerspitzen liegen im Vision-Foto bei y 144, sie waren also um **2 px** angeschnitten. Gemessen, nicht geschaetzt. 🔑 `aspect-ratio` statt fester Hoehe (Lehre aus dem Zeitstrahl, 19.09.): nur so bleibt der Beschnitt bei JEDER Telefonbreite derselbe — eine feste Hoehe zeigt auf 320, 375 und 430 px je einen anderen Ausschnitt, weil das Bild mit der Breite mitwaechst. 5/6 = die Hausgroesse der uebrigen Seiten: dort steht `min_height_mobile: 120vw` (kurs-*.py, erfolgsgeschichten.py), und 120 vw auf voller Breite IST 5:6. Auf 375 px also 450 statt 360 px hoch, Fenster senkrecht 90..1620 — die Fingerspitzen haben 54 px Luft. Beide Fotos stehen mobil auf voller Breite, die Regel gilt fuer beide gleich: „gleich viel" ist damit nicht eingestellt, sondern bauartbedingt. */ .hs-halbfoto img { min-height: 0; height: auto; aspect-ratio: 5 / 6; } /* Rasterflucht endet am Telefon: `.hs-bleed-left/right` haelt 20 px Polster auf der angeschnittenen Seite (Mindestrand `--hs-gutter`). Auf dem Desktop traegt das die 1240er-Kante des Textes; mobil steht der Text ohnehin auf eigenem 20-px-Polster, und vom Rasterpolster bleibt nur ein Streifen Hintergrund NEBEN dem Foto stehen (Chris, 19.09.: „bei dem einen Bild links und bei dem anderen rechts ist noch ein bisschen Hintergrund zu sehen"). ⚠️ Bewusst als Modifier und NICHT an `.hs-bleed-*` selbst: die beiden Klassen stecken in elf Generatoren; eine Aenderung daran waere ein Eingriff in jede fertige Seite. Der Modifier haengt nur an `vision-r`/`mission-r`. */ .elementor .e-con.hs-bleed-left.hs-bleed--voll-mobil { --padding-left: 0px; } .elementor .e-con.hs-bleed-right.hs-bleed--voll-mobil { --padding-right: 0px; } } /* Das Rose-Band nimmt die Timeline-Linie auf: sie laeuft von der Bandoberkante noch 53 px weiter und endet in einer Raute. Beides ist dort **weiss**, nicht rose - eine rose Linie auf rosem Grund waere unsichtbar (im Render gemessen: 255,255,255 bei x720 zwischen y3762 und y3830). Der Wrapper wird NICHT gedreht - nur die Raute. Ein Kind eines gedrehten Elements wuerde mitrotieren, deshalb Linie und Raute als zwei Pseudo-Elemente an einem ungedrehten Kasten. */ .hs-band-anschluss { position: relative; width: 13px; height: 53px; margin: 0 auto 54px; } .hs-band-anschluss::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--hs-white); } .hs-band-anschluss::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 13px; height: 13px; margin-left: -7px; background: var(--hs-white); transform: rotate(45deg); } /* ========================================================================== 15. Blog — Archiv (Uebersicht) und Einzelbeitrag -------------------------------------------------------------------------- Quelle: Figma `oAfwP1U1ZqAsd2Ah8RP4Qm`, Variante B (Desktop-Frames 2 und 4). Variante A ist der ALTE Live-Blog, nicht der Entwurf — Chris am 30.08.2026. Zwei Dinge sind bewusst anders als im Entwurf gemessen: 1. RASTER. Der Entwurf ist ueber einen Screenshot der alten Live-Seite gezeichnet, deren Contentraster 1340 px breit ist (Header-Inhalt dort x 72..1412). Unsere Relaunch-Seiten laufen auf 1240 (`--hs-content`). Uebernommen sind Aufbau, Proportionen und Typografie, nicht die 1340. Gegenprobe, dass der Entwurf 1:1 und nicht skaliert ist: der Fliesstext misst dort 34 px Zeilenabstand — exakt unser `.hs-body`. 2. HERO-FOTO als , nicht als Container-Hintergrund. Grund steht in Abschnitt 14: Elementors Lazy-Load blendet Container-Hintergruende auf dieser Installation dauerhaft aus. ========================================================================== */ /* ---- Archiv: Hero „Neuster Beitrag" ---------------------------------- */ .hs-blog-hero { position: relative; overflow: hidden; min-height: 676px; } /* Foto-Ebene. Die Klasse sitzt am Bild-WIDGET, nicht am Bild. */ .hs-blog-hero .hs-blog-hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 0; } .hs-blog-hero .hs-blog-hero__bild .elementor-widget-container, .hs-blog-hero .hs-blog-hero__bild figure { height: 100%; margin: 0; } .hs-blog-hero .hs-blog-hero__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; } /* Abdunkelung. Im Entwurf gemessen gleichmaessig (oben wie unten ~rgb(125,110,98) auf der hellen Wand) — also FLACH, kein Verlauf. */ .hs-blog-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(45, 26, 22, .5); pointer-events: none; } .hs-blog-hero > .e-con { position: relative; z-index: 2; } /* Ab Seite 2 keinen Hero mehr. Das Raster laeuft mit einer ausdruecklichen Abfrage und `offset` 1, der Hero mit einer eigenen „neuster Beitrag"-Abfrage — der stuende sonst auf JEDER Blaetterseite noch einmal mit 676 px oben, und die Beschriftung „Neuster Beitrag" waere dort auch inhaltlich verkehrt. WordPress setzt auf Blaetterseiten die Body-Klasse `paged` (geprueft: Seite 2 und 7). */ body.paged .hs-blog-hero { display: none; } .hs-blog-hero__inhalt { width: 100%; max-width: var(--hs-content); margin: 0 auto; text-align: center; } /* Elementor deckelt Widgets in Containern mit `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }` — doppelte Klasse, also (0,4,0). Eigene Regeln muessen die Verdopplung nachbauen, sonst greifen sie nicht. */ .elementor.elementor .e-con.hs-blog-hero__inhalt > .elementor-widget { max-width: 1000px; } .hs-blog-hero__titel.hs-blog-hero__titel .elementor-heading-title { font-family: var(--hs-serif); font-size: 48px; font-weight: 300; line-height: 56px; color: var(--hs-white); } .hs-blog-hero__titel.hs-blog-hero__titel .elementor-heading-title a { color: inherit; text-decoration: none; } .hs-blog-hero__titel.hs-blog-hero__titel .elementor-heading-title a:hover { text-decoration: underline; } .hs-blog-hero__anriss.hs-blog-hero__anriss, .hs-blog-hero__anriss.hs-blog-hero__anriss .elementor-widget-container { font-family: var(--hs-sans); font-size: 16px; font-weight: 400; line-height: 30px; color: var(--hs-white); } .hs-blog-hero__anriss.hs-blog-hero__anriss p { margin: 0; } @media (max-width: 1024px) { .hs-blog-hero { min-height: 560px; } .hs-blog-hero__titel.hs-blog-hero__titel .elementor-heading-title { font-size: 38px; line-height: 46px; } } @media (max-width: 767px) { .hs-blog-hero { min-height: 520px; } .hs-blog-hero__titel.hs-blog-hero__titel .elementor-heading-title { font-size: 30px; line-height: 39px; } .hs-blog-hero__anriss.hs-blog-hero__anriss, .hs-blog-hero__anriss.hs-blog-hero__anriss .elementor-widget-container { font-size: 15px; line-height: 27px; } } /* Eyebrow im Hero: `.hs-eyebrow--light` steht auf (0,2,0) und verliert im Loop-Item gegen Elementors INLINE gedruckte Kit-Typografie. Im Blog-Hero deshalb ausdruecklich hochgezogen. */ .hs-blog-hero .hs-eyebrow .elementor-heading-title { font-family: var(--hs-sans); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; line-height: 1.6; color: var(--hs-white); } /* ---- Archiv: Beitragskarte ------------------------------------------- */ .hs-blog-karte { background: var(--hs-white); height: 100%; } /* Bildhoehe folgt dem Entwurf: dort 299 breit / 311 hoch. Auf unserem 1240er-Raster ist die Karte 274 breit -> 285 hoch. */ .hs-blog-karte__bild img { display: block; width: 100%; height: 285px; object-fit: cover; } .hs-blog-karte__bild, .hs-blog-karte__bild .elementor-widget-container, .hs-blog-karte__bild figure { margin: 0; line-height: 0; } /* Avatar liegt AUF der Bildkante — halb drueber, halb darunter. */ .hs-blog-karte__avatar { width: 48px; margin: -24px 0 0 28px; z-index: 2; } .hs-blog-karte__avatar img { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid var(--hs-white); box-sizing: content-box; } /* Meta-Zeile: Autor links, Datum rechts, EINZEILIG. Zwei Fallen, beide gemessen: 1. `--gap` ist die falsche Variable — Elementor setzt den Container-Abstand ueber `--row-gap`/`--column-gap`. Ohne die blieb der Vorgabewert 20 px. 2. Bei 13 px braucht der laengste Fall („Hanna Sacher" + „30. September 2025") 197 px plus Abstand, verfuegbar sind in der 277er-Karte aber nur 221 px — beide Zeilen brachen um. Bei 12 px sind es 190 + 10 = 200. */ .hs-blog-karte__meta.hs-blog-karte__meta { --row-gap: 10px; --column-gap: 10px; padding: 16px 28px 0; } .hs-blog-karte__meta.hs-blog-karte__meta > .elementor-widget { flex: 0 0 auto; max-width: none; } .hs-blog-karte__meta.hs-blog-karte__meta .elementor-heading-title { font-family: var(--hs-sans); font-size: 12px; font-weight: 400; line-height: 20px; white-space: nowrap; color: var(--hs-icon); } .hs-blog-karte__titel.hs-blog-karte__titel { padding: 12px 28px 0; } .hs-blog-karte__titel.hs-blog-karte__titel .elementor-heading-title { font-family: var(--hs-serif); font-size: 26px; font-weight: 300; line-height: 36px; color: var(--hs-bordeaux); text-align: center; } .hs-blog-karte__titel.hs-blog-karte__titel .elementor-heading-title a { color: inherit; text-decoration: none; } .hs-blog-karte__titel.hs-blog-karte__titel .elementor-heading-title a:hover { text-decoration: underline; } .hs-blog-karte__anriss.hs-blog-karte__anriss, .hs-blog-karte__anriss.hs-blog-karte__anriss .elementor-widget-container { font-family: var(--hs-sans); font-size: 15px; font-weight: 400; line-height: 24px; color: var(--hs-bordeaux); text-align: center; } .hs-blog-karte__anriss.hs-blog-karte__anriss { padding: 10px 28px 34px; } .hs-blog-karte__anriss.hs-blog-karte__anriss p { margin: 0; } /* „Weiterlesen" laeuft im Entwurf INLINE am Ende des Anrisses mit, unterstrichen. Kommt aus dem Shortcode [hs_anriss]. */ .hs-weiterlesen { color: inherit; text-decoration: underline; } .hs-weiterlesen:hover { color: var(--hs-rose); } @media (max-width: 767px) { .hs-blog-karte__bild img { height: 240px; } .hs-blog-karte__titel.hs-blog-karte__titel .elementor-heading-title { font-size: 23px; line-height: 32px; } } /* ---- Einzelbeitrag ---------------------------------------------------- */ /* Beitragsbild — **randlos ueber die volle Fensterbreite**. Die 80 Bestandsbilder haben sehr unterschiedliche Seitenverhaeltnisse (1:1 bis 1,96:1, 26x quadratisch) — `cover` auf feste Hoehe bringt sie auf eine gemeinsame Form. 🔴 16.09.2026 korrigiert. Hier stand `max-width: var(--hs-content)` (1240) — das Bild sass damit bei 1440 px mit **je 100 px Weiss** daneben, und auf breiteren Schirmen entsprechend mehr. Chris: *„Wir wollen das Foto über die volle Breite!"* 🔑 Woher der Fehler kam: Der Bau-Stand vom 30.08. haelt fest, dass das Mockup ueber einem Screenshot der ALTEN Live-Seite gezeichnet ist und dort ein 1340er Raster zeigt, unsere Seiten aber auf 1240 laufen. Diese — richtige — Entscheidung fuer das **Textraster** ist damals auch auf das **Bild** angewandt worden. Im Entwurf laeuft das Bild aber ausdruecklich bis an beide Kanten; es gehoert gar nicht ins Raster. 🔑 Lehre: Eine Rasterentscheidung gilt fuer die Elemente IM Raster. Ein randloses Element ist kein Sonderfall des Rasters, sondern steht daneben — wie das Abschlussband und die Fotospalten auf den Landingpages. */ .hs-artikel__bild img { display: block; width: 100%; height: 520px; object-fit: cover; } .hs-artikel__titel.hs-artikel__titel .elementor-heading-title { font-family: var(--hs-serif); font-size: 46px; font-weight: 300; line-height: 60px; color: var(--hs-bordeaux); text-align: center; } /* Autorzeile unter dem Titel: Avatar + Name nebeneinander, mittig. */ .hs-artikel__autor.hs-artikel__autor { --row-gap: 14px; --column-gap: 14px; } .hs-artikel__autor.hs-artikel__autor img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; } /* 🔴 16.09.2026 Rosé → Bordeaux. Das ist die Stelle, die Hanna im Call vom 04.09. `[01:58:30]` meint: *„Da oben, bei ueber Hanna ist es hellrot. Das wuerde jetzt dunkelrot machen."* — die Autorzeile direkt unter dem Titel. */ .hs-artikel__autor.hs-artikel__autor .elementor-heading-title { font-family: var(--hs-sans); font-size: 15px; font-weight: 700; line-height: 48px; color: var(--hs-bordeaux); } /* Lesespalte (968) und Hervorhebungsbreite (1090) sind im Entwurf gemessen, werden aber ueber Elementors `boxed_width` am Container gesetzt, nicht ueber eine Klasse — Breiten sind dort verlaesslicher. Deshalb steht hier bewusst keine Regel dafuer. */ /* Typografie des Beitragsinhalts. Traegt die 80 Bestandsbeitraege: sie sind ausnahmslos sauberes Gutenberg-Markup (432x h2, 273x h3, 208x ul, 178x figure, 24x blockquote). */ .hs-artikel__inhalt.hs-artikel__inhalt, .hs-artikel__inhalt.hs-artikel__inhalt .elementor-widget-container { font-family: var(--hs-sans); font-size: 18px; font-weight: 400; line-height: 34px; color: var(--hs-bordeaux); } .hs-artikel__inhalt.hs-artikel__inhalt p { margin: 0 0 22px; } .hs-artikel__inhalt.hs-artikel__inhalt p:last-child { margin-bottom: 0; } .hs-artikel__inhalt.hs-artikel__inhalt h1, .hs-artikel__inhalt.hs-artikel__inhalt h2 { font-family: var(--hs-serif); font-size: 32px; font-weight: 300; line-height: 42px; color: var(--hs-bordeaux); margin: 56px 0 18px; } .hs-artikel__inhalt.hs-artikel__inhalt h3 { font-family: var(--hs-serif); font-size: 26px; font-weight: 300; line-height: 34px; color: var(--hs-bordeaux); margin: 40px 0 14px; } .hs-artikel__inhalt.hs-artikel__inhalt h4 { font-family: var(--hs-sans); font-size: 17px; font-weight: 700; line-height: 28px; color: var(--hs-bordeaux); margin: 32px 0 12px; } .hs-artikel__inhalt.hs-artikel__inhalt > *:first-child { margin-top: 0; } /* `strong` bekommt bewusst KEINE eigene Farbe, sondern erbt. Mit `color: bordeaux` stand der Buttontext bordeaux auf bordeaux und war unsichtbar — 73 der 80 Beitraege haben den Buttontext in . Erben ist ausserdem richtig fuer die wenigen Stellen mit eigener Textfarbe. */ .hs-artikel__inhalt.hs-artikel__inhalt strong { font-weight: 700; } /* Fliesstext-Links — aber NICHT die als Button gestalteten. Ohne die Ausnahme bekamen alle Buttons Rosé auf Bordeaux plus Unterstrich. 🔴 16.09.2026: Farbe von Rosé auf **Bordeaux** gedreht. Hanna im Call vom 04.09.2026 `[01:55:17]`: *„und alle Fliesstextschriften quasi dunkelrot, wuerde ich machen"* und `[01:58:24]`: *„dass der Fliesstext dunkelrot ist. Da oben, bei ueber Hanna ist es hellrot. Das wuerde jetzt dunkelrot machen."* Chris hat es am 16.09. auf der Seite wiedergefunden. 🔑 Der **Unterstrich bleibt** — er ist jetzt das einzige Merkmal, das einen Link vom Fliesstext unterscheidet. Beim Ueberfahren wechselt die Farbe auf Rosé, also genau andersherum als vorher. */ .hs-artikel__inhalt.hs-artikel__inhalt a:not(.wp-block-button__link) { color: var(--hs-bordeaux); text-decoration: underline; } .hs-artikel__inhalt.hs-artikel__inhalt a:not(.wp-block-button__link):hover { color: var(--hs-rose); } /* ---- CTA-Buttons im Beitragsinhalt (Gutenberg) ---------------------- 79 der 80 Beitraege enthalten solche Buttons. Im Entwurf: Pille, Flaeche #A23559 (= --hs-rose), weisse fette Schrift in gemischter Schreibweise, Hoehe 55 px — gemessen am CTA „Jetzt Gesichtstraining fuer 0 Euro sichern". Bewusst NICHT der eckig-versale `.hs-btn` der Landingpages: der Entwurf zeigt hier die Pille, und die Beschriftungen sind ganze Saetze. Die Flaechenfarbe hier ist die VORGABE, keine Vereinheitlichung: 63 der 81 Buttons tragen gar keine Farbklasse und bekaemen sonst WordPress-Grau (#32373c) — die faerbt diese Regel auf Rosé. Die uebrigen 18 tragen `has-primary-…` (Rosé, 14x) oder `has-text-…` (Bordeaux, 4x); WordPress setzt diese Palettenklassen mit `!important`, Hannas bewusste Wahl gewinnt dort also — was richtig ist, denn die WP-Palette ist mit unserem Designsystem identisch (`primary` = #a23559, `text` = #7a2742, `bg-light` = #fbf6f3). Beide Faelle sind im Browser gegen weisse Schrift geprueft (Helligkeitsabstand Rosé 165, Bordeaux 188); die Gegenprobe ueber ALLE 80 Beitraege fand 81 Buttons und keine weitere Farbklassen-Kombination. WordPress' eigene Button-Regeln stehen dagegen auf `:where(…)` und damit auf Spezifitaet 0 — die greifen hier ueberhaupt nicht. */ .hs-artikel__inhalt.hs-artikel__inhalt .wp-block-buttons { margin: 34px 0; } .hs-artikel__inhalt.hs-artikel__inhalt .wp-block-button__link { display: inline-block; background-color: var(--hs-rose); color: var(--hs-white); text-decoration: none; border: 0; /* 🔴 16.09.2026: **eckig statt Pille**. Bis dahin `border-radius: 999px`, uebernommen aus dem Mockup — das ist aber der Button der ALTEN Live-Seite. Hanna im Call vom 04.09.2026 `[01:55:01]`: *„ueberall wo Buttons sind, dass das dann quasi das neue Button Design ist"*, `[01:55:10]` *„Die Dunkelroten, dass die dann so sind"*, `[01:58:37]` *„die Buttons vor allem, dass die stimmig sind zur restlichen Website."* Chris am 16.09. erneut: *„der Button ist noch rund. Das soll nicht sein."* 🔑 Der Bau-Stand vom 30.08. fuehrte die Pille ausdruecklich als „einzigen bewussten Stilbruch zum Entwurf" — genau den hat Hanna kassiert. Eine Form, die aus dem ALTEN Design stammt, ist kein Entwurfsdetail, das man uebernimmt. Chris, 16.09.2026: *„wir gleichen die Buttons auf 13 Pixel an, aber machen keine Versalien, sondern so, wie sie geschrieben sind."* 🔑 Damit stimmen Form, Groesse, Laufweite und Polster mit `.hs-btn` der uebrigen Seiten ueberein — **nur die Schriftlage nicht**. Der Grund ist die Textlaenge: der Seiten-Button traegt zwei bis vier Woerter, die Beitrags-CTAs ganze Saetze („Fuer 0 Euro mein Gesichtstraining testen"). Dieselbe Ueberlegung wie bei der Band-Unterzeile der Aufzeichnungsseiten: uebernommen werden Groesse, Laufweite und Polster — die Schriftlage gehoert zur Stelle. */ border-radius: 0; padding: 17px 34px; font-family: var(--hs-sans); font-size: 13px; font-weight: 600; letter-spacing: 1px; line-height: 24px; transition: background-color .2s ease; } .hs-artikel__inhalt.hs-artikel__inhalt .wp-block-button__link:hover, .hs-artikel__inhalt.hs-artikel__inhalt .wp-block-button__link:focus { background-color: var(--hs-bordeaux); color: var(--hs-white); } /* Der Beschriftungstext steckt fast immer in — Farbe und Gewicht muessen vom Button kommen, nicht von der Fliesstext-Regel. */ .hs-artikel__inhalt.hs-artikel__inhalt .wp-block-button__link strong, .hs-artikel__inhalt.hs-artikel__inhalt .wp-block-button__link em { color: inherit; font-weight: inherit; font-style: inherit; } @media (max-width: 767px) { .hs-artikel__inhalt.hs-artikel__inhalt .wp-block-button__link { padding: 15px 24px; font-size: 13px; } } .hs-artikel__inhalt.hs-artikel__inhalt ul, .hs-artikel__inhalt.hs-artikel__inhalt ol { margin: 0 0 22px; padding-left: 24px; } .hs-artikel__inhalt.hs-artikel__inhalt li { margin: 0 0 10px; } .hs-artikel__inhalt.hs-artikel__inhalt li::marker { color: var(--hs-rose); } .hs-artikel__inhalt.hs-artikel__inhalt figure, .hs-artikel__inhalt.hs-artikel__inhalt .wp-block-image { margin: 34px 0; } .hs-artikel__inhalt.hs-artikel__inhalt img { max-width: 100%; height: auto; display: block; } /* 16.09.2026: Bildunterschrift Rosé → Bordeaux. Sie ist Fliesstext und faellt damit unter Hannas Ansage vom 04.09. („alle Fliesstextschriften quasi dunkelrot"). Unterschieden wird sie ueber Groesse und Zentrierung, nicht ueber die Farbe. */ .hs-artikel__inhalt.hs-artikel__inhalt figcaption { font-size: 14px; line-height: 22px; color: var(--hs-bordeaux); margin-top: 10px; text-align: center; } .hs-artikel__inhalt.hs-artikel__inhalt blockquote { margin: 34px 0; padding: 28px 34px; background: var(--hs-sand); border: 0; font-size: 18px; line-height: 32px; } .hs-artikel__inhalt.hs-artikel__inhalt blockquote p:last-child { margin-bottom: 0; } .hs-artikel__inhalt.hs-artikel__inhalt iframe, .hs-artikel__inhalt.hs-artikel__inhalt .wp-block-embed iframe { max-width: 100%; } .hs-artikel__inhalt.hs-artikel__inhalt table { width: 100%; border-collapse: collapse; margin: 0 0 22px; } .hs-artikel__inhalt.hs-artikel__inhalt th, .hs-artikel__inhalt.hs-artikel__inhalt td { border: 1px solid var(--hs-icon); padding: 10px 12px; text-align: left; } @media (max-width: 767px) { .hs-artikel__bild img { height: 300px; } .hs-artikel__titel.hs-artikel__titel .elementor-heading-title { font-size: 30px; line-height: 40px; } .hs-artikel__inhalt.hs-artikel__inhalt h1, .hs-artikel__inhalt.hs-artikel__inhalt h2 { font-size: 26px; line-height: 35px; margin-top: 40px; } .hs-artikel__inhalt.hs-artikel__inhalt h3 { font-size: 22px; line-height: 30px; margin-top: 30px; } .hs-artikel__inhalt.hs-artikel__inhalt blockquote { padding: 20px 22px; } } /* ---- Autorenbox ------------------------------------------------------- */ .hs-autorbox { background: var(--hs-sand); padding: 56px 76px 60px; } .hs-autorbox__avatar img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; } .hs-autorbox__titel.hs-autorbox__titel, .hs-autorbox__titel.hs-autorbox__titel .elementor-widget-container { font-family: var(--hs-serif); font-size: 27px; font-weight: 300; line-height: 36px; color: var(--hs-bordeaux); } .hs-autorbox__titel.hs-autorbox__titel a { color: var(--hs-bordeaux); text-decoration: underline; } .hs-autorbox__titel.hs-autorbox__titel p { margin: 0; } .hs-autorbox__text.hs-autorbox__text, .hs-autorbox__text.hs-autorbox__text .elementor-widget-container { font-family: var(--hs-sans); font-size: 16px; font-weight: 400; line-height: 28px; color: var(--hs-bordeaux); } .hs-autorbox__text.hs-autorbox__text p { margin: 0 0 20px; } .hs-autorbox__text.hs-autorbox__text p:last-child { margin-bottom: 0; } .hs-autorbox__text.hs-autorbox__text p:first-child, .hs-autorbox__text.hs-autorbox__text p:last-child { font-weight: 700; } .hs-autorbox__folge.hs-autorbox__folge .elementor-heading-title { font-family: var(--hs-sans); font-size: 15px; font-weight: 700; line-height: 24px; color: var(--hs-bordeaux); } @media (max-width: 767px) { .hs-autorbox { padding: 34px 24px 38px; } } /* ---- Kommentare ------------------------------------------------------- */ .hs-kommentare { --hs-komm-feld: #F6E7DC; } .hs-kommentare .elementor-widget-container > .comments-area, .hs-kommentare .comments-area { max-width: 976px; margin: 0 auto; } /* Reihenfolge wie im Entwurf: erst das Formular, dann die Liste. WordPress gibt von sich aus Liste -> Formular aus. Die echte Klasse der Zaehler-Ueberschrift heisst `title-comments` (nicht `comments-title`) — Elementors Kommentar-Widget dreht das Wort um. */ .hs-kommentare .comments-area { display: flex; flex-direction: column; } .hs-kommentare .comments-area > .comment-respond { order: 1; } .hs-kommentare .comments-area > .title-comments { order: 2; margin-top: 46px; } .hs-kommentare .comments-area > .comment-list { order: 3; } .hs-kommentare .comment-reply-title, .hs-kommentare .title-comments, .hs-kommentare .comments-title { font-family: var(--hs-sans); font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 24px; color: var(--hs-bordeaux); margin: 0 0 8px; } /* 16.09.2026: Rosé → Bordeaux, wie der uebrige Fliesstext (Hanna, 04.09.: „alle Fliesstextschriften quasi dunkelrot"). */ .hs-kommentare .comment-notes, .hs-kommentare .logged-in-as { font-family: var(--hs-sans); font-size: 14px; line-height: 24px; color: var(--hs-bordeaux); margin: 0 0 24px; } .hs-kommentare .comment-form p { margin: 0 0 16px; } .hs-kommentare .comment-form label { display: block; font-family: var(--hs-sans); font-size: 13px; font-weight: 600; color: var(--hs-bordeaux); margin-bottom: 6px; } .hs-kommentare .comment-form input[type="text"], .hs-kommentare .comment-form input[type="email"], .hs-kommentare .comment-form input[type="url"], .hs-kommentare .comment-form textarea { width: 100%; box-sizing: border-box; background: var(--hs-komm-feld); border: 0; border-radius: 0; padding: 20px 22px; font-family: var(--hs-sans); font-size: 15px; line-height: 26px; color: var(--hs-bordeaux); } .hs-kommentare .comment-form textarea { min-height: 200px; } .hs-kommentare .comment-form input::placeholder, .hs-kommentare .comment-form textarea::placeholder { color: #C39C8E; } .hs-kommentare .comment-form input:focus, .hs-kommentare .comment-form textarea:focus { outline: 2px solid var(--hs-rose); outline-offset: -2px; } .hs-kommentare .form-submit { margin: 24px 0 0; } /* 🔴 16.09.2026: **eckig statt Pille** und auf die Werte des Seiten-Buttons gezogen (13/600, Versalien, ls 1, Polster 17/34 = `.hs-btn`). Anders als bei den Inhalts-CTAs stand hier zwischenzeitlich `text-transform: uppercase`. 🔴 Chris, 16.09.2026: **keine Versalien**, „sondern so, wie sie geschrieben sind" — und zwar einheitlich, nicht je Knopf verschieden. */ .hs-kommentare .comment-form input[type="submit"] { font-family: var(--hs-sans); font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--hs-white); background: var(--hs-rose); border: 0; border-radius: 0; padding: 17px 34px; cursor: pointer; } .hs-kommentare .comment-form input[type="submit"]:hover { background: var(--hs-bordeaux); } .hs-kommentare .comment-list { list-style: none; margin: 18px 0 0; padding: 0; } /* Einrueckung der Antworten. Doppelte Klasse, weil Elementors Kommentar-Widget hier sonst mit 30 px gewinnt. Bis Stufe 5 erlaubt (WP-Einstellung), tatsaechlich genutzt bis Stufe 3. */ .hs-kommentare.hs-kommentare .comment-list ol.children { list-style: none; margin: 0; padding: 0 0 0 36px; } .hs-kommentare .comment-body { background: var(--hs-sand); padding: 26px 30px 22px; margin-bottom: 18px; position: relative; } .hs-kommentare .comment-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } /* 16.09.2026 Rosé → Bordeaux — dieselbe Rolle wie die Autorzeile oben. */ .hs-kommentare .comment-author .fn { font-family: var(--hs-sans); font-size: 15px; font-weight: 700; font-style: normal; color: var(--hs-bordeaux); } .hs-kommentare .comment-author .says { display: none; } .hs-kommentare .comment-metadata, .hs-kommentare .comment-metadata a { font-family: var(--hs-sans); font-size: 12px; line-height: 20px; color: var(--hs-icon); text-decoration: none; } .hs-kommentare .comment-content { font-family: var(--hs-sans); font-size: 15px; line-height: 26px; color: var(--hs-bordeaux); margin-top: 10px; } .hs-kommentare .comment-content p { margin: 0 0 10px; } .hs-kommentare .comment-content p:last-child { margin-bottom: 0; } .hs-kommentare .reply { text-align: right; margin-top: 6px; } /* 🔴 16.09.2026 **eckig statt Pille** — dritter Knopf mit Pillenform auf dieser Seite, aus demselben alten Entwurf. Hanna: „die Buttons vor allem, dass die stimmig sind zur restlichen Website." */ .hs-kommentare .comment-reply-link { display: inline-block; font-family: var(--hs-sans); font-size: 13px; font-weight: 600; color: var(--hs-bordeaux); background: var(--hs-white); border-radius: 0; padding: 7px 20px; text-decoration: none; } .hs-kommentare .comment-reply-link:hover { background: var(--hs-rose); color: var(--hs-white); } @media (max-width: 767px) { .hs-kommentare.hs-kommentare .comment-list ol.children { padding-left: 16px; } .hs-kommentare .comment-body { padding: 20px 20px 18px; } } /* ---- Trennlinie zwischen Autorenbox und Kommentaren ------------------- */ .hs-blog-trenner { height: 1px; background: var(--hs-rose); opacity: .55; width: 100%; } /* ---- Kennzahl mit Stern: das Sternzeichen ist als Glyphe zu wuchtig ---- */ /* ---- Kennzahl-Stern: gezeichnete Form statt Schriftzeichen ---- Hanna hat am 09.09.2026 'Icon Stern.svg' geliefert (Drive: Branding/ Website-Relaunch Elemente/Elemente Startseite). Eingebaut als CSS-MASKE, nicht als Bild: so erbt der Stern per `currentColor` die Textfarbe der Kennzahl und stimmt auch auf dunklem Grund (Challenge-Seiten liegen auf Bordeaux). Das urspruengliche Zeichen bleibt im Markup stehen und wird nur aus dem Sichtfeld geschoben - dadurch kein Eingriff in 10 Seiten noetig und Rueckbau = diesen Block loeschen. Zwei Faelle: `.hs-stern` ist der span IM Text '5 *' der acht Generator-Seiten; `.hs-stern--solo` sind Startseite und Quiz-LP, wo der Stern ein EIGENES Ueberschrift-Element neben der 5 ist. */ .hs-stern, .hs-stern--solo .elementor-heading-title{ display:inline-block; width:1em; height:1em; overflow:hidden; text-indent:-10em; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpolygon points='250.15,15.86 308.03,194.01 495.34,194.01 343.8,304.1 401.68,482.25 250.15,372.15 98.61,482.25 156.49,304.1 4.95,194.01 192.26,194.01'/%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 500 500'%3E%3Cpolygon points='250.15,15.86 308.03,194.01 495.34,194.01 343.8,304.1 401.68,482.25 250.15,372.15 98.61,482.25 156.49,304.1 4.95,194.01 192.26,194.01'/%3E%3C/svg%3E") center/contain no-repeat; } .hs-stern{font-size:.62em;vertical-align:-.02em;margin-left:.1em;} .hs-stern--solo .elementor-heading-title{vertical-align:-.04em;} /* ---- ActiveCampaign-Formular (iframe auf die gehostete Fassung) ---- Nicht ueber AC's Einbettungs-Skript: das haengt das Formular relativ zu seinem eigenen