im LocalHeroLayout
statt body.local-hero (Body-Klasse ist in Blazor nicht pro Seite
steuerbar); die Selektoren der Lieferung sind klassenbasiert und
funktionieren unverändert.
- Footer-Regeln (.local-hero-footer) entfallen: Es wird der normale
WestLotto-Footer verwendet (Absprache 20.07.2026).
- Lead-/Fineprint-Selektoren um Viewtext-Varianten ergänzt, da die
Viewtext-Inhalte die Klasse .local-hero-lead nicht zwingend setzen.
=========================================================== */
:root {
/* Local-Hero-Rot – exakt das Rot aus dem Local-Hero-Bingo-Claim-Logo,
Hover = dunklere Variante aus dem Logo-Verlauf. */
--custom-color-bingo: #c23c2d;
--custom-color-bingo-hover: #af3a32;
}
/* Bingo!-CTA – nutzt die .custom-btn-Form, tauscht nur die Farb-Variablen */
.custom-btn--solid--bingo {
--_bg: var(--custom-color-bingo);
--_bg-hover: var(--custom-color-bingo-hover);
--_color: var(--custom-color-white);
--_border: var(--custom-color-bingo);
}
.local-hero {
overflow-x: clip;
}
/* ── Header: nur zentriertes Logo ─────────────────────── */
.local-hero .local-hero-header {
margin-bottom: 0;
padding-block: 1.25rem;
}
.local-hero .local-hero-header .container {
display: flex;
justify-content: center;
}
.local-hero .local-hero-logo {
height: clamp(3rem, 5vw, 4.25rem);
width: auto;
display: block;
}
/* ── Keyvisual: volle Breite, unten gebogene Kante ────── */
.local-hero .local-hero-visual {
width: 100vw;
margin-inline: calc(50% - 50vw);
overflow: hidden;
/* Eigene Kurven-Maske mit preserveAspectRatio='none': das geteilte
--custom-curve-bottom-Token skaliert die SVG mit dem Default
'meet' und würde bei erzwungenem mask-size: 100% 100% (breites,
flaches Keyvisual) mittig letterboxen → Bild wirkt schmal.
'none' streckt die Maske über die volle Breite. */
--_curve: url("data:image/svg+xml,%3Csvg width='1729' height='807' viewBox='0 0 1729 807' preserveAspectRatio='none' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1729 755.847C1152.87 823.238 576.526 823.331 0 755.847V0H1729V755.847Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-image: var(--_curve);
mask-image: var(--_curve);
-webkit-mask-mode: alpha;
mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: bottom center;
mask-position: bottom center;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.local-hero .local-hero-visual img {
display: block;
width: 100%;
height: clamp(13rem, 30vw, 25rem);
object-fit: cover;
/* 3:2-Motiv im flachen Banner: die Gesichter liegen zwischen ~29 % und
~50 % der Bildhöhe – Fokus nach oben verschieben, sonst schneidet der
Cover-Crop auf breiten Viewports die Köpfe an. */
object-position: 50% 36%;
}
/* ── Zentrierter Inhalt unter dem Keyvisual ───────────────
Breite/Zentrierung kommen vom Bootstrap-Grid (.container/.row/.col);
hier nur noch vertikaler Abstand + zentrierter Text. */
.local-hero .local-hero-body {
padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
text-align: center;
}
.local-hero .local-hero-body h1 {
margin-bottom: 0.75rem;
}
/* Erster Absatz der Intro-Viewtexte wirkt als Lead */
.local-hero :is(.local-hero-lead, .local-hero-intro > p:first-of-type) {
font-family: var(--font-heading);
font-weight: 700;
color: var(--custom-color-primary);
font-size: clamp(1.125rem, 2.4vw, 1.5rem);
line-height: 1.3;
margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
/* ── Formular: schmaler & zentriert ───────────────────── */
.local-hero .local-hero-form {
width: 100%;
max-width: 34rem;
/* schlägt das `form { margin-inline: 0 !important }`-Reset der Basis */
margin-inline: auto !important;
padding-block: 0;
gap: 0.75rem;
}
/* Großes, mittig gesetztes Zahlenfeld – Ziffern per letter-spacing
auseinandergezogen (gilt auch für den Platzhalter). Der Wrapper dient als
Style-Hook, weil das Input von der PMInlineEditControl gerendert wird. */
.local-hero .local-hero-field input {
text-align: center;
text-indent: 0.35em; /* gleicht das nachlaufende letter-spacing aus */
letter-spacing: 0.35em;
font-weight: 600;
font-variant-numeric: tabular-nums;
font-size: clamp(1rem, 2.6vw, 1.375rem);
padding-block: 1.15rem;
padding-inline: 2.75rem;
}
.local-hero .local-hero-field input::placeholder {
/* etwas heller als der Standard-Grauton */
color: color-mix(in oklch, var(--custom-color-placeholder) 70%, white);
font-weight: 500;
}
/* Footer immer an der Fensterunterkante andocken – bei wenig Inhalt (z. B. der
Bestätigungsseite nach dem Vorschlag) würde er sonst mitten im Fenster schweben.
Blazor rendert die Seite in einen anonymen Wrapper-
direkt unter ,
daher hängt das Flex-Layout an diesem Wrapper. Der Lade-Platzhalter
(#navbar-placeholder mit der Ladeansicht aus loading/localhero.html) ist
ausgenommen: Er würde sonst auf volle Fensterhöhe gestreckt und schöbe den
Ladekreis unter den sichtbaren Bereich. */
body > div:not(#navbar-placeholder):has(> .local-hero) {
min-height: 100vh;
display: flex;
flex-direction: column;
}
body > div:not(#navbar-placeholder):has(> .local-hero) > .local-hero {
flex: 1 0 auto;
}
.local-hero .local-hero-actions {
display: flex;
justify-content: center;
margin-top: 1.5rem;
}
.local-hero .local-hero-fineprint {
max-width: 34rem;
margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
font-size: 0.75rem;
line-height: 1.6;
color: var(--custom-color-text-muted);
}
/* Viewtext-Absätze innerhalb des Fineprints ohne Zusatzabstand */
.local-hero .local-hero-fineprint p {
font-size: inherit;
line-height: inherit;
color: inherit;
}
.local-hero .local-hero-fineprint p:last-child {
margin-bottom: 0;
}
/* -----------------------------------------------------------
Local-Hero "Vorschlag" (Schritt 2): Zweispalten-Layout,
Intro links, Formular (core-shape-Cards) rechts. Teilt sich
die Hülle (Header, Keyvisual) mit .local-hero – hier nur der
zweispaltige Body. Scoping über Wrapper-
.
----------------------------------------------------------- */
.local-hero-vorschlag .lhv-main {
padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}
/* Spalten oben ausrichten – Überschrift auf Höhe der ersten Card */
.local-hero-vorschlag .lhv-row {
align-items: start;
}
/* Select-Höhe: die globale max-height-Kappung der Basis ist kleiner
als die Zeilenhöhe und schneidet den Text ab → auf Auto-Höhe (wie die
Text-Inputs). Nur hier, damit die anderen Seiten unberührt bleiben. */
.local-hero-vorschlag select {
max-height: none;
}
/* Desktop: Formspalte zieht in den Hero hinein und überlappt ihn etwas.
Fester rem-Wert = konstante Überlappung (das obere Padding ist ab dem
Breakpoint gedeckelt, vw würde auf Ultrawide übertreiben). Die Intro-
Spalte bleibt bewusst unter dem Hero – Text braucht den grünen Grund. */
@media (width >= 992px) {
.local-hero-vorschlag .lhv-formcol {
position: relative;
z-index: 1;
/* Overlap ~48–80px: skaliert mit der (vw-getriebenen) Hero-Höhe,
gedeckelt bei -8rem, damit es auf Ultrawide nicht ausufert. */
margin-top: clamp(-8rem, -7vw, -6rem);
}
}
.local-hero-vorschlag .lhv-intro {
padding-top: clamp(0.5rem, 3vw, 2rem);
}
.local-hero-vorschlag .lhv-intro h1 {
color: var(--custom-color-primary);
font-size: clamp(2rem, 4.5vw, 3.25rem);
line-height: 1.05;
margin-bottom: 1rem;
}
/* Fließtext gedämpft – der Lead (erster Absatz) bleibt farbig */
.local-hero-vorschlag .lhv-intro p {
color: var(--custom-color-text-muted);
}
.local-hero-vorschlag .lhv-intro :is(.local-hero-lead, .local-hero-intro > p:first-of-type) {
color: var(--custom-color-primary);
}
/* Top-Level-