/* Reede - Schaltzentrale. Zuerst fuers Handy gebaut, der grosse Bildschirm
   bekommt danach nur mehr Platz. */
:root{
  --bg:#EDF0EF; --panel:#FFFFFF; --panel-2:#E3E9E8; --sunk:#D7DFDE;
  --text:#0D1A1F; --text-2:#4C6168; --text-3:#71878E;
  --line:#C7D1D0; --line-soft:#DBE2E1;
  --gut:#1B7F4B; --warn:#B4740B; --buoy:#CE2F24;
  --ak:#E35C13; --auf-ak:#FFF7F1;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0A171C; --panel:#102229; --panel-2:#16303A; --sunk:#0C1E25;
  --text:#E7EEED; --text-2:#A3B7BC; --text-3:#7C959C;
  --line:#22404A; --line-soft:#1A343D;
  --gut:#4FBE83; --warn:#E0A63C; --buoy:#F0645A;
  --ak:#F4732C; --auf-ak:#150A03;
}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body{padding-bottom:84px}
h1,h2,h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;margin:0;letter-spacing:.005em}
button,input,select,textarea{font:inherit;color:inherit}

.kopf{position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);
  padding:12px 16px;display:flex;align-items:center;gap:12px}
.kopf h1{font-size:1.35rem;line-height:1}
.kopf .wer{margin-left:auto;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.kopf .wer button{background:none;border:0;color:var(--ak);cursor:pointer;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:0 0 0 8px}

main{max-width:760px;margin:0 auto;padding:16px}
section[hidden]{display:none}
.karte{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:16px;margin-bottom:14px}
.karte>h2{font-size:1.1rem;margin-bottom:10px}
.mark{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:8px}

/* Zustand */
.zustand{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--panel);margin-bottom:14px}
.zustand div{flex:1 1 0;min-width:96px;padding:13px 12px;border-right:1px solid var(--line-soft)}
.zustand div:last-child{border-right:0}
.zustand b{display:block;font-family:var(--cond);font-size:1.6rem;line-height:1;font-variant-numeric:tabular-nums}
.zustand span{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.zustand .aus b{color:var(--buoy)}
.zustand .an b{color:var(--gut)}

.gross{display:block;width:100%;padding:20px;border:0;border-radius:3px;background:var(--ak);color:var(--auf-ak);
  font-family:var(--cond);font-size:1.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.01em;cursor:pointer}
.gross:active{transform:translateY(1px)}
.gross:disabled{opacity:.45;cursor:not-allowed}
.reihe{display:flex;gap:10px;margin-top:10px}
.reihe button{flex:1}
.knopf{padding:12px 14px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:3px;cursor:pointer;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.knopf:hover{border-color:var(--ak)}
.knopf.stop[aria-pressed="true"]{border-color:var(--buoy);color:var(--buoy);background:color-mix(in srgb,var(--buoy) 10%,var(--panel-2))}
.knopf.sendung{width:100%;margin-bottom:6px;border-color:var(--warn);color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,var(--panel-2))}
.knopf.sendung[aria-pressed="true"]{border-color:var(--gut);color:var(--gut);background:color-mix(in srgb,var(--gut) 12%,var(--panel-2))}
.hinweis{font-size:.85rem;color:var(--text-3);margin:0 0 14px;line-height:1.45}
.knopf:disabled{opacity:.45;cursor:not-allowed}

/* Listen */
.liste{display:grid;gap:8px}
.zeile{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  background:var(--panel-2);border:1px solid var(--line-soft);border-left:3px solid var(--ak);border-radius:2px;padding:11px 12px}
.zeile.ruht{border-left-color:var(--line);opacity:.62}
.zeile .n{font-weight:600;line-height:1.25}
.zeile .u{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:3px}
.zeile .w{display:flex;gap:6px}
.pill{display:inline-block;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border-radius:2px;background:var(--sunk);color:var(--text-3)}
.pill.zahl{background:color-mix(in srgb,var(--ak) 18%,transparent);color:var(--ak)}
.mini{padding:8px 10px;border:1px solid var(--line);background:var(--panel);border-radius:2px;cursor:pointer;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase}
.mini:hover{border-color:var(--ak)}

/* Formular */
label{display:block;margin-bottom:12px}
label>span{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:5px}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);background:var(--sunk);border-radius:2px}
input:focus-visible,select:focus-visible,button:focus-visible,textarea:focus-visible{outline:2px solid var(--ak);outline-offset:1px}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.an-aus{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.an-aus input{width:20px;height:20px;accent-color:var(--ak)}
.farbwahl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.farbwahl button{width:34px;height:34px;border:1px solid var(--line);border-radius:2px;cursor:pointer;padding:0}
.farbwahl button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--text)}

/* Vorschau */
.vorschau{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  container-type:inline-size;background:linear-gradient(#17303F,#0B1D28 62%,#081820);margin-bottom:12px}
.vorschau::after{content:"Vorschau";position:absolute;right:6px;bottom:4px;font-family:var(--mono);font-size:1.2cqw;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3)}

/* Tabelle */
.tabelle{overflow-x:auto;border:1px solid var(--line-soft);border-radius:2px}
table{border-collapse:collapse;width:100%;min-width:480px;background:var(--panel)}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line-soft);font-size:.88rem}
th{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:400}
td.z{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.8rem}
tbody tr:last-child td{border-bottom:0}

/* Fussleiste */
.fuss{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:var(--panel);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.fuss button{flex:1;border:0;background:none;padding:12px 4px 13px;cursor:pointer;color:var(--text-3);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;border-top:2px solid transparent;margin-top:-1px}
.fuss button[aria-selected="true"]{color:var(--ak);border-top-color:var(--ak)}

/* Meldung */
#meldung{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:40;max-width:calc(100% - 32px);
  background:var(--text);color:var(--bg);padding:11px 16px;border-radius:3px;font-size:.92rem;box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .18s}
#meldung.da{opacity:1}
#meldung.schlecht{background:var(--buoy);color:#fff}

/* Anmeldung */
#anmeldung{max-width:360px;margin:12vh auto;padding:0 16px}
#anmeldung h1{font-size:2.6rem;line-height:.9;margin-bottom:6px}
#anmeldung p{color:var(--text-2);margin:0 0 22px}
.kopie{display:flex;gap:8px;align-items:stretch}
.kopie input{font-family:var(--mono);font-size:.76rem}