/* ═══════════════════════════════════════════
   Agenturradar · Design Tokens & Base Styles
   Version 4.0 — Warm Gray & Midnight
═══════════════════════════════════════════ */

/* ── Fonts ──
 *
 * Inter liegt im Repo (#15, ADR-0005). Vorher stand hier ein
 * `@import url(fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700)`,
 * und der tat drei Dinge auf einmal: er schickte die IP jeder Besucherin vor
 * jedem Consent an Google, er serialisierte die Ladekette (HTML → main.css →
 * googleapis → gstatic, jeder Schritt erst nach dem vorigen entdeckt), und die
 * ganze Kette blockierte das Rendern.
 *
 * Es sind zwei Dateien, nicht vier: Google liefert Inter als Variable Font, und
 * die vier angeforderten Schnitte zeigten alle auf *dieselbe* woff2. Darum hier
 * eine Deklaration mit dem Bereich `400 700` statt vier mit je einem Wert.
 * Die Dateien sind unverändert die, die gstatic ausgeliefert hat (Inter v20),
 * mitsamt ihrer `unicode-range` — der Browser zeichnet dieselben Bytes wie
 * vorher.
 *
 * `latin-ext` steht nur für den Fall da, dass ein Agenturname ein Zeichen
 * mitbringt, das `latin` nicht hat (ł, ő, š). Die `unicode-range` sorgt dafür,
 * dass der Browser sie erst dann holt; auf einer deutschen Seite kostet sie
 * keine Anfrage. Die fünf übrigen Subsets (kyrillisch, griechisch,
 * vietnamesisch) liegen nicht im Repo — DACH-Inhalte brauchen sie nicht.
 *
 * Reihenfolge wie bei Google: `latin` steht hinten und gewinnt damit die drei
 * Zeichen, die sich beide Subsets teilen (U+0304, U+0308, U+0329).
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design Tokens ── */
:root {
  /* Farben */
  --warm-stone:   #fafaf9;
  --stone-100:    #f5f5f4;
  --stone-200:    #e7e5e4;
  --stone-300:    #d6d3d1;
  /* Der gedämpfte Textton. Bis #27 gab es ihn zweimal – --stone-400 (#79736b)
   * und --stone-500 (#78716c) lagen auf derselben Helligkeit, zwei Stufen einer
   * Skala, die keine war. Beide bestanden 4,5:1 nur gegen reines Weiß und
   * kippten auf jeder Tönung, auf der sie tatsächlich vorkamen.
   * Bemessen ist der Wert daher an der dunkelsten dieser Tönungen,
   * --indigo-50: 4,90:1 dort, 5,02:1 auf --stone-100, 5,24:1 auf --warm-stone,
   * 5,47:1 auf Weiß. Auf --stone-200 (4,36:1) und dunkler trägt er nicht –
   * dort gehört --stone-600 hin. */
  --stone-500:    #6f6863;
  --stone-600:    #57534e;
  --midnight:     #1e1b4b;
  --indigo:       #4338ca;
  --indigo-50:    #eef2ff;
  --indigo-100:   #e0e7ff;
  --indigo-200:   #c7d2fe;
  --indigo-light: #818cf8;

  /* Typografie */
  --font:         'Inter', system-ui, -apple-system, sans-serif;

  /* Schriftgrößen */
  --text-caption:  11px;
  --text-label:    11px;
  --text-body:     14px;
  --text-subtitle: 16px;
  --text-title:    22px;
  --text-display:  36px;

  /* Abstände */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 999px;

  /* Schatten */
  --shadow-sm:  0 0 0 1px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:  0 0 0 1px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 0 0 1px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.12);

  /* Max-Breiten */
  --max-default:  1280px;
  --max-list:     1440px;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }

body {
  font-family: var(--font);
  font-size: var(--text-body);
  color: #171717;
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Sticky-Footer: Hauptinhalt füllt die Höhe, Footer bleibt unten (kein Weißraum) */
main { flex: 1 0 auto; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }

/* ── Typografie-Klassen (Visuelles Format) ── */
.t-display {
  font-size: clamp(28px, 4vw, var(--text-display));
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.t-title {
  font-size: var(--text-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.t-subtitle {
  font-size: var(--text-subtitle);
  font-weight: 600;
  line-height: 1.4;
}
.t-body {
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.7;
}
.t-label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.t-caption {
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--stone-500);
}

/* ── Layout ── */
.container {
  max-width: var(--max-default);
  margin: 0 auto;
  padding: 0 2rem;
}
.container--wide {
  max-width: var(--max-list);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Navigation ── */
.nav-wrap {
  background: #fff;
  border-bottom: 1px solid var(--stone-200);
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Die Kopfzeile ist eine Reihe aus fünf Kindern – Logo, Menü, Lupe, CTA, Burger.
   Warum sie das ist, steht in `site/snippets/header.php`.
   Statt `space-between` schiebt das Logo den Rest mit einer Automarge nach
   rechts: bei fünf Kindern hätte `space-between` die drei rechten
   auseinandergezogen. Die Lücke zwischen ihnen ist dieselbe `gap` wie die
   zwischen den Menüpunkten – sie lagen vorher in einer Reihe und sehen darum
   unverändert aus. */
.nav {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2rem;
  max-width: var(--max-default);
  margin: 0 auto;
}
.nav-logo {
  display: flex;
  align-items: center;
  margin-right: auto;
  gap: 10px;
  font-size: 23px;
  font-weight: 700;
  color: #171717;
  letter-spacing: -0.02em;
}
.nav-logo__wordmark span { color: var(--indigo); }
/* Gepflegtes Logo: Höhe kommt aus dem Panel, Breite folgt dem Seitenverhältnis. */
.nav-logo__img { display: block; width: auto; max-width: 60vw; }
.nav-links {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.nav-link {
  padding: .45rem .85rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--stone-600);
  border-radius: var(--radius-md);
  transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--stone-100); color: #171717; }
.nav-link--active { background: var(--stone-100); color: #171717; }

.nav-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: none; background: transparent; color: var(--stone-600);
  border-radius: var(--radius-md); cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-search-toggle:hover { background: var(--stone-100); color: #171717; }

/* ── Dropdown ──
   Auf- und zugeklappt wird über `.is-open`, gesetzt von nav.js – nicht über
   `:hover`/`:focus-within`. Zwei Mechanismen an einem Menü widersprechen sich
   zwangsläufig: CSS öffnete bei Fokus, JavaScript spiegelte `aria-expanded` auf
   einem eigenen Weg, und sobald Zeiger und Fokus auseinanderlaufen, log der
   Trigger (WCAG 4.1.2). Jetzt hat der Zustand einen Besitzer.

   Geschlossene Panels stehen auf `display: none`, nicht auf
   `visibility: hidden`. Sichtbar waren sie so schon nicht, sie belegten aber
   weiter Layout: das Flyout ragte 119 px über den Viewport und erzeugte auf
   jeder Seite einen dauerhaften horizontalen Scrollbalken. `display: none`
   nimmt sie aus dem Fluss und zugleich aus der Tabreihenfolge. */
.nav-item { position: relative; }
.nav-item--dropdown { display: inline-flex; align-items: center; border-radius: var(--radius-md); }
.nav-item--dropdown:hover,
.nav-item--dropdown.is-open { background: var(--stone-100); }
/* Der Menüpunkt liegt jetzt neben seinem Chevron-Button: die Fläche für das
   Hover-Feedback ist das Paar, nicht der Link allein. */
.nav-item--dropdown > .nav-link:hover { background: none; }
.nav-item--dropdown > .nav-link { padding-right: .3rem; }

/* Der Chevron-Button ist der Trigger – auf jeder Breite, für Maus, Touch und
   Tastatur. Im mobilen Nav wird er unten zur vollen 42-px-Fläche. */
.nav-subtoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--stone-500);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-subtoggle svg { transition: transform .15s; }
.is-open > .nav-subtoggle svg { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(4px);
  /* `allow-discrete` lässt das Einblenden trotz display-Wechsel laufen; wo der
     Browser es nicht kennt, erscheint das Panel schlicht ohne Blende. */
  transition: opacity .15s, transform .15s, display .15s allow-discrete;
  z-index: 200;
}
.nav-item--dropdown.is-open > .nav-dropdown {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
@starting-style {
  .nav-item--dropdown.is-open > .nav-dropdown { opacity: 0; transform: translateY(4px); }
}
.nav-dropdown__link {
  padding: .45rem .7rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--stone-600);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-dropdown__link:hover,
.nav-dropdown__link.is-active { background: var(--stone-100); color: #171717; }

/* ── Flyout (2. Ebene) ── */
.nav-dropdown__item { position: relative; }
.nav-dropdown__item--flyout { display: flex; align-items: center; }
.nav-dropdown__link--parent { flex: 1; }
.nav-dropdown__item--flyout:hover,
.nav-dropdown__item--flyout.is-open { background: var(--stone-100); border-radius: var(--radius-sm); }
.nav-dropdown__item--flyout > .nav-dropdown__link--parent:hover { background: none; }
/* Das Flyout öffnet nach links, der Chevron zeigt dorthin: ein nach unten
   gezeichnetes Chevron um 90° gedreht zeigt nach links. */
.nav-dropdown__item--flyout > .nav-subtoggle svg { transform: rotate(90deg); }
.nav-dropdown__item--flyout.is-open > .nav-subtoggle svg { transform: rotate(90deg); }

/* Nach LINKS, nicht nach rechts. Nach rechts ragte es 119 px über den rechten
   Viewport-Rand – das Flyout hängt am rechten Menüpunkt, und rechts davon ist
   kein Platz mehr. Bewusst ohne Messung in JavaScript: das einzige Flyout sitzt
   im rechten Dropdown, da genügt eine Regel.
   Achtung, das ist die Bedingung dafür: kommt je ein Flyout unter einem LINKEN
   Menüpunkt dazu, tritt es hier über den linken Rand. Dann muss die Seite
   gemessen statt gesetzt werden – `ar-horizontal-overflow` im Fall
   `nav-flyout@1440` schlägt in dem Moment an. */
.nav-flyout {
  position: absolute;
  top: -7px;
  right: 100%;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity .15s, transform .15s, display .15s allow-discrete;
  z-index: 210;
}
.nav-dropdown__item--flyout.is-open > .nav-flyout {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}
@starting-style {
  .nav-dropdown__item--flyout.is-open > .nav-flyout { opacity: 0; transform: translateX(4px); }
}
.nav-cta {
  padding: 7px 18px;
  background: var(--midnight);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: opacity .15s;
}
.nav-cta:hover { opacity: .85; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: opacity .15s, background .15s;
  cursor: pointer;
  border: none;
}
.btn--dark { background: var(--midnight); color: #fff; }
.btn--dark:hover { opacity: .85; }
.btn--outline { background: transparent; color: var(--stone-600); border: 1px solid var(--stone-200); }
.btn--outline:hover { background: var(--stone-100); color: #171717; }
.btn--indigo { background: var(--indigo); color: #fff; }
.btn--indigo:hover { opacity: .85; }
/* Textlink-Variante: schlichter Link mit Pfeil, ohne Fläche/Rahmen */
.btn--link { background: transparent; border: none; border-radius: 0; padding: 0; color: var(--indigo); }
.btn--link:hover { opacity: 1; text-decoration: underline; }
/* Buttons in Value-Props-Kacheln kompakter – die Karten-Typo ist kleiner (12–13px). */
.card .btn { font-size: 12px; padding: 7px 14px; gap: 4px; }

/* ── Pill / Badge ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-full);
}
.pill--indigo {
  background: var(--indigo-50);
  color: var(--indigo);
  border: 1px solid var(--indigo-200);
}
/* Klickbare Pillen (Hero-Panel): dezenter Hover, damit die Klickbarkeit erkennbar ist */
a.pill { transition: background .15s, border-color .15s; }
a.pill--indigo:hover { background: var(--indigo-100); border-color: var(--indigo); }
a.pill--stone:hover { background: var(--stone-200); border-color: var(--stone-300); }
.pill--stone {
  background: var(--stone-100);
  color: var(--stone-600);
  border: 1px solid var(--stone-200);
}

/* ── Hero ── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--warm-stone);
  padding: 5rem 2rem 4rem;
}
.hero__inner {
  max-width: var(--max-default);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero__radar {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 560px;
  height: 560px;
  pointer-events: none;
}
.hero__radar canvas,
.hero__radar svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hero__pill { margin-bottom: 1.25rem; }
.hero__h1 { margin-bottom: 1rem; }
.hero__h1 em { color: var(--indigo); font-style: normal; }
.hero__sub {
  font-size: 15px;
  color: var(--stone-500);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 420px;
}
.hero__btns { display: flex; gap: 10px; }

/* ── Hero Panel ── */
.hero-panel {
  align-self: end; /* unten mit den Buttons abschließen, nicht in den Überschriftenraum ragen */
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
  transform: scale(.85);          /* ~15% kleiner … */
  transform-origin: bottom right; /* … verankert an Buttons-Unterkante & rechter Kante */
}
.hero-panel__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--stone-500);
  margin-bottom: .75rem;
}
.hero-panel__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--stone-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: .75rem;
}
.hero-panel__stat { background: #fff; padding: .75rem 1rem; }
.hero-panel__stat-val { font-size: 20px; font-weight: 700; color: var(--midnight); letter-spacing: -.02em; }
.hero-panel__stat-lbl { font-size: 10px; color: var(--stone-500); margin-top: 1px; font-weight: 500; }
.hero-panel__chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* ── Sections ── */
.section { padding: 3rem 2rem; }
.section--alt { background: var(--warm-stone); }
.section--midnight { background: var(--midnight); }
.section__eyebrow { color: var(--stone-500); margin-bottom: .4rem; }
.section__title { margin-bottom: 1.75rem; }

/* ── Card Grid ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
/* Volle Breite: auto-fit kollabiert leere Spalten → die Kacheln dehnen sich
   gleichmäßig über die ganze Breite, statt links zu klumpen (auto-fill). */
.card-grid--fill { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  transition: box-shadow .15s;
}
.card:hover { box-shadow: 0 0 0 1px var(--indigo-200), 0 4px 16px rgba(67,56,202,.08); }
.card__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--indigo-50);
  border: 1px solid var(--indigo-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
}
.card__title { font-size: 13px; font-weight: 600; color: #171717; margin-bottom: 4px; }
.card__desc { font-size: 12px; color: var(--stone-500); line-height: 1.6; flex: 1; }
/* Listen in der Kachel einrücken – der globale Reset entfernt sonst das
   padding, und die Punkte kleben an der Textkante. Enger als .prose, weil die
   Karten-Typo kleiner ist. */
.card__desc ul,
.card__desc ol { padding-left: 1.25rem; }
.card__desc ul { list-style: disc; }
.card__desc ol { list-style: decimal; }
.card__desc li { margin-top: .25rem; }
.card__desc li::marker { color: var(--stone-500); }
.card__desc p + p,
.card__desc p + ul,
.card__desc p + ol,
.card__desc ul + p,
.card__desc ol + p { margin-top: .5rem; }

/* ── CTA Section ── */
.cta-section { position: relative; overflow: hidden; padding: 4rem 2rem; }
.cta-section__radar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .07;
}
.cta-section__inner { position: relative; z-index: 1; text-align: center; max-width: 520px; margin: 0 auto; }
/* Das Indigo aus .prose verschwindet auf Midnight — Links im CTA-Text weiß.
   Den Fokusring stellt schon `.section--midnight a:focus-visible`. */
.cta-section .prose a:not(.btn) { color: #fff; }

/* ── Footer ── */
.footer { background: var(--midnight); padding: 3rem 2rem 1.5rem; }
.footer__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
  max-width: var(--max-default);
  margin-left: auto;
  margin-right: auto;
}
.footer__col-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.75);
  margin-bottom: .75rem;
}
.footer__link {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-bottom: .35rem;
  transition: color .15s;
}
.footer__link:hover { color: #fff; }
.footer__bottom {
  max-width: var(--max-default);
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__copy { font-size: 12px; color: rgba(255,255,255,.6); }
.footer__social { display: flex; gap: .75rem; }
.footer__social-link {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
  transition: color .15s, border-color .15s;
}
.footer__social-link:hover { color: #fff; border-color: rgba(255,255,255,.4); }

/* ── Agency Grid ── */
/* minmax(0, 1fr) statt 1fr: „1fr" ist eigentlich minmax(auto, 1fr) – das auto-
   Minimum wächst bis zur min-content-Breite und lässt so einen langen Wort-String
   (kaputte Hygraph-Daten ohne Leerzeichen) die Spalte auseinanderziehen. Mit
   minmax(0, …) bleibt jede Spalte fix bei 1/3, der Inhalt muss sich fügen.

   Drei feste Stufen (3 / 2 / 1 bei 768 und 480 px) statt des auto-fill-Musters
   von .card-grid daneben: der `.container` ist bei 1440 px 1216 px breit, dort
   passen bei `minmax(220px, 1fr)` fünf Spalten hinein, nicht drei. Ein
   auto-fill, das oben bei drei bliebe, bräuchte ein Minimum von ~340 px – und
   das ergäbe bei 700 px nur noch eine Spalte, also genau die Lücke zurück, die
   die zweite Stufe schließt (#17). Die Kacheln sind hier auch dichter am
   Inhalt als eine .card: 220 px wären für Logo, Name, Ort und Tags knapp. */
.agency-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.agency-card {
  position: relative;
  background: var(--stone-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
  transition: box-shadow .15s;
  display: flex;
  flex-direction: column;
  min-width: 0;                 /* erlaubt dem Karteninhalt zu schrumpfen */
  overflow-wrap: break-word;    /* bricht überlange Wörter/Strings um (vererbt an alle Texte) */
}
/* Ganze Kachel klickbar: Namen-Link spannt sich per Pseudo-Element über die Karte */
.agency-card__name-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.agency-card:hover { box-shadow: 0 0 0 1px var(--indigo-200), 0 4px 16px rgba(67,56,202,.08); }
.agency-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.agency-card__logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--stone-200);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--indigo);
  flex-shrink: 0;
}
.agency-card__name { font-size: 14px; font-weight: 600; color: #171717; }
.agency-card__loc { font-size: 11px; color: var(--stone-600); }
.agency-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.agency-card__tag { padding: 3px 8px; font-size: 11px; font-weight: 500; border-radius: var(--radius-full); }
.agency-card__tag--primary { background: var(--indigo-50); color: var(--indigo); border: 1px solid var(--indigo-200); }
.agency-card__tag--secondary { background: #fff; color: var(--stone-600); border: 1px solid var(--stone-200); }
.agency-card__divider { height: 1px; background: var(--stone-200); margin: 8px 0; }
.agency-card__excerpt {
  font-size: 12px;
  color: var(--stone-600);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.agency-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--stone-200);
  padding-top: 8px;
  margin-top: auto;
}
.agency-card__ma { font-size: 11px; color: var(--stone-600); font-weight: 500; }
.agency-card__ma strong { color: #171717; font-weight: 600; }
.agency-card__link {
  font-size: 12px;
  font-weight: 600;
  color: var(--midnight);
  padding: 5px 0;
  white-space: nowrap;
  transition: color .15s;
}
.agency-card:hover .agency-card__link { color: var(--indigo); text-decoration: underline; }
/* Tastaturfokus auf dem Namen-Link → Ring um die ganze Kachel */
.agency-card:has(.agency-card__name-link:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* nur wenn :has() den Karten-Ring liefert, den (sonst doppelten) Link-Outline unterdrücken;
   ältere Browser behalten so den globalen :focus-visible-Outline am Namen */
@supports selector(:has(*)) {
  .agency-card__name-link:focus-visible { outline: none; }
}
/* CMS-Übersichtskachel — gleiche Optik wie Agenturkachel; ohne MA-Angabe Link rechts */
/* Nur wenn keine Agentur-Anzahl da ist, steht der Link allein → rechtsbündig.
   Mit Anzahl greift space-between wie bei den Agenturkacheln (Zahl links, Link rechts). */
.cms-card .agency-card__foot:not(:has(.agency-card__ma)) { justify-content: flex-end; }

.agency-card__badge { padding: 2px 8px; font-size: 10px; border-radius: var(--radius-full); font-weight: 600; }
.agency-card__badge--verified { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.agency-card__badge--top { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

/* ── Kirby Layouts ── */
.layout {
  max-width: var(--max-default);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.layout--flush { gap: 0; }
.layout__col { flex: 1 1 calc(var(--col-w, 100%) - 1.5rem); min-width: 260px; }
.layout--flush .layout__col { flex: 0 0 auto; width: var(--col-w, 100%); min-width: 0; }
@media (max-width: 768px) {
  /* Tablet/Mobil: Module einspaltig + deutlich reduzierte Innenabstände.
     Blöcke sind als .section > .container verschachtelt und sitzen zusätzlich
     in .layout → ohne Eingriff stapelt sich der horizontale Rand dreifach.
     Daher: .layout ohne Rand, .container innerhalb .section ohne Rand; der
     einzige Rand (1rem) kommt aus .section bzw. .cta-section/.hero. */
  .layout,
  .layout--flush { padding: 0; gap: 1rem; }
  .layout__col,
  .layout--flush .layout__col { flex-basis: 100%; width: 100%; min-width: 0; }
  .section { padding: 1.75rem 1rem; }
  .section .container { padding-left: 0; padding-right: 0; }
  .container { padding: 0 1rem; }
  .cta-section { padding: 2.5rem 1rem; }
  .hero { padding: 3rem 1rem 2.5rem; }
}

@media (max-width: 768px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__radar { display: none; }
  .hero-panel { transform: none; }
  .agency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .hero-panel__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .agency-grid { grid-template-columns: 1fr; }
}

/* ── Richtext / Prose (Text-Block) ── */
/* Redaktionelle Texte enthalten ausgeschriebene URLs (Datenschutz, Impressum).
   Als ein einziges „Wort" ohne Umbruchstelle schieben sie die ganze Seite
   seitlich auf – auf /datenschutz um 147px bei 390px Viewport. Gleiche
   Behandlung wie bei .agency-card weiter oben. */
.prose { overflow-wrap: break-word; }
.prose > * + * { margin-top: 1rem; }
.prose ul,
.prose ol { padding-left: 1.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .35rem; }
.prose li::marker { color: var(--stone-500); }
.prose h2 { font-size: var(--text-title); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin-top: 1.5rem; }
.prose h3 { font-size: var(--text-subtitle); font-weight: 600; line-height: 1.4; margin-top: 1.25rem; }
.prose h4 { font-size: var(--text-body); font-weight: 700; margin-top: 1rem; }
.prose blockquote { border-left: 3px solid var(--indigo); padding-left: 1rem; color: var(--stone-500); font-style: italic; }
.prose a { color: var(--indigo); text-decoration: underline; }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }

/* ── Formular ── */
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__field--full { grid-column: 1 / -1; }
.form__label { display: block; font-size: 13px; font-weight: 600; color: #171717; margin-bottom: 5px; }
.form__req { color: var(--indigo); }
.form__input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #171717;
  background: #fff;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  transition: border-color .15s, box-shadow .15s;
}
.form__input:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
  border-color: var(--indigo-light);
}
textarea.form__input { resize: vertical; }
.form__check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--stone-600); line-height: 1.5; cursor: pointer; }
.form__check input { margin-top: 2px; flex-shrink: 0; }
.form__consent { grid-column: 1 / -1; margin: 1rem 0; }
.form__submit { margin-top: 1.25rem; border: none; cursor: pointer; }
.form__error { color: #b91c1c; font-size: 12px; margin-top: 5px; }
.form__error-banner { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; margin-bottom: 1.25rem; }
.form__success { background: var(--indigo-50); border: 1px solid var(--indigo-100); color: var(--midnight); padding: 1.25rem 1.5rem; border-radius: var(--radius-lg); font-size: 14px; line-height: 1.6; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
  .form__grid { grid-template-columns: 1fr; }
}

/* ── Sticky-Button ── */
.sticky-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  background: var(--indigo);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.sticky-btn:hover { background: var(--midnight); transform: translateY(-2px); }
.sticky-btn__icon { display: inline-flex; flex-shrink: 0; }
.sticky-btn__label { white-space: nowrap; }

/* Variante 1: ausgeklappt (Text immer sichtbar) */
.sticky-btn--expanded { padding: 13px 22px; gap: 10px; }

/* Variante 2: klein mit Icon, Text klappt beim Hovern aus */
.sticky-btn--icon { padding: 14px; }
.sticky-btn--icon .sticky-btn__label {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .3s ease, margin-left .3s ease, opacity .25s ease;
}
.sticky-btn--icon:hover .sticky-btn__label,
.sticky-btn--icon:focus-visible .sticky-btn__label {
  max-width: 240px;
  margin-left: 10px;
  opacity: 1;
}

@media (max-width: 600px) {
  .sticky-btn { bottom: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-btn, .sticky-btn--icon .sticky-btn__label { transition: none; }
}

/* ── Blog-Übersicht ── */
.blog-head { text-align: center; }
.blog-head__intro { color: var(--stone-500); margin-top: 1rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 2rem 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--stone-200);
}
.blog-filter__field { display: flex; flex-direction: column; gap: 5px; min-width: 180px; }
.blog-filter__field .t-label { color: var(--stone-500); }
.blog-filter__select {
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #171717;
  background: #fff;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
}
.blog-filter__reset { align-self: center; font-size: 13px; color: var(--indigo); font-weight: 600; }
.blog-filter__reset:hover { text-decoration: underline; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--stone-300); }
/* Meta-Zeile bleibt immer einzeilig: Datum und Tag nebeneinander.
   „Anforderungen & Briefing" war in der vierspaltigen Teaser-Ansicht nur 5px zu
   breit – die kleinere Pille (11px statt 12px, engeres Padding) schafft die
   nötigen ~14px, statt den Tag umbrechen oder in eine zweite Zeile rutschen zu
   lassen. Das Datum schrumpft nicht mit; nur die Pille kürzt notfalls mit „…". */
.blog-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: .75rem;
  font-size: 12px;
  color: var(--stone-500);
}
.blog-card__meta time { flex-shrink: 0; }
.blog-card__tag {
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  padding: 2px 8px;
  background: var(--indigo-50);
  color: var(--indigo);
  border: 1px solid var(--indigo-100);
  border-radius: var(--radius-full);
  font-weight: 600;
}
.blog-card__title { font-size: 17px; font-weight: 700; line-height: 1.35; color: #171717; letter-spacing: -0.01em; margin-bottom: .6rem; }
.blog-card__excerpt { font-size: 13px; line-height: 1.65; color: var(--stone-500); flex-grow: 1; }
.blog-card__more { margin-top: auto; padding-top: 1rem; font-size: 13px; font-weight: 600; color: var(--indigo); }

.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 1rem 0 3rem; }
/* line-height explizit: der Seitenwechsel ist seit #13 überall ein <a> und erbt
   damit, was über ihm steht. Der Wert legt die Höhe der Pille fest, statt sie
   vom Umfeld abhängen zu lassen – vorher glich er <button> und <a> aneinander an,
   die sich in der Voreinstellung unterscheiden. */
.blog-pagination__link { font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--indigo); padding: 8px 16px; border: 1px solid var(--stone-200); border-radius: var(--radius-full); transition: background .15s; white-space: nowrap; }
.blog-pagination__link:hover { background: var(--stone-100); }
.blog-pagination__info { font-size: 13px; color: var(--stone-500); }

@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* ── Artikel-Detailseite ── */
.article-head { padding-top: 3.5rem; padding-bottom: 2.5rem; }
.article-head__meta { margin-top: 1rem; font-size: 13px; color: var(--stone-500); }
.article-head__intro { margin-top: 1.25rem; color: var(--stone-500); max-width: 640px; margin-left: auto; margin-right: auto; }

/* ── Mobile-Navigation (Burger) ── */
.nav-burger { display: none; }
/* Mobiler Nav auf schmalen Bildschirmen ODER auf Touch-Geräten (iPad Pro!):
   Die Desktop-Dropdowns öffnen per :hover – auf Touch gibt es kein Hover, das
   Menü klappte beim Antippen sofort wieder zu. „hover: none + pointer: coarse"
   trifft reine Touch-Geräte (Tablets/Phones), nicht Notebooks mit Touchscreen.

   1199 px, und nicht die 820 von vorher (#18): 1199 ist die Breite, unter der
   die Desktop-Reihe nicht mehr *ungequetscht* hineinpasst. Sie braucht 1139 px,
   und im Band bis 820 stauchte `flex-shrink` sie hinein, bis nichts mehr ging –
   bei 900 px stand die Lupe auf 18 statt 38 px, der CTA auf 87 statt 130, und die
   Reihe ragte trotzdem 19 px über den Viewport. Das war R2: ein horizontaler
   Scrollbalken auf jeder Seite zwischen 821 und 918 px.

   Der Wert ist also gemessen, nicht gewählt – und er ist nicht der Rand des
   Überlaufs (919), sondern der des Quetschens: dass die Reihe schrumpft, um zu
   passen, ist der Mechanismus, der bei 900 versagt hat, und nicht die Form, in
   der die Kopfzeile stehen soll. Zwischen 1139 und 1199 liegt der Rest Luft für
   einen etwas längeren Menüpunkt; die Menüpunkte kommen aus dem Panel, ihre
   Breite ist Inhalt. Reicht die Luft nicht mehr, wird das in `layout.spec.mjs`
   rot – dort steht die Messung, an der dieser Wert hängt.

   Alle üblichen Desktop-Breiten liegen darüber (1280 und mehr); alles darunter
   ist ein verkleinertes Fenster oder ein Tablet, und Tablets nahm die
   Touch-Bedingung oben ohnehin schon. Die Alternativen – engere Abstände oder ein
   Umbruch der Menüpunkte – hätten die Reihe weiter am Quetschen gehalten oder die
   Höhe der Kopfzeile vom Inhalt abhängig gemacht. */
@media (max-width: 1199px), (hover: none) and (pointer: coarse) {
  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    color: #171717;
    border-radius: var(--radius-md);
    cursor: pointer;
  }
  .nav-burger:hover { background: var(--stone-100); }

  /* Die Lupe steht hier neben dem Burger und ist damit dieselbe Sorte Schalter –
     also auch dieselbe Fläche. 38 px war die Größe für eine Reihe voller
     Menüpunkte, nicht für ein Paar Icons am Rand einer 390-px-Kopfzeile. */
  .nav-search-toggle { width: 42px; height: 42px; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1.25rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--stone-200);
    box-shadow: var(--shadow-md);
    /* Die Höhe kommt vom Viewport, nicht vom Inhalt: aufgeklappt ist das Menü
       länger als jedes Telefon hoch ist, und `overflow-y` darunter ist das
       Ventil. Beide Hälften der Rechnung sind gemessen, keine geschätzt:

       `100dvh` – die *tatsächliche* Viewporthöhe. `100vh` ist auf Mobilgeräten
       die Höhe ohne eingeblendete Adressleiste, also die größere der beiden;
       gerechnet wird dann mit Platz, den es gerade nicht gibt.

       `100%` – die Höhe der Kopfzeile. Prozente beziehen sich hier auf den
       Containing Block, und das ist die sticky `.nav-wrap`; genau um deren Höhe
       steht das Menü per `top: 100%` tiefer. Vorher stand an dieser Stelle
       64px – geschätzt und um 10px zu klein, und exakt diese 10px ragten bei
       568px Viewport unten heraus (R14).

       Die `vh`-Zeile davor ist die Rückfallebene: Browser ohne `dvh` (Safari
       vor 15.4) verwerfen sonst die ganze Deklaration und stünden ganz ohne
       Deckelung da – schlechter als vor diesem Fix. */
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    display: none;
  }
  .nav-wrap.is-open .nav-links { display: flex; }

  .nav-links .nav-link {
    width: 100%;
    padding: .7rem .25rem;
    font-size: 15px;
    border-radius: 0;
    border-bottom: 1px solid var(--stone-100);
  }
  /* Dropdowns + Flyouts inline, per Chevron-Button ein-/ausklappbar. Derselbe
     Button, dieselbe `.is-open`-Klasse wie auf dem Desktop – nur als Akkordeon
     im Fluss statt als schwebendes Panel. */
  .nav-item,
  .nav-dropdown__item { position: static; }
  .nav-item--dropdown,
  .nav-dropdown__item--flyout {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-radius: 0;
  }
  /* Kein Pillen-Hintergrund im Akkordeon: die Zeile ist hier voll breit. */
  .nav-item--dropdown:hover,
  .nav-item--dropdown.is-open,
  .nav-dropdown__item--flyout:hover,
  .nav-dropdown__item--flyout.is-open { background: none; }
  .nav-item--dropdown > .nav-link {
    flex: 1;
    width: auto;
    padding-right: .25rem;
  }
  .nav-dropdown__item--flyout > .nav-dropdown__link--parent { flex: 1; }
  .nav-subtoggle {
    width: 42px;
    height: auto;
    border-radius: var(--radius-md);
  }
  /* Aufklappen nach unten, nicht nach links: hier gibt es kein seitliches Panel. */
  .nav-dropdown__item--flyout > .nav-subtoggle svg { transform: none; }
  .nav-dropdown__item--flyout.is-open > .nav-subtoggle svg { transform: rotate(180deg); }
  .nav-item--dropdown > .nav-subtoggle { border-bottom: 1px solid var(--stone-100); border-radius: 0; }
  .nav-dropdown,
  .nav-flyout {
    display: none;
    position: static;
    flex-basis: 100%;
    opacity: 1;
    transform: none;
    transition: none;
    min-width: 0;
    padding: 0 0 0 1rem;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .nav-item--dropdown.is-open > .nav-dropdown,
  .nav-dropdown__item--flyout.is-open > .nav-flyout {
    display: flex;
    opacity: 1;
    transform: none;
  }
  .nav-dropdown__link {
    padding: .55rem .25rem;
    font-size: 14px;
    color: var(--stone-500);
    white-space: normal;
  }
}

/* Der CTA hängt an seiner eigenen Breite, nicht am Wechsel der Nav-Form. Er stand
   bis #18 im Block darüber und verschwand damit mit ihm – als der Wechsel von 820
   auf 1199 px stieg, hätte das die wichtigste Handlung der Site aus jeder Kopfzeile
   unter 1200 px genommen. Am CTA war daran nie etwas falsch: neben Logo, Burger und
   Lupe braucht die Reihe 487 px.

   Die Bedingung ist deshalb wörtlich die, unter der er vorher verschwand – dieselbe
   Breite, dieselbe Touch-Ausnahme. Er ist an jeder Breite und auf jedem Gerät
   sichtbar, an dem er es vorher war; verschoben hat sich allein die Form der
   Navigation. Eine engere Stufe wäre zwar begründbar (Platz ist bis 487 px), hätte
   ihn aber an Breiten in die Kopfzeile geholt, an denen ihn niemand vermisst hat,
   und auf dem Tablet in eine Reihe, aus der ihn die Touch-Bedingung gerade
   heraushält. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .nav-cta { display: none; }
}

/* ── Fehlerseite (404) ── */
.error-page { padding-top: 5rem; padding-bottom: 5rem; }
/* Die „404" ist ein `<svg>` und kein `<p>` – der einzige Grund ist die
   Kontrastprüfung (#29). Bei 12 % Deckkraft steht `--indigo` auf Weiß bei 1,22:1,
   und weil die Zahl mit 72–140 px Großschrift ist, wäre die Latte 3:1 – erreicht
   erst bei 58 % Deckkraft, also mit einer Zahl, die die Seite dominiert statt sie
   zu untermalen. Die Information hängt nicht an ihr: die Botschaft trägt das `h1`,
   der Hinweis den Text darunter. axe und Lighthouse melden trotzdem, denn
   `aria-hidden` nimmt ein Element aus dem Screenreader-Baum, nicht aus dem Bild.
   Als Grafik greift die Regel nicht mehr, und die Seite sieht aus wie vorher:
   Lighthouse 100 statt 95, `color-contrast` mit null Knoten (nachgemessen, s.
   `tests/a11y/README.md`). Kein `background-image` mit data-URI: ein Bild ist ein
   eigenes Dokument, das `@font-face` oben reicht nicht hinein, und der Fallback
   zeichnet „404" 23 % schmaler. Inline erbt die Schrift der Seite.

   Die `viewBox` im Markup ist gemessen, nicht gesetzt: 266,95 ist der Vorschub
   von „404" bei 140 px mit diesem `letter-spacing`, 140 die Höhe des Zeilenkastens
   (`line-height: 1`), 121 die Grundlinie darin. Damit steht die Zahl auf den
   Pixel dort, wo sie als Text stand. Die Höhe unten skaliert die Grafik über die
   `viewBox` proportional – das ist dasselbe `clamp`, das vorher am `font-size`
   hing. */
.error-page__code {
  display: block;
  height: clamp(72px, 14vw, 140px);
  width: auto;
  margin: 0 auto -.5rem;
  opacity: 0.12;
}
.error-page__code text {
  /* `font-size` in Nutzereinheiten der `viewBox` – ohne die Angabe erbt der Text
     die 16 px des `body` und die Grafik zeigte eine winzige Zahl. */
  font-size: 140px;
  /* 800 stand hier und wurde nie so gezeichnet: der `@import` lud nur bis 700,
     der Browser nahm den nächstgelegenen Schnitt. Es wäre auch jetzt keins — die
     `@font-face` oben deklariert `400 700` und klemmt alles darüber auf 700
     (gemessen: 800 ergibt dieselbe Breite). Nicht die Datei ist der Grund, die
     trägt die ganze Achse; es ist die Deklaration. Hier steht also nur noch, was
     ohnehin ankommt. Wer echte 800 will, weitet den Bereich dort oben — und
     ändert damit das Aussehen dieser Seite. */
  font-weight: 700;
  letter-spacing: -0.04em;
  fill: var(--indigo);
}
.error-page__text { color: var(--stone-500); margin-top: 1rem; }
.error-page__actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ── Agentur-Profil ── */
.pill--green { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }

.ap-header { background: var(--warm-stone); border-bottom: 1px solid var(--stone-200); padding: 2.5rem 0; }
.ap-header__row { display: flex; align-items: flex-start; gap: 1.25rem; }
.ap-logo {
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--stone-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--indigo);
}
.ap-header__main { flex: 1; min-width: 0; }
.ap-name { margin-bottom: .35rem; }
.ap-subtitle { color: var(--stone-500); font-size: 15px; margin-bottom: .75rem; }
.ap-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.ap-statsbar { padding: 1.5rem 0 0; }
.ap-stats {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--stone-200);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ap-stat { flex: 1 1 0; min-width: 140px; background: #fff; padding: 1.25rem 1.5rem; }
.ap-stat__val { font-size: 24px; font-weight: 700; color: var(--midnight); letter-spacing: -0.02em; line-height: 1.2; }
.ap-stat__lbl { font-size: 13px; color: var(--stone-500); margin-top: 2px; }

.ap-section-label { color: var(--stone-500); margin-bottom: 1rem; }

/* Masonry-Fluss: Karten packen sich nach ihrer natürlichen Höhe,
   leere/fehlende Felder reservieren keinen Platz (kein Grid-Zeilenraster). */
.ap-grid { columns: 2; column-gap: 1.25rem; }
.ap-card {
  background: #fff; border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg); padding: 1.5rem;
  break-inside: avoid;
  margin-bottom: 1.25rem;
}
.ap-card__title { font-size: var(--text-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-500); margin-bottom: 1rem; }
.ap-text { color: var(--stone-500); margin-bottom: 1rem; }
.ap-text:last-child { margin-bottom: 0; }
.ap-quote { border-left: 3px solid var(--indigo); padding-left: 1rem; margin: 1rem 0; color: var(--stone-500); font-style: italic; }
.ap-social { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1.25rem; }

.ap-data { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.5rem; font-size: 14px; }
.ap-data dt { color: var(--stone-500); }
.ap-data dd { color: #171717; }
.ap-data a { color: var(--indigo); }
.ap-mapbtn { margin-top: 1.25rem; }

.ap-pills { display: flex; flex-wrap: wrap; gap: 6px; }

.ap-partners { display: flex; flex-direction: column; }
.ap-partner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--stone-100); }
.ap-partner:first-child { border-top: none; }
.ap-partner__name { font-size: 14px; font-weight: 600; color: #171717; }
.ap-level { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.ap-level--platinum { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.ap-level--gold { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.ap-level--silver { background: var(--stone-100); color: var(--stone-600); border: 1px solid var(--stone-200); }
.ap-level--bronze { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.ap-level--neutral { background: var(--stone-100); color: var(--stone-500); border: 1px solid var(--stone-200); }

.ap-refs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ap-ref {
  display: block; padding: 1.1rem 1.25rem;
  background: #fff; border: 1px solid var(--stone-200); border-radius: var(--radius-lg);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.ap-ref:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--stone-300); }
.ap-ref__name { font-size: 14px; font-weight: 600; color: #171717; }

.ap-map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }

/* ── Embed-Fassade ── */
/* Der Rahmen um die Fassade, gegen den die gestaffelte Reservierung rechnet
 * (#16). Gefragt ist die Spalte, die der Embed bekommt – nicht der Viewport:
 * eine sichtbare Scrollbar nimmt 15 px davon weg, und um solche Beträge bricht
 * ein Drittanbieter-Formular seine Felder eine Zeile weiter um. Die Stufen
 * selbst stehen bei dem Embed, der sie gemessen hat
 * (`site/snippets/blocks/formcraft.php`): sie gelten für sein Formular, nicht
 * für Fassaden überhaupt. */
.embed-facade-scope { container: embed-facade / inline-size; }

/* Die reservierte Höhe hält bis `filled`, nicht bis `active`.
 *
 * Der Unterschied ist der ganze Punkt: `active` heißt „freigegeben", nicht „da".
 * Das Formular holt nach der Freigabe erst seine Library per `import()` und
 * braucht danach rund eine Sekunde. Fiel die Reservierung schon bei `active`,
 * brach die Fläche auf 0 px ein und sprang dann auf 1151 – genau der Sprung, den
 * #5 abstellen sollte, nur eine Sekunde später verschoben.
 *
 * Bleibt ein Embed ganz aus, bleibt die Fläche stehen. Das ist die richtige
 * Ausfallart: Platz halten, nicht zusammenklappen. */
.embed-facade { position: relative; }
.embed-facade:not([data-state="filled"]) { min-height: var(--embed-facade-height, 0); }

/* Absolut, damit der Platzhalter nie zur Flusshöhe addiert: sonst steht die
 * Fassade für einen Frame auf Platzhalter *plus* Embed – 2300 px statt 1151. */
.embed-facade__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; padding: 1.5rem; text-align: center;
  background: #fff; border: 1px solid var(--stone-200); border-radius: var(--radius-lg);
}

/* Ohne Schalter (data-activate="load"): reserviert nur den Platz und sagt
 * nichts – ein Rahmen um eine leere Fläche wäre ein Versprechen ohne Inhalt. */
.embed-facade__placeholder--silent { background: var(--stone-100); border: none; }

/* Freigegeben, aber noch nicht da: der Schalter ist getan und darf nicht noch
 * einmal gedrückt werden – die Fläche, die er hinterlässt, bleibt als Skelett. */
.embed-facade[data-state="active"] .embed-facade__button,
.embed-facade[data-state="active"] .embed-facade__note { display: none; }

.embed-facade__glyph { color: var(--stone-500); }
.embed-facade__note { font-size: var(--text-body); color: var(--stone-600); margin: 0; }
.embed-facade__frame { display: block; border: 1px solid var(--stone-200); border-radius: var(--radius-lg); }

@media (max-width: 820px) {
  .ap-header__row { flex-wrap: wrap; }
  .ap-stats { grid-template-columns: repeat(2, 1fr); }
  .ap-grid { columns: 1; }
  .ap-refs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ap-refs { grid-template-columns: 1fr; }
}

/* ── Suche (Overlay) ──
   Die Lupe selbst steht bei der Navigation: sie ist ein Bedienelement der
   Kopfzeile, nicht Teil des Overlays, das sie aufklappt. */
.nav-search {
  border-top: 1px solid var(--stone-200);
  background: #fff;
  padding: 1rem 0;
}
.nav-search__form { display: flex; align-items: center; gap: .75rem; }
.nav-search__input {
  flex: 1; min-width: 0;
  padding: 10px 12px; font-size: 15px; font-family: inherit; color: #171717;
  background: var(--warm-stone); border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
}
.nav-search__input:focus { outline: none; border-color: var(--indigo-light); box-shadow: 0 0 0 3px var(--indigo-50); }

.search-form { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; }

.search-pages { display: flex; flex-direction: column; gap: .5rem; }
.search-result {
  display: block; padding: 1rem 1.25rem;
  background: #fff; border: 1px solid var(--stone-200); border-radius: var(--radius-md);
  transition: box-shadow .15s, border-color .15s;
}
.search-result:hover { box-shadow: var(--shadow-sm); border-color: var(--stone-300); }
.search-result__title { display: block; font-size: 15px; font-weight: 700; color: #171717; }
.search-result__excerpt { display: block; font-size: 13px; color: var(--stone-500); margin-top: 3px; line-height: 1.5; }
.search-result__url { display: block; font-size: 12px; color: var(--indigo); margin-top: 4px; }
/* ── Accessibility ── */

/* Skip-Link: nur bei Fokus sichtbar */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  background: var(--midnight);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* Visuell versteckt, aber für Screenreader lesbar */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Einheitlicher, kontraststarker Fokusindikator */
:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Auf dunklen Flächen heller Indikator */
.btn--dark:focus-visible,
.nav-cta:focus-visible,
.sticky-btn:focus-visible,
.footer__link:focus-visible,
.footer__social-link:focus-visible,
.section--midnight a:focus-visible {
  outline-color: #fff;
}

/* ── Redaktionelle Modul-Abstände (Layout-Zeilen-Einstellungen) ── */
.mod--pt-s { padding-top: 1rem; }
.mod--pt-m { padding-top: 2rem; }
.mod--pt-l { padding-top: 3.5rem; }
.mod--pb-s { padding-bottom: 1rem; }
.mod--pb-m { padding-bottom: 2rem; }
.mod--pb-l { padding-bottom: 3.5rem; }

/* Ausrichtung der Modul-Zeile (linksbündig = Default). Wirkt auf Text-, Inline-
   und Inline-Block-Inhalte (Überschriften, Fließtext, Buttons) aller Blöcke. */
.mod--align-center { text-align: center; }
.mod--align-right  { text-align: right; }

/* Value-Props liegen in einem Grid, das mit leeren Spalten nach rechts auffüllt –
   text-align allein verschiebt die Karten nicht. Bei Zentriert/Rechtsbündig daher
   auf Flexbox umstellen und die Karten-Gruppe tatsächlich ausrichten. */
.mod--align-center .card-grid,
.mod--align-right  .card-grid { display: flex; flex-wrap: wrap; }
.mod--align-center .card-grid { justify-content: center; }
.mod--align-right  .card-grid { justify-content: flex-end; }
.mod--align-center .card-grid > .card,
.mod--align-right  .card-grid > .card { flex: 0 1 clamp(220px, 30%, 300px); }
.mod--align-center .card__icon { margin-left: auto; margin-right: auto; }
.mod--align-right  .card__icon { margin-left: auto; }
/* im Value-Props-Link die linke Verankerung aufheben, damit er mitzentriert/-rechts */
.mod--align-center .card a[style*="flex-start"] { align-self: center !important; }
.mod--align-right  .card a[style*="flex-start"] { align-self: flex-end !important; }
@media (max-width: 768px) {
  .mod--align-center .card-grid > .card,
  .mod--align-right  .card-grid > .card { flex-basis: 100%; }
}
/* Content-Karten (Blog, Agentur, CMS) sind in sich linksbündig gestaltet – der
   Karteninhalt soll die Zeilen-Ausrichtung NICHT erben (Datum/Titel/Link bleiben
   links). Ausgerichtet werden nur Überschrift, Intro und die Karten-Gruppe. */
.mod--align-center .blog-card,
.mod--align-right  .blog-card,
.mod--align-center .agency-card,
.mod--align-right  .agency-card { text-align: left; }

/* Blog-Teaser-Intro: zieht sich über die volle Breite der Teaser-Reihe (3 oder 4
   Karten füllen stets den Container); die Text-Ausrichtung folgt der Zeile. */
.blogteaser__intro { color: var(--stone-500); margin: 0 0 1.75rem; }

/* In Modulen ist der Zeilen-Abstand die einzige vertikale Quelle →
   eingebautes Section-Padding neutralisieren (kein doppelter Abstand).
   Farbige/Full-Bleed-Bänder behalten ihr Innen-Padding. */
.mod .section { padding-top: 0; padding-bottom: 0; }
.mod .section--alt,
.mod .section--midnight,
.mod [class*="blogteaser--band-"] { padding-top: 3rem; padding-bottom: 3rem; }
.mod .cta-section { padding-top: 4rem; padding-bottom: 4rem; }

/* ── Teaser: Bandfarbe (ganzer Abschnitt) ── */
.blogteaser--band-indigo      { background: var(--indigo-50); }
.blogteaser--band-stone       { background: var(--stone-100); }
.blogteaser--band-warm        { background: var(--warm-stone); }
.blogteaser--band-indigo-dark { background: var(--indigo); }
.blogteaser--band-indigo-dark .section__title,
.blogteaser--band-indigo-dark .blogteaser__intro { color: #fff; }
.blogteaser--band-indigo-dark .section__eyebrow { color: rgba(255, 255, 255, .75); }
/* Wie beim Highlight-Block: Farbe und Fokusring gehören zusammen. Das Band ist
   var(--indigo), und genau die Farbe hat der Standard-Fokusring — ungeändert
   läge er unsichtbar auf dem Hintergrund. */
.blogteaser--band-indigo-dark .blogteaser__intro a:not(.btn) { color: #fff; }
.blogteaser--band-indigo-dark .blogteaser__intro a:focus-visible { outline-color: #fff; }
.blogteaser--band-indigo-dark .btn--outline { border-color: rgba(255, 255, 255, .5); color: #fff; }
.blogteaser--band-indigo-dark .btn--outline:hover { background: rgba(255, 255, 255, .12); }

/* ── Teaser: Kachelfarbe (einzelne Boxen) ── */
.blog-card--indigo { background: var(--indigo-50); border-color: var(--indigo-100); }
.blog-card--stone  { background: var(--stone-100); border-color: var(--stone-200); }
.blog-card--warm   { background: var(--warm-stone); border-color: var(--stone-200); }
.blog-card--indigo-dark { background: var(--indigo); border-color: var(--indigo); }
.blog-card--indigo-dark:hover { border-color: var(--indigo-light); }
.blog-card--indigo-dark .blog-card__title { color: #fff; }
.blog-card--indigo-dark .blog-card__excerpt { color: rgba(255, 255, 255, .8); }
.blog-card--indigo-dark .blog-card__more { color: #fff; }
.blog-card--indigo-dark .blog-card__meta,
.blog-card--indigo-dark .blog-card__meta time { color: rgba(255, 255, 255, .7); }
.blog-card--indigo-dark .blog-card__tag {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}

/* ── Blog-Teaser: 4-spaltige Variante ──
   `minmax(0, 1fr)` und nicht `1fr` (#24): `1fr` ist `minmax(auto, 1fr)`, und das
   `auto` hält jede Spalte auf der min-content-Breite ihrer Karte. Die kommt aus
   der Meta-Zeile – 224 px plus 48 px Kartenpolster –, und vier davon plus die
   Abstände verlangten 1037 px. Mit dem linken Polster des `.container` lag die
   rechte Kante des Grids damit bei 1069 px, unabhängig vom Viewport: ein
   horizontaler Scrollbalken auf der Startseite zwischen 901 und 1067 px.

   Die Zeile darüber kürzt ihre Pille „notfalls mit …" – nur greift das beim
   Flex-Schrumpfen, und die Spaltenberechnung des Grids sieht davon nichts. Sie
   reservierte die ungekürzte Breite und kam nie in die Lage, in der die Ellipse
   geholfen hätte. Die 0 als Minimum gibt der Spalte die Erlaubnis zu schrumpfen,
   und damit erst der Ellipse ihre Aufgabe: bei 901 px steht die Spalte auf
   191 px und die Karte behält 25 px Luft.

   Nicht drei Spalten über 900 px – das löst den Überlauf, indem es die
   Gestaltung ändert, die der Block will. Und kein `auto-fit`, das die
   Spaltenzahl vom Inhalt abhängig macht. `layout.spec.mjs` hält die Bandkanten;
   wächst die Meta-Zeile, wird dort eine Prüfung rot. */
.blog-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .blog-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid--4 { grid-template-columns: 1fr; } }

/* ── Checklisten aus dem RTE (Writer todoList) ──
   Rein optische Checkboxen (nicht anklickbar); der Haken kommt aus dem
   data-checked-Attribut, das im Panel gesetzt wird. */
ul[data-type="todo"] { list-style: none; padding-left: 0; margin: 1rem 0; }
ul[data-type="todo"] li { position: relative; padding-left: 2em; margin: .4rem 0; }
ul[data-type="todo"] li > p { margin: 0; }
ul[data-type="todo"] li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid var(--stone-300);
  border-radius: 5px;
  background: #fff;
  box-sizing: border-box;
}
ul[data-type="todo"] li[data-checked="true"]::before {
  background: var(--indigo);
  border-color: var(--indigo);
}
ul[data-type="todo"] li[data-checked="true"]::after {
  content: "";
  position: absolute;
  left: .42em;
  top: .2em;
  width: .34em;
  height: .66em;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Text-Highlight-Hintergrund ── */
.prose--hl { padding: 1.5rem 1.75rem; border-radius: var(--radius-lg); }
.prose--hl-indigo { background: var(--indigo-50); }
.prose--hl-stone  { background: var(--stone-100); }
.prose--hl-warm   { background: var(--warm-stone); }

/* Dunkle Variante: kräftiges Indigo mit weißem Text. Die Typo-Klassen erben die
   Farbe – überschrieben werden nur die Elemente mit eigener Farbangabe. */
.prose--hl-indigo-dark { background: var(--indigo); color: #fff; }
.prose--hl-indigo-dark .section__eyebrow,
.prose--hl-indigo-dark .t-caption { color: rgba(255, 255, 255, .75); }
.prose--hl-indigo-dark li::marker { color: rgba(255, 255, 255, .6); }
.prose--hl-indigo-dark a:not(.btn) { color: #fff; text-decoration: underline; }
.prose--hl-indigo-dark a:focus-visible { outline-color: #fff; }

/* Aufeinanderfolgende Highlight-Blöcke gleicher Farbe nahtlos verbinden:
   die einander berührenden Ecken eckig machen (sonst „Stufe" zwischen den Kästen). */
.section:has(.prose--hl-indigo):has(+ .section .prose--hl-indigo) .prose--hl,
.section:has(.prose--hl-indigo-dark):has(+ .section .prose--hl-indigo-dark) .prose--hl,
.section:has(.prose--hl-stone):has(+ .section .prose--hl-stone) .prose--hl,
.section:has(.prose--hl-warm):has(+ .section .prose--hl-warm) .prose--hl {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: .85rem;
}
.section:has(.prose--hl-indigo) + .section:has(.prose--hl-indigo) .prose--hl,
.section:has(.prose--hl-indigo-dark) + .section:has(.prose--hl-indigo-dark) .prose--hl,
.section:has(.prose--hl-stone) + .section:has(.prose--hl-stone) .prose--hl,
.section:has(.prose--hl-warm) + .section:has(.prose--hl-warm) .prose--hl {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: .85rem;
}

/* Abstand zwischen gestapelten Blöcken in derselben Spalte … */
.mod .section + .section { margin-top: 1.5rem; }

/* Ein Gutter statt drei: .layout liefert bereits den Seitenrand. Innerhalb einer
   Layout-Spalte sind die Polsterungen von .section (2rem) und .container (2rem)
   redundant – sie stauchen vor allem mehrspaltige Zeilen (in einer 1/3-Spalte
   gehen so 128px Textbreite verloren). Farbige Bänder (CTA, Two-Col) behalten
   ihre Innenabstände.
   Nur ab Tablet aufwärts: unterhalb 769px ist .layout randlos, dort ist die
   Section-Polsterung der einzige Seitenrand (siehe Mobil-Block oben). */
@media (min-width: 769px) {
  .mod .layout__col > .section:not(.section--alt):not(.section--midnight):not(.cta-section) {
    padding-left: 0;
    padding-right: 0;
  }
  .mod .layout__col > .section:not(.section--alt):not(.section--midnight):not(.cta-section) > .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Bild-Block: füllt die volle Breite seines Blocks/seiner Spalte. Der .container
   entfällt, die seitliche Section-Polsterung wird aufgehoben. Die Klasse .section
   bleibt am Wrapper, weil sie den vertikalen Rhythmus und den Abstand zu
   gestapelten Blöcken (.section + .section) trägt. */
.image-block { padding-left: 0; padding-right: 0; }
.image-block__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.image-block__caption { margin-top: .5rem; text-align: center; }

/* Auslöser der Lightbox: ein echter <button>, damit das Vergrößern auch per
   Tastatur geht. Er darf optisch nicht auffallen – das Bild bleibt der Held. */
.image-block__zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-lg);
}
.image-block__zoom:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

/* Lupe unten rechts: der einzige Hinweis auf Touch-Geräten, wo der zoom-in-Cursor
   entfällt. Bewusst als halbtransparenter Chip statt als freies Icon – ein reines
   Hellgrau würde auf hellen Bildern (Diagramme!) verschwinden, ein dunkles auf
   Fotos. Der Chip trägt seinen eigenen Kontrast auf jeden Untergrund. */
.image-block__hint {
  position: absolute;
  right: .625rem;
  bottom: .625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--stone-600);
  background: rgba(255, 255, 255, .82);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
  transition: background .15s, color .15s;
  pointer-events: none;              /* Klick gehört dem Button darunter */
}
.image-block__zoom:hover .image-block__hint,
.image-block__zoom:focus-visible .image-block__hint {
  color: var(--indigo);
  background: #fff;
}

/* ── Lightbox ── */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;                      /* über Header (100) und Sticky-Button (300) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(30, 27, 75, .96); /* --midnight, fast deckend – die Seite soll nicht durchschlagen */
}
.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  max-width: 100%;
  max-height: 100%;
}
.lightbox__img {
  display: block;
  /* Beides begrenzen, sonst sprengt ein hohes Bild den Viewport. Die 5rem lassen
     Platz für Untertitel und Schließen-Button. */
  max-width: 100%;
  max-height: calc(100vh - 5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: #fff;                  /* freigestellte PNGs bleiben lesbar */
}
.lightbox__caption {
  color: #fff;
  font-size: var(--text-body);
  text-align: center;
  max-width: 60ch;
}
.lightbox__caption[hidden] { display: none; }
.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .22); }
.lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Hintergrund nicht mitscrollen, solange das Overlay offen ist */
html.has-lightbox { overflow: hidden; }

/* Vertikale Position des Bildes in seiner Spalte. .layout__col ist Flex-Item von
   .layout und damit schon auf Zeilenhöhe gestreckt; als Flex-Spalte lässt sich der
   Block per auto-Margins verschieben. align-items: stretch hält die volle Breite.
   "Oben" braucht keine Regel (normaler Fluss).
   Nur wenn das Bild alleiniger Block der Spalte ist: sonst würde margin-top:auto
   den Abstand zu gestapelten Blöcken (.mod .section + .section) auffressen. */
.layout__col:has(> .section.image-block--v-middle:only-child),
.layout__col:has(> .section.image-block--v-bottom:only-child) {
  display: flex;
  flex-direction: column;
}
.mod .layout__col > .section.image-block--v-middle:only-child { margin-top: auto; margin-bottom: auto; }
.mod .layout__col > .section.image-block--v-bottom:only-child { margin-top: auto; }
/* … außer bei gleichfarbigen Highlight-Blöcken (sollen nahtlos zu einem Kasten verschmelzen) */
.section:has(.prose--hl-indigo) + .section:has(.prose--hl-indigo),
.section:has(.prose--hl-indigo-dark) + .section:has(.prose--hl-indigo-dark),
.section:has(.prose--hl-stone) + .section:has(.prose--hl-stone),
.section:has(.prose--hl-warm) + .section:has(.prose--hl-warm) { margin-top: 0; }

/* Gleiche Höhe für farbige Boxen nebeneinander: die Spalten sind per Flexbox
   bereits gleich hoch – hier lassen wir die (letzte) Highlight-Box je Spalte die
   Resthöhe ausfüllen, damit die Unterkanten bündig sind statt „ausgefranst". */
.layout__col:has(.prose--hl) { display: flex; flex-direction: column; }
.layout__col:has(.prose--hl) > .section:last-child:has(.prose--hl) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* .container trägt margin:0 auto. Als Flex-Item schlagen automatische Margins auf
   der Querachse das stretch-Verhalten → die Box würde auf Inhaltsbreite schrumpfen
   und zentrieren. width:100% erzwingt weiterhin die volle Spaltenbreite. */
.layout__col:has(.prose--hl) > .section:last-child:has(.prose--hl) > .container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.layout__col:has(.prose--hl) > .section:last-child:has(.prose--hl) > .container > .prose--hl {
  flex: 1 1 auto;
}

/* ── Tabelle ── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table caption { text-align: left; color: var(--stone-500); font-size: 13px; margin-bottom: .6rem; }
.data-table th,
.data-table td { border: 1px solid var(--stone-200); padding: .6rem .85rem; text-align: left; vertical-align: top; line-height: 1.5; }
.data-table th { font-weight: 700; color: #171717; }
.data-table thead.hl-indigo th { background: var(--indigo-50); }
.data-table thead.hl-stone  th { background: var(--stone-100); }
.data-table thead.hl-warm   th { background: var(--warm-stone); }
.data-table th.hl-indigo { background: var(--indigo-50); }
.data-table th.hl-stone  { background: var(--stone-100); }
.data-table th.hl-warm   { background: var(--warm-stone); }

/* ═══════════════════════════════════════════
   Bildkarte: Bild mit klickbaren Bereichen
═══════════════════════════════════════════ */

.imagemap-block { padding-left: 0; padding-right: 0; }

/* Anzeigebreite. Hochformatige Bilder – Landkarten vor allem – werden über die
   volle Blockbreite unverhältnismäßig hoch. Die Bereiche sitzen prozentual und
   skalieren deshalb ohne Zutun mit. */
.imagemap--w-s { max-width: 480px; }
.imagemap--w-m { max-width: 700px; }
.imagemap--w-l { max-width: 900px; }
.imagemap--a-center:not(.imagemap--w-full) { margin-left: auto; margin-right: auto; }
.imagemap--a-right:not(.imagemap--w-full)  { margin-left: auto; }

/* Die Bühne umschließt das Bild exakt – die Bereiche sind Prozentwerte DIESER
   Box. Jede zusätzliche Polsterung würde alle Bereiche verschieben. */
.imagemap__stage {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
}
.imagemap__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.imagemap__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Bewusst OHNE Kontur und mit weicher Kante.
   Eine scharfe Linie behauptet eine Genauigkeit, die eine von Hand gezeichnete
   Kontur nicht hat: Jede Abweichung von der Form im Bild wird als heller Schlitz
   sichtbar. Ohne Kante gibt es keine Referenzlinie mehr, an der man die
   Ungenauigkeit ablesen könnte – die Fläche wirkt als Leuchten.
   Der Weichzeichner kommt aus CSS und nicht als SVG-Filter, weil ein
   SVG-Filter in den gestreckten viewBox-Einheiten rechnen würde und die
   Unschärfe bei breiten Bildern in die Länge zöge. */
.imagemap__shape {
  fill: rgba(67, 56, 202, 0);
  stroke: none;
  filter: blur(7px);
  cursor: pointer;
  transition: fill .18s;
}
.imagemap__shape:hover,
.imagemap__shape.is-active {
  fill: rgba(67, 56, 202, .42);
}

/* Pins: als HTML positioniert, nicht als SVG-Kreis – im gestreckten viewBox
   würde ein <circle> zur Ellipse. */
.imagemap__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--indigo);
  border: 3px solid #fff;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  cursor: pointer;
  transition: transform .15s;
}
.imagemap__pin:hover,
.imagemap__pin.is-active { transform: translate(-50%, -50%) scale(1.25); }

/* Unsichtbarer, aber fokussierbarer Auslöser für Umrisse/Rechtecke: ein
   <polygon> lässt sich nicht per Tastatur erreichen. */
.imagemap__hit {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-full);
  /* Für die Maus unsichtbar: sonst läge dieser Knopf über der Mitte des Umrisses
     und würde dort dessen Hover-Hervorhebung blockieren. Tastaturbedienung ist
     davon nicht betroffen – Fokus und Enter funktionieren weiterhin. */
  pointer-events: none;
}
.imagemap__pin:focus-visible,
.imagemap__hit:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  background: rgba(255,255,255,.5);
}

/* ── Popover ── */
.imagemap__pop {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, 14px);
  width: min(280px, 80vw);
  padding: .9rem 1rem;
  line-height: 1.5;
  text-align: left;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.imagemap__pop--left { transform: translate(-100%, 14px); }
.imagemap__pop--up   { transform: translate(-50%, calc(-100% - 14px)); }
.imagemap__pop--left.imagemap__pop--up { transform: translate(-100%, calc(-100% - 14px)); }
.imagemap__pop h4 { margin: 0 1.4rem .3rem 0; font-size: var(--text-subtitle); }
.imagemap__pop p  { margin: 0 0 .6rem; font-size: var(--text-body); color: var(--stone-600); }
.imagemap__pop-close {
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--stone-500);
  background: none;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.imagemap__pop-close:hover { background: var(--stone-100); color: var(--midnight); }

.imagemap__caption { margin-top: .5rem; text-align: center; }

/* ── Liste: laut Wunsch nur auf Mobil sichtbar ──
   Sie bleibt im HTML (nicht bedingt gerendert), damit Suchmaschinen die
   Überschriften und Links sehen und das Popover seinen Inhalt daraus klont. */
.imagemap__list { margin-top: 1.25rem; }
.imagemap__list-title { font-size: var(--text-subtitle); margin-bottom: .6rem; }
.imagemap__list ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.imagemap__entry {
  padding: .8rem 1rem;
  background: var(--stone-100);
  border-radius: var(--radius-md);
}
.imagemap__entry h4 { font-size: var(--text-subtitle); margin-bottom: .25rem; }
.imagemap__entry p  { font-size: var(--text-body); color: var(--stone-600); margin-bottom: .5rem; }

@media (min-width: 769px) {
  .imagemap__list { display: none; }
}
/* Auf Mobil sind eingezeichnete Bereiche zu klein zum Treffen – dort führt die
   Liste, und das Popover entfällt zugunsten der ohnehin sichtbaren Einträge. */
@media (max-width: 768px) {
  .imagemap__pop { display: none; }
  /* Der Block gibt die seitliche Polsterung ab, damit das BILD randlos steht.
     Die Textliste braucht sie aber – sonst klebt sie am Displayrand. */
  .imagemap__list { padding-left: 1rem; padding-right: 1rem; }
}

/* Buttons in Popover und Bereichsliste kompakter – die Kästen sind klein. */
.imagemap__entry .btn { font-size: 12px; padding: 7px 14px; gap: 4px; }

/* Im Popover noch eine Stufe kleiner: Dort steht der Button meist allein unter
   der Überschrift und nahm in der Standardgröße 40 % der Boxbreite ein – er
   wirkte dadurch wie das Hauptelement statt wie ein Zusatz.
   Die Polsterung nur für gefüllte Varianten: btn--link ist bewusst flächenlos. */
.imagemap__pop .btn { font-size: 11px; gap: 4px; }
.imagemap__pop .btn:not(.btn--link) { padding: 5px 12px; }

/* Auf Mobil ist der Textlink der einzige Antipp-Bereich – etwas Höhe schadet
   nicht, ohne dass er nach Schaltfläche aussieht. */
@media (max-width: 768px) {
  .imagemap__entry .btn--link { padding: 6px 0; }
}

/* ═══════════════════════════════════════════
   Agentur-Live-Filter (Checkbox-Dropdowns)
═══════════════════════════════════════════ */
.agency-filters {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.5rem;
}
.agency-filter { position: relative; }
.agency-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 150px;
  padding: 8px 12px;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.agency-filter.is-active .agency-filter__toggle { border-color: var(--indigo); }
.agency-filter__label { color: var(--stone-500); }
.agency-filter__summary { font-weight: 600; color: #171717; margin-left: auto; }
.agency-filter__chevron { color: var(--stone-500); transition: transform .15s; }
.agency-filter.is-open .agency-filter__chevron { transform: rotate(180deg); }

/* Ein <fieldset> – die Checkboxen darin sind eine benannte Gruppe. Seine
   Herkunftsstile müssen dafür weg: der Rand kommt von hier, und die 2px
   Eigenmarge würden das absolut gesetzte Menü daneben schieben. */
.agency-filter__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  margin: 0;
  min-width: 220px;
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.agency-filter__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.agency-filter__opt:hover { background: var(--stone-100); }
.agency-filter__opt input { flex-shrink: 0; }
/* Ausgegraut: keine Treffer in Kombination mit der aktuellen Auswahl */
.agency-filter__opt.is-unavailable {
  color: var(--stone-300);
  cursor: not-allowed;
}
.agency-filter__opt.is-unavailable:hover { background: none; }

.agency-filters__reset {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--indigo);
  background: none;
  border: 0;
  cursor: pointer;
}
.agency-filters__reset:hover { text-decoration: underline; }

/* Während des Ladens dezent abblenden – Position bleibt erhalten (kein Sprung) */
.agency-results { transition: opacity .15s; }
.agency-results.is-loading { opacity: .5; pointer-events: none; }

/* Hier stand, was die Browser-Eigenheiten eines <button> im Seitenwechsel
   abräumte. Seit #13 ist jeder Seitenwechsel ein <a>, in beiden Listen wie in
   den Checklisten – die Regel traf nichts mehr. Was sie ausglich, steht als
   Hinweis am line-height von .blog-pagination__link. */