/* ==============================================================================
   Lokale Schriftarten: Inter Variable
   ============================================================================== */
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/InterVariable.woff2') format('woff2-variations'),
         url('fonts/InterVariable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter Variable';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/InterVariable-Italic.woff2') format('woff2-variations'),
         url('fonts/InterVariable-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/InterVariable.woff2') format('woff2-variations'),
         url('fonts/InterVariable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/InterVariable-Italic.woff2') format('woff2-variations'),
         url('fonts/InterVariable-Italic.woff2') format('woff2');
}

/* ==============================================================================
   Globales Seitenlayout & Atmosphärischer Glassmorphism-Hintergrund
   ============================================================================== */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    line-height: 1.5;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background-color: #0b0f19;
    background-image: 
        radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.18) 0px, transparent 45%),
        radial-gradient(at 100% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 45%),
        radial-gradient(at 50% 35%, rgba(30, 41, 59, 0.5) 0px, transparent 65%),
        radial-gradient(at 10% 90%, rgba(14, 165, 233, 0.12) 0px, transparent 50%),
        radial-gradient(at 90% 90%, rgba(56, 189, 248, 0.10) 0px, transparent 50%),
        linear-gradient(180deg, #0b0f19 0%, #0f172a 40%, #090d16 100%);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: #f8fafc;
    font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Custom Scrollbars passend zum Glassmorphism-Look */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Grundlegender Container */
.bsw-container {
    --accent-color: #0ea5e9;
    --accent-color-rgb: 14, 165, 233;

    /* Variable Font Defaults */
    font-weight: 400;
    line-height: 1.5;

    color: white;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 0.75rem 3rem;

    /* Inter Variable Integration */
    font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga' 1, 'calt' 1; /* Chrome-Fix für Ligaturen/Alternativen */

    align-items: center;
    position: relative;
    z-index: 0;
    border-radius: 0.75rem;
    isolation: isolate;
}

/* Standard Paragraphen & Fließtext */
.bsw-container p {
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 0.85rem;
}

.bsw-container p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .bsw-container {
        padding: 1.5rem 1rem 4rem;
    }
}

*:focus {
    outline: none !important;
}

/* Überschriften */
.bsw-container h1 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.bsw-container h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #eee;
    text-align: left;
    line-height: 1.45;
    display: flex;
    align-items: center;
    text-transform: none;
    margin-bottom: 0.75rem;
}

.bsw-container h2 .material-symbols-rounded {
    margin-right: 0.6rem;
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.15);
    padding: 0.35rem;
    border-radius: 10px;
    flex-shrink: 0;
    top: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Unterüberschriften */
.bsw-container h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #eee;
    text-align: left;
    line-height: 1.5;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
}

.bsw-container h3 .material-symbols-rounded {
    margin-right: 0.6rem;
    color: var(--accent-color);
    top: -1px;
}

.bsw-container h4 {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

button, input, select, textarea {
    font-family: inherit;
    line-height: 1.5;
}

/* Material Symbols Font */
.material-symbols-rounded,
.material-symbols-rounded-primary {
    font-family: 'Material Symbols Rounded';
    font-weight: inherit;
    font-style: normal;
    font-size: 1.2em;
    /* Preferred icon size */
    display: inline-block;
    vertical-align: middle;
    position: relative;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Ligaturen explizit erzwingen */
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
}

/* Header-Bereich */
.bsw-header {
    text-align: center;
    margin: 2px 2px 1rem;
    padding: 1.25rem 1.5rem 1rem;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    background-color: transparent;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 1.25rem;
    overflow: hidden;
    -webkit-clip-path: inset(0 round 1.25rem);
    clip-path: inset(0 round 1.25rem);

    /* NEU: Hintergrundbild-Stile */
    background-size: cover;
    /* Bild deckt den gesamten Bereich ab */
    background-position: center center;
    /* Bild zentrieren */
    background-repeat: no-repeat;
    /* Bild nicht wiederholen */
}

/* NEU: Pseudo-element for the subtle background effect (Gradient Scrim) */
.bsw-header::before {
    content: '';
    position: absolute;
    inset: 0;

    /* Sandwich-Gradient: Dunkel oben/unten für Textschutz, heller im Zentrum für Bildbrillanz */
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.60) 0%,
            rgba(0, 0, 0, 0.45) 55%,
            rgba(0, 0, 0, 0.60) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1;
}

/* NEU: Pseudo-element ausschließlich für den hellen Glassmorphism-Rahmen */
.bsw-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Radius muss zum Parent passen */
    border-radius: 1.25rem;

    /* Hier ist unsere helle Kante! */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);

    /* Liegt über dem Hintergrund (1) und den Inhalten (2) */
    z-index: 3;

    /* WICHTIG: Verhindert, dass der Rahmen Klicks auf die Buttons darunter blockiert */
    pointer-events: none;
}

.bsw-header-main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.bsw-header-footer {
    margin-top: 0.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* NEU: Header content must be above the overlay */
.bsw-header>* {
    position: relative;
    z-index: 2;
}

.bsw-header-top {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

/* Title (Location) */
.bsw-title {
    font-size: 1.6rem;
    color: var(--accent-color);
    margin: 0;
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Linksbündig im Header */
    text-align: left;
    gap: 0.3rem;
}

.bsw-city {
    /* Style for city name */
    font-size: 1.6rem;
    font-weight: 550;
    color: var(--accent-color);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    letter-spacing: -0.01em;
}

.bsw-country {
    /* Style for country name */
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bsw-header-elevation {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    /* Etwas heller gemacht */
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 6px;
    border-radius: 6px;
    vertical-align: middle;
    font-weight: 400;
}

.bsw-header-elevation .material-symbols-rounded {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Style for the Toggle Button in the Header */
#bsw-toggle-location-form {
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

#bsw-toggle-location-form .material-symbols-rounded {
    font-size: 1.35rem;
    font-variation-settings: 'wght' 300;
}

#bsw-toggle-location-form:hover {
    background: rgba(var(--accent-color-rgb), 0.15);
    transform: scale(1.05) translateY(-1px);
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.3);
}

#bsw-toggle-location-form:hover .material-symbols-rounded {
    font-variation-settings: 'wght' 450;
    /* Button-Icon wird massiver */
}


/* Current Weather Area */
.bsw-current-weather {
    display: flex;
    flex-direction: column;
    /* Default: elements stacked */
    flex-wrap: wrap;
    align-items: center;
    /* Vertically center in column layout */
    justify-content: center;
}

/* Container for Icon and Main Info (Temp, Description) */
.bsw-current-main-info {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    /* Gleichmäßige Verteilung im Header */
    align-items: center;
    text-align: center;
    padding: 0.5rem 0;
}

.bsw-header .bsw-icon {
    font-size: 4.5rem;
    /* Etwas verkleinert für bessere Balance */
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3));
}

.bsw-header .bsw-temp-desc-container .bsw-temp {
    line-height: 1;
    font-size: 4.0rem;
    font-weight: 350;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.bsw-temp-desc-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    min-width: 100px;
}

/* New Grid for Details */
.bsw-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    /* Compact width */
    gap: 0.75rem;
    margin-top: 1rem;
}

/* New Card Style */
.bsw-detail-card {
    background: rgba(38, 40, 53, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    padding: 0.75rem;
    /* Compact padding */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: transform 0.2s ease, background-color 0.2s ease;
    content-visibility: auto;
    contain-intrinsic-size: auto 65px;
}

.bsw-detail-card:hover {
    background: rgba(38, 40, 53, 0.8);
    font-weight: 500;
    /* Subtile Fettung bei Hover */
}

.bsw-detail-card:active {
    transform: scale(0.96);
}

.bsw-detail-icon {
    width: 36px;
    /* Smaller than station cards */
    height: 36px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bsw-detail-icon .material-symbols-rounded {
    font-size: 1.2rem;
}

.bsw-detail-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    overflow: hidden;
}

.bsw-detail-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bsw-detail-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #eee;
    white-space: nowrap;
}

