/* ==========================================================================
   ALLGÄU WAGYU · DESIGNSYSTEM (Flag HOMEPAGE_V2)
   --------------------------------------------------------------------------
   Zentrale Quelle für Schrift, Farben, Abstände, Radien und die
   Grundkomponenten (Button, Karte, Formular, Accordion, Chip).

   Architektur
   - Nur geladen, wenn config.HOMEPAGE_V2 aktiv ist (templates/base.html).
     Flag aus = Website exakt wie bisher.
   - Teil 1 (Tokens) liegt auf :root und ist überall lesbar.
   - premium.css (.pv2) und home.css (.hv2) lesen ihre Werte aus diesen
     Tokens – keine eigenen Paletten mehr.
   - Teil 3 (Harmonisierung bestehender Seiten) greift nur unter
     body.aw-ds und nur in den Content-Bereichen der öffentlichen Seiten.
     Checkout, Kasse, Admin und Konto-Formulare mit Zahlungslogik sind
     ausgenommen (siehe base.html: aw_ds_aktiv).
   - Keine Klassen/IDs umbenannt: JS-Hooks bleiben unberührt.

   Schriftregeln
   - Display (Cormorant Garamond, self-hosted): H1, große H2, Statements,
     Zitate. NIE für Preise, BMS, Gewicht, Buttons, Navigation, Formulare,
     Filter, Tabellen oder längere technische Texte.
   - UI/Body: eine Sans für alles andere (--aw-font-ui).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Schriften (einzige @font-face-Quelle für Cormorant)
   Cross-Browser: Es gibt nur die Schnitte 500, 500 italic und 600. Damit Safari
   und Chrome/Edge bei angefragtem 400 oder 700 nicht unterschiedlich ausweichen
   bzw. unterschiedlich „fett rechnen“ (Faux Bold), decken die Dateien Gewichts-
   BEREICHE ab. Metriken der Datei: UPM 1000, hhea/typo 924/−287, Linegap 0,
   USE_TYPO_METRICS gesetzt → identische Zeilenhöhen auf macOS und Windows.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url('../fonts/cormorant-garamond/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('../fonts/cormorant-garamond/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/cormorant-garamond/cormorant-garamond-latin-500-italic.woff2') format('woff2');
}
/* Metrisch angepasster Fallback für die ersten Millisekunden (font-display: swap):
   Georgia auf Cormorant-x-Höhe (386 vs. 481 /1000 → 80 %) und dessen Ober-/Unterlängen.
   Verhindert, dass Überschriften beim Nachladen springen. */
@font-face {
    font-family: 'Cormorant Garamond Fallback';
    src: local('Georgia');
    size-adjust: 80%;
    ascent-override: 115.5%;
    descent-override: 35.9%;
    line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Farben — bestehende Markenwerte (Premium-Mail-Design, Startseite V2) */
    --aw-bg-dark: #16110e;
    --aw-bg-dark-2: #221b16;
    --aw-bg-light: #ffffff;
    --aw-bg-bone: #f7f4ee;
    --aw-bg-sand: #efe9de;
    --aw-text-primary: #17120f;
    --aw-text: #4a4540;
    --aw-text-muted: #7d756a;
    --aw-text-on-dark: #f3eee6;
    --aw-text-on-dark-muted: #b9afa1;
    --aw-border-subtle: #e2d9c9;
    --aw-border-strong: #c9bda8;
    --aw-accent: #9a7746;           /* Gold auf hell (AA auf Weiß/Bone) */
    --aw-accent-on-dark: #c9a961;   /* Gold-Pill der Kunden-Mails */
    --aw-success: #3f6b4a;
    --aw-success-bg: #eef3ec;
    --aw-error: #9b2c2c;
    --aw-error-bg: #f8ecea;
    --aw-focus: #9a7746;

    /* Schriftfamilien */
    --aw-font-display: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, 'Times New Roman', serif;
    --aw-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Schriftskala (Konsolidierung 03.10.2026)
       Prinzip: rem-Basis + kleiner vw-Anteil + harte Ober-/Untergrenze
       → ruhiges Skalieren, reagiert auf Browser-Zoom, kein Springen zwischen
       Breiten. Werte bei 1440 px in Klammern. Nicht jede Section ist ein Hero:
       display-xl NUR für Seiten-H1/Hero. */
    --aw-text-display-xl: clamp(2.5rem, 1.5rem + 2.8vw, 4.25rem);     /* Hero-H1          (≈64 px, mobil 40) */
    --aw-text-display-lg: clamp(2.15rem, 1.4rem + 1.9vw, 3.25rem);    /* große Section-H2 (≈50 px, mobil 34) */
    --aw-text-heading-lg: clamp(1.9rem, 1.3rem + 1.5vw, 2.75rem);     /* kleinere H2      (≈42 px, mobil 30) */
    --aw-text-heading-md: clamp(1.5rem, 1.15rem + 0.9vw, 2.125rem);   /* Karten-H3        (≈31 px, mobil 24) */
    --aw-text-heading-sm: 1.25rem;                                     /* UI-Titel         (20 px) */
    --aw-text-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);     /* Lead             (≈19 px, mobil 17) */
    --aw-text-body: 1.0625rem;                                          /* Fließtext        (17 px) */
    --aw-text-small: 0.875rem;                                          /* Meta/Hinweise    (14 px) */
    --aw-text-eyebrow: 0.8125rem;                                       /* Eyebrow          (13 px) */
    /* Alias der bisherigen Namen (eine Wahrheit) */
    --aw-fs-display-xl: var(--aw-text-display-xl);
    --aw-fs-display-lg: var(--aw-text-display-lg);
    --aw-fs-heading-lg: var(--aw-text-heading-lg);
    --aw-fs-heading-md: var(--aw-text-heading-md);
    --aw-fs-heading-sm: var(--aw-text-heading-sm);
    --aw-fs-body-lg: var(--aw-text-body-lg);
    --aw-fs-body: var(--aw-text-body);
    --aw-fs-body-sm: var(--aw-text-small);
    --aw-fs-eyebrow: var(--aw-text-eyebrow);
    --aw-fs-meta: 0.8125rem;
    --aw-lh-display: 1.05;
    --aw-lh-heading: 1.1;
    --aw-lh-body: 1.65;
    --aw-ls-eyebrow: 0.16em;
    --aw-ls-button: 0.14em;

    /* Abstände – Desktop kompakt, Mobil eigene Untergrenzen */
    --aw-gutter: clamp(1rem, 4vw, 2rem);
    --aw-section-space-lg: clamp(3.5rem, 1.5rem + 4vw, 5.5rem);    /* Standard-Section (≈82 px, mobil 56) */
    --aw-section-space-md: clamp(3rem, 1.5rem + 3vw, 4.5rem);      /* dichtere Section (≈67 px, mobil 48) */
    --aw-section-space-sm: clamp(2.25rem, 1.25rem + 2vw, 3.25rem); /* Bänder/Teaser    (≈49 px, mobil 36) */
    --aw-head-gap: clamp(1.5rem, 0.9rem + 1.3vw, 2.5rem);          /* Kopf → Inhalt    (≈33 px, mobil 24) */
    --aw-section-y: var(--aw-section-space-lg);
    --aw-section-y-sm: var(--aw-section-space-sm);
    --aw-section-y-lg: var(--aw-section-space-lg);
    --aw-max-width: 1240px;
    --aw-max-width-text: 46rem;
    --aw-grid-gap: clamp(1.25rem, 2.5vw, 2rem);
    --aw-card-gap: clamp(1rem, 1.8vw, 1.5rem);

    /* Radien — ein System: Flächen/Karten/Buttons fast kantig, Chips rund */
    --aw-radius-sm: 2px;     /* Buttons, Inputs, Karten, Medien */
    --aw-radius-md: 4px;     /* Dialoge, größere Panels */
    --aw-radius-pill: 999px; /* Chips, Filter, Badges */

    /* Buttons */
    --aw-btn-height: 3.25rem;
    --aw-btn-height-sm: 2.6rem;
    --aw-btn-px: 1.75rem;
    --aw-btn-fs: 0.78rem;

    /* Formulare */
    --aw-input-height: 3.1rem;

    /* Bewegung */
    --aw-transition: 0.2s ease;
}

/* --------------------------------------------------------------------------
   2. Komponenten (neue, gemeinsame Klassen — .aw-*)
   -------------------------------------------------------------------------- */
.aw-container { width: 100%; max-width: var(--aw-max-width); margin: 0 auto; padding: 0 var(--aw-gutter); }
.aw-section { padding: var(--aw-section-y) 0; }
.aw-section--bone { background: var(--aw-bg-bone); }
.aw-section--dark { background: var(--aw-bg-dark); color: var(--aw-text-on-dark-muted); }

.aw-eyebrow {
    display: block;
    margin: 0 0 1rem;
    font-family: var(--aw-font-ui);
    font-size: var(--aw-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--aw-ls-eyebrow);
    text-transform: uppercase;
    color: var(--aw-accent);
}
.aw-display {
    margin: 0;
    font-family: var(--aw-font-display);
    font-size: var(--aw-fs-display-lg);
    font-weight: 500;
    line-height: var(--aw-lh-display);
    letter-spacing: -0.005em;
    color: var(--aw-text-primary);
}
.aw-lead {
    max-width: 38rem;
    margin: 1.25rem 0 0;
    font-family: var(--aw-font-ui);
    font-size: var(--aw-fs-body-lg);
    line-height: var(--aw-lh-body);
    color: var(--aw-text);
}
.aw-meta { font-family: var(--aw-font-ui); font-size: var(--aw-fs-meta); color: var(--aw-text-muted); letter-spacing: 0.02em; }

/* Seitenkopf (components/aw/_page_head.html) */
.aw-page-head {
    margin-top: var(--navbar-height, 56px);
    padding: var(--aw-section-space-md) 0 var(--aw-section-space-sm);
    background: var(--aw-bg-bone);
}
.aw-page-head--dark { background: var(--aw-bg-dark); }
.aw-page-head--dark .aw-eyebrow { color: var(--aw-accent-on-dark); }
.aw-page-head--dark .aw-display { color: var(--aw-text-on-dark); }
.aw-page-head--dark .aw-lead { color: var(--aw-text-on-dark-muted); }
.aw-page-head--center { text-align: center; }
.aw-page-head--center .aw-lead { margin-left: auto; margin-right: auto; }

