/* ==========================================================
   Bäckerei Behrens – Custom Patterns (custom.css)
   NUR Behrens-eigene Komponenten, die UIkit nicht abdeckt.
   Arbeitet auf YOOtheme-Markup (uk-section, uk-container, uk-grid).
   Basis-Variablen (Farben, Fonts, Cards, Buttons) → theme.behrens.less
   ========================================================== */

 
/* --- Webfonts: lokal gehostet (DSGVO, keine Google-Anfragen) --- */

/* Fraunces (Variable, opsz 9..144, wght 400..500) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lora (Variable, wght 400..500) */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/lora-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/lora-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono (Variable, wght 400..500) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* --- Design Tokens (CSS Custom Properties für JS/Cascade) --- */

:root {
  --bb-bg:        #faf6f0;
  --bb-bg-alt:    #f1eae0;
  --bb-bg-deep:   #ede3d3;
  --bb-paper:     #fffdf7;
  --bb-ink:       #2b1d12;
  --bb-ink-soft:  #5a4634;
  --bb-ink-mute:  #6e5d4a;
  --bb-line:      #d9cdb8;

  --bb-accent:      #69421f;
  --bb-accent-2:    #b55d0e;
  --bb-sand:        #b59c86;
  --bb-teal:        #426169;
  --bb-teal-bright: #4aa1b5;

  /* Issue #112: Zwei zusätzliche Sektionsfarben */
  --bb-petrol:      #2a3940;
  --bb-warm:        #e6d9c8;

  --bb-serif-display: "Fraunces", "Cinzel", Georgia, serif;
  --bb-serif-body:    "Lora", Georgia, serif;
  --bb-mono:          "JetBrains Mono", ui-monospace, monospace;
  --bb-logo-face:     "Cinzel", "Fraunces", serif;

  --bb-radius-sm: 4px;
  --bb-radius:    8px;
  --bb-radius-lg: 14px;

  --bb-shadow-soft: 0 1px 2px rgba(43, 29, 18, 0.05),
                    0 12px 32px -16px rgba(43, 29, 18, 0.18);

  /* Spacing Scale (Issue #91) - 8px-Grid, alle Layout-Abstaende speisen sich hieraus.
     Doku: docs/spacing-system.md */
  --bb-space-xs:  8px;
  --bb-space-sm:  16px;
  --bb-space-md:  24px;
  --bb-space-lg:  32px;
  --bb-space-xl:  48px;
  --bb-space-2xl: 64px;
  --bb-space-3xl: 80px;
}

/* Mobile-Reduktion der Spacing-Scale (proportional) */
@media (max-width: 959px) {
  :root {
    --bb-space-md:  16px;
    --bb-space-lg:  24px;
    --bb-space-xl:  32px;
    --bb-space-2xl: 48px;
    --bb-space-3xl: 48px;
  }
}

/* Optionale Palette "Hafen" (data-palette="hafen" auf html oder Section)
   Türkis als Primary, helles Wasserlicht, weiß-getünchte Altstadt. */
[data-palette="hafen"] {
  --bb-bg:        #f6f4ee;
  --bb-bg-alt:    #eef2f0;
  --bb-bg-deep:   #e3ebec;
  --bb-paper:     #fdfcf7;
  --bb-ink:       #2a3940;
  --bb-ink-soft:  #556872;
  --bb-ink-mute:  #8a9aa1;
  --bb-line:      #d4dcdd;
  --bb-accent:      #4aa1b5;
  --bb-accent-2:    #b55d0e;
  --bb-teal-bright: #5dbacd;
}

html {
  scroll-behavior: smooth;
  -webkit-hyphens: auto;
  hyphens: auto;
}
body {
  overflow-wrap: break-word;
}
p { text-wrap: pretty; }


/* --- A11y: Globale Focus-Visible-Styles (WCAG 2.4.7) --- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--bb-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.bb-dark-section a:focus-visible,
.bb-dark-section button:focus-visible,
.bb-dark-section [tabindex]:focus-visible,
.bb-dark-section summary:focus-visible,
.bb-section-petrol a:focus-visible,
.bb-section-petrol button:focus-visible,
.bb-section-petrol [tabindex]:focus-visible,
.bb-section-petrol summary:focus-visible,
.uk-light a:focus-visible,
.uk-light button:focus-visible {
  outline-color: var(--bb-bg);
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}


/* --- A11y: Skip-Link sichtbar bei Fokus (WCAG 2.4.1) --- */

.uk-hidden-visually:focus,
.uk-hidden-visually:focus-within,
.uk-hidden-visually a:focus {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  overflow: visible !important;
  background: var(--bb-ink) !important;
  color: var(--bb-bg) !important;
  border: 2px solid var(--bb-accent) !important;
  border-radius: 4px !important;
  font-family: var(--bb-serif-body) !important;
  font-size: 15px !important;
  text-decoration: none !important;
  z-index: 99999 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}


/* --- A11y: UIkit Mute-Ton ueberschreiben (LESS noch nicht kompiliert) --- */

.uk-text-meta,
.uk-text-muted,
.uk-article-meta {
  color: #6e5d4a;
}


/* --- A11y: Pflichtfeld-Marker --- */

.bb-required-marker {
  color: var(--bb-accent-2);
  font-weight: 500;
  margin-left: 2px;
}
.bb-dark-section .bb-required-marker {
  color: #ffb37a;
}
.bb-form-legend {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bb-bg) 75%, transparent);
  margin: 0 0 18px;
}


/* --- Body Background (subtile Tiefe) --- */

body {
  background-image:
    radial-gradient(1100px 600px at 80% -10%, rgba(181, 156, 134, 0.20), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(105, 66, 31, 0.06), transparent 60%);
  background-attachment: fixed;
}


/* --- Heading Fine-Tuning (clamp-Größen, die LESS nicht kann) --- */

h1, h2, h3, h4, .uk-h1, .uk-h2, .uk-h3, .uk-h4,
[class*="uk-heading"] {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variation-settings: "WONK" 1;
}

p, li, dt, dd, blockquote, figcaption,
.uk-text-lead,
.uk-article-title,
.uk-card-title,
.uk-panel {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.uk-heading-xlarge, .uk-h1, h1 { font-size: clamp(38px, 5.6vw, 78px); line-height: 1.04; letter-spacing: -0.02em; }
.uk-heading-large, .uk-h2, h2 { font-size: clamp(34px, 4.5vw, 60px); line-height: 1.05; letter-spacing: -0.02em; }
.uk-h3, h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; }

.uk-text-lead { font-size: clamp(18px, 1.3vw, 21px); }

/* Issue #91: Konsistente Headline-Abstaende -> Spacing-Scale.
   H1/H2 -> Content: space-md (24px Desktop / 16px Mobile)
   H3/H4 -> Content: space-sm (16px konstant)
   Paragraph-Abstand: space-sm (16px) */
h1, .uk-h1, .uk-heading-xlarge,
h2, .uk-h2, .uk-heading-large {
  margin-bottom: var(--bb-space-md);
}
h3, .uk-h3,
h4, .uk-h4 {
  margin-bottom: var(--bb-space-sm);
}
p { margin-bottom: var(--bb-space-sm); }
p:last-child { margin-bottom: 0; }

/* Issue #91: Section-Padding speist sich aus der Spacing-Scale.
   Doc: docs/spacing-system.md
   - .uk-section -> space-xl (48px Desktop / 32px Mobile) -> 96px / 64px zwischen Sektionen
   - .uk-section-large -> space-2xl (64 / 48) -> 128 / 96
   - .uk-section-small -> space-lg (32 / 24)  -> 64  / 48 */
.uk-section { padding-top: var(--bb-space-xl); padding-bottom: var(--bb-space-xl); }
.uk-section-large { padding-top: var(--bb-space-2xl); padding-bottom: var(--bb-space-2xl); }
.uk-section-small { padding-top: var(--bb-space-lg); padding-bottom: var(--bb-space-lg); }

/* Section-Margins explizit 0 -> Section-Abstaende kommen aus Padding, kein Margin-Collapse-Risiko.
   tm-main als uk-section (Single-Post-Routes wie /schaubaeckerei): gleicher Wert wie .uk-section. */
#tm-main.uk-section,
.tm-main.uk-section {
  padding-top: var(--bb-space-xl);
  padding-bottom: var(--bb-space-xl);
}
.uk-section { margin-top: 0; margin-bottom: 0; }

.uk-section > .uk-container > h1:first-child,
.uk-section > .uk-container > h2:first-child,
.uk-section > h1:first-child,
.uk-section > h2:first-child,
.uk-section > .uk-container > .uk-grid:first-child h1:first-child,
.uk-section > .uk-container > .uk-grid:first-child h2:first-child,
.bb-hero h1,
.bb-hero h2,
/* H1/H2 als erste Headline in der ersten Section eines main: kein extra mt (UIkit setzt 40px) */
main > .uk-section:first-of-type h1,
main > .uk-section:first-of-type h2:first-of-type,
#tm-main > .uk-section:first-of-type h1,
#tm-main > .uk-section:first-of-type h2:first-of-type,
/* H1/H2 als first-child einer Spalte oder eines Panels */
[class*="uk-width"] > h1:first-child,
[class*="uk-width"] > h2:first-child,
.uk-panel > h1:first-child,
.uk-panel > h2:first-child,
/* Startseiten-Hero: H1 ist tief verschachtelt in bg-cover-Wrapper */
body.home main h1 {
  margin-top: 0;
}

/* Eyebrow + Headline Pattern: Eyebrow-Container ist semantisch Teil der Headline,
   Standard-40px-Abstand zwischen Block-Elementen ist hier zu viel. */
.uk-panel:has(> .bb-eyebrow) + h1,
.uk-panel:has(> .bb-eyebrow) + h2,
.bb-eyebrow + h1,
.bb-eyebrow + h2 {
  margin-top: 8px;
}


/* ==========================================================
   BEHRENS-EIGENE TEXTKLASSEN
   Für Builder-Elemente: bb-eyebrow als <p>-Klasse,
   bb-lede als Content-Klasse in Text-Elementen.
   ========================================================== */

.bb-eyebrow {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bb-accent);
  margin-bottom: 18px;
}

.bb-lede {
  font-size: clamp(18px, 1.3vw, 21px);
  line-height: 1.55;
  color: var(--bb-ink-soft);
}

.bb-mono { font-family: var(--bb-mono); }

em.bb-italic {
  font-family: var(--bb-serif-display);
  font-style: italic;
  font-weight: 400;
}


/* ==========================================================
   NAVBAR – Sticky + Frosted Glass + Underline-Reveal (Issue #29)
   Logo-Konzept: Im Hero KEIN Header-Logo (Logo dort als Emblem),
   beim Scrollen wird Header sticky mit kompaktem Logo (~80px).
   Greift auf YOOthemes .tm-header / .uk-navbar-container.
   ========================================================== */

/* Sticky-Header: fixed top, ueberlagert Hero, bleibt beim Scroll */
.tm-header,
.tm-header-mobile {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 980;
}

/* Issue #88: Padding-Top des Headers darf nicht durchscheinen.
   .tm-header ist position:fixed mit padding-top:18px. Der Hintergrund
   lag bisher nur auf .uk-navbar-container (innerhalb des Padding) -
   so blieben oben 18px Seite sichtbar. Loesung: Hintergrund/Blur auf
   .tm-header selbst legen, Container transparent. Im Hero-Overlay
   (uk-light) bleibt alles transparent. */
.tm-header:has(.uk-navbar-container.uk-dark),
.tm-header:has(.uk-navbar-container:not(.uk-navbar-transparent)),
.tm-header-mobile:has(.uk-navbar-container.uk-dark),
.tm-header-mobile:has(.uk-navbar-container:not(.uk-navbar-transparent)) {
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bb-bg) 92%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--bb-line) 60%, transparent);
}
.tm-header:has(.uk-navbar-container.uk-dark) > .uk-navbar-container,
.tm-header:has(.uk-navbar-container:not(.uk-navbar-transparent)) > .uk-navbar-container,
.tm-header-mobile:has(.uk-navbar-container.uk-dark) > .uk-navbar-container,
.tm-header-mobile:has(.uk-navbar-container:not(.uk-navbar-transparent)) > .uk-navbar-container {
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}

/* Auf Nicht-Overlay-Seiten: Spacer fuer den fixed Header (sonst verdeckt er Content). */
#tm-main {
  padding-top: 96px;
}
@media (max-width: 959px) {
  #tm-main {
    padding-top: 72px;
  }
}
/* Overlay-Seiten (Hero mit transparentem Header): Header schwebt frei, kein Spacer. */
body:has(.tm-header-overlay) #tm-main,
body:has(.tm-header-mobile.tm-header-overlay) #tm-main {
  padding-top: 0;
}
body.home #tm-main { padding-top: 0; }

/* Solider Header (Nicht-Hero-Seiten oder per Frosted-Glass-Override). */
.tm-header > [class*="uk-navbar"]:not(.uk-navbar-transparent),
.tm-header-mobile > [class*="uk-navbar"]:not(.uk-navbar-transparent) {
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bb-bg) 92%, transparent) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--bb-line) 60%, transparent);
}

/* Im Hero (uk-light = ueber dunklem Hintergrund): voll transparent. */
.tm-header .uk-navbar-transparent.uk-light,
.tm-header-mobile .uk-navbar-transparent.uk-light,
.uk-navbar-container.uk-navbar-transparent.uk-light {
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}

/* Sobald gescrollt (uk-dark) wird das transparente Container-Wrapping
   automatisch von YOOtheme/UIkit umgeflippt -> jetzt Frosted Glass. */
.tm-header .uk-navbar-transparent.uk-dark,
.tm-header-mobile .uk-navbar-transparent.uk-dark,
.uk-navbar-container.uk-navbar-transparent.uk-dark {
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bb-bg) 92%, transparent) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--bb-line) 60%, transparent);
}

.tm-header .uk-navbar-container,
.tm-header .uk-navbar,
.tm-header .uk-navbar-item {
  overflow: visible;
}

/* Issue #123: Navigation rechtsbündig – Logo links, Nav-Items rechts.
   Vormals zentriert (Issue #76, Spiegel-Trick entfernt).
   Greift nur auf Desktop (>=960px) - mobil bleibt die Burger-Navigation. */
@media (min-width: 960px) {
  .tm-header .uk-navbar {
    justify-content: space-between;
  }
  .tm-header .uk-navbar-left {
    flex: 0 0 auto;
    min-width: 0;
  }
  .tm-header .uk-navbar-right {
    flex: 1 1 0;
    margin-left: auto;
    justify-content: flex-end;
  }
}

