/* ========================================================================== style.css — das AUSSEHEN der feelflux-STUDIO-Seite ========================================================================== WAS IST DIESE DATEI? CSS bestimmt, WIE die Bausteine aus index.html aussehen: Farben, Schriften, Größen, Abstände, Positionen, Animationen. WIE LIEST MAN CSS? Ein Block sieht immer so aus: .name { ← WEN style ich? (".name" = alles mit class="name") eigenschaft: wert; ← WAS stelle ich ein? (z. B. color: white;) } Alles zwischen den Schrägstrich-Stern-Zeichen (so wie dieser Text hier) ist ein KOMMENTAR — der Browser ignoriert ihn. AUFBAU DIESER DATEI: 1. DESIGN-TOKENS ← HIER (und NUR hier) Farben & Fonts ändern 2. Basis / Reset 3. Hintergrund (Gradient + Lottie) 4. Header / Logo 5. Stage-Layout (Drittel-Komposition) + Werkschau-Wheel 6. Rechte Spalte: Showreel + Aufklapp-Boxen (about / collaborate) 7. Kinetischer Text-Reveal (nur Werkschau-Captions) 8. Footer (fixiert, immer sichtbar) 9. Mobile / Reduced Motion Anhang: Klassen für spätere Unterseiten (work.html) ========================================================================== */ /* ========================================================================== 1. DESIGN-TOKENS — ZENTRALE STELLE FÜR FARBEN & FONTS ========================================================================== "Tokens" sind benannte Werte (CSS-Variablen). Sie beginnen immer mit zwei Bindestrichen: --color-bg. Überall im Rest der Datei steht dann var(--color-bg) statt einer festen Farbe. Vorteil: Du änderst eine Farbe HIER EINMAL, und sie ändert sich überall auf der Seite. Die Werte sind von der Live-Site feelflux-studio.de übernommen. ":root" bedeutet: Diese Variablen gelten für die gesamte Seite. ========================================================================== */ :root { /* ---------- FARBEN --------------------------------------------------- */ /* Farben als Hex-Code (#RRGGBB) oder rgba(Rot, Grün, Blau, Deckkraft). Bei rgba heißt 0.70 → 70 % sichtbar, 30 % durchscheinend. */ --color-bg: #000000; /* Seitenhintergrund: Schwarz */ --color-accent: #3D1DFF; /* Brand-Blau (Logo, Glühen) */ --color-text: #FFFFFF; /* Fließtext: Weiß */ --color-text-muted: rgba(255, 255, 255, 0.70); /* gedämpftes Weiß (Captions) */ --color-heading: #FFFFFF; /* Überschriften: Weiß */ --color-surface: rgba(0, 0, 0, 0.30); /* Glas-Boxen: durchscheinend */ --color-border: rgba(255, 255, 255, 0.05); /* hauchzarte helle Ränder */ /* Der Farbverlauf der Live-Site: unten Brand-Blau, das nach oben (bei 19 % der Höhe) in Schwarz übergeht. "0deg" = Verlauf zeigt nach oben. */ --gradient-page: linear-gradient(0deg, var(--color-accent) 0%, var(--color-bg) 19%); /* ---------- SCHATTEN -------------------------------------------------- */ /* box-shadow/text-shadow-Werte: (x-Versatz, y-Versatz, Weichzeichnung, Farbe). Die Werte stammen von der Live-Site. */ --shadow-heading: 0px 10px 20px rgba(0, 0, 0, 0.4); /* unter Überschriften */ --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.25); /* unter Boxen/Medien */ /* ---------- SCHRIFT --------------------------------------------------- */ /* "Raleway" wird in index.html von Google Fonts geladen. Die Namen danach (system-ui, sans-serif) sind Notfall-Ersatzschriften, falls Raleway mal nicht lädt. */ --font-heading: "Raleway", system-ui, -apple-system, sans-serif; --font-body: "Raleway", system-ui, -apple-system, sans-serif; --weight-heading: 800; /* Schriftstärke Überschriften (800 = sehr fett) */ --weight-body: 400; /* Schriftstärke Fließtext (400 = normal) */ /* ---------- SCHRIFTGRÖSSEN -------------------------------------------- */ /* rem = relative Einheit (1rem ≈ 16px), px = feste Pixel. */ --text-size-body: 0.95rem; /* Fließtext (~15px) */ --text-size-heading: 30px; /* Titel der Aufklapp-Boxen (Live-Wert) */ --text-size-caption: 0.85rem; /* Werk-Beschriftungen (~13,5px) */ --text-size-copy: 14px; /* Text in den Aufklapp-Boxen (Live-Wert) */ /* ---------- BEWEGUNG --------------------------------------------------- */ /* Eine "Easing-Kurve" beschreibt das Tempo einer Animation über die Zeit. Diese hier startet zügig und klingt ganz weich aus — wirkt edel statt mechanisch. Wird für alle Übergänge benutzt. */ --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); --duration-reveal: 0.9s; /* Dauer des Schärfe-Effekts im Wheel */ /* ---------- LAYOUT-MASSE ----------------------------------------------- */ /* vw/vh = Prozent der Fensterbreite/-höhe (50vw = halbe Fensterbreite). min(a, b) nimmt automatisch den kleineren der beiden Werte — so bleibt z. B. das Wheel auf Riesenmonitoren bei max. 520px. */ --radius: 10px; /* Rundung der Ecken überall */ --wheel-width: min(520px, 30vw); /* Breite des Werkschau-Wheels */ --wheel-height: 78vh; /* Höhe des Wheels (78 % der Fensterhöhe) */ --info-width: min(560px, 32vw); /* Breite der rechten Spalte */ --footer-space: 70px; /* Freiraum für den fixierten Footer */ } /* ========================================================================== 2. BASIS / RESET ========================================================================== Browser bringen eigene Standard-Abstände mit (z. B. Rand um die Seite). Ein "Reset" setzt alles auf null, damit die Seite überall gleich aussieht. ========================================================================== */ /* "*" trifft ALLE Elemente. ::before/::after sind unsichtbare Zusatz-Elemente, die CSS erzeugen kann (nutzen wir für den Hintergrund-Verlauf). */ *, *::before, *::after { /* border-box: Breitenangaben VERSTEHEN sich inkl. Innenabstand und Rahmen — macht Rechnen mit Größen viel einfacher. */ box-sizing: border-box; margin: 0; /* Außenabstand aller Elemente auf null */ padding: 0; /* Innenabstand aller Elemente auf null */ } html { /* Sanftes Gleiten (statt Springen) beim Klick auf Anker-Links, z. B. wenn das Logo nach oben scrollt. */ scroll-behavior: smooth; } /* "Screenreader only": Element bleibt für Google & Screenreader lesbar, ist aber optisch unsichtbar (Standard-Technik, kein verbotenes display:none — das würde Google ignorieren). Wird für die

genutzt. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Grundeinstellungen für die ganze Seite */ body { background-color: var(--color-bg); /* Grundfarbe: Schwarz */ color: var(--color-text); /* Standard-Textfarbe: Weiß */ font-family: var(--font-body); /* Standard-Schrift: Raleway */ font-weight: var(--weight-body); /* Standard-Stärke: normal */ font-size: var(--text-size-body); /* Standard-Größe */ line-height: 1.6; /* Zeilenabstand: 160 % — luftig */ -webkit-font-smoothing: antialiased; /* glattere Schrift auf Mac */ overflow-x: hidden; /* nie seitlich scrollen können */ } /* Bilder und Videos: nie breiter als ihr Container werden. display:block entfernt einen mini Leerraum, den Browser sonst unter Bildern lassen. */ img, video { display: block; max-width: 100%; } /* Alle Links (-Elemente) */ a { color: var(--color-text); /* weiß */ /* "transition" = weicher Übergang: Wenn sich die Deckkraft ändert (beim Hover unten), passiert das über 0,3 Sekunden statt abrupt. */ transition: opacity 0.3s var(--ease-smooth); } /* ":hover" = wenn der Mauszeiger darüber steht */ a:hover { opacity: 0.65; /* Link wird leicht durchscheinend → dezentes Feedback */ } /* ========================================================================== 3. HINTERGRUND — Farbverlauf + Lottie-Animation, beides fixiert ========================================================================== Zwei Schichten, beide über den ganzen Bildschirm gespannt und vom Scrollen unabhängig: Schicht 1 (ganz hinten): der Farbverlauf (blaues Glühen unten) Schicht 2 (davor): die Lottie-Animation Der restliche Seiteninhalt liegt über beiden. ========================================================================== */ /* Schicht 1: Der Farbverlauf. "body::before" erzeugt ein unsichtbares Extra-Element ganz hinten — so muss der Verlauf nicht auf dem body selbst liegen und bleibt beim Scrollen garantiert stehen. */ body::before { content: ""; /* Pflichtzeile: erschafft das Element */ position: fixed; /* "fixed" = klebt am Bildschirm, scrollt NICHT */ inset: 0; /* Kurzform für: oben/rechts/unten/links = 0, also volle Bildschirmfläche */ z-index: -1; /* Stapel-Reihenfolge: -1 = hinter allem */ background: var(--gradient-page); pointer-events: none; /* Mausklicks gehen durch das Element hindurch */ } /* Schicht 2: Halterung der Lottie-Animation (script.js füllt sie). */ #bg-anim { position: fixed; /* klebt ebenfalls am Bildschirm */ inset: 0; /* volle Fläche */ z-index: 0; /* vor dem Verlauf (-1), hinter dem Inhalt (1) */ pointer-events: none; /* nicht anklickbar — reine Deko */ overflow: hidden; /* nichts darf über den Rand hinausragen */ } /* Das SVG-Bild, das Lottie erzeugt, soll die Halterung komplett ausfüllen. "!important" übersteuert die Größen, die die Lottie-Bibliothek selbst setzen will. */ #bg-anim svg { width: 100% !important; height: 100% !important; } /* Header, Hauptinhalt und Footer bekommen z-index 1 → sie liegen VOR den beiden Hintergrund-Schichten (und bleiben klickbar). Damit z-index wirkt, braucht ein Element "position: relative". */ .site-header, main, .site-footer { position: relative; z-index: 1; } /* ========================================================================== 4. HEADER / LOGO (fixiert oben) ========================================================================== */ .site-header { position: fixed; /* klebt oben am Bildschirm, scrollt nicht mit */ top: 0; /* ganz oben … */ left: 0; /* … über die volle Breite */ right: 0; z-index: 10; /* liegt über allem anderen Inhalt */ display: flex; /* Flexbox: modernes Anordnungs-Werkzeug */ justify-content: flex-start; /* Logo linksbündig (Position s. .logo-link) */ padding: 1.5rem 0; /* Innenabstand nur oben/unten */ /* Der Header spannt sich über die ganze Breite — damit er nicht unsichtbar Klicks abfängt, lassen wir Klicks durch ihn hindurch … */ pointer-events: none; } /* … nur das Logo selbst bleibt klickbar. Der margin-left ist DIESELBE Rechnung wie bei .werkschau (Abschnitt 5): dadurch beginnt das Logo exakt an der LINKEN KANTE des Werkschau-Wheels. Ändert sich die Wheel-Position, wandert das Logo automatisch mit. */ .logo-link { pointer-events: auto; display: block; margin-left: calc(33.333vw - (var(--wheel-width) / 2)); } /* Das Logo-Bild (breiter Schriftzug): Wir geben nur die HÖHE vor, die Breite ergibt sich automatisch im richtigen Verhältnis. clamp(MIN, FLEXIBEL, MAX) = "4 % der Fensterbreite, aber nie kleiner als 32px und nie größer als 52px". */ .logo { height: clamp(32px, 4vw, 52px); width: auto; } /* ========================================================================== 5. STAGE-LAYOUT (Drittel-Komposition) + WERKSCHAU-WHEEL ========================================================================== Der Bildschirm wird gedanklich in 3 gleich breite Spalten geteilt: - Mitte des Werkschau-Wheels → linke Trennlinie (33,3 % der Breite) - Mitte der rechten Spalte → rechte Trennlinie (66,6 % der Breite) Für Handy/Hochformat wird das in Abschnitt 9 überschrieben. ========================================================================== */ .stage { display: flex; /* Kinder (Wheel + rechte Spalte) nebeneinander */ align-items: center; /* … und vertikal mittig zueinander */ min-height: 100vh; /* Stage ist mindestens einen Bildschirm hoch */ /* Innenabstände, damit nichts unter Logo oder Footer gerät: */ padding-top: clamp(5.5rem, 10vh, 7.5rem); padding-bottom: var(--footer-space); } /* ---- Das Werkschau-Wheel: ein isoliertes Scroll-Fenster --------------- */ .werkschau { width: var(--wheel-width); /* DIE DRITTEL-POSITIONIERUNG: Abstand von links = 33,3 % der Fensterbreite MINUS die halbe Wheel-Breite. Ergebnis: Die MITTE des Wheels liegt exakt auf der linken Drittel-Linie. calc() = "rechne das im Browser aus". */ margin-left: calc(33.333vw - (var(--wheel-width) / 2)); height: var(--wheel-height); /* overflow-y: auto → wird der Inhalt höher als das Fenster, entsteht INTERNES Scrollen. Dadurch scrollt man im Wheel, ohne dass sich die restliche Seite bewegt (Scroll passiert nur, wenn der Mauszeiger über dem Wheel steht). */ overflow-y: auto; /* Verhindert das "Durchrutschen": Ist das Wheel-Scrollen am Ende angekommen, scrollt NICHT automatisch die Seite dahinter weiter. */ overscroll-behavior: contain; /* Weiches Nachrollen mit Schwung auf iPhones/iPads. */ -webkit-overflow-scrolling: touch; /* DER FADE OBEN/UNTEN: Eine "Maske" macht das Wheel am oberen und unteren Rand durchsichtig. Lies den Verlauf so: ganz oben (0 %) unsichtbar, ab 18 % voll sichtbar, bis 82 % voll sichtbar, ganz unten (100 %) wieder unsichtbar. Dadurch faden die Werke sanft aus, statt hart abgeschnitten zu werden. (Die Zeile mit -webkit- ist dieselbe Angabe für Safari/ältere Browser — beide Zeilen immer gemeinsam ändern!) */ -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 18%, black 82%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 18%, black 82%, transparent 100% ); /* Scroll-BALKEN ausblenden (Scrollen selbst geht weiter!) — diese Zeile ist für Firefox … */ scrollbar-width: none; } /* … und dieser Block für Chrome/Safari/Edge. */ .werkschau::-webkit-scrollbar { display: none; } /* ---- Die Werk-Liste im Wheel ------------------------------------------- */ .werkschau-track { display: flex; /* Flexbox … */ flex-direction: column; /* … untereinander statt nebeneinander */ gap: 3rem; /* Abstand zwischen den Werken (~48px) */ /* Kein Anfangs-/End-Puffer nötig: die Werke laufen als Endlos-Loop (script.js rendert mehrere Sätze und springt unbemerkt um). */ } /* ---- Ein einzelnes Werk ------------------------------------------------- */ /* Alle Werke sind gleich BREIT (100 % der Wheel-Breite); die HÖHE ergibt sich aus dem Format des Bildes/Videos — Hochformate sind also höher, Querformate flacher. */ .werk { width: 100%; } /* Das Bild oder Video eines Werks */ .werk-media { width: 100%; height: auto; /* Höhe = automatisch im Verhältnis */ background: var(--color-surface); /* dunkle Fläche, solange es lädt */ border: 1px solid var(--color-border); /* hauchdünner heller Rand */ border-radius: var(--radius); /* abgerundete Ecken */ box-shadow: var(--shadow-card); /* weicher Schatten */ } /* Platzhalter-Box: erscheint automatisch, wenn eine Werk-Datei fehlt. Zeigt den erwarteten Dateipfad an — praktisch beim Einpflegen. */ .werk-missing { display: flex; align-items: center; /* Text vertikal mittig */ justify-content: center; /* Text horizontal mittig */ text-align: center; padding: 1rem; background: var(--color-surface); border: 1px dashed var(--color-border); /* gestrichelt = "hier fehlt was" */ border-radius: var(--radius); color: var(--color-text-muted); font-size: var(--text-size-caption); letter-spacing: 0.08em; /* Buchstaben leicht gesperrt */ text-transform: uppercase; /* ALLES GROSS */ } /* Beschriftung unter dem Werk */ .werk-info { padding-top: 0.8rem; /* kleiner Abstand zum Bild */ } .werk-title { font-family: var(--font-heading); color: var(--color-heading); font-size: 1rem; font-weight: 600; /* halbfett */ letter-spacing: 0.02em; } .werk-caption { color: var(--color-text-muted); /* gedämpft — Titel bleibt führend */ font-size: var(--text-size-caption); margin-top: 0.2rem; } /* ========================================================================== 6. RECHTE SPALTE — Showreel + Aufklapp-Boxen (wie Live-Site) ========================================================================== Rechtsbündig. Die Boxen zeigen nur den Titel; beim Hover klappt der Text auf (Desktop). Auf Touch-Geräten öffnet/schließt ein Tipp auf die Box (script.js setzt dafür die Klasse .is-open). ========================================================================== */ .info-column { width: var(--info-width); /* DRITTEL-POSITIONIERUNG TEIL 2: Die Spalte beginnt im Code direkt rechts vom Wheel. Dieser Abstand schiebt sie so weit, dass ihre MITTE auf der rechten Drittel-Linie (66,6 vw) landet. (Rechnung: 66,6vw minus Wheel-Ende minus halbe Spaltenbreite.) */ margin-left: calc(33.333vw - ((var(--wheel-width) + var(--info-width)) / 2)); display: flex; flex-direction: column; /* Showreel und Boxen untereinander */ gap: 28px; /* Abstand dazwischen (Live-Site-Wert) */ text-align: right; /* alles rechtsbündig, wie im Original */ color: var(--color-text); } /* ---- Showreel: das eingebettete YouTube-Video --------------------------- */ .showreel-embed { position: relative; /* Bezugsrahmen für das iframe darin (s. u.) */ width: 100%; /* Erzwingt Kino-Format: Breite zu Höhe immer 16:9 — egal wie breit der Bildschirm ist. */ aspect-ratio: 16 / 9; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; /* schneidet die YouTube-Ecken rund ab */ box-shadow: var(--shadow-card); } /* Das iframe (der eigentliche YouTube-Player) füllt die Box exakt aus. "absolute" = positioniert relativ zur Box darüber. */ .showreel-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; /* kein grauer Standard-Rahmen */ } /* ---- Die Aufklapp-Boxen (about / collaborate) --------------------------- */ /* Halterung: stapelt die Boxen untereinander */ #text-sections { display: flex; flex-direction: column; gap: 28px; } .hover-box { position: relative; cursor: pointer; /* Mauszeiger wird zur Hand → "hier kann man was" */ } /* Der immer sichtbare Titel ("about", "collaborate") */ .hover-title { margin: 0; font-family: var(--font-heading); font-size: var(--text-size-heading); font-weight: var(--weight-heading); /* sehr fett (800) */ text-transform: lowercase; /* erzwingt kleinschreibung */ line-height: 1; color: var(--color-heading); text-shadow: var(--shadow-heading); /* weicher Schatten dahinter */ transition: opacity 0.3s ease; } /* DIE AUFKLAPP-ANIMATION. Trick: Die Box ist ein Grid (Raster) mit EINER Zeile, deren Höhe von "0fr" (null) auf "1fr" (volle Inhaltshöhe) animiert wird. Vorteil gegenüber einfacheren Methoden: Es wird exakt auf die ECHTE Texthöhe animiert — dadurch wirkt die Bewegung gleichmäßig weich und nicht abgehackt. Drei Ebenen (script.js baut sie automatisch): .hover-copy = die animierte Grid-Zeile .hover-copy-inner = schneidet den Text beim Zuklappen ab .hover-copy-card = die sichtbare Glas-Karte mit dem Text */ .hover-copy { display: grid; grid-template-rows: 0fr; /* ZU-Zustand: Zeile hat Höhe null */ opacity: 0; /* … und ist unsichtbar */ transform: translateY(8px);/* … und liegt 8px zu tief (gleitet beim Öffnen also leicht nach oben) */ margin-top: 0; /* Welche Eigenschaften animiert werden und wie lange sie brauchen. Alle nutzen dieselbe weiche Kurve → ein Guss, kein Ruckeln. Aufklapp-TEMPO ändern? → diese Sekunden-Werte anpassen. */ transition: grid-template-rows 0.55s var(--ease-smooth), opacity 0.45s var(--ease-smooth), transform 0.55s var(--ease-smooth), margin 0.55s var(--ease-smooth); font-size: var(--text-size-copy); line-height: 1.45; text-align: right; color: var(--color-text); } /* Ebene 2: das Schneidewerkzeug. min-height: 0 erlaubt der Grid-Zeile, wirklich auf null zu schrumpfen; overflow: hidden versteckt den Text, der dabei "nicht mehr reinpasst". */ .hover-copy-inner { min-height: 0; overflow: hidden; } /* Ebene 3: die sichtbare "Glas-Karte" (Optik wie auf der Live-Site) */ .hover-copy-card { background: var(--color-surface); /* dunkel, durchscheinend */ border-radius: var(--radius); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); /* Der Milchglas-Effekt: verwischt, was HINTER der Karte liegt. (-webkit- ist wieder die Safari-Variante derselben Angabe.) */ -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 12px 16px; /* Innenabstand: 12px oben/unten, 16px seitlich */ } /* Absätze in der Karte: Abstand zwischen Absätzen, aber nicht nach dem letzten ("1em" = eine Zeilenhöhe). */ .hover-copy p { margin-bottom: 1em; } .hover-copy p:last-child { margin-bottom: 0; } /* Links in der Karte (z. B. die E-Mail-Adresse) */ .hover-copy a { color: var(--color-text); text-decoration: underline; } /* DER AUF-ZUSTAND. Zwei Wege führen dorthin: 1. Desktop: Maus steht über der Box (:hover) — nur auf Geräten, die echtes Hovern können (@media (hover: hover) schließt Touchscreens aus, wo "Hover" nur Frust erzeugt). 2. Touch: script.js setzt beim Antippen die Klasse "is-open". */ @media (hover: hover) { .hover-box:hover .hover-copy { grid-template-rows: 1fr; /* Zeile wächst auf volle Inhaltshöhe */ opacity: 1; /* wird sichtbar */ transform: translateY(0); /* gleitet auf Endposition */ margin-top: 12px; /* Abstand zum Titel entsteht weich */ } } .hover-box.is-open .hover-copy { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); margin-top: 12px; } /* ========================================================================== 7. KINETISCHER TEXT-REVEAL — NUR für die Werkschau-Beschriftungen ========================================================================== Ruhezustand: Titel/Caption eines Werks liegen leicht unscharf und minimal gesperrt "hinter Glas". Fährt die Maus über das Werk, gleitet der Text in den Fokus; beim Verlassen zurück. Läuft nur auf Geräten mit Maus (hover + feiner Zeiger) — auf Touchscreens ist der Text immer scharf. ========================================================================== */ @media (hover: hover) and (pointer: fine) { /* Ruhezustand (Klasse .kinetic sitzt auf Titel und Caption) */ .werk .kinetic { display: inline-block; /* nötig, damit transform wirkt */ filter: blur(5px); /* Unschärfe */ opacity: 0.55; /* halb durchscheinend */ letter-spacing: 0.12em; /* Buchstaben auseinandergezogen */ transform: translateY(0.15em); /* minimal abgesenkt */ /* alle vier Eigenschaften animieren, gleiche weiche Kurve: */ transition: filter var(--duration-reveal) var(--ease-smooth), opacity var(--duration-reveal) var(--ease-smooth), letter-spacing var(--duration-reveal) var(--ease-smooth), transform var(--duration-reveal) var(--ease-smooth); /* Tipp an den Browser: Diese Werte ändern sich gleich — schon mal für flüssige Wiedergabe vorbereiten. */ will-change: filter, letter-spacing, transform; } /* Hover-Zustand: Maus über dem Werk → Text kommt in den Fokus */ .werk.kinetic-trigger:hover .kinetic { filter: blur(0); /* scharf */ opacity: 1; /* voll sichtbar */ letter-spacing: normal; /* normale Buchstabenabstände */ transform: translateY(0); /* auf Normalposition */ } } /* ========================================================================== 8. FOOTER — fixiert an der unteren Bildschirmkante, immer sichtbar ========================================================================== Optik wie die Live-Site: klein, weiß, rechtsbündig. Inhalt (Icons, Links, Copyright) kommt aus content.js. ========================================================================== */ .site-footer { position: fixed; /* klebt am unteren Bildschirmrand … */ bottom: 0; left: 0; /* … über die volle Breite */ right: 0; z-index: 10; /* liegt über dem Seiteninhalt */ } .footer-inner { width: 100%; padding: 18px 40px; display: flex; /* alles in einer Reihe */ flex-wrap: wrap; /* darf bei Platzmangel umbrechen */ gap: 12px 18px; /* Abstand: 12px vertikal, 18px horizontal */ align-items: center; /* vertikal mittig zueinander */ justify-content: flex-end; /* alles nach RECHTS schieben */ color: var(--color-text); font-size: 13px; line-height: 1; } /* Die Link-Liste (Icons + Textlinks). "list-style: none" entfernt die Aufzählungspunkte, die