/* ===================================================================
   Aufgabenbrett. Baut auf gate.css und start.css auf.
   =================================================================== */

/* .inhalt--breit, .zurueck, .kopf-zeile und .leise sind am 31.08.2026 nach
   start.css gewandert -- sie werden auf jeder Seite gebraucht, aber nicht
   jede Seite laedt diese Datei hier. */

/* ---------- Formular -------------------------------------------------- */

.neu {
  margin: 0 0 28px;
  padding: 20px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.neu__zeile { margin-bottom: 14px; }
/* Zwoelf Spalten statt auto-fit: Damit laesst sich sagen, WIE breit ein
   Feld sein soll -- ein Titel braucht die ganze Zeile, eine Stufe ein
   Drittel. auto-fit gab jedem Feld dieselbe Breite, egal was drin steht. */
.neu__raster {
  display: grid; gap: 14px 16px; margin-bottom: 8px;
  grid-template-columns: repeat(12, 1fr);
}
/* Vorgabe: ein Drittel. Reicht fuer Auswahlfelder und Datumsangaben. */
.neu__raster > .feld { grid-column: span 4; min-width: 0; }

/* Diese Klasse stand in drei HTML-Dateien, war aber NIE definiert --
   deshalb quetschte das Raster jedes Feld in dieselbe Breite und lange
   Kategorienamen wurden abgeschnitten. */
.neu__raster > .feld--breit { grid-column: 1 / -1; }
.neu__raster > .feld--halb  { grid-column: span 6; }

@media (max-width: 860px) {
  .neu__raster > .feld { grid-column: span 6; }
}
@media (max-width: 560px) {
  .neu__raster > .feld, .neu__raster > .feld--halb { grid-column: 1 / -1; }
}
.neu__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 12px; }

.feld-schild {
  display: block; margin-bottom: 6px;
  font-size: .76rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-still);
}

.neu input, .neu textarea, .neu select {
  width: 100%; padding: 10px 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.neu textarea { resize: vertical; min-height: 62px; }
.neu input:focus, .neu textarea:focus, .neu select:focus {
  outline: none; border-color: rgba(63, 189, 245, .7);
  box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
}
/* Aufhellen ist nicht mehr noetig: color-scheme: dark (gate.css) laesst den
   Browser das Kalendersymbol schon hell zeichnen. Ein invert() wuerde es hier
   wieder verdunkeln. */
.neu input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* ---------- Brett ----------------------------------------------------- */

.brett {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

/* Die vier Spalten bekommen dieselbe Behandlung wie die Kacheln auf der
   Startseite: eine eigene Farbe je Status, ein Streifen oben in dieser
   Farbe, ein sehr weicher Verlauf darunter. Vorher unterschied sie nur
   ein 8 px grosser Punkt -- vier gleiche graue Kaesten nebeneinander.

   Die Farbe folgt dem STATUS, nicht dem Rang: Offen blaugrau (noch
   nichts passiert), In Arbeit blau (laeuft), Review gold (jemand muss
   hinsehen), Erledigt gruen (fertig). */
.spalte {
  --sfarbe: #6f89a8;
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sfarbe) 8%, transparent), transparent 42%),
    var(--flaeche);
  border: 1px solid color-mix(in srgb, var(--sfarbe) 20%, var(--rand));
  border-radius: var(--radius);
  padding: 16px 13px 18px;
  min-height: 120px;
}
/* Der Streifen oben laeuft nach rechts aus -- eine durchgezogene Kante
   wirkt wie eine Trennwand, eine auslaufende wie eine Markierung. */
.spalte::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--sfarbe),
    color-mix(in srgb, var(--sfarbe) 20%, transparent) 70%, transparent);
}
/* Was die Spalte bedeutet -- steht immer da, nicht nur wenn sie leer
   ist. "Review" allein sagt einem Neuen nichts. */
.spalte__unter {
  margin: 2px 0 12px 17px;
  font-size: .76rem; color: var(--text-still);
}

.spalte__kopf {
  display: flex; align-items: center; gap: 8px;
  margin: 0 2px 12px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-leise);
}
.spalte__punkt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.spalte__zahl {
  margin-left: auto; padding: 1px 8px;
  background: rgba(255, 255, 255, .06); border-radius: 999px;
  font-size: .74rem; color: var(--text-still); letter-spacing: normal;
}

