/* ==========================================================================
   Zustellwacht — Leitstand
   --------------------------------------------------------------------------
   Bildsprache: Stellwerkspanel. Emailliertes Petrol, Messingkanten, echte
   Signallampen mit Glut statt flacher Badges.

   Zwei bewusst getrennte Welten:
     innen   dunkel wie ein Betriebsraum, zum Ueberwachen
     aussen  hell und druckbar, fuer den Kunden deines Kunden

   Kein JavaScript — die Auslieferung setzt script-src 'none'. Parallax
   entsteht ueber gestapelte background-attachment:fixed Ebenen, die beim
   Scrollen stehenbleiben, waehrend der Inhalt darueber wegzieht.
   ========================================================================== */

:root{
  /* Emaille */
  --tief:#0B2029;
  --panel:#123240;
  --panel-hoch:#18475A;
  --naht:#1E5468;

  /* Messing */
  --messing:#B08A57;
  --messing-hell:#DDBA84;

  /* Schild */
  --schild:#EFE6D4;
  --schild-matt:#9FB2BB;

  /* Signal */
  --gr:#3FC489;
  --am:#F2AC42;
  --rt:#E85A4C;
  --aus:#22505F;

  /* Kundenseite, hell */
  --papier:#F4F1EA;
  --tinte:#16242A;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",
         Roboto,"Helvetica Neue",Arial,sans-serif;
  --schmal:"Segoe UI Semibold","Helvetica Neue",Arial,sans-serif;
  --zahl:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--tief);
  color:var(--schild);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  /* Drei fixierte Ebenen, unterschiedlich gross: beim Scrollen bleiben sie
     stehen, der Inhalt zieht darueber weg. Das ist der Parallax. */
  background-image:
    radial-gradient(900px 420px at 82% -8%, rgba(176,138,87,.16), transparent 62%),
    radial-gradient(700px 380px at 8% 4%,  rgba(63,196,137,.09), transparent 60%),
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.022) 0 1px, transparent 1px 74px);
  background-attachment:fixed,fixed,fixed;
}
a{color:var(--messing-hell)}

/* ---------- Kopfleiste --------------------------------------------------- */
.top{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg,rgba(11,32,41,.97),rgba(11,32,41,.86));
  border-bottom:1px solid var(--naht);
  box-shadow:0 1px 0 rgba(221,186,132,.14), 0 10px 30px -22px #000;
  backdrop-filter:blur(9px);
}
.top-in{max-width:1120px;margin:0 auto;padding:13px 22px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--schild)}
.marke .lampe-marke{
  width:11px;height:11px;border-radius:50%;flex:0 0 11px;
  background:radial-gradient(circle at 34% 30%, #7FF0BC, var(--gr) 58%, #0C5238);
  box-shadow:0 0 12px rgba(63,196,137,.75), inset 0 0 3px rgba(0,0,0,.5);
}
.marke b{font-family:var(--schmal);font-size:15px;font-weight:600;letter-spacing:.03em;
  display:block}
.marke small{font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--messing);display:block;margin-top:-3px}

nav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
nav a{
  color:var(--schild-matt);text-decoration:none;
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  padding:7px 13px;border:1px solid transparent;border-radius:2px;
  transition:color .16s, border-color .16s, background .16s;
}
nav a:hover{color:var(--schild);background:rgba(255,255,255,.05)}
nav a.hier{color:var(--tief);background:var(--messing);border-color:var(--messing-hell)}
nav form{display:inline}
nav button{
  font-family:inherit;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;color:var(--schild-matt);background:none;border:1px solid transparent;
  padding:7px 13px;cursor:pointer;border-radius:2px;box-shadow:none;
}
nav button:hover{color:var(--rt);border-color:rgba(232,90,76,.4);filter:none}

main{max-width:1120px;margin:0 auto;padding:30px 22px 90px}

