/* ============================================================
   LR Glossar-Styling v3 — Fannys Stil-Hierarchie (GRID-MASTER)
   Alle Content-Boxen folgen dem Grid-Stil:
   - Weisser Hintergrund + 1px Border + 3-4px Akzent-Border
   - Shadow soft + Hover-Lift
   - Blasses schraeges Icon im Hintergrund (BeastWeb-Stil)
   ============================================================ */

:root {
    --lr-green-dark:   #54803a;
    --lr-green-light:  #76b046;
    --lr-green-accent: #83b949;
    --lr-orange:       #d5632f;
    --lr-orange-light: #e5854d;
    --lr-warn:         #c5493c;
    --lr-cream:        #f9f7f2;
    --lr-cream-soft:   #faf7f0;
    --lr-cream-warm:   #fdf5ec;
    --lr-gray-zone:    #f4f3ef;
    --lr-gray-soft:    #efeee9;
    --lr-text:         #333;
    --lr-text-muted:   #6b6b6b;
    --lr-border-soft:  #e5e0d5;
    --lr-shadow-soft:  0 1px 3px rgba(42, 58, 66, 0.05);
    --lr-shadow-mid:   0 4px 16px rgba(42, 58, 66, 0.08);
}

/* BB-Heading-Font-Konsistenz */
.fl-heading-text,
.fl-module-heading h1, .fl-module-heading h2,
.fl-module-heading h3, .fl-module-heading h4 {
    font-family: inherit !important;
    font-weight: 600 !important;
}
.fl-module-heading h2.fl-heading-text {
    font-size: 1.7em;
    line-height: 1.35;
    margin: 1.5em 0 0.75em;
    color: var(--lr-text);
}

/* ============================================================
   ALT-BG — Moving Gradient "Atem-Effekt" pro Box-Primärfarbe
   Default Grün. Boxen mit anderer Primärfarbe überschreiben via
   lokale CSS-Variable --lr-alt-bg-c1/c2.
   ============================================================ */
