/* style.css — Drohnenwetter-App, buck Vermessung
 *
 * Formensprache aus einstrahlung-check.html uebernommen und auf die ganze App
 * ausgedehnt: Papierweiss, weisse Karten mit 1-px-Rahmen, Zahlen in Monospace
 * mit tabular-nums, Kapitaelchen-Labels.
 *
 * Bewusst kein Dark Mode. Die App wird draussen im Sonnenlicht bedient, dort ist
 * ein heller, kontraststarker Aufbau ablesbar und ein dunkler nicht.
 */

:root{
  --paper:#F6F7F5;
  --card:#FFFFFF;
  --ink:#12171C;
  --ink-2:#5A6672;
  --ink-3:#8A949E;
  --rule:#D6DBD9;
  --rule-soft:#E7EAE8;
  --go:#1B7A44;
  --go-bg:#E6F3EB;
  --warn:#9A6206;
  --warn-bg:#FBF1DF;
  --stop:#A32222;
  --stop-bg:#FAEAEA;
  --schematic:#2C5F8A;
  --schematic-bg:#E8F0F6;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", Menlo, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{color-scheme:light;}
html,body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--ui);}
body{
  padding:14px 14px calc(40px + env(safe-area-inset-bottom));
  max-width:520px; margin:0 auto; font-size:16px; line-height:1.4;
}

/* ---------- Kopf ---------- */

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1.5px solid var(--ink); padding-bottom:7px; margin-bottom:12px;
}
.eyebrow .name{color:var(--ink); font-weight:700;}

.placebar{
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
  font-size:14px;
}
.placebar .where{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:600;
}
.placebar .coords{font-family:var(--mono); font-size:11.5px; color:var(--ink-2);}
/* Tippflaechen mindestens 44 px hoch. Die App wird im Stehen, oft mit
 * Handschuhen bedient — 30 px trifft man dabei nicht zuverlaessig. */
.placebar button{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 12px; border:1px solid var(--rule); background:var(--card); color:var(--ink);
  border-radius:2px; cursor:pointer; flex:none; min-height:44px;
}

/* ---------- Standorteingabe ---------- */

/* Steht offen und ganz oben, weil sie der erste Handgriff an der Baustelle ist. */
.card.standort{padding:12px 14px 14px;}
.findrow{display:flex; gap:8px; margin-bottom:9px;}
.findrow input{flex:1; min-width:0; font-size:16px;}   /* 16px verhindert das
   Hineinzoomen von iOS beim Antippen eines Eingabefelds */
.findrow button{
  flex:none; font-family:var(--ui); font-size:15px; font-weight:600; padding:11px 16px;
  border:1.5px solid var(--ink); background:var(--ink); color:#fff; border-radius:2px;
  cursor:pointer; min-height:44px;
}
.findrow button:active{transform:translateY(1px);}

/* ---------- Modus-Umschalter ---------- */

.modes{
  display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:14px;
  border:1.5px solid var(--ink); border-radius:2px; overflow:hidden;
}
.modes button{
  font-family:var(--ui); font-size:14.5px; font-weight:600; padding:12px 8px;
  border:none; background:var(--card); color:var(--ink-2); cursor:pointer;
}
.modes button[aria-pressed="true"]{background:var(--ink); color:#fff;}

/* Welcher Bereich sichtbar ist, entscheidet allein das CSS anhand einer Klasse
 * am body. Bewusst nicht ueber JS-Ein- und Ausblenden: das musste sonst bei
 * jeder Fensteraenderung nachgezogen werden, und genau dabei lief der Zustand
 * auseinander. So kann es das nicht. */
body.mode-pv  #sectFly{display:none;}
body.mode-fly #sectPv {display:none;}

/* ---------- Karten ---------- */

.card{
  background:var(--card); border:1px solid var(--rule); border-radius:3px;
  padding:16px; margin-bottom:12px;
}
.card.tight{padding:12px 14px;}
h2{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 12px; font-weight:600;
}
h2 .aside{float:right; text-transform:none; letter-spacing:0; font-weight:400;}

/* ---------- Hauptanzeige ---------- */

.readout-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2);
}
.readout{display:flex; align-items:baseline; gap:8px; margin:4px 0 2px;}
.value{
  font-family:var(--mono); font-size:64px; font-weight:600; letter-spacing:-.03em;
  line-height:1; font-variant-numeric:tabular-nums;
}
.value.small{font-size:44px;}
.unit{font-family:var(--mono); font-size:19px; color:var(--ink-2);}
.sub{font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums;}
.sub .src{font-family:var(--mono); font-size:11.5px;}

