/* ---------------------------------------------------------------------------
   Jarvis — Grundstil.

   Uebernommen aus design/jarvis-dashboard.html. Tokens, Panels, Knoepfe,
   Aufgabenzeilen und Beschriftungen stammen woertlich von dort; hinzugekommen
   sind nur Formularfelder und leere Zustaende, die es in der Vorlage nicht
   gibt, weil sie eine reine Anzeige ist.

   Nicht uebernommen, weil M2 die Daten dafuer nicht hat: der Kern mit der
   Partikel-Sphaere, die Kennzahlenleiste, das Protokollfeld, die Agenten- und
   Terminlisten. Die kommen in M5 dazu, wenn es echte Werte gibt — vorher
   waeren es erfundene Zahlen, und die verbietet CLAUDE.md.
   --------------------------------------------------------------------------- */

@import url("/schriften.css");

:root{
  --bg:#07080A;
  --panel:#0C0E11;
  --panel-hi:#101317;
  --line:#191D22;
  --line-hot:rgba(212,243,24,.16);
  --acid:#D4F318;
  --amber:#FFA028;
  --alert:#FF4A3D;
  --txt:#E6E9E3;
  --txt-2:#8A9099;
  --txt-3:#565C64;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Space Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  --gap:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(120% 80% at 50% -20%,rgba(212,243,24,.07),transparent 60%),
    radial-gradient(90% 60% at 50% 120%,rgba(212,243,24,.04),transparent 60%);
  background-attachment:fixed;
}
/* Rasterung wie in der Vorlage. Liegt ueber allem, faengt aber keine Klicks. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
/* Acid ist Akzent, kein Fliesstext (CLAUDE.md: "sparsam"). Links tragen die
   normale Textfarbe und faerben sich erst beim Zeigen. */
a{color:inherit;text-decoration:none}
a:hover{color:var(--acid)}
:focus-visible{outline:2px solid var(--acid);outline-offset:2px}

/* ---------- Geruest ---------- */
.shell{min-height:100%;display:flex;flex-direction:column;padding:var(--gap);gap:var(--gap);max-width:1680px;margin:0 auto;width:100%}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:start}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:start}

.panel{
  background:linear-gradient(180deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);position:relative;
  display:flex;flex-direction:column;min-height:0;
}
.panel::before,.panel::after{
  content:"";position:absolute;width:7px;height:7px;border:1px solid var(--line-hot);pointer-events:none;
}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.phead{
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-2);
  flex:none;
}
.phead .n{margin-left:auto;color:var(--txt-3);font-variant-numeric:tabular-nums}
.pbody{padding:12px;overflow:auto;min-height:0}
.pbody::-webkit-scrollbar{width:6px}
.pbody::-webkit-scrollbar-thumb{background:#1E242B}

/* ---------- Kopfleiste ---------- */
.top{display:flex;align-items:center;gap:16px;border:1px solid var(--line);background:var(--panel);padding:11px 14px;flex:none;flex-wrap:wrap}
.mark{display:flex;align-items:baseline;gap:9px}
.mark .glyph{width:11px;height:11px;border:1.5px solid var(--acid);transform:rotate(45deg);box-shadow:0 0 12px rgba(212,243,24,.55);flex:none;align-self:center}
.mark b{font-family:var(--mono);font-weight:700;letter-spacing:.34em;font-size:14px}
.mark span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--txt-3)}
.top .spacer{flex:1}

.badge{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);padding:4px 8px;color:var(--txt-2);white-space:nowrap;
}
.badge.warn{border-color:rgba(255,160,40,.4);color:var(--amber)}
.badge.err{border-color:rgba(255,74,61,.4);color:var(--alert)}