:root {
    --lr-alt-bg-c1: #f5f9ea;  /* hell */
    --lr-alt-bg-c2: #e4f0ce;  /* dunkler */
    --lr-alt-bg-gradient: linear-gradient(135deg,
        var(--lr-alt-bg-c1) 0%,
        var(--lr-alt-bg-c2) 45%,
        var(--lr-alt-bg-c1) 55%,
        var(--lr-alt-bg-c1) 100%);
}
@keyframes lr-breath {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

/* ============================================================
   MASTER-STIL für alle Content-Boxen (v6 — Moving Gradient blass+langsam)
   ============================================================ */
.lr-infobox,
.lr-tipp,
.lr-achtung,
.lr-hinweis,
.lr-zone,
.lr-beispiel,
.lr-testimonial,
.lr-kern {
    position: relative;
    background: var(--lr-alt-bg-gradient);
    background-size: 250% 250%;
    animation: lr-breath 28s ease-in-out infinite;
    border: 1px solid var(--lr-border-soft);
    border-radius: 4px;
    padding: 1.35em 1.5em;
    margin: 1.75em 0;
    box-shadow: var(--lr-shadow-soft);
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow 0.5s ease,
                transform 0.5s ease,
                border-color 0.5s ease,
                border-left-color 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
    .lr-infobox, .lr-tipp, .lr-achtung, .lr-hinweis,
    .lr-zone, .lr-beispiel, .lr-testimonial, .lr-kern {
        animation: none;
    }
}
.lr-infobox:hover,
.lr-tipp:hover,
.lr-achtung:hover,
.lr-hinweis:hover,
.lr-zone:hover,
.lr-beispiel:hover,
.lr-testimonial:hover,
.lr-kern:hover {
    box-shadow: var(--lr-shadow-mid);
    transform: translateY(-1px);
}

/* Inhalt immer ueber dem Icon */
.lr-infobox > *, .lr-tipp > *, .lr-achtung > *,
.lr-hinweis > *, .lr-zone > *, .lr-beispiel > *,
.lr-testimonial > *, .lr-kern > * {
    position: relative;
    z-index: 1;
}

/* Blasses Background-Icon (einheitlich wie Grid-Cards) */
.lr-box-bg-icon {
    position: absolute;
    bottom: -0.4em;
    right: -0.2em;
    font-size: 6em;
    line-height: 1;
    opacity: 0.08;
    color: var(--lr-green-dark);
    transform: rotate(-12deg);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.25s ease, color 0.25s ease, transform 0.35s ease;
}
.lr-infobox:hover .lr-box-bg-icon,
.lr-tipp:hover .lr-box-bg-icon,
.lr-achtung:hover .lr-box-bg-icon,
.lr-hinweis:hover .lr-box-bg-icon,
.lr-zone:hover .lr-box-bg-icon,
.lr-beispiel:hover .lr-box-bg-icon,
.lr-testimonial:hover .lr-box-bg-icon,
.lr-kern:hover .lr-box-bg-icon {
    opacity: 0.14;
    transform: rotate(-8deg) scale(1.06);
}

/* ============================================================
   Varianten — nur Akzent-Border + Icon-Farbe
   ============================================================ */

/* Infobox (Kurz erklaert) — Orange-Rot-Primärfarbe mit blassem Orange-BG */
.lr-infobox {
    --lr-alt-bg-c1: #fdf1e8;  /* sehr blasses Orange */
    --lr-alt-bg-c2: #f9dcc2;  /* dunkler blasses Orange */
    border-left: 4px solid var(--lr-orange);
}
.lr-infobox:hover { border-color: var(--lr-orange-light); border-left-color: var(--lr-orange); }
.lr-infobox .lr-box-title, .lr-infobox h4 {
    color: var(--lr-orange);
    margin: 0 0 0.5em;
    font-size: 1.1em;
    font-weight: 700;
}
.lr-infobox .lr-box-bg-icon { color: var(--lr-orange); opacity: 0.32; }
.lr-infobox ul { margin: 0.25em 0 0; padding-left: 1.2em; }
.lr-infobox li { margin: 0.3em 0; line-height: 1.55; }
.lr-infobox strong { color: var(--lr-orange); }

/* Tipp — Gruen-hell (default alt-bg) */
.lr-tipp { border-left: 4px solid var(--lr-green-light); font-style: italic; color: #36492c; }
.lr-tipp:hover { border-left-color: var(--lr-green-dark); }
.lr-tipp .lr-box-title {
    font-style: normal; color: var(--lr-green-dark); font-weight: 700;
    display: block; margin-bottom: 0.35em;
}
.lr-tipp .lr-box-bg-icon { color: var(--lr-green-light); opacity: 0.32; }

/* Achtung — Rot-Primärfarbe mit blassem Rosa-BG */
.lr-achtung {
    --lr-alt-bg-c1: #fdecea;
    --lr-alt-bg-c2: #f8cec9;
    border-left: 4px solid var(--lr-warn);
}
.lr-achtung:hover { border-left-color: #a83830; }
.lr-achtung .lr-box-title, .lr-achtung h4 {
    color: var(--lr-warn); margin: 0 0 0.4em; font-weight: 700;
}
.lr-achtung .lr-box-bg-icon { color: var(--lr-warn); opacity: 0.32; }
.lr-achtung strong { color: var(--lr-warn); }

/* Hinweis — Gruen (Info-Variante, weicher als Tipp) */
.lr-hinweis { border-left: 4px solid var(--lr-green-light); padding: 1.15em 1.35em 1.15em 3.2em; }
.lr-hinweis::before {
    content: "i";
    position: absolute;
    left: 1em; top: 1.15em;
    width: 1.5em; height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    background: var(--lr-green-light);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 0.95em;
    z-index: 2;
}
.lr-hinweis:hover { border-left-color: var(--lr-green-dark); }
.lr-hinweis:hover::before { background: var(--lr-green-dark); }
.lr-hinweis .lr-box-title {
    display: block; font-weight: 700;
    color: var(--lr-green-dark); margin-bottom: 0.35em;
}
.lr-hinweis .lr-box-bg-icon { color: var(--lr-green-light); opacity: 0.32; }

/* Zone — Gruen-dunkel (Wissenschafts-Vertiefung, default alt-bg) */
.lr-zone {
    border-left: 4px solid var(--lr-green-dark);
    padding: 1.5em 1.75em;
}
.lr-zone:hover { border-left-color: var(--lr-green-light); }
.lr-zone h3, .lr-zone h4 { color: var(--lr-green-dark); margin-top: 0; }
.lr-zone strong:first-child, .lr-zone > p:first-child strong {
    color: var(--lr-green-dark); font-size: 1.05em;
}
.lr-zone > *:last-child { margin-bottom: 0; }
.lr-zone .lr-box-bg-icon { color: var(--lr-green-dark); opacity: 0.32; }

/* Beispiel — Orange-Primärfarbe mit blassem Orange-BG */
.lr-beispiel {
    --lr-alt-bg-c1: #fdf1e8;
    --lr-alt-bg-c2: #f9dcc2;
    border-left: 4px solid var(--lr-orange);
    border-top: 3px solid var(--lr-orange);
    padding: 1.5em 1.75em;
}
.lr-beispiel:hover { border-top-color: var(--lr-orange-light); }
.lr-beispiel .lr-box-title {
    color: var(--lr-orange); font-weight: 700;
    margin: 0 0 0.75em; font-size: 1.1em;
}
.lr-beispiel strong:first-child { color: var(--lr-orange); }
.lr-beispiel .lr-box-bg-icon { color: var(--lr-orange); opacity: 0.32; }

/* Testimonial — Gruen-Akzent (default alt-bg) */
.lr-testimonial {
    border-left: 4px solid var(--lr-green-accent);
    font-style: italic;
    color: #4a5548;
}
.lr-testimonial:hover { border-left-color: var(--lr-green-dark); }
.lr-testimonial::before {
    content: "\201E";
    font-size: 3em;
    line-height: 0.2;
    color: var(--lr-green-accent);
    vertical-align: -0.2em;
    margin-right: 0.15em;
    z-index: 2; position: relative;
}
.lr-testimonial .lr-box-bg-icon { color: var(--lr-green-accent); opacity: 0.32; }

/* Kern — Quintessenz (Gruen-dunkel Border-Top, default alt-bg) */
.lr-kern {
    border-top: 3px solid var(--lr-green-dark);
    font-size: 1.05em;
    font-weight: 500;
}
.lr-kern:hover { border-top-color: var(--lr-green-light); }
.lr-kern .lr-box-bg-icon { color: var(--lr-green-dark); opacity: 0.32; }

/* ============================================================
   CTA Button (BB) — Fanny-Gruen — BB rendert Buttons ohne inline-BG fuer
   Besucher (Editor-Mode hat die Farben direkt, Live setzt sie über Stylesheet).
   Deshalb hier hard-override.
   ============================================================ */
a.fl-button,
.fl-module-button a.fl-button {
    background: var(--lr-green-dark) !important;
    background-color: var(--lr-green-dark) !important;
    color: #fff !important;
    border-color: var(--lr-green-dark) !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    transition: background 0.5s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
a.fl-button:hover,
.fl-module-button a.fl-button:hover {
    background: var(--lr-green-light) !important;
    background-color: var(--lr-green-light) !important;
    border-color: var(--lr-green-light) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: var(--lr-shadow-mid);
}
a.fl-button i, a.fl-button .fl-button-text {
    color: #fff !important;
}

/* ============================================================
   Scroll-Offset für alle Heading-IDs (Fußnoten + DotNav jumpen
   sonst unter den Sticky-Header).
   ============================================================ */
html {
    scroll-padding-top: 96px;
}
[id^="fn-"], [id^="h-"], h2[id], h3[id] {
    scroll-margin-top: 96px;
}

/* ============================================================
   Abschluss-Formel — in Handschrift, wie das Ende eines persönlichen Briefs
   ============================================================ */
.lr-signature {
    text-align: right;
    font-family: 'Kaushan Script', 'Brush Script MT', cursive, handwriting;
    font-size: 1.7em;
    line-height: 1.2;
    color: var(--lr-green-dark);
    margin: 2em 0 2em auto;
    padding: 0.5em 2em 0.25em 0;
    max-width: 480px;
    transform: rotate(-1.5deg);
    font-weight: 400;
}
.lr-signature em { font-style: normal; }

/* ============================================================
   Author-Box (Grid-Stil)
   ============================================================ */
.lr-author-box {
    position: relative;
    background: var(--lr-alt-bg-gradient);
    background-size: 250% 250%;
    animation: lr-breath 28s ease-in-out infinite;
    display: flex;
    align-items: center;
    gap: 1.5em;
    margin: 1em 0 2.5em;
    padding: 1.5em 1.75em;
    border: 1px solid var(--lr-border-soft);
    border-top: 3px solid var(--lr-green-dark);
    border-radius: 4px;
    box-shadow: var(--lr-shadow-soft);
    transition: box-shadow 0.5s ease, transform 0.5s ease, border-top-color 0.5s ease;
}
.lr-author-box:hover {
    box-shadow: var(--lr-shadow-mid);
    transform: translateY(-1px);
    border-top-color: var(--lr-green-light);
}
.lr-author-box img {
    width: 104px; height: 104px;
    border-radius: 50%;
    box-shadow: 0 3px 14px rgba(0,0,0,0.14);
    border: 3px solid #fff;
    flex-shrink: 0;
    object-fit: cover;
}
.lr-author-box__body { flex: 1; }
.lr-author-box__name {
    margin: 0 0 0.3em;
    font-size: 1.2em;
    color: var(--lr-green-dark);
    font-weight: 700;
}
.lr-author-box__bio {
    margin: 0 0 0.6em;
    color: var(--lr-text);
    line-height: 1.55;
}
.lr-author-box__link {
    display: inline-block;
    color: var(--lr-green-dark);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 0;
}
.lr-author-box__link:hover { color: var(--lr-green-light); }
@media (max-width: 600px) {
    .lr-author-box { flex-direction: column; text-align: center; padding: 1.5em 1em; }
}

/* ============================================================
   Quellen — Grid-Stil (weiss, Border-Akzent) statt grauer Zone
   ============================================================ */
ol.lr-quellen {
    background: #fff;
    border: 1px solid var(--lr-border-soft);
    border-left: 4px solid var(--lr-green-dark);
    border-radius: 4px;
    padding: 1.5em 1.75em 1.5em 3em;
    font-size: 0.92em;
    color: var(--lr-text-muted);
    margin: 1em 0 2em;
    box-shadow: var(--lr-shadow-soft);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
ol.lr-quellen:hover {
    box-shadow: var(--lr-shadow-mid);
    transform: translateY(-1px);
}
ol.lr-quellen li { margin-bottom: 0.7em; line-height: 1.55; }
ol.lr-quellen p { margin: 0; display: inline; }
ol.lr-quellen a {
    color: var(--lr-green-dark);
    border-bottom: 0;
    text-decoration: none;
}
ol.lr-quellen a:hover {
    color: var(--lr-green-light);
}

/* ============================================================
   Aehnliche Themen Grid
   ============================================================ */
/* Grid: Column-Group mit Cards wird zum eigenen CSS-Grid (3 Spalten fix, bricht als Grid um) */
.fl-col-group:has(.lr-backlink-card) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1em !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
}
.fl-col-group:has(.lr-backlink-card) > .fl-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
}
.fl-col-group:has(.lr-backlink-card) .fl-col-content,
.fl-col-group:has(.lr-backlink-card) .fl-module,
.fl-col-group:has(.lr-backlink-card) .fl-module-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.lr-backlink-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Fixe Kartengroesse: 100% Breite der Grid-Zelle, feste Hoehe */
    width: 100%;
    height: 220px;
    padding: 1.35em 1.35em 1.2em;
    background: #fff;
    border: 1px solid var(--lr-border-soft);
    border-top: 3px solid var(--lr-green-light);
    border-radius: 4px;
    box-shadow: var(--lr-shadow-soft);
    transition: box-shadow 0.5s ease,
                transform 0.5s ease,
                border-top-color 0.5s ease;
    margin: 0;
    overflow: hidden;
    isolation: isolate;
}
@media (max-width: 768px) {
    .fl-col-group:has(.lr-backlink-card) {
        grid-template-columns: 1fr !important;
    }
}
/* Hover-Fade via Pseudo-Element (opacity-Transition funktioniert, background-transition nicht) */
.lr-backlink-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--lr-alt-bg-gradient);
    background-size: 250% 250%;
    animation: lr-breath 28s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
.lr-backlink-card:hover::before {
    opacity: 1;
}
.lr-backlink-card:hover {
    box-shadow: var(--lr-shadow-mid);
    transform: translateY(-2px);
    border-top-color: var(--lr-orange);
}
.lr-backlink-card > * { position: relative; z-index: 1; }
.lr-backlink-card .lr-card-icon {
    position: absolute;
    bottom: -0.4em; right: -0.2em;
    font-size: 6.5em; line-height: 1;
    opacity: 0.1;
    color: var(--lr-green-dark);
    transform: rotate(-12deg);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease, color 0.5s ease, transform 0.5s ease;
}
.lr-backlink-card:hover .lr-card-icon {
    opacity: 0.18;
    color: var(--lr-orange);
    transform: rotate(-8deg) scale(1.05);
}
.lr-backlink-card[data-silo="1"] .lr-card-icon,
.lr-backlink-card[data-silo="3"] .lr-card-icon { color: var(--lr-green-light); }
.lr-backlink-card[data-silo="2"] .lr-card-icon,
.lr-backlink-card[data-silo="4"] .lr-card-icon { color: var(--lr-green-dark); }
.lr-backlink-card[data-silo="5"] .lr-card-icon { color: var(--lr-orange); opacity: 0.09; }
.lr-backlink-thumb {
    display: block; width: calc(100% + 2.7em); height: 120px;
    object-fit: cover; margin: -1.35em -1.35em 1em;
    position: relative; z-index: 1;
}
.lr-backlink-type {
    display: inline-block;
    font-size: 0.7em; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--lr-orange);
    margin-bottom: 0.75em; font-weight: 700;
}
/* Grid-Card-Titel: Default-Font (kein Kaushan), als Link-Stil */
.lr-backlink-title {
    margin: 0 0 0.5em; font-size: 1.1em; line-height: 1.35;
    font-weight: 600;
    font-family: Arial, Helvetica, Verdana, sans-serif !important;
}
.lr-backlink-title a {
    color: var(--lr-green-dark);
    text-decoration: underline;
    text-decoration-color: rgba(84, 128, 58, 0.35);
    text-underline-offset: 3px;
    border: 0;
    transition: color 0.5s ease, text-decoration-color 0.5s ease;
}
.lr-backlink-card:hover .lr-backlink-title a {
    color: var(--lr-orange);
    text-decoration-color: var(--lr-orange);
}
/* Kuratierter Beschreibungs-Satz auf der Card */
.lr-backlink-desc {
    margin: 0; font-size: 0.92em; line-height: 1.5;
    color: var(--lr-text-muted);
    flex: 1;
}

