/*!
 * Fluffy's Abenteuer & Reisen – Joomla 5 Template
 * template.css – Design-System
 * Erstellt mit Claude (Anthropic) · Omega-FX digital & ai · Juli 2026
 *
 * Farbwelt aus den Buchcovern: Amber/Gold, Tiefes Braun, Hellblau, Schwarz/Weiß
 * Schriften: Baloo 2 (Überschriften), Nunito (Fließtext) – KEINE Bebas Neue.
 */

/* =========================================================================
   1. GRUNDLAGEN & CUSTOM PROPERTIES
   ========================================================================= */
:root {
    /* Markenfarben (können per Template-Parameter überschrieben werden) */
    --fluffy-amber: #F5A623;
    --fluffy-amber-dark: #D6870C;
    --fluffy-amber-light: #FFD98A;
    --fluffy-brown: #5C3A1E;
    --fluffy-brown-light: #8A5A32;
    --fluffy-lightblue: #A8D8EA;
    --fluffy-lightblue-dark: #7FBFD9;
    --fluffy-black: #23211D;
    --fluffy-white: #FFFCF6;
    --fluffy-cream: #FFF6E6;
    --fluffy-grey: #6B6459;

    /* Typografie */
    --fluffy-heading-font: "Baloo 2", cursive, sans-serif;
    --fluffy-body-font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Radien & Schatten */
    --fluffy-radius-sm: 12px;
    --fluffy-radius-md: 20px;
    --fluffy-radius-lg: 32px;
    --fluffy-radius-pill: 999px;
    --fluffy-shadow-sm: 0 2px 8px rgba(92, 58, 30, 0.10);
    --fluffy-shadow-md: 0 10px 24px rgba(92, 58, 30, 0.14);
    --fluffy-shadow-lg: 0 18px 40px rgba(92, 58, 30, 0.20);

    /* Layout */
    --fluffy-container-width: 1200px;
    --fluffy-header-height: 84px;
    --fluffy-gap: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; height: 100%; }

/*
 * Sticky Footer: body wird zur Flex-Spalte über volle Viewport-Höhe, damit
 * der Footer auf Seiten mit wenig Inhalt (z. B. Kontaktseite) immer unten
 * bleibt statt direkt nach dem Content "hochzurutschen".
 */
body.fluffy-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--fluffy-body-font);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--fluffy-black);
    background: var(--fluffy-white);
    -webkit-font-smoothing: antialiased;
}
.fluffy-header, .fluffy-hero, .fluffy-breadcrumbs { flex-shrink: 0; }
.fluffy-main { flex: 1 0 auto; }
.fluffy-footer { flex-shrink: 0; margin-top: auto; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--fluffy-brown); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--fluffy-amber-dark); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fluffy-heading-font);
    font-weight: 700;
    color: var(--fluffy-brown);
    line-height: 1.25;
    margin: 0 0 .6em;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }

/*
 * .sr-only ist unsere eigene Klasse. .visually-hidden ist die Klasse, die
 * Joomla 4/5-Kernmodule (u. a. mod_menu für Dropdown-Zugänglichkeitstexte wie
 * "Weitere Informationen zu …") standardmäßig verwenden – das ist eigentlich
 * Bootstraps Utility-Klasse. Da dieses Template bewusst OHNE Bootstrap
 * ausgeliefert wird, fehlte diese Regel bisher, wodurch der eigentlich
 * unsichtbare Zugänglichkeitstext in Untermenüs sichtbar wurde. Beide Klassen
 * werden hier gleich behandelt.
 */
.sr-only,
.visually-hidden,
.hidden,
.invisible {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 2000;
    background: var(--fluffy-amber); color: var(--fluffy-black);
    padding: .75rem 1.25rem; border-radius: 0 0 var(--fluffy-radius-sm) 0;
    font-weight: 700;
}
.skip-link:focus { left: 0; }

:focus-visible {
    outline: 3px solid var(--fluffy-lightblue-dark);
    outline-offset: 2px;
}

.fluffy-container {
    width: 100%;
    max-width: var(--fluffy-container-width);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* =========================================================================
   2. HEADER & NAVIGATION
   ========================================================================= */
.fluffy-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: var(--fluffy-white);
    box-shadow: none;
    min-height: var(--fluffy-header-height);
    transition: box-shadow .2s ease;
}
.fluffy-header.is-scrolled { box-shadow: var(--fluffy-shadow-sm); }

.fluffy-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--fluffy-header-height);
    flex-wrap: wrap;
}

.fluffy-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-right: auto;
    color: var(--fluffy-brown);
    font-family: var(--fluffy-heading-font);
}
.fluffy-logo:hover { color: var(--fluffy-brown); }
.fluffy-logo__icon { font-size: 2.1rem; line-height: 1; }
.fluffy-logo__img { max-height: 52px; width: auto; }
.fluffy-logo__text {
    font-size: 1.7rem; font-weight: 800; color: var(--fluffy-amber-dark);
    letter-spacing: .5px;
}
.fluffy-logo__tagline {
    display: none;
    font-family: var(--fluffy-body-font);
    font-size: .82rem;
    font-weight: 600;
    color: var(--fluffy-grey);
    border-left: 2px solid var(--fluffy-lightblue);
    padding-left: .6rem;
}

