/* Anne Fiedler — Komponenten
   Alle af-*-Klassen. Gegliedert per Kommentarblöcke — neue Regeln in den
   passenden Abschnitt einsortieren, nicht ans Dateiende anhängen.
   Reihenfolge: Typo-Helfer → Buttons → Kleinteile → Header → Hero →
   Sektionsbausteine (in Seitenreihenfolge) → Formulare → Footer →
   Seitenvorlagen (Umfrage, QR-Landing) → Responsive → Plugin-Kompatibilität.
   ================================================================== */

/* ================================================================== */
/* Typografie-Helfer                                                   */
/* ================================================================== */

.af-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--color-navy); letter-spacing: -0.01em; }
.af-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--color-navy); letter-spacing: -0.01em; }
.af-h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--color-navy); }
.af-h4 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--color-navy); }
.af-h5 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h5); line-height: var(--lh-snug); color: var(--color-navy); }
.af-h6 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h6); line-height: var(--lh-snug); color: var(--color-navy); }

/* Deutsche Komposita sind lang: „Datenschutzerklärung" passt in der
   Titelgröße nicht in eine 350px-Spalte und lief auf dem Handy über den
   Textrand hinaus — die Seite wurde dadurch 485px breit. Überlaufender TEXT
   macht kein breiteres Element, deshalb zeigt keine Element-Messung darauf;
   gefunden per Ausschlussverfahren im Browser.
   Trennung zuerst (html lang="de" liefert die Trennstellen), Umbruch im Wort
   nur als Netz, falls der Browser keine Trennmuster hat. */
.af-h1, .af-h2, .af-h3, .af-h4, .af-h5, .af-h6,
.af-hero__titel, .af-kopf__titel, .af-buergerdialog__titel {
  hyphens: auto;
  overflow-wrap: break-word;
}

.af-body  { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-ink); }
.af-small { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-small); line-height: 1.5; color: var(--color-muted); }
.af-label { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-navy); }
.af-wordmark { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: 15px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-navy); }

/* Magenta-Punkt — Brand-Signatur. Wird von main.js injiziert, nie manuell. */
.af-dot { color: var(--color-pink); }

/* ================================================================== */
/* Buttons                                                             */
/* ================================================================== */

.af-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.af-btn:focus-visible { outline: 2px solid var(--color-pink); outline-offset: 2px; }

.af-btn--primary { background: var(--color-navy); color: #fff; }
.af-btn--primary:hover { background: var(--color-navy-dark); color: #fff; }

.af-btn--accent  { background: var(--color-pink); color: #fff; }
.af-btn--accent:hover { box-shadow: var(--shadow-pink); transform: translateY(-1px); color: #fff; }

.af-btn--ghost { background: transparent; color: var(--color-navy); border: 1.5px solid var(--color-raised); }
.af-btn--ghost:hover { border-color: var(--color-navy); color: var(--color-navy); }
.af-btn--ghost.af-btn--auf-weiss { background: #fff; }

/* Auf Navy/Gradient-Flächen: halbtransparent weiß */
.af-btn--glas { background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.af-btn--glas:hover { background: rgba(255,255,255,0.24); color: #fff; }

.af-btn--sm { padding: 10px 18px; font-size: 13px; }

/* Textlink mit Magenta-Unterstrich (Design: „Alle Beiträge", „Nachricht schreiben") */
.af-textlink {
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--color-navy);
  border-bottom: 2px solid var(--color-pink);
  padding-bottom: 2px;
  text-decoration: none;
}
.af-textlink:hover { color: var(--color-pink); }

/* ================================================================== */
/* Pill / Badge / Eyebrow                                              */
/* ================================================================== */

.af-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
}
.af-pill--light {
  background: var(--color-surface-warm);
  color: var(--color-navy);
  border: 1px solid var(--color-raised);
  backdrop-filter: none;
}

.af-eyebrow {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-navy);
}
.af-eyebrow--pink { color: var(--color-pink); }
.af-auf-dunkel .af-eyebrow,
.af-eyebrow--hell { color: #fff; opacity: 0.85; }

/* ================================================================== */
/* Sektions-Kopf (Eyebrow + Titel + Lead, optional Aktion rechts)      */
/* ================================================================== */

.af-sektion--soft     { background: var(--color-surface-cool); }
.af-sektion--warm     { background: var(--color-surface-warm); }
.af-sektion--navy     { background: var(--color-navy); color: #fff; }
.af-sektion--gradient { background: var(--gradient-surface); color: #fff; }
.af-sektion--gradient-mirror { background: var(--gradient-surface-mirror); color: #fff; }

.af-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(24px, 4vw, 44px);
}
.af-kopf__text { max-width: 640px; }
.af-kopf__titel {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1-fluid);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  margin: 12px 0 14px;
}
.af-kopf__lead { font-size: 17px; line-height: var(--lh-body); color: var(--color-ink); margin: 0; }
/* Kopf des Kartenrasters (Über mich: „Mein Weg", „Wofür ich stehe").
   Der Entwurf setzt hier die H2-Stufe, nicht die H1-Stufe der Startseiten-
   sektionen. Und die Breitenbegrenzung gilt dem Lauftext: liegt sie auch auf
   der Überschrift, bricht „Erfahrung, die der Gemeinde nützt." auf zwei
   Zeilen — das Maß existiert für die Lesbarkeit des Absatzes, nicht für die
   Zeile darüber. */
.af-karten-kopf .af-kopf__text  { max-width: none; }
.af-karten-kopf .af-kopf__titel { font-size: var(--fs-h2-fluid); }
.af-karten-kopf .af-kopf__lead  { max-width: 720px; }
/* Kopf der Termine-Sektion — dieselbe Ursache wie eine Zeile höher, andere
   Stelle: „Kommen Sie mit mir ins Gespräch." bricht am 640px-Deckel um, der
   Entwurf (Startseite A.dc.html, #termine) gibt dem Kopf 720px. Der Grad
   stimmt hier bereits, nur das Maß nicht. Die 640px sind aber nicht global
   falsch — die Themen-Sektion setzt im Entwurf ebenfalls 640px, weil dort
   rechts der Textlink mitsteht. Darum wieder eine Kopfklasse. */
.af-termine-kopf .af-kopf__text { max-width: none; }
.af-termine-kopf .af-kopf__lead { max-width: 720px; }
.af-sektion--navy .af-kopf__titel,
.af-sektion--gradient .af-kopf__titel,
.af-sektion--gradient-mirror .af-kopf__titel { color: #fff; }
.af-sektion--navy .af-kopf__lead,
.af-sektion--gradient .af-kopf__lead,
.af-sektion--gradient-mirror .af-kopf__lead { color: rgba(255,255,255,0.92); }

/* ================================================================== */
/* Header                                                              */
/* ================================================================== */

/* Adminbar-Versatz als EIN Maß für alle klebenden Leisten. Ohne eingeloggte
   Redaktion 0, sonst die Kernvariable (32px, ab 782px abwärts 46px) — so
   muss kein Theme-Media-Query die WordPress-Breakpoints nachbauen.
   Ausnahme ist der dritte Breakpunkt: unter 600px stellt der Kern die
   Leiste auf `position: absolute`, sie scrollt also mit weg. Ein Versatz
   auf eine Leiste, die gar nicht mehr da ist, hinterlässt beim Scrollen
   einen Spalt über dem Kopf — dort also 0 (so hält es auch das
   abae-Theme in `.kopfzeile`). Der Kern bleibt unangetastet. */
body { --af-adminbar: 0px; }
body.admin-bar { --af-adminbar: var(--wp-admin--admin-bar--height, 32px); }
@media screen and (max-width: 600px) {
  body.admin-bar { --af-adminbar: 0px; }
}

.af-header {
  position: sticky;
  /* Unter der Adminbar, nicht dahinter (Vorbild: abae-Theme, .kopfzeile). */
  top: var(--af-adminbar);
  z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid var(--color-raised);
  /* Feine Magenta-Linie unter dem Header (Design) */
  box-shadow: 0 1px 0 rgba(229, 0, 119, 0.35);
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease,
              transform 0.26s ease;
}
/* Runterscrollen gibt den Schirm frei, Hochscrollen holt den Kopf sofort
   zurück (Schaltung in main.js). Auf Mobil ist der Gewinn am größten — dort
   frisst die klebende Leiste sonst ein Sechstel der Höhe. */
.af-header.is-hidden { transform: translateY(-100%); }
.af-header.is-scrolled {
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid var(--color-pink);
  background: rgba(255,255,255,0.97);
}

.af-header--solid {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.af-header--solid.is-scrolled { background: #fff; }

.af-header--transparent-top {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.af-header--transparent-top .af-nav a { color: #fff; }
.af-header--transparent-top.is-scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid var(--color-pink);
}
.af-header--transparent-top.is-scrolled .af-nav a { color: var(--color-navy); }

.af-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--gutter);
  max-width: var(--seite-max);
  margin: 0 auto;
}
/* Der Schriftzug ist 1348:361 breit — bei voller Höhe also 246px. Wird es
   eng, muss er kleiner werden, nicht schmaler: mit fester `height` staucht
   das Flex-Layout ihn in der Breite und verzerrt das Signet. Darum
   `height: auto` + `max-height` — dann zieht die Höhe beim Schrumpfen mit
   und das Verhältnis bleibt. `min-width: 0` erlaubt dem Kasten überhaupt
   erst, unter seine Inhaltsbreite zu gehen.
   Hinweis: Die Filterleiste rechnet ihren Sitz aus --logo-hoehe; sie klebt
   unter 940px ohnehin nicht mehr, die Maße dürfen dort auseinanderlaufen. */
.af-header__brand { display: flex; align-items: center; text-decoration: none; min-width: 0; }
.af-header__brand .custom-logo-link { display: flex; align-items: center; min-width: 0; }
.af-header__brand img,
.af-header__brand .custom-logo {
  height: auto;
  width: auto;
  max-height: var(--logo-hoehe);
  max-width: 100%;
  display: block;
}

/* Navigation (wp_nav_menu-Ausgabe) */
.af-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; align-items: center; }
.af-nav a {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  padding: 6px 0;
  text-decoration: none;
  transition: color 0.18s;
}
.af-nav a:hover,
.af-nav a:focus-visible { color: var(--color-pink); }
.af-nav li.current-menu-item > a,
.af-nav li.current-page-ancestor > a { color: var(--color-pink); font-weight: var(--fw-bold); }

/* Die Aktionen geben nicht nach — sie sind schon das Minimum. Platz macht
   stattdessen das Logo (siehe oben) und ab 620px die kurze Beschriftung. */
.af-header__aktionen { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.af-header__cta { white-space: nowrap; }
.af-header__cta-kurz { display: none; }

/* Mobile-Menü */
.af-header__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-raised);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-navy);
  cursor: pointer;
}
.af-header__toggle .af-icon { width: 22px; height: 22px; }

.af-mobilnav {
  display: none;
  flex-direction: column;
  padding: 8px var(--gutter) 16px;
  border-top: 1px solid var(--color-raised);
  background: rgba(255,255,255,0.98);
}
.af-mobilnav.is-open { display: flex; }
.af-mobilnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.af-mobilnav a {
  display: block;
  padding: 12px 0;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-raised);
  text-decoration: none;
}
.af-mobilnav li:last-child a { border-bottom: 0; }


/* ================================================================== */
/* Hero (Startseite, Split 38,2/61,8)                                  */
/* ================================================================== */

.af-hero {
  display: grid;
  grid-template-columns: 38.2% 61.8%;
  align-items: stretch;
}
.af-hero__inhalt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px) var(--gutter);
  background: var(--color-surface-cool);
}
.af-hero__eyebrow {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pink);
}
.af-hero__titel {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1-fluid);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-navy);
  margin: 14px 0 18px;
  text-wrap: pretty;
  hyphens: auto;
}
.af-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-ink);
  margin: 0;
  max-width: 46ch;
}
.af-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 26px; }