/* Override alignment for containers inside cards */
.bsw-detail-card .bsw-wind-value-container,
.bsw-detail-card .bsw-uv-value-container {
    justify-content: flex-start;
}

/* Class to hide the entire details section */
.bsw-current-weather-details-section.hidden {
    display: none;
}

.bsw-wind-value-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.bsw-uv-value-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.bsw-wind-arrow {
    line-height: 1;
    /* Die Transition wird durch die Keyframe-Animation für das "Wackeln" ersetzt. */
    /* transition: transform 0.5s ease-out; */
    transform: rotate(var(--wind-direction, 180deg));
    /* Setzt die Drehung basierend auf einer CSS-Variable. */
    color: var(--accent-color);
}

/* NEU: Keyframe-Animation für das "Wackeln" des Windpfeils */
@keyframes wobble {
    0% {
        transform: rotate(calc(var(--wind-direction, 180deg) - 4deg));
    }

    25% {
        transform: rotate(calc(var(--wind-direction, 180deg) + 6deg));
    }

    50% {
        transform: rotate(calc(var(--wind-direction, 180deg) - 8deg));
    }

    75% {
        transform: rotate(calc(var(--wind-direction, 180deg) + 4deg));
    }

    100% {
        transform: rotate(calc(var(--wind-direction, 180deg) - 4deg));
    }
}

/* NEU: Klasse, um die Wackel-Animation zu aktivieren */
.wind-wobble {
    animation: wobble infinite linear;
    /* Lineare Animation für ein gleichmäßigeres Wackeln */
}



/* Responsive adjustment for bsw-current-weather and its inner containers */
@media (min-width: 600px) {

    /* Example breakpoint for tablets and desktops */
}

.bsw-header .bsw-text-small {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    font-weight: 400;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 150px;
    line-height: 1.35;
}

/* Style for the update time below the details */
.bsw-update-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    /* Etwas heller für besseren Kontrast */
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.bsw-update-time .material-symbols-rounded {
    font-size: 0.95rem;
    color: var(--accent-color);
    /* Akzentfarbe */
}

/* Live-Status: Pulsierender Punkt statt Update-Icon */
.bsw-update-time.bsw-live {
    border-color: rgba(0, 230, 118, 0.3);
    background: rgba(0, 230, 118, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.bsw-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #00E676;
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 6px rgba(0, 230, 118, 0.8);
}

.bsw-live-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 230, 118, 0.6);
    transform: translate(-50%, -50%);
    animation: bsw-beacon-wave 2.2s cubic-bezier(0.1, 0.6, 0.4, 1) infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes bsw-beacon-wave {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.9;
    }

    70%,
    100% {
        transform: translate(-50%, -50%) scale(3.2);
        opacity: 0;
    }
}

/* Container for horizontally scrollable hour boxes */
.bsw-hour-boxes {
    display: flex;
    align-items: stretch;
    /* NEU: Sorgt dafür, dass alle Boxen die gleiche Höhe haben (die der höchsten Box) */
    overflow-x: auto;
    /* Horizontally scrollable */
    /* Hide scrollbar */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    overscroll-behavior-x: contain;
    /* NEU: Verhindert Scroll-Chaining */
    padding: 2px 0;
    /* Platz für Hover-Effekt und Schatten */
}

.bsw-hour-boxes::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Individual hour box */
.bsw-hour-box {
    position: relative;
    /* Wichtig für Z-Index Steuerung */
    min-width: 75px;
    /* Slightly wider */
    background: rgba(38, 40, 53, 0.6);
    /* Semi-transparenter Hintergrund */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Für Safari */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtile helle Kante */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /* Optional: Subtiler Schatten */
    padding: 0.75rem 0.25rem;
    /* More vertical padding, 0.75rem side */
    border-radius: 0.75rem;
    /* Etwas stärker abgerundet */
    text-align: center;
    flex-shrink: 0;
    /* Prevent shrinking */
    display: flex;
    /* Flexbox for centering */
    flex-direction: column;
    /* Elements stacked */
    align-items: center;
    /* Horizontally center */
    justify-content: flex-start;
    /* Align elements to the top */
    gap: 0.5rem;
    /* Einheitlicher Abstand zwischen allen Elementen in der Box */
}

.bsw-hour-boxes .bsw-hour-box {
    margin-right: 0.75rem;
    transition: transform 0.2s ease, background-color 0.2s ease, z-index 0s;
}

.bsw-hour-boxes .bsw-hour-box:hover,
.bsw-hour-boxes .bsw-hour-box:focus-within {
    background: rgba(38, 40, 53, 0.8);
    z-index: 50;
    font-weight: 500;
    /* Subtile Fettung bei Hover */
}

.bsw-hour-boxes .bsw-hour-box:active {
    transform: scale(0.96);
}

.bsw-hour-boxes .bsw-hour-box:last-child {
    margin-right: 0;
}

.bsw-day-content .bsw-hour-box.past {
    opacity: 0.7;
    /* Vergangene Werte leicht ausblenden */
}


/* Icon container for emojis */
.bsw-icon {
    font-size: 1.8rem;
    /* Larger emojis */
    display: inline-block;
    /* Allows margin/padding */
    vertical-align: middle;
    line-height: 1;
    /* NEU: Für Tooltip-Positionierung und Interaktivität */
    position: relative;
    cursor: help;
}

/* Fluent Emoji Bilder */
.bsw-fluent-emoji {
    display: inline-block;
    height: 1em;
    width: 1em;
    vertical-align: middle;
    object-fit: contain;
    image-rendering: auto;
    pointer-events: none;
}

/* Größenanpassung für das große Haupt-Icon */
.bsw-current-weather .bsw-icon .bsw-fluent-emoji {
    height: 4.5rem;
    width: 4.5rem;
}

/* Stundenboxen-Icons */
.bsw-hour-box .bsw-icon .bsw-fluent-emoji {
    height: 2.1rem;
    width: 2.1rem;
}

/* Tagesübersicht-Icons */
.bsw-day .bsw-icon .bsw-fluent-emoji,
.bsw-daily-icon .bsw-icon .bsw-fluent-emoji {
    height: 2.4rem;
    width: 2.4rem;
}

/* NEU: Tooltip-Styling */
/* NEU: Tooltip-Styling - Generalisiert für Wiederverwendung */
.bsw-icon::after,
.bsw-icon::before,
.bsw-has-tooltip::after,
.bsw-has-tooltip::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    z-index: 10;
    pointer-events: none;
    /* Wichtig, damit der Tooltip nicht selbst Hover-Events blockiert */
}

/* NEU: Tooltip-Box */
.bsw-icon::after,
.bsw-has-tooltip::after {
    content: attr(aria-label);
    bottom: calc(100% + 8px);
    /* Position über dem Icon mit 8px Abstand */
    background-color: #1e202b;
    /* Dunkler Hintergrund */
    color: #eee;
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: normal;
    /* Erlaubt Zeilenumbruch */
    width: max-content;
    max-width: min(130px, 90vw);
    /* Breiter für weniger Zeilenumbrüche, aber maximal 90% der Bildschirmbreite um nicht abzuschneiden */
    text-align: center;
    /* Zentriert den umgebrochenen Text */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
}

/* NEU: Tooltip-Pfeil */
.bsw-icon::before,
.bsw-has-tooltip::before {
    content: '';
    bottom: 100%;
    /* Position direkt über dem Icon */
    border: 5px solid transparent;
    border-top-color: #1e202b;
    /* Gleiche Farbe wie der Tooltip-Hintergrund */
}

