
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
    .main-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; max-width: 1200px; margin: 1rem auto 2rem; width: 100%; overflow: hidden; }
    .card { background-color: white; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); overflow: hidden; }
    .nav-link.text-white { color: #ffffff; } .nav-link { color: #374151; font-weight: 500; padding: 0.5rem 0.75rem; border-radius: 0.5rem; transition: all 0.2s ease-in-out; }
    .nav-link:hover { background-color: #e5e7eb; color: #111827; }
    .nav-link.active { background-color: #2563eb; color: white; }
    .nav-link.bg-blue-600 { color: white; }
    .nav-link.bg-blue-600:hover { background-color: #1d4ed8; color: white; }
    .news-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 0.5rem; }
    @media (max-width: 768px) { .main-container { margin-top: 1rem; margin-bottom: 1rem; } }
    /* CLS-Fix: Forecast-Card mit contain für stabiles Layout */
    .card:has(#forecast-toggle) { contain: layout style; }
    #forecast-toggle { cursor: pointer; }
    #forecast-arrow { transition: transform 0.3s ease; }
    .forecast-open #forecast-arrow { transform: rotate(180deg); }
    #lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 1050; display: none; align-items: center; justify-content: center; padding: 2rem; box-sizing: border-box; }
    #lightbox.visible { display: flex; }
    #lightbox img { max-width: 95%; max-height: 95%; object-fit: contain; }
    #lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; color: white; font-size: 2.5rem; line-height: 1; cursor: pointer; }
    .thumbnail { cursor: zoom-in; }
    .credit-small { font-size: 12px; color: #6b7280; margin-top: 6px; text-align: right; width: 100%;}
    .credit-small a { color: #2563eb; text-decoration: none; }
    .credit-small a:hover { text-decoration: underline; }

    #search-results .result-item { padding: 8px 12px; cursor: pointer; }
    #search-results .result-item:hover { background-color: #f0f4f8; }

    .prognose-day { border-top: 1px solid #e5e7eb; padding-top: 1rem; margin-top: 1rem; }
    .prognose-day:first-child { border-top: none; padding-top: 0; margin-top: 0; }
    .prognose-day-title { font-size: 1.125rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; }
    .prognose-day-text { color: #374151; line-height: 1.6; margin-bottom: 0.5rem; }
    .prognose-day-details { font-size: 0.875rem; color: #6b7280; }

    /* === NEU HINZUGEFÜGT: Farben für Warnbanner (Fix für Purging) === */
    .bg-yellow-100 { background-color: #fef9c3; }
    .border-yellow-400 { border-color: #fde047; }
    .text-yellow-900 { color: #713f12; }

    .bg-orange-100 { background-color: #ffedd5; }
    .border-orange-400 { border-color: #fb923c; }
    .text-orange-900 { color: #7c2d12; }

    .bg-red-100 { background-color: #fee2e2; }
    .border-red-500 { border-color: #ef4444; }
    .text-red-900 { color: #7f1d1d; }

    .bg-purple-100 { background-color: #f3e8ff; }
    .border-purple-500 { border-color: #a855f7; }
    .text-purple-900 { color: #581c87; }
