/* Weser Theme – Block: Intro Features */ /* Abstand oberhalb/unterhalb der Sektion: assets/css/section-spacing.css */ .block-intro-features { background-color: var(--color-white); } /* Größe aus H2 (typography.css) */ .intro-features-headline { margin-bottom: 20px; } /* Figma Desktop: Headline 32px (nicht die globalen 40px der H2) */ @media (min-width: 1200px) { .intro-features-headline { font-size: 32px; } } .intro-features-text { font-family: var(--font-body); font-size: var(--fs-copy-s); color: var(--color-text); line-height: 1.75; margin-bottom: 0; } .intro-features-card { border: 0; border-radius: var(--radius-md); overflow: hidden; } /* Rand + Schatten ab Tablet (≥768px); auf Mobil ohne */ @media (min-width: 768px) { .intro-features-card { border-top: 0; border-left: 0; border-right: 3px solid var(--color-white); border-bottom: 3px solid var(--color-white); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); } } /* Polsterung 18px – vom User am 2026-09-09 NICHT geliefert („in Figma nicht richtig angegeben"), sondern aus seinen drei anderen Angaben ausgerechnet: Karte im Figma 483 × 195 (Desktop) Rahmen unten 3 (siehe .intro-features-card ab 768px) innen 192 → je Zeile 96 Zelle 96 = 2 × Polsterung + max(Icon 48, Text) Text zweizeilig 2 × 30 = 60 (Poppins 20px „Auto" = 30, gemessen) Polsterung (96 − 60) / 2 = 18 Gegenprobe waagerecht: 241,5 − 18 − 48 − 16 − 18 = 141,5px fuer den Text; das breiteste Wort „abgestimmt" misst 124,1px. Passt mit 17px Luft. ⚠️ 18 und die 30er Zeilenhoehe gehoeren ZUSAMMEN. Mit den alten 24px Polsterung und line-height: normal waere die Zelle 108 hoch und die Karte 219 statt 195. */ .intro-feature-item { display: flex; align-items: center; gap: 16px; padding: 18px; } .intro-feature-icon { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } /* ⚠️ `min-width: 0` ist Pflicht, keine Kosmetik. Kundenfeedback 01 vom 2026-09-09: „Das hier laeuft auch aus der box raus". Nachgemessen auf /mauersysteme/ lief bei 1200px JEDER der vier Texte aus seiner Zelle (25–56px), bei 768 und 1440 je einer. Grund: Als Flex-Element hat der Text `min-width: auto` und schrumpft damit nie unter die Breite seines laengsten Wortes („Aufeinander"). Er schiebt sich stattdessen ueber die Zellkante hinaus, wo ihn `.intro-features-card { overflow: hidden }` abschneidet. Mit `min-width: 0` darf er umbrechen. Dieselbe Falle steht schon an `.wall-system-intro`. ⚠️ `min-width: 0` allein reicht NICHT, und das ist der Punkt, an dem der Block auf eine Entscheidung wartet. Es erlaubt den Umbruch an LEERZEICHEN – „Aufeinander abgestimmt" wird zweizeilig. Ist aber schon ein einzelnes Wort breiter als die Zelle, hilft es nicht: 1200px Zelle 182 − 24 Polsterung ×2 − 48 Icon − 16 Luecke = 70px Text „Aufeinander" braucht bei 20px Poppins rund 118px. Gemessen am 2026-09-09 laufen bei 1200px alle vier Texte 25–56px ueber ihre Zelle; `.intro-features-card { overflow: hidden }` schneidet sie ab. Der Fehler ist NICHT neu – er stand vorher genauso da. ⚠️ KEIN `overflow-wrap: break-word` als Notnagel. Ein Versuch damit war schlechter als der Fehler selbst: Es trennt ohne Ruecksicht auf Silben („Herste|ller", „Aufein|ander|abges|timmt"). `hyphens: auto` steht als sanfte Hilfe drin (das Dokument traegt `lang="de"`), traegt hier aber nicht allein – im Headless-Chromium fehlt das Trennwoerterbuch, im echten Browser ist es nicht nachgeprueft. Was wirklich fehlt, ist eine Zahl aus Figma: Schriftgroesse, Icon-Groesse oder Polsterung im Band 1200–1400px, wo `col-xl-5` die Karte auf 364px zusammenzieht. Ebenso fuer das vom Kunden gewuenschte 2x2 auf Mobil (Feedback 01, Mobil BILD 25): Ein Versuch mit `col-6` erzeugte dort einen NEUEN Ueberlauf (8–32px) und ist deshalb zurueckgenommen. */ .intro-feature-text { font-family: var(--font-body); font-size: 20px; font-weight: 400; color: #050D22; line-height: normal; /* Figma „Auto" – User 2026-09-09 */ min-width: 0; hyphens: auto; } /* Mobil: Feature-Text 16px */ @media (max-width: 767.98px) { .intro-feature-text { font-size: 16px; } } /* ── Waagerechter Überlauf unter 768px ────────────────────────────────── Gefunden am 2026-09-09: auf jeder Seite mit diesem Block lief die Seite bei 390px 8px zu breit (scrollWidth 398) – waagerechtes Scrollen. Rechnung: `g-5` setzt Bootstraps Gutter auf 3rem = 48px. Die Zeile bekommt dadurch `margin-inline: -24px`, die Spalten je 24px Polsterung. Der Container hat auf Mobil aber nur `--grid-margin: 16px` Polsterung – die 24px greifen also 8px darüber hinaus. Auf Tablet ist --grid-margin genau 24px, dort geht es gerade auf; ab 1200px sind es 130px. Unter 768px sind BEIDE Spalten vollflächig (col-md-8 greift noch nicht) – der waagerechte Gutter bringt dort nichts und kostet nur den Überlauf. Ihn auf 0 zu setzen ist optisch folgenlos, weil Bootstrap die negative Randbreite der Zeile und die Polsterung der Spalten exakt gegeneinander rechnet: Der Inhalt steht vorher wie nachher bei 16…374 (nachgemessen). ⚠️ NUR bis 767.98px, nicht bis 1199.98px. Ein erster Versuch mit der xl-Grenze war zwar auch überlauffrei, machte die Icon-Box auf Tablet aber 16px breiter (24…488 → 24…504): Dort greift `col-md-8`, und 8/12 rechnen ohne Gutter gegen 720 statt gegen 768. Bei 768px gibt es ohnehin keinen Überlauf (--grid-margin ist dort genau 24px), also bleibt der Bereich unangetastet. Der SENKRECHTE Gutter bleibt – er liefert die 48px zwischen Text und Icon-Box, solange sie gestapelt sind. Deshalb nur --bs-gutter-x. Der Kindselektor ist Absicht: Die Icon-Box enthält eine zweite Zeile (`.row.g-0`), die davon unberührt bleiben muss. */ @media (max-width: 767.98px) { .block-intro-features > .container-xl > .row { --bs-gutter-x: 0; } } /* ── Das Band 1200–1459px ─────────────────────────────────────────────── Ab 1200 stellt Bootstrap die beiden Spalten NEBENEINANDER (col-xl-7 / col-xl-5). Die Karte misst dort aber nur 364px, und das reicht nicht: gebraucht 2 × (18 + 48 Icon + 16 + 124,1 + 18) = 448,2px (124,1 = „abgestimmt" bei Poppins 20px, gemessen) erreicht Karte = (5/12) × Fensterbreite − 136 → 450 erst ab 1407px (die Gerade ist an den Messwerten 1200/364, 1440/464, 1536/504 und 1728/584 abgelesen, nicht aus der Bootstrap-Formel hergeleitet – die ging um 20px daneben) Gemessen liefen bei 1200px alle vier Texte 13–44px aus ihrer Zelle. Unterhalb von 1200 stapelt der Block ohnehin schon und ist sauber (bei 768px: Karte 464). Deshalb gilt die Stapelung hier bis 1409 weiter – es ist dieselbe Anordnung, nur ein Stueck laenger. ⚠️ 1409, nicht 1401: Bei genau 1402px ist die Karte 448 breit und „Aufeinander abgestimmt" lief noch 2px ueber. Die Rechnung braucht 450, das ist ab 1407. ⚠️ Die Grenze ist 1401, nicht 1459. Ein erster Versuch mit 1459 fing 1440 mit ein, wo die Karte mit 464 laengst passt – sie wuchs dadurch auf 771 und die Hoehe fiel von 195 auf 171. Die Werte reichen die <1200-Regeln exakt nach: Textspalte voll, Icon-Box 8/12 wie `col-md-8`. Ab 1460 greift wieder das Original. */ @media (min-width: 1200px) and (max-width: 1409.98px) { .block-intro-features > .container-xl > .row > .col-xl-7 { width: 100%; } .block-intro-features > .container-xl > .row > .col-xl-5 { width: 66.6666666667%; /* = col-md-8 */ } } /* ══ Mobil: Icon-Box als 2 × 2 (seit 2.9.0) ════════════════════════════════ Figma-Stand 2026-09-16 (Dion mobil), Werte vom User: Kasten 346 × 144 · Innenabstand 16 · Icons 40 × 40 Poppins Regular 16/auto · 24px zwischen den beiden Spalten Nachgerechnet: 16 + 48 + 16 + 48 + 16 = 144 (zwei Zeilen, je zweizeiliger Text 2 × 24) – die Werte gehen genau auf. Das erledigt zugleich Kundenfeedback 01, Mobil 25 („zwei links, zwei rechts statt untereinander"): Vorher standen die vier Einträge mobil ohne Kasten untereinander. Gilt für jede Seite mit diesem Block. Rahmen und Schatten wie ab Tablet. */ /* Breite: Mit den Figma-346px blieben 96px Text je Zelle – „Kombinierbare" braucht bei 16px aber 119. User 2026-09-16: „so groß, dass alles reinpasst". Der Kasten nimmt deshalb die volle Inhaltsbreite (358 bei 390), seitlich 10, Spalten 8, Icon direkt am Text (die SVGs bringen eigenen Weißraum mit): macht 124px Text je Zelle – „Kombinierbare" und „Kombinationen" brauchen 119–121 (nachgemessen 2026-09-16). Der Umbruch bleibt als letztes Netz für schmalere Geräte. */ @media (max-width: 767.98px) { /* Figma-Werte Mobil (Chris, 23.09.): Der Kasten ist volle Breite minus 24px Rand, die vier Merkmale stehen im 2x2-Raster mit 24px zwischen den Zeilen und 16px zwischen den Spalten, Text Poppins Regular 16/Auto, Icon 48x48. Im Entwurf hat der Kasten mobil weder Rahmen noch Schatten – beides galt nur für die abgeleitete Fassung und fällt hier weg. */ .block-intro-features > .container-xl { padding-left: 24px; padding-right: 24px; } .intro-features-card { max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; } .intro-features-card > .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 16px; margin: 0; } .intro-features-card .intro-feature-item { width: auto; padding: 0; gap: 0; } .intro-features-card .intro-feature-text { overflow-wrap: break-word; } .intro-features-card .intro-feature-icon { width: 48px; height: 48px; } } /* Unter 390px passt die zweite Spalte nicht mehr – bei 375 fehlten für „Kombinierbare" und „Handgefertigt" noch einige Pixel, bei 320 brachen sogar „Aufeinander" und „erweiterbar" mitten im Wort. Dort bleibt die Box einspaltig. */ @media (max-width: 389.98px) { .intro-features-card > .row { grid-template-columns: minmax(0, 1fr); } }