/* NEU: Tooltip-Anpassung für Stundenboxen (nach unten gerichtet), um Abschneiden zu verhindern */
.bsw-hour-box .bsw-icon::after {
    bottom: auto;
    top: calc(100% + 8px);
}

.bsw-hour-box .bsw-icon::before {
    bottom: auto;
    top: 100%;
    border-top-color: transparent;
    border-bottom: 5px solid #1e202b;
}

/* NEU: Tooltip beim Hovern oder Fokussieren anzeigen */
.bsw-icon:not(.bsw-icon-no-tooltip):hover::after,
.bsw-icon:not(.bsw-icon-no-tooltip):hover::before,
.bsw-icon:not(.bsw-icon-no-tooltip):focus::after,
.bsw-icon:not(.bsw-icon-no-tooltip):focus::before,
.bsw-has-tooltip:hover::after,
.bsw-has-tooltip:hover::before,
.bsw-has-tooltip:focus::after,
.bsw-has-tooltip:focus::before {
    opacity: 1;
    visibility: visible;
}

/* NEU: Klasse für allgemeine Tooltip-Träger */
.bsw-has-tooltip {
    position: relative;
    cursor: help;
    display: inline-block;
    /* Wichtig für relative Positionierung */
}

.bsw-day .bsw-icon {
    font-size: 1.75rem;
}


/* Small text styles (time, conditions) */
.bsw-text-small {
    color: #ccc;
    font-size: 0.9rem;
    font-weight: 450;
}

/* Temperature display (standard for hours and daily overview) */
.bsw-temp {
    font-weight: 500;
    font-size: 1.3rem;
    /* Leicht vergrößert für bessere Lesbarkeit und Hierarchie */
    /* Color is set by inline style */
}

/* Grad-Symbol – kleiner, leicht nach oben verschoben, dezenter */
.bsw-deg {
    font-size: 0.8em;
    position: relative;
    top: -0.2em;
    opacity: 0.75;
    font-weight: inherit;
    line-height: 0;
}

/* Min/Max Temperature Styles */
.bsw-temp-min {
    font-size: 1.1rem;
    /* Smaller than standard */
    color: #aaa;
    /* More subtle color - reset to fixed color */
    font-weight: 500;
    margin-right: 0rem;
    /* Right margin */
    text-align: right;
    /* Right align */
    opacity: 0.9;
}

.bsw-temp-max {
    font-size: 1.3rem;
    font-weight: 600;
}

/* Styling for the Location Form */
.bsw-location-form {
    display: flex;
    flex-wrap: wrap;
    /* Allow elements to wrap */
    gap: 1rem;
    /* Gap between form elements */
    padding-bottom: 1rem;
    margin-top: 0.5rem;
    border-bottom: none;
    /* Removed hard border */
    font-size: 1rem;
    align-items: center;
    /* Vertically center */
}

