/* ---------------------------------------------------------------------------
   openbi.hub — Tickets an die Agentur. 09.09.2026.

   EIGENE DATEI UND KEINE ZEILEN IN hub.css: die grosse Datei ist 20.637 Zeichen und
   haengt an jeder Hubseite. Ein Anhaengen daran ist ein Schreibvorgang auf eine Datei,
   die gerade ausgeliefert wird — und der Browser haelt sie mit ?v=… im Cache. Eine
   eigene Datei ist zurueckzunehmen, indem man eine Zeile in der Seite entfernt.

   DIE TOKEN KOMMEN AUS hub.css (--hub-…). Hier steht kein einziger Farbwert doppelt:
   sonst laeuft die Ticketseite beim naechsten Farbwechsel als einzige aus dem Ruder.
   --------------------------------------------------------------------------- */

.hub-tk-liste{display:flex;flex-direction:column;gap:12px}

.hub-tk-zeile{
  display:flex;align-items:center;gap:16px;
  background:var(--hub-flaeche);border:1px solid var(--hub-linie);
  border-radius:12px;padding:16px 20px;text-decoration:none;color:inherit;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}

.hub-tk-zeile:hover{border-color:var(--hub-tinte-3)}

.hub-tk-nummer{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;color:var(--hub-tinte-2);white-space:nowrap;
}

.hub-tk-mitte{flex:1;min-width:0}
.hub-tk-betreff{font-weight:600;font-size:14px;margin:0 0 4px;overflow-wrap:anywhere}
.hub-tk-bezug{margin:0;font-size:12px;color:var(--hub-tinte-2)}

/* Der Stand als Wort und nicht als Farbe allein: Farbe ohne Text ist fuer jeden
   unlesbar, der sie nicht unterscheiden kann. */
.hub-tk-stand{
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--hub-linie);color:var(--hub-tinte-2);background:var(--hub-grund);
}

.hub-tk-stand[data-stand="neu"]{border-color:var(--hub-cyan);color:#0077a3}
.hub-tk-stand[data-stand="inarbeit"]{border-color:var(--hub-pink);color:var(--hub-pink)}
.hub-tk-stand[data-stand="wartetkunde"]{border-color:#e6a700;color:#a37600}
.hub-tk-stand[data-stand="geloest"]{border-color:#2eb872;color:#1d7a4b}

.hub-tk-form{display:flex;flex-direction:column;gap:14px;max-width:640px}
.hub-tk-feld{display:flex;flex-direction:column;gap:6px}
.hub-tk-feld > label{font-size:12px;font-weight:600;color:var(--hub-tinte-2)}

.hub-tk-feld input,
.hub-tk-feld select,
.hub-tk-feld textarea{
  font:inherit;font-size:14px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--hub-linie);background:var(--hub-flaeche);color:var(--hub-tinte);
}

.hub-tk-feld textarea{min-height:120px;resize:vertical}
.hub-tk-reihe{display:flex;gap:14px;flex-wrap:wrap}
.hub-tk-reihe > .hub-tk-feld{flex:1;min-width:180px}

.hub-tk-fehler{
  font-size:13px;color:var(--hub-pink);
  border-left:3px solid var(--hub-pink);padding-left:10px;
}

.hub-tk-hinweis{font-size:13px;color:var(--hub-tinte-2)}

/* ----------------------------------------------------------------- Die Akte */

.hub-tk-kopf{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.hub-tk-kopf h1{margin:0;font-size:20px;overflow-wrap:anywhere}
.hub-tk-daten{display:flex;gap:24px;flex-wrap:wrap;margin-top:12px}
.hub-tk-datum{font-size:12px;color:var(--hub-tinte-2)}
.hub-tk-datum b{display:block;font-size:13px;color:var(--hub-tinte);font-weight:600}

.hub-tk-verlauf{display:flex;flex-direction:column;gap:14px;margin-top:8px}

.hub-tk-beitrag{
  border:1px solid var(--hub-linie);border-radius:12px;padding:16px 18px;
  background:var(--hub-flaeche);
}

/* Der eigene Beitrag steht links angehoben, die Antwort der Agentur abgesetzt —
   damit ein Verlauf auf einen Blick zeigt, wer zuletzt geschrieben hat. */
.hub-tk-beitrag[data-wer="kunde"]{background:var(--hub-grund)}
.hub-tk-beitrag[data-wer="system"]{border-style:dashed;color:var(--hub-tinte-2)}

.hub-tk-bkopf{
  display:flex;justify-content:space-between;gap:12px;
  font-size:12px;color:var(--hub-tinte-2);margin-bottom:8px;
}

.hub-tk-btext{margin:0;font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.hub-tk-tat{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}

/* ANHAENGE, 10.09.2026. Eine Liste und keine Kacheln: Dateinamen sind lang und
   ungleich lang, und in Kacheln bricht jeder zweite um. Die Groesse steht rechts,
   weil sie die Frage beantwortet "lohnt sich das Herunterladen jetzt". */
.hub-tk-anhaenge{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}

.hub-tk-anhang{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 10px;border-radius:8px;font-size:14px;
}

.hub-tk-anhang:nth-child(odd){background:var(--hub-grund)}
.hub-tk-anhang a{overflow-wrap:anywhere}
.hub-tk-anhanggroesse{font-size:12px;color:var(--hub-tinte-2);white-space:nowrap}

/* Der Dateiwaehler sitzt unter dem Textfeld im selben Kasten. Kein eigener Rahmen:
   die beiden gehoeren zusammen, weil die Datei am Beitrag haengt und nicht am
   Ticket. */
.hub-tk-dateien{margin-top:10px;font-size:13px;color:var(--hub-tinte-2);max-width:100%}