/* assets/css/style.css (NEUE VERSION - Korrekturen 07.04.2025) */

/* --- 1. Grundlagen & Variablen --- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
    /* Farben */
    --primary-color: #0056b3; /* Dunkles Blau */
    --secondary-color: #007bff; /* Helleres Blau */
    --accent-color: #28a745; /* Grün */
    --background-color: #f8f9fa; /* Sehr helles Grau */
    --card-background-color: #ffffff; /* Weiß */
    --text-color: #333;
    --text-muted-color: #6c757d;
    --heading-color: #212529;
    --border-color: #dee2e6;
    --link-color: var(--secondary-color);
    --link-hover-color: var(--primary-color);

    /* Warnfarben */
    --warning-color: #ffc107; /* Gelb */
    --warning-bg-color: #fff3cd;
    --warning-border-color: #ffeeba;
    --danger-color: #dc3545; /* Rot */
    --danger-bg-color: #f8d7da;
    --danger-border-color: #f5c6cb;
    --orange-color: #fd7e14; /* Orange */
    --orange-bg-color: #fff8e1;

    /* Typografie */
    --font-family-base: 'Open Sans', sans-serif;
    --font-family-heading: 'Roboto', sans-serif;
    --font-size-base: 1rem; /* 16px */
    --line-height-base: 1.6;

    /* Layout */
    --container-max-width: 1200px;
    --spacing-unit: 1rem; /* 16px */
    --card-border-radius: 8px;
    --card-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

/* Globale Resets und Basis-Styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 100%; }
body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--text-color); background-color: var(--background-color); display: flex; flex-direction: column; min-height: 100vh; }
main { flex-grow: 1; padding-top: calc(var(--spacing-unit) * 5); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); color: var(--heading-color); margin-bottom: calc(var(--spacing-unit) * 0.75); line-height: 1.3; }
h2.section-title { font-size: 1.8rem; margin-bottom: calc(var(--spacing-unit) * 1.5); padding-bottom: calc(var(--spacing-unit) * 0.5); border-bottom: 2px solid var(--secondary-color); display: inline-block; }
h2.section-title i { margin-right: calc(var(--spacing-unit) * 0.5); color: var(--secondary-color); }
a { color: var(--link-color); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--link-hover-color); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --- 2. Layout --- */
.container { max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding-left: var(--spacing-unit); padding-right: var(--spacing-unit); }
.data-section { padding-top: calc(var(--spacing-unit) * 2); padding-bottom: calc(var(--spacing-unit) * 2); margin-bottom: calc(var(--spacing-unit) * 1); }