.spalte[data-status="offen"]    { --sfarbe: #6f89a8; }
.spalte[data-status="arbeit"]   { --sfarbe: #3fbdf5; }
.spalte[data-status="review"]   { --sfarbe: #e0a33c; }
.spalte[data-status="erledigt"] { --sfarbe: #4dab77; }
.spalte__punkt {
  background: var(--sfarbe);
  box-shadow: 0 0 9px color-mix(in srgb, var(--sfarbe) 70%, transparent);
}
.spalte .spalte__zahl { color: var(--sfarbe); }

.karte {
  padding: 12px 13px;
  margin-bottom: 9px;
  background: rgba(9, 13, 22, .78);
  border: 1px solid var(--rand);
  border-left: 3px solid transparent;
  border-radius: var(--radius-klein);
}
.karte[data-prio="hoch"]    { border-left-color: #d8656e; }
.karte[data-prio="mittel"]  { border-left-color: #4b6c8a; }
.karte[data-prio="niedrig"] { border-left-color: #3c4a5a; }

.karte__titel { font-weight: 600; font-size: .93rem; line-height: 1.35; }
.karte__text  { margin: 6px 0 0; font-size: .84rem; color: var(--text-leise); }

.karte__zeile {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 10px; font-size: .76rem; color: var(--text-still);
}
.karte__frist--faellig { color: var(--warn); font-weight: 600; }

.karte__schritte { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* Der leere Zustand einer Spalte. Vorher stand hier in allen vier
   Spalten ein Gedankenstrich -- vier graue Striche nebeneinander sehen
   aus, als sei die Seite kaputt. Jetzt sagt jeder Satz, was das
   Leersein BEDEUTET (siehe SPALTEN in aufgaben.js), auf einer eigenen
   ruhigen Flaeche statt im Nichts. */
.spalte__leer {
  margin: 4px 0 0; padding: 16px 12px;
  text-align: center;
  font-size: .82rem; color: var(--text-still); line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--sfarbe) 14%, transparent);
  border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--sfarbe) 5%, transparent);
}

@media (max-width: 1080px) { .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .brett { grid-template-columns: 1fr; } }

/* ---------- Bearbeiten-Dialog ------------------------------------------ */

.dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0; border: 1px solid var(--rand-hell);
  border-radius: var(--radius);
  background: #0b1018;
  color: var(--text);
  box-shadow: var(--schatten);
}
.dialog::backdrop { background: rgba(2, 4, 8, .68); backdrop-filter: blur(3px); }

.neu--blank { margin: 0; border: 0; background: none; padding: 22px; }

.dialog__titel { margin: 0 0 18px; font-size: 1.12rem; font-weight: 700; }

.dialog__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.dialog__knoepfe #b-loeschen { margin-left: auto; }

.abmelden--warnung { color: var(--warn); border-color: rgba(255, 154, 162, .35); }
.abmelden--warnung:hover { background: rgba(255, 154, 162, .1); border-color: rgba(255, 154, 162, .6); }

/* Der Bearbeiten-Stift war nie ein richtiger Knopf, sondern nackter
   Text -- man sah nicht, dass man draufdruecken kann. Jetzt traegt er
   das Knopf-System in der kleinsten, ruhigsten Groesse. */
.karte__stift { margin-left: auto; }
.karte__kopf { display: flex; align-items: flex-start; gap: 8px; }
.karte__kopf .karte__titel { flex: 1 1 auto; }

/* ===================================================================
   Rückmeldungen an einer Aufgabe ("Aufgaben & Feedback", Konzept).

   Direkt an der Karte, nicht in einem Fenster: Man liest sie im
   Zusammenhang mit der Aufgabe -- sonst fehlt beim Antworten die
   Hälfte.
   =================================================================== */

.karte__rueck {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 6px 11px; cursor: pointer;
  background: transparent;
  border: 1px solid var(--rand); border-radius: 999px;
  color: var(--text-still); font: inherit; font-size: .76rem;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.karte__rueck:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
/* Wo schon etwas besprochen wurde, sieht man es ohne Aufklappen. */
.karte__rueck[data-hat="ja"] {
  color: var(--akzent);
  border-color: rgba(63, 189, 245, .38);
  background: rgba(63, 189, 245, .08);
}
.karte__rueck[data-offen="ja"] { border-color: rgba(63, 189, 245, .6); color: #fff; }
.karte__blase {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.rueck {
  margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--rand);
}
.rueck__liste { display: grid; gap: 8px; margin-bottom: 11px; }
.rueck__eintrag {
  padding: 9px 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
}
.rueck__kopf { display: flex; align-items: baseline; gap: 8px; margin: 0 0 3px; }
.rueck__wer { font-size: .79rem; font-weight: 650; color: var(--text); }
.rueck__wann { font-size: .72rem; color: var(--text-still); }
.rueck__weg {
  margin-left: auto; padding: 0 5px; cursor: pointer; line-height: 1;
  background: none; border: 0; color: var(--text-still); font-size: 1rem;
}
.rueck__weg:hover { color: #ffb4b9; }
.rueck__text {
  margin: 0; font-size: .85rem; color: var(--text-leise);
  white-space: pre-wrap; line-height: 1.5;
}

.rueck__form { display: grid; gap: 8px; justify-items: start; }
.rueck__feld {
  width: 100%; padding: 9px 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit; font-size: .86rem; resize: vertical;
}
.rueck__feld:focus {
  outline: none; border-color: rgba(63, 189, 245, .65);
  box-shadow: 0 0 0 3px rgba(63, 189, 245, .15);
}

@media (prefers-reduced-motion: reduce) { .karte__rueck { transition: none; } }