.fluffy-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--fluffy-cream);
    border-radius: var(--fluffy-radius-sm);
    cursor: pointer;
    order: 3;
}
.fluffy-nav-toggle__bar {
    display: block; width: 22px; height: 3px; margin: 0 auto;
    background: var(--fluffy-brown); border-radius: 2px; transition: transform .25s ease, opacity .25s ease;
}
.fluffy-nav-toggle[aria-expanded="true"] .fluffy-nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.fluffy-nav-toggle[aria-expanded="true"] .fluffy-nav-toggle__bar:nth-child(2) { opacity: 0; }
.fluffy-nav-toggle[aria-expanded="true"] .fluffy-nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.fluffy-nav {
    flex-basis: 100%;
    order: 4;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.fluffy-nav.is-open { max-height: 600px; }

.fluffy-nav ul {
    list-style: none;
    margin: 0.5rem 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.fluffy-nav ul ul { padding-left: 1rem; }
.fluffy-nav li {
    display: flex;
    align-items: center;
}
.fluffy-nav a {
    display: flex;
    align-items: center;
    padding: .6rem .9rem;
    border-radius: var(--fluffy-radius-sm);
    font-weight: 700;
    color: var(--fluffy-brown);
    line-height: 1.3;
}
.fluffy-nav a:hover,
.fluffy-nav li.current > a,
.fluffy-nav li.active > a {
    background: var(--fluffy-amber);
    color: var(--fluffy-black);
}

/*
 * Joomlas mod_menu rendert für Einträge mit Untermenü zusätzlich einen
 * Bootstrap-Dropdown-Toggle-Button (Pfeil zum Auf-/Zuklappen per JS). Das
 * Auf-/Zuklappen übernehmen bei uns komplett CSS (Hover/Focus am Desktop,
 * einfach ausgeklappte Liste mobil) – der zusätzliche Button wird darum
 * ausgeblendet. Er sorgte vorher dafür, dass genau diese Menüpunkte höher/
 * anders ausgerichtet wirkten als die übrigen, weil er zusätzliche Höhe im
 * Listenelement einnahm.
 */
.fluffy-nav .dropdown-toggle,
.fluffy-nav [data-bs-toggle="dropdown"],
.fluffy-nav button[class*="toggle"],
.fluffy-nav .nav-item-toggle {
    display: none !important;
}
.fluffy-nav a.dropdown-toggle { display: flex !important; }

.fluffy-search { order: 2; }
.fluffy-search input[type="text"],
.fluffy-search input[type="search"] {
    border: 2px solid var(--fluffy-lightblue);
    border-radius: var(--fluffy-radius-pill);
    padding: .5rem 1rem;
    font-family: var(--fluffy-body-font);
    background: var(--fluffy-cream);
    max-width: 160px;
}
.fluffy-search button {
    border: none;
    background: var(--fluffy-amber);
    color: var(--fluffy-black);
    border-radius: var(--fluffy-radius-pill);
    padding: .5rem .9rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: .35rem;
}

@media (min-width: 992px) {
    .fluffy-logo__tagline { display: inline-block; }
    .fluffy-nav-toggle { display: none; }
    .fluffy-nav {
        flex-basis: auto; order: 2; max-height: none; overflow: visible; margin-left: 1rem;
    }
    .fluffy-nav ul { flex-direction: row; margin: 0; gap: .25rem; align-items: center; }
    .fluffy-nav ul ul {
        /*
         * Seit die Menüpunkte (li) per display:flex vertikal zentriert werden,
         * reicht "position: absolute" ohne festen Bezugspunkt nicht mehr aus –
         * der Browser berechnet die Ausgangsposition dann uneinheitlich und
         * das Untermenü kann über statt unter dem Hauptmenü erscheinen. Mit
         * top/left fest an die linke untere Ecke des jeweiligen Menüpunkts
         * (li, position: relative) verankert.
         */
        position: absolute; top: 100%; left: 0; z-index: 600;
        background: var(--fluffy-white); box-shadow: var(--fluffy-shadow-md);
        border-radius: var(--fluffy-radius-sm); padding: .5rem; min-width: 200px; flex-direction: column;
        opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s ease;
    }
    .fluffy-nav li { position: relative; }
    .fluffy-nav li:hover > ul,
    .fluffy-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }

    /*
     * Innerhalb des Dropdown-Panels ist jedes li zwar schon volle Breite
     * (flex-direction: column, align-items: stretch als Flex-Standard),
     * der Link selbst war aber nur so breit wie sein Text – der Amber-
     * Hover-Hintergrund wirkte dadurch wie eine schmale Pille statt einer
     * durchgehenden Zeile. Der Link füllt die Zeile jetzt komplett aus.
     */
    .fluffy-nav ul ul a { width: 100%; }
    .fluffy-search { order: 3; }
}

/* =========================================================================
   3. HERO
   Hintergrund/Farbverlauf geht randlos über die volle Bildschirmbreite
   (wie ursprünglich in v1.0.0). Der eigentliche Modul-Inhalt (Text, Bild)
   liegt in .fluffy-container und ist damit auf Contentbreite begrenzt.
   Bilder im Hero werden bewusst auf die volle Containerbreite gezogen
   statt in ihrer kleinen Originalgröße zentriert zu bleiben.
   ========================================================================= */
.fluffy-hero {
    position: relative;
    background: linear-gradient(160deg, var(--fluffy-lightblue) 0%, #cdeaf4 55%, var(--fluffy-white) 100%);
    padding: 3rem 0 5rem;
    text-align: center;
    overflow: hidden;
}
.fluffy-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 85% 15%, rgba(245,166,35,.25), transparent 45%);
    pointer-events: none;
}
.fluffy-hero h1, .fluffy-hero h2 { color: var(--fluffy-brown); }
.fluffy-hero p { font-size: 1.15rem; max-width: 640px; margin-inline: auto; }
.fluffy-hero .fluffy-container {
    position: relative;
}
/*
 * Per Element-Inspektion bestätigt: Ein Custom-HTML-Modul rendert das Bild
 * als .fluffy-container > div.mod-custom.custom > p > img. Ohne feste
 * Breite auf dem div.mod-custom bzw. dem <p> entsteht ein CSS-Zirkelbezug:
 * "width: 100%" auf dem <img> hat dann keinen eindeutigen Bezugsrahmen und
 * der Browser fällt auf die Bild-Eigengröße zurück (erkennbar am Seiten-
 * verhältnis 1920:620 im gerenderten Ergebnis). Darum Container und Modul-
 * Wrapper explizit auf volle Blockbreite fixieren. Der Bild-Absatz nur dann
 * (:has(img)), damit ein reiner Text-Absatz im Hero weiterhin zentriert und
 * auf 640px begrenzt bleibt (siehe ".fluffy-hero p" oben).
 */
