/* ============================================================================
   mh-style.css — Marfan Hilfe Deutschland
   Zentrales Stylesheet des Relaunch

   Einbau: Astroid → Template Options → Custom Code → Custom CSS
   Muss NACH den compiled-*.css des Templates geladen werden.

   INHALT
   ------
    0  Farbpalette (:root)
    A  Typografie — globale Schriftskala (Überschriften, Fließtext, Banner)
    A2 Fokus (Basis)
    A3 Grundlagen (Anker, Bilder, Links im Text)
    B  Grundgerüst — Artikelbreiten, Kopfbereich, Bilder
    C  Megamenü
    C2 Footer
    D  Blockquote / Zitatkasten
    D2 Buttons
    E  Lexikon
    F  FAQ-Akkordeon
    G  Hinweisboxen und Key-Facts
    H  Akkordeon (allgemein)
    I  Tabellen
    J  Bildgalerie
    K  Quellenangabe
    L  Personenkachel
    M  Einstiegskachel Startseite
    N  Regionalgruppen-Kachel
    O  Testimonial (Astroid-Element)
    P  Meta-Zeile der Beitrags-Karten
    Q  Terminkacheln der Startseite

   KONVENTIONEN
   ------------
   Selektor-Präfix .astroid-framework nur dort, wo Astroid-Werte überschrieben
   werden müssen (Typografie). Komponenten nutzen eigene mh-*-Klassen.
   Jede neue Klasse gehört in NEUE-CSS-KLASSEN.md und in die JCE-Konfiguration.
   Markup flach halten: Layout über Klassen, nicht über verschachtelte divs.
   ============================================================================ */


/* ============================================================================
   0 — FARBPALETTE

   Alle Marken- und Flächenfarben an einer Stelle. Eine Änderung hier wirkt
   sofort im gesamten Stylesheet.

   Browser-Unterstützung: CSS Custom Properties sind seit 2016/2017 in allen
   Browsern verfügbar, ein Fallback ist nicht nötig. Bootstrap 5.3, auf dem
   dieses Template aufbaut, funktioniert selbst nur damit.

   Die *-rgb-Variablen enthalten nur die Zahlen, damit sie in rgba() für
   Schatten und Transparenzen wiederverwendbar sind. Die Hauptfarbe leitet
   sich daraus ab, die Zahlen stehen also trotzdem nur an einer Stelle.

   Nicht variabilisiert: Einzelfarben, die genau einmal vorkommen, sowie
   #ffffff und #000000. Eine Variable für Weiß erklärt nichts.
   ============================================================================ */

:root {

    /* Marke */
    --mh-blau-rgb: 0, 68, 118;
    --mh-blau: rgb(var(--mh-blau-rgb));
    --mh-blau-tief: #00355d;
    --mh-magenta-rgb: 177, 0, 60;
    --mh-magenta: rgb(var(--mh-magenta-rgb));
    --mh-magenta-tief: #8d0130;
    --mh-gold-rgb: 255, 200, 102;
    --mh-gold: rgb(var(--mh-gold-rgb));

    /* Flächen */
    --mh-flaeche-blau: #eaf5fd;
    --mh-flaeche-creme: #fff5e0;
    --mh-flaeche-grau: #f3f3f3;

    /* Text */
    --mh-text: #333333;
    --mh-text-leise: #515a64;

    /* Rahmen */
    --mh-rahmen-grau: #e6e9ec;
    --mh-rahmen-blau: #dbe6ef;

    /* Textvarianten der Markenfarben für AAA (7:1 bei normalem Text).
       Die Flächenfarben oben bleiben unverändert — Buttons, Balken und
       Ortsmarken behalten den Markenton, nur Text wird abgedunkelt.
         magenta-text       7.77:1 auf Weiß, 7.00:1 auf grauen Flächen
         magenta-text-tief  7.01:1 auf Rosa
         gold-text          7.00:1 auf Creme */
    --mh-magenta-text: #a70039;
    --mh-magenta-text-tief: #85012d;
    --mh-gold-text: #6d4f00;

    /* Höhe des Sticky-Headers. Wird für Ankersprünge gebraucht — einmal im
       Browser nachmessen und hier eintragen. */
    --mh-sticky-hoehe: 70.6px;

    /* Fokus — Ringfarbe und innerer Trennring. Alle Fokusregeln der Datei
       greifen darauf zu, die Farbe steht nur hier. */
    --mh-fokus: #b1003c;
    --mh-fokus-innen: #ffffff;

    /* Weitere Flächen */
    --mh-sand: #fae2a3;
    --mh-rosa: #efccd8;
}


/* ============================================================================
   A — TYPOGRAFIE

   SPEZIFITÄT
   ----------
   Astroid erzeugt seine Typografie als .astroid-framework h2 (0-1-1) und lädt
   die compiled-*.css NACH dieser Datei. Bei gleicher Spezifität gewinnt dann
   die zuletzt geladene Regel — also Astroid.

   Deshalb steht die Klasse hier doppelt: .astroid-framework.astroid-framework
   ergibt 0-2-1 und gewinnt unabhängig von der Ladereihenfolge. Gültiges CSS,
   keine !important nötig, und es funktioniert egal ob die Klasse am body oder
   an einem Wrapper hängt.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 — Fließtext
   ---------------------------------------------------------------------------- */

.astroid-framework.astroid-framework body,
body.astroid-framework,
.astroid-framework.astroid-framework {
    font-size: 1.125rem;   /* 18px */
    line-height: 1.65;
}

.astroid-framework.astroid-framework p {
    margin-block: 0 0.7em;
    letter-spacing: normal;
}

.astroid-framework.astroid-framework p:last-child {
    margin-block-end: 0;
}

/* Listen im Fließtext etwas luftiger */
.astroid-framework.astroid-framework .com-content-article ul,
.astroid-framework.astroid-framework .com-content-article ol {
    margin-block: 0 1.15em;
    padding-inline-start: 1.4em;
}

.astroid-framework.astroid-framework .com-content-article li {
    margin-block-end: .4em;
}

.astroid-framework.astroid-framework .com-content-article li:last-child {
    margin-block-end: 0;
}


/* ----------------------------------------------------------------------------
   2 — Gemeinsame Basis aller Überschriften
        letter-spacing und line-height werden hier explizit gesetzt, damit
        fehlerhafte Astroid-Werte nicht durchschlagen.
   ---------------------------------------------------------------------------- */

.astroid-framework.astroid-framework h1, .astroid-framework.astroid-framework .h1,
.astroid-framework.astroid-framework h2, .astroid-framework.astroid-framework .h2,
.astroid-framework.astroid-framework h3, .astroid-framework.astroid-framework .h3,
.astroid-framework.astroid-framework h4, .astroid-framework.astroid-framework .h4,
.astroid-framework.astroid-framework h5, .astroid-framework.astroid-framework .h5,
.astroid-framework.astroid-framework h6, .astroid-framework.astroid-framework .h6 {
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    text-wrap: balance;          /* verhindert Schusterjungen in Überschriften */
    overflow-wrap: break-word;   /* lange Fachbegriffe brechen statt zu überlaufen */
}

/* Erste Überschrift in einem Container bekommt keinen Abstand nach oben */
.astroid-framework.astroid-framework h1:first-child, .astroid-framework.astroid-framework .h1:first-child,
.astroid-framework.astroid-framework h2:first-child, .astroid-framework.astroid-framework .h2:first-child,
.astroid-framework.astroid-framework h3:first-child, .astroid-framework.astroid-framework .h3:first-child,
.astroid-framework.astroid-framework h4:first-child, .astroid-framework.astroid-framework .h4:first-child,
.astroid-framework.astroid-framework h5:first-child, .astroid-framework.astroid-framework .h5:first-child,
.astroid-framework.astroid-framework h6:first-child, .astroid-framework.astroid-framework .h6:first-child {
    margin-block-start: 0;
}


/* ----------------------------------------------------------------------------
   3 — Die Skala
        mobil (375px)  →  Desktop (1240px)
   ---------------------------------------------------------------------------- */

/* h1 — 34px → 52px */
.astroid-framework.astroid-framework h1,
.astroid-framework.astroid-framework .h1 {
    font-size: clamp(2.125rem, 1.6375rem + 2.08vw, 3.25rem);
    line-height: 1.15;
    letter-spacing: -.01em;
    margin-block: 0 .55em;
}

/* h2 — 28px → 40px */
.astroid-framework.astroid-framework h2,
.astroid-framework.astroid-framework .h2 {
    font-size: clamp(1.75rem, 1.425rem + 1.39vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -.005em;
    margin-block: 0.9em .5em;
}

/* h3 — 22px → 28px */
.astroid-framework.astroid-framework h3,
.astroid-framework.astroid-framework .h3 {
    font-size: clamp(1.375rem, 1.2125rem + .69vw, 1.75rem);
    line-height: 1.3;
    margin-block: 0.8em .45em;
}

/* h4 — 19px → 22px */
.astroid-framework.astroid-framework h4,
.astroid-framework.astroid-framework .h4 {
    font-size: clamp(1.1875rem, 1.106rem + .35vw, 1.375rem);
    line-height: 1.4;
    margin-block: 0.8em .4em;
}

/* h5 — 18px */
.astroid-framework.astroid-framework h5,
.astroid-framework.astroid-framework .h5 {
    font-size: 1.125rem;
    line-height: 1.4;
    margin-block: 0.7em .4em;
}

/* h6 — 16px */
.astroid-framework.astroid-framework h6,
.astroid-framework.astroid-framework .h6 {
    font-size: 1rem;
    line-height: 1.45;
    margin-block: 0.7em .4em;
}


/* ----------------------------------------------------------------------------
   4 — Banner-Titel
        Eigene Skala, weil Banner-Überschriften bewusst größer wirken sollen
        als eine h2 im Fließtext. 36px → 60px.
   ---------------------------------------------------------------------------- */

.astroid-framework.astroid-framework .astroid-banner-title {
    font-size: clamp(2.25rem, 1.6rem + 2.78vw, 3.75rem);
    line-height: 1.12;
    letter-spacing: -.015em;
    margin-block: 0 .35em;
}

.astroid-framework.astroid-framework .astroid-banner-subtitle {
    font-size: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
    line-height: 1.5;
    letter-spacing: normal;
    display: block;
}


/* ----------------------------------------------------------------------------
   5 — Sehr schmale Displays
        Unterhalb von 375px greift der clamp-Minimalwert. Dort etwas mehr
        Reserve für Umbrüche.
   ---------------------------------------------------------------------------- */

@media (max-width: 374px) {

    .astroid-framework.astroid-framework h1,
    .astroid-framework.astroid-framework .h1,
    .astroid-framework.astroid-framework .astroid-banner-title {
        hyphens: auto;
    }
}


/* ----------------------------------------------------------------------------
   6 — Druck
   ---------------------------------------------------------------------------- */

@media print {

    .astroid-framework.astroid-framework {
        font-size: 11pt;
        line-height: 1.5;
    }

    .astroid-framework.astroid-framework h1, .astroid-framework.astroid-framework .h1 { font-size: 20pt; }
    .astroid-framework.astroid-framework h2, .astroid-framework.astroid-framework .h2 { font-size: 16pt; }
    .astroid-framework.astroid-framework h3, .astroid-framework.astroid-framework .h3 { font-size: 13pt; }
    .astroid-framework.astroid-framework h4, .astroid-framework.astroid-framework .h4 { font-size: 12pt; }

    .astroid-framework.astroid-framework h1, .astroid-framework.astroid-framework h2,
    .astroid-framework.astroid-framework h3, .astroid-framework.astroid-framework h4 {
        break-after: avoid;
    }
}


/* ============================================================================
   A2 — FOKUS (Basis)

   Sichtbarer Tastaturfokus für alles Fokussierbare. Vorher hatten nur einzelne
   Komponenten eine Regel — gewöhnliche Links im Fließtext, die A–Z-Leiste im
   Lexikon und Links in FAQ- und Akkordeon-Inhalten hatten gar keine und
   blieben beim Browser-Standardring.

   Die Farbe steckt in --mh-fokus und steht nur an einer Stelle.

   Geprüft (WCAG 1.4.11, 3:1 gefordert):
     Magenta #b1003c auf Weiß        7.16:1
     Magenta #b1003c auf Hellblau    6.47:1
     Gold    #ffc866 auf dunkel      9.83:1

   Dieser Abschnitt steht bewusst weit oben. Komponenten mit eigener
   Fokusregel stehen später in der Datei und gewinnen damit.
   ============================================================================ */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--mh-fokus);
    outline-offset: 2px;
}

/* Windows-Kontrastmodus: Systemfarbe, sonst überschreibt das System den Ring. */

@media (forced-colors: active) {

    a:focus-visible,
    button:focus-visible,
    summary:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid Highlight;
    }
}


/* ============================================================================
   A3 — GRUNDLAGEN

   Kein Reset. Bootstrap Reboot ist über das Template bereits aktiv und setzt
   box-sizing, Überschriften- und Listenabstände sowie Formularelemente. Ein
   zweiter Reset würde dagegen arbeiten.

   Hier steht nur, was Reboot bewusst nicht macht und was auf dieser Seite
   fehlt.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 — Ankersprünge
   Ohne scroll-margin landet jedes Sprungziel unter dem Sticky-Header und die
   Überschrift ist verdeckt. Betrifft die A–Z-Leiste im Lexikon, FAQ-Links und
   den Weiterlesen-Anker.
   ---------------------------------------------------------------------------- */

[id] {
    scroll-margin-top: calc(var(--mh-sticky-hoehe) + 1rem);
}

/* Nach einem Ankersprung kurz zeigen, wo man gelandet ist. */

