/* --- LOKALE SCHRIFTARTEN (DSGVO KONFORM) --- */
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }

/* --- GLOBALE VARIABLEN --- */
:root {
    --bg-main: #0c0c0e; 
    --bg-card: rgba(18, 18, 22, 0.7);
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #ffffff;
    --text-muted: #a1a1aa;
    --cyan: #00f0ff;
    --purple: #8a2be2;
    --pink: #ff007f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, a, a:link, a:visited, a:active, button, .dropbtn, .project-card, .modal-close { cursor: none !important; text-decoration: none; color: inherit; }

body { background-color: var(--bg-main); color: var(--text-main); font-family: 'Inter', sans-serif; overflow-x: hidden; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }
section, .project-card { scroll-margin-top: 120px; }
.text-center { text-align: center; }

/* --- CUSTOM CURSOR --- */
#custom-cursor, .cursor-trail { position: fixed; top: 0; left: 0; pointer-events: none; will-change: transform; }
#custom-cursor { z-index: 9999999; }
.cursor-trail { z-index: 9999998; }
#custom-cursor.hidden, .cursor-trail.hidden { opacity: 0 !important; }

.prism-shape {
    width: 22px; height: 22px; background: linear-gradient(135deg, var(--cyan), var(--purple)); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); position: absolute;
    left: -11px; top: -11px; animation: spin-prism 4s linear infinite; transition: background 0.3s ease; filter: drop-shadow(0 0 8px var(--cyan));
}
.prism-shape::after { content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background: var(--bg-main); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

.trail-1 .prism-shape { transform: scale(0.7); opacity: 0.6; filter: none;}
.trail-2 .prism-shape { transform: scale(0.4); opacity: 0.3; filter: none;}
.trail-3 .prism-shape { transform: scale(0.2); opacity: 0.1; filter: none;}
@keyframes spin-prism { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(360deg) scale(1); } }
#custom-cursor.hovering .prism-shape, .cursor-trail.hovering .prism-shape { background: linear-gradient(135deg, var(--pink), var(--cyan)); animation-duration: 0.6s; }

/* --- HINTERGRÜNDE --- */
#canvas-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -3; }
.grid-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; background-size: 50px 50px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px); pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%); }
.ambient-light { position: fixed; left: 50%; width: 80vw; height: 400px; border-radius: 50%; margin-left: -40vw; z-index: -2; pointer-events: none; opacity: 0.5; }
.light-top { top: -200px; background: radial-gradient(circle, rgba(0,240,255,0.15) 0%, transparent 70%); animation: ambient-top 10s ease-in-out infinite alternate; }
.light-bottom { bottom: -200px; background: radial-gradient(circle, rgba(138,43,226,0.15) 0%, transparent 70%); animation: ambient-bottom 12s ease-in-out infinite alternate; }
@keyframes ambient-top { 0% { transform: translate(-10%, -50px); } 100% { transform: translate(10%, 20px); } }
@keyframes ambient-bottom { 0% { transform: translate(10%, 50px); } 100% { transform: translate(-10%, -20px); } }