.af-hero__foto {
  position: relative;
  min-height: clamp(300px, 40vw, 560px);
  background: var(--color-navy);
  overflow: hidden;
}
/* Der Hero-Rahmen hat kein festes Verhältnis (nur min-height, das Raster
   streckt ihn), deshalb hier object-position statt der gerechneten Rahmung
   aus af_bild().

   Die Standardwerte sind der Zuschnitt aus dem Entwurf (Startseite A):
   „Anne größer durch Anschnitt, Rathausdach bleibt oben vollständig" —
   54 % von links, oben bündig, 1,2× herangeholt. Setzt jemand am Bild einen
   Fokuspunkt, überschreibt af_bild_fuellend() Position UND Zoom (auf 1) —
   die redaktionelle Entscheidung sticht dann den Entwurfs-Standard. */
.af-hero__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--af-fokus-x, 54%) var(--af-fokus-y, 0%);
  transform: scale(var(--af-zoom, 1.2));
  transform-origin: var(--af-fokus-x, 54%) var(--af-fokus-y, 0%);
  display: block;
}
/* Mobil kein Anschnitt: schmaler Ausschnitt plus Zoom würde die Gruppe
   zerschneiden. Stattdessen festes 3:2 und mittig.
   Das Verhältnis trägt hier das BILD, nicht der Kasten. Der Kasten hat mobil
   kein Kind im Fluss — Bild und Pills liegen beide absolut —, und ein leeres
   Rasterelement, dessen Höhe allein aus `aspect-ratio` käme, bemisst WebKit
   nicht: Auf dem iPhone blieb die Rasterzeile 0px hoch und das Hero-Foto
   fehlte ganz. Chromium rechnet es aus, deshalb war es im Prüflauf
   unsichtbar (gemessen: WebKit 402x0, Chromium 402x268).
   Mit `position: static` am Bild kommt die Höhe aus echtem Inhalt und die
   Regel steht in jeder Engine. Die Pills bleiben absolut — ihr Bezug ist
   weiterhin der `position: relative`-Kasten. */
