/* Wetter Heute widget (.lnw*) - the "today's weather" band on the news
   front page, now live for every locale the generator builds (see
   WEATHER_WIDGET_LANGS in scripts/build-news-page.js - it reuses
   AVAILABLE_LANGS there directly, so this list and the widget's locale
   gate can never drift apart).
   External on purpose, not inlined into <head> or build-news-page.js's
   own template: this site's CSP is style-src 'self' with no
   unsafe-inline (see _headers) - an inline <style> block would be
   silently dropped in production. The markup this styles also has zero
   style="" attributes anywhere, including its own per-element animation
   timings (data-d/data-du attributes, applied through the CSSOM by the
   widget's own script - see scripts/lib/weather-widget-fragment.html) -
   this file is genuinely all the styling there is, nothing rides in via
   markup CSP would strip.

   max-width below is var(--container, 1100px) - css/styles.css's own
   :root token (currently 1120px) when it's there, the kit's own 1100px
   as a real fallback if it's ever dropped on some other page that
   lacks that token. The kit now ships this exact fallback pattern
   itself, so - unlike the first drop - this file needed NO substitution
   this round; it's a byte-for-byte copy of the v3 kit's own CSS,
   including the new .lnw-summary/.lnw-toggle collapsed-strip rules
   below (the news page's default state: one slim strip, expanding to
   the full scene - see build-news-page.js's own comment for why this
   file stays a straight copy target on every future update, unlike
   scripts/lib/weather-widget-fragment.html, which still needs its two
   locale-specific substitutions re-applied each time). */
.lnw{--lnw-ink:#1B2A4A;--lnw-navy:#1B3A5C;--lnw-ochre:#EB984E;--lnw-terra:#CA6F1E;--lnw-pill:#B4611A;
     --lnw-cream:#FBF9F5;margin:26px auto 30px;max-width:var(--container, 1100px);padding:0 20px}
.lnw *{box-sizing:border-box}

.lnw-window{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:1fr auto;
  min-height:360px;border-radius:22px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(27,58,92,.34);
  box-shadow:0 24px 56px -22px rgba(27,42,74,.5),
             inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 0 0 6px rgba(255,255,255,.10);
}
@media(min-width:820px){.lnw-window{grid-template-columns:minmax(360px,45%) 1fr;min-height:430px}}

/* what's outside */
.lnw-sky{position:absolute;inset:0;z-index:0;background:#C3D4E1}
.lnw-sky svg{width:100%;height:100%;display:block}

/* the pane itself — one sheen across the whole window, not the panel */
.lnw-window::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(114deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 26%,
             rgba(255,255,255,0) 47%,rgba(255,255,255,.07) 78%,rgba(255,255,255,0) 100%);
}

/* the frosted half */
.lnw-glass{
  position:relative;z-index:2;grid-row:1;align-self:end;
  padding:24px 26px 20px;color:var(--lnw-ink);
  background:
    linear-gradient(158deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.03) 38%,
                    rgba(255,255,255,.10) 100%),
    rgba(250,247,242,.28);
  backdrop-filter:blur(34px) saturate(1.95) brightness(1.05);
  -webkit-backdrop-filter:blur(34px) saturate(1.95) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 1px 0 0 rgba(255,255,255,.34),
    inset -1px 0 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(27,42,74,.10);
}
/* the material's own tooth — stops the blur banding that reads as "filter" */
.lnw-glass::before,.lnw-parts::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
@media(min-width:820px){
  .lnw-glass{grid-column:1;grid-row:1;align-self:stretch;display:flex;flex-direction:column;
             justify-content:center;padding:32px 34px 28px}
}
/* Rain and storm skies are dark even in daylight, and navy body text on thin
   glass over them was hard to read. Brightening the backdrop keeps the glass
   see-through — thickening the tint would not. */
.lnw-window.is-heavy .lnw-glass,
.lnw-window.is-heavy .lnw-parts{
  backdrop-filter:blur(34px) saturate(1.7) brightness(1.42);
  -webkit-backdrop-filter:blur(34px) saturate(1.7) brightness(1.42);
  background:
    linear-gradient(158deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.04) 40%,
                    rgba(255,255,255,.12) 100%),
    rgba(250,247,242,.34);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lnw-glass,.lnw-parts{background:rgba(251,249,245,.94)}
}
.lnw-window.is-night .lnw-glass,
.lnw-window.is-night .lnw-parts{
  background:
    linear-gradient(158deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.02) 40%,
                    rgba(255,255,255,.06) 100%),
    rgba(14,26,40,.28);
  color:#F4F0E8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.22);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lnw-window.is-night .lnw-glass,
  .lnw-window.is-night .lnw-parts{background:rgba(17,29,43,.92)}
}

