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

   Marke: Cyan #00aeef und Graphit aus dem Logo, Space Grotesk über Inter,
   kantige Aktionen. Ü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, Farbe der Balken und der Fortschritte, **nie** Text- oder
     Knopffarbe auf Weiß. Tragend ist die abgedunkelte Variante #006994.
   • Der Grund bleibt hell. Eine dunkle Kopfleiste war die erste Fassung und
     wirkte billig; getragen wird die Seite jetzt von Haarlinien, einer
     Cyan-Kante und ruhigem Weiß — die Unterlagen sind die Hauptsache.

   Aufbau der Ansichten: Seitenkopf (worum geht es, was kann ich tun) →
   Kacheln für alles, was man anklickt → Tafeln für alles, was man liest.
   Zeilenlisten gibt es nur noch dort, wo eine Zeile wirklich eine Zeile ist. */

:root{
  --cyan:#00aeef;
  --primaer:#006994; --primaer-dunkel:#005274; --primaer-weich:#e4f3fb; --primaer-rand:#b9dff2;
  --grund:#f2f6f9; --flaeche:#ffffff; --flaeche-2:#f5f8fa; --flaeche-3:#e8eef3;
  --ink:#0b1622; --ink-2:#4d5c69; --ink-3:#7a8794;
  --linie:#e2e9ef; --linie-stark:#c6d2dc;
  --gut:#137a52; --gut-weich:#e2f2ea; --gut-rand:#a8d6c1;
  --warn:#8a5a00; --warn-weich:#faeed8; --warn-rand:#e3c68a;
  --schlecht:#b3261e; --schlecht-weich:#fce4e2; --schlecht-rand:#eeb2ad;
  --s1:0 1px 2px rgba(11,22,34,.05);
  --s2:0 1px 2px rgba(11,22,34,.04), 0 4px 12px -6px rgba(11,22,34,.14);
  --s3:0 2px 4px rgba(11,22,34,.05), 0 18px 40px -24px rgba(11,22,34,.4);
  --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. */
  --kante-2:10px;   /* Flächen dürfen weicher sein. */
}

@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}
html{scroll-behavior:smooth}
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:-.028em; text-wrap:balance}
p{margin:0}
a{color:var(--primaer); text-underline-offset:2px}
button{font:inherit; color:inherit; cursor:pointer}
input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:3px}
code{font-family:var(--mono); font-size:.9em; background:var(--flaeche-3);
  padding:1px 5px; border-radius:3px}
.zahl{font-variant-numeric:tabular-nums}

/* ================= Marke ================= */
.bildmarke{display:block; height:100%; width:auto}
.marke-bild{display:block; height:30px; color:var(--cyan)}
.wortmarke{display:flex; align-items:baseline; gap:7px; font-family:var(--anzeige);
  font-weight:700; letter-spacing:-.02em; line-height:1}
.wortmarke b,.wortmarke i{font-size:20px}
/* „VENTURE" steht im Logo als Versalzeile unter der Zahl — waagerecht daneben
   braucht es etwas Laufweite und einen Hauch weniger Gewicht, sonst drückt es
   die Zahl weg. */
.wortmarke i{font-style:normal; color:var(--cyan); text-transform:uppercase;
  font-weight:600; letter-spacing:.04em; font-size:18px}

/* ================= Kopfleiste ================= */
/* Hell, nicht dunkel: Die dunkle Fassung wirkte billig, und das Logo selbst
   steht auf Weiß — Graphit für die Zahl, Cyan für den Schriftzug. Getragen
   wird die Leiste von einer Haarlinie und der Cyan-Kante darunter, nicht von
   einer Farbfläche. */
.topbar{position:sticky; top:0; z-index:40; display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 20px; padding:12px 26px; background:var(--flaeche); color:var(--ink);
  border-bottom:1px solid var(--linie); box-shadow:0 1px 0 rgba(11,22,34,.02), 0 6px 20px -18px rgba(11,22,34,.5)}