/* --- TYPOGRAFIE --- */
.gradient-text { background: linear-gradient(90deg, var(--cyan), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.mono-text { font-family: 'Space Mono', monospace; font-size: 1.1rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.text-neon { color: var(--cyan); font-weight: 700; }
.mt-10 { margin-top: 10px; }

/* --- NAVIGATION --- */
.glass-nav { position: fixed; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; background: rgba(12, 12, 14, 0.8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid var(--border-color); z-index: 1000; }
.logo { display: flex; align-items: center; }
.nerd-logo { filter: drop-shadow(0 0 5px rgba(0,240,255,0.3)); transition: transform 0.3s ease; }
.nerd-logo:hover { transform: scale(1.05) rotate(-2deg); }

.desktop-contact-btn { display: inline-block; }
.mobile-contact-btn { display: none; margin-top: 20px !important; }

.nav-links { display: flex; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-links > a, .dropbtn { color: var(--text-main); margin: 0 20px; font-size: 0.9rem; font-weight: 600; transition: color 0.3s; cursor: pointer; }
.nav-links > a:hover, .dropbtn:hover { color: var(--cyan); }
.dropdown { position: relative; display: inline-block; }
.dropdown-arrow { font-size: 0.7rem; margin-left: 4px; display: inline-block; transition: transform 0.3s ease; }
.dropdown:hover .dropdown-arrow { transform: rotate(180deg); }
.dropdown-content { visibility: hidden; opacity: 0; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(10, 10, 15, 0.9); backdrop-filter: blur(16px); min-width: 220px; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.5); padding: 10px 0; z-index: 1001; transition: all 0.3s ease; }
.dropdown::after { content: ''; position: absolute; height: 30px; width: 100%; bottom: -30px; left: 0; }
.dropdown:hover .dropdown-content { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(15px); }
.dropdown-content a { display: block; padding: 12px 24px; font-size: 0.85rem; color: var(--text-muted); border-left: 2px solid transparent; transition: all 0.2s ease; }
.dropdown-content a:hover { color: var(--cyan); background: rgba(0, 240, 255, 0.05); border-left: 2px solid var(--cyan); }

.btn-glow-nav { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--text-main); padding: 10px 24px; border-radius: 4px; font-family: 'Space Mono', monospace; font-size: 0.8rem; text-transform: uppercase; transition: all 0.3s ease; display: inline-block; position: relative; z-index: 50; pointer-events: auto !important;}
.btn-glow-nav:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 15px rgba(0, 240, 255, 0.2); }
.open-gallery-btn { margin-top: 15px; align-self: flex-start; }

.mobile-menu-btn { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1002; }
.mobile-menu-btn span { width: 30px; height: 3px; background: var(--cyan); border-radius: 3px; transition: all 0.3s ease; }

/* --- HERO SECTION --- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 5%; z-index: 1; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(12, 12, 14, 0.9) 0%, rgba(12, 12, 14, 0.7) 40%, transparent 80%); z-index: -1; pointer-events: none; }
.hero-content { max-width: 900px; margin-top: 60px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.hero-giant { font-size: clamp(6rem, 15vw, 12rem); font-weight: 900; line-height: 1; margin-bottom: 20px; background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -5px; text-shadow: 0 0 50px rgba(0, 240, 255, 0.1); }
.hero-subtitle { font-size: 1.5rem; color: #fff; margin-bottom: 30px; font-weight: 600; line-height: 1.4; }
.hero-subtext { font-size: 1.1rem; color: var(--text-muted); max-width: 800px; line-height: 1.8; }
.hero-subtext strong { color: var(--cyan); font-weight: 600; text-shadow: 0 0 10px rgba(0,240,255,0.2); }

/* --- SECTIONS --- */
.section-container { padding: 100px 5%; max-width: 1400px; margin: 0 auto; position: relative; z-index: 2; flex-grow: 1;}
.section-header { margin-bottom: 40px; }
.section-title { font-size: 2.5rem; font-weight: 800; }

.glass-card {
    background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08)) border-box;
    border: 1px solid transparent; border-radius: 12px; backdrop-filter: blur(20px); padding: 20px; position: relative; transition: all 0.4s ease; overflow: hidden;
}
.glass-card:hover { transform: translateY(-5px); background: linear-gradient(rgba(25, 25, 30, 0.6), rgba(25, 25, 30, 0.6)) padding-box, linear-gradient(135deg, rgba(0,240,255,0.5), rgba(138,43,226,0.5), transparent 60%) border-box; }
.card-header { border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 20px; }
.card-title { font-size: 1.8rem; font-weight: 800; color: #fff; margin: 10px 0 20px 0; line-height: 1.2;}

.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bento-span-2 { grid-column: span 2; }
.bento-row-span-2 { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center;}

.profile-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; }
#about img { border-radius: 12px; filter: grayscale(100%); transition: all 0.5s ease; }
.glass-card:hover .profile-img { filter: grayscale(0%) !important; transform: scale(1.02); }

