/* ========================================================================== components.css — VERBINDLICHE Basiskomponenten für lageralarm.eu -------------------------------------------------------------------------- Regel: Karten, Panels, Buttons und Badges werden AUSSCHLIESSLICH hier definiert. Einzelne Seiten oder Blöcke dürfen sie NICHT neu gestalten – Änderungen erfolgen immer an dieser Basiskomponente und wirken dann überall. Es werden ausschließlich Tokens aus tokens.css verwendet: keine neuen Farben, Schatten, Radien oder Abstände. Reihenfolge im : tokens.css -> components.css -> Seiten-CSS. Styleguide (alle Komponenten nebeneinander): /styleguide.html ========================================================================== */ /* ===== 1. Fläche: Panel & Card ========================================== .panel = großer Container (Sektion, Tabelle, Karte/Map) .card = einzelne Inhaltskarte (Produkt, Filiale, Kennzahl) Beide teilen Radius, Rahmen und Schatten. Varianten ändern NUR die Bedeutung, nie die Grundform. */ .panel, .card{ background:var(--color-surface); border:1px solid color-mix(in srgb,var(--world-accent,var(--color-primary)) 14%,var(--color-border)); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); } .panel{ padding:var(--space-5); } .card{ padding:var(--space-4); } /* Varianten (semantisch, nicht dekorativ) */ .panel--muted, .card--muted{ background:var(--color-bg-subtle); box-shadow:none; } .panel--plain, .card--plain{ background:transparent; border:0; box-shadow:none; padding:0; } .panel--highlight, .card--highlight{ border-color:color-mix(in srgb,var(--color-primary) 38%,var(--color-border)); } .panel--danger, .card--danger{ border-color:color-mix(in srgb,var(--color-danger) 35%,var(--color-border)); background:var(--color-danger-soft); } /* Interaktive Karte: EIN Hover für alle */ .card--interactive{ transition:box-shadow var(--transition-base), transform var(--transition-base); } .card--interactive:hover, .card--interactive:focus-within{ box-shadow:var(--shadow-md); transform:translateY(-2px); } /* Feste Kartenstruktur: Medien -> Eyebrow -> Titel -> Text -> Footer */ .card__media{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--color-bg-subtle); border-radius:var(--radius-sm); margin-bottom:var(--space-3); } .card__eyebrow{ font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.09em; text-transform:uppercase; color:var(--color-primary); } .card__title{ margin:0 0 var(--space-2); font-size:var(--text-lg); font-weight:var(--weight-heading); letter-spacing:-.02em; color:var(--color-navy); } .card__text{ margin:0; color:var(--color-text-muted); font-size:var(--text-sm); line-height:var(--leading-normal); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } .card__footer{ display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-3); } /* ===== 2. Buttons ====================================================== EINE Definition für das Bestandssystem (.btn, 51 Verwendungen im Markup) und die neuen Aliase (.ui-btn). Vorher lagen konkurrierende Definitionen in commerce.css, index.css und comparison.css (Radius 999px vs. 11px, zwei verschiedene Grüntöne, !important-Ketten). Optik bleibt: Pillenform, grüne Primäraktion, weiße Sekundäraktion. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:var(--control-height); padding:0 var(--space-5); border:1px solid transparent; border-radius:var(--radius-md); font-family:inherit; font-size:var(--text-sm); font-weight:var(--weight-bold); line-height:1.2; text-decoration:none; cursor:pointer; transition:background var(--transition-fast), border-color var(--transition-fast); } .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 42%,transparent); } .btn-primary{ background:var(--color-primary); color:var(--color-primary-contrast); border-color:var(--color-primary); } .btn-primary:hover{ background:var(--color-primary-strong); border-color:var(--color-primary-strong); } .btn-ghost{ background:var(--color-surface); color:var(--color-text); border-color:var(--color-border-strong); } .btn-ghost:hover{ background:var(--color-bg-subtle); } .btn[disabled]{ opacity:.55; cursor:not-allowed; } /* EINE kompakte Größe statt 18 kontextabhängiger Sondergrößen. Alle dichten Kontexte (Kartenaktionen, Tabellenaktionen, Angebotszeilen) verweisen hier – nicht mehr jede Datei mit eigenen Werten. */ .btn-sm, .card-foot .btn, .secondary-actions .btn, .variant-card .btn, .offer-action .btn, .amazon-product-actions .btn, .ebay-actions .btn, .market-list .local-store .card-foot > .btn-primary, .market-list .local-store .secondary-actions .btn{ min-height:var(--control-height-sm); padding:0 var(--space-3); font-size:var(--text-xs); border-radius:var(--radius-md); } /* Alias: .ui-btn nutzt dieselbe Basis, damit kein Zweitsystem entsteht. */ .ui-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:var(--control-height); padding:0 var(--space-4); border:1px solid transparent; border-radius:var(--radius-md); font-family:inherit; font-size:var(--text-sm); font-weight:var(--weight-bold); text-decoration:none; cursor:pointer; transition:background var(--transition-fast), border-color var(--transition-fast); } .ui-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 42%,transparent); } .ui-btn--primary{ background:var(--color-primary); color:var(--color-primary-contrast); } .ui-btn--primary:hover{ background:var(--color-primary-strong); } .ui-btn--dark{ background:var(--color-navy); color:#fff; } .ui-btn--dark:hover{ background:var(--color-navy-strong); } .ui-btn--secondary{ background:var(--color-surface); color:var(--color-text); border-color:var(--color-border-strong); } .ui-btn--secondary:hover{ background:var(--color-bg-subtle); } .ui-btn--sm{ min-height:var(--control-height-sm); padding:0 var(--space-3); font-size:var(--text-xs); } .ui-btn--block{ width:100%; } .ui-btn[disabled]{ opacity:.55; cursor:not-allowed; } .ui-btn__icon{ width:1em; height:1em; flex:none; } /* ===== 2a. Leerzustand ================================================== Kompakte, handlungsorientierte Rueckmeldung statt einer dekorativen Vollflaeche. Seiten duerfen nur Text und Aktionen variieren. */ .ui-empty-state{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--space-4); width:100%; margin-top:var(--space-4); padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg-subtle); color:var(--color-text-muted); } .ui-empty-state[hidden]{ display:none; } .ui-empty-state--light{ background:var(--color-surface); } .ui-empty-state__icon{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-nested); background:var(--color-primary-soft); color:var(--color-primary-strong); } .ui-empty-state__icon svg{ display:block; width:24px; height:24px; } .ui-empty-state__copy{ min-width:0; } .ui-empty-state__copy b{ display:block; margin:0 0 var(--space-1); color:var(--color-text); font-size:var(--text-base); line-height:var(--leading-tight); } .ui-empty-state__copy span{ display:block; max-width:68ch; color:var(--color-text-muted); font-size:var(--text-13); line-height:var(--leading-normal); } .ui-empty-state__actions{ display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); } .ui-empty-state__actions .btn{ white-space:nowrap; } @media(max-width:720px){ .ui-empty-state{ grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); padding:var(--space-4); } .ui-empty-state__icon{ width:40px; height:40px; } .ui-empty-state__actions{ grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; } .ui-empty-state__actions .btn{ min-width:0; padding-inline:var(--space-3); } .ui-empty-state__actions .btn:only-child{ grid-column:1/-1; } } /* ===== 2b. Benachrichtigungs-CTA ======================================= Ein gemeinsamer, informativer Portal-CTA. Keine werbliche Vollflaeche: Nutzen, Bedingungen und Aktion bleiben auf einen Blick erfassbar. */ .notification-cta{ position:relative; isolation:isolate; overflow:hidden; display:grid; /* Das Visual unterstützt den CTA, darf den Inhalt aber nicht dominieren. */ grid-template-columns:minmax(0,1fr) minmax(160px,200px); grid-template-areas: "copy art" "copy action"; align-items:center; gap:var(--space-3) var(--space-7); width:100%; margin:var(--space-7) 0; padding:var(--space-7); border:0; border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--color-navy-strong),var(--color-navy) 68%,color-mix(in srgb,var(--color-primary-strong) 64%,var(--color-navy))); color:var(--color-primary-contrast); box-shadow:var(--shadow-lg); } .notification-cta::before{ content:""; position:absolute; z-index:-1; right:-8%; bottom:-70%; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--color-primary-bright) 24%,transparent),transparent 68%); pointer-events:none; } .notification-cta__copy{ grid-area:copy; min-width:0; } .notification-cta__eyebrow{ display:block; margin-bottom:var(--space-1); color:color-mix(in srgb,var(--color-primary-contrast) 80%,transparent); font-size:var(--text-11); font-weight:var(--weight-bold); letter-spacing:.11em; line-height:var(--leading-snug); text-transform:uppercase; } .notification-cta h3{ margin:0; color:var(--color-primary-contrast); font-size:var(--text-xl); line-height:var(--leading-tight); letter-spacing:-.025em; } .notification-cta p{ max-width:68ch; margin:var(--space-1) 0 0; color:color-mix(in srgb,var(--color-primary-contrast) 82%,transparent); font-size:var(--text-14); line-height:var(--leading-normal); } .notification-cta__benefits{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin:var(--space-3) 0 0; padding:0; list-style:none; color:color-mix(in srgb,var(--color-primary-contrast) 88%,transparent); font-size:var(--text-12); } .notification-cta__benefits li{ display:inline-flex; align-items:center; gap:6px; } .notification-cta__benefits li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--color-primary-bright); flex:none; } .notification-cta__art{ grid-area:art; display:grid; min-height:126px; place-items:center; color:var(--color-primary-bright); } .notification-cta__art svg{ display:block; width:min(100%,156px); height:auto; overflow:visible; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; } .notification-cta__art circle{ stroke-width:1.5; opacity:.28; } .notification-cta__signal{ stroke-width:5; opacity:.7; } .notification-cta__bell, .notification-cta__clapper{ stroke-width:8; } .notification-cta .notification-cta__action{ grid-area:action; width:100%; min-height:52px; border-color:var(--color-primary-bright); background:var(--color-primary-bright); color:var(--color-navy-strong); white-space:nowrap; } .notification-cta .notification-cta__action:hover{ border-color:color-mix(in srgb,var(--color-primary-bright) 82%,var(--color-primary-contrast)); background:color-mix(in srgb,var(--color-primary-bright) 82%,var(--color-primary-contrast)); color:var(--color-navy-strong); } @media(max-width:760px){ .notification-cta{ grid-template-columns:minmax(0,1fr); grid-template-areas: "copy" "action"; gap:var(--space-3); margin:var(--space-6) 0; padding:var(--space-6) var(--space-4) var(--space-4); } .notification-cta::before{ right:-34%; bottom:-8%; width:94%; } .notification-cta h3{ max-width:13ch; font-size:var(--text-xl); } .notification-cta p{ max-width:30ch; } .notification-cta__benefits{ gap:var(--space-2) var(--space-3); } .notification-cta__art{ position:absolute; z-index:-1; top:var(--space-4); right:calc(var(--space-6) * -1); width:176px; min-height:0; opacity:.26; pointer-events:none; } .notification-cta .notification-cta__action{ width:100%; } } /* ===== 2c. Radius-Staffel nach Elementhöhe ============================= KEINE Pillen. Der Radius richtet sich nach der Höhe (ca. 36 %), sonst wird ein kleines Element bei großem Radius automatisch zur Pille. >= 44px -> --radius-md Karten, Buttons, Eingabefelder 32-40px -> --radius-nested Chips, Segmente, kompakte Buttons < 32px -> --radius-xs Badges, Status, Zähler */ .availability-scope, .site-nav-cta{ border-radius:var(--radius-md); } .chip, .availability-scope button, .offer-unverified-toggle, .type-switch, .btn-sm, .card-foot .btn, .secondary-actions .btn, .variant-card .btn, .offer-action .btn, .amazon-product-actions .btn, .ebay-actions .btn{ border-radius:var(--radius-nested); } /* Badges & Statusanzeigen (klein) */ .badge, .pill, .ui-badge, .offer-status, .mode-badge, .amazon-product-state, .world-marketplace-status, .store-postcode, .ebay-metric > span, .affiliate-label, .row-tab, .fact, .tag-best, .badge-best{ border-radius:var(--radius-xs); } /* Ausnahme: echte Kreise bleiben Kreise */ .avail-dot,.quality-dot,.network-dot,.ui-badge__dot,.pill .dot, .offer-status i,.amazon-product-state i,.stat-ic,.logo,.icon-btn svg{ border-radius:50%; } /* ===== 3. Badge / Status ============================================== Status IMMER Text + Punkt/Icon – nie nur Farbe. */ .ui-badge{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-3); border-radius:var(--radius-xs); font-size:var(--text-xs); font-weight:var(--weight-bold); white-space:nowrap; } .ui-badge__dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; } .ui-badge--ok{ background:var(--color-success-soft); color:var(--color-success); } .ui-badge--warn{ background:var(--color-warning-soft); color:var(--color-warning); } .ui-badge--neutral{ background:var(--color-neutral-soft); color:var(--color-neutral); } .ui-badge--danger{ background:var(--color-danger-soft); color:var(--color-danger); } .ui-badge--outline{ background:transparent; border:1px solid var(--color-border); color:var(--color-text-muted); } /* ===== 4. Sektionen & Typografie ====================================== */ .ui-eyebrow{ display:block; margin-bottom:var(--space-2); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.09em; text-transform:uppercase; color:var(--color-primary); } .ui-section-title{ margin:0; color:var(--color-navy); font-size:var(--text-2xl); font-weight:var(--weight-heading); letter-spacing:-.03em; } .ui-section-sub{ margin:var(--space-2) 0 0; color:var(--color-text-muted); } .ui-num{ font-variant-numeric:tabular-nums lining-nums; } /* ===== 5. Layout-Helfer (nur Anordnung, nie Stil) ===================== */ .ui-stack{ display:flex; flex-direction:column; gap:var(--space-3); } .ui-row{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; } .ui-grid{ display:grid; gap:var(--space-4); } .ui-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .ui-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } @media(max-width:900px){ .ui-grid--3,.ui-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:560px){ .ui-grid--3,.ui-grid--4{ grid-template-columns:1fr; } } /* ===== 6. Bestandsklassen an die Basis binden ========================= Damit gibt es EINE Definition für Radius/Rahmen/Schatten statt verstreuter Einzelwerte (vorher 11–18px in sechs Dateien). */ .stats .stat, .filter-shell, .map-panel, .variant-card, .amazon-product, .world-marketplace-product, .offer-panel, .reel-card, .market-list .card.local-store, /* Übrige Seiten (Ratgeber, Vergleich, Neuigkeiten, Produktwelten, Admin): lagen bei 18/20/24px mit eigenen Schatten – jetzt dieselbe Basis. */ .hp-card, .hp-compare-card, .hp-spec-panel, .news-card, .news-side-card, .guide-card, .content-card, .catalog-card, .admin-card, .login-card, .feed-item{ border-radius:var(--radius-md); border:1px solid var(--color-border); box-shadow:var(--shadow-sm); background:var(--color-surface); } .stats .stat, .variant-card, .amazon-product, .world-marketplace-product, .reel-card, .market-list .card.local-store{ transition:box-shadow var(--transition-base), transform var(--transition-base); } .stats .stat:hover, .variant-card:hover, .variant-card:focus-within, .amazon-product:hover, .world-marketplace-product:hover, .hp-card:hover, .news-card:hover, .guide-card:hover, .catalog-card:hover, .reel-card:hover, .market-list .card.local-store:hover{ box-shadow:var(--shadow-md); } /* Shared editorial-card media frame. Source images use different aspect ratios; the card component owns the frame so one image cannot stretch a whole row while its neighbour remains compact. */ .guide-cards > .guide-card > :is(img, .responsive-image){ display:block; width:calc(100% + 44px); height:clamp(200px,18vw,280px); min-height:200px; max-height:280px; aspect-ratio:auto; margin:-22px -22px 20px; overflow:hidden; object-fit:cover; object-position:center; } .guide-cards > .guide-card > .responsive-image > img{ display:block; width:100%; height:100%; max-width:none; aspect-ratio:auto; object-fit:cover; object-position:center; } @media(max-width:640px){ .guide-cards > .guide-card > :is(img, .responsive-image){ height:200px; min-height:200px; max-height:200px; } } /* ===== Energieeffizienz ================================================ Kompakte SVG-Klasse auf Produktseiten. Nur rendern, wenn eine belastbare Klasse vorliegt; Text und SVG transportieren dieselbe Information. */ .energy-class-label{ display:inline-flex; max-width:100%; margin:var(--space-3) 0; } .energy-class-label, .energy-class-label>a{ display:inline-flex; align-items:center; gap:var(--space-3); } .energy-class-label>a{ min-height:var(--control-height); color:inherit; text-decoration:none; } .energy-class-label>a:focus-visible{ outline:3px solid color-mix(in srgb,var(--color-primary) 35%,transparent); outline-offset:3px; } .energy-class-svg{ display:block; flex:0 0 auto; width:106px; height:auto; color:var(--color-neutral); } .energy-class-svg text{ fill:var(--color-primary-contrast); font-family:var(--font-sans); font-size:23px; font-weight:800; } .energy-class-svg--a{color:var(--energy-class-a)} .energy-class-svg--b{color:var(--energy-class-b)} .energy-class-svg--c{color:var(--energy-class-c)} .energy-class-svg--d{color:var(--energy-class-d)} .energy-class-svg--e{color:var(--energy-class-e)} .energy-class-svg--f{color:var(--energy-class-f)} .energy-class-svg--g{color:var(--energy-class-g)} .energy-class-copy{ display:grid; gap:var(--space-1); color:var(--color-text-muted); font-size:var(--text-12); line-height:var(--leading-snug); } .energy-class-copy strong{ color:var(--color-text); font-size:var(--text-base); } @media(max-width:560px){ .energy-class-svg{width:88px} } /* ===== 8. Vergleichs- und Katalogkomponenten =========================== Produktwelt-neutral: Diese Bausteine dürfen auch in weiteren Vergleichen verwendet werden. Seiten-CSS bestimmt ausschließlich Raster und Abstände. */ .section-heading{ max-width:820px; margin-bottom:var(--space-6); } .section-heading h2{ margin:var(--space-2) 0 var(--space-3); color:var(--color-text); font-size:clamp(var(--text-2xl),3vw,2.4rem); line-height:var(--leading-tight); letter-spacing:-.04em; } .section-heading p{ margin:0; color:var(--color-text-muted); font-size:var(--text-base); line-height:var(--leading-normal); } .section-heading-compact{ margin-bottom:var(--space-4); } .surface-inverse{ --surface-inverse-text:var(--color-surface); --surface-inverse-muted:color-mix(in srgb,var(--color-surface) 76%,transparent); --surface-inverse-line:color-mix(in srgb,var(--color-surface) 16%,transparent); border:1px solid var(--surface-inverse-line); background:linear-gradient(135deg,var(--color-navy-strong),var(--color-navy) 72%,color-mix(in srgb,var(--color-primary-strong) 62%,var(--color-navy))); color:var(--surface-inverse-text); box-shadow:var(--shadow-lg); } .surface-inverse h1, .surface-inverse h2, .surface-inverse h3{ color:var(--surface-inverse-text); } .surface-inverse .page-kicker{ color:var(--color-primary-bright); } .surface-inverse .page-kicker::before{ background:var(--color-primary-bright); } .surface-inverse .page-lead, .surface-inverse .section-heading p{ color:var(--surface-inverse-muted); } .surface-feature{ border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--color-border)); background:linear-gradient(135deg,var(--color-surface) 0%,color-mix(in srgb,var(--color-primary-soft) 46%,var(--color-surface)) 68%,var(--color-primary-soft) 100%); color:var(--color-text); box-shadow:var(--shadow-lg); } .surface-feature h1, .surface-feature h2, .surface-feature h3{ color:var(--color-text); } .surface-feature .page-kicker{ color:var(--color-primary); } .surface-feature .page-lead, .surface-feature .section-heading p{ color:var(--color-text-muted); } .comparison-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-self:center; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-sm); } .comparison-stats div{ display:grid; align-content:center; gap:var(--space-2); min-height:92px; padding:var(--space-4); text-align:center; } .comparison-stats div+div{ border-left:1px solid var(--color-border); } .comparison-stats strong{ color:var(--color-primary); font-size:var(--text-xl); font-variant-numeric:tabular-nums; line-height:1; } .comparison-stats span{ color:var(--color-text-muted); font-size:var(--text-12); font-weight:var(--weight-semibold); } .comparison-stats p{ grid-column:1/-1; margin:0; padding:var(--space-4); border-top:1px solid var(--color-border); color:var(--color-text-muted); font-size:var(--text-12); line-height:var(--leading-normal); text-align:center; } .comparison-stats p strong{ color:var(--color-text); font-size:inherit; } .surface-inverse .comparison-stats{ border-color:var(--surface-inverse-line); background:color-mix(in srgb,var(--color-surface) 5%,transparent); box-shadow:none; } .surface-inverse .comparison-stats div+div, .surface-inverse .comparison-stats p{ border-color:var(--surface-inverse-line); } .surface-inverse .comparison-stats strong{ color:var(--color-primary-bright); } .surface-inverse .comparison-stats span, .surface-inverse .comparison-stats p{ color:var(--surface-inverse-muted); } .surface-inverse .comparison-stats p strong{ color:var(--surface-inverse-text); } .surface-feature .comparison-stats{ border-color:color-mix(in srgb,var(--color-primary) 16%,var(--color-border)); background:color-mix(in srgb,var(--color-surface) 92%,transparent); box-shadow:var(--shadow-sm); } .surface-feature .comparison-stats strong{ color:var(--color-primary); } .type-guide{ display:grid; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); } .type-guide article{ min-width:0; padding:var(--space-6); } .type-guide article+article{ border-left:1px solid var(--color-border); } .type-guide h3{ display:flex; align-items:center; gap:var(--space-3); margin:0 0 var(--space-3); color:var(--color-text); font-size:var(--text-lg); line-height:var(--leading-snug); } .guide-icon{ display:grid; flex:0 0 42px; width:42px; height:42px; place-items:center; border-radius:var(--radius-xs); background:var(--color-primary-soft); color:var(--color-primary); } .guide-icon svg{ width:28px; height:28px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .type-guide p{ margin:0; color:var(--color-text-muted); font-size:var(--text-14); line-height:var(--leading-normal); } .type-guide p strong{ color:var(--color-text); } .type-guide ul{ margin:var(--space-4) 0 0; padding-left:var(--space-5); color:var(--color-text); font-size:var(--text-13); line-height:var(--leading-normal); } .catalog-note, .catalog-live{ padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg-subtle); color:var(--color-text-muted); font-size:var(--text-13); line-height:var(--leading-normal); } .catalog-note{ margin-top:var(--space-4); } .catalog-trust-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin-top:var(--space-5); } .catalog-trust-row .catalog-live, .catalog-trust-row .catalog-note{ height:100%; margin:0; } .catalog-note strong, .catalog-live strong{ color:var(--color-text); } .catalog-note a{ color:var(--color-primary); font-weight:var(--weight-semibold); text-underline-offset:3px; } .comparison-paths{ display:grid; overflow:hidden; margin-top:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); } .comparison-paths .catalog-note{ margin:0; padding:var(--space-3) var(--space-4); border:0; border-top:1px solid var(--color-border); border-radius:0; background:var(--color-bg-subtle); font-size:var(--text-12); } .comparison-paths .type-switches{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0; padding:0; } .comparison-paths .type-switch{ display:flex; width:100%; min-height:var(--control-height); align-items:center; justify-content:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border:0; border-right:1px solid var(--color-border); border-radius:0; background:transparent; color:var(--color-primary-strong); } .comparison-paths .type-switch:last-child{ padding-right:0; border-right:0; } .comparison-paths .type-switch svg{ flex:0 0 19px; width:19px; height:19px; stroke:var(--color-primary); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .comparison-paths .type-switch:hover, .comparison-paths .type-switch:focus-visible{ border-color:var(--color-border); background:transparent; color:var(--color-primary); text-decoration:underline; text-underline-offset:4px; } .catalog-live{ display:flex; gap:var(--space-3); align-items:flex-start; margin:var(--space-4) 0 0; background:var(--color-info-soft); color:var(--color-text); } .catalog-live::before{ content:"i"; display:grid; flex:0 0 22px; width:22px; height:22px; place-items:center; border-radius:50%; background:var(--color-info); color:var(--color-primary-contrast); font-size:var(--text-12); font-weight:var(--weight-bold); } .type-switches, .decision-presets{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); } .type-switch, .decision-presets button{ min-height:var(--control-height); padding:0 var(--space-4); border:1px solid var(--color-border-strong); border-radius:var(--radius-nested); background:var(--color-surface); color:var(--color-text); font:inherit; font-size:var(--text-13); font-weight:var(--weight-semibold); line-height:1; text-decoration:none; cursor:pointer; transition:border-color var(--transition-base),color var(--transition-base),background var(--transition-base); } .type-switch:hover, .type-switch:focus-visible, .decision-presets button:hover, .decision-presets button:focus-visible{ border-color:var(--color-primary); background:var(--color-primary-soft); color:var(--color-primary-strong); outline:none; } .type-switch[aria-pressed="true"], .decision-presets button[aria-pressed="true"]{ border-color:var(--color-primary); background:var(--color-primary); color:var(--color-primary-contrast); } .decision-presets{ margin-bottom:var(--space-5); } .decision-picks{ display:grid; gap:var(--space-4); } .decision-card{ display:grid; grid-template-columns:112px minmax(0,1fr); grid-template-rows:auto auto auto auto; gap:var(--space-1) var(--space-4); align-items:center; min-width:0; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); } .decision-image{ grid-row:1/5; width:112px; height:112px; overflow:hidden; border-radius:var(--radius-sm); background:var(--color-bg-subtle); } .decision-image img, .decision-image .product-placeholder{ display:block; width:100%; height:100%; object-fit:contain; } .decision-image img.fit-cover{ object-fit:cover; } .decision-card>span{ color:var(--color-primary); font-size:var(--text-11); font-weight:var(--weight-bold); letter-spacing:.06em; text-transform:uppercase; } .decision-card h3{ margin:0; color:var(--color-text); font-size:var(--text-14); line-height:var(--leading-snug); } .decision-card p{ margin:0; color:var(--color-text-muted); font-size:var(--text-12); } .decision-card a{ color:var(--color-primary); font-size:var(--text-12); font-weight:var(--weight-semibold); } .comparison-workbench{ padding:clamp(var(--space-6),4vw,var(--space-9)); border-radius:var(--radius-xl); } .surface-inverse .decision-presets button{ border-color:var(--surface-inverse-line); background:color-mix(in srgb,var(--color-surface) 5%,transparent); color:var(--surface-inverse-text); } .surface-inverse .decision-presets button:hover, .surface-inverse .decision-presets button:focus-visible, .surface-inverse .decision-presets button[aria-pressed="true"]{ border-color:var(--color-primary-bright); background:var(--color-primary); color:var(--color-primary-contrast); } .surface-inverse .decision-card{ border-color:var(--surface-inverse-line); background:color-mix(in srgb,var(--color-surface) 5%,transparent); } .surface-inverse .decision-card>span, .surface-inverse .decision-card a{ color:var(--color-primary-bright); } .surface-inverse .decision-card p{ color:var(--surface-inverse-muted); } .surface-feature .decision-presets button{ border-color:var(--color-border-strong); background:color-mix(in srgb,var(--color-surface) 92%,transparent); } .surface-feature .decision-presets button:hover, .surface-feature .decision-presets button:focus-visible{ border-color:var(--color-primary); background:var(--color-primary-soft); color:var(--color-primary-strong); } .surface-feature .decision-presets button[aria-pressed="true"]{ border-color:var(--color-primary); background:var(--color-primary); color:var(--color-primary-contrast); } .surface-feature .decision-card{ border-color:color-mix(in srgb,var(--color-primary) 14%,var(--color-border)); background:color-mix(in srgb,var(--color-surface) 94%,transparent); box-shadow:var(--shadow-sm); } .catalog-head{ display:flex; align-items:end; justify-content:space-between; gap:var(--space-5); } .catalog-head h2{ margin:var(--space-2) 0 var(--space-3); font-size:clamp(var(--text-2xl),3vw,2.4rem); line-height:var(--leading-tight); letter-spacing:-.04em; } .catalog-head p{ margin:0; color:var(--color-text-muted); } .catalog-count{ flex:0 0 auto; padding:var(--space-2) var(--space-3); border-radius:var(--radius-xs); background:var(--color-primary-soft); color:var(--color-primary-strong); font-size:var(--text-13); font-weight:var(--weight-bold); font-variant-numeric:tabular-nums; } .catalog-filters{ display:grid; gap:var(--space-3); margin:var(--space-5) 0 var(--space-6); padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); } .catalog-filters label{ display:grid; align-content:end; gap:var(--space-2); min-width:0; color:var(--color-text-muted); font-family:var(--font-sans); font-size:var(--text-12); font-weight:var(--weight-semibold); } .catalog-filters input, .catalog-filters select{ width:100%; min-width:0; min-height:var(--control-height); padding:0 var(--space-3); border:1px solid var(--color-border-strong); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font:inherit; font-size:var(--text-14); } .catalog-filters input:focus, .catalog-filters select:focus{ border-color:var(--color-primary); outline:3px solid color-mix(in srgb,var(--color-primary) 18%,transparent); outline-offset:0; } .catalog-filters .available-toggle{ display:flex; align-items:center; align-self:end; gap:var(--space-2); min-height:var(--control-height); padding:0 var(--space-3); border:1px solid var(--color-border-strong); border-radius:var(--radius-sm); background:var(--color-bg-subtle); color:var(--color-text); cursor:pointer; } .catalog-filters .available-toggle:has(input:checked){ border-color:var(--color-success); background:var(--color-success-soft); color:var(--color-success); } .catalog-filters .available-toggle input{ width:18px; min-height:auto; height:18px; padding:0; accent-color:var(--color-primary); } .catalog-filter-actions{ display:flex; grid-column:1/-1; justify-content:flex-end; gap:var(--space-3); padding-top:var(--space-2); border-top:1px solid var(--color-border); } .catalog-filter-actions .btn{ min-height:var(--control-height); margin:0; text-decoration:none; } .catalog-grid{ display:grid; align-items:stretch; gap:var(--space-5); } .catalog-card{ display:flex; min-width:0; overflow:hidden; flex-direction:column; transition:border-color var(--transition-base),box-shadow var(--transition-base); } .catalog-card:hover{ border-color:var(--color-border-strong); box-shadow:var(--shadow-md); } .catalog-card .visual{ position:relative; display:grid; width:100%; aspect-ratio:4/3; place-items:center; overflow:hidden; border-bottom:1px solid var(--color-border); background:var(--color-bg-subtle); } .catalog-card .visual>div[hidden]{ display:none; } .catalog-card .visual>div:not([hidden]), .catalog-card .visual img{ width:100%; height:100%; } .catalog-card .visual img{ position:absolute; inset:0; display:block; box-sizing:border-box; padding:var(--space-4); object-fit:contain; object-position:center; background:var(--color-surface); } .catalog-card .visual img.fit-cover{ padding:0; object-fit:cover; } .catalog-card .body{ display:flex; flex:1; flex-direction:column; padding:var(--space-5); } .catalog-card .badge{ align-self:flex-start; margin:0 0 var(--space-3); padding:var(--space-1) var(--space-2); background:var(--color-primary-soft); color:var(--color-primary-strong); font-size:var(--text-11); font-weight:var(--weight-bold); text-transform:none; } .catalog-card .kind-label{ margin-bottom:var(--space-1); color:var(--color-primary); font-size:var(--text-11); font-weight:var(--weight-bold); letter-spacing:.06em; text-transform:uppercase; } .catalog-card .brand{ color:var(--color-text-muted); font-size:var(--text-13); } .catalog-card h3{ min-height:2.5em; margin:var(--space-1) 0 var(--space-3); color:var(--color-text); font-size:var(--text-lg); line-height:var(--leading-snug); letter-spacing:-.025em; } .catalog-card .rating{ margin:0 0 var(--space-3); color:var(--color-text-muted); font-size:var(--text-13); font-weight:var(--weight-medium); } .catalog-card .spec-list{ display:grid; gap:var(--space-2); margin:0 0 var(--space-4); padding:var(--space-3) 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); } .catalog-card .spec{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:var(--space-2); align-items:center; color:var(--color-text); font-size:var(--text-13); line-height:var(--leading-snug); } .property-icon{ display:block; width:20px; height:20px; color:var(--color-primary); stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .catalog-card .feature-list{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:calc(var(--space-2) * -1) 0 var(--space-4); } .catalog-card .feature{ display:inline-flex; min-height:32px; align-items:center; gap:var(--space-2); padding:0 var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-nested); background:var(--color-bg-subtle); color:var(--color-text); font-size:var(--text-12); font-weight:var(--weight-semibold); } .catalog-card .feature .property-icon{ width:17px; height:17px; } .catalog-card .stock{ margin-top:auto; padding:var(--space-3); border-radius:var(--radius-xs); font-size:var(--text-13); font-weight:var(--weight-semibold); line-height:var(--leading-snug); } .stock.available{background:var(--color-success-soft);color:var(--color-success)} .stock.unavailable{background:var(--color-neutral-soft);color:var(--color-neutral)} .stock.unknown, .stock.pending_recheck, .stock.external_check{background:var(--color-info-soft);color:var(--color-text)} .stock.check_failed{background:var(--color-danger-soft);color:var(--color-danger)} .stock.search_only{background:var(--color-info-soft);color:var(--color-info)} .tech-details{ margin-top:var(--space-3); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); } .tech-details summary{ display:flex; min-height:var(--control-height); align-items:center; padding:var(--space-2) 0; color:var(--color-primary); font-size:var(--text-13); font-weight:var(--weight-semibold); cursor:pointer; } /* Einheitliche Bildrahmen verhindern Layoutsprünge und sichtbare Browser-Fehlerbilder, wenn eine externe Quelle ausfällt. */ :where(.hp-card-image,.hp-related,.product-related-card,.hp-product-image) img{ display:block; max-width:100%; } :where(.hp-card-image,.hp-related,.product-related-card,.hp-product-image) img.is-image-fallback{ padding:clamp(18px,8%,42px); object-fit:contain; background:var(--color-bg-subtle); } .tech-details dl{ display:grid; margin:0 0 var(--space-3); } .tech-details[open] dl{ max-height:220px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; } .tech-details dl>div{ display:grid; grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr); gap:var(--space-3); padding:var(--space-2) 0; border-top:1px solid var(--color-border); } .tech-details dt, .tech-details dd{ min-width:0; overflow-wrap:anywhere; font-size:var(--text-12); line-height:var(--leading-normal); } .tech-details dt{ color:var(--color-text-muted); font-weight:var(--weight-semibold); } .tech-details dd{ margin:0; overflow-wrap:anywhere; color:var(--color-text); } .compare-toggle{ display:flex; align-items:center; gap:var(--space-2); min-height:var(--control-height); color:var(--color-text); font-size:var(--text-13); } .compare-toggle input{ width:18px; height:18px; margin:0; accent-color:var(--color-primary); } .catalog-card .btn{ display:flex; width:100%; min-height:var(--control-height); align-items:center; justify-content:center; margin-top:var(--space-2); padding:0 var(--space-3); font-size:var(--text-13); text-decoration:none; } .product-detail-link{ border-color:var(--color-border-strong); background:var(--color-surface); color:var(--color-primary); } .catalog-card .stamp{ margin-top:var(--space-3); color:var(--color-text-muted); font-size:var(--text-11); line-height:var(--leading-normal); text-align:center; } .product-placeholder{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto; align-content:center; column-gap:var(--space-3); padding:var(--space-5); background:var(--color-bg-subtle); color:var(--color-text-muted); text-align:left; } .product-placeholder .placeholder-icon{ grid-row:1/4; align-self:center; width:56px; height:56px; color:var(--color-primary); } .product-placeholder .placeholder-icon svg{ display:block; width:100%; height:100%; } .product-placeholder strong{ color:var(--color-text); font-size:var(--text-12); font-weight:var(--weight-bold); letter-spacing:.06em; text-transform:uppercase; } .product-placeholder small{ overflow-wrap:anywhere; color:var(--color-text); font-size:var(--text-13); font-weight:var(--weight-semibold); line-height:var(--leading-snug); } .product-placeholder em{ color:var(--color-text-muted); font-size:var(--text-11); font-style:normal; } .data-quality{ display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-3); color:var(--color-text-muted); font-size:var(--text-12); font-weight:var(--weight-semibold); } .data-quality progress{ width:62px; height:6px; overflow:hidden; border:0; border-radius:var(--radius-pill); background:var(--color-neutral-soft); } .data-quality progress::-webkit-progress-bar{ background:var(--color-neutral-soft); } .data-quality progress::-webkit-progress-value{ background:var(--color-primary); } .data-quality progress::-moz-progress-bar{ background:var(--color-primary); } .catalog-more-wrap{ margin-top:var(--space-6); text-align:center; } .catalog-more-wrap[hidden]{ display:none; } .catalog-more-wrap .btn{ min-width:230px; } .table-scroll{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--color-border); border-radius:var(--radius-md); } .table-scroll table{ width:100%; margin:0; border:0; border-collapse:collapse; background:var(--color-surface); box-shadow:none; } .table-scroll th, .table-scroll td{ padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); color:var(--color-text); font-size:var(--text-12); text-align:left; vertical-align:top; white-space:nowrap; } .table-scroll thead th{ background:var(--color-bg-subtle); color:var(--color-text-muted); font-size:var(--text-11); letter-spacing:.05em; text-transform:uppercase; } .table-scroll tbody tr:last-child>*{ border-bottom:0; } .table-scroll a{ color:var(--color-primary); font-weight:var(--weight-semibold); } .compare-tray{ position:fixed; z-index:var(--z-drawer); bottom:var(--space-5); left:50%; width:min(760px,calc(100% - 32px)); padding:var(--space-3); transform:translateX(-50%); border:1px solid var(--color-border-strong); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-lg); } .compare-tray[hidden]{ display:none; } .compare-tray-inner{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:var(--space-2); align-items:center; } .compare-tray strong, .compare-tray span{ display:block; } .compare-tray strong{ font-size:var(--text-13); } .compare-tray span{ overflow:hidden; color:var(--color-text-muted); font-size:var(--text-11); text-overflow:ellipsis; white-space:nowrap; } .compare-tray button{ min-height:var(--control-height); padding:0 var(--space-3); border:1px solid var(--color-border-strong); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font:inherit; font-size:var(--text-13); font-weight:var(--weight-semibold); cursor:pointer; } .compare-tray .compare-open{ border-color:var(--color-navy); background:var(--color-navy); color:var(--color-primary-contrast); } .compare-open:disabled{ opacity:.45; cursor:not-allowed; } .comparison-dialog{ width:min(1080px,calc(100% - 32px)); max-height:min(880px,calc(100dvh - 32px)); overflow:hidden; padding:0; border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-lg); } /* Dialoge dürfen auf kleinen Viewports nie unter Browserleisten oder Safe-Areas verschwinden. Diese Basis gilt auch für Alarm-, Kontakt- und Vergleichsdialoge, deren Inhalte aus Seiten-CSS stammen. */ dialog[open]:not(.comparison-dialog){ max-width:calc(100vw - 2 * var(--space-4)); max-height:calc(100dvh - 2 * var(--space-4) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .comparison-dialog::backdrop{ background:color-mix(in srgb,var(--color-navy) 72%,transparent); backdrop-filter:blur(4px); } .comparison-dialog-head{ display:flex; position:sticky; z-index:3; top:0; align-items:flex-start; justify-content:space-between; gap:var(--space-6); padding:var(--space-6); border-bottom:1px solid var(--color-border); background:color-mix(in srgb,var(--color-surface) 94%,transparent); backdrop-filter:blur(14px); } .comparison-dialog-kicker{ display:block; margin-bottom:var(--space-1); color:var(--world-accent,var(--color-primary)); font-size:var(--text-11); font-weight:var(--weight-bold); letter-spacing:.1em; text-transform:uppercase; } .comparison-dialog-head h2{ margin:0; font-size:clamp(1.35rem,2.5vw,2rem); line-height:1.08; } .comparison-dialog-intro{ max-width:68ch; margin:var(--space-2) 0 0; color:var(--color-text-muted); font-size:var(--text-14); line-height:1.55; } .comparison-dialog-close{ display:grid; flex:0 0 44px; width:44px; height:44px; padding:0; border:1px solid var(--color-border); border-radius:50%; background:var(--color-surface-muted); color:var(--color-text); place-items:center; cursor:pointer; } .comparison-dialog-close:hover{ border-color:var(--world-accent,var(--color-primary)); color:var(--world-accent,var(--color-primary)); } .comparison-dialog-close svg{ width:20px; height:20px; } .comparison-dialog-close path{ stroke:currentColor; stroke-width:1.8; stroke-linecap:round; } .comparison-dialog-body{ max-height:calc(min(880px,100dvh - 32px) - 126px); overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .comparison-product-grid{ display:grid; grid-template-columns:repeat(var(--comparison-columns,3),minmax(0,1fr)); border-bottom:1px solid var(--color-border); } .comparison-product-grid[data-count="2"]{--comparison-columns:2} .comparison-product-grid[data-count="3"]{--comparison-columns:3} .comparison-product{ display:flex; min-width:0; flex-direction:column; padding:var(--space-5); background:var(--color-surface); } .comparison-product+.comparison-product{ border-left:1px solid var(--color-border); } .comparison-product-media{ position:relative; overflow:hidden; width:100%; aspect-ratio:16/10; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-muted); } .comparison-product-media .product-visual, .comparison-product-media .catalog-image-frame{ width:100%; height:100%; min-height:0; border:0; border-radius:0; background:transparent; } .comparison-product-media img{ display:block; width:100%; height:100%; padding:var(--space-3); object-fit:contain; object-position:center; transition:transform var(--duration-normal) var(--ease-out); } .comparison-product-media img.fit-cover{ padding:0; object-fit:cover; } .comparison-product-media>div:not([hidden]){ display:grid; width:100%; height:100%; place-items:center; } .comparison-product-media .product-placeholder{ min-height:0; border:0; background:transparent; } .comparison-product-fallback[hidden], .comparison-product-media>div[hidden]{ display:none; } .comparison-product:hover .comparison-product-media img{ transform:scale(1.035); } .comparison-product-fallback, .comparison-product-media .product-visual-fallback{ display:grid; width:100%; height:100%; color:var(--world-accent,var(--color-primary)); font-size:2rem; font-weight:var(--weight-bold); place-items:center; } .comparison-product-copy{ display:flex; flex:1; min-width:0; flex-direction:column; align-items:flex-start; padding-top:var(--space-4); } .comparison-product-type{ color:var(--world-accent,var(--color-primary)); font-size:var(--text-11); font-weight:var(--weight-bold); letter-spacing:.07em; text-transform:uppercase; } .comparison-product-copy h3{ margin:var(--space-1) 0 0; font-size:clamp(1rem,1.8vw,1.2rem); line-height:1.25; } .comparison-product-copy p{ margin:var(--space-2) 0 var(--space-4); color:var(--color-text-muted); font-size:var(--text-13); line-height:1.5; } .comparison-product-link{ width:100%; margin-top:auto; justify-content:space-between; } .comparison-table-section{ padding:var(--space-6); background:var(--color-surface-muted); } .comparison-table-heading{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-3); } .comparison-table-heading h3{ margin:0; font-size:var(--text-lg); } .comparison-table-heading span{ color:var(--color-text-muted); font-size:var(--text-12); } .comparison-table-scroll{ overflow:auto; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); -webkit-overflow-scrolling:touch; } .comparison-table-scroll table{ width:100%; min-width:680px; border-collapse:separate; border-spacing:0; } .comparison-table-scroll th, .comparison-table-scroll td{ padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); text-align:left; font-size:var(--text-13); line-height:1.45; vertical-align:top; } .comparison-table-scroll tr:last-child th, .comparison-table-scroll tr:last-child td{ border-bottom:0; } .comparison-table-scroll thead th{ position:sticky; z-index:1; top:0; background:var(--color-surface-muted); font-size:var(--text-12); } .comparison-table-scroll th:first-child{ position:sticky; z-index:2; left:0; width:170px; background:var(--color-surface-muted); color:var(--color-text-muted); } .comparison-value-missing{ color:var(--color-text-subtle); font-style:italic; } @media(max-width:720px){ .comparison-dialog{ width:calc(100% - 16px); max-height:calc(100dvh - 16px); border-radius:var(--radius-lg); } .comparison-dialog-head{ gap:var(--space-3); padding:var(--space-4); } .comparison-dialog-intro{ font-size:var(--text-13); } .comparison-dialog-body{ max-height:calc(100dvh - 126px); } .comparison-product-grid{ display:flex; overflow-x:auto; padding:var(--space-3); gap:var(--space-3); scroll-padding-inline:var(--space-3); scroll-snap-type:x mandatory; scrollbar-width:thin; } .comparison-product{ flex:0 0 min(82vw,320px); padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); scroll-snap-align:start; } .comparison-product+.comparison-product{ border-left:1px solid var(--color-border); } .comparison-product-media{ aspect-ratio:4/3; } .comparison-table-section{ padding:var(--space-4); } .comparison-table-scroll table{ min-width:620px; } } .cta-box{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding:var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-primary-soft); } .cta-box>div{ max-width:760px; } .cta-box .cta-title{ display:block; color:var(--color-text); font-size:var(--text-lg); } .cta-box p{ margin:var(--space-2) 0 0; color:var(--color-text-muted); } .cta-box .btn{ flex:0 0 auto; } .seo-product-directory{ padding:var(--space-7); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); } .seo-product-directory>h2{ margin-top:0; } .seo-product-directory>p{ max-width:820px; color:var(--color-text-muted); } .directory-link{ min-height:var(--control-height); padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); text-decoration:none; transition:border-color var(--transition-base),background var(--transition-base); } .directory-link:hover, .directory-link:focus-visible{ border-color:var(--color-primary); background:var(--color-primary-soft); outline:none; } .directory-link b{ font-size:var(--text-13); } .directory-link span{ color:var(--color-text-muted); font-size:var(--text-12); } /* FAQ / Disclosure stack A single component for product pages, guides, news and landing pages. */ :is(.product-faq,.hp-faq,.hp-guide-faq,.faq-section,.home-faq-section,.collection-faq){ scroll-margin-top:calc(var(--header-height,72px) + var(--space-6)); } :is(.product-faq,.hp-faq,.hp-guide-faq,.faq-section,.home-faq-section,.collection-faq) > :is(.page-kicker,.product-kicker){ display:inline-flex; align-items:center; gap:var(--space-2); margin:0; color:var(--world-accent,var(--color-primary)); font-size:var(--text-11); font-weight:var(--weight-extrabold); line-height:var(--leading-snug); letter-spacing:.12em; text-transform:uppercase; } :is(.product-faq,.hp-faq,.hp-guide-faq,.faq-section,.home-faq-section,.collection-faq) > h2{ max-width:24ch; margin:var(--space-2) 0 var(--space-5); color:var(--color-text); font-size:clamp(var(--text-2xl),3vw,2.4rem); line-height:var(--leading-tight); letter-spacing:-.04em; } .faq-stack{ display:grid; gap:var(--space-3); width:100%; } :is(section,div).faq-stack > details{ margin:0; padding:0; overflow:clip; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:none; transition: border-color var(--transition-base), background-color var(--transition-base); } :is(section,div).faq-stack > details:hover{ border-color:color-mix(in srgb,var(--world-accent,var(--color-primary)) 35%,var(--color-border)); } :is(section,div).faq-stack > details[open]{ border-color:color-mix(in srgb,var(--world-accent,var(--color-primary)) 42%,var(--color-border)); background:color-mix(in srgb,var(--world-accent-soft,var(--world-soft,var(--color-primary-soft))) 34%,var(--color-surface)); } :is(section,div).faq-stack > details > summary{ position:relative; display:flex; align-items:center; min-height:64px; padding:var(--space-4) 60px var(--space-4) var(--space-5); list-style:none; color:var(--color-text); font-size:var(--text-16); font-weight:var(--weight-bold); line-height:var(--leading-snug); cursor:pointer; } :is(section,div).faq-stack > details > summary::-webkit-details-marker{ display:none; } :is(section,div).faq-stack > details > summary::marker{ content:""; } :is(section,div).faq-stack > details > summary::after{ content:""; position:absolute; top:50%; right:var(--space-5); width:28px; height:28px; border-radius:var(--radius-sm); background: linear-gradient(currentColor,currentColor) center/12px 2px no-repeat, linear-gradient(currentColor,currentColor) center/2px 12px no-repeat, var(--world-accent-soft,var(--world-soft,var(--color-primary-soft))); color:var(--world-accent,var(--color-primary)); transform:translateY(-50%); transition:background-size var(--transition-fast),transform var(--transition-fast); } :is(section,div).faq-stack > details[open] > summary::after{ background-size:12px 2px,2px 0,var(--world-accent-soft,var(--world-soft,var(--color-primary-soft))); } :is(section,div).faq-stack > details > summary:focus-visible{ outline:3px solid color-mix(in srgb,var(--world-accent,var(--color-primary)) 30%,transparent); outline-offset:-3px; } :is(section,div).faq-stack > details > :not(summary){ max-width:75ch; margin:0; padding:0 var(--space-5) var(--space-5); color:var(--color-text-muted); font-size:var(--text-15); line-height:var(--leading-relaxed); } @media(max-width:640px){ :is(.product-faq,.hp-faq,.hp-guide-faq,.faq-section,.home-faq-section,.collection-faq) > h2{ margin-bottom:var(--space-4); font-size:clamp(var(--text-xl),8vw,var(--text-3xl)); } .faq-stack{ gap:var(--space-2); } :is(section,div).faq-stack > details > summary{ min-height:58px; padding:var(--space-4) 52px var(--space-4) var(--space-4); font-size:var(--text-15); } :is(section,div).faq-stack > details > summary::after{ right:var(--space-4); width:26px; height:26px; } :is(section,div).faq-stack > details > :not(summary){ padding:0 var(--space-4) var(--space-4); font-size:var(--text-14); } } .note{ margin:0; color:var(--color-text-muted); font-size:var(--text-12); line-height:var(--leading-normal); } /* Optionale AdSense-Flächen. Ohne zentral konfigurierte Slot-ID wird kein Element erzeugt; dadurch entstehen weder Leerraum noch Layoutsprünge. */ .adsense-placement{ width:min(100%,var(--content-max,1200px)); min-height:120px; margin:var(--space-8) auto; padding:var(--space-3); display:grid; align-content:center; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-subtle); overflow:hidden; contain:layout paint; } .adsense-placement-label{ display:block; margin-block-end:var(--space-2); color:var(--color-text-muted); font-size:var(--text-11); line-height:1; letter-spacing:.08em; text-align:center; text-transform:uppercase; } .adsense-placement .adsbygoogle{ min-height:90px; } @media(max-width:640px){ .adsense-placement{ min-height:112px; margin-block:var(--space-6); border-radius:var(--radius-md); } .adsense-placement .adsbygoogle{ min-height:82px; } } @media(max-width:760px){ .catalog-trust-row{ grid-template-columns:1fr; } .catalog-filter-actions{ flex-direction:column-reverse; } .catalog-filter-actions .btn{ width:100%; } .type-guide article+article{ border-top:1px solid var(--color-border); border-left:0; } .catalog-head{ align-items:flex-start; flex-direction:column; } .compare-tray-inner{ grid-template-columns:1fr auto; } .compare-tray-copy{ grid-column:1/-1; } .cta-box{ align-items:flex-start; flex-direction:column; } } @media(max-width:520px){ dialog[open]:not(.comparison-dialog){ width:calc(100vw - 2 * var(--space-3)); max-width:none; margin-block:max(var(--space-3),env(safe-area-inset-top)); } .catalog-filters{ padding:var(--space-4); } .catalog-card .body{ padding:var(--space-4); } .catalog-card h3{ min-height:0; } .tech-details dl>div{ grid-template-columns:1fr; gap:var(--space-1); } .decision-card{ grid-template-columns:78px minmax(0,1fr); } .decision-image{ width:78px; height:78px; } .comparison-paths .type-switches{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; } .comparison-paths .type-switch{ justify-content:center; padding:var(--space-2); border-right:1px solid var(--color-border); } .comparison-paths .type-switch:nth-child(2n){ border-right:0; } .comparison-paths .type-switch:nth-child(-n+2){ border-bottom:1px solid var(--color-border); } .seo-product-directory{ padding:var(--space-5); } } /* Shared motion language: quiet, progressive and layout-stable. */ :where( .catalog-card .visual, .decision-image, .hp-card-image, .hp-compare-card .hp-card-image, .hp-hero-media, .hp-product-image, .product-visual, .product-stage-photo, .product-related-card, .hp-related, .variant-card, .reel-card, .amazon-product, .ebay-product ){ overflow:hidden; } :where( .catalog-card .visual img, .decision-image img, .hp-card-image img, .hp-compare-card img, .hp-hero-media img, .hp-product-image img, .product-visual img, .product-stage-photo img, .product-related-card img, .hp-related img, .variant-card img, .reel-card img, .amazon-product img, .ebay-product img ){ transform:scale(1); transform-origin:center; transition:transform var(--transition-slow); } @media(hover:hover) and (pointer:fine){ :where( .catalog-card:hover .visual img, .decision-card:hover .decision-image img, .hp-card:hover .hp-card-image img, .hp-compare-card:hover img, .hp-hero-media:hover img, .hp-product-image:hover img, .product-visual:hover img, .product-stage-photo:hover img, .product-related-card:hover img, .hp-related:hover img, .variant-card:hover img, .reel-card:hover img, .amazon-product:hover img, .ebay-product:hover img ){ transform:scale(1.04); } } .is-motion-ready{ opacity:0; translate:0 var(--space-3); transition: opacity var(--transition-slow), translate var(--transition-slow); } .is-motion-ready:nth-child(2){ transition-delay:40ms; } .is-motion-ready:nth-child(3){ transition-delay:80ms; } .is-motion-ready:nth-child(n+4){ transition-delay:120ms; } .is-motion-ready.is-motion-visible{ opacity:1; translate:0 0; } @media(prefers-reduced-motion:reduce){ :where( .catalog-card .visual img, .decision-image img, .hp-card-image img, .hp-compare-card img, .hp-hero-media img, .hp-product-image img, .product-visual img, .product-stage-photo img, .product-related-card img, .hp-related img, .variant-card img, .reel-card img, .amazon-product img, .ebay-product img ){ transform:none; transition:none; } .is-motion-ready, .is-motion-ready.is-motion-visible{ opacity:1; translate:none; transition:none; } } /* Standort-Erstzustand und belastbare Alternative: dieselbe Komponente kann spaeter in weiteren Produktwelten wiederverwendet werden. */ .availability-recommendation { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); } .availability-recommendation[hidden] { display: none; } .availability-recommendation > img { width: 128px; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--radius-sm); background: var(--color-bg-subtle); } .availability-recommendation-copy { min-width: 0; } .availability-recommendation-label { display: block; margin-bottom: var(--space-1); color: var(--color-primary); font-size: var(--text-12); font-weight: var(--weight-bold); } .availability-recommendation h3 { margin: 0; color: var(--color-text); font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: -.02em; } .availability-recommendation p { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-14); line-height: var(--leading-normal); } .availability-recommendation .btn { white-space: nowrap; } @media (max-width: 760px) { .availability-recommendation { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-3); } .availability-recommendation > img { width: 88px; } .availability-recommendation h3 { font-size: var(--text-lg); } .availability-recommendation .btn { grid-column: 1 / -1; width: 100%; } } /* Form guidance and completion states are shared by dialog-style forms. */ .field-hint { margin: var(--space-2) 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-14); line-height: var(--leading-normal); } .form-success { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-4) var(--space-2); text-align: center; } .form-success[hidden] { display: none; } .form-success__icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: var(--radius-pill); color: var(--color-success); background: var(--color-success-soft); } .form-success__icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; } .form-success h4, .form-success p { margin: 0; } .form-success h4 { color: var(--color-text); font-size: var(--text-xl); line-height: var(--leading-tight); } .form-success p { max-width: 42ch; color: var(--color-text-muted); font-size: var(--text-14); line-height: var(--leading-normal); } .form-success .btn { min-width: 160px; margin-top: var(--space-2); }