/* Kundenportal — Oberfläche im Corporate Design von 1863 Venture.

   Die Marke gibt vor: Cyan #00aeef und Graphit aus dem Logo, Space Grotesk
   über Inter, kantige Aktionen statt Pillen. Übernommen aus dem Theme der
   Firmenseite, damit Portal und Website nicht auseinanderlaufen.

   Zwei Regeln, die dort teuer gelernt wurden und hier gelten:
   • Das reine Logo-Cyan erreicht auf Weiß nur 2,5:1 — es ist Akzent auf
     dunklem Grund und Markenfarbe der Balken, **nie** Text- oder Knopffarbe
     auf Weiß. Tragend ist die abgedunkelte Variante #006994 (6,1:1).
   • Farbe trägt Flächen, nicht Tupfer: dunkle Kopfleiste, dunkle Anmeldung —
     dazwischen ruhiges Weiß, damit die Unterlagen die Hauptsache bleiben. */

:root{
  --cyan:#00aeef;
  --primaer:#006994; --primaer-dunkel:#005274; --primaer-weich:#e2f2fa;
  --grund:#f4f7f9; --flaeche:#ffffff; --flaeche-2:#eef2f6; --flaeche-3:#e3eaf0;
  --ink:#0b1622; --ink-2:#56646f; --ink-3:#7d8a95;
  --linie:#dae3ea; --linie-stark:#b3c2ce;
  --dunkel:radial-gradient(120% 150% at 10% 0%, #12405a 0%, #0b1f2d 46%, #070f18 100%);
  --gut:#137a52; --gut-weich:#dff0e8;
  --warn:#8a5a00; --warn-weich:#f7ebd6;
  --schlecht:#b3261e; --schlecht-weich:#fadedc;
  --schatten:0 1px 2px rgba(11,22,34,.05), 0 12px 28px -20px rgba(11,22,34,.35);
  --anzeige:"Space Grotesk",system-ui,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --text:"Inter",system-ui,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --kante:6px;   /* Aktionen bleiben kantig — Pillen sind Vorlagen-Optik. */
}

@font-face{font-family:"Space Grotesk"; src:url("./fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight:300 700; font-display:swap; font-style:normal}
@font-face{font-family:"Inter"; src:url("./fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900; font-display:swap; font-style:normal}

*{box-sizing:border-box}
body{margin:0; background:var(--grund); color:var(--ink); font-family:var(--text);
  font-size:15px; line-height:1.55; letter-spacing:-.003em; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; font-family:var(--anzeige); font-weight:700; letter-spacing:-.025em; text-wrap:balance}
a{color:var(--primaer)}
button{font:inherit; color:inherit; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:2px}
code{font-family:var(--mono); font-size:.92em}

/* ---------- Marke ---------- */
.bildmarke{display:block; height:100%; width:auto}
.marke-bild{display:block; height:26px; color:var(--cyan)}
.wortmarke{display:flex; align-items:baseline; gap:6px; font-family:var(--anzeige);
  font-weight:700; letter-spacing:-.02em; line-height:1}
.wortmarke b{font-size:19px}
.wortmarke i{font-style:normal; font-size:19px; color:var(--cyan);
  text-transform:uppercase; letter-spacing:.01em}

/* ---------- Kopfleiste ---------- */
/* Dunkel wie die Eröffnung der Firmenseite: Das Portal soll beim Aufschlagen
   als unser Haus erkennbar sein, nicht als graues Werkzeug. */
.topbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  padding:12px 26px; background:var(--dunkel); color:#fff}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff}
.produkt{padding-left:12px; margin-left:2px; border-left:1px solid rgba(255,255,255,.24);
  font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.72)}
.krumen{display:flex; gap:9px; align-items:center; min-width:0;
  font-size:13.5px; color:rgba(255,255,255,.66)}
.krumen a{color:rgba(255,255,255,.92); text-decoration:none}
.krumen a:hover{color:var(--cyan)}
.krumen span.sep{color:rgba(255,255,255,.38)}
.wer{margin-left:auto; display:flex; align-items:center; gap:10px;
  font-size:13.5px; color:rgba(255,255,255,.8)}
@media (max-width:700px){ .produkt{display:none} }

/* ---------- Grundformen ---------- */
main{max-width:1200px; margin:0 auto; padding:26px 22px 60px}
.leer{padding:60px 0; text-align:center; color:var(--ink-3)}
.karte{background:var(--flaeche); color:var(--ink); border:1px solid var(--linie); border-radius:4px;
  box-shadow:var(--schatten); margin-bottom:20px; overflow:hidden}
.karte>h2{padding:14px 20px; border-bottom:1px solid var(--linie); font-size:16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--flaeche-2)}
.karte>h2 .rechts{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;
  font-family:var(--text); font-weight:400; letter-spacing:0}
.inhalt{padding:18px 20px}
.zwei{display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start}
@media (max-width:920px){ .zwei{grid-template-columns:1fr} }

button.knopf,a.knopf{display:inline-flex; align-items:center; gap:7px; padding:8px 15px;
  background:var(--primaer); color:#fff; border:1px solid transparent; border-radius:var(--kante);
  text-decoration:none; font-weight:600; font-size:14px; letter-spacing:-.01em}
button.knopf:hover,a.knopf:hover{background:var(--primaer-dunkel)}
button.ghost,a.ghost{display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--kante);
  color:var(--ink-2); text-decoration:none; font-size:13.5px; font-weight:500}
button.ghost:hover,a.ghost:hover{border-color:var(--primaer); color:var(--primaer)}
button.ghost.hell{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); color:#fff}
button.ghost.hell:hover{background:rgba(255,255,255,.16); border-color:var(--cyan); color:#fff}
button.gefahr{color:var(--schlecht); border-color:var(--schlecht-weich)}
button.gefahr:hover{border-color:var(--schlecht); color:var(--schlecht)}
button[disabled]{opacity:.5; cursor:not-allowed}

.feld{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.feld label{font-size:11.5px; font-weight:600; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.09em}
.feld input,.feld select,.feld textarea{padding:9px 11px; background:var(--flaeche);
  color:var(--ink); border:1px solid var(--linie-stark); border-radius:3px}
.feld ::placeholder{color:var(--ink-3); opacity:1}
/* Chrome färbt automatisch ausgefüllte Felder selbst ein — ohne diese Zeilen
   bleibt dort die Fremdfarbe stehen. */
.feld input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  box-shadow:inset 0 0 0 100px var(--flaeche-2);
}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--primaer); outline-offset:1px}
.feld input[type=checkbox]{width:18px; height:18px; accent-color:var(--primaer)}
.feld textarea{min-height:70px; resize:vertical}
.hilfe{font-size:12.5px; color:var(--ink-3)}

/* ---------- Marken ---------- */
.marke{display:inline-block; padding:3px 9px; border-radius:3px; font-size:11.5px;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap}
.m-offen{background:var(--flaeche-3); color:var(--ink-2)}
.m-eingereicht{background:var(--primaer-weich); color:var(--primaer)}
.m-in_arbeit{background:var(--warn-weich); color:var(--warn)}
.m-bereit{background:var(--gut-weich); color:var(--gut)}
.m-abgeschlossen{background:var(--flaeche-3); color:var(--ink-3)}
.m-angenommen{background:var(--gut-weich); color:var(--gut)}
.m-nachgefordert{background:var(--schlecht-weich); color:var(--schlecht)}
.m-pflicht{background:transparent; color:var(--ink-3); border:1px solid var(--linie)}
.frist-nah{color:var(--schlecht); font-weight:600}

/* ---------- Listen ---------- */
.liste{list-style:none; margin:0; padding:0}
.liste>li{padding:14px 20px; border-bottom:1px solid var(--linie); display:flex;
  gap:16px; align-items:flex-start}
.liste>li:last-child{border-bottom:0}
.liste .haupt{flex:1; min-width:0}
.liste .titel{font-weight:600; letter-spacing:-.012em}
.liste .unter{font-size:12.5px; color:var(--ink-3); margin-top:3px}
.liste .werkzeuge{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center}
.zeile-link{display:block; text-decoration:none; color:inherit}
/* Der Cyan-Balken links markiert die Zeile beim Überfahren — dasselbe Motiv
   wie die Bildmarke, statt einer eingefärbten Fläche. */
.liste>li:has(.zeile-link:hover){background:var(--flaeche-2);
  box-shadow:inset 3px 0 0 var(--cyan)}

.dateien{list-style:none; margin:10px 0 0; padding:0; font-size:13.5px}
.dateien li{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center;
  padding:8px 0; border-top:1px solid var(--linie)}
/* Nur der Dateiname darf sich die freie Breite nehmen und abschneiden — die
   Knöpfe behalten ihre. Vorher galt `flex:1` für jeden Link in der Zeile,
   damit war der Name auf null gequetscht und vom Abruf blieb ein Pfeil. */
.dateien .name{flex:1 1 200px; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-weight:600}
.dateien .klein{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--ink-3); font-size:12px}
.dateien .klein-knopf{flex:0 0 auto; padding:5px 11px; font-size:12.5px; white-space:nowrap}
@media (max-width:620px){ .dateien .name{flex:1 1 100%} }

