/* ============================================================================
   ORMADO SHOP · ormado-theme.css für JTL-Shop 5 / NOVA (Theme "clear")  v2
   Bootstrap-4-kompatibel: explizite Farbwerte, keine --bs-btn-* Variablen.
   Einsatzort (update-sicher): templates/ormado/css/ormado-theme.css,
   eingebunden über <Minify> in templates/ormado/template.xml.
   Nur Optik – keine Funktionslogik. Staffelpreise etc. bleiben JTL-Standard.
   ============================================================================ */

:root {
    --ormado-espresso: #4A3024;
    --ormado-espresso-dark: #502D1E;
    --ormado-gold: #E3B142;
    --ormado-gold-dark: #D59729;
    --ormado-cream: #F7F2E8;
    --ormado-cream-soft: #FBF7F0;
    --ormado-highlight: #FFE7B2;
    --ormado-brown-text: #6B4A3C;
    --ormado-ink: #2B211B;
}

/* ---------------------------------------------------------------- 1. Basis */
body {
    background-color: var(--ormado-cream);
    color: var(--ormado-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ormado-espresso);
}

a {
    color: var(--ormado-espresso-dark);
}
a:hover, a:focus {
    color: var(--ormado-gold-dark);
}

/* ------------------------------------------------------------- 2. Buttons */
/* Primär: Espresso-Braun (statt NOVA-Gelb #F8BF00) */
.btn-primary {
    background-color: var(--ormado-espresso) !important;
    border-color: var(--ormado-espresso) !important;
    color: #fff !important;
    border-radius: 50rem;
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--ormado-espresso-dark) !important;
    border-color: var(--ormado-espresso-dark) !important;
    color: #fff !important;
}

/* Sekundär: Gold */
.btn-secondary,
.btn-warning {
    background-color: var(--ormado-gold) !important;
    border-color: var(--ormado-gold) !important;
    color: var(--ormado-espresso) !important;
    border-radius: 50rem;
    font-weight: 600;
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-warning:hover, .btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: var(--ormado-gold-dark) !important;
    border-color: var(--ormado-gold-dark) !important;
    color: var(--ormado-espresso) !important;
}

.btn-outline-primary {
    border-color: var(--ormado-espresso) !important;
    color: var(--ormado-espresso) !important;
    background-color: transparent !important;
    border-radius: 50rem;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ormado-espresso) !important;
    color: #fff !important;
}

/* Warenkorb-Buttons: Gold, damit sie sofort ins Auge fallen */
#add-to-cart .btn-primary,
.btn-add-to-cart,
.add-to-cart,
.productbox .btn-primary {
    background-color: var(--ormado-gold) !important;
    border-color: var(--ormado-gold) !important;
    color: var(--ormado-espresso) !important;
}
#add-to-cart .btn-primary:hover, #add-to-cart .btn-primary:focus,
.btn-add-to-cart:hover, .btn-add-to-cart:focus,
.add-to-cart:hover, .add-to-cart:focus,
.productbox .btn-primary:hover, .productbox .btn-primary:focus {
    background-color: var(--ormado-gold-dark) !important;
    border-color: var(--ormado-gold-dark) !important;
    color: var(--ormado-espresso) !important;
}

/* --------------------------------------------------- 3. Header/Navigation */
#header, .header, header .navbar {
    background-color: #fff;
}
/* Goldene Akzentlinie unter dem Header */
#header, header {
    border-bottom: 3px solid var(--ormado-gold);
}

.navbar .nav-link,
header .nav-link,
.mainnav .nav-link {
    color: var(--ormado-espresso) !important;
    font-weight: 600;
}
.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active,
header .nav-link:hover, header .nav-link:focus, header .nav-link.active,
.mainnav .nav-link:hover, .mainnav .nav-link:focus, .mainnav .nav-link.active {
    color: var(--ormado-gold-dark) !important;
}

/* Suchfeld: Pill-Form, Creme */
#header .form-control,
.search .form-control,
.navbar .form-control {
    background-color: var(--ormado-cream-soft);
    border-color: rgba(74, 48, 36, .25);
    border-radius: 50rem 0 0 50rem;
}
#header .btn-search, #header .search-button,
.search .btn {
    background-color: var(--ormado-espresso) !important;
    border-color: var(--ormado-espresso) !important;
    color: #fff !important;
    border-radius: 0 50rem 50rem 0;
}

/* Header-Icons (Konto, Wunschliste, Warenkorb) */
#header a, .header a {
    color: var(--ormado-espresso);
}
#header a:hover, .header a:hover {
    color: var(--ormado-gold-dark);
}

/* Warenkorb-Badge (Artikelanzahl) */
#header .badge,
.cart-count, .badge-cart {
    background-color: var(--ormado-gold) !important;
    color: var(--ormado-espresso) !important;
}

/* -------------------------------------------------------- 4. Produktboxen */
.productbox,
.product-wrapper {
    background: #fff;
    border: 1px solid rgba(74, 48, 36, .10);
    border-radius: .75rem;
    box-shadow: 0 4px 14px rgba(74, 48, 36, .06);
}
.productbox:hover {
    box-shadow: 0 10px 26px rgba(74, 48, 36, .16);
}

.productbox .productbox-title a,
.productbox .title a,
.product-title a {
    color: var(--ormado-espresso);
    font-weight: 600;
}

/* Preise */
.price,
.price_wrapper,
.product-price,
span[itemprop="price"] {
    color: var(--ormado-espresso-dark) !important;
    font-weight: 700;
}

/* Rabatt-/Aktions-Badges */
.badge-danger, .badge.bg-danger,
.badge-sale, .label-sale, .ribbon {
    background-color: var(--ormado-gold) !important;
    color: var(--ormado-espresso) !important;
}

/* --------------------------------------- 5. Staffelpreise (nur Optik!) */
.table-bulk-prices th,
.bulk-prices th,
table.tierprices th,
.product-tierprices th {
    background-color: var(--ormado-espresso);
    color: #fff;
}
.table-bulk-prices tr:nth-child(even) td,
.bulk-prices tr:nth-child(even) td,
table.tierprices tr:nth-child(even) td {
    background-color: var(--ormado-cream-soft);
}

/* ------------------------------------------------------------- 6. Footer */
#footer, footer, .footer {
    background-color: var(--ormado-espresso) !important;
    color: var(--ormado-cream) !important;
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
#footer .h5, footer .h5 {
    color: var(--ormado-gold) !important;
}
#footer a, footer a, .footer a {
    color: var(--ormado-cream) !important;
}
#footer a:hover, footer a:hover, .footer a:hover {
    color: var(--ormado-gold) !important;
}
/* Footer-Überschriften ("Informationen" usw.): NOVA setzt dort Grau #525252 – auf Espresso unlesbar */
#footer .productlist-filter-headline,
footer .productlist-filter-headline {
    color: var(--ormado-gold) !important;
    border-color: rgba(227, 177, 66, .35) !important;
}

/* ------------------------------------------------- 7. Sonstige Akzente */
.breadcrumb a { color: var(--ormado-brown-text); }
.breadcrumb .active { color: var(--ormado-espresso); }

.form-control:focus {
    border-color: var(--ormado-gold);
    box-shadow: 0 0 0 .2rem rgba(227, 177, 66, .25);
}

.page-link { color: var(--ormado-espresso); }
.page-item.active .page-link {
    background-color: var(--ormado-espresso) !important;
    border-color: var(--ormado-espresso) !important;
    color: #fff !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--ormado-gold) !important;
    color: var(--ormado-espresso) !important;
}

::selection {
    background: var(--ormado-highlight);
    color: var(--ormado-ink);
}

/* ------------------------------------------------- 8. Startseite (OPC) */
/* Sprungziele nicht unter dem mitlaufenden Header verstecken */
#sortiment,
#gewerbekunden {
    scroll-margin-top: 120px;
}

/* Kopfbereich: Container mit custom-class "ormado-dark ormado-hero".
   Das Banner liegt im Child-Template (update-sicher), nicht in der Medienverwaltung. */
