/* Fachteil des Moduls: Stile, die nur dieses Modul braucht. Das Gemeinsame
   steht in style.css (Referenz, bei jedem Bau erzeugt). */

/* Die Simonsche Methode: die Auswahl als Kanban-Tafel, das Fokuspaket als die
   eine hervorgehobene Sache. Nur Variablen, die style.css wirklich definiert
   (--border, --blue, --blue-light, --grey) - eine erfundene Variable waere
   eine unsichtbare Farbe (css_variablen_pruefen.py, 30.08.2026). */

/* --- Kanban: die ausgewaehlten Teilaufgaben ------------------------------ */
.kanban { display: flex; gap: .8rem; align-items: flex-start; flex-wrap: wrap; }

/* Vier Spalten (seit 23.10.2026 mit der Rueckmeldung) passen nebeneinander. */
.kanban-spalte {
  flex: 1 1 12rem;
  min-width: 12rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .6rem .7rem 1rem;
}

.kanban-spalte h4 { margin: 0 0 .5rem; font-size: .95rem; }

.ap-karte {
  border: 1px solid var(--border);
  border-radius: .4rem;
  padding: .5rem .6rem;
  margin-bottom: .5rem;
}

/* Eine Karte, die auf Rueckmeldung wartet. */
.ap-karte.ap-rueckmeldung { border: 2px solid var(--amber-text); }

/* Die Kringel: jede Rueckmeldung an der Teilaufgabe (passt / nochmal /
   zurueckgeholt), aelteste zuerst. */
.ap-kringel { list-style: none; padding: 0; margin: .35rem 0 0; font-size: .82rem; }
.ap-kringel li { padding: .1rem 0; border-top: 1px dotted var(--border); }

.ap-kopf { line-height: 1.35; }

/* Die Nummer der Teilaufgabe - wie auf Christians Blatt: 1.1, 1.2, 2.17. */
.ap-nr {
  display: inline-block;
  min-width: 1.6rem;
  margin-right: .35rem;
  padding: 0 .3rem;
  border-radius: .25rem;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-size: .78rem;
  text-align: center;
}

/* Fraktal: woraus diese Teilaufgabe herausgefallen ist. */
.ap-eltern { font-size: .82rem; color: var(--grey); }

/* Was tatsaechlich herausgekommen ist - der Satz, wegen dem eine Teilaufgabe
   ueberhaupt als erledigt gilt. */
.ap-ergebnis { font-size: .9rem; }

.ap-knoepfe { margin-top: .4rem; display: flex; gap: .25rem; flex-wrap: wrap; }
.ap-knoepfe button { font-size: .8rem; padding: .15rem .45rem; }

/* --- Die Liste nach Gruppen und die Linie (23.10.2026) ------------------- */
.pj-liste-zeile {
  display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  padding: .3rem .4rem; border-bottom: 1px solid var(--border);
}
.pj-liste-zeile.pj-liste-standby { color: var(--grey); }
.pj-liste-titel { flex: 1 1 18rem; min-width: 0; }
.pj-liste-titel input { width: 100%; margin: .1rem 0; }
.pj-liste-wer { font-size: .85em; }
.pj-liste-knoepfe button { font-size: .8rem; padding: .1rem .4rem; }
.pj-griff { cursor: grab; color: var(--grey); user-select: none; }
.pj-auf-btn { padding: 0 .3rem; font-size: .8rem; }
.pj-auf-platz { display: inline-block; width: 1.4rem; }
.pj-schnitt {
  margin: .5rem 0; padding: .3rem .6rem; text-align: center; font-size: .9rem;
  border-top: 2px dashed var(--blue); border-bottom: 2px dashed var(--blue);
  background: var(--blue-light); color: var(--blue-dark);
}

/* --- Das Kanban der Vorhaben: die wenigen in Arbeit ---------------------- */
.pj-portfolio-kopf { margin-bottom: .1rem; }
.pj-portfolio-arbeit { border: 2px solid var(--blue); border-radius: .5rem; padding: .2rem; }