.com-content-article :target {
    background: var(--mh-flaeche-creme);
    box-shadow: 0 0 0 .4rem var(--mh-flaeche-creme);
    border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {

    :root {
        scroll-behavior: smooth;
    }
}

/* ----------------------------------------------------------------------------
   2 — Bilder
   Reboot begrenzt die Breite nicht, das leistet nur .img-fluid. Sobald die
   Redaktion die Klasse im JCE vergisst, läuft das Bild aus der Spalte.
   ---------------------------------------------------------------------------- */

.com-content-article img,
.inside-article-wrapper img {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------------------------------
   3 — Lange Fachbegriffe
   „Bindegewebserkrankung" und Ähnliches soll umbrechen statt überzulaufen.
   ---------------------------------------------------------------------------- */

.com-content-article p,
.com-content-article li,
.com-content-article dd,
.com-content-article td {
    overflow-wrap: break-word;
}

/* ----------------------------------------------------------------------------
   4 — Links im Fließtext

   Unterstrichen, nicht nur farbig. WCAG 1.4.1 verlangt, dass Information nicht
   allein über Farbe transportiert wird — ein blauer Link ohne Unterstreichung
   ist für Menschen mit Farbsehschwäche im Fließtext nicht als Link erkennbar.

   Greift nur auf Links ohne Klasse. Buttons und Kacheln tragen immer eine
   Klasse und bleiben deshalb unberührt.
   ---------------------------------------------------------------------------- */

.com-content-article a:not([class]),
.inside-article-wrapper a:not([class]),
.mh-faq-antwort a:not([class]),
.mh-faq-notfall a:not([class]),
.mh-faq-hinweis a:not([class]),
.mh-ak-inhalt a:not([class]),
.mh-lex-def a:not([class]),
.mh-hinweis a:not([class]),
.mh-quelle a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

.com-content-article a:not([class]):hover,
.inside-article-wrapper a:not([class]):hover,
.mh-faq-antwort a:not([class]):hover,
.mh-faq-notfall a:not([class]):hover,
.mh-faq-hinweis a:not([class]):hover,
.mh-ak-inhalt a:not([class]):hover,
.mh-lex-def a:not([class]):hover,
.mh-hinweis a:not([class]):hover,
.mh-quelle a:not([class]):hover {
    text-decoration-thickness: .14em;
}


/* ============================================================================
   B — GRUNDGERÜST
   Artikelbreiten, Kopfbereich, Randabstände, Bilder
   ============================================================================ */

.com-content-article .astroid-section.inside-wrapper>.astroid-row,
.com-content-article .astroid-section.inside-article-wrapper>.astroid-row {
    width: 100%;
    margin-inline: auto;
}

.com-content-article .astroid-section.inside-wrapper>.astroid-row {
    max-width: 1240px;
}

.com-content-article .astroid-section.inside-article-wrapper>.astroid-row {
    max-width: 820px;
}

.com-content-article .astroid-section.inside-wrapper,
.com-content-article .astroid-section.inside-article-wrapper {
    padding-inline: 12px;
}
.com-content-article .inside-article-wrapper:not(.astroid-section) {
    max-width: 820px;
    margin-inline: auto;
}

#astroid-sticky-header .container {
    max-width: 1600px;
}

.mh-image-border-radius img, .mh-image-border-radius {
    border-radius: 14px;
}

.mh-footer-nav .nav-link {
    padding-left: unset;
}

/* ============================================================================
   C — MEGAMENÜ
   ============================================================================ */

.megamenu-container {
    margin-top: 10px;
}


/* ----------------------------------------------------------------------------
   1 — Ebene-1-Links mit Unterstrich-Indikator
   ---------------------------------------------------------------------------- */

.astroid-nav>.nav-item>.nav-link {
    position: relative;
    color: var(--mh-blau);
    font-weight: 600;
    transition: color .2s, background .2s;
}

.astroid-nav>.nav-item>.nav-link::before {
    content: "";
    position: absolute;
    inset-inline: .75rem;
    bottom: 0;
    height: 3px;
    background: var(--mh-magenta);
    border-radius: 3px 3px 0 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}

.astroid-nav>.nav-item:hover>.nav-link,
.astroid-nav>.nav-item>.nav-link.active {
    color: var(--mh-magenta-text);
    background: #f8f9fa;
}

.astroid-nav>.nav-item:hover>.nav-link::before,
.astroid-nav>.nav-item>.nav-link.active::before,
.astroid-nav>.nav-item>.nav-link[aria-expanded="true"]::before {
    transform: scaleX(1);
}

.astroid-nav .nav-submenu>li>.as-menu-item {
    padding: unset;
}


/* ----------------------------------------------------------------------------
   2 — Panel
   Astroid setzt Breite und Position per Inline-Style (100vw, negatives left).
   Nur Optik ergänzen, Geometrie nicht anfassen.
   ---------------------------------------------------------------------------- */

.megamenu-container {
    background: #ffffff;
    box-shadow: 0 16px 48px rgba(var(--mh-blau-rgb), .13);
}

/* Inhalt auf Containerbreite zentrieren, damit die Spalten unter dem Menü
   stehen und nicht über die ganzen 1920px auseinanderlaufen.
   Wenn du das volle Randlos-Layout aus dem Mockup willst: max-width raus. */
.megamenu-container>.row {
    max-width: 1320px;
    margin-inline: auto;
    padding: 28px 24px 32px;
    --bs-gutter-x: 2.5rem;
}


/* ----------------------------------------------------------------------------
   3 — Spaltentitel
   ---------------------------------------------------------------------------- */

.megamenu-container .megamenu-title {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mh-blau);
    text-decoration: none;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--mh-gold);
    transition: color .2s;
}

a.megamenu-title:hover {
    color: var(--mh-magenta);
}

/* Text Separator ist kein Ziel — Klick und Pointer unterdrücken */
.megamenu-container .megamenu-title.item-link-separator {
    pointer-events: none;
    cursor: default;
}

/* Astroid hängt an Spaltentitel mit Kindern einen Pfeil nach rechts.
   Die Unterpunkte stehen aber statisch offen darunter — Pfeil weg. */
.megamenu-container .megamenu-title .nav-item-caret {
    display: none;
}


/* ----------------------------------------------------------------------------
   4 — Menüpunkte in den Spalten
   ---------------------------------------------------------------------------- */

.megamenu-container .nav-submenu-static {
    padding-left: 0;
    list-style: none;
}

.megamenu-container .nav-submenu-static>li>a {
    display: block;
    padding: 6px 0;
    color: #3a4e62;
    font-size: 1rem;
    line-height: 1.35;
    text-decoration: none;
    border-radius: 3px;
    transition: color .18s, padding-left .18s;
}

.megamenu-container .nav-submenu-static>li>a:hover,
.megamenu-container .nav-submenu-static>li>a:focus-visible {
    color: var(--mh-magenta);
    padding-left: 4px;
}

.megamenu-container .nav-submenu-static>li>a .nav-title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Icons (nur Spalte Symptome & Diagnose) */
.megamenu-container .nav-submenu-static>li>a .nav-title>i {
    flex: 0 0 14px;
    margin-top: 3px;
    font-size: .88rem;
    text-align: center;
    color: var(--mh-blau);
    opacity: .65;
    transition: color .18s, opacity .18s;
}

.megamenu-container .nav-submenu-static>li>a:hover .nav-title>i {
    color: var(--mh-magenta);
    opacity: 1;
}


/* ----------------------------------------------------------------------------
   5 — Highlight-Box
   Gestylt wird der Modul-Container, NICHT .mega-highlight — JCE entfernt das
   Wrapper-div beim Speichern regelmäßig. So funktioniert die Box mit und ohne.
   ---------------------------------------------------------------------------- */

.megamenu-module .mod-custom {
    background: var(--mh-flaeche-blau);
    border-radius: 8px;
    padding: 20px;
}

/* Falls das Wrapper-div doch vorhanden ist: nicht doppelt kacheln */
.megamenu-module .mega-highlight {
    background: none;
    padding: 0;
    border-radius: 0;
}

.megamenu-module .highlight-badge {
    display: inline-block;
    background: var(--mh-magenta);
    color: #ffffff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.megamenu-module .highlight-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--mh-blau);
    line-height: 1.3;
    margin-bottom: 6px;
}

.megamenu-module .highlight-text {
    font-size: .8rem;
    color: #475b6b;
    line-height: 1.5;
    margin-bottom: 14px;
}

/* Datum/Ort-Zeile — für die Marfantag-Box, sobald die Eckdaten stehen */
.megamenu-module .highlight-meta {
    font-size: .78rem;
    font-weight: 600;
    color: var(--mh-blau);
    margin-bottom: 12px;
}

.megamenu-module .highlight-meta i {
    margin-right: 4px;
    opacity: .7;
}

.megamenu-module .highlight-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mh-blau);
    color: #ffffff !important;
    font-size: .8rem;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: background .2s;
}

.megamenu-module .highlight-cta:hover {
    background: var(--mh-blau-tief);
}

/* Aufräumen: JCE hat in drei Modulen ein <p class="btn-primary"> um den CTA
   gelegt. Neutralisieren, bis es im Modul entfernt ist. */
.megamenu-module p.btn-primary {
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: auto;
}


/* ----------------------------------------------------------------------------
   6 — Barrierefreiheit
   ---------------------------------------------------------------------------- */

.astroid-nav a:focus-visible,
.megamenu-container a:focus-visible {
    outline: 3px solid var(--mh-fokus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .astroid-nav>.nav-item>.nav-link::before,
    .megamenu-container .nav-submenu-static>li>a {
        transition: none;
    }
}

.mh-kachel {
    padding: 26px 26px 24px;
    border-radius: 14px;
    text-decoration: none;
    color: rgb(51, 51, 51);
    box-sizing: border-box;
}

.mh-primary {
    background: rgb(234, 245, 253);
    border: 1px solid rgb(207, 226, 242);
}

.mh-primary h1, .mh-primary h2, .mh-primary h3, .mh-primary h4 {
    color: rgb(var(--mh-blau-rgb));
}

.mh-secondary {
    background: rgb(239, 204, 216);
    border: 1px solid rgb(227, 182, 198);
}

.mh-secondary h1, .mh-secondary h2, .mh-secondary h3, .mh-secondary h4 {
    color: var(--mh-magenta-text-tief);
}

.mh-accent {
    background: rgb(255, 245, 224);
    border: 1px solid rgb(242, 226, 191);
}

.mh-accent h1,
.mh-accent h2,
.mh-accent h3,
.mh-accent h4 {
    color: var(--mh-gold-text);
}

.mh-kachel-titel {
    color: var(--mh-magenta);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0 0 8px 0;
}

/* ============================================================================
   C2 — Footer
   ============================================================================ */

.mh-subfooter-nav {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 1.5rem;
}


/* ============================================================================
   D — BLOCKQUOTE / ZITATKASTEN
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 — Standard: Creme mit goldenem Anführungszeichen
   Für Hinweise und eingeschobene Erklärungen. Ohne Zusatzklasse.
   ---------------------------------------------------------------------------- */

.com-content-article blockquote {
    position: relative;
    margin: 32px auto;
    padding: 38px 32px 38px 72px;
    border: 0;
    border-radius: 16px;
    background: var(--mh-flaeche-creme);
    color: var(--mh-text);
    font-size: 19px;
    line-height: 1.65;
    font-style: normal;
    font-weight: 400;
    max-width: 600px;
    /* uikit erzwingt kursiv — hier zurückgesetzt */
}

.com-content-article blockquote::before {
    content: "\201C";
    position: absolute;
    left: 24px;
    top: 7px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 72px;
    line-height: 1;
    color: var(--mh-gold);
    pointer-events: none;
}


/* ----------------------------------------------------------------------------
   2 — Innere Elemente
   Absatzabstände gegen uikit- und Bootstrap-Defaults absichern.
   ---------------------------------------------------------------------------- */

.com-content-article blockquote p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    max-width: none;
}

.com-content-article blockquote p+p {
    margin-top: 14px;
}

.com-content-article blockquote p:last-of-type {
    margin-bottom: 0;
}

/* Quellenangabe — <cite> oder <footer> im Blockquote */
.com-content-article blockquote cite,
.com-content-article blockquote footer {
    display: block;
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.4;
    font-style: normal;
    font-weight: 600;
    color: var(--mh-blau);
}

.com-content-article blockquote cite::before,
.com-content-article blockquote footer::before {
    content: "\2014\00A0";
    /* Geviertstrich + geschütztes Leerzeichen */
}


/* ----------------------------------------------------------------------------
   3 — Farbvarianten
   Klasse zusätzlich am <blockquote> vergeben.
   ---------------------------------------------------------------------------- */

/* Blau — Fakten, Studien, medizinische Einordnung */
.com-content-article blockquote.zitat-blau {
    background: var(--mh-flaeche-blau);
}

.com-content-article blockquote.zitat-blau::before {
    color: var(--mh-blau);
}

/* Rosa — Betroffenenstimmen, persönliche Zitate */
.com-content-article blockquote.zitat-rosa {
    background: var(--mh-rosa);
}

.com-content-article blockquote.zitat-rosa::before {
    color: var(--mh-magenta);
}

.com-content-article blockquote.zitat-rosa cite,
.com-content-article blockquote.zitat-rosa footer {
    color: var(--mh-magenta-text-tief);
}

/* Grau — Randnotizen ohne Farbgewicht */
.com-content-article blockquote.zitat-grau {
    background: var(--mh-flaeche-grau);
}

.com-content-article blockquote.zitat-grau::before {
    color: #c9ced3;
}


/* ----------------------------------------------------------------------------
   5 — Responsive
   ---------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .com-content-article blockquote {
        margin: 24px 0;
        padding: 24px 20px 24px 54px;
        font-size: 18px;
    }

    .com-content-article blockquote::before {
        left: 16px;
        top: 2px;
        font-size: 56px;
    }
}


/* ============================================================================
   D2 — BUTTONS

   Drei Varianten, eine gemeinsame Basis:
     .btn-primary          gefüllt dunkelblau
     .btn-secondary        gefüllt magenta
     .btn-outline-primary  Umriss dunkelblau

   Alle drei sind gleich hoch: 2px Rahmen + 15px Padding + 19px Zeilenhöhe
   = 53px. Die gefüllten tragen dafür einen unsichtbaren Rahmen. Wer das
   Padding stattdessen anpasst, muss bei jeder Rahmenänderung nachrechnen.

   Das !important bei den Hover-Regeln stand schon vorher hier — Astroid setzt
   konkurrierende Hover-Farben. Falls das im Template abgestellt wird, kann es
   raus; ohne Test auf der Live-Seite lasse ich es stehen.

   Kontraste geprüft (WCAG 2.1): Text mindestens 7:1 in allen Zuständen,
   Flächen und Rahmen mindestens 3:1 gegen ihren Hintergrund.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 — Gemeinsame Basis
   ---------------------------------------------------------------------------- */

.btn-primary,
.btn-secondary,
.btn-outline-primary {
    display: inline-block;
    padding: 15px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    font: 600 16px / 1.2 "Noto Sans", sans-serif;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* ----------------------------------------------------------------------------
   2 — Varianten
   ---------------------------------------------------------------------------- */

.btn-primary {
    background: rgb(var(--mh-blau-rgb));
    color: rgb(255, 255, 255);
}

.btn-secondary {
    background: rgb(var(--mh-magenta-rgb));
    color: rgb(255, 255, 255);
}

.btn-outline-primary {
    background: transparent;
    border-color: rgb(var(--mh-blau-rgb));
    color: rgb(var(--mh-blau-rgb));
}

/* ----------------------------------------------------------------------------
   3 — Hover
   ---------------------------------------------------------------------------- */

.btn-primary:hover {
    background: var(--mh-blau-tief) !important;
    color: rgb(255, 255, 255) !important;
}

.btn-secondary:hover {
    background: var(--mh-magenta-tief) !important;
    color: rgb(255, 255, 255) !important;
}

.btn-outline-primary:hover {
    background: var(--mh-flaeche-blau) !important;
    color: rgb(var(--mh-blau-rgb)) !important;
}

/* ----------------------------------------------------------------------------
   4 — Gedrückt
   Nur eine Farbstufe, keine Verschiebung — eine Bewegung um 1px ist auf
   Touchgeräten nicht wahrnehmbar und stört bei reduzierter Bewegung.
   ---------------------------------------------------------------------------- */

.btn-primary:active,
.btn-secondary:active,
.btn-outline-primary:active {
    transition: none;
}

.btn-outline-primary:active {
    background: var(--mh-rahmen-blau) !important;
}

/* ----------------------------------------------------------------------------
   5 — Tastaturfokus
   Zwei Ringe: der äußere in Dunkelblau trägt den Kontrast, der innere weiße
   trennt ihn von der Buttonfläche. So bleibt der Fokus auch erkennbar, wenn
   der Button auf einer farbigen Fläche steht.

   Übernommen aus marfan-buttons.css und auf .btn-primary erweitert.
   ---------------------------------------------------------------------------- */

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline-primary:focus-visible {
    outline: 3px solid var(--mh-fokus);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--mh-fokus-innen);
}


/* ----------------------------------------------------------------------------
   7 — Bewegung reduzieren
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .btn-primary,
    .btn-secondary,
    .btn-outline-primary {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   8 — Erhöhter Kontrastbedarf (Windows-Kontrastmodus)
   Systemfarbe statt Markenfarbe, sonst überschreibt das System den Ring.
   ---------------------------------------------------------------------------- */

@media (forced-colors: active) {

    .btn-primary,
    .btn-secondary,
    .btn-outline-primary {
        border-color: ButtonBorder;
    }

    .btn-primary:focus-visible,
    .btn-secondary:focus-visible,
    .btn-outline-primary:focus-visible {
        outline: 3px solid Highlight;
        box-shadow: none;
    }
}


.astroid-article-full-image img {
    border-radius: 15px;
}

/* ============================================================================
   E — LEXIKON
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 — Suchfeld im Hero
   Das JS baut die innere Struktur, die Klasse mh-lex-suche kommt ebenfalls
   vom JS. Ohne JavaScript bleibt der Platzhalter leer und unsichtbar.
   ---------------------------------------------------------------------------- */

.mh-lex-suche {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    margin: 8px 0 0;
    padding: 6px 8px 6px 18px;
    background: #ffffff;
    border: 1px solid #cfe2f2;
    border-radius: 12px;
}

.mh-lex-suche label {
    font-size: 17px;
    line-height: 1;
    color: var(--mh-text-leise);
    white-space: nowrap;
    margin: 0;
}

.mh-lex-suche input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 17px;
    line-height: 1.4;
    color: var(--mh-text);
}

/* #8b959d kam nur auf 3.05:1 — Platzhaltertext braucht wie jeder Text 4.5:1. */

.mh-lex-suche input::placeholder {
    color: #535a60;
    opacity: 1;
}

/* Fokusring — moderne Browser. Ältere zeigen schlicht keinen Rahmenwechsel. */
.mh-lex-suche:focus-within {
    border-color: var(--mh-blau);
    outline: 3px solid var(--mh-fokus);
    outline-offset: 2px;
}

