/* ==========================================================================
   ZZD · Punkt für Punkt
   Baut auf zzd.css und projekt.css auf und benutzt nur deren Token. Der
   Kopf ist das Bild: dunkle Fläche wie bei jeder Projektseite, darauf alle
   Vorlagen seit 1848. Er füllt den ersten Bildschirm, das Bild nimmt sich,
   was Überschrift und Bedienung übrig lassen. Alles Lesbare in rem: ab
   1241 px wächst die Grundschrift mit, das Bild wächst mit ihr.
   ========================================================================== */

html:not(.js) .ab-nur-js { display: none !important }
.js .ab-ohne-js { display: none }

/* ── Kopf ──────────────────────────────────────────────────────────────── */

.ab-hero {
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 1.9vw, 1.5rem) var(--gutter) 0;
  min-height: min(calc(100vh - var(--nav-h)), 60rem);
  min-height: min(calc(100svh - var(--nav-h)), 60rem);
}
.ab-hero-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 0;
}

/* Kennzeile links, Rückweg rechts: eine Zeile statt zwei */
.ab-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.35rem;
}
.ab-kopfzeile .pj-kennung { margin: 0 }
.ab-kopfzeile .pj-back { margin: 0; font-size: 0.82rem }

.ab-hero h1 {
  font-size: clamp(1.85rem, 3.1vw, 2.7rem);
  line-height: 1.08;
  max-width: none;
  margin: 0.3rem 0 0.95rem;
}

/* ── Bedienung: Rechtsform, Bereich, Titel ─────────────────────────────── */

.ab-bedienung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-bottom: 0.85rem;
}
.ab-seg {
  display: inline-flex;
  max-width: 100%;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
}
.ab-seg button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--panel-muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--panel-line);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ab-seg button:last-child { border-right: 0 }
.ab-seg small { font-size: 0.78rem; color: var(--panel-muted); font-variant-numeric: tabular-nums }
@media (hover: hover) {
  .ab-seg button:hover { color: var(--panel-text); background: var(--panel-hover) }
}
/* Gewählt: hell, mit dem roten Strich der Marke darunter */
.ab-seg button[aria-pressed="true"] {
  color: var(--panel-text);
  background: var(--panel-hover);
  box-shadow: inset 0 -2px 0 var(--accent-on-ink);
}
.ab-seg button[aria-pressed="true"] small { color: var(--panel-body) }
.ab-seg button:focus-visible { outline: 2px solid var(--accent-on-ink); outline-offset: -2px }

.ab-wahl, .ab-such { position: relative; display: block }
.ab-wahl select,
.ab-such input {
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--panel-text);
  background: transparent;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
  color-scheme: dark;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ab-wahl select { appearance: none; -webkit-appearance: none; padding-right: 2.1rem; cursor: pointer }
