/* ============================================================
   Ticket-System (cd_tickets) — Kundenportal
   ============================================================
   Liste der Tickets, Einzelverlauf als Sprechblasen (Kunde rechts,
   Agentur links), Antwort- und Neu-Formular. Feldstile kommen aus
   komponenten.css (.cd-feld/.cd-feld__eingabe); hier nur Anordnung
   und die ticket-eigenen Bauteile.
   ============================================================ */

.cd-tickets {
  background: var(--cd-flaeche-2);
}
/* ZWEI KLASSEN IM SELEKTOR — das ist kein Schmuck:
   bahnen.css setzt .cd-bahn__inhalt { max-inline-size: var(--cd-inhalt) }
   NACH den @import-Zeilen, mit derselben Staerke (0,1,0). Die spaetere
   Regel gewinnt, und dieser Deckel war damit wirkungslos — gemessen
   liefen alle sieben Portalseiten auf 1280 px.

   Die @import-Zeilen koennen nicht nach unten wandern; CSS verlangt
   sie am Dateianfang. Also traegt der Selektor beide Klassen, die das
   Element ohnehin hat, und liegt mit 0,2,0 darueber. */
.cd-bahn__inhalt.cd-tickets__inhalt {
  max-inline-size: calc(52rem + var(--cd-schienen-platz, 0px));
  /* DIE SCHIENENBREITE GEHOERT DAZU.
     Der Deckel begrenzt den GEPOLSTERTEN Kasten, und die
     Schiene steckt ihren Platz genau in dessen padding-inline.
     Ohne den Summanden blieben von 992 px Kasten nur 620 px
     Inhalt uebrig — die Liste stand auf halber Breite.
     --cd-schienen-platz ist ausserhalb der Schiene 0 und damit
     wirkungslos; genau dafuer gibt es die Rechengroesse. */
}

/* Honigtopf — fuer Menschen unsichtbar, fuer Vorleser weg. */
.cd-hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cd-tickets__fehler {
  margin: 0 0 var(--cd-a4);
  padding: 12px 16px;
  border-radius: var(--cd-r-feld);
  background: #FBEBEC;
  border: 1px solid #F0C9CC;
  color: #9E0C12;
  font-size: var(--cd-gr-klein);
}

.cd-tickets__zurueck {
  display: inline-block;
  margin-block-end: var(--cd-a4);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-klein);
  letter-spacing: .04em;
  color: var(--cd-text-3);
  text-decoration: none;
}
.cd-tickets__zurueck:hover { color: var(--cd-rot); }

