/* ==========================================================================
   Torsteuerung — Stylesheet
   Uebernimmt das Designsystem von we-pe.de: Archivo, Barlow, IBM Plex Mono,
   Bauplan-Wasserzeichen, Millimeterraster, Masskette, Blau als Akzent.
   Grundlage ist die dunkle Fassung, weil die App im Freien und nachts
   bedient wird. Die Schriftdateien liegen in fonts/ und werden vom eigenen
   Server geladen — kein Aufruf bei Google. Fehlen sie, greift eine
   System-Schrift.
   ========================================================================== */

@font-face{font-family:'Archivo'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/archivo-latin.woff2') format('woff2');}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/barlow-300-latin.woff2') format('woff2');}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/barlow-400-latin.woff2') format('woff2');}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/barlow-500-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');}

:root{
  --ink:#E7EBEF;
  --graphit:#242A31;
  --graphit-2:#2B323A;
  --papier:#171B20;
  --papier-2:#1F242A;
  --blau:#8FB2D6;
  --linie:#4B555F;
  --linie-soft:#323942;
  --weiss:#FFFFFF;
  --gruen:#6FA98A;
  --warn:#D98A72;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
  --pad:clamp(20px,5vw,44px);
  --foto:saturate(.95) contrast(1.04) brightness(1.03);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0; background:var(--papier); color:var(--ink);
  font-family:var(--body); font-weight:400; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
/* Wasserzeichen: Bauplan als helle Linien */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("brand/blueprint.jpg");
  background-size:820px auto; background-position:center top;
  filter:grayscale(1) brightness(.8) contrast(1.25);
  opacity:.13; mix-blend-mode:screen;
}
/* Millimeterraster */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-image:
    linear-gradient(to right, rgba(190,214,236,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(190,214,236,.035) 1px, transparent 1px);
  background-size:28px 28px;
}
img{display:block; max-width:100%}

.boot{padding:40vh 0 0; text-align:center; color:#8B949D; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase}

.view{
  position:relative; z-index:1; min-height:100vh;
  padding:
    calc(env(safe-area-inset-top) + 18px)
    calc(env(safe-area-inset-right) + var(--pad))
    calc(env(safe-area-inset-bottom) + 22px)
    calc(env(safe-area-inset-left) + var(--pad));
  display:flex; flex-direction:column;
}
.view.scroll{display:block}

h1,h2{font-family:var(--display); font-weight:600; margin:0; letter-spacing:-.015em; line-height:1.08}
h1{font-size:clamp(30px,7vw,40px); font-weight:700}
h2{font-size:22px; margin-bottom:16px}

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blau); margin:0;
}

/* ---------- Anmeldung ---------- */

.login{justify-content:flex-end; position:relative; overflow:hidden}
.login-bg{
  position:absolute; inset:0; z-index:0;
  background-image:url("brand/hintergrund.jpg");
  background-size:cover; background-position:50% 34%;
  filter:saturate(.98) contrast(1.02) brightness(1.14);
}
/* Abdunklung nur so weit, wie Text darauf liegt. Oben bleibt das Foto frei. */
.login-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(23,27,32,.06) 0%,
      rgba(23,27,32,.12) 38%,
      rgba(23,27,32,.62) 58%,
      rgba(23,27,32,.93) 76%,
      rgba(23,27,32,.99) 100%),
    linear-gradient(180deg, rgba(34,73,111,.16) 0%, rgba(34,73,111,0) 46%);
}
.login-inner{max-width:420px; width:100%; margin:0 auto; position:relative; z-index:1}
.logo{width:100%; max-width:252px; height:auto; margin-bottom:34px}
.logo-small{height:26px; width:auto}

.login h1{margin:14px 0 0}
.login .sub{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#8B949D; margin:14px 0 0; padding-bottom:22px; border-bottom:1px solid var(--linie);
}

.mark{display:flex; gap:5px; align-items:flex-end; height:30px; margin-bottom:26px}
.mark span{width:11px; background:var(--ink); display:block}
.mark span:nth-child(1){height:30px}
.mark span:nth-child(2){height:20px; opacity:.6}
.mark span:nth-child(3){height:11px; opacity:.3}

