/*
 * css/style.css - Diese Datei importiert alle Einzel-Stylesheets.
 * WICHTIG: Die Reihenfolge ist relevant für die korrekte Kaskadierung.
 */

/* 1. Variablen (Muss zuerst geladen werden) */
@import url('_vars.css');

/* 2. Layout und Basisstruktur */
@import url('_layout.css');

/* 3. Komponenten (Buttons, Logo-Animation) */
@import url('_components.css');

/* 4. Status (Überschreibt Button-Styles bei Fehler) */
@import url('_status.css');

/* 5. Kontakt-Modal (Formulare und Modals) */
@import url('_contact.css');

/* 6. Teilen-Modal */
@import url('_share.css');

/* 7. Besucher-Statistiken */
@import url('_visitor.css');

/* 8. Wetter */
@import url('_weather.css');

/* 9. Archiv HINZUFÜGEN */
@import url('_archive.css');

/* 10. Legal (WICHTIG: Sollte ZULETZT geladen werden) */
@import url('_legal.css');


/* ========================================================================= */
/* ULTIMATIVER FIX: MOBILE-NEUTRALISIERUNG FÜR ALLE NICHT-LEGAL/WETTER MODALS (900px) */
/* ========================================================================= */

@media (max-width: 900px) { /* Breakpoint auf 900px für Landscape-Geräte */
    
    /* 1. Äußeres Overlay: Erzwingt den 15px Puffer für ALLE Modals */
    .modal { 
        padding: 15px !important; 
        box-sizing: border-box !important;
    }
    
    /* 2. Content Box: Schließt das Legal- und Wetter-Modal aus! */
    .modal-content:not(#weatherModal .weather-content):not(#legalModal .modal-content) {
        /* Setzt innere Abstände, entfernt äußere Ränder */
        padding: 1.5rem !important; 
        margin: 0 !important;
        margin-bottom: 15px !important;
        width: 100% !important; 
        max-width: none !important;
        box-sizing: border-box !important;
    }
}

/* Generischer Tooltip-Stil */
.custom-tooltip {
    /* Positionierung und Ebene */
    position: fixed;
    z-index: 1000; 
    
    /* Design */
    background-color: var(--color-bg-tertiary, rgba(0, 0, 0, 0.85));
    color: var(--color-white, #fff);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.9em;
    white-space: nowrap; /* Verhindert Zeilenumbruch */
    
    /* Animation (startet unsichtbar) */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none; /* Klicks durchlassen */
}

/* Tooltip sichtbar machen */
.custom-tooltip.active {
    opacity: 1;
    /* Bewegt den Tooltip nach oben, um den "Schwebe-Effekt" zu erzeugen */
    transform: translateX(-50%) translateY(-100%); 
}