.lnw-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
          flex-wrap:wrap;margin-bottom:12px}
.lnw-kicker{font:700 10.5px/1 "Source Sans 3",system-ui,sans-serif;letter-spacing:.16em;
            text-transform:uppercase;color:var(--lnw-terra)}
.lnw-window.is-night .lnw-kicker{color:var(--lnw-ochre)}
.lnw-place{font:400 12px/1 "Source Sans 3",system-ui,sans-serif;letter-spacing:.05em;
           opacity:.72}
.lnw-temp{font:400 46px/.95 Newsreader,Georgia,serif;letter-spacing:-.02em;
          font-variant-numeric:tabular-nums;margin-bottom:10px}
.lnw-temp sup{font-size:18px;vertical-align:top;position:relative;top:.35em;opacity:.7}

.lnw-sentence{font:400 19px/2.05 Newsreader,Georgia,serif;margin:0 0 4px;max-width:46ch}
@media(max-width:520px){.lnw-sentence{font-size:17px;line-height:2.05}}
ruby.lnw-g{ruby-position:over;ruby-align:center;white-space:nowrap}
ruby.lnw-g > .w,span.lnw-g > .w{
  background:rgba(255,255,255,.94);
  border:1.5px solid var(--lnw-ochre);
  border-radius:6px;padding:0 6px 1px;
  color:#1B3A5C;font-weight:600;
  box-shadow:0 1px 2px rgba(27,42,74,.10);
}
ruby.lnw-g rt{
  font:700 10px/1.35 "Source Sans 3",system-ui,sans-serif;
  background:none;padding:0 0 2px;
  text-align:center;ruby-align:center;white-space:nowrap;
}
ruby.lnw-g rt > i{
  display:inline-block;font-style:normal;
  background:var(--lnw-pill);color:#FFFFFF;
  border-radius:5px;padding:1px 7px 2px;
  box-shadow:0 1px 2px rgba(27,42,74,.18);
}
/* Safari still ships the old ruby box model; keep the two apart there too */
@supports not (ruby-align:center){ruby.lnw-g rt{font-size:10px;padding-bottom:3px}}
/* the gloss needs no night variant — it is legible on any ground */

.lnw-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lnw-stat{display:flex;align-items:baseline;gap:5px;padding:5px 11px 5px 10px;
  border-radius:999px;background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.55);
  font:400 13px/1.3 "Source Sans 3",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.lnw-window.is-night .lnw-stat{background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18)}
.lnw-stat span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;opacity:.68}

.lnw-parts{
  position:relative;z-index:2;grid-row:2;grid-column:1/-1;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:
    linear-gradient(158deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.03) 40%,
                    rgba(255,255,255,.10) 100%),
    rgba(250,247,242,.34);
  backdrop-filter:blur(34px) saturate(1.95) brightness(1.05);
  -webkit-backdrop-filter:blur(34px) saturate(1.95) brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 2px 0 rgba(27,42,74,.10);
  color:var(--lnw-ink);
}
@media(max-width:560px){.lnw-parts{grid-template-columns:repeat(2,1fr)}}
.lnw-part{display:flex;align-items:center;gap:12px;padding:17px 18px;
  border-left:1px solid rgba(27,42,74,.20);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.50)}
.lnw-part:first-child{border-left:0}
@media(max-width:560px){
  .lnw-part:nth-child(3){border-left:0;box-shadow:none}
  .lnw-part:nth-child(n+3){border-top:1px solid rgba(27,42,74,.20)}
}
.lnw-window.is-night .lnw-part{border-color:rgba(0,0,0,.34);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.16)}
@media(max-width:560px){.lnw-window.is-night .lnw-part:nth-child(3){box-shadow:none}}
.lnw-part svg{flex:none;opacity:.92}
.lnw-part-t{display:flex;flex-direction:column;min-width:0}
.lnw-part-t b{font:600 14px/1.3 "Source Sans 3",system-ui,sans-serif;letter-spacing:.005em}
.lnw-part-t span{font:400 11.5px/1.35 "Source Sans 3",system-ui,sans-serif;opacity:.7;
  font-variant-numeric:tabular-nums}