.ormado-hero {
    background-color: var(--ormado-espresso);
    background-image: url("/templates/ormado/img/ormado-shop-hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Inhalt senkrecht mittig im Banner */
    display: flex;
    align-items: center;
}
/* Das innere Element hat im Live-Shop keine Klasse (im OPC-Editor .opc-area),
   deshalb alle direkten Kinder auf volle Breite ziehen, sonst rutscht der Text nach links. */
.ormado-hero > * {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}
@media (max-width: 767.98px) {
    /* Auf dem Handy niedrigeres Banner (überschreibt die OPC-Inline-Werte) */
    .ormado-hero {
        min-height: 360px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}
.ormado-hero h1 {
    font-weight: 700;
    text-wrap: balance;
}
.ormado-hero .lead {
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

/* Umriss-Schaltfläche auf dunklem Grund (für "Für Gewerbekunden" nach B2B-Setup) */
.ormado-dark .btn-outline-warning {
    color: var(--ormado-cream-soft) !important;
    border-color: var(--ormado-cream-soft) !important;
    background-color: transparent !important;
    border-radius: 50rem;
    font-weight: 600;
}
.ormado-dark .btn-outline-warning:hover,
.ormado-dark .btn-outline-warning:focus {
    background-color: var(--ormado-cream-soft) !important;
    color: var(--ormado-espresso) !important;
}

/* Sortiments-Kacheln: Panel-Portlet mit custom-class "ormado-tile" */
.ormado-tile {
    background: #fff;
    border: 1px solid rgba(74, 48, 36, .10);
    box-shadow: 0 4px 14px rgba(74, 48, 36, .06);
    transition: box-shadow .2s ease;
}
.ormado-tile:hover {
    box-shadow: 0 10px 26px rgba(74, 48, 36, .14);
}
.ormado-tile .fas {
    color: var(--ormado-espresso);
}

/* Gut sichtbarer Tastaturfokus (NOVA-Standard ist auf Creme kaum zu sehen) */
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid var(--ormado-espresso) !important;
    outline-offset: 2px;
}
.ormado-dark .btn:focus-visible,
.ormado-dark a:focus-visible {
    outline-color: var(--ormado-cream-soft) !important;
}

/* ============================================================================
   9. Megamenü · ormado-shop.de · Stand 13.10.2026 (Premium, passend zu 10)
   ----------------------------------------------------------------------------
   EINBAU: Dieser Abschnitt ersetzt den bisherigen Abschnitt 9 (Stand
   27.09.2026) komplett: von dieser Kopfzeile bis einschließlich 9.9.
   Abschnitt 10 (Startseiten-Banner) bleibt unverändert dahinter stehen.
   Die Regel „höchstens 9 Unterkategorien“ steckt weiterhin in 9.7.
   _megamenu-max9.css und _megamenu-neu.css NICHT zusätzlich einbauen, sie
   gestalten dieselben Elemente in der alten Fassung.

   NEU GEGENÜBER 27.09.2026 (Formensprache des Banners „Editorial, dunkel“)
   - Karte links: Espresso #33241C mit derselben Körnung und demselben
     Oberlicht wie das Banner, nur CSS. Die Packband-Grafik ist entfernt.
   - Dachzeile „Sortiment“ mit kurzer Goldlinie wie die Banner-Dachzeile
   - Kartentitel in Cormorant Garamond 700 (Schrift aus Abschnitt 10.0)
   - unten in jeder Karte eine Gold-Pille mit Pfeil-Kreis wie die
     Banner-Schaltfläche „Sortiment ansehen“: „Alles ansehen“, bei mehr als 9
     Unterkategorien „Weitere Kategorien entdecken“ (seit 14.10.2026; vorher
     bei bis zu 9 nur ein kleiner Goldring)
   - Goldene Haarlinien statt 3-px-Balken: Unterkante des Menüs 1 px,
     aktiver Menüpunkt 2 px, Unterstrich der Kacheln 1 px
   - Kacheln: Name 16 statt 17 px, etwas mehr Luft, dünnerer Pfeil

   VORAUSSETZUNGEN
   - Template-Einstellung „Kategoriebilder für erste Unterkategorie“ = Aktiv
   - Kategoriebilder in der Wawi: die PNGs aus kategorie-icons/ (600 oder
     1200 px, beide mit 1/15 weißem Rand und Creme-Kachel)
   - Schriften in templates/ormado/fonts/: Barlow Semi Condensed (9.0) und
     Cormorant Garamond (10.0). Fehlen sie, greifen Ersatzschriften, das Menü
     funktioniert trotzdem.

   GELTUNGSBEREICH
   Alles Menü-Styling steht in @media (min-width: 992px). Das mobile Menü
   (Offcanvas unter 992 px) bleibt unverändert. Ausnahmen: 9.0 (Schriften und
   Variablen, Schriften werden nur geladen, wenn sie gebraucht werden) und
   9.9 (Kategorieseite).

   HERKUNFT DER SELEKTOREN
   [live]       im HTML von ormado-shop.de gesehen (gespeicherte Seite, 27.09.2026)
   [quelle]     im NOVA-Quelltext JTL-Shop 5.7 belegt, live noch nicht sichtbar,
                weil die Bild-Option dort aus ist
   [abgeleitet] nicht verifiziert, aus der Recherche abgeleitet
   ============================================================================ */

/* --------------------------------------------------------- 9.0 Schriften */
/* Barlow (SIL OFL 1.1) wie im Logo. Dateien: templates/ormado/fonts/
   Cormorant Garamond für den Kartentitel ist in 10.0 definiert (dieselbe
   Datei wie die Banner-Überschrift, wird nur einmal geladen). */
@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/templates/ormado/fonts/BarlowSemiCondensed-SemiBold.ttf") format("truetype");
}

:root {
    --mm-font: "Barlow Semi Condensed", Montserrat, "Open Sans", sans-serif;
    /* wie --hero-serif in 10.1 (dort nur im Banner gültig, darum hier eigens) */
    --mm-serif: "Cormorant Garamond", "Ormado Serif Ersatz", "Ormado Serif Ersatz N", Georgia, "Times New Roman", serif;
    --mm-line: #E7DCCB;   /* Kraft-Linie aus Richtung 4, nur für Linien */
    --mm-card: #33241C;   /* Grund der Karte = Grund des Banners (10.1) */
    --mm-icon: 68px;      /* Bildbox. Sichtbar ist die Creme-Kachel mit ca. 59 px,
                             der weiße Rand des PNG wird per clip-path abgeschnitten */
    --mm-aside: 19.5rem;  /* Espresso-Karte links */
    --mm-gap: 2.5rem;
}

@media (min-width: 992px) {

    /* ------------------------------------------------ 9.1 Kopfzeile */
    /* Statt der 3-px-Goldlinie (Abschnitt 3) eine feine Kraft-Linie. Gold
       markiert jetzt den aktiven Menüpunkt und den unteren Rand des Menüs. */
    #jtl-nav-wrapper {                                            /* [live] */
        border-bottom: 1px solid var(--mm-line);
    }
    /* „Menü in eigener Zeile“: Trennlinie zwischen Logo/Suche und Kategorien */
    #jtl-nav-wrapper .hide-navbar > .navbar {                     /* [quelle] header_menu_single_row.tpl */
        border-bottom: 1px solid var(--mm-line);
    }
    /* Eine gemeinsame linke Kante für Logo, ersten Menüpunkt und Menü-Inhalt */
    #jtl-nav-wrapper .navbar-brand {                              /* [live] */
        padding-left: 0;
    }
    #mainNavigation .navbar-nav {                                 /* [live] */
        margin-left: -1.125rem;            /* = Innenabstand der Menüpunkte (9.2) */
    }
    #mainNavigation .dropdown-full .subcategory-wrapper {         /* [live] .container.subcategory-wrapper */
        max-width: 103.125rem;             /* so breit wie der Header (container-fluid-xl) */
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* ------------------------------------------ 9.2 Hauptpunkte der Leiste */
    #mainNavigation .navbar-nav > .nav-item > .nav-link {         /* [live] */
        font-family: var(--mm-font);
        font-weight: 600;
        font-size: 1.0625rem;
        letter-spacing: .01em;
        line-height: 1.25;
        color: var(--ormado-espresso) !important;
        padding: 1.125rem 1.125rem 1rem;
    }
    #mainNavigation .navbar-nav > .nav-item > .nav-link:hover,
    #mainNavigation .navbar-nav > .nav-item > .nav-link:focus,
    #mainNavigation .navbar-nav > .nav-item.show > .nav-link {
        /* Abschnitt 3 färbt Hover Gold-dunkel (Kontrast 2,2 : 1). Hier bleibt der
           Text Espresso, die Goldlinie zeigt den Zustand. */
        color: var(--ormado-espresso-dark) !important;
    }
    /* NOVA-Unterstrich (::before) als feine 2-px-Goldlinie, gerade Enden
       (vorher 3 px mit runden Ecken) */
    #mainNavigation .navbar-nav > .nav-item > .nav-link::before { /* [live] NOVA-Animation */
        border: 0;
        height: 2px;
        width: 0;
        background: var(--ormado-gold);
        border-radius: 0;
        transition: width .25s ease;
    }
    #mainNavigation .navbar-nav > .nav-item.active > .nav-link::before,
    #mainNavigation .navbar-nav > .nav-item.show > .nav-link::before,
    #mainNavigation .navbar-nav > .nav-item:hover > .nav-link::before,
    #mainNavigation .navbar-nav > .nav-item > .nav-link:focus-visible::before {
        width: calc(100% - 2.25rem);
    }
    /* NOVA-Pfeil (Font Awesome, dreht sich bei aria-expanded=true) kleiner und leiser */
    #mainNavigation .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after { /* [live] + clear.css */
        font-size: .625rem;
        margin-left: .45rem;
        vertical-align: .18em;
        opacity: .55;
    }
    #mainNavigation .navbar-nav > .nav-item.show > .nav-link.dropdown-toggle::after {
        opacity: 1;
    }

    /* --------------------------------------------------- 9.3 Menü-Fläche */
    /* Unterkante als 1-px-Goldlinie (vorher 3 px), wie die „Regal“-Linie im
       Banner. Über dem abgedunkelten Banner bleibt sie klar sichtbar. */
    #mainNavigation .navbar-nav > .dropdown-full > .dropdown-menu { /* [live] */
        background: #fff;
        border-top: 1px solid var(--mm-line);
        border-bottom: 1px solid var(--ormado-gold);
        box-shadow: 0 1.5rem 3rem -1rem rgba(43, 33, 27, .35);
    }
    #mainNavigation .navbar-nav > .dropdown-full > .dropdown-menu > .dropdown-body { /* [live] */
        padding: 2rem 0 2.25rem;
    }

    /* ------------------------------------------ 9.4 Raster der Unterkategorien */
    /* NOVA baut Bootstrap-Spalten (col-lg-4 col-xl-3). Daraus wird ein Raster
       mit 3 Spalten; links ist Platz für die Espresso-Karte (9.6). */
    #mainNavigation .subcategory-wrapper > .row.nav {             /* [live] */
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem 1.5rem;
        align-content: start;
        margin: 0;
        padding-left: calc(var(--mm-aside) + var(--mm-gap));
        min-height: 15.5rem;               /* Höhe der Karte (9.6); vorher 17rem mit Packband.
                                              Etwas mehr als 3 Kachelreihen (15,25rem); der
                                              Karteninhalt braucht bei 2 Titelzeilen ca. 13,5rem */
    }
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item { /* [live] */
        flex: none;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* ----------------------------------------------- 9.5 Kachel: Icon + Name */
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel { /* [live] */
        position: relative;
        display: flex !important;          /* NOVA setzt d-block (!important) */
        align-items: center;
        gap: 1rem;
        height: 100%;
        min-height: 4.75rem;
        margin: 0;
        padding: .5rem 2.5rem .5rem .5rem;
        border: 0;
        border-radius: 14px;
        background: transparent;
        font-family: var(--mm-font);
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.25;
        letter-spacing: .015em;
        color: var(--ormado-espresso) !important;
        text-decoration: none;
        transition: background-color .18s ease;
    }
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel:hover,
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel:focus-visible {
        background-color: var(--ormado-cream-soft);
        color: var(--ormado-espresso) !important;
        text-decoration: none;
    }
    /* Name: darf zweizeilig umbrechen (NOVA kürzt sonst mit „…“) */
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel > .text-truncate { /* [live] */
        min-width: 0;
        white-space: normal;
        overflow: visible;
        overflow-wrap: break-word;
        hyphens: auto;
        text-wrap: pretty;
        text-decoration-line: underline;
        text-decoration-color: transparent;
        text-decoration-thickness: 1px;
        text-underline-offset: .32em;
        transition: text-decoration-color .18s ease;
    }
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel:hover > .text-truncate,
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel:focus-visible > .text-truncate {
        text-decoration-color: var(--ormado-gold-dark);
    }
    /* Pfeil rechts, erscheint bei Hover/Fokus (dünner Strich wie im Banner) */
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: .875rem;
        width: 1.125rem;
        height: 1.125rem;
        margin: -.5625rem 0 0;
        border: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23D59729' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M5 12h13.5M13 6.5 18.5 12 13 17.5'/%3E%3C/svg%3E") center / contain no-repeat;
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity .18s ease, transform .18s ease;
    }
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel:hover::after,
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel:focus-visible::after {
        opacity: 1;
        transform: none;
    }

    /* Das Kategoriebild. NOVA gibt es mit width/height 600 und img-fluid aus. */
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel > picture { /* [abgeleitet] <picture> der Bildkomponente */
        display: block;
        flex: none;
        line-height: 0;
    }
    #mainNavigation .subcategory-wrapper .submenu-headline-image { /* [quelle] categories_mega_recursive.tpl */
        display: block;
        flex: none;
        width: var(--mm-icon);
        height: var(--mm-icon);
        max-width: none;
        margin: -4px;                      /* gleicht den abgeschnittenen Rand aus */
        object-fit: contain;
        /* nur die Creme-Kachel zeigen: Rand 1/15 (40 von 600 bzw. 80 von 1200 px),
           Eckradius 16 % (96 von 600 bzw. 192 von 1200 px) */
        clip-path: inset(6.667% round 16%);
        transition: transform .2s ease;
    }
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel:hover .submenu-headline-image {
        transform: translateY(-2px);
    }
    /* Kategorie ohne Bild: statt des Platzhalters keinBild.gif eine leere Kachel */
    #mainNavigation .subcategory-wrapper .submenu-headline-image[src$="keinBild.gif"] { /* [quelle] snippets/image.tpl */
        object-position: -999px 0;
        background: var(--ormado-cream);
    }

    /* --------------------------------- 9.6 Espresso-Karte „… anzeigen“ */
    /* NOVA liefert den Link zur Hauptkategorie nur für Mobil (d-lg-none).
       Auf dem Desktop wird er zur Karte links neben den Kacheln. */
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none { /* [live] */
        display: block !important;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--mm-aside);
    }
    /* Fläche wie das Banner (10.1): Espresso #33241C, weiches Oberlicht rechts
       oben, links und unten etwas dunkler, darüber dieselbe Papier-Körnung.
       Im Banner liegt die Körnung als eigene Ebene mit opacity .5 darüber.
       Hier tragen ::before und ::after schon Dachzeile und Schaltfläche,
       darum steckt die halbe Stärke direkt im Alphakanal der SVG-Filter
       (Banner: .2/-.06 und -.42/.26, hier .1/-.03 und -.21/.13). */
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none > a {
        position: relative;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        padding: 1.75rem 1.75rem 1.75rem;
        border-radius: 14px;
        overflow: hidden;
        background-color: var(--mm-card);
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .97 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .1 -.03'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .05 0 0 0 0 .03 -.21 0 0 0 .13'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23m)'/%3E%3C/svg%3E"),
            radial-gradient(90% 75% at 90% 0%, rgba(120, 84, 60, .34), rgba(120, 84, 60, 0) 72%),
            linear-gradient(100deg, rgba(22, 15, 11, .3) 0%, rgba(22, 15, 11, 0) 65%),
            linear-gradient(180deg, rgba(22, 15, 11, 0) 50%, rgba(22, 15, 11, .3) 100%);
        background-size: 160px 160px, 640px 640px, auto, auto, auto;
        background-position: 0 0;
        background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
        color: var(--ormado-cream) !important;
        text-decoration: none;
        transition: background-color .2s ease;
    }
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none > a:hover,
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none > a:focus-visible {
        background-color: #3D2B21;         /* Grund etwas heller, Licht und Körnung bleiben */
        color: var(--ormado-cream) !important;
    }
    /* Dachzeile „Sortiment“ mit kurzer Goldlinie davor, wie die Dachzeile im
       Banner (10.3). Nur Optik, wird nicht vorgelesen. */
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none > a::before {
        content: "Sortiment";
        content: "Sortiment" / "";
        display: block;
        margin-bottom: 1.125rem;
        padding-left: 2.875rem;            /* 2rem Linie + .875rem Abstand */
        background: linear-gradient(rgba(227, 177, 66, .8), rgba(227, 177, 66, .8)) left center / 2rem 1px no-repeat;
        font-family: var(--mm-font);
        font-weight: 600;
        font-size: .75rem;
        line-height: 1.25;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--ormado-gold);
    }
    /* „Getränke & Lebensmittel anzeigen“ als Überschrift in der Banner-Schrift.
       28 px: so passt auch das längste Wort („Verpackungsmaterial“, 231 px)
       in die 256 px breite Textspalte, ohne mitten im Wort umzubrechen.
       Ein einzelnes Wort darf bis etwa 21 Zeichen lang sein. */
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none .nav-mobile-heading { /* [live] */
        display: block;
        max-width: 100%;
        margin-bottom: 1.5rem;             /* Mindestabstand zum Pfeil-Kreis / zur Pille */
        padding: 0;
        white-space: normal;               /* NOVA: .nav-scrollbar-item .nav-mobile-heading = nowrap */
        overflow: visible;
        text-overflow: clip;
        font-family: var(--mm-serif);
        font-weight: 700;
        font-size: 1.75rem;
        line-height: 1.06;
        letter-spacing: -.005em;
        color: var(--ormado-cream);
        font-kerning: normal;
        text-wrap: balance;
        overflow-wrap: break-word;         /* nur Notbremse für sehr lange Wörter */
        hyphens: manual;
    }
    /* Schaltfläche unten in der Karte (ersetzt das Packband und den Pfeil
       hinter dem Titel). Wunsch Inhaber 14.10.2026: in JEDER Karte dieselbe
       große Gold-Pille wie die Banner-Schaltfläche (10.4), nicht mal Pille und
       mal kleiner Ring. Text „Alles ansehen“; bei mehr als 9 Unterkategorien
       ändert 9.7 nur den Text. Der dunkle Kreis mit dünnem Goldpfeil ist Teil
       des Hintergrunds (ein Pseudo-Element kann kein zweites enthalten) und
       rückt bei Hover wie im Banner 3 px nach rechts. Text 14 px: die längste
       Pille ist 246 px breit und passt in die Karte; mit Ersatzschrift bricht
       sie zweizeilig um. */
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none > a::after {
        content: "Alles ansehen";
        display: block;
        flex: none;
        align-self: stretch;               /* volle Kartenbreite: überall gleich groß */
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        text-align: left;
        height: auto;
        margin-top: auto;                  /* steht immer unten in der Karte */
        padding: .875rem 3.25rem .875rem 1.125rem;
        border-radius: 50rem;
        box-shadow: none;
        background: var(--ormado-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Ccircle cx='21' cy='21' r='21' fill='%232B211B'/%3E%3Cpath fill='none' stroke='%23E3B142' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M15.75 21h10.15M21.75 16.9 25.9 21l-4.15 4.1'/%3E%3C/svg%3E") no-repeat right .3125rem center / 2.25rem 2.25rem;
        font-family: var(--mm-font);
        font-weight: 600;
        font-size: .875rem;
        line-height: 1.2;
        letter-spacing: .02em;
        text-wrap: balance;
        color: var(--ormado-ink);
        transition: background-color .2s ease, background-position .25s ease;
    }
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none > a:hover::after,
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none > a:focus-visible::after {
        background-color: #ECC463;         /* wie Hover der Banner-Schaltfläche */
        background-position: right .125rem center;
        box-shadow: none;
        transform: none;
    }

    /* ------------------------------------ 9.7 Höchstens 9 Unterkategorien */
    /* Wunsch Inhaber 27.09.2026. Kind 1 = Karte, Kind 2 bis 10 = die ersten
       9 Unterkategorien. Welche 9 es sind, bestimmt die Sortierung der
       Kategorien in der Wawi. Wer alle zeigen will, löscht diesen Block 9.7. */
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item:nth-child(n+11) {
        display: none !important;
    }
    /* Bei mehr als 9 Unterkategorien heißt die Gold-Pille aus 9.6
       „Weitere Kategorien entdecken“ (braucht :has(), sonst bleibt
       „Alles ansehen“ – der Link ist derselbe). */
    #mainNavigation .subcategory-wrapper > .row.nav:has(> .nav-item:nth-child(11)) > .nav-item.d-lg-none > a::after {
        content: "Weitere Kategorien entdecken";
    }

    /* ------------------------------------------ 9.8 Tastatur und Hintergrund */
    /* Fokus: Abschnitt 7 setzt 3 px Espresso-Outline (auf Weiß 12 : 1). Sie
       liegt mit Abstand außerhalb von Kachel und Karte, also immer auf dem
       weißen Menügrund, und folgt den runden Ecken. */
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel:focus-visible,
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none > a:focus-visible {
        outline-offset: 2px;
    }
    /* Seite hinter dem offenen Menü: warmes Ink statt NOVA-Schwarz mit 80 % */
    .modal-backdrop.zindex-dropdown.show {                        /* [quelle] js/app/views/header.js */
        background-color: var(--ormado-ink);
        opacity: .45;
    }
    /* Falls später Unter-Unterkategorien dazukommen: schlichte Liste unter dem Namen */
    #mainNavigation .subcategory-wrapper .categories-recursive-dropdown { /* [quelle] */
        padding: .25rem 0 .25rem calc(var(--mm-icon) + .375rem);
        background: transparent;
    }
    #mainNavigation .subcategory-wrapper .categories-recursive-dropdown .nav-link {
        padding: .2rem 0 !important;
        font-size: .9375rem;
        font-weight: 400;
        color: var(--ormado-brown-text) !important;
    }
    #mainNavigation .subcategory-wrapper .categories-recursive-dropdown .nav-link:hover {
        color: var(--ormado-espresso) !important;
        text-decoration: underline;
        text-decoration-color: var(--ormado-gold-dark);
        text-decoration-thickness: 1px;
    }
}

