/* cf-designregeln.css — Regelwerk > CallFluence Design & Function > Gestaltung (2026-07-31).
 *
 * Diese Ansicht misst die Gestaltungsregeln der Konsole — also muss sie selbst jede davon halten.
 * Sie benutzt deshalb ausschliesslich Token, keine eigenen Farbwerte, und keine Fläche, die nicht
 * schon existiert. Eine Regel-Ansicht, die ihre eigene Regel bricht, ist die schlechteste
 * Werbung fuer die Regel. */

.dr-liste{display:flex;flex-direction:column;gap:14px}

/* Bilanz — drei Zahlen und ein Satz. Der Satz steht dabei, weil drei nackte Zahlen nicht sagen,
   ob "3 nicht gemessen" schlimm ist oder normal. */
.dr-bilanz{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:16px 18px;margin-bottom:8px;
  border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.dr-b{display:flex;flex-direction:column;gap:2px;padding:8px 16px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);min-width:96px}
.dr-b b{font-family:var(--disp);font-size:1.5rem;font-weight:900;line-height:1}
.dr-b span{font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.dr-b.z-gut b{color:var(--good)}
.dr-b.z-schlecht b{color:var(--bad)}
.dr-b.z-unbekannt b{color:var(--warn)}
.dr-b-txt{flex:1;min-width:240px;font-size:.86rem;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}

/* Regel-Karte. Der Streifen links sagt den Messzustand, bevor man liest. */
.dr-regel{padding:0;overflow:hidden;border-left:3px solid var(--line-strong)}
.dr-regel.z-gut{border-left-color:var(--good)}
.dr-regel.z-schlecht{border-left-color:var(--bad)}
.dr-regel.z-unbekannt{border-left-color:var(--warn)}

.dr-kopf{display:flex;gap:13px;align-items:flex-start;padding:18px 20px 14px;flex-wrap:wrap}
.dr-nr{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--ink-faint);font-family:var(--disp);font-size:.86rem;font-weight:900;margin-top:6px}
.dr-regel.z-gut .dr-nr{background:var(--good-bg);color:var(--good)}
.dr-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--ink-soft)}
.dr-ic .ic{width:20px;height:20px}
.dr-mid{flex:1;min-width:240px}
.dr-mid h4{font-size:1.02rem;font-weight:800;letter-spacing:-.01em;margin:0 0 4px;line-height:1.32}
.dr-fordert{font-size:.88rem;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}

.dr-ebene{flex:none;display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:5px 11px;
  border-radius:20px;font-size:.71rem;font-weight:900;letter-spacing:.04em;white-space:nowrap;
  background:var(--surface-3);color:var(--ink-faint)}
.dr-ebene .ic{width:12px;height:12px}
.dr-ebene.e-global{background:var(--info-bg);color:var(--info)}
.dr-ebene.e-projekt{background:var(--surface-3);color:var(--ink)}
.dr-ebene.e-bereich{background:var(--warn-bg);color:var(--warn)}

/* Der Messblock. Er steht VOR der Begruendung, nicht dahinter: die Frage "gilt das gerade?" ist
   dringender als die Frage "warum gibt es das?". */
.dr-mess{padding:13px 20px;border-top:1px solid var(--line);background:var(--surface-2)}
.dr-mess-kopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.87rem}
.dr-mess-kopf .ic{width:15px;height:15px;flex:none}
.dr-mess-kopf b{font-weight:800}
.dr-mess.m-gut .dr-mess-kopf{color:var(--good)}
.dr-mess.m-schlecht .dr-mess-kopf{color:var(--bad)}
.dr-mess.m-unbekannt .dr-mess-kopf{color:var(--warn)}
.dr-wert{color:var(--ink-soft);font-weight:600}
.dr-treffer{margin:9px 0 0;padding-left:18px;font-size:.82rem;line-height:1.55;color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
.dr-treffer li{margin-top:2px;word-break:break-word}
.dr-hinweis{margin-top:9px;font-size:.81rem;line-height:1.5;color:var(--ink-faint);text-wrap:pretty}

.dr-warum{padding:14px 20px 16px;border-top:1px solid var(--line)}
.dr-warum b{display:block;font-size:.68rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:6px}
.dr-warum p{margin:0;font-size:.87rem;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}

@media(max-width:640px){.dr-kopf{gap:10px}.dr-ic{width:34px;height:34px}}

/* ---------------------------------------------------------------- Abdeckung
   Sie steht VORNE und nicht im Kleingedruckten. Eine Bilanz ohne die Angabe, worueber sie
   gebildet wurde, ist die haeufigste Art, mit richtigen Zahlen etwas Falsches zu sagen — die
   erste Fassung dieses Bereichs meldete "7 erfuellt" und hatte dabei ausschliesslich sich selbst
   gemessen. Die Liste der ungemessenen Ansichten ist deshalb Teil des Ergebnisses, nicht Beiwerk. */
.dr-abdeckung{margin:14px 0 4px;padding:15px 18px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line)}
.dr-abd-kopf{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:11px}
.dr-abd-kopf .ic{width:16px;height:16px;flex:none;color:var(--ink-faint);align-self:center}
.dr-abd-kopf b{font-size:.92rem;font-weight:800}
.dr-abd-kopf span{flex:1;min-width:240px;font-size:.83rem;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.dr-abd-liste{display:flex;flex-wrap:wrap;gap:6px}
.dr-abd{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;
  font-size:.75rem;font-weight:800;white-space:nowrap;background:var(--surface-3);color:var(--ink-faint)}
.dr-abd .ic{width:11px;height:11px}
.dr-abd.a-gruen{background:var(--good-bg);color:var(--good)}
.dr-abd.a-rot{background:var(--bad-bg);color:var(--bad)}
.dr-abd.a-offen{background:var(--surface-3);color:var(--ink-faint);opacity:.85}
.dr-abd-fuss{margin-top:11px;font-size:.81rem;line-height:1.5;color:var(--ink-faint);text-wrap:pretty}
.dr-abd-fuss b{color:var(--ink-soft);font-weight:700}

/* Welche Ansicht die Regel wo erfuellt — am Messblock der Karte. */
.dr-wo{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.dr-wo-p{padding:3px 8px;border-radius:20px;font-size:.71rem;font-weight:800;white-space:nowrap}
.dr-wo-p.p-gruen{background:var(--good-bg);color:var(--good)}
.dr-wo-p.p-rot{background:var(--bad-bg);color:var(--bad)}
.dr-wo-p.p-offen{background:var(--surface-3);color:var(--ink-faint)}

/* Kandidatenzahl am Messblock. Sie steht neben dem Ergebnis, nicht darunter: "erfuellt" und
   "0 geprueft" muessen im selben Blick zu sehen sein, sonst liest man nur das Erste. */
.dr-kand{margin-left:auto;padding:2px 9px;border-radius:20px;background:var(--surface-3);
  color:var(--ink-faint);font-size:.72rem;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}