/* 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 */ .rot-word { display:inline-block; transition:opacity .38s ease, transform .38s cubic-bezier(.16,.84,.24,1); } .rot-word.out { opacity:0; transform:translateY(-.35em); } /* 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-shot__img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 28%; } .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:50% 22%; } } /* 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; 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 { position:sticky; /* Mittig im Viewport andocken — die Szene ist kürzer als der Viewport, die Luft verteilt sich gleichmäßig oben und unten. */ top:calc((100svh - var(--community-scene-h)) / 2); 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. */ text-shadow:0 6px 184px rgb(0 0 0); } .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 { margin-top:clamp(20px,3.2vh,36px); display:flex; justify-content:center; pointer-events:auto; /* .community-expand-copy ist pointer-events:none */ } .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); } /* Die Gegenbewegung des nachfolgenden Contents wird vom selben rAF gesetzt wie das Aufziehen des Bildes (siehe updateCommunityExpand). Vorher lief sie als CSS-Scroll-Timeline auf einer zweiten Zeitachse — dadurch waren Bild und Content nie framegenau synchron und es sah aus wie ein Versatz. */ .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:-28%; left:0; width:100%; height:156%; max-width:none; object-fit:cover; object-position:center; transform:translate3d(0,-14%,0) scale(1.02); 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; background:linear-gradient(90deg, rgba(26,21,18,.72), rgba(26,21,18,.34) 48%, rgba(26,21,18,.48)); } .freedom-content { position:relative; } /* 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:rgba(236,235,231,.88); } @media (min-width:640px) { .freedom-content .freedom-sub { font-size:1.5rem; line-height:1.75rem; } } .freedom-outro { --freedom-portrait:clamp(96px,9vw,128px); /* halbe Portraithoehe nach oben -> Bildmitte liegt auf der Unterkante */ margin-top:calc(var(--freedom-portrait) / -2); 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,-14%,0) scale(1.02); } to { transform:translate3d(0,14%,0) scale(1.02); } } @media (max-width:639px) { .freedom-parallax__image { top:-36%; height:172%; } .freedom-parallax::after { background:linear-gradient(180deg, rgba(26,21,18,.58), rgba(26,21,18,.46) 45%, rgba(26,21,18,.66)); } } .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; } /* ===== 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; } /* --- Statusleiste. Die Uhrzeit sitzt wie beim iPhone im linken Notch-Ohr (~45px vom Rand), nicht am Kartenrand. --- */ .wa-statusbar { display:flex; align-items:center; justify-content:space-between; padding:16px 23px 2px 45px; background:#E9E8E4; /* gesampelt */ font-size:16px; font-weight:600; color:#000; font-variant-numeric:tabular-nums; } .wa-statusbar-left, .wa-statusbar-right { display:flex; align-items:center; } .wa-statusbar-left { gap:5px; } .wa-statusbar-right { gap:6px; } .wa-statusbar svg { display:block; } /* --- Kopfzeile --- */ .wa-head { display:flex; align-items:center; gap:11px; padding:6px 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. Nachrichten +30% (23px statt 18px System) --- */ .wa-body { flex:1; display:flex; flex-direction:column; gap:7px; padding:14px 11px 22px; } .wa-day { align-self:center; margin:2px 0 13px; padding:4px 15px; border-radius:18px; background:#FDFDFD; /* gesampelt */ font-size:18px; font-weight:600; color:#000; line-height:1.2; } .wa-msg { position:relative; max-width:74%; /* Umbruchpunkt wie im Original */ padding:9px 14px 10px; border-radius:23px; font-size:23px; line-height:30px; 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:12px; height:18px; background-repeat:no-repeat; background-size:12px 18px; } .wa-in { align-self:flex-start; margin-left:12px; background:#FFF; border-bottom-left-radius:5px; } .wa-in::after { left:-11px; 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:12px; background:#D8FCD2; border-bottom-right-radius:5px; } .wa-out::after { right:-11px; 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:23px; } .wa-in:has(+ .wa-in)::after { content:none; } .wa-out:has(+ .wa-out) { border-bottom-right-radius:23px; } .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:12px; } .wa-time { float:right; margin:13px 0 -2px 12px; font-size:16px; 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:22px; height:14px; margin-left:5px; vertical-align:-1px; } .testimonial-photo { position:relative; min-height:clamp(24.7rem,31vw,29.9rem); /* +30% */ } .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%; transition:transform 1.3s cubic-bezier(.16,.84,.24,1); } .testimonial-photo:hover .testimonial-photo__image { transform:scale(1.05); } .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 das Standard-Karten-Padding (36px wie bei den Vorteils-Karten), oben viel Freiraum, damit das Gesicht Platz hat */ padding:clamp(6rem,14vw,11rem) clamp(1.5rem,3vw,2.25rem) 2.25rem; 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(1.56rem,2.28vw,2.44rem); /* 20% kleiner */ line-height:1.05; font-weight:600; } .testimonial-photo--compact .testimonial-photo__title { max-width:560px; font-size:clamp(1.36rem,1.88vw,1.96rem); /* 20% kleiner */ } .testimonial-photo__meta { display:flex; align-items:center; gap:.7rem; margin-top:.65rem; color:rgba(236,235,231,.74); } .testimonial-photo__meta strong { color:var(--bone); font-size:1.05rem; font-weight:700; } .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); } .testimonial-photo__meta { flex-wrap:wrap; gap:.35rem .65rem; } .testimonial-photo__dot { display:none; } } /* ===== 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); } .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); } .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); } .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. ============================================================= */ .mono-num { font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; 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); } .step-item:last-child { border-bottom:1px solid rgba(26,21,18,.13); } .step-num { color:rgba(107,104,98,.5); transition:color .3s ease; } .step-item:hover .step-num { color:var(--bronze); } /* 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,.26); } .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); } /* 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:21px; } /* 16px × 1,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 50px unter dem oberen Viewport-Rand an. */ #dein-weg .step-head { top:50px; } } /* Schritt 01 ist der Call-to-Action und bleibt immer voll kontrastiert. */ .js-dim .stmt-item[data-keep] .step-num { color:var(--bronze); } .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:400; 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; } }