/* mod_wetterdiagramm – Darstellung der Reiter und Bedienelemente */
.ow-wd {
  --ow-wd-akzent: #ff7400;
  --ow-wd-blau: #1836ad;
  --ow-wd-rahmen: #dfe3e8;
  --ow-wd-text-leise: #5b6470;
  font-size: .95rem;
}

/* Reiter als Chips: am Laptop umbrechend, auf dem Handy eine wischbare Zeile (siehe unten) */
.ow-wd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.ow-wd-tab {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid var(--ow-wd-rahmen);
  border-radius: 999px;
  background: #fff;
  padding: 7px 14px;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ow-wd-blau);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.ow-wd-tab:hover {
  background: #f0f3fa;
  border-color: #c5cde0;
}
.ow-wd-tab[aria-selected="true"] {
  background: var(--ow-wd-blau);
  border-color: var(--ow-wd-blau);
  color: #fff;
}
.ow-wd-tab:focus-visible,
.ow-wd button:focus-visible,
.ow-wd select:focus-visible,
.ow-wd input:focus-visible + span {
  outline: 3px solid var(--ow-wd-akzent);
  outline-offset: 2px;
}

.ow-wd-steuerung {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.ow-wd-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.ow-wd-zeile label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.ow-wd select {
  padding: 6px 8px;
  border: 1px solid var(--ow-wd-rahmen);
  border-radius: 6px;
  background: #fff;
  font: inherit;
}

.ow-wd-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 0;
  padding: 0;
  margin: 0;
}
.ow-wd-felder legend {
  width: 100%;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 4px;
  float: none;
}
.ow-wd-chip {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.ow-wd-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ow-wd-chip span {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--ow-wd-rahmen);
  border-radius: 999px;
  background: #fff;
  line-height: 1.3;
  user-select: none;
}
.ow-wd-chip input:checked + span {
  background: var(--ow-wd-blau);
  border-color: var(--ow-wd-blau);
  color: #fff;
}
.ow-wd-chip input:checked + span::before {
  content: "✓ ";
}

.ow-wd-link {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--ow-wd-blau);
  border-radius: 6px;
  background: #fff;
  color: var(--ow-wd-blau);
  font: inherit;
  cursor: pointer;
}
.ow-wd-status {
  color: var(--ow-wd-text-leise);
}

.ow-wd-chart {
  width: 100%;
  height: var(--ow-wd-hoehe, 520px);
}
.ow-wd-chart-gross {
  height: calc(var(--ow-wd-hoehe, 520px) + 80px);
}
.ow-wd-chart-kalender {
  height: calc(var(--ow-wd-hoehe, 520px) + 160px);
}

.ow-wd-hinweis,
.ow-wd-fuss {
  color: var(--ow-wd-text-leise);
  font-size: .85rem;
}
.ow-wd-fuss {
  margin-top: 16px;
  border-top: 1px solid var(--ow-wd-rahmen);
  padding-top: 8px;
}
.ow-wd-fehler {
  padding: 12px;
  border-left: 4px solid #c92a2a;
  background: #fff5f5;
}

@media (max-width: 575.98px) {
  .ow-wd-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    /* weicher Rand rechts: zeigt, dass es weitergeht */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .ow-wd-tabs::-webkit-scrollbar {
    display: none;
  }
  .ow-wd-tab {
    scroll-snap-align: start;
    padding: 6px 12px;
    font-size: .85rem;
  }
  .ow-wd-tab:last-child {
    margin-right: 28px;   /* letzter Chip nicht unter dem weichen Rand */
  }
  .ow-wd-chart {
    height: 380px;
  }
  .ow-wd-chart-gross {
    height: 460px;
  }
  .ow-wd-chart-kalender {
    height: 620px;
  }
  .ow-wd-link {
    margin-left: 0;
  }
}