.topbar::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--cyan) 0 96px,transparent 96px)}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--ink)}
.produkt{margin-left:9px; padding-left:18px; border-left:1px solid var(--linie);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.15em; color:var(--ink-3)}
.krumen{margin-left:6px; display:flex; gap:8px; align-items:center; min-width:0;
  font-size:13.5px; color:var(--ink-3)}
.krumen a{color:var(--ink-2); text-decoration:none; font-weight:550}
.krumen a:hover{color:var(--primaer)}
.krumen span.sep{color:var(--linie-stark)}
.wer{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-2)}
.wer #werName{display:inline-flex; align-items:center; gap:8px; font-weight:550}
.wer #werName::before{content:''; width:7px; height:7px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 0 3px rgba(0,174,239,.2)}
@media (max-width:760px){ .produkt,.krumen{display:none} }

/* ================= Seitengerüst ================= */
main{max-width:1240px; margin:0 auto; padding:28px 22px 72px}
.leer{padding:64px 0; text-align:center; color:var(--ink-3)}

.seitenkopf{display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 24px; margin-bottom:22px}
.seitenkopf .titelblock{flex:1; min-width:min(300px,100%)}
.seitenkopf h1{font-size:clamp(24px,3.4vw,33px); line-height:1.1}
.obertitel{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.13em;
  color:var(--primaer); margin-bottom:7px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.obertitel::before{content:''; width:16px; height:2px; background:var(--cyan); flex:0 0 auto}
.unterzeile{margin-top:7px; color:var(--ink-2); font-size:14px}
.seitenkopf .aktionen{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

.spalten{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.85fr); gap:22px; align-items:start}
@media (max-width:980px){ .spalten{grid-template-columns:1fr} }
/* Ohne die Protokollspalte würden die Anforderungen sonst über die volle
   Fensterbreite laufen — jenseits von etwa 90 Zeichen liest das niemand mehr. */
.stapel{max-width:1000px}
.stapel{display:flex; flex-direction:column; gap:22px; min-width:0}

/* ================= Knöpfe ================= */
button.knopf,a.knopf{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; 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; box-shadow:var(--s1); transition:background .12s, transform .08s}
button.knopf:hover,a.knopf:hover{background:var(--primaer-dunkel)}
button.knopf:active,a.knopf:active{transform:translateY(1px)}
button.ghost,a.ghost{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 13px; background:var(--flaeche); border:1px solid var(--linie-stark);
  border-radius:var(--kante); color:var(--ink-2); text-decoration:none; font-size:13.5px;
  font-weight:550; transition:border-color .12s, color .12s, background .12s}
button.ghost:hover,a.ghost:hover{border-color:var(--primaer); color:var(--primaer); background:var(--primaer-weich)}
/* `.hell` stammt aus der dunklen Kopfleiste und ist jetzt ein gewöhnlicher
   Knopf — die Klasse bleibt, damit die Schale unverändert bleiben kann. */
button.ghost.hell{background:var(--flaeche); border-color:var(--linie-stark); color:var(--ink-2)}
button.gefahr{color:var(--schlecht); border-color:var(--schlecht-rand)}
button.gefahr:hover{border-color:var(--schlecht); color:var(--schlecht); background:var(--schlecht-weich)}
button[disabled]{opacity:.5; cursor:not-allowed}

/* ================= Kacheln ================= */
.raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px}
.kachel{display:flex; flex-direction:column; gap:12px; padding:18px; background:var(--flaeche);
  border:1px solid var(--linie); border-radius:var(--kante-2); box-shadow:var(--s2);
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
  transition:box-shadow .15s, border-color .15s, transform .12s}