/* Der weiche blaue Schein von vorher lag bei 12% Deckkraft und war als
   Fokusanzeige zu schwach — er erfüllte die geforderten 3:1 nicht. */

.mh-lex-suche input:focus-visible {
    outline: none;
}

.mh-lex-buchstaben button:focus-visible {
    outline: 3px solid var(--mh-fokus);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--mh-fokus-innen);
}


/* ----------------------------------------------------------------------------
   2 — Trefferzähler und Leermeldung
   Beide Elemente erzeugt das JS.
   ---------------------------------------------------------------------------- */

.mh-lex-anzahl {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--mh-text-leise);
}

.mh-lex-leer {
    margin: 0;
    padding: 28px 4px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--mh-text-leise);
    border-bottom: 1px solid var(--mh-rahmen-grau);
}


/* ----------------------------------------------------------------------------
   2b — Angeheftete Leiste mit A–Z
   Erzeugt das JS. Der Abstand nach oben (top) wird vom JS gesetzt, weil er
   von der Höhe des angehefteten Seitenkopfs abhängt.
   ---------------------------------------------------------------------------- */

.mh-lex-leiste {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 0 6px;
    padding: 10px 0 8px;
    background: #ffffff;
    border-bottom: 1px solid var(--mh-rahmen-grau);
}

/* Auf Mobil sitzt zusätzlich das Suchfeld in der Leiste */
.mh-lex-leiste .mh-lex-suche {
    margin: 0 0 8px;
    max-width: none;
}

.mh-lex-buchstaben {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mh-lex-buchstaben::-webkit-scrollbar {
    display: none;
}

.mh-lex-buchstaben button {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
    border: 1px solid #cfe2f2;
    border-radius: 9px;
    background: #ffffff;
    color: var(--mh-blau);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.mh-lex-buchstaben button:hover {
    background: var(--mh-flaeche-blau);
}

/* Buchstaben ohne Einträge. #b8c0c7 lag bei 1.84:1. Für echte, per disabled
   markierte Bedienelemente wäre das zulässig — diese Buttons tragen das
   Attribut aber nicht. Entweder das JS setzt disabled, dann kann die Farbe
   wieder heller werden, oder der Kontrast stimmt. Hier: der Kontrast. */

.mh-lex-buchstaben button.is-leer {
    color: #535a60;
    border-color: var(--mh-rahmen-grau);
    background: #ffffff;
    cursor: default;
}


/* ----------------------------------------------------------------------------
   3 — Begriffsliste
   ---------------------------------------------------------------------------- */

.mh-lex-buchstabe {
    margin: 30px 0 2px;
    padding: 0 4px 6px;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--mh-magenta);
    border-bottom: 2px solid var(--mh-rosa);
}

.mh-lex-buchstabe.is-versteckt {
    display: none;
}

.mh-lexikon {
    margin: 8px 0 0;
}

.mh-lex-eintrag {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: 24px;
    align-items: baseline;
    padding: 18px 4px;
    border-bottom: 1px solid var(--mh-rahmen-grau);
}

.mh-lex-eintrag.is-versteckt {
    display: none;
}

.mh-lex-begriff {
    font-family: 'Lexend Deca', system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--mh-blau);
}

.mh-lex-def {
    font-size: 17px;
    line-height: 1.65;
    color: var(--mh-text);
}

.mh-lex-def a {
    color: var(--mh-blau);
    text-underline-offset: 3px;
}

.mh-lex-def a:hover {
    color: var(--mh-magenta);
}


/* ----------------------------------------------------------------------------
   5 — Responsive
   ---------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    /* Größere Tippflächen für die Buchstaben */
    .mh-lex-buchstaben button {
        min-width: 44px;
        min-height: 44px;
        font-size: 16px;
    }
}

@media (max-width: 575.98px) {
    .mh-lex-suche {
        padding: 6px 8px 6px 14px;
        gap: 8px;
    }

    .mh-lex-eintrag {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px 2px;
    }

    .mh-lex-begriff {
        font-size: 17px;
    }

    .mh-lex-def {
        font-size: 16px;
    }

    .mh-lex-buchstabe {
        margin-top: 24px;
        font-size: 18px;
    }
}


/* ============================================================================
   F — FAQ-AKKORDEON
   Einbau: Astroid → Template Options → Custom Code → Custom CSS
   Gehört zusammen mit marfan-faq.js

   Die Klassen setzt das Script, nicht die Redaktion. Im Artikel stehen nur
   Überschriften und Absätze:
     Überschrift 2 = Gruppentitel      → .mh-faq-gruppe (optional, s. Punkt 2)
     Überschrift 3 = Frage             → wird zu <summary class="mh-faq-frage">
     Absätze darunter = Antwort        → wird zu <div class="mh-faq-antwort">

   Vereinsfarben nach PR-Leitfaden:
     Primär      #b1003c Rot        #004476 Blau
     Sekundär    #efccd8 Rosa       #eaf5fd Hellblau
                 #f3f3f3 Grau       #333333 Anthrazit
     Akzent      #ffc866 Gold       #fae2a3 Gold hell    #fff5e0 Creme
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1 — Notfallkasten
   Steht fest sichtbar über der Liste, nicht im Akkordeon. Wer akute Schmerzen
   hat, soll nicht erst klicken müssen.
   ---------------------------------------------------------------------------- */

.mh-faq-notfall {
    margin: 0 0 32px;
    padding: 20px 24px;
    background: var(--mh-flaeche-creme);
    border-left: 5px solid var(--mh-magenta);
    border-radius: 0 10px 10px 0;
}

.mh-faq-notfall>*:first-child {
    margin-top: 0;
}

.mh-faq-notfall>*:last-child {
    margin-bottom: 0;
}

.mh-faq-notfall strong:first-child {
    display: block;
    margin-bottom: 6px;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    font-size: 17px;
    color: var(--mh-magenta-text);
}

.mh-faq-notfall a {
    color: var(--mh-magenta-text);
}


/* ----------------------------------------------------------------------------
   2 — Gruppentitel
   Jede Überschrift 2 innerhalb des FAQ-Bereichs. Kein Handanlegen nötig.
   ---------------------------------------------------------------------------- */

.mh-faq.mh-faq h2,
.faq-seite.faq-seite h2 {
    margin: 48px 0 8px;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mh-magenta);
}

.mh-faq h2:first-child {
    margin-top: 0;
}


/* ----------------------------------------------------------------------------
   3 — Ein Eintrag
   Das Marker-Dreieck des Browsers wird entfernt, das eigene Pluszeichen kommt
   aus Punkt 5. ::-webkit-details-marker wird für ältere Safari-Versionen
   zusätzlich gebraucht.
   ---------------------------------------------------------------------------- */

.mh-faq-eintrag {
    border-bottom: 1px solid var(--mh-rahmen-blau);
}

.mh-faq-eintrag:first-of-type {
    border-top: 1px solid var(--mh-rahmen-blau);
}

.mh-faq-frage {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 4px;
    cursor: pointer;
    list-style: none;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mh-blau);
    transition: color .15s ease;
}

.mh-faq-frage::-webkit-details-marker {
    display: none;
}

.mh-faq-frage::marker {
    content: '';
}

.mh-faq-frage:hover {
    color: var(--mh-magenta);
}

/* Tastaturfokus muss sichtbar bleiben — nicht wegoptimieren */
.mh-faq-frage:focus-visible {
    outline: 3px solid var(--mh-fokus);
    outline-offset: 2px;
    border-radius: 6px;
}

.mh-faq-eintrag[open]>.mh-faq-frage {
    color: var(--mh-magenta);
}


/* ----------------------------------------------------------------------------
   4 — Antworttext
   ---------------------------------------------------------------------------- */

.mh-faq-antwort {
    padding: 0 4px 24px 44px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--mh-text);
}

.mh-faq-antwort>*:first-child {
    margin-top: 0;
}

.mh-faq-antwort>*:last-child {
    margin-bottom: 0;
}

.mh-faq-antwort p {
    margin: 0 0 14px;
}

.mh-faq-antwort ul {
    margin: 0 0 14px;
    padding-left: 20px;
}

.mh-faq-antwort li {
    margin-bottom: 8px;
}

.mh-faq-antwort a {
    color: var(--mh-magenta);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.mh-faq-antwort a:hover {
    color: var(--mh-magenta-tief);
}


/* ----------------------------------------------------------------------------
   5 — Plus- und Minuszeichen
   Reines CSS aus zwei Strichen, damit kein Icon-Font geladen werden muss.
   ---------------------------------------------------------------------------- */

.mh-faq-frage::before {
    content: '';
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border-radius: 50%;
    background:
        linear-gradient(var(--mh-blau), var(--mh-blau)) center / 11px 2px no-repeat,
        linear-gradient(var(--mh-blau), var(--mh-blau)) center / 2px 11px no-repeat,
        var(--mh-flaeche-blau);
    transition: background-color .15s ease, transform .2s ease;
}

.mh-faq-eintrag[open]>.mh-faq-frage::before {
    background:
        linear-gradient(#ffffff, #ffffff) center / 11px 2px no-repeat,
        var(--mh-magenta);
    transform: rotate(180deg);
}


/* ----------------------------------------------------------------------------
   6 — Fußhinweis unter der Liste
   ---------------------------------------------------------------------------- */

.mh-faq-hinweis {
    margin: 32px 0 0;
    padding: 16px 20px;
    background: var(--mh-flaeche-grau);
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: #525252;
}

.mh-faq-hinweis a {
    color: var(--mh-magenta-text);
}


/* ----------------------------------------------------------------------------
   7 — Ohne JavaScript
   Dann bleiben Überschrift 3 und Absätze stehen. Sie sollen wenigstens sauber
   aussehen. Sobald das Script gelaufen ist, greift .mh-faq-bereit und die
   Regel wird gegenstandslos.
   ---------------------------------------------------------------------------- */

.mh-faq.mh-faq h3 {
    margin: 28px 0 8px;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--mh-blau);
}


/* ----------------------------------------------------------------------------
   8 — Kleine Bildschirme
   ---------------------------------------------------------------------------- */

@media (max-width: 575px) {
    .mh-faq-frage {
        font-size: 17px;
        gap: 12px;
        padding: 16px 2px;
    }

    .mh-faq-antwort {
        padding-left: 36px;
        font-size: 16px;
    }

    .mh-faq-notfall {
        padding: 16px 18px;
    }
}


/* ----------------------------------------------------------------------------
   9 — Bewegung reduzieren
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mh-faq-frage::before {
        transition: none;
    }
}


/* ----------------------------------------------------------------------------
   10 — Druck
   Das Script klappt vor dem Druck alles auf; hier nur noch die Optik.
   ---------------------------------------------------------------------------- */

@media print {
    .mh-faq-eintrag>.mh-faq-antwort {
        display: block !important;
    }

    .mh-faq-frage::before {
        display: none;
    }

    .mh-faq-antwort {
        padding-left: 4px;
    }
}


/* ============================================================================
   G — HINWEISBOXEN UND KEY-FACTS
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 — Hinweis-Boxen
   Markup (JCE: Quellcode-Ansicht):
 
     <div class="mh-hinweis mh-hinweis--wichtig mh-hinweis--rot">
       <p class="mh-hinweis-titel">Im Notfall</p>
       <p>Fließtext …</p>
     </div>
 
   Titel und Farbklasse sind optional. Ohne Farbklasse ist die Box blau,
   ohne Titel rutscht der Text automatisch neben das Icon.
   ############################################################################ */


/* ----------------------------------------------------------------------------
   1.0 — Grundgerüst
   Die vier Farbwerte hängen an Custom Properties. Eine neue Farbvariante
   braucht deshalb nur einen Block mit vier Zeilen — siehe 1.2.
   ---------------------------------------------------------------------------- */

.mh-hinweis {
    --mh-hinweis-flaeche: var(--mh-flaeche-blau);
    --mh-hinweis-akzent: var(--mh-blau);
    --mh-hinweis-titel: var(--mh-blau);
    --mh-hinweis-link: var(--mh-magenta);

    position: relative;
    margin: 32px 0;
    padding: 24px 28px 24px 76px;
    border-radius: 16px;
    background: var(--mh-hinweis-flaeche);
    color: var(--mh-text);
    font-size: 17px;
    line-height: 1.65;
}

/* Icon-Kreis — sitzt oben links, Position unabhängig von der Texthöhe */
.mh-hinweis::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 24px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--mh-hinweis-akzent);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 19px;
    /* Standardsymbol: Info-i, weiß */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Ccircle cx='12' cy='6' r='2.1'/%3E%3Crect x='10' y='9.6' width='4' height='10.4' rx='1.7'/%3E%3C/svg%3E");
}

/* Titelzeile */
.mh-hinweis-titel {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mh-hinweis-titel);
}

/* Absätze gegen Bootstrap- und uikit-Defaults absichern */
.mh-hinweis p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    max-width: none;
}

.mh-hinweis p+p {
    margin-top: 12px;
}

/* Listen dürfen in die Box, brauchen aber eigene Abstände */
.mh-hinweis ul,
.mh-hinweis ol {
    margin: 12px 0 0;
    padding-left: 22px;
}

.mh-hinweis li+li {
    margin-top: 6px;
}

.mh-hinweis> :last-child {
    margin-bottom: 0;
}

/* Links in der Box — im Fließtext erkennbar, ohne Farbchaos */
.mh-hinweis a {
    color: var(--mh-hinweis-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.mh-hinweis a:hover {
    text-decoration-thickness: 2px;
}


/* ----------------------------------------------------------------------------
   1.1 — Symbol
   Nur das Icon, keine Farbe. Frei mit jeder Farbvariante kombinierbar.
   ---------------------------------------------------------------------------- */

/* Ausrufezeichen — Warnhinweise, medizinisch Kritisches */
.mh-hinweis--wichtig::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Crect x='10' y='3.6' width='4' height='11.2' rx='1.8'/%3E%3Ccircle cx='12' cy='19' r='2.3'/%3E%3C/svg%3E");
}

/* Glühbirne — Praxishinweise, Empfehlungen, Alltagswissen */
.mh-hinweis--tipp::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2.2a6.8 6.8 0 0 0-4 12.3v2.1c0 .66.54 1.2 1.2 1.2h5.6c.66 0 1.2-.54 1.2-1.2v-2.1a6.8 6.8 0 0 0-4-12.3z'/%3E%3Crect x='9.4' y='19.2' width='5.2' height='2.6' rx='1.3'/%3E%3C/svg%3E");
    background-size: 20px 20px;
}


/* ----------------------------------------------------------------------------
   1.2 — Farbe
   Nur Farbwerte, kein Icon. --blau ist der Standard und kann weggelassen
   werden; die Klasse existiert trotzdem, damit man sie im JCE bewusst
   auswählen kann.
   ---------------------------------------------------------------------------- */

/* Blau — Einordnung, Zusammenfassung, Medizinisches */
.mh-hinweis--blau {
    --mh-hinweis-flaeche: var(--mh-flaeche-blau);
    --mh-hinweis-akzent: var(--mh-blau);
    --mh-hinweis-titel: var(--mh-blau);
    --mh-hinweis-link: var(--mh-magenta);
}

/* Rot — Warnungen, Notfall, alles mit Signalcharakter. Sparsam einsetzen,
   sonst nutzt sich die Wirkung ab. */
.mh-hinweis--rot {
    --mh-hinweis-flaeche: var(--mh-rosa);
    --mh-hinweis-akzent: var(--mh-magenta);
    --mh-hinweis-titel: var(--mh-magenta-tief);
    --mh-hinweis-link: var(--mh-magenta-tief);
}

/* Gold — Tipps, Empfehlungen, Ermutigendes */
.mh-hinweis--gold {
    --mh-hinweis-flaeche: var(--mh-flaeche-creme);
    --mh-hinweis-akzent: var(--mh-gold);
    --mh-hinweis-titel: var(--mh-blau);
    --mh-hinweis-link: var(--mh-magenta);
}

/* Grau — Quellen, Randnotizen, Redaktionelles ohne Farbgewicht */
.mh-hinweis--grau {
    --mh-hinweis-flaeche: var(--mh-flaeche-grau);
    --mh-hinweis-akzent: var(--mh-text);
    --mh-hinweis-titel: var(--mh-text);
    --mh-hinweis-link: var(--mh-magenta);
}


