/* ============================================================================ kundenstimmen.css — "Kundenstimmen" Seite (Ergebnis-Kette) Baut 1:1 auf manifest.css auf (.ll-tl-* Timeline-Mechanik, manifest.js). Stand der Vorgaben (Jan, 22.07., mehrere Runden): - EIN durchgehender Strich: Rail ragt per --tl-rail-fade oben bis unter die Hero-Subline und unten länger ins Outro (Landing-Outro, sys-tl-*). - Rail-Füllung: nur der AKTIVE Kopfbereich ist Akzent-Grün, Durchlaufenes blendet nach Hellgrau (#aaa). Passierte Dots werden ebenfalls #aaa. - .ll-ks-result = "Ergebnis: …", größtes Element (500), Schlüsselwort Akzent - .ll-ks-quote = wörtliches Zitat darunter - Fotos eckig mit runden Ecken (Standard .ll-tl-shot), halbe Größe, rechtsbündig, DARUNTER Name + Rolle (keine Sterne, keine Akzent-Fläche) - Reveal wie Manifest beim Scrollen; Aktivierungs-Anker frueher (data-tl-anchor 0.78). Tokens (Farben/Fonts) aus styles.css; Outro-Styles aus system-timeline.css. ========================================================================== */ /* Seiten-Stellschrauben: mehr Weißraum zur Linie, Rail weit über/unter die Punkte hinaus (manifest.js liest --tl-rail-fade vom body) */ .ll-ks-body { --tl-gap: clamp(48px, 7vw, 120px); --tl-rail-fade: 340px; /* Panels ragen um die Headline-Höhe nach oben (ks-align) — der Block-Abstand bleibt dadurch trotzdem groß (23.07.: Desktop -20%) */ --tl-item-gap: clamp(304px, 32vh, 416px); } /* Timeline beginnt direkt aus dem Hero (kein eigener Section-Head); der Hero gibt der einlaufenden Linie UND der hochgezogenen ersten Headline Platz, Linie bleibt nah an der Subline */ .ll-ks-body .ll-mf-hero { padding-bottom: clamp(250px, 30vh, 340px); } .ll-ks-body .ll-tl-section { padding-top: clamp(16px, 4vh, 56px); } /* =========================================================================== HERO =========================================================================== */ /* Trust-Bullets (Globalelement) mit mehr Luft zur Headline */ .ll-ks-body .ll-mf-hero .hero-proof { margin: 0 auto clamp(30px, 4.5vh, 46px); } /* Subline: ~20% größer; Grundton grau, die Anker (strong) weiß und dicker. max-width so, dass die zweite Zeile auf Desktop nicht umbricht. */ .ll-ks-body .ll-mf-hero__sub { font-size: clamp(20px, 1.8vw, 25px); color: rgba(255, 255, 255, 0.6); max-width: 820px; } .ll-ks-body .ll-mf-hero__sub strong { color: #fff; font-weight: 500; } /* =========================================================================== TIMELINE-STATIONEN =========================================================================== */ /* "ERGEBNIS" — dezente Versalien-Zeile über der Headline: kursiv, ohne Pille, Abstand im Zeilen-Rhythmus der Headline (homogenes Raster) */ .ll-ks-result-tag { display: block; font-family: var(--sans); font-style: italic; font-weight: 400; /* nutzt den echten Italic-400-Schnitt (im deklariert) */ font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin: 0 0 5px; } /* Ergebnis-Zeile — dominantes Element, oben am Punkt */ .ll-ks-result { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.12; letter-spacing: -0.02em; color: #fff; margin: 0 0 26px; max-width: 480px; } .ll-ks-result em { font-style: normal; font-weight: inherit; color: var(--c-accent); } /* Punkt auf die erste Zeile der Ergebnis-Headline ausrichten */ .ll-ks-body .ll-tl-node { top: 14px; } /* Zitat — DARUNTER als dunkle WhatsApp-Bubble (#111), die Ecke zeigt nach links oben (klassischer Empfänger-Bubble-Tail) */ .ll-ks-quote { position: relative; font-family: var(--sans); font-weight: 300; letter-spacing: 0.5px; font-size: 23px; line-height: 1.3; color: rgba(255, 255, 255, 0.85); /* minimaler Lichtschein von links oben (#333 -> #111) */ background: linear-gradient(135deg, #333 0%, #1b1b1b 34%, #111 62%); border-radius: 36px; border-top-left-radius: 4px; padding: 28px 34px; margin: 0; max-width: 480px; width: fit-content; } .ll-ks-quote::before { content: ""; position: absolute; top: 0; left: -10px; width: 0; height: 0; border-top: 12px solid #303030; /* passt zum hellen Verlaufs-Eck */ border-left: 12px solid transparent; } /* Verified-Badge unter der Bubble (Seal mit Haken, gedecktes Akzentgrün) */ .ll-ks-verified { display: flex; align-items: center; gap: 8px; margin: 14px 0 0 34px; /* auf der Text-Einrückung der Bubble */ font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: rgba(var(--c-accent-rgb), 0.75); } .ll-ks-verified__icon { width: 20px; height: 20px; color: var(--c-accent); opacity: 0.9; flex-shrink: 0; } /* Foto — halbe Größe, Standard-Ecken aus manifest.css, ohne Akzent-Fläche */ .ll-ks-media.ll-tl-media::before { display: none; } /* Station 1: manifest.js setzt den ersten Punkt bewusst auf 10% der Bildhöhe (Manifest-Look) und kompensiert margin-Overrides. Hier auf ECHTE Mitte umbiegen: Panel-Transform übernimmt das JS-vshift minus 40% der Bildhöhe (Bildhoehe ~275px -> 110px). Nur Desktop, Mobile stapelt. */ .ll-ks-body .ll-tl-item:first-child .ll-tl-panel--media { transform: translateY(calc(var(--tl-vshift, 0px) - 110px)); } /* Phantom-Endpunkt: nur Messpunkt für die Rail, nichts anzeigen */ .ll-ks-phantom { padding-bottom: 0 !important; } .ll-ks-phantom .ll-tl-dot { visibility: hidden; } /* Outro (Check + Headline): bewusst KEINE Overrides — Größen, Abstände und Animation kommen 1:1 aus system-timeline.css (Landing). */ .ll-ks-media .ll-tl-shot { width: 210px; aspect-ratio: 210 / 275; /* Hochformat (Jans DevTools-Werte 23.07.) */ border-radius: 48px; /* nur hier — Manifest behaelt seine 18px */ margin-left: auto; } .ll-ks-media .ll-tl-shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.9); } /* Person — UNTER dem Foto, rechtsbündig zur Linie (wie das Foto). Größen exakt nach Jans DevTools-Werten (22.07.). */ .ll-ks-person { text-align: right; margin: 13px 10px 0; } .ll-ks-person p { margin: 0; } .ll-ks-name { font-family: var(--sans); font-weight: 500; font-size: 34px; line-height: 1.15; color: #fff; } .ll-ks-role { font-family: var(--sans); font-size: 22px; line-height: 1.3; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.49); margin-top: 0 !important; } /* =========================================================================== LINIE: Akzent nur im aktiven Kopfbereich, Durchlaufenes wird Hellgrau =========================================================================== */ /* Der Fill wächst per JS nach unten; die unteren ~90-340px sind der grüne "Kopf", alles darüber blendet nach #aaa (bei kleiner Füllhöhe clampen die calc()-Stops auf 0 -> Start ist komplett grün). */ .ll-ks-body .ll-tl-rail__fill { background: linear-gradient( 180deg, rgba(170, 170, 170, 0.85) 0%, rgba(170, 170, 170, 0.85) calc(100% - 340px), var(--c-accent) calc(100% - 90px), var(--c-accent) 100% ); } /* Passierte Stationen (es folgt bereits eine weitere aktive): Dot wird grau */ .ll-ks-body .ll-tl-item.is-active:has(~ .ll-tl-item.is-active) .ll-tl-dot { background: #aaa; border-color: #aaa; transform: scale(1); box-shadow: none; } /* =========================================================================== STANDORT — Mediapark-Panorama (Karte mit runden Ecken, Fluchten-Netz, Google-Pin + Bubble, Impulse, dezenter Parallax) =========================================================================== */ .ll-ks-hq { padding: clamp(70px, 10vh, 130px) 0 clamp(50px, 7vh, 100px); overflow: hidden; } .ll-ks-hq__head { max-width: 980px; margin: 0 auto -60px; padding: 0 var(--pad); text-align: center; } .ll-ks-hq__title { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin: 0; } .ll-ks-hq__title em { font-style: normal; color: var(--c-accent); } .ll-ks-hq__sub { margin: 18px auto 0; max-width: 640px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, 0.6); } /* Bühne: Karte (kein Vollbild) mit runden Ecken; UNTEN harter Cut, OBEN löst sich der Himmel sehr weich im Seiten-Schwarz auf (Maske) */ .ll-ks-hq__stage { /* --hq-scale = horizontaler Zoom (links/rechts croppt). --frac-top = wie viel Bild oben abgeschnitten wird (Frame startet knapp ueber der Antenne). */ --hq-scale: 1.22; --hq-x: -21%; --frac-top: 0; --stage-w: min(2000px, 90vw); position: relative; margin: 0 auto; width: var(--stage-w); height: calc(var(--stage-w) * var(--hq-scale) * 0.5351 * (1 - var(--frac-top))); } /* Viewport = sichtbarer Kartenausschnitt: runde Ecken, clippt, oben weicher Auslauf */ .ll-ks-hq__viewport { position: absolute; inset: 0; border-bottom-left-radius: 150px; border-bottom-right-radius: 150px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 15%, #000 29%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 15%, #000 29%); } /* World = die volle Panorama-Ebene (Bild + Netz + Bubble). EIN Crop-Transform. Zoomen/Verschieben = nur --hq-zoom / --hq-x / --hq-y aendern. */ .ll-ks-hq__world { position: absolute; left: var(--hq-x); top: calc(-1 * var(--frac-top) * var(--stage-w) * var(--hq-scale) * 0.5351); width: calc(var(--hq-scale) * 100%); aspect-ratio: 1867 / 999; } .ll-ks-hq__img { display: block; width: 100%; height: 100%; object-fit: fill; /* world hat exakt Bild-Aspect -> keine Verzerrung */ filter: saturate(0.5) brightness(0.7) contrast(1.05); } /* Netz 1:1 ueber dem Bild (gleiche Pixelkoordinaten) */ .ll-ks-hq__net { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; /* styles.css klemmt svg global */ overflow: visible; z-index: 3; pointer-events: none; } .ll-ks-hq__grid path { fill: none; stroke: rgba(var(--c-accent-rgb), 0.62); stroke-width: 1.7; } .ll-ks-hq__grid path.b { stroke: rgba(var(--c-accent-rgb), 0.48); stroke-width: 1.3; } .ll-ks-hq__grid path.q { stroke: rgba(var(--c-accent-rgb), 0.42); stroke-width: 1.3; } .ll-ks-hq__grid circle { fill: var(--c-accent); opacity: 0.75; } .ll-ks-hq__grid circle.g { animation: ll-ks-net-pulse 3.4s ease-in-out infinite; } .ll-ks-hq__grid circle.g:nth-of-type(2n) { animation-delay: 1.1s; } .ll-ks-hq__grid circle.g:nth-of-type(3n) { animation-delay: 2.2s; } @keyframes ll-ks-net-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } .ll-ks-hq__pulses line { stroke: url(#ks-imp); stroke-width: 2.6; stroke-linecap: round; } /* Google-Pin + pulsierender Boden-Ring */ .ll-ks-hq__marker-pin { fill: var(--c-accent); } .ll-ks-hq__marker-dot { fill: #0c1206; } .ll-ks-hq__marker-puls { fill: none; stroke: rgba(var(--c-accent-rgb), 0.55); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: ll-ks-marker-puls 2.6s ease-out infinite; } @keyframes ll-ks-marker-puls { 0% { transform: scale(0.55); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } } .ll-ks-hq__marker { opacity: 0; } .ll-ks-hq__stage.is-in .ll-ks-hq__marker { animation: ll-ks-fade-in 0.8s ease 0.15s both; } @keyframes ll-ks-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Bubble liegt IM world (Prozent = Bild-Fraktion) -> haengt fest am Pin (43.9% / 75.9%) */ .ll-ks-hq__bubble { position: absolute; left: 45.5%; top: 66%; z-index: 4; display: flex; flex-direction: column; gap: 1px; font-family: var(--sans); color: rgba(255,255,255,0.6); background: rgba(10,10,11,0.9); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; border-bottom-left-radius: 4px; padding: 0.6em 0.9em; box-shadow: 0 16px 30px -12px rgba(0,0,0,0.7); opacity: 0; white-space: nowrap; } .ll-ks-hq__bubble-brand { font-size: clamp(12px, 1vw, 15px); font-weight: 500; line-height: 1.2; color: rgba(255,255,255,0.82); } .ll-ks-hq__bubble-brand strong { font-weight: 700; } .ll-ks-hq__bubble-loc { font-size: clamp(10px, 0.8vw, 12px); font-weight: 400; letter-spacing: 0.02em; color: rgba(255,255,255,0.48); line-height: 1.25; margin-top: 1px; } .ll-ks-hq__stage.is-in .ll-ks-hq__bubble { animation: ll-ks-bubble-in 0.9s cubic-bezier(0.16,1,0.3,1) 0.45s both; } @keyframes ll-ks-bubble-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } } /* Booking-Karte rechts, vertikal zentriert */ .ll-ks-hq__cta { position: absolute; top: 50%; right: clamp(114px, 4%, 148px); transform: translateY(-50%); z-index: 6; width: clamp(300px, 27%, 432px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: clamp(18px, 1.5vw, 24px); background: #fff; border-radius: 56px; box-shadow: 0 103px 140px -57px rgba(0, 0, 0, 0.7); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; } .ll-ks-hq__cta:hover { transform: translateY(-50%) scale(1.015); box-shadow: 0 46px 100px -28px rgba(0,0,0,0.75), 0 12px 34px -12px rgba(0,0,0,0.5); } .ll-ks-hq__cta-portrait { width: 100%; aspect-ratio: 3 / 1.6; border-radius: 46px; overflow: hidden; background: #ededee; } .ll-ks-hq__cta-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 21% 56%; } .ll-ks-hq__cta-title { font-family: var(--sans); font-weight: 500; font-size: clamp(26px, 2.15vw, 33px); line-height: 1.12; letter-spacing: -0.015em; color: #0d0d0f; margin-top: 2px; } .ll-ks-hq__cta-body { font-family: var(--sans); font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.5; color: #6b6b70; } .ll-ks-hq__cta-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 4px; padding: 20px 22px; border-radius: 22px; background: #0d0d0f; color: var(--c-accent); font-family: var(--sans); font-weight: 500; font-size: clamp(18px, 1.4vw, 22px); letter-spacing: 0.01em; transition: background 0.2s ease; } .ll-ks-hq__cta:hover .ll-ks-hq__cta-btn { background: #1a1a1c; } .ll-ks-hq__cta-note { font-family: var(--sans); font-size: 13px; letter-spacing: 0.02em; color: #9c9ca2; } /* Koordinaten/Adresse — dezent unten links (rechts ist die Karte) */ .ll-ks-hq__coords { position: absolute; left: clamp(18px, 3vw, 44px); bottom: clamp(14px, 2.2vw, 26px); z-index: 4; margin: 0; font-family: var(--sans); font-size: clamp(10px, 0.9vw, 13px); letter-spacing: 0.08em; color: rgba(255,255,255,0.55); } @media (prefers-reduced-motion: reduce) { .ll-ks-hq__pulses, .ll-ks-hq__marker-puls { display: none; } .ll-ks-hq__world { transform: none; } .ll-ks-hq__marker, .ll-ks-hq__bubble { opacity: 1 !important; animation: none !important; } } /* =========================================================================== RESPONSIVE =========================================================================== */ @media (max-width: 860px) { /* Einspaltig — Reihenfolge (Jan): Foto -> Name/Rolle -> Bubble -> Ergebnis. Media-Panel nach oben, im Text-Panel dreht Flex die Bubble vors Ergebnis. */ .ll-ks-body .ll-tl-panel--media { order: 1; } .ll-ks-body .ll-tl-panel--text { order: 2; display: flex; flex-direction: column; } .ll-ks-body .ll-ks-quote { order: 1; } .ll-ks-body .ll-ks-verified { order: 1; } /* direkt nach der Bubble (gleiche Order, DOM-Folge) */ .ll-ks-body .ll-ks-result-tag { order: 2; margin: 26px 0 5px; } .ll-ks-body .ll-ks-result { order: 3; margin: 0; } .ll-ks-body .ll-tl-item:first-child .ll-tl-panel--media { transform: none; } .ll-ks-media .ll-tl-shot { width: 180px; margin-left: 0; } .ll-ks-person { text-align: left; margin: 13px 0 0; } .ll-ks-result { font-size: clamp(30px, 7.2vw, 39px); } .ll-ks-quote { font-size: clamp(21px, 5.4vw, 24px); } /* Bubble-Tail zeigt nach OBEN zur Person (Sprecher), leicht eingerückt statt ganz in der Ecke; Eckradius dadurch wieder voll */ .ll-ks-quote { border-top-left-radius: 16px; } .ll-ks-quote::before { top: -10px; left: 22px; border-top: none; border-left: none; border-bottom: 12px solid #303030; border-right: 12px solid transparent; } /* Punkt auf die Y-Mitte des Fotos (Foto ist das oberste Element, 170px breit -> ~160-170px hoch, Mitte ~80px) */ .ll-ks-body .ll-tl-node { top: 107px; } /* Mobile: Stationsabstand -50% gegenüber Desktop-Basis */ .ll-ks-body { --tl-rail-fade: 160px; --tl-item-gap: clamp(190px, 20vh, 260px); } .ll-ks-body .ll-mf-hero { padding-bottom: clamp(90px, 14vh, 160px); } } @media (max-width: 600px) { /* Globale Mobile-Regel kappt h1-h3 auf --mobile-headline-max und setzt margin-left:0 — für die zentrierten Titel dieser Seite aufheben. .ll-ks-result bleibt linksbündig, nur die Kappung lösen. */ .ll-ks-body .ll-mf-hero__title { max-inline-size: none; margin-left: auto; margin-right: auto; } .ll-ks-body .ll-ks-result { max-inline-size: none; } } @media (max-width: 480px) { .ll-ks-result { font-size: clamp(28px, 8.2vw, 34px); } .ll-ks-quote { font-size: 22px; } }