/* ============================================================ b:work – Startseite v2 (Neukonzept nach check24-Muster) ------------------------------------------------------------ Eigenständiges, vom Bestand entkoppeltes Komponentenset. Alles unter .bwork-s2-* namespaced → keine Kollision mit den Live-Patterns. Nutzt ausschliesslich die bestehenden CI-Tokens (--c-primary #190023, --c-accent #f0f55f, --c-focus #c534ff, --c-warm, --c-text, --c-muted, --c-outline). KEINE neuen Farben. Sektions-Rahmen (Padding, H2-Skala, .roofline, .bwork-lead, .bwork-ic, .bwork-stats, .bwork-faq, .bwork-quiz, .wp-block-button) kommen aus bwork.css und werden hier NUR ergänzt. ============================================================ */ /* ---------- Editions-Pills (CE / Pro) ---------- */ .bwork-s2-pill{ display:inline-block; font-size:.66rem; font-weight:700; line-height:1; padding:.28rem .5rem; border-radius:999px; letter-spacing:.03em; text-transform:uppercase; vertical-align:middle; } .bwork-s2-pill.is-ce{ background:rgba(51,133,46,.12); color:#33852e; } /* success-grün */ .bwork-s2-pill.is-pro{ background:rgba(197,52,255,.14); color:var(--c-focus); } /* focus-lila */ /* ---------- Editor-/Platzhalter-Notiz (INTERN – vor Launch entfernen) ---------- */ .bwork-s2-note{ display:flex; gap:.55rem; align-items:flex-start; margin-top:1.1rem; border:1.5px dashed var(--c-focus); background:rgba(197,52,255,.06); border-radius:10px; padding:.7rem 1rem; font-size:.82rem; line-height:1.5; color:var(--c-text); } .bwork-s2-note b{ color:var(--c-focus); } /* ---------- Hero: Sekundär-Button (Ghost) auf dunklem Grund lesbar ---------- */ /* Vollständig eigenes Styling, unabhängig vom Core-Outline-Style und den inline generierten theme.json-Button-Styles. !important, weil letztere im nach der externen CSS stehen und sonst gewinnen könnten. */ .bwork-s2-hero-ghost .wp-block-button__link, .bwork-s2-hero-ghost .wp-block-button__link.wp-element-button{ background:transparent !important; color:#fff !important; border:2px solid rgba(255,255,255,.6) !important; } .bwork-s2-hero-ghost .wp-block-button__link:hover, .bwork-s2-hero-ghost .wp-block-button__link.wp-element-button:hover{ background:rgba(255,255,255,.1) !important; border-color:#fff !important; color:#fff !important; } /* ---------- Hero-Produktbild (echte b:work-Oberfläche) ---------- */ .bwork-s2-heroimg{ margin:0; } .bwork-s2-heroimg img{ display:block; width:100%; height:auto; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); } /* ---------- E-Rechnungspflicht-Strip ---------- */ .bwork-s2-lawstrip{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; background:#fff; border:2px solid var(--c-accent); border-radius:16px; padding:1rem 1.4rem; } .bwork-s2-lawstrip__badge{ background:var(--c-primary); color:#fff; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; padding:.35rem .7rem; border-radius:999px; white-space:nowrap; } .bwork-s2-lawstrip p{ margin:0; font-size:1rem; } .bwork-s2-lawstrip p b{ color:var(--c-primary); } /* ---------- Zahlen-Anker ---------- */ .bwork-s2-anker-num{ font-size:clamp(2.6rem,7vw,4rem); font-weight:700; color:var(--c-primary); line-height:1; letter-spacing:-.02em; } .bwork-s2-anker-lbl{ font-size:1.15rem; font-weight:600; color:var(--c-primary); margin:.5rem 0 0; } .bwork-s2-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; } .bwork-s2-chip{ font-size:.8rem; font-weight:600; background:var(--c-warm); color:var(--c-primary); border:1px solid var(--c-outline); padding:.35rem .8rem; border-radius:999px; } .bwork-s2-chip.is-new{ border-color:var(--c-accent); background:var(--c-accent); } /* ---------- So funktioniert's: 3 Schritte + Bonus ---------- */ .bwork-s2-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem; } @media(max-width:760px){ .bwork-s2-steps{ grid-template-columns:1fr; } } .bwork-s2-step{ background:#fff; border:1px solid var(--c-outline); border-radius:16px; padding:1.3rem; } .bwork-s2-step__no{ font-family:ui-monospace,Consolas,monospace; font-weight:700; color:var(--c-focus); font-size:.85rem; } .bwork-s2-step h3{ font-size:1.1rem; margin:.4rem 0 .3rem; } .bwork-s2-step p{ margin:0; color:var(--c-text); opacity:.75; font-size:.92rem; } .bwork-s2-bonus{ display:flex; gap:.6rem; align-items:baseline; margin-top:1rem; background:var(--c-warm); border-radius:16px; padding:1rem 1.25rem; font-size:.95rem; } .bwork-s2-bonus b{ color:var(--c-primary); } /* ---------- Vorteile-Grid (CE/Pro) ---------- */ .bwork-s2-adv{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin-top:1.5rem; } @media(max-width:680px){ .bwork-s2-adv{ grid-template-columns:1fr; } } .bwork-s2-adv__card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-outline); border-radius:16px; padding:1.1rem 1.2rem; } .bwork-s2-adv__card strong{ display:block; margin:.5rem 0 .25rem; color:var(--c-primary); font-size:1rem; } .bwork-s2-adv__card .d{ color:var(--c-text); opacity:.75; font-size:.9rem; } /* ---------- Vorteile: hervorgehobene Differenzierer (Top 3) ---------- */ .bwork-s2-adv-featured{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem; } @media(max-width:760px){ .bwork-s2-adv-featured{ grid-template-columns:1fr; } } .bwork-s2-adv-featured__card{ background:#fff; border:1px solid var(--c-outline); border-top:4px solid var(--c-accent); border-radius:16px; padding:1.4rem; } .bwork-s2-adv-featured__card h3{ font-size:1.1rem; color:var(--c-primary); margin:.6rem 0 .3rem; } .bwork-s2-adv-featured__card p{ margin:0; color:var(--c-text); opacity:.78; font-size:.92rem; } .bwork-s2-adv-more{ margin:2rem 0 0; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--c-muted); } /* ---------- Highlight (dunkle Karten) ---------- */ .bwork-s2-hl{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.5rem; } @media(max-width:680px){ .bwork-s2-hl{ grid-template-columns:1fr; } } .bwork-s2-hl__card{ background:var(--c-primary); color:#fff; border-radius:20px; padding:1.6rem; } .bwork-s2-hl__card h3{ color:#fff; font-size:1.2rem; margin:.6rem 0 .4rem; } .bwork-s2-hl__card p{ margin:0; color:rgba(255,255,255,.8); font-size:.95rem; } .bwork-s2-hl__card .bwork-s2-pill{ background:rgba(255,255,255,.18); color:#fff; } /* ---------- Bewertungen / Trust-Platzhalter ---------- */ .bwork-s2-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem; } @media(max-width:760px){ .bwork-s2-quotes{ grid-template-columns:1fr; } } .bwork-s2-quote{ background:#fff; border:1px dashed var(--c-outline); border-radius:16px; padding:1.2rem; color:var(--c-muted); font-size:.9rem; font-style:italic; } /* ---------- Preise (2 Karten, Aktionspreis) ---------- */ .bwork-s2-prices{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin:1.75rem auto 0; max-width:56rem; } @media(max-width:680px){ .bwork-s2-prices{ grid-template-columns:1fr; } } .bwork-s2-price{ position:relative; background:#fff; border:1px solid var(--c-outline); border-radius:20px; padding:1.75rem; } .bwork-s2-price.is-featured{ border:2px solid var(--c-accent); } .bwork-s2-price__badge{ position:absolute; top:-.8rem; left:1.5rem; background:var(--c-accent); color:var(--c-primary); font-size:.72rem; font-weight:700; padding:.25rem .7rem; border-radius:999px; } .bwork-s2-price h3{ font-size:1.1rem; color:var(--c-primary); margin:0; } .bwork-s2-price__num{ font-size:2.4rem; font-weight:700; color:var(--c-primary); margin:.4rem 0 .2rem; } .bwork-s2-price__num small{ font-size:1rem; font-weight:500; opacity:.7; } .bwork-s2-price__strike{ color:var(--c-muted); text-decoration:line-through; font-size:1rem; margin-left:.4rem; } .bwork-s2-price__btn{ display:block; width:100%; text-align:center; box-sizing:border-box; padding:.85rem 1.5rem; border-radius:8px; font-weight:700; font-size:1rem; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .bwork-s2-price__btn:hover{ transform:translateY(-1px); } .bwork-s2-price__btn--primary{ background:var(--c-primary); color:#fff; } .bwork-s2-price__btn--primary:hover{ background:var(--c-focus); color:#fff; } .bwork-s2-price__btn--outline{ background:transparent; color:var(--c-primary); border:2px solid var(--c-primary); } .bwork-s2-price__btn--outline:hover{ background:var(--c-primary); color:#fff; } .bwork-s2-price ul{ list-style:none; margin:1rem 0 1.5rem; padding:0; } .bwork-s2-price li{ position:relative; padding-left:1.7rem; margin:.5rem 0; font-size:.92rem; } .bwork-s2-price li::before{ content:"check"; font-family:"Material Icons Round"; position:absolute; left:0; top:.05rem; color:var(--c-focus); font-size:1.1rem; } /* ---------- Finaler CTA: Preis-Flag ---------- */ .bwork-s2-priceflag{ display:inline-block; margin:.9rem 0 1.3rem; background:rgba(255,255,255,.12); padding:.45rem 1rem; border-radius:999px; font-size:.9rem; font-weight:600; } /* ---------- Micro-Trust unter dem Hero-CTA ---------- */ .bwork-s2-microtrust{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:1rem; font-size:.85rem; color:rgba(255,255,255,.8); } .bwork-s2-microtrust li{ display:inline-flex; align-items:center; gap:.35rem; } .bwork-s2-microtrust .material-icons-round{ font-size:16px; color:var(--c-accent); } /* ---------- Trust-/Standard-Badges (statt leerer Zitat-Kästen) ---------- */ .bwork-s2-badges{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; } .bwork-s2-badge{ display:inline-flex; align-items:center; gap:.45rem; background:#fff; border:1px solid var(--c-outline); border-radius:999px; padding:.5rem 1rem; font-size:.88rem; font-weight:600; color:var(--c-primary); } .bwork-s2-badge .material-icons-round{ font-size:18px; color:var(--c-focus); } /* ---------- Risk-Reversal (unter Pro-Button) ---------- */ .bwork-s2-risk{ display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:.7rem; font-size:.82rem; color:var(--c-text); opacity:.75; text-align:center; } .bwork-s2-risk .material-icons-round{ font-size:16px; color:var(--c-focus); } /* ---------- Zwischen-CTA (nach Schritten) ---------- */ .bwork-s2-midcta{ text-align:center; margin-top:1.75rem; } /* ---------- Quiz: Ergebnis-Screens (nutzt ansonsten .bwork-quiz-* aus bwork.css) ---------- */ .bwork-quiz-restart{ background:none; border:none; cursor:pointer; font:inherit; font-size:.85rem; color:var(--c-muted); text-decoration:underline; margin-top:.9rem; } .bwork-quiz-restart:hover{ color:var(--c-primary); }