/* --- Header --- */
.site-header { background-color: var(--primary-color); color: #fff; padding: calc(var(--spacing-unit) * 0.8) 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.site-header .container { display: flex; justify-content: space-between; align-items: center; }
.logo h1 { margin: 0; font-size: 1.6rem; font-weight: 700; }
.logo h1 a { color: #fff; text-decoration: none; }
.logo h1 a span { color: #fff; font-weight: 500; }
.logo .subtitle { font-size: 0.85rem; margin: 0; color: #e0e0e0; }

/* --- Navigation --- */
.main-navigation ul { display: flex; list-style: none; }
.main-navigation li { margin-left: calc(var(--spacing-unit) * 1.5); }
.main-navigation a { color: #fff; text-decoration: none; font-weight: 600; padding: calc(var(--spacing-unit) * 0.5) 0; position: relative; transition: color 0.2s ease; }
.main-navigation a:hover { color: var(--accent-color); text-decoration: none; }
.main-navigation a i { margin-right: calc(var(--spacing-unit) * 0.3); }
#menu-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: calc(var(--spacing-unit) * 0.5); }
#menu-toggle .icon-open { display: inline; } #menu-toggle .icon-close { display: none; }
#menu-toggle.active .icon-open { display: none; } #menu-toggle.active .icon-close { display: inline; }

/* --- Footer --- */
.site-footer { background-color: #343a40; color: #adb5bd; padding: calc(var(--spacing-unit) * 2) 0; margin-top: calc(var(--spacing-unit) * 2); font-size: 0.9rem; }
.site-footer .container { position: relative; }
.site-footer .footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-unit); }
.site-footer .footer-info p, .site-footer .footer-attributions ul, .site-footer .footer-attributions li { margin-bottom: calc(var(--spacing-unit) * 0.5); }
.site-footer .footer-attributions h4 { color: #e9ecef; font-size: 1rem; margin-bottom: calc(var(--spacing-unit) * 0.5); }
.site-footer a { color: #ced4da; } .site-footer a:hover { color: #fff; }
#back-to-top-btn { position: fixed; bottom: calc(var(--spacing-unit) * 1.5); right: calc(var(--spacing-unit) * 1.5); background-color: var(--secondary-color); color: #fff; border: none; border-radius: 50%; width: 45px; height: 45px; font-size: 1.2rem; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 999; display: flex; justify-content: center; align-items: center; }
#back-to-top-btn:hover { background-color: var(--primary-color); }
#back-to-top-btn.visible { opacity: 1; visibility: visible; }

/* --- 3. Komponenten --- */
.card { background-color: var(--card-background-color); border: 1px solid var(--border-color); border-radius: var(--card-border-radius); box-shadow: var(--card-box-shadow); margin-bottom: calc(var(--spacing-unit) * 1.5); padding: calc(var(--spacing-unit) * 1.5); overflow: hidden; }
.card .card-title { font-size: 1.3rem; margin: 0 0 var(--spacing-unit) 0; }
.card .card-title i { margin-right: calc(var(--spacing-unit) * 0.5); color: var(--secondary-color); }
.card .card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--spacing-unit); flex-wrap: wrap; gap: calc(var(--spacing-unit) * 0.5); border-bottom: 1px solid var(--border-color); padding-bottom: calc(var(--spacing-unit) * 0.75); }
.card .timestamp, .card .data-attribution, .card .alert-source, .card .disclaimer { font-size: 0.8rem; color: var(--text-muted-color); margin-top: var(--spacing-unit); text-align: right; }
.card .card-header .timestamp { margin-top: 0; text-align: right; flex-shrink: 0; }
.card .data-attribution a { color: var(--text-muted-color); }
.card .disclaimer { text-align: left; font-style: italic; font-size: 0.85rem; line-height: 1.4;} /* Disclaimer linksbündig & etwas größer */
.card .disclaimer i { margin-right: calc(var(--spacing-unit)*0.3); }
.error-notification { background-color: var(--danger-color); color: white; padding: var(--spacing-unit); text-align: center; font-weight: 600; position: sticky; top: 0; z-index: 1050; }
.error-notification i { margin-right: calc(var(--spacing-unit) * 0.5); }
.loading-message p, .no-data-warning p { color: var(--text-muted-color); text-align: center; padding: var(--spacing-unit); }
.is-loading { opacity: 0.7; }

/* --- 4. Sektions-spezifisches Styling --- */

/* Wetter Sektion */
.weather-section .main-weather-card .weather-grid { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--spacing-unit) * 1.5); align-items: center; margin-bottom: var(--spacing-unit); }
.weather-main-display { text-align: center; }
.weather-icon-large { width: 100px; height: 100px; margin: 0 auto calc(var(--spacing-unit) * 0.5); }
.temp-current { font-size: 3rem; font-weight: 700; color: var(--heading-color); line-height: 1; }
.description-current { font-size: 1.1rem; color: var(--text-muted-color); margin-top: calc(var(--spacing-unit) * 0.25); }
.weather-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5); }
.weather-details-grid .detail-item { font-size: 0.95rem; display: flex; align-items: baseline; white-space: nowrap; }
.weather-details-grid .detail-item i { margin-right: calc(var(--spacing-unit) * 0.4); color: var(--secondary-color); width: 1.2em; text-align: center; flex-shrink: 0; }
.weather-details-grid .detail-item strong { margin-left: auto; padding-left: calc(var(--spacing-unit) * 0.3); white-space: normal; }
.sun-moon-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-unit); margin-top: calc(var(--spacing-unit) * 1.5); padding-top: var(--spacing-unit); border-top: 1px solid var(--border-color); }
.info-box { background-color: #f8f9fa; padding: var(--spacing-unit); border-radius: calc(var(--card-border-radius) / 2); }
.info-box .box-title { font-size: 1rem; font-weight: 600; margin-bottom: calc(var(--spacing-unit) * 0.5); color: var(--primary-color); }
.info-box .box-title i { margin-right: calc(var(--spacing-unit) * 0.3); }
.info-box p { font-size: 0.9rem; margin-bottom: calc(var(--spacing-unit) * 0.25); }
.info-box p strong[style*="color"] { font-weight: 600; }
.weather-alerts.card { border-left: 5px solid var(--orange-color); background-color: var(--orange-bg-color); }
.weather-alerts .card-title, .weather-alerts .card-title i { color: var(--orange-color); }
.weather-alerts .alert-item { margin-bottom: var(--spacing-unit); padding-bottom: var(--spacing-unit); border-bottom: 1px dashed var(--border-color); }
.weather-alerts .alert-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.alert-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: calc(var(--spacing-unit) * 0.5); margin-bottom: calc(var(--spacing-unit) * 0.3); font-size: 1rem; }
.alert-time { font-size: 0.85rem; color: var(--text-muted-color); }
.alert-description { font-size: 0.95rem; margin-bottom: calc(var(--spacing-unit) * 0.5); }
.ai-summary-card { background: linear-gradient(135deg, #e3f2fd, #f8f9fa); border-left: 5px solid var(--secondary-color); }
.ai-summary-card .card-header { border-bottom: none; padding-bottom: 0; margin-bottom: calc(var(--spacing-unit) * 0.5); }
.ai-summary-card .card-title i { color: var(--primary-color); }
.ai-summary-card p { font-size: 1.05rem; margin-bottom: calc(var(--spacing-unit)*0.5); }
.ai-summary-card .timestamp { display: block; margin-top: 0; text-align: left; }

/* Outdoor Index Card */
.outdoor-index-card .card-title i { color: var(--accent-color); }
.outdoor-index-display { display: flex; align-items: center; gap: calc(var(--spacing-unit) * 1.5); flex-wrap: wrap; }
.index-image-container { flex: 0 0 120px; text-align: center; }
.index-image { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border-color); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.index-placeholder-icon { font-size: 4rem; color: var(--text-muted-color); line-height: 1; margin: 10px 0; }
.index-details { flex: 1; }
.index-score-level { margin-bottom: calc(var(--spacing-unit) * 0.5); }
.index-level { font-size: 1.5rem; font-weight: 700; color: var(--heading-color); margin-right: calc(var(--spacing-unit) * 0.5); }
.index-score { font-size: 1rem; color: var(--text-muted-color); font-weight: 600; }
.index-description { font-size: 1rem; margin-bottom: calc(var(--spacing-unit) * 0.8); }
.index-factors summary { cursor: pointer; font-weight: 600; color: var(--link-color); font-size: 0.9rem; display: inline-flex; align-items: center; margin-bottom: calc(var(--spacing-unit)*0.3); } /* Flex für Icon */
.index-factors summary i { margin-left: 5px; transition: transform 0.2s ease; }
.index-factors[open] summary i { transform: rotate(180deg); }
.factors-list { display: flex; gap: var(--spacing-unit); flex-wrap: wrap; font-size: 0.85rem; margin-top: calc(var(--spacing-unit)*0.5); }
.factors-list ul { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 150px; }
.factors-list li { margin-bottom: calc(var(--spacing-unit)*0.2); }
.factors-list i { margin-right: calc(var(--spacing-unit)*0.4); width: 1em; /* Konstante Breite für Icons */ }
.positive-factors i { color: var(--accent-color); }
.negative-factors i { color: var(--danger-color); }

/* Stündliche Vorhersage */
.hourly-scroll-container { display: flex; overflow-x: auto; gap: calc(var(--spacing-unit) * 0.5); padding: calc(var(--spacing-unit) * 0.5) 0; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
.hourly-scroll-container::-webkit-scrollbar { height: 8px; } .hourly-scroll-container::-webkit-scrollbar-track { background: transparent; } .hourly-scroll-container::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 10px; border: 2px solid var(--background-color); background-clip: padding-box; }
.hourly-item { flex: 0 0 auto; width: 80px; text-align: center; padding: calc(var(--spacing-unit) * 0.75); border: 1px solid var(--border-color); border-radius: calc(var(--card-border-radius) / 2); background-color: var(--card-background-color); transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.hourly-item:hover { background-color: #eef5ff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.hour-time { font-size: 0.9rem; font-weight: 600; margin-bottom: calc(var(--spacing-unit) * 0.3); }
.weather-icon-small { width: 40px; height: 40px; margin: 0 auto; }
.hour-temp { font-size: 1.1rem; font-weight: 700; margin: calc(var(--spacing-unit) * 0.3) 0; }
.hour-precip, .hour-wind { font-size: 0.8rem; color: var(--text-muted-color); white-space: nowrap; }
.hour-precip i, .hour-wind i { margin-right: 2px; }
.hour-precip { color: #17a2b8; } .hour-wind { color: #6c757d; }

/* Tägliche Vorhersage */
.daily-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--spacing-unit); }
.daily-item { text-align: center; padding: calc(var(--spacing-unit)*0.8); border: 1px solid var(--border-color); border-radius: calc(var(--card-border-radius) / 2); background-color: var(--card-background-color); transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.daily-item:hover { background-color: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.day-name { font-weight: 600; font-size: 0.9rem; margin-bottom: calc(var(--spacing-unit) * 0.5); }
.weather-icon-medium { width: 50px; height: 50px; margin: 0 auto calc(var(--spacing-unit) * 0.5); }
.temp-range { display: flex; justify-content: center; gap: calc(var(--spacing-unit) * 0.5); margin-bottom: calc(var(--spacing-unit) * 0.3); }
.temp-max { font-weight: 700; font-size: 1.1rem; }
.temp-min { color: var(--text-muted-color); font-size: 1rem; }
.day-precip { font-size: 0.85rem; color: #17a2b8; margin-bottom: calc(var(--spacing-unit) * 0.3); }
.day-description { font-size: 0.8rem; color: var(--text-muted-color); margin-top: calc(var(--spacing-unit) * 0.3); line-height: 1.3; }

/* Gesundheitswetter Sektion */
.health-weather-section .card-title i { color: #e83e8c; }

/* NEU: Grid für Luftqualität & Biowetter */
.health-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten */
    gap: var(--spacing-unit);
    margin-bottom: var(--spacing-unit); /* Abstand zur Pollenflug-Karte */
}

/* Luftqualität (im Gesundheitswetter-Bereich) */
.health-subgrid .air-quality { margin-bottom: 0; /* Margin von .card zurücksetzen */ }
.air-quality .aq-display { display: flex; align-items: center; gap: calc(var(--spacing-unit) * 1.5); flex-wrap: wrap; }
.aq-index-value { font-size: 2rem; font-weight: 700; border: 4px solid; border-radius: 50%; width: 80px; height: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1; flex-shrink: 0; }
.aq-index-label { font-size: 0.8rem; font-weight: normal; color: var(--text-muted-color); }
.aq-details .aq-level { font-size: 1.1rem; margin-bottom: calc(var(--spacing-unit) * 0.25); }
.aq-details .aq-advice { font-size: 0.9rem; margin-bottom: calc(var(--spacing-unit) * 0.5); }
.aq-components summary { cursor: pointer; font-weight: 600; color: var(--link-color); margin-bottom: calc(var(--spacing-unit) * 0.3); display: inline-block; }
.aq-components ul { list-style: disc; margin-left: var(--spacing-unit); font-size: 0.85rem; }
.aq-components li { margin-bottom: calc(var(--spacing-unit) * 0.2); }


/* Pollenflug */
.pollen-forecast .card-header .timestamp { font-style: italic; }
.pollen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-unit); margin-bottom: var(--spacing-unit); }
.pollen-item { border: 1px solid var(--border-color); border-radius: calc(var(--card-border-radius) / 2); background-color: #f8f9fa; overflow: hidden; }
.pollen-header { display: flex; align-items: center; gap: calc(var(--spacing-unit) * 0.8); padding: calc(var(--spacing-unit) * 0.8); background-color: var(--card-background-color); border-bottom: 1px solid var(--border-color); }
.pollen-icon { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pollen-name { font-weight: 600; font-size: 1.05rem; }
.pollen-levels { display: flex; justify-content: space-around; padding: calc(var(--spacing-unit) * 0.8); gap: calc(var(--spacing-unit) * 0.5); }
.level-day { text-align: center; flex: 1; }
.day-label { display: block; font-size: 0.8rem; color: var(--text-muted-color); margin-bottom: calc(var(--spacing-unit) * 0.3); }
.pollen-level { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; line-height: 1; min-width: 25px; text-align: center; border: 1px solid rgba(0,0,0,0.1); /* Leichter Rand für Abgrenzung */ }
.pollen-level.level-na { background-color: #eee; color: #777; }
.pollen-details { border-top: 1px solid var(--border-color); }
.pollen-details summary { cursor: pointer; padding: calc(var(--spacing-unit) * 0.6) calc(var(--spacing-unit) * 0.8); font-weight: 600; color: var(--link-color); display: flex; justify-content: space-between; align-items: center; background-color: var(--card-background-color); }
.pollen-details summary:hover { background-color: #e9ecef; }
.pollen-details summary i { transition: transform 0.2s ease; }
.pollen-details[open] summary i { transform: rotate(180deg); }
.pollen-info-content { padding: calc(var(--spacing-unit) * 1); font-size: 0.9rem; background-color: #fff; }
.pollen-info-content h4 { font-size: 0.95rem; font-weight: 700; margin-top: calc(var(--spacing-unit)*0.5); margin-bottom: calc(var(--spacing-unit)*0.3); color: var(--primary-color); }
.pollen-info-content h4:first-child { margin-top: 0; }
.pollen-info-content p { margin-bottom: calc(var(--spacing-unit)*0.5); }

/* Biowetter (im Grid) */
.health-subgrid .bioweather-forecast { margin-bottom: 0; /* Margin von .card zurücksetzen */ }
.bioweather-forecast .card-header .timestamp { font-style: italic; }
.bioweather-grid { /* Grid ist jetzt der Slot-Container */ display: flex; flex-direction: column; /* Untereinander anstatt nebeneinander */ gap: calc(var(--spacing-unit)*0.8); }
.bioweather-slot { border: none; padding: 0; border-radius: 0; background: none; } /* Styling vom Grid zum Slot verschieben? */
.bioweather-slot h4 { font-size: 1rem; font-weight: 600; margin-bottom: calc(var(--spacing-unit) * 0.5); padding-bottom: calc(var(--spacing-unit) * 0.3); border-bottom: 1px solid var(--border-color); }
.bioweather-slot ul { list-style: none; font-size: 0.9rem; }
.bioweather-slot li { margin-bottom: calc(var(--spacing-unit) * 0.3); display: flex; gap: calc(var(--spacing-unit)*0.5); }
.effect-name { font-weight: 600; color: var(--primary-color); flex-shrink: 0; }
.effect-value { /* Farbe basierend auf Wert - Beispiel */ }
.effect-value:contains("stark"), .effect-value:contains("erhöht") { /* Funktioniert nicht in CSS */
   /* Muss per PHP/JS gemacht werden oder Klassen vergeben */
   /* font-weight: bold; color: var(--danger-color); */
}


/* Spritpreis Sektion */
.section-timestamp { font-size: 0.9rem; color: var(--text-muted-color); text-align: center; margin-bottom: var(--spacing-unit); }
.fuel-prices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-unit); margin-bottom: calc(var(--spacing-unit) * 1.5); }
.fuel-station { display: flex; flex-direction: column; }
.station-header { background-color: #f8f9fa; padding: calc(var(--spacing-unit) * 0.8); border-bottom: 1px solid var(--border-color); }
.station-name { font-size: 1.15rem; margin-bottom: calc(var(--spacing-unit) * 0.2); }
.station-brand { font-size: 0.9rem; font-weight: 600; color: var(--secondary-color); margin-bottom: calc(var(--spacing-unit) * 0.2); }
.station-address { font-size: 0.85rem; color: var(--text-muted-color); }
.station-prices { padding: calc(var(--spacing-unit) * 1); flex-grow: 1; }
.price-item { display: flex; justify-content: space-between; align-items: baseline; padding: calc(var(--spacing-unit) * 0.3) 0; border-bottom: 1px dashed var(--border-color); }
.price-item:last-child { border-bottom: none; }
.fuel-label { font-weight: 600; }
.fuel-value { font-size: 1.2rem; font-weight: 700; color: var(--accent-color); }
.price-item.diesel .fuel-value { color: #343a40; } .price-item.e5 .fuel-value { color: #fd7e14; } .price-item.e10 .fuel-value { color: #28a745; }
.fuel-station.status-closed .station-prices { display: none; } .fuel-station.status-closed { opacity: 0.7; }
.station-status-message { padding: calc(var(--spacing-unit) * 1); text-align: center; color: var(--danger-color); font-weight: 600; flex-grow: 1; display: flex; align-items: center; justify-content: center; }
.fuel-analysis-section .card-title i { color: var(--primary-color); }
.fuel-type-analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(var(--spacing-unit) * 1.5); margin-bottom: var(--spacing-unit); }
.fuel-type-analysis { border: 1px solid var(--border-color); padding: var(--spacing-unit); border-radius: calc(var(--card-border-radius) / 2); background-color: #f8f9fa; }
.fuel-type-analysis h4 { font-size: 1.1rem; margin-bottom: calc(var(--spacing-unit) * 0.5); padding-bottom: calc(var(--spacing-unit) * 0.3); border-bottom: 1px solid var(--border-color); }
.analysis-summary { font-size: 0.95rem; margin-bottom: var(--spacing-unit); font-weight: 600; }
.time-blocks-container h5 { font-size: 0.9rem; font-weight: 600; margin-bottom: calc(var(--spacing-unit) * 0.3); color: var(--text-muted-color); }
.time-blocks-display { display: flex; gap: calc(var(--spacing-unit) * 0.5); flex-wrap: wrap; margin-bottom: var(--spacing-unit); }
.time-block { flex-grow: 1; text-align: center; padding: calc(var(--spacing-unit) * 0.4) calc(var(--spacing-unit) * 0.6); border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--card-background-color); min-width: 60px; }
.block-name { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted-color); }
.block-price { font-size: 1rem; font-weight: 700; }
.time-block.cheapest { border-color: var(--accent-color); background-color: #eafaf1; } .time-block.cheapest .block-price { color: var(--accent-color); }
.specific-times-details summary { cursor: pointer; font-weight: 600; color: var(--link-color); font-size: 0.9rem; margin-bottom: calc(var(--spacing-unit) * 0.3); display: inline-block; }
.specific-times-details ul { list-style: none; margin-left: 0; font-size: 0.85rem; margin-top: calc(var(--spacing-unit) * 0.5); }
.specific-times-details li { margin-bottom: calc(var(--spacing-unit) * 0.2); }

/* Pegelstand Sektion */
.water-level-card .card-header { border-bottom: 1px solid var(--border-color); padding-bottom: calc(var(--spacing-unit) * 0.8); }
.water-level-display { display: flex; align-items: center; gap: calc(var(--spacing-unit) * 1.5); padding: var(--spacing-unit) 0; margin: calc(var(--spacing-unit) * 1) 0; border-left: 6px solid grey; padding-left: var(--spacing-unit); }
.level-value { font-size: 2.5rem; font-weight: 700; color: var(--heading-color); line-height: 1; flex-shrink: 0; }
.level-info .level-status { font-size: 1.1rem; margin-bottom: calc(var(--spacing-unit) * 0.25); }
.level-info .level-trend { font-size: 1rem; display: flex; align-items: center; gap: calc(var(--spacing-unit) * 0.4); }
.trend-icon { font-size: 1.2rem; font-weight: bold; } .trend-text { color: var(--text-muted-color); }
.no-data-warning { padding: var(--spacing-unit); color: var(--danger-color); background-color: var(--danger-bg-color); border: 1px solid var(--danger-border-color); border-radius: 4px; margin: var(--spacing-unit) 0; }
.no-data-warning i { margin-right: calc(var(--spacing-unit)*0.5); }
.alert-levels-legend { margin-top: var(--spacing-unit); padding-top: var(--spacing-unit); border-top: 1px solid var(--border-color); }
.alert-levels-legend h4 { font-size: 1rem; font-weight: 600; margin-bottom: calc(var(--spacing-unit) * 0.5); }
.levels-list { display: flex; flex-wrap: wrap; gap: calc(var(--spacing-unit) * 0.75); font-size: 0.85rem; }
.levels-list li { padding: calc(var(--spacing-unit) * 0.3) calc(var(--spacing-unit) * 0.6); border-radius: 4px; border: 1px solid var(--border-color); background-color: #f8f9fa; }
.levels-list li span { font-weight: 600; margin-right: calc(var(--spacing-unit) * 0.3); }
.level-normal span { color: green; } .level-m1 { border-color: #FFC107; background-color: #FFF9C4;} .level-m1 span { color: #FFA000; } .level-m2 { border-color: orange; background-color: #FFE0B2;} .level-m2 span { color: #F57C00; } .level-m3 { border-color: red; background-color: #FFCDD2;} .level-m3 span { color: #D32F2F; }

/* Horoskop Sektion */
.zodiac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-unit); }
.zodiac-card { padding: 0; }
.zodiac-header { display: flex; align-items: center; gap: var(--spacing-unit); padding: var(--spacing-unit); background-color: #f8f9fa; border-bottom: 1px solid var(--border-color); }
.zodiac-icon { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); }
.zodiac-name { font-size: 1.2rem; margin: 0; }
.zodiac-content { padding: var(--spacing-unit); font-size: 0.95rem; }
.zodiac-content p { margin: 0; }

/* --- 6. Responsives Design --- */
@media (max-width: 992px) {
    h2.section-title { font-size: 1.6rem; }
    .weather-details-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .sun-moon-info { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .pollen-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .health-subgrid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* Responsive für Subgrid */
}
@media (max-width: 767px) {
    main { padding-top: calc(var(--spacing-unit) * 4.5); }
    .site-header .container { position: relative; }
    .logo h1 { font-size: 1.4rem; } .logo .subtitle { display: none; }
    #menu-toggle { display: block; z-index: 1002; position: relative; }
    .main-navigation ul { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--primary-color); flex-direction: column; padding: var(--spacing-unit) 0; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-top: 1px solid rgba(255,255,255,0.2); }
    .main-navigation ul.active { display: flex; }
    .main-navigation li { margin-left: 0; width: 100%; }
    .main-navigation a { display: block; padding: calc(var(--spacing-unit) * 0.8) var(--spacing-unit); border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center; }
    .main-navigation li:last-child a { border-bottom: none; }
    .weather-section .main-weather-card .weather-grid { grid-template-columns: 1fr; text-align: center; }
    .weather-details-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1); }
    .weather-details-grid .detail-item { white-space: normal; flex-wrap: wrap; justify-content: center; text-align: center; }
    .weather-details-grid .detail-item i { margin-bottom: calc(var(--spacing-unit) * 0.2); width: 100%; }
    .weather-details-grid .detail-item strong { margin-left: 0; padding-left: 0; display: block; width: 100%; }
    .weather-main-display { margin-bottom: var(--spacing-unit); }
    .fuel-prices-grid, .zodiac-grid, .pollen-grid, .bioweather-grid, .health-subgrid { grid-template-columns: 1fr; } /* Subgrid auch 1 Spalte */
    .fuel-type-analysis-grid { grid-template-columns: 1fr; }
    .water-level-display { flex-direction: column; align-items: flex-start; text-align: left; }
    .level-value { font-size: 2rem; }
    .levels-list { justify-content: center; }
    .site-footer .footer-content { flex-direction: column; text-align: center; }
    .site-footer .footer-attributions ul { margin-left: 0; padding-left: 0; list-style: none; }
    #back-to-top-btn { bottom: var(--spacing-unit); right: var(--spacing-unit); width: 40px; height: 40px; font-size: 1rem; }
    .outdoor-index-display { flex-direction: column; text-align: center; }
    .index-image-container { margin-bottom: var(--spacing-unit); }
    .index-details { text-align: center; }
    .factors-list { justify-content: center; }
}
@media (max-width: 575px) {
    html { font-size: 95%; }
    h2.section-title { font-size: 1.4rem; }
    .card { padding: var(--spacing-unit); }
    .hourly-item { width: 70px; }
    .daily-grid { gap: calc(var(--spacing-unit) * 0.5); }
    .daily-item { padding: calc(var(--spacing-unit) * 0.5); }
    .temp-range { gap: calc(var(--spacing-unit) * 0.3); }
    .aq-display { flex-direction: column; align-items: center; text-align: center; }
    .aq-details { width: 100%; text-align: center; }
    .aq-components summary { display: block; }
    .aq-components ul { padding-left: calc(var(--spacing-unit)*2); }
    .aq-index-value { width: 65px; height: 65px; font-size: 1.5rem; }
    .pollen-header { flex-direction: column; text-align: center; gap: calc(var(--spacing-unit)*0.4); }
    .pollen-levels { flex-wrap: wrap; justify-content: center; }
    .level-day { min-width: 80px; }
}