/* ========================================================================== Drews Marketing — Design Tokens Akzent: Dunkelgrün #1F3D2B | Hintergrund: #FAFAFA | Schrift: Geist ========================================================================== */ @import url('https://fonts.cdnfonts.com/css/geist'); :root { --color-bg: #FAFAFA; --color-bg-alt: #FFFFFF; --color-ink: #14181A; --color-ink-soft: #5A6560; --color-accent: #1F3D2B; --color-accent-soft: #E7EEE8; --color-black: #0C0F0E; --color-surface-2: #202020; --color-line: #E4E4E0; --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --container: 1160px; --gutter: clamp(20px, 5vw, 64px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; padding-top: 76px; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; color: inherit; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } /* ---------- Motion: scroll reveal ---------- Gated behind html.js so content stays visible if JS never runs (no-JS / crawler / failed script load) — .js is added synchronously in . */ /* Uses the standalone `translate` property (not `transform`) so it composes cleanly with any component's own hover :hover transform (e.g. card lift) instead of one clobbering the other via CSS specificity. */ html.js [data-reveal] { opacity: 0; translate: 0 18px; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), translate 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0s); } html.js [data-reveal].is-visible { opacity: 1; translate: 0 0; } .steps-grid [data-reveal]:nth-child(2) { --reveal-delay: 0.08s; } .steps-grid [data-reveal]:nth-child(3) { --reveal-delay: 0.16s; } .offer-grid [data-reveal]:nth-child(2) { --reveal-delay: 0.1s; } .process-grid [data-reveal]:nth-child(2) { --reveal-delay: 0.08s; } .process-grid [data-reveal]:nth-child(3) { --reveal-delay: 0.16s; } @media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1; translate: 0 0; transition: none; } } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; } .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-line); border-radius: 100px; padding: 7px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-soft); background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .eyebrow-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; } .text-soft { color: var(--color-ink-soft); } /* ---------- Dark surface sections ---------- */ .section-dark { background: var(--color-surface-2); color: #FAFAFA; } .section-dark .text-soft { color: rgba(255,255,255,0.66); } .section-dark .eyebrow { color: rgba(255,255,255,0.7); } .section-dark h2, .section-dark h3 { color: #fff; } /* ---------- Intro overlay: logo shrinks, drifts up and dissolves ---------- */ /* No CSS animation declared on these two — script.js's initIntroOverlay() drives both the icon's journey and the overlay's fade via the Web Animations API, so their timing can stay perfectly in sync with each other and with .hero-reveal-group's own CSS transition below. */ .intro-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--color-bg); opacity: 1; } .intro-overlay-icon { /* A sibling of .intro-overlay, not a child — it needs its own fixed, independently centered position, and it must keep rendering above the overlay throughout its whole journey (including once the overlay starts fading), not be clipped/faded along with it. */ position: fixed; top: 50%; left: 50%; width: 84px; height: auto; z-index: 10000; transform-origin: 50% 50%; opacity: 1; transform: translate(-50%, -50%) scale(1); } /* html.intro-done is added synchronously in , before first paint, so a repeat visit within the same session never shows/flashes the overlay. Both rules are needed since the icon is a sibling of .intro-overlay, not a child that would otherwise get hidden along with its parent. */ html.intro-done .intro-overlay, html.intro-done .intro-overlay-icon { display: none; } /* Fades AND rises in — same duration/easing as the intro icon's own travel (see initIntroOverlay in script.js), started at the exact same instant (script.js adds .intro-reveal right when it starts the icon's WAAPI animation, not after it finishes), so the logo dissolving away and the rest of the hero appearing read as one unified motion instead of two separate steps. Repeat visits (html.intro-done) get the settled state immediately, no transition. */ .hero-reveal-group { opacity: 0; transform: translateY(16px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } html.intro-reveal .hero-reveal-group, html.intro-done .hero-reveal-group { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { /* No travel, no fade — the hero content simply appears immediately. initIntroOverlay() detects this query and skips straight to removing the overlay/icon and revealing the hero. */ .hero-reveal-group { transition: none; } } /* ---------- Header ---------- */ /* The header itself is just a full-width positioning anchor; the visible bar/pill lives entirely on .wrap so it can shrink into a centered, floating pill on scroll without the outer fixed element moving. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; /* The pill morph animates several layout-affecting properties (max-width, height, padding, margin-top) on scroll. contain:layout scopes that recalculation to this subtree instead of the whole document, which is cheap on desktop either way but meaningfully reduces per-frame cost on real mobile hardware while a scroll gesture is also in flight. Caveat: contain:layout makes this element a containing block for its own position:fixed descendants (like .main-nav in the mobile dropdown), same as transform would. That's harmless only because .site-header has no padding/border of its own, so its padding-box origin still lines up exactly with the viewport's. Don't add padding/border directly on .site-header without re-checking .main-nav's fixed positioning. */ contain: layout style; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; max-width: var(--container); background: rgba(250, 250, 250, 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid transparent; border-bottom-color: var(--color-line); border-radius: 0; margin-top: 0; box-shadow: none; transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1), height 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1), padding 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .site-header.at-top .wrap { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: none; } /* Floating pill: compact, centered, detached from the very top edge — Aceternity-style "floating navbar" once the visitor scrolls down. */ .site-header.is-pill .wrap { max-width: 720px; height: 60px; margin-top: 14px; padding-left: 24px; padding-right: 14px; border-radius: 100px; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--color-line); box-shadow: 0 12px 32px rgba(12, 15, 14, 0.12); } .site-header.is-pill .logo-img { height: 22px; } .site-header.is-pill .main-nav { gap: 24px; } .site-header.is-pill .main-nav .btn { padding: 10px 20px; font-size: 14px; } @media (prefers-reduced-motion: reduce) { .site-header .wrap { transition: background 0.2s ease, border-color 0.2s ease; } } .logo { display: flex; align-items: center; transition: opacity 0.2s ease; } .logo-img { height: 26px; width: auto; display: block; transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1); } /* Hero sections bleed their background behind the fixed, transparent header */ .hero-bleed { margin-top: -76px; padding-top: 76px; } .main-nav { display: flex; align-items: center; gap: 36px; } .main-nav a { font-size: 15px; font-weight: 500; color: var(--color-ink-soft); /* .main-nav a is more specific than .btn (class+element beats class alone), so its own transition list fully overrides .btn's — including .btn's padding/font-size entries — for any that has both, like the "Erstgespräch" button. Re-declaring padding/font-size here too keeps that button's own pill-morph resize smooth instead of silently losing those two properties to this higher-specificity rule. */ transition: color 0.15s ease, padding 0.45s cubic-bezier(0.22, 1, 0.36, 1), font-size 0.45s cubic-bezier(0.22, 1, 0.36, 1); } /* Icon chips only exist for the mobile dropdown's row layout (see .main-nav.open .nav-icon in the mobile media query) — hidden by default so the desktop horizontal nav keeps rendering as plain text links, unaffected. */ .nav-icon { display: none; } .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--color-ink); } .main-nav a.btn-primary, .main-nav a.btn-primary:hover { color: #fff; } .nav-toggle { display: none; background: none; border: none; padding: 8px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-ink); margin: 5px 0; transition: transform 0.28s ease, opacity 0.2s ease; } /* Hamburger → X: top/bottom bars rotate into the two strokes of the X and meet in the middle, the center bar fades out — the classic pattern, kept calm/precise (plain ease, no overshoot) to match the site's understated style rather than the bouncier cubic-bezier used on buttons elsewhere. */ .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 100px; font-size: 15px; font-weight: 600; border: 1px solid transparent; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, padding 0.45s cubic-bezier(0.22, 1, 0.36, 1), font-size 0.45s cubic-bezier(0.22, 1, 0.36, 1); white-space: nowrap; } .btn:hover { transform: translateY(-1px) scale(1.015); } .btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; } @media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; transition: background 0.2s ease, border-color 0.2s ease; } } .btn-primary { background: var(--color-accent); color: #fff; } .btn-primary:hover { background: #17301F; } .btn-dark { background: var(--color-black); color: #fff; } .btn-dark:hover { background: #000; } .btn-outline { background: transparent; border-color: var(--color-line); color: var(--color-ink); } .btn-outline:hover { border-color: var(--color-ink); } /* Same glass recipe as .glass-card (blur + translucency + inset/drop shadow for depth), scaled down for a pill-shaped button instead of a full card — used by the FAQ "Frage stellen" button so it reads as part of the same glassmorphism family as the site's cards/modals rather than a flat outline. Not folded into .btn-outline itself since that class is also used sitewide for the cookie banner's "Ablehnen" button and the Mitarbeiterbereich's plain list-item buttons, which are deliberately flat. */ .btn-glass { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-color: rgba(255, 255, 255, 0.55); color: var(--color-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 30px rgba(12, 15, 14, 0.16); } .btn-glass:hover { border-color: rgba(255, 255, 255, 0.8); } .btn-white { background: #fff; color: var(--color-ink-soft); } .btn-white:hover { background: #f0f0f0; color: var(--color-ink); } .btn-ghost { background: transparent; color: var(--color-ink); padding: 13px 4px; } .btn-ghost::after { content: '→'; margin-left: 4px; transition: transform 0.15s ease; } .btn-ghost:hover::after { transform: translateX(4px); } /* Back-navigation variant — .btn-ghost's trailing "→" reads backwards for a "go back" action (used site-wide only for forward CTAs like "Jetzt starten"), so this is its own small class: leading "←" instead, same hover-shift idea but in the correct direction. */ .btn-back { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--color-ink-soft); font-family: inherit; font-size: 14px; font-weight: 500; padding: 8px 0; cursor: pointer; transition: color 0.15s ease; } .btn-back::before { content: '←'; transition: transform 0.15s ease; } .btn-back:hover { color: var(--color-ink); } .btn-back:hover::before { transform: translateX(-4px); } /* ---------- Hero ---------- */ .hero { --hero-heading-size: clamp(32px, 7vw, 64px); position: relative; padding: 140px 0 96px; overflow: hidden; } /* Full-viewport hero treatment — homepage only. Other pages reuse .hero for its type scale/background but keep their normal content-driven height. */ .hero.hero-full { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; } .hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(to right, rgba(20, 24, 26, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(20, 24, 26, 0.06) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); } .hero-bg { position: absolute; inset: 0; z-index: -1; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.14; } .hero-content { position: relative; z-index: 1; width: 100%; max-width: min(1200px, 94vw); margin: 0 auto; text-align: center; } .hero h1 { font-size: var(--hero-heading-size); line-height: 1.08; margin: 18px 0 0; } .hero .sub { font-size: clamp(17px, 2vw, 20px); color: var(--color-ink-soft); margin-bottom: 34px; } /* Modifier for the homepage hero specifically, where the sub-line is a second, equally-sized headline rather than a normal intro paragraph. */ .hero .sub.hero-sub-heading { font-size: var(--hero-heading-size); line-height: 1.08; font-weight: 600; margin-top: 8px; } /* One line each on desktop/laptop; free to wrap below that if space runs out. */ @media (min-width: 900px) { .hero h1 { white-space: nowrap; } } /* Mitarbeiterbereich login/force-change views deliberately narrow their .hero-content to max-width:460px for the card layout (see mitarbeiterbereich.html) — much narrower than the default hero container (min(1200px, 94vw)) the nowrap rule above was written for. At that width "Willkommen zurück."/"Neues Passwort festlegen." don't fit on one line at the hero heading's desktop font size, so nowrap pushed the text past the box's right edge while the box itself stayed centered — every getBoundingClientRect() check on the box looked perfectly centered while the actual rendered text visibly wasn't (see chat: confirmed via Range().getBoundingClientRect() over the text node, not the element box). ID selector here outranks .hero h1's class specificity regardless of source order, so this doesn't need !important. #employee-home-panel isn't included — its own h1 ("Ihr Bereich.") is short enough to fit its wider 720px container fine. */ #employee-login-view h1, #employee-force-change-view h1 { white-space: normal; } /* Reusable version of the same "one line on desktop, free to wrap below that" rule for headline fragments outside the hero (e.g. a inside an

) — see partner-programm.html's backoffice-band heading. */ @media (min-width: 900px) { .nowrap-desktop { white-space: nowrap; } } .hero-ctas { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; } /* ---------- Logo strip ---------- */ .logo-strip { background: var(--color-bg-alt); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); padding: 40px 0; overflow: hidden; } .logo-strip .strip-label { text-align: center; font-size: 13px; color: var(--color-ink-soft); margin-bottom: 26px; letter-spacing: 0.02em; } .marquee-mask { max-width: 60%; margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); } @media (max-width: 700px) { .marquee-mask { max-width: 88%; } } .marquee { display: flex; align-items: center; gap: 64px; width: max-content; animation: scroll-left 84s linear infinite; } .marquee img { height: 30px; width: auto; object-fit: contain; } @keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee { animation: none; overflow-x: auto; } } /* ---------- Section ---------- */ .section { padding: 96px 0; } .section-head { text-align: center; max-width: 620px; margin: 0 auto 56px; } .section-head h2 { font-size: clamp(30px, 4vw, 42px); margin-top: 10px; } .section-head.head-xl { max-width: 720px; } .section-head.head-xl h2 { font-size: clamp(32px, 7vw, 64px); line-height: 1.08; } .section-alt { background: var(--color-bg-alt); } .section-dark { background: var(--color-black); color: #fff; } .section-dark .text-soft { color: rgba(255,255,255,0.62); } .section-accent { background: var(--color-accent); color: #fff; } .section-accent .text-soft { color: rgba(255,255,255,0.72); } /* ---------- Step cards (Ablauf / Drei Schritte) ---------- */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } /* Partnerprogramm reward tiers — same .step-card visual language, just a 4-column grid (.steps-grid is hardcoded to 3) with a bigger tier label, since these cards need to read as prominent "level" markers. */ .partner-tiers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .partner-tiers-grid h3 { font-size: 26px; margin: 14px 0 10px; } @media (max-width: 900px) { .partner-tiers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .partner-tiers-grid { grid-template-columns: 1fr; } } /* Per-tier hover shadow: bronze/silver/gold/diamond, standing in for the reward level. Overrides only box-shadow — everything else stays the shared .step-card:hover behavior. */ .partner-tiers-grid .tier-bronze:hover { box-shadow: 0 24px 48px rgba(159, 92, 42, 0.35); } .partner-tiers-grid .tier-silver:hover { box-shadow: 0 24px 48px rgba(154, 162, 168, 0.4); } .partner-tiers-grid .tier-gold:hover { box-shadow: 0 24px 48px rgba(212, 160, 23, 0.4); } .partner-tiers-grid .tier-diamond:hover { box-shadow: 0 24px 48px rgba(158, 214, 255, 0.5); } .step-card { background: var(--color-bg-alt); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 34px 30px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .step-card:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 24px 48px rgba(12, 15, 14, 0.1); } .section-dark .step-card, .section-accent .step-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); } .section-dark .step-card:hover, .section-accent .step-card:hover { border-color: rgba(255,255,255,0.28); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); } @media (prefers-reduced-motion: reduce) { .step-card, .step-card:hover { transform: none; transition: box-shadow 0.35s ease, border-color 0.35s ease; } } .step-num { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--color-accent); margin-bottom: 18px; } .section-dark .step-num, .section-accent .step-num { color: #fff; opacity: 0.85; } .step-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--color-accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .section-dark .step-icon, .section-accent .step-icon { background: rgba(255,255,255,0.12); } .step-card h3 { font-size: 19px; margin-bottom: 10px; } /* ---------- Two-card offers ---------- */ .offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .offer-card { background: var(--color-bg-alt); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 40px; display: flex; flex-direction: column; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .offer-card:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 24px 48px rgba(12, 15, 14, 0.1); } @media (prefers-reduced-motion: reduce) { .offer-card, .offer-card:hover { transform: none; transition: box-shadow 0.35s ease, border-color 0.35s ease; } } .offer-card h3 { font-size: 24px; margin-bottom: 14px; } .offer-card p { margin: 0 0 26px; color: var(--color-ink-soft); } .offer-card .btn-ghost { margin-top: auto; } .section-dark .offer-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); } .section-dark .offer-card:hover { border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); } .section-dark .offer-card h3, .section-dark .offer-card .btn-ghost { color: #fff; } .section-dark .offer-card p { color: rgba(255, 255, 255, 0.66); } /* ---------- CTA band ---------- */ .cta-band { text-align: center; padding: 128px 0 0; } .cta-band-inner { max-width: 800px; } .cta-band h2 { font-size: clamp(32px, 7vw, 64px); line-height: 1.08; max-width: 720px; margin: 0 auto 24px; } .cta-band p { max-width: 520px; margin: 0 auto 36px; } @media (max-width: 640px) { .cta-band { padding-top: 88px; } } /* ---------- Ablauf (process) ---------- */ .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; } .process-card { text-align: left; } .process-icon { width: 100%; height: 260px; border-radius: var(--radius-md); background: var(--color-bg-alt); border: 1px solid var(--color-line); margin-bottom: 22px; padding: 28px; display: flex; align-items: center; justify-content: center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .process-icon img { max-height: 100%; width: auto; object-fit: contain; } .process-card:hover .process-icon { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(12, 15, 14, 0.1); border-color: var(--color-line); } @media (prefers-reduced-motion: reduce) { .process-icon, .process-card:hover .process-icon { transform: none; transition: box-shadow 0.35s ease; } } /* ---------- FAQ ---------- */ .faq-layout { display: grid; grid-template-columns: 280px 1fr; gap: 96px; align-items: start; } .faq-side p { margin-top: 14px; } .faq-side p a { color: var(--color-accent); font-weight: 600; } /* Written back when .faq-side only ever held the one solid-background .btn-primary — needed white text there. Scoped to .btn-primary specifically now that .btn-outline ("Frage stellen") lives here too: that one has a transparent background (see .btn-outline), so the old blanket ".btn" selector forced white-on-transparent — invisible text over this section's light background (see chat). */ .faq-side .btn-primary { color: #fff; } .faq-item { border-bottom: 1px solid var(--color-line); } .faq-q { width: 100%; background: none; border: none; display: flex; align-items: center; justify-content: space-between; padding: 22px 0; font-size: 17px; font-weight: 500; text-align: left; } .faq-q .icon { font-size: 20px; color: var(--color-accent); transition: transform 0.2s ease; flex: none; margin-left: 20px; } .faq-item[open] .faq-q .icon { transform: rotate(45deg); } .faq-a { padding: 0 0 22px; color: var(--color-ink-soft); max-width: 640px; overflow: hidden; transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Final CTA ---------- */ .final-cta { text-align: center; padding: 100px 0; } .google-reviews-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 100px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; text-decoration: none; font-size: 14px; margin-bottom: 28px; transition: background 0.2s ease, border-color 0.2s ease; } .google-reviews-badge:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); } .google-reviews-badge .google-reviews-stars { display: inline-flex; gap: 1px; color: #FBBC04; } .google-reviews-badge .google-reviews-stars svg { width: 15px; height: 15px; } .google-reviews-badge .google-reviews-count { color: rgba(255, 255, 255, 0.75); } /* ---------- Footer ---------- */ .site-footer { background: var(--color-bg-alt); color: var(--color-ink-soft); padding: 64px 0 32px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--color-line); } .footer-grid h3 { color: var(--color-ink); font-size: 14px; margin: 0 0 16px; letter-spacing: 0.02em; } .footer-grid .logo { margin-bottom: 12px; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: 10px; font-size: 14px; } .footer-grid li a:hover { color: var(--color-ink); } .footer-kununu-caption { font-size: 13px; color: var(--color-ink-soft); margin: 14px 0 0; } .site-footer.footer-dark .footer-kununu-caption { color: rgba(255, 255, 255, 0.66); } /* Sits in the Social-Media column, below its 3 links — that column is shorter than column 1 (logo/description/Kununu), leaving empty space at the same height as the Kununu row; this fills it rather than adding a 5th grid column. */ /* margin-top tuned so the button starts a little below the social-icons/ Kununu row in column 1 — not exactly level with it, but in the same vertical band, rather than up near the Social-Media column's own links. */ .footer-employee-link { margin-top: 140px; } /* On the dark homepage footer, a green button reads too close to the dark background's own accent usage elsewhere on the page — swap to the same white/light treatment as .btn-white for contrast, light footer pages keep the default green .btn-primary look untouched. */ .site-footer.footer-dark .footer-employee-link .btn-primary { background: #fff; color: var(--color-ink-soft); } .site-footer.footer-dark .footer-employee-link .btn-primary:hover { background: #f0f0f0; color: var(--color-ink); } .footer-social-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; } .footer-social-icons { display: flex; gap: 10px; } .footer-social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(12, 15, 14, 0.06); color: var(--color-ink); transition: background 0.2s ease, color 0.2s ease; } .footer-social-icons a:hover { background: var(--color-accent); color: #fff; } .footer-social-icons svg { width: 16px; height: 16px; } /* kununu widget: same row as the social icons, pushed to the right end via margin-left:auto on the wrapping .footer-kununu. The swap between the wide "logo" badge (desktop) and the compact "icon" badge (mobile/ tablet) happens via , not a CSS display toggle — that's the only way to stop the browser from also fetching the non-matching variant (a plain hidden still gets downloaded either way). The single covers both variants; the click-through always carries the desktop widget's utm_content tag, since an anchor's href can't itself respond to a media query. */ .footer-kununu { margin-left: auto; } .footer-kununu-widget { display: block; height: 36px; width: auto; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; font-size: 13px; flex-wrap: wrap; gap: 12px; } .footer-bottom .legal-links { display: flex; gap: 22px; } .footer-bottom a:hover { color: var(--color-ink); } /* Homepage keeps the dark footer */ .site-footer.footer-dark { background: var(--color-black); color: rgba(255,255,255,0.72); } .site-footer.footer-dark .footer-grid { border-bottom-color: rgba(255,255,255,0.12); } .site-footer.footer-dark .footer-grid h3 { color: #fff; } .site-footer.footer-dark .footer-grid li a:hover, .site-footer.footer-dark .footer-bottom a:hover { color: #fff; } .site-footer.footer-dark .footer-social-icons a { background: rgba(255, 255, 255, 0.1); color: #fff; } .site-footer.footer-dark .footer-social-icons a:hover { background: rgba(255, 255, 255, 0.22); } /* ---------- Profile popup (Eck-Icon) ---------- */ .profile-bubble { position: fixed; right: 26px; bottom: 26px; z-index: 60; } .profile-bubble-btn { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--color-line); padding: 0; overflow: visible; box-shadow: 0 8px 24px rgba(0,0,0,0.18); position: relative; background: var(--color-bg-alt); transition: transform 0.15s ease; } .profile-bubble-btn:hover { transform: scale(1.05); } /* Hide the round trigger icon while the card is open — the card itself sits exactly in the corner then, instead of stacking on top of the icon. */ .profile-card.open ~ .profile-bubble-btn { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .profile-bubble-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .profile-bubble-btn .dot { position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; border-radius: 50%; background: #22c55e; border: 2px solid var(--color-bg); } .profile-card { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 400px; max-height: min(560px, 80vh); overflow-y: auto; background: #fff; border-radius: var(--radius-md); box-shadow: 0 20px 50px rgba(0,0,0,0.18); padding: 20px; display: none; } .profile-card.open { display: block; } @media (min-width: 640px) { .profile-card { left: auto; right: 26px; bottom: 26px; width: 384px; margin: 0; } } /* ---------- Karriere page: auto-appearing chat nudge ---------- */ .chat-toast { position: fixed; right: 16px; bottom: 16px; z-index: 90; width: min(320px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18); padding: 14px; animation: chat-toast-in 0.35s ease; } .chat-toast[hidden] { display: none; } @keyframes chat-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .chat-toast-close { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border: none; background: var(--color-bg-alt); border-radius: 50%; color: var(--color-ink-soft); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; } .chat-toast-body { display: flex; gap: 10px; align-items: flex-start; padding-right: 16px; } .chat-toast-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; } .chat-toast-name { font-weight: 600; font-size: 13px; color: var(--color-accent); } .chat-toast-message { font-size: 14px; color: var(--color-ink); margin: 3px 0 0; line-height: 1.4; } .chat-toast-time { font-weight: 400; font-size: 12px; color: var(--color-ink-soft); } .chat-toast.is-dismissing { transition: opacity 0.2s ease, transform 0.2s ease; } /* Mobile: iOS-style push-notification banner sliding down from the top, instead of the desktop bubble sliding up from the corner. */ @media (max-width: 600px) { .chat-toast { top: calc(env(safe-area-inset-top, 0px) + 44px); right: 12px; left: 12px; bottom: auto; width: auto; border-radius: 18px; padding: 12px 14px; animation: chat-toast-in-mobile 0.45s cubic-bezier(0.32, 1.1, 0.5, 1); touch-action: pan-x; } .chat-toast.is-dismissing { transform: translateY(-130%); opacity: 0; } .chat-toast-avatar { width: 36px; height: 36px; } .chat-toast-message { margin: 2px 0 4px; } } @keyframes chat-toast-in-mobile { from { opacity: 0; transform: translateY(-130%); } to { opacity: 1; transform: translateY(0); } } /* ---------- Job card ---------- */ #jobs-list { display: flex; flex-direction: column; gap: 22px; } .job-card { background: var(--color-bg-alt); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .job-card:hover { transform: translateY(-4px) scale(1.008); box-shadow: 0 24px 48px rgba(12, 15, 14, 0.1); } @media (prefers-reduced-motion: reduce) { .job-card, .job-card:hover { transform: none; transition: box-shadow 0.35s ease; } } .job-card .job-meta { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-accent); margin-bottom: 8px; } .job-card h3 { font-size: 22px; margin-bottom: 8px; } .job-card p { margin: 0; color: var(--color-ink-soft); max-width: 480px; } /* ---------- Accordion (Was wir machen) ---------- */ .info-accordion { max-width: 720px; margin: 40px auto 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-bg-alt); overflow: hidden; } .info-accordion summary { padding: 18px 22px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; } .info-accordion summary::-webkit-details-marker { display: none; } .info-accordion summary::after { content: '+'; color: var(--color-accent); font-size: 20px; } .info-accordion[open] summary::after { content: '–'; } .info-accordion .content { padding: 0 22px 22px; color: var(--color-ink-soft); overflow: hidden; transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Team ---------- */ /* Admin-managed via /admin's "Team"-Panel — see script.js's initTeamGrid(). Same photo-with-caption visual language the old single founder-card used, just repeated per member in a grid instead of one centered card. Flexbox with justify-content:center instead of CSS Grid on purpose: Grid's repeat(3,1fr) always keeps 3 fixed column tracks, so a partial last row (1-2 people) sits left-aligned with empty cells on the right. Flex-wrap packs items instead, so justify-content:center centers a partial row — 1 person centered alone, 2 centered together, and a full row of 3 fills edge-to-edge exactly as before. flex-grow:0 keeps every card the same width regardless of how many share a row (no JS layout logic needed either way — this is pure CSS for any member count). */ .team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; } .team-card { flex: 0 0 calc((100% - 64px) / 3); /* 3 per row, 2 × 32px gaps */ } .team-card-photo-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-alt); } .team-card-photo { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; } /* Name/role burned into the photo as a caption, bottom-left, on a dark gradient so white text stays legible regardless of what's in the shot. */ .team-card-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; background: linear-gradient(to top, rgba(12, 15, 14, 0.75), rgba(12, 15, 14, 0) 65%); color: #fff; } .team-card-name { font-weight: 600; font-size: 16px; } .team-card-role { font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-top: 2px; } @media (max-width: 860px) { .team-grid { max-width: 360px; margin: 0 auto; } .team-card { flex-basis: 100%; } } /* Compact dark CTA card (Team page) — same dark/rounded language as .offer-card's dark-section variant, but a standalone centered card on the page's normal light background instead of a full-bleed black section. */ .career-banner-card { max-width: 1120px; margin: 0 auto; background: var(--color-black); color: #fff; border-radius: var(--radius-lg); padding: 80px 64px; text-align: center; } .career-banner-card .text-soft { color: rgba(255, 255, 255, 0.66); } .backoffice-band { padding: 96px 0; } /* ---------- Forms ---------- */ .form-card { background: var(--color-bg-alt); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 40px; max-width: 560px; margin: 0 auto; } .form-row { margin-bottom: 18px; } .form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .form-row input, .form-row textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); font-family: inherit; font-size: 15px; background: var(--color-bg); } .form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--color-accent); } .form-row input.touched:invalid { border-color: #c0392b; } .form-note { font-size: 13px; color: var(--color-ink-soft); margin-top: 14px; } .form-status { font-size: 14px; margin-top: 14px; display: none; } .form-status.success { display: block; color: #1a7f37; } .form-status.error { display: block; color: #c0392b; } /* Privacy-consent checkbox, shared by every form that collects personal data (Bewerbung, Erstgespräch, Partnerprogramm-Empfehlung). Never pre-checked — the checkbox's own default unchecked state already guarantees that; nothing here sets it otherwise. */ .consent-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); } .consent-check input[type="checkbox"] { width: 17px; height: 17px; margin-top: 1px; flex: none; accent-color: var(--color-accent); } .consent-check a { color: var(--color-ink); text-decoration: underline; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Erstgespräch wizard modal ---------- */ .wizard-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(12, 15, 14, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; } .wizard-overlay[hidden] { display: none; } .wizard-card { position: relative; background: #fff; border-radius: var(--radius-lg); padding: 48px; max-width: 560px; width: 100%; margin: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.25); } .wizard-close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--color-ink-soft); } .wizard-close:hover { color: var(--color-ink); } .wizard-progress { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 10px; padding-right: 32px; } .wizard-progress-track { height: 3px; background: var(--color-line); border-radius: 100px; margin-bottom: 28px; overflow: hidden; } .wizard-progress-fill { height: 100%; background: var(--color-ink); transition: width 0.3s ease; } .wizard-question { font-size: 27px; line-height: 1.25; margin-bottom: 12px; } .wizard-hint { color: var(--color-ink-soft); margin: 0 0 26px; } .wizard-input { width: 100%; padding: 15px 18px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); font-family: inherit; font-size: 15px; margin-bottom: 16px; background: var(--color-bg); } .wizard-input:focus { outline: none; border-color: var(--color-ink); } .wizard-input.touched:invalid { border-color: #c0392b; } .wizard-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; } .wizard-option { text-align: left; padding: 15px 18px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: #fff; font-size: 15px; font-family: inherit; transition: border-color 0.15s ease, background 0.15s ease; } .wizard-option:hover { border-color: var(--color-ink); } .wizard-option.selected { border-color: var(--color-ink); background: var(--color-bg-alt); } .wizard-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; } .wizard-back { background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--color-ink-soft); } .wizard-back:hover { color: var(--color-ink); } .wizard-next { background: var(--color-accent); color: #fff; border: none; border-radius: 100px; padding: 13px 24px; font-family: inherit; font-size: 15px; font-weight: 600; } .wizard-next:disabled { background: var(--color-line); color: var(--color-ink-soft); cursor: not-allowed; } .wizard-next:not(:disabled):hover { background: #17301F; } /* ---------- Partnerprogramm: "Empfehlung abgeben" modal (glass) ---------- */ .referral-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(12, 15, 14, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; } .referral-overlay[hidden] { display: none; } .referral-card { position: relative; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-lg); padding: 44px; max-width: 540px; width: 100%; margin: auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 30px 80px rgba(12, 15, 14, 0.28); } /* Same glass recipe as .referral-card, extracted as a general-purpose class — first reused for the Mitarbeiterbereich (login card sitting on the hero's dot-grid background), not modal-specific like .referral-card (no max-width/margin:auto positioning baked in). */ .glass-card { position: relative; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-lg); padding: 40px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 30px 80px rgba(12, 15, 14, 0.28); } .form-error { color: #c0392b; font-size: 13px; margin: 10px 0 0; } .form-success { color: var(--color-accent); font-size: 13px; margin: 10px 0 0; } /* ---------- 404 / 500 error pages ---------- */ .error-page { padding: 100px 0 120px; } .error-page-code { font-family: var(--font-display); font-size: clamp(72px, 14vw, 140px); font-weight: 700; line-height: 1; color: var(--color-line); letter-spacing: -0.03em; } /* ---------- Cookie banner ---------- */ /* Plain, non-blocking banner — NOT a modal. No overlay/backdrop, no scroll-lock, nothing intercepts clicks on the rest of the page; the site stays fully usable while this is visible. Centered horizontally via left:50%+transform (robust regardless of width/margin edge cases) rather than left/right+margin:auto. */ .cookie-banner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: calc(100% - 40px); max-width: 640px; z-index: 500; padding: 26px 28px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; } .cookie-banner[hidden] { display: block; visibility: hidden; pointer-events: none; opacity: 0; transform: translateX(-50%) translateY(16px); } .cookie-banner-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--color-ink-soft); } .cookie-banner-close:hover { color: var(--color-ink); } .cookie-banner-text { font-size: 14px; line-height: 1.6; color: var(--color-ink-soft); margin: 0 0 18px; padding-right: 30px; } .cookie-banner-text a { color: var(--color-ink); text-decoration: underline; } .cookie-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; } .cookie-banner-actions .btn { flex: 1; } @media (max-width: 480px) { .cookie-banner { padding: 22px 20px; width: calc(100% - 24px); bottom: 12px; } } /* ---------- Mitarbeiterbereich (employee area) ---------- */ .progress-bar { height: 6px; border-radius: 3px; background: var(--color-line); overflow: hidden; margin-bottom: 32px; } .progress-bar-fill { height: 100%; background: var(--color-accent); border-radius: 3px; transition: width 0.3s ease; } .lesson-row, .guide-row { background: var(--color-bg-alt); border: 1px solid var(--color-line); border-radius: var(--radius-md); margin-bottom: 14px; overflow: hidden; } .lesson-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; cursor: pointer; } .lesson-row-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 12px; } .lesson-row-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-line); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 12px; } .lesson-row.is-completed .lesson-row-check { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .lesson-row-body { padding: 0 22px 22px; display: none; } .lesson-row.is-open .lesson-row-body { display: block; } .lesson-row-embed { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 16px; background: #000; border-radius: var(--radius-sm); overflow: hidden; } .lesson-row-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .guide-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; } .guide-row-title { font-size: 15px; font-weight: 600; } .referral-close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--color-ink-soft); } .referral-close:hover { color: var(--color-ink); } .referral-card h3 { font-size: 24px; margin: 0 0 8px; padding-right: 28px; } .referral-card .referral-intro { margin: 0 0 24px; } .referral-card .form-row input { background: rgba(255, 255, 255, 0.6); border-color: rgba(31, 61, 43, 0.18); } .referral-card .form-row input:focus { border-color: var(--color-accent); } .referral-consent { font-size: 12.5px; line-height: 1.55; color: var(--color-ink-soft); margin: 4px 0 22px; } .referral-submit { width: 100%; justify-content: center; } /* Own success view, not just a button-label change — replaces #referral-form-wrap entirely while shown (see initPartnerReferralForm in script.js), modal chrome/close button stay untouched. */ .referral-success { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px 8px; } .referral-success[hidden] { display: none; } .referral-success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .referral-success-icon svg { width: 30px; height: 30px; } .referral-success-text { font-size: 21px; line-height: 1.4; font-weight: 600; color: var(--color-ink); max-width: 320px; } @media (max-width: 560px) { .referral-card { padding: 30px 24px; } } /* Same modal recipe as .referral-overlay/.referral-card (FAQ "Frage stellen" button on the homepage — see index.html), own class names rather than reusing referral-* since this has nothing to do with the Partnerprogramm, matching this file's own convention of one dedicated set of classes per modal (wizard-*, referral-*, cookie-banner-*). */ .question-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(12, 15, 14, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; } .question-overlay[hidden] { display: none; } .question-card { position: relative; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-lg); padding: 44px; max-width: 480px; width: 100%; margin: auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 30px 80px rgba(12, 15, 14, 0.28); } .question-close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--color-ink-soft); } .question-close:hover { color: var(--color-ink); } .question-card h3 { font-size: 24px; margin: 0 0 8px; padding-right: 28px; } .question-card .question-intro { margin: 0 0 24px; } .question-card .form-row input, .question-card .form-row textarea { background: rgba(255, 255, 255, 0.6); border-color: rgba(31, 61, 43, 0.18); } .question-card .form-row input:focus, .question-card .form-row textarea:focus { border-color: var(--color-accent); } .question-submit { width: 100%; justify-content: center; } /* Own success view, not just a button-label change — replaces #question-form-wrap entirely while shown (see initQuestionForm in script.js), modal chrome/close button stay untouched. */ .question-success { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px 8px; } .question-success[hidden] { display: none; } .question-success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .question-success-icon svg { width: 30px; height: 30px; } .question-success-text { font-size: 21px; line-height: 1.4; font-weight: 600; color: var(--color-ink); max-width: 320px; } @media (max-width: 560px) { .question-card { padding: 30px 24px; } } /* ---------- Booking panel (shared: wizard finale + profile bubble) ---------- */ .booking-panel { text-align: left; } .booking-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .booking-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .booking-name { font-weight: 600; font-size: 15px; } .booking-role { font-size: 13px; color: var(--color-ink-soft); } .booking-panel h3 { font-size: 24px; margin-bottom: 10px; } .booking-panel .text-soft { margin: 0 0 20px; font-size: 15px; line-height: 1.6; } .booking-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-line); border-radius: 100px; padding: 8px 16px; font-size: 13px; color: var(--color-ink-soft); margin-bottom: 28px; } .booking-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #35C46B; flex: none; } /* ---------- Custom day/time booking widget ---------- */ .booking-contact-fields { margin-bottom: 8px; } .day-picker { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 20px; background: var(--color-bg-alt); margin-bottom: 20px; } .day-picker-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-weight: 600; font-size: 15px; } .day-nav-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-line); background: #fff; font-size: 15px; color: var(--color-ink); } .day-nav-btn:hover { border-color: var(--color-ink); } .day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .day-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: var(--radius-sm); border: 1px solid var(--color-line); background: #fff; font-family: inherit; } .day-btn-label { font-size: 11px; color: var(--color-ink-soft); letter-spacing: 0.04em; } .day-btn-num { font-size: 15px; font-weight: 600; } .day-btn:hover:not(:disabled) { border-color: var(--color-ink); } .day-btn.selected { background: var(--color-accent); border-color: var(--color-accent); } .day-btn.selected .day-btn-label, .day-btn.selected .day-btn-num { color: #fff; } .day-btn:disabled { opacity: 0.35; cursor: not-allowed; } .time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 8px; } @media (max-width: 480px) { .time-grid { grid-template-columns: repeat(3, 1fr); } } .time-btn { padding: 12px 8px; border-radius: var(--radius-sm); border: 1px solid var(--color-line); background: #fff; font-family: inherit; font-size: 14px; font-weight: 600; } .time-btn:hover { border-color: var(--color-ink); } .time-btn.selected { background: var(--color-ink); border-color: var(--color-ink); color: #fff; } .booking-hint { color: var(--color-ink-soft); font-size: 14px; text-align: center; padding: 20px 0; } .booking-hint-error { color: #c0392b; } .booking-success { text-align: center; padding: 20px 0 4px; } .booking-success-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 16px; } .booking-success h3 { margin-bottom: 8px; } @media (max-width: 600px) { .wizard-card { padding: 28px 22px; } .wizard-question { font-size: 22px; } .day-grid { gap: 4px; } .day-btn { padding: 8px 2px; } } /* ---------- Job detail page ---------- */ .job-detail-grid { display: grid; grid-template-columns: 1fr; gap: 48px; } @media (min-width: 900px) { .job-detail-grid { grid-template-columns: 1fr 320px; gap: 64px; } } .job-detail-breadcrumb { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-soft); } .job-detail-breadcrumb:hover { color: var(--color-ink); } .job-detail-sections { margin-top: 56px; } .job-detail-section + .job-detail-section { margin-top: 56px; } .job-detail-section h2 { font-size: 24px; } .job-detail-section p, .job-detail-section ul { margin-top: 16px; font-size: 15px; line-height: 1.7; color: var(--color-ink-soft); } .job-detail-section ul { list-style: none; padding: 0; } .job-detail-section li + li { margin-top: 12px; } .job-detail-sidebar { display: flex; flex-direction: column; gap: 20px; margin-top: 56px; } @media (min-width: 900px) { .job-detail-sidebar { margin-top: 0; position: sticky; top: 110px; align-self: start; } } .sidebar-card { background: var(--color-bg-alt); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 24px; } .sidebar-card .eyebrow { font-size: 12px; } .sidebar-card p { margin: 14px 0 20px; font-size: 14px; color: var(--color-ink-soft); line-height: 1.6; } .sidebar-card .btn { width: 100%; } .sidebar-card .wizard-input { width: 100%; } .share-icons { display: flex; gap: 10px; } .share-icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--color-line); background: var(--color-bg); display: flex; align-items: center; justify-content: center; color: var(--color-ink); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, border-color 0.2s ease; } .share-icon-btn:hover { transform: translateY(-2px); background: var(--color-bg-alt); border-color: var(--color-ink-soft); } .share-icon-btn svg { width: 18px; height: 18px; } .share-hint { margin: 10px 0 0 !important; font-size: 13px !important; color: var(--color-accent) !important; } /* Mobile/tablet-only floating "Jetzt bewerben" pill — scrolls to the real apply area (.job-detail-sidebar) instead of navigating away, and hides itself once that area is actually on screen (see initApplyStickyBar in script.js) so it never sits on top of the real buttons down there. */ .apply-bar { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 40; display: flex; justify-content: center; padding: 0 var(--gutter); pointer-events: none; opacity: 1; transition: opacity 0.25s ease, transform 0.25s ease; } .apply-bar.is-hidden { opacity: 0; transform: translateY(12px); } .apply-bar-btn { pointer-events: auto; } @media (min-width: 900px) { .apply-bar { display: none; } } @media (prefers-reduced-motion: reduce) { .apply-bar { transition: opacity 0.25s ease; } .apply-bar.is-hidden { transform: none; } } /* ---------- Legal pages ---------- */ .legal-content { max-width: 760px; margin: 0 auto; } .legal-content h2 { font-size: 22px; margin: 40px 0 12px; } .legal-content h2:first-child { margin-top: 0; } .legal-content h3 { font-size: 17px; margin: 22px 0 8px; } .legal-content p { color: var(--color-ink-soft); margin: 0 0 14px; } .legal-content ul { color: var(--color-ink-soft); margin: 0 0 14px; padding-left: 20px; } .legal-content li { margin-bottom: 4px; } .legal-callout { background: var(--color-accent-soft); border: 1px solid var(--color-accent); border-radius: var(--radius-md); padding: 18px 22px; font-size: 14px; margin-bottom: 40px; } /* ---------- Responsive ---------- */ /* Tablet: slightly tighter rhythm than desktop, still multi-column where it fits */ @media (max-width: 900px) { .section { padding: 76px 0; } .cta-band { padding-top: 100px; } .backoffice-band { padding: 76px 0; } .hero { padding: 56px 0 80px; } } @media (max-width: 860px) { .nav-toggle { display: block; } /* Always in the flow (not display:none) so open/close can transition via opacity + transform instead of popping instantly. */ .main-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: fixed; /* 1px above the navbar's own bottom edge (76px), not flush with it — on some WebKit/Safari renders, two adjacent boxes that both resolve to a 0 border-radius at their shared edge can still show a hairline subpixel gap or mismatch at high device pixel ratios. Overlapping by 1px guarantees the seam is fully covered regardless of that, since neither side has any curvature there to distort. */ top: 75px; left: 0; right: 0; max-height: calc(100vh - 76px); overflow-y: auto; background: var(--color-bg-alt); border: 1px solid var(--color-line); border-top: none; border-radius: 0 0 24px 24px; padding: 8px var(--gutter) 20px; box-shadow: 0 16px 32px rgba(12, 15, 14, 0.12); z-index: 55; opacity: 0; visibility: hidden; pointer-events: none; /* translateY only — NOT scale. Scaling a rounded-corner box on one axis (scaleY) visually distorts border-radius mid-transition even though the property value never changes; a plain slide+fade has no such side effect and only touches compositor-only properties. */ transform: translateY(-8px); will-change: opacity, transform; /* opacity/transform/visibility drive the open/close animation itself; top/left/right/border-radius/gap are unrelated to that and only ever change from the separate is-pill scroll morph (see .site-header.is-pill .main-nav below and its sibling gap rule near the top of the file) — they never move at the same instant as open/close, so giving them their own always-on transition here is safe and doesn't reintroduce the open-vs-pill-morph race that the .wrap's transient .no-transition class exists to avoid. Without this, the outer .wrap already morphed smoothly but the dropdown's own box (and the spacing between its links) still hard-jumped. */ transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s, top 0.45s cubic-bezier(0.22, 1, 0.36, 1), left 0.45s cubic-bezier(0.22, 1, 0.36, 1), right 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1), gap 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .main-nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s, top 0.45s cubic-bezier(0.22, 1, 0.36, 1), left 0.45s cubic-bezier(0.22, 1, 0.36, 1), right 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1), gap 0.45s cubic-bezier(0.22, 1, 0.36, 1); } /* While the menu is open, the bar/pill above sheds its own bottom border radius, border and shadow so the two read as one continuous shape instead of a floating box stacked under a separate pill. This does NOT carry its own transition:none anymore — that used to disable the wrap's transition for the entire time the menu stayed open, which also silently killed the scroll-driven pill morph while the menu was open (bug: hard jump between full bar and pill mid-scroll). Instead, script.js adds a short-lived .no-transition class (see initNav) only for the single frame the menu itself opens/closes, so that moment still snaps instantly (avoiding competition with the dropdown's own open animation) while any LATER change — like scrolling past the pill threshold with the menu still open — uses the normal, smooth .wrap transition below. */ .site-header.nav-open .wrap { background: var(--color-bg-alt); -webkit-backdrop-filter: none; backdrop-filter: none; border-style: solid; border-color: var(--color-line); border-width: 1px 1px 0 1px; border-radius: 24px 24px 0 0; box-shadow: none; } .site-header .wrap.no-transition { transition: none !important; } /* Same transient-snap trick as .wrap, extended to the dropdown itself: .main-nav's own top/left/right/border-radius/gap transition (added so the scroll-driven pill morph animates smoothly while the menu stays open) also — unless disabled for this one frame — applies to the plain open/close toggle, where it has nothing to do with scrolling. Padding/font-size on the links and button (see .main-nav a and .btn) used to snap instantly on open; with those transitions now added, opacity finishes fading in at 0.22s but padding/font-size keep visibly growing for another ~0.23s after that, reading as the menu items still unevenly settling even though the menu already looks open. no-transition forces that initial snap back for open/close, while later is-pill changes (menu already open, no toggle involved) keep the smooth transition. */ /* Must NOT be a blanket transition:none — that would also kill the deliberate 0.22s opacity/transform open/close fade itself (it did, the first time this was written; the menu opened/closed instantly with no fade at all until this was narrowed down to only the newer properties). Re-declares the same opacity/transform/visibility timing that .main-nav / .main-nav.open already use, and simply omits top/left/right/border-radius/gap so only THOSE snap for this frame. */ .main-nav.no-transition { transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s !important; } .main-nav.no-transition a { transition: none !important; } .main-nav.open a { display: flex; align-items: center; gap: 12px; padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--color-line); } .main-nav.open a:last-child { border-bottom: none; } /* Icon container: light neutral gray, not the dark style from the reference — matches the site's existing quiet, off-white palette rather than a high-contrast dark chip. Collapses to nothing when empty (:empty) so an item without an icon yet — currently "Home", waiting on its own icon — just reads as a plain text row instead of showing a blank placeholder box. */ .main-nav.open .nav-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: rgba(20, 24, 26, 0.055); color: var(--color-ink); } .main-nav.open .nav-icon:empty { display: none; } .main-nav.open .nav-icon svg { width: 20px; height: 20px; } .main-nav.open a.btn-primary { justify-content: center; margin-top: 12px; border-bottom: none; } /* The CTA button already has its own strong dark-green background — a light-gray icon chip on top of that would look like a mismatched leftover instead of an intentional accent, so its icon sits directly on the button in the button's own (white) text color instead. */ .main-nav.open a.btn-primary .nav-icon { width: auto; height: auto; border-radius: 0; background: none; color: currentColor; } /* Higher specificity than .site-header.is-pill .main-nav .btn (which shrinks the desktop/collapsed-pill nav's CTA button) — needed because while the mobile dropdown is open, this button was ALSO picking up that is-pill padding/font-size shrink on top of its own position already moving from the container's gap/top. Frame-by-frame measurement showed that combination (4 simultaneously-transitioning properties on one element, 2 of them changing its own height every frame) caused a measurable ~1px top/bottom desync for a single frame around the scroll-triggered pill morph — the plain links, which only ever move via gap/top and never resize themselves, measured essentially zero jitter (0.001px) in the same test. Freezing this button's own size while the dropdown is open removes that source entirely; it's also arguably better UX (a stable, comfortably-sized tap target instead of a CTA that shrinks while someone's mid-tap). */ .site-header.nav-open .main-nav.open a.btn-primary { padding: 14px 0; font-size: 17px; } .site-header.is-pill .wrap { max-width: 260px; height: 56px; padding-left: 18px; padding-right: 10px; } /* Explicit 28px, not 100px: on the closed pill, 100px is clamped down to 28px automatically (bottom-left/right share the same 56px-tall edge as top-left/right, so the radii divide the edge between them). Once open, the bottom corners go to 0 and stop sharing that edge, so the same "100px" value would clamp to the full 56px edge instead — visibly rounder than the dropdown's 28px below it. Matching main-nav's explicit 28px bottom radius here keeps both ends of the seam identical. */ .site-header.is-pill.nav-open .wrap { border-radius: 28px 28px 0 0; } /* The pill is narrow and centered, not full-width — the open menu matches its width/centering exactly so it visually grows straight out of it. Centered via left/right (both resolve to plain lengths) rather than max-width + margin:auto — "none" and "auto" are not values a CSS transition can interpolate from/to, so those two properties used to hard-snap even though they were listed in the transition, while top/border-radius/gap (plain length-to-length) animated correctly right next to them. left/right at calc(50% - 130px) is exactly the same 260px centered box, just expressed in a form that can animate. */ .site-header.is-pill .main-nav { top: 69px; left: calc(50% - 130px); right: calc(50% - 130px); border-radius: 0 0 28px 28px; } @media (prefers-reduced-motion: reduce) { .main-nav { transition: opacity 0.15s ease, visibility 0s linear 0.15s; transform: none; } .main-nav.open { transition: opacity 0.15s ease, visibility 0s linear 0s; transform: none; } } .steps-grid, .offer-grid, .process-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .faq-layout { grid-template-columns: 1fr; } .job-card { flex-direction: column; align-items: flex-start; } } /* Mobile: noticeably tighter than desktop/tablet — own rhythm and card padding */ @media (max-width: 600px) { .section { padding: 52px 0; } .hero { padding: 40px 0 56px; } .cta-band { padding-top: 64px; } .backoffice-band { padding: 52px 0; } .section-head { margin-bottom: 36px; } .process-icon { height: 150px; padding: 14px; } .job-card, .form-card { padding: 24px 20px; } .career-banner-card { padding: 40px 24px; } .day-picker { padding: 14px; } .booking-badge { padding: 6px 12px; } .offer-card, .step-card { padding: 28px 22px; } } /* ============================================================ EXPERIMENT — "Liquid Glass" navbar pill, local preview only. Touches ONLY the material (paint) of .wrap: background/border- color/box-shadow/backdrop-filter, using the exact same properties the existing transition list above already animates (background, border-color, box-shadow) — nothing here changes durations, easing, layout properties, or any of the scroll-morph / menu-open / border-radius logic elsewhere in this file. .site-header.at-top .wrap (fully transparent, before any scroll) is intentionally left untouched. ROLLBACK: delete this block (everything from here to the end of the file), or restore styles.css.backup-before-liquid-glass over this file. Either fully reverts to the pre-experiment state with zero side effects, since nothing above this point was modified. NOT deployed — local test server only. ============================================================ */ .site-header .wrap { background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.4) 65%, rgba(255, 255, 255, 0) 85%); background-repeat: no-repeat; background-size: 260% 100%; background-position: -30% 0; background-color: rgba(250, 250, 250, 0.4); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-color: rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 30px rgba(31, 61, 43, 0.10); animation: liquid-glass-sheen 7s ease-in-out infinite; } .site-header.is-pill .wrap { background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.45) 65%, rgba(255, 255, 255, 0) 85%); background-repeat: no-repeat; background-size: 260% 100%; background-position: -30% 0; background-color: rgba(255, 255, 255, 0.42); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); border-color: rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 34px rgba(31, 61, 43, 0.14); } @keyframes liquid-glass-sheen { 0%, 100% { background-position: -30% 0; } 50% { background-position: 130% 0; } } @media (prefers-reduced-motion: reduce) { .site-header .wrap { animation: none; } } /* ============================================================ EXPERIMENT STEP 2 — "Liquid Glass" on filled CTA buttons (.btn-primary: "Kostenloses Erstgespräch" etc.), local preview only. Same approach as the navbar pill above: only background/border-color/box-shadow/backdrop-filter change, using the exact properties .btn's own transition list already covers (background, border-color, box-shadow) — durations, easing, layout, and hover/active behavior are untouched. Explicitly excluded per instruction: the mobile dropdown's own "Erstgespräch" row keeps its solid, opaque look (see the override at the end of this block) — the dropdown itself stays exactly as the first experiment left it. ROLLBACK: delete this block, or restore styles.css.backup-before-glass-buttons over this file. ============================================================ */ .btn-primary { background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.2) 65%, rgba(255, 255, 255, 0) 85%); background-repeat: no-repeat; background-size: 260% 100%; background-position: -30% 0; background-color: rgba(31, 61, 43, 0.72); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-color: rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 22px rgba(31, 61, 43, 0.25); animation: liquid-glass-sheen 7s ease-in-out infinite; } .btn-primary:hover { background-color: rgba(23, 48, 31, 0.78); } /* Keeps the mobile dropdown's CTA row exactly as the first experiment established it (solid, opaque, no glass) — the instruction was explicit that the dropdown itself stays untouched this round. */ .site-header.nav-open .main-nav.open a.btn-primary { background-image: none; background-color: var(--color-accent); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: none; animation: none; } .site-header.nav-open .main-nav.open a.btn-primary:hover { background-color: #17301F; } @media (prefers-reduced-motion: reduce) { .btn-primary { animation: none; } } /* ============================================================ EXPERIMENT FIXES — mobile dropdown glass + gap. Bug fixed: .site-header.nav-open .wrap and .site-header.is-pill .wrap are both 2-class selectors (equal specificity); since the is-pill glass block above comes later in the file, it was silently winning over nav-open's "stay solid, no shadow" rule whenever BOTH were active (scrolled + menu open) — the box- shadow that leaked through visually read as a gap between the pill and the dropdown, even though the 1px overlap underneath was untouched and still correct. Re-asserting nav-open's rule here, after the is-pill block, restores it as the winner for that combination via source order. Also gives the dropdown itself a toned-down glass treatment per request: higher opacity and lighter blur than the navbar pill, and no moving sheen — a shimmering animation across a whole content panel (icons + text, not a slim bar) would work against legibility rather than for it. ROLLBACK: delete this block, or restore styles.css.backup-before-glass-buttons over this file (that backup predates both this fix and the buttons experiment, so restoring it removes all three). ============================================================ */ .site-header.nav-open .wrap { background-image: none; background-color: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-color: rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); animation: none; } @media (max-width: 860px) { .main-nav { background-color: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-color: rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 32px rgba(31, 61, 43, 0.14); } } /* ============================================================ EXPERIMENT STEP 3 — "Liquid Glass" on the booking widget's buttons (day/time picker inside the Erstgespräch popup), local preview only. Scoped to the buttons themselves — the day-picker card and profile panel backgrounds are untouched (a separate step if wanted). No moving sheen here: a dense grid of small controls reads better calm than shimmering. Only background/border-color/box-shadow/backdrop-filter change; none of these four button classes had backdrop-filter before, and box-shadow/border-color were already covered by no explicit transition list on any of them (they don't animate today), so nothing about their existing behavior changes besides the paint. ROLLBACK: delete this block, or restore styles.css.backup-before-glass-buttons over this file (removes this plus the earlier two glass steps). ============================================================ */ .day-nav-btn { background-color: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); border-color: rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 8px rgba(31, 61, 43, 0.08); } .day-btn { background-color: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); border-color: rgba(255, 255, 255, 0.5); } .day-btn.selected { background-color: rgba(31, 61, 43, 0.72); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-color: rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px rgba(31, 61, 43, 0.2); } .time-btn { background-color: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); border-color: rgba(255, 255, 255, 0.5); } .time-btn.selected { background-color: rgba(20, 24, 26, 0.75); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); border-color: rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px rgba(20, 24, 26, 0.2); } /* ============================================================ EXPERIMENT FIX — real root cause of the pill/dropdown gap. backdrop-filter (added to .wrap by the glass experiment) makes .wrap a containing block for ITS OWN position:fixed descendants — regardless of .wrap's own position value. .main-nav is a direct DOM child of .wrap and is position:fixed on mobile (even while closed, so open/close can transition via opacity/ transform), so its top:69px/75px started being measured from .wrap's box instead of the viewport the moment .wrap gained backdrop-filter — off by exactly .wrap's own margin-top/border offset (~14-15px in the is-pill state, which is why it was obvious against a dark section but easy to miss elsewhere). Confirmed by forcing .main-nav's top to an arbitrary value and watching the rendered position shift by the exact same constant offset regardless of the value — a containing-block problem, not a transition-timing one. Fix: drop backdrop-filter from .wrap specifically on mobile (≤860px, the only range where .main-nav is position:fixed) — background tint/gradient/border/shadow are untouched and don't affect containing blocks, so the connector bar keeps its glass color, just without the blur. Desktop is unaffected (no position:fixed descendant exists there to break). ROLLBACK: delete this block, or restore styles.css.backup-before-glass-buttons over this file. ============================================================ */ @media (max-width: 860px) { .site-header .wrap, .site-header.is-pill .wrap, .site-header.nav-open .wrap { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ============================================================ EXPERIMENT ROUND 4 — stronger mobile dropdown glass, plus extending Liquid Glass to the booking-widget card, the job- detail sidebar cards ("Später bewerben" etc.), and the Bewerbungs-Funnel (quiz) buttons. Local preview only. 4a) .main-nav (mobile dropdown body): the previous pass read as "milky" — flat 88% white + light blur, no refraction. Lowering the opacity and adding the same static sheen gradient used on the buttons (no animation: this panel holds paragraphs of real copy, and a moving highlight across body text hurts legibility more than it adds) plus stronger blur/saturate gives it visible depth while keeping foreground text fully sharp — backdrop-filter only blurs what's behind the element, never its own content. Only background-color/background-image/border-color/box-shadow/ backdrop-filter change here; .main-nav has no transition on any of these today so nothing about existing open/close animation timing is touched. 4b) .day-picker (booking widget card): was opaque var(--color-bg-alt), so unselected day/time buttons (already translucent since Step 3) had nothing but flat white behind them to react against. Now translucent + blurred itself. 4c) .sidebar-card (job detail page: "Später bewerben" etc.): same opaque-container problem as 4b — the card's "Später bewerben" button already uses the glass-styled .btn-primary class, but a 72%-opacity dark green fill on a flat opaque white card reads as nearly solid. Glass-ifying the card itself makes the button's translucency legible. 4d) .wizard-next / .wizard-option (Bewerbungs-Funnel buttons): brought into the same system as .btn-primary / .day-btn. Neither class had a transition covering background/border-color/box- shadow/backdrop-filter before except .wizard-option's existing `border-color 0.15s ease, background 0.15s ease` — only changing the values of those two, not the property list, so the existing hover/select transition speed is unchanged; backdrop-filter is new and simply doesn't animate (consistent with the rest of this rollout). ROLLBACK: delete this block, or restore styles.css.backup-before-round4-fixes over this file. ============================================================ */ @media (max-width: 860px) { .main-nav { background-image: linear-gradient(120deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.35) 40%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.22) 75%, rgba(255,255,255,0) 95%); background-repeat: no-repeat; background-size: 200% 100%; background-position: -20% 0; background-color: rgba(255, 255, 255, 0.68); -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%); border-color: rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 40px rgba(31, 61, 43, 0.18); } } .day-picker { background-image: linear-gradient(120deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.4) 40%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.25) 75%, rgba(255,255,255,0) 95%); background-repeat: no-repeat; background-size: 200% 100%; background-position: -20% 0; background-color: rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); border-color: rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 18px rgba(31, 61, 43, 0.1); } .sidebar-card { background-image: linear-gradient(120deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.4) 40%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.25) 75%, rgba(255,255,255,0) 95%); background-repeat: no-repeat; background-size: 200% 100%; background-position: -20% 0; background-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border-color: rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 28px rgba(31, 61, 43, 0.1); } /* .profile-card / .wizard-card = the actual booking-window CONTAINER (the floating popup itself, not just the day/time grid inside it). Glass-ifying this is what makes the effect show through onto the unselected day/time buttons — a translucent grid sitting on an already-translucent, blurred popup reads as layered glass; the same grid sitting on a flat opaque white popup (previous state) had nothing to react against. Neither element had backdrop-filter or a position:fixed descendant of its own, so no containing-block risk here (unlike .wrap earlier). */ .profile-card, .wizard-card { background-image: linear-gradient(120deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.18) 75%, rgba(255,255,255,0) 95%); background-repeat: no-repeat; background-size: 200% 100%; background-position: -20% 0; background-color: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 20px 50px rgba(31, 61, 43, 0.16); } .wizard-next { background-image: linear-gradient(120deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.3) 35%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.2) 65%, rgba(255,255,255,0) 85%); background-repeat: no-repeat; background-size: 260% 100%; background-position: -30% 0; background-color: rgba(31, 61, 43, 0.72); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0 0 1px rgba(255,255,255,0.07), 0 8px 22px rgba(31,61,43,0.25); animation: liquid-glass-sheen 7s ease-in-out infinite; } .wizard-next:not(:disabled):hover { background-color: rgba(23, 48, 31, 0.78); } .wizard-next:disabled { background-image: none; background-color: var(--color-line); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: none; animation: none; color: var(--color-ink-soft); } @media (prefers-reduced-motion: reduce) { .wizard-next { animation: none; } } .wizard-option { background-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-color: rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .wizard-option:hover { border-color: rgba(31, 61, 43, 0.4); } .wizard-option.selected { background-color: rgba(31, 61, 43, 0.72); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-color: rgba(255, 255, 255, 0.3); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 12px rgba(31,61,43,0.2); } /* ============================================================ EXPERIMENT ROUND 5. 5a) Pill/dropdown tone mismatch: .main-nav (round 4) got a stronger, more saturated glass treatment than .site-header.nav-open .wrap ever received (it was left at its original round-3 values: 88% opacity, no sheen). The mobile-only backdrop-filter:none forced on .wrap (further up this file, for the containing-block/gap fix) means .wrap can never get real blur back on mobile — but it can still match .main-nav's background-color/gradient/border-color exactly, which is what actually reads as "tone" — so this closes the visible brightness seam between the two without reopening the gap bug. 5b) The mobile dropdown's Erstgespräch button was deliberately kept solid/opaque back when the dropdown itself was still explicitly out of scope for the glass rollout. That exclusion is now stale — the dropdown has since been brought fully into the glass system — so this reinstates the same glass values already used everywhere else .btn-primary appears. ROLLBACK: delete this block, or restore styles.css.backup-before-round5-fixes over this file. ============================================================ */ .site-header.nav-open .wrap { background-image: linear-gradient(120deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.35) 40%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.22) 75%, rgba(255,255,255,0) 95%); background-repeat: no-repeat; background-size: 200% 100%; background-position: -20% 0; background-color: rgba(255, 255, 255, 0.68); border-color: rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .site-header.nav-open .main-nav.open a.btn-primary { background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.2) 65%, rgba(255, 255, 255, 0) 85%); background-repeat: no-repeat; background-size: 260% 100%; background-position: -30% 0; background-color: rgba(31, 61, 43, 0.72); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-color: rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 22px rgba(31, 61, 43, 0.25); animation: liquid-glass-sheen 7s ease-in-out infinite; } .site-header.nav-open .main-nav.open a.btn-primary:hover { background-color: rgba(23, 48, 31, 0.78); } @media (prefers-reduced-motion: reduce) { .site-header.nav-open .main-nav.open a.btn-primary { animation: none; } } /* ============================================================ EXPERIMENT ROUND 6. 6a) Tone mismatch, take two: round 5 matched background-color/ gradient/border-color between .wrap and .main-nav but left .main-nav's own backdrop-filter (blur(28px) saturate(200%)) in place, assuming matching color alone would be enough. It wasn't — blur+saturate over whatever's behind the dropdown reads as a hazier, muddier "milky" surface, while .wrap (forced to backdrop-filter:none on mobile, for the containing-block/gap fix) stays a clean, flat tinted glass. Per instruction, this round makes .main-nav use the literal same values as .site-header.nav-open .wrap — including backdrop-filter:none — instead of two different glass recipes. .main-nav itself has no position:fixed descendants of its own, so dropping its backdrop-filter doesn't touch the containing-block issue; this is a pure tone match. 6b) Career banner card (Team page): now matches .offer-card's padding (40px, changed further up this file) and gets a dark liquid-glass fill — translucent near-black + blur/saturate + the same static sheen highlight used on the other large glass panels (.main-nav, .profile-card) — instead of flat opaque var(--color-black). No moving sheen animation, same reasoning as .main-nav: a shimmering highlight across a heading + paragraph hurts legibility more than it adds. ROLLBACK: delete this block, or restore styles.css.backup-before-round6-fixes over this file. ============================================================ */ @media (max-width: 860px) { .main-nav { background-image: linear-gradient(120deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.35) 40%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.22) 75%, rgba(255,255,255,0) 95%); background-repeat: no-repeat; background-size: 200% 100%; background-position: -20% 0; background-color: rgba(255, 255, 255, 0.68); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } } .career-banner-card { /* Single smooth hump (was a "double bump" — two separate lighter stops with a dip between them — which read as a blotchy patch once blurred at this size, rather than one clean diagonal streak). background-size/position back to their plain 100% default too — the 200%/-20% offset was leftover from the animated-sheen technique used on small buttons/pills, not needed here since this card's sheen is deliberately static. */ background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 80%); background-color: rgba(12, 15, 14, 0.94); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 48px rgba(12, 15, 14, 0.18); } /* ============================================================ EXPERIMENT ROUND 7 — mobile pill + dropdown color matched to the DESKTOP navbar pill's actual values. .site-header.is-pill .wrap (desktop, further up this file) is the real source of truth for what the navbar pill looks like: background-color rgba(255,255,255,0.42), border-color rgba(255,255,255,0.6), backdrop-filter blur(28px) saturate(190%), plus its own gradient sheen. Round 5/6 had mobile's nav-open pill and dropdown matching EACH OTHER (0.68 opacity, no blur) but never checked them against desktop, which uses a lighter/more transparent recipe. This round copies desktop's exact values onto both mobile elements instead. One value can't be copied literally: backdrop-filter on .wrap itself stays "none" even here — that's the standing mobile-only fix a few blocks up in this file for the .wrap/position:fixed containing-block bug (a backdrop-filter on .wrap breaks .main-nav's fixed positioning, since .main-nav is its direct DOM child). .main-nav has no such restriction, so it gets the exact desktop blur value. Every other property (background-color, gradient, border-color) is now identical across desktop pill, mobile pill, and mobile dropdown. ROLLBACK: delete this block, or restore styles.css.backup-before-round7-fixes over this file. ============================================================ */ .site-header.nav-open .wrap { background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.45) 65%, rgba(255, 255, 255, 0) 85%); background-repeat: no-repeat; background-size: 260% 100%; background-position: -30% 0; background-color: rgba(255, 255, 255, 0.42); border-color: rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.12); } @media (max-width: 860px) { .main-nav { background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.45) 65%, rgba(255, 255, 255, 0) 85%); background-repeat: no-repeat; background-size: 260% 100%; background-position: -30% 0; background-color: rgba(255, 255, 255, 0.42); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); border-color: rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.12); } } /* ============================================================ EXPERIMENT ROUND 8c — mobile pill/dropdown opacity raised. Round 7 made background-color/border-color byte-identical to desktop's is-pill values (confirmed again by measurement: both rgba(255,255,255,0.42) / rgba(255,255,255,0.6) in every state, including at-top + nav-open together). That's real, but identical ALPHA doesn't mean identical LOOK: desktop's 42% white tint sits behind blur(28px) saturate(190%), which smears whatever's behind it into a soft haze — that haze is most of what reads as "nearly opaque" on desktop, not the 42% alone. .wrap can't get that same blur on mobile (forced to none — the standing containing-block fix so .main-nav's fixed positioning doesn't break), so the exact same 42% renders as a flat, sharp-edged tint with whatever's behind (e.g. the hero's dotted grid) showing through clearly — visibly more "glassy" even though the number is identical. Since literal value-parity on backdrop-filter isn't possible here without restructuring .main-nav out from under .wrap in the DOM (a bigger, riskier change than a color tweak), this compensates on the one property that can still move: raising background-color opacity on both .wrap (mobile pill) and .main-nav (dropdown) — kept identical to each other, per the standing "no two different recipes" instruction — high enough to read as "nearly opaque" without blur's help, closer to desktop's actual visual result. .main-nav keeps its real blur on top of this; .wrap doesn't, and structurally can't. ROLLBACK: delete this block, or restore styles.css.backup-before-round8-fixes over this file. ============================================================ */ .site-header.nav-open .wrap { background-color: rgba(255, 255, 255, 0.9); } @media (max-width: 860px) { .main-nav { background-color: rgba(255, 255, 255, 0.9); } } /* ============================================================ EXPERIMENT ROUND 9 — the real structural fix for the mobile pill's missing blur, requested as "pull .main-nav out of .wrap in the HTML." Implemented instead as a CSS-only equivalent that reaches the identical technical outcome without touching any of the 9 HTML files or desktop's flex layout: The spec rule that caused all of this: an element becomes the containing block for its position:fixed DESCENDANTS if IT has backdrop-filter (or filter/transform/perspective/contain:layout, etc). .main-nav is fixed and a DOM child of .wrap, so whenever .wrap itself carried backdrop-filter, .wrap became .main-nav's containing block instead of the viewport — the round 4 bug. Moving .main-nav to be a sibling of .wrap (the literal ask) would fix this, but .main-nav also needs to render INLINE inside the pill on desktop (next to the logo/CTA, sharing .wrap's flexbox row) — pulling it out of the DOM would break that layout and require rebuilding desktop's positioning from scratch, on every page. A CSS pseudo-element sidesteps the whole tradeoff: ::before is a DOM child of .wrap, but it is a SIBLING of .main-nav, not its ancestor. The spec check only walks .main-nav's real ancestors (.wrap, header.site-header, body, html) — ::before is never part of that chain no matter what filters it carries. So the glass material (background + backdrop-filter) moves onto .wrap::before, .wrap itself is left with NO qualifying property, and .main-nav's containing block correctly falls through to header.site-header (position:fixed, top:0, no padding/border of its own — already documented above where .site-header's contain:layout is declared — so this produces the exact same result as the viewport, zero offset). This is the same mechanism that's been keeping mobile correctly positioned since round 4; nothing about it changes here except that .wrap can now ALSO have real backdrop-filter, via a layer that was never in .main-nav's ancestor chain to begin with. Visually: ::before is absolutely positioned (inset -1px, to reach under .wrap's own 1px border too) with z-index:-1 and border-radius:inherit, so it sits as a plain glass fill directly behind the pill's content — .wrap's border/box-shadow (unaffected by any of this, never part of the containing-block trigger list) keep rendering exactly as before, directly on .wrap itself. Result: .wrap's real backdrop-filter, background-color and border-color are now byte-identical to desktop's is-pill recipe in every state (base/at-top/is-pill/nav-open) and on every screen size — not approximated, not compensated with extra opacity. The round 8 opacity-boost workaround above is superseded (values reverted to the literal desktop numbers) since real blur is now doing the actual work again. ROLLBACK: delete this block, or restore styles.css.backup-before-round9-fixes over this file (also un- does round 8's opacity boost, restoring its 0.9 values — harmless either way since this block's rules come later and win). ============================================================ */ .site-header .wrap { position: relative; background-image: none; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; } .site-header.at-top .wrap, .site-header.is-pill .wrap, .site-header.nav-open .wrap { background-image: none; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; } .wrap::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; transition: background 0.4s ease, border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .site-header .wrap::before { background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.4) 65%, rgba(255, 255, 255, 0) 85%); background-repeat: no-repeat; background-size: 260% 100%; background-position: -30% 0; background-color: rgba(250, 250, 250, 0.4); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); animation: liquid-glass-sheen 7s ease-in-out infinite; } .site-header.at-top .wrap::before { background-image: none; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; } .site-header.is-pill .wrap::before, .site-header.nav-open .wrap::before { background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.45) 65%, rgba(255, 255, 255, 0) 85%); background-repeat: no-repeat; background-size: 260% 100%; background-position: -30% 0; background-color: rgba(255, 255, 255, 0.42); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); } .site-header.is-pill .wrap::before { animation: liquid-glass-sheen 7s ease-in-out infinite; } .site-header.nav-open .wrap::before { animation: none; } @media (prefers-reduced-motion: reduce) { .wrap::before { animation: none; } } /* .main-nav no longer needs round 8's opacity-boost workaround — it already had real backdrop-filter safely (it has no fixed-position descendants of its own to break), and now .wrap has real blur again too, so both go back to the literal desktop value. */ @media (max-width: 860px) { .main-nav { background-color: rgba(255, 255, 255, 0.42); } } /* ============================================================ Liquid-Glass job-card "Jetzt bewerben" button. Same technique as the .btn-primary glass block above (blur + saturate + a diagonal sheen gradient + inset highlight), tinted black instead of green so it keeps .btn-dark's original solid- black identity while gaining the glass material. Scoped to its own class rather than restyling .btn-dark globally, since .btn-dark is also used by admin.html's modal-close button, which should stay plain/opaque — an internal tool control, not a marketing-page CTA. ROLLBACK: delete this block and change script.js's job-card template back from "btn-dark-glass" to "btn-dark". ============================================================ */ .btn-dark-glass { background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.22) 35%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.16) 65%, rgba(255, 255, 255, 0) 85%); background-repeat: no-repeat; background-size: 260% 100%; background-position: -30% 0; background-color: rgba(12, 15, 14, 0.8); color: #fff; -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 22px rgba(12, 15, 14, 0.3); animation: liquid-glass-sheen 7s ease-in-out infinite; } .btn-dark-glass:hover { background-color: rgba(0, 0, 0, 0.88); } @media (prefers-reduced-motion: reduce) { .btn-dark-glass { animation: none; } } /* ---------- Kundenstimmen (kundenstimmen.html + homepage featured section) ---------- Admin-managed via /admin's "Kundenstimmen"-Panel — see script.js's testimonialCardInnerHtml()/initTestimonialsList()/initFeaturedTestimonials()/ initTestimonialCarousel()/initTestimonialStack(). Video testimonials render as a draggable centered carousel, text ones as an overlapping card stack — see those two components below. .testimonial-card itself is just the shared visual chrome (border/radius/padding); its outer positioning (carousel vs. stack) is what actually places it on screen, so the base class carries no layout of its own. */ .testimonial-card { background: var(--color-bg-alt); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 30px; transition: box-shadow 0.35s ease, border-color 0.35s ease; } .testimonial-card:hover { box-shadow: 0 24px 48px rgba(12, 15, 14, 0.1); } .testimonial-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .testimonial-logo { height: 28px; width: auto; max-width: 120px; object-fit: contain; flex: none; } .testimonial-firma { font-weight: 600; font-size: 15px; } .testimonial-quote { margin: 0 0 20px; font-size: 17px; line-height: 1.5; color: var(--color-ink); } .testimonial-video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: var(--color-black); margin-bottom: 20px; } .testimonial-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .testimonial-stats { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 18px; border-top: 1px solid var(--color-line); } .testimonial-stat-value { font-size: 20px; font-weight: 700; color: var(--color-accent); line-height: 1; } .testimonial-stat-label { font-size: 12px; color: var(--color-ink-soft); margin-top: 6px; } .testimonial-section-title { text-align: center; margin-bottom: 8px; } /* ---------- Video carousel — see initTestimonialCarousel() in script.js. Cards are positioned with transform:translateX() computed in JS (not CSS grid/flex layout), so the container is just a fixed-height stage; each card centers itself via left:50% + translate(-50%, 0) + the JS-computed offset. Arrows are absolutely positioned at the wrap's own left/right edge, vertically centered on the carousel (i.e. at video height) rather than sitting in a controls row above it; the dot row sits below. ---------- */ .testimonial-carousel-wrap { position: relative; margin-top: 28px; } /* Same white "liquid glass" material as the day/time-picker buttons (.day-nav-btn etc.) — translucent white + blur, no moving sheen (a discrete round control reads better calm, matching those buttons rather than the animated navbar pill). */ .testimonial-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: var(--color-ink); cursor: pointer; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 22px rgba(12, 15, 14, 0.16); transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .testimonial-carousel-arrow:hover { background-color: rgba(255, 255, 255, 0.78); border-color: var(--color-ink); transform: translateY(-50%) scale(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 26px rgba(12, 15, 14, 0.2); } .testimonial-carousel-arrow-prev { left: 0; } .testimonial-carousel-arrow-next { right: 0; } .testimonial-carousel-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; } .testimonial-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-line); border: none; padding: 0; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .testimonial-carousel-dot:hover { background: var(--color-ink-soft); } .testimonial-carousel-dot.is-active { background: var(--color-accent); transform: scale(1.3); } .testimonial-carousel { position: relative; /* Contains the cards' internal z-index stacking (up to 100) so it can never leak out and compete with the arrow buttons, which live outside this element as siblings in .testimonial-carousel-wrap. Without this, the active/widest card was painting over the arrows at their overlap point. */ isolation: isolate; height: 560px; overflow: hidden; /* Fades the peeking neighbor cards out toward the edges instead of letting overflow:hidden cut them off with a hard vertical line. */ -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent); mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent); touch-action: pan-y; cursor: grab; } .testimonial-carousel:active { cursor: grabbing; } .testimonial-carousel-card { position: absolute; top: 0; left: 50%; width: min(560px, 88vw); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; cursor: pointer; user-select: none; } .testimonial-carousel-card.is-active { cursor: default; } /* Inactive cards' iframes go click-through so a tap on a peeking neighbor reaches the card's own click handler (initTestimonialCarousel()) instead of being swallowed by the embedded YouTube/Vimeo player. */ .testimonial-carousel-card:not(.is-active) .testimonial-video iframe { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .testimonial-carousel-card { transition: opacity 0.2s ease; } } @media (max-width: 640px) { .testimonial-carousel { height: 460px; -webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent); } .testimonial-carousel-card { width: 82vw; } .testimonial-carousel-arrow { width: 44px; height: 44px; font-size: 20px; } } /* ---------- Text testimonial stack — see initTestimonialStack() in script.js for the full mechanics writeup (measured directly from talenthafen.com/fallstudien's live scroll behavior). # (.testimonial-stack) is a plain tall block — its only job is to give .testimonial-stack-inner (the actual sticky wrapper) some extra height to pin within, via the inline min-height initTestimonialStack() sets. Cards are sticky flex children in NORMAL flow (no negative margins) — the fanned-accumulation effect falls out entirely from each card's own sticky range being bounded by how much of the inner wrapper's height remains below it; no per-card JS math needed. */ .testimonial-stack { max-width: 1120px; margin: 0 auto; } .testimonial-stack-inner { position: sticky; top: 1px; display: flex; flex-direction: column; gap: 36px; } .testimonial-stack-card { position: sticky; width: 100%; display: flex; align-items: stretch; gap: 36px; background: #F1F2F3; border-radius: var(--radius-lg); padding: 36px; box-shadow: 0 16px 32px rgba(12, 15, 14, 0.08); } .testimonial-stack-card.is-reverse { flex-direction: row-reverse; } .testimonial-stack-logo-panel { flex: 0 0 36%; min-height: 280px; background: #FFFFFF; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; padding: 36px; } .testimonial-stack-logo-panel img { max-width: 100%; max-height: 150px; object-fit: contain; } .testimonial-stack-logo-fallback span { font-size: 24px; font-weight: 700; color: var(--color-ink); text-align: center; } .testimonial-stack-content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 16px 12px; min-width: 0; } .testimonial-stack-headline { margin: 0 0 36px; font-size: clamp(24px, 2.9vw, 32px); font-weight: 700; line-height: 1.35; color: var(--color-ink); } .testimonial-stack-stats { display: flex; flex-wrap: wrap; gap: 48px; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid var(--color-line); } .testimonial-stack-stat-value { font-size: 24px; font-weight: 700; color: var(--color-ink); line-height: 1; } .testimonial-stack-stat-label { font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-ink-soft); margin-top: 7px; } .testimonial-stack-firma { font-size: 16px; color: var(--color-ink); } @media (max-width: 720px) { .testimonial-stack-card, .testimonial-stack-card.is-reverse { flex-direction: column; } .testimonial-stack-logo-panel { flex-basis: auto; min-height: 140px; } .testimonial-stack-headline { margin-bottom: 20px; } } /* Phone-width follow-up to the 720px breakpoint above: the logo panel and headline/quote text still use their desktop sizing there (140px min-height panel, 36px padding, 24px+ bold headline), which reads oversized/dominant on an actual phone screen. Only sizing changes here — layout (column stacking) and the fan-scroll mechanics (BASE_TOP/TOP_STEP=32 in initTestimonialStack(), and .testimonial-stack-inner's 36px gap) are untouched, since the container's min-height is measured from the rendered card height at runtime (see initTestimonialStack) rather than hardcoded, so it stays correct automatically as cards get shorter here. */ @media (max-width: 600px) { .testimonial-stack-card { padding: 16px; gap: 14px; } .testimonial-stack-logo-panel { min-height: 56px; padding: 10px; } .testimonial-stack-logo-panel img { max-height: 36px; } .testimonial-stack-logo-fallback span { font-size: 14px; } .testimonial-stack-content { padding: 2px; } .testimonial-stack-headline { font-size: 15px; line-height: 1.4; margin-bottom: 12px; } .testimonial-stack-stats { gap: 22px; padding-bottom: 12px; margin-bottom: 10px; } .testimonial-stack-stat-value { font-size: 16px; } .testimonial-stack-stat-label { font-size: 9.5px; } .testimonial-stack-firma { font-size: 12px; } /* Square cards: card width stays ~335px at a 375px viewport, so aspect-ratio:1 makes height track that same width — a modest increase over the previous auto-height. .testimonial-stack-content already has flex:1 1 auto + justify-content:center (see base rule above), so it automatically absorbs/centers any extra vertical space the square adds — no separate centering rule needed here. Logo sized to actually fill the panel now that the card (and so the panel's available width) is bigger — the panel's own white/rounded-rect treatment is untouched, only its size and the image inside scale up together. */ .testimonial-stack-logo-panel { min-height: 130px; padding: 18px; } .testimonial-stack-logo-panel img { max-height: 100px; } } /* Tablet-only (601–900px): at these widths the card previously used the DESKTOP row layout unmodified (768px is above the 720px column-stack breakpoint above), so making it square needs its own pass — width stays the same (~691px at a 768px viewport) but forcing it square roughly doubles the height versus the old row layout's content-driven height. Left the logo-panel/image at their desktop sizing (280px/150px, no override needed) since that scale already reads right against a card this much bigger; only the extra breathing room (padding/gap) and text size are bumped so the enlarged square doesn't look sparse. Follow-up: the desktop-inherited logo sizing (280px/150px) still read as small once the card actually became a 691px square — bumped explicitly here too, same reasoning as the mobile block above. */ @media (min-width: 601px) and (max-width: 900px) { .testimonial-stack-card { padding: 40px; gap: 32px; } .testimonial-stack-logo-panel { min-height: 320px; padding: 40px; } .testimonial-stack-logo-panel img { max-height: 220px; } .testimonial-stack-headline { font-size: 26px; margin-bottom: 28px; } .testimonial-stack-stat-value { font-size: 26px; } .testimonial-stack-firma { font-size: 17px; } } /* Shared square-card treatment, mobile + tablet (≤900px): forces the column layout across the full range (the pre-existing rule above only covers ≤720px, leaving 721–900px on the desktop row layout otherwise), makes the card a square via its own resolved width, and gives it a noticeably stronger shadow than the desktop card. Declared last so it wins the cascade over the narrower-scoped rules above regardless of source order. See initTestimonialStack() in script.js for BASE_TOP/ TOP_STEP=32 (fan-scroll offsets) — verified separately that these still produce a working (non-overlapping) stack at both the new mobile and tablet card heights; the container's own min-height is measured from the rendered card height at runtime, so it adapts automatically. */ @media (max-width: 900px) { .testimonial-stack-card, .testimonial-stack-card.is-reverse { flex-direction: column; aspect-ratio: 1; box-shadow: 0 28px 56px rgba(12, 15, 14, 0.22), 0 8px 20px rgba(12, 15, 14, 0.14); } .testimonial-stack-logo-panel { flex: 0 0 auto; } } /* ---------- Mobile/tablet: remove white card backgrounds that read as elongated bars on narrow screens (customer-logo strip, process-icon boxes) — content stays, only the boxed white framing goes. Step cards ("Drei Schritte") deliberately keep their card background — an earlier pass removed it there too, but that read as bare/unstyled text, so the card look was restored for that component specifically. Placed at the end of the file (after both the 860px single-column breakpoint and the 600px card-padding block above) so these rules win the cascade at every width ≤900px regardless of source order elsewhere. */ @media (max-width: 900px) { /* Customer logos: the uploaded logo files themselves carry a baked-in white background (typical for uploaded business logos) — at the marquee's small fixed height that white padding reads as a long pale bar around a small mark. mix-blend-mode:multiply drops white pixels out against the (also white) .logo-strip background, leaving just the logo mark — no re-export of the uploaded assets needed. */ .marquee img { mix-blend-mode: multiply; } /* Ablauf/process-card icon boxes ("Ihr nächster Schritt zum großen Erfolg" and karriere.html's matching 3-step section): drop the boxed white background/border, let the icon sit directly on the section's own background, and center the whole card (icon + step number + heading + text) instead of the desktop's left alignment. */ .process-card { text-align: center; } .process-icon { background: transparent; border: none; padding: 0; height: auto; margin-bottom: 16px; } .process-icon img { max-height: 140px; } /* Kundenstimmen hero: the fixed/floating header overlays page content (hero starts at viewport top, not pushed down in normal flow), so the hero's own top padding is the only thing clearing it. 40px reads as cramped against the "KUNDENSTIMMEN" pill right below the logo. */ #kundenstimmen-hero { padding-top: 88px; } /* Partnerprogramm hero: same eyebrow-pill-first layout/clearance issue as the kundenstimmen hero above — applied proactively rather than shipping a new page with an already-known spacing problem. */ #partner-hero { padding-top: 88px; } /* Karriere hero: same fixed-header clearance issue, worse here since the founder photo (not a pill/eyebrow) is the very first element. */ #karriere-hero { padding-top: 88px; } /* Team page: the section holding the team card relies entirely on the hero's padding-bottom above it (no padding-top of its own). 40px still read as cramped against the intro paragraph — bumped further. */ #team-section { padding-top: 80px; } /* Mitarbeiterbereich: same eyebrow-pill-first clearance issue as the hero sections above, missed when that fix was first applied — all three of this page's own hero-styled views (login, forced password change, post-login dashboard header) share the identical layout. */ #employee-login-view, #employee-force-change-view, #employee-home-panel { padding-top: 88px; } /* Stellen page: same eyebrow-pill-first clearance issue as the hero sections above — never included in that original fix. */ #stellen-hero { padding-top: 88px; } }