@media (max-width: 940px) {
  .af-hero__foto { min-height: 0; aspect-ratio: auto; }
  .af-hero__foto img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    transform: none;
    object-position: 50% 50%;
  }
}
.af-hero__pills {
  position: absolute;
  left: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.af-hero__pill {
  display: inline-block;
  background: var(--gradient-surface-mirror);
  opacity: 0.82;
  color: #fff;
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  padding: 10px 16px;
  border-radius: 4px;
}

/* ================================================================== */
/* Wahltag-Band (Navy-Leiste mit Countdown)                            */
/* ================================================================== */

.af-wahltag {
  background: var(--color-navy);
  color: #fff;
  padding: 20px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  justify-content: space-between;
}
.af-wahltag__info { display: flex; align-items: center; gap: 14px; }
.af-wahltag__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.14);
}
.af-wahltag__icon .af-icon { width: 22px; height: 22px; }
.af-wahltag__label { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.af-wahltag__datum { font-weight: var(--fw-bold); font-size: 17px; margin-top: 3px; }

/* ================================================================== */
/* Termine (Gradient-Card + Liste)                                     */
/* ================================================================== */

/* Goldener Schnitt statt halbe-halbe: Foto plus Gradient-Karte führen mit
   61,8 %, die Terminliste antwortet mit 38,2 % — dasselbe Verhältnis wie im
   Hero, nur seitenverkehrt. Die Zahlen stehen als `fr`, nicht als Prozent:
   so zieht das Raster erst den Abstand ab und teilt dann, sonst liefe die
   Zeile um genau diesen Abstand über.
   Umbruch bei 1040px statt beim üblichen 940px, weil der schmalere Anteil
   früher an seine Grenze kommt: Bei 1040px Fensterbreite bleiben der Liste
   rund 350px, und darunter fallen im Terminfeld (84px Datum + Text + 40px
   Pfeil) schon kurze Ortsnamen in die zweite Zeile. */
.af-termine-split {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
}
@media (max-width: 1040px) {
  .af-termine-split { grid-template-columns: minmax(0, 1fr); }
}

/* Foto plus Gradient-Karte bilden EIN Element (Entwurf Startseite A):
   Radius und Schatten sitzen deshalb außen, die Karte selbst hat beides
   nicht mehr — sonst runden zwei Kanten übereinander.
   Der Kasten hieß bis 2.9.0 `af-dialog` — genau wie das <dialog>-Modal der
   QR-Landing weiter unten. Dessen `width: min(600px, …)` gewann und schob
   die Karte aus ihrer Rasterspalte unter die Terminliste. Name bleibt
   darum am Inhalt (Bürgerdialog), nicht am Bauteiltyp. */
.af-buergerdialog {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.af-buergerdialog__bild img,
.af-buergerdialog__bild .af-bild {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.af-buergerdialog__karte {
  background: var(--gradient-surface);
  color: #fff;
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.af-buergerdialog__eyebrow { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.af-buergerdialog__titel {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.1;
  margin: 14px 0;
  color: #fff;
}
.af-buergerdialog__text { font-size: 16px; line-height: 1.6; opacity: 0.93; margin: 0 0 22px; max-width: 44ch; }
.af-buergerdialog__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

.af-termine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(54,85,125,0.08);
}
.af-termine__item {
  display: grid;
  grid-template-columns: 84px 1fr 40px;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-raised);
  transition: background 0.15s;
}
.af-termine__item:last-child { border-bottom: 0; }
.af-termine__item:hover { background: var(--color-surface-cool); }
.af-termine__date {
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius-md);
  text-align: center;
  padding: 10px 0 8px;
}
.af-termine__day { font-weight: var(--fw-bold); font-size: 22px; line-height: 1; }
.af-termine__mon { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 4px; opacity: 0.85; }
.af-termine__cat { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-pink); }
.af-termine__title { font-weight: var(--fw-bold); font-size: 16px; color: var(--color-navy); margin-top: 4px; }
.af-termine__ort { font-size: 13px; color: var(--color-muted); margin-top: 4px; }
.af-termine__action {
  width: 36px; height: 36px;
  border-radius: var(--radius-round);
  background: var(--color-surface-cool);
  color: var(--color-navy);
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.af-termine__action:hover { background: var(--color-pink); color: #fff; }
.af-termine-abbinder { margin: 16px 0 0; font-size: 15px; color: var(--color-ink); }

/* ================================================================== */
/* Leitbild (Zitat-Split auf Weiß)                                     */
/* ================================================================== */

/* Navy-Fläche mit Magenta-Lichtkegel oben rechts. Kein Zweifarb-Verlauf,
   sondern Navy plus ein Radial — die Gradient-Richtungsregel gilt hier
   also nicht. Der Kegel ragt bewusst über die Kante hinaus. */
.af-leitbild-band {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  color: #fff;
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(64px, 8vw, 120px);
}
.af-leitbild-band__schein {
  position: absolute;
  top: -30%;
  right: -10%;
  width: min(760px, 70vw);
  height: min(760px, 70vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 0, 119, 0.34) 0%, rgba(229, 0, 119, 0) 68%);
  pointer-events: none;
}
.af-leitbild {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}
.af-leitbild__eyebrow { color: rgba(255, 255, 255, 0.82); }
.af-leitbild__zitat {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 20px 0 clamp(32px, 4vw, 48px);
  text-wrap: balance;
}
/* Kein Grid: Der Text soll die Restbreite fluten, die Personen-Spalte bleibt
   schmal. flex-basis mit wrap macht genau das und kippt sauber. */
.af-leitbild__unten { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: flex-start; }
.af-leitbild__text {
  flex: 1 1 520px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
  text-wrap: pretty;
}
.af-leitbild__text strong { color: #fff; font-weight: var(--fw-bold); }
.af-leitbild__karte {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-top: 2px solid var(--color-pink);
  padding-top: 20px;
}
.af-leitbild__person { display: flex; align-items: center; gap: 16px; }
.af-leitbild__portrait {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-round);
  overflow: hidden;
  flex: none;
  background: rgba(255, 255, 255, 0.12);
}
.af-leitbild__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-leitbild__wer { display: flex; flex-direction: column; }
.af-leitbild__name { font-weight: var(--fw-bold); font-size: 15px; color: #fff; }
.af-leitbild__rolle { font-size: 13px; color: rgba(255, 255, 255, 0.82); margin-top: 2px; }
.af-leitbild__aktionen { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ================================================================== */
/* Über-mich-Split (Foto + Text)                                       */
/* ================================================================== */

.af-ueber {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
/* Verhältnis kommt als --af-ratio aus der Format-Registry (Format „portrait",
   Varianten 3:4 und 1:1 als Override im Block) — hier steht nur noch, wie der
   Rahmen aussieht. Die Bildlage regelt der Fokuspunkt, nicht mehr ein fester
   object-position-Wert. */
.af-ueber__foto {
  border-radius: var(--radius-lg);
  background: var(--color-surface-cool);
}
.af-ueber__foto--hoch { background: var(--color-navy); }
.af-ueber__titel {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2-fluid);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  margin: 14px 0 18px;
}
/* Wenn der Block den Seitenkopf stellt (Über mich), trägt er die Seiten-H1
   und damit die Displaygröße statt der H2-Stufe. */
.af-ueber__titel--seitenkopf {
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.af-ueber__lead { font-size: 18px; font-weight: var(--fw-semibold); color: var(--color-navy); margin: 0 0 14px; }
.af-ueber__text { font-size: 16px; line-height: 1.6; color: var(--color-ink); margin: 0 0 24px; }
.af-ueber__text strong { color: var(--color-navy); }
.af-ueber__aktionen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ================================================================== */
/* Themen (Kachel-Grid, Anker-Pills, Detail-Sektionen)                 */
/* ================================================================== */

/* ALLES ODER NICHTS: Die fünf Kacheln stehen entweder alle nebeneinander
   oder alle untereinander. Kein 3+2, keine Waisenzeile. Deshalb feste fünf
   Spalten statt auto-fit — auto-fit erzeugt genau die Zwischenstufen, die
   die Regel verbietet.

   Der Umschaltpunkt ist gerechnet, nicht geraten. Eine Kachel darf nie
   schmaler werden als ihre längste Titelzeile: 9 em der Titelgröße plus
   44px Innenabstand. Bei 1240px Fensterbreite bleiben nach Seitenrand
   (2 × 4vw) und vier 16px-Lücken rund 215px je Kachel, die Titelgröße
   liegt dort bei ihrem 18px-Boden — also 9 × 18 + 44 = 206px. Darunter
   reicht es nicht mehr, dann kippen alle. */
.af-themen-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1240px) {
  .af-themen-grid { grid-template-columns: minmax(0, 1fr); }
  .af-themen { min-height: 0; }
}
.af-themen {
  background: var(--tile-standard);
  color: #fff;
  border-radius: 12px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 260px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  /* Bezugsgröße für den Titel — siehe unten. */
  container-type: inline-size;
}
.af-themen:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(54,85,125,0.18); color: #fff; }
.af-themen--alt { background: var(--tile-alt); }
.af-themen--green { background: var(--color-green); }
/* Der Titel ist im Markup zweizeilig gesetzt (template-parts/themen-kachel.php),
   die längste Zeile muss also in die Kachel passen: „Digitalisierung &" und
   „Ortsentwicklung." sind rund 8,6 em breit.
   Das frühere Maß (clamp mit 26px Deckel, aus dem Entwurf übernommen) maß das
   FENSTER — die Kachel wächst aber nur bis 1440px Seitenbreite mit und steht
   dann fest bei 208px Textbreite. Auf breiteren Schirmen wuchs die Schrift
   weiter: „Ortsentwicklung." lief über die Kante, und „Digitalisierung &"
   rutschte in eine dritte Zeile, weil das „&" allein umbrach.
   Jetzt misst die Schrift die Kachel (cqi = 1 % ihrer Innenbreite): 10,5cqi
   ergibt bei 208px rund 22px, die längste Zeile hat damit ~10 % Luft. Die
   erste Zeile ist der Rückfall für Browser ohne Container-Queries.
   Silbentrennung als Netz für künftige, längere Themennamen. */
.af-themen__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(17px, 1.5vw, 22px);
  font-size: clamp(17px, 10.5cqi, 23px);
  hyphens: auto;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
  text-wrap: pretty;
}
.af-themen__text { font-size: 14px; line-height: 1.55; opacity: 0.9; color: #fff; margin: 0; }
/* Fußlinie sitzt unten — dadurch stehen sie über alle fünf Kacheln auf
   einer Höhe, sofern der Titel überall zweizeilig bleibt. */
.af-themen__link {
  margin-top: auto;
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 10px;
  text-decoration: none;
}

/* Anker-Pills (Themenseite) */
.af-themen-anker { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 3vw, 36px); }
.af-themen-anker a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--color-raised);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  text-decoration: none;
}
.af-themen-anker a:hover { border-color: var(--color-pink); }
.af-themen-anker .af-icon { color: var(--color-pink); }

/* ================================================================== */
/* Persönlich — Langtext + Faktenkarte (Über mich)                     */
/* ================================================================== */

.af-persoenlich {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.af-persoenlich__titel {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2-fluid);
  line-height: 1.1;
  color: var(--color-navy);
  margin: 12px 0 16px;
  text-wrap: pretty;
}
.af-persoenlich__intro { font-size: 17px; line-height: 1.7; color: var(--color-ink); margin: 0; text-wrap: pretty; }
.af-persoenlich__intro strong { color: var(--color-navy); }
/* Die Zwischenüberschrift trägt den Abstand zum vorherigen Block. Dadurch
   funktionieren Folgeabsätze ohne eigenen Titel ganz ohne Sonderregel. */
.af-persoenlich__untertitel {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 20px;
  color: var(--color-navy);
  margin: 28px 0 10px;
}
.af-persoenlich__absatz { font-size: var(--fs-body); line-height: 1.7; color: var(--color-ink); margin: 0 0 12px; text-wrap: pretty; }
.af-persoenlich__schluss { font-size: 17px; font-weight: var(--fw-bold); line-height: 1.6; color: var(--color-navy); margin: 20px 0 0; }

.af-persoenlich__karte {
  background: #fff;
  border: 1px solid var(--color-raised);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 32px);
  box-shadow: var(--shadow-md);
}
.af-persoenlich__karte-titel {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: 1.15;
  color: var(--color-navy);
  margin: 12px 0 20px;
}
.af-fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.af-fakten li { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--color-raised); }
.af-fakten__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-pink);
}
.af-fakten__wert { font-size: 15px; line-height: 1.65; color: var(--color-ink); }
/* „Vereine" steht als letztes Faktum und leitet die Mitgliedschaften ein —
   die Pillen darunter sind die Aufzählung zu genau dieser Zeile. Deshalb
   endet die Liste hier ohne Trennlinie, und der Abstand ist kurz gehalten:
   41px wie zwischen den übrigen Zeilen würden die beiden auseinanderreißen. */