.bsw-location-form input[type="text"] {
    flex-grow: 1;
    /* Input fields should grow */
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(0, 0, 0, 0.25);
    /* Darker glass */
    color: #fff;
    border-radius: 0.75rem;
    -webkit-appearance: none;
    appearance: none;
    min-width: 200px;
    /* Minimum width */
    font-size: 1rem;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bsw-location-form input[type="text"]:focus {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.3), 0 0 8px rgba(var(--accent-color-rgb), 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bsw-location-form input[type="text"]::placeholder {
    color: #aaa;
}


/* Styling for loading indicator */
.bsw-loading-indicator {
    color: var(--accent-color);
    /* Blue color for loading text */
    font-size: 0.9rem;
    margin-left: 1rem;
    display: none;
    /* Hidden by default */
}

.bsw-loading-section {
    font-size: 1.5rem;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.bsw-error-message,
.bsw-confirmation-message {
    /* Standardmäßig ausgeblendet, wird von JS bei Bedarf angezeigt */
    display: none;
    margin-bottom: 1.5rem;
    /* Abstand wie zuvor */
    text-align: center;
}

.bsw-error-message {
    color: #ff6666;
    /* Rot für Fehler */
}

.bsw-confirmation-message {
    color: #00e676;
    /* Grün für Erfolg */
}


/* Styling for source information */
.bsw-source-note {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

.bsw-source-note a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.bsw-source-note a:hover {
    color: #ccc;
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.bsw-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
    font-size: 0.75rem;
}

.bsw-legal-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bsw-legal-links a:hover {
    color: var(--accent-color);
}

.bsw-legal-sep {
    color: rgba(255, 255, 255, 0.3);
}

.bsw-copyright-note {
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.3rem;
}

.bsw-footer {
    margin-top: 2rem;
    padding: 0 1.0rem 0;
    border-top: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.bsw-footer:hover {
    opacity: 1;
}

/* Rechtliche Seiten (Impressum & Datenschutz) */
.bsw-legal-card {
    background: rgba(38, 40, 53, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    border-radius: 1.25rem;
    padding: 2rem 1.5rem;
    margin-top: 0.5rem;
    line-height: 1.6;
}

.bsw-legal-card h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.bsw-legal-card h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.bsw-legal-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #eee;
    margin-top: 1.2rem;
    margin-bottom: 0.4rem;
}

.bsw-legal-card p {
    color: #cbd5e1;
    margin-bottom: 0.85rem;
    font-size: 0.92rem;
}

.bsw-legal-card ul {
    color: #cbd5e1;
    padding-left: 1.4rem;
    margin-bottom: 1rem;
    font-size: 0.92rem;
}

.bsw-legal-card li {
    margin-bottom: 0.35rem;
}

.bsw-legal-card a {
    color: var(--accent-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.bsw-legal-card a:hover {
    text-decoration: underline;
}

.bsw-back-nav {
    margin-bottom: 0.75rem;
}

.bsw-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.bsw-back-btn:hover {
    background: rgba(var(--accent-color-rgb), 0.2);
    border-color: var(--accent-color);
    color: #fff;
}

.bsw-next-hours {
    margin-bottom: 1.75rem;
}

.bsw-current-weather-details-section {
    margin-top: 2.5rem;
}

/* Unified style for hourly detail containers (Wind, Thunderstorm) */
.bsw-hourly-wind-container {
    font-size: 0.75rem;
    color: #aaa;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.2rem;
    /* Exakt auf die nötige Zeilenhöhe angepasst */
}

.bsw-hourly-precip-container {
    display: flex;
    flex-direction: column;
    /* Stack top line and amount vertically */
    align-items: center;
    justify-content: center;
    /* min-height wird jetzt von der übergeordneten .bsw-hour-box gesteuert */
    width: 100%;
    gap: 0.25rem;
    /* Small gap between lines */
}

.bsw-precip-top-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: #aaa;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bsw-precip-top-line .material-symbols-rounded {
    font-size: 1.1em;
}

.bsw-precip-badge {
    background-color: rgba(var(--accent-color-rgb), 0.15);
    border-radius: 12px;
    padding: 2px 6px;
    color: var(--accent-color);
    font-weight: 500;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

/* Grüner Rahmen für Live-Radar-Stunden (Hintergrundfarbe bleibt blau bzw. wie definiert) */
.bsw-precip-badge.validated {
    border: 1px solid rgba(16, 185, 129, 0.65);
}

[data-theme="dark"] .bsw-precip-badge.validated {
    border: 1px solid rgba(52, 211, 153, 0.75);
}

.bsw-precip-badge .material-symbols-rounded {
    font-size: 1.1em;
}

/* Konsistentes Layout für Wind-Wert (einzeln oder als Spanne mit Böen) */
.bsw-wind-range {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

/* NEU: Pill-Design für Windböen */
.bsw-gust-badge {
    border-radius: 12px;
    padding: 1px 5px;
    color: #fff;
    font-weight: 600;
    font-size: 0.65rem;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    display: inline-block;
    vertical-align: middle;
    margin-left: 1px;
}

.bsw-precip-badge.dry {
    color: #bbb;
    font-weight: normal;
    background: rgba(255, 255, 255, 0.07);
}

.bsw-precip-badge.dry .material-symbols-rounded {
    color: #bbb;
}

.bsw-precip-amount {
    font-size: 0.75rem;
    /* Smaller for the amount */
    color: #bbb;
    line-height: 1;
    margin-top: 2px;
}


/* Spezifische Korrektur für das Niederschlags-Icon in der Stundenbox */
.bsw-hourly-precip-container .material-symbols-rounded {
    bottom: 1px;
}


/* Container for the collapsible search bar */
.bsw-location-controls {
    height: 0;
    opacity: 0;
    overflow: hidden;
}

/* State: open (controlled by JS) */
.bsw-location-controls.show-form {
    height: auto;
    opacity: 1;
}


/* Content of daily details (hourly forecast) */
.bsw-day-content {
    padding: 1rem 0.5rem 1.25rem;
    /* Inner padding */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Top separator line */
    display: flex;
    /* Flexbox for horizontal arrangement of hour boxes */
    overflow-x: auto;
    /* Allows horizontal scrolling */
    gap: 0.7rem;
    /* Gap BETWEEN hourly boxes */
    /* Hide scrollbar for various browsers */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    overscroll-behavior-x: contain;
    /* NEU: Verhindert Scroll-Chaining */
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.bsw-day-content::-webkit-scrollbar {
    display: none;
}

/* Style for a single hour box in daily details */
.bsw-day-content .bsw-hour-box {
    min-width: 70px;
    /* Reset der allgemeinen .bsw-hour-box Stile, um doppelte Overlays zu vermeiden */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: none;
    border-radius: 0.75rem;
    padding: 0.75rem 0.25rem;
    /* Padding wiederherstellen für konsistenten Innenabstand */
    text-align: center;
    /* Center content */
    flex-shrink: 0;
    /* Prevent boxes from shrinking */
    /* Flex-Eigenschaften werden von .bsw-hour-box geerbt und müssen nicht neu deklariert werden */
    transition: transform 0.2s ease, background-color 0.2s ease;
    content-visibility: auto;
    contain-intrinsic-size: auto 110px;
}

.bsw-day-content .bsw-hour-box:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.bsw-day-content .bsw-hour-box:active {
    transform: scale(0.96);
}

/* Sun position section (now tiles instead of arc) */
.bsw-sun-section {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
}

/* Sun Grid Layout */
.bsw-sun-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.bsw-sun-card {
    background: rgba(38, 40, 53, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease;
}

.bsw-sun-card:hover {
    background: rgba(38, 40, 53, 0.8);
}

.bsw-sun-card:active {
    transform: scale(0.96);
}

.bsw-sun-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
}

/* Color variants for sun cards */
.bsw-sun-card.morning .bsw-sun-icon-wrapper {
    background-color: rgba(255, 215, 0, 0.15);
    /* Gold tint */
    color: #FFD700;
}

.bsw-sun-card.evening .bsw-sun-icon-wrapper {
    background-color: rgba(255, 136, 0, 0.15);
    /* Orange tint */
    color: #FF8800;
}

.bsw-sun-card.day-length .bsw-sun-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.1);
    color: #eee;
}

.bsw-sun-card.moon .bsw-sun-icon-wrapper {
    background-color: rgba(149, 165, 166, 0.15);
    color: #95a5a6;
}

/* Mond-Emoji im Icon-Wrapper korrekt dimensionieren */
.bsw-sun-card.moon .bsw-sun-icon-wrapper .bsw-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.bsw-sun-card.moon .bsw-sun-icon-wrapper .bsw-fluent-emoji {
    height: 2rem;
    width: 2rem;
}

.bsw-sun-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.bsw-sun-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #aaa;
    font-weight: 600;
    --f-wdth: 100;
}

.bsw-sun-time,
.bsw-sun-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #eee;
}

.bsw-sun-subtext {
    font-size: 0.8rem;
    color: #888;
}

/* Weather alerts section */
.bsw-alerts-section {
    margin-bottom: 1rem;
    margin-top: 0.25rem;
}

.bsw-alerts-section-hidden {
    display: none !important;
    /* Wichtig: display: none überschreibt alles */
}

/* Container for individual alerts */
.bsw-alerts-list {
    display: flex;
    flex-direction: column;
    /* Alerts stacked */
    gap: 1rem;
    /* Gap between alerts */
}

/* Individual alert box (similar to daily boxes) */
.bsw-alert-box {
    background: rgba(38, 40, 53, 0.6);
    /* Semi-transparenter Hintergrund */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Für Safari */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtile helle Kante */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /* Optional: Subtiler Schatten */
    border-radius: 0.75rem;
    /* Etwas stärker abgerundet */
    overflow: hidden;
    /* Important for details animation */
    border-left: 6px solid;
    /* Left border for color */
}


/* Color of the left border based on severity */
.bsw-alert-box.severity-minor {
    border-color: #FFD700;
}

/* Gold/Yellow */
.bsw-alert-box.severity-moderate {
    border-color: #FFA500;
}

/* Orange */
.bsw-alert-box.severity-severe {
    border-color: #FF4500;
}

/* Orange-Red */
.bsw-alert-box.severity-extreme {
    border-color: #DC143C;
}

/* Crimson/Dark Red */


/* Alert summary (clickable header) */
.bsw-alert-box summary {
    padding: 0.75rem 1rem;
    /* Inner padding */
    cursor: pointer;
    display: flex;
    align-items: center;
    /* Vertically center */
    justify-content: space-between;
    /* Align elements left and right */
    gap: 0.75rem;
    /* Prevent overlapping */
    list-style: none;
    /* Remove default triangle */
}

.bsw-alert-box summary::-webkit-details-marker {
    display: none;
    /* Remove default triangle (Webkit) */
}

/* Content of alert details */
.bsw-alert-box .alert-content {
    padding: 0.75rem 1rem 0.75rem;
    /* Inner padding */
    border-top: 1px solid #333;
    /* Separator line */
    font-size: 0.9rem;
    color: #ccc;
}


/* Style for the heading in the alert summary */
.bsw-alert-box .alert-headline {
    font-weight: 600;
    font-size: 0.95rem;
    color: #eee;
    /* Lighter text */
    display: flex;
    /* Flexbox for symbol and text */
    align-items: center;
    /* Vertically center */
    gap: 0.5rem;
    /* Gap between symbol and text */
}

.bsw-alert-box .alert-headline .alert-symbol {
    font-size: 1.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bsw-alert-box .alert-headline .alert-symbol .bsw-fluent-emoji {
    height: 1.8rem;
    width: 1.8rem;
}

.bsw-alert-box .alert-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bsw-alert-box .alert-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #eee;
    line-height: 1.4;
}

.bsw-alert-box .bsw-alert-effective {
    font-size: 0.75rem;
    color: #888;
    font-weight: 400;
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    text-align: right;
}

.bsw-alert-box .alert-description {
    font-size: 0.9rem;
    line-height: 1.55;
    margin-top: 0.75rem;
}


/* Container for AQI display (Horizontal) */
.bsw-aqi-display {
    display: flex;
    flex-direction: column;
    /* Elements stacked */
    gap: 1.5rem;
    /* Gap between bar and text */
    padding-top: 0.5rem;
}

/* Container for the horizontal AQI bar */
.bsw-aqi-bar-container {
    width: 100%;
    /* Full width for the container */
    height: 12px;
    /* Fixed height of the bar */
    /* Gradient representing AQI scale: Bad (Red/Maroon) to Excellent (Green) */
    background: linear-gradient(to right,
            #800000 0%,
            #FF0000 20%,
            #FF8C00 40%,
            #FFFF00 60%,
            #84CF33 80%,
            #009E3A 100%);
    border-radius: 6px;
    /* Rounded corners */
    position: relative;
    /* For absolute positioning of the color block */
    margin-top: 0.5rem;
}


/* Text information for AQI */
.bsw-aqi-info {
    display: flex;
    flex-direction: column;
    /* Stapelt Haupt-Info und Schadstoff vertikal */
    align-items: center;
    /* Richtet alles zentriert aus */
    gap: 0.25rem;
    /* Kleiner Abstand zwischen den Zeilen */
    font-size: 1rem;
    color: #eee;
    margin-top: -0.5rem;
}

.bsw-aqi-info .aqi-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #eee;
    margin-bottom: 0;
}

.bsw-aqi-info .aqi-pollutant {
    flex-basis: auto;
    /* Nicht mehr nötig, da im Column-Layout */
    font-weight: 300;
    /* Light weight for tertiary info */
    font-size: 0.85rem;
    /* Smaller font for the pollutant */
    color: #aaa;
    /* More subtle color */
    margin-bottom: 0;
    /* Remove margin */
}

/* NEU: Marker auf dem AQI-Balken */
.bsw-aqi-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #262835;
    /* Dark background */
    color: #fff;
    font-weight: 600;
    font-size: 1.0rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    border: 2px solid #fff;
    /* Border color will be overridden inline */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    z-index: 2;
    transition: left 1s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
}

.bsw-air-quality-section {
    margin-top: 2.5rem;
    background: rgba(38, 40, 53, 0.6);
    /* Semi-transparenter Hintergrund */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Für Safari */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtile helle Kante */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /* Optional: Subtiler Schatten */
    padding: 0.2rem 1rem 1rem;
    /* Inner padding */
    border-radius: 0.75rem;
    /* Etwas stärker abgerundet */
}

/* Pollen Section Styling */
.bsw-pollen-section {
    background: transparent;
    padding: 0;
    margin-top: 2.5rem;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
}

/* Container for heading and dropdown */
.bsw-pollen-header {
    display: flex;
    justify-content: space-between;
    /* Align elements left and right */
    align-items: center;
    /* Vertically center */
    align-content: center;
}


/* NEU: Steuerelemente für Pollenflug-Datum (Pill-Navigation) */
.bsw-pollen-date-controls {
    display: flex;
    gap: 0.3rem;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.bsw-pollen-date-btn {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
    padding: 0.4rem 0.6rem;
    border-radius: 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.bsw-pollen-date-btn.active {
    background-color: rgba(var(--accent-color-rgb), 0.15);
    color: var(--accent-color);
    border-color: var(--accent-color);
    font-weight: 600;
    box-shadow: 0 0 10px rgba(102, 178, 255, 0.1);
}

.bsw-pollen-date-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: translateY(-1px);
}


/* Container for individual pollen items */
.bsw-pollen-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.bsw-pollen-card {
    background: rgba(38, 40, 53, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease;
    content-visibility: auto;
    contain-intrinsic-size: auto 80px;
}

.bsw-pollen-card:hover {
    background: rgba(38, 40, 53, 0.8);
}

.bsw-pollen-card:active {
    transform: scale(0.96);
}

.bsw-pollen-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bsw-pollen-icon-wrapper .material-symbols-rounded {
    font-size: 1.5rem;
}

.bsw-pollen-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bsw-pollen-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #aaa;
    font-weight: 600;
}

.bsw-pollen-value-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.3rem;
    margin-bottom: 0.6rem;
}

.bsw-pollen-index {
    font-size: 1.45rem;
    font-weight: 750;
    line-height: 1;
    display: flex;
    align-items: baseline;
    letter-spacing: -0.02em;
}

.bsw-pollen-max {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    margin-left: 0.3rem;
}

.bsw-pollen-category-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.15);
}

.bsw-pollen-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.2rem;
}

.bsw-pollen-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bsw-pollen-category {
    font-size: 0.9rem;
    color: #eee;
    font-weight: 500;
}


/* Sections via Native content-visibility (Kein JS-Flackern, 100% nativ gerendert) */
.bsw-lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 250px;
}