/* ----------------------------------------------------------------------------
   1.3 — Sonderfall Gold: dunkle Glyphe
   Weiß auf #ffc866 hat nur 1,7:1 Kontrast und ist damit nicht erkennbar.
   Für Gold deshalb dieselben drei Symbole in Anthrazit (#333333 auf Gold
   ≈ 9:1). Die doppelte Klasse gewinnt gegen 1.1.
   ---------------------------------------------------------------------------- */

.mh-hinweis--gold::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Ccircle cx='12' cy='6' r='2.1'/%3E%3Crect x='10' y='9.6' width='4' height='10.4' rx='1.7'/%3E%3C/svg%3E");
}

.mh-hinweis--gold.mh-hinweis--wichtig::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Crect x='10' y='3.6' width='4' height='11.2' rx='1.8'/%3E%3Ccircle cx='12' cy='19' r='2.3'/%3E%3C/svg%3E");
}

.mh-hinweis--gold.mh-hinweis--tipp::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M12 2.2a6.8 6.8 0 0 0-4 12.3v2.1c0 .66.54 1.2 1.2 1.2h5.6c.66 0 1.2-.54 1.2-1.2v-2.1a6.8 6.8 0 0 0-4-12.3z'/%3E%3Crect x='9.4' y='19.2' width='5.2' height='2.6' rx='1.3'/%3E%3C/svg%3E");
}


/* ----------------------------------------------------------------------------
   1.4 — Formvariante „offen“
   Ohne eigene Fläche, nur Linie links. Für farbige Bänder (.mh-band) oder
   wenn mehrere Boxen kurz hintereinander stehen. Mit allen Symbolen und
   Farben kombinierbar.
   ---------------------------------------------------------------------------- */

.mh-hinweis--offen {
    background: none;
    border-radius: 0;
    border-left: 4px solid var(--mh-hinweis-akzent);
    padding: 4px 0 4px 62px;
}

.mh-hinweis--offen::before {
    top: 0;
    left: 16px;
}


/* ############################################################################
   2 — KEY-FACTS
   Markup:
 
     <div class="mh-fakten">
       <div class="mh-fakt">
         <p class="mh-fakt-zahl">1 : 5.000</p>
         <p class="mh-fakt-text">Menschen sind vom Marfan-Syndrom betroffen</p>
       </div>
       …
     </div>
 
   Das Grid bricht selbstständig um: drei Spalten am Desktop, zwei auf dem
   Tablet, eine auf dem Handy — ohne Bootstrap-Spalten und ohne Breakpoints.
   Varianten per Zusatzklasse am Container: --karten, --invers, --mitte
   ############################################################################ */

.mh-fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px 36px;
    margin: 40px 0;
    padding: 0;
    list-style: none;
}

.mh-fakt {
    margin: 0;
    min-width: 0;
}

.mh-fakt-zahl {
    margin: 0 0 8px;
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.02em;
    color: var(--mh-blau);
    font-variant-numeric: lining-nums tabular-nums;
}

/* Einheit oder Zusatz klein hinter der Zahl: <span class="mh-fakt-einheit"> */
.mh-fakt-einheit {
    font-size: .46em;
    font-weight: 600;
    letter-spacing: 0;
    margin-left: .18em;
    color: var(--mh-magenta);
}

.mh-fakt-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--mh-text);
    max-width: 32ch;
}

.mh-fakt-quelle {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--mh-text-leise);
}

/* Goldener Strich unter der Zahl — ruhiger Anker, ersetzt Trennlinien */
.mh-fakt-zahl::after {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 12px;
    border-radius: 2px;
    background: var(--mh-gold);
}


/* ----------------------------------------------------------------------------
   2.1 — Variante „karten“
   Für weiße oder graue Bänder: jeder Fakt bekommt eine eigene Fläche.
   ---------------------------------------------------------------------------- */

.mh-fakten--karten {
    gap: 20px;
}

.mh-fakten--karten .mh-fakt {
    padding: 26px 24px 28px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e2e8ee;
    box-shadow: 0 2px 10px rgba(var(--mh-blau-rgb), .05);
}

.mh-fakten--karten .mh-fakt-text {
    max-width: none;
}


/* ----------------------------------------------------------------------------
   2.2 — Variante „invers“
   Für das blaue Band. Zahl in Gold, Text weiß.
   Hintergrund setzt das Band (.mh-band), nicht diese Klasse — so bleibt die
   Variante auch in einem farbigen Modul einsetzbar.
   ---------------------------------------------------------------------------- */

.mh-fakten--invers .mh-fakt-zahl {
    color: var(--mh-gold);
}

.mh-fakten--invers .mh-fakt-text {
    color: #ffffff;
}

.mh-fakten--invers .mh-fakt-quelle {
    color: rgba(255, 255, 255, 0.80);
}

.mh-fakten--invers .mh-fakt-einheit {
    color: var(--mh-sand);
}

.mh-fakten--invers .mh-fakt-zahl::after {
    background: rgba(255, 255, 255, .45);
}

/* Passendes Band dazu, falls noch keins existiert */
.mh-band--blau-voll {
    background: var(--mh-blau);
}


/* ----------------------------------------------------------------------------
   2.3 — Zentrierte Ausrichtung
   Zusatzklasse am Container, kombinierbar mit allen Varianten.
   ---------------------------------------------------------------------------- */

.mh-fakten--mitte {
    text-align: center;
}

.mh-fakten--mitte .mh-fakt-text {
    max-width: none;
}

.mh-fakten--mitte .mh-fakt-zahl::after {
    margin-inline: auto;
}


/* ############################################################################
   4 — BARRIEREFREIHEIT
   ############################################################################ */

.mh-hinweis a:focus-visible,
.mh-fakt a:focus-visible {
    outline: 3px solid var(--mh-fokus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Bei erhöhtem Kontrastbedarf bekommen die Flächen eine sichtbare Kante */
@media (forced-colors: active) {

    .mh-hinweis,
    .mh-fakten--karten .mh-fakt {
        border: 1px solid CanvasText;
    }
}


/* ############################################################################
   5 — RESPONSIVE
   ############################################################################ */

@media (max-width: 575.98px) {
    .mh-hinweis {
        margin: 24px 0;
        padding: 20px;
        font-size: 16px;
    }

    /* Auf schmalen Displays steht das Icon über dem Text statt daneben —
     sonst bleibt für den Fließtext keine Zeilenbreite übrig. */
    .mh-hinweis::before {
        position: static;
        display: block;
        margin-bottom: 12px;
    }

    .mh-hinweis--offen {
        padding: 4px 0 4px 16px;
    }

    .mh-fakten {
        gap: 24px;
        margin: 32px 0;
    }

    .mh-fakten--karten .mh-fakt {
        padding: 22px 20px 24px;
    }
}


/* ############################################################################
   6 — DRUCK
   Hintergrundfarben werden im Druck standardmäßig unterdrückt — deshalb
   Kanten setzen, damit die Boxen als Boxen erkennbar bleiben.
   ############################################################################ */

@media print {
    .mh-hinweis {
        border: 1px solid #666666;
        color: #000000;
        break-inside: avoid;
    }

    .mh-fakt {
        break-inside: avoid;
    }

    .mh-fakt-zahl {
        color: #000000;
    }
}


/* ============================================================================
   H — AKKORDEON (allgemein)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 — Der Behälter
   Umschließt alle Einträge und setzt den Abstand zwischen den Karten.
   interpolate-size vererbt sich nach unten und wird in Punkt 6 gebraucht.
   ---------------------------------------------------------------------------- */

.mh-akkordeon {
    margin: 28px 0;
    display: grid;
    gap: 14px;
    interpolate-size: allow-keywords;
}


/* ----------------------------------------------------------------------------
   2 — Eine Karte
   ---------------------------------------------------------------------------- */

.mh-ak {
    background: #ffffff;
    border: 1px solid var(--mh-rahmen-blau);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mh-ak:hover {
    border-color: #b8cee1;
}

.mh-ak[open] {
    border-color: #b8cee1;
    box-shadow: 0 2px 10px rgba(var(--mh-blau-rgb), .07);
}


/* ----------------------------------------------------------------------------
   3 — Der Kopf
   Das Marker-Dreieck des Browsers muss auf drei Wegen weg: list-style für
   Firefox, ::marker für die Standardkonformen, ::-webkit-details-marker für
   ältere Safari-Versionen.
   ---------------------------------------------------------------------------- */

.mh-ak-titel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mh-blau);
    transition: color .15s ease;
}

.mh-ak-titel::-webkit-details-marker {
    display: none;
}

.mh-ak-titel::marker {
    content: '';
}

.mh-ak-titel:hover {
    color: var(--mh-magenta);
}

/* Tastaturfokus muss sichtbar bleiben — nicht wegoptimieren */
.mh-ak-titel:focus-visible {
    outline: 3px solid var(--mh-fokus);
    outline-offset: 2px;
    border-radius: 12px;
}


/* ----------------------------------------------------------------------------
   4 — Plus und Minus
   Zwei Farbverläufe statt Icon-Font. Beim Öffnen schrumpft der senkrechte
   Strich auf null — background-size lässt sich animieren, transform wäre
   bei einem Minuszeichen wirkungslos.
   ---------------------------------------------------------------------------- */

.mh-ak-titel::after {
    content: '';
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-image:
        linear-gradient(var(--mh-magenta), var(--mh-magenta)),
        linear-gradient(var(--mh-magenta), var(--mh-magenta));
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 2px, 2px 100%;
    transition: background-size .2s ease;
}

.mh-ak[open]>.mh-ak-titel::after {
    background-size: 100% 2px, 2px 0;
}


/* ----------------------------------------------------------------------------
   5 — Der Inhalt
   ---------------------------------------------------------------------------- */

.mh-ak-inhalt {
    padding: 0 24px 22px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--mh-text);
}

.mh-ak-inhalt>*:first-child {
    margin-top: 0;
}

.mh-ak-inhalt>*:last-child {
    margin-bottom: 0;
}

.mh-ak-inhalt p {
    margin: 0 0 14px;
}

.mh-ak-inhalt ul,
.mh-ak-inhalt ol {
    margin: 0 0 14px;
    padding-left: 20px;
}

.mh-ak-inhalt li {
    margin-bottom: 8px;
}

.mh-ak-inhalt a {
    color: var(--mh-magenta);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.mh-ak-inhalt a:hover {
    color: var(--mh-magenta-tief);
}


/* ----------------------------------------------------------------------------
   6 — Sanftes Auf- und Zuklappen
   Nur eine Zugabe. Browser ohne ::details-content klappen hart um, sonst
   ändert sich nichts. Deshalb steht alles in @supports.
   ---------------------------------------------------------------------------- */

@supports selector(::details-content) {
    .mh-ak::details-content {
        block-size: 0;
        overflow: clip;
        transition:
            block-size .28s ease,
            content-visibility .28s allow-discrete;
    }

    .mh-ak[open]::details-content {
        block-size: auto;
    }
}


/* ----------------------------------------------------------------------------
   7 — Abwandlungen
   Werden zusätzlich an .mh-akkordeon geschrieben.
   ---------------------------------------------------------------------------- */

/* Hellblaue Karten, etwa für Kästen innerhalb eines weißen Fließtextes */
.mh-akkordeon--blau .mh-ak {
    background: var(--mh-flaeche-blau);
    border-color: #cfe4f4;
}

/* Randlose Linienoptik wie auf der FAQ-Seite */
.mh-akkordeon--linien {
    gap: 0;
}

.mh-akkordeon--linien .mh-ak {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--mh-rahmen-blau);
    border-radius: 0;
    box-shadow: none;
}

.mh-akkordeon--linien .mh-ak:first-child {
    border-top: 1px solid var(--mh-rahmen-blau);
}

.mh-akkordeon--linien .mh-ak-titel {
    padding: 20px 4px;
}

.mh-akkordeon--linien .mh-ak-inhalt {
    padding: 0 4px 22px;
}


/* ----------------------------------------------------------------------------
   8 — Kleine Bildschirme
   ---------------------------------------------------------------------------- */

@media (max-width: 575px) {
    .mh-ak-titel {
        font-size: 17px;
        gap: 14px;
        padding: 16px 18px;
    }

    .mh-ak-inhalt {
        padding: 0 18px 18px;
        font-size: 16px;
    }
}


/* ----------------------------------------------------------------------------
   9 — Bewegung reduzieren
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .mh-ak,
    .mh-ak-titel,
    .mh-ak-titel::after {
        transition: none;
    }

    @supports selector(::details-content) {
        .mh-ak::details-content {
            transition: none;
        }
    }
}


/* ----------------------------------------------------------------------------
   10 — Druck
   Auf Papier gibt es kein Aufklappen. Alles sichtbar, Zeichen weg.
   ---------------------------------------------------------------------------- */

@media print {
    .mh-ak {
        break-inside: avoid;
        box-shadow: none;
    }

    .mh-ak-titel::after {
        display: none;
    }

    @supports selector(::details-content) {
        .mh-ak::details-content {
            block-size: auto;
            overflow: visible;
        }
    }
}


/* ============================================================================
   I — TABELLEN
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 — Rahmen und Grundmaße
   Bootstrap zeichnet nur Linien zwischen den Zeilen. Der abgerundete Rahmen
   sitzt am scrollbaren Wrapper, nicht an der Tabelle — sonst wird die Ecke
   beim horizontalen Scrollen abgeschnitten.
   ---------------------------------------------------------------------------- */

.table-responsive:has(.mh-tabelle) {
    border: 1px solid var(--mh-rahmen-grau);
    border-radius: 14px;
    margin: 28px 0;
}

.mh-tabelle {
    --bs-table-color: var(--mh-text);
    --bs-table-border-color: var(--mh-rahmen-grau);
    margin-bottom: 0;
    min-width: 720px;
}


/* ----------------------------------------------------------------------------
   2 — Kopfzeile
   ---------------------------------------------------------------------------- */

.mh-tabelle>thead>tr>th {
    background: var(--mh-blau);
    color: #ffffff;
    border-bottom: 0;
    padding: 16px 20px;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    vertical-align: middle;
}


/* ----------------------------------------------------------------------------
   3 — Datenzellen
   Die erste Spalte ist ein <th scope="row"> — das ist die Zeilenüberschrift
   und wird von Screenreadern mit vorgelesen. Optisch bleibt sie eine Zelle,
   nur in Blau und halbfett.
   ---------------------------------------------------------------------------- */

.mh-tabelle>tbody>tr>th,
.mh-tabelle>tbody>tr>td {
    padding: 16px 20px;
    font-family: 'Noto Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    vertical-align: top;
}

.mh-tabelle>tbody>tr>th {
    background: none;
    color: var(--mh-blau);
    font-weight: 600;
}

/* Zebrastreifen ohne .table-striped — die Bootstrap-Variante färbt auch die
   Zeilenüberschrift ein und macht das Blau dort unruhig. */
.mh-tabelle>tbody>tr:nth-child(even)>* {
    background: #fbfcfd;
}

/* Fett in einer Zelle heißt hier: erhöhtes Risiko. Die Redaktion drückt im
   JCE einfach Strg+B, die Farbe kommt von hier. */
.mh-tabelle>tbody>tr>td strong {
    color: var(--mh-magenta);
    font-weight: 600;
}


/* ----------------------------------------------------------------------------
   5 — Responsive
   Unter 576px darf die Tabelle schmaler werden, sonst muss auf dem Handy
   über die halbe Seitenbreite gescrollt werden.
   ---------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .mh-tabelle {
        min-width: 560px;
        font-size: 15px;
    }

    .mh-tabelle>thead>tr>th,
    .mh-tabelle>tbody>tr>th,
    .mh-tabelle>tbody>tr>td {
        padding: 12px 14px;
    }
}


/* ----------------------------------------------------------------------------
   6 — Druck
   Hintergrundfarben werden im Druck unterdrückt, deshalb Kanten setzen.
   ---------------------------------------------------------------------------- */

@media print {
    .table-responsive:has(.mh-tabelle) {
        overflow: visible;
    }

    .mh-tabelle {
        min-width: 0;
    }

    .mh-tabelle th,
    .mh-tabelle td {
        border: 1px solid #666666;
        color: #000000;
    }

    .mh-tabelle tr {
        break-inside: avoid;
    }
}


