fest auf 100vh und die Fusszeile "position: absolute; bottom: 64px" (styles/login/layout.css), also an den Rand gepinnt statt im Fluss. Bei flachen Desktop-Fenstern (gemessen bei 1281x594) schob sich die mittig zentrierte Karte dadurch ueber "Privacy Policy"/"Legal Notice". Jetzt liegt beides auf jeder Breite im selben Fluss, responsive.css passt darunter nur noch die Abstaende an. "100vh" steht als Rueckfallwert fuer aeltere Browser vor "100dvh". */ .welcome__step1 { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* Ueber "#main-content" adressiert wie schon die Schritt-2-Regel weiter unten: die Hoehe 100vh kommt aus ".main-content main" (styles/login/ layout.css) und ist staerker als eine reine Klassenregel - ohne die ID bliebe der Bereich starr eine Bildschirmhoehe hoch. */ /* Die beiden Abstaende sind "clamp(minimum, mitwachsender Wert, maximum)": bei normal hohen Fenstern gelten unveraendert 48px ueber/unter der Karte und 64px unter der Fusszeile, bei flachen Fenstern schrumpfen sie mit der Fensterhoehe mit - so bleibt die Startseite auch dort ohne Scrollbalken. Dasselbe Muster nutzt die Mobile-Fassung in responsive.css. */ #main-content .welcome__step1-main { flex: 1; height: auto; padding: clamp(16px, 4vh, 48px) 0; } .welcome__step1 .login__legalInformation--area { position: static; margin-top: 8px; padding: 0 16px clamp(16px, 7vh, 64px); } /* Ab 1081px entfaellt die "Not a Join user? Sign up"-Zeile auf Wunsch komplett - auf Desktop soll dieser Screen nur die Rollenwahl zeigen. Wer sich neu anmelden will, kommt ueber das Info-Icon oben rechts auf die Marketing-Seite (welcome.html, "Sign up" in ihrer Kopfzeile) oder ueber "Member log in" auf die Login-Seite. Markup und Knopf-Wiring (#signup-button) bleiben unveraendert bestehen, damit die Mobile-Fassung darunter (siehe responsive.css, gilt bis 1080px) unangetastet weiterlaeuft. */ @media (min-width: 1081px) { .welcome__step1 .header__flex-instructions { display: none; } } /* .login__signup is reused as-is (structure + JS wiring via #signup-button in script.js), only its button colours are inverted here: the default dark-filled .login__button would blend into this page's dark background. */ .welcome__step1 .login__signup .login__button { color: #2a3647; background-color: #fff; } .welcome__step1 .login__signup .login__button:hover { background-color: #f6f7f8; } /* .login__signup--question has no color of its own anywhere else in the project, so it falls back to body's #000 - invisible on this page's dark background. Figma's mobile Welcome frame shows this exact text in white (color style "white"), so it is fixed only here. */ .welcome__step1 .login__signup--question { color: #fff; } /* Figma-Inspect (Desktop-Rahmen "Welcome", Frame 153): die Karte "hugged" ihren Inhalt bei 789px (72px Seiten-, 56px Ober-/Unterabstand, 56px Abstand zwischen Kopfblock und Rollen-Zeile) statt wie vorher auf 650px Maximalbreite mit 80/48px Innenabstand gedeckelt zu sein. Ab 1080px Breite (siehe responsive.css) gilt weiterhin die alte, an den Mobile-Rahmen kalibrierte Fassung - die zaehlt dort unveraendert weiter. */ /* Figma-Inspect (Desktop-Rahmen "Welcome"): die Fusszeilen-Links stehen dort weiss auf dem dunklen Hintergrund, nicht im projektweiten Grau (#cdcdcd aus styles/login/layout.css). Nur Step 1 - Step 2 hat einen hellen Hintergrund, dort bliebe weisse Schrift unlesbar. login.html behaelt sein Grau. */ .welcome__step1 .login__legalInformation { color: #fff; } .welcome__card { width: 789px; max-width: 100%; box-sizing: border-box; padding: 56px 72px; gap: 56px; } /* Figma-Inspect (Desktop-Rahmen "Welcome"): die globale h1-Regel aus style.css (61px) ist fuer diese Karte zu gross - hier gilt Textstil "Version 2/t5" (32px, Zeilenhoehe 120%). Nur im Welcome-Kontext ueberschrieben, damit login.html (nutzt dieselbe h1/.login__header-Klasse) unveraendert bleibt. Ab 620px Breite (siehe responsive.css) gilt der am Mobile-Rahmen kalibrierte Wert von 40px. */ .welcome__card .login__header { font-size: 32px; line-height: 1.2; } /* Figma-Inspect (Desktop- UND Mobile-Rahmen, Frame 159): 16px Abstand zwischen Ueberschrift und blauer Trennlinie statt der 12px, die styles/login/layout.css als Standard vorgibt - auf beiden Rahmen derselbe Wert, darum ohne eigene Breakpoint-Anpassung. */ .welcome__card .login__headline { gap: 16px; } /* Figma-Inspect (Desktop-Rahmen "Welcome"): Textstil "Version 2/t5" (23px, Zeilenhoehe 120%) statt der bisherigen 20px/1.4. Ab 620px Breite (siehe responsive.css) gilt der am Mobile-Rahmen kalibrierte Wert von 16px/120% - 120% Zeilenhoehe stimmt dort zufaellig mit diesem hier ueberein, darum keine eigene Breakpoint-Zeilenhoehe noetig. */ .welcome__intro { font-size: 23px; line-height: 1.2; color: #2a3647; text-align: center; } /* Figma-Inspect (Desktop-Rahmen "Welcome", Frame 379): die beiden Rollen stehen auf Desktop nebeneinander (64px Abstand), nicht untereinander - jede Spalte ist so breit wie ihr Inhalt (Frage + Button), nicht 50/50 aufgeteilt. Unter 1080px Breite (responsive.css) wird das wieder auf die gestapelte, an den Mobile-Rahmen kalibrierte Fassung zurueckgestellt. */ .welcome__roles { width: 100%; display: flex; flex-direction: row; align-items: flex-start; gap: 64px; } .welcome__role { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } /* Figma-Inspect (Desktop-Rahmen "Welcome"): Textstil "Version 2/t5" (23px, Zeilenhoehe 120% - erbt hier vom body-Grundwert 1.2, keine eigene Zeile noetig) statt der bisherigen 20px. Ab 620px Breite (siehe responsive.css) gilt der am Mobile-Rahmen kalibrierte Wert von 18px. */ .welcome__role-question { font-size: 23px; font-weight: 400; color: #2a3647; display: flex; align-items: center; gap: 12px; } /* Die beiden Symbole aus der Vorlage haben unterschiedliche Seitenverhaeltnisse (24x24 und 25x19). Feste Hoehe, freie Breite - sonst wird das breitere gequetscht. */ .welcome__role-icon { width: auto; height: 24px; flex-shrink: 0; } /* Figma-Inspect (Desktop-Rahmen "Welcome"): die Buttons sind so breit wie ihr Text plus das vorhandene Button-Padding (196px / 165px), nicht ueber die volle Spaltenbreite gezogen. Unter 1080px Breite (responsive.css) gilt weiterhin volle Breite, wie an den Mobile-Rahmen kalibriert. */ /* Figma-Inspect (Desktop-Rahmen "Welcome"): die Beschriftungen sind normal gesetzt, nicht fett - im Textstil "Version 2/t5" (23px). Nur im Welcome-Kontext gesetzt, damit die geteilten Button-Klassen auf login.html unveraendert bleiben. Auf Wunsch gilt diese Fassung fuer ALLE Knoepfe der Welcome-Strecke, also auch fuer den Mail-Knopf in Schritt 2 (.welcome__mailto traegt dieselbe Klasse) - darum haengt die Regel am ganzen .welcome-Kontext statt nur an .welcome__role. */ .welcome .login__button--login { font-size: 23px; font-weight: 400; padding: 10px 18px; width: auto; box-sizing: border-box; text-align: center; text-decoration: none; display: inline-block; } /* Figma setzt "Member log in" eine Stufe kleiner (19px) als "Create request" (23px) - das wirkt in der Vorlage unbeabsichtigt, auf Wunsch stehen beide Beschriftungen deshalb einheitlich auf 23px. Der Innenabstand ist hier um je 1px kleiner als beim blauen Knopf, weil dieser Knopf zusaetzlich einen 1px-Rahmen hat - so sind beide aussen gleich gross. */ .welcome__role .login__button--guest { padding: 9px 17px; } /* ---------- Step 2: e-mail guide ---------- */ /* Figma-Inspect (Desktop-Rahmen "Stakeholder"/"Stakeholder _limit reached"): Logo und Zurueck-Pfeil-Zeile liegen NICHT auf derselben Kante - das Logo sitzt bei X=40, die Pfeil-Zeile (Frame 413) bei X=160, beide gemessen vom 1440px breiten Rahmen. Einheitliches Padding auf dem Header wuerde beide Kanten gleichsetzen, darum bekommt hier nur noch die vertikale Distanz ein Padding - die horizontale Position regeln Logo und Nav-Zeile einzeln (siehe .welcome__step2-logo und .welcome__step2-nav). */ .welcome__step2-header { max-width: 1440px; margin: 0 auto; padding: 80px 0 0; box-sizing: border-box; display: flex; flex-direction: column; } /* Figma-Inspect (Desktop-Rahmen "Stakeholder" und "Stakeholder _limit reached"): der Zurueck-Pfeil sitzt in einer eigenen Zeile direkt unter dem Logo (0px Abstand - die Bounding-Boxen beruehren sich) statt daneben, und auf gleicher Hoehe wie der Zaehler, der mit ihm die Zeile teilt (space-between, gleiche Breite wie der Content darunter). Die Zeile (Figma-Frame "Frame 413") ist selbst 1120px breit und im 1440px-Rahmen zentriert (160px Rand auf jeder Seite) statt am Seitenrand zu kleben - das haelt sie auch bei sehr breiten Bildschirmen (getestet: 1618px) an der richtigen Stelle, statt am linken Rand zu kleben. "width: 100%" ist hier Pflicht, nicht nur Kosmetik: Der Header ist ein Flex-Container, und bei Flex-Kindern mit "margin: auto" auf der Querachse gewinnt der Auto-Rand gegen das sonst uebliche automatische Aufziehen auf die volle Breite (align-items: stretch greift dann nicht) - ohne dieses "width: 100%" wuerde die Zeile auf ihre Inhaltsbreite schrumpfen und dadurch mittig statt am 160px-Rand landen. Abweichung von Figma (bewusst, auf Wunsch): Figma gibt der Zeile 1120px (Pfeil bei X=160) und der Textspalte darunter 964px (X=238,5) - der Pfeil stuende damit 78px links neben dem "W" von "Welcome", und der Versatz waere bei jeder Fensterbreite anders. Die Zeile teilt sich deshalb die 964px-Spalte mit Ueberschrift und Leitfaden, dann steht der Pfeil auf jeder Breite exakt auf der Kante des "W" (und der Zaehler rechts auf der Kante der Illustration). */ .welcome__step2-nav { width: 100%; max-width: 964px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } /* Figma-Inspect (Desktop-Rahmen "Stakeholder" und "Stakeholder _limit reached", Logo-Node "Capa 2"): 45.93 x 56 -> gerundet 46 x 56, an X=40 verankert (siehe .welcome__step2-header oben). Der Mobile-Rahmen zeigt ein groesseres Logo (64px), siehe responsive.css. */ .welcome__step2-logo { width: 46px; height: auto; margin-left: 40px; } /* Damit das Pfeil-Symbol selbst - nicht sein unsichtbarer Rahmen - auf der Kante des "W" von "Welcome" steht, werden die beiden Leerraeume links vom Symbol wieder herausgerechnet: 4px Innenabstand des Buttons (fuer seine runde Hover-Flaeche) plus rund 6px Rand, den die Pfeil-Grafik selbst mitbringt (arrowBack.svg zeichnet erst ab x=6 in einer 32px-Flaeche). */ .welcome__step2-nav .welcome__back { margin-left: -10px; } .welcome__back { padding: 4px; border: none; border-radius: 50%; background: transparent; cursor: pointer; transition: all 100ms ease-in-out; } .welcome__back img { display: block; width: 32px; height: 32px; } .welcome__back:hover { background-color: #d1d1d1; } /* The inline arrow next to the "Welcome" headline is only used on narrow screens (see responsive.css), where the brand-block arrow is hidden. */ .welcome__back--inline { display: none; } .welcome__counter { font-size: 20px; color: #2a3647; } .welcome--limit .welcome__counter { color: #ff3d00; } /* Two copies of the counter exist: one next to the logo (desktop/tablet) and one under the "Welcome" headline (mobile, see responsive.css). Only one is visible at a time; scripts/welcome.js updates both via a shared class. */ .welcome__counter--inline { display: none; margin: 0 0 32px; } /* Overrides "#main-content main" from styles/login/layout.css (flex-centred, height: 100vh — built for login's single centred card), which would otherwise also apply here and flex-centre step 2's content as a row instead of stacking it normally. Needs id-level specificity to win. Top padding is 56px (not the header's own bottom, which stays 0): Figma's auto-layout gap between the back-arrow/counter row and this content underneath it, measured on the Desktop "Stakeholder" frame. */ /* Horizontales Padding entfernt: Ueberschrift und Leitfaden sitzen laut Figma nicht an der 1440px-Kante, sondern in einer eigenen, schmaleren Spalte (siehe .welcome__step2-title/.welcome__guide unten) - ein zusaetzliches Padding hier wuerde diese Spalte falsch verschieben. */ #main-content .welcome__step2-main { display: block; height: auto; max-width: 1440px; margin: 0 auto; padding: 56px 0 96px; box-sizing: border-box; } /* Figma-Inspect (Desktop-Rahmen "Stakeholder"/"Stakeholder _limit reached", Frame 390): die Ueberschrift und der Leitfaden darunter teilen sich eine 964px breite Spalte, die im 1440px-Rahmen zentriert ist (X=238,5 - eigener Rand von der Nav-Zeile aus, nicht deren 160px-Kante). Innerhalb dieser Spalte ist die Ueberschrift linksbuendig, nicht zentriert. */ .welcome__step2-title { max-width: 964px; margin: 0 auto 48px; font-size: 61px; color: #2a3647; display: flex; align-items: center; justify-content: flex-start; gap: 16px; } .welcome__guide { max-width: 964px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title illustration" "normal illustration" "limit illustration" "button illustration"; column-gap: 48px; row-gap: 40px; align-items: start; } .welcome__guide-title { grid-area: title; font-size: 28px; color: #2a3647; margin: 0; } .welcome__illustration { grid-area: illustration; align-self: center; width: 100%; max-width: 416px; height: auto; } .welcome__illustration--limit { display: none; } .welcome--limit .welcome__illustration--normal { display: none; } .welcome--limit .welcome__illustration--limit { display: block; } .welcome__guide-normal, .welcome__guide-limit { display: flex; flex-direction: column; gap: 16px; font-size: 20px; line-height: 1.5; /* Blocksatz wie in der Vorlage. */ text-align: justify; color: #2a3647; } .welcome__guide-normal { grid-area: normal; } .welcome__guide-limit { grid-area: limit; display: none; } .welcome--limit .welcome__guide-normal { display: none; } /* Im Limit-Zustand folgt laut Vorlage direkt der rote Hinweis auf "Welcome" - die Erklaerueberschrift entfaellt dort. */ .welcome--limit .welcome__guide-title { display: none; } .welcome--limit .welcome__guide-limit { display: flex; } .welcome__limit-banner { margin: 0; padding: 16px 20px; border-radius: 8px; font-weight: 700; color: #ff3d00; background-color: #fbe4e5; } /* Zwei Klassen im Selektor (statt nur .welcome__mailto), damit diese Regel die gemeinsame Knopf-Regel weiter oben schlaegt: sonst gewaenne deren "display: inline-block / width: auto" und der Knopf wuerde als Rasterfeld auf die volle Spaltenbreite gezogen. */ .welcome .welcome__mailto { grid-area: button; width: fit-content; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } /* Die Vorlage beschriftet den Knopf je nach Zustand unterschiedlich. Beide Beschriftungen stehen im Markup, sichtbar ist immer nur eine. */ .welcome__mailto-label--limit { display: none; } .welcome--limit .welcome__mailto-label--normal { display: none; } .welcome--limit .welcome__mailto-label--limit { display: inline; } /* Haekchen inline gezeichnet statt als Datei: die vorhandenen check-Symbole sind dunkel und waeren auf dem blauen Knopf unsichtbar. Ueber currentColor folgt es automatisch der Textfarbe. */ .welcome__mailto-check { width: 20px; height: 20px; flex-shrink: 0; }