/* com_weather shared frontend styles (moved from inline template styles) */

.weather-page-title-wrap {
  text-align: center;
  border-top: 4px dotted #000;
  margin: 2px 2px;
}

.weather-page-title {
  text-align: center;
}

/* Forecast text (long descriptive paragraph under the tiles)
   Keep centered across all views and templates. */
.weather-text {
  max-width: 980px;
  margin: 8px auto 0 auto;
  text-align: center;
  line-height: 1.35;
}

.weather-text p {
  margin: 0;
}

/* 1-day wrapper (today/tomorrow) */
.weather-1day-day {
  margin: 14px 2px;
  padding: 12px 10px;
  border: 1px dotted #777;
  border-radius: 6px;
}

/* Shared wrapper for multi-day views (3days/weekend/10days) so the visual
   box (dotted border, padding) matches today/tomorrow. */
.weather-forecast-day {
  margin: 14px 2px;
  padding: 12px 10px;
  border: 1px dotted #777;
  border-radius: 6px;
}

/* Main 5-tile row (Kachel 1-5)
   - >=700px: all 5 tiles in ONE row
   - <700px : Kachel 1 full width on top, Kachel 2-5 as 2x2 grid below

   We achieve this by turning the wrapper into a 5-column grid and using
   `display: contents` for the 2-5 group on wide screens (so its children become
   direct grid items). */
.weather-tiles {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

/* Kachel 2-5 wrapper: flatten into the parent grid for >=700px */
.weather-tile-group {
  display: contents !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

@media (max-width: 700px) {
  .weather-tiles {
    grid-template-columns: 1fr;
  }

  /* Kachel 1 stays on its own row */
  .weather-tile--day {
    grid-column: 1 / -1;
  }

  /* Restore a real grid for Kachel 2-5 */
  .weather-tile-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto !important;
  }
}

/* Alignment: keep everything centered in the tiles (like hourly cards), so
   the icon/value association stays visually intact and consistent on all views. */
.weather-tile {
  text-align: center;
  box-sizing: border-box;
  min-width: 0;
}

.weather-tile__values,
.weather-tile__temps,
.weather-tile__precip,
.weather-tile__wind,
.weather-tile__pressure {
  text-align: center;
}

/* NOTE: hourly + tile info rows are defined further below (single source of truth).
   Keep this section free of duplicate definitions to avoid accidental overrides. */

/* Day tile (Kachel 1): align paired values (Tmin/Tmax, precip values) from the
   center of the tile so they appear as one coherent block on all views. */
.weather-tile--day .weather-tile__values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  line-height: 1.15;
}

.weather-tile--day .weather-tile__temp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.weather-tile--day .weather-tile__precip {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

/* Tighten tile spacing specifically for 1-day views (today/tomorrow).
   Other views (3days/weekend/10days) already appear compact via their existing wrappers. */
.weather-1day-day .weather-tile__sun {
  display: flex;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 6px 0;
  line-height: 1.15;
}

/* Use the same tight sunrise/sunset spacing for the day tile on multi-day views
   to keep the icon/value association consistent across all views. */
.weather-forecast-day .weather-tile--day .weather-tile__sun {
  display: flex;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 6px 0;
  line-height: 1.15;
}

.weather-1day-day .weather-tile__sunrise,
.weather-1day-day .weather-tile__sunset,
.weather-forecast-day .weather-tile--day .weather-tile__sunrise,
.weather-forecast-day .weather-tile--day .weather-tile__sunset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.weather-1day-day .weather-tile__sun img,
.weather-1day-day .weather-tile__values img,
.weather-1day-day .weather-tile__temps img,
.weather-forecast-day .weather-tile--day .weather-tile__sun img,
.weather-forecast-day .weather-tile--day .weather-tile__values img,
.weather-forecast-day .weather-tile--day .weather-tile__temps img {
  vertical-align: middle;
  margin: 0;
}

.weather-1day-day .weather-tile__icon {
  margin: 4px 0 6px 0;
}

.weather-1day-day .weather-tile__values {
  line-height: 1.15;
}

.weather-1day-day .weather-tile__temp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}

/* Kachel 1: ensure Tmin/Tmax sit next to each other and all 2-part elements
   (icon+value pairs) are centered around the middle of the tile in ALL views. */
.weather-tile--day .weather-tile__values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.weather-tile--day .weather-tile__temp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.weather-tile--day .weather-tile__precip {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.weather-1day-day .weather-tile__precip,
.weather-1day-day .weather-tile__wind,
.weather-1day-day .weather-tile__pressure {
  margin-top: 2px;
}

/* Footer meta line: hits + data timestamp */
.weather-footer-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 2px 0 2px;
  font-size: 12px;
  color: #555;
}

.weather-footer-meta__left {
  white-space: nowrap;
}

.weather-footer-meta__right {
  text-align: right;
}

/* Debug helpers */
.weather-debug-pre {
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid #ccc;
  padding: 10px;
  background: #f7f7f7;
}

.weather-debug-details {
  margin-bottom: 15px;
}

.weather-debug-details-body {
  margin-top: 8px;
}