/* ============================================================================
   J — BILDGALERIE im Artikeltext
   Einbau: Astroid → Template Options → Custom Code → Custom CSS
 
   Das Raster kommt ohne Bootstrap-Spalten und ohne Breakpoints aus: auto-fit
   entscheidet selbst, wie viele Bilder nebeneinander passen. Im Artikeltext
   (820px durch .inside-article-wrapper) sind das drei, auf dem Tablet zwei,
   auf dem Handy eines.
 
   Markup (JCE: Quellcode-Ansicht):
 
     <div class="mh-galerie">
       <figure>
         <img src="images/…/datei.jpg" alt="Beschreibung des Bildinhalts"
              loading="lazy" />
         <figcaption>Bildunterschrift. Quelle: …</figcaption>
       </figure>
       …weitere figure-Blöcke…
     </div>
 
   Varianten per Zusatzklasse am Container:
     --gross     wenige, große Bilder (zwei Spalten statt drei)
     --frei      kein Zuschnitt — für Grafiken und Illustrationen, bei denen
                 der Rand zum Bild gehört
     --quadrat   quadratischer Zuschnitt, z. B. für Porträts
 
   Vereinsfarben nach PR-Leitfaden:
     Primär      #b1003c Rot        #004476 Blau
     Sekundär    #efccd8 Rosa       #eaf5fd Hellblau
                 #f3f3f3 Grau       #333333 Anthrazit
     Akzent      #ffc866 Gold       #fae2a3 Gold hell    #fff5e0 Creme
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1 — Das Raster
   minmax(240px, 1fr): jede Kachel ist mindestens 240px breit, teilt sich den
   Rest aber gleichmäßig. Sobald 240px nicht mehr passen, bricht die Reihe um.
   ---------------------------------------------------------------------------- */

.mh-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    margin: 28px 0;
}


/* ----------------------------------------------------------------------------
   2 — Eine Kachel
   figure hat im Browser einen eigenen Außenabstand — der muss weg, sonst
   stimmt der Rasterabstand nicht mehr.
   ---------------------------------------------------------------------------- */

.mh-galerie figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* ----------------------------------------------------------------------------
   3 — Das Bild
   Einheitliches Seitenverhältnis, damit die Reihe nicht ausfranst. object-fit
   schneidet dafür zu — das ist bei Fotos gewollt, bei Grafiken nicht
   (siehe Variante --frei).
   ---------------------------------------------------------------------------- */

.mh-galerie img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid #dbe7f2;
    border-radius: 12px;
    background: var(--mh-flaeche-grau);
}


/* ----------------------------------------------------------------------------
   4 — Die Bildunterschrift
   Grau auf Weiß erreicht 5,3:1 Kontrast und liegt damit über der AA-Schwelle
   von 4,5:1 für Fließtext.
   ---------------------------------------------------------------------------- */

.mh-galerie figcaption {
    font-family: 'Noto Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mh-text-leise);
}

.mh-galerie figcaption a {
    color: var(--mh-magenta);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ----------------------------------------------------------------------------
   5 — Verlinkte Bilder
   Nur wenn die Kachel auf eine größere Fassung oder eine Unterseite führt.
   ---------------------------------------------------------------------------- */

.mh-galerie a {
    display: block;
    border-radius: 12px;
    transition: box-shadow .15s ease, transform .15s ease;
}

.mh-galerie a:hover {
    box-shadow: 0 4px 14px rgba(var(--mh-blau-rgb), .14);
    transform: translateY(-2px);
}

.mh-galerie a:focus-visible {
    outline: 3px solid var(--mh-fokus);
    outline-offset: 3px;
}


/* ----------------------------------------------------------------------------
   6 — Varianten
   ---------------------------------------------------------------------------- */

/* Wenige, große Bilder — im Artikeltext ergibt das zwei Spalten */
.mh-galerie--gross {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* Kein Zuschnitt — für Illustrationen, Schemazeichnungen und Diagramme, bei
   denen ein abgeschnittener Rand Information kostet. Die Bilder dürfen dann
   unterschiedlich hoch sein, die Unterschriften stehen bündig darunter. */
.mh-galerie--frei figure {
    justify-content: space-between;
}

.mh-galerie--frei img {
    aspect-ratio: auto;
    object-fit: contain;
    background: #ffffff;
}

/* Quadratisch — Porträts, Teamfotos */
.mh-galerie--quadrat img {
    aspect-ratio: 1 / 1;
}


/* ----------------------------------------------------------------------------
   8 — Bewegung reduzieren
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mh-galerie a {
        transition: none;
    }

    .mh-galerie a:hover {
        transform: none;
    }
}


/* ----------------------------------------------------------------------------
   9 — Kleine Bildschirme
   ---------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .mh-galerie {
        gap: 18px;
        margin: 24px 0;
    }

    .mh-galerie--gross,
    .mh-galerie--quadrat,
    .mh-galerie {
        grid-template-columns: 1fr;
    }
}


/* ----------------------------------------------------------------------------
   10 — Druck
   ---------------------------------------------------------------------------- */

@media print {
    .mh-galerie {
        grid-template-columns: repeat(2, 1fr);
    }

    .mh-galerie figure {
        break-inside: avoid;
    }

    .mh-galerie figcaption {
        color: #000000;
    }

    .mh-galerie a {
        box-shadow: none;
    }
}

.mh-gray-background {
    background-color: lightgray;
}

/* ============================================================================
   K — QUELLENANGABE
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 — Die Trennlinie vor dem Quellenblock
   Greift nur auf ein <hr>, dem ein .mh-quelle folgt — normale Trennlinien im
   Fließtext bleiben unberührt.
   ---------------------------------------------------------------------------- */

.com-content-article hr:has(+ .mh-quelle) {
    margin: 44px 0 0;
    border: 0;
    border-top: 1px solid #dcdfe3;
    opacity: 1;
}


/* ----------------------------------------------------------------------------
   2 — Der Quellentext
   Kleiner, grau und kursiv: erkennbar als Beleg, nicht als Fließtext.
   var(--mh-text-leise) auf Weiß ergibt 5,3:1 Kontrast und liegt damit über der AA-Schwelle
   von 4,5:1.
   ---------------------------------------------------------------------------- */

.mh-quelle {
    margin-top: 18px;
    font-family: 'Noto Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    font-style: italic;
    color: var(--mh-text-leise);
}

.mh-quelle+.mh-quelle {
    margin-top: 8px;
}

.mh-quelle a {
    color: var(--mh-magenta);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mh-quelle a:focus-visible {
    outline: 3px solid var(--mh-fokus);
    outline-offset: 2px;
}


/* ----------------------------------------------------------------------------
   4 — Kleine Bildschirme
   ---------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .com-content-article hr:has(+ .mh-quelle) {
        margin-top: 32px;
    }

    .mh-quelle {
        font-size: 14px;
    }
}


/* ----------------------------------------------------------------------------
   5 — Druck
   Der Beleg gehört mit aufs Papier, deshalb nur die Farbe anpassen.
   ---------------------------------------------------------------------------- */

@media print {
    .mh-quelle {
        color: #000000;
        break-inside: avoid;
    }
}

/* ============================================================================
   L — PERSONENKACHEL mit Porträt
   Einbau: Astroid → Template Options → Custom Code → Custom CSS

   ZWECK: Ein Porträt neben Name und Kontakt, ohne dass die Redaktion eine
   verschachtelte Struktur einhalten muss.

   Die Vorgängerlösung nutzte Bootstrap-Flex-Klassen. Das setzt voraus, dass
   Bild und Text-Container direkte Geschwister sind — eine Bedingung, die man
   in der WYSIWYG-Ansicht weder sieht noch einhalten kann. Beim Einfügen eines
   Bildes landete es regelmäßig in der Überschrift.

   Hier macht das ein Float. Der ist unempfindlich: Das Bild darf an jeder
   Stelle innerhalb der Kachel stehen, Überschrift und Absätze fließen daneben.
   Es gibt kein inneres div, das kaputtgehen könnte.

   Markup — flach, drei Ebenen weniger:

     <div class="mh-kachel mh-primary mh-person">
       <img src="images/…/foto.png" alt="" loading="lazy" />
       <h3>2 · Regionalgruppe Hamburg</h3>
       <p>Sabine Kroß · <a href="…">Kontakt</a></p>
     </div>

   Ohne Foto einfach das img weglassen — die Kachel funktioniert weiter.
   Zwei Ansprechpersonen: zwei img nacheinander, sie stehen dann nebeneinander.

   Größe und Rundung kommen aus dem CSS, nicht aus width/height im Markup.
   Damit ist es egal, welche Maße der Bildmanager einträgt.

   Vereinsfarben nach PR-Leitfaden:
     Primär      #b1003c Rot        #004476 Blau
     Sekundär    #efccd8 Rosa       #eaf5fd Hellblau
                 #f3f3f3 Grau       #333333 Anthrazit
     Akzent      #ffc866 Gold       #fae2a3 Gold hell    #fff5e0 Creme
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1 — Die Kachel
   flow-root schließt den Float ein, ohne Clearfix-Hilfskonstruktion.
   ---------------------------------------------------------------------------- */

.mh-person {
    display: flow-root;
}

.mh-person> :first-child {
    margin-top: 0;
}

.mh-person> :last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------------------------
   2 — Das Porträt
   Maße stehen hier, damit falsche width/height-Angaben im Markup nichts
   ausrichten. object-fit rettet außerdem hochformatige Fotos: sie werden
   mittig beschnitten statt zur Ellipse gequetscht.
   ---------------------------------------------------------------------------- */

.mh-person>img {
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 24px 12px 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    background: var(--mh-flaeche-blau);
}

/* Zweites Porträt bei zwei Ansprechpersonen — etwas enger angesetzt */
.mh-person>img+img {
    margin-left: -4px;
}


/* ----------------------------------------------------------------------------
   2b — Text bleibt neben dem Bild, statt es zu umfließen

   Standardverhalten eines Floats: Der Text umfließt das Bild zeilenweise.
   Ist ein Absatz länger als das Bild hoch, rutschen die übrigen Zeilen unter
   das Bild — in schmalen Spalten sieht das aus wie ein Fehler.

   flow-root macht aus jedem Textelement einen eigenen Block-Formatierungs-
   kontext. Ein solcher Block darf sich nicht mit einem Float überschneiden,
   also wird er schmaler und bleibt als geschlossene Spalte daneben stehen.
   Kein zusätzliches div, keine Spalten in der Spalte — die Redaktion sieht
   im JCE weiterhin nur Bild, Überschrift, Absatz nebeneinander.

   Gilt für alle Kinder außer den Bildern, damit auch zwei Porträts
   nebeneinander weiter funktionieren.
   ---------------------------------------------------------------------------- */

.mh-person> :not(img) {
    display: flow-root;
}


/* ----------------------------------------------------------------------------
   3 — Variante „klein“
   Zusatzklasse an der Kachel, wenn viele Einträge untereinander stehen und
   die Seite sonst zu lang wird.
   ---------------------------------------------------------------------------- */

.mh-person--klein>img {
    width: 96px;
    height: 96px;
    margin-right: 20px;
}


/* ----------------------------------------------------------------------------
   5 — Kleine Bildschirme
   Unter 768px steht das Foto über dem Text — daneben bliebe für den Namen
   sonst kaum Platz.
   ---------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .mh-person>img {
        float: none;
        display: block;
        margin: 0 0 16px;
    }

    .mh-person>img+img {
        margin-left: 0;
    }
}


/* ----------------------------------------------------------------------------
   6 — Druck
   ---------------------------------------------------------------------------- */

@media print {
    .mh-person {
        break-inside: avoid;
    }

    .mh-person>img {
        width: 120px;
        height: 120px;
    }
}

/* ============================================================================
   M — EINSTIEGSKACHEL der Startseite
   Einbau: Astroid → Template Options → Custom Code → Custom CSS

   ZWECK: Die drei großen Einstiege im Herobereich. Weiße Fläche, alles
   zentriert, farbiger Icon-Kreis der über die Oberkante ragt, roter Balken
   als Abschluss unten.

   Abgrenzung zu den bestehenden Kacheln:
     mh-kachel + mh-primary/-secondary/-accent   farbige Fläche, linksbündig,
                                                 für Inhalte im Fließtext
     mh-startkachel                              weiß, zentriert, mit Icon-
                                                 Kreis, nur für die Startseite

   Markup — flach, alles direkte Kinder:

     <div class="mh-startkachel">
       <img src="images/…/icon-verstehen.svg" alt="" width="64" height="64" />
       <h3>Ich möchte Marfan verstehen</h3>
       <p>Symptome, Diagnose, ähnliche Erkrankungen und häufige Fragen.</p>
       <p><a href="…">Zur Übersicht</a></p>
     </div>

   Die mittlere Kachel bekommt zusätzlich mh-startkachel--rot, dann ist ihr
   Icon-Kreis magenta statt blau.

   Das Icon ist ein Bild, kein Icon-Font. Grund: Ein leeres <i>-Tag räumt der
   JCE beim Speichern regelmäßig weg, ein <img> nicht. Und die Redaktion kann
   es über den Bildmanager tauschen.

   Zwei Anforderungen an die Icon-Dateien:
     — Die Zeichnung ist weiß, der Hintergrund durchsichtig. Den farbigen
       Kreis macht das CSS. So lässt sich die Farbe hier zentral ändern und
       ein neues Icon muss nur weiß sein, sonst nichts.
     — Das Motiv sitzt mittig in einer viewBox von 0 0 64 64 und hat ringsum
       acht Pixel Luft. Ohne diesen Rand stößt die Zeichnung an die Kante und
       wirkt im Kreis angeschnitten.

   Die Kacheln füllen die Höhe ihrer Astroid-Spalte aus und richten ihre Links
   auf einer Linie aus, auch wenn ein Text länger ist als die anderen.

   Beim Überfahren hebt sich die Kachel um sechs Pixel und der Schatten wird
   weicher. Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat,
   bekommt nur den Schattenwechsel — siehe Abschnitt 6.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1 — Die Kachel
   flex mit Spaltenrichtung, damit der Link unten andocken kann.

   Kein overflow: hidden mehr. Der Icon-Kreis ragt über die Oberkante hinaus
   und würde sonst abgeschnitten.

   Der rote Abschluss unten ist ein echter border-bottom, kein ::after. Ein
   sechs Pixel hoher Kasten mit sechzehn Pixel Eckenradius wird vom Browser
   heruntergerechnet und franst an den Ecken aus. Als Rahmen folgt der Balken
   sauber der Rundung.

   margin-top schafft den Platz für den überstehenden Kreis. Ohne diesen
   Abstand rutscht der Kreis in die Astroid-Zeile darüber.
   ---------------------------------------------------------------------------- */

.mh-startkachel {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: 56px;
    padding: 0 32px 34px;
    background: #ffffff;
    border-bottom: 6px solid var(--mh-magenta);
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 6px 24px rgba(var(--mh-blau-rgb), .10);
    transition: box-shadow .18s ease, transform .18s ease;
}

.mh-startkachel:hover {
    box-shadow: 0 10px 32px rgba(var(--mh-blau-rgb), .16);
    transform: translateY(-6px);
}


/* ----------------------------------------------------------------------------
   2 — Der Icon-Kreis

   Der Kreis wird komplett am <img> gebaut: background macht die Farbfläche,
   padding hält das Motiv von der Kante weg, border ist der weiße Ring zur
   Kachel hin, border-radius rundet alles.

   box-sizing: border-box heißt, die 96px sind das Außenmaß inklusive Ring und
   Innenabstand. Die Zeichenfläche ist damit 96 − 2×5 − 2×14 = 58px, das Motiv
   darin rund 44px.

   margin-top: -52px zieht den Kreis über die Oberkante. Etwas mehr als die
   Hälfte steht heraus.
   ---------------------------------------------------------------------------- */

.mh-startkachel>img {
    display: block;
    box-sizing: border-box;
    width: 96px;
    height: 96px;
    margin: -52px auto 20px;
    border: 5px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(var(--mh-blau-rgb), .22);
    object-fit: contain;
}

.mh-startkachel--rot>img {
    background: var(--mh-magenta);
    box-shadow: 0 6px 18px rgba(var(--mh-magenta-rgb), .22);
}


/* ----------------------------------------------------------------------------
   3 — Überschrift und Text
   ---------------------------------------------------------------------------- */

.mh-startkachel h2,
.mh-startkachel h3 {
    margin: 0 0 14px;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mh-blau);
}

.mh-startkachel p {
    margin: 0 0 12px;
    font-family: 'Noto Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--mh-text-leise);
}


/* ----------------------------------------------------------------------------
   4 — Der Link
   Das letzte Element wird nach unten geschoben. Dadurch stehen die Links
   aller drei Kacheln auf einer Linie, egal wie lang die Texte sind.
   ---------------------------------------------------------------------------- */

.mh-startkachel> :last-child {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 20px;
}

.mh-startkachel a:not([class]) {
    color: var(--mh-magenta);
    font-family: 'Noto Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

.mh-startkachel a:not([class]):hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.mh-startkachel a:not([class]):focus-visible {
    outline: 3px solid var(--mh-fokus);
    outline-offset: 3px;
    border-radius: 2px;
}


/* ----------------------------------------------------------------------------
   5 — Reihe ohne Kopfabstand
   Direkt unter dem Hero ist der Abstand von 56px oben erwünscht. Braucht man
   ihn woanders nicht, kommt diese Klasse an die umgebende Astroid-Section.
   Der Kreis ragt dann in die Kachel hinein statt darüber hinaus.
   ---------------------------------------------------------------------------- */

.mh-startkachel-reihe--eng .mh-startkachel {
    margin-top: 0;
    padding-top: 52px;
}

.mh-startkachel-reihe--eng .mh-startkachel>img {
    margin-top: -52px;
}


/* ----------------------------------------------------------------------------
   7 — Bewegung reduzieren
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mh-startkachel {
        transition: none;
    }

    .mh-startkachel:hover {
        transform: none;
    }
}


/* ----------------------------------------------------------------------------
   8 — Kleine Bildschirme
   Kleinerer Kreis, weniger Überstand, sonst wird der Kopf zu dominant.
   ---------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .mh-startkachel {
        margin-top: 48px;
        padding: 0 24px 28px;
    }

    .mh-startkachel>img {
        width: 80px;
        height: 80px;
        margin: -44px auto 16px;
    }

    .mh-startkachel.mh-startkachel h2,
    .mh-startkachel.mh-startkachel h3 {
        font-size: 21px;
    }
}


/* ----------------------------------------------------------------------------
   9 — Druck
   ---------------------------------------------------------------------------- */

@media print {
    .mh-startkachel {
        box-shadow: none;
        border: 1px solid #666666;
        border-bottom: 3px solid #666666;
        break-inside: avoid;
    }

    .mh-startkachel>img {
        border-color: #666666;
        box-shadow: none;
    }
}


/* ============================================================================
   N — REGIONALGRUPPEN-KACHEL

   Weiße Zeile mit blauem Balken links, Ortsmarke, Gruppenname, Ansprechperson
   und Kontakt-Button. Für die Teaserliste mit fünf Gruppen und für die
   Vollseite verwendbar.

   Flaches Markup — die Kachel hat nur direkte Kinder:

       <div class="mh-regio">
         <h3>Regionalgruppe Hamburg</h3>
         <p>Regionalsprecherin: Sabine Kroß</p>
         <a class="btn-outline-primary" href="...">Kontakt</a>
       </div>

   Die Ortsmarke ist ein ::before am Container, kein eigenes Element. Ihre Farbe
   steckt in der Data-URI und lässt sich deshalb NICHT über eine Variable
   steuern — bei einer Farbänderung müssen die beiden %23-Werte unten mit
   angepasst werden (hell #004476, dunkel #e8ecef).

   Die Klasse steht doppelt, wo Überschriften betroffen sind: Abschnitt A
   greift mit (0-2-1) auf jedes h3, eine einfache .mh-regio h3 (0-1-1) würde
   verlieren. Dieser Abschnitt muss deshalb nach Abschnitt A stehen.
   ============================================================================ */

.mh-regio-liste {
    display: grid;
    gap: .75rem;
    margin-block: 0 1.5rem;
}

.mh-regio {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
    row-gap: .15rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background: rgb(255, 255, 255);
    border: 1px solid var(--mh-rahmen-grau);
    border-left: 5px solid rgb(var(--mh-blau-rgb));
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--mh-blau-rgb), .08);
}

/* ----------------------------------------------------------------------------
   1 — Ortsmarke
   ---------------------------------------------------------------------------- */

.mh-regio::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--mh-flaeche-blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23004476'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
}