/* --- Toggles Styling --- */
.bsw-toggles-container {
    padding: 1rem 1rem 1rem;
    /* Inner padding for the content */
    border-top: 1px solid #333;
    /* Separator line from summary */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Gap between toggles */
    font-size: 0.85rem;
    color: #ccc;
}

/* --- End Toggles Styling --- */

/* --- Settings Details Styling --- */
.bsw-settings-details {
    margin-top: 2.5rem;
    background: rgba(38, 40, 53, 0.6);
    /* Semi-transparenter Hintergrund */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Für Safari */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtile helle Kante */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /* Optional: Subtiler Schatten */
    border-radius: 0.75rem;
    /* Etwas stärker abgerundet */
    overflow: hidden;
}

.bsw-settings-details summary {
    padding: 1rem 1rem;
    cursor: pointer;
    list-style: none;
}

.bsw-settings-details summary::-webkit-details-marker {
    display: none;
}

.bsw-settings-details summary h3 {
    margin: 0;
    display: inline-block;
}

/* --- AI Summary Box Styling --- */
.bsw-ai-summary-box {
    margin-bottom: 2.0rem;
    /* Erhöht für klare Trennung zur 10-Tage-Vorhersage */
    background: rgba(38, 40, 53, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Desktop Layout für Chart und KI-Box nebeneinander */
@media (min-width: 900px) {
    .bsw-desktop-row {
        display: flex;
        gap: 2.5rem;
        align-items: flex-start;
        margin-bottom: 2.5rem;
        /* Abstand zur nächsten Sektion */
    }

    .bsw-desktop-row>.bsw-lazy-section {
        flex: 1;
        min-width: 0;
    }

    /* Margins der Kinder zurücksetzen, da der Wrapper den Abstand regelt */
    .bsw-desktop-row .bsw-chart-section,
    .bsw-desktop-row .bsw-ai-summary-box {
        margin-bottom: 0;
    }

    /* Flexibles Masonry-Layout für alle folgenden Widgets (Nahtloses Aneinanderreihen in der Höhe) */
    .bsw-flexible-grid {
        column-width: 380px;
        column-gap: 2.5rem;
        margin-bottom: 2.5rem;
    }

    .bsw-flexible-grid>.bsw-lazy-section {
        margin-bottom: 1.5rem;
        /* Abstand der Boxen vertikal zueinander */
        break-inside: avoid;
        /* Verhindert das Zerbrechen einer Box am Spaltenende */
        width: 100%;
        display: inline-block;
        /* Stabilisiert das break-inside in manchen Browsern */
    }
}

.bsw-ai-summary-box summary {
    padding: 1rem 1rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
}

.bsw-ai-summary-box summary::-webkit-details-marker {
    display: none;
}

.bsw-ai-summary-box summary h3 {
    margin: 0;
    display: inline-flex;
    gap: 0.2rem;
    align-items: center;
}

.bsw-ai-content {
    padding: 0.5rem 1rem 0.5rem;
    color: #eee;
    line-height: 1.5;
    overflow: hidden;
    /* Verhindert Margin-Collapse und Springen nach Animation */
}

.bsw-ai-content p {
    margin-top: 0;
    /* Abstand wird über Padding des Containers geregelt */
}

/* Utility class for spinning icons */
.bsw-spin {
    animation: spin 1.5s linear infinite;
}

.bsw-microclimate-section {
    margin-top: 2.0rem;
}

.bsw-microclimate-card {
    background: rgba(38, 40, 53, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: transform 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.bsw-microclimate-card:active {
    transform: scale(0.96);
}

.bsw-microclimate-card:hover {
    background: rgba(38, 40, 53, 0.8);
}

.bsw-microclimate-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.bsw-microclimate-icon-wrapper .material-symbols-rounded {
    font-size: 1.5rem;
}

.bsw-microclimate-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-grow: 1;
    min-width: 0;
}

.bsw-microclimate-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #aaa;
    font-weight: 600;
    --f-wdth: 100;
}

.bsw-microclimate-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

.bsw-microclimate-hero-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.1rem;
}

.bsw-microclimate-hero-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
}