label{
  display:block; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#8B949D; margin:20px 0 7px;
}
input,select{
  width:100%; background:rgba(31,36,42,.9); border:1px solid var(--linie);
  border-radius:0; color:var(--ink); font-family:var(--body); font-size:17px; padding:14px 15px;
}
select{font-family:var(--mono); font-size:14px}
input:focus,select:focus{outline:2px solid var(--blau); outline-offset:2px; border-color:transparent}
:focus-visible{outline:2px solid var(--blau); outline-offset:3px}

/* ---------- Kopfzeile ---------- */

.bar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding-bottom:16px; border-bottom:1px solid var(--linie-soft);
}
.bar-id strong{display:block; font-family:var(--display); font-weight:600; font-size:26px; letter-spacing:-.02em; line-height:1.1; margin-top:9px}
.bar-id span{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#8B949D; margin-top:6px;
}
.bar-nav{display:flex; gap:22px; flex:none; padding-bottom:4px}
.link{
  background:none; border:0; border-bottom:1px solid var(--linie); color:var(--ink);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:0 0 3px; cursor:pointer;
}
.link:hover{color:var(--blau); border-bottom-color:var(--blau)}

/* ---------- Stellungsanzeige als Masskette ---------- */

.panel{margin:34px 0 0}
.track{
  position:relative; height:15px; margin-top:22px;
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie-soft);
}
.track::before,.track::after{
  content:""; position:absolute; top:-6px; width:1px; height:13px; background:var(--linie);
}
.track::before{left:0} .track::after{right:0}
.track-fill{
  position:absolute; left:0; top:0; height:100%; width:0;
  background:var(--blau); opacity:.9;
  transition:width .9s cubic-bezier(.2,.7,.3,1);
}
.track.is-moving .track-fill{
  background:repeating-linear-gradient(115deg, var(--blau) 0 10px, rgba(143,178,214,.25) 10px 20px);
}
.track-marks{
  display:flex; justify-content:space-between; margin-top:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#8B949D;
}
.track-marks span:nth-child(2){transform:translateX(-10px)}

