/* ============================================================ BEVISIBLE — Redesign Design tokens, 3 mischbare Richtungen (A/B/C), Motion, UI ============================================================ */ /* ---------- Fonts ---------- */ /* Archivo = Web-Ersatz für Trade Gothic Next (neo-grotesk, 100–900) Space Mono = technische Micro-Labels (#-Index, Kicker) */ :root { /* Hologramm-Spektrum (aus Farbverlauf gesampelt) */ --holo-sky:#8dd1f0; --holo-peri:#728cc4; --holo-lav:#a08bbe; --holo-pink:#d396c1; --holo-blush:#f9c7cc; --holo-rose:#f2d0d8; --holo-cream:#f6ddd1; --ink:#1a1a1a; /* 90% black */ --ink-soft:#3a3a3a; /* Akzent-Verlauf (crisp, für Logo/Buttons/Highlights) */ --holo: linear-gradient(110deg, var(--holo-sky) 0%, var(--holo-peri) 22%, var(--holo-lav) 42%, var(--holo-pink) 62%, var(--holo-blush) 80%, var(--holo-cream) 100%); --holo-soft: linear-gradient(115deg, #aee0f5, #9fb0dd, #c0a9d6, #e6b6d2, #fbd6da, #fae6dc); /* Motion (0..1) — wird per Tweak gesetzt */ --motion: 1; --accent: 1; /* Akzent-Intensität 0..1 */ /* Typo-Skala: Theme-Basis × User-Tweak */ --scale-base: 1; --scale-user: 1; --scale: calc(var(--scale-base) * var(--scale-user)); --glow-mult: 1; --ease: cubic-bezier(.2,.7,.2,1); --maxw: 1280px; --gutter: clamp(20px, 5vw, 72px); font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================================ 3 RICHTUNGEN (data-dir auf ) A = Editorial Mono · B = Dark Stage · C = Kinetic Pop ============================================================ */ html[data-dir="a"] { --bg:#ffffff; --bg-2:#f5f3ef; --panel:#ffffff; --text:#1a1a1a; --text-soft:#5d5a55; --text-dim:#8a8680; --line: rgba(26,26,26,.12); --line-strong: rgba(26,26,26,.9); --bg-glow:.5; /* Hintergrund-Verlauf-Stärke */ --scale-base: 1; --display-weight: 850; --radius: 4px; --on-accent:#1a1a1a; } html[data-dir="b"] { --bg:#101013; --bg-2:#17171b; --panel:#1b1b20; --text:#f4f3f0; --text-soft:#aba9a4; --text-dim:#76746f; --line: rgba(255,255,255,.14); --line-strong: rgba(255,255,255,.85); --bg-glow:.70; --scale-base: 1.04; --display-weight: 800; --radius: 6px; --on-accent:#101013; } html[data-dir="c"] { --bg:#f4f1 ec; --bg-2:#ffffff; --panel:#ffffff; --text:#141414; --text-soft:#56524c; --text-dim:#8a857d; --line: rgba(20,20,20,.14); --line-strong: rgba(20,20,20,.92); --bg-glow:.56; --scale-base: 1.16; /* grössere kinetische Typo */ --display-weight: 900; --radius: 14px; --on-accent:#141414; } /* fix accidental space */ html[data-dir="c"] { --bg:#f4f1ec; } /* ---------- Reset ---------- */ *,*::before,*::after { box-sizing:border-box; } html,body { margin:0; padding:0; } /* Kein overflow-x auf — das würde position:sticky brechen. Der horizontale Überlauf wird an der Quelle (about-sticky/glow) geklippt. */ body { background:var(--bg); color:var(--text); font-family:'Archivo', system-ui, sans-serif; font-size:18px; line-height:1.55; overflow-x:hidden; transition: background .6s var(--ease), color .6s var(--ease); } img { max-width:100%; display:block; } a { color:inherit; text-decoration:none; } button { font-family:inherit; } ::selection { background:var(--holo-pink); color:#fff; } /* ============================================================ TYPOGRAFIE ============================================================ */ .kicker { font-family:'Space Mono', monospace; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-soft); display:inline-flex; align-items:center; gap:.6em; } .kicker::before { content:"#"; background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; } .display { font-weight:var(--display-weight); line-height:.92; letter-spacing:-.02em; text-transform:uppercase; margin:0; font-size:clamp(48px, calc(9vw * var(--scale)), 150px); } h1,h2,h3 { margin:0; font-weight:800; letter-spacing:-.015em; line-height:1.0; } h2.section-title { font-size:clamp(34px, calc(5.2vw * var(--scale)), 76px); text-transform:uppercase; line-height:.94; } h3 { font-size:clamp(20px,2.2vw,28px); } p { margin:0 0 1em; } .lead { font-size:clamp(19px,1.7vw,24px); color:var(--text-soft); line-height:1.5; font-weight:400; } .small { font-size:14px; color:var(--text-dim); } /* Gradient text */ .grad-text { background:var(--holo); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: hueShift calc(14s / var(--motion, 1)) linear infinite; } @keyframes hueShift { to { background-position:200% 0; } } /* outline display text (kinetic) */ .outline-text { color:transparent; -webkit-text-stroke: 1.5px var(--line-strong); } /* ============================================================ LAYOUT ============================================================ */ .wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); } .section { position:relative; padding-block: clamp(72px, 11vh, 150px); } .section--tight { padding-block: clamp(48px,7vh,96px); } /* Helle "Bänder": leicht durchscheinend, damit die fixe Holo-Verlaufs-Ebene (inkl. Cursor-Glühen) überall auf hellem Grund konsistent durchscheint. Auf dunklem Theme bleiben sie undurchsichtig (kein Verlauf auf dunkel). */ /* Sektionen teilen sich einen durchgehenden Hintergrund — keine sichtbaren "Bänder"/Übergänge mehr (Tint entfernt). */ .band { background: transparent; } html[data-dir="b"] .band { background: transparent; } .grid { display:grid; gap: clamp(20px,3vw,40px); } .eyebrow-row { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom: clamp(28px,4vw,56px); } /* ============================================================ HOLO BACKGROUND (animated, cursor-reactive) ============================================================ */ .holo-bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:calc(var(--bg-glow) * var(--glow-mult)); transition:opacity .6s var(--ease); } .holo-blob { position:absolute; border-radius:50%; filter: blur(60px); mix-blend-mode: screen; will-change: transform; } html[data-dir="a"] .holo-blob, html[data-dir="c"] .holo-blob { mix-blend-mode: multiply; } /* flächige Grundtönung auf hellem Grund — Verlauf überall dezent sichtbar, nicht nur an den Blob-Ecken */ html[data-dir="a"] .holo-bg, html[data-dir="c"] .holo-bg { background: radial-gradient(95vw 85vh at 82% -8%, color-mix(in srgb, var(--holo-peri) 72%, transparent), transparent 58%), radial-gradient(95vw 85vh at 8% 110%, color-mix(in srgb, var(--holo-pink) 66%, transparent), transparent 58%), radial-gradient(85vw 75vh at 52% 50%, color-mix(in srgb, var(--holo-sky) 52%, transparent), transparent 64%); } .holo-blob.b1 { width:46vw; height:46vw; left:-8vw; top:-10vw; background: radial-gradient(circle at 50% 50%, var(--holo-sky), transparent 68%); animation: drift1 calc(26s / var(--motion,1)) var(--ease) infinite alternate; } .holo-blob.b2 { width:50vw; height:50vw; right:-12vw; top:6vw; background: radial-gradient(circle at 50% 50%, var(--holo-peri), transparent 66%); animation: drift2 calc(32s / var(--motion,1)) var(--ease) infinite alternate; } .holo-blob.b3 { width:42vw; height:42vw; left:18vw; bottom:-16vw; background: radial-gradient(circle at 50% 50%, var(--holo-pink), transparent 66%); animation: drift3 calc(29s / var(--motion,1)) var(--ease) infinite alternate; } .holo-blob.b4 { width:38vw; height:38vw; right:6vw; bottom:-10vw; background: radial-gradient(circle at 50% 50%, var(--holo-cream), transparent 64%); animation: drift1 calc(35s / var(--motion,1)) var(--ease) infinite alternate-reverse; } .holo-cursor { position:absolute; width:34vw; height:34vw; border-radius:50%; background: radial-gradient(circle at 50% 50%, var(--holo-lav), transparent 60%); filter: blur(70px); mix-blend-mode:screen; transform: translate3d(var(--cx,50vw), var(--cy,50vh), 0) translate(-50%,-50%); transition: transform .35s cubic-bezier(.2,.8,.2,1); will-change: transform; } html[data-dir="a"] .holo-cursor, html[data-dir="c"] .holo-cursor { mix-blend-mode:multiply; opacity:1; width:42vw; height:42vw; } html[data-cursor="0"] .holo-cursor { display:none; } @keyframes drift1 { from{transform:translate(0,0) scale(1)} to{transform:translate(8vw,6vh) scale(1.15)} } @keyframes drift2 { from{transform:translate(0,0) scale(1.1)} to{transform:translate(-7vw,8vh) scale(.92)} } @keyframes drift3 { from{transform:translate(0,0) scale(.95)} to{transform:translate(6vw,-7vh) scale(1.2)} } /* respect motion off */ html[data-motion="0"] .holo-blob, html[data-motion="0"] .grad-text { animation:none !important; } #root { position:relative; z-index:1; } /* page transition */ .page-enter { animation: pageIn .55s var(--ease) forwards; } @keyframes pageIn { from { opacity:0; } to { opacity:1; } } html[data-motion="0"] .page-enter { animation:none; } /* ============================================================ NAV ============================================================ */ .nav { position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding: 18px var(--gutter); transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s; border-bottom:1px solid transparent; } .nav.scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom:1px solid var(--line); padding-block:12px; } .nav-links { display:flex; gap: clamp(18px,2vw,34px); align-items:center; } .nav-link { font-size:15px; font-weight:600; letter-spacing:.01em; position:relative; padding:6px 2px; color:var(--text); background:none; border:none; cursor:pointer; } .nav-link::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--holo); transform:scaleX(0); transform-origin:left; transition: transform .35s var(--ease); } .nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); } .nav-link.active { color:var(--text); } .nav-cta { margin-left:8px; } .burger { display:none; background:none; border:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; width:44px; height:44px; margin-right:-8px; } .burger span { width:24px; height:2px; background:var(--text); display:block; transition:.3s; } /* Nav über dem dunklen Cover: hell & transparent */ .nav.on-cover { background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-color:transparent !important; } .nav.on-cover .logo-word .b, .nav.on-cover .nav-link { color:#fff; } .nav.on-cover .logo-word .c { color:rgba(255,255,255,.7); } .nav.on-cover .burger span { background:#fff; } /* mobile menu */ .mobile-menu { position:fixed; inset:0; z-index:55; background:var(--bg); display:flex; flex-direction:column; justify-content:center; gap:8px; padding: var(--gutter); transform:translateY(-100%); transition:transform .5s var(--ease); } .mobile-menu.open { transform:translateY(0); } .mobile-menu button { background:none; border:none; text-align:left; cursor:pointer; color:var(--text); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(34px,9vw,64px); line-height:1.05; padding:6px 0; } /* ============================================================ LOGO ============================================================ */ .logo { display:inline-flex; align-items:center; gap:11px; cursor:pointer; } .logo-hash { font-weight:900; font-size:30px; line-height:1; background:var(--holo); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: hueShift calc(10s / var(--motion,1)) linear infinite; transform: skewX(-7deg); } .logo-word { font-weight:900; letter-spacing:-.01em; line-height:.9; } .logo-word .b { font-size:21px; text-transform:uppercase; display:block; color:var(--text); } .logo-word .c { font-size:9.5px; letter-spacing:.14em; text-transform:lowercase; color:var(--text-soft); font-weight:500; } /* ============================================================ BUTTONS ============================================================ */ .btn { --b-pad-y:15px; --b-pad-x:30px; position:relative; display:inline-flex; align-items:center; gap:10px; padding: var(--b-pad-y) var(--b-pad-x); font-weight:700; font-size:15px; letter-spacing:.02em; border:none; cursor:pointer; border-radius: 999px; text-transform:uppercase; overflow:hidden; isolation:isolate; transition: transform .35s var(--ease), color .35s var(--ease), box-shadow .35s; } .btn .lbl { position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px; } .btn .arrow { transition: transform .35s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } /* primary = holo fill */ .btn-primary { color:#1a1a1a; background:var(--holo); background-size:160% 160%; } .btn-primary::before { content:""; position:absolute; inset:0; z-index:1; background:var(--holo); background-size:160% 160%; animation: hueMove calc(8s / var(--motion,1)) linear infinite; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -12px var(--holo-peri); } @keyframes hueMove { 0%{background-position:0 0} 50%{background-position:100% 100%} 100%{background-position:0 0} } /* outline */ .btn-outline { color:var(--text); background:transparent; border:1.5px solid var(--line-strong); } .btn-outline::before { content:""; position:absolute; inset:0; z-index:1; background:var(--holo); transform:translateY(101%); transition:transform .4s var(--ease); } .btn-outline:hover { color:#1a1a1a; border-color:transparent; } .btn-outline:hover::before { transform:translateY(0); } /* ghost text link */ .linkarrow { display:inline-flex; align-items:center; gap:8px; font-weight:700; cursor:pointer; background:none; border:none; color:var(--text); padding:4px 0; } .linkarrow .ln { background-image:var(--holo); background-size:100% 2px; background-repeat:no-repeat; background-position:0 100%; padding-bottom:3px; transition: background-size .4s var(--ease); } .linkarrow:hover .ln { background-size:100% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; } .linkarrow svg { transition:transform .35s var(--ease); } .linkarrow:hover svg { transform:translateX(4px); } /* ============================================================ REVEAL (scroll) ============================================================ */ .reveal { opacity:0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in { opacity:1; transform:none; } html[data-motion="0"] .reveal { opacity:1; transform:none; transition:none; } /* ============================================================ CARDS ============================================================ */ .card { position:relative; background:var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(24px,3vw,38px); overflow:hidden; transition: transform .45s var(--ease), border-color .45s, box-shadow .45s; } .card::after { /* holo wash on hover */ content:""; position:absolute; inset:0; background:var(--holo-soft); opacity:0; transition: opacity .5s var(--ease); pointer-events:none; mix-blend-mode:soft-light; } .card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 22px 50px -26px var(--holo-peri); } .card:hover::after { opacity:.5; } .card .idx { font-family:'Space Mono',monospace; font-size:13px; color:var(--text-dim); letter-spacing:.1em; } .card .ic { width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:var(--holo-soft); margin-bottom:18px; } /* service big list rows */ .srow { position:relative; display:grid; grid-template-columns: 64px 1fr auto; gap:20px; align-items:center; padding: clamp(22px,2.6vw,34px) 0; border-top:1px solid var(--line); cursor:pointer; } .srow:last-child { border-bottom:1px solid var(--line); } .srow .snum { font-family:'Space Mono',monospace; color:var(--text-dim); font-size:15px; } .srow .stitle { font-size:clamp(26px,3.6vw,48px); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; transition: transform .4s var(--ease), color .4s; line-height:1; } .srow .sdesc { max-width:46ch; color:var(--text-soft); font-size:16px; max-height:0; opacity:0; overflow:hidden; transition: all .5s var(--ease); } .srow:hover .stitle { transform: translateX(14px); } .srow:hover .sdesc { max-height:120px; opacity:1; margin-top:10px; } .srow .splus { width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:.4s var(--ease); } .srow:hover .splus { background:var(--holo); border-color:transparent; transform:rotate(90deg); } /* ============================================================ BENTO — Leistungen ============================================================ */ .bento { display:grid; gap:16px; margin-top: clamp(28px,4vw,52px); grid-template-columns: 1.18fr 1fr 1fr; grid-template-areas: "konzept content content" "konzept betreuung schulung" "ads ads schulung"; } .bento > .reveal { display:flex; min-width:0; } .bento .c-konzept { grid-area:konzept; } .bento .c-content { grid-area:content; } .bento .c-schulung { grid-area:schulung; } .bento .c-betreuung { grid-area:betreuung; } .bento .c-ads { grid-area:ads; } .bento-card { position:relative; overflow:hidden; isolation:isolate; flex:1; width:100%; min-height:210px; border-radius:24px; padding: clamp(22px,2.2vw,30px); display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); cursor:pointer; color:var(--text); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .bento .c-betreuung .bento-card, .bento .c-ads .bento-card, .bento .c-schulung .bento-card { min-height:240px; } .bento-card:hover { transform: translateY(-5px); box-shadow: 0 26px 54px -30px rgba(20,16,40,.45); } /* icon tile */ .bento-ic { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:#fff; color:var(--ink); box-shadow:0 8px 22px -10px rgba(20,16,40,.35); position:relative; z-index:2; } /* hover arrow badge */ .bento-arrow { position:absolute; top: clamp(22px,2.2vw,30px); right: clamp(22px,2.2vw,30px); z-index:2; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); color:var(--ink); opacity:0; transform: translate(4px,-4px) rotate(-30deg); transition: opacity .4s var(--ease), transform .4s var(--ease); } .bento-card:hover .bento-arrow { opacity:1; transform: translate(0,0) rotate(0deg); } .bento-body { position:relative; z-index:2; } .bento-title { margin:0; font-size:clamp(20px,1.9vw,30px); font-weight:900; text-transform:uppercase; letter-spacing:-.012em; line-height:1; } .bento-desc { margin:12px 0 0; font-size:15px; line-height:1.5; color:var(--text-soft); max-width:42ch; } /* watermark */ .bento-wm { position:absolute; left:0; right:0; bottom: clamp(70px,9%,120px); z-index:0; text-align:center; font-weight:900; text-transform:uppercase; letter-spacing:-.04em; font-size:clamp(64px,9vw,150px); line-height:1; pointer-events:none; white-space:nowrap; } /* variants */ .bento-card.v-holo { border-color:transparent; color:var(--ink); background: linear-gradient(155deg, var(--holo-sky) 0%, var(--holo-peri) 34%, var(--holo-lav) 62%, var(--holo-pink) 100%); } .bento-card.v-holo .bento-desc { color: rgba(26,22,38,.74); } .bento-card.v-holo .bento-wm { color: rgba(255,255,255,.22); } .bento-card.v-light { background: color-mix(in srgb, var(--bg-2) 70%, #fff); } .bento-card.v-blush { border-color:transparent; color:var(--ink); background: linear-gradient(140deg, var(--holo-rose) 0%, var(--holo-blush) 100%); } .bento-card.v-blush .bento-desc { color: rgba(60,30,40,.7); } .bento-card.v-lavender { border-color:transparent; color:var(--ink); background: linear-gradient(140deg, color-mix(in srgb, var(--holo-sky) 30%, #fff) 0%, color-mix(in srgb, var(--holo-lav) 45%, #fff) 100%); } .bento-card.v-lavender .bento-desc { color: rgba(40,36,60,.68); } .bento-card.v-dark { border-color:transparent; color:#fff; background:#0e0e12; } .bento-card.v-dark .bento-ic { background: rgba(255,255,255,.1); color:#fff; box-shadow:none; } .bento-card.v-dark .bento-arrow { border-color: rgba(255,255,255,.3); color:#fff; } .bento-card.v-dark .bento-desc { color: rgba(255,255,255,.66); } .bento-card.v-dark .bento-wm { color: rgba(255,255,255,.07); } @media (max-width: 880px) { .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "konzept content" "betreuung schulung" "ads ads"; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; grid-template-areas: "konzept" "content" "betreuung" "schulung" "ads"; } .bento-card, .bento .c-betreuung .bento-card, .bento .c-ads .bento-card, .bento .c-schulung .bento-card { min-height:190px; } } /* ============================================================ MARQUEE ============================================================ */ .marquee { overflow:hidden; white-space:nowrap; display:flex; user-select:none; } .marquee__track { display:flex; gap:0; animation: scrollX calc(28s / var(--motion,1)) linear infinite; } .marquee__track span { font-weight:900; text-transform:uppercase; font-size:clamp(40px,8vw,120px); letter-spacing:-.02em; padding:0 .25em; line-height:1.1; } .marquee__track .dot { color:transparent; -webkit-text-stroke:1px var(--line-strong); } @keyframes scrollX { to { transform: translateX(-50%); } } html[data-motion="0"] .marquee__track { animation:none; } /* ============================================================ TEAM ============================================================ */ .team-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,28px); } .team-card { position:relative; } .team-photo { position:relative; aspect-ratio: 3/4; border-radius: var(--radius); overflow:hidden; background:var(--bg-2); border:1px solid var(--line); } .team-card:hover .team-photo { box-shadow: 0 24px 60px -30px var(--holo-pink); } .team-name { margin-top:16px; font-size:22px; font-weight:800; text-transform:uppercase; } .team-role { color:var(--text-soft); font-size:15px; } .team-socials { display:flex; gap:10px; margin-top:10px; } .team-socials a { width:34px; height:34px; border:1px solid var(--line); border-radius:8px; display:grid; place-items:center; transition:.3s; font-size:13px; font-weight:700; } .team-socials a:hover { background:var(--holo); border-color:transparent; color:#1a1a1a; } /* Foto-Fallback (Initialen) + Hinzufügen-Karte + Upload-Dropzone */ .team-ph-fallback { position:absolute; inset:0; display:grid; place-items:center; background:var(--holo); } .team-ph-fallback span { font-size:clamp(40px,5vw,56px); font-weight:900; color:#1a1a1a; } .team-card.team-add { cursor:pointer; } .team-add-photo { border:1.5px dashed var(--line-strong); display:grid; place-items:center; background:transparent; transition:border-color .3s; } .team-card.team-add:hover .team-add-photo { border-color:var(--holo-peri); } .team-add-photo .plus { width:64px; height:64px; border-radius:50%; background:var(--holo); display:grid; place-items:center; color:#1a1a1a; } .dropzone { border:1.5px dashed var(--line-strong); border-radius:14px; padding:16px 18px; cursor:pointer; transition:border-color .3s; display:flex; align-items:center; gap:14px; color:var(--text-soft); } .dropzone:hover { border-color:var(--holo-peri); } .dropzone .dz-prev { width:54px; height:54px; border-radius:12px; object-fit:cover; flex:0 0 auto; } .dropzone .dz-icon { width:44px; height:44px; border-radius:10px; background:var(--holo-soft); display:grid; place-items:center; color:#1a1a1a; flex:0 0 auto; } /* ============================================================ IMAGE / VIDEO PLACEHOLDER (Drop zones) ============================================================ */ .media-ph { position:relative; border-radius: var(--radius); overflow:hidden; background: repeating-linear-gradient(45deg, transparent, transparent 12px, color-mix(in srgb, var(--text) 5%, transparent) 12px, color-mix(in srgb, var(--text) 5%, transparent) 13px), var(--bg-2); border:1.5px dashed var(--line-strong); display:grid; place-items:center; color:var(--text-dim); } .media-ph .ph-inner { text-align:center; padding:24px; } .media-ph .ph-tag { font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; } .media-ph .ph-play { width:74px; height:74px; border-radius:50%; background:var(--holo); display:grid; place-items:center; margin:0 auto 16px; box-shadow:0 12px 40px -12px var(--holo-peri); } /* ============================================================ STATS ============================================================ */ .stats { display:grid; grid-template-columns:repeat(4,1fr); gap: clamp(16px,2vw,32px); } .stat .num { font-size:clamp(40px,5.5vw,76px); font-weight:900; line-height:1; letter-spacing:-.02em; } .stat .lab { color:var(--text-soft); font-size:14px; margin-top:6px; text-transform:uppercase; letter-spacing:.06em; } /* ============================================================ FORM ============================================================ */ .field { position:relative; margin-bottom:22px; } .field input, .field textarea { width:100%; background:transparent; border:none; border-bottom:1.5px solid var(--line); padding:14px 0; font-size:18px; color:var(--text); font-family:inherit; outline:none; transition: border-color .3s; } .field textarea { resize:vertical; min-height:120px; } .field label { position:absolute; left:0; top:14px; color:var(--text-dim); pointer-events:none; transition:.3s var(--ease); } .field input:focus, .field textarea:focus { border-image: var(--holo) 1; } .field input:focus + label, .field textarea:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label { top:-12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); } /* ============================================================ FOOTER ============================================================ */ .footer { position:relative; background:var(--ink); color:#f4f3f0; padding: clamp(22px,2.8vw,38px) 0 clamp(16px,1.6vw,24px); margin-top: 40px; overflow:hidden; } html[data-dir="b"] .footer { background:#08080a; } .footer a { color:#f4f3f0; } .footer .foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px,4vw,60px); position:relative; z-index:2; } .footer .foot-big { font-size:clamp(40px,7vw,100px); font-weight:900; text-transform:uppercase; line-height:.9; letter-spacing:-.02em; } .footer .col-h { font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#9a9893; margin-bottom:16px; } .footer .fl { display:block; padding:6px 0; color:#cfcdc8; transition:.3s; } .footer .fl:hover { color:#fff; } .footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); position:relative; z-index:2; color:#9a9893; font-size:13px; } .footer .foot-lead { font-size:clamp(30px,3.6vw,52px); font-weight:900; text-transform:uppercase; line-height:.95; letter-spacing:-.02em; margin-top:10px; } /* Mega-Navigation im Footer */ .foot-nav { display:flex; justify-content:space-between; align-items:baseline; gap: clamp(12px,2vw,32px); flex-wrap:wrap; padding-bottom: clamp(12px,1.4vw,18px); border-bottom:1px solid rgba(255,255,255,.12); } .foot-nav-link { position:relative; cursor:pointer; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:1; font-size: clamp(16px, 2.1vw, 30px); color:#807e7a; transition: color .35s var(--ease); -webkit-text-fill-color:#807e7a; } .foot-nav-link::after { content:""; position:absolute; left:0; bottom:-4px; height:3px; width:0; background:var(--holo); transition: width .4s var(--ease); } .foot-nav-link:hover { color:#fff; -webkit-text-fill-color:#fff; } .foot-nav-link:hover::after { width:100%; } @media (max-width:640px){ .foot-nav { gap:6px 22px; } .foot-nav-link { font-size: clamp(30px,9vw,46px); } } /* Riesen-Schriftzug ganz unten — gestapelt, gestaffelt eingeblendet */ .foot-mega { position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; overflow:hidden; padding: clamp(8px,1.2vw,16px) var(--gutter) clamp(4px,.8vw,12px); text-align:left; } .fm-word { display:block; color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.9; font-size: clamp(34px, 7.4vw, 112px); } /* "armed" = JS aktiv → Wörter erst versteckt, dann nacheinander herein */ .foot-mega.armed .fm-word { opacity:0; transform: translateY(46px); } .foot-mega.armed.in .fm-word { animation: fmWordIn .72s cubic-bezier(.2,.85,.2,1) forwards; animation-delay: calc(var(--i) * 150ms); } @keyframes fmWordIn { from { opacity:0; transform: translateY(46px); } to { opacity:1; transform:none; } } /* ============================================================ PILL / TAG ============================================================ */ .pill { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:600; letter-spacing:.02em; } .pill.holo { background:var(--holo-soft); border-color:transparent; color:#1a1a1a; } /* page header */ .page-hero { padding-top: clamp(130px,18vh,210px); padding-bottom: clamp(40px,6vw,80px); } /* ============================================================ PROJECTS ============================================================ */ .proj-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(16px,2vw,30px); } .proj { position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer; } .proj .proj-media { aspect-ratio: 4/3; } .proj .proj-meta { display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; gap:16px; } .proj h3 { font-size:clamp(20px,2.4vw,30px); text-transform:uppercase; transition:.4s; } .proj:hover h3 { background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent; } .proj .proj-cat { font-family:'Space Mono',monospace; font-size:12px; color:var(--text-dim); letter-spacing:.1em; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 920px) { body { font-size:17px; } .nav-links { display:none; } .burger { display:flex; } .team-grid { grid-template-columns: 1fr 1fr; } .stats { grid-template-columns: 1fr 1fr; } .footer .foot-grid { grid-template-columns:1fr; } .proj-grid { grid-template-columns:1fr; } .two-col { grid-template-columns:1fr !important; } } @media (max-width: 560px) { .team-grid { grid-template-columns:1fr; } .srow { grid-template-columns: 40px 1fr; } .srow .splus { display:none; } } /* reduce motion — also covers offscreen capture envs that report reduced-motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration:.001ms !important; animation-iteration-count:1 !important; } .reveal { opacity:1 !important; transform:none !important; transition:none !important; } body, .holo-bg, .nav { transition:none !important; } .page-enter { animation:none !important; } /* Logo-Leiste soll als "Zug" weiterlaufen — von der Motion-Sperre ausgenommen */ .logoband__track { animation-duration: 20s !important; animation-iteration-count: infinite !important; } /* schwebende SoMe-Icons sollen weiterhin frei wandern */ .float-bob { animation-duration: var(--wdur,24s) !important; animation-iteration-count: infinite !important; } /* gestaffelte Footer-Einblendung soll sichtbar bleiben */ .foot-mega.armed.in .fm-word { animation-duration: .72s !important; } } /* ============================================================ CINEMATIC COVER — fixes Teamfoto im Hintergrund, restlicher Inhalt schiebt sich beim Scrollen sauber darüber ============================================================ */ .intro { position:relative; } .intro-fixed { position:fixed; inset:0; z-index:1; overflow:hidden; display:grid; place-items:center; } .intro-spacer { height:100vh; } .reveal-stack { position:relative; z-index:3; background:var(--bg); } /* heller Verlauf direkt auf dem reveal-stack (deckt den fixen Cover ab UND zeigt den Verlauf): viewport-fixiert, mit Cursor-Radial über --cx/--cy */ html[data-dir="a"] .reveal-stack, html[data-dir="c"] .reveal-stack { background-color: var(--bg); background-image: radial-gradient(42vw 42vw at var(--cx,50%) var(--cy,45%), color-mix(in srgb, var(--holo-lav) 42%, transparent), transparent 58%), radial-gradient(95vw 88vh at 84% 6%, color-mix(in srgb, var(--holo-peri) 34%, transparent), transparent 58%), radial-gradient(95vw 88vh at 6% 96%, color-mix(in srgb, var(--holo-pink) 32%, transparent), transparent 58%), radial-gradient(85vw 78vh at 52% 50%, color-mix(in srgb, var(--holo-sky) 24%, transparent), transparent 64%); background-attachment: fixed, fixed, fixed, fixed; background-repeat: no-repeat; } html[data-dir="b"] .reveal-stack { background:var(--bg); } .cover-photo { position:absolute; inset:0; z-index:0; will-change:transform; } .cover-photo img { width:100%; height:100%; object-fit:cover; object-position:center 26%; display:block; } .cover-photo .ph-fallback { position:absolute; inset:0; background: radial-gradient(60% 70% at 30% 20%, var(--holo-peri), transparent 70%), radial-gradient(70% 80% at 80% 60%, var(--holo-pink), transparent 70%), #2a2a33; } .cover-scrim { position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(130% 100% at 50% 28%, transparent 26%, rgba(12,12,20,.55) 100%), linear-gradient(180deg, rgba(12,12,20,.50) 0%, rgba(12,12,20,.12) 34%, rgba(12,12,20,.70) 100%); } .cover-content { position:relative; z-index:2; text-align:center; width:100%; max-width: min(1500px, 94vw); padding-inline:var(--gutter); will-change:transform,opacity; } .cover-content .hero-word { font-size: clamp(52px, calc(13.5vw * var(--scale)), 208px); filter: drop-shadow(0 8px 40px rgba(0,0,0,.35)); line-height:.86; white-space:nowrap; } .cover-content .hero-word .hero-hash, .cover-content .hero-word .hero-word-text { vertical-align:baseline; } .cover-kicker { display:inline-flex; align-items:center; gap:.6em; font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.9); } .cover-kicker::before { content:"#"; background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; } .cover-content .hero-claim { color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.4); } .cover-content .btn-outline { color:#fff; border-color:rgba(255,255,255,.6); } .cover-content .btn-outline:hover { color:#1a1a1a; border-color:transparent; } .cover-content .floats { inset:-150px -2vw; z-index:0; } .cover-content .somark { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .cover-content .somark:hover { color:#1a1a1a; } .scroll-cue { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3; color:#fff; display:flex; flex-direction:column; align-items:center; gap:8px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; } .scroll-cue .chev { animation: cueBob 1.5s ease-in-out infinite; } @keyframes cueBob { 0%,100%{ transform:translateY(0); opacity:.7; } 50%{ transform:translateY(7px); opacity:1; } } /* ============================================================ KUNDEN-FEEDBACK — Testimonial-Karussell + Referenz-Formular ============================================================ */ .tcarousel { display:flex; gap: clamp(16px,2vw,26px); overflow-x:auto; scroll-snap-type:x mandatory; padding: 8px 4px 26px; scrollbar-width:none; -ms-overflow-style:none; } .tcarousel::-webkit-scrollbar { display:none; } .tcard { scroll-snap-align:start; flex:0 0 clamp(280px, 33vw, 408px); background:var(--panel); border:1px solid var(--line); border-radius: calc(var(--radius) * 2); padding: clamp(26px,2.6vw,38px); display:flex; flex-direction:column; transition: transform .45s var(--ease), box-shadow .45s, border-color .45s; position:relative; overflow:hidden; } .tcard::after { content:""; position:absolute; inset:0; background:var(--holo-soft); opacity:0; mix-blend-mode:soft-light; transition:opacity .5s; pointer-events:none; } .tcard:hover { transform: translateY(-6px); border-color:transparent; box-shadow: 0 28px 60px -34px var(--holo-peri); } .tcard:hover::after { opacity:.4; } .tcard .quote { font-size:48px; line-height:.6; font-weight:900; background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent; } .tcard .qtext { margin-top:18px; font-size:17px; line-height:1.55; color:var(--text); flex:1; } .tmeta { display:flex; align-items:center; gap:14px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); } .tavatar { width:50px; height:50px; border-radius:50%; background:var(--holo); display:grid; place-items:center; font-weight:800; font-size:16px; color:#1a1a1a; flex:0 0 auto; } .tavatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; } .tname { font-weight:800; line-height:1.15; } .trole { color:var(--text-soft); font-size:13px; } .tstars { display:flex; gap:3px; margin-top:14px; color:var(--holo-pink); } /* Add-card */ .tcard.add-card { align-items:flex-start; justify-content:center; cursor:pointer; border-style:dashed; background:transparent; } .tcard.add-card:hover { border-color:var(--holo-peri); } .tcard.add-card .plus { width:58px; height:58px; border-radius:50%; background:var(--holo); display:grid; place-items:center; color:#1a1a1a; font-weight:700; } .tnav { display:flex; gap:10px; } .tnav button { width:clamp(48px,5vw,56px); height:clamp(48px,5vw,56px); border-radius:50%; border:1.5px solid var(--line); background:transparent; display:grid; place-items:center; cursor:pointer; color:var(--text); transition:.3s var(--ease); } .tnav button:hover:not(:disabled) { background:var(--holo); border-color:transparent; color:#1a1a1a; transform:translateY(-2px); } .tnav button:disabled { opacity:.3; cursor:default; } /* Modal */ .tmodal-back { position:fixed; inset:0; z-index:200; background:rgba(10,10,18,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; padding: clamp(16px,4vw,40px); animation: fadeIn .3s ease; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } .tmodal { background:var(--panel); border:1px solid var(--line); border-radius: calc(var(--radius)*2.2); width:min(960px,100%); max-height:92vh; overflow:auto; box-shadow:0 60px 140px -50px rgba(0,0,0,.7); display:grid; grid-template-columns: 1.05fr .95fr; animation: popIn .4s var(--ease); } @keyframes popIn { from{opacity:0; transform:translateY(20px) scale(.98)} to{opacity:1; transform:none} } .tmodal .tm-form { padding: clamp(26px,3vw,44px); } .tmodal .tm-preview { padding: clamp(26px,3vw,44px); background:var(--bg-2); border-left:1px solid var(--line); display:flex; flex-direction:column; gap:16px; justify-content:center; } .tmodal .tm-close { position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--panel); cursor:pointer; display:grid; place-items:center; color:var(--text); z-index:2; } .tm-stars-input { display:flex; gap:6px; margin:6px 0 4px; } .tm-stars-input button { background:none; border:none; cursor:pointer; padding:2px; color:var(--line-strong); transition:.2s; line-height:0; } .tm-stars-input button.on { color:var(--holo-pink); transform:scale(1.05); } .tm-prev-label { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); } @media (max-width:760px) { .tmodal { grid-template-columns:1fr; } .tmodal .tm-preview { border-left:none; border-top:1px solid var(--line); } } /* gerahmtes Inline-Foto (z.B. Statement-Sektion) */ .media-frame { position:relative; border-radius: calc(var(--radius) * 2.2); overflow:hidden; border:1px solid var(--line); box-shadow: 0 44px 90px -46px var(--holo-peri); isolation:isolate; } .media-frame img { width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 4 / 3.1; } .media-frame::after { content:""; position:absolute; inset:0; background:var(--holo-soft); opacity:0; mix-blend-mode:soft-light; transition:opacity .5s var(--ease); pointer-events:none; } .media-frame:hover::after { opacity:.45; } .media-badge { position:absolute; left:16px; bottom:16px; z-index:2; box-shadow:0 8px 24px -10px rgba(0,0,0,.4); } /* ============================================================ HERO 2.0 — Wordmark + Claim + Teamfoto + schwebende SoMe-Icons ============================================================ */ .hero2 { position:relative; padding-top: clamp(120px,15vh,180px); padding-bottom: clamp(40px,6vw,72px); } .hero2-stage { position:relative; text-align:center; padding-block: clamp(16px,4vw,48px); } .hero-word { font-weight:900; line-height:.82; letter-spacing:-.03em; margin:0; text-transform:uppercase; font-size: clamp(64px, calc(17vw * var(--scale)), 280px); background:var(--holo); background-size:135% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: heroHue calc(16s / var(--motion,1)) linear infinite; position:relative; z-index:2; } @keyframes heroHue { 0%{background-position:0% 0} 50%{background-position:100% 0} 100%{background-position:0% 0} } .hero-word .hero-hash { display:inline-block; transform: skewX(-7deg); margin-right:.04em; background:var(--holo); background-size:135% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation: heroHue calc(16s / var(--motion,1)) linear infinite, hashPop .7s cubic-bezier(.2,.8,.2,1) backwards; } @keyframes hashPop { from { opacity:0; transform: skewX(-7deg) translateY(.4em) scale(.55); } to { opacity:1; transform: skewX(-7deg); } } .hero-word .hero-word-text { position:relative; display:inline-block; color:#eceaf2; -webkit-text-fill-color:#eceaf2; } /* Buchstaben-Einflug (A1) */ .hero-word .hl { position:relative; z-index:1; display:inline-block; opacity:0; transform: translateY(.55em) rotateX(-50deg); filter: blur(7px); animation: letterIn 1s cubic-bezier(.2,.75,.25,1) forwards; animation-delay: calc(var(--i) * 95ms + .45s); } @keyframes letterIn { to { opacity:1; transform:none; filter: blur(0); } } /* Glint-Sweep (A3) — heller Lichtstreifen über die Buchstaben */ .hwt-shine { position:absolute; left:0; top:0; z-index:2; pointer-events:none; white-space:nowrap; background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.55) 46%, #fff 50%, rgba(255,255,255,.55) 54%, transparent 62%); background-size: 250% 100%; background-position: 130% 0; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter: drop-shadow(0 0 14px rgba(190,225,255,.55)); animation: heroShine 5.5s ease-in-out 1.9s infinite; } @keyframes heroShine { 0% { background-position:130% 0; } 32%,100% { background-position:-50% 0; } } /* 3D-Tiefe (C) + Ambient-Float */ .hero-stage { perspective: 1000px; position:relative; z-index:2; } .hero-tilt { transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; } .hero-floaty { animation: heroFloat 7s ease-in-out infinite alternate; } @keyframes heroFloat { from { transform: translateY(-7px); } to { transform: translateY(11px); } } /* Wort-Rotator (B1) */ .word-rot { display:inline-block; } .claim-rot { display:inline-block; } .word-rot__in { display:inline-block; animation: wordIn .72s cubic-bezier(.2,.8,.2,1); } @keyframes wordIn { from { opacity:0; transform: translateY(.55em) rotateX(-55deg); } to { opacity:1; transform:none; } } /* Motion-Off: alles ruhig stellen */ html[data-motion="0"] .hero-floaty, html[data-motion="0"] .hwt-shine, html[data-motion="0"] .word-rot__in, html[data-motion="0"] .hero-word .hero-hash { animation:none; } html[data-motion="0"] .hero-word .hl { animation:none; opacity:1; transform:none; filter:none; } .hero-claim { position:relative; z-index:2; margin: clamp(14px,2vw,26px) auto 0; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1; font-size: clamp(24px, calc(4.4vw * var(--scale)), 62px); color:var(--text); } .hero-claim .u { position:relative; white-space:nowrap; } .hero-claim .u::after { content:""; position:absolute; left:0; right:0; bottom:.04em; height:.12em; background:var(--holo); border-radius:2px; } .hero-ctas { position:relative; z-index:3; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top: clamp(26px,3.5vw,44px); } /* Teamfoto banner */ .hero-photo { position:relative; margin-top: clamp(30px,4vw,56px); border-radius: calc(var(--radius) * 2); overflow:hidden; z-index:1; box-shadow: 0 40px 90px -50px var(--holo-peri); border:1px solid var(--line); } .hero-photo img { width:100%; height:clamp(280px,42vw,560px); object-fit:cover; object-position:center 28%; display:block; } .hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg) 30%, transparent)); pointer-events:none; } html[data-dir="b"] .hero-photo::after { background:linear-gradient(180deg, transparent 50%, color-mix(in srgb, #000 55%, transparent)); } /* schwebende SoMe-Chips */ .floats { position:absolute; inset:-4% -2% -2%; z-index:1; pointer-events:none; } .float-chip { position:absolute; will-change:transform; transition: transform .5s cubic-bezier(.2,.8,.2,1); } /* freies Umherschweben über den ganzen Header (jedes Icon eigener Pfad) */ .float-bob { animation: wanderA var(--wdur,22s) ease-in-out infinite; } .float-chip:nth-child(6n+1) .float-bob { animation-name: wanderA; --wdur:23s; animation-delay:-2s; } .float-chip:nth-child(6n+2) .float-bob { animation-name: wanderB; --wdur:27s; animation-delay:-7s; } .float-chip:nth-child(6n+3) .float-bob { animation-name: wanderC; --wdur:25s; animation-delay:-12s; } .float-chip:nth-child(6n+4) .float-bob { animation-name: wanderB; --wdur:29s; animation-delay:-4s; } .float-chip:nth-child(6n+5) .float-bob { animation-name: wanderC; --wdur:24s; animation-delay:-16s; } .float-chip:nth-child(6n+6) .float-bob { animation-name: wanderA; --wdur:31s; animation-delay:-9s; } @keyframes wanderA { 0% { transform: translate(0,0) rotate(var(--r,0deg)); } 20% { transform: translate(7vw, 5vh) rotate(calc(var(--r,0deg) * -1)); } 40% { transform: translate(13vw, -4vh) rotate(var(--r,0deg)); } 62% { transform: translate(5vw, 9vh) rotate(calc(var(--r,0deg) * -1)); } 82% { transform: translate(-3vw, 3vh) rotate(var(--r,0deg)); } 100% { transform: translate(0,0) rotate(var(--r,0deg)); } } @keyframes wanderB { 0% { transform: translate(0,0) rotate(var(--r,0deg)); } 22% { transform: translate(-8vw, 6vh) rotate(calc(var(--r,0deg) * -1)); } 45% { transform: translate(-12vw, -5vh) rotate(var(--r,0deg)); } 68% { transform: translate(-4vw, -10vh) rotate(calc(var(--r,0deg) * -1)); } 86% { transform: translate(4vw, -3vh) rotate(var(--r,0deg)); } 100% { transform: translate(0,0) rotate(var(--r,0deg)); } } @keyframes wanderC { 0% { transform: translate(0,0) rotate(var(--r,0deg)); } 25% { transform: translate(6vw, -7vh) rotate(calc(var(--r,0deg) * -1)); } 50% { transform: translate(-5vw, -11vh) rotate(var(--r,0deg)); } 72% { transform: translate(-9vw, 4vh) rotate(calc(var(--r,0deg) * -1)); } 88% { transform: translate(2vw, 8vh) rotate(var(--r,0deg)); } 100% { transform: translate(0,0) rotate(var(--r,0deg)); } } html[data-motion="0"] .float-bob { animation:none; } .somark { width: clamp(48px,5.2vw,68px); height: clamp(48px,5.2vw,68px); border-radius: 22%; background:var(--panel); border:1px solid var(--line); display:grid; place-items:center; box-shadow: 0 18px 40px -18px rgba(20,20,40,.45); color:var(--text); pointer-events:auto; cursor:pointer; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; } html[data-dir="b"] .somark { box-shadow: 0 18px 50px -18px rgba(0,0,0,.7); } .somark::before { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--holo); opacity:0; transition:opacity .35s; z-index:-1; } .somark { position:relative; isolation:isolate; } .somark:hover { transform: scale(1.12) rotate(-4deg); border-color:transparent; color:#1a1a1a; } .somark:hover::before { opacity:1; } .somark svg { width:54%; height:54%; } /* faint holo tint per chip */ .float-chip:nth-child(odd) .somark { box-shadow: 0 18px 44px -18px var(--holo-peri); } .float-chip:nth-child(even) .somark { box-shadow: 0 18px 44px -18px var(--holo-pink); } /* ============================================================ KUNDEN-LOGO-BAND (Zug-Effekt, links → rechts) ============================================================ */ .logoband { overflow:hidden; border-block:1px solid var(--line); padding-block: clamp(22px,3vw,38px); position:relative; } .logoband__label { position:absolute; left:var(--gutter); top:50%; transform:translateY(-50%); z-index:3; background:var(--bg); padding-right:22px; } .logoband__track { display:flex; gap: clamp(44px,6vw,96px); width:max-content; align-items:center; animation: bandLTR calc(20s / var(--motion,1)) linear infinite; } @keyframes bandLTR { from { transform: translateX(-50%); } to { transform: translateX(0); } } html[data-motion="0"] .logoband__track { animation:none; } .logo-ph { display:flex; align-items:center; gap:13px; flex:0 0 auto; opacity:.5; filter:grayscale(1); transition: opacity .4s, filter .4s; } .logo-ph:hover { opacity:1; filter:none; } .logo-ph .lp-mark { width:34px; height:34px; flex:0 0 auto; } .logo-ph .lp-name { font-weight:800; font-size:21px; letter-spacing:-.02em; text-transform:uppercase; color:var(--text); white-space:nowrap; } .logo-ph .lp-sub { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.12em; color:var(--text-dim); display:block; text-transform:uppercase; } .logo-ph .lp-logo { height:38px; width:auto; max-width:150px; object-fit:contain; display:block; } @media (max-width: 720px) { .floats .float-chip.opt { display:none; } } /* ============================================================ KUNDENPORTAL — Login + Schulungs-Dashboard ============================================================ */ .portal-sec { padding-top: clamp(116px,15vh,190px); padding-bottom: clamp(56px,9vh,110px); } /* ---- Login ---- */ .portal-card { display:grid; grid-template-columns: 0.92fr 1.08fr; max-width: 1000px; margin-inline:auto; background:var(--panel); border:1px solid var(--line); border-radius: calc(var(--radius)*2.4); overflow:hidden; box-shadow: 0 60px 130px -54px rgba(20,16,40,.5); } .portal-aside { position:relative; isolation:isolate; padding: clamp(30px,3.4vw,52px); color:#1a1a1a; display:flex; flex-direction:column; justify-content:space-between; gap: clamp(28px,4vw,52px); background: linear-gradient(155deg, var(--holo-sky), var(--holo-peri) 34%, var(--holo-lav) 60%, var(--holo-pink) 100%); } .portal-aside-mark { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.35); backdrop-filter:blur(6px); } .portal-aside-mark span { font-weight:900; font-size:30px; line-height:1; color:#1a1a1a; } .portal-aside-title { font-size:clamp(30px,3.4vw,46px); font-weight:900; text-transform:uppercase; line-height:.92; letter-spacing:-.02em; margin:0; } .portal-aside-text { margin-top:14px; font-size:15px; line-height:1.5; color:rgba(26,22,38,.78); max-width:28ch; } .portal-aside-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; } .portal-aside-list li { position:relative; padding-left:26px; font-weight:600; font-size:14.5px; color:rgba(26,22,38,.86); } .portal-aside-list li::before { content:""; position:absolute; left:0; top:7px; width:13px; height:13px; border-radius:50%; background:#1a1a1a; -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3e%3c/svg%3e") center/contain no-repeat; mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3e%3c/svg%3e") center/contain no-repeat; } .portal-form { padding: clamp(30px,3.4vw,54px); display:flex; flex-direction:column; justify-content:center; } .portal-form-title { font-size:clamp(24px,2.4vw,34px); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; margin:12px 0 0; } .portal-form-sub { color:var(--text-soft); font-size:15px; margin:8px 0 26px; } .portal-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 22px; flex-wrap:wrap; } .portal-check { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-soft); cursor:pointer; } .portal-check input { accent-color: var(--holo-peri); width:15px; height:15px; } .portal-link { font-size:13.5px; color:var(--text-soft); cursor:pointer; transition:color .3s; } .portal-link:hover { color:var(--text); } .portal-hint { display:flex; align-items:center; gap:8px; margin-top:20px; font-size:12.5px; color:var(--text-dim); } .portal-lock { display:grid; place-items:center; color:var(--text-dim); } /* ---- Dashboard ---- */ .portal-dash-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom: clamp(28px,4vw,48px); } .portal-dash-title { font-size:clamp(30px,4vw,58px); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; line-height:.95; margin:14px 0 0; } .portal-dash-sub { color:var(--text-soft); font-size:14px; margin-top:10px; } .portal-logout { display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-weight:700; font-size:14px; cursor:pointer; transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; } .portal-logout:hover { transform:translateY(-2px); border-color:transparent; box-shadow:0 14px 30px -16px var(--holo-peri); } /* Tabs */ .portal-tabs { display:flex; gap:18px; margin-bottom: clamp(22px,3vw,34px); border-bottom:1px solid var(--line); } .portal-tab { position:relative; padding:12px 2px; background:none; border:none; cursor:pointer; font:inherit; font-weight:700; font-size:15px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.02em; transition:color .3s; } .portal-tab:hover { color:var(--text-soft); } .portal-tab.on { color:var(--text); } .portal-tab.on::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2.5px; background:var(--holo); border-radius:3px; } /* Rechnungen */ .inv-stats { display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(14px,1.6vw,22px); margin-bottom: clamp(22px,3vw,32px); } .inv-stat { border:1px solid var(--line); border-radius: calc(var(--radius)*1.5); padding: clamp(16px,1.8vw,24px); background:var(--panel); } .inv-stat-l { display:block; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); } .inv-stat-v { display:block; margin-top:10px; font-size:clamp(20px,2vw,28px); font-weight:900; letter-spacing:-.01em; } .inv-stat--over .inv-stat-v { color:#e0436b; } .inv-table { border:1px solid var(--line); border-radius: calc(var(--radius)*1.5); overflow:hidden; background:var(--panel); } .inv-row { display:grid; grid-template-columns: 1.1fr 1.7fr .9fr .8fr .85fr auto; gap:14px; align-items:center; padding:16px clamp(16px,1.8vw,24px); border-top:1px solid var(--line); } .inv-row:first-child { border-top:none; } .inv-row--head { background:var(--bg-2); font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); padding-block:12px; } .inv-nr { font-weight:700; font-size:14px; display:flex; flex-direction:column; gap:3px; } .inv-nr em { font-style:normal; font-weight:500; font-size:12px; color:var(--text-dim); } .inv-desc { color:var(--text-soft); font-size:14px; } .inv-amt { font-weight:800; font-size:15px; } .inv-due { color:var(--text-soft); font-size:13.5px; } .inv-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; } .inv-badge::before { content:""; width:7px; height:7px; border-radius:50%; } .inv-badge.paid { background:rgba(31,138,91,.12); color:#1f8a5b; } .inv-badge.paid::before { background:#1f8a5b; } .inv-badge.open { background:rgba(120,120,130,.14); color:var(--text-soft); } .inv-badge.open::before { background:#9a9893; } .inv-badge.overdue { background:rgba(224,67,107,.13); color:#e0436b; } .inv-badge.overdue::before { background:#e0436b; } .inv-act { text-align:right; } .inv-dl { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--text); font:inherit; font-weight:700; font-size:13px; cursor:pointer; transition:border-color .3s, background .3s; } .inv-dl:hover { border-color:transparent; background:var(--holo); color:#1a1a1a; } @media (max-width:760px){ .inv-stats { grid-template-columns:1fr; } .inv-row--head { display:none; } .inv-row { grid-template-columns:1fr 1fr; gap:9px 14px; } .inv-row > span[data-l]::before { content:attr(data-l) " · "; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); } .inv-desc { grid-column:1/-1; } .inv-act { grid-column:1/-1; text-align:left; } } .portal-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2vw,26px); } .vcard { text-align:left; border:1px solid var(--line); border-radius: calc(var(--radius)*1.8); overflow:hidden; background:var(--panel); cursor:pointer; padding:0; font:inherit; color:inherit; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; } .vcard:hover { transform:translateY(-5px); border-color:transparent; box-shadow:0 28px 56px -30px rgba(20,16,40,.45); } .vthumb { position:relative; aspect-ratio:16/10; display:grid; place-items:center; } .vthumb.g0 { background:linear-gradient(150deg, var(--holo-peri), var(--holo-lav) 60%, var(--holo-pink)); } .vthumb.g1 { background:linear-gradient(150deg, var(--holo-sky), var(--holo-lav) 55%, var(--holo-blush)); } .vthumb.g2 { background:linear-gradient(150deg, var(--holo-lav), var(--holo-pink) 55%, var(--holo-cream)); } .vthumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.02) 50%, rgba(0,0,0,.34)); } .vplay { position:relative; z-index:2; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.28); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.5); color:#fff; transition: transform .3s var(--ease), background .3s; } .vcard:hover .vplay { transform:scale(1.1); background:rgba(255,255,255,.42); } .vplay--lg { width:74px; height:74px; } .vdur { position:absolute; z-index:2; right:12px; bottom:11px; display:inline-flex; align-items:center; gap:5px; background:rgba(0,0,0,.46); color:#fff; font-size:11px; font-weight:700; padding:4px 9px; border-radius:7px; backdrop-filter:blur(4px); } .vdur svg { opacity:.85; } .vtag { position:absolute; z-index:2; left:12px; top:11px; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.85); background:rgba(0,0,0,.32); padding:4px 9px; border-radius:20px; backdrop-filter:blur(4px); } .vbody { padding: clamp(16px,1.6vw,22px); } .vmeta { display:flex; align-items:center; gap:12px; } .vlessons { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--text-dim); } .vtitle { margin:12px 0 0; font-size:clamp(17px,1.4vw,20px); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.1; } .vdesc { margin:8px 0 0; font-size:13.5px; line-height:1.5; color:var(--text-soft); } .vprog { margin-top:16px; height:5px; border-radius:5px; background:var(--line); overflow:hidden; } .vprog i { display:block; height:100%; background:var(--holo); border-radius:5px; } /* ---- Video-Modal ---- */ .vmodal-back { position:fixed; inset:0; z-index:200; background:rgba(10,10,18,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; padding: clamp(16px,4vw,48px); animation: fadeIn .3s ease; } .vmodal { position:relative; background:var(--panel); border:1px solid var(--line); border-radius: calc(var(--radius)*2.2); width:min(760px,100%); overflow:hidden; box-shadow:0 60px 140px -50px rgba(0,0,0,.7); animation: popIn .4s var(--ease); } .vmodal-close { position:absolute; top:14px; right:14px; z-index:5; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.3); color:#fff; cursor:pointer; font-size:15px; backdrop-filter:blur(4px); } .vmodal-player { position:relative; aspect-ratio:16/9; display:grid; place-items:center; gap:14px; } .vmodal-player.g0 { background:linear-gradient(150deg, var(--holo-peri), var(--holo-lav) 60%, var(--holo-pink)); } .vmodal-player.g1 { background:linear-gradient(150deg, var(--holo-sky), var(--holo-lav) 55%, var(--holo-blush)); } .vmodal-player.g2 { background:linear-gradient(150deg, var(--holo-lav), var(--holo-pink) 55%, var(--holo-cream)); } .vmodal-ph { position:absolute; bottom:16px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.9); background:rgba(0,0,0,.32); padding:5px 11px; border-radius:20px; backdrop-filter:blur(4px); } .vmodal-info { padding: clamp(22px,2.6vw,34px); } .vmodal-title { margin:12px 0 0; font-size:clamp(22px,2.2vw,30px); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; } .vmodal-desc { margin:10px 0 0; color:var(--text-soft); font-size:15px; line-height:1.55; } .vmodal-meta { display:flex; gap:20px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); } .vmodal-meta span { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--text-dim); } @media (max-width: 860px) { .portal-card { grid-template-columns:1fr; } .portal-aside { flex-direction:row; flex-wrap:wrap; align-items:center; gap:18px; } .portal-aside-list { display:none; } .portal-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .portal-grid { grid-template-columns:1fr; } .portal-dash-head { align-items:flex-start; } } /* utility */ .two-col { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,5vw,80px); align-items:center; } /* ============================================================ ÜBER BEVISIBLE — scroll-gedrehtes Phone mit wechselnden Medien ============================================================ */ .about-scrolly { position:relative; height: 340vh; } .about-sticky { position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; gap: clamp(16px,2.4vw,44px); } .aphone-stage { position:relative; perspective:1500px; display:grid; place-items:center; flex:0 0 auto; } .aphone-glow { position:absolute; left:50%; top:50%; width:48vh; height:48vh; margin:-24vh 0 0 -24vh; border-radius:50%; background:var(--holo-soft); filter:blur(72px); opacity:.45; pointer-events:none; z-index:0; animation: reelGlow 9s ease-in-out infinite alternate; } .aphone-scaler { position:relative; z-index:1; will-change:transform; } .aphone-rotor { position:relative; width: clamp(228px,23vw,300px); aspect-ratio: 9 / 19.3; transform-style:preserve-3d; will-change:transform; } .aface { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; } .aface--back { transform: rotateY(180deg); } .aphone-frame { position:absolute; inset:0; background:#0c0c0e; border-radius: 16% / 7.5%; padding:9px; box-shadow: 0 54px 104px -34px rgba(18,18,38,.62), inset 0 0 0 2px rgba(255,255,255,.08); } .aphone-screen { position:relative; width:100%; height:100%; border-radius: 12% / 6%; overflow:hidden; background:#111; } .aphone-island { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:30%; height:15px; background:#000; border-radius:10px; z-index:7; } .amedia { position:absolute; inset:0; opacity:0; transition:opacity .4s ease; display:grid; place-items:center; } .amedia.on { opacity:1; } .amedia img { width:100%; height:100%; object-fit:cover; object-position:center; } .amedia.s1 { background:linear-gradient(165deg, var(--holo-sky), var(--holo-lav) 55%, var(--holo-pink)); } .amedia.s2 { background:linear-gradient(165deg, var(--holo-lav), var(--holo-pink) 55%, var(--holo-cream)); } .amedia .aghost { position:relative; z-index:2; color:rgba(255,255,255,.78); filter: drop-shadow(0 8px 22px rgba(0,0,0,.28)); } .amedia::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 45%, rgba(0,0,0,.55)); } .amedia-cap { position:absolute; left:14px; bottom:16px; right:14px; z-index:3; color:#fff; font-weight:800; font-size:13px; text-shadow:0 1px 8px rgba(0,0,0,.5); } .about-copy { position:relative; order:-1; flex:0 0 auto; width: clamp(300px, 34vw, 440px); z-index:5; } .about-h2 { transition: opacity .3s linear; will-change: opacity, transform; } .about-body { position:relative; will-change: transform; } .about-steps { position:relative; margin-top: clamp(20px,2.6vw,30px); min-height: 182px; } .about-step { position:absolute; inset:0; margin:0; color:var(--text); font-size:clamp(19px,1.7vw,26px); line-height:1.5; font-weight:500; opacity:0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .about-step.on { opacity:1; transform:none; } .about-cta { margin-top: clamp(12px,2vw,22px); opacity:0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .about-cta.on { opacity:1; transform:none; } @media (max-width: 920px) { .about-scrolly { height: 300vh; } .about-sticky { flex-direction:column; align-items:center; justify-content:flex-start; gap:0; padding-top: clamp(40px,9vh,80px); } .aphone-stage { order:2; min-height: clamp(420px,58vh,560px); width:100%; } .about-copy { order:1; text-align:center; width: min(34ch, 92vw); margin:0 auto; } .about-steps { min-height: 132px; } .about-step { left:0; right:0; } .about-cta { display:flex; justify-content:center; } } /* Eingebettetes Kontaktformular im "Werde sichtbar"-Abschnitt */ .contact-embed { display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px,4.5vw,64px); text-align:left; max-width:960px; margin-inline:auto; align-items:start; } .contact-embed .contact-form form { display:flex; flex-direction:column; } .contact-embed .h-mail { background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; width:max-content; } @media (max-width: 760px) { .contact-embed { grid-template-columns:1fr; gap: clamp(28px,7vw,40px); } } /* ============================================================ PROJEKTE — interaktiver Phone-Stack (Reels) ============================================================ */ .showcase { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px,5vw,80px); align-items:center; } @media (max-width:920px){ .showcase{ grid-template-columns:1fr; } } .pstack { position:relative; height: clamp(440px,50vw,600px); } .phone { position:absolute; top:50%; left:50%; width: clamp(214px,22vw,278px); aspect-ratio: 9 / 19.3; cursor:pointer; will-change:transform; transition: transform .6s cubic-bezier(.2,.85,.2,1), filter .5s; } .phone.is-back:hover { filter:brightness(1.04); } .phone-frame { position:absolute; inset:0; background:#0c0c0e; border-radius: 16% / 7.5%; padding:9px; box-shadow: 0 50px 90px -34px rgba(18,18,38,.55), inset 0 0 0 2px rgba(255,255,255,.07); } html[data-dir="b"] .phone-frame { box-shadow: 0 50px 90px -30px rgba(0,0,0,.8), inset 0 0 0 2px rgba(255,255,255,.09); } .phone-screen { position:relative; width:100%; height:100%; border-radius: 12% / 6%; overflow:hidden; } .phone-screen.g0 { background: linear-gradient(165deg, var(--holo-peri), var(--holo-lav) 55%, var(--holo-pink)); } .phone-screen.g1 { background: linear-gradient(165deg, var(--holo-sky), var(--holo-lav) 50%, var(--holo-blush)); } .phone-screen.g2 { background: linear-gradient(165deg, var(--holo-lav), var(--holo-pink) 55%, var(--holo-cream)); } .phone-screen::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.45)); } .island { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:32%; height:16px; background:#000; border-radius:10px; z-index:6; } .reel-live { position:absolute; top:14px; right:14px; z-index:5; background:rgba(0,0,0,.42); color:#fff; font-size:9px; font-weight:800; letter-spacing:.12em; padding:4px 8px; border-radius:6px; display:flex; gap:5px; align-items:center; backdrop-filter:blur(4px); } .reel-live::before { content:""; width:6px; height:6px; border-radius:50%; background:#ff4d6d; box-shadow:0 0 0 3px rgba(255,77,109,.3); } .reel-play { position:absolute; inset:0; margin:auto; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.22); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.4); display:grid; place-items:center; z-index:4; cursor:pointer; transition: transform .3s var(--ease), background .3s; color:#fff; } .reel-play:hover { transform: scale(1.08); background:rgba(255,255,255,.32); } .reel-rail { position:absolute; right:11px; bottom:74px; display:flex; flex-direction:column; gap:15px; align-items:center; z-index:4; } .reel-btn { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:grid; place-items:center; color:#fff; cursor:pointer; transition: transform .25s var(--ease), background .25s; } .reel-btn:hover { transform: scale(1.14); background:rgba(255,255,255,.28); } .reel-btn.liked { background:#ff3b5c; } .reel-cnt { color:#fff; font-size:10px; font-weight:700; margin-top:4px; text-align:center; text-shadow:0 1px 4px rgba(0,0,0,.4); } .reel-meta { position:absolute; left:14px; bottom:18px; right:60px; color:#fff; z-index:4; text-shadow:0 1px 8px rgba(0,0,0,.5); } .reel-handle { font-weight:800; font-size:14px; } .reel-cap { font-size:11.5px; opacity:.95; margin-top:3px; line-height:1.35; } .reel-prog { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.28); z-index:6; } .reel-prog i { display:block; height:100%; width:0; background:var(--holo); } .reel-prog.playing i { animation: reelProg 8s linear forwards; } @keyframes reelProg { from{ width:0; } to{ width:100%; } } html[data-motion="0"] .reel-prog.playing i { width:60%; animation:none; } /* client chips */ .client-chips { display:flex; flex-wrap:wrap; gap:10px; } .client-chip { padding:11px 18px; border:1px solid var(--line); border-radius:999px; font-weight:700; font-size:14px; background:var(--panel); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; cursor:default; } .client-chip:hover { transform: translateY(-3px); border-color:transparent; box-shadow:0 14px 30px -16px var(--holo-peri); } .client-chip:hover .cc-dot { transform:scale(1.4); } .cc-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--holo); margin-right:8px; vertical-align:middle; transition:transform .3s; } .mt-s{margin-top:14px}.mt-m{margin-top:28px}.mt-l{margin-top:48px} .flex{display:flex}.gap-s{gap:12px}.gap-m{gap:20px}.wrap-f{flex-wrap:wrap}.aic{align-items:center} .tcenter{text-align:center} .divider{height:1px;background:var(--line);border:none;margin:0} /* ============================================================ VORGEHEN — "Der Weg nach oben" (Journey-Pfad statt 4 Kacheln) ============================================================ */ .journey { position:relative; margin-top: clamp(40px,5vw,76px); } /* ---- Aufsteigende Schiene: Nodes auf einer Holo-Diagonale ---- */ .journey-rail { position:relative; height: clamp(240px,27vw,320px); } .journey-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; pointer-events:none; } .journey-svg .jline { fill:none; stroke:url(#jgrad); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; } .journey-svg .jline-bg { fill:none; stroke:var(--line); stroke-width:1.5; vector-effect:non-scaling-stroke; } .jnode-wrap { position:absolute; left:var(--cx); top:var(--cy); transform:translate(-50%,-50%); z-index:2; } /* Node-Kreis */ .jstep-node { position:relative; width: clamp(64px,7vw,84px); height: clamp(64px,7vw,84px); border-radius:50%; display:grid; place-items:center; background:var(--panel); border:1px solid var(--line); color:var(--text); box-shadow: 0 14px 34px -18px rgba(20,16,40,.5); transition: transform .5s var(--ease), box-shadow .5s, border-color .5s, background .5s, color .5s; } /* dünner Holo-Ring um jeden Node, damit er auf der Schiene „sitzt" */ .jstep-node::before { content:""; position:absolute; inset:-5px; border-radius:50%; z-index:-1; background:var(--holo); opacity:.18; transition:opacity .5s var(--ease); } .jnode-wrap:hover .jstep-node { border-color:transparent; background:var(--holo); color:#1a1a1a; transform: translateY(-7px) scale(1.07); box-shadow: 0 26px 48px -18px var(--holo-peri); } .jnode-wrap:hover .jstep-node::before { opacity:.45; } /* Zielschritt = Belohnung, dauerhaft holo-gefüllt + grösser */ .jnode-wrap.is-goal .jstep-node { background:var(--holo); border-color:transparent; color:#1a1a1a; box-shadow: 0 22px 46px -18px var(--holo-peri); transform: scale(1.12); } .jnode-wrap.is-goal:hover .jstep-node { transform: translateY(-7px) scale(1.18); } .jnode-wrap.is-goal .jstep-node::before { opacity:.4; inset:-7px; } /* Info-Reihe (sauber ausgerichtet, Nummer lebt hier — kein Überlappen) */ .journey-infos { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,2vw,30px); margin-top: clamp(20px,2.4vw,34px); } .jstep-info { text-align:center; padding-inline: clamp(4px,1vw,16px); } .jstep-num { display:inline-block; font-weight:900; font-size: clamp(30px,3vw,44px); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.4px var(--line-strong); opacity:.5; } .jstep-info.is-goal .jstep-num { -webkit-text-stroke:0; background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:1; } .jstep-info h3 { margin:10px 0 8px; font-size:clamp(17px,1.5vw,22px); text-transform:uppercase; letter-spacing:-.01em; line-height:1; } .jstep-info.is-goal h3 { background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent; } .jstep-info p { margin:0; font-size:14.5px; line-height:1.5; color:var(--text-soft); max-width:25ch; margin-inline:auto; text-wrap:pretty; } @media (max-width: 880px) { .journey-rail { display:none; } .journey-infos { grid-template-columns: repeat(2,1fr); gap: clamp(20px,4vw,30px); } .jstep-num { -webkit-text-stroke:1.2px var(--line-strong); } } @media (max-width: 480px) { .journey-infos { grid-template-columns: 1fr; } } /* ─── Cookie-Consent ───────────────────────────────────────────────────────── Schlichte, nicht aufdringliche Leiste unten. Theme-adaptiv über die Design-Variablen (--panel/--text/--line/--holo), passt sich a/b/c an. */ .cookie-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); box-shadow: 0 14px 44px rgba(0,0,0,.16); animation: cc-in .5s cubic-bezier(.22,1,.36,1) both; } @keyframes cc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } html[data-motion="0"] .cookie-consent { animation: none; } .cc-text { flex: 1 1 240px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-soft); } .cc-link { color: var(--text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; } .cc-actions { display: flex; gap: 8px; flex-shrink: 0; } .cc-btn { font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; padding: 9px 16px; border-radius: calc(var(--radius) + 2px); cursor: pointer; border: 1px solid var(--line); white-space: nowrap; transition: transform .15s ease, opacity .15s ease, border-color .15s ease, color .15s ease; } .cc-btn:active { transform: scale(.97); } .cc-decline { background: transparent; color: var(--text-soft); } .cc-decline:hover { border-color: var(--line-strong); color: var(--text); } .cc-accept { background: var(--holo); color: #fff; border-color: transparent; font-weight: 800; } .cc-accept:hover { opacity: .92; } @media (max-width: 520px) { .cookie-consent { flex-direction: column; align-items: stretch; } .cc-actions { justify-content: flex-end; } }