/* ══════════════════════════════════════════════════════════════════════
   AGENTUREN1.DE — Skin „Institutsblau"

   Weißes Papier, tiefes Institutsblau, dazwischen ein Band aus Tiefsee.
   Eine einzige Groteskfamilie, kräftig gesetzt — keine Serife.

   Die Leitidee steht in design/tiefenlot-philosophie.md: die Ästhetik des
   Messens. Autorität entsteht nicht aus Lautstärke, sondern aus der
   sichtbaren Menge sorgfältiger Handlungen.

   Warum das Blau ein anderes ist als bei der Schwestermarke: TopExperte
   trägt ein helles Cobalt (#2563EB) — die Farbe der Software. Hier steht ein
   tiefes, gedecktes Azur, wie es Banken, Notariate und Versicherer benutzen.
   Zusammen mit der eigenen Schrift, den Haarlinien und den fast rechten
   Winkeln entsteht ein Auftritt, der mit dem der Schwestermarke nichts als
   den Farbkreis gemeinsam hat.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Schrift ─── */
/* Eine Familie für alles. Plus Jakarta Sans: geometrische Grotesk mit etwas
   mehr Eigenart als die üblichen Verdächtigen, kräftig genug für große
   Schlagzeilen und ruhig genug für Tabellen. Bewusst NICHT Inter — das
   trägt die Schwestermarke, und zwei gleiche Schriften wären zwei gleiche
   Seiten. */
@font-face{font-family:'Jakarta';font-style:normal;font-weight:400 800;font-display:swap;src:url('/static/fonts/jakarta-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}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:400 800;font-display:swap;src:url('/static/fonts/jakarta-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}

/* ─── Token-Ebene ─── */
:root {
  /* Institutsblau statt Cobalt. Tiefer, gedeckter, weniger Bildschirm. */
  --blue-50:  #F1F6FB;
  --blue-100: #DDE9F5;
  --blue-200: #BBD2E9;
  --blue-400: #5B93C8;
  --blue-500: #2C6DA8;
  --blue-600: #134E8B;   /* PRIMÄR */
  --blue-700: #0E3D6E;   /* Hover */
  --blue-800: #0B2F55;
  --blue-900: #0C2742;   /* das dunkle Band */

  /* Kühles, sehr helles Papiergrau — kein Slate-Blaustich, kein Beige. */
  --slate-50:  #F5F8FB;
  --slate-100: #EDF2F7;
  --slate-200: #DEE7F0;
  --slate-300: #C6D4E2;
  --slate-400: #8C9FB4;
  --slate-500: #62768D;
  --slate-600: #45596F;
  --slate-700: #2C3F54;
  --slate-800: #1A2C3F;
  --slate-900: #10233A;
  --slate-950: #081726;

  /* Auszeichnung: gedecktes Messing. Sparsam, nie neben dem Blau. */
  --gold:      #B08A45;
  --gold-dark: #8A6C34;
  --gold-tint: rgba(176, 138, 69, 0.11);
  --gold-tint-strong: rgba(176, 138, 69, 0.26);

  --surface:      #FFFFFF;
  --surface-alt:  #F5F8FB;
  --surface-tint: #F1F6FB;
  --surface-dark: #0C2742;

  --border:        #DEE7F0;
  --border-strong: #C6D4E2;
  --border-brand:  #BBD2E9;

  /* Instrumentenbau: kleine Radien. Ein Messgerät ist gefast, nicht geknetet. */
  --r-xs: 1px;  --r-sm: 2px;  --r: 2px;    --r-md: 3px;
  --r-lg: 3px;  --r-xl: 4px;  --r-2xl: 5px; --r-3xl: 6px;
  --r-pill: 100px;

  /* Schatten sind fast weg. Getrennt wird über Haarlinien und Flächen —
     Schattenkästen sind die Handschrift von Software, nicht von Papier. */
  --shadow-xs: 0 1px 0 rgba(16, 35, 58, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 35, 58, 0.05);
  --shadow:    0 2px 6px rgba(16, 35, 58, 0.06);
  --shadow-md: 0 4px 14px rgba(16, 35, 58, 0.07);
  --shadow-lg: 0 10px 28px rgba(16, 35, 58, 0.09);
  --shadow-xl: 0 18px 44px rgba(16, 35, 58, 0.11);
  --shadow-brand:    0 2px 10px rgba(19, 78, 139, 0.20);
  --shadow-brand-lg: 0 10px 26px rgba(19, 78, 139, 0.22);

  --brand-schleier-06: rgba(19, 78, 139, .05);
  --brand-schleier-08: rgba(19, 78, 139, .06);
  --brand-schleier-09: rgba(19, 78, 139, .07);
  --brand-schleier-14: rgba(19, 78, 139, .10);
  --brand-schleier-20: rgba(19, 78, 139, .13);
  --brand-schleier-22: rgba(19, 78, 139, .14);
  --brand-schleier-24: rgba(19, 78, 139, .15);
  --brand-schleier-28: rgba(19, 78, 139, .17);
  --brand-schleier-30: rgba(19, 78, 139, .18);
  --brand-schleier-32: rgba(19, 78, 139, .19);
  --brand-schleier-35: rgba(19, 78, 139, .21);
  --brand-schleier-42: rgba(19, 78, 139, .25);

  --font-sans:    'Jakarta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Jakarta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Eigene Maße dieser Marke */
  --ag-band:   #0C2742;    /* das eine dunkle Band */
  --ag-linie:  #DEE7F0;
}

body { letter-spacing: 0; background: var(--surface); }
::selection { background: var(--blue-100); color: var(--blue-800); }

/* ─── Typografie ─── */
/* Schlagzeilen stehen fett und eng — ein Verzeichnis wird überflogen, nicht
   gelesen. Die Eigenart kommt aus der Laufweite, nicht aus einer Zierschrift. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  /* -0.035em sah in der Vorschau besser aus, löste aber Punkt und Komma
     sichtbar vom letzten Buchstaben — Laufweite wirkt auch hinter dem
     letzten Zeichen. -0.026em ist der Wert, bei dem die Zeile noch eng
     steht und die Satzzeichen wieder anliegen. */
  letter-spacing: -0.026em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 5.2vw, 60px); }