a.kachel:hover{box-shadow:var(--s3); border-color:var(--primaer-rand); transform:translateY(-2px)}
/* Cyan-Kante beim Überfahren — dasselbe Motiv wie die Balken der Bildmarke. */
a.kachel::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--cyan); opacity:0; transition:opacity .15s}
a.kachel:hover::before{opacity:1}
.kachel-kopf{display:flex; align-items:flex-start; gap:12px}
.kachel-kopf h3{font-size:16.5px; line-height:1.25; flex:1; min-width:0}
.signet{flex:0 0 auto; width:38px; height:38px; border-radius:9px; display:grid; place-items:center;
  background:var(--primaer-weich); color:var(--primaer); font-family:var(--anzeige);
  font-weight:700; font-size:14px; letter-spacing:0}
.kachel .meta{font-size:12.5px; color:var(--ink-3)}
.kachel-fuss{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--ink-2);
  padding-top:12px; border-top:1px solid var(--linie); margin-top:auto}
.kachel-fuss b{font-weight:650; font-variant-numeric:tabular-nums}

/* ================= Fortschritt ================= */
.fortschritt{height:6px; background:var(--flaeche-3); border-radius:99px; overflow:hidden}
.fortschritt i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--primaer),var(--cyan)); transition:width .4s ease}
.fortschritt.fertig i{background:var(--gut)}
.fortschrittzeile{display:flex; align-items:center; gap:12px}
.fortschrittzeile .fortschritt{flex:1}
.fortschrittzeile .wert{font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums;
  white-space:nowrap; font-weight:600}

/* ================= Tafeln ================= */
.tafel{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--kante-2);
  box-shadow:var(--s2); overflow:hidden}
.tafel>header{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:15px 20px; border-bottom:1px solid var(--linie); background:var(--flaeche-2)}
.tafel>header h2{font-size:15.5px; letter-spacing:-.02em}
.tafel>header .rechts{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.zaehler{font-size:12px; font-weight:700; color:var(--primaer); background:var(--primaer-weich);
  border:1px solid var(--primaer-rand); padding:2px 9px; border-radius:99px;
  font-variant-numeric:tabular-nums}
.tafel .inhalt{padding:18px 20px}
.tafel .inhalt+.inhalt{border-top:1px solid var(--linie)}

/* ================= Anforderungsliste ================= */
.anfliste{list-style:none; margin:0; padding:0}
.anf{padding:16px 20px 16px 17px; border-bottom:1px solid var(--linie); border-left:3px solid transparent}
.anf:last-child{border-bottom:0}
.anf.ist-offen{border-left-color:var(--linie-stark)}
.anf.ist-eingereicht{border-left-color:var(--cyan); background:linear-gradient(90deg,var(--primaer-weich),transparent 42%)}
.anf.ist-angenommen{border-left-color:var(--gut)}
.anf.ist-nachgefordert{border-left-color:var(--schlecht); background:linear-gradient(90deg,var(--schlecht-weich),transparent 42%)}
.anf-kopf{display:flex; align-items:flex-start; gap:10px 14px; flex-wrap:wrap}
.anf-kopf h3{font-size:15.5px; flex:1; min-width:min(220px,100%); line-height:1.35}
.anf-hinweis{margin-top:4px; font-size:13px; color:var(--ink-3); max-width:64ch}
.anf-rueckmeldung{margin-top:10px; padding:9px 12px; border-radius:var(--kante);
  background:var(--schlecht-weich); border:1px solid var(--schlecht-rand);
  color:var(--schlecht); font-size:13px}
.anf-aktionen{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}

/* ================= Marken ================= */
.marke{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:99px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
  border:1px solid transparent}
.marke::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.m-offen{background:var(--flaeche-3); color:var(--ink-2)}
.m-eingereicht{background:var(--primaer-weich); color:var(--primaer); border-color:var(--primaer-rand)}
.m-in_arbeit{background:var(--warn-weich); color:var(--warn); border-color:var(--warn-rand)}
.m-bereit{background:var(--gut-weich); color:var(--gut); border-color:var(--gut-rand)}
.m-abgeschlossen{background:var(--flaeche-3); color:var(--ink-3)}
.m-angenommen{background:var(--gut-weich); color:var(--gut); border-color:var(--gut-rand)}
.m-nachgefordert{background:var(--schlecht-weich); color:var(--schlecht); border-color:var(--schlecht-rand)}
.m-pflicht{background:transparent; color:var(--ink-3); border-color:var(--linie-stark)}
.m-pflicht::before{display:none}
.frist{display:inline-flex; align-items:center; gap:5px}
.frist-nah{color:var(--schlecht); font-weight:650}

/* ================= Dateien ================= */
.dateien{list-style:none; margin:12px 0 0; padding:0; font-size:13.5px}
.dateien li{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:9px 12px;
  background:var(--flaeche-2); border:1px solid var(--linie); border-radius:var(--kante); margin-bottom:6px}
.dateien li:last-child{margin-bottom:0}
/* Nur der Dateiname darf sich die freie Breite nehmen und abschneiden — die
   Knöpfe behalten ihre. Galt das `flex:1` für jeden Link in der Zeile, war der
   Name auf null gequetscht und vom Abruf blieb ein Pfeil. */
.dateien .name{flex:1 1 190px; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-weight:600; display:flex; align-items:center; gap:8px}
.dateien .name::before{content:''; flex:0 0 auto; width:16px; height:18px; border-radius:2px;
  background:var(--primaer-rand);
  clip-path:polygon(0 0,68% 0,100% 26%,100% 100%,0 100%)}
.dateien .klein{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--ink-3); font-size:12px; font-variant-numeric:tabular-nums}
.dateien .bemerkung{flex:1 1 100%; font-size:12.5px; color:var(--ink-2);
  padding-left:24px; margin-top:-2px}