/* ----------------------------------------------------------------------------
   2 — Text
   ---------------------------------------------------------------------------- */

.mh-regio.mh-regio h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.3;
    letter-spacing: normal;
    color: rgb(var(--mh-blau-rgb));
}

.mh-regio p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: .95rem;
    line-height: 1.4;
    color: var(--mh-text-leise);
}

/* ----------------------------------------------------------------------------
   3 — Button
   Kompakter als der Standard-Button, sonst sprengt er die Zeile.
   ---------------------------------------------------------------------------- */

.mh-regio>a {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    padding: .6rem 1.1rem;
    font-size: .95rem;
    white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   4 — Variante: Leitung vakant
   Gedämpfter Balken und hohle Marke, passend zum hohlen Punkt auf der Karte.
   ---------------------------------------------------------------------------- */

.mh-regio--vakant {
    border-left-color: var(--mh-rahmen-blau);
}

.mh-regio--vakant::before {
    background-image: none;
    background-color: rgb(255, 255, 255);
    border: 2px solid var(--mh-rahmen-blau);
}

.mh-regio--vakant.mh-regio--vakant h3 {
    color: var(--mh-text-leise);
}


/* ----------------------------------------------------------------------------
   6 — Kleine Bildschirme
   Button rutscht unter den Text und wird volle Breite.
   ---------------------------------------------------------------------------- */

@media (max-width: 575.98px) {

    .mh-regio {
        grid-template-columns: auto 1fr;
        padding: .875rem 1rem;
    }

    .mh-regio>a {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: stretch;
        text-align: center;
        margin-top: .75rem;
    }
}

/* ----------------------------------------------------------------------------
   7 — Druck
   ---------------------------------------------------------------------------- */

@media print {

    .mh-regio {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000000;
    }

    .mh-regio>a {
        display: none;
    }
}


/* ============================================================================
   O — TESTIMONIAL (Astroid-Element „Testimonials")
   Einbau: Astroid → Template Options → Custom Code → Custom CSS
 
   ZWECK: Das Astroid-Testimonial-Element auf die Optik der Landingpage v18
   bringen: Foto links in fester Spalte, Zitat rechts auf weißer Fläche,
   goldenes Anführungszeichen, gerundete Kachel mit weichem Schatten.
 
   SO WIRD ES GESETZT
   ------------------
   Im Page Builder: Element „Testimonials" → Einstellungen → Advanced →
   CSS-Klasse (customclass) = mh-testimonial
 
   Wichtig: Das Element muss auf EINE Spalte stehen (row-cols … 1). Bei zwei
   oder drei Spalten pro Reihe ist für Foto plus Zitat nebeneinander kein
   Platz — dann greift ab 768px das gestapelte Layout, sieht aber gedrängt aus.
   Mehrere Testimonials untereinander sind kein Problem, jedes wird zur
   eigenen breiten Kachel.
 
   DAS MARKUP KOMMT VOM ELEMENT, WIR ÄNDERN ES NICHT
   -------------------------------------------------
     div.astroid-testimonials.mh-testimonial
       div.astroid-grid.row
         div#testimonial-…
           div.card.rounded-3
             div.card-body.order-1
               div.as-author-avatar   → img          Foto
               div.as-author-message  → p            Zitat
               h3.as-author-name                     Name
               div.as-author-designation             Zusatz („Mitglied seit …")
 
   Alle vier Textbausteine sind direkte Kinder von .card-body. Deshalb liegt
   das Raster auf .card-body und nicht auf .card — sonst ließe sich das Foto
   nicht neben den Text ziehen.
 
   WAS DAS ELEMENT NICHT KANN
   --------------------------
   Einen Link am Fuß der Kachel („Weitere Erfahrungsberichte lesen →") gibt es
   im Astroid-Element nicht. Der Verweis kommt als eigener Button unter dem
   Element — nicht per CSS erzeugen, sonst ist er weder pflegbar noch für
   Screenreader korrekt.
 
   Die Breite (v18: 1200px) und die Abstände nach oben und unten regelt die
   umgebende Astroid-Section, nicht diese Datei.
 
   ZWEI STELLEN MIT !important — UND WARUM
   ---------------------------------------
   1. Bootstrap-Utilities: .rounded-3 an der Karte setzt den Eckenradius mit
      !important. Ohne Gegengewicht bleibt es bei 8px statt 16px.
   2. Das Element schreibt eigene Regeln mit seiner Modul-ID, z.B.
      #t-658efc… .as-author-avatar > img { max-width: 200px; }. Eine ID
      schlägt jede Klassenkombination — hier hilft nur !important.
 
   Daraus folgt für die Element-Einstellungen: Felder für Schriftgröße,
   Schriftfarbe und Bildbreite im Testimonial-Element leer lassen. Was dort
   gesetzt wird, landet als ID-Regel im Seiten-CSS und überschreibt diese
   Datei stillschweigend.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1 — Die Kachel
   Rahmen weg, Radius auf 16px, weicher Schatten in Vereinsblau statt Schwarz.
   overflow: hidden ist Pflicht: ohne das schneidet der Radius das Foto nicht
   ab, weil das Bild in einem eigenen Kind steckt.
   ---------------------------------------------------------------------------- */

.mh-testimonial .card {
    border: 0;
    border-radius: 16px !important;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 32px rgba(0, 68, 118, .13);
}


/* ----------------------------------------------------------------------------
   2 — Das Raster
   Fünf Zeilen, davon zwei dehnbare außen: dadurch sitzt der Textblock
   senkrecht mittig neben dem Foto, egal wie kurz das Zitat ist.
   Das Foto zieht sich über alle fünf Zeilen.
   ---------------------------------------------------------------------------- */

.mh-testimonial .card-body {
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
        "bild ."
        "bild zitat"
        "bild name"
        "bild rolle"
        "bild .";
    gap: 0;
    padding: 0;
}


/* ----------------------------------------------------------------------------
   3 — Das Foto
   Das Element bringt schon position-relative und overflow-hidden mit. Das
   Bild wird darin absolut aufgespannt — so füllt es die Spalte vollständig,
   unabhängig vom Seitenverhältnis der Datei.
   object-position: center top, damit bei Porträts der Kopf im Bild bleibt.
   ---------------------------------------------------------------------------- */

.mh-testimonial .as-author-avatar {
    grid-area: bild;
    width: 100%;
    min-height: 380px;
    margin: 0;
}

.mh-testimonial .as-author-avatar img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center top;
    display: block;
}


/* ----------------------------------------------------------------------------
   4 — Die Textspalte
   Innenabstand an den drei Textbausteinen statt an der Spalte — eine
   Rasterspalte selbst kann kein padding haben.
   ---------------------------------------------------------------------------- */

.mh-testimonial .as-author-message,
.mh-testimonial .as-author-name,
.mh-testimonial .as-author-designation {
    margin: 0;
    padding-inline: clamp(28px, 3.5vw, 48px);
    text-align: left;
}

.mh-testimonial .as-author-message {
    grid-area: zitat;
    margin-bottom: 24px;
    padding-top: clamp(36px, 4vw, 52px);
}

.mh-testimonial .as-author-name {
    grid-area: name;
}

.mh-testimonial .as-author-designation {
    grid-area: rolle;
    padding-bottom: clamp(36px, 4vw, 52px);
}


/* ----------------------------------------------------------------------------
   5 — Das Anführungszeichen
   Rein dekorativ. Der zweite Teil von content (/ "") sagt Screenreadern,
   dass hier nichts vorzulesen ist.
   ---------------------------------------------------------------------------- */

.mh-testimonial .as-author-message::before {
    content: "\201E"/ "";
    display: block;
    margin-bottom: 24px;
    color: #ffc866;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 84px;
    line-height: .7;
    user-select: none;
}


/* ----------------------------------------------------------------------------
   6 — Das Zitat
   ---------------------------------------------------------------------------- */

.mh-testimonial .as-author-message p {
    margin: 0;
    color: #333333;
    font-family: 'Noto Sans', system-ui, sans-serif;
    font-size: clamp(18px, 1.5vw, 21px);
    font-style: italic;
    line-height: 1.7;
}


/* ----------------------------------------------------------------------------
   7 — Name und Zusatz
   Der Name ist im Element eine h3. Die globale Überschriftenskala würde ihn
   viel zu groß setzen, deshalb hier auf Zeilengröße zurückgeholt.
   ---------------------------------------------------------------------------- */