.af-fakten li:last-child { padding-bottom: 0; border-bottom: 0; }
.af-persoenlich__mitglied { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.af-pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* Stille Pille: reines Etikett ohne Aktion — deshalb kein Hover-Zustand. */
.af-pill-still {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  background: var(--color-surface-cool);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
}

/* Themen-Detail — Entwurf „Themen B" (Design-Projekt, Themen B.dc.html):
   Gradient-Karten auf kühler Fläche. Icon-Kachel und Nummer sind entfallen. */
.af-themen-band {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 32px);
  padding: clamp(32px, 4.5vw, 64px) clamp(20px, 4vw, 56px);
  background: var(--color-surface-cool);
}
.af-thema-detail {
  /* Der Entwurf zeichnet 45deg von Navy nach Magenta. Gespiegelt auf 225deg
     mit Magenta zuerst ergibt exakt dasselbe Bild — aber in der Richtung,
     die das Design-System vorschreibt (Magenta startet, Navy endet). */
  background: linear-gradient(225deg, #E50077 -2%, #36557D 98%);
  border-radius: 20px;
  padding: clamp(26px, 3.4vw, 48px);
  box-shadow: var(--shadow-lg);
  scroll-margin-top: 104px;
}
.af-thema-detail__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(26px, 3.4vw, 48px);
  align-items: start;
}
.af-thema-detail__titel {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2-fluid);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.af-thema-detail__text { font-size: 17px; line-height: 1.65; color: #fff; margin: 0; max-width: 52ch; text-wrap: pretty; }
/* Auf der Gradientfläche trägt die Karte sich selbst — Rand und Schatten
   wären doppelte Abgrenzung. */
.af-thema-detail__karte {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px);
}
.af-thema-detail__karte-label { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-navy); }
.af-punkte { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.af-punkte li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-ink);
}
.af-punkte li::before {
  content: '';
  width: 20px; height: 2px;
  background: var(--color-pink);
  margin-top: 11px;
  border-radius: 1px;
}
/* Freistehend statt in einer Karte: größere Schrift, und eine Trennlinie je
   Zeile, weil die weiße Fläche sonst keine Gliederung hergibt. */
.af-punkte--gross { margin: 0; gap: 16px; }
.af-punkte--gross li {
  font-size: 16.5px;
  line-height: var(--lh-body);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-raised);
}
.af-punkte--gross li::before { margin-top: 12px; }

