/* cf-rat.css — Regelwerk > CallFluence Design & Function (2026-07-31).
 *
 * Der Rat ist kein Dashboard. Ein Dashboard zeigt Zahlen, dieser Bereich zeigt ENTSCHEIDUNGEN und
 * wer sie treffen darf. Deshalb: keine Kennzahlen-Kacheln als Kopf, sondern Karten, die je einen
 * Handelnden (Agent), je einen Vorschlag oder je einen Auftrag tragen — und an jeder Karte steht,
 * was der naechste moegliche Schritt ist und wer ihn ausloesen darf.
 *
 * WARUM GESPERRTE KNOEPFE SICHTBAR BLEIBEN: ein Knopf, der bei fehlendem Recht einfach nichts tut,
 * sieht aus wie ein Defekt. Ein Knopf, der verschwindet, macht das fehlende Recht unauffindbar.
 * Deshalb bleibt er stehen, wird als gesperrt gezeichnet und traegt den Grund im Klartext. */

.rat{margin-top:10px}

/* Ein Erklaersatz, dessen letztes Wort allein auf der Schlusszeile steht, sieht aus wie ein
   Umbruchfehler — der Operator hat genau das beanstandet ("hat" allein in Zeile 2). text-wrap:pretty
   zieht ein Wort aus der vorletzten Zeile nach, statt eine Waise stehen zu lassen. Additiv gesetzt,
   damit es fuer JEDEN Abschnittstext der Konsole gilt und nicht nur fuer den hier gebauten. */
.ig-sub,.ig-t-desc{text-wrap:pretty}

/* ---------------------------------------------------------------- Register-Leiste */
.rat-reg{display:flex;gap:3px;padding:4px;background:var(--surface-3);border:1px solid var(--line);
  border-radius:14px;overflow-x:auto;scrollbar-width:none;margin-bottom:22px}
.rat-reg::-webkit-scrollbar{display:none}
.rat-reg button{flex:none;border:0;background:none;padding:9px 15px;border-radius:10px;font-size:.88rem;
  font-weight:700;color:var(--ink-soft);display:flex;align-items:center;gap:8px;transition:.15s var(--ease);cursor:pointer}
.rat-reg button .ic{width:16px;height:16px}
.rat-reg button:hover{color:var(--ink)}
.rat-reg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.rat-reg .n{min-width:19px;height:19px;padding:0 5px;border-radius:20px;background:var(--surface-3);
  color:var(--ink-faint);font-size:.68rem;font-weight:900;display:grid;place-items:center}
.rat-reg button.on .n{background:var(--lime);color:var(--on-lime)}

/* ---------------------------------------------------------------- Kopfzeile eines Registers */
.rat-kopf{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.rat-kopf-t{flex:1;min-width:240px}
.rat-kopf-t h3{font-family:var(--disp);font-size:1.16rem;font-weight:900;letter-spacing:-.015em;margin:0 0 5px}
.rat-kopf-t p{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink-soft);max-width:72ch;text-wrap:pretty}
.rat-kopf-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------------------------------------------------------------- 1. Der Rat */
.rat-gitter{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

.rat-ag{padding:0;overflow:hidden;display:flex;flex-direction:column;
  border-left:3px solid var(--line-strong);transition:border-color .18s var(--ease),opacity .18s var(--ease)}
.rat-ag.an{border-left-color:var(--lime)}
.rat-ag.aus{opacity:.66}
.rat-ag-k{display:flex;gap:12px;align-items:flex-start;padding:18px 18px 12px}
.rat-ag-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--ink-faint)}
.rat-ag.an .rat-ag-ic{background:var(--rail-active,var(--surface-3));color:var(--ink)}
.rat-ag-ic .ic{width:20px;height:20px}
.rat-ag-t{flex:1;min-width:0}
.rat-ag-t h4{font-size:.99rem;font-weight:800;letter-spacing:-.01em;margin:0 0 2px;line-height:1.3}
.rat-ag-d{font-size:.72rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.rat-ag-b{padding:0 18px 14px;font-size:.86rem;line-height:1.55;color:var(--ink-soft);flex:1;text-wrap:pretty}
.rat-ag-b .aus-txt{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);
  font-size:.82rem;color:var(--warn)}
.rat-ag-f{display:flex;align-items:center;gap:10px;padding:11px 18px;border-top:1px solid var(--line);
  background:var(--surface-2);font-size:.78rem;color:var(--ink-faint)}
.rat-ag-f .sp{flex:1}

/* Der Schalter — identisch zum Regelwerk, damit derselbe Handgriff dasselbe bedeutet. */
.rat-sw{flex:none;width:46px;height:26px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--surface-3);padding:0;cursor:pointer;position:relative;transition:.18s var(--ease)}
.rat-sw .knopf{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow);transition:.18s var(--ease)}
.rat-sw.an{background:var(--lime);border-color:var(--lime)}
.rat-sw.an .knopf{left:calc(100% - 22px)}
.rat-sw:hover{border-color:var(--ink-faint)}
.rat-sw[disabled]{cursor:not-allowed;opacity:.5}

/* ---------------------------------------------------------------- 2. Vorschlags-Brett */
/* Fuenf Spalten muessen in die Inhaltsbreite passen, sonst steht die letzte — ausgerechnet
   "Uebergeben", das Ende des Weges — dauerhaft halb ausserhalb und sieht aus wie abgeschnitten.
   Mindestbreite so, dass 5 Spalten in rund 1150 px Inhalt aufgehen; erst darunter wird gerollt. */
.rat-brett{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:12px;
  overflow-x:auto;padding-bottom:10px;align-items:start}
@media(max-width:1080px){.rat-brett{grid-auto-columns:minmax(250px,1fr);gap:14px}}
.rat-sp{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px;min-width:0}
.rat-sp-k{display:flex;align-items:center;gap:8px;margin-bottom:11px;padding:0 3px}
.rat-sp-k b{font-size:.76rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.rat-sp-k .n{min-width:20px;height:20px;padding:0 6px;border-radius:20px;background:var(--surface-3);
  color:var(--ink-faint);font-size:.7rem;font-weight:900;display:grid;place-items:center}
.rat-sp-k .sp{flex:1}
.rat-sp-k .pkt{width:8px;height:8px;border-radius:50%;flex:none}
.rat-sp-k .pkt.s-entwurf{background:var(--ink-faint)}
.rat-sp-k .pkt.s-abstimmung{background:var(--warn)}
.rat-sp-k .pkt.s-beschlossen{background:var(--info)}
.rat-sp-k .pkt.s-inkraft{background:var(--lime)}
.rat-sp-k .pkt.s-uebergeben{background:var(--good)}
.rat-sp-sub{font-size:.76rem;line-height:1.45;color:var(--ink-faint);margin:-6px 3px 11px;text-wrap:pretty}
.rat-sp-liste{display:flex;flex-direction:column;gap:10px}
.rat-sp-leer{padding:18px 10px;text-align:center;font-size:.8rem;color:var(--ink-faint);line-height:1.5;
  border:1px dashed var(--line-strong);border-radius:var(--r-sm)}

.rat-v{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;
  transition:.16s var(--ease)}
.rat-v:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.rat-v-k{display:flex;gap:8px;align-items:flex-start;margin-bottom:7px}
.rat-v-k h5{flex:1;min-width:0;font-size:.92rem;font-weight:800;line-height:1.35;margin:0;letter-spacing:-.01em}
.rat-v-txt{font-size:.82rem;line-height:1.5;color:var(--ink-soft);margin:0 0 10px;text-wrap:pretty}
.rat-v-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.rat-mk{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:20px;
  background:var(--surface-3);color:var(--ink-faint);font-size:.7rem;font-weight:800;white-space:nowrap}
.rat-mk .ic{width:11px;height:11px}
.rat-mk.m-warn{background:var(--warn-bg);color:var(--warn)}
.rat-mk.m-good{background:var(--good-bg);color:var(--good)}
.rat-mk.m-info{background:var(--info-bg);color:var(--info)}
.rat-mk.m-bad{background:var(--bad-bg);color:var(--bad)}

/* Stimmbild: ein Balken, keine drei Zahlen. Drei Zahlen muss man vergleichen, einen Balken sieht man. */
.rat-bal{display:flex;height:6px;border-radius:6px;overflow:hidden;background:var(--surface-3);margin-bottom:7px}
.rat-bal i{display:block;height:100%}
.rat-bal .ja{background:var(--good)}
.rat-bal .enth{background:var(--line-strong)}
.rat-bal .nein{background:var(--bad)}
.rat-v-st{font-size:.76rem;color:var(--ink-faint);margin-bottom:10px}
.rat-v-st b{color:var(--ink-soft);font-weight:800}

.rat-v-mehr{border-top:1px solid var(--line);margin-top:10px;padding-top:10px;display:flex;flex-direction:column;gap:8px}
.rat-stimme{display:flex;gap:9px;align-items:flex-start;font-size:.79rem;line-height:1.45}
.rat-stimme .pkt{width:7px;height:7px;border-radius:50%;flex:none;margin-top:6px}
.rat-stimme .pkt.v-ja{background:var(--good)}
.rat-stimme .pkt.v-nein{background:var(--bad)}
.rat-stimme .pkt.v-enth{background:var(--line-strong)}
.rat-stimme b{display:block;font-weight:800;color:var(--ink)}
.rat-stimme span{color:var(--ink-soft);text-wrap:pretty}

.rat-v-akt{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
/* In einer 210-px-Spalte laeuft "An die Entwicklung uebergeben" aus der Karte heraus und wird am
   Rand abgeschnitten — ein halb sichtbarer Knopf sieht aus wie ein Layoutfehler und man traut ihm
   nicht. Im Brett darf die Beschriftung deshalb umbrechen; die feste Hoehe faellt weg. */
.rat-v-akt .rat-b{white-space:normal;text-align:left;height:auto;min-height:32px;
  padding:7px 11px;line-height:1.32;max-width:100%;align-items:flex-start}
.rat-v-akt .rat-b .ic{margin-top:2px}
.rat-v>.rat-b{white-space:normal;text-align:left;height:auto;min-height:32px;padding:7px 11px;
  line-height:1.32;max-width:100%;align-items:flex-start}
.rat-v>.rat-b .ic{margin-top:2px}

/* Knopf im Kartenmassstab. Der grosse .btn (44 px) sprengt eine Brett-Spalte. */
.rat-b{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:9px;
  font-size:.8rem;font-weight:800;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);cursor:pointer;transition:.15s var(--ease);white-space:nowrap;font-family:inherit}
.rat-b .ic{width:14px;height:14px}
.rat-b:hover{border-color:var(--ink-faint);background:var(--surface-2)}
.rat-b.b-ja{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.rat-b.b-ja:hover{background:var(--lime-strong)}
.rat-b.b-nein{color:var(--bad);border-color:var(--bad)}
.rat-b.b-nein:hover{background:var(--bad-bg)}
.rat-b.b-stop{color:var(--bad);border-color:var(--bad);font-weight:900}
.rat-b.b-stop:hover{background:var(--bad-bg)}
/* Gesperrt: sichtbar, nicht ausgeblendet — und mit Grund statt Schweigen. */
.rat-b.b-sperr{opacity:.55;cursor:not-allowed;border-style:dashed}
.rat-b.b-sperr:hover{background:var(--surface)}
.rat-sperr-grund{display:flex;gap:7px;align-items:flex-start;margin-top:8px;padding:8px 10px;
  border-radius:var(--r-sm);background:var(--warn-bg);color:var(--warn);font-size:.76rem;line-height:1.45}
.rat-sperr-grund .ic{width:13px;height:13px;flex:none;margin-top:2px}

/* ---------------------------------------------------------------- 3. Regel anfordern */
.rat-form{padding:22px}
.rat-form label{display:block;font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 7px}
.rat-form textarea{width:100%;min-height:118px;resize:vertical;padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);font:inherit;
  font-size:.92rem;line-height:1.6}
.rat-form textarea:focus{outline:2px solid var(--lime);outline-offset:1px;background:var(--surface)}
.rat-form-hint{font-size:.82rem;line-height:1.55;color:var(--ink-faint);margin:9px 0 0;text-wrap:pretty}
.rat-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.rat-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:20px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);font-size:.79rem;
  font-weight:700;cursor:pointer;transition:.15s var(--ease);font-family:inherit}
