/** * error-batch3-d5-produktionsplanung-cards.css — Error-Batch-3 · Directive 5 * * Page: /de/warenwirtschaftssystem-software/produktionsplanung-software/ (id 161641) * Component: CardPrice "JTL-Workbench" price cards (.dark-card-item__card-title). * * The card titles rendered at 40px/44px and only fit two lines because two of * them carried hand-typed hyphens ("Dispositions-produktion", "Auftragspro- * duktion"). Those hyphens are stripped in the content * (scripts/db/error-batch3-d5-produktionsplanung-hyphens.php), leaving long, * unbreakable German compounds. Here we (a) drop the display size so the words * fit the card column and (b) enable proper German auto-hyphenation * ( is present) so any compound that still needs a second * line breaks at a valid syllable boundary — a clean maximum of two lines, not * the old mid-word hyphen. * * Page-scoped to id 161641 so every other page using CardPrice is untouched * (rule 4b). Loaded after custom-clone.css by the overrides loader. */ /* The base size (40px) comes from a 5-class chain in custom-clone.css (`.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-title`). Replicate that chain and add the body-id scope so this wins on specificity (0,5,1 > 0,5,0) at page 161641 only — no !important needed. */ /* The card (.dark-card-item) is a fixed-width flex box with overflow:hidden; its inner grid/top children default to min-width:auto and so refuse to shrink below the longest word's min-content (~336px), overflowing and getting clipped by the 274px card. min-width:0 lets them collapse to the card width so the title (and the long "KERNLEISTUNGEN" feature rows) wrap inside the card instead of being cut off. Page-scoped, so no other CardPrice grid is affected. */ body.page-id-161641 .product-price-plan-section .dark-card-item__inner, body.page-id-161641 .product-price-plan-section .dark-card-item__top { min-width: 0; } body.page-id-161641 .product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-title { font-size: 30px; line-height: 36px; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; /* Fall back to a plain break only if German hyphenation offers no valid point, so the longest compound never spills out of the card. */ overflow-wrap: break-word; /* Without an explicit width the title box is shrink-to-fit: it grows to the word's min-content width (~336px) and spills past the ~274px card instead of ever hitting a wrap constraint, so hyphenation never fires. Pin it to the card's content width so the long compounds wrap to two lines. */ display: block; width: 100%; min-width: 0; box-sizing: border-box; } /* ── Fluid size across the 4-column band (992px–1399px) ───────────────────── The 30px above is only safe at >=1400px. Below that the card column keeps shrinking while the font does not, so the titles spill onto 3 and then 4 lines and the JS height-equaliser (CardPrice script.js -> dynamicallySetHeight) inflates ALL four cards to match. Measured on the clone, Firefox, with the soft-hyphen titles in place (scripts/db/produktionsplanung-card-title-hyphens.php): viewport title box "Dispositions-" @30px lines card height 1920px 243px 192.8px 2 661px 1440px 210px 192.8px 2 733px 1366px 192px 192.8px 2 (0.8px from failing) 1280px 170px 192.8px 3 793px 1200px 150px 192.8px 4 851px 992px 122px 192.8px 4 879px + overflow Below 992px the grid collapses to one column (box jumps back to 320px), so the band is closed on both sides. The box width tracks the viewport linearly in this band: boxW ~= 0.25*vw - 150 (fits the 1100/1200/1280/1366/1440 samples above to within 1px), and the longest unbreakable run is the first segment of the longest title plus its hyphen glyph. Solving "'Dispositions-' at font F fits boxW" and keeping ~5% headroom for subpixel/letter-spacing gives F = 3.7vw - 22.2px, capped at the 30px design size and floored at 16px (needed only under ~1030px, where the box stops shrinking at 122px and 16px still leaves ~19px of slack). Fluid rather than stepped: a stepped media query would re-break mid-band at whatever widths it didn't sample. This holds every width in the band by construction. line-height goes relative so it tracks the size. */ @media only screen and (min-width: 992px) and (max-width: 1399.98px) { body.page-id-161641 .product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-title { font-size: clamp(16px, calc(3.7vw - 22.2px), 30px); line-height: 1.2; } }