/* src/portal/static/stil.css — Greystone, nach dem Vorbild t3-zufahrt */
/* Pico CSS Version 2.1.1 (aktuelle stabile 2.x-Hauptversion, geprueft am
   2026-08-11 via `docker run --rm node:22-alpine npm view @picocss/pico
   version`), lokal abgelegt als pico.min.css -- kein CDN-Verweis zur
   Laufzeit. */
:root {
  --greystone-kopf: #2C2C2C;
  --vollstaendig: #2e7d32;
  --lueckenhaft:  #f9a825;
  --holbar:       #1976d2;
  --verfallen:    #c62828;
  --leer:         #e0e0e0;
  /* Nur `verfallen` ist rot. Die drei Zustände hier bedeuten ausdrücklich
     keinen Verlust und dürfen deshalb auch nicht wie einer aussehen:
     `in-arbeit` und `ohne-material` sind neutrale Grautöne (der laufende Tag
     ist die Zelle, auf die zuerst geschaut wird — sie darf nicht täglich
     Alarm schlagen), `defekt` ist ein Warnton, aber ein anderer als Rot. */
  --in-arbeit:     #90a4ae;
  --ohne-material: #757575;
  --defekt:        #ef6c00;
}

h1, h2, h3, .kopfleiste { font-family: "Oswald", system-ui, sans-serif; }

.kopfleiste {
  background: var(--greystone-kopf);
  color: #fff;
  padding: 0.6rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kopfleiste a { color: #fff; }

.karte {
  background: #fff;
  border: 1px solid #c8d8db;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Der Kalender ist ein Raster fester Zellen, keine Tabelle: die Zellen
   tragen keine Beschriftung, sondern nur Farbe — die Bedeutung steht im
   `title` und in der Legende darunter. */
.kalender { display: flex; flex-wrap: wrap; gap: 2px; }
.kalender a, .kalender span {
  width: 14px; height: 14px; border-radius: 2px; display: block;
}
.zustand-vollstaendig { background: var(--vollstaendig); }
.zustand-lueckenhaft  { background: var(--lueckenhaft); }
.zustand-holbar       { background: var(--holbar); }
.zustand-verfallen    { background: var(--verfallen); }
.zustand-leer         { background: var(--leer); }
.zustand-in_arbeit     { background: var(--in-arbeit); }
.zustand-ohne_material { background: var(--ohne-material); }
.zustand-defekt        { background: var(--defekt); }

/* Monatsgliederung des Kalenders (Nachtrag 2026-08-13): Titelzeile je
   Kalendermonat mit Zusammenfassung, und eine schmalere Zeile fuer eine
   Folge von Monaten ganz ohne Material (Regel 4 der Spezifikation) --
   bewusst unauffaellig, sie ersetzt eine Abwesenheit, keinen Befund. */
.monatstitel { margin: 0.9rem 0 0.3rem; font-size: 0.95rem; font-weight: 600; }
.monatsluecke {
  margin: 0.5rem 0; padding: 0.3rem 0.6rem; color: #666; font-style: italic;
  background: #f3f3f3; border-radius: 4px; font-size: 0.85rem;
}

.legende { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; }
.legende span.probe { width: 12px; height: 12px; display: inline-block;
                      border-radius: 2px; vertical-align: middle; }

.still { color: var(--verfallen); font-weight: 700; }