/* ============================================================ Hero /starkregengefahrenkarten/ - zweispaltig mit Laptop-Mockup ============================================================ Alle Werte per getComputedStyle am Original nachgemessen (/opt/tooling/gk-hero-detail.mjs, Viewports 1440/1200/1199/1000/810/768/390). Der Umbruchpunkt des Originals liegt exakt bei 1200px: >=1200px zwei Spalten nebeneinander, Text linksbuendig, Mockup rechts <=1199px gestapelt, Text zentriert, Mockup darunter Details/Begruendung: docs/DECISIONS.md, Belege docs/qa/hero-gefahrenkarten/. */ .hero--ews { /* KEIN Abdunkler - wie im Original. Nachgemessen: die gerenderten Pixel des Originals entsprechen den Rohpixeln der Hintergrunddatei (identische Bilddatei, per Canvas Stichprobe verglichen), es liegt also kein Overlay darueber. Der in Lauf 5 aus Kontrastgruenden beibehaltene Verlauf (.55/.35/.69) war die mit Abstand groesste Pixelabweichung dieser Seite: er dunkelte das gesamte Hero-Foto auf rund ein Drittel der Original-Helligkeit ab (Baender 2-8 des visdiff bei 40-86 %). Lighthouse bleibt davon unberuehrt: der Kontrast-Audit bewertet nur Text gegen berechnete Hintergrund-FARBEN, nicht gegen Fotos - der Wert war eine eigene Setzung, keine Anforderung des Audits (nachgeprueft). */ --hero-scrim: transparent; /* Original (nachgemessen /opt/tooling/sect.mjs @1440): Hero-Sektion y=0, 1440x900 (= volle Viewporthoehe), padding 63px 0, Inhalt darin y=63 mit 774px Hoehe. Der 74px hohe Header liegt fixiert darueber und nimmt keinen Platz weg - seit er auch bei uns `fixed` ist (base.css), entfaellt die frueher noetige Rueckrechnung (100vh-74px / 137px Unterpolster). */ min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 63px 0; } /* Das Hintergrundfoto fuellt im Original die VOLLE Viewporthoehe (Bildbox 0,0 1440x900). Da die Hero-Sektion jetzt selbst bei y=0 beginnt und 100vh hoch ist, deckt sich `inset: 0` damit exakt - die frueher noetige Verschiebung um -74px entfaellt. */ .hero--ews .hero__bg { top: 0; bottom: 0; height: auto; } /* Innerer Rahmen: max. 1000px, zwei gleich breite Spalten mit 20px Abstand (Original: framer-155ucp, maxW 1000px, gap 20px, align-items center). */ .hero-split { position: relative; z-index: 2; width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: row; align-items: center; gap: 20px; } /* Textspalte: flex 1 0 0 (= 490px bei 1000px Rahmen). Der Textblock darin ist 400px breit und in der Spalte zentriert - dadurch liegt die linke Kante des h1 bei 1440px auf exakt 265px (Original: 265px). */ /* min-width: 0 auf beiden Spalten: ohne das setzt die automatische Mindestbreite (min-width:auto) die Mockup-Spalte auf die Bildbreite (538px) statt auf ihren Spaltenanteil (490px) - der Rahmen wurde dadurch 1048px statt 1000px breit und alles rutschte 24px nach links. */ .hero-split__text { flex: 1 0 0; min-width: 0; display: flex; justify-content: center; } .hero-split__stack { flex: 0 0 auto; width: 400px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; text-align: left; } /* Abstaende kommen ausschliesslich aus dem 20px-gap (Original), nicht aus den Standard-Margins der Typo-Regeln. */ .hero-split__stack > * { margin: 0; } /* h1 und Untertitel nehmen die volle Spaltenbreite ein (Original: beide 400px bei 1440px, also exakt die Stapelbreite). Ohne width:100% wuerde align-items:flex-start sie auf ihre Inhaltsbreite schrumpfen lassen - das ergab eine 260px breite h1 statt 400px. Der Button behaelt seine Inhaltsbreite (Original: 211px). */ .hero-split__stack h1, .hero-split__stack .hero__eyebrow { width: 100%; } .hero-split__stack h1 { color: #fff; } /* Der Hero-Untertitel auf /starkregengefahrenkarten/ ist im Original ein Sonderfall: 24px/500/36px Inter mit -0.5px Laufweite (alle anderen Eyebrows der Seite sind 24/700/28.8 Poppins). Groesse, Zeilenhoehe und Laufweite sind uebernommen; den Schnitt 500 gibt es weder in Poppins noch in Inter unter den drei selbst gehosteten Dateien - 400 liegt naeher an 500 als 700. Bewusst KEINE vierte Schriftdatei fuer ein einzelnes Element, s. docs/DECISIONS.md. */ .hero-split__stack .hero__eyebrow { /* Original: reines Weiss, Inter 500. Der Schnitt 500 liegt seit dem Nachziehen der @font-face-Regeln als eigene Datei vor (inter-500.woff2, byte-identisch mit der des Originals) - der frueher noetige Notbehelf "400 liegt naeher an 500 als 700" entfaellt. Erst mit dem richtigen Schnitt bricht der Untertitel wie im Original nach "Schäden" um. */ color: #fff; font-weight: 500; font-family: var(--font-accent); /* Groesse/Zeilenhoehe hier fest statt ueber --fs-eyebrow: dieser Untertitel bleibt im Original auf ALLEN Breiten 24px/36px (nachgemessen 1440/768/390), waehrend der allgemeine Eyebrow-Token unterhalb 810px auf 18px faellt. Ohne diese Festlegung war die Zeilenhoehe bei 768/390px 27px statt 36px und der Hero brach anders um als das Original. */ font-size: 24px; line-height: 36px; letter-spacing: -0.5px; /* max-width aus .hero__eyebrow (46ch) aufheben: das Original laesst den Untertitel die volle Spaltenbreite nutzen und bricht erst dort um. */ max-width: none; } /* Mockup-Spalte: ebenfalls flex 1 0 0 (490px), feste Hoehe 600px, Bild darin zentriert. Das Bild ist mit 538px breiter als seine Spalte und ragt - wie im Original - symmetrisch je 24px darueber hinaus (deshalb flex: 0 0 auto, damit es nicht auf die Spaltenbreite schrumpft). */ .hero-split__media { flex: 1 0 0; min-width: 0; height: 600px; display: flex; align-items: center; justify-content: center; } .hero-split__media img { flex: 0 0 auto; /* max-width: none ist hier noetig: das Bild ist absichtlich breiter als seine Spalte (538 > 490) und ragt wie im Original symmetrisch heraus. Hoehe 374px mit object-fit: cover - das Original beschneidet das Mockup hier (nachgemessen 538x374 bei 999x652 Rohgroesse), vorher lief es mit 351px in seinem Rohseitenverhaeltnis. */ /* Original: object-fit CONTAIN in einer 538x374-Box (Rohbild 538x350), das Mockup steht also mit je 12px Luft oben/unten darin. */ width: 538px; height: 374px; object-fit: contain; max-width: none; } @media (max-width: 1199px) { .hero--ews { min-height: 0; padding: 63px 0; } /* gestapelt ist der Hero deutlich hoeher als der Viewport - das Foto fuellt dann wieder die ganze Sektion, nicht 100vh. */ .hero--ews .hero__bg { top: 0; height: 100%; } /* Original: gestapelt, 7px Abstand zwischen Text und Mockup, der innere Rahmen ist 997px hoch und zentriert seinen Inhalt darin. */ .hero-split { flex-direction: column; gap: 7px; min-height: 997px; justify-content: center; } /* flex-grow zuruecksetzen: die Basisregeln geben beiden Spalten `flex: 1 0 0` (Desktop-Zweispalter). Gestapelt liess das beide Bloecke die volle 997px-Hoehe ausfuellen - der Textblock wurde 617 statt 521px hoch, die Bildspalte schrumpfte auf 373 statt 400px, und die vom Original vorgesehene Zentrierung (34px Luft oben) verschwand. Dadurch sass der gesamte Hero-Text 34px zu hoch und das Mockup 96px zu tief. */ .hero-split__text, .hero-split__media { flex: 0 0 auto; } .hero-split__text { width: 100%; padding: 122px 20px; } .hero-split__stack { width: 100%; align-items: center; text-align: center; } .hero-split__media { width: 100%; height: 400px; } /* max-width: 100% erst hier: unterhalb 390px wuerden 383px sonst horizontalen Overflow erzeugen (Pruefung bei 320px). */ /* Original: Bildkasten 383x346 mit `contain` (das Mockup steht darin mittig, oben/unten je 27px Luft innerhalb der 400px hohen Spalte). */ .hero-split__media img { width: 383px; height: 346px; object-fit: contain; max-width: 100%; } } /* ============================================================ Rumpf von /starkregengefahrenkarten/ - VOLLE Seitenhoehe ============================================================ Messung: /opt/tooling/anyel.mjs + pcol.mjs, Viewport 1440. Das Original setzt unterhalb des Heros DREI zweispaltige Bloecke (Text neben Bild, abwechselnd), alle im selben 1000px-Rahmen wie der Hero (x=220..1220). Der Nachbau hatte stattdessen zentrierte Textspalten mit 952px breiten Bildern untereinander - die Seite war dadurch 1011px zu hoch und lag bei 16,7 % Abweichung. Gemessene Geometrie (y, Original): 900 ..1389 Block 1, Polster 63px, Zeile y=963 h=363 links Text 490 (Inhalt 400), rechts Bild 480x334 1389 ..2630 Polster 70px, zwei Zeilen mit 100px Abstand 1459..1921 Zeile A: links Bild 460x383, rechts Text 460 2021..2560 Zeile B: links Text 458, rechts Bild 517x431 ============================================================ */ .ews-sec { max-width: 1000px; margin: 0 auto; } .ews-sec--eins { padding: 63px 0; } .ews-sec--zwei { padding: 70px 0; } .ews-sec--zwei .ews-row + .ews-row { margin-top: 100px; } .ews-row { display: flex; align-items: center; } .ews-row__media img { display: block; } /* Blaue Zwischenueberschrift: Original 18px/700 in rgb(2,179,255). Als Text auf Weiss sind das 2,2:1 - wir nehmen wie im uebrigen Projekt die AA-taugliche Variante derselben Farbachse (--color-brand-blue-text, 6,45:1). Zeilenhoehe 22px wie gemessen. */ /* 21.6px = woertlich 18px * 1.2 wie im Original (getComputedStyle @390: fs=18 lh=21.6, zweizeilige H2 = 43.2 statt unserer 44; Lauf 5). */ .ews-h { font-size: var(--fs-sub); line-height: 21.6px; font-weight: var(--fw-bold); color: var(--color-brand-blue-text); margin: 0; } /* Fliesstext: linksbuendig, Absaetze im Leerzeilen-Flussmodell des Originals (22,5px Zeile). Wo zwei Absaetze im Original OHNE Leerzeile aufeinanderfolgen, traegt der zweite kein margin-top. */ .ews-text { color: var(--color-text-muted); text-align: left; } .ews-text p { margin: 0; color: var(--color-text-muted); } .ews-text p + p { margin-top: 0; } .ews-text p.ews-leer { margin-top: 22.5px; } /* Knopf: im Original fest 152x40 mit mittiger Beschriftung 14px/700. */ .ews-btn { display: inline-flex; align-items: center; justify-content: center; width: 152px; height: 40px; border-radius: 8px; font-family: var(--font-accent); font-size: var(--fs-cta); line-height: var(--lh-cta); font-weight: var(--fw-bold); /* BEWUSSTE Abweichung: Original fuellt rgb(2,179,255) (#02b3ff, weisse Schrift ~2.3:1, klar unter AA). Wie bei .btn--accent (s. base.css) gilt der hellste AA-taugliche Wert derselben Farbachse. Die Knoepfe erscheinen deshalb im Differenzbild vollflaechig - dokumentierter Restbestand, nicht "beheben". */ background: #007eb1; color: #fff; text-decoration: none; } .ews-btn:hover { background: #006a94; } .ews-btn:active { background: #005678; } /* --- Block 1: Text links (Spalte 490, Inhalt 400), Bild rechts --- */ .ews-sec--eins .ews-row { gap: 20px; } .ews-row--eins .ews-row__text { flex: 1 0 0; min-width: 0; display: flex; justify-content: center; } .ews-row--eins .ews-row__stack { width: 400px; } .ews-row--eins .ews-row__media { flex: 1 0 0; min-width: 0; display: flex; justify-content: center; } .ews-row--eins .ews-row__media img { width: 480px; height: 334px; object-fit: cover; border-radius: 10px; } /* Der Kartenausschnitt ist im Original eine Animation (GIF). Wir zeigen ein Standbild - die Phase einer Animation laesst sich nicht treffen. Genommen ist das Einzelbild bei 2s, das dem im Vergleich aufgenommenen Zustand des Originals am naechsten kommt (/opt/tooling/gifN.mjs). */ /* Die Ueberschrift des Blocks steht im Original weiss auf Weiss und ist damit unsichtbar (nachgemessen: 0 dunkle Pixel im gesamten Textkasten). Wir nehmen sie stattdessen aus dem Bild, lassen sie aber im Vorlesebaum - eine weisse Schrift auf weissem Grund waere ein Kontrastfehler. Ihr Platzbedarf (97px bis zur blauen Zeile) bleibt als Abstand erhalten. */ .ews-row--eins .ews-h { margin-top: 97px; } .ews-row--eins .ews-text { margin-top: 19px; } /* --- Block 2, Zeile A: Bild links 460, Text rechts 460, Abstand 80 --- */ .ews-row--a { gap: 80px; } .ews-row--a .ews-row__media { flex: 0 0 460px; } /* contain wie im Original: das Rohbild ist 999x652, in der 460x383-Box steht es damit als 460x300 mittig - cover haette es stark beschnitten. */ .ews-row--a .ews-row__media img { width: 460px; height: 383px; object-fit: contain; border-radius: 20px; } .ews-row--a .ews-row__text { flex: 0 0 460px; } .ews-row--a .ews-text { margin-top: 20px; width: 453px; } .ews-row--a .ews-btn { margin-top: 20px; } /* --- Block 2, Zeile B: Text links 458, Bild rechts 517, Abstand 25 --- */ /* Die Zeile ist im Original 539px hoch, das hoechste Kind (das Bild) nur 431px - es bleiben je 54px Luft oben und unten. */ .ews-row--b { gap: 25px; padding: 54px 0; } .ews-row--b .ews-row__text { flex: 0 0 458px; } .ews-row--b .ews-text { margin-top: 19px; } .ews-row--b .ews-btn { margin-top: 20px; } .ews-row--b .ews-row__media { flex: 0 0 517px; } .ews-row--b .ews-row__media img { width: 517px; height: 431px; object-fit: contain; border-radius: 10px; } @media (max-width: 1199px) { .ews-sec { max-width: none; padding-left: 20px; padding-right: 20px; } .ews-row, .ews-row--a, .ews-row--b { flex-direction: column; gap: 40px; align-items: stretch; } .ews-row--b { padding: 0; } /* Zeile A behaelt auch gestapelt die Reihenfolge Bild -> Text (Original @390 nachgemessen: Bild y=2146, Ueberschrift erst y=2458). Die fruehere Annahme "gestapelt kommt erst der Text" traf nur auf Zeile B zu und hat diesen Block komplett umgedreht. */ .ews-row--a .ews-row__media { order: 0; } /* Auch Zeile B stellt das Original gestapelt das Bild VOR den Text (nachgemessen @390: Bild y=3175, Ueberschrift "Starkregen Auskunft System" erst y=3481). Im Markup steht dort der Text zuerst - deshalb hier per order nach vorn geholt. */ .ews-row--b .ews-row__media { order: -1; } .ews-row--eins .ews-row__text, .ews-row--eins .ews-row__media, .ews-row--a .ews-row__media, .ews-row--a .ews-row__text, .ews-row--b .ews-row__text, .ews-row--b .ews-row__media { flex: 0 0 auto; width: 100%; } .ews-row--eins .ews-row__stack { width: 100%; } /* Phantom-Platzhalter des Originals oberhalb der Spalte (Inhalt beginnt y=1227 statt y=1186). */ .ews-sec--eins .ews-row { padding-top: 41px; } /* Die unsichtbare weisse Ueberschrift belegt bei 390px zwei Zeilen (32px/38,4 in 350px Spalte = 77px) plus je 20px Abstand - zusammen 117px bis zur blauen Zeile (Original: Ueberschrift 1247..1324, blaue Zeile 1344). Auf Desktop ist sie einzeilig, dort gelten 97px. */ .ews-row--eins .ews-h { margin-top: 117px; } /* Blaue Zeile -> Fliesstext @390: 20px wie alle Stapelabstaende des Originals (1387.3 -> 1407.3; Zeile A 2501.2 -> 2521.2). Die 19px vom Desktop liessen JEDEN Textblock 1px zu hoch stehen - im Differenzbild war die komplette Textspalte rot (Lauf 5). */ .ews-row--eins .ews-text, .ews-row--a .ews-text, .ews-row--b .ews-text { margin-top: 20px; } .ews-row--a .ews-text { width: 100%; } /* Bildmasse am Original nachgemessen (390px): Zeile eins 356x287 formatfuellend (ragt je 3px ueber die 350px-Spalte hinaus), Zeile A 350x292 einpassend. */ .ews-sec--eins .ews-row__media img { width: 356px; max-width: none; margin-left: -3px; height: 287px; object-fit: cover; } /* Lauf 7 (@768): Das Original fuehrt die Laptop-Bildbox in voller Spaltenbreite mit FESTEM Boxverhaeltnis 6:5 und contain-Einpassung (350x292 @390, 728x606,7 @768 - das Rohbild 999x652 steht mittig mit Leerraum). Die fixe 292 liess die Seite @768 um 314,7px zu frueh enden. */ .ews-row--a .ews-row__media img { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: contain; } /* Zeile B (SAS-Screenshot): Original @390 fuehrt die Bildbox 287px hoch (nicht Naturhoehe 212 - sonst sitzt alles darunter ~75px zu hoch), zeigt den Screenshot darin aber EINGEPASST mit Leerraum oben/unten (wie auf dem Desktop). Das fruehere object-fit:cover zoomte ihn formatfuellend auf - die ganze Bildflaeche stand im Differenzbild rot (Lauf 5). */ .ews-row--b .ews-row__media img { width: 100%; height: 287px; object-fit: contain; } /* Textkarte von Zeile eins: das Original traegt IN der Karte 20px padding-bottom (framer-paxtcf, Text-Ende 1655 + 20 + Stapelabstand 20 -> GIF y=1695). Ohne das sass das GIF und alles bis Abschnittsende 20px zu hoch (Lauf 5). */ .ews-row--eins .ews-row__stack { padding-bottom: 20px; } /* Vertikalkette von Abschnitt zwei am Original @390 nachgemessen (Lauf 5, 2026-07-28) - die Seite endete ~100px zu frueh: - GIF-Ende (1982) -> Laptop-Bild Zeile A (2146) = 164px; unsere 63+70 = 133 waren 31px zu wenig -> padding-top 102 (63+102-63=101 gemessen +1px GIF-Rundung). - Bild -> Text innerhalb Zeile A/B: 20px (2438->2458 bzw. 3462->3481), nicht der 40px-Stapelabstand. - Zeile A Knopf-Ende (3008) -> Zeile B Bild (3175) = 167px statt 100. - "Zum SAS"-Ende (3853) -> Pfadleiste (4019) = 166px statt 70. */ .ews-sec--zwei { padding-top: 101px; padding-bottom: 166px; } .ews-row--a, .ews-row--b { gap: 20px; } .ews-sec--zwei .ews-row + .ews-row { margin-top: 166px; } /* ---- Lauf 7 (2026-07-30): Tablet-Band, am Original @768 nachgemessen. Das Original weitet die Vertikalkette gegenueber @390 deutlich auf (Summe +607px docH). Anker: blaue Zeile 1391,9 (Phantom+h1 einzeilig 32/38,4 = 205,9 statt 158), GIF-Ende -> Laptop 250,5 (statt 164), Zeile-A-Knopf -> Zeile-B-Bild 245,1 (statt 166), "Zum SAS" -> Pfadleiste 282,2 (statt 203). Zeile-B-Bild steht als 344x286,7-Box MITTIG (x=212), das GIF exakt zentriert (x=206, ohne -3px-Shift). */ @media (min-width: 640px) { .ews-row--eins .ews-h { margin-top: 164.9px; } .ews-sec--zwei { padding-top: 187.5px; padding-bottom: 245.2px; } .ews-sec--zwei .ews-row + .ews-row { margin-top: 245.1px; } .ews-row--b .ews-row__media img { width: 344px; height: 286.66px; margin: 0 auto; } .ews-sec--eins .ews-row__media img { margin-left: 0; } } } /* Seitenrand unterhalb 1200px: 20px statt der sitewide 39px (Original: Textsektion framer-856n3k mit padding 60px 20px, /opt/tooling/sect.mjs). */ @media (max-width: 1199px) { main { --container-pad: 20px; } } /* Die bei 390px nachgemessene, formatfuellende Breite von 356px (3px ueber die Spalte hinaus) laeuft bei 320px ueber den Bildschirmrand - dort auf die Spaltenbreite zurueck. Betrifft nur Breiten unter 360px, die 390px-Geometrie bleibt unveraendert. */ @media (max-width: 359px) { /* Lauf 7b (2026-07-30) @320 nachgemessen: das GIF bleibt 356x287 formatfuellend und haengt BEIDSEITIG ueber (x=-18..338) - die fruehere Annahme "faellt auf Spaltenbreite zurueck" stimmte nicht (height:auto ergab 188 und zog die Seite 99px zusammen). */ .ews-sec--eins .ews-row__media img { width: 356px; max-width: none; margin-left: -18px; height: 287px; object-fit: cover; } /* GIF-Ende -> Laptop ist @320 nur 100px (2046 -> 2146), nicht 164; Zeilenabstand und Abschluss der Sektion zwei sind 143,9 (Knopf -> SAS-Bild 3040 -> 3183,9; "Zum SAS" -> Pfadleiste 3907,1 -> 4051), nicht 166. */ .ews-sec--zwei { padding-top: 37px; padding-bottom: 143.9px; } .ews-sec--zwei .ews-row + .ews-row { margin-top: 143.9px; } /* Blaue Zeile @320: Original y=1318,3 - die unsichtbare h1 laeuft dort DREIzeilig (115,2 bei w280), die Zone davor ist insgesamt 132,3 statt 158 (Phantom kleiner); 41 pt + 91,3 Margin = 132,3. */ .ews-row--eins .ews-h { margin-top: 91.3px; } }