/* Header-Logo: kompakt, erscheint nur im Sticky-Zustand.
   Issue #84: Statt rundem Siegel wird das Croissant-Kombi-Logo gezeigt
   (logo-croissant.png, 431x90, Croissant + BEHRENS-Schriftzug).
   Das runde Siegel bleibt im Hero (.bb-hero-logo).
   Wir tauschen das gerenderte Bild via content:url() und erzwingen
   eine breite Box, weil das Original-img width="150" hat (sonst wird
   der breite Schriftzug zusammengequetscht). */
.tm-header .uk-logo img,
.tm-header-mobile .uk-logo img {
  content: url("/wp-content/uploads/2026/05/logo-croissant.png");
  width: 180px !important;
  height: 38px !important;
  max-height: none;
  max-width: none;
  object-fit: contain;
  object-position: left center;
  transition: opacity .25s ease;
}
.tm-header .uk-logo,
.tm-header-mobile .uk-logo {
  padding-right: 28px !important;
}
@media (max-width: 959px) {
  .tm-header .uk-logo img,
  .tm-header-mobile .uk-logo img {
    width: 150px !important;
    height: 32px !important;
  }
  .tm-header .uk-logo,
  .tm-header-mobile .uk-logo {
    padding-right: 16px !important;
  }
}
/* <source srcset> der <picture> hat Vorrang vor img-content -
   ausschalten, damit der content-Swap greift. */
.tm-header .uk-logo picture source,
.tm-header-mobile .uk-logo picture source { display: none; }

/* Logo nur sichtbar wenn gescrollt (uk-dark) ODER Header nicht transparent.
   Im Hero (uk-light) ist es versteckt, damit das Hero-Emblem das Spotlight hat. */
.uk-navbar-transparent.uk-light .uk-logo {
  visibility: hidden;
  pointer-events: none;
}

/* Hero-Logo (im Layout-Element): Emblem-Look, eigenstaendig links.
   Issue #76: groesser (220-280px) + vertikal zentriert in der Hero-Spalte. */
.bb-hero-logo img {
  width: clamp(220px, 22vw, 280px) !important;
  height: auto !important;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.35)) drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}

/* Hero-Logo-Spalte vertikal mittig im Hero-Section.
   YOOtheme-Markup: .bb-hero-logo sitzt in einer Column (uk-first-column o.ae.).
   Wir greifen die Column via :has() und zentrieren sie via align-self. */
.uk-grid > div:has(> figure .bb-hero-logo),
.uk-grid > div:has(> .bb-hero-logo),
.uk-grid > div:has(.bb-hero-logo) {
  align-self: center;
}

/* Helle Nav-Links nur ueber Hero (uk-light). Bei uk-dark = Standard-Farbe. */
.uk-navbar-transparent.uk-light .uk-navbar-nav > li > a {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.4);
}

.uk-navbar-transparent.uk-light .uk-navbar-nav > li > a:hover,
.uk-navbar-transparent.uk-light .uk-navbar-nav > li.uk-active > a {
  color: #fff !important;
  background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)) !important;
  background-size: 100% 1px !important;
}

.tm-header .uk-navbar-dropdown {
  --uk-position-offset: 0px !important;
  margin-top: 0;
}

.tm-header.tm-header-overlay .uk-navbar-dropdown {
  background: rgba(20, 15, 10, 0.85) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}
.tm-header.tm-header-overlay .uk-navbar-dropdown-nav > li > a {
  color: rgba(255, 255, 255, 0.8) !important;
}
.tm-header.tm-header-overlay .uk-navbar-dropdown-nav > li > a:hover {
  color: #fff !important;
}

.tm-header .uk-navbar-nav > li > a {
  text-decoration: none !important;
  font-size: 16px;
  background-image: linear-gradient(var(--bb-accent), var(--bb-accent)) !important;
  background-size: 0% 1px !important;
  background-position: center calc(50% + 14px) !important;
  background-repeat: no-repeat !important;
  transition: background-size .3s ease !important;
}
.tm-header .uk-navbar-nav > li > a:hover {
  background-size: 100% 1px !important;
}
.tm-header .uk-navbar-nav > li.uk-active > a {
  background-size: 100% 1px !important;
}


/* ==========================================================
   OPENING PILL (Header-CTA)
   ========================================================== */

.bb-opening-pill {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bb-opening-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2f8f5b;
  box-shadow: 0 0 0 4px color-mix(in oklab, #2f8f5b 25%, transparent);
}
.bb-opening-pill .dot--closed {
  background: #a85a3a;
  box-shadow: 0 0 0 4px color-mix(in oklab, #a85a3a 25%, transparent);
}


/* ==========================================================
   BUTTONS – Pill-Style + Link-Arrow + Chip
   UIkit-Buttons bekommen Pill-Radius via LESS.
   Hier: Custom-Varianten für Builder-Content.
   ========================================================== */

.bb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bb-serif-body);
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--bb-ink);
  color: var(--bb-bg);
  border: 1px solid var(--bb-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s, background .25s, color .25s;
}
.bb-btn:hover {
  transform: translateY(-1px);
  background: var(--bb-accent);
  border-color: var(--bb-accent);
  color: var(--bb-bg);
  text-decoration: none;
}
.bb-btn--ghost { background: transparent; color: var(--bb-ink); }
.bb-btn--ghost:hover { background: var(--bb-ink); color: var(--bb-bg); }

.bb-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bb-mono);
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bb-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: gap .2s, color .2s;
}
.bb-link-arrow:hover,
.bb-link-arrow:focus { gap: 14px; color: var(--bb-ink); text-decoration: none; }

.bb-chip {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--bb-line);
  color: var(--bb-ink-soft);
  cursor: pointer;
  background: transparent;
  transition: all .2s;
}
.bb-chip:hover, .bb-chip.uk-active {
  background: var(--bb-ink);
  color: var(--bb-bg);
  border-color: var(--bb-ink);
}


/* ==========================================================
   TAGS
   ========================================================== */

.bb-tag {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
  padding: 4px 10px;
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  display: inline-block;
}
.bb-tag--accent {
  color: var(--bb-accent);
  border-color: color-mix(in oklab, var(--bb-accent) 40%, var(--bb-line));
  background: color-mix(in oklab, var(--bb-accent) 8%, transparent);
}


/* ==========================================================
   HERO – Stats-Bar unter dem Titel
   ========================================================== */

.bb-hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  border-top: 1px solid var(--bb-line);
  padding-top: 22px;
}
.bb-hero__stat { display: flex; flex-direction: column; gap: 4px; }
.bb-hero__stat-num {
  font-family: var(--bb-serif-display);
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1;
}
.bb-hero__stat-lbl {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
}

/* Hero-Stats auf dunklem Bild-Hintergrund (Startseite-Hero) */
.bb-hero__stats--on-dark {
  border-top-color: rgba(255, 255, 255, 0.22);
  max-width: 620px;
}
.bb-hero__stats--on-dark .bb-hero__stat-num {
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.bb-hero__stats--on-dark .bb-hero__stat-lbl {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.bb-hero__stat--link {
  text-decoration: none;
  color: inherit;
  transition: opacity .2s ease;
}
.bb-hero__stat--link:hover { opacity: 0.75; }
@media (max-width: 900px) {
  .bb-hero__stats.bb-hero__stats--on-dark { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .bb-hero__stats.bb-hero__stats--on-dark .bb-hero__stat-num { font-size: clamp(22px, 6.5vw, 28px); }
  .bb-hero__stats.bb-hero__stats--on-dark .bb-hero__stat-lbl { font-size: 14px; letter-spacing: 0.15em; }
}


/* ==========================================================
   VALUES LIST (Leitbild-Punkte in Card)
   ========================================================== */

.bb-values-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bb-values-list li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  padding: 18px 0;
  border-top: 1px solid var(--bb-line);
  align-items: baseline;
}
.bb-values-list li:last-child { border-bottom: 1px solid var(--bb-line); }
.bb-values-list .num {
  font-family: var(--bb-serif-display);
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  color: var(--bb-accent);
  letter-spacing: 0;
}
.bb-values-list .ttl {
  font-family: var(--bb-serif-display);
  font-size: 20px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  line-height: 1.25;
}
.bb-values-list .desc {
  font-size: 14.5px;
  color: var(--bb-ink-soft);
  line-height: 1.55;
  display: block;
}


/* ==========================================================
   NEWS ITEMS
   ========================================================== */

.bb-news-list { display: flex; flex-direction: column; }
.bb-news-item {
  padding: 22px 0;
  border-top: 1px solid var(--bb-line);
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 22px;
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  transition: transform .2s;
}
.bb-news-item:hover { transform: translateX(4px); }
.bb-news-item:last-child { border-bottom: 1px solid var(--bb-line); }
.bb-news-item .date {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--bb-ink-mute);
  text-transform: uppercase;
}
.bb-news-item .ttl {
  font-family: var(--bb-serif-display);
  font-size: 19px;
  line-height: 1.3;
}
.bb-news-item .arr {
  font-family: var(--bb-mono);
  font-size: 14px;
  color: var(--bb-accent);
}


/* ==========================================================
   PRODUCT CARDS – Volle Produktkarte (Grid-Items)
   YOOtheme-Grid (uk-grid) für Layout, bb-prodcard für Styling.
   ========================================================== */

.bb-prodcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.bb-prodcard__media {
  aspect-ratio: 4/5;
  border-radius: var(--bb-radius);
  overflow: hidden;
  transition: transform .35s ease;
}
.bb-prodcard:hover .bb-prodcard__media,
.bb-prodcard:hover .uk-card-media-top img { transform: translateY(-4px); }
.bb-prodcard__media a {
  display: block;
  height: 100%;
  position: relative;
}
.bb-prodcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bb-prodcard__media--gallery a:first-child { cursor: zoom-in; }
.bb-prodcard__title {
  font-family: var(--bb-serif-display);
  font-size: 22px;
  line-height: 1.2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.bb-prodcard__price {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--bb-ink-mute);
  white-space: nowrap;
}
.bb-prodcard__desc {
  font-size: 14.5px;
  color: var(--bb-ink-soft);
  line-height: 1.55;
  margin: 0;
}
.bb-prodcard__zutaten {
  font-size: 14px;
  color: var(--bb-ink-mute);
  line-height: 1.5;
  margin: 8px 0 0;
}
.bb-prodcard__zutaten strong {
  font-weight: 600;
  color: var(--bb-ink);
  letter-spacing: 0.02em;
}
.bb-prodcard__allergene {
  font-family: var(--bb-mono);
  font-size: 14px;
  color: var(--bb-ink-mute);
  line-height: 1.5;
  margin: 4px 0 0;
}
.bb-prodcard__allergene strong {
  font-weight: 600;
  color: var(--bb-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}
.bb-prodcard__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
a.bb-tag {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a.bb-tag:hover,
a.bb-tag:focus {
  background: color-mix(in oklab, var(--bb-ink) 8%, transparent);
  color: var(--bb-ink);
  border-color: color-mix(in oklab, var(--bb-ink) 30%, var(--bb-line));
}
a.bb-tag.bb-tag--accent:hover,
a.bb-tag.bb-tag--accent:focus {
  background: color-mix(in oklab, var(--bb-accent) 18%, transparent);
  color: var(--bb-accent);
  border-color: color-mix(in oklab, var(--bb-accent) 60%, var(--bb-line));
}

.bb-prodcard__media--placeholder {
  box-sizing: border-box;
  background: var(--bb-warm-200, #ece4d6);
  border: 1px dashed var(--bb-ink-mute, #8a7d68);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
}
.bb-prodcard__media--placeholder span {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-ink-mute, #8a7d68);
}


/* ==========================================================
   PRODUCT OF MONTH
   ========================================================== */

.bb-prodm__price {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--bb-ink-soft);
  margin: 22px 0 28px;
  display: flex; gap: 22px; align-items: baseline;
}
.bb-prodm__price strong {
  font-family: var(--bb-serif-display);
  font-weight: 400;
  font-size: 28px;
  color: var(--bb-ink);
  letter-spacing: 0;
}


/* ==========================================================
   TIMELINE
   ========================================================== */

.bb-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bb-line);
}
.bb-timeline__item {
  background: var(--bb-bg);
  padding: 28px 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  position: relative;
  border-bottom: 1px solid var(--bb-line);
  transition: background .25s;
}
.bb-timeline__item:hover { background: var(--bb-paper); }
.bb-timeline__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  width: 48px;
  height: 2px;
  background: var(--bb-accent);
}
.bb-timeline__year {
  font-family: var(--bb-serif-display);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--bb-accent);
}
.bb-timeline__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--bb-ink-soft);
  max-width: 60ch;
}

@media (min-width: 960px) {
  .bb-timeline__item {
    grid-template-columns: minmax(160px, 220px) 1fr;
    column-gap: 48px;
    align-items: baseline;
    padding: 32px 22px;
  }
  .bb-timeline__year {
    font-size: 56px;
  }
  .bb-timeline__text {
    font-size: 16px;
  }
}


/* ==========================================================
   DIVIDERS & DECORATIVE
   ========================================================== */

.bb-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bb-line), transparent);
  margin: 0 auto;
}

.bb-wheat-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
  justify-content: center;
  margin-block: 16px;
}
.bb-wheat-mark::before,
.bb-wheat-mark::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--bb-line);
}


/* ==========================================================
   STORY BAND – uk-section.bb-story-section
   ========================================================== */

.bb-story-section {
  background: var(--bb-bg-deep);
  position: relative;
  overflow: hidden;
}

.bb-story-quote {
  font-family: var(--bb-serif-display);
  font-style: italic;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.4;
  color: var(--bb-accent);
  border-left: 2px solid var(--bb-accent);
  padding-left: 22px;
  margin: 28px 0;
}
.bb-story-quote p { margin: 0; }
.bb-story-quote footer {
  font-family: var(--bb-sans);
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--bb-ink-soft);
  margin-top: 14px;
}
.bb-story-quote .bb-quote-key {
  font-style: normal;
  font-weight: 600;
  color: var(--bb-ink);
  border-bottom: 2px solid var(--bb-accent);
  padding-bottom: 1px;
}


/* ==========================================================
   HARBOR BAND – uk-section.bb-harbor-section
   Wellen-SVG, Wasserlicht-Gradients, Silhouette.
   ========================================================== */

