/* ============================================================================ MCLeut · Startseite (home.css) ---------------------------------------------------------------------------- Seiten-lokal: nur Home-Spezifika. Farben/Typo/Komponenten kommen aus tokens.css + base.css (beide bleiben unangetastet). Verlinkt in NACH base.css. Mechaniken adaptiert von /ki/ und /mockups/holding/: - kräftigeres, gestaffeltes Scroll-Reveal (Stagger via home.js) - „Vertrauen"-Banderole (.band*, initBands aus home.js) - interaktiver Themen-Hub (Hover-Reveal + Orbit-Connectoren) - verbundener Prozess-Stepper, ausbalancierte Raster (keine Einzel-Waise) ============================================================================ */ /* ---------------------------------------------------------------------------- 1. Scroll-Reveal (stärker + gestaffelt, Muster aus /holding/) Überschreibt base.css `.js .reveal` (home.css liegt nach base.css). ui.js setzt weiterhin EINMALIG `is-visible`; den transition-delay je Gruppe setzt home.js (initRevealStagger). ---------------------------------------------------------------------------- */ /* Reveal-mit-Scale (KI-Niveau, 01.07.): base.css `.reveal` liefert weiterhin Fade + Rise (transform: translateY(18px)); HIER kommt nur der zarte Scale über die eigenständige `scale`-Property dazu (kein zweites translate, kein doppelter Versatz). `transform` bleibt in der Transition, damit die base-Bewegung weich mitläuft. Stagger via home.js. */ .js .reveal { opacity: 0; scale: .985; transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1), scale .7s cubic-bezier(.22, .61, .36, 1); } .js .reveal.is-visible { opacity: 1; scale: 1; } /* Orbit-Container: kein Container-Scale (absolute Kacheln + eigene hubSettle/hubDraw-Staffelung). */ .js .hub.reveal { scale: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; scale: none; transition: none; } } /* ---------------------------------------------------------------------------- 1b. Anker-Offset gegen den Sticky-Header (base.css .site-header = 64px, top:0). Ohne diesen Offset verdeckt der Header die angesprungene Sektion (z. B. „Charity"). ---------------------------------------------------------------------------- */ #vorteile, #vergleich, #leistungen, #tools, #ablauf, #faq, #charity, #bewertungen, #ueber { scroll-margin-top: 80px; } /* ---------------------------------------------------------------------------- 2. Hero (Feinheiten; Markup nutzt base.css .hero-split/.hero-figure) ---------------------------------------------------------------------------- */ .home-hero { padding-block: clamp(2.5rem, 5vw, 4.25rem); } /* getrimmt: nächste Sektion schaut an (5.1) */ .home-hero h1 { font-size: var(--fs-display); margin-bottom: var(--space-5); } .home-hero .lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 52ch; } /* Hero-Typografie (5.2): fette Kernphrase + EIN hervorgehobenes Wort „Klarheit" (blau, fett) mit oranger Wellen-Linie. Die Welle nutzt die geteilte Swipe-Primitive (.u-swipe, base.css). */ .home-hero__title { letter-spacing: var(--tracking-tight); } .home-hero__key { font-weight: var(--fw-bold); color: var(--text); } .home-hero__rest { color: var(--text); font-weight: var(--fw-medium); } .home-hero__accent { position: relative; display: inline-block; color: var(--primary); font-weight: var(--fw-semibold); } .home-hero__accent--word { font-weight: var(--fw-bold); --u-swipe-delay: 0.5s; } /* Lade-Draw wie das Original (~.55s) */ .home-hero__wave { bottom: -0.12em; } /* Feinjustage der u-swipe__line am Hero-Wort */ .home-hero__cue { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); color: var(--text-soft); font-size: var(--fs-small); font-weight: var(--fw-medium); } .home-hero__cue svg { width: 18px; height: 18px; } @media (prefers-reduced-motion: no-preference) { .home-hero__cue svg { animation: cueBob 1.8s ease-in-out infinite; } } @keyframes cueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* Skip-Link: nur bei Tastatur-Fokus sichtbar (A11y / agentischer Zugriffsbaum) */ .skip-link { position: absolute; left: 8px; top: -48px; z-index: 1000; padding: 10px 16px; background: var(--primary); color: #fff; border-radius: 8px; font-weight: var(--fw-semibold); text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; } /* ---------------------------------------------------------------------------- 3. „Vertrauen"-Banderole (Laufleiste; adaptiv per home.js initBands befüllt) CSS 1:1 aus /mockups/holding/. Inhalt = belegbare Wert-Chips; echte Siegel (ProvenExpert/IHK/Presse) sind §34d-gated und werden später in home.js ergänzt. ---------------------------------------------------------------------------- */ .band-section { padding-block: var(--section-y-sm); } .band__label { display: block; text-align: center; font-size: var(--fs-eyebrow); letter-spacing: 0.18em; /* #5F6B7E = 5,4:1 auf Weiss (WCAG AA); --text-soft #7A879B waere nur 3,65:1 */ text-transform: uppercase; color: #5F6B7E; font-weight: var(--fw-semibold); margin-bottom: var(--space-5); } .band { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); } .band__inner { display: flex; width: max-content; will-change: transform; animation: bandScroll 40s linear infinite; } .band__group { display: flex; align-items: center; } .band__group > * { flex: 0 0 auto; margin: 0 var(--space-6); } .band__group img { height: 52px; width: auto; display: block; object-fit: contain; transition: transform 0.2s ease; } .band__group img:hover { transform: translateY(-4px) scale(1.06); } .band:hover .band__inner { animation-play-state: paused; } @keyframes bandScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .band__inner { animation: none; } .band__group + .band__group { display: none; } } /* Wort-/Wert-Marken als Chips (kein erfundenes Siegel, §34d-sicher) */ .band-chip { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; color: var(--text-muted); font-weight: var(--fw-semibold); font-size: 0.95rem; letter-spacing: 0.01em; } .band-chip svg { width: 18px; height: 18px; color: var(--primary); flex: none; } /* Qualifikations-Banderole: Siegel laufen als ruhige weiße Karten (statt statischer Reihe) */ .band--seals .band__group > * { margin: 0 var(--space-4); } .band--seals .band__group img { height: 80px; width: auto; padding: var(--space-3) var(--space-5); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); filter: grayscale(0.12); opacity: 0.96; } .band--seals .band__group img:hover { filter: none; opacity: 1; } /* Partner-Logos praesenter: groesser + mehr Abstand (Christopher 07/2026) */ .band--logos .band__group > * { margin: 0 2.75rem; } .band--logos .band__group img { height: 72px; } /* ---------------------------------------------------------------------------- 4. Ausbalancierte Raster (kein auto-fit → keine Einzel-Waise) 4 Karten: 1 (mobil) / 2 (Tablet) / 4 (breit). Nie 3-spaltig ⇒ kein 3+1. ---------------------------------------------------------------------------- */ .home-grid-4 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 600px) { .home-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .home-grid-4 { grid-template-columns: repeat(4, 1fr); } } /* 4b. Problem-Sektion: 3 Pain-Point-Karten (1 / 2 / 3, kein Waisen-Risiko bei 3 Items) */ .problem-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 700px) { .problem-grid { grid-template-columns: repeat(3, 1fr); } } .home-problem__bridge { margin: var(--space-8) auto 0; max-width: 60ch; text-align: center; color: var(--text); font-weight: var(--fw-medium); } /* ---------------------------------------------------------------------------- 5. Interaktiver Themen-Hub (5 Themen) — ersetzt das alte 5er-auto-fit-Grid Progressive Enhancement: · Basis = barrierefreie Tile-Links, ausbalanciert (3 oben + 2 unten zentriert) · Desktop ≥ 940px = Orbit: zentraler Kern + 5 Kacheln drumherum + Connector-SVG Hover-Mechanik adaptiert von /holding/ .hero-tile (Lift + Akzent + Pfeil-Reveal). ---------------------------------------------------------------------------- */ .hub { position: relative; } .hub-core { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--primary); color: #fff; box-shadow: var(--shadow-card); } /* Neutrales Profil-/Personen-Symbol (eigene Illustration, Orange/Blau) – „MCLeut" ohne Toggle direkt sichtbar */ .hub-core__avatar { display: block; width: clamp(56px, 12vw, 72px); } .hub-core__avatar svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 6px rgba(10, 25, 48, 0.28)); } .hub-core__brand { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.1rem); letter-spacing: var(--tracking-tight); line-height: 1; color: #fff; } .hub-core__title { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--accent-100); line-height: var(--lh-snug); max-width: 24ch; } /* Tile-Grid (Basis, alle Breiten < 940px) */ .hub-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-8); } @media (min-width: 600px) { .hub-grid { grid-template-columns: repeat(6, 1fr); } .hub-tile { grid-column: span 2; } .hub-tile:nth-child(4) { grid-column: 2 / 4; } /* vorletzte: zentriert */ .hub-tile:nth-child(5) { grid-column: 4 / 6; } /* letzte: zentriert → kein lonely Element */ } .hub-tile { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--surface); border: var(--card-border); border-radius: var(--card-radius); padding: var(--card-pad); box-shadow: var(--card-shadow); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .hub-tile:hover, .hub-tile:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--primary-200); } .hub-tile:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .hub-tile .icon-badge { transition: background var(--transition), color var(--transition); } .hub-tile:hover .icon-badge { background: var(--accent-soft); color: var(--accent-strong); } .hub-tile h3 { margin-bottom: var(--space-2); font-size: var(--fs-h3); } .hub-tile p { color: var(--text-muted); margin: 0; } .hub-tile__more { margin-top: auto; padding-top: var(--space-4); color: var(--primary); font-weight: var(--fw-semibold); font-size: var(--fs-small); display: inline-flex; align-items: center; gap: var(--space-2); } .hub-tile__more svg { width: 16px; height: 16px; transition: transform var(--transition); } .hub-tile:hover .hub-tile__more { color: var(--accent-strong); } .hub-tile:hover .hub-tile__more svg { transform: translateX(4px); } /* Connector-SVG (nur Desktop sichtbar) */ .hub-wires { display: none; } /* Desktop-Orbit (ab 1000px: darunter würde das 3-Spalten-Raster + große Gaps den rechten Kachel-Rand über den Container schieben → H-Scroll; bis 1000px flaches Raster). */ @media (min-width: 1000px) { .hub { min-height: 560px; } .hub-core { position: absolute; inset: 0; margin: auto; width: 244px; height: 208px; z-index: 2; } .hub-wires { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .hub-wires line { stroke: var(--primary); stroke-width: 1.4; opacity: 0.28; transition: stroke var(--transition), opacity var(--transition); } .hub-wires circle { fill: var(--primary); opacity: 0.5; } .hub-grid { position: relative; z-index: 1; margin-top: 0; min-height: 560px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; align-items: center; gap: var(--space-6) var(--space-10); grid-template-areas: "t1 . t2" "t3 . t4" ". t5 ."; } .hub-tile { grid-column: auto; max-width: 300px; } .hub-tile:nth-child(1) { grid-area: t1; justify-self: start; } .hub-tile:nth-child(2) { grid-area: t2; justify-self: end; } .hub-tile:nth-child(3) { grid-area: t3; justify-self: start; } .hub-tile:nth-child(4) { grid-area: t4; justify-self: end; } .hub-tile:nth-child(5) { grid-area: t5; justify-self: center; } /* Connector hervorheben, wenn die zugehörige Kachel gehovert wird (:has, progressive) */ .hub:has(.hub-tile:nth-child(1):hover) .hub-wires .w1, .hub:has(.hub-tile:nth-child(2):hover) .hub-wires .w2, .hub:has(.hub-tile:nth-child(3):hover) .hub-wires .w3, .hub:has(.hub-tile:nth-child(4):hover) .hub-wires .w4, .hub:has(.hub-tile:nth-child(5):hover) .hub-wires .w5 { stroke: var(--accent-strong); opacity: 0.9; stroke-width: 2; } } /* 6. Prozess: alter .home-flow-Stepper entfernt → ersetzt durch .path-Timeline (Block 16). */ /* ---------------------------------------------------------------------------- 7. FAQ (native

, aus altem Inline-