.weather-debug-li {
  margin-bottom: 6px;
}

.weather-debug-sample {
  margin-top: 4px;
}

.weather-debug-sample-pre {
  white-space: pre-wrap;
  margin: 6px 0;
}

.weather-debug-pre-light {
  white-space: pre-wrap;
  background: #f7f7f7;
  padding: 10px;
  border: 1px solid #ddd;
}

.weather-hours--mt {
  margin-top: 14px;
}

/* Hourly tiles (today/tomorrow) */
.weather-hours__title {
  margin: 0 0 10px 0;
}

.weather-hours__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  justify-content: center;
  justify-items: stretch;
}

@media (max-width: 640px) {
  .weather-hours__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.weather-hour {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 0 0 0; /* no left/right/bottom padding */
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-sizing: border-box;
  min-width: 0;
}

.weather-hour__time {
  font-weight: 700;
  margin-bottom: 4px;
}

.weather-hour__temp {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
}

.weather-hour__line {
  margin-top: 6px;
  font-size: 13px;
}

.weather-hour__line--tight {
  margin-top: 2px;
  font-size: 13px;
}

/* Hourly card content blocks should span full width (outer card has no side padding) */
.weather-hour__temp,
.weather-hour .weather-precipcup,
.weather-hour .weather-windrow,
.weather-hour .weather-pressurebox {
  width: 100%;
}

/*
  INFO ICON ROWS
  We intentionally separate TILE vs HOURLY markup so their styling can't interfere.
  Both use the same inner element classes, but styles are scoped by the root class.
*/

/* === Tiles (Kachel-Ansicht) === */
.weather-info-tile-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 2px;
  max-width: 100%;
}

.weather-info-tile-row .weather-info-row__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: block;
}

.weather-info-tile-row .weather-info-row__lines {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left;
  align-items: flex-start;
  min-width: 0;
  max-width: calc(100% - 34px);
}

.weather-info-tile-row .weather-info-row__line {  /* One line per value; wrap only between multiple values (separate .weather-info-row__line elements) */
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  max-width: 100%;
  display: block;
  min-width: 0;
  line-height: 1.15;
  margin: 0;
  padding: 0;}

/* === Hourly (Stundenansicht) === */
.weather-info-hour-row {
  /* Keep icon and values tightly grouped; prevent stretching to full width */
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 4px;
  max-width: 100%;
}

.weather-info-hour-row .weather-info-row__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: block;
}

.weather-info-hour-row .weather-info-row__lines {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left;
  align-items: flex-start;
  min-width: 0;
  max-width: calc(100% - 34px);
}

.weather-info-hour-row .weather-info-row__line {
  /* Prevent weird unit breaks (e.g. "mm" -> "m m"); wrap only at <br> */
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  margin: 0;
  padding: 0;
  line-height: 1.1;
}

/* Warnings view (refined) */
.weather-warnings-box {
  /* Keep warn-level colors from inline style; only refine spacing and framing */
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin: 12px 0;
  padding: 14px 12px;
  border: 3px solid rgba(0, 0, 0, 0.35);
  border-radius: 12px;
}

.weather-warnings-box > center {
  display: block;
  margin: 0;
}

.weather-warnings-box-inner {
  box-sizing: border-box;
  background: transparent;
  text-align: center;
  padding: 10px 14px 6px;
  line-height: 1.45;
}

