/* ===== Round 67: Brand-Color-Tokens (CreatorSite) ===== */
:root {
    /* Notova-Plattform-Chrome (NICHT das Creator-eigene --brand-primary) */
    --ub-primary: #16233D;
    --ub-primary-light: #F0A500;
    --ub-primary-hover: #11203B;
    --ub-primary-gradient: linear-gradient(150deg, #213354 0%, #16233D 60%, #0C1424 100%);
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip statt hidden — `overflow-x: hidden` auf html/body macht den Body zum
   Scroll-Container und bricht `position: sticky` (Sticky-Header „geht nicht"). `clip` kappt
   horizontalen Überlauf genauso, ohne Sticky zu zerstören. */
html, body { margin: 0; padding: 0; font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #f8fafc; color: #1a1a2e; overflow-x: clip; max-width: 100vw; }

/* ===== Round 114c34: Travel-Info-Bar (§1.5 BlogBuilder-Design-Spec) ===== */
.post-travel-bar {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: var(--travel-bar-bg, #FAF8F4);
    border-left: 4px solid var(--creator-primary, #16233D);
    border-radius: 0 8px 8px 0;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    /* Eigene lesbare Textfarbe — sonst erbt die Bar eine helle Theme-Body-Farbe
       und wird auf dem hellen Bar-Hintergrund unsichtbar. */
    color: var(--travel-bar-text, #1f2937);
}
.post-travel-bar-item span { color: inherit; }
.post-travel-bar-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.post-travel-bar-price {
    font-weight: 700;
    color: var(--creator-primary, #16233D);
}

/* Theme-Overrides: backpacker-dark */
body.theme-backpacker-dark .post-travel-bar {
    background: #1a1a1a;
    border-left-color: #10b981;
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    color: #737373;
}
/* Theme-Overrides: roadtrip-polaroid */
body.theme-roadtrip-polaroid .post-travel-bar {
    background: #fffbf0;
    border-left-color: #e63946;
    font-family: 'Lora', serif;
    font-style: italic;
}

@media (max-width: 640px) {
    .post-travel-bar { flex-direction: column; gap: 0.5rem; }
}

/* ===== Default-Posts-Grid (PostsPaginationIsland-Fallback "posts-grid") =====
   War bisher NUR in Category.razor's scoped <style> definiert → auf der Blog-Startseite
   (die diese CSS nicht lädt) fielen die Default-Layout-Posts in eine 1-spaltige Stapelung
   statt ins 3-spaltige Grid. Hier in die immer geladene app.css gezogen. */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
@media (max-width: 640px) {
    .posts-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ===== Base-Post-Card (Struktur) =====
   Wie .posts-grid lagen diese Regeln bisher NUR in Category.razor's scoped <style>.
   Auf der Blog-Startseite + in Studio-Block-Previews (PostsPaginationIsland) fehlten sie
   → Cards mit Random-Bildgröße + Text am Rand = "hässlich". Themes stylen .post-card via
   `body.theme-X .post-card` (Spezifität 0,2,1) und überschreiben Background/Border/Shadow;
   die Struktur (Cover-Höhe, Body-Padding, Titel/Footer-Layout) setzen sie NICHT → hier als
   niedrig-spezifische Base (0,1,0) global gezogen. Layout-Varianten (posts-cards/-polaroid/
   -timeline/-magazine) gewinnen mit `.posts-X .post-card` (0,2,0). */
.post-card {
    background: var(--card-bg, #fff);
    border-radius: var(--mood-radius, 14px);
    overflow: hidden;
    box-shadow: var(--mood-shadow, 0 2px 8px rgba(0,0,0,.06));
    border: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .15s;
    display: flex;
    flex-direction: column;
    position: relative;
}
.post-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px); }
.post-cover { width: 100%; object-fit: cover; display: block; }
/* Feste Cover-Höhe NUR im Default-Raster — die anderen Layouts (magazine/polaroid/
   timeline/cards) steuern die Cover-Proportion über aspect-ratio; eine globale
   `.post-cover{height}` würde deren aspect-ratio überschreiben und alle gleich aussehen lassen. */
.posts-grid { gap: 1.75rem; }
.posts-grid .post-cover { height: 200px; }
.post-price-badge { position: absolute; top: 10px; right: 10px; background: rgba(22,163,74,0.92); color: #fff; font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 8px; z-index: 1; }
.post-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.post-meta { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; }
.post-cat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.post-dest { font-size: .75rem; color: #94a3b8; display: inline-flex; align-items: center; gap: .2rem; }
.post-dest i { font-size: .8rem; }
.post-title { font-size: 1.05rem; font-weight: 700; color: var(--brand-heading, #1a1a2e); margin: 0 0 .4rem; line-height: 1.4; }
.post-subtitle { font-size: .875rem; color: #64748b; margin: 0 0 auto; flex: 1; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.post-footer { display: flex; align-items: center; gap: .75rem; font-size: .75rem; color: #94a3b8; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid #f1f5f9; }
.post-date { margin-right: auto; }
.post-stat { display: inline-flex; align-items: center; gap: .25rem; }
.post-stat i { font-size: .85rem; }
.post-card-skeleton { height: 300px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 14px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.loading-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.empty-state { text-align: center; padding: 4rem 2rem; color: #94a3b8; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2.5rem 0 1rem; }
.btn-page { padding: .5rem 1.1rem; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; font-size: .85rem; font-weight: 600; color: #334155; cursor: pointer; transition: border-color .15s, color .15s; }
.btn-page:hover:not(:disabled) { border-color: var(--brand-primary, #16233D); color: var(--brand-primary, #16233D); }
.btn-page:disabled { opacity: .45; cursor: default; }
.page-info { font-size: .8rem; color: #94a3b8; }

/* Leeres Cover (Post ohne Bild) — vorher graue Box mit grauem Bild-Icon, wirkte "kaputt".
   Jetzt dezenter Ink-Verlauf + größeres, gedämpftes Icon (on-brand statt Broken-Image-Look).
   Base-Regel (niedrige Spezifität) — Theme-/Layout-spezifische Overrides gewinnen weiterhin. */
.post-cover-empty {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #213354 0%, #16233D 60%, #0C1424 100%);
    color: rgba(240, 165, 0, 0.55);
    font-size: 2rem;
}

/* ===== Magazine-Layout — editoriale Hero-Featured-Card + 2 Spalten ===== */
.posts-magazine {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mood-density, 1.75rem);
}
/* Featured (erste Karte): großes Cover mit Titel-Overlay statt Text-drunter → Magazin-Look. */
.posts-magazine .post-card--featured {
    grid-column: 1 / -1;
    position: relative;
    min-height: 400px;
    border-radius: var(--mood-radius, 16px);
    overflow: hidden;
    display: block;
}
.posts-magazine .post-card--featured .post-cover {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
}
.posts-magazine .post-card--featured .post-cover-empty {
    position: absolute; inset: 0; height: 100%;
    font-size: 4rem;
}
.posts-magazine .post-card--featured .post-card-body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 2rem 2.25rem;
    background: linear-gradient(180deg, transparent 0%, rgba(12,20,36,.85) 100%);
}
.posts-magazine .post-card--featured .post-title { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; margin-bottom: .5rem; }
.posts-magazine .post-card--featured .post-subtitle { color: rgba(255,255,255,.92); font-size: 1.02rem; -webkit-line-clamp: 2; }
.posts-magazine .post-card--featured .post-meta .post-cat { color: #fff; }
.posts-magazine .post-card--featured .post-dest { color: rgba(255,255,255,.85); }
.posts-magazine .post-card--featured .post-footer { color: rgba(255,255,255,.8); border-top-color: rgba(255,255,255,.22); margin-top: .6rem; }
.posts-magazine .post-card--featured .post-price-badge { top: 16px; right: 16px; }
/* Die zwei großen Karten (idx 1+2) bekommen ein höheres Cover als das Standard-Raster. */
.posts-magazine .post-card--large .post-cover { height: 240px; }
@media (max-width: 640px) {
    .posts-magazine { grid-template-columns: 1fr; }
    .posts-magazine .post-card--featured { grid-column: 1; min-height: 320px; }
    .posts-magazine .post-card--large .post-cover { height: 200px; }
}

/* ===== R114c35h: Drei neue Layout-Varianten für strukturelle Vielfalt ===== */

/* POLAROID — angekippte Karten im Masonry-ähnlichen Layout */
.posts-polaroid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2.2rem 1.6rem;
    padding: 1rem 0;
}
.posts-polaroid .post-card {
    background: #fefefe;
    padding: 0.6rem 0.6rem 1.2rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    color: inherit;
}
.posts-polaroid .post-card:nth-child(3n+1) { transform: rotate(-1.2deg); }
.posts-polaroid .post-card:nth-child(3n+2) { transform: rotate(0.8deg); }
.posts-polaroid .post-card:nth-child(3n+3) { transform: rotate(-0.4deg); }
.posts-polaroid .post-card:hover {
    transform: rotate(0deg) translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.posts-polaroid .post-cover {
    aspect-ratio: 4/3;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0.6rem;
}
/* §245g: Handschrift-Look nur noch als Akzent auf der Datums-Zeile — komplette
   Card-Body-Texte in Caveat waren live schwer lesbar („komische Schriftart"). */
.posts-polaroid .post-card-body { padding: 0 0.3rem; }
.posts-polaroid .post-card-date, .posts-polaroid .post-card-meta time { font-family: 'Caveat', 'Kalam', cursive, sans-serif; font-size: 1.05em; }
.posts-polaroid .post-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.2rem; }
.posts-polaroid .post-meta, .posts-polaroid .post-footer { font-size: 0.78rem; opacity: 0.7; }

/* CARDS — große Cover-Cards mit Text-Overlay (Pinterest-Stil) */
.posts-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.posts-cards .post-card {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    transition: transform 0.3s ease;
}
.posts-cards .post-card:hover { transform: translateY(-4px); }
.posts-cards .post-cover {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.posts-cards .post-cover-empty {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--brand-primary, #16233D), var(--brand-accent, #F0A500));
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.4); font-size: 3rem;
}
.posts-cards .post-card-body {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.2rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 100%);
    z-index: 1;
}
.posts-cards .post-meta { color: rgba(255,255,255,.85); font-size: 0.78rem; margin-bottom: 0.4rem; }
.posts-cards .post-meta .post-cat { color: #fff !important; }
.posts-cards .post-title { color: #fff; font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.3rem; }
.posts-cards .post-subtitle { color: rgba(255,255,255,.85); font-size: 0.85rem; line-height: 1.4; }
.posts-cards .post-footer { color: rgba(255,255,255,.7); font-size: 0.75rem; margin-top: 0.5rem; }

/* TIMELINE — chronologische Liste mit vertikalem Strich + Datumsmarker */
.posts-timeline {
    position: relative;
    padding-left: 2.5rem;
    border-left: 2px solid color-mix(in srgb, var(--brand-primary, #16233D) 25%, #e5e7eb);
    margin-left: 1rem;
}
.posts-timeline .post-card {
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    margin-bottom: 2.2rem;
    padding: 1rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
}
.posts-timeline .post-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.posts-timeline .post-card::before {
    content: '';
    position: absolute;
    left: -2.85rem;
    top: 1.5rem;
    width: 14px; height: 14px;
    background: var(--brand-primary, #16233D);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--brand-primary, #16233D);
}
.posts-timeline .post-cover {
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 6px;
    width: 100%;
}
@media (max-width: 640px) {
    .posts-timeline { padding-left: 1.5rem; margin-left: 0.5rem; }
    .posts-timeline .post-card { grid-template-columns: 1fr; }
    .posts-timeline .post-card::before { left: -1.85rem; }
}

/* ===== R114c35k: Generative Avatar-Fallback ===== */
.ub-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-family: var(--brand-heading-font, var(--brand-font, inherit));
    text-shadow: 0 1px 4px rgba(0,0,0,.15);
    overflow: hidden;
    flex-shrink: 0;
}
.ub-avatar-fallback::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25) 0%, transparent 50%);
    pointer-events: none;
}

/* ===== Welle 3: Header-Layout-Varianten (cs-header--*) ===== */

/* Center layout: logo + nav centered */
.cs-header--center .site-header-inner {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}
.cs-header--center .site-nav { justify-content: center; }
.cs-header--center .site-logo { justify-content: center; }

/* Sticky header */
.cs-header--sticky {
    position: sticky !important;
    top: 0;
    z-index: 200;
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    background: rgba(255, 255, 255, 0.92) !important;
}

/* ===== Welle 3: Nav-Style-Varianten (cs-nav--*) ===== */

/* Underline (default) */
.cs-nav--underline .site-nav-link {
    position: relative;
    padding-bottom: 2px;
}
.cs-nav--underline .site-nav-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--brand-primary, #16233D);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}
.cs-nav--underline .site-nav-link:hover::after,
.cs-nav--underline .site-nav-link.active::after {
    transform: scaleX(1);
}

/* Pill: rounded background on hover/active */
.cs-nav--pill .site-nav-link {
    padding: .35rem .85rem;
    border-radius: 50px;
    transition: background 0.15s, color 0.15s;
}
.cs-nav--pill .site-nav-link:hover {
    background: color-mix(in srgb, var(--brand-primary, #16233D) 12%, #fff);
    color: var(--brand-primary, #16233D);
}

/* Minimal: color change only, no underline or background */
.cs-nav--minimal .site-nav-link {
    font-weight: 500;
    opacity: 0.75;
    transition: opacity 0.15s, color 0.15s;
}
.cs-nav--minimal .site-nav-link:hover {
    opacity: 1;
    color: var(--brand-primary, #16233D);
}

/* ===== Welle 3: PostDetail HeroStyle ===== */

/* editorial: full-width bleed cover, centered title below */
.pd-hero--editorial {
    margin: 0 -1.5rem 0;
    position: relative;
}
.pd-hero--editorial .pd-editorial-cover {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
    aspect-ratio: 16 / 9;
}
.pd-hero--editorial .pd-editorial-text {
    background: var(--brand-surface, #fff);
    text-align: center;
    padding: 2rem 2rem 1.5rem;
    max-width: 720px;
    margin: 0 auto;
}
.pd-hero--editorial .pd-editorial-title {
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #1a1a2e;
    margin: 0 0 0.75rem;
}
.pd-hero--editorial .pd-editorial-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0 0 1rem;
    line-height: 1.5;
}
.pd-hero--editorial .pd-editorial-meta {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #94a3b8;
}

/* travelogue: polaroid-style cover + stamp-look */
.pd-hero--travelogue {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    margin-bottom: 2rem;
}
.pd-hero--travelogue .pd-polaroid {
    flex-shrink: 0;
    background: #fff;
    padding: 12px 12px 40px;
    box-shadow: 0 6px 24px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
    transform: rotate(-1deg);
    transition: transform 0.2s ease;
    max-width: 360px;
}
.pd-hero--travelogue .pd-polaroid:hover { transform: rotate(0deg) scale(1.01); }
.pd-hero--travelogue .pd-polaroid-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.pd-hero--travelogue .pd-polaroid-empty {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f0f4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    font-size: 2rem;
}
.pd-hero--travelogue .pd-travelogue-text {
    flex: 1;
    padding-top: 0.5rem;
}
.pd-hero--travelogue .pd-travelogue-title {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #1a1a2e;
    margin: 0 0 0.75rem;
}
.pd-hero--travelogue .pd-travelogue-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin: 0 0 1rem;
    line-height: 1.5;
}
.pd-hero--travelogue .pd-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border: 2px solid var(--brand-primary, #16233D);
    border-radius: 4px;
    color: var(--brand-primary, #16233D);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    font-family: 'Courier New', monospace;
}
.pd-hero--travelogue .pd-stamp i { font-size: 0.85rem; }
.pd-hero--travelogue .pd-travelogue-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 0.75rem;
}

@media (max-width: 720px) {
    .pd-hero--editorial { margin: 0 -1rem 0; }
    .pd-hero--editorial .pd-editorial-text { padding: 1.5rem 1rem 1rem; }
    .pd-hero--travelogue { flex-direction: column; gap: 1.5rem; }
    .pd-hero--travelogue .pd-polaroid { max-width: 100%; transform: none; }
}

/* ── R115 Editor 2.0: Textfarben-Palette (nv-c-*) ─────────────────────────
   Farben werden im Editor als Klassen gespeichert (nie Inline-Styles) —
   dadurch dark-mode-faehig. Dark-Varianten setzt der Layout-Dark-Block. */
.nv-c-spark { color: #B87E00; }
.nv-c-green { color: #1a7f4b; }
.nv-c-red   { color: #b3423a; }
.nv-c-blue  { color: #1d6fb8; }
:root[data-ub-theme="dark"] .nv-c-spark { color: #F0A500; }
:root[data-ub-theme="dark"] .nv-c-green { color: #5BC98F; }
:root[data-ub-theme="dark"] .nv-c-red   { color: #E58A82; }
:root[data-ub-theme="dark"] .nv-c-blue  { color: #6FB1E8; }

/* R115 Phase 3: Callouts aus dem Editor (div.nv-callout-*) */
.nv-callout { display: block; border-radius: 12px; padding: 12px 16px 12px 42px; position: relative; margin: .6em 0; }
.nv-callout::before { position: absolute; left: 14px; top: 10px; font-size: 18px; }
.nv-callout-tip { background: #fefce8; border: 1px solid #fde047; }
.nv-callout-tip::before { content: "💡"; }
.nv-callout-warn { background: #fffbeb; border: 1px solid #fcd34d; }
.nv-callout-warn::before { content: "⚠️"; }
.nv-callout p { margin: 0 0 .3em; color: #451a03; }
.nv-callout p:last-child { margin-bottom: 0; }

/* R115 Phase 4: Render-Styles fuer RichText-Bloecke (Editor 2.0).
   Noetig, weil design-system.css einen globalen *{margin:0;padding:0}-Reset
   mitbringt — ohne diese Regeln kollabieren Listen-Einzuege und Absatz-Abstaende. */
.bv-richtext p { margin: 0 0 1em; }
.bv-richtext p:last-child { margin-bottom: 0; }
.bv-richtext h2 { margin: 1.4em 0 .45em; }
.bv-richtext h3 { margin: 1.1em 0 .35em; }
.bv-richtext h4 { margin: 1em 0 .3em; }
.bv-richtext ul, .bv-richtext ol { padding-left: 1.5em; margin: 0 0 1em; }
.bv-richtext ul { list-style: disc; }
.bv-richtext ol { list-style: decimal; }
.bv-richtext li { margin-bottom: .25em; }
.bv-richtext li p { margin: 0; }
.bv-richtext blockquote { border-left: 4px solid var(--brand-primary, #16233D); margin: 0 0 1em; padding: .4em 0 .4em 1em; font-style: italic; }
.bv-richtext code { background: rgba(0,0,0,.06); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.bv-richtext hr { border: none; border-top: 1px solid var(--brand-border, #e5e7eb); margin: 1.6em 0; }