/* * kkbc-overflow-2.css - no sideways scroll (finding "sideways scroll of 5 to 26 px", S9 open part), and the * RFP page buttons (finding V-017). Loaded after every other stylesheet of the theme. * kkbc-overflow-2.css REPLACES kkbc-overflow-1.css (same rules 1-7 and V-017, plus rules 8-14 for the German site). * Measured 2026-10-13 on the live pages at 390 x 844 and 768 x 1024: for each page the element was found by * hiding it and reading document.documentElement.scrollWidth again. Each rule below repairs ONE such element. * There is no overflow-x rule on html or body in this file (that would hide the defect, and break sticky bars). * * cause page (width) scrollWidth -> window * 1 .marketing h4 / p, long word About (768) 784 -> 773 * 2 .row wider than its .container About (768) 773 -> 768 * 3 .row inside .row Leadership team (390) 400 -> 390 * 4 .cst-send button pushed out of its row e-book and webinar (390) 416 -> 390 * 5 .ThankMessage h3, 80px word Thank you (390) 413 -> 390 * 6 .blog_content li a, long address blog article (390) 451 -> 390 * 7 .talk_area h3, hero h1, .join_box h4, .investment h4 German About (390, 768) 483 / 794 -> 390 / 768 * 8 .struggles_area h2 German What we do (390) 447 -> 390 * 9 .tech_right h3 German Expertise (390) 453 -> 390 * 10 .growth_right article aside h5 German Career (390) 446 -> 390 * 11 .support_right h3 German Career (768) 813 -> 768 * 12 .interested_area h3 German Contact us (390) 454 -> 390 * 13 .privacy_box h3, long word German Privacy policy (390) 409 -> 390 * 14 .SolveArea h2 German home (390) 400 -> 390 * * A later change of this file gets a new file name (kkbc-overflow-3.css): the CDN keeps a file under its old name. * No !important is used in this file. */ /* ---- 1, 7: a long word wraps inside its box ---------------------------------------------------- Old rules: responsive.css:196-197 (.marketing h4 / p, 148 px wide in the tablet column, "Communication" at 24 px is 188 px); style.css:317 (.talk_area h3, 40px), style.css:203 + responsive.css:1306 (hero h1, 45px), style.css:458 (.join_box h4), style.css:1161 (.investment h4). None sets overflow-wrap. overflow-wrap does not change the size of text that fits, so only the words that are too long break. */ .marketing_area .marketing_tab .marketing_box .marketing h4, .marketing_area .marketing_tab .marketing_box .marketing p, .talk_area h3, .privacy_breadcum figcaption h1, .join_area .join_body .join_box h4, .investment_area .investment h4 { overflow-wrap: break-word; } /* ---- 2: row wider than its container ------------------------------------------------------------- Old rule: responsive.css:673 (.join_area .join_body .container, padding 0 10px, from 551 to 768 px). Bootstrap's .row has margin -15px on each side, so the row ends 5px outside the box. Padding 15px is the width of the row margin. Below 551 px responsive.css:1345 (padding 0 20px) applies and is left alone. Logical property: right to left too. */ @media only screen and (min-width: 551px) and (max-width: 768px) { .join_area .join_body .container { padding-inline: 15px; } } /* ---- 3: a .row inside a .row ----------------------------------------------------------------------- template/leadership.php:198 opens .row inside .container, and :206 opens a second .row inside it. Each has margin -15px, so the inner one is 30px wider than the outer one. The inner row takes the outer row's width. */ .team_area .container > .row > .row { margin-inline: 0; } /* ---- 4: send button of the e-mail form ---------------------------------------------------------- Old rules: style.css:1573 (aside is a flex row with no wrap), style.css:1574 (.form-group min-width 300px, margin-right 25px) and :1579 (button, 117px). 300 + 25 + 117 is more than the 390px screen. The button goes to its own line when the row is too short; the row is not changed where it fits. */ .join_Webinar_area .join_Webinar_box aside { flex-wrap: wrap; row-gap: 15px; } /* ---- 5: thank-you title --------------------------------------------------------------------------- Old rule: style.css:1205 (.ThankMessage h3, 80px). "contacting" at 80px is wider than 350px. */ .ThankMessage h3 { overflow-wrap: break-word; } /* ---- 6: blog article, long web address in a list --------------------------------------------------- Old rule: style.css:1358 (.blog_content ul li). A link whose text is a whole address has no place to break. */ .blog_area .blog_body .blog_content ul li { overflow-wrap: anywhere; } /* ---- 8-14: a long German word in a heading wraps inside its box --------------------------------------- Measured 2026-10-13 on https://kkbcagency.de (lang="de-DE") at 390 x 844 (768 x 1024 for rule 11): the heading was hidden and document.documentElement.scrollWidth was read again; it fell to the window width each time (the Privacy policy page has several such h3, one rule covers them). Each heading holds a word wider than its box: 8 What we do .struggles_area h2 (template/what-we.php:69) 45px, "Hauptschwierigkeiten" 447 -> 390 9 Expertise .tech_right h3 (editor text inside template/expertise.php:128) 48px, "Branchenkompetenz" 453 -> 390 10 Career .growth_right article aside h5 (editor text, template/career.php:436) 24px, "Karriereentwicklungsmöglichkeiten" 446 -> 390 11 Career 768 .support_right h3 (template/career.php:195) 40px, "Gemeinschaftsengagement" 813 -> 768 12 Contact us .interested_area h3 (template/contact.php:166) 48px, "Karrieremöglichkeiten" 454 -> 390 13 Privacy .privacy_box h3 (template/privacy.php:118 and the other boxes) 34px, "Datenschutzerklärungen" 409 -> 390 14 Home .SolveArea h2 (template/Home.php:239) 48px, "Herausforderungen" 400 -> 390 Old rules (none sets overflow-wrap or hyphens): style.css:552 + responsive.css:1365 (rule 8), style.css:339 + responsive.css:1400 (9), style.css:759 + responsive.css:1643 (10), style.css:709 + custom.css:106 (11), style.css:427 + responsive.css:1519 (12), style.css:227 + responsive.css:1116 (13), style.css:870 + responsive.css:1232 (14). overflow-wrap does not change text that fits; only a word wider than the box breaks. */ .struggles_area h2, .tech_area .tech_right h3, .growth_area .growth_right article aside h5, .support_area .support_box .support_right h3, .interested_area h3, .privacy_area .privacy_right .privacy_box h3, .SolveArea h2 { overflow-wrap: break-word; } /* The same headings break a German word at a syllable and print a hyphen, which reads better than a break in the middle of a word. hyphens:auto works by the lang attribute of the page, so it is limited to German (:lang(de)): the other 53 sites keep their line breaks as they are. Where the browser has no German hyphenation list, the rule above still breaks the word and the page does not scroll sideways. */ .struggles_area h2:lang(de), .tech_area .tech_right h3:lang(de), .growth_area .growth_right article aside h5:lang(de), .support_area .support_box .support_right h3:lang(de), .interested_area h3:lang(de), .privacy_area .privacy_right .privacy_box h3:lang(de), .SolveArea h2:lang(de) { -webkit-hyphens: auto; hyphens: auto; } /* ---- V-017: /rfp/ buttons -------------------------------------------------------------------------- The page prints Contact Form 7 form 1002 inside .CardForm.rfp_form (the form is not changed). Its send button (input#SendMessage.wpcf7-submit) and its file button had the browser's grey look. The look below is copied from the site's button rule custom.css:171 (.CardForm input#Submit) and :172 (hover): border 1px solid #0D1317; background #fff; padding 9px 30px; font-weight 600; color #000; font-size 18px; border-radius 0; outline 0; hover: background #000, color #E3F2FD. The selectors are longer than custom.css:569 (input.wpcf7-submit, 20px) so this wins. */ .CardForm.rfp_form input.wpcf7-submit { border: 1px solid #0D1317; background-color: #fff; padding: 9px 30px; font-weight: 600; color: #000; font-size: 18px; border-radius: 0; outline: 0; cursor: pointer; } .CardForm.rfp_form input.wpcf7-submit:hover { background-color: #000; color: #E3F2FD; } /* The same look for the file button (its own rule: a browser that does not know ::file-selector-button drops only this one). */ .CardForm.rfp_form input[type="file"]::file-selector-button { border: 1px solid #0D1317; background-color: #fff; padding: 9px 30px; font-weight: 600; color: #000; font-size: 18px; border-radius: 0; outline: 0; cursor: pointer; } .CardForm.rfp_form input[type="file"]::file-selector-button:hover { background-color: #000; color: #E3F2FD; } /* V-017: every field is as wide as its column. Old rules: style.css:378 (.CardForm .form-control has no width; the browser's own width applies to an input that is not a block). Measured at 1440 px: fields are already 100% of their column; this keeps them so for each type of field, also after a plugin changes its box. */ .CardForm.rfp_form .row .wpcf7-form-control-wrap { display: block; width: 100%; } .CardForm.rfp_form .row .form-control { width: 100%; max-width: 100%; }