/* ══ FAVORITEN-CHIP ══ */
    /* Favoriten-Karte: Einstieg zum Lieblingsort */
    .tw-fav-chip {
        display: none;
        width: 100%;
    }
    .tw-fav-chip.visible { display: block; }
    .tw-fav-card-wrap { position: relative; width: 100%; }
    .tw-fav-card {
        position: relative;
        display: block;
        padding: 24px 26px 26px;
        border-radius: 14px;
        background: linear-gradient(180deg, #cfe1f5 0%, #e8eef6 65%, #ffffff 100%);
        text-decoration: none;
        color: #0f172a;
        overflow: hidden;
        border: 1px solid #d6e4f3;
        box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.05);
        transition: transform 0.22s ease, box-shadow 0.22s ease;
        /* isolation: isolate; -- deaktiviert fuer P30-Pro Render-Test (Compositing), 24.07. */
    }
    .tw-fav-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 6px rgba(15,23,42,0.06), 0 14px 32px rgba(29,78,216,0.13);
    }
    /* Tageszeit-Himmel (Basis-Gradient) — 4 Stufen statt 2.
       is-day/is-night werden weiter aus Sonnenstand vergeben, is-dawn/is-dusk
       in einem schmalen Fenster ±30 min um Sonnenauf-/-untergang. */
    .tw-fav-card.is-dawn  { background: linear-gradient(180deg, #f4b283 0%, #e8a8b8 30%, #b6b9d4 60%, #d4dfeb 100%); border-color:#e6c8b4; color:#1a2330; }
    .tw-fav-card.is-day   { background: linear-gradient(180deg, #a3c8e6 0%, #c8dcec 55%, #ffffff 100%); border-color:#d6e4f3; color:#0f172a; }
    .tw-fav-card.is-dusk  { background: linear-gradient(180deg, #c45a3a 0%, #8a4a72 35%, #3d3d6b 70%, #1f2640 100%); border-color:#5a3a55; color:#f4ebe2; }
    .tw-fav-card.is-night { background: linear-gradient(180deg, #0a1735 0%, #1a2c54 55%, #2a4173 100%); border-color:#2a4173; color:#e2e8f0; }
    /* Wetter-Overlay — verdunkelt je nach Niederschlag/Bewölkung */
    .tw-fav-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
    .tw-fav-card.tw-fav-w-cloudy   .tw-fav-overlay { background: rgba(40,55,75,0.16); }
    .tw-fav-card.tw-fav-w-rain     .tw-fav-overlay { background: rgba(20,35,55,0.30); }
    .tw-fav-card.tw-fav-w-snow     .tw-fav-overlay { background: rgba(180,200,220,0.18); }
    .tw-fav-card.tw-fav-w-thunder  .tw-fav-overlay { background: rgba(15,25,45,0.40); }
    .tw-fav-card.tw-fav-w-fog      .tw-fav-overlay { background: rgba(180,190,200,0.20); }
    .tw-fav-mountains {
        position: absolute;
        left: 0; right: 0; bottom: -1px;
        width: 100%;
        height: 70%;
        pointer-events: none;
        color: #1e3a5f;
        z-index: 0;
    }
    .tw-fav-ridge-back { fill: currentColor; opacity: 0.06; }
    .tw-fav-ridge-front { fill: currentColor; opacity: 0.10; }
    .tw-fav-label, .tw-fav-place, .tw-fav-cta { position: relative; z-index: 1; }
    .tw-fav-label {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #1d4ed8;
        opacity: 0.85;
    }
    .tw-fav-label svg { width: 14px; height: 14px; fill: #f59e0b; }
    .tw-fav-place-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        position: relative; z-index: 1;
        margin: 6px 0 4px;
    }
    .tw-fav-place {
        font-size: clamp(1.85rem, 4.5vw, 2.55rem);
        font-weight: 700;
        letter-spacing: -0.03em;
        margin: 0;
        line-height: 1.1;
        color: #0f172a;
        /* Nur an Wort-Grenzen brechen — KEINE Trennung mitten in Wörtern
           wie "Klo-peinersee". hyphens und word-break: break-word sind
           bewusst nicht gesetzt. */
        overflow-wrap: normal;
        word-break: normal;
        hyphens: manual;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .tw-fav-place-row { min-width: 0; max-width: 60%; }
    @media (max-width: 600px) {
        /* Auf Mobile bewusst auf 62 % begrenzen — dann brechen lange Namen
           wie "St. Jakob in Defereggen" oder "Klagenfurt am Wörthersee"
           zuverlässig zweizeilig um, kurze Namen wie "Mallnitz" bleiben
           einzeilig links. Symbole liegen am Bottom-Right und kollidieren
           nicht mit dem Place-Block. */
        .tw-fav-place-row { max-width: 62%; }
    }
    .tw-fav-live-temp {
        font-size: clamp(1.6rem, 3.6vw, 2.1rem);
        font-weight: 700;
        letter-spacing: -0.04em;
        color: #0f172a;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
        text-align: left;
    }
    .tw-fav-live-temp small {
        display: block;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #64748b;
        margin-top: 6px;
    }
    .tw-fav-live-temp .deg { margin-left: 0.18em; }
    .tw-fav-live-temp:empty { display: none; }
    .tw-fav-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.95rem;
        font-weight: 600;
        color: #1d4ed8;
        margin-top: 12px;
    }
    .tw-fav-cta svg { width: 16px; height: 16px; transition: transform 0.22s ease; }
    .tw-fav-card:hover .tw-fav-cta svg { transform: translateX(5px); }
    .tw-fav-card-remove {
        position: absolute;
        top: 14px; right: 14px;
        background: rgba(255,255,255,0.5);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: none;
        cursor: pointer;
        color: #64748b;
        font-size: 1.15rem;
        line-height: 1;
        width: 28px; height: 28px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, color 0.15s ease;
        z-index: 2;
        padding: 0;
    }
    .tw-fav-card-remove:hover {
        background: rgba(255,255,255,0.9);
        color: #0f172a;
    }
    .tw-fav-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 14px 0 6px;
        color: #94a3b8;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.04em;
    }
    .tw-fav-divider::before,
    .tw-fav-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #dbe4ed;
    }
    /* Dusk/Night Mountain-Tönung */
    .tw-fav-card.is-night .tw-fav-mountains,
    .tw-fav-card.is-dusk  .tw-fav-mountains { color: #ffffff; }
    .tw-fav-card.is-night .tw-fav-ridge-back { opacity: 0.05; }
    .tw-fav-card.is-night .tw-fav-ridge-front { opacity: 0.11; }
    .tw-fav-card.is-dawn  .tw-fav-ridge-back  { opacity: 0.10; }
    .tw-fav-card.is-dawn  .tw-fav-ridge-front { opacity: 0.16; }
    .tw-fav-card.is-night .tw-fav-label,
    .tw-fav-card.is-dusk  .tw-fav-label { color: #fbbf24; opacity: 1; }
    .tw-fav-card.is-night .tw-fav-label svg,
    .tw-fav-card.is-dusk  .tw-fav-label svg { fill: #fbbf24; }
    .tw-fav-card.is-night .tw-fav-place,
    .tw-fav-card.is-dusk  .tw-fav-place { color: #f1f5f9; }
    .tw-fav-card.is-night .tw-fav-live-temp,
    .tw-fav-card.is-dusk  .tw-fav-live-temp { color: #f1f5f9; }
    .tw-fav-card.is-night .tw-fav-live-temp small { color: #cbd5e1; opacity: 0.9; }
    /* Dusk Caption: helle Off-Weiß, voll deckend — slate-300+opacity war auf
       den warmen Top-Bereichen des Dusk-Gradients (orange-rosa) zu blass. */
    .tw-fav-card.is-dusk  .tw-fav-live-temp small { color: #f1f5f9; opacity: 1; }
    .tw-fav-card.is-night .tw-fav-cta { color: #93c5fd; }
    /* Dusk (Abend): alle Wetter weiß — warmer Orange→Lila→Dunkel-Gradient
       macht Blau überall schwer lesbar.
       Dawn (Morgen): alle Wetter weiß außer Schneefall — bei Schneefall
       ist der Hintergrund am CTA-Punkt heller Pastell (#d4dfeb), da bleibt
       das Default-Dunkelblau besser lesbar. */
    .tw-fav-card.is-dusk .tw-fav-cta,
    .tw-fav-card.is-dawn .tw-fav-cta { color: #ffffff; }
    .tw-fav-card.is-dawn.tw-fav-w-snow .tw-fav-cta { color: #1d4ed8; }
    .tw-fav-card.is-night .tw-fav-card-remove,
    .tw-fav-card.is-dusk  .tw-fav-card-remove {
        background: rgba(255,255,255,0.08);
        color: #cbd5e1;
    }
    .tw-fav-card.is-night .tw-fav-card-remove:hover,
    .tw-fav-card.is-dusk  .tw-fav-card-remove:hover {
        background: rgba(255,255,255,0.2);
        color: #f1f5f9;
    }
    /* Stars-Container auch bei Dusk leicht sichtbar */
    .tw-fav-card.is-dusk .tw-fav-stars { opacity: 0.55; }
    .tw-fav-stars {
        position: absolute; inset: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 0;
    }
    .tw-fav-card.is-night .tw-fav-stars { opacity: 1; }
    .tw-fav-stars span {
        position: absolute;
        width: 2px; height: 2px;
        background: #f8fafc;
        border-radius: 50%;
        opacity: 0.7;
        box-shadow: 0 0 3px rgba(255,255,255,0.6);
        animation: tw-fav-twinkle 4s ease-in-out infinite;
    }
    .tw-fav-stars span.s2 { width: 1.5px; height: 1.5px; opacity: 0.5; animation-duration: 5s; animation-delay: -1s; }
    .tw-fav-stars span.s3 { width: 2.5px; height: 2.5px; opacity: 0.85; box-shadow: 0 0 5px rgba(255,255,255,0.85); animation-duration: 3.4s; animation-delay: -2s; }
    @keyframes tw-fav-twinkle {
        0%, 100% { opacity: var(--star-opacity, 0.7); }
        50%      { opacity: 0.15; }
    }


    /* ══ FAVORITEN-KARTE: WETTER-SZENEN ══ */
    .tw-fav-sun, .tw-fav-moon {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }
    .tw-fav-sun {
        top: 26px; right: 8%;
        width: 56px; height: 56px;
        background: radial-gradient(circle at 35% 35%, #fff7d6 0%, #fcd34d 38%, #f59e0b 70%, transparent 78%);
        box-shadow: 0 0 32px 10px rgba(251,191,36,0.40);
        animation: tw-fav-sun-pulse 4.2s ease-in-out infinite;
    }
    .tw-fav-sun::before {
        content:''; position:absolute; inset:-60%;
        background: radial-gradient(circle, rgba(252,211,77,0.30) 0%, rgba(252,211,77,0.10) 35%, transparent 65%);
        border-radius:50%; z-index:-1;
        animation: tw-fav-sun-halo 4.2s ease-in-out infinite;
    }
    @keyframes tw-fav-sun-pulse {
        0%, 100% { box-shadow: 0 0 28px 9px rgba(251,191,36,0.38);  transform: scale(1); }
        50%      { box-shadow: 0 0 56px 22px rgba(251,191,36,0.72); transform: scale(1.06); }
    }
    @keyframes tw-fav-sun-halo {
        0%, 100% { transform: scale(1);    opacity: 0.7; }
        50%      { transform: scale(1.30); opacity: 1;   }
    }
    /* Sonne wärmer + tiefer bei Dawn/Dusk */
    .tw-fav-card.is-dawn .tw-fav-sun {
        background: radial-gradient(circle at 35% 35%, #fff1d4 0%, #fbbf24 35%, #ea580c 68%, transparent 78%);
        box-shadow: 0 0 36px 14px rgba(234,88,12,0.40);
        top: 36px;
    }
    .tw-fav-card.is-dusk .tw-fav-sun {
        background: radial-gradient(circle at 35% 35%, #ffe0b3 0%, #f59e0b 35%, #b91c1c 68%, transparent 78%);
        box-shadow: 0 0 38px 16px rgba(220,38,38,0.40);
        top: 38px;
    }
    .tw-fav-moon {
        top: 26px; right: 8%;
        width: 48px; height: 48px;
        background: radial-gradient(circle at 38% 36%, #fafbfc 0%, #e2e8f0 60%, transparent 80%);
        box-shadow: 0 0 28px 8px rgba(248,250,252,0.28);
        animation: tw-fav-moon-glow 5.2s ease-in-out infinite;
    }
    @keyframes tw-fav-moon-glow {
        0%, 100% { box-shadow: 0 0 24px 7px rgba(248,250,252,0.24);  transform: scale(1) translateY(0); }
        50%      { box-shadow: 0 0 46px 16px rgba(248,250,252,0.58); transform: scale(1.05) translateY(-1px); }
    }
    /* Sichel-Schatten kappt das Disc */
    .tw-fav-moon::after {
        content:''; position:absolute; top:-2px; right:-6px;
        width: 92%; height: 100%;
        border-radius:50%;
        background: radial-gradient(circle at 60% 50%, rgba(10,23,53,0.95) 50%, transparent 70%);
        opacity: 0.6;
    }
    .tw-fav-sun.behind,
    .tw-fav-moon.behind { right: 16%; top: 26px; width: 42px; height: 42px; opacity: 0.95; }
    .tw-fav-cloud {
        position: absolute;
        pointer-events: none;
        animation: tw-fav-cloud-drift 9s ease-in-out infinite;
        /* will-change: transform; -- deaktiviert fuer P30-Pro Render-Test (Compositing), 24.07. */
    }
    .tw-fav-cloud svg { display: block; width: 100%; height: 100%; overflow: visible; }
    /* Zwei-Schicht-Cloud: cf-top (oben heller) + cf-bot (unten dunkler) für plastisches Shading */
    .tw-fav-cloud .cf-top { fill: #ffffff; }
    .tw-fav-cloud .cf-bot { fill: #d4dbe5; }
    .tw-fav-cloud.cloud-grey .cf-top { fill: #c5cfdc; }
    .tw-fav-cloud.cloud-grey .cf-bot { fill: #8a96a8; }
    .tw-fav-cloud.cloud-dark .cf-top { fill: #6b7a90; }
    .tw-fav-cloud.cloud-dark .cf-bot { fill: #3a4458; }
    .tw-fav-card.is-night .tw-fav-cloud .cf-top { fill: #c8d3e0; opacity: 0.95; }
    .tw-fav-card.is-night .tw-fav-cloud .cf-bot { fill: #5a6a82; opacity: 0.95; }
    .tw-fav-card.is-dusk  .tw-fav-cloud .cf-top { fill: #d4c2b8; }
    .tw-fav-card.is-dusk  .tw-fav-cloud .cf-bot { fill: #6a4a5a; }
    .tw-fav-card.is-dawn  .tw-fav-cloud .cf-top { fill: #fff5ec; }
    .tw-fav-card.is-dawn  .tw-fav-cloud .cf-bot { fill: #d4a99c; }
    @keyframes tw-fav-cloud-drift {
        0%, 100% { transform: translateX(0); }
        50%      { transform: translateX(22px); }
    }
    .tw-fav-cloud.cloud-2 { animation-duration: 11s; animation-delay: -2s; }
    .tw-fav-cloud.cloud-3 { animation-duration: 10s; animation-delay: -4s; }
    .tw-fav-cloud.cloud-big { animation-duration: 13s; }
    .tw-fav-cloud.cloud-storm { animation-duration: 15s; }
    .tw-fav-cloud.cloud-1   { top: 22px; right: 14%; width: 140px; height: 48px; z-index: 2; }
    .tw-fav-cloud.cloud-2   { top: 36px; right: 28%; width: 64px;  height: 22px; z-index: 2; }
    .tw-fav-cloud.cloud-3   { top: 44px; right: 22%; width: 130px; height: 48px; z-index: 2; }
    .tw-fav-cloud.cloud-big { top: 26px; right: 8%;  width: 220px; height: 60px; z-index: 2; }
    .tw-fav-cloud.cloud-storm { top: 22px; right: 8%; width: 240px; height: 68px; z-index: 2; }
    /* Teils bewölkt: Sonne lugt deutlich an Wolke vorbei statt komplett dahinter */
    .tw-fav-card.tw-fav-w-partlycloudy .tw-fav-sun.behind,
    .tw-fav-card.tw-fav-w-partlycloudy .tw-fav-moon.behind {
        top: 22px; right: 8%; width: 50px; height: 50px; z-index: 1;
    }
    .tw-fav-card.tw-fav-w-partlycloudy .tw-fav-cloud.cloud-1 {
        top: 44px; right: 10%; width: 135px; height: 48px; z-index: 2;
    }
    /* Heiter (fair): Sonne/Mond gross + EINE kleine Schleierwolke (tiefer, kleiner, transparent) */
    .tw-fav-card.tw-fav-w-fair .tw-fav-cloud.cloud-2 {
        top: 70px; right: 22%;
        width: 62px; height: 22px; opacity: 0.78; z-index: 1;
    }
    /* Snowcap (für is-frozen Berg-Variante) — Punkte direkt am Gipfel */
    .tw-fav-snowcap { fill:#ffffff; opacity:0; transition:opacity .3s ease; }
    .tw-fav-card.tw-fav-w-snow .tw-fav-snowcap { opacity: 0.85; }
    /* Wind-Schlieren — horizontale Linien, skalieren mit Wind-Stärke
       (Höhe + Background-Opazität pro Stufe). Erst ab Live-Böen > 0 km/h.
       z-index: 1 — Wolken (z-index 2) und CTA überdecken Schlieren automatisch,
       damit Wind nirgendwo durch Symbole/Buttons schimmert.
       Desktop: untere 45 % (Wind weht über die Bergsilhouette / Hangzone). */
    .tw-fav-wind { position: absolute; inset: 55% 0 0 0; pointer-events: none; overflow: hidden; z-index: 1; }
    .tw-fav-wind span {
        position: absolute; height: 1.5px;
        background: linear-gradient(to right, transparent, rgba(60, 90, 130, 0.55), transparent);
        border-radius: 2px;
        animation: tw-fav-wind-blow 3.4s linear infinite;
        opacity: 0;
    }
    /* Dünnere & blassere Schlieren bei sehr leichtem Wind (Stufe 1–2) */
    .tw-fav-wind span.wl-1 { height: 0.6px; }
    .tw-fav-wind span.wl-2 { height: 0.9px; }
    .tw-fav-wind span.wl-3 { height: 1.1px; }
    .tw-fav-card.is-day  .tw-fav-wind span.wl-1,
    .tw-fav-card.is-dawn .tw-fav-wind span.wl-1 { background: linear-gradient(to right, transparent, rgba(45, 70, 105, 0.30), transparent); }
    .tw-fav-card.is-day  .tw-fav-wind span.wl-2,
    .tw-fav-card.is-dawn .tw-fav-wind span.wl-2 { background: linear-gradient(to right, transparent, rgba(45, 70, 105, 0.42), transparent); }
    .tw-fav-card.is-night .tw-fav-wind span.wl-1,
    .tw-fav-card.is-dusk  .tw-fav-wind span.wl-1 { background: linear-gradient(to right, transparent, rgba(220,235,255,0.30), transparent); }
    .tw-fav-card.is-night .tw-fav-wind span.wl-2,
    .tw-fav-card.is-dusk  .tw-fav-wind span.wl-2 { background: linear-gradient(to right, transparent, rgba(220,235,255,0.42), transparent); }
    /* Hellere Hintergründe (Day/Dawn) → dunklere Schlieren */
    .tw-fav-card.is-day  .tw-fav-wind span,
    .tw-fav-card.is-dawn .tw-fav-wind span {
        background: linear-gradient(to right, transparent, rgba(45, 70, 105, 0.6), transparent);
    }
    /* Dunkle Hintergründe (Night/Dusk) → helle Schlieren */
    .tw-fav-card.is-night .tw-fav-wind span,
    .tw-fav-card.is-dusk  .tw-fav-wind span {
        background: linear-gradient(to right, transparent, rgba(220,235,255,0.6), transparent);
    }
    @keyframes tw-fav-wind-blow {
        /* Asymmetrische Opazität: links subtil aber sichtbar, mittig halbe
           Stärke, rechts voll, dann Schnell-Fade. Sodass auch bei einer
           einzelnen Schliere (Stufe 1) durchgehend etwas zu sehen ist. */
        0%   { transform: translateX(-200px); opacity: 0; }
        15%  { opacity: 0.30; }
        50%  { opacity: 0.55; }
        82%  { opacity: 0.92; }
        92%  { opacity: 1; }
        100% { transform: translateX(120vw); opacity: 0; }
    }
    /* Nebel als 3 driftende Bänder mit Blur statt einfaches Gradient */
    .tw-fav-fog { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
    .tw-fav-fog span {
        position: absolute; left: 0; right: 0; height: 28px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.55) 30%, rgba(255,255,255,0.55) 70%, transparent);
        border-radius: 50%;
        filter: blur(8px);
        animation: tw-fav-fog-band 9s ease-in-out infinite;
    }
    .tw-fav-fog span:nth-child(1) { top: 38%; animation-duration: 11s; }
    .tw-fav-fog span:nth-child(2) { top: 55%; animation-duration: 14s; animation-delay: -3s; height: 32px; opacity: 0.85; }
    .tw-fav-fog span:nth-child(3) { top: 72%; animation-duration: 9s;  animation-delay: -6s; height: 22px; opacity: 0.7; }
    @keyframes tw-fav-fog-band {
        0%, 100% { transform: translateX(-45px); opacity: 0.45; }
        50%      { transform: translateX(45px);  opacity: 1;    }
    }
    .tw-fav-card.is-night .tw-fav-fog span,
    .tw-fav-card.is-dusk  .tw-fav-fog span {
        /* Hellere Nebel-Bänder auf dunklem Nacht-Himmel — vorher 0.40 war kaum sichtbar */
        background: linear-gradient(to right, transparent, rgba(215,225,240,0.70) 30%, rgba(215,225,240,0.70) 70%, transparent);
    }
    /* Blitz + Vollbild-Flash bei Gewitter */
    .tw-fav-lightning {
        position: absolute;
        top: 56px; right: 20%;
        width: 24px; height: 50px;
        pointer-events: none;
        animation: tw-fav-lightning-flash 4.2s ease-in-out infinite;
        filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.7));
        z-index: 2;
    }
    .tw-fav-lightning svg { display: block; width: 100%; height: 100%; }
    .tw-fav-flash {
        position: absolute; inset: 0;
        background: rgba(255,255,255,0.0);
        pointer-events: none; z-index: 4;
        animation: tw-fav-screen-flash 4.2s ease-in-out infinite;
    }
    @keyframes tw-fav-lightning-flash {
        0%, 60%, 100% { opacity: 0; }
        62%, 65%      { opacity: 1; }
        68%           { opacity: 0.4; }
        71%           { opacity: 1; }
        74%           { opacity: 0; }
        84%, 87%      { opacity: 0.9; }
        90%           { opacity: 0; }
    }
    @keyframes tw-fav-screen-flash {
        0%, 60%, 100% { background: rgba(255,255,255,0); }
        62%           { background: rgba(255,255,255,0.55); }
        66%           { background: rgba(255,255,255,0); }
        84%           { background: rgba(255,255,255,0.35); }
        88%           { background: rgba(255,255,255,0); }
    }
    /* Schnee-Akkumulation am Boden — leicht (is-snowy ≥ 0 °C) oder voll (is-frozen < 0 °C) */
    .tw-fav-card.is-snowy  .tw-fav-mountains { color: #ffffff; }
    .tw-fav-card.is-snowy  .tw-fav-ridge-back  { opacity: 0.28; }
    .tw-fav-card.is-snowy  .tw-fav-ridge-front { opacity: 0.55; }
    .tw-fav-card.is-frozen .tw-fav-mountains { color: #ffffff; }
    .tw-fav-card.is-frozen .tw-fav-ridge-back  { opacity: 0.45; }
    .tw-fav-card.is-frozen .tw-fav-ridge-front { opacity: 0.95; }
    /* is-frozen TAG → dunkle Schrift (Schneefläche unten ist hell) */
    .tw-fav-card.is-frozen.is-day  .tw-fav-place,
    .tw-fav-card.is-frozen.is-dawn .tw-fav-place,
    .tw-fav-card.is-frozen.is-day  .tw-fav-live-temp,
    .tw-fav-card.is-frozen.is-dawn .tw-fav-live-temp { color: #0f172a; }
    .tw-fav-card.is-frozen.is-day  .tw-fav-live-temp small,
    .tw-fav-card.is-frozen.is-dawn .tw-fav-live-temp small { color: #334155; }
    /* is-frozen NACHT/DUSK → CTA dunkel mit weißem Halo (steht auf Schneefläche) */
    .tw-fav-card.is-frozen.is-night .tw-fav-live-temp small,
    .tw-fav-card.is-frozen.is-dusk  .tw-fav-live-temp small {
        color: #0f172a; opacity: 1;
        text-shadow:
            0 0 6px rgba(255,255,255,0.95),
            0 0 3px rgba(255,255,255,1),
            0 1px 0 rgba(255,255,255,0.9),
            0 0 12px rgba(255,255,255,0.6);
    }
    .tw-fav-card.is-frozen .tw-fav-cta { color: #1d4ed8; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
    .tw-fav-card.is-frozen .tw-fav-cta:hover { color: #1e40af; }
    .tw-fav-card.is-frozen.is-day  .tw-fav-label,
    .tw-fav-card.is-frozen.is-dawn .tw-fav-label { color: #b45309; }
    .tw-fav-card.is-frozen.is-day  .tw-fav-label svg,
    .tw-fav-card.is-frozen.is-dawn .tw-fav-label svg { fill: #b45309; }
    .tw-fav-card.is-snowy.is-night .tw-fav-cta { color: #1d4ed8; text-shadow: 0 1px 0 rgba(255,255,255,0.35); }
    .tw-fav-precip { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
    /* precip-mountain: Niederschlag nur über der Bergsilhouette (untere Hälfte) */
    .tw-fav-precip.precip-mountain { inset: 55% 0 0 0; }
    .tw-fav-precip span { position: absolute; top: -10px; opacity: 0; }
    /* Regen schräg fallend, mit Tiefenlayer (drop.back) für Parallaxe */
    .tw-fav-precip .drop {
        width: 3px; height: 15px;
        background: rgba(37, 99, 235, 0.9);
        border-radius: 2px;
        animation: tw-fav-precip-fall 1.5s linear infinite;
    }
    .tw-fav-precip .drop.light { width: 2.6px; height: 12px; background: rgba(37, 99, 235, 0.82); }
    .tw-fav-precip .drop.heavy { width: 4px;   height: 20px; background: rgba(37, 99, 235, 1);   }
    .tw-fav-precip .drop.back  { width: 2px;   height: 10px; background: rgba(37, 99, 235, 0.55); }
    /* 6-Punkt-Schneeflocken als inline-SVG via Data-URI.
       stroke-width 1.4 (war 1) macht die Sterne erkennbar dicker; Größen
       angehoben damit auch leichter Schneefall sichtbar bleibt. */
    .tw-fav-precip .flake {
        width: 9px; height: 9px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'><g stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' fill='none'><line x1='-4' y1='0' x2='4' y2='0'/><line x1='-4' y1='0' x2='4' y2='0' transform='rotate(60)'/><line x1='-4' y1='0' x2='4' y2='0' transform='rotate(120)'/></g></svg>");
        background-size: 100% 100%;
        animation: tw-fav-precip-snow 3s linear infinite;
    }
    .tw-fav-precip .flake.light { width: 6px;  height: 6px; opacity: 0.85; }
    .tw-fav-precip .flake.heavy { width: 12px; height: 12px; }
    .tw-fav-card.is-day  .tw-fav-precip .flake,
    .tw-fav-card.is-dawn .tw-fav-precip .flake {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'><g stroke='%23334155' stroke-width='1.4' stroke-linecap='round' fill='none'><line x1='-4' y1='0' x2='4' y2='0'/><line x1='-4' y1='0' x2='4' y2='0' transform='rotate(60)'/><line x1='-4' y1='0' x2='4' y2='0' transform='rotate(120)'/></g></svg>");
    }
    .tw-fav-card.is-night .tw-fav-precip .drop      { background: rgba(147, 197, 253, 0.85); }
    .tw-fav-card.is-night .tw-fav-precip .drop.light{ background: rgba(147, 197, 253, 0.75); }
    .tw-fav-card.is-night .tw-fav-precip .drop.heavy{ background: rgba(147, 197, 253, 0.95); }
    .tw-fav-card.is-night .tw-fav-precip .drop.back { background: rgba(147, 197, 253, 0.45); }
    @keyframes tw-fav-precip-fall {
        0%   { transform: translate(20px, -10px); opacity: 0; }
        10%  { opacity: 0.95; }
        90%  { opacity: 0.85; }
        100% { transform: translate(-26px, 240px); opacity: 0; }
    }
    @keyframes tw-fav-precip-snow {
        0%   { transform: translate(0, -8px) rotate(0deg); opacity: 0; }
        12%  { opacity: 0.95; }
        88%  { opacity: 0.85; }
        100% { transform: translate(8px, 240px) rotate(180deg); opacity: 0; }
    }

    /* Wetter-State-Gradients */
    .tw-fav-card.tw-fav-w-clearsky { background: linear-gradient(180deg, #a3c8e6 0%, #c8dcec 55%, #ffffff 100%); }
    .tw-fav-card.tw-fav-w-fair { background: linear-gradient(180deg, #b5d2e8 0%, #d4e0eb 60%, #ffffff 100%); }
    .tw-fav-card.tw-fav-w-partlycloudy { background: linear-gradient(180deg, #c2d2e2 0%, #dbe3ec 60%, #f5f7fa 100%); }
    .tw-fav-card.tw-fav-w-cloudy { background: linear-gradient(180deg, #aebbcc 0%, #ced8e3 60%, #ecf0f5 100%); }
    .tw-fav-card.tw-fav-w-fog { background: linear-gradient(180deg, #c0c8d2 0%, #dde2e8 50%, #ecf0f4 100%); }
    .tw-fav-card.tw-fav-w-rain { background: linear-gradient(180deg, #7e90a6 0%, #9aa9be 50%, #c0cad8 100%); }
    .tw-fav-card.tw-fav-w-rain .tw-fav-place,
    .tw-fav-card.tw-fav-w-rain .tw-fav-live-temp { color: #0f172a; }
    /* Caption „jetzt · Regen / Gewitter" auf grauem Niederschlags-Gradient
       weiß mit dunklem Halo, damit es auf dem grauen Hintergrund klar lesbar
       bleibt — slate-500 davor war praktisch unsichtbar. */
    .tw-fav-card.tw-fav-w-rain .tw-fav-live-temp small {
        color: #f8fafc;
        text-shadow: 0 1px 2px rgba(15,23,42,0.55), 0 0 4px rgba(15,23,42,0.35);
    }
    /* CTA „Wetter & Prognose ansehen" auf grauem Regen-/Gewitter-Gradient:
       dunkleres Navy für besseren Kontrast — kein Halo, der Effekt war
       optisch zu aufdringlich. */
    .tw-fav-card.tw-fav-w-rain .tw-fav-cta {
        color: #1e3a8a;
    }
    .tw-fav-card.tw-fav-w-snow { background: linear-gradient(180deg, #b8c4d4 0%, #d4dde8 60%, #f0f4f9 100%); }
    .tw-fav-card.tw-fav-w-thunder { background: linear-gradient(180deg, #6b7a90 0%, #8a98ad 50%, #b3bdcb 100%); }
    .tw-fav-card.tw-fav-w-thunder .tw-fav-place,
    .tw-fav-card.tw-fav-w-thunder .tw-fav-live-temp { color: #0f172a; }
    .tw-fav-card.tw-fav-w-thunder .tw-fav-live-temp small {
        color: #f8fafc;
        text-shadow: 0 1px 2px rgba(15,23,42,0.55), 0 0 4px rgba(15,23,42,0.35);
    }
    /* CTA-Lesbarkeit auch für Gewitter (selbe gray Gradient wie Regen) */
    .tw-fav-card.tw-fav-w-thunder .tw-fav-cta {
        color: #1e3a8a;
    }
    /* Tropfen heller bei Gewitter */
    .tw-fav-card.tw-fav-w-thunder .tw-fav-precip .drop { background: rgba(241, 245, 249, 0.85); height: 11px; }
    .tw-fav-card.is-night.tw-fav-w-thunder .tw-fav-precip .drop { background: rgba(186, 215, 247, 0.9); }

    /* Nacht-Overrides für Wetter-States */
    .tw-fav-card.is-night.tw-fav-w-clearsky,
    .tw-fav-card.is-night.tw-fav-w-fair,
    .tw-fav-card.is-night.tw-fav-w-partlycloudy {
        background: linear-gradient(180deg, #0a1735 0%, #1a2c54 55%, #2a4173 100%);
    }
    .tw-fav-card.is-night.tw-fav-w-cloudy { background: linear-gradient(180deg, #0a1735 0%, #1a2c54 55%, #2a4173 100%); }
    .tw-fav-card.is-night.tw-fav-w-fog { background: linear-gradient(180deg, #0e1e3d 0%, #1f3155 55%, #34466e 100%); }
    .tw-fav-card.is-night.tw-fav-w-fog .tw-fav-fog {
        background: linear-gradient(180deg, transparent 0%, rgba(170,190,220,0.32) 28%, rgba(170,190,220,0.42) 48%, rgba(170,190,220,0.28) 72%, transparent 100%);
    }
    .tw-fav-card.is-night.tw-fav-w-rain { background: linear-gradient(180deg, #0a1428 0%, #1f2c44 50%, #38485e 100%); }
    .tw-fav-card.is-night.tw-fav-w-snow { background: linear-gradient(180deg, #0e1c3a 0%, #1f3155 55%, #34466e 100%); }
    .tw-fav-card.is-night.tw-fav-w-thunder { background: linear-gradient(180deg, #060d1c 0%, #15203a 50%, #2c3a55 100%); }
    /* Einheitliche Wolkenfarbe für alle Nacht-Karten */
    .tw-fav-card.is-night .tw-fav-cloud .cf { fill: #c8d3e0; opacity: 0.95; }

    /* DUSK: bei ALLEN Wetter-States den warmen Dusk-Gradient erhalten (sonst
       überschreibt das Wetter-bg ihn mit hellblau/grau, was die helle
       Caption unlesbar macht). Spezifisch für clearsky/fair/partlycloudy +
       cloudy/fog/snow. Rain/Thunder behalten ihr graues bg, weil Caption
       dort separat mit Halo gefixt ist. */
    .tw-fav-card.is-dusk.tw-fav-w-clearsky,
    .tw-fav-card.is-dusk.tw-fav-w-fair,
    .tw-fav-card.is-dusk.tw-fav-w-partlycloudy,
    .tw-fav-card.is-dusk.tw-fav-w-cloudy,
    .tw-fav-card.is-dusk.tw-fav-w-fog,
    .tw-fav-card.is-dusk.tw-fav-w-snow {
        background: linear-gradient(180deg, #c45a3a 0%, #8a4a72 35%, #3d3d6b 70%, #1f2640 100%);
    }
    /* DAWN: gleiche Logik wie Dusk — der warme Dawn-Gradient (orange-rosa
       zu blau-grau) muss erhalten bleiben, sonst überschreibt clearsky/fair
       sofort mit hellblau und der Sonnenaufgang-Look ist nie zu sehen. */
    .tw-fav-card.is-dawn.tw-fav-w-clearsky,
    .tw-fav-card.is-dawn.tw-fav-w-fair,
    .tw-fav-card.is-dawn.tw-fav-w-partlycloudy,
    .tw-fav-card.is-dawn.tw-fav-w-cloudy,
    .tw-fav-card.is-dawn.tw-fav-w-fog,
    .tw-fav-card.is-dawn.tw-fav-w-snow {
        background: linear-gradient(180deg, #f4b283 0%, #e8a8b8 30%, #b6b9d4 60%, #d4dfeb 100%);
    }

    /* Einheitliche Schriftfarbe: Tag = sonnig amber, Nacht = regen blau */
    .tw-fav-card.tw-fav-card .tw-fav-label { color: #ea580c; opacity: 1; }
    .tw-fav-card.tw-fav-card .tw-fav-label svg { fill: #ea580c; }
    .tw-fav-card.tw-fav-card .tw-fav-cta { color: #1d4ed8; }
    .tw-fav-card.is-night.is-night .tw-fav-label { color: #93c5fd; opacity: 1; }
    .tw-fav-card.is-night.is-night .tw-fav-label svg { fill: #93c5fd; }
    .tw-fav-card.is-night.is-night .tw-fav-cta { color: #93c5fd; }
    .tw-fav-card.is-night.is-night .tw-fav-place,
    .tw-fav-card.is-night.is-night .tw-fav-live-temp { color: #f1f5f9; }
    .tw-fav-card.is-night.is-night .tw-fav-live-temp small { color: #cbd5e1; }
    /* Dusk/Dawn CTA-Override mit doppelter Klasse (Specificity) — sonst
       übersteuert die Default-Regel oben den dusk/dawn-Weiß-CTA. */
    .tw-fav-card.is-dusk.is-dusk .tw-fav-cta,
    .tw-fav-card.is-dawn.is-dawn .tw-fav-cta { color: #ffffff; }
    .tw-fav-card.is-dawn.is-dawn.tw-fav-w-snow .tw-fav-cta { color: #1d4ed8; }
    /* "jetzt · <Wetterzustand>"-Caption auf Dawn-Karten: dunkler — Default
       #64748b ist auf warmem Pastell-Gradient kaum lesbar.
       Ausnahme Regen/Gewitter: die haben einen grauen Hintergrund-Gradient
       mit eigenem weißem Caption-Text — :not() bewahrt das. */
    .tw-fav-card.is-dawn.is-dawn:not(.tw-fav-w-rain):not(.tw-fav-w-thunder) .tw-fav-live-temp small { color: #334155; }


    /* Desktop + Mobile = Alt-Layout (Spalte) */
    .tw-fav-place-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .tw-fav-live-temp {
        font-size: clamp(1.4rem, 3vw, 1.85rem);
        margin-top: 18px;
    }
    .tw-fav-live-temp small {
        margin-top: 6px;
    }
    @media (max-width: 600px) {
        /* Berge tiefer auf Mobil, damit Sonne/Wolken visuell darüber liegen */
        .tw-fav-mountains { height: 50%; }
        /* Mobile: Alt-Layout (Spalte), Symbole rechts neben Temp — bottom an Card-Bottom anchored.
           Symbole sitzen ~108–130px vom Card-Boden (Mitte zwischen Temp-Zeile und CTA),
           damit darunter noch Platz für Wind-Schlieren bleibt — und nicht wie vorher
           ganz unten direkt am CTA kleben. */
        .tw-fav-card .tw-fav-sun,
        .tw-fav-card .tw-fav-moon { top: auto; bottom: 108px; right: 28px; left: auto; }
        .tw-fav-card .tw-fav-cloud,
        .tw-fav-card .tw-fav-lightning { top: auto; bottom: 108px; right: 40px; left: auto; }

        .tw-fav-card .tw-fav-sun       { width: 40px; height: 40px; }
        .tw-fav-card .tw-fav-sun.behind,
        .tw-fav-card .tw-fav-moon.behind { width: 34px; height: 34px; bottom: 112px; right: 36px; }
        .tw-fav-card .tw-fav-moon      { width: 36px; height: 36px; }
        .tw-fav-card .tw-fav-cloud.cloud-1   { width: 95px;  height: 32px; }
        .tw-fav-card .tw-fav-cloud.cloud-2   { width: 50px;  height: 20px; right: 70px; }
        .tw-fav-card.tw-fav-w-fair .tw-fav-cloud.cloud-2 { top: auto; bottom: 108px; right: 14%; width: 52px; height: 18px; }
        .tw-fav-card .tw-fav-cloud.cloud-big { width: 95px;  height: 32px; }
        .tw-fav-card .tw-fav-cloud.cloud-storm { width: 105px; height: 36px; }
        .tw-fav-card .tw-fav-lightning { width: 16px; height: 32px; bottom: 124px; right: 96px; }
        /* Nebel auch auf Mobile sichtbar (vorher display:none — User hat
           Nachts-Nebel-Animation nicht gesehen). */
        .tw-fav-card .tw-fav-fog span { height: 20px; filter: blur(6px); }
        .tw-fav-card .tw-fav-fog span:nth-child(2) { height: 24px; }
        .tw-fav-card .tw-fav-fog span:nth-child(3) { height: 16px; }
        /* Mobile: Wind-Schlieren NUR in den unteren 15 % der Karte. z-index:1 sorgt
           dafür, dass Wolken (z:2) und CTA (z:1, später im DOM) Schlieren
           visuell überdecken — keine Kollision mit Symbolen oder Button. */
        .tw-fav-card .tw-fav-wind { inset: 85% 0 0 0; height: auto; }
        /* Mobile: alle Tropfen proportional kleiner als auf Desktop, damit
           sie die kleinere Karte nicht erschlagen. Verhältnis light → normal
           → heavy bleibt erhalten (light 1.8 → normal 2.2 → heavy 3.0). */
        .tw-fav-precip .drop       { width: 2.2px; height: 12px; }
        .tw-fav-precip .drop.light { width: 1.8px; height: 9px; }
        .tw-fav-precip .drop.heavy { width: 3.0px; height: 16px; }
        .tw-fav-precip .drop.back  { width: 1.5px; height: 8px; }
        /* Teils bewölkt auf Mobile: Sonne/Mond zur Animations-Zone — sonst landet
           sie wegen höherer Spezifität direkt neben dem X-Button. */
        .tw-fav-card.tw-fav-w-partlycloudy .tw-fav-sun.behind,
        .tw-fav-card.tw-fav-w-partlycloudy .tw-fav-moon.behind {
            top: auto; bottom: 116px; right: 56px;
            width: 40px; height: 40px;
        }
        .tw-fav-card.tw-fav-w-partlycloudy .tw-fav-cloud.cloud-1 {
            top: auto; bottom: 110px; right: 18px;
            width: 96px; height: 32px;
        }
    }

    /* ══ WARN-PILL (dezent, zwischen Header und Favoriten-Karte) ══ */
    #warning-banner { display: none; }
    #warning-banner.is-active { display: block; }
    .tw-warn-pill-wrap {
        display: flex;
        justify-content: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 10px 16px 0;
    }
    .tw-warn-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px 6px 12px;
        background: #fef3c7;
        border: 1px solid #fcd34d;
        color: #78350f;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: -0.005em;
        text-decoration: none;
        transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }
    .tw-warn-pill:hover {
        background: #fde68a;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(120, 53, 15, 0.12);
    }
    .tw-warn-pill .tw-warn-icon { font-size: 0.95em; line-height: 1; }
    .tw-warn-pill .tw-warn-arrow {
        width: 13px; height: 13px;
        opacity: 0.65;
        transition: transform 0.15s ease;
    }
    .tw-warn-pill:hover .tw-warn-arrow { transform: translateX(2px); opacity: 1; }
    .tw-warn-pill.is-warn { background: #ffedd5; border-color: #fb923c; color: #7c2d12; }
    .tw-warn-pill.is-warn:hover { background: #fdba74; }
    .tw-warn-pill.is-severe { background: #fee2e2; border-color: #f87171; color: #7f1d1d; }
    .tw-warn-pill.is-severe:hover { background: #fca5a5; }
    .tw-warn-pill.is-extreme { background: #f3e8ff; border-color: #c084fc; color: #581c87; }
    .tw-warn-pill.is-extreme:hover { background: #e9d5ff; }

    /* ══ QUICK ACTIONS ══ */
    .tw-quick-actions {
        display: flex; gap: 8px; margin-bottom: 14px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding: 2px 0;
    }
    .tw-quick-actions::-webkit-scrollbar { display: none; }
    /* Handy (12.9.2026): „Modelle“ nach Radar und vor Warnungen, damit die Kachel im Sichtbereich liegt; PC behält die DOM-Reihenfolge */
    @media (max-width: 767px) {
        .tw-quick-actions .tw-qa-item { order: 2; }
        .tw-quick-actions .tw-qa-item[href="/radar"] { order: 0; }
        .tw-quick-actions .tw-qa-item[href="/modelle"] { order: 1; }
    }
    .tw-qa-item {
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        min-width: 80px; padding: 12px 10px; background: #fff;
        border: 1.5px solid #e5e7eb; border-radius: 12px;
        text-decoration: none; color: #374151;
        font-size: 0.75rem; font-weight: 600; text-align: center;
        transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
        cursor: pointer; flex-shrink: 0;
    }
    .tw-qa-item:hover {
        border-color: #2563eb;
        box-shadow: 0 2px 8px rgba(37,99,235,0.12);
        transform: translateY(-1px);
    }
    .tw-qa-icon {
        width: 36px; height: 36px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
    }
    .tw-qa-icon svg { width: 20px; height: 20px; }
    .tw-qa-icon.radar { background: #dcfce7; color: #16a34a; }
    .tw-qa-icon.warn { background: #fef3c7; color: #ea580c; }
    .tw-qa-icon.gewitter { background: #fef9c3; color: #eab308; }
    .tw-qa-icon.webcam { background: #e0e7ff; color: #4f46e5; }
    .tw-qa-icon.mess { background: #fce7f3; color: #db2777; }
    .tw-qa-icon.modelle { background: #f3e8ff; color: #7c3aed; }
    .tw-qa-icon.sat { background: #dbeafe; color: #2563eb; }
    .tw-qa-icon.inca { background: #ccfbf1; color: #0d9488; }
    .tw-qa-icon.klima { background: #e0f2fe; color: #0369a1; }
    .tw-qa-icon.wissen { background: #fff7ed; color: #ea580c; }
    .tw-slider-wrap { position: relative; }
    .tw-slider-fade-right {
        position: absolute; right: 0; top: 0; bottom: 8px; width: 40px;
        background: linear-gradient(90deg, transparent, #f0f4f8);
        pointer-events: none;
    }

    /* ══ NEWS HORIZONTAL SLIDER ══ */
    .tw-news-slider {
        display: flex; gap: 14px; overflow-x: auto;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        padding: 4px 2px 8px; scroll-snap-type: x mandatory;
    }
    .tw-news-slider::-webkit-scrollbar { display: none; }
    .tw-news-card {
        flex-shrink: 0; width: 280px; background: #fff;
        border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
        overflow: hidden; text-decoration: none; color: inherit;
        transition: box-shadow 0.2s, transform 0.15s; scroll-snap-align: start;
    }
    .tw-news-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.04); transform: translateY(-2px); }
    .tw-news-card-img {
        width: 100%; height: 150px;
        display: flex; align-items: center; justify-content: center;
        font-size: 2rem; position: relative; overflow: hidden;
    }
    .tw-news-card-img img { width: 100%; height: 100%; object-fit: cover; }
    .tw-news-badge {
        position: absolute; top: 8px; left: 8px;
        background: #dc2626; color: #fff;
        font-size: 0.65rem; font-weight: 700; padding: 2px 8px;
        border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em;
    }
    .tw-news-card-body { padding: 14px; }
    .tw-news-date { font-size: 0.78rem; color: #9ca3af; margin-bottom: 4px; }
    .tw-news-title {
        font-size: 0.92rem; font-weight: 700; color: #1f2937;
        line-height: 1.35; display: -webkit-box;
        -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .tw-news-scroll-hint {
        text-align: center; font-size: 0.78rem; color: #9ca3af; margin-top: 4px;
    }
    @media (min-width: 768px) {
        .tw-news-card { width: 300px; }
        .tw-news-scroll-hint { display: none; }
    }

    /* ══ ENTDECKE MEHR ══ */
    @media (max-width: 820px) { .mobile-only-tile { display: flex !important; } }
    .tw-discover {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px;
    }
    .tw-discover-item {
        display: flex; align-items: center; gap: 12px; padding: 14px;
        background: #fff; border-radius: 0.75rem;
        border: 1.5px solid #e5e7eb; text-decoration: none;
        color: #374151; font-weight: 600; font-size: 0.85rem;
        transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    }
    .tw-discover-item:hover {
        border-color: #2563eb; box-shadow: 0 2px 8px rgba(37,99,235,0.1);
        transform: translateY(-1px);
    }
    .tw-discover-icon {
        width: 38px; height: 38px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .tw-discover-icon svg { width: 20px; height: 20px; }
    .tw-discover-icon.blue { background: #dbeafe; color: #2563eb; }
    .tw-discover-icon.green { background: #dcfce7; color: #16a34a; }
    .tw-discover-icon.purple { background: #f3e8ff; color: #7c3aed; }
    .tw-discover-icon.pink { background: #fce7f3; color: #db2777; }
    .tw-discover-icon.orange { background: #fff7ed; color: #ea580c; }
    .tw-discover-icon.teal { background: #ccfbf1; color: #0d9488; }
    .tw-discover-icon.indigo { background: #e0e7ff; color: #4f46e5; }
    @media (max-width: 600px) {
        .tw-discover { grid-template-columns: repeat(2, 1fr); }
    }

    /* ══ STICKY MOBILE BOTTOM NAV ══ */
    .tw-mobile-nav {
        display: none; position: fixed; bottom: 0; left: 0; right: 0;
        background: #fff; border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.06); z-index: 200;
        padding: 6px 0 env(safe-area-inset-bottom, 6px);
    }
    .tw-mobile-nav-inner {
        display: flex; justify-content: space-around; align-items: center;
        max-width: 500px; margin: 0 auto;
    }
    .tw-mobile-nav a {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        text-decoration: none; color: #9ca3af;
        font-size: 0.65rem; font-weight: 600; padding: 4px 12px; border-radius: 8px;
        transition: color 0.15s;
    }
    .tw-mobile-nav a.active { color: #2563eb; }
    .tw-mobile-nav a:hover { color: #2563eb; }
    .tw-mobile-nav a svg { width: 22px; height: 22px; }
    @media (max-width: 900px) {
        .tw-mobile-nav { display: block; }
        body { padding-bottom: 72px; }
    }