/* ============================================================
   Footnote-Refs
   ============================================================ */
.lr-fn-ref a {
    color: var(--lr-orange);
    text-decoration: none;
    border: 0;
    font-weight: 600;
    font-size: 0.85em;
    padding: 0 0.15em;
}
.lr-fn-ref a:hover { color: var(--lr-orange-light); }

/* ============================================================
   UABB FAQ (v5) — Grid-Stil + Full-Width + Default-Font + Hover-Fade 0.5s + alt-bg on open
   ============================================================ */
/* Full-Width: den FAQ-Container aus BB-Row-Constraints befreien */
.fl-module-uabb-faq .fl-module-content,
.uabb-faq-module {
    max-width: 100% !important;
    width: 100% !important;
}
/* Font-Reset: FAQ nutzt Default-Font, NICHT Kaushan Script */
.uabb-faq-module,
.uabb-faq-module h1, .uabb-faq-module h2, .uabb-faq-module h3,
.uabb-faq-module h4, .uabb-faq-module h5, .uabb-faq-module h6,
.uabb-faq-module .uabb-faq-question-label,
.uabb-faq-module .uabb-faq-content,
.uabb-faq-module .uabb-faq-title {
    font-family: Arial, Helvetica, Verdana, sans-serif !important;
}

/* Accordion-Titel (Frage) — weisser BG mit Pseudo-Element-Fade-Overlay */
.uabb-faq-module.uabb-faq-collapse .uabb-faq-questions {
    position: relative !important;
    background: #fff !important;
    border: 1px solid var(--lr-border-soft) !important;
    border-left: 3px solid var(--lr-green-light) !important;
    border-radius: 4px !important;
    margin-bottom: 0.6em !important;
    padding: 0.9em 1.25em !important;
    box-shadow: var(--lr-shadow-soft) !important;
    overflow: hidden !important;
    transition: border-left-color 0.5s ease,
                box-shadow 0.5s ease,
                transform 0.5s ease !important;
}
/* Fade-in-Overlay via Pseudo-Element */
.uabb-faq-module.uabb-faq-collapse .uabb-faq-questions::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--lr-alt-bg-gradient);
    background-size: 250% 250%;
    animation: lr-breath 28s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