.tech-stack { display: flex; flex-wrap: nowrap; gap: 25px; justify-content: flex-start; align-items: center; margin-top: 15px; padding-bottom: 15px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--cyan) transparent; }
.tech-stack::-webkit-scrollbar { height: 6px; }
.tech-stack::-webkit-scrollbar-track { background: transparent; }
.tech-stack::-webkit-scrollbar-thumb { background-color: var(--cyan); border-radius: 10px; }
.tech-icon { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255,255,255,0.1)); transition: transform 0.3s, filter 0.3s; }
.tech-icon:hover { transform: translateY(-5px); filter: drop-shadow(0 0 10px var(--cyan)); }


/* ====================================================
   PROJECT GRID (12 SPALTEN = 4 KARTEN PRO REIHE)
   ==================================================== */
#work.section-container { max-width: 1800px; width: 95%; }

.project-grid { 
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    gap: 30px; 
}
.project-card { 
    grid-column: span 3; /* Exakt 4 Karten in einer Reihe */
    padding: 0; display: flex; flex-direction: column; height: 100%; 
}

/* THUMBNAIL IN DER KARTE (NUR DAS ERSTE BILD WIRD GEZEIGT) */
.project-visual {
    height: 380px; background: transparent; position: relative; padding: 20px;
    display: flex; justify-content: center; align-items: center; border-bottom: 1px solid var(--border-color); overflow: hidden; 
}
.card-image-grid { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; pointer-events: none;}
.card-image-grid > *:not(:first-child) { display: none !important; }
.card-image-grid > *:first-child {
    max-height: 280px !important; width: auto !important; max-width: 100% !important; 
    object-fit: contain; border-radius: 8px;  
    transition: transform 0.3s ease, filter 0.3s ease; image-rendering: high-quality;
    margin: 0 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}
.card-image-grid > *:first-child:hover { transform: scale(1.05); filter: drop-shadow(0 5px 15px rgba(0,240,255,0.2)); }

.project-content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; font-size: 1.6rem;}


/* ====================================================
   MODAL / ISO-ANSICHT (VOLLE BILDSCHIRMBREITE)
   ==================================================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(8, 8, 10, 0.98); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    z-index: 999999; display: flex; justify-content: center; align-items: center; 
    opacity: 0; visibility: hidden; transition: all 0.4s ease; 
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { width: 100vw; max-width: 100vw; height: 100%; position: relative; }

.modal-close {
    position: fixed; top: 30px; left: 50px; font-size: 1.5rem; font-family: 'Space Mono', monospace; font-weight: 700; color: var(--text-muted); transition: color 0.3s; z-index: 1000000; letter-spacing: 2px; pointer-events: auto !important;
}
.modal-close:hover { color: var(--pink); }

.modal-kachel-grid {
    display: flex; flex-wrap: nowrap; gap: 60px; overflow-x: auto; overflow-y: hidden;
    scroll-behavior: smooth; align-items: center; overscroll-behavior-x: contain; 
    scrollbar-width: thin; scrollbar-color: var(--cyan) transparent;
    width: 100vw; height: 100%; padding: 0 5vw;
}
.modal-kachel-grid::-webkit-scrollbar { height: 10px; }
.modal-kachel-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
.modal-kachel-grid::-webkit-scrollbar-thumb { background-color: var(--cyan); border-radius: 10px; }

/* Im Modal werden ALLE Bilder als Reihe dargestellt */
.modal-kachel-grid > * { display: block !important; }

/* STANDARD SKALIERUNG IM MODAL */
.modal-kachel-grid > img {
    max-height: 80vh; width: auto; max-width: none; flex: 0 0 auto; 
    object-fit: contain; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); image-rendering: high-quality;
}

/* === DEINE EXAKTEN SKALIERUNGEN === */

/* PUR Biomarkt (25% kleiner als der 80vh Standard -> ca 60vh) */
.modal-kachel-grid .pur-logo { max-height: 60vh !important; box-shadow: none; border-radius: 0; }

/* Vision 2040 (Tickets exakt 50% der Plakate) */
.modal-kachel-grid .vision-poster { max-height: 80vh !important; }
.modal-kachel-grid .vision-ticket { max-height: 40vh !important; }