/* ---- Status-Marke ---- */
.cd-tstatus {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--cd-kopfton, #E9EEF1);
  color: var(--cd-tinte);
}
.cd-tstatus--arbeit  { background: #FFF3E0; color: #8A5300; }
.cd-tstatus--warten  { background: #FBEBEC; color: #9E0C12; }
.cd-tstatus--geloest { background: #E4F3EA; color: #1C7A43; }
.cd-tstatus--zu      { background: var(--cd-flaeche-3, #E9EEF1); color: var(--cd-text-3); }

/* ---- Liste ---- */
.cd-tliste { list-style: none; margin: 0 0 var(--cd-a5); padding: 0; display: grid; gap: 10px; }
.cd-tliste__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 18px;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-karte);
  text-decoration: none;
  transition: border-color var(--cd-zeit) ease, box-shadow var(--cd-zeit) ease;
}
.cd-tliste__link:hover { border-color: var(--cd-linie-stark, #c9d4da); box-shadow: var(--cd-schatten-karte); }
.cd-tliste__betreff {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--cd-tinte);
}
.cd-tliste__unten { display: inline-flex; align-items: center; gap: 12px; }
.cd-tliste__zeit { font-size: var(--cd-gr-klein); color: var(--cd-text-3); }
.cd-tliste__punkt { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--cd-rot); }
.cd-tliste__zeile--neu .cd-tliste__link { border-color: #F0C9CC; }

.cd-tickets__leerhinweis {
  margin: 0 0 var(--cd-a5);
  color: var(--cd-text-2);
}

/* ---- Kopf der Einzelansicht ---- */
.cd-tickets__kopf {
  margin-block-end: var(--cd-a5);
  padding-block-end: var(--cd-a4);
  border-block-end: 1px solid var(--cd-linie);
}
.cd-tickets__betreff {
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.2;
  color: var(--cd-tinte);
  margin: 0 0 var(--cd-a3);
}
.cd-tickets__meta { display: flex; align-items: center; gap: 14px; }
.cd-tickets__nr { font-family: var(--cd-schrift-mono); font-size: var(--cd-gr-klein); color: var(--cd-text-3); }

/* ---- Verlauf als Sprechblasen ---- */
.cd-tverlauf { list-style: none; margin: 0 0 var(--cd-a5); padding: 0; display: grid; gap: var(--cd-a4); }
.cd-tmsg { display: flex; flex-direction: column; max-inline-size: 82%; }
.cd-tmsg--kunde { margin-inline-start: auto; align-items: flex-end; }
.cd-tmsg--agentur { margin-inline-end: auto; align-items: flex-start; }
.cd-tmsg__kopf { display: flex; gap: 10px; align-items: baseline; margin-block-end: 5px; padding-inline: 4px; }
.cd-tmsg__wer { font-weight: 600; font-size: var(--cd-gr-klein); color: var(--cd-tinte); }
.cd-tmsg__zeit { font-size: var(--cd-gr-mikro); color: var(--cd-text-3); font-family: var(--cd-schrift-mono); }
.cd-tmsg__text {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Gerenderter Richtext (Nachrichten). Serverseitig saniert -> hier
   nur die Typografie der erlaubten Auszeichnung. */
.cd-rte-inhalt > :first-child { margin-block-start: 0; }
.cd-rte-inhalt > :last-child { margin-block-end: 0; }
.cd-rte-inhalt p { margin: 0 0 .6em; }
.cd-rte-inhalt ul, .cd-rte-inhalt ol { margin: 0 0 .6em; padding-inline-start: 1.4em; }
.cd-rte-inhalt li { margin-block-end: .2em; }
.cd-rte-inhalt a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cd-tmsg--agentur .cd-rte-inhalt a { color: var(--cd-rot); }

/* --- Richtext-Editor (contenteditable, per JS) --- */
.cd-rte { display: grid; gap: 6px; }
.cd-rte__bar { display: flex; flex-wrap: wrap; gap: 4px; }
.cd-rte__knopf {
  min-inline-size: 34px;
  padding: 5px 9px;
  background: var(--cd-flaeche-2);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-feld);
  font-size: 13px;
  color: var(--cd-tinte);
  cursor: pointer;
  transition: background var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.cd-rte__knopf:hover { background: var(--cd-weiss); border-color: var(--cd-rot); }
.cd-rte__flaeche {
  min-block-size: 7em;
  overflow-wrap: anywhere;
}
.cd-rte__flaeche:focus-visible { outline: 2px solid var(--cd-rot); outline-offset: 1px; }
.cd-rte__flaeche > :first-child { margin-block-start: 0; }
.cd-rte__flaeche p { margin: 0 0 .5em; }
.cd-rte__flaeche ul, .cd-rte__flaeche ol { margin: 0 0 .5em; padding-inline-start: 1.4em; }
.cd-tmsg--agentur .cd-tmsg__text {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  color: var(--cd-tinte);
  border-start-start-radius: 4px;
}
.cd-tmsg--kunde .cd-tmsg__text {
  background: var(--cd-tinte);
  color: var(--cd-weiss);
  border-start-end-radius: 4px;
}

/* ---- Formulare ---- */
.cd-tform { display: grid; gap: var(--cd-a4); margin-block-start: var(--cd-a4); }
.cd-tform--antwort {
  padding: var(--cd-a4);
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-gross);
}
.cd-tform .cd-feld { display: grid; gap: 6px; }
.cd-tform .cd-feld__label { font-weight: 600; font-size: var(--cd-gr-klein); color: var(--cd-tinte); }
.cd-tform__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-2);
  line-height: 1.45;
}
.cd-tform__check input { margin-block-start: 3px; accent-color: var(--cd-rot); flex: 0 0 auto; }
.cd-tform .cd-knopf { justify-self: start; }

.cd-tickets__hinweis {
  margin-block-start: var(--cd-a4);
  padding: 12px 16px;
  border-radius: var(--cd-r-feld);
  background: var(--cd-flaeche-3, #E9EEF1);
  color: var(--cd-text-2);
  font-size: var(--cd-gr-klein);
}

/* ---- „Neues Ticket“-Aufklapper ---- */
/* ---- Kopfzeile der Liste --------------------------------- */
/* Ueberschrift links, „Neues Ticket“ rechts — die uebliche Stelle
   fuer „neu anlegen“ ueber einer Liste. Vorher stand der Knopf als
   aufklappbare Karte UNTER der Liste und las sich wie eine weitere
   Listenzeile. */
.cd-tickets__listenkopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cd-a4);
  flex-wrap: wrap;
  margin-block-end: var(--cd-a5);
}
.cd-tickets__anzahl {
  margin: 0;
  color: var(--cd-text-3);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-klein);
  letter-spacing: .03em;
  /* Auf die optische Mitte des Knopfes bringen. */
  padding-block-start: 12px;
}

