/* ========================================================================== Moritz Pahrmann VFX Artist Portfolio - Modern CSS ========================================================================== */ :root { /* ===== HAUPTFARBEN ===== */ --accent-color: #4ade80; /* Hauptakzentfarbe - Grün für Buttons und wichtige Elemente */ --accent-dark: #16a34a; /* Dunkle Akzentfarbe - Für Hover-Effekte bei grünen Elementen */ --accent-hover: #22c55e; /* Akzentfarbe beim Hover - Mittleres Grün für Hover-Zustände */ --accent-success: #10b981; /* Erfolgsfarbe - Teal Grün für Erfolgsmeldungen */ --modal-bg: rgba(26, 26, 26, 0.95); /* Modal Hintergrund - Semi-transparenter dunkler Hintergrund */ --primary-bg: #050505; /* Haupthintergrund - Schwarz für Hauptbereiche */ --pure-white: white; /* Reines Weiß - Für spezielle Hervorhebungen */ --white-solid: white; /* Hartkodiertes Weiß - Für Kompatibilität */ --quaternary-bg: #2c2c2c; /* Vierter Hintergrund - Heller Grau für UI-Elemente */ --secondary-bg: #1a1a1a; /* Sekundärer Hintergrund - Dunkelgrau für Abschnitte */ --tertiary-bg: #2c2c2c; /* Dritter Hintergrund - Mittelgrau für Karten und Container */ --transparent: transparent; /* Transparenz - Für transparente Bereiche */ --ultra-dark-bg: #0a0a0a; /* Ultra dunkler Hintergrund - Für tiefe Schatten */ /* ===== TEXTFARBEN ===== */ --text-black: #000000; /* Schwarzer Text - Für Text auf hellen Hintergründen */ --text-dark: #666666; /* Dunkler Text - Für weniger wichtige Textelemente */ --text-light: #cccccc; /* Heller Text - Für sekundäre Informationen */ --text-medium: #888; /* Mittlere Textfarbe - Für text-gray Elemente */ --text-muted: #888888; /* Gedämpfter Text - Für Platzhalter und deaktivierte Elemente */ --text-placeholder: #666; /* Placeholder Text - Für Eingabefelder Platzhalter */ --text-white: #ffffff; /* Weißer Text - Haupttextfarbe auf dunklem Hintergrund */ --text-secondary: #666; /* Sekundärer Text - Für weniger wichtige UI-Texte */ /* ===== HOVER-FARBEN ===== */ --hover-primary: #22c55e; /* Primärer Hover - Heller als normale Akzentfarbe */ --hover-secondary: #2c2c2c; /* Sekundärer Hover - Für dunkle Bereiche */ --hover-accent: #16a34a; /* Akzent Hover - Dunklere Akzentfarbe */ --hover-success: #15803d; /* Erfolg Hover - Dunkleres Grün */ --hover-warning: #f59e0b; /* Warnung Hover - Dunkleres Gelb */ --hover-danger: #dc2626; /* Gefahr Hover - Dunkleres Rot */ --hover-info: #2563eb; /* Info Hover - Dunkleres Blau */ --hover-light: #e5e7eb; /* Heller Hover - Für helle Bereiche */ --hover-card: #374151; /* Karten Hover - Für Karten-Elemente */ --hover-button: #059669; /* Button Hover - Spezifisch für Buttons */ --hover-link: #10b981; /* Link Hover - Für Textlinks */ --hover-bg-light: rgba(255, 255, 255, 0.15); /* Heller Hintergrund Hover */ --hover-bg-dark: rgba(0, 0, 0, 0.2); /* Dunkler Hintergrund Hover */ --hover-overlay: rgba(74, 222, 128, 0.1); /* Overlay Hover - Grüner Overlay */ /* ===== GLOW-FARBEN ===== */ --glow-primary: #4ade80; /* Primärer Glow - Hauptglow-Farbe */ --glow-secondary: #22c55e; /* Sekundärer Glow - Für sekundäre Elemente */ --glow-accent: #16a34a; /* Akzent Glow - Für Hervorhebungen */ --glow-success: #10b981; /* Erfolg Glow - Für Erfolgsmeldungen */ --glow-warning: #f59e0b; /* Warnung Glow - Für Warnungen */ --glow-danger: #ef4444; /* Gefahr Glow - Für Fehlermeldungen */ --glow-info: #3b82f6; /* Info Glow - Für Informationen */ --glow-white: #ffffff; /* Weißer Glow - Für spezielle Hervorhebungen */ --glow-neon-green: #39ff14; /* Neon Grün Glow - Für Neon-Effekte */ --glow-neon-blue: #00bfff; /* Neon Blau Glow - Für blaue Neon-Effekte */ --glow-neon-pink: #ff1493; /* Neon Pink Glow - Für rosa Neon-Effekte */ --glow-neon-cyan: #00ffff; /* Neon Cyan Glow - Für cyan Neon-Effekte */ --glow-neon-orange: #ff4500; /* Neon Orange Glow - Für orange Neon-Effekte */ --glow-soft: #4ade8090; /* Weicher Glow - Für subtile Effekte */ --glow-strong: #4ade80ff; /* Starker Glow - Für kräftige Effekte */ /* ===== RANDFARBEN ===== */ --border-dark: #333333; /* Dunkle Ränder - Für subtile Abgrenzungen */ --border-light: #555555; /* Helle Ränder - Für sichtbarere Abgrenzungen */ --border-medium: #444444; /* Mittlere Ränder - Standard Randfarbe */ --border-extra-dark: #333; /* Extra dunkle Ränder - Für sehr subtile UI-Elemente */ --border-extra-medium: #444; /* Extra mittlere Ränder - Für zusätzliche UI-Abgrenzungen */ --border-primary: #4ade80; /* Primärer Rand - Hauptakzentfarbe als Rand */ --border-secondary: #22c55e; /* Sekundärer Rand - Sekundäre Akzentfarbe */ --border-success: #10b981; /* Erfolg Rand - Für Erfolgsmeldungen */ --border-warning: #f59e0b; /* Warnung Rand - Für Warnungen */ --border-danger: #ef4444; /* Gefahr Rand - Für Fehlermeldungen */ --border-info: #3b82f6; /* Info Rand - Für Informationen */ --border-focus: #4ade80; /* Focus Rand - Für fokussierte Elemente */ --border-hover: #22c55e; /* Hover Rand - Für Hover-Zustände */ --border-active: #16a34a; /* Aktiver Rand - Für aktive Elemente */ --border-disabled: #6b7280; /* Deaktivierter Rand - Für deaktivierte Elemente */ --border-transparent: transparent; /* Transparenter Rand - Für unsichtbare Ränder */ --border-gradient: linear-gradient(135deg, #4ade80, #22c55e); /* Gradient Rand */ --border-glow: #4ade80; /* Glow Rand - Für leuchtende Ränder */ /* ===== LIKE BUTTON FARBEN ===== */ --like-btn-bg: transparent; /* Like Button Hintergrund - Transparenter Standard */ --like-btn-border: rgba(255, 255, 255, 0.3); /* Like Button Rand - Transparenter weißer Rand */ --like-btn-text: rgba(255, 255, 255, 0.7); /* Like Button Text - Gedämpfter weißer Text */ --like-btn-hover-border: rgba(255, 255, 255, 0.6); /* Like Button Hover Rand */ --like-btn-hover-bg: rgba(255, 255, 255, 0.1); /* Like Button Hover Hintergrund */ --like-btn-hover-text: #ffffff; /* Like Button Hover Text - Reines Weiß */ --like-btn-liked-border: #ef4444; /* Like Button Geliked Rand - Rot */ --like-btn-liked-bg: rgba(239, 68, 68, 0.15); /* Like Button Geliked Hintergrund */ --like-btn-liked-text: #ef4444; /* Like Button Geliked Text - Rot */ --like-btn-icon-fill: #ef4444; /* Like Button Icon Füllung - Rot */ --like-btn-icon-stroke: #ef4444; /* Like Button Icon Umriss - Rot */ --like-btn-modal-bg: linear-gradient(135deg, var(--white-alpha-10), var(--white-alpha-10)); /* Modal Like Button Hintergrund */ --like-btn-modal-border: var(--white-alpha-30); /* Modal Like Button Rand */ --like-btn-modal-text: var(--text-white); /* Modal Like Button Text */ --like-btn-modal-hover-bg: linear-gradient(135deg, var(--white-alpha-20), var(--white-alpha-20)); /* Modal Hover Hintergrund */ --like-btn-modal-hover-border: var(--text-white); /* Modal Hover Rand */ --like-btn-modal-liked-bg: linear-gradient(135deg, var(--red-error-20), rgba(220, 38, 38, 0.2)); /* Modal Geliked Hintergrund */ --like-btn-modal-liked-border: var(--error-bg); /* Modal Geliked Rand */ --like-btn-modal-liked-text: var(--error-bg); /* Modal Geliked Text */ --like-btn-count-bg: var(--white-alpha-20); /* Like Count Hintergrund */ --like-btn-count-text: var(--text-white); /* Like Count Text */ --like-btn-count-liked-bg: var(--red-error-20); /* Like Count Geliked Hintergrund */ --like-btn-count-liked-text: var(--error-bg); /* Like Count Geliked Text */ /* ===== LOADING SCREEN FARBEN ===== */ --loading-bg: linear-gradient(135deg, var(--primary-bg) 0%, #0a0a0a 50%, var(--primary-bg) 100%); /* Loading Hintergrund */ --loading-cube-bg: var(--gradient-primary); /* Loading Cube Hintergrund */ --loading-cube-border: var(--accent-color); /* Loading Cube Rand */ --loading-cube-shadow: rgba(74, 222, 128, 0.5); /* Loading Cube Schatten */ --loading-particle-bg: var(--accent-color); /* Loading Partikel Hintergrund */ --loading-particle-shadow: var(--accent-color); /* Loading Partikel Schatten */ --loading-text-color: var(--accent-color); /* Loading Text Farbe */ --loading-glitch-red: var(--glitch-red); /* Loading Glitch Rot */ --loading-glitch-cyan: var(--glitch-cyan); /* Loading Glitch Cyan */ --loading-bar-bg: var(--green-alpha-20); /* Loading Bar Hintergrund */ --loading-bar-fill: linear-gradient(90deg, var(--accent-color), var(--accent-hover), var(--accent-color)); /* Loading Bar Füllung */ --loading-bar-shadow: rgba(74, 222, 128, 0.5); /* Loading Bar Schatten */ --loading-overlay-bg: rgba(0, 0, 0, 0.9); /* Loading Overlay Hintergrund */ --loading-spinner-primary: var(--accent-color); /* Loading Spinner Primär */ --loading-spinner-secondary: var(--accent-hover); /* Loading Spinner Sekundär */ --loading-spinner-tertiary: var(--accent-dark); /* Loading Spinner Tertiär */ /* ===== VIDEO SELECTION FARBEN ===== */ --video-bg: var(--tertiary-bg); /* Video Hintergrund */ --video-overlay: rgba(0, 0, 0, 0.3); /* Video Overlay */ --video-overlay-hover: var(--black-alpha-40); /* Video Overlay Hover */ --video-play-btn-bg: rgba(74, 222, 128, 0.95); /* Video Play Button Hintergrund */ --video-play-btn-text: var(--primary-bg); /* Video Play Button Text */ --video-play-btn-shadow: rgba(74, 222, 128, 0.4); /* Video Play Button Schatten */ --video-play-btn-hover-bg: var(--accent-color); /* Video Play Button Hover Hintergrund */ --video-play-btn-hover-shadow: rgba(74, 222, 128, 0.6); /* Video Play Button Hover Schatten */ --video-control-bg: var(--tertiary-bg); /* Video Control Hintergrund */ --video-control-border: var(--accent-color); /* Video Control Rand */ --video-control-text: var(--accent-color); /* Video Control Text */ --video-control-hover-bg: var(--accent-color); /* Video Control Hover Hintergrund */ --video-control-hover-text: var(--primary-bg); /* Video Control Hover Text */ --video-control-hover-shadow: rgba(74, 222, 128, 0.3); /* Video Control Hover Schatten */ --video-counter-bg: var(--green-alpha-10); /* Video Counter Hintergrund */ --video-counter-border: rgba(74, 222, 128, 0.3); /* Video Counter Rand */ --video-counter-text: var(--accent-color); /* Video Counter Text */ --video-thumbnail-bg: var(--tertiary-bg); /* Video Thumbnail Hintergrund */ --video-thumbnail-border: transparent; /* Video Thumbnail Rand */ --video-thumbnail-hover-border: var(--accent-color); /* Video Thumbnail Hover Rand */ --video-thumbnail-hover-shadow: rgba(74, 222, 128, 0.3); /* Video Thumbnail Hover Schatten */ --video-thumbnail-active-border: var(--accent-color); /* Video Thumbnail Aktiv Rand */ --video-thumbnail-active-shadow: rgba(74, 222, 128, 0.5); /* Video Thumbnail Aktiv Schatten */ --video-thumbnail-active-bg: var(--green-alpha-10); /* Video Thumbnail Aktiv Hintergrund */ --video-duration-bg: rgba(0, 0, 0, 0.8); /* Video Dauer Hintergrund */ --video-duration-text: var(--text-white); /* Video Dauer Text */ --video-gallery-bg: var(--black-alpha-40); /* Video Gallery Hintergrund */ --video-gallery-border: var(--green-alpha-20); /* Video Gallery Rand */ --video-gallery-title-color: var(--accent-color); /* Video Gallery Titel Farbe */ --video-gallery-close-bg: var(--red-alpha-10); /* Video Gallery Schließen Hintergrund */ --video-gallery-close-text: var(--error-color); /* Video Gallery Schließen Text */ --video-gallery-close-hover-bg: var(--red-alpha-20); /* Video Gallery Schließen Hover Hintergrund */ --video-gallery-close-hover-text: var(--error-light); /* Video Gallery Schließen Hover Text */ /* ===== SOCIAL MEDIA HOVER FARBEN ===== */ --social-icon-bg: var(--white-alpha-05); /* Social Icon Hintergrund */ --social-icon-border: var(--white-alpha-10); /* Social Icon Rand */ --social-icon-text: var(--text-white); /* Social Icon Text */ --social-icon-hover-bg: var(--green-alpha-10); /* Social Icon Hover Hintergrund */ --social-icon-hover-border: rgba(74, 222, 128, 0.3); /* Social Icon Hover Rand */ --social-icon-hover-text: var(--accent-color); /* Social Icon Hover Text */ --social-icon-hover-shadow: rgba(74, 222, 128, 0.3); /* Social Icon Hover Schatten */ --social-facebook-hover: #1877f2; /* Facebook Hover Farbe */ --social-twitter-hover: #1da1f2; /* Twitter Hover Farbe */ --social-instagram-hover: #e4405f; /* Instagram Hover Farbe */ --social-linkedin-hover: #0077b5; /* LinkedIn Hover Farbe */ --social-youtube-hover: #ff0000; /* YouTube Hover Farbe */ --social-github-hover: #333333; /* GitHub Hover Farbe */ --social-discord-hover: #5865f2; /* Discord Hover Farbe */ --social-twitch-hover: #9146ff; /* Twitch Hover Farbe */ --social-tiktok-hover: #000000; /* TikTok Hover Farbe */ --social-pinterest-hover: #bd081c; /* Pinterest Hover Farbe */ /* ===== TEXT SHADOW FARBEN ===== */ --text-shadow-light: rgba(255, 255, 255, 0.5); /* Heller Text Schatten */ --text-shadow-dark: rgba(0, 0, 0, 0.8); /* Dunkler Text Schatten */ --text-shadow-medium: rgba(0, 0, 0, 0.5); /* Mittlerer Text Schatten */ --text-shadow-soft: rgba(0, 0, 0, 0.3); /* Weicher Text Schatten */ --text-shadow-strong: rgba(0, 0, 0, 0.9); /* Starker Text Schatten */ --text-shadow-glow: rgba(74, 222, 128, 0.5); /* Glow Text Schatten */ --text-shadow-glow-strong: rgba(74, 222, 128, 0.8); /* Starker Glow Text Schatten */ --text-shadow-glow-soft: rgba(74, 222, 128, 0.3); /* Weicher Glow Text Schatten */ --text-shadow-neon: rgba(57, 255, 20, 0.6); /* Neon Text Schatten */ --text-shadow-blue: rgba(59, 130, 246, 0.5); /* Blauer Text Schatten */ --text-shadow-red: rgba(239, 68, 68, 0.5); /* Roter Text Schatten */ --text-shadow-yellow: rgba(245, 158, 11, 0.5); /* Gelber Text Schatten */ --text-shadow-purple: rgba(147, 51, 234, 0.5); /* Violetter Text Schatten */ --text-shadow-pink: rgba(236, 72, 153, 0.5); /* Rosa Text Schatten */ --text-shadow-orange: rgba(249, 115, 22, 0.5); /* Oranger Text Schatten */ --text-shadow-white: rgba(255, 255, 255, 0.8); /* Weißer Text Schatten */ --text-shadow-black: rgba(0, 0, 0, 0.8); /* Schwarzer Text Schatten */ --text-shadow-outline: 1px 1px 0 rgba(0, 0, 0, 0.8); /* Outline Text Schatten */ --text-shadow-emboss: 1px 1px 0 rgba(255, 255, 255, 0.3); /* Emboss Text Schatten */ --text-shadow-inset: inset 1px 1px 0 rgba(0, 0, 0, 0.3); /* Inset Text Schatten */ /* ===== BOX-SHADOW-FARBEN (ERWEITERT) ===== */ --shadow-primary: rgba(74, 222, 128, 0.3); /* Primärer Schatten - Hauptschatten mit Akzentfarbe */ --shadow-secondary: rgba(34, 197, 94, 0.2); /* Sekundärer Schatten - Für sekundäre Elemente */ --shadow-dark: rgba(0, 0, 0, 0.5); /* Dunkler Schatten - Für starke Schattenwirkung */ --shadow-light: rgba(255, 255, 255, 0.1); /* Heller Schatten - Für subtile helle Schatten */ --shadow-medium: rgba(0, 0, 0, 0.3); /* Mittlerer Schatten - Standard Schatten */ --shadow-heavy: rgba(0, 0, 0, 0.8); /* Schwerer Schatten - Für starke Tiefenwirkung */ --shadow-success: rgba(16, 185, 129, 0.3); /* Erfolg Schatten - Für Erfolgsmeldungen */ --shadow-warning: rgba(245, 158, 11, 0.3); /* Warnung Schatten - Für Warnungen */ --shadow-danger: rgba(239, 68, 68, 0.3); /* Gefahr Schatten - Für Fehlermeldungen */ --shadow-info: rgba(59, 130, 246, 0.3); /* Info Schatten - Für Informationen */ --shadow-glow: rgba(74, 222, 128, 0.5); /* Glow Schatten - Für leuchtende Effekte */ --shadow-glow-strong: rgba(74, 222, 128, 0.7); /* Starker Glow Schatten - Für intensive Leuchteffekte */ --shadow-glow-soft: rgba(74, 222, 128, 0.2); /* Weicher Glow Schatten - Für subtile Leuchteffekte */ --shadow-neon: rgba(57, 255, 20, 0.4); /* Neon Schatten - Für Neon-Effekte */ --shadow-blue: rgba(59, 130, 246, 0.3); /* Blauer Schatten - Für blaue Akzente */ --shadow-purple: rgba(147, 51, 234, 0.3); /* Violetter Schatten - Für violette Akzente */ --shadow-pink: rgba(236, 72, 153, 0.3); /* Rosa Schatten - Für rosa Akzente */ --shadow-orange: rgba(249, 115, 22, 0.3); /* Oranger Schatten - Für orange Akzente */ --shadow-yellow: rgba(245, 158, 11, 0.3); /* Gelber Schatten - Für gelbe Akzente */ --shadow-red: rgba(239, 68, 68, 0.3); /* Roter Schatten - Für rote Akzente */ --shadow-green: rgba(74, 222, 128, 0.3); /* Grüner Schatten - Für grüne Akzente */ --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3); /* Innerer Schatten - Für eingedrückte Effekte */ --shadow-inset-light: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Leichter innerer Schatten */ --shadow-outline: 0 0 0 2px rgba(74, 222, 128, 0.5); /* Outline Schatten - Für Focus-Effekte */ --shadow-elevated: 0 20px 40px rgba(0, 0, 0, 0.3); /* Erhöhter Schatten - Für floating Elemente */ --shadow-floating: 0 10px 30px rgba(0, 0, 0, 0.2); /* Floating Schatten - Für schwebende Elemente */ --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.2); /* Karten Schatten - Für Karten-Elemente */ --shadow-button: 0 4px 12px rgba(74, 222, 128, 0.2); /* Button Schatten - Für Buttons */ --shadow-hover: 0 8px 25px rgba(74, 222, 128, 0.3); /* Hover Schatten - Für Hover-Effekte */ --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.4); /* Aktiver Schatten - Für aktive Elemente */ --shadow-focus: 0 0 0 3px rgba(74, 222, 128, 0.3); /* Focus Schatten - Für fokussierte Elemente */ --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.25); /* Extra großer Schatten - Für große Elemente */ --shadow-2xl: 0 50px 100px rgba(0, 0, 0, 0.25); /* 2X großer Schatten - Für sehr große Elemente */ --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3); /* Innerer Schatten Standard */ --shadow-none: none; /* Kein Schatten - Für Shadow-Reset */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Kleiner Schatten - Für kleine Elemente */ --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1); /* Basis Schatten - Standard kleiner Schatten */ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Mittlerer Schatten - Standard mittlerer Schatten */ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Großer Schatten - Standard großer Schatten */ --shadow-glow-blue: rgba(59, 130, 246, 0.5); /* Blauer Glow Schatten */ --shadow-glow-red: rgba(239, 68, 68, 0.5); /* Roter Glow Schatten */ --shadow-glow-yellow: rgba(245, 158, 11, 0.5); /* Gelber Glow Schatten */ --shadow-glow-purple: rgba(147, 51, 234, 0.5); /* Violetter Glow Schatten */ --shadow-glow-pink: rgba(236, 72, 153, 0.5); /* Rosa Glow Schatten */ --shadow-glow-orange: rgba(249, 115, 22, 0.5); /* Oranger Glow Schatten */ --shadow-glow-white: rgba(255, 255, 255, 0.5); /* Weißer Glow Schatten */ --shadow-drop: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)); /* Drop Shadow Filter */ --shadow-drop-lg: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)); /* Großer Drop Shadow */ --shadow-colored-primary: 0 0 20px var(--accent-color); /* Farbiger Schatten Primär */ --shadow-colored-secondary: 0 0 15px var(--accent-hover); /* Farbiger Schatten Sekundär */ --shadow-colored-success: 0 0 15px var(--accent-success); /* Farbiger Schatten Erfolg */ --shadow-text: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text Schatten Standard */ --shadow-text-glow: 0 0 10px rgba(74, 222, 128, 0.5); /* Text Glow Schatten */ --shadow-border: 0 0 0 1px rgba(74, 222, 128, 0.3); /* Border Schatten */ --shadow-border-thick: 0 0 0 2px rgba(74, 222, 128, 0.5); /* Dicker Border Schatten */ /* ===== FEHLER & STATUS FARBEN ===== */ --error-bg: #ef4444; /* Fehler-Hintergrund - Für Fehlermeldungen Hintergrund */ --error-color: #ff4444; /* Fehlerfarbe - Hauptfarbe für Fehlermeldungen */ --error-dark: #dc2626; /* Dunkle Fehlerfarbe - Für stärkere Fehlerbetonung */ --error-darker: #b91c1c; /* Noch dunklere Fehlerfarbe - Für kritische Fehler */ --error-light: #ff6666; /* Helle Fehlerfarbe - Für weniger kritische Fehler */ --error-video: #ff6b6b; /* Video Fehlerfarbe - Für Video-spezifische Fehlermeldungen */ --glitch-cyan: #00ff80; /* Glitch Effekt Cyan - Für digitale Störungseffekte */ --glitch-red: #ff0040; /* Glitch Effekt Rot - Für digitale Störungseffekte */ --skeleton-base: #2c2c2c; /* Skeleton Loading Basis - Grundfarbe für Ladeanimationen */ --skeleton-highlight: #3a3a3a; /* Skeleton Loading Highlight - Hervorhebung für Ladeanimationen */ --warning-color: #ffeb3b; /* Warnfarbe - Gelb für Warnmeldungen */ --transparent: transparent; /* Transparenz */ --pure-white: white; /* Reines Weiß für spezielle Fälle */ /* ===== GRADIENT FARBEN ===== */ --gradient-black: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%); /* Schwarzer Gradient - Für tiefe schwarze Verläufe */ --gradient-dark: linear-gradient(135deg, #000000, #1a1a1a); /* Dunkler Gradient - Für dunkle Hintergründe */ --gradient-primary: linear-gradient(135deg, #4ade80, #22c55e); /* Primärgradient - Hauptgradient in Akzentfarbe */ --gradient-progress: linear-gradient(90deg, #4ade80, #22c55e, #4ade80); /* Fortschrittsbalken Gradient - Für Ladebalken */ --gradient-project-overlay: linear-gradient(135deg, var(--green-alpha-10), transparent); /* Projekt Overlay - Für Projektkarten Overlay */ --gradient-radial-projects: radial-gradient(ellipse at center, var(--green-alpha-10) 0%, rgba(74, 222, 128, 0.05) 50%, transparent 70%); /* Radialer Projektgradient - Für Projektbereich Hintergrund */ --gradient-repeating-lines: repeating-linear-gradient(90deg, var(--warning-color) 0px, var(--warning-color) 2px, transparent 2px, transparent 10px); /* Wiederholende Linien horizontal */ --gradient-repeating-lines-vertical: repeating-linear-gradient(0deg, var(--warning-color) 0px, var(--warning-color) 2px, transparent 2px, transparent 10px); /* Wiederholende Linien vertikal */ --gradient-secondary: linear-gradient(135deg, #444444, #666666); /* Sekundärgradient - Für sekundäre UI-Elemente */ --gradient-shimmer-green: linear-gradient(90deg, transparent, var(--green-alpha-20), transparent); /* Grüner Shimmer - Für grüne Glanzeffekte */ --gradient-shimmer-white: linear-gradient(90deg, transparent, var(--white-alpha-20), transparent); /* Weißer Shimmer - Für weiße Glanzeffekte */ --gradient-skeleton: linear-gradient(90deg, #2c2c2c 25%, #3a3a3a 50%, #2c2c2c 75%); /* Skeleton Gradient - Für Ladeanimationen */ /* ===== TRANSPARENTE OVERLAY FARBEN ===== */ --overlay-dark: rgba(0, 0, 0, 0.95); /* Dunkles Overlay - Weniger durchlässig gemacht */ --overlay-heavy: rgba(0, 0, 0, 0.95); /* Schweres Overlay - Für maximale Abdunkelung */ --overlay-light: rgba(0, 0, 0, 0.3); /* Helles Overlay - Für subtile Abdunkelung */ --overlay-medium: rgba(0, 0, 0, 0.5); /* Mittleres Overlay - Für moderate Abdunkelung */ /* ===== ALPHA/TRANSPARENZ FARBEN - WEISS ===== */ --white-alpha-05: rgba(255, 255, 255, 0.05); /* Weiß 5% Transparenz - Für sehr subtile weiße Akzente */ --white-alpha-10: rgba(255, 255, 255, 0.1); /* Weiß 10% Transparenz - Für Ränder und subtile Highlights */ --white-alpha-20: rgba(255, 255, 255, 0.2); /* Weiß 20% Transparenz - Für Hintergründe und Container */ --white-alpha-30: rgba(255, 255, 255, 0.3); /* Weiß 30% Transparenz - Für sichtbarere Overlays */ --white-alpha-40: rgba(255, 255, 255, 0.4); /* Weiß 40% Transparenz - Für mittlere Overlays */ --white-alpha-60: rgba(255, 255, 255, 0.6); /* Weiß 60% Transparenz - Für Text auf dunklem Hintergrund */ --white-alpha-70: rgba(255, 255, 255, 0.7); /* Weiß 70% Transparenz - Für gut lesbaren Text */ --green-alpha-05: rgba(74, 222, 128, 0.05); --green-alpha-10: rgba(74, 222, 128, 0.1); --green-alpha-15: rgba(74, 222, 128, 0.15); --green-alpha-20: rgba(74, 222, 128, 0.2); --green-alpha-30: rgba(74, 222, 128, 0.3); --green-alpha-40: rgba(74, 222, 128, 0.4); --green-alpha-60: rgba(74, 222, 128, 0.6); --green-alpha-70: rgba(74, 222, 128, 0.7); --green-secondary-alpha: rgba(34, 197, 94, 0.1); /* ===== ALPHA/TRANSPARENZ FARBEN - ROT/FEHLER ===== */ --error-dark-alpha: rgba(220, 38, 38, 0.2); /* Dunkles Rot 20% Transparenz - Für Fehler-Hintergründe */ --error-darker-alpha: rgba(185, 28, 28, 0.1); /* Sehr dunkles Rot 10% - Für subtile Fehler-Hinweise */ --red-alpha-10: rgba(255, 68, 68, 0.1); /* Rot 10% Transparenz - Für Fehler-Container */ --red-alpha-15: rgba(255, 68, 68, 0.15); /* Rot 15% Transparenz - Für Warnungen */ --red-alpha-20: rgba(255, 68, 68, 0.2); /* Rot 20% Transparenz - Für Fehler-Highlights */ --red-alpha-30: rgba(255, 68, 68, 0.3); /* Rot 30% Transparenz - Für starke Fehlerbetonung */ --red-error-15: rgba(239, 68, 68, 0.15); /* Fehlerrot 15% - Für subtile Fehlermeldungen */ --red-error-20: rgba(239, 68, 68, 0.2); /* Fehlerrot 20% - Für Fehlerhintergründe */ --red-error-30: rgba(239, 68, 68, 0.3); /* Fehlerrot 30% - Für Fehler-Overlays */ --red-error-70: rgba(239, 68, 68, 0.7); /* Fehlerrot 70% - Für starke Fehlermeldungen */ /* ===== ALPHA/TRANSPARENZ FARBEN - SCHWARZ ===== */ --black-alpha-15: rgba(0,0,0,0.15); /* Schwarz 15% Transparenz - Für sehr leichte Schatten */ --black-alpha-30: rgba(0, 0, 0, 0.3); /* Schwarz 30% Transparenz - Für leichte Abdunkelung */ --black-alpha-40: rgba(0, 0, 0, 0.4); /* Schwarz 40% Transparenz - Für moderate Schatten */ --black-alpha-60: rgba(0, 0, 0, 0.6); /* Schwarz 60% Transparenz - Für starke Abdunkelung */ --black-alpha-70: rgba(0, 0, 0, 0.7); /* Schwarz 70% Transparenz - Für Overlay-Effekte */ --black-alpha-80: rgba(0, 0, 0, 0.8); /* Schwarz 80% Transparenz - Für Modal-Hintergründe */ --black-alpha-90: rgba(0, 0, 0, 0.9); /* Schwarz 90% Transparenz - Für starke Overlay-Effekte */ --green-95-alpha: rgba(74, 222, 128, 0.95); --green-darker-alpha: rgba(74, 222, 128, 0.9); /* ===== SPEZIELLE ALPHA FARBEN ===== */ --warning-yellow-30: rgba(255, 235, 59, 0.3); /* Warngelb 30% Transparenz - Für subtile Warnungshinweise */ --warning-yellow-alpha: rgba(255, 235, 59, 0.4); /* Warngelb 40% Transparenz - Für Warnungshinweise */ --warning-yellow-60: rgba(255, 235, 59, 0.6); /* Warngelb 60% Transparenz - Für starke Warnungshinweise */ /* ===== FEHLENDE TRANSPARENZ-FARBEN ===== */ --error-transparent: rgba(239, 68, 68, 0); /* Vollständig transparentes Fehlerrot - Für Animationen */ --error-bg-10: rgba(239, 68, 68, 0.1); /* Fehlerrot 10% - Für sehr subtile Fehlerhintergründe */ --error-bg-40: rgba(239, 68, 68, 0.4); /* Fehlerrot 40% - Für mittlere Fehlerbetonung */ --error-bg-50: rgba(239, 68, 68, 0.5); /* Fehlerrot 50% - Für starke Fehlerbetonung */ --green-transparent: rgba(74, 222, 128, 0); /* Vollständig transparentes Grün - Für Animationen */ --green-alpha-50: rgba(74, 222, 128, 0.5); /* Grün 50% Transparenz - Für mittlere Betonung */ --red-68-50: rgba(255, 68, 68, 0.5); /* Helles Rot 50% - Für mittlere Fehlerbetonung */ /* ===== BACKDROP FILTER EFFEKTE ===== */ --backdrop-blur: blur(20px); /* Starker Blur-Effekt - Für Glasmorphismus-Effekte */ --backdrop-blur-light: blur(10px); /* Leichter Blur-Effekt - Für subtile Unschärfe */ /* ===== ANIMATION FARBEN ===== */ --ripple-green-70: rgba(74, 222, 128, 0.7); /* Grün 70% für Ripple-Animationen - Für Button-Feedback */ --ripple-green-transparent: rgba(74, 222, 128, 0); /* Transparentes Grün für Ripple Ende - Für Button-Animationen */ --toast-shadow: rgba(0,0,0,0.15); /* Toast Schatten 15% - Für Toast-Notification Schatten */ /* ===== FEHLENDE DIREKTE FARBEN AUS DEM CSS ===== */ /* Diese Farben wurden bisher direkt im CSS verwendet und sind jetzt zentralisiert */ --direct-white-70: rgba(255, 255, 255, 0.7); /* Weiß 70% - Für gedämpfte weiße Texte */ --direct-white-60: rgba(255, 255, 255, 0.6); /* Weiß 60% - Für Hover-Ränder */ --direct-white-10: rgba(255, 255, 255, 0.1); /* Weiß 10% - Für Hover-Hintergründe */ --direct-white-20-shadow: rgba(255, 255, 255, 0.2); /* Weiß 20% - Für Schatten-Effekte */ --direct-white-solid: #ffffff; /* Direktes Weiß - Für Hover-Texte */ --direct-error-15: rgba(239, 68, 68, 0.15); /* Fehlerrot 15% - Für Like-Button Hintergründe */ --direct-error-30-shadow: rgba(239, 68, 68, 0.3); /* Fehlerrot 30% - Für Schatten-Effekte */ --direct-error-solid: #ef4444; /* Direktes Fehlerrot - Für Like-Buttons */ /* ===== ZUSÄTZLICHE FEHLENDE RGBA-WERTE ===== */ --green-alpha-40-shadow: rgba(74, 222, 128, 0.4); /* Grün 40% - Für Schatten-Effekte */ --green-alpha-60-border: rgba(74, 222, 128, 0.6); /* Grün 60% - Für Border-Effekte */ --green-alpha-95-bg: rgba(74, 222, 128, 0.95); /* Grün 95% - Für Video Play Buttons */ --green-secondary-10: rgba(34, 197, 94, 0.1); /* Sekundäres Grün 10% - Für Gradients */ --error-darker-20: rgba(220, 38, 38, 0.2); /* Dunkles Fehlerrot 20% - Für Gradients */ --error-darker-10: rgba(185, 28, 28, 0.1); /* Sehr dunkles Fehlerrot 10% - Für Gradients */ --error-10-shadow: rgba(239, 68, 68, 0.1); /* Fehlerrot 10% - Für subtile Schatten */ --error-50-border: rgba(239, 68, 68, 0.5); /* Fehlerrot 50% - Für Border-Effekte */ --black-90-overlay: rgba(0, 0, 0, 0.9); /* Schwarz 90% - Für starke Overlays */ --black-60-overlay: rgba(0, 0, 0, 0.6); /* Schwarz 60% - Für Backdrop-Overlays */ --black-70-overlay: rgba(0, 0, 0, 0.7); /* Schwarz 70% - Für dunkle Hintergründe */ --black-80-shadow: rgba(0, 0, 0, 0.8); /* Schwarz 80% - Für Text-Schatten */ --warning-yellow-40: rgba(255, 235, 59, 0.4); /* Warngelb 40% - Für Schatten-Effekte */ --green-05-radial: rgba(74, 222, 128, 0.05); /* Grün 5% - Für radiale Gradients */ /* 3D Tilt Effect Variables */ --pointer-x: 50%; --pointer-y: 50%; --pointer-from-center: 0; --pointer-from-top: 0.5; --pointer-from-left: 0.5; --card-opacity: 0; } /* ================================= 🎯 FARBPALETTE ENDE ================================= */ /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--primary-bg); color: var(--text-white); line-height: 1.6; overflow-x: hidden; /* Safe Area am Body entfernt, damit die Seite mobil nicht dauerhaft kleiner wirkt. Safe-Area-Abstände werden gezielt nur in Overlays/Popups und Header angewandt. */ } /* // // ================================================================= ████████████████████████████████████████████████████████████████ ███ ███ ███ INDEX SEITE ███ ███ HAUPTBEREICHE STRUKTUR ███ ███ ███ ████████████████████████████████████████████████████████████████ ================================================================= // // // */ /* // // ============================================================= ███████████████████████████████████████████████████████████ ███ ███ ███ HEADER SECTION ███ ███ NAVIGATION SYSTEM KOMPLETT ███ ███ ███ ███████████████████████████████████████████████████████████ ============================================================= // // // */ /* Header Navigation Fade-in Animations */ .header { position: fixed; top: env(safe-area-inset-top); /* Safe Area Inset für den oberen Bereich */ left: env(safe-area-inset-left); /* Safe Area Inset für den linken Bereich */ right: env(safe-area-inset-right); /* Safe Area Inset für den rechten Bereich */ width: auto; /* Auto-width um mit safe-area-insets zu arbeiten */ z-index: 999; /* Ultra-Premium Apple iOS Liquid Glass Effekt - Optimiert ohne Helligkeit */ background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(28px) saturate(120%) contrast(105%); -webkit-backdrop-filter: blur(28px) saturate(120%) contrast(105%); border: none; border-bottom: none; border-top: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03); transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); transform: translateZ(0); will-change: backdrop-filter, background, box-shadow; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Smooth fade-in animation for header */ opacity: 0; animation: headerFadeIn 1.5s ease-out 0.2s forwards; } .header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.01) 50%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.05) 100% ); pointer-events: none; opacity: 0.6; mix-blend-mode: overlay; } .header::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse 200% 25% at center top, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 15%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.01) 50%, transparent 70% ); pointer-events: none; opacity: 0.5; mix-blend-mode: soft-light; } /* Erweiterte Glasmorphismus-Eigenschaften für Navigation */ .nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 50px; padding-left: max(50px, env(safe-area-inset-left)); padding-right: max(50px, env(safe-area-inset-right)); padding-top: max(20px, env(safe-area-inset-top)); height: 80px; max-width: 100%; position: relative; } /* DESKTOP LAYOUT: Logo Left | Navigation Center | Social Right */ .nav-logo { flex: 0 0 auto; order: 1; } .nav-logo a { font-size: 24px; font-weight: 800; color: var(--text-white); text-decoration: none; letter-spacing: -0.02em; transition: all 0.3s ease; /* Smooth fade-in animation for logo */ opacity: 0; transform: translateY(-10px); animation: logoFadeIn 1s ease-out 0.1s forwards; } .nav-logo a:hover { color: var(--accent-color); text-shadow: 0 0 10px var(--loading-cube-shadow); } /* DESKTOP: Navigation Links in CENTER */ .nav-links { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; position: absolute; left: 50%; transform: translateX(-50%); order: 2; } .nav-links a { color: var(--text-white); text-decoration: none; font-weight: 400; font-size: 16px; transition: all 0.3s ease; position: relative; white-space: nowrap; /* Smooth fade-in animation for navigation links */ opacity: 0; transform: translateY(-10px); animation: navLinkFadeIn 1s ease-out forwards; } .nav-links a:nth-child(1) { animation-delay: 0.4s; } .nav-links a:nth-child(2) { animation-delay: 0.5s; } .nav-links a:nth-child(3) { animation-delay: 0.6s; } .nav-links a:nth-child(4) { animation-delay: 0.7s; } .nav-links a:hover { color: var(--accent-color); } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--accent-color); transition: width 0.3s ease; } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } /* DESKTOP: Social Icons on RIGHT */ .nav-social { display: flex; gap: 12px; align-items: center; height: 100%; flex: 0 0 auto; order: 3; } /* MOBILE: Social Icons in CENTER (hidden on desktop) */ .nav-social-mobile { display: none; gap: 12px; align-items: center; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); } .social-icon { color: var(--text-white); text-decoration: none; font-size: 20px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--white-alpha-05); border: 1px solid var(--white-alpha-10); /* Smooth fade-in animation for social icons */ opacity: 0; transform: translateY(-10px); animation: socialIconFadeIn 1s ease-out forwards; } .nav-social .social-icon:nth-child(1) { animation-delay: 0.8s; } .nav-social .social-icon:nth-child(2) { animation-delay: 0.9s; } .nav-social .social-icon:nth-child(3) { animation-delay: 1s; } .social-icon:hover { color: var(--accent-color); background: var(--green-alpha-10); border-color: var(--green-alpha-30); transform: translateY(-2px); box-shadow: 0 5px 15px var(--green-alpha-30); } /* =========================== */ /* IMPROVED MOBILE HAMBURGER MENU STYLES */ /* =========================== */ /* Mobile Menu Toggle Button (Hamburger) - ALWAYS VISIBLE */ .mobile-menu-toggle { display: none; flex-direction: column; justify-content: space-around; width: 32px; height: 32px; background: var(--transparent); border: none; cursor: pointer; padding: 4px; z-index: 10002; /* Erhöht um über dem Mobile Menu Overlay zu stehen */ transition: transform 0.3s ease; order: 4; position: relative; /* Ensure stacking context */ color: var(--text-white) !important; } .mobile-menu-toggle:hover { transform: scale(1.1); } .hamburger-line { display: block !important; height: 3px !important; width: 100% !important; background: #ffffff !important; /* Hardcoded white to override any CSS */ background-color: #ffffff !important; border-radius: 2px; transition: all 0.3s ease; transform-origin: center; border: none !important; box-shadow: none !important; } /* Force white color on mobile specifically */ @media (max-width: 900px) { .hamburger-line { background: #ffffff !important; background-color: #ffffff !important; color: #ffffff !important; border: none !important; box-shadow: none !important; } .mobile-menu-toggle .hamburger-line { background: #ffffff !important; background-color: #ffffff !important; } } /* Hamburger Animation - Transform to X when active - ENHANCED */ .mobile-menu-toggle.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); background: rgba(64, 224, 144, 1) !important; box-shadow: 0 0 20px rgba(64, 224, 144, 0.6); } .mobile-menu-toggle.active .hamburger-line:nth-child(2) { opacity: 0; transform: scale(0) rotate(180deg); } .mobile-menu-toggle.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); background: rgba(64, 224, 144, 1) !important; box-shadow: 0 0 20px rgba(64, 224, 144, 0.6); } /* IMPROVED Mobile Menu Overlay - MODERNIZED */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; /* Dynamic viewport height für mobile Browser */ background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)); backdrop-filter: blur(12px); z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; } /* Fallback für Browser ohne 100dvh Support */ @supports not (height: 100dvh) { .mobile-menu-overlay { height: 100vh; } } .mobile-menu-overlay.active { opacity: 1; visibility: visible; pointer-events: all; } /* MODERN GLASS-MORPHISM MENU PANEL */ .mobile-menu-content { position: fixed; top: 0; right: 0; width: 280px; height: 100dvh; /* Dynamic viewport height für mobile Browser */ background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(40, 40, 40, 0.85) 50%, rgba(20, 20, 20, 0.95) 100%); backdrop-filter: blur(20px) saturate(180%); border-left: 1px solid rgba(64, 224, 144, 0.3); box-shadow: -20px 0 80px rgba(0, 0, 0, 0.8), inset 1px 0 0 rgba(255, 255, 255, 0.05); transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.23, 1, 0.320, 1); /* Safe Area Inset Implementation mit iOS 11.0-11.2 Fallbacks */ padding-top: 70px; /* Fallback */ padding-top: constant(safe-area-inset-top); /* iOS 11.0-11.2 */ padding-top: max(70px, calc(env(safe-area-inset-top) + 20px)); /* Modern browsers */ padding-right: 30px; /* Fallback */ padding-right: constant(safe-area-inset-right); /* iOS 11.0-11.2 */ padding-right: max(30px, calc(env(safe-area-inset-right) + 30px)); /* Modern browsers */ padding-bottom: 30px; /* Fallback */ padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */ padding-bottom: max(30px, calc(env(safe-area-inset-bottom) + 30px)); /* Modern browsers */ padding-left: 30px; /* Fallback */ padding-left: constant(safe-area-inset-left); /* iOS 11.0-11.2 */ padding-left: max(30px, calc(env(safe-area-inset-left) + 30px)); /* Modern browsers */ display: flex; flex-direction: column; justify-content: space-between; /* Verteilung: Inhalt oben, Social Icons unten */ z-index: 10002; /* Erhöht um über dem Mobile Menu Overlay zu stehen */ overflow-y: auto; /* Allow scrolling if content is too long */ } /* CSS Feature Detection Support */ @supports not (padding: env(safe-area-inset-top)) { .mobile-menu-content { padding: 70px 30px 50px 30px !important; /* Extra Fallback für nicht unterstützte Browser */ } } .mobile-menu-overlay.active .mobile-menu-content { transform: translateX(0); } /* MODERN NAVIGATION LINKS - ENHANCED */ .mobile-nav-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; align-items: flex-start; width: 100%; flex: 0 0 auto; /* Nimmt nur benötigten Platz */ margin-top: 20px; /* Reduzierter Abstand vom X zu den Buttons */ } .mobile-nav-link { color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 20px; font-weight: 400; letter-spacing: 1.2px; transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); padding: 18px 24px; border-radius: 16px; position: relative; overflow: hidden; width: 100%; text-align: left; background: rgba(255, 255, 255, 0.02); margin: 0; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); } .mobile-nav-link::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(64, 224, 144, 0.15), transparent); transition: left 0.6s cubic-bezier(0.23, 1, 0.320, 1); } .mobile-nav-link::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, rgba(64, 224, 144, 0.8), rgba(64, 224, 144, 0.3)); transform: scaleY(0); transform-origin: bottom; transition: transform 0.3s cubic-bezier(0.23, 1, 0.320, 1); } .mobile-nav-link:hover::before, .mobile-nav-link.active::before { left: 100%; } .mobile-nav-link:hover::after, .mobile-nav-link.active::after { transform: scaleY(1); } .mobile-nav-link:hover, .mobile-nav-link.active { color: rgba(64, 224, 144, 1); transform: translateX(12px) scale(1.02); background: rgba(64, 224, 144, 0.08); border-color: rgba(64, 224, 144, 0.2); box-shadow: 0 8px 32px rgba(64, 224, 144, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); text-shadow: 0 0 20px rgba(64, 224, 144, 0.6); } /* Mobile Language Toggle */ .mobile-nav-language { display: flex; justify-content: center; align-items: center; margin: 30px 0 20px 0; padding: 15px 0; border-top: 1px solid var(--border-dark); border-bottom: 1px solid var(--border-dark); } .mobile-lang-btn { display: flex; align-items: center; justify-content: center; padding: 12px 24px; background: var(--white-alpha-05); border: 1px solid var(--white-alpha-20); border-radius: 8px; color: var(--text-white); font-size: 16px; font-weight: 600; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; min-width: 60px; } .mobile-lang-btn:hover { background: var(--green-alpha-10); border-color: var(--accent-color); color: var(--accent-color); box-shadow: 0 0 15px var(--shadow-glow-soft); transform: scale(1.05); } .mobile-lang-btn:active { transform: scale(0.95); } /* Mobile Social Icons in Menu - IMMER GANZ UNTEN */ .mobile-nav-social { display: flex; justify-content: center; gap: 20px; margin-top: auto; /* Drückt die Social Icons ganz nach unten */ flex-shrink: 0; /* Verhindert Schrumpfen */ /* Safe Area Inset mit iOS Fallbacks und zusätzlichem Padding */ margin-bottom: 20px; /* Fallback */ margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */ margin-bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px)); /* Modern browsers */ padding-bottom: 15px; /* Fallback */ padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */ padding-bottom: calc(env(safe-area-inset-bottom) + 15px); /* Modern browsers */ } /* ===== MOBILE MENU LANGUAGE ANIMATION ===== */ /* Special animations for mobile menu language toggle */ .mobile-nav-link { transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .mobile-nav-link.language-changing { opacity: 0; transform: translateX(-30px) scale(0.9); filter: blur(2px); } .mobile-nav-link.language-changed { opacity: 1; transform: translateX(0px) scale(1); box-shadow: 0 0 25px rgba(74, 222, 128, 0.5); filter: blur(0px); background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.3); } .mobile-lang-btn { transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .mobile-lang-btn.language-changing { opacity: 0; transform: scale(0.8); filter: blur(2px); } .mobile-lang-btn.language-changed { opacity: 1; transform: scale(1); box-shadow: 0 0 20px rgba(74, 222, 128, 0.6); background: rgba(74, 222, 128, 0.2); border-color: rgba(74, 222, 128, 0.5); filter: blur(0px); } /* Add smooth pulse effect during language change */ @keyframes mobileLangPulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); } 70% { box-shadow: 0 0 0 25px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } .mobile-lang-btn.pulse-animation { animation: mobileLangPulse 1s ease-out; } /* CSS Feature Detection Support für Social Icons */ @supports not (margin-bottom: env(safe-area-inset-bottom)) { .mobile-nav-social { margin-bottom: 40px !important; /* Extra Fallback für mehr Abstand */ padding-bottom: 25px !important; } } .mobile-social-icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--white-alpha-05); border: 1px solid var(--white-alpha-20); transition: all 0.3s ease; text-decoration: none; } .mobile-social-icon:hover { background: var(--green-alpha-10); border-color: var(--accent-color); box-shadow: 0 0 15px var(--shadow-glow-soft); transform: scale(1.1); } .mobile-social-icon img { width: 24px; height: 24px; filter: brightness(0.8); transition: all 0.3s ease; } .mobile-social-icon:hover img { filter: brightness(1.2) drop-shadow(0 0 8px var(--accent-color)); } /* =========================== */ /* MOBILE MENU ANPASSUNGEN FÜR KLEINE BILDSCHIRME */ /* =========================== */ /* Für kleine Handys (Höhe unter 700px) */ @media screen and (max-height: 700px) { .mobile-menu-content { height: 100dvh; /* Dynamic viewport height */ /* Safe Area Inset mit iOS Fallbacks für kleine Bildschirme */ padding-top: 50px !important; /* Fallback */ padding-top: constant(safe-area-inset-top) !important; /* iOS 11.0-11.2 */ padding-top: max(50px, calc(env(safe-area-inset-top) + 15px)) !important; /* Modern browsers */ padding-right: 30px !important; /* Fallback */ padding-right: constant(safe-area-inset-right) !important; /* iOS 11.0-11.2 */ padding-right: max(30px, calc(env(safe-area-inset-right) + 30px)) !important; /* Modern browsers */ padding-bottom: 15px !important; /* Fallback */ padding-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */ padding-bottom: max(15px, calc(env(safe-area-inset-bottom) + 15px)) !important; /* Modern browsers */ padding-left: 30px !important; /* Fallback */ padding-left: constant(safe-area-inset-left) !important; /* iOS 11.0-11.2 */ padding-left: max(30px, calc(env(safe-area-inset-left) + 30px)) !important; /* Modern browsers */ } .mobile-nav-links { margin-top: 10px !important; gap: 6px !important; } .mobile-nav-link { padding: 12px 20px !important; font-size: 16px !important; } .mobile-nav-social { margin-bottom: 15px !important; /* Fallback */ margin-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */ margin-bottom: max(15px, calc(env(safe-area-inset-bottom) + 15px)) !important; /* Modern browsers */ padding-bottom: 10px !important; /* Fallback */ padding-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */ padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important; /* Modern browsers */ } /* Fallback für Browser ohne safe-area-inset Support */ @supports not (padding: env(safe-area-inset-bottom)) { .mobile-menu-content { padding: 50px 30px 35px 30px !important; } .mobile-nav-social { margin-bottom: 25px !important; padding-bottom: 15px !important; } } } /* Für sehr kleine Handys (Höhe unter 600px) */ @media screen and (max-height: 600px) { .mobile-menu-content { height: 100dvh; /* Dynamic viewport height */ /* Safe Area Inset mit iOS Fallbacks für sehr kleine Bildschirme */ padding-top: 40px !important; /* Fallback */ padding-top: constant(safe-area-inset-top) !important; /* iOS 11.0-11.2 */ padding-top: max(40px, calc(env(safe-area-inset-top) + 15px)) !important; /* Modern browsers */ padding-right: 25px !important; /* Fallback */ padding-right: constant(safe-area-inset-right) !important; /* iOS 11.0-11.2 */ padding-right: max(25px, calc(env(safe-area-inset-right) + 25px)) !important; /* Modern browsers */ padding-bottom: 10px !important; /* Fallback */ padding-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */ padding-bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px)) !important; /* Modern browsers */ padding-left: 25px !important; /* Fallback */ padding-left: constant(safe-area-inset-left) !important; /* iOS 11.0-11.2 */ padding-left: max(25px, calc(env(safe-area-inset-left) + 25px)) !important; /* Modern browsers */ } .mobile-nav-links { margin-top: 5px !important; gap: 4px !important; } .mobile-nav-link { padding: 10px 18px !important; font-size: 15px !important; } .mobile-nav-social { margin-bottom: 10px !important; /* Fallback */ margin-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */ margin-bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px)) !important; /* Modern browsers */ padding-bottom: 10px !important; /* Fallback */ padding-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */ padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important; /* Modern browsers */ } /* Fallback für Browser ohne safe-area-inset Support */ @supports not (padding: env(safe-area-inset-bottom)) { .mobile-menu-content { padding: 40px 25px 30px 25px !important; } .mobile-nav-social { margin-bottom: 20px !important; padding-bottom: 15px !important; } } } /* // // ========================================================= ███████████████████████████████████████████████████████ ███ ███ ███ FRONT PAGE SECTION ███ ███ HERO BEREICH KOMPLETT ███ ███ ███ ███████████████████████████████████████████████████████ ========================================================= // // // */ /* =========================== */ /* FIXED HEADER WITH NEW LAYOUT */ /* =========================== */ /* Hero Section */ .hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .hero-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--tertiary-bg), var(--secondary-bg)); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; text-align: center; color: var(--text-secondary); } .hero-content { text-align: left; z-index: 1; position: relative; width: 100%; padding: 0 50px; padding-left: max(50px, env(safe-area-inset-left)); padding-right: max(50px, env(safe-area-inset-right)); max-width: 1200px; margin-left: 10%; } .hero-title { font-size: clamp(48px, 8vw, 96px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--text-white); text-shadow: 2px 2px 8px var(--black-80-shadow); opacity: 0; transform: translateY(50px); animation: floatIn 1.2s ease-out 0.3s forwards; } .hero-subtitle { font-size: clamp(16px, 2.5vw, 24px); font-weight: 300; letter-spacing: 0.05em; opacity: 0; margin-top: 20px; margin-left: 0; transform: translateY(30px); animation: floatIn 1.2s ease-out 1s forwards; } /* Float in animation keyframes */ @keyframes floatIn { from { opacity: 0; transform: translateY(50px); } to { opacity: 0.9; transform: translateY(0); } } /* Header fade-in animation keyframes */ @keyframes headerFadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Mobile-optimized header fade-in - no transforms to prevent conflicts */ @keyframes headerFadeInMobile { from { opacity: 0; } to { opacity: 1; } } /* SMOOTH Header Animation - Perfekt flüssig ohne Unterbrechungen */ @keyframes headerFadeInImproved { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Navigation links fade-in animation keyframes */ @keyframes navLinkFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Social icons fade-in animation keyframes */ @keyframes socialIconFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Logo fade-in animation keyframes */ @keyframes logoFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Placeholder Image Styles */ .placeholder-image { background: var(--gradient-secondary); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; color: var(--text-light); font-weight: 600; text-align: center; } /* Real Image Styles for 2400x1400px format */ .about-placeholder, .customer-placeholder, .university-logo, .hero-image, .project-placeholder { object-fit: cover; object-position: center; width: 100%; height: 100%; } /* // // ========================================================= ███████████████████████████████████████████████████████ ███ ███ ███ MY STORY SECTION ███ ███ ABOUT ME PREVIEW ███ ███ ███ ███████████████████████████████████████████████████████ ========================================================= // // // */ /* Story Section */ .story-section { padding: 100px 50px; background: var(--primary-bg); color: var(--text-white); position: relative; z-index: 10; } .story-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .story-content { display: flex; flex-direction: column; justify-content: center; } .story-content h2 { font-size: 72px; font-weight: 800; line-height: 1.1; margin-bottom: 30px; } .divider { width: 60px; height: 2px; background: var(--accent-color); margin-bottom: 30px; } .read-more-btn { background: var(--transparent); color: var(--accent-color); border: 2px solid var(--accent-color); padding: 12px 30px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; width: fit-content; position: relative; overflow: hidden; } .read-more-btn:hover { background: var(--white-solid); color: var(--primary-bg); border: 2px solid var(--white-solid); transform: translateY(-2px); box-shadow: 0 8px 25px var(--shadow-medium); } .story-info { display: flex; flex-direction: column; justify-content: center; } .story-info h3 { font-size: 24px; font-weight: 600; margin-bottom: 20px; } .story-info p { font-size: 16px; line-height: 1.6; margin-bottom: 15px; opacity: 0.8; } /* // // ========================================================= ███████████████████████████████████████████████████████ ███ ███ ███ PROJEKTE SECTION ███ ███ PORTFOLIO SHOWCASE ███ ███ ███ ███████████████████████████████████████████████████████ ========================================================= // // // */ /* // // ===================================================== ███████████████████████████████████████████████ ███ ███ ███ PROJEKT CARDS ███ ███ PORTFOLIO GRID LAYOUT ███ ███ ███ ███████████████████████████████████████████████ ===================================================== // // // */ /* Projects Section */ .projects-section { padding: 100px 50px; background: var(--primary-bg); position: relative; } .projects-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, var(--green-alpha-10) 0%, var(--green-05-radial) 50%, transparent 70%); pointer-events: none; z-index: 1; } .projects-section > * { position: relative; z-index: 2; } .projects-title { font-size: clamp(60px, 12vw, 120px); font-weight: 800; text-align: center; margin-bottom: 40px; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; } .projects-description { max-width: 800px; margin: 0 auto 80px; text-align: center; font-size: 18px; line-height: 1.6; opacity: 0.8; } .projects-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); /* 3 columns for desktop */ gap: 40px; } /* Project image container for proper responsive images */ .project-image-container { position: relative; width: 100%; aspect-ratio: 16/10; /* Consistent aspect ratio */ overflow: hidden; border-radius: 12px 12px 0 0; background: var(--tertiary-bg); } /* Apply same rules to lazy-image-container within project cards */ .project-card .lazy-image-container { position: relative; width: 100%; aspect-ratio: 16/10; /* Consistent aspect ratio */ overflow: hidden; border-radius: 12px 12px 0 0; background: var(--tertiary-bg); border-radius: 16px; /* Same border radius as customer logos */ } .project-card-image { width: 100%; height: 100%; object-fit: cover; /* Cover the entire container */ object-position: center; /* Center the image */ transition: transform 0.3s ease; } /* Apply image rules to any img within project cards */ .project-card img { width: 100%; height: 100%; object-fit: cover; /* Cover the entire container */ object-position: center; /* Center the image */ transition: transform 0.3s ease; display: block; /* Prevent inline-gap/rendering seams on mobile */ } /* Hover scale effect removed per user request */ .project-card:hover .project-card-image, .project-card:hover img { transform: scale(1.0); /* No zoom on hover */ } /* ========================= POPUP MODAL ACTION BUTTONS (New Style) ========================= */ /* Updated modal action buttons with rectangular rounded design and glow */ .modal-image-actions { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 20; } /* ========================= YOUTUBE-STYLE LIKE COUNTER ANIMATION ========================= */ /* Like counter container for smooth number animation */ .like-count-container { position: relative; display: inline-block; overflow: hidden; min-width: 20px; height: 1.2em; vertical-align: middle; } /* Modal-specific like counter container - FIXED FOR POPUP ANIMATION */ .project-modal-like-section .like-count-container { position: relative !important; display: inline-block !important; overflow: hidden !important; min-width: 30px !important; height: 1.5em !important; vertical-align: middle !important; z-index: 10 !important; } /* Ensure modal like counts have proper positioning */ .project-modal-like-count { position: relative !important; display: inline-block !important; z-index: 1 !important; } /* Fix modal container context for animations */ .project-modal-like-section { position: relative !important; overflow: visible !important; } /* ========================= COORDINATED POPUP LIKE ANIMATION New: All elements (icon, text, count) animate together ========================= */ /* Container for coordinated popup animation */ .modal-like-content-container { position: relative; display: flex; align-items: center; gap: 8px; overflow: hidden; min-height: 1.5em; width: 100%; } /* Wrapper for each animated group */ .modal-like-content-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; gap: 8px; transition: transform 0.25s ease, opacity 0.25s ease; } /* Animation states for coordinated movement */ .modal-like-content-wrapper.slide-out-up { transform: translateY(-100%); opacity: 0; } .modal-like-content-wrapper.slide-out-down { transform: translateY(100%); opacity: 0; } .modal-like-content-wrapper.slide-in-from-up { transform: translateY(-100%); opacity: 0; } .modal-like-content-wrapper.slide-in-from-down { transform: translateY(100%); opacity: 0; } .modal-like-content-wrapper.slide-in-center { transform: translateY(0); opacity: 1; } /* Ensure modal elements maintain their styling during animation */ .modal-like-content-wrapper .like-icon, .modal-like-content-wrapper .project-modal-like-text, .modal-like-content-wrapper .project-modal-like-count { position: relative; flex-shrink: 0; } /* Text animation container - SAME STYLE AS COUNTER ANIMATION */ .like-text-container { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; } /* Modal-specific text container */ .project-modal-like-section .like-text-container { position: relative !important; display: inline-block !important; overflow: hidden !important; min-width: 140px !important; height: 1.5em !important; vertical-align: middle !important; z-index: 10 !important; } /* Like icon animation container - SAME STYLE AS COUNTER AND TEXT */ .like-icon-container { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; width: 24px; height: 24px; } /* Modal-specific icon container */ .project-modal-like-section .like-icon-container { position: relative !important; display: inline-block !important; overflow: hidden !important; width: 24px !important; height: 24px !important; vertical-align: middle !important; z-index: 10 !important; } /* Ensure icons are positioned properly for animation */ .like-icon { position: relative; display: block; transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } .like-count { display: block; transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } /* Animation states for smooth number transitions */ .like-count.slide-out-up { animation: slideOutUp 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards; } .like-count.slide-in-up { animation: slideInUp 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards; } .like-count.slide-out-down { animation: slideOutDown 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards; } .like-count.slide-in-down { animation: slideInDown 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards; } /* Keyframes for YouTube-style number animations */ @keyframes slideOutUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } } @keyframes slideInUp { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes slideOutDown { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } @keyframes slideInDown { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* Enhanced like button animations */ .like-btn.liked { animation: likeButtonPulse 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .project-modal-like-btn.liked { animation: likeButtonPulse 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } @keyframes likeButtonPulse { 0% { transform: scale(1); } 15% { transform: scale(1.1); } 30% { transform: scale(0.95); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Project Card Container mit 3D Tilt-Effekt */ .project-card-wrapper { perspective: 500px; transform: translate3d(0, 0, 0.1px); position: relative; touch-action: pan-y; /* Erlaubt vertikales Scrollen auf Touch-Geräten */ display: flex; flex-direction: column; } .project-card-wrapper::before { content: ''; position: absolute; inset: -10px; background: inherit; background-position: inherit; border-radius: inherit; transition: all 0.5s ease; filter: contrast(2) saturate(2) blur(36px); transform: scale(0.8) translate3d(0, 0, 0.1px); background-size: 100% 100%; background-image: radial-gradient(farthest-side circle at var(--pointer-x, 50%) var(--pointer-y, 50%), hsla(135, 100%, 70%, var(--card-opacity, 0)) 4%, hsla(135, 50%, 60%, calc(var(--card-opacity, 0) * 0.75)) 10%, hsla(135, 25%, 50%, calc(var(--card-opacity, 0) * 0.5)) 50%, hsla(135, 0%, 40%, 0) 100%); } .project-card-wrapper:hover, .project-card-wrapper.active { --card-opacity: 1; } .project-card-wrapper:hover::before, .project-card-wrapper.active::before { filter: contrast(1) saturate(2) blur(40px) opacity(1); transform: scale(0.9) translate3d(0, 0, 0.1px); } .project-card { background: var(--secondary-bg); border-radius: 16px; /* Same border radius as customer logos */ overflow: hidden; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); border: 1px solid var(--white-alpha-10); position: relative; cursor: pointer; transform: translate3d(0, 0, 0.1px) rotateX(0deg) rotateY(0deg); box-shadow: rgba(0, 0, 0, 0.8) calc((var(--pointer-from-left, 0.5) * 10px) - 3px) calc((var(--pointer-from-top, 0.5) * 20px) - 6px) 20px -5px; --rotate-x: 0deg; --rotate-y: 0deg; --pointer-x: 50%; --pointer-y: 50%; --pointer-from-center: 0; --pointer-from-top: 0.5; --pointer-from-left: 0.5; } .project-card * { transform: translate3d(0, 0, 0.1px); border-radius: 16px; /* Same border radius as customer logos */ } /* Re-enable pointer events for interactive elements */ .project-card .project-info, .project-card .like-btn, .project-card .project-card-image { pointer-events: auto; } .project-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--green-alpha-10), transparent); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .project-card:hover::before { opacity: 1; } /* 3D Tilt Shine Effect */ .project-card-shine { position: absolute; inset: 1px; border-radius: 11px; background-image: radial-gradient(farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%), hsl(135, 25%, 80%) 12%, hsla(135, 40%, 30%, 0.8) 90%); mix-blend-mode: overlay; filter: brightness(0.8) contrast(1.2); opacity: 0; transition: opacity 0.3s ease; z-index: 4; pointer-events: none; } .project-card-wrapper:hover .project-card-shine, .project-card-wrapper.active .project-card-shine, .project-card:hover .project-card-shine, .project-card.active .project-card-shine { opacity: 1; } /* 3D Tilt Glare Effect */ .project-card-glare { position: absolute; inset: 0; border-radius: 16px; /* Same border radius as customer logos */ background-image: radial-gradient(farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%), hsla(135, 100%, 85%, 0.3) 4%, hsla(135, 50%, 75%, calc(0.2 * var(--pointer-from-center, 0))) 10%, hsla(135, 25%, 65%, calc(0.1 * var(--pointer-from-center, 0))) 50%, transparent 100%); mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.3s ease; z-index: 5; pointer-events: none; } .project-card-wrapper:hover .project-card-glare, .project-card-wrapper.active .project-card-glare, .project-card:hover .project-card-glare, .project-card.active .project-card-glare { opacity: 1; } /* Content Transform */ .project-card .project-info { position: relative; z-index: 6; transform: translate3d(calc(var(--pointer-from-left, 0.5) * -6px + 3px), calc(var(--pointer-from-top, 0.5) * -6px + 3px), 0.1px) !important; transition: transform 0.3s ease; } .project-card:hover, .project-card.active { transform: translate3d(0, 0, 0.1px) rotateX(var(--rotate-y, 0deg)) rotateY(var(--rotate-x, 0deg)); } /* Reset transition when not hovering for smooth return */ .project-card:not(:hover) { transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1) !important; transform: translate3d(0, 0, 0.1px) rotateX(0deg) rotateY(0deg) !important; --rotate-x: 0deg !important; --rotate-y: 0deg !important; --pointer-x: 50% !important; --pointer-y: 50% !important; --pointer-from-center: 0 !important; --pointer-from-top: 0.5 !important; --pointer-from-left: 0.5 !important; } .project-placeholder { height: 250px; font-size: 18px; aspect-ratio: 2400/1400; /* Maintain original aspect ratio */ } .project-info { padding: 25px; } .project-role { font-size: 14px; color: var(--accent-color); font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .project-name { font-size: 24px; font-weight: 700; margin-bottom: 15px; } .project-description { font-size: 14px; opacity: 0.8; line-height: 1.5; margin-bottom: 15px; } .project-contact, .project-phone { font-size: 14px; opacity: 0.7; margin-bottom: 8px; } .project-social { margin-top: 20px; display: flex; gap: 15px; } /* // // ===================================================== ███████████████████████████████████████████████ ███ ███ ███ PROJEKT MODAL ███ ███ POP-UP FUNKTIONALITÄT ███ ███ ███ ███████████████████████████████████████████████ ===================================================== // // // */ /* // // ========================================================== ███████████████████████████████████████████████████████ ███ ███ ███ PROJECT MODAL SYSTEM ███ ███ POPUP & GALLERY KOMPLETT ███ ███ ███ ███████████████████████████████████████████████████████ ========================================================== // // // */ /* =========================== */ /* Safe-area variables */ :root { --safe-area-inset-top: env(safe-area-inset-top, 0px); --safe-area-inset-right: env(safe-area-inset-right, 0px); --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); --safe-area-inset-left: env(safe-area-inset-left, 0px); } /* PROJECT POPUP MODAL STYLES - iOS-CLEAN DESIGN - MODIFIED */ /* ========================= PROJECT MODAL VIDEO ENHANCEMENTS ========================= */ /* Video Loading Overlay for Project Modals */ .gallery-item .video-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44, 44, 44, 0.95); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 200; border-radius: 8px; } .gallery-item .video-loading-overlay .video-spinner { position: relative; width: 60px; height: 60px; margin-bottom: 1rem; } .gallery-item .video-loading-overlay .spinner-ring { position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 4px solid transparent; border-top: 4px solid #dc2626; border-radius: 50%; animation: video-spin 1s linear infinite; } .gallery-item .video-loading-overlay .spinner-ring:nth-child(2) { animation-delay: 0.3s; border-top-color: #ef4444; } .gallery-item .video-loading-overlay .spinner-ring:nth-child(3) { animation-delay: 0.6s; border-top-color: #f87171; } @keyframes video-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .gallery-item .video-loading-overlay p { color: #ffffff; font-size: 0.875rem; font-weight: 500; margin: 0; text-align: center; } /* Enhanced Gallery Item Styling */ .gallery-item { position: relative; width: 100%; height: auto; min-height: 300px; border-radius: 8px; overflow: hidden; background: #1a1a1a; cursor: pointer; transition: transform 0.3s ease; } .gallery-item:hover { transform: scale(1.02); } .gallery-item.active { border: 2px solid #dc2626; box-shadow: 0 0 20px rgba(220, 38, 38, 0.3); } .gallery-item video { width: 100%; height: 100%; object-fit: cover; background: #000; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; } /* Video Controls Styling */ .gallery-item video::-webkit-media-controls-panel { background: linear-gradient(transparent, rgba(0,0,0,0.8)); } .gallery-item video::-webkit-media-controls-play-button, .gallery-item video::-webkit-media-controls-timeline, .gallery-item video::-webkit-media-controls-volume-slider { filter: brightness(1.2); } /* Error Message Styling */ .video-error-message { font-family: 'Inter', sans-serif; border: 1px solid rgba(220, 38, 38, 0.3); backdrop-filter: blur(10px); } .video-error-message p { margin: 0 0 0.5rem 0; font-weight: 600; } .video-error-message small { opacity: 0.8; font-size: 0.75rem; } /* Mobile Responsiveness for Video Gallery */ @media (max-width: 768px) { .gallery-item { min-height: 200px; } .gallery-item .video-loading-overlay .video-spinner { width: 40px; height: 40px; } .gallery-item .video-loading-overlay .spinner-ring { width: 40px; height: 40px; } .gallery-play-button { font-size: 2.5rem !important; } .gallery-item-title { font-size: 0.75rem !important; padding: 0.5rem 0 0 0 !important; } } @media (max-width: 480px) { .gallery-item { min-height: 150px; } .gallery-play-button { font-size: 2rem !important; } } /* PROJECT POPUP MODAL STYLES - iOS-CLEAN DESIGN - MODIFIED */ /* =========================== */ /* Modal Backdrop */ .project-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; visibility: hidden; pointer-events: none; /* CRITICAL: Prevent blocking when hidden */ transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow-x: hidden; /* prevent side scroll glitch */ } .project-modal.active { opacity: 1; visibility: visible; pointer-events: auto; /* Enable interactions when active */ } .project-modal-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-dark); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); cursor: pointer; } /* Modal Container - MAXIMUM Z-INDEX for browser overlay protection */ .project-modal-container { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) scale(0.95) translateZ(0) !important; width: 100%; height: 100%; max-width: min(100vw, 90vw); margin: 0 auto; display: flex !important; flex-direction: column; /* ORIGINAL padding restored - only adjusts when browser elements interfere */ padding: calc(20px + max(10px, var(--safe-area-inset-top))) max(16px, calc(var(--safe-area-inset-right) + 16px)) max(16px, calc(var(--safe-area-inset-bottom) + 16px)) max(16px, calc(var(--safe-area-inset-left) + 16px)); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 2147483646 !important; /* One less than header/close to maintain hierarchy */ /* Original overflow handling */ box-sizing: border-box; max-height: calc(100vh - max(20px, var(--safe-area-inset-top)) - max(20px, var(--safe-area-inset-bottom))); /* Force rendering above browser overlays */ isolation: isolate !important; will-change: transform !important; pointer-events: auto !important; } .project-modal.active .project-modal-container { transform: translate(-50%, -50%) scale(1) translateZ(0) !important; } /* MAXIMUM Z-INDEX for modal backdrop to ensure proper layering */ .project-modal-backdrop { z-index: 2147483645 !important; /* Below container but above everything else */ position: fixed !important; isolation: isolate !important; will-change: opacity !important; } /* Ensure the modal itself has maximum priority */ .project-modal { z-index: 2147483645 !important; position: fixed !important; isolation: isolate !important; } /* Desktop: Original padding restored */ @media (min-width: 900px) { .project-modal-container { padding-top: calc(0px + max(0px, var(--safe-area-inset-top))); } } /* ENHANCED Safe Area Detection - Robust protection against browser overlays */ /* =================================================================== */ /* Universal Safe Area Variables - Enhanced protection */ :root { /* Base safe areas with intelligent fallbacks */ --safe-area-inset-top: max(20px, env(safe-area-inset-top, 20px)); --safe-area-inset-right: max(15px, env(safe-area-inset-right, 15px)); --safe-area-inset-bottom: max(15px, env(safe-area-inset-bottom, 15px)); --safe-area-inset-left: max(15px, env(safe-area-inset-left, 15px)); /* Dynamic browser UI detection */ --dynamic-viewport-height: 100vh; --dynamic-viewport-width: 100vw; /* Enhanced z-index stack for browser overlay protection */ --z-modal-max: 2147483647; /* Maximum z-index for critical UI elements */ --z-modal-container: 2147483646; --z-modal-backdrop: 2147483645; } /* Detect viewport height changes (browser UI show/hide) */ @supports (height: 100dvh) { :root { --dynamic-viewport-height: 100dvh; } } /* Progressive enhancement for viewport units */ @supports (height: 100svh) { :root { --dynamic-viewport-height: 100svh; } } /* For devices with notch/dynamic island (safe-area-inset-top > 20px) - ENHANCED */ @media (min-width: 360px) and (orientation: portrait) { .project-modal-header { /* Only add extra padding if safe area is significant */ padding-top: calc(20px + env(safe-area-inset-top)) !important; } .project-modal-close { /* Only adjust if there's a real safe area issue */ margin-right: calc(15px + env(safe-area-inset-right)) !important; } } /* For browsers with visible UI (mobile browsers that change viewport) - ENHANCED */ @media (max-height: 500px) and (max-width: 900px) { .project-modal-header { padding-top: max(35px, calc(env(safe-area-inset-top) + 35px)) !important; /* Extra protection when viewport is compressed */ } .project-modal-container { padding-top: calc(25px + max(15px, env(safe-area-inset-top))) !important; } .project-modal-close { margin-right: max(25px, calc(env(safe-area-inset-right) + 25px)) !important; } } /* Fallback for older browsers - conservative spacing only when needed */ @supports not (padding: env(safe-area-inset-top)) { @media (max-width: 900px) and (max-height: 700px) { .project-modal-header { padding-top: 30px !important; /* Conservative spacing for unknown devices */ } .project-modal-close { margin-right: 30px !important; position: relative; } } } /* Modal Header - ULTRA ROBUST Safe Area Protection */ .project-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; z-index: var(--z-modal-max) !important; /* Maximum possible z-index */ position: relative !important; min-height: 48px; /* Extra safe area adjustments applied dynamically via JS (default 0) */ --modal-extra-top: 0px; /* ENHANCED Safe Area Implementation - Multi-layer protection */ /* Layer 1: Base padding for all devices */ padding: 20px 20px 20px 20px; /* iOS 11.0-11.2 fallback */ padding-top: calc(max(20px, constant(safe-area-inset-top, 20px)) + var(--modal-extra-top)); padding-left: max(20px, constant(safe-area-inset-left, 20px)); padding-right: max(20px, constant(safe-area-inset-right, 20px)); /* Modern browsers - robust calculation like hamburger menu + dynamic top */ padding-top: calc(var(--safe-area-inset-top) + var(--modal-extra-top)); padding-left: var(--safe-area-inset-left); padding-right: var(--safe-area-inset-right); /* Layer 4: Dynamic browser UI compensation */ min-height: max(48px, calc(env(safe-area-inset-top) + 28px)); /* Enhanced backdrop for maximum readability */ background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.1)); backdrop-filter: var(--backdrop-blur-light); -webkit-backdrop-filter: var(--backdrop-blur-light); border-radius: 12px 12px 0 0; } /* Fallback für Browser ohne safe-area-inset Support - Same as hamburger menu */ @supports not (padding: env(safe-area-inset-top)) { .project-modal-header { padding-top: 40px !important; /* Extra Fallback für mehr Abstand */ padding-left: 35px !important; padding-right: 35px !important; } } .project-modal-title { /* Allow runtime resizing like social buttons */ --title-scale: 1; font-size: calc(var(--title-scale) * clamp(18px, 4vw, 36px)); font-weight: 700; color: var(--text-white); margin: 0; flex: 1; /* ORIGINAL spacing restored */ padding-right: 5px; /* Prevent text overflow */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; /* ORIGINAL max-width restored */ max-width: calc(100% - 60px); /* Perfect alignment */ display: flex; align-items: center; justify-content: flex-start; line-height: 1; height: calc(var(--title-scale) * clamp(44px, 8vw, 56px)); margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; vertical-align: middle; /* MAXIMUM visibility over browser elements */ z-index: 2147483647 !important; position: relative !important; isolation: isolate !important; transform: translateZ(0) !important; /* Force hardware acceleration */ } /* MAXIMUM Z-INDEX close button - ALWAYS above browser overlays */ .project-modal-close { background: var(--red-alpha-10) !important; border: 1px solid var(--red-alpha-30) !important; border-radius: 50%; /* Responsive sizing for better touch targets */ width: clamp(44px, 8vw, 56px); height: clamp(44px, 8vw, 56px); display: flex !important; align-items: center; justify-content: center; cursor: pointer; color: var(--text-white) !important; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Enhanced safe area positioning like mobile-nav-social */ position: relative; flex-shrink: 0; margin-left: auto; align-self: flex-start; /* Better mobile touch target */ min-width: clamp(44px, 8vw, 56px); min-height: clamp(44px, 8vw, 56px); margin-top: 0; margin-bottom: 0; padding: 0; /* ENHANCED Safe Area Insets for close button - Same approach as hamburger menu */ /* Fallback margin */ margin-right: 15px; /* iOS 11.0-11.2 fallback */ margin-right: constant(safe-area-inset-right); /* Modern browsers - robust calculation like hamburger menu */ margin-right: calc(max(15px, calc(env(safe-area-inset-right) + 15px)) + var(--modal-extra-right, 0px)); /* Ensure button positioning is never cut off */ right: calc(max(0px, env(safe-area-inset-right)) + var(--modal-extra-right, 0px)); vertical-align: middle; /* MAXIMUM visibility over browser elements */ z-index: 2147483647 !important; position: relative !important; isolation: isolate !important; transform: translateZ(0) !important; /* Force hardware acceleration */ will-change: transform !important; pointer-events: auto !important; } /* Fallback für Browser ohne safe-area-inset Support - Same as hamburger menu */ @supports not (margin-right: env(safe-area-inset-right)) { .project-modal-close { margin-right: 35px !important; /* Extra Fallback für mehr Abstand */ right: 20px !important; } } /* Enhanced protection for very small screens or when browser UI is prominent - Like hamburger menu */ @media (max-height: 600px) and (max-width: 900px) { .project-modal-header { padding-top: max(35px, calc(env(safe-area-inset-top) + 35px)) !important; padding-left: max(25px, calc(env(safe-area-inset-left) + 25px)) !important; padding-right: max(25px, calc(env(safe-area-inset-right) + 25px)) !important; } .project-modal-close { margin-right: max(25px, calc(env(safe-area-inset-right) + 25px)) !important; } } /* Extra protection for notch devices and dynamic island */ @media (min-width: 360px) and (orientation: portrait) { .project-modal-header { /* Only add extra padding if safe area is significant (like iPhone with notch) */ padding-top: calc(20px + env(safe-area-inset-top)); } .project-modal-close { /* Only adjust if there's a real safe area issue */ margin-right: calc(15px + env(safe-area-inset-right)); } } /* SVG icon responsive sizing */ .project-modal-close svg { width: clamp(18px, 4vw, 24px); height: clamp(18px, 4vw, 24px); transition: all 0.3s ease; } /* Modal content as single scroll area with sticky header on mobile */ @media (max-width: 900px) { .project-modal-header { position: sticky; top: max(0px, var(--safe-area-inset-top)); z-index: 2; background: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0.1)); backdrop-filter: var(--backdrop-blur-light); -webkit-backdrop-filter: var(--backdrop-blur-light); /* Enhanced mobile safe area */ margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--white-alpha-10); } .project-modal-content { display: flex; flex-direction: column; overflow-y: auto !important; -webkit-overflow-scrolling: touch; max-height: calc(100vh - max(120px, calc(var(--safe-area-inset-top) + 100px)) - max(40px, calc(var(--safe-area-inset-bottom) + 20px))); overscroll-behavior: contain; } .project-modal-media, .project-modal-info { max-height: none !important; overflow: visible !important; } /* Enhanced container for mobile */ .project-modal-container { width: calc(100vw - max(24px, calc(var(--safe-area-inset-left) + var(--safe-area-inset-right) + 24px))); height: calc(100vh - max(40px, calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom) + 40px))); max-width: 100vw; max-height: 100vh; } } /* Ensure gallery never overflows viewport width */ .project-modal-gallery, .project-modal-media, .project-modal-info { max-width: 100vw; } /* Prevent right-edge bleed on mobile */ @media (max-width: 900px) { .project-modal, .project-modal-container, .project-modal-content, .project-modal-gallery { margin-left: 0; margin-right: -10px; /* Pushes button 10px beyond normal right edge */ padding-left: max(8px, var(--safe-area-inset-left)); padding-right: max(8px, var(--safe-area-inset-right)); } .gallery-item { width: 100%; max-width: calc(100vw - max(16px, var(--safe-area-inset-left) + var(--safe-area-inset-right))); } } /* Prevent horizontal jiggle/overflow for modal and container */ .project-modal, .project-modal-container, .project-modal-content, .project-modal-gallery { box-sizing: border-box; } .project-modal, .project-modal-container { overflow-x: hidden; } /* Clamp the modal viewport height and account for safe-area */ @media (max-width: 900px) { .project-modal-container { height: auto; max-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom)); } } /* Apply safe-area paddings on mobile to header and modal container */ @media (max-width: 900px) { .project-modal-container { padding-top: calc(20px + var(--safe-area-inset-top)); padding-left: max(12px, var(--safe-area-inset-left)); padding-right: max(12px, var(--safe-area-inset-right)); padding-bottom: max(12px, var(--safe-area-inset-bottom)); max-width: 100vw; } } /* Scroll behavior tuning to reduce side jiggle */ .project-modal-gallery { scroll-snap-type: y proximity; overscroll-behavior: contain; padding-bottom: max(12px, var(--safe-area-inset-bottom)); } .gallery-item { scroll-snap-align: start; margin-left: auto; margin-right: auto; } /* Mobile: Larger description text and better line-height for readability */ @media (max-width: 768px) { .project-modal-description { font-size: 17px !important; /* moderat größer */ line-height: 1.6 !important; } } .project-modal-close:hover { background: var(--red-alpha-20); border-color: var(--red-68-50); color: var(--error-light); transform: translateX(15px) scale(1.05); } /* Touch devices optimization - Enhanced */ @media (hover: none) and (pointer: coarse) { .project-modal-close { width: clamp(48px, 10vw, 60px); height: clamp(48px, 10vw, 60px); min-width: clamp(48px, 10vw, 60px); min-height: clamp(48px, 10vw, 60px); /* Better touch feedback */ -webkit-tap-highlight-color: transparent; } .project-modal-close:active { background: var(--red-alpha-30); transform: scale(0.95); } .project-modal-close svg { width: clamp(20px, 5vw, 28px); height: clamp(20px, 5vw, 28px); } /* Enhanced title sizing for touch devices */ .project-modal-title { font-size: clamp(16px, 5vw, 32px); line-height: 1.2; } } /* Modal Content - LARGER HEIGHT */ .project-modal-content { flex: 1; background: var(--modal-bg); border-radius: 24px; border: 1px solid var(--white-alpha-10); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); overflow: hidden; box-shadow: 0 20px 40px var(--overlay-medium); max-height: 90vh; /* Added maximum height */ } .project-modal-main { display: grid; height: 100%; min-height: 80vh; /* CSS Grid transitions for smooth responsive behavior */ transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1), gap 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Media Section - SCROLLABLE GALLERY */ .project-modal-media { padding: 30px; border-right: 1px solid var(--white-alpha-10); display: flex; flex-direction: column; gap: 20px; overflow-y: auto; overflow-x: hidden; max-height: 100%; /* Smooth transitions for padding changes */ transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Info Section with smooth transitions */ .project-modal-info { padding: 30px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; /* Smooth transitions for all responsive changes */ transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* NEUE SCROLLBARE GALERIE - ArtStation Style */ .project-modal-gallery { display: flex; flex-direction: column; gap: 20px; /* Force single scroll on mobile: disable inner scrolls */ @media (max-width: 768px), (hover: none) and (pointer: coarse) { .project-modal-media, .project-modal-info { overflow: visible !important; max-height: none !important; } } width: 100%; } .gallery-item { position: relative; width: 100%; border-radius: 16px; /* Same border radius as customer logos */ overflow: hidden; background: var(--tertiary-bg); aspect-ratio: 16/9; /* Konsistente 16:9 Ratio */ cursor: pointer; transition: all 0.3s ease; max-width: 100%; box-sizing: border-box; } .gallery-item:hover { transform: scale(1.02); /* box-shadow entfernt - kein Glow mehr */ } .gallery-item img, .gallery-item video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Video Play Overlay für Videos */ .gallery-item-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--black-alpha-40); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .gallery-item-overlay { opacity: 1; } .gallery-play-button { background: var(--green-darker-alpha); border-radius: 50%; /* Responsive dimensions - 50% smaller */ width: clamp(20px, 4vw, 30px); height: clamp(20px, 4vw, 30px); display: flex; align-items: center; justify-content: center; color: var(--primary-bg); /* Responsive font size - 50% smaller */ font-size: clamp(8px, 1.5vw, 12px); } /* Info Section - This was already defined above with transitions */ .project-modal-info::-webkit-scrollbar { width: 6px; } .project-modal-info::-webkit-scrollbar-track { background: var(--white-alpha-10); border-radius: 3px; } .project-modal-info::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 3px; } .project-modal-category { color: var(--accent-color); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .project-modal-description { color: var(--text-white); font-size: 16px; line-height: 1.6; opacity: 0.9; /* Smooth transitions for responsive font changes */ transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1), line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Project Details */ .project-modal-details { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--white-alpha-05); border-radius: 16px; border: 1px solid var(--white-alpha-10); } .project-detail-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--white-alpha-10); } .project-detail-item:last-child { border-bottom: none; } .project-detail-label { color: var(--white-alpha-70); font-size: 14px; font-weight: 500; } .project-detail-value { color: var(--text-white); font-size: 14px; font-weight: 600; text-align: right; } /* Project Tags */ .project-modal-tags { display: flex; flex-wrap: wrap; gap: 8px; } .project-tag { background: var(--green-alpha-20); color: var(--accent-color); border: 1px solid var(--green-alpha-30); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; letter-spacing: 0.3px; } /* =========================== */ /* SMOOTH RESPONSIVE MODAL DESIGN - RECHTE SEITE PRIORITY */ /* =========================== */ /* Base modal layout with CSS Grid */ .project-modal-main { display: grid; height: 100%; min-height: 80vh; transition: grid-template-columns 0.3s ease, gap 0.3s ease; } /* LARGE SCREENS (1400px+) - Maximaler Platz für Galerie */ @media (min-width: 1400px) { .project-modal-main { grid-template-columns: 3fr 1fr; gap: 0; } .project-modal-media { padding: 35px; } .project-modal-info { padding: 35px; min-width: 320px; /* Mindestbreite für Lesbarkeit */ } } /* DESKTOP (1200-1399px) - Standard Desktop */ @media (max-width: 1399px) and (min-width: 1200px) { .project-modal-main { grid-template-columns: 2.5fr 1fr; gap: 0; } .project-modal-media { padding: 30px; } .project-modal-info { padding: 30px; min-width: 300px; } } /* MEDIUM DESKTOP (1000-1199px) - Erste Anpassung der rechten Seite */ @media (max-width: 1199px) and (min-width: 1000px) { .project-modal-main { grid-template-columns: 2.2fr 1.1fr; /* Rechte Seite wird größer */ gap: 0; } .project-modal-media { padding: 28px; } .project-modal-info { padding: 28px; min-width: 280px; font-size: 15px; /* Schrift etwas kleiner */ } .project-modal-title { font-size: clamp(22px, 3.5vw, 32px); } } /* SMALL DESKTOP (900-999px) - Weitere Anpassung */ @media (max-width: 999px) and (min-width: 900px) { .project-modal-main { grid-template-columns: 2fr 1.2fr; /* Rechte Seite weiter vergrößert */ gap: 0; } .project-modal-media { padding: 25px; } .project-modal-info { padding: 25px; min-width: 260px; font-size: 14px; } .project-modal-title { font-size: clamp(20px, 3vw, 28px); } .project-modal-description { font-size: 15px; line-height: 1.5; } } /* LARGE TABLET (800-899px) - Ausgewogeneres Verhältnis */ @media (max-width: 899px) and (min-width: 800px) { .project-modal-main { grid-template-columns: 1.8fr 1.3fr; /* Rechte Seite noch größer */ gap: 0; } .project-modal-media { padding: 22px; } .project-modal-info { padding: 22px; min-width: 240px; font-size: 14px; } .project-modal-title { font-size: clamp(18px, 2.8vw, 24px); } .project-modal-description { font-size: 14px; line-height: 1.4; } .gallery-item { aspect-ratio: 16/10; } } /* TABLET (769-799px) - Letzte Zweispalten-Darstellung */ @media (max-width: 799px) and (min-width: 769px) { .project-modal-main { grid-template-columns: 1.6fr 1.4fr; /* Fast ausgewogen */ gap: 0; } .project-modal-media { padding: 20px; } .project-modal-info { padding: 20px; min-width: 220px; font-size: 13px; } .project-modal-title { font-size: clamp(16px, 2.5vw, 22px); } .project-modal-description { font-size: 13px; line-height: 1.4; } .project-detail-item { padding: 6px 0; } .project-detail-label, .project-detail-value { font-size: 12px; } } /* MOBILE (768px und kleiner) - Einspaltig with Enhanced Safe Area */ @media (max-width: 768px) { .project-modal-container { width: calc(100vw - max(20px, calc(var(--safe-area-inset-left) + var(--safe-area-inset-right) + 20px))); height: calc(100vh - max(40px, calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom) + 40px))); padding: max(16px, calc(var(--safe-area-inset-top) + 16px)) max(12px, calc(var(--safe-area-inset-right) + 12px)) max(12px, calc(var(--safe-area-inset-bottom) + 12px)) max(12px, calc(var(--safe-area-inset-left) + 12px)); transform: translate(-50%, -50%) scale(0.95); max-width: 100vw; max-height: 100vh; box-sizing: border-box; } .project-modal.active .project-modal-container { transform: translate(-50%, -50%) scale(1); } .project-modal-header { /* Enhanced mobile header spacing */ margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--white-alpha-15); } .project-modal-main { grid-template-columns: 1fr; grid-template-rows: 1.2fr auto; min-height: auto; gap: 15px; } .project-modal-media { border-right: none; border-bottom: 1px solid var(--white-alpha-10); padding: 16px; max-height: 55vh; overflow-y: auto; } .project-modal-info { padding: 16px; max-height: 35vh; overflow-y: auto; font-size: 13px; } .project-modal-title { font-size: clamp(18px, 5vw, 24px); line-height: 1.3; } .project-modal-description { font-size: 14px; line-height: 1.4; } .gallery-item { aspect-ratio: 16/9; border-radius: 12px; } .project-modal-close { width: clamp(46px, 9vw, 56px); height: clamp(46px, 9vw, 56px); min-width: clamp(46px, 9vw, 56px); min-height: clamp(46px, 9vw, 56px); } .project-detail-item { flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 0; } .project-detail-value { text-align: left; } .project-modal-like-btn { padding: 12px 20px; font-size: 14px; } .like-btn { padding: 8px 14px; font-size: 13px; } .like-icon { width: 18px; height: 18px; } } /* Extra Small Mobile - OPTIMIZED with Full Safe Area Support */ @media (max-width: 480px) { .project-modal-container { width: calc(100vw - max(16px, calc(var(--safe-area-inset-left) + var(--safe-area-inset-right) + 16px))); height: calc(100vh - max(32px, calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom) + 32px))); padding: max(12px, calc(var(--safe-area-inset-top) + 12px)) max(8px, calc(var(--safe-area-inset-right) + 8px)) max(8px, calc(var(--safe-area-inset-bottom) + 8px)) max(8px, calc(var(--safe-area-inset-left) + 8px)); border-radius: 16px; transform: translate(-50%, -50%) scale(0.95); max-width: 100vw; max-height: 100vh; box-sizing: border-box; } .project-modal-header { margin-bottom: 16px; padding-bottom: 12px; } .project-modal-info { padding: 16px; max-height: 40vh; overflow-y: auto; } .project-modal-title { font-size: clamp(16px, 6vw, 22px); line-height: 1.2; } .project-modal-close { width: clamp(44px, 10vw, 52px); height: clamp(44px, 10vw, 52px); min-width: clamp(44px, 10vw, 52px); min-height: clamp(44px, 10vw, 52px); } .project-modal-close svg { width: clamp(18px, 5vw, 22px); height: clamp(18px, 5vw, 22px); } .project-detail-item { flex-direction: column; align-items: flex-start; gap: 4px; } .project-detail-value { text-align: left; } /* Enhanced mobile like button adjustments */ .project-modal-like-btn { padding: 10px 16px; font-size: 13px; } /* Enhanced mobile language button adjustments */ .project-modal-lang-btn { padding: 8px 16px; font-size: 12px; min-width: 45px; } .project-modal-language-section { padding: 10px; margin-top: 10px; margin-bottom: 10px; } .like-btn { padding: 6px 12px; font-size: 12px; } .like-icon { width: 16px; height: 16px; } } /* Extra Small Mobile - OPTIMIZED */ @media (max-width: 480px) { .project-modal-container { width: 100vw; height: 100vh; padding: 10px; border-radius: 0; transform: translate(-50%, -50%) scale(0.95); } .project-modal.active .project-modal-container { transform: translate(-50%, -50%) scale(1); } .project-modal-content { border-radius: 16px; } .project-modal-media, .project-modal-info { padding: 12px; } .gallery-item { aspect-ratio: 16/9; /* Konsistente Ratio für alle Geräte */ border-radius: 16px; /* Same border radius as customer logos */ } .project-modal-info { max-height: 35vh; } } /* // // ============================================================= ███████████████████████████████████████████████████████████ ███ ███ ███ STUDENTWORK SECTION ███ ███ VIDEO PORTFOLIO SHOWCASE ███ ███ ███ ███████████████████████████████████████████████████████████ ============================================================= // // // */ /* =========================== */ /* ENHANCED STUDENT WORK SECTION */ /* =========================== */ .student-work { padding: 100px 50px; background: var(--primary-bg); text-align: center; position: relative; } .student-title { font-size: clamp(60px, 12vw, 120px); font-weight: 800; text-align: center; margin-bottom: 40px; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; } /* // // ===================================================== ███████████████████████████████████████████████ ███ ███ ███ VIDEO FUNCTIONS ███ ███ HAUPTVIDEO STEUERUNG ███ ███ ███ ███████████████████████████████████████████████ ===================================================== // // // */ /* Enhanced Main Video Section */ .main-video-section { max-width: 900px; margin: 0 auto 40px; } .video-title { font-size: clamp(28px, 6vw, 36px); font-weight: 500; margin-bottom: 30px; color: var(--text-white); transition: color 0.3s ease; } .video-container { position: relative; background: var(--tertiary-bg); border-radius: 16px; border: 1px solid var(--border-extra-dark); overflow: hidden; aspect-ratio: 16/9; box-shadow: 0 10px 30px var(--overlay-medium); transition: box-shadow 0.3s ease; /* Only transition box-shadow, not transform */ transform: none !important; /* Prevent any transforms */ } .video-container:hover { box-shadow: 0 15px 40px var(--green-alpha-20); /* transform: translateY(-2px); REMOVED - was causing video to flicker */ } .video-embed { width: 100%; height: 100%; border: none; border-radius: 16px; object-fit: cover; position: absolute; top: 0; left: 0; } .main-video-preview { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 16px; display: block; position: absolute; top: 0; left: 0; } .main-video-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay-light); border-radius: 16px; z-index: 1; transition: all 0.3s ease; } .video-container:hover .main-video-overlay { background: var(--black-alpha-40); } /* Enhanced Play Button - Responsive - 50% smaller */ .play-video-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--green-alpha-95-bg); color: var(--primary-bg); border: none; /* Responsive padding based on viewport - 50% smaller */ padding: clamp(6px, 1.25vw, 10px) clamp(9px, 1.75vw, 15px); border-radius: clamp(15px, 4vw, 30px); /* Responsive font size - 50% smaller */ font-size: clamp(6px, 1vw, 8px); font-weight: 600; cursor: pointer; transition: all 0.3s ease; z-index: 3; box-shadow: 0 8px 25px var(--green-alpha-40-shadow); display: flex; align-items: center; gap: clamp(3px, 0.75vw, 6px); backdrop-filter: var(--backdrop-blur-light); } .play-video-btn:hover { background: var(--accent-color); transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 12px 35px var(--green-alpha-60-border); } .play-video-btn:active { transform: translate(-50%, -50%) scale(0.98); } .play-icon { /* Responsive font size for play icon - 50% smaller */ font-size: clamp(7px, 1.25vw, 10px); margin-left: 4px; } .play-text { font-weight: 600; letter-spacing: 0.5px; } /* Enhanced Video Controls */ .video-controls { display: flex; justify-content: center; align-items: center; gap: 30px; margin: 30px 0; padding: 20px; } .control-btn { background: var(--tertiary-bg); color: var(--accent-color); border: 2px solid var(--accent-color); /* Responsive padding - 50% smaller */ padding: clamp(4px, 0.75vw, 6px) clamp(6px, 1.25vw, 10px); border-radius: clamp(10px, 2vw, 15px); /* Responsive font size - 50% smaller */ font-size: clamp(6px, 0.9vw, 7px); font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: clamp(2px, 0.5vw, 4px); /* Responsive min-width - 50% smaller */ min-width: clamp(40px, 7.5vw, 60px); justify-content: center; } .control-btn:hover { background: var(--accent-color); color: var(--primary-bg); transform: translateY(-2px); box-shadow: 0 8px 20px var(--green-alpha-30); } .control-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .control-btn:disabled:hover { background: var(--tertiary-bg); color: var(--accent-color); box-shadow: none; } /* Desktop: Make control buttons same size as more-videos-btn */ @media (min-width: 769px) { .control-btn { padding: 16px 35px !important; border-radius: 30px !important; font-size: 16px !important; min-width: auto !important; gap: 12px !important; } } .arrow-icon { font-size: 18px; font-weight: bold; } .video-counter { background: var(--green-alpha-10); color: var(--accent-color); padding: 12px 20px; border-radius: 25px; font-weight: 600; font-size: 16px; border: 1px solid var(--green-alpha-30); min-width: 80px; } /* Enhanced More Videos Button */ .more-videos-controls { margin: 40px 0; } .more-videos-btn { background: var(--tertiary-bg); color: var(--text-white); border: 2px solid var(--accent-color); padding: 16px 35px; border-radius: 30px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 12px; box-shadow: 0 4px 15px var(--shadow-medium); } .more-videos-btn:hover { background: var(--accent-color); color: var(--primary-bg); transform: translateY(-3px); box-shadow: 0 10px 30px var(--green-alpha-40-shadow); } .gallery-icon { font-size: 18px; } .arrow { transition: transform 0.3s ease; font-size: 14px; font-weight: bold; } .arrow.rotated { transform: rotate(180deg); } /* // // ===================================================== ███████████████████████████████████████████████ ███ ███ ███ VIDEO GALLERY ███ ███ THUMBNAIL GRID SYSTEM ███ ███ ███ ███████████████████████████████████████████████ ===================================================== // // // */ /* Enhanced Video Gallery */ .video-gallery { margin-top: 50px; opacity: 0; transform: translateY(30px); transition: all 0.5s ease; background: var(--secondary-bg); border-radius: 20px; padding: 30px; backdrop-filter: var(--backdrop-blur-light); border: 1px solid var(--green-alpha-20); } .video-gallery.show { opacity: 1; transform: translateY(0); display: block !important; } .gallery-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--green-alpha-30); } .gallery-title { font-size: 24px; font-weight: 600; color: var(--accent-color); margin: 0; /* FIXED: Extend gallery title closer to close button */ flex: 1; padding-right: 5px; /* Small padding to get close to close button */ max-width: calc(100% - 60px); /* Use more space, reserve minimal space for close button */ /* FIXED: Perfect center alignment of text with button center */ display: flex; align-items: center; justify-content: flex-start; line-height: 1; height: 40px; /* Same height as close button */ /* FIXED: Center the text baseline with button center */ padding-top: 1px; /* Fine-tune vertical alignment to center text baseline */ } .close-gallery-btn { background: var(--red-alpha-10); color: var(--error-color); border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; /* FIXED: Move close button 50% further to the right */ margin-left: 50px; transform: translateX(20px); } .close-gallery-btn:hover { background: var(--red-alpha-20); color: var(--error-light); transform: scale(1.1); } /* Enhanced Video Grid */ .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; max-width: 1200px; margin: 0 auto; } .video-thumbnail { background: var(--tertiary-bg); border-radius: 16px; overflow: hidden; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; position: relative; } .video-thumbnail:hover { transform: translateY(-8px) scale(1.02); border-color: var(--accent-color); box-shadow: 0 15px 30px var(--green-alpha-30); } .video-thumbnail.active { border-color: var(--accent-color); box-shadow: 0 0 25px var(--loading-cube-shadow); background: var(--green-alpha-10); } .thumbnail-wrapper { position: relative; aspect-ratio: 16/9; overflow: hidden; } .video-thumb-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .video-thumbnail:hover .video-thumb-image { transform: scale(1.05); } .video-thumb-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--black-70-overlay); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.3s ease; } .video-thumbnail:hover .video-thumb-overlay { opacity: 1; } .video-thumb-overlay .play-icon { color: var(--accent-color); font-size: clamp(16px, 3vw, 32px); text-shadow: 0 0 10px var(--loading-cube-shadow); } .video-duration { position: absolute; bottom: 8px; right: 8px; background: var(--black-80-shadow); color: var(--text-white); padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; } .thumbnail-info { padding: 15px; text-align: left; } .thumbnail-title { font-size: 16px; font-weight: 600; color: var(--text-white); margin: 0 0 5px 0; line-height: 1.3; } .thumbnail-category { font-size: 12px; color: var(--accent-color); margin: 0; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } /* // // ===================================================== ███████████████████████████████████████████████ ███ ███ ███ SKILLS SECTION ███ ███ SOFTWARE Knowledge SHOWCASE ███ ███ ███ ███████████████████████████████████████████████ ===================================================== // // // */ /* =========================== */ /* IMPROVED DESKTOP SOFTWARE Knowledge SECTION - 7 BUTTONS PER ROW */ /* =========================== */ /* Skills Section - Main Container */ .skills-section { padding: 100px 50px; background: var(--primary-bg); text-align: center; } .skills-title { font-size: 48px; font-weight: 600; margin-bottom: 60px; } /* IMPROVED DESKTOP SKILLS GRID - 6 BUTTONS PER ROW, LARGER SIZE */ .skills-grid { max-width: 1400px; /* Adjusted max width for 6 columns */ margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); /* Changed to 6 columns */ gap: 25px; /* Larger gap between buttons */ justify-content: center; padding: 0 20px; } .skill-btn { background: var(--secondary-bg); border: 2px solid var(--border-extra-dark); border-radius: 16px; /* Same border radius as customer logos */ padding: 25px 20px; /* Larger padding for 6 columns */ font-size: 16px; /* Larger font size */ font-weight: 600; color: var(--text-white); text-decoration: none; transition: all 0.3s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 110px; /* Larger height */ width: 100%; word-wrap: break-word; hyphens: auto; position: relative; overflow: hidden; line-height: 1.3; /* Better line height for readability */ } .skill-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--green-alpha-20), transparent); transition: left 0.5s ease; } .skill-btn:hover::before { left: 100%; } .skill-btn:hover { background: var(--accent-color); border-color: var(--accent-color); transform: translateY(-5px); color: var(--primary-bg); box-shadow: 0 15px 35px var(--green-alpha-40-shadow); /* Enhanced shadow */ } .skill-btn:active { transform: translateY(-2px); } /* // // ===================================================== ███████████████████████████████████████████████████████ ███ ███ ███ FOOTER SECTION ███ ███ SITE NAVIGATION ███ ███ ███ ███████████████████████████████████████████████████████ ===================================================== // // // */ /* Footer */ .footer { padding: 40px 50px; padding-left: max(50px, env(safe-area-inset-left)); padding-right: max(50px, env(safe-area-inset-right)); padding-bottom: max(40px, env(safe-area-inset-bottom)); background: var(--secondary-bg); border-top: 1px solid var(--white-alpha-10); display: flex; justify-content: space-between; align-items: center; } .footer p { font-size: 14px; opacity: 0.7; } .footer-links { display: flex; gap: 30px; } .footer-links a { color: var(--text-white); text-decoration: none; font-size: 14px; opacity: 0.7; transition: all 0.3s ease; } .footer-links a:hover { opacity: 1; color: var(--accent-color); } /* // // ================================================================= ████████████████████████████████████████████████████████████████ ███ ███ ███ ABOUT ME PAGE ███ ███ SEITEN BEREICHE ███ ███ ███ ████████████████████████████████████████████████████████████████ ================================================================= // // // */ /* // // ============================================================= ███████████████████████████████████████████████████████████ ███ ███ ███ ABOUT PAGE CONTENT ███ ███ PERSÖNLICHE INFORMATIONEN ███ ███ ███ ███████████████████████████████████████████████████████████ ============================================================= // // // */ /* Page-specific styles */ .about-main, .contact-main, .legal-main { margin-top: 80px; min-height: calc(100vh - 80px); } .about-hero, .contact-hero, .legal-hero { padding: 80px 50px; padding-left: max(50px, env(safe-area-inset-left)); padding-right: max(50px, env(safe-area-inset-right)); background: var(--primary-bg); } .about-container, .contact-container, .legal-container { max-width: 1200px; margin: 0 auto; } .page-title { font-size: clamp(48px, 8vw, 96px); font-weight: 700; margin-bottom: 60px; color: var(--text-white); } /* About page specific */ .about-content { display: grid; grid-template-columns: 2fr 1fr; gap: 80px; align-items: start; } .about-text { color: var(--text-white); } .intro-text { font-size: 20px; font-weight: 400; margin-bottom: 30px; line-height: 1.6; } .about-text p { font-size: 16px; line-height: 1.7; margin-bottom: 25px; opacity: 0.9; } /* Profile image section */ .about-image-section { display: flex; flex-direction: column; gap: 20px; } .about-placeholder { height: 300px; border-radius: 16px; /* Same border radius as customer logos */ font-size: 18px; aspect-ratio: 2400/1400; } /* // // // ===================================================== ███████████████████████████████████████████████ ███ ███ ███ Contact ███ ███ Page ███ ███ ███ ███████████████████████████████████████████████ ===================================================== // // // */ /* CONTACT PAGE - FORM WITH ADDED SPACING */ .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; position: relative; } .contact-info { color: var(--text-white); } .contact-info h2 { font-size: 28px; font-weight: 600; margin-bottom: 15px; line-height: 1.3; } .contact-subtitle { font-size: 16px; opacity: 0.8; margin-bottom: 20px; } /* ADDED SPACING STYLES */ .contact-spacing { font-size: 16px; margin-bottom: 20px; height: 20px; } .contact-details { display: flex; flex-direction: column; gap: 15px; } .contact-item { font-size: 16px; line-height: 1.6; } .contact-item strong { color: var(--accent-color); font-weight: 600; } .contact-form-section { position: relative; margin-top: -194px; align-self: start; } .contact-form { background: var(--secondary-bg); padding: 40px; border-radius: 16px; /* Same border radius as customer logos */ border: 1px solid var(--white-alpha-10); transition: all 0.3s ease; } /* MESSAGE AREA POSITIONED */ #messageArea { position: absolute; top: -9px; left: 0; right: 0; z-index: 10; } /* When message is shown, push form down */ .contact-form.with-message { margin-top: 274px; transition: margin-top 0.6s ease; } /* ENHANCED SUCCESS/ERROR MESSAGE BOX STYLING */ .form-message { padding: 20px 25px; border-radius: 16px; /* Same border radius as customer logos */ margin-bottom: 20px; text-align: left; font-weight: 500; font-size: 14px; line-height: 1.6; backdrop-filter: var(--backdrop-blur-light); border: 2px solid; box-shadow: 0 8px 25px var(--shadow-medium); } .form-message.success { background: linear-gradient(135deg, var(--green-alpha-15), var(--green-secondary-10)); color: var(--accent-color); border-color: var(--green-alpha-50); box-shadow: 0 8px 25px var(--green-alpha-20), 0 0 30px var(--green-alpha-10), inset 0 1px 0 var(--green-alpha-20); } .form-message.error { background: linear-gradient(135deg, var(--red-error-15), var(--error-darker-10)); color: var(--error-light); border-color: var(--error-50-border); box-shadow: 0 8px 25px var(--red-error-20), 0 0 30px var(--error-10-shadow), inset 0 1px 0 var(--red-error-20); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; } .form-group { display: flex; flex-direction: column; margin-bottom: 25px; } .form-group label { color: var(--text-white); font-weight: 500; margin-bottom: 8px; font-size: 14px; } .form-group input, .form-group textarea { background: var(--tertiary-bg); border: 1px solid var(--border-extra-medium); border-radius: 6px; padding: 12px 15px; color: var(--text-white); font-size: 16px; font-family: inherit; transition: all 0.3s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-color); background: var(--border-extra-dark); box-shadow: 0 0 10px var(--green-alpha-30); } .form-group textarea { resize: vertical; min-height: 120px; } .submit-btn { background: var(--accent-color); color: var(--primary-bg); border: none; padding: 15px 40px; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; width: 100%; position: relative; overflow: hidden; } .submit-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--white-alpha-20), transparent); transition: left 0.5s ease; } .submit-btn:hover::before { left: 100%; } .submit-btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 25px var(--green-alpha-30); } .submit-btn:active { transform: translateY(0); } /* // // // ===================================================== ███████████████████████████████████████████████ ███ ███ ███ Data Protection ███ ███ Page ███ ███ ███ ███████████████████████████████████████████████ ===================================================== // // // */ /* =========================== */ /* LAZY LOADING STYLES */ /* =========================== */ /* Lazy loading image styles */ .lazy-load { opacity: 0; transition: opacity 0.6s ease-in-out; } .lazy-load.loaded { opacity: 1; } /* Lazy image container with skeleton loading */ .lazy-image-container { position: relative; overflow: hidden; } /* Skeleton loading animation */ .lazy-skeleton { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, var(--tertiary-bg) 25%, var(--skeleton-highlight) 50%, var(--tertiary-bg) 75%); background-size: 200% 100%; animation: skeletonLoading 1.5s infinite; border-radius: inherit; z-index: 1; } .lazy-image-container.loaded .lazy-skeleton { opacity: 0; pointer-events: none; transition: opacity 0.3s ease-out; } @keyframes skeletonLoading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Improved hero image lazy loading */ .hero-image.lazy-load { opacity: 0; transition: opacity 0.8s ease-in-out; } .hero-image.lazy-load.loaded { opacity: 1; } /* Video thumbnail lazy loading */ .video-thumb-image.lazy-load { opacity: 0; transition: opacity 0.5s ease-in-out; } .video-thumb-image.lazy-load.loaded { opacity: 1; } /* Main video preview lazy loading */ .main-video-preview.lazy-load { opacity: 0; transition: opacity 0.6s ease-in-out; } .main-video-preview.lazy-load.loaded { opacity: 1; } /* Project placeholder lazy loading */ .project-placeholder.lazy-image-container { background: var(--gradient-secondary); border: 1px solid var(--border-light); position: relative; } .project-placeholder.lazy-image-container.loaded { background: none; border: none; } /* About page image lazy loading */ .about-placeholder.lazy-image-container { background: var(--gradient-secondary); border: 1px solid var(--border-light); position: relative; } .about-placeholder.lazy-image-container.loaded { background: none; border: none; } /* University and customer logo lazy loading */ .university-logo.lazy-load, .customer-placeholder.lazy-load { opacity: 0; transition: opacity 0.5s ease-in-out; } .university-logo.lazy-load.loaded, .customer-placeholder.lazy-load.loaded { opacity: 1; } /* Lazy loading blur effect for smooth transitions */ .lazy-load:not(.loaded) { filter: blur(5px); transform: scale(1.02); } .lazy-load.loaded { filter: blur(0); transform: scale(1); } /* =========================== */ /* ENHANCED LIKE SYSTEM STYLES */ /* =========================== */ /* Project Card Like Section */ .project-like-section { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--white-alpha-10); display: flex; justify-content: center; } .like-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 25px; padding: 8px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.3s ease; color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 500; position: relative; overflow: hidden; } .like-btn:hover { border-color: var(--direct-white-60); background: var(--direct-white-10); color: var(--direct-white-solid); transform: translateY(-2px); box-shadow: 0 8px 25px var(--direct-white-20-shadow); } .like-btn.liked { border-color: var(--direct-error-solid); background: var(--direct-error-15); color: var(--direct-error-solid); box-shadow: 0 8px 25px var(--direct-error-30-shadow); } .like-btn.liked .like-icon { fill: var(--direct-error-solid) !important; stroke: var(--direct-error-solid) !important; animation: heartBeat 0.8s ease-out; } .like-icon { width: 18px; height: 18px; transition: all 0.3s ease; stroke: currentColor; fill: none; stroke-width: 2; } .like-count { font-weight: 600; min-width: 20px; text-align: center; transition: all 0.3s ease; } /* Project Modal Language Section */ .project-modal-language-section { margin-top: 15px; margin-bottom: 15px; padding: 15px; background: var(--white-alpha-05); border-radius: 16px; border: 1px solid var(--white-alpha-10); display: flex; justify-content: center; align-items: center; } .project-modal-lang-btn { display: flex; align-items: center; justify-content: center; padding: 12px 24px; background: var(--white-alpha-05); border: 1px solid var(--white-alpha-20); border-radius: 50px; color: var(--text-white); font-size: 14px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s ease; min-width: 60px; text-transform: uppercase; } .project-modal-lang-btn:hover { background: var(--green-alpha-10); border-color: var(--accent-color); color: var(--accent-color); box-shadow: 0 0 15px var(--shadow-glow-soft); transform: scale(1.05); } .project-modal-lang-btn:active { transform: scale(0.95); } /* Project Modal Like Section */ .project-modal-like-section { margin-top: 20px; padding: 20px; background: var(--white-alpha-05); border-radius: 16px; border: 1px solid var(--white-alpha-10); } .project-modal-like-btn { background: linear-gradient(135deg, var(--white-alpha-10), var(--white-alpha-10)); border: 2px solid var(--white-alpha-30); border-radius: 50px; padding: 15px 25px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.3s ease; color: var(--text-white); font-size: 16px; font-weight: 600; width: 100%; justify-content: center; position: relative; overflow: hidden; } .project-modal-like-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--white-alpha-20), transparent); transition: left 0.5s ease; } .project-modal-like-btn:hover::before { left: 100%; } .project-modal-like-btn:hover { border-color: var(--text-white); background: linear-gradient(135deg, var(--white-alpha-20), var(--white-alpha-20)); color: var(--text-white); transform: translateY(-3px); box-shadow: 0 15px 35px var(--white-alpha-40); } .project-modal-like-btn.liked { border-color: var(--error-bg); background: linear-gradient(135deg, var(--red-error-20), var(--error-darker-20)); color: var(--error-bg); box-shadow: 0 15px 35px var(--error-bg-40); } .project-modal-like-btn.liked .like-icon { fill: var(--error-bg) !important; stroke: var(--error-bg) !important; animation: heartBeat 0.8s ease-out; } .project-modal-like-text { flex: 1; text-align: center; } .project-modal-like-count { background: var(--white-alpha-20); border-radius: 20px; padding: 4px 12px; font-size: 14px; font-weight: 600; color: var(--text-white); } .project-modal-like-btn.liked .project-modal-like-count { background: var(--red-error-20); color: var(--error-bg); } /* HERZ-ANIMATIONEN */ @keyframes heartBeat { 0% { transform: scale(1); } 25% { transform: scale(1.3); } 50% { transform: scale(1.1); } 75% { transform: scale(1.25); } 100% { transform: scale(1); } } /* Like button ripple effect */ .like-btn.clicked, .project-modal-like-btn.clicked { animation: likeRipple 0.6s ease-out; } @keyframes likeRipple { 0% { transform: scale(1); box-shadow: 0 0 0 0 var(--ripple-green-70); } 70% { transform: scale(1.05); box-shadow: 0 0 0 15px var(--ripple-green-transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--ripple-green-transparent); } } /* // // ============================================================= ███████████████████████████████████████████████████████████ ███ ███ ███ LEGAL INFO PAGE ███ ███ IMPRESSUM & RECHTLICHES ███ ███ ███ ███████████████████████████████████████████████████████████ ============================================================= // // // */ /* Legal pages specific */ .legal-content { color: var(--text-white); } .legal-section h2 { font-size: 36px; font-weight: 600; margin-bottom: 20px; color: var(--accent-color); } .legal-section h3 { font-size: 24px; font-weight: 600; margin-top: 30px; margin-bottom: 15px; color: var(--text-white); } .legal-section p { font-size: 16px; line-height: 1.7; margin-bottom: 20px; opacity: 0.9; } .last-updated { font-style: italic; color: var(--text-medium); margin-bottom: 30px !important; } .contact-info { background: var(--secondary-bg); padding: 25px; border-radius: 8px; border: 1px solid var(--white-alpha-10); margin-top: 20px; } .contact-info p { margin: 0; line-height: 1.6; } /* Form validation styles */ .form-group input:invalid:not(:focus):not(:placeholder-shown), .form-group textarea:invalid:not(:focus):not(:placeholder-shown) { border-color: var(--error-color); } .form-group input:valid, .form-group textarea:valid { border-color: var(--accent-color); } /* =========================== */ /* CONSTRUCTION OVERLAY */ /* =========================== */ .construction-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; /* backdrop-filter: blur(8px); */ /* Entfernt wie angefordert */ animation: constructionFadeIn 1s ease-out; } /* =========================== */ /* PROJECT CARD OVERLAYS */ /* =========================== */ .project-card-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; /* ENHANCED Z-INDEX für Browser Overlay Protection - wie Project Modal */ z-index: 2147483646; /* Sehr hoch aber unter Project Modal (2147483647) */ /* backdrop-filter: blur(8px); */ /* Entfernt wie angefordert */ animation: constructionFadeIn 1s ease-out; border-radius: 16px; /* Same border radius as customer logos */ /* SAFE AREA INSETS - Gleiche robuste Implementierung wie Mobile Navigation */ /* Fallback padding für Browser ohne Safe Area Support */ padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; /* iOS 11.0-11.2 fallback */ padding-top: constant(safe-area-inset-top, 20px); padding-left: constant(safe-area-inset-left, 20px); padding-right: constant(safe-area-inset-right, 20px); padding-bottom: constant(safe-area-inset-bottom, 20px); /* Moderne Browser - robuste Berechnung wie Hamburger Menu */ padding-top: max(20px, calc(env(safe-area-inset-top) + 20px)); padding-left: max(20px, calc(env(safe-area-inset-left) + 20px)); padding-right: max(20px, calc(env(safe-area-inset-right) + 20px)); padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px)); /* Hardware Acceleration für bessere Performance */ transform: translateZ(0); will-change: transform; isolation: isolate; } /* Larger barriers for project card overlays on desktop - keep original pattern */ .project-card-overlay .construction-barrier-top, .project-card-overlay .construction-barrier-bottom { height: 25px; /* Increased from 15px for better visibility on desktop */ /* Keep original background-size for proper stripes */ } /* FALLBACK FÜR BROWSER OHNE SAFE AREA SUPPORT - Wie bei Social Buttons */ /* CSS Feature Detection Support für Project Card Overlays */ @supports not (margin-bottom: env(safe-area-inset-bottom)) { .project-card-overlay .construction-content { margin: 25px !important; /* Extra Fallback für mehr Abstand */ padding: 40px 35px !important; } .project-card-overlay .construction-title { padding: 25px 20px 15px 20px !important; /* Conservative spacing für unbekannte Geräte */ } } /* Hide the construction icon for project card overlays */ .project-card-overlay .construction-icon { display: none; } /* Perfect centering and larger spacing for desktop */ .project-card-overlay .construction-content { padding: 35px 30px; /* Increased padding for better spacing and centering on desktop */ text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 100%; /* SAFE AREA PROTECTION - Wie Social Buttons im Hamburger Menu */ /* Zusätzlicher Schutz für Content, der immer sichtbar bleiben soll */ margin-top: max(10px, env(safe-area-inset-top, 10px)); margin-left: max(10px, env(safe-area-inset-left, 10px)); margin-right: max(10px, env(safe-area-inset-right, 10px)); margin-bottom: max(10px, env(safe-area-inset-bottom, 10px)); /* Hardware Acceleration für bessere Sichtbarkeit */ position: relative; z-index: 2; transform: translateZ(0); } /* Make title much larger and perfectly centered on desktop */ .project-card-overlay .construction-title { font-size: 42px; /* Increased from 36px for maximum visibility on desktop */ margin-bottom: 20px; letter-spacing: 2.5px; font-weight: 700; text-align: center; line-height: 1.2; /* MAXIMUM SAFE AREA PROTECTION für Titel - Kritischer Content */ /* Zusätzlicher Schutz besonders bei Geräten mit Notch/Dynamic Island */ padding-top: calc(15px + env(safe-area-inset-top)); padding-left: max(15px, calc(env(safe-area-inset-left) + 15px)); padding-right: max(15px, calc(env(safe-area-inset-right) + 15px)); /* Maximum Z-Index für Titel-Sichtbarkeit */ position: relative; z-index: 3; /* Höher als Content (z-index: 2) */ transform: translateZ(0); isolation: isolate; } /* Make text much larger and perfectly centered on desktop */ .project-card-overlay .construction-text { font-size: 20px; /* Increased from 18px for maximum readability on desktop */ line-height: 1.6; margin-bottom: 24px; opacity: 0.95; font-weight: 500; text-align: center; max-width: 320px; margin-left: auto; margin-right: auto; } /* Make tools (icons) much larger and perfectly centered on desktop */ .project-card-overlay .construction-tools { gap: 18px; /* Increased gap for better spacing */ margin-bottom: 26px; display: flex; justify-content: center; align-items: center; } .project-card-overlay .construction-tools .tool { font-size: 30px; /* Increased from 26px for maximum visibility on desktop */ filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); transition: transform 0.2s ease, filter 0.2s ease; display: inline-flex; align-items: center; justify-content: center; } .project-card-overlay .construction-tools .tool:hover { transform: scale(1.2); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)); } .construction-overlay.hidden { display: none; } @keyframes constructionFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .construction-barrier-top { position: absolute; top: 0; left: 0; right: 0; height: 30px; background: repeating-linear-gradient( 45deg, var(--warning-color) 0px, var(--warning-color) 20px, var(--primary-bg) 20px, var(--primary-bg) 40px ); background-size: 56px 56px; animation: barrierSlideRight 1.5s infinite linear; box-shadow: 0 2px 10px var(--warning-yellow-40); will-change: background-position; } .construction-barrier-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: repeating-linear-gradient( -45deg, var(--warning-color) 0px, var(--warning-color) 20px, var(--primary-bg) 20px, var(--primary-bg) 40px ); background-size: 56px 56px; animation: barrierSlideLeft 1.5s infinite linear; box-shadow: 0 -2px 10px var(--warning-yellow-40); will-change: background-position; } @keyframes barrierSlideRight { 0% { background-position: 0px 0px; } 100% { background-position: 56px 0px; } } @keyframes barrierSlideLeft { 0% { background-position: 0px 0px; } 100% { background-position: -56px 0px; } } .construction-content { text-align: center; padding: 60px 40px; color: var(--text-white); position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .construction-icon { font-size: 80px; margin-bottom: 30px; animation: constructionBounce 2s infinite; } @keyframes constructionBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .construction-title { font-size: 48px; font-weight: 800; color: var(--warning-color); margin-bottom: 20px; text-shadow: 3px 3px 6px var(--black-80-shadow); letter-spacing: 3px; animation: titleGlow 3s infinite; } @keyframes titleGlow { 0%, 100% { text-shadow: 3px 3px 6px var(--black-80-shadow), 0 0 20px var(--warning-yellow-30); } 50% { text-shadow: 3px 3px 6px var(--black-80-shadow), 0 0 30px var(--warning-yellow-60); } } .construction-text { font-size: 18px; line-height: 1.6; margin-bottom: 40px; opacity: 0.9; max-width: 400px; margin-left: auto; margin-right: auto; } .construction-tools { display: flex; justify-content: center; gap: 30px; margin-bottom: 30px; } .tool { font-size: 40px; animation: toolFloat 2s infinite ease-in-out; } .tool:nth-child(1) { animation-delay: 0s; } .tool:nth-child(2) { animation-delay: 0.5s; } .tool:nth-child(3) { animation-delay: 1s; } @keyframes toolFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-8px) rotate(5deg); } 50% { transform: translateY(0px) rotate(0deg); } 75% { transform: translateY(-4px) rotate(-3deg); } } /* =========================== */ /* // // ================================================================= ████████████████████████████████████████████████████████████████ ███ ███ ███ ALLGEMEINE FUNKTIONEN ███ ███ SEITEN ÜBERGREIFENDE ███ ███ ███ ████████████████████████████████████████████████████████████████ ================================================================= // // // */ /* // // ============================================================= ███████████████████████████████████████████████████████████ ███ ███ ███ LOADING ANIMATION ███ ███ SEITEN LADE BILDSCHIRM ███ ███ ███ ███████████████████████████████████████████████████████████ ============================================================= // // // */ /* =========================== */ /* Main Loading Screen */ .loading-screen { /* Loading screen aktiviert - funktioniert nur bei Seitenstart und Navigation */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--loading-bg); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.8s ease, visibility 0.8s ease; opacity: 1; visibility: visible; } .loading-screen.fade-out { opacity: 0; visibility: hidden; pointer-events: none; } .loading-container { text-align: center; position: relative; } /* 3D Rotating Cube */ .loading-cube { width: 80px; height: 80px; margin: 0 auto 40px; position: relative; transform-style: preserve-3d; animation: rotateCube 3s infinite linear; } .cube-face { position: absolute; width: 80px; height: 80px; background: var(--gradient-primary); border: 2px solid var(--accent-color); opacity: 0.8; box-shadow: 0 0 20px var(--loading-cube-shadow); } .cube-front { transform: rotateY(0deg) translateZ(40px); } .cube-back { transform: rotateY(180deg) translateZ(40px); } .cube-right { transform: rotateY(90deg) translateZ(40px); } .cube-left { transform: rotateY(-90deg) translateZ(40px); } .cube-top { transform: rotateX(90deg) translateZ(40px); } .cube-bottom { transform: rotateX(-90deg) translateZ(40px); } @keyframes rotateCube { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } } /* Floating Particles */ .loading-particles { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; pointer-events: none; } .particle { position: absolute; width: 6px; height: 6px; background: var(--accent-color); border-radius: 50%; box-shadow: 0 0 10px var(--accent-color); animation: floatParticle 4s infinite ease-in-out; } .particle:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; animation-duration: 3s; } .particle:nth-child(2) { top: 20%; right: 20%; animation-delay: 0.8s; animation-duration: 3.5s; } .particle:nth-child(3) { bottom: 20%; left: 20%; animation-delay: 1.6s; animation-duration: 4s; } .particle:nth-child(4) { bottom: 20%; right: 20%; animation-delay: 2.4s; animation-duration: 2.8s; } .particle:nth-child(5) { top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 3.2s; animation-duration: 3.2s; } @keyframes floatParticle { 0%, 100% { transform: translateY(0px) scale(1); opacity: 0.7; } 50% { transform: translateY(-20px) scale(1.2); opacity: 1; } } /* Glitch Text Effect */ .loading-text { margin: 40px 0 30px; } .glitch-text { font-size: 32px; font-weight: 800; color: var(--accent-color); text-transform: uppercase; letter-spacing: 3px; position: relative; animation: glitch 2s infinite; } .glitch-text:before, .glitch-text:after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glitch-text:before { animation: glitchTop 1s infinite; color: var(--glitch-red); z-index: -1; } .glitch-text:after { animation: glitchBottom 1.5s infinite; color: var(--glitch-cyan); z-index: -2; } @keyframes glitch { 0%, 100% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } } @keyframes glitchTop { 0%, 100% { transform: translate(0); } 10%, 30%, 50%, 70%, 90% { transform: translate(-1px, -1px); } 20%, 40%, 60%, 80% { transform: translate(-1px, -1px); } } @keyframes glitchBottom { 0%, 100% { transform: translate(0); } 10%, 30%, 50%, 70%, 90% { transform: translate(1px, 1px); } 20%, 40%, 60%, 80% { transform: translate(-1px, 1px); } } /* Loading Progress Bar */ .loading-bar { width: 200px; height: 4px; background: var(--green-alpha-20); border-radius: 2px; margin: 0 auto; overflow: hidden; position: relative; } .loading-fill { height: 100%; background: linear-gradient(90deg, var(--accent-color), var(--accent-hover), var(--accent-color)); border-radius: 2px; animation: loadingProgress 2s infinite ease-in-out; box-shadow: 0 0 10px var(--loading-cube-shadow); } @keyframes loadingProgress { 0% { width: 0%; transform: translateX(-100%); } 50% { width: 100%; transform: translateX(0%); } 100% { width: 100%; transform: translateX(100%); } } /* Page Transition Overlay */ .page-transition { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary-bg), var(--secondary-bg)); z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.6s ease; pointer-events: none; } .page-transition.show { opacity: 1; visibility: visible; pointer-events: all; } /* Video Loading Overlay */ .video-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--black-90-overlay); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; border-radius: 16px; /* Same border radius as customer logos */ } .video-spinner { position: relative; width: 12px; height: 12px; margin-bottom: 20px; } .spinner-ring { position: absolute; width: 100%; height: 100%; border: 3px solid transparent; border-top: 3px solid var(--accent-color); border-radius: 50%; animation: spinRing 1.5s linear infinite; } .spinner-ring:nth-child(1) { animation-delay: 0s; } .spinner-ring:nth-child(2) { width: 80%; height: 80%; top: 10%; left: 10%; border-top-color: var(--accent-hover); animation-delay: 0.3s; animation-direction: reverse; } .spinner-ring:nth-child(3) { width: 60%; height: 60%; top: 20%; left: 20%; border-top-color: var(--accent-dark); animation-delay: 0.6s; } @keyframes spinRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .video-loading-overlay p { color: var(--accent-color); font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* // // ============================================================= ███████████████████████████████████████████████████████████ ███ ███ ███ LANGUAGE TOGGLE ███ ███ SPRACHEN WECHSLER BUTTON ███ ███ ███ ███████████████████████████████████████████████████████████ ============================================================= // // // */ /* Language Toggle Button */ .language-toggle { position: fixed; bottom: 30px; bottom: max(30px, env(safe-area-inset-bottom)); right: 30px; right: max(30px, env(safe-area-inset-right)); z-index: 997; /* Lowered to be below header and mobile menu */ /* Animation will be handled by JavaScript for better control */ } .lang-btn { background: var(--accent-color); color: var(--primary-bg); border: none; padding: 12px 20px; border-radius: 50px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px var(--green-alpha-30); min-width: 60px; height: 50px; display: flex; align-items: center; justify-content: center; } .lang-btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 6px 20px var(--green-alpha-40-shadow); } .lang-btn:active { transform: translateY(0); } /* =========================== */ /* FIXED ABOUT ME SECTION FOR IPAD AIR 4 PORTRAIT MODE */ /* =========================== */ /* University logo styling - MATCHED TO PROFILE IMAGE */ .university-logo { height: 243px; /* Another 10% smaller (270px - 10%) */ border-radius: 24px; /* More rounded than profile image */ font-size: 14px; cursor: pointer; aspect-ratio: 3/1; /* Wider aspect ratio - 3:1 instead of original ratio */ border: none; object-fit: cover; /* Cover to fill the container properly */ max-width: 100%; width: 100%; /* Full width to match profile image */ transition: all 0.3s ease; /* Same smooth hover transition */ } .university-logo:hover { transform: translateY(-2px); /* Same hover animation as customer logos */ } /* Customer logo styling - ENHANCED FOR DESKTOP */ .customer-placeholder { height: 120px; /* Default desktop size */ border-radius: 16px; /* More rounded corners for desktop */ font-size: 14px; aspect-ratio: 2400/1400; object-fit: cover; /* Cover for desktop to fill nicely */ max-width: 100%; width: 100%; /* Full width for better coverage */ } .university-logo-container { display: flex; justify-content: center; align-items: center; width: 100%; text-decoration: none; color: inherit; } /* Desktop-specific sizing for university logo - another 10% smaller in height */ @media (min-width: 1025px) { .university-logo { height: 122px; /* Another 10% smaller (135px - 10%) */ } } .customers-section { padding: 80px 50px; padding-left: max(50px, env(safe-area-inset-left)); padding-right: max(50px, env(safe-area-inset-right)); background: var(--secondary-bg); } .section-title { font-size: 48px; font-weight: 600; margin-bottom: 50px; color: var(--text-white); } .customers-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .customers-text { color: var(--text-white); } .customers-text p { font-size: 16px; line-height: 1.7; margin-bottom: 20px; opacity: 0.9; } .customers-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; /* Increased gap for better spacing */ } /* Customer logo linking styles - ENHANCED WITH ANIMATIONS */ .customer-logo-link { display: block; text-decoration: none; color: inherit; border-radius: 16px; /* Match the image border radius */ overflow: hidden; /* Ensure rounded corners are clean */ transition: all 0.3s ease; background: none !important; /* Ensure no background */ } .customer-logo-link:hover { transform: translateY(-2px); /* Subtle lift without shadow */ } .customer-logo-link .customer-placeholder { background: var(--gradient-secondary); border: 1px solid var(--border-light); border-radius: 16px; /* Ensure consistent rounding */ } .customer-logo-link .customer-logo { background: var(--gradient-secondary); border: 1px solid var(--border-light); border-radius: 16px; /* Ensure consistent rounding */ width: 100%; height: 80px; object-fit: contain; object-position: center; transition: all 0.3s ease; } /* ===== PROFESSIONAL LOGO PLACEHOLDERS ===== */ .professional-placeholder { cursor: default; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, var(--tertiary-bg) 0%, var(--secondary-bg) 100%); border: 1px solid var(--border-light); padding: 15px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; min-height: 80px; } .professional-placeholder:hover { transform: translateY(-2px); border-color: var(--accent-color); box-shadow: 0 4px 20px rgba(74, 222, 128, 0.15); } .professional-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .logo-container { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .company-name { font-size: 12px; font-weight: 600; color: var(--text-white); text-align: center; opacity: 0.9; } /* Slack-style Logo */ .slack-style .logo-shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 24px; height: 24px; } .slack-style .shape { border-radius: 4px; width: 10px; height: 10px; } .slack-style .shape-1 { background: #E01E5A; } .slack-style .shape-2 { background: #36C5F0; } .slack-style .shape-3 { background: #2EB67D; } .slack-style .shape-4 { background: #ECB22E; } /* Microsoft-style Logo */ .microsoft-style .ms-squares { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 24px; height: 24px; } .microsoft-style .square { width: 11px; height: 11px; } .microsoft-style .square-red { background: #F25022; } .microsoft-style .square-green { background: #7FBA00; } .microsoft-style .square-blue { background: #00A4EF; } .microsoft-style .square-yellow { background: #FFB900; } /* Apple-style Logo */ .apple-style .apple-logo { position: relative; width: 24px; height: 28px; } .apple-style .apple-shape { width: 20px; height: 24px; background: var(--text-white); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; position: relative; } .apple-style .apple-shape::before { content: ''; position: absolute; top: 3px; right: 2px; width: 6px; height: 8px; background: var(--secondary-bg); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } .apple-style .apple-leaf { position: absolute; top: -2px; right: 6px; width: 6px; height: 4px; background: var(--text-white); border-radius: 50%; transform: rotate(30deg); } /* Tech-style Logo */ .tech-style .tech-circle { position: relative; width: 28px; height: 28px; border: 2px solid var(--accent-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .tech-style .inner-circle { width: 12px; height: 12px; background: var(--accent-color); border-radius: 50%; } .tech-style .tech-ring { position: absolute; top: -3px; left: -3px; width: 28px; height: 28px; border: 1px solid var(--accent-color); border-radius: 50%; opacity: 0.5; animation: pulse-ring 2s infinite; } @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.2); opacity: 0; } } /* ===== FADE-IN ANIMATIONS ===== */ .fade-in-element { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } .fade-in-element.visible { opacity: 1; transform: translateY(0); } /* Staggered animation delays */ .fade-in-element[data-delay="0"] { transition-delay: 0ms; } .fade-in-element[data-delay="100"] { transition-delay: 100ms; } .fade-in-element[data-delay="200"] { transition-delay: 200ms; } .fade-in-element[data-delay="300"] { transition-delay: 300ms; } .fade-in-element[data-delay="400"] { transition-delay: 400ms; } .fade-in-element[data-delay="500"] { transition-delay: 500ms; } /* =========================== */ /* IPAD AIR 4 SPECIFIC ABOUT ME FIXES */ /* =========================== */ /* iPad Air 4 Portrait Mode - LOGO FIXES */ @media only screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { /* FIXED: University Logo for iPad Air 4 Portrait */ .university-logo { height: 100px !important; /* Increased from 80px for better visibility */ max-height: 100px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; /* Ensure logo fits properly */ object-position: center !important; } /* FIXED: Customer Logos for iPad Air 4 Portrait */ .customer-placeholder { height: 70px !important; /* Reduced from 120px to 70px */ max-height: 70px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; /* Ensure logos fit properly */ object-position: center !important; border-radius: 12px !important; /* Smaller border radius for iPad */ } /* FIXED: About Profile Image for iPad Air 4 Portrait */ .about-placeholder { height: 220px !important; /* Reduced from 300px to 220px */ max-height: 220px !important; width: 100% !important; max-width: 100% !important; object-fit: cover !important; object-position: center !important; } /* Adjust spacing for better layout */ .about-image-section { gap: 15px !important; align-items: center; justify-content: center; } /* Ensure containers don't overflow */ .university-logo-container, .customer-item { display: flex !important; align-items: center !important; justify-content: center !important; max-width: 100% !important; } /* Better text sizing for iPad Air 4 Portrait */ .about-text .intro-text { font-size: 18px !important; line-height: 1.5 !important; } .about-text p { font-size: 15px !important; line-height: 1.6 !important; } } /* iPad Air 4 Landscape Mode - LOGO FIXES */ @media only screen and (min-width: 1024px) and (max-width: 1194px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { /* FIXED: University Logo for iPad Air 4 Landscape */ .university-logo { height: 100px !important; /* Slightly reduced from 120px to 100px */ max-height: 100px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; } /* FIXED: Customer Logos for iPad Air 4 Landscape */ .customer-placeholder { height: 90px !important; /* Slightly reduced from 120px to 90px */ max-height: 90px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; } /* FIXED: About Profile Image for iPad Air 4 Landscape */ .about-placeholder { height: 260px !important; /* Slightly reduced from 300px to 260px */ max-height: 260px !important; width: 100% !important; max-width: 100% !important; object-fit: cover !important; object-position: center !important; } } /* General iPad Air 4 Media Query - LOGO FIXES */ @media only screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { /* About section improvements for iPad Air 4 */ .about-hero { padding: 60px 30px !important; } .about-content { gap: 50px !important; } .customers-section { padding: 60px 30px !important; } .customers-content { gap: 40px !important; } .customers-gallery { gap: 15px !important; } /* Ensure all containers handle overflow properly */ .about-container, .customers-content, .customers-gallery { max-width: 100% !important; } } /* // // ================================================================= ████████████████████████████████████████████████████████████████ ███ ███ ███ RESPONSIVE DESIGN SYSTEM ███ ███ MOBILE & TABLET LAYOUTS ███ ███ ███ ████████████████████████████████████████████████████████████████ ================================================================= // // // */ /* // // ============================================================= ███████████████████████████████████████████████████████████ ███ ███ ███ TABLET LAYOUT ███ ███ (MAX-WIDTH: 1024PX) ███ ███ ███ ███████████████████████████████████████████████████████████ ============================================================= // // // */ /* =========================== */ /* ENHANCED MOBILE RESPONSIVENESS WITH HAMBURGER MENU */ /* =========================== */ /* Tablet Responsive Design */ @media (max-width: 1024px) { /* TABLET SKILLS GRID - 6 COLUMNS LIKE DESKTOP BUT SMALLER */ .skills-grid { grid-template-columns: repeat(6, 1fr); /* Same 6 columns as desktop */ gap: 20px; /* Medium gap for tablet */ max-width: 1200px; } .skill-btn { min-height: 85px; /* Medium height for tablet */ font-size: 14px; /* Medium font size */ padding: 18px 15px; /* Medium padding */ } .video-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } /* TABLET PROJECTS SECTION - 2 COLUMNS FOR BETTER VISIBILITY */ .projects-grid { grid-template-columns: repeat(2, 1fr); /* 2 columns for tablet - better spacing */ gap: 25px; /* Smaller gap for tablet */ padding: 0 15px; } .project-card { border-radius: 10px; } .project-placeholder { height: 180px; /* Smaller height for tablet */ font-size: 16px; } .project-info { padding: 20px; } .project-role { font-size: 12px; } .project-name { font-size: 20px; margin-bottom: 10px; } .project-description { font-size: 13px; line-height: 1.4; } .video-controls { gap: 20px; } .control-btn { min-width: 100px; padding: 10px 16px; } } /* // // ============================================================= ███████████████████████████████████████████████████████████ ███ ███ ███ MOBILE LAYOUT ███ ███ (MAX-WIDTH: 900PX) ███ ███ ███ ███████████████████████████████████████████████████████████ ============================================================= // // // */ /* =========================== */ /* CRITICAL MOBILE FIX FOR LANGUAGE TOGGLE BUTTON */ /* =========================== */ @media (max-width: 900px) { /* =========================== */ /* MOBILE HEADER LAYOUT FIXES */ /* =========================== */ /* SMOOTH MOBILE HEADER - Perfekt flüssige Animation */ .header { /* Optimierte Animation mit perfektem Timing für flüssige Bewegung */ animation: headerFadeInMobile 1.0s ease-out 0.3s forwards !important; /* Isoliere Header-Transforms vom Rest der Seite */ transform-origin: center top; contain: layout style; will-change: opacity; /* Verhindere, dass andere Animationen den Header beeinflussen */ position: fixed !important; isolation: isolate; /* Wichtiger Fix: Keine Transforms am Header auf Mobile */ transform: none !important; } /* Verbesserte Story Section Animation Isolation - Header bleibt unberührt */ .story-section .scroll-animate.slide-left, .story-section .scroll-animate.slide-right { /* Verwende contain um Animationen zu isolieren */ contain: layout style; /* Deaktiviere nur horizontale Transforms, die den Header beeinflussen könnten */ transform: translateX(0) !important; will-change: opacity; } .story-section .scroll-animate.slide-left.animate-in, .story-section .scroll-animate.slide-right.animate-in { /* Verwende subtile Animationen, die den Header nicht beeinflussen */ transform: translateX(0) scale(1.02) !important; opacity: 1; transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .nav { padding: 20px 25px !important; height: 70px !important; gap: 0 !important; } /* Show mobile hamburger menu */ .mobile-menu-toggle { display: flex !important; order: 3; margin-left: auto; } /* Hide desktop navigation elements on mobile */ .nav-links { display: none !important; } .nav-social { display: none !important; } /* Show mobile social icons in center */ .nav-social-mobile { display: flex !important; order: 2; position: absolute; left: 50%; transform: translateX(-50%); } /* Mobile Menu Overlay */ .mobile-menu-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; /* Dynamic viewport height für mobile Browser */ background: var(--overlay-heavy); z-index: 10001; opacity: 0; visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(10px); } /* Fallback für Browser ohne 100dvh Support */ @supports not (height: 100dvh) { .mobile-menu-overlay { height: 100vh; } } .mobile-menu-overlay.active { opacity: 1; visibility: visible; } .mobile-menu-content { display: flex; flex-direction: column; justify-content: space-between; /* Gleiche Verteilung wie Desktop */ align-items: center; height: 100%; text-align: center; /* Safe Area Inset für mobile Geräte in Media Query mit iOS Fallbacks */ padding-top: 60px; /* Fallback */ padding-top: constant(safe-area-inset-top); /* iOS 11.0-11.2 */ padding-top: max(60px, calc(env(safe-area-inset-top) + 20px)); padding-right: 20px; /* Fallback */ padding-right: constant(safe-area-inset-right); /* iOS 11.0-11.2 */ padding-right: max(20px, calc(env(safe-area-inset-right) + 20px)); padding-bottom: 20px; /* Fallback */ padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */ padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px)); padding-left: 20px; /* Fallback */ padding-left: constant(safe-area-inset-left); /* iOS 11.0-11.2 */ padding-left: max(20px, calc(env(safe-area-inset-left) + 20px)); } /* Fallback für Browser ohne safe-area-inset Support in Media Query */ @supports not (padding: env(safe-area-inset-top)) { .mobile-menu-content { padding: 80px 30px 40px 30px !important; } } /* Show mobile navigation */ .mobile-nav-links { display: flex; flex-direction: column; gap: 15px; /* Etwas mehr Abstand zwischen den Links */ margin-bottom: 0; margin-top: 10px; /* Weniger Abstand vom X */ } /* Show mobile language toggle */ .mobile-nav-language { display: flex !important; } /* Show mobile social icons */ .mobile-nav-social { display: flex !important; /* Safe Area Inset für mobile Social Icons in Media Query mit iOS Fallbacks */ margin-bottom: 20px !important; /* Fallback */ margin-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */ margin-bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px)) !important; /* Modern browsers */ padding-bottom: 15px !important; /* Fallback */ padding-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */ padding-bottom: calc(env(safe-area-inset-bottom) + 15px) !important; /* Modern browsers */ } /* Fallback für Browser ohne safe-area-inset Support */ @supports not (margin-bottom: env(safe-area-inset-bottom)) { .mobile-nav-social { margin-bottom: 35px !important; padding-bottom: 20px !important; } } /* CRITICAL MOBILE FIX FOR LANGUAGE TOGGLE POSITIONING */ /* MOBILE LANGUAGE TOGGLE - FIXED POSITIONING AND SIZE */ .language-toggle { padding: 10px 5px; height: 70px; } .nav-logo a { font-size: 28px; font-weight: 900; } /* Hide desktop navigation and social on mobile */ .nav-links, .nav-social { display: none; } /* Show mobile social icons in CENTER */ .nav-social-mobile { display: flex; position: absolute; left: 50%; transform: translateX(-50%); order: 2; } /* Show mobile hamburger menu on RIGHT */ .mobile-menu-toggle { display: flex; order: 3; z-index: 10002 !important; /* Ensure it's always above everything */ position: relative !important; color: var(--text-white) !important; } /* Force white color for hamburger lines on mobile */ .hamburger-line { background: var(--text-white) !important; color: var(--text-white) !important; } /* Adjust main content for smaller mobile header */ .about-main, .contact-main, .legal-main { margin-top: 70px; } /* ===== GLOBAL MOBILE CONFLICT FIXES FOR INNER PAGES ===== */ /* Prevent transforms on page wrappers so position:fixed header and language toggle are not affected */ .about-main.scroll-animate, .contact-main.scroll-animate, .legal-main.scroll-animate { transform: none !important; will-change: opacity; } .about-main.scroll-animate.animate-in, .contact-main.scroll-animate.animate-in, .legal-main.scroll-animate.animate-in { transform: none !important; opacity: 1 !important; transition: opacity 0.5s ease; } /* Neutralize top hero wrappers on those pages (keep opacity-only reveal) */ .about-hero.scroll-animate, .contact-hero.scroll-animate, .legal-hero.scroll-animate { transform: none !important; will-change: opacity; } .about-hero.scroll-animate.animate-in, .contact-hero.scroll-animate.animate-in, .legal-hero.scroll-animate.animate-in { transform: none !important; opacity: 1 !important; transition: opacity 0.5s ease; } /* Isolate scroll animations to prevent header interference while keeping animations intact */ .about-main .scroll-animate, .contact-main .scroll-animate, .legal-main .scroll-animate { /* Use CSS containment to isolate animations and prevent them from affecting fixed header */ contain: layout style paint; /* Create new stacking context to isolate transforms */ isolation: isolate; } /* Specifically isolate slide-left and slide-right animations like on Index "My Story" fix */ .about-main .scroll-animate.slide-left, .about-main .scroll-animate.slide-right, .contact-main .scroll-animate.slide-left, .contact-main .scroll-animate.slide-right, .legal-main .scroll-animate.slide-left, .legal-main .scroll-animate.slide-right { /* Extra containment for horizontal slides that can affect header positioning */ contain: layout style paint; /* Force a new containing block */ transform: translateZ(0); /* Ensure animations stay within bounds */ overflow: hidden; } /* Ensure main containers don't interfere with header */ .contact-main.scroll-animate, .legal-main.scroll-animate, .about-main.scroll-animate { /* Prevent main containers from affecting fixed header */ contain: layout style; /* Disable transforms on main containers that could move header */ transform: none !important; will-change: opacity; } /* Keep hero sections stable */ .contact-hero.scroll-animate, .legal-hero.scroll-animate, .about-hero.scroll-animate { /* Prevent hero sections from affecting header positioning */ contain: layout style; transform: none !important; will-change: opacity; } /* Keep language toggle fixed and stable on mobile */ .language-toggle { position: fixed !important; z-index: 10050 !important; transform: none !important; } /* =========================== */ /* CRITICAL MOBILE FIX FOR LANGUAGE TOGGLE POSITIONING */ /* =========================== */ /* MOBILE LANGUAGE TOGGLE - FIXED POSITIONING AND SIZE */ .language-toggle { bottom: 20px !important; right: 20px !important; transform: none !important; transition: none !important; position: fixed !important; z-index: 997 !important; /* Keep below header and mobile menu overlay */ pointer-events: auto; /* Ensure button stays visible and accessible on mobile */ max-width: calc(100vw - 40px); /* Prevent overflow */ max-height: 60px; /* Set maximum height */ } .lang-btn { padding: 10px 16px !important; font-size: 14px !important; min-width: 50px !important; height: 45px !important; border-radius: 25px !important; /* Ensure button is properly sized for mobile touch */ box-sizing: border-box; white-space: nowrap; overflow: hidden; } /* =========================== */ /* MOBILE ABOUT PAGE SPECIFIC FIXES */ /* =========================== */ /* Ensure About page content doesn't overflow on mobile */ .about-hero { padding: 60px 20px !important; } .about-container { padding: 0 15px !important; max-width: 100% !important; } .page-title { font-size: clamp(32px, 10vw, 48px) !important; margin-bottom: 30px !important; text-align: center; word-wrap: break-word; } .about-content { grid-template-columns: 1fr !important; gap: 30px !important; margin-bottom: 40px; width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .about-text { order: 2; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; text-align: left !important; } .about-image-section { order: 1; gap: 20px; align-items: center !important; justify-content: center !important; max-width: 90% !important; margin: 0 auto !important; width: 90% !important; display: flex !important; flex-direction: column !important; } .about-image { width: 100% !important; max-width: 280px !important; margin: 0 auto !important; display: flex !important; justify-content: center !important; } .about-placeholder { height: 280px !important; width: 280px !important; max-width: 280px !important; border-radius: 20px !important; font-size: 12px !important; margin: 0 auto !important; object-fit: cover !important; object-position: center !important; flex-shrink: 0 !important; } /* FIXED MOBILE UNIVERSITY LOGO - NO MORE GRAY BOX, CENTERED */ .university-logo { height: 80px !important; /* Smaller height for mobile */ width: 100% !important; max-width: 280px !important; border-radius: 12px !important; font-size: 12px !important; margin: 0 auto !important; object-fit: cover !important; /* Changed back to cover to fill properly */ object-position: center !important; display: block !important; /* REMOVE any background or placeholder styles that cause gray box */ background: none !important; border: none !important; } .university-logo-container { width: 100% !important; max-width: 280px !important; margin: 0 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; /* REMOVE any background styles */ background: none !important; /* Ensure no fallback placeholder shows */ } /* HIDE the fallback placeholder div completely on mobile */ .university-logo-container .placeholder-image.university-logo { display: none !important; } .intro-text { font-size: 17px !important; font-weight: 400; line-height: 1.6 !important; margin-bottom: 25px !important; text-align: left !important; word-wrap: break-word; padding: 0 !important; max-width: 100% !important; } .about-text p { font-size: 15px !important; line-height: 1.7 !important; margin-bottom: 20px !important; opacity: 0.95; text-align: left !important; word-wrap: break-word; max-width: 100% !important; padding: 0 !important; } /* Mobile customers section fixes */ .customers-section { padding: 60px 20px !important; } .section-title { font-size: clamp(28px, 8vw, 36px) !important; margin-bottom: 30px !important; text-align: center; word-wrap: break-word; } .customers-content { grid-template-columns: 1fr !important; gap: 30px !important; width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .customers-text { text-align: center !important; max-width: 100% !important; width: 100% !important; padding: 0 10px !important; order: 1; } .customers-text p { font-size: 15px !important; line-height: 1.7 !important; margin-bottom: 18px !important; opacity: 0.95; word-wrap: break-word; max-width: 100% !important; text-align: center !important; } .customers-gallery { grid-template-columns: 1fr 1fr !important; gap: 20px !important; max-width: 100% !important; width: 100% !important; margin: 0 auto !important; order: 2; justify-items: center !important; } .customer-placeholder { height: 90px !important; width: 100% !important; max-width: 140px !important; border-radius: 12px !important; font-size: 10px !important; transition: all 0.3s ease; object-fit: cover !important; /* Changed back to cover */ object-position: center !important; margin: 0 auto !important; /* REMOVE gray background */ background: none !important; border: none !important; } .customer-item { min-height: 60px !important; min-width: 60px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 140px !important; margin: 0 auto !important; /* REMOVE any background */ background: none !important; } .customer-logo-link { width: 100% !important; max-width: 140px !important; display: flex !important; justify-content: center !important; align-items: center !important; /* REMOVE any background */ background: none !important; } /* HIDE customer placeholder backgrounds on mobile */ .customer-logo-link .customer-placeholder { background: none !important; border: none !important; } /* General mobile fixes for all elements */ body { max-width: 100vw !important; } * { max-width: 100% !important; box-sizing: border-box !important; } /* Hero section on mobile */ .hero { padding: 20px; min-height: calc(100vh - 70px); justify-content: center; } .hero-content { text-align: center; max-width: 100%; padding: 20px; margin-left: 0; margin-top: 40px; } .hero-title { font-size: clamp(36px, 15vw, 64px); line-height: 0.9; margin-bottom: 15px; } .hero-subtitle { font-size: clamp(14px, 4vw, 18px); margin-top: 15px; } /* Story section on mobile */ .story-container, .contact-content { grid-template-columns: 1fr; gap: 40px; } .story-content { text-align: center; } .story-content h2 { font-size: clamp(40px, 12vw, 60px); } /* MOBILE PROJECTS SECTION - 2 COLUMNS FOR BETTER IMAGE VISIBILITY */ .projects-grid { grid-template-columns: repeat(2, 1fr); /* 2 columns for mobile - better spacing */ gap: 12px; /* Smaller gap for mobile */ padding: 0 15px; } .project-card { border-radius: 8px; } .project-placeholder { height: 140px; /* Better height for mobile visibility */ font-size: 11px; } .project-info { padding: 12px; } /* Fix asymmetric right-side shadow on mobile by centering shadow horizontally (only when not active) */ .project-card:not(.active) { box-shadow: rgba(0, 0, 0, 0.8) 0 calc((var(--pointer-from-top, 0.5) * 20px) - 6px) 20px -5px !important; } /* Additionally, for touch devices explicitly remove horizontal shadow offset */ @media (hover: none) and (pointer: coarse) { .project-card:not(.active) { box-shadow: rgba(0, 0, 0, 0.8) 0 8px 20px -5px !important; } } .project-role { font-size: 9px; } .project-name { font-size: 14px; margin-bottom: 6px; } .project-description { font-size: 10px; line-height: 1.2; } /* Enhanced Mobile Student Work Section */ .student-work { padding: 60px 20px; } .student-title { font-size: clamp(28px, 8vw, 36px); margin-bottom: 40px; } .main-video-section { margin-bottom: 30px; } .video-title { font-size: clamp(20px, 6vw, 28px); margin-bottom: 20px; } .video-container { border-radius: 16px; } .play-video-btn { padding: 12px 20px; font-size: 13px; border-radius: 25px; max-width: 140px; display: flex; align-items: center; justify-content: center; } .play-icon { font-size: 14px; margin-left: 2px; } /* Mobile Replay Button Styles */ .center-replay-btn { width: clamp(15px, 3.5vw, 25px); height: clamp(15px, 3.5vw, 25px); font-size: clamp(6px, 1.8vw, 10px); } .center-replay-text { font-size: 12px; } .play-text { display: inline; margin-left: 6px; } /* Enhanced Mobile Video Controls */ .video-controls { flex-direction: column; gap: 15px; padding: 15px; } .control-btn { min-width: 140px; padding: 12px 20px; font-size: 14px; } .control-text { font-size: 14px; } .video-counter { font-size: 14px; padding: 10px 16px; order: -1; } .more-videos-btn { padding: 14px 28px; font-size: 14px; border-radius: 25px; } /* MOBILE VIDEO GALLERY - 2 VIDEOS SIDE BY SIDE (SMALLER) */ .video-gallery { margin-top: 30px; padding: 15px; border-radius: 16px; /* Better touch scrolling */ -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .gallery-header { margin-bottom: 15px; padding-bottom: 10px; } .gallery-title { font-size: 18px; } .close-gallery-btn { width: 32px; height: 32px; font-size: 14px; } .video-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 4px; /* Add padding for better mobile spacing */ /* Better touch scrolling for grid */ touch-action: manipulation; } .video-thumbnail { border-radius: 8px; } .video-thumbnail:hover { transform: translateY(-2px) scale(1.01); } .thumbnail-info { padding: 8px; } .thumbnail-title { font-size: 12px; line-height: 1.2; } .thumbnail-category { font-size: 9px; } .video-duration { bottom: 4px; right: 4px; padding: 2px 4px; font-size: 9px; } /* MOBILE SKILLS GRID - 3 COLUMNS FOR BETTER READABILITY */ .skills-grid { grid-template-columns: repeat(3, 1fr); /* Changed to 3 columns for mobile */ gap: 15px; /* Larger gap for mobile */ max-width: 100%; padding: 0 20px; } .skill-btn { min-height: 80px; /* Much larger height for mobile */ font-size: 14px; /* Larger font size for mobile */ padding: 15px 10px; /* Much larger padding */ line-height: 1.3; border-radius: 10px; /* Slightly larger border radius */ } .footer { flex-direction: column; gap: 20px; text-align: center; padding: 30px 20px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); padding-bottom: max(30px, env(safe-area-inset-bottom)); } .story-section, .projects-section, .skills-section, .contact-hero, .legal-hero { padding: 60px 20px; } .contact-form { padding: 30px 20px; } /* Contact form message positioning on mobile */ #messageArea { position: relative; top: auto; margin-bottom: 20px; } .contact-form.with-message { margin-top: 0; } .contact-form-section { margin-top: 0; } .form-row { grid-template-columns: 1fr; gap: 0; } /* Loading screen mobile adjustments */ .loading-cube { width: 60px; height: 60px; } .cube-face { width: 60px; height: 60px; } .cube-front { transform: rotateY(0deg) translateZ(30px); } .cube-back { transform: rotateY(180deg) translateZ(30px); } .cube-right { transform: rotateY(90deg) translateZ(30px); } .cube-left { transform: rotateY(-90deg) translateZ(30px); } .cube-top { transform: rotateX(90deg) translateZ(30px); } .cube-bottom { transform: rotateX(-90deg) translateZ(30px); } .glitch-text { font-size: 24px; letter-spacing: 2px; } .loading-bar { width: 150px; } /* Mobile video spinner size */ .video-spinner { width: 9px; height: 9px; } /* Mobile construction overlay adjustments */ .construction-overlay { padding: 0; } .construction-content { padding: 40px 20px; } .construction-barrier-top, .construction-barrier-bottom { height: 20px; } /* Mobile project card overlay adjustments */ .project-card-overlay .construction-barrier-top, .project-card-overlay .construction-barrier-bottom { height: 10px; /* 50% smaller than original 20px on mobile */ /* Keep original background-size for proper stripes */ } /* Mobile-specific adjustments - smaller and more compact */ .project-card-overlay .construction-content { padding: 16px 12px; /* Reduced padding on mobile for compact design */ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; /* ENHANCED MOBILE SAFE AREA PROTECTION - Wie Social Buttons */ /* Extra Schutz für kleine Bildschirme und Browser UI */ margin-top: max(15px, calc(env(safe-area-inset-top) + 15px)) !important; margin-left: max(12px, calc(env(safe-area-inset-left) + 12px)) !important; margin-right: max(12px, calc(env(safe-area-inset-right) + 12px)) !important; margin-bottom: max(15px, calc(env(safe-area-inset-bottom) + 15px)) !important; } .project-card-overlay .construction-title { font-size: 22px; /* Reduced from 28px for more compact mobile display */ margin-bottom: 8px; font-weight: 600; text-align: center; letter-spacing: 0.5px; line-height: 1.1; /* MAXIMUM MOBILE SAFE AREA PROTECTION für Titel */ /* Besonders wichtig für Geräte mit Notch/Dynamic Island */ padding-top: calc(20px + env(safe-area-inset-top)) !important; padding-left: max(16px, calc(env(safe-area-inset-left) + 16px)) !important; padding-right: max(16px, calc(env(safe-area-inset-right) + 16px)) !important; /* Maximum Z-Index für Mobile Titel-Sichtbarkeit */ position: relative; z-index: 4; /* Noch höher als Desktop (z-index: 3) für Mobile */ transform: translateZ(0); isolation: isolate; } .project-card-overlay .construction-text { font-size: 12px; /* Reduced from 15px for more compact mobile display */ line-height: 1.3; margin-bottom: 12px; opacity: 0.9; text-align: center; max-width: 200px; margin-left: auto; margin-right: auto; } .project-card-overlay .construction-tools { gap: 8px; /* Reduced gap on mobile for compact layout */ margin-bottom: 12px; display: flex; justify-content: center; align-items: center; } .project-card-overlay .construction-tools .tool { font-size: 16px; /* Reduced from 20px for more compact mobile display */ filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); display: inline-flex; align-items: center; justify-content: center; } .construction-icon { font-size: 60px; margin-bottom: 20px; } .construction-title { font-size: 32px; margin-bottom: 15px; letter-spacing: 2px; } .construction-text { font-size: 16px; margin-bottom: 30px; } .construction-tools { gap: 20px; margin-bottom: 20px; } .tool { font-size: 30px; } } /* // // ============================================================= ███████████████████████████████████████████████████████████ ███ ███ ███ EXTRA SMALL MOBILE LAYOUT ███ ███ (MAX-WIDTH: 480PX) ███ ███ ███ ███████████████████████████████████████████████████████████ ============================================================= // // // */ /* Extra Small Mobile - Skills grid adjustment for very small screens */ @media (max-width: 480px) { /* =========================== */ /* EXTRA CRITICAL MOBILE FIXES FOR LANGUAGE TOGGLE */ /* =========================== */ /* Even more aggressive positioning for very small screens */ .language-toggle { bottom: 15px !important; bottom: max(15px, env(safe-area-inset-bottom)) !important; right: 15px !important; right: max(15px, env(safe-area-inset-right)) !important; transform: none !important; transition: none !important; position: fixed !important; z-index: 997 !important; /* Lowered to be below header and mobile menu */ /* Prevent any overflow issues */ max-width: calc(100vw - 30px) !important; max-height: 50px !important; } .lang-btn { padding: 8px 12px !important; font-size: 12px !important; min-width: 45px !important; height: 40px !important; border-radius: 20px !important; /* Ensure button stays visible */ box-sizing: border-box !important; white-space: nowrap !important; overflow: hidden !important; } /* Enhanced mobile menu content for small screens */ .mobile-menu-content { width: 300px; padding: 60px 25px 20px 25px; /* Reduziertes oberes Padding */ background: linear-gradient(135deg, rgba(15, 15, 15, 0.98) 0%, rgba(35, 35, 35, 0.92) 50%, rgba(15, 15, 15, 0.98) 100%); backdrop-filter: blur(25px) saturate(200%); } .mobile-nav-link { font-size: 18px; padding: 20px 22px; letter-spacing: 1px; border-radius: 14px; } .mobile-nav-link:hover, .mobile-nav-link.active { transform: translateX(10px) scale(1.01); } /* Skills remain 3 columns for very small screens */ .skill-btn { min-height: 70px; font-size: 12px; padding: 12px 8px; gap: 10px; } .skills-grid { gap: 12px; padding: 0 15px; } /* Extra small mobile about page fixes */ .about-hero { padding: 40px 15px !important; } .about-container { padding: 0 10px !important; } .page-title { font-size: clamp(28px, 10vw, 40px) !important; margin-bottom: 25px !important; } .about-content { gap: 25px !important; padding: 0 5px !important; } .about-image { max-width: 260px !important; } .about-placeholder { height: 260px !important; width: 260px !important; max-width: 260px !important; font-size: 11px !important; border-radius: 18px !important; } /* FIXED EXTRA SMALL MOBILE UNIVERSITY LOGO - NO GRAY BOX */ .university-logo { height: 70px !important; /* Even smaller for extra small screens */ max-width: 260px !important; font-size: 11px !important; /* ENSURE no gray background shows */ background: none !important; border: none !important; } .university-logo-container { max-width: 260px !important; /* ENSURE no gray background shows */ background: none !important; } /* HIDE placeholder completely on extra small screens */ .university-logo-container .placeholder-image { display: none !important; } .intro-text { font-size: 16px !important; margin-bottom: 20px !important; line-height: 1.6 !important; } .about-text p { font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 18px !important; } .customers-section { padding: 40px 15px !important; } .section-title { font-size: clamp(24px, 8vw, 32px) !important; margin-bottom: 25px !important; } .customers-text { padding: 0 5px !important; } .customers-text p { font-size: 14px !important; margin-bottom: 16px !important; line-height: 1.6 !important; } .customers-gallery { gap: 15px !important; padding: 0 10px !important; } .customer-placeholder { height: 75px !important; max-width: 120px !important; font-size: 9px !important; /* ENSURE no gray background shows */ background: none !important; border: none !important; } .customer-item { max-width: 120px !important; /* ENSURE no gray background shows */ background: none !important; } .customer-logo-link { max-width: 120px !important; /* ENSURE no gray background shows */ background: none !important; } } /* =========================== */ /* IMPROVED MOBILE MENU PREVENT SCROLL FIX */ /* =========================== */ /* Prevent body scroll when mobile menu is open - WITHOUT POSITION FIXED */ body.mobile-menu-open { overflow: hidden; /* Removed position: fixed to prevent scroll to top */ } /* Mobile menu slide animations - ENHANCED MODERN STYLE */ @keyframes mobileMenuSlideInFromRight { from { opacity: 0; transform: translateX(40px) scale(0.9); filter: blur(2px); } 50% { opacity: 0.7; transform: translateX(10px) scale(0.95); filter: blur(1px); } to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } } @keyframes mobileMenuSlideOutToRight { from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } to { opacity: 0; transform: translateX(40px) scale(0.9); filter: blur(2px); } } @keyframes cyberGlow { 0%, 100% { opacity: 0; transform: translateX(20px); } 50% { opacity: 1; transform: translateX(0); } } .mobile-nav-link { opacity: 0; transform: translateX(40px) scale(0.9); animation: mobileMenuSlideInFromRight 0.6s cubic-bezier(0.23, 1, 0.320, 1) forwards; } .mobile-menu-overlay.active .mobile-nav-link:nth-child(1) { animation-delay: 0.1s; } .mobile-menu-overlay.active .mobile-nav-link:nth-child(2) { animation-delay: 0.2s; } .mobile-menu-overlay.active .mobile-nav-link:nth-child(3) { animation-delay: 0.3s; } .mobile-menu-overlay.active .mobile-nav-link:nth-child(4) { animation-delay: 0.4s; } /* Smooth Scrolling */ html { scroll-behavior: smooth; } /* Animation Classes */ .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Enhanced hover effects for interactive elements */ .nav-links a, .social-icon, .read-more-btn, .more-videos-btn, .skill-btn, .submit-btn { position: relative; overflow: hidden; } /* Enhanced transitions */ * { transition: all 0.3s ease; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--secondary-bg); } ::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); } /* Touch device optimizations - Enhanced mobile blocker */ @media (hover: none) and (pointer: coarse) { .video-thumbnail:hover, .project-card:hover, .skill-btn:hover { transform: none; } /* Disable all 3D effects and transforms for project cards on mobile */ .project-card-wrapper:hover, .project-card-wrapper.active, .project-card:hover, .project-card.active { transform: none !important; } .project-card-wrapper:hover::before, .project-card-wrapper.active::before { filter: none !important; transform: none !important; } .project-card-shine, .project-card-glare { opacity: 0 !important; } .project-card:hover .project-card-image, .project-card:hover img { transform: none !important; } .video-thumbnail:active { transform: scale(0.98); } .project-card:active { transform: translateY(-4px); } .skill-btn:active { transform: translateY(-2px); } } /* Ripple effect for button animations */ .ripple { position: absolute; border-radius: 50%; background-color: var(--white-alpha-60); width: 15px; height: 15px; margin-top: -7.5px; margin-left: -7.5px; animation: ripple 0.6s; opacity: 0; pointer-events: none; } @keyframes ripple { from { opacity: 1; transform: scale(0); } to { opacity: 0; transform: scale(4); } } .project-card.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } .project-card.fade-in.visible { opacity: 1; transform: translateY(0); } .skill-btn.fade-in { opacity: 0; transform: translateY(20px); transition: all 0.4s ease; } .skill-btn.fade-in.visible { opacity: 1; transform: translateY(0); } /* =========================== */ /* FIXED MOBILE UNIVERSITY LOGO - PREVENT GRAY BOX */ /* =========================== */ /* Universal fix to prevent placeholder background on all image elements */ .university-logo img, .customer-placeholder img { background: none !important; border: none !important; } /* Ensure placeholder divs are hidden when real images load */ .university-logo-container img[src]:not([src=""]) + .placeholder-image, .customer-logo-link img[src]:not([src=""]) + .placeholder-image { display: none !important; } /* Ensure image containers have no background when images are present */ .university-logo-container:has(img[src]:not([src=""])), .customer-logo-link:has(img[src]:not([src=""])) { background: none !important; } /* University Logo - prevent gray box completely */ .university-logo { background: none !important; border: none !important; } .university-logo-container { background: none !important; } /* Customer Logo - prevent gray box completely */ .customer-placeholder { background: none !important; border: none !important; } .customer-logo-link { background: none !important; } .customer-item { background: none !important; } /* About placeholder image - keep existing styles but ensure no gray borders on mobile */ @media (max-width: 900px) { .about-placeholder { background: var(--gradient-secondary) !important; border: 1px solid var(--border-light) !important; } /* But remove gray background from logo containers */ .university-logo, .university-logo-container, .customer-placeholder, .customer-logo-link, .customer-item { background: none !important; border: none !important; } } /* // // ============================================================= ███████████████████████████████████████████████████████████ ███ ███ ███ LIKE SYSTEM ███ ███ INTERAKTIVE ELEMENTE ███ ███ ███ ███████████████████████████████████████████████████████████ ============================================================= // // // */ /* =========================== */ /* LIKE SYSTEM ENHANCEMENTS */ /* =========================== */ /* Animation für Like Button Klick */ .like-btn.clicked { animation: likeRipple 0.6s ease-out; } @keyframes likeRipple { 0% { transform: scale(1); box-shadow: 0 0 0 0 var(--ripple-green-70); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px var(--ripple-green-transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--ripple-green-transparent); } } /* Toast Notifications für Like Feedback */ .toast { position: fixed; top: 20px; right: 20px; padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; z-index: 10000; box-shadow: 0 4px 12px var(--toast-shadow); transition: all 0.3s ease; } .toast-success { background: var(--accent-success); color: var(--white-solid); } .toast-error { background: var(--error-bg); color: var(--white-solid); } .toast-content { display: flex; align-items: center; gap: 8px; } /* PLACEHOLDER TEXT VERSTECKEN */ .project-placeholder span { display: none !important; } /* Alternative: Komplett transparenter Text */ .project-placeholder { color: transparent !important; font-size: 0 !important; } /* // // ============================================================= ███████████████████████████████████████████████████████████ ███ ███ ███ Video ███ ███ Player ███ ███ ███ ███████████████████████████████████████████████████████████ ============================================================= // // // */ /* Custom Video Player Container */ .custom-video-player { position: relative; width: 100%; height: 100%; background: #000; border-radius: 16px; overflow: hidden; cursor: pointer; } .custom-video-player.fullscreen-active { border-radius: 0; } .video-embed { width: 100%; height: 100%; border: none; border-radius: 16px; display: block; object-fit: cover; position: absolute; top: 0; left: 0; } /* Custom Video Controls */ .custom-video-controls { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .video-controls-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 60px 20px 20px; opacity: 1; transition: opacity 0.3s ease; pointer-events: all; z-index: 100; } /* Enhanced Progress Bar */ .video-progress-container { margin-bottom: 15px; } .video-progress-bar { position: relative; height: 6px; background: rgba(255,255,255,0.3); border-radius: 3px; cursor: pointer; margin-bottom: 8px; } .video-progress-bar:hover { height: 8px; transform: translateY(-1px); } .video-progress-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--accent-color); border-radius: 3px; width: 0%; transition: width 0.1s ease; } .video-progress-handle { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background: var(--accent-color); border: 2px solid #fff; border-radius: 50%; cursor: grab; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; left: 0%; z-index: 10; } .video-progress-bar:hover .video-progress-handle { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } .video-progress-handle:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.4); } /* Time Display */ .video-time-display { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 500; } /* Control Buttons - Responsive - 50% smaller */ .video-control-buttons { display: flex; align-items: center; gap: clamp(4px, 1vw, 7px); } .video-btn { background: rgba(255,255,255,0.1); border: none; color: white; /* Responsive padding - 50% smaller */ padding: clamp(3px, 0.6vw, 4px) clamp(4px, 0.75vw, 6px); border-radius: 6px; cursor: pointer; /* Responsive font size - 50% smaller */ font-size: clamp(6px, 1vw, 8px); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; /* Responsive dimensions - 50% smaller */ min-width: clamp(15px, 2.5vw, 20px); height: clamp(15px, 2.5vw, 20px); } .video-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.05); } .video-btn:active { transform: scale(0.95); } /* Play/Pause Button - Responsive - 50% smaller */ .play-pause-btn { background: var(--accent-color); /* Responsive dimensions - 50% smaller */ min-width: clamp(17px, 3vw, 25px); height: clamp(17px, 3vw, 25px); border-radius: 50%; /* Responsive font size - 50% smaller */ font-size: clamp(7px, 1.25vw, 9px); } /* Make all video control buttons the same size */ .play-pause-btn, .volume-btn, .fullscreen-btn { /* Override specific button sizing - make all buttons uniform */ min-width: clamp(20px, 3vw, 30px) !important; height: clamp(20px, 3vw, 30px) !important; padding: 0 !important; border-radius: 6px !important; font-size: clamp(8px, 1.25vw, 12px) !important; /* Video Player Button Icons - uniform sizing - Play und Pause gleich groß */ .video-btn .play-icon, .video-btn .pause-icon, .video-btn .volume-icon, .video-btn .fullscreen-icon { font-size: inherit; line-height: 1; display: flex; align-items: center; justify-content: center; } /* Play und Pause Icons explizit gleich groß machen */ .video-btn .play-icon, .video-btn .pause-icon { font-size: clamp(8px, 1.25vw, 12px) !important; width: 1em; height: 1em; } } /* Volume Control */ .video-volume-control { display: flex; align-items: center; gap: 8px; } .volume-slider-container { display: flex; align-items: center; opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; pointer-events: none; } .video-volume-control:hover .volume-slider-container { opacity: 1; transform: translateX(0); pointer-events: all; } .volume-slider { width: 80px; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; outline: none; cursor: pointer; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--accent-color); border-radius: 50%; cursor: pointer; border: 2px solid #fff; } .volume-slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--accent-color); border-radius: 50%; cursor: pointer; border: 2px solid #fff; } /* Control Spacer */ .video-control-spacer { flex: 1; } /* Fullscreen Button */ .fullscreen-btn { font-size: 20px; } /* Center Play/Pause Button - Responsive Design */ .center-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; /* Lowered to be below header and mobile menu */ pointer-events: all; display: flex; align-items: center; justify-content: center; } .center-play-btn { background: var(--green-alpha-95-bg); border: none; border-radius: 50%; /* Responsive width/height based on viewport - 50% smaller */ width: clamp(20px, 3vw, 40px); height: clamp(20px, 3vw, 40px); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--video-play-btn-text); /* Responsive font size - 50% smaller */ font-size: clamp(8px, 1.5vw, 16px); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 8px 32px var(--video-play-btn-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .center-play-btn:hover { background: var(--video-play-btn-hover-bg); transform: scale(1.1); box-shadow: 0 12px 40px var(--video-play-btn-hover-shadow); } .center-play-btn:active { transform: scale(0.95); } .center-play-icon { margin-left: 3px; /* Optical center alignment for play icon */ } /* Big Play Button for Mobile (keep for compatibility but hide) */ .big-play-button { display: none !important; /* Hide the old big play button */ } .big-play-button:active { transform: translate(-50%, -50%) scale(0.95); } .big-play-icon { margin-left: 4px; /* Center the play icon properly */ } /* Replay Button Styles */ .center-replay-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; /* Lowered to be below header and mobile menu */ display: none; } .center-replay-btn { background: var(--green-alpha-95-bg); border: none; border-radius: 50%; /* Responsive width/height based on viewport - same as play button */ width: clamp(20px, 3vw, 40px); height: clamp(20px, 3vw, 40px); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--video-play-btn-text); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 8px 32px var(--video-play-btn-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .center-replay-btn:hover { background: var(--video-play-btn-hover-bg); transform: scale(1.1); box-shadow: 0 12px 40px var(--video-play-btn-hover-shadow); } .center-replay-btn:active { transform: scale(0.95); } .center-replay-icon { font-size: 18px; animation: rotateReplay 0.3s ease; } /* Enhanced Video Container Styles for Better Rounded Corners */ .custom-video-player { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden !important; /* Force overflow hidden */ background: var(--tertiary-bg); transform: none !important; /* Prevent any transforms on container */ z-index: 10 !important; /* Ensure video stays below mobile menu */ } .custom-video-player:hover { transform: none !important; /* Prevent any transforms on hover */ } .custom-video-player video { border-radius: 16px; object-fit: cover !important; /* Force object-fit cover */ width: 100% !important; height: 100% !important; position: absolute !important; top: 0 !important; left: 0 !important; transform: none !important; /* Prevent any transforms on video */ z-index: 1 !important; /* Ensure video element stays below everything */ } .custom-video-player video:hover { transform: none !important; /* Prevent any transforms on video hover */ } .video-container:hover .video-embed { transform: none !important; /* Prevent any unwanted transformations on hover */ } /* Enhanced fullscreen mode */ .custom-video-player.fullscreen-active { border-radius: 0; } .custom-video-player.fullscreen-active video { border-radius: 0; } .center-replay-text { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } @keyframes rotateReplay { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Enhanced Replay Icon Styles */ .center-replay-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 60% !important; height: 60% !important; animation: rotateReplay 0.3s ease !important; } .center-replay-icon img { width: 100% !important; height: 100% !important; color: inherit !important; transition: transform 0.3s ease !important; } .center-replay-btn:hover .center-replay-icon img { transform: rotate(360deg) !important; } /* Hide native video controls */ .video-embed::-webkit-media-controls { display: none !important; } .video-embed::-webkit-media-controls-enclosure { display: none !important; } .video-embed::-webkit-media-controls-panel { display: none !important; } /* Fullscreen optimizations */ .custom-video-player:-webkit-full-screen { background: #000; } .custom-video-player:-moz-full-screen { background: #000; } .custom-video-player:fullscreen { background: #000; } /* Mobile Responsive adjustments - Enhanced - 50% smaller */ @media (max-width: 768px) { .video-controls-overlay { padding: 40px 15px 15px; } .video-control-buttons { gap: clamp(3px, 1vw, 5px); } .video-btn { padding: clamp(2px, 0.5vw, 3px) clamp(3px, 0.6vw, 5px); min-width: clamp(14px, 2vw, 18px); height: clamp(14px, 2vw, 18px); font-size: clamp(5px, 0.9vw, 7px); } .play-pause-btn { min-width: clamp(16px, 2.5vw, 22px); height: clamp(16px, 2.5vw, 22px); font-size: clamp(6px, 1vw, 8px); } /* Mobile: Make all video control buttons the same size */ .play-pause-btn, .volume-btn, .fullscreen-btn { min-width: clamp(18px, 2.5vw, 22px) !important; height: clamp(18px, 2.5vw, 22px) !important; padding: 0 !important; /* Mobile: Video Player Button Icons - Play Icon kleiner als andere */ .video-btn .play-icon { font-size: clamp(5px, 0.8vw, 7px) !important; line-height: 1; } .video-btn .pause-icon, .video-btn .volume-icon, .video-btn .fullscreen-icon { font-size: clamp(6px, 1vw, 8px) !important; line-height: 1; } /* Play und Pause Icons gleich groß im Vollbild-Modus */ .video-player.fullscreen .video-btn .play-icon, .video-player.fullscreen .video-btn .pause-icon { font-size: clamp(6px, 1vw, 8px) !important; } border-radius: 6px !important; font-size: clamp(6px, 1vw, 8px) !important; } .big-play-button { width: clamp(25px, 4vw, 35px); height: clamp(25px, 4vw, 35px); font-size: clamp(9px, 1.5vw, 12px); } .volume-slider { width: clamp(20px, 4vw, 30px); } .video-progress-handle { width: clamp(8px, 1.25vw, 10px); height: clamp(8px, 1.25vw, 10px); } .video-progress-bar { height: clamp(3px, 0.5vw, 4px); } .video-progress-bar:hover { height: clamp(4px, 0.6vw, 5px); } /* Additional mobile-specific button adjustments - optimized for mobile */ .center-play-btn { width: clamp(15px, 3.5vw, 25px); height: clamp(15px, 3.5vw, 25px); font-size: clamp(6px, 1.8vw, 10px); } .play-video-btn { padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 18px); font-size: clamp(10px, 2.5vw, 14px); gap: clamp(4px, 1vw, 6px); border-radius: clamp(12px, 3vw, 20px); /* Verbesserte Proportionen für mobile Geräte */ min-width: auto; max-width: 120px; white-space: nowrap; } .play-icon { font-size: clamp(10px, 2.5vw, 14px); margin-left: 2px; } .play-text { font-size: clamp(10px, 2.5vw, 14px); display: inline; } } /* Touch device optimizations */ @media (hover: none) and (pointer: coarse) { .video-progress-handle { opacity: 1; width: 20px; height: 20px; } .volume-slider-container { opacity: 1; transform: translateX(0); pointer-events: all; } } /* Tablet Responsive adjustments (769px - 1024px) - 50% smaller */ @media (min-width: 769px) and (max-width: 1024px) { .center-play-btn { width: clamp(25px, 3.5vw, 35px); height: clamp(25px, 3.5vw, 35px); font-size: clamp(10px, 1.75vw, 14px); } .play-video-btn { padding: clamp(10px, 2.2vw, 14px) clamp(16px, 3.2vw, 22px); font-size: clamp(12px, 2.8vw, 16px); border-radius: clamp(16px, 3.5vw, 24px); max-width: 160px; display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 8px); } .play-icon { font-size: clamp(12px, 2.8vw, 16px); } .play-text { display: inline; font-size: clamp(12px, 2.8vw, 16px); } .video-btn { min-width: clamp(17px, 2.25vw, 19px); height: clamp(17px, 2.25vw, 19px); font-size: clamp(6px, 0.95vw, 7px); } .play-pause-btn { min-width: clamp(20px, 2.75vw, 23px); height: clamp(20px, 2.75vw, 23px); font-size: clamp(7px, 1.1vw, 8px); /* Tablet: Video Player Button Icons - Play und Pause gleich groß */ .video-btn .play-icon, .video-btn .pause-icon { font-size: clamp(7px, 1.1vw, 8px) !important; line-height: 1; width: 1em; height: 1em; } .video-btn .volume-icon, .video-btn .fullscreen-icon { font-size: clamp(7px, 1.1vw, 8px) !important; line-height: 1; } } /* Tablet: Make all video control buttons the same size */ .play-pause-btn, .volume-btn, .fullscreen-btn { min-width: clamp(20px, 2.75vw, 23px) !important; height: clamp(20px, 2.75vw, 23px) !important; padding: 0 !important; border-radius: 6px !important; font-size: clamp(7px, 1.1vw, 8px) !important; } } /* Large screens optimization (1025px+) - 50% smaller */ @media (min-width: 1025px) { .center-play-btn { width: clamp(30px, 2vw, 40px); height: clamp(30px, 2vw, 40px); font-size: clamp(12px, 1vw, 16px); } .play-video-btn { padding: clamp(12px, 1.8vw, 16px) clamp(20px, 2.8vw, 28px); font-size: clamp(14px, 1.2vw, 16px); border-radius: clamp(20px, 2.5vw, 30px); max-width: 180px; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1vw, 10px); } .play-icon { font-size: clamp(14px, 1.2vw, 16px); } .play-text { display: inline; font-size: clamp(14px, 1.2vw, 16px); } /* Force single-scroll mobile modal: media first, then text/buttons in one scrollable column */ @media (max-width: 768px), (hover: none) and (pointer: coarse) { .project-modal-content { display: flex !important; flex-direction: column !important; max-height: 90vh !important; overflow: hidden !important; } .project-modal-main { display: block !important; flex: 1 1 auto !important; height: auto !important; overflow: hidden !important; } .project-modal-content-mobile { display: block !important; height: 100% !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 18px !important; } .project-modal-media, .project-modal-info { max-height: none !important; overflow: visible !important; padding: 0 !important; } .project-modal-media { border-right: none !important; border-bottom: 1px solid var(--white-alpha-10) !important; margin-bottom: 12px !important; padding-bottom: 12px !important; } } /* Touch-device overrides to ensure mobile popup layout also on large touch screens (iPad etc.) */ @media (hover: none) and (pointer: coarse) { .project-modal-main { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .project-modal-content-mobile { display: flex; flex-direction: column; gap: 20px; flex: 1; overflow-y: auto; padding: 18px; } .project-modal-media { border: none; padding: 0; overflow: visible; max-height: none; flex-shrink: 0; border-bottom: 1px solid var(--white-alpha-10); } .project-modal-info { padding: 0; max-height: none; overflow: visible; font-size: 13px; flex-shrink: 0; } } /* Widen mobile breakpoint for tablets */ @media (max-width: 1024px) and (hover: none) and (pointer: coarse) { .project-modal-content { max-height: 92vh; } } /* === Overrides to match original mobile popup layout (keep desktop as backup) === */ @media (min-width: 769px) { .project-modal-content-mobile { display: contents; } } @media (max-width: 768px) { .project-modal-main { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .project-modal-content-mobile { display: flex; flex-direction: column; gap: 20px; flex: 1; overflow-y: auto; padding: 18px; } .project-modal-media { border: none; padding: 0; overflow: visible; max-height: none; flex-shrink: 0; } .project-modal-info { padding: 0; max-height: none; overflow: visible; font-size: 13px; flex-shrink: 0; } } /* Center alignment fixes for Student Work (title and More Videos button) */ .student-work .video-title { text-align: center; } .more-videos-controls { display: flex; justify-content: center; } /* JS-assisted mobile layout toggle by browser width */ .project-modal.mobile-layout .project-modal-content { display: block !important; max-height: 90vh !important; overflow-y: auto !important; } .project-modal.mobile-layout .project-modal-main { display: block !important; overflow: visible !important; height: auto !important; } .project-modal.mobile-layout .project-modal-content-mobile { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; } .project-modal.mobile-layout .project-modal-media, .project-modal.mobile-layout .project-modal-info { max-height: none !important; overflow: visible !important; -webkit-overflow-scrolling: touch; padding-left: 0 !important; padding-right: 0 !important; } .project-modal.mobile-layout .project-modal-media { border-right: none !important; border-bottom: 1px solid var(--white-alpha-10) !important; margin-bottom: 12px !important; padding-bottom: 12px !important; } /* MOBILE PROJECT MODAL ACTION BUTTONS: smaller download and fullscreen buttons */ @media (max-width: 768px) { .modal-action-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } .modal-action-btn img { width: 14px !important; height: 14px !important; } /* MOBILE PROJECT MODAL GALLERY: Better mobile slider layout */ .project-modal-gallery { gap: 15px !important; padding: 0 5px; scroll-snap-type: y proximity; } .project-modal-gallery .gallery-item { scroll-snap-align: start; } .gallery-item { min-height: 200px; border-radius: 6px; } .gallery-item:hover { transform: scale(1.01); /* Reduce hover scale for mobile */ } } /* VERY SMALL MOBILE SCREENS: Single column video grid */ @media (max-width: 400px) { .video-grid { grid-template-columns: 1fr !important; /* Single column for very small screens */ gap: 10px; padding: 0 8px; /* Increased padding for better single column spacing */ max-width: 280px; /* Constrain width for single column */ margin: 0 auto; /* Center the single column */ } .video-thumbnail { max-width: 100%; margin: 0 auto; } .thumbnail-title { font-size: 11px !important; } .thumbnail-category { font-size: 8px !important; } /* Also adjust video gallery padding for very small screens */ .video-gallery { padding: 10px !important; } } /* FINAL MOBILE MODAL LAYOUT: single scroll area on the modal content */ @media (max-width: 768px) { .project-modal .project-modal-content { display: block !important; max-height: 90vh !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } .project-modal .project-modal-main { display: block !important; height: auto !important; overflow: visible !important; } .project-modal .project-modal-content-mobile { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 18px !important; } .project-modal .project-modal-media, .project-modal .project-modal-info { max-height: none !important; height: auto !important; overflow: visible !important; padding-left: 0 !important; padding-right: 0 !important; } .project-modal .project-modal-media { border-right: none !important; border-bottom: 1px solid var(--white-alpha-10) !important; margin-bottom: 12px !important; padding-bottom: 12px !important; } } } /* ========================= REAL-TIME SYNC ANIMATION INDICATORS ========================= */ /* Sync indicator for remote like animations */ .like-btn.synced-animation { position: relative; animation: syncPulse 0.8s ease-out; } .like-btn.synced-animation::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 2px solid var(--accent-color); border-radius: 25px; opacity: 0; animation: syncBorderPulse 0.8s ease-out; } /* Sync pulse animation */ @keyframes syncPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); } 50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(74, 222, 128, 0.2); } 100% { transform: scale(1); box-shadow: 0 0 0 20px rgba(74, 222, 128, 0); } } /* Border pulse animation */ @keyframes syncBorderPulse { 0% { opacity: 0; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.3); } } /* Small sync indicator dot */ .like-count.synced { position: relative; } .like-count.synced::after { content: ''; position: absolute; top: -3px; right: -8px; width: 6px; height: 6px; background: var(--accent-color); border-radius: 50%; opacity: 0; animation: syncDot 1s ease-out; } @keyframes syncDot { 0% { opacity: 0; transform: scale(0); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(0.8); } } /* ========================= LIKE BUTTON PARTICLE ANIMATION ========================= */ /* Particle container */ .like-particles-container { position: fixed; pointer-events: none; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%; } /* Individual particle styles */ .like-particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; opacity: 0; animation: particleFloat 1.5s ease-out forwards; } /* Three different red tones */ .like-particle.red-1 { background: #ef4444; box-shadow: 0 0 8px #ef4444; } .like-particle.red-2 { background: #dc2626; box-shadow: 0 0 8px #dc2626; } .like-particle.red-3 { background: #f87171; box-shadow: 0 0 8px #f87171; } /* Different particle sizes for variety */ .like-particle.size-small { width: 6px; height: 6px; } .like-particle.size-medium { width: 8px; height: 8px; } .like-particle.size-large { width: 10px; height: 10px; } /* Particle animation keyframes */ @keyframes particleFloat { 0% { opacity: 1; transform: translateY(0) scale(0.5); } 20% { opacity: 1; transform: translateY(-15px) scale(1); } 100% { opacity: 0; transform: translateY(-60px) scale(0.3); } } /* Different particle direction animations */ .like-particle.direction-1 { animation: particleFloat1 1.5s ease-out forwards; } .like-particle.direction-2 { animation: particleFloat2 1.5s ease-out forwards; } .like-particle.direction-3 { animation: particleFloat3 1.5s ease-out forwards; } .like-particle.direction-4 { animation: particleFloat4 1.5s ease-out forwards; } @keyframes particleFloat1 { 0% { opacity: 1; transform: translate(0, 0) scale(0.5) rotate(0deg); } 20% { opacity: 1; transform: translate(-20px, -20px) scale(1) rotate(90deg); } 100% { opacity: 0; transform: translate(-40px, -80px) scale(0.2) rotate(180deg); } } @keyframes particleFloat2 { 0% { opacity: 1; transform: translate(0, 0) scale(0.5) rotate(0deg); } 20% { opacity: 1; transform: translate(20px, -15px) scale(1) rotate(-90deg); } 100% { opacity: 0; transform: translate(35px, -70px) scale(0.2) rotate(-180deg); } } @keyframes particleFloat3 { 0% { opacity: 1; transform: translate(0, 0) scale(0.5) rotate(0deg); } 20% { opacity: 1; transform: translate(-10px, -25px) scale(1) rotate(45deg); } 100% { opacity: 0; transform: translate(-25px, -90px) scale(0.3) rotate(135deg); } } @keyframes particleFloat4 { 0% { opacity: 1; transform: translate(0, 0) scale(0.5) rotate(0deg); } 20% { opacity: 1; transform: translate(15px, -30px) scale(1) rotate(-45deg); } 100% { opacity: 0; transform: translate(30px, -95px) scale(0.2) rotate(-135deg); } } /* // // ============================================================= ███████████████████████████████████████████████████████████ ███ ███ ███ SCROLL ANIMATIONEN ███ ███ MORPH BEIM SCROLLEN ███ ███ ███ ███████████████████████████████████████████████████████████ ============================================================= // // // */ /* =========================== */ /* SCROLL MORPH ANIMATIONEN */ /* =========================== */ /* Basis-Klassen für Scroll-Animationen */ .scroll-animate { opacity: 0; transform: translateY(50px) scale(0.8); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform, opacity; } .scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } /* Verschiedene Animationsstile */ .scroll-animate-fade { opacity: 0; transform: translateY(40px) scale(0.9); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .scroll-animate-fade.animate-visible { opacity: 1; transform: translateY(0) scale(1); } .scroll-animate-slide { opacity: 0; transform: translateY(60px) scale(0.85); transition: all 0.9s cubic-bezier(0.165, 0.84, 0.44, 1); } .scroll-animate-slide.animate-visible { opacity: 1; transform: translateY(0) scale(1); } .scroll-animate-morph { opacity: 0; transform: translateY(80px) scale(0.7) rotateX(15deg); transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); transform-origin: center bottom; } .scroll-animate-morph.animate-visible { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); } /* Gestaffelte Animationen für mehrere Elemente */ .scroll-animate[data-delay="0"] { transition-delay: 0s; } .scroll-animate[data-delay="1"] { transition-delay: 0.1s; } .scroll-animate[data-delay="2"] { transition-delay: 0.2s; } .scroll-animate[data-delay="3"] { transition-delay: 0.3s; } .scroll-animate[data-delay="4"] { transition-delay: 0.4s; } .scroll-animate[data-delay="5"] { transition-delay: 0.5s; } .scroll-animate[data-delay="6"] { transition-delay: 0.6s; } /* Spezielle Animationen für Projekt-Karten */ .project-card-wrapper.scroll-animate { opacity: 0; transform: translateY(60px) scale(0.8) rotateY(5deg); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform-origin: center center; } .project-card-wrapper.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1) rotateY(0deg); } /* Story Section Animation */ .story-section.scroll-animate { opacity: 0; transform: translateY(50px) scale(0.95); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .story-section.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } /* Projects Section Animation */ .projects-section.scroll-animate { opacity: 0; transform: translateY(70px) scale(0.9); transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); } .projects-section.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } /* Student Work Section Animation */ .student-work.scroll-animate { opacity: 0; transform: translateY(60px) scale(0.88); transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1); } .student-work.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } /* Individueller Content innerhalb der Sektionen */ .story-content.scroll-animate, .story-info.scroll-animate { opacity: 0; transform: translateY(30px) scale(0.95); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .story-content.scroll-animate.animate-visible, .story-info.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } .projects-title.scroll-animate { opacity: 0; transform: translateY(40px) scale(0.9); transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); } .projects-title.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } .projects-description.scroll-animate { opacity: 0; transform: translateY(30px) scale(0.95); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .projects-description.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } /* Video Controls Animation */ .video-controls.scroll-animate, .more-videos-controls.scroll-animate { opacity: 0; transform: translateY(25px) scale(0.95); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .video-controls.scroll-animate.animate-visible, .more-videos-controls.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } /* Main Video Section Animation */ .main-video-section.scroll-animate { opacity: 0; transform: translateY(40px) scale(0.92); transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1); } .main-video-section.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } /* Student Title Animation */ .student-title.scroll-animate { opacity: 0; transform: translateY(50px) scale(0.85); transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1); } .student-title.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } /* Video Gallery Animation */ .video-gallery.scroll-animate { opacity: 0; transform: translateY(35px) scale(0.93); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .video-gallery.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } /* About Page Animationen */ .about-content.scroll-animate { opacity: 0; transform: translateY(50px) scale(0.9); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .about-content.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } .customers-section.scroll-animate { opacity: 0; transform: translateY(60px) scale(0.88); transition: all 0.9s cubic-bezier(0.165, 0.84, 0.44, 1); } .customers-section.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1); } .customer-item.scroll-animate { opacity: 0; transform: translateY(30px) scale(0.85) rotateY(10deg); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .customer-item.scroll-animate.animate-visible { opacity: 1; transform: translateY(0) scale(1) rotateY(0deg); } /* Mobile optimierte Animationen */ @media (max-width: 768px) { .scroll-animate { transform: translateY(30px) scale(0.9); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scroll-animate-morph { transform: translateY(40px) scale(0.85); transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1); } .project-card-wrapper.scroll-animate { transform: translateY(40px) scale(0.9); transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } } /* Performance-Optimierungen */ .scroll-animate, .scroll-animate-fade, .scroll-animate-slide, .scroll-animate-morph { backface-visibility: hidden; -webkit-backface-visibility: hidden; perspective: 1000px; -webkit-perspective: 1000px; } /* Reduzierte Bewegung für Nutzer mit motion-Präferenzen */ @media (prefers-reduced-motion: reduce) { .scroll-animate, .scroll-animate-fade, .scroll-animate-slide, .scroll-animate-morph { transition: opacity 0.3s ease; transform: none; } .scroll-animate.animate-visible, .scroll-animate-fade.animate-visible, .scroll-animate-slide.animate-visible, .scroll-animate-morph.animate-visible { transform: none; } } /* ======================================== SCROLL ANIMATIONS - ADVANCED SCROLL-TRIGGERED ANIMATIONS ======================================== */ /* Base animation states - elements start hidden and transition in */ .scroll-animate { opacity: 0; transform: translateY(60px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform, opacity; } .scroll-animate.animate-in { opacity: 1; transform: translateY(0); } /* Ensure fixed header and language toggle are unaffected by any ancestor transforms */ .header, .language-toggle { transform: none !important; will-change: opacity; } /* Different animation types */ .scroll-animate.fade-in { opacity: 0; transform: none; } .scroll-animate.fade-in.animate-in { opacity: 1; } .scroll-animate.slide-up { opacity: 0; transform: translateY(80px); } .scroll-animate.slide-up.animate-in { opacity: 1; transform: translateY(0); } .scroll-animate.slide-down { opacity: 0; transform: translateY(-60px); } .scroll-animate.slide-down.animate-in { opacity: 1; transform: translateY(0); } .scroll-animate.slide-left { opacity: 0; transform: translateX(60px); } .scroll-animate.slide-left.animate-in { opacity: 1; transform: translateX(0); } .scroll-animate.slide-right { opacity: 0; transform: translateX(-60px); } .scroll-animate.slide-right.animate-in { opacity: 1; transform: translateX(0); } .scroll-animate.scale-in { opacity: 0; transform: scale(0.8); } .scroll-animate.scale-in.animate-in { opacity: 1; transform: scale(1); } .scroll-animate.rotate-in { opacity: 0; transform: rotate(-10deg) scale(0.9); } .scroll-animate.rotate-in.animate-in { opacity: 1; transform: rotate(0deg) scale(1); } /* Progressive animation delays for staggered effects */ .scroll-animate.delay-100 { transition-delay: 0.1s; } .scroll-animate.delay-200 { transition-delay: 0.2s; } .scroll-animate.delay-300 { transition-delay: 0.3s; } .scroll-animate.delay-400 { transition-delay: 0.4s; } .scroll-animate.delay-500 { transition-delay: 0.5s; } .scroll-animate.delay-600 { transition-delay: 0.6s; } .scroll-animate.delay-700 { transition-delay: 0.7s; } .scroll-animate.delay-800 { transition-delay: 0.8s; } .scroll-animate.delay-900 { transition-delay: 0.9s; } .scroll-animate.delay-1000 { transition-delay: 1.0s; } .scroll-animate.delay-1100 { transition-delay: 1.1s; } .scroll-animate.delay-1200 { transition-delay: 1.2s; } /* Special hero title animation */ .hero-title.scroll-animate { opacity: 0; transform: translateY(100px) scale(0.9); transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .hero-title.scroll-animate.animate-in { opacity: 1; transform: translateY(0) scale(1); } .hero-subtitle.scroll-animate { opacity: 0; transform: translateY(60px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: 0.3s; } .hero-subtitle.scroll-animate.animate-in { opacity: 1; transform: translateY(0); } /* Project cards special animation */ .project-card-wrapper.scroll-animate { opacity: 0; transform: translateY(80px) scale(0.95); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .project-card-wrapper.scroll-animate.animate-in { opacity: 1; transform: translateY(0) scale(1); } /* Smooth scroll behavior for all elements */ html { scroll-behavior: smooth; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { .scroll-animate { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } /* Ensure header title and close are horizontally aligned and never overlap */ /* Mobile menu header within the slide-out panel */ /* =========================== PATCH 2025-08: Mobile safe-area + unified card radius + modal header fix =========================== */ /* Ensure hero uses dynamic viewport height to avoid permanent shrink on mobile */ .hero { height: 100dvh !important; } @supports not (height: 100dvh) { .hero { height: 100vh !important; } } /* Mobile menu panel: keep corners rounded and content clipped within panel */ .mobile-menu-content { border-top-left-radius: 16px; border-bottom-left-radius: 16px; overflow: hidden; } /* Unify project card and placeholder rounding on mobile */ :root { --card-radius-mobile: 12px; } @media (max-width: 768px) { .project-card, .project-card .lazy-image-container, .project-image-container, .project-card-image, .project-card img, .project-placeholder, .project-card .project-placeholder, .gallery-item { border-radius: var(--card-radius-mobile) !important; } .project-card .lazy-image-container, .project-image-container, .project-placeholder { overflow: hidden !important; } .project-card img, .project-card-image { display: block; border-radius: inherit !important; } } /* Project Modal: keep title and close inside popup and round the top edge */ .project-modal-content { position: relative; border-radius: 18px; overflow: hidden; background: var(--secondary-bg); } .project-modal-header { position: sticky; top: 0; z-index: 5; background: transparent; border-top-left-radius: inherit; border-top-right-radius: inherit; padding: calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left)); } .project-modal-header .project-modal-title { margin: 0; } .project-modal-close, .project-modal-header .project-modal-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); margin: 0 !important; background: var(--white-alpha-05) !important; border: 1px solid var(--white-alpha-20) !important; } /* Clamp modal content height to dynamic viewport to avoid being cut by browser UI */ @media (max-width: 900px) { .project-modal .project-modal-content { max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))); } } /* Modal header alignment and close button color (red) with responsive title sizing */ .project-modal-header { display: grid; grid-template-columns: 1fr auto; align-items: center; /* centers title and button vertically on one line */ gap: 10px; } .project-modal-header .project-modal-title { margin: 0; max-width: calc(100% - 56px); /* leave space for the 36px button + gaps */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(16px, 4vw, 22px); line-height: 1.2; } .project-modal-close, .project-modal-header .project-modal-close { position: static !important; /* override earlier absolute to align in grid */ top: auto !important; right: auto !important; justify-self: end; width: 36px; height: 36px; display: inline-flex; align-items: center; /* Round close button */ .project-modal-close, .project-modal-header .project-modal-close { border-radius: 9999px !important; } /* Make images wider on mobile inside popup and reduce side padding/margins */ @media (max-width: 768px) { /* Expand modal container closer to viewport edges while respecting safe-area */ .project-modal-container { width: calc(100vw - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right))) !important; max-width: calc(100vw - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right))) !important; padding-left: max(8px, env(safe-area-inset-left)) !important; padding-right: max(8px, env(safe-area-inset-right)) !important; } /* Reduce inner content padding so media can get wider */ .project-modal .project-modal-content, .project-modal .project-modal-content-mobile { padding-left: 0 !important; padding-right: 0 !important; } /* Ensure media fills content width */ .project-modal .project-modal-media, .project-modal .project-modal-gallery { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Mobile: expand media inside popup to reduce side space while keeping safe-area */ @media (max-width: 768px) { /* Wrap media edge-to-edge inside the modal content */ .project-modal .project-modal-content, .project-modal .project-modal-content-mobile, .project-modal .project-modal-main { padding-left: 0 !important; padding-right: 0 !important; } .project-modal .project-modal-media, .project-modal .project-modal-gallery { margin-left: max(0px, env(safe-area-inset-left)) !important; margin-right: max(0px, env(safe-area-inset-right)) !important; } /* Ensure actual media fills full width */ .project-modal .project-modal-media img, .project-modal .project-modal-media video, .project-modal .project-modal-gallery .gallery-item, .project-modal .project-modal-gallery img, .project-modal .project-modal-gallery video { display: block !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; } } .project-modal .project-modal-media img, .project-modal .project-modal-media video, .project-modal-gallery .gallery-item { width: 100% !important; max-width: 100% !important; } } justify-content: center; background: var(--error-bg) !important; /* red as before */ border: 1px solid var(--error-50-border) !important; color: var(--text-white) !important; /* Mobile: narrower popup container, but media larger inside (fills container width) */ @media (max-width: 768px) { /* Make popup a bit narrower */ .project-modal .project-modal-container { width: 92vw !important; max-width: 92vw !important; } /* Remove inner horizontal padding so media can use full container width */ .project-modal .project-modal-content, .project-modal .project-modal-content-mobile, .project-modal .project-modal-main { padding-left: 0 !important; padding-right: 0 !important; } /* Ensure media wrappers don't reduce width and have no side gaps */ .project-modal .project-modal-media, .project-modal .project-modal-gallery { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Media elements fill the container completely */ .project-modal .project-modal-media img, .project-modal .project-modal-media video, .project-modal .project-modal-gallery .gallery-item, .project-modal .project-modal-gallery img, .project-modal .project-modal-gallery video { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* FINAL OVERRIDES: round close button and full-bleed media on mobile popup */ /* Close button perfectly round and red, cover common selectors */ .project-modal .project-modal-header .project-modal-close, .project-modal .project-modal-close, .project-modal .modal-close, .project-modal .close-button, .project-modal [data-close] { border-radius: 9999px !important; width: 36px !important; height: 36px !important; background: var(--error-bg) !important; border: 1px solid var(--error-50-border) !important; color: var(--text-white) !important; display: inline-flex; align-items: center; justify-content: center; } .project-modal .project-modal-header { display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; } .project-modal .project-modal-header .project-modal-title, .project-modal .project-modal-header h2, .project-modal .project-modal-header h3 { margin: 0; max-width: calc(100% - 56px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(16px, 4vw, 22px); line-height: 1.2; } /* Full-bleed media on small screens inside popup */ @media (max-width: 768px) { /* remove inner horizontal padding so we can bleed to edges */ .project-modal .project-modal-content, .project-modal .project-modal-content-mobile, .project-modal .project-modal-media, .project-modal .project-modal-gallery { padding-left: 0 !important; padding-right: 0 !important; } /* push media to true viewport edges while respecting safe areas */ .project-modal .project-modal-media img, .project-modal .project-modal-media video, .project-modal .project-modal-gallery .gallery-item, .project-modal .project-modal-gallery img, .project-modal .project-modal-gallery video { display: block !important; box-sizing: border-box !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw + max(8px, env(safe-area-inset-left))) !important; margin-right: calc(50% - 50vw + max(8px, env(safe-area-inset-right))) !important; } } /* Ensure media containers truly span edge-to-edge on mobile */ @media (max-width: 768px) { .project-modal .project-modal-content, .project-modal .project-modal-content-mobile, .project-modal .project-modal-media, .project-modal .project-modal-gallery { width: 100vw !important; max-width: 100vw !important; margin-left: calc(-1 * max(0px, env(safe-area-inset-left))) !important; margin-right: calc(-1 * max(0px, env(safe-area-inset-right))) !important; } } border-radius: 10px; } .project-modal-close:hover, .project-modal-header .project-modal-close:hover { background: var(--error-dark) !important; }