.fluffy-hero .fluffy-container,
.fluffy-hero .mod-custom {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}
.fluffy-hero p:has(img) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
}
.fluffy-hero .fluffy-container img,
.fluffy-hero img {
    /*
     * !important, weil Bilder aus dem Joomla-Editor häufig ein inline
     * style="width:…px;height:…px" mitbekommen (z. B. wenn im Editor per
     * Ziehpunkt skaliert wurde). Ein Inline-Style schlägt jede externe
     * CSS-Regel ohne !important – daher hier erzwungen.
     */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--fluffy-radius-md);
    box-shadow: var(--fluffy-shadow-md);
}
.fluffy-hero__wave {
    position: absolute; bottom: -1px; left: 0; width: 100%; height: 48px;
    background: var(--fluffy-white);
    clip-path: polygon(0 100%, 0 40%, 5% 55%, 15% 30%, 25% 55%, 35% 25%, 45% 55%, 55% 20%, 65% 55%, 75% 30%, 85% 55%, 95% 35%, 100% 55%, 100% 100%);
}

/* =========================================================================
   4. BREADCRUMBS
   Bewusst KEIN eigener Vollbreite-Balken mehr zwischen Hero und Main (das
   war der zuvor gemeldete "braune Balken" – ein div.fluffy-breadcrumbs, das
   auch ohne Inhalt als schmaler Streifen sichtbar blieb). Läuft jetzt
   dezent oben in der Content-Karte mit, in gleicher Breite wie der Artikel.
   ========================================================================= */
.fluffy-breadcrumbs {
    font-size: .82rem;
    margin-bottom: 1.2rem;
}
.fluffy-breadcrumbs ul {
    list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; color: var(--fluffy-grey);
}
.fluffy-breadcrumbs a { color: var(--fluffy-brown-light); font-weight: 600; }
.fluffy-breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: .3rem; color: var(--fluffy-amber-dark); }

/* =========================================================================
   5. BUTTONS
   ========================================================================= */
.fluffy-btn,
.com-content-category-blog__readmore a,
.readmore a,
button.btn,
.item-page .btn,
.affiliate-button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--fluffy-body-font);
    font-weight: 700;
    padding: .65rem 1.4rem;
    border-radius: var(--fluffy-radius-pill);
    background: var(--fluffy-brown);
    color: var(--fluffy-white) !important;
    border: none;
    cursor: pointer;
    box-shadow: var(--fluffy-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.fluffy-btn:hover,
.com-content-category-blog__readmore a:hover,
.readmore a:hover,
button.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--fluffy-shadow-md);
    background: var(--fluffy-brown-light);
    color: var(--fluffy-white) !important;
}
.fluffy-btn--amber { background: var(--fluffy-amber); color: var(--fluffy-black) !important; }
.fluffy-btn--amber:hover { background: var(--fluffy-amber-dark); color: var(--fluffy-black) !important; }
.fluffy-btn--outline {
    background: transparent; color: var(--fluffy-brown) !important; border: 2px solid var(--fluffy-brown);
    box-shadow: none;
}

/*
 * Affiliate-Button im Beitragstext (z. B. "Auf Amazon ansehen"-Link mit
 * Amazon-Partnerprogramm-Hinweis). Vom Kunden aus dem alten Template
 * übernommenes Markup:
 *   <div class="affiliate-container">
 *     <a class="affiliate-button" href="..." target="_blank" rel="noopener">
 *       Auf Amazon ansehen
 *     </a>
 *     <span class="affiliate-hint">* Affiliate-Link</span>
 *   </div>
 * Der Button-Look (Pille, Schrift, Hover) kommt automatisch über die
 * allgemeine Button-Regel oben (".affiliate-button" ist dort mit gelistet)
 * plus der Amber-Farbe hier; nur Container-Abstand und der kleine
 * Hinweistext werden zusätzlich definiert.
 */
.affiliate-button {
    background: var(--fluffy-amber);
    color: var(--fluffy-black) !important;
}
.affiliate-button:hover {
    background: var(--fluffy-amber-dark);
    color: var(--fluffy-black) !important;
}
.affiliate-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin: 1.5rem 0;
}
.affiliate-hint {
    font-size: .8rem;
    color: var(--fluffy-grey);
    font-style: italic;
}

/* =========================================================================
   6. HAUPTLAYOUT
   ========================================================================= */
.fluffy-main { padding: 2.5rem 0 3.5rem; }
.fluffy-main__inner { display: block; }
.fluffy-content { min-width: 0; }

@media (min-width: 992px) {
    .fluffy-main.has-sidebar .fluffy-main__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 2.5rem;
        align-items: start;
    }
}

/* Karten / Modul-Chrome */
.fluffy-card {
    background: var(--fluffy-white);
    border-radius: var(--fluffy-radius-md);
    box-shadow: var(--fluffy-shadow-sm);
    padding: 1.4rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(92,58,30,.08);
}
.fluffy-card__title {
    font-size: 1.1rem;
    color: var(--fluffy-amber-dark);
    border-bottom: 2px solid var(--fluffy-lightblue);
    padding-bottom: .5rem;
    margin-bottom: .8rem;
}

/* =========================================================================
   7. BUCH-GRID (Kategorie-/Blogansicht der Startseite)
   Zielt bewusst auf mehrere Joomla-Markup-Varianten (BEM seit J4/5 + Fallback),
   damit die Kartenoptik unabhängig von der genauen Core-Version funktioniert.
   ========================================================================= */
.fluffy-content .com-content-category-blog,
.fluffy-content .blog,
.fluffy-content .items-row,
.fluffy-content .cat-list-row-1 {
    display: grid !important;
    /* Fest auf 2 Karten pro Zeile (statt automatisch so viele wie passen –
       das führte je nach Bildschirm-/Sidebar-Breite zu 3 oder mehr Spalten).
       Auf sehr schmalen Bildschirmen (Mobile) nur 1 Spalte, siehe Media
       Query unten. */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fluffy-gap);
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}
@media (max-width: 480px) {
    .fluffy-content .com-content-category-blog,
    .fluffy-content .blog,
    .fluffy-content .items-row,
    .fluffy-content .cat-list-row-1 {
        grid-template-columns: 1fr;
    }
}
/*
 * Manche Joomla-Konfigurationen (z. B. "Spalten"-Einstellung im Menüpunkt)
 * bündeln je Zeile mehrere Beiträge zusätzlich in eigene Bootstrap-"row"/
 * "col-*"-Wrapper-DIVs. Läge ein solcher Wrapper zwischen dem Grid-
 * Container und den einzelnen Karten, würde er selbst zur Grid-Spalte statt
 * die Karten einzeln – dadurch könnten z. B. 3 Karten nur als 2 breite
 * Zellen (je Zeile eine) erscheinen. display:contents blendet solche
 * Zwischen-Wrapper aus dem Box-Modell aus, ihre Kind-Elemente (die Karten)
 * werden dadurch direkt zu Grid-Kindern.
 */
.fluffy-content .com-content-category-blog > .row,
.fluffy-content .blog > .row,
.fluffy-content .items-row > .row,
.fluffy-content .com-content-category-blog [class*="col-"],
.fluffy-content .blog [class*="col-"],
.fluffy-content .items-row [class*="col-"] {
    display: contents;
}
/*
 * Per Element-Inspektion bestätigt (Joomla 5, com_content Kategorie-Blog):
 * Joomla gruppiert die Beiträge selbst in zusätzliche Wrapper
 * ".com-content-category-blog__items" – mit Modifier-Klassen wie
 * "items-leading" (führender Beitrag) und "masonry-4" (restliche Beiträge,
 * mit Joomlas EIGENEM CSS-Mehrspalten-/Masonry-Layout für diese Gruppe).
 * Dadurch landen nicht alle Karten als direkte Kinder in unserem Grid,
 * sondern nur diese 1-2 Gruppen-Wrapper – und "masonry-4" sorgt für das
 * gestapelte, ungleichmäßige Erscheinungsbild statt eines sauberen Rasters.
 * display:contents blendet die Gruppen-Wrapper aus dem Box-Modell aus,
 * wodurch alle einzelnen Karten direkte Grid-Kinder werden und gleich-
 * mäßig im Raster erscheinen – unabhängig von Joomlas Leading/Intro-
 * Aufteilung im Menüpunkt.
 */
.fluffy-content .com-content-category-blog__items {
    display: contents;
}
/*
 * Seiten-Navigation (Pagination): Joomla rendert diese als weiteres
 * Geschwister-Element INNERHALB desselben Containers, den wir zum 2-Spalten-
 * Grid gemacht haben. Ohne explizite Anweisung behandelt der Browser sie
 * dadurch wie eine ganz normale weitere Raster-Zelle (z. B. neben der
 * letzten Buch-Karte, statt darunter) – bestätigt per Screenshot: Bei 3
 * Büchern landete "Seite 1 von 2" exakt in der 4. Zelle des 2x2-Rasters.
 * Per Element-Inspektion bestätigtes echtes Markup (v1.0.15-Korrektur):
 *   div.com-content-category-blog.blog          (unser Grid-Container)
 *     div.com-content-category-blog__navigation  <- DAS eigentliche Grid-Kind
 *       div.com-content-category-blog__pagination
 *         nav.pagination__wrapper
 *           ul.pagination.ms-0.mb-4
 * Die vorherige Regel zielte auf ".pagination" (also das <ul>) – das <ul>
 * steckt aber drei normale (nicht per display:contents aufgelöste) Ebenen
 * tief und ist dadurch selbst KEIN Grid-Kind, weshalb grid-column dort
 * wirkungslos blieb (im DevTools am Info-Symbol neben der Eigenschaft zu
 * erkennen). Fix: grid-column jetzt auf das tatsächliche Grid-Kind
 * ".com-content-category-blog__navigation" gesetzt – dadurch bekommt es
 * automatisch eine eigene, volle Zeile UNTER allen Karten.
 */
.fluffy-content .com-content-category-blog__navigation {
    grid-column: 1 / -1;
}
/* Defensive Ergänzung, falls Joomla in anderen Versionen abweicht und die
   Pagination stattdessen direkt (ohne "__navigation"-Wrapper) im Grid landet. */
.fluffy-content .com-content-category-blog__pagination,
.fluffy-content .com-content-category-blog > .pagination,
.fluffy-content .blog > .pagination,
.fluffy-content .items-row > .pagination {
    grid-column: 1 / -1;
}

/*
 * Karten-Layout seit v1.0.14 (auf Wunsch geändert): Überschrift zuerst oben
 * über die volle Kartenbreite, darunter Cover-Bild links + Fließtext rechts
 * nebeneinander, Weiterlesen-Button unten über die volle Breite. Technisch
 * per CSS-Grid mit benannten Bereichen gelöst: Die Karte selbst wird zum
 * Grid-Container; ".item-content" (Joomlas Text-Wrapper) wird per
 * display:contents "aufgelöst" (wie zuvor schon bei den __items-Wrappern),
 * wodurch seine Kinder (Titel, Absätze, Weiterlesen-Link) direkt zu Grid-
 * Kindern der Karte werden – auch wenn sie im DOM tiefer verschachtelt sind.
 * Per Element-Inspektion bestätigtes Markup:
 *   div.com-content-category-blog__item.blog-item
 *     figure.item-image > img
 *     div.item-content
 *       div.page-header > h2 > a
 *       p (Intro-Text, ein oder mehrere Absätze)
 *       p.readmore > a.btn
 * Hinweis: ".item"/"article.item" als Karten-Selektor griff nie wirklich
 * (die Karte trägt weder den Tag <article> noch die exakte Klasse "item"),
 * daher jetzt durch die bestätigten Klassen "com-content-category-blog__item"
 * und "blog-item" ersetzt.
 */
.com-content-category-blog__item,
.blog-item {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-auto-rows: auto;
    column-gap: 1rem;
    row-gap: .35rem;
    align-items: start;
    background: var(--fluffy-white);
    border-radius: var(--fluffy-radius-md);
    box-shadow: var(--fluffy-shadow-sm);
    overflow: hidden;
    padding: 1.1rem;
    transition: transform .28s ease, box-shadow .28s ease;
    border: 1px solid rgba(92,58,30,.08);
}
@media (max-width: 480px) {
    .com-content-category-blog__item,
    .blog-item {
        grid-template-columns: 104px 1fr;
    }
}
.com-content-category-blog__item:hover,
.blog-item:hover {
    transform: translateY(-6px) rotate(-.4deg);
    box-shadow: var(--fluffy-shadow-lg);
}

.com-content-category-blog__item .item-content,
.blog-item .item-content {
    display: contents;
}

/*
 * Platzierung per Grid-Linien statt benannter Bereiche (grid-area), weil
 * die Karte eine UNBEKANNTE Anzahl Fließtext-Absätze enthalten kann (1, 2
 * oder mehr <p>). Mehrere Elemente auf denselben grid-area zu setzen hätte
 * sie exakt übereinander gestapelt (genau der in v1.0.14 gemeldete Bug:
 * überlappender Text) – grid-area ist für "eine Zelle, ein Kind" gedacht,
 * nicht zum Stapeln mehrerer Geschwister. Stattdessen: Titel und Bild
 * bekommen eine feste Position, die Absätze bekommen nur die Spalte fest
 * zugewiesen (grid-column, OHNE grid-row) – der Browser platziert dadurch
 * automatisch jeden Absatz in eine eigene, neue Zeile derselben Spalte
 * (CSS-Grid-Auto-Placement, Standardverhalten, kein Rätselraten). Der
 * Weiterlesen-Button bekommt weder Spalte noch Zeile fest zugewiesen und
 * landet dadurch automatisch in der ersten Zeile, in der beide Spalten
 * frei sind – also zuverlässig unterhalb von Bild UND Text, unabhängig von
 * der Absatzanzahl.
 */
.com-content-category-blog__item .page-header,
.blog-item .page-header,
h2.item-title,
h3.item-title {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 1.25rem;
    margin: 0;
    padding: 0;
    /* Auf max. 2 Zeilen begrenzen, Rest mit "…" abschneiden (nur Grid-
       Ansicht betroffen, Artikel-Einzelseite nutzt eine eigene, nicht
       begrenzte Titel-Regel in Abschnitt 8). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}
.com-content-category-blog__item .page-header a,
.blog-item .page-header a,
.item-title a { color: var(--fluffy-brown); }

/*
 * Cover-Bild: feste Thumbnail-Breite links, Spalte 1, überspannt mehrere
 * Zeilen (span 4) – deckt damit bis zu 4 Text-/Meta-Absätze in Spalte 2 ab,
 * ohne dass Bild und Text sich überlappen. Bei längerem Text als 4 Zeilen
 * bleibt ab Zeile 5 die Bildspalte leer (kein Fehler, nur weniger elegant –
 * betrifft aktuell keines der vorhandenen Bücher, siehe Änderungsprotokoll).
 * WICHTIG: Dieses Bild trägt bei manchen Büchern zusätzlich die Klasse
 * "bildeinleitung" (vermutlich weil das Cover über einen Bild-Tag im
 * Intro-Text statt über das Intro-Bild-Feld eingebunden wurde, siehe
 * Abschnitt 16/README 3b). Die dortige Regel würde das Bild sonst auf
 * 250px zwingen und aus dem Grid-Fluss floaten – hier bewusst mit höherer
 * Selektor-Spezifität + eigenem !important übersteuert.
 */
.com-content-category-blog__item > figure,
.blog-item > figure,
.com-content-category-blog__item > .item-image,
.blog-item > .item-image {
    grid-column: 1;
    grid-row: 2 / span 4;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
    margin: 0 !important;
    float: none !important;
    border-radius: var(--fluffy-radius-sm);
    overflow: hidden;
    box-shadow: var(--fluffy-shadow-sm);
    background: var(--fluffy-lightblue);
}
.com-content-category-blog__item > figure img,
.blog-item > figure img,
.com-content-category-blog__item > .item-image img,
.blog-item > .item-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    transition: transform .35s ease;
}
.com-content-category-blog__item:hover > figure img,
.blog-item:hover > figure img,
.com-content-category-blog__item:hover > .item-image img,
.blog-item:hover > .item-image img {
    transform: scale(1.06);
}

/* Fließtext + Meta: jeder Absatz einzeln in Spalte 2, eigene Zeile (s. o.) */
.com-content-category-blog__item .item-content > p:not(.readmore),
.blog-item .item-content > p:not(.readmore),
.com-content-category-blog__item .item-content [class*="article-info"],
.blog-item .item-content [class*="article-info"] {
    grid-column: 2;
    margin: 0 0 .4rem;
    padding: 0;
    font-size: .95rem;
    color: var(--fluffy-grey);
}