/* --- Übersicht: je Vorhaben ein Block, die Teilprojekte darin (23.10.2026) - */
.pj-ue-block { border: 1px solid var(--border); border-radius: .5rem; padding: .5rem .8rem; margin: .6rem 0; }
.pj-ue-block.pj-ue-arbeit { border: 2px solid var(--blue); }
.pj-ue-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.pj-ue-wer { margin-left: auto; font-size: .9em; }
.pj-ue-niemand { color: var(--amber-text); font-style: italic; }
.pj-ue-teil { margin: .5rem 0 0 1rem; padding-left: .7rem; border-left: 3px solid var(--border); }
.pj-ue-liste { list-style: none; margin: .3rem 0; padding: 0; }
.pj-ue-aufgabe { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; padding: .15rem 0; border-bottom: none; }
.pj-ue-leer { margin: .2rem 0; font-size: .9em; }
.pj-ue-mehr > summary { cursor: pointer; color: var(--blue); font-size: .9em; }
/* "+ Aufgabe" je Ebene: ein schmales Feld, gestrichelt wie "+ Unteraufgabe". */
.pj-ue-neu { margin: .2rem 0 .1rem; max-width: 28rem; }
.pj-ue-neu input { width: 100%; box-sizing: border-box; border-style: dashed; font-size: .9em; }

/* --- Grundversion: Bereiche zum Aufklappen (23.10.2026) ------------------ */
.pj-bereich { margin-top: 1rem; }
.pj-bereich > summary { cursor: pointer; list-style: revert; }
.pj-bereich > summary h3 { display: inline; margin: 0; }

/* "Angaben bearbeiten": Felder untereinander, die Beschreibung gross. */
.pj-bearbeiten label { display: block; margin: .5rem 0; }
.pj-bearbeiten input, .pj-bearbeiten select, .pj-bearbeiten textarea { display: block; width: 100%; box-sizing: border-box; margin-top: .2rem; }
.pj-bearbeiten textarea { min-height: 10rem; }
.pj-bearbeiten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 .8rem; }

/* --- Die geoeffnete Aufgabe: Seitenfeld rechts (23.10.2026) -------------- */
.pj-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(30rem, 100vw); overflow-y: auto; box-sizing: border-box;
  background: #fff; border-left: 1px solid var(--border);
  box-shadow: -4px 0 16px rgba(0, 0, 0, .08); padding: 1rem 1.1rem 2rem;
}
.pj-panel-kopf { display: flex; justify-content: space-between; align-items: center; }
.pj-panel label { display: block; margin: .5rem 0; }
.pj-panel input[type=text], .pj-panel select, .pj-panel textarea { display: block; width: 100%; box-sizing: border-box; margin-top: .2rem; }
.pj-panel textarea { min-height: 9rem; }
.pj-panel .pa-titel { font-size: 1.15rem; font-weight: 600; }
.pj-panel h4 { margin: 1rem 0 .3rem; }
.pa-schritte, .pa-mehr { display: flex; gap: .35rem; flex-wrap: wrap; margin: .6rem 0; }
.pa-unter { list-style: none; padding: 0; margin: .2rem 0; }
.pa-unter li { padding: .2rem 0; border-bottom: 1px dotted var(--border); }
.ap-karte .ap-kopf { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.ap-karte .ap-kopf:hover strong { text-decoration: underline; }
.ap-merkmale { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .82rem; margin-top: .2rem; }
.ap-karte.ap-offen, .pj-liste-zeile.ap-offen { outline: 2px solid var(--blue); }
.ap-neu { display: flex; gap: .3rem; margin-top: .4rem; }
.ap-neu input { flex: 1; min-width: 0; }

/* --- Unterlagen, zugeklappt ---------------------------------------------- */
.pj-unterlagen { margin-top: 1.2rem; border: 1px solid var(--border); border-radius: .5rem; padding: .6rem .8rem; }
.pj-unterlagen > summary { cursor: pointer; font-weight: 600; color: var(--blue-dark); }
.pj-unterlagen h4 { margin: 1rem 0 .4rem; }

/* --- Kopf des Vorhabens (22.10.2026): schmal wie awork "Home" ------------- */
.pj-kopf {
  border: 1px solid var(--border);
  border-radius: .6rem;
  padding: .8rem 1rem .9rem;
  margin: .6rem 0 1.2rem;
}
.pj-kopf h2 { margin: .3rem 0 .4rem; }
.pj-kopf-zeile { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .9rem; }

/* Die Vorgangsnummer - der Schluessel, unter dem das Vorhaben ueberall steht. */
.pj-key {
  padding: .05rem .45rem;
  border: 1px solid var(--border);
  border-radius: .3rem;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-weight: 600;
  font-size: .85rem;
}

.pj-angaben { display: grid; gap: .15rem; margin-bottom: .7rem; }
.pj-angaben .muted { display: inline-block; min-width: 7.5rem; }

/* Vier Kacheln: Budget, erledigt/ausgewaehlt, offene Arbeit, im PMO. */
.pj-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; margin-bottom: .7rem; }
.pj-kachel { border: 1px solid var(--border); border-radius: .5rem; padding: .5rem .7rem; background: var(--blue-light); }
.pj-kachel-titel { font-size: .8rem; color: var(--grey); }
.pj-kachel-wert { font-size: 1.35rem; font-weight: 600; color: var(--blue-dark); }
.pj-kachel-zusatz { font-size: .75rem; color: var(--grey); }
.pj-kachel-pmo { background: var(--amber); }
.pj-kachel-pmo .pj-kachel-wert { color: var(--amber-text); }

