/* * Angebotsseiten: Design-Tokens und Sektions-Styling. * * Wird nur auf Seiten mit dem Template tpl-angebotsseite.php geladen, * siehe rh_angebot_styles() in angebot-functions.php. * * VORRANGREGEL * Wo die Live-Webseite bereits eine Klasse oder einen globalen Style hat, gilt * der Bestand, nicht Figma. Konsistenz mit der bestehenden Seite geht vor. * Farben und Typografie kommen deshalb ueber die globalen Variablen des * Elementor-Kits (--e-global-color-*, --e-global-typography-*), der Figma-Wert * steht nur als Fallback dahinter. Aus dem Frame stammen ausschliesslich * Layout-Werte, fuer die es im Bestand kein Pendant gibt: Raster, Abstaende, * Radius, Proportionen. * * Bekannte bewusste Abweichungen vom Frame sind an Ort und Stelle kommentiert * (Button-Radius, Button-Rahmen, Zeilenhoehen). * * Referenz-Frame: "Duftbaum · Stufe 1 ohne Preis · Landingpage · Desktop 1440", * File wMwcOfkBtnnRGPPVRjBaRc, Hero-Node 3121:2097. * * Aktuell gestylt: nur die Hero-Sektion. Die uebrigen 16 Sektionen erben die * Tokens, bringen aber noch kein eigenes Styling mit. * * Mobile: der Frame liegt ausschliesslich als Desktop 1440 vor. Das * Sektions-Styling greift deshalb erst ab 1025px, siehe Kommentar weiter unten. */ /*============ Design-Tokens ============*/ .angebot-page { /* Raster. Container-Breite und Gutter sind am Elementor-Header gemessen: der Header rendert min(1280px, 100% - 60px), bei 1440 also exakt die 1280px des Figma-Frames mit 80px Rand. */ --angebot-container: 1280px; /* Frame 1440 minus 2x Grid/Page Padding */ --angebot-gutter-min: 60px; /* Elementor-Default, 2x 30px */ /* Breite der Textbloecke: Fliesstext, Untertitel und Fussnoten. Ohne Deckel laufen sie ueber den ganzen Container bis an den rechten Rand und kommen auf 170 bis 195 Zeichen pro Zeile. 1000px von 1280px lassen rund ein Fuenftel frei, die Zeile sinkt auf 132 bis 151 Zeichen. Bewusst in px und nicht in ch: der Wert ist hier eine optische Groesse, keine Zeichenzahl. Die Bloecke laufen in 14px und 16px, und ein Wert in ch ergaebe je Schriftgroesse eine andere Pixelbreite, also zwei verschiedene rechte Kanten untereinander. Mit px enden alle Bloecke einer Sektion an derselben Linie. Zum Einordnen, falls der Wert je zur Diskussion steht: die Live-Seite laeuft bei 56 bis 90 Zeichen, 1000px liegen also deutlich darueber. Das ist so entschieden, es geht hier um die Optik am rechten Rand und nicht um die kuerzestmoegliche Zeile. */ --angebot-lesebreite: 1000px; --angebot-section-padding: 80px; /* Section Padding/Small */ --angebot-column-gap: 16px; /* Grid/Column Gap */ --angebot-logo-box: 100px; /* Trust: Logo - Container 100x100 */ --angebot-logo-abstand: 48px; /* Trust: Abstand im Laufband */ --angebot-laufband-dauer: 40s; /* Trust: eine volle Runde */ --angebot-logo-hoehe-sm: 32px; /* Formular: feste Boxhoehe, siehe Kommentar bei __sp-logos */ --angebot-logo-maxbreite-sm: 86px; /* Formular: Breitenbegrenzung fuer lange Wortmarken */ --angebot-logo-minbreite-sm: 60px; /* Formular: Mindestbreite je Logo, verteilt die Reihe ruhiger */ --angebot-logo-abstand-sm: 15px; /* Formular: Abstand Beschriftung zu den Logos, jetzt konstant */ --angebot-formular-hoehe: 566px; /* Formular: Hoehe des Stepper-Containers */ /* Abstaende */ --angebot-space-4: 4px; /* Spacing/4 */ --angebot-space-8: 8px; /* Spacing/8 */ --angebot-space-12: 12px; /* Spacing/12 */ --angebot-space-16: 16px; /* Spacing/16 */ --angebot-space-20: 20px; /* Spacing/20 */ --angebot-space-24: 24px; /* Spacing/24 */ --angebot-space-28: 28px; /* Download-Block: Abstand zum Button */ --angebot-space-32: 32px; /* Spacing/32 */ --angebot-space-48: 48px; /* Staffelpreise: Abstand zur Formular-Sektion */ --angebot-space-64: 64px; /* Formular: Spaltenabstand */ /* Radius und Effekte */ --angebot-radius-sm: 8px; /* General/Small */ --angebot-radius: 12px; /* General/Default */ --angebot-radius-lg: 16px; /* Kurzbeschrieb: Angebotskasten */ --angebot-panel-hoehe: 150px; /* Karten-Grid: Hoehe des Bildpanels */ --angebot-chip-punkt: 28px; /* Karten-Grid, Variante Chip: Bildpunkt in der Pill */ --angebot-karten-rail: 400px; /* Karten-Grid, Variante Spezifikation: Breite der linken Spalte */ --angebot-download-breite: 400px; /* Karten-Grid: Breite des Download-Kastens, Rail-Breite aus dem Frame */ --angebot-download-icon: 40px; /* Karten-Grid: Hoehe des Dokumentzeichens */ --angebot-einsatz-bild: 410 / 335; /* Einsatzbereiche: Seitenverhaeltnis des Kartenbilds */ --angebot-ablauf-intro: 524px; /* Ablauf: Breite der linken Spalte */ --angebot-technik-intro: 632px; /* Technische Angaben: Breite des Intros */ --angebot-hgkarte-intro: 413px; /* Text/Bild/CTA, Hintergrund: Breite der Textspalte */ --angebot-tbc-bild: 632px; /* Text/Bild/CTA, Links und Rechts: Breite der Bildspalte, wie beim Kurzbeschrieb */ --angebot-tbc-verhaeltnis: 632 / 420; /* Text/Bild/CTA, Links und Rechts: Seitenverhaeltnis des Bilds */ --angebot-referenz-bild: 410 / 476; /* Referenzen: Seitenverhaeltnis des Kartenbilds */ --angebot-referenz-karte: 48%; /* Referenzen als Slider: Kartenbreite, Rest schneidet an */ --angebot-verwandt-bild: 302 / 335; /* Verwandte Produkte: Seitenverhaeltnis des Kartenbilds */ --angebot-radius-xl: 24px; /* General/Large: obere Ecken des Abschluss-CTA */ --angebot-avatar: 72px; /* Abschluss-CTA: Kantenlaenge der Ansprechperson */ --angebot-cta-text: 560px; /* Abschluss-CTA: Textbreite, haelt Abstand zur Wortmarke */ /* Echte Masse der Wortmarke, wie sie der Footer der Live-Seite ausgibt. */ --angebot-wortmarke-breite: 542px; --angebot-wortmarke-hoehe: 400px; --angebot-cta-gruen: var(--e-global-color-secondary, #0c2c09); /* Accent/Primary-1 */ --angebot-faq-rail: 328px; /* FAQ: Breite der linken Spalte */ --angebot-faq-liste: 740px; /* FAQ: Breite der Fragenliste */ --angebot-faq-knopf: 28px; /* FAQ: Kantenlaenge des Auf-Zu-Knopfs */ --angebot-badge: 40px; /* Ablauf: Kantenlaenge des Nummern-Badges */ --angebot-vergleich-bild: 200px; /* Vergleich: Kantenlaenge des Kartenbilds */ --angebot-vergleich-rail: 416px; /* Vergleich: Breite der linken Spalte */ --angebot-vergleich-karten: 740px; /* Vergleich: Breite der Kartenspalte */ --angebot-blur: 8px; /* Background Blur, CSS-Aequivalent */ /* Farben: durchgehend aus dem Elementor-Kit, damit eine Aenderung in den Site-Settings hier durchschlaegt. Der Figma-Wert steht als Fallback dahinter und ist in jedem Fall identisch mit dem Kit-Wert. */ --angebot-bg-base: var(--e-global-color-76880f1, #f5f7f2); /* Background/Base */ --angebot-bg-depth: var(--e-global-color-48fa27e, #e8ebe4); /* Background/Depth */ --angebot-bg-lift-solid: var(--e-global-color-fb2a58b, #ffffff); /* Background/Lift, deckend */ --angebot-bg-lift: var(--e-global-color-9e5022b, rgba(255, 255, 255, 0.64)); /* Background/Lift, transluzent */ --angebot-text-heading: var(--e-global-color-73cc5bf, #080808); /* Text/Heading/Strong */ --angebot-text-strong: var(--e-global-color-99a01a3, rgba(8, 8, 8, 0.88)); /* Text/Body/Strong */ --angebot-text-medium: var(--e-global-color-4ecb6fc, rgba(8, 8, 8, 0.64)); /* Text/Label/Medium */ --angebot-text-subtle: var(--e-global-color-85376d1, rgba(8, 8, 8, 0.48)); /* Text/Body/Subtle */ --angebot-text-invers: var(--e-global-color-bc61c0c, #ffffff); /* Text auf dunklem Grund */ --angebot-text-invers-strong: var(--e-global-color-3e0b145, rgba(255, 255, 255, 0.88)); --angebot-text-invers-medium: var(--e-global-color-9e5022b, rgba(255, 255, 255, 0.64)); /* Ohne Kit-Pendant, Wert stammt aus dem Frame */ --angebot-border-subtle: rgba(8, 8, 8, 0.16); /* Border/Subtle */ /* Schriftfamilien aus den globalen Typo-Sets des Kits */ --angebot-font-body: var(--e-global-typography-text-font-family, "HostGrotesk-Regular"), Sans-serif; --angebot-font-heading: var(--e-global-typography-141c258-font-family, "HostGrotesk-Medium"), Sans-serif; --angebot-font-bold: var(--e-global-typography-5716e82-font-family, "HostGrotesk-SemiBold"), Sans-serif; /* Typo-Skala aus dem Kit. Groessen und Familien decken sich mit dem Frame, die Zeilenhoehen sind im Kit durchgehend enger. Es gilt der Bestand. Kit-Set Rolle im Frame Kit Frame 141c258 h1 72 / 0.833 72 / 72 text b2 16 / 1.375 16 / 24 1a55f57 b3 14 / 1.429 14 / 22 41dc88f label 1 12 / 1.167 12 / 16 */ /* Einzige Ausnahme von der Vorrangregel, mit Messung begruendet: Der Kit-Wert 0.833 ergibt bei 72px eine Zeilenhoehe von 59.98px. Die laengste Ueberschneidung ist "gestalten und mit" auf "Logo bedrucken": Unterlaenge des g 16.7px plus Oberlaenge der Folgezeile 51.8px ergibt 68.5px Bedarf. Die Zeilen ueberlappen also um 8.5px. Kollisionsfrei ist erst ab Faktor 0.951, hier steht 1.0 fuer 3.5px Luft. Der Kit-Wert funktioniert bei ein- bis zweizeiligen Titeln, die Hero-Headline laeuft aber ueber vier Zeilen. */ --angebot-h1-line: 1; /* h6 aus dem Kit-Set 3ea5a32: 24 / 1.167 / -0.5px, deckt sich exakt mit dem Frame (24 / 28 / -0.5px). */ /* h3 aus dem Kit-Set 87ece54: 40 / 1 / -1px, deckt sich exakt mit dem Frame (40 / 40 / -1px). */ --angebot-h3-size: var(--e-global-typography-87ece54-font-size, 40px); --angebot-h3-line: var(--e-global-typography-87ece54-line-height, 1); --angebot-h3-tracking: var(--e-global-typography-87ece54-letter-spacing, -1px); --angebot-h6-size: var(--e-global-typography-3ea5a32-font-size, 24px); --angebot-h6-line: var(--e-global-typography-3ea5a32-line-height, 1.167); --angebot-h6-tracking: var(--e-global-typography-3ea5a32-letter-spacing, -0.5px); --angebot-b1-size: var(--e-global-typography-7947887-font-size, 20px); --angebot-b1-line: var(--e-global-typography-7947887-line-height, 1.3); --angebot-b2-size: var(--e-global-typography-text-font-size, 16px); --angebot-b2-line: var(--e-global-typography-text-line-height, 1.375); --angebot-b3-size: var(--e-global-typography-1a55f57-font-size, 14px); --angebot-b3-line: var(--e-global-typography-1a55f57-line-height, 1.429); /* Label 1 (Kit 41dc88f, 12 / 12 / 10) steht hier bewusst nur noch als Referenz der Skala und wird nicht mehr verwendet. Der Frame setzt es fuer Kleintexte wie den Social Proof und die Faustregel ein, auf Mobile ergibt das aber 10px, und das liest sich nicht mehr komfortabel. Diese Stellen laufen deshalb eine Stufe hoeher auf b3 (14 / 14 / 12). */ --angebot-label-size: var(--e-global-typography-41dc88f-font-size, 12px); --angebot-label-line: var(--e-global-typography-41dc88f-line-height, 1.167); /* label 2, im Kit das 10px-Set dae0216 mit 1.2, im Frame 10 / 14. */ --angebot-label2-size: var(--e-global-typography-dae0216-font-size, 10px); --angebot-label2-line: var(--e-global-typography-dae0216-line-height, 1.2); /* Buttons */ --angebot-btn-size: 16px; /* Size/button 1 */ --angebot-btn-line: 20px; /* Line Height/button 1 */ --angebot-btn-padding: 16px 24px; /* Spacing/16 und Spacing/24 */ /* BEWUSSTE ABWEICHUNG VOM FRAME: Figma zeichnet 32px, saemtliche Buttons der Webseite (Header, Footer, Startseite) laufen auf 52px. Einheitlichkeit geht hier vor, entschieden am 31.07.2026. */ --angebot-btn-radius: 52px; --angebot-btn-primary-bg: var(--e-global-color-5c1d8c2, #080808); --angebot-btn-primary-text: var(--e-global-color-fb2a58b, #ffffff); --angebot-btn-secondary-bg: var(--e-global-color-9e247d7, rgba(8, 8, 8, 0.08)); --angebot-btn-secondary-text: var(--e-global-color-5c1d8c2, #080808); } /*============ Bilder: Layout-Shift vermeiden ============*/ /* Gilt bewusst auf allen Breiten, nicht nur ab 1025px. Das Seitenverhaeltnis 1:1 stammt aus dem Frame (632x632 in Hero und Kurzbeschrieb) und reserviert den Platz, bevor das Bild geladen ist. */ .angebot-page .angebot-hero__bild img, .angebot-page .angebot-kurzbeschrieb__bild img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--angebot-radius);} /*============ Sprungziele ============*/ /* Der Header liegt fest ueber dem Inhalt, gemessen 86px auf Desktop und Tablet, 69px auf Mobile. Ohne Versatz landet eine angesprungene Sektion mit ihrer Oberkante bei null und verschwindet darunter. scroll-margin-top haelt sie frei. Gilt fuer jede Sektion, damit auch kuenftige Anker funktionieren. Weiches Scrollen bringt das Theme bereits mit (scroll-behavior: smooth). */ .angebot-page { --angebot-anker-versatz: 86px;} .angebot-page .angebot-sektion { scroll-margin-top: var(--angebot-anker-versatz);} @media (max-width: 767px) { .angebot-page { --angebot-anker-versatz: 69px;} } /*============ Vertikale Abstaende der Sektionen ============*/ /* * Jede Sektion bringt ihren Abstand selbst mit. Das ist die einzige Stelle, * an der er steht. * * Vorher setzte jede Sektion ihn einzeln, und wer es vergass, bekam still * gar keinen. Genau das ist passiert: die Eckdaten und die Variante * "Hintergrund" von Text/Bild/CTA standen bewusst auf padding 0, weil im * Frame links und rechts weisse Nachbarn stehen, die den Abstand liefern. * Sobald ein Nachbar wegfaellt oder einen anderen Grundton hat, klebt die * Karte an der Farbkante. Beim Ausblenden der Referenzen war die FAQ mit * ihrem grauen Grund der neue Nachbar, und der weisse Bereich endete exakt * an der Kartenkante. * * Ebenso ohne eigene Regel und damit ohne Abstand waren die Varianten "Links" * und "Rechts" von Text/Bild/CTA sowie der Zweispaltentext. Beide waeren auf * der naechsten Angebotsseite aufgefallen. * * Zwei Ausnahmen bleiben, beide bewusst und unten bei der jeweiligen Sektion * begruendet: der Hero traegt oben zusaetzlich den Header-Versatz, und die * Staffelpreise ruecken oben naeher an das Formular, zu dem sie gehoeren. */ .angebot-page .angebot-sektion { padding: var(--angebot-section-padding) 0; margin: 0;} /*============ Entry-Animation ============*/ /* Gleiche Anmutung wie auf den uebrigen Seiten: dieselben Keyframes byW3nutsFadeInUp aus assets/css/style.css, 1.25s, ease, 30px Versatz. Nicht dieselben Klassennamen wie bei Elementor, weil unser Markup keine Elementor-Elemente enthaelt und fadeInUp.min.css hier gar nicht geladen wird. Beide Klassen setzt assets/js/angebot-animation.js, und zwar auf den Inhaltscontainer, nicht auf die Sektion. Der vollflaechige Hintergrund einer Sektion soll stehen bleiben und nicht mitblenden. Auf den uebrigen Seiten haengt die Animation ebenfalls an den 1280px breiten Inhaltscontainern. Ohne JavaScript greift keine der Regeln und die Seite ist vollstaendig sichtbar. Die erste Sektion wird nie versteckt, sie traegt das LCP-Element. */ .angebot-page.angebot-anim-aktiv .angebot-anim { visibility: hidden;} .angebot-page .angebot-anim.angebot-anim--sichtbar { visibility: visible; animation-name: byW3nutsFadeInUp; animation-duration: 1.25s; animation-timing-function: ease; animation-fill-mode: none;} /*============ Sektionen ============*/ /* * Diese Regeln gelten auf allen Breiten. Farben, Typografie, Radien und * Kartenflaechen sind breitenunabhaengig, nur das Spaltenlayout ist es nicht. * Deshalb steht am Dateiende ein Block ab max-width 1024px, der ausschliesslich * umbricht: mehrspaltig wird einspaltig, feste Breiten werden fluid. * * Breakpoints wie im Elementor-Kit dieser Webseite: Tablet ab 768, Desktop ab * 1025. Fuer Mobile gibt es keinen Figma-Frame. Die Werte stammen deshalb * gemessen aus dem Bestand der Live-Seite, nicht geschaetzt: 16px Seitenrand * pro Seite und 48px Sektionspolsterung. * * Die Schriftgroessen brauchen hier nichts: die Kit-Sets bringen eigene * Tablet- und Mobilwerte mit (h1 72/54/48, h2 48/42/36, h3 40/38/32, b1 * 20/18/16), und unsere Tokens verweisen darauf. */ /* hello-elementor begrenzt .site-main auf 1140px und zentriert es. Die Angebotsseiten sind ein Sektionslayout mit vollflaechigen Hintergruenden, deshalb wird die Begrenzung hier aufgehoben. Die Inhaltsbreite setzt danach jede Sektion selbst ueber ihren __inner-Container. Der Selektor ist bewusst laenger als noetig: die Theme-Regel lautet `body:not([class*="elementor-page-"]) .site-main` und hat damit Spezifitaet (0,2,1). `body main.angebot-page.site-main` kommt auf (0,2,2) und gewinnt unabhaengig von der Ladereihenfolge. */ body main.angebot-page.site-main { max-width: none; width: 100%; margin-inline: 0; padding-inline: 0;} /*======== Tag ========*/ /* Gemeinsames Element aus dem Intro-Block des Frames, das ueber mehreren Sektionen wiederkehrt, deshalb einmal zentral statt pro Sektion. Der Grund richtet sich nach der Sektion: auf weissem Grund Background/Depth, auf Background/Base weiss. So bleibt der Tag in beiden Faellen abgesetzt. */ .angebot-page .angebot-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--angebot-space-4); font-family: var(--angebot-font-body); font-size: var(--angebot-label2-size); line-height: var(--angebot-label2-line); color: var(--angebot-text-strong); letter-spacing: normal; font-weight: normal; white-space: nowrap; background: var(--angebot-bg-depth); border-radius: var(--angebot-radius); margin: 0; padding: var(--angebot-space-4) var(--angebot-space-8);} /* Oben zusaetzlich die Headerhoehe: der Header liegt fest ueber dem Inhalt und ist aus dem Fluss. Ohne das beginnt der Breadcrumb bei 80px, der Header endet aber erst bei 86px, und die Oberkante der Zeile wird angeschnitten. Eingeloggt faellt es nicht auf, weil die Adminleiste alles um 32px nach unten schiebt. Im Frame beginnt der Hero ebenfalls unter der 86px hohen Navigation. Gleiche Variable wie beim Ankersprung, damit die Headerhoehe nur an einer Stelle steht. Der Zuschlag ist bewusst kleiner als die volle Sektionspolsterung: der Header deckt die oberen 86px ohnehin ab, sichtbar bleibt nur der Rest. 24px darunter reichen als Luft, 80px wirkten zu leer. */ .angebot-page .angebot-hero { background: var(--angebot-bg-base); padding: calc(var(--angebot-anker-versatz) + var(--angebot-space-24)) 0 var(--angebot-section-padding); margin: 0;} .angebot-page .angebot-hero__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; flex-direction: column; gap: var(--angebot-space-24);} /* Der Kit setzt auf h1, h2 und h3 durchgehend -1px Laufweite, ausgelegt auf 72, 48 und 40px. Ueberall dort, wo eine Ueberschrift auf Body-Groesse heruntergesetzt wird, muss die Laufweite mit zurueck auf normal: bei 14px waeren -1px sonst sieben Prozent der Schriftgroesse und der Satz klebt. Der Frame gibt fuer alle Body-Rollen b1, b2, b3 und Label ebenfalls 0 an. */ /*---- Breadcrumb ----*/ /* Groesse und Zeilenhoehe muessen auch auf a und span stehen: der Link bringt aus dem Theme eine eigene Schriftgroesse mit und wuerde die Vererbung von der Liste sonst ueberschreiben. */ .angebot-page .angebot-hero__breadcrumb-liste { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--angebot-space-8); margin: 0; padding: 0; font-family: var(--angebot-font-body); font-weight: normal;} .angebot-page .angebot-hero__breadcrumb-liste, .angebot-page .angebot-hero__breadcrumb-liste a, .angebot-page .angebot-hero__breadcrumb-liste span, .angebot-page .angebot-hero__breadcrumb-eintrag::before { font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line);} .angebot-page .angebot-hero__breadcrumb-eintrag { display: flex; align-items: center; gap: var(--angebot-space-8); margin: 0; padding: 0;} .angebot-page .angebot-hero__breadcrumb-eintrag + .angebot-hero__breadcrumb-eintrag::before { content: "/"; color: var(--angebot-text-subtle);} .angebot-page .angebot-hero__breadcrumb-eintrag a { color: var(--angebot-text-subtle); text-decoration: none; transition: color 0.2s ease-in-out;} .angebot-page .angebot-hero__breadcrumb-eintrag a:hover { color: var(--angebot-text-strong);} .angebot-page .angebot-hero__breadcrumb-eintrag [aria-current="page"] { color: var(--angebot-text-strong);} /*---- Raster ----*/ .angebot-page .angebot-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--angebot-column-gap); align-items: center;} /*---- Inhalt ----*/ .angebot-page .angebot-hero__inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-16); padding-right: var(--angebot-space-32); min-width: 0;} /* Bewusst ohne jede Typografie-Angabe: h1 und Fliesstext haengen an der globalen Definition des Elementor-Kits (.elementor-kit-7 h1 sowie die Body-Typo). Groesse, Familie, Laufweite und Farbe stimmen ohnehin mit dem Frame ueberein, bei der Zeilenhoehe gilt der Bestand. Wer die Typografie in den Elementor-Site-Settings aendert, aendert damit auch den Hero. Hier steht nur der Abstands-Reset. */ .angebot-page .angebot-hero__titel { line-height: var(--angebot-h1-line); margin: 0; padding: 0;} .angebot-page .angebot-hero__text > :first-child { margin-top: 0;} .angebot-page .angebot-hero__text > :last-child { margin-bottom: 0;} /*---- Buttons ----*/ /* Der Abstand zum Text ist 32px: 16px Grid-Gap plus 16px hier. */ .angebot-page .angebot-hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--angebot-space-8); margin: var(--angebot-space-16) 0 0 0; padding: 0;} /* Kein gap: der Hover-Punkt aus style.css ist ein ::after-Flexkind und rechnet mit margin-left -6px zu 12px. Ein zusaetzlicher Gap wuerde die Animation verschieben. Timing 0.3s wie bei allen uebrigen Buttons. */ /* Ohne Rahmen: der Frame zeichnet 1px, saemtliche Buttons der Webseite laufen auf border-width 0. Es gilt der Bestand. */ .angebot-page .angebot-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--angebot-font-body); font-size: var(--angebot-btn-size); line-height: var(--angebot-btn-line); font-weight: normal; text-decoration: none; border: 0; border-radius: var(--angebot-btn-radius); padding: var(--angebot-btn-padding); transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;} .angebot-page .angebot-btn--primaer { color: var(--angebot-btn-primary-text); background: var(--angebot-btn-primary-bg);} .angebot-page .angebot-btn--sekundaer { color: var(--angebot-btn-secondary-text); background: var(--angebot-btn-secondary-bg);} /*======== Trust / Logos ========*/ /* Frame-Node 3162:1962. Weisser Grund, Padding 80, Gap 24, zentrierter Text, darunter 9 Logo-Boxen a 100x100 mit space-between ueber 1280px. Das ergibt im Frame genau 47.5px Abstand, was space-between hier von selbst herstellt. */ .angebot-page .angebot-trust { background: var(--angebot-bg-lift-solid);} .angebot-page .angebot-trust__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--angebot-space-24);} /* Klein und zentriert, obwohl es semantisch ein h2 ist. Farbe und Groesse kommen aus dem Kit, nicht aus dem Frame. */ .angebot-page .angebot-trust__titel { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-medium); letter-spacing: normal; font-weight: normal; text-align: center; margin: 0; padding: 0;} /* Endlosband statt fester Reihe. Der Frame zeigt neun Logos in einer Zeile mit space-between, das bricht unterhalb von 1025px aber auf drei Zeilen um und blaeht die Sektion auf. Als Band bleibt es auf jeder Breite eine Zeile. Die Spur enthaelt die Liste zweimal und wandert um genau 50 Prozent ihrer Breite. Damit der Uebergang nahtlos ist, darf zwischen den Logos kein gap stehen: bei 14 Elementen mit gap waeren es 13 Abstaende, die Haelfte davon ginge nicht auf. Der Abstand haengt deshalb als margin-right an jedem Logo, dann ist jedes Element gleich breit inklusive Abstand. */ .angebot-page .angebot-trust__laufband { width: 100%; overflow: hidden;} /* Die Dauer skaliert mit der Laenge der Spur. trust.php wiederholt den Logosatz so oft, bis eine Haelfte mindestens das Sichtfenster fuellt, und legt den Faktor als --angebot-laufband-faktor an die Spur. Ohne diesen Ausgleich liefe ein doppelt so langes Band doppelt so schnell. Fehlt die Variable, gilt 1 und es bleibt beim Wert des Breakpoints. */ .angebot-page .angebot-trust__spur { width: max-content; display: flex; animation: angebot-laufband calc(var(--angebot-laufband-dauer) * var(--angebot-laufband-faktor, 1)) linear infinite;} .angebot-page .angebot-trust__logos { list-style: none; display: flex; align-items: center; margin: 0; padding: 0;} .angebot-page .angebot-trust__logo { width: var(--angebot-logo-box); height: var(--angebot-logo-box); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin: 0 var(--angebot-logo-abstand) 0 0; padding: var(--angebot-space-16) 0;} @keyframes angebot-laufband { from { transform: translateX(0);} to { transform: translateX(-50%);} } /* Beim Zeigen anhalten, damit ein einzelnes Logo in Ruhe lesbar ist. */ .angebot-page .angebot-trust__laufband:hover .angebot-trust__spur { animation-play-state: paused;} /* Wer Bewegung reduziert haben will, bekommt eine ruhende Zeile, die sich bei Bedarf von Hand schieben laesst. */ @media (prefers-reduced-motion: reduce) { .angebot-page .angebot-trust__spur { animation: none;} .angebot-page .angebot-trust__laufband { overflow-x: auto;} } /* Im Frame ist das Padding pro Logo optisch nachjustiert, mal ringsum, mal nur vertikal. Hier steht eine Regel fuer alle: vertikal 16px, horizontal volle Breite, dazu contain. Damit wird nie beschnitten, und breite Logos nutzen die volle Boxbreite wie im Frame. */ .angebot-page .angebot-trust__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain;} /*======== Vergleich ========*/ /* Frame-Nodes 3165:2058 und 3165:2062. Grund Background/Depth, also eine Stufe dunkler als die Nachbarsektionen, damit sich die weissen Karten abheben. Zweispaltig: links 416 mit Intro und Faustregel, rechts 740 mit den Optionskarten, beide Spalten mittig zueinander. */ .angebot-page .angebot-vergleich { background: var(--angebot-bg-depth);} .angebot-page .angebot-vergleich__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--angebot-space-32);} .angebot-page .angebot-vergleich__rail { flex: 0 1 var(--angebot-vergleich-rail); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-32);} .angebot-page .angebot-vergleich__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-16);} .angebot-page .angebot-vergleich__titel { margin: 0; padding: 0;} .angebot-page .angebot-vergleich__text { font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-medium);} .angebot-page .angebot-vergleich__text > :first-child { margin-top: 0;} .angebot-page .angebot-vergleich__text > :last-child { margin-bottom: 0;} /* Sektion steht auf Background/Depth, der Tag wechselt deshalb auf weiss. */ .angebot-page .angebot-vergleich .angebot-tag { background: var(--angebot-bg-lift-solid);} /*---- Faustregel ----*/ /* Das Info-Zeichen ist im Frame ein SVG mit stroke #56A100. Als Hintergrundbild statt als Markup, damit das Partial keine Grafik kennt. */ .angebot-page .angebot-vergleich__faustregel { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; column-gap: var(--angebot-space-12); row-gap: var(--angebot-space-4); background: var(--angebot-bg-base); border-radius: var(--angebot-radius); margin: 0; padding: var(--angebot-space-12);} .angebot-page .angebot-vergleich__faustregel::before { content: ''; grid-column: 1; grid-row: 1 / 3; align-self: center; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24.8333 24.8333' fill='none'%3E%3Cpath d='M12.4167 17.0833V12.4167M12.4167 7.75H12.4283M24.0833 12.4167C24.0833 18.86 18.86 24.0833 12.4167 24.0833C5.97334 24.0833 0.75 18.86 0.75 12.4167C0.75 5.97334 5.97334 0.75 12.4167 0.75C18.86 0.75 24.0833 5.97334 24.0833 12.4167Z' stroke='%2356A100' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain;} .angebot-page .angebot-vergleich__faustregel-label, .angebot-page .angebot-vergleich__faustregel-text { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); letter-spacing: normal; font-weight: normal;} .angebot-page .angebot-vergleich__faustregel-label { grid-column: 2; grid-row: 1; color: var(--angebot-text-strong); margin: 0; padding: 0;} .angebot-page .angebot-vergleich__faustregel-text { grid-column: 2; grid-row: 2; min-width: 0; color: var(--angebot-text-subtle);} .angebot-page .angebot-vergleich__faustregel-text > :first-child { margin-top: 0;} .angebot-page .angebot-vergleich__faustregel-text > :last-child { margin-bottom: 0;} /*---- Optionskarten ----*/ .angebot-page .angebot-vergleich__modelle { flex: 0 1 var(--angebot-vergleich-karten); min-width: 0; list-style: none; display: flex; flex-direction: column; gap: var(--angebot-column-gap); margin: 0; padding: 0;} .angebot-page .angebot-vergleich__modell { display: flex; align-items: flex-start; gap: var(--angebot-space-32); background: var(--angebot-bg-lift-solid); border-radius: var(--angebot-radius); overflow: hidden; margin: 0; padding: var(--angebot-space-24);} .angebot-page .angebot-vergleich__bild { width: var(--angebot-vergleich-bild); height: var(--angebot-vergleich-bild); flex: 0 0 auto; background: var(--angebot-bg-base); border-radius: var(--angebot-radius-sm); overflow: hidden;} .angebot-page .angebot-vergleich__bild img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: var(--angebot-radius-sm);} .angebot-page .angebot-vergleich__modell-inhalt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-16);} .angebot-page .angebot-vergleich__modell-titel { font-family: var(--angebot-font-bold); font-size: var(--angebot-b1-size); line-height: var(--angebot-b1-line); color: var(--angebot-text-heading); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-vergleich__modell-preis { font-family: var(--angebot-font-bold); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-strong); font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-vergleich__modell-text { font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-medium);} .angebot-page .angebot-vergleich__modell-text > :first-child { margin-top: 0;} .angebot-page .angebot-vergleich__modell-text > :last-child { margin-bottom: 0;} /*---- Punkteliste ----*/ /* Der Punkt ist im Frame ein SVG-Kreis mit stroke #56A100, also die Primaerfarbe des Kits. Hier als CSS-Kreis, damit kein Asset noetig ist. */ .angebot-page .angebot-vergleich__specs { width: 100%; display: flex; flex-direction: column; gap: var(--angebot-space-8); margin: 0; padding: 0;} .angebot-page .angebot-vergleich__spec { display: flex; align-items: baseline; gap: var(--angebot-space-8); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-medium);} .angebot-page .angebot-vergleich__spec::before { content: ""; width: 5px; height: 5px; flex: 0 0 auto; align-self: center; border-radius: 50%; background: var(--e-global-color-primary, #56A100);} .angebot-page .angebot-vergleich__spec dt { font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-vergleich__spec dd { color: var(--angebot-text-subtle); margin: 0; padding: 0;} .angebot-page .angebot-vergleich__spec dd:empty { display: none;} /*======== Karten-Grid ========*/ /* Karte aus Frame-Node 3261:39419 (Spec - Card): Grund Background/Base mit feinem Rand auf weisser Sektion, Radius 8, dreiteilig aus Kopf, weissem Bildpanel und Fusszeile. Der Frame stellt Titel und Text in eine linke Spalte neben das Raster. Unser Layout setzt sie darueber, so im Plan festgelegt, damit dasselbe Layout auch fuer Chips und Druckvarianten taugt. */ .angebot-page .angebot-karten-grid { background: var(--angebot-bg-lift-solid);} .angebot-page .angebot-karten-grid__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--angebot-space-16);} .angebot-page .angebot-karten-grid__titel { margin: 0; padding: 0;} .angebot-page .angebot-karten-grid__text { max-width: var(--angebot-lesebreite);} .angebot-page .angebot-karten-grid__text > :first-child { margin-top: 0;} .angebot-page .angebot-karten-grid__text > :last-child { margin-bottom: 0;} /* Der Rail ist standardmaessig aufgeloest, damit Chip und Merkmal wie bisher einspaltig untereinander laufen. Nur die Spezifikation macht daraus eine eigene Spalte, siehe unten. */ .angebot-page .angebot-karten-grid__rail { display: contents;} /*---- Variante Spezifikation: Rail neben dem Raster ----*/ /* Frame-Node 3261:39250. Links 400 mit Intro und Download-Block, rechts 816 mit dem Kartenraster, dazwischen 64. Ergibt zusammen die 1280 des Containers. Bei den anderen Varianten bleibt es beim Stapel, deren Karten brauchen die volle Breite. */ .angebot-page .angebot-karten-grid--spec .angebot-karten-grid__inner { display: grid; grid-template-columns: var(--angebot-karten-rail) 1fr; column-gap: var(--angebot-space-64); align-items: start;} .angebot-page .angebot-karten-grid--spec .angebot-karten-grid__rail { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-16);} /* Die Kartenliste laeuft ueber beide Zeilen, damit die Fussnote in der linken Spalte direkt unter dem Textblock stehen kann. Vorher lief sie ueber die volle Breite (grid-column 1 / -1) und landete unterhalb der Karten im Leeren, weil die Zeilenhoehe von der hoeheren Kartenspalte bestimmt wird. Links Text mit Fussnote, rechts die Karten. */ .angebot-page .angebot-karten-grid--spec .angebot-karten-grid__liste { grid-column: 2; grid-row: 1 / span 2; margin-top: 0;} .angebot-page .angebot-karten-grid--spec .angebot-karten-grid__fussnote { grid-column: 1; grid-row: 2; margin-top: var(--angebot-space-24);} /* Im Rail steht der Kasten allein in seiner Spalte und nutzt sie ganz. */ .angebot-page .angebot-karten-grid--spec .angebot-karten-grid__download { max-width: none; width: 100%; margin-top: var(--angebot-space-16);} /*---- Download-Block ----*/ /* Frame-Node 3261:39256. Kasten auf Background/Depth mit Dokumentzeichen, Titel, Text und einem Button ueber die volle Kastenbreite. Im Frame steht er in der linken Spalte neben dem Raster, unser Layout setzt Intro und Raster untereinander, deshalb sitzt er zwischen Text und Karten. Das Zeichen liegt als Daten-URI im CSS, gleiches Muster wie beim Faustregel- und Social-Proof-Kasten. */ .angebot-page .angebot-karten-grid__download { box-sizing: border-box; max-width: var(--angebot-download-breite); display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-4); background: var(--angebot-bg-depth); border-radius: var(--angebot-radius); margin: var(--angebot-space-16) 0 0 0; padding: var(--angebot-space-32);} .angebot-page .angebot-karten-grid__download::before { content: ''; width: var(--angebot-download-icon); height: var(--angebot-download-icon); margin: 0 0 var(--angebot-space-12) 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='39' viewBox='0 0 30.8333 38.1667' fill='none'%3E%3Cpath d='M19.0833 0.750006H4.41667C3.44421 0.750006 2.51157 1.13631 1.82394 1.82395C1.13631 2.51158 0.75 3.44421 0.75 4.41667V33.75C0.75 34.7225 1.13631 35.6551 1.82394 36.3427C2.51157 37.0304 3.44421 37.4167 4.41667 37.4167H26.4167C27.3891 37.4167 28.3218 37.0304 29.0094 36.3427C29.697 35.6551 30.0833 34.7225 30.0833 33.75V11.75M19.0833 0.750006C19.6637 0.749065 20.2385 0.862943 20.7746 1.08508C21.3108 1.30722 21.7977 1.63323 22.2073 2.04434L28.7853 8.62234C29.1975 9.0321 29.5245 9.51947 29.7473 10.0563C29.9701 10.5931 30.0843 11.1688 30.0833 11.75M19.0833 0.750006V9.91667C19.0833 10.4029 19.2765 10.8692 19.6203 11.213C19.9641 11.5569 20.4304 11.75 20.9167 11.75L30.0833 11.75M11.75 13.5833H8.08333M22.75 20.9167H8.08333M22.75 28.25H8.08333' stroke='%2356A100' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left center; background-size: contain;} .angebot-page .angebot-karten-grid__download-titel { font-family: var(--angebot-font-bold); font-size: var(--angebot-b1-size); line-height: var(--angebot-b1-line); color: var(--angebot-text-heading); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-karten-grid__download-text { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-medium);} .angebot-page .angebot-karten-grid__download-text > :first-child { margin-top: 0;} .angebot-page .angebot-karten-grid__download-text > :last-child { margin-bottom: 0;} /* Hervorhebungen im Text tragen die kraeftigere Textfarbe, so wie im Frame die Anzahl der Versionen. */ .angebot-page .angebot-karten-grid__download-text strong, .angebot-page .angebot-karten-grid__download-text b { font-family: var(--angebot-font-bold); color: var(--angebot-text-strong); font-weight: normal;} .angebot-page .angebot-karten-grid__download-aktion { width: 100%; margin: var(--angebot-space-28) 0 0 0; padding: 0;} .angebot-page .angebot-karten-grid__download-aktion .angebot-btn { width: 100%;} /* Abstand Text zum Raster ist 32: 16px Gap plus 16px hier. */ .angebot-page .angebot-karten-grid__liste { list-style: none; display: grid; grid-template-columns: repeat(var(--angebot-karten-spalten, 3), minmax(0, 1fr)); gap: var(--angebot-column-gap); margin: var(--angebot-space-16) 0 0 0; padding: 0;} .angebot-page .angebot-karten-grid__liste--2 { --angebot-karten-spalten: 2;} .angebot-page .angebot-karten-grid__liste--3 { --angebot-karten-spalten: 3;} .angebot-page .angebot-karten-grid__liste--4 { --angebot-karten-spalten: 4;} .angebot-page .angebot-karten-grid__karte { display: flex; flex-direction: column; align-items: stretch; background: var(--angebot-bg-base); border: 1px solid var(--angebot-border-subtle); border-radius: var(--angebot-radius-sm); overflow: hidden; margin: 0; padding: 0;} /*---- Kartenkopf ----*/ /* Gestapelt: der Chip steht immer unter dem Titel, nie daneben. Vorher stand hier eine Reihe mit flex-wrap und space-between. Damit entschied allein die Textlaenge, ob der Chip neben den Titel passte oder umbrach, und eine Kartenreihe zeigte ihn mal rechts oben, mal darunter. In der Sektion "Masse und Schweizer Norm" lagen so zwei Karten unter dem Titel und eine daneben. align-items: flex-start ist hier tragend und kein Beiwerk: ohne die Angabe streckt der Standardwert stretch die Pille ueber die ganze Kartenbreite, weil sie Hintergrund und Radius traegt. Deshalb die Ausrichtung am Container und keine Breitenangabe am Chip selbst. Dieselbe Spaltenanordnung nutzt bereits die Variante Merkmal, die den Chip zusaetzlich per order ueber den Titel zieht. */ .angebot-page .angebot-karten-grid__karte-kopf { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: var(--angebot-space-8); padding: var(--angebot-space-12);} .angebot-page .angebot-karten-grid__karte-titel { font-family: var(--angebot-font-bold); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-strong); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} /* Das Mass steht im Frame als kleiner Tag auf weissem Grund. */ .angebot-page .angebot-karten-grid__karte-untertitel { flex: 0 0 auto; font-family: var(--angebot-font-body); font-size: var(--angebot-label2-size); line-height: var(--angebot-label2-line); color: var(--angebot-text-strong); font-weight: normal; background: var(--angebot-bg-lift-solid); border-radius: var(--angebot-radius); margin: 0; padding: var(--angebot-space-4) var(--angebot-space-8);} /*---- Bildpanel ----*/ /* Feste Hoehe wie im Frame, Bild darin zentriert und vollstaendig sichtbar. Kein cover: die Karten zeigen technische Zeichnungen, die nicht beschnitten werden duerfen. */ .angebot-page .angebot-karten-grid__bild { height: var(--angebot-panel-hoehe); display: flex; align-items: center; justify-content: center; background: var(--angebot-bg-lift-solid); overflow: hidden;} .angebot-page .angebot-karten-grid__bild img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; border-radius: 0;} /*---- Kartenfuss ----*/ .angebot-page .angebot-karten-grid__karte-fuss { display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-4); padding: var(--angebot-space-12);} .angebot-page .angebot-karten-grid__karte-text { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-medium);} .angebot-page .angebot-karten-grid__karte-text > :first-child { margin-top: 0;} .angebot-page .angebot-karten-grid__karte-text > :last-child { margin-bottom: 0;} .angebot-page .angebot-karten-grid__karte-preis { font-family: var(--angebot-font-bold); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-strong); font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-karten-grid__karte-aktion { margin: auto 0 0 0; padding: var(--angebot-space-8) 0 0 0;} /* Textlink mit Pfeil statt blankem Standardlink. Das Link-Feld der Karte war bis hierher auf keiner Seite gesetzt und hatte keine einzige Regel, diese Gestaltung kann also nichts Bestehendes veraendern. Der Pfeil sitzt als ::after und ist dasselbe SVG wie im Angebots-Raster, damit beide Kartenarten dieselbe Sprache sprechen. */ .angebot-page .angebot-karten-grid__karte-link { display: inline-flex; align-items: center; gap: var(--angebot-space-8); font-family: var(--angebot-font-bold); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-heading); text-decoration: none;} .angebot-page .angebot-karten-grid__karte-link::after { content: ''; width: 16px; height: 16px; flex: 0 0 auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10H16M11 5L16 10L11 15' stroke='%23080808' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; transition: all 0.3s ease-in-out;} /* Derselbe Pfeildreh wie auf den Produktkarten und auf der Startseite. */ .angebot-page .angebot-karten-grid__karte-link:hover::after { transform: rotate(-45deg);} .angebot-page .angebot-karten-grid__karte-link:hover { text-decoration: underline; text-underline-offset: 4px;} /* Die ganze Karte klickbar, nicht nur die Textzeile. Bei den Produktkarten umschliesst der Link ohnehin alles, hier zieht ein ::before des vorhandenen Links die Flaeche auf. Bewusst kein zweiter Link um Bild oder Titel: zwei Links auf dasselbe Ziel stehen doppelt im Zugaenglichkeitsbaum und werden von Screenreadern zweimal angesagt. So bleibt es ein Link, der nur groesser ist. Preis der Loesung: Text in der Karte laesst sich nicht mehr markieren. Bei einer Teaser-Kachel ist das vertretbar. */ .angebot-page .angebot-karten-grid__karte:has(.angebot-karten-grid__karte-link) { position: relative;} .angebot-page .angebot-karten-grid__karte-link::before { content: ''; position: absolute; inset: 0; z-index: 1;} .angebot-page .angebot-karten-grid__fussnote { max-width: var(--angebot-lesebreite); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-subtle); margin: var(--angebot-space-8) 0 0 0;} /*---- Variante: Chip, als Pills ----*/ /* Frame-Node 3466:26097 zeichnet ein Dreierraster aus gleich breiten Zeilen. Auf allen Breiten laufen die Duftnoten stattdessen als Pills im Fluss um. Bewusste Abweichung vom Frame: neun Namen zwischen "Life" und "Apple-cinnamon" in gleich breite Zellen zu zwingen wirkt starr, und mit leeren Bildfeldern erst recht. Deshalb wird das Raster hier zu flex. Mit Rasterspalten haetten alle Pills dieselbe Breite und der ganze Effekt waere weg. Die Spaltenwahl im Backend bleibt fuer diese Variante folgenlos. Die Karte behaelt ihr Markup: die DOM-Reihenfolge ist Kopf vor Bild, order dreht es. Das Bild wird zum runden Punkt vor dem Namen, damit die Pill auch dann traegt, wenn spaeter Duftnoten-Bilder dazukommen. */ .angebot-page .angebot-karten-grid--chip .angebot-karten-grid__liste { display: flex; flex-wrap: wrap; gap: var(--angebot-space-8); margin-top: var(--angebot-space-24);} .angebot-page .angebot-karten-grid--chip .angebot-karten-grid__karte { width: auto; flex: 0 0 auto; flex-direction: row; align-items: center; gap: var(--angebot-space-8); background: var(--angebot-bg-base); border: 0; border-radius: 999px; padding: var(--angebot-space-8) var(--angebot-space-16);} .angebot-page .angebot-karten-grid--chip .angebot-karten-grid__bild { order: -1; width: var(--angebot-chip-punkt); height: var(--angebot-chip-punkt); flex: 0 0 auto; border-radius: 999px; background: transparent; margin-left: calc(var(--angebot-space-8) * -1);} .angebot-page .angebot-karten-grid--chip .angebot-karten-grid__bild img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px;} .angebot-page .angebot-karten-grid--chip .angebot-karten-grid__karte-kopf { flex: 1 1 auto; padding: 0;} .angebot-page .angebot-karten-grid--chip .angebot-karten-grid__karte-titel { font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line);} .angebot-page .angebot-karten-grid--chip .angebot-karten-grid__karte-fuss { padding: 0;} /*---- Variante: Merkmal ----*/ /* Frame-Node 3466:26548. Umgekehrt zur Spezifikationskarte: die Sektion steht auf Background/Base, die Karte ist weiss und ohne Rand. */ .angebot-page .angebot-karten-grid--feature { background: var(--angebot-bg-base);} .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__text { color: var(--angebot-text-medium);} /* Abstand Intro zum Raster ist 48: 16px Gap plus 32px hier. */ .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__liste { margin-top: var(--angebot-space-32);} .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__karte { background: var(--angebot-bg-lift-solid); border: 0; border-radius: var(--angebot-radius); padding: var(--angebot-space-24);} /* Merkmal-Karte MIT Bild. Ohne diese Regeln erbt das Bild die Vorgaben der Spezifikationskarte: feste Panelhoehe, object-fit contain und weisser Grund. Das ist fuer die Strichzeichnungen der Stanzformen gemacht. Ein Foto schwebt darin mit weissen Raendern zwischen Titel und Text. Hier stattdessen das Muster der Produktkarten und der Service-Karten auf der Startseite: Bild oben, randlos, cover. Die :has()-Klammer ist tragend. Merkmal-Karten ohne Bild gibt es auf allen vier Produktseiten, nachgezaehlt keine einzige mit Bild. Die bleiben so, wie sie sind, weil das Partial ohne Bild gar kein __bild-Element ausgibt. */ .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__karte:has(.angebot-karten-grid__bild) { overflow: hidden; padding: 0;} /* order: -1 zieht das Bild ueber den Kopf. Die DOM-Reihenfolge bleibt Kopf vor Bild, wie bei der Chip-Variante, die denselben Kniff nutzt. */ .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__bild { order: -1; display: block; width: 100%; height: auto; aspect-ratio: 302 / 180; background: var(--angebot-bg-depth); border-radius: 0;} .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__bild img { width: 100%; height: 100%; max-width: none; max-height: none; display: block; object-fit: cover; transition: all 0.3s ease-in-out;} /* Derselbe Hover wie auf den Produktkarten und der Startseite. */ .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__karte:hover .angebot-karten-grid__bild img { transform: scale(1.05); filter: blur(5px);} /* Das Polster wandert von der Karte in ihre Teile, sonst haette das randlose Bild wieder einen Rahmen. */ .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__karte:has(.angebot-karten-grid__bild) .angebot-karten-grid__karte-kopf { padding: var(--angebot-space-24) var(--angebot-space-24) 0 var(--angebot-space-24);} .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__karte:has(.angebot-karten-grid__bild) .angebot-karten-grid__karte-fuss { padding: var(--angebot-space-8) var(--angebot-space-24) var(--angebot-space-24) var(--angebot-space-24);} /* Kopf gestapelt statt nebeneinander, Bezeichnung ueber dem Wert. Der gemeinsame Kartenkopf setzt space-between und stellt Titel und Untertitel nebeneinander. Das passt zur Spezifikationskarte, wo der Untertitel die Massangabe neben dem Formnamen ist. Bei der Feature-Karte ist es umgekehrt: der Titel IST der Wert, der Untertitel seine Bezeichnung. Nebeneinander liest sich das wie zwei gleichrangige Angaben, uebereinander wie eine beschriftete Zahl. */ .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__karte-kopf { flex-direction: column; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; gap: var(--angebot-space-4); padding: 0;} /* Der Untertitel steht im Markup hinter dem Titel, hier zieht order ihn davor. So bleibt die Lesereihenfolge fuer Screenreader unveraendert. Ausserdem faellt die Pille weg: die Basisregel gibt dem Untertitel Grundton, Radius und Polster, weil er in der Spezifikationskarte ein Massangabe-Badge neben dem Titel ist. Als Bezeichnung ueber dem Wert schiebt dieses Polster den Text um 8px ein, waehrend Wert und Fliesstext darunter buendig bleiben. Der weisse Grund ist auf der weissen Karte ohnehin unsichtbar, man sah nur den Versatz. */ .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__karte-untertitel { order: -1; color: var(--angebot-text-medium); background: none; border-radius: 0; padding: 0;} .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__karte-titel { font-family: var(--angebot-font-bold); font-size: var(--angebot-b1-size); line-height: var(--angebot-b1-line);} .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__karte-fuss { gap: var(--angebot-space-8); padding: var(--angebot-space-8) 0 0 0;} .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__karte-text { font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line);} /* Sektion steht auf Background/Base, der Tag wechselt deshalb auf weiss. */ .angebot-page .angebot-karten-grid--feature .angebot-tag { background: var(--angebot-bg-lift-solid);} /*======== Einsatzbereiche ========*/ /* Frame-Node 3166:2038. Sechs Bildkarten im Dreierraster auf weissem Grund. Anders als beim Karten-Grid betraegt der Rasterabstand hier 24px, so steht es im Frame. */ .angebot-page .angebot-einsatzbereiche { background: var(--angebot-bg-lift-solid);} .angebot-page .angebot-einsatzbereiche__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--angebot-space-16);} .angebot-page .angebot-einsatzbereiche__titel { margin: 0; padding: 0;} /* Abstand Intro zum Raster ist 48: 16px Gap plus 32px hier. */ .angebot-page .angebot-einsatzbereiche__liste { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--angebot-space-24); margin: var(--angebot-space-32) 0 0 0; padding: 0;} .angebot-page .angebot-einsatzbereiche__eintrag { display: flex; flex-direction: column; align-items: stretch; background: var(--angebot-bg-base); border-radius: var(--angebot-radius); overflow: hidden; margin: 0; padding: 0;} /* Seitenverhaeltnis statt fester Hoehe, damit die Karte unterhalb von 1340px mitskaliert und der Platz vorab reserviert ist. */ .angebot-page .angebot-einsatzbereiche__bild { aspect-ratio: var(--angebot-einsatz-bild); overflow: hidden;} .angebot-page .angebot-einsatzbereiche__bild img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 0;} .angebot-page .angebot-einsatzbereiche__inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-4); padding: var(--angebot-space-24);} .angebot-page .angebot-einsatzbereiche__eintrag-titel { font-family: var(--angebot-font-bold); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-strong); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-einsatzbereiche__eintrag-text { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-medium);} .angebot-page .angebot-einsatzbereiche__eintrag-text > :first-child { margin-top: 0;} .angebot-page .angebot-einsatzbereiche__eintrag-text > :last-child { margin-bottom: 0;} /*======== Ablauf ========*/ /* Frame-Node 3476:27385. Links Intro mit fester Breite, rechts die Timeline im Rest. 524 + 64 + 692 ergibt die 1280 des Containers. */ .angebot-page .angebot-ablauf { background: var(--angebot-bg-base);} .angebot-page .angebot-ablauf__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: grid; grid-template-columns: var(--angebot-ablauf-intro) 1fr; align-items: start; gap: var(--angebot-space-64);} .angebot-page .angebot-ablauf__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-16);} .angebot-page .angebot-ablauf__titel { margin: 0; padding: 0;} /* Trennlinie unter jedem Schritt: das ergibt Linien zwischen den Schritten und eine abschliessende unter dem letzten, genau wie im Frame. Ueber dem ersten Schritt steht bewusst keine. */ .angebot-page .angebot-ablauf__liste { list-style: none; counter-reset: angebot-schritt; display: flex; flex-direction: column; margin: 0; padding: 0;} .angebot-page .angebot-ablauf__schritt { counter-increment: angebot-schritt; display: grid; grid-template-columns: var(--angebot-badge) 1fr; grid-template-rows: auto auto; align-items: start; gap: var(--angebot-space-8) var(--angebot-space-20); border-bottom: 1px solid var(--angebot-border-subtle); margin: 0; padding: var(--angebot-space-24) 0;} /* Der Badge spannt beide Zeilen, sonst wuerde seine Hoehe von 40px die erste Zeile aufblaehen und den Abstand zwischen Titel und Text zerstoeren. */ .angebot-page .angebot-ablauf__schritt::before { content: counter(angebot-schritt); grid-column: 1; grid-row: 1 / 3; box-sizing: border-box; width: var(--angebot-badge); height: var(--angebot-badge); display: flex; align-items: center; justify-content: center; font-family: var(--angebot-font-bold); font-size: var(--angebot-b1-size); line-height: var(--angebot-b1-line); color: var(--angebot-btn-primary-text); letter-spacing: normal; font-weight: normal; background: var(--angebot-text-heading); border-radius: 999px;} .angebot-page .angebot-ablauf__schritt-titel { grid-column: 2; font-family: var(--angebot-font-bold); font-size: var(--angebot-b1-size); line-height: var(--angebot-b1-line); color: var(--angebot-text-strong); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-ablauf__schritt-text { grid-column: 2; font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-medium);} .angebot-page .angebot-ablauf__schritt-text > :first-child { margin-top: 0;} .angebot-page .angebot-ablauf__schritt-text > :last-child { margin-bottom: 0;} /*======== Technische Angaben ========*/ /* Frame-Node 3503:27585. Kopfzeile mit Intro links und Button rechts auf gleicher Grundlinie, darunter der Kasten mit zwei gleich breiten Spalten. Trennlinien nur zwischen den Zeilen einer Spalte, nicht davor oder danach, deshalb der Geschwisterselektor. */ .angebot-page .angebot-technische-angaben { background: var(--angebot-bg-lift-solid);} .angebot-page .angebot-technische-angaben__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--angebot-space-48);} .angebot-page .angebot-technische-angaben__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--angebot-space-32);} .angebot-page .angebot-technische-angaben__intro { flex: 0 1 var(--angebot-technik-intro); display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-16); min-width: 0;} .angebot-page .angebot-technische-angaben__titel { margin: 0; padding: 0;} .angebot-page .angebot-technische-angaben__aktion { flex: 0 0 auto; margin: 0; padding: 0;} .angebot-page .angebot-technische-angaben__box { box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--angebot-space-48); background: var(--angebot-bg-base); border-radius: var(--angebot-radius); overflow: hidden; padding: var(--angebot-space-32);} .angebot-page .angebot-technische-angaben__gruppe { flex: 1 1 0; min-width: 0; margin: 0; padding: 0;} .angebot-page .angebot-technische-angaben__eintrag { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--angebot-space-16); padding: var(--angebot-space-16) 0;} .angebot-page .angebot-technische-angaben__eintrag + .angebot-technische-angaben__eintrag { border-top: 1px solid var(--angebot-border-subtle);} .angebot-page .angebot-technische-angaben__eintrag dt { flex: 0 0 auto; font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-medium); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-technische-angaben__eintrag dd { flex: 1 1 auto; min-width: 0; font-family: var(--angebot-font-bold); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-heading); letter-spacing: normal; font-weight: normal; text-align: right; margin: 0; padding: 0;} /*======== Abschluss-CTA ========*/ /* Frame-Node 3522:28416. Vollflaechig dunkelgruen mit abgerundeten oberen Ecken, darueber der Verlauf von #56A100 nach #0C2C09. Die Wortmarke ist NICHT der Export aus dem Frame, sondern dieselbe Datei, die der Footer der Live-Seite verwendet, byte-gleich uebernommen. Sie liegt dort mit ihren echten Massen 542 zu 400 und rechtsbuendig zum Raster. Genauso hier: feste Groesse statt gestreckt, sonst verzieht sich das Zeichen mit der Sektionshoehe. Die Buchstaben sind massiv #0C2C09 und ergeben denselben Ausstanz-Eindruck wie im Frame. Der Verlauf laeuft im Frame von -4.98% bis 84.27% der Sektionshoehe. */ .angebot-page .angebot-abschluss-cta { position: relative; background: linear-gradient(180deg, var(--e-global-color-primary, #56a100) -4.98%, var(--angebot-cta-gruen) 84.27%) var(--angebot-cta-gruen); border-radius: var(--angebot-radius-xl) var(--angebot-radius-xl) 0 0; overflow: hidden;} .angebot-page .angebot-abschluss-cta::before { content: ''; position: absolute; z-index: 0; top: 50%; right: calc((100% - min(var(--angebot-container), 100% - var(--angebot-gutter-min))) / 2); width: var(--angebot-wortmarke-breite); height: var(--angebot-wortmarke-hoehe); transform: translateY(-50%); background-image: url("../images/rh-wortmarke.svg"); background-repeat: no-repeat; background-size: var(--angebot-wortmarke-breite) var(--angebot-wortmarke-hoehe); pointer-events: none;} .angebot-page .angebot-abschluss-cta__inner { position: relative; z-index: 1; width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-32);} /* Textbreite begrenzt. Der Frame haelt den Text in einer schmalen Spalte links, die Umbrueche liegen dort nach "und" und nach "erstellen". Ueber die volle Containerbreite laufen die Zeilen sonst bis in die Wortmarke, die bei 1440 ab x=818 steht. */ .angebot-page .angebot-abschluss-cta__intro { max-width: var(--angebot-cta-text); display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-16);} .angebot-page .angebot-abschluss-cta__titel { color: var(--angebot-text-invers); margin: 0; padding: 0;} .angebot-page .angebot-abschluss-cta__text { font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-invers-strong);} .angebot-page .angebot-abschluss-cta__text > :first-child { margin-top: 0;} .angebot-page .angebot-abschluss-cta__text > :last-child { margin-bottom: 0;} /*---- Ansprechperson ----*/ .angebot-page .angebot-abschluss-cta__person { display: flex; align-items: center; gap: var(--angebot-space-16);} .angebot-page .angebot-abschluss-cta__person-bild { position: relative; width: var(--angebot-avatar); height: var(--angebot-avatar); flex: 0 0 auto; border-radius: 999px; overflow: visible;} .angebot-page .angebot-abschluss-cta__person-bild img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 999px; aspect-ratio: auto;} /* Statuspunkt aus dem Frame: 16px, Kit-Gruen mit dunklem Ring. */ .angebot-page .angebot-abschluss-cta__person-bild::after { content: ''; box-sizing: border-box; position: absolute; left: 56px; top: 4px; width: 16px; height: 16px; background: var(--e-global-color-primary, #56a100); border: 2px solid rgba(8, 8, 8, 0.64); border-radius: 999px;} .angebot-page .angebot-abschluss-cta__person-daten { min-width: 0; display: flex; flex-direction: column; align-items: flex-start;} .angebot-page .angebot-abschluss-cta__person-name { font-family: var(--angebot-font-bold); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-invers); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-abschluss-cta__person-funktion, .angebot-page .angebot-abschluss-cta__person-kontakt { font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-invers-medium); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-abschluss-cta__person-kontakt a { color: inherit; text-decoration: none; transition: color 0.2s ease-in-out;} .angebot-page .angebot-abschluss-cta__person-kontakt a:hover { color: var(--angebot-text-invers);} .angebot-page .angebot-abschluss-cta__trenner { padding: 0 var(--angebot-space-8);} /*---- Buttons: auf dunklem Grund umgekehrt ----*/ .angebot-page .angebot-abschluss-cta__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--angebot-space-12); margin: 0; padding: 0;} .angebot-page .angebot-abschluss-cta .angebot-btn--primaer { color: var(--angebot-btn-secondary-text); background: var(--angebot-btn-primary-text);} .angebot-page .angebot-abschluss-cta .angebot-btn--sekundaer { color: var(--angebot-text-invers); background: rgba(255, 255, 255, 0.08);} /*======== Verwandte Produkte ========*/ /* Frame-Node 3169:2053. Viererraster, Bild mit kleinem Radius und ohne Kartengrund. Der Preis steht in Text/Body/Strong, nicht gedimmt. */ .angebot-page .angebot-verwandte-produkte { background: var(--angebot-bg-lift-solid);} .angebot-page .angebot-verwandte-produkte__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--angebot-space-48);} /* Ohne eigene Groesse: die Ueberschrift steht ueber der vollen Containerbreite, dort gilt die Sektionsueberschrift des Kits. */ .angebot-page .angebot-verwandte-produkte__titel { margin: 0; padding: 0;} .angebot-page .angebot-verwandte-produkte__liste { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--angebot-space-24); margin: 0; padding: 0;} .angebot-page .angebot-verwandte-produkte__eintrag { display: flex; flex-direction: column; align-items: stretch; gap: var(--angebot-space-16); margin: 0; padding: 0;} .angebot-page .angebot-verwandte-produkte__bild { aspect-ratio: var(--angebot-verwandt-bild); border-radius: var(--angebot-radius-sm); overflow: hidden;} .angebot-page .angebot-verwandte-produkte__bild img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 0;} .angebot-page .angebot-verwandte-produkte__inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-4);} .angebot-page .angebot-verwandte-produkte__name { font-family: var(--angebot-font-bold); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-verwandte-produkte__name a { color: var(--angebot-text-strong); text-decoration: none; transition: color 0.2s ease-in-out;} .angebot-page .angebot-verwandte-produkte__name a:hover { color: var(--angebot-text-heading);} .angebot-page .angebot-verwandte-produkte__preis { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-strong); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} /*======== FAQ ========*/ /* Frame-Node 3438:25125. Links 328, rechts 740, der Rest verteilt sich dazwischen. Der Trennstrich im linken Rail ist der obere Rand des CTA-Blocks, damit er ohne Zusatzelement auskommt. */ .angebot-page .angebot-faq { background: var(--angebot-bg-base);} .angebot-page .angebot-faq__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--angebot-space-32);} .angebot-page .angebot-faq__rail { flex: 0 1 var(--angebot-faq-rail); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-32);} /* Kleinere Stufe mit Absicht: die Ueberschrift steht in der 328px schmalen linken Spalte (--angebot-faq-rail), nicht ueber der vollen Breite. Mit dem Kit-h2 braeche "Haeufige Fragen zu Duftbaeumen mit Logo" dort in vier Zeilen. Nicht auf das Kit umstellen, ohne die Zeilen in der Spalte nachzuzaehlen. */ .angebot-page .angebot-faq__titel { font-size: var(--angebot-h3-size); line-height: var(--angebot-h3-line); letter-spacing: var(--angebot-h3-tracking); margin: 0; padding: 0;} .angebot-page .angebot-faq__cta { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-16); border-top: 1px solid var(--angebot-border-subtle); margin: 0; padding: var(--angebot-space-32) 0 0 0;} .angebot-page .angebot-faq__cta-titel { font-family: var(--angebot-font-bold); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-heading); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-faq__cta-text { font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-heading);} .angebot-page .angebot-faq__cta-text > :first-child { margin-top: 0;} .angebot-page .angebot-faq__cta-text > :last-child { margin-bottom: 0;} .angebot-page .angebot-faq__cta-aktion { margin: 0; padding: 0;} .angebot-page .angebot-faq__liste { flex: 0 1 var(--angebot-faq-liste); min-width: 0; display: flex; flex-direction: column; gap: var(--angebot-space-8);} .angebot-page .angebot-faq__eintrag { background: var(--angebot-bg-lift-solid); border-radius: var(--angebot-radius-sm); margin: 0; padding: var(--angebot-space-16);} /* Eigener Marker statt des Dreiecks, das Browser sonst vor summary setzen. */ .angebot-page .angebot-faq__frage { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--angebot-space-16); cursor: pointer;} .angebot-page .angebot-faq__frage::-webkit-details-marker { display: none;} .angebot-page .angebot-faq__frage-text { font-family: var(--angebot-font-bold); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-strong); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-faq__frage::after { content: ''; box-sizing: border-box; width: var(--angebot-faq-knopf); height: var(--angebot-faq-knopf); flex: 0 0 auto; background-color: var(--angebot-btn-secondary-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23080808' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; border: 1px solid var(--angebot-btn-secondary-bg); border-radius: 999px; transition: transform 0.2s ease-in-out;} .angebot-page .angebot-faq__eintrag[open] .angebot-faq__frage::after { transform: rotate(180deg);} /* Die Antwort endet dort, wo der Auf-Zu-Knopf der Frage beginnt: volle Zeile minus Knopfspalte und deren Abstand. Sie belegt damit genau die Spalte, die auch der Fragetext hat, und laeuft nicht unter dem Knopf hindurch bis an den Rand. Nicht --angebot-lesebreite, der Deckel ist mit 900px breiter als diese Spalte und wuerde hier gar nicht greifen. */ .angebot-page .angebot-faq__antwort { max-width: calc(100% - var(--angebot-faq-knopf) - var(--angebot-space-16)); font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-medium); margin: var(--angebot-space-12) 0 0 0;} .angebot-page .angebot-faq__antwort > :first-child { margin-top: 0;} .angebot-page .angebot-faq__antwort > :last-child { margin-bottom: 0;} /*======== Referenzen ========*/ /* Frame-Node 3169:2020. Dreierraster, Bild im Hochformat mit Radius, darunter Titel und Eckdaten ohne eigenen Kartengrund. */ .angebot-page .angebot-referenzen { background: var(--angebot-bg-lift-solid);} .angebot-page .angebot-referenzen__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--angebot-space-16);} /* Ohne eigene Groesse: die Ueberschrift steht ueber der vollen Containerbreite, dort gilt die Sektionsueberschrift des Kits. */ .angebot-page .angebot-referenzen__titel { margin: 0; padding: 0;} /* Abstand Intro zum Raster ist 48: 16px Gap plus 32px hier. */ .angebot-page .angebot-referenzen__liste { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--angebot-space-24); margin: var(--angebot-space-32) 0 0 0; padding: 0;} .angebot-page .angebot-referenzen__eintrag { display: flex; flex-direction: column; align-items: stretch; gap: var(--angebot-space-16); margin: 0; padding: 0;} .angebot-page .angebot-referenzen__bild { aspect-ratio: var(--angebot-referenz-bild); border-radius: var(--angebot-radius); overflow: hidden;} .angebot-page .angebot-referenzen__bild img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 0;} .angebot-page .angebot-referenzen__inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-4); padding-right: var(--angebot-space-12);} .angebot-page .angebot-referenzen__eintrag-titel { font-family: var(--angebot-font-bold); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-strong); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-referenzen__eintrag-text { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-medium);} .angebot-page .angebot-referenzen__eintrag-text > :first-child { margin-top: 0;} .angebot-page .angebot-referenzen__eintrag-text > :last-child { margin-bottom: 0;} /*======== Text, Bild und CTA: Varianten Links und Rechts ========*/ /* Bis hierher gab es fuer diese beiden Varianten keine einzige Regel: auf der Duftbaeume-Seite kam nur die Hintergrund-Variante vor, die uebrigen standen zwar im Feld zur Auswahl, waren aber nie umgesetzt. Wer sie waehlte, bekam eine randlose Sektion mit Browser-Standardtypografie. Aufbau nach dem Vorbild von angebot-kurzbeschrieb__inner: der Innencontainer traegt Containerbreite und Spalten, die Sektion bleibt vollflaechig. */ .angebot-page .angebot-text-bild-cta__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; align-items: center; gap: var(--angebot-space-64);} .angebot-page .angebot-text-bild-cta__inhalt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-16);} /* Ohne Bild faellt die Spalte weg und der Text nutzt die ganze Breite. */ .angebot-page .angebot-text-bild-cta__bild { flex: 0 1 var(--angebot-tbc-bild); min-width: 0; margin: 0;} .angebot-page .angebot-text-bild-cta__bild img { width: 100%; height: auto; display: block; aspect-ratio: var(--angebot-tbc-verhaeltnis); object-fit: cover; border-radius: var(--angebot-radius);} /* Der Text steht im Markup immer vor dem Bild, damit die Lesereihenfolge unabhaengig von der Bildposition bleibt. "Links" dreht deshalb nur die optische Reihenfolge. */ .angebot-page .angebot-text-bild-cta--bild-links .angebot-text-bild-cta__bild { order: -1;} /* Kleinere Stufe mit Absicht: die Textspalte ist hier 584px breit, also rund 46 Prozent des Containers. Gemessen mit dem laengsten Titel beider Seiten, "Duftbaeume in der Schweiz gestalten und bedrucken lassen", 55 Zeichen: h3-Set zwei Zeilen, Kit-h2 drei. Nicht auf das Kit umstellen, ohne die Zeilen in der Spalte nachzuzaehlen. */ .angebot-page .angebot-text-bild-cta--bild-links .angebot-text-bild-cta__titel, .angebot-page .angebot-text-bild-cta--bild-rechts .angebot-text-bild-cta__titel { font-family: var(--angebot-font-heading); font-size: var(--angebot-h3-size); line-height: var(--angebot-h3-line); letter-spacing: var(--angebot-h3-tracking); color: var(--angebot-text-heading); font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-text-bild-cta--bild-links .angebot-text-bild-cta__text, .angebot-page .angebot-text-bild-cta--bild-rechts .angebot-text-bild-cta__text { font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-medium);} .angebot-page .angebot-text-bild-cta--bild-links .angebot-text-bild-cta__text p, .angebot-page .angebot-text-bild-cta--bild-rechts .angebot-text-bild-cta__text p { margin: 0 0 var(--angebot-space-20) 0;} .angebot-page .angebot-text-bild-cta--bild-links .angebot-text-bild-cta__text > :last-child, .angebot-page .angebot-text-bild-cta--bild-rechts .angebot-text-bild-cta__text > :last-child { margin-bottom: 0;} .angebot-page .angebot-text-bild-cta__buttons { display: flex; flex-wrap: wrap; gap: var(--angebot-space-8); margin: var(--angebot-space-8) 0 0 0; padding: 0;} /*======== Text, Bild und CTA: Variante Hintergrund ========*/ /* Frame-Node 3513:28058. Die Karte traegt Background/Depth als Grundton, damit die helle Schrift auch ohne hinterlegtes Bild lesbar bleibt. Im Frame steht die Karte ohne eigene Polsterung direkt zwischen ihren Nachbarn. Das funktionierte nur, solange diese ebenfalls weiss waren: nach dem Ausblenden der Referenzen folgte die FAQ mit grauem Grund, und das Weiss endete an der Kartenkante. Die Sektion nutzt deshalb jetzt den Standardabstand aus der Basisregel weiter oben. */ .angebot-page .angebot-text-bild-cta--bild-hintergrund { background: var(--angebot-bg-lift-solid);} .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__karte { position: relative; box-sizing: border-box; width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--angebot-space-32); background: var(--angebot-text-heading); border-radius: var(--angebot-radius); overflow: hidden; padding: var(--angebot-space-64);} .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__bild { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0;} .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__bild img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 0; aspect-ratio: auto;} /* Verlauf von links dunkel nach rechts transparent, damit die Textspalte traegt und das Bild rechts frei bleibt. */ .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__karte::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 8, 8, 0.88) 0%, rgba(8, 8, 8, 0) 100%); pointer-events: none;} .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__inhalt { position: relative; z-index: 2; flex: 0 1 var(--angebot-hgkarte-intro); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-16);} /* Kleinere Stufe mit Absicht: die Ueberschrift steht in der 413px schmalen Textspalte auf der Karte (--angebot-hgkarte-intro), nicht ueber der vollen Breite. Nicht auf das Kit umstellen, ohne die Zeilen in der Spalte nachzuzaehlen. Die helle Farbe bleibt, sie steht auf dunklem Grund. */ .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__titel { font-size: var(--angebot-h3-size); line-height: var(--angebot-h3-line); letter-spacing: var(--angebot-h3-tracking); color: var(--angebot-text-invers); margin: 0; padding: 0;} .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__text { font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-invers-strong);} .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__text p { margin: 0 0 var(--angebot-space-20) 0;} .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__text > :last-child { margin-bottom: 0;} /*======== Staffelpreise ========*/ /* Frame-Node 3261:30331. Im Frame sitzt das Accordion innerhalb der Formular-Sektion, 48px unter deren Inhalt. Bei uns ist es ein eigenes Layout, deshalb 48px oben und die uebliche Sektionshoehe unten. Der Grund bleibt Background/Base, damit die weisse Karte darauf wirkt. */ .angebot-page .angebot-staffelpreise { background: var(--angebot-bg-base); padding: var(--angebot-space-48) 0 var(--angebot-section-padding); margin: 0;} .angebot-page .angebot-staffelpreise__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--angebot-space-24);} .angebot-page .angebot-staffelpreise__titel { margin: 0; padding: 0;} /* Steht bewusst ausserhalb des Accordions, anders als im Frame: der Satz ist der Antworttext fuer Google und AI-Suche und darf nicht hinter einem Klick liegen. So im Plan entschieden. */ .angebot-page .angebot-staffelpreise__snippet { max-width: var(--angebot-lesebreite); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-medium);} .angebot-page .angebot-staffelpreise__snippet > :first-child { margin-top: 0;} .angebot-page .angebot-staffelpreise__snippet > :last-child { margin-bottom: 0;} /*---- Accordion ----*/ .angebot-page .angebot-staffelpreise__accordion { background: var(--angebot-bg-lift-solid); border-radius: var(--angebot-radius); overflow: hidden;} .angebot-page .angebot-staffelpreise__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--angebot-space-16); cursor: pointer; list-style: none; font-family: var(--angebot-font-heading); font-size: var(--angebot-h6-size); line-height: var(--angebot-h6-line); letter-spacing: var(--angebot-h6-tracking); color: var(--angebot-text-heading); font-weight: normal; border-bottom: 1px solid var(--angebot-border-subtle); margin: 0; padding: var(--angebot-space-24) var(--angebot-space-32);} .angebot-page .angebot-staffelpreise__summary::-webkit-details-marker { display: none;} /* Chevron als reines CSS. Im Frame ist es ein 20px-Icon, im Theme gibt es dafuer keine Icon-Quelle. */ .angebot-page .angebot-staffelpreise__summary::after { content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s ease-in-out;} .angebot-page .angebot-staffelpreise__accordion[open] .angebot-staffelpreise__summary::after { transform: translateY(2px) rotate(-135deg);} .angebot-page .angebot-staffelpreise__inhalt { display: flex; flex-direction: column; align-items: stretch; gap: var(--angebot-space-24); padding: var(--angebot-space-24) var(--angebot-space-32) var(--angebot-space-32);} .angebot-page .angebot-staffelpreise__einleitung { font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-medium);} .angebot-page .angebot-staffelpreise__einleitung > :first-child { margin-top: 0;} .angebot-page .angebot-staffelpreise__einleitung > :last-child { margin-bottom: 0;} /*---- Preisgruppe ----*/ .angebot-page .angebot-staffelpreise__gruppe { display: flex; flex-direction: column; align-items: stretch; gap: var(--angebot-space-4);} .angebot-page .angebot-staffelpreise__gruppe-titel { font-family: var(--angebot-font-bold); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-heading); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-staffelpreise__gruppe-untertitel { max-width: var(--angebot-lesebreite); font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-subtle); font-weight: normal; margin: 0; padding: 0;} /*---- Tabelle ----*/ /* Feste Spaltenbreiten, damit alle Spalten gleich breit sind wie im Frame, unabhaengig vom Inhalt. Trennlinien ueber und unter jeder Zeile. */ .angebot-page .angebot-staffelpreise__tabelle-wrap { width: 100%; overflow-x: auto; margin-top: var(--angebot-space-12);} .angebot-page .angebot-staffelpreise__tabelle { width: 100%; table-layout: fixed; border-collapse: collapse;} /* reset.css des Parent-Themes gibt jeder Tabellenzelle einen Rahmen ringsum und jeder zweiten Zeile einen grauen Grund. Das ist ein generischer Reset, kein gestaltetes Element der Webseite, und widerspricht dem Frame. Deshalb hier gezielt neutralisiert. */ .angebot-page .angebot-staffelpreise__tabelle th, .angebot-page .angebot-staffelpreise__tabelle td { height: 50px; box-sizing: border-box; text-align: left; vertical-align: middle; background: transparent; border: 0; border-top: 1px solid var(--angebot-border-subtle); margin: 0; padding: 0 var(--angebot-space-16) 0 0;} .angebot-page .angebot-staffelpreise__tabelle tbody tr:last-child th, .angebot-page .angebot-staffelpreise__tabelle tbody tr:last-child td { border-bottom: 1px solid var(--angebot-border-subtle);} .angebot-page .angebot-staffelpreise__tabelle thead th { font-family: var(--angebot-font-bold); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-heading); font-weight: normal;} .angebot-page .angebot-staffelpreise__tabelle tbody th, .angebot-page .angebot-staffelpreise__tabelle tbody td { font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-medium); font-weight: normal;} .angebot-page .angebot-staffelpreise__fussnote, .angebot-page .angebot-staffelpreise__stand { max-width: var(--angebot-lesebreite); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-subtle); margin: 0;} .angebot-page .angebot-staffelpreise__fussnote > :first-child { margin-top: 0;} .angebot-page .angebot-staffelpreise__fussnote > :last-child { margin-bottom: 0;} /*======== Offerten-Formular ========*/ /* Frame-Node 3261:28420, Inhalt 3261:28421. Grund in Background/Base, links Intro 360, Spaltenabstand 64, rechts das Formular 856. Die Staffelpreise stehen im Frame in derselben Sektion, sind bei uns aber ein eigenes Layout und bringen ihr eigenes Padding mit. */ .angebot-page .offerte-formular { background: var(--angebot-bg-base);} .angebot-page .offerte-formular__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto;} .angebot-page .offerte-formular__spalten { display: flex; align-items: flex-start; gap: var(--angebot-space-64);} .angebot-page .offerte-formular__intro { flex: 0 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-16);} .angebot-page .offerte-formular__formular { flex: 1 1 856px; min-width: 0;} /* h2 erbt aus dem Kit, siehe Kurzbeschrieb. */ .angebot-page .offerte-formular__titel { margin: 0; padding: 0;} .angebot-page .offerte-formular__text > :first-child { margin-top: 0;} .angebot-page .offerte-formular__text > :last-child { margin-bottom: 0;} /* Hinweiskarte: weiss auf dem hellen Grund der Sektion. */ /* Uhr-Zeichen aus dem Frame-Node 3261:30433, stroke #56A100 wie das Info-Zeichen im Faustregel-Kasten. Als Daten-URI im CSS, damit das Partial keine Grafik kennen muss, und im selben Rastermuster: das Zeichen spannt beide Zeilen und steht mittig dazu. */ .angebot-page .offerte-formular__social-proof { width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; column-gap: var(--angebot-space-12); row-gap: var(--angebot-space-4); background: var(--angebot-bg-lift-solid); border-radius: var(--angebot-radius); margin: 0; padding: var(--angebot-space-12);} .angebot-page .offerte-formular__social-proof::before { content: ''; grid-column: 1; grid-row: 1 / 3; align-self: center; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24.8333 24.8333' fill='none'%3E%3Cpath d='M12.4167 5.41667V12.4167L17.0833 14.75M24.0833 12.4167C24.0833 18.86 18.86 24.0833 12.4167 24.0833C5.97334 24.0833 0.75 18.86 0.75 12.4167C0.75 5.97334 5.97334 0.75 12.4167 0.75C18.86 0.75 24.0833 5.97334 24.0833 12.4167Z' stroke='%2356A100' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain;} .angebot-page .offerte-formular__sp-zeile { grid-column: 2; font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); font-weight: normal; margin: 0; padding: 0;} .angebot-page .offerte-formular__sp-zeile--stark { color: var(--angebot-text-strong);} .angebot-page .offerte-formular__sp-zeile--leise { color: var(--angebot-text-subtle);} /* Abstand zur Hinweiskarte ist 32: 16px Gap der Spalte plus 16px hier. */ /* Beschriftung und Logoreihe liegen in einem gemeinsamen Block. So bleiben sie zusammen, wenn die Spalte unterhalb von 1025px aufgeloest und neu sortiert wird, und brauchen dort keine Sonderabstaende. Der obere Abstand sass vorher an der Liste und sitzt jetzt am Block. */ /* align-self: stretch, weil die Intro-Spalte align-items: flex-start setzt. Ohne das schrumpft der Block auf die Breite der Beschriftung und die Logoreihe bricht auf eine Zeile je Logo um. */ .angebot-page .offerte-formular__kunden { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-logo-abstand-sm); margin: var(--angebot-space-16) 0 0 0;} .angebot-page .offerte-formular__sp-titel { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-subtle); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} /* BEWUSSTE ABWEICHUNG VOM FRAME: dort steht je Logo eine 72x72-Box, in der das Logo zentriert sitzt. Dabei haengt die gerenderte Logohoehe am Seitenverhaeltnis, gemessen von 15px (Buehler) bis 38px (Coop), und damit auch der optische Abstand zur Beschriftung, gemessen 17 bis 29px. Beim Austausch eines Logos haette sich der Abstand also mitverschoben. Stattdessen hat der Eintrag eine feste Boxhoehe. Damit steht die Oberkante der Reihe fest, der Abstand zur Beschriftung bleibt also auch beim Logowechsel gleich. Das Logo darin wird ueber max-height und max-width begrenzt, nicht auf eine feste Hoehe gezwungen. Reine Hoehennormierung sieht nur bei aehnlichen Seitenverhaeltnissen gut aus: ein nahezu quadratisches Logo (gemessen 111x86) wurde damit 26x20 und stand als Zwerg neben einer 99x20 langen Wortmarke. Mit der Begrenzung fuellt jedes Logo die Box so weit aus, wie seine Form zulaesst, und die optischen Gewichte gleichen sich an. Dazu als Mittelweg zur festen Breite eine Mindestbreite je Eintrag. Kompakte Logos wie Coop stehen damit nicht mehr als schmalster Posten in der Reihe, die Verteilung wird ruhiger, ohne dass Hoehe oder Abstand wieder vom einzelnen Logo abhaengen. align-self: stretch ist noetig, weil die Intro-Spalte align-items auf flex-start setzt. Ohne das schrumpft die Liste auf Fit-Content und bricht mit der Mindestbreite auf eine Zeile je Logo um. */ .angebot-page .offerte-formular__sp-logos { align-self: stretch; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--angebot-space-12); margin: 0; padding: 0;} .angebot-page .offerte-formular__sp-logos li { flex: 0 0 auto; height: var(--angebot-logo-hoehe-sm); min-width: var(--angebot-logo-minbreite-sm); display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;} /* Feste Hoehe statt height auto mit max-height: nur so steht die Breite schon vor dem Laden fest. Mit height auto leitet der Browser aus einem noch nicht geladenen Lazy-Bild keine Groesse ab, es rendert 0x0. Der Kasten faellt dann auf seine Mindestbreite von 60px zurueck und waechst beim Eintreffen des Bildes auf 86px. Gemessen: beim ersten Laden waren zwei der vier Logos 0x0 und drei Kaesten zu schmal, nach dem Laden sprang die Reihe. Genau das sah man als fehlenden Abstand, der sich nach dem Zurueckscrollen von selbst korrigierte. Mit fester Hoehe nimmt der Browser das Seitenverhaeltnis aus den width- und height-Attributen des img und kennt die Breite sofort. object-fit haelt das Logo dabei unverzerrt. */ .angebot-page .offerte-formular__sp-logos img { height: var(--angebot-logo-hoehe-sm); max-width: var(--angebot-logo-maxbreite-sm); width: auto; display: block; object-fit: contain;} /* Platzhalter, solange keine Formular-ID gepflegt ist. Gleiche Flaeche und Optik wie der spaetere Formularcontainer im Frame: weisse Karte, Radius 16, Mindesthoehe 566. */ .angebot-page .offerte-formular__platzhalter { box-sizing: border-box; min-height: var(--angebot-formular-hoehe); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--angebot-space-8); background: var(--angebot-bg-lift-solid); border: 1px dashed var(--angebot-border-subtle); border-radius: var(--angebot-radius-lg); padding: var(--angebot-space-32);} .angebot-page .offerte-formular__platzhalter-titel { font-family: var(--angebot-font-bold); font-size: var(--angebot-b1-size); line-height: var(--angebot-b1-line); color: var(--angebot-text-heading); font-weight: normal; margin: 0; padding: 0;} .angebot-page .offerte-formular__platzhalter-text { max-width: 42ch; font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-medium); font-weight: normal; margin: 0; padding: 0;} .angebot-page .offerte-formular__datenschutz { font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-subtle); margin: var(--angebot-space-16) 0 0 0;} /*======== Kurzbeschrieb ========*/ /* Frame-Node 3162:1991. Weisser Grund, Padding 80, Bild 632 links, Inhalt rechts. Der Spaltenabstand ist hier 32, nicht 16 wie im Hero. */ .angebot-page .angebot-kurzbeschrieb { background: var(--angebot-bg-lift-solid);} .angebot-page .angebot-kurzbeschrieb__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; align-items: center; gap: var(--angebot-space-32);} /* Basis 632 zu 616 ergibt bei 1280 minus 32 Gap exakt die Frame-Breiten und schrumpft darunter proportional mit. */ .angebot-page .angebot-kurzbeschrieb__bild { flex: 0 1 632px; min-width: 0;} /* max-width greift nur, wenn kein Bild gesetzt ist. Mit Bild ist die Spalte 616px breit und damit schmaler als der Deckel. Ohne Bild wuerde sie sonst die ganzen 1280px nehmen, das sind rund 170 Zeichen pro Zeile. Betrifft heute die Angebote-Seite und die Wasserflaschen-Seite, deren Bild noch fehlt. */ .angebot-page .angebot-kurzbeschrieb__inhalt { flex: 1 1 616px; max-width: var(--angebot-lesebreite); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-16);} /* Das h2 braucht keine Typografie: der Kit liefert 48/1 in Medium mit -1px, exakt die Frame-Werte. Hier steht nur der Abstands-Reset. */ .angebot-page .angebot-kurzbeschrieb__titel { margin: 0; padding: 0;} .angebot-page .angebot-kurzbeschrieb__text > :first-child { margin-top: 0;} .angebot-page .angebot-kurzbeschrieb__text > :last-child { margin-bottom: 0;} /* Angebotskasten. Radius 16 statt der sonst ueblichen 12, so im Frame. Der Abstand zum Text ist 32: 16px Gap der Spalte plus 16px hier. */ .angebot-page .angebot-kurzbeschrieb__angebot { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-8); background: var(--angebot-bg-base); border-radius: var(--angebot-radius-lg); margin: var(--angebot-space-16) 0 0 0; padding: var(--angebot-space-32);} /* 20px SemiBold trifft exakt das 20px-Set des Kits. */ .angebot-page .angebot-kurzbeschrieb__angebot-titel { font-family: var(--angebot-font-bold); font-size: var(--angebot-b1-size); line-height: var(--angebot-b1-line); color: var(--angebot-text-heading); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-kurzbeschrieb__angebot-text { color: var(--angebot-text-medium);} .angebot-page .angebot-kurzbeschrieb__angebot-text > :first-child { margin-top: 0;} .angebot-page .angebot-kurzbeschrieb__angebot-text > :last-child { margin-bottom: 0;} /* Abstand Text zu Button ist 32: 8px Gap des Kastens plus 24px hier. */ .angebot-page .angebot-kurzbeschrieb__angebot-button { margin: var(--angebot-space-24) 0 0 0; padding: 0;} /*======== Eckdaten ========*/ /* Frame-Node 3162:1977. Weisser Grund, vier gleich breite Kacheln mit 16px Gap, Kachel in Background/Base mit Radius 12 und Padding 32. Der Frame zeichnet die Sektion ohne vertikales Padding (py-0), weil dort oben und unten weisse Nachbarn stehen, die den Abstand liefern. Genau das machte die Sektion vom Nachbarn abhaengig. Sie laeuft deshalb jetzt auf dem Standardabstand aus der Basisregel weiter oben. */ .angebot-page .angebot-eckdaten { background: var(--angebot-bg-lift-solid);} .angebot-page .angebot-eckdaten__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto;} .angebot-page .angebot-eckdaten__liste { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--angebot-column-gap); margin: 0; padding: 0;} /* column-reverse: im Markup steht das Label zuerst, wie es eine Definitionsliste verlangt, im Design steht der Wert oben. */ /* Rand und Masse wie bei den Kacheln auf der Seite "Ueber uns", dort an der Live-Seite gemessen: kein Rahmen, Radius 12, Padding 32. Vom dortigen Dreiklang aus Grau, Hellgruen und Dunkelgruen bleiben hier zwei Toene: Background/Depth fuer die Angaben und das dunkle Gruen fuer den Preis. Die Hoehe bleibt bewusst unsere: die Kacheln dort sind 300px hoch, weil sie eine 64px-Zahl tragen, unsere Werte stehen auf 20px. */ .angebot-page .angebot-eckdaten__eintrag { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--angebot-space-8); background: var(--angebot-bg-depth); border: 0; border-radius: var(--angebot-radius); margin: 0; padding: var(--angebot-space-32);} /* Der Wert traegt Groesse und Zeilenhoehe des 20px-Sets aus dem Kit und laeuft in der SemiBold-Familie. Vorher stand er in der regulaeren Familie auf Text/Body/Strong, also 0.88 Deckung: das ergab Grau auf Grau und liess die Kacheln wie unfertige Platzhalter wirken. Der Unterschied zwischen Wert und Bezeichnung traegt hier die ganze Hierarchie, weil es sonst kein weiteres Gestaltungsmittel gibt. */ .angebot-page .angebot-eckdaten__wert { font-family: var(--angebot-font-bold); font-size: var(--angebot-b1-size); line-height: var(--angebot-b1-line); color: var(--angebot-text-heading); font-weight: normal; margin: 0; padding: 0;} /* 0.64 Deckung wie bei den Beschriftungen auf "Ueber uns". Die Bezeichnung soll dem Wert nachgeordnet bleiben, ohne unleserlich zu werden. */ .angebot-page .angebot-eckdaten__label { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-medium); font-weight: normal; margin: 0; padding: 0;} /* Die Preiskachel ist die einzige farbige und schliesst die Reihe ab. Der Preis ist die Angabe, nach der auf einer Angebotsseite gesucht wird. Die Markierung kommt aus rh_angebot_eckdaten_eintraege() und haengt am Feld preis_ab, nicht an der Reihenfolge und nicht am Text der Bezeichnung. Bei eigenen Eintraegen bleiben alle Kacheln grau. */ .angebot-page .angebot-eckdaten__eintrag--preis { background: var(--angebot-cta-gruen);} .angebot-page .angebot-eckdaten__eintrag--preis .angebot-eckdaten__wert { color: var(--angebot-text-invers);} .angebot-page .angebot-eckdaten__eintrag--preis .angebot-eckdaten__label { color: var(--angebot-text-invers-medium);} /*---- Bild mit Preisanker ----*/ .angebot-page .angebot-hero__bild { position: relative; border-radius: var(--angebot-radius); overflow: hidden;} /* Zentriert ueber inset + margin auto statt ueber left:50% mit Transform. Bei left:50% waere der Verfuegbarkeitsraum nur die halbe Bildbreite, das Shrink-to-fit haette die beiden Bloecke umgebrochen. */ .angebot-page .angebot-hero__preisanker { position: absolute; left: 0; right: 0; bottom: var(--angebot-space-24); width: fit-content; max-width: calc(100% - var(--angebot-space-32)); display: flex; flex-wrap: wrap; align-items: center; gap: var(--angebot-space-24); background: var(--angebot-bg-lift); backdrop-filter: blur(var(--angebot-blur)); -webkit-backdrop-filter: blur(var(--angebot-blur)); border-radius: var(--angebot-radius); margin: 0 auto; padding: var(--angebot-space-24);} .angebot-page .angebot-hero__anker-block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-4); white-space: nowrap;} .angebot-page .angebot-hero__anker-label { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-medium); font-weight: normal;} .angebot-page .angebot-hero__anker-wert { font-family: var(--angebot-font-bold); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-strong); font-weight: normal;} .angebot-page .angebot-hero__anker-divider { width: 1px; height: 40px; flex: 0 0 auto; background: var(--angebot-border-subtle);} /*---------------- Angebots-Raster (Hub) ----------------*/ /* Frame-Node 3744:598. Vier Karten je 302px im 1280er-Container: 302 * 4 + 24 * 3 = 1280, das Raster geht ohne Rest auf. Die Filterleiste klebt unter der Kopfzeile. .header-main ist fixed, 86px hoch und liegt auf z-index 999, gemessen im Browser. Der Versatz und der kleinere z-index hier folgen daraus: sonst schiebt sich die Leiste darueber. */ .angebot-page .angebot-grid { --angebot-grid-karte: 302px; --angebot-grid-kopf: 86px; background: var(--angebot-bg-base);} /* Hero und Raster ruecken zusammen. Beide tragen 80px Sektionspolster, das ergab 160px zwischen Subline und Filterleiste. Im Frame sind es 56px, und das ist richtig: die Filterleiste gehoert optisch zur Ueberschrift und nicht zu einer neuen Sektion. 32 plus 24 ergeben genau diese 56px. Faellt :has() aus, bleibt der Hero bei 80px, dann sind es 104px statt 160px. Auch das ist besser als vorher. */ .angebot-page .angebot-hero:has(+ .angebot-grid) { padding-bottom: var(--angebot-space-32);} .angebot-page .angebot-hero + .angebot-grid { padding-top: var(--angebot-space-24);} .angebot-page .angebot-grid__inner { width: min(var(--angebot-container), 100% - var(--angebot-gutter-min)); margin-inline: auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--angebot-space-24);} .angebot-page .angebot-grid__titel { margin: 0; padding: 0;} .angebot-page .angebot-grid__text { max-width: var(--angebot-lesebreite); font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-medium);} .angebot-page .angebot-grid__text > :first-child { margin-top: 0;} .angebot-page .angebot-grid__text > :last-child { margin-bottom: 0;} .angebot-page .angebot-grid__leiste { position: sticky; top: var(--angebot-grid-kopf); z-index: 20; display: flex; flex-direction: column; gap: var(--angebot-space-16); background: var(--angebot-bg-base); border-bottom: 1px solid var(--angebot-border-subtle); margin: 0; padding: var(--angebot-space-16) 0;} .angebot-page .angebot-grid__leiste-oben { display: flex; align-items: center; justify-content: space-between; gap: var(--angebot-space-24);} .angebot-page .angebot-grid__leiste-unten { display: flex; align-items: center; justify-content: space-between; gap: var(--angebot-space-16);} .angebot-page .angebot-grid__filter-liste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--angebot-space-8); list-style: none; margin: 0; padding: 0;} .angebot-page .angebot-grid__filter-link { display: inline-flex; align-items: center; font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-strong); text-decoration: none; background: var(--angebot-bg-lift-solid); border: 1px solid var(--angebot-border-subtle); border-radius: 999px; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; padding: var(--angebot-space-4) var(--angebot-space-12);} .angebot-page .angebot-grid__filter-link:hover { border-color: var(--angebot-text-strong);} .angebot-page .angebot-grid__filter-link--aktiv { color: var(--angebot-text-invers); background: var(--angebot-cta-gruen); border-color: var(--angebot-cta-gruen);} /* Das Suchfeld steht im Markup als hidden und wird erst per Skript freigeschaltet. Ohne JavaScript filtert es nichts, dann darf es auch nicht wie eine Bedienung aussehen. */ .angebot-page .angebot-grid__suche { flex: 0 1 360px; position: relative; display: flex; align-items: center;} .angebot-page .angebot-grid__suche[hidden] { display: none;} .angebot-page .angebot-grid__suche-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;} .angebot-page .angebot-grid__suche-feld { box-sizing: border-box; width: 100%; height: 50px; font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-strong); background: var(--angebot-bg-lift-solid); border: 1px solid var(--angebot-border-subtle); border-radius: 999px; padding: 0 var(--angebot-space-24);} .angebot-page .angebot-grid__suche-feld::placeholder { color: var(--angebot-text-subtle);} .angebot-page .angebot-grid__suche-feld:focus { outline: 2px solid var(--angebot-cta-gruen); outline-offset: 2px;} .angebot-page .angebot-grid__treffer { font-family: var(--angebot-font-bold); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-strong); margin: 0; padding: 0;} .angebot-page .angebot-grid__liste { display: grid; grid-template-columns: repeat(var(--angebot-grid-spalten, 4), minmax(0, 1fr)); gap: var(--angebot-space-24); list-style: none; margin: 0; padding: 0;} .angebot-page .angebot-grid__liste--2 { --angebot-grid-spalten: 2;} .angebot-page .angebot-grid__liste--3 { --angebot-grid-spalten: 3;} .angebot-page .angebot-grid__liste--4 { --angebot-grid-spalten: 4;} /* Ausdruecklich: das Skript versteckt Karten ueber das hidden-Attribut. Ohne diese Regel setzt display:grid vom Elternteil sich dagegen durch. */ .angebot-page .angebot-grid__eintrag[hidden] { display: none;} .angebot-page .angebot-grid__eintrag { display: flex;} /* Hover nach dem Muster der Startseite, damit die Karten dieselbe Sprache sprechen wie die Service- und News-Karten dort: das Bild skaliert auf 1.05 und wird weichgezeichnet, der Pfeil dreht auf -45 Grad. Die Uebergangszeit "all 0.3s ease-in-out" ist mit 17 Vorkommen die Konvention in assets/css/style.css, siehe .services-list .service-card und .home-news-articles. */ .angebot-page .angebot-grid__karte { display: flex; flex-direction: column; align-items: stretch; width: 100%; text-decoration: none; background: var(--angebot-bg-lift-solid); border: 1px solid var(--angebot-border-subtle); border-radius: var(--angebot-radius); overflow: hidden; transition: all 0.3s ease-in-out;} .angebot-page .angebot-grid__karte:hover { border-color: var(--angebot-text-strong);} .angebot-page .angebot-grid__bild { display: block; aspect-ratio: 302 / 180; background: var(--angebot-bg-depth); overflow: hidden;} .angebot-page .angebot-grid__bild img { width: 100%; height: 100%; display: block; object-fit: cover; transition: all 0.3s ease-in-out;} .angebot-page .angebot-grid__karte:hover .angebot-grid__bild img { transform: scale(1.05); filter: blur(5px);} .angebot-page .angebot-grid__inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-8); flex: 1 1 auto; padding: var(--angebot-space-24);} .angebot-page .angebot-grid__kategorie { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-subtle);} .angebot-page .angebot-grid__name { font-family: var(--angebot-font-bold); font-size: var(--angebot-b1-size); line-height: var(--angebot-b1-line); color: var(--angebot-text-heading);} /* Hart auf drei Zeilen gedeckelt. Der Wortschnitt im Partial trifft es meistens, aber nicht zuverlaessig: gleich viele Woerter ergeben je nach Wortlaenge drei oder vier Zeilen, und dann stehen die Karten einer Reihe unterschiedlich hoch. Der Deckel hier ist die Garantie, der Wortschnitt sorgt nur dafuer, dass selten sichtbar abgeschnitten wird. */ .angebot-page .angebot-grid__kurztext { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-medium);} /* Die Preiszeile sitzt unten, egal wie lang Titel und Kurztext ausfallen. Deshalb margin-top auto statt einer festen Kartenhoehe: die Karten in einer Reihe sind ueber das Grid ohnehin gleich hoch. */ .angebot-page .angebot-grid__fuss { width: 100%; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--angebot-space-8); padding-top: var(--angebot-space-16);} .angebot-page .angebot-grid__preis { font-family: var(--angebot-font-bold); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-heading);} /* Pfeil als Inline-SVG wie die uebrigen Icons der Datei, nicht als Zeichen: ein Text-Pfeil wuerde von Screenreadern vorgelesen und je Schrift anders aussehen. Die Strichfarbe ist deshalb fest, currentColor gibt es in einem background-image nicht. */ .angebot-page .angebot-grid__pfeil { width: 20px; height: 20px; flex: 0 0 auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10H16M11 5L16 10L11 15' stroke='%23080808' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; transition: all 0.3s ease-in-out;} .angebot-page .angebot-grid__karte:hover .angebot-grid__pfeil { transform: rotate(-45deg);} /* Beschaffungs-Karte: steht immer im Raster, auch wenn Filter oder Suche nichts liefern. Deshalb tiefgruen statt weiss, sie ist ein Angebot und kein Produkt. */ .angebot-page .angebot-grid__beschaffung { box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--angebot-space-8); background: var(--angebot-cta-gruen); border-radius: var(--angebot-radius); padding: var(--angebot-space-24);} .angebot-page .angebot-grid__beschaffung-label { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-invers-medium); margin: 0; padding: 0;} .angebot-page .angebot-grid__beschaffung-titel { font-family: var(--angebot-font-bold); font-size: var(--angebot-b1-size); line-height: var(--angebot-b1-line); color: var(--angebot-text-invers); letter-spacing: normal; font-weight: normal; margin: 0; padding: 0;} .angebot-page .angebot-grid__beschaffung-text { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-invers-strong);} .angebot-page .angebot-grid__beschaffung-text > :first-child { margin-top: 0;} .angebot-page .angebot-grid__beschaffung-text > :last-child { margin-bottom: 0;} .angebot-page .angebot-grid__beschaffung-aktion { width: 100%; margin: auto 0 0 0; padding: var(--angebot-space-16) 0 0 0;} /* Heller Knopf auf dunklem Grund. Neuer Modifier, bisher gibt es nur primaer und sekundaer, beide fuer hellen Grund. */ .angebot-page .angebot-btn--hell { color: var(--angebot-text-heading); background: var(--angebot-bg-lift-solid); border-color: var(--angebot-bg-lift-solid);} .angebot-page .angebot-btn--hell:hover { color: var(--angebot-text-heading); background: var(--angebot-bg-depth); border-color: var(--angebot-bg-depth);} .angebot-page .angebot-grid__mehr { display: flex; justify-content: center; margin: var(--angebot-space-8) 0 0 0; padding: 0;} .angebot-page .angebot-grid__mehr[hidden] { display: none;} .angebot-page .angebot-grid__leer, .angebot-page .angebot-grid__keine-treffer { max-width: var(--angebot-lesebreite); font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-medium); margin: 0; padding: 0;} .angebot-page .angebot-grid__keine-treffer[hidden] { display: none;} /*============ Tablet und Mobil: bis 1024px ============*/ /* Ausschliesslich Umbruch. Nichts an Farben, Schrift oder Flaechen, das kommt von oben und aus dem Kit. Reihenfolge im Frame gibt es fuer diese Breiten nicht, deshalb steht bei jeder Umsortierung die Begruendung dabei. */ @media (max-width: 1024px) { /* Seitenrand und Sektionspolsterung aus dem Bestand: die Elementor-Container der Live-Seite messen bei 390 und 768 durchgehend 16px pro Seite, und der Sektionsabstand faellt dort von 80 auf 48. */ .angebot-page { --angebot-gutter-min: 32px; --angebot-section-padding: 48px;} body main.angebot-page.site-main { max-width: none; width: 100%; margin-inline: 0; padding-inline: 0;} /*---- Hero ----*/ /* Bild vor den Text: es traegt den Preisanker und beantwortet die Preisfrage sofort, ohne dass man an der Headline vorbeiscrollen muss. */ .angebot-page .angebot-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--angebot-space-24);} .angebot-page .angebot-hero__bild { order: 1;} .angebot-page .angebot-hero__inhalt { order: 2; padding-right: 0;} /*---- Trust ----*/ /* Das Laufband braucht hier nichts: es ist auf jeder Breite eine Zeile. Nur der Abstand und das Tempo gehen zurueck, damit bei schmalem Viewport mehr Logos gleichzeitig sichtbar sind und die Runde nicht zaeh wirkt. */ .angebot-page { --angebot-logo-abstand: 32px; --angebot-laufband-dauer: 28s;} /*---- Kurzbeschrieb ----*/ .angebot-page .angebot-kurzbeschrieb__inner { flex-direction: column; align-items: stretch; gap: var(--angebot-space-24);} /* Untereinander steht das Bild immer unter dem Text, auch bei der Wahl "links". Ein Bild ueber der Ueberschrift nimmt auf schmalen Geraeten nur den Platz weg, bevor klar ist, worum es geht. */ .angebot-page .angebot-text-bild-cta__inner { flex-direction: column; align-items: stretch; gap: var(--angebot-space-24);} .angebot-page .angebot-text-bild-cta--bild-links .angebot-text-bild-cta__bild { order: 0;} .angebot-page .angebot-kurzbeschrieb__bild, .angebot-page .angebot-kurzbeschrieb__inhalt { flex: 1 1 auto;} /*---- Offerten-Formular ----*/ .angebot-page .offerte-formular__spalten { flex-direction: column; gap: var(--angebot-space-32);} .angebot-page .offerte-formular__intro, .angebot-page .offerte-formular__formular { flex: 1 1 auto; width: 100%;} /*---- Staffelpreise ----*/ /* Die Tabelle scrollt, statt sich zu quetschen: Preis und Total muessen nebeneinander lesbar bleiben, sonst laesst sich die Staffel nicht vergleichen. __tabelle-wrap hat dafuer bereits overflow-x. */ .angebot-page .angebot-staffelpreise__tabelle { table-layout: auto; min-width: 520px;} .angebot-page .angebot-staffelpreise__summary { padding: var(--angebot-space-16) var(--angebot-space-24);} .angebot-page .angebot-staffelpreise__panel { padding: var(--angebot-space-24);} /*---- Vergleich ----*/ .angebot-page .angebot-vergleich__inner { flex-direction: column; align-items: stretch; gap: var(--angebot-space-32);} .angebot-page .angebot-vergleich__rail, .angebot-page .angebot-vergleich__modelle { flex: 1 1 auto;} /* Bild ueber den Text: bei 200px fester Breite bliebe daneben zu wenig Platz fuer die Punkteliste. */ .angebot-page .angebot-vergleich__modell { flex-direction: column; gap: var(--angebot-space-16);} .angebot-page .angebot-vergleich__bild { width: 100%; height: auto; aspect-ratio: 1 / 1;} /*---- Duftnoten als Pills ----*/ /* Die Duftnoten-Pills brauchen hier nichts mehr: sie laufen jetzt auf allen Breiten im Fluss um, siehe Variante Chip weiter oben. */ /*---- Variante Spezifikation: Rail wieder aufloesen ----*/ /* Zweispaltig bliebe fuer das Kartenraster zu wenig uebrig. Der Download-Kasten rutscht dabei unter die Karten. Nebeneinander steht er gleichwertig neben dem Raster, untereinander wuerde er die Formen nach unten druecken, obwohl sie der eigentliche Inhalt sind und das PDF die nachgelagerte Handlung ist. */ .angebot-page .angebot-karten-grid--spec .angebot-karten-grid__inner { display: flex; flex-direction: column; align-items: stretch;} .angebot-page .angebot-karten-grid--spec .angebot-karten-grid__rail { display: contents;} .angebot-page .angebot-karten-grid--spec .angebot-karten-grid__liste { order: 1; margin-top: var(--angebot-space-16);} .angebot-page .angebot-karten-grid--spec .angebot-karten-grid__download { order: 2; max-width: var(--angebot-download-breite); width: auto; margin-top: var(--angebot-space-16);} .angebot-page .angebot-karten-grid--spec .angebot-karten-grid__fussnote { order: 3;} /*---- Raster: zweispaltig im Tablet-Band ----*/ .angebot-page .angebot-karten-grid__liste { --angebot-karten-spalten: 2;} .angebot-page .angebot-einsatzbereiche__liste, .angebot-page .angebot-referenzen__liste, .angebot-page .angebot-verwandte-produkte__liste { grid-template-columns: repeat(2, minmax(0, 1fr));} /*---- Ablauf ----*/ .angebot-page .angebot-ablauf__inner { grid-template-columns: minmax(0, 1fr); gap: var(--angebot-space-32);} /*---- Technische Angaben ----*/ .angebot-page .angebot-technische-angaben__kopf { flex-direction: column; align-items: flex-start; gap: var(--angebot-space-24);} .angebot-page .angebot-technische-angaben__intro { flex: 1 1 auto;} .angebot-page .angebot-technische-angaben__box { flex-direction: column; gap: 0; padding: var(--angebot-space-24);} /* Untereinander braucht die zweite Gruppe eine Trennlinie, sonst stossen letzte und erste Zeile ohne Kante aneinander. */ .angebot-page .angebot-technische-angaben__gruppe + .angebot-technische-angaben__gruppe .angebot-technische-angaben__eintrag:first-child { border-top: 1px solid var(--angebot-border-subtle);} /*---- Eckdaten ----*/ /* Polsterung von 32 auf 20: bei 172px Kachelbreite brechen sonst "ab 500 Stueck" und "ca. 3 Wochen" zweizeilig um. */ .angebot-page .angebot-eckdaten__eintrag { padding: var(--angebot-space-20);} /*---- Referenzen als Wischslider ----*/ /* Drei Karten im Hochformat: einspaltig ist die Sektion bei 390px 1893px hoch, weil das Bild 477 der 534px je Karte ausmacht. Zweispaltig bliebe im Tablet-Band eine Karte allein in der zweiten Zeile stehen. Als Slider ist es eine Zeile ohne Waise, und drei Karten sind mit zwei Wischgesten vollstaendig gesehen. Der negative Aussenabstand zieht die Spur bis an den Bildschirmrand, damit die naechste Karte sichtbar hineinragt. Genau dieses Anschneiden ist der Hinweis, dass es weitergeht. */ /* Quadrat statt des Hochformats aus dem Frame. Entscheidend ist nicht die gesparte Hoehe, sondern dass die ganze Karte aus Bild, Titel und Eckdaten in den Bildschirm passt: bei 279px Kartenbreite ist sie mit 1:1 rund 345px hoch, mit dem Frame-Verhaeltnis 390 und mit 3:4 sogar 438. Nur beim Quadrat sieht man eine Referenz vollstaendig, bevor man weiterwischt. Ausserdem beschneidet ein Quadrat gemischtes Fotomaterial am gutmuetigsten. Auf dem Desktop bleibt es beim Frame-Verhaeltnis. */ .angebot-page .angebot-referenzen__bild { aspect-ratio: 1 / 1;} .angebot-page .angebot-referenzen__liste { display: flex; gap: var(--angebot-space-16); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: calc(var(--angebot-gutter-min) / 2); margin: var(--angebot-space-32) calc(var(--angebot-gutter-min) / -2) 0; padding: 0 calc(var(--angebot-gutter-min) / 2); scrollbar-width: none;} .angebot-page .angebot-referenzen__liste::-webkit-scrollbar { display: none;} .angebot-page .angebot-referenzen__eintrag { flex: 0 0 var(--angebot-referenz-karte); scroll-snap-align: start;} /*---- Produktion Schweiz ----*/ .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__karte { flex-direction: column; padding: var(--angebot-space-32);} .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__inhalt { flex: 1 1 auto;} /* Verlauf senkrecht statt waagrecht. Der Frame-Verlauf laeuft von links 0.88 nach rechts 0 und ist auf eine 413px schmale Textspalte in einer 1280px breiten Karte ausgelegt. Hier nimmt der Text die volle Breite ein, dadurch wird jede Zeile nach rechts hin heller und der Verlauf wirkt wie ein Fleck statt wie Gestaltung. Deutlich schwaecher als auf dem Desktop, und zwar gemessen: das Motiv hat eine Medianhelligkeit von 24 von 255, weisser Text erreicht darauf auch voellig ohne Abdunklung 9.23:1 und damit das Doppelte der geforderten 4.5:1. Entscheidend sind die Lichter bei 58. Ab etwa 0.7 Deckkraft sinken die auf Medianniveau und das Foto wird zur gleichmaessigen Flaeche. 0.20 bis 0.45 laesst die Struktur stehen und haelt den Kontrast bei ueber 10:1. Wird das Motiv spaeter durch ein helles ersetzt, muss dieser Wert nach oben. */ .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__karte::after { background: linear-gradient(180deg, rgba(8, 8, 8, 0.20) 0%, rgba(8, 8, 8, 0.45) 100%);} /*---- FAQ ----*/ /* Titel, dann die Fragen, der Kontakthinweis ans Ende. Er ist der Ausweg fuer alle, die in der Liste nichts gefunden haben, und gehoert deshalb dahinter, nicht davor. display:contents loest den Rail auf, damit seine beiden Kinder direkt in der Spalte sortiert werden koennen. */ .angebot-page .angebot-faq__inner { flex-direction: column; align-items: stretch; gap: var(--angebot-space-24);} .angebot-page .angebot-faq__rail { display: contents;} .angebot-page .angebot-faq__titel { order: 1;} .angebot-page .angebot-faq__liste { order: 2; flex: 1 1 auto;} .angebot-page .angebot-faq__cta { order: 3;} /*---- Abschluss-CTA ----*/ /* Die Wortmarke ist 542px breit und wuerde den Text ueberlagern. */ .angebot-page .angebot-abschluss-cta::before { display: none;} /*---- Angebots-Raster ----*/ /* Zwei Spalten: bei 1024px bleiben pro Karte rund 470px, vier Spalten waeren rund 230px und damit schmaler als die Bildflaeche vorsieht. */ .angebot-page .angebot-grid__liste { --angebot-grid-spalten: 2;} /* Die Leiste bricht um, sonst quetscht das Suchfeld die Chips. Sie bleibt sticky, der Versatz gilt weiter, weil die Kopfzeile auch hier fixed ist. */ .angebot-page .angebot-grid__leiste-oben { flex-direction: column; align-items: stretch;} .angebot-page .angebot-grid__suche { flex: 1 1 auto;} } /*============ Mobil: bis 767px ============*/ @media (max-width: 767px) { /* Alle Raster einspaltig. Bei 358px Inhaltsbreite bleiben zweispaltig nur 167px je Karte, das traegt weder Bild noch Zeile. */ .angebot-page .angebot-karten-grid__liste { --angebot-karten-spalten: 1;} /* Ausnahme: die Spezifikationskarten der Formenuebersicht. Sie tragen nur Nummer, Massangabe, eine Zeichnung und zwei Zeilen Text, also genau so wenig wie die Eckdaten-Kacheln, die zu zweit nachweislich funktionieren. Einspaltig waere die Sektion bei drei Karten schon 1114px hoch, und der Frame sieht sieben vor. */ .angebot-page .angebot-karten-grid--spec .angebot-karten-grid__liste { --angebot-karten-spalten: 2;} .angebot-page .angebot-verwandte-produkte__liste { grid-template-columns: minmax(0, 1fr);} /* Im Slider passt bei dieser Breite nur eine Karte plus Anschnitt. */ .angebot-page { --angebot-referenz-karte: 78%;} /* Einsatzbereiche bleiben zweispaltig. Einspaltig ist die Sektion mit den sechs Fotos 2683px hoch, weil das Bild allein 293 der 382px je Karte ausmacht. Der Titel ist mit einem Wort kurz genug fuer die schmale Spalte, und die zwei Zeilen Text tragen den Umbruch. */ /* Eckdaten 2x2 statt vier nebeneinander. Bei vier Spalten bleiben auf 390px nur 78px je Kachel, abzueglich 32px Polsterung sind das 14px Textbreite: die Werte brechen dreizeilig um und die Labels werden abgeschnitten. Zu zweit sind es rund 171px, also dieselbe Kachelbreite, die im Tablet-Band bereits nachweislich traegt. Die kleinere Polsterung kommt schon aus dem Block darueber. */ .angebot-page .angebot-eckdaten__eintrag { flex: 1 1 calc(50% - var(--angebot-column-gap) / 2);} /* Technische Angaben untereinander statt Label links, Wert rechts. Bei 390px brechen drei der acht Werte zweizeilig um, und rechtsbuendig franst die zweite Zeile dann aus ("...123 x 70 mm je / nach Version"). Untereinander haben alle Werte eine gemeinsame linke Kante, und der Blick springt nicht mehr zwischen den Spalten hin und her. Im Tablet-Band bleibt die Zeile, dort passt jeder Wert einzeilig. */ .angebot-page .angebot-technische-angaben__eintrag { flex-direction: column; align-items: flex-start; gap: var(--angebot-space-4);} .angebot-page .angebot-technische-angaben__eintrag dd { text-align: left;} /* Buttons ueber die volle Breite, damit die Trefferflaeche stimmt. */ .angebot-page .angebot-hero__buttons, .angebot-page .angebot-abschluss-cta__buttons { width: 100%;} .angebot-page .angebot-hero__buttons .angebot-btn, .angebot-page .angebot-abschluss-cta__buttons .angebot-btn { flex: 1 1 100%;} /* Der Preisanker sitzt bei dieser Breite nicht mehr auf dem Bild, sondern darunter: er wuerde sonst die Haelfte des Motivs verdecken. */ .angebot-page .angebot-hero__preisanker { position: static; width: 100%; max-width: none; box-sizing: border-box; justify-content: space-between; margin: var(--angebot-space-8) 0 0 0;} .angebot-page .angebot-hero__bild { overflow: visible;} .angebot-page .angebot-hero__bild img { border-radius: var(--angebot-radius);} /* Kartenpolsterung zuruecknehmen. */ .angebot-page .angebot-vergleich__modell, .angebot-page .angebot-karten-grid--feature .angebot-karten-grid__karte, .angebot-page .angebot-einsatzbereiche__inhalt { padding: var(--angebot-space-16);} .angebot-page .angebot-text-bild-cta--bild-hintergrund .angebot-text-bild-cta__karte { padding: var(--angebot-space-24);} .angebot-page .angebot-technische-angaben__box { padding: var(--angebot-space-16);} /*---- Hero-Ueberschrift ----*/ /* Die H1 der Angebotsseiten ist von Haus aus lang, weil sie das Keyword traegt. Auf schmalen Geraeten frisst sie damit den halben ersten Bildschirm. Gemessen an "Duftbaeume selbst gestalten und mit Logo bedrucken lassen" bei 48px: 360px 6 Zeilen 288px 32% des Bildschirms 390px 5 Zeilen 240px 27% 430px 4 Zeilen 192px 21% 560px 3 Zeilen 144px 16% 767px 2 Zeilen 96px 11% Ab rund 560px ist es also in Ordnung, nur darunter nicht. Deshalb kein pauschaler Wert fuer den ganzen Block, sondern eine an die Breite gekoppelte Groesse mit Deckel auf 48px: auf dem Telefon 36px, ab rund 600px wieder die seitenweite Hausgroesse, die Startseite, Service- Seiten und Ueber uns ebenfalls nutzen. Der Titeltext bleibt unveraendert, ebenso Seitentitel und Schema. */ .angebot-page .angebot-hero__titel { font-size: clamp(36px, 6vw + 12px, 48px);} /*---- Angebots-Raster ----*/ /* Eine Spalte. Zwei waeren bei 390px rund 160px pro Karte, dort steht kein Produktname mehr lesbar. */ .angebot-page .angebot-grid__liste { --angebot-grid-spalten: 1;} .angebot-page .angebot-grid__inhalt, .angebot-page .angebot-grid__beschaffung { padding: var(--angebot-space-16);} /* Nicht sticky auf Mobil: die Leiste braeuchte mit Chips und Suchfeld uebereinander ueber 150px Hoehe und frisst damit ein Fuenftel des Bildschirms. */ .angebot-page .angebot-grid__leiste { position: static; top: auto;} /* Chips in eine wischbare Zeile statt Umbruch. Bei 390px brachen sie auf zwei Zeilen und waren nur 27px hoch, also unter jeder brauchbaren Fingergroesse. 44px ist die gaengige Zielgroesse und liegt deutlich ueber dem Minimum von 24px aus WCAG 2.5.8. Der negative Aussenabstand plus gleich grosses Innenpolster laesst die Zeile bis an den Bildschirmrand auslaufen. Ohne das endet sie buendig mit dem Text und sieht vollstaendig aus, obwohl rechts noch Chips folgen. */ .angebot-page .angebot-grid__filter { margin-inline: calc(var(--angebot-gutter-min) / 2 * -1); } .angebot-page .angebot-grid__filter-liste { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-inline: calc(var(--angebot-gutter-min) / 2);} .angebot-page .angebot-grid__filter-liste::-webkit-scrollbar { display: none;} .angebot-page .angebot-grid__filter-eintrag { flex: 0 0 auto; scroll-snap-align: start;} .angebot-page .angebot-grid__filter-link { min-height: 44px; white-space: nowrap;} /*---- Abschluss-CTA ----*/ /* Telefon und E-Mail waren 18px hoch. Der Text bleibt gleich gross, nur die Trefferflaeche waechst. Gilt auf allen Angebotsseiten, der Abschluss-CTA steht ueberall und die Zeile ist dort genauso klein. */ .angebot-page .angebot-abschluss-cta__person-kontakt a { display: inline-flex; align-items: center; min-height: 44px;} }