/* --- GRUNDLAGEN --- */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* WICHTIG: Verhindert seitliches Wackeln auf Handy */
}

/* --- IPHONE REPARATUR-KIT (Der wichtigste Teil) --- */
/* 1. Verhindert, dass Bilder/Icons den Rahmen sprengen */
img, svg {
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
}

/* 2. Zwingt SVGs auf eine vernünftige Größe, falls Tailwind auf iOS zickt */
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }

/* 3. Parallax Fix für iOS (Deaktiviert Zoom-Effekt auf Handys) */
.parallax-section {
    background-image: url('./images/people.png'); 
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    background-attachment: scroll; 
}

@media (min-width: 768px) {
    .parallax-section {
        background-attachment: fixed; /* Nur auf PC fixed */
    }
}

.parallax-section::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); z-index: 1;
}
.parallax-section > .container { position: relative; z-index: 2; }

/* --- TEXT --- */
h1, h2, h3, h4, p {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* --- ANIMATIONEN --- */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* --- UI ELEMENTE --- */
.roadmap-tab { cursor: pointer; transition: all 0.3s ease; }
.roadmap-tab.active { background-color: #4E8293; color: white; }
.roadmap-content { display: none; opacity: 0; transition: opacity 0.5s ease; }
.roadmap-content.active { display: block; opacity: 1; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

/* Dark Mode Icons */
.dark-mode-toggle .sun-icon { display: none; }
.dark-mode-toggle .moon-icon { display: block; }
.dark .dark-mode-toggle .sun-icon { display: block; }
.dark .dark-mode-toggle .moon-icon { display: none; }

/* --- CURSOR (Nur Desktop) --- */
.cursor-dot, .cursor-dot-outline {
    pointer-events: none; position: fixed; top: 50%; left: 50%; border-radius: 50%; opacity: 0;
    transform: translate(-50%, -50%); transition: opacity 0.3s, transform 0.3s; z-index: 9999;
}
.cursor-dot { width: 8px; height: 8px; background-color: #4E8293; }
.cursor-dot-outline { width: 40px; height: 40px; background-color: rgba(78, 130, 147, 0.3); border: 2px solid transparent; transition: all 0.3s ease; }
.cursor-dot-outline.hovered { width: 60px; height: 60px; background-color: rgba(171, 141, 111, 0.2); border-color: rgba(171, 141, 111, 0.5); }
body:hover .cursor-dot, body:hover .cursor-dot-outline { opacity: 1; }
@media (hover: none) { .cursor-dot, .cursor-dot-outline { display: none !important; } }

/* --- SCRAMBLE TEXT --- */
.scramble-text.is-obfuscated { background-color: #94a3b8; color: transparent; cursor: help; user-select: none; }
.dark .scramble-text.is-obfuscated { background-color: #475569; }
.scramble-text.is-processing { background-color: #000; color: #00ff00; }
.dark .scramble-text.is-processing { background-color: #fff; color: #000; }
.group\/card:first-child .scramble-text.is-verified { background-color: rgba(34, 197, 94, 0.15); color: #15803d; font-weight: 900; }
.group\/card:last-child .scramble-text.is-verified { background-color: rgba(239, 68, 68, 0.15); color: #b91c1c; font-weight: 900; }

/* --- NEON & VARIABLES --- */
@keyframes neonGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(78, 130, 147, 0.8)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 5px rgba(78, 130, 147, 1)); transform: scale(1.03); }
}
.neon-pulse { animation: neonGlow 3s ease-in-out infinite; will-change: filter, transform; }
@keyframes pulse-alive { 0%, 100% { transform: scale(1); filter: brightness(100%); } 50% { transform: scale(1.02); filter: brightness(105%); } }
.hover-animate:hover img { animation: pulse-alive 3s infinite ease-in-out; }

:root { --color-gold: #C59D5F; }
.group:hover .text-gold-hover { color: var(--color-gold); }
.group:hover .border-gold-hover { border-color: var(--color-gold); }
.group:hover .bg-gold-hover { background-color: var(--color-gold); }