/* JanMaxlife — globale Styles. Quelle fuer index.html UND alle Unterseiten (z.B. /news). Ausgelagert aus index.html, damit globale Bausteine ueberall gleich aussehen. */ /* ===== TT Norms — Marken-Schrift, selbst gehostet (wie leaderlogic.de). TT Norms hat KEINEN 600er-Schnitt: die Headlines stehen auf 600 und der Browser nimmt dafuer den naechsthoeheren echten Schnitt, Bold 700. Alles was keine Headline ist, steht bewusst auf 500 (Medium). ===== */ @font-face { font-family:"TT Norms"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/TT-Norms-Regular.woff2") format("woff2"); } @font-face { font-family:"TT Norms"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/TT-Norms-Medium.woff2") format("woff2"); } @font-face { font-family:"TT Norms"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/TT-Norms-Bold.woff2") format("woff2"); } @font-face { font-family:"TT Norms"; font-style:italic; font-weight:400; font-display:swap; src:url("fonts/TT-Norms-Italic.woff2") format("woff2"); } @font-face { font-family:"TT Norms"; font-style:italic; font-weight:700; font-display:swap; src:url("fonts/TT-Norms-Bold-Italic.woff2") format("woff2"); } @font-face { font-family:"Pe-icon-7-stroke"; src:url("icons/Pe-icon-7-stroke.woff") format("woff"); /* relativ zu assets/site.css */ font-weight:normal; font-style:normal; font-display:block; } :root { --bone:#FFFFFF; /* Haupt-Bühne: Weiß */ --paper:#F2F2F2; /* grafische Flächen — neutrales Hellgrau */ --ink:#1A1512; --bronze:#E0431F; --brass:#FF5A36; --community-scene-h:100svh; /* Section-Rhythmus — EIN Hebel für alle Haupt-Sections. 375px -> 40 / 160px, 1280px+ -> 150 / 250px, dazwischen stufenlos. */ --section-pt:clamp(40px, calc(12.15vw - 5.6px), 150px); --section-pb:clamp(160px, calc(9.95vw + 122.7px), 250px); --community-scroll-distance:clamp(260px,32svh,440px); --community-follow-gap:200px; } /* Haupt-Sections: Abstand kommt aus den Tokens, nicht aus Utilities. Ausgenommen bleiben Hero, Community-Pin, Parallax-CTA und Footer-Bereich. */ .sec { padding-top:var(--section-pt); padding-bottom:var(--section-pb); } * { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } html { scroll-behavior:smooth; } /* Die Familie steht ZUSAETZLICH in der Tailwind-Config (index.html) — traegt .font-sans, und diese Utility schlaegt jede reine body-Regel. Hier nur der Fallback. */ body { background:var(--bone); color:var(--ink); font-family:"TT Norms",system-ui,sans-serif; overflow-x:hidden; /* TT Norms bindet die st-Ligatur ("Syſtem", "Realiſtisch") ins STANDARD-Feature `liga` ein, nicht in dlig/hlig — nachgemessen: nur `liga` 0 aendert die Textbreite, dlig/hlig/clig tun nichts. Deshalb muss no-common-ligatures her. Kostet auch fi/fl, was bei dieser Schrift nicht auffaellt. */ font-variant-ligatures:no-common-ligatures; } ::selection { background:var(--brass); color:#1A1512; } .font-display { font-family:"TT Norms","ui-sans-serif",system-ui,sans-serif; letter-spacing:-0.02em; } /* Alle Headlines auf Weight 600. `body` davor, weil Tailwinds Preflight `h1..h3 { font-weight:inherit }` setzt und spaeter eingehaengt wird: bei gleicher Spezifitaet wuerde es gewinnen und die Headlines wuerden 400 vom body erben. */ body h1, body h2, body h3 { font-weight:600; } /* Akzentwort in der Headline: fett & gerade (nicht kursiv), Farbe kommt über text-bronze */ .ital { font-style:normal; font-weight:600; } .eyebrow { font-family:"TT Norms",sans-serif; text-transform:uppercase; letter-spacing:0.3em; font-size:0.72rem; font-weight:500; } /* Scroll-Reveal */ .reveal { opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.16,.84,.24,1), transform .9s cubic-bezier(.16,.84,.24,1); transition-delay:var(--d,0ms); will-change:opacity,transform; } .reveal.in { opacity:1; transform:none; } .link-underline { background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .45s cubic-bezier(.16,.84,.24,1); } .link-underline:hover { background-size:100% 1px; } /* Primärer CTA: Koralle-Akzent (Conversion-Signalfarbe) */ .btn-ink { background:var(--brass); color:#fff; transition:transform .3s ease, box-shadow .3s ease, background-color .3s ease; } .btn-ink:hover { transform:translateY(-2px); box-shadow:0 20px 44px -18px rgba(255,90,54,.6); background:var(--bronze); } .btn-ink:active { transform:translateY(0); } .lead-card { box-shadow:0 34px 90px -52px rgba(26,21,18,.58); } .lead-input { width:100%; border:1px solid rgba(26,21,18,.12); border-radius:14px; background:#fff; color:var(--ink); padding:15px 16px; font:500 16px/1.25 "TT Norms",system-ui,sans-serif; outline:none; transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .lead-input::placeholder { color:rgba(107,104,98,.72); font-weight:500; } .lead-input:focus { border-color:rgba(255,90,54,.7); box-shadow:0 0 0 4px rgba(255,90,54,.14); background:#fff; } .lead-field-label { display:block; margin-bottom:7px; color:var(--stone); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0; } .lead-status { min-height:1.4em; } .lead-form.is-submitting button[type="submit"] { opacity:.72; cursor:wait; transform:none; box-shadow:none; } .lead-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; } .optin-card { overflow:hidden; } .optin-success { min-height:380px; display:grid; place-items:center; text-align:center; } .optin-success[hidden] { display:none; } .success-check { width:96px; height:96px; display:grid; place-items:center; margin:0 auto 24px; border-radius:999px; background:rgba(255,90,54,.1); color:var(--bronze); animation:success-pop .55s cubic-bezier(.16,1,.3,1) both; } .success-check svg { width:62px; height:62px; } .success-check-circle { stroke-dasharray:166; stroke-dashoffset:166; animation:success-circle .72s cubic-bezier(.16,.84,.24,1) forwards .08s; } .success-check-path { stroke-dasharray:48; stroke-dashoffset:48; animation:success-check .46s cubic-bezier(.16,.84,.24,1) forwards .46s; } @keyframes success-pop { 0% { opacity:0; transform:scale(.82); } 70% { opacity:1; transform:scale(1.04); } 100% { opacity:1; transform:scale(1); } } @keyframes success-circle { to { stroke-dashoffset:0; } } @keyframes success-check { to { stroke-dashoffset:0; } } .stroke7-icon, .premium-check, .premium-mail-icon { display:inline-block; font-family:"Pe-icon-7-stroke"; speak:none; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; color:rgba(26,21,18,.62); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .stroke7-icon { display:block; /* Die Strichstaerke einer Icon-Font-Glyphe ist nicht aenderbar. Feiner wirken die Icons nur ueber die Farbe — hier bewusst blasser als der Text. */ color:rgba(26,21,18,.45); } .outcome-icon { width:74px; height:74px; font-size:74px; /* linksbuendig in der Karte; die Glyphe selbst bleibt in ihrer Box links */ margin-inline:0; text-align:left; } /* Erdkugel und Sanduhr laufen optisch groesser als die uebrigen -> 10% kleiner */ .outcome-icon.s7-world, .outcome-icon.s7-hourglass { width:66.6px; height:66.6px; font-size:66.6px; } .community-icon { width:52px; height:52px; margin-bottom:1rem; font-size:52px; } .premium-check { width:23px; height:23px; flex:0 0 23px; margin-top:1px; font-size:23px; color:rgba(26,21,18,.58); } .premium-mail-icon { width:18px; height:18px; flex:0 0 18px; font-size:18px; color:rgba(26,21,18,.56); } .s7-cash::before { content:"\e68c"; } .s7-hourglass::before { content:"\e6b7"; } .s7-world::before { content:"\e64f"; } /* Erdkugel (e691 war ein Globus auf Ständer) */ .s7-users::before { content:"\e693"; } .s7-comment::before { content:"\e668"; } .s7-medal::before { content:"\e6a0"; } .s7-check::before { content:"\e66c"; } .s7-mail::before { content:"\e639"; } .zoom-img { transition:transform 1.3s cubic-bezier(.16,.84,.24,1); } .zoom-wrap:hover .zoom-img { transform:scale(1.05); } /* Hero: rotierendes Wort */ /* Der Wechsler hat eine per JS reservierte Feste Breite (breitestes Wort). `white-space:nowrap` ist dabei Pflicht: sonst bricht ein zweiteiliges Wort wie "dein Wissen" INNERHALB seiner eigenen Box um, sobald die reservierte Breite nur ein Haar zu knapp ist. `text-align:left` dockt ihn links an, direkt hinter "Verwandle". */ .rot-word { display:inline-block; white-space:nowrap; text-align:left; color:#4F4C48; /* dunkles Grau statt des Koralle-Akzents */ } /* Wechsel-Animation: der alte Text verschwindet OHNE Uebergang (er wird einfach ersetzt), der neue gleitet 40px von rechts herein und bremst weich ab. Deshalb keine `transition` mehr auf .rot-word — die wuerde beim Textwechsel mitlaufen und ein Aus-Blenden erzeugen. Die Kurve cubic-bezier(.16,1,.3,1) ist stark ausgangsgedaempft: schneller Start, langes sanftes Auslaufen. */ @keyframes rot-rein { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:none; } } .rot-word.rein { animation:rot-rein .58s cubic-bezier(.16,1,.3,1) both; } /* Hero-Bild: natuerliche Proportion. Mobil skaliert es ueber die Breite, ab 1024px ueber die Hoehe der Textspalte — die Breite ergibt sich. */ /* Hero-Bild: mobil Querformat ueber die volle Breite, ab 1024px so hoch wie die Textspalte daneben und rechts an sie herangeschoben. Die Breite kommt aus dem aspect-ratio: .899 = natuerliches Verhaeltnis (.749) plus 20%. */ .hero-shot { position:relative; display:block; width:100%; aspect-ratio:4 / 3; } /* ===== Hero Variante 2 (gestapelt, aktiv): Bullets ueber der H1, Bild in voller Spaltenbreite darunter. =============================================== */ .hero-bullets { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 7px; margin:0 auto clamp(7px,1.6vw,14px); } .hero-bullets__rating { text-align:left; } /* Desktop-Groessen: -30% und anschliessend wieder +20% (14.08.2026), die Kundenprojekt-Zeile entsprechend -50% +20%. Basis waren 56px Avatare, 20px Sterne, 18px Text. `.hero-bullets img` (0,1,1) schlaegt Tailwinds `.sm\:w-14` (0,1,0); beim Overlap braucht es :not([hidden]) im Selektor, weil Tailwinds space-x-Regel selbst (0,3,0) hat. */ @media (min-width:640px) { .hero-bullets img { width:47px; height:47px; } .hero-bullets > div > img:not([hidden]) ~ img:not([hidden]) { margin-left:-10px; } .hero-bullets__rating svg { width:17px; height:17px; } .hero-bullets__rating > div { gap:6px; } .hero-bullets__rating span { font-size:15.1px; } .hero-bullets__rating p { font-size:10.8px; margin-top:2px; } } /* H1 nutzt die Spaltenbreite jetzt aus (vorher 20ch = deutlich schmaler). Die Schriftgroesse steht hier statt inline, damit sie mit der Breite zusammen an einem Ort liegt. */ .hero-h1 { max-width:none; margin-inline:auto; /* Werte von Jan (14.08.2026). line-height steht hier und nicht mehr inline im HTML — dadurch braucht es kein !important. */ font-size:clamp(2.7rem,6.48vw,3.78rem); line-height:.9em; text-wrap:balance; } .hero-sub { max-width:56ch; margin-inline:auto; } /* Mobil: Bullets in EINE Zeile — Avatare, Sterne und Text nebeneinander. Die Werte sind an 375px Viewportbreite ausgerechnet und dort gemessen. */ @media (max-width:639px) { /* Die REIHE ist einzeilig (Avatare neben dem Block), der Block selbst bleibt zweizeilig wie auf Desktop: Sterne + 4,9/5 oben, Kundenprojekte darunter. */ .hero-bullets { flex-wrap:nowrap; gap:8px 7px; justify-content:center; } .hero-bullets img { width:34px; height:34px; } .hero-bullets__rating { white-space:nowrap; } .hero-bullets__rating svg { width:13px; height:13px; } .hero-bullets__rating span { font-size:12.5px; } .hero-bullets__rating p { font-size:12.5px; margin-top:1px; } /* Wechsler mittig: auf Mobil bricht die H1 frei um, das Wort landet oft auf einer eigenen Zeile — linksbuendig in seiner festen Box saehe es dann aus der Mitte gerueckt aus. */ .rot-word { text-align:center; } } @media (max-width:379px) { /* Auf 360px-Geraeten sind nur 312px Innenmass da; mit 34px Avataren und 12,5px Text waeren es 320px — der Inhalt stand 8px ueber. Eine Stufe kleiner, damit die Reihe einzeilig bleibt. 375px+ bleibt unangetastet. */ .hero-bullets img { width:30px; height:30px; } .hero-bullets__rating p { font-size:11.5px; } } .hero-wide { position:relative; display:block; width:100%; /* Querformat 2,5:1 (Jans Wert, 14.08.2026). Die Quelle ist 1,667:1, es wird also senkrecht beschnitten — 67% bleiben sichtbar. Unten verankert, weil Jan auf 49..95% der Bildhoehe steht: Fenster 33..100%, er bleibt komplett im Bild. Bei noch flacheren Formaten (ab ca. 3,4:1) wuerde ihm der Kopf abgeschnitten. */ aspect-ratio:2.5 / 1; border-radius:10.75rem; overflow:hidden; } .hero-wide__img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 100%; } /* Handschrift-Notiz im Hero-Bild. Sitzt bewusst rechts der Bildmitte: links steht Jan, rechts ist heller Sand — dort traegt dunkle Schrift. Alles innerhalb der Figure, weil .hero-wide overflow:hidden hat; ein Pfeil ueber die Unterkante hinaus wuerde abgeschnitten. */ .hero-note { position:absolute; z-index:2; /* 41% + Pfeil-Einzug: die Pfeilspitze landet damit bei ~50% der Bildbreite, also genau ueber der Mitte des Buttons darunter (Bild und Button sind beide zentriert). Bei 46% zeigte der Pfeil an ihm vorbei. */ left:47%; bottom:5%; display:flex; flex-direction:column; align-items:flex-start; color:var(--ink); pointer-events:none; } .hero-note__text { font-family:"Caveat",cursive; font-weight:600; font-size:clamp(33px,3.5vw,44px); line-height:1; letter-spacing:-.01em; transform:rotate(-3.5deg); white-space:nowrap; } .hero-note__arrow { width:clamp(52px,6vw,86px); height:auto; /* Horizontal gespiegelt: der Bogen laeuft jetzt von rechts nach unten links. Deshalb sitzt der Pfeil am linken Rand der Notiz (vorher rechts) — sonst zeigte er vom Button weg. Die Notiz selbst steht weiter rechts, damit die Spitze ueber der Buttonmitte landet. */ transform:scaleX(-1); margin:2px 0 0 clamp(-6px,-0.4vw,0px); align-self:flex-start; } @media (max-width:639px) { /* Auf Mobil ist das Bild quadratisch und der Ausschnitt enger; die Notiz rutscht weiter nach rechts, damit sie nicht auf Jan liegt. */ .hero-note { left:auto; right:6%; bottom:7%; align-items:center; } .hero-note__arrow { margin-left:0; } } .hero-wide__scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(26,21,18,.18), transparent 55%); } @media (max-width:639px) { /* Auf Mobil hochkantiger: 4/3 ist SCHMALER als die Quelle, dadurch wird nur waagerecht beschnitten und Jan ist senkrecht ohnehin komplett drin. object-position-X 22% zentriert ihn im Ausschnitt. */ .hero-wide { aspect-ratio:4 / 4; border-radius:5.25rem; } .hero-wide__img { object-position:22% 50%; } } /* ===== Hero Variante 1 (zweispaltig) — ARCHIVIERT. Markup liegt in Website/Archiv/hero-v1-zweispaltig.html. Die Regeln bleiben hier, damit das Zurueckbauen eine reine HTML-Aktion ist. ====================================== */ /* object-position:0% -> Fenster 0..54% der Bildbreite (Desktop), Jan sitzt darin bei 41% und damit so mittig wie mit diesem Motiv erreichbar. Senkrecht wird nicht beschnitten, 50% ist deshalb nur Formsache. */ .hero-shot__img { display:block; width:100%; height:100%; object-fit:cover; object-position:0% 50%; } .hero-shot__scrim { position:absolute; inset:0; border-radius:1.75rem; pointer-events:none; background:linear-gradient(to top, rgba(26,21,18,.25), transparent 58%); } @media (min-width:640px) { .hero-shot { aspect-ratio:3 / 2; } } @media (min-width:1024px) { .hero-shot { height:100%; aspect-ratio:.899; width:auto; max-width:100%; margin-left:auto; margin-right:0; } .hero-shot__img { object-position:0% 50%; } } /* Community: kleiner Bildstart, wächst beim Scrollen */ #main { timeline-scope:--community-pin; } #community { view-timeline-name:--community-pin; view-timeline-axis:block; margin-top:0; /* Zieht den Folgeinhalt um die Scrollstrecke hoch, damit unter der Section kein Loch entsteht. Die Gegenbewegung dazu setzt das JS — zusammen mit der Szene aus DERSELBEN Rechnung, deshalb laufen beide exakt gleich. */ margin-bottom:calc(var(--community-scroll-distance) * -1); padding-top:0; padding-bottom:var(--community-follow-gap); } .community-expand-stage { /* Nicht mehr volle Viewport-Höhe: Bild + ~300px Luft oben und unten. Der Deckel (100svh - 240px) sorgt dafür, dass oben und unten immer ein Streifen der angrenzenden Sections sichtbar bleibt. */ --community-scene-h:min(calc(100svh - 240px), calc(var(--community-end-h) + 600px)); --community-progress:0; --community-end-w:min(97vw,1500px); --community-end-h:56vh; --community-scale-x:1; --community-scale-y:1; --community-img-scale-x:1; --community-img-scale-y:1; --community-radius:28px; position:relative; height:calc(var(--community-scene-h) + var(--community-scroll-distance)); min-height:0; overflow:visible; background:var(--bone); isolation:isolate; } .community-expand-sticky { /* KEIN position:sticky mehr. Der Browser haelt sticky im Compositor, der Folgeinhalt wird per JS gehalten — zwei Uhren, daher der Versatz. Jetzt setzt dasselbe JS beide im selben Frame (siehe updateCommunityExpand). */ position:relative; will-change:transform; /* Der Startversatz (mittig im Viewport) kommt jetzt aus dem JS-Transform. */ top:0; height:var(--community-scene-h); overflow:hidden; --community-cta-bottom:0px; --community-cta-gap:32px; --community-cta-h:56px; --community-cards-bottom:calc(var(--community-cta-bottom) + var(--community-cta-h) + var(--community-cta-gap)); --community-cards-gap:50px; --community-cards-h:152px; } .community-expand-stack { position:absolute; top:0; left:0; right:0; height:var(--community-scene-h); padding:0 clamp(1.25rem,3vw,2.5rem); } .community-expand-frame { position:absolute; z-index:1; left:50%; top:50%; width:var(--community-end-w); height:var(--community-end-h); max-width:97vw; transform:translate3d(-50%,-50%,0); will-change:transform; } .community-expand-media { position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:hidden; border-radius:var(--community-radius); will-change:transform,border-radius; transform:translate3d(0,0,0) scale(var(--community-scale-x), var(--community-scale-y)); transform-origin:center center; contain:paint; } .community-expand-media img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center 53%; transform:translate3d(0,0,0) scale(var(--community-img-scale-x), var(--community-img-scale-y)); transform-origin:center center; will-change:transform; backface-visibility:hidden; } .community-expand-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(236,235,231,.28), rgba(236,235,231,.16)); } .community-expand-copy { position:absolute; z-index:2; left:50%; top:50%; width:min(1440px,124vw); padding:0 clamp(1.25rem,4vw,3rem); color:var(--bone); text-align:center; transform:translate3d(-50%,-50%,0); pointer-events:none; } #community .community-expand-copy { color:#fff; } #community .community-expand-copy .eyebrow { color:rgba(255,255,255,.78); } .community-expand-copy h2 { max-width:none; margin-inline:auto; /* Schatten nur als weiche Absicherung der Lesbarkeit auf dem Foto — weit gestreut und schwach, damit er nicht als Schatten auffällt. Wert vom 16.08.2026: sehr weit gestreut (354px), damit er als Halo wirkt und nicht als harte Kante. */ text-shadow:0 0px 354px #000000; } .community-expand-copy p:not(.eyebrow) { margin-inline:auto; color:rgba(236,235,231,.82); text-shadow:0 8px 28px rgba(26,21,18,.18); } /* .community-copy-cta ist entfallen — der Button steht jetzt unter dem Kartenstapel in der Vorteile-Section (.vt-cta). */ .community-expand-cards { position:absolute; z-index:2; left:50%; bottom:var(--community-cards-bottom); width:min(1280px,100%); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin-top:0; padding:0 clamp(0rem,1.6vw,1.5rem); margin-inline:auto; transform:translate3d(-50%,0,0); } .community-cards-wrap { position:absolute; z-index:2; left:50%; bottom:var(--community-cta-bottom); width:min(1280px,100%); margin-top:0; padding:0 clamp(0rem,1.6vw,1.5rem); text-align:center; transform:translate3d(-50%,0,0); } .community-after-cta { margin-top:0; } .post-community-pin { position:relative; padding-bottom:var(--community-scroll-distance); } /* Der Wrapper wird NICHT mehr verschoben (14.08.2026). Die Gegenbewegung war die Kompensation fuer das negative margin oben; beides ist raus. Der Wrapper bleibt als Element bestehen, damit die bestehende Struktur und das JS-Handle gueltig sind — er ist jetzt aber ein reiner Container ohne Transform. */ .post-community-flow { will-change:transform; } @media (max-width:700px) { .community-expand-sticky { height:var(--community-scene-h); } .community-expand-stack { padding:0 1rem; } .community-expand-copy { width:116vw; text-align:center; } .community-expand-cards { grid-template-columns:1fr; gap:.75rem; width:min(460px,100%); } .community-expand-cards > div { display:grid; grid-template-columns:2.75rem 1fr; column-gap:.8rem; align-items:start; } .community-expand-cards .community-icon { width:44px; height:44px; margin-bottom:0; font-size:44px; } .community-expand-cards h3 { font-size:1rem; line-height:1.12; } .community-expand-cards p { grid-column:2; margin-top:.18rem; font-size:.88rem; line-height:1.35; } } @media (max-width:639px) { #community { view-timeline-name:none; margin-bottom:0; padding-bottom:56px; } .community-expand-stage { --community-mobile-parallax:0px; --community-mobile-copy-parallax:0px; height:auto; overflow:visible; } .community-expand-sticky { position:relative; top:auto; height:auto; overflow:visible; --community-cards-bottom:0px; } .community-expand-stack { position:relative; height:auto; padding:0; } .community-expand-frame { position:relative; left:auto; top:auto; bottom:auto; width:100vw; height:clamp(700px,82svh,800px); max-width:none; margin-inline:calc(50% - 50vw); transform:none; view-timeline-name:--community-mobile-parallax; view-timeline-axis:block; } .community-expand-media { transform:none; border-radius:0; box-shadow:none; } .community-expand-media img { top:-220px; height:calc(100% + 440px); transform:translate3d(0,-150px,0); animation:community-mobile-image-pan linear both; animation-timeline:--community-mobile-parallax; animation-range:entry -10% exit 105%; object-position:center center; } .community-expand-copy { width:100%; padding:0 1.1rem; top:50%; transform:translate3d(-50%,calc(-50% + 56px),0); animation:community-mobile-copy-pan linear both; animation-timeline:--community-mobile-parallax; animation-range:entry -10% exit 105%; } .community-expand-copy h2 { font-size:clamp(2.35rem,12vw,4.7rem) !important; line-height:.98 !important; } .community-expand-copy h2 span { white-space:normal; } .community-expand-cards { position:relative; left:auto; bottom:auto; width:min(460px,100%); margin:24px auto 0; padding:0; transform:none; } .community-cards-wrap { position:relative; left:auto; bottom:auto; width:min(460px,100%); margin:24px auto 0; padding:0; transform:none; } .post-community-pin { padding-bottom:0; } .post-community-flow { animation:none; transform:none; will-change:auto; } @keyframes community-mobile-image-pan { from { transform:translate3d(0,-150px,0); } to { transform:translate3d(0,150px,0); } } @keyframes community-mobile-copy-pan { from { transform:translate3d(-50%,calc(-50% + 56px),0); } to { transform:translate3d(-50%,calc(-50% - 56px),0); } } } /* FAQ-Ziffer — Vorbild leaderlogic.de (.faq-num): 34px-Kreis, Mono-Ziffer */ /* Abschluss-Zeile unter der FAQ — Muster von leaderlogic.de (.faq-contact) */ .faq-contact { text-align:center; margin:clamp(50px,6vw,80px) auto 0; font-size:17px; color:#6B6862; } .faq-contact a { color:var(--ink); font-weight:500; text-decoration:none; border-bottom:1.5px solid rgba(26,21,18,.28); padding-bottom:1px; transition:border-color .2s ease; } .faq-contact a:hover { border-color:var(--ink); } .faq-num { flex:0 0 34px; height:34px; border-radius:50%; background:rgba(26,21,18,.04); border:1px solid rgba(26,21,18,.15); display:inline-flex; align-items:center; justify-content:center; font-size:15px; line-height:1; color:#6B6862; } .faq-panel { max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.16,.84,.24,1); } .freedom-parallax { position:relative; min-height:50svh; /* Kein Full-Bleed mehr: eingerückter Block mit runden Ecken. overflow:hidden clippt Bild UND Overlay sauber am Radius — geht erst, seit unten nichts mehr aus der Section herausragt. */ width:95%; max-width:1200px; margin-inline:auto; border-radius:clamp(24px,2.6vw,40px); overflow:hidden; isolation:isolate; view-timeline-name:--freedom-parallax; view-timeline-axis:block; } .freedom-parallax__media { position:absolute; inset:0; z-index:0; overflow:hidden; } .freedom-parallax__image { position:absolute; /* top/height/pan sind gekoppelt: das Bild muss die Section in JEDER Phase der Bewegung decken -> oben: top + pan*height <= 0, unten: top + height - pan*height >= 100. Halbe Bewegung (±6% statt ±12%) erlaubt deshalb deutlich weniger Zoom: 135% statt 170% Bildhoehe = schaerferes Bild. */ top:-9%; left:0; width:100%; height:135%; max-width:none; object-fit:cover; object-position:center; transform:translate3d(0,-6%,0) scale(1.01); animation:freedom-image-pan linear both; animation-timeline:--freedom-parallax; animation-range:entry -10% exit 110%; will-change:transform; } .freedom-parallax::after { content:""; position:absolute; inset:0; z-index:1; /* Sehr heller Schleier statt Abdunkeln: das Bild tritt fast ins Weiss zurueck, damit die schwarze Typo darauf sicher liest. */ background:linear-gradient(90deg, rgba(255,255,255,.66), rgba(255,255,255,.56) 48%, rgba(255,255,255,.64)); } /* Social Proof ueber dem Bild: eine Zeile, zentriert, auf weissem Grund. Sterne in Akzentfarbe (auf dem Bild waren sie weiss). */ /* Seit 16.08.2026 traegt dieser Block zusaetzlich .hero-bullets und ist damit auf Desktop UND Mobil pixelgleich mit dem Hero — eine Gestaltung, ein Regelsatz. Hier bleibt nur der Aussenabstand; wer die Optik aendern will, aendert .hero-bullets und trifft beide Stellen. */ .freedom-proof { margin-bottom:clamp(20px,2.6vw,32px); } .freedom-content { position:relative; } /* Vertikaler Abstand = der Hebel dafuer, wie viel Himmel um die Typo steht. Frueher stand hier py-24 (96px) als Tailwind-Utility im HTML; die Regel hier ist zweiklassig (.freedom-parallax .freedom-content) und wuerde die Utility auch schlagen, wenn sie doch mal zurueckkaeme. */ .freedom-parallax .freedom-content { padding-top:clamp(112px,13vw,208px); /* Unten bewusst 50px flacher als oben: schiebt die Typo optisch nach oben in den Himmel, statt sie mittig ueber den Haeusern zu halten. */ padding-bottom:calc(clamp(112px,13vw,208px) - 50px); } /* Headline, Subline und CTA laufen jetzt normal im zentrierten Flex-Content — die frühere absolute Zentrierung war nur nötig, weil die Mockup-Karte unten aus der Section herausragte. */ .freedom-heading { width:min(100%,980px); } .freedom-sub { color:var(--stone,#6B6862); } @media (min-width:640px) { .freedom-content .freedom-sub { font-size:1.5rem; line-height:1.75rem; } } .freedom-outro { /* Der negative Versatz zog das frueher hier stehende Portrait halb ins Bild. Portrait ist raus (13.08.2026), also sitzt der Text jetzt normal darunter — sonst laeuft er in das Bild hinein. */ margin-top:clamp(18px,2vw,26px); position:relative; z-index:2; } .freedom-portrait { width:var(--freedom-portrait); height:var(--freedom-portrait); } @media (min-width:640px) { /* Zwei Klassen im Selektor: schlaegt die Tailwind-Utility unabhaengig davon, in welcher Reihenfolge das CDN seine Styles einhaengt. */ .freedom-outro .freedom-outro-text { font-size:1.1rem; line-height:1.45rem; } } @keyframes freedom-image-pan { from { transform:translate3d(0,-6%,0) scale(1.01); } to { transform:translate3d(0,6%,0) scale(1.01); } } @media (max-width:639px) { .freedom-parallax__image { top:-10%; height:150%; } .freedom-parallax::after { background:linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.54) 45%, rgba(255,255,255,.70)); } } .testimonial-grid { align-items:stretch; } /* Weicher Schwebe-Schatten auf allen Testimonial-Karten (Jans Wert). Der negative Spread haelt ihn eng unter der Karte statt sie einzunebeln. */ .testimonial-grid > article { box-shadow:0px 20px 80px -40px #ccc; } /* ===== Founder-Coverflow — 1:1 von leaderlogic.de (Section #founder) ====== Uebernommen sind alle Kennzahlen: Slot-Abstand, Kartenbreite, Radius, Timing und die Tiefen-Staffelung. Angepasst sind nur Farben und Schatten, weil leaderlogic auf Schwarz laeuft und diese Seite auf Weiss. Zwei Varianten wie im Original: Desktop > 991px : Hover-Akkordeon, Karte unter dem Zeiger kommt nach vorn Mobile <= 991px : horizontaler Drag-Slider (.is-slider) ====================================================================== */ .founder--coverflow .founder-inner { display:flex; flex-direction:column; align-items:center; } .founder--coverflow .founder-media { width:100%; display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2vw,24px); } .founder--coverflow .cf-text { max-width:760px; text-align:center; } .founder--coverflow .founder-eyebrow { margin:0 0 clamp(16px,2vw,24px); } .founder--coverflow .founder-title { margin:0 0 clamp(14px,2vw,22px); font-size:clamp(34px,4.4vw,50px); line-height:1.04; letter-spacing:-.03em; } .founder--coverflow .founder-bio, .founder--coverflow .founder-bio p { text-align:center; } .founder--coverflow .founder-bio { display:flex; flex-direction:column; gap:1rem; font-size:1.125rem; line-height:1.5; color:var(--stone,#6B6862); } .founder--coverflow .founder-socials { position:static; display:flex; gap:12px; justify-content:center; margin-top:clamp(22px,3vw,34px); } .cf-stage-wrap { position:relative; width:min(1040px,100%); } .coverflow { --cw:clamp(266px,31vw,406px); --card-radius:20px; --cf-ease:cubic-bezier(.16,1,.3,1); --cf-speed:.78s; --cf-build-ease:cubic-bezier(.19,1,.22,1); --cf-build-speed:2.34s; position:relative; width:100%; height:calc(var(--cw) * 4 / 3 * 1.16); touch-action:pan-y; cursor:default; user-select:none; } .coverflow.is-grabbing { cursor:grabbing; } .cf-stage { position:absolute; inset:0; } .cf-card { position:absolute; top:50%; left:50%; width:calc(var(--cw) * var(--card-w,1)); aspect-ratio:var(--img-ar,3/4); border-radius:var(--card-radius); overflow:hidden; background:var(--paper,#F2F2F2); --tx:0; --s:1; --blur:0px; --op:1; --bright:1; --z:50; --shift:0px; transform:translate(-50%,-50%) translateX(calc(var(--cw) * var(--tx) + var(--shift))) scale(var(--s)); z-index:var(--z); opacity:var(--op); /* brightness auf ALLE Karten, auch die aktive: die Fotos sind fuer einen schwarzen Hintergrund fotografiert und wirken auf Weiss zu schwer. */ filter:blur(var(--blur)) brightness(1.24); /* Keine dunklen Schatten mehr der Vorlage der Schatten dieser Seite — sonst wirkt der Stapel wie ausgeschnitten. */ transition:transform var(--cf-speed) var(--cf-ease), filter var(--cf-speed) var(--cf-ease), opacity var(--cf-speed) var(--cf-ease); will-change:transform, filter, opacity; } .cf-card[data-i="2"] { --z:80; } .coverflow.is-building .cf-card { transition:transform var(--cf-build-speed) var(--cf-build-ease), filter var(--cf-build-speed) var(--cf-build-ease), opacity var(--cf-build-speed) var(--cf-build-ease); } .cf-card img { width:100%; height:100%; object-fit:contain; object-position:center center; -webkit-user-drag:none; } /* Weisser Schleier statt Abdunkeln: opacity = 1 - --bright. Die aktive Karte hat --bright:1 und damit opacity:0, ist also unberuehrt. */ .cf-card::before { content:""; position:absolute; inset:0; z-index:2; background:#fff; opacity:calc(1 - var(--bright,1)); pointer-events:none; transition:opacity var(--cf-speed) var(--cf-ease); } .coverflow.is-building .cf-card::before { transition:opacity var(--cf-build-speed) var(--cf-build-ease); } /* Der dunkle Bodenverlauf der Vorlage ist entfernt — auf weissem Grund war er ein Schatten, und Schatten sollen hier keine sein. */ .cf-hint { display:none; } @media (prefers-reduced-motion:reduce) { .cf-card { transition:none; } } /* --- Mobile-Variante: Drag-Slider (identische Breakpoint-Grenze 991px) --- */ @media (max-width:991px) { .coverflow.is-slider { --cw:min(78vw,320px); height:calc(var(--cw) * 4 / 3 * 1.08); display:block; overflow:hidden; touch-action:pan-y; cursor:grab; padding:0; scrollbar-width:none; } .coverflow.is-slider.is-grabbing { cursor:grabbing; } .coverflow.is-slider::-webkit-scrollbar { display:none; } .is-slider .cf-stage { position:absolute; inset:0; display:block; } .is-slider .cf-card { position:absolute; top:50%; left:50%; width:calc(var(--cw) * var(--card-w,1)); aspect-ratio:var(--img-ar,3/4); transform:translate(-50%,-50%) translateX(calc(var(--cw) * var(--tx) + var(--shift))) scale(var(--s)); opacity:1; filter:blur(var(--blur)) brightness(1.24); transition:transform 2.145s cubic-bezier(.19,1,.22,1), filter 2.145s cubic-bezier(.19,1,.22,1), opacity 1.365s; } .coverflow.is-slider.is-grabbing .cf-card { transition:none; } .founder--coverflow .cf-stage-wrap { align-self:center; width:100vw; max-width:none; margin-inline:0; overflow:hidden; } } @media (max-width:639px) { .founder--coverflow .founder-eyebrow { margin-bottom:10px; } .founder--coverflow .founder-bio { font-size:1rem; } } /* ===== Vorteile: Karten-Stapel ========================================== Die Karten liegen mit GLEICHEN Abstaenden untereinander und scrollen normal hoch. Kopf, Karten, Button und der gesamte Folgeinhalt werden von einer einzigen Funktion im selben Frame verschoben (siehe JS-Block "Vorteile-Stapel"). Deshalb kann nichts gegeneinander verrutschen: waehrend der fertige Stapel steht, steht auch alles darunter. Kein position:sticky hier — zwei Uhren (Browser + JS) waren die Ursache aller Ungleichzeitigkeiten. ============================================ */ #vorteile { --vt-kopf-top:28px; --vt-stufe:11px; /* sichtbarer Rand je darunterliegender Karte */ --vt-luft:26px; /* Abstand Kopf -> erste Karte */ --vt-abstand:30px; /* gleicher Abstand zwischen allen Karten */ --vt-halten:0px; /* Haltezeit des fertigen Stapels. MUSS 0 bleiben, solange der Abstand zum Folgeinhalt konstant sein soll: waehrend der Stapel haelt, scrollt die Seite ja weiter — jeder Pixel Haltezeit schliesst also genau um diesen Pixel die Luecke nach unten. Beides zugleich geht nicht. */ --vt-kopf-h:190px; /* Startwert, das JS misst ihn einmalig nach */ --vt-karte-h:300px; /* einheitliche Kartenhoehe, das JS misst sie nach */ --vt-letzte:5; /* Index der letzten Karte (6 Karten) */ } .vt-block { display:flex; flex-direction:column; margin-top:clamp(40px,5vw,64px); } .vt-kopf { position:relative; z-index:7; /* ueber den Karten: Text bleibt lesbar */ background:var(--bone); /* Die Unterkante dieser Box liegt im Fluss EXAKT auf der Oberkante der ersten Karte (Naht 0.0000px). Der Kopf ist deckend und liegt mit z-index:7 ueber der Karte (z-index:1) — bei gebrochenem Device-Pixel- Ratio (gemessen 16.08.2026: DPR 1.5, also 150% Zoom oder ein skaliertes Display) rundet seine Compositing-Ebene beim Rastern nach unten und uebermalt genau die 1px-Zeile des border-top. Und zwar exakt ueber die Breite DIESER Box, sodass vom Kartenrand nur zwei Stummel an den Ecken stehen bleiben — das sieht aus wie "der Border ist weg". Loesung: 2px der Polsterung werden ein transparenter Rand, der Hintergrund endet an der Padding-Box. Der gemalte Grund hoert damit 2px ueber der Naht auf, die Border-Box bleibt millimetergenau gleich hoch — kopf.offsetHeight, Kartenpositionen und der Synchronlauf des Stapels aendern sich um exakt 0. WER HIER DIE POLSTERUNG ANFASST: padding-bottom + border-bottom muessen zusammen clamp(14px,1.8vw,26px) ergeben, sonst wandert der Anker. */ padding-bottom:calc(clamp(14px,1.8vw,26px) - 2px); border-bottom:2px solid transparent; background-clip:padding-box; max-width:none; width:100%; padding-inline:clamp(8px,1vw,16px); margin-inline:calc(clamp(8px,1vw,16px) * -1); /* Sticky statt JS-Transform. Der grosse untere Abstand ist KEIN Leerraum: er schiebt die Loese-Kante des Kopfes so weit nach unten, dass er exakt mit den Karten aufhoert zu kleben. Ein sticky-Element haelt, bis `Containerunterkante - eigene Hoehe - unterer Abstand` seinen top-Wert unterschreitet — ohne diesen Abstand bliebe die Ueberschrift rund 380px laenger stehen und wuerde die abziehenden Karten ueberdecken. Der optische Abstand zur ersten Karte bleibt --vt-luft: die erste Karte holt den Rest mit einem negativen oberen Abstand wieder herein. */ position:sticky; top:var(--vt-kopf-top); margin-bottom:calc(var(--vt-luft) + var(--vt-letzte) * var(--vt-stufe) + var(--vt-karte-h)); } .vt-kopf > * { max-width:48rem; margin-inline:auto; } /* ============================================================= ANTRIEB DES STAPELS — COMPOSITOR STATT MAIN-THREAD ------------------------------------------------------------- Bis 16.08.2026 setzte ein Scroll-Listener pro Frame --ty auf jede Karte. Gemessen (Compositor-Screencast einer echten Scroll-Geste, 1440x900): bis 82px sichtbarer Versatz des stehenden Stapels, bis 77px Sprung zwischen zwei Frames, darunter eine dauerhafte Vibration von ±0,5px, weil window.scrollY nur ganze Zahlen liefert, der Compositor aber gebrochen scrollt. Ein Frame kostete 3,13ms, davon 2,56ms allein das Schreiben von --vt-shift auf .post-vt-flow (470 Nachkommen, pauschale Subtree-Invalidierung) — auf einem Handy reicht das Budget dafuer nicht, daher war es mobil deutlich schlimmer. Die RECHNUNG war nie das Problem, nur der Ort. Dieselbe Formel ty = clamp(scroll - haltStart, 0, loesen - haltStart) ist ein linearer Verlauf von 0 bis (loesen - haltStart) ueber den Scrollbereich [haltStart, loesen] — also exakt eine Scroll-Driven Animation. Das JS rechnet die drei Zahlen nur noch EINMAL beim Laden und bei resize aus und schreibt sie als --vt-start / --vt-ende / --vt-weg. Im Scroll-Pfad laeuft danach keine Zeile JavaScript mehr. ============================================================= */ .vt-liste { display:flex; flex-direction:column; } .vt-luecke { flex:0 0 auto; height:var(--vt-abstand); } .vt-karte { position:relative; z-index:calc(var(--i) + 1); display:flex; align-items:flex-start; gap:clamp(20px,3vw,44px); padding:clamp(48px,8.4vw,102px); border-radius:1.5rem; background:#fffafa; /* Gemessen am 16.08.2026: seit die Karten mit #fffafa fast weiss sind, traegt NUR noch der Rand die Kartenform — der Koerper selbst hebt sich mit 5 von 255 Stufen nicht mehr vom weissen Grund ab. #eae6e6 liefert 13-21 Stufen Kontrast (der kleine Wert bei Breiten, in denen --ty auf einem halben Pixel landet und die Linie ueber mehrere Zeilen verschmiert). Mehr Definition, falls je gewuenscht: #e0dada = 19-26, #d8d0d0 = 23-36 Stufen. */ border:1px #eae6e6 solid; box-shadow:0px 20px 70px -30px #cfcfcf; /* Der Stapel: jede Karte klebt eine Stufe tiefer als die vorige. Der Browser haelt das im Compositor — deshalb kein Ruckeln, egal wie schnell gescrollt wird. Die einheitliche Hoehe ist Pflicht: eine sticky-Karte loest bei `Containerunterkante - top - Hoehe`; bei unterschiedlichen Hoehen loesen sie in falscher Reihenfolge und die Treppe faellt zusammen (gemessen: [0,0,0,0,18.6] statt [11,11,11,11,11]). */ position:sticky; top:calc(var(--vt-kopf-top) + var(--vt-kopf-h) + var(--vt-luft) + var(--i) * var(--vt-stufe)); /* Die Hoehen nehmen nach vorn um je eine Stufe ab, damit top + Hoehe fuer ALLE Karten gleich ist. Zwei Dinge folgen daraus zwangslaeufig: die Karten loesen gleichzeitig, und nach dem Loesen parkt jede an `Containerunterkante - eigene Hoehe` — also wieder eine Stufe versetzt. Ohne das parken alle auf derselben Zeile und die Treppe faellt kurz vor dem Abscrollen in sich zusammen (gemessen: Stufen von 11px auf 0px ueber 100px Scrollweg). Sichtbar ist die Hoehendifferenz nicht: von jeder Karte ausser der vordersten sieht man ohnehin nur die oberen --vt-stufe Pixel. --vt-karte-h ist die groesste natuerliche Kartenhoehe, gemessen vom JS; jede Karte ist also mindestens so hoch und kann nie beschneiden. */ min-height:calc(var(--vt-karte-h) + (var(--vt-letzte) - var(--i)) * var(--vt-stufe)); box-sizing:border-box; } /* Holt den Ausgleichs-Abstand des Kopfes wieder herein, sodass optisch genau --vt-luft zwischen Ueberschrift und erster Karte steht. In einem Flex- Container addieren sich benachbarte Margins, sie kollabieren nicht. */ .vt-liste > .vt-karte:first-of-type { margin-top:calc(-1 * (var(--vt-letzte) * var(--vt-stufe) + var(--vt-karte-h))); } /* Haltestrecke als echte Layouthoehe statt Transform: gemalte und gerechnete Hoehe koennen dadurch nicht mehr auseinanderlaufen (das war die Ursache des ueberzeichneten Footers). */ /* NUR die Haltezeit, sonst nichts. Der negative untere Abstand des Buttons verkuerzt den Container bereits um genau seine eigene Flusshoehe (40px Abstand + Buttonhoehe) — wer ihn hier noch einmal zurueckgibt, erzeugt exakt so viel zusaetzlichen Scrollweg, und um diesen Betrag schliesst sich die Luecke zum Folgeinhalt (gemessen: 101px). */ .vt-halt { flex:0 0 auto; height:var(--vt-halten); } .vt-karte .outcome-icon { flex:0 0 auto; margin-top:2px; } .vt-karte__text { min-width:0; max-width:62ch; } .vt-karte__text h3 { font-size:clamp(1.35rem,2.2vw,1.9rem); line-height:1.15; margin:0; } .vt-karte__text p { margin:.6rem 0 0; font-size:clamp(1rem,1.2vw,1.125rem); line-height:1.45; } /* Button und Folgeinhalt haengen an der letzten Karte. */ /* position+z-index sind Pflicht: die Karten tragen z-index 1..6, .vt-cta lag auf auto und wurde deshalb von ihnen ueberdeckt. Mobil ragten die hohen Spaltenkarten 19,3px ueber die Buttonoberkante — dort lieferte elementFromPoint die Karte statt den Button, der Button war also nicht nur halb verdeckt, sondern in dem Bereich auch nicht klickbar. Gemessen am 16.08.2026 bei 390x844. */ /* Der Button haengt gekoppelt 40px unter der letzten Karte. Dafuer klebt er selbst, mit einem top 40px unter deren Unterkante. Der negative untere Abstand schiebt seine Loese-Kante wieder auf dieselbe Linie wie die der Karten, sonst wuerde er 40px + eigene Hoehe zu frueh loesen; die Haltestrecke bekommt denselben Betrag zurueck, damit die Halte-Dauer gleich bleibt. --vt-cta-h misst das JS einmalig. */ .vt-cta { position:sticky; z-index:8; display:flex; justify-content:center; margin-top:40px; top:calc(var(--vt-kopf-top) + var(--vt-kopf-h) + var(--vt-luft) + var(--vt-letzte) * var(--vt-stufe) + var(--vt-karte-h) + 40px); margin-bottom:calc(-1 * (40px + var(--vt-cta-h, 89px))); } /* ============================================================= REGEL: STICKY UNTER EINEM VERSCHOBENEN WRAPPER ------------------------------------------------------------- Ein Vorfahr mit `transform` verschiebt jedes `position:sticky` darin optisch um genau denselben Betrag mit — der Browser rechnet die Sticky-Kante im unverschobenen Layout aus und schiebt danach alles. Gemessen am 16.08.2026: die "Dein Weg"-Headline dockte bei 478px statt 40px an, exakt 40 + 150 (post-vt-flow) + 288 (post-community-flow). Deshalb veroeffentlicht JEDER Flow-Wrapper seine Verschiebung als `--flow-versatz` (die der Wrapper ueber ihm eingerechnet), und JEDES Sticky darunter rechnet `top:calc( - var(--flow-versatz,0px))`. Wer einen neuen Wrapper einzieht: hier eine Zeile ergaenzen, sonst wandert jedes Sticky darunter still nach unten. ============================================================= */ .post-community-flow { --flow-versatz: var(--comm-shift, 0px); } /* Verschiebung und Korrektur kommen aus derselben Variable — eine Uhr, ein Wert. */ .post-community-flow { transform: translate3d(0, var(--comm-shift, 0px), 0); will-change:transform; } /* Die 150px, die #vorteile per negativem margin-bottom aus dem Layout nimmt, kommen hier ans Ende des Flows zurueck. Ohne das ist das Dokument um genau diesen Betrag zu kurz, waehrend der Transform den Inhalt so viel tiefer malt — der Footer liegt dann UNTER dem letzten Abschnitt und sieht aus, als fehle er. Gemessen am 16.08.2026: 150px Ueberlappung. Der Wert muss --vt-halten spiegeln; wer den einen aendert, aendert beide. */ @media (max-width:639px) { #vorteile { --vt-kopf-top:16px; --vt-stufe:7px; --vt-halten:0px; } .vt-karte { flex-direction:column; gap:14px; border-radius:1.25rem; } } /* Ohne JS oder bei reduzierter Bewegung: schlichte Liste, nichts haelt. */ @media (prefers-reduced-motion:reduce) { #vorteile { margin-bottom:0 !important; } .vt-karte, .vt-kopf, .vt-cta { position:static !important; } .vt-luecke { height:20px; } } html:not(.vt-js) #vorteile { margin-bottom:0; } html:not(.vt-js) .vt-luecke { height:20px; } /* ===== Nachgebauter WhatsApp-Screenshot (Dummy-Inhalt, spaeter durch echte, freigegebene Chats ersetzen). 1:1-FAKSIMILE des iOS-Screenshots: Farben pixelgenau gesampelt (PIL), Hintergrund = Original-Doodle-Kachel, umgefaerbt auf die gemessenen Toene (bilder/wa-wallpaper.png). Nachrichten laufen 30% groesser als Systemgroesse (= iPhone mit groesserer Textstufe, auf Jans Wunsch); Status- und Kopfzeile bleiben systemgross. Die Eingabezeile ist bewusst NICHT nachgebaut — der Ausschnitt endet wie ein beschnittener Screenshot im Chatverlauf. ===== */ .wa-card { position:relative; display:flex; flex-direction:column; overflow:hidden; background-color:#F4F1E9; /* gesampelt (Median) */ background-image:url("../bilder/wa-wallpaper.png?v=2"); background-size:100% auto; background-repeat:repeat-y; border:0; border-radius:0; /* Ein echter iPhone-Screenshot ist in SF Pro gesetzt, nicht in TT Norms. */ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-variant-ligatures:normal; letter-spacing:0; } /* Die iOS-Statusleiste (Uhrzeit, Empfang, WLAN, Batterie) ist am 16.08.2026 entfallen — sie kostete Hoehe, ohne etwas zu erzaehlen. Die Kopfzeile uebernimmt deshalb den oberen Abstand, den vorher die Statusleiste gab. */ /* --- Kopfzeile --- */ .wa-head { display:flex; align-items:center; gap:11px; padding:15px 17px 10px; background:#E9E8E4; } .wa-pill { display:flex; align-items:center; justify-content:center; background:#FFFBF5; color:#000; } .wa-pill--back { flex:0 0 auto; width:46px; height:46px; border-radius:50%; } .wa-pill--back svg { width:22px; height:22px; } /* Vermessen aus der Referenz: Pille 106x46pt, innen 15/29/14pt */ .wa-pill--actions { margin-left:auto; flex:0 0 auto; gap:29px; height:46px; padding:0 14px 0 15px; border-radius:23px; } /* Video + Hoerer sind ab hier keine Zeichnungen mehr, sondern per Alpha- Stanze aus Jans Original-Screenshot kopierte Stempel (data-URIs im Partial). Groesse = gemessene Pixel / 2.351 (Referenz-Skalierung). */ .wa-ic-video { width:30px; height:21px; } .wa-ic-phone { width:24px; height:24px; } .wa-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; flex:0 0 42px; } .wa-name { font-size:17px; font-weight:600; color:#000; line-height:1.2; letter-spacing:-.01em; } .wa-status { font-size:12.5px; color:#616161; line-height:1.25; margin-top:1px; } /* Schwaerzung wie mit dem iOS-Markup-Marker ueber Avatar und Namen. */ .wa-redact { position:relative; } .wa-head > .wa-redact { display:block; flex:0 0 42px; line-height:0; } .wa-name.wa-redact { display:inline-block; } .wa-redact > svg.wa-marker { position:absolute; inset:-2px -4px; width:calc(100% + 8px); height:calc(100% + 4px); pointer-events:none; } /* --- Verlauf. Am 16.08.2026 um 20% verkleinert, damit die Karten nicht so hoch bauen: aus den +30% (23px) werden 18,4px, also ungefaehr wieder Systemgroesse. Alle gekoppelten Masse sind mitskaliert. --- */ .wa-body { flex:1; display:flex; flex-direction:column; gap:6px; padding:11px 9px 18px; } .wa-day { align-self:center; margin:2px 0 10px; padding:3px 12px; border-radius:14px; background:#FDFDFD; /* gesampelt */ font-size:14.4px; font-weight:600; color:#000; line-height:1.2; } .wa-msg { position:relative; max-width:74%; /* Umbruchpunkt wie im Original */ padding:7px 11px 8px; border-radius:18px; font-size:18.4px; line-height:24px; color:#000; box-shadow:0 1px .5px rgba(11,20,26,.10); } /* Zipfel: geschwungen, unten aussen — und wie im Original NUR an der letzten Bubble einer Absender-Gruppe (die Pruefer haben es nachgemessen). */ .wa-msg::after { content:""; position:absolute; bottom:0; width:10px; height:14px; background-repeat:no-repeat; background-size:10px 14px; } .wa-in { align-self:flex-start; margin-left:10px; background:#FFF; border-bottom-left-radius:5px; } .wa-in::after { left:-9px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%2214%22%20viewBox%3D%220%200%209%2014%22%3E%3Cpath%20d%3D%22M9%200C8%205.5%205.5%209.8%201.8%2012.4%200.6%2013.2%201%2014%202.4%2014L9%2014Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E"); } .wa-out { align-self:flex-end; margin-right:10px; background:#D8FCD2; border-bottom-right-radius:5px; } .wa-out::after { right:-9px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%2214%22%20viewBox%3D%220%200%209%2014%22%3E%3Cpath%20d%3D%22M0%200C1%205.5%203.5%209.8%207.2%2012.4%208.4%2013.2%208%2014%206.6%2014L0%2014Z%22%20fill%3D%22%23D8FCD2%22%2F%3E%3C%2Fsvg%3E"); } .wa-in:has(+ .wa-in) { border-bottom-left-radius:18px; } .wa-in:has(+ .wa-in)::after { content:none; } .wa-out:has(+ .wa-out) { border-bottom-right-radius:18px; } .wa-out:has(+ .wa-out)::after { content:none; } /* Absenderwechsel bekommt mehr Luft als Nachrichten derselben Person */ .wa-in + .wa-out, .wa-out + .wa-in { margin-top:10px; } .wa-time { float:right; margin:10px 0 -2px 10px; font-size:12.8px; line-height:1; color:#656565; font-variant-numeric:tabular-nums; white-space:nowrap; } /* iOS toent den Zeitstempel auf Gruen mit ein (gemessen #52684D) */ .wa-out .wa-time { color:#52684D; } .wa-check { display:inline-block; width:17.6px; height:11.2px; margin-left:4px; vertical-align:-1px; } .testimonial-photo { position:relative; /* Flex-Spalte, damit der Inhaltsblock die volle Kartenhoehe bekommt. Ohne das ist er nur so hoch wie sein min-height, waehrend das Raster die Karte auf Zeilenhoehe streckt — die Typo klebte dann an der Unterkante des Inhaltsblocks statt an der der Karte (gemessen 16.08.2026: 128px statt 30px Abstand). */ display:flex; min-height:clamp(24.7rem,31vw,29.9rem); /* +30% */ } .testimonial-photo > .testimonial-photo__content { flex:1 1 auto; } .testimonial-photo--wide, .testimonial-photo--compact { min-height:clamp(24.7rem,31vw,29.9rem); } .testimonial-photo::after { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(26,21,18,0) 0%, rgba(26,21,18,.03) 46%, rgba(26,21,18,.84) 100%); } .testimonial-photo__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 14%; } .testimonial-photo__content { position:relative; z-index:1; min-height:inherit; display:flex; flex-direction:column; /* unten links verankert, oben bewusst viel Luft (+40%), damit der Kopf auf dem Foto frei steht und der Text nicht mittig zu haengen scheint */ justify-content:flex-end; align-items:flex-start; text-align:left; /* Unten und links exakt das Padding der Textkarten (.testimonial-text, weiter unten in dieser Datei) — die Typo sitzt damit auf allen Karten der Reihe auf derselben Kante, egal ob Foto oder Fläche. Wer den einen Wert ändert, muss den anderen mitziehen. Oben bleibt der grosse Freiraum, damit das Gesicht frei steht. */ padding:clamp(8rem,30vw,11rem) clamp(2.35rem,5.2vw,1.85rem) clamp(2.35rem,5.2vw,1.85rem); color:var(--bone); } .testimonial-photo__stars { display:flex; gap:.25rem; margin-bottom:.45rem; color:rgba(236,235,231,.72); } .testimonial-photo__title { max-width:min(100%,760px); font-size:clamp(2.5rem,3.88vw,2.96rem); line-height:1.05; font-weight:500; } .testimonial-photo--compact .testimonial-photo__title { max-width:560px; } .testimonial-photo__meta { display:flex; /* Zweizeilig wie in den Textkarten: Name oben, Rolle darunter. Der Trennpunkt entfaellt dadurch (siehe .testimonial-photo__dot). */ flex-direction:column; align-items:flex-start; gap:0; margin-top:.65rem; line-height:1.35; color:rgba(236,235,231,.74); } /* Rolle in derselben Groesse wie text-sm in den Textkarten */ .testimonial-photo__meta > span:last-child { font-size:.875rem; } .testimonial-photo__dot { display:none; } .testimonial-photo__meta strong { color:var(--bone); font-size:1.05rem; font-weight:500; } .testimonial-photo__dot { width:.34rem; height:.34rem; border-radius:999px; background:rgba(236,235,231,.42); } /* Avatare der Textkacheln 30% groesser als vorher (96px -> 125px) */ .testimonial-text__avatar { width:125px; height:125px; } .testimonial-text { min-height:100%; padding:clamp(1.35rem,2.2vw,1.85rem); } .testimonial-text h3 { margin-top:1rem; line-height:1; font-size:clamp(1.55rem,2.05vw,2rem); } .testimonial-text p { margin-top:.65rem; line-height:1.45; } .testimonial-text__meta { padding-top:1rem; } .testimonial-text__meta p { margin-top:0; line-height:1.35; } @media (max-width:767px) { .testimonial-photo, .testimonial-photo--wide, .testimonial-photo--compact { min-height:clamp(27rem,124vw,34rem); } .testimonial-photo__content { padding:clamp(2.8rem,11vw,4.9rem) 1.45rem 1.35rem; } .testimonial-photo__title { font-size:clamp(1.4rem,6.4vw,1.96rem); } } /* ===== Navigation (Markt­Leaders-System): Logo+CTA absolute (scrollen weg), Pille fixed (bleibt) ===== */ :root { --nav-h:48px; --nav-top:24px; --drawer-w:min(320px,86vw); --drawer-shift:calc(var(--drawer-w) * 0.58); } /* Auf Mobil sitzt die Navigation dichter am oberen Rand — passend zum kleineren Burger (45px/10px). --nav-top steuert Logo, Nav-Pille und CTA gemeinsam, deshalb reicht diese eine Zeile. */ @media (max-width:639px) { :root { --nav-top:10px; } } .ll-logo-abs { position:absolute; top:var(--nav-top); left:50%; transform:translateX(-50%); z-index:101; height:var(--nav-h); display:inline-flex; align-items:center; font-family:"TT Norms",sans-serif; font-weight:700; font-size:24px; line-height:1; color:var(--ink); letter-spacing:-0.02em; transition:transform .6s cubic-bezier(.16,1,.3,1); } body.m-drawer-open .ll-logo-abs { transform:translateX(-50%); } .ll-cta-abs { position:absolute; top:var(--nav-top); right:clamp(20px,3vw,40px); z-index:101; height:var(--nav-h); display:none; align-items:center; justify-content:center; gap:8px; padding:0 22px; font-family:"TT Norms",sans-serif; font-size:15px; font-weight:500; color:#fff; background:var(--brass); border-radius:999px; transition:transform .3s ease, box-shadow .3s ease, background-color .3s ease; } .ll-cta-abs:hover { transform:translateY(-2px); box-shadow:0 16px 36px -16px rgba(255,90,54,.6); background:var(--bronze); } .ll-nav-pill { position:fixed; top:var(--nav-top); left:50%; transform:translateX(-50%); z-index:102; height:var(--nav-h); display:flex; align-items:center; padding:0 8px 0 22px; background:rgba(26,21,18,.10); border-radius:999px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:background .4s ease; } .ll-nav-pill.is-scrolled { background:rgba(26,21,18,.85); } .ll-nav-pill ul { list-style:none; margin:0; padding:0; display:inline-flex; align-items:center; gap:34px; } .ll-nav-link { font-family:"TT Norms",sans-serif; font-size:14px; font-weight:500; color:rgba(26,21,18,.6); line-height:1.4; white-space:nowrap; transition:color .3s ease; } .ll-nav-pill.is-scrolled .ll-nav-link { color:rgba(236,235,231,.7); } .ll-nav-link:hover { color:var(--ink); } .ll-nav-pill.is-scrolled .ll-nav-link:hover { color:#fff; } .ll-nav-link--cta { padding:8px 18px; border-radius:999px; background:var(--brass); color:#fff !important; font-weight:500; transition:background .3s ease; } .ll-nav-link--cta:hover { background:var(--bronze); } .ll-nav-pill.is-scrolled .ll-nav-link--cta { color:#fff !important; } /* Burger + Drawer (gilt auf allen Breiten, auch Desktop) */ .m-burger { position:fixed; top:18px; right:18px; z-index:110; width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:50%; cursor:pointer; background:rgba(26,21,18,.10); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:transform .2s ease, background .4s ease; } .m-burger.is-scrolled { background:rgba(26,21,18,.85); } /* Nur Mobil kleiner und dichter in die Ecke — Tablet und Desktop behalten 52px/18px. Die Balken drin bleiben 22x14px, sie wirken im kleineren Kreis nur etwas praesenter. */ @media (max-width:639px) { .m-burger { top:10px; right:10px; width:45px; height:45px; } } .m-burger:active { transform:scale(.94); } .m-burger-bars { position:relative; width:22px; height:14px; display:block; } .m-burger-bars span { position:absolute; left:0; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .2s ease, top .32s cubic-bezier(.22,1,.36,1), background .4s ease; } .m-burger.is-scrolled .m-burger-bars span { background:#FFFFFF; } .m-burger-bars span:nth-child(1) { top:0; } .m-burger-bars span:nth-child(2) { top:6px; } .m-burger-bars span:nth-child(3) { top:12px; } body.m-drawer-open .m-burger-bars span:nth-child(1) { top:6px; transform:rotate(45deg); } body.m-drawer-open .m-burger-bars span:nth-child(2) { opacity:0; } body.m-drawer-open .m-burger-bars span:nth-child(3) { top:6px; transform:rotate(-45deg); } body.m-drawer-open .m-burger { background:transparent; } body.m-drawer-open .m-burger-bars span { background:#FFFFFF; } .m-drawer { position:fixed; top:0; right:0; bottom:0; width:var(--drawer-w); z-index:105; background:#1A1512; box-shadow:-24px 0 70px rgba(0,0,0,.18); transform:translateX(100%); transition:transform .5s cubic-bezier(.16,1,.3,1); overflow-y:auto; -webkit-overflow-scrolling:touch; display:block; } body.m-drawer-open .m-drawer { transform:translateX(0); visibility:visible; } .m-drawer-nav { padding:104px 40px 40px; display:flex; flex-direction:column; gap:6px; min-height:100%; box-sizing:border-box; } .m-drawer-nav a { display:block; padding:14px 0; font-family:"TT Norms",sans-serif; font-size:28px; font-weight:500; line-height:1.15; color:#FFFFFF; letter-spacing:-0.02em; transition:opacity .2s ease; } .m-drawer-nav a:hover { opacity:.7; } .m-drawer-nav .m-drawer-cta { margin-top:18px; align-self:flex-start; padding:14px 26px; font-family:"TT Norms",sans-serif; font-size:16px; font-weight:500; color:#fff; background:var(--brass); border-radius:999px; } .m-drawer-nav .m-drawer-cta:hover { background:var(--bronze); opacity:1; } .page-wrap { transition:transform .6s cubic-bezier(.16,1,.3,1); will-change:transform; } body.m-drawer-open { overflow:hidden; } body.m-drawer-open .page-wrap { transform:translateX(calc(0px - var(--drawer-shift))); } .m-overlay { position:fixed; inset:0; z-index:104; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .45s ease; } body.m-drawer-open .m-overlay { opacity:1; pointer-events:auto; } /* Desktop-Pille + Desktop-CTA sind abgeschaltet: überall Burger-Drawer */ .ll-cta-abs { display:none !important; } .ll-nav-pill { display:none !important; } @media (max-width:1100px) { .ll-logo-abs { font-size:21px; } } a:focus-visible, button:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:3px; } /* Feines Papier-Korn gegen flache Flächen */ body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:70; opacity:.035; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); } /* ============================================================= PAIN-STATEMENTS (Referenz: fast-hofmann.de · "ProblemStatements") Mechanik 1:1: Zeile ist voll kontrastiert, solange sie im mittleren 24%-Band des Viewports steht (IO-rootMargin -38%/-38%, togglet in BEIDE Richtungen), Farbübergang 500ms. Abweichung mit Absicht: Default = AKTIV. Das Dimmen schaltet erst JS zu (.js-dim) -> ohne JS bleibt jede Zeile voll lesbar. ============================================================= */ /* Zahlen in TT Norms wie der Rest der Seite. tabular-nums bleibt, damit die Ziffern gleich breit laufen und die Liste nicht zappelt. */ .mono-num { font-family:"TT Norms",system-ui,sans-serif; font-variant-numeric:tabular-nums; } .stmt-list { border-top:1px solid rgba(26,21,18,.13); border-bottom:1px solid rgba(26,21,18,.13); } .stmt-list .stmt-item { border-bottom:1px solid rgba(26,21,18,.13); } .stmt-list .stmt-item:last-child { border-bottom:0; } .stmt-num, .stmt-text { transition:color .5s ease; } .stmt-num { color:var(--bronze); } .stmt-text { color:var(--ink); } .js-dim .stmt-item:not(.is-active) .stmt-num { color:rgba(107,104,98,.40); } .js-dim .stmt-item:not(.is-active) .stmt-text { color:rgba(107,104,98,.45); } /* ============================================================= PRINZIPIEN (Referenz: fast-hofmann.de · "Vertrauensarchitektur") Sticky-Headline links, nummerierte Liste rechts, Hairlines, Ziffer färbt sich beim Hover der Zeile (300ms). ============================================================= */ .step-item { border-top:1px solid rgba(26,21,18,.13); } /* Kein Rand ueber dem ersten Schritt — er sitzt direkt unter der Headline. */ #dein-weg .step-item:first-child { border-top:0; } .step-item:last-child { border-bottom:1px solid rgba(26,21,18,.13); } /* Accent in der Headline ist ein Grauton, kein Koralle-Akzent (Jans Vorgabe). */ .step-accent { color:rgba(107,104,98,.62); } /* Ueberschriften der rechten Spalte laufen in normaler Textdicke — `body` davor ist Pflicht, sonst gewinnt die globale Regel `body h1, body h2, body h3 { font-weight:600 }` bei gleicher Spezifitaet. */ body #dein-weg .step-item h3 { font-weight:400; } /* Zahlen grau und dreifache Groesse. Die Basisgroesse kommt aus den Tailwind-Klassen text-sm/md:text-base am Element, deshalb hier feste px — sonst wuerde die Utility gewinnen. */ .step-num { color:rgba(107,104,98,.28); font-size:48px; line-height:1; transition:color .3s ease; } .step-item:hover .step-num { color:rgba(107,104,98,.48); } /* Gleicher Aufhell-Effekt wie in der Pain-Liste: gedimmt, bis die Zeile das mittlere Leseband erreicht — danach bleibt sie hell. */ .stmt-item h3, .stmt-item p, .stmt-item .step-num, .stmt-item .step-zahl { transition:color .5s ease; } .js-dim .stmt-item:not(.is-active) .step-zahl { color:rgba(107,104,98,.14); } .js-dim .stmt-item:not(.is-active) .step-num { color:rgba(107,104,98,.17); } .js-dim .stmt-item:not(.is-active) h3 { color:rgba(107,104,98,.42); } .js-dim .stmt-item:not(.is-active) p { color:rgba(107,104,98,.34); } /* Ohne `top` verhaelt sich position:sticky wie static — der Block klebte nicht, sondern stand einfach mittig in seiner Grid-Zelle. `align-self:start` ist Pflicht: sonst streckt das Grid die Zelle auf die Hoehe der langen rechten Spalte und der Block sitzt optisch in der Mitte. */ #dein-weg .step-head { top:calc(40px - var(--flow-versatz, 0px)); align-self:start; } /* Desktop-Ausbau: größere Typo + hohe Blöcke -> die rechte Spalte wird deutlich länger als die linke, dadurch klebt die Headline spürbar lange und der Sticky-Effekt wird auffällig. Mobil bleibt alles wie gehabt (dort ist die Spalte gestapelt, kein Sticky). */ @media (min-width:1024px) { #dein-weg h2 { font-size:72px; } /* 48px × 1,5 */ #dein-weg .step-item h3 { font-size:45px; } /* 30px × 1,5 */ #dein-weg .step-num { font-size:63px; } /* 21px × 3 */ /* Luft pro Schritt -> lange Klebe-Strecke für die Sticky-Headline. */ #dein-weg .step-item { padding-top:40px; padding-bottom:200px; } #dein-weg .step-item:last-child { padding-bottom:120px; } #dein-weg .step-item p { margin-top:18px; } /* Headline dockt 40px unter dem oberen Viewport-Rand an. */ #dein-weg .step-head { top:calc(40px - var(--flow-versatz, 0px)); align-self:start; } } /* Schritt 01 ist der Call-to-Action und bleibt immer voll kontrastiert. */ .js-dim .stmt-item[data-keep] .step-num { color:rgba(107,104,98,.48); } .js-dim .stmt-item[data-keep] h3 { color:var(--ink); } .js-dim .stmt-item[data-keep] p { color:#6B6862; } /* ============================================================= ZITAT-SLIDER in Handschrift (Referenz: leaderlogic.de · ks-quotes) Foto -> Caveat-Zitat -> Name. Crossfade, Story-Progress-Leiste statt Dots: aktives Segment ist breiter und fuellt sich ueber die Verweildauer, danach Auto-Advance. Klick + Pfeiltasten springen. ============================================================= */ .ksq-slider { max-width:640px; margin-inline:auto; outline:none; } .ksq-viewport { display:grid; position:relative; } .ksq-quote { grid-area:1 / 1; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s; pointer-events:none; } .ksq-quote.is-active { opacity:1; visibility:visible; transform:none; transition:opacity .5s ease, transform .5s ease, visibility 0s; pointer-events:auto; } /* Foto-Bühne: alle Portraits liegen übereinander, das aktive vorn, die kommenden kleiner + transparenter dahinter (Cover-Flow). Das JS schiebt die Bilder aus den Figuren hierher und animiert sie per inline-transform. */ .ksq-stage { position:relative; width:150px; height:150px; margin:0 auto 24px; } .ksq-cf-photo { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; } .ksq-photo { width:150px; height:150px; border-radius:50%; object-fit:cover; margin:0 0 24px; background:var(--bone); } .ksq-text { font-family:"Caveat",cursive; font-weight:400; font-size:clamp(43px,5.4vw,57px); line-height:1; letter-spacing:-1px; color:var(--ink); margin:0 0 5px; max-width:560px; } .ksq-word { white-space:nowrap; } .ksq-char { display:inline-block; transition:opacity .55s ease; } /* Verborgen NUR mit aktivem JS — faellt das Script aus, steht der Text da. */ html.ksq-js .ksq-char { opacity:0; } html.ksq-js .ksq-text.is-writing .ksq-char { opacity:1; } .ksq-meta { display:flex; flex-direction:column; gap:0; line-height:1.3; transition:opacity .8s ease; } html.ksq-js .ksq-meta { opacity:0; } html.ksq-js .ksq-quote.is-name-in .ksq-meta { opacity:1; } @media (prefers-reduced-motion: reduce) { .ksq-char { opacity:1 !important; } html.ksq-js .ksq-meta { opacity:1; } } .ksq-name, .ksq-role { font-size:17px; font-weight:400; letter-spacing:-.2px; color:#6B6862; } .ksq-segs { display:flex; justify-content:center; gap:8px; margin-top:38px; } .ksq-seg { position:relative; height:1px; width:16px; border-radius:999px; padding:0; border:0; cursor:pointer; background:rgba(26,21,18,.22); transition:width .8s cubic-bezier(.33,1,.68,1), background .5s ease; } .ksq-seg::after { content:""; position:absolute; left:0; right:0; top:-10px; bottom:-10px; } .ksq-seg:hover { background:rgba(26,21,18,.42); } .ksq-seg.is-active { width:72px; background:rgba(26,21,18,.14); } .ksq-seg__fill { position:absolute; left:0; top:0; height:100%; width:0; border-radius:999px; background:var(--bronze); } .ksq-seg:focus-visible { outline:2px solid var(--bronze); outline-offset:3px; } @media (max-width:560px) { .ksq-photo { width:132px; height:132px; } } /* ============================================================= STATEMENT (Referenz: leaderlogic.de · Portrait · Typewriter · Signatur) Buchstaben werden scroll-progress-gekoppelt aufgehellt. ============================================================= */ .statement-portrait { display:block; width:132px; height:132px; border-radius:50%; object-fit:cover; margin:0 auto 6px; } .statement-text { max-width:700px; margin-inline:auto; font-family:"TT Norms",system-ui,sans-serif; font-weight:500; font-size:clamp(24px,3.4vw,40px); line-height:1.2; letter-spacing:-.5px; color:var(--ink); } .statement-sign { text-align:center; margin:7px auto 0; } /* letter-spacing bewusst nur -2px: -6px (Original) ist auf einen langen Namen getunt und würde bei "Jan" die Buchstaben ineinanderschieben. */ .statement-name { font-family:"Caveat",cursive; font-size:clamp(112px,9.2vw,124px); font-weight:400; letter-spacing:-.032em; line-height:1.1; color:var(--ink); margin:0 0 10px; } .statement-role, .statement-cred { font-size:15px; font-weight:500; letter-spacing:.3px; color:#6B6862; margin:0; } .tw-char { display:inline-block; opacity:.3; transition:opacity .4s ease; } .tw-char.is-revealed { opacity:1; } .tw-word { display:inline-block; white-space:nowrap; } @media (max-width:600px) { .statement-text { font-size:clamp(19px,7vw,34px); max-width:98%; text-align:left; } .statement-portrait { width:122px; height:122px; } .tw-char { opacity:.13; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation:none !important; transition-duration:.01ms !important; } .reveal { opacity:1 !important; transform:none !important; } .success-check-circle, .success-check-path { stroke-dashoffset:0 !important; } .tw-char { opacity:1 !important; } } /* ===== Feineinstellungen aus dem Browser (Jan, 14.08.2026) ===== Beide Regeln zielen auf Tailwind-Utilities. Eine gleichnamige Klasse in dieser Datei wuerde VERLIEREN (gleiche Spezifitaet, Tailwind haengt sich spaeter ein), deshalb je ein Selektor mit hoeherer Spezifitaet. */ /* mt-7 auf .5rem — bewusst NUR fuer die Hero-Subline. Die Klasse sitzt auch an den 6 Icon-Karten-Headlines; global gesetzt wuerde sie die mitziehen. */ .hero-sub.mt-7 { margin-top:.5rem; } /* leading-relaxed auf 1.1 — ebenfalls NUR die Hero-Subline. Die Klasse haengt an 25 Elementen (fast jeder Absatz der Seite); global wuerde 1.1 den gesamten Fliesstext auf Durchschuss null zusammenziehen. */ .hero-sub.leading-relaxed { line-height:1.1; } /* Sterne-Abstand praktisch auf null. `div.gap-0\.5` statt `.gap-0\.5`, damit es Tailwind schlaegt. Betrifft beide Sterne-Reihen (Hero + Footer-CTA). */ div.gap-0\.5 { gap:0.001rem; } @media (min-width:640px) { /* sm:pt-40 auf 7rem statt 10rem, sm:pb-12 auf 1.5rem (Tailwind-Default ist hier schon 3rem). Beide kommen im Projekt nur am Hero-Container vor. */ /* `div.` zusaetzlich, damit diese Regeln die Basiswerte (#hero .pt-32 / .pb-10) unabhaengig von der Reihenfolge in der Datei schlagen — genau so wie sm:pt-40 in Tailwind pt-32 ueberschreibt. */ #hero div.sm\:pt-40 { padding-top:7rem; } #hero div.sm\:pb-12 { padding-bottom:1.5rem; } } /* pt-32 auf 6rem, pb-10 auf 1rem. Beide Klassen kommen im Projekt nur am Hero-Container vor; der #hero-Praefix ist hier fuer die Spezifitaet da. */ #hero .pt-32 { padding-top:6rem; } #hero .pb-10 { padding-bottom:1rem; } @media (max-width:639px) { /* Mobil noch flacher, weil die Navigation oben dichter sitzt. */ #hero .pt-32 { padding-top:5rem; } } /* mt-10 auf 1rem — nur die CTA-Reihe unter dem Hero-Bild. Die Klasse haengt auch am Testimonial-Slider und einem Statement-Block; global gesetzt wuerde sie deren Abstaende mitziehen. */ #hero .mt-10 { margin-top:1rem; }