/* Modul branchen · Release 2026-10-22-verkaufsstark (acessio.de, deutsch).
   /branchen/: Zeichnungen in den Branchenkarten und Abschluss als Erstgespräch-CTA.
   /branchen/aerzte|handwerk|handel/: Abschnitt „Warum jetzt“ mit belegten Kennzahlen und Quellen.
   r2 (QA Vorschau c9865d79): H1-Themenzeile auch auf Handwerk, Bewertungs-Beleg im dunklen Abschnitt auf Handel.
   Farben und Schrift aus den vorhandenen Variablen der Seite (Designsystem/css/tokens.css). */

/* ---------- /branchen/: Zeichnung statt Browserfenster ---------- */
.br-wahl .br-wahl__eintrag .br-wahl__bild.bv-zeichnung {
  display: grid;
  place-items: center;
  padding: clamp(14px, 2vw, 28px);
  overflow: visible;
}
.bv-zeichnung img {
  display: block;
  width: min(100%, 580px);
  height: auto;
  transform: rotate(-1.2deg);
  transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
}
.br-wahl__eintrag:nth-child(even) .bv-zeichnung img { transform: rotate(1.2deg); }
@media (hover: hover) and (pointer: fine) {
  .br-wahl__link:hover .bv-zeichnung img { transform: rotate(0deg) scale(1.02); }
}
.br-wahl__name { overflow-wrap: break-word; }
@media (max-width: 760px) {
  .br-wahl .br-wahl__eintrag .br-wahl__bild.bv-zeichnung { height: auto; padding: 26px 26px 0; }
  .bv-zeichnung img { width: min(100%, 320px); }
  .br-wahl__name { font-size: clamp(36px, 10.4vw, 42px); }
}