/* Magazine (Cover exakt selbe Höhe wie die Doppelseiten) */
.modal-kachel-grid .magazine-cover { max-height: 70vh !important; }
.modal-kachel-grid .magazine-spread { 
    display: flex !important; height: 70vh !important; max-height: 70vh !important; 
    flex: 0 0 auto; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); overflow: hidden; 
}
.modal-kachel-grid .magazine-spread img { height: 100%; width: auto; max-height: none !important; box-shadow: none; border-radius: 0; }

/* --- KONTAKT SEKTION --- */
.contact-container { padding: 80px 40px; display: flex; flex-direction: column; align-items: center; }
.contact-title { font-size: 4rem; margin-bottom: 20px; font-weight: 900;}
.contact-lead { font-size: 1.2rem; max-width: 650px; margin: 0 auto 40px auto; color: var(--text-main); line-height: 1.6; }
.highlight-date { font-weight: 800; padding: 0 5px; }
.contact-actions { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 20px;}

.box-style { 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    padding: 20px 40px; border-radius: 12px; background: rgba(10, 10, 12, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); 
    color: #fff; text-decoration: none; font-size: 1.2rem; font-weight: 600; transition: all 0.3s ease; min-width: 250px; 
    pointer-events: auto !important; position: relative; z-index: 50;
}
.box-style .mono-text { font-size: 0.75rem; margin-bottom: 8px; color: var(--text-muted); transition: color 0.3s ease; }
.box-style:hover { border-color: var(--cyan); box-shadow: 0 0 20px rgba(0, 240, 255, 0.1); transform: translateY(-3px);}
.box-style:hover .mono-text { color: var(--cyan); }

/* --- FOOTER --- */
.site-footer { width: 100%; padding: 40px 5%; margin-top: auto; background: transparent; border-top: 1px solid var(--border-color); position: relative; z-index: 10; }
.footer-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.footer-content .mono-text { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 2px; text-transform: uppercase; }
.footer-links { margin-top: 5px; display: flex; justify-content: center; align-items: center; gap: 15px; font-family: 'Space Mono', monospace; font-size: 0.8rem; width: 100%;}
.footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.3s; text-transform: uppercase; letter-spacing: 1px; pointer-events: auto !important;}
.footer-links a:hover { color: var(--text-main); }
.separator { font-family: 'Space Mono', monospace; font-size: 0.75rem; color: rgba(255,255,255,0.2); margin: 0 15px; }

/* Responsive */
@media (max-width: 1400px) {
    .project-card { grid-column: span 6; } 
}
@media (max-width: 768px) {
    .project-card { grid-column: span 12 !important; } 
    .bento-grid { grid-template-columns: 1fr !important; }
    .bento-span-2, .bento-row-span-2 { grid-column: span 1; grid-row: span 1; }
    .nav-links { display: none; }
    .hero-giant { font-size: 5rem; letter-spacing: -2px; }
    .contact-title { font-size: 2.5rem; }
    .contact-actions { flex-direction: column; align-items: center;}
    #custom-cursor, .cursor-trail { display: none; }
    body, a, button, .dropbtn, .project-card, .modal-close { cursor: auto !important; }

    .mobile-menu-btn { display: flex; }
    .nav-links { position: fixed; top: 0; right: -100%; left: auto; transform: none; width: 250px; height: 100vh; background: rgba(10,10,15,0.95); backdrop-filter: blur(15px); flex-direction: column; justify-content: center; transition: right 0.3s ease; border-left: 1px solid var(--border-color); box-shadow: -10px 0 30px rgba(0,0,0,0.5); }
    .nav-links.active { right: 0; }
    .mobile-menu-btn.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
    .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .desktop-contact-btn { display: none; }
    .mobile-contact-btn { display: inline-block; margin-top: 20px; }
    .nav-links > a, .dropbtn { margin: 15px 0; font-size: 1.4rem; }
    .dropdown-content { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; background: transparent; border: none; text-align: center; padding: 0; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
    .dropdown-content a { padding: 5px; font-size: 1rem; border: none; }
    .dropdown-arrow { display: none; }
}