/* ================================================================== */
/* Erste 100 Tage (Abschluss der Themenseite)                          */
/* ================================================================== */

.af-hundert__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.af-hundert__titel {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2-fluid);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-navy);
  margin: 14px 0 0;
  text-wrap: balance;
}
.af-hundert__lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-ink);
  margin: 18px 0 0;
  max-width: 40ch;
}

/* ================================================================== */
/* Bildrahmen (Zuschnitt um den Fokuspunkt)                            */
/* ================================================================== */

/* Markup kommt aus af_bild() (inc/bilder.php). Das Bild wird dort absolut
   positioniert: --af-w/--af-h/--af-l/--af-t sind serverseitig gerechnete
   Prozentwerte relativ zum Rahmen, damit der Fokuspunkt im Ausschnitt
   bleibt. Der Zoom pro Format ließe sich mit object-position allein nicht
   abbilden, deshalb dieser Weg. Die Fallback-Werte plus object-fit greifen
   nur, wenn die Bildmaße in der Mediathek fehlen — dann steht das Bild
   mittig wie früher, statt verzerrt. */
.af-bild {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--af-ratio, 16 / 9);
  background: var(--color-surface-cool);
}
.af-bild__img {
  position: absolute;
  left: var(--af-l, 0);
  top: var(--af-t, 0);
  width: var(--af-w, 100%);
  height: var(--af-h, 100%);
  max-width: none;
  display: block;
  object-fit: cover;
}

/* ================================================================== */
/* Beitrags-Karten (Aktuelles)                                         */
/* ================================================================== */

.af-karten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
/* Kein Kartenrahmen (Entwurf Startseite A): Nur das Bild ist gerundet, der
   Text steht darunter auf der Seitenfläche. Weniger Kanten pro Karte, das
   Raster wirkt dadurch ruhiger. Der Hover fasst deshalb das Bild an, nicht
   einen Kasten, den es nicht mehr gibt. */
.af-beitrag {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.af-beitrag__bild {
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.af-beitrag:hover .af-beitrag__bild { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.af-beitrag:hover { color: inherit; }
/* Das Bild ist ein .af-bild-Rahmen (siehe oben) — seine Höhe kommt aus
   --af-ratio, nicht aus einem festen Pixelwert. Ein fester Wert schnitte
   quer zum eingestellten Ausschnitt ein zweites Mal. Ohne Beitragsbild
   bleibt der leere Rahmen als kühle Fläche stehen, damit die Karten im
   Raster gleich hoch beginnen. */
.af-beitrag__bild { flex: 0 0 auto; }
/* Ohne Kartenrahmen kein seitlicher Innenabstand — der Text steht bündig
   unter der linken Bildkante (Entwurf: padding 18px 0 0). */
.af-beitrag__body { padding: 18px 0 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* Datum und (nur in der Beitragsliste) Kategorie-Chip in einer Zeile. */
.af-beitrag__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.af-beitrag__datum { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-pink); }
.af-beitrag__thema {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  background: var(--color-surface-cool);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
}
.af-beitrag__titel { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 18px; line-height: 1.25; color: var(--color-navy); }
.af-beitrag__text { font-size: 14.5px; line-height: 1.55; color: var(--color-ink); }
.af-beitrag__mehr {
  margin-top: auto;
  padding-top: 12px;
  font-weight: var(--fw-bold);
  font-size: 13px;
  color: var(--color-navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ================================================================== */
/* Beitragsliste „Aktuelles" (Kopf, Filterleiste, Blättern)            */
/* ================================================================== */

/* Kopf: eigener Rhythmus statt --abschnitt-y, weil direkt darunter die
   Filterleiste ansetzt (Entwurf Aktuelles.dc.html). */
.af-archiv-kopf { padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(28px, 3.5vw, 44px); }
.af-archiv-kopf__text { max-width: 720px; }
.af-archiv-kopf__titel {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-navy);
  margin: 14px 0 18px;
  text-wrap: balance;
}
.af-archiv-kopf__lead { font-size: clamp(17px, 1.6vw, 19px); line-height: var(--lh-body); color: var(--color-ink); margin: 0; }

/* Filterleiste — klebt unter dem Header. Der Abstand ist gerechnet, nicht
   geraten: 14px Innenabstand + Logohöhe (Customizer!) + 14px + 1px Linie. */
.af-filter {
  position: sticky;
  top: calc(var(--af-adminbar) + var(--logo-hoehe) + 29px);
  z-index: 40;
  transition: top 0.26s ease;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px var(--gutter);
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid var(--color-raised);
}
/* Fährt der Kopf beim Runterscrollen weg, rückt die Filterleiste nach oben
   nach — sonst klaffte über ihr die Lücke, wo der Kopf war. Die Adminbar
   bleibt stehen, ihr Maß bleibt drin. */
.af-header.is-hidden ~ #main .af-filter { top: var(--af-adminbar); }

.af-filter__suche {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 300px;
  max-width: 420px;
  padding: 0 14px;
  background: #fff;
  border: 1.5px solid var(--color-raised);
  border-radius: var(--radius-md);
}
.af-filter__suche:focus-within { border-color: var(--color-navy); }
.af-filter__suche input {
  flex: 1;
  min-width: 0;
  padding: 13px 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-ink);
}
.af-filter__suche input::placeholder { color: var(--color-muted); }
.af-filter__suche input::-webkit-search-cancel-button { display: none; }
.af-filter__lupe,
.af-filter__leeren {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-navy);
  cursor: pointer;
}
.af-filter__lupe:hover,
.af-filter__leeren:hover { color: var(--color-pink); }
.af-filter__lupe .af-icon,
.af-filter__leeren .af-icon { width: 19px; height: 19px; }

.af-filter__themen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.af-filter__pill {
  padding: 9px 15px;
  border: 1.5px solid var(--color-raised);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--color-navy);
  font-weight: var(--fw-bold);
  font-size: 13px;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.af-filter__pill:hover { border-color: var(--color-navy); color: var(--color-navy); }
.af-filter__pill.is-aktiv { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

.af-filter__auswahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.af-filter__auswahl select {
  padding: 11px 12px;
  border: 1.5px solid var(--color-raised);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  cursor: pointer;
}

/* Liste: Trefferzeile, Raster, Leermeldung */
.af-archiv { padding-top: clamp(28px, 3.5vw, 44px); padding-bottom: clamp(56px, 7vw, 96px); }
.af-archiv__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(22px, 3vw, 32px);
}
.af-archiv__treffer { font-size: 15px; color: var(--color-ink); }
.af-archiv__reset { display: inline-flex; align-items: center; gap: 8px; }
.af-archiv__reset .af-icon { width: 18px; height: 18px; }
.af-archiv__leer { max-width: 620px; }
.af-hinweis__titel { font-weight: var(--fw-bold); color: var(--color-navy); margin-bottom: 4px; }

/* auto-fill statt auto-fit: Eine einzelne Karte soll ihre Breite behalten,
   nicht über das ganze Raster laufen (bei scharf gefilterter Liste sichtbar). */
.af-karten-grid--archiv {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
}

/* Blättern — nummeriert (paginate_links), Pfeile am Rand bleiben auch am
   Anfang und Ende stehen; sie sind dort ausgegraut statt zu verschwinden. */
.af-blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(36px, 4.5vw, 56px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--color-raised);
}
.af-blaettern .page-numbers,
.af-blaettern__pfeil {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--color-raised);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-navy);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 14px;
  text-decoration: none;
}
.af-blaettern__pfeil { width: 40px; padding: 0; }
.af-blaettern a.page-numbers:hover,
.af-blaettern a.af-blaettern__pfeil:hover { border-color: var(--color-navy); }
.af-blaettern .page-numbers.current { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.af-blaettern .page-numbers.dots { border-color: transparent; }
.af-blaettern__pfeil.is-aus { color: var(--color-raised); }
.af-blaettern .af-icon { width: 18px; height: 18px; }

/* Allgemeine Info-Karten (Stationen, Werte) */
.af-karte {
  background: var(--color-surface-cool);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.af-karte--warm { background: var(--color-surface-warm); }
/* Akzentkarte ohne seitliche Kante — Entscheidung 2026-08-13, der frühere
   3px-Magenta-Balken ist aus dem Design-System entfernt. */
.af-karte--akzent { padding: 26px; }
.af-karte__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-navy);
  color: #fff;
}
.af-karte__icon .af-icon { width: 22px; height: 22px; }
.af-karte__titel { font-weight: var(--fw-bold); font-size: 17px; color: var(--color-navy); }
.af-karte--akzent .af-karte__titel { font-family: var(--font-display); font-size: 20px; }
.af-karte__text { font-size: 15px; line-height: 1.55; color: var(--color-ink); }

