/* ========================================================================== GROWIT — Leistungs-Detailseiten · ELEVATION-Layer ("pro") Lädt NACH site.css, leistungen.css, leistung-detail.css, leistung-plus.css. Zweck: mehr Ruhe & Eleganz, edlere Bild-Rahmung, feinere Bewegung, stärkere Hero-Bereiche — und pro Seite eine eigene Farb-Note (data-accent). Alles ist unter .lpage gekapselt; die KI-Seite (ki-auto-page) bleibt unberührt. ========================================================================== */ /* ------------------------------------------------------------------ * 0) Akzent-Tokens · jede Seite bekommt über ihre Note * ------------------------------------------------------------------ */ .lpage { --acc: #5271FF; /* dekorativer Hauptakzent */ --acc-2: #27E6FF; /* Verlauf-Partner */ --acc-ink: #4258E6; /* lesbarer Text-Akzent */ --acc-rgb: 82,113,255; --acc-2-rgb: 39,230,255; } .lpage[data-accent="royal"] { --acc:#5271FF; --acc-2:#27E6FF; --acc-ink:#4258E6; --acc-rgb:82,113,255; --acc-2-rgb:39,230,255; } .lpage[data-accent="cyan"] { --acc:#27E6FF; --acc-2:#5271FF; --acc-ink:#4258E6; --acc-rgb:39,230,255; --acc-2-rgb:82,113,255; } .lpage[data-accent="violet"] { --acc:#7C4DFF; --acc-2:#5271FF; --acc-ink:#6B3FE0; --acc-rgb:124,77,255; --acc-2-rgb:82,113,255; } .lpage[data-accent="indigo"] { --acc:#4A2ED0; --acc-2:#5271FF; --acc-ink:#4A2ED0; --acc-rgb:74,46,208; --acc-2-rgb:82,113,255; } .lpage[data-accent="ice"] { --acc:#27E6FF; --acc-2:#280F91; --acc-ink:#1F7FA8; --acc-rgb:39,230,255; --acc-2-rgb:40,15,145; } /* ------------------------------------------------------------------ * 1) Typografie: mehr Ruhe & Eleganz * ------------------------------------------------------------------ */ .lpage .ldx-hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.9rem); letter-spacing: -.046em; line-height: 1.015; } .lpage .ldx-hero .lead { margin-top: 24px; font-size: clamp(1.08rem, 1.45vw, 1.3rem); line-height: 1.62; color: #48506B; max-width: 60ch; } /* Verlaufstext im Hero nimmt die Seiten-Note auf. Endet bewusst auf --acc-ink (lesbar) statt auf hellem Cyan → überall guter Kontrast. */ .lpage .ldx-hero .text-grad { background: linear-gradient(118deg, var(--navy) 2%, var(--acc) 56%, var(--acc-ink) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lpage .ldx-head h2 { letter-spacing: -.04em; } .lpage .ldx-head p { font-size: 1.08rem; color: #59627F; line-height: 1.62; max-width: 58ch; } /* Eyebrow: Text im lesbaren Akzent, Strich in der Seiten-Note */ .lpage .eyebrow { color: var(--acc-ink); letter-spacing: .2em; } .lpage .eyebrow::before { width: 26px; height: 2px; background: linear-gradient(90deg, var(--acc), var(--acc-2)); } .lpage .lx-band .eyebrow, .lpage .eyebrow--light { color: var(--cyan); } /* Breadcrumb & Textlinks in der Seiten-Note */ .lpage .crumbs a:hover { color: var(--acc-ink); } .lpage .link-arrow { color: var(--acc-ink); } /* ------------------------------------------------------------------ * 2) Stärkerer Hero: Signatur-Hairline + seiten­eigene Farb-Orbs * ------------------------------------------------------------------ */ .lpage .ldx-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 3; background: linear-gradient(90deg, rgba(var(--acc-rgb),0), rgba(var(--acc-rgb),.9) 22%, var(--acc-2) 50%, rgba(var(--acc-rgb),.9) 78%, rgba(var(--acc-rgb),0)); opacity: .85; } /* weiches Spotlight hinter dem Hero-Text */ .lpage .ldx-hero::after { content: ""; position: absolute; z-index: 0; pointer-events: none; top: -8%; left: 50%; width: min(920px, 92%); height: 60%; transform: translateX(-50%); background: radial-gradient(60% 60% at 50% 40%, rgba(var(--acc-rgb),.14), rgba(var(--acc-rgb),0) 70%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 82%); mask-image: linear-gradient(180deg, #000, transparent 82%); } .lpage .ldx-hero .shell { position: relative; z-index: 1; } .lpage .lx-orb--a { background: radial-gradient(circle at 40% 40%, rgba(var(--acc-rgb),.58), rgba(var(--acc-rgb),0) 68%); } .lpage .lx-orb--b { background: radial-gradient(circle at 50% 50%, rgba(var(--acc-2-rgb),.46), rgba(var(--acc-2-rgb),0) 66%); } /* Vertrauens-Chips edler */ .lpage .lx-badge { background: rgba(255,255,255,.78); box-shadow: 0 6px 20px -12px rgba(40,15,145,.35); } .lpage .lx-badge svg { color: var(--acc-ink); } /* Bühne unter dem Hero: mehr Luft + edlerer Schatten am Browser-Mock */ .lpage .ldx-stage { margin-top: clamp(46px, 6vw, 84px); } .lpage .browser { box-shadow: 0 60px 120px -50px rgba(20,10,60,.55), 0 18px 44px -26px rgba(20,10,60,.4); } /* ------------------------------------------------------------------ * 3) Feinere Bewegung: sanftes Blur-In (nur bei erlaubter Animation) * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { .lpage .reveal { transition-property: opacity, transform, filter; transition-duration: .9s; transition-timing-function: var(--ease); filter: blur(9px); } .lpage .reveal.in { filter: blur(0); } } /* ------------------------------------------------------------------ * 4) Bessere Bilder & Rahmung * ------------------------------------------------------------------ */ .lpage .lx-shot { border-radius: var(--r-xl); box-shadow: 0 46px 92px -40px rgba(16,8,52,.55), 0 10px 30px -16px rgba(16,8,52,.32); } .lpage .lx-shot::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient(150deg, rgba(255,255,255,.7), rgba(var(--acc-rgb),.28) 45%, rgba(255,255,255,0) 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .lpage .lx-shot img { transition: transform 1s var(--ease), filter 1s var(--ease); } .lpage .lx-shot:hover img { transform: scale(1.06); filter: saturate(1.06) contrast(1.02); } /* Foto-Band: tieferer Schatten + Farb-Note im Overlay + feine Vignette */ .lpage .lx-band { border-radius: var(--r-xl); box-shadow: 0 60px 120px -46px rgba(16,8,52,.6); } .lpage .lx-band__overlay { background: radial-gradient(120% 120% at 100% 0%, rgba(var(--acc-rgb),.34), rgba(var(--acc-rgb),0) 55%), linear-gradient(105deg, rgba(12,7,42,.92) 0%, rgba(12,7,42,.62) 46%, rgba(12,7,42,.24) 100%); } .lpage .lx-band::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 140px 10px rgba(8,4,30,.5); } /* Glaskarten & Mock-Rahmen edler */ .lpage .lx-glass { box-shadow: 0 40px 80px -40px rgba(16,8,52,.5), inset 0 1px 0 rgba(255,255,255,.85); } /* ------------------------------------------------------------------ * 5) Karten & Prozess nehmen die Seiten-Note auf * ------------------------------------------------------------------ */ .lpage .stat-card::before { background: linear-gradient(90deg, var(--acc), var(--acc-2)); } .lpage .stat-card b { background: linear-gradient(135deg, var(--navy) 6%, var(--acc-ink) 82%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lpage .deliver-item__ico { color: var(--acc-ink); background: rgba(var(--acc-rgb),.11); } .lpage .lx-card__ico { background: linear-gradient(135deg, var(--acc), var(--acc-2)); } .lpage .proc-step__num { background: linear-gradient(135deg, var(--acc), var(--acc-2)); box-shadow: 0 12px 24px -10px rgba(var(--acc-rgb),.7); } .lpage .proc-step::before { background: linear-gradient(rgba(var(--acc-rgb),.9), rgba(var(--acc-rgb),.12)); } .lpage .lx-flow__line i { background: linear-gradient(180deg, var(--acc-2), var(--acc)); } .lpage .deliver-item:hover, .lpage .lx-card:hover, .lpage .stat-card:hover { border-color: rgba(var(--acc-rgb),.35); } /* Feature-Zeilen: Akzent an Eyebrow & Häkchen */ .lpage .lx-feat__eyebrow { color: var(--acc-ink); } .lpage .lx-feat__list svg { color: var(--acc-ink); } /* FAQ: Nummer & Icon in der Note */ .lpage .faq-q .qnum { color: var(--acc-ink); } .lpage .faq-q .ico::before, .lpage .faq-q .ico::after { background: var(--acc-ink); } /* Zitat: Anführungszeichen in der Note */ .lpage .lx-quote { box-shadow: 0 40px 80px -44px rgba(16,8,52,.45); } .lpage .lx-quote__mark { color: var(--acc); } /* Verwandte Leistungen: Pfeil & Hover in der Note */ .lpage .ldx-related a svg { color: var(--acc-ink); } .lpage .ldx-related a:hover { border-color: rgba(var(--acc-rgb),.4); } /* ------------------------------------------------------------------ * 6) CTA-Karte: dezenter Farb-Schimmer der Seiten-Note * ------------------------------------------------------------------ */ .lpage .cta-card { box-shadow: 0 60px 120px -50px rgba(16,8,52,.6), 0 0 0 1px rgba(255,255,255,.04) inset; } .lpage .cta-card::after { content: ""; position: absolute; z-index: 1; pointer-events: none; inset: auto -20% -60% -20%; height: 70%; background: radial-gradient(50% 100% at 50% 100%, rgba(var(--acc-rgb),.4), rgba(var(--acc-rgb),0) 72%); opacity: .5; } /* ------------------------------------------------------------------ * 7) Buttons: dezenter Sheen-Sweep beim Hover (zurückhaltend) * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { .lpage .btn--primary { position: relative; overflow: hidden; } .lpage .btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 70%); transform: translateX(-120%); transition: transform .7s var(--ease); } .lpage .btn--primary:hover::after { transform: translateX(120%); } } /* ------------------------------------------------------------------ * 8) Mobile-Feinschliff * ------------------------------------------------------------------ */ @media (max-width: 620px) { .lpage .ldx-hero h1 { font-size: clamp(2rem, 8.5vw, 2.8rem); } .lpage .lx-shot { border-radius: var(--r-lg); } } /* ------------------------------------------------------------------ * 9) Vollbreiten-Bildband * ------------------------------------------------------------------ */ .lpage .lsec--voll { padding: 0; } .lpage .lx-band--voll { border-radius: 0; min-height: clamp(420px, 52vh, 620px); /* Ein Band, das ueber die volle Breite laeuft, hat keine Kanten, die einen Schlagschatten werfen koennten. Der Schatten aus Abschnitt 4 legte sonst einen dunklen Saum ueber den hellen Abschnitt darunter. */ box-shadow: none; } .lpage .lx-band--voll::after { border-radius: 0; } /* Die Flaeche ist voll, der Text ist es nicht: er bleibt in derselben Spalte wie auf dem Rest der Seite. Hier stand vorher width:100%. Das hat die Breitenbegrenzung und die 24 Pixel Seitenluft von .shell ausser Kraft gesetzt, wodurch die Ueberschrift bei jeder Fenstergroesse buendig am linken Bildschirmrand klebte. */ .lpage .lx-band--voll .shell { position: relative; z-index: 2; } .lpage .lx-band--voll .lx-band__inner { padding-left: 0; padding-right: 0; padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); } /* ------------------------------------------------------------------ * 10) 3D-Modell im Rahmen (leistung-3d) * ------------------------------------------------------------------ */ .lpage .model3d--rahmen { width: min(880px, 100%); margin-inline: auto; background: radial-gradient(90% 70% at 50% 30%, #FFFFFF 0%, #F2F7FF 60%, #E6F0FF 100%); border: 1px solid rgba(40, 15, 145, .1); border-radius: 26px; box-shadow: 0 40px 90px -50px rgba(40, 15, 145, .45); overflow: hidden; } .lpage .model3d--rahmen::after { display: none; } @media (max-width: 620px) { .lpage .model3d--rahmen { border-radius: 18px; } }