/* ---------- Knoepfe ---------- */
.btn{
  display:inline-block;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);padding:9px 13px;color:var(--txt-2);transition:.15s;
  background:none;
}
.btn:hover{border-color:var(--line-hot);color:var(--txt);text-decoration:none}
.btn[aria-current="true"]{border-color:var(--acid);color:var(--acid);background:rgba(212,243,24,.06)}
.btn.stark{border-color:rgba(212,243,24,.45);color:var(--acid)}
.btn.gefahr:hover{border-color:rgba(255,74,61,.5);color:var(--alert)}

.filter{display:flex;gap:8px;flex-wrap:wrap}
.filter.abstand{margin-bottom:12px}
.trenner{border:0;border-top:1px solid var(--line);margin:16px 0}

/* ---------- Aufgabenzeile ---------- */
.task{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:13.5px;border-bottom:1px dashed #14181D}
.task:last-child{border-bottom:0}
.task .haken{appearance:none;width:13px;height:13px;border:1px solid #2A3038;margin-top:3px;flex:none;cursor:pointer;transition:.15s;padding:0}
.task .haken:hover{border-color:var(--acid)}
.task .haken[aria-pressed="true"]{background:var(--acid);border-color:var(--acid);box-shadow:0 0 8px rgba(212,243,24,.5)}
.task .titel{flex:1;min-width:0}
/* Nach dem Anlegen springt die Liste auf die neue Zeile. :target markiert
   sie, ohne dass dafuer Skript noetig waere. */
.task:target{box-shadow:inset 2px 0 0 var(--acid);padding-left:9px;margin-left:-9px}
.task.erledigt .titel{color:var(--txt-3);text-decoration:line-through}
.task.erledigt .tag{opacity:.5}
.task .tag{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--txt-3);border:1px solid var(--line);padding:1px 5px;white-space:nowrap;align-self:flex-start;margin-top:3px}
.task .tag.faellig{color:var(--amber);border-color:rgba(255,160,40,.35)}
.task .tag.ueberfaellig{color:var(--alert);border-color:rgba(255,74,61,.4)}
.task .notiz{display:block;font-size:12px;color:var(--txt-3);margin-top:2px}
.task .wer{font-family:var(--mono);font-size:10px;color:var(--amber);letter-spacing:.06em}
.task form{display:contents}

/* ---------- Formulare ---------- */
.feld{display:block;margin-bottom:11px}
.felder-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gap)}
@media (max-width:700px){.felder-3{grid-template-columns:1fr}}
.feld > .l{
  display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-3);margin-bottom:5px;
}
input[type=text],input[type=date],input[type=password],select,textarea{
  width:100%;background:#0A0C0F;border:1px solid var(--line);color:var(--txt);
  font-family:var(--sans);font-size:13.5px;padding:8px 10px;border-radius:0;
}
input[type=date],input[type=password]{font-family:var(--mono);font-variant-numeric:tabular-nums}
textarea{resize:vertical;min-height:60px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--line-hot)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--txt-3) 50%),linear-gradient(135deg,var(--txt-3) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat}

/* ---------- Leere Zustaende ----------
   CLAUDE.md: jede Kachel zeigt entweder echte Daten oder einen leeren Zustand
   mit Hinweis. Kein Platzhalter, der aussieht wie eine Messung. */
.leer.links{text-align:left;padding-top:12px}
.leer{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-3);padding:14px 0;text-align:center;
}

/* ---------- Meldungen ---------- */
.sig{border-left:2px solid var(--line);padding:8px 0 8px 11px;margin-bottom:10px}
.sig.warn{border-color:var(--amber)}
.sig.err{border-color:var(--alert)}
.sig .l{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.sig.warn .l{color:var(--amber)}
.sig.err .l{color:var(--alert)}
.sig .m{font-size:13px;margin-top:3px}

/* ---------- Anmeldung ---------- */
.anmeldung{max-width:340px;margin:auto;width:100%}
.anmeldung .pbody{padding:18px}

@media (max-width:1180px){
  .grid-3,.grid-2{grid-template-columns:1fr}
}
@media (max-width:560px){
  :root{--gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}