/* ---- Neues Ticket ---------------------------------------- */
/* Der Behaelter traegt KEINE eigene Optik mehr: Die Karte war der
   Grund, warum der Knopf nicht wie einer aussah. Jetzt ist das
   <summary> ein Hausknopf (cd-knopf cd-knopf--rot im Markup), und
   die Karte bekommt erst das aufgeklappte Formular. */
.cd-tneu {
  display: flex;
  flex-direction: column;
  gap: var(--cd-a4);
  margin-inline-start: auto;
}

/* NICHT `align-items: flex-end` AM BEHAELTER, sondern align-self am
   Knopf. Der Unterschied ist der Grund, warum das Formular lange
   halb so breit blieb wie die Bahn: `align-items: flex-end` nimmt
   ALLEN Kindern die Streckung, auch dem Formular — und weder
   `align-self: stretch` noch `inline-size: 100%` haben das gemessen
   zurueckgeholt. Mit dem Standardwert `stretch` am Behaelter ist die
   volle Breite der Normalfall, und nur der Knopf schert aus. */
.cd-tneu__auf {
  align-self: flex-end;
}

/* AUFGEKLAPPT NIMMT DER BEHAELTER DIE GANZE ZEILE.
   Ohne das bleibt er so schmal wie sein Knopf — er ist ja ein
   Flex-Kind der Kopfzeile. `flex: 1 0 100%` erzwingt zugleich den
   Umbruch in eine eigene Zeile; das auto-Margin muss dabei weg,
   weil es sich sonst allen freien Platz nimmt, bevor der Inhalt ihn
   bekommt. */
.cd-tneu[open] {
  flex: 1 0 100%;
  margin-inline-start: 0;
}

/* HIER NUR NOCH DAS, WAS DER KNOPF NICHT SETZT.
   padding, font-family, font-size, color und display kommen aus
   .cd-knopf in komponenten.css. Stuenden sie auch hier, gaeben sie
   bei gleichem Gewicht (beide 0,1,0) den Ausschlag — cd_tickets.css
   laedt SPAETER —, und der Knopf saehe wieder aus wie eine Zeile.
   Genau daran lag es. */
.cd-tneu__auf {
  list-style: none;
}
.cd-tneu__auf::-webkit-details-marker { display: none; }
/* Auf rotem Grund traegt das Symbol die Schriftfarbe mit. */
.cd-tneu__auf .cd-symbol { color: currentColor; }

/* AUFGEKLAPPT NIMMT DER BEHAELTER DIE GANZE ZEILE.
   Ohne das bleibt er so schmal wie sein Knopf — er ist ja ein
   Flex-Kind der Kopfzeile —, und das Formular stand in der rechten
   Haelfte mit einer leeren linken daneben. `align-items: flex-end`
   oben haelt den Knopf dabei weiter rechts; nur das Formular
   streckt sich. */
.cd-tneu[open] {
  /* `flex: 1 0 100%` und NICHT `inline-size: 100%`: Als Flex-Kind
     behaelt der Behaelter flex-shrink 1 und wird von der Zeile
     wieder zusammengestaucht — gemessen blieb er dann halb so breit
     wie die Bahn, mit einer leeren linken Haelfte daneben. Der
     Basiswert 100 % erzwingt zugleich den Umbruch in eine eigene
     Zeile. */
  flex: 1 0 100%;
  /* UND das auto-Margin zurueck: Ein `margin-inline-start: auto`
     zieht sich allen freien Platz der Zeile, bevor der Inhalt ihn
     bekommt — gemessen blieb das Formular dadurch 557 px breit,
     obwohl der Behaelter 100 % anforderte. Der Knopf bleibt trotzdem
     rechts, weil ihn `align-items: flex-end` INNERHALB des
     Behaelters haelt. */
  margin-inline-start: 0;
}

/* Das Formular klappt unter dem Knopf auf und nimmt die volle
   Breite — es ist eine Eingabestrecke, keine Randnotiz. */
/* Das Formular klappt unter dem Knopf auf und nimmt die volle
   Breite — es ist eine Eingabestrecke, keine Randnotiz. Die Breite
   kommt aus dem Standard-Stretch des Behaelters; hier steht deshalb
   keine Breitenangabe mehr. */
.cd-tneu .cd-tform {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-gross);
  padding: var(--cd-a5);
}

@media (max-width: 600px) {
  .cd-tmsg { max-inline-size: 100%; }
  .cd-tliste__link { flex-direction: column; align-items: flex-start; }
}