/* 992 bis 1299 px: schmalere Karte, kleinere Überschrift, engere Leiste */
@media (min-width: 992px) and (max-width: 1299.98px) {
    :root {
        --mm-aside: 15rem;
        --mm-gap: 1.5rem;
    }
    #mainNavigation .navbar-nav > .nav-item > .nav-link {
        padding-left: .8rem;
        padding-right: .8rem;
    }
    #mainNavigation .navbar-nav {
        margin-left: -.8rem;
    }
    #mainNavigation .navbar-nav > .nav-item.active > .nav-link::before,
    #mainNavigation .navbar-nav > .nav-item.show > .nav-link::before,
    #mainNavigation .navbar-nav > .nav-item:hover > .nav-link::before,
    #mainNavigation .navbar-nav > .nav-item > .nav-link:focus-visible::before {
        width: calc(100% - 1.6rem);
    }
    #mainNavigation .subcategory-wrapper > .row.nav {
        gap: .5rem 1.25rem;
    }
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none > a {
        padding: 1.375rem 1.25rem;
    }
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none > a::before {
        margin-bottom: .875rem;
        padding-left: 2.375rem;
        background-size: 1.5rem 1px;
    }
    /* 22 px: „Verpackungsmaterial“ (181 px) passt in die 200 px schmale Spalte */
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none .nav-mobile-heading {
        margin-bottom: 1.25rem;
        font-size: 1.375rem;
    }
    /* schmale Karte: Pille wird bei Bedarf zweizeilig, der Kreis bleibt rund */
    #mainNavigation .subcategory-wrapper > .row.nav > .nav-item.d-lg-none > a::after {
        padding: .625rem 2.875rem .625rem 1rem;
        background-size: 2rem 2rem;
        line-height: 1.15;
    }
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel {
        gap: .875rem;
        padding-right: 1.75rem;
    }
    #mainNavigation .subcategory-wrapper .submenu-headline-toplevel::after {
        right: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mainNavigation *,
    #mainNavigation *::before,
    #mainNavigation *::after {
        transition: none !important;
    }
}

/* ----------------------------------- 9.9 Kategorieseite: dieselben Icons */
/* Die Wawi hat nur EIN Bild pro Kategorie. Es erscheint auch in den
   Unterkategorie-Kacheln auf der Elternkategorie (Einstellung „Unterkategorie
   anzeigen“ = „Ja, als Text und Bild“). Ohne diese Regel wäre es dort bis zu
   300 px groß und mit weißem Quadrat auf Creme. Gilt für die quadratischen
   Icons; wer später Fotos als Kategoriebild nimmt, entfernt 9.9. */
.content-cats-small .sub-categories .subcategories-image img:not([src$="keinBild.gif"]) { /* [quelle] productlist/header.tpl */
    width: 7.5rem;
    height: 7.5rem;
    max-width: 100%;
    object-fit: contain;
    clip-path: inset(6.667% round 16%);
}
/* Kopfbild der Kategorieseite, nur falls „Kategorie anzeigen“ auf „Ja, als Bild
   und Text“ gestellt wird (empfohlen: bei „Ja, als Text“ bleiben) */
.productlist-header-description-image {                           /* [quelle] productlist/header.tpl */
    width: 6rem;
    height: 6rem;
    object-fit: contain;
    clip-path: inset(6.667% round 16%);
}

/* ============================================================================
   10. Startseiten-Banner „Editorial, dunkel“ (Richtung A, final) · Stand 12.10.2026
   ----------------------------------------------------------------------------
   EINBAU: diesen kompletten Abschnitt unten an css/ormado-theme.css anhängen
   (nach Abschnitt 9). Er überschreibt die Banner-Regeln aus Abschnitt 8,
   Abschnitt 8 bleibt unverändert stehen. Das alte Bild ormado-shop-hero.jpg
   wird danach nicht mehr geladen.

   DATEIEN (per FTP, Pfade wie im Shop)
     templates/ormado/img/ormado-hero-stillleben.svg     Stillleben (Vektor)
     templates/ormado/fonts/CormorantGaramond-700.woff2  Überschrift (OFL)
     templates/ormado/fonts/Barlow-Regular.ttf           Einleitung (OFL)
     templates/ormado/fonts/OFL-CormorantGaramond.txt    Lizenz
     templates/ormado/fonts/OFL-Barlow.txt               Lizenz
   Barlow Semi Condensed 600 ist schon da (Abschnitt 9.0).

   OPC-AUFBAU (Container mit custom-class „ormado-dark ormado-hero“)
     Zeile mit EINER Spalte (12/12/12/12), darin in dieser Reihenfolge:
     1 Text       custom-class „ormado-hero-dachzeile“   <p>Dachzeile</p>
     2 Überschrift H1
     3 Text       custom-class „ormado-hero-lead“        <p class="lead">…</p>
     4 Button     „Sortiment ansehen“  Stil warning, Größe lg
     5 Button     „Für Gewerbekunden“  Stil warning, Umriss an, Größe lg
     6 Text       custom-class „ormado-hero-regal“       <ul class="ormado-hero-fakten">…</ul>
   Die Klassen 1, 3 und 6 stehen im Stil-Feld „custom-class“ des Bausteins
   (dasselbe Feld wie beim Container), NICHT im Text: der Texteditor kann sie
   dort nicht löschen.
   Goldlinie, Stillleben und Wandlicht hängen am Baustein 6 („Regal“). Fehlt
   die Klasse, entfallen nur Linie und Bild, der Rest bleibt stehen.
   Innenabstände, Mindesthöhe, Hintergrundfarbe, Textfarbe und Ausrichtung
   aus dem OPC werden hier überschrieben.
   ============================================================================ */

/* ------------------------------------------------------------- 10.0 Schriften */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/templates/ormado/fonts/CormorantGaramond-700.woff2") format("woff2");
}
/* Ersatz bis die Schrift geladen ist, auf die Laufweite von Cormorant
   gestaucht, damit Umbruch und Bannerhöhe beim Tausch gleich bleiben.
   Ober-/Unterlänge = Cormorant (0,924 / 0,287 em) geteilt durch size-adjust.
   a) Georgia Bold (Windows, macOS, iOS): an der H1 gemessen.
   b) Noto Serif Bold (Android, hat kein Georgia): aus den Durchschnitts-
      breiten geschätzt, auf einem Android-Gerät noch nicht nachgemessen. */
@font-face {
    font-family: "Ormado Serif Ersatz";
    font-style: normal;
    font-weight: 700;
    src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia");
    size-adjust: 76.5%;
    ascent-override: 120%;
    descent-override: 38%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Ormado Serif Ersatz N";
    font-style: normal;
    font-weight: 700;
    src: local("Noto Serif Bold"), local("NotoSerif-Bold");
    size-adjust: 72%;
    ascent-override: 128%;
    descent-override: 40%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/templates/ormado/fonts/Barlow-Regular.ttf") format("truetype");
}

/* ---------------------------------------------------------- 10.1 Fläche */
.ormado-hero {
    /* STELLWERT Satzspiegel: Breite von .container ab 1300 px (NOVA: 1250px).
       Nur diesen Wert ändern, falls der Inhalt darunter anders breit ist.
       Das Stillleben rechnet sich daraus von selbst neu (siehe unten). */
    --hero-container: 1250px;

    --hero-max: 100%;                   /* je Breakpoint wie .container (10.7) */
    --hero-gutter: 1rem;                /* = Innenabstand von .container */
    --hero-text: 100%;                  /* Breite von H1 und Einleitung */
    --hero-pad-top: 2rem;
    --hero-regal-mt: 1.75rem;           /* Abstand Schaltflächen → Goldlinie */

    /* Stillleben (ab 576 px, darunter aus, siehe 10.6): Es bekommt nur den
       Platz, der rechts neben dem Text frei bleibt. 100cqw = tatsächliche
       Innenbreite des Satzspiegels (10.2) in px, egal wie --hero-container
       gesetzt ist. Die Textseite ist in rem angegeben und wächst mit der
       Browser-Schriftgröße mit; das Bild wird dann schmaler. Bleiben weniger
       als --hero-sl-min frei, wird der dritte Wert negativ: Breite und Höhe
       fallen auf 0, das Bild entfällt ganz statt winzig zu werden.
       (Bewusst ohne „0px“ und „+“ in den Formeln: manche CSS-Minifier kürzen
       0px zu 0 oder streichen Leerzeichen um +, beides wäre hier ungültig.) */
    --hero-sl-max: 15rem;               /* Höchstbreite, je Breakpoint (10.7) */
    --hero-sl-links: 14rem;             /* belegte Breite links: Gold-Pille (13,98rem) */
    --hero-sl-abstand: 1.5rem;          /* Mindestabstand Text → Bild */
    --hero-sl-min: 10rem;               /* darunter kein Bild */
    --hero-sl-frei: calc(100cqw - var(--hero-sl-links) - var(--hero-sl-abstand));
    --hero-sl-w: min(var(--hero-sl-max), var(--hero-sl-frei),
                     calc((var(--hero-sl-frei) - var(--hero-sl-min)) * 1000));
    --hero-sl-ratio: .4153;             /* Höhe : Breite der SVG (206 : 496) */

    --hero-line: rgba(227, 177, 66, .5);
    --hero-serif: "Cormorant Garamond", "Ormado Serif Ersatz", "Ormado Serif Ersatz N", Georgia, "Times New Roman", serif;
    --hero-sans: "Barlow", "Barlow Semi Condensed", "Open Sans", sans-serif;
    --hero-label: "Barlow Semi Condensed", "Barlow", Montserrat, sans-serif;

    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    display: block !important;
    min-height: 0 !important;
    padding: var(--hero-pad-top) 0 0 !important;
    background-color: #33241C !important;
    /* weiches Oberlicht rechts, dunklere Textseite, leichte Vignette */
    background-image:
        radial-gradient(70% 90% at 82% 30%, rgba(120, 84, 60, .2), rgba(120, 84, 60, 0) 70%),
        linear-gradient(98deg, rgba(22, 15, 11, .55) 0%, rgba(22, 15, 11, .22) 40%, rgba(22, 15, 11, 0) 68%),
        linear-gradient(180deg, rgba(22, 15, 11, .25) 0%, rgba(22, 15, 11, 0) 30%, rgba(22, 15, 11, 0) 70%, rgba(22, 15, 11, .28) 100%) !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    color: var(--ormado-cream);
}

/* Körnung wie mattes Papier (halbe Stärke), unter Text und Stillleben */
.ormado-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .5;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .97 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .2 -.06'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .05 0 0 0 0 .03 -.42 0 0 0 .26'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23m)'/%3E%3C/svg%3E");
    background-size: 160px 160px, 640px 640px;
}

/* ------------------------------------------------- 10.2 Raster im Banner */
/* Das innere Element (live ohne Klasse, im OPC-Editor .opc-area) wird zur
   Satzspiegel-Box: mittig, so breit wie .container, über der Körnung.
   container-type macht seine Innenbreite als 100cqw für das Stillleben
   messbar (ohne Unterstützung entfällt nur das Bild). */
.ormado-hero > * {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--hero-max);
    margin: 0 auto;
    padding: 0 var(--hero-gutter);
    box-sizing: border-box;
    container-type: inline-size;
}
.ormado-hero .row {
    margin: 0;
}
.ormado-hero .row > [class*="col"] {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 0;
}

/* ---------------------------------------------------------- 10.3 Text */
/* Dachzeile: Klasse am Baustein (oder, wie früher, am <p>) */
.ormado-hero .ormado-hero-dachzeile {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1rem;
    font-family: var(--hero-label);
    font-weight: 600;
    font-size: .75rem;
    line-height: 1.25;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ormado-gold) !important;
}
.ormado-hero .ormado-hero-dachzeile::before {
    content: "";
    flex: none;
    width: 1.5rem;
    height: 1px;
    background: currentColor;
    opacity: .8;
}
.ormado-hero .ormado-hero-dachzeile > * {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}
/* Klasse an Baustein UND <p>: nur eine Goldlinie */
.ormado-hero .ormado-hero-dachzeile .ormado-hero-dachzeile::before {
    display: none;
}

.ormado-hero h1 {
    max-width: var(--hero-text);
    margin: 0 0 1rem;
    font-family: var(--hero-serif);
    font-weight: 700;
    font-size: clamp(1.875rem, 8.4vw, 2.125rem);   /* 3 Zeilen ab 360 px */
    line-height: 1.04;
    letter-spacing: -.008em;
    color: var(--ormado-cream) !important;      /* OPC setzt Weiß inline */
    text-align: left !important;                /* OPC setzt „zentriert“ inline */
    text-wrap: balance;
    font-kerning: normal;
}

/* Einleitung: Klasse am Baustein, „lead“ am <p> genügt aber auch */
.ormado-hero .ormado-hero-lead,
.ormado-hero .lead {
    max-width: min(var(--hero-text), 33rem);
    margin: 0 0 1.5rem;
    font-family: var(--hero-sans);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(247, 242, 232, .82) !important;
    text-align: left !important;
    text-wrap: pretty;
}
.ormado-hero .ormado-hero-lead > :last-child,
.ormado-hero .ormado-hero-lead .lead {
    margin-bottom: 0;
    font: inherit;
    color: inherit !important;
}

/* ------------------------------------------------------- 10.4 Schaltflächen */
.ormado-hero .opc-Button {
    display: block;
    text-align: left !important;
}
.ormado-hero .opc-Button + .opc-Button {
    margin-top: .25rem;
}

/* Hauptschaltfläche: Gold-Pille mit eingesetztem Pfeil-Kreis */
.ormado-hero .opc-Button .btn-warning {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.375rem;
    margin: 0;
    padding: .375rem .375rem .375rem 1.625rem;
    border: 0 !important;
    border-radius: 50rem;
    background-color: var(--ormado-gold) !important;
    color: var(--ormado-ink) !important;
    font-family: var(--hero-label);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1;
    letter-spacing: .02em;
    box-shadow: none !important;
    transition: background-color .2s ease;
}
.ormado-hero .opc-Button .btn-warning::after {
    content: "";
    flex: none;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
    background: var(--ormado-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23E3B142' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M5 12h13.5M13 6.5 18.5 12 13 17.5'/%3E%3C/svg%3E") center / 1.125rem no-repeat;
    transition: transform .25s ease;
}
.ormado-hero .opc-Button .btn-warning:hover,
.ormado-hero .opc-Button .btn-warning:focus,
.ormado-hero .opc-Button .btn-warning:not(:disabled):not(.disabled):active {
    background-color: #ECC463 !important;
    color: var(--ormado-ink) !important;
}
.ormado-hero .opc-Button .btn-warning:hover::after,
.ormado-hero .opc-Button .btn-warning:focus-visible::after {
    transform: translateX(3px);
}

/* Zweite Schaltfläche als klarer Textlink mit Gold-Unterstrich */
.ormado-hero.ormado-dark .opc-Button .btn-outline-warning {
    display: inline-block;
    margin: 0;
    padding: .75rem 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    color: var(--ormado-cream) !important;
    font-family: var(--hero-label);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.2;
    letter-spacing: .02em;
    text-decoration: underline;
    text-decoration-color: rgba(227, 177, 66, .75);
    text-decoration-thickness: 1px;
    text-underline-offset: .45em;
    box-shadow: none !important;
    transition: color .2s ease, text-decoration-color .2s ease;
}
.ormado-hero.ormado-dark .opc-Button .btn-outline-warning:hover,
.ormado-hero.ormado-dark .opc-Button .btn-outline-warning:focus {
    background: none !important;
    color: var(--ormado-gold) !important;
    text-decoration-color: var(--ormado-gold);
}
.ormado-hero.ormado-dark .opc-Button .btn:focus-visible {
    outline-offset: 4px;
}

/* ------------------------------------------- 10.5 Regal: Goldlinie + Fakten */
/* Der Text-Baustein mit der Klasse „ormado-hero-regal“ trägt die Goldlinie
   (= Regalkante). Die Schrift steht zusätzlich an der Liste selbst, damit sie
   auch ohne Baustein-Klasse stimmt. Ohne beide Klassen bleibt einfacher Text. */
.ormado-hero .ormado-hero-regal {
    position: relative;                 /* Bezug für Stillleben und Wandlicht */
    margin-top: var(--hero-regal-mt);
    padding: .875rem 0 1.125rem;
    border-top: 1px solid var(--hero-line);
}
.ormado-hero .ormado-hero-regal,
.ormado-hero .ormado-hero-fakten {
    font-family: var(--hero-label);
    font-weight: 600;
    font-size: .75rem;                  /* 12 px */
    line-height: 1.25rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(247, 242, 232, .84) !important;
}
.ormado-hero .ormado-hero-regal > :last-child {
    margin-bottom: 0;
}
/* Punkte in einer Zeile, Trennstrich links vor jedem Punkt. Der Streifen
   links außerhalb der Textkante wird abgeschnitten, so beginnt auch eine
   umbrochene Zeile ohne Strich. */
.ormado-hero .ormado-hero-regal ul,
.ormado-hero .ormado-hero-fakten {
    --fakten-abstand: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 0;
    margin: 0 0 0 calc(-1 * var(--fakten-abstand));
    padding: 0;
    clip-path: inset(0 0 0 var(--fakten-abstand));
    list-style: none;
}
/* Nur falls der Regal-Baustein seine Klasse verloren hat: die Liste bringt
   Abstand und Goldlinie selbst mit (dann ohne Stillleben). */
.ormado-hero .ormado-hero-fakten {
    margin-top: var(--hero-regal-mt);
    padding: .875rem 0 1.125rem;
    border-top: 1px solid var(--hero-line);
}
.ormado-hero .ormado-hero-regal .ormado-hero-fakten {
    margin-top: 0;
    padding: 0;
    border-top: 0;
}
.ormado-hero .ormado-hero-regal li,
.ormado-hero .ormado-hero-fakten li {
    position: relative;
    margin: 0;
    padding-left: var(--fakten-abstand);
    white-space: nowrap;
}
.ormado-hero .ormado-hero-regal li::before,
.ormado-hero .ormado-hero-fakten li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--fakten-abstand) / 2);
    width: 1px;
    height: .75rem;
    margin-top: -.375rem;
    background: var(--hero-line);
}

/* --------------------------------------------------------- 10.6 Stillleben */
/* Steht als Hintergrund-Ebene auf der Goldlinie des Regal-Bausteins:
   ::after = Zeichnung, ::before = Wandlicht dahinter. Beide liegen unter dem
   Text (z-index -1 innerhalb der Satzspiegel-Box). Alle Maße hängen nur an
   --hero-sl-w (aus dem freien Platz berechnet, 10.1), keine geschätzten
   Höhen. Unter 576 px ausgeblendet. */
.ormado-hero .ormado-hero-regal::before,
.ormado-hero .ormado-hero-regal::after {
    content: none;
    position: absolute;
    z-index: -1;
    pointer-events: none;
}
.ormado-hero .ormado-hero-regal::after {
    right: 0;
    bottom: 100%;
    width: var(--hero-sl-w);
    height: calc(var(--hero-sl-w) * var(--hero-sl-ratio));
    background: url("/templates/ormado/img/ormado-hero-stillleben.svg") right bottom / 100% 100% no-repeat;
}
.ormado-hero .ormado-hero-regal::before {
    right: calc(var(--hero-sl-w) * -.35);
    bottom: calc(100% - var(--hero-sl-w) * .2);
    width: calc(var(--hero-sl-w) * 1.7);
    height: var(--hero-sl-w);
    background: radial-gradient(closest-side, rgba(156, 110, 78, .42), rgba(156, 110, 78, .15) 55%, rgba(156, 110, 78, 0));
}

/* ------------------------------------------------------- 10.7 Breakpoints */
/* Spalten-Breiten wie .container von NOVA (97vw / 720 / 960 / 1250) */
@media (min-width: 576px) {
    .ormado-hero {
        --hero-max: 97vw;
        --hero-pad-top: 2.5rem;
        /* Schaltflächen untereinander, Bild rechts neben der Gold-Pille
           (--hero-sl-links 14rem und --hero-sl-max 15rem aus 10.1) */
    }
    .ormado-hero .ormado-hero-regal::before,
    .ormado-hero .ormado-hero-regal::after {
        content: "";
    }
    .ormado-hero h1 {
        font-size: 2.375rem;
    }
}
@media (min-width: 768px) {
    .ormado-hero {
        --hero-max: 720px;
        --hero-text: 26rem;             /* H1, Einleitung und Schaltflächen-Zeile (24,7rem) */
        --hero-pad-top: 3.25rem;
        --hero-regal-mt: 2.5rem;
        --hero-sl-links: 28rem;         /* 2rem Reserve, falls Barlow nicht lädt (Ersatzschrift breiter) */
        --hero-sl-max: 16rem;
    }
    .ormado-hero h1 {
        font-size: 2.625rem;
        line-height: 1.02;
    }
    .ormado-hero .ormado-hero-dachzeile {
        gap: .875rem;
        margin-bottom: 1.125rem;
        letter-spacing: .2em;
    }
    .ormado-hero .ormado-hero-dachzeile::before {
        width: 2rem;
    }
    .ormado-hero .opc-Button {
        display: inline-block;
        vertical-align: middle;
        margin-right: 1.75rem;
    }
    .ormado-hero .opc-Button + .opc-Button {
        margin-top: 0;
    }
    .ormado-hero .ormado-hero-regal {
        padding: 1rem 0 1.25rem;
    }
    .ormado-hero .ormado-hero-regal,
    .ormado-hero .ormado-hero-fakten {
        font-size: .8125rem;            /* 13 px */
    }
    .ormado-hero .ormado-hero-regal ul,
    .ormado-hero .ormado-hero-fakten {
        --fakten-abstand: 2rem;
    }
}
@media (min-width: 992px) {
    .ormado-hero {
        --hero-max: 960px;
        --hero-text: 30rem;
        --hero-pad-top: 3.75rem;
        --hero-regal-mt: 2.75rem;
        --hero-sl-max: 26rem;
    }
    .ormado-hero h1 {
        font-size: 3rem;
    }
    .ormado-hero .ormado-hero-lead,
    .ormado-hero .lead {
        font-size: 1.0625rem;
        margin-bottom: 1.75rem;
    }
}
@media (min-width: 1300px) {
    .ormado-hero {
        --hero-max: var(--hero-container);
        --hero-text: 37rem;
        --hero-regal-mt: 3rem;
        --hero-sl-max: 39rem;
    }
    .ormado-hero h1 {
        font-size: 3.625rem;
        margin-bottom: 1.25rem;
    }
    .ormado-hero .ormado-hero-dachzeile {
        margin-bottom: 1.25rem;
        font-size: .8125rem;
    }
    .ormado-hero .ormado-hero-lead,
    .ormado-hero .lead {
        font-size: 1.125rem;
        margin-bottom: 1.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ormado-hero .btn,
    .ormado-hero .btn::after {
        transition: none !important;
    }
}

/* ------------------------------------- 10.10 Satzspiegel wie die Kopfzeile */
/* Live geprüft am 13.10.2026: Kopfzeile = .container-fluid-xl (max. 1650px,
   16px Rand), Inhalt darunter = .container-fluid (16px Rand). Der Entwurf
   hatte .container (1250px) angenommen; dadurch stand der Bannertext bei
   1200px 129px weiter innen als Logo und Kacheln. Jetzt fluchtet er mit dem
   Logo. Steht ganz am Ende, damit er die Breakpoint-Werte aus 10.7 überschreibt. */
.ormado-hero {
    --hero-container: 1650px;
    --hero-max: 1650px;
}

/* ============================================================================
   11. Footer „Editorial, dunkel“ · ormado-shop.de · Stand 14.10.2026
   ----------------------------------------------------------------------------
   EINBAU: diesen kompletten Abschnitt unten an css/ormado-theme.css anhängen
   (nach 10.10). Er überschreibt die Footer-Regeln aus Abschnitt 6, Abschnitt 6
   bleibt unverändert stehen.

   Formensprache wie Banner (10) und Menü-Karte (9.6): Espresso #33241C mit
   derselben Papier-Körnung und weichem Oberlicht (nur CSS), feine Goldlinie
   an der Oberkante, Dachzeilen in Barlow Semi Condensed mit kurzer Goldlinie,
   Leitsatz in Cormorant Garamond, Pille mit eingesetztem Pfeil-Kreis.

   DATEIEN (per FTP oder mit dem nächsten Template-Paket)
     templates/ormado/img/ormado-logo-hell.svg   helles Logo für die Markenspalte
   Schriften: Cormorant Garamond 700 und Barlow 400 (10.0), Barlow Semi
   Condensed 600 (9.0). Keine neuen Schriftdateien.

   BOXEN (Darstellung › Boxen, Bereich Footer), Sortierung von links:
     10  Box 126  Eigene Box (ohne Rahmen)  Inhalt: box-126.html  (Marke, Kontakt)
     20  Linkgruppe „Informationen“         (box123)
     30  Linkgruppe „Gesetzliche Informationen“ (box122)
     40  neue Eigene Box (ohne Rahmen)      Inhalt: box-127.html  (Versand & Zahlung)
   Das Layout hängt an dieser Sortierung (Marke = erste Box, 11.12 nutzt
   :first-child) und braucht KEIN :has(). Nur als Absicherung, in Browsern
   mit :has() (Chrome/Edge 105+, Safari 15.4+, Firefox 121+): Die Marke
   steht auch bei falscher Sortierung vorn (11.3, 11.12), und fehlt die
   vierte Box, rückt das Raster zusammen. Jede :has()-Regel steht für sich,
   weil ältere Browser eine Regel mit :has() ganz verwerfen. Dort bleibt bei
   fehlender vierter Box nur eine leere Spalte rechts.

   AUFBAU
     11.0 Variablen          11.6  Versand & Zahlung (Box 127)
     11.1 Fläche             11.7  Widerruf-Schaltfläche (§ 356a BGB)
     11.2 Satzspiegel        11.8  Preis-Fußnote
     11.3 Spalten-Raster     11.9  Copyright-Leiste
     11.4 Überschriften      11.10 Nach-oben-Knopf
     11.5 Linklisten         11.11 Handy (< 768 px): Aufklapp-Listen
     11.5a Markenspalte      11.12 Breakpoints
                             11.13 Tastatur und Bewegung

   HERKUNFT DER SELEKTOREN
   [live]   in footer-live.html gesehen (Live-Markup vom 14.10.2026)
   [box]    Klassen aus dem eigenen Box-Inhalt (box-126.html, box-127.html)
   [quelle] NOVA 5.7 clear.css / clear_crit.css (Bootstrap-4-Klassen)
   ============================================================================ */

/* -------------------------------------------------------- 11.0 Variablen */
#footer {                                                         /* [live] */
    --ft-bg: #33241C;                 /* = Banner (10.1) und Menü-Karte (9.6) */
    --ft-max: 103.125rem;             /* 1650px = .container-fluid-xl der Kopfzeile */
    --ft-gutter: 1rem;                /* 16px Rand wie die Kopfzeile */
    --ft-gap: 2rem;                   /* Spaltenabstand, je Breakpoint (11.12) */
    --ft-serif: "Cormorant Garamond", "Ormado Serif Ersatz", "Ormado Serif Ersatz N", Georgia, "Times New Roman", serif;
    --ft-sans: "Barlow", "Barlow Semi Condensed", "Open Sans", sans-serif;
    --ft-label: "Barlow Semi Condensed", "Barlow", Montserrat, sans-serif;
    --ft-cream: #F7F2E8;
    --ft-text: rgba(247, 242, 232, .84);    /* Fließtext, auf #33241C ca. 10 : 1 */
    --ft-muted: rgba(247, 242, 232, .7);    /* Nebentext, ca. 7 : 1 */
    --ft-line: rgba(247, 242, 232, .16);    /* Haarlinien zwischen Bereichen */
    --ft-rule: rgba(227, 177, 66, .8);      /* kurze Goldlinie der Dachzeilen */
    --ft-underline: rgba(227, 177, 66, .6); /* ständiger Unterstrich (E-Mail, Fußnote) */
}

/* ----------------------------------------------------------- 11.1 Fläche */
/* Espresso wie das Banner: oben rechts weiches Licht, links und unten etwas
   dunkler, darüber die Papier-Körnung. Die Körnung steckt wie bei der
   Menü-Karte (9.6) mit halber Stärke direkt im Alphakanal der SVG-Filter,
   so braucht der Footer kein Pseudo-Element und keinen eigenen
   Stapelkontext (der fixierte Nach-oben-Knopf bleibt über allem). */
#footer {                                                         /* [live] */
    position: relative;
    padding: 3rem 0 0;
    border-top: 1px solid var(--ormado-gold);
    background-color: var(--ft-bg) !important;   /* Abschnitt 6 setzt #4A3024 !important */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .97 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .1 -.03'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .05 0 0 0 0 .03 -.21 0 0 0 .13'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23m)'/%3E%3C/svg%3E"),
        radial-gradient(60% 75% at 86% 0%, rgba(120, 84, 60, .3), rgba(120, 84, 60, 0) 72%),
        linear-gradient(100deg, rgba(22, 15, 11, .34) 0%, rgba(22, 15, 11, 0) 58%),
        linear-gradient(180deg, rgba(22, 15, 11, 0) 45%, rgba(22, 15, 11, .32) 100%);
    background-size: 160px 160px, 640px 640px, auto, auto, auto;
    background-position: 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
    color: var(--ft-text) !important;            /* Abschnitt 6: Creme !important */
    font-family: var(--ft-sans);
    font-size: .9375rem;
    line-height: 1.6;
}

/* ------------------------------------------------------ 11.2 Satzspiegel */
/* So breit wie die Kopfzeile (.container-fluid-xl: max. 1650px, 16px Rand)
   statt NOVA-.container (720/960/1250px). Der Container wird ein Raster:
   Spalten oben über die volle Breite, darunter Widerruf-Schaltfläche und
   Preis-Fußnote in einer Zeile (ab 768px, 11.12). */
#footer > .container {                                            /* [live] .container.d-print-none */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    width: 100%;
    max-width: var(--ft-max);
    padding-left: var(--ft-gutter);
    padding-right: var(--ft-gutter);
}
#footer > .container > * {
    grid-column: 1 / -1;           /* auch für später zugeschaltete Zeilen (Newsletter usw.) */
    min-width: 0;
}

/* --------------------------------------------------- 11.3 Spalten-Raster */
/* NOVA baut Bootstrap-Spalten (col-12 col-sm-6 col-md-4 col-lg-3). Daraus
   wird ein Raster; die Spalten selbst verlieren Breite und Innenabstand. */
#footer #footer-boxes {                                           /* [live] .row */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
}
#footer #footer-boxes > [class*="col"] {                          /* [live] */
    flex: none;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}
/* Absicherung bei falscher Sortierung (nur Browser mit :has()): Marken-
   spalte trotzdem zuerst. Maßgeblich ist die Sortierung 10 (Kopf). */
#footer #footer-boxes > :has(.ormado-footer-brand) {              /* [box] */
    order: -1;
}
#footer #footer-boxes .box {                                      /* [live] .box.box-normal */
    margin-bottom: 0;              /* NOVA: 1.5rem ab 768px */
}
#footer .box-custom .box-content-wrapper > :last-child,           /* [live] */
#footer .box-custom .box-content-wrapper > :last-child > :last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------- 11.4 Überschriften */
/* Wie die Banner-Dachzeile (10.3): Barlow Semi Condensed, gesperrte
   Versalien, Gold, kurze Goldlinie davor. Die Linkgruppen-Überschrift ist
   bei NOVA d-none d-md-flex (erst ab 768px sichtbar), die Überschrift der
   eigenen Box (Versand & Zahlung) immer. */
#footer .productlist-filter-headline,                             /* [live] */
#footer .ormado-footer-titel {                                    /* [box] */
    align-items: center;
    gap: .875rem;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0 !important;
    font-family: var(--ft-label);
    font-weight: 600;
    font-size: .8125rem;
    line-height: 1.3;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ormado-gold) !important;
}
#footer .ormado-footer-titel {
    display: flex;
}
#footer .productlist-filter-headline::before,
#footer .ormado-footer-titel::before {
    content: "";
    flex: none;
    width: 2rem;
    height: 1px;
    background: var(--ft-rule);
}

/* ------------------------------------------------------ 11.5 Linklisten */
/* Creme, beim Zeigen/Fokus ein feiner Gold-Unterstrich (wie die Kacheln im
   Menü, 9.5). Text bleibt Creme: Abschnitt 6 färbt Hover sonst Gold. */
#footer .box-linkgroup .nav {                                     /* [live] ul.nav.flex-column */
    margin: 0;
    padding: 0;
}
#footer .box-linkgroup .nav-item {                                /* [live] */
    margin: 0;                     /* NOVA: #footer li 0.5rem */
}
#footer #footer-boxes .nav-link {                                 /* [live] */
    display: inline-block;
    padding: .3125rem 0;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--ft-cream) !important;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: .38em;
    transition: text-decoration-color .18s ease;
}
#footer #footer-boxes .nav-link:hover,
#footer #footer-boxes .nav-link:focus-visible {
    color: var(--ft-cream) !important;
    text-decoration-color: var(--ormado-gold);
}

/* --------------------------------------------------- 11.5a Markenspalte */
/* Inhalt der Box 126 (box-126.html): .ormado-footer-marke (Logo, Leitsatz)
   und .ormado-footer-kontakt. Bis 767px und ab 1300px untereinander,
   dazwischen nebeneinander (11.12). */
#footer :where(.ormado-footer-brand p) {                          /* [box] nur 1 ID stark, damit die Regeln unten greifen */
    margin: 0;
}
#footer .ormado-footer-logo {                                     /* [box] <p> um das Logo */
    margin-bottom: 1.375rem;
    line-height: 0;
}
#footer .ormado-footer-logo img {
    display: block;
    width: 11.5rem;                /* 184 x 35px; ab 768px 13rem */
    max-width: 100%;
    height: auto;
}
#footer .ormado-footer-claim {                                    /* [box] */
    max-width: 21rem;
    margin-bottom: 1.75rem;
    font-family: var(--ft-serif);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.12;
    letter-spacing: -.005em;
    color: var(--ft-cream);
    font-kerning: normal;
    text-wrap: balance;
}
/* Kontakt: kurze Goldlinie darüber, Firmenname als erste Zeile betont */
#footer .ormado-footer-kontakt {                                  /* [box] */
    position: relative;
    padding-top: 1.375rem;
}
#footer .ormado-footer-kontakt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2rem;
    height: 1px;
    background: var(--ft-rule);
}
#footer .ormado-footer-adresse {                                  /* [box] */
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ft-text);
}
#footer .ormado-footer-adresse::first-line {
    font-family: var(--ft-label);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ft-cream);
}
#footer .ormado-footer-mail,                                      /* [box] */
#footer .ormado-footer-tel {       /* vorbereitet für die spätere Telefonnummer */
    margin-top: .625rem;
    font-size: .9375rem;
    line-height: 1.6;
}
#footer .ormado-footer-mail + .ormado-footer-tel {
    margin-top: .25rem;
}
#footer .ormado-footer-mail a,
#footer .ormado-footer-brand a {
    color: var(--ft-cream) !important;
    text-decoration: underline;
    text-decoration-color: var(--ft-underline);
    text-decoration-thickness: 1px;
    text-underline-offset: .35em;
    transition: text-decoration-color .18s ease;
}
#footer .ormado-footer-mail a:hover,
#footer .ormado-footer-mail a:focus-visible,
#footer .ormado-footer-brand a:hover,
#footer .ormado-footer-brand a:focus-visible {
    color: var(--ft-cream) !important;
    text-decoration-color: var(--ormado-gold);
}

/* ------------------------------------------- 11.6 Versand & Zahlung (127) */
/* Inhalt der zweiten eigenen Box (box-127.html): drei Fakten, je eine
   betonte Zeile und eine Erläuterung, getrennt durch Haarlinien. */
#footer .ormado-footer-fakten {                                   /* [box] ul */
    margin: 0;
    padding: 0;
    list-style: none;
}
#footer .ormado-footer-fakten li {
    margin: 0;
    padding: .75rem 0;
    border-top: 1px solid var(--ft-line);
    font-size: .875rem;
    line-height: 1.5;
    color: var(--ft-muted);
    text-wrap: pretty;
}
#footer .ormado-footer-fakten li:first-child {
    padding-top: 0;
    border-top: 0;
}
#footer .ormado-footer-fakten li:last-child {
    padding-bottom: 0;
}
#footer .ormado-footer-fakten strong {
    font-family: var(--ft-label);
    font-weight: 600;
    font-size: .9375rem;
    letter-spacing: .02em;
    color: var(--ft-cream);
}

/* -------------------------------- 11.7 Widerruf-Schaltfläche (§ 356a BGB) */
/* Bisher btn-primary = Espresso auf Espresso, also unsichtbar. Jetzt eine
   Umriss-Pille in Creme mit eingesetztem Gold-Kreis und Pfeil, die
   Schwester der Banner-Schaltfläche (10.4). Steht als einzige Schaltfläche
   des Footers direkt unter den Spalten.
   Kontraste auf #33241C: Text Creme 13,3 : 1, Umriss Creme 13,3 : 1,
   Gold-Kreis 7,5 : 1. Beim Zeigen/Fokus füllt sich die Pille Creme
   (Text Ink auf Creme 14 : 1). Text und Link bleiben unverändert. */
#footer > .container > .withdrawal-link-wrapper {                 /* [live] .row.withdrawal-link-wrapper */
    display: block;
    margin: 0;
    padding: 2rem 0 0;
}
#footer .withdrawal-link-wrapper > [class*="col"] {               /* [live] */
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
}
#footer .withdrawal-link-wrapper .mt-3 {                          /* [live] Bootstrap mt-3 = 1rem !important */
    margin-top: 0 !important;
}
#footer .withdrawal-link.btn {                                    /* [live] a.btn.btn-block.withdrawal-link.btn-primary */
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    width: auto;                   /* statt btn-block 100% */
    max-width: 100%;
    min-height: 3rem;
    margin: 0;
    padding: .375rem .375rem .375rem 1.375rem;
    overflow: visible;
    border: 1px solid var(--ft-cream) !important;
    border-radius: 50rem;
    background: transparent !important;
    color: var(--ft-cream) !important;
    font-family: var(--ft-label);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.15;
    letter-spacing: .02em;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    box-shadow: none !important;
    transition: background-color .2s ease, color .2s ease;
}
#footer .withdrawal-link.btn::before {                            /* [quelle] .btn-animated .btn-primary::before (Glanz) */
    content: none;
    display: none;
}
#footer .withdrawal-link.btn::after {
    content: "";
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--ormado-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%232B211B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M5 12h13.5M13 6.5 18.5 12 13 17.5'/%3E%3C/svg%3E") center / 1rem no-repeat;
    transition: transform .25s ease, background-color .2s ease;
}
#footer .withdrawal-link.btn:hover,
#footer .withdrawal-link.btn:focus,
#footer .withdrawal-link.btn:not(:disabled):not(.disabled):active {
    background: var(--ft-cream) !important;
    border-color: var(--ft-cream) !important;
    color: var(--ormado-ink) !important;
    box-shadow: none !important;
}
#footer .withdrawal-link.btn:hover::after,
#footer .withdrawal-link.btn:focus-visible::after {
    background-color: var(--ormado-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23E3B142' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M5 12h13.5M13 6.5 18.5 12 13 17.5'/%3E%3C/svg%3E");
    transform: translateX(3px);
}

/* --------------------------------------------------- 11.8 Preis-Fußnote */
#footer > .container > .footnote-vat {                            /* [live] */
    padding: 1.25rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ft-muted);
}
#footer .footnote-vat .small {                                    /* [live] span.small */
    font-size: inherit;
}
#footer .footnote-vat a {                                         /* [live] Link „Versand“ */
    color: var(--ft-cream) !important;
    text-decoration: underline;
    text-decoration-color: var(--ft-underline);
    text-decoration-thickness: 1px;
    text-underline-offset: .3em;
}
#footer .footnote-vat a:hover,
#footer .footnote-vat a:focus-visible {
    color: var(--ft-cream) !important;
    text-decoration-color: var(--ormado-gold);
}

/* ------------------------------------------------- 11.9 Copyright-Leiste */
/* Statt NOVA-Grau #525252 ein dunklerer Streifen derselben Fläche (Körnung
   scheint durch), Haarlinie darüber, Satzspiegel wie oben. Der JTL-Hinweis
   bleibt: klein und ruhig, aber gut lesbar (Text ca. 8 bis 11 : 1) und
   unterstrichen. */
#footer #copyright {                                              /* [live] */
    margin-top: 2.5rem;
    border-top: 1px solid var(--ft-line);
    background-color: rgba(16, 10, 7, .34);
    color: var(--ft-muted);
}
#footer #copyright > .container-fluid {                           /* [live] */
    max-width: var(--ft-max);
    padding: 1.125rem var(--ft-gutter);
    font-family: var(--ft-sans);
    font-size: .8125rem;
    line-height: 1.5;
    text-align: left;              /* NOVA: zentriert */
}
#footer #copyright .row {                                         /* [live] */
    align-items: center;
    row-gap: .25rem;
    margin: 0;
}
#footer #copyright .col {                                         /* [live] */
    padding-left: 0;
    padding-right: 0;
}
#footer #copyright [itemprop="copyrightHolder"] {                 /* [live] */
    margin: 0;
    color: var(--ft-text);
}
#footer #system-credits a {                                       /* [live] a.text-white.text-decoration-underline */
    color: var(--ft-text) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(227, 177, 66, .5) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: .3em;
}
#footer #system-credits a:hover,
#footer #system-credits a:focus-visible {
    color: var(--ft-cream) !important;
    text-decoration-color: var(--ormado-gold) !important;
}

/* ------------------------------------------------ 11.10 Nach-oben-Knopf */
/* Runder Ink-Knopf mit dünnem Goldpfeil und Goldring, wie der Pfeil-Kreis
   der Banner-Schaltfläche. Liegt fixiert über Creme-Seiten wie über dem
   Footer: Ink auf Creme 14 : 1, Goldring/Pfeil auf Espresso 7,5 : 1.
   Das Font-Awesome-Symbol wird durch einen feineren Pfeil ersetzt;
   der Name „Nach oben“ kommt weiter aus dem title-Attribut. */
/* 1.5.0: Inhaber fand den dunklen Ring zu unauffällig. Jetzt goldene,
   gefüllte Fläche mit kräftigem Ink-Pfeil, etwas größer; Hover dreht um. */
#footer .smoothscroll-top {                                       /* [live] button.smoothscroll-top.go-to-top.border-0 */
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    line-height: 1;
    border: 2px solid var(--ormado-ink) !important;   /* .border-0 setzt 0 !important */
    border-radius: 50%;
    background: var(--ormado-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%232B211B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M6.5 14.5 12 9l5.5 5.5'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
    color: var(--ormado-ink);
    box-shadow: 0 .75rem 1.5rem -.5rem rgba(22, 15, 11, .55);
    /* NOVA: transition all .5s mit .2s Verzögerung; Farbe ohne Verzögerung */
    transition: opacity .5s ease-in-out .2s, visibility .5s ease-in-out .2s, bottom .5s ease-in-out .2s,
                background-color .2s ease, border-color .2s ease;
}
#footer .smoothscroll-top .scroll-top-inner {                     /* [live] span > i.fas.fa-chevron-up */
    display: none;
}
#footer .smoothscroll-top:hover,
#footer .smoothscroll-top:focus-visible {
    border-color: var(--ormado-gold) !important;
    background-color: var(--ormado-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23E3B142' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M6.5 14.5 12 9l5.5 5.5'/%3E%3C/svg%3E");
}

/* ------------------------------ 11.11 Handy (< 768 px): Aufklapp-Listen */
/* NOVA zeigt die Linkgruppen hier als Aufklapp-Liste (a.box-normal-link,
   Liste in .collapse) mit einem hr darunter. Jede Zeile: Creme, gesperrte
   Versalien, feiner Goldpfeil rechts, Haarlinie darunter. Die eigenen
   Boxen enden ebenfalls mit einer Haarlinie, so trennt immer genau eine
   Linie die Bereiche, egal in welcher Reihenfolge sie stehen. */
@media (max-width: 767.98px) {
    #footer .ormado-footer-brand {                                /* [box] */
        padding-bottom: 2.25rem;
        border-bottom: 1px solid var(--ft-line);
    }
    #footer .box-normal .box-normal-link {                        /* [live] a.box-normal-link.dropdown-toggle */
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 3.5rem;
        margin: 0;
        padding: 1rem 0;
        font-family: var(--ft-label);
        font-weight: 600;
        font-size: .875rem;
        line-height: 1.3;
        letter-spacing: .16em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--ft-cream) !important;
    }
    #footer .box-normal .box-normal-link > .text-truncate {       /* [live] */
        min-width: 0;
    }
    /* NOVA: Font-Awesome-Pfeil (content '\f078' !important) */
    #footer .box-normal .box-normal-link.dropdown-toggle::after { /* [quelle] .dropdown-toggle::after */
        content: "" !important;
        font-family: inherit !important;
        flex: none;
        width: 1.125rem;
        height: 1.125rem;
        margin: 0 .125rem 0 0;
        border: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23E3B142' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: transform .2s ease;
    }
    #footer .box-normal .box-normal-link[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
    #footer .box-linkgroup .collapse .nav,                        /* [live] */
    #footer .box-linkgroup .collapsing .nav {
        padding: 0 0 1rem;
    }
    #footer #footer-boxes .nav-link {
        padding: .5rem 0;          /* Tippziel ca. 40px */
    }
    #footer .box-normal-hr {                                      /* [live] hr.box-normal-hr */
        display: block;
        height: 0;
        margin: 0;
        border: 0;
        border-top: 1px solid var(--ft-line);
        opacity: 1;
    }
    #footer .ormado-footer-service {                              /* [box] */
        padding: 2rem 0 2.25rem;
        border-bottom: 1px solid var(--ft-line);
    }
    #footer .withdrawal-link.btn {
        min-height: 3.125rem;
    }
}

/* ------------------------------------------------------ 11.12 Breakpoints */
/* bis 767px:   eine Spalte (11.11)
   768-1299px:  Markenzeile über die volle Breite (Logo und Leitsatz links,
                Kontakt rechts über der dritten Spalte), darunter 3 Spalten
   ab 1300px:   4 Spalten: Marke | Informationen | Gesetzliches | Versand
   Alles ohne :has(); die :has()-Regeln unten sind nur Absicherung (Kopf). */
@media (min-width: 768px) {
    #footer {
        --ft-gap: 2rem;
        padding-top: 4rem;
    }
    #footer > .container {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 2rem;
    }
    #footer > .container > .withdrawal-link-wrapper {
        grid-column: 1;
    }
    #footer > .container > .footnote-vat {
        grid-column: 2;
        justify-self: end;
        padding-top: 2rem;
        text-align: right;
    }
    #footer #footer-boxes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--ft-gap);
        row-gap: 2.75rem;
        padding-bottom: 3rem;
        border-bottom: 1px solid var(--ft-line);
    }
    #footer .ormado-footer-logo img {
        width: 13rem;              /* 208 x 39px */
    }
    #footer #copyright {
        margin-top: 2.75rem;
    }
    /* Platz für den Nach-oben-Knopf (rechts 20px, 48px breit): NOVA hält
       dafür pr-md-8 = 5rem frei. Nötig ist nur, was der Knopf über den
       Seitenrand hinaus belegt; ab ca. 1800px Fensterbreite also nichts. */
    #footer #system-credits {                                     /* [live] .pr-md-8 */
        padding-right: max(0px, calc(4.75rem - max(1rem, (100vw - 103.125rem) / 2 + 1rem))) !important;
        text-align: right;
    }
}
/* 768-991px: Spalten sind nur 224-300px breit, Dachzeilen ohne Goldlinie */
@media (min-width: 768px) and (max-width: 991.98px) {
    #footer .productlist-filter-headline,
    #footer .ormado-footer-titel {
        letter-spacing: .14em;
    }
    #footer .productlist-filter-headline::before,
    #footer .ormado-footer-titel::before {
        display: none;
    }
}
/* 768-1299px: Markenzeile */
@media (min-width: 768px) and (max-width: 1299.98px) {
    /* Über die volle Breite. Bei Sortierung 10 ist die Marke die erste Box,
       dafür reicht :first-child, ganz ohne :has(). */
    #footer #footer-boxes > :first-child {                        /* [live] div.col */
        grid-column: 1 / -1;
    }
    /* Absicherung bei anderer Sortierung (nur mit :has()): die Marke
       überspannt (und steht vorn, 11.3), die erste Box bleibt eine Spalte.
       Zwei getrennte Regeln, damit ältere Browser nur diese verwerfen. */
    #footer #footer-boxes > :has(.ormado-footer-brand) {
        grid-column: 1 / -1;
    }
    #footer #footer-boxes > :first-child:not(:has(.ormado-footer-brand)) {
        grid-column: auto;
    }
    /* Logo und Leitsatz links, Kontakt rechts, genau so breit wie eine
       Spalte darunter: (100% - 2 Abstände) / 3, also bündig mit der
       dritten Spalte. Flex mit Umbruch statt Raster: Landet die Marke doch
       in einer schmalen Zelle (andere Sortierung in einem Browser ohne
       :has()), passt Logo + Leitsatz (20rem) nicht mehr daneben und der
       Kontakt rutscht von selbst darunter, mindestens 12,5rem breit. */
    #footer .ormado-footer-brand {                                /* [box] */
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        column-gap: var(--ft-gap);
        row-gap: 1.75rem;
    }
    #footer .ormado-footer-marke {                                /* [box] */
        flex: 1 1 20rem;
        min-width: 0;
    }
    #footer .ormado-footer-kontakt {                              /* [box] */
        flex: 0 0 calc((100% - 2 * var(--ft-gap)) / 3);
        min-width: min(100%, 12.5rem);
    }
    #footer .ormado-footer-claim {
        max-width: 26rem;
        margin-bottom: 0;
        font-size: 1.625rem;
    }
    /* Nur drei Boxen (Box 127 fehlt), nur mit :has(): zwei Spalten, der
       Kontakt rückt bündig über die zweite. Ohne :has() bleibt rechts eine
       leere Spalte, der Kontakt steht dann über ihr. Beides ist harmlos. */
    #footer #footer-boxes:not(:has(> :nth-child(4))) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #footer #footer-boxes:not(:has(> :nth-child(4))) .ormado-footer-kontakt {
        flex-basis: calc((100% - var(--ft-gap)) / 2);
    }
}
@media (min-width: 992px) {
    #footer {
        --ft-gap: 2.5rem;
    }
}
@media (min-width: 1300px) {
    #footer {
        --ft-gap: clamp(2.5rem, 4vw, 5.5rem);
        padding-top: 4.5rem;
    }
    #footer #footer-boxes {
        /* Gewichte so gewählt, dass „Gesetzliche Informationen“ samt Goldlinie
           (ca. 262px) schon bei 1300px in eine Zeile passt */
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .95fr) minmax(0, 1.2fr) minmax(0, 1.25fr);
        align-items: start;
        padding-bottom: 3.5rem;
    }
    /* nur drei Boxen (nur mit :has(); ohne bleibt eine leere 4. Spalte) */
    #footer #footer-boxes:not(:has(> :nth-child(4))) {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .95fr) minmax(0, 1.2fr);
    }
    /* Dachzeilen mittig zur Logo-Höhe (Logo 39px, Zeile 17px) */
    #footer .productlist-filter-headline,
    #footer .ormado-footer-titel {
        margin-top: .6875rem;
    }
    /* Marke als normale Spalte: Logo, Leitsatz, Kontakt untereinander
       (Abstände und max. 21rem Leitsatz-Breite aus 11.5a) */
    #footer .ormado-footer-claim {
        font-size: 1.75rem;
    }
    #footer #copyright {
        margin-top: 3rem;
    }
}

/* ------------------------------------------- 11.13 Tastatur und Bewegung */
/* Abschnitt 7 setzt 3px Espresso als Fokusrahmen, auf dem Footer
   unsichtbar. Hier Creme (13 : 1). Der Nach-oben-Knopf schwebt auch über
   Creme-Seiten: dort ein Doppelring Creme/Ink, sichtbar auf beiden Gründen. */
#footer a:focus-visible,
#footer .btn:focus-visible,
#footer button:focus-visible {
    outline: 2px solid var(--ft-cream) !important;
    outline-offset: 3px;
    box-shadow: none !important;
}
#footer .smoothscroll-top:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--ft-cream), 0 0 0 5px var(--ormado-ink) !important;
}

@media (prefers-reduced-motion: reduce) {
    #footer *,
    #footer *::before,
    #footer *::after {
        transition: none !important;
    }
    #footer .withdrawal-link.btn:hover::after,
    #footer .withdrawal-link.btn:focus-visible::after {
        transform: none;
    }
}

/* ============================================================================
   12. Rechtliche Grafiken (Template 1.4.4)
   Bilder liegen in img/rechtliches/ und werden in den CMS-Seiten per <img>
   mit diesen Klassen eingebunden. Die Grafiken selbst bleiben unverändert
   (EU-Mitteilung: Anhang I DVO (EU) 2025/1960; Symbol „Elektrogeräte
   Rücknahme“: Anlage 3a ElektroG, „auf weißem Grund“). Deshalb nur Rahmen,
   Größe und weißer Grund, kein Filter, kein Zuschnitt.
   12.1 Gemeinsame Basis      12.3 Symbol „Elektrogeräte Rücknahme“
   12.2 EU-Mitteilung         12.4 Durchgestrichene Mülltonne
   ============================================================================ */

/* 12.1 Gemeinsame Basis: weißer Grund, weil die Seiten creme sind */
img.ormado-rechtsgrafik {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    background: #FFFFFF;
    padding: .75rem;
    border: 1px solid rgba(43, 33, 27, .12);
    border-radius: .25rem;
    box-sizing: border-box;
}

/* 12.2 EU-Mitteilung „Gesetzliche Gewährleistung“: in Standardgröße lesbar,
   QR-Code scannbar. Mobil volle Inhaltsbreite, am Desktop höchstens 720 px. */
img.ormado-rechtsgrafik--eu {
    width: 100%;
    max-width: 720px;
}

/* 12.3 Symbol „Elektrogeräte Rücknahme“ (Querformat ca. 4,4 : 1) */
img.ormado-rechtsgrafik--ruecknahme {
    width: 360px;
}

/* 12.4 Durchgestrichene Mülltonne */
img.ormado-rechtsgrafik--tonne {
    width: 112px;
}

/* ============================================================================
   13. Weitere Artikel laden (Template 1.5.0, Skript js/ormado.js)
   Das Skript setzt .ormado-mehr-laden-aktiv auf <html>, sobald es den Button
   unter #product-list eingefügt hat. Erst dann wird die Seiten-Navigation
   ausgeblendet; ohne JavaScript bleibt alles wie bei NOVA.
   ============================================================================ */
.ormado-mehr-laden-aktiv .navbar-pagination {
    display: none !important;
}
.ormado-mehr-laden {
    display: flex;
    justify-content: center;
    margin: 2rem 0 2.5rem;
}
.ormado-mehr-laden-btn {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 2rem;
    border: 2px solid var(--ormado-ink);
    border-radius: 50rem;
    background: var(--ormado-gold);
    color: var(--ormado-ink);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.ormado-mehr-laden-btn:hover,
.ormado-mehr-laden-btn:focus-visible {
    background: var(--ormado-ink);
    color: var(--ormado-gold);
}
.ormado-mehr-laden-btn:focus-visible {
    outline: 2px solid var(--ormado-gold-dark);
    outline-offset: 3px;
}
.ormado-mehr-laden-btn[disabled] {
    cursor: progress;
    opacity: .85;
}
.ormado-mehr-laden-btn.is-loading::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ormado-dreh .8s linear infinite;
}
@keyframes ormado-dreh {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ormado-mehr-laden-btn.is-loading::before { animation-duration: 2.4s; }
}
.ormado-mehr-laden-ende {
    margin: 0;
    color: var(--ormado-brown-text);
}

/* ============================================================================
   14. Warenkorb-Summe (Template 1.5.1)
   „Zwischensumme:“ brach in der schmalen Summenbox um, der Doppelpunkt stand
   allein in der zweiten Zeile. Beschriftung jetzt ohne Umbruch, die Spalten
   teilen sich den Platz nach Inhalt statt fest 7 : 5.
   ============================================================================ */
.basket-summary .price_label {
    white-space: nowrap;
}
.basket-summary .basket-summary-total > .col {
    flex: 1 1 auto;
    max-width: none;
}
.basket-summary .basket-summary-total > .price-col {
    flex: 0 0 auto;
    padding-left: .5rem;
}

/* ============================================================================
   15. Gesamtpreis unter „In den Warenkorb“ (Template 1.6.0, js/ormado.js)
   Präsente Box: Beschriftung klein, Betrag groß in Espresso, Pfand darunter.
   ============================================================================ */
.ormado-gesamtpreis {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin: 1rem 0 0;
    padding: .875rem 1.125rem;
    background: #FFFFFF;
    border: 2px solid var(--ormado-gold);
    border-radius: .75rem;
    color: var(--ormado-ink);
}
.ormado-gesamtpreis:empty {
    display: none;
}
.ormado-gesamtpreis-label {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.ormado-gesamtpreis strong {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ormado-espresso);
    white-space: nowrap;
}
.ormado-gesamtpreis-pfand {
    flex-basis: 100%;
    font-size: .875rem;
    color: var(--ormado-brown-text);
}
.ormado-gesamtpreis-summe {
    display: flex;
    flex-basis: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .375rem;
    padding-top: .5rem;
    border-top: 1px solid #EADFCC;
    font-size: .9375rem;
    font-weight: 600;
}
.ormado-gesamtpreis .ormado-gesamtpreis-summe strong {
    font-size: 1.25rem;
}

/* ============================================================================
   16. Preisanzeige (Template 1.6.1, Plugins „Ormado Preisanzeige“ und „Ormado Pfand“)
   16.1 Preis für die Mindestmenge   16.3 EINWEG/MEHRWEG am Preis
   16.2 Stückpreis klein darunter    16.4 Umschalter brutto | netto (obere Leiste)
   ============================================================================ */
/* 16.1 „32,16 € für 24 Stück“: Betrag groß, Menge in derselben Zeile kleiner */
.price .ormado-preis-menge {
    font-size: .5em;
    font-weight: 600;
    color: var(--ormado-brown-text);
    white-space: nowrap;
}
.productbox-price .ormado-preis-menge {
    font-size: .75em;
}
/* 16.2 Stückpreis unter dem großen Preis */
.ormado-stueckpreis {
    margin-top: .125rem;
    font-size: .875rem;
    color: var(--ormado-brown-text);
}
/* 16.3 EINWEG/MEHRWEG: § 47 Abs. 4 VerpackDG verlangt mindestens die Schriftgröße der
   Preisangabe. Deshalb erbt das Kennzeichen die Größe des Preises (1em im .price). */
.price .ormado-weg {
    display: inline-block;
    margin-left: .35em;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--ormado-espresso);
}
.price .ormado-weg--mehrweg {
    color: #2E6B3A;
}
/* 16.4 Umschalter in der oberen Leiste */
/* NOVA zieht den Trennstrich (::after) rechts an den Rand des Listenpunkts: Abstand per padding,
   sonst liegt der Strich auf dem „o“ von „netto“ */
.ormado-preisanzeige {
    display: flex;
    align-items: center;
    padding-right: .75rem;
}
.ormado-preisschalter {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
    font-size: .8125rem;
    line-height: 1;
    color: var(--ormado-brown-text);
    text-decoration: none;
    white-space: nowrap;
}
.ormado-preisschalter:hover,
.ormado-preisschalter:focus {
    color: var(--ormado-ink);
    text-decoration: none;
}
.ormado-preisschalter:focus-visible {
    outline: 2px solid var(--ormado-gold-dark);
    outline-offset: 3px;
    border-radius: 999px;
}
/* aktive Seite fett und dunkel, die andere gedämpft */
.ormado-preisschalter-brutto,
.ormado-preisschalter.is-netto .ormado-preisschalter-netto {
    font-weight: 700;
    color: var(--ormado-ink);
}
.ormado-preisschalter.is-netto .ormado-preisschalter-brutto {
    font-weight: 400;
    color: var(--ormado-brown-text);
}
.ormado-preisschalter-track {
    position: relative;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--ormado-cream);
    border: 1px solid #D9CBB5;
    transition: background-color .2s ease, border-color .2s ease;
}
.ormado-preisschalter-knopf {
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(1.25rem - 4px);
    height: calc(1.25rem - 4px);
    border-radius: 50%;
    background: var(--ormado-espresso);
    box-shadow: 0 1px 2px rgba(43, 33, 27, .3);
    transition: transform .2s ease;
}
.ormado-preisschalter.is-netto .ormado-preisschalter-track {
    background: var(--ormado-gold);
    border-color: var(--ormado-gold-dark);
}
.ormado-preisschalter.is-netto .ormado-preisschalter-knopf {
    transform: translateX(1rem);
}
.ormado-preisschalter:hover .ormado-preisschalter-track {
    border-color: var(--ormado-gold-dark);
}
@media (prefers-reduced-motion: reduce) {
    .ormado-preisschalter-track,
    .ormado-preisschalter-knopf { transition: none; }
}