.protokoll{list-style:none; margin:0; padding:0; font-size:13px; max-height:460px; overflow:auto}
.protokoll li{padding:9px 0; border-bottom:1px solid var(--linie)}
.protokoll li:last-child{border-bottom:0}
.protokoll .zeit{color:var(--ink-3); font-family:var(--mono); font-size:11px;
  letter-spacing:-.02em; margin-bottom:1px}

/* ---------- Ablegefeld ---------- */
.ablage{border:1.5px dashed var(--linie-stark); border-radius:4px; padding:22px;
  text-align:center; color:var(--ink-2); background:var(--flaeche-2)}
.ablage.warm{border-color:var(--cyan); background:var(--primaer-weich); color:var(--primaer)}
.ablage input[type=file]{display:none}
.balken{height:4px; background:var(--flaeche-3); border-radius:2px; overflow:hidden; margin-top:10px}
.balken i{display:block; height:100%; background:var(--cyan); width:0; transition:width .15s}

/* ---------- Anmeldung ---------- */
/* Ganzflächig dunkel mit der Bildmarke — die Eröffnung der Firmenseite als
   Anmeldebild. */
.anmeldeseite{position:fixed; inset:0; background:var(--dunkel); color:#fff;
  display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto}
.anmeldung{width:min(420px,100%)}
.anmeldung .lockup{display:flex; align-items:center; gap:14px; margin-bottom:26px}
.anmeldung .marke-bild{height:44px}
.anmeldung .wortmarke b,.anmeldung .wortmarke i{font-size:27px}
.anmeldung .karte{margin:0; border:0; border-top:3px solid var(--cyan)}
.anmeldung h1{font-size:26px; letter-spacing:-.03em; margin-bottom:6px}
.anmeldung .inhalt>p{margin:0 0 18px; color:var(--ink-2); font-size:14px}
.anmeldung .knopf{width:100%; justify-content:center; padding:11px}

/* ---------- Meldung und Dialog ---------- */
#meldung{position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#0b1f2d; color:#fff; padding:11px 18px; border-radius:var(--kante);
  box-shadow:var(--schatten); border-left:3px solid var(--cyan);
  max-width:90vw; z-index:60; font-size:14px}
#meldung.fehler{background:var(--schlecht); border-left-color:#fff}
dialog{border:0; border-top:3px solid var(--cyan); border-radius:4px; background:var(--flaeche);
  color:var(--ink); padding:24px; max-width:min(520px,92vw); box-shadow:0 24px 60px -20px rgba(7,15,24,.5)}
dialog::backdrop{background:rgba(7,15,24,.6)}
dialog h2{margin-bottom:14px; font-size:20px}
dialog .aktionen{display:flex; gap:8px; justify-content:flex-end; margin-top:20px}
.zugangszettel{font-family:var(--mono); background:var(--flaeche-2); border:1px solid var(--linie);
  border-left:3px solid var(--cyan); border-radius:3px; padding:14px; font-size:13.5px;
  line-height:1.7; word-break:break-all}