/* lead.css - Zielgruppen-/Conversion-Seiten (Veranstalter werden, Für Vereine, Für Gewerbe). * Branded Landing-Look: Navy/Cream-Rhythmus, Gold-Akzente, regionale Glaubwürdigkeit. * Nutzt die Tokens aus tokens.css. Mobile First. */ /* ---------- Hero ---------- Der Unterseiten-Hero (.lead-hero + Subelemente .lead-hero__inner / .lead-eyebrow / .lead-lead / .lead-hero__actions / .lead-trust) liegt jetzt ZENTRAL in layout.css und gilt für ALLE Unterseiten. Früher hier definiert und auf idee/preise kopiert -> Drift. Nicht wieder hierher zurückholen. Siehe _rules/design-und-typografie.md. */ /* ---------- Stats-Band (regionale Glaubwürdigkeit) ---------- */ /* Sonnenland-Verlauf als Band hinter den KPIs - exakt wie idee .stats-section (heller Blau-Gold-Verlauf). Trägt die Sektions-Polsterung; das innere .lead-stats-Grid läuft dadurch ohne eigene vertikale Polsterung. */ .lead-stats-band { background: linear-gradient(135deg, #eaf2f8 0%, #f2eedf 55%, #fef3cd 100%); padding: var(--sp-12) var(--sp-6); } .lead-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); max-width: 1100px; margin: 0 auto; } @media (min-width: 720px) { .lead-stats { grid-template-columns: repeat(4, 1fr); } } .lead-stat { text-align: center; padding: var(--sp-5) var(--sp-4); background: #fff; border: 1px solid var(--border-1, #e4e8ee); border-radius: var(--radius-lg, 16px); box-shadow: 0 6px 18px rgba(1, 66, 106, 0.05); } .lead-stat__num { font-family: var(--font-display, Georgia, serif); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: var(--brand-navy); line-height: 1; } .lead-stat__num span { color: var(--brand-orange); } .lead-stat__label { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--text-muted, #5c6578); line-height: 1.4; } /* Highlight-Karte in Gold - analog idee .stat-card--highlight (Sonnenland-Akzent). Schrift in dunklem Röstbraun (--color-on-accent), WCAG-sicher auf Gold. */ .lead-stat--highlight { background: linear-gradient(160deg, var(--brand-orange) 0%, var(--brand-orange-soft) 100%); border-color: var(--brand-orange); } .lead-stat--highlight .lead-stat__num, .lead-stat--highlight .lead-stat__num span { color: var(--color-on-accent, #4A3300); } .lead-stat--highlight .lead-stat__label { color: var(--color-on-accent, #4A3300); opacity: 0.85; } /* ---------- Sektionen ---------- */ /* Lead-/Service-Seiten: Inhaltsbreite wie idee (~1100px); Header/Footer bleiben am --container-max-Rahmen */ .lead-page .section-inner { max-width: 1100px; } /* ---------- Benefit-Karten ---------- */ .lead-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 720px) { .lead-grid { grid-template-columns: repeat(2, 1fr); } .lead-grid--3 { grid-template-columns: repeat(3, 1fr); } } .lead-card { background: #fff; border: 1px solid var(--border-1, #e4e8ee); border-radius: var(--radius-lg, 16px); padding: var(--sp-5); box-shadow: 0 6px 18px rgba(1, 66, 106, 0.05); display: flex; flex-direction: column; gap: var(--sp-2); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } .lead-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(1, 66, 106, 0.10); border-color: rgba(245, 197, 24, 0.5); } .lead-card__badge { width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto; background: rgba(245, 197, 24, 0.16); color: var(--gold-deep, #806400); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-1); } .lead-card__badge svg { width: 24px; height: 24px; } .lead-card h3 { font-size: 1.18rem; color: var(--brand-navy); margin: 0; } .lead-card p { color: var(--text-muted, #5c6578); line-height: 1.55; margin: 0; } .lead-card__more { margin-top: auto; padding-top: var(--sp-3); font-weight: 700; color: var(--brand-navy); text-decoration: none; } .lead-card__more:hover { color: var(--gold-deep, #806400); } /* Paket-Karten komplett klickbar (Dennis 11.06.): Stretched-Link - der .lead-card__more-Anker spannt sich unsichtbar über die ganze Karte. Gilt nur für Preis-Karten (.lead-card--preis), nicht für Benefit-Karten. */ .lead-card--preis { position: relative; cursor: pointer; } .lead-card--preis .lead-card__more::after { content: ""; position: absolute; inset: 0; } .lead-card--preis:focus-within { outline: 2px solid var(--brand-navy, #01426a); outline-offset: 2px; } .lead-card--preis .lead-card__more:focus-visible { outline: none; } /* ---------- Paket-/Preis-Karten (Lead-Seiten) ---------- * NUR die Paket-Karten in den Pakete-Sektionen (fuer-vereine / fuer-gewerbe) * werden eingefärbt - greift den Look der passenden Box auf /preise auf. * Marker: .lead-card--preis (gemeinsam) + spezifischer Box-Modifier. * Die übrigen .lead-card (Warum-/Partner-Karten) bleiben unberührt. * Mobile First: Basis = Farbtöne/Verlauf, ab 769px nur subtile Schatten-Differenz. */ /* Einstiegs-Box (Basic/Standard): ruhiger, warmer Pioneer-Ton - analog .paket--pioneer auf /preise (dezenter Cream/Pioneer-Verlauf, kein Goldakzent). */ .lead-card--basic, .lead-card--gewerbe-standard { background: linear-gradient(180deg, var(--pioneer-pink, #fff3e0) 0%, #fff 62%); border-color: rgba(245, 197, 24, 0.22); } /* Empfohlene Box (Vereine Plus / Gewerbe Premium): prominenter mit Gold-Akzent - analog .paket--featured.paket--pioneer auf /preise (warmer Sonnenland-Gold-Schimmer plus Gold-Oberkante und feiner Goldrahmen). */ .lead-card--verein-plus, .lead-card--gewerbe-premium { background: linear-gradient(180deg, rgba(245, 197, 24, 0.20) 0%, rgba(245, 197, 24, 0.07) 38%, #fff 78%), radial-gradient(circle at top right, rgba(245, 197, 24, 0.16), transparent 55%); border-top: 4px solid var(--brand-orange, #F5C518); border-color: rgba(245, 197, 24, 0.40); box-shadow: 0 8px 28px rgba(1, 66, 106, 0.12), 0 0 0 1px rgba(245, 197, 24, 0.16); } /* Hover der empfohlenen Box: Goldrahmen bleibt erhalten (sonst überschreibt .lead-card:hover) */ .lead-card--verein-plus:hover, .lead-card--gewerbe-premium:hover { border-color: rgba(245, 197, 24, 0.6); } /* Preis auf den eingefärbten Boxen hervorheben: Einstieg dezent navy (Standard), empfohlene Box in dunklem Wappen-Gold. */ .lead-card--verein-plus .lead-price b, .lead-card--gewerbe-premium .lead-price b { color: var(--gold-deep, #806400); } /* ---------- Zielgruppen-Fork (zwei große Karten) ---------- */ .lead-fork { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 820px) { .lead-fork { grid-template-columns: repeat(2, 1fr); } } .lead-fork__card { border-radius: var(--radius-lg, 16px); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); transition: transform 0.16s ease, box-shadow 0.16s ease; } .lead-fork__card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(1, 66, 106, 0.14); } .lead-fork__card--verein { background: #fff; border: 1px solid var(--border-1, #e4e8ee); } .lead-fork__card--gewerbe { background: linear-gradient(160deg, var(--brand-navy), var(--brand-navy-deep)); color: #fff; } .lead-fork__tag { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .lead-fork__card--verein .lead-fork__tag { color: var(--gold-deep, #806400); } .lead-fork__card--gewerbe .lead-fork__tag { color: var(--brand-orange); } .lead-fork__card h3 { font-family: var(--font-display, Georgia, serif); font-size: 1.5rem; margin: 0; } .lead-fork__card--verein h3 { color: var(--brand-navy); } .lead-fork__card--gewerbe h3 { color: #fff; } .lead-fork__card p { line-height: 1.6; margin: 0; } .lead-fork__card--verein p { color: var(--text-muted, #5c6578); } .lead-fork__card--gewerbe p { color: rgba(255, 255, 255, 0.85); } .lead-fork__more { margin-top: auto; padding-top: var(--sp-2); font-weight: 700; text-decoration: none; align-self: flex-start; } .lead-fork__card--verein .lead-fork__more { color: var(--brand-navy); } .lead-fork__card--gewerbe .lead-fork__more { color: #fff; } /* ---------- Schritte (nummeriert) ---------- */ .lead-steps { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); counter-reset: step; } @media (min-width: 720px) { .lead-steps { grid-template-columns: repeat(3, 1fr); } } .lead-step { position: relative; padding-top: var(--sp-2); } .lead-step__n { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-navy); color: var(--brand-orange); display: flex; align-items: center; justify-content: center; font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 1.2rem; margin-bottom: var(--sp-3); } .lead-step h3 { font-size: 1.1rem; color: var(--brand-navy); margin: 0 0 6px; } .lead-step p { color: var(--text-muted, #5c6578); line-height: 1.55; margin: 0; } /* ---------- Vorteils-Checkliste ---------- */ .lead-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } @media (min-width: 720px) { .lead-checks { grid-template-columns: repeat(2, 1fr); } } .lead-checks li { position: relative; padding-left: 36px; line-height: 1.55; color: var(--text-strong, #14233a); } .lead-checks li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: rgba(245, 197, 24, 0.18); color: var(--gold-deep, #806400); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; } .lead-checks strong { color: var(--brand-navy); } /* ---------- Preis-Teaser ---------- */ .lead-price { display: flex; align-items: baseline; gap: 8px; margin: 0; } .lead-price b { font-size: 1.6rem; color: var(--brand-navy); font-family: var(--font-display, Georgia, serif); } .lead-fork__card--gewerbe .lead-price b { color: #fff; } .lead-price span { color: var(--text-muted, #5c6578); font-size: var(--fs-sm); } .lead-fork__card--gewerbe .lead-price span { color: rgba(255, 255, 255, 0.7); } /* ---------- CTA-Band ---------- */ .lead-cta { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-deep)); color: #fff; border-radius: var(--radius-lg, 16px); padding: var(--sp-8) var(--sp-6); text-align: center; max-width: 1100px; margin: var(--sp-10) auto var(--sp-10); } .lead-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 90% 0%, rgba(245,197,24,.18), transparent 60%); pointer-events: none; } .lead-cta > * { position: relative; } .lead-cta h2 { color: #fff; font-family: var(--font-display, Georgia, serif); font-size: clamp(1.5rem, 3.6vw, 2.1rem); margin: 0 0 var(--sp-2); } .lead-cta p { color: rgba(255, 255, 255, 0.85); margin: 0 auto var(--sp-5); max-width: 56ch; } /* Button als Block-Level-Box (statt inline-flex aus .btn-Basis): sonst ragt die Button-Unterkante aus der Text-Zeilenbox und frisst den margin-top der Notiz -> Notiz klebte sichtbar am Button. So wird der Abstand ab echter Button-Kante gemessen. */ .lead-cta .btn { display: flex; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; } /* Spezifität: .lead-cta p (0,0,1,1) würde sonst margin-top:0 erzwingen und den Abstand zum Button platt machen. p.lead-cta__note (0,0,2,1) gewinnt. */ /* 0.8 statt 0.6: auf dem hellsten Navy-Verlaufsstop (#0d5689) braucht der Hinweistext >=4.5:1 (WCAG 1.4.3). */ .lead-cta p.lead-cta__note { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.8); margin-top: var(--sp-6); } .lead-cta__note a { color: var(--brand-orange); } /* ===== TEMP DEV-ONLY: CTA-Box Sonnenland-hell mit Wow-Stufen (W0/W2/W3) via body[data-ctavar] ===== Gesetzt vom Toggle in footer.php (nur PRE_LAUNCH). Prod-neutral (ohne Attribut keine Wirkung). Alle drei = helle Sonnenland-Box, nur die Aufwertung unterscheidet sich: W0 = Schatten + dezenter Gold-Glow · W2 = + Gold-Sonnenaufgang-Kante oben · W3 = + Sonnenstrahlen-Motiv. Nach der Entscheidung diesen Block + CTA-Eintrag im Toggle entfernen und die inline-Gold-Link- Styles aus den Seiten raus (statt des !important-Override hier). */ /* B - Navy weicher (dunkel, nur hellerer Verlauf) */ body[data-ctavar="b"] .lead-cta { background: linear-gradient(135deg, #0d5689, #013a5e); } /* W0/W2/W3 - gemeinsame helle Sonnenland-Basis */ body[data-ctavar^="w"] .lead-cta { background: var(--gradient-sonnenland); color: var(--brand-navy); border: 1px solid var(--border-1); box-shadow: var(--shadow-md); } body[data-ctavar^="w"] .lead-cta h2 { color: var(--brand-navy); } body[data-ctavar^="w"] .lead-cta p { color: var(--text-body); } body[data-ctavar^="w"] .lead-cta p.lead-cta__note { color: var(--text-muted); } body[data-ctavar^="w"] .lead-cta__note a { color: var(--gold-deep) !important; } body[data-ctavar^="w"] .lead-cta::after { background: radial-gradient(90% 120% at 90% 0%, rgba(245,197,24,.30), transparent 60%); } /* WCAG 1.4.11: Auf der hellen Sonnenland-CTA-Box braucht der goldene Primär-Button eine Navy-Kante, damit seine Begrenzung >=3:1 zum hellen Grund hat (wie im Hero, layout.css). */ body[data-ctavar^="w"] .lead-cta .btn--primary { border-color: var(--brand-navy); box-shadow: 0 2px 10px rgba(1, 66, 106, 0.28); } /* W2: Gold-Sonnenaufgang-Kante oben */ body[data-ctavar="w2"] .lead-cta { box-shadow: 0 6px 18px rgba(1,66,106,.10), 0 2px 4px rgba(1,66,106,.05); } body[data-ctavar="w2"] .lead-cta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; background: linear-gradient(90deg, transparent, var(--brand-orange) 18%, var(--gold-soft, #FFD43B) 50%, var(--brand-orange) 82%, transparent); } /* W3: dezentes KONTEXT-Motiv unten rechts (pro Seite via .lead-cta--); Glow bleibt auf ::after. Motiv navy, halbtransparent, teils angeschnitten. Standard ohne Modifier = Sonne (Sonnenland). */ body[data-ctavar="w3"] .lead-cta::before { content: ""; position: absolute; right: -22px; bottom: -22px; width: 140px; height: 140px; z-index: 0; opacity: .12; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml;utf8,"); } body[data-ctavar="w3"] .lead-cta--vereine::before, body[data-ctavar="w3"] .lead-cta--partner::before { background-image: url("data:image/svg+xml;utf8,"); } body[data-ctavar="w3"] .lead-cta--gewerbe::before { background-image: url("data:image/svg+xml;utf8,"); } body[data-ctavar="w3"] .lead-cta--kontakt::before, body[data-ctavar="w3"] .lead-cta--newsletter::before { background-image: url("data:image/svg+xml;utf8,"); } body[data-ctavar="w3"] .lead-cta--faq::before { background-image: url("data:image/svg+xml;utf8,"); } body[data-ctavar="w3"] .lead-cta--kalender::before, body[data-ctavar="w3"] .lead-cta--veranstalter::before { background-image: url("data:image/svg+xml;utf8,"); } body[data-ctavar="w3"] .lead-cta--gemeinde::before { background-image: url("data:image/svg+xml;utf8,"); } /* ===== /TEMP DEV ===== */ /* Runde CTA-Karte nie bis an den Display-Rand: seitlicher Abstand, solange das Fenster schmaler als Kartenbreite (1100) + Gutter ist. Auf breiten Screens greift weiter die Zentrierung (margin: ... auto ...). */ @media (max-width: 1140px) { .lead-cta { margin-left: var(--sp-4); margin-right: var(--sp-4); } } /* ---------- Kontakt ---------- */ /* Einheitliche Inhaltsbreite der zweispaltigen Formular-Sektionen (kontakt, registrieren; newsletter/kalender-abo nutzen dieselben 1040px in ihren eigenen Grids - Standard 11.06.). */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; max-width: 1040px; margin: 0 auto; } /* Ab Tablet: Formular links (breit), Info-Sidebar rechts (schmal). DOM-Reihenfolge bleibt aside->card (Mobile: Info zuerst), Desktop dreht via order. */ @media (min-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr) 330px; } .contact-grid .contact-card { order: 1; } .contact-grid .contact-aside { order: 2; } } .contact-aside h2 { font-family: var(--font-display, Georgia, serif); color: var(--brand-navy); font-size: 1.35rem; margin: 0 0 var(--sp-2); } .contact-aside p { color: var(--text-muted, #5c6578); line-height: 1.6; margin: 0 0 var(--sp-2); } .contact-mail { font-weight: 700; color: var(--brand-navy); font-size: 1.1rem; text-decoration: none; border-bottom: 2px solid rgba(245, 197, 24, 0.5); } .contact-mail:hover { color: var(--gold-deep, #806400); } .contact-points { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); } .contact-points li { position: relative; padding-left: 30px; color: var(--text-strong, #14233a); line-height: 1.5; } .contact-points li svg { position: absolute; left: 0; top: 3px; width: 18px; height: 18px; color: var(--gold-deep, #806400); } .contact-card { background: #fff; border: 1px solid var(--border-1, #e4e8ee); border-radius: var(--radius-lg, 16px); padding: var(--sp-6); box-shadow: 0 6px 18px rgba(1, 66, 106, 0.05); } /* Auth-Formularfelder in der Contact-Card etwas kompakter rahmen */ .contact-card .auth-field { margin-bottom: var(--sp-4); } .contact-card .auth-btn { width: 100%; } /* Registrierung nutzt dasselbe Grid: die auth-card übernimmt die (breite) Formular-Spalte */ .contact-grid .auth-card { order: 1; max-width: none; width: 100%; } @media (min-width: 860px) { .contact-grid > .contact-aside { position: sticky; top: calc(var(--header-h, 84px) + 16px); } } /* Variante: Begleitspalte LINKS, Formular rechts (registrieren + kontakt - wie newsletter/ kalender-abo). Breite kommt vom .contact-grid-Standard (1040px zentriert). */ @media (min-width: 860px) { .contact-grid--aside-left { grid-template-columns: 330px minmax(0, 1fr); gap: var(--sp-10, 40px); } .contact-grid--aside-left > .contact-aside { order: 1; } .contact-grid--aside-left > .auth-card, .contact-grid--aside-left > .contact-card { order: 2; } } /* ---------- DEZENTE SEKTIONS-GRAFIKEN ---------- * Exakt nach dem Muster der idee-Seite (idee.css): eine sehr dezente, * themenbezogene SVG-Strichgrafik unten rechts, hinter dem Inhalt. * Bewusst NICHT an die globale .section gehängt, sondern an eigene * Marker-Klassen (.lead-fx + .lead-fx--), damit idee/preise und * andere Seiten unberührt bleiben. Brand-Navy %2301426a, Gold %23F5C518. * Mobile First: Basis = kleine Grafik, ab 769px additiv vergrößern. */ .lead-fx { position: relative; overflow: hidden; } .lead-fx::after { content: ''; position: absolute; /* Basis = Mobil (analog idee-Mobile): klein und sehr ruhig */ bottom: -17px; right: -17px; width: 221px; height: 196px; pointer-events: none; z-index: 0; background-repeat: no-repeat; background-position: bottom right; background-size: contain; opacity: 0.06; } /* Direkter Inhalt (.section-inner) liegt über der Grafik */ .lead-fx > * { position: relative; z-index: 1; } /* Ab Tablet/Desktop: volle Größe wie auf idee (Desktop-Standard) */ @media (min-width: 769px) { .lead-fx::after { bottom: -34px; right: -34px; width: 476px; height: 425px; opacity: 0.07; } /* In zweispaltigen Sektionen (section--split) sitzt rechts die Kachelspalte - das Motiv würde dahinter verschwinden. Darum links unter die Textspalte, wo Freifläche ist, und etwas kleiner, damit es nicht in den Lesetext ragt. */ .section--split.lead-fx::after { left: -40px; right: auto; width: 392px; height: 350px; background-position: bottom left; } } /* Wegweiser/Pfeile - "Wähle deinen Weg" (Fork) */ .lead-fx--signpost::after { background-image: url("data:image/svg+xml;utf8,"); } /* Menschen/Herz - Community / "Gute Gründe" / "Eure Vorteile" */ .lead-fx--community::after { background-image: url("data:image/svg+xml;utf8,"); } /* Brief + Sonne - "Newsletter" (Mail) */ .lead-fx--mail::after { background-image: url("data:image/svg+xml;utf8,"); } /* Smartphone mit Kalender-Pin - "So einfach geht's" (Steps) */ .lead-fx--steps::after { background-image: url("data:image/svg+xml;utf8,"); } /* Euro/Preisschild - "Vereins-Pakete" / "Gewerbe-Pakete" */ .lead-fx--price::after { background-image: url("data:image/svg+xml;utf8,"); } /* Schaufenster/Laden - "Deine Vorteile" (Gewerbe) */ .lead-fx--store::after { background-image: url("data:image/svg+xml;utf8,"); } /* Handschlag - "Warum Partnerschaft" */ .lead-fx--handshake::after { background-image: url("data:image/svg+xml;utf8,"); } /* Verbundene Karten-Pins - "Wer passt" (Region), analog idee .section-region */ .lead-fx--region::after { background-image: url("data:image/svg+xml;utf8,"); } /* --- Gemeinde-Motive (gleicher Stil: Navy-Linien + Gold-Akzent) --- Für die Gemeinde-Infoseiten, inhaltspassend je Sektion. */ /* Laubbaum + Sonne - Natur / Wald / Briesetal / Sehenswertes & Natur */ .lead-fx--nature::after { background-image: url("data:image/svg+xml;utf8,"); } /* S-Bahn-Front auf Gleis - Lage & Anbindung */ .lead-fx--rail::after { background-image: url("data:image/svg+xml;utf8,"); } /* Klassizistisches Gebäude mit Säulen - Sehenswertes & Geschichte / Denkmal */ .lead-fx--heritage::after { background-image: url("data:image/svg+xml;utf8,"); } /* Wimpelkette - Veranstaltungen & Treffpunkte / Feste */ .lead-fx--festival::after { background-image: url("data:image/svg+xml;utf8,"); } /* Backsteinmauer - Grenzgeschichte (Glienicke) */ .lead-fx--wall::after { background-image: url("data:image/svg+xml;utf8,"); } /* Windmühle - Mühlen, Moore und Seen (Mühlenbecker Land) */ .lead-fx--mill::after { background-image: url("data:image/svg+xml;utf8,"); } /* Heraldisches Schild mit Sonne - Wappen / Farbschema (sonnenland) */ .lead-fx--wappen::after { background-image: url("data:image/svg+xml;utf8,"); } /* Sonne mit Strahlen - "Daraus wurde Sonnenland" */ .lead-fx--sonne::after { background-image: url("data:image/svg+xml;utf8,"); } /* ---------- Kalender-Abo-Builder (kalender-abo.php) ---------- */ /* Mobile First: ein Block, Felder gestapelt; ab Tablet zweispaltige Selects. */ .kabo-builder { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--color-border, #e6e6e6); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: 0 8px 28px rgba(1, 66, 106, 0.08); } .kabo-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); } .kabo-field:last-child { margin-bottom: 0; } .kabo-field > label { font-weight: var(--fw-semi, 600); font-size: var(--fs-sm); color: var(--brand-navy, #01426a); } .kabo-field select, .kabo-url { width: 100%; font-size: var(--fs-md); font-family: inherit; color: var(--color-text, #1a1a1a); background: #fff; border: 1.5px solid var(--color-border, #cfd8df); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); } .kabo-field select:focus, .kabo-url:focus { outline: none; border-color: var(--brand-navy, #01426a); box-shadow: 0 0 0 3px rgba(1, 66, 106, 0.15); } .kabo-url { background: var(--color-cream, #faf6ee); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-sm); } .kabo-urlrow { display: flex; flex-direction: column; gap: var(--sp-2); } .kabo-copybtn { white-space: nowrap; } .kabo-copied { margin: 0; color: var(--brand-navy, #01426a); font-size: var(--fs-sm); font-weight: var(--fw-semi, 600); } .kabo-copied::before { content: "✓ "; color: var(--brand-orange); font-weight: 800; } .kabo-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0; } .kabo-actions .btn { flex: 1 1 auto; text-align: center; } .kabo-hint { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--color-text-soft, #5a6b76); } @media (min-width: 600px) { .kabo-urlrow { flex-direction: row; align-items: center; } .kabo-url { flex: 1 1 auto; } .kabo-actions .btn { flex: 0 1 auto; } } /* 3-Schritt-Erklärung „Was ist ein Kalender-Abo?". Mobile First: gestapelte Schritte, ab Tablet drei Spalten nebeneinander. */ .kabo-steps { list-style: none; margin: var(--sp-6) auto 0; padding: 0; max-width: 820px; display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } .kabo-steps li { display: flex; gap: var(--sp-4); align-items: flex-start; } .kabo-step-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--brand-navy, #01426a); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); } .kabo-steps strong { display: block; color: var(--brand-navy, #01426a); font-family: var(--font-display); font-size: var(--fs-lg); margin-bottom: var(--sp-1); } .kabo-steps p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--color-text-soft, #5a6b76); } @media (min-width: 769px) { .kabo-steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }