/* ============================================================
   HTb e.V. Child Template — user.css
   Basiert auf Cassiopeia (Joomla 6)
   Farben: Blau #357dc4 | Creme #fdf9f3
   Fonts:  Fraunces (Display/Headlines) | Manrope (Body)
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Manrope:wght@400;500;600;700&display=swap');

/* --- CSS Custom Properties (Brand Tokens) --- */
:root {
    --htb-blue:         #357dc4;
    --htb-blue-dark:    #2563a0;
    --htb-blue-light:   #d0e4f7;
    --htb-cream:        #fdf9f3;
    --htb-cream-dark:   #f0e8d8;
    --htb-text:         #1a1a1a;
    --htb-text-muted:   #5a5a5a;
    --htb-white:        #ffffff;

    /* Zusätzliche Marken-Töne, exakt aus dem Prototyp htb-mockup-blau.html
       übernommen (dort: --blue-deep, --blue-tint, --muted, --line).
       Werden für Header, Footer und die Story-/Galerie-Überschriften
       verwendet, um konsistent zum Prototyp zu bleiben. */
    --htb-navy:         #1e4a73;
    --htb-tint:         #e7f0f9;
    --htb-muted:        #8a7d6f;
    --htb-line:         rgba(31, 74, 115, .14);
    --htb-ink:          #2b2620;

    --htb-font-display: 'Fraunces', Georgia, serif;
    --htb-font-body:    'Manrope', system-ui, sans-serif;

    --htb-radius:       8px;
    --htb-radius-lg:    16px;
    --htb-shadow:       0 2px 12px rgba(53, 125, 196, 0.10);
    --htb-shadow-hover: 0 6px 24px rgba(53, 125, 196, 0.18);
}

/* --- Basis --- */
body {
    font-family: var(--htb-font-body);
    background-color: var(--htb-cream);
    color: var(--htb-text);
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--htb-font-display);
    font-weight: 600;
    color: var(--htb-text);
    line-height: 1.2;
}

a {
    color: var(--htb-blue);
    text-decoration: none;
}

a:hover {
    color: var(--htb-blue-dark);
    text-decoration: underline;
}

/* Fraunces-Schrift für Marke/Header (Prototyp-Klasse "fr") —
   diese Regel hatte im ersten Wurf gefehlt, daher fiel der
   Vereinsname/Leitspruch auf die Standardschrift zurück. */
.fr {
    font-family: var(--htb-font-display);
}

/* ============================================================
   Utility-Bar (schmaler blauer Streifen ganz oben)
   Inhalt kommt aus dem Custom-HTML-Modul, Position "topbar".
   ============================================================ */
.htb-utilitybar {
    background-color: var(--htb-blue);
    color: #eaf2fb;
    font-size: 13px;
}

.htb-utilitybar .htb-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.htb-utilitybar__links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 18px;
    color: #eaf2fb;
    text-decoration: none !important;
}

.htb-utilitybar__links a:hover {
    color: #ffffff;
    text-decoration: none !important;
}

.htb-utilitybar .htb-spenden {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    padding: 4px 13px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 12.5px;
    text-decoration: none !important;
}

.htb-utilitybar .htb-spenden:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    text-decoration: none !important;
}

.htb-utilitybar .htb-spenden .short { display: none; }

@media (max-width: 600px) {
    .htb-utilitybar { font-size: 11px; }
    .htb-utilitybar .htb-wrap { flex-wrap: nowrap; gap: 8px; padding-left: 14px; padding-right: 14px; }
    .htb-utilitybar__links { display: flex; gap: 12px; flex-wrap: nowrap; min-width: 0; }
    .htb-utilitybar__links a { margin-right: 0; white-space: nowrap; }
    .htb-utilitybar .htb-spenden { padding: 4px 11px; white-space: nowrap; flex: none; }
    .htb-utilitybar .htb-spenden .long { display: none; }
    .htb-utilitybar .htb-spenden .short { display: inline; }
}

/* ============================================================
   Header (cremefarben, sticky): Marke links, Navigation rechts.
   Marke ist fest im Code (index.php), Navigation ist das
   bestehende Joomla-Menümodul, Position "menu".
   ============================================================ */
.htb-header {
    background-color: var(--htb-cream);
    border-bottom: 1px solid var(--htb-line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.htb-header__wrap {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    min-height: 0 !important;
}

.htb-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.htb-brand__logo {
    height: 54px;
    width: auto;
    display: block;
}

.htb-brand__name {
    font-size: 21px;
    font-weight: 600;
    color: var(--htb-navy);
    letter-spacing: -.01em;
}

.htb-brand__tagline {
    font-size: 12.5px;
    font-style: italic;
    color: var(--htb-muted);
    max-width: 430px;
    line-height: 1.35;
    margin-top: 2px;
}

/* --- Navigation ----------------------------------------------
   LAYOUT = JOOMLA-BORDMITTEL. Cassiopeia bringt die waagerechte
   Darstellung und das Hamburger-Menue selbst mit; sein CSS haengt
   am Selektor ".container-header .mod-menu" (siehe index.php).
   Deshalb hier KEINE eigenen display/flex/list-style-Regeln mehr –
   die haben Cassiopeias Logik ausgehebelt und das Menue senkrecht
   gemacht. Wir setzen ausschliesslich Farbe, Schrift und Abstand.
   (Gleiches Prinzip wie bei der sigplus-Galerie.)
   ------------------------------------------------------------ */

/* Cassiopeias dunklen Header-Hintergrund neutralisieren,
   damit unser cremefarbener Header sichtbar bleibt. */
.container-header.htb-header {
    background-color: var(--htb-cream);
    background-image: none;
}

/* ------------------------------------------------------------
   Ab hier exakt auf den echten, per Browser-Konsole geprüften
   Joomla-Code zugeschnitten (Layout "Collapsible Dropdown",
   MetisMenu-Ausgabe). Das <ul> traegt real diese vier Klassen:
   class="mod-menu mod-menu_dropdown-metismenu metismenu mod-list"
   Diese Mehrfach-Klassen-Kombination wird in den Selektoren unten
   bewusst wiederholt, damit unsere Regeln in der Spezifitaet
   sicher gegen Cassiopeias eigenes CSS gewinnen.
   ------------------------------------------------------------ */

/* Abstand: kompakt und fest, statt Cassiopeias space-between/stretch.
   Zusaetzlich .container-nav selbst am Wachsen hindern - sonst
   dehnt sich der Wrapper aus und drueckt die Marke zum
   Zeilenumbruch. */
.htb-header__wrap > .container-nav {
    flex: 0 0 auto !important;
}

.htb-header .mod-menu.mod-list {
    gap: 22px !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Die einzelnen <li> duerfen ebenfalls keinen Eigenabstand haben,
   sonst kommt er zum gap hinzu. */
.htb-header .mod-menu.mod-list > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

/* Menüpunkte: einfache Links (Tiervermittlung, Zuhause gefunden, Kontakt) */
/* Cassiopeia gibt jedem Menue-Link/-Button ein eigenes Padding.
   Das addiert sich zum gap und blaeht das Menue auf (gemessen:
   698px statt ~590px), wodurch die Marke zusammengedrueckt wird
   und der Leitspruch umbricht. Padding hier auf 0 - dadurch ist
   gap:22px der einzige Abstand, exakt wie im Prototyp (nav{gap:22px}).
   Gilt nur fuer die 1. Ebene; das Untermenue behaelt sein Padding. */
.htb-header .navbar,
.htb-header .container-nav {
    padding: 0 !important;
}

.htb-header .mod-menu.mod-list > li > a {
    color: var(--htb-ink) !important;
    font-family: var(--htb-font-body);
    font-weight: 400 !important;
    font-size: 15px;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
    transition: color 0.15s;
}

/* Menüpunkte MIT Untermenü (Verein, Helfen) sind <button>-Elemente,
   keine <a>-Links - eigene Regel dafür nötig. */
.htb-header .mod-menu.mod-list > li > button.mod-menu__heading {
    color: var(--htb-ink) !important;
    font-family: var(--htb-font-body);
    font-weight: 400 !important;
    font-size: 15px;
    background: none !important;
    border: none;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
    transition: color 0.15s;
}

.htb-header .mod-menu.mod-list > li > a:hover,
.htb-header .mod-menu.mod-list > li > button.mod-menu__heading:hover {
    color: var(--htb-blue) !important;
    background: none !important;
    text-decoration: none;
}

/* Aktiv-Zustand: das Kennzeichen sitzt am <li> (class="... current active"),
   NICHT am <a> selbst - deshalb li.active/li.current statt a.active.
   Bewusst nur Farbe, kein font-weight: fett verschiebt sonst den Rest
   des Menüs, da die Schrift dann mehr Platz braucht. */
.htb-header .mod-menu.mod-list > li.active > a,
.htb-header .mod-menu.mod-list > li.current > a,
.htb-header .mod-menu.mod-list > li > a[aria-current="page"] {
    color: var(--htb-blue) !important;
}

/* --- Dropdown-Untermenü (mm-collapse, MetisMenu) --- */
.htb-header .mod-menu.mod-list .mm-collapse {
    background-color: #f2f1ef !important;
    border: 1px solid rgba(31,74,115,.08);
    border-radius: var(--htb-radius);
    box-shadow: var(--htb-shadow);
    padding: 0.4rem 0;
    list-style: none;
}

.htb-header .mod-menu.mod-list .mm-collapse a {
    color: var(--htb-ink) !important;
    font-family: var(--htb-font-body);
    font-weight: 400;
    font-size: 15px;
    padding: 0.5rem 1rem;
    display: block;
    text-decoration: none !important;
}

.htb-header .mod-menu.mod-list .mm-collapse a:hover {
    background-color: var(--htb-blue-light) !important;
    color: var(--htb-blue-dark) !important;
    text-decoration: none;
}

/* ------------------------------------------------------------
   Mobiles Hamburger-Menü (Breakpoint navbar-expand-lg = 991.98px,
   siehe echter Code: <nav class="navbar navbar-expand-lg">).

   Off-Canvas-Schublade: Das aufgeklappte Menü ist KEIN schwebendes
   Kästchen mehr, sondern ein bildschirmhohes Panel, das von rechts
   einfährt (analog zur alten Website). Grund für den Umbau: Bei
   groesserer Systemschrift (iOS "Text vergroessern") wuchs die
   vorherige Karte ueber den unteren Bildschirmrand hinaus - die
   letzten Punkte im Untermenue "Helfen" (Sachspenden, Kosten
   Auslandshund) waren nicht mehr erreichbar. Das Panel hat daher
   eine feste max-height (100dvh) mit eigenem Scrollen; egal wie
   gross Text oder Untermenue werden, der Inhalt bleibt erreichbar.

   Rahmen (Position, Hoehe, Slide-Animation, Scroll, Backdrop) ist
   CSS. Das Ein-/Ausklappen selbst (Hamburger-Klick, Untermenue als
   Akkordeon) bleibt vollstaendig Joomla-/Bootstrap-Bordmittel
   (navbar-collapse, MetisMenu) - siehe zugehoeriges Script in
   index.php, das nur das Backdrop-Element sowie die Scroll-Sperre
   des Seiteninhalts steuert. */
/* ------------------------------------------------------------
   Backdrop-Grundzustand GLOBAL (nicht nur mobil!):
   Das Element wird von unserem JS bereits beim Laden der Seite
   erzeugt und in den Header eingehaengt - unabhaengig von der
   Bildschirmbreite. Ohne diese Regel hier (ausserhalb des
   @media-Blocks) hatte das Element am Desktop KEINE
   pointer-events-Eigenschaft und blockierte dadurch unsichtbar
   die gesamte Seite inkl. anderer Modals (z. B. das
   Datenschutz-Modal am Kontaktformular liess sich nicht mehr
   bedienen). Grundzustand daher immer "nicht klickbar"; erst
   die mobile is-open-Regel (im Media-Query weiter unten) schaltet
   es bei geoeffnetem Menue auf klickbar. */
.htb-nav-backdrop {
    pointer-events: none;
}

@media (max-width: 991.98px) {
    /* Sticky im Hamburger-Modus: Cassiopeia setzt .container-header unter
       992px auf position:relative und schlaegt mit diesem Selektor unsere
       einfache .htb-header-Regel. Deshalb hier spezifischer
       (.container-header.htb-header) + !important, damit der Header auch
       mobil klebt. top:0 explizit mitgefuehrt. Nur der Header klebt; die
       Utility-Bar darueber bleibt im Fluss und scrollt normal weg. */
    .container-header.htb-header {
        position: sticky !important;
        top: 0 !important;
        /* Hebt den gesamten Header-Stacking-Context (und damit die
           darin liegende Schublade + Backdrop) verlaesslich ueber den
           restlichen Seiteninhalt. Panel (z-index:40) und Backdrop
           (z-index:39) stapeln INNERHALB dieses Kontextes korrekt
           gegeneinander - deshalb muss das Backdrop per JS auch in den
           Header eingehaengt werden, nicht an <body>. */
        z-index: 1000 !important;
    }

    /* iPhone/Tablet-Header: Das Hamburger-Icon (.container-nav mit dem
       navbar-toggler) aus dem Flex-Fluss nehmen und rechts unten auf
       Tagline-Höhe verankern. Dadurch gibt es rechts kein Flex-Geschwister
       mehr, .htb-brand dehnt sich auf die volle Wrap-Breite und der
       Vereinsname "Hoffnungsvolle Tierblicke e.V." bekommt die ganze
       Zeile -> kein Umbruch mehr. .htb-header__wrap ist der Positionsbezug.

       Stellhebel für die Feinjustierung am Gerät:
       -> top     = vertikale Höhe des Icons. Ziel: Oberkante des Icons
                    etwa auf Höhe der ersten Tagline-Zeile. Größer = tiefer.
       -> right: 24px hält das Icon bündig mit dem übrigen Content
                    (24px = seitliches .htb-wrap-Padding).
       Der Name darf die volle Breite nutzen (Icon sitzt darunter); nur die
       Tagline liegt auf Icon-Höhe und bekommt deshalb rechts Platz frei
       (padding-right), damit ihr Text nicht hinter dem Icon durchläuft. */
    .htb-header__wrap {
        position: relative;
    }

    .htb-brand {
        width: 100%;
    }

    .htb-brand__tagline {
        padding-right: 56px;
    }

    .htb-header .container-nav {
        position: absolute;
        right: 24px;
        top: 32px;
    }

    /* Hamburger-Symbol (nur mobil): kompakt und rahmenlos, drei Striche
       kräftig in Navy – die Striche allein tragen die Erkennbarkeit als
       Menü. Reduziertes Padding und fehlender Rahmen nehmen den wuchtigen
       "Kasten"; min-width/-height halten die Tap-Fläche komfortabel bei
       >=42px, display:flex zentriert die Striche sauber im Button.
       WICHTIG: Diese Regeln (v.a. display:flex) MÜSSEN im Mobile-Block
       bleiben. Stünden sie ohne Breitengrenze, würden sie Cassiopeias
       "auf Desktop ausblenden" (display:none ab 992px) überstimmen und der
       Button erschiene faelschlich neben dem Hauptmenü. */
    .htb-header .navbar-toggler {
        color: var(--htb-navy);
        border: none;
        padding: 6px 9px;
        min-width: 42px;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 41;
    }

    /* --- Off-Canvas-Panel ---------------------------------------
       Bildschirmhoch, rechts angedockt, fest positioniert (nicht an
       den Header gebunden), damit es unabhaengig vom Scroll-Stand
       der Seite immer den vollen Viewport hoch ist. 100dvh statt
       100vh, damit mobile Browser-UI-Leisten (Adresszeile etc.)
       nicht zu Ueberlappung fuehren. overflow-y:auto = der Kern der
       Barrierefreiheits-Korrektur: waechst der Inhalt (grosse
       Systemschrift, aufgeklapptes Untermenue) ueber die Bildschirm-
       hoehe hinaus, scrollt das Panel selbst statt Inhalt abzu-
       schneiden. transform place/hide statt display:none, damit die
       Slide-Animation greift; Bootstrap steuert weiterhin die Klasse
       "show" auf .navbar-collapse, wir uebersetzen sie nur in
       Transform statt Hoehen-Animation. */
    .htb-header .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        width: 72vw;
        max-width: 320px;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--htb-cream);
        border-left: 1px solid var(--htb-line);
        box-shadow: var(--htb-shadow-hover);
        /* Seitliches Padding hier bewusst 0: Den seitlichen Abstand
           tragen ab jetzt die Menuepunkte selbst (Haupt- wie Unterpunkte
           bekommen dieselben seitlichen 22px). Dadurch sind Hauptmenue
           und aufgeklapptes Untermenue automatisch exakt gleich breit -
           ohne negative Margins, die bei jeder Panelbreiten-Aenderung neu
           justiert werden muessten. Oben 88px (haelt den Header-/Icon-
           Bereich frei), unten 32px bleiben unveraendert. */
        padding: 88px 0 32px;
        margin: 0;
        transform: translateX(100%);
        transition: transform .28s ease;
        display: block !important;
    }

    .htb-header .navbar-collapse.show {
        transform: translateX(0);
    }

    /* Bootstrap animiert Collapse normalerweise über eine Höhen-
       Transition (.collapsing); die wollen wir hier nicht, weil das
       Panel schon per transform gleitet - sonst ruckelt es doppelt. */
    .htb-header .navbar-collapse.collapsing {
        transition: transform .28s ease;
        height: 100dvh !important;
    }

    /* Abdunkelung hinter dem Panel. Wird per JS (index.php) ein-
       gefuegt und mit der Klasse "is-open" sichtbar geschaltet, wenn
       navbar-collapse die Klasse "show" traegt. Liegt unter dem
       Panel (z-index 39 < 40), aber ueber dem restlichen Seiten-
       inhalt. Klick auf das Backdrop schliesst das Menue (JS). */
    .htb-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 39;
        background: rgba(20, 30, 45, .6);
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease;
    }

    .htb-nav-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Solange das Menue offen ist, darf die Seite dahinter nicht
       scrollen (Klasse wird per JS auf <body> gesetzt). */
    body.htb-nav-open {
        overflow: hidden;
    }

    .htb-header .mod-menu.mod-list {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }

    .htb-header .mod-menu.mod-list > li {
        border-bottom: 1px solid var(--htb-line);
    }

    .htb-header .mod-menu.mod-list > li:last-child {
        border-bottom: none;
    }

    .htb-header .mod-menu.mod-list > li > a,
    .htb-header .mod-menu.mod-list > li > button.mod-menu__heading {
        display: flex;
        width: 100%;
        padding: 13px 22px !important;
        font-size: 16px;
        justify-content: space-between;
    }

    .htb-header .mod-menu.mod-list .mm-collapse {
        box-shadow: none;
        border: none;
        /* Dunklere Creme wie der Footer (nicht das Bläuliche der
           Start-/Hundeseiten), damit sich das aufgeklappte Untermenue
           vom cremefarbenen Panel absetzt. */
        background: #f5f0e8 !important;
        /* Volle Panelbreite ohne Tricks: Das Panel hat seitlich kein
           Padding mehr, also fuellt das Untermenue ohnehin die ganze
           Breite. Kein negativer Margin, kein Radius - die Flaeche
           laeuft randlos von Kante zu Kante, exakt so breit wie die
           Hauptpunkte darueber. width:100% ist dabei entscheidend:
           ohne diese Angabe rechnet der Browser die Breite nach dem
           breitesten Untermenue-Eintrag ("Kosten Auslandshund") und
           das <ul> ragt bei schmalem Panel rechts ueber die Kante
           hinaus. Mit width:100% + box-sizing:border-box bleibt es
           exakt in der Panelbreite. */
        width: 100%;
        box-sizing: border-box;
        border-radius: 0;
        margin: 0 0 10px;
    }

    /* Innenabstand der Untermenue-Links: seitlich dieselben 22px wie bei
       den Hauptpunkten, damit die Beschriftungen (Patentiere usw.) buendig
       darunter stehen und nicht an der Panelkante kleben. */
    .htb-header .mod-menu.mod-list .mm-collapse a {
        padding: 10px 22px;
    }
}

/* ============================================================
   Footer: Inhalt kommt aus dem Custom-HTML-Modul, Position "footer".
   4-spaltiger Bereich + schmale Fußleiste, Klassen werden im
   Modul-Inhalt selbst verwendet (siehe Anleitung).
   ============================================================ */
.htb-footer {
    background-color: var(--htb-tint);
    color: #5a554d;
    padding: 56px 0 26px;
    border-top: 1px solid var(--htb-line);
}

/* Footer-Farblogik laut Prototyp (htb-helfen-kastrationspate.html):
   Startseite und Hundedetailseiten nutzen die blaue Tönung oben.
   Allgemeine Inhaltsseiten (Impressum, Datenschutz, Kontakt,
   Helfen-Unterseiten usw.) bekommen stattdessen eine abgedunkelte
   Cremefarbe. Die Klasse "htb-webseite" wird per kleinem Skript in
   webseite.php gesetzt (Joomlas eigener $layout-Parameter spiegelt
   die am Beitrag gewählte "Layout"-Option NICHT wider - geprüft
   und bestätigt per Konsolen-Ausgabe von document.body.className). */
body.htb-webseite .htb-footer {
    background-color: #f5f0e8;
}

.htb-footer .htb-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr 1.1fr;
    gap: 34px;
}

.htb-footer h4 {
    color: var(--htb-navy);
    font-family: var(--htb-font-display);
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 14px;
}

.htb-footer a { color: #3a5572; text-decoration: none !important; }
.htb-footer a:hover { color: var(--htb-blue); text-decoration: none !important; }

.htb-footer .htb-footer__name {
    font-family: var(--htb-font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--htb-navy);
    margin-bottom: 8px;
}

.htb-footer .htb-footer__about {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

.htb-footer .htb-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.htb-footer .htb-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid var(--htb-line);
    color: var(--htb-blue);
    transition: all .15s ease;
}

.htb-footer .htb-footer__social a:hover {
    background: var(--htb-blue);
    border-color: var(--htb-blue);
    color: #fff;
}

.htb-footer .htb-footer__social svg { width: 20px; height: 20px; }

.htb-footer .htb-footer__ct {
    font-size: 14px;
    line-height: 1.9;
    margin: 0 0 10px;
}

.htb-footer .htb-footer__iban {
    font-size: 14px;
    color: #5a554d;
    margin: 6px 0 0;
    line-height: 1.9;
}

.htb-footer .htb-footer__note {
    font-size: 12px;
    color: var(--htb-muted);
    margin-top: 8px;
    line-height: 1.5;
}

.htb-footer .htb-footer__paypal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--htb-blue);
    color: #fff;
    padding: 11px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    margin-top: 8px;
}

.htb-footer .htb-footer__paypal:hover {
    background: var(--htb-blue-dark);
    color: #fff;
    text-decoration: none !important;
}

.htb-footer .htb-footer__bar {
    border-top: 1px solid var(--htb-line);
    margin-top: 36px;
    padding-top: 18px;
    font-size: 12.5px;
    color: var(--htb-muted);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 880px) {
    .htb-footer .htb-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

@media (max-width: 520px) {
    .htb-footer .htb-footer__grid { grid-template-columns: 1fr; }
}

/* --- Hauptinhalt --- */
#sp-component,
.com-content,
main {
    background-color: var(--htb-cream);
}

.item-page,
.blog,
.category-list {
    padding: 1.5rem 0;
}

/* --- Buttons --- */
.btn-primary,
a.btn-primary {
    background-color: var(--htb-blue);
    border-color: var(--htb-blue);
    color: var(--htb-white);
    font-family: var(--htb-font-body);
    font-weight: 600;
    border-radius: var(--htb-radius);
    padding: 0.55rem 1.4rem;
    transition: background 0.2s, box-shadow 0.2s;
}

.btn-primary:hover,
a.btn-primary:hover {
    background-color: var(--htb-blue-dark);
    border-color: var(--htb-blue-dark);
    box-shadow: var(--htb-shadow-hover);
}

.btn-outline-primary {
    border-color: var(--htb-blue);
    color: var(--htb-blue);
    border-radius: var(--htb-radius);
    font-weight: 600;
}

.btn-outline-primary:hover {
    background-color: var(--htb-blue);
    color: var(--htb-white);
}

/* --- Karten (Hunde-Grid) --- */
.card {
    background-color: var(--htb-white);
    border: none;
    border-radius: var(--htb-radius-lg);
    box-shadow: var(--htb-shadow);
    transition: transform 0.22s, box-shadow 0.22s;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--htb-shadow-hover);
}

.card-title {
    font-family: var(--htb-font-display);
    font-weight: 600;
    color: var(--htb-text);
}

.card-img-top {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}

/* --- Footer --- */
#sp-footer,
footer.footer {
    background-color: var(--htb-blue-dark);
    color: var(--htb-white);
    font-family: var(--htb-font-body);
    font-size: 0.875rem;
    padding: 2.5rem 0 1.5rem;
}

#sp-footer a,
footer.footer a {
    color: var(--htb-blue-light);
}

#sp-footer a:hover,
footer.footer a:hover {
    color: var(--htb-white);
    text-decoration: underline;
}

/* --- Breadcrumbs --- */
.breadcrumb {
    background: transparent;
    font-size: 0.85rem;
    color: var(--htb-text-muted);
}

.breadcrumb-item a {
    color: var(--htb-blue);
}

.breadcrumb-item.active {
    color: var(--htb-text-muted);
}

/* --- Seitentitel --- */
.page-header h1,
.com-content-article h1.article-title,
.blog h2.page-header {
    font-family: var(--htb-font-display);
    color: var(--htb-text);
    font-size: 2rem;
    margin-bottom: 1.2rem;
}

/* --- Allgemeine Utility-Klassen --- */
.htb-blue   { color: var(--htb-blue); }
.htb-bg     { background-color: var(--htb-cream-dark); }
.text-muted { color: var(--htb-text-muted) !important; }

/* ============================================================
   HTb Hunde-Karten-Grid (com_content/category/blog_item)
   ============================================================ */

/* Grid-Container. blog.php erzeugt für die Karten die Container
   .com-content-category-blog__items bzw. .blog-items. Genau diese
   werden zum CSS-Grid gemacht. Die älteren Selektoren .items-row /
   .items-leading bleiben als Rückfall erhalten.

   Die Breitenbegrenzung richtet das Grid an derselben zentrierten
   Spalte aus wie Hero und Info-Banner (.htb-wrap: max 1120px, 24px
   Innenabstand). blog.php selbst hat keinen .htb-wrap-Container. */
.com-content-category-blog__items,
.blog-items,
.blog .items-row,
.blog .items-leading {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin: 0 auto 36px;
    max-width: 1120px;
    padding: 0 24px;
}

/* Eine Karte */
.htb-card {
    background: #fffdf9;
    border: 1px solid rgba(31,74,115,.14);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.htb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(30,74,115,.12);
}
.htb-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Quadratisches Foto */
/* container-type: inline-size macht das Foto zum Größen-Container, damit die
   Reserviert-Banderole ihre cqi-Maße aus der Kartenbreite ableiten kann. */
.htb-card__photo {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #e7f0f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9db4cd;
    overflow: hidden;
    container-type: inline-size;
}
.htb-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .35s ease;
}
.htb-card:hover .htb-card__photo img {
    transform: scale(1.06);
}

/* Platzhalter-Pfote */
.htb-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Reserviert-Banderole */
/* Reserviert-Banderole. Sitzt diagonal in der oberen rechten Ecke des
   quadratischen Foto-Containers (.htb-card__photo hat overflow:hidden,
   das den überstehenden Teil sauber abschneidet -> echte Ecken-Banderole).
   Nur im Hunde-Grid verwendet – die Detailseite zeigt den Reserviert-
   Status bewusst nur über das Status-Panel, nicht über diese Banderole.

   Alle Maße sind in cqi (Container Query Units) definiert, also in Prozent
   der Kartenbreite. .htb-card__photo ist dazu als Größen-Container gesetzt
   (container-type: inline-size). Dadurch behält die Banderole auf jedem
   Gerät automatisch dasselbe Größenverhältnis wie am Desktop – abgeleitet
   von der Referenz ~251px Karte: 200px -> 80cqi, 17px -> 6.8cqi, 30px ->
   12cqi, -54px -> -21.5cqi, 9px -> 3.6cqi. Kein Nachjustieren pro
   Breakpoint mehr nötig. */
.htb-ribbon {
    position: absolute;
    top: 12cqi;
    right: -21.5cqi;
    width: 80cqi;
    background: var(--htb-blue);
    color: #fff;
    font-size: 6.8cqi;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    padding: 3.6cqi 0;
    transform: rotate(45deg);
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    z-index: 2;
}

/* Kartenunterschrift */
.htb-card__body {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.htb-card__name {
    font-family: var(--htb-font-display);
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0;
    color: #1a1a1a;
}
/* Patentier-Übersicht: 3 Spalten statt 4 wie beim Hundegitter.
   Joomla setzt am <body> eine Klasse mit der Kategorie-ID
   (…view-category…itemid…); zuverlässiger ist hier der Container
   der Kategorie 11, den blog.php ausgibt. Die Breakpoints weiter
   unten (2 bzw. 1 Spalte) gelten unverändert für beide Gitter. */


.htb-card__arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e7f0f9;
    border: 1px solid rgba(31,74,115,.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--htb-blue);
    flex: none;
    font-size: 16px;
    transition: background .15s, color .15s;
}
.htb-card:hover .htb-card__arrow {
    background: var(--htb-blue);
    color: #fff;
}

/* Responsive */
/* Spaltenzahl für ALLE Kartengitter (Startseite + Patentiere), sauber
   in drei Stufen, ohne Zwischensprünge:
     - über 900px  (Desktop/Laptop)          -> 4 Spalten (Grunddefinition)
     - 600–900px   (schmaler Desktop/Tablet) -> 3 Spalten
     - unter 600px (Smartphone hochkant)     -> 2 Spalten
   Frühere Fassung sprang von 4 direkt auf 2 (880px) mit einer
   Landscape-Sonderregel bei 820px – das ergab am Desktop unlogische
   Sprünge. Jetzt vereinheitlicht. */
@media (max-width: 900px) {
    .com-content-category-blog__items,
    .blog-items,
    .blog .items-row,
    .blog .items-leading {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}
@media (max-width: 600px) {
    .com-content-category-blog__items,
    .blog-items,
    .blog .items-row,
    .blog .items-leading {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ============================================================
   HTb Hunde-Detailseite
   ============================================================ */

/* Wrapper */
.htb-detail {
    background: #fdf9f3;
}
.htb-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Breadcrumb */
.htb-crumbs {
    font-size: 13.5px;
    color: #8a7d6f;
    padding: 22px 0 0;
}
.htb-crumbs a { color: #357dc4; }
.htb-crumbs a:hover { text-decoration: underline; }
.htb-crumbs span { margin: 0 9px; opacity: .55; }

/* Oberer Block */
.htb-dtop { padding: 24px 0 6px; }
.htb-ptop {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
    gap: 42px;
    align-items: start;
}
.htb-ptop > * { min-width: 0; }

/* Hauptbild */
.htb-hauptbild {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(31,74,115,.14);
    background: #e7f0f9;
}
.htb-hauptbild img { width: 100%; height: auto; display: block; }
.htb-hauptbild__placeholder {
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9db4cd;
}

/* Steckbrief */
.htb-pside { display: flex; flex-direction: column; gap: 14px; }
.htb-dname {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 44px;
    line-height: 1.08;
    color: #1e4a73;
    margin: 0;
}

/* Status */
.htb-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e7f0f9;
    border: 1px solid rgba(31,74,115,.14);
    color: #1e4a73;
    padding: 7px 14px;
    border-radius: 24px;
    font-size: 13.5px;
    align-self: flex-start;
}
.htb-status__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #5aa02a;
    flex: none;
}
.htb-status--reserviert {
    background: #fff3e0;
    border-color: rgba(180,80,0,.2);
    color: #b45000;
}

/* Fakten */
.htb-facts {
    border: 1px solid rgba(31,74,115,.14);
    border-radius: 16px;
    background: #fffdf9;
    overflow: hidden;
}
.htb-facts__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(31,74,115,.14);
    font-size: 14.5px;
}
.htb-facts__row:last-child { border-bottom: 0; }
.htb-facts__k { color: #8a7d6f; }
.htb-facts__v { color: #2b2620; font-weight: 500; }

/* Gesundheit */
.htb-health {
    background: #e7f0f9;
    border: 1px solid rgba(31,74,115,.14);
    border-radius: 12px;
    padding: 0 0 16px;
}
.htb-health__list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 18px;
    margin: 0; padding: 0 18px;
}
.htb-health__list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    color: #1e4a73;
    font-weight: 500;
}
.htb-health__list svg { color: #357dc4; flex: none; }

/* Galerie */
.htb-galerie {
    padding: 32px 0 8px;
    border-top: 1px solid rgba(31,74,115,.14);
    margin-top: 32px;
}
.htb-eyebrow {
    color: #357dc4;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 16px;
}

/* Einheitliche Überschrift für Foto- und Videobereich der Hunde-
   Detailseite. Die obere Trennlinie/der Abstand kommt bereits vom
   umgebenden Block (.htb-galerie bzw. .htb-story) - hier daher
   bewusst keine eigene Trennlinie, um Doppelung zu vermeiden.
   Der Video-Block liegt in .htb-story - dessen ".htb-story h2"-
   Regel (30px) ist spezifischer, daher hier gezielt erneut mit
   gleicher Spezifität überschrieben. */
/* Gemeinsamer Rahmen für Foto- und Video-Block: einheitliche
   Trennlinie/Abstand, unabhängig davon ob .htb-galerie oder
   .htb-story als Basisklasse mitläuft. */
.htb-media-block {
    border-top: 1px solid rgba(31,74,115,.14) !important;
    padding-top: 32px !important;
    margin-top: 32px !important;
}

.htb-media-heading {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 22px;
    color: #1e4a73;
    margin: 0 0 32px;
}

.htb-story h2.htb-media-heading {
    font-size: 22px;
    margin: 0 0 32px;
}

/* Story */
.htb-story { padding: 40px 0 24px; }
.htb-story h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 30px;
    color: #1e4a73;
    margin: 0 0 16px;
}
.htb-story h2 em { font-style: italic; color: #357dc4; }
.htb-story p {
    font-size: 16.5px;
    color: #5a554d;
    max-width: 720px;
    margin: 0 0 16px;
    line-height: 1.75;
}

/* Spendenbedarf */
.htb-needs {
    background: #e7f0f9;
    border: 1px solid rgba(31,74,115,.14);
    border-radius: 14px;
    padding: 18px 22px;
    margin: 28px 0 32px;
}
.htb-needs p { font-size: 15.5px; color: #1e4a73; margin: 0 0 12px; font-weight: 500; }
.htb-needs ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.htb-needs li {
    background: #fff;
    border: 1px solid rgba(31,74,115,.14);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 14.5px;
    color: #1e4a73;
    font-weight: 500;
}
.htb-needs li a { color: #357dc4; text-decoration: none; font-weight: 600; }
.htb-needs li a:hover { text-decoration: underline; }

/* Adopt-Band */
.htb-adopt { background: #1e4a73; padding: 56px 0; }
.htb-adopt h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 30px;
    color: #fff;
    margin: 0 0 10px;
}
.htb-adopt h2 em { font-style: italic; color: #9cc0e6; }
.htb-adopt p { color: #bcd2e6; font-size: 16px; max-width: 620px; margin: 0 0 26px; line-height: 1.7; }
.htb-adopt__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.htb-btn {
    padding: 13px 22px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.htb-btn--light { background: #fff; color: #1e4a73; }
.htb-btn--light:hover { background: #eaf2fb; }

/* Umrandete Variante für DUNKLE Bänder (z. B. .htb-adopt).
   Gegenstück zu .htb-btn--ghost, das für helle Flächen gedacht ist
   (dunkelblau auf transparent) und auf dunklem Grund unsichtbar wäre. */
a.htb-btn--outline-light,
.htb-adopt .htb-btn--outline-light {
    background: transparent;
    border: 1.6px solid #fff;
    color: #fff;
    text-decoration: none;
}
a.htb-btn--outline-light:hover,
.htb-adopt .htb-btn--outline-light:hover {
    background: #fff;
    color: #1e4a73;
    border-color: #fff;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 620px) {
    .htb-ptop { grid-template-columns: 1fr; }
    .htb-dname { font-size: 34px; }
}

/* ============================================================
   Cassiopeia-Grid für den Hauptinhaltsbereich neutralisieren
   Grund: Cassiopeia legt um <main> einen eigenen
   .grid-child.container-component mit eigener max-width/Padding.
   Das addiert sich mit unserem .htb-wrap und verschiebt/verschmälert
   den Inhalt gegenüber dem Prototyp. Ab jetzt bestimmt NUR noch
   .htb-wrap die Breite/Zentrierung der Detailseiten-Bereiche.
   Betrifft NUR den Content-Bereich, nicht die Kopfzeile
   (.header .grid-child bleibt unverändert – kommt in eigener Phase).
   ============================================================ */

.site-grid {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.grid-child.container-component {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   Generische Artikelansicht (com_content/article/default.php)
   Gilt für ALLE Kategorien außer Hunde (nutzt default_8.php).
   Layout nach Prototyp htb-helfen-kastrationspate.html.
   ============================================================ */

/* Seitentitel-Bereich */
.htb-page-hero {
    padding: 26px 0 0;
}
.htb-page-hero .htb-wrap {
    max-width: 780px;
}
.htb-page-hero h1 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 46px;
    line-height: 1.08;
    color: #1e4a73;
    margin: 10px 0 12px;
}

/* Optionaler Untertitel (Custom Field "untertitel") */
.htb-lede {
    font-size: 19px;
    color: #8a7d6f;
    margin: 0;
    line-height: 1.6;
}

/* Fließtext */
.htb-prose {
    padding: 32px 0 60px;
}
.htb-prose .htb-wrap {
    max-width: 780px;
}
.htb-prose p {
    font-size: 17px;
    color: #5a554d;
    line-height: 1.78;
    margin: 0 0 18px;
}
.htb-prose h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 24px;
    color: #1e4a73;
    margin: 32px 0 12px;
}

@media (max-width: 560px) {
    .htb-page-hero h1 { font-size: 34px; }
}

/* ============================================================
   STARTSEITE — Block 1: Hero
   Inhalt kommt aus dem Modul "Eigenes Modul" auf Position
   htb-hero. Der umschließende <section class="htb-hero">
   steht in /htb-ev/neu2026/templates/htb/index.php.

   Aufbau nach Prototyp htb-mockup-blau.html:
   links Textspalte, rechts das Logo-Panel.
   Achtung: NICHT verwechseln mit .htb-page-hero — das ist der
   Seitentitel-Bereich der generischen Artikelansicht.
   ============================================================ */

.htb-hero__wrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 40px;
}

/* Pill mit dynamischem Hundezähler.
   Die Zahl in #htb-hundezahl wird per Skript in index.php
   durch die Anzahl der gerenderten .htb-card ersetzt. */
.htb-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--htb-tint);
    border: 1px solid var(--htb-line);
    color: var(--htb-navy);
    padding: 7px 14px;
    border-radius: 24px;
    font-size: 13.5px;
    line-height: 1.3;
    margin-bottom: 22px;
}

.htb-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5aa02a;
    flex: none;
}

.htb-hero__title {
    font-family: var(--htb-font-display);
    font-weight: 500;
    font-size: 54px;
    line-height: 1.06;
    color: var(--htb-navy);
    margin: 0 0 18px;
}

.htb-hero__title em {
    font-style: italic;
    color: var(--htb-blue);
}

.htb-hero__lede {
    font-size: 17px;
    color: #5a554d;
    line-height: 1.7;
    max-width: 460px;
    margin: 0 0 28px;
}

.htb-hero__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Ergänzt die bereits vorhandene Basisklasse .htb-btn.
   Doppelte Klasse (.htb-btn.htb-btn--ghost) erhöht die Spezifität,
   damit der Rahmen nicht vom border:none der zweiten .htb-btn-
   Basisdefinition weiter unten überschrieben wird. */
.htb-btn.htb-btn--ghost {
    background: transparent;
    border: 1.6px solid var(--htb-navy);
    color: var(--htb-navy);
}

.htb-btn.htb-btn--ghost:hover {
    background: var(--htb-navy);
    color: #fff;
}

/* Logo-Panel rechts */
.htb-hero__brandpanel {
    min-height: 340px;
    border-radius: 20px;
    background: linear-gradient(160deg, #eef5fc, #d7e6f5);
    border: 1px solid var(--htb-line);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.htb-hero__brandpanel img {
    max-width: 80%;
    max-height: 262px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Ab hier wird der Hero einspaltig. Das Logo-Panel entfällt
   dann vollständig (Absprache), der Text nimmt die volle Breite. */
@media (max-width: 760px) {
    .htb-hero__brandpanel {
        display: none;
    }
    .htb-hero__wrap {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 36px;
    }
    .htb-hero__title {
        font-size: 40px;
    }
    .htb-hero__lede {
        max-width: none;
    }
}

/* ============================================================
   STARTSEITE — Block 2: Info-Banner (zuschaltbar)
   Inhalt kommt aus dem Modul "Eigenes Modul" auf Position
   htb-info. Der umschließende <section class="htb-infobanner">
   steht in /htb-ev/neu2026/templates/htb/index.php.

   Ein-/Ausschalten: Modul veröffentlichen bzw. depublizieren.
   Ist es aus, entfällt die gesamte Section samt Abständen.
   ============================================================ */

.htb-infobanner {
    padding: 0 0 24px;
}

.htb-infobox {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--htb-white);
    border: 1px solid var(--htb-line);
    border-left: 4px solid var(--htb-blue);
    border-radius: 12px;
    padding: 20px 24px;
}

.htb-infobox__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--htb-tint);
    color: var(--htb-blue);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* Der Inhalt kommt aus dem Modul und wird mit TinyMCE gepflegt.
   Deshalb werden hier ALLE Überschriftsebenen abgefangen, die der
   Editor anbieten kann — der Vorstand muss nicht wissen, ob er
   "Überschrift 2" oder "Überschrift 3" gewählt hat. Ebenso <strong>
   und <b>, falls jemand statt einer Überschrift nur fett schreibt. */
.htb-infobox__content h1,
.htb-infobox__content h2,
.htb-infobox__content h3,
.htb-infobox__content h4,
.htb-infobox__content h5,
.htb-infobox__content h6,
.htb-infobox__content > p:first-child > strong:only-child,
.htb-infobox__content > p:first-child > b:only-child {
    display: block;
    font-family: var(--htb-font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--htb-navy);
    margin: 0 0 6px;
}

.htb-infobox__content p {
    font-size: 15px;
    color: #5a554d;
    line-height: 1.7;
    margin: 0 0 10px;
}

/* Kein überstehender Abstand am Ende der Karte */
.htb-infobox__content > *:last-child,
.htb-infobox__content .mod-custom > *:last-child {
    margin-bottom: 0;
}

.htb-infobox__content ul,
.htb-infobox__content ol {
    font-size: 15px;
    color: #5a554d;
    line-height: 1.7;
    margin: 0 0 10px;
    padding-left: 20px;
}

@media (max-width: 560px) {
    .htb-infobox {
        padding: 18px 18px;
        gap: 13px;
    }
}

/* ============================================================
   STARTSEITE — Abschnittskopf über dem Hunde-Grid
   Gerendert von blog.php (fest im Code). .htb-eyebrow ist bereits
   weiter oben definiert; hier nur Titel, Untertitel und Abstände.
   ============================================================ */

.htb-dogs__head {
    padding-top: 8px;
    padding-bottom: 4px;
}

.htb-dogs__title {
    font-family: var(--htb-font-display);
    font-weight: 500;
    font-size: 38px;
    color: var(--htb-navy);
    margin: 0 0 14px;
}

.htb-dogs__title em {
    font-style: italic;
    color: var(--htb-blue);
}

.htb-dogs__sub {
    color: #5a554d;
    font-size: 16px;
    max-width: 560px;
    margin: 0 0 28px;
    line-height: 1.6;
}

@media (max-width: 880px) {
    .htb-dogs__title { font-size: 32px; }
}

/* ============================================================
   STARTSEITE — Block 4: Helfen-Band „So können Sie helfen"
   Inhalt aus Modul auf Position htb-helfen. Der umschließende
   <section class="htb-helfen"> steht in index.php und liefert die
   volle Breite. Aufbau nach Prototyp htb-mockup-blau.html
   (.helpband). Text fest im Code.
   ============================================================ */

.htb-helfen {
    background: var(--htb-navy);
    padding: 72px 0;
}

/* Eyebrow im Band: hellblau statt Markenblau (dunkler Hintergrund) */
.htb-helfen__eyebrow {
    color: #9cc0e6;
}

.htb-helfen__title {
    font-family: var(--htb-font-display);
    font-weight: 500;
    font-size: 34px;
    color: #fff;
    margin: 0 0 8px;
}

.htb-helfen__title em {
    font-style: italic;
    color: #9cc0e6;
}

.htb-helfen__lead {
    color: #bcd2e6;
    font-size: 16px;
    max-width: 600px;
    margin: 0 0 34px;
    line-height: 1.6;
}

.htb-helfen__list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 40px;
    max-width: 900px;
}

.htb-helfen__list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    color: #e6eef7;
    line-height: 1.45;
}

.htb-helfen__ic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--htb-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.htb-helfen__list a {
    color: #9cc0e6;
    font-weight: 600;
    text-decoration: none;
}

.htb-helfen__list a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .htb-helfen {
        padding: 56px 0;
    }
    .htb-helfen__list {
        grid-template-columns: 1fr;
    }
    .htb-helfen__title {
        font-size: 28px;
    }
}

/* ============================================================
   ZUHAUSE GEFUNDEN — Layout zuhause.php (Kategorie ID 10)
   Nur die neuen Bausteine: Jahres-Navigation, Zählzeile,
   Galerie-Sektion. Breadcrumb (.htb-crumbs), Hero
   (.htb-page-hero), Eyebrow (.htb-eyebrow) und Lede
   (.htb-lede) nutzen die bereits vorhandenen Regeln.
   Die sigplus-Galerieausgabe selbst wird NICHT per CSS
   angefasst (Layout kommt über die {gallery}-Parameter).
   ============================================================ */
.htb-zuhause-gallery {
    padding: 26px 0 60px;
}

/* --- Jahres-Navigation (Pills) --- */
.htb-yearnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
}
.htb-yearnav__link {
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--htb-line);
    font-size: 14px;
    color: var(--htb-ink);
    background: var(--htb-white);
    transition: all .15s;
}
.htb-yearnav__link:hover {
    border-color: var(--htb-blue);
    color: var(--htb-blue);
}
.htb-yearnav__link.htb-yearnav__cur {
    background: var(--htb-blue);
    border-color: var(--htb-blue);
    color: #fff;
    font-weight: 600;
}

/* --- Mobile: Dropdown statt Pill-Leiste --- */
.htb-yearnav-select {
    display: none;
}
@media (max-width: 560px) {
    .htb-yearnav {
        display: none;
    }
    .htb-yearnav-select {
        display: block;
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--htb-line);
        border-radius: 20px;
        background: var(--htb-white);
        color: var(--htb-ink);
        font-size: 15px;
        font-family: inherit;
        margin: 0 0 18px;
        cursor: pointer;
    }
}

/* --- Zählzeile über der Galerie --- */
.htb-gcount {
    font-size: 14px;
    color: var(--htb-muted);
    margin: 0 0 16px;
}

/* ============================================================
   LIGHTBOX-BESCHRIFTUNG (FancyBox3)
   Kein sigplus-Bordmittel vorhanden, daher CSS. Betrifft NUR das
   FancyBox3-Overlay (Name unter dem vergrößerten Bild), nicht die
   Galerie-Ausgabe auf der Seite. Standardschrift der Lightbox war
   klein/dünn - hier etwas größer und kräftiger.
   ============================================================ */
.fancybox-caption__body {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}

/* ============================================================
   KONTAKTSEITE — HTML-Block im Beitragstext (Layout webseite.php)
   Zweispaltig: Formular-Optik links, Info-Karten rechts.
   Vorlage: Prototyp htb-kontakt.html (.contact / .field / .ci).
   Das Formular ist derzeit reine Optik (Button ohne Funktion);
   der Umstieg auf die Joomla-Kontaktkomponente kommt spaeter.
   ============================================================ */

/* Weg A: Der Fließtext-Rahmen (.htb-prose .htb-wrap) bleibt bewusst
   auf 780px begrenzt - gut fuer die Lesbarkeit von Textseiten. Der
   zweispaltige Kontaktbereich braucht aber die volle Seitenbreite.
   ROBUSTERE LÖSUNG (ohne 100vw-Trick): Statt .htb-contact aus dem
   Fluss auszubrechen (100vw + negativer Margin), heben wir die
   780px-Grenze direkt an DER .htb-wrap auf, die .htb-contact
   enthält (per :has()-Selektor). .htb-contact bleibt dadurch ganz
   normal im Dokumentfluss - kein transform (Stacking-Context-Falle
   fuer Modals, siehe frühere Version dieser Datei), kein 100vw
   (führt bei vorhandener Scrollleiste zu einem sichtbaren Versatz
   nach links, da 100vw die Scrollleistenbreite mitzählt, der
   sichtbare Viewport aber schmaler ist). Betrifft nur den
   Kontaktblock; andere Prose-Seiten bleiben schmal. */
.htb-prose .htb-wrap:has(> .htb-contact) {
    max-width: 1040px;
}

.htb-contact {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 42px;
    align-items: start;
    margin-top: 8px;
}

/* --- linke Spalte: Formular --- */
.htb-contact__form h2 {
    font-family: var(--htb-font-display);
    font-weight: 500;
    font-size: 24px;
    color: var(--htb-navy);
    margin: 0 0 6px;
}
.htb-contact__hint {
    color: #8a7d6f;
    font-size: 15px;
    margin: 0 0 24px;
}
.htb-field {
    margin: 0 0 18px;
}
.htb-field label {
    display: block;
    font-size: 15px;
    color: var(--htb-ink);
    margin: 0 0 7px;
}
.htb-field input,
.htb-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--htb-line);
    border-radius: var(--htb-radius-lg);
    background: #fffdf9;
    padding: 14px 16px;
    font-family: var(--htb-font-body);
    font-size: 15px;
    color: var(--htb-ink);
}
.htb-field input::placeholder,
.htb-field textarea::placeholder {
    color: #b3a89c;
}
.htb-field input:focus,
.htb-field textarea:focus {
    outline: none;
    border-color: var(--htb-blue);
    box-shadow: 0 0 0 3px rgba(53, 125, 196, .12);
}
.htb-field textarea {
    min-height: 150px;
    resize: vertical;
}
.htb-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #5a554d;
    margin: 4px 0 0;
    cursor: pointer;
}
.htb-check input {
    width: 17px;
    height: 17px;
    flex: none;
}

/* Button: dunkles Navy, abgerundet, wie .btn-primary im Prototyp.
   .htb-btn ist bewusst eigenstaendig benannt, um nicht mit anderen
   Button-Regeln zu kollidieren. */
.htb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 26px;
    border: none;
    border-radius: 30px;
    font-family: var(--htb-font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.htb-btn--primary {
    background: var(--htb-navy);
    color: #fff;
    margin-top: 28px;
}
.htb-btn--primary:hover {
    background: var(--htb-blue);
}

/* --- rechte Spalte: Info-Karten --- */
.htb-contact__info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.htb-ci {
    background: #fffdf9;
    border: 1px solid var(--htb-line);
    border-radius: var(--htb-radius-lg);
    padding: 24px 26px;
}
.htb-ci h3 {
    font-family: var(--htb-font-display);
    font-weight: 500;
    font-size: 18px;
    color: var(--htb-navy);
    margin: 0 0 12px;
}
.htb-ci p {
    font-size: 15.5px;
    color: #5a554d;
    line-height: 1.7;
    margin: 0;
}
.htb-ci a {
    color: var(--htb-blue);
    text-decoration: none;
}
.htb-ci a:hover {
    text-decoration: underline;
}

/* --- mobil: einspaltig --- */
@media (max-width: 820px) {
    .htb-contact {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* ============================================================
   KONTAKTSEITE (echtes Formular) — Layout-Override
   com_contact/contact/default.php + default_form.php (Original).
   Rahmen (.htb-contact, .htb-contact__form, .htb-contact__info)
   identisch zur früheren HTML-Attrappe, damit die Optik gleich
   bleibt. Das Formular selbst kommt aus Joomla (#contact-form,
   .control-group, .form-control, .btn-primary) - hier NUR mit
   CSS eingekleidet, keine Strukturänderung.
   ============================================================ */

/* Joomla gibt dem Formular Bootstrap-Klassen wie "well" mit,
   die einen eigenen Rahmen/Hintergrund erzeugen - den wollen wir
   nicht, unser .htb-contact__form übernimmt das Rahmen-Design. */
#contact-form.well {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

#contact-form > fieldset {
    border: none;
    padding: 0;
    margin: 0;
    /* flex+order, um "* Benötigtes Feld" optisch ans Ende zu
       verschieben, ohne Joomlas HTML-Reihenfolge anzufassen.
       Nur das direkte Kind-Fieldset des Formulars (die Haupt-
       Feldgruppe) - NICHT das verschachtelte Consent-Fieldset
       (das liegt innerhalb einer .control-group/.controls und
       soll sein eigenes, einfaches Verhalten behalten). */
    display: flex;
    flex-direction: column;
}

#contact-form legend {
    display: none;
}

/* Joomlas Struktur: .control-group > .control-label (Label) +
   .controls (Feld). Kein form-horizontal-Split hier - Label und
   Feld stehen bereits untereinander, wir müssen nur Abstände und
   Optik angleichen. */
#contact-form .control-group {
    margin: 0 0 18px;
    order: 1;
}

/* "* Benötigtes Feld"-Hinweis: steht in Joomlas HTML ganz oben vor
   dem ersten Feld, wirkt dort platzraubend und zu prominent.
   order:99 schiebt ihn ans Ende (nach den echten Feldern), knapp
   vor die Checkbox/den Button; sehr klein und blass, damit er nicht
   mit einer echten Fehlermeldung verwechselt wird. */
#contact-form .control-group.field-spacer {
    order: 99;
    margin: 0 0 14px;
    font-size: 12.5px;
    color: #b3a89c;
}

#contact-form .control-group.field-spacer .spacer {
    display: block;
}

#contact-form .control-group.field-spacer .star {
    color: #b3a89c;
}

#contact-form .control-label {
    margin: 0 0 7px;
}

#contact-form .control-label label {
    font-size: 14px;
    color: #8a7d6f;
    font-weight: 400;
}

#contact-form .control-label .star {
    color: var(--htb-navy);
}

#contact-form .form-control-feedback {
    display: block;
    font-size: 13px;
    color: #b3453f;
    margin-top: 4px;
}

#contact-form .form-control {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--htb-line);
    border-radius: var(--htb-radius-lg);
    background: #fffdf9;
    padding: 14px 16px;
    font-family: var(--htb-font-body);
    font-size: 15px;
    color: var(--htb-ink);
}

#contact-form .form-control:focus {
    outline: none;
    border-color: var(--htb-blue);
    box-shadow: 0 0 0 3px rgba(53, 125, 196, .12);
}

#contact-form textarea.form-control {
    min-height: 276px;
    resize: vertical;
}

/* Datenschutz-Checkbox (Plugin "Inhalt - Datenschutzerklärung").
   Echte Struktur (per Konsole geprüft):
   <fieldset id="jform_consentbox">
     <legend class="visually-hidden">...</legend>
     <div class="form-check form-check-inline">
       <input type="checkbox" id="jform_consentbox0" class="form-check-input">
       <label for="jform_consentbox0" class="form-check-label">...</label>
     </div>
   </fieldset>
   Checkbox und Text sollen nebeneinander stehen, nicht Label über
   Checkbox wie sonst bei den Textfeldern. */
#contact-form fieldset#jform_consentbox {
    margin: 0 0 18px;
}

#contact-form .form-check.form-check-inline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#contact-form .form-check-input {
    width: 17px;
    height: 17px;
    flex: none;
    margin: 3px 0 0;
}

#contact-form .form-check-label {
    font-size: 15px;
    color: #5a554d;
    font-weight: 400;
}

/* Das Label über dem fieldset (id jform_consentbox-lbl) enthält den
   anklickbaren Link "Datenschutzhinweis" (öffnet das Modal) - bleibt
   sichtbar. Optisch an die anderen Feld-Labels angeglichen. */
#contact-form label#jform_consentbox-lbl {
    font-size: 15px;
    color: var(--htb-ink);
    font-weight: 400;
    margin-bottom: 8px;
}

#contact-form label#jform_consentbox-lbl a {
    color: var(--htb-blue);
}

/* Button: gleiche Optik wie zuvor .htb-btn--primary */
#contact-form .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 26px;
    border: none;
    border-radius: 30px;
    background: var(--htb-navy);
    color: #fff;
    font-family: var(--htb-font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

#contact-form .btn-primary:hover {
    background: var(--htb-blue);
}

/* --- Info-Karten-Modul (Position htb-kontakt-info) ------------
   Gleiche Optik wie zuvor .htb-ci in der HTML-Attrappe.
   WICHTIG: Joomla wickelt ein Custom-HTML-Modul in einen eigenen
   Wrapper <div class="mod-custom custom"> - die vier .htb-ci-Karten
   sind also Kinder DIESES Wrappers, nicht direkte Kinder von
   .htb-contact__info. Deshalb müssen display:flex/gap auf den
   Wrapper (.htb-contact__info .mod-custom), nicht auf
   .htb-contact__info selbst - sonst hat .htb-contact__info nur ein
   einziges Flex-Kind (den Wrapper) und der gap wirkt nirgendwo. */
.htb-contact__info .mod-custom {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.htb-contact__info .htb-ci {
    background: #fffdf9;
    border: 1px solid var(--htb-line);
    border-radius: var(--htb-radius-lg);
    padding: 24px 26px;
}

.htb-contact__info .htb-ci h3 {
    font-family: var(--htb-font-display);
    font-weight: 500;
    font-size: 18px;
    color: var(--htb-navy);
    margin: 0 0 12px;
}

.htb-contact__info .htb-ci p {
    font-size: 15.5px;
    color: #5a554d;
    line-height: 1.7;
    margin: 0;
}

.htb-contact__info .htb-ci a {
    color: var(--htb-blue);
    text-decoration: none;
}

.htb-contact__info .htb-ci a:hover {
    text-decoration: underline;
}

/* ============================================================
   DATENSCHUTZ-MODAL (Joomla-Kontaktkomponente, Plugin
   "Inhalt - Datenschutzerklärung") — mobile Größe.
   Joomla setzt per eigener Klasse jviewport-width80/height70 eine
   Breite/Höhe von 80%/70% des Viewports. Auf kleinen Bildschirmen
   wirkt das gedrungen. Näher an Vollbild: Fenster nimmt fast den
   ganzen Bildschirm ein.
   ============================================================ */
@media (max-width: 767.98px) {
    .joomla-modal.modal .modal-dialog {
        width: 96vw !important;
        max-width: 96vw !important;
        margin: 2vh auto !important;
    }

    .joomla-modal.modal .modal-body {
        height: 82vh !important;
        max-height: 82vh !important;
    }

    .joomla-modal.modal .modal-body iframe {
        height: 100% !important;
    }
}

/* Betreff-Feld verstecken. Joomla erlaubt kein Abschalten der
   Pflicht am eingebauten Betreff-Feld; Wert wird serverseitig
   vorbelegt (siehe default.php im com_contact-Override), hier nur
   die Anzeige unterdrückt, inkl. Label. */
#contact-form .control-group:has(#jform_contact_emailmsg) {
    display: none;
}

/* ============================================================
   PATENTIERE — Detailseiten (Verein › Patentiere › NAME)
   ------------------------------------------------------------
   Zwei Seitentypen, beide als HTML-Block im Beitragstext, Rahmen
   aus webseite.php (.htb-crumbs, .htb-page-hero, .htb-prose).

   Typ A (Bela, Dino, Luchia): zweispaltig, links sigplus-Galerie
     aus …/patentiere/NAME/haupt, rechts Steckbrief. Nutzt die
     vorhandenen Detail-Klassen der Hundeseite (.htb-ptop, .htb-pside,
     .htb-status, .htb-facts, .htb-health, .htb-dname).
   Typ B (Clyde, Moyo, Murphy): einspaltig im Textfluss, feste Fotos
     (Tierfoto + Patenschaftsurkunde) über .htb-patfotos.

   Der HTML-Block liegt in .htb-prose (max 780px). Typ A braucht die
   volle Breite: Ausbruch über max-width an der umschließenden
   .htb-wrap — bewusst KEIN transform (das würde die sigplus-Lightbox
   im Stacking-Context einsperren, vgl. Kontaktseite).
   ============================================================ */

/* Breiten-Ausbruch nur wenn ein Patentier-Block enthalten ist */
.htb-prose .htb-wrap:has(> .htb-patentier) {
    max-width: 1120px;
}

/* Status-Zeile darf hier auch mehrzeilig/länger sein (z. B.
   "Patenelefant · Future for Elephants") — Zeilenumbruch erlauben */
.htb-patentier .htb-status {
    line-height: 1.35;
    white-space: normal;
}

/* --- Typ A: Steckbrief-Kopf (Galerie links, Profil rechts) ---
   .htb-ptop/.htb-pside/.htb-status/.htb-facts/.htb-health kommen aus
   dem vorhandenen Detail-CSS. Hier nur die Galerie-Spalte. */
.htb-patentier .htb-patgalerie { min-width: 0; }

/* sigplus-Ausgabe unaufdringlich einpassen: erstes (großes) Bild mit
   Rundung, Thumbs darunter. sigplus bringt eigenes Grid mit; wir
   geben nur Rahmen/Rundung, keine Layout-Übernahme. */
.htb-patentier .htb-patgalerie .sigplus-gallery img {
    border-radius: 10px;
}

/* --- Typ B: feste Fotos (Tierfoto + Patenschaftsurkunde) --- */
.htb-patfotos {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 22px 0 8px;
}
.htb-patfotos img {
    flex: 1 1 240px;
    max-width: 340px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(31,74,115,.14);
    background: #e7f0f9;
    display: block;
}

/* --- Fakten-Tabelle in Typ B (steht ohne Steckbrief-Spalte im
   Textfluss) etwas begrenzen --- */
.htb-patentier--b .htb-facts {
    max-width: 420px;
    margin: 16px 0 4px;
}

/* --- Paten-CTA-Reihe (beide Typen) --- */
.htb-patcta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 30px 0 8px;
}

/* Externer Link (Future for Elephants) etwas abgesetzt darüber */
.htb-patlink-extern {
    margin: 8px 0 0;
}

/* Story-Abstand innerhalb des Patentier-Blocks etwas straffen,
   da hier keine große Steckbrief-Sektion mit Trennlinie davor steht */
.htb-patentier .htb-story { padding-top: 8px; }

@media (max-width: 620px) {
    .htb-patfotos img { max-width: 100%; }
}


/* ============================================================
   Verein-Unterseiten: Fließtext-Bausteine für "Wir über uns"
   (und ggf. weitere Inhaltsseiten, die dieselbe Optik nutzen).
   Ergänzt die generische Artikelansicht (.htb-prose) von oben,
   nach Prototyp htb-verein-wir-ueber-uns.html.
   ============================================================ */

/* Hervorgehobener Merksatz im Fließtext (kursive Fraunces-Zeile) */
.htb-prose .htb-affirm {
    font-family: var(--htb-font-display);
    font-style: italic;
    font-size: 21px;
    color: var(--htb-navy);
    line-height: 1.5;
    margin: 6px 0 22px;
}

/* Getönter "Mitmachen"-Kasten mit Häkchen-Liste */
.htb-prose .htb-mitmachen {
    background: var(--htb-tint);
    border: 1px solid var(--htb-line);
    border-radius: 16px;
    padding: 30px 32px;
    margin: 28px 0;
}
.htb-prose .htb-mitmachen h2 {
    font-family: var(--htb-font-display);
    font-weight: 500;
    font-size: 25px;
    color: var(--htb-navy);
    margin: 0 0 18px;
    line-height: 1.25;
}
.htb-mitmachen ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.htb-mitmachen li {
    position: relative;
    padding: 12px 0 12px 33px;
    border-bottom: 1px solid var(--htb-line);
    font-size: 16px;
    color: #5a554d;
    line-height: 1.6;
}
.htb-mitmachen li:last-child { border-bottom: 0; }
.htb-mitmachen li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--htb-blue);
    line-height: 1;
}
/* __ic bleibt als leere Hülle für Abwärtskompatibilität, wird aber
   nicht mehr angezeigt – CSS-Häkchen ersetzen die SVG-Icons. */
.htb-mitmachen__ic { display: none; }

@media (max-width: 560px) {
    .htb-mitmachen { padding: 24px 22px; }
}

/* ============================================================
   Verein-Unterseite "Mitgliedschaft": Statistik-Kasten und
   Button-Reihe. Ergänzt .htb-prose, nach Prototyp
   htb-verein-mitgliedschaft.html.
   ============================================================ */

