/* ============================================================
   Weide-Wetter – Mobile-first Styles
   ============================================================ */

:root {
  --bg: #0f1720;
  --bg-2: #172230;
  --karte: #1c2a3a;
  --karte-2: #223448;
  --text: #eaf1f8;
  --text-schwach: #9fb3c8;
  --linie: #2c3e52;

  --gruen: #2fae5a;
  --gelb: #f0b429;
  --rot: #e5484d;
  --blau: #3c8cff;

  --schatten: 0 2px 10px rgba(0,0,0,.35);
  --radius: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain; /* für Pull-to-Refresh */
}

#app {
  max-width: 640px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 14px calc(24px + env(safe-area-inset-bottom));
}

h1 { font-size: 1.3rem; margin: 0; }
h2 { font-size: 1.0rem; margin: 0 0 10px; color: var(--text-schwach); font-weight: 600; }

/* ---------- Kopfzeile ---------- */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px 8px;
}
.stand { font-size: .8rem; color: var(--text-schwach); margin-top: 2px; }
.refresh-btn {
  background: var(--karte);
  color: var(--text);
  border: 1px solid var(--linie);
  border-radius: 50%;
  width: 44px; height: 44px;
  font-size: 1.4rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.refresh-btn:active { transform: rotate(90deg); }
.refresh-btn.dreht { animation: dreh 1s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---------- Ampel ---------- */
.ampel {
  border-radius: var(--radius);
  padding: 18px 18px;
  margin: 6px 0 14px;
  box-shadow: var(--schatten);
  text-align: center;
  color: #fff;
  transition: background .3s;
}
.ampel-stufe { font-size: 1.9rem; font-weight: 800; letter-spacing: .5px; }
.ampel-grund { font-size: .95rem; margin-top: 6px; opacity: .95; }
.ampel--gruen { background: linear-gradient(135deg, #2fae5a, #1e7f41); }
.ampel--gelb  { background: linear-gradient(135deg, #f0b429, #c98a10); color:#231a02; }
.ampel--rot   { background: linear-gradient(135deg, #e5484d, #b21f24); }
.ampel--lade  { background: var(--karte); color: var(--text-schwach); }

/* ---------- DWD-Warnungen ---------- */
.warnungen { margin: 0 0 14px; }
.warnkarte {
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-left: 6px solid var(--rot);
  background: #2a1618;
}
.warnkarte.sev-Minor    { border-color: var(--gelb); background:#2a2410; }
.warnkarte.sev-Moderate { border-color: var(--gelb); background:#2a2410; }
.warnkarte.sev-Severe   { border-color: var(--rot); background:#2a1618; }
.warnkarte.sev-Extreme  { border-color: #ff5cf0; background:#2a0f28; }
.warnkarte .wtitel { font-weight: 700; }
.warnkarte .wmeta  { font-size: .8rem; color: var(--text-schwach); margin-top: 3px; }
.warnkarte .wtext  { font-size: .85rem; margin-top: 6px; color: #d7e2ee; }

/* ---------- Kacheln ---------- */
.kacheln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.kachel {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--schatten);
}
.kachel-titel { font-size: .82rem; color: var(--text-schwach); }
.kachel-wert  { font-size: 2rem; font-weight: 800; line-height: 1.1; margin-top: 4px; }
.kachel-sub   { font-size: .78rem; color: var(--text-schwach); }
.kachel.warn-gelb { border-color: var(--gelb); box-shadow: 0 0 0 1px var(--gelb) inset; }
.kachel.warn-rot  { border-color: var(--rot);  box-shadow: 0 0 0 1px var(--rot) inset; }

/* ---------- Blöcke ---------- */
.block {
  background: var(--bg-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
}

/* ---------- Vergleichstabelle (kompakt – alle Modelle nebeneinander) ---------- */
.tabelle-wrap { overflow-x: auto; }
table.vergleich {
  width: 100%; border-collapse: collapse;
  font-size: .78rem; table-layout: fixed;
}
table.vergleich th, table.vergleich td {
  padding: 6px 2px;
  text-align: center;
  border-bottom: 1px solid var(--linie);
  white-space: normal;            /* Überschriften/Werte dürfen umbrechen */
  word-break: break-word;
  line-height: 1.15;
}
/* erste Spalte = Zeilenbeschriftung (schmal, 2-zeilig, mit Symbol) */
table.vergleich th:first-child, table.vergleich td:first-child {
  text-align: left;
  color: var(--text-schwach);
  width: 58px;
  font-size: .74rem;
}
table.vergleich td:first-child .einheit { color: var(--text-schwach); font-size: .66rem; }
.q-name { font-weight: 700; font-size: .72rem; display: inline-block; }
.q-online  { color: var(--gruen); }
.q-offline { color: var(--rot); }
td.abweichung {
  background: rgba(240,180,41,.18);
  outline: 1px solid var(--gelb);
  border-radius: 5px;
  font-weight: 700;
}

/* ---------- Regen-Ausblick (kleine Blöcke mit Uhrzeit) ---------- */
.ausblick-kopf { font-size: .95rem; margin-bottom: 10px; }
.ausblick-kopf b { color: var(--text); }
.ausblick-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 6px;
}
.ausblick-chip {
  border-radius: 9px; padding: 6px 3px; text-align: center;
  border: 1px solid var(--linie);
}
.ausblick-chip .af-zeit { font-size: .68rem; color: var(--text-schwach); }
.ausblick-chip .af-wert { font-size: .84rem; font-weight: 700; margin-top: 2px; }
.ausblick-chip .af-prob { font-size: .62rem; color: var(--text-schwach); }
.ausblick-chip.trocken { background: rgba(47,174,90,.14); border-color: var(--gruen); }
.ausblick-chip.nass    { background: rgba(60,140,235,.16); border-color: var(--blau); }
.hinweis { font-size: .82rem; color: var(--text-schwach); margin-top: 8px; }
.hinweis.warn { color: var(--gelb); }

/* ---------- Gewitter ---------- */
.gewitter { font-size: .95rem; line-height: 1.5; }
.gewitter .stark { color: var(--rot); font-weight: 700; }
.gewitter .ok { color: var(--gruen); font-weight: 700; }

/* ---------- 2h-Strip (15-Min) ---------- */
.strip { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.strip .bar {
  flex: 1;
  min-width: 6px;
  background: var(--karte-2);
  border-radius: 4px 4px 0 0;
  position: relative;
  display:flex; align-items:flex-end; justify-content:center;
}
.strip .bar .fill { width: 100%; border-radius: 4px 4px 0 0; background: var(--blau); }
.strip .bar .lab { position:absolute; bottom:-18px; font-size:.62rem; color:var(--text-schwach); }
.strip-legende { font-size: .78rem; color: var(--text-schwach); margin-top: 24px; }

/* ---------- 24h je Quelle ---------- */
.q24 { margin-bottom: 12px; }
.q24-name { font-size: .82rem; color: var(--text-schwach); margin-bottom: 4px; }
.q24-strip { display: flex; align-items: flex-end; gap: 2px; height: 56px; }
.q24-strip .b {
  flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; background: var(--karte-2);
}
.q24-achse { display:flex; justify-content: space-between; font-size:.62rem; color:var(--text-schwach); margin-top:4px; }
.regen-legende { display:flex; flex-wrap:wrap; gap:10px; font-size:.75rem; color:var(--text-schwach); margin-top:6px; }
.regen-legende span { display:inline-flex; align-items:center; gap:5px; }
.regen-legende i { width:12px; height:12px; border-radius:3px; display:inline-block; }

/* ---------- „Kein Regen"-Notiz ---------- */
.kein-regen {
  text-align: center; font-size: .85rem; color: var(--text-schwach);
  padding: 8px; margin-bottom: 14px;
  background: var(--bg-2); border: 1px solid var(--linie); border-radius: 12px;
}

/* ---------- Sonne & Hitze (klein, untergeordnet) ---------- */
.sonne-info {
  font-size: .8rem; color: var(--text-schwach);
  text-align: center; line-height: 1.6;
  margin: 2px 0 14px; padding: 6px 8px;
}
.sonne-info .hitze-hinweis { color: var(--gelb); font-weight: 600; }

/* ---------- Sonne ---------- */
.sonne-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sonne-item { background: var(--karte); border:1px solid var(--linie); border-radius:12px; padding:10px 12px; }
.sonne-item .t { font-size:.78rem; color:var(--text-schwach); }
.sonne-item .v { font-size:1.3rem; font-weight:700; margin-top:2px; }
.sonne-item.warn-gelb { border-color: var(--gelb); }
.sonne-item.warn-rot  { border-color: var(--rot); }

/* ---------- Fuß ---------- */
.fuss { margin-top: 8px; }
.quellen-status { font-size:.78rem; color:var(--text-schwach); margin-bottom:8px; line-height:1.6; }
.quellen-status .s-ok { color: var(--gruen); }
.quellen-status .s-aus { color: var(--rot); }
.fuss-info { font-size:.75rem; color:var(--text-schwach); line-height:1.5; }

/* ---------- Pull-to-Refresh ---------- */
.ptr {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--text-schwach);
  font-size: .85rem;
  background: var(--bg);
  z-index: 50;
  transition: height .15s ease;
}
.ptr.aktiv #ptr-text { color: var(--gruen); }

/* ---------- Kopf-Buttons ---------- */
.kopf-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.kopf-btn {
  background: var(--karte);
  color: var(--text);
  border: 1px solid var(--linie);
  border-radius: 50%;
  width: 44px; height: 44px;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.kopf-btn#refresh.dreht { animation: dreh 1s linear infinite; }

/* ---------- Ampel-Legende ---------- */
.ampel-legende {
  display: flex; justify-content: center; gap: 14px;
  font-size: .78rem; color: var(--text-schwach);
  margin: -8px 0 14px;
}
.ampel-legende .pkt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: middle; }
.pkt.gruen { background: var(--gruen); }
.pkt.gelb  { background: var(--gelb); }
.pkt.rot   { background: var(--rot); }

/* ---------- 3-Tage-Vorschau ---------- */
.dreitage { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tag {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
}
.tag .tag-name { font-size: .8rem; color: var(--text-schwach); font-weight: 600; }
.tag .tag-emoji { font-size: 1.7rem; margin: 4px 0; }
.tag .tag-temp { font-size: 1.05rem; font-weight: 700; }
.tag .tag-temp .min { color: var(--text-schwach); font-weight: 400; }
.tag .tag-zeile { font-size: .72rem; color: var(--text-schwach); margin-top: 3px; }
.tag.warn-rot { border-color: var(--rot); }
.tag.warn-gelb { border-color: var(--gelb); }
/* auslösender Wert farbig hervorgehoben */
.tag .w-gelb { color: var(--gelb); font-weight: 700; }
.tag .w-rot  { color: var(--rot);  font-weight: 700; }
.tag { cursor: pointer; }
.tag:active { filter: brightness(1.12); }
.tag .tag-mehr { font-size: .68rem; color: var(--blau); margin-top: 6px; }

/* ---------- Tages-Detailansicht ---------- */
.td-uebersicht { display: flex; gap: 14px; align-items: center; background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 14px; }
.td-uebersicht .td-emoji { font-size: 2.6rem; }
.td-txt { color: var(--text-schwach); font-size: .85rem; }
.td-temp { font-size: 1.5rem; font-weight: 800; }
.td-temp .min { color: var(--text-schwach); font-weight: 400; font-size: 1.1rem; }
.td-meta { font-size: .8rem; color: var(--text-schwach); margin-top: 4px; }
.td-h3 { font-size: .95rem; margin: 18px 0 8px; }
.td-stunden { display: flex; flex-direction: column; gap: 2px; }
.td-stunde { display: grid; grid-template-columns: 46px 30px 40px 1fr auto; align-items: center; gap: 6px; padding: 7px 8px; border-bottom: 1px solid var(--linie); font-size: .85rem; }
.td-stunde .td-h { color: var(--text-schwach); }
.td-stunde .td-i { font-size: 1.1rem; }
.td-stunde .td-t { font-weight: 700; }
.td-stunde .td-r { color: var(--text-schwach); }
.td-stunde .td-r small { font-size: .7em; }
.td-stunde .td-r.nass { color: var(--blau); font-weight: 700; }
.td-stunde .td-w { color: var(--text-schwach); }

/* ---------- Regenradar (iframe) ---------- */
.radar-wrap {
  position: relative; width: 100%;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--linie);
  background: var(--karte);
}
#radar { width: 100%; height: 320px; border: 0; display: block; }

/* ---------- Webcam ---------- */
.webcam-wrap {
  position: relative; width: 100%;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--linie); background: var(--karte);
}
#webcam-img { width: 100%; display: block; }
#webcam-frame { width: 100%; height: 300px; border: 0; display: block; }
.webcam-platzhalter {
  padding: 34px 16px; text-align: center; color: var(--text-schwach);
  background: var(--karte); border: 1px dashed var(--linie); border-radius: 12px;
}
.webcam-platzhalter .wc-icon { font-size: 2.4rem; opacity: .8; }
.webcam-platzhalter .wc-text { font-size: 1rem; font-weight: 700; margin-top: 8px; color: var(--text); }
.webcam-platzhalter .wc-sub { font-size: .8rem; margin-top: 6px; line-height: 1.5; }

/* ---------- App-Links ---------- */
.app-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-link {
  display: flex; align-items: center; gap: 8px;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 12px; padding: 12px;
  color: var(--text); text-decoration: none;
  font-weight: 600; font-size: .92rem;
}
.app-link:active { background: var(--karte-2); }
.app-link .emoji { font-size: 1.3rem; }
.app-link .pfeil { margin-left: auto; color: var(--text-schwach); }

/* ---------- Buttons allgemein ---------- */
.voll-btn {
  display: block; width: 100%;
  padding: 13px; margin-top: 8px;
  border-radius: 12px; border: 1px solid var(--linie);
  background: var(--karte); color: var(--text);
  font-size: .95rem; font-weight: 600; cursor: pointer;
  text-align: center; text-decoration: none;
}
.voll-btn.primär { background: var(--gruen); border-color: var(--gruen); color: #fff; margin-top: 16px; }
.voll-btn.sekundär { background: transparent; }
.voll-btn:active { filter: brightness(1.1); }
.klein-btn {
  padding: 0 14px; border-radius: 10px; border: 1px solid var(--linie);
  background: var(--gruen); color: #fff; font-weight: 600; cursor: pointer;
}

/* ---------- Einstellungen-Overlay ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6,10,16,.75);
  overflow-y: auto;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.overlay-inhalt {
  max-width: 640px; margin: 0 auto;
  min-height: 100%;
  background: var(--bg);
  padding: env(safe-area-inset-top) 16px calc(28px + env(safe-area-inset-bottom));
}
.overlay-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 6px;
  position: sticky; top: 0; background: var(--bg); z-index: 2;
}
.overlay-kopf h2 { color: var(--text); font-size: 1.2rem; margin: 0; }
.x-btn {
  background: var(--karte); color: var(--text); border: 1px solid var(--linie);
  border-radius: 50%; width: 40px; height: 40px; font-size: 1.1rem; cursor: pointer;
}
.set-block {
  background: var(--bg-2); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 14px; margin-bottom: 14px;
}
.set-block h3 { margin: 0 0 10px; font-size: 1rem; }
.aktueller-ort { font-size: .9rem; margin-bottom: 10px; }
.such-zeile { display: flex; gap: 8px; }
.such-zeile input { flex: 1; }
.set-block input {
  background: var(--karte); color: var(--text);
  border: 1px solid var(--linie); border-radius: 10px;
  padding: 12px; font-size: 1rem; width: 100%;
}
.feld { display: block; font-size: .85rem; color: var(--text-schwach); margin-bottom: 10px; }
.feld input { margin-top: 5px; }
.ort-ergebnisse { margin: 8px 0; }
.ort-treffer {
  padding: 12px; border: 1px solid var(--linie); border-radius: 10px;
  margin-bottom: 6px; cursor: pointer; background: var(--karte);
}
.ort-treffer:active { background: var(--karte-2); }
.ort-treffer .haupt { font-weight: 600; }
.ort-treffer .neben { font-size: .8rem; color: var(--text-schwach); }
.mini-hinweis { font-size: .78rem; color: var(--text-schwach); line-height: 1.5; margin-top: 8px; }
.app-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--linie);
}
.app-toggle:last-child { border-bottom: 0; }
.app-toggle input { width: 22px; height: 22px; flex: 0 0 auto; }
.app-toggle label { font-size: .95rem; }