/*
 * Aufgaben-Wahl (docs/design/site-chrome/aufgaben.py, I-066). Eigene Tokens mit
 * Kit-Fallback, damit der Block auf Kit- und tm-alt-Seiten passt; hell/dunkel.
 */
.ag {
  --ag-bg: var(--pl-surface, #FFFFFF);
  --ag-sunken: var(--pl-sunken, #F2F4F5);
  --ag-text: var(--pl-text, #14191C);
  --ag-muted: var(--pl-muted, #55606A);
  --ag-border: var(--pl-border, #DCE1E5);
  --ag-accent: var(--pl-accent, #ED6A3D);
  --ag-accent-text: var(--pl-accent-text, #B4441F);
  width: min(1180px, 100% - 32px);
  margin: 0 auto clamp(40px, 6vw, 72px);
  font-family: var(--pl-sans, "TM Sans", "Segoe UI", system-ui, -apple-system, sans-serif);
  color: var(--ag-text);
}
@media (prefers-color-scheme: dark) {
  html:not([data-tm-chrome="light"]) .ag {
    --ag-bg: var(--pl-surface, #101518);
    --ag-sunken: var(--pl-sunken, #151C21);
    --ag-text: var(--pl-text, #ECEDEE);
    --ag-muted: var(--pl-muted, #A2AAAF);
    --ag-border: var(--pl-border, #202B32);
    --ag-accent-text: var(--pl-accent-text, #F59A78);
  }
}
html[data-tm-chrome="dark"] .ag {
  --ag-bg: #101518; --ag-sunken: #151C21; --ag-text: #ECEDEE; --ag-muted: #A2AAAF; --ag-border: #2A363D; --ag-accent-text: #F59A78;
}
.ag-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ag-accent-text); }
.ag-h { margin: 10px 0 0; font-family: var(--pl-serif, "TM Serif", Georgia, serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; color: var(--ag-text); }
.ag-lead { margin: 10px 0 22px; font-size: 17px; color: var(--ag-muted); max-width: 60ch; }
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.ag-card { border-radius: 16px; background: var(--ag-bg); border: 1px solid var(--ag-border); }
.ag-card[open] { border-color: var(--ag-accent); box-shadow: 0 16px 32px -24px rgba(0, 0, 0, .45); }
.ag-card summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 76px; justify-content: center; padding: 16px 44px 16px 18px; position: relative; border-radius: 16px; }
.ag-card summary::-webkit-details-marker { display: none; }
.ag-card summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ag-sunken); color: var(--ag-accent-text); font-weight: 700; }
.ag-card[open] summary::after { content: "–"; }
.ag-card summary:focus-visible { outline: 3px solid var(--ag-accent); outline-offset: 2px; }
.ag-title { font-size: 18px; font-weight: 700; line-height: 1.25; }
.ag-more { font-size: 14px; color: var(--ag-muted); }
.ag-card[open] .ag-more { display: none; }
.ag-body { padding: 0 18px 18px; }
.ag-before { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--ag-sunken); font-size: 15px; color: var(--ag-muted); }
.ag-after { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; border-left: 3px solid var(--ag-accent); background: var(--ag-sunken); font-size: 15px; }
.ag-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.ag .ag-wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, #25D366 55%, var(--ag-border)); background: color-mix(in srgb, #25D366 9%, var(--ag-bg)); color: var(--ag-text); font-weight: 700; font-size: 15px; text-decoration: none; }
.ag .ag-wa svg { flex: none; color: #1A8F4A; }
.ag .ag-wa:focus-visible { outline: 3px solid var(--ag-accent); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { html:not([data-tm-chrome="light"]) .ag .ag-wa svg { color: #25D366; } }
html[data-tm-chrome="dark"] .ag .ag-wa svg { color: #25D366; }
.ag-reg { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--ag-accent); color: #111; font-weight: 700; font-size: 15px; text-decoration: none; }
.ag-reg:focus-visible { outline: 3px solid var(--ag-text); outline-offset: 2px; }
@media (max-width: 560px) { .ag-ctas > * { flex: 1 1 100%; justify-content: center; } }