/* Barden Versicherungsmakler — Gestaltungsschicht über dem Kadence-Theme.
 *
 * Alle Werte sind am Original gemessen (www.barden-versicherungsmakler.de,
 * 1366 px, 22.09.2026), nicht geschätzt:
 *   Container 1170 px · Spalte 370 px · Rinne 30 px · Kopfzeile 158 px
 *   Videoband 445 px · Primärrot #E22004 · Dunkelgrau #3B4348
 *   H1 30/58 px · Kartentitel 19 px · Bandtitel 48 px versal
 *   Fließtext Arial 14/21 px #737885 · Navigation 13 px versal #757575
 *
 * Schriften: Das Original mischt vier Familien (Open Sans, Arial, Istok Web,
 * Inder). Istok Web und Inder stehen nur auf Navigation und „mehr erfahren"
 * bei 13 bzw. 16 px — dort sind sie von Open Sans kaum zu unterscheiden.
 * Zwei zusätzliche Schriftdateien für diesen Unterschied zu laden, wäre
 * schlecht getauscht; beide sind durch Open Sans ersetzt.
 */

:root {
  --bd-rot:        #E22004;
  --bd-rot-dunkel: #B31903;
  --bd-schiefer:   #3B4348;   /* zweiter Button, Original gemessen */
  --bd-tinte:      #1E2731;   /* Überschriften */
  --bd-text:       #737885;   /* Fließtext */
  --bd-nav:        #757575;
  --bd-linie:      #CFCFCF;
  --bd-flaeche:    #F5F5F5;
  --bd-weiss:      #FFFFFF;

  --bd-breite:     1170px;
  --bd-rinne:      30px;

  --bd-serif:      "Open Sans", -apple-system, "Segoe UI", sans-serif;
  --bd-text-f:     Arial, Helvetica, sans-serif;

  /* 4-pt-Raster */
  --bd-1: 8px;  --bd-2: 16px; --bd-3: 24px; --bd-4: 32px;
  --bd-5: 48px; --bd-6: 64px; --bd-7: 80px;

  --bd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------- Grundlage */

body,
.entry-content p,
.entry-content li {
  font-family: var(--bd-text-f);
  font-size: 14px;
  line-height: 21px;
  color: var(--bd-text);
}

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: var(--bd-serif);
  font-weight: 500;
  color: var(--bd-tinte);
  font-style: normal;          /* kursive Überschriften: nie */
}

/* Kadence' Standardbreite auf das Maß des Originals bringen. */
.content-container .entry-content > .alignwide,
.entry-content > .wp-block-group > .wp-block-group__inner-container,
.entry-content > *:not(.alignfull) {
  max-width: var(--bd-breite);
}
.entry-content > .alignfull > .wp-block-group__inner-container,
.bd-band > .wp-block-group__inner-container {
  max-width: var(--bd-breite);
  margin-inline: auto;
  padding-inline: var(--bd-rinne);
}

/* ------------------------------------------------------------- Kopfbereich */

.site-header-row-container-inner .site-header-item .site-branding img {
  max-height: 74px;            /* Logohöhe wie im Original */
  width: auto;
}
.site-header-main-section-left { padding-block: var(--bd-3); }

.header-navigation .header-menu-container > ul > li > a {
  font-family: var(--bd-serif);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--bd-nav);
  letter-spacing: 0.02em;
  padding: 12px 14px 10px;
  transition: color 160ms var(--bd-ease);
}
.header-navigation .header-menu-container > ul > li > a:hover {
  color: var(--bd-rot);
}
/* Der Punkt der aktuellen Seite ist im Original ein rot gefuelltes Feld,
 * nicht nur roter Text. */
.header-navigation .header-menu-container > ul > li.current-menu-item > a,
.header-navigation .header-menu-container > ul > li.current-menu-ancestor > a,
.header-navigation .header-menu-container > ul > li.current-menu-parent > a {
  background: var(--bd-rot);
  color: #fff;
  border-radius: 2px;
  padding: 10px 14px;
}

