/* ============================================================
   cd_geheimnis — Einmal-Geheimnisse
   ============================================================
   Zwei Ansichten aus einem Baustein: die Liste im Kundenbereich und
   die einzelne Uebergabe ueber einen geheimen Link.

   Die Karte ist bewusst RUHIG und nicht alarmierend rot: Es ist ein
   normaler Vorgang, kein Zwischenfall. Nur der Hinweis „einmal
   sichtbar" traegt Farbe — er ist die eine Sache, die man wirklich
   gelesen haben muss.
   ============================================================ */

/* 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-geheim__inhalt {
  max-inline-size: calc(46rem + 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. */
}

.cd-geheim__karte {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-gross);
  padding: var(--cd-a6);
}
.cd-geheim__titel {
  margin: 0 0 var(--cd-a3);
  font-size: var(--cd-gr-h3);
  line-height: 1.25;
}
.cd-geheim__hinweis {
  margin: 0 0 var(--cd-a5);
  color: var(--cd-text-2);
}

/* Der eine Satz, auf den es ankommt. Gelber Grund und Kante statt
   rot: Rot ist im Haus die Handlungsfarbe (Knoepfe) — ein roter
   Kasten neben einem roten Knopf nimmt dem Knopf die Wirkung. */
.cd-geheim__warnung {
  margin: 0 0 var(--cd-a5);
  padding: var(--cd-a4);
  background: #FFF8E6;
  border-inline-start: 3px solid #C98A0E;
  border-radius: var(--cd-r-feld);
  color: var(--cd-tinte);
  font-size: var(--cd-gr-klein);
  line-height: 1.55;
}
.cd-geheim__frist {
  margin: 0 0 var(--cd-a5);
  color: var(--cd-text-3);
  font-size: var(--cd-gr-klein);
}

/* ---- Der Klartext ---------------------------------------- */
/* Ein <textarea> und kein <p>: Der Inhalt laesst sich damit
   markieren, kopieren und mit der Tastatur erreichen — auch dort,
   wo die Zwischenablage-Schaltflaeche nicht arbeitet (aeltere
   Browser, kein sicherer Kontext). */
.cd-geheim__label {
  display: block;
  margin-block-end: 6px;
  font-weight: 600;
  font-size: var(--cd-gr-klein);
}
.cd-geheim__wert {
  inline-size: 100%;
  margin-block-end: var(--cd-a4);
  padding: var(--cd-a4);
  background: var(--cd-flaeche-1);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-feld);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-text);
  line-height: 1.5;
  color: var(--cd-tinte);
  resize: vertical;
}

/* ---- Liste im Portal ------------------------------------- */
.cd-geheim__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.cd-geheim__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a4);
  padding: var(--cd-a4) var(--cd-a5);
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-karte);
}
.cd-geheim__zeiletext {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}
.cd-geheim__zeiletitel {
  font-weight: 600;
  color: var(--cd-tinte);
}
.cd-geheim__zeilehinweis {
  color: var(--cd-text-3);
  font-size: var(--cd-gr-klein);
}
.cd-geheim__marke--weg {
  color: var(--cd-text-3);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  white-space: nowrap;
}
.cd-geheim__form { margin: 0; }
.cd-geheim__nach,
.cd-geheim__leerhinweis {
  margin: var(--cd-a4) 0 0;
  color: var(--cd-text-2);
  font-size: var(--cd-gr-klein);
}

@media (max-width: 600px) {
  .cd-geheim__karte { padding: var(--cd-a5); }
  .cd-geheim__zeile { flex-direction: column; align-items: stretch; }
}