/* ================================================================== */
/* Zitat-Band („Warum ich kandidiere")                                 */
/* ================================================================== */

/* Eigener Flächentyp aus dem Seiten-Projekt (Ueber-mich.dc.html), nicht aus
   dem Design-System: ein Navy-TONverlauf mit einem Magenta-Lichtkegel
   darüber. Er ersetzt hier den Marken-Gradienten Magenta→Navy — und
   verletzt dessen Richtungsregel nicht, weil er gar kein Zweifarb-Verlauf
   ist, sondern Navy-Tiefe plus ein Radial als Licht. */
.af-zitat-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #3D6191 0%, #36557D 52%, #2F4666 100%);
  color: #fff;
}
.af-zitat-band__schein {
  position: absolute;
  top: -45%;
  left: 50%;
  transform: translateX(-50%);
  width: 170%;
  height: min(1100px, 90vw);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(229, 0, 119, 0.92) 0%,
    rgba(229, 0, 119, 0.58) 34%,
    rgba(229, 0, 119, 0.20) 58%,
    rgba(229, 0, 119, 0) 78%);
  pointer-events: none;
}
.af-zitat-band > *:not(.af-zitat-band__schein) { position: relative; }

.af-zitat {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

/* Zweiter Teil des Bandes: „Wie ich das schaffen will" */
.af-wie {
  max-width: 1080px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.af-wie__titel {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.15;
  margin: 0 0 8px;
  text-align: center;
  color: #fff;
}
.af-wie__lead {
  font-size: var(--fs-body);
  line-height: 1.6;
  margin: 0 auto clamp(28px, 3.5vw, 40px);
  max-width: 60ch;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}
.af-wie__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.af-wie__karte {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.af-wie__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.af-wie__icon .af-icon { width: 22px; height: 22px; }
.af-wie__karte-titel { font-weight: var(--fw-bold); font-size: 17px; color: #fff; }
.af-wie__karte-text { font-size: 15px; line-height: 1.6; color: #fff; }
.af-zitat__text {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.2;
  margin: 20px 0 0;
  color: #fff;
  text-wrap: pretty;
}
.af-zitat__signatur {
  border-top: 2px solid #fff;
  display: inline-flex;
  flex-direction: column;
  margin-top: 28px;
  padding-top: 14px;
}
.af-zitat__name { font-weight: var(--fw-bold); font-size: 18px; }
.af-zitat__rolle { font-size: 12px; opacity: 0.85; margin-top: 4px; }

/* ================================================================== */
/* Instagram-Raster (Markup rendert af-instagram-feed-Plugin)          */
/* ================================================================== */

.af-ig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.af-ig-grid__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface-cool);
  display: block;
}
.af-ig-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================================================================== */
/* FAQ (Akkordeon auf <details>-Basis, funktioniert ohne JS)           */
/* ================================================================== */

.af-faq-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.af-faq-liste { display: flex; flex-direction: column; gap: 12px; }
.af-faq {
  border: 1px solid var(--color-raised);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.af-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--color-navy);
}
.af-faq summary::-webkit-details-marker { display: none; }
.af-faq summary .af-icon { color: var(--color-pink); width: 20px; height: 20px; }
.af-faq .af-faq__plus { display: block; }
.af-faq .af-faq__minus { display: none; }
.af-faq[open] .af-faq__plus { display: none; }
.af-faq[open] .af-faq__minus { display: block; }
.af-faq__antwort { padding: 0 20px 20px; font-size: 15px; line-height: 1.6; color: var(--color-ink); }

/* ================================================================== */
/* Kontakt (Gradient-Sektion mit Formular-Karte)                       */
/* ================================================================== */

.af-kontakt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.af-kontakt__wege { display: flex; flex-direction: column; gap: 14px; }
.af-kontakt__weg { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: var(--fw-semibold); }
.af-kontakt__weg:hover { color: #fff; text-decoration: underline; }
.af-kontakt__weg .af-icon { width: 20px; height: 20px; }

/* ================================================================== */
/* Formulare (Kontakt-Karte, Umfrage, QR-Landing)                      */
/* ================================================================== */

.af-form {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-lg);
}
.af-form__zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.af-feld { display: flex; flex-direction: column; gap: 6px; }
.af-feld > span {
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
}
.af-feld input,
.af-feld textarea {
  font-size: 15px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-raised);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: #fff;
}
.af-feld textarea { resize: vertical; }
/* Fokus als Border + Ring statt outline — outlines zeichnen außerhalb der
   Box und würden z.B. in .af-box (overflow:hidden) beschnitten. */
.af-feld input:focus-visible,
.af-feld textarea:focus-visible {
	border-color: var(--color-pink);
	box-shadow: 0 0 0 1px var(--color-pink);
	outline: none;
}

.af-einwilligung {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink);
}
.af-einwilligung input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--color-pink); flex-shrink: 0; }
.af-einwilligung a { color: var(--color-navy); border-bottom: 1px solid var(--color-pink); }

/* Honeypot — für Menschen unsichtbar, für Bots ein normales Feld */
.af-hp { position: absolute !important; left: -9999px !important; }

/* Hinweisbox nach dem af-msg-Kontrakt des Design-Systems (2026-08-13):
   umlaufender 1,5px-Rand in der Signalfarbe auf 8%-Tint. Einseitige
   Akzentkanten gibt es systemweit nicht. Default = Info (Navy). */
.af-form__hinweis {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--tint-info);
  border: 1.5px solid var(--color-info);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-ink);
}
.af-form__hinweis .af-icon { color: var(--color-info); margin-top: 1px; width: 20px; height: 20px; }
.af-form__hinweis--ok { background: var(--tint-success); border-color: var(--color-success); }
.af-form__hinweis--ok .af-icon { color: var(--color-success); }
.af-form__hinweis--fehler { background: var(--tint-error); border-color: var(--color-error); }
.af-form__hinweis--fehler .af-icon { color: var(--color-error); }