.bsw-microclimate-hero-unit {
    font-size: 1.0rem;
    font-weight: 600;
    opacity: 0.8;
}

/* Skala Design */
.bsw-microclimate-scale-container {
    width: 100%;
    padding: 0.5rem 0 1.0rem;
    /* Oben deutlich weniger Padding, da kein Label mehr dort schwebt */
}

.bsw-microclimate-scale-bar {
    width: 100%;
    height: 4px;
    background: linear-gradient(to right,
            rgba(68, 138, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 82, 82, 0.3) 100%);
    border-radius: 2px;
    position: relative;
}

.bsw-microclimate-scale-bar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -3px;
    width: 2px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-50%);
}

.bsw-microclimate-scale-marker {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px currentColor;
    transition: left 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.bsw-scale-label-ref {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
    transform: translateX(-50%);
    top: 8px;
    /* Fixiert unter der Skalenmitte */
    left: 50%;
    color: #aaa;
}

.bsw-microclimate-context {
    font-size: 0.75rem;
    color: #888;
    line-height: 1.3;
    margin-top: 0.4rem;
}

.bsw-microclimate-description {
    font-size: 0.85rem;
    color: #eee;
    line-height: 1.5;
    margin-top: 0.2rem;
}

.bsw-microclimate-summary {
    list-style: none;
    outline: none;
}

.bsw-microclimate-summary::-webkit-details-marker {
    display: none;
}

.bsw-microclimate-map-container {
    padding: 1rem 0;
    overflow: hidden;
}

/* Animation beim Öffnen */
.bsw-microclimate-details[open] .bsw-microclimate-map-container {
    animation: bswReveal 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Verhindert, dass die Animation im geschlossenen Zustand hängen bleibt */
.bsw-microclimate-details:not([open]) .bsw-microclimate-map-container {
    animation: none;
    opacity: 0;
}

@keyframes bswReveal {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tooltip Styles für Leaflet (aus JS verschoben) */
.bsw-microclimate-tooltip {
    background: rgba(0, 0, 0, 0.8) !important;
    border: none !important;
    color: white !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    padding: 8px 12px !important;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.bsw-microclimate-tooltip::before {
    display: none !important;
}

.bsw-microclimate-tooltip .leaflet-tooltip-pane {
    z-index: 600;
}

/* Fix 4: Heatmap-Legende & Modus-Switch */
.bsw-heatmap-legend {
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 8px 12px;
    pointer-events: auto !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    margin-bottom: 25px !important;
    user-select: none;
    min-width: 160px;
    box-sizing: border-box;
}

.bsw-heatmap-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.bsw-heatmap-legend-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Switch bestehend ausschließlich aus 2 Material Symbols Icons */
.bsw-heatmap-icon-switch {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 2px;
    gap: 2px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.bsw-heatmap-icon-switch:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.bsw-heatmap-icon-switch .bsw-switch-sym {
    font-size: 15px !important;
    line-height: 1 !important;
    padding: 3px 5px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bsw-heatmap-icon-switch .bsw-switch-sym:hover {
    color: rgba(255, 255, 255, 0.75);
}

.bsw-heatmap-icon-switch .bsw-switch-sym.is-active {
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.bsw-heatmap-icon-switch .bsw-switch-sym.rel-icon.is-active {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.22);
    border: 1px solid rgba(56, 189, 248, 0.4);
}

.bsw-heatmap-icon-switch .bsw-switch-sym.abs-icon.is-active {
    color: #f97316;
    background: rgba(249, 115, 22, 0.22);
    border: 1px solid rgba(249, 115, 22, 0.4);
}

/* Globale Leaflet-Attribution (für alle Karten) */
.leaflet-control-attribution {
    background: rgba(38, 40, 53, 0.5) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    border-radius: 4px 0 0 0;
    text-align: right;
}

.leaflet-control-attribution a {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
}

.leaflet-control-attribution a:hover {
    text-decoration: underline !important;
}

.bsw-heatmap-legend-bar {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    box-sizing: border-box;
}

.bsw-heatmap-legend-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.65rem;
    color: #ccc;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
}

/* --- Sources Tiles Styling --- */
.bsw-sources-container {
    padding-top: 1.25rem;
    border-top: 1px solid #333;
}

.bsw-sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.bsw-source-card {
    background: rgba(38, 40, 53, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.bsw-source-card:hover {
    background: rgba(38, 40, 53, 0.8);
}

.bsw-source-card:active {
    transform: scale(0.96);
}

.bsw-source-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bsw-source-icon-wrapper.current {
    background-color: rgba(0, 230, 118, 0.15);
    /* Green tint */
    color: #00e676;
}

.bsw-source-icon-wrapper.forecast {
    background-color: rgba(var(--accent-color-rgb), 0.15);
    /* Blue tint */
    color: var(--accent-color);
}

.bsw-source-icon-wrapper .material-symbols-rounded {
    font-size: 1.5rem;
}

.bsw-source-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-grow: 1;
    min-width: 0;
    /* Enables text truncation if needed */
}

.bsw-source-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #aaa;
    font-weight: 600;
    --f-wdth: 100;
}

.bsw-source-name {
    font-size: 1.0rem;
    color: #eee;
    font-weight: 500;
    line-height: 1.3;
}

.bsw-source-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.bsw-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #ccc;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    width: fit-content;
    margin-top: 0;
}

.bsw-source-badge .material-symbols-rounded {
    font-size: 1.0rem;
}

.bsw-source-badge.inversion {
    background-color: rgba(255, 152, 0, 0.15);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.2);
    font-weight: 600;
}

/* Main Loading Spinner Overlay */
#bsw-main-loader {
    position: fixed;
    /* Cover the whole screen */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    /* On top of absolutely everything */
    flex-direction: column;
    gap: 1.5rem;
    color: #fff;
    font-size: 1rem;
    background: radial-gradient(circle at center, #1e202c 0%, #0f1016 100%);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
}

#bsw-main-loader.bsw-loader-fadeout {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.bsw-progress-circle-container {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0 0 15px rgba(14, 165, 233, 0.3)); /* Accent glow */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsw-progress-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Start at 12 o'clock */
}

.bsw-progress-circle-bg {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 6;
}

.bsw-progress-circle-bar {
    stroke: var(--accent-color, #0ea5e9);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy fluid transition */
}

.bsw-progress-percentage {
    position: absolute;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    font-family: inherit;
    letter-spacing: -0.5px;
    display: flex;
    align-items: baseline;
}

/* Fehlerzustand für den Loader */
.bsw-is-error .bsw-progress-circle-container {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    position: absolute; /* Take out of flow */
}

.bsw-loader-error-icon {
    font-size: 4rem;
    margin-bottom: 0.5rem;
    color: #ef4444; /* Premium crimson red */
    display: inline-block;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.3));
    animation: bsw-shake 0.5s ease-in-out;
}

.bsw-loader-text {
    font-size: 1.0rem;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    max-width: 320px;
    line-height: 1.45;
    animation: bsw-pulse 2s infinite ease-in-out;
}

.bsw-is-error .bsw-loader-text {
    animation: none;
    opacity: 1;
    color: #fca5a5;
    font-weight: 500;
}

@keyframes bsw-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes bsw-pulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

@keyframes bsw-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Class to hide content until loaded */
.bsw-content-hidden {
    visibility: hidden;
    /* Hide but keep layout */
    opacity: 0;
}

#bsw-main-content {
    transition: opacity 0.2s ease-in;
}