/* Klimadiagramm: Datentabelle mit Rekordmarkierung */
.ow-wd-klimatabelle {
  overflow-x: auto;
  margin-top: 12px;
}
.ow-wd-klimatabelle:focus-visible {
  outline: 2px solid #1836ad;
  outline-offset: 2px;
}
.ow-wd-kt {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.ow-wd-kt caption {
  caption-side: top;
  padding: 0 0 6px;
  font-weight: 700;
  color: #1836ad;
  text-align: left;
}
.ow-wd-kt th,
.ow-wd-kt td {
  padding: 4px 7px;
  border-bottom: 1px solid #e3e6ea;
  text-align: right;
  white-space: nowrap;
}
.ow-wd-kt thead td {
  border: 0;
}
.ow-wd-kt thead th {
  font-size: .78rem;
  color: #5b6470;
}
.ow-wd-kt thead th[scope="colgroup"] {
  text-align: center;
  color: #1836ad;
  font-size: .9rem;
  border-bottom: 2px solid #1836ad;
}
.ow-wd-kt thead th.ow-wd-kt-mittel {
  color: #495057;
  border-bottom-color: #adb5bd;
}
.ow-wd-kt th[scope="colgroup"] + th[scope="colgroup"],
.ow-wd-kt tbody td:nth-child(5n + 2) {
  border-left: 2px solid #e3e6ea;
}
/* Monatsspalte bleibt beim seitlichen Wischen stehen */
.ow-wd-kt tbody th,
.ow-wd-kt thead tr:last-child th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  text-align: left;
}
.ow-wd-kt-jahr th,
.ow-wd-kt-jahr td {
  border-top: 2px solid #343a40;
  font-weight: 700;
}
.ow-wd-rekzelle-hoch { background: #fff0f0; }
.ow-wd-rekzelle-tief { background: #e7f5ff; }
/* Kontrast ≥ 4.5:1 */
.ow-wd-rek {
  display: inline-block;
  min-width: 1.35em;
  padding: 0 3px;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  vertical-align: 1px;
}
.ow-wd-rek-hoch { background: #c92a2a; }
.ow-wd-rek-tief { background: #1864ab; }

/* Einstellungen einklappbar (nur Handy): Zusammenfassungszeile über dem Diagramm, darunter kompakte Chips */
.ow-wd-einstellungen {
  display: none;
}
@media (max-width: 575.98px) {
  .ow-wd-einstellungen {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin: 0 0 10px;
    padding: 6px 12px;
    border: 1px solid var(--ow-wd-rahmen);
    border-radius: 10px;
    background: #f5f7fc;
    color: #212529;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .ow-wd-einstellungen:focus-visible {
    outline: 3px solid var(--ow-wd-akzent);
    outline-offset: 2px;
  }
  .ow-wd-einst-titel {
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ow-wd-blau);
  }
  .ow-wd-einst-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: .8rem;
    color: var(--ow-wd-text-leise);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .ow-wd-einst-pfeil {
    flex: 0 0 auto;
    color: var(--ow-wd-blau);
    transition: transform .2s;
  }
  .ow-wd-einstellungen[aria-expanded="true"] .ow-wd-einst-pfeil {
    transform: rotate(180deg);
  }
  .ow-wd .ow-wd-steuerung.ow-wd-zu {
    display: none;
  }
  /* kompakt */
  .ow-wd-steuerung {
    gap: 8px;
  }
  .ow-wd-felder {
    gap: 4px;
  }
  .ow-wd-felder legend {
    font-size: .8rem;
    margin-bottom: 2px;
  }
  .ow-wd-chip span {
    padding: 3px 9px;
    font-size: .78rem;
  }
  .ow-wd-zeile {
    gap: 6px 12px;
    font-size: .85rem;
  }
  .ow-wd select {
    font-size: .85rem;
  }
  .ow-wd-link {
    padding: 4px 10px;
    font-size: .8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ow-wd-einst-pfeil { transition: none; }
}

/* „Frag die Wetterstation“ (Baukasten) */
.ow-wd-frage {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--ow-wd-rahmen);
  border-left: 4px solid var(--ow-wd-akzent);
  border-radius: 10px;
  background: #fbfcff;
}
.ow-wd-frage-titel {
  display: block;
  margin: 0 0 6px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ow-wd-blau);
}
.ow-wd-frage-zeile {
  display: flex;
  gap: 8px;
}
.ow-wd-frage-zeile input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font: inherit;
}
.ow-wd-frage-zeile button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 6px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--ow-wd-blau);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ow-wd-frage-zeile input:focus-visible,
.ow-wd-frage-zeile button:focus-visible,
.ow-wd-frage-bsp:focus-visible {
  outline: 3px solid var(--ow-wd-akzent);
  outline-offset: 2px;
}
.ow-wd-frage-antwort:empty {
  display: none;
}
.ow-wd-frage-antwort {
  margin-top: 8px;
}
.ow-wd-frage-antwort p {
  margin: 0 0 4px;
}
.ow-wd-frage-verstanden {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ow-wd-text-leise);
}
.ow-wd-frage-text {
  font-size: .95rem;
  line-height: 1.45;
}
.ow-wd-frage-beispiele {
  font-size: .8rem;
  color: var(--ow-wd-text-leise);
}
.ow-wd-frage-bsp {
  margin: 2px 2px 0 0;
  padding: 2px 9px;
  border: 1px solid var(--ow-wd-rahmen);
  border-radius: 999px;
  background: #fff;
  color: var(--ow-wd-blau);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
@media (max-width: 575.98px) {
  .ow-wd-frage {
    padding: 8px 10px;
  }
  .ow-wd-frage-titel {
    font-size: .8rem;
  }
  .ow-wd-frage-text {
    font-size: .88rem;
  }
}
/* „An welchen Tagen …?“ – kompakte Liste, bei vielen Tagen scrollbar */
.ow-wd-frage-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 16px;
  max-height: 260px;
  overflow-y: auto;
  margin: 6px 0 0;
  padding: 6px 8px;
  border: 1px solid var(--ow-wd-rahmen);
  border-radius: 8px;
  background: #fff;
  list-style: none;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.ow-wd-frage-liste li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px dotted var(--ow-wd-rahmen);
}
.ow-wd-frage-liste:focus-visible {
  outline: 3px solid var(--ow-wd-akzent);
  outline-offset: 2px;
}

/* Handy: Beschreibungen und Quellenangaben an den Diagrammen kleiner (Platz für die Grafik) */
@media (max-width: 575.98px) {
  .ow-wd-hinweis,
  .ow-wd-fuss,
  .ow-bil-erklaerung,
  .ow-pv-erklaerung,
  .ow-zamb-info,
  .ow-en-info,
  .ow-en-quelle,
  .ow-radar-quelle,
  .ow-wd-frage-text {
    font-size: .8rem;
    line-height: 1.4;
  }
  .ow-en-quelle,
  .ow-radar-quelle,
  .ow-wd-fuss {
    font-size: .72rem;
  }
}