/*
 * Honorarberatung (jae-Seiten, 01.11.2026): gemeinsames CSS, Präfix .hb
 * Bauplan legacy_trigonus_work/honorarberatung/30-plan.md §1; Anleitung 50-vorlage.md.
 * Wurzelschrift 10 px (Parent 62,5 %): Größen immer max(rem, px) wie die Tokens in trigonus-redesign.css §1.
 * Farben ausschließlich aus dem Plan (§1.6); höchstens eine dunkle Fläche je Seite (Kontaktabschluss).
 * Seiten-Builder ändern diese Datei nicht; Ergänzungen in css/seite-<slug>.css.
 */
.hb {
  --hb-ink: #1F2D3D; --hb-text: #3A4450; --hb-brand: #415B75; --hb-muted: #5F6366;
  --hb-blau: #13318A; --hb-blau-h: #0E2566; --hb-navy: #0F2453;
  --hb-flaeche: #F2F4F8; --hb-hell: #EEF6FC; --hb-linie: #DCE2EA;
  --hb-schatten: 0 1px 2px rgba(16,30,46,.06), 0 6px 20px rgba(16,30,46,.07);
  --hb-schatten-h: 0 2px 4px rgba(16,30,46,.08), 0 12px 32px rgba(16,30,46,.12);
  --hb-serif: "Spectral", Georgia, "Times New Roman", serif;
  --hb-sans: "Open Sans", Arial, sans-serif;
  --hb-fs: max(1.7rem, 17px);
  --hb-fs-lead: max(1.8rem, 18px);
  --hb-fs-klein: max(1.5rem, 15px);
  --hb-sec-y: clamp(56px, 8.5vw, 112px);
  display: block;
  background: #fff;
  color: var(--hb-text);
  font-family: var(--hb-sans);
  font-size: var(--hb-fs);
  line-height: 1.6;
  overflow-x: clip;
}
@media (min-width: 992px) {
  .hb { --hb-fs: max(1.8rem, 18px); --hb-fs-lead: max(2rem, 20px); }
}
.hb *, .hb *::before, .hb *::after { box-sizing: border-box; }
.hb :where(p, ul, ol, figure, h1, h2, h3) { margin: 0; padding: 0; }
.hb img { max-width: 100%; height: auto; }
.hb a { color: var(--hb-blau); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.hb a:hover { color: var(--hb-blau-h); text-decoration-thickness: 2px; }
.hb :focus-visible { outline: 3px solid var(--hb-blau); outline-offset: 2px; }
.hb .hb-i { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle; }

.hb-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Unternavigation entfernt (Alex 01.11.2026, T-14); Brotkrumen im Hero (T-15) */

/* ===== Hero ===== */
.hb-hero { background: #fff; padding: 48px 0 40px; }
.hb-hero__grid { display: grid; gap: 28px; align-items: center; }
.hb-h1 { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); line-height: 1.1; letter-spacing: -.01em;
  font-size: max(2.8rem, 28px); text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
@media (min-width: 400px) { .hb-h1 { font-size: clamp(32px, 2.2rem + 2.4vw, 52px); } }
.hb-lead { margin-top: 16px; font-size: var(--hb-fs-lead); color: var(--hb-text); max-width: 34em; line-height: 1.5; }
.hb-lead--h2 { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: max(2.4rem, 22px); line-height: 1.25; text-wrap: balance; max-width: 22em; }
.hb-hero__media { justify-self: center; width: 100%; }
.hb-hero__bild { display: block; width: 100%; max-height: 240px; object-fit: contain; }
@media (min-width: 900px) {
  .hb-hero { padding: 72px 0 64px; }
  .hb-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
  .hb-hero--ohne-bild .hb-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hb-hero__media { max-width: 520px; justify-self: end; }
  .hb-hero__bild { max-height: none; }
  .hb-lead--h2 { font-size: max(2.8rem, 28px); }
}
/* Jury-Verbesserung 01.11.2026: Hero niedriger (Bild am Desktop höchstens 300 px, ohne Einleitung 240 px), Text näher an den Seitenanfang */
.hb-hero { padding: 32px 0 28px; }
@media (min-width: 900px) {
  .hb-hero { padding: 40px 0 36px; }
  .hb-hero__media { display: flex; justify-content: flex-end; }
  .hb-hero__bild { width: auto; max-width: 100%; height: auto; max-height: 300px; }
  .hb-hero--ohne-lead .hb-hero__bild { max-height: 240px; }
}
/* echtes Foto statt Illustration (Private Finanzplanung, Vermögensnachfolge) */
.hb-hero--foto .hb-hero__bild { border-radius: 12px; object-fit: cover; aspect-ratio: 3 / 2; }
@media (max-width: 899px) { .hb-hero--foto .hb-hero__bild { max-height: none; max-width: 480px; } }
@media (min-width: 900px) { .hb-hero--foto.hb-hero--ohne-lead .hb-hero__bild { max-height: 280px; } }

/* ===== Abschnitte ===== */
.hb-sec { padding: var(--hb-sec-y) 0; }
.hb-sec--weiss { background: #fff; }
.hb-sec--flaeche { background: var(--hb-flaeche); }
/* Sichtprüfung 01.11.: weißer Hero direkt vor weißem Abschnitt ergab rund 300 px Leerraum zwischen H1 und erstem Text (5 von 6 Seiten); dort nur kleiner Anschluss */
.hb-hero + .hb-sec--weiss, .hb-hero + .hb-chg-hinweis + .hb-sec--weiss { padding-top: clamp(8px, 2vw, 24px); }
.hb-sec > .hb-wrap > * + * { margin-top: 24px; }
.hb-p { max-width: 68ch; font-size: var(--hb-fs); line-height: 1.6; text-wrap: pretty; font-weight: 400; }
.hb-p--lead { font-size: max(2rem, 20px); line-height: 1.55; max-width: 36em; overflow-wrap: anywhere; }
.hb-h2 { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: max(2.4rem, 24px); line-height: 1.18; text-wrap: balance; }
@media (min-width: 992px) { .hb-h2 { font-size: max(3rem, 30px); } }
.hb-sec > .hb-wrap > .hb-h2 + * { margin-top: 16px; }

/* ===== Listen ===== */
.hb-liste { list-style: none; }
.hb-liste--dreieck { max-width: 68ch; }
.hb-liste--dreieck .hb-liste__punkt { position: relative; padding-left: 22px; }
.hb-liste--dreieck .hb-liste__punkt + .hb-liste__punkt { margin-top: 10px; }
.hb-liste--dreieck .hb-liste__punkt::before,
.hb-liste--zeilen .hb-liste__punkt::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 8px; background: var(--hb-blau); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hb-liste--zeilen { max-width: 68ch; }
.hb-liste--zeilen .hb-liste__punkt { position: relative; padding: 14px 0 14px 22px; border-top: 1px solid var(--hb-linie); }
.hb-liste--zeilen .hb-liste__punkt::before { top: calc(14px + .62em); }
.hb-liste--zeilen .hb-liste__punkt:last-child { border-bottom: 1px solid var(--hb-linie); }
/* 02.11.2026 Vorschau ?punkt= (Alex: Dreieck wirkt wie Aufklapp-Pfeil, Logo nicht als Aufzählungszeichen) */
.hb-punkt--kreis :is(.hb-liste--dreieck, .hb-liste--zeilen) .hb-liste__punkt::before { width: 7px; height: 7px; border-radius: 50%; clip-path: none; top: .6em; left: 3px; }
.hb-punkt--quadrat :is(.hb-liste--dreieck, .hb-liste--zeilen) .hb-liste__punkt::before { width: 6px; height: 6px; clip-path: none; top: .64em; left: 3px; }
.hb-punkt--haken :is(.hb-liste--dreieck, .hb-liste--zeilen) .hb-liste__punkt::before { width: 11px; height: 6px; background: none; clip-path: none; border-left: 2px solid var(--hb-blau); border-bottom: 2px solid var(--hb-blau); transform: rotate(-45deg); top: .5em; left: 1px; }
.hb-punkt--kreis .hb-liste--zeilen .hb-liste__punkt::before, .hb-punkt--quadrat .hb-liste--zeilen .hb-liste__punkt::before { top: calc(14px + .62em); }
.hb-punkt--haken .hb-liste--zeilen .hb-liste__punkt::before { top: calc(14px + .5em); }
.hb-liste--karten { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .hb-liste--karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .hb-liste--karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb-liste--karten .hb-liste__punkt { background: #fff; border-radius: 12px; box-shadow: var(--hb-schatten); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.hb-sec--weiss .hb-liste--karten .hb-liste__punkt { background: var(--hb-flaeche); box-shadow: none; }
.hb-liste__icon { color: var(--hb-blau); line-height: 0; }
.hb-liste__icon .hb-i { width: 32px; height: 32px; }

/* ===== Honorar, Bonus, Dokument ===== */
.hb-honorar { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 18px 22px; max-width: 68ch; box-shadow: var(--hb-schatten); }
.hb-sec--weiss .hb-honorar { background: var(--hb-hell); box-shadow: none; }
.hb-honorar__icon { color: var(--hb-blau); width: 28px !important; height: 28px !important; margin-top: 2px; }
.hb-fee__k { font-weight: 600; color: var(--hb-brand); }
.hb-fee__v { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: max(2.2rem, 22px); line-height: 1.3; }
@media (min-width: 992px) { .hb-fee__v { font-size: max(2.6rem, 26px); } }
.hb-fee--satz .hb-fee__v { font-family: var(--hb-sans); font-weight: 400; font-size: max(2rem, 20px); line-height: 1.5; color: var(--hb-ink); }
.hb-fee__fn { margin-top: 8px; font-size: var(--hb-fs-klein); color: var(--hb-muted); }
.hb-bonus { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; background: var(--hb-hell); color: var(--hb-ink); font-weight: 600;
  border-radius: 999px; padding: 8px 18px 8px 14px; line-height: 1.4; }
.hb-bonus__icon { color: var(--hb-blau); width: 24px !important; height: 24px !important; }
.hb-bonus--hero { margin-top: 20px; }
@media (max-width: 559px) { .hb-bonus { border-radius: 14px; align-items: flex-start; } }
.hb-dok { display: flex; gap: 10px; align-items: flex-start; max-width: 68ch; }
.hb-dok__icon { color: var(--hb-blau); width: 24px !important; height: 24px !important; margin-top: 2px; }

/* ===== Belege (Urkunden) und Lightbox ===== */
.hb-zerts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 680px; }
@media (min-width: 700px) { .hb-zerts { grid-template-columns: repeat(auto-fill, 200px); gap: 20px; } }
.hb-zert-fig figcaption { margin-top: 8px; font-size: var(--hb-fs-klein); line-height: 1.4; color: var(--hb-muted); }
.hb-zert { position: relative; display: block; width: 100%; padding: 6px; border: 0; border-radius: 4px; background: #fff; box-shadow: var(--hb-schatten); cursor: pointer; /* 02.11.2026 Alex: Hand statt Lupe */ }
.hb-zert img { display: block; width: 100%; height: auto; }
.hb-zert:hover { box-shadow: var(--hb-schatten-h); }
/* Vorschaubild ohne Vergrößerung (Schalter HB_ZERT_LIGHTBOX in hb-core.php) */
.hb-zert--still, .hb-zert--still:hover { cursor: default; box-shadow: var(--hb-schatten); }
.hb-zert__lupe { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; background: var(--hb-blau); color: #fff; display: grid; place-items: center; }
.hb-zert__lupe .hb-i { width: 18px; height: 18px; }
.hb-lightbox { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 88vh; overflow: visible; }
.hb-lightbox::backdrop { background: rgba(15, 36, 83, .82); }
.hb-lightbox__bild { display: block; max-width: 92vw; max-height: 88vh; width: auto; height: auto; background: #fff; border-radius: 4px; }
.hb-lightbox__zu { position: absolute; top: -18px; right: -10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--hb-ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--hb-schatten); }
.hb-lightbox__zu .hb-i { width: 22px; height: 22px; }
@media (max-width: 599px) { .hb-lightbox__zu { top: -52px; right: 0; } }

/* ===== Knöpfe ===== */
.hb .hb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 6px;
  font-family: var(--hb-sans); font-weight: 700; font-size: max(1.7rem, 17px); line-height: 1.2; text-decoration: none; border: 2px solid transparent;
  white-space: nowrap; transition: background-color .15s, color .15s; }
.hb .hb-btn .hb-i { width: 20px; height: 20px; }
.hb .hb-btn--voll { background: var(--hb-blau); color: #fff; }
.hb .hb-btn--voll:hover { background: var(--hb-blau-h); color: #fff; }
.hb .hb-btn--hell { background: #fff; color: var(--hb-blau); border-color: #fff; }
.hb .hb-btn--hell:hover { background: var(--hb-hell); border-color: var(--hb-hell); color: var(--hb-blau-h); }
.hb .hb-btn--linie-hell { background: transparent; color: #fff; border-color: #fff; }
.hb .hb-btn--linie-hell:hover { background: #fff; color: var(--hb-blau); }

/* ===== Kontaktabschluss (Navy) ===== */
.hb-kontakt { background: var(--hb-navy); color: #fff; padding: var(--hb-sec-y) 0; }
.hb-kontakt :focus-visible { outline-color: #fff; }
.hb .hb-kontakt a:not(.hb-btn) { color: #fff; }
.hb-kontakt__grid { display: grid; gap: 40px; align-items: center; }
/* Jury-Verbesserung 01.11.2026: linke Spalte oben bündig zur Personenkarte, darunter Foto der Villa Salis */
@media (min-width: 1000px) { .hb-kontakt__grid { align-items: start; } }
.hb-kontakt__ort { margin-top: 32px !important; border-radius: 12px; overflow: hidden; max-width: 620px; background: rgba(255,255,255,.06); }
.hb-kontakt__ort img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.hb-kontakt .hb-bonus--kontakt { margin-bottom: 20px; background: rgba(255,255,255,.1); color: #fff; }
.hb-kontakt .hb-bonus--kontakt .hb-bonus__icon { color: #fff; }
/* T-16: gleich breite Spalten ab 1000 px (vorher 7:5, Personenkarte zu schmal); darunter untereinander, Karte höchstens 640 px */
@media (min-width: 1000px) { .hb-kontakt__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
@media (max-width: 999px) { .hb-kontakt .hb-person { max-width: 640px; } }
.hb-kontakt__satz { font-family: var(--hb-serif); font-weight: 500; font-size: max(2.4rem, 24px); line-height: 1.3; text-wrap: balance; max-width: 26em; }
@media (min-width: 992px) { .hb-kontakt__satz { font-size: max(2.8rem, 28px); } }
.hb-kontakt__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 559px) {
  .hb-kontakt__knoepfe { flex-direction: column; }
  .hb-kontakt__knoepfe .hb-btn { width: 100%; font-size: max(1.6rem, 16px); padding-left: 14px; padding-right: 14px; }
}
/* Personenkarte (Zusatz Alex 01.11.2026 „wirkt sehr gequetscht“, T-16): Raster statt schmaler Textspalte neben dem Foto.
   Foto und Name oben, Rolle, Qualifikationen und Satz über die volle Kartenbreite; Qualifikationen als Zeilen mit Kürzel-Chip. */
.hb-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "foto name" "rolle rolle" "quali quali" "satz satz";
  column-gap: 20px; align-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 24px; }
.hb-person__foto { grid-area: foto; display: block; }
.hb-person__bild { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.35); }
.hb-person__name { grid-area: name; font-family: var(--hb-serif); font-weight: 600; font-size: max(2.4rem, 24px); line-height: 1.2; }
.hb .hb-person__name a { text-decoration: none; }
.hb .hb-person__name a:hover { text-decoration: underline; }
.hb-person__rolle { grid-area: rolle; margin-top: 20px !important; font-size: var(--hb-fs); line-height: 1.55; color: rgba(255,255,255,.9); max-width: 40em; }
.hb-person--kurz .hb-person__rolle { grid-area: auto; margin-top: 4px !important; }
.hb-person--kurz { grid-template-areas: "foto name" "foto rolle" "satz satz"; row-gap: 0; }
.hb-person__satz { grid-area: satz; margin-top: 20px !important; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); font-size: var(--hb-fs-klein); line-height: 1.6; color: rgba(255,255,255,.88); }
.hb-quali { grid-area: quali; list-style: none; margin-top: 16px !important; display: grid; gap: 0; }
.hb-quali li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--hb-fs-klein); line-height: 1.45; color: rgba(255,255,255,.9); }
.hb-quali li:first-child { border-top: 0; }
.hb-quali b { display: block; text-align: center; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; font-weight: 600; font-size: 14px; line-height: 1.6; padding: 1px 6px; color: #fff; }
.hb-quali li.is-hervor b { background: #fff; color: var(--hb-navy); border-color: #fff; }
.hb-quali li.is-hervor span { color: #fff; font-weight: 600; }
@media (min-width: 1000px) {
  .hb-person { grid-template-columns: 112px minmax(0, 1fr); padding: 32px; column-gap: 24px; }
  .hb-person__bild { width: 112px; height: 112px; }
}
@media (max-width: 559px) {
  .hb-person { grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .hb-person__bild { width: 72px; height: 72px; }
  .hb-person__name { font-size: max(2.2rem, 22px); }
  .hb-person__rolle { font-size: var(--hb-fs-klein); margin-top: 16px !important; }
}

/* ===== Weitere Leistungen ===== */
.hb-weitere__liste { list-style: none; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .hb-weitere__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hb-weitere__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb .hb-karte-link { display: flex; align-items: center; gap: 16px; min-height: 72px; height: 100%; padding: 16px 20px; background: #fff; border-radius: 12px;
  box-shadow: var(--hb-schatten); text-decoration: none; color: var(--hb-ink); transition: box-shadow .2s; }
.hb .hb-karte-link:hover { box-shadow: var(--hb-schatten-h); color: var(--hb-ink); }
.hb-karte-link__icon { color: var(--hb-blau); width: 32px !important; height: 32px !important; }
.hb-karte-link__titel { flex: 1; min-width: 0; font-family: var(--hb-serif); font-weight: 500; font-size: max(2.1rem, 21px); line-height: 1.25; color: var(--hb-ink); overflow-wrap: break-word; }
.hb-karte-link__pfeil { color: var(--hb-blau); width: 22px !important; height: 22px !important; transition: transform .2s; }
.hb .hb-karte-link:hover .hb-karte-link__pfeil { transform: translateX(3px); }

/* ===== Hero: Ausrichtung (Zusatz Alex 01.11.2026, Vermögensstruktur: Grafik stand über der Überschrift) ===== */
/* Bild oben bündig mit der H1 statt vertikal zentriert; Versatz = Höhe der Brotkrumenzeile */
@media (min-width: 900px) {
  .hb-hero__grid { align-items: start; }
  .hb-hero__media { margin-top: 38px; }
}

/* ===== Brotkrumen (T-15) ===== */
.hb-krumen { margin-bottom: 14px; font-size: max(1.4rem, 14px); line-height: 1.4; color: var(--hb-muted); }
.hb-krumen ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0; }
.hb-krumen li { display: inline-flex; align-items: center; gap: 10px; }
.hb-krumen li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
.hb .hb-krumen a { color: var(--hb-brand); text-decoration: none; }
.hb .hb-krumen a:hover { color: var(--hb-blau); text-decoration: underline; }
.hb-krumen [aria-current] { color: var(--hb-ink); }

/* ===== Scan-Bausteine (01.11.2026, Bericht 83-visuell-pfp.md); nutzbar auf allen sechs Seiten ===== */
/* Hervorhebung kurzer Wortgruppen (Vorbild /immobilien/leipzig-2026/, „QNG highlighting language“: normale Schriftstärke, heller Hintergrund), Farbe aus --hb-blau abgeleitet */
.hb .hb-mark { font-weight: inherit; color: var(--hb-ink); background: #E1E8F8; border-radius: 3px; padding: 0 .18em; margin: 0 -.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hb-kontakt .hb-mark { background: rgba(255,255,255,.16); color: #fff; }

/* Faktenleiste */
.hb-fakten { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; }
@media (min-width: 480px) { .hb-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.hb-fakten--hero { margin-top: 24px; max-width: 640px; }
.hb-fakt { display: flex; gap: 12px; align-items: flex-start; background: var(--hb-flaeche); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.hb-sec--flaeche .hb-fakt { background: #fff; }
/* schmal: eine ruhige Box mit Trennlinien statt vier Einzelkarten (spart Höhe über dem Hero-Bild) */
@media (max-width: 479px) {
  .hb-fakten { gap: 0; background: var(--hb-flaeche); border-radius: 12px; padding: 4px 16px; }
  .hb-fakt { background: none; border-radius: 0; padding: 12px 0; }
  .hb-fakt + .hb-fakt { border-top: 1px solid var(--hb-linie); }
}
.hb-fakt__icon { color: var(--hb-blau); width: 26px !important; height: 26px !important; margin-top: 1px; }
.hb-fakt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hb-fakt__k { font-size: max(1.4rem, 14px); line-height: 1.35; color: var(--hb-muted); }
.hb-fakt__v { font-size: var(--hb-fs-klein); line-height: 1.4; font-weight: 600; color: var(--hb-ink); overflow-wrap: anywhere; }
.hb .hb-fakt__v a { color: var(--hb-blau); }

/* Gegenübergestellte Kacheln (Problem und Lösung) */
.hb-kacheln { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 900px) { .hb-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.hb-kachel { background: #fff; border-radius: 16px; padding: 24px 22px 26px; box-shadow: var(--hb-schatten); border-top: 4px solid #9AA6B6; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hb-kachel--loesung { border-top-color: var(--hb-blau); }
@media (min-width: 900px) { .hb-kachel { padding: 32px 32px 34px; } }
.hb-kachel__kopf { display: flex; align-items: center; gap: 14px; }
.hb-kachel__icon { flex: none; width: 44px !important; height: 44px !important; padding: 10px; border-radius: 50%; background: var(--hb-flaeche); color: var(--hb-brand); }
.hb-kachel--loesung .hb-kachel__icon { background: var(--hb-hell); color: var(--hb-blau); }
.hb .hb-kachel__h2 { font-size: max(2.4rem, 24px); }
@media (min-width: 992px) { .hb .hb-kachel__h2 { font-size: max(2.8rem, 28px); } }
.hb-kachel .hb-p { max-width: none; }
.hb-frage { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: max(2.1rem, 21px); line-height: 1.35; padding-left: 16px; border-left: 3px solid #9AA6B6; text-wrap: balance; }
@media (min-width: 992px) { .hb-frage { font-size: max(2.3rem, 23px); } }

/* Support-Grafik (Inline-SVG, breite und schmale Fassung) */
.hb-grafik { background: var(--hb-flaeche); border-radius: 16px; padding: 20px 16px; max-width: 1000px; }
.hb-sec--flaeche .hb-grafik { background: #fff; box-shadow: var(--hb-schatten); }
.hb-grafik svg { display: block; width: 100%; height: auto; font-family: var(--hb-sans); }
.hb-grafik__breit { display: none; }
@media (min-width: 700px) {
  .hb-grafik { padding: 28px 32px; }
  .hb-grafik__breit { display: block; }
  .hb-grafik__schmal { display: none; }
}
.hb-grafik__schmal svg { max-width: 420px; margin: 0 auto; }

/* ===== Weitere Leistungen: etwas prominenter (Ersatz für die Unternavigation, T-14) ===== */
.hb .hb-karte-link { min-height: 88px; padding: 18px 20px; gap: 16px; }
.hb-karte-link__icon { box-sizing: content-box; padding: 10px; border-radius: 50%; background: var(--hb-hell); }

/* ===== Einblenden (nur mit JS, nicht bei reduzierter Bewegung) ===== */
.hb-js [data-hb-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
.hb-js [data-hb-reveal].is-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hb-js [data-hb-reveal] { opacity: 1; transform: none; transition: none; }
  .hb .hb-karte-link, .hb-karte-link__pfeil { transition: none; }
  .hb .hb-karte-link:hover .hb-karte-link__pfeil { transform: none; }
}

/* ===== Nach-oben-Pfeil (Theme) unter 400 px ===== */
/* Jury-Verbesserung 01.11.2026: Ohne Rückruf-Widget (unter 400 px) stand der Pfeil in der Ecke über dem Fließtext und verdeckte Buchstaben.
   Wie beim Gold-Artikel (gold-artikel.css v4) dort ausgeblendet; Kontakt steht unter 400 px im Burger, „Weitere Leistungen“ und Footer bleiben erreichbar. */
@media (max-width: 399px) { body.hb-seite .enigma_scrollup { display: none !important; } }

/* ===== Druck ===== */
@media print {
  .hb-krumen, .hb-kontakt__knoepfe, .hb-weitere { display: none; }
  .hb-kontakt { background: #fff; color: #000; }
}

/* ===== Feinschliff 02.11.2026 (Querschnitt, arbeit/honorar-feinschliff/10-querschnitt.md; gilt für Honorarberatung und Über uns) ===== */

/* R6 (T-21): Sprungziele landen unter der festen Navigation; JS setzt --hb-kopf (Kopfhöhe + 15 px), Werte hier nur ohne JS */
.hb [id] { scroll-margin-top: var(--hb-kopf, 96px); }
@media (max-width: 767px) { .hb [id] { scroll-margin-top: var(--hb-kopf, 15px); } }

/* R1/R4 (T-19): Flächenbänder und Kontaktabschluss über die volle Bildschirmbreite. Ab 1200 px ist die Seite „boxed“ (Kasten 1230/1360 px);
   der Grund wird wie beim Footer (trigonus-redesign.css, border-image mit Outset 100vmax) über den Kasten hinaus gemalt, ohne Scrollbreite.
   Dafür darf .hb dort nicht beschneiden (geprüft: keine zusätzliche Scrollbreite bei 1200/1366/1920 px); Kastenschatten auf diesen Seiten aus. */
@media (min-width: 1200px) {
  .hb { overflow-x: visible; }
  body.hb-seite.boxed { box-shadow: none; }
  .hb-sec--flaeche { border-image: conic-gradient(#F2F4F8 0 0) fill 0 / 0 / 0 100vmax; }
}

/* R4 (T-18): Kontaktabschluss als ruhiger Sub-Footer direkt über dem Footer: gleiches Navy wie der Footer (#1B2942), feine Trennlinie zum Footer
   (wie dessen untere Linie), etwas weniger Höhe als ein Inhaltsabschnitt. Steht seit T-18 unter „Weitere Leistungen“. */
/* Fläche, Verlauf und Trennlinie seit R12 (Nacharbeit 02.11.2026) ausschließlich in ../gemeinsam/tg-subfooter.css (Klasse .tg-subfooter am selben Element) */
.hb-kontakt--abschluss { padding: clamp(48px, 6vw, 88px) 0; }
.hb-kontakt--abschluss .hb-person { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.hb-kontakt--abschluss .hb-kontakt__ort { background: rgba(255,255,255,.04); }
/* Variante ohne Personenkarte (Team, R1): Adresse und Knöpfe links, Kartenlink rechts oben bündig mit der Adresse statt mittig schwebend */
.hb-kontakt--ohne-person .hb-kontakt__grid { align-items: start; }
@media (min-width: 1000px) {
  .hb-kontakt--ohne-person .hb-kontakt__grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); }
  .hb-kontakt--ohne-person .hb-kontakt__rechts { align-self: start; justify-self: end; width: 100%; }
}
.hb-kontakt--ohne-person .hb-kontakt__satz { max-width: 20em; }

/* R8 (T-20): Querverweis-Karten ohne Einzelbuchstaben-Umbruch. Spalten erst ab 360 px Kartenbreite (dann passt „Investmentfondsanalyse“ in einer Zeile),
   Symbolkreis etwas kleiner; muss ein Titel umbrechen, dann nur an den gesetzten Wortfugen (&shy;, hb_trenn()), keine automatische Silbentrennung. */
.hb-weitere__liste { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)) !important; }
.hb .hb-karte-link { gap: 14px; padding: 18px 18px; }
.hb-karte-link__icon { width: 26px !important; height: 26px !important; padding: 9px; }
.hb-karte-link__titel { overflow-wrap: normal; word-break: normal; hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 559px) { .hb-karte-link__titel { font-size: max(1.9rem, 19px); } }
/* Telefonnummer in der Faktenleiste nicht am Bindestrich trennen */
.hb .hb-fakt__v a[href^="tel:"] { white-space: nowrap; }

/* R7 (T-22): Urkunden überall sichtbar vergrößerbar: ganze Figur (auch die Bildunterschrift) mit Lupen-Zeiger, Hover hebt die Urkunde an */
.hb-zert-fig:has(.hb-zert:not(.hb-zert--still)) { cursor: pointer; /* 02.11.2026 Alex: Hand statt Lupe */ }
.hb-zert-fig:has(.hb-zert:not(.hb-zert--still)) figcaption { cursor: pointer; /* 02.11.2026 Alex: Hand statt Lupe */ }
.hb-zert:not(.hb-zert--still) { transition: box-shadow .2s, transform .2s; }
.hb-zert-fig:hover .hb-zert:not(.hb-zert--still), .hb-zert:not(.hb-zert--still):focus-visible { box-shadow: var(--hb-schatten-h); transform: translateY(-2px); }
.hb-zert-fig:hover .hb-zert__lupe { background: var(--hb-blau-h); }
.hb-zert-fig:has(.hb-zert:not(.hb-zert--still)):hover figcaption { color: var(--hb-ink); }

/* R9 (T-23): Brotkrumen bleiben (Rückweg zur Übersicht ohne zweite Menüleiste); Link mit etwas größerer Trefferfläche (mind. 24 px hoch) */
.hb .hb-krumen a { display: inline-block; padding: 3px 0; }

@media (prefers-reduced-motion: reduce) {
  .hb-zert:not(.hb-zert--still) { transition: none; }
  .hb-zert-fig:hover .hb-zert:not(.hb-zert--still) { transform: none; }
}

/* ===== Gesamtprüfung 02.11.2026 (arbeit/honorar-feinschliff/90-bericht.md) ===== */
/* R10 (T-24, Alex: „mir gefällt nicht, dass der subfooter die gleiche farbe hat wie der footer … das haben wir hier besser umgesetzt [Fondsdepot]“):
   Kontaktabschluss wie „Ihr nächster Schritt“ der Fondsdepot-Seite (uebersicht/v6/css/v6.css, 24.10.2026): linearer Verlauf 165° von #2A4170 über
   #1F3155 zu #1B2942, oben deutlich blauer und heller als der Footer, unten nahtlos im Footer-Navy, Haarlinie rgba(255,255,255,.14) als Trennung.
   Fläche malt nur das Pseudo-Element über die volle Fensterbreite (wie dort); body clippt die Überbreite ohne Scrollcontainer.
   Ersetzt T-18-Grund (#1B2942) und den border-image-Grund ab 1200 px. Kontrast Weiß auf #2A4170 10,1:1, auf #1B2942 14,6:1. */
/* Nacharbeit 02.11.2026 (R12): Verlauf, Haarlinie und Pseudo-Elemente in die gemeinsame Datei ../gemeinsam/tg-subfooter.css (.tg-subfooter) verschoben. */
body.hb-seite { overflow-x: clip; }

/* 02.11.2026 Alex (Honorarzeile): Box so breit wie der Inhalt (Desktop eine Zeile), Label als ruhige Überzeile statt kleiner Text in derselben Zeile, Icon Euro-Münze statt Doppelkreis */
.hb-honorar { max-width: 100%; width: fit-content; align-items: center; }
.hb-fee__k { display: block; font-size: var(--hb-fs-klein, .875rem); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.hb-honorar__icon { width: 32px !important; height: 32px !important; margin-top: 0; }

/* ===== Nacharbeit 02.11.2026 (R13, arbeit/honorar-feinschliff/92-nacharbeit.md) ===== */
/* Alex zu /vermogensstruktur/: „viel whitespace zwischen headline und text“. Ursache auf allen Seiten mit Illustration und kurzer Textspalte:
   Die Hero-Höhe folgte dem Bild (300 px), die Einleitung begann erst unter dem Hero (H1 bis erster Text 302 px bei 1440/1920, auf Pixel 7 stand das Bild dazwischen).
   Lösung im gemeinsamen Baustein: hb_hero(['einleitung_html' => …]) setzt den Einstiegsabsatz in die Textspalte neben das Bild (Muster HV-08).
   Gesetz der Nähe: innerhalb der H1-Einheit 12 bis 20 px; zum folgenden Inhalt bleiben Bildunterkante, Hero-Innenabstand und Abschnittsanschluss (rund 80 bis 130 px). */
.hb-hero__einleitung { margin-top: 20px; max-width: 36em; text-wrap: pretty; }
.hb-hero .hb-lead + .hb-hero__einleitung { margin-top: 12px; }