.ab-wahl select option { background: var(--panel); color: var(--panel-text) }
/* Der Winkel der Auswahl, in der Farbe der Schrift */
.ab-wahl::after {
  content: '';
  position: absolute;
  right: 0.85rem;
  top: 50%;
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1.5px solid var(--panel-muted);
  border-bottom: 1.5px solid var(--panel-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
/* Suche und Drucken bilden eine Gruppe: Reicht die Zeile nicht, gehen
   beide zusammen auf die nächste, nie der Druckknopf allein. Die Suche
   wird bis 15rem breit, der Knopf steht ganz rechts. */
.ab-bed-rechts { flex: 1 1 16rem; display: flex; align-items: center; gap: 0.9rem; min-width: 0 }
.ab-such { flex: 1 1 auto; max-width: 15rem; min-width: 0 }
.ab-such input { width: 100% }
.ab-such input::placeholder { color: var(--panel-muted); opacity: 1 }
@media (hover: hover) {
  .ab-wahl select:hover, .ab-such input:hover { border-color: var(--panel-muted) }
}
.ab-wahl select:focus-visible,
.ab-such input:focus-visible { outline: none; border-color: var(--accent-on-ink); box-shadow: 0 0 0 2px var(--accent-on-ink) }

/* Drucken: so leise wie die übrigen Knöpfe. Beim Zeigen schiebt sich das
   Blatt ein Stück aus dem Drucker. Was gedruckt wird, steht unten unter
   «Druck: das Gesprächsblatt». */
.ab-drucken {
  position: relative;
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--panel-muted);
  background: transparent;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ab-drucken svg,
.ab-blatt-knopf svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.ab-papier { transition: transform var(--t-base) var(--ease) }
@media (hover: hover) {
  .ab-drucken:hover { color: var(--panel-text); background: var(--panel-hover); border-color: var(--panel-muted) }
  .ab-drucken:hover .ab-papier,
  .ab-blatt-knopf:hover .ab-papier { transform: translateY(1.75px) }
}
.ab-drucken:focus-visible { outline: 2px solid var(--accent-on-ink); outline-offset: 2px; color: var(--panel-text) }
/* Wird die Zeile knapp, bleibt vom Knopf das Zeichen; sein Name bleibt
   für Vorlesehilfen stehen */
@media (max-width: 1149px) {
  .ab-drucken { padding: 0.45rem 0.6rem }
  .ab-drucken > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ── Das Bild ──────────────────────────────────────────────────────────── */

.ab-bild {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}
.ab-bild-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  border-top: 1px solid var(--panel-text);
  padding-top: 0.45rem;
}
.ab-zahl,
.ab-legende {
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--panel-muted);
}
.ab-zahl b { font-weight: 400; color: var(--panel-text) }
.ab-legende { display: flex; flex-wrap: wrap; gap: 0.15rem 1.1rem }
.ab-legende > span { display: inline-flex; align-items: center; gap: 0.45rem }
.ab-legende i { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; box-sizing: border-box }
.ab-legende i.ja { background: var(--panel-text) }
.ab-legende i.nein { border: 1px solid var(--panel-body) }

.ab-plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 13rem;
  cursor: crosshair;
  touch-action: pan-y;
  outline: none;
}
.ab-plot.ueber { cursor: pointer }
.ab-plot svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible }
.ab-plot:focus-visible { outline: 2px solid var(--accent-on-ink); outline-offset: 4px }
.ab-plot .r { stroke: var(--panel-line); stroke-width: 1 }
.ab-plot .mitte { stroke: var(--panel-body); stroke-width: 1 }
.ab-plot .tick { stroke: var(--panel-faint); stroke-width: 1 }
.ab-plot .ax {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  fill: var(--panel-muted);
}
.ab-plot .ax.m { fill: var(--panel-body) }
.ab-plot circle.p { transition: fill var(--t-fast) var(--ease), stroke var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease) }
.ab-plot circle.p.a1 { fill: var(--panel-text); stroke: var(--panel); stroke-width: 0.9 }
.ab-plot circle.p.a0 { fill: var(--panel); stroke: var(--panel-text); stroke-opacity: 0.62; stroke-width: 1 }
/* Was nicht zur Auswahl passt, tritt deutlich zurück und bleibt nur als
   Spur da; was passt, steht mit voller Linie davor. Mit der Linienfarbe
   allein (16 %) mischten sich beide Gruppen noch zu sehr. */
.ab-plot.gefiltert circle.p.aus { opacity: 0.4 }
.ab-plot.gefiltert circle.p.aus.a1 { fill: var(--panel-line); stroke: var(--panel) }
.ab-plot.gefiltert circle.p.aus.a0 { stroke: var(--panel-line); stroke-opacity: 1 }
.ab-plot.gefiltert circle.p.a0:not(.aus) { stroke-opacity: 1 }
.ab-plot .ring-h { fill: none; stroke: var(--panel-text); stroke-width: 1 }
.ab-plot .ring-s { fill: none; stroke: var(--accent-on-ink); stroke-width: 1.6 }
/* Eine Wahl antwortet mit einem Ring, der sich einmal öffnet */
.ab-plot .puls {
  fill: none;
  stroke: var(--accent-on-ink);
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.ab-plot .puls.an { animation: abPuls 560ms var(--ease-out) }
@keyframes abPuls {
  from { opacity: 0.85; transform: scale(1) }
  to { opacity: 0; transform: scale(2.4) }
}

/* Die Zeile unter dem Bild: in Ruhe Datenstand, beim Zeigen die Vorlage.
   Sie hat eine FESTE Höhe und jedes Stück darin eine feste Zeilenhöhe:
   Zwischen zwei Punkten liegt oft kein Punkt unter der Maus, dann springt
   die Zeile kurz in den Ruhezustand. War sie dort niedriger als mit Titel,
   wuchs und schrumpfte das Bild darüber bei jedem Wechsel — die ganze
   Grafik wackelte. Ein zu langer Titel endet mit «…» statt umzubrechen. */
.ab-zeile {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  box-sizing: border-box;
  height: 2.85rem;
  padding: 0.62rem 0 0;
  border-top: 1px solid var(--panel-line);
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--panel-muted);
  white-space: nowrap;
  overflow: hidden;
}
.ab-zeile > * { line-height: 1.5rem }
.ab-z-d { flex: none; font-variant-numeric: tabular-nums }
.ab-z-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-head);
  font-size: 1.06rem;
  color: var(--panel-text);
}
.ab-z-z { flex: none; color: var(--panel-body); font-variant-numeric: tabular-nums }
.ab-z-q { min-width: 0; overflow: hidden; text-overflow: ellipsis }
.ab-z-w { flex: none; margin-left: auto }
/* Der Hinweis lädt zum Klick ein: heller als der Datenstand, der Pfeil
   zeigt dorthin, wo die Vorlage erscheint */
