/* Block: Icon-Karten-Reihe (3–4 Karten) Sollwerte (User, 2026-08-07): Titel D 24px/30px · T/M 18px/20px · Literata Bold Text 16px auf allen Geräten · Poppins 400 Weiße Karte Rahmen 2px var(--color-dark) · Radius 8px · Padding 24px Blaue Karte BG var(--color-dark) · Titel und Text weiß · Nummer 40px weiß, grünes Quadrat überlappt sie unten rechts Icon 60 × 60 px (grünes Quadrat ist Teil der SVG) Aufbau Marker links, Titel UND Text rechts daneben – auf allen Breakpoints gleich (im Figma auf D und T identisch) Reihenbreite 3 Karten = 1092px zentriert · 4 Karten = volle Inhaltsbreite Keine clamp()-Größen – feste Stufen je Breakpoint. ZWEITER AUFBAU (2026-08-24, Modifier .icon-cards--stacked): Der Sprint-4-Entwurf `.figma-ref/20.08/Mauersysteme.png` zeigt dieselben Karten mit dem Icon ÜBER dem Titel und deutlich dichter gesetzt. Das ist kein Versehen im Entwurf, sondern drei zusammenpassende Änderungen – gemessen am Entwurf (Kartenreihe y 1177–1378, Karten 348 px breit, 24 px Abstand, Bild trägt links einen 4 px breiten schwarzen Rand): neben (Sprint 2) über (Sprint 4) Rahmen 2px 1px Innenabstand 24px 8px Icon-Kasten 60×60 48×48 (Tinte 38×38) Icon → Titel – 16px Kartenhöhe 180px 202px Rechenprobe Kartenhöhe: 1+8+48+16+30+12+3×26+8+1 = 202 – genau der am Entwurf gemessene Wert. Deshalb sind die Werte unten belastbar und nicht geschätzt. Tablet und Mobil sind ABGELEITET; für Sprint 4 lagen wieder nur Desktop-Entwürfe vor. */ /* Abstand oberhalb/unterhalb der Sektion: assets/css/section-spacing.css */ .icon-cards-headline { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--color-dark); font-size: 22px; line-height: 26px; margin-top: 0; margin-bottom: var(--space-md); /* 32px */ } /* ── Spalten ─────────────────────────────────────────────── */ /* Basis = gestapelt. Bei 3 Karten bleiben sie schmal und mittig (so zeigt es der Kontakt-Tablet-Screenshot), bei 4 Karten volle Breite. */ .icon-card-col { flex: 0 0 auto; width: 100%; } .icon-cards--cols-3 .icon-cards-row { justify-content: center; } .icon-cards--cols-3 .icon-card-col { max-width: 374px; } /* ── Karte ───────────────────────────────────────────────── */ .icon-card { display: flex; align-items: flex-start; /* Abstand Icon → Text 20px, Polsterung 16px ringsum – Kundenfeedback 01 vom 2026-09-09: „Der Textblock steht zu nah am Icon", vom User mit den Figma-Werten beziffert. ⚠️ Das kehrt eine aeltere Entscheidung um. Hier stand `gap: 0` mit der Begruendung: „Die SVGs bringen links und rechts eigenen Weissraum mit, im Figma schliesst der Text direkt an die 60px-Box an." Der Entwurf vom 09.09. zeigt den Abstand ausdruecklich – die 20px kommen also ZUM Weissraum der SVG hinzu. Die Ziffern-Karten (`--number`) und die gestapelten (`--stacked`) haben weiter unten eigene Werte und bleiben unberuehrt. */ gap: 20px; padding: 16px; border-radius: var(--radius-md); /* 8px */ background-color: var(--color-white); border: 2px solid var(--color-dark); /* Schlagschatten – Kundenfeedback 01 vom 2026-09-09: „Kaesten dieser Art sollten immer einen Schlagschatten erhalten, sobald sie auf weissem Hintergrund liegen." Genommen ist das vorhandene Token, nicht ein eigener Wert – dieselbe Tiefe wie bei allen anderen Karten. */ box-shadow: var(--shadow-card); transition: box-shadow var(--transition), transform var(--transition); } /* Dezente Hover-Bewegung – Kundenfeedback 01: „Bitte eine dezente Hover-Bewegung ergaenzen (wie bei den Cards darunter), damit das Modul nicht zu starr wirkt." Gemeint ist „Warum ein System. Nicht nur ein Stein." auf /mauersysteme/; die Karten DIREKT DARUNTER sind der `choice-cards`-Block. Von dort sind die beiden Werte uebernommen (`translateY(-2px)` + `--shadow-card-hover`), damit beide Reihen sich gleich anfuehlen – nicht geschaetzt. ⚠️ Gilt fuer ALLE Icon-Karten, auch die Kontaktwege auf /kontakt/. Das ist Absicht: „Bei vergleichbaren Modulen bitte einheitlich anwenden." */ .icon-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .icon-card { transition: box-shadow var(--transition); } .icon-card:hover { transform: none; } } .icon-cards--blue .icon-card { background-color: var(--color-dark); border-color: var(--color-dark); } .icon-cards--number .icon-card { gap: 8px; } /* ── Marker (Icon oder Nummer) ───────────────────────────── */ .icon-card-marker { position: relative; flex: 0 0 auto; width: 60px; height: 60px; } .icon-card-icon { width: 60px; height: 60px; object-fit: contain; display: block; } /* ── Kontaktkarten: Symbol 48x48 ───────────────────────────────────────── Vom User am 2026-09-09 aus Figma: „48x48px fuer die Icons in den Kontaktboxen". Die Grundgroesse bleibt bei 60 – sie stammt aus dem Sprint-2-Entwurf und gilt weiter fuer „So funktioniert's." auf /planungsservice/, das dieselbe Klasse benutzt. ⚠️ Deshalb auf `--cols-3` gekapselt und NICHT an `.icon-card-marker` global geaendert. Falls der Entwurf auch fuer den Planungsservice 48 sagt, kann die Kapselung wieder raus. Es ist nicht nur Optik: Mit 60 blieben in der 1090px-Gruppe 223,3px fuer den Text, „Alte Todenmanner Straße 39" braucht 229,1px – die Adresse brach dreizeilig um. Mit 48 sind es 235,3px. */ .icon-cards--cols-3 .icon-card-marker, .icon-cards--cols-3 .icon-card-icon { width: 48px; height: 48px; } /* Nummer: Literata weiß, das grüne Quadrat überlappt sie unten rechts. */ .icon-card-number { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 40px; line-height: 1; color: var(--color-white); position: relative; z-index: 2; } .icon-card-square { position: absolute; left: 18px; top: 26px; width: 24px; height: 24px; background-color: var(--color-green); z-index: 1; } /* ── Inhalt ──────────────────────────────────────────────── */ .icon-card-content { flex: 1 1 auto; min-width: 0; } .icon-card-title { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--color-dark); font-size: 18px; line-height: 20px; margin-top: 0; margin-bottom: 12px; } .icon-card-text { font-family: var(--font-body); font-weight: var(--fw-normal); font-size: var(--fs-copy-s); /* 16px */ line-height: 1.6; color: var(--color-text); /* var(--color-text) */ margin-bottom: 0; } .icon-cards--blue .icon-card-title, .icon-cards--blue .icon-card-text { color: var(--color-white); } .icon-card-btn { margin-top: var(--space-sm); /* 16px */ font-size: var(--fs-copy-xs); /* 14px */ } /* ── Variante: Icon über dem Titel ───────────────────────── */ /* Werte und Herleitung im Kommentarkopf. Dieselbe Markup-Struktur, nur die Flex-Richtung dreht sich – deshalb kein zweiter Renderzweig in PHP. */ .icon-cards--stacked .icon-card { flex-direction: column; /* Basis ist flex-start: In der Spalte schrumpfte die Inhaltsspalte damit auf die Textbreite und der Umbruch säße falsch. */ align-items: stretch; gap: 16px; /* Icon-Unterkante → Titelzeile */ padding: 8px; border-width: 1px; } .icon-cards--stacked .icon-card-marker, .icon-cards--stacked .icon-card-icon { width: 48px; height: 48px; } /* ── Desktop (≥1200px) ───────────────────────────────────── */ @media (min-width: 1200px) { .icon-cards-headline { font-size: 34px; line-height: normal; } .icon-cards--cols-4 .icon-card-col { width: 25%; } /* Drei Karten als 1090px breite Gruppe, mittig. Vom User am 2026-09-09 aus Figma bestaetigt („element insgesamt maximal 1090px"). Vorher standen hier 1092 – zwei Pixel daneben, aber aus derselben Absicht. */ .icon-cards--cols-3 .icon-cards-row { max-width: 1090px; margin-left: auto; margin-right: auto; } .icon-card-title { font-size: 24px; line-height: 30px; } } /* ── Drei Karten nebeneinander erst ab 1350px ──────────────── Die Gruppe ist im Entwurf 1090px breit (Figma-Frame 1700). Zwischen 1200 und ~1350px bleibt dafuer zu wenig Inhaltsbreite: Die Karten schrumpfen auf 313–340px, und die Adresse auf „Vor Ort" bricht dreizeilig um (gemessen 2026-09-23). Unterhalb gilt deshalb die ohnehin vorhandene Anordnung 2 + 1 mit 374px breiten Karten – genau die Breite, fuer die sie entworfen sind. Chris, 23.09.: „hauptsache da bricht nichts mehr raus." 1350 = 1090 Gruppe + 2 × 130 Seitenrand. */ @media (min-width: 1350px) { .icon-cards--cols-3 .icon-card-col { width: 33.3333%; max-width: none; } } /* Ganze Karte als Link – Kundenfeedback 01 (Kontaktwege). Die Karte ist dann ein ; ohne diese Zeilen erbte sie Unterstreichung und Linkfarbe. */ a.icon-card--link { text-decoration: none; color: inherit; } a.icon-card--link:focus-visible { outline: 3px solid var(--color-heading); outline-offset: 3px; } /* Karte MIT Knopf: ebenfalls ganz klickbar (Chris 2026-09-18). Ein Link um die Karte ginge nicht (Link im Link), deshalb legt sich das ::after des Knopfs über die Karte – Muster wie .blog-card-link. Fokusring wie oben. */ .icon-card--knopf { position: relative; } .icon-card--knopf:focus-within { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } /* ⚠️ Keine Hover-Bewegung am Knopf: `.btn:hover` schiebt ihn per transform um 1 px (buttons.css). Ein transform macht den Knopf zum Bezugsrahmen seines eigenen ::after – die Überdeckung schrumpfte beim ersten Hover auf Knopfgröße, und ein Klick auf Bild oder Text lief ins Leere. Die Karte hebt sich ohnehin selbst. */ .icon-card--knopf .icon-card-btn, .icon-card--knopf .icon-card-btn:hover, .icon-card--knopf .icon-card-btn:focus { transform: none; } .icon-card--knopf .icon-card-btn::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-md); } .icon-card--knopf .icon-card-btn:focus-visible { outline: none; } .icon-card--knopf .icon-card-btn:focus-visible::after { outline: 3px solid var(--color-heading); outline-offset: 3px; }