@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    /* Übergang für sanfte Farbwechsel. Tailwind-Klassen handhaben die Farben. */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.gradient-text {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Dark Mode Toggle Schalter CSS --- */

/* Der äußere Container des Schalters */
.relative.inline-block.w-12.h-7.mr-2.align-middle.select-none {
    position: relative; /* Wichtig für die absolute Positionierung der Kinder */
    border-radius: 9999px; /* Macht den Track rund */
    overflow: hidden; /* Verhindert, dass der schiebbare Kreis über den Rand ragt */
    /* Die Hintergrundfarbe wird direkt durch Tailwind-Klassen im HTML gesteuert (bg-gray-300 dark:bg-gray-700) */
}

/* Die tatsächliche Checkbox (unsichtbar und anklickbar) */
.toggle-checkbox {
    opacity: 0; /* Unsichtbar machen */
    position: absolute; /* Überlagert das Label */
    width: 100%; /* Füllt den gesamten Bereich des Elternelements für die Klickfläche */
    height: 100%;
    z-index: 2; /* Liegt über dem Label */
    cursor: pointer;
    /* appearance-none ist im HTML-Tag definiert und blendet die Browser-Standard-Checkbox aus */
}

/* Das sichtbare Element, das den Schalter darstellt (der Track) */
.toggle-label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px; /* Muss auch hier sein, um die Rundung im Label zu sichern */
    background-color: transparent; /* Die tatsächliche Track-Farbe kommt vom Eltern-Div */
    pointer-events: none; /* Wichtig, damit Klicks auf die unsichtbare Checkbox durchgehen */
}

/* Der schiebbare "Thumb" (Kreis) im Schalter */
.toggle-label::before {
    content: '';
    display: block;
    width: 1.5rem; /* Entspricht Tailwind w-6 */
    height: 1.5rem; /* Entspricht Tailwind h-6 */
    background-color: #fff; /* Der Punkt ist immer weiß */
    border-radius: 9999px; /* Rund machen */
    position: absolute;
    top: 0.125rem; /* 2px vertikale Zentrierung (da Track h-7 (1.75rem) ist, 1.75 - 1.5 = 0.25; 0.25/2 = 0.125) */
    left: 0.125rem; /* 2px Abstand vom linken Rand */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Sanfte Animation */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Zustand, wenn die Checkbox AN ist: Bewege den Kreis nach rechts */
.toggle-checkbox:checked + .toggle-label::before {
    /* Berechnung: Gesamter Track w-12 (3rem) - Kreis w-6 (1.5rem) - 2 * Anfangs-Padding (2 * 0.125rem) = 1.25rem */
    transform: translateX(1.25rem);
}

/* Ende des Schalter-CSS */

/* Zusätzliche Navigations-Hover-Effekte */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}


.foss-link {
    color: #3b82f6;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.foss-link:hover, .foss-link:focus {
    color: #8b5cf6;
    text-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
    text-decoration-thickness: 2px;
}