/* NEU: Vertical temperature indicator */
.bsw-temp-indicator-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

/* Spezifische Korrektur für Min/Max im Thermometer, um 4.5rem Erbe zu verhindern */
.bsw-header .bsw-temp-indicator-min.bsw-temp,
.bsw-header .bsw-temp-indicator-max.bsw-temp {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    line-height: 1.2;
    text-shadow: none;
}

.bsw-temp-thermometer {
    width: 12px;
    /* Width of the thermometer */
    height: 55px;
    /* Height of the thermometer */
    border-radius: 6px;
    /* Half width for rounded ends */
    position: relative;
    /* overflow: hidden; */
    /* Entfernt, damit der Glow des Markers sichtbar ist */
}

.bsw-temp-current-marker {
    --marker-height: 10px;
    --thermometer-height: 55px;
    /* Muss mit .bsw-temp-thermometer height übereinstimmen */

    position: absolute;
    width: var(--marker-height);
    height: var(--marker-height);
    background-color: #fff;
    /* Reinweiß für besseren Glow */
    left: 50%;
    /* Horizontally center */

    /* 
     * Dynamische Top-Position:
     * 1. (var(--thermometer-height) - var(--marker-height)): Berechnet den verfügbaren Bewegungsraum.
     * 2. (1 - var(--temp-position, 0.5)): Kehrt den Positions-Prozentsatz um (0% unten, 100% oben).
     * 3. Multipliziert den Bewegungsraum mit dem umgekehrten Prozentsatz.
     * 4. Addiert die halbe Marker-Höhe, um die Position auf die Mitte des Markers zu zentrieren.
     */
    top: calc((var(--thermometer-height) - var(--marker-height) - 2px) * (1 - var(--temp-position, 0.5)) + (var(--marker-height) / 2) + 1px);

    transform: translate(-50%, -50%);
    /* Korrektur für die Zentrierung */
    border: 1.5px solid rgba(0, 0, 0, 0.5);
    /* Etwas weichere Kante */
    border-radius: 50%;
    z-index: 5;
    /* Über dem Thermometer-Balken */
    transition: top 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    /* Sanfte Animation bei Wertänderung */

    /* Moderner Glow-Effekt - dezentere Intensität */
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.6),
        0 0 15px rgba(255, 255, 255, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- Recent Locations Styling --- */
#bsw-recent-locations-container {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
    /* Standardmäßig ausblenden, JS blendet es ein */
}

/* Kleinere, dezentere Überschrift */
#bsw-recent-locations-container h4 {
    font-size: 0.9rem;
    font-weight: 500;
    color: #aaa;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Container für die Bubbles (Flexbox) */
#bsw-recent-locations-list {
    display: flex;
    flex-wrap: wrap;
    /* Erlaubt Umbruch bei vielen Orten */
    gap: 0.75rem;
    /* Abstand zwischen den Bubbles */
}

/* Styling der einzelnen Bubble */
.bsw-recent-location-item {
    display: inline-flex;
    /* Wichtig für korrekte Ausrichtung mit dem Button */
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: 0.75rem;
    /* Match other cards */
    font-size: 0.9rem;
    font-weight: 500;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bsw-recent-location-item:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #fff;
}

/* Styling für den Löschen-Button */
.bsw-delete-recent {
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border-radius: 50%;
    /* Dezente Farbe */
    transition: all 0.2s ease;
}

.bsw-delete-recent:hover {
    color: #ff6666;
    background: rgba(255, 102, 102, 0.1);
    /* Rot beim Hovern */
}

.bsw-delete-recent .material-symbols-rounded {
    font-size: 1.1rem;
}


/* Vereinheitlichtes Button-Styling für Suchen und Standort */
.bsw-location-form button,
.bsw-browser-geo-button,
.bsw-retry-button {
    display: inline-flex;
    /* Flexbox für konsistente Ausrichtung */
    align-items: center;
    /* Vertikal zentrieren */
    justify-content: center;
    gap: 0.5rem;
    /* Abstand zwischen Icon und Text */
    padding: 0.8rem 1rem;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    /* Schriftgröße vereinheitlicht */
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Spezifische Farben und Hover-Effekte */
/* Modernes, minimalistisches Button-Design - Original Akzentfarbe mit Opacity */
.bsw-location-form button,
.bsw-browser-geo-button,
.bsw-retry-button {
    background: rgba(var(--accent-color-rgb), 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(var(--accent-color-rgb), 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-weight: 600;
}

.bsw-location-form button:hover,
.bsw-browser-geo-button:hover,
.bsw-retry-button:hover {
    background: rgba(var(--accent-color-rgb), 0.8);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--accent-color-rgb), 0.3);
    color: #ffffff;
}

.bsw-location-form button:active,
.bsw-browser-geo-button:active,
.bsw-retry-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(var(--accent-color-rgb), 0.3);
}



/* Loading Indicator for Geolocation */
#bsw-loading-indicator {
    display: none;
    /* Hidden by default */
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-color);
}

#bsw-loading-indicator .material-symbols-rounded {
    animation: spin 1.2s linear infinite;
    /* Re-use the spinner animation */
    font-size: 1.2rem;
}

/* --- Ende Recent Locations Styling --- */

/* --- Pollutants List Styling --- */
.bsw-pollutants-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    /* Responsive Grid */
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #333;
    /* Separator line */
}