h2 { font-size: clamp(27px, 3.4vw, 40px); }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.022em; }
h4, h5, h6 { font-weight: 700; letter-spacing: -0.012em; }
p  { line-height: 1.62; }

.t-caps, .p-tier, .eyebrow-pill {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  font-size: 10px;
}

/* ─── Wortmarke ─── */
/* Wortmarke mit vorangestellter Haarlinie — das Seil, an dem das Lot hängt.
   Die Ziffer trägt die Markenfarbe. */
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.028em;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding-left: 15px;
  position: relative;
}
.logo::before {
  content: '';
  position: absolute;
  left: 0; top: -3px; bottom: 1px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--brand) 22%, var(--brand));
}
.logo-wort   { color: var(--ink); }
.logo-ziffer { color: var(--brand); }
.footer .logo-wort { color: #FFFFFF; }
.footer .logo::before { background: linear-gradient(to bottom, transparent, var(--blue-400) 22%, var(--blue-400)); }
.footer .logo-ziffer { color: var(--blue-400); }
.mob-drawer .logo { font-size: 20px; }

/* ─── Navigation ─── */
/* Haarlinie statt Schatten: Die Leiste sitzt auf dem Papier, sie schwebt
   nicht darüber. */
.navbar {
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.navbar.scrolled { box-shadow: none; border-bottom-color: var(--border-strong); }
.nav-links a, .nav-dropdown-toggle {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nav-links a.active, .nav-dropdown-toggle.active {
  background: none;
  color: var(--brand);
  border-radius: 0;
  box-shadow: inset 0 -2px 0 var(--brand);
}

/* ─── Bedienelemente ─── */
.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.012em;
  border-radius: var(--r-sm);
}
.btn-primary { background: var(--brand); box-shadow: none; border: 1px solid var(--brand); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: var(--shadow-brand); }
.btn-outline { border: 1px solid var(--border-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: none; }

/* ─── Flächen und Karten ─── */
.card, .p-card, .art-card, .exv-card, .expert-card {
  border: 1px solid var(--border);
  box-shadow: none;
  background: var(--surface);
}
.card:hover, .art-card:hover, .exv-card:hover, .expert-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: none;
}
.p-card.feat  { border-color: var(--brand); border-width: 2px; }
.p-card.award { border-color: var(--gold); }
.p-card.award .p-tier {
  display: inline-block;
  padding: 4px 12px;
  color: var(--gold-dark);
  background: var(--gold-tint);
  border: 1px solid var(--gold);
  border-radius: var(--r-xs);
}
.feat-badge {
  background: var(--brand);
  border-radius: var(--r-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 10px;
}
.price-val, .p-now {
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

/* ─── Formulare ─── */
.form-input, .form-select, .form-textarea, input[type="text"],
input[type="email"], input[type="password"], input[type="tel"], textarea, select {
  border-radius: var(--r-sm);
  border-color: var(--border-strong);
}
.form-input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--blue-50);
}

/* ─── Footer ─── */
.footer { background: var(--surface-dark); }
.footer h4 {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════
   Bauteile der Startseite

   agenturen1 hat eine eigene Startseite (templates/home_agenturen1.html).
   Sie ist als VERZEICHNIS gebaut, nicht als Verkaufsseite: Suche, Kategorien,
   Agenturen, Artikel, Angebote. Preise stehen unter /angebot und nirgends
   sonst — wer sucht, will nicht zuerst wissen, was das Eintragen kostet.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Kopfbereich mit Suche ─── */
.ag-hero {
  padding: 84px 0 56px;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, var(--blue-50) 0%, transparent 62%),
    var(--surface);
  text-align: center;
  position: relative;
}
.ag-zaehler {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 7px 16px 7px 8px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-xs);
}
.ag-zaehler b { color: var(--brand); font-weight: 800; }
.ag-zaehler i {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  font-style: normal;
}
.ag-zaehler i svg { width: 12px; height: 12px; }

.ag-hero h1 { max-width: 15em; margin: 0 auto 20px; }
.ag-hero h1 em { font-style: normal; color: var(--brand); }
.ag-hero-lead {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 34em;
  margin: 0 auto 34px;
}

/* Die Suche ist das Hauptbedienelement der Seite und sieht auch so aus:
   groß, mittig, mit einem Knopf, den man nicht suchen muss. */
.ag-suche {
  display: flex;
  max-width: 620px;
  margin: 0 auto 20px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 22px;
  box-shadow: 0 8px 28px rgba(16, 35, 58, .08);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ag-suche:focus-within {
  border-color: var(--brand);
  box-shadow: 0 8px 30px rgba(19, 78, 139, .16);
}
.ag-suche input {
  flex: 1;
  border: none;
  background: none;
  font-size: 15.5px;
  color: var(--ink);
  padding: 13px 0;
  outline: none;
  min-width: 0;
}
.ag-suche input::placeholder { color: var(--text-muted); }
.ag-suche button {
  width: 46px; height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  transition: background var(--dur) var(--ease);
}
.ag-suche button:hover { background: var(--brand-hover); }
.ag-suche button svg { width: 18px; height: 18px; }

.ag-beliebt { font-size: 13.5px; color: var(--text-muted); }
.ag-beliebt a { color: var(--brand); font-weight: 600; }
.ag-beliebt a:hover { text-decoration: underline; }

/* ─── Kategorien-Leiste ─── */
/* Waagerecht scrollend, damit sie auf jedem Bildschirm eine Zeile bleibt.
   Die Leiste blendet an beiden Enden aus, statt hart abzuschneiden. */
.ag-chips-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 18px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ag-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 24px;
}
.ag-chips::-webkit-scrollbar { display: none; }
.ag-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 9px 17px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ag-chip:hover { border-color: var(--brand); color: var(--brand); }
.ag-chip svg { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; }

/* ─── Abschnitte ─── */
.ag-sek { padding: 76px 0; }
.ag-sek--hell { background: var(--surface); }
.ag-sek--matt { background: var(--surface-alt); }
.ag-sek--tief { background: var(--ag-band); }
.ag-sek--tief h2, .ag-sek--tief h3 { color: #fff; }
.ag-sek--tief p { color: rgba(232, 240, 248, .76); }

.ag-kopf { margin-bottom: 38px; display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.ag-kopf-text { max-width: 40em; }
.ag-kopf h2 { margin-bottom: 10px; }
.ag-kopf p { font-size: 16px; color: var(--text-secondary); }
.ag-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  display: block;
  margin-bottom: 12px;
}
.ag-sek--tief .ag-tag { color: var(--blue-400); }
.ag-mehr {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.ag-mehr svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.ag-mehr:hover svg { transform: translateX(3px); }

/* ─── Kategorienraster ─── */
.ag-kats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ag-kat {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 20px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ag-kat:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ag-kat-ico {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--blue-50);
  color: var(--brand);
  border-radius: var(--r-sm);
  margin-bottom: 15px;
}
.ag-kat-ico svg { width: 19px; height: 19px; }
.ag-kat b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -.015em; margin-bottom: 5px; }
.ag-kat span { font-size: 13px; color: var(--text-muted); }

/* ─── Karten (Agenturen, Artikel, Angebote) ─── */
.ag-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ag-raster--3 { grid-template-columns: repeat(3, 1fr); }
.ag-karte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ag-karte:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ag-karte-bild { aspect-ratio: 16 / 10; background: var(--surface-alt); overflow: hidden; }
.ag-karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.ag-karte-inhalt { padding: 18px 19px 20px; display: flex; flex-direction: column; flex: 1; }
.ag-karte-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 9px;
}
.ag-karte h3 { font-size: 16.5px; margin-bottom: 8px; line-height: 1.32; }
.ag-karte p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; flex: 1; }
.ag-karte-fuss {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}
.ag-karte-fuss img, .ag-karte-fuss .ag-mono {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ag-mono {
  display: grid; place-items: center;
  background: var(--blue-50);
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
}

/* Profilkarte im Verzeichnis-Anriss */
.ag-profil { text-align: center; padding: 26px 18px 22px; }
/* Das Profil-Raster trägt bis zu zwölf Kacheln und bleibt deshalb auch auf
   dem Telefon zweispaltig — einspaltig wären das zwölf volle Bildschirme.
   Die Karten sind schmal genug dafür: Rundbild, Name, eine Zeile Text. */
.ag-raster--profile { gap: 16px; }
/* In einer schmalen Kachel sprengt ein deutsches Wortungetüm sonst die
   Karte: „Suchmaschinenoptimierung" ist länger als die halbe Spalte auf
   dem Telefon. Erst trennen, und nur zur Not mitten im Wort brechen. */
.ag-raster--profile .ag-profil b,
.ag-raster--profile .ag-profil span { hyphens: auto; overflow-wrap: anywhere; }
.ag-profil-bild {
  width: 78px; height: 78px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 14px;
  display: block;
  border: 1px solid var(--border);
}
.ag-profil b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -.015em; margin-bottom: 4px; }
.ag-profil span { font-size: 13px; color: var(--text-muted); display: block; }
.ag-profil-ort { margin-top: 10px; font-size: 12px; color: var(--text-subtle); }