/* Herkunftszeile: Quelle, Ort, Alter. Steht ueberall, wo eine Zahl steht. */
.prov{
  font-family:var(--mono); font-size:11px; line-height:1.5; color:var(--ink-2);
  margin-top:6px;
}
.prov .tag{
  display:inline-block; padding:1px 5px; border:1px solid var(--rule); border-radius:2px;
  margin-right:5px; text-transform:uppercase; letter-spacing:.05em; font-size:10px;
}
.prov .tag.mess{border-color:var(--go); color:var(--go); background:var(--go-bg);}
.prov .tag.rechn{border-color:var(--schematic); color:var(--schematic); background:var(--schematic-bg);}
.prov .tag.prog{border-color:var(--warn); color:var(--warn); background:var(--warn-bg);}
.prov .tag.alt{border-color:var(--stop); color:var(--stop); background:var(--stop-bg);}

/* ---------- Schwellenskala ---------- */

.scale{margin:20px 0 6px; position:relative; height:46px;}
.track{position:absolute; top:14px; left:0; right:0; height:18px; background:#EAEDEB; border:1px solid var(--rule);}
.fill{
  position:absolute; top:15px; left:1px; height:16px; background:var(--schematic);
  transition:width .5s cubic-bezier(.2,.7,.3,1); max-width:calc(100% - 2px);
}
.fill.go{background:var(--go);} .fill.stop{background:var(--stop);} .fill.warn{background:var(--warn);}
.thresh{position:absolute; top:6px; bottom:10px; width:2.5px; background:var(--ink);}
.thresh span{
  position:absolute; top:-3px; left:6px; font-family:var(--mono);
  font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--ink); white-space:nowrap;
}
.ticks{
  position:absolute; top:34px; left:0; right:0; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:9.5px; color:var(--ink-2); padding-top:4px;
}

/* ---------- Urteilsleisten ---------- */

.verdict{padding:11px 13px; border-radius:2px; font-size:14.5px; font-weight:600; margin-top:12px;}
.verdict.go{background:var(--go-bg); color:var(--go); border-left:3px solid var(--go);}
.verdict.warn{background:var(--warn-bg); color:var(--warn); border-left:3px solid var(--warn);}
.verdict.stop{background:var(--stop-bg); color:var(--stop); border-left:3px solid var(--stop);}
.verdict.idle{background:#EFF1EF; color:var(--ink-2); border-left:3px solid var(--rule); font-weight:500;}
.verdict.info{background:var(--schematic-bg); color:var(--schematic); border-left:3px solid var(--schematic); font-weight:500;}
.verdict ul{margin:7px 0 0; padding-left:18px; font-weight:400; font-size:13.5px;}
.verdict li{margin:2px 0;}
.verdict .character{
  display:block; margin-top:7px; font-weight:400; font-size:13px; opacity:.9;
  border-top:1px solid currentColor; padding-top:6px;
}

/* ---------- Kachelraster ---------- */

.grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin-top:14px;
}
.grid.three{grid-template-columns:1fr 1fr 1fr;}
.cell{background:var(--card); padding:10px 12px; min-width:0;}
.cell .k{
  font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2);
}
/* Bewusst umbruchfaehig statt nowrap mit overflow:hidden. Bei nowrap wurde die
 * Einheit hinter laengeren Werten abgeschnitten — ein Wert ohne Einheit ist in
 * dieser App schlimmer als ein Umbruch. */
.cell .v{
  font-family:var(--mono); font-size:19px; font-weight:600; font-variant-numeric:tabular-nums;
  margin-top:2px; overflow-wrap:break-word;
}
.cell .v small{font-size:12px; font-weight:400; color:var(--ink-2);}
.cell .n{font-size:11px; color:var(--ink-3); line-height:1.35; margin-top:2px;}
.cell.go .v{color:var(--go);}
.cell.warn .v{color:var(--warn);}
.cell.stop .v{color:var(--stop);}

/* Grenzwertzeilen im Modus Befliegung */
.limits{border:1px solid var(--rule); border-radius:2px; overflow:hidden; margin-top:12px;}
/* Umbruchfaehig: auf 375 px passen Label, Wert und Grenzwert nicht immer in eine
 * Zeile. Ohne wrap schob sich der laengere Text ueber das Label und machte genau
 * die Zeile unlesbar, die man braucht. */
