/* ------------------------------------------------------------------
   Projektseite.

   WICHTIG: hier stehen KEINE eigenen Farbwerte und keine
   Rueckfallwerte. Alles kommt aus den Variablen, die style.css und
   dunkelmodus.css setzen - nur dann wechselt die Seite mit um.

   Beim ersten Versuch stand hier var(--ink-muted, #5B6879) und
   Aehnliches. Diese Namen gibt es in dieser Anwendung nicht, also
   griff immer der helle Rueckfallwert - im Dunkelmodus helle Schrift
   auf hellem Grund. Merksatz: erst nachsehen, wie die Farben hier
   heissen, dann schreiben.

   Die Namen, die es gibt:
     --ink        Schrift        --ink-soft   gedaempfte Schrift
     --paper      Seitengrund    --panel      Kastengrund
     --flaeche-weich  abgesetzte Flaeche      --feld  Eingabefelder
     --line       Linien         --link       Verweise
     --knopf      Knopfgrund     --rot        Warnrot
     --orange     Akzent         --green-ok   Gut-Gruen
     --thw-blue   THW-Blau       --navy       Dunkelblau
   ------------------------------------------------------------------ */

.pj-titel { margin: 0 0 6px; }
.pj-lead { color: var(--ink-soft); max-width: 62ch; margin: 0 0 22px;
           font-size: 13.5px; }

.pj-block { margin: 0 0 26px; }
.pj-block h2 { font-size: 16px; margin: 0 0 8px; color: var(--ueberschrift); }

.pj-rahmen {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  overflow-x: auto;
  background: var(--panel);
}
.pj-tabelle { border-collapse: collapse; width: 100%; font-size: 13px; }
.pj-tabelle th, .pj-tabelle td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--ink);
}
.pj-tabelle tr:last-child td, .pj-tabelle tr:last-child th { border-bottom: none; }
.pj-tabelle th { white-space: nowrap; width: 1%; font-weight: 600; }
.pj-liste th {
  color: var(--ink-soft); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em; width: auto;
  background: var(--flaeche-weich);
}
.pj-mono { font-family: 'IBM Plex Mono', Consolas, monospace; }

.pj-kasten {
  border-left: 3px solid var(--line);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin: 10px 0;
  background: var(--flaeche-weich);
  color: var(--ink);
  font-size: 13px;
}
.pj-kasten p { margin: 0; }
.pj-kasten p + p { margin-top: 8px; }

/* Der Zustand soll auf einen Blick lesbar sein. Farbe UND Text -
   Farbe allein reicht nicht, und im Dunkelmodus schon gar nicht. */
.pj-frei    { border-left-color: var(--green-ok); }
.pj-meine   { border-left-color: var(--thw-blue); }
.pj-fremd   { border-left-color: var(--orange); }
.pj-laeuft  { border-left-color: var(--thw-blue); }
.pj-warnung { border-left-color: var(--orange); }
.pj-fehler  { border-left-color: var(--rot); }

.pj-zweck { font-style: italic; color: var(--ink-soft); }

.pj-form { margin: 12px 0; display: flex; flex-direction: column;
           gap: 8px; align-items: flex-start; max-width: 520px; }
.pj-form label { font-weight: 500; font-size: 13px; color: var(--ink); }
.pj-form input[type=text] {
  width: 100%; padding: 8px 11px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--feld); color: var(--ink);
  font-family: inherit;
}
.pj-form input[type=file] { font-size: 13px; color: var(--ink); }
.pj-hoch { margin-top: 20px; }

.pj-zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pj-zeile form { margin: 0; }

.pj-knopf {
  display: inline-block; padding: 7px 13px; border-radius: 5px;
  border: 1px solid var(--link); background: var(--feld);
  color: var(--link); font-size: 12px; font-weight: 500;
  cursor: pointer; text-decoration: none; font-family: inherit;
}
.pj-knopf:hover { background: var(--link); color: var(--paper); }
.pj-haupt { background: var(--knopf); border-color: var(--knopf); color: #fff; }
.pj-haupt:hover { background: var(--knopf); color: #fff; filter: brightness(1.12); }
.pj-gefahr { border-color: var(--rot); color: var(--rot); }
.pj-gefahr:hover { background: var(--rot); color: var(--paper); }

.pj-klein { font-size: 12px; color: var(--ink-soft); max-width: 62ch; }

/* Nur eine Tönung, kein fester Farbwert - so bleibt sie auf hellem
   wie auf dunklem Grund dezent und die Schrift darauf lesbar. */
.pj-nok td { background: rgba(190, 60, 60, .10); }
.pj-liste details { margin-top: 5px; }
.pj-liste summary { cursor: pointer; color: var(--link); font-size: 12px; }
.pj-liste pre {
  font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 11.5px;
  white-space: pre-wrap; word-break: break-word;
  background: var(--flaeche-weich); color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 5px; margin: 6px 0 0; max-height: 300px; overflow: auto;
}

@media (max-width: 560px) {
  .pj-tabelle th { width: auto; }
  .pj-form { max-width: none; }
  .pj-knopf { width: 100%; text-align: center; }
}