/* ===================================================================== Bilanzo Branding: geclipste Ecken (bevel) statt abgerundete Ecken. Sitewide via functions.php enqueued (Handle: bilanzo-clipped). Technik: corner-shape:bevel wirkt auf den vorhandenen border-radius, Borders/Box-Shadows/Focus-Ringe bleiben dadurch intakt. Browser ohne corner-shape-Support zeigen weiterhin runde Ecken. Ausnahmen: Mac-Fensterrahmen des Hero-Mockups (.hv-card, Mac-Look), echte Kreise/Dots, Progress-Bars, Toggles. Der Dashboard-Inhalt im Mockup und der Floating-Badge sind seit 2026-08-02 geclipst. ===================================================================== */ @supports (corner-shape: bevel) { /* Basis: alles mit border-radius bekommt geclipste Ecken */ *, *::before, *::after { corner-shape: bevel; } /* ---- AUSNAHME 1: Hero-App-Mockup Startseite ---- Nur der Mac-Fensterrahmen bleibt rund (Mac-Look), der Dashboard-Inhalt darin und der Floating-Badge werden geclipst (User-Vorgabe 2026-08-02). */ .hero-visual .hv-card { corner-shape: round; } /* ---- AUSNAHME 2: echte Kreise / Dots / runde Icons bleiben rund ---- */ [class*="dot"], [class*="-dot"], [class*="Dot"], [class*="dot"]::before, [class*="dot"]::after, .status-dot::after, .setup-num-wrap, .learning-icon, .hw-flow-num, .hw-bundle-list li::before, .aff-benefits li::before, .tk-ic, .bfc-perks .ic, .aias-core-ring, .aias-core-inner, .local-fact::before, .wc-block-components-checkout-step__heading-content::before, .wc-block-components-order-summary-item__quantity, input[type="radio"], input[type="checkbox"], #jiraChatToggleBtn, .jira-chat-float-btn, .cmplz-cookiebanner input + label::before, .cmplz-cookiebanner input + label::after, .cmplz-banner-slider label::before, .cmplz-banner-slider label::after { corner-shape: round; } /* ---- AUSNAHME 3: Deko-Glows (grosse radiale Verlaeufe) bleiben rund ---- */ .demo-card::after, .security::after, .final-cta-card::before { corner-shape: round; } /* ---- AUSNAHME 4: Progress-Bars / schmale Tracks bleiben rund ---- */ .tk-bar, .tk-bar span, .history-bar .bar, .nav-hamburger span, .hv-legend-item::before, .setup-steps::before { corner-shape: round; } /* ---- Pills/Badges: Cut normalisieren, sonst entstehen Spitz-Hexagone (999px-Radius wuerde als Bevel auf halbe Hoehe clampen) ---- */ .status-badge, .demo-status, .plan-badge, .partner-seal-sub, .hw-platform-tag, .hw-featured-tag, .gpu-card-use, .fw-rec-badge, .fw-tag, .aff-card-badge, .bz-trial-badge, .woocommerce-orders-table__cell-order-status .woocommerce-order-status, .overall-badge, .svc-badge, .hc-cat-pill, .hc-article-tag, .aias-pill, .showreel-screenshot-badge, .bfc-badge, .hv-float-badge, .demo-scope-chip { border-radius: 8px !important; } /* Mini-Chip im Mockup: 4px, sonst wird der Bevel bei ~16px Hoehe hexagonal */ .hv-ai-chip { border-radius: 4px !important; } .hc-search { border-radius: 10px !important; } } /* ===================================================================== FALLBACK fuer Browser OHNE corner-shape (Firefox, Safari, Chrome <139). Technik: clip-path-Polygon schneidet die 4 Ecken schraeg ab. Bewusst gezielte Selektoren statt "*": clip-path clippt auch Kinder und wuerde sonst Dropdowns, Tooltips und Sticky-Nav abschneiden. Trade-off: an der Schraege laeuft kein Rahmen mit, Box-Shadows werden weggeclippt. Deshalb Cut klein halten. User-Vorgabe 2026-08-05: eckig hat Vorrang vor Schatten. ===================================================================== */ @supports not (corner-shape: bevel) { /* Cut-Groessen passend zu den Radius-Stufen (--r-md/-lg/-xl) */ :root { --bz-cut-sm: 6px; --bz-cut-md: 8px; --bz-cut-lg: 12px; } /* --- klein: Buttons, Inputs, Chips, Nav-Elemente, Badges --- */ .btn, .btn-primary, .btn-outline, .btn-white, .btn-ghost-white, .nav-signin, .nav-hamburger, .mob-close, .mob-nav-link, .mob-nav-sub, .nav-more-dropdown, .billing-option, .platform-tab, .demo-tab, .status-badge, .demo-status, .plan-badge, .partner-seal-sub, .hw-platform-tag, .hw-featured-tag, .gpu-card-use, .fw-rec-badge, .fw-tag, .aff-card-badge, .bz-trial-badge, .overall-badge, .svc-badge, .hc-cat-pill, .hc-article-tag, .aias-pill, .showreel-screenshot-badge, .bfc-badge, .tk-btn, .hv-float-badge, .hv-ai-chip, .hv-tx-ico, .hv-kpi, .hv-chart-area, .hv-ai, .hv-btn-scan, .hv-tx-list, .blz-tp-tier-badge, .blz-lp-form-submit, .blz-copy-btn, .blz-save-btn, .hc-search, .hw-link, .dl-includes, .feat-icon, .hc-article-icon, .woocommerce-orders-table__cell-order-status .woocommerce-order-status, .woocommerce .form-row input.input-text, .woocommerce .form-row select, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-MyAccount-navigation ul li a, .wc-block-components-text-input input, .wc-block-components-checkout-place-order-button, .bfc-form input, .bfc-form textarea, .bfc-btn, .blz-lp-form input, .blz-lp-form textarea { clip-path: polygon( var(--bz-cut-sm) 0, calc(100% - var(--bz-cut-sm)) 0, 100% var(--bz-cut-sm), 100% calc(100% - var(--bz-cut-sm)), calc(100% - var(--bz-cut-sm)) 100%, var(--bz-cut-sm) 100%, 0 calc(100% - var(--bz-cut-sm)), 0 var(--bz-cut-sm) ); border-radius: 0 !important; } /* --- mittel: Panels, Listen-Karten, Hinweisboxen --- */ .demo-pane, .metric-icon, .metrics-grid, .learning-note, .hardware-addon, .partner-seal, .hw-info-strip, .hw-decide, .hw-cloud, .hw-cloud-warn, .platform-tabs, .billing-toggle, .dl-card, .int-card, .hc-article, .ai-visual, .ai-chat-bubble, .local-badge, .cmp-wrap, .bcmp-scroll, .article-thumb, .prose pre, .prose img, .post-card, .blog-pagination a, .bz-stat-card, .bz-account-content, .woocommerce-MyAccount-navigation, .woocommerce-Addresses .woocommerce-Address, .woocommerce-EditAccountForm fieldset, .woocommerce-orders-table, .woocommerce table.shop_table, .wc-block-components-order-summary, .wc-block-components-radio-control__option, .blz-tp-card, .blz-metric, .blz-aff-section, .blz-ref-box, .bilanzo-register-form { clip-path: polygon( var(--bz-cut-md) 0, calc(100% - var(--bz-cut-md)) 0, 100% var(--bz-cut-md), 100% calc(100% - var(--bz-cut-md)), calc(100% - var(--bz-cut-md)) 100%, var(--bz-cut-md) 100%, 0 calc(100% - var(--bz-cut-md)), 0 var(--bz-cut-md) ); border-radius: 0 !important; } /* --- gross: Haupt-Karten und Sektions-Panels (--r-xl) --- */ .plan, .tk-panel, .demo-card, .final-cta-card, .security-grid, .hw-card, .gpu-card, .fw-card, .aff-card, .feat-grid, .bz-account-hero, .blz-tp-tier, .blz-metal-card, .blz-aff-header, .bfc-card, .blz-lp-plan, .blz-lp-form-wrap { clip-path: polygon( var(--bz-cut-lg) 0, calc(100% - var(--bz-cut-lg)) 0, 100% var(--bz-cut-lg), 100% calc(100% - var(--bz-cut-lg)), calc(100% - var(--bz-cut-lg)) 100%, var(--bz-cut-lg) 100%, 0 calc(100% - var(--bz-cut-lg)), 0 var(--bz-cut-lg) ); border-radius: 0 !important; } /* Pills muessen auch hier auf kleinen Radius, sonst Kapsel unter dem Cut */ .status-badge, .demo-status, .plan-badge, .partner-seal-sub, .hw-platform-tag, .hw-featured-tag, .gpu-card-use, .fw-rec-badge, .fw-tag, .aff-card-badge, .bz-trial-badge, .overall-badge, .svc-badge, .hc-cat-pill, .hc-article-tag, .aias-pill, .showreel-screenshot-badge, .bfc-badge, .blz-tp-tier-badge, .blz-aff-status, .woocommerce-orders-table__cell-order-status .woocommerce-order-status { border-radius: 0 !important; } .hc-search { border-radius: 0 !important; } /* Kreise/Dots/Progress bleiben rund: NICHT clippen (kein Selektor oben), zusaetzlich sicherstellen dass nichts geerbt wird. */ [class*="dot"], .setup-num-wrap, .learning-icon, .hw-flow-num, .tk-ic, .bfc-perks .ic, .tk-bar, .tk-bar span, .aias-core-ring, .aias-core-inner, #jiraChatToggleBtn, .jira-chat-float-btn, .hero-visual .hv-card, .hero-visual .hv-bar, .hero-visual .hv-legend-item::before { clip-path: none !important; } /* Badge im Hero: Kapsel-Radius weg, sonst laeuft der Cut ins Leere */ .hv-float-badge { border-radius: 0 !important; } }