/* Weiterlesen-Button: volle Kartenbreite, automatisch unterhalb von allem */
.com-content-category-blog__item .item-content > p.readmore,
.blog-item .item-content > p.readmore {
    grid-column: 1 / -1;
    margin: .5rem 0 0;
    padding: 0;
}

.com-content-category-blog__info,
.item .article-info,
.item .createdby,
.item .create,
[class*="__info"],
.item dl,
article.item dl,
[class*="article-info"] {
    padding: 0 !important;
    margin: 0 0 .5rem !important;
    font-size: .78rem;
    color: var(--fluffy-brown-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left !important;
    /*
     * Bewusst KEIN flex/grid hier: Falls Joomla oder mitgelieferte Demo-
     * Inhalte dem Meta-Block selbst schon eine Tabellen-/Grid-/Float-Optik
     * mitgeben (z. B. feste Spaltenbreiten für Label/Wert), gewinnt ein
     * einfaches "display:block !important" zuverlässig gegen jede fremde
     * Layout-Methode und die einzelnen Einträge fließen als normaler Text.
     */
    display: block !important;
    float: none !important;
}
/*
 * Der Meta-Block (Autor, Kategorie, Datum, Zugriffe) wird von Joomla-Core
 * als <dl> ausgegeben. Das erste <dt> ist dabei nur eine unsichtbar gemeinte
 * Zwischenüberschrift (z. B. "Details") für Screenreader – ohne Bootstrap
 * fehlte bisher die Regel, die sie versteckt, wodurch sie als eigene Zeile
 * sichtbar wurde. Wir blenden generell alle <dt> in diesem Kontext aus und
 * zwingen die <dd>-Einträge (Autor/Kategorie/Datum/Zugriffe) unabhängig von
 * einer eventuell mitgelieferten Tabellen-/Grid-/Float-Formatierung in
 * normalen, linksbündigen Inline-Textfluss.
 */
.item dl dt,
article.item dl dt,
[class*="article-info"] dt {
    display: none !important;
}
.item dl dd,
article.item dl dd,
[class*="article-info"] dd {
    display: inline !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
}
/*
 * Kein Trennpunkt zwischen den Meta-Angaben in der Blog-/Grid-Ansicht –
 * nur ein normaler Abstand. In der Einzelartikelansicht (Abschnitt 8)
 * bleibt der Punkt als Trenner erhalten.
 */
.item dl dd,
article.item dl dd,
[class*="article-info"] dd {
    margin-right: .7rem !important;
}

.com-content-category-blog__readmore,
.readmore,
[class*="__readmore"] {
    padding: 0;
    margin-top: auto;
    padding-top: .75rem;
}

/* Kategorie-Beschreibung / Intro-Text oben auf der Startseite */
.category-desc, .com-content-category-blog__description {
    max-width: 720px;
    margin: 0 auto 2rem;
    text-align: center;
    font-size: 1.05rem;
}

/*
 * Pagination (Seitenzahlen, z. B. "1 2 3 …" unter langen Artikellisten).
 * Bewusst auf "ul.pagination" beschränkt (nicht einfach ".pagination"):
 * Joomla verwendet die Klasse "pagination" nämlich noch für ein zweites,
 * völlig anderes Bauteil – den Beitrag-Vor/Zurück-Wechsler
 * (<span class="pagination ms-0"> in <nav class="pagenavigation">, siehe
 * Abschnitt weiter unten). Ohne dieses Scoping hätte diese Regel auch
 * dessen Icons/Text-Spans zu Kreisen gemacht (genau der gemeldete Bug).
 */
ul.pagination, ul.pagination-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
    padding: 0;
    margin: 2rem 0 0;
}
/*
 * Bewusst auf ".page-link" beschränkt (nicht mehr pauschal jedes <a>/<span>):
 * Die "Erste Seite"/"Vorherige Seite"/"Nächste Seite"/"Letzte Seite"-Buttons
 * enthalten jeweils ein VERSCHACHTELTES Icon-<span> (z. B.
 * <span class="page-link"><span class="icon-angle-double-left"></span></span>).
 * Mit dem alten, generischen "span"-Selektor wurde auch dieses innere Icon-
 * Span zur eigenen 40x40-Pille gestylt (Kreis-im-Kreis-Bug, dieselbe Ursache
 * wie beim Vor/Zurück-Wechsler in v1.0.9). Jetzt bekommt nur noch das
 * äußere ".page-link" die Pillen-Optik.
 */
ul.pagination .page-link, ul.pagination-list .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 .6rem;
    border-radius: var(--fluffy-radius-pill);
    background: var(--fluffy-cream);
    color: var(--fluffy-brown);
    font-weight: 700;
    text-decoration: none;
}
ul.pagination .active .page-link, ul.pagination-list .active .page-link {
    background: var(--fluffy-amber); color: var(--fluffy-black);
}
ul.pagination .disabled .page-link, ul.pagination-list .disabled .page-link {
    opacity: .4;
    cursor: default;
}
/*
 * Erste/Vorherige/Nächste/Letzte-Seite-Buttons: Joomla liefert dafür nur
 * ein leeres Icon-<span> (z. B. class="icon-angle-double-left"), das einen
 * Icon-Font braucht, den dieses Template nicht lädt – ohne Ersatz bleiben
 * das leere, unbeschriftete Pillen übrig (genau der gemeldete Bug: 4 von
 * 6 Buttons ohne Zeichen). Ersetzt hier durch einfache Unicode-Pfeile.
 */
ul.pagination [class*="icon-angle-double-left"]::before,
ul.pagination-list [class*="icon-angle-double-left"]::before { content: "\00AB"; }
ul.pagination [class*="icon-angle-double-right"]::before,
ul.pagination-list [class*="icon-angle-double-right"]::before { content: "\00BB"; }
ul.pagination [class*="icon-angle-left"]::before,
ul.pagination-list [class*="icon-angle-left"]::before { content: "\2039"; }
ul.pagination [class*="icon-angle-right"]::before,
ul.pagination-list [class*="icon-angle-right"]::before { content: "\203A"; }

/*
 * Beitrag-Vor/Zurück-Wechsler (nav.pagenavigation, Artikelseite unten).
 * Per Element-Inspektion bestätigtes Markup:
 *   <nav class="pagenavigation">
 *     <span class="pagination ms-0">
 *       <a class="btn btn-sm btn-secondary previous">
 *         <span class="visually-hidden">Vorheriger Beitrag: …</span>
 *         <span class="icon-chevron-left" aria-hidden="true"></span>
 *         <span aria-hidden="true">Zurück</span>
 *       </a>
 *       <a class="btn btn-sm btn-secondary next">…</a>
 *     </span>
 *   </nav>
 * Die .btn-Klasse wird bereits durch unsere allgemeine Button-Regel
 * (Abschnitt 5) als brauner Pill-Button gestylt. Die Chevron-Icons nutzen
 * einen Icon-Font, den dieses Template nicht lädt – ohne Ausblenden bleibt
 * nur ein leerer/unschöner Platzhalter übrig, daher hier entfernt.
 */
.pagenavigation {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.pagenavigation .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagenavigation .icon-chevron-left,
.pagenavigation .icon-chevron-right,
.pagenavigation [class*="icon-chevron"] {
    display: none;
}

/* =========================================================================
   8. ARTIKEL-/BUCHSEITE (Einzelansicht)
   ========================================================================= */
.item-page,
.com-content-article {
    background: var(--fluffy-white);
    border-radius: var(--fluffy-radius-lg);
    box-shadow: var(--fluffy-shadow-sm);
    padding: clamp(1.5rem, 4vw, 3rem);
}

.item-page .page-header,
.com-content-article__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    text-align: center;
    margin-bottom: .3rem;
}

.item-page .article-info,
.com-content-article__info {
    text-align: center !important;
    color: var(--fluffy-brown-light);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 1.6rem !important;
    display: block !important;
    float: none !important;
}
/* Gleiche dl/dt/dd-Bereinigung wie im Buch-Grid (siehe Abschnitt 7) */
.item-page .article-info dt,
.com-content-article__info dt { display: none !important; }
.item-page .article-info dd,
.com-content-article__info dd {
    display: inline !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}
.item-page .article-info dd:not(:last-child)::after,
.com-content-article__info dd:not(:last-child)::after {
    content: "•"; margin: 0 .8rem; color: var(--fluffy-lightblue-dark);
    font-weight: 400; text-transform: none;
}

/*
 * Bild links, Text rechts umfließend. Vorheriger Bug: Der Schatten/Rahmen
 * wirkte breiter als das sichtbare Bild. Ursache: ".item-page .item-image"
 * (der Bild-Wrapper, z. B. <figure>) UND "img:first-child" darin wurden
 * BEIDE unabhängig mit derselben max-width/Schatten-Regel gestylt – ohne
 * dass das <img> selbst auf volle Breite SEINES Wrappers gezwungen wurde,
 * blieb es bei seiner (kleineren) Eigengröße linksbündig INNERHALB des
 * breiteren, zentrierten Wrapper-Rahmens stehen, wodurch der Schatten des
 * Wrappers sichtbar über das Bild hinausragte. Jetzt getrennt behandelt:
 * Wrapper bekommt Float + feste Breite + Schatten, das <img> darin füllt
 * diese Breite zu 100 % aus (kein eigener, zweiter Schatten/Radius mehr).
 */
.item-page .item-image,
.com-content-article__introimage {
    float: left;
    width: clamp(180px, 42%, 280px);
    margin: 0 1.5rem 1.25rem 0;
    border-radius: var(--fluffy-radius-md);
    overflow: hidden;
    box-shadow: var(--fluffy-shadow-md);
}
.item-page .item-image img,
.com-content-article__introimage img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
/*
 * Fallback für den Fall, dass Joomla das Bild OHNE umschließenden Wrapper
 * direkt als erstes Kind in den Fließtext ausgibt: Bewusst mit ">" (nur
 * DIREKTES Kind) statt eines allgemeinen Nachfahren-Selektors, damit diese
 * Regel NICHT zusätzlich greift, wenn das Bild doch in einem Wrapper steckt
 * (sonst genau derselbe Doppel-Styling-Bug wie oben beschrieben).
 */
.com-content-article__fulltext > img:first-child {
    float: left;
    width: clamp(180px, 42%, 280px);
    height: auto;
    margin: 0 1.5rem 1.25rem 0;
    border-radius: var(--fluffy-radius-md);
    box-shadow: var(--fluffy-shadow-md);
}

.item-page .tags,
.com-content-article__tags {
    list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 2rem 0 0;
}
.item-page .tags a,
.com-content-article__tags a {
    background: var(--fluffy-lightblue);
    color: var(--fluffy-brown);
    padding: .3rem .9rem;
    border-radius: var(--fluffy-radius-pill);
    font-size: .82rem;
    font-weight: 700;
}

/* Amazon/CTA-Klasse, frei im Beitragstext nutzbar: <p class="fluffy-buy"> */
.fluffy-buy {
    text-align: center;
    margin: 2rem 0;
}

/* =========================================================================
   9. SIDEBAR
   ========================================================================= */
.fluffy-sidebar { min-width: 0; }

/* =========================================================================
   10. FOOTER
   ========================================================================= */
