/*
 * AJO – Bausteine der Übersichtsseiten (ajo-uebersichten.php): Filterleiste, Projektkarten, Maßnahmen-Tabelle, Kennzahlen-Karten.
 * Farben nur über --ajo-* (post-6.css) und die Hilfswerte aus ajo-design.css (--ajo-linie, --ajo-schatten, --ajo-ease).
 * Gilt auf /projekte/, /auftraggeber-partner/ und /wirkung/ (Prefix ajo-sb-).
 */

/* Screenreader-Text (Tabellenüberschrift) */
.ajo-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 1. Filterleiste: Gruppen mit Label, Schalter als Pillen, gedrückt = Tinte */
.ajo-sb-filter { width: 100%; }
.ajo-sb-filterbar { display: grid; gap: 18px; }
.ajo-sb-fgroup { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; align-items: start; }
.ajo-sb-flabel { padding-top: 10px; font: 700 14px/1.3 var(--ajo-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ajo-gedaempft); }
.ajo-sb-fbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.ajo-sb-fbtn {
  min-height: 40px;
  padding: 8px 16px;
  border: 2px solid var(--ajo-tinte);
  border-radius: 999px;
  background: var(--ajo-weiss);
  color: var(--ajo-tinte);
  font: 700 15px/1.2 var(--ajo-font-text);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.ajo-sb-fbtn:hover { background: var(--ajo-rose); }
.ajo-sb-fbtn[aria-pressed="true"] { background: var(--ajo-tinte); color: var(--ajo-weiss); }
.ajo-sb-fbtn:focus-visible, .ajo-sb-freset:focus-visible, .ajo-sb-card-link:focus-visible, .ajo-sb-jump a:focus-visible { outline: 3px solid var(--ajo-tinte); outline-offset: 3px; }
.ajo-sb-fstatus { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ajo-linie); }
.ajo-sb-count { margin: 0; font: 700 16px/1.4 var(--ajo-font-text); color: var(--ajo-text); }
.ajo-sb-freset {
  padding: 8px 0;
  border: 0;
  background: none;
  font: 700 16px/1.4 var(--ajo-font-text);
  color: var(--ajo-dunkelrot);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  cursor: pointer;
}
.ajo-sb-filter:not(.is-filtered) .ajo-sb-fstatus .ajo-sb-freset { visibility: hidden; }
.ajo-sb-empty { margin-top: 24px; padding: 28px 32px; background: var(--ajo-weiss); border-radius: 22px; }
.ajo-sb-empty .ajo-text { margin: 0 0 10px; font: 400 19px/1.6 var(--ajo-font-text); color: var(--ajo-text); }
.ajo-sb-empty a { color: var(--ajo-dunkelrot); font-weight: 700; }

/* 2. Karten-Raster (Projekte 3 Spalten, Wirkung 3 Spalten) */
.ajo-sb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; width: 100%; }
.ajo-sb-card, .ajo-sb-wcard { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; }
.ajo-sb-card-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ajo-sb-card-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 8px; padding: 24px 26px 28px; }
.ajo-sb-chip { display: inline-block; align-self: flex-start; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--ajo-rose); color: var(--ajo-dunkelrot); font: 700 13px/1 var(--ajo-font-text); }
.ajo-sb-card-title, .ajo-sb-wcard-title { margin: 4px 0 0; font: 600 clamp(1.375rem, 0.75vw + 1.125rem, 1.625rem)/1.2 var(--ajo-font-headline); color: var(--ajo-text); letter-spacing: -.01em; }
.ajo-sb-card-text { margin: 0; font: 400 16px/1.5 var(--ajo-font-text); color: var(--ajo-text); }
.ajo-sb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.ajo-sb-chips li { padding: 5px 10px; border: 1px solid var(--ajo-linie); border-radius: 999px; font: 400 13px/1.2 var(--ajo-font-text); color: var(--ajo-gedaempft); }
.ajo-sb-card-link { margin-top: auto; padding-top: 14px; font: 700 16px/1.4 var(--ajo-font-text); color: var(--ajo-dunkelrot); text-decoration: none; }
.ajo-sb-card-link::after { content: "\2192" / ""; display: inline-block; margin-left: .45em; transition: transform .2s var(--ajo-ease); }
.ajo-sb-card-link::before { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar, ein Link */
.ajo-sb-card:hover .ajo-sb-card-link, .ajo-sb-card:focus-within .ajo-sb-card-link,
.ajo-sb-wcard:hover .ajo-sb-card-link, .ajo-sb-wcard:focus-within .ajo-sb-card-link { text-decoration: underline; text-underline-offset: 4px; }
.ajo-sb-card:hover .ajo-sb-card-link::after, .ajo-sb-wcard:hover .ajo-sb-card-link::after { transform: translateX(4px); }
.ajo-sb-card:focus-within, .ajo-sb-wcard:focus-within { outline: 3px solid var(--ajo-tinte); outline-offset: 3px; }
.ajo-sb-card-link:focus-visible { outline: none; }

/* 3. Kennzahlen-Karten (Wirkung) */
.ajo-sb-wcard { padding: 26px 28px 28px; gap: 10px; }
.ajo-sb-kz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin: 10px 0 4px; }
.ajo-sb-kz > div { display: flex; flex-direction: column-reverse; }
.ajo-sb-kz dd { margin: 0; font: 800 clamp(30px, 2.4vw, 38px)/1 var(--ajo-font-headline); color: var(--ajo-tinte); letter-spacing: -.03em; }
.ajo-sb-kz dt { margin-top: 6px; font: 400 14px/1.35 var(--ajo-font-text); color: var(--ajo-gedaempft); }
.ajo-sb-source { margin: 0; font: 400 14px/1.4 var(--ajo-font-text); color: var(--ajo-gedaempft); }

