/* ============================================================
   cd_mitteilungen — was die Agentur dem Kunden mitgeteilt hat
   ============================================================
   BEWUSST DIESELBEN MASSE WIE TICKET- UND ANFRAGENLISTE. Drei
   Listen im selben Portal, die verschieden aussehen, kosten den
   Kunden jedes Mal einen Moment Orientierung. Wer hier etwas
   aendert, sieht in cd_tickets.css und cd_anfragen.css nach — und
   umgekehrt.

   KEINE BAHNFARBE: cd_tickets und cd_uebersicht malen ihren Grund
   selbst, cd_anfragen und cd_geheim nicht. Diese Bahn folgt den
   letzten beiden — sonst stuende eine sichtbare Tonkante zwischen
   zwei Portalbahnen.

   KEINE EIGENSCHAFTEN WIEDERHOLEN, die .cd-knopf in komponenten.css
   schon setzt (padding, Schrift, Farbe, display). Gleiche Staerke,
   aber bahnen.css laedt spaeter und gewaenne — der Knopf saehe
   danach aus wie eine Listenzeile.
   ============================================================ */

/* 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-mitteilungen__inhalt {
  /* Gleiche Bahnbreite wie die Anfragenliste. */
  max-inline-size: calc(62rem + 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. */
}

/* ---- Kopfzeile der Liste ---------------------------------- */
/* align-items: flex-start und NICHT flex-end: flex-end nimmt allen
   Kindern die Streckung — ein Formular blieb dann auf seiner
   Inhaltsbreite stehen, egal was man ihm sonst mitgibt. */
.cd-mitteilungen__listenkopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cd-a4);
  margin-block-end: var(--cd-a5);
}

.cd-mitteilungen__anzahl {
  margin: 0;
  padding-block-start: 12px; /* auf die optische Mitte des Knopfes */
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-3);
}

/* auto statt space-between: Der Knopf braucht keinen Partner, um
   rechts zu stehen. */
.cd-mitteilungen__alle {
  margin: 0;
  margin-inline-start: auto;
}

/* ---- Die Zeilen ------------------------------------------- */
.cd-mliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.cd-mliste__zeile {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-karte);
  padding: 16px 18px;
}

/* Ungelesen traegt die Marke im Rand — zusaetzlich zur Pille, nie
   statt ihrer. Farbe allein ist keine Information. */
.cd-mliste__zeile--neu {
  border-color: #F0C9CC;
}

.cd-mliste__kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--cd-a2);
}

.cd-mliste__titel {
  margin: 0 0 var(--cd-a2);
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-gross);
  line-height: 1.3;
}

.cd-mliste__text {
  color: var(--cd-text-2);
  line-height: var(--cd-zeile-text);
  /* Eine lange Adresse aus dem Editor soll die Karte nicht sprengen. */
  overflow-wrap: anywhere;
}
/* Die Randabstaende der RTE-Absaetze regelt .cd-rte-inhalt in
   cd_tickets.css — hier nicht wiederholen, sonst stehen zwei
   Wahrheiten fuer dieselbe Sache. */

.cd-mliste__unten {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: var(--cd-a3);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  color: var(--cd-text-3);
}

.cd-mliste__form {
  margin-block-start: var(--cd-a3);
}

