/* Kiel-Wetter-Widget — Komponenten-CSS (Shortcode ww_kiel_weather).
   Site-spezifische Overrides (Section-Padding, Theme-Eigenheiten) gehoeren
   NICHT hierher, sondern ins Customizer-CSS der jeweiligen Site.
   Design-Stand: Claude-Design-Projekt "WetterWelt Website", 2026-07-11;
   seit 2026-08-18: CI-Blau (#004f7d) statt Nacht-Navy, weisse/dunkelblaue Akzente */
.wk-sec{
  background:#02537f;
  border-top:2px solid #f8ad00;
  background-image:
    radial-gradient(120% 90% at 88% -10%, rgba(248,173,0,0.12), transparent 55%),
    linear-gradient(180deg, #013a5e, rgba(2,83,127,0) 50%),
    linear-gradient(rgba(242,246,250,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,246,250,0.03) 1px, transparent 1px);
  background-size:auto, auto, 56px 56px, 56px 56px;
}

.wk-widget{
  --wk-ink:#F2F6FA;
  --wk-dim:rgba(242,246,250,0.72);
  --wk-faint:rgba(242,246,250,0.46);
  --wk-line:rgba(242,246,250,0.16);
  --wk-gold-ink:#a37200;
  --wk-panel:rgba(242,246,250,0.035);
  --wk-gold:#f8ad00;
  display:block;
  /* Breite kommt vom Flatsome-Container (Row) — wie bei allen anderen Sections */
  color:var(--wk-ink);
  font-family:'Montserrat',sans-serif;
}

/* === schmale Live-Leiste === */
.wk-top{
  display:flex; align-items:center;
  gap:18px 64px; flex-wrap:wrap;
}
.wk-top .wk-now__temp{font-size:3.3em;}
.wk-top .wk-now__desc{margin-top:4px; font-size:0.9em;}
.wk-top .wk-chips{gap:34px;}
.wk-top__loc{display:flex; flex-direction:column; gap:6px; min-width:0;}
.wk-top__now{display:flex; align-items:center; gap:14px;}
.wk-top__now > .wk-ico{flex:0 0 auto; filter:drop-shadow(0 8px 22px rgba(0,0,0,0.4));}
.wk-now__reading{display:flex; flex-direction:column;}
.wk-now__temp{font-size:3.5em; font-weight:700; line-height:0.9; letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}
.wk-now__temp em{font-style:normal; color:var(--wk-gold); font-weight:400;}
.wk-now__desc{font-size:0.92em; color:var(--wk-dim); margin-top:6px;}
.wk-now__feels{font-size:0.8em; color:var(--wk-faint); margin-top:1px;}
.wk-now__feels b{color:var(--wk-dim); font-weight:700;}

/* Chips mit den wichtigsten Werten in der Leiste */
.wk-chips{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.wk-chip{display:flex; flex-direction:column; gap:3px;
  background:rgba(1,42,66,0.32); border:1px solid rgba(242,246,250,0.08);
  border-radius:10px; padding:9px 16px 10px;}
.wk-chip__k{font-size:0.62em; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--wk-faint);}
.wk-chip__v{font-size:1.05em; font-weight:700; font-variant-numeric:tabular-nums;}
.wk-chip__v small{font-size:0.6em; font-weight:500; color:var(--wk-dim); margin-left:2px;}
.wk-chip--sea .wk-chip__v{color:var(--wk-gold);}

/* Aufklapp-Kante unten: Hairline + Pfeil-Button */
.wk-expand{
  margin-top:20px;
  border-top:1px solid var(--wk-line);
  display:flex; justify-content:center;
}
.wk-expand__btn{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer;
  padding:12px 26px 14px;
  font-family:inherit; font-size:0.68em; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--wk-dim);
  transition:color .18s ease;
}
.wk-expand__btn:hover{color:var(--wk-gold);}
.wk-expand__btn:focus-visible{outline:2px solid var(--wk-gold); outline-offset:2px; border-radius:6px;}
.wk-expand__chev{
  width:9px; height:9px; margin-top:-4px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .3s ease;
}
.wk-widget.is-open .wk-expand__chev{transform:rotate(-135deg); margin-top:4px;}
.wk-toggle__lbl-open{display:none;}
.wk-widget.is-open .wk-toggle__lbl-open{display:inline;}
.wk-widget.is-open .wk-toggle__lbl-closed{display:none;}

/* Aufklapp-Bereich */
.wk-panel{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease, margin-top .42s ease;
  margin-top:0;
}
.wk-panel__inner{overflow:hidden; min-height:0;}
.wk-widget.is-open .wk-panel{grid-template-rows:1fr; opacity:1; margin-top:30px;}
.wk-panel__grid{
  padding-top:30px; border-top:1px solid var(--wk-line);
  display:grid; grid-template-columns:minmax(260px,4fr) 7fr; gap:26px 56px; align-items:start;
}
@media (max-width:849px){ .wk-panel__grid{grid-template-columns:1fr; gap:30px;} }


