/* ============================================================ SM-TEXTUMBRUCH.CSS — V1.0 · 11.08.2026 Section Monsters · systemweite Korrektur von Textüberläufen WARUM ES DIESE DATEI GIBT Rückmeldung aus der Praxis: „bei fast allen Tools Gestaltungsfehler drin: z.B. Schriften die ausserhalb ihrer Boxen laufen, falsche Zeilenumbrüche". Nachgemessen wurde nicht im Browser, sondern im Quelltext: alle 142 CSS-Dateien wurden geparst (inklusive der Regeln in @media-Blöcken) und gegen die tatsächliche DOM-Verschachtelung aus 150 HTML-Seiten und 400+ JS-Vorlagen gehalten. Nur belegte Fundstellen stehen hier — es gibt bewusst KEIN pauschales „* { overflow-wrap: anywhere }", das würde Layouts zerreissen. DIE FÜNF URSACHEN, DIE GEFUNDEN WURDEN 1) Flex-/Grid-Kinder ohne min-width:0 (häufigste Ursache) Ein Flex-Kind hat von sich aus `min-width: auto` — seine Mindestbreite ist also die Breite seines längsten Wortes. Ein Produktname oder eine Shopify-Section-ID wie "shopify-section-template--27069861757268__rk_hero_PMWPPm" sprengt damit die Zeile, statt zu kürzen. Genau deshalb bleiben Regeln wie `flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap` WIRKUNGSLOS: die drei Punkte erscheinen nie, weil das Element nie schmaler wird als sein Inhalt. → `min-width: 0` schaltet diese Mindestbreite ab. 2) white-space:nowrap auf variablem Text Bei Zahlen und kurzen Abzeichen richtig, bei URLs, Shopnamen und Handles falsch. 3) Fehlender Umbruch bei IDs, URLs, Handles, E-Mail-Adressen Diese Zeichenketten enthalten keine Leerzeichen; ohne `overflow-wrap: anywhere` gibt es keine Umbruchstelle. 4) Tabellen ohne waagerecht scrollenden Elternteil Auf 375px Breite läuft jede Tabelle mit vier Spalten heraus. 5) text-overflow:ellipsis ohne die nötige Kombination Ohne `white-space: nowrap` wird der Text stattdessen abgeschnitten. EINBINDUNG UND KASKADE Diese Datei wird direkt nach sm-theme-dark.css geladen, also VOR der jeweiligen Werkzeug-CSS. Ergänzende Eigenschaften (min-width, overflow-wrap, flex-wrap) setzen die Werkzeug-Dateien nirgends — dort genügt der einfache Klassenselektor. Wo eine bestehende Angabe ÜBERSCHRIEBEN werden muss (Abschnitt 5 und 6), steht die Klasse doppelt (`.foo.foo`). Das hebt die Spezifität von 0-1-0 auf 0-2-0 und schlägt damit die spätere Werkzeug-Datei — ohne `!important`, das später niemand mehr aushebeln könnte. KEINE FARBEN. Diese Datei enthält bewusst keine einzige Farbangabe, damit sie mit sm-theme-dark.css nicht kollidiert. ============================================================ */ /* ════════════════════════════════════════════════════════════ 1 ── FLEX-/GRID-KINDER MIT KÜRZUNG (Ellipsis-Zellen) ──────────────────────────────────────────────────────────── Diese Elemente haben bereits overflow:hidden + text-overflow: ellipsis + white-space:nowrap, sitzen aber in einem Flex- oder Grid-Elternteil ohne min-width:0. Die Kürzung greift deshalb nie, der Text schiebt stattdessen die ganze Zeile auseinander. Es sind Produktnamen, Section-IDs, Shopnamen, Seitentitel. ════════════════════════════════════════════════════════════ */ .aa-ptitle, .aa-section-zeile-id, .bs-produkt-titel, .bs-tabelle-zeile-kategorie, .cc-row-obj, .ccc-act-product, .cdh-ki-dim-lbl, .cdh-mt-label, .cdh-sp-bar-label, .cdh-tool-update, .cdh-ws-name, .cfo-search-term-text, .ci-ql-comp-name, .ci-ql-own-name, .ck-tf-title, .cmp-special-selected, .col-name, .cpl-panel-header-vendor, .cpl-product-title-main, .cpl-product-vendor, .cpp-act-product, .cpp-modal-change-title, .cust-progress-label, .field-freq-label, .heatmap-name, .kr-section-pfad-chip, .kr-section-zeile-id, .modal-page-title, .osc-act-product, .ospl-product-title-main, .ospl-product-vendor, .pp-collection-label, .pp-panel-mini-name, .related-page-title, .ret-list-label, .sa-panel-title, .sb-slide-panel-title, .scan-overview-title, .sm-panel-title, .sp-modal-list-value, .svd-query-pill, .tb-gantt-row-label, .tb-ov-ua-title, .tbl-projchip-name, .tc-hbar-name, .tc-hotspot-sec, .tcm-section-name, .tl-mlr-label, .ur-alert-preview-item-text, .ur-combo-label, .ur-list-label, .variant-bar-label { min-width: 0; } /* ════════════════════════════════════════════════════════════ 2 ── FLEX-KINDER MIT flex:1, DIE TEXT TRAGEN ──────────────────────────────────────────────────────────── `flex: 1` heisst „nimm den übrigen Platz" — aber nur nach unten bis zur Inhaltsbreite. Ohne min-width:0 wächst die Zeile also über den Container hinaus, sobald ein langes Wort auftaucht. Zusätzlich `overflow-wrap: anywhere`, damit ein einzelnes langes Wort (Produktname ohne Leerzeichen, Handle) auch umbricht. ════════════════════════════════════════════════════════════ */ .au-ki-name, .ca-entry-text, .cd-sparkline-title, .cdh-sp-row-label, .cfo-funnel-modern-branch-label, .ck-conn-txt, .cs-form-stats, .css-history-item-status, .ct-panel-stat-label, .doku-tile-desc, .doku-tile-main, .donut-legend-label, .ez-top-val, .hai-briefing-title, .ib-history-text, .ib-ki-vorschlag-titel, .ib-vote-option, .ibe-summary-k, .kr-nav-tile-desc, .ld-feld, .luecke-category, .mp-insight-title, .observation-text, .onb-pw-rules, .osd-sparkline-title, .outlier-name, .toggle-label, .sdm-page-type, .se-howto-text, .se-impact-note-text, .se-quickfix-text, .se-signal-detail-name, .se-task-card-title, .sp-donut-legende-label, .spp-group-title, .spp-rec-title, .sw-time-label, .tb-checklist-item-text, .tool-card-description, .ur-nav-tile-desc, .ws-item-label { min-width: 0; overflow-wrap: anywhere; } /* Formularfelder: ein hat eine eigene Standardbreite (size=20). In einem Flex-Elternteil bläht die das Feld auf, statt es mitgehen zu lassen. Hier reicht min-width:0 — Umbruch gibt es in einem Eingabefeld ohnehin nicht. */ .ad-field, .ad-input { min-width: 0; } /* ════════════════════════════════════════════════════════════ 3 ── INNENFLÄCHEN VON PANELS UND KARTEN ──────────────────────────────────────────────────────────── Diese Elemente sind `flex: 1` und tragen breite Inhalte (Tabellen, Listen, Diagramme). Ohne min-width:0 wächst der ganze Panel-Rahmen mit dem breitesten Kind — auf dem Handy schiebt sich dann das halbe Panel aus dem Bild. ════════════════════════════════════════════════════════════ */ .ab-modal-body, .ad-panel-body, .cc-merk-body, .cc-panel-body, .ci-panel-body, .cmp-panel-inner, .osd-trend-modal-body, .sp-detail-panel-inner, .sp-drawer-body, .str-section-stack, .tb-kanban-col-body, .tl-panel-inner, .tp-panel-inner, .ura-panel-inner, .urp-panel-inner { min-width: 0; } /* Balken-Bahnen: sitzen als flex:1 neben einer Beschriftung. Ohne min-width:0 gewinnt bei langer Beschriftung der Text und die Bahn wird aus der Zeile gedrückt. */ .bs-metrik-balken-track, .cdh-period-strip, .cq-hbar-track, .cs-funnel-bar-wrap, .ib-range, .mvd-compare-bar-wrap, .pp-panel-bar-track, .se-score-bar-track, .tc-hbar-track, .tc-p-row-track { min-width: 0; } /* ════════════════════════════════════════════════════════════ 4 ── IDs, URLs, HANDLES, E-MAIL-ADRESSEN ──────────────────────────────────────────────────────────── Zeichenketten ohne Leerzeichen. Der Browser findet darin keine Umbruchstelle und lässt sie lieber aus der Box laufen. `overflow-wrap: anywhere` erlaubt den Umbruch an jeder Stelle — im Gegensatz zu `break-word` zählt es beim Ermitteln der Mindestbreite mit, das Elternteil wird also wirklich schmaler. ════════════════════════════════════════════════════════════ */ .aal-ziel-id, .ato-member-email, .au-konto-mail, .au-kunde-mail, .au-shop-domain, .au-shop-id, .au-verwaist-mail, .cc-direct-link, .ccc-col-handle, .ccl-view-details-link, .cd-hero-id, .cdh-tool-link, .cdh-ws-link, .ci-detail-external-link, .ck-rate-hero-link, .cq-shop-id, .cs-doc-link, .cs-shop-domain, .csm-shop-url, .detail-frontend-link, .dg-comp-url, .docs-toc-link, .dp-link, .geraet-link, .ip-bc-link, .modal-page-link, .nb-back-link, .osc-col-handle, .osl-view-details-link, .pp-crosssell-details-link, .pp-entscheider-handle, .pp-produkt-item-handle, .product-handle, .product-link, .psi-back-link, .pt-handle, .related-page-link, .sb-bc-link, .sb-top-url, .sb-url, .se-note-file-link, .se-panel-deep-link, .shop-info-link, .sm-bc-link, .spm-result-url, .st-name-id, .svd-product-handle, .sw-link, .sw-zeile-link, .tsp-bc-link, .usd-bc-link { overflow-wrap: anywhere; } /* ════════════════════════════════════════════════════════════ 5 ── white-space:nowrap AUF VARIABLEM TEXT ──────────────────────────────────────────────────────────── Bei Zahlen und Datumsangaben ist nowrap richtig und bleibt. Hier stehen nur die Fälle, in denen es auf frei gefüllten Text angewendet wurde: Shop-Domains, Landingpage-URLs, Suchbegriffe, Gruppentitel, Produkt-Handles. Diese Regel muss die jeweilige Werkzeug-Datei überschreiben → Klasse doppelt (Spezifität 0-2-0). ════════════════════════════════════════════════════════════ */ .sw-textlink.sw-textlink, .sw-gruppe-titel.sw-gruppe-titel, .csm-shop-url.csm-shop-url, .ci-result-url.ci-result-url, .scan-pageurl-link.scan-pageurl-link, .ccl-offender-link.ccl-offender-link, .osl-offender-link.osl-offender-link, .svd-product-link.svd-product-link, .timeline-product-link.timeline-product-link, .wm-docs-link.wm-docs-link, .panel-action-link.panel-action-link, .cfo-chain-node.cfo-chain-node, .se-snooze-label.se-snooze-label, .sp-modal-list-sub.sp-modal-list-sub, .cust-list-detail.cust-list-detail, .spp-scroll-legend-label.spp-scroll-legend-label, .cmp-mode-label.cmp-mode-label, .sp-page-nav-typ.sp-page-nav-typ { white-space: normal; overflow-wrap: anywhere; } /* Shopify-Handles im ShopArchitekt: standen auf `flex-shrink: 0` PLUS nowrap — sie konnten also weder schrumpfen noch umbrechen. Eine ID wie "shopify-section-template--27069861757268__rk_hero" schob damit den Seitentitel daneben komplett aus der Zeile. */ .related-page-handle.related-page-handle, .modal-page-handle.modal-page-handle { flex-shrink: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; } /* ════════════════════════════════════════════════════════════ 6 ── ABZEICHEN, CHIPS UND KNÖPFE ──────────────────────────────────────────────────────────── Hier ist `white-space: nowrap` gewollt — ein Abzeichen soll nicht zweizeilig werden. Es fehlt aber die Notbremse: ohne `max-width: 100%` wächst das Abzeichen über sein Elternteil hinaus, sobald der Inhalt lang wird (Kategorienamen, Statustexte aus der KI, Shopnamen). nowrap bleibt, der Text wird stattdessen gekürzt. WICHTIG: `max-width: 100%` allein reicht NICHT. Die Regel lautet max(min-width, min(max-width, width)) — die inhaltsbasierte Mindestbreite eines Flex-Kindes schlägt also jedes max-width. Deshalb steht hier immer `min-width: 0` dabei. Nachgesehen: alle Klassen dieses Blocks haben white-space:nowrap in ihrer eigenen Datei, die Kürzung greift also wirklich. */ .panel-badge, .badge, .tg-chip, .ck-pill, .timeline-badge, .ab-cat-badge, .avc-chip, .shop-info-badge, .abt-proposal-severity-badge, .spp-group-badge, .spp-rec-priority, .sp-sync-chip, .tc-panel-badge, .smbn-label, .urp-panel-list-value, .ur-pb-label { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Knöpfe mit veränderlicher Beschriftung — ebenfalls alle mit nowrap in ihrer eigenen Datei (nachgesehen). Sie dürfen nicht breiter werden als die Zeile, in der sie stehen. */ .btn, .sm-ib-btn, .cs-btn, .tb-btn, .osc-act-btn, .aa-seg-btn, .ez-seg-btn, .pp-seg-btn, .sp-period-btn, /* ⚠️ 11.08.2026 – HIER STAND EINE REGEL, DIE MEHR KAPUTT MACHTE ALS SIE HALF. Zwei nachgemessene Fehler: 1. `min-width: 0` auf Reiter-Knöpfe. Reiterleisten wie .ez-tab-nav lösen ihr Platzproblem über waagerechtes Scrollen (overflow-x:auto). Das funktioniert nur, wenn die Knöpfe ihre Breite BEHALTEN. Mit min-width:0 schrumpfen sie stattdessen zusammen, der Scroll greift nie, und die Beschriftungen werden gestaucht statt scrollbar. 2. `text-overflow: ellipsis` ist bei 16 dieser 35 Klassen wirkungslos, weil sie display:inline-flex sind – ellipsis gilt nur für Block-Container. Übrig blieb dort nur das overflow:hidden, also ein hartes Abschneiden OHNE die drei Punkte, die dem Nutzer sagen, dass noch Text folgt. Deshalb: Reiter behalten ihre Breite (die Leiste scrollt), und gekürzt wird nur dort, wo es auch wirkt. */ /* Knöpfe, die in einer scrollenden Leiste sitzen: Breite behalten. */ .pp-tab, .bs-tab-btn, .ez-tab-btn { flex: 0 0 auto; max-width: none; } /* Knöpfe im normalen Fluss: dürfen schrumpfen und umbrechen, statt zu überlaufen. Kein ellipsis – bei inline-flex wirkungslos, und ein Knopf darf ruhig zweizeilig werden. */ .tc-period-btn, .uro-filter-btn, .kr-filter-btn, .bs-detail-btn, .cd-hero-btn, .mb-hero-btn, .ppp-btn { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; } /* Diese fünf haben KEIN nowrap — hier wäre overflow:hidden falsch (es würde die zweite Zeile abschneiden). Sie dürfen stattdessen innerhalb des Knopfes umbrechen. */ .btn-label, .abt-modal-tab, .ci-tab, .ck-btn-onhero, .docs-btn-primary { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } /* ════════════════════════════════════════════════════════════ 7 ── REITER- UND SEGMENT-LEISTEN ──────────────────────────────────────────────────────────── Waagerechte Leisten aus Reitern oder Zeitraum-Knöpfen. Auf dem Desktop passen sie, auf 375px nicht — dort schoben sie bisher die ganze Seite nach rechts. Ab hier scrollen sie in sich selbst. Bewusst NUR unterhalb 640px: auf grossen Bildschirmen entsteht so kein Scrollbereich, der Fokusringe oder Schatten abschneiden würde. Nicht aufgeführt, weil bereits in Ordnung (nachgesehen, nicht angenommen): .aa-seg, .ez-seg, .pp-seg und .sp-time-bar haben flex-wrap:wrap, .ez-tab-nav und .bs-tab-leiste haben overflow-x:auto, .tc-period-btns hat flex-wrap:wrap. ════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .ab-seg, .ci-tabs, .cn-pagesize-seg, .fb-tabs, .kr-filter-group, .pp-tabs, .psi-tabs, .psi-strats, .tc-filter-group, .abt-modal-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ab-seg::-webkit-scrollbar, .ci-tabs::-webkit-scrollbar, .cn-pagesize-seg::-webkit-scrollbar, .fb-tabs::-webkit-scrollbar, .kr-filter-group::-webkit-scrollbar, .pp-tabs::-webkit-scrollbar, .psi-tabs::-webkit-scrollbar, .psi-strats::-webkit-scrollbar, .tc-filter-group::-webkit-scrollbar, .abt-modal-tabs::-webkit-scrollbar { display: none; } } /* ════════════════════════════════════════════════════════════ 8 ── AKTIONS- UND FUSSZEILEN ──────────────────────────────────────────────────────────── Knopfreihen ohne `flex-wrap: wrap`. Solange alles passt, ändert sich nichts; sobald die Knöpfe zu breit werden, rutschen sie in die nächste Zeile statt aus dem Kasten. Reine Ergänzung, kein Eingriff in bestehende Gestaltung. ════════════════════════════════════════════════════════════ */ .aa-pager-btns, .ab-regen-actions, .ab-row-actions, .acs-modal-footer, .acs-pagination, .acs-toolbar-right, .ad-block-actions, .ad-editor-footer-right, .ad-panel-actions, .ad-toolbar-right, .ca-card-header-actions, .ca-form-actions, .ca-li-actions, .ca-modal-actions, .ca-pagination, .cc-actions, .ccl-panel-footer-btn, .cd-change-actions, .cd-panel-actions, .cdh-tool-footer, .cfo-funnel-modern-branch-footer, .ci-pagination, .cl-pagination, .comp-actions, .cpl-header-actions, .cpl-panel-footer-btns, .cpp-act-actions, .cpp-header-actions, .cs-confirm-actions, .cs-panel-footer, .csm-pagination, .css-panel-footer, .cvp-search-actions, .docs-form-actions, .fb-comment-actions, .fd-pagination-controls, .gdpr-modal-footer, .gdpr-pagination, .gdpr-toolbar-right, .geraet-actions, .hai-header-actions, .ib-footer-destructive, .ib-footer-row, .ib-karte-actions, .ib-karte-footer, .ib-modal-footer, .modal-footer, .modal-pagination-controls, .nb-canvas-actions, .nb-canvas-modal-actions, .nb-page-actions, .oc-confirm-actions, .osc-header-actions, .osd-change-actions, .osd-panel-actions, .osl-panel-footer-btn, .osp-header-actions, .ospl-header-actions, .osseo-header-actions, .osv-search-actions, .pagination, .pagination-controls, .pagination-numbers, .panel-actions, .ppp-footer, .ppp-hero-actions, .product-card-actions, .sa-panel-footer, .se-confirm-footer, .se-note-actions, .se-note-edit-actions, .se-task-card-actions, .sw-pager-knoepfe, .tb-modal-actions, .tb-panel-footer, .sm-wizard-nav, .tg-actions, .th-footer, .usd-panel-footer, .zg-actions, .form-actions, .mb-hero-actions, .ck-rate-hero-actions, .cd-hero-side, .bs-produkt-rechts { flex-wrap: wrap; } /* ════════════════════════════════════════════════════════════ 9 ── TABELLEN OHNE SCROLLENDEN ELTERNTEIL ──────────────────────────────────────────────────────────── 25 Tabellen sitzen in einem Kasten, der nicht waagerecht scrollt. Unterhalb 900px werden sie selbst zum Scrollbereich — das ist das Muster, das css/customer-umsatzradar-orders.css bereits benutzt (`.uro-orders-table { display:block; overflow-x:auto }` in der Handy-Ansicht); hier wird es auf die restlichen übertragen. Nur mobil, damit die Spaltenbreiten am Desktop unangetastet bleiben: `display: block` schaltet `width: 100%` faktisch ab. ════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .ad-table, .ads-table, .abt-compare-table, .avc-verlauf-table, .ads-sp-table, .dp-table, .dp-detail-table, .cpp-product-table, .cvp-table, .osd-dp-table, .osd-dp-detail-table, .osp-product-table, .osv-table, .css-phase-card__subtable, .urd-code-table, .pay-detail-table, .rp-matrix-table, .urt-country-table, .data-table, .spt-mover-table, .sb-table, .tp-table, /* 12 weitere Tabellen werden ganz ohne Klasse ausgegeben (nur mit style="width:100%"). Sie sind über den Klassennamen nicht erreichbar — deshalb hier über das Fehlen des Attributs. */ /* ⚠️ 11.08.2026 eingeschränkt: vorher traf diese Regel ALLE 21 klassenlosen Tabellen des Projekts. `display:block` schaltet dabei width:100% ab – Tabellen, die vorher sauber die volle Breite füllten, schrumpften auf ihre Inhaltsbreite zusammen. Gebraucht wird der Scrollbereich aber nur dort, wo eine Mindestbreite gesetzt ist und die Tabelle deshalb überhaupt breiter werden kann als ihr Elternteil. */ table:not([class])[style*="min-width"], table:not([class])[width] { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Die Hüllen, die nach Scrollbereich AUSSEHEN, aber keiner sind (Klassenname sagt „wrap"/„scroll", overflow fehlte). Hier ist die Hülle die richtige Stelle — die Tabelle darin bleibt unangetastet und behält ihre Spaltenbreiten. */ .dp-table-wrap, .osd-dp-table-wrap, .sb-table-wrap, .ads-table-scroll, .table-section { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ════════════════════════════════════════════════════════════ 10 ── LANGE INHALTE IN KARTEN UND LISTEN ──────────────────────────────────────────────────────────── Grid-Kinder haben dieselbe Falle wie Flex-Kinder: `min-width: auto`. Bei Kennzahl-Kacheln fällt es nicht auf (kurze Zahlen), bei Produkt- und Seitenlisten schon. Diese Container tragen erklärten Fliesstext oder Namen aus dem Shop. ════════════════════════════════════════════════════════════ */ .ur-ai-text, .ur-ai-section, .se-panel-section, .cust-panel-section, .fb-detail-desc, .fb-comment-body, .fb-official-body, .ticket-message-text, .ib-history-text, .sm-ib-title, .page-context-title, .page-context-desc, .sdm-name, .sp-section-name, .sp-section-meta, .template-card-name, .product-card-title, .product-title, .urp-rp-name, .ur-card-title, .kr-detail-kauf-produkte, .tc-src-name, .cpl-product-title-sub, .ospl-product-title-sub { overflow-wrap: anywhere; } /* ════════════════════════════════════════════════════════════ 11 ── FESTE BREITEN OHNE NOTBREMSE ──────────────────────────────────────────────────────────── Von 28 gemessenen Kästen mit fester Breite ab 300px haben 26 bereits ein `max-width: …vw` oder liegen in einem Scroll-Kasten. Diese zwei nicht — sie ragen auf dem Handy einfach heraus. ════════════════════════════════════════════════════════════ */ .ca-preview-panel, .fb-modal--wide { max-width: 100vw; }