/* * Theme tokens (--ss-*) are injected per-request by `ThemeStyleTag` (see * cms-app/components/ThemeStyleTag.tsx) keyed on ``. * Source of truth: cms-app/lib/theme/themeTokens.ts and the theme objects in * cms-app/lib/theme/themes/*. Do not redeclare them here. */ /* * Inter + Poppins are now self-hosted via `next/font/google` (see * cms-app/app/layout.tsx). The CSS variables `--font-inter` and * `--font-poppins` are available on `` and are referenced below * in `--ss-font` and `--ss-headline-font`. Keeping the `@import` here * would re-trigger a render-blocking request to fonts.googleapis.com. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--ss-font); /* Page-level cascade. The default theme keeps `#ffffff` here so dark * gradients still paint white text; light themes flip this to the * brand text colour without any rule below having to know. */ color: var(--ss-page-body); background: linear-gradient(135deg, var(--ss-page-start) 0%, var(--ss-page-mid) 55%, var(--ss-page-end) 100%); font-size: 16px; font-weight: 400; line-height: 1.6; } img { display: block; max-width: 100%; } a { color: inherit; } button, input, textarea, select { font: inherit; } .ss-page { position: relative; min-height: 100vh; /* clip bricht 100vw-Bleeds subpixel-falsch ab; x verstecken vermeidet Scrollbalken-Naht */ overflow-x: hidden; overflow-y: clip; background: linear-gradient(135deg, var(--ss-page-start) 0%, var(--ss-page-mid) 55%, var(--ss-page-end) 100%); } .ss-container { position: relative; z-index: 2; width: min(calc(100% - 2rem), var(--ss-max-width)); margin: 0 auto; } main > section > .ss-container > * + * { margin-top: 1.75rem; } .ss-site-header { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px); } /* Slim strip above yellow topbar: USPs + Trustpilot (evenly distributed row) */ .ss-promo-topbar { background: var(--ss-promo-bar-bg); color: var(--ss-surface-white); border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px; line-height: 1.3; font-weight: 500; letter-spacing: 0.01em; } .ss-promo-topbar .ss-container { max-width: var(--ss-container-max, 1200px); margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } .ss-promo-topbar__inner { padding-top: 0.4rem; padding-bottom: 0.4rem; } .ss-promo-topbar__row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; width: 100%; min-height: 36px; margin: 0; padding: 0; list-style: none; } .ss-promo-topbar__item { flex: 0 1 auto; display: flex; align-items: center; min-width: 0; color: var(--ss-surface-white); white-space: nowrap; } /* Micro Star needs ~360–400px for text + stars + Trustpilot logo; narrow max-width clipped the logo */ .ss-promo-topbar__item--trustpilot { flex: 0 0 auto; justify-content: flex-end; min-width: min(100%, 360px); max-width: none; } .ss-promo-topbar__item--trustpilot .trustpilot-widget { width: 100%; min-width: 320px; overflow: visible; } /* Progressive disclosure on narrow viewports. * * Rather than introducing a horizontal scrollbar (the previous behaviour), * we drop items one at a time as space tightens. The order — advantages * first (one by one), then Trustpilot, then the email — matches the brand * priority. The phone link is the last item to remain so visitors can * always reach sales from the top of any page. */ @media (max-width: 1099px) { .ss-promo-topbar__item--usp-1 { display: none; } } @media (max-width: 999px) { .ss-promo-topbar__item--usp-2 { display: none; } } @media (max-width: 899px) { .ss-promo-topbar__row { justify-content: flex-start; flex-wrap: nowrap; gap: 0.75rem 1rem; } .ss-promo-topbar__item--usp { display: none; } .ss-promo-topbar__item--trustpilot { min-width: 0; } .ss-promo-topbar__item--trustpilot .trustpilot-widget { min-width: 0; } } @media (max-width: 639px) { .ss-promo-topbar__item--trustpilot { display: none; } } @media (max-width: 479px) { .ss-promo-topbar__contact-link--email { display: none; } } .ss-topbar { background: var(--ss-yellow); border-bottom: 1px solid var(--ss-yellow-hover); color: var(--ss-text-primary); box-shadow: 0 1px 0 rgba(23, 23, 23, 0.08); } .ss-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 88px; /* Allow logo / actions to shrink inside flex so the CTA never clips off-screen */ min-width: 0; } .ss-topbar-inner .ss-brand, .ss-topbar-inner .ss-header-actions { flex-shrink: 0; } .ss-topbar-inner .ss-desktop-nav { flex: 1 1 0%; min-width: 0; /* Never let the desktop nav wrap onto a second line. The Tailwind * `ss-nav` breakpoint (1100px) is responsible for swapping it out for the * burger menu before space gets tight; clipping is preferable to a stray * second row of links. */ flex-wrap: nowrap; justify-content: center; } .ss-brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; font-weight: 700; letter-spacing: -0.02em; } .ss-brand img { height: 52px; width: auto; } .ss-desktop-nav, .ss-mobile-nav { display: flex; align-items: center; gap: 0.5rem; } .ss-desktop-nav a, .ss-mobile-nav a { text-decoration: none; } .ss-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 1rem; border-radius: var(--ss-radius-md); font-size: 14px; font-weight: 700; color: rgba(23, 23, 23, 0.82); transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; } .ss-nav-link:hover, .ss-nav-link.is-active { background: rgba(255, 255, 255, 0.75); color: var(--ss-text-primary); } .ss-header-actions { display: flex; align-items: center; gap: 0.75rem; } .ss-header-actions .ss-btn { white-space: nowrap; } /* Sprachwahl (Header) */ .ss-lang-switch { position: relative; flex-shrink: 0; } .ss-lang-switch__btn { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 42px; padding: 0 0.65rem 0 0.5rem; border-radius: var(--ss-radius-md); border: 1px solid rgba(23, 23, 23, 0.14); background: rgba(255, 255, 255, 0.72); color: var(--ss-text-primary); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background-color 180ms ease, border-color 180ms ease; } .ss-lang-switch__btn:hover { background: rgba(255, 255, 255, 0.92); border-color: rgba(23, 23, 23, 0.2); } .ss-lang-switch__btn[aria-expanded='true'] { background: rgba(255, 255, 255, 0.95); border-color: rgba(23, 23, 23, 0.22); } .ss-lang-switch__globe { display: flex; color: rgba(23, 23, 23, 0.65); } .ss-lang-switch__chev { display: flex; color: rgba(23, 23, 23, 0.5); } .ss-lang-switch__label { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 380px) { .ss-lang-switch__label { max-width: 4.5rem; } } .ss-lang-switch__menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 11rem; margin: 0; padding: 0.35rem; list-style: none; background: var(--ss-surface-white); border-radius: var(--ss-radius-md); border: 1px solid rgba(23, 23, 23, 0.1); box-shadow: 0 12px 32px rgba(23, 23, 23, 0.14); z-index: 60; } .ss-lang-switch__opt { display: block; width: 100%; padding: 0.5rem 0.65rem; border-radius: calc(var(--ss-radius-md) - 2px); font-size: 14px; font-weight: 600; color: var(--ss-text-primary); text-decoration: none; transition: background-color 140ms ease; } .ss-lang-switch__opt:hover { background: rgba(248, 215, 73, 0.35); } .ss-lang-switch__opt.is-active { background: rgba(248, 215, 73, 0.55); font-weight: 700; } /* Region / Sprache Modal */ .ss-modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(17, 24, 39, 0.45); backdrop-filter: blur(4px); } .ss-modal-card { width: 100%; max-width: 26rem; padding: 1.35rem 1.35rem 1.15rem; border-radius: 1rem; background: var(--ss-surface-white); color: var(--ss-text-primary); box-shadow: 0 24px 48px rgba(23, 23, 23, 0.18); border: 1px solid rgba(23, 23, 23, 0.08); } .ss-modal-card__title { margin: 0 0 0.65rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; } .ss-modal-card__text { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.5; color: rgba(23, 23, 23, 0.78); } .ss-modal-card__choices { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .ss-modal-card__choice { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.55rem 0.75rem; border-radius: var(--ss-radius-md); border: 1px solid rgba(23, 23, 23, 0.1); background: rgba(248, 250, 252, 0.9); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; text-align: left; color: var(--ss-text-primary); transition: background-color 140ms ease, border-color 140ms ease; } .ss-modal-card__choice:hover { background: rgba(248, 215, 73, 0.35); border-color: rgba(23, 23, 23, 0.14); } .ss-modal-card__choice.is-current { border-color: rgba(248, 215, 73, 0.85); background: rgba(248, 215, 73, 0.25); } .ss-modal-card__badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(23, 23, 23, 0.55); } .ss-modal-card__actions { display: flex; flex-direction: column; gap: 0.45rem; } .ss-modal-card__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem; border-radius: var(--ss-radius-md); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; border: none; } .ss-modal-card__btn--primary { background: var(--ss-text-primary); color: var(--ss-surface-white); } .ss-modal-card__btn--primary:hover { filter: brightness(1.08); } .ss-modal-card__btn--ghost { background: transparent; color: rgba(23, 23, 23, 0.65); border: 1px solid transparent; } .ss-modal-card__btn--ghost:hover { color: var(--ss-text-primary); background: rgba(23, 23, 23, 0.04); } .ss-mobile-lang { padding: 0.5rem 0 0.25rem; border-bottom: 1px solid rgba(23, 23, 23, 0.08); margin-bottom: 0.35rem; } .ss-nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(23, 23, 23, 0.14); border-radius: var(--ss-radius-md); background: rgba(255, 255, 255, 0.72); color: var(--ss-text-primary); cursor: pointer; } /* Focus-visible: nur bei Tastatur-Fokus sichtbar (Tailwind/A11y Best Practice) */ .ss-btn:focus, .ss-nav-link:focus, .ss-nav-toggle:focus, .ss-toc a:focus, .ss-slider-button:focus, .ss-slider-dot:focus, .ss-trustpilot-arrow:focus { outline: none; } .ss-btn:focus-visible { box-shadow: 0 0 0 3px rgba(248, 215, 73, 0.45); } .ss-nav-link:focus-visible, .ss-toc a:focus-visible { box-shadow: 0 0 0 2px rgba(248, 215, 73, 0.5); } .ss-nav-toggle:focus-visible { box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.3); } .ss-slider-button:focus-visible, .ss-slider-dot:focus-visible { box-shadow: 0 0 0 2px var(--ss-yellow); } .ss-slider--light .ss-slider-button:focus-visible { box-shadow: 0 0 0 2px var(--ss-yellow); } .ss-trustpilot-arrow:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); } .ss-mobile-nav-wrap { display: none; background: rgba(248, 215, 73, 0.94); border-bottom: 1px solid rgba(23, 23, 23, 0.08); } .ss-mobile-nav { display: grid; gap: 0.5rem; padding: 0 0 1rem; } .ss-mobile-nav-wrap.is-open { display: block; } /* Burger-Menü: Untermenüs gleiche dunkle Fläche wie Desktop-Flyout */ .ss-mobile-flyout { display: flex; flex-direction: column; gap: 0.2rem; } .ss-mobile-flyout__split { display: flex; align-items: stretch; flex-wrap: nowrap; border-radius: var(--ss-radius-md); overflow: hidden; } .ss-mobile-flyout__trigger-full { width: 100%; justify-content: space-between; } .ss-mobile-flyout__panel { display: none; margin: 0.1rem 0 0.35rem; padding: 0.85rem 0.9rem 1rem; border-radius: var(--ss-radius-md); background: rgba(23, 23, 23, 0.98); border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); } .ss-mobile-flyout__panel.is-open { display: block; } .ss-mobile-flyout__panel .ss-flyout-panel__label { display: block; margin: 0 0 0.45rem; } .ss-mobile-flyout__panel .ss-flyout-featured { margin-bottom: 0.65rem; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } .ss-mobile-flyout__panel .ss-flyout-links { column-count: 1; } .ss-mobile-flyout__panel .ss-flyout-links a { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--ss-text-soft); text-decoration: none; padding: 0.4rem 0.55rem; border-radius: var(--ss-radius-sm); transition: color 180ms ease, background 180ms ease; } .ss-mobile-flyout__panel .ss-flyout-links a:hover { color: var(--ss-page-heading); background: rgba(255, 255, 255, 0.08); } /* Flyout: zweite Zeile unter der Topbar (dunkel, Menüeinträge) */ .ss-flyout-wrap { position: relative; } /* Hauptseite + Aufklapp-Pfeil (z. B. Kontakt → /de/kontakt und Untermenü) */ .ss-flyout-wrap--split { display: inline-flex; align-items: stretch; flex-wrap: nowrap; border-radius: var(--ss-radius-md); } .ss-flyout-wrap--split .ss-flyout-parent-link { padding-right: 0.25rem; border-top-right-radius: 0; border-bottom-right-radius: 0; } .ss-flyout-wrap--split .ss-flyout-trigger--chevron-only { padding-left: 0.35rem; padding-right: 0.65rem; min-width: 2.25rem; border-top-left-radius: 0; border-bottom-left-radius: 0; } .ss-flyout-trigger { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 1rem; border-radius: var(--ss-radius-md); font-size: 14px; font-weight: 700; color: rgba(23, 23, 23, 0.82); background: none; border: none; cursor: pointer; font-family: inherit; gap: 0.35rem; transition: background-color 180ms ease, color 180ms ease; } .ss-flyout-trigger:hover { background: rgba(255, 255, 255, 0.75); color: var(--ss-text-primary); } .ss-flyout-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.85); color: var(--ss-text-primary); } .ss-flyout-trigger svg { width: 1rem; height: 1rem; transition: transform 200ms ease; } .ss-flyout-trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .ss-topbar { position: relative; } .ss-flyout-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 25; background: rgba(23, 23, 23, 0.98); border-bottom: 1px solid rgba(148, 163, 184, 0.25); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); padding: 1rem 0; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: visibility 180ms ease, opacity 180ms ease, transform 180ms ease; } /* Store-Flyout: größere Fläche */ .ss-flyout-panel--store { padding: 1.5rem 0 2rem; } .ss-flyout-panel.is-open { visibility: visible; opacity: 1; transform: translateY(0); } .ss-flyout-panel > .ss-container { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; } .ss-flyout-panel.ss-flyout-panel--store > .ss-container { max-width: min(calc(100% - 2rem), 1320px); display: grid; gap: 1rem 1.5rem; align-items: start; } .ss-topbar > .ss-flyout-panel { left: 0; right: 0; } .ss-flyout-panel__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ss-text-muted); margin-right: 0.5rem; flex-shrink: 0; } .ss-flyout-panel a { font-size: 0.9375rem; font-weight: 600; color: var(--ss-text-soft); text-decoration: none; padding: 0.4rem 0.6rem; border-radius: var(--ss-radius-sm); transition: color 180ms ease, background 180ms ease; } .ss-flyout-panel a:hover { color: var(--ss-page-heading); background: rgba(255, 255, 255, 0.08); } /* Store Navigation: Flyout mit Featured Categories */ .ss-flyout-panel--store .ss-flyout-featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; width: 100%; } .ss-featured-category { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ss-text-soft); font-size: 0.875rem; font-weight: 600; padding: 0.5rem; border-radius: var(--ss-radius-sm); transition: color 180ms ease, background 180ms ease; } .ss-featured-category:hover { color: var(--ss-page-heading); background: rgba(255, 255, 255, 0.08); } .ss-featured-category__img-wrap { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--ss-radius-sm); overflow: hidden; background: rgba(255, 255, 255, 0.06); } .ss-featured-category__img { width: 100%; height: 100%; object-fit: cover; } .ss-featured-category__placeholder { display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); } .ss-featured-category__label { text-align: center; line-height: 1.2; } /* Links in Spalten (Storefront-Layout) */ .ss-flyout-panel--store .ss-flyout-links { display: block; column-count: 4; column-gap: 2rem; column-fill: balance; } .ss-flyout-panel--store .ss-flyout-links a { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--ss-text-soft); text-decoration: none; padding: 0.35rem 0; border-radius: var(--ss-radius-sm); transition: color 180ms ease, background 180ms ease; break-inside: avoid; } .ss-flyout-panel--store .ss-flyout-links a:hover { color: var(--ss-page-heading); background: transparent; } .ss-flyout-panel--store .ss-flyout-panel__label { grid-column: 1 / -1; } .ss-flyout-panel--store .ss-flyout-featured { grid-column: 1 / -1; } .ss-flyout-panel--store .ss-flyout-links { grid-column: 1 / -1; } @media (max-width: 900px) { .ss-flyout-panel--store .ss-flyout-links { column-count: 3; } } @media (max-width: 600px) { .ss-flyout-panel--store .ss-flyout-links { column-count: 2; } } .ss-hero { position: relative; /* Defaults consume the same `--ss-raw-inner-section-pt/-pb` that the RawHtml * panel sets on the theme wrapper (cms-app/lib/rawHtmlInnerSectionPadding.ts). * Falls back to the historical hero spacing so legacy pages stay unchanged. */ padding-top: var(--ss-raw-inner-section-pt, calc(6rem - 70px)); padding-bottom: var(--ss-raw-inner-section-pb, 4rem); } .ss-hero-grid { display: grid; /* Text column gets the larger share so the headline + checklist fit in fewer * lines (more content above the fold). Image column still has a sane min so * the hero photo never collapses. */ grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); gap: 3rem; align-items: center; } /* Text links, Bild rechts (DOM: Copy, dann Media). Bild links: Spalten tauschen + Reihenfolge */ .ss-hero-grid--reverse { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.45fr); } .ss-hero-grid--reverse > :nth-child(1) { order: 2; } .ss-hero-grid--reverse > :nth-child(2) { order: 1; } .ss-hero-copy { display: grid; gap: 1.5rem; } .ss-hero-copy .ss-actions { justify-content: flex-start; } .ss-hero-copy .ss-hero__tagline:empty { display: none; } .ss-hero-copy .ss-hero__checklist:not(:has(> li)) { display: none; } /* Raw-Html-Landing-Hero (ss-hero / Vorlage): Typo in der Copy-Spalte (Preview → Source) */ .ss-hero-copy .ss-home-title.ss-home-title--compact { font-size: 40px; line-height: 1.05; max-width: none; } .ss-hero-copy .ss-lead { font-size: 20px; line-height: 1.45; } .ss-hero-copy .ss-home-copy.ss-hero__tagline { font-size: 18px; line-height: 1.5; } .ss-hero-copy .ss-hero__checklist.ss-checklist--compact li { font-size: 20px; line-height: 1.35; } @media (max-width: 767px) { .ss-hero-copy .ss-home-title.ss-home-title--compact { font-size: clamp(2.25rem, 9vw, 2.5rem); } .ss-hero-copy .ss-lead { font-size: clamp(1.125rem, 4.5vw, 20px); } } .ss-badge { display: inline-flex; width: fit-content; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--ss-radius-md); color: var(--ss-badge-text); background: var(--ss-badge-bg); border: 1px solid var(--ss-badge-border); backdrop-filter: blur(14px); white-space: nowrap; } .ss-badge svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; } .ss-display { margin: 0; font-size: 3rem; line-height: 1; font-weight: 700; letter-spacing: 0; text-wrap: balance; } .ss-home-title { margin: 0; font-size: 3rem; line-height: 1; font-weight: 700; color: var(--ss-page-heading); } .ss-home-title--compact { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.05; max-width: 18ch; } .ss-home-section-title { margin: 0 0 1.25rem; /* ~20px Luft bis zum Folgetext / zur nächsten Sektion */ font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--ss-page-heading); } .ss-home-copy { margin: 0; font-size: 1rem; line-height: 1.5rem; color: var(--ss-page-body-muted); } .ss-home-copy--large { font-size: 1.125rem; line-height: 1.625rem; } .ss-text-gradient { background: linear-gradient(90deg, var(--ss-headline-gradient-from) 0%, var(--ss-headline-gradient-to) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .ss-lead { max-width: 44rem; margin: 0; font-size: 1.25rem; line-height: 1.75rem; color: var(--ss-page-body-soft); } .ss-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* Größen-Seite: Info-Grid, Wizard, Tabs, Karten */ .ss-sizes-page { display: grid; gap: 2.5rem; } .ss-sizes-page .ss-content-intro { display: grid; gap: 0.75rem; } .ss-sizes-page .ss-content-section__title { margin: 0; font-size: clamp(1.5rem, 2.3vw, 1.875rem); font-weight: 700; color: var(--ss-text-inverse); } .ss-sizes-page .ss-content-intro p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ss-text-soft); } .ss-spec-grid--compact { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: 1.75rem 1.5rem; gap: 1.5rem; } .ss-size-finder { padding: 2rem 1.75rem; border-radius: var(--ss-radius-2xl); border: 1px solid var(--ss-glass-border); background: radial-gradient(circle at top left, rgba(91, 165, 74, 0.18), rgba(15, 23, 42, 0.7)); box-shadow: var(--ss-shadow-dark); } .ss-size-finder h2 { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 700; color: var(--ss-text-inverse); } .ss-size-finder > p { margin: 0; font-size: 0.9rem; color: var(--ss-text-soft); } .ss-size-finder-step { margin-top: 1.75rem; display: grid; gap: 1.25rem; } .ss-size-finder-step h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--ss-text-inverse); } .ss-size-finder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; } .ss-size-finder-card { display: grid; align-content: flex-start; gap: 0.35rem; padding: 1.1rem 1.1rem; border-radius: var(--ss-radius-xl); border: 1px solid var(--ss-glass-border); background: rgba(15, 23, 42, 0.75); color: var(--ss-text-soft); text-align: left; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease; } .ss-size-finder-card h4 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ss-text-inverse); } .ss-size-finder-card p { margin: 0; font-size: 0.85rem; line-height: 1.5; } .ss-size-finder-card:hover { border-color: rgba(248, 215, 73, 0.6); background: linear-gradient(135deg, rgba(91, 165, 74, 0.2), rgba(15, 23, 42, 0.85)); transform: translateY(-1px); box-shadow: 0 20px 60px rgba(2, 6, 23, 0.4); } .ss-size-finder-result { padding: 1.5rem 1.25rem; border-radius: var(--ss-radius-2xl); border: 1px solid rgba(91, 165, 74, 0.45); background: linear-gradient(135deg, rgba(91, 165, 74, 0.16), rgba(15, 23, 42, 0.9)); } .ss-size-finder-result h3 { margin: 0 0 0.75rem; font-size: 1.35rem; font-weight: 700; } .ss-size-finder-reason { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--ss-text-soft); } .ss-size-finder-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; } .ss-size-card--inline { padding: 0.9rem 0.8rem; border-radius: var(--ss-radius-lg); border: 1px solid rgba(91, 165, 74, 0.6); background: rgba(22, 163, 74, 0.18); text-align: center; } .ss-size-card--inline strong { display: block; font-size: 1.2rem; color: var(--ss-accent-green); } .ss-size-card--inline span { display: block; margin-top: 0.1rem; font-size: 0.75rem; color: var(--ss-text-soft); } .ss-size-finder-details { margin: 0 0 0.5rem; padding-left: 1.1rem; font-size: 0.88rem; color: var(--ss-text-soft); } .ss-size-finder-details li + li { margin-top: 0.25rem; } .ss-size-tables { display: grid; gap: 1.25rem; } .ss-size-tables > h2 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.6rem); } .ss-size-tables > p { margin: 0; font-size: 0.9rem; color: var(--ss-text-soft); } .ss-size-tabs { display: inline-flex; padding: 0.25rem; border-radius: 999px; background: rgba(15, 23, 42, 0.88); border: 1px solid rgba(148, 163, 184, 0.35); } .ss-size-tab { border: 0; background: transparent; color: var(--ss-text-soft); padding: 0.45rem 1.1rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 150ms ease, color 150ms ease; } .ss-size-tab.is-active { background: rgba(91, 165, 74, 0.18); color: var(--ss-text-inverse); } .ss-size-tab-panel { margin-top: 1.5rem; } .ss-size-grid--cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; } .ss-size-card { padding: 1.4rem 1.2rem; border-radius: var(--ss-radius-2xl); border: 1px solid var(--ss-glass-border); background: var(--ss-elevated-bg); box-shadow: var(--ss-elevated-shadow); } .ss-size-card h3 { margin: 0 0 0.1rem; font-size: 1.2rem; font-weight: 700; } .ss-size-label { display: inline-flex; margin-bottom: 0.5rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ss-text-muted); } .ss-size-card hr { border: 0; border-top: 1px solid rgba(148, 163, 184, 0.35); margin: 0.4rem 0 0.7rem; } .ss-size-card p { margin: 0.1rem 0; font-size: 0.85rem; color: var(--ss-text-soft); } .ss-size-card-badge { margin-top: 0.6rem; display: inline-flex; align-items: center; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid rgba(91, 165, 74, 0.5); background: rgba(22, 163, 74, 0.16); font-size: 0.78rem; font-weight: 600; color: var(--ss-accent-green); } .ss-size-note { margin-top: 0.4rem; font-size: 0.8rem; font-style: italic; color: var(--ss-text-soft); } .ss-highlight { margin-top: 1rem; } .ss-highlight .ss-checklist { margin-top: 0.75rem; } .ss-highlight .ss-checklist li { font-size: 0.88rem; color: var(--ss-text-soft); } /* ============================================ GRÖSSEN-SEITE (Figma Export, CMS-ready) Alle Selektoren gescoped unter #ss-sizes-page-root ============================================ */ #ss-sizes-page-root { color: var(--ss-text-soft); } #ss-sizes-page-root * { box-sizing: border-box; } /* Scoped typography reset (avoids prose defaults & browser margins) */ #ss-sizes-page-root h1, #ss-sizes-page-root h2, #ss-sizes-page-root h3, #ss-sizes-page-root h4, #ss-sizes-page-root p, #ss-sizes-page-root ul, #ss-sizes-page-root li, #ss-sizes-page-root figure { margin: 0; } #ss-sizes-page-root ul { padding: 0; } #ss-sizes-page-root button { font: inherit; color: inherit; } #ss-sizes-page-root .ss-sizes-header { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(148, 163, 184, 0.15); } #ss-sizes-page-root .ss-sizes-header h1 { margin-bottom: 1.5rem; font-size: clamp(1.875rem, 3vw, 2.25rem); line-height: 1.2; color: var(--ss-page-heading); } #ss-sizes-page-root .ss-sizes-header p { margin: 0; line-height: 1.75; color: var(--ss-text-soft); } #ss-sizes-page-root .ss-sizes-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; padding: 1.5rem; border-radius: var(--ss-radius-lg); background: var(--ss-glass); border: 1px solid var(--ss-glass-border); } #ss-sizes-page-root .ss-sizes-info-item { display: flex; align-items: flex-start; gap: 1rem; } #ss-sizes-page-root .ss-sizes-info-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--ss-radius-md); background: rgba(91, 165, 74, 0.12); border: 1px solid rgba(91, 165, 74, 0.25); color: var(--ss-accent-green); } #ss-sizes-page-root .ss-sizes-info-icon svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ss-sizes-page-root .ss-sizes-info-content h4 { margin: 0 0 0.25rem; font-size: 0.9375rem; color: var(--ss-page-heading); } #ss-sizes-page-root .ss-sizes-info-content p { margin: 0; font-size: 0.8125rem; color: var(--ss-text-soft); } #ss-sizes-page-root .ss-sizes-finder { position: relative; padding: 2.5rem; border-radius: var(--ss-radius-2xl); background: var(--ss-glass); border: 1px solid var(--ss-glass-border); backdrop-filter: blur(24px); margin: 2rem 0; } @media (max-width: 768px) { #ss-sizes-page-root .ss-sizes-finder { padding: 1.5rem; } } #ss-sizes-page-root .ss-sizes-finder-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } #ss-sizes-page-root .ss-sizes-finder-icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(91, 165, 74, 0.15); border: 1px solid rgba(91, 165, 74, 0.3); color: var(--ss-accent-green); } #ss-sizes-page-root .ss-sizes-finder-icon svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ss-sizes-page-root .ss-sizes-finder-title h2 { margin: 0; font-size: 1.5rem; color: var(--ss-page-heading); } #ss-sizes-page-root .ss-sizes-finder-title p { margin: 0; font-size: 0.875rem; color: var(--ss-text-soft); } #ss-sizes-page-root .ss-sizes-finder-step { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); } #ss-sizes-page-root .ss-sizes-finder-step.active { opacity: 1; max-height: 2000px; } #ss-sizes-page-root .ss-sizes-finder-step h3 { margin: 0 0 1rem; font-size: 1.125rem; color: var(--ss-page-heading); } #ss-sizes-page-root .ss-sizes-finder-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; } #ss-sizes-page-root .ss-sizes-finder-option { position: relative; padding: 1.5rem; border-radius: var(--ss-radius-lg); border: 2px solid var(--ss-glass-border); background: var(--ss-glass); cursor: pointer; transition: all 0.3s ease; text-align: center; } #ss-sizes-page-root .ss-sizes-finder-option:hover { border-color: rgba(248, 215, 73, 0.5); transform: translateY(-2px); } #ss-sizes-page-root .ss-sizes-finder-option.selected { border-color: rgba(91, 165, 74, 0.8); background: linear-gradient(135deg, rgba(91, 165, 74, 0.15) 0%, var(--ss-glass) 100%); } #ss-sizes-page-root .ss-sizes-option-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(148, 163, 184, 0.2); color: var(--ss-text-soft); } #ss-sizes-page-root .ss-sizes-option-icon svg { width: 1.75rem; height: 1.75rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ss-sizes-page-root .ss-sizes-finder-option h4 { margin: 0 0 0.5rem; font-size: 1.125rem; color: var(--ss-page-heading); } #ss-sizes-page-root .ss-sizes-finder-option p { margin: 0; font-size: 0.875rem; color: var(--ss-text-soft); } #ss-sizes-page-root .ss-sizes-finder-nav { display: flex; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--ss-glass-border); } #ss-sizes-page-root .ss-sizes-btn-back { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--ss-glass-border); border-radius: var(--ss-radius-md); background: transparent; color: var(--ss-page-heading); font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: background 0.2s; } #ss-sizes-page-root .ss-sizes-btn-back:hover { background: rgba(255, 255, 255, 0.05); } #ss-sizes-page-root .ss-sizes-btn-back svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ss-sizes-page-root .ss-sizes-finder-result { padding: 2rem; margin-top: 2rem; border-radius: var(--ss-radius-lg); background: linear-gradient(135deg, rgba(91, 165, 74, 0.15) 0%, var(--ss-glass) 100%); border: 1px solid rgba(91, 165, 74, 0.4); } #ss-sizes-page-root .ss-sizes-result-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } #ss-sizes-page-root .ss-sizes-result-header h3 { margin: 0; font-size: 1.5rem; color: var(--ss-page-heading); } #ss-sizes-page-root .ss-sizes-result-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(91, 165, 74, 0.25); color: var(--ss-accent-green); } #ss-sizes-page-root .ss-sizes-result-icon svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ss-sizes-page-root .ss-sizes-result-reason { margin-bottom: 1rem; font-size: 1rem; color: var(--ss-text-soft); } #ss-sizes-page-root .ss-sizes-result-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; } #ss-sizes-page-root .ss-sizes-recommended-size { padding: 1.25rem; border-radius: var(--ss-radius-md); background: rgba(91, 165, 74, 0.08); border: 1px solid rgba(91, 165, 74, 0.25); text-align: center; } #ss-sizes-page-root .ss-sizes-size-number { display: block; margin-bottom: 0.5rem; font-size: 1.75rem; font-weight: 700; color: var(--ss-accent-green); } #ss-sizes-page-root .ss-sizes-size-label { display: block; font-size: 0.875rem; color: var(--ss-text-soft); } #ss-sizes-page-root .ss-sizes-result-details { display: grid; gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } #ss-sizes-page-root .ss-sizes-result-details li { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--ss-text-soft); line-height: 1.6; } #ss-sizes-page-root .ss-sizes-result-details li::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.125rem; border-radius: 50%; background: rgba(34, 197, 94, 0.2); color: var(--ss-accent-green); font-weight: 700; font-size: 0.875rem; } #ss-sizes-page-root .ss-sizes-tables { margin-top: 3rem; } #ss-sizes-page-root .ss-sizes-tables h2 { margin-bottom: 0.5rem; font-size: clamp(1.5rem, 2.5vw, 1.875rem); color: var(--ss-page-heading); } #ss-sizes-page-root .ss-sizes-tables > p { margin-bottom: 1.5rem; color: var(--ss-text-soft); } #ss-sizes-page-root .ss-sizes-tabs { display: flex; gap: 0.5rem; margin-bottom: 2rem; padding: 0.5rem; border-radius: var(--ss-radius-lg); background: var(--ss-glass); border: 1px solid var(--ss-glass-border); } #ss-sizes-page-root .ss-sizes-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-radius: var(--ss-radius-md); border: 1px solid transparent; background: transparent; font-size: 0.9375rem; font-weight: 600; color: var(--ss-text-soft); cursor: pointer; transition: all 0.3s ease; } #ss-sizes-page-root .ss-sizes-tab svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ss-sizes-page-root .ss-sizes-tab:hover { color: var(--ss-page-heading); background: rgba(255, 255, 255, 0.05); } #ss-sizes-page-root .ss-sizes-tab.active { background: rgba(91, 165, 74, 0.12); color: var(--ss-page-heading); border: 1px solid rgba(91, 165, 74, 0.3); } #ss-sizes-page-root .ss-sizes-tab-panel { display: none; } #ss-sizes-page-root .ss-sizes-tab-panel.active { display: block; animation: ss-sizes-fade-in 0.4s ease; } @keyframes ss-sizes-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #ss-sizes-page-root .ss-sizes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0; } @media (min-width: 768px) { #ss-sizes-page-root .ss-sizes-grid { grid-template-columns: repeat(3, 1fr); } } #ss-sizes-page-root .ss-sizes-card { position: relative; padding: 1.75rem; border-radius: var(--ss-radius-2xl); border: 1px solid var(--ss-glass-border); background: var(--ss-glass); backdrop-filter: blur(24px); cursor: pointer; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #ss-sizes-page-root .ss-sizes-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--ss-yellow) 0%, var(--ss-green) 100%); opacity: 0; transition: opacity 0.3s ease; } #ss-sizes-page-root .ss-sizes-card:hover::before, #ss-sizes-page-root .ss-sizes-card.active::before { opacity: 1; } #ss-sizes-page-root .ss-sizes-card:hover { border-color: rgba(248, 215, 73, 0.4); box-shadow: var(--ss-shadow-dark), 0 0 20px rgba(248, 215, 73, 0.15); transform: translateY(-2px); } #ss-sizes-page-root .ss-sizes-card.active { border-color: rgba(91, 165, 74, 0.6); background: linear-gradient(135deg, rgba(91, 165, 74, 0.08) 0%, var(--ss-glass) 100%); } #ss-sizes-page-root .ss-sizes-card-number { display: inline-block; margin-bottom: 0.75rem; padding: 0.5rem 1rem; border-radius: var(--ss-radius-md); background: rgba(255, 255, 255, 0.03); border: 2px solid rgba(148, 163, 184, 0.3); font-size: 1.5rem; font-weight: 700; color: var(--ss-page-heading); } #ss-sizes-page-root .ss-sizes-card h3 { margin: 0 0 0.5rem; font-size: 1.125rem; color: var(--ss-page-heading); } #ss-sizes-page-root .ss-sizes-card-details { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ss-glass-border); } #ss-sizes-page-root .ss-sizes-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; font-size: 0.875rem; color: var(--ss-text-soft); } #ss-sizes-page-root .ss-sizes-detail-row strong { color: var(--ss-page-heading); } #ss-sizes-page-root .ss-sizes-card-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; margin-top: 1rem; border-radius: var(--ss-radius-md); background: rgba(91, 165, 74, 0.15); border: 1px solid rgba(91, 165, 74, 0.3); font-size: 0.8125rem; font-weight: 600; color: var(--ss-accent-green); } #ss-sizes-page-root .ss-sizes-card-badge svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ss-sizes-page-root .ss-sizes-card-note { margin-top: 1rem; font-size: 0.875rem; color: var(--ss-text-soft); font-style: italic; } #ss-sizes-page-root .ss-sizes-note-box { padding: 1.75rem; margin-bottom: 1.5rem; border-radius: var(--ss-radius-2xl); background: var(--ss-glass); border: 1px solid var(--ss-glass-border); } #ss-sizes-page-root .ss-sizes-note-box p { margin: 0; color: var(--ss-text-soft); } #ss-sizes-page-root .ss-sizes-note-box strong { color: var(--ss-page-heading); } #ss-sizes-page-root .ss-sizes-highlight { padding: 2rem; border-radius: var(--ss-radius-lg); background: rgba(91, 165, 74, 0.08); border: 1px solid rgba(91, 165, 74, 0.25); margin: 3rem 0; } #ss-sizes-page-root .ss-sizes-highlight h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; color: var(--ss-page-heading); } #ss-sizes-page-root .ss-sizes-highlight h3 svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ss-sizes-page-root .ss-sizes-highlight strong { color: var(--ss-accent-green); } #ss-sizes-page-root .ss-sizes-section-title { margin-top: 3rem; font-size: 1.25rem; color: var(--ss-page-heading); } #ss-sizes-page-root .ss-checklist { display: grid; gap: 0.75rem; margin: 1rem 0; padding: 0; list-style: none; } #ss-sizes-page-root .ss-checklist li { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--ss-text-soft); line-height: 1.6; } #ss-sizes-page-root .ss-checklist li::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.125rem; border-radius: 50%; background: rgba(34, 197, 94, 0.2); color: var(--ss-accent-green); font-weight: 700; font-size: 0.875rem; } #ss-sizes-page-root .ss-cta-box { margin-top: 2.5rem; padding: 1.75rem; border-radius: var(--ss-radius-lg); background: rgba(248, 215, 73, 0.08); border: 1px solid rgba(248, 215, 73, 0.35); } #ss-sizes-page-root .ss-cta-box p { margin: 0 0 1rem; } #ss-sizes-page-root .ss-cta-box strong { color: var(--ss-accent-strong); } #ss-sizes-page-root .ss-btn-group { display: flex; flex-wrap: wrap; gap: 1rem; } @media (max-width: 640px) { #ss-sizes-page-root .ss-btn-group { flex-direction: column; } #ss-sizes-page-root .ss-btn-group .ss-btn { width: 100%; } } #ss-sizes-page-root .ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 52px; padding: 0 1.25rem; border: none; border-radius: var(--ss-radius-md); font-weight: 700; text-decoration: none; transition: all 0.18s; cursor: pointer; } #ss-sizes-page-root .ss-btn--primary { background: var(--ss-green); color: var(--ss-text-inverse); box-shadow: var(--ss-shadow-green); } #ss-sizes-page-root .ss-btn--primary:hover { background: var(--ss-green-hover); transform: translateY(-1px); } #ss-sizes-page-root .ss-btn--secondary { background: linear-gradient(90deg, var(--ss-yellow) 0%, #fde047 100%); color: var(--ss-text-primary); box-shadow: var(--ss-shadow-yellow); } #ss-sizes-page-root .ss-btn--secondary:hover { background: linear-gradient(90deg, var(--ss-yellow-hover) 0%, #facc15 100%); transform: translateY(-1px); } .ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 52px; padding: 0 1.25rem; border: 1px solid transparent; border-radius: var(--ss-radius-md); text-decoration: none; font-weight: 700; transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease; } .ss-btn:hover { transform: translateY(-1px); } .ss-btn--primary { background: linear-gradient(90deg, var(--ss-yellow) 0%, #fde047 100%); color: var(--ss-text-primary); box-shadow: var(--ss-shadow-yellow); } .ss-btn--primary:hover { background: linear-gradient(90deg, var(--ss-yellow-hover) 0%, #facc15 100%); } .ss-btn--secondary { background: rgba(30, 41, 59, 0.5); color: var(--ss-text-inverse); border-color: rgba(148, 163, 184, 0.22); backdrop-filter: blur(16px); } .ss-btn--secondary:hover { background: rgba(30, 41, 59, 0.75); } .ss-btn--green { background: var(--ss-green); color: var(--ss-text-inverse); box-shadow: var(--ss-shadow-green); } .ss-btn--green:hover { background: var(--ss-green-hover); } .ss-btn--blue { background: var(--ss-blue); color: var(--ss-text-inverse); box-shadow: 0 18px 44px rgba(37, 99, 235, 0.25); } .ss-btn--blue:hover { background: var(--ss-blue-hover); } /* ----------------------------------------------------------------------- * * Light-theme overrides — `.ss-btn--secondary` is a "ghost" button whose * default styling assumes a dark page background (translucent dark slate * surface, near-white label). On the 2026 (light) theme that surface has * to invert: a near-white pill with brand-navy label so the button still * reads as a recessive secondary action and not a dark blob. We scope the * override on `[data-theme=...]` (page-level light theme) and on * `.ss-content-light` (per-section light band on a dark page) so both * placements get the correct treatment. * ----------------------------------------------------------------------- */ [data-theme='schlauesocke-2026'] .ss-btn--secondary, .ss-content-light .ss-btn--secondary { background: rgba(248, 250, 252, 0.95); color: var(--ss-page-heading); border-color: rgba(15, 23, 42, 0.15); } [data-theme='schlauesocke-2026'] .ss-btn--secondary:hover, .ss-content-light .ss-btn--secondary:hover { background: rgba(241, 245, 249, 1); } /* ----------------------------------------------------------------------- * * Form status pills — replace per-component `border-red-400/30 bg-red-500/10` * etc. with a single themable surface. Default (dark) uses translucent * tints; light-theme override paints a high-contrast off-white card with * coloured border + text so success/error reads on white pages too. * ----------------------------------------------------------------------- */ .ss-form-status { border-radius: var(--ss-radius-md); } .ss-form-status--error { background: rgba(239, 68, 68, 0.1); border-color: rgba(248, 113, 113, 0.3); color: rgb(252 165 165); } .ss-form-status--success { background: rgba(16, 185, 129, 0.1); border-color: rgba(52, 211, 153, 0.3); color: rgb(110 231 183); } [data-theme='schlauesocke-2026'] .ss-form-status--error { background: rgba(254, 226, 226, 1); border-color: rgba(220, 38, 38, 0.5); color: rgb(153 27 27); } [data-theme='schlauesocke-2026'] .ss-form-status--success { background: rgba(220, 252, 231, 1); border-color: rgba(22, 163, 74, 0.5); color: rgb(22 101 52); } .ss-glass-card { position: relative; overflow: hidden; border: 1px solid var(--ss-glass-border); border-radius: var(--ss-radius-2xl); background: var(--ss-glass); backdrop-filter: blur(24px); box-shadow: var(--ss-shadow-dark); } .ss-light-section { position: relative; border-top: 1px solid var(--ss-band-light-border); border-bottom: 1px solid var(--ss-band-light-border); background: var(--ss-band-light-bg); /* Body setzt color: white (Dark-Page-Default). Ohne diesen Fallback erbt jeglicher * Inhalt im hellen Band weiß und wird unsichtbar, wenn er nicht zufällig einer * der weiter unten überschriebenen Klassen (.ss-prose-section p, .ss-card-copy …) entspricht. */ color: var(--ss-text-primary); } .ss-theme-dark { position: relative; /* When a section is explicitly marked as a dark band (e.g. hero on a * light-themed page), every theme-aware token inside the wrapper has to * resolve to its inverse counterpart so prose, checklists, cards and * accents read correctly on the dark backdrop. We rebind the page-* and * surface tokens locally so utilities like `text-ss-page-heading`, * `bg-ss-glass`, `border-ss-glass-border` etc. behave as if the page * itself were on the dark `schlauesocke` palette. */ --ss-page-body: var(--ss-text-inverse); --ss-page-heading: var(--ss-text-inverse); --ss-page-body-soft: var(--ss-text-inverse-soft); --ss-page-body-muted: var(--ss-text-inverse-muted); --ss-page-body-prose: var(--ss-text-inverse-prose); --ss-glass: rgba(255, 255, 255, 0.05); --ss-glass-strong: rgba(255, 255, 255, 0.1); --ss-glass-border: rgba(255, 255, 255, 0.18); } .ss-theme-light { position: relative; border-top: 1px solid var(--ss-band-light-border); border-bottom: 1px solid var(--ss-band-light-border); background: var(--ss-band-light-bg); color: var(--ss-text-primary); } /* * Viewport-Breakout nur für explizit markierte Bänder (contentBand / data-section-key). * Nicht den gesamten .ss-content-shell auf 100vw setzen — sonst werden alle Blöcke (Trustpilot, Grids …) breit. * calc(50% - 50vw): 50% bezieht sich auf die Breite des normal begrenzten Inhaltsbereichs (Container-Spur). */ .ss-page .ss-content-band.ss-content-band--full-bleed-white { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; background: var(--ss-surface-white); /* War rgba(15,23,42,0.06) — kaum sichtbarer Trennstrich. Brand-Border #ededed. */ border-top: 1px solid var(--ss-band-light-border); border-bottom: 1px solid var(--ss-band-light-border); /* Body-Default ist weiß; im White-Band wieder auf brand-primary setzen. */ color: var(--ss-text-primary); } .ss-page .ss-content-band--full-bleed-white > .ss-content-band__segment { /* Solid white: transparent lässt den Seitenverlauf durch und „Glass“ + backdrop-filter wirkt grau. */ background: var(--ss-surface-white); border-top-color: transparent; border-bottom-color: transparent; } .ss-page .ss-content-band--full-bleed-white .ss-content-band__inset { background: var(--ss-surface-white); } /* imageSlider mit Galerie-Panel: weißes Band über volle Viewport-Breite, Inhalt wie üblich in .ss-container */ .ss-page .ss-slider-fullbleed-white { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; background: var(--ss-surface-white); border-top: 1px solid var(--ss-band-light-border); border-bottom: 1px solid var(--ss-band-light-border); color: var(--ss-text-primary); } /* * Weißes Vollbreiten-Band (contentBand): Segment kann noch ss-theme-dark sein — Markdown/Glass * im Inset trotzdem dunkle Schrift auf hellem Kartengrund (ohne Band-Theme zu wechseln). * backdrop-filter entfernen: sonst bleicht der dunkle Seitenhintergrund durch die Scheibe. */ .ss-page .ss-content-band--full-bleed-white .ss-content-band__inset .ss-glass-card { border-color: rgba(15, 23, 42, 0.1); background: var(--ss-surface-white); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); } .ss-page .ss-content-band--full-bleed-white .ss-content-band__inset .ss-glass-card.ss-prose-section { color: var(--ss-text-secondary); } /* Slider / Trustpilot u. a.: helle Karte ohne ss-glass-card — ebenfalls kein Dark-Band-Backdrop. */ .ss-page .ss-content-band--full-bleed-white .ss-content-band__inset .ss-light-card { background: var(--ss-surface-white); border-color: rgba(15, 23, 42, 0.1); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); } .ss-page .ss-content-band--full-bleed-white .ss-content-band__inset .ss-prose-section h2, .ss-page .ss-content-band--full-bleed-white .ss-content-band__inset .ss-prose-section h3 { color: var(--ss-text-primary); } .ss-page .ss-content-band--full-bleed-white .ss-content-band__inset .ss-prose-section p, .ss-page .ss-content-band--full-bleed-white .ss-content-band__inset .ss-prose-section li { color: var(--ss-text-secondary); } .ss-page .ss-content-band--full-bleed-white .ss-content-band__inset .ss-prose-section a { /* War amber-700 (#b45309 ≈ 4.85:1 auf #fff — gerade so AA, off-brand). * Brand-Dark-Blue (#1f2340 ≈ 16.5:1) trifft Schlauesocke-Farbschema und ist * deutlich besser lesbar; Unterstreichung in Brand-Yellow als Akzent. */ color: var(--ss-dark-blue); text-decoration-color: var(--ss-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; } .ss-page .ss-content-band--full-bleed-white .ss-content-band__inset .ss-prose-section a:hover { color: var(--ss-dark-blue); text-decoration-color: var(--ss-yellow-hover); background-color: rgba(248, 215, 73, 0.18); } /* Toolkit-HTML: innere Sektionen nicht nochmal einfärben */ .ss-page .ss-content-band--full-bleed-white .ss-section.ss-light-section, .ss-page .ss-content-band--full-bleed-white .ss-section.ss-theme-light { background: transparent; border-top-color: transparent; border-bottom-color: transparent; } /* Legacy: reines HTML mit data-section-key (ohne Element-editor contentBand) */ .ss-theme-light:has(.ss-section[data-section-key='slider']), .ss-theme-light:has(.ss-section[data-section-key='sock_lengths']), .ss-theme-light:has(.ss-section[data-section-key='verpackung']) { background: transparent; border-top-color: transparent; border-bottom-color: transparent; } /* Legacy rawHtml: wie contentBand, nur per data-section-key */ .ss-page .ss-section[data-section-key='slider'], .ss-page .ss-section[data-section-key='sock_lengths'], .ss-page .ss-section[data-section-key='verpackung'] { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; background: var(--ss-surface-white); border-top-color: rgba(15, 23, 42, 0.06); border-bottom-color: rgba(15, 23, 42, 0.06); } /* Zwei Legacy-Bands direkt hintereinander: space-y-6-Lücke schließen, Doppel-Rand vermeiden */ .ss-blocks-stack > .ss-theme-light:has(.ss-section[data-section-key='sock_lengths']) + .ss-theme-light:has(.ss-section[data-section-key='verpackung']) { margin-top: -1.5rem; } .ss-blocks-stack > .ss-theme-light:has(.ss-section[data-section-key='sock_lengths']) + .ss-theme-light:has(.ss-section[data-section-key='verpackung']) .ss-section[data-section-key='verpackung'] { border-top: none; } .ss-theme-mixed { position: relative; border-top: 1px solid var(--ss-band-light-border); border-bottom: 1px solid var(--ss-band-light-border); background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.95) 100%), linear-gradient(135deg, rgba(248, 215, 73, 0.06) 0%, rgba(91, 165, 74, 0.04) 100%); color: var(--ss-text-primary); } .ss-light-section .ss-home-section-title, .ss-light-section .ss-section-title, .ss-light-section .ss-card-title, .ss-light-section .ss-home-title, .ss-light-section .ss-prose-section h2, .ss-light-section .ss-prose-section h3, .ss-theme-light .ss-home-section-title, .ss-theme-light .ss-section-title, .ss-theme-light .ss-card-title, .ss-theme-light .ss-home-title, .ss-theme-light .ss-prose-section h2, .ss-theme-light .ss-prose-section h3, .ss-theme-mixed .ss-home-section-title, .ss-theme-mixed .ss-section-title, .ss-theme-mixed .ss-card-title, .ss-theme-mixed .ss-home-title, .ss-theme-mixed .ss-prose-section h2, .ss-theme-mixed .ss-prose-section h3 { color: var(--ss-text-primary); } .ss-light-section .ss-home-copy, .ss-light-section .ss-section-copy, .ss-light-section .ss-card-copy, .ss-light-section .ss-prose-section p, .ss-light-section .ss-prose-section li, .ss-theme-light .ss-home-copy, .ss-theme-light .ss-section-copy, .ss-theme-light .ss-card-copy, .ss-theme-light .ss-prose-section p, .ss-theme-light .ss-prose-section li, .ss-theme-mixed .ss-home-copy, .ss-theme-mixed .ss-section-copy, .ss-theme-mixed .ss-card-copy, .ss-theme-mixed .ss-prose-section p, .ss-theme-mixed .ss-prose-section li { color: var(--ss-text-secondary); } .ss-light-card { position: relative; overflow: hidden; /* War rgba(23,23,23,0.08) — auf #fff praktisch unsichtbar. * Brand-aligned (#ededed) macht Karten klar abgegrenzt ohne hart zu wirken. */ border: 1px solid var(--ss-band-light-card-border); border-radius: var(--ss-radius-2xl); background: var(--ss-surface-white); /* Schlankerer, weicherer Schatten — vorher dreischichtig + ziemlich dunkel, * was auf dem hellen Band visuell schwer wirkte. */ box-shadow: 0 1px 2px rgba(31, 35, 64, 0.04), 0 10px 28px rgba(31, 35, 64, 0.06); } .ss-light-card .ss-card-title, .ss-light-card .ss-home-section-title, .ss-light-card .ss-home-title { color: var(--ss-text-primary); } .ss-light-card .ss-card-copy, .ss-light-card .ss-home-copy { color: var(--ss-text-secondary); } /* Helle Landing-Bänder: Prose-Karten + Einleitung unter Sektionstitel */ .ss-light-section article.ss-light-card.ss-prose-section, .ss-theme-light article.ss-light-card.ss-prose-section { padding-top: 3rem; } /* * Abstand Kartenzeile → Fließtext-Karte (Sockenlängen / Verpackung): Außenabstand am direkten Kind * von .ss-container (.ss-tab-grid), nicht Innen-padding der article-Karte (wirkt zuverlässiger). */ .ss-page .ss-section[data-section-key='sock_lengths'] .ss-container > .ss-tab-grid, .ss-page .ss-section[data-section-key='verpackung'] .ss-container > .ss-tab-grid { margin-bottom: 30px; } .ss-home-copy[data-section-attr='sectionCopy'] { padding-bottom: 20px; } /* B2B: Auf dunklem Hintergrund keine weißen Karten – elevated dark surface (Tailwind Dark-Mode-Praxis) */ .ss-band--dark .ss-light-card { background: var(--ss-elevated-bg); border-color: var(--ss-elevated-border); box-shadow: var(--ss-elevated-shadow); backdrop-filter: blur(20px); } .ss-band--dark .ss-light-card .ss-card-title, .ss-band--dark .ss-light-card .ss-home-section-title, .ss-band--dark .ss-light-card .ss-home-title { color: var(--ss-text-inverse); } .ss-band--dark .ss-light-card .ss-card-copy, .ss-band--dark .ss-light-card .ss-home-copy { color: var(--ss-text-soft); } /* ---------------------------------------------------------------------------- * Schlauesocke Light Theme — Tailwind utility remap * * CMS authors and BlockElement components emit raw Tailwind color utilities * (gray/slate, indigo, amber, emerald, green, white). When the surrounding * element is set to a light variant in the editor (.ss-theme-light / * .ss-light-section / .ss-theme-mixed) or rendered inside a full-bleed white * band (.ss-content-band--full-bleed-white), we remap those utilities to the * Schlauesocke brand palette so the visual language stays consistent * regardless of the original Tailwind class. * * The mapping mirrors the standards spec (.ss-public-theme): white/gray/slate * → soft brand surfaces, indigo → brand yellow + dark-blue, amber → brand * alert bg + dark-blue, emerald/green → brand green. * ------------------------------------------------------------------------- */ /* Backgrounds: white / soft / muted ---------------------------------------- */ :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is(.bg-white, .bg-white\/95, .bg-white\/70) { background-color: var(--ss-surface-white); } :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is( .bg-\[\#f8fafc\], .bg-\[\#f8f9fc\], .bg-gray-50, .bg-gray-50\/70, .bg-slate-50, .from-slate-50, .to-slate-100 ) { background-color: var(--ss-band-light-soft-bg); } :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is(.bg-gray-100, .bg-gray-200, .bg-slate-100, .bg-gray-50\/90) { background-color: var(--ss-band-light-muted-bg); } /* Borders: gray / slate / dashed → brand border --------------------------- */ :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is( .border-gray-100, .border-gray-200, .border-gray-200\/80, .border-gray-300, .border-slate-100, .border-slate-200, .border-dashed ) { border-color: var(--ss-border); } /* Text: primary / secondary (only the lower-contrast Tailwind grays; * slate-700/600/500 stay as-is — they already have good contrast on white) - */ :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is(.text-gray-950, .text-gray-900, .text-gray-800, .text-slate-900) { color: var(--ss-text-primary); } :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is( .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400, .text-slate-400 ) { color: var(--ss-text-secondary); } /* Indigo / amber CTA buttons → brand yellow ------------------------------- */ :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is(.bg-indigo-600, .bg-indigo-700, .bg-amber-600) { background-color: var(--ss-yellow); color: var(--ss-text-primary); } :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is( .hover\:bg-indigo-700:hover, .hover\:bg-indigo-800:hover, .hover\:bg-amber-700:hover ) { background-color: var(--ss-yellow-hover); color: var(--ss-text-primary); } /* Indigo soft surfaces → brand alert bg ---------------------------------- */ :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is( .bg-indigo-50, .bg-indigo-50\/40, .bg-indigo-50\/60, .bg-indigo-50\/70, .bg-indigo-50\/80, .bg-indigo-100, .hover\:bg-indigo-50:hover, .hover\:bg-indigo-100:hover ) { background-color: var(--ss-alert-bg); } /* Indigo text → brand dark-blue ------------------------------------------ */ :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is( .text-indigo-500, .text-indigo-600, .text-indigo-700, .text-indigo-800, .text-indigo-900, .text-indigo-950, .text-indigo-900\/80 ) { color: var(--ss-dark-blue); } :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is( .border-indigo-100, .border-indigo-200, .border-indigo-300, .border-indigo-400 ) { border-color: var(--ss-yellow); } /* Emerald / green → brand green ------------------------------------------ */ :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is( .bg-emerald-50, .bg-emerald-50\/60, .bg-emerald-50\/70, .bg-emerald-100, .bg-green-50 ) { background-color: var(--ss-alert-bg-soft); } :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is( .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-950, .text-green-800, .text-green-900, .text-green-950 ) { color: var(--ss-green); } :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is(.border-emerald-100, .border-emerald-200, .border-green-200) { border-color: rgba(91, 165, 74, 0.35); } /* Amber → brand alert bg / dark-blue / yellow ---------------------------- */ :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is(.bg-amber-50, .bg-amber-100, .bg-amber-100\/80) { background-color: var(--ss-alert-bg); } :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is( .text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900, .text-amber-950 ) { color: var(--ss-dark-blue); } :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is(.border-amber-200, .border-amber-300) { border-color: var(--ss-yellow); } /* Focus ring remap (indigo → brand green, matches --ring in the spec). */ :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) :is( .focus\:border-indigo-500:focus, .focus\:ring-indigo-500:focus, .focus-visible\:ring-indigo-500:focus-visible, .focus-visible\:outline-indigo-500:focus-visible ) { border-color: var(--ss-green); --tw-ring-color: var(--ss-green); outline-color: var(--ss-green); } /* Default link color in light wrappers — outside of .ss-prose-section, which * already has its own brand link rule above. Anchors that don't sit inside * a prose article still need a readable, brand-aligned default. * * Buttons (.ss-btn, .ss-btn--primary, .ss-cta-*) are excluded so their own * color tokens (yellow CTA on light, white on green/blue) are preserved. */ :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) a:not(.ss-btn):not([class*='ss-btn-']):not([class*='ss-cta']) { color: var(--ss-dark-blue); } :is(.ss-theme-light, .ss-light-section, .ss-theme-mixed, .ss-content-band--full-bleed-white) a:not(.ss-btn):not([class*='ss-btn-']):not([class*='ss-cta']):hover { color: var(--ss-dark-blue); text-decoration-color: var(--ss-yellow-hover); } /* ---------------------------------------------------------------------------- * Light theme — element-scoped custom CSS override * * BlocksRenderer injects each element's custom CSS as an inline