/* ==========================================================
   Agrarwetter Biohof Sendas – mobile-first, Stil wie Betriebsapp
   Hoher Kontrast fuer Sonnenlicht auf dem Feld.
   ========================================================== */
:root{
  --green:#2e7d32; --green-d:#1b5e20; --green-l:#e8f5e9;
  --blue:#1976d2; --blue-l:#e3f2fd;
  --orange:#e65100; --orange-l:#fff3e0;
  --red:#b71c1c; --red-l:#ffebee;
  --gray:#f5f5f5; --border:#d5d5d0; --text:#111; --text2:#555;
  --shadow:0 2px 8px rgba(0,0,0,.10);
  --radius:10px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;color:var(--text);background:#fafaf7;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}

/* -------- Header -------- */
.hdr{
  background:linear-gradient(135deg,var(--green),var(--green-d));
  color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.18);position:sticky;top:0;z-index:20;
}
.hdr h1{margin:0;font-size:18px;font-weight:600;flex:1}
.hdr .alter{font-size:12px;opacity:.9;text-align:right;line-height:1.3}
.status-dot{width:10px;height:10px;border-radius:50%;background:#f44336;flex-shrink:0}
.status-dot.ok{background:#7ee081}

/* -------- Offline-Banner -------- */
.offline-banner{
  display:none;background:var(--orange);color:#fff;font-weight:600;
  padding:9px 16px;font-size:14px;text-align:center;
}
.offline-banner.sichtbar{display:block}

/* -------- Standort-Tabs -------- */
.standort-tabs{
  display:flex;background:#fff;border-bottom:2px solid var(--border);
  position:sticky;top:calc(46px + env(safe-area-inset-top));z-index:19;
}
.standort-tab{
  flex:1;min-height:48px;background:none;border:0;cursor:pointer;
  font-size:16px;font-weight:600;color:var(--text2);
  border-bottom:3px solid transparent;padding:10px 8px;
}
.standort-tab .sub{display:block;font-size:11px;font-weight:400;color:var(--text2)}
.standort-tab.aktiv{color:var(--green-d);border-bottom-color:var(--green)}

/* -------- Layout -------- */
.inhalt{max-width:1100px;margin:0 auto;padding:12px}
.standort-bereich{display:none}
.standort-bereich.aktiv{display:block}

@media(min-width:768px){
  .standort-tabs{display:none}
  .inhalt{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .standort-bereich{display:block}
  .standort-bereich h2.standort-titel{display:block}
}
h2.standort-titel{
  display:none;margin:4px 0 10px;font-size:17px;color:var(--green-d);
}

/* -------- Karten -------- */
.karte{
  background:#fff;border-radius:var(--radius);padding:14px;margin-bottom:12px;
  box-shadow:var(--shadow);
}
.karte h3{margin:0 0 10px;font-size:15px;color:var(--green-d)}

/* -------- Tagesuebersicht: 10 Tage, horizontal wischbar -------- */
.tage{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
}
.tag{
  flex:0 0 76px;text-align:center;background:var(--gray);
  border-radius:8px;padding:8px 4px;scroll-snap-align:start;
}
.tag .name{font-size:12px;font-weight:600;color:var(--text2)}
.tag .symbol{font-size:26px;line-height:1.4}
.tag .temp{font-size:14px;font-weight:600}
.tag .temp .min{color:var(--blue);font-weight:400}
.tag .regen{font-size:11px;color:var(--blue);font-weight:600;white-space:nowrap}
/* Tage 5-10: schmaler und dezenter (tieferer Detailgrad) */
.tag.kompakt{flex-basis:60px;padding:8px 2px;opacity:.9}
.tag.kompakt .symbol{font-size:20px;line-height:1.5}
.tag.kompakt .temp{font-size:13px}

/* -------- Chart -------- */
.chart-schalter{display:flex;gap:6px;margin-bottom:10px}
.chart-schalter button{
  flex:1;min-height:44px;border:1px solid var(--border);background:#fff;
  border-radius:8px;font-size:14px;font-weight:600;color:var(--text2);cursor:pointer;
}
.chart-schalter button.aktiv{
  background:var(--green);border-color:var(--green);color:#fff;
}
.chart-wrap{display:flex;align-items:flex-start}
canvas.chart-achse{flex:0 0 36px;height:230px}
.chart-scroll{
  flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
canvas.chart{height:230px;display:block;touch-action:pan-x pan-y}
.chart-legende{font-size:11px;color:var(--text2);margin-top:6px;text-align:center}

/* -------- Kennzahlen (Ampeln) -------- */
.kennzahl{
  display:flex;align-items:center;gap:12px;background:#fff;
  border-radius:var(--radius);padding:12px 14px;margin-bottom:8px;
  box-shadow:var(--shadow);cursor:pointer;border-left:8px solid var(--border);
  min-height:56px;
}
.kennzahl.gruen{border-left-color:#2e7d32}
.kennzahl.gelb{border-left-color:#e65100}
.kennzahl.rot{border-left-color:#b71c1c}
.kennzahl.neutral{border-left-color:#607d8b}
.kennzahl .haupt{flex:1;min-width:0}
.kennzahl .name{font-weight:600;font-size:15px}
.kennzahl .kurz{font-size:13px;color:var(--text2)}
.kennzahl .wert-badge{
  font-size:14px;font-weight:700;padding:6px 10px;border-radius:8px;white-space:nowrap;
}
.wert-badge.gruen{background:var(--green-l);color:var(--green-d)}
.wert-badge.gelb{background:var(--orange-l);color:var(--orange)}
.wert-badge.rot{background:var(--red-l);color:var(--red)}
.wert-badge.neutral{background:var(--gray);color:var(--text2)}
.kennzahl-details{
  display:none;background:var(--gray);border-radius:0 0 var(--radius) var(--radius);
  margin:-6px 0 8px;padding:10px 14px;font-size:13px;color:var(--text);
}
.kennzahl-details.offen{display:block}
.kennzahl-details .erklaerung{
  color:var(--text2);font-size:12px;line-height:1.45;margin-bottom:8px;
  padding-bottom:8px;border-bottom:1px solid var(--border);
}
.kennzahl-details table{border-collapse:collapse;width:100%;margin-top:6px}
.kennzahl-details td{padding:2px 6px 2px 0;font-size:12px;color:var(--text2)}
.kennzahl-details td:last-child{text-align:right;color:var(--text);font-weight:600}

/* -------- Quellen-Fusszeile -------- */
.quellen{font-size:12px;color:var(--text2);padding:6px 2px 20px}
.quellen .q{display:inline-block;margin-right:10px;white-space:nowrap}
.quellen .q::before{content:"●";margin-right:3px;color:#2e7d32}
.quellen .q.fehler{color:var(--orange);font-weight:600}
.quellen .q.fehler::before{color:var(--orange)}

/* -------- Hinweis / Fehlerkasten -------- */
.hinweis{
  background:var(--orange-l);border:1px solid var(--orange);color:var(--orange);
  border-radius:var(--radius);padding:12px 14px;margin-bottom:12px;
  font-size:14px;font-weight:600;display:none;
}
.hinweis.sichtbar{display:block}

.laden{color:var(--text2);text-align:center;padding:30px 0;font-size:14px}

/* -------- PIN-Login (gleiches Muster wie die Betriebsapp) -------- */
.login-overlay{
  display:none;position:fixed;inset:0;z-index:100;
  background:#fafaf7;align-items:flex-start;justify-content:center;
  padding-top:max(14vh, env(safe-area-inset-top));
}
.login-overlay.sichtbar{display:flex}
.login-box{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px 22px;width:min(340px, calc(100vw - 32px));text-align:center;
}
.login-box h2{margin:0 0 4px;color:var(--green-d);font-size:20px}
.login-box p{margin:0 0 14px;color:var(--text2);font-size:14px}
.login-box input{
  width:100%;padding:13px;font-size:16px;border:1px solid var(--border);
  border-radius:8px;margin-bottom:10px;text-align:center;
}
.login-box input:focus{outline:none;border-color:var(--green)}
.login-box button{
  width:100%;min-height:48px;border:0;border-radius:8px;cursor:pointer;
  background:var(--green);color:#fff;font-size:16px;font-weight:600;
}
.login-box button:active{background:var(--green-d)}
.login-fehler{color:var(--red);font-size:13px;font-weight:600;margin-top:8px;min-height:1em}