span.ab-z-w { color: var(--panel-body) }
.ab-z-pfeil { color: var(--accent-on-ink) }
a.ab-z-zur {
  color: var(--panel-text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-on-ink);
  transition: color var(--t-fast) var(--ease);
}
@media (hover: hover) {
  a.ab-z-zur:hover { color: var(--accent-on-ink) }
}
.ab-zeile a:focus-visible { outline: 2px solid var(--accent-on-ink); outline-offset: 3px; border-radius: 2px }
.ab-ohne-js { white-space: normal; color: var(--panel-body) }
.ab-ohne-js a { color: var(--panel-text); text-decoration: none; border-bottom: 1px solid var(--accent-on-ink) }

/* ── Gemeinsam: Kennzeilen, Verweise ───────────────────────────────────── */

.ab-klein,
.ab-fakten dt,
.ab-quellen dt,
.ab-tab thead th {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}
.ab-link,
.ab-quellen a,
.ab-block a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .ab-link:hover, .ab-quellen a:hover, .ab-block a:hover { color: var(--accent-ink); border-bottom-color: var(--accent) }
}

/* ── Die gewählte Vorlage ──────────────────────────────────────────────── */

.ab-v-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.ab-vorlage .section-eyebrow { margin-bottom: 0 }
/* Kopfzeile der Vorlage: links das Datum, rechts der Weg zurück zum Bild,
   so leise wie «← Alle Projekte» im Kopf der Seite */
.ab-v-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem }
.ab-zumbild {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.ab-zumbild > [aria-hidden] { display: inline-block; transition: transform var(--t-base) var(--ease) }
@media (hover: hover) {
  .ab-zumbild:hover { color: var(--text) }
  .ab-zumbild:hover > [aria-hidden] { transform: translateY(-2px) }
}
.ab-zumbild:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; color: var(--text) }
.ab-v-titel {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0.45rem 0 0.5rem;
  outline: none;
}
.ab-v-amtlich { font-size: 0.95rem; line-height: 1.55; color: var(--text-muted); max-width: 56ch }
.ab-vermerk { color: var(--text-faint) }
.ab-fakten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  margin-top: 1.2rem;
  border-top: 1px solid var(--text);
}
.ab-fakten > div { padding: 0.65rem 0 0.7rem; border-bottom: 1px solid var(--line) }
.ab-fakten dt { margin-bottom: 0.2rem }
.ab-fakten dd { font-size: 0.98rem; line-height: 1.45; color: var(--text); font-variant-numeric: tabular-nums }
.ab-hinweis {
  margin-top: 0.95rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--accent);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 62ch;
}
.ab-v-wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1.2rem;
}
.ab-link { font-size: 0.95rem }
.ab-blaettern { display: inline-flex; gap: 0.5rem }
.ab-blaettern button {
  font: inherit;
  font-size: 0.86rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* Wie die übrigen Knöpfe: Beim Zeigen füllt sich die Fläche, und der
   Pfeil rückt ein Stück in die Richtung, in die geblättert wird */
.ab-blaettern button > [aria-hidden] { display: inline-block; transition: transform var(--t-base) var(--ease) }
@media (hover: hover) {
  .ab-blaettern button:hover:not(:disabled) { background: var(--text); border-color: var(--text); color: var(--paper) }
  .ab-blaettern button:hover:not(:disabled) > [aria-hidden] { transform: translateX(3px) }
  .ab-blaettern button[data-ab-schritt="-1"]:hover:not(:disabled) > [aria-hidden] { transform: translateX(-3px) }
}
.ab-blaettern button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.ab-blaettern button:disabled { color: var(--text-faint); border-color: var(--line-soft); cursor: default }

.ab-kt { margin: 0 }
.ab-kt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  border-top: 1px solid var(--text);
  padding-top: 0.55rem;
  margin-bottom: 0.3rem;
}
.ab-kt-kopf .ab-klein + .ab-klein { color: var(--text) }
.ab-kt-bild { position: relative; height: 12.5rem }
.ab-kt-bild.leer { height: 0 }
.ab-kt-bild svg { display: block; overflow: visible }
.ab-kt .bar.j { fill: var(--text) }
.ab-kt .bar.n { fill: var(--line-strong) }
.ab-kt .r { stroke: var(--line); stroke-width: 1 }
.ab-kt .mitte { stroke: var(--text); stroke-width: 1 }
.ab-kt .lab {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  fill: var(--text-muted);
}
.ab-kt .lab.wert { fill: var(--text-body) }
/* Beim Überfahren: der Balken bleibt, die übrigen treten zurück, darüber
   ein Feld mit der genauen Zahl. Haarlinie statt Schatten. */