.fluffy-footer {
    position: relative;
    background: var(--fluffy-brown);
    color: var(--fluffy-cream);
    padding-top: 3rem;
}
.fluffy-footer__wave {
    position: absolute; top: -47px; left: 0; width: 100%; height: 48px;
    background: var(--fluffy-brown);
    clip-path: polygon(0 100%, 0 60%, 10% 40%, 20% 65%, 30% 35%, 40% 65%, 50% 30%, 60% 65%, 70% 35%, 80% 65%, 90% 40%, 100% 60%, 100% 100%);
}
.fluffy-footer a { color: var(--fluffy-amber-light); }
.fluffy-footer a:hover { color: var(--fluffy-white); }
.fluffy-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
}
.fluffy-footer__brand { font-family: var(--fluffy-heading-font); font-size: 1.3rem; color: var(--fluffy-amber); }
.fluffy-footer__col ul { list-style: none; padding: 0; margin: 0; }
.fluffy-footer__col li { margin-bottom: .4rem; }

.fluffy-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 1rem 0 1.5rem;
}
.fluffy-footer__bottom-inner {
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between;
    font-size: .85rem;
}
.fluffy-footer__copyright { margin: 0; color: rgba(255,252,246,.75); }
.fluffy-footer__legal { display: flex; gap: 1rem; flex-wrap: wrap; }
.fluffy-footer__legal a { font-weight: 700; cursor: pointer; }

@media (min-width: 768px) {
    .fluffy-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   11. MODAL (Impressum & Datenschutz – ausgelöst durch Footer-Links)
   ========================================================================= */
.fluffy-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 1rem;
    background: rgba(35, 33, 29, .55);
    overflow-y: auto;
}
.fluffy-modal.is-open { display: flex; }
.fluffy-modal__dialog {
    background: var(--fluffy-white);
    color: var(--fluffy-black);
    border-radius: var(--fluffy-radius-md);
    max-width: 640px;
    width: 100%;
    padding: 2rem;
    box-shadow: var(--fluffy-shadow-lg);
    position: relative;
    animation: fluffy-modal-in .25s ease;
}
@keyframes fluffy-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.fluffy-modal__close {
    position: absolute; top: .75rem; right: .75rem;
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: var(--fluffy-cream); color: var(--fluffy-brown);
    font-size: 1.1rem; cursor: pointer;
}
.fluffy-modal__close:hover { background: var(--fluffy-amber); }
.fluffy-modal h2 { margin-top: 0; }

/* =========================================================================
   12. BACK TO TOP
   ========================================================================= */
.fluffy-to-top {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 400;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--fluffy-amber); color: var(--fluffy-black);
    border: none; font-size: 1.3rem; font-weight: 800; cursor: pointer;
    box-shadow: var(--fluffy-shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all .25s ease;
}
.fluffy-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fluffy-to-top:hover { background: var(--fluffy-amber-dark); }

/* =========================================================================
   13. FEHLER- / OFFLINE-SEITE
   ========================================================================= */
.fluffy-error {
    min-height: 70vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(160deg, var(--fluffy-lightblue), var(--fluffy-white));
}
.fluffy-error__card {
    background: var(--fluffy-white);
    border-radius: var(--fluffy-radius-lg);
    box-shadow: var(--fluffy-shadow-md);
    padding: 3rem 2rem;
    text-align: center;
    max-width: 480px;
}
.fluffy-error__icon { font-size: 3.5rem; display: block; margin-bottom: 1rem; }
.fluffy-error__code { font-family: var(--fluffy-heading-font); font-size: 3rem; color: var(--fluffy-amber-dark); margin: 0; }

/* =========================================================================
   14. FORMULARE (Kontakt, Suche, etc.)
   ========================================================================= */
input, textarea, select {
    font-family: var(--fluffy-body-font);
    border: 2px solid var(--fluffy-lightblue);
    border-radius: var(--fluffy-radius-sm);
    padding: .6rem .9rem;
    width: 100%;
}
label { font-weight: 700; color: var(--fluffy-brown); display: block; margin-bottom: .3rem; }

/* =========================================================================
   16. KUNDEN-KLASSE "bildeinleitung"
   Frei im Editor nutzbare Klasse für Bilder im Fließtext (z. B. Kapitel-
   Illustrationen), die links vom Text schweben. Vom Kunden direkt im
   Template ergänzt und hier in den Master-Bestand übernommen, damit sie bei
   künftigen Template-Updates nicht verloren geht. Einzige inhaltliche
   Ergänzung gegenüber der Kundenversion: ein Mobile-Fallback, da die feste
   Breite von 250px auf sehr schmalen Bildschirmen (z. B. 320–360px) kaum
   noch Platz für lesbaren Fließtext daneben lässt.
   ========================================================================= */
.bildeinleitung {
    width: 250px !important;
    height: auto !important;
    float: left !important;
    margin-top: 2px;
    margin-left: 0px;
    margin-right: 15px;
    margin-bottom: 0px;
    border: none !important;
}

/* ALLE Bilder, die sich darin befinden könnten */
.bildeinleitung img,
img.bildeinleitung {
    width: 250px !important;
    height: auto !important;
    max-height: 100% !important; /* Zwingt das Bild, nicht höher als der Container zu sein */
    display: block !important;
    object-fit: contain !important;
    margin-top: 2px;
    margin-left: 0px;
    margin-right: 15px;
    margin-bottom: 0px;
    border: none !important;
}

@media (max-width: 480px) {
    .bildeinleitung,
    img.bildeinleitung {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: .75rem !important;
    }
}

/* =========================================================================
   17. DRUCK
   ========================================================================= */
@media print {
    .fluffy-header, .fluffy-hero, .fluffy-footer, .fluffy-to-top, .fluffy-nav-toggle { display: none !important; }
}