/* ---------- /branchen/: Abschluss „Bringen Sie Ihren Betrieb …“ ---------- */
.bv-cta {
  display: grid;
  justify-items: center;
  gap: 22px;
  margin-top: clamp(40px, 6vw, 96px);
  padding-block: clamp(48px, 6vw, 96px) clamp(96px, 11vw, 168px);
  text-align: center;
}
.bv-cta h2 {
  margin: 0;
  max-width: 21ch;
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1.06;
}
.bv-cta > p {
  margin: 0;
  max-width: 54ch;
  color: var(--ink-2, #2B2B2F);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
}
.bv-cta__handlung { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; }
.bv-cta__pfeil { width: 118px; height: auto; transform: translateY(-14px) rotate(-4deg); }
.bv-cta .btn { width: auto; margin: 0; }
.bv-cta > p.bv-cta__fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 14px;
  color: var(--muted, #6E6A66);
  font-size: 14.5px;
}
.bv-cta__fuss a { color: var(--ink-2, #2B2B2F); text-decoration: underline; text-decoration-color: rgba(25, 25, 28, .28); text-underline-offset: 4px; }
.bv-cta__fuss a:hover { text-decoration-color: currentColor; }
.bv-cta__fuss a i { font-style: normal; color: var(--ink, #19191C); }
.bv-cta__fuss .google-reviews-date { margin-left: 6px; color: var(--muted, #6E6A66); font-size: 12.5px; }
@media (max-width: 620px) {
  .bv-cta__handlung { gap: 8px; }
  .bv-cta__pfeil { width: 62px; transform: translateY(-10px) rotate(-4deg); }
}

/* ---------- Branchenseiten: „Warum jetzt“ mit Kennzahlen ---------- */
.bv-jetzt {
  display: grid;
  gap: clamp(28px, 4vw, 48px) clamp(32px, 6vw, 96px);
  padding-block: var(--lp-abstand, clamp(88px, 11vw, 176px));
}
.bv-jetzt__kopf { max-width: 660px; }
.bv-jetzt__kopf h2 { margin: 14px 0 0; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.06; }
.bv-jetzt__kopf > p:not(.eyebrow) {
  margin: 20px 0 0;
  max-width: 54ch;
  color: var(--ink-2, #2B2B2F);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
}
.bv-jetzt__bild { display: block; width: min(100%, 420px); height: auto; justify-self: center; transform: rotate(-1.5deg); }
.bv-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 32px clamp(28px, 4vw, 64px);
  margin: 0;
  padding: clamp(28px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--line, rgba(25, 25, 28, .1));
  list-style: none;
}
.bv-zahl__wert {
  justify-self: start;
  width: fit-content;
  margin: 0;
  padding-inline: .06em;
  background-image: linear-gradient(transparent 62%, var(--bf-akzent, #DDF8FA) 62%);
  color: var(--ink, #19191C);
  font-size: clamp(60px, 6.4vw, 96px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
}
.bv-zahl__satz {
  margin: 14px 0 0;
  max-width: 34ch;
  color: var(--ink-2, #2B2B2F);
  font-size: 17px;
  line-height: 1.5;
}
/* nur eine Kennzahl: Zahl und Satz nebeneinander */
.bv-zahlen li:only-child { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(24px, 3vw, 48px); }
.bv-zahlen li:only-child .bv-zahl__satz { margin: 0; max-width: 40ch; font-size: clamp(17px, 1.35vw, 20px); }
/* folgt ein normaler Abschnitt, trägt dieser den Abstand */
.bv-jetzt + .lp-bau { padding-top: 0; }
.bv-fn { font-size: .72em; line-height: 0; }
/* r2d: kein eigener Außenabstand vor dem Fußnotenzeichen (Bündelregel „.lp sup { margin-left: 2px }“ aufgehoben);
   sichtbar bleibt nur das Polster des Links, wie bei den Fußnoten auf /leistungen/onlineshops/. */
.bv-fn, .lp .bv-fn { margin-left: 0; }
/* r2c, WCAG 1.4.1: Fußnoten- und Quellenlinks nicht nur über die Farbe erkennbar → immer unterstrichen.
   „.lp .bv-fn a“ schlägt die Bündelregel „.lp sup a { text-decoration: none }“. */
.bv-fn a, .lp .bv-fn a {
  margin-left: 0;
  padding: 2px; /* wie bisher wirksam (Bündel „.lp sup a“): Trefferfläche unverändert */
  color: var(--accent, #097078);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.bv-fn a:hover, .bv-fn a:focus-visible, .lp .bv-fn a:hover, .lp .bv-fn a:focus-visible { text-decoration-thickness: 2px; }
.bv-quellen {
  display: grid;
  gap: 6px;
  max-width: 120ch;
  margin: 0;
  padding: 0 0 0 1.3em;
  color: var(--muted, #6E6A66);
  font-size: 13.5px;
  line-height: 1.5;
}
.bv-quellen li { scroll-margin-top: calc(var(--kopf-hoehe, 90px) + 16px); }
.bv-quellen li:target { color: var(--ink, #19191C); }
.bv-quellen a {
  color: var(--accent, #097078);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.bv-quellen a:hover, .bv-quellen a:focus-visible { text-decoration-thickness: 2px; }
@media (min-width: 980px) {
  .bv-jetzt { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); align-items: start; }
  .bv-jetzt__kopf { padding-top: 8px; }
  .bv-jetzt__kopf { grid-column: 1; grid-row: 1; }
  .bv-jetzt__bild { grid-column: 2; grid-row: 1; align-self: start; }
  .bv-zahlen, .bv-quellen { grid-column: 1 / -1; }
}
@media (max-width: 979px) {
  .bv-jetzt__bild { width: min(100%, 300px); }
}

/* Handel, „Bevor jemand bestellt“ (dunkler Abschnitt): Bewertungs-Beleg mit eigener Quellenzeile */
.lp-akut__kopf > p.bv-beleg b { color: var(--lp-hell, #F3F1F0); font-weight: 700; white-space: nowrap; }
.lp-akut .bv-fn a { color: var(--lp-cyan, #22C7D6); }
.lp-akut__kopf > .bv-beleg__quelle { margin-top: 14px; max-width: 72ch; color: rgba(243, 241, 240, .62); }
.lp-akut .bv-quellen a { color: var(--lp-cyan, #22C7D6); }
.lp-akut .bv-quellen li:target { color: var(--lp-hell, #F3F1F0); }

/* Arztpraxen, FAQ „Patientendaten“: Link im Antworttext als Link erkennbar */
.bf-faq details p a {
  color: var(--accent, #097078);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.bf-faq details p a:hover { text-decoration-thickness: 2px; }

/* Arztpraxen und Handwerk: Suchbegriff als ruhige erste Zeile der H1 */
.bv-h1-thema {
  display: block;
  margin-bottom: .32em;
  color: var(--ink-2, #2B2B2F);
  font-size: .44em;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.012em;
}
/* r2e (QA r3, 1366 x 657): Mit der ruhigen ersten H1-Zeile lag der Held-Knopf der Arztpraxen auf niedrigen
   Desktop-Fenstern 34,8 px unter der Falzgrenze (Fensterhöhe - 16; Produktion 7,2 px darüber). Bis 800 px Höhe wie
   die Leistungsseiten (Modul seiten-ta) leicht verdichtet: Held beginnt 112 px oben (Kopf 90 + 22 statt + 4vh),
   H1 4,3 statt 4,6vw (1366 px: 58,7 statt 62,8 px; weiterhin 4 Zeilen), engere Abstände; Einleitung 16 px und Wege
   22 px wie der kompakte Held des Bündels unter 980 px. Erst ab 980 px (zweispaltiger Held): darunter ist der Held
   im Bündel schon kompakt (oben 98 px) und der Knopf weit über dem Falz. Gemessen: 1366 x 657 11 px Luft. */
@media (min-width: 980px) and (max-height: 800px) {
  .bf--aerzte .lp-hero { padding-top: calc(var(--kopf-hoehe, 90px) + clamp(18px, 4vh, 22px)); }
  .bf.bf--aerzte .lp-hero h1 { margin-top: 8px; font-size: clamp(36px, 4.3vw, 70px); }
  .bf--aerzte .lp-hero .bv-h1-thema { margin-bottom: .24em; }
  .bf--aerzte .lp-hero .lp-hero__lead { margin-top: 16px !important; }
  .bf--aerzte .lp-hero .lp-hero__wege { margin-top: 22px; }
}

/* Abschluss Arztpraxen/Handwerk: gezeichneter Pfeil auf den Erstgespräch-Knopf, Satz darunter */
.bv-schluss__wege { align-items: center; }
.bv-schluss__pfeil { flex: none; width: 104px; height: auto; margin-right: -10px; transform: translateY(-12px) rotate(-4deg); }
.lp-schluss > p.bv-schluss-satz { margin-top: 18px; color: var(--muted, #6E6A66); font-size: 15px; }
@media (max-width: 620px) {
  .bv-schluss__pfeil { width: 60px; margin-right: -4px; transform: translateY(-8px) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bv-zeichnung img { transition: none; }
}

/* r2g (QA r4 zugang-leistung): Die H1-Auszeichnungen stehen in Teilmengen der Figtree-Kursiven, vorgeladen mit
   2,4 bzw. 4,5 statt 20,9 KB (ganze Kursive). /branchen/ „Ihren Zielen passen.“: eigene Teilmenge (I, Z und p fehlen
   der seiten-ta-Teilmenge); /branchen/handel/ „gesehen werden.“: Datei und Regel wie Modul seiten-ta. Beide aus
   figtree-italic-latin.woff2 (SIL Open Font License 1.1), Herstellung und cmap-Prüfung schrift/baue_kursiv.py.
   Zeichen außerhalb der unicode-range kommen wie bisher aus der ganzen Kursiven des Bündels. Familienstapel wie die
   H1 der jeweiligen Seite (Hub: --serif, Handel: --sans; beide beginnen mit Figtree). */
@font-face { font-family: "Figtree Kursiv Branchen"; src: url("/assets/fonts/figtree-kursiv-branchen-99c30ecee8ef.woff2") format("woff2-variations"), url("/assets/fonts/figtree-kursiv-branchen-99c30ecee8ef.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; unicode-range: U+20, U+2D-2E, U+49, U+5A, U+61, U+65, U+68-69, U+6C, U+6E, U+70, U+72-73, U+A0, U+AD; }
@font-face { font-family: "Figtree Kursiv TA"; src: url("/assets/fonts/figtree-kursiv-ta-f6fa9dd8ec86.woff2") format("woff2-variations"), url("/assets/fonts/figtree-kursiv-ta-f6fa9dd8ec86.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; unicode-range: U+20, U+2C-2E, U+41, U+45-46, U+4B, U+53, U+57, U+61-69, U+6B-6F, U+72-75, U+77, U+A0, U+AD, U+C4, U+E4, U+FC, U+201C, U+201E; }
.br-hub #br-titel .mk { font-family: "Figtree Kursiv Branchen", var(--serif); }
.bf--handel #br-titel .mk { font-family: "Figtree Kursiv TA", var(--sans); }