/* 4. Maßnahmen-Liste (Auftraggeber): Sprungleiste und Tabellen je Bereich */
.ajo-sb-liste { width: 100%; }
.ajo-sb-jump ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; padding: 0; list-style: none; }
.ajo-sb-jump a { display: inline-block; min-height: 40px; padding: 8px 16px; border: 2px solid var(--ajo-tinte); border-radius: 999px; font: 700 15px/1.2 var(--ajo-font-text); color: var(--ajo-tinte); text-decoration: none; transition: background-color .2s, color .2s; }
.ajo-sb-jump a:hover { background: var(--ajo-tinte); color: var(--ajo-weiss); }
.ajo-sb-group + .ajo-sb-group { margin-top: 44px; }
.ajo-sb-group-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 14px; font: 600 clamp(1.375rem, 0.75vw + 1.125rem, 1.625rem)/1.2 var(--ajo-font-headline); color: var(--ajo-text); scroll-margin-top: 110px; }
.ajo-sb-group { scroll-margin-top: 100px; }
.ajo-sb-group-count { font: 400 15px/1.3 var(--ajo-font-text); color: var(--ajo-gedaempft); }
.ajo-sb-table { width: 100%; border-collapse: collapse; background: var(--ajo-weiss); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 0 var(--ajo-linie); font: 400 16px/1.45 var(--ajo-font-text); color: var(--ajo-text); }
.ajo-sb-table th, .ajo-sb-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ajo-linie); }
.ajo-sb-table thead th { font: 700 13px/1.2 var(--ajo-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ajo-gedaempft); background: color-mix(in srgb, var(--ajo-rose) 55%, var(--ajo-weiss)); }
.ajo-sb-table tbody th { font-weight: 700; min-width: 11em; }
.ajo-sb-table tbody th a { color: var(--ajo-dunkelrot); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ajo-sb-table tbody th a:hover, .ajo-sb-table tbody th a:focus-visible { color: var(--ajo-rot); text-decoration-thickness: 3px; }
.ajo-sb-table tbody tr:last-child th, .ajo-sb-table tbody tr:last-child td { border-bottom: 0; }
.ajo-sb-table tbody tr:hover { background: color-mix(in srgb, var(--ajo-rose) 35%, var(--ajo-weiss)); }
.ajo-sb-leer { color: var(--ajo-gedaempft); font-style: italic; }

/* 5. Responsive */
@media (max-width: 1024px) {
  .ajo-sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ajo-sb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ajo-sb-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--ajo-linie); }
  .ajo-sb-table tbody th, .ajo-sb-table td { display: block; padding: 8px 18px; border: 0; }
  .ajo-sb-table tbody th { padding-top: 16px; font-size: 18px; }
  .ajo-sb-table td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ajo-gedaempft); }
  .ajo-sb-table tbody tr:last-child td:last-child { padding-bottom: 16px; }
}
@media (max-width: 640px) {
  .ajo-sb-grid { grid-template-columns: 1fr; }
  .ajo-sb-fgroup { grid-template-columns: 1fr; gap: 6px; }
  .ajo-sb-flabel { padding-top: 0; }
  .ajo-sb-kz { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ajo-sb-fbtn, .ajo-sb-jump a, .ajo-sb-card-link::after { transition: none; }
  .ajo-sb-card:hover .ajo-sb-card-link::after, .ajo-sb-wcard:hover .ajo-sb-card-link::after { transform: none; }
}