/* BrikoScout Phase 3 – wird nur geladen, wenn ein Phase-3-Modul sichtbar ist (body.bs-p3-on). */ /* ===== Phase 3C: einheitliches Linksystem (nur redaktionelle Bereiche, nur unter body.bs-p3-links) ===== */ body.bs-p3-links{--bs-p3-ink:#1f2a24;--bs-p3-deep:#0f2419;--bs-p3-accent:#2f7f3d;--bs-p3-accent-line:rgba(47,127,61,.55);--bs-p3-chip-bg:#f3f6f2;--bs-p3-chip-border:#d9e2d7;--bs-p3-chip-hover:#e9f3e6;--bs-p3-t:120ms ease} /* Typ 1: Inline-Link im Fliesstext */ body.bs-p3-links .bs-cat-intro:not(.bs-cat-intro--with-image) .bs-cat-intro__body a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-cat-guide__block:not(.bs-cat-links) p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-cat-guide__block:not(.bs-cat-links) li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-cat-faq__a a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links #bs-plan-article .bs-plan-preview-content p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links #bs-plan-article .bs-plan-preview-content li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-pc-section p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-pc-steps li p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-pc-col li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-pc-info p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-kauf-section p.bs-kauf-text a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-kauf-sources li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .mw-intro p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .mw-step p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-brand-template p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-brand-intro p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-p3m-profile p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-p3m-page p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-p3m-page li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-p3g-sec p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-p3g-sec li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-p3g-faq p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta), body.bs-p3-links .bs-p3g-note a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta){color:var(--bs-p3-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--bs-p3-accent-line);text-decoration-thickness:1px;text-underline-offset:3px;border-bottom:0;transition:color var(--bs-p3-t),text-decoration-color var(--bs-p3-t)} body.bs-p3-links .bs-cat-intro:not(.bs-cat-intro--with-image) .bs-cat-intro__body a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-cat-guide__block:not(.bs-cat-links) p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-cat-guide__block:not(.bs-cat-links) li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-cat-faq__a a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links #bs-plan-article .bs-plan-preview-content p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links #bs-plan-article .bs-plan-preview-content li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-pc-section p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-pc-steps li p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-pc-col li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-pc-info p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-kauf-section p.bs-kauf-text a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-kauf-sources li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .mw-intro p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .mw-step p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-brand-template p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-brand-intro p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-p3m-profile p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-p3m-page p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-p3m-page li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-p3g-sec p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-p3g-sec li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-p3g-faq p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-p3g-note a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover, body.bs-p3-links .bs-cat-intro:not(.bs-cat-intro--with-image) .bs-cat-intro__body a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-cat-guide__block:not(.bs-cat-links) p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-cat-guide__block:not(.bs-cat-links) li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-cat-faq__a a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links #bs-plan-article .bs-plan-preview-content p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links #bs-plan-article .bs-plan-preview-content li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-pc-section p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-pc-steps li p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-pc-col li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-pc-info p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-kauf-section p.bs-kauf-text a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-kauf-sources li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .mw-intro p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .mw-step p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-brand-template p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-brand-intro p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3m-profile p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3m-page p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3m-page li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3g-sec p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3g-sec li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3g-faq p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3g-note a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible{color:var(--bs-p3-accent);text-decoration-color:currentColor} @media (max-width:781px){ body.bs-p3-links .bs-cat-intro--with-image .bs-cat-intro__body a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta){color:var(--bs-p3-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--bs-p3-accent-line);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--bs-p3-t),text-decoration-color var(--bs-p3-t)} body.bs-p3-links .bs-cat-intro--with-image .bs-cat-intro__body a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):hover{color:var(--bs-p3-accent);text-decoration-color:currentColor} } /* Typ 2: Chip-/Bereichslink */ body.bs-p3-links .bs-cat-links__list a, body.bs-p3-links .bs-cat-more__list a, body.bs-p3-links .bs-plan-links__chip{display:inline-flex;align-items:center;box-sizing:border-box;max-width:100%;min-height:40px;padding:8px 14px;border:1px solid var(--bs-p3-chip-border);border-radius:9px;background:var(--bs-p3-chip-bg);color:var(--bs-p3-deep);font-size:.95rem;font-weight:600;line-height:1.3;text-decoration:none;overflow-wrap:anywhere;transition:color var(--bs-p3-t),background-color var(--bs-p3-t),border-color var(--bs-p3-t)} body.bs-p3-links .bs-cat-links__list a:hover, body.bs-p3-links .bs-cat-more__list a:hover, body.bs-p3-links .bs-plan-links__chip:hover, body.bs-p3-links .bs-cat-links__list a:focus-visible, body.bs-p3-links .bs-cat-more__list a:focus-visible, body.bs-p3-links .bs-plan-links__chip:focus-visible{border-color:var(--bs-p3-accent);background:var(--bs-p3-chip-hover);color:var(--bs-p3-deep);text-decoration:none} body.bs-p3-links .bs-cat-links__item,body.bs-p3-links .bs-cat-more__list li{margin:0 0 8px} body.bs-p3-links .bs-cat-links__note,body.bs-p3-links .bs-cat-more__note{display:inline-block;margin-left:6px;vertical-align:middle} body.bs-p3-links .bs-plan-links__chips{gap:8px} body.bs-p3-links .bs-plan-links__chips li{max-width:100%} body.bs-p3-links .bs-plan-links__link:hover,body.bs-p3-links .bs-plan-links__link:focus-visible{border-color:var(--bs-p3-accent);background:var(--bs-p3-chip-hover)} body.bs-p3-links .bs-plan-links__name{color:var(--bs-p3-deep);text-decoration:none} /* Typ 3: redaktioneller CTA (zurueckhaltend, kein Shop-Button) */ body.bs-p3-links a.bs-cat-cta, body.bs-p3-links .bs-cat-intro__more a, body.bs-p3-links a.bs-p3-cta:not(.bs-p3g-next__link){display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;min-height:40px;padding:6px 0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;color:var(--bs-p3-accent)!important;font-weight:600;text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--bs-p3-t)} body.bs-p3-links a.bs-cat-cta:hover, body.bs-p3-links .bs-cat-intro__more a:hover, body.bs-p3-links a.bs-p3-cta:not(.bs-p3g-next__link):hover, body.bs-p3-links a.bs-cat-cta:focus-visible, body.bs-p3-links .bs-cat-intro__more a:focus-visible, body.bs-p3-links a.bs-p3-cta:not(.bs-p3g-next__link):focus-visible{background:none;box-shadow:none;transform:none;color:var(--bs-p3-accent)!important;text-decoration:underline!important} body.bs-p3-links .bs-cat-intro__more a::after,body.bs-p3-links a.bs-p3-cta:not(.bs-p3g-next__link)::after{content:"\2192";font-weight:600} body.bs-p3-links a.bs-cat-cta{width:auto;justify-content:flex-start} body.bs-p3-links .bs-cat-cta__arrow{font-size:1em} @media (max-width:781px){body.bs-p3-links a.bs-cat-cta{width:auto;justify-content:flex-start;min-height:44px}} /* Fokus: sichtbar, nie entfernt */ body.bs-p3-links .bs-cat-intro:not(.bs-cat-intro--with-image) .bs-cat-intro__body a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-cat-guide__block:not(.bs-cat-links) p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-cat-guide__block:not(.bs-cat-links) li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-cat-faq__a a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links #bs-plan-article .bs-plan-preview-content p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links #bs-plan-article .bs-plan-preview-content li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-pc-section p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-pc-steps li p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-pc-col li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-pc-info p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-kauf-section p.bs-kauf-text a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-kauf-sources li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .mw-intro p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .mw-step p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-brand-template p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-brand-intro p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3m-profile p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3m-page p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3m-page li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3g-sec p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3g-sec li a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3g-faq p a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-p3g-note a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-cat-intro--with-image .bs-cat-intro__body a:not([class*="bs-browser"]):not([class*="sb8-"]):not([class*="btn"]):not(.bs-p3-cta):focus-visible, body.bs-p3-links .bs-cat-links__list a:focus-visible, body.bs-p3-links .bs-cat-more__list a:focus-visible, body.bs-p3-links .bs-plan-links__chip:focus-visible, body.bs-p3-links a.bs-cat-cta:focus-visible, body.bs-p3-links .bs-cat-intro__more a:focus-visible, body.bs-p3-links a.bs-p3-cta:not(.bs-p3g-next__link):focus-visible{outline:2px solid #2f7f3d;outline-offset:2px} /* ===== Ende Phase 3C ===== */ /* ===================================================================================== Phase 3 – Hero-Strategie: bildlose Premium-Buehne (nur unter body.bs-p3-heroes, Vorschau) Reine CSS-Gestaltung: ruhiger Verlauf, feine Linien, Produktzahl als Flaeche. Keine Bilder/Icons/Emojis. ===================================================================================== */ body.bs-p3-heroes .bs-cat-stage--premium { --bsp-ink: #102016; --bsp-muted: #4a5a4f; --bsp-green: #2f7f3d; position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 12fr) minmax(0, 8fr); align-items: stretch; gap: clamp(20px, 4vw, 44px); margin: 0 0 22px; padding: clamp(26px, 3.6vw, 44px); min-height: clamp(210px, 20vw, 270px); border-radius: 18px; border: 1px solid rgba(8, 35, 19, .1); background: linear-gradient(135deg, #f9fcf6 0%, #eef6e9 58%, #e3eedc 100%); color: var(--bsp-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset; } body.bs-p3-heroes .bs-cat-stage--premium::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(47, 127, 61, .07) 0 1px, transparent 1px 26px), radial-gradient(60% 90% at 100% 0%, rgba(215, 255, 148, .35), transparent 70%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 48%, #000 100%); } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__main { display: flex; flex-direction: column; justify-content: center; min-width: 0; } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bsp-green); } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__eyebrow::before { content: ""; flex: 0 0 26px; height: 2px; border-radius: 2px; background: var(--bsp-green); } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__title { margin: 0 0 14px; font-size: clamp(2.1rem, 3.8vw, 3.1rem); line-height: 1.07; font-weight: 800; letter-spacing: -.015em; color: var(--bsp-ink); max-width: none; hyphens: manual; overflow-wrap: break-word; word-break: normal; } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__lead { margin: 0 0 16px; max-width: 34em; font-size: 1.0625rem; line-height: 1.55; color: #263629; } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__facts li { margin: 0; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(8, 35, 19, .12); background: rgba(255, 255, 255, .8); font-size: .8125rem; font-weight: 700; line-height: 1.3; color: #1d3a27; } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__art { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: 120px; padding: 18px 22px; border-radius: 14px; border: 1px solid rgba(8, 35, 19, .09); background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15)); overflow: hidden; } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__art::before { content: ""; position: absolute; right: -46px; top: -46px; width: 190px; height: 190px; border-radius: 50%; border: 1px solid rgba(47, 127, 61, .25); box-shadow: 0 0 0 22px rgba(47, 127, 61, .05), 0 0 0 44px rgba(47, 127, 61, .035); } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__art-num { position: relative; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; font-weight: 800; letter-spacing: -.02em; color: #1f5a2c; } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__art-label { position: relative; margin-top: 6px; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bsp-muted); } @media (max-width: 781px) { body.bs-p3-heroes .bs-cat-stage--premium { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 18px; min-height: 0; border-radius: 16px; } body.bs-p3-heroes .bs-cat-stage--premium::before { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%); mask-image: linear-gradient(180deg, transparent 0%, #000 70%); } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__title { font-size: clamp(1.75rem, 8vw, 2.2rem); } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__art { flex-direction: row; align-items: baseline; gap: 10px; min-height: 0; padding: 12px 16px; } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__art-num { font-size: 2rem; } body.bs-p3-heroes .bs-cat-stage--premium .bs-cat-stage__art-label { margin-top: 0; } } /* Titel mit weichen Trennstellen auch in der Bild-Buehne (Visual-Plugin) */ body.bs-p3-heroes .bs-cat-stage--visual .bs-cat-stage__title { hyphens: manual; overflow-wrap: break-word; word-break: normal; } /* Breadcrumb ueber der Premium-Buehne wie bei Split-Koepfen (Basis-CSS kommt aus dem Kategorietemplate) */ body.bs-p3-heroes .bs-cat-head--split { margin-bottom: 14px; } /* Breadcrumb der Premium-Buehne (Basis-Regeln stehen im Kategorietemplate nur fuer Seiten mit Inhalt) */ body.bs-p3-heroes .bs-cat-head--split{margin-bottom:14px} body.bs-p3-heroes .bs-cat-head--split .bs-cat-crumbs ol{margin:0;gap:2px 0;font-size:.8125rem;line-height:1.4;color:#6b776f} body.bs-p3-heroes .bs-cat-head--split .bs-cat-crumbs li+li:before{content:"";width:5px;height:5px;margin:0 9px;border-top:1.5px solid #9aa7a0;border-right:1.5px solid #9aa7a0;transform:rotate(45deg) scale(.9)} body.bs-p3-heroes .bs-cat-head--split .bs-cat-crumbs a{color:#56645a;text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s} body.bs-p3-heroes .bs-cat-head--split .bs-cat-crumbs a:hover,body.bs-p3-heroes .bs-cat-head--split .bs-cat-crumbs a:focus-visible{color:#102016;border-bottom-color:#7ed957} body.bs-p3-heroes .bs-cat-head--split .bs-cat-crumbs [aria-current] span{color:#102016;font-weight:700;background:#eef6e9;border-radius:999px;padding:3px 10px} /* ===================================================================================== Variante "Kupfer/Graphit" der bildlosen Premium-Buehne (Pilot, .bs-cat-stage--copper), Korrekturrunde Links helles, warmes Metallic-Kupfer (Champagner-Kupfer) mit ruhiger Tiefe, rechts Graphit-Kennzahlkarte. Reines CSS, keine Streifen/Muster. Aktivierung ueber die Term-Liste (bs_p3_hero_copper_terms). ===================================================================================== */ body.bs-p3-heroes .bs-cat-stage--copper { --bsc-ink: #08100b; grid-template-columns: minmax(0, 13fr) minmax(0, 7fr); align-items: stretch; min-height: clamp(220px, 20vw, 280px); border: 1px solid rgba(26, 62, 42, .45); /* Gruen-Metallic (Farbwelt 03.10.2026): Raender/oben heller, zur Mitte satter und dunkler, ohne Streifen/Muster. */ background: radial-gradient(80% 120% at 84% -18%, rgba(226, 244, 232, .55) 0%, rgba(226, 244, 232, 0) 58%), radial-gradient(70% 90% at 4% 112%, rgba(20, 58, 38, .16) 0%, rgba(20, 58, 38, 0) 62%), radial-gradient(70% 90% at 48% 52%, rgba(52, 104, 74, .34) 0%, rgba(52, 104, 74, 0) 70%), linear-gradient(122deg, #9cc4aa 0%, #78a789 38%, #6a9b7c 55%, #90bb9f 100%); position: relative; border-radius: 12px; /* Emailliertes Blechschild: feiner Metallsaum, Lacktiefe, weicher Schlagschatten */ box-shadow: 0 0 0 1px rgba(236, 250, 240, .42) inset, 0 0 0 3px rgba(22, 60, 40, .1) inset, 0 18px 26px -16px rgba(244, 253, 247, .5) inset, 0 -20px 28px -18px rgba(12, 40, 25, .42) inset, 0 1px 0 rgba(255, 255, 255, .55), 0 14px 32px rgba(18, 52, 34, .22); color: var(--bsc-ink); } /* vier Befestigungsbohrungen in den Ecken (dezent: dunkle Bohrung, heller Lichtkranz unten) */ body.bs-p3-heroes .bs-cat-stage--copper::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; -webkit-mask-image: none; mask-image: none; background: radial-gradient(circle at 50% 50%, rgba(10, 26, 17, .72) 0 2.4px, rgba(10, 26, 17, .3) 3.1px, rgba(236, 250, 240, .5) 4.3px, rgba(236, 250, 240, 0) 6px) left 14px top 14px / 16px 16px no-repeat, radial-gradient(circle at 50% 50%, rgba(10, 26, 17, .72) 0 2.4px, rgba(10, 26, 17, .3) 3.1px, rgba(236, 250, 240, .5) 4.3px, rgba(236, 250, 240, 0) 6px) right 14px top 14px / 16px 16px no-repeat, radial-gradient(circle at 50% 50%, rgba(10, 26, 17, .72) 0 2.4px, rgba(10, 26, 17, .3) 3.1px, rgba(236, 250, 240, .5) 4.3px, rgba(236, 250, 240, 0) 6px) left 14px bottom 14px / 16px 16px no-repeat, radial-gradient(circle at 50% 50%, rgba(10, 26, 17, .72) 0 2.4px, rgba(10, 26, 17, .3) 3.1px, rgba(236, 250, 240, .5) 4.3px, rgba(236, 250, 240, 0) 6px) right 14px bottom 14px / 16px 16px no-repeat; } /* feine Praegekante (eingedrueckte Linie mit Lichtkante) */ body.bs-p3-heroes .bs-cat-stage--copper::after { content: ""; position: absolute; inset: 8px; z-index: 0; pointer-events: none; border-radius: 7px; border: 1px solid rgba(18, 52, 34, .32); box-shadow: 0 0 0 1px rgba(236, 250, 240, .32), 0 1px 2px rgba(18, 52, 34, .12) inset; } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__title { color: var(--bsc-ink); } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__lead { color: #0c1610; max-width: 36em; margin-bottom: 0; } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 0; padding: 22px 26px 18px; border-radius: 16px; border: 1px solid rgba(205, 140, 92, .4); background: radial-gradient(90% 70% at 100% 0%, rgba(205, 140, 92, .15), rgba(205, 140, 92, 0) 62%), linear-gradient(152deg, #373b3f 0%, #26292c 52%, #1b1d20 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 14px 30px rgba(24, 14, 8, .26); overflow: hidden; color: #fff; } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art::before { right: -56px; top: -56px; width: 200px; height: 200px; border: 1px solid rgba(214, 152, 104, .38); box-shadow: 0 0 0 22px rgba(214, 152, 104, .05), 0 0 0 44px rgba(214, 152, 104, .03); } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 46px; height: 1px; background: linear-gradient(90deg, rgba(214, 152, 104, .6), rgba(214, 152, 104, 0)); } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art-num { position: relative; font-size: clamp(3.2rem, 5.8vw, 4.75rem); line-height: 1; font-weight: 800; letter-spacing: -.02em; color: #fff; } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art-label { position: relative; margin: 8px 0 0; font-size: .875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art-sub { position: relative; margin-top: 4px; font-size: .8125rem; font-weight: 400; letter-spacing: .02em; color: rgba(255, 255, 255, .78); } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art-brand { position: relative; margin-top: 24px; font-size: .65rem; font-weight: 400; letter-spacing: .05em; text-transform: none; color: rgba(255, 255, 255, .72); } @media (max-width: 1023px) { body.bs-p3-heroes .bs-cat-stage--copper { grid-template-columns: minmax(0, 12fr) minmax(0, 8fr); gap: 20px; } } @media (max-width: 781px) { body.bs-p3-heroes .bs-cat-stage--copper { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 32px 26px 30px; min-height: 0; } body.bs-p3-heroes .bs-cat-stage--copper::before { background-size: 14px 14px; background-position: left 8px top 8px, right 8px top 8px, left 8px bottom 8px, right 8px bottom 8px; } body.bs-p3-heroes .bs-cat-stage--copper::after { inset: 6px; } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num label" "num sub" "brand brand"; align-items: end; column-gap: 14px; row-gap: 0; padding: 14px 16px 12px; } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art::before { width: 150px; height: 150px; right: -50px; top: -62px; } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art::after { display: none; } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art-num { grid-area: num; margin: 0; padding: 0; font-size: 2.8rem; } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art-label { grid-area: label; margin: 0 0 2px; align-self: end; } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art-sub { grid-area: sub; margin: 0 0 6px; } body.bs-p3-heroes .bs-cat-stage--copper .bs-cat-stage__art-brand { grid-area: brand; margin-top: 6px; } }