:root { --bg: #0A0A0A; --text: #fff; --fade-logo-duration: 1s; /* logo fades in over 3s */ --post-logo-wait: 0s; /* wait 5s after logo finishes */ --cta-fade-duration: 1.5s; } /* inter-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('../assets/fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 500; src: url('../assets/fonts/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 700; src: url('../assets/fonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-900 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Inter'; font-style: normal; font-weight: 900; src: url('../assets/fonts/inter-v20-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif; } /* Layout: 2/3 logo area, 1/3 CTA, footer auto */ .page { min-height: 100svh; display: grid; grid-template-rows: 4fr 1fr auto; } .legal-page { min-height: 100svh; display: grid; grid-template-rows: 5fr auto; padding: 50px; } .legal-page :not(footer) a { color: #EB280F!important; } /* We now reveal the logo only when .show-logo is present on . The CTA still fades in 3s after logo + extra 5s wait (total 8s after .show-logo). */ .show-logo .logo { animation: fadeIn var(--fade-logo-duration) ease-out forwards; } .show-logo .cta { animation: fadeIn var(--cta-fade-duration) ease-out forwards; animation-delay: calc(var(--fade-logo-duration) + var(--post-logo-wait)); /* 3s + 5s */ } /* Remove/ignore the old .is-ready animation triggers for logo/cta */ .logo-wrap, .cta-wrap { display: grid; place-items: center; padding: 2rem; } /* Logo image */ .logo { max-width: min(72vw, 720px); width: 100%; height: auto; /* keep aspect ratio */ opacity: 0; /* start hidden */ } /* CTA button */ .cta { display: inline-block; padding: 0.9rem 1.2rem; border: 1px solid var(--text); /* white outline */ border-radius: 10px; color: var(--text); background: transparent; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; line-height: 1; opacity: 0; /* start hidden */ transition: transform 200ms ease, background-color 200ms ease, color 200ms ease; } .cta:hover { background-color: var(--text); color: #000f } .cta:focus-visible { outline: 3px dotted var(--text); outline-offset: 4px; } /* Intro wrapper sits centered inside the header area */ .intro { display: grid; place-items: center; padding: 2rem; position: absolute; height: 100%; width: 100%; } .intro-inner { display: grid; grid-template-columns: auto 1fr auto; /* orb | progress | labels */ gap: 1rem; align-items: center; } /* Red square (20x20) spinning around its center with uneven rhythm */ .orb { width: 20px; height: 20px; background: #EB280F; /* red */ transform-origin: 50% 50%; animation: orbSpin 1s linear infinite; } /* Progress track with white border + inner bar */ .progress { width: min(40vw, 640px); height: 8px; border: 1px solid var(--text); border-radius: 2px; position: relative; } .progress .bar { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--text); animation: barFill 4s linear forwards; } /* Labels on the right */ .labels { min-width: 9ch; position: relative; height: 1.5em; display: grid; align-items: center; } .label { position: absolute; inset: 0; opacity: 0; line-height: 1.5; font-weight: 500; } /* Show the right word at the right time: 0–2s Technik, 2–4s Leidenschaft, 4–7s Erleben */ .label-technik { animation: showA 4s linear forwards; } .label-leidenschaft { animation: showB 4s linear forwards; } .label-erleben { animation: showC 4s linear forwards; } /* Hide intro at the end (JS adds .intro-done to ) */ .intro { transition: opacity 400ms ease; } .intro-done .intro { opacity: 0; pointer-events: none; visibility: hidden; } /* Orb rotation: start at 7deg, end at 7deg (full circle + same heading). We slow around 2s, 4s, 6s by compressing angle change near those times. */ @keyframes orbSpin { 0% { transform: rotate(7deg); } 28.57% /* 2s */ { transform: rotate(90deg); } /* slower here */ 57.14% /* 4s */ { transform: rotate(180deg); } /* slower here */ 85.71% /* 6s */ { transform: rotate(300deg); } /* slower here */ 100% { transform: rotate(367deg); } /* 360 + 7deg */ } /* Progress bar: slower gain at 2s/4s/6s by mapping less width at those points */ @keyframes barFill { 0% { width: 0%; } 28.57% { width: 20%; } /* slower segment around 2s */ 57.14% { width: 40%; } /* slower segment around 4s */ 85.71% { width: 70%; } /* slower segment around 6s */ 100% { width: 100%; } } /* Labels timing windows */ @keyframes showA { 0%, 28.56% { opacity: 1; } 28.57%, 100% { opacity: 0; } } @keyframes showB { 0%, 28.56% { opacity: 0; } 28.57%, 57.13% { opacity: 1; } 57.14%, 100% { opacity: 0; } } @keyframes showC { 0%, 57.13% { opacity: 0; } 57.14%, 100% { opacity: 1; } } footer { text-align: center; padding: 1rem 1.25rem 2rem; font-size: 0.9rem; opacity: 0.85; } footer a { color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); margin: 0 0.5rem; } footer a:hover { border-bottom-color: var(--text); } /* Animations start only after JS adds .is-ready to */ .is-ready .logo { animation: fadeIn var(--fade-logo-duration) ease-out forwards; } .is-ready .cta { animation: fadeIn var(--cta-fade-duration) ease-out forwards; animation-delay: calc(var(--fade-logo-duration) + var(--post-logo-wait)); /* 3s + 5s */ } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Accessibility: reduced motion */ @media (prefers-reduced-motion: reduce) { .logo, .cta { animation: none !important; opacity: 1 !important; } }