.limit{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:9px 12px;
  border-bottom:1px solid var(--rule-soft); font-size:14px;
}
.limit:last-child{border-bottom:none;}
.limit .dot{width:9px; height:9px; border-radius:50%; flex:none;}
.limit .dot.go{background:var(--go);} .limit .dot.warn{background:var(--warn);}
.limit .dot.stop{background:var(--stop);} .limit .dot.idle{background:var(--rule);}
.limit .lk{flex:1 1 auto; min-width:0;}
.limit .lv{
  font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; flex:none;
}
.limit .ll{
  font-family:var(--mono); font-size:11px; color:var(--ink-3); flex:0 1 auto;
  min-width:0; text-align:right; overflow-wrap:break-word;
}
/* Lange Erklaerungen bekommen eine eigene Zeile, eingerueckt unter dem Label. */
.limit .lnote{
  flex:1 0 100%; margin-left:19px; font-size:11.5px; line-height:1.4;
  color:var(--ink-3);
}

/* ---------- 10-Minuten-Verlauf ---------- */

.spark{margin-top:14px;}
.spark .head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:6px;
}
.spark svg{display:block; width:100%; height:78px;}
.spark .legend{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:4px;
  display:flex; justify-content:space-between;
}

/* ---------- Okta ---------- */

.okta{display:flex; align-items:center; gap:14px;}
.okta svg{flex:none; width:56px; height:56px;}
.okta .big{
  font-family:var(--mono); font-size:30px; font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums;
}
.okta .big small{font-size:15px; color:var(--ink-2); font-weight:400;}
.okta .code{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-2);
  text-transform:uppercase; margin-top:3px;
}
.okta .txt{font-size:13px; color:var(--ink-2); margin-top:4px;}

.layers{margin-top:12px;}
.layer{display:flex; align-items:center; gap:9px; font-size:13px; padding:4px 0;}
.layer .lname{width:74px; flex:none; font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2);}
.layer .bar{flex:1; height:10px; background:#EAEDEB; border:1px solid var(--rule); position:relative;}
.layer .bar i{position:absolute; inset:0 auto 0 0; background:var(--ink-2); display:block;}
.layer .lval{width:52px; flex:none; text-align:right; font-family:var(--mono);
  font-size:12.5px; font-variant-numeric:tabular-nums;}

/* ---------- Tagesverlauf ---------- */

.daychart svg{display:block; width:100%; height:150px;}
.daychart .legend{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-2); margin-top:8px;
  display:flex; flex-wrap:wrap; gap:12px;
}
.daychart .legend i{
  display:inline-block; width:16px; height:3px; vertical-align:middle; margin-right:5px;
}

/* ---------- Eingaben ---------- */

label{display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:5px;}
input,select{
  width:100%; font:inherit; font-family:var(--mono); font-size:16px; padding:11px 10px;
  border:1px solid var(--rule); border-radius:2px; background:var(--card); color:var(--ink);
}
input:focus,select:focus{outline:2px solid var(--schematic); outline-offset:-1px; border-color:var(--schematic);}
.row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
.row.three{grid-template-columns:1fr 1fr 1fr;}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px;}
.chip{
  font-family:var(--mono); font-size:13px; padding:12px 13px; border:1px solid var(--rule);
  background:var(--card); border-radius:2px; cursor:pointer; color:var(--ink);
  min-height:44px;
}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}

button.act{
  width:100%; font-family:var(--ui); font-size:16px; font-weight:600; padding:15px;
  border:none; border-radius:2px; background:var(--ink); color:#fff; cursor:pointer; margin-top:4px;
}
button.act:active{transform:translateY(1px);}
button.act.ghost{background:var(--card); color:var(--ink); border:1.5px solid var(--ink);}
button.act.slim{padding:11px; font-size:14.5px;}
button.act[disabled]{opacity:.45; cursor:default;}
.btn-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;}

