/* ═══════════════════════════════════════════════════════════════════════════
 * powertasks.css — POWERTASKS 13.10.2026: die Seite Powertasks
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Ergaenzt susi.css und transkript.css (.tr-balken), ersetzt nichts.
 * .view, .view-head, .prim-btn, .sec-btn und die Farbvariablen kommen von
 * dort. Kacheln: hoechstens zwei je Zeile (Gerald 12.10.), am Handy eine.
 * ═══════════════════════════════════════════════════════════════════════════
 */

.pt-einleitung {
  font-size: 13px; color: var(--txt2); line-height: 1.6;
  max-width: 720px; margin-bottom: 18px;
}
.pt-h2 { font-size: 15px; font-weight: 700; margin: 28px 0 12px }

/* ── Kacheln ──────────────────────────────────────────────────────────────── */

.pt-kacheln {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; max-width: 900px;
}
.pt-kachel {
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: #fff; border: 1.5px solid var(--bdr); border-radius: var(--rad);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.pt-kachel:hover { border-color: var(--acc); box-shadow: var(--shadow-md) }
.pt-kachel-titel { font-size: 15px; font-weight: 700; margin-bottom: 6px }
.pt-kachel-text  { font-size: 13px; color: var(--txt2); line-height: 1.55 }

/* ── Liste ────────────────────────────────────────────────────────────────── */

.pt-liste {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; max-width: 900px; align-items: start;
}
.pt-karte {
  background: #fff; border: 1.5px solid var(--bdr); border-radius: 12px;
  padding: 12px 14px; cursor: pointer;
}
.pt-karte:hover { border-color: var(--bdr2) }
.pt-karte-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start }
.pt-karte-titel { font-size: 14px; font-weight: 600; overflow-wrap: anywhere }
.pt-karte-dok { font-size: 12px; color: var(--txt2); margin-top: 6px; overflow-wrap: anywhere }
.pt-karte-schritt { font-size: 12px; color: var(--txt2); margin-top: 6px }
.pt-karte-datum { font-size: 11px; color: var(--txt3); margin-top: 8px }
.pt-leer { grid-column: 1 / -1; color: var(--txt3); font-size: 13px; padding: 12px 0 }

/* ── Zustand und Zaehler ──────────────────────────────────────────────────── */