.lnw-part em{margin-left:auto;font:400 27px/1 Newsreader,Georgia,serif;font-style:normal;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.lnw-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:18px;padding-top:12px;
  border-top:1px solid rgba(27,42,74,.14)}
.lnw-window.is-night .lnw-foot{border-color:rgba(255,255,255,.16)}
.lnw-attr{font:400 9.5px/1.4 "Source Sans 3",system-ui,sans-serif;letter-spacing:.04em;opacity:.6}
.lnw-cta{font:700 12.5px/1 "Source Sans 3",system-ui,sans-serif;color:#25190B;
  background:var(--lnw-ochre);padding:9px 18px;border-radius:999px;text-decoration:none;
  white-space:nowrap}
.lnw-cta:hover{background:#E08A3C}
.lnw-cta:focus-visible{outline:2px solid var(--lnw-navy);outline-offset:2px}

/* motion */
@keyframes lnw-drift{from{transform:translateX(-13px)}to{transform:translateX(13px)}}
@keyframes lnw-spin{to{transform:rotate(360deg)}}
@keyframes lnw-fall{0%{transform:translateY(0);opacity:0}12%{opacity:.95}
                    100%{transform:translateY(78px);opacity:0}}
@keyframes lnw-flutter{0%{transform:translate(-3px,0);opacity:0}10%{opacity:1}
                       100%{transform:translate(11px,86px);opacity:0}}
@keyframes lnw-twinkle{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes lnw-hail{0%{transform:translateY(0);opacity:0}10%{opacity:1}
                    100%{transform:translateY(96px);opacity:0}}
@keyframes lnw-gust{0%{transform:translateX(0);opacity:0}16%{opacity:1}
                    84%{opacity:1}100%{transform:translateX(300px);opacity:0}}
@keyframes lnw-leaf{0%{transform:translate(0,0) rotate(0deg);opacity:0}
                    14%{opacity:.92}84%{opacity:.92}
                    100%{transform:translate(330px,-34px) rotate(760deg);opacity:0}}
@keyframes lnw-flash{0%,90%{opacity:0}91%{opacity:1}93%{opacity:0}94.5%{opacity:1}97%{opacity:0}}
.lnw .cf{animation:lnw-drift 27s ease-in-out infinite alternate}
.lnw .cn{animation:lnw-drift 18s ease-in-out infinite alternate-reverse}
.lnw .fg{animation:lnw-drift 15s ease-in-out infinite alternate}
.lnw .ry{transform-box:fill-box;transform-origin:center;animation:lnw-spin 95s linear infinite}
.lnw .dp{animation:lnw-fall 1.35s linear infinite}
.lnw .fl{animation:lnw-flutter 5.4s linear infinite}
.lnw .st{animation:lnw-twinkle 3.6s ease-in-out infinite}
.lnw .bo{animation:lnw-flash 4.4s steps(1) infinite}
.lnw .hl{animation:lnw-hail .85s linear infinite}
.lnw .gu{animation:lnw-gust 3.2s linear infinite}
.lnw .lf{animation:lnw-leaf 3.4s linear infinite}
@media(prefers-reduced-motion:reduce){
  .lnw .cf,.lnw .cn,.lnw .fg,.lnw .ry,.lnw .dp,.lnw .fl,.lnw .st,.lnw .bo,
  .lnw .hl,.lnw .gu,.lnw .lf{animation:none}
}
.lnw[hidden]{display:none}

/* set from markup as a class, since CSP blocks style="" attributes */
.lnw .lnw-mul{mix-blend-mode:multiply}

/* ---------------------------------------------------------------- collapsed
   Default state on the news page: one slim strip of sky with the essentials.
   Expanding reveals the full scene, the glossed sentence and the day parts.
   The choice is remembered per visitor in localStorage. */
.lnw-window.is-collapsed{min-height:0;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto}
.lnw-window.is-collapsed .lnw-glass,
.lnw-window.is-collapsed .lnw-parts{display:none}
.lnw-window:not(.is-collapsed) .lnw-summary{display:none}

.lnw-summary{
  position:relative;z-index:2;grid-row:1;grid-column:1/-1;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:13px 18px;color:var(--lnw-ink);
  background:
    linear-gradient(158deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.03) 40%,
                    rgba(255,255,255,.11) 100%),
    rgba(250,247,242,.40);
  backdrop-filter:blur(30px) saturate(1.9) brightness(1.10);
  -webkit-backdrop-filter:blur(30px) saturate(1.9) brightness(1.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.lnw-window.is-night .lnw-summary{
  background:
    linear-gradient(158deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.02) 40%,
                    rgba(255,255,255,.06) 100%),
    rgba(14,26,40,.44);
  color:#F4F0E8;box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lnw-summary{background:rgba(251,249,245,.94)}
  .lnw-window.is-night .lnw-summary{background:rgba(17,29,43,.92)}
}
.lnw-summary svg{flex:none;opacity:.95}
.lnw-sum-place{display:flex;flex-direction:column;min-width:0}
.lnw-sum-place b{font:700 9.5px/1.3 "Source Sans 3",system-ui,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;color:var(--lnw-terra)}
.lnw-window.is-night .lnw-sum-place b{color:var(--lnw-ochre)}
.lnw-sum-place span{font:400 12px/1.35 "Source Sans 3",system-ui,sans-serif;opacity:.75;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnw-sum-now{display:flex;align-items:baseline;gap:9px}
.lnw-sum-now em{font:400 27px/1 Newsreader,Georgia,serif;font-style:normal;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.lnw-sum-now i{font:400 17px/1 Newsreader,Georgia,serif;font-style:italic}
.lnw-sum-parts{display:flex;gap:15px;margin-left:auto;
  font:400 12.5px/1.3 "Source Sans 3",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.lnw-sum-parts span{white-space:nowrap;opacity:.8}
.lnw-sum-parts span b{font-weight:600;opacity:1}
@media(max-width:760px){.lnw-sum-parts{display:none}}

.lnw-toggle{
  margin-left:auto;display:flex;align-items:center;gap:6px;cursor:pointer;
  font:600 12px/1 "Source Sans 3",system-ui,sans-serif;color:var(--lnw-ink);
  background:rgba(255,255,255,.55);border:1px solid rgba(27,42,74,.16);
  border-radius:999px;padding:7px 13px;white-space:nowrap;
}
.lnw-sum-parts + .lnw-toggle{margin-left:0}
.lnw-window.is-night .lnw-toggle{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);color:#F4F0E8}
.lnw-toggle:hover{background:rgba(255,255,255,.8)}
.lnw-window.is-night .lnw-toggle:hover{background:rgba(255,255,255,.2)}
.lnw-toggle:focus-visible{outline:2px solid var(--lnw-ochre);outline-offset:2px}
.lnw-toggle svg{transition:transform .18s ease}
.lnw-window:not(.is-collapsed) .lnw-toggle svg{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.lnw-toggle svg{transition:none}}

/* the collapse control while expanded sits in the glass panel header */
.lnw-head .lnw-toggle{margin-left:auto;padding:5px 11px;font-size:11.5px}

/* ---------------------------------------------------------------- mobile
   Under 820px the window is one column and the glass panel filled it, sitting
   on top of the scene - so on a phone the picture was never seen, only its
   blur. The scene now gets its own row above the panel: the whole 640x280
   picture, nothing cropped. The panel and the day-parts sit on a plain ground
   the colour of that scene's sky. */
@media(max-width:819px){
   .lnw-window:not(.is-collapsed){grid-template-rows:auto auto auto;min-height:0;background:#E9E5DC}
   .lnw-window:not(.is-collapsed) .lnw-sky{position:relative;inset:auto;grid-row:1;grid-column:1/-1;background:#E9E5DC}
   .lnw-window:not(.is-collapsed) .lnw-sky svg{width:100%;height:auto;aspect-ratio:640/280}
   .lnw-window:not(.is-collapsed) .lnw-glass{grid-row:2;align-self:auto}
   .lnw-window:not(.is-collapsed) .lnw-parts{grid-row:3}
   .lnw-window.is-heavy:not(.is-collapsed),
   .lnw-window.is-heavy:not(.is-collapsed) .lnw-sky{background:#CDD3D3}
   .lnw-window.is-night:not(.is-collapsed),
   .lnw-window.is-night:not(.is-collapsed) .lnw-sky{background:#0E2138}
   .lnw-window.is-night.is-heavy:not(.is-collapsed),
   .lnw-window.is-night.is-heavy:not(.is-collapsed) .lnw-sky{background:#1B2733}
}