.dateien .bemerkung::before{content:'„'}
.dateien .bemerkung::after{content:'"'}
.dateien .klein-knopf{flex:0 0 auto; padding:6px 12px; font-size:12.5px; white-space:nowrap}
@media (max-width:620px){ .dateien .name{flex:1 1 100%} }

/* ================= Ablegefeld ================= */
.ablage{border:2px dashed var(--linie-stark); border-radius:var(--kante-2); padding:26px 20px;
  text-align:center; color:var(--ink-2); background:var(--flaeche-2); transition:.15s}
.ablage:hover{border-color:var(--primaer-rand); background:var(--primaer-weich)}
.ablage.warm{border-color:var(--cyan); background:var(--primaer-weich); color:var(--primaer)}
.ablage .pfeil{display:block; width:40px; height:40px; margin:0 auto 10px; border-radius:11px;
  background:var(--flaeche); border:1px solid var(--linie); color:var(--primaer);
  display:grid; place-items:center; font-size:19px; box-shadow:var(--s1)}
.ablage strong{display:block; font-weight:650; margin-bottom:3px}
.balken{height:5px; background:var(--flaeche-3); border-radius:99px; overflow:hidden; margin-top:14px}
.balken i{display:block; height:100%; background:linear-gradient(90deg,var(--primaer),var(--cyan));
  width:0; transition:width .15s}

/* ================= Zeitstrahl (Protokoll) ================= */
.zeitstrahl{list-style:none; margin:0; padding:4px 0 0; max-height:520px; overflow:auto}
.zeitstrahl li{position:relative; padding:0 0 16px 22px; font-size:13px}
.zeitstrahl li::before{content:''; position:absolute; left:3px; top:5px; width:8px; height:8px;
  border-radius:50%; background:var(--flaeche); border:2px solid var(--primaer-rand)}
.zeitstrahl li:first-child::before{border-color:var(--cyan); background:var(--cyan)}
.zeitstrahl li::after{content:''; position:absolute; left:6.5px; top:15px; bottom:0; width:1px;
  background:var(--linie)}
