/* ===========================================================================
   FARBE IN DEN ÜBRIGEN BEREICHEN
   ---------------------------------------------------------------------------
   Mert, 06.09.2026: Die neue Startseite ist hell und farbig, Guideline,
   Skripte und Check waren daneben durchgehend grau — der Blick fand keinen
   Halt und alle Zeilen sahen gleich wichtig aus.

   Diese Datei ERGÄNZT nur. Sie überschreibt keine bestehende Regel, sondern
   färbt Stellen, die vorher grau waren: die Nummernkreise, die Kopfkacheln,
   den erledigten Haken.

   Keine neuen Farben: Es bleibt bei Gold, Grün und Rot als Akzent — genau
   die drei, die die App schon hat. Rot bleibt Akzent, nie Fläche.
   =========================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   DREI KOPFKACHELN — der Anker oben, wie auf der Startseite
   ───────────────────────────────────────────────────────────────────── */
/* MASSE EXAKT WIE DIE KPI-KACHEL DES DASHBOARDS (06.09.2026).
   Zwei Kachelsprachen nebeneinander sahen nach zusammengewürfelt aus. Die
   Dashboard-Regeln gelten nur in Dashboard und Startseite, deshalb ist .fk
   eine eigene Klasse — aber mit denselben Werten:
     Innenabstand 13px 14px · Radius 13px · Grund var(--flaeche) · 1px Linie
     Beschriftung 10px/800, Buchstabenabstand .13em, Versalien, 9px Abstand
     Wert in der Anzeigeschrift, 22px/800, Laufweite -.03em
   Wird die Kachel im Dashboard geändert, wird hier nachgezogen. */
.fdrei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 16px; }
.fk {
  padding: 13px 14px; border-radius: 13px; min-width: 0;
  background: var(--flaeche); border: 1px solid var(--linie);
  transition: border-color .2s, background .2s;
}
.fk b {
  display: block; font-family: var(--anzeige); font-size: 22px; font-weight: 800;
  line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.fk i {
  display: block; font-style: normal; font-size: 10px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-still);
  margin-top: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fk--gold  b { color: var(--gold); }
.fk--gruen b { color: var(--gruen); }
.fk--rot   b { color: var(--rot); }
/* Nur die Kante nimmt die Farbe auf. Volle Farbflaechen liessen die drei
   Kacheln lauter wirken als die Ueberschrift darueber. */
.fk--gold  { border-color: rgba(232,192,122,.30); }
.fk--gruen { border-color: rgba(74,222,128,.28); }
.fk--rot   { border-color: rgba(229,20,42,.26); }

/* ─────────────────────────────────────────────────────────────────────
   KAPITELNUMMERN — aus der winzigen grauen Ziffer wird ein Kreis
   ───────────────────────────────────────────────────────────────────── */
.kzeile__nr {
  width: 28px; height: 28px; flex: none;
  display: grid; place-content: center; border-radius: 50%;
  background: rgba(232,192,122,.13); border: 1px solid rgba(232,192,122,.3);
  color: var(--gold); font-size: 11.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
   SKRIPTNUMMERN — Farbe nach Länge, das ist die eigentliche Auskunft
   kurz = grün (geht schnell) · mittel = gold · lang = rot als Akzent
   ───────────────────────────────────────────────────────────────────── */
.skript__nr {
  width: 30px; height: 30px; flex: none;
  display: grid; place-content: center; border-radius: 10px;
  background: var(--glas-tief); border: 1px solid var(--glas-kante);
  color: var(--text-leise); font-size: 11.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.skript[data-laenge="kurz"]   .skript__nr {
  background: rgba(74,222,128,.12);  border-color: rgba(74,222,128,.3);  color: var(--gruen);
}
.skript[data-laenge="mittel"] .skript__nr {
  background: rgba(232,192,122,.13); border-color: rgba(232,192,122,.3); color: var(--gold);
}
.skript[data-laenge="lang"]   .skript__nr {
  background: rgba(229,20,42,.10);   border-color: rgba(229,20,42,.26);  color: var(--rot);
}

/* ─────────────────────────────────────────────────────────────────────
   CHECKLISTE — abgehakt wird grün, nicht nur ein Häkchen
   ───────────────────────────────────────────────────────────────────── */
.haken[aria-pressed="true"] .haken__kasten {
  background: rgba(74,222,128,.16); border-color: rgba(74,222,128,.5); color: var(--gruen);
}
.haken[aria-pressed="true"] .haken__text { color: var(--text-still); }