/* --- Global & Transitions --- */
body {
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* --- Custom Scrollbar (Neu) --- */
/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #1e3a8a transparent;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: transparent; /* Transparent, damit der Hintergrund durchscheint */
}

::-webkit-scrollbar-thumb {
    background-color: #1e3a8a; /* Dunkelblau (Logo-Ton) */
    border-radius: 20px;
    border: 3px solid transparent; /* Erzeugt einen Abstand zum Rand (schwebender Effekt) */
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #172554; /* Etwas dunkler beim Drüberfahren */
}

/* --- Glassmorphism Components --- */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

.dark .glass-panel {
    background: rgba(20, 20, 25, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

/* --- Link Cards Animation --- */
.link-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Performance: Optimierung für Animationen */
    will-change: transform;
}

.link-card:hover {
    transform: translateY(-5px);
}

/* --- Background Geometry --- */
.geo-shape {
    position: absolute;
    z-index: -1;
    opacity: 0.4;
    transition: all 0.5s ease;
    /* GPU Beschleunigung erzwingen */
    transform: translateZ(0); 
}

.dark .geo-shape {
    opacity: 0.15;
}

/* --- Canvas Overlay --- */
#trail-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

/* --- Modal Animation (Pop-Up Effekt) --- */
#contact-modal {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#contact-modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#contact-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Animation für den Inhalt (das Panel) beim Öffnen */
#contact-modal .glass-panel {
    /* Elastische Bewegung (Bounce) beim Öffnen */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease-out;
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Zustand wenn geschlossen: etwas kleiner und weiter unten */
#contact-modal.hidden .glass-panel {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s ease-in, opacity 0.2s ease-in; /* Schnelleres, cleanes Schließen */
}

/* --- Footer Styling --- */
footer.site-footer {
    position: relative;
    margin-top: 4rem;
}

footer.site-footer .footer-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, #ffedd5 0%, #ffedd5 12%, #fed7aa 28%, #fb923c 52%, #f97316 74%, #c2410c 100%);
    box-shadow: 0 -12px 40px rgba(234, 88, 12, 0.16);
    overflow: hidden;
}

footer.site-footer .footer-bg::after {
    content: '';
    position: absolute;
    right: -160px;
    bottom: -190px;
    width: 420px;
    height: 420px;
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 70%);
    opacity: 0.8;
}

footer.site-footer .footer-bumps {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

footer.site-footer .footer-bumps .bump {
    --s: 86px;
    position: absolute;
    width: var(--s);
    height: var(--s);
    top: calc(var(--s) / -2);
    border-radius: 9999px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 237, 213, 1) 0%, rgba(254, 215, 170, 1) 46%, rgba(253, 186, 116, 1) 100%);
    box-shadow: 0 10px 22px rgba(234, 88, 12, 0.14);
    opacity: 0.92;
}

footer.site-footer .footer-bumps .bump-1 {
    --s: 66px;
    left: 16%;
    opacity: 0.88;
}

footer.site-footer .footer-bumps .bump-2 {
    --s: 80px;
    left: 70%;
}

footer.site-footer .footer-inner {
    position: relative;
    z-index: 2;
}

/* --- Dark Mode Footer --- */
.dark footer.site-footer .footer-bg {
    background: linear-gradient(180deg, #fb923c 0%, #f97316 35%, #ea580c 62%, #7c2d12 100%);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.35);
}

.dark footer.site-footer .footer-bg::after {
    opacity: 0.55;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.00) 70%);
}

.dark footer.site-footer .footer-bumps .bump {
    background: radial-gradient(circle at 35% 35%, rgba(255, 200, 140, 0.95) 0%, rgba(249, 115, 22, 0.95) 45%, rgba(194, 65, 12, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    opacity: 0.78;
}