/* ============================================================
   cd_anfragen — „Meine Anfragen“ im Kundenportal
   ============================================================
   BEWUSST DIESELBEN MASSE WIE DIE TICKETLISTE (cd_tickets.css):
   gleiche Zeilenpolsterung, gleicher Radius, gleiche Marke für den
   Zustand. Zwei Listen im selben Portal, die verschieden aussehen,
   kosten den Kunden bei jedem Wechsel einen Moment Orientierung.

   Wer hier etwas ändert, sollte in cd_tickets.css nachsehen — und
   umgekehrt.
   ============================================================ */

/* 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-anfragen__inhalt {
  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 --------------------------------- */
/* Anzahl links, „Anfrage absetzen“ rechts — dieselbe Anordnung wie
   über der Ticketliste. */
.cd-anfragen__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-anfragen__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;
}
/* Der Knopf steht rechts, auch wenn links nichts steht (leere
   Liste): auto statt space-between, das braucht keinen Partner. */
.cd-anfragen__neu {
  margin-inline-start: auto;
  text-decoration: none;
}

/* ---- Zustand --------------------------------------------- */
/* Nur ZWEI Werte — die Tabelle kennt nur den Haken `erledigt`.
   Mehr Stufen zu zeigen, als gepflegt werden, waere eine
   Behauptung. Die Farben sind die der Ticket-Marken: gedeckte
   Flaechen mit dunkler Schrift, gemessen ueber 4,5 : 1. */
.cd-azustand {
  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;
}
.cd-azustand--offen  { background: var(--cd-flaeche-3, #E9EEF1); color: var(--cd-tinte); }
.cd-azustand--fertig { background: #E4F3EA; color: #1C7A43; }

/* ---- Liste ----------------------------------------------- */
.cd-aliste {
  list-style: none;
  margin: 0 0 var(--cd-a5);
  padding: 0;
  display: grid;
  gap: 10px;
}
.cd-aliste__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-aliste__link:hover {
  border-color: var(--cd-linie-stark, #c9d4da);
  box-shadow: var(--cd-schatten-karte);
}
.cd-aliste__betreff {
  font-weight: 600;
  color: var(--cd-tinte);
  /* Ohne Thema steht hier der Anfang der Nachricht — der kann lang
     sein und soll die Zeile nicht sprengen. */
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.cd-aliste__unten {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.cd-aliste__zeit {
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-3);
}

/* ---- Leerzustand und Hinweise ---------------------------- */
.cd-anfragen__leer {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-gross);
  padding: var(--cd-a6);
  max-inline-size: 46rem;
}
.cd-anfragen__leer h2 {
  margin: 0 0 var(--cd-a3);
  font-size: var(--cd-gr-h4);
}
.cd-anfragen__leer p {
  margin: 0;
  color: var(--cd-text-2);
}
.cd-anfragen__leerhinweis {
  margin: 0;
  color: var(--cd-text-2);
}

/* ---- Einzelansicht --------------------------------------- */
.cd-anfragen__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-anfragen__zurueck:hover { color: var(--cd-rot); }

.cd-anfrage {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-gross);
  padding: var(--cd-a6);
}
.cd-anfrage__kopf {
  margin-block-end: var(--cd-a5);
  padding-block-end: var(--cd-a4);
  border-block-end: 1px solid var(--cd-linie);
}
.cd-anfrage__betreff {
  margin: 0 0 var(--cd-a3);
  font-size: var(--cd-gr-h3);
  line-height: 1.25;
}
.cd-anfrage__meta {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  flex-wrap: wrap;
}
.cd-anfrage__zeit {
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-3);
}

/* Der Text kommt aus einem oeffentlichen Formular und wird von
   Fluid escaped. pre-wrap zeigt die Zeilenumbrueche des Absenders,
   ohne dass dafuer HTML erzeugt werden muss — kein nl2br. */
.cd-anfrage__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--cd-tinte);
  line-height: 1.6;
  margin-block-end: var(--cd-a6);
}

.cd-anfrage__angaben {
  display: grid;
  gap: var(--cd-a3);
  margin: 0 0 var(--cd-a5);
  padding-block-start: var(--cd-a5);
  border-block-start: 1px solid var(--cd-linie);
}
.cd-anfrage__angaben > div {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--cd-a3);
}
.cd-anfrage__angaben dt {
  color: var(--cd-text-3);
  font-size: var(--cd-gr-klein);
}
.cd-anfrage__angaben dd {
  margin: 0;
  color: var(--cd-tinte);
  overflow-wrap: anywhere;
}

.cd-anfrage__weiter {
  margin: 0;
  color: var(--cd-text-2);
  font-size: var(--cd-gr-klein);
}

/* ---- Schmale Geräte -------------------------------------- */
@media (max-width: 600px) {
  .cd-aliste__link {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Eine Spalte: 10rem Beschriftung plus Wert passen nicht mehr
     nebeneinander, ohne dass der Wert vierzeilig bricht. */
  .cd-anfrage__angaben > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .cd-anfrage,
  .cd-anfragen__leer {
    padding: var(--cd-a5);
  }
}