/* faelle.css — die sieben Landingpages nach dem Konzept (Auftrag S4, 12.09.2026). * * Interview, Sales, Advisory, Students, Executive, Compliance und Legal * tragen dieselbe Vorlage: Hero und Proof-Strip des Konzepts, dann Boxen * (boxen.css), die Bildstrecke ohne Rahmen, Preiskarten, FAQ zweispaltig, * cta-band. Die Bauteile kommen aus bauteile.css und boxen.css; hier * stehen NUR die Regeln, die beim Zusammenbau fehlen — jede mit ihrem * Grund, jede eingegrenzt auf body[data-page="landing"]. * * WARUM EINE EIGENE DATEI: Der Chrome-Bau (scripts/chrome/build_chrome.py) * schreibt den Mittelblock jeder Seite neu; ein darin ueberlebte den * naechsten Lauf nicht. Die Seiten binden diese Datei deshalb HINTER * ein, wie download.html es mit download.css * tut (W4). Sie steht damit nach bauteile.css und gewinnt bei gleicher * Spezifitaet — absichtlich, denn hier stehen die Ausnahmen. * * Nichts hier ist erfunden: Werte sind die des Konzepts (bauteile.css) oder * heben eine Kollision mit thalassa.css auf. Woraus jede Regel gebaut ist, * steht daneben; die Liste steht auch in docs/BERICHT-S4-LANDINGPAGES-1209.md. */ /* ------------------------------------------------------------------ 1 · Hero ------------------------------------------------------------------ */ /* thalassa.css gibt .hero einen eigenen Innenabstand (padding-block), das Konzept traegt ihn am Raster (.hero-grid: 86px 0 96px). Beide zusammen waeren der doppelte Abstand. */ body[data-page="landing"] .hero { padding-block: 0; } /* base.css gibt jeder h1 die Tintenfarbe (--text-heading); das Konzept laesst sie im Hero die Weissfarbe des Bandes erben (thalassa.css tat das ueber .on-dark, das diese Seiten nicht mehr tragen). Und: Die h1 des Konzepts (clamp(52px, 6.8vw, 90px)) ist fuer einen Satz von 47 Zeichen gerechnet; unsere sieben h1 haben 75 bis 130 Zeichen und braechen bei 1440 px in 7 bis 15 Zeilen (gemessen, 12.09.2026). Sie stehen deshalb in der zweiten Stufe der Konzept-Typoskala, dem Mass der Abschnittstitel (.section-title: clamp(38px, 5.2vw, 66px)) — 4 bis 7 Zeilen. Zeile und Laufweite bleiben die der Konzept-h1. */ body[data-page="landing"] .hero h1 { color: var(--white); font-size: clamp(38px, 5.2vw, 66px); } /* Die Aufnahmen aus M2 sind 16:10 mit durchsichtigem Grund und tragen ihren Schatten im Alphakanal. Die Buehne des Konzepts ist 16:9 und wuerde mit `cover` die Fensterleiste abschneiden; `contain` zeigt das Fenster ganz, der Rest der Buehne bleibt durchsichtig — kein Rahmen, kein Kasten (Arpad, 12.09.2026). Gilt fuer die Hero-Buehne und die App-Vorschau im Uebungsmodus. */ body[data-page="landing"] .hero-shot img, body[data-page="landing"] .screen-image img { object-fit: contain; } /* ------------------------------------------------------------------ 2 · Boxen — Beschriftungen und Dekor im Boxraster ------------------------------------------------------------------ */ /* .number ist in bauteile.css an .moment-card gebunden (.moment-card .number); die Box braucht dieselbe Beschriftung mit denselben Werten — mit EINER Abweichung, und die ist gemessen: das Konzept faerbt sie var(--emerald) (#10b981). Auf den drei hellen Boxgruenden ergibt das 2,54:1 (weiss), 2,24:1 (--mist) und 2,24:1 (--emerald-pale) — der Kontrastvertrag des Projekts verlangt fuer Text 4,5:1 (tests/test_website_kontrast.py, TEXT = 4.5). Auf hellem Grund steht deshalb var(--emerald-dark): 5,48:1 / 4,84:1 / 4,85:1. Die Farbe ist nicht erfunden, sie ist die Beschriftungsfarbe des Konzepts auf hellem Grund (.eyebrow in bauteile.css). In der dunklen Box bleibt --emerald: dort sind es 7,03:1. */ body[data-page="landing"] .box .number { display: block; margin-bottom: 14px; color: var(--emerald-dark); font-size: 13px; font-weight: 850; letter-spacing: .12em; } body[data-page="landing"] .box--ink .number { color: var(--emerald); } /* .kicker (Konzept: gedaempfte Vorzeile der Preiskarte) als zweite Beschriftung in der Box — ueber der Antwort, unter der Frage. */ body[data-page="landing"] .box .kicker { display: block; margin-bottom: 8px; } /* Die Box ist eine Flex-Spalte (boxen.css); Etikett, Knopf und Knopfzeile wuerden sonst auf volle Breite gestreckt. */ body[data-page="landing"] .box > .moment-tag, body[data-page="landing"] .box > .btn, body[data-page="landing"] .box > .hero-actions { align-self: flex-start; } body[data-page="landing"] .box > .btn, body[data-page="landing"] .box > .hero-actions { margin-top: auto; } /* Klein gesetzte Ueberschriften (box--klein) bekommen denselben Abstand nach oben wie die grossen: Sphaere und Foto sitzen oben rechts (-42/-44, 170 px), und eine Reihe haelt eine Linie. */ body[data-page="landing"] .box--klein h3 { margin-top: 58px; } /* Der Text einer vollen Box darf breiter laufen als die 500 px der halben; 820 px ist das Mass der Abschnittsueberschrift des Konzepts. */ body[data-page="landing"] .box--voll .box__text { max-width: 820px; } /* In der dunklen Box (.box--ink) bleibt jeder Text weiss — auch der, dem thalassa.css eine eigene Tintenfarbe gibt (.vertrauen__liste li, .art__daten dd, .feature-list li, .dl__anforderungen). boxen.css faerbt nur .box__text selbst; die Kinder erben sonst ihre alte Regel. Verweise in der dunklen Box in der Mintfarbe des Weiterlesen-Knopfs (boxen.css). */ body[data-page="landing"] .box--ink .box__text, body[data-page="landing"] .box--ink .box__text * { color: var(--white); } body[data-page="landing"] .box--ink .box__text a { color: #48dcae; } /* Kein Kasten im Kasten: Bauteile, die auf der alten Seite ihren eigenen Rand und Grund trugen (Studierenden-Tor, Kreditblock, Konnektoren-Absatz), stehen in der Box ohne beides — die Box IST der Kasten. */ body[data-page="landing"] .box :is(.tor, .kredit, .konnektoren) { margin: 0; padding: 0; border: 0; background: transparent; } /* Im dunklen Abschnitt (.product-section, --ink) tragen die hellen Boxen Tinte; nur die dunkle Box bleibt weiss beschriftet. */ body[data-page="landing"] .product-section .box { color: var(--ink); } body[data-page="landing"] .product-section .box--ink { color: var(--white); } /* Die App-Vorschau des Konzepts (.screen-shell, ohne Rahmen) als Zelle im Boxraster neben einer Box — dieselbe Spanne wie die Box. */ body[data-page="landing"] .boxen > .screen-shell { grid-column: span 6; align-self: center; } /* Keine Rahmen um die App, auch nicht von unten (Arpad, 12.09.2026). .screen-note traegt in bauteile.css `background: var(--white)` und 21px/24px Innenabstand — im Konzept sitzt diese Leiste unter einer randlosen Aufnahme im dunklen Abschnitt und liest sich als Teil des Bildes. Bei uns steht sie auf hellem Grund unter einer Aufnahme mit eigenem hellen Feld: gemessen drei verschiedene Weisstoene uebereinander (Abschnitt rgb(247,248,244), Bildfeld rgb(233,234,229), Leiste rgb(255,255,255), 611 x 72 px) — eine Platte, die den Kasten um die App wieder herstellt, den alle anderen Schichten schon abgelegt haben. Sie bleibt Text, wie BAUTEILE.md es sagt, nur ohne eigene Flaeche. */ body[data-page="landing"] .screen-note { padding-inline: 0; background: transparent; } /* Tabellen bleiben Tabellen, im Rollbehaelter, in einer vollen Box: Der Behaelter (.tabelle, thalassa.css) traegt Rand und Grund der alten Karte — in der Box waere das ein Kasten im Kasten. */ body[data-page="landing"] .box .tabelle { margin-top: 0; border: 0; border-radius: 0; background: transparent; } /* KEIN DEKOR UEBER TEXT (gemessen 12.09.2026: 93 Faelle auf 14 Seiten, bis 101 x 23 px verdeckte Glyphen). Die Sphaere und das Foto sitzen wie im Konzept in der oberen rechten Ecke (`right: -42px; top: -44px`, 170 px) und ragen damit 128 px von rechts und 126 px von oben in die Box — bei 34 px Innenabstand also 94 x 92 px in die Textspalte. Das Konzept haelt seine Titel davon frei, weil sie KURZ sind: `.moment-card h3` ist auf 480 px in einer 541 px breiten Spalte begrenzt, und mit `text-wrap: balance` erreicht keine Zeile die Sphaere. Unsere Titel sind der ganze Problemsatz (bis 130 Zeichen) und fuellen die Zeile — sie laufen unter das Dekor. Darum wird die Ecke reserviert, statt eine Zahl des Konzepts zu aendern: die Elemente, die in das Band der Sphaere reichen, halten rechts 94 px Abstand. Das ist die Eindringtiefe, nicht eine gewaehlte Zahl. `:has()` trifft nur Boxen, die wirklich Dekor tragen. */ body[data-page="landing"] .box:is(:has(> .moment-art), :has(> .box__bild)) :is(.number, .kicker, .moment-tag, h3, .box__text) { padding-right: 94px; } /* ------------------------------------------------------------------ 3 · Preise — Konzeptkarte mit unserem Periodenschalter ------------------------------------------------------------------ */ /* bauteile.css faerbt jede Spanne in .price gedaempft (.price span) — auch die Huellen .nur-monat/.nur-jahr, die der Periodenschalter braucht. Der Betrag darin traegt die Tinte, auf der dunklen Karte Weiss. */ body[data-page="landing"] .price-card .price strong { color: var(--ink); } body[data-page="landing"] .price-card--featured .price strong { color: var(--white); } /* DIESELBE FALLE, dritte Stelle (gemessen 12.09.2026): tokens/base.css faerbt jede Ueberschrift mit --text-heading. Als Typselektor (h1..h5) schlaegt das die geerbte Kartenfarbe der dunklen Karte (.price-card--featured { color: var(--white) }) — Vererbung verliert gegen jede eigene Zuweisung. Der Tarifname stand dadurch in Tinte auf Tinte: rgb(7,27,23) auf rgb(7,27,23), Kontrast 1,00, auf zwoelf Seiten. Die Zeile belegte ihre 339 x 30 px weiter, nur die Glyphen waren unsichtbar — im Quelltext stand alles richtig. Vorher schon zweimal repariert: die Hero-h1 und die Quellenbox auf Compliance. */ body[data-page="landing"] .price-card--featured .price-name { color: var(--white); } body[data-page="landing"] .price small { color: var(--muted); font-size: 13px; } body[data-page="landing"] .price-card--featured .price small { color: rgba(255, 255, 255, .58); } /* .price-note (Konzept: Hinweis im Preiskopf, 13 px) als Notiz in der Karte: ohne das Breitenmass des Kopfes, mit Abstand zum Naechsten. */ body[data-page="landing"] .price-card .price-note { max-width: none; margin-bottom: 14px; } body[data-page="landing"] .price-card--featured .price-note { color: rgba(255, 255, 255, .62); } /* Die Plakette der Preiskarte steht im Fluss, nicht in der Ecke — auch das ist gemessen. Das Konzept setzt `.price-badge` absolut nach oben rechts (`right: 24px; top: 24px`) und kommt damit aus, weil seine Kartenvorzeilen kurz sind („Start small", „High volume"). Unsere sind die Beschriftungen des Bestands („Abonnement · Rechtskorpus", „Subscription · yearly"), und die Plaketten tragen ganze Saetze („Mehr als die Haelfte gespart", rund 190 px). Gemessen liefen bis zu 115 x 16 px der Vorzeile unter die Plakette — bei 1440 px wie bei 390 px. Als erstes Kind der Karte steht sie im Markup ohnehin vorn; sie wird hier nur in den Fluss zurueckgeholt, behaelt Form, Farbe und Platz oben und kann nichts mehr verdecken. */ body[data-page="landing"] .price-card > .price-badge { position: static; align-self: flex-start; margin-bottom: 12px; } /* DER PERIODENSCHALTER UEBER DEN KARTEN IST SO BREIT WIE SEINE ZWEI KNOEPFE (22.09.2026). `.region-switch` ist im Konzept ein Flex-Block (bauteile.css) und lief deshalb ueber die ganze Containerbreite: GEMESSEN bei 1440 px 1240 px Balken fuer zwei Knoepfe von zusammen 278 px (Vertrieb, Executive; Beratung DE 329 px). Nur die Breite, nicht `display` -- was bauteile.css unter 1080 px damit macht, bleibt, wie es ist. Der Schalter in der Kartenzeile (Bewerbungsgespraeche) ist schon kompakt und von dieser Regel nicht getroffen: er ist kein Kind von `.container`. */ body[data-page="landing"] .pricing .container > .periode { width: fit-content; max-width: 100%; } /* Der Periodenschalter sitzt kompakt direkt neben dem Namen der Abo-Karte. */ body[data-page="landing"] .pricing .price-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; } body[data-page="landing"] .pricing .price-title-row .price-name { margin-bottom: 0; } body[data-page="landing"] .pricing .price-title-row .periode { display: inline-flex; flex: 0 0 auto; align-self: center; margin-top: 0; padding: 3px; } body[data-page="landing"] .pricing .price-title-row .periode button { min-width: 0; height: 30px; padding: 5px 10px; font-size: 12px; } @media (max-width: 420px) { body[data-page="landing"] .pricing .price-title-row { gap: 8px; } body[data-page="landing"] .pricing .price-title-row .price-name { font-size: 24px; } body[data-page="landing"] .pricing .price-title-row .periode button { height: 28px; padding: 4px 7px; font-size: 11px; } } /* Zwei Karten fuellen die Zeile (Compliance): das Dreierraster des Konzepts liesse ein Loch neben der zweiten. */ @media (min-width: 1081px) { body[data-page="landing"] .price-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } } body[data-page="landing"] .price-grid + .price-grid { margin-top: 18px; } /* Die zwei Abschlusskarten brauchen nach dem Entfernen der Studierendenkarte weniger Leerraum als das allgemeine Drei-Karten-Raster. */ body[data-page="landing"] .price-grid + .price-grid .price-card { min-height: 455px; } @media (max-width: 1080px) { body[data-page="landing"] .price-grid + .price-grid .price-card { min-height: auto; } } /* ------------------------------------------------------------------ 3b · cta-band mit unseren Betraegen ------------------------------------------------------------------ */ /* bauteile.css macht jede Spanne im Band zur Nebenzeile (.cta-band span: block, 14 px, gedaempft). Unsere Nebenzeile traegt darin Spannen fuer js/money.js (data-money, data-tax-word) — die bleiben im Satz. */ body[data-page="landing"] .cta-band span span { display: inline; margin: 0; color: inherit; font-size: inherit; } /* ------------------------------------------------------------------ 4 · FAQ — die Elementregeln des Konzepts, auf die Liste eingegrenzt ------------------------------------------------------------------ */ /* bauteile.css traegt keine Elementregeln (K1, Regel 2); die Werte stehen in docs/konzept/BAUTEILE.md, Abschnitt 8. thalassa.css hat eigene .faq-Regeln (Winkel statt Plus) — diese hier stehen spaeter und enger. */ body[data-page="landing"] .faq-list details { border-top: 0; border-bottom: 1px solid var(--line); padding: 0; } body[data-page="landing"] .faq-list summary { display: block; position: relative; padding: 24px 44px 24px 0; font-size: 17px; font-weight: 800; line-height: 1.3; list-style: none; cursor: pointer; } body[data-page="landing"] .faq-list summary::-webkit-details-marker { display: none; } body[data-page="landing"] .faq-list summary::after { position: absolute; right: 4px; top: 24px; width: auto; height: auto; margin: 0; border: 0; transform: none; color: var(--emerald-dark); font-size: 24px; line-height: 1; content: "+"; } body[data-page="landing"] .faq-list details[open] summary::after { content: "−"; transform: none; margin-top: 0; } body[data-page="landing"] .faq-list details p { padding: 0 44px 23px 0; margin: 0; max-width: none; font-size: 15px; } /* ------------------------------------------------------------------ 5 · Formular in der dunklen Box (Legal-Warteliste) ------------------------------------------------------------------ */ /* Dieselben Elementregeln des Konzepts (BAUTEILE.md, Abschnitt 9), auf .contact-form eingegrenzt; das Formular ist auf dunklen Grund gerechnet und steht hier in einer .box--ink. */ body[data-page="landing"] .contact-form label { color: rgba(255, 255, 255, .78); font-size: 12px; font-weight: 800; letter-spacing: .04em; } body[data-page="landing"] .contact-form input, body[data-page="landing"] .contact-form textarea { width: 100%; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; color: var(--white); background: rgba(255, 255, 255, .06); font: inherit; } body[data-page="landing"] .contact-form input { height: 50px; padding: 0 15px; } body[data-page="landing"] .contact-form textarea { min-height: 112px; padding: 14px 15px; resize: vertical; } body[data-page="landing"] .contact-form input::placeholder, body[data-page="landing"] .contact-form textarea::placeholder { color: rgba(255, 255, 255, .34); } body[data-page="landing"] .box > .contact-form { margin-top: 22px; } /* ------------------------------------------------------------------ 6 · Kein Wort und kein Satz wird mitten gebrochen (Arpad, 12.09.2026) ------------------------------------------------------------------ */ /* thalassa.css trennt deutsche Ueberschriften automatisch (:lang(de) hyphens: auto) und bricht Woerter im Notfall hart (overflow-wrap: break-word). Auf diesen Seiten gilt: nur von Hand (­ an sinnvoller Stelle), keine Zwangstrennung. Was dann nicht passt, faellt im Fenster auf (tests/test_s4_landingpages.py), nicht erst beim Kunden. */ body[data-page="landing"] :is(h1, h2, h3, h4, p, li, summary, dt, dd, strong, span) { hyphens: manual; overflow-wrap: normal; word-break: normal; } /* ------------------------------------------------------------------ 7 · Unter 900 px (die Stufe von boxen.css) ------------------------------------------------------------------ */ @media (max-width: 900px) { body[data-page="landing"] .boxen > .screen-shell { grid-column: span 12; } /* dieselbe Stufe wie .box h3 in boxen.css (58 -> 44 px) */ body[data-page="landing"] .box--klein h3 { margin-top: 44px; } /* Auf dem Telefon ist die Box 358 px breit, der Innenabstand 26 px (boxen.css) — das Dekor reicht dann 102 px in eine 306 px breite Spalte. 94 px Abstand liessen 212 px Text; auf Deutsch sind das Zeilen, in die kaum drei Woerter passen. Die Sphaere ist reine Dekoration und geht deshalb weg — dieselbe Entscheidung, die das Konzept fuer .stage-caption unter 760 px trifft (bauteile.css: `display: none`). Das Foto bleibt, denn Arpad will die echten Menschen sehen; es nimmt die zweite Form, die boxen.css dafuer schon fuehrt (.box--bildbreit: Bild oben, ueber die ganze Breite) — nichts davon ist erfunden. Ohne Dekor in der Spalte faellt auch der reservierte Abstand weg. */ body[data-page="landing"] .box > .moment-art { display: none; } body[data-page="landing"] .box > .box__bild { position: static; width: calc(100% + 52px); height: 180px; margin: -26px -26px 18px; border: 0; border-radius: 0; } body[data-page="landing"] .box:is(:has(> .moment-art), :has(> .box__bild)) :is(.number, .kicker, .moment-tag, h3, .box__text) { padding-right: 0; } body[data-page="landing"] .box:has(> .box__bild) h3 { margin-top: 0; } } /* ================================================================== Die Buehne der Fallseiten (Arpad, 15.09.2026, spaet) ================================================================== BEFUND: „Muss die Gesamthoehe des daneben liegenden Blocks sein. Links Block, selbe Groesse Overlay. So sieht es sehr klein aus." GEMESSEN: Die Buehne zeigte ein Streckenbild — 1600 x 1000 Punkte, in denen das Fenster seit heute Abend nur 764 bis 866 Punkte breit steht (es passt jetzt GANZ auf die Leinwand, siehe tools/szenen_render.py). In einem 16:9-Kasten mit `contain` blieb davon knapp die Haelfte der Breite uebrig, der Rest war durchsichtiger Rand. Das Fenster war vollstaendig — und winzig. BEHOBEN AM MATERIAL: `web/assets/produkt/fall-hero/` traegt je Seite und Sprache dasselbe Bild, aber auf das Fenster zugeschnitten (18 Punkte Luft fuer den weichen Schatten). Kein durchsichtiger Rand mehr, also auch nichts mehr, was der Kasten wegrechnen muesste. HIER: Der Kasten nimmt das Seitenverhaeltnis des Bildes an, statt 16:9 zu erzwingen. Bei 680 Punkten Breite ergibt das rund 785 Punkte Hoehe — die Hoehe der Textspalte daneben. Die Studentenseite bleibt quer, weil ihr Bild eine Aufnahme des Hauptfensters ist und nicht des Overlays. Der Perspektivkipp geht mit. Er macht aus dem Rechteck ein Trapez (Begruendung in css/design/startseite.css); bei einem hochkanten Bild faellt das genauso auf wie auf der Startseite. */ body[data-page="landing"] .hero-shot { aspect-ratio: auto; overflow: visible; } body[data-page="landing"] .hero-shot img { width: 100%; height: auto; object-fit: contain; } body[data-page="landing"] .app-frame { transform: none; overflow: visible; } /* ================================================================== Kampagnen-Hero und Medienmass (20.09.2026) ================================================================== Die fuenf Kampagnen sollen in der ersten Bildschirmhoehe sagen, was Thalassa fuer genau diesen Gespraechstyp tut. Das Menschenbild ersetzt deshalb nur die bisherige App-Buehne im Hero; der echte Produktbeleg bleibt weiter unten im unveraenderten Filmabschnitt. Die Klasse ist absichtlich auf Fallseiten begrenzt: Startseite und Produktseite behalten ihre eigene Buehne und Geometrie. */ body[data-page="landing"] .campaign-hero .hero-grid { grid-template-columns: minmax(0, 1fr) 360px; justify-content: space-between; gap: clamp(40px, 5vw, 68px); min-height: auto; padding: clamp(44px, 5vh, 58px) 0 clamp(48px, 6vh, 64px); } body[data-page="landing"] .campaign-hero { min-height: auto; } body[data-page="landing"] .campaign-hero .hero-copy { width: 100%; max-width: 820px; } body[data-page="landing"] .campaign-hero h1 { max-width: 22ch; font-size: clamp(40px, 4.2vw, 60px); font-weight: 800; line-height: 1.02; } body[data-page="landing"] .campaign-hero .hero-copy > p { max-width: 68ch; margin-bottom: 18px; color: rgba(255, 255, 255, .84); font-size: 18px; font-weight: 500; line-height: 1.58; } body[data-page="landing"] .campaign-hero .hero-actions { margin-top: 30px; } body[data-page="landing"] .campaign-proofline { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); } /* Das 3:2-Original bleibt vollstaendig im ruhigen Kampagnenrahmen. Nach Gegenprobe war 240 px zu klein; 360 px macht die Person wieder deutlich, ohne die Hero-Aussage zu verdraengen. */ body[data-page="landing"] .campaign-person { position: relative; justify-self: end; width: min(100%, 360px); aspect-ratio: 3 / 2; margin: 0; overflow: hidden; border: 1px solid rgba(118, 231, 195, .28); border-radius: 20px; background: #102f27; box-shadow: 0 30px 80px rgba(0, 0, 0, .28); } body[data-page="landing"] .campaign-person::after { position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(7, 27, 23, .82)); content: ""; pointer-events: none; } body[data-page="landing"] .campaign-person img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } body[data-page="landing"] .campaign-person figcaption { position: absolute; z-index: 1; right: 16px; bottom: 14px; left: 16px; color: var(--white); font-size: 12px; font-weight: 800; line-height: 1.35; } /* Drei direkte Ergebnisse ersetzen den bisherigen Karten-Marathon. Jede Zeile koppelt den vorhandenen Nutzenpunkt an eine echte Produktaufnahme; im DOM steht das Bild immer zuerst, die sichtbare Reihenfolge wechselt nur ueber das Raster. */ body[data-page="landing"] .campaign-outcomes { background: var(--white); } body[data-page="landing"] .campaign-outcomes .section-title { max-width: 22ch; font-size: clamp(36px, 4vw, 54px); font-weight: 800; line-height: 1.05; } body[data-page="landing"] .campaign-outcomes .section-lede { color: var(--ink); font-weight: 500; line-height: 1.58; } body[data-page="landing"] .campaign-outcomes__list { margin-top: clamp(34px, 4vw, 52px); border-bottom: 1px solid var(--line); } body[data-page="landing"] .campaign-outcome { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 5vw, 80px); min-width: 0; padding: clamp(28px, 3.5vw, 44px) 0; border-top: 1px solid var(--line); } body[data-page="landing"] .campaign-outcome:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); } body[data-page="landing"] .campaign-outcome__visual { display: flex; grid-column: 1; grid-row: 1; align-items: center; justify-content: center; min-width: 0; min-height: 0; aspect-ratio: 1710 / 1080; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; } body[data-page="landing"] .campaign-outcome:nth-child(even) .campaign-outcome__visual { grid-column: 2; } /* Genau dieselben beiden Medienmasse wie im Startseiten-Zickzack: quer 1710:1080, hoch 1710:1555. Die transparent freigestellten Fall-Heros sind wie die Overlay-Aufnahmen Hochformate. */ body[data-page="landing"] .campaign-outcome__visual:has(img[src*="/overlay/"]), body[data-page="landing"] .campaign-outcome__visual:has(img[src*="/fall-hero/"]) { aspect-ratio: 1710 / 1555; } body[data-page="landing"] .campaign-outcome__visual picture { display: block; width: 100%; height: 100%; min-height: 0; } body[data-page="landing"] .campaign-outcome__visual img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 18px 40px rgba(7, 27, 23, .16)) drop-shadow(0 2px 6px rgba(7, 27, 23, .08)); } body[data-page="landing"] .campaign-outcome__copy { grid-column: 2; grid-row: 1; width: 100%; max-width: 56ch; } body[data-page="landing"] .campaign-outcome:nth-child(even) .campaign-outcome__copy { grid-column: 1; } body[data-page="landing"] .campaign-outcome__label { display: block; margin-bottom: 16px; color: var(--emerald-dark); font-size: 12px; font-weight: 800; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; } body[data-page="landing"] .campaign-outcome__copy h3 { margin: 0 0 14px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; line-height: 1.12; } body[data-page="landing"] .campaign-outcome__copy p { max-width: 56ch; margin: 0; color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.58; } body[data-page="landing"] .price-card--featured .text-link { color: var(--akzent-auf-dunkel); } body[data-page="landing"] .price-card--featured .text-link:hover { color: var(--white); } /* Auf jeder Kampagnenseite hat der eine Tutorialfilm dasselbe Mass wie der Product-in-action-Film: maximal 860 px, darunter die volle verfuegbare Breite. height:auto bewahrt 16:9 und verhindert Cropping. Die Homepage wird wegen des body-Selektors nicht beruehrt. */ body[data-page="landing"] .schnellstart { width: min(100%, 860px); margin-right: auto; margin-left: auto; } body[data-page="landing"] .schnellstart__film { display: block; width: 100%; max-width: 860px; height: auto; object-fit: contain; } body[data-page="landing"] .schnellstart__text { max-width: 860px; margin-right: auto; margin-left: auto; } @media (max-width: 900px) { body[data-page="landing"] .campaign-hero .hero-grid { grid-template-columns: 1fr; } body[data-page="landing"] .campaign-person { justify-self: end; width: min(78vw, 320px); } } @media (max-width: 900px) { body[data-page="landing"] .campaign-outcome, body[data-page="landing"] .campaign-outcome:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 42px 0; } body[data-page="landing"] .campaign-outcome__copy, body[data-page="landing"] .campaign-outcome:nth-child(even) .campaign-outcome__copy { grid-column: 1; grid-row: 2; } body[data-page="landing"] .campaign-outcome__visual, body[data-page="landing"] .campaign-outcome:nth-child(even) .campaign-outcome__visual { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 1710 / 1080; } body[data-page="landing"] .campaign-outcome__visual:has(img[src*="/overlay/"]), body[data-page="landing"] .campaign-outcome__visual:has(img[src*="/fall-hero/"]) { aspect-ratio: 1710 / 1555; } body[data-page="landing"] .campaign-outcome__visual picture { height: 100%; } body[data-page="landing"] .campaign-outcome__visual img { width: 100%; height: 100%; } } @media (max-width: 760px) { body[data-page="landing"] .campaign-hero .hero-grid { padding: 50px 0 62px; } body[data-page="landing"] .campaign-hero h1 { max-width: none; font-size: clamp(40px, 12.2vw, 58px); } body[data-page="landing"] .campaign-person { width: min(82vw, 300px); border-radius: 18px; } body[data-page="landing"] .campaign-person figcaption { right: 18px; bottom: 16px; left: 18px; font-size: 13px; } body[data-page="landing"] .campaign-outcomes__list { margin-top: 28px; } body[data-page="landing"] .campaign-outcome__visual { padding: 0; } body[data-page="landing"] .campaign-outcome__copy h3 { font-size: clamp(27px, 8vw, 36px); } body[data-page="landing"] .campaign-outcome__copy p { font-size: 17px; } }