.sw-live{width:100%;margin:0 0 16px;overflow:hidden;border-radius:6px;background:#fff;color:#26363c;font:62.5% 'Open Sans',Verdana,Arial,Helvetica,sans-serif;line-height:1.45;box-sizing:border-box}
.sw-live *{box-sizing:border-box}.sw-live [hidden]{display:none!important}
.sw-live .sw-scene{position:relative;aspect-ratio:853/480;background:#dce5e9;overflow:hidden}
.sw-live canvas{display:block;width:100%;height:100%;pointer-events:none}
.sw-live .sw-placeholder{position:absolute;bottom:16px;left:16px;right:16px;color:#344850;font-size:14px}
.sw-live .sw-summary{position:absolute;top:18px;left:18px;max-width:calc(100% - 36px);padding:12px 18px;border-radius:8px;background:rgba(20,36,48,.70);color:#fff;text-shadow:0 1px 2px #000}
.sw-live h2{color:inherit;font-size:24px;line-height:1.2;margin:0 0 6px}.sw-live p{margin:5px 0}
.sw-live .sw-temperature{display:flex;align-items:center;gap:20px}.sw-live .sw-temperature>strong{font-size:32px}.sw-live .sw-temperature>span{font-size:12px}
.sw-live .sw-details{padding:12px 16px}.sw-live .sw-details a{color:#185c69;text-decoration:underline}
.sw-live .sw-status{font-size:12px;color:#607680}.sw-live .sw-windsack{width:38px;height:38px;object-fit:contain;position:absolute;right:-48px;top:8px}


/* Short teaser inside the landscape; status remains accessible to screen readers. */
.sw-live .sw-teaser{position:absolute;bottom:0;left:0;right:0;padding:12px 16px;background:rgba(20,36,48,.72);color:#fff;text-shadow:0 1px 2px #000;font-size:16px;line-height:1.4}
.sw-live .sw-teaser:empty{display:none}
.sw-live .sw-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* Shared subtle surface for both weather text areas, including mobile. */
.sw-live .sw-summary,.sw-live .sw-teaser{background:rgba(35,48,58,.38);color:#fff;text-shadow:none}
/* Override the existing Contao heading decoration only inside this summary. */
.sw-live .sw-summary h2{background:transparent!important;color:inherit!important;text-shadow:none;padding:0;border:0;border-radius:0;box-shadow:none;text-align:left}

/* Typography from the supplied previous weather display. */
.sw-live .sw-summary,.sw-live .sw-teaser{font-family:inherit;color:#f2f4f5;text-shadow:0 1px 1px rgba(0,0,0,.55)}
.sw-live .sw-summary h2{font-family:inherit;font-size:32px;font-weight:400;line-height:1.15;text-shadow:inherit;margin:0 0 6px}
.sw-live .sw-summary>p{font-size:16px;line-height:1.25;font-weight:400;margin:5px 0}
.sw-live .sw-temperature{gap:20px;flex-wrap:nowrap}
.sw-live .sw-temperature>strong{font-size:32px;line-height:1.2;font-weight:400}
.sw-live .sw-temperature>span{font-size:12px;white-space:nowrap}
.sw-live .sw-temperature b{font-weight:400}
.sw-live .sw-teaser{font-size:14px;font-weight:400}

/* Explicit rows instead of a line break that site CSS may suppress. */
.sw-live .sw-temperature>.sw-extremes{display:flex!important;flex-direction:column!important;align-items:stretch;gap:0;line-height:1.45}
.sw-live .sw-extremes>.sw-extreme{display:block!important;float:none!important;position:static;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}

/* Trial: teaser text directly on the landscape, without a background. */
.sw-live .sw-teaser{background:transparent}

/* Background follows the teaser text instead of spanning the scene. */
.sw-live .sw-teaser{left:16px;right:auto;bottom:10px;width:fit-content;max-width:calc(100% - 32px);padding:5px 9px;border-radius:4px;background:rgba(115,128,137,.60)}


/* Warning cards: no station wind measurements in this rail. */
.sw-live .sw-warning-rail{position:absolute;z-index:2;top:18px;right:16px;width:188px;max-height:calc(100% - 90px);display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding:2px 3px 5px;scrollbar-width:thin}
.sw-live .sw-warning{display:flex;align-items:center;flex:none;gap:8px;min-height:60px;padding:9px;border-radius:9px;background:#d9e1e5;color:#172d3b!important;text-decoration:none!important;text-shadow:none;font:14px/1.25 'Open Sans',Verdana,Arial,sans-serif;box-shadow:0 2px 5px #0003;border:1px solid #0001}
.sw-live .sw-warning:focus-visible{outline:3px solid #fff;outline-offset:-4px}.sw-live .sw-warning:hover{filter:brightness(1.015)}
.sw-live .sw-warning svg{width:28px;height:28px;flex:none}.sw-live .sw-warning-copy{min-width:0;flex:1;overflow-wrap:anywhere}.sw-live .sw-warning-copy strong{display:block;font-size:15px;font-weight:700}.sw-live .sw-warning-copy>span{display:block;margin-top:2px}.sw-live .sw-warning-arrow{font-size:24px;flex:none}
.sw-live .sw-warning--level-1{background:#ffeb3b}.sw-live .sw-warning--level-2{background:#ffab28}.sw-live .sw-warning--level-3{background:#d92e36;color:#fff!important}.sw-live .sw-warning--level-4{background:#970050;color:#fff!important}
.sw-live .sw-warning--heat{background:#c9f}.sw-live .sw-warning--heat-extreme{background:#8150a5;color:#fff!important}.sw-live .sw-warning--uv{background:#f5b5da}
.sw-live .sw-warning--preliminary{background:repeating-linear-gradient(135deg,#d6e0e7 0,#d6e0e7 7px,#b9c8d3 7px,#b9c8d3 10px)}


.sw-live .sw-warning--preliminary .sw-warning-copy strong{font-size:12px;white-space:nowrap}


/* Separate clock panel above the unchanged weather panel. */
.sw-live .sw-info-stack{position:absolute;top:18px;left:18px;max-width:calc(100% - 36px);display:flex;flex-direction:column;align-items:stretch;gap:8px}
.sw-live .sw-info-stack .sw-summary{position:relative;top:auto;left:auto;max-width:none}
.sw-live .sw-clock{display:flex;flex-direction:column;gap:2px;padding:10px 18px;border-radius:8px;background:rgba(35,48,58,.38);color:#f2f4f5;text-shadow:0 1px 1px rgba(0,0,0,.55);font-family:inherit;line-height:1.35}
.sw-live .sw-clock [data-field="display-date"]{font-size:16px}
.sw-live .sw-clock [data-field="display-time"]{font-size:24px;font-variant-numeric:tabular-nums}


/* Station windsock centered below the temperature, within the summary panel. */
.sw-live .sw-wind-panel{display:flex;justify-content:center;align-items:center;height:72px;margin-top:8px;border-top:1px solid rgba(255,255,255,.18)}
.sw-live .sw-summary .sw-windsack{display:block;position:static;inset:auto;width:56px;height:auto;max-width:none;max-height:none;object-fit:contain;transform-origin:50% 50%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}

/* Direction remains fixed on the outer element; the fabric flutters inside. */
.sw-live .sw-wind-panel{gap:14px;justify-content:flex-start;height:76px}
.sw-live .sw-windsack-stage{display:flex;align-items:center;justify-content:center;width:72px;height:72px;flex:none}
.sw-live .sw-windsack-rotator{display:block;width:56px;line-height:0;transform-origin:50% 50%}
.sw-live .sw-summary .sw-windsack{transform-origin:12% 50%;animation:sw-windsock-flutter 1.3s ease-in-out infinite}
.sw-live .sw-wind-direction{display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.3}.sw-live .sw-wind-direction strong{font-size:20px;font-weight:400}
@keyframes sw-windsock-flutter{0%,100%{transform:rotate(calc(-1 * var(--sw-flutter-angle,0deg))) scaleY(var(--sw-flutter-squash,1))}35%{transform:rotate(var(--sw-flutter-angle,0deg)) scaleY(var(--sw-flutter-stretch,1))}70%{transform:rotate(calc(-.5 * var(--sw-flutter-angle,0deg))) scaleY(1)}}
@media(prefers-reduced-motion:reduce){.sw-live .sw-summary .sw-windsack{animation:none}}

/* Wind gets its own panel below the weather summary. */
.sw-live .sw-info-stack>.sw-wind-panel{height:auto;min-height:86px;margin:0;padding:7px 18px;border:0;border-radius:8px;background:rgba(35,48,58,.38);color:#f2f4f5;text-shadow:0 1px 1px rgba(0,0,0,.55)}
.sw-live .sw-wind-panel .sw-windsack{display:block;position:static;inset:auto;width:56px;height:auto;max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));transform-origin:12% 50%;animation:sw-windsock-flutter 1.3s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.sw-live .sw-wind-panel .sw-windsack{animation:none}}


/* High-resolution windsock, descriptive heading and aligned direction row. */
.sw-live .sw-info-stack>.sw-wind-panel{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:11px 18px 5px}
.sw-live .sw-wind-description{font-size:14px;line-height:1.3;font-weight:400;max-width:210px}
.sw-live .sw-wind-body{display:flex;align-items:center;gap:12px;min-height:88px}
.sw-live .sw-windsack-stage{width:88px;height:88px}
.sw-live .sw-windsack-rotator,.sw-live .sw-wind-panel .sw-windsack{width:72px}
.sw-live .sw-wind-panel .sw-windsack{filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.sw-live .sw-wind-direction{min-width:48px}.sw-live .sw-wind-direction strong{font-size:22px}
/* Horizontaler Windsack mit festem Mast und dreizeiligem Text rechts. */
.sw-live .sw-info-stack>.sw-wind-panel{padding:10px 16px}
.sw-live .sw-wind-body{gap:12px;min-height:78px}
.sw-live .sw-windsack-stage{position:relative;width:82px;height:76px;align-items:flex-start;padding-top:10px;box-sizing:border-box}
.sw-live .sw-windsack-stage::before{content:"";position:absolute;left:9px;top:8px;bottom:3px;width:3px;border-radius:2px;background:linear-gradient(90deg,#65747e,#edf2f5,#77858e);box-shadow:1px 1px 2px #0004}
.sw-live .sw-windsack-rotator{position:relative;margin-left:8px;transform:none}
.sw-live .sw-wind-direction{gap:2px;font-size:16px;max-width:108px}
.sw-live .sw-wind-description{font-size:14px;line-height:1.2}
.sw-live .sw-wind-direction strong{font-size:20px;margin-top:2px}
/* Gemeinsame Grafik: Mast bleibt fest, der Stoff flattert rechts davon. */
.sw-live .sw-windsack-stage{width:82px;height:64px;padding:0;align-items:center}
.sw-live .sw-windsack-stage::before{inset:0;width:82px;height:64px;border-radius:0;box-shadow:none;background:url('../assets/ui/windsack-mast.png') center/82px auto no-repeat;clip-path:inset(0 78% 0 0)}
.sw-live .sw-windsack-rotator{width:82px;margin:0}
.sw-live .sw-wind-panel .sw-windsack{width:82px;clip-path:inset(0 0 0 22%);transform-origin:22% 36%;filter:none}
.sw-live .sw-wind-direction strong{font-size:16px;white-space:nowrap}

/* Einheitliche Schrift und Zeilenabstände im Windtext. */
.sw-live .sw-wind-direction{font-size:12px;line-height:1.3;gap:2px}
.sw-live .sw-wind-direction>span,.sw-live .sw-wind-direction>strong{font-size:inherit;line-height:inherit;font-weight:400;margin:0}

/* Sichtbare Bewegung am Ende, Befestigung am linken Rand bleibt ruhig. */
.sw-live .sw-wind-panel .sw-windsack{animation-name:sw-windsock-tip;transform-origin:22% 36%}
@keyframes sw-windsock-tip{
 0%,100%{transform:scaleX(var(--sw-flutter-squash,1)) skewX(calc(-1 * var(--sw-flutter-angle,0deg))) skewY(calc(-.2 * var(--sw-flutter-angle,0deg)))}
 28%{transform:scaleX(var(--sw-flutter-stretch,1)) skewX(var(--sw-flutter-angle,0deg)) skewY(calc(.2 * var(--sw-flutter-angle,0deg)))}
 52%{transform:scaleX(var(--sw-flutter-squash,1)) skewX(calc(-.65 * var(--sw-flutter-angle,0deg)))}
 76%{transform:scaleX(1) skewX(calc(.45 * var(--sw-flutter-angle,0deg))) skewY(calc(-.1 * var(--sw-flutter-angle,0deg)))}
}

/* Gemeinsame Innenabstände der drei Informationsfenster. */
.sw-live .sw-info-stack>.sw-clock,.sw-live .sw-info-stack>.sw-summary,.sw-live .sw-info-stack>.sw-wind-panel{padding:10px 18px}
.sw-live .sw-info-stack>.sw-wind-panel,.sw-live .sw-wind-body{min-height:0}


/* Optischer Abstandsausgleich der dritten Windtextzeile. */
.sw-live .sw-wind-direction>[data-field="wind-direction"]{position:relative;top:-2px}

/* Grafikfehler getrennt vom Teaser anzeigen; kein sichtbarer Ladehinweis. */
.sw-live .sw-placeholder{top:50%;bottom:auto;transform:translateY(-50%);text-align:center}


/* Kompakte mobile Wetterkarte: Datumzeile, Wetter und Wind nebeneinander. */


/* Kleines Wasserzeichen während die Landschaftsbilder geladen werden. */
.sw-live .sw-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:#dce5e9;color:#6d8999}
.sw-live .sw-loading svg{display:block;width:72px;height:72px;opacity:.3;transform-origin:50% 50%;animation:sw-loading-spin 8s linear infinite}
@keyframes sw-loading-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sw-live .sw-loading svg{animation:none;opacity:.3}}


/* Warnkarten entsprechen auf Desktop der Breite der linken Fenster. */
.sw-live .sw-warning-rail{width:var(--sw-info-width,188px);padding:0;right:18px}
.sw-live .sw-warning svg{width:36px;height:36px}
.sw-live .sw-warning-type{font-weight:700}


/* Kompakte Zeitangabe und dezenter Klickhinweis. Rand für die Skalierung. */
.sw-live .sw-warning-validity{font-size:11px;line-height:1.35}
.sw-live .sw-warning{cursor:pointer;transition:transform .18s ease,filter .18s ease;transform-origin:center}
.sw-live .sw-warning-rail{width:calc(var(--sw-info-width,188px) + 8px);padding:4px;right:14px;top:14px}
@media(hover:hover) and (pointer:fine){.sw-live .sw-warning:hover{transform:scale(1.025);filter:brightness(1.015)}}
.sw-live .sw-warning:focus-visible{transform:scale(1.025)}

@media(prefers-reduced-motion:reduce){.sw-live .sw-warning{transition:none}.sw-live .sw-warning:hover,.sw-live .sw-warning:focus-visible{transform:none}}

/* Überschrift und Warntyp gleich groß. */
.sw-live .sw-warning-copy .sw-warning-type{font-size:15px;font-weight:700}


/* Einheitlich 14px für Warnung und Warntyp, auch mobil. */
.sw-live .sw-warning-copy>strong,.sw-live .sw-warning-copy>.sw-warning-type{font-size:14px}

/* Mobile Einbindung in das vorhandene Contao-Design (#db5e11 / #fff). */


/* Mobile Außenabstände wie zwischen den übrigen Contao-Boxen. */


/* Desktop-Versuch: Teaser oben zwischen Infofenstern und Warnkarten. */
@media all{
 .sw-live .sw-teaser{top:18px;bottom:auto;left:calc(36px + var(--sw-info-width,196px));right:18px;width:auto;max-width:none;padding:10px 18px;border-radius:8px;background:rgba(35,48,58,.38);overflow-wrap:anywhere}
 .sw-live .sw-scene:has(>.sw-warning-rail:not([hidden]))>.sw-teaser{right:calc(36px + var(--sw-info-width,196px))}
}

/* Lightbox: laufende Wetteransicht ohne übrige Seiteninhalte. */
.sw-live .sw-expand{position:absolute;right:18px;bottom:18px;z-index:3;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border:1px solid #ffffff50;border-radius:8px;background:rgba(35,48,58,.38);color:#f2f4f5;cursor:pointer;box-shadow:none}
.sw-live .sw-expand svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sw-live .sw-expand-close{display:none}
.sw-live.sw-expanded .sw-expand-open{display:none}
.sw-live.sw-expanded .sw-expand-close{display:block}
.sw-live .sw-expand:hover{background:rgba(35,48,58,.65)}
.sw-live .sw-expand:focus-visible{outline:2px solid white;outline-offset:3px}
.sw-lightbox{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px;box-sizing:border-box;border:0;background:#111;color:#fff;overflow:auto}
.sw-lightbox[open]{display:flex;align-items:center;justify-content:center}
.sw-lightbox::backdrop{background:#111}
.sw-lightbox .sw-live{flex:none;width:min(1100px,calc(100vw - 48px),calc((100vh - 48px) * 853 / 480));width:min(1100px,calc(100vw - 48px),calc((100dvh - 48px) * 853 / 480));margin:0;border-radius:0}
@media(max-width:600px){
 .sw-live .sw-expand{grid-column:1/-1;grid-row:2;bottom:32px}
 .sw-lightbox[open]{align-items:flex-start}
 .sw-lightbox .sw-live{width:100%;max-width:100%;margin:auto 0}
}

/* Gebürsteter Edelstahlrahmen ausschließlich in der Großansicht. */
.sw-lightbox .sw-live{
 border:12px solid transparent;border-radius:22px;overflow:hidden;
 background:
  linear-gradient(#202326,#202326) padding-box,
  repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0px,rgba(255,255,255,.12) .5px,rgba(40,44,48,.07) 1px,transparent 2px,transparent 3px) border-box,
  radial-gradient(ellipse 35% 42% at top left,rgba(255,255,255,.6),transparent 100%) border-box,
  radial-gradient(ellipse 35% 42% at top right,rgba(255,255,255,.45),transparent 100%) border-box,
  radial-gradient(ellipse 35% 42% at bottom left,rgba(255,255,255,.45),transparent 100%) border-box,
  radial-gradient(ellipse 35% 42% at bottom right,rgba(255,255,255,.6),transparent 100%) border-box,
  linear-gradient(135deg,#aeb4b7 0%,#d4d8da 16%,#8c959a 34%,#bcc2c5 50%,#879195 66%,#d4d8da 84%,#aeb4b7 100%) border-box;
 box-shadow:0 6px 18px rgba(0,0,0,.35),0 24px 65px rgba(0,0,0,.65);
}
.sw-lightbox .sw-live .sw-scene{border-radius:10px}

/* Mobil: Bild antippen und die Großansicht als Landschaft darstellen. */
@media(max-width:600px),(pointer:coarse){.sw-live canvas{pointer-events:auto;cursor:zoom-in}.sw-expanded canvas{cursor:default}}
@media(max-width:600px){
 .sw-lightbox[open]{align-items:center;overflow:hidden}
 .sw-lightbox .sw-live{margin:0;max-width:none;transform-origin:center}
 .sw-lightbox .sw-live .sw-scene{display:block;aspect-ratio:853/480;overflow:hidden;background:#dce5e9}
 .sw-lightbox .sw-scene::before{display:none}
 .sw-lightbox .sw-live canvas{width:100%;height:100%;margin:0}
 .sw-lightbox .sw-info-stack{display:flex;position:absolute;top:12px;left:12px;margin:0;padding:0;max-width:150px;gap:6px}
 .sw-lightbox .sw-info-stack>.sw-clock,.sw-lightbox .sw-info-stack>.sw-summary,.sw-lightbox .sw-info-stack>.sw-wind-panel{position:relative;inset:auto;margin:0;padding:7px 10px;border:0;border-radius:8px;background:rgba(35,48,58,.38);color:#f2f4f5;text-shadow:0 1px 1px #0008}
 .sw-lightbox .sw-info-stack>.sw-clock{flex-direction:column;align-items:flex-start;gap:0}
 .sw-lightbox .sw-clock [data-field="display-date"]{font-size:11px}
 .sw-lightbox .sw-clock [data-field="display-time"]{font-size:18px}
 .sw-lightbox .sw-summary h2{font-size:22px}
 .sw-lightbox .sw-summary>p{font-size:12px}
 .sw-lightbox .sw-temperature{gap:8px}
 .sw-lightbox .sw-temperature>strong{font-size:24px}
 .sw-lightbox .sw-temperature>span{font-size:10px}
 .sw-lightbox .sw-wind-body{flex-direction:row;gap:4px}
 .sw-lightbox .sw-wind-direction{align-items:flex-start;text-align:left;font-size:10px}
 .sw-lightbox .sw-warning-rail{position:absolute;inset:8px 8px auto auto;width:158px;max-height:calc(100% - 60px);overflow-y:auto;margin:0;padding:4px;background:transparent;gap:6px}
 .sw-lightbox .sw-warning{padding:7px;min-height:52px}
 .sw-lightbox .sw-warning svg{width:26px;height:26px}
 .sw-lightbox .sw-teaser{position:absolute;top:12px;bottom:auto;left:calc(24px + var(--sw-info-width,150px));right:12px;width:auto;max-width:none;margin:0;padding:8px 10px;border:0;border-radius:8px;background:rgba(35,48,58,.38);color:#f2f4f5;text-shadow:0 1px 1px #0008;font-size:12px}
 .sw-lightbox .sw-scene:has(>.sw-warning-rail:not([hidden]))>.sw-teaser{right:174px}
 .sw-lightbox .sw-live .sw-expand{position:absolute;inset:auto 12px 12px auto;grid-area:auto;width:32px;height:32px;padding:6px}
 .sw-lightbox .sw-loading{position:absolute;inset:0;aspect-ratio:auto;margin:0}
 .sw-lightbox .sw-placeholder{position:absolute;inset:50% 12px auto;margin:0;transform:translateY(-50%)}
}
@media(max-width:600px) and (orientation:portrait){
 .sw-lightbox .sw-live{width:min(1100px,calc(100vh - 48px),calc((100vw - 72px)*853/480 + 24px));width:min(1100px,calc(100dvh - 48px),calc((100vw - 72px)*853/480 + 24px));transform:rotate(90deg)}
}
@media(max-width:600px) and (orientation:landscape){
 .sw-lightbox .sw-live{width:min(1100px,calc(100vw - 48px),calc((100dvh - 72px)*853/480 + 24px))}
}

/* Mobil dieselbe Komposition wie bei 940px Desktopbreite, proportional skaliert. */
@media(max-width:600px){
 .sw-live:not(.sw-expanded){position:relative;aspect-ratio:853/480;margin-bottom:14px;overflow:hidden;border-radius:6px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .sw-live:not(.sw-expanded) .sw-scene{position:absolute;inset:0;width:940px;height:calc(940px * 480 / 853);aspect-ratio:853/480;transform:scale(var(--sw-mobile-scale, .34));transform-origin:top left}
 .sw-live:not(.sw-expanded) .sw-expand{display:none}
 /* Etwas größere Schrift innerhalb der proportional verkleinerten Ansicht. */
 .sw-live:not(.sw-expanded) .sw-clock [data-field="display-date"]{font-size:19px}
 .sw-live:not(.sw-expanded) .sw-clock [data-field="display-time"]{font-size:29px}
 .sw-live:not(.sw-expanded) .sw-summary h2,.sw-live:not(.sw-expanded) .sw-temperature>strong{font-size:38px}
 .sw-live:not(.sw-expanded) .sw-summary>p{font-size:19px}
 .sw-live:not(.sw-expanded) .sw-temperature>span,.sw-live:not(.sw-expanded) .sw-wind-direction{font-size:15px}
 /* Skalierung ausgleichen: auf dem Handy bleiben tatsächlich 13px sichtbar. */
 .sw-live:not(.sw-expanded) .sw-teaser{font-size:calc(13px / var(--sw-mobile-scale, .34));line-height:1.35}
 .sw-live:not(.sw-expanded) .sw-warning-copy>strong,.sw-live:not(.sw-expanded) .sw-warning-copy>.sw-warning-type{font-size:17px}
 .sw-live:not(.sw-expanded) .sw-warning-validity{font-size:13px}
}

/* Mehr Platz für die Windbezeichnung; gleiche Innenabstände wie Datum/Wetter. */
.sw-live .sw-info-stack>.sw-wind-panel{contain:inline-size}
.sw-live .sw-wind-body{gap:6px}
.sw-live .sw-wind-direction{flex:1;min-width:0;max-width:none;gap:2px}
.sw-live .sw-wind-description{max-width:none;overflow-wrap:normal}
.sw-live .sw-wind-direction>[data-field="wind-direction"]{top:0}
.sw-live .sw-windsack-stage,.sw-live .sw-windsack-rotator,.sw-live .sw-wind-panel .sw-windsack{width:66px}
.sw-live .sw-windsack-stage,.sw-live .sw-windsack-stage::before{height:48px}
.sw-live .sw-windsack-stage::before{width:66px;background-size:66px auto}
@media(max-width:600px){
 .sw-lightbox .sw-windsack-stage,.sw-lightbox .sw-windsack-rotator,.sw-lightbox .sw-wind-panel .sw-windsack{width:53px}
 .sw-lightbox .sw-windsack-stage,.sw-lightbox .sw-windsack-stage::before{height:40px}
 .sw-lightbox .sw-windsack-stage::before{width:53px;background-size:53px auto}
}