@charset "UTF-8"; /* ============================================================ WIR FÜR UELZEN — bewegte Wortmarke Das Auge öffnet sich, danach zieht sich der Schriftzug auf. Reine SVG- und CSS-Bewegung: keine Videodatei, kein fremder Server, keine Bibliothek — und damit weiterhin kein Cookie-Banner. 🔴 DREI REGELN, die hier eingebaut sind. Bitte nicht aushebeln: 1. NICHTS WIRD BLOCKIERT. Der Grundzustand dieser Datei ist „alles sichtbar". Die Bewegung hängt an der Klasse `einzug` am -Element. Fehlt JavaScript, ist die Seite vollständig da — sie bewegt sich nur nicht. 2. BEWEGUNG IST ABWÄHLBAR. Wer im Betriebssystem „Bewegung reduzieren" gesetzt hat, bekommt gar keine. Manche Menschen reagieren auf Bewegung mit Übelkeit; das ist keine Spielerei, sondern Barrierefreiheit. 3. NUR EINMAL JE BESUCH. Das Skript merkt sich den Ablauf in der sessionStorage. Beim vierten Klick auf eine Unterseite wäre jede Eröffnungssequenz eine Zumutung. Gesamtdauer rund 1,15 Sekunden. Alles darüber wirkt wie Werbung. ============================================================ */ /* ---------- Aufbau der Wortmarke ---------- Zwei Ebenen übereinander, beide aus vorhandenen Dateien: .voll = logo.svg (viewBox 219 159 4605 756) .auge = auge.svg (viewBox 219 159 1326 756) Es ist dieselbe Zeichnung, nur anders beschnitten. Bei gleicher Höhe ist deshalb auch der Maßstab gleich und das Auge sitzt in beiden Ebenen exakt an derselben Stelle. Genau das macht die Übergabe von der einen zur anderen Ebene unsichtbar. */ .logo-marke{ position:relative; display:block; line-height:0 } .logo-marke .auge-marke{ position:absolute; left:0; top:0; opacity:0; /* im Ruhezustand unsichtbar, damit nichts doppelt steht */ pointer-events:none; } /* ============================================================ Ab hier bewegt sich etwas — aber nur mit der Klasse `einzug`. ============================================================ */ /* ---- Das Auge öffnet sich ---- */ .einzug .logo-marke .auge-marke{ transform-origin:50% 50%; animation:wfu-auge-auf 560ms cubic-bezier(.34,1.4,.64,1) both; } @keyframes wfu-auge-auf{ 0% { opacity:1; transform:scaleY(.04) } 60% { opacity:1; transform:scaleY(1.07) } 82% { opacity:1; transform:scaleY(1) } 100% { opacity:0; transform:scaleY(1) } } /* ---- Der Schriftzug zieht sich von links auf ---- Beginnt bewusst, während das Auge noch aufgeht: Die beiden Bewegungen greifen ineinander, statt nacheinander abzulaufen. Nacheinander wirkt zäh. */ .einzug .logo-marke .voll{ animation:wfu-zug-auf 700ms cubic-bezier(.22,.61,.36,1) 260ms both; } @keyframes wfu-zug-auf{ from { clip-path:inset(0 100% 0 0) } to { clip-path:inset(0 0 0 0) } } /* ---- Der Hero-Text zieht sanft nach ---- 🔴 Diese Zeiten sind bewusst knapp. Am Bildschirm nachgemessen: Beim ersten Entwurf (620 ms Dauer, bis 390 ms Versatz) war der Hero eine knappe Sekunde lang leer — für einen Wahlauftritt zu lang. Jetzt ist die Überschrift nach rund 0,55 s vollständig da und die ganze Staffel nach 0,7 s durch. Wer eine Adresse eintippt, will lesen, keine Vorstellung sehen. Bitte nicht wieder strecken. */ .einzug .hero .marke-zeile, .einzug .hero h1, .einzug .hero .vorspann, .einzug .hero .tasten, .einzug .hero-bild{ animation:wfu-aufziehen 460ms cubic-bezier(.22,.61,.36,1) both; } .einzug .hero .marke-zeile{ animation-delay:50ms } .einzug .hero h1 { animation-delay:100ms } .einzug .hero .vorspann { animation-delay:170ms } .einzug .hero .tasten { animation-delay:240ms } .einzug .hero-bild { animation-delay:120ms } @keyframes wfu-aufziehen{ from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } } /* ---- Das große Auge im Hintergrund atmet einmal auf ---- Sehr langsam und sehr leise. Es liegt bei 6 % Deckkraft; würde man es kräftiger bewegen, zöge es den Blick vom Text weg. */ .einzug .hero .auge{ animation:wfu-wasserzeichen 1500ms cubic-bezier(.22,.61,.36,1) 120ms both; } @keyframes wfu-wasserzeichen{ from { opacity:0; transform:scale(1.1) rotate(-2deg) } to { opacity:.06; transform:scale(1) rotate(0) } } /* ============================================================ 🔴 Sicherheitsnetz: Wer „Bewegung reduzieren" eingestellt hat, bekommt keine — auch dann nicht, wenn die Klasse `einzug` versehentlich doch gesetzt wurde. ============================================================ */ @media (prefers-reduced-motion: reduce){ .einzug .logo-marke .voll, .einzug .logo-marke .auge-marke, .einzug .hero .marke-zeile, .einzug .hero h1, .einzug .hero .vorspann, .einzug .hero .tasten, .einzug .hero-bild, .einzug .hero .auge{ animation:none !important; opacity:inherit; transform:none; clip-path:none; } .logo-marke .auge-marke{ opacity:0 } .hero .auge{ opacity:.06 } }