.bsw-pollutant-item {
    background: rgba(255, 255, 255, 0.03);
    /* Dezenterer Hintergrund für Integration */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Sehr subtile Kante */
    box-shadow: none;
    /* Kein Schatten, da innerhalb einer Kachel */
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    /* Stärker abgerundet, konsistent mit anderen Kacheln */
    display: flex;
    flex-direction: row;
    /* Side by side */
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border-left: 6px solid transparent;
    /* Placeholder, color set via inline style */
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.bsw-pollutant-item:hover {
    background: rgba(255, 255, 255, 0.08);
    /* Leichtes Aufleuchten beim Hover */
}

.bsw-pollutant-item:active {
    transform: scale(0.96);
}

.bsw-pollutant-item .pollutant-name {
    font-size: 0.85rem;
    color: #aaa;
    font-weight: 500;
}

.bsw-pollutant-item .pollutant-value {
    font-size: 1.0rem;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.pollutant-dot {
    display: none;
}

.bsw-aqi-footer {
    font-size: 0.75rem;
    color: #999;
    text-align: center;
    margin-top: 0;
    font-weight: 300;
}

.bsw-section-title-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Korrektur für die Ausrichtung von Icon und Text in der Flex-Überschrift (Aktuelle Werte) */
.bsw-section-title-flex>span:first-child {
    display: flex;
    align-items: center;
}

.bsw-update-time-small {
    font-size: 0.85rem;
    color: #aaa;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Chart Section */
.bsw-chart-section {
    background: rgba(38, 40, 53, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    padding: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.bsw-chart-header {
    padding: 0.5rem 1.0rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
}

.bsw-chart-header::-webkit-details-marker {
    display: none;
}

.bsw-chart-body {
    padding: 1rem 1rem 1rem;
}

.bsw-chart-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
}

.bsw-chart-header h3 .material-symbols-rounded {
    top: 0;
    margin-right: 0.3rem;
}

.bsw-chart-select {
    background-color: transparent;
    color: #eee;
    border: 1px solid transparent;
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    min-width: 0;
    outline: none;
}

.bsw-chart-select:hover,
.bsw-chart-select:focus {
    background-color: transparent;
    border: 0;
}

.bsw-chart-select option {
    background-color: #262835;
    color: #eee;
    font-size: 1rem;
    font-weight: normal;
}

.bsw-precip-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #ccc;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    width: fit-content;
    margin: 0 auto 1rem auto;
}

.bsw-precip-summary .material-symbols-rounded {
    font-size: 1rem;
    color: var(--accent-color);
}

.bsw-precip-summary strong {
    color: #fff;
    font-weight: 600;
}

.bsw-precip-chart-wrapper {
    display: flex;
    height: 130px;
    align-items: flex-end;
    gap: 2px;
    overflow-x: auto;
    padding-bottom: 2px;
    /* Hide scrollbar */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.bsw-precip-chart-wrapper::-webkit-scrollbar {
    display: none;
}

.bsw-precip-bar-group {
    flex: 0 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.bsw-precip-bar-area {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bsw-precip-bar {
    width: 70%;
    background-color: var(--accent-color);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, rgba(255, 255, 255, 0.15) 100%);
    border-radius: 6px 6px 0 0;
    min-height: 0;
    transition: height 0.5s ease, opacity 0.2s ease;
    opacity: 0.85;
}

.bsw-precip-bar:hover {
    opacity: 1;
}

.bsw-precip-value {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3px;
    text-align: center;
    height: 1rem;
    line-height: 1rem;
}

.bsw-precip-label {
    height: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.6rem;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Radar-Prognose: Geglättete SVG-Flächenkurve */
.bsw-radar-area-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.bsw-radar-area-wrapper::-webkit-scrollbar {
    display: none;
}

.bsw-radar-svg {
    display: block;
    min-width: 100%;
}

.bsw-radar-svg-label {
    font-size: 12px;
    font-weight: 400;
    fill: rgba(255, 255, 255, 0.5);
    font-family: inherit;
}

.bsw-radar-svg-value {
    font-size: 12px;
    font-weight: 600;
    fill: rgba(255, 255, 255, 0.9);
    font-family: inherit;
}

.bsw-precip-icon .material-symbols-rounded {
    font-size: 1.1em;
    color: #aaa;
}

/* NEU: Modernes Alert-Design */
.bsw-alert-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    /* Verhindert Stauchen des Badges im Flex-Header */
}

.bsw-alert-badge.active {
    background-color: rgba(255, 82, 82, 0.15);
    color: #ff5252;
    border: 1px solid rgba(255, 82, 82, 0.3);
    box-shadow: 0 0 10px rgba(255, 82, 82, 0.1);
}

.bsw-alert-badge.future {
    background-color: rgba(255, 255, 255, 0.1);
    color: #aaa;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bsw-alert-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.8rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bsw-alert-time-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bsw-alert-time-item .material-symbols-rounded {
    font-size: 1.4rem;
    color: #ccc;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.4rem;
    border-radius: 10px;
    transform: rotate(90deg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bsw-alert-time-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bsw-alert-time-text .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #888;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.bsw-alert-time-text .value {
    font-size: 0.9rem;
    color: #eee;
    font-weight: 500;
    line-height: 1.35;
}

/* NEU: Horizontale Tagesliste */
.bsw-daily-list {
    display: flex;
    overflow-x: auto;
    gap: 0.75rem;
    padding: 0.25rem 0.25rem 1rem 0.25rem;
    /* Padding für Schatten/Hover */
    margin-bottom: -0.5rem;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    overscroll-behavior-x: contain;
    /* NEU: Verhindert Scroll-Chaining */
}

.bsw-daily-list::-webkit-scrollbar {
    display: none;
}

.bsw-daily-item {
    position: relative;
    min-width: 85px;
    background: rgba(38, 40, 53, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    /* Erhöht für mehr Luftigkeit */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
}

.bsw-daily-item:hover {
    background: rgba(38, 40, 53, 0.8);
}

.bsw-daily-item:active {
    transform: scale(0.96);
}

.bsw-daily-item.active {
    background: rgba(var(--accent-color-rgb), 0.15);
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.15);
}

.bsw-daily-item.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #3b82f6;
    z-index: 10;
    animation: bswArrowFadeIn 0.3s ease-out forwards;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@keyframes bswArrowFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -5px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.bsw-daily-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: normal;
    gap: 0.2rem;
}

.bsw-daily-date .bsw-text-small {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.bsw-daily-weekday {
    font-weight: 600;
    font-size: 1.1rem;
    color: #ffffff;
    letter-spacing: 0.6px;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bsw-daily-weekday.is-today {
    color: #60a5fa;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.bsw-daily-icon .bsw-icon {
    font-size: 2rem;
}

.bsw-daily-timeline-bar {
    width: 85%;
    height: 6px;
    border-radius: 3px;
    margin: 0.3rem 0;
    /* Erhöht, um den Balken besser abzugrenzen */
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.5),
        0 1px 1px rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.bsw-daily-temps {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 0.6rem;
    width: 100%;
}

.bsw-temp-max-badge {
    font-size: 1.25rem;
    font-weight: 600;
    /* Kräftiger für bessere Lesbarkeit */
    color: #fff;
    background-color: #555;
    /* Fallback */
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    /* Stärkerer Schatten gegen helle Farben */
    min-width: 3.5rem;
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: baseline;
    border: 1px solid rgba(255, 255, 255, 0.2);
}



.bsw-daily-precip-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.bsw-daily-precip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.15);
    padding: 2px 6px;
    border-radius: 12px;
    margin-top: 0;
    /* Keinen Margin hier, wird durch den Container-Gap gesteuert */
}

.bsw-daily-precip-amount-plain {
    text-align: center;
    line-height: 1;
}

.precip-sum-text {
    font-size: 0.75rem;
    color: #aaa;
    /* Dezentes Grau statt Blau */
    font-weight: 500;
}

.bsw-rain-total-small {
    font-size: 0.85em;
    /* 15% kleiner als der Hauptwert */
    opacity: 0.75;
    font-weight: 400;
}

.bsw-daily-precip .material-symbols-rounded {
    font-size: 0.85rem;
}

.bsw-daily-precip.empty {
    display: none;
}

.bsw-daily-precip.dry {
    color: #bbb;
    font-weight: normal;
    background: rgba(255, 255, 255, 0.07);
}

.bsw-daily-details-section {
    animation: fadeIn 0.3s ease-in-out;
}

.bsw-day-content {
    padding: 1.25rem 0.5rem 0rem;
}

/* --- Anpassungen für Dezimalstellen-Anzeige --- */

/* Einheitliche relative Verkleinerung (ca. 92 %) für alle Elemente */
.bsw-temp-decimal {
    transform: scale(0.92);
    display: inline-block;
    /* Notwendig für transform bei spans */
    transform-origin: center;
}

/* Im Bereich der aktuellen Detailwerte keine Verkleinerung */
#bsw-current-details-grid .bsw-temp-decimal {
    transform: none;
    display: inline;
}

/* Badge muss Flexbox bleiben und etwas breiter werden */
.bsw-temp-max-badge.bsw-temp-decimal {
    display: flex;
    min-width: 3.8rem;
}

/* --- Segmented Control Styling (Source Switch) --- */
.bsw-segmented-control-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.bsw-settings-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #aaa;
    font-weight: 600;
    margin-left: 0.25rem;
}

.bsw-segmented-control {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 4px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bsw-segmented-control input[type="radio"] {
    display: none;
}

.bsw-segmented-control label {
    flex: 1;
    text-align: center;
    padding: 0.6rem 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 8px;
    color: #ccc;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: 500;
    z-index: 1;
    user-select: none;
}

.bsw-segmented-control input[type="radio"]:checked+label {
    background-color: rgba(var(--accent-color-rgb), 0.15);
    color: #3b82f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

.bsw-segmented-control label:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
}

.bsw-segmented-control input[type="radio"]:checked+label:hover {
    background-color: rgba(var(--accent-color-rgb), 0.2);
}