.ab-kt .bar { transition: opacity var(--t-fast) var(--ease) }
.ab-kt-bild.zeigt .bar { opacity: 0.3 }
.ab-kt-bild.zeigt .bar.an { opacity: 1 }
.ab-kt-tip {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.4rem 0.6rem;
  background: var(--paper);
  border: 1px solid var(--text);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--text-body);
  white-space: nowrap;
  pointer-events: none;
}
.ab-kt-tip[hidden] { display: none }
.ab-kt-tip b { font-weight: 600; color: var(--text) }
.ab-kt-tip-st { color: var(--text-muted) }
@media (prefers-reduced-motion: reduce) { .ab-kt .bar { transition: none } }
.ab-kt-fuss { margin-top: 0.55rem; font-size: 0.88rem; line-height: 1.55; color: var(--text-muted) }
.ab-kt-zahlen { margin-top: 0.9rem; border-top: 1px solid var(--line) }
.ab-kt-zahlen summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.ab-kt-zahlen summary::-webkit-details-marker { display: none }
.ab-kt-zahlen summary::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform var(--t-base) var(--ease);
}
.ab-kt-zahlen[open] summary::before { transform: rotate(45deg) }
.ab-kt-zahlen summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* ── So lesen Sie das Bild ─────────────────────────────────────────────── */

.ab-lesen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5) clamp(2.25rem, 5.5vw, 5rem);
  border-top: 1px solid var(--text);
  padding-top: var(--sp-4);
  list-style: none;
}
.ab-nr { font-family: var(--font-head); font-size: 1rem; color: var(--text-faint); font-variant-numeric: lining-nums tabular-nums }
.ab-lesen h3 {
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0.4rem 0 0.45rem;
}
.ab-lesen p { font-size: 1rem; line-height: 1.6; color: var(--text-body) }

/* ── Worum es geht ─────────────────────────────────────────────────────
   Gebaut wie «Über uns» auf der Startseite: links der Kopf mit dem
   Leitsatz hinter einer roten Linie, rechts drei kurze Blöcke. Ihr
   Zeilenkopf steht über einer Haarlinie wie auf den Projektkarten. */

.ab-worum-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.75rem, 3.6vw, 3.25rem);
  align-items: start;
}
/* Der Kopf bleibt stehen, solange rechts gelesen wird, wie «Über uns»
   auf der Startseite. Er klebt auf der Linie, auf die ein Sprung im
   Seitenmenü jede Überschrift setzt (titelLinie in zzd.js): unter
   Navigation und Seitenleiste, 20px tiefer. Die Seitenleiste ist so hoch
   wie ihr Verweis, 0.9rem × 1.62 Zeilenhöhe + 1.8rem Innenabstand, dazu
   zwei Haarlinien. Einspaltig steht der Kopf einfach oben. */
@media (min-width: 961px) {
  .ab-worum-kopf { position: sticky; top: calc(var(--nav-h) + 3.258rem + 2px + 20px) }
}
.ab-worum-kopf .section-h { margin-bottom: 0.9rem }
.ab-claim {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-body);
  max-width: 36ch;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
}
/* Aus dem Leitsatz folgt der Weg zum Gesprächsblatt: ein Knopf wie
   «Vorherige» und «Nächste», darunter in einem Satz, was gedruckt wird */
.ab-gespraech { margin-top: var(--sp-4) }
.ab-blatt-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.62rem 1.05rem;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .ab-blatt-knopf:hover { background: var(--text); border-color: var(--text); color: var(--paper) }
}
.ab-blatt-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.ab-gespraech p { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); max-width: 36ch }
.ab-worum-text { display: grid; gap: var(--sp-5); max-width: 44.5rem }
.ab-block { font-size: 1rem; line-height: 1.6; color: var(--text-body) }
.ab-block > strong {
  display: block;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  padding-bottom: var(--sp-1);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

/* ── Quellen ───────────────────────────────────────────────────────────── */

.ab-quellen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-5);
  border-top: 2px solid var(--text);
}
.ab-quellen > div {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.ab-quellen dt { padding-top: 0.15rem }
.ab-quellen dd { font-size: 0.95rem; line-height: 1.55; color: var(--text-body) }

/* ── Alle Vorlagen ─────────────────────────────────────────────────────── */

.ab-dek {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--line);
}
.ab-dek button {
  font: inherit;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.6rem 0.62rem 0.5rem;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .ab-dek button:hover { color: var(--text); border-bottom-color: var(--line-strong) }
}
.ab-dek button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent) }
.ab-dek button.ohne { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--line-strong) }
.ab-dek button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }

.ab-tab-rahmen { overflow-x: auto }
.ab-tab { width: 100%; border-collapse: collapse; margin-top: 0.4rem }
.ab-tab thead th { text-align: left; padding: 0.6rem 0.75rem 0.45rem 0; border-bottom: 1px solid var(--line) }
.ab-tab td,
.ab-tab tbody th {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  color: var(--text-body);
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}
.ab-tab .r { text-align: right }
.ab-tab tr > :last-child { padding-right: 0 }
.ab-sp-d { white-space: nowrap; color: var(--text-muted) }
.ab-sp-t button,
.ab-sp-t span {
  font: inherit;
  font-family: var(--font-head);
  font-size: 1rem;
  text-align: left;
}
.ab-sp-t button {
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.ab-sp-t button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.ab-sp-t span { color: var(--text-muted) }
.ab-tab tr.ist-gewaehlt .ab-sp-t button { color: var(--accent-ink) }

/* Die Liste antwortet zeilenweise und leise: Beim Zeigen wird die Zeile
   hell hinterlegt, hinter dem Titel erscheint ein Pfeil. Die gewählte
   Vorlage trägt links einen feinen roten Strich und einen roten Titel,
   sonst nichts. Fläche und Strich reichen etwas über den Text hinaus
   (Schatten der ersten und letzten Zelle, ohne die Spalten zu
   verschieben); der Rahmen gibt ihnen dafür Platz. Der Strich ist ein
   roter Schatten unter einem deckenden, so bleiben genau 2px stehen. Die
   ganze Zeile ist anklickbar (liste() in abstimmungen.js), nicht nur der
   Titel. */
.ab-tab-rahmen:has(> .ab-liste) { padding-inline: 0.75rem; margin-inline: -0.75rem }
.ab-liste .ab-sp-t button::after {
  content: '→';
  display: inline-block;
  margin-left: 0.4em;
  font-family: var(--font-body);
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}
.ab-liste .ab-sp-t button:focus-visible::after { opacity: 1; transform: none }
.ab-liste tbody tr > * { transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) }
.ab-liste tbody tr.ist-gewaehlt > :first-child { box-shadow: calc(2px - 0.75rem) 0 0 var(--paper), -0.75rem 0 0 var(--accent) }
@media (hover: hover) {
  .ab-liste tbody tr:has(button) { cursor: pointer }
  .ab-liste tbody tr:has(button):hover > * { background: var(--surface-1) }
  .ab-liste tbody tr:has(button):hover > :first-child { box-shadow: -0.75rem 0 0 var(--surface-1) }
  .ab-liste tbody tr:has(button):hover > :last-child { box-shadow: 0.75rem 0 0 var(--surface-1) }
  .ab-liste tbody tr.ist-gewaehlt:hover > :first-child { box-shadow: calc(2px - 0.75rem) 0 0 var(--surface-1), -0.75rem 0 0 var(--accent) }
  .ab-liste tbody tr:hover .ab-sp-t button::after { opacity: 1; transform: none }

  /* Zahlen der Kantone: die Zeile wird hinterlegt, im Bild darüber
     leuchtet derselbe Kanton auf (ktZeige in abstimmungen.js) */
  .ab-kt-tab tbody tr > * { transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) }
  .ab-kt-tab tbody tr:hover > * { background: var(--surface-1) }
  .ab-kt-tab tbody tr:hover > :first-child { box-shadow: -0.75rem 0 0 var(--surface-1) }
  .ab-kt-tab tbody tr:hover > :last-child { box-shadow: 0.75rem 0 0 var(--surface-1) }
  .ab-kt-tab tbody tr:hover th { color: var(--accent-ink) }
}
@media (prefers-reduced-motion: reduce) {
  .ab-liste .ab-sp-t button::after, .ab-liste tbody tr > *, .ab-kt-tab tbody tr > *, .ab-blaettern button > [aria-hidden], .ab-zumbild > [aria-hidden], .ab-papier { transition: none }
}
.ab-sp-e.kommt { color: var(--accent-ink) }
.ab-leer { margin-top: 1rem; font-size: 0.95rem; color: var(--text-muted) }
.ab-kt-tab { margin-top: 0 }
.ab-kt-tab td, .ab-kt-tab tbody th { padding-top: 0.45rem; padding-bottom: 0.45rem; font-size: 0.92rem }