/* ---- Die Art als Pille ------------------------------------ */
/* Gleiche Form wie .cd-tstatus und .cd-azustand. */
.cd-mart,
.cd-mliste__neu {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Die vier Farbpaare sind gegen ihren Grund gemessen, nicht
   geschaetzt — jedes ueber 4,5:1. Sie stehen als feste Werte da,
   weil es fuer diese Bedeutungen keine Marke im Haus gibt und eine
   erfundene Marke nur so aussaehe, als gaebe es ein System dahinter. */
.cd-mart--hinweis  { background: var(--cd-flaeche-3); color: var(--cd-tinte); }
.cd-mart--wartung  { background: #FFF3E0; color: #8A5300; }
.cd-mart--warnung  { background: #FBEBEC; color: #9E0C12; }
.cd-mart--update   { background: #E7EEF7; color: #1F4E87; }
.cd-mart--rechnung { background: #E4F3EA; color: #1C7A43; }

.cd-mliste__neu {
  background: #FBEBEC;
  color: #9E0C12;
}

/* ---- Fehler, Leerstand ------------------------------------ */
.cd-mitteilungen__fehler {
  margin: 0 0 var(--cd-a5);
  padding: var(--cd-a3) var(--cd-a4);
  background: #FBEBEC;
  border: 1px solid #F0C9CC;
  border-radius: var(--cd-r-feld);
  color: #9E0C12;
}

.cd-mitteilungen__leer {
  max-inline-size: 46rem;
  padding: var(--cd-a6);
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-gross);
}
.cd-mitteilungen__leer h2 {
  margin: 0 0 var(--cd-a3);
  font-size: var(--cd-gr-gross);
}
.cd-mitteilungen__leer p { margin: 0 0 var(--cd-a3); color: var(--cd-text-2); }
/* Kein !important fuer den letzten Absatz — die Stellung im Kasten
   sagt es genauso gut und ohne Sonderregel. */
.cd-mitteilungen__leer p:last-child { margin-block-end: 0; }

.cd-mitteilungen__leerhinweis {
  color: var(--cd-text-2);
}

@media (max-width: 600px) {
  /* Am Handy untereinander: Nebeneinander bliebe von Titel und
     Datum je ein Wortrest stehen. */
  .cd-mliste__kopf,
  .cd-mliste__unten {
    flex-direction: column;
    align-items: flex-start;
  }
  .cd-mitteilungen__alle {
    margin-inline-start: 0;
    inline-size: 100%;
  }
  .cd-mitteilungen__leer { padding: var(--cd-a5); }
}

/* ============================================================
   Lesefenster und gekuerzter Text
   ============================================================
   DIE KUERZUNG HAENGT AN data-js AN DER WURZEL. Das Skript setzt
   das Merkzeichen, wenn es laeuft — und nur dann darf gekuerzt
   werden. Ohne Skript gibt es keinen Knopf zum Aufklappen, und ein
   abgeschnittener Text ohne Weg zum Rest waere ein Fehler und
   keine Gestaltung.
   ============================================================ */

[data-js] .cd-mliste__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Die Aktionszeile: „Ganz lesen", „Gelesen", „Archivieren".
   flex-wrap, damit am Handy umgebrochen wird statt zu quetschen. */
.cd-mliste__aktionen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cd-a3);
  margin-block-start: var(--cd-a3);
}
.cd-mliste__form { margin: 0; }

/* ---- Das Fenster ------------------------------------------ */
/* Breiter als die Anmeldung und schmaler als das Angebot: Ein
   Fliesstext von ein bis fuenf Saetzen liest sich in rund 60
   Zeichen am besten. */
.cd-modal--lesen { inline-size: min(100% - 32px, 620px); }

.cd-mlesen { padding: 28px 32px 32px; }

.cd-mlesen__kopf { margin: 0 0 var(--cd-a3); }
.cd-mlesen__kopf:empty { display: none; }

.cd-mlesen__titel {
  margin: 0 0 var(--cd-a2);
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-h3);
  line-height: 1.25;
}

.cd-mlesen__datum {
  margin: 0 0 var(--cd-a5);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  color: var(--cd-text-3);
}

.cd-mlesen__text {
  color: var(--cd-text-2);
  line-height: var(--cd-zeile-text);
  overflow-wrap: anywhere;
}

/* Der Gelesen-Knopf steht im Fenster unter dem Text — wer gerade
   gelesen hat, quittiert dort und nicht erst nach dem Schliessen. */
.cd-mlesen__fuss:not(:empty) {
  margin-block-start: var(--cd-a5);
  padding-block-start: var(--cd-a4);
  border-block-start: 1px solid var(--cd-linie);
}

@media (max-width: 600px) {
  .cd-mlesen { padding: 24px 20px 24px; }
}