/* ---------- Emaille-Platte ----------------------------------------------- */
.platte{
  background:linear-gradient(168deg,var(--panel-hoch),var(--panel) 46%,#0F2C38);
  border:1px solid var(--naht);
  border-radius:3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(0,0,0,.25),
    0 18px 40px -26px #000;
  margin-bottom:24px;
  overflow:hidden;
}
.platte-kopf{padding:19px 24px 17px;border-bottom:1px solid rgba(0,0,0,.3);
  box-shadow:0 1px 0 rgba(255,255,255,.05)}
.platte-in{padding:24px}

.schildchen{font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--messing);margin:0 0 7px;font-weight:600}
h1{font-family:var(--schmal);font-weight:600;font-size:clamp(21px,3vw,29px);
  letter-spacing:-.01em;margin:0;line-height:1.2}
h2{font-family:var(--schmal);font-weight:600;font-size:15px;margin:0;
  letter-spacing:.02em}
.notiz{color:var(--schild-matt);font-size:13.5px;margin:9px 0 0;max-width:66ch}
.notiz code{font-family:var(--zahl);font-size:12.5px;
  background:rgba(0,0,0,.3);padding:2px 6px;border-radius:2px;color:var(--messing-hell)}

/* ---------- Zaehlwerk ----------------------------------------------------- */
.zaehlwerk{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:0}
.zaehlwerk > div{
  padding:20px 24px 22px;
  border-right:1px solid rgba(0,0,0,.28);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04);
}
.zaehlwerk > div:last-child{border-right:0;box-shadow:none}
.zaehlwerk dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--schild-matt);margin:0 0 9px;font-weight:600}
.zaehlwerk dd{margin:0;font-family:var(--zahl);font-size:36px;font-weight:300;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--schild)}
.zaehlwerk dd.gluehend{color:var(--rt);text-shadow:0 0 26px rgba(232,90,76,.55)}