/* Gespeicherte Standorte */
.places{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.place{
  display:flex; align-items:center; gap:8px; border:1px solid var(--rule); border-radius:2px;
  background:var(--card); padding:0 0 0 11px;
}
.place .pn{
  flex:1; min-width:0; text-align:left; font:inherit; font-size:14px; padding:11px 0;
  background:none; border:none; color:var(--ink); cursor:pointer; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.place .pn b{display:block; font-weight:600;}
.place .pn span{font-family:var(--mono); font-size:11px; color:var(--ink-2);}
.place .del{
  flex:none; background:none; border:none; border-left:1px solid var(--rule);
  color:var(--ink-2); font-size:18px; line-height:1; padding:12px 14px; cursor:pointer;
}
.place[aria-current="true"]{border-color:var(--ink); border-width:1.5px;}

/* ---------- Hinweise, Fehler, Fusszeile ---------- */

.note{font-size:12px; color:var(--ink-2); line-height:1.5; margin-top:14px;}
.note b{color:var(--ink);}
.note.tight{margin-top:8px;}
details{margin-bottom:12px;}
details summary{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); cursor:pointer; padding:8px 0;
}
details[open] summary{color:var(--ink);}
.err{
  background:var(--stop-bg); border-left:3px solid var(--stop); color:var(--stop);
  padding:11px 13px; font-size:13.5px; margin-top:12px; border-radius:2px;
}
.warnbox{
  background:var(--warn-bg); border-left:3px solid var(--warn); color:var(--warn);
  padding:11px 13px; font-size:13.5px; margin-top:12px; border-radius:2px;
}
.offline{
  background:var(--stop-bg); border:1px solid var(--stop); color:var(--stop);
  padding:9px 12px; font-size:13px; border-radius:2px; margin-bottom:12px;
  font-weight:600;
}

footer{
  margin-top:22px; padding-top:14px; border-top:1px solid var(--rule);
  font-size:11.5px; color:var(--ink-2); line-height:1.6;
}
footer a{color:var(--ink-2);}
footer .sources{margin-top:8px; color:var(--ink-3);}
footer .liability{
  margin-top:10px; padding:9px 11px; background:#EFF1EF; border-radius:2px;
  color:var(--ink-2);
}

.hidden{display:none !important;}
.spin{opacity:.5;}

/* Knopf, der zu einem eingeklappten Bereich springt. Die Grenzwerte waren
 * anpassbar, aber niemand fand sie — deshalb ein Verweis genau dort, wo man
 * beim Lesen auf die Idee kommt. */
button.act.jump{margin-top:10px; font-weight:500;}

@media (prefers-reduced-motion:reduce){
  .fill{transition:none;}
  html{scroll-behavior:auto;}
}

/* ================================================================
 * Rechner und Tablet
 *
 * Am Handy ist der Umschalter zwischen den Modi noetig, weil die Seite sonst
 * ewig lang wird. Am Rechner ist der Platz da: dann stehen beide Bereiche
 * nebeneinander und der Umschalter verschwindet. Die Reihenfolge im Dokument
 * bleibt unveraendert, die Spalten entstehen nur ueber das Raster.
 * ================================================================ */

@media (min-width:1000px){
  body{max-width:1180px; padding:20px 20px 48px; font-size:15.5px;}

  /* Beide Bereiche zeigen, unabhaengig vom gewaehlten Modus, und den
   * Umschalter weglassen. Steht nach den Regeln oben, gewinnt deshalb. */
  body.mode-pv #sectFly,
  body.mode-fly #sectPv{display:block;}
  #modes{display:none;}

  .layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:16px;
    align-items:start;
  }
  #sectPv   {grid-column:1; grid-row:1;}
  #sectFly  {grid-column:2; grid-row:1;}
  #cloudCard{grid-column:1; grid-row:2;}
  .daychart {grid-column:2; grid-row:2;}

  /* Standortsuche in eine Zeile, es ist Platz dafuer */
  .card.standort{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start;}
  .card.standort .findrow{margin-bottom:0;}
  .card.standort #gps{width:auto; white-space:nowrap;}
  .card.standort #searchResults{grid-column:1 / -1;}

  /* Am Zeigegeraet darf die Hauptzahl groesser stehen, es wird nicht gescrollt */
  .value{font-size:76px;}
  .daychart svg{height:190px;}

  /* Die Aufklapper unten nebeneinander, damit die Seite nicht ausfaedelt */
  .tail{display:grid; grid-template-columns:1fr 1fr; column-gap:16px; align-items:start;}

  /* Zeigegeraet statt Finger: die 44-px-Mindesthoehen duerfen zurueck */
  .placebar button{min-height:0; padding:9px 12px;}
  .chip{min-height:0; padding:8px 12px;}
}

@media (min-width:1400px){
  body{max-width:1340px;}
  .layout{column-gap:20px;}
}