/* ===========================================================================
   Dokus-Modul: Einstiegskacheln und Übersichten.

   Die Regeln liegen bewusst in einer eigenen Datei, weil das Projekt den
   offenen Punkt "Content-Security-Policy ohne 'unsafe-inline'" hat (siehe
   ProjektClaudeOrga/WARTELISTE.md, Abschnitt "Aus der Audit-Nacht"). Jeder
   Inline-Stil erschwert diesen späteren Schritt. Die Werte werden hier 1:1
   aus dokus.js übernommen, damit sich die Optik durch das Umräumen nicht
   ändert. Farben kommen ausschließlich aus den Design-Tokens von app.css.
   =========================================================================== */

.dokus-abschnitt { display: flex; flex-direction: column; gap: 8px; }
.dokus-abschnitt-titel { font-size: 18px; margin: 0; }

.dokus-zeile {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px; text-align: left; background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; color: var(--text); cursor: pointer;
}
.dokus-herkunft { /* Markierung neben dem Zeilentext; Darstellung kommt aus .muted. */ }

.dokus-kachel {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 20px; min-width: 160px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  cursor: pointer; font: inherit; color: var(--text);
}
.dokus-kachel-icon { width: 32px; height: 32px; color: var(--accent); }
.dokus-kachel-titel { font-weight: 600; font-size: 15px; }

.dokus-rahmen { padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.dokus-kacheln { display: flex; flex-wrap: wrap; gap: 16px; }
.dokus-liste { display: flex; flex-direction: column; gap: 6px; }