/* Buttons */
.aw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: var(--aw-btn-height);
    padding: 0.9rem var(--aw-btn-px);
    border: 1px solid var(--aw-text-primary);
    border-radius: var(--aw-radius-sm);
    background: var(--aw-text-primary);
    color: #fff;
    font-family: var(--aw-font-ui);
    font-size: var(--aw-btn-fs);
    font-weight: 600;
    letter-spacing: var(--aw-ls-button);
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--aw-transition), color var(--aw-transition), border-color var(--aw-transition);
}
.aw-btn:hover { background: #3a2f28; border-color: #3a2f28; color: #fff; }
.aw-btn--secondary { background: transparent; color: var(--aw-text-primary); }
.aw-btn--secondary:hover { background: var(--aw-text-primary); color: #fff; }
.aw-btn--text { min-height: 0; padding: 0 0 0.2rem; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--aw-text-primary); }
.aw-btn--text:hover { background: none; color: var(--aw-accent); }
.aw-btn:disabled, .aw-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* Karten */
.aw-card { background: var(--aw-bg-light); border: 1px solid var(--aw-border-subtle); border-radius: var(--aw-radius-sm); }
.aw-card--editorial { border: 0; background: none; }
.aw-card--functional { padding: clamp(1.25rem, 3vw, 2rem); }
.aw-card--tool { padding: clamp(1.25rem, 3vw, 2rem); background: var(--aw-bg-bone); border-color: transparent; }

/* Chips */
.aw-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 2.4rem; padding: 0.45rem 1.05rem;
    border: 1px solid var(--aw-border-subtle); border-radius: var(--aw-radius-pill);
    background: var(--aw-bg-light); color: var(--aw-text-primary);
    font-family: var(--aw-font-ui); font-size: 0.86rem; font-weight: 500;
    text-decoration: none;
}
.aw-chip:hover { border-color: var(--aw-text-primary); }
.aw-chip.is-active, .aw-chip[aria-current] { background: var(--aw-text-primary); border-color: var(--aw-text-primary); color: #fff; }

/* Fokus — überall gleich */
body.aw-ds a:focus-visible,
body.aw-ds button:focus-visible,
body.aw-ds [role="button"]:focus-visible,
body.aw-ds summary:focus-visible { outline: 2px solid var(--aw-focus); outline-offset: 3px; box-shadow: none; }

/* --------------------------------------------------------------------------
   3. Harmonisierung bestehender Seiten (nur body.aw-ds)
   Prinzip: zuerst die vorhandenen Seiten-Variablen auf die zentralen Tokens
   umbiegen (eine Stelle statt vieler Regeln), dann die gemeinsam genutzten
   Bootstrap-Bausteine angleichen. Klassen/IDs bleiben unverändert.
   -------------------------------------------------------------------------- */

/* 3.1 Seiten-Paletten → zentrale Tokens */
body.aw-ds {
    /* style.css (Admin-Blau) */
    --primary-color: var(--aw-text-primary);
    /* Wissen, Rezepte, Aktuelles, Karriere, shop.css-Breadcrumb */
    --fleischrot: var(--aw-text-primary);
    --fleischrot-hover: #3a2f28;
    --wagyu-gold: var(--aw-accent-on-dark);
    /* FAQ, Kontakt */
    --color-black: var(--aw-text-primary);
    --color-red: var(--aw-accent);
    --color-gold: var(--aw-accent);
    /* Garpunktfinder (garpunktfinder.css, :root) */
    --gpf-gold: var(--aw-accent);
    --gpf-gold-dark: var(--aw-text-primary);
    --gpf-bg: var(--aw-bg-bone);
    --gpf-text: var(--aw-text-primary);
    --gpf-text-muted: var(--aw-text-muted);
    --gpf-border: var(--aw-border-subtle);
    --gpf-shadow: none;
    --gpf-shadow-lg: 0 24px 60px -40px rgba(23, 18, 15, 0.35);

    /* Bootstrap-Linkfarbe → Tinte, Hover Gold (statt Bootstrap-Blau) */
    --bs-link-color-rgb: 23, 18, 15;
    --bs-link-hover-color-rgb: 154, 119, 70;
    --bs-link-color: var(--aw-text-primary);
    --bs-link-hover-color: var(--aw-accent);

    font-family: var(--aw-font-ui);
    color: var(--aw-text-primary);
    background-color: var(--aw-bg-light);
    -webkit-font-smoothing: antialiased;
}
/* Über uns (.au-*) und Lieferung (.lf-page) definieren ihre Paletten lokal */
body.aw-ds .au-page, body.aw-ds [class*="au-section"], body.aw-ds .au-hero, body.aw-ds .au-cta {
    --au-gold: var(--aw-accent);
    --au-dark: var(--aw-bg-dark);
    --au-dark2: var(--aw-bg-dark-2);
    --au-cream: var(--aw-bg-bone);
    --au-muted: var(--aw-text-muted);
    --au-border: var(--aw-border-subtle);
}
body.aw-ds .lf-page {
    --lf-black: var(--aw-text-primary);
    --lf-gold: var(--aw-accent);
    --lf-gold-soft: rgba(154, 119, 70, 0.1);
    --lf-cream: var(--aw-bg-bone);
    --lf-border: var(--aw-border-subtle);
    --lf-text: var(--aw-text);
    --lf-text-muted: var(--aw-text-muted);
}

/* 3.2 Typografie: H1 und Abschnitts-H2 in Cormorant, alles Funktionale in UI-Sans.
   Element-Regeln über :where() mit Element-Spezifität (0,0,1): sie lösen nur
   die globale shop.css-h2-Regel ab, jede Klassenregel einer Seite gewinnt weiter. */
:where(body.aw-ds) :is(h1, h2) {
    font-family: var(--aw-font-display);
    font-weight: 500;
    letter-spacing: -0.005em;
    /* Farbe bewusst NICHT gesetzt: Überschriften erben (body = Tinte, dunkle Flächen = hell) */
}
:where(body.aw-ds) h1 { line-height: var(--aw-lh-display); }
:where(body.aw-ds) h2 { font-size: var(--aw-fs-heading-lg); line-height: var(--aw-lh-heading); }
:where(body.aw-ds) :is(h3, h4, h5, h6) { font-family: var(--aw-font-ui); }
/* Bootstrap-Display-H1 der Bestandsseiten (Wissen-Detail, FAQ, Kontakt, Recht, Aktuelles, Karriere) */
body.aw-ds :is(h1, h2).fw-bold { font-weight: 500 !important; }   /* .fw-bold ist !important; Cormorant nur 500/600 */
body.aw-ds h1:is(.display-4, .display-5) { font-size: var(--aw-fs-display-lg); line-height: var(--aw-lh-display); }
body.aw-ds h1 > :is(i.fas, i.fa), body.aw-ds h2.section-headline > i { display: none; }  /* Deko-Icons in Überschriften */
/* Funktionale H2 bleiben UI-Sans */
body.aw-ds h2.accordion-header { font-family: var(--aw-font-ui); font-size: inherit; line-height: inherit; letter-spacing: 0; }
body.aw-ds h2:is(.h3, .h4) { font-size: var(--aw-fs-heading-md); }
body.aw-ds .lead { font-size: var(--aw-fs-body-lg); line-height: var(--aw-lh-body); }
body.aw-ds .text-muted { color: var(--aw-text-muted) !important; }

/* Fließtext der V2-Sections: 17 px (nur Text ohne eigene Größe; Legacy-Shopbereiche
   in .hv2-shop-legacy und Kaufwidgets liegen außerhalb dieser Container) */
body.aw-ds :is(.hv2-section, .hv2-hero, .pv2-section, .aw-page-head) { font-size: var(--aw-text-body); }

/* V2-Kaufkomponenten: Preise immer UI-Sans (Regel: kein Cormorant für Preise/Gewicht/BMS) */
body.aw-ds .hv2-showcase__price,
body.aw-ds .ftv2 .kachel-preis,
body.aw-ds .ftv2 .detail-preis,
body.aw-ds .pdv2-widget [id^="product-price-"],
body.aw-ds .pdv2-widget [id^="total-price-"],
body.aw-ds .pdv2-cut__price {
    font-family: var(--aw-font-ui);
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
body.aw-ds .ftv2 .kachel-preis, body.aw-ds .pdv2-cut__price, body.aw-ds .hv2-showcase__price { font-size: 1.15rem; }
body.aw-ds .pdv2-widget [id^="product-price-"] { white-space: nowrap; }
body.aw-ds .ftv2 .detail-preis { font-size: 1.7rem; }

/* 3.2b Container: eine Inhaltsbreite für alle Seiten (Bootstrap ab xl: 1140/1320 px
   vs. V2 1240 px → Kante sprang beim Seitenwechsel, auch im Header). */
@media (min-width: 1200px) {
    body.aw-ds .container {
        max-width: var(--aw-max-width);
        padding-left: var(--aw-gutter);
        padding-right: var(--aw-gutter);
    }
}

/* 3.2c Gleiche Darstellung in Safari und Chrome/Edge: Kerning/Ligaturen explizit,
   keine Browser-Synthese von Fett/Kursiv, kein iOS-Text-Inflating */
html:has(body.aw-ds) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body.aw-ds) :is(h1, h2, .hv2-display, .hv2-h2, .hv2-h3, .pv2-display, .pv2-h2, .pv2-h3, .aw-display) {
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

/* 3.3 Breadcrumb */
body.aw-ds .breadcrumb { background: transparent; padding: 0; margin-bottom: 1.5rem; font-size: var(--aw-fs-meta); }
body.aw-ds .breadcrumb-item a { color: var(--aw-accent); text-decoration: none; }
body.aw-ds .breadcrumb-item.active { color: var(--aw-text-muted); }

/* 3.4 Buttons — Bootstrap-Varianten im Inhalt auf das System (Header/Warenkorb/Modale ausgenommen) */
body.aw-ds :is(.btn-dark, .btn-primary, .btn-outline-dark, .btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-outline-light, .btn-submit):not(.navbar *, .mobile-nav *, .cart-sidebar *, .modal *, .type-btn, .btn-close) {
    border-radius: var(--aw-radius-sm);
    font-family: var(--aw-font-ui);
    font-size: var(--aw-btn-fs);
    font-weight: 600;
    letter-spacing: var(--aw-ls-button);
    text-transform: uppercase;
    padding: 0.85rem 1.5rem;
    box-shadow: none;
    transition: background-color var(--aw-transition), color var(--aw-transition), border-color var(--aw-transition);
}
body.aw-ds :is(.btn-dark, .btn-primary, .btn-submit):not(.navbar *, .mobile-nav *, .cart-sidebar *, .modal *, .type-btn) {
    background: var(--aw-text-primary); border: 1px solid var(--aw-text-primary); color: #fff;
}
body.aw-ds :is(.btn-dark, .btn-primary, .btn-submit):not(.navbar *, .mobile-nav *, .cart-sidebar *, .modal *, .type-btn):hover {
    background: #3a2f28; border-color: #3a2f28; color: #fff; transform: none;
}
body.aw-ds :is(.btn-outline-dark, .btn-outline-primary, .btn-outline-secondary):not(.navbar *, .mobile-nav *, .cart-sidebar *, .modal *, .type-btn) {
    background: transparent; border: 1px solid var(--aw-text-primary); color: var(--aw-text-primary);
}
body.aw-ds :is(.btn-outline-dark, .btn-outline-primary, .btn-outline-secondary):not(.navbar *, .mobile-nav *, .cart-sidebar *, .modal *, .type-btn):hover {
    background: var(--aw-text-primary); color: #fff;
}
body.aw-ds .btn-sm:not(.navbar *, .mobile-nav *, .cart-sidebar *, .modal *) { padding: 0.55rem 1rem; font-size: 0.72rem; }
body.aw-ds .btn-lg:not(.navbar *, .mobile-nav *, .cart-sidebar *, .modal *) { min-height: var(--aw-btn-height); }
body.aw-ds .btn:disabled, body.aw-ds .btn.disabled { opacity: 0.45; }

/* 3.5 Karten */
body.aw-ds .card:not(.navbar *, .cart-sidebar *, .modal *) {
    border: 1px solid var(--aw-border-subtle);
    border-radius: var(--aw-radius-sm);
    box-shadow: none;
}
body.aw-ds .card.shadow-sm, body.aw-ds .card.shadow { box-shadow: none !important; }
body.aw-ds .card-header { border-radius: 0 !important; }
body.aw-ds .card-img-top { border-radius: 0; }

/* 3.6 Formulare */
body.aw-ds :is(.form-control, .form-select):not(.cart-sidebar *, .modal *) {
    min-height: var(--aw-input-height);
    border: 1px solid var(--aw-border-strong);
    border-radius: var(--aw-radius-sm);
    background-color: var(--aw-bg-light);
    color: var(--aw-text-primary);
    font-family: var(--aw-font-ui);
    font-size: var(--aw-fs-body);
    box-shadow: none;
}
body.aw-ds textarea.form-control { min-height: 8rem; }
body.aw-ds :is(.form-control, .form-select):focus {
    border-color: var(--aw-text-primary);
    box-shadow: 0 0 0 3px rgba(154, 119, 70, 0.18);
    outline: none;
}
body.aw-ds .form-label { font-size: var(--aw-fs-body-sm); font-weight: 600; color: var(--aw-text-primary); letter-spacing: 0.01em; }
body.aw-ds .form-check-input { border-color: var(--aw-border-strong); border-radius: var(--aw-radius-sm); }
body.aw-ds .form-check-input[type="radio"] { border-radius: 50%; }
body.aw-ds .form-check-input:checked { background-color: var(--aw-text-primary); border-color: var(--aw-text-primary); }
body.aw-ds .form-check-input:focus { box-shadow: 0 0 0 3px rgba(154, 119, 70, 0.18); border-color: var(--aw-text-primary); }
body.aw-ds .was-validated .form-control:invalid, body.aw-ds .form-control.is-invalid { border-color: var(--aw-error); }
body.aw-ds .invalid-feedback { color: var(--aw-error); }
body.aw-ds .was-validated .form-control:valid, body.aw-ds .form-control.is-valid { border-color: var(--aw-success); }

/* 3.7 Accordion (Bootstrap) */
body.aw-ds .accordion { --bs-accordion-border-color: var(--aw-border-subtle); --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; }
body.aw-ds .accordion-item { border-left: 0; border-right: 0; background: transparent; }
body.aw-ds .accordion-button {
    padding: 1.15rem 0;
    background: transparent !important;
    color: var(--aw-text-primary) !important;
    font-family: var(--aw-font-ui);
    font-size: 1rem;
    font-weight: 600;
    box-shadow: none !important;
}
body.aw-ds .accordion-button:not(.collapsed) { color: var(--aw-text-primary) !important; }
body.aw-ds .accordion-body { padding: 0 0 1.25rem; color: var(--aw-text); line-height: var(--aw-lh-body); }

/* 3.8 Chips: Bootstrap nav-pills (Wissen/Rezepte-Kategorien) */
body.aw-ds .nav-pills .nav-link {
    border: 1px solid var(--aw-border-subtle) !important;
    border-radius: var(--aw-radius-pill) !important;
    background: var(--aw-bg-light) !important;
    color: var(--aw-text-primary) !important;
    font-size: 0.86rem;
    font-weight: 500;
    padding: 0.5rem 1.1rem !important;
    box-shadow: none !important;
    transform: none !important;
}
body.aw-ds .nav-pills .nav-link:hover { border-color: var(--aw-text-primary) !important; }
body.aw-ds .nav-pills .nav-link.active { background: var(--aw-text-primary) !important; border-color: var(--aw-text-primary) !important; color: #fff !important; }
body.aw-ds .nav-pills .nav-link i { display: none; }
body.aw-ds .nav-pills .badge { background: transparent !important; color: inherit !important; font-weight: 500; opacity: 0.6; padding: 0 0 0 0.15rem; }

/* 3.9 Badges/Labels */
body.aw-ds .badge:not(.navbar *, .cart-sidebar *) { border-radius: var(--aw-radius-sm); font-family: var(--aw-font-ui); font-weight: 600; letter-spacing: 0.06em; }

/* --------------------------------------------------------------------------
   4. Seitenbausteine, die bisher eigene Mini-Systeme hatten
   (bewusst hier zentral statt in den Seiten-Templates; Klassen unverändert)
   -------------------------------------------------------------------------- */

/* 4.1 Header / Navigation / Versandleiste / Footer ------------------------- */
:where(body.aw-ds) header { background: none; }              /* style.css: header{Admin-Blau-Verlauf} */
body.aw-ds .navbar .btn-dark,
body.aw-ds .mobile-nav-header .btn-dark {
    border-radius: var(--aw-radius-sm);
    background: var(--aw-text-primary);
    border-color: var(--aw-text-primary);
}
body.aw-ds .navbar .btn-dark:hover,
body.aw-ds .mobile-nav-header .btn-dark:hover { background: #3a2f28; border-color: #3a2f28; }
body.aw-ds .navbar .btn-dark:focus-visible { outline: 2px solid var(--aw-focus); outline-offset: 2px; box-shadow: none; }
body.aw-ds .lf-trust-nav-link { font-family: var(--aw-font-ui); color: var(--aw-text-primary); }
body.aw-ds .lf-trust-nav-link:hover { color: var(--aw-accent); border-color: var(--aw-accent); }
body.aw-ds .versand-info-bar { font-family: var(--aw-font-ui); color: var(--aw-text-primary); border-bottom-color: var(--aw-border-subtle); }
/* Burger-Menü (components/navigation/mobile_nav.html, Markup unverändert):
   Bone-Panel, Hauptnavigation in Cormorant, Service/Rechtliches als ruhige
   UI-Sans-Liste, Gold-Eyebrows, feine Trennlinien, weicher Slide-in. */
body.aw-ds .mobile-nav {
    left: auto;
    width: min(92vw, 25rem);
    background: var(--aw-bg-bone);
    box-shadow: none;
    transform: translateX(-104%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
body.aw-ds .mobile-nav:not(.active) { left: 0; }
body.aw-ds .mobile-nav.active { left: 0; transform: none; box-shadow: 0 0 60px rgba(22, 17, 14, 0.28); }
body.aw-ds .mobile-nav-overlay { background: rgba(22, 17, 14, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.aw-ds .mobile-nav-header {
    padding: 1.25rem clamp(1.25rem, 5vw, 2rem);
    border-bottom: 1px solid var(--aw-border-subtle);
}
body.aw-ds .mobile-nav-header img { height: 32px; width: auto; }
body.aw-ds .mobile-nav-header .btn-dark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0;
    background: transparent; border: 1px solid var(--aw-text-primary); color: var(--aw-text-primary);
    border-radius: var(--aw-radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}
body.aw-ds .mobile-nav-header .btn-dark:hover { background: var(--aw-text-primary); color: #fff; }
body.aw-ds .mobile-nav-content { padding: 1.75rem clamp(1.25rem, 5vw, 2rem) 2.5rem; }
body.aw-ds .mobile-nav-heading {
    padding: 0 0 0.75rem;
    font-family: var(--aw-font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: var(--aw-ls-eyebrow);
    text-transform: uppercase;
    color: var(--aw-accent);
}
body.aw-ds .mobile-nav-content > hr {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--aw-border-subtle);
    opacity: 1;
}
/* Einheitliche Linkliste: eine Schrift (UI-Sans), eine Größe, ein Rhythmus.
   Gruppen werden nur über Gold-Eyebrow und feine Linie gegliedert. */
body.aw-ds .mobile-nav-link {
    position: relative;
    padding: 0.55rem 0;
    border-radius: 0;
    background: none;
    font-family: var(--aw-font-ui);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--aw-text-primary);
    transition: color 0.2s ease;
}
body.aw-ds .mobile-nav-link:hover,
body.aw-ds .mobile-nav-link:focus-visible { background: none; color: var(--aw-accent); }
/* Rechtliches: gleiche Schrift und Größe, nur zurückhaltender in der Farbe */
body.aw-ds .mobile-nav-link--klein { color: var(--aw-text-muted); font-weight: 400; }
body.aw-ds .mobile-nav-link--klein:hover { color: var(--aw-accent); }

body.aw-ds .footer { background: var(--aw-bg-dark); color: var(--aw-text-on-dark-muted); }
body.aw-ds .footer::before { display: none; }                 /* blauer Verlaufsstrich */
body.aw-ds .footer-section h5 {
    color: var(--aw-accent-on-dark);
    font-family: var(--aw-font-ui);
    font-size: var(--aw-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--aw-ls-eyebrow);
    text-transform: uppercase;
}
body.aw-ds .footer-section h5::after { background: var(--aw-accent-on-dark); }
body.aw-ds .footer-link, body.aw-ds .footer .contact-item { color: var(--aw-text-on-dark-muted); }
body.aw-ds .footer-link:hover, body.aw-ds .footer-legal a:hover { color: var(--aw-text-on-dark); }
body.aw-ds .footer .contact-item i, body.aw-ds .footer .social-link { color: var(--aw-accent-on-dark); }
body.aw-ds .footer .social-link { border-color: rgba(201, 169, 97, 0.35); }
body.aw-ds .footer .social-link:hover { background: var(--aw-accent-on-dark); color: var(--aw-bg-dark); }
body.aw-ds .footer .newsletter-input, body.aw-ds .footer .newsletter-btn { border-radius: var(--aw-radius-sm); }
body.aw-ds .footer-bottom { background: rgba(0, 0, 0, 0.35); }

/* 4.1b Abstand unter der fixen Navbar: Bestandsseiten nutzten pauschal mt-5 (48 px);
   die mobile Navbar ist zweizeilig (~100 px) und überdeckte den Seitenanfang.
   --navbar-height wird per JS aus der echten Navbar-Höhe gesetzt. */
body.aw-ds :is(.lf-hero, header.page-header, header.py-5.mt-5) { margin-top: var(--navbar-height, 56px) !important; }

/* 4.2 Seitenköpfe der Bestandsseiten (FAQ, Kontakt, Rechtliches) ------------ */
body.aw-ds header:is(.page-header, .py-5):not(.navbar *) {
    background: var(--aw-bg-bone) !important;            /* Rechtliches: Verlauf als style-Attribut */
    color: var(--aw-text) !important;
    border-bottom: 1px solid var(--aw-border-subtle);
}
body.aw-ds header:is(.page-header, .py-5) :is(h1, .display-4) { color: var(--aw-text-primary) !important; }
body.aw-ds header:is(.page-header, .py-5) p { color: var(--aw-text) !important; }
body.aw-ds header.page-header i { display: none; }       /* Deko-Icons (Glühbirne, Personen) */

/* 4.3 Xaver / Genussberater ------------------------------------------------- */
body.aw-ds .gb-page-head { padding-bottom: clamp(2rem, 4vw, 3rem); }
body.aw-ds .gb-wrapper { background: var(--aw-bg-bone); }
body.aw-ds .gb-card {
    border: 1px solid var(--aw-border-subtle);
    border-radius: var(--aw-radius-md);
    box-shadow: 0 24px 60px -48px rgba(23, 18, 15, 0.35);
}
body.aw-ds .gb-progress-track { height: 2px; background: var(--aw-border-subtle); border-radius: 0; }
body.aw-ds .gb-progress-fill { background: var(--aw-accent); border-radius: 0; }
body.aw-ds .gb-progress-label { font-size: var(--aw-fs-meta); letter-spacing: var(--aw-ls-eyebrow); color: var(--aw-text-muted); }
body.aw-ds .gb-question {
    font-family: var(--aw-font-ui);
    font-size: clamp(1.3rem, 2.6vw, 1.65rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--aw-text-primary);
}
body.aw-ds .gb-option {
    border: 1px solid var(--aw-border-subtle);
    border-radius: var(--aw-radius-sm);
    background: var(--aw-bg-light);
    color: var(--aw-text-primary);
    font-family: var(--aw-font-ui);
    transform: none;
}
body.aw-ds .gb-option:hover { border-color: var(--aw-text-primary); background: var(--aw-bg-light); transform: none; }
body.aw-ds .gb-option.selected { background: var(--aw-text-primary); border-color: var(--aw-text-primary); color: #fff; }
body.aw-ds .gb-option-sub { color: var(--aw-text-muted); }
body.aw-ds .gb-option.selected .gb-option-sub { color: var(--aw-text-on-dark-muted); }
body.aw-ds .gb-stepper-btn { border: 1px solid var(--aw-border-strong); color: var(--aw-text-primary); }
body.aw-ds .gb-stepper-btn:hover { border-color: var(--aw-text-primary); }
body.aw-ds .gb-stepper-value { font-weight: 600; color: var(--aw-text-primary); }
body.aw-ds .gb-primary-btn,
body.aw-ds .gb-email-submit {
    min-height: var(--aw-btn-height);
    border-radius: var(--aw-radius-sm);
    background: var(--aw-text-primary);
    font-size: var(--aw-btn-fs);
    font-weight: 600;
    letter-spacing: var(--aw-ls-button);
    text-transform: uppercase;
    box-shadow: none;
    transform: none;
}
body.aw-ds .gb-primary-btn:hover, body.aw-ds .gb-email-submit:hover { background: #3a2f28; transform: none; box-shadow: none; }
body.aw-ds .gb-back-btn { border-radius: var(--aw-radius-sm); color: var(--aw-text-muted); font-size: var(--aw-fs-body-sm); }
body.aw-ds .gb-textarea,
body.aw-ds .gb-email-input {
    border: 1px solid var(--aw-border-strong);
    border-radius: var(--aw-radius-sm);
    background: var(--aw-bg-light);
    font-family: var(--aw-font-ui);
}
body.aw-ds .gb-textarea:focus, body.aw-ds .gb-email-input:focus { border-color: var(--aw-text-primary); box-shadow: 0 0 0 3px rgba(154, 119, 70, 0.18); }
body.aw-ds :is(.gb-fixed-banner, .gb-error, .gb-email-format-error, .gb-email-warning, .gb-email-suggest) { border-radius: var(--aw-radius-sm); }
body.aw-ds .gb-fixed-banner { border-left-color: var(--aw-accent); }

/* 4.4 Garpunktfinder ------------------------------------------------------- */
body.aw-ds .gpf-hero {
    background: var(--aw-bg-dark);
    padding: var(--aw-section-space-md) 0 var(--aw-section-space-sm);
}
body.aw-ds .gpf-hero .aw-eyebrow { color: var(--aw-accent-on-dark); }
body.aw-ds .gpf-hero__title {
    font-family: var(--aw-font-display);
    font-size: var(--aw-fs-display-lg);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: var(--aw-lh-display);
    color: var(--aw-text-on-dark);
    padding-left: 0;
}
body.aw-ds .gpf-hero__title::before { display: none; }
body.aw-ds .gpf-hero__subtitle { color: var(--aw-text-on-dark-muted); font-size: var(--aw-fs-body-lg); line-height: var(--aw-lh-body); max-width: 38rem; }
body.aw-ds .gpf-step__number {
    width: 2rem; height: 2rem;
    background: transparent;
    border: 1px solid var(--aw-accent);
    color: var(--aw-accent);
    font-size: 0.85rem;
    font-weight: 600;
}
body.aw-ds .gpf-step__title { font-family: var(--aw-font-display); font-size: var(--aw-fs-heading-md); font-weight: 500; }
body.aw-ds .gpf-cut-card {
    border: 1px solid var(--aw-border-subtle);
    border-radius: var(--aw-radius-sm);
    box-shadow: none;
    transform: none;
}
body.aw-ds .gpf-cut-card:hover { border-color: var(--aw-text-primary); transform: none; box-shadow: none; }
body.aw-ds .gpf-cut-card.is-selected { border-color: var(--aw-text-primary); background: var(--aw-bg-bone); }
body.aw-ds .gpf-cut-card__category { color: var(--aw-accent); letter-spacing: var(--aw-ls-eyebrow); font-weight: 600; }
body.aw-ds .gpf-cut-card__name { font-family: var(--aw-font-display); font-size: 1.65rem; font-weight: 500; }
body.aw-ds :is(.gpf-config, .gpf-plan__summary, .gpf-block, .gpf-phase, .gpf-modal) { border-radius: var(--aw-radius-sm); box-shadow: none; }
body.aw-ds .gpf-config, body.aw-ds .gpf-block, body.aw-ds .gpf-plan__summary { border: 1px solid var(--aw-border-subtle); }
body.aw-ds :is(.gpf-option, .gpf-toggle, .gpf-stepper, .gpf-cheatsheet-item, .gpf-action-btn) { border-radius: var(--aw-radius-sm); }
body.aw-ds .gpf-option.is-active { border-color: var(--aw-text-primary); background: var(--aw-bg-bone); }
body.aw-ds .gpf-toggle__btn { border-radius: 0; }
body.aw-ds .gpf-toggle__btn.is-active { background: var(--aw-text-primary); color: #fff; }
body.aw-ds .gpf-stepper button { border-radius: var(--aw-radius-sm); background: var(--aw-text-primary); }
body.aw-ds .gpf-config input[type="datetime-local"] { border-radius: var(--aw-radius-sm); border-color: var(--aw-border-strong); min-height: var(--aw-input-height); }
body.aw-ds .gpf-config input[type="range"] { accent-color: var(--aw-text-primary); }
body.aw-ds .gpf-submit-btn,
body.aw-ds .gpf-action-btn--primary {
    min-height: var(--aw-btn-height);
    border: 1px solid var(--aw-text-primary);
    border-radius: var(--aw-radius-sm);
    background: var(--aw-text-primary);
    color: #fff;
    font-size: var(--aw-btn-fs);
    font-weight: 600;
    letter-spacing: var(--aw-ls-button);
    text-transform: uppercase;
}
body.aw-ds .gpf-submit-btn:hover, body.aw-ds .gpf-action-btn--primary:hover { background: #3a2f28; border-color: #3a2f28; }
body.aw-ds .gpf-plan__serve-line { border-radius: var(--aw-radius-sm); background: var(--aw-bg-dark); }
body.aw-ds .gpf-plan__serve-line strong { color: var(--aw-accent-on-dark); font-family: var(--aw-font-ui); }
body.aw-ds .gpf-timeline { border-left-width: 1px; border-left-color: var(--aw-accent); }
body.aw-ds .gpf-faq__item { border-radius: 0; }

/* 4.5 Wissen & Rezepte ----------------------------------------------------- */
body.aw-ds :is(.article-card, .recipe-card) { transition: border-color var(--aw-transition); }
body.aw-ds :is(.article-card, .recipe-card):hover { transform: none !important; box-shadow: none !important; border-color: var(--aw-text-primary); }
body.aw-ds :is(.article-card, .recipe-card) .card-title {
    font-family: var(--aw-font-display);
    font-size: 1.45rem;
    font-weight: 500 !important;
    line-height: 1.15;
    color: var(--aw-text-primary);
}
body.aw-ds :is(.article-card, .recipe-card) .card-title a { color: inherit; }
body.aw-ds .border-warning { border-color: var(--aw-border-subtle) !important; }

/* 4.6 Über uns ------------------------------------------------------------- */
body.aw-ds :is(.au-hero, .au-cta, [style*="au-dark"]) { --au-gold: var(--aw-accent-on-dark); }
body.aw-ds :is(.au-hero__title, .au-cta__title) { font-family: var(--aw-font-display); font-weight: 500; letter-spacing: -0.005em; }
body.aw-ds .au-hero__title { font-size: var(--aw-fs-display-lg); line-height: var(--aw-lh-display); }
body.aw-ds .au-eyebrow { font-weight: 600; letter-spacing: var(--aw-ls-eyebrow); font-size: var(--aw-fs-eyebrow); }
body.aw-ds :is(.au-btn-gold, .au-btn-outline, .au-btn-dark) {
    border-radius: var(--aw-radius-sm);
    font-size: var(--aw-btn-fs);
    font-weight: 600;
    letter-spacing: var(--aw-ls-button);
    min-height: var(--aw-btn-height);
    display: inline-flex; align-items: center; justify-content: center;
}
body.aw-ds .au-btn-gold { background: var(--aw-text-on-dark); border-color: var(--aw-text-on-dark); color: var(--aw-text-primary); }
body.aw-ds .au-btn-gold:hover { background: #fff; border-color: #fff; color: var(--aw-text-primary); }
body.aw-ds :is(.au-team-card, .au-feature-card, .au-stat-box, .au-note-box, .au-partner-img, .au-team-card__img) { border-radius: var(--aw-radius-sm); }

/* 4.7 Lieferung ------------------------------------------------------------ */
body.aw-ds .lf-page :is(.lf-hero h1, .lf-section h2, .lf-cta h2) {
    font-family: var(--aw-font-display);
    font-weight: 500;
    letter-spacing: -0.005em;
}
body.aw-ds .lf-page .lf-hero h1 { font-size: var(--aw-fs-display-lg); line-height: var(--aw-lh-display); }
body.aw-ds .lf-page :is(.lf-btn-dark, .lf-btn-outline, .btn-gold) {
    border-radius: var(--aw-radius-sm);
    font-size: var(--aw-btn-fs);
    font-weight: 600;
    letter-spacing: var(--aw-ls-button);
    text-transform: uppercase;
    min-height: var(--aw-btn-height);
}
body.aw-ds .lf-page .btn-gold { background: var(--aw-text-on-dark); border-color: var(--aw-text-on-dark); color: var(--aw-text-primary); }
body.aw-ds .lf-page :is(.lf-hero-image, .lf-hero-badge, .lf-step-card, .lf-option-card, .lf-option-logo-box, .lf-tier, .lf-pack-step, .lf-cooling-box, .lf-type-card, .lf-cost-item, .lf-quote-box, .lf-cta, .lf-faq-item, .lf-feature-item) {
    border-radius: var(--aw-radius-sm);
}
body.aw-ds .lf-page .lf-tier-price { font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
body.aw-ds .lf-page .lf-eyebrow { font-weight: 600; letter-spacing: var(--aw-ls-eyebrow); font-size: var(--aw-fs-eyebrow); }
body.aw-ds .lf-page .lf-trustbar { background: var(--aw-bg-dark); }

/* 4.8 FAQ & Kontakt -------------------------------------------------------- */
body.aw-ds .topic-button {
    border: 1px solid var(--aw-border-subtle) !important;
    border-radius: var(--aw-radius-sm) !important;
    font-family: var(--aw-font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--aw-text-primary);
}
body.aw-ds .topic-button:hover { background: var(--aw-text-primary) !important; border-color: var(--aw-text-primary) !important; color: #fff !important; transform: none !important; }
body.aw-ds .topic-button i { color: var(--aw-accent) !important; }
body.aw-ds .topic-button:hover i { color: var(--aw-accent-on-dark) !important; }
body.aw-ds .section-headline { font-family: var(--aw-font-display); font-weight: 500 !important; }
body.aw-ds .contact-cta { background: var(--aw-bg-dark) !important; border-radius: var(--aw-radius-sm); }
body.aw-ds :is(.contact-card, .form-card, .help-card) { border-radius: var(--aw-radius-sm) !important; overflow: hidden; }
body.aw-ds :is(.contact-card, .form-card) .card-header { background: var(--aw-bg-dark) !important; border-radius: 0 !important; }
body.aw-ds .contact-card .card-header i { color: var(--aw-accent-on-dark) !important; }
body.aw-ds .section-title { font-family: var(--aw-font-display); font-weight: 500 !important; font-size: var(--aw-fs-heading-lg); }

/* 4.9 Aktuelles & Karriere ------------------------------------------------- */
body.aw-ds .news-headline { font-weight: 500; font-size: 1.5rem; line-height: 1.2; }
body.aw-ds .news-card { border-radius: 0 var(--aw-radius-sm) var(--aw-radius-sm) 0; }
body.aw-ds .job-card { border-top: 1px solid var(--aw-border-subtle) !important; }
body.aw-ds .job-cta { border-radius: var(--aw-radius-sm); background: var(--aw-bg-bone); border-left-color: var(--aw-accent); }

/* 4.10 Rechtliche Seiten: nur Basis-Typografie (über 3.2/4.2) -------------- */

/* 4.11 Bestehende Shopbereiche unter der Startseite (Edelstücke, Zubehör, Gutscheine,
   „Besondere Geschenkidee“) – gleiches Größen-/Abstandssystem wie die V2-Sections */
body.aw-ds .hv2-shop-legacy :is(h2.display-5, h2.display-6, .section-title, h2) {
    font-family: var(--aw-font-display);
    font-size: var(--aw-text-heading-lg) !important;   /* Bootstrap .display-* setzt eigene Größen */
    font-weight: 500 !important;
    line-height: var(--aw-lh-heading);
}
body.aw-ds .hv2-shop-legacy :is(.gift-voucher-section, .premium-voucher-section) {
    padding-top: var(--aw-section-space-md) !important;
    padding-bottom: var(--aw-section-space-md) !important;
}
body.aw-ds .hv2-shop-legacy .gift-voucher-section .mb-5 { margin-bottom: var(--aw-head-gap) !important; }
body.aw-ds .hv2-shop-legacy .lead { font-size: var(--aw-text-body-lg); }
/* Produktkarten im Shopbereich: Titel wie die Bestseller-Karten (Cormorant 500) */
body.aw-ds .hv2-shop-legacy .product-card .card-title {
    font-family: var(--aw-font-display);
    font-size: 1.6rem;
    font-weight: 500 !important;
    line-height: 1.15;
    color: var(--aw-text-primary);
}

/* 4.11b Kaufkarten im Shopbereich kompakt (Zubehör, Edelstücke, „Bald wieder da“, Gutscheine):
   Ziel – Section-Kopf + vollständige Karte passen in einen Laptop-Viewport (~700 px sichtbar).
   Nur Darstellung; Klassen/IDs/JS-Hooks unverändert. */
body.aw-ds .hv2-shop-legacy .row.justify-content-center { justify-content: flex-start !important; }
body.aw-ds .hv2-shop-legacy :is(section.py-5, .gift-voucher-section) { padding-top: var(--aw-section-space-sm) !important; padding-bottom: var(--aw-section-space-sm) !important; }
body.aw-ds .hv2-shop-legacy :is(.text-start.mb-5, .mb-5) { margin-bottom: var(--aw-head-gap) !important; }
body.aw-ds .hv2-shop-legacy .product-card { transform: none !important; }
body.aw-ds .hv2-shop-legacy .product-card:hover { box-shadow: none !important; border-color: var(--aw-text-primary) !important; }
body.aw-ds .hv2-shop-legacy .product-card .product-image-container {
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-height: 190px;
    margin-bottom: 0.75rem !important;
    border-radius: var(--aw-radius-sm);
    background: var(--aw-bg-bone);
}
body.aw-ds .hv2-shop-legacy .product-card .card-body { padding: 1rem 1.1rem 0.75rem; }
body.aw-ds .hv2-shop-legacy .product-card .card-interaction-area { padding: 0 1.1rem 1.1rem !important; }
body.aw-ds .hv2-shop-legacy .product-card .card-text,
body.aw-ds .hv2-shop-legacy .product-card .card-body > p {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: var(--aw-text-small); line-height: 1.55; margin-bottom: 0.6rem;
}
body.aw-ds .hv2-shop-legacy .product-card .card-title { font-size: 1.4rem !important; margin-bottom: 0.25rem; }
body.aw-ds .hv2-shop-legacy .product-card :is(.input-group > .btn, .input-group > .form-control, .input-group > .input-group-text) {
    min-height: 2.6rem !important; height: 2.6rem; padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: 0.95rem;
}
body.aw-ds .hv2-shop-legacy .product-card .mb-3 { margin-bottom: 0.65rem !important; }
body.aw-ds .hv2-shop-legacy .product-card .bg-light.p-2 { padding: 0.4rem 0.6rem !important; margin-top: 0.5rem !important; }
body.aw-ds .hv2-shop-legacy .accessory-badge { border-radius: var(--aw-radius-sm); background: var(--aw-text-primary); box-shadow: none; }

/* Gutscheinkarten: Wertauswahl in einer Reihe, Bildbereich flacher */
body.aw-ds .hv2-shop-legacy .product-card .btn-group.flex-wrap { flex-wrap: nowrap !important; }
body.aw-ds .hv2-shop-legacy .product-card .voucher-preset-btn { flex: 1 1 0; min-width: 0; padding-left: 0.25rem; padding-right: 0.25rem; min-height: 2.4rem; font-size: 0.78rem; }
body.aw-ds .hv2-shop-legacy .product-card[data-is-voucher="true"] .product-image-container { max-height: 150px; }
body.aw-ds .hv2-shop-legacy .product-card .form-check { margin-bottom: 0.1rem; min-height: 0; }
body.aw-ds .hv2-shop-legacy .product-card .form-check-label { font-size: var(--aw-text-small); }
/* Premium-Gutscheinkarte („Besondere Geschenkidee“) kompakt */
body.aw-ds .premium-voucher-card .card-body { padding: 1rem 1.25rem; }
body.aw-ds .premium-voucher-card .product-image-container { height: auto !important; aspect-ratio: 4 / 3; max-height: 125px; background: var(--aw-bg-bone); }
body.aw-ds .premium-voucher-card .row.g-2.mb-3 { margin-bottom: 0.6rem !important; }
body.aw-ds .premium-voucher-card .card-title { font-size: 1.45rem !important; margin-bottom: 0.2rem !important; }
body.aw-ds .premium-voucher-card .text-muted.small { margin-bottom: 0.6rem !important; }
body.aw-ds .premium-voucher-card .input-group { margin-bottom: 0.5rem !important; }
body.aw-ds .premium-voucher-card :is(.form-control-lg, .input-group-text) { min-height: 2.6rem !important; height: 2.6rem; font-size: 1rem !important; padding-top: 0.3rem; padding-bottom: 0.3rem; }
body.aw-ds .premium-voucher-card .premium-preset-buttons { margin-bottom: 0.6rem !important; }
body.aw-ds .premium-voucher-card .premium-preset-btn { min-height: 2.3rem; padding: 0.3rem 0.7rem; }
body.aw-ds .premium-voucher-card .voucher-delivery-type { margin-bottom: 0.6rem !important; }
body.aw-ds .premium-voucher-card .form-label { margin-bottom: 0.3rem; }
body.aw-ds .premium-voucher-card .bg-light.p-2 { padding: 0.35rem 0.6rem !important; margin-top: 0.5rem !important; }
body.aw-ds .hv2-shop-legacy .premium-voucher-section .col-xl-6 { flex: 0 0 auto; width: min(100%, 34rem); }

/* Ab 992 px: Zubehör- und Gutscheinkarten QUER (Bild/Titel links, Auswahl/Kauf rechts),
   damit Section-Kopf + Karte auf einem Laptop-Bildschirm (~590 px sichtbar) Platz haben.
   Reine Anordnung der vorhandenen Kinder (Link-Block + .card-interaction-area). */
@media (min-width: 992px) {
    body.aw-ds .hv2-shop-legacy :is(#zubehoer, #geschenkgutscheine) .row > .col-lg-4 { width: 50%; }
    body.aw-ds .hv2-shop-legacy :is(#zubehoer, #geschenkgutscheine) .product-card {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        align-items: start;
    }
    body.aw-ds .hv2-shop-legacy :is(#zubehoer, #geschenkgutscheine) .product-card > :is(a, .card-body) { min-width: 0; }
    body.aw-ds .hv2-shop-legacy :is(#zubehoer, #geschenkgutscheine) .product-card .card-interaction-area {
        padding: 1rem 1.1rem 1rem 0.25rem !important;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    body.aw-ds .hv2-shop-legacy :is(#zubehoer, #geschenkgutscheine) .product-card .product-image-container { aspect-ratio: 4 / 3; max-height: 170px; }

    /* Premium-Gutschein: zwei Spalten im vorhandenen card-body */
    body.aw-ds .hv2-shop-legacy .premium-voucher-section .col-xl-6 { width: min(100%, 52rem); }
    body.aw-ds .premium-voucher-card > .card-body {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        grid-template-areas:
            "bilder auswahl"
            "titel  auswahl"
            "text   auswahl"
            "text   kauf";
        grid-template-rows: auto auto auto 1fr;
        column-gap: 1.5rem;
        align-items: start;
    }
    body.aw-ds .premium-voucher-card > .card-body > .row:first-child { grid-area: bilder; }
    body.aw-ds .premium-voucher-card > .card-body > .card-title { grid-area: titel; text-align: left !important; }
    body.aw-ds .premium-voucher-card > .card-body > p { grid-area: text; text-align: left !important; }
    body.aw-ds .premium-voucher-card > .card-body > .premium-voucher-selection { grid-area: auswahl; }
    body.aw-ds .premium-voucher-card > .card-body > .mt-auto { grid-area: kauf; align-self: end; }
    body.aw-ds .premium-voucher-card .premium-preset-buttons { justify-content: flex-start !important; }
    /* Querformat: rechte Spalte breiter, Eingabegruppen einzeilig */
    body.aw-ds .hv2-shop-legacy :is(#zubehoer, #geschenkgutscheine) .product-card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
    body.aw-ds .hv2-shop-legacy :is(#zubehoer, #geschenkgutscheine) .product-card .input-group { flex-wrap: nowrap; }
    body.aw-ds .hv2-shop-legacy :is(#zubehoer, #geschenkgutscheine) .product-card .input-group > .btn { flex: 0 0 2.6rem; padding-left: 0; padding-right: 0; }
    body.aw-ds .hv2-shop-legacy :is(#zubehoer, #geschenkgutscheine) .product-card .input-group > .form-control { min-width: 3rem; }
    body.aw-ds .hv2-shop-legacy :is(#zubehoer, #geschenkgutscheine) .product-card .input-group-text { padding-left: 0.55rem; padding-right: 0.55rem; font-size: 0.85rem; }
    /* Gutschein quer: Betrag/Stück untereinander statt 7/5-Spalten (Platzhalter bleibt lesbar),
       Titel mit Silbentrennung statt Bruch mitten im Wort */
    body.aw-ds .hv2-shop-legacy #geschenkgutscheine .product-card .card-interaction-area .row.g-2 > .col-7 { width: 62%; }
    body.aw-ds .hv2-shop-legacy #geschenkgutscheine .product-card .card-interaction-area .row.g-2 > .col-5 { width: 38%; }
    body.aw-ds .hv2-shop-legacy :is(#zubehoer, #geschenkgutscheine) .product-card .card-title {
        font-size: 1.25rem !important; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; word-break: normal;
    }
    body.aw-ds .hv2-shop-legacy #geschenkgutscheine .product-card .input-group > .form-control { padding-left: 0.45rem; padding-right: 0.3rem; }
    /* Premium: Badge über die Bildspalte, Versandoptionen kompakter */
    body.aw-ds .premium-voucher-card > .position-absolute { left: 0.5rem; right: auto !important; }
    body.aw-ds .premium-voucher-card .voucher-delivery-type .form-check-label { font-size: 0.8rem; line-height: 1.35; }
    body.aw-ds .premium-voucher-card .premium-voucher-selection > small { margin-bottom: 0.4rem !important; font-size: 0.78rem; }
    body.aw-ds .premium-voucher-card .add-premium-voucher-btn { min-height: 2.75rem; }
    body.aw-ds .premium-voucher-card .bg-light.p-2 { font-size: 0.85rem; }

    /* Premium-Gutschein: Bilder untereinander in einer schmalen, festen
       Bildspalte (beide Bilder gleich breit, 16:9). Feste Höhen, damit das
       Set-Badge (absolut an der Karte) exakt auf dem Messerset-Bild sitzt:
       1rem Padding + 8rem Bild + 0.5rem + 1.5rem Plus + 0.5rem = 11.5rem. */
    body.aw-ds .hv2-shop-legacy .premium-voucher-section .col-xl-6 { width: min(100%, 46rem); }
    body.aw-ds .premium-voucher-card > .card-body {
        grid-template-columns: 14.25rem minmax(0, 1fr);
        grid-template-areas: "bilder auswahl" "titel kauf" "text kauf";
        grid-template-rows: auto auto 1fr;
        column-gap: 1.75rem;
    }
    body.aw-ds .premium-voucher-card > .card-body > .row:first-child {
        flex-direction: column; flex-wrap: nowrap; width: 14.25rem; margin: -0.5rem 0 0.75rem !important;
    }
    body.aw-ds .premium-voucher-card > .card-body > .row:first-child > [class*="col-"] { width: 100%; flex: 0 0 auto; padding-left: 0; padding-right: 0; }
    body.aw-ds .premium-voucher-card > .card-body > .row:first-child .product-image-container {
        height: 8rem !important; max-height: none; aspect-ratio: auto; overflow: hidden; border-radius: var(--aw-radius-sm);
    }
    body.aw-ds .premium-voucher-card > .card-body > .row:first-child .product-image-container > img,
    body.aw-ds .premium-voucher-card > .card-body > .row:first-child .product-image-container > .card-img-top {
        width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; border-radius: 0 !important;
    }
    /* Gutscheinbild hat weißen Rand im Motiv – leicht einzoomen */
    body.aw-ds .premium-voucher-card > .card-body > .row:first-child > .col-5:first-child img { transform: scale(1.18); }
    body.aw-ds .premium-voucher-card > .card-body > .row:first-child > .col-2 { height: 1.5rem; }
    body.aw-ds .premium-voucher-card > .card-body > .row:first-child > .col-2 .fa-2x { font-size: 1.1rem; }
    body.aw-ds .premium-voucher-card > .position-absolute { top: 11.5rem !important; left: 1.25rem; }
    body.aw-ds .premium-voucher-card > .position-absolute .badge { font-size: 0.6rem !important; letter-spacing: 0.12em; padding: 0.35rem 0.5rem; }
    body.aw-ds .premium-voucher-card > .card-body > .card-title { font-size: 1.3rem !important; }
    body.aw-ds .premium-voucher-card > .card-body > p { display: block !important; -webkit-line-clamp: unset !important; line-clamp: none !important; overflow: visible !important; }
}

/* „Bald wieder da“: gleiche Kartensprache wie die übrigen Shopkarten */
body.aw-ds .coming-soon-card { border-radius: var(--aw-radius-sm) !important; box-shadow: none !important; border: 1px solid var(--aw-border-subtle) !important; transform: none !important; }
body.aw-ds .coming-soon-card:hover { border-color: var(--aw-text-primary) !important; }
body.aw-ds .coming-soon-image-wrapper { border-radius: 0 !important; }
body.aw-ds .coming-soon-name { font-family: var(--aw-font-display); font-weight: 500 !important; font-size: 1.15rem; line-height: 1.15; color: var(--aw-text-primary); }
body.aw-ds .coming-soon-badge { border-radius: var(--aw-radius-sm); letter-spacing: 0.12em; }

/* Alle Kauf-Buttons einheitlich in Tinte – auch dort, wo shop.css Fleischrot mit !important setzt
   (.accessory-card .btn-primary) oder ohne (add-to-cart, Pakete, „Passende Stücke“). */
body.aw-ds :is(.add-to-cart-btn, .add-accessory-btn, .add-package-to-cart-btn, .btn-passende-stuecke, .btn-passende-stuecke-anzeigen, .add-voucher-btn, .add-premium-voucher-btn, .accessory-card .btn-primary):not(:disabled) {
    min-height: 2.9rem;
    border: 1px solid var(--aw-text-primary) !important;
    border-radius: var(--aw-radius-sm) !important;
    background: var(--aw-text-primary) !important;
    color: #fff !important;
    font-family: var(--aw-font-ui);
    font-size: var(--aw-btn-fs) !important;
    font-weight: 600;
    letter-spacing: var(--aw-ls-button);
    text-transform: uppercase;
    box-shadow: none !important;
}
body.aw-ds :is(.add-to-cart-btn, .add-accessory-btn, .add-package-to-cart-btn, .btn-passende-stuecke, .btn-passende-stuecke-anzeigen, .add-voucher-btn, .add-premium-voucher-btn, .accessory-card .btn-primary):not(:disabled):hover {
    background: #3a2f28 !important; border-color: #3a2f28 !important; color: #fff !important;
}

/* 4.12 Gutscheine: Karten, Premium-Karte, Detailseite.
   Inline-Farben (#a43434) stehen als style-Attribute im Markup → gezielte Attribut-Selektoren. */
body.aw-ds :is(.premium-voucher-card, .voucher-card) {
    border: 1px solid var(--aw-border-subtle) !important;
    border-radius: var(--aw-radius-sm) !important;
    box-shadow: none !important;
    transform: none !important;
}
body.aw-ds .premium-voucher-card .card-title,
body.aw-ds .voucher-card h1.card-title {
    font-family: var(--aw-font-display);
    font-weight: 500 !important;
    font-size: var(--aw-text-heading-md);
    color: var(--aw-text-primary);
}
body.aw-ds .voucher-card h1.card-title { font-size: var(--aw-text-heading-lg); line-height: var(--aw-lh-heading); }
body.aw-ds .premium-voucher-card [style*="#a43434"]:not(.add-premium-voucher-btn):not(.input-group-text),
body.aw-ds .premium-voucher-card [style*="164, 52, 52"] { color: var(--aw-accent) !important; }
body.aw-ds .premium-voucher-card .badge[style*="#a43434"],
body.aw-ds .premium-voucher-card [style*="background-color: rgba(164, 52, 52"] {
    background: var(--aw-text-primary) !important;
    color: var(--aw-text-on-dark) !important;
    border-radius: var(--aw-radius-sm);
    font-family: var(--aw-font-ui);
    font-size: 0.72rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: none !important;
}
body.aw-ds .premium-voucher-card .input-group-text[style*="#a43434"] {
    background: var(--aw-bg-bone) !important;
    border-color: var(--aw-border-strong) !important;
    color: var(--aw-text-primary) !important;
}
body.aw-ds :is(.add-premium-voucher-btn, .add-voucher-btn) {
    min-height: var(--aw-btn-height);
    border: 1px solid var(--aw-text-primary) !important;
    border-radius: var(--aw-radius-sm) !important;
    background: var(--aw-text-primary) !important;
    color: #fff !important;
    font-size: var(--aw-btn-fs) !important;
    font-weight: 600;
    letter-spacing: var(--aw-ls-button);
    text-transform: uppercase;
    box-shadow: none !important;
    transform: none !important;
}
body.aw-ds :is(.add-premium-voucher-btn, .add-voucher-btn):hover:not(:disabled) { background: #3a2f28 !important; border-color: #3a2f28 !important; }
body.aw-ds :is(.premium-preset-btn, .voucher-preset-btn) {
    min-height: 2.6rem;
    border: 1px solid var(--aw-border-strong) !important;
    border-radius: var(--aw-radius-sm) !important;
    background: var(--aw-bg-light) !important;
    color: var(--aw-text-primary) !important;
    font-family: var(--aw-font-ui);
    font-weight: 600;
    box-shadow: none !important;
}
body.aw-ds :is(.premium-preset-btn, .voucher-preset-btn):hover { border-color: var(--aw-text-primary) !important; }
body.aw-ds :is(.premium-preset-btn.active, .premium-preset-btn.btn-success, .voucher-preset-btn.active) {
    background: var(--aw-text-primary) !important;
    border-color: var(--aw-text-primary) !important;
    color: #fff !important;
}
body.aw-ds :is(.voucher-custom-input, .premium-voucher-value) { min-height: var(--aw-input-height); border-radius: var(--aw-radius-sm) !important; }
body.aw-ds .voucher-total-price { color: var(--aw-text-primary) !important; font-family: var(--aw-font-ui); font-weight: 600; }
body.aw-ds .delivery-option { border-radius: var(--aw-radius-sm) !important; border-color: var(--aw-border-subtle) !important; }
body.aw-ds .voucher-card h1.card-title i { display: none; }

/* ------------------------------------------------------------------ */
/* 4.13 Rechtliche Seiten (Impressum, Datenschutz, AGB, Widerruf,       */
/* Cookies): Hooks .aw-legal-head / .aw-legal. Kopf wie .aw-page-head,  */
/* Inhalt als ruhige Textspalte; Rechtstexte selbst unverändert.        */
/* ------------------------------------------------------------------ */
body.aw-ds .aw-legal-head {
    margin: var(--navbar-height, 56px) 0 0 !important;
    padding: var(--aw-section-space-md) 0 var(--aw-section-space-sm) !important;
    background: var(--aw-bg-bone) !important;
    color: var(--aw-text-primary) !important;
    border-bottom: 1px solid var(--aw-border-subtle);
}
body.aw-ds .aw-legal-head .col-lg-4 { display: none; }
body.aw-ds .aw-legal-head .col-lg-8::before {
    content: 'Rechtliches';
    display: block;
    margin-bottom: 1rem;
    font-family: var(--aw-font-ui);
    font-size: var(--aw-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--aw-ls-eyebrow);
    text-transform: uppercase;
    color: var(--aw-accent);
}
body.aw-ds .aw-legal-head h1 {
    margin: 0 !important;
    font-family: var(--aw-font-display);
    font-size: var(--aw-fs-display-lg) !important;
    font-weight: 500 !important;
    line-height: var(--aw-lh-display);
    color: var(--aw-text-primary);
}
body.aw-ds .aw-legal-head h1 i { display: none; }
body.aw-ds .aw-legal-head .lead {
    margin: 1.25rem 0 0;
    font-family: var(--aw-font-ui);
    font-size: var(--aw-fs-body-lg);
    line-height: var(--aw-lh-body);
    color: var(--aw-text);
}

body.aw-ds .aw-legal { padding-top: var(--aw-section-space-sm) !important; padding-bottom: var(--aw-section-space-lg) !important; }
body.aw-ds .aw-legal > .row > [class*="col-lg-8"],
body.aw-ds .aw-legal > .row > [class*="col-lg-10"] { width: min(100%, var(--aw-max-width-text)); }
body.aw-ds .aw-legal .card.shadow-lg { border: 0; border-radius: 0; background: transparent; box-shadow: none !important; }
body.aw-ds .aw-legal .card.shadow-lg > .card-body { padding: 0 !important; }
body.aw-ds .aw-legal { font-family: var(--aw-font-ui); font-size: 1rem; line-height: var(--aw-lh-body); color: var(--aw-text); }
body.aw-ds .aw-legal section + section,
body.aw-ds .aw-legal section.mb-5 { margin-bottom: 2.75rem !important; }
body.aw-ds .aw-legal h2 {
    margin: 0 0 1rem !important;
    padding-top: 2rem;
    border-top: 1px solid var(--aw-border-subtle);
    font-family: var(--aw-font-display);
    font-size: var(--aw-fs-heading-md) !important;
    font-weight: 500;
    line-height: var(--aw-lh-heading);
    color: var(--aw-text-primary) !important;
}
body.aw-ds .aw-legal section:first-of-type h2,
body.aw-ds .aw-legal .card-body > h2:first-child { padding-top: 0; border-top: 0; }
body.aw-ds .aw-legal h2 i { display: none; }
body.aw-ds .aw-legal :is(h3, h4, h5, h6) {
    font-family: var(--aw-font-ui);
    font-size: 0.8125rem !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aw-text-primary);
}
body.aw-ds .aw-legal strong { color: var(--aw-text-primary); }
body.aw-ds .aw-legal a { color: var(--aw-accent); text-underline-offset: 0.2em; }
body.aw-ds .aw-legal :is(.text-success, .text-primary, .text-info, .text-warning) { color: var(--aw-accent) !important; }
body.aw-ds .aw-legal .text-danger { color: var(--aw-error) !important; }
body.aw-ds .aw-legal :is(h1, h2, h3, h4, h5, h6):is(.text-success, .text-primary, .text-info, .text-warning) { color: var(--aw-text-primary) !important; }
body.aw-ds .aw-legal :is(.border-success, .border-primary, .border-info) { border-color: var(--aw-accent) !important; }
body.aw-ds .aw-legal .border-danger { border-color: var(--aw-border-strong) !important; }
body.aw-ds .aw-legal .alert {
    border: 0 !important;
    border-left: 3px solid var(--aw-accent) !important;
    border-radius: 0;
    background: var(--aw-bg-bone);
    color: var(--aw-text);
}
body.aw-ds .aw-legal .card:not(.shadow-lg) { border-color: var(--aw-border-subtle); border-radius: var(--aw-radius-sm); box-shadow: none; }
body.aw-ds .aw-legal .card-header { background: var(--aw-bg-bone) !important; border-color: var(--aw-border-subtle); }
body.aw-ds .aw-legal .table { --bs-table-striped-bg: var(--aw-bg-bone); border-color: var(--aw-border-subtle); }
body.aw-ds .aw-legal .table th { background: var(--aw-bg-sand) !important; color: var(--aw-text-primary); font-weight: 600; }
body.aw-ds .aw-legal .btn { border-radius: var(--aw-radius-sm); font-weight: 600; letter-spacing: 0.06em; }
body.aw-ds .aw-legal :is(.btn-success, .btn-primary) { background: var(--aw-text-primary); border-color: var(--aw-text-primary); color: #fff; }
body.aw-ds .aw-legal :is(.btn-success, .btn-primary):hover { background: #3a2f28; border-color: #3a2f28; }
body.aw-ds .aw-legal .btn-danger { background: transparent; border-color: var(--aw-text-primary); color: var(--aw-text-primary); }
body.aw-ds .aw-legal .btn-danger:hover { background: var(--aw-text-primary); color: #fff; }
body.aw-ds .aw-legal .form-check-input:checked { background-color: var(--aw-text-primary); border-color: var(--aw-text-primary); }

/* ------------------------------------------------------------------ */
/* 4.14 Kopfleiste Handy/Tablet: immer einzeilig + Ein-/Ausblenden     */
/* beim Scrollen (js/kopfleiste.js setzt body.aw-kopf-weg).            */
/* ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    /* Logo und Icons bleiben in EINER Zeile – lieber kleiner skalieren */
    body.aw-ds #mainNavbar > .container { flex-wrap: nowrap; gap: 0.5rem; }
    body.aw-ds #mainNavbar .navbar-brand { flex: 0 1 auto; min-width: 0; margin-right: 0; }
    body.aw-ds #mainNavbar .navbar-brand img { display: block; height: auto; width: auto; max-width: 100%; max-height: 40px; }
    body.aw-ds #mainNavbar > .container > .d-flex { flex: 0 0 auto; flex-wrap: nowrap; }
    body.aw-ds #mainNavbar > .container > .d-flex > .btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: clamp(2.25rem, 10.5vw, 2.75rem); height: clamp(2.25rem, 10.5vw, 2.75rem);
        padding: 0; margin-right: clamp(0.3rem, 1.5vw, 0.5rem) !important;
    }
    body.aw-ds #mainNavbar > .container > .d-flex > .btn:last-child { margin-right: 0 !important; }
    body.aw-ds #mainNavbar > .container > .d-flex > .btn i { font-size: clamp(0.85rem, 3.8vw, 1rem) !important; }

    /* Ein-/Ausblenden: Versandleiste, Navbar und Gratis-Versand-Leiste fahren gemeinsam nach oben */
    body.aw-ds .versand-info-bar,
    body.aw-ds #mainNavbar,
    body.aw-ds .free-shipping-bar { transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
    body.aw-ds.aw-kopf-weg .versand-info-bar,
    body.aw-ds.aw-kopf-weg #mainNavbar,
    body.aw-ds.aw-kopf-weg .free-shipping-bar {
        transform: translateY(calc(-1 * (var(--versand-bar-height, 0px) + var(--navbar-height, 64px) + 60px)));
    }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    body.aw-ds .versand-info-bar, body.aw-ds #mainNavbar, body.aw-ds .free-shipping-bar { transition: none; }
}
/* Footer-Logo auf dem Handy kleiner */
@media (max-width: 767.98px) {
    body.aw-ds .footer-logo img { height: 46px !important; width: auto; }
}

/* ------------------------------------------------------------------ */
/* 4.15 Bootstrap-Standardfarben → CI (öffentliche Seiten, body.aw-ds)  */
/* Infofelder, Badges, Status-Icons und Buttons in Bootstrap-Blau/Grün/ */
/* Gelb passen nicht zur Designsprache. Zentral umgefärbt, Markup       */
/* unverändert. Warnungen und Fehler bleiben erkennbar (gedeckte Töne). */
/* ------------------------------------------------------------------ */
body.aw-ds .alert:is(.alert-info, .alert-light, .alert-primary, .alert-secondary, .alert-warning, .alert-success, .alert-danger):not(.navbar *) {
    --bs-alert-bg: var(--aw-bg-bone);
    --bs-alert-color: var(--aw-text);
    --bs-alert-border-color: transparent;
    --bs-alert-link-color: var(--aw-accent);
    background: var(--aw-bg-bone) !important;
    color: var(--aw-text) !important;
    border: 0 !important;
    border-left: 3px solid var(--aw-accent) !important;
    border-radius: var(--aw-radius-sm) !important;
    box-shadow: none !important;
    font-family: var(--aw-font-ui);
}
body.aw-ds .alert.alert-warning:not(.navbar *) { background: var(--aw-bg-sand) !important; }
body.aw-ds .alert.alert-success:not(.navbar *) { background: var(--aw-success-bg) !important; border-left-color: var(--aw-success) !important; }
body.aw-ds .alert.alert-danger:not(.navbar *) { background: var(--aw-error-bg) !important; border-left-color: var(--aw-error) !important; }
body.aw-ds .alert :is(h4, h5, h6, .alert-heading, strong) { color: var(--aw-text-primary) !important; }
body.aw-ds .alert a:not(.btn) { color: var(--aw-accent); text-underline-offset: 0.2em; }
body.aw-ds .alert:is(.alert-info, .alert-light, .alert-primary, .alert-secondary, .alert-warning) i,
body.aw-ds .alert:is(.alert-info, .alert-light, .alert-primary, .alert-secondary, .alert-warning) :is(.text-info, .text-primary, .text-warning, .text-success) { color: var(--aw-accent) !important; }
body.aw-ds .alert.alert-success i { color: var(--aw-success) !important; }
body.aw-ds .alert.alert-danger i { color: var(--aw-error) !important; }

/* Badges: keine Bootstrap-Ampel, sondern Tinte / Gold / Bone */
body.aw-ds .badge:not(.navbar *):is(.bg-success, .bg-primary, .bg-info, .bg-dark) { background: var(--aw-text-primary) !important; color: #fff !important; }
body.aw-ds .badge:not(.navbar *):is(.bg-warning) { background: var(--aw-accent) !important; color: #fff !important; }
body.aw-ds .badge:not(.navbar *):is(.bg-secondary, .bg-light) {
    background: var(--aw-bg-bone) !important; color: var(--aw-text-primary) !important;
    border: 1px solid var(--aw-border-subtle);
}
body.aw-ds .badge:not(.navbar *).bg-danger { background: var(--aw-error) !important; color: #fff !important; }

/* Status-Icons und -Texte */
body.aw-ds :is(.text-info, .text-primary):not(.navbar *, .btn, .btn *) { color: var(--aw-accent) !important; }
body.aw-ds .text-warning:not(.navbar *, .btn, .btn *) { color: var(--aw-accent) !important; }
body.aw-ds .text-success:not(.navbar *, .btn, .btn *) { color: var(--aw-success) !important; }
body.aw-ds .text-danger:not(.navbar *, .btn, .btn *) { color: var(--aw-error) !important; }
body.aw-ds :is(.bg-info, .bg-primary):not(.badge, .navbar *, .btn) { background-color: var(--aw-bg-bone) !important; color: var(--aw-text) !important; }
body.aw-ds .border-info, body.aw-ds .border-primary, body.aw-ds .border-warning { border-color: var(--aw-accent) !important; }
body.aw-ds .border-success { border-color: var(--aw-success) !important; }
body.aw-ds .border-secondary:not(.btn) { border-color: var(--aw-border-subtle) !important; }
/* Farbige Kopfzeilen/Flächen mit weißer Schrift → Tinte; gelbe mit dunkler Schrift → Sand */
body.aw-ds :is(.bg-info, .bg-primary, .bg-secondary, .bg-success).text-white:not(.badge, .navbar *, .btn) { background-color: var(--aw-text-primary) !important; color: #fff !important; }
body.aw-ds .bg-warning:not(.badge, .navbar *, .btn) { background-color: var(--aw-bg-sand) !important; color: var(--aw-text-primary) !important; }
/* Grautext warm statt Bootstrap-Grau */
body.aw-ds .text-muted:not(.navbar *) { color: var(--aw-text-muted) !important; }
/* Tabellen-Hervorhebungen (z. B. Garstufen in der FAQ) */
body.aw-ds :is(.table-warning, .table-info, .table-success, .table-primary) { --bs-table-bg: var(--aw-bg-sand); --bs-table-color: var(--aw-text-primary); --bs-table-striped-bg: var(--aw-bg-sand); }
body.aw-ds :is(.table-warning, .table-info, .table-success, .table-primary) > * { background-color: var(--aw-bg-sand) !important; }
/* Bewertungssterne in Gold statt Bootstrap-Gelb */
body.aw-ds :is(.fa-star, .fa-star-half-alt, .fa-star-half-stroke):not(.navbar *) { color: #b8934f !important; }
/* Rezept-Tipp-Box, Lagerstatus Zubehör */
body.aw-ds .recipe-html-content .tip-box { background: var(--aw-bg-bone); border-left: 3px solid var(--aw-accent); border-radius: var(--aw-radius-sm); }
body.aw-ds .fa-lightbulb:not(.navbar *, .btn *) { color: var(--aw-accent) !important; }
body.aw-ds .stock-available, body.aw-ds .stock-available i { color: var(--aw-success) !important; }
/* Rezept-Inhalte aus der Redaktion (Inline-Styles im HTML-Inhalt): farbige Boxen → Bone + Gold */
body.aw-ds .recipe-html-content [style*="background:#f8d7da"],
body.aw-ds .recipe-html-content [style*="background: #f8d7da"],
body.aw-ds .recipe-html-content [style*="background:#fff3cd"],
body.aw-ds .recipe-html-content [style*="background: #fff3cd"],
body.aw-ds .recipe-html-content [style*="background:#d1e7dd"],
body.aw-ds .recipe-html-content [style*="background:#cff4fc"] {
    background: var(--aw-bg-bone) !important;
    border-left-color: var(--aw-accent) !important;
}
body.aw-ds .recipe-html-content [style*="color:#a43434"],
body.aw-ds .recipe-html-content [style*="color: #a43434"] { color: var(--aw-accent) !important; }

/* Zubehör-Detailseite: Fleischrot → Tinte/Gold wie im übrigen Shop */
body.aw-ds :is(.current-price, .total-price) { color: var(--aw-text-primary) !important; }
body.aw-ds .btn-add-to-cart:not(.btn-success-state) {
    background-color: var(--aw-text-primary) !important; border-color: var(--aw-text-primary) !important; color: #fff !important;
    border-radius: var(--aw-radius-sm) !important; text-transform: uppercase; letter-spacing: var(--aw-ls-button); font-size: 0.8rem;
}
body.aw-ds .btn-add-to-cart:not(.btn-success-state):hover { background-color: #3a2f28 !important; border-color: #3a2f28 !important; transform: none; box-shadow: none; }
body.aw-ds .btn-add-to-cart.btn-success-state { background-color: var(--aw-success) !important; border-color: var(--aw-success) !important; }
body.aw-ds .thumbnail-item.active { border-color: var(--aw-text-primary) !important; }
body.aw-ds :is(.spec-card-header, .included-item-card .item-icon, .gift-icon, .quality-feature:hover .feature-icon) { background: var(--aw-text-primary) !important; }
body.aw-ds .quality-feature .feature-icon i { color: var(--aw-accent) !important; }
body.aw-ds .quality-feature:hover .feature-icon i { color: #fff !important; }
body.aw-ds .gift-tip-box { border-color: var(--aw-accent) !important; }
body.aw-ds .quantity-selector .input-group { flex-wrap: nowrap; width: auto !important; max-width: 11rem; }
body.aw-ds .quantity-selector .input-group > .btn { flex: 0 0 2.6rem; padding-left: 0; padding-right: 0; }
body.aw-ds .quantity-selector .input-group > .form-control { min-width: 3rem; text-align: center; }

/* Buttons in Bootstrap-Grün/-Blau/-Gelb → Tinte bzw. Kontur */
body.aw-ds :is(.btn-success, .btn-info, .btn-warning):not(.navbar *, .mobile-nav *, .modal-header *) {
    background: var(--aw-text-primary) !important; border-color: var(--aw-text-primary) !important; color: #fff !important;
    border-radius: var(--aw-radius-sm); box-shadow: none !important;
}
body.aw-ds :is(.btn-success, .btn-info, .btn-warning):not(.navbar *, .mobile-nav *, .modal-header *):hover { background: #3a2f28 !important; border-color: #3a2f28 !important; }
body.aw-ds :is(.btn-outline-success, .btn-outline-info, .btn-outline-warning):not(.navbar *, .mobile-nav *) {
    background: transparent !important; border-color: var(--aw-text-primary) !important; color: var(--aw-text-primary) !important;
    border-radius: var(--aw-radius-sm);
}
body.aw-ds :is(.btn-outline-success, .btn-outline-info, .btn-outline-warning):not(.navbar *, .mobile-nav *):hover { background: var(--aw-text-primary) !important; color: #fff !important; }

/* ------------------------------------------------------------------ */
/* 4.16 Breadcrumb (components/aw/_breadcrumb.html) – wie Fleischtheke  */
/* ------------------------------------------------------------------ */
body.aw-ds .aw-breadcrumb { margin: 0 0 clamp(1.25rem, 3vw, 2rem); position: relative; z-index: 2; }
body.aw-ds .aw-breadcrumb .breadcrumb {
    margin: 0; padding: 0; background: transparent; border-radius: 0;
    font-family: var(--aw-font-ui); font-size: 0.74rem; letter-spacing: 0.08em;
    color: var(--aw-text-muted);
}
body.aw-ds .aw-breadcrumb .breadcrumb a { color: var(--aw-accent); text-decoration: none; }
body.aw-ds .aw-breadcrumb .breadcrumb a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
body.aw-ds .aw-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--aw-border-strong); }
body.aw-ds .aw-breadcrumb .breadcrumb-item.active { color: var(--aw-text-muted); }
body.aw-ds .aw-breadcrumb--dark .breadcrumb,
body.aw-ds .aw-breadcrumb--dark .breadcrumb-item.active { color: var(--aw-text-on-dark-muted); }
body.aw-ds .aw-breadcrumb--dark .breadcrumb a { color: var(--aw-accent-on-dark); }
body.aw-ds .aw-breadcrumb--dark .breadcrumb-item + .breadcrumb-item::before { color: rgba(243, 238, 230, 0.3); }
.aw-page-head--center .aw-breadcrumb .breadcrumb { justify-content: center; }
/* Seitenköpfe mit Breadcrumb: Breadcrumb dicht unter die Navigation, Kopf kompakter */
body.aw-ds .aw-breadcrumb { margin-bottom: clamp(0.9rem, 2vw, 1.4rem); }
body.aw-ds :is(.aw-page-head, .gpf-hero, .page-header, .aw-legal-head):has(> .aw-container > .aw-breadcrumb, > .container > .aw-breadcrumb) {
    padding-top: clamp(1rem, 1.6vw, 1.5rem) !important;
}
/* Über uns: Bild-Hero ist unten ausgerichtet – Mindesthöhe lösen und oben weniger Luft,
   damit der Breadcrumb unter die Navigation rückt und der Hero schmaler wird */
body.aw-ds .au-hero:has(.aw-breadcrumb) { min-height: 0 !important; }
body.aw-ds .au-hero__body:has(> .aw-breadcrumb) { padding-top: clamp(1rem, 1.6vw, 1.5rem) !important; }
/* Werkzeuge (Genussberater, Garpunktfinder): auch unten weniger Luft */
body.aw-ds :is(.aw-page-head.gb-page-head, .gpf-hero):has(.aw-breadcrumb) { padding-bottom: clamp(1.75rem, 3vw, 2.5rem) !important; }
body.aw-ds :is(.aw-page-head.gb-page-head, .gpf-hero):has(.aw-breadcrumb) :is(.aw-lead, .gpf-hero__subtitle) { margin-top: 0.75rem; margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* 4.17 Desktop-Hauptmenü (components/navigation/_hauptmenue.html)      */
/* Nicht an body.aw-ds gebunden: erscheint mit Flag auf allen Seiten    */
/* mit Navbar (auch Checkout), daher eigener Scope .aw-hm.              */
/* ------------------------------------------------------------------ */
.aw-hm {
    position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%);
    align-items: stretch; z-index: 2;
}
.aw-hm__liste { display: flex; align-items: stretch; gap: clamp(1rem, 2.4vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.aw-hm__punkt { position: relative; display: flex; align-items: center; }
.aw-hm__knopf {
    display: inline-flex; align-items: center; gap: 0.45rem;
    height: 100%; padding: 0.25rem 0; border: 0; background: none;
    font-family: var(--aw-font-ui); font-size: 0.76rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
    color: var(--aw-text-primary); cursor: pointer;
    box-shadow: inset 0 -2px 0 transparent; transition: color 0.2s ease, box-shadow 0.2s ease;
}
.aw-hm__knopf:hover, .aw-hm__knopf[aria-expanded="true"] { color: var(--aw-accent); box-shadow: inset 0 -2px 0 var(--aw-accent); }
.aw-hm__knopf:focus-visible { outline: 2px solid var(--aw-focus); outline-offset: 4px; }
.aw-hm__pfeil { transition: transform 0.2s ease; }
.aw-hm__knopf[aria-expanded="true"] .aw-hm__pfeil { transform: rotate(180deg); }
.aw-hm__panel {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    min-width: 17rem; padding: 0.75rem;
    background: var(--aw-bg-light); border: 1px solid var(--aw-border-subtle); border-top: 2px solid var(--aw-accent);
    box-shadow: 0 18px 40px rgba(23, 18, 15, 0.12);
    animation: awHmAuf 0.18s ease-out;
}
.aw-hm__panel[hidden] { display: none; }
.aw-hm__panel--breit { min-width: 30rem; }
.aw-hm__panel ul { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.aw-hm__panel--breit ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.75rem; }
.aw-hm__link {
    display: block; padding: 0.6rem 0.75rem; border-radius: var(--aw-radius-sm);
    text-decoration: none; color: var(--aw-text-primary); transition: background-color 0.15s ease, color 0.15s ease;
}
.aw-hm__link:hover, .aw-hm__link:focus-visible { background: var(--aw-bg-bone); color: var(--aw-accent); outline: none; }
.aw-hm__name { display: block; font-family: var(--aw-font-ui); font-size: 0.92rem; font-weight: 500; line-height: 1.3; }
.aw-hm__unter { display: block; margin-top: 0.15rem; font-family: var(--aw-font-ui); font-size: 0.76rem; line-height: 1.35; color: var(--aw-text-muted); }
.aw-hm__link:hover .aw-hm__unter { color: var(--aw-text-muted); }
@keyframes awHmAuf { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .aw-hm__panel { animation: none; } }
@media (max-width: 1199.98px) {
    .aw-hm__liste { gap: 1.1rem; }
    .aw-hm__knopf { font-size: 0.7rem; letter-spacing: 0.1em; }
}

/* ------------------------------------------------------------------ */
/* 4.18 Kopfleiste: feine Linien-Icons statt schwarzer Kästen (.aw-kopf) */
/* Scope über die Navbar-Klasse (Flag HOMEPAGE_V2), nicht body.aw-ds –  */
/* gilt damit auch im Checkout einheitlich.                            */
/* ------------------------------------------------------------------ */
#mainNavbar.aw-kopf > .container > .d-flex > .btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; margin-right: 0.25rem !important;
    background: transparent !important; border: 0 !important; border-radius: 999px !important;
    color: var(--aw-text-primary, #17120f) !important; box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#mainNavbar.aw-kopf > .container > .d-flex > .btn:last-child { margin-right: -0.5rem !important; }
#mainNavbar.aw-kopf > .container > .d-flex > .btn:hover,
#mainNavbar.aw-kopf > .container > .d-flex > .btn:focus-visible {
    background: var(--aw-bg-bone, #f7f4ee) !important; color: var(--aw-accent, #9a7746) !important;
}
#mainNavbar.aw-kopf > .container > .d-flex > .btn:focus-visible { outline: 2px solid var(--aw-focus, #9a7746); outline-offset: 2px; }
#mainNavbar.aw-kopf .aw-kopf__svg { width: 22px; height: 22px; }
@media (min-width: 992px) { #mainNavbar.aw-kopf .aw-kopf__svg { width: 24px; height: 24px; } }
/* Betrag am Warenkorb: kleines Gold-Schild statt rotem Kasten */
#mainNavbar.aw-kopf .cart-badge {
    top: 0.1rem; right: -0.35rem; padding: 0.05rem 0.4rem; min-width: 0;
    background: var(--aw-accent, #9a7746); color: #fff; border-radius: 999px;
    font-family: var(--aw-font-ui, sans-serif); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.02em;
    box-shadow: 0 0 0 2px #fff;
}

/* Sprungziele (Menü, „Unsere Höfe“, Versand-Unterpunkte) nicht unter der festen Kopfleiste */
html:has(body.aw-ds) { scroll-padding-top: calc(var(--versand-bar-height, 0px) + var(--navbar-height, 64px) + 1rem); }

@media (prefers-reduced-motion: reduce) {
    body.aw-ds * { transition: none !important; animation: none !important; }
}