/* Leerer Zustand: ehrlich statt Platzhalterkacheln */
.ag-leer {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 54px 32px;
  text-align: center;
  background: #fff;
}
.ag-leer b { display: block; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; margin-bottom: 10px; }
.ag-leer p { font-size: 15px; color: var(--text-secondary); max-width: 34em; margin: 0 auto 22px; }

/* ─── Dunkles Band: Aufruf an Agenturen ─── */
.ag-tief-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.ag-liste { list-style: none; margin-top: 6px; }
.ag-liste li {
  display: flex;
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(232, 240, 248, .14);
  font-size: 15px;
  color: rgba(232, 240, 248, .84);
}
.ag-liste li:last-child { border-bottom: none; }
.ag-liste svg { width: 17px; height: 17px; color: var(--blue-400); flex-shrink: 0; margin-top: 2px; }
.ag-sek--tief .btn-primary { background: #fff; color: var(--blue-900); border-color: #fff; }
.ag-sek--tief .btn-primary:hover { background: var(--blue-50); border-color: var(--blue-50); color: var(--blue-900); }
.ag-sek--tief .btn-primary svg { color: var(--blue-900); }
.ag-sek--tief .btn-outline { background: transparent; border-color: rgba(232, 240, 248, .34); color: #fff; }
.ag-sek--tief .btn-outline:hover { background: rgba(232, 240, 248, .08); border-color: #fff; color: #fff; }
.ag-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.ag-ctas .btn { padding: 14px 24px; font-size: 15px; }

/* ─── Wortwolke am Fuß ─── */
.ag-wolke { display: flex; flex-wrap: wrap; gap: 9px; }
.ag-wolke a {
  font-size: 13.5px;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 7px 15px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ag-wolke a:hover { border-color: var(--brand); color: var(--brand); }

/* ─── Kleinere Bildschirme ─── */
@media (max-width: 1024px) {
  .ag-kats, .ag-raster { grid-template-columns: repeat(2, 1fr); }
  .ag-raster--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .ag-hero { padding: 60px 0 42px; }
  .ag-sek { padding: 56px 0; }
  .ag-tief-grid { grid-template-columns: 1fr; gap: 38px; }
  .ag-kopf { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .ag-kats, .ag-raster, .ag-raster--3 { grid-template-columns: 1fr; }
  .ag-raster--profile { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ag-raster--profile .ag-profil { padding: 20px 10px 16px; }
  .ag-raster--profile .ag-profil-bild { width: 60px; height: 60px; margin-bottom: 11px; }
  .ag-raster--profile .ag-profil b { font-size: 14px; }
  .ag-raster--profile .ag-profil span { font-size: 12px; }
  .ag-suche { padding-left: 16px; }
  .ag-ctas .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ─── Bild-Wortmarke ─── */
/* Sobald static/logos/agenturen1.png liegt, ersetzt sie den gesetzten
   Schriftzug. Die Haarlinie davor entfällt dann — das Logo bringt sein
   eigenes Zeichen mit. */
.logo:has(.logo-bild) { padding-left: 0; }
.logo:has(.logo-bild)::before { display: none; }
.logo-bild { height: 40px; width: auto; display: block; }
.mob-drawer .logo-bild, .footer .logo-bild { height: 32px; }
@media (max-width: 560px) { .logo-bild { height: 32px; } }

/* Der Ort auf der Profilseite führt auf seine Ortsseite. Unterstrichen, damit
   er als Link erkennbar ist — in einer Zeile aus Symbolen und Kurzangaben
   erkennt man einen Link sonst erst beim Überfahren. */
.ep-ort-link, .ep-contact-item a[href^="/agenturen/"] {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: var(--border-brand);
  text-underline-offset: 3px;
}
.ep-ort-link:hover, .ep-contact-item a[href^="/agenturen/"]:hover {
  text-decoration-color: var(--brand);
}

/* ─── Standortblock in der Seitenspalte ─── */
.ep-standort {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 18px;
  background: #fff;
}
.ep-standort-kopf {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ep-standort-adresse {
  padding: 16px 18px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-secondary);
}
.ep-standort-adresse strong { color: var(--ink); font-weight: 700; }
.ep-karte {
  display: block;
  width: 100%;
  height: 190px;
  border: 0;
  border-top: 1px solid var(--border);
  /* Die Karte ist bunt und zieht sonst mehr Aufmerksamkeit als der Inhalt
     daneben. Beim Überfahren kommt sie zu voller Sättigung zurück. */
  filter: saturate(.62);
  transition: filter var(--dur) var(--ease);
}
.ep-karte:hover { filter: saturate(1); }
.ep-karte-quelle {
  padding: 7px 18px;
  font-size: 10.5px;
  color: var(--text-subtle);
  border-top: 1px solid var(--border);
}
.ep-route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand);
}
.ep-route:hover { background: var(--blue-50); }

/* ─── Mehrfachauswahl im Portal ─── */
.ag-hinweis {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-left: 8px;
}
.ag-auswahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px;
  background: #fff;
}
.ag-haken {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r-xs);
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ag-haken:hover { background: var(--blue-50); color: var(--ink); }
.ag-haken input { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; margin: 0; }
.ag-haken:has(input:checked) { background: var(--blue-50); color: var(--brand); font-weight: 600; }

/* ─── Schilder auf der Profilseite ─── */
.ep-schilder { display: flex; flex-wrap: wrap; gap: 7px; padding: 15px 18px; }
.ep-schilder a {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ep-schilder a:hover { border-color: var(--brand); color: var(--brand); }

/* ─── Kanäle im Kontaktkasten ─── */
.ep-kanaele-zeile { align-items: flex-start; }
.ep-kanaele { display: flex; flex-wrap: wrap; gap: 7px; }
.ep-kanaele a {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.ep-kanaele a:hover { border-color: var(--brand); color: var(--brand); background: var(--blue-50); }
.ep-kanaele svg { width: 15px; height: 15px; }

/* ─── Eckdaten und Kontaktmöglichkeiten ───────────────────────────────────
   Die Feldliste des Agentur-Eintrags. Jede Zeile hat dieselbe Höhe, ob
   gefüllt oder nicht — genau das macht zwei Profile vergleichbar. Ein
   leeres Feld wird gedämpft, nicht versteckt: Die Lücke ist die Aussage.  */
.ag-feld {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.ag-feld:last-of-type { border-bottom: none; }
.ag-feld > svg { width: 15px; height: 15px; color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.ag-feld-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ag-feld-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ag-feld-wert { color: var(--text); overflow-wrap: anywhere; }
.ag-feld-text a { color: var(--brand); overflow-wrap: anywhere; }
.ag-feld-text a:hover { text-decoration: underline; }
.ag-feld-adresse { font-style: normal; color: var(--text); line-height: 1.5; }
.ag-feld-adresse strong { font-weight: 600; }

/* Leeres Feld: gedämpft, aber lesbar — es ist eine Information, kein Fehler. */
.ag-feld--leer > svg { color: var(--text-subtle); }
.ag-feld-fehlt { color: var(--text-muted); font-style: italic; }

/* Der Haken steht für „übernommen und bestätigt", nie für „bezahlt". */
.ag-verifiziert > svg { color: var(--brand); width: 17px; height: 17px; margin-top: 1px; }
.ag-verifiziert .ag-feld-wert { font-weight: 600; color: var(--brand); }

.ag-bewerten,
.ag-uebernehmen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 16px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.ag-bewerten {
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
}
.ag-bewerten:hover { border-color: var(--brand); color: var(--brand); background: var(--blue-50); }
.ag-bewerten svg { width: 15px; height: 15px; color: #E0A008; flex-shrink: 0; }

.ag-uebernehmen { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.ag-uebernehmen:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.ag-uebernehmen svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Der Uebernahme-Knopf war ein <a> und ist seit dem 23.08.2026 ein <button>
   in einem Formular: Der Uebernahme-Link muss per POST angefordert werden,
   damit ihn kein Linkscanner ausloest. Ein Button erbt weder Schrift noch
   Breite vom Eltern-Element — beides hier nachgezogen, sonst steht in der
   Kontaktkarte ploetzlich ein schmaler Knopf in der Systemschrift. */
button.ag-uebernehmen { width: 100%; font-family: inherit; cursor: pointer; }
.ag-kontakt form { margin: 0; }

/* Dieselbe Umstellung in den beiden grossen Claim-Bloecken: Dort steht das
   Formular jetzt da, wo vorher der Link stand — als Flex-Element in
   .ep-claim-row bzw. .ep-cta. Ohne margin:0 riesse ein voreingestellter
   Formularabstand die Zeile auseinander. */
.ep-claim-row form,
.ep-cta form { margin: 0; }

.ag-kanaele { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.ag-kanaele a {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.ag-kanaele a:hover { border-color: var(--brand); color: var(--brand); background: var(--blue-50); }
.ag-kanaele svg { width: 14px; height: 14px; }

/* ─── Bewertungen ─────────────────────────────────────────────────────────
   Der Spiegel oben (Schnitt + Verteilung), darunter die einzelnen
   Bewertungen. Keine Sonderbehandlung für gute Sterne: ein 1-Stern-Eintrag
   sieht aus wie ein 5-Stern-Eintrag, nur die Sterne sind andere.          */
.bw-spiegel {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 28px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 24px;
}
@media (max-width: 640px) { .bw-spiegel { grid-template-columns: 1fr; gap: 18px; } }

.bw-schnitt { text-align: center; border-right: 1px solid var(--border); padding-right: 24px; }
@media (max-width: 640px) { .bw-schnitt { border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 16px; } }
.bw-schnitt > b { font-size: 46px; font-weight: 700; letter-spacing: -.03em; color: var(--brand); }
.bw-schnitt > span { font-size: 15px; color: var(--text-muted); margin-left: 4px; }
.bw-schnitt-sterne { display: flex; justify-content: center; gap: 3px; margin: 6px 0 8px; }
.bw-schnitt-sterne svg, .bw-eintrag-sterne svg { width: 17px; height: 17px; }
.bw-schnitt-sterne .voll, .bw-eintrag-sterne .voll { fill: #E0A008; }
.bw-schnitt-sterne .leer, .bw-eintrag-sterne .leer { fill: var(--border); }
.bw-schnitt-zahl { font-size: 12.5px; color: var(--text-muted); }

.bw-balken-zeile { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.bw-balken-nr {
  display: flex; align-items: center; gap: 3px;
  font-size: 12.5px; color: var(--text-secondary); width: 30px; flex-shrink: 0;
}
.bw-balken-nr svg { width: 11px; height: 11px; fill: #E0A008; }
.bw-balken-spur { flex: 1; height: 7px; background: var(--surface-alt); border-radius: 99px; overflow: hidden; }
.bw-balken-spur i { display: block; height: 100%; background: var(--brand); }
.bw-balken-wert { font-size: 12px; color: var(--text-muted); width: 40px; text-align: right; flex-shrink: 0; }

.bw-pruefsatz {
  font-size: 12.5px; line-height: 1.6; color: var(--text-muted);
  margin: 12px 0 26px; max-width: 74ch;
}

.bw-liste { display: flex; flex-direction: column; gap: 16px; }
.bw-eintrag { border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 22px; }
.bw-eintrag-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bw-eintrag-sterne { display: flex; gap: 2px; }
.bw-eintrag-geprueft {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand);
}
.bw-eintrag-geprueft svg { width: 11px; height: 11px; }
.bw-eintrag-titel { font-size: 16px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 6px; }
.bw-eintrag-text { font-size: 14.5px; line-height: 1.7; color: var(--text); margin: 0 0 12px; white-space: pre-line; }
.bw-eintrag-fuss { font-size: 12.5px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; }

.bw-antwort { margin-top: 14px; border-left: 2px solid var(--brand); background: var(--surface-alt); padding: 12px 16px; border-radius: 0; }
.bw-antwort-kopf { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 5px; }
.bw-antwort p { font-size: 14px; line-height: 1.65; margin: 0; color: var(--text); }

.bw-melden { margin-top: 12px; }
.bw-melden button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12px; color: var(--text-muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.bw-melden button:hover { color: var(--brand); }

/* ─── Formularseite „Erfahrung teilen" ─── */
.bw-page { padding: 112px 0 88px; background: var(--surface); }
.bw-schmal { max-width: 720px; }
.bw-h1 { font-size: 38px; font-weight: 700; letter-spacing: -.035em; line-height: 1.12; margin: 8px 0 12px; }
.bw-h1 em { font-style: normal; color: var(--brand); }
.bw-lead { font-size: 16px; color: var(--text-secondary); margin-bottom: 32px; max-width: 60ch; }

.bw-fehler {
  border: 1px solid var(--border-brand); background: var(--blue-50);
  border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 24px; font-size: 14px;
}
.bw-fehler ul { margin: 6px 0 0; padding-left: 18px; }

.bw-schritt { border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 24px; margin: 0 0 18px; }
.bw-schritt legend {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: -.02em; padding: 0 8px; margin-left: -8px;
}
.bw-nr {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; flex-shrink: 0;
}

/* Quelltext-Reihenfolge 5…1, Anzeige per row-reverse wieder 1…5 — damit
   greift der Nachfolger-Selektor ~ auf die Sterne LINKS vom gewaehlten. */
.bw-sterne-zeile { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.bw-sterne { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.bw-stern { cursor: pointer; line-height: 0; }
.bw-stern input { position: absolute; opacity: 0; width: 0; height: 0; }
.bw-stern svg { width: 34px; height: 34px; fill: var(--border); transition: fill var(--dur) var(--ease); }
.bw-stern:has(input:checked) svg,
.bw-stern:has(input:checked) ~ .bw-stern svg { fill: #E0A008; }
.bw-sterne:hover .bw-stern svg { fill: var(--border); }
.bw-sterne .bw-stern:hover svg,
.bw-sterne .bw-stern:hover ~ .bw-stern svg { fill: #E0A008; }
.bw-stern input:focus-visible + svg { outline: 2px solid var(--brand); outline-offset: 2px; }
.bw-sterne-text { font-size: 13.5px; color: var(--text-secondary); }

.bw-label { display: block; font-size: 13px; font-weight: 600; margin: 18px 0 6px; }
.bw-label:first-of-type { margin-top: 14px; }
.bw-opt { font-weight: 400; color: var(--text-muted); }
.bw-input {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font: inherit; font-size: 14.5px; color: var(--text); background: var(--surface);
}
.bw-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--blue-50); }
.bw-input--kurz { max-width: 220px; }
.bw-textarea { resize: vertical; min-height: 150px; line-height: 1.65; }
.bw-zaehler { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.bw-hinweis { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.55; }

.bw-senden {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; padding: 13px 24px;
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand); border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.bw-senden:hover { background: var(--brand-hover); }
.bw-senden svg { width: 15px; height: 15px; }
.bw-senden--breit { display: flex; margin-top: 22px; }

.bw-recht { font-size: 12.5px; line-height: 1.65; color: var(--text-muted); margin-top: 18px; max-width: 74ch; }

.bw-karte { border: 1px solid var(--border); border-radius: var(--r-md); padding: 38px 34px; text-align: center; }
.bw-karte h1 { font-size: 27px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 12px; }
.bw-karte p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin: 0 auto 10px; max-width: 52ch; }
.bw-karte-klein { font-size: 13px !important; color: var(--text-muted) !important; }
.bw-karte-ico {
  width: 54px; height: 54px; margin: 0 auto 18px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-50); color: var(--brand);
}
.bw-karte-ico--ok { background: #E4F4EC; color: #157347; }
.bw-karte-ico svg { width: 24px; height: 24px; }

.bw-crumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted); margin-bottom: 26px;
}
.bw-crumb a { color: var(--brand); }
.bw-crumb a:hover { text-decoration: underline; }

/* ─── Erfahrungsseite ────────────────────────────────────────────────────
   /agentur/<slug>/erfahrungen — links die eigenen Bewertungen, rechts die
   Fragen. Umgekehrt zum Profil, wo die Spalte links steht: hier soll die
   Bewertungslage zuerst gelesen werden, und auf Mobil fällt die Fragenspalte
   dadurch von selbst darunter.
   Breakpoint 960 px wie bei .ep-hero — zwei verschiedene Umbruchpunkte auf
   benachbarten Seiten sieht man sofort. */

.erf-grid {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 44px; align-items: start;
}
.erf-main { min-width: 0; }
.erf-side { position: sticky; top: 96px; }

.erf-h2 {
  font-size: 21px; font-weight: 650; letter-spacing: -.02em;
  margin: 0 0 18px;
}
.erf-main > section + section,
.erf-main > section + .erf-aktionen { margin-top: 44px; }

/* Fremde Portale. Bewusst OHNE .bw-schnitt-Optik: Die große Sternzahl gehört
   den eigenen Bewertungen. Stünde sie hier genauso, verwischte genau die
   Trennung, auf der die ganze Seite beruht. */
.erf-fremd {
  border: 1px solid var(--border); border-left: 2px solid var(--slate-400);
  border-radius: var(--r-md); padding: 22px 24px;
}
.erf-quellen { list-style: none; margin: 0 0 16px; padding: 0; }
.erf-quellen li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.erf-quellen li:last-child { border-bottom: none; }
.erf-quelle-name { font-weight: 600; font-size: 15px; }
.erf-quelle-note { font-weight: 650; color: var(--brand); font-size: 15px; }
.erf-quelle-n { font-size: 13.5px; color: var(--text-secondary); }
.erf-fremd-stand { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.erf-fremd-text {
  font-size: 15px; line-height: 1.75; color: var(--text-secondary);
  margin: 0 0 14px;
}

.erf-aktionen {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 36px;
}
.erf-zurueck { font-size: 14px; color: var(--brand); }
.erf-zurueck:hover { text-decoration: underline; }
.erf-cta { margin-top: 56px; }

/* Fragen. <details> statt JavaScript: tastaturbedienbar, und der Antworttext
   steht auch zugeklappt im DOM — Voraussetzung dafür, dass die
   FAQPage-Auszeichnung das wiedergibt, was auf der Seite steht. */
.erf-faq-box {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2, #fff); overflow: hidden;
}
.erf-faq-h {
  font-size: 15px; font-weight: 650; letter-spacing: -.015em;
  margin: 0; padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
}
.erf-faq-item { border-bottom: 1px solid var(--border); }
.erf-faq-item:last-child { border-bottom: none; }
.erf-faq-item summary {
  list-style: none; cursor: pointer; padding: 14px 20px;
  font-size: 14.5px; font-weight: 600; line-height: 1.45;
  display: flex; gap: 12px; align-items: flex-start;
}
.erf-faq-item summary::-webkit-details-marker { display: none; }
.erf-faq-item summary::after {
  content: '+'; margin-left: auto; font-weight: 400; font-size: 18px;
  line-height: 1; color: var(--text-muted); flex: none;
}
.erf-faq-item[open] summary { color: var(--brand); }
.erf-faq-item[open] summary::after { content: '–'; }
.erf-faq-item summary:hover { background: var(--blue-50); }
.erf-faq-a {
  margin: 0; padding: 0 20px 16px;
  font-size: 14px; line-height: 1.75; color: var(--text-secondary);
}

@media (max-width: 960px) {
  .erf-grid { grid-template-columns: 1fr; gap: 34px; }
  .erf-side { position: static; }
}

/* Querverweis Profil → Erfahrungsseite. Steht direkt unter dem Spiegel, weil
   dort die Frage entsteht: „und was steht in den Bewertungen?" */
.bw-alle {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 16px 0 0; font-size: 14.5px; font-weight: 600; color: var(--brand);
}
.bw-alle svg { width: 15px; height: 15px; }
.bw-alle:hover { text-decoration: underline; }
.bw-mehr { font-size: 14px; color: var(--text-secondary); margin: 18px 0 0; }
.bw-mehr a { color: var(--brand); font-weight: 600; }
.bw-mehr a:hover { text-decoration: underline; }

/* Platzhalter als Weg statt als Feststellung: Wo Kontaktdaten erst mit der
   Übernahme erscheinen, steht kein „fehlt", sondern ein Link dorthin. */
.ag-feld-ergaenzen {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 600; color: var(--brand);
}
.ag-feld-ergaenzen svg { width: 13px; height: 13px; flex: none; }
.ag-feld-ergaenzen:hover { text-decoration: underline; }
.ag-feld--leer:has(.ag-feld-ergaenzen) { opacity: 1; }
.bw-leer { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 20px; max-width: 62ch; }
.erf-faq-quelle {
  margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.6; color: var(--text-muted);
}