/* ========================================================================== 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); } .hs-card--bordeaux { background-color: var(--hs-bordeaux); } /* 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). */ .hs-eyebrow .elementor-heading-title { font-family: var(--hs-sans); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; line-height: 1.6; color: var(--hs-eyebrow-mute); } .hs-eyebrow--wide .elementor-heading-title { font-size: 18px; letter-spacing: .3em; } /* Hero */ .hs-eyebrow--small .elementor-heading-title { font-size: 14px; } .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-h1 .elementor-heading-title { font-family: var(--hs-serif); font-size: 60px; font-weight: 300; line-height: 70px; color: var(--hs-bordeaux); } .hs-h2 .elementor-heading-title { font-family: var(--hs-serif); font-size: 40px; font-weight: 300; line-height: 1.2; color: var(--hs-bordeaux); } .hs-h3 .elementor-heading-title { font-family: var(--hs-serif); font-size: 27px; font-weight: 300; line-height: 1.25; color: var(--hs-bordeaux); } @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; } } /* 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; } /* 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); } /* ---- 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;} /* ---- 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%;} /* ---- 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) ---- */ .hs-form{display:flex;flex-direction:column;gap:6px;max-width:520px;margin:0 auto;text-align:left;} .hs-form__label{font-family:'Open Sans',sans-serif;font-size:13px;font-weight:600;color:#7A2742;margin-top:10px;} .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:13px 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: gesperrte Versalien, klein */ .hs-story__name .elementor-heading-title { /* Figma (Erfolgsgeschichten): Open Sans Bold 15px, ls 1,5, #7A2742 - achtmal so belegt (Martina, Susanne, Kathrin, Isabell, ELISABETH, YVONNE, ANGELA). Hanna wuenschte im Call Editor's Note; in 15px traegt diese Schrift aber nicht - im gesamten Entwurf wird sie nie unter 18px eingesetzt. Chris hat am 05.09.2026 entschieden: hier gilt Figma. Bei Hanna gegenpruefen. */ font-family: var(--hs-sans); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.4; 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; font-style: italic; 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; line-height: 1.15; 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; } .hs-pls strong { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 2px; } /* Ankerlink unter einem Zitat ("Ich will auch solche Ergebnisse") */ .hs-story__link a { font-family: var(--hs-sans); font-size: 15px; font-weight: 600; 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. */ .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; } .hs-hero-foto > * { position: relative; z-index: 1; } } /* ========================================================================== 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`. ========================================================================== */ .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: 400px; pointer-events: none; } .hs-tl__seite:last-child { height: auto; } /* sonst ragt die letzte Karte heraus */ .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; } .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: 30px; font-weight: 300; line-height: 38px; 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: 32px; color: var(--hs-bordeaux); margin: 0 0 14px; } .hs-tl__fotos + .hs-tl__titel { margin-top: 22px; } .hs-tl__teaser, .hs-tl__rest { font-family: var(--hs-sans); font-size: 15px; line-height: 24px; color: var(--hs-bordeaux); } .hs-tl__teaser { color: var(--hs-rose); } .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-rose); 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; 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; } /* --- 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%; } /* 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; } .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. Die schmale Karte zeigt 550 von ~1200 px Bildhoehe, die BREITE (816 x 270) nur **265 von 1200** - deshalb war von Hanna bei der Komplementaermedizin nur die Haelfte zu sehen, und beim Acroyoga (Handstand, der Kopf ist UNTEN) fehlte der Kopf. Werte an einem Kontaktbogen ausgesucht, nicht geschaetzt. */ .hs-pv__foto img { display: block; width: 100%; height: 270px; object-fit: cover; object-position: center 25%; } .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__titel { font-family: var(--hs-sans); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hs-bordeaux); margin: 0 0 10px; } .hs-pv__text p { font-family: var(--hs-sans); font-size: 14px; line-height: 23px; color: var(--hs-rose); 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; } .hs-pv__foto img { height: 230px; } } /* ========================================================================== 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__titel { font-family: var(--hs-serif); font-size: 32px; font-weight: 300; line-height: 42px; 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) { .hs-halbfoto img { min-height: 360px; height: 360px; } } /* 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 auf weissem Band. 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. */ .hs-artikel__bild img { display: block; width: 100%; max-width: var(--hs-content); height: 520px; object-fit: cover; margin: 0 auto; } .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; } .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-rose); } /* 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. */ .hs-artikel__inhalt.hs-artikel__inhalt a:not(.wp-block-button__link) { color: var(--hs-rose); text-decoration: underline; } .hs-artikel__inhalt.hs-artikel__inhalt a:not(.wp-block-button__link):hover { color: var(--hs-bordeaux); } /* ---- 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; border-radius: 999px; padding: 16px 34px; font-family: var(--hs-sans); font-size: 16px; font-weight: 700; 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: 14px 24px; font-size: 15px; } } .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; } .hs-artikel__inhalt.hs-artikel__inhalt figcaption { font-size: 14px; line-height: 22px; color: var(--hs-rose); 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; } .hs-kommentare .comment-notes, .hs-kommentare .logged-in-as { font-family: var(--hs-sans); font-size: 14px; line-height: 24px; color: var(--hs-rose); 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; } .hs-kommentare .comment-form input[type="submit"] { font-family: var(--hs-sans); font-size: 15px; font-weight: 600; color: var(--hs-white); background: var(--hs-rose); border: 0; border-radius: 999px; padding: 17px 40px; 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; } .hs-kommentare .comment-author .fn { font-family: var(--hs-sans); font-size: 15px; font-weight: 700; font-style: normal; color: var(--hs-rose); } .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; } .hs-kommentare .comment-reply-link { display: inline-block; font-family: var(--hs-sans); font-size: 13px; font-weight: 600; color: var(--hs-rose); background: var(--hs-white); border-radius: 999px; 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 ---- */ .hs-stern{font-size:.62em;vertical-align:.14em;margin-left:.06em;} /* ---- ActiveCampaign-Formular (iframe auf die gehostete Fassung) ---- Nicht ueber AC's Einbettungs-Skript: das haengt das Formular relativ zu seinem eigenen