/* Die Projektgruppe als Koepfe. */
.pj-koepfe { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pj-kopf-person { display: flex; flex-direction: column; align-items: center; width: 5.5rem; text-align: center; }
.pj-initialen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--blue-light); color: var(--blue-dark);
  border: 1px solid var(--border); font-weight: 600; font-size: .85rem;
}
.pj-person-name { font-size: .78rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-person-rolle { font-size: .7rem; color: var(--grey); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pj-bearbeiten { margin-top: .5rem; }
.pj-bearbeiten summary { cursor: pointer; color: var(--blue); }

/* "+ Aufgabe" in der Spalte Offen. */
.ap-neu { display: grid; gap: .35rem; margin-top: .3rem; }
.ap-neu input[type=text], .ap-neu select { width: 100%; }
.ap-neu-standby { font-size: .85rem; }
/* Projektplan: Vorschlaege zum Ankreuzen (23.10.2026). */
.pj-vorschlaege { margin-top: .5rem; }
.pj-vorschlaege fieldset { border: 1px solid var(--border); border-radius: .4rem; margin: .4rem 0; padding: .3rem .7rem; }
.pj-vorschlaege legend { font-weight: 600; padding: 0 .3rem; }
.pj-vorschlag { display: block; padding: .15rem 0; }
.ap-hinweis { margin: 0; color: var(--amber-text); font-size: .85rem; }

/* --- Wie Christians Skizze (23.10.2026) ---------------------------------- */
/* Die Karte: Nummer, Titel, darunter klein die Unteraufgaben; die ganze
   Karte oeffnet die Aufgabe. */
.ap-karte { cursor: pointer; background: #fff; }
.ap-karte:hover { border-color: var(--blue); }
.ap-karte strong { font-weight: 600; }
.ap-klein { font-size: .8rem; color: var(--grey); margin-top: .15rem; }
.ap-klein.ap-blau { color: var(--blue); }
.ap-karte.ap-offen { background: var(--blue-light); }
.kanban-spalte { min-height: 6rem; }

/* Eine Zeile Schalter statt untereinander aufgeklappter Bereiche. */
.pj-reiter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .6rem; }
.pj-reiter-btn {
  background: none; border: 1px solid var(--border); border-radius: 1rem;
  padding: .2rem .75rem; font-size: .9rem; color: var(--blue-dark); cursor: pointer;
}
.pj-reiter-btn.aktiv { background: var(--blue-light); border-color: var(--blue); }
.pj-bereich[hidden] { display: none; }
.pj-kopf { padding: .6rem 1rem .4rem; margin: .6rem 0 1rem; }

/* Das Seitenfeld: Ergebnis und Verantwortlich nebeneinander, Unteraufgaben
   als Liste mit Haken, ein Hauptknopf, das Seltene unter "Mehr". */
.pa-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.pj-panel textarea { min-height: 5rem; }

/* Die fuenf Phasen im Kopf (23.10.2026): wo das Projekt steht. Aktuell blau
   umrandet, fertige gruen, die angeklickte unterstrichen. */
/* Immer eine Zeile, auch wenn das Seitenfeld daneben steht. */
.pj-phasen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; margin: .4rem 0 .2rem; }
.pj-phase span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-phase {
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  background: none; border: 1px solid var(--border); border-radius: .4rem;
  padding: .3rem .4rem; font-size: .85rem; color: var(--grey); cursor: pointer;
}
.pj-phase small { font-size: .75rem; }
.pj-phase.aktuell { border: 2px solid var(--blue); background: var(--blue-light); color: var(--blue-dark); font-weight: 600; }
.pj-phase.fertig { border-color: var(--green); color: var(--green-text); }
.pj-phase.gewaehlt span { text-decoration: underline; }
.pj-liste-zeile[hidden] { display: none; }
/* Vorlage der Projektart, solange keine Aufgabe eine Phase hat; ueber dem
   Kanban, welche Phase es zeigt. */
.pj-vorlage { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; }
.pj-kanban-titel { font-size: .85rem; margin: 0 0 .3rem; }
/* Breites Fenster: das Seitenfeld steht neben dem Vorhaben, nicht darueber;
   das Kanban wird dafuer schmaler. Schmales Fenster: es liegt darueber. */
@media (min-width: 900px) {
  main:has(.pj-panel) { padding-right: min(30rem, 45vw); }
  main:has(.pj-panel) .kanban-spalte { flex-basis: 7rem; min-width: 7rem; }
  .pj-panel { width: min(30rem, 45vw); }
}
.pa-unter li { border-bottom: none; padding: .15rem 0; }
.pa-unter li a { color: inherit; }
.pa-unter-form input { margin-top: .2rem; border-style: dashed; }
.pa-schritte { margin: 1rem 0 .4rem; }
.pa-mehr { display: block; margin-top: .6rem; }
.pa-mehr > summary { cursor: pointer; color: var(--blue); font-size: .9rem; }
.pa-knoepfe { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.pa-knoepfe button { font-size: .85rem; }

/* Die Struktur eines Vorhabens (24.10.2026, Skizze "Projekt 122"): die Phasen
   untereinander, je Zeile ein Haken "jetzt dran" (im Kanban), die Nummer, der
   Titel. Vorlagenzeilen ohne Datensatz grau. */
.pj-struktur { margin: .6rem 0 1rem; }
.pj-st-legende { font-size: .8rem; margin: 0 0 .4rem; }
.pj-st-phase { border: 1px solid var(--border); border-radius: .4rem; padding: .5rem .7rem; margin-bottom: .5rem; }
.pj-st-phase h3 { margin: 0 0 .3rem; font-size: 1rem; }
.pj-st-phase h3 small { font-weight: normal; color: var(--grey); font-size: .8rem; margin-left: .4rem; }
.pj-st-angaben { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .8rem; margin: 0 0 .4rem; }
.pj-st-angaben > div { display: contents; }
.pj-st-angaben dt { color: var(--grey); font-size: .85rem; }
.pj-st-angaben dd { margin: 0; font-size: .9rem; }
.pj-st-angaben input[type=text] { width: min(100%, 32rem); }
.pj-quelle { color: var(--grey); font-size: .75rem; margin-left: .3rem; }
.pj-st-zeilen { list-style: none; margin: 0; padding: 0; }
.pj-st-z { display: flex; align-items: center; gap: .4rem; padding: .12rem 0; font-size: .9rem; }
.pj-st-z.erledigt a { color: var(--grey); text-decoration: line-through; }
.pj-st-vorlage a { color: var(--grey); }
.pj-st-nr { color: var(--grey); font-size: .78rem; min-width: 2.6rem; }
.pj-st-stand { font-size: .75rem; color: var(--blue-dark); background: var(--blue-light); border-radius: .3rem; padding: 0 .3rem; }
.pj-st-tp { border-left: 3px solid var(--blue-light); padding: .1rem 0 .2rem .6rem; margin: .3rem 0; }
.pj-st-tp-kopf { display: flex; align-items: baseline; gap: .4rem; font-weight: 600; }
.pj-st-tp-kopf small { font-weight: normal; }
/* Ein Plus mit Knopf (24.10.2026): Feld und sichtbarer Knopf nebeneinander. */
.pj-plus { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .2rem; }
.pj-plus input { width: min(100%, 20rem); font-size: .85rem; padding: .15rem .35rem; }
.pj-plus button { font-size: .85rem; padding: .15rem .5rem; }
.pj-plus-hinweis { flex-basis: 100%; font-size: .8rem; }
#pj-st-tp-anlegen button { font-weight: 600; }

/* Die Aufgabe rechts mit Checkliste und Aktivitaet (24.10.2026, wie awork). */
.pa-check { list-style: none; margin: 0 0 .2rem; padding: 0; }
.pa-check li { display: flex; align-items: center; gap: .3rem; font-size: .9rem; }
.pa-check-fertig { color: var(--grey); text-decoration: line-through; }
.pa-check-weg { padding: 0 .35rem; font-size: .85rem; }
.pa-unter-form select { font-size: .85rem; }
.pa-akt-form textarea { width: 100%; font-size: .9rem; }
.pa-akt-zeile { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .25rem; }
.pa-akt-zeile select { font-size: .85rem; max-width: 16rem; }
.pa-akt-datei { font-size: .85rem; }
.pa-akt-datei input { font-size: .8rem; }
.pa-akt { list-style: none; margin: .5rem 0 0; padding: 0; }
.pa-akt li { padding: .3rem 0; border-top: 1px dotted var(--border); font-size: .9rem; }
.pa-akt li > span { font-size: .78rem; }
.pa-aus { color: var(--blue-dark); font-weight: 600; }
.pa-at { background: var(--blue-light); color: var(--blue-dark); border-radius: .2rem; padding: 0 .15rem; }