/* ============================================================ PLAYGROUND — Premium Layer v1 Editorial-Typography, Reduktion, Rhythmus, Cinema-Feel. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400;1,9..144,500&display=swap'); .pg-editorial,.pg-quotes h2,.pg-testi blockquote,.s9-testi blockquote,.uu2-mani h2,.uu-mani h2,.b4-cover h2,.mag-feature-title,h2.pg-serif,h1.pg-serif,.uu-hero .disp,.br-hero h1,.b4-cover .b4-cover-content h2 i,.s3 h2 span.out,.s7 h2 i,.s8 h2 .strike,.s6 h2 i,.pr-hero h1 span.hl,.mag-feature h2{font-family:'Fraunces','Bricolage Grotesque',Georgia,serif !important;font-style:italic;font-weight:400;letter-spacing:-.03em;font-optical-sizing:auto} blockquote,.pg-testi blockquote,.s9-testi blockquote{font-family:'Fraunces',Georgia,serif !important;font-style:italic;font-weight:300;letter-spacing:-.01em;line-height:1.5 !important} .pg-note{font-size:15px !important;opacity:.75 !important} .pg-note::before{opacity:.3 !important} .pg-sticker{font-size:14px !important;padding:8px 14px !important;box-shadow:0 6px 20px -6px rgba(0,0,0,.4) !important} @keyframes pgWobble{0%,100%{transform:none}} .chip{font-size:12.5px !important;padding:8px 14px !important;letter-spacing:.01em !important;border:1px solid rgba(239,239,239,.14) !important;background:transparent !important;color:rgba(239,239,239,.7) !important} .pg-float{opacity:.06 !important;filter:blur(1px)} section.wrap[style*="padding:112px 0"],section.wrap[style*="padding:120px 0"]{padding:160px 20px !important} section.wrap[style*="padding:80px 0"]{padding:120px 20px !important} .uu-hero .lead,.br-hero .lead,.b4-hero .lead,.pr-hero .lead,.mag-feature-txt p,.s2 .lead,.s4 .note{max-width:620px !important} p,.muted,li{line-height:1.75 !important;letter-spacing:-.003em !important} .lead,p.lead,.disp + p{font-size:clamp(16px,1.35vw,19px) !important;line-height:1.7 !important} body{font-size:15px !important;line-height:1.7 !important} .hero-inner h1,.uu-hero h1,.pr-hero h1{font-size:clamp(52px,10vw,148px) !important;line-height:.92 !important;letter-spacing:-.035em !important} .nav{transition:padding 500ms cubic-bezier(.19,1,.22,1),background 400ms cubic-bezier(.19,1,.22,1),backdrop-filter 400ms cubic-bezier(.19,1,.22,1) !important} .nav .row{transition:padding 500ms cubic-bezier(.19,1,.22,1) !important} .nav.scrolled{padding:8px 0 !important;background:rgba(0,0,0,.85) !important;backdrop-filter:blur(24px) saturate(1.4) !important;-webkit-backdrop-filter:blur(24px) saturate(1.4) !important;border-bottom:1px solid rgba(239,239,239,.06)} .nav.scrolled .row{padding:6px 20px !important} .nav.scrolled .logo{height:28px !important;transition:height 400ms cubic-bezier(.19,1,.22,1)} .nav .logo{transition:height 400ms cubic-bezier(.19,1,.22,1)} body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9997;box-shadow:inset 0 0 260px 50px rgba(0,0,0,.55)} .card:hover,.pg-testi:hover,.pr-card:hover,.b4-case:hover,.br-case:hover,.s4-card:hover,.s10-step:hover,.s6-branch:hover,.s7-case:hover,.s9-testi:hover,.uu2-people-img:hover,.mag-feature-item:hover{transform:translateY(-2px) !important;transition:transform 600ms cubic-bezier(.19,1,.22,1) !important;animation:none !important} .eimg,.cover.eimg{transition:transform 1200ms cubic-bezier(.19,1,.22,1) !important} .group:hover .eimg{transform:scale(1.03) !important} .hero-vid{animation:heroFadeIn 2s cubic-bezier(.19,1,.22,1) both} @keyframes heroFadeIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}} .pill{letter-spacing:.01em !important;padding:14px 26px !important;font-size:14px !important;transition:transform 500ms cubic-bezier(.19,1,.22,1),box-shadow 500ms cubic-bezier(.19,1,.22,1),background 300ms ease !important} .pill:hover{transform:translateY(-2px) !important} .eyebrow,.eb{font-size:10.5px !important;letter-spacing:.38em !important;opacity:.8} .tag{font-family:'Bricolage Grotesque',sans-serif !important;font-size:10.5px !important;letter-spacing:.18em !important;text-transform:uppercase !important;padding:6px 12px !important;font-weight:700 !important;border-radius:999px !important;border-color:rgba(239,239,239,.15) !important;color:rgba(239,239,239,.7) !important} .pg-testi,.s9-testi{padding:44px 40px !important;border-radius:4px !important;background:rgba(15,15,15,.6) !important;backdrop-filter:blur(12px);border:1px solid rgba(239,239,239,.06) !important} .foot{padding-top:120px !important;border-top:1px solid rgba(239,239,239,.05)} @media(max-width:640px){body{font-size:15px !important;line-height:1.65 !important}section.wrap[style*="padding:112px"],section.wrap[style*="padding:120px"]{padding:96px 24px !important}.nav.scrolled{padding:4px 0 !important}} @media(prefers-reduced-motion:reduce){.hero-vid,.eimg,.nav,.pill{animation:none !important;transition:none !important}body::before{animation:none !important}} /* ============ CURSOR: FESTE WEISSE FARBE ============ */ #pgCursor, #pg-cursor, .pg-cursor, .pg-cursor-dot { background: #efefef !important; animation: none !important; transition: transform 200ms ease, opacity 200ms ease !important; } #pgCursor::before, #pgCursor::after, #pg-cursor::before, #pg-cursor::after, .pg-cursor::before, .pg-cursor::after { background: #efefef !important; animation: none !important; } /* ============ KREISE UM WORTE ENTFERNEN ============ */ .pg-circle::after, .pg-circle.in::after, .pg-circle:hover::after, .pg-circle.hot::after, .pg-circle.flame::after { display: none !important; content: none !important; opacity: 0 !important; } /* ============ CURSOR: FESTE, EINHEITLICHE FARBE ============ */ /* Neuer smoother Cursor — immer weiß/paper, keine Farbwechsel */ #pg-smiley { color: #efefef !important; background: #efefef !important; box-shadow: 0 0 20px rgba(239, 239, 239, 0.4) !important; mix-blend-mode: normal !important; transition: transform .2s ease, opacity .2s ease !important; } #pg-smiley::before { border-color: rgba(239, 239, 239, 0.4) !important; } /* Auch beim Hover keine Farbänderung */ #pg-smiley.hover, #pg-smiley.active, #pg-smiley:hover { color: #efefef !important; background: #efefef !important; } /* Alten Fallback-Cursor .cur ebenfalls einheitlich */ .cur, .cur.hover { background: #efefef !important; mix-blend-mode: normal !important; } .cur span { color: #000 !important; } /* ============ PAPIERFLIEGER — COOLE INTERAKTION ============ */ .plane-fixed { cursor: pointer !important; } /* Hover: sanfte Vergrößerung damit man merkt "clickable" */ .plane-fixed:hover { transform: scale(1.15) !important; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1) !important; filter: drop-shadow(0 0 12px rgba(214, 254, 9, .5)); } /* Crumple-Animation deutlich krasser */ .plane-fixed.crumpled { animation: crumpleAndFall 1.6s cubic-bezier(.55, .085, .68, .53) forwards !important; pointer-events: none !important; } @keyframes crumpleAndFall { 0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; filter: none; } 8% { transform: translate(0,-20px) rotate(-90deg) scale(0.4); opacity: 1; filter: brightness(1.5); } 16% { transform: translate(10px,-10px) rotate(180deg) scale(0.25); opacity: 1; filter: contrast(1.3); } 24% { transform: translate(-8px,15px) rotate(280deg) scale(0.2); opacity: 1; filter: contrast(1.5) brightness(.8); } 35% { transform: translate(20px,60px) rotate(450deg) scale(0.18); opacity: 1; filter: contrast(1.6) brightness(.7); } 100% { transform: translate(80px, 700px) rotate(1080deg) scale(0.1); opacity: 0; filter: contrast(1.7) brightness(.5); } } /* Comic-Splash-Text der beim Klick aufpoppt */ .plane-splat { position: fixed; z-index: 120; pointer-events: none; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 900; font-size: 48px; color: #D6FE09; text-shadow: 3px 3px 0 #FE90E0, -1px -1px 0 #000, 0 0 20px rgba(214, 254, 9, .8); letter-spacing: -.02em; transform: translate(-50%, -50%) rotate(-8deg) scale(0); animation: splatPop .9s cubic-bezier(.34, 1.8, .64, 1) forwards; white-space: nowrap; } @keyframes splatPop { 0% { transform: translate(-50%, -50%) rotate(-8deg) scale(0); opacity: 0; } 25% { transform: translate(-50%, -50%) rotate(6deg) scale(1.4); opacity: 1; } 40% { transform: translate(-50%, -50%) rotate(-3deg) scale(1.1); opacity: 1; } 70% { transform: translate(-50%, -50%) rotate(2deg) scale(1.0); opacity: 1; } 100% { transform: translate(-50%, -80%) rotate(-2deg) scale(.85); opacity: 0; } } /* Papierfetzen die radial wegfliegen */ .plane-shred { position: fixed; z-index: 118; pointer-events: none; width: 10px; height: 14px; background: #efefef; box-shadow: 0 0 4px rgba(0,0,0,.3); transform-origin: center; animation: shredFly 1s cubic-bezier(.19, 1, .22, 1) forwards; clip-path: polygon(20% 0%, 80% 10%, 100% 60%, 70% 100%, 10% 90%, 0% 40%); } @keyframes shredFly { 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(var(--rot, 720deg)) scale(0.2); opacity: 0; } } /* Screen-Shake beim Klick */ @keyframes screenShake { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-3px, 2px); } 20% { transform: translate(3px, -1px); } 30% { transform: translate(-2px, -2px); } 40% { transform: translate(2px, 2px); } 50% { transform: translate(-2px, 1px); } 60% { transform: translate(2px, -1px); } 70% { transform: translate(-1px, 1px); } 80% { transform: translate(1px, 0); } 90% { transform: translate(-1px, 0); } } body.shaking { animation: screenShake .35s cubic-bezier(.36, .07, .19, .97); } /* Rausch-Effekt hinter dem Splash */ .plane-flash { position: fixed; z-index: 117; pointer-events: none; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(214,254,9,.6) 0%, rgba(254,144,224,.3) 40%, transparent 70%); transform: translate(-50%, -50%) scale(0); animation: flashBurst .5s ease-out forwards; } @keyframes flashBurst { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(1.2); opacity: .8; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } /* ============ PAPIERFLIEGER: FLUG-PHYSIK + "FANG MICH" LABEL ============ */ /* Intro-Animation deaktivieren, weil JS die Position komplett steuert */ .plane-fixed { animation: none !important; transition: none !important; pointer-events: none !important; /* Klick geht durch, Detection via JS */ } .plane-fixed:hover { transform: none !important; /* Physik-JS steuert transform */ filter: none !important; } /* "Fang mich!" - Label das dem Flieger folgt (nicht am Flieger dran, damit hover-effect klar bleibt) */ .plane-hint { position: fixed; z-index: 34; pointer-events: none; font-family: 'Caveat', cursive; font-weight: 700; font-size: 20px; color: #D6FE09; text-shadow: 0 2px 8px rgba(0,0,0,.5); white-space: nowrap; opacity: 0; animation: hintPulse 3s ease-in-out infinite; will-change: left, top, opacity; } @keyframes hintPulse { 0%, 100% { opacity: 0; transform: translate(-50%, -100%) scale(0.9); } 20%, 60% { opacity: 1; transform: translate(-50%, -100%) scale(1); } 80% { opacity: 0; transform: translate(-50%, -110%) scale(0.95); } }