/* Auswahl-Chips (Umfrage/QR: Ort, Lebensphase, Themen) */
.af-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.af-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  background: #fff;
  color: var(--color-navy);
  border: 1.5px solid var(--color-raised);
  user-select: none;
}
/* Chips sind <label> um versteckte Checkbox/Radio — Auswahlzustand über :checked */
.af-chip input { position: absolute; opacity: 0; pointer-events: none; }
.af-chip:has(input:checked) { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.af-chip:has(input:focus-visible) { outline: 2px solid var(--color-pink); outline-offset: 2px; }

/* Auswahl-Kacheln (Umfrage Frage 1, QR-Intents) */
.af-wahl-kachel {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 16px;
  cursor: pointer;
  border-radius: 12px;
  background: var(--color-surface-cool);
  border: 1.5px solid var(--color-raised);
  text-align: left;
}
.af-wahl-kachel input { position: absolute; opacity: 0; pointer-events: none; }
.af-wahl-kachel:has(input:checked) { background: var(--color-pink-dim); border-color: var(--color-pink); }
.af-wahl-kachel:has(input:focus-visible) { outline: 2px solid var(--color-pink); outline-offset: 2px; }
.af-wahl-kachel__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--tile-standard);
  color: #fff;
  flex-shrink: 0;
}
.af-wahl-kachel__icon .af-icon { width: 21px; height: 21px; }
.af-wahl-kachel__label { font-weight: var(--fw-bold); font-size: 15px; color: var(--color-navy); line-height: 1.35; }

/* Skala (Umfrage Frage 2) */
.af-skala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.af-skala__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  min-height: 76px;
  padding: 12px 8px;
  cursor: pointer;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-navy);
  border: 1.5px solid var(--color-raised);
}
.af-skala__opt input { position: absolute; opacity: 0; pointer-events: none; }
.af-skala__opt:has(input:checked) { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.af-skala__opt:has(input:focus-visible) { outline: 2px solid var(--color-pink); outline-offset: 2px; }
.af-skala__mark {
  width: 16px; height: 16px;
  border-radius: var(--radius-round);
  background: #fff;
  border: 2px solid var(--color-raised);
  flex-shrink: 0;
}
.af-skala__opt:has(input:checked) .af-skala__mark { border: 5px solid var(--color-pink); }
.af-skala__label { display: block; font-size: 13.5px; font-weight: var(--fw-bold); line-height: 1.3; }

/* Options-Zeilen mit Radio-Punkt (Umfrage Frage 3, QR-Terminformat) */
.af-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  cursor: pointer;
  border-radius: 12px;
  text-align: left;
  background: var(--color-surface-cool);
  border: 1.5px solid var(--color-raised);
}
.af-option input { position: absolute; opacity: 0; pointer-events: none; }
.af-option:has(input:checked) { background: var(--color-pink-dim); border-color: var(--color-pink); }
.af-option:has(input:focus-visible) { outline: 2px solid var(--color-pink); outline-offset: 2px; }
.af-option__punkt {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: var(--radius-round);
  margin-top: 2px;
  border: 2px solid var(--color-raised);
  background: #fff;
}
.af-option:has(input:checked) .af-option__punkt { border: 6px solid var(--color-pink); }
.af-option__label { display: block; font-weight: var(--fw-bold); font-size: 15.5px; color: var(--color-navy); }
.af-option__text { display: block; font-size: 13.5px; line-height: 1.5; color: var(--color-ink); margin-top: 4px; }

/* ================================================================== */
/* CTA-Band (Gradient, Text links, Buttons rechts)                     */
/* ================================================================== */

.af-cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.af-cta-band__text { max-width: 56ch; }
.af-cta-band__titel {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
  margin: 12px 0;
}
.af-sektion--gradient .af-cta-band__titel,
.af-sektion--gradient-mirror .af-cta-band__titel { color: #fff; }
.af-cta-band__lead { font-size: 16px; line-height: 1.6; margin: 0; }
.af-sektion--gradient .af-cta-band__lead,
.af-sektion--gradient-mirror .af-cta-band__lead { opacity: 0.92; color: #fff; }
.af-cta-band__aktionen { display: flex; flex-wrap: wrap; gap: 12px; }

/* ================================================================== */
/* Footer                                                              */
/* ================================================================== */

.af-footer {
  background: var(--color-navy);
  color: #fff;
  padding: clamp(40px, 5vw, 64px) var(--gutter) 24px;
}
.af-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  max-width: var(--seite-max);
  margin: 0 auto;
}
.af-footer__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(25px, 2.7vw, 32px);
  letter-spacing: 0.005em;
  color: #fff;
  line-height: 1.05;
}
.af-footer__claim { font-size: 13.5px; font-weight: var(--fw-medium); letter-spacing: 0.01em; color: #fff; opacity: 0.85; margin-top: 10px; }
.af-footer__rolle { font-size: 13px; opacity: 0.7; margin-top: 16px; line-height: 1.5; }
.af-footer__col { display: flex; flex-direction: column; gap: 10px; }
.af-footer__head { font-size: 14px; font-weight: var(--fw-semibold); color: #fff; margin-bottom: 6px; }
.af-footer__col a,
.af-footer__col .menu a { font-size: 14px; color: #fff; opacity: 0.8; text-decoration: none; transition: opacity 0.15s; }
.af-footer__col a:hover { opacity: 1; color: #fff; }
.af-footer__col .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.af-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.65;
  margin-top: 18px;
  max-width: var(--seite-max);
  margin-left: auto;
  margin-right: auto;
}

/* ================================================================== */
/* Schlanker Rahmen (Umfrage, QR-Landing)                              */
/* ================================================================== */

.af-schlank { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-surface-cool); }
.af-schlank__header {
  background: #fff;
  border-bottom: 1px solid var(--color-raised);
  box-shadow: 0 1px 0 rgba(229, 0, 119, 0.35);
}
.af-schlank__header-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px clamp(16px, 4vw, 32px);
}
.af-schlank__header-inner img { height: 56px; width: auto; display: block; }
.af-schlank__nav { display: flex; gap: 22px; align-items: center; }
.af-schlank__nav a { font-size: 14px; font-weight: var(--fw-semibold); color: var(--color-navy); }
.af-schlank__main {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 32px) 64px;
}
.af-schlank__footer { background: var(--color-navy); color: #fff; padding: 28px clamp(16px, 4vw, 32px); }
.af-schlank__footer-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
}
.af-schlank__footer-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 22px; line-height: 1.05; }
.af-schlank__footer-claim { font-size: 13px; font-weight: var(--fw-medium); opacity: 0.85; margin-top: 8px; }
.af-schlank__footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.af-schlank__footer-nav a { font-size: 14px; color: #fff; opacity: 0.8; }
.af-schlank__footer-nav a:hover { opacity: 1; color: #fff; }

/* Karte (weiße Box mit Schatten — Umfrage-Schritte, QR-Hero) */
.af-box { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.af-box__gradient { background: var(--gradient-surface); color: #fff; padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 40px); }
.af-box__gradient h1 { color: #fff; margin: 14px 0 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.12; }
.af-box__body { padding: clamp(22px, 3.5vw, 36px); }

/* Umfrage-Fortschritt */
.af-progress { height: 4px; border-radius: 2px; background: var(--color-raised); margin-top: 14px; overflow: hidden; }
/* Fortschritt über transform statt width — width-Animation triggert Layout */
.af-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--color-pink);
  transform-origin: left;
  transform: scaleX(0.2);
  transition: transform 0.25s ease;
}

/* Umfrage-Schritte: ohne JS alle sichtbar, mit JS blendet umfrage.js um */
.af-umfrage-schritt { padding: clamp(22px, 3.5vw, 36px); border-top: 1px solid var(--color-raised); }
.af-umfrage-schritt:first-of-type { border-top: 0; }
.af-umfrage-schritt h2 { font-size: clamp(22px, 2.8vw, 30px); line-height: 1.2; margin: 0 0 8px; }
.af-umfrage-schritt > p { font-size: 15px; color: var(--color-ink); margin: 0 0 20px; }
.js-umfrage .af-umfrage-schritt[data-inaktiv] { display: none; }
.af-umfrage-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 22px clamp(22px, 3.5vw, 36px);
  border-top: 1px solid var(--color-raised);
}
.af-umfrage-frage-nr { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-pink); }

/* QR-Landing: Intent-Kacheln + native <dialog> */
.af-intents { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.af-intent {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--color-raised);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
}
.af-intent:hover { border-color: var(--color-pink); color: inherit; }
.af-intent__icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--tile-standard);
  color: #fff;
}
.af-intent__icon .af-icon { width: 20px; height: 20px; }
.af-intent__label { font-weight: var(--fw-bold); font-size: 14.5px; color: var(--color-navy); line-height: 1.3; }