.bb-harbor-section {
  background:
    radial-gradient(80% 50% at 80% 10%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(60% 40% at 10% 90%, color-mix(in oklab, var(--bb-teal-bright) 25%, transparent), transparent 70%),
    linear-gradient(180deg, #eaf2f3 0%, #dde9ea 60%, #d2e1e2 100%);
  position: relative;
  overflow: hidden;
  padding-top: clamp(64px, 9vh, 100px) !important;
  padding-bottom: clamp(64px, 9vh, 100px) !important;
}
/* Issue #87: H2 in 3 Zeilen brechen wie Referenz (Beim Backen / zuschauen. / Den Kaffee dazu.) */
.bb-harbor-section h2,
.bb-harbor-section .uk-h2 {
  max-width: 14ch;
}
/* Bild im Aspect-Ratio 5/4 wie Referenz, statt natuerlichem Foto-Format 3:2 */
.bb-harbor-section .bb-content-lightbox {
  display: block;
  aspect-ratio: 5/4;
  overflow: hidden;
  border-radius: var(--bb-radius-lg);
}
.bb-harbor-section .bb-content-lightbox img,
.bb-harbor-section img.el-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 5/4;
}
.bb-harbor-section::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(80px, 14vh, 160px);
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath fill='rgba(74,161,181,0.18)' d='M0,90 C240,130 480,50 720,80 C960,110 1200,140 1440,100 L1440,160 L0,160 Z'/%3E%3Cpath fill='rgba(74,161,181,0.28)' d='M0,110 C200,80 420,150 720,115 C1020,80 1240,135 1440,120 L1440,160 L0,160 Z'/%3E%3Cpath fill='rgba(74,161,181,0.42)' d='M0,135 C260,160 520,115 760,140 C1000,165 1240,135 1440,150 L1440,160 L0,160 Z'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}
.bb-harbor-section .bb-eyebrow { color: var(--bb-teal-bright); }
.bb-harbor-section em.bb-italic,
.bb-harbor-section em { color: var(--bb-teal-bright) !important; }

/* Café-Sektion: CTA in Petrol statt Rotbraun (matcht Eyebrow + Akzent) */
.bb-harbor-section .bb-link-arrow { color: var(--bb-teal-bright); }
.bb-harbor-section .bb-link-arrow:hover,
.bb-harbor-section .bb-link-arrow:focus { color: var(--bb-ink); }

/* Bild links: S/W-Look wie Referenz, sanfter Hover entsperrt Farbe */
.bb-harbor-section img {
  filter: grayscale(1) contrast(1.02);
  transition: filter .6s ease;
}
.bb-harbor-section img:hover { filter: grayscale(0) contrast(1); }

/* 40 / 60 Verhältnis statt 50 / 50 wie in Theme-Export-Referenz */
@media (min-width: 960px) {
  .bb-harbor-section > .uk-container > .uk-grid > .uk-width-1-2\@m:first-child { width: 40%; }
  .bb-harbor-section > .uk-container > .uk-grid > .uk-width-1-2\@m:last-child  { width: 60%; }
}

.bb-harbor-section > .uk-container { position: relative; z-index: 1; }

/* Legacy: inline SVG div falls noch im DOM */
.bb-harbor-waves { display: none; }

.bb-harbor-media {
  aspect-ratio: 5/4;
  border-radius: var(--bb-radius-lg);
  background:
    radial-gradient(110% 60% at 50% 100%, color-mix(in oklab, var(--bb-teal-bright) 35%, #f5f6f1) 0%, transparent 70%),
    linear-gradient(180deg, #f4f1e8 0%, #d9e3e3 55%, #b8cdcd 100%);
  border: 1px solid color-mix(in oklab, var(--bb-teal-bright) 25%, var(--bb-line));
  overflow: hidden;
}

.bb-harbor-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 22px 28px;
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
}
.bb-harbor-bullets li::before {
  content: "· ";
  color: var(--bb-teal-bright);
}


/* ==========================================================
   DARK SECTION – uk-section.bb-dark-section (Bestellformular)
   ========================================================== */

.bb-dark-section {
  background: var(--bb-ink) !important;
  color: var(--bb-bg);
}
.bb-dark-section h1, .bb-dark-section h2,
.bb-dark-section h3, .bb-dark-section h4,
.bb-dark-section [class*="uk-heading"] { color: var(--bb-bg); }
.bb-dark-section .bb-eyebrow { color: var(--bb-accent-2); }
.bb-dark-section .bb-lede { color: color-mix(in oklab, var(--bb-bg) 75%, transparent); }

.bb-order-form,
.bb-contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bb-space-sm) var(--bb-space-md);
  background: color-mix(in oklab, var(--bb-bg) 6%, transparent);
  padding: var(--bb-space-lg);
  border-radius: var(--bb-radius-lg);
  border: 1px solid color-mix(in oklab, var(--bb-bg) 14%, transparent);
}

.bb-form-status {
  margin: 0 0 16px;
  padding: 14px 18px;
  border-radius: var(--bb-radius-md, 10px);
  font-family: var(--bb-mono);
  font-size: 14px;
  line-height: 1.5;
  outline: none;
}
.bb-form-status--ok {
  background: color-mix(in oklab, #4a7c45 35%, transparent);
  color: #fff;
  border: 1px solid color-mix(in oklab, #4a7c45 70%, transparent);
}
.bb-form-status--err {
  background: color-mix(in oklab, #b3401e 30%, transparent);
  color: #fff;
  border: 1px solid color-mix(in oklab, #b3401e 65%, transparent);
}
.bb-order-field { display: flex; flex-direction: column; gap: 6px; }
.bb-order-field--full { grid-column: 1 / -1; }
.bb-order-field label {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bb-bg) 60%, transparent);
}
.bb-order-field input,
.bb-order-field textarea,
.bb-order-field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in oklab, var(--bb-bg) 45%, transparent);
  color: var(--bb-bg);
  font-family: var(--bb-serif-body);
  font-size: 16px;
  padding: 8px 0;
  transition: border-color .2s, box-shadow .2s;
}
.bb-order-field input:focus-visible,
.bb-order-field textarea:focus-visible,
.bb-order-field select:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--bb-bg);
  box-shadow: 0 2px 0 0 var(--bb-accent-2);
}
.bb-order-field textarea { min-height: 80px; resize: vertical; }
.bb-order-field select option { color: var(--bb-ink); background: var(--bb-bg); }
.bb-order-submit {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 16px;
}
.bb-dark-section .bb-btn,
.bb-section-petrol .bb-btn,
.bb-order-submit .bb-btn {
  background: var(--bb-bg);
  color: var(--bb-ink);
  border-color: var(--bb-bg);
}
.bb-dark-section .bb-btn:hover,
.bb-section-petrol .bb-btn:hover,
.bb-order-submit .bb-btn:hover {
  background: var(--bb-accent);
  color: var(--bb-bg);
  border-color: var(--bb-accent);
}
.bb-order-hint {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bb-bg) 55%, transparent);
}
.bb-order-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: color-mix(in oklab, var(--bb-bg) 75%, transparent);
}
.bb-order-hint--inline {
  margin: 0.6rem 0 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--bb-serif-body);
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--bb-bg) 70%, transparent);
}
.bb-form-legend {
  grid-column: 1 / -1;
  margin: 0 0 6px;
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bb-bg) 55%, transparent);
}
.bb-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================
   CF7-INTEGRATION (Bestellformular)
   CF7 wraps Inputs in <span class="wpcf7-form-control-wrap">.
   Wir muessen sicherstellen, dass Layout (Grid, full-width, Akzeptanz)
   weiter funktioniert.
   ========================================================== */

/* Form selbst kommt mit class "wpcf7-form ... bb-order-form"
   (via shortcode html_class). Grid greift damit normal. */
form.wpcf7-form.bb-order-form,
form.wpcf7-form.bb-contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bb-space-sm) var(--bb-space-md);
  background: color-mix(in oklab, var(--bb-bg) 6%, transparent);
  padding: var(--bb-space-lg);
  border-radius: var(--bb-radius-lg);
  border: 1px solid color-mix(in oklab, var(--bb-bg) 14%, transparent);
}

/* CF7-Wrap-Span auf Block, damit Input full-width wird */
.bb-order-form .wpcf7-form-control-wrap,
.bb-contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.bb-order-form .wpcf7-form-control-wrap input,
.bb-order-form .wpcf7-form-control-wrap textarea,
.bb-order-form .wpcf7-form-control-wrap select,
.bb-contact-form .wpcf7-form-control-wrap input,
.bb-contact-form .wpcf7-form-control-wrap textarea,
.bb-contact-form .wpcf7-form-control-wrap select {
  width: 100%;
  box-sizing: border-box;
}

/* Inline-Validierungs-Hinweis */
.bb-order-form .wpcf7-not-valid-tip,
.bb-contact-form .wpcf7-not-valid-tip {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-top: 6px;
  color: #ffb4a0;
}
.bb-order-form .wpcf7-not-valid,
.bb-contact-form .wpcf7-not-valid {
  border-bottom-color: #ff7a55 !important;
}

/* Spinner */
.bb-order-form .wpcf7-spinner,
.bb-contact-form .wpcf7-spinner {
  display: inline-block;
  background-color: color-mix(in oklab, var(--bb-bg) 50%, transparent);
}

/* Akzeptanz-Checkbox */
.bb-order-acceptance .wpcf7-form-control-wrap {
  display: inline;
  width: auto;
}
.bb-order-acceptance .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
}
.bb-order-acceptance .wpcf7-list-item-label {
  font-family: var(--bb-serif-body);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in oklab, var(--bb-bg) 80%, transparent);
}
.bb-order-acceptance label {
  font-family: var(--bb-serif-body);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in oklab, var(--bb-bg) 80%, transparent);
  cursor: pointer;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
}
.bb-order-acceptance input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--bb-accent-2, var(--bb-bg));
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.bb-order-acceptance a {
  color: var(--bb-bg);
  text-decoration: underline;
}

/* CF7-Submit als bb-btn */
.bb-order-form input[type="submit"].wpcf7-submit,
.bb-contact-form input[type="submit"].wpcf7-submit {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--bb-bg);
  color: var(--bb-ink);
  border: 1px solid var(--bb-bg);
  transition: background .2s, color .2s, border-color .2s;
}
.bb-order-form input[type="submit"].wpcf7-submit:hover,
.bb-order-form input[type="submit"].wpcf7-submit:focus-visible,
.bb-contact-form input[type="submit"].wpcf7-submit:hover,
.bb-contact-form input[type="submit"].wpcf7-submit:focus-visible {
  background: var(--bb-accent);
  color: var(--bb-bg);
  border-color: var(--bb-accent);
}

/* CF7 Response Output (Status) */
.bb-order-form .wpcf7-response-output,
.bb-contact-form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 16px 0 0;
  padding: 14px 18px;
  border-radius: var(--bb-radius-md, 10px);
  font-family: var(--bb-mono);
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid color-mix(in oklab, var(--bb-bg) 30%, transparent);
}
form.wpcf7-form.sent .wpcf7-response-output {
  background: color-mix(in oklab, #4a7c45 35%, transparent);
  color: #fff;
  border-color: color-mix(in oklab, #4a7c45 70%, transparent);
}
form.wpcf7-form.invalid .wpcf7-response-output,
form.wpcf7-form.failed .wpcf7-response-output,
form.wpcf7-form.spam .wpcf7-response-output {
  background: color-mix(in oklab, #b3401e 30%, transparent);
  color: #fff;
  border-color: color-mix(in oklab, #b3401e 65%, transparent);
}


/* ==========================================================
   CONTACT GRID
   ========================================================== */

.bb-contact-block h4 {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
  margin-bottom: 12px;
}
.bb-contact-block strong {
  font-family: var(--bb-serif-display);
  font-weight: 400;
  font-size: 22px;
  display: block;
  margin-bottom: 4px;
}

.bb-hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 24px;
}
.bb-hours dt {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--bb-ink-mute);
  text-transform: uppercase;
}
.bb-hours dd { margin: 0; font-size: 15px; }

/* Variante: Footer-Öffnungszeiten (kompakter, dunkler Hintergrund) */
.bb-hours--footer {
  gap: 6px 18px;
  max-width: 280px;
  margin: 0 0 12px;
}
.bb-hours--footer dt {
  font-size: 14px;
  letter-spacing: 0.16em;
  align-self: center;
}
.bb-hours--footer dd {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.bb-hours-footnote {
  font-size: 14px;
  font-style: italic;
  opacity: 0.7;
  margin: 8px 0 0;
  line-height: 1.4;
}

/* Feiertags-Hinweis nach Öffnungszeiten: uk-text-meta ist zu klein (11 px), mind. 14 px */
.bb-hours + p.uk-text-meta {
  font-size: 14px;
}


/* ==========================================================
   FOOTER – Greift auf YOOthemes Footer-Markup
   ========================================================== */

.bb-footer {
  background: var(--bb-bg-deep);
  border-top: 1px solid var(--bb-line);
}
.bb-footer a {
  color: var(--bb-ink-soft);
  text-decoration: none;
  transition: color .2s;
}
.bb-footer a:hover { color: var(--bb-accent); text-decoration: none; }

.bb-footer-meta {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
}


/* ==========================================================
   LOGO (Header-Wortmarke)
   ========================================================== */

.bb-logo {
  font-family: var(--bb-logo-face);
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bb-ink);
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.bb-logo__seit {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--bb-ink-mute);
  margin-top: 4px;
}


/* ==========================================================
   PLACEHOLDER (für Builder-Demos / Foto-Slots ohne Bild)
   ========================================================== */

.bb-ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--bb-sand) 35%, var(--bb-bg)) 0 12px,
      color-mix(in oklab, var(--bb-sand) 22%, var(--bb-bg)) 12px 24px);
  border: 1px solid var(--bb-line);
  overflow: hidden;
  border-radius: var(--bb-radius);
  color: var(--bb-ink-soft);
}
.bb-ph::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 14px 12px 14px;
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
  text-align: right;
}
.bb-ph--photo {
  background:
    radial-gradient(120% 120% at 30% 20%, #d9c2a3 0%, transparent 55%),
    radial-gradient(120% 120% at 80% 90%, #6e4324 0%, transparent 60%),
    linear-gradient(180deg, #c89e74 0%, #7a4d2a 100%);
}
.bb-ph--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 6px);
  mix-blend-mode: multiply;
}


/* ==========================================================
   CARD-SOFT (Paper-Karte mit Border, für Leitbild/Aktuelles)
   ========================================================== */

.bb-card-soft {
  background: var(--bb-paper);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  padding: var(--bb-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-md);
}
.bb-card-soft h3 { margin-bottom: 8px; }
/* Issue #86: Builder-Layouts setzen H3 inline (margin: 0.5rem). Hier auf 8px-Grid normalisieren. */
.bb-card-soft h3[style*="margin"] { margin-top: 0 !important; margin-bottom: 8px !important; }

/* Variante mit Bild oben (16:9, randlos, top-rounded) */
a.bb-card-soft,
a.bb-card-soft--with-image {
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
a.bb-card-soft--with-image:hover,
a.bb-card-soft--with-image:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.bb-card-soft--with-image {
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.bb-card-soft__image-wrap {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bb-line);
}
.bb-card-soft__image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.bb-card-soft__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 32px);
}
.bb-card-soft__body h3 { margin: 0 0 8px; }
.bb-card-soft__body p { margin: 0 0 8px; color: var(--bb-ink-soft); }