/* ── Mittlere und kleine Breiten ───────────────────────────────────────── */

@media (max-width: 960px) {
  .ab-v-grid, .ab-worum-grid, .ab-quellen { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 700px) {
  .ab-hero { min-height: 0 }
  .ab-hero h1 { font-size: 1.85rem; line-height: 1.12 }
  .ab-kopfzeile .pj-back { font-size: 0.78rem }
  .ab-bedienung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem }
  .ab-seg { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .ab-seg button {
    justify-content: space-between;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    border-right: 0;
    border-bottom: 1px solid var(--panel-line);
  }
  .ab-seg button:nth-child(odd) { border-right: 1px solid var(--panel-line) }
  .ab-seg button:nth-last-child(-n+2) { border-bottom: 0 }
  .ab-wahl select, .ab-such input { width: 100%; min-height: 2.75rem; font-size: 1rem }
  /* Suche neben dem Bereich wie bisher; gedruckt wird am Telefon über
     den Knopf unter «Worum es geht» */
  .ab-bed-rechts { display: contents }
  .ab-such { max-width: none }
  .ab-drucken { display: none }
  .ab-legende .ab-leg-achse { display: none }
  .ab-plot { flex: none; height: clamp(15rem, 68vw, 22rem); cursor: pointer }
  /* Am Telefon zwei Zeilen, aber ebenfalls fest: Titel oben, Angaben darunter */
  .ab-zeile { flex-wrap: wrap; row-gap: 0; white-space: normal; height: 3.75rem; padding-top: 0.45rem }
  .ab-z-t { flex: 1 1 100%; order: -1; white-space: nowrap }
  /* In Ruhe oben der Hinweis zum Tippen, darunter der Datenstand */
  .ab-z-q { flex: 1 1 100%; white-space: nowrap }
  .ab-z-n { display: none }
  span.ab-z-w { flex: 1 1 100%; order: -1; margin-left: 0 }
  .ab-lesen { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4) }
  .ab-quellen > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem }
  .ab-sp-rf, .ab-sp-st { display: none }
  .ab-dek button { padding: 0.65rem 0.55rem 0.55rem; min-height: 2.75rem }
}

@media (prefers-reduced-motion: reduce) {
  .ab-plot .puls.an { animation: none }
  .ab-kt-zahlen summary::before { transition: none }
}

/* ── Druck: das Gesprächsblatt ─────────────────────────────────────────
   Gedruckt wird ein A4-Blatt quer für eine Gesprächsrunde: oben links
   Kennzeile und Titel, oben rechts das Zeichen des Vereins, in der Mitte
   das ganze Bild, darunter Lesehilfe, Fragen, Platz für Notizen, Quellen
   und der Zweck des Vereins. Das Blatt hat seinen Rand selbst (@page ohne
   Rand): So druckt der Browser weder Adresse noch Datum dazu. Gedruckt
   wird hell, auch wenn die Seite dunkel steht.

   Das Bild wird vor dem Druck in genau der Grösse gezeichnet, die es auf
   dem Blatt hat; blattVor() in abstimmungen.js liest dafür die beiden
   Masse hier, in Millimetern. Ein Bild in Bildschirmgrösse würde auf dem
   Blatt gestaucht oder klein in die Mitte gesetzt. */

/* Breite und Höhe des Bilds; jede Zeile mehr auf dem Blatt geht von der
   Höhe ab: die markierte Vorlage, die Auswahl in Worten (blattMass) */
.ab-plot { --ab-blatt-b: 271; --ab-blatt-h: 103; --ab-blatt-h-markiert: 7; --ab-blatt-h-auswahl: 4 }
/* Die Kantone auf der zweiten Seite: linke Spalte, 271 − 92 − 12 mm (ktMass) */
.ab-kt-bild { --ab-blatt-b: 167; --ab-blatt-h: 76 }
.ab-blatt { display: none }