/* Statistik-Kasten (z. B. Mindestjahresbeitrag) */
.htb-prose .htb-statbox {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--htb-tint);
    border: 1px solid var(--htb-line);
    border-radius: 16px;
    padding: 22px 26px;
    margin: 24px 0;
}
.htb-statbox__num {
    font-family: var(--htb-font-display);
    font-weight: 500;
    font-size: 42px;
    color: var(--htb-navy);
    line-height: 1;
    flex: none;
}
.htb-statbox__lbl {
    font-size: 15.5px;
    color: #5a554d;
    line-height: 1.5;
}

/* Button-Reihe: mehrere Buttons nebeneinander. Hebt den margin-top
   von .htb-btn--primary auf, damit beide Buttons auf einer Linie
   sitzen statt versetzt. */
.htb-prose .htb-btnrow {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}
.htb-btnrow .htb-btn { margin-top: 0; }

/* ============================================================
   Verein-Unterseite "Schutzgebühr": freistehende Häkchen-Liste
   und Anmerkungs-Kasten. Ergänzt .htb-prose, nach Prototyp
   htb-verein-schutzgebuehr.html.
   ============================================================ */

/* Freistehende Häkchen-Liste (ohne umgebenden Kasten) */
.htb-prose .htb-bullets {
    list-style: none;
    padding: 0;
    margin: 6px 0 20px;
}
.htb-bullets li {
    position: relative;
    padding: 10px 0 10px 33px;
    border-bottom: 1px solid var(--htb-line);
    font-size: 16.5px;
    color: #5a554d;
    line-height: 1.6;
}
.htb-bullets li:last-child { border-bottom: 0; }
.htb-bullets li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--htb-blue);
    line-height: 1;
}
/* __ic bleibt als leere Hülle für Abwärtskompatibilität, wird aber
   nicht mehr angezeigt – CSS-Häkchen ersetzen die SVG-Icons. */
.htb-bullets__ic { display: none; }

/* Anmerkungs-Kasten (blaue linke Kante, heller Blauton) */
.htb-prose .htb-anmerkung {
    border-left: 3px solid var(--htb-blue);
    background: var(--htb-tint);
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
    margin: 28px 0 0;
}
.htb-anmerkung h3 {
    font-family: var(--htb-font-display);
    font-weight: 500;
    font-size: 18px;
    color: var(--htb-navy);
    margin: 0 0 6px;
}
.htb-anmerkung p {
    font-size: 15px;
    color: #5a554d;
    margin: 0;
    line-height: 1.6;
}

/* ============================================================
   Infos-Unterseite "Links": klickbare Link-Karten-Liste.
   Nach Prototyp htb-infos-links.html.
   ============================================================ */

.htb-prose .htb-linklist {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 12px;
}
.htb-linklist a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--htb-line);
    background: #fffdf9;
    border-radius: 14px;
    padding: 18px 22px;
    color: var(--htb-ink);
    font-weight: 600;
    font-size: 17px;
    text-decoration: none !important;
    transition: border-color .15s, background .15s;
}
.htb-linklist a:hover {
    border-color: var(--htb-blue);
    background: var(--htb-tint);
}
.htb-linklist .htb-arr {
    color: var(--htb-blue);
    font-size: 19px;
    flex: none;
}

/* Überschrift über der Gesundheits-Häkchenliste auf der Hunde-Detailseite.
   Das seitliche Padding sitzt bewusst hier und an .htb-health__list, NICHT
   am Kasten .htb-health – nur so kann die Trennlinie über die volle Breite
   laufen, ohne negatives Margin (das würde den Kasten verbreitern und das
   zweispaltige Grid der Häkchen zerstören). */
.htb-health__intro {
    font-size: 17px;
    font-weight: 600;
    color: var(--htb-navy);
    margin: 0 0 16px;
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--htb-line);
    line-height: 1.4;
}

/* Info-Hinweiskasten zwischen Steckbrief und Gesundheit auf der
   Hunde-Detailseite. Nur sichtbar wenn im Custom Field "Info anzeigen"
   Ja gewählt UND das Feld "Info" befüllt ist (siehe default.php). */
.htb-info-note {
    background: #fffdf9;
    border: 1px solid rgba(31,74,115,.14);
    border-left: 3px solid var(--htb-blue);
    border-radius: 0 14px 14px 0;
    padding: 16px 20px;
    margin: 0 0 28px;
}
.htb-info-note p {
    margin: 0;
    font-size: 15px;
    color: #3a352c;
    line-height: 1.6;
}

/* ============================================================
   Verein-Unterseite "Bei Freunden": Partner-Karten-Grid
   (Alba, Straz). Nach Prototyp htb-verein-bei-freunden.html.
   ============================================================ */
.htb-prose .htb-partners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin: 24px 0 0;
}
.htb-partners__card {
    display: block;
    background: #fffdf9;
    border: 1px solid var(--htb-line);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.htb-partners__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(30,74,115,.12);
}
.htb-partners__img {
    background: var(--htb-tint);
    overflow: hidden;
}
.htb-partners__img img {
    width: 100%;
    height: auto;
    display: block;
}
.htb-partners__body {
    padding: 18px 20px;
}
.htb-partners__body h3 {
    font-family: var(--htb-font-display);
    font-weight: 600;
    font-size: 20px;
    color: var(--htb-ink);
    margin: 0 0 4px;
}
.htb-partners__body p {
    font-size: 14.5px;
    color: var(--htb-muted);
    margin: 0 0 10px;
}
.htb-partners__more {
    display: inline-block;
    color: var(--htb-blue);
    font-weight: 600;
    font-size: 14px;
}

@media (max-width: 620px) {
    .htb-partners { grid-template-columns: 1fr; }
}

/* ============================================================
   Partner-Unterseiten (Alba, Straz): Außenabstand um die
   sigplus-Galerie herum. Fasst NICHT die sigplus-Ausgabe selbst
   an (feste Projektregel) - reiner Wrapper-Container von außen.
   ============================================================ */
.htb-gallery-spacer {
    margin-top: 40px;
}
.htb-gallery-spacer--cta {
    margin: 40px 0;
}

/* ============================================================
   Helfen-Unterseite "Transportpate": Preisliste
   (Land -> Betrag). Nach Prototyp htb-helfen-transportpate.html.
   ============================================================ */
.htb-prose .htb-pricelist {
    list-style: none;
    padding: 0;
    margin: 10px 0 22px;
    border: 1px solid var(--htb-line);
    border-radius: 14px;
    overflow: hidden;
    background: #fffdf9;
}
.htb-pricelist li {
    display: flex;
    gap: 18px;
    align-items: baseline;
    padding: 13px 20px;
    border-bottom: 1px solid var(--htb-line);
    font-size: 16px;
    color: #5a554d;
}
.htb-pricelist li:last-child { border-bottom: 0; }
.htb-pricelist .htb-pricelist__amt {
    font-family: var(--htb-font-display);
    font-weight: 500;
    color: var(--htb-navy);
    font-size: 19px;
    flex: none;
    min-width: 74px;
}

/* ============================================================
   Gerahmtes Bild mit Bildunterschrift im Fließtext (figure).
   Nach Prototyp htb-helfen-kosten-auslandshund.html.
   ============================================================ */
.htb-prose .htb-prose-img {
    margin: 40px 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--htb-line);
}
.htb-prose-img img {
    width: 100%;
    height: auto;
    display: block;
}
.htb-prose-img figcaption {
    font-size: 12.5px;
    color: var(--htb-muted);
    padding: 8px 14px;
    background: #fffdf9;
}

/* ============================================================
   Helfen-Unterseite "Sachspenden": Bilder-Grid pro Spender-
   Abschnitt. Nach Prototyp htb-helfen-sachspenden.html, jedoch
   OHNE object-fit:cover (feste Projektregel: Bilder werden nie
   beschnitten, immer vollständig angezeigt).
   ============================================================ */
.htb-prose .htb-spendengrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin: 14px 0 32px;
}
.htb-spendengrid img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--htb-line);
    display: block;
}
.htb-spendengrid img.htb-logo {
    background: #fffdf9;
    padding: 14px;
    object-fit: contain;
}

/* Zuhause-gefunden-Seiten: eigener Breadcrumb ersetzt das native Modul,
   das hier wegen Joomla-Core-Verhalten "Zuhause gefunden" doppelt zeigen
   wuerde. Modul-Zuweisung im Backend blendet es zwar schon aus, dieses
   CSS ist zusaetzliche Absicherung, falls die Zuweisung/Cache mal nicht
   greift. */
body.htb-zuhause .mod-breadcrumbs__wrapper {
    display: none;
}

/* Zuhause-gefunden-Seiten: eigener Breadcrumb ersetzt das native Modul,
   das hier wegen Joomla-Core-Verhalten "Zuhause gefunden" doppelt zeigen
   wuerde. Eigene, ausschliesslich hierfuer verwendete body-Klasse
   (NICHT htb-zuhause - die wird an anderer Stelle mitgelesen und
   verfaerbte dadurch den aktiven Hauptmenuepunkt). */
body.htb-crumbs-native-hide .mod-breadcrumbs__wrapper {
    display: none;
}

/* Patentiere-Übersicht (com-content-category-blog): oberes Padding der
   allgemeinen .blog-Regel (padding: 1.5rem 0) gezielt entfernen, damit
   der Breadcrumb hier genauso dicht an der Kopfzeile sitzt wie bei
   webseite.php/default.php, die dieses Padding nicht haben. */
.com-content-category-blog {
    padding-top: 0;
}