/* ============================================ AGENTUR22 – Stylesheet (Black & Cyan Identity) Markenfarbe & Schrift zentral anpassbar ============================================ */ /* ===== Clash Display (Marken-Headlineschrift, frei kommerziell nutzbar – Fontshare) ===== */ @font-face { font-family: "Clash Display"; src: url("../assets/fonts/ClashDisplay-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Clash Display"; src: url("../assets/fonts/ClashDisplay-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Clash Display"; src: url("../assets/fonts/ClashDisplay-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Clash Display"; src: url("../assets/fonts/ClashDisplay-700.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; } :root { --accent: #0CF1FA; /* Markenfarbe Türkis/Cyan */ --accent-dark: #0ac9d4; --bg: #000000; /* Schwarz */ --panel: #0a0d0f; /* leicht angehobene Flächen */ --text: #ffffff; /* Haupttext weiß */ --muted: #9aa3a8; /* gedämpfter Text */ --line: rgba(12,241,250,0.22); --radius: 18px; --maxw: 1280px; --nav-active: var(--accent); /* CI-Farbe (Cyan) für aktiven Menüpunkt & Pfeil-Links */ --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-head: "Archivo", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } /* WICHTIG (iOS): KEIN overflow-x:hidden auf – overflow auf html+body zusammen macht html zum Scroll-Container, den iOS-Safari schlecht behandelt → vertikales Scrollen bleibt stecken/bricht. Horizontales Clipping erledigt allein body (es gibt ohnehin keinen horizontalen Überlauf mehr). */ html { scroll-behavior: auto; width: 100%; } body { font-family: var(--font-body); font-stretch: 112.5%; /* Archivo SemiExpanded (Inter ohne Breitenachse bleibt normal) */ color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; max-width: 100%; position: relative; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); } /* ===== Header ===== */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; /* KEIN backdrop-filter: iOS-Safari rendert den Blur an der oberen Viewport-Kante eines fixierten Elements oft als schwarzen Balken (Artefakt). Stattdessen schlichter halbtransparenter Hintergrund – Logo bleibt lesbar, Video scheint durch. */ background: rgba(0,0,0,0.55); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .site-header.scrolled { border-color: var(--line); background: rgba(0,0,0,0.85); } /* Header breiter: Logo ganz links, Menü weit rechts (edge-to-edge wie 1030) */ .nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 90px; max-width: 1760px; } .logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; color: #fff; } .logo .logo-mark { height: 34px; width: auto; display: block; border-radius: 4px; } .logo .logo-img { height: 58px; width: auto; display: block; } .logo span { color: var(--accent); } .footer .logo .logo-img { height: 48px; } /* Menüleiste im 1030.agency-Stil: fette Wörter rechts, aktiver Punkt pink + Unterstrich */ .nav { display: flex; align-items: center; gap: clamp(28px, 2.8vw, 54px); } .nav a { position: relative; font-family: var(--font-head); font-size: clamp(1rem, 1.05vw, 1.15rem); font-weight: 700; letter-spacing: 0.005em; color: #fff; transition: color .2s; } .nav a::after { content: ""; position: absolute; left: 0; bottom: -7px; height: 3px; width: 100%; background: var(--nav-active); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.16,1,.3,1); } .nav a:hover { color: var(--nav-active); } .nav a:hover::after { transform: scaleX(1); transform-origin: left; } /* aktiver Menüpunkt (per Scroll mitwandernd) – dauerhaft pink + Unterstrich */ .nav a.is-active { color: var(--nav-active); } .nav a.is-active::after { transform: scaleX(1); transform-origin: left; } /* ===== Kontakt = besonderes Element: schräge Outline-Pill mit Pfeil, Glanz-Sweep & Glow ===== */ .nav .nav-cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; padding: 10px 22px; font-weight: 800; letter-spacing: 0.02em; color: var(--accent); background: rgba(12,241,250,0.06); border: 1.5px solid var(--accent); border-radius: 0; -webkit-text-fill-color: currentColor; transition: color .4s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .4s; } /* der dauerhafte pinke Unterstrich der normalen Links entfällt hier */ .nav .nav-cta::after { content: ""; position: absolute; inset: 0; left: auto; bottom: auto; height: auto; width: auto; z-index: -1; background: var(--accent); transform: translateY(101%); border-radius: 0; transition: transform .5s cubic-bezier(.65,.05,.36,1); } /* Glanz-Sweep, der bei Hover diagonal durchläuft */ .nav .nav-cta::before { content: ""; position: absolute; top: 0; left: -120%; z-index: -1; width: 60%; height: 100%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transition: left .6s ease; } .nav .nav-cta .arr { display: inline-block; transition: transform .4s cubic-bezier(.16,1,.3,1); } .nav .nav-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(12,241,250,.40), 0 0 0 1px var(--accent); border-color: var(--accent); } .nav .nav-cta:hover::after { transform: translateY(0); } .nav .nav-cta:hover::before { left: 140%; } .nav .nav-cta:hover .arr { transform: translate(3px,-3px); } /* Wenn die Kontakt-Sektion aktiv ist: Pill gefüllt statt nur pinker Text */ .nav .nav-cta.is-active { color: #fff; } .nav .nav-cta.is-active::after { transform: translateY(0); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { width: 28px; height: 2.5px; background: var(--accent); border-radius: 2px; transition: .3s; } /* ===== Buttons (modern, eckig, Fill-Slide-Effekt) ===== */ .btn, .btn-pill { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 17px 34px; border-radius: 0; cursor: pointer; border: 2px solid var(--accent); background: transparent; color: #fff; transition: color .35s ease, transform .25s ease, box-shadow .25s ease; } .btn::after, .btn-pill::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateY(102%); transition: transform .45s cubic-bezier(.65,.05,.36,1); } .btn .arr, .btn-pill .arr { transition: transform .35s cubic-bezier(.65,.05,.36,1); } .arr svg { display: block; } .btn:hover, .btn-pill:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(12,241,250,.25); } .btn:hover::after, .btn-pill:hover::after { transform: translateY(0); } .btn:hover .arr, .btn-pill:hover .arr { transform: translateX(5px); } /* Primär = gefüllt Cyan; beim Hover füllt sich Schwarz hoch, Text wird Cyan */ .btn-dark, .btn-pill, .btn-pill-dark { background: var(--accent); color: #000; border-color: var(--accent); } .btn-dark::after, .btn-pill::after, .btn-pill-dark::after { background: #000; } .btn-dark:hover, .btn-pill:hover, .btn-pill-dark:hover { color: var(--accent); } /* Sekundär = Outline; beim Hover füllt sich Cyan hoch, Text wird Schwarz */ .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); } .btn-outline-light::after { background: var(--accent); } .btn-outline-light:hover { color: #000; border-color: var(--accent); } .btn-block { width: 100%; justify-content: center; } /* ===== Link-CTA mit Diagonal-Pfeil (Variation, à la „KENNENLERNEN ↗") ===== */ .link-arrow { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 16px; font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(1rem, 2.2vw, 1.2rem); color: #fff; padding: 4px 6px 14px 2px; cursor: pointer; transition: color .35s ease; } .link-arrow::after { /* Unterstrich, der bei Hover neu aufzieht */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(1); transform-origin: left; transition: transform .45s cubic-bezier(.16,1,.3,1); } .link-arrow .arr { display: inline-grid; place-items: center; font-size: 1.15em; line-height: 1; transition: transform .4s cubic-bezier(.16,1,.3,1); } .link-arrow:hover { color: var(--nav-active); } .link-arrow:hover::after { transform: scaleX(0); transform-origin: right; } .link-arrow:hover .arr { transform: translate(5px, -5px); } /* Pink-Variante (Standardfarbe bereits pink, Hover → weiß) */ .link-arrow--pink { color: var(--nav-active); } .link-arrow--pink:hover { color: #fff; } /* nur der kleine Pfeil weiß (Text bleibt türkis) */ .link-arrow--pink .arr { color: #fff; } /* ===== Gemeinsame Typo-Bausteine ===== */ .kicker { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .kicker-light { color: var(--accent); } .big-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.1rem, 6vw, 4.8rem); line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; } /* Lange (deutsche) Wörter in Headlines sauber umbrechen, statt über den Rand zu schießen */ .svc-name, .faq-head, .legal h1, .contact-lead, .hero-sub { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } /* Headlines: Wörter NIE mitten im Wort trennen – Umbruch nur an Leerzeichen/
*/ .hero-title, .big-title, .wow-title { overflow-wrap: normal; word-break: keep-all; hyphens: none; } /* zusammengehörige Wortgruppe nie umbrechen (z. B. „Genug gescrollt.") */ .nowrap { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; hyphens: none; } /* Umbruch, der nur auf dem Handy greift (z. B. WOW-Headline „den sie" / „verdient.") */ .br-mobile { display: none; } /* Akzentwort mit animierter Unterstreichung (zeichnet sich beim Reveal) */ /* Akzent-Wörter („Diesmal tun wir's.", „unübersehbar.") – ohne Unterstrich, faden beim Scrollen verzögert ein */ .accent-text { color: var(--accent); display: inline-block; opacity: 0; transition: opacity 1.7s ease .45s; } .reveal.visible .accent-text, .accent-text.drawn { opacity: 1; } @media (prefers-reduced-motion: reduce) { .accent-text { opacity: 1; } } /* „etwas Großartiges" – Typing-Effekt (per JS) mit blinkendem Cursor */ .fade-accent { color: var(--accent); } .tw-caret { display: inline-block; font-weight: 400; animation: twblink 0.75s steps(1) infinite; } @keyframes twblink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .tw-caret { display: none; } } /* ===== Hero ===== */ .hero { position: relative; /* 100svh = kleine Viewport-Hoehe (Adressleiste sichtbar) → Hero ist sofort etwas kleiner als der scrollbare Inhalt, damit iOS nicht an der ersten vollen 100vh-Sektion "stecken" bleibt. */ min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 118px 0 150px; background: var(--bg); z-index: 2; /* Hero (inkl. Diagonal-Band) liegt über dem Wörter-Band darunter */ } /* Hero-Inhalt bündig zum Logo/Header (gleiche Container-Breite) */ .hero > .container { max-width: 1760px; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } .hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 85% 15%, rgba(12,241,250,0.20), transparent 42%), linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.46) 48%, rgba(0,0,0,0.72) 100%); } /* diagonaler Cyan-Streifen am Hero-Boden – beide Kanten parallel (−4°, wie die Loop-Wörter) */ .hero-cut { position: absolute; left: 0; right: 0; top: auto; bottom: calc(-1 * clamp(55px, 5.5vw, 90px) - 2cm); /* ~2cm tiefer geschoben */ z-index: 1; height: calc(7vw + clamp(180px, 15vw, 255px)); /* 7vw = Schräge (exakt ~−4°, parallel zur Loop-Schrift), Rest = Streifendicke (nochmal +50%) */ background: var(--accent); /* Ober- und Unterkante steigen beide um 7vw nach rechts → exakt parallel */ clip-path: polygon(0 7vw, 100% 0, 100% calc(100% - 7vw), 0 100%); pointer-events: none; } .hero .container { position: relative; z-index: 2; } .hero-eyebrow { text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.85rem; font-weight: 700; color: var(--accent); margin-bottom: 26px; } .hero-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 7vw, 6rem); line-height: 0.98; letter-spacing: -0.01em; text-transform: uppercase; margin-bottom: 28px; text-shadow: 0 2px 34px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.4); } .hero-title em { font-style: normal; color: var(--accent); } .hero-sub { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 2rem); line-height: 1.15; max-width: 720px; margin-bottom: 44px; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.45); } .hero-actions { display: flex; align-items: center; gap: clamp(20px, 4vw, 40px); flex-wrap: wrap; } /* ===== Schräges Outline-Wörter-Band (Marken-Motiv) ===== */ .words-band { position: relative; z-index: 1; /* liegt unter dem Hero, damit das Diagonal-Band über das Schwarz ragt */ background: var(--bg); /* mehr Abstand oben zur schrägen Cyan-Schräge (hero-cut), Unterkante wie gehabt */ padding: clamp(82px, 11vw, 145px) 0 clamp(50px, 8vw, 90px); overflow: hidden; } .words-rotate { transform: rotate(-4deg); } .words-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .words-track { display: flex; width: max-content; gap: 0; animation: wordscroll 38s linear infinite; will-change: transform; /* auf GPU auslagern → läuft auch bei Scroll-Last smooth */ } .words-track span { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 7vw, 6rem); text-transform: uppercase; letter-spacing: -0.01em; padding: 0 0.35em; color: transparent; -webkit-text-stroke: 2px var(--accent); white-space: nowrap; } .words-track span.fill { color: var(--accent); -webkit-text-stroke: 0; } @keyframes wordscroll { to { transform: translateX(-50%); } } /* ===== Leistungen – 2-spaltiges Aufklapp-Menü ===== */ .services { background: var(--bg); padding: clamp(60px, 9vw, 120px) 0 clamp(70px,10vw,130px); } .services > .container:first-child { margin-bottom: clamp(36px, 5vw, 60px); } /* 2-Spalten: links Video, rechts aufklappbare Leistungen */ .services-layout { display: grid; grid-template-columns: minmax(300px, 0.92fr) 1.08fr; gap: clamp(26px, 4vw, 58px); align-items: start; } .svc-video { position: sticky; top: 104px; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(150deg, #0c1a1d 0%, #050b0c 100%); } .svc-video-el { width: 100%; height: 100%; object-fit: cover; display: block; } .svc-video-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: radial-gradient(circle at 50% 42%, rgba(12,241,250,0.10), transparent 62%); } .svc-video-play { width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--accent); position: relative; transition: transform .3s, box-shadow .3s; } .svc-video-play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%); border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var(--accent); } .svc-video:hover .svc-video-play { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(12,241,250,0.10); } .svc-video-label { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; color: var(--muted); } .svc-list { display: flex; flex-direction: column; gap: 14px; overflow: hidden; } .svc-cta { align-self: flex-start; margin-top: clamp(8px, 1.5vw, 18px); } /* Leistungen: jede Karte einzeln nacheinander seitlich einschieben (Web + Handy) */ .svc-slide { opacity: 0; transform: translateX(64px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; } .svc-slide.in { opacity: 1; transform: none; } /* Desktop: alle Karten gleichzeitig sichtbar → per Verzögerung kaskadieren */ .svc-list .svc-slide:nth-child(1) { transition-delay: 0s; } .svc-list .svc-slide:nth-child(2) { transition-delay: .1s; } .svc-list .svc-slide:nth-child(3) { transition-delay: .2s; } .svc-list .svc-slide:nth-child(4) { transition-delay: .3s; } .svc-list .svc-slide:nth-child(5) { transition-delay: .4s; } .svc-list .svc-slide:nth-child(6) { transition-delay: .5s; } /* Handy: Karten erscheinen ohnehin nacheinander beim Scrollen → keine Extra-Verzögerung */ @media (max-width: 760px) { .svc-list .svc-slide { transition-delay: 0s !important; } } @media (prefers-reduced-motion: reduce) { .svc-slide { opacity: 1 !important; transform: none !important; } } @media (max-width: 860px) { .services-layout { grid-template-columns: 1fr; } .svc-video { position: static; aspect-ratio: 720 / 1232; } } .svc { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); transition: border-color .3s, background .3s; } .svc.open { border-color: var(--accent); } .svc-head { width: 100%; display: flex; align-items: center; gap: 18px; padding: clamp(20px,2.4vw,28px) clamp(20px,2.4vw,28px); background: transparent; border: 0; cursor: pointer; text-align: left; } .svc-num { font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--accent); } .svc-name { flex: 1; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 2.1rem); letter-spacing: -0.01em; color: #fff; transition: color .25s, transform .35s cubic-bezier(.16,1,.3,1); } /* Ãœberschrift schiebt sich bei Hover/Klick nach rechts (wie in der ersten Version) */ .svc-head:hover .svc-name { color: var(--accent); transform: translateX(12px); } .svc.open .svc-name { color: var(--accent); transform: translateX(12px); } .svc-plus { position: relative; width: 22px; height: 22px; flex: 0 0 auto; } .svc-plus::before, .svc-plus::after { content: ""; position: absolute; background: var(--accent); transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .3s; } .svc-plus::before { left: 0; top: 10px; width: 22px; height: 2px; } .svc-plus::after { left: 10px; top: 0; width: 2px; height: 22px; } .svc.open .svc-plus::after { transform: rotate(90deg); opacity: 0; } /* smoothes Aufklappen via grid-template-rows */ .svc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.16,1,.3,1); } .svc.open .svc-panel { grid-template-rows: 1fr; } .svc-panel-inner { overflow: hidden; min-height: 0; } /* Aufklapp-Inhalt: Text + Kategorie-Bild (gestapelt) */ .svc-body { display: flex; flex-direction: column; gap: 16px; padding: 0 clamp(18px,2vw,26px) clamp(20px,2.4vw,28px); } .svc-body p { color: #fff; font-size: 1rem; line-height: 1.6; margin: 0; } .svc-img { width: 100%; max-height: 230px; object-fit: cover; display: block; border-radius: 8px; border: 1px solid var(--line); } @media (max-width: 760px) { .svc-img { max-height: 180px; } } /* ===== Ãœber uns ===== */ .about { padding: clamp(80px, 12vw, 150px) 0; background: var(--bg); position: relative; } /* Medien-Block mit plakativer Wortmarke, die über das Bild/Video ragt */ .about-media { position: relative; margin-top: clamp(28px, 4vw, 48px); margin-bottom: clamp(76px, 9vw, 140px); } .about-media-inner { /* Box-Proportion minimal BREITER als der A-viewBox (2056/992 = 2.0726) → das SVG wird bei „meet" exakt nach HÖHE eingepasst (kein vertikaler Slack mehr) → Unter- UND Oberkante immer pixelbündig, unabhängig von der Browserbreite. Der winzige Rest-Slack wandert nach LINKS (xMax pinnt rechts) und ist als türkiser Freiraum unsichtbar. Behebt den 1px-Spalt. */ aspect-ratio: 2056 / 990; border-radius: 10px; overflow: hidden; background: var(--accent); border: 0; /* kein Rahmen → SVG schließt unten/rechts wirklich bündig mit der Box ab */ } .about-media-inner img, .about-media-inner video { width: 100%; height: 100%; object-fit: cover; display: block; } .about-media-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, rgba(12,241,250,0.08), transparent 62%); } /* === Scroll-gekoppeltes A-Emblem (ersetzt Platzhalter) – Box/Layout bleibt 1:1 === */ .about-emblem { position: absolute; inset: 0; --q: 0; background: var(--accent); /* Box-Hintergrund dauerhaft Türkis */ overflow: hidden; /* Fragmente, die außerhalb starten, werden vom Kasten beschnitten */ } /* SVG füllt die ganze Box; das A sitzt im viewBox rechtsbündig (x=1064..2056 bei Breite 2116), links bleibt bewusst Freiraum für eine ausgewogene Komposition */ .emblem-svg { width: 100%; height: 100%; display: block; } /* Skalierung beider Schenkel um das gemeinsame Symbol-Zentrum (1560,496 im viewBox) → wirkt wie ein zusammenhängendes Symbol, das aus einem größeren Raum auf Endgröße schrumpft */ .emblem-piece { fill: #000; will-change: transform; transform-box: view-box; transform-origin: 1560px 496px; } /* Bewegung + Skalierung DIREKT an --q (0..1) gekoppelt – keine CSS-transition → bleibt exakt stehen, sobald der Scroll stoppt, und läuft beim Weiterscrollen nahtlos weiter. q=0: Fragment groß & weit außerhalb (aus unterschiedlichen Richtungen); q=1: exakte Endform. */ .emblem-left { transform: translate(calc((1 - var(--q)) * -780px), calc((1 - var(--q)) * 760px)) /* von unten-links */ rotate(calc((1 - var(--q)) * -10deg)) scale(calc(1 + (1 - var(--q)) * 1.55)); } .emblem-right { transform: translate(calc((1 - var(--q)) * -1180px), calc((1 - var(--q)) * -360px)) /* von oben-links quer durch den Freiraum */ rotate(calc((1 - var(--q)) * 9deg)) scale(calc(1 + (1 - var(--q)) * 1.75)); } @media (prefers-reduced-motion: reduce) { .emblem-left, .emblem-right { transform: none; } } .about-wordmark { position: absolute; left: clamp(8px, 1.5vw, 24px); bottom: clamp(-42px, -4.6vw, -88px); margin: 0; font-family: var(--font-head); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 12vw, 9.5rem); line-height: 0.82; letter-spacing: -0.04em; color: #fff; text-shadow: 0 12px 50px rgba(0,0,0,0.55); pointer-events: none; } .about-wordmark span { color: var(--accent); } /* Intro-Text links, 3 Aufklapp-Elemente rechts */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: start; margin-top: 0; } .about-lead { font-size: clamp(1.2rem, 1.9vw, 1.6rem); color: #fff; line-height: 1.45; font-weight: 500; max-width: 32ch; } /* minimalistisches Akkordeon mit gestrichelten Trennlinien (Stil wie 1030.agency) */ .faq { display: flex; flex-direction: column; } .faq-item { border-bottom: 1px dashed rgba(255,255,255,0.26); } .faq-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(20px, 2.4vw, 30px) 2px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-head); font-weight: 800; letter-spacing: -0.01em; font-size: clamp(1.2rem, 2vw, 1.65rem); color: #fff; transition: color .25s; } .faq-head:hover { color: var(--accent); } .faq-ico { position: relative; width: 20px; height: 20px; flex: 0 0 auto; } .faq-ico::before, .faq-ico::after { content: ""; position: absolute; background: var(--accent); transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .3s; } .faq-ico::before { left: 0; top: 9px; width: 20px; height: 2px; } .faq-ico::after { left: 9px; top: 0; width: 2px; height: 20px; } .faq-item.open .faq-ico::after { transform: rotate(90deg); opacity: 0; } .faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.16,1,.3,1); } .faq-item.open .faq-panel { grid-template-rows: 1fr; } .faq-panel-inner { overflow: hidden; min-height: 0; } .faq-body { padding: 0 0 clamp(20px, 2.4vw, 28px); color: var(--muted); font-size: 1.02rem; line-height: 1.6; max-width: 48ch; margin: 0; } /* ===== Projekte – kompaktes Raster ===== */ .projects { background: var(--bg); color: #fff; padding: clamp(80px, 12vw, 150px) 0; overflow: hidden; } .projects-head { margin-bottom: clamp(40px, 6vw, 72px); text-align: right; } .projects-head .big-title { color: #fff; } /* horizontaler Loop der Projektkarten – vollbreit, läuft endlos, pausiert bei Hover */ .project-marquee { overflow: hidden; margin-bottom: clamp(48px, 7vw, 110px); /* mehr Luft zum nächsten Abschnitt */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .project-track { display: flex; width: max-content; padding-inline: clamp(10px, 1.6vw, 22px); animation: projscroll 55s linear infinite; will-change: transform; transform: translateZ(0); } /* Loop läuft auch beim Hover weiter (kein Pausieren) */ @keyframes projscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .project-card { position: relative; display: block; flex: 0 0 auto; width: clamp(248px, 23vw, 330px); aspect-ratio: 4/5; margin-right: clamp(14px, 1.6vw, 22px); border-radius: 0; overflow: hidden; background: linear-gradient(150deg, var(--accent), #06181a 80%); border: 1.5px solid var(--accent); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; } .project-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--img, none) center / cover no-repeat; transition: transform .6s cubic-bezier(.16,1,.3,1); } .project-card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.45), transparent 40%); } /* kein Hover-Zoom/Lift über den Projektbildern (auch Desktop) */ .projects-cta { margin-top: clamp(36px, 5vw, 56px); } .projects-cta--bottom { display: none; } /* nur auf dem Handy sichtbar (unter dem Loop) */ @media (prefers-reduced-motion: reduce) { .project-track { animation: none; } } /* Auf Touch-Geräten kein Zoom/Hebe-Effekt beim Berühren der Projektbilder */ @media (hover: none) { .project-card:hover::before { transform: none; } .project-card:hover { transform: none; box-shadow: none; } } /* ===== WOW – interaktive WebGL-Energie ===== */ .wow { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; } .wow-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } .wow.no-webgl .wow-canvas { background: radial-gradient(circle at 50% 45%, rgba(12,241,250,0.28), #000 70%); } .wow::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 38%, rgba(0,0,0,0.6) 100%); } .wow-content { position: relative; z-index: 2; text-align: center; padding: 60px 24px; } .wow-content .kicker { justify-content: center; color: #fff; } .wow-title { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.0; letter-spacing: -0.01em; color: #fff; margin-bottom: 36px; text-shadow: 0 6px 50px rgba(0,0,0,0.6); } /* „Bereit?"-Button (WOW): schwarzer Text, etwas größer, ohne Pfeil */ .wow .btn-pill { color: #000; font-size: 1.12rem; padding: 19px 46px; } /* beim Hover füllt sich der Button schwarz → Text muss Cyan werden (sonst schwarz auf schwarz) */ .wow .btn-pill:hover { color: var(--accent); } .wow-hint { margin-top: 30px; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); } /* „beweg die Maus" nur mit Maus zeigen – auf Touch/Handy ausblenden */ @media (hover: none) { .wow-hint { display: none; } } /* ===== CTA – Cyan-Block mit diagonalem Schnitt ===== */ .cta { background: var(--accent); padding: clamp(90px, 13vw, 175px) 0 clamp(110px, 15vw, 200px); clip-path: polygon(0 4.5vw, 100% 0, 100% 100%, 0 100%); } .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .cta .big-title { color: #000; } .cta .btn-pill { background: #000; color: #fff; } .cta .btn-pill:hover { background: #fff; color: #000; } /* ===== Referenzen (2 gegenläufige Zeilen, weiße Logos) ===== */ .refs { position: relative; background: var(--bg); padding: clamp(90px, 13vw, 160px) 0 clamp(110px,15vw,190px); overflow: hidden; } /* (Hintergrundbild aus Referenzen entfernt) */ .refs > .container, .refs > .logo-rows { position: relative; z-index: 1; } .refs .big-title { color: #fff; margin-bottom: clamp(44px, 6vw, 72px); max-width: 1000px; } /* Referenz-Logos: 2 gegenläufige Zeilen, farbige Originale auf weißen Kacheln (~6 sichtbar) */ .logo-rows { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 28px); } .logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .logo-track { display: flex; align-items: center; width: max-content; will-change: transform; transform: translateZ(0); } .logo-track--left { animation: logoscroll-left 48s linear infinite; } .logo-track--right { animation: logoscroll-right 48s linear infinite; } /* Loop erst starten, wenn alle Logos geladen sind → kein Flackern/Abbrechen/Ausblenden beim Laden */ .logo-track { animation-play-state: paused; } .logos-ready .logo-track { animation-play-state: running; } /* Logo-Loop läuft auch beim Hover weiter (kein Pausieren) */ @keyframes logoscroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes logoscroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* weiße Logos, transparent (ohne Kachel), großzügig verteilt */ .logo-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: clamp(58px, 6vw, 98px); margin-right: clamp(44px, 6vw, 104px); } .logo-item img { max-height: 100%; width: auto; max-width: clamp(185px, 18vw, 285px); object-fit: contain; opacity: 1; transition: opacity .3s ease, transform .3s ease; } .logo-item:hover img { opacity: 1; transform: translateY(-4px) scale(1.05); } @media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } } /* ===== Kontakt – breit, eckig, modern ===== */ .contact { position: relative; /* --p (0..1) wird per JS EXAKT an die Scrollposition gekoppelt (keine Zeit-Animation). Alle Farben unten interpolieren via color-mix von „schwarz-Zustand" (p=0) zu „türkis" (p=1). */ --p: 0; --ct-ink: color-mix(in srgb, #052824 calc(var(--p) * 100%), #ffffff); /* Haupttext weiß → dunkel */ --ct-soft: color-mix(in srgb, #0a302b calc(var(--p) * 100%), var(--muted)); /* Fließtext muted → dunkel */ --ct-dim: color-mix(in srgb, #0e3a34 calc(var(--p) * 100%), #5b656b); /* Platzhalter */ --ct-line: color-mix(in srgb, #000000 calc(var(--p) * 100%), var(--line)); /* Linien/Rahmen → bei Türkis 100% schwarz blickdicht */ --ct-accent: color-mix(in srgb, #052824 calc(var(--p) * 100%), var(--accent)); /* Akzent cyan → dunkel */ --ct-btn-bg: color-mix(in srgb, #04201c calc(var(--p) * 100%), var(--accent)); /* Button-Fläche */ --ct-btn-tx: #ffffff; /* Button-Text immer weiß (User-Wunsch) */ background: color-mix(in srgb, var(--accent) calc(var(--p) * 100%), var(--bg)); /* Hintergrund schwarz → türkis */ color: var(--ct-ink); padding: clamp(110px, 14vw, 200px) 0 clamp(80px, 12vw, 160px); border-top: 1px solid rgba(12,241,250,0.5); /* dünne türkise Trennlinie, volle Breite */ } /* Kontakt-Bereich über fast die gesamte Breite (Formular streckt sich, Ãœberschrift bleibt schmal) */ .contact > .container { position: relative; z-index: 1; max-width: min(1760px, 94vw); } .contact-head { max-width: 820px; margin-bottom: clamp(36px, 5vw, 60px); } .contact .big-title { color: #fff; margin-bottom: 22px; } .contact-lead { font-size: clamp(1.1rem, 1.7vw, 1.45rem); color: var(--muted); line-height: 1.55; } /* Special-Effekt: cyaner Glanz, der durch den Text wandert */ .fx-shine { background: linear-gradient(100deg, #0CF1FA 0%, #0CF1FA 38%, #ffffff 50%, #0CF1FA 62%, #0CF1FA 100%); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: fxshine 4.5s linear infinite; } @keyframes fxshine { 0% { background-position: 200% center; } 100% { background-position: -60% center; } } @media (prefers-reduced-motion: reduce) { .fx-shine { animation: none; } } /* Kontaktformular – randlos & clean, türkise Linien, im Raster ausgerichtet */ .contact-form { background: none; border: 0; border-radius: 0; padding: clamp(30px, 4vw, 50px) 0 0; border-top: 1px solid var(--line); } /* Name + E-Mail links gestapelt, Nachricht rechts (gleich hoch) */ .form-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(26px, 4vw, 64px); align-items: stretch; } .form-col { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); } .field { margin: 0; padding: 0; } .field--msg { display: flex; flex-direction: column; } .field label { display: block; font-family: var(--font-head); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; color: var(--accent); } /* randlose Felder – nur eine dezente türkise Linie unter dem jeweiligen Textbereich */ .field input, .field textarea { width: 100%; font-family: inherit; font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: #fff; padding: 14px 2px; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; background: transparent; transition: border-color .3s, box-shadow .3s; } .field--msg textarea { flex: 1 1 auto; } .field input::placeholder, .field textarea::placeholder { color: #5b656b; } .field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--accent); box-shadow: 0 1.5px 0 0 var(--accent); } .field textarea { resize: vertical; min-height: 150px; } .form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(30px, 4vw, 52px); } .contact-direct { color: var(--muted); font-size: 0.95rem; } .contact-direct a { color: var(--accent); font-weight: 600; } .contact-direct a:hover { text-decoration: underline; } .form-note { margin-top: 16px; color: var(--accent); font-weight: 600; width: 100%; } .form-note.error { color: #ff6b6b; } @media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* === Kontakt-Elemente folgen dem scroll-gekoppelten Hintergrund (p=0 schwarz → p=1 türkis) === */ .contact .kicker { color: var(--ct-accent); } .contact .big-title { color: var(--ct-ink); } /* „etwas Großartiges": folgt demselben Scroll – p=0 Cyan → p=1 Weiß (hebt sich auf Türkis ab) */ .contact .fade-accent { color: color-mix(in srgb, #ffffff calc(var(--p) * 100%), var(--accent)); } .contact .contact-lead { color: var(--ct-soft); } .contact .field label { color: var(--ct-accent); } .contact .field input, .contact .field textarea { color: var(--ct-ink); border-bottom-color: var(--ct-line); } .contact .field input::placeholder, .contact .field textarea::placeholder { color: var(--ct-dim); } .contact .field input:focus, .contact .field textarea:focus { border-bottom-color: var(--ct-accent); box-shadow: 0 1.5px 0 0 var(--ct-accent); } .contact .contact-form { border-top-color: var(--ct-line); } .contact .contact-direct { color: var(--ct-soft); } .contact .contact-direct a { color: var(--ct-accent); } .contact .form-note { color: var(--ct-accent); } /* Button: Fläche/Text interpolieren; Hover invertiert sauber (p=0: Cyan→schwarz füllt; p=1: dunkel→cyan füllt) */ .contact .btn-pill { background: var(--ct-btn-bg); color: var(--ct-btn-tx); border-color: var(--ct-btn-bg); } .contact .btn-pill::after { background: color-mix(in srgb, var(--accent) calc(var(--p) * 100%), #000000); } .contact .btn-pill:hover { color: var(--ct-accent); } /* ===== Brushed/gerissene Ãœbergangskante (Kontakt → Footer) ===== */ .footer-brush { position: relative; z-index: 4; height: clamp(62px, 8.5vw, 104px); margin-top: calc(-1 * clamp(34px, 5.2vw, 58px)); /* greift tief in den Türkis-Bereich darüber */ margin-bottom: -1px; /* nahtloser Anschluss an den Footer */ line-height: 0; pointer-events: none; } .footer-brush svg { display: block; width: 100%; height: 100%; } /* Footer (ab Brushed-Bereich) schiebt sich beim Scrollen von unten nach oben an seine Position. will-change/translateZ erzwingt eine eigene Compositor-Ebene → der teure feTurbulence-Filter des Brushes wird EINMAL gerastert und nur per GPU verschoben (sonst rastert der Browser ihn pro Frame neu → blockiert den Main-Thread → der scrollgekoppelte Kontakt-Farbverlauf ruckelt). */ .footer-brush, .footer { transition: transform 1s cubic-bezier(.16,1,.3,1); will-change: transform; } .footer-brush.rise-init, .footer.rise-init { transform: translateY(90px); } @media (prefers-reduced-motion: reduce) { .footer-brush.rise-init, .footer.rise-init { transform: none; } } /* ===== Footer ===== */ .footer { background: #000; color: #fff; padding: 70px 0 44px; border-top: 0; position: relative; z-index: 3; } .footer-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; } .footer .logo { color: #fff; font-size: 1.5rem; } .footer-nav { display: flex; gap: 28px; flex-wrap: wrap; } .footer-nav a { color: var(--muted); font-size: 1rem; transition: color .2s; } .footer-nav a:hover { color: var(--accent); } .footer-copy { width: 100%; color: rgba(255,255,255,0.4); font-size: 0.9rem; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); } .footer-social { display: flex; gap: 14px; } .footer-social a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(12,241,250,0.12); color: var(--accent); transition: background .2s, transform .2s, color .2s; } .footer-social a:hover { background: var(--accent); color: #000; transform: translateY(-3px); } .footer-social svg { width: 20px; height: 20px; fill: currentColor; } /* ===== Rechtsseiten ===== */ .legal { padding: 150px 0 100px; background: var(--bg); } .legal-inner { max-width: 820px; } .legal-back { display: inline-block; font-weight: 600; color: var(--accent); margin-bottom: 28px; } .legal-back:hover { color: #fff; } .legal h1 { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 28px; color: #fff; } .legal-body { color: #cfd6da; } .legal-body h2 { font-family: var(--font-head); font-weight: 700; color: var(--accent); font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: -0.01em; margin: 40px 0 14px; } .legal-body p { margin-bottom: 16px; color: #b9c1c6; } .legal-body ul { margin: 0 0 16px 22px; color: #b9c1c6; } .legal-body li { margin-bottom: 8px; } .legal-body a { color: var(--accent); text-decoration: underline; word-break: break-word; } .legal-body hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; } .legal-body .meta-block { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; margin-bottom: 24px; } .legal-body .meta-block p { margin-bottom: 4px; color: #fff; } .legal-stand { margin-top: 36px; font-style: italic; color: var(--muted); } /* ===== WhatsApp-Float (in CI: Cyan statt Grün) ===== */ .wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 190; width: 62px; height: 62px; border-radius: 50%; background: var(--accent); color: #000; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(12,241,250,0.35); transition: transform .2s, background .2s; } .wa-float:hover { transform: translateY(-3px) scale(1.05); background: #fff; } .wa-float svg { width: 31px; height: 31px; fill: currentColor; } @media (max-width: 720px) { .wa-float { width: 44px; height: 44px; right: 16px; bottom: 16px; } .wa-float svg { width: 22px; height: 22px; } } /* ===== Cookie-Hinweis ===== */ .cookie-banner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200; width: min(700px, calc(100% - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.6); display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .cookie-banner p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; flex: 1; min-width: 220px; } .cookie-banner p a { color: var(--accent); text-decoration: underline; } .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; } .cookie-actions button { font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; padding: 11px 22px; border-radius: 0; cursor: pointer; transition: transform .2s, background .2s, color .2s, border-color .2s; } .cookie-actions button:hover { transform: translateY(-2px); } .cookie-accept { background: var(--accent); color: #000; border: 0; } .cookie-accept:hover { background: #fff; } .cookie-decline { background: transparent; color: #fff; border: 1.5px solid var(--line); } .cookie-decline:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 720px) { body.cookie-open .wa-float { bottom: 168px; } } /* ===== Werte (Jung · Dynamisch · Kreativ) ===== */ .values { position: relative; overflow: hidden; padding: clamp(60px, 9vw, 120px) 0; background: var(--bg); text-align: center; } .values-dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .values .container { position: relative; z-index: 1; } .values-intro { max-width: 780px; margin: 0 auto 44px; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.5; } .values-row { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 32px); flex-wrap: nowrap; white-space: nowrap; } .value { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -0.01em; line-height: 1; color: #fff; transition: color .3s, transform .3s cubic-bezier(.16,1,.3,1); } .value:nth-of-type(2) { color: var(--accent); } .value:hover { color: var(--accent); transform: translateY(-6px); } /* Trenner zwischen den Werten: auf der Webversion „//" in Türkis (statt Punkt) */ .value-dot { flex: 0 0 auto; width: auto; height: auto; background: none; border-radius: 0; font-family: var(--font-head); font-weight: 800; line-height: 1; font-size: clamp(2rem, 5vw, 4rem); color: var(--accent); } .value-dot::before { content: "//"; display: inline-block; } /* ===== Cursor-Glow (subtiler Effekt) ===== */ .cursor-glow { position: fixed; top: 0; left: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; z-index: 90; opacity: 0; background: radial-gradient(circle, rgba(12,241,250,0.10), transparent 62%); mix-blend-mode: screen; transition: opacity .4s ease; will-change: transform; } @media (hover: none) { .cursor-glow { display: none; } } /* ===== Fancy-Effekte ===== */ /* Scroll-Fortschrittsbalken */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300; background: var(--accent); box-shadow: 0 0 12px rgba(12,241,250,0.7); } /* gestaffeltes Einblenden der Leistungs-Karten */ .service-grid .svc:nth-child(2) { transition-delay: .07s; } .service-grid .svc:nth-child(3) { transition-delay: .04s; } .service-grid .svc:nth-child(4) { transition-delay: .11s; } .service-grid .svc:nth-child(5) { transition-delay: .08s; } .service-grid .svc:nth-child(6) { transition-delay: .15s; } .service-grid .svc:nth-child(7) { transition-delay: .12s; } /* ===== Scroll-Reveal (verschiedene Richtungen, Blur, Tilt, Stagger) ===== */ .reveal { opacity: 0; transition: opacity 2.3s cubic-bezier(.16,1,.3,1), transform 2.3s cubic-bezier(.16,1,.3,1), filter 2.3s ease; will-change: opacity, transform; } .reveal.up { transform: translateY(50px); } .reveal.down { transform: translateY(-50px); } .reveal.left { transform: translateX(-66px); } .reveal.right { transform: translateX(66px); } .reveal.zoom { transform: scale(.90); } .reveal.tilt { transform: translateY(44px) rotate(-3deg); } .reveal.blur { filter: blur(16px); } .reveal:not(.up):not(.down):not(.left):not(.right):not(.zoom):not(.tilt) { transform: translateY(30px); } .reveal.visible { opacity: 1; transform: none; filter: none; } /* gestaffeltes Nacheinander-Einblenden */ .reveal.d1 { transition-delay: .22s; } .reveal.d2 { transition-delay: .44s; } .reveal.d3 { transition-delay: .66s; } .reveal.d4 { transition-delay: .88s; } .reveal.d5 { transition-delay: 1.1s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } } /* ===== Responsive ===== */ @media (max-width: 980px) { .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 44px; align-items: start; } .ref-grid { grid-template-columns: repeat(2, 1fr); } /* Auf schmalen Screens kein horizontaler Reveal-Versatz (sonst ragt der Inhalt seitlich raus und man kann nach links/rechts swipen). Solange noch nicht sichtbar: nur vertikal einblenden. */ .reveal.left:not(.visible), .reveal.right:not(.visible) { transform: translateY(40px); } } @media (max-width: 640px) { /* schlankerer Header-Balken auf dem Handy */ .nav-wrap { height: 66px; } .logo .logo-img { height: 56px; } /* Header-Logo linksbündig mit den Headlines darunter (SVG hat internen Links-Weißraum ~27px bei 56px) */ .site-header .logo .logo-img { margin-left: -27px; } /* Vollbild-Menü: füllt den ganzen Bildschirm unter dem Header. WICHTIG: Höhe per Viewport-Einheit (nicht bottom:0), weil der Header ein backdrop-filter hat und damit zum Containing-Block für position:fixed-Kinder wird → mit bottom:0 würde das Menü auf die ~66px Header-Höhe einsacken (kollabiert). 100dvh-66px ist unabhängig davon. */ .nav { position: fixed; top: 66px; left: 0; right: 0; bottom: auto; height: calc(100vh - 66px); height: calc(100dvh - 66px); background: #000; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 24px 32px calc(28px + env(safe-area-inset-bottom)); border-bottom: 0; overflow-y: auto; /* iOS-Safari testet ein per transform weggeschobenes position:fixed-Element teils an seiner LAYOUT-Position auf Treffer → das geschlossene Vollbild-Menue wuerde sonst alle Touch-/Scroll- Gesten abfangen (Seite nicht scrollbar). pointer-events:none nimmt es komplett aus dem Hit-Test. */ pointer-events: none; transform: translateY(-110%); transition: transform .55s cubic-bezier(.16, 1, .3, 1); } .nav.open { transform: none; pointer-events: auto; } /* Menüpunkte = große Ãœberschriften, die beim Öffnen gestaffelt seitlich einschieben */ .nav a { padding: 14px 0; color: #fff; font-size: clamp(2rem, 9vw, 2.9rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; opacity: 0; transform: translateX(-46px); transition: opacity .5s ease, transform .55s cubic-bezier(.16, 1, .3, 1); } .nav.open a { opacity: 1; transform: none; } .nav.open a:nth-child(1) { transition-delay: .10s; } .nav.open a:nth-child(2) { transition-delay: .17s; } .nav.open a:nth-child(3) { transition-delay: .24s; } .nav.open a:nth-child(4) { transition-delay: .31s; } .nav.open a:nth-child(5) { transition-delay: .38s; } .nav.open a:nth-child(6) { transition-delay: .45s; } /* Unterstrich-Linie unter den Menüpunkten im Vollbild nicht anzeigen */ .nav a::after { display: none; } .nav .nav-cta { margin-top: 20px; align-self: flex-start; color: var(--accent); } .nav-toggle { display: flex; } .ref-grid { grid-template-columns: 1fr 1fr; } .service-row:hover .service-name { transform: none; } .cta { clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); } /* ===== Handy: seitliche Reveal-Bewegung (links/rechts) wie auf dem Desktop ===== Auf dem Handy waren horizontale Reveals bisher deaktiviert (nur vertikal), damit nichts seitlich rausragt. Stattdessen jetzt jede Sektion horizontal beschneiden (overflow-x:clip, overflow-y bleibt sichtbar) → die Wörter/Blöcke schieben sich seitlich rein, ohne dass man swipen kann. Greift erst ≤640px (da ist .svc-video bereits statisch → kein Sticky-Konflikt). Tablets 641–980px behalten den sicheren vertikalen Reveal aus dem 980px-Block darüber. */ /* ENTFERNT (verursachte Scroll-Probleme auf echten Handys): section{overflow-x:clip} + seitliche translateX-Reveals. Reveals nutzen jetzt wieder den rein vertikalen Effekt (translateY) aus dem 980px-Block oben. */ /* Outline-Wörter im Loop auf dem Handy dünner umranden (wie im Vorbild) */ .words-track span { -webkit-text-stroke-width: 1px; font-size: clamp(3.3rem, 14.7vw, 5.5rem); } /* ===== Mobile Typo-Hierarchie: dominante Headlines, kleinere Begleittexte/Buttons ===== */ /* Headline-Breite wie auf dem Desktop (SemiExpanded 112.5%) – nicht mehr schmaler stauchen */ .hero-title, .big-title, .wow-title { font-stretch: 112.5%; } /* „Perfekte" Größe wiederhergestellt: 8.2vw. Das einzelne Wort „HERAUSRAGEND" passt dank der 20px-Container-Polsterung in den Viewport (ragt höchstens leicht in die Polsterung, wird aber NICHT abgeschnitten) – maximale Größe ohne Worttrennung/Umbruch. */ /* „etwas größer" als die bisherigen 8.2vw → 8.4vw. Begrenzt durch das unteilbare Wort „herausragend" (Geräte-Faktor ~11 mit font-stretch); theoret. Max ~8.59vw. Headless rendert den Text BREITER als das echte Gerät → nicht headless feinkalibrieren, Gerätewerte nutzen. */ .hero-title { font-size: clamp(1.7rem, 8.4vw, 3.8rem); line-height: 0.98; margin-bottom: 22px; } .big-title { font-size: clamp(1.4rem, 7.5vw, 3.4rem); } /* Kontakt-Headline: keine Worttrennung; „Genug gescrollt." darf umbrechen */ .contact .big-title { font-size: clamp(1.5rem, 8vw, 3.2rem); } .contact .big-title .nowrap { white-space: normal; } /* Kontakt-Inhalt volle Breite → exakt so linksbündig wie „Referenzen" */ .contact > .container { max-width: 100%; } /* kleiner, damit jede Phrase (z. B. „deiner Marke", „den Auftritt,") sicher in EINE Zeile passt → 5 Zeilen */ .wow-title { font-size: clamp(1.5rem, 7.6vw, 3.2rem); line-height: 1.04; } .br-mobile { display: inline; } /* „den sie" / „verdient." auf dem Handy getrennt */ /* Begleittexte & CTAs proportional kleiner → klare Hierarchie mit Fokus auf den Headlines */ .hero-eyebrow { font-size: 0.72rem; margin-bottom: 18px; } /* „Wir sorgen dafür…" füllt ~die Headline-Breite, EINE Zeile (realer Faktor ~25, daher 3.4vw, nicht 4.1vw – sonst Ãœberlauf); kein nowrap → auf Mini-Geräten bricht er statt zu überlaufen */ /* etwas größer, bleibt aber EINE Zeile. Kalibrierung: 3.4vw füllt ~95%, 4.1vw lief über → 3.5vw ≈ 98% (klein bleibt der Schritt, weil bei 1 Zeile kaum Platz ist). */ .hero-sub { font-size: clamp(0.84rem, 3.5vw, 1.1rem); margin-bottom: 30px; } .hero-actions { gap: 14px; } .btn, .btn-pill { font-size: 0.78rem; padding: 14px 24px; letter-spacing: 0.05em; } .link-arrow { font-size: clamp(0.85rem, 3.4vw, 1rem); } .contact-lead { font-size: clamp(1.02rem, 4.2vw, 1.22rem); } /* Footer auf Handy: Logo + Links + Social linksbündig untereinander */ .footer-wrap { flex-direction: column; align-items: flex-start; gap: 22px; } .values-intro { font-size: clamp(0.95rem, 3.5vw, 1.1rem); } .about-lead { font-size: clamp(1rem, 4vw, 1.2rem); } .svc-name { font-size: clamp(1.05rem, 4.6vw, 1.45rem); } .faq-head { font-size: clamp(1.05rem, 4.2vw, 1.35rem); } .svc-body p { font-size: 0.92rem; } .kicker { font-size: 0.8rem; } /* A-Emblem-Box auf dem Handy: quadratisch; per JS enger viewBox "1000 -36 1028 1028" → A füllt die Box GROSS und schließt UNTEN bündig ab (viewBox-Unterkante = A-Fuß bei y=992, da Clip-Rect h=992). Skalierungs-Origin = A-Center (1560,496) − viewBox-min (1000,-36) = (560,532). */ .about-media-inner { aspect-ratio: 1 / 1; } .emblem-piece { transform-origin: 560px 532px; } /* „Bereit?"-Button auf dem Handy etwas größer als Standard, aber nicht zu wuchtig */ .wow .btn-pill { font-size: 0.95rem; padding: 16px 34px; } /* Wortmarke auf Handy groß & mittig – sitzt auf der Box-Unterkante & durchbricht sie leicht (wie Desktop) */ .about-wordmark { font-size: clamp(2.4rem, 11.5vw, 5rem); left: 0; right: 0; bottom: -0.16em; text-align: center; text-shadow: 0 8px 30px rgba(0,0,0,0.7); } /* Wörter-Band: auf dem Handy ragt der türkise hero-cut-Balken weit herunter und würde die cyan-umrandeten Wörter überdecken (cyan auf cyan = unsichtbar). Mehr Platz oben, damit die Schräg-Schrift wieder klar unter dem Balken auf Schwarz erscheint. */ .words-band { padding-top: 140px; } /* Footer-Logo (SVG auf der Startseite) exakt linksbündig mit den Links/Text darunter (Box saß ~16px zu weit rechts) */ .footer .logo .logo-img { margin-left: -23px; } /* Referenz-Logo-Loop auf dem Handy schneller (kürzere Strecke → sonst wirkt er langsamer als Desktop) */ .logo-track--left, .logo-track--right { animation-duration: 26s; } /* Kein Rand-Ausblenden der Referenz-Logos auf dem Handy (Maske kostet Performance + lässt Logos „ausblenden") */ .logo-marquee { -webkit-mask-image: none; mask-image: none; } /* „Mehr auf Instagram" auf dem Handy unter die Bildreihe statt darüber */ .projects-cta--top { display: none; } .projects-cta--bottom { display: block; margin-top: clamp(24px, 6vw, 36px); } } /* Werte „Jung · Dynamisch · Kreativ": sobald die Zeile zu eng wird, untereinander stapeln – groß & zentriert, ohne die Trennpunkte (die nur auf einer durchgehenden Zeile Sinn ergeben). */ @media (max-width: 760px) { .values-row { flex-direction: column; gap: clamp(20px, 6vw, 38px); white-space: normal; } /* Trennlinien auf dem Handy: dünn, lang, mit deutlich mehr Abstand zu den Wörtern */ .values-row .value-dot { width: clamp(54px, 16vw, 78px); height: 1.5px; border-radius: 0; background: var(--accent); margin: clamp(12px, 4vw, 24px) 0; } .values-row .value-dot::before { content: none; } .value { font-size: clamp(1.5rem, 8.5vw, 2.8rem); line-height: 1.05; } }