/* ══════════════════════════════════════════════════════════════
   tickets-public.css — oeffentliche Ticketansicht (PPTICKET-158)

   PP-724: Hier stand eine eigene Farbpalette (--tp-*) und ein eigener
   Seitenaufbau. Das Ergebnis sah aus wie ein anderes Erzeugnis als das
   Backend.

   Jetzt kommt alles Grundsaetzliche aus pp.css und pp-utils.css — die
   Ansicht benutzt pp-card, pp-badge, pp-table, pp-btn wie jede
   Verwaltungsseite. Diese Datei ergaenzt NUR, was es dort nicht gibt,
   und leitet jede Farbe aus den --pp-*-Marken ab. Wer das Erscheinungs-
   bild des Frameworks aendert, aendert damit auch diese Seite.

   Faustregel fuer Ergaenzungen hier: Gibt es eine pp-Klasse, die das
   kann? Dann die nehmen. Diese Datei ist fuer das, was es nicht gibt.
   ══════════════════════════════════════════════════════════════ */

/* ─── Brotkrumen ──────────────────────────────────────────────
   Es gibt pp-Klassen fuer Text und Abstand, aber keine Brotkrumen. */
.tp-crumb {
  font-size: 0.85rem;
  color: var(--pp-text-muted);
  margin-bottom: var(--pp-spacing-3);
}
.tp-crumb a { color: var(--pp-primary); text-decoration: none; }
.tp-crumb a:hover { text-decoration: underline; }

/* ─── Projektkacheln ──────────────────────────────────────────
   pp-card bringt Rahmen und Innenabstand mit; hier kommt nur das
   Raster dazu und dass die ganze Kachel anklickbar ist. */
.tp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--pp-spacing-3);
}
a.pp-card.tp-tile {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.pp-card.tp-tile:hover {
  border-color: var(--pp-primary);
  box-shadow: var(--pp-shadow-lg);
}
.tp-tile h3 { margin: 0.25rem 0 0.5rem; font-size: 1.05rem; }
.tp-tile p { margin: 0; font-size: 0.9rem; color: var(--pp-text-muted); }

/* ─── Ticketliste ─────────────────────────────────────────────
   Bewusst KEINE pp-table: eine Liste bricht auf dem Telefon
   brauchbar um, eine Tabelle nicht. */
.tp-list { list-style: none; padding: 0; margin: 0; }
.tp-list li {
  border-bottom: var(--pp-border-w) solid var(--pp-border);
  padding: 0.85rem 0;
}
.tp-list li:last-child { border-bottom: none; }
.tp-row { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.tp-row a { color: var(--pp-text); text-decoration: none; font-weight: 600; }
.tp-row a:hover { color: var(--pp-primary); text-decoration: underline; }
.tp-tkey {
  font-family: var(--pp-font-mono);
  font-size: 0.8rem;
  color: var(--pp-text-muted);
  white-space: nowrap;
}
.tp-meta { font-size: 0.8rem; color: var(--pp-text-muted); }

/* ─── Kopfzeile des Ticket-Details ────────────────────────────
   Beschriftete Werte nebeneinander — dafuer gibt es keine
   pp-Entsprechung. */
.tp-facts {
  display: flex;
  gap: var(--pp-spacing-4);
  flex-wrap: wrap;
  padding: 0.85rem 0;
  margin-bottom: var(--pp-spacing-4);
  border-top: var(--pp-border-w) solid var(--pp-border);
  border-bottom: var(--pp-border-w) solid var(--pp-border);
  font-size: 0.85rem;
}
.tp-fact dt { color: var(--pp-text-muted); font-size: 0.75rem; margin: 0; }
.tp-fact dd { margin: 0.15rem 0 0; font-weight: 600; }

/* ─── Fremder Inhalt ──────────────────────────────────────────
   Beschreibungen und Kommentare bringen eigenes Markup mit.
   Tabellen, Codebloecke und Bilder duerfen die Seite nicht seitlich
   aufreissen — auf einem Telefon macht das die Seite unbenutzbar. */
.tp-rich { overflow-wrap: anywhere; }
.tp-rich pre {
  overflow-x: auto;
  background: var(--pp-surface-2);
  padding: 0.75rem;
  border-radius: var(--pp-radius);
}
.tp-rich img { max-width: 100%; height: auto; }
.tp-rich table { display: block; overflow-x: auto; max-width: 100%; }
/* PPTICKET-35: Selbsthilfe unter dem Titel */
.tk-portal-hilfe { margin: 4px 0 12px; padding: 8px 12px; border: var(--pp-border-w) solid var(--pp-border); border-left: 3px solid var(--pp-primary); border-radius: var(--pp-radius-sm); font-size: .9rem }
.tk-portal-hilfe ul { margin: 4px 0 0; padding-left: 1.1rem }
.tk-portal-hilfe li { margin: 6px 0 }
.tk-portal-hilfe .pp-btn { margin-top: 3px }
.tk-portal-hilfe-kopf { font-weight: 600 }