/* Inhalt ueber Overlay */
.uabb-faq-module .uabb-faq-questions > * {
    position: relative;
    z-index: 1;
}
.uabb-faq-module .uabb-faq-questions:hover::before,
.uabb-faq-module .uabb-faq-item-active .uabb-faq-questions::before {
    opacity: 1;
}
.uabb-faq-module .uabb-faq-questions:hover,
.uabb-faq-module .uabb-faq-item-active .uabb-faq-questions {
    border-left-color: var(--lr-orange) !important;
    box-shadow: var(--lr-shadow-mid) !important;
}
.uabb-faq-module .uabb-faq-questions:hover {
    transform: translateY(-1px) !important;
}
.uabb-faq-question-label {
    color: var(--lr-text) !important;
    font-weight: 600 !important;
    font-family: Arial, Helvetica, Verdana, sans-serif !important;
}
.uabb-faq-button-icon {
    color: var(--lr-green-dark) !important;
    transition: color 0.5s ease !important;
}
.uabb-faq-module .uabb-faq-questions:hover .uabb-faq-button-icon,
.uabb-faq-module .uabb-faq-item-active .uabb-faq-button-icon {
    color: var(--lr-orange) !important;
}
/* Content-Block (Antwort) — alt-bg fest (geoeffnet = aktiv) */
.uabb-faq-content {
    padding: 1em 1.25em 1.1em !important;
    color: var(--lr-text) !important;
    line-height: 1.65 !important;
    background: var(--lr-alt-bg-gradient) !important;
    background-size: 250% 250% !important;
    animation: lr-breath 28s ease-in-out infinite !important;
    border: 1px solid var(--lr-border-soft) !important;
    border-top: 0 !important;
    border-left: 3px solid var(--lr-orange) !important;
    border-radius: 0 0 4px 4px !important;
    margin-top: -0.6em !important;
    margin-bottom: 0.6em !important;
    font-family: Arial, Helvetica, Verdana, sans-serif !important;
}

/* ============================================================
   Mermaid
   ============================================================ */
.mermaid, .wp-block-merpress-mermaidjs {
    text-align: center;
    margin: 1.75em 0;
    padding: 1.5em;
    background: #fff;
    border: 1px solid var(--lr-border-soft);
    border-top: 3px solid var(--lr-green-dark);
    border-radius: 4px;
    box-shadow: var(--lr-shadow-soft);
}

/* ============================================================
   Extras — Synonyme, Nummerierung, Check/Cross
   ============================================================ */
.lr-synonyme {
    font-size: 0.88em;
    color: var(--lr-text-muted);
    margin: -0.5em 0 1.5em;
    font-style: italic;
    line-height: 1.5;
}
.lr-synonyme::before {
    content: "Auch bekannt als: ";
    font-weight: 600;
    color: var(--lr-green-dark);
    font-style: normal;
}

ol.lr-numbered {
    list-style: none;
    counter-reset: lr-num;
    padding-left: 0;
    margin: 1.25em 0;
}
ol.lr-numbered > li {
    counter-increment: lr-num;
    position: relative;
    padding-left: 2.6em;
    margin-bottom: 0.9em;
    line-height: 1.55;
}
ol.lr-numbered > li::before {
    content: counter(lr-num);
    position: absolute;
    left: 0; top: 0.05em;
    width: 1.9em; height: 1.9em;
    line-height: 1.9em;
    text-align: center;
    background: var(--lr-green-dark);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.92em;
}
ol.lr-numbered > li strong:first-child {
    display: block;
    color: var(--lr-green-dark);
    margin-bottom: 0.2em;
}

ul.lr-check, ul.lr-cross {
    list-style: none;
    padding-left: 0;
    margin: 1em 0;
}
ul.lr-check > li, ul.lr-cross > li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.55em;
    line-height: 1.55;
}
ul.lr-check > li::before {
    content: "\2713";
    position: absolute; left: 0; top: 0;
    color: var(--lr-green-light);
    font-weight: 700;
    font-size: 1.2em;
}
ul.lr-cross > li::before {
    content: "\2715";
    position: absolute; left: 0; top: 0;
    color: var(--lr-warn);
    font-weight: 700;
    font-size: 1.1em;
}

/* ============================================================
   Contrast-Pair
   ============================================================ */
.lr-contrast {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin: 1.75em 0;
}
.lr-contrast__positive, .lr-contrast__negative {
    position: relative;
    background: #fff;
    border: 1px solid var(--lr-border-soft);
    padding: 1.25em 1.35em;
    border-radius: 4px;
    border-top: 3px solid;
    box-shadow: var(--lr-shadow-soft);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.lr-contrast__positive:hover, .lr-contrast__negative:hover {
    box-shadow: var(--lr-shadow-mid);
    transform: translateY(-1px);
}
.lr-contrast__positive { border-top-color: var(--lr-green-light); }
.lr-contrast__positive h4 { color: var(--lr-green-dark); margin: 0 0 0.5em; }
.lr-contrast__negative { border-top-color: var(--lr-warn); }
.lr-contrast__negative h4 { color: var(--lr-warn); margin: 0 0 0.5em; }
@media (max-width: 600px) {
    .lr-contrast { grid-template-columns: 1fr; }
}

/* ============================================================
   DotNav mit Hover-Panel (portiert aus BeastWeb, erweitert um Panel-Expand)
   ============================================================ */
:root {
    --lr-dotnav-opacity-default: 0.4;
}
.lr-dotnav {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: auto;
}
/* Unsichtbarer Hover-Bereich, 50px nach allen Seiten um die Dots */
.lr-dotnav::before {
    content: '';
    position: absolute;
    top: -50px;
    bottom: -50px;
    right: 0;
    left: -50px;
    z-index: -1;
    /* kein visuelles Feedback, nur Hitbox */
}
/* Dot-Spalte: immer sichtbar */
.lr-dotnav-dots {
    display: flex;
    flex-direction: column;
    gap: 0.85em;
    padding: 0.5em 1em 0.5em 0.5em;
    opacity: var(--lr-dotnav-opacity-default);
    transition: opacity 0.25s ease;
}
.lr-dotnav:hover .lr-dotnav-dots {
    opacity: 1;
}
/* Dot-Button */
.lr-dotnav-dot-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
    border: 0;
    background: transparent;
}
.lr-dotnav-dot {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lr-border-soft);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.lr-dotnav-dot-btn:hover .lr-dotnav-dot,
.lr-dotnav-dot-btn.is-active .lr-dotnav-dot {
    background: var(--lr-green-dark);
    transform: scale(1.35);
}
.lr-dotnav-dot-btn.is-active .lr-dotnav-dot {
    box-shadow: 0 0 0 3px rgba(84, 128, 58, 0.15);
}

