/* ============================================================ BILANZO TYPOGRAFIE + MOBILE-LAYOUT (sitewide) ------------------------------------------------------------ 1) Blocksatz fuer Fliesstext auf Desktop UND Mobile. 2) CTA-Buttons auf Mobile zentriert / voll breit. WARUM EINE EIGENE DATEI MIT PRIO 1001: Die Templates (front-page.php, page-*.php, single.php, home.php) tragen ihr CSS inline im VOR wp_head(). Enqueued Styles laden danach, deshalb gewinnt diese Datei bei gleicher Spezifitaet. Genau darum braucht es hier keine !important- Regeln, sondern eine saubere Ausnahmeliste. WARUM hyphens:auto ZWINGEND: Blocksatz ohne Silbentrennung reisst auf schmalen Mobile- Spalten grosse Luecken ("Fluesse") in den Text. traegt ueber language_attributes() ein lang-Attribut, damit greift die Browser-Silbentrennung. ============================================================ */ /* ── 1. BLOCKSATZ ───────────────────────────────────────────── */ p, li, .lede, .prose p, .prose li, .prose blockquote, .article-inner p, .article-inner li, .article-inner blockquote, .hc-article-body p, .hc-article-body li, .hc-faq-answer, .entry-content p, .entry-content li, .entry-content .wp-block-paragraph, .entry-content .wp-block-list li, .entry-content .wp-block-quote p, .post-content p, .post-content li, blockquote p, dd { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } /* Silbentrennung nicht zu aggressiv: keine 2-Buchstaben-Reste */ p, li, .lede, .prose p, .prose li { -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; hyphenate-limit-chars: 6 3 3; } /* ── 2. AUSNAHMEN: bewusst ZENTRIERTE Bereiche ──────────────── */ /* Diese Container setzen text-align:center im Template. Ohne diesen Block wuerde der Blocksatz das Zentrieren aushebeln, weil eine direkte Regel auf p/li die Vererbung schlaegt. */ .final-cta-card p, .final-cta-card li, .cta-section p, .cta-section li, .section-header p, .page-hero .container p, .prose > p:where(.is-centered), .blog-empty p, .hc-no-results p, .partner-seal p, .bcmp-head p, .bcmp-foot, .bcmp-foot p, .footer-bottom p, .footer-copy p, .footer-inner p, .hw-cloud-note, .hw-cloud-cta p, .hw-mobile-note, .hw-mobile-cta p, .hw-discount-note, .hw-cta-note, .tk-fine, .local-caption, .showreel-eyebrow, .showreel-title, .showreel-screenshot-caption, .blz-roi-big p, .blz-roi-cta, .demo-swipe-hint, .hv-titlebar-label, .page-status .hero p, [style*="text-align:center"] p, [style*="text-align: center"] p { text-align: center; } /* Testkunden-Landing: bleibt komplett zentriert (Kampagnen-Look) */ body.page-template .page-hero .container p, .prose h2 + p:first-of-type:where(.centered) { text-align: inherit; } /* ── 3. AUSNAHMEN: kurze UI-Texte, kein Fliesstext ──────────── */ /* Labels, Badges, Preiskarten, Nav, Tabellen, Formulare und das App-Mockup im Hero. Blocksatz erzeugt hier nur Luecken. */ .btn, .btn p, .eyebrow, .hint, .status-badge, .badge, .nav-inner p, .nav-left p, .nav-right p, .mob-nav-link, .mob-nav-sub, .mob-cta-group p, .lang-dropdown a, label, th, td, caption, figcaption, .wp-caption-text, .plan p, .plan li, .plan-feature, .plan-label, .plan-price-sub, .plan-features li, .plan-cta, .metric-cell p, .metric-value, .metric-unit, .metric-label, .hv-card p, .hv-card li, .hv-tx-row, .hv-tx-name, .hv-tx-meta, .hv-kpi p, .hv-kpi-lbl, .hv-kpi-val, .demo-tab, .demo-shot-caption, .demo-panel .demo-meta, .tk-ic, .tk-sub p, .blz-roi-lab, .blz-roi-field, .blz-roi-assume, .blz-roi-year, .billing-option, .billing-toggle p, .footer-head, .footer-tag, .footer-links li, pre, code, kbd, samp, pre p, .wc-block-components-totals-item, .wc-block-components-order-summary-item p, .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce form .form-row p, .bzs-btn, .bzs-table td, .bzs-table th, .bzs-meta, .gt_float_switcher, .gtranslate-wrapper p, /* uebernommen aus dem frueheren Inline-Block bilanzo-justify */ .blog-card-excerpt, .post-card-excerpt, .auth-subtitle, .svc-desc, .page-eyebrow, .blog-hero-eyebrow, .hero-sub, .overall-badge { text-align: left; -webkit-hyphens: manual; hyphens: manual; } /* Alles innerhalb eines Buttons bleibt mittig, nie Blocksatz */ .btn, a.btn, button.btn, .btn-primary, .btn-outline, .btn-white, .btn-ghost-white, .plan-cta, .tk-btn, .nav-btn { text-align: center; } /* ── 4. MOBILE: CTA-Buttons zentriert und voll breit ────────── */ @media (max-width: 640px) { /* Button-Reihen: untereinander statt nebeneinander, auf volle Spaltenbreite gezogen und mittig ausgerichtet. */ .hero-ctas, .cta-btns, .cta-buttons, .feat-hero-cta, .hw-cta-row, .mob-cta-group, .final-cta-card .hero-ctas { display: flex; flex-direction: column; align-items: stretch; justify-content: center; width: 100%; gap: 12px; } .hero-ctas > .btn, .cta-btns > .btn, .cta-buttons > .btn, .feat-hero-cta > .btn, .hw-cta-row > .btn, .mob-cta-group > .btn, .plan-cta, .blz-roi-cta { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; /* .btn traegt sitewide white-space:nowrap; auf schmalen Screens laeuft der Text damit aus dem Button. */ white-space: normal; min-width: 0; } /* Kleingedrucktes unter den Buttons mittig statt links haengend */ .hero-ctas .hint, .cta-btns + .hint, .hw-cta-note, .hero-ctas > .hint { width: 100%; margin-left: 0; text-align: center; } /* Zentrierte Inline-Button-Reihen aus dem Markup mitnehmen */ [style*="justify-content:center"] > .btn, [style*="justify-content: center"] > .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; } /* Blocksatz auf sehr schmalen Spalten weicher: sonst reissen lange Woerter wie "Buchhaltungs-Bewertung" die Zeile auf. */ p, li, .lede, .prose p, .prose li { word-spacing: -0.01em; } }