.af-dialog {
  border: 0;
  border-radius: 20px;
  padding: 0;
  width: min(600px, calc(100vw - 24px));
  max-height: 90vh;
  box-shadow: var(--shadow-lg);
}
.af-dialog::backdrop { background: rgba(54, 85, 125, 0.55); backdrop-filter: blur(4px); }
.af-dialog__kopf {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--gradient-surface);
  color: #fff;
  padding: 20px clamp(20px, 4vw, 28px);
}
.af-dialog__kopf-zeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.af-dialog__label { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.af-dialog__titel { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(19px, 4.4vw, 24px); line-height: 1.2; margin-top: 8px; }
.af-dialog__schliessen {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
}
.af-dialog__body { padding: clamp(20px, 4vw, 28px); }

/* QR-Landing ohne JS: Bereiche als normale Abschnitte untereinander */
.no-js .af-qr-bereich { display: block; margin-top: 24px; }
.js-qr .af-qr-bereich[data-inaktiv] { display: none; }

/* ================================================================== */
/* Blog-Einzelseite / Archiv                                           */
/* ================================================================== */

.af-artikel__meta { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-pink); margin-bottom: 12px; }
/* Der Ausbruch auf 1040px kommt aus dem Raster (.breit in base.css), nicht
   von hier — hier steht nur, wie der Bildrahmen aussieht. Die frühere
   Notlösung mit margin-left/translateX ist damit weg. */
.af-artikel__bild { border-radius: var(--radius-lg); overflow: hidden; }
.af-artikel__bild img { display: block; width: 100%; }
.af-artikel-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; flex-wrap: wrap; }

/* ================================================================== */
/* Responsive                                                          */
/* ================================================================== */

@media (max-width: 940px) {
  .af-nav { display: none; }
  .af-header__toggle { display: inline-flex; }
  .af-hero { grid-template-columns: 1fr; }
  /* Zwei klebende Leisten übereinander fressen auf kleinen Schirmen zu viel
     Höhe — die Filterleiste scrollt hier mit (Entwurf Aktuelles.dc.html). */
  .af-filter { position: static; }
}

@media (max-width: 700px) {
  /* Enger zusammenrücken, damit das Logo groß bleiben kann */
  .af-header__inner { gap: 12px; }
  .af-termine__item { grid-template-columns: 70px 1fr 36px; }
  .af-hero__cta .af-btn { width: 100%; justify-content: center; }
  .af-filter__suche { flex-basis: 100%; max-width: none; }
  .af-filter__auswahl { width: 100%; }
}

@media (max-width: 620px) {
  /* Knopf auf „Kontakt" kürzen — der volle Text kostet hier 70px, die dem
     Logo fehlen. Vorgelesen wird weiter „Kontakt aufnehmen" (aria-label). */
  .af-header__cta-lang { display: none; }
  .af-header__cta-kurz { display: inline; }
  .af-header__cta { padding-left: 14px; padding-right: 14px; }
  /* Skala kippt auf Mobil in Zeilen (Design Umfrage.dc.html) */
  .af-skala { grid-template-columns: 1fr; gap: 6px; }
  .af-skala__opt { flex-direction: row; align-items: center; gap: 12px; text-align: left; min-height: 52px; padding: 12px 14px; }
  .af-skala__label { text-align: left; }
}

/* ================================================================== */
/* Plugin-Kompatibilität                                               */
/* ================================================================== */

/* Complianz rendert den "Manage {vendor_count} vendors"-Link (TCF) auch ohne
   konfiguriertes TCF; der Platzhalter bliebe sichtbar und funktionslos.
   Ausblenden statt Plugin-Datei patchen (Update-fest). */
.cmplz-links .tcf { display: none; }

/* Die Cookie-Tabelle der Datenschutzerklärung ist ein Raster mit festen
   Spaltenbreiten: In der aufgeklappten Dienst-Beschreibung wird `div.purpose`
   609px breit und schob auf dem Handy die ganze Seite auf 485px Scrollbreite
   (gefunden mit `node scripts/verify-staging.js` — auf dem Screenshot sieht
   man so etwas nicht, fullPage malt die Seite einfach breiter).
   Scrollen soll die Tabelle, nicht das Dokument. Plugin-Markup bleibt
   unangetastet, damit ein Update nichts zurückdreht. */
.cmplz-document .cookies-per-purpose {
  /* Ursache: Die zweite Spalte wird nach ihrem Inhalt bemessen und wuchs auf
     507px — das Raster kam so auf 607px und schob auf dem Handy die ganze
     Seite auf 485px Scrollbreite. minmax(0, 1fr) erlaubt der Spalte zu
     schrumpfen, der Text bricht dann um. Die Beschriftungsspalte behält ihre
     100px, die Tabelle sieht also aus wie vorher. */
  grid-template-columns: 100px minmax(0, 1fr);
  /* Netz für den Fall, dass Complianz die Spalten später anders setzt:
     scrollen soll die Tabelle, nicht das Dokument. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cmplz-document .cookies-per-purpose > * { min-width: 0; }

/* Der Cookie-Richtlinien-Text kommt fertig aus dem Plugin — mit eigener
   Nummerierung (die bleibt, es ist ein eigenständiges Dokument) und in 14px.
   Neben dem 18px-Fließtext der Seite las sich das wie ein eingeklebter
   Fremdkörper. Nur die Prosa auf Lesegröße heben; die Cookie-Tabelle
   (h4/h5, .name, .retention) darf klein bleiben, sonst wird sie unruhig. */
.cmplz-document.cookie-statement > p,
.cmplz-document.cookie-statement > ul,
.cmplz-document.cookie-statement > ol {
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--color-ink);
}
.cmplz-document.cookie-statement > h2 { font-size: var(--fs-h4); margin-top: 32px; }
.cmplz-document.cookie-statement > h3 { font-size: 17px; margin-top: 20px; }