-Wrapper gesetzt (siehe _partials/home/_section-wrapper.tpl). CSS nutzt diese Variablen semantisch (z.B. für Titel, Buttons). - Keine hardcoded Farb-Klassen à la .calonder-section--beige-light. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Theme-Variablen (Layout, Typografie, neutrale Werte) -------------------------------------------------------------------------- */ :root { /* Layout */ --calonder-max-width: 1860px; --calonder-content-max-width: 1100px; /* Content-Seiten: my-account, Kontakt, CMS etc. */ /* * --calonder-page-gutter: seitlicher Innenabstand für EIGENE Layout-Wrapper. * Wird verwendet auf: .calonder-section__inner, .calonder-header__inner, * .calonder-footer__inner, .calonder-zone__inner (alle mit __inner im Namen). * * NICHT für Bootstrap-.container verwenden — Bootstrap verwaltet den * seitlichen Abstand seiner Container intern via --bs-gutter-x * (padding = --bs-gutter-x * 0.5). Dort stattdessen --bs-gutter-x setzen. * Beispiel: .calonder-middle (hat Klasse "container") nutzt --bs-gutter-x: 3rem. */ --calonder-page-gutter: 2.5rem; /* ≥900px */ --calonder-header-height: 100px; /* Sticky-Header-Höhe — auch für scroll-padding-top */ /* Schrift-Stacks */ --calonder-font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --calonder-font-heading: 'Rubik', system-ui, -apple-system, sans-serif; /* Neutrale Werte — kein Markenwert, kein Modul-Token */ --calonder-ink: #1a1a1a; /* Allgemeine Textfarbe, kein Markenwert */ --calonder-paper: #ffffff; /* Weiss, kein Markenwert */ /* ── Fallback-Farben für calonder_content Modul-Tokens ───────────────── Das Modul injiziert diese Werte via im und überschreibt sie (spätere Dokument-Reihenfolge gewinnt). Falls das Modul nicht lädt, gelten diese Werte als Sicherheitsnetz. */ --calonder-beige: #F4F3EA; --calonder-beige-header-transparent: #F4F3EAD9; --calonder-beige-parts: #B9B39E; --calonder-gruen: #1B522E; --calonder-gruen-hell: #2A7A3F; --calonder-gruen-deep: #0F3D1E; --calonder-blau: #00338E; --calonder-blau-hell: #0055CC; --calonder-grau: #464944; --calonder-leder: #7D5A38; --calonder-rot: #DC0000; --calonder-rot-hell: #FF0606; /* ──────────────────────────────────────────────────────────────────────── */ /* Shortcuts auf Modul-Tokens */ --calonder-header-bg: var(--calonder-beige-header-transparent); --calonder-footer-bg: var(--calonder-beige-parts); } /* --calonder-page-gutter responsiv — betrifft alle __inner-Wrapper, Header und Bootstrap-Container-Gutter */ @media (max-width: 899.98px) { :root { --calonder-page-gutter: 1.25rem; } } @media (max-width: 575.98px) { :root { --calonder-page-gutter: 0.875rem; } } html { scroll-padding-top: var(--calonder-header-height); overscroll-behavior-y: none; /* verhindert Rubber-Band am Seitenende (fixed ≠ sticky Drift) */ } /* -------------------------------------------------------------------------- 1b. Typography - Body: DM Sans (Default) - Headings: Rubik, 700 bold, UPPERCASE - Produkt-Miniatur-Titel: Rubik, 600 semi-bold, 20px, kein Uppercase -------------------------------------------------------------------------- */ /* PS9: .ps-hidden-by-js wird via jQuery DOMReady ausgeblendet — bei AJAX-geladenen Step-Inhalten (z.B. Payment-Step) läuft DOMReady bereits, neue Elemente werden nicht erwischt. Lösung: layout.tpl setzt synchron via Inline-Script → CSS greift sofort und für alle späteren AJAX-Inhalte. Ohne JS bleibt js-active weg → No-JS-Fallbacks (Wählen-Button, AGB-Text etc.) bleiben sichtbar. */ .js-active .ps-hidden-by-js { display: none !important; } body { font-family: var(--calonder-font-body); font-weight: 400; /* Globaler Seitenhintergrund — Farbe aus Modul-Token "beigehell_creme", Fallback Hex falls Modul die Variable nicht liefert */ background-color: var(--calonder-beige); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--calonder-font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; } h1, .h1 { font-size: 42px; } h2, .h2 { font-size: 30px; } h3, .h3 { font-size: 24px; } h4, .h4 { font-size: 22px; } h5, .h5 { font-size: 18px; } h6, .h6 { font-size: 16px; } /* Margins: h1 kein margin-top (Seitentitel), h2+ mit Luft nach oben. */ h1, .h1 { margin-top: 0; margin-bottom: 0.7rem; } .page-title-section { color: var(--calonder-gruen); } /* Seitentitel (Kategorie, Warenkorb, Bestseller …) progressiv kleiner Basis (≥1650px) auf gleiche Grösse wie Stufe darunter gesenkt */ @media (min-width: 1650px) { .page-title-section { font-size: 2.25rem; } /* ≈36px — ehem. 2.625rem */ } @media (min-width: 1200px) and (max-width: 1649.98px) { .page-title-section { font-size: 2.25rem; } /* ≈36px */ } @media (min-width: 900px) and (max-width: 1199.98px) { .page-title-section { font-size: 1.875rem; } /* 30px */ } @media (min-width: 768px) and (max-width: 899.98px) { .page-title-section { font-size: 1.75rem; } /* 28px */ } /* Kundenkonto: Sidebar-Menütitel kleiner + Silbentrennung */ .account-menu--sidebar .account-menu__title { font-size: 1.25rem; hyphens: auto; overflow-wrap: break-word; margin-top: 0; } @media (max-width: 767.98px) { .account-menu--sidebar .account-menu__title { font-size: 1.125rem; } } @media (max-width: 575.98px) { .account-menu--sidebar .account-menu__title { font-size: 1rem; } } h2, .h2, h3, .h3, h4, .h4 { margin-top: 1.5rem; margin-bottom: 0.7rem; } h5, .h5, h6, .h6 { margin-top: 1.25rem; margin-bottom: 0.5rem; } p { margin-bottom: 0.6rem; } /* Gleiche Grössen mit höherer Spezifität für Sections — überschreibt Parent-Theme- und Modul-Widget-Heading-Regeln (z.B. ps_featuredproducts, ps_newproducts die oft eigene h2-Grössen setzen). */ .calonder-section h1, .calonder-section .h1 { font-size: 42px; } .calonder-section h2, .calonder-section .h2 { font-size: 30px; } .calonder-section h3, .calonder-section .h3 { font-size: 24px; } .calonder-section h4, .calonder-section .h4 { font-size: 22px; } .calonder-section h5, .calonder-section .h5 { font-size: 18px; } .calonder-section h6, .calonder-section .h6 { font-size: 16px; } /* Startseite: h2 so gross wie h1 (42px) — Sections-Titel sollen prominent sein. */ body.page-index .calonder-section h2, body.page-index .calonder-section .h2 { font-size: 42px; margin-top: 0; margin-bottom: 1.25rem; } /* Startseite: Titel progressiv kleiner — beginnt ab 1500px */ @media (max-width: 1499.98px) { body.page-index .calonder-section h2, body.page-index .calonder-section .h2 { font-size: 38px; } } @media (max-width: 1199.98px) { body.page-index .calonder-section h2, body.page-index .calonder-section .h2 { font-size: 34px; } } @media (max-width: 1023.98px) { body.page-index .calonder-section h2, body.page-index .calonder-section .h2 { font-size: 30px; } } @media (max-width: 767.98px) { body.page-index .calonder-section h2, body.page-index .calonder-section .h2 { font-size: 26px; } } @media (max-width: 575.98px) { body.page-index .calonder-section h2, body.page-index .calonder-section .h2 { font-size: 22px; } } /* Globale responsive Typografie (alle Seiten, inkl. nicht-Startseite). Produkt-Miniatur-Titel (20px) und PDP-Produktname haben eigene Regeln mit höherer Spezifität — werden hier nicht überschrieben. Startseite-spezifische h2-Regeln (body.page-index) gewinnen durch höhere Spezifität ebenfalls über die allgemeinen .calonder-section-Regeln. */ @media (max-width: 1023.98px) { .calonder-section h1 { font-size: 2.125rem; } .calonder-section h2 { font-size: 1.75rem; } } @media (max-width: 767.98px) { h1, .h1 { font-size: 1.75rem; } h2, .h2 { font-size: 1.5rem; } h3, .h3 { font-size: 1.25rem; } .calonder-section h1 { font-size: 1.75rem; } .calonder-section h2 { font-size: 1.5rem; } .calonder-section h3 { font-size: 1.25rem; } } @media (max-width: 575.98px) { h1, .h1 { font-size: 1.5rem; } h2, .h2 { font-size: 1.25rem; } h3, .h3 { font-size: 1.125rem; } .calonder-section h1 { font-size: 1.5rem; } .calonder-section h2 { font-size: 1.375rem; } .calonder-section h3 { font-size: 1.1875rem; } } /* Produkt-Miniatur-Titel: Rubik, 600, 20px — nicht uppercase, damit Produktnamen lesbar bleiben. Spezifität höher als .calonder-section h2, damit Produkt-Titel innerhalb einer Section trotzdem 20px bleiben. */ .calonder-section .product-miniature h1, .calonder-section .product-miniature h2, .calonder-section .product-miniature h3, .calonder-section .product-miniature h4, .calonder-section .product-miniature .product-title, .calonder-section .product-miniature .product-title a, .product-miniature h1, .product-miniature h2, .product-miniature h3, .product-miniature h4, .product-miniature .product-title, .product-miniature .product-title a { font-family: var(--calonder-font-heading); font-weight: 600; font-size: 20px; text-transform: none; letter-spacing: 0; line-height: 1.4; } /* -------------------------------------------------------------------------- 1c. Bootstrap CSS-Variablen-Overrides Bootstrap 5.3 setzt Text- und Heading-Farben über eigene CSS-Custom-Properties. Diese hier überschreiben, damit Bootstrap-interne Komponenten (Cards, Alerts, Formulare etc.) konsistent die Calonder-Farbwelt nutzen — ohne !important. --bs-body-color: Fliesstext, Formulare, Tabellen --bs-heading-color: h1–h6 (Bootstrap setzt: color: var(--bs-heading-color, inherit)) --bs-link-color: Links in BS-Komponenten (Alert, Card, etc.) -------------------------------------------------------------------------- */ :root { --bs-body-color: var(--calonder-ink); --bs-heading-color: var(--calonder-ink); --text-link-color: var(--calonder-blau); --bs-link-color: var(--text-link-color); } /* .btn: Hummingbird setzt transition:none — wir aktivieren sanfte Übergänge global. */ .btn { font-family: var(--calonder-font-heading); font-weight: 600; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; border-radius: 0.375rem; } /* btn-primary: Calonder Blau — überschreibt Hummingbird/theme.css-Werte vollständig. --bs-btn-focus-shadow-rgb braucht nackte RGB-Zahlen (CSS-Variable nicht möglich). Wert = RGB von --calonder-blau (#00338E). Bei Farbänderung hier anpassen. */ .btn-primary { --bs-btn-color: var(--calonder-paper); --bs-btn-bg: var(--calonder-blau); --bs-btn-border-color: var(--calonder-blau); --bs-btn-hover-color: white; --bs-btn-hover-bg: var(--calonder-blau-hell); --bs-btn-hover-border-color: var(--calonder-blau-hell); --bs-btn-focus-shadow-rgb: 0, 51, 142; --bs-btn-active-color: white; --bs-btn-active-bg: var(--calonder-blau-hell); --bs-btn-active-border-color: var(--calonder-blau-hell); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1); --bs-btn-disabled-color: var(--calonder-paper); --bs-btn-disabled-bg: var(--calonder-blau); --bs-btn-disabled-border-color: var(--calonder-blau); font-family: var(--calonder-font-heading); font-weight: 600; } /* btn-outline-primary: Calonder Blau — überschreibt theme.css-Werte (Bootstrap --bs-primary). Hover/Active: calonder-blau-hell für konsistenten Helligkeitseffekt. --bs-btn-focus-shadow-rgb = RGB von --calonder-blau (#00338E). */ .btn-outline-primary { --bs-btn-color: var(--calonder-blau); --bs-btn-border-color: var(--calonder-blau); --bs-btn-hover-color: white; --bs-btn-hover-bg: var(--calonder-blau-hell); --bs-btn-hover-border-color: var(--calonder-blau-hell); --bs-btn-focus-shadow-rgb: 0, 51, 142; --bs-btn-active-color: white; --bs-btn-active-bg: var(--calonder-blau-hell); --bs-btn-active-border-color: var(--calonder-blau-hell); --bs-btn-disabled-color: var(--calonder-blau); --bs-btn-disabled-border-color: var(--calonder-blau); } a { color: var(--text-link-color); } a:hover { color: var(--calonder-blau-hell); } /* soll Button-Farbe aus --bs-btn-color bekommen, nicht Link-Farbe. calonder-btn-* ausgenommen: deren Farbe liefert das Modul (0,1,0) oder .btn.calonder-btn-spezial-* (0,2,0). Die :not()-Regel bleibt bei (0,2,1) und greift nicht für calonder-btn-* → Modul-Regeln können ungestört wirken. */ a.btn:not([class*="calonder-btn-"]) { color: var(--bs-btn-color); text-decoration: none; } a.btn:not([class*="calonder-btn-"]):hover { color: var(--bs-btn-hover-color); } /* -------------------------------------------------------------------------- 1d. Spalten-Gap (Sidebar-Layouts) #left-column und #right-column bekommen mehr Innen-Abstand zum Hauptinhalt. Gilt global für alle Layouts (Kategorie, Produkt, Warenkorb). -------------------------------------------------------------------------- */ #left-column { padding-right: 2.5rem; } #right-column { padding-left: 2.5rem; padding-bottom: 2rem; } /* <1650px: weniger Zwischen-Padding genügt */ @media (max-width: 1649.98px) { #left-column { padding-right: 1.25rem; } #right-column { padding-left: 1.25rem; } } .calonder-wrapper { margin-top: 1.25rem; } @media (max-width: 1499.98px) { body.page-index .calonder-wrapper { margin-top: 0; } } /* -------------------------------------------------------------------------- 1e. Card-System Generische Card-Klassen für konsistente Box-Darstellung. Klasse direkt auf das Element setzen (kein inneres Wrapper nötig). calonder-card-white — voller weisser Hintergrund calonder-card-soft — halbtransparentes Weiss (z.B. auf farbigem Bg) -------------------------------------------------------------------------- */ .calonder-card-white, .calonder-card-soft { border: 1px solid color-mix(in srgb, var(--calonder-beige-parts) 40%, transparent); border-radius: 0.5rem; overflow: hidden; padding: 1.25rem; } .calonder-card-white { background: var(--calonder-paper); } .calonder-card-soft { background: color-mix(in srgb, var(--calonder-paper) 85%, transparent); } /* Content-Seiten (full-width Layout, kein Sidebar): Breite auf lesbares Mass begrenzen. Bei Viewport <1100px greift max-width gar nicht → Mobile unverändert. Homepage + Cart/Order ausgeschlossen (kein calonder-card-white, siehe layout-full-width.tpl). */ .page--full-width.calonder-card-white { max-width: var(--calonder-content-max-width); margin-inline: auto; margin-block: 2rem; width: 100%; } /* -------------------------------------------------------------------------- 2. Bootstrap Container Override (1860px-Strategie) Bootstrap's Standard-max-width ab "xxl" (1400px Viewport) ist 1320px — für Calonders breites Layout zu eng. Wir setzen alle Container-Klassen ab 1400px auf --calonder-max-width (1860px). Was wir hier NICHT ändern: das seitliche Padding der Container. Bootstrap berechnet es intern als calc(--bs-gutter-x * 0.5) und das bleibt unangetastet — ausser dort wo wir es explizit mit einem eigenen --bs-gutter-x-Wert überschreiben (z.B. .calonder-middle: --bs-gutter-x: 3rem). -------------------------------------------------------------------------- */ @media (min-width: 1400px) { .container, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container--limited-xxl, .container--limited-xl, .container--limited-md { max-width: var(--calonder-max-width); } } /* ── Spalten-Layout ──────────────────────────────────────────────────────── Desktop (≥1100px): 3 Spalten sichtbar — Template nutzt col-lg-3/col-lg-6/col-lg-3 (25% / 50% / 25%) damit Sidebars breit genug bleiben. Hamburger-Zone (900–1099px): linke Spalte weg, Mitte 75% / Rechts 25%. Mobile (<900px): alle Spalten 100%. ───────────────────────────────────────────────────────────────────────── */ /* Linke Spalte nur verstecken wenn Hamburger aktiv (≤1100px) */ @media (max-width: 1100px) { #left-column { display: none; } } /* Tablet Querformat 900–1100px: Mitte 75% / Rechts 25%. .page--full-width-Seiten (Cart, my-account etc.) ausgenommen: dort gibt es keinen #right-column → #center-column soll 100% bleiben. */ @media (min-width: 900px) and (max-width: 1100px) { #center-column:not(.page--full-width) { flex: 0 0 auto; width: 75%; } #right-column { flex: 0 0 auto; width: 25%; } } /* 900–1059px: rechte Spalte auf 40% verbreitern — 25% ist bei kleinen Viewports zu schmal */ @media (min-width: 900px) and (max-width: 1059.98px) { #center-column:not(.page--full-width) { width: 60%; } #right-column { width: 40%; } } /* Tablet Hochkant + Mobile (<900px): beide 100%, rechte Spalte stapelt darunter */ @media (max-width: 899.98px) { #center-column, #right-column { flex: 0 0 auto; width: 100%; } } /* ≥1650px: Sidebars zurück auf 16.67% / Mitte 66.67% (klassisch col-lg-2/col-lg-8/col-lg-2) */ @media (min-width: 1650px) { #left-column, #right-column { flex: 0 0 auto; width: 16.6666666667%; } #center-column:not(.page--full-width) { flex: 0 0 auto; width: 66.6666666667%; } } /* ps_mainmenu: eigenen Mobile-Toggle und Mobile-Offcanvas (#mobileMenu) unterdrücken. Calonder nutzt ausschliesslich eigenen Hamburger-Drawer (#calonder-mobile-nav). Der Desktop-Nav von ps_mainmenu (.ps-mainmenu--desktop) bleibt aktiv (er rendert aus einer anderen Datenquelle als $calonder_content.menu). */ .ps-mainmenu__mobile-toggle, .ps-mainmenu--mobile { display: none !important; } /* Calonder nutzt full-width Layout — Bootstrap's zentrierende max-width unter 1400px entfernen. Das seitliche Padding kommt vom Bootstrap-Gutter (--bs-gutter-x) und eigenen __inner-Wrappern mit --calonder-page-gutter. */ @media (max-width: 1399.98px) { .container, .container-xl, .container-lg, .container-md, .container-sm { max-width: 100%; } } /* -------------------------------------------------------------------------- 3. Section-System (Startseite + alle Section-Wrapper) Struktur:

...

Farben kommen aus inline style (gesetzt durch _section-wrapper.tpl). CSS nutzt die --section-* Variablen semantisch für Titel und Buttons. -------------------------------------------------------------------------- */ .calonder-section { width: 100%; } .calonder-section__inner { margin-inline: auto; padding-block: 3rem; padding-inline: var(--calonder-page-gutter); } .calonder-section--boxed > .calonder-section__inner { max-width: var(--calonder-max-width); } .calonder-section--full > .calonder-section__inner { max-width: 100%; } /* Utility: Element auf max. 1860px einschränken + zentrieren, OHNE extra Padding (das kommt vom umgebenden __inner). Hauptnutzung: Titel in --full Sections, damit sie innerhalb der boxed-Zone linksbündig stehen, während Produkt-Grids daneben die volle Breite des __inner nutzen. */ .calonder-u-boxed { max-width: var(--calonder-max-width); margin-inline: auto; box-sizing: border-box; } /* In allen Calonder-Sections übernimmt calonder-section__inner die Rolle des Bootstrap-Containers (Gutter via --calonder-page-gutter). Eingebettete .container-Elemente von Widgets (ps_newproducts etc.) sollen daher: - kein zusätzliches padding-inline addieren (wäre doppeltes Gutter) - in Full-Width-Sections: nicht auf Bootstrap's Standard-max-width beschränkt */ .calonder-section .container { padding-inline: 0; } .calonder-section--full .container { max-width: 100%; } /* Alle Top-Level-Headings in Full-Width-Sections werden auf 1860 boxed, damit Widget-Titel (ps_newproducts etc.) automatisch mitziehen. Ausnahme: Produkt-Miniaturen (unten). */ .calonder-section--full > .calonder-section__inner h1, .calonder-section--full > .calonder-section__inner h2, .calonder-section--full > .calonder-section__inner h3 { max-width: var(--calonder-max-width); margin-inline: auto; box-sizing: border-box; display: block; } /* Ausnahme: Produkt-Miniatur-Titel sollen ihre Miniatur füllen, nicht auf 1860 beschränkt werden. */ .calonder-section--full .product-miniature h1, .calonder-section--full .product-miniature h2, .calonder-section--full .product-miniature h3, .calonder-section--full .product-miniature__title, .calonder-section--full .product-miniature .product-title { max-width: none; margin-inline: 0; } /* Titel in Sections nutzen die Title-Farbe aus dem Scheme */ .calonder-section h1, .calonder-section h2, .calonder-section h3, .calonder-section h4, .calonder-section h5, .calonder-section h6 { color: var(--section-title, inherit); } /* Buttons in Sections: alle calonder-btn-* Klassen haben eigene Styles und werden hier explizit ausgenommen. Bare .btn ohne calonder-btn-* Klasse erhält keine Section-spezifische Farbe mehr (ab Modul v1.2.0). */ .calonder-section .btn:not(.calonder-pillars__btn):not([class*="calonder-btn-"]) { color: var(--section-btn-text); background-color: var(--section-btn-bg); border-color: var(--section-btn-bg); transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .calonder-section .btn:not(.calonder-pillars__btn):not([class*="calonder-btn-"]):hover, .calonder-section .btn:not(.calonder-pillars__btn):not([class*="calonder-btn-"]):focus { color: var(--section-btn-hover-text); background-color: var(--section-btn-hover-bg); border-color: var(--section-btn-hover-bg); } /* -------------------------------------------------------------------------- 3b. Hero-Section (50/50 Split: Feature-Produkte | Slideshow) Höhe-Strategie: Hero hat eine FESTE Höhe pro Breakpoint, damit die Slideshow (height: 100%) zuverlässig funktioniert. Beide Spalten füllen die Höhe vollständig (align-items: stretch). Slideshow ist leicht nach unten versetzt (Design-Wunsch) via margin-top. -------------------------------------------------------------------------- */ /* Hero: kein Hintergrund auf der Section — nur linke Spalte grün. __inner: normales seitliches Padding, kein Block-Padding (Spalten bestimmen den Weissraum). */ /* .calonder-section--hero { */ /* kein background */ /* } */ .calonder-section--hero > .calonder-section__inner { padding-inline: var(--calonder-page-gutter); padding-block: 1.5rem 4rem; } /* Grid: kein Gap (A), linke Spalte kürzer via margin-block (C) */ .calonder-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; position: relative; } /* SEO-H1: absolut positioniert in der oberen linken Ecke des Hero-Grids, lebt im margin-block-Bereich der linken Spalte (1.5rem) — kein Platzbedarf. */ .calonder-hero__seo-h1 { position: absolute; top: 0; left: 0; font-family: var(--calonder-font-heading); font-size: 0.8125rem !important; font-weight: 600; color: var(--calonder-gruen-deep) !important; opacity: 0.8; margin: 0; padding: 0 0 0 2rem; line-height: 1.7; } /* Ab <1500px kein Platz mehr im Margin-Bereich → in den normalen Flow, volle Breite */ @media (max-width: 1499.98px) { .calonder-hero__seo-h1 { position: static; grid-column: 1 / -1; padding-block: 0.25rem 0.75rem; } } @media (max-width: 899.98px) { .calonder-hero__seo-h1 { padding-block: 0.25rem 0.75rem; } } @media (max-width: 767.98px) { .calonder-hero__seo-h1 { text-align: center; padding-inline: 0.5rem; } } /* -------------------------------------------------------------------------- 3a. Globales Produktgrid-System Feste Spaltenanzahl je Breakpoint → Kacheln wachsen auf Desktop voll auf (wie Bootstrap col-3). Min. 260px pro Kachel: berechnet aus Viewport − Gutter − Gap. 1 Kachel: < 576px (≥375px iPhone SE: ~347px) ✓ 2 Kacheln: 576–899px (bei 576px: ~266px) ✓ 3 Kacheln: 900–1199px (bei 900px: ~263px) ✓ 4 Kacheln: ≥ 1200px (bei 1200px: ~268px), Desktop streckt auf 328–448px+ ✓ -------------------------------------------------------------------------- */ .calonder-section .products { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; /* Bootstrap .row negative margins neutralisieren */ } @media (min-width: 576px) { .calonder-section .products { grid-template-columns: repeat(2, minmax(260px, 1fr)); } } @media (min-width: 900px) { .calonder-section .products { grid-template-columns: repeat(3, minmax(260px, 1fr)); } } @media (min-width: 1200px) { .calonder-section .products { grid-template-columns: repeat(4, minmax(260px, 1fr)); } } /* Bootstrap .col-* Padding + Breite der Wrapper-Elemente neutralisieren */ .calonder-section .products > * { padding: 0; min-width: 0; width: 100%; max-width: 100%; } /* -------------------------------------------------------------------------- 3b. Hero-Section -------------------------------------------------------------------------- */ .calonder-hero__products, .calonder-hero__slideshow { min-width: 0; overflow: hidden; } /* Linke Spalte: grüner Verlauf (gruen → gruen-deep, leicht diagonal), kürzer als rechte Spalte (C), nur linke Ecken abgerundet (D) */ .calonder-hero__products { height: auto; background: linear-gradient(135deg, var(--calonder-gruen) 0%, var(--calonder-gruen-deep) 70%); color: var(--calonder-paper); padding: 2rem 2.75rem 2.5rem; margin-block: 1.5rem; border-radius: 1.25rem 0 0 1.25rem; } /* Rechte Spalte: definiert die Gesamthöhe, alle Ecken abgerundet, Border (B) */ .calonder-hero__slideshow { align-self: stretch; min-height: var(--calonder-hero-height, 480px); height: auto; border: 4px solid var(--calonder-gruen-deep); border-radius: 1.25rem; background-color: var(--calonder-beige); overflow: hidden; padding: 0; } /* ps_featuredproducts in der Hero-Zone anpassen: - der interne .container soll volle 50% nutzen (nicht weiter eingeengt werden) - Produkte immer 2 pro Reihe via CSS-Grid (umgeht Bootstrap's col-* und row-cols-* komplett — kein !important nötig) - bei > 2 Produkten brechen sie natürlich in die nächste Reihe um Bootstrap-Override: max-width + padding-inline auf 0 — Spacing kommt vom übergeordneten Hero-Grid (.calonder-hero), nicht vom Container selbst. */ .calonder-hero__products .container { max-width: 100%; padding-inline: 0; height: 100%; } .calonder-hero__products .products { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 2rem; margin: 0; } .calonder-hero__products .product-miniature { width: 100%; max-width: 100%; } /* Gestapelt (<1440px): auto-fit, min. 260px pro Produkt — bricht automatisch um */ @media (max-width: 1439.98px) { .calonder-hero__products .products { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } } /* Slideshow-Container: füllt die rechte Card vollständig */ .calonder-hero__slideshow .calonder-slideshow { width: 100%; height: 100%; border-radius: 0; background-color: rgba(0, 0, 0, 0.05); } .calonder-hero__slideshow-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; background-color: rgba(0, 0, 0, 0.05); border-radius: 0.5rem; padding: 2rem; } /* Tablet */ @media (max-width: 991.98px) { .calonder-hero__slideshow { min-height: var(--calonder-hero-height-md, 380px); } } /* Gestapelt (<1440px): Slideshow unter Produkten */ @media (max-width: 1439.98px) { .calonder-hero { grid-template-columns: 1fr; } .calonder-hero__products { height: auto; border-radius: 0.75rem; margin-block: 0 1rem; } .calonder-hero__slideshow { height: auto; min-height: unset; align-self: auto; border-radius: 0.75rem; } /* Höhe auf dem inneren .calonder-slideshow setzen (kein border-box-Verlust durch 4px-Border) Stufen unten überschreiben bei kleineren Viewports. */ .calonder-hero__slideshow .calonder-slideshow { height: 480px; /* ≥1024px gestapelt */ } } @media (max-width: 1023.98px) { .calonder-hero__slideshow .calonder-slideshow { height: 440px; } } @media (max-width: 767.98px) { .calonder-hero__slideshow .calonder-slideshow { height: 380px; } } @media (max-width: 549.98px) { .calonder-hero__slideshow .calonder-slideshow { height: 280px; } } /* -------------------------------------------------------------------------- 3f. Sortiment (Section 4): Tiles-Grid (quadratisch) + Text-Buttons-Grid -------------------------------------------------------------------------- */ #sortiment > .calonder-section__inner { padding-block-end: 4.25rem; } #inspiration > .calonder-section__inner { padding-block: 4.25rem; } #ratings > .calonder-section__inner { padding-block-start: 6rem; } /* -------------------------------------------------------------------------- 3. Mobile — Hero + Section-IDs (Base-CSS kommt VOR dieser Stelle → korrekte Kaskade) Ratings, Sortiment-Heading, Pillars-Box: Mobile-Overrides stehen jeweils NACH ihrem Base-CSS (weiter unten in dieser Datei). -------------------------------------------------------------------------- */ @media (max-width: 899.98px) { /* ── Hero: kompakteres Padding auf kleinen Screens ── */ .calonder-section--hero > .calonder-section__inner { padding-block: 0.75rem 1.75rem; } .calonder-hero__products { padding: 1.5rem 1.5rem 2rem; } /* ── Sortiment + Inspiration: Section-ID-Selektoren (Spez. 1,1,0 — stehen vor Base) ── */ #sortiment > .calonder-section__inner { padding-block-end: 2.5rem; } #inspiration > .calonder-section__inner { padding-block: 2.5rem; } } /* Allgemeine Section-Padding-Reduktion auf Mobile */ @media (max-width: 767.98px) { .calonder-section__inner { padding-block: 2.25rem; } } @media (max-width: 575.98px) { .calonder-section__inner { padding-block: 1.75rem; } } /* #ratings padding: Base steht bei Zeile ~620, Override hier danach ✓ */ @media (max-width: 991.98px) { #ratings > .calonder-section__inner { padding-block-start: 3rem; } } .calonder-sortiment__heading { margin-bottom: 2rem; } @media (max-width: 767.98px) { .calonder-sortiment__heading { margin-bottom: 1.25rem; } } /* Sortiment: Kacheln mit Karte (Bild 4:3 oben, Label darunter) */ .calonder-sortiment__tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.125rem; margin-bottom: 2rem; } .calonder-sortiment__tile { display: flex; flex-direction: column; background: var(--calonder-paper); border-radius: 0.5rem; border: 1px solid color-mix(in srgb, var(--calonder-beige-parts) 40%, transparent); padding: 0.625rem; text-decoration: none; color: var(--calonder-ink); transition: box-shadow 0.25s ease, border-color 0.25s ease; } .calonder-sortiment__tile:hover, .calonder-sortiment__tile:focus-visible { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); border-color: color-mix(in srgb, var(--calonder-gruen) 75%, transparent); } /* Bildbereich: 4:3, eigene abgerundete Ecken, position:relative für Pfeil + Haarlinie */ .calonder-sortiment__tile-imgwrap { position: relative; aspect-ratio: 4 / 3; border-radius: 0.25rem; overflow: hidden; background: #d8d4c8; flex-shrink: 0; } /* Haarlinie: verhindert Auslaufen heller Bilder */ .calonder-sortiment__tile-imgwrap::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); pointer-events: none; } .calonder-sortiment__tile-image { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; } /* Pfeil: weisses Quadrat mit runden Ecken, unten rechts im Bild */ .calonder-sortiment__tile-arrow { position: absolute; bottom: 0.625rem; right: calc(0.625rem + 3px); /* Ruheposition 3px weiter links → Animation endet bündig */ width: 1.75rem; height: 1.75rem; border-radius: 0.25rem; background-color: rgba(255, 255, 255, 0.95); color: var(--calonder-ink); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.25s ease; z-index: 1; } .calonder-sortiment__tile:hover .calonder-sortiment__tile-arrow, .calonder-sortiment__tile:focus-visible .calonder-sortiment__tile-arrow { transform: translateX(3px); } /* Label: unterhalb des Bildes auf der Kartenfläche */ .calonder-sortiment__tile-label { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; padding: 0.75rem 0.3125rem 0.25rem; } .calonder-sortiment__tile-name { font-family: var(--calonder-font-heading); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.045em; line-height: 1.15; color: var(--calonder-ink); } .calonder-sortiment__tile-count { font-family: var(--calonder-font-body); font-size: 0.8125rem; color: color-mix(in srgb, var(--calonder-ink) 65%, transparent); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; } /* Chips: eigene Fläche + Farben, unabhängig von Sektionsfarbe */ .calonder-sortiment__buttons { display: flex; flex-wrap: wrap; gap: 1rem; } .calonder-sortiment__button { display: inline-flex; align-items: center; gap: 0.6875rem; padding: 0.875rem calc(0.9375rem + 3px) 0.875rem 0.9375rem; /* +3px rechts = Pfeil-Animationsspielraum */ border-radius: 0.125rem; background: var(--calonder-beige); /* Rahmen adaptiert sich an Sektions-Textfarbe, Chip-Fläche und -Text sind fix */ border: 2px solid color-mix(in srgb, var(--section-text, var(--calonder-gruen)) 35%, transparent); text-decoration: none; transition: background 0.16s ease, box-shadow 0.22s cubic-bezier(0.2, 0.7, 0.3, 1); } .calonder-sortiment__button:hover, .calonder-sortiment__button:focus-visible { background: var(--calonder-paper); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); } .calonder-sortiment__button-label { font-family: var(--calonder-font-heading); font-size: 0.90625rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; color: var(--calonder-gruen); flex: 1 1 auto; } .calonder-sortiment__button-count { font-size: 0.8125rem; line-height: 1.2; color: var(--calonder-gruen); opacity: 0.85; white-space: nowrap; flex: 0 0 auto; font-variant-numeric: tabular-nums; } .calonder-sortiment__button-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--calonder-gruen); opacity: 0.7; transition: transform 0.2s ease, opacity 0.2s ease; } .calonder-sortiment__button:hover .calonder-sortiment__button-arrow, .calonder-sortiment__button:focus-visible .calonder-sortiment__button-arrow { transform: translateX(3px); opacity: 1; } /* Sortiment: Responsive Breakpoints 5 → 4 → 3 → 2 → 1 */ @media (max-width: 1199.98px) { .calonder-sortiment__tiles { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } @media (max-width: 991.98px) { .calonder-sortiment__tiles { grid-template-columns: repeat(3, 1fr); gap: 0.875rem; } .calonder-sortiment__buttons { gap: 1rem; } } @media (max-width: 767.98px) { .calonder-sortiment__tiles { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } } @media (max-width: 575.98px) { .calonder-sortiment__tiles { grid-template-columns: 1fr; gap: 0.75rem; } .calonder-sortiment__buttons { gap: 1rem; } } /* -------------------------------------------------------------------------- 3g. Ratings (Section 9): 5-Karten-Grid — Main-Card + 4 Reviews -------------------------------------------------------------------------- */ .calonder-ratings__cards { display: grid; /* Main-Karte: immer 300–350px, Carousel bekommt den Rest */ grid-template-columns: clamp(300px, 24%, 350px) 1fr; gap: 1.25rem; align-items: stretch; } /* ── Carousel: Chevrons + scrollbarer Viewport ── */ .calonder-ratings__carousel { display: flex; align-items: center; gap: 0.625rem; } .calonder-ratings__carousel-viewport { flex: 1; overflow-x: clip; overflow-y: visible; align-self: stretch; container-type: inline-size; position: relative; } .calonder-ratings__carousel-viewport::before, .calonder-ratings__carousel-viewport::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2rem; z-index: 1; pointer-events: none; } .calonder-ratings__carousel-viewport::before { left: 0; background: linear-gradient(to right, var(--section-bg, var(--calonder-paper)), transparent); } .calonder-ratings__carousel-viewport::after { right: -1px; /* 1px über rechten Rand: overflow-x:clip schneidet ab, sub-pixel-Streifen entfällt */ background: linear-gradient(to left, var(--section-bg, var(--calonder-paper)), transparent); } .calonder-ratings__carousel-track { display: flex; gap: 1.25rem; height: 100%; transition: transform 0.35s ease; } .calonder-ratings__card--review { flex: 0 0 calc((100cqi - 3 * 1.25rem) / 4); min-width: 250px; /* Karten nie unter 250px (clamps flex-basis von unten) */ } .calonder-ratings__nav { flex-shrink: 0; width: 2.75rem; height: 2.75rem; padding: 0; background: var(--calonder-paper); border: 1px solid color-mix(in srgb, var(--calonder-beige-parts) 50%, transparent); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--calonder-gruen); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; } .calonder-ratings__nav:hover:not(:disabled) { background-color: var(--calonder-gruen); color: var(--calonder-paper); } .calonder-ratings__nav:disabled { opacity: 0.25; cursor: default; } .calonder-ratings__nav .material-icons { font-size: 1.6rem; line-height: 1; } .calonder-ratings__card { padding: 1.5rem; border-radius: 0.5rem; border: 1px solid color-mix(in srgb, var(--calonder-beige-parts) 40%, transparent); overflow: hidden; background-color: color-mix(in srgb, var(--calonder-paper) 85%, transparent); display: flex; flex-direction: column; gap: 0.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } /* Main-Karte: Score prominent; position:relative für stretched-link */ .calonder-ratings__card--main { background-color: var(--calonder-paper); border: 2px solid color-mix(in srgb, var(--calonder-gruen) 50%, transparent); position: relative; align-items: center; justify-content: center; text-align: center; gap: 0.25rem; transition: background-color 0.25s ease; min-width: min(300px, 100%); /* doppelte Absicherung: Karte nie unter 300px */ } .calonder-ratings__card--main:hover { background-color: color-mix(in srgb, var(--calonder-gruen) 6%, var(--calonder-paper)); } .calonder-ratings__score { font-family: var(--calonder-font-heading); font-size: 4.5rem; font-weight: 700; line-height: 1; color: var(--calonder-gruen); } .calonder-ratings__stars { display: flex; gap: 0.25rem; align-items: center; line-height: 1; } .calonder-ratings__stars--main { gap: 0.35rem; padding-inline: 0.5rem; /* Mindest-Abstand zum Kartenrand */ } .calonder-ratings__star { display: inline-block; flex-shrink: 0; width: 1.5rem; height: 1.5rem; background: linear-gradient( to right, #f59e0b var(--star-fill, 100%), #909090 var(--star-fill, 100%) ); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .calonder-ratings__stars--main .calonder-ratings__star { width: 2rem; height: 2rem; } .calonder-ratings__source { font-size: 0.9375rem; color: var(--calonder-gruen-deep); padding-top: 0.3rem; } .calonder-ratings__source a { color: var(--calonder-gruen-deep); text-decoration: underline; text-underline-offset: 0.2em; } .calonder-ratings__source a:hover { color: var(--calonder-gruen-hell); } .calonder-ratings__author { font-family: var(--calonder-font-heading); font-weight: 600; font-size: 0.95rem; color: var(--calonder-ink); } .calonder-ratings__text { margin: 0; font-size: 0.875rem; line-height: 1.7; color: var(--calonder-ink); opacity: 0.85; } /* Ratings: Mobile-Stack (Base-CSS oben → korrekte Kaskade) */ @media (max-width: 991.98px) { .calonder-ratings__cards { grid-template-columns: 1fr; gap: 1rem; } /* min-width: 250px gilt bereits in Base-Regel; hier kein Override nötig. */ } @media (max-width: 575.98px) { .calonder-ratings__card { padding: 1.25rem; } } /* -------------------------------------------------------------------------- 3h. SEO-Text (Section 11): max-width 1440px -------------------------------------------------------------------------- */ .calonder-seo-text { max-width: 1440px; margin-inline: auto; } /* Aufklapp-Modus: ca. 250px (≈ 600–800 Zeichen) sichtbar, Rest eingeklappt */ .calonder-seo-text--collapsible .calonder-seo-text__body { overflow: hidden; max-height: 250px; transition: max-height 0.45s ease; } /* Fade-Gradient am unteren Ende des eingeklappten Textes */ .calonder-seo-text__fade { height: 5rem; margin-top: -5rem; position: relative; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--section-bg, var(--calonder-paper, #f8f6f0))); transition: opacity 0.3s ease; } .calonder-seo-text--open .calonder-seo-text__fade { opacity: 0; } /* Toggle-Button: zentriert, dezenter Pill-Style */ .calonder-seo-text__toggle { display: flex; align-items: center; gap: 0.2rem; margin: 0.75rem auto 0; padding: 0.3rem 0.875rem 0.3rem 1rem; background: transparent; border: 1.5px solid currentColor; border-radius: 2rem; cursor: pointer; font-family: var(--calonder-font-body); font-size: 0.8125rem; font-weight: 600; color: inherit; opacity: 0.55; transition: opacity 0.2s ease; letter-spacing: 0.01em; } .calonder-seo-text__toggle:hover, .calonder-seo-text__toggle:focus-visible { opacity: 0.9; } .calonder-seo-text__toggle-icon { font-size: 1.125rem; line-height: 1; transition: transform 0.35s ease; } .calonder-seo-text--open .calonder-seo-text__toggle-icon { transform: rotate(180deg); } /* «Mehr»-Label ausblenden wenn offen */ .calonder-seo-text--open .calonder-seo-text__toggle-label { display: none; } /* -------------------------------------------------------------------------- 3d. Trust-Pillars (Section 10): 3 Spalten mit Icon + Titel + Text -------------------------------------------------------------------------- */ .calonder-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; align-items: start; } .calonder-pillars__item { display: flex; flex-direction: column; gap: 0.75rem; } .calonder-pillars__icon { font-size: 2.5rem; line-height: 1; width: auto; height: auto; color: inherit; } .calonder-pillars__box .calonder-pillars__title { margin: 0; font-family: 'Rubik', sans-serif; font-size: 2.625rem; font-weight: 700; text-transform: uppercase; line-height: 1.1; } .calonder-pillars__text { font-size: 1.0625rem; line-height: 1.6; } .calonder-pillars__text p:last-child, .calonder-pillars__text ul:last-child, .calonder-pillars__text ol:last-child { margin-bottom: 0; } .calonder-pillars__text ul, .calonder-pillars__text ol { padding-left: 0.875rem; } .calonder-pillars__text ul { list-style: disc; } .calonder-pillars__text ol { list-style: decimal; } @media (max-width: 767.98px) { .calonder-pillars { grid-template-columns: 1fr; gap: 2rem; } } /* Variante B: kompakte Liste (mode='list') */ .calonder-pillars--list { display: flex; flex-wrap: wrap; gap: 1rem 2rem; list-style: none; margin: 0.75rem 0 0; padding: 0; } .calonder-pillars__list-item { display: flex; align-items: center; gap: 0.5rem; } .calonder-pillars__list-item .calonder-pillars__icon { font-size: 1.5rem; } .calonder-pillars__list-text { font-family: 'DM Sans', sans-serif; font-size: 1.125rem; font-weight: 600; } /* Variante A: drei farbige Boxen (mode='pillars', default) Jede Box immer min. 460px breit — Cascading via min-width media queries unten */ .calonder-pillars--boxes { display: grid; grid-template-columns: 1fr; /* Mobile-first: 1 Spalte */ gap: 2.5rem; align-items: stretch; } .calonder-pillars__box { display: flex; flex-direction: column; gap: 0.75rem; padding: 3.125rem; border-radius: 1rem; min-width: 0; /* verhindert Grid-Overflow durch langen Inhalt */ } .calonder-pillars__box--gruen { background: var(--calonder-gruen); color: var(--calonder-paper); } .calonder-pillars__box--gruen .calonder-pillars__icon, .calonder-pillars__box--gruen .calonder-pillars__title { color: var(--calonder-beige); } .calonder-pillars__box--beige { background: var(--calonder-beige-parts); color: var(--calonder-ink); } .calonder-pillars__box--beige .calonder-pillars__icon, .calonder-pillars__box--beige .calonder-pillars__title { color: var(--calonder-ink); } .calonder-pillars__box--gruen .calonder-pillars__list-text, .calonder-pillars__box--gruen .calonder-pillars__list-item .calonder-pillars__icon { color: var(--calonder-beige); } .calonder-pillars__box--gruen-deep { background: var(--calonder-gruen-deep); color: var(--calonder-paper); } .calonder-pillars__box--gruen-deep .calonder-pillars__icon, .calonder-pillars__box--gruen-deep .calonder-pillars__title { color: var(--calonder-beige); } .calonder-pillars__box--gruen-deep .calonder-pillars__list-text, .calonder-pillars__box--gruen-deep .calonder-pillars__list-item .calonder-pillars__icon { color: var(--calonder-beige); } /* Optionaler Button — pushes to bottom via margin-top: auto im Flex-Container */ .calonder-pillars__btn { margin-top: auto; align-self: flex-start; } /* Beige-Button (auf grünem Hintergrund) — wiederverwendbar, z.B. Pillars + PDP category-back */ .btn.calonder-btn-spezial-beige { background-color: color-mix(in srgb, var(--calonder-beige) 75%, var(--calonder-beige-parts)); color: var(--calonder-gruen); border-color: color-mix(in srgb, var(--calonder-beige) 75%, var(--calonder-beige-parts)); } .btn.calonder-btn-spezial-beige:hover, .btn.calonder-btn-spezial-beige:focus-visible, .btn.calonder-btn-spezial-beige:active { background-color: var(--calonder-beige); color: var(--calonder-gruen-hell); border-color: var(--calonder-beige); } /* ── Modul-Button-System v1.2.0 ───────────────────────────────────────────── Alle Farben (background, color, border-color, hover, active) kommen vom Modul. Das Modul injiziert