.mh-testimonial .as-author-name {
    color: #004476;
    font-family: 'Noto Sans', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.mh-testimonial .as-author-designation {
    margin-top: 3px;
    color: var(--mh-text-leise);
    font-family: 'Noto Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}


/* ----------------------------------------------------------------------------
   9 — Kleine Bildschirme
   Unter 768px steht das Foto oben in festem Seitenverhältnis, damit es nicht
   den halben Bildschirm füllt. Die fr-Zeilen entfallen, gestapelt braucht es
   keine senkrechte Zentrierung.
   ---------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .mh-testimonial .card {
        border-radius: 14px !important;
    }

    .mh-testimonial .card-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "bild"
            "zitat"
            "name"
            "rolle";
    }

    .mh-testimonial .as-author-avatar {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .mh-testimonial .as-author-message::before {
        font-size: 64px;
    }
}


/* ----------------------------------------------------------------------------
   10 — Druck
   ---------------------------------------------------------------------------- */

@media print {
    .mh-testimonial .card {
        border: 1px solid #666666;
        box-shadow: none;
        break-inside: avoid;
    }

    .mh-testimonial .card-body {
        grid-template-columns: 200px 1fr;
    }

    .mh-testimonial .as-author-avatar {
        min-height: 0;
    }

    .mh-testimonial .as-author-message::before {
        color: #999999;
    }

    .mh-testimonial .as-author-name,
    .mh-testimonial .as-author-designation {
        color: #000000;
    }
}


/* ============================================================================
   P — META-ZEILE der Beitrags-Karten (Astroid Articles Modul)
   Einbau: Astroid → Template Options → Custom Code → Custom CSS

   Stand: 17. August 2026 — Fassung 2, Kategorie als Pille

   VORHER
     📁 Kategorie: Verein
     📅 Veröffentlicht: 04. November 2021

   NACHHER
     ( Verein )   4. November 2021
     Kategorie als hellblaue Pille (#eaf5fd), Datum klein und grau daneben.

   KEINE NEUE KLASSE.
   Diese Datei stylt ausschließlich Markup, das das Astroid-Modul selbst
   erzeugt. Es ist also nichts in NEUE-CSS-KLASSEN.md einzutragen und nichts
   im JCE zu konfigurieren.


   ZWEI SPRACHÜBERSCHREIBUNGEN SIND NÖTIG — ohne sie bleibt „Veröffentlicht:"
   stehen, weil Joomla das Wort INNERHALB des <time>-Elements ausgibt und CSS
   dort nicht trennen kann.

   System → Sprachüberschreibungen → Deutsch (DE) — Site → Neu:

     Konstante   COM_CONTENT_PUBLISHED_DATE_ON
     Text        %s

   Optional, macht aus „04. November" ein „4. November":

     Konstante   DATE_FORMAT_LC3
     Text        %-d. %B %Y

   (Unter Windows-Servern statt %-d das %#d verwenden.)


   DAS MARKUP, auf das sich alles bezieht (aus dem Inspektor):

     <dl class="astroid-article-info before-title as-gutter-x-lg">
       <dt class="article-info-term">Details</dt>
       <dd class="category-name">
         <span class="icon-folder-open icon-fw" aria-hidden="true"></span>
         Kategorie:
         <span>Verein</span>
       </dd>
       <dd class="published">…<time datetime="…">…</time></dd>
     </dl>

   Vereinsfarben nach PR-Leitfaden:
     Primär      #b1003c Rot        #004476 Blau
     Sekundär    #efccd8 Rosa       #eaf5fd Hellblau
                 #f3f3f3 Grau       #333333 Anthrazit
     Akzent      #ffc866 Gold       #fae2a3 Gold hell    #fff5e0 Creme
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1 — Die Zeile selbst

   Der Selektor steht doppelt (.astroid-article-info.astroid-article-info).
   Grund: Astroid setzt die Schriftgröße über „.astroid-articles
   .astroid-article-info" — zwei Klassen, also Spezifität 0-2-0. Ein einfacher
   Selektor würde verlieren. Die Verdopplung hebt uns auf dieselbe Stufe, ohne
   dass wir uns auf den Namen des Eltern-Containers verlassen müssen. Der
   ändert sich zwischen Astroid-Versionen erfahrungsgemäß eher als die Klasse
   am Element selbst.

   align-items: center statt baseline — sobald die Kategorie eine Fläche mit
   Innenabstand bekommt, ist die Grundlinie der falsche Bezug. Zentriert sitzt
   das Datum mittig zur Pille.
   ---------------------------------------------------------------------------- */

.astroid-article-info.astroid-article-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    font-family: 'Noto Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mh-text-leise);
}


/* ----------------------------------------------------------------------------
   2 — „Details" ausblenden

   Das <dt> ist eine reine Strukturangabe. Es verschwindet optisch, bleibt
   aber im Dokument — deshalb die Screenreader-Technik statt display:none.
   ---------------------------------------------------------------------------- */

.astroid-article-info .article-info-term {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ----------------------------------------------------------------------------
   3 — Icons raus

   Ordner und Kalender kommen aus der Icon-Schrift des Templates, gesetzt über
   ::before an einem <span class="icon-…">. Neben einer farbigen Pille wären
   sie doppelte Auszeichnung.
   ---------------------------------------------------------------------------- */

.astroid-article-info [class*="icon-"] {
    display: none;
}


/* ----------------------------------------------------------------------------
   4 — Das Label „Kategorie:" ausblenden

   ACHTUNG, das ist ein Kniff und soll auch so benannt sein:
   Das Wort steht als nackter Textknoten direkt im <dd>, ohne eigenes Element.
   Rein über CSS ist es deshalb nur erreichbar, indem man die Schriftgröße am
   <dd> auf 0 setzt und sie am Kindelement wieder herstellt.

   Das ist kein Barrierefreiheits-Problem: font-size:0 blendet nur optisch aus,
   Screenreader lesen „Kategorie: Verein" weiterhin vollständig vor.

   Beim Datum funktioniert derselbe Trick NICHT — dort steckt „Veröffentlicht:"
   im <time>-Element selbst. Dafür die Sprachüberschreibung im Kopf dieser Datei.
   ---------------------------------------------------------------------------- */

.astroid-article-info dd {
    margin: 0;
    font-size: 0;
}

.astroid-article-info dd>span,
.astroid-article-info dd>a,
.astroid-article-info dd>time {
    font-size: 14px;
}


/* ----------------------------------------------------------------------------
   5 — Die Kategorie-Pille

   Hellblau #eaf5fd als Fläche, Vereinsblau #004476 als Schrift: 9,1:1
   Kontrast, weit über der AA-Schwelle von 4,5:1 — bleibt also auch in der
   kleinen Größe gut lesbar.

   13px statt 14px, damit die Pille trotz Innenabstand nicht höher baut als
   die Datumszeile. Das leichte letter-spacing verhindert, dass kurze Wörter
   wie „Verein" in der Fläche gedrängt wirken.

   Die Regel greift am <dd>, nicht am inneren <span>. So sitzt die Fläche
   sicher um den ganzen Eintrag, egal ob die Kategorie verlinkt ist oder nicht.
   ---------------------------------------------------------------------------- */

.astroid-article-info .category-name {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    background: #eaf5fd;
    color: #004476;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .015em;
}

.astroid-article-info .category-name>span,
.astroid-article-info .category-name>a {
    font-size: 13px;
    color: inherit;
}


/* ----------------------------------------------------------------------------
   6 — Verlinkte Kategorie

   Greift nur, wenn „Kategorie verlinken" in den Beitragsoptionen auf Ja steht.
   Die ganze Pille wird zur Klickfläche, der Hover dunkelt die Fläche ab statt
   eine Unterlinie einzuziehen — eine Unterstreichung in einer Pille sieht
   nach Fehler aus.
   ---------------------------------------------------------------------------- */

.astroid-article-info .category-name a {
    display: inline-flex;
    align-items: center;
    margin: -4px -11px;
    padding: 4px 11px;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .15s ease;
}

.astroid-article-info .category-name a:hover {
    background: #d3e9f9;
}

.astroid-article-info .category-name a:focus-visible {
    outline: 3px solid #b1003c;
    outline-offset: 2px;
}


/* ----------------------------------------------------------------------------
   7 — Das Datum

   Bewusst ohne Fläche und ohne Icon: es ist die schwächere der beiden
   Angaben und soll das auch aussehen. var(--mh-text-leise) auf Weiß ergibt 5,3:1 und
   liegt über der AA-Schwelle. Ein helleres Grau käme auf rund 3,8:1 und
   fiele durch — deshalb bleibt es bei diesem Wert.

   tabular-nums sorgt für bündige Ziffern, wenn mehrere Karten nebeneinander
   stehen.
   ---------------------------------------------------------------------------- */

.astroid-article-info .published {
    font-weight: 400;
    color: var(--mh-text-leise);
}

.astroid-article-info .published>time,
.astroid-article-info .published>span {
    font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------------------------
   9 — Kleine Bildschirme
   ---------------------------------------------------------------------------- */

@media (max-width: 575.98px) {

    .astroid-article-info.astroid-article-info {
        font-size: 13px;
        column-gap: 10px;
        margin-bottom: 12px;
    }

    .astroid-article-info dd>span,
    .astroid-article-info dd>a,
    .astroid-article-info dd>time {
        font-size: 13px;
    }

    .astroid-article-info .category-name {
        padding: 3px 9px;
        font-size: 12px;
    }

    .astroid-article-info .category-name>span,
    .astroid-article-info .category-name>a {
        font-size: 12px;
    }

    .astroid-article-info .category-name a {
        margin: -3px -9px;
        padding: 3px 9px;
    }
}


/* ----------------------------------------------------------------------------
   10 — Reduzierte Bewegung
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .astroid-article-info .category-name a {
        transition: none;
    }
}


/* ----------------------------------------------------------------------------
   11 — Druck

   Hintergrundflächen druckt kaum ein Browser standardmäßig mit. Statt auf
   print-color-adjust zu hoffen, wird die Pille auf dem Papier zu einem
   schlichten Rahmen.
   ---------------------------------------------------------------------------- */

@media print {

    .astroid-article-info.astroid-article-info {
        color: #000000;
    }

    .astroid-article-info .category-name {
        background: none;
        border: 1px solid #000000;
        color: #000000;
    }

    .astroid-article-info .published {
        color: #000000;
    }
}

/* ============================================================================
   Q — TERMINKACHELN der Startseite
   Einbau: Astroid → Template Options → Custom Code → Custom CSS

   ZWECK: Die Ausgabe des DPCalendar-Moduls „Nächste Veranstaltungen" als
   dreispaltiges Kachelraster, so wie der Abschnitt „Die nächsten Termine"
   auf Marfan-Landingpage-v18.html: weiße Fläche, weicher Schatten, farbiger
   Balken an der Oberkante, kleines Datum in Versalien, Titel, Ort, Button.

   Die Klassen kommen NICHT aus dem JCE. Sie stehen im Feld „Custom Output"
   der Moduloptionen (Layout = Custom). Die Redaktion fasst sie nicht an.

   Abgrenzung:
     mh-startkachel   weiß, zentriert, Icon-Kreis — die drei Einstiege oben
     mh-termin        weiß, linksbündig, Farbbalken oben — Veranstaltungen

   Markup, das das Modul erzeugt (siehe dpcalendar-termine-output.txt):

     <div class="mh-termine">
       <article class="mh-termin" style="border-top-color:#b1003c">
         <p class="mh-termin-datum">08.–10. Mai 2026</p>
         <h3 class="mh-termin-titel"><a href="…">Marfan-Tag 2026</a></h3>
         <p class="mh-termin-ort">Fulda</p>
         <div class="mh-termin-teaser">Kurzer Anrisstext …</div>
         <p class="mh-termin-aktion"><a href="…">Zum Termin</a></p>
       </article>
     </div>

   Die Balkenfarbe kommt aus der Kalenderfarbe in DPCalendar, nicht aus dem
   CSS. Wer sie ändern will, ändert sie am Kalender. Fehlt sie, greift die
   Rückfallfarbe in Abschnitt 2.

   Vereinsfarben nach PR-Leitfaden:
     Primär      #b1003c Rot        #004476 Blau
     Sekundär    #efccd8 Rosa       #eaf5fd Hellblau
                 #f3f3f3 Grau       #333333 Anthrazit
     Akzent      #ffc866 Gold       #fae2a3 Gold hell    #fff5e0 Creme
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1 — Das Raster
   auto-fit statt fester Spaltenzahl: bei zwei Terminen stehen zwei Kacheln
   nebeneinander, bei vier bricht die vierte um. Unter 320px pro Spalte wird
   einspaltig gestapelt, das erledigt minmax ohne Media Query.
---------------------------------------------------------------------------- */

.mh-termine {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 10px 0 0;
}


/* ----------------------------------------------------------------------------
   2 — Die Kachel
   flex mit Spaltenrichtung, damit der Button unten andockt und alle Buttons
   einer Reihe auf einer Linie sitzen, auch wenn ein Titel zweizeilig wird.

   Der farbige Balken ist ein border-top, kein ::before. Damit kann DPCalendar
   ihn über das style-Attribut einfärben, ohne dass wir eine Klasse je Farbe
   brauchen. border-top-color steht hier als Rückfall, falls der Kalender
   keine Farbe gesetzt hat.
---------------------------------------------------------------------------- */

.mh-termin {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
    border-top: 4px solid #004476;
    padding: 28px 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}


/* ----------------------------------------------------------------------------
   3 — Datum
   Versalien, gesperrt, klein. Rot ist die Signalfarbe für „das steht an".
   Kein margin-top, das Datum ist das erste Element.
---------------------------------------------------------------------------- */

.mh-termine .mh-termin p.mh-termin-datum {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #004476;
}


/* ----------------------------------------------------------------------------
   4 — Titel
   Der Titel ist ein Link auf die Detailseite. Die Farbe sitzt am h3 und wird
   vom a geerbt, damit auch ein späterer Umbau ohne Link gleich aussieht.

   ACHTUNG SPEZIFITÄT — der Grund für die lange Selektorkette:
   Astroid setzt weiter oben in dieser Datei eine Grundregel für Überschriften:

     .astroid-framework.astroid-framework h3 {
       font-size: clamp(1.375rem, 1.2125rem + .69vw, 1.75rem);
       margin-block: 1.5em .45em;
     }

   Das sind rund 42px Luft über jedem h3 und 28px Schriftgröße — in der Kachel
   sah das aus wie ein Layoutfehler. Die Regel hat die Spezifität 0-2-1 und
   schlägt ein schlichtes .mh-termin-titel (0-1-0), egal wie weit hinten es
   steht. Deshalb hier .mh-termine .mh-termin h3.mh-termin-titel (0-3-1).
   Kein !important — das würde nur den nächsten Sonderfall verbauen.

   Aus demselben Grund tragen auch die Absätze in den Abschnitten 2b, 3, 5
   und 6 die volle Kette mit vorangestelltem p.
---------------------------------------------------------------------------- */

.mh-termine .mh-termin h3.mh-termin-titel {
    margin-block: 8px 6px;
    margin-inline: 0;
    font-size: 1.15rem;
    line-height: 1.3;
    color: #004476;
}

.mh-termin-titel a {
    color: inherit;
    text-decoration: none;
}

.mh-termin-titel a:hover,
.mh-termin-titel a:focus-visible {
    text-decoration: underline;
}


/* ----------------------------------------------------------------------------
   5 — Ort
---------------------------------------------------------------------------- */

.mh-termine .mh-termin p.mh-termin-ort {
    margin: 0 0 12px;
    padding-bottom: 0;
    font-size: 0.9rem;
    color: #555555;
}


/* ----------------------------------------------------------------------------
   5b — Teaser
   Kommt aus {{{description_truncated}}} und ist deshalb ein div, kein p: der
   Text bringt eigene Absätze mit, und ein p in einem p wirft der Browser
   stillschweigend auseinander.

   Die inneren Absätze bekommen ihre Abstände hier zurückgesetzt, sonst wirkt
   die Astroid-Grundregel für p und die Kachel läuft auseinander.

   -webkit-line-clamp ist die zweite Verteidigungslinie. Gekürzt wird schon
   serverseitig über die Moduloption „Beschreibungslimit"; die Klammer hier
   fängt nur den Fall ab, dass ein Termin trotzdem länger gerät und eine
   Kachel höher wird als die Nachbarn. Drei Zeilen, dann Auslassungspunkte.
   Wer das nicht will, löscht die vier Zeilen ab display: -webkit-box.
---------------------------------------------------------------------------- */

.mh-termine .mh-termin .mh-termin-teaser {
    margin: 0 0 12px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #555555;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mh-termine .mh-termin .mh-termin-teaser p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Der Weiterlesen-Link, den description_truncated anhängt. Bewusst schlicht:
   der eigentliche Ruf zur Handlung ist der Button unten, zwei konkurrierende
   Buttons in einer Kachel führen nur zu Ratlosigkeit. */

.mh-termine .mh-termin .mh-termin-teaser a {
    color: #004476;
    font-weight: 600;
    text-decoration: underline;
}


/* ----------------------------------------------------------------------------
   6 — Button
   Der Absatz ist nur Träger, der Button ist das a. Farbe in Rot wie auf der
   Landingpage. Wer lieber Blau möchte, ändert background und border unten.
---------------------------------------------------------------------------- */

/* margin-top: auto schiebt den Button an die Unterkante der Kachel. Der Trick
   sitzt hier und nicht mehr am Ort: so bleiben die Buttons einer Reihe auf
   einer Linie, egal ob ein Termin Ort und Teaser hat oder keins von beidem. */

.mh-termine .mh-termin p.mh-termin-aktion {
    margin: auto 0 0;
    padding-top: 16px;
}

.mh-termin-aktion a {
    display: inline-block;
    background: #004476;
    color: #ffffff;
    padding: 10px 20px;
    border: 2px solid #004476;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
}

.mh-termin-aktion a:hover {
    background: var(--mh-blau-tief);
    color: rgb(255, 255, 255);
}

.mh-termin-aktion a:focus-visible {
    outline: 3px solid #004476;
    outline-offset: 2px;
}


/* ----------------------------------------------------------------------------
   7 — Bewegung
   Anheben beim Überfahren, wie bei mh-startkachel. Wer im Betriebssystem
   „Bewegung reduzieren" eingestellt hat, bekommt nur den Schattenwechsel.
---------------------------------------------------------------------------- */

.mh-termin {
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.mh-termin:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .mh-termin {
        transition: box-shadow 200ms ease;
    }

    .mh-termin:hover {
        transform: none;
    }
}


/* ----------------------------------------------------------------------------
   8 — Leermeldung
   Greift, wenn im gewählten Zeitraum kein Termin liegt. Text kommt aus der
   Moduloption „No Events Text".
---------------------------------------------------------------------------- */

.mh-termine-leer {
    margin: 10px 0 0;
    color: #555555;
    font-style: italic;
}



/* ============================================================================
   R — KARTE DER REGIONALGRUPPEN

   Über der Deutschlandkarte liegen Herzen als echte Links. Ein Klick führt
   auf die Seite der jeweiligen Gruppe mit Ansprechperson, Treffpunkt und
   Kontaktformular.

   WARUM NICHT IN DER SVG: Links innerhalb einer SVG wirken nur, wenn die
   Datei inline im Dokument steht. Als <img> eingebunden — und so bindet der
   JCE Bilder ein — bleiben sie folgenlos. Deshalb liegen die Herzen als HTML
   darüber und skalieren prozentual mit dem Bild mit.

   Bilddatei: karte-deutschland.svg, nur noch Bundesländer, keine Marker.

   Markup — flach, alles direkte Kinder:

       <div class="mh-karte" aria-hidden="true">
         <img src="images/…/karte-deutschland.svg" alt="" />
         <a tabindex="-1" class="mh-karte-herz mh-karte-herz--hamburg" href="…">
           <span class="visually-hidden">Regionalgruppe Hamburg</span>
         </a>
         … weitere Herzen …
       </div>

   BARRIEREFREIHEIT — warum aria-hidden:
   Die Karte ist ein rein visuelles Hilfsmittel. Jede Gruppe steht unmittelbar
   darunter noch einmal in der Kontaktliste, in derselben Reihenfolge und mit
   demselben Ziel. Ohne aria-hidden stünde jede Gruppe zweimal in der
   Linkliste des Screenreaders — sechsundzwanzig Einträge für dreizehn
   Gruppen, ohne einen einzigen Zugewinn. Was die Karte zusätzlich vermittelt,
   ist die Lage im Raum, und die lässt sich als Linkliste ohnehin nicht
   abbilden; dafür steht das Einzugsgebiet als Text in den Kacheln.

   Das tabindex="-1" an jedem Herz gehört zwingend dazu. aria-hidden mit
   fokussierbaren Kindern wäre ein echter Fehler: unsichtbare Links, die man
   mit der Tabulatortaste trotzdem erreicht.

   POSITIONEN: Abschnitt 3 enthält je Gruppe eine Regel mit left und top in
   Prozent, zurückgerechnet aus den Markerkoordinaten der alten Karte
   (viewBox 521,87 × 728,58). Verschiebt sich eine Gruppe, ändert man dort
   zwei Zahlen — die SVG bleibt unangetastet.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1 — Der Rahmen
   position: relative ist die Bezugsfläche für die Herzen. max-width begrenzt
   die Karte, damit sie in breiten Spalten nicht ins Riesenhafte wächst.
   ---------------------------------------------------------------------------- */

.mh-karte {
    position: relative;
    max-width: 420px;
    margin: 0 auto 1.5rem;
}

.mh-karte img {
    display: block;
    width: 100%;
    height: auto;
}


/* ----------------------------------------------------------------------------
   2 — Das Herz

   Weißer Kreis mit rotem Herz. Der weiße Kreis ist nicht Zierde, sondern
   Kontrastträger — auf den hellblauen Landesflächen ginge ein rotes Herz
   sonst unter.

   translate(-50%, -50%) rückt den Mittelpunkt des Kreises auf die angegebene
   Koordinate. Ohne diese Verschiebung säße die linke obere Ecke dort und
   jedes Herz läge zu weit rechts unten.

   36 Pixel Durchmesser. WCAG 2.5.8 fordert 24 × 24 — erfüllt. Die beiden
   engsten Nachbarn, Ruhrgebiet und Bergisches Land, liegen bei voller
   Kartenbreite rund 43 Pixel auseinander und berühren sich damit nicht.

   Der Fokusring kommt aus Abschnitt A2 und wird hier nicht wiederholt.
   Nötig ist nur das z-index, damit der Ring nicht vom Nachbarherz
   überdeckt wird.
   ---------------------------------------------------------------------------- */

.mh-karte-herz {
    position: absolute;
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgb(255, 255, 255) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b1003c'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / 1.15rem no-repeat;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    transition: transform .15s ease, box-shadow .15s ease;
}

.mh-karte-herz:hover {
    z-index: 2;
    transform: translate(-50%, -50%) scale(1.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .32);
}

.mh-karte-herz:focus-visible {
    z-index: 2;
}

/* Sicherheitsnetz für die Beschriftungen in den Herzen.

   .visually-hidden kommt sonst von Bootstrap. Fehlt es einmal — anderes
   Template, abgespeckter Build —, stünden zwölf Gruppennamen als sichtbarer
   Text über der Karte. Diese Regel ist auf .mh-karte eingegrenzt und
   überschreibt Bootstrap nicht. */

.mh-karte .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ----------------------------------------------------------------------------
   3 — Die Positionen

   Ein Eintrag je Gruppe. left und top beziehen sich auf das Bild, nicht auf
   die Seite. Zum Verschieben genügt es, die beiden Zahlen zu ändern.

   Ruhrgebiet und Bergisches Land liegen in Wirklichkeit näher beieinander,
   als es zwei Herzen zulassen. Sie sind bewusst auseinandergerückt — das
   war schon in der alten Karte mit den Nummern so.
   ---------------------------------------------------------------------------- */

.mh-karte-herz--schleswig-holstein { left: 47.7%; top: 11.4%; }
.mh-karte-herz--hamburg            { left: 45.8%; top: 21.1%; }
.mh-karte-herz--niedersachsen      { left: 42.3%; top: 35.7%; }
.mh-karte-herz--muenster           { left: 19.6%; top: 40.3%; }
.mh-karte-herz--owl                { left: 29.2%; top: 39.8%; }
.mh-karte-herz--ruhrgebiet         { left: 10.5%; top: 44.2%; }
.mh-karte-herz--bergisches-land    { left: 15.6%; top: 50.7%; }
.mh-karte-herz--suedwestfalen      { left: 22.4%; top: 53.9%; }
.mh-karte-herz--sachsen-thueringen { left: 61.9%; top: 54.1%; }

/* Stammtisch Sachsen — Kontakt ist noch nicht angelegt. Die Position bleibt
   stehen; sobald der Kontakt existiert, genügt eine Zeile im HTML. */
.mh-karte-herz--stammtisch-sachsen { left: 86.5%; top: 52.1%; }

.mh-karte-herz--stuttgart          { left: 33.0%; top: 80.8%; }
.mh-karte-herz--albstadt           { left: 30.5%; top: 87.8%; }
.mh-karte-herz--suedbaden          { left: 16.4%; top: 89.8%; }


/* ----------------------------------------------------------------------------
   4 — Windows-Kontrastmodus

   Hintergrundbilder werden dort entfernt. Ohne diese Regel bliebe von jedem
   Herz ein unsichtbarer weißer Kreis übrig. Mit Rahmen in der Systemfarbe
   sieht man weiterhin, dass an dieser Stelle etwas anklickbar ist — als
   Kreis, nicht als Herz. Das ist der ehrliche Kompromiss: Wir zwingen dem
   System keine eigenen Farben auf, machen die Ziele aber sichtbar.
   ---------------------------------------------------------------------------- */

@media (forced-colors: active) {
    .mh-karte-herz {
        background-color: Canvas;
        border: 2px solid CanvasText;
        box-shadow: none;
    }
}


/* ----------------------------------------------------------------------------
   5 — Kleine Bildschirme

   Unterhalb von 768 Pixeln wird die Karte so schmal, dass die Herzen sich
   berühren — besonders Ruhrgebiet und Bergisches Land. Ein Fehlgriff auf die
   Nachbargruppe wäre die Folge, und der ist schlimmer als ein fehlender Weg.

   Deshalb verschwinden die Herzen dort und die Karte bleibt Orientierung.
   Die Auswahl übernimmt die Gruppenliste direkt darunter, die mit dem Daumen
   ohnehin leichter zu treffen ist.
   ---------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .mh-karte-herz {
        display: none;
    }

    .mh-karte {
        max-width: 300px;
    }
}


/* ----------------------------------------------------------------------------
   6 — Bewegung reduzieren
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mh-karte-herz {
        transition: none;
    }

    .mh-karte-herz:hover {
        transform: translate(-50%, -50%);
    }
}


/* ----------------------------------------------------------------------------
   7 — Druck
   Auf Papier führt kein Herz irgendwohin. Sie bleiben trotzdem stehen, weil
   sie zeigen, wo es Gruppen gibt.
   ---------------------------------------------------------------------------- */

@media print {
    .mh-karte {
        break-inside: avoid;
    }

    .mh-karte-herz {
        box-shadow: none;
        border: 1px solid #666666;
    }
}




/* ============================================================================
   S — KONTAKTLISTE einer Kategorie (com_contact)

   Die Ausgabe der Regionalgruppen im Marfan-Aussehen, ohne PHP-Override.
   Gestylt werden ausschließlich Klassen, die Joomla und Astroid von sich aus
   erzeugen. Es kommt KEINE neue Klasse dazu, im Markup ändert sich nichts.

   Damit entfällt die Pflege einer Override-Datei. Der Preis: Ändert Astroid
   in einer künftigen Version sein Kartenmarkup, greifen einzelne Regeln ins
   Leere. Die Seite bleibt dann lesbar, sieht aber wieder nach Bootstrap aus —
   ein kosmetischer Ausfall, kein Fehler. Nach Template-Updates einmal
   draufschauen.

   Alles ist auf .com-contact-category eingegrenzt. Karten und Listengruppen
   an anderen Stellen der Website bleiben unberührt.

   Das Markup, auf das sich die Regeln beziehen:

       <div class="row row-cols-lg-3 row-cols-md-2 row-cols-1 …">
         <div>
           <div class="card card-default">
             <a href="…">
               <img class="contact-thumbnail card-img-top" src="…" alt="…">
             </a>
             <div class="card-body">
               <h5 class="card-title"><a href="…">Regionalgruppe Hamburg</a></h5>
               <div class="card-subtitle text-body-secondary">Sabine Kroß</div>
               <ul class="fields-container">
                 <li class="field-entry einzugsgebiet">
                   <span class="field-label">Einzugsgebiet: </span>
                   <span class="field-value">Hamburg und Umland</span>
                 </li>
               </ul>
             </div>
             <ul class="list-group list-group-flush"> … </ul>
           </div>
         </div>
       </div>

   DAS PORTRÄT steht als eigener Link VOR dem Textblock, nicht darin. Deshalb
   ist die Karte ein Flexcontainer: Bild links, Text rechts. Fehlt bei einer
   Gruppe das Bild, entfällt der Link ganz — der Text nimmt dann die volle
   Breite ein, ohne Lücke. Genau deshalb Flexbox und kein Raster: Ein Raster
   würde die leere Spalte stehen lassen.

   BEKANNTE SCHWÄCHE, nur mit einem Override zu beheben:
   Joomla setzt als alt-Text des Porträts den Gruppennamen. Direkt daneben
   steht derselbe Name noch einmal als Überschrift, ebenfalls verlinkt und
   auf dasselbe Ziel. Screenreader lesen die Gruppe damit zweimal vor. Kein
   Verstoß, aber unschön. Ebenso gibt Astroid den Namen als <h5> aus, sodass
   auf <h1> unmittelbar Ebene fünf folgt.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1 — Das Raster
   Bootstrap bringt Spaltenzahl und Umbrüche schon mit, wir setzen nur die
   Abstände herunter. Die Gutter laufen in Bootstrap 5 über CSS-Variablen.
   ---------------------------------------------------------------------------- */

.com-contact-category .row {
    --bs-gutter-y: 1rem;
    --bs-gutter-x: 1rem;
}

/* Gleiche Höhe aller Karten einer Zeile. Die Spalte ist ein div ohne Klasse,
   deshalb der Kindselektor. */
.com-contact-category .row > * {
    display: flex;
}


/* ----------------------------------------------------------------------------
   2 — Die Karte
   Weiße Fläche, blauer Balken links, ruhiger Schatten — dieselbe Sprache wie
   die Kacheln im Fließtext.

   flex-wrap sorgt dafür, dass die untere Listengruppe unter Bild und Text
   rutscht statt sich danebenzustellen.
   ---------------------------------------------------------------------------- */

.com-contact-category .card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    background: rgb(255, 255, 255);
    border: 1px solid var(--mh-rahmen-grau);
    border-left: 5px solid var(--mh-blau);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--mh-blau-rgb), .08);
    transition: box-shadow .18s ease;
}

.com-contact-category .card:hover {
    box-shadow: 0 6px 18px rgba(var(--mh-blau-rgb), .14);
}


/* ----------------------------------------------------------------------------
   3 — Das Porträt

   Rund, feste Größe, Ausschnitt über object-fit. Die Bilder liegen mit
   400 × 400 Pixeln vor und werden auf 4,5 rem dargestellt — der Überschuss
   sorgt für Schärfe auf hochauflösenden Bildschirmen.

   Der weiße Ring hebt das Bild von der Kachel ab und fängt Porträts mit
   hellem Hintergrund auf, die sonst mit der Fläche verschwimmen.

   Der Fokusring kommt aus Abschnitt A2. Hier wird nur die Rundung
   nachgezogen, damit er dem Kreis folgt statt ein Rechteck zu ziehen.
   ---------------------------------------------------------------------------- */

.com-contact-category .card > a {
    flex: 0 0 auto;
    padding: 1.1rem 0 0 1.1rem;
    line-height: 0;
}

.com-contact-category .card > a:focus-visible {
    border-radius: 50%;
}

.com-contact-category .contact-thumbnail {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--mh-flaeche-blau);
    box-shadow: 0 0 0 3px rgb(255, 255, 255), 0 2px 6px rgba(var(--mh-blau-rgb), .18);
}


