/* =========================================================
   Wetterboard – vollständig gekapselt (Joomla-sicher)
   ========================================================= */

#wetterboard-modul{
  width:100%;
}

/* =========================================================
   Board-Grid
   ========================================================= */

#wetterboard-modul .wb-board{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

/* =========================================================
   Karten-Grundstil
   ========================================================= */

#wetterboard-modul .tb-hud-card{
  position:relative;
  min-height:240px;
  padding:44px;
  box-sizing:border-box;

  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  box-shadow:0 10px 30px rgba(0,0,0,0.20);
  color:#ffffff;
}

#wetterboard-modul .tb-hud-center{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* =========================================================
   Gemeinsame Root-Struktur
   ========================================================= */

#wetterboard-modul .wb-root{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#ffffff; /* currentColor-Basis */
}

/* =========================================================
   Icons (SVG)
   ========================================================= */

#wetterboard-modul svg{
  width:86px;
  height:86px;
  margin-bottom:6px;
  color:#ffffff;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.45));
}

/* Taupunkt-Tropfen: Farbe kommt aus JS */
#wetterboard-modul svg[data-wb="hum-icon"]{
  color:inherit !important;
}

/* SVG nutzt currentColor */
#wetterboard-modul svg path,
#wetterboard-modul svg circle,
#wetterboard-modul svg line{
  stroke:currentColor;
  fill:none;
}

/* Regen-Wolke immer blau */
#wetterboard-modul svg[data-wb="rain-icon"]{
  color:#4fc3f7 !important;
}

/* =========================================================
   Werte (ZAHLEN)
   ========================================================= */

#wetterboard-modul .wb-value,
#wetterboard-modul .temp-value,
#wetterboard-modul .rain-value{
  font-size:30px;
  font-weight:800;
  line-height:1.1;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 0 6px rgba(0,0,0,0.35);
}

#wetterboard-modul .wb-unit,
#wetterboard-modul .temp-unit,
#wetterboard-modul .rain-unit{
  font-size:15px;
  font-weight:600;
  opacity:0.95;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 0 6px rgba(0,0,0,0.35);
}

/* =========================================================
   Untertexte / Beschreibungen
   ========================================================= */

#wetterboard-modul .wb-sub{
  margin-top:6px;
  font-size:13px;
  font-weight:600;
  opacity:0.9;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 0 6px rgba(0,0,0,0.25);
}

/* "vor x min" – dezent, aber gut lesbar */
#wetterboard-modul .temp-updated{
  margin-top:6px;
  font-size:12px;
  font-weight:600;
  opacity:0.85;
  color:rgba(255,255,255,0.95);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 0 6px rgba(0,0,0,0.25);
}

/* =========================================================
   Status-Zeile (Pill)
   ========================================================= */

#wetterboard-modul .status-line{
  position:absolute;
  left:12px;
  right:14px;
  bottom:12px;
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
}

#wetterboard-modul .pill{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;

  font-size:11px;
  font-weight:700;
  letter-spacing:0.2px;

  color:rgba(255,255,255,0.95);
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.18);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  box-shadow:0 4px 14px rgba(0,0,0,0.18);
  text-shadow:0 1px 2px rgba(0,0,0,0.60);
}

/* =========================================================
   Wind – Beaufort Darstellung
   ========================================================= */

#wetterboard-modul .wb-wind-icon .l4,
#wetterboard-modul .wb-wind-icon .l5{
  opacity:0;
}

/* Linien nach Beaufort */
#wetterboard-modul .wb-wind-icon.wind-bft-0 .l1,
#wetterboard-modul .wb-wind-icon.wind-bft-1 .l1,
#wetterboard-modul .wb-wind-icon.wind-bft-2 .l1{
  opacity:1;
}

#wetterboard-modul .wb-wind-icon.wind-bft-3 .l1,
#wetterboard-modul .wb-wind-icon.wind-bft-3 .l2,
#wetterboard-modul .wb-wind-icon.wind-bft-4 .l1,
#wetterboard-modul .wb-wind-icon.wind-bft-4 .l2{
  opacity:1;
}

#wetterboard-modul .wb-wind-icon.wind-bft-5 .l1,
#wetterboard-modul .wb-wind-icon.wind-bft-5 .l2,
#wetterboard-modul .wb-wind-icon.wind-bft-5 .l3,
#wetterboard-modul .wb-wind-icon.wind-bft-6 .l1,
#wetterboard-modul .wb-wind-icon.wind-bft-6 .l2,
#wetterboard-modul .wb-wind-icon.wind-bft-6 .l3{
  opacity:1;
}

#wetterboard-modul .wb-wind-icon.wind-bft-7 .wind-line,
#wetterboard-modul .wb-wind-icon.wind-bft-8 .wind-line,
#wetterboard-modul .wb-wind-icon.wind-bft-9 .wind-line,
#wetterboard-modul .wb-wind-icon.wind-bft-10 .wind-line,
#wetterboard-modul .wb-wind-icon.wind-bft-11 .wind-line,
#wetterboard-modul .wb-wind-icon.wind-bft-12 .wind-line{
  opacity:1;
}

/* Wind-Animation */
@keyframes windWobble{
  0%{transform:translateX(0)}
  25%{transform:translateX(-1px)}
  50%{transform:translateX(1px)}
  75%{transform:translateX(-1px)}
  100%{transform:translateX(0)}
}

#wetterboard-modul .wb-wind-icon.wind-bft-7,
#wetterboard-modul .wb-wind-icon.wind-bft-8{
  animation:windWobble 1.2s infinite;
}

#wetterboard-modul .wb-wind-icon.wind-bft-9,
#wetterboard-modul .wb-wind-icon.wind-bft-10,
#wetterboard-modul .wb-wind-icon.wind-bft-11,
#wetterboard-modul .wb-wind-icon.wind-bft-12{
  animation:windWobble 0.7s infinite;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width:640px){
  #wetterboard-modul .tb-hud-card{
    padding:32px;
  }
}