.pt-zustand {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; white-space: nowrap; background: #f1f5f9; color: #475569;
}
.pt-z-bereit, .pt-z-laeuft { background: #eff6ff; color: #1d4ed8 }
.pt-z-wartet  { background: #fefce8; color: #a16207 }
.pt-z-fertig  { background: #ecfdf5; color: #047857 }
.pt-z-fehlgeschlagen { background: #fef2f2; color: #b91c1c }

.pt-zaehler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.pt-zahl {
  font-size: 12px; padding: 2px 9px; border-radius: 10px;
  background: #f1f5f9; color: #334155;
}
.pt-zahl-stimmt    { background: #ecfdf5; color: #047857 }
.pt-zahl-weicht_ab { background: #fefce8; color: #a16207 }
.pt-zahl-fehlt     { background: #fef2f2; color: #b91c1c }

.pt-fehler {
  margin-top: 8px; font-size: 12px; color: #b91c1c;
  background: #fef2f2; border-radius: 8px; padding: 6px 9px;
}
.pt-hinweis { margin-top: 8px; font-size: 12px; color: var(--txt2); line-height: 1.5 }

/* ── Formular ─────────────────────────────────────────────────────────────── */

.pt-slots {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; max-width: 900px; margin-bottom: 18px;
}
.pt-slot {
  border: 1.5px dashed var(--bdr2); border-radius: var(--rad);
  padding: 14px 16px; background: var(--bg2); min-height: 110px;
}
.pt-slot-titel { font-size: 13px; font-weight: 700; margin-bottom: 10px }
.pt-slot-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere }
.pt-slot-umfang { font-size: 12px; color: var(--txt2); margin-top: 4px }
.pt-slot-laedt { font-size: 13px; color: var(--txt2) }
.pt-knopf { display: inline-block; margin: 0 8px 8px 0; cursor: pointer }

.pt-bib-titel { font-size: 12px; font-weight: 600; color: var(--txt2); margin: 6px 0 }
.pt-bib-liste {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px; overflow-y: auto; margin-bottom: 6px;
}
.pt-bib-eintrag {
  text-align: left; font: inherit; font-size: 13px; cursor: pointer;
  background: #fff; border: 1px solid var(--bdr); border-radius: 8px;
  padding: 6px 10px; color: var(--txt); overflow-wrap: anywhere;
}
.pt-bib-eintrag:hover { border-color: var(--acc) }

.pt-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--acc); margin-top: 8px;
}
.pt-link:hover { text-decoration: underline }
.view-head .pt-link { margin: 0 12px 0 0 }

.pt-frage-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px }
.pt-frage {
  width: 100%; max-width: 900px; font: inherit; font-size: 14px;
  border: 1.5px solid var(--bdr); border-radius: 10px; padding: 10px 12px;
  resize: vertical; background: #fff; color: var(--txt);
}
.pt-frage:focus { outline: none; border-color: var(--acc) }
.pt-mail { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 10px 0 }

.pt-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.pt-aktionen a { text-decoration: none }
.pt-aktionen-fuss { margin-top: 28px }
.pt-loeschen { color: #b91c1c }

.pt-plan {
  max-width: 900px; margin-top: 18px; padding: 14px 16px;
  border: 1.5px solid var(--bdr2); border-radius: var(--rad); background: #fff;
}
.pt-plan-frage { border-color: var(--amber); background: #fffbeb }
.pt-plan-titel { font-size: 13px; font-weight: 700; margin-bottom: 8px }
.pt-plan-satz { font-size: 13px; line-height: 1.6; white-space: pre-wrap }
.pt-plan-spalten { font-size: 12px; color: var(--txt2); margin-top: 8px }

/* ── Ein Auftrag ──────────────────────────────────────────────────────────── */

.pt-block {
  max-width: 900px; margin-bottom: 14px; padding: 14px 16px;
  border: 1.5px solid var(--bdr); border-radius: var(--rad); background: #fff;
}
.pt-block-titel { font-size: 12px; font-weight: 700; color: var(--txt2); margin-bottom: 6px }
.pt-auftrag { font-size: 14px; line-height: 1.6; white-space: pre-wrap }
.pt-block .pt-plan-satz { margin-top: 10px; color: var(--txt2) }
.pt-schritt-zahl { font-size: 13px; font-weight: 600; margin-bottom: 8px }

/* ── B2b 14.10.2026 ───────────────────────────────────────────────────────── */

/* Kopf: Titel links neben "Zurueck", nicht allein am rechten Rand */
.pt-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
           margin-bottom: 18px; }
.pt-kopf h1 { font-size: 20px; font-weight: 700; margin: 0 }
.pt-kopf .pt-link { margin: 0 }

.pt-kachel-hinweis { font-size: 12px; color: var(--txt3); line-height: 1.5; margin-top: 8px }
.pt-karte-kurz { font-size: 12.5px; color: var(--txt); margin-top: 8px; line-height: 1.5 }

/* D1 / D2 — dieselben Farben wie im Bericht (seonai.eu) */
.pt-dm { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1;
         padding: 3px 6px; border-radius: 6px; vertical-align: 1px }
.pt-dm1 { background: #EAF5FF; color: #204BCA }
.pt-dm2 { background: #FCF3D6; color: #4A431F }

.pt-slot-grenze { font-size: 11.5px; color: var(--txt3); margin: -6px 0 10px }
.pt-kriterien-haekchen { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px;
                         color: var(--txt2); margin-top: 12px; cursor: pointer; line-height: 1.4 }
.pt-kriterien-haekchen input { margin-top: 2px }
.pt-kriterien { margin-bottom: 8px }
.pt-frage-frei { margin: -2px 0 6px }

.pt-zahl-unter { opacity: .75; font-size: 11px }
.pt-zusammenfassung { max-width: 900px; margin: 14px 0 4px; font-size: 14px; line-height: 1.65;
                      background: #fff; border: 1.5px solid var(--bdr); border-radius: var(--rad);
                      padding: 14px 18px }
.pt-zusammenfassung p { margin: 0 0 10px }
.pt-zusammenfassung p:last-child { margin-bottom: 0 }

/* Auswahl aus der Bibliothek: sieht aus wie eine Liste zum Anklicken, nicht
   wie ein ausgefuelltes Feld (Gerald 13.10.) */
.pt-bib-eintrag { display: flex; align-items: center; gap: 8px; background: transparent;
                  border: 1px dashed var(--bdr2) }
.pt-bib-eintrag::after { content: "›"; margin-left: auto; font-size: 16px; color: var(--txt3) }
.pt-bib-eintrag:hover { background: #fff; border-style: solid }

/* gesperrter Knopf sieht gesperrt aus */
#powertasks-view .prim-btn:disabled { opacity: .45; cursor: default; box-shadow: none }


/* Uebersicht: Auftraege nach Kachel getrennt (Gerald 14.10.) */
.pt-strich { border: none; border-top: 1.5px solid var(--bdr); margin: 30px 0 4px; max-width: 900px }
.pt-h2-gross { font-size: 17px; margin-top: 16px }
.pt-gruppe .pt-h2 { margin-top: 18px }
.pt-karte-art { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
                text-transform: uppercase; color: var(--txt3); margin-top: 4px }

/* Kontingent oben auf der Seite (Gerald 14.10.): nur Prozent */
.pt-kontingent { max-width: 900px; margin: 0 0 18px; padding: 10px 14px;
                 border: 1.5px solid var(--bdr); border-radius: 10px; background: #fff }
.pt-kontingent-kopf { display: flex; justify-content: space-between; gap: 10px;
                      font-size: 12.5px; font-weight: 600 }
.pt-kontingent-zahl { font-weight: 600; white-space: nowrap }
.pt-kontingent-balken { height: 6px; border-radius: 3px; background: #EEF2F7; margin: 7px 0 6px;
                        overflow: hidden }
.pt-kontingent-balken > div { height: 100%; border-radius: 3px; background: #1F7A4C }
.pt-k-knapp .pt-kontingent-balken > div { background: #C9821F }
.pt-k-erreicht .pt-kontingent-balken > div { background: #A3264F }
.pt-k-erreicht { border-color: #F0C4D3; background: #FDF5F8 }
.pt-kontingent-satz { font-size: 12px; color: var(--txt2); line-height: 1.45 }

/* ── Handy ────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .pt-kacheln, .pt-liste, .pt-slots { grid-template-columns: minmax(0, 1fr) }
}