@media print {
  @page { size: A4 landscape; margin: 0 }

  :root,
  :root[data-theme="dark"] {
    color-scheme: light;
    --paper: #fff;
    --text: #14181C;
    --text-body: #33383E;
    --text-muted: #5E6268;
    --line: #D9D9D4;
    --line-strong: #A9A9A3;
    --accent: #B3231F;
    --accent-ink: #9E1B18;
    --accent-on-ink: #B3231F;
    /* Die Bühne wird hell: dieselben Regeln zeichnen schwarz auf weiss */
    --panel: #fff;
    --panel-text: #14181C;
    --panel-body: #33383E;
    --panel-muted: #5E6268;
    --panel-faint: #8C9095;
    --panel-line: #CFCFC9;
  }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important }
  body > :not(main), main > :not(.ab-hero):not(#vorlage), .ab-kopfzeile, .ab-bedienung, .ab-zeile,
  .ab-plot .puls, .ab-plot .ring-h,
  .ab-zumbild, .ab-v-wege, .ab-kt-tip { display: none !important }

  .ab-hero {
    box-sizing: border-box;
    /* ein Millimeter unter A4: Ein Rundungsrest brächte sonst ein leeres zweites Blatt */
    height: 209mm;
    min-height: 0;
    margin: 0;
    padding: 10mm 13mm 8mm;
    overflow: hidden;
    background: #fff;
    color: var(--text);
    border: 0;
    font-size: 8.5pt;
    line-height: 1.42;
  }
  .ab-hero-inner {
    max-width: none;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 10mm;
  }
  .ab-blatt { display: block }
  .ab-blatt[hidden] { display: none }

  /* Kopf: Kennzeile und Titel links, das Zeichen des Vereins rechts */
  .ab-blatt-kenn { grid-area: 1 / 1; letter-spacing: 0.01em; color: var(--text-muted) }
  .ab-hero h1 { grid-area: 2 / 1; max-width: none; margin: 1mm 0 0; font-size: 20pt; line-height: 1.1; color: var(--text) }
  .ab-blatt-marke { grid-area: 1 / 2 / 3 / 3; display: flex; align-items: center; gap: 3mm; text-align: right }
  .ab-blatt-marke p { display: flex; flex-direction: column; font-size: 8pt; line-height: 1.35; color: var(--text-muted) }
  .ab-blatt-marke b { font-family: var(--font-head); font-size: 10pt; font-weight: 600; color: var(--text) }
  .ab-blatt-marke img { width: 12.5mm; height: 12.5mm }

  /* Das Bild über die ganze Breite, in der Grösse gezeichnet, die es hier hat */
  /* min-height: auto, sonst drückt ein zu langer Fuss das Bild zusammen und
     die Zeilen laufen ineinander */
  .ab-bild { grid-area: 3 / 1 / 4 / 3; min-height: auto; margin-top: 4.5mm }
  .ab-bild-kopf { border-top: 0.75pt solid var(--text); padding-top: 1.6mm }
  .ab-zahl, .ab-legende { font-size: 8.5pt; color: var(--text-muted) }
  .ab-zahl b { font-weight: 600; color: var(--text) }
  .ab-legende i { -webkit-print-color-adjust: exact; print-color-adjust: exact }
  .ab-plot { flex: none; height: auto; min-height: 0; margin-top: 1.5mm }
  .ab-plot svg { position: static; width: 100%; height: auto }
  .ab-plot circle.p.a1 { stroke: #fff }
  .ab-plot.gefiltert circle.p.aus { opacity: 1 }
  .ab-plot.gefiltert circle.p.aus.a1 { fill: #D4D4CF; stroke: #fff }
  .ab-plot.gefiltert circle.p.aus.a0 { stroke: #C9C9C3 }

  /* Die markierte Vorlage, mit demselben roten Ring wie im Bild */
  .ab-blatt-wahl { margin-top: 2mm; color: var(--text-body) }
  .ab-blatt-wahl::before {
    content: '';
    display: inline-block;
    width: 2.4mm;
    height: 2.4mm;
    margin-right: 1.6mm;
    border: 0.9pt solid var(--accent);
    border-radius: 50%;
    vertical-align: -0.4mm;
  }
  .ab-blatt-wahl b { font-weight: 600; color: var(--accent-ink) }

  /* Unten drei Spalten: lesen, fragen, notieren; darunter Quellen und Zweck */
  .ab-blatt-fuss { grid-area: 4 / 1 / 5 / 3; align-self: end; margin-top: 4mm }
  .ab-blatt-spalten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 9mm;
    padding-top: 2.6mm;
    border-top: 0.75pt solid var(--text);
  }
  .ab-blatt-h { margin-bottom: 1.2mm; font-weight: 600; color: var(--text) }
  .ab-blatt-spalten p { color: var(--text-body) }
  .ab-blatt-spalten p + p { margin-top: 1.2mm }
  .ab-blatt-fragen { display: grid; gap: 1.3mm; list-style: none; counter-reset: frage }
  .ab-blatt-fragen li { display: grid; grid-template-columns: 4mm minmax(0, 1fr); color: var(--text-body); counter-increment: frage }
  .ab-blatt-fragen li::before { content: counter(frage); font-family: var(--font-head); color: var(--text-muted) }
  .ab-blatt-fragen li[hidden] { display: none }
  .ab-blatt-notizen span { display: block; height: 7mm; border-bottom: 0.5pt solid var(--line-strong) }
  /* Quellen und Adresse in einer Zeile, der Zweck des Vereins darunter über die ganze Breite */
  .ab-blatt-unten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 8mm;
    margin-top: 3mm;
    padding-top: 2mm;
    border-top: 0.5pt solid var(--line);
    font-size: 7.5pt;
    line-height: 1.45;
    color: var(--text-muted);
  }
  .ab-blatt-url { font-weight: 600; color: var(--text) }
  .ab-blatt-zweck { grid-column: 1 / -1 }

  /* ── Zweite Seite: die Vorlage mit allen Zahlen ── */
  /* Kopf über die ganze Breite wie auf der ersten Seite; darunter links
     die Eckwerte und die Kantone im Bild, rechts alle Kantone in Zahlen */
  .ab-vorlage {
    break-before: page;
    box-sizing: border-box;
    height: 209mm;
    margin: 0;
    padding: 10mm 13mm 8mm;
    overflow: hidden;
    background: #fff;
    border: 0;
    font-size: 8.5pt;
    line-height: 1.42;
  }
  .ab-v-grid {
    max-width: none;
    height: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92mm;
    grid-template-rows: auto auto auto auto auto auto auto 1fr auto;
    gap: 0 12mm;
    align-items: start;
  }
  .ab-v-text, .ab-v-kopf, .ab-kt { display: contents }
  .ab-v-grid > .ab-blatt-marke { grid-area: 1 / 2 / 4 / 3; justify-self: end }
  .ab-vorlage .section-eyebrow { grid-area: 1 / 1; margin: 0; font-size: 8.5pt; color: var(--text-muted) }
  .ab-v-titel { grid-area: 2 / 1; margin: 1mm 0 0; font-size: 17pt; line-height: 1.12; color: var(--text) }
  .ab-v-amtlich { grid-area: 3 / 1; max-width: none; margin-top: 1.5mm; font-size: 8.5pt; line-height: 1.42 }

  .ab-fakten {
    grid-area: 4 / 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 6mm;
    margin-top: 5mm;
    border-top: 0.75pt solid var(--text);
  }
  .ab-fakten > div { padding: 1.6mm 0 1.8mm; border-bottom: 0.5pt solid var(--line) }
  .ab-fakten dt { margin-bottom: 0.4mm; font-size: 7.5pt }
  .ab-fakten dd { font-size: 9.5pt; line-height: 1.32 }
  .ab-hinweis { grid-area: 5 / 1; max-width: none; margin-top: 3mm; padding-left: 2.5mm; border-left-width: 1.25pt; font-size: 8pt; line-height: 1.42 }

  .ab-kt-kopf { grid-area: 6 / 1; margin: 5mm 0 1mm; padding-top: 1.6mm; border-top: 0.75pt solid var(--text) }
  .ab-kt-kopf .ab-klein { font-size: 8.5pt }
  .ab-kt-bild { grid-area: 7 / 1; height: auto }
  .ab-kt-bild.leer { height: 0 }
  .ab-kt-bild svg { width: 100%; height: auto }
  .ab-kt-fuss { grid-area: 8 / 1; margin-top: 1.5mm; font-size: 8pt; line-height: 1.42 }

  /* Alle Kantone in Zahlen; der Knopf zum Aufklappen wird zur Überschrift */
  .ab-kt-zahlen { grid-area: 4 / 2 / 9 / 3; margin-top: 5mm; border-top: 0.75pt solid var(--text) }
  .ab-kt-zahlen summary { padding: 1.6mm 0 0.6mm; font-size: 8.5pt; font-weight: 600; color: var(--text); cursor: default }
  .ab-kt-zahlen summary::before { display: none }
  .ab-kt-tab thead th { padding: 0.6mm 0 0.7mm; border-bottom: 0.5pt solid var(--line-strong); font-size: 7pt; line-height: 1.2 }
  .ab-kt-tab td, .ab-kt-tab tbody th { padding: 0.65mm 0; border-bottom: 0.5pt solid var(--line); font-size: 7.5pt; line-height: 1.18 }
  .ab-kt-tab .r { padding-left: 3mm }
  .ab-kt-tab tbody th { color: var(--text) }

  .ab-v-unten { grid-area: 9 / 1 / 10 / 3; align-self: end }
}