.weather-warnings-empty {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.weather-warnings-empty-title {
  margin: 0;
  color: darkgreen;
  text-align: center;
}

.weather-warnings-debug-pre {
  text-align: left;
  max-width: 980px;
  margin: 10px auto;
  overflow: auto;
  background: #f7f7f7;
  padding: 10px;
  border: 1px dotted #bbb;
}

/* ==========================================================================
   com_weather: Category view (Top 5 weather tiles + "Weitere Orte" list)
   Scoped to .com-weather-category to avoid influencing modules / other views
   ========================================================================== */

.com-weather-category { margin: 0; }

/* Block wrappers */
.com-weather-category__block { margin: 0 0 18px 0; }
.com-weather-category__block--topweather { margin-bottom: 18px; }
.com-weather-category__block--toplinks  { margin-bottom: 18px; }

/* --- Block 1: Top weather tiles --- */
.com-weather-category__tiles--topweather,
.com-weather-category-topweather__tiles,
.com-weather-category-block1__tiles{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 10px;
  align-items: stretch;
}

/* The tile link itself is the flex-item. Force 5 columns on wide screens. */
.com-weather-category__tileLink--topweather,
.com-weather-category-topweather__tileLink,
.com-weather-category-block1__tileLink{
  flex: 0 0 calc((100% - 40px) / 5); /* 4 gaps à 10px */
  max-width: calc((100% - 40px) / 5);
  min-width: 0;
  box-sizing: border-box;
  display: block; /* keep existing tile styling */
  text-decoration: none !important;
  color: #000 !important;

  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: #fff;
  padding: 10px 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.com-weather-category-topweather__tileLink:hover,
.com-weather-category-block1__tileLink:hover{
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

/* Defensive: keep inner elements centered, but scoped to category view */
.com-weather-category .weather-tile,
.com-weather-category .weather-tile *{
  text-align: center;
}

.com-weather-category .weather-tile__icon,
.com-weather-category .weather-tile__values,
.com-weather-category .weather-info-tile-row{
  justify-content: center;
  align-items: center;
}

.com-weather-category .weather-info-tile-row{
  display: flex;
  flex-direction: row;
}

.com-weather-category .weather-info-row__lines{
  text-align: left;
}

/* Wrap to 2x2x1 on very small screens */
@media (max-width: 500px){
  .com-weather-category__tiles--topweather,
  .com-weather-category-topweather__tiles,
  .com-weather-category-block1__tiles{
    flex-wrap: wrap;
  }

  .com-weather-category__tileLink--topweather,
  .com-weather-category-topweather__tileLink,
  .com-weather-category-block1__tileLink{
    flex: 0 0 calc((100% - 10px) / 2); /* 1 gap */
    max-width: calc((100% - 10px) / 2);
  }

  /* 5th item full width -> 2x2x1 */
  .com-weather-category__tileLink--topweather:nth-child(5),
  .com-weather-category-topweather__tileLink:nth-child(5),
  .com-weather-category-block1__tileLink:nth-child(5){
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --- Block 2: "Weitere Orte" button/list --- */
.com-weather-category-toplinks__buttons,
.com-weather-category-block2__buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 8px;
  margin: 8px 0;
}

.com-weather-category-toplinks__btn,
.com-weather-category-block2__btn{
  display:inline-block;
  margin: 3px 4px;
  padding: 8px 10px;
  border: 1px solid #000;
  background: #fff;
  cursor:pointer;
  border-radius: 6px;
  text-decoration:none !important;
  white-space: nowrap;
  color: #2f6f3e !important;
}

.com-weather-category-block2__btn:visited{
  color: #2f6f3e !important;
}

.com-weather-category-toplinks__btn:hover,
.com-weather-category-toplinks__btn:focus,
.com-weather-category-block2__btn:hover,
.com-weather-category-block2__btn:focus{
  background: #f8d64e;

  color: #2f6f3e !important;
}
/* =======================================================================
   Category view – Topweather tiles (Block 1)
   Fix: module-level tile CSS sometimes forces 100% width on links/tiles,
   causing vertical stacking. We override within the category view only.
   ======================================================================= */

.com-weather-category .com-weather-category__tiles--topweather,
.com-weather-category .com-weather-category-topweather__tiles{
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.com-weather-category .com-weather-category__tiles--topweather > a,
.com-weather-category .com-weather-category-topweather__tiles > a{
  flex: 0 0 calc((100% - 40px) / 5) !important; /* 5 tiles, 4 gaps */
  max-width: calc((100% - 40px) / 5) !important;
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
  box-sizing: border-box;
}

/* Also override potential module rules applied to the tile class itself */
.com-weather-category .com-weather-category__tiles--topweather .weather-tile,
.com-weather-category .com-weather-category-topweather__tiles .weather-tile{
  width: auto !important;
  max-width: 100% !important;
}

/* Narrow screens: 2×2×1 layout below 500px */
@media (max-width: 499px){
  .com-weather-category .com-weather-category__tiles--topweather,
  .com-weather-category .com-weather-category-topweather__tiles{
    flex-wrap: wrap !important;
  }

  .com-weather-category .com-weather-category__tiles--topweather > a,
  .com-weather-category .com-weather-category-topweather__tiles > a{
    flex: 0 0 calc((100% - 10px) / 2) !important; /* 2 columns, 1 gap */
    max-width: calc((100% - 10px) / 2) !important;
  }

  .com-weather-category .com-weather-category__tiles--topweather > a:nth-child(5),
  .com-weather-category .com-weather-category-topweather__tiles > a:nth-child(5){
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

.com-weather-category-block2__btn:hover *{
  color: #2f6f3e !important;
}

/* --- Weather menu styles (moved from site/layouts/weather/menu.php inline <style>) --- */
/* Responsive menu: try to stay on one line; wrap only when needed */
.weather-menu{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  border-bottom:4px dotted #000;
  margin:2px;
  padding:6px 0;
  text-align:center;
}
.weather-menu a{ text-decoration:none; display:inline-flex; }
.weatherbutton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:8px 10px;
  border:1px solid #000;
  background:#fff;
  cursor:pointer;
  white-space:nowrap;
}
.weatherbutton1{ border-radius:6px; }
@media (max-width: 520px){
  .weather-menu{ gap:4px; }
  .weatherbutton{ padding:7px 8px; }
}

.weatherbutton:hover,
.weatherbutton.is-active{
  background:#ffeb3b;
}

/* --- Today view: 24h temperature chart --- */
.weather-hours-chart svg{display:block;}
.weather-hours-chart svg{
  display: block;
  vertical-align: top;
}
/* reduce any large top margin on the hours section directly following the chart */
.weather-hours-chart + .weather-hours{
  margin-top: 10px !important;
}

.adBox{
  margin-bottom: 20px !important;
}
.adBox + 
.weather-hours-section .weather-hours{
  margin:0 !important;
  padding:0 !important;
}
.weather-hours-section .weather-hours__title{
  margin-top:20px !important;   /* exactly 20px between chart and title */
}


/* Warnings view: show "no warnings" as a positive (green) box */
.weather-warning-box{
  border:1px solid #000;
  border-radius:10px;
  padding:12px 14px;
  margin:10px 0;
}

.weather-warning-box__title{
  font-weight:700;
  margin:0 0 6px 0;
}

.weather-warning-box__text{
  margin:0;
}

.weather-warning-box--none{
  background:#c8f5c8; /* light green */
  border-color:#2e7d32;
  color:#000;
}

.weather-warning-box--none .weather-warning-box__title,
.weather-warning-box--none .weather-warning-box__text{
  color:#000;
}

/* Center text in the 'no warnings' box */
.weather-warning-box--none{ text-align:center; }


/* Slightly smaller info text in period tiles to reduce wrapping */
.weather-tile--period .weather-info-tile-row .weather-info-row__line {
  font-size: 0.92em;
}


/* --- Fix: Tile InfoRows alignment and sizing (Tomorrow narrow column) --- */
.weather-info-tile-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;               /* consistent spacing between icon and values */
}

.weather-info-tile-row .weather-info-row__icon {
  flex: 0 0 auto;
  margin: 0;
}

.weather-info-tile-row .weather-info-row__lines {
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  text-align: left;
}

.weather-info-tile-row .weather-info-row__line {
  /* 20% smaller text to avoid overflow; keep each line intact */
  font-size: 0.8em;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  max-width: 100%;
  display: block;
  min-width: 0;
}

/* Ensure tiles can shrink inside narrow columns */
.weather-tile { min-width: 0; }


/* --- Precip mini bar (Tile design B) --- */
.weather-metric-row{display:flex;align-items:flex-start;gap:6px;}
.weather-metric-row__icon{flex:0 0 auto;}
.weather-metric-row__content{flex:1 1 auto;min-width:0;}
.weather-precipbarline{display:flex;align-items:center;gap:6px;}
.weather-precipbar{flex:1 1 auto;min-width:0;height:7px;border-radius:6px;background:#e7f0ff;overflow:hidden;}
.weather-precipbar__fill{height:100%;background:#3b82f6;}
.weather-precipbar__value{white-space:nowrap;font-size:0.85em;line-height:1.1;}
.weather-precipbar__prob{font-size:0.8em;line-height:1.1;opacity:0.9;}


/* --- Precipitation vertical mini bar (icon-free) --- */
.weather-precipvert{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  max-width:52px;
}

.weather-precipvert__bar{
  width:14px;
  height:34px;
  border-radius:8px;
  background:#e7f0ff;
  overflow:hidden;
  position:relative;
}

.weather-precipvert__fill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:0%;
  background:#3b82f6;
}

.weather-precipvert__mm{
  font-size:0.8em;
  line-height:1.05;
  white-space:nowrap;
}

.weather-precipvert__prob{
  font-size:0.78em;
  line-height:1.05;
  opacity:0.9;
  white-space:nowrap;
}


/* --- Precipitation "cup" (icon-free, full width) --- */
.weather-tile__precip { width: 100%; }

.weather-precipcup{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  width:100%;
}

.weather-precipcup__vessel{
  width:100%;
  height:30px;
  border-radius:8px;
  background:#e7f0ff;
  border:1px solid #c7ddff;
  overflow:hidden;
  position:relative;
  box-sizing:border-box;
}

/* A subtle rim to suggest a container */
.weather-precipcup__vessel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:6px;
  background:rgba(255,255,255,0.55);
}

.weather-precipcup__fill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:0%;
  background:#3b82f6;
}

.weather-precipcup__values{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px;
  font-size:0.8em;
  line-height:1.05;
  white-space:nowrap;
}

.weather-precipcup__mm{}
.weather-precipcup__prob{ opacity:0.9; }


/* --- Temperature badges (Day tile: tmax top / tmin bottom) --- */
.weather-tempbadge{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  padding:4px 6px;
  border-radius:8px;
  color:#111;
  box-sizing:border-box;
}

.weather-tempbadge__label{
  font-weight:700;
  font-size:0.85em;
  opacity:0.9;
}

.weather-tempbadge__value{
  font-weight:800;
}

/* Temperature color scale */
.temp-bg--dv{ background:#2a0038; color:#fff; }   /* dunkelviolett */
.temp-bg--hv{ background:#6a0dad; color:#fff; }   /* hellviolett */
.temp-bg--tb{ background:#0033cc; color:#fff; }   /* tiefblau */
.temp-bg--hb{ background:#4da3ff; color:#06233a; }/* hellblau */
.temp-bg--cy{ background:#00c8d7; color:#052225; }/* cyan */
.temp-bg--gr{ background:#00a651; color:#07230f; }/* sattes grün */
.temp-bg--yg{ background:#9acd32; color:#1a2a07; }/* gelbgrün */
.temp-bg--ly{ background:#fff176; color:#3a2b00; }/* hellgelb */
.temp-bg--dy{ background:#fbc02d; color:#3a2400; }/* dunkelgelb */
.temp-bg--or{ background:#ff9800; color:#3a1f00; }/* orange */
.temp-bg--lr{ background:#ff6b6b; color:#3a0000; }/* hellrot */
.temp-bg--dr{ background:#c62828; color:#fff; }   /* dunkelrot */
.temp-bg--mg{ background:#d81b60; color:#fff; }   /* magenta */
.temp-bg--pu{ background:#6a1b9a; color:#fff; }   /* purpur */


/* Period tile temperature badge tweaks */
.weather-tempbadge--period{
  justify-content:center;
  width:100%;
  padding:3px 6px;
  border-radius:10px;
}
.weather-tempbadge--period img{
  width:14px;
  height:28px;
}


/* Spacing between temperature badge and precipitation in period tiles */
.weather-tile--period .weather-tile__temps{
  margin-bottom:8px;
}


/* --- Wind row (icon-free) --- */
.weather-windrow{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
}

.weather-windrow__line{
  display:block;
  width:100%;
  padding:4px 6px;
  border-radius:8px;
  font-size:0.8em;
  line-height:1.15;
  box-sizing:border-box;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Beaufort color scale */
.wind-bg--g  { background:#7fae8a; color:#0b2314; } /* 0-5 mattgrün */
.wind-bg--lg { background:#7CFC90; color:#073011; } /* 6 hellgrün */
.wind-bg--hy { background:#fff176; color:#3a2b00; } /* 7 hellgelb */
.wind-bg--dy { background:#fbc02d; color:#3a2400; } /* 8 dunkelgelb */
.wind-bg--or { background:#ff9800; color:#3a1f00; } /* 9 orange */
.wind-bg--lr { background:#ff6b6b; color:#3a0000; } /* 10 hellrot */
.wind-bg--dr { background:#c62828; color:#fff; }    /* 11 dunkelrot */
.wind-bg--mg { background:#d81b60; color:#fff; }    /* >=12 magenta */

/* ------------------------------------------------------------------
   Auto-contrast for dark badges (Temp + Wind)
   Some templates override default text colors; force a light font on
   dark backgrounds to keep readability.
------------------------------------------------------------------- */

/* Temperature badges: dark backgrounds -> light text */
.weather-tempbadge.temp-bg--dv,
.weather-tempbadge.temp-bg--hv,
.weather-tempbadge.temp-bg--tb,
.weather-tempbadge.temp-bg--gr,
.weather-tempbadge.temp-bg--dr,
.weather-tempbadge.temp-bg--mg,
.weather-tempbadge.temp-bg--pu{
  color:#f5f5f5 !important;
}

/* Ensure inner text inherits the chosen color */
.weather-tempbadge.temp-bg--dv .weather-tempbadge__label,
.weather-tempbadge.temp-bg--dv .weather-tempbadge__value,
.weather-tempbadge.temp-bg--hv .weather-tempbadge__label,
.weather-tempbadge.temp-bg--hv .weather-tempbadge__value,
.weather-tempbadge.temp-bg--tb .weather-tempbadge__label,
.weather-tempbadge.temp-bg--tb .weather-tempbadge__value,
.weather-tempbadge.temp-bg--gr .weather-tempbadge__label,
.weather-tempbadge.temp-bg--gr .weather-tempbadge__value,
.weather-tempbadge.temp-bg--dr .weather-tempbadge__label,
.weather-tempbadge.temp-bg--dr .weather-tempbadge__value,
.weather-tempbadge.temp-bg--mg .weather-tempbadge__label,
.weather-tempbadge.temp-bg--mg .weather-tempbadge__value,
.weather-tempbadge.temp-bg--pu .weather-tempbadge__label,
.weather-tempbadge.temp-bg--pu .weather-tempbadge__value{
  color:inherit !important;
}

/* Wind speed boxes: dark backgrounds -> light text */
.weather-windrow__line.wind-bg--g,
.weather-windrow__line.wind-bg--dr,
.weather-windrow__line.wind-bg--mg{
  color:#f5f5f5 !important;
}


/* --- Pressure box (neutral) --- */
.weather-pressurebox{
  background:#f2f2f2;
  border:1px solid #e0e0e0;
  border-radius:8px;
  padding:4px 6px;
  box-sizing:border-box;
}

/* Spacing between period tile sections */
.weather-tile--period .weather-tile__precip{ margin-top:10px; }
.weather-tile--period .weather-tile__wind{ margin-top:8px; }
.weather-tile--period .weather-tile__pressure{ margin-top:8px; }


/* Center pressure value horizontally inside the neutral box */
.weather-pressurebox .weather-info-row__lines{
  align-items:center;
  text-align:center;
}


/* Spacing between weather symbol and precip */
.weather-tile--period .weather-tile__icon{
  margin-bottom:8px;
}


/* Spacing between weather symbol and precip (day tile) */
.weather-tile--day .weather-tile__icon{
  margin-bottom:10px;
}


/* Center pressure row (icon + value) inside the neutral box */
.weather-pressurebox .weather-info-tile-row{
  justify-content:center;
}

.weather-pressurebox .weather-info-row__icon{
  margin-left:0;
  margin-right:0;
}

.weather-pressurebox .weather-info-row__lines{
  align-items:center;
  text-align:center;
}



/* Vertically center pressure content inside the neutral box */
.weather-tile__pressure{
  display:flex;
}

.weather-pressurebox{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:36px;
}



/* --- Pressure box: force true vertical centering --- */
.weather-pressurebox{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:38px;           /* fixed height to avoid "sticking to top" */
  padding:0 6px;         /* symmetric vertical padding */
  box-sizing:border-box;
}

.weather-pressurebox .weather-info-tile-row{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.weather-pressurebox .weather-info-row__lines{
  display:flex;
  flex-direction:column;
  justify-content:center;
}



/* --- Precipitation cup: values inside vessel, fill behind --- */
.weather-precipcup__vessel{
  position:relative;
}

.weather-precipcup__fill{
  z-index:1;
}

.weather-precipcup__overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:4px 6px;
  box-sizing:border-box;
  font-size:0.8em;
  line-height:1.05;
  white-space:nowrap;
}

.weather-precipcup__overlay span{
  background:rgba(255,255,255,0.65);
  border-radius:6px;
  padding:1px 4px;
}


/* --- Precipitation cup variants (prepared for hours/modules) --- */
.weather-precipcup--hour .weather-precipcup__vessel{ height:30px; }
.weather-precipcup--hour .weather-precipcup__overlay{ padding:4px 6px; font-size:0.8em; }

.weather-precipcup--module .weather-precipcup__vessel{ height:30px; }
.weather-precipcup--module .weather-precipcup__overlay{ padding:4px 6px; font-size:0.8em; }


/* Hourly temperature badge */
.weather-tempbadge--hour{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  justify-content:center;
  width:100%;
  padding:3px 6px;
  border-radius:10px;
  font-size:0.8em;
  box-sizing:border-box;
}


/* Hourly wind row variant */
.weather-windrow--hour .weather-windrow__line{
  font-size:0.75em;
  padding:3px 6px;
  border-radius:8px;
}


/* Hourly pressure box variant */
.weather-pressurebox--hour{
  min-height:32px;
}


/* Spacing in hourly cards */
.weather-hour__temp{ margin-top:4px; }
.weather-hour .weather-precipcup{ margin-top:6px; }
.weather-hour .weather-windrow{ margin-top:6px; }
.weather-hour .weather-pressurebox{ margin-top:6px; }



/* --- Center weather icons in tiles and hourly boxes --- */
/* Tiles: center icon under header consistently (day + period) */
.weather-tile__icon{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}

/* Ensure icon images don't behave like inline elements affecting baseline */
.weather-tile__icon img{
  display:block;
}

/* Hourly: center the icon within the hour card */
.weather-hour > img{
  display:block;
  margin-left:auto;
  margin-right:auto;
}


/* --- Strong normalization: icon + temp alignment across views (Tomorrow vs MultiDay) --- */
.weather-tile__icon{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  text-align:center !important;
}

.weather-tile__icon img{
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Prevent template CSS from adding extra margins/gaps inside temp badges */
.weather-tempbadge{
  gap:6px !important;
}

.weather-tempbadge img{
  margin:0 !important;
}

.weather-tempbadge--period{
  justify-content:center !important;
}

/* Hourly main weather icon centering */
.weather-hour > img{
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
  align-self:center !important;
}


/* --- UI tweak: Wind boxes +25% (size + height) --- */
.weather-windrow__line{
  font-size:1.0em;         /* was ~0.8em */
  padding:5px 8px;         /* was ~4px 6px */
  line-height:1.2;
}

/* Keep hours consistent with tiles */
.weather-windrow--hour .weather-windrow__line{
  font-size:1.0em;
  padding:5px 8px;
}

/* --- UI tweak: Temperature font sizes (hours = tiles) --- */
/* Hourly temp badge should match tile badge size */
.weather-tempbadge--hour{
  font-size:1.0em;
}

/* Ensure temp value is not shrunk in hours */
.weather-tempbadge--hour .weather-tempbadge__value{
  font-size:1.0em;
}


/* Force consistent weather icon size (prevents template overrides from scaling images) */
.weather-tile__icon img{
  width:65px !important;
  height:65px !important;
  max-width:65px !important;
  max-height:65px !important;
}
.weather-hour > img{
  width:65px !important;
  height:65px !important;
  max-width:65px !important;
  max-height:65px !important;
}


/* --- Sunrise/Sunset chips (day tile) --- */
.weather-sunchips{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-top:4px;
  gap:2px;           /* very tight middle */
  flex-wrap:nowrap;  /* always side-by-side */
}

.weather-sunchip{
  flex:0 0 calc(50% - 1px);
  width:calc(50% - 1px);
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:3px 4px;
  border-radius:10px;
  background:#f6f6f6;
  border:1px solid #e4e4e4;
  box-sizing:border-box;
}

.weather-sunchip__time{
  font-weight:700;
  white-space:nowrap;
  font-size:0.78em; /* fixed smaller to fit */
  line-height:1.05;
}

.weather-sunchip img{
  display:block;
  flex:0 0 auto;
}

/* Sunchips: smaller time text to fit backgrounds */
.weather-sunchip__time{
  font-size:clamp(0.68em, 0.85vw, 0.80em);
  line-height:1.05;
}


/* --- Tile framing: header background + full-tile border (all tiles 1-5) --- */
.weather-tiles .weather-tile{
  border:1px solid #d8d8d8;
  border-radius:12px;
  background:#ffffff;
  overflow:hidden; /* lets header background reach rounded corners */
  box-sizing:border-box;
}

.weather-tiles .weather-tile__head{
  background:#f6f6f6;            /* neutral like pressure box */
  border-bottom:1px solid #e4e4e4;
  padding:8px 10px;
  box-sizing:border-box;
}

/* Ensure inner blocks have consistent spacing within the framed tile */
.weather-tiles .weather-tile__sun,
.weather-tiles .weather-tile__icon,
.weather-tiles .weather-tile__values,
.weather-tiles .weather-tile__temps,
.weather-tiles .weather-tile__precip,
.weather-tiles .weather-tile__wind,
.weather-tiles .weather-tile__pressure{
  padding-left:10px;
  padding-right:10px;
  box-sizing:border-box;
}

/* Keep spacing tidy so border frames content nicely */
.weather-tiles .weather-tile__pressure{
  padding-bottom:10px;
}


/* Override: inner value blocks should reach tile edges (avoid wrapping/cropping) */
.weather-tiles .weather-tile__sun,
.weather-tiles .weather-tile__icon,
.weather-tiles .weather-tile__values,
.weather-tiles .weather-tile__temps,
.weather-tiles .weather-tile__precip,
.weather-tiles .weather-tile__wind,
.weather-tiles .weather-tile__pressure{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Keep a little bottom breathing room */
.weather-tiles .weather-tile__pressure{
  padding-bottom:10px;
}


/* Period tiles: pressure box should sit on bottom border (no extra bottom padding) */
.weather-tile--period .weather-tile__pressure{
  padding-bottom:0 !important;
}


/* --- Windrose (left of wind lines) --- */
.weather-windrow{
  display:flex;
  flex-direction:row;
  gap:8px;
  align-items:stretch;
}

.weather-windrow__meta{
  flex:0 0 40px;
  width:40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center; /* match height of 2 lines */
  gap:2px;
}

.weather-windrow__lines{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.weather-windrose{
  overflow:visible;
  width:33px;
  height:33px;
  border-radius:50%;
  border:1px solid #d0d0d0;
  background:#ffffff;
  position:relative;
  box-sizing:border-box;
}

/* small "N" marker */
.weather-windrose::before{
  content:'';
  position:absolute;
  top:3px;
  left:50%;
  width:2px;
  height:7px;
  background:#bdbdbd;
  border-radius:1px;
  transform:translateX(-50%);
}

/* center pivot dot */
.weather-windrose::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  background:#2b2b2b;
  opacity:.18;
  border-radius:50%;
  transform:translate(-50%, -50%);
}

.weather-windrose__arrow{
  position:absolute;
  inset:0;
  transform:rotate(var(--winddeg));
  transform-origin:50% 50%;
}

/* needle shaft (thin) */
.weather-windrose__arrow::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:23px;
  height:1px;
  background:#2b2b2b;
  border-radius:1px;
  transform:translate(-50%, -50%);
}

/* needle head */
.weather-windrose__arrow::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  border-left:6px solid #2b2b2b;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transform:translate(9px, -50%);
}

.weather-windrose__dir{
  font-size:0.88em;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

/* Windrow layouts (windrose placement) */
.weather-windrow__stack{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.weather-windrow__between{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}

.weather-windrow__h{
  display:flex;
  gap:8px;
  align-items:stretch;
}

.weather-windrow__meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:26px;
}


/* Windrose arrow: diameter-centered */
.weather-windrose__arrow::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  /* Needle head at "to" end (right) */
  width:0;
  height:0;
  border-left:5px solid #4a4a4a;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  transform:translate(4px, -50%);
}

.weather-windrose__arrow::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  /* Thin needle shaft across center */
  width:14px;   /* inner diameter for 18px circle with 2px border */
  height:1px;
  background:#4a4a4a;
  transform:translate(-50%, -50%);
  border-radius:1px;
}


/* --- Windrose spacing + layout --- */

/* Periods / Tiles: more air around the rose between the two wind lines */
.weather-windrow--tile .weather-windrow__stack{
  gap:6px; /* more space wind line ↔ rose block ↔ gust line */
}

.weather-windrow--tile .weather-windrow__between{
  padding:10px 10px; /* keep cardinals away from the wind lines */
  gap:6px;           /* more space between rose ↔ direction text */
}

/* Hourly: rose left of the wind lines, direction text below, enough room for cardinals */
.weather-windrow--hour .weather-windrow__meta{
  padding:4px 10px;
  min-width:56px; /* prevent cardinals from colliding with wind text */
  gap:6px;
}

/* --- Windrose: compass needle (thin, centered, nicer) --- */
/* Hide any legacy head pseudo */
.weather-windrose__arrow::after{
  display:none !important;
}

/* Draw a centered needle with pointed ends (compass needle look) */
.weather-windrose__arrow::before{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:23px !important;
  height:2px !important;
  background:linear-gradient(to right, #cfcfcf 0 48%, #2b2b2b 52% 100%) !important;
  clip-path:polygon(0 50%, 12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%) !important;
  transform:translate(-50%, -50%) !important;
  border-radius:0 !important;
}


/* --- Windrose: final simple arrow (centered needle + head) --- */
.weather-windrose__arrow{
  position:absolute !important;
  inset:0 !important;
  transform:rotate(var(--winddeg)) !important;
  transform-origin:50% 50% !important;
}

/* thin shaft through center */
.weather-windrose__arrow::before{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:23px !important;      /* inner diameter-ish */
  height:1px !important;
  background:#2b2b2b !important;
  transform:translate(-50%, -50%) !important;
  border-radius:1px !important;
  clip-path:none !important;
}

/* triangle head at "to" end (right) */
.weather-windrose__arrow::after{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:0 !important;
  height:0 !important;
  border-left:6px solid #2b2b2b !important;
  border-top:3px solid transparent !important;
  border-bottom:3px solid transparent !important;
  transform:translate(9px, -50%) !important;
  background:none !important;
}


/* --- Windrose needle via SVG (thin like reference) --- */
.weather-windrose__svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.weather-windrose__needle{
  transform:rotate(var(--winddeg));
  transform-origin:50% 50%;
}

.weather-windrose__needle line{
  stroke:#2b2b2b;
  stroke-width:2;
  stroke-linecap:round;
}

.weather-windrose__needle polygon{
  fill:#2b2b2b;
  stroke:#2b2b2b;
  stroke-width:1;
  stroke-linejoin:round;
}


/* ensure legacy pseudo-arrow is never shown */
.weather-windrose__arrow{ display:none !important; }

.weather-windrose__svg{shape-rendering:geometricPrecision;}


/* Windrose cardinals (N,O,S,W) */
.weather-windrose__cardinal{
  position:absolute;
  font-size:8px;
  font-weight:700;
  color:#d0d0d0; /* same tone as circle border */
  line-height:1;
  user-select:none;
}

.weather-windrose__cardinal--n{ top:-8px; left:50%; transform:translateX(-50%); }
.weather-windrose__cardinal--s{ bottom:-8px; left:50%; transform:translateX(-50%); }
.weather-windrose__cardinal--w{ left:-9px; top:50%; transform:translateY(-50%); }
.weather-windrose__cardinal--e{ right:-9px; top:50%; transform:translateY(-50%); }


/* ==========================================================================
   Windrose layout overrides (Periods vs Hourly) — 1.9.17
   ========================================================================== */

/* Avoid shrink-to-content: let wind blocks use full available width */
.weather-windrow--tile,
.weather-windrow--hour,
.weather-windrow--module{
  display:block;
  width:100%;
}

.weather-windrow--tile .weather-windrow__stack,
.weather-windrow--hour .weather-windrow__h,
.weather-windrow--module .weather-windrow__h{
  width:100%;
}

/* Base tile (day tile): keep the between-block compact */
.weather-windrow--tile .weather-windrow__between{
  padding:4px 0;
  gap:4px;
  width:100%;
  box-sizing:border-box;
}

/* Periods (Kachel 2–5): direction text LEFT of the rose + more “air” */
.weather-tile--period .weather-windrow__between{
  flex-direction:row;
  align-items:center;
  justify-content:center;
  padding:10px 10px; /* requested spacing around the rose */
  gap:8px;           /* more distance text ↔ rose */
}

.weather-tile--period .weather-windrose__dir{ order:0; }
.weather-tile--period .weather-windrose{ order:1; }

/* More vertical air between wind line ↔ between ↔ gust line (Periods) */
.weather-tile--period .weather-windrow__stack{
  gap:6px;
}

/* Hourly: rose + dir stacked (dir below), LEFT of the two wind lines, always visible */
.weather-windrow--hour .weather-windrow__h{
  display:flex;
  flex-direction:row;
  align-items:center; /* vertically center meta vs. the 2 wind lines */
  gap:8px;
}

.weather-windrow--hour .weather-windrow__meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  padding:4px 10px;
  min-width:56px; /* enough room for cardinals */
  box-sizing:border-box;
  flex:0 0 auto;
}

.weather-windrow--hour .weather-windrose{
  display:block;
  width:33px;
  height:33px;
  margin:0 auto;
  flex:0 0 auto;
}

.weather-windrow--hour .weather-windrose__svg{ display:block; }


.weather-windrow--hour .weather-windrose__dir{
  display:block;
  width:100%;
  text-align:center;
}

.weather-windrow--hour .weather-windrow__lines{
  flex:1 1 auto;
  min-width:0;
}