/* Ergänzungen des Connectors zu grundlage.css (Auszug aus dem Planner, werkzeuge/css_auszug.py).
   Nur Anordnung mit vorhandenen Tokens – keine neuen Farben, Abstände oder Komponenten. */

/* Meldungen über dem Inhalt */
.cn-meldungen { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* Seitenkopf mit der einen Hauptaktion rechts (B-01) */
.cn-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.cn-kopf .bx-phead { margin: 0; }
.bx-nutzung > .bx-phead { margin-left: 0; margin-right: 0; max-width: none; }
.cn-kopf { margin-bottom: 0; }
.bx-login-card .bx-nz-liste, .bx-login-card .bx-info { text-align: left; }

/* Formularseite: schmale Spalte, Aktionen darunter */
.cn-form { max-width: 640px; }
.cn-zeile-aktionen { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.cn-zeile-aktionen form { margin: 0; }
.cn-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }
.cn-zahl { font-variant-numeric: tabular-nums; }
.cn-qr { display: block; width: 200px; height: 200px; margin: var(--sp-4) auto; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-sm); }
.cn-codes { list-style: none; margin: var(--sp-4) 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); font-size: var(--fs-body); }
.cn-ausgabe { margin: var(--sp-2) 0 0; padding: var(--sp-3); background: var(--ink-50); border: 1px solid var(--ink-100); border-radius: var(--radius-sm);
  font-size: var(--fs-meta); line-height: var(--lh-meta); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }
@media (max-width: 640px) {
  .cn-kopf > .bx-btn, .cn-zeile-aktionen .bx-btn { width: 100%; justify-content: center; }
  .cn-zeile-aktionen form { width: 100%; }
  .cn-codes { grid-template-columns: 1fr; }
}

/* Diagramm: feste Höhe der Zeichenfläche (D-05) */
.cn-diagramm { position: relative; height: 280px; }

/* Listenzeile, deren aufklappbarer Teil unter dem Text steht statt daneben */
.cn-zeile-umbruch { flex-wrap: wrap; }
.cn-zeile-umbruch > details { flex: 1 1 100%; margin-top: 0; }
.cn-zeile-umbruch > details[open] > form { margin-top: var(--sp-2); }