/* Letzter Menüpunkt („Kontakt") als gefüllte Schaltfläche — wie im Original. */
.header-navigation .header-menu-container > ul > li.bd-nav-button > a,
.header-navigation .header-menu-container > ul > li:last-child > a {
  background: var(--bd-schiefer);
  color: var(--bd-weiss);
  border-radius: 2px;
  padding: 10px 18px;
  margin-left: 10px;
}
.header-navigation .header-menu-container > ul > li.bd-nav-button > a:hover,
.header-navigation .header-menu-container > ul > li:last-child > a:hover {
  background: var(--bd-rot);
  color: var(--bd-weiss);
}

/* ------------------------------------------------------------- Kopfband */

.bd-video {
  position: relative;
  height: 445px;
  overflow: hidden;
  /* Das Standbild traegt den Kopfbereich. Das Video legt sich nur darueber,
   * wenn es tatsaechlich laeuft — der erste Frame ist schwarz, und die
   * automatische Wiedergabe verweigern Browser je nach Einstellung. So sieht
   * der Kopfbereich in jedem Fall richtig aus statt schwarz. */
  background: var(--bd-tinte) center/cover no-repeat;
}
.bd-video video {
  opacity: 0;
  transition: opacity 600ms var(--bd-ease);
}
.bd-video video.spielt { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bd-video video { display: none; }
}
.bd-video video,
.bd-video img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Weißes Band darunter: Überschrift links (Spalte 8), Buttons rechts (Spalte 4) */
.bd-titelband { background: var(--bd-weiss); padding: 30px 0 21px; }
.entry-content .bd-titelband h1,
.bd-titelband h1 {
  font-size: 30px;
  line-height: 40px;
  font-weight: 500;
  color: var(--bd-tinte);
  margin: 0 0 2px;
  overflow-wrap: anywhere;
  min-width: 0;
}
.bd-titelband .bd-claim {
  font-family: var(--bd-text-f);
  font-size: 14px;
  line-height: 21px;
  color: var(--bd-text);
  margin: 0;
}

/* ------------------------------------------------------------- Buttons */