/* ==========================================================
   SECTION-HEAD (Titel-Block mit optionalen Filter-Chips)
   ========================================================== */

.bb-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--bb-space-md);
  margin-bottom: var(--bb-space-xl);
  flex-wrap: wrap;
}
.bb-section-head__intro { max-width: 520px; }
.bb-section-head__intro p { color: var(--bb-ink-soft); margin-top: 18px; }
.bb-section-head__nav { display: flex; gap: 8px; }


/* ==========================================================
   HERO LAYOUT (Grid + Title mit Italic-Akzent + Media)
   ========================================================== */

/* Issue #91: Hero-Padding -> space-3xl (80px Desktop / 48px Mobile) */
.bb-hero { padding-top: var(--bb-space-3xl); position: relative; }



/* ----- Hero Shapes (Vector Decoration, Modifier-Klasse) -----
   Aktivierung: Section bekommt zusaetzlich .bb-hero--shapes.
   Subtile SVG-Dekoration in warmer Palette: Aehre rechts, Blob
   links, Punktraster oben rechts. Prototyp-Setup, kann pro Seite
   ueber Variant-Klassen verfeinert werden.
*/
.bb-hero--shapes { overflow: hidden; }

.bb-hero--shapes > .uk-container { position: relative; z-index: 2; }

.bb-hero--shapes::before {
  content: "";
  position: absolute;
  top: -220px;
  left: -240px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side,
      color-mix(in oklab, var(--bb-accent) 30%, transparent) 0%,
      color-mix(in oklab, var(--bb-sand) 38%, transparent) 40%,
      transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* ::after entfernt (Issue #94) — alte Inline-SVG-Aehre ersetzt
   durch thematische Icons im Deko-Schema weiter unten. */

@media (max-width: 900px) {
  .bb-hero--shapes::before { width: 460px; height: 460px; top: -160px; left: -180px; }
}

@media (max-width: 560px) {
}

.bb-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.bb-hero__title {
  font-size: clamp(46px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.bb-hero__title em {
  font-style: italic;
  font-family: var(--bb-serif-display);
  color: var(--bb-accent);
}
.bb-hero__meta {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 6px;
}
.bb-hero__lede {
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--bb-ink-soft);
  max-width: 38ch;
}
.bb-hero__media {
  margin-top: clamp(28px, 4vw, 56px);
  position: relative;
}


/* ==========================================================
   GRID LAYOUTS (Builder Custom Class auf row/section)
   ========================================================== */

.bb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
}

.bb-prodm {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.bb-prodm__media { aspect-ratio: 4/5; }
.bb-prodm__body  { padding-block: clamp(16px, 3vh, 32px); }
.bb-prodm__title { margin: 12px 0 10px; }

.bb-prodgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px) clamp(20px, 2vw, 28px);
}

.bb-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.bb-story-media { aspect-ratio: 5/6; }
.bb-story-body  { max-width: 52ch; }

.bb-harbor-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  position: relative;
}

.bb-order-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.bb-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 50px);
}


/* ==========================================================
   HARBOR MEDIA – Silhouette Plau (Stadtkante, Kirchturm, Mast)
   Füllt das harbor-media-Element wenn kein echtes Foto gesetzt ist.
   ========================================================== */

.bb-harbor-media--silhouette { position: relative; }
.bb-harbor-media--silhouette::before {
  content: "";
  position: absolute;
  inset: auto 0 38% 0;
  height: 14%;
  background:
    linear-gradient(90deg,
      #c4b69e 0 18%,
      #b59c86 18% 22%,
      #9a8369 22% 24%,
      #b59c86 24% 55%,
      #69421f 55% 56%,
      #b59c86 56% 78%,
      #c4b69e 78% 100%);
  clip-path: polygon(
    0% 100%, 0% 60%,
    18% 60%, 18% 25%, 22% 25%, 22% 0%, 24% 0%, 24% 25%, 28% 25%, 28% 55%,
    55% 55%, 55% 5%, 56% 5%, 56% 55%,
    78% 55%, 78% 70%,
    100% 70%, 100% 100%);
  opacity: 0.85;
}


/* ==========================================================
   FOOTER GRID + NAV-LISTEN
   ========================================================== */

.bb-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--bb-space-xl);
  margin-bottom: var(--bb-space-lg);
}
.bb-footer-grid h4 {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
  margin-bottom: var(--bb-space-sm);
}
.bb-footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bb-footer-grid a {
  text-decoration: none;
  color: var(--bb-ink-soft);
  font-size: 15px;
  transition: color .2s;
}
.bb-footer-grid a:hover { color: var(--bb-accent); }

.bb-footer-bottom {
  border-top: 1px solid var(--bb-line);
  padding-top: var(--bb-space-md);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
}

.bb-footer-logo-img { height: 56px; width: auto; }


/* ==========================================================
   UTILITIES
   ========================================================== */

.bb-shadow { box-shadow: var(--bb-shadow-soft); }
.bb-logo-img { height: 44px; width: auto; }


/* ==========================================================
   MOBILE MENU – Toggle + Offcanvas (Issue #33)
   Wird ueber functions.php in den Mobile-Header injiziert.
   ========================================================== */

/* Hamburger-Toggle: rechts oben, immer >=44px Touch-Target */
.bb-mobile-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 48px;
  min-height: 48px;
  padding: 10px 14px;
  margin: 0;
  color: var(--bb-ink);
  text-decoration: none;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bb-bg) 70%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--bb-line);
  transition: background .2s, color .2s, border-color .2s;
}
.bb-mobile-toggle:hover,
.bb-mobile-toggle:focus-visible {
  background: var(--bb-ink);
  color: var(--bb-bg);
  border-color: var(--bb-ink);
}
.bb-mobile-toggle-label {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.bb-mobile-toggle [uk-navbar-toggle-icon],
.bb-mobile-toggle [data-uk-navbar-toggle-icon] {
  width: 20px;
  height: 20px;
  margin: 0;
}

/* Toggle auf transparentem Header ueber Hero (uk-light): heller Stil. Bei uk-dark Default. */
.uk-navbar-transparent.uk-light .bb-mobile-toggle {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.uk-navbar-transparent.uk-light .bb-mobile-toggle:hover,
.uk-navbar-transparent.uk-light .bb-mobile-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.95);
  color: var(--bb-ink);
  border-color: #fff;
}

/* Mobile-Header braucht Flexbox-Verteilung Logo links / Toggle rechts */
.tm-header-mobile .uk-navbar { display: flex !important; align-items: center; width: 100%; }
.tm-header-mobile .uk-navbar-left { flex: 0 1 auto; }
.tm-header-mobile .uk-navbar-right {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* Logo im Mobile-Header: kompakt, nicht mit Toggle kollidieren.
   Issue #89: max-width 56px hat das Croissant-Logo (5:1 Ratio) zum
   unleserlichen Quadrat geklemmt. Wir lassen die Breite atmen, halten
   nur die Hoehe niedrig. Die !important-Werte aus dem Logo-Swap
   (Zeile 493-497) regeln die finale Groesse fuer das Croissant-Logo. */
.tm-header-mobile .uk-logo img {
  height: 32px;
  width: auto;
  max-height: 38px;
  max-width: none;
}

/* Offcanvas-Bar: warmer Behrens-Look */
.bb-offcanvas .uk-offcanvas-bar,
.bb-offcanvas-bar {
  background: var(--bb-bg) !important;
  color: var(--bb-ink) !important;
  padding: 28px 24px 32px;
  width: min(86vw, 360px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
}
.bb-offcanvas-close {
  color: var(--bb-ink) !important;
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}
.bb-offcanvas-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bb-line);
}
.bb-offcanvas-eyebrow {
  font-family: var(--bb-serif-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--bb-ink);
}
.bb-offcanvas-tagline {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
}

/* Nav-Liste im Offcanvas */
.bb-offcanvas-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.bb-offcanvas-nav > li {
  border-bottom: 1px solid var(--bb-line);
}
.bb-offcanvas-nav > li > a,
.bb-offcanvas-bar .uk-nav > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-family: var(--bb-serif-display);
  font-size: 19px;
  line-height: 1.2;
  color: var(--bb-ink);
  text-decoration: none;
  min-height: 48px;
  transition: color .2s, padding-left .2s;
}
.bb-offcanvas-nav > li > a:hover,
.bb-offcanvas-nav > li > a:focus-visible,
.bb-offcanvas-nav > li.uk-active > a,
.bb-offcanvas-nav > li.current-menu-item > a,
.bb-offcanvas-nav > li.current-menu-ancestor > a {
  color: var(--bb-accent);
  padding-left: 6px;
}
.bb-offcanvas-nav .sub-menu,
.bb-offcanvas-bar .uk-nav-sub {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 0 6px;
  display: flex;
  flex-direction: column;
}
.bb-offcanvas-nav .sub-menu li a,
.bb-offcanvas-bar .uk-nav-sub li a {
  display: block;
  padding: 10px 0 10px 14px;
  font-family: var(--bb-serif-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--bb-ink-soft);
  text-decoration: none;
  min-height: 44px;
  transition: color .2s;
}
.bb-offcanvas-nav .sub-menu li a:hover,
.bb-offcanvas-nav .sub-menu li.current-menu-item a {
  color: var(--bb-accent);
}