.zeitstrahl li:last-child{padding-bottom:0}
.zeitstrahl li:last-child::after{display:none}
.zeitstrahl .zeit{color:var(--ink-3); font-size:11px; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.zeitstrahl .wer{font-weight:600; color:var(--ink-2)}

/* ================= Personenliste ================= */
.personen{list-style:none; margin:0; padding:0}
.personen li{display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:13px 20px; border-bottom:1px solid var(--linie)}
.personen li:last-child{border-bottom:0}
.personen .haupt{flex:1; min-width:min(200px,100%)}
.personen .titel{font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.personen .unter{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.personen .werkzeuge{display:flex; gap:6px; flex-wrap:wrap}

/* ================= Leerzustand ================= */
.leerzustand{padding:40px 24px; text-align:center; color:var(--ink-3)}
.leerzustand svg{width:46px; height:auto; color:var(--primaer-rand); margin-bottom:14px}
.leerzustand strong{display:block; color:var(--ink-2); font-weight:650; margin-bottom:4px}

/* ================= Formulare ================= */
.feld{display:flex; flex-direction:column; gap:5px; margin-bottom:15px}
.feld label{font-size:11px; font-weight:700; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.1em}
.feld input,.feld select,.feld textarea{padding:10px 12px; background:var(--flaeche);
  color:var(--ink); border:1px solid var(--linie-stark); border-radius:var(--kante);
  transition:border-color .12s, box-shadow .12s}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--primaer);
  box-shadow:0 0 0 3px rgba(0,174,239,.16); outline:none}
.feld ::placeholder{color:var(--ink-3); opacity:1}
.feld input:-webkit-autofill{-webkit-text-fill-color:var(--ink); box-shadow:inset 0 0 0 100px var(--flaeche-2)}
.feld input[type=checkbox]{width:18px; height:18px; accent-color:var(--primaer)}
.feld textarea{min-height:74px; resize:vertical}
.hilfe{font-size:12.5px; color:var(--ink-3)}

/* ================= Anmeldung ================= */
.anmeldeseite{position:fixed; inset:0; z-index:50; color:var(--ink);
  background:radial-gradient(90% 70% at 50% -10%, #e7f5fd 0%, var(--grund) 58%);
  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 .tafel{border-top:3px solid var(--cyan); box-shadow:var(--s3)}
.anmeldung h1{font-size:26px; margin-bottom:6px}
.anmeldung .inhalt>p{color:var(--ink-2); font-size:14px; margin-bottom:20px}
.anmeldung .knopf{width:100%; padding:12px}

/* ================= Meldung und Dialog ================= */
#meldung{position:fixed; right:22px; bottom:22px; background:#0b1f2d; color:#fff;
  padding:12px 18px; border-radius:var(--kante); box-shadow:var(--s3);
  border-left:3px solid var(--cyan); max-width:min(420px,90vw); z-index:60; font-size:14px;
  animation:auftauchen .18s ease-out}
#meldung.fehler{background:var(--schlecht); border-left-color:#fff}
@keyframes auftauchen{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (max-width:620px){ #meldung{left:16px; right:16px; max-width:none} }

dialog.weit{max-width:min(680px,94vw)}
dialog.weit .zeitstrahl{max-height:min(60vh,520px)}
dialog{border:0; border-top:3px solid var(--cyan); border-radius:var(--kante-2);
  background:var(--flaeche); color:var(--ink); padding:26px; max-width:min(520px,92vw);
  box-shadow:0 30px 70px -24px rgba(7,15,24,.55)}
dialog::backdrop{background:rgba(7,15,24,.55); backdrop-filter:blur(2px)}
dialog h2{margin-bottom:6px; font-size:21px}
dialog>form>.hilfe{margin-bottom:18px}
dialog .aktionen{display:flex; gap:8px; justify-content:flex-end; margin-top:22px}
.zugangszettel{font-family:var(--mono); background:var(--flaeche-2); border:1px solid var(--linie);
  border-left:3px solid var(--cyan); border-radius:var(--kante); padding:14px; font-size:13.5px;
  line-height:1.8; word-break:break-all}

@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }