/* Agenten-Ampel (0063) -- eigene Datei, damit parallele Zweige an styles.css nicht kollidieren.
   Farben nur ueber tokens.css. Breit: Tabelle je Bereich. Schmal (Handy): je Agent ein Kaertchen. */
.ampel{display:flex;flex-direction:column;gap:12px;scroll-margin-top:80px}
.ampel .abschnitt-kopf h2{margin:0}
.ampel-summe{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;font-size:14px;color:var(--ink-2)}
.ampel-summe b{color:var(--ink);font-size:16px;margin-right:2px}
.ab-zahl{display:inline-flex;align-items:center;gap:6px}
.ampel-punkt{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;border:1.6px solid transparent}
.ampel-punkt.a-gruen{background:var(--gruen);border-color:var(--gruen)}
.ampel-punkt.a-gelb{background:var(--sun);border-color:var(--sun)}
.ampel-punkt.a-rot{background:var(--ton);border-color:var(--ton);box-shadow:0 0 8px var(--glow-ton)}
.ampel-punkt.a-weiss{background:var(--surface);border-color:var(--ink-3)}

.ampel-bereich{background:var(--glas);border:1px solid var(--glas-rand);border-radius:16px;box-shadow:var(--card-shadow)}
.ampel-bereich>summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;font-weight:700}
.ampel-bereich>summary::-webkit-details-marker{display:none}
.ampel-bereich>summary .ab-name{font-family:var(--font-titel);font-size:16px}
.ampel-bereich>summary .ab-zahlen{display:inline-flex;gap:12px;font-size:13px;font-weight:600;color:var(--ink-2);margin-left:auto}
.ampel-bereich>summary:focus-visible{outline:2px solid var(--sun);outline-offset:2px;border-radius:16px}

.ampel-kopfzeile,.ampel-zeile{display:grid;grid-template-columns:16px minmax(150px,1.3fr) 110px minmax(130px,1fr) minmax(130px,1fr) minmax(160px,1.5fr);gap:12px;align-items:center}
.ampel-kopfzeile{padding:4px 16px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);font-family:var(--font-mono)}
.ampel-liste{display:flex;flex-direction:column;padding:0 8px 8px}
.ampel-zeile{width:100%;text-align:left;font:inherit;color:inherit;background:transparent;border:0;border-top:1px solid var(--line);padding:10px 8px;cursor:pointer;font-size:13.5px}
.ampel-zeile:hover{background:var(--surface-2)}
.ampel-zeile:focus-visible{outline:2px solid var(--sun);outline-offset:-2px;border-radius:10px}
.ampel-zeile .az-name{display:flex;align-items:center;gap:8px;min-width:0}
.ampel-zeile .az-name b{font-weight:650;overflow-wrap:anywhere}
.ampel-zeile .az-zelle{color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.ampel-zeile .az-label{display:none}
.ampel-zeile.a-rot .az-fehlt,.ampel-zeile.a-gelb .az-fehlt{color:var(--ink)}
.ampel-zeile.a-weiss .az-name b{color:var(--ink-2)}

.ampel-satz{display:flex;align-items:center;gap:8px;font-weight:600}
.ampel-lauf,.ampel-todo{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.ampel-lauf .ampel-punkt{margin-top:4px}
.ampel-lauf p,.ampel-todo p{margin:2px 0 0;color:var(--ink-2);font-size:13px;overflow-wrap:anywhere}
.ampel-todo{flex-direction:column;gap:0}
.ampel-todo small{color:var(--ink-3);font-size:11px;font-weight:700}

@media (max-width:899px){
  .ampel-kopfzeile{display:none}
  .ampel-liste{gap:8px;padding:0 10px 10px}
  .ampel-zeile{grid-template-columns:16px minmax(0,1fr);gap:6px 10px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface)}
  .ampel-zeile .az-zelle{grid-column:2;display:flex;gap:8px;font-size:13px}
  .ampel-zeile .az-label{display:inline;flex:none;width:92px;color:var(--ink-3);font-size:11px;font-weight:700}
  .ampel-bereich>summary .ab-zahlen{gap:8px}
}