/* Footer-Block im Offcanvas */
.bb-offcanvas-foot {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--bb-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bb-offcanvas-foot .uk-button {
  min-height: 48px;
  border-radius: 999px;
}
.bb-offcanvas-meta {
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
  line-height: 1.7;
  margin: 14px 0 0;
}
.bb-offcanvas-meta a {
  color: var(--bb-accent);
  text-decoration: none;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

/* --- Touch-Targets >= 44x44 (WCAG 2.5.5 / Issue #33) --- */
.uk-button:not(.uk-button-text):not(.uk-button-link),
.bb-btn,
.uk-pagination > * > a,
.uk-pagination > * > span,
input[type="submit"],
input[type="button"] {
  min-height: 44px;
}
/* Inline-Text-Buttons brauchen vertikales Padding fuer Touch */
.uk-button-text,
.uk-button-link,
.bb-link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 10px;
  line-height: 1.4;
}
@media (max-width: 959px) {
  /* Issue #126: Footer-Links Touch-Target >= 44px (Apple HIG / Material Design) */
  footer > .uk-section-secondary a,
  .bb-footer-grid a,
  .bb-footer-bottom a,
  .bb-footer-meta a {
    display: inline-block;
    padding: 10px 0;
    min-height: 44px;
    line-height: 1.4;
  }
}

@media (max-width: 900px) {
  .bb-hero__grid,
  .bb-prodm,
  .bb-split,
  .bb-story-grid,
  .bb-harbor-grid,
  .bb-order-grid,
  .bb-contact-grid { grid-template-columns: 1fr; }

  .bb-prodgrid    { grid-template-columns: repeat(2, 1fr); }
  .bb-footer-grid { grid-template-columns: 1fr 1fr; }
  .bb-hero__stats { grid-template-columns: 1fr 1fr; }

  /* Issue #91: Section-Padding kommt aus Mobile-Tokens in :root (--bb-space-xl etc.) */

  /* Order-Form: 1-spaltig auf Mobile, sonst Felder zu eng */
  .bb-order-form,
  .bb-contact-form { grid-template-columns: 1fr; padding: var(--bb-space-lg); }
  .bb-order-submit { flex-direction: column; align-items: stretch; gap: 12px; }
  .bb-order-submit .bb-btn { justify-content: center; min-height: 48px; }
  .bb-order-submit .bb-order-hint { text-align: center; }

  /* Card-Soft Mobile: padding aus Token (-> 24px Mobile) */
  .bb-card-soft { padding: var(--bb-space-lg); }

  /* Section-Head: stack vertikal, Mobile-Margin aus Token (-> 32px) */
  .bb-section-head { flex-direction: column; align-items: stretch; gap: var(--bb-space-md); margin-bottom: var(--bb-space-xl); }
  .bb-section-head__nav { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .bb-section-head__nav::-webkit-scrollbar { height: 4px; }

  /* News-Item: Datum oben, Titel unten */
  .bb-news-item { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .bb-news-item .arr { display: none; }

  /* Values List: kompakter */
  .bb-values-list li { grid-template-columns: 48px 1fr; gap: 14px; padding: 14px 0; }
  .bb-values-list .num { font-size: 30px; }
  .bb-values-list .ttl { font-size: 18px; }

  /* Hero-Title nicht zu gross auf Mobile */
  .bb-hero__title { font-size: clamp(36px, 9vw, 64px); }
  .bb-hero { padding-top: clamp(24px, 4vh, 48px); }

  /* Story-Quote: enger */
  .bb-story-quote { font-size: clamp(18px, 4vw, 24px); padding-left: 16px; margin: 22px 0; }

  /* Footer-Bottom: stack */
  .bb-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Bilder: keine Mindesthoehe, voll responsive */
  .bb-prodcard__media,
  .bb-story-media,
  .bb-prodm__media,
  .bb-harbor-media { width: 100%; }
}

@media (max-width: 560px) {
  .bb-hero__stats { grid-template-columns: 1fr 1fr; }
  .bb-prodgrid    { grid-template-columns: 1fr; }
  .bb-footer-grid { grid-template-columns: 1fr; gap: 28px; }

  /* Container-Padding kompakter */
  .uk-container { padding-left: 18px; padding-right: 18px; }

  /* Heading-Skalen weiter runterziehen */
  .uk-heading-xlarge, .uk-h1, h1 { font-size: clamp(32px, 8vw, 46px); }
  .uk-heading-large, .uk-h2, h2 { font-size: clamp(26px, 7vw, 40px); }

  /* Hero-Title kompakt */
  .bb-hero__title { font-size: clamp(32px, 10vw, 52px); line-height: 1.03; }

  /* Card- und Form-Padding */
  .bb-order-form,
  .bb-contact-form { padding: 18px; gap: 14px 16px; }
  .bb-card-soft { padding: 22px; }

  /* Tags scrollbar wenn zu viele */
  .bb-prodcard__tags { gap: 4px; }

  /* Eyebrow kleiner */
  .bb-eyebrow { font-size: 14px; letter-spacing: 0.18em; }

  /* Buttons: Block fuer schmale Viewports */
  .bb-order-submit .bb-btn { width: 100%; }
}

/* Sehr schmale Devices (320px iPhone SE) */
@media (max-width: 360px) {
  .uk-container { padding-left: 14px; padding-right: 14px; }
  .tm-header-mobile .uk-logo img { height: 40px !important; max-width: 44px; }
  .bb-mobile-toggle { padding: 8px 12px; }
  .bb-mobile-toggle-label { display: none; }
  .bb-hero__title { font-size: clamp(29px, 11vw, 44px); }
  h1, .uk-h1 { font-size: clamp(29px, 9vw, 40px); }
}

/* Anti-Overflow Safety-Net: jegliche Inhalte respektieren Viewport */
@media (max-width: 959px) {
  body { overflow-x: hidden; }
  img, video, iframe { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* --- Content-Lightbox (Issue #38) --- */
.bb-content-lightbox {
  display: inline-block;
  cursor: zoom-in;
  line-height: 0;
}
.bb-content-lightbox img {
  cursor: zoom-in;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.bb-content-lightbox:hover img {
  opacity: 0.92;
}
.bb-content-lightbox:focus { outline: none; }
.bb-content-lightbox:focus-visible {
  outline: 2px solid var(--bb-accent-2, #b55d0e);
  outline-offset: 4px;
}


/* ==========================================================
   BLOG (Issue #37) – Single Post + Archive
   YOOtheme Pro rendert Beiträge in <article class="uk-article">.
   Auf der Blog-Index-Seite (page_for_posts = Aktuelles) liegen
   mehrere Artikel im uk-grid darunter.
   ========================================================== */

/* --- Lesbare Textbreite auf Single-Post-Seiten --- */
body.single-post .uk-article {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

body.single-post .uk-article [property="text"] {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--bb-serif-body);
  font-size: 1.075rem;
  line-height: 1.75;
  color: var(--bb-ink-soft);
}

body.single-post .uk-article-title {
  font-family: var(--bb-serif-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

body.single-post .uk-article-meta {
  text-align: center;
  font-family: var(--bb-serif-body);
  color: var(--bb-ink-mute);
  font-style: italic;
}

body.single-post .uk-article h2,
body.single-post .uk-article h3 {
  font-family: var(--bb-serif-display);
  color: var(--bb-ink);
  margin-top: 2.5rem;
}

body.single-post .uk-article [property="image"] img {
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-soft);
}

/* --- Blog-Archiv: Karten-Look pro Beitrag --- */
body.blog .uk-article,
body.archive.category .uk-article {
  background: var(--bb-paper);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  padding: 1.5rem 1.5rem 2rem;
  box-shadow: var(--bb-shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.blog .uk-article:hover,
body.archive.category .uk-article:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(43, 29, 18, 0.06),
              0 16px 36px -16px rgba(43, 29, 18, 0.22);
}

body.blog .uk-article-title,
body.archive.category .uk-article-title {
  font-family: var(--bb-serif-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.2;
}

body.blog .uk-article-title a,
body.archive.category .uk-article-title a {
  color: var(--bb-ink);
}

body.blog .uk-article-title a:hover,
body.archive.category .uk-article-title a:hover {
  color: var(--bb-accent-2);
  text-decoration: none;
}

body.blog .uk-article-meta,
body.archive.category .uk-article-meta {
  font-family: var(--bb-serif-body);
  font-style: italic;
  color: var(--bb-ink-mute);
  font-size: 0.92rem;
}

body.blog .uk-article [property="image"] img,
body.archive.category .uk-article [property="image"] img {
  border-radius: var(--bb-radius);
  margin-bottom: 0.5rem;
}

body.blog .uk-article [property="text"],
body.archive.category .uk-article [property="text"] {
  font-family: var(--bb-serif-body);
  color: var(--bb-ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}

/* Auf der Übersicht nur ersten Absatz (Teaser) zeigen */
body.blog .uk-article [property="text"] > p:not(:first-of-type),
body.archive.category .uk-article [property="text"] > p:not(:first-of-type),
body.blog .uk-article [property="text"] > h2,
body.blog .uk-article [property="text"] > h3,
body.archive.category .uk-article [property="text"] > h2,
body.archive.category .uk-article [property="text"] > h3 {
  display: none;
}

/* Blog-Header (Pre-Loop-Intro) wird per functions.php injiziert */
.bb-blog-intro {
  text-align: center;
  max-width: 720px;
  margin: 2rem auto 0;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--bb-line);
}

.bb-blog-intro .bb-eyebrow {
  display: block;
  font-family: var(--bb-mono);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-accent-2);
  margin-bottom: 0.5rem;
}

.bb-blog-intro h1 {
  font-family: var(--bb-serif-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--bb-ink);
}

.bb-blog-intro p {
  font-family: var(--bb-serif-body);
  font-size: 1.075rem;
  line-height: 1.6;
  color: var(--bb-ink-soft);
  margin: 0;
}

/* Lede-Absatz unter Blog-Hero.
   UIkit fuegt .uk-grid-margin (margin-top: 40px) hinzu – explizit ueberschreiben. */
.bb-blog-lede,
.bb-blog-lede.uk-grid-margin {
  max-width: 720px;
  margin-top: 1.5rem;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 2.5rem;
  text-align: center;
}

.bb-blog-lede p {
  font-family: var(--bb-serif-body);
  font-size: 1.075rem;
  line-height: 1.7;
  color: var(--bb-ink-soft);
  margin: 0;
}

/* Kategorien-Block ueber dem Loop */
.bb-blog-categories {
  max-width: 720px;
  margin: 0 auto 3rem;
  padding: 1.75rem 2rem;
  background: var(--bb-bg-soft, #f6efe6);
  border-radius: 6px;
}

.bb-blog-categories-title {
  font-family: var(--bb-mono);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-accent-2);
  margin: 0 0 0.75rem;
  font-weight: 500;
}

.bb-blog-categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.bb-blog-categories li {
  font-family: var(--bb-serif-body);
  font-size: 0.95rem;
  color: var(--bb-ink);
  padding: 0.25rem 0.75rem;
  background: rgba(255,255,255,0.6);
  border-radius: 999px;
}

/* Geplante Beiträge (Textbaum 3.3 – Themen-Vorschläge) */
.bb-blog-planned {
  margin: 3rem 0 2.5rem;
  display: block;
}
.bb-blog-planned-header {
  margin-bottom: 1.5rem;
}
.bb-blog-planned-header .bb-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
}
.bb-blog-planned-header h2 {
  font-family: var(--bb-serif-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--bb-ink);
}
.bb-blog-planned-lede {
  font-family: var(--bb-serif-body);
  font-size: 1.05rem;
  color: var(--bb-ink-soft);
  margin: 0;
}
.bb-blog-planned-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .bb-blog-planned-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .bb-blog-planned-grid { grid-template-columns: repeat(3, 1fr); }
}
.bb-blog-planned-card .bb-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
}
.bb-blog-planned-card h3 {
  font-family: var(--bb-serif-display);
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  color: var(--bb-ink);
}
.bb-blog-planned-card p:last-child {
  margin: 0;
  color: var(--bb-ink-soft);
}

/* Pagination-Spacing (auch wenn aktuell nur ein Beitrag) */
body.blog .uk-pagination,
body.archive .uk-pagination {
  margin-top: 3rem;
  justify-content: center;
}


/* ==========================================================
   CARD EQUAL HEIGHT (Issue #32)
   uk-grid (flex) stretcht Spalten naturell auf gleiche Hoehe.
   Cards innerhalb der text-Wrapper muessen height:100% bekommen,
   damit sie die Spaltenhoehe ausfuellen. Buttons/Links am Boden
   via margin-top:auto in flex-column-Containern.
   ========================================================== */

/* Wrapper-Kette: uk-panel (text-element) > div > .bb-prodcard|.bb-card-soft.
   Damit Cards bis zum Boden reichen, ganze Kette auf 100% Hoehe stretchen. */
.uk-panel:has(> .bb-prodcard),
.uk-panel:has(> .bb-card-soft),
.uk-panel:has(> a.bb-card-soft) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* bb-prodcard: fuelle Spaltenhoehe, Tags an den Boden, Description bekommt
   flex-grow damit Tags wirklich nach unten gedrueckt werden. */
.bb-prodcard {
  height: 100%;
  justify-content: flex-start;
}
.bb-prodcard__desc { flex-grow: 1; }
.bb-prodcard__tags { margin-top: auto; }

/* bb-card-soft: fuelle Spaltenhoehe, Link/Button am unteren Rand */
.bb-card-soft,
a.bb-card-soft,
a.bb-card-soft--with-image {
  height: 100%;
}
.bb-card-soft__body { flex-grow: 1; }

.bb-card-soft .bb-link-arrow,
.bb-card-soft .uk-button,
.bb-card-soft__body .bb-link-arrow,
.bb-card-soft__body .uk-button {
  margin-top: auto;
}
/* Letzter <p> in bb-card-soft, der den Link enthaelt, an den Boden */
.bb-card-soft > p:last-child:has(a.bb-link-arrow),
.bb-card-soft > p:last-child:has(.uk-button) {
  margin-top: auto;
  margin-bottom: 0;
}

/* uk-card (Panel-Cards via YOOtheme native Panel-Element) */
.uk-grid-match .uk-card,
.uk-grid-match .uk-card-default,
.uk-grid-match .uk-card-primary,
.uk-grid-match .uk-card-secondary {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.uk-grid-match .uk-card .uk-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.uk-grid-match .uk-card .uk-card-body > .uk-button,
.uk-grid-match .uk-card .uk-card-body > .bb-link-arrow,
.uk-grid-match .uk-card .uk-card-footer {
  margin-top: auto;
}


/* ==========================================================
   RESPONSIVE TABLET-FIX (Issue #68)
   YOOtheme Builder Layouts nutzen breakpoint=m (960px), d.h. ab
   960px werden Spalten nebeneinander gerendert. Auf 960-1199px
   (iPad landscape, iPad Pro portrait) wird das gequetscht:
   - Brot des Monats (Bild + Text 2-spaltig)
   - Was bei uns aus dem Ofen kommt (Bild + Liste)
   - Schaubaeckerei & Cafe (Bild + Text)
   - Versprechen + Aktuelles (2 Cards)
   - Hafenbaecker (Bild + Text)
   - Footer (3 Spalten)
   Loesung: in diesem Bereich alle uk-width-*\@m im Main-Content
   zwingend auf 100% setzen, Footer ebenfalls 1-spaltig.
   Header-Navigation (uk-navbar-nav) ist davon NICHT betroffen.
   ========================================================== */
@media (min-width: 960px) and (max-width: 1199px) {
  /* Hauptinhalt: alle 2- und 3-Spalten-Layouts stacken */
  #tm-main .uk-width-1-2\@m,
  #tm-main .uk-width-1-3\@m,
  #tm-main .uk-width-2-3\@m,
  #tm-main .uk-width-1-4\@m,
  #tm-main .uk-width-3-4\@m,
  #tm-main .uk-width-2-5\@m,
  #tm-main .uk-width-3-5\@m,
  #tm-main .uk-width-1-5\@m,
  #tm-main .uk-width-4-5\@m,
  #tm-main .uk-width-1-6\@m,
  #tm-main .uk-width-5-6\@m,
  #tm-main .uk-width-expand\@m {
    width: 100% !important;
  }

  /* uk-child-width Klassen am Grid-Container ueberschreiben */
  #tm-main .uk-child-width-1-2\@m > *,
  #tm-main .uk-child-width-1-3\@m > *,
  #tm-main .uk-child-width-1-4\@m > *,
  #tm-main .uk-child-width-1-5\@m > *,
  #tm-main .uk-child-width-1-6\@m > *,
  #tm-main .uk-child-width-expand\@m > * {
    width: 100% !important;
  }

  /* Hero-Logo nicht zu gross wenn Spalte voll wird */
  .bb-hero-logo img {
    width: clamp(120px, 16vw, 180px) !important;
  }

  /* Footer: alle Spalten-Layouts ueberschreiben (Footer ist <footer>
     ohne tm-footer-Klasse) */
  footer .uk-width-1-2\@m,
  footer .uk-width-1-3\@m,
  footer .uk-width-2-3\@m,
  footer .uk-width-1-4\@m,
  footer .uk-width-3-4\@m,
  footer .uk-width-expand\@m,
  .tm-footer .uk-width-1-2\@m,
  .tm-footer .uk-width-1-3\@m,
  .tm-footer .uk-width-2-3\@m,
  .tm-footer .uk-width-1-4\@m,
  .tm-footer .uk-width-3-4\@m,
  .tm-footer .uk-width-expand\@m {
    width: 100% !important;
  }
  footer .uk-child-width-1-2\@m > *,
  footer .uk-child-width-1-3\@m > *,
  footer .uk-child-width-1-4\@m > *,
  .tm-footer .uk-child-width-1-2\@m > *,
  .tm-footer .uk-child-width-1-3\@m > *,
  .tm-footer .uk-child-width-1-4\@m > * {
    width: 100% !important;
  }

  /* Issue #91: Section-Padding kommt aus Token-Skala (siehe :root) */
}

/* Tablet-Bereich (768-1199px): bb-* Custom-Grids ebenfalls einspaltig.
   Die Klassen sind oben in @media (max-width: 900px) bereits gestackt;
   wir erweitern den Stack-Bereich auf den ganzen Tablet-Range. */
@media (min-width: 901px) and (max-width: 1199px) {
  .bb-hero__grid,
  .bb-prodm,
  .bb-split,
  .bb-story-grid,
  .bb-harbor-grid,
  .bb-order-grid,
  .bb-contact-grid { grid-template-columns: 1fr; }
  .bb-footer-grid { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================
   ÖFFNUNGSZEITEN-SEITE (Issue #71)
   Zentrale Zeiten-Card + Hinweis-Block
   ========================================================== */

.bb-hours-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--bb-paper);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--bb-shadow-soft);
  text-align: center;
}
.bb-hours-card__eyebrow {
  margin: 0 0 10px;
}
.bb-hours-card__title {
  font-family: var(--bb-serif-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  margin: 0 0 28px;
  color: var(--bb-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.bb-hours-table {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border-collapse: collapse;
  font-family: var(--bb-serif-body);
  font-size: 17px;
  line-height: 1.5;
  text-align: left;
}
.bb-hours-table tr {
  border-bottom: 1px solid var(--bb-line);
}
.bb-hours-table tr:last-child {
  border-bottom: none;
}
.bb-hours-table td {
  padding: 12px 8px;
  color: var(--bb-ink);
}
.bb-hours-table td:first-child {
  font-weight: 500;
  width: 50%;
}
.bb-hours-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--bb-ink-soft);
}
.bb-hours-table__closed td {
  color: var(--bb-ink-mute);
  font-style: italic;
}
.bb-hours-table__closed td:first-child {
  font-style: normal;
}

.bb-notice {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.bb-notice .bb-eyebrow {
  margin: 0 0 10px;
}
.bb-notice__title {
  font-family: var(--bb-serif-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--bb-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.bb-notice p {
  color: var(--bb-ink-soft);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .bb-hours-card { padding: 24px 20px; }
  .bb-hours-table { font-size: 16px; }
  .bb-hours-table td { padding: 10px 4px; }
}


/* ==========================================================
   FILTER (Issue #83) - uk-filter mit bb-chip + Karten-Grid
   ========================================================== */

.bb-filter { margin-block: 0; }

.bb-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
  padding-bottom: 4px;
}

.bb-filter__grid {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bb-filter__grid > li { list-style: none; }

/* uk-filter blendet nicht passende <li> via display:none aus -
   das ist fuer uns OK, kein extra Styling noetig. */

/* Mobile: Chips umbrechen in zwei Zeilen (Issue #128) */
@media (max-width: 640px) {
  .bb-filter__chips {
    gap: 8px;
    margin-bottom: 28px;
  }
}


/* ==========================================================
   DEKO-SCHEMA (Issue #84, Issue #94)
   14 Line-Art-Icons als Trenner + Akzente seitenweit.
   Schwarz-auf-transparent, per CSS-Filter warm-braun.
   Icon-Trenner = Icon zentriert + feine Linien links/rechts.
   Max 2-3 Deko-Elemente pro Seite.
   ========================================================== */

:root {
  /* --- Icon-Pfade --- */
  --bb-ico-aehre:         url("/wp-content/themes/behrens-theme/assets/icons/icon-aehre.png");
  --bb-ico-baguette:      url("/wp-content/themes/behrens-theme/assets/icons/icon-baguette.png");
  --bb-ico-baguette-lang: url("/wp-content/themes/behrens-theme/assets/icons/icon-baguette-lang.png");
  --bb-ico-brezel:        url("/wp-content/themes/behrens-theme/assets/icons/icon-brezel.png");
  --bb-ico-broetchen:     url("/wp-content/themes/behrens-theme/assets/icons/icon-broetchen.png");
  --bb-ico-croissant:     url("/wp-content/themes/behrens-theme/assets/icons/icon-croissant.png");
  --bb-ico-kochmuetze:    url("/wp-content/themes/behrens-theme/assets/icons/icon-kochmuetze.png");
  --bb-ico-mehlsack:      url("/wp-content/themes/behrens-theme/assets/icons/icon-mehlsack.png");
  --bb-ico-muffin:        url("/wp-content/themes/behrens-theme/assets/icons/icon-muffin.png");
  --bb-ico-nudelholz:     url("/wp-content/themes/behrens-theme/assets/icons/icon-nudelholz.png");
  --bb-ico-schneebesen:   url("/wp-content/themes/behrens-theme/assets/icons/icon-schneebesen.png");
  --bb-ico-steinofen:     url("/wp-content/themes/behrens-theme/assets/icons/icon-steinofen.png");
  --bb-ico-torte:         url("/wp-content/themes/behrens-theme/assets/icons/icon-torte.png");
  --bb-ico-pfannenwender: url("/wp-content/themes/behrens-theme/assets/icons/icon-pfannenwender.png");

  /* --- Deko-Farbanpassung (schwarz -> warm-braun) --- */
  --bb-deco-filter:       sepia(0.55) saturate(0.85) hue-rotate(-10deg);

  /* --- Steuerbare Icon-Variablen (per page-id ueberschrieben) --- */
  --bb-hero-icon:         var(--bb-ico-aehre);
  --bb-section-icon:      var(--bb-ico-aehre);

  /* --- Trenner-Linie (kraeftiger als --bb-line fuer Sichtbarkeit) --- */
  --bb-deco-line:         #a89578;

  /* --- Footer-Wasserzeichen --- */
  --bb-deco-logo-clean:   url("/wp-content/uploads/2026/05/logo-clean.png");
}

/* --- Hero-Icon pro Seite --- */
body.page-id-24 { --bb-hero-icon: var(--bb-ico-baguette); }
body.page-id-26 { --bb-hero-icon: var(--bb-ico-broetchen); }
body.page-id-17 { --bb-hero-icon: var(--bb-ico-steinofen); }
body.page-id-16 { --bb-hero-icon: var(--bb-ico-kochmuetze); }
body.page-id-22 { --bb-hero-icon: var(--bb-ico-steinofen); }
body.page-id-25 { --bb-hero-icon: var(--bb-ico-baguette); }
body.page-id-18 { --bb-hero-icon: var(--bb-ico-mehlsack); }
body.page-id-27 { --bb-hero-icon: var(--bb-ico-torte); }
body.page-id-31 { --bb-hero-icon: var(--bb-ico-baguette-lang); }
body.page-id-20 { --bb-hero-icon: var(--bb-ico-aehre); }
body.page-id-29 { --bb-hero-icon: var(--bb-ico-aehre); }
body.page-id-23 { --bb-hero-icon: var(--bb-ico-aehre); }
body.page-id-19 { --bb-hero-icon: var(--bb-ico-steinofen); }

/* --- Section-Icon pro Seite --- */
body.page-id-25 { --bb-section-icon: var(--bb-ico-baguette); }
body.page-id-26 { --bb-section-icon: var(--bb-ico-brezel); }
body.page-id-17 { --bb-section-icon: var(--bb-ico-nudelholz); }
body.page-id-27 { --bb-section-icon: var(--bb-ico-croissant); }
body.page-id-31 { --bb-section-icon: var(--bb-ico-baguette-lang); }
body.home        { --bb-section-icon: var(--bb-ico-aehre); }


/* ==========================================================
   A) HERO-TRENNER (unter H1, Icon + Linien links/rechts)
   ========================================================== */

/* Seiten ohne .bb-hero aber mit H1 die trotzdem einen Trenner brauchen */
body.page-id-27 .uk-section:first-of-type h1,
body.page-id-31 .uk-section:first-of-type h1,
body.page-id-253 .uk-section:first-of-type h1,
body.page-id-20 .uk-section:first-of-type h1,
body.page-id-29 .uk-section:first-of-type h1,
body.page-id-23 .uk-section:first-of-type h1,
body.page-id-19 .uk-section:first-of-type h1,
.bb-hero h1 { position: relative; }

body.page-id-27 .uk-section:first-of-type h1::after,
body.page-id-31 .uk-section:first-of-type h1::after,
body.page-id-253 .uk-section:first-of-type h1::after,
body.page-id-20 .uk-section:first-of-type h1::after,
body.page-id-29 .uk-section:first-of-type h1::after,
body.page-id-23 .uk-section:first-of-type h1::after,
body.page-id-19 .uk-section:first-of-type h1::after,
.bb-hero h1::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 480px;
  height: 50px;
  margin: 18px auto 6px;
  background-image:
    linear-gradient(to right, transparent 0%, var(--bb-deco-line) 20%, var(--bb-deco-line) 100%),
    var(--bb-hero-icon),
    linear-gradient(to left, transparent 0%, var(--bb-deco-line) 20%, var(--bb-deco-line) 100%);
  background-position: left center, center center, right center;
  background-size: calc(50% - 34px) 1px, auto 42px, calc(50% - 34px) 1px;
  background-repeat: no-repeat;
  opacity: 0.6;
  filter: var(--bb-deco-filter);
}


/* ==========================================================
   B) SECTION-TRENNER (Icon + Linien, auf Sektionsgrenze)
   ========================================================== */

/* Alle Seiten mit Produktgrid oder Story-Sektionen */
body.parent-pageid-24 .uk-section,
body.parent-pageid-22 .uk-section,
body.page-id-31 .uk-section,
body.home .uk-section {
  position: relative;
}

/* Brot: vor Produktgrid (Sek.3) */
body.page-id-25 .uk-section:nth-of-type(3)::before,
/* Broetchen: vor Produktgrid (Sek.3) */
body.page-id-26 .uk-section:nth-of-type(3)::before,
/* Geschichte: vor Story-Band (Sek.3) */
body.page-id-17 .uk-section:nth-of-type(3)::before,
/* Bestellen: vor Versandbedingungen (Sek.3) */
body.page-id-31 .uk-section:nth-of-type(3)::before,
/* Startseite: nach "Was aus dem Ofen kommt" (Sek.3) */
body.home .uk-section:nth-of-type(3)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(70%, 420px);
  height: 40px;
  background-image:
    linear-gradient(to right, transparent 0%, var(--bb-deco-line) 20%, var(--bb-deco-line) 100%),
    var(--bb-section-icon),
    linear-gradient(to left, transparent 0%, var(--bb-deco-line) 20%, var(--bb-deco-line) 100%);
  background-position: left center, center center, right center;
  background-size: calc(50% - 28px) 1px, auto 34px, calc(50% - 28px) 1px;
  background-repeat: no-repeat;
  opacity: 0.5;
  filter: var(--bb-deco-filter);
  pointer-events: none;
  z-index: 4;
}


/* ==========================================================
   C) SPOT-AKZENTE (nur Icon, keine Linie)
   ========================================================== */

/* --- Startseite: Croissant in Cafe-Sektion (oben rechts) --- */
.bb-harbor-section > .uk-container::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 12px;
  width: clamp(48px, 5vw, 64px);
  height: clamp(48px, 5vw, 64px);
  background-image: var(--bb-ico-croissant);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.28;
  filter: var(--bb-deco-filter);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 639px) {
  .bb-harbor-section > .uk-container::before { display: none; }
}

/* --- Startseite: Mehlsack vor Versprechen-Liste --- */
.bb-values-list { position: relative; }
.bb-values-list::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  background-image: var(--bb-ico-mehlsack);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  opacity: 0.25;
  filter: var(--bb-deco-filter);
}


/* ==========================================================
   D) FOOTER-WASSERZEICHEN (Logo-Clean)
   ========================================================== */

.uk-section-secondary,
.tm-footer .uk-section-secondary {
  position: relative;
  overflow: hidden;
}
.uk-section-secondary::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18%;
  transform: translateX(-50%);
  width: min(80vw, 760px);
  height: 38%;
  background-image: var(--bb-deco-logo-clean);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.06;
  filter: invert(1);
  pointer-events: none;
  z-index: 0;
}
.uk-section-secondary > * { position: relative; z-index: 1; }


/* ==========================================================
   E) MOBILE-TUNING
   ========================================================== */

@media (max-width: 639px) {
  .bb-hero h1::after {
    max-width: 300px;
    height: 40px;
    margin-top: 14px;
    background-size: calc(50% - 26px) 1px, auto 32px, calc(50% - 26px) 1px;
  }
  body.page-id-25 .uk-section:nth-of-type(3)::before,
  body.page-id-26 .uk-section:nth-of-type(3)::before,
  body.page-id-17 .uk-section:nth-of-type(3)::before,
  body.page-id-27 .uk-section:nth-of-type(4)::before,
  body.page-id-31 .uk-section:nth-of-type(3)::before,
  body.home .uk-section:nth-of-type(3)::before {
    width: min(85%, 280px);
    height: 32px;
    background-size: calc(50% - 22px) 1px, auto 26px, calc(50% - 22px) 1px;
  }
  .uk-section-secondary::before {
    width: 90vw;
    bottom: -10%;
    height: 28%;
  }
  .bb-values-list::before {
    width: 36px;
    height: 36px;
  }
}


/* ==========================================================
   F) PRINT: alle Deko ausblenden
   ========================================================== */

@media print {
  .bb-hero h1::after,
  body.page-id-25 .uk-section::before,
  body.page-id-26 .uk-section::before,
  body.page-id-17 .uk-section::before,
  body.page-id-27 .uk-section::before,
  body.page-id-31 .uk-section::before,
  body.home .uk-section::before,
  .bb-harbor-section > .uk-container::before,
  .bb-values-list::before,
  .uk-section-secondary::before { display: none !important; }
}


/* ==========================================================
   NAV SCROLL-STATE (Issue #89)
   Drei Zustaende sauber trennen via body.bb-scrolled (JS-getriggert
   ab scrollY > 60). Loest die Ueberlappung waehrend der Transition
   und macht Header-Bar + Logo im Sticky sichtbar.

   Zustand 1 — Hero (top of page, body OHNE .bb-scrolled):
     - Navbar transparent, weisse Links mit Text-Shadow
     - Hero-Emblem im Layout sichtbar, Header-Logo versteckt
   Zustand 2 — Transition (zwischen 60-200px Scroll):
     - body.bb-scrolled aktiviert -> Frosted Glass + Border + Logo
     - Smooth via opacity/transform Transition
   Zustand 3 — Sticky (gescrollt):
     - Wie Transition, plus Box-Shadow fuer Tiefe
   ========================================================== */

/* Smooth Transition fuer alle Header-Zustands-Properties */
.tm-header,
.tm-header-mobile {
  transition: box-shadow .35s ease, transform .35s ease;
}
.tm-header > [class*="uk-navbar"],
.tm-header-mobile > [class*="uk-navbar"] {
  transition: background-color .35s ease, backdrop-filter .35s ease,
              border-color .35s ease;
}
.tm-header .uk-logo,
.tm-header-mobile .uk-logo {
  transition: opacity .35s ease, visibility .35s ease;
}

/* Sanfte Tiefenwirkung erst wenn der Header wirklich frei ueber Content steht */
body.bb-scrolled .tm-header,
body.bb-scrolled .tm-header-mobile {
  background: color-mix(in oklab, var(--bb-bg) 94%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid color-mix(in oklab, var(--bb-line) 70%, transparent);
  box-shadow: 0 4px 20px -8px rgba(40, 28, 18, 0.18);
}

/* Beim Scrollen: Header-Logo sichtbar machen, auch wenn uk-light noch aktiv ist.
   Override der Regel von Zeile 510. */
body.bb-scrolled .uk-navbar-transparent.uk-light .uk-logo {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

/* Beim Scrollen: Nav-Links umschalten auf dunkle Farbe (kein Text-Shadow mehr).
   Override der Regel von Zeile 533, damit der Text gegen den hellen Frosted-Bg lesbar ist. */
body.bb-scrolled .uk-navbar-transparent.uk-light .uk-navbar-nav > li > a {
  color: var(--bb-ink) !important;
  text-shadow: none !important;
}
body.bb-scrolled .uk-navbar-transparent.uk-light .uk-navbar-nav > li > a:hover,
body.bb-scrolled .uk-navbar-transparent.uk-light .uk-navbar-nav > li.uk-active > a {
  color: var(--bb-ink) !important;
  background-image: linear-gradient(var(--bb-accent), var(--bb-accent)) !important;
}

/* Mobile: Toggle-Button bekommt im Scroll-Zustand wieder Default-Look (dunkel auf hell),
   damit der Kontrast auf dem hellen Frosted-Bg stimmt. */
body.bb-scrolled .uk-navbar-transparent.uk-light .bb-mobile-toggle {
  background: color-mix(in oklab, var(--bb-bg) 70%, transparent);
  color: var(--bb-ink);
  border-color: var(--bb-line);
  box-shadow: none;
}
body.bb-scrolled .uk-navbar-transparent.uk-light .bb-mobile-toggle:hover,
body.bb-scrolled .uk-navbar-transparent.uk-light .bb-mobile-toggle:focus-visible {
  background: var(--bb-ink);
  color: var(--bb-bg);
  border-color: var(--bb-ink);
}

/* Hero-Emblem (.bb-hero-logo) sanft ausblenden waehrend der Header-Logo erscheint.
   Verhindert, dass kurz beide Logos gleichzeitig sichtbar sind, wenn man oben scrollt. */
.bb-hero-logo,
.bb-hero-logo img {
  transition: opacity .35s ease;
}
body.bb-scrolled .bb-hero-logo {
  opacity: 0.85;
}



/* ==========================================================
   HOMEPAGE: HEADER ERST NACH HERO (bb-past-hero)
   Auf der Startseite ist der Header komplett unsichtbar,
   solange man im Hero-Bereich ist. Erst wenn ~80% des
   Viewports gescrollt sind (JS setzt bb-past-hero), gleitet
   der Header von oben herein — bereits im Frosted-Glass-
   Zustand (bb-scrolled ist laengst aktiv).
   Auf allen anderen Seiten: kein Effekt.
   ========================================================== */
body.home .tm-header,
body.home .tm-header-mobile {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: box-shadow .35s ease,
              transform .6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity .4s ease !important;
}
body.home.bb-past-hero .tm-header,
body.home.bb-past-hero .tm-header-mobile {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}


/* ==========================================================
   Theme-Export Review 2 (Issue #93) — Mikro-Stilmittel
   ========================================================== */

/* Foto-Caption: kleine Mono-Beschriftung unter Bildern.
   Anwendung: <small class="bb-photo-caption">Foto · Hafen Mittag</small>
   direkt unter dem Bild im Custom-HTML oder Caption-Slot. */
.bb-photo-caption {
  display: block;
  font-family: var(--bb-mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bb-ink-mute);
  margin-top: 8px;
  text-align: right;
}
.bb-photo-caption--left { text-align: left; }
.bb-photo-caption--centered { text-align: center; }

/* Auf dunklem Section-Background: Caption muss ueber Ink lesbar bleiben. */
.bb-dark-section .bb-photo-caption,
.bb-section-petrol .bb-photo-caption {
  color: color-mix(in oklab, var(--bb-bg) 55%, transparent);
}
/* Auf Harbor-Hintergrund: Petrol-Tone */
.bb-harbor-section .bb-photo-caption {
  color: color-mix(in oklab, var(--bb-teal) 70%, var(--bb-ink-mute));
}

/* Italic-Warm: Headline-Akzent in gebackener-Kruste-Orange (--bb-accent-2)
   statt Petrol-Akzent. Wirkt auf dunklem Bestellen-Block lebendiger.
   Anwendung: <em class="bb-italic-warm">einen Tag vorher</em> */
em.bb-italic-warm,
.bb-italic-warm {
  font-family: var(--bb-serif-display);
  font-style: italic;
  font-weight: 400;
  color: var(--bb-accent-2);
}
.bb-dark-section em.bb-italic-warm,
.bb-dark-section .bb-italic-warm {
  color: color-mix(in oklab, var(--bb-accent-2) 90%, var(--bb-bg));
}

/* ==========================================================
   Issue #95: Headline-Akzent (Petrol/Türkis)
   Schlüsselwörter in Headlines: <em> oder .bb-accent
   → Petrol + Italic + Fraunces, seitenweit konsistent.
   ========================================================== */
:root {
  --bb-color-headline-accent: var(--bb-teal-bright); /* #4aa1b5 */
}

/* Globale Akzent-Regel: <em> in Headlines + .bb-accent
   !important nötig, weil Builder-Layouts teils inline color setzen. */
h1 em, h2 em, h3 em, h4 em,
.uk-h1 em, .uk-h2 em, .uk-h3 em, .uk-h4 em,
.uk-heading-xlarge em, .uk-heading-large em, .uk-heading-medium em,
h1 .bb-accent, h2 .bb-accent, h3 .bb-accent, h4 .bb-accent,
.bb-accent {
  font-family: var(--bb-serif-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--bb-color-headline-accent) !important;
}

/* Auf dunklem Hintergrund (.bb-dark-section, .uk-light):
   leicht aufgehellt für Kontrast (WCAG AA gegen dunkles Foto).
   .bb-hero ist NICHT zwangslaeufig dunkel (z. B. Kontakt) -> nicht hier. */
.bb-dark-section h1 em, .bb-dark-section h2 em, .bb-dark-section h3 em,
.bb-dark-section .bb-accent,
.bb-section-petrol h1 em, .bb-section-petrol h2 em, .bb-section-petrol h3 em,
.bb-section-petrol .bb-accent,
.uk-light h1 em, .uk-light h2 em, .uk-light h3 em,
.uk-light .bb-accent {
  color: color-mix(in oklab, var(--bb-color-headline-accent) 80%, var(--bb-bg)) !important;
}

/* Harbor-Section (helles Wasserlicht) hatte bereits eigene Regel
   (.bb-harbor-section em → --bb-teal-bright). Bleibt kompatibel. */


/* ==========================================================
   FOOTER LIGHT-OVERRIDE (Issue #97)
   YOOtheme rendert den Footer als <footer><div class="uk-section-secondary uk-section uk-section-default">...
   Im Theme war secondary = Dunkelbraun (#69421f). Wir kippen
   den Footer auf warmes Beige, dunkle Schrift, Petrol-Akzent.
   ========================================================== */

footer > .uk-section-secondary,
footer > .uk-section-secondary.uk-section-default {
  background: var(--bb-bg-deep) !important;
  color: var(--bb-ink) !important;
  border-top: 1px solid var(--bb-line);
  padding-block: var(--bb-space-2xl) var(--bb-space-md) !important;
}

/* Default-Text (p, li) auf gedaempftes Dunkelbraun */
footer > .uk-section-secondary p,
footer > .uk-section-secondary li,
footer > .uk-section-secondary dd,
footer > .uk-section-secondary span {
  color: var(--bb-ink-soft) !important;
}

/* dt (z. B. Oeffnungszeiten-Tage) im Mute-Ton */
footer > .uk-section-secondary dt {
  color: var(--bb-ink-mute) !important;
}

/* Headlines: Mono-Caps wie im Theme-Export, Petrol-Akzent */
footer > .uk-section-secondary h3,
footer > .uk-section-secondary h4 {
  font-family: var(--bb-mono) !important;
  font-size: 14px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--bb-teal) !important;
  font-weight: 500 !important;
  margin-bottom: var(--bb-space-sm) !important;
  line-height: 1.4 !important;
}

/* Stark hervorgehobene Strong-Inhalte (z. B. Firmenname, "Folgen Sie uns") */
footer > .uk-section-secondary strong {
  color: var(--bb-ink) !important;
  font-weight: 600;
}

/* Links: dunkles Soft-Braun, Hover Petrol */
footer > .uk-section-secondary a {
  color: var(--bb-ink) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
footer > .uk-section-secondary a:hover {
  color: var(--bb-teal) !important;
  border-bottom-color: var(--bb-teal);
}

/* Kein Underline-Border bei Bottom-Bar-Links (kompakter) */
footer > .uk-section-secondary .uk-text-center a {
  border-bottom: none;
}

/* Karten-Iframe: dezente Border statt heller Highlight */
footer > .uk-section-secondary iframe {
  border: 1px solid var(--bb-line) !important;
  border-radius: var(--bb-radius);
  background: var(--bb-paper);
}

/* "Groessere Karte ansehen"-Link unter der Karte */
footer > .uk-section-secondary iframe + p,
footer > .uk-section-secondary iframe + p a {
  color: var(--bb-ink-mute) !important;
  font-size: 14px;
}

/* Footer-Bottom-Bar: minimal abgesetzt, schmal, kleine Schrift */
footer > .uk-section-secondary .uk-divider-icon,
footer > .uk-section-secondary hr {
  border-top: 1px solid var(--bb-line) !important;
  background: none;
  margin-top: var(--bb-space-lg) !important;
  margin-bottom: var(--bb-space-sm) !important;
}

/* Copyright-Zeile: kleiner, zarter */
footer > .uk-section-secondary .uk-text-center p {
  font-family: var(--bb-mono);
  font-size: 14px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-ink-mute) !important;
  margin: 0;
}

/* Oeffnungszeiten-Variante "footer" war fuer dunklen BG getuned -
   auf dem hellen Beige farblich mitziehen */
footer > .uk-section-secondary .bb-hours--footer dt {
  color: var(--bb-ink-mute) !important;
}
footer > .uk-section-secondary .bb-hours--footer dd {
  color: var(--bb-ink) !important;
}
footer > .uk-section-secondary .bb-hours-footnote {
  color: var(--bb-ink-mute) !important;
  opacity: 1;
}

/* Spalten-Spacing leicht luftiger */
footer > .uk-section-secondary .uk-grid > * {
  padding-top: 0;
}

/* Mobile: kompakter, weniger Padding */
@media (max-width: 639px) {
  footer > .uk-section-secondary {
    padding-block: var(--bb-space-xl) var(--bb-space-sm) !important;
  }
}

/* ==========================================================
   BLOG-EINTRÄGE: 2-Spalten-Grid (Issue #122)
   YOOtheme packt jeden Post in eine eigene div.uk-grid-margin.
   Alle diese divs sind Geschwister der aside.bb-blog-categories
   im gleichen uk-grid-Container. Per :has() + ~ Selektor
   werden nur Post-Wrapper-Divs (nach der aside) auf 50% gesetzt.
   Desktop: 2 Spalten, Mobile: 1 Spalte.
   ========================================================== */
.uk-grid:has(> aside.bb-blog-categories) > aside.bb-blog-categories ~ div {
  width: calc(50% - 15px) !important;
  box-sizing: border-box;
}

@media (max-width: 639px) {
  .uk-grid:has(> aside.bb-blog-categories) > aside.bb-blog-categories ~ div {
    width: 100% !important;
  }
}

/* ==========================================================
   OFEN-SLIDER (Issue #114)
   Panel-Slider auf Startseite, ersetzt vorheriges Hero-Bildslideshow.
   3 sichtbare bb-prodcards auf Desktop, 2 auf Tablet, 1 auf Mobile.
   ========================================================== */

.bb-ofen-slider {
  /* Platz fuer Slidenav-Pfeile innerhalb der Slider-Flaeche */
  padding-left: 48px;
  padding-right: 48px;
  position: relative;
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 959px) {
  .bb-ofen-slider {
    padding-left: 0;
    padding-right: 0;
  }
}

.bb-ofen-slider .uk-slider-items {
  list-style: none;
  padding: 0;
  margin-left: -16px !important;
  align-items: stretch;
}

.bb-ofen-slider .uk-slider-items > li {
  display: flex;
}

.bb-ofen-slider .uk-slider-items > * {
  padding-left: 16px !important;
}

.bb-ofen-slider .uk-slider-items > .uk-grid-margin {
  margin-top: 16px;
}

.bb-ofen-slider .bb-prodcard--slide,
.bb-gridpro-home-prototype .bb-prodcard--gridpro-home,
.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog,
.bb-gridpro-products .bb-prodcard--gridpro-catalog {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: var(--bb-radius);
  padding: 12px;
  box-shadow: 0 2px 6px color-mix(in oklab, var(--bb-ink) 6%, transparent);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.bb-ofen-slider .bb-prodcard--slide:hover,
.bb-gridpro-home-prototype .bb-prodcard--gridpro-home:hover,
.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog:hover,
.bb-gridpro-products .bb-prodcard--gridpro-catalog:hover {
  box-shadow: 0 6px 18px color-mix(in oklab, var(--bb-ink) 14%, transparent);
  transform: translateY(-2px);
}

.bb-ofen-slider .bb-prodcard--slide .bb-prodcard__media {
  aspect-ratio: 4/3;
}

.bb-ofen-slider .bb-prodcard--slide .bb-prodcard__title a {
  color: inherit;
  text-decoration: none;
  background-image: none;
}

.bb-ofen-slider .bb-prodcard--slide .bb-prodcard__title a:hover {
  color: var(--bb-accent);
}

/* Slidenav-Pfeile: ink-Farbe auf hellem Grund, dezent */
.bb-ofen-slider .bb-slider-nav {
  color: var(--bb-ink);
  background: #fff;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px color-mix(in oklab, var(--bb-ink) 12%, transparent);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.bb-ofen-slider .uk-position-center-left-out.bb-slider-nav {
  left: -64px;
  right: auto;
  transform: translateY(-50%);
}

.bb-ofen-slider .uk-position-center-right-out.bb-slider-nav {
  right: -64px;
  left: auto;
  transform: translateY(-50%);
}

.bb-ofen-slider .bb-slider-nav:hover,
.bb-ofen-slider .bb-slider-nav:focus {
  background: var(--bb-accent);
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}

/* Dotnav: warme Punkte */
.bb-ofen-slider .uk-dotnav > * > * {
  border-color: var(--bb-ink-mute);
}

.bb-ofen-slider .uk-dotnav > .uk-active > * {
  background-color: var(--bb-accent);
  border-color: var(--bb-accent);
}

/* Grid-Pro-Prototyp fuer den Startseiten-Slider.
   Ziel: gleiche Card-Sprache wie der bestehende Ofen-Slider, aber native Grid-Pro-Items. */
.bb-gridpro-home-prototype {
  max-width: 100%;
  overflow-x: clip;
}

.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .uk-card-media-top,
.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .fs-grid-image-holder {
  aspect-ratio: 4/3;
  border-radius: var(--bb-radius);
  overflow: hidden;
  position: relative;
}

.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .uk-card-media-top img,
.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .fs-grid-image-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .uk-card-title,
.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .el-title {
  font-family: var(--bb-serif-display);
  font-size: 22px;
  line-height: 1.2;
  text-transform: none;
}

.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .uk-card-title a,
.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .el-title a {
  color: inherit;
  text-decoration: none;
  background-image: none;
}

.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .uk-card-title a:hover,
.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .el-title a:hover {
  color: var(--bb-accent);
}

.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .el-meta {
  font-family: var(--bb-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .el-content {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--bb-ink-soft);
}

.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .uk-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 0;
}

.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .uk-card-body > .uk-margin-top {
  margin-top: 0 !important;
}

.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .uk-card-body > .uk-flex-1 {
  flex: 0 1 auto !important;
  align-self: stretch;
  gap: 6px;
}

.bb-gridpro-home-prototype .bb-prodcard--gridpro-home .el-link {
  margin-top: 0 !important;
  font-size: 13.5px;
}

/* Grid-Pro-Katalog-Prototyp.
   Ziel: Startseiten-Card-Sprache mit Kataloginformationen aus der Produktseite. */
.bb-gridpro-catalog-prototype {
  max-width: 100%;
  overflow-x: clip;
}

.bb-gridpro-products > .uk-grid {
  margin-left: -16px !important;
}

.bb-gridpro-products > .uk-grid > * {
  padding-left: 16px !important;
}

.bb-gridpro-products > .uk-grid > .uk-grid-margin {
  margin-top: 16px;
}

.bb-gridpro-catalog-prototype .uk-subnav,
.bb-gridpro-catalog-prototype .el-nav.uk-tab,
.bb-gridpro-catalog-prototype .fs-grid-filter {
  gap: 6px 8px;
  margin-bottom: 20px;
}

.bb-gridpro-catalog-prototype .el-nav.uk-tab::before {
  border-bottom: 0;
}

.bb-gridpro-catalog-prototype .uk-subnav > * {
  padding-left: 0;
}

.bb-gridpro-catalog-prototype .uk-subnav > * > *,
.bb-gridpro-catalog-prototype .el-nav.uk-tab > * > * {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  background: #fff;
  color: var(--bb-ink);
  font-family: var(--bb-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
}

.bb-gridpro-catalog-prototype .uk-subnav > .uk-active > *,
.bb-gridpro-catalog-prototype .uk-subnav > * > *:hover,
.bb-gridpro-catalog-prototype .uk-subnav > * > *:focus,
.bb-gridpro-catalog-prototype .el-nav.uk-tab > .uk-active > *,
.bb-gridpro-catalog-prototype .el-nav.uk-tab > * > *:hover,
.bb-gridpro-catalog-prototype .el-nav.uk-tab > * > *:focus {
  background: var(--bb-accent);
  border-color: var(--bb-accent);
  color: #fff;
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .uk-card-media-top,
.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .fs-grid-image-holder {
  aspect-ratio: 4/3;
  border-radius: var(--bb-radius);
  overflow: hidden;
  position: relative;
  background: var(--bb-warm-100);
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .uk-card-media-top img,
.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .fs-grid-image-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog:hover .uk-card-media-top img,
.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog:hover .fs-grid-image-holder img {
  transform: translateY(-4px);
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .uk-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 0;
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .uk-card-body > .uk-margin-top {
  margin-top: 0 !important;
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .uk-card-body > .uk-flex-1 {
  flex: 0 1 auto !important;
  align-self: stretch;
  gap: 6px;
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .uk-card-title,
.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .el-title {
  font-family: var(--bb-serif-display);
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 0;
  text-transform: none;
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .uk-card-title a,
.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .el-title a {
  color: inherit;
  text-decoration: none;
  background-image: none;
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .uk-card-title a:hover,
.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .el-title a:hover {
  color: var(--bb-accent);
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .el-meta {
  font-family: var(--bb-mono);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: var(--bb-ink-mute);
  text-transform: none;
  margin-top: -1px;
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .el-content {
  flex-grow: 0;
  font-size: 14.5px;
  line-height: 1.52;
  color: var(--bb-ink-soft);
  margin-top: 0;
  margin-bottom: 0;
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .bb-prodcard__tags {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in oklab, var(--bb-line) 68%, transparent);
}

.bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .el-link {
  margin-top: 0 !important;
  font-family: var(--bb-mono);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  align-self: flex-start;
}

.bb-gridpro-products .bb-prodcard--gridpro-catalog .uk-card-media-top,
.bb-gridpro-products .bb-prodcard--gridpro-catalog .fs-grid-image-holder {
  aspect-ratio: 4/3;
  border-radius: var(--bb-radius);
  overflow: hidden;
  position: relative;
}

.bb-gridpro-products .bb-prodcard--gridpro-catalog .uk-card-media-top img,
.bb-gridpro-products .bb-prodcard--gridpro-catalog .fs-grid-image-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bb-gridpro-products .bb-prodcard--gridpro-catalog .uk-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 0;
}

.bb-gridpro-products .bb-prodcard--gridpro-catalog > .uk-padding-small {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 0 !important;
}

.bb-gridpro-products .bb-prodcard--gridpro-catalog .uk-card-body > .uk-margin-top {
  margin-top: 0 !important;
}

.bb-gridpro-products .bb-prodcard--gridpro-catalog > .uk-padding-small > .uk-margin-top {
  margin-top: 0 !important;
}

.bb-gridpro-products .bb-prodcard--gridpro-catalog .uk-card-body > .uk-flex-1 {
  flex: 0 1 auto !important;
  align-self: stretch;
  gap: 6px;
  justify-content: flex-start !important;
}

.bb-gridpro-products .bb-prodcard--gridpro-catalog .uk-flex-1 {
  flex: 0 1 auto !important;
  justify-content: flex-start !important;
}

.bb-gridpro-products .bb-prodcard--gridpro-catalog .el-link {
  margin-top: 0 !important;
  align-self: flex-start;
  font-size: 13.5px;
}

.bb-gridpro-products .bb-prodcard--gridpro-catalog .el-content > p {
  margin: 0;
}

.bb-gridpro-products .bb-prodcard__details {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in oklab, var(--bb-line) 68%, transparent);
}

.bb-gridpro-products .bb-prodcard__details summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--bb-ink);
  cursor: pointer;
  list-style: none;
}

.bb-gridpro-products .bb-prodcard__details summary::-webkit-details-marker {
  display: none;
}

.bb-gridpro-products .bb-prodcard__details summary::after {
  content: "+";
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bb-accent) 12%, #fff);
  color: var(--bb-accent);
  font-family: var(--bb-mono);
  font-size: 15px;
  line-height: 1;
}

.bb-gridpro-products .bb-prodcard__details[open] summary::after {
  content: "−";
  background: var(--bb-accent);
  color: #fff;
}

.bb-gridpro-products .bb-prodcard__details summary small {
  display: block;
  grid-column: 1;
  color: var(--bb-ink-soft);
  font-family: var(--bb-mono);
  font-size: 11.5px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-gridpro-products .bb-prodcard__details-panel {
  margin-top: 8px;
  padding: 9px 0 0;
  color: var(--bb-ink-soft);
  font-size: 13.2px;
  line-height: 1.45;
}

.bb-gridpro-products .bb-prodcard__details-panel p {
  margin: 0;
}

.bb-gridpro-products .bb-prodcard__details-panel p + p {
  margin-top: 5px;
}

.bb-gridpro-products .bb-prodcard__details-panel strong {
  color: var(--bb-ink);
  font-weight: 650;
}

@media (max-width: 639px) {
  .bb-gridpro-catalog-prototype .uk-subnav,
  .bb-gridpro-catalog-prototype .el-nav.uk-tab,
  .bb-gridpro-catalog-prototype .fs-grid-filter {
    gap: 6px;
    margin-bottom: 18px;
  }

  .bb-gridpro-catalog-prototype .uk-subnav > * > *,
  .bb-gridpro-catalog-prototype .el-nav.uk-tab > * > * {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 13px;
  }

  .bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog {
    padding: 12px;
  }

  .bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .uk-card-body {
    padding: 12px 0 0;
    gap: 6px;
  }

  .bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .uk-card-title,
  .bb-gridpro-catalog-prototype .bb-prodcard--gridpro-catalog .el-title {
    font-size: 21px;
  }
}

/* ==========================================================
   MERKLISTE (Issue #113) — Plus-Button, Sticky-Badge, Overlay
   ========================================================== */

/* Plus-Button auf Produktkarten (per JS in .bb-prodcard__media injiziert) */
.bb-prodcard__media { position: relative; }
.bb-prodcard__add {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 10px;
  background: rgba(255, 253, 247, 0.96);
  color: var(--bb-ink);
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  font-family: var(--bb-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(43, 29, 18, 0.12);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.bb-prodcard__add:hover,
.bb-prodcard__add:focus-visible {
  background: var(--bb-accent);
  color: #fff;
  border-color: var(--bb-accent);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(43, 29, 18, 0.18);
}
.bb-prodcard__add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bb-accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.bb-prodcard__add:hover .bb-prodcard__add-icon,
.bb-prodcard__add:focus-visible .bb-prodcard__add-icon {
  background: #fff;
  color: var(--bb-accent);
}
.bb-prodcard__add.is-added {
  background: var(--bb-teal);
  color: #fff;
  border-color: var(--bb-teal);
  animation: bbAddPulse 0.6s ease;
}
.bb-prodcard__add.is-added .bb-prodcard__add-icon { background: #fff; color: var(--bb-teal); }
.bb-prodcard__add.is-added .bb-prodcard__add-label::before {
  content: '✓ ';
}
@keyframes bbAddPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Sticky Mini-Badge */
.bb-merk-badge {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1100;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 12px 14px;
  background: var(--bb-teal);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--bb-serif-display);
  font-size: 16px;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(43, 29, 18, 0.22);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.bb-merk-badge.is-visible { display: inline-flex; }
.bb-merk-badge:hover,
.bb-merk-badge:focus-visible {
  background: var(--bb-teal-bright);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(43, 29, 18, 0.28);
}
.bb-merk-badge__icon { font-size: 18px; line-height: 1; }
.bb-merk-badge__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: #fff;
  color: var(--bb-teal);
  border-radius: 999px;
  font-family: var(--bb-mono);
  font-size: 13px;
  font-weight: 700;
}
.bb-merk-badge.is-bounce { animation: bbBadgeBounce 0.55s ease; }
@keyframes bbBadgeBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  60%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* Overlay */
.bb-merk-overlay {
  position: fixed;
  bottom: 84px;
  right: 24px;
  z-index: 1101;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--bb-paper);
  color: var(--bb-ink);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  box-shadow: 0 18px 40px rgba(43, 29, 18, 0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.bb-merk-overlay.is-open { opacity: 1; transform: translateY(0); }
.bb-merk-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bb-line);
}
.bb-merk-overlay__title {
  font-family: var(--bb-serif-display);
  font-size: 18px;
  letter-spacing: 0.02em;
}
.bb-merk-overlay__close {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--bb-ink-mute);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.bb-merk-overlay__close:hover { color: var(--bb-ink); background: var(--bb-bg-alt); }

.bb-merk-overlay__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1;
}
.bb-merk-overlay__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bb-line);
}
.bb-merk-overlay__item:last-child { border-bottom: 0; }
.bb-merk-overlay__item-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.bb-merk-overlay__item-name {
  font-family: var(--bb-serif-body);
  font-size: 15px;
  line-height: 1.3;
}
.bb-merk-overlay__item-meta {
  font-family: var(--bb-mono);
  font-size: 12px;
  line-height: 1.2;
  color: var(--bb-ink-mute);
}
.bb-merk-overlay__item-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bb-merk-overlay__qty,
.bb-merk-overlay__remove {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-bg-alt);
  color: var(--bb-ink);
  border: 1px solid var(--bb-line);
  border-radius: 6px;
  font-family: var(--bb-mono);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.bb-merk-overlay__qty:hover { background: var(--bb-accent); color: #fff; border-color: var(--bb-accent); }
.bb-merk-overlay__remove { margin-left: 4px; }
.bb-merk-overlay__remove:hover { background: #b54343; color: #fff; border-color: #b54343; }
.bb-merk-overlay__menge {
  min-width: 24px;
  text-align: center;
  font-family: var(--bb-mono);
  font-size: 14px;
  font-weight: 600;
}
.bb-merk-overlay__empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--bb-ink-mute);
  font-style: italic;
}
.bb-merk-overlay__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--bb-line);
  background: var(--bb-bg-alt);
  border-radius: 0 0 var(--bb-radius-lg) var(--bb-radius-lg);
}
.bb-merk-overlay__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: var(--bb-accent);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--bb-serif-display);
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, transform 0.15s ease;
}
.bb-merk-overlay__cta:hover { background: var(--bb-accent-2); color: #fff; transform: translateY(-1px); }
.bb-merk-overlay__clear {
  background: transparent;
  border: 0;
  color: var(--bb-ink-mute);
  font-family: var(--bb-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 4px;
}
.bb-merk-overlay__clear:hover { color: var(--bb-ink); }

@media (max-width: 640px) {
  .bb-merk-badge { bottom: 16px; right: 16px; padding: 10px 14px 10px 12px; font-size: 14px; }
  .bb-merk-overlay { bottom: 70px; right: 16px; width: calc(100vw - 32px); }
  .bb-prodcard__add { padding: 6px 10px 6px 8px; font-size: 13px; }
  .bb-prodcard__add-label { display: none; }
}

/* ==========================================================
   Issue #112: Sektionsfarben Petrol + Warm-Beige
   ----------------------------------------------------------
   bb-section-petrol  → Engagement/Formulare (ersetzt bb-dark-section
                        auf Kontakt + Bestellen). Form-, Button- und
                        Focus-Styles werden mit den bb-dark-section-
                        Selektoren weiter oben geteilt.
   bb-section-warm    → Story-Sektionen, Betonung, Nav-Kacheln
   ========================================================== */

.bb-section-petrol {
  background: var(--bb-petrol) !important;
  color: var(--bb-bg);
}
.bb-section-petrol h1,
.bb-section-petrol h2,
.bb-section-petrol h3,
.bb-section-petrol h4,
.bb-section-petrol [class*="uk-heading"] { color: var(--bb-bg); }
.bb-section-petrol .bb-eyebrow { color: var(--bb-teal-bright); }
.bb-section-petrol .bb-lede { color: color-mix(in oklab, var(--bb-bg) 75%, transparent); }
.bb-section-petrol em.bb-italic { color: var(--bb-teal-bright) !important; }
.bb-section-petrol .bb-required-marker { color: var(--bb-teal-bright); }

.bb-section-warm {
  background: var(--bb-warm) !important;
}


/* ==========================================================
   Issue #132: FAQ – Akkordeon-Titel Mobile-Schriftgröße
   UIkit setzt @global-medium-font-size (28 px) als Basis.
   Auf 390 px Mobile ist 28 px für Frage-Titel zu groß –
   fast jeder Titel bricht in zwei Zeilen um.
   Klassische Skalierung: Desktop 28 px (UIkit-Standard),
   Tablet 22 px, Mobile 19 px.
   ========================================================== */

@media (min-width: 640px) and (max-width: 959px) {
  .uk-accordion-title {
    font-size: 22px !important;
  }
}

@media (max-width: 639px) {
  .uk-accordion-title {
    font-size: 19px !important;
  }
}

.uk-navbar-dropdown-nav {
  font-size: 16px;
}