/* ----------------------------------------------------------------------------
   4 — Der Textblock
   flex-basis 11rem heißt: Der Text darf schrumpfen, rutscht aber unter das
   Bild, wenn die Spalte zu schmal wird. So bleibt er immer lesbar.
   ---------------------------------------------------------------------------- */

.com-contact-category .card-body {
    flex: 1 1 11rem;
    padding: 1.1rem 1.25rem;
}


/* ----------------------------------------------------------------------------
   5 — Name der Gruppe
   Der Name ist der Link zur Gruppenseite mit Kontaktformular.
   ---------------------------------------------------------------------------- */

.com-contact-category .card-title {
    margin: 0 0 .25rem;
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 700;
}

.com-contact-category .card-title a {
    color: var(--mh-blau);
    text-decoration: none;
}

.com-contact-category .card-title a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ----------------------------------------------------------------------------
   6 — Ansprechperson
   Astroid setzt hier text-body-secondary von Bootstrap. Wir überschreiben die
   Farbe mit der leisen Textfarbe des Vereins — #515a64 auf Weiß ergibt 7,0:1
   und liegt damit auch für kleine Schrift deutlich über den geforderten
   4,5:1 nach WCAG 1.4.3.
   ---------------------------------------------------------------------------- */

.com-contact-category .card-subtitle {
    margin: 0;
    font-size: .95rem;
    line-height: 1.4;
    color: var(--mh-text-leise);
}


/* ----------------------------------------------------------------------------
   7 — Die eigenen Felder
   Aufzählungszeichen weg, Beschriftung etwas kräftiger als der Wert.
   ---------------------------------------------------------------------------- */

.com-contact-category .fields-container {
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
}

.com-contact-category .field-entry {
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--mh-text-leise);
}

.com-contact-category .field-label {
    font-weight: 600;
    color: var(--mh-text);
}


/* ----------------------------------------------------------------------------
   8 — Die untere Listengruppe

   Dort landen Telefon, Stadt und Land, sofern sie im Kontakt gefüllt sind.
   Leere Einträge erzeugen sonst eine sichtbare Trennlinie ohne Inhalt.

   Steht dort etwas, ist im Kontakt ein Feld gefüllt, das laut
   Datenschutzabsprache leer bleiben soll — dann gehört es im Backend
   gelöscht, nicht hier ausgeblendet.
   ---------------------------------------------------------------------------- */

.com-contact-category .card > .list-group {
    flex: 1 0 100%;
}

.com-contact-category .list-group-item:empty {
    display: none;
}

.com-contact-category .list-group-item {
    padding: .5rem 1.25rem;
    font-size: .9rem;
    color: var(--mh-text-leise);
    border-color: var(--mh-rahmen-grau);
}


/* ----------------------------------------------------------------------------
   9 — Kategoriebeschreibung
   Sie nimmt die Einleitung und die Karte auf.
   ---------------------------------------------------------------------------- */

.com-contact-category .category-desc:not(:empty) {
    margin-bottom: 2rem;
}


/* ----------------------------------------------------------------------------
   10 — Blätterung
   Bei zwölf Gruppen bleibt der Zähler leer und erzeugt nur Leerraum.
   ---------------------------------------------------------------------------- */

.com-contact-category__counter:empty {
    display: none;
}


/* ----------------------------------------------------------------------------
   11 — Kleine Bildschirme
   ---------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .com-contact-category .contact-thumbnail {
        width: 3.75rem;
        height: 3.75rem;
    }

    .com-contact-category .card-body {
        padding: 1rem 1.1rem;
    }
}


/* ----------------------------------------------------------------------------
   12 — Bewegung reduzieren
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .com-contact-category .card {
        transition: none;
    }
}


/* ----------------------------------------------------------------------------
   13 — Druck
   ---------------------------------------------------------------------------- */

@media print {
    .com-contact-category .card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #666666;
        border-left: 3px solid #666666;
    }

    .com-contact-category .card-title a {
        color: #000000;
    }

    .com-contact-category .contact-thumbnail {
        box-shadow: none;
        border: 1px solid #666666;
    }
}