.rat-chip:hover{border-color:var(--ink-faint);color:var(--ink)}
.rat-chip.an{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.rat-form-f{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line)}
.rat-form-f .sp{flex:1}

.rat-bsp{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:12px}
.rat-bsp button{text-align:left;padding:12px 14px;border-radius:var(--r-sm);border:1px dashed var(--line-strong);
  background:var(--surface-2);color:var(--ink-soft);font:inherit;font-size:.82rem;line-height:1.45;
  cursor:pointer;transition:.15s var(--ease)}
.rat-bsp button:hover{border-style:solid;border-color:var(--ink-faint);color:var(--ink);background:var(--surface)}
.rat-bsp b{display:block;color:var(--ink);font-weight:800;margin-bottom:3px;font-size:.84rem}

/* ---------------------------------------------------------------- 4. Auftraege */
.rat-aufs{display:flex;flex-direction:column;gap:12px}
.rat-auf{padding:0;overflow:hidden;border-left:3px solid var(--line-strong)}
.rat-auf.s-laeuft{border-left-color:var(--lime)}
.rat-auf.s-wartet{border-left-color:var(--warn)}
.rat-auf.s-fertig{border-left-color:var(--good)}
.rat-auf.s-gestoppt{border-left-color:var(--bad)}
.rat-auf-k{display:flex;gap:13px;align-items:flex-start;padding:16px 18px 12px;flex-wrap:wrap}
.rat-auf-t{flex:1;min-width:220px}
.rat-auf-t h4{font-size:.98rem;font-weight:800;margin:0 0 4px;line-height:1.35;letter-spacing:-.01em}
.rat-auf-t p{margin:0;font-size:.84rem;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.rat-auf-a{display:flex;gap:7px;align-items:center;flex-wrap:wrap}

.rat-stufen{display:flex;gap:0;padding:0 18px 16px}
.rat-stufe{flex:1;min-width:0;padding-right:12px;position:relative}
.rat-stufe:last-child{padding-right:0}
.rat-stufe .bar{height:4px;border-radius:4px;background:var(--surface-3);margin-bottom:8px;overflow:hidden}
.rat-stufe .bar i{display:block;height:100%;width:0;background:var(--lime);transition:width .5s var(--ease)}
.rat-stufe.fertig .bar i{width:100%;background:var(--good)}
.rat-stufe.aktiv .bar i{width:60%;animation:ratPuls 1.3s ease-in-out infinite}
.rat-stufe.gestoppt .bar i{width:100%;background:var(--bad)}
@keyframes ratPuls{0%,100%{opacity:.45}50%{opacity:1}}
.rat-stufe b{display:block;font-size:.76rem;font-weight:800;color:var(--ink-faint);line-height:1.35;margin-bottom:2px}
.rat-stufe.fertig b,.rat-stufe.aktiv b{color:var(--ink)}
.rat-stufe span{display:block;font-size:.74rem;line-height:1.45;color:var(--ink-faint);text-wrap:pretty}
@media(max-width:720px){.rat-stufen{flex-direction:column;gap:12px}.rat-stufe{padding-right:0}}

.rat-auf-f{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:11px 18px;
  border-top:1px solid var(--line);background:var(--surface-2);font-size:.78rem;color:var(--ink-faint)}
.rat-auf-f .sp{flex:1}

/* ---------------------------------------------------------------- 5. Rollen und Rechte */
.rat-ich{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-radius:var(--r);
  background:var(--info-bg);color:var(--info);font-size:.86rem;line-height:1.5;margin-bottom:18px}
.rat-ich .ic{width:17px;height:17px;flex:none}
.rat-ich b{font-weight:800}
.rat-ich .sp{flex:1}

.rat-tab-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.rat-tab{width:100%;border-collapse:collapse;min-width:640px;font-size:.85rem}
table.rat-tab th,table.rat-tab td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.rat-tab thead th{background:var(--surface-2);font-size:.71rem;font-weight:900;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;position:sticky;top:0}
table.rat-tab tbody tr:last-child td{border-bottom:0}
table.rat-tab tbody tr:hover{background:var(--surface-2)}
table.rat-tab td.mit{text-align:center;width:104px}
table.rat-tab .r-name{font-weight:800;color:var(--ink)}
table.rat-tab .r-sub{display:block;margin-top:3px;font-size:.78rem;color:var(--ink-faint);line-height:1.45;
  max-width:44ch;text-wrap:pretty}

.rat-hak{width:26px;height:26px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface-2);
  display:inline-grid;place-items:center;cursor:pointer;transition:.15s var(--ease);padding:0}
.rat-hak .ic{width:14px;height:14px;color:transparent}
.rat-hak.an{background:var(--lime);border-color:var(--lime)}
.rat-hak.an .ic{color:var(--on-lime)}
.rat-hak.fest{cursor:not-allowed;background:var(--good-bg);border-color:transparent}
.rat-hak.fest .ic{color:var(--good)}
.rat-hak:not(.fest):hover{border-color:var(--ink-faint)}

.rat-rolle{height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.rat-rolle:focus{outline:2px solid var(--lime);outline-offset:1px}

/* ---------------------------------------------------------------- 6. Protokoll */
.rat-prot-aus{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);
  background:var(--warn-bg);color:var(--warn);font-size:.86rem;line-height:1.55;margin-bottom:16px}
.rat-prot-aus .ic{width:17px;height:17px;flex:none;margin-top:2px}
.rat-prot-aus b{font-weight:800}

/* ---------------------------------------------------------------- Fussnote */
.rat-fuss{margin-top:26px}