/* Projekte: Zeitplan-Auswahl, Kopplungs-Code, kleine Ergänzungen. Baut auf style.css und tresor.css auf. */
.wahl { display: flex; flex-direction: column; gap: 8px; }
.wahl-option { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--z-kontur); font-weight: 400; font-size: 13px; }
.wahl-option:has(input[type=radio]:checked) { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 60%, transparent);
  background: color-mix(in oklch, var(--primary) 8%, transparent); }
.wahl-option input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); box-shadow: none; flex: none; }
.wahl-option > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wahl-option strong { font-weight: 500; }
.klein-eingabe { display: inline-block; width: 84px; height: 30px; margin: 0; text-align: center; }
.kopier.kopplung { min-height: 52px; }
.kopier.kopplung code { font-size: 22px; letter-spacing: 0.08em; font-weight: 600; }
form.inline { display: inline; margin: 0; }
.fehlerliste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--rot-text); }
.fehlerliste .muted { margin-right: 6px; }

/* Projekt-Schlüssel */
.stack-eng { display: grid; gap: 10px; }
#schluessel .meldung-zeile { margin: 0; }
#schluessel .s-wert code { font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; padding: 6px 0; }
#schluessel .t-fehler:empty { display: none; }
.dialog .dw-code[hidden], .dialog .dw-schluessel[hidden] { display: none; }
#schluessel .s-code { width: 104px; }

/* Seite Projekte: Kopf mit Knopf, Kachel "hinzufügen", Ablauf in drei Schritten */
.seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.seitenkopf h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.seitenkopf p { font-size: 12.5px; color: var(--muted-foreground); margin-top: 2px; }
.knopf.gross { height: 38px; padding: 0 16px; font-size: 13.5px; flex: none; }
.neu-kachel { align-items: center; justify-content: center; text-align: center; gap: 6px; min-height: 150px; cursor: pointer;
  background: transparent; color: var(--foreground); font: inherit; border: 1px dashed color-mix(in oklch, var(--muted-foreground) 45%, transparent); }
.neu-kachel:hover { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 6%, transparent); }
.neu-kachel .kachel { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in oklch, var(--primary) 14%, transparent); color: var(--primary); }
.neu-kachel strong { font-size: 13.5px; font-weight: 600; }
.neu-kachel .muted { font-size: 12px; }
.ablauf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--radius); }
.ablauf-schritt { display: flex; gap: 12px; padding: 16px 18px; min-width: 0; }
.ablauf-schritt + .ablauf-schritt { border-left: 1px solid var(--z-kontur); }
.ablauf-schritt .nr { flex: none; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--primary); color: var(--primary-foreground); }
.ablauf-schritt strong { font-size: 13px; font-weight: 600; }
.ablauf-schritt p { font-size: 12px; color: var(--muted-foreground); margin-top: 3px; line-height: 1.5; }
.ablauf-schritt code { font-family: var(--font-mono); font-size: 11.5px; color: var(--foreground); white-space: nowrap; }
@media (max-width: 900px) {
  .ablauf { grid-template-columns: minmax(0, 1fr); }
  .ablauf-schritt + .ablauf-schritt { border-left: 0; border-top: 1px solid var(--z-kontur); }
}
@media (max-width: 560px) { .seitenkopf .knopf.gross { padding: 0 12px; } }