/* Panel — versteckt, expandiert bei Hover ueber die gesamte nav */
.lr-dotnav-panel {
    order: -1;  /* links der Dots */
    background: #fff;
    border: 1px solid var(--lr-border-soft);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    box-shadow: -4px 0 16px rgba(42, 58, 66, 0.08);
    padding: 1em 1.25em;
    min-width: 260px;
    max-width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    opacity: 0;
    transform: translateX(30px);
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lr-dotnav:hover .lr-dotnav-panel,
.lr-dotnav:focus-within .lr-dotnav-panel {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.lr-dotnav-panel-head {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--lr-text-muted);
    font-weight: 700;
    padding-bottom: 0.6em;
    margin-bottom: 0.6em;
    border-bottom: 1px solid var(--lr-border-soft);
}
.lr-dotnav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: lr-toc-num;
}
.lr-dotnav-list li {
    counter-increment: lr-toc-num;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}
.lr-dotnav-list a {
    display: block;
    position: relative;
    padding: 0.45em 0.5em 0.45em 2em;
    color: var(--lr-text);
    text-decoration: none;
    border: 0;
    font-size: 0.95em;
    border-left: 2px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lr-dotnav-list a::before {
    content: counter(lr-toc-num, decimal-leading-zero);
    position: absolute;
    left: 0.5em;
    top: 0.45em;
    font-size: 0.72em;
    color: var(--lr-text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.lr-dotnav-list a:hover {
    background: linear-gradient(90deg, rgba(84,128,58,0.08) 0%, transparent 100%);
    color: var(--lr-green-dark);
    border-left-color: var(--lr-green-light);
}
.lr-dotnav-list a.is-active {
    background: linear-gradient(90deg, rgba(84,128,58,0.10) 0%, transparent 100%);
    color: var(--lr-green-dark);
    border-left-color: var(--lr-green-dark);
    font-weight: 600;
}
.lr-dotnav-list a.is-active::before {
    color: var(--lr-green-dark);
}

@media (max-width: 900px) {
    .lr-dotnav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lr-dotnav-panel, .lr-dotnav-dot, .lr-dotnav-list a {
        transition: none;
    }
}