/* ---------- Signallampen -------------------------------------------------- */
.lampe{
  width:13px;height:13px;border-radius:50%;flex:0 0 13px;
  border:1px solid rgba(0,0,0,.55);
  background:var(--aus);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.lampe.gr{background:radial-gradient(circle at 34% 30%,#8FF3C6,var(--gr) 56%,#0D5D40);
  box-shadow:0 0 11px rgba(63,196,137,.6), inset 0 0 3px rgba(0,0,0,.4)}
.lampe.am{background:radial-gradient(circle at 34% 30%,#FFD79A,var(--am) 56%,#8A5A11);
  box-shadow:0 0 11px rgba(242,172,66,.6), inset 0 0 3px rgba(0,0,0,.4)}
.lampe.rt{background:radial-gradient(circle at 34% 30%,#FFA79C,var(--rt) 56%,#7C1E16);
  box-shadow:0 0 13px rgba(232,90,76,.7), inset 0 0 3px rgba(0,0,0,.4)}

/* Der Laufweg: vier Lampen wie ein Gleisplan. Wo er erlischt, klemmt es. */
.laufweg{display:flex;align-items:center;gap:0}
.laufweg .strecke{width:19px;height:2px;background:var(--aus);flex:0 0 19px}
.laufweg .strecke.an{background:linear-gradient(90deg,var(--gr),rgba(63,196,137,.45))}
.laufweg-legende{display:flex;margin-top:8px}
.laufweg-legende span{font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--schild-matt);width:32px;text-align:center;flex:0 0 32px}
.laufweg-legende span:first-child{text-align:left;width:26px;flex:0 0 26px}

/* ---------- Betriebsliste -------------------------------------------------- */
.zeile{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:20px;align-items:center;
  padding:17px 24px;text-decoration:none;color:inherit;
  border-bottom:1px solid rgba(0,0,0,.26);
  box-shadow:0 1px 0 rgba(255,255,255,.035);
  transition:background .16s;
  position:relative;
}
.zeile:last-child{border-bottom:0;box-shadow:none}
.zeile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:transparent;transition:background .16s}
.zeile:hover{background:rgba(255,255,255,.045)}
.zeile:hover::before{background:var(--messing)}
.zeile:focus-visible{outline:2px solid var(--messing-hell);outline-offset:-3px}
.zeile.brennt::before{background:var(--rt);box-shadow:0 0 14px rgba(232,90,76,.6)}

.objekt b{font-family:var(--schmal);font-size:15.5px;font-weight:600;
  display:block;overflow-wrap:anywhere}
.objekt span{font-size:12px;color:var(--schild-matt);display:block;margin-top:1px}
.befund{font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  padding:5px 11px;border:1px solid;border-radius:2px;white-space:nowrap}
.b-ok{color:var(--gr);border-color:rgba(63,196,137,.45);background:rgba(63,196,137,.08)}
.b-warnung{color:var(--am);border-color:rgba(242,172,66,.45);background:rgba(242,172,66,.08)}
.b-kritisch{color:#FFE3DF;border-color:var(--rt);background:rgba(232,90,76,.28)}
.b-unbekannt{color:var(--schild-matt);border-color:rgba(159,178,187,.3)}
.stempel{font-family:var(--zahl);font-size:11.5px;color:var(--schild-matt);
  min-width:88px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Formulare ------------------------------------------------------ */
label{display:block;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--messing);margin:0 0 7px;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=number],
textarea,select{
  width:100%;padding:11px 13px;
  background:rgba(0,0,0,.32);
  border:1px solid var(--naht);
  border-radius:2px;
  color:var(--schild);
  font-family:var(--zahl);font-size:13.5px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35);
  transition:border-color .16s, box-shadow .16s;
}
input::placeholder,textarea::placeholder{color:#5C7885}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--messing);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35), 0 0 0 3px rgba(176,138,87,.2);
}
textarea{min-height:128px;resize:vertical;line-height:1.7}
.feld{margin-bottom:20px}
.feld .unter{font-size:12.5px;color:var(--schild-matt);margin:7px 0 0;max-width:62ch}
.feld .unter strong{color:var(--messing-hell)}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.haken{display:flex;gap:10px;align-items:center;font-size:14px;
  text-transform:none;letter-spacing:0;color:var(--schild);margin:0}
.haken input{width:auto;box-shadow:none;accent-color:var(--gr)}

button,.knopf{
  font-family:var(--schmal);font-size:12.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:11px 21px;cursor:pointer;text-decoration:none;display:inline-block;
  border-radius:2px;
  background:linear-gradient(180deg,var(--messing-hell),var(--messing));
  color:var(--tief);
  border:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 rgba(0,0,0,.3);
  transition:transform .1s, filter .16s;
}
button:hover,.knopf:hover{filter:brightness(1.09)}
button:active,.knopf:active{transform:translateY(1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
button:focus-visible,.knopf:focus-visible{outline:2px solid var(--messing-hell);
  outline-offset:3px}
.knopf.matt,button.matt{background:rgba(255,255,255,.05);color:var(--schild);
  border-color:var(--naht);box-shadow:none}
.knopf.matt:hover,button.matt:hover{background:rgba(255,255,255,.1)}
button.gefahr{background:none;color:var(--rt);border-color:rgba(232,90,76,.45);
  box-shadow:none}
button.gefahr:hover{background:rgba(232,90,76,.16);filter:none}
.knopfreihe{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- Meldungen ------------------------------------------------------ */
.meldung{padding:13px 18px;margin-bottom:16px;font-size:14px;border-radius:2px;
  border-left:3px solid;background:rgba(0,0,0,.28)}
.m-ok{border-color:var(--gr);color:#B6F2D6}
.m-fehler{border-color:var(--rt);color:#FFD2CC}

/* ---------- Verlaufstabelle ------------------------------------------------- */
.verlauf{width:100%;border-collapse:collapse;font-size:13px}
.verlauf th{text-align:left;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--messing);font-weight:600;padding:0 14px 11px 0;
  border-bottom:1px solid var(--naht)}
.verlauf td{padding:11px 14px 11px 0;border-bottom:1px solid rgba(0,0,0,.25);
  font-family:var(--zahl);font-size:12.5px;vertical-align:middle}
.verlauf tr:last-child td{border-bottom:0}
.nichts{color:var(--schild-matt);font-size:13.5px;padding:8px 0;margin:0}

/* ---------- Freigabelink ---------------------------------------------------- */
.linkfeld{display:flex;background:rgba(0,0,0,.34);border:1px solid var(--naht);
  border-radius:2px;overflow:hidden}
.linkfeld input{border:0;box-shadow:none;font-size:12.5px;background:none}

/* ---------- Anmeldemaske ----------------------------------------------------- */
.schleuse{max-width:432px;margin:8vh auto 0}
.schleuse .platte-kopf{text-align:center}
.schleuse .marke{justify-content:center;margin-bottom:14px}

/* ---------- Startseite -------------------------------------------------------- */
.buehne{padding:64px 24px 60px;text-align:center}
.buehne h1{font-size:clamp(28px,5.4vw,46px);max-width:17ch;margin:0 auto 16px;
  line-height:1.12}
.buehne h1 em{font-style:normal;color:var(--messing-hell)}
.buehne .notiz{margin:0 auto 30px;max-width:52ch;font-size:15.5px}
.buehne .laufweg{justify-content:center;margin-bottom:8px}
.buehne .laufweg-legende{justify-content:center;margin-bottom:32px}

/* ==============================================================================
   Kundenseite — hell und druckbar. Bewusst die andere Welt: was der Kunde
   deines Kunden sieht, soll wie ein Beleg wirken, nicht wie ein Cockpit.
   ============================================================================== */
body.aussen{background:var(--papier);background-image:none;color:var(--tinte)}
body.aussen main{max-width:660px;padding-top:56px}
body.aussen .platte{background:#FFFDF8;border:1px solid #DAD2C2;
  box-shadow:0 14px 34px -28px #4A4132}
body.aussen .platte-kopf{border-bottom:1px solid #E7E0D2;box-shadow:none}
body.aussen .schildchen{color:#8A7A5C}
body.aussen .notiz{color:#5A6469}
body.aussen .verlauf th{color:#8A7A5C;border-bottom-color:#E7E0D2}
body.aussen .verlauf td{border-bottom-color:#EFE9DD;color:var(--tinte)}
body.aussen .lampe{border-color:rgba(0,0,0,.2)}
body.aussen .lampe:not(.gr):not(.am):not(.rt){background:#D8D1C2;box-shadow:none}
body.aussen .laufweg .strecke{background:#D8D1C2}
body.aussen .laufweg-legende span{color:#8A7A5C}
.urteil{font-family:var(--schmal);font-size:clamp(23px,4.6vw,34px);font-weight:600;
  margin:18px 0 8px;letter-spacing:-.01em;line-height:1.2}
.urteil.ok{color:#1F7A55} .urteil.warnung{color:#9A6512}
.urteil.kritisch{color:#B3382C} .urteil.unbekannt{color:#6B7378}
.fusszeile{text-align:center;color:#8A7A5C;font-size:12.5px;margin-top:20px}

/* ---------- Reaktion, Bewegung, Druck ---------------------------------------- */
@media (max-width:680px){
  main{padding:18px 13px 60px}
  .top-in{padding:11px 13px;gap:12px}
  nav{width:100%;margin-left:0}
  nav a,nav button{padding:6px 10px;font-size:11px}
  .platte-in,.platte-kopf{padding:17px 15px}
  .zaehlwerk > div{padding:15px}
  .zaehlwerk dd{font-size:27px}
  .zeile{grid-template-columns:1fr auto;gap:11px;padding:15px}
  .zeile .laufweg{grid-column:1/-1;order:3}
  .stempel{display:none}
  .paar{grid-template-columns:1fr}
  .buehne{padding:40px 14px}
  /* fixed ist auf mobilen Browsern teuer und teils wirkungslos -
     dort lieber sauber scrollen als ruckeln. */
  body{background-attachment:scroll,scroll,scroll}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  body{background-attachment:scroll,scroll,scroll}
}
@media print{
  body{background:#fff!important;color:#000;background-image:none}
  .top,nav,.knopfreihe{display:none}
  .platte{background:#fff;border-color:#999;box-shadow:none}
}