/* --- linke Spalte: Kopf + Jetzt --- */
.wk-col-now{display:flex; flex-direction:column; min-width:0;}
.wk-head{display:flex; flex-direction:column; gap:7px; margin-bottom:26px;}
.wk-eyebrow-row{display:flex; align-items:center; gap:12px;}
.wk-eyebrow{
  font-size:0.78em; font-weight:800; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--wk-gold);
}
.wk-eyebrow-row::after{
  content:""; flex:1 1 auto; height:2px; margin-top:1px;
  background:linear-gradient(90deg, var(--wk-gold), transparent);
}
.wk-live{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  font-size:0.62em; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--wk-dim);
}
.wk-live__dot{
  width:7px; height:7px; border-radius:50%; background:var(--wk-gold);
  box-shadow:0 0 0 0 rgba(248,173,0,0.55);
}
.wk-date{
  font-size:1.02em; font-weight:700; letter-spacing:-0.01em; color:var(--wk-ink);
}
.wk-date time{color:var(--wk-gold);}
.wk-sub{font-size:0.84em; color:var(--wk-dim); font-weight:400;}

.wk-now{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.wk-now > .wk-ico{flex:0 0 auto; filter:drop-shadow(0 8px 22px rgba(0,0,0,0.4));}
.wk-now__reading{display:flex; flex-direction:column; min-width:0;}
.wk-now__temp{
  font-size:4.8em; font-weight:700; line-height:0.9; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
}
.wk-now__temp em{font-style:normal; color:var(--wk-gold); font-weight:400;}
.wk-now__desc{font-size:0.98em; color:var(--wk-dim); margin-top:8px;}
.wk-now__feels{font-size:0.82em; color:var(--wk-faint); margin-top:2px;}
.wk-now__feels b{color:var(--wk-dim); font-weight:700;}

/* Kennzahlen-Raster fuellt die linke Spalte */
.wk-stats{
  margin-top:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:rgba(1,42,66,0.45);
  border:1px solid rgba(255,255,255,0.30); border-radius:12px; overflow:hidden;
}
.wk-stat{
  background:#fdfefe; padding:13px 16px;
  display:flex; flex-direction:column; gap:3px;
}
.wk-stat__k{
  font-size:0.64em; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(11,55,82,0.55);
}
.wk-stat__v{font-size:1.12em; font-weight:700; font-variant-numeric:tabular-nums; color:#0b3752;}
.wk-stat__v small{font-size:0.6em; font-weight:500; color:rgba(11,55,82,0.65); margin-left:3px;}
.wk-stat--sea .wk-stat__v{color:var(--wk-gold);}

.wk-src{
  margin-top:22px; padding-top:0; border-top:none;
  font-size:0.72em; line-height:1.7; color:var(--wk-faint);
}

/* --- rechte Spalte: Bloecke --- */
.wk-fc{display:flex; flex-direction:column; gap:26px; min-width:0;}
.wk-block-label{
  font-size:0.72em; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--wk-dim); margin-bottom:12px;
}

/* Stunden-Leiste */
.wk-hours{background:rgba(1,42,66,0.30); border:1px solid rgba(242,246,250,0.07);
  border-radius:12px; padding:14px 16px 4px;}
.wk-hours > .wk-block-label{margin-bottom:8px;}
.wk-hours__strip{
  display:flex; gap:2px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-bottom:8px;
  scrollbar-width:thin; scrollbar-color:var(--wk-line) transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
          mask-image:linear-gradient(90deg,#000 92%,transparent);
}
.wk-hours__strip:focus-visible{outline:2px solid var(--wk-gold); outline-offset:4px;}
.wk-hour{
  flex:0 0 58px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 0 4px; border-radius:10px;
  transition:background .18s ease, transform .18s ease;
}
.wk-hour:hover{background:rgba(242,246,250,0.06); transform:translateY(-2px);}
.wk-hour__t{font-size:0.72em; color:var(--wk-faint); font-variant-numeric:tabular-nums;}
.wk-hour__v{font-size:0.94em; font-weight:700; font-variant-numeric:tabular-nums;}
.wk-hour__r{font-size:0.66em; color:var(--wk-gold); min-height:1.4em; font-variant-numeric:tabular-nums;}

/* 7-Tage-Liste mit Kurslinien-Balken */
.wk-day{
  display:grid;
  grid-template-columns:6.2em 34px 3.6em 5em 2.4em 1fr 2.4em;
  align-items:center; gap:14px;
  padding:7px 0;
  border-top:1px solid var(--wk-line);
  font-variant-numeric:tabular-nums;
  transition:background .18s ease;
}
.wk-day:first-of-type{border-top:none;}
.wk-day:hover{background:rgba(242,246,250,0.03);}
.wk-day--head{padding:0 0 3px;}
.wk-day--head:hover{background:none;}
.wk-day--head .wk-dh{
  font-size:0.6em; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--wk-faint);
}
.wk-day__name{font-size:0.9em; font-weight:700; display:flex; flex-direction:column; line-height:1.25;}
.wk-day__name em{font-style:normal; font-size:0.72em; font-weight:500; color:var(--wk-faint);}
.wk-day__rain{font-size:0.74em; color:var(--wk-gold); text-align:right;}
.wk-day__wind{font-size:0.78em; color:var(--wk-dim); text-align:right; white-space:nowrap;}
.wk-day__wind small{font-size:0.72em; font-weight:500; color:var(--wk-faint); margin-left:2px;}
.wk-day__gustb{font-size:0.84em; font-weight:600; color:var(--wk-gold); margin-left:7px;}
.wk-day__gustb svg{display:inline-block; vertical-align:-0.5px; margin-right:1px;}
.wk-day__nil{color:var(--wk-faint);}
.wk-day__min{font-size:0.9em; color:var(--wk-dim); text-align:right;}
.wk-day__max{font-size:0.9em; font-weight:700;}
.wk-day__bar{
  position:relative; height:14px; display:block;
  background-image:linear-gradient(90deg, var(--wk-faint) 1.5px, transparent 1.5px);
  background-size:7px 1.5px;
  background-position:0 50%;
  background-repeat:repeat-x;
}
.wk-day__fill{
  position:absolute; top:50%; transform:translateY(-50%);
  height:5px; width:var(--w,0); border-radius:3px;
  background:linear-gradient(90deg, rgba(248,173,0,0.55), var(--wk-gold));
  box-shadow:0 0 10px rgba(248,173,0,0.35);
}
.wk-day__fill::before,
.wk-day__fill::after{
  content:""; position:absolute; top:50%; transform:translate(0,-50%);
  width:9px; height:9px; border-radius:50%;
  background:#02537f; border:2px solid var(--wk-gold);
}
.wk-day__fill::before{left:-4px;}
.wk-day__fill::after{right:-4px;}

/* Icons */
.wk-ico{display:block;}

/* Mini-Kompass (Windrichtung) */
.wk-compass{
  display:inline-flex; vertical-align:-7px; margin-right:8px;
  color:var(--wk-dim);
}
.wk-compass svg{display:block;}

/* --- Responsive --- */
@media (max-width:640px){
  /* Live-Leiste: klare Zeilen statt Flex-Wrap-Zufall.
     Zeile 1 Eyebrow/Live + Datum, Zeile 2 Icon + Temperatur, Zeile 3 Chips-Grid. */
  .wk-top{flex-direction:column; align-items:stretch; gap:18px;}
  .wk-top__loc{gap:4px;}
  .wk-top__now{justify-content:center; gap:34px; padding:6px 0;}
  .wk-top__now > .wk-ico{width:80px; height:80px;}
  .wk-now__temp{font-size:3.8em;}
  .wk-top .wk-chips{
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    width:100%;
    border-top:1px solid var(--wk-line); padding-top:14px;
  }
  /* Pills kompakter, Werte einzeilig halten */
  .wk-chip{padding:8px 10px 9px;}
  .wk-chip__v{white-space:nowrap; font-size:1em;}
  .wk-compass{margin-right:5px;}
  /* 7-Tage-Trend: Temperaturband ist auf schmalen Screens unlesbar — raus,
     der Platz geht an die Tag-Spalte. Min/Max ruecken zusammen. */
  .wk-day > :nth-child(6){display:none;}
  .wk-day{grid-template-columns:1fr 28px 2.9em 4.5em 2.2em 2.4em; gap:8px;}
  .wk-day__max{text-align:right;}
  /* Aufklapp-Kante kompakt: nur Pfeil, Label bleibt fuer Screenreader erhalten */
  .wk-expand{margin-top:12px;}
  .wk-widget .wk-expand__btn{padding:10px 30px 12px;}
  .wk-widget .wk-toggle__lbl-closed,
  .wk-widget.is-open .wk-toggle__lbl-open{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  .wk-expand__chev{width:12px; height:12px;}
}

/* --- dezente Animationen --- */
@media (prefers-reduced-motion:no-preference){
  .wk-widget [data-anim]{opacity:0; animation:wkIn .7s cubic-bezier(.22,.61,.36,1) forwards; animation-delay:var(--d,0ms);}
  .wk-widget [data-anim="1"]{--d:0ms;} .wk-widget [data-anim="2"]{--d:80ms;}
  .wk-widget [data-anim="3"]{--d:150ms;} .wk-widget [data-anim="4"]{--d:240ms;}
  @keyframes wkIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
  .wk-top__now > .wk-ico{animation:wkFloat 5.5s ease-in-out 0.7s infinite;}
  @keyframes wkFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
  .wk-live__dot{animation:wkPulse 2.4s ease-out infinite;}
  @keyframes wkPulse{0%{box-shadow:0 0 0 0 rgba(248,173,0,0.5);} 70%{box-shadow:0 0 0 8px rgba(248,173,0,0);} 100%{box-shadow:0 0 0 0 rgba(248,173,0,0);}}
  .wk-day__fill{transform:translateY(-50%) scaleX(0); transform-origin:left center; animation:wkGrow .8s cubic-bezier(.22,.61,.36,1) forwards; animation-delay:var(--d,0ms);}
  @keyframes wkGrow{to{transform:translateY(-50%) scaleX(1);}}
}
@media (prefers-reduced-motion:reduce){
  .wk-hours__strip{scroll-behavior:auto;}
}
/* === /Kiel-Wetter Widget === */