.bd-btn,
.entry-content .wp-block-button.bd-btn-rot .wp-block-button__link,
.entry-content .wp-block-button.bd-btn-grau .wp-block-button__link {
  display: inline-block;
  font-family: var(--bd-text-f);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
  padding: 9px 20px 10px;
  border-radius: 2px;
  border: 0;
  text-decoration: none;
  transition: background-color 160ms var(--bd-ease);
}
.entry-content .wp-block-button.bd-btn-rot .wp-block-button__link  { background: var(--bd-rot);      color: #fff; }
.entry-content .wp-block-button.bd-btn-grau .wp-block-button__link { background: var(--bd-schiefer); color: #fff; }
.entry-content .wp-block-button.bd-btn-rot .wp-block-button__link:hover  { background: var(--bd-rot-dunkel); }
.entry-content .wp-block-button.bd-btn-grau .wp-block-button__link:hover { background: var(--bd-rot); }

.entry-content .wp-block-button__link:focus-visible {
  outline: 2px solid var(--bd-tinte);
  outline-offset: 3px;          /* Ring erscheint sofort, nie animiert */
}

/* ------------------------------------------------------------- Karten */

.bd-karten { padding: 44px 0 var(--bd-5); }
.bd-karte { }

.bd-karte__kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.bd-karte__kopf svg { width: 17px; height: 17px; fill: var(--bd-rot); flex: none; }
.entry-content .bd-karte__kopf h2,
.bd-karte__kopf h2 {
  font-family: var(--bd-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 21px;
  color: #000;
  margin: 0;
}

.bd-karte figure { margin: 0 0 18px; }
.bd-karte figure img {
  display: block;
  width: 100%;
  aspect-ratio: 370 / 243;      /* Maß des Originals */
  object-fit: cover;
}
.bd-karte p {
  font-family: var(--bd-text-f);
  font-size: 14px;
  line-height: 21px;
  color: var(--bd-text);
  margin: 0 0 18px;
}

/* „mehr erfahren" — Textlink mit Trennstrich links und Pfeilkreis rechts. */
.bd-mehr {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--bd-serif);
  font-size: 16px;
  line-height: 1;
  color: var(--bd-rot);
  text-decoration: none;
  padding-left: 13px;
}
.bd-mehr::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 1px; height: 18px;
  margin-top: -9px;
  background: var(--bd-linie);
}
.bd-mehr__kreis {
  width: 20px; height: 20px;
  border: 1px solid var(--bd-linie);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  transition: border-color 160ms var(--bd-ease), background-color 160ms var(--bd-ease);
}
.bd-mehr__kreis svg { width: 8px; height: 8px; fill: var(--bd-rot); transition: fill 160ms var(--bd-ease); }
.bd-mehr:hover .bd-mehr__kreis { border-color: var(--bd-rot); background: var(--bd-rot); }
.bd-mehr:hover .bd-mehr__kreis svg { fill: #fff; }
.bd-mehr:focus-visible { outline: 2px solid var(--bd-tinte); outline-offset: 3px; }

/* --------------------------------------------------- Band „Aktuelle Themen" */

.bd-band {
  position: relative;
  background: var(--bd-tinte) center/cover no-repeat;
  padding: 58px 0 64px;
  text-align: center;
}
.bd-band::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(20, 26, 32, 0.62);
}
.bd-band > * { position: relative; }
.entry-content .bd-band__titel,
.bd-band__titel {
  font-family: var(--bd-serif);
  font-size: 48px;
  line-height: 48px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 26px;
  overflow-wrap: anywhere;
  min-width: 0;
}
/* Gemessen: #FE1B1B — heller als das Primaerrot der Buttons. */
.bd-band__titel em { font-style: normal; color: #FE1B1B; }

/* Im Original steht immer nur EIN Eintrag da, darunter zwei Punkte zum
 * Umschalten. Der Text ist kursiv, 16/28 px, linksbuendig in einem 730er
 * Block — nicht zentriert. Genau diese Mischung liess das Band vorher
 * schief wirken. */
.bd-band__lauf { position: relative; max-width: 730px; margin: 0 auto; }
.bd-band__eintrag {
  opacity: 0;
  visibility: hidden;
  position: absolute; inset: 0;
  transition: opacity 400ms var(--bd-ease);
}
.bd-band__eintrag.ist-sichtbar { opacity: 1; visibility: visible; position: relative; }
.bd-band__eintrag p {
  font-family: var(--bd-text-f);
  font-size: 16px;
  line-height: 28px;
  font-style: italic;
  color: #fff;
  text-align: left;
  margin: 0;
}
.bd-band__eintrag strong { font-style: italic; }

/* Ohne JavaScript stehen alle Eintraege untereinander — lesbar statt leer. */
.bd-band__lauf:not([data-bereit]) .bd-band__eintrag {
  opacity: 1; visibility: visible; position: relative;
}
.bd-band__lauf:not([data-bereit]) .bd-band__eintrag + .bd-band__eintrag { margin-top: var(--bd-2); }

.bd-band__punkte {
  display: flex; justify-content: center; gap: 9px;
  margin-top: var(--bd-3);
}
.bd-band__punkt {
  width: 11px; height: 11px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  transition: background-color 160ms var(--bd-ease);
}
.bd-band__punkt[aria-current="true"] { background: var(--bd-rot); }
.bd-band__punkt:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ------------------------------------------------------------- Innenseiten */

.bd-seitentitel { padding: var(--bd-5) 0 var(--bd-2); }
.bd-seitentitel h1 {
  font-size: 30px; line-height: 40px; font-weight: 500;
  color: var(--bd-tinte); margin: 0;
}

.bd-flaeche { background: var(--bd-flaeche); }

/* ------------------------------------------------------------- Fußzeile */

.site-footer .footer-navigation a,
.site-footer .footer-html {
  font-family: var(--bd-text-f);
  font-size: 13px;
  color: var(--bd-text);
}
.site-footer .footer-navigation a:hover { color: var(--bd-rot); }

/* ------------------------------------------------------------- Bewegung */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-duration: 120ms !important; }
  .bd-video video { display: none; }
}