.state-line{display:flex; align-items:center; gap:10px; margin:26px 0 0; font-size:15px; color:#8B949D}
.state-line #state-text,.state-line #state{
  color:var(--ink); margin-right:auto; font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.01em;
}
.state-line .verb{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
.dot{width:7px; height:7px; border-radius:50%; background:var(--warn); flex:none}
.dot.is-online{background:var(--gruen)}

/* ---------- Tasten ---------- */

/* Alles fliesst von oben nach unten, ohne verteilte Restflaeche. Damit
   bleiben die Abstaende auf jedem Bildschirm gleich gross. */
.actions{margin-top:34px}
.actions-row{display:flex; gap:12px; margin-top:12px}

.btn{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; border-radius:0; cursor:pointer; display:block; width:100%;
  text-align:center; border:1px solid rgba(255,255,255,.45); background:none; color:var(--weiss);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:disabled{opacity:.32; cursor:default}
.btn:hover:not(:disabled),.btn:focus-visible:not(:disabled){background:var(--weiss); color:var(--papier); border-color:var(--weiss)}

.btn-open{
  background:var(--weiss); color:var(--papier); border-color:var(--weiss);
  padding:30px 18px; font-size:15px; letter-spacing:.2em;
}
.btn-open:hover:not(:disabled){background:var(--ink); border-color:var(--ink)}
.btn-open .btn-title{display:block}
.btn-open .btn-note{
  display:block; font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.12em; color:#5C6670; margin-top:9px; text-transform:none;
}
.btn-sub{flex:1; padding:20px 10px}
.btn-plain{padding:17px; margin-top:26px}
.btn-quiet{padding:15px; margin-top:28px; border-color:var(--linie); color:#8B949D}

/* ---------- Meldungen ---------- */

.notice{
  margin:18px 0 0; padding:12px 0 12px 16px; border-left:2px solid var(--blau);
  font-size:15px; color:#B6BEC6;
}
.notice.is-bad{border-left-color:var(--warn)}
.notice.is-good{border-left-color:var(--gruen)}

.error{color:var(--warn); font-size:15px; margin:14px 0 0}
.ok{color:var(--gruen); font-size:15px; margin:14px 0 0}
.hint{color:#8B949D; font-size:14.5px; margin:8px 0 0}
.foot{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#6A737C; margin:12px 0 0; text-align:center; min-height:0;
}

/* ---------- Torauswahl ---------- */

.gate-switch{list-style:none; margin:20px 0 0; padding:0; display:flex; gap:8px; flex-wrap:wrap}
.gate-switch button{
  background:none; border:1px solid var(--linie-soft); color:#8B949D;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 15px; cursor:pointer;
}
.gate-switch button.is-on{background:var(--ink); border-color:var(--ink); color:var(--papier)}

/* ---------- Verwaltung ---------- */

.tabs{display:flex; gap:2px; margin:26px 0 20px; border-bottom:1px solid var(--linie-soft)}
.tab{
  background:none; border:0; border-bottom:1px solid transparent; color:#8B949D;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:12px 16px; margin-bottom:-1px; cursor:pointer;
}
.tab.is-on{color:var(--ink); border-bottom-color:var(--blau)}

.list{display:flex; flex-direction:column; gap:14px}

.card{background:var(--graphit); border:1px solid var(--linie-soft); padding:16px 18px 18px}
.card.is-off{opacity:.6}
.card-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.card-top strong{font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.015em}
.card-meta{color:#98A2AC; font-size:15px; margin:6px 0 0}
.card-meta.code{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#6A737C;
}
.card-tools{
  display:flex; gap:20px; flex-wrap:wrap; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--linie-soft);
}
.card-tools button{
  background:none; border:0; color:var(--ink); cursor:pointer; padding:0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--linie);
}
.card-tools button:hover{color:var(--blau); border-bottom-color:var(--blau)}
.card-tools button.danger{color:var(--warn); border-bottom-color:rgba(217,138,114,.4)}

.badge{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 9px; border:1px solid var(--linie); color:#8B949D; flex:none;
}
.badge.is-admin{background:var(--ink); border-color:var(--ink); color:var(--papier)}
.badge.is-off{border-color:var(--warn); color:var(--warn)}

.log{display:flex; flex-direction:column; border-top:1px solid var(--linie)}
.log-row{
  display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--linie-soft); align-items:baseline;
}
.log-row time{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--blau)}
.log-row .who{font-size:16px; color:var(--ink)}
.log-row .what{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:#8B949D}
.log-row .res{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; text-align:right}
.res.ausgefuehrt,.res.ok{color:var(--gruen)}
.res.abgelehnt,.res.fehler{color:var(--warn)}

.form-block{margin-top:30px}
.hint.spaced{margin-bottom:20px}

/* ---------- Zeitsteuerung ---------- */
.zeile{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--linie-soft);
}
.zeile:last-of-type{border-bottom:0}
.zeile label{
  margin:0; flex:1; display:flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink);
}
.zeile input[type=checkbox]{width:20px; height:20px; flex:none; accent-color:var(--blau)}
.zeile input[type=time]{
  width:108px; flex:none; padding:9px 10px; font-family:var(--mono); font-size:15px;
}
.card-meta.token{
  font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--blau);
  word-break:break-all; margin-top:10px;
}
.card .days{margin:14px 0 0}
.card .btn-plain{margin-top:16px}

/* ---------- Dialog ---------- */

.modal{
  position:fixed; inset:0; background:rgba(18,22,26,.9); display:flex;
  align-items:center; justify-content:center; padding:var(--pad); z-index:10;
}
.modal-card{
  background:var(--graphit); border:1px solid var(--linie); border-radius:0;
  padding:24px; width:100%; max-width:440px; max-height:86vh; overflow-y:auto;
}
.modal-card h2{font-size:21px; margin-bottom:4px}
.modal-actions{display:flex; gap:12px; margin-top:26px}
.modal-actions .btn{margin-top:0; padding:15px}

.row-2{display:flex; gap:12px}
.row-2>div{flex:1}
.checks{display:flex; flex-direction:column; gap:12px; margin-top:18px}
.checks label{
  display:flex; align-items:center; gap:12px; margin:0; color:var(--ink);
  font-family:var(--body); font-size:16px; letter-spacing:0; text-transform:none;
}
.checks input{width:21px; height:21px; flex:none; accent-color:var(--blau)}
.days{display:flex; gap:6px; margin-top:8px}
.days button{
  flex:1; background:none; border:1px solid var(--linie-soft); color:#8B949D;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 0; cursor:pointer;
}
.days button.is-on{background:var(--ink); border-color:var(--ink); color:var(--papier)}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}
[hidden]{display:none !important}