/* ------------------------------------------------------------- Schmale Geräte */

html, body { overflow-x: clip; }

@media (max-width: 1024px) {
  .bd-band__titel { font-size: 38px; line-height: 40px; }
}

@media (max-width: 767px) {
  .bd-video { height: 260px; }
  .bd-titelband { padding: var(--bd-3) 0 var(--bd-2); }
  .bd-titelband h1 { font-size: 24px; line-height: 32px; }
  .bd-karten { padding: var(--bd-4) 0; }
  .bd-band { padding: var(--bd-5) 0; }
  .bd-band__titel { font-size: 28px; line-height: 32px; margin-bottom: var(--bd-3); }
  .bd-seitentitel h1 { font-size: 24px; line-height: 32px; }
}

/* ------------------------------------------- Raster für die drei Karten */

.bd-karten__raster {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst sprengen breite Bilder die Spalte. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bd-rinne);
  max-width: var(--bd-breite);
  margin-inline: auto;
}
@media (max-width: 900px) { .bd-karten__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bd-karten__raster { grid-template-columns: minmax(0, 1fr); gap: var(--bd-4); } }

.bd-band__inner {
  max-width: var(--bd-breite);
  margin-inline: auto;
  padding-inline: var(--bd-rinne);
}
.bd-band__eintrag + .bd-band__eintrag { margin-top: var(--bd-3); }
.bd-band__eintrag p { text-align: center; }

/* Die Bildkacheln der Karten heben sich beim Überfahren leicht — die einzige
 * Bewegung auf der Seite außer dem Kopfvideo. Mehr braucht es nicht. */
.bd-karte figure img { transition: opacity 200ms var(--bd-ease); }
.bd-karte a:hover img { opacity: 0.88; }
.bd-karte a:focus-visible { outline: 2px solid var(--bd-tinte); outline-offset: 3px; }

/* ===================================================================
 * Innenseiten — eigener Maßstab
 *
 * Am Original gemessen: Fließtext Arial 18/26 px in #424242 (nicht 14 px
 * wie auf der Startseite), Seitentitel 46/58 px, Zwischentitel 22/30 px.
 * Genau dieser Unterschied ließ den ersten Nachbau dünn wirken.
 * =================================================================== */

:root { --bd-text-innen: #424242; }

.bd-inhalt p,
.bd-inhalt li {
  font-family: var(--bd-text-f);
  font-size: 18px;
  line-height: 26px;
  color: var(--bd-text-innen);
  margin: 0 0 21px;
}
.bd-inhalt p:last-child { margin-bottom: 0; }

.entry-content .bd-inhalt h1,
.bd-inhalt h1 {
  font-size: 46px; line-height: 58px; font-weight: 500;
  color: var(--bd-tinte); margin: 0 0 5px;
  overflow-wrap: anywhere; min-width: 0;
}
/* Das Original unterscheidet zwei Ebenen unter dem Seitentitel:
 * H2 = 24 px ROT (Abschnittstitel), H3 = 22 px dunkel (Untertitel).
 * Die rote Gliederung ist ein durchgehendes Merkmal der Seite — ohne sie
 * wirken die Innenseiten flach. Am Original gemessen: #E22004 auf H2. */
.entry-content .bd-inhalt h2,
.bd-inhalt h2 {
  font-size: 24px; line-height: 32px; font-weight: 500;
  color: var(--bd-rot); margin: 0 0 21px;
}
.entry-content .bd-inhalt h3,
.bd-inhalt h3 {
  font-size: 22px; line-height: 30px; font-weight: 500;
  color: var(--bd-tinte); margin: 0 0 21px;
}

/* Betonter Einstiegsabsatz unter dem Seitentitel */
.bd-inhalt .bd-lead {
  font-size: 20px;
  line-height: 30px;
  color: var(--bd-tinte);
}

/* Abschnittsrhythmus: großzügig, wie im Original (70 px oben / 77 px unten) */
.bd-abschnitt   { padding: 70px 0 77px; }
.bd-abschnitt--schmal { padding: 44px 0 48px; }

/* Graues Zwischenband für Handlungsaufforderungen */
.bd-cta { background: var(--bd-flaeche); }
.entry-content .bd-cta h2, .bd-cta h2 { margin-bottom: 10px; }

/* Themenkarten auf Privat-/Gewerbekunden — Ersatz für die Dreh-Karten */
.bd-themen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bd-rinne);
}
.bd-thema {
  background: #fff;
  border: 1px solid #E6E7EA;
  border-radius: 2px;
  padding: 26px 24px 28px;
}
.entry-content .bd-thema h3, .bd-thema h3 {
  font-size: 18px; line-height: 24px; margin: 0 0 10px;
}
.bd-thema__nr {
  display: block;
  font-family: var(--bd-serif);
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--bd-rot);
  margin-bottom: 6px;
}
.bd-thema p { font-size: 15px; line-height: 23px; color: var(--bd-text); margin: 0; }

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

/* Teamraster */
.bd-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bd-5) var(--bd-rinne); }
.bd-team figure { margin: 0 0 16px; }
.bd-team img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.entry-content .bd-team h3, .bd-team h3 { font-size: 20px; line-height: 26px; margin: 0 0 4px; }
.bd-team__rolle { font-family: var(--bd-serif); font-size: 14px; line-height: 20px; color: var(--bd-rot); margin: 0 0 10px; }
.bd-team p { font-size: 15px; line-height: 22px; color: var(--bd-text); margin: 0 0 4px; }
.bd-team a { color: var(--bd-rot); text-decoration: none; }
.bd-team a:hover { text-decoration: underline; }
.bd-team__seit { font-size: 13px; color: #9AA0AC; }
@media (max-width: 900px) { .bd-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bd-team { grid-template-columns: minmax(0, 1fr); } }

/* Referenzen-Logowand */
.bd-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #E6E7EA; border: 1px solid #E6E7EA; }
.bd-logos figure { margin: 0; background: #fff; aspect-ratio: 374/237; display: flex; align-items: center; justify-content: center; padding: 18px; }
.bd-logos img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 900px) { .bd-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bd-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 767px) {
  .bd-inhalt p, .bd-inhalt li { font-size: 16px; line-height: 24px; }
  .entry-content .bd-inhalt h1, .bd-inhalt h1 { font-size: 30px; line-height: 38px; }
  .bd-abschnitt { padding: var(--bd-5) 0; }
}

/* Untertitel der Übersichtskarten auf „Über uns" */
.bd-karte__unter {
  font-family: var(--bd-serif);
  font-size: 15px; line-height: 22px;
  color: var(--bd-rot);
  margin: 0 0 8px;
}

/* Kontaktseite: zwei Spalten, wie im Original nebeneinander */
/* Einspaltig und mittig, wie im Original. */
.bd-kontakt { text-align: center; margin-bottom: var(--bd-3); }
.bd-kontakt--zeiten { margin-top: var(--bd-5); }
.entry-content .bd-kontakt h2, .bd-kontakt h2 { text-align: center; margin-bottom: 18px; }
.bd-kontakt__firma { color: var(--bd-tinte); font-weight: 700; }
.bd-kontakt a { color: var(--bd-rot); text-decoration: none; }
.bd-kontakt a:hover { text-decoration: underline; }
.bd-inhalt .wp-block-buttons { justify-content: center; }

.bd-vema { margin: var(--bd-5) 0 0; text-align: center; }
.bd-vema img { max-width: 320px; height: auto; }

.bd-schema { margin: 0 0 var(--bd-4); }
.bd-schema img { width: 100%; height: auto; display: block; }

/* Reine Textkarten (Übersicht „Über uns") */
.bd-karte--text {
  border-top: 2px solid var(--bd-rot);
  padding-top: 20px;
}
.bd-karte--text .bd-karte__kopf { margin-bottom: 6px; }

/* ------------------------------------------- Feinschliff für schmale Geräte */

@media (max-width: 480px) {
  /* „versicherungsmakler" ist zu lang für 320 px. Silbentrennung statt
   * harter Umbruch mitten im Wort — anywhere bleibt nur als Notnagel. */
  .entry-content .bd-titelband h1,
  .bd-titelband h1 {
    font-size: 21px;
    line-height: 29px;
    hyphens: auto;
    overflow-wrap: break-word;
  }
  /* Die Buttons standen rechts, weil die Ausrichtung vom Zweispalter kam.
   * Auf dem Telefon gibt es keine zweite Spalte — also linksbündig. */
  .bd-titelband .wp-block-buttons { justify-content: flex-start; }
  .bd-titelband .wp-block-button__link { padding: 11px 18px 12px; }
}

/* Das Videoband lag im eingeschränkten Inhaltsbereich und war dadurch nur
 * 1170 px breit statt randlos — es sah aus, als säße es nicht mittig.
 * Ein reiner HTML-Block bekommt von Kadence keine alignfull-Behandlung,
 * also hier von Hand. */
.entry-content > .bd-video {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ===================================================================
 * Bildbanner der Unterseiten
 *
 * Original: volle Fensterbreite, 450 px hoch. Auf Privatkunden ein festes
 * Bild, auf Gewerbekunden fünf Kundenfotos im Wechsel (dort lief Slider
 * Revolution). Der Wechsel läuft hier über eine gewöhnliche Galerie —
 * Barden kann Bilder im Editor hinzufügen oder entfernen, ohne dass jemand
 * Code anfasst, und es hängt kein Plugin daran.
 * =================================================================== */

.entry-content > .bd-banner,
.bd-banner {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 450px;
  position: relative;
  overflow: hidden;
  background: var(--bd-tinte);
  display: block;
}
.bd-banner figure,
.bd-banner .wp-block-image { margin: 0; }
.bd-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Mehrere Bilder: überblenden. Das erste liegt oben, bis das Skript
 * umschaltet — ohne JavaScript bleibt schlicht das erste Bild stehen. */
.bd-banner--wechsel img {
  opacity: 0;
  transition: opacity 900ms var(--bd-ease);
}
.bd-banner--wechsel img.ist-sichtbar { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bd-banner--wechsel img { transition: none; }
}
@media (max-width: 767px) { .bd-banner, .entry-content > .bd-banner { height: 240px; } }

/* ===================================================================
 * Servicekasten rechts („Kontakt & Ansprechpartner")
 * Original: 370 px, Rahmen 1 px #C2C2C2, Polster 20/20/30, Titel 14 px.
 * =================================================================== */

.bd-service {
  background: rgba(255, 255, 255, 0.41);
  border: 1px solid #C2C2C2;
  padding: 20px 20px 30px;
}
.bd-service__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bd-service__kopf svg { width: 18px; height: 18px; fill: var(--bd-rot); flex: none; }
.entry-content .bd-service h3, .bd-service h3 {
  font-family: var(--bd-serif); font-size: 14px; line-height: 20px;
  color: var(--bd-tinte); margin: 0;
}
.bd-service p { font-size: 15px; line-height: 22px; color: var(--bd-text); margin: 0 0 16px; }
.bd-service .bd-mehr { font-size: 15px; display: flex; margin-bottom: 12px; }
.bd-service .bd-mehr:last-child { margin-bottom: 0; }

/* Zweispalter der Unterseiten: Text 770 px links, Kasten 370 px rechts */
.bd-zweispalt { display: grid; grid-template-columns: minmax(0, 770fr) minmax(0, 370fr); gap: var(--bd-rinne); align-items: start; }
@media (max-width: 860px) { .bd-zweispalt { grid-template-columns: minmax(0, 1fr); gap: var(--bd-4); } }

/* ===================================================================
 * „Stolpersteine" — die Lupenkacheln
 *
 * Original: 380 × 240, Fläche #F1F1F1, Rahmen 2 px #DADADA, Lupengrafik
 * lupe-02.png bei 460 px Breite auf Position 54 % / 14 %, Drehung 0,35 s.
 *
 * Gedreht wird nur auf Geräten mit Zeigegerät. Auf dem Telefon gab es im
 * Original keinen Weg an die Rückseite — dort steht der Text jetzt offen
 * unter dem Titel, statt unerreichbar zu sein.
 * =================================================================== */

.bd-lupen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bd-rinne); }
.bd-lupe { perspective: 1000px; }
.bd-lupe__karte {
  position: relative;
  min-height: 240px;
  transform-style: preserve-3d;
  transition: transform 350ms ease-in-out;
}
.bd-lupe__seite {
  background: #F1F1F1 url("../../uploads/2026/09/lupe-02.png") 54% 14% / 460px auto no-repeat;
  border: 2px solid #DADADA;
  min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 22px;
  text-align: center;
  backface-visibility: hidden;
}
.entry-content .bd-lupe__seite p, .bd-lupe__seite p {
  font-family: var(--bd-text-f);
  font-size: 15px; line-height: 22px; color: #424242; margin: 0;
}
.bd-lupe__seite--vorne p { font-size: 17px; }
.bd-lupe__seite--vorne .bd-lupe__nr { color: var(--bd-rot); font-weight: 700; margin-right: 4px; }

@media (hover: hover) and (min-width: 861px) {
  .bd-lupe__seite--hinten {
    position: absolute; inset: 0;
    transform: rotateY(180deg);
    background-image: none; background-color: #F1F1F1;
  }
  .bd-lupe:hover .bd-lupe__karte,
  .bd-lupe:focus-within .bd-lupe__karte { transform: rotateY(180deg); }
}
/* Ohne Zeigegerät: beide Seiten untereinander, nichts bleibt verborgen. */
@media not all and (hover: hover), (max-width: 860px) {
  .bd-lupe__karte { min-height: 0; }
  .bd-lupe__seite { min-height: 0; }
  .bd-lupe__seite--vorne { border-bottom: 0; }
  .bd-lupe__seite--hinten { background-image: none; border-top: 0; padding-top: 0; }
}
@media (max-width: 860px) { .bd-lupen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bd-lupen { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------- Abschnittsnavigation */
/* Im Original eine schlichte Zeile unter dem Hauptmenü: 14 px Arial, grau,
 * der aktuelle Punkt rot. Kein Kasten, keine Trennstriche. */
.bd-abschnittsnav { border-bottom: 1px solid #ECECEC; background: #fff; }
.bd-abschnittsnav__innen {
  max-width: var(--bd-breite);
  margin-inline: auto;
  padding: 9px var(--bd-rinne);
}
.bd-abschnittsnav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 22px;
}
.bd-abschnittsnav a {
  font-family: var(--bd-text-f);
  font-size: 14px; line-height: 20px;
  color: rgba(107, 107, 107, 0.8);
  text-decoration: none;
}
.bd-abschnittsnav a:hover { color: var(--bd-rot); }
.bd-abschnittsnav .ist-aktuell a { color: var(--bd-rot); }
.bd-abschnittsnav__wurzel a { color: var(--bd-tinte); }
.bd-abschnittsnav a:focus-visible { outline: 2px solid var(--bd-tinte); outline-offset: 2px; }