/* ART Bakery – Main CSS
   Farbsystem: Fresh Mint #A8DCC6 (Primär) + Dark Forest #1F2E22 (Akzent/Unten)
   WCAG AA: alle Kontraste ≥ 4.5:1 (Text) / 3:1 (UI/Fokus) — DEC-007 (2026-08-17)
*/

:root {
  --mint:      #A8DCC6;
  --mint-d:    #7fc4ae;
  --mint-l:    #caeee0;
  --mint-bg:   #ddf3eb;
  --sage:      #C0C18E;
  --sage-d:    #9a9b6a;
  --sage-l:    #d8d9a8;
  --sage-bg:   #e4e5c8;
  --dark:      #1F2E22;
  --terra:     #C8622A;
  --terra-btn: #a04d20; /* WCAG AA: 5.87:1 auf Weiss */
  --terra-d:   #8a3e18;
  --terra-bg:  #F3E2D3;
  --bg:        #F6F9F8;
  --bg2:       #ECF3F0;
  --txt:       #2a2a24;
  --txt-m:     #5a5a50;
  --txt-l:     #8a8a78;
  --rule:      rgba(31,46,34,.12);
  --w:         #ffffff;
  --fs:        'Playfair Display', Georgia, serif;
  --fn:        'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ease:      cubic-bezier(.22,.68,0,1.2);
  --section-px: clamp(32px, 5vw, 72px);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fn);
  background: var(--bg);
  color: var(--txt);
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ─── SCREEN-READER ONLY ─── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── SKIP LINK ─── */
.skip-link {
  position: absolute; top: -999px; left: 8px;
  background: var(--dark); color: var(--w);
  padding: 8px 16px; font-size: 13px; border-radius: 2px; z-index: 9999;
}
.skip-link:focus { top: 8px; }

/* ─── TOP BAR ─── */
.ab-topbar {
  background: var(--mint);
  display: flex; align-items: center; justify-content: center;
  padding: 9px 40px; gap: 24px; position: relative;
}
.ab-topbar__text {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dark);
}
.ab-topbar__dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--dark); opacity: .45; flex-shrink: 0;
}
.ab-topbar__ig {
  display: flex; align-items: center; gap: 6px;
  color: var(--dark); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  transition: opacity .2s; position: absolute; right: 40px;
}
.ab-topbar__ig:hover { opacity: .75; }
.ab-topbar__ig svg { width: 14px; height: 14px; }

/* ─── NAV ─── */
.ab-nav {
  background: var(--mint);
  box-shadow: 0 2px 12px rgba(31,46,34,.08);
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--section-px); height: 72px;
}
.ab-nav__logo { display: flex; align-items: center; }
.ab-nav__logo img {
  height: 52px; width: auto;
}
.ab-nav__links {
  display: flex; align-items: center; gap: 24px; list-style: none;
}
.ab-nav__links a {
  color: var(--dark); font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
  transition: opacity .2s; opacity: .85;
}
.ab-nav__links a:hover { opacity: 1; }
.ab-nav__actions { display: flex; align-items: center; gap: 10px; }
.btn-nav {
  display: inline-flex; align-items: center; gap: 10px;
  background: #052F14; color: var(--w); border: none;
  padding: 12px 20px; font-size: 13px; font-weight: 500; letter-spacing: .04em;
  text-decoration: none; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
  transition: gap .2s var(--ease), background .2s var(--ease);
}
.btn-nav:hover { background: var(--mint); color: var(--dark); box-shadow: 0 4px 14px rgba(31,46,34,.35), 0 0 0 1.5px var(--dark) inset; }
.btn-nav svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-nav__arrow { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.btn-nav:hover .btn-nav__arrow { transform: translate(2px,-2px); }
.btn-lang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--dark); color: var(--dark);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s, color .2s; flex-shrink: 0;
}
.btn-lang:hover { background: rgba(31,46,34,.08); color: var(--dark); }
.ab-cart {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  color: var(--dark); flex-shrink: 0;
  transition: background .2s, color .2s;
}
.ab-cart:hover { background: rgba(31,46,34,.08); }
.ab-cart svg { width: 27px; height: 27px; }
.ab-cart--catalog { display: inline-flex; }
@media (max-width: 767px) {
  .ab-cart--catalog { display: inline-flex; }
  .ab-nav__actions .ab-cart { width: auto; min-width: 44px; gap: 5px; border-radius: 8px; }
  .ab-nav__actions { gap: 6px; }
  .ab-nav__actions .ab-nav__burger { order: 2; }
}
.ab-cart__badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 20px; height: 20px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: #052F14; color: var(--w);
  font-size: 12px; font-weight: 700; line-height: 1;
  border-radius: 999px; border: 2px solid var(--mint-bg, #F2F7F4);
}
/* Kurzer Puls, sobald das Badge nach "In den Warenkorb" per AJAX
   aktualisiert wird (main.js, wc_fragments_refreshed). Bug-Fix
   2026-09-11: Badge zeigte vorher permanent "0". */
.ab-cart__badge.is-updated {
  animation: ab-cart-badge-pulse .4s var(--ease, ease-out);
}
@keyframes ab-cart-badge-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ab-cart__badge.is-updated { animation: none; }
}

/* ─── HAMBURGER ─── */
.ab-nav__burger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 6px; background: none; border: none; z-index: 200;
}
.ab-nav__burger span {
  display: block; width: 24px; height: 2px;
  background: var(--dark); border-radius: 1px;
  transition: transform .3s, opacity .3s;
}
.ab-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ab-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.ab-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── MOBILE MENU ─── */
.ab-mobile-menu {
  display: none; position: fixed; inset: 0;
  background: var(--mint); z-index: 150;
  flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 80px 24px 40px;
}
.ab-mobile-menu.is-open { display: flex; }

.ab-mobile-menu__close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 8px;
  color: var(--dark);
}
.ab-mobile-menu__close svg { width: 24px; height: 24px; }

.ab-mobile-menu__logo {
  height: 64px; width: auto; margin-bottom: 12px;
  mix-blend-mode: multiply;
}
.ab-mobile-menu a {
  color: var(--dark); font-size: 20px; letter-spacing: .08em; text-transform: uppercase;
  padding: 16px 0; border-bottom: 1px solid rgba(31,46,34,.12);
  width: 100%; max-width: 280px; text-align: center; transition: opacity .2s;
}
.ab-mobile-menu a:first-of-type { border-top: 1px solid rgba(31,46,34,.12); }
.ab-mobile-menu a:hover { opacity: .6; }
.ab-mobile-menu__actions {
  display: flex; flex-direction: column; gap: 14px; margin-top: 32px;
  align-items: center; width: 100%; max-width: 280px;
}
.ab-mobile-menu__actions .btn-lang {
  width: auto; height: auto; border-radius: 999px;
  padding: 10px 22px; font-size: 12px;
  border: 1.5px solid var(--dark);
}
.ab-mobile-menu__actions .btn-nav {
  white-space: nowrap; width: 100%; text-align: center; justify-content: center;
  padding-top: 15px; padding-bottom: 15px;
  padding-left: 24px; padding-right: 24px;
  color: var(--w);
  box-shadow: 0 6px 18px rgba(5,47,20,.28);
}
.ab-mobile-menu__actions .btn-nav:hover { box-shadow: 0 8px 22px rgba(5,47,20,.34); }

/* ─── BUTTONS ─── */
.btn-fill {
  background: #052F14; color: var(--w); border: none;
  padding: 15px 32px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 2px; cursor: pointer; transition: background .2s; display: inline-block;
}
.btn-fill:hover { background: var(--mint); color: var(--dark); }
.btn-outline {
  background: transparent; color: var(--dark); border: 1px solid var(--dark);
  padding: 15px 32px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 2px; cursor: pointer; transition: border-color .2s, background .2s; display: inline-block;
}
.btn-outline:hover { background: var(--dark); color: var(--w); }
.btn-sage {
  background: var(--mint); color: var(--dark); border: none;
  padding: 15px 32px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 2px; cursor: pointer; transition: background .2s; display: inline-block;
}
.btn-sage:hover { background: var(--mint-d); color: var(--dark); }

/* ─── EYEBROW / SECTION LABELS ─── */
/* terra #C8622A auf bg #F2EDE4 wäre 3.5:1 – terra-d #8a3e18 ergibt 6.6:1 */
.eyebrow {
  font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
  color: #052F14; margin-bottom: 20px; display: block;
}
.sec-h {
  font-family: var(--fs); font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--dark);
  text-wrap: balance; margin-bottom: 16px;
}
.sec-t {
  font-size: 16px; line-height: 1.8; color: var(--txt-m);
  max-width: 400px; margin-bottom: 36px;
}

/* ─── HERO — Full-Bleed Editorial: dunkles Overlay, Playfair weiss ─── */
.ab-hero {
  position: relative;
  min-height: 88vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

.ab-hero::before { display: none; }

/* Foto: voller Hintergrund */
.ab-hero__image { position: absolute; inset: -48px 0 0; z-index: 0; }
.ab-hero__image img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% center;
}
.ab-hero__image-overlay { display: none; }

/* Content: direkt auf dem Foto */
.ab-hero__content {
  position: relative; z-index: 2;
  width: auto; max-width: 800px;
  padding: clamp(64px,7vw,112px) var(--section-px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
}

.ab-hero__content::before { display: none; }
.ab-hero__content::after { display: none; }
.ab-hero__content > * { position: relative; z-index: 1; }

.ab-hero__eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 18px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--w); margin-bottom: 40px; margin-top: 16px;
  background: rgba(255,255,255,.10); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.28);
  padding: 8px 22px; border-radius: 999px;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

/* Titel: weiss auf dunklem Overlay, Playfair Display */
.ab-hero__title {
  font-family: var(--fs);
  font-size: clamp(56px, 8.5vw, 128px);
  font-weight: 700; line-height: .98; letter-spacing: -.03em;
  color: #a8dcc7; margin-bottom: 36px;
  text-shadow: 0 4px 24px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.45);
}
.ab-hero__title span { display: block; }

.ab-hero__sub {
  font-size: 17px; line-height: 1.75; color: #fff;
  max-width: 480px; margin: 0 auto 56px;
  text-shadow: 0 2px 14px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5);
}
.ab-hero__actions { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-bottom: 0; }
.ab-hero__actions .btn-fill,
.ab-hero__actions .btn-outline {
  padding: 18px 42px; font-size: 16px; letter-spacing: .1em; border-radius: 999px;
}
.ab-hero__content .btn-outline { border-width: 1.5px; }
.ab-hero__content .btn-outline { border-color: rgba(255,255,255,.42); color: var(--w); }
.ab-hero__content .btn-outline:hover { background: var(--mint); border-color: var(--mint); color: var(--dark); }

.ab-hero__loc {
  display: flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,.45); font-size: 11px; letter-spacing: .09em;
}
.ab-hero__loc svg { width: 12px; height: 12px; color: var(--mint); }

/* Caption: rechts unten */
.ab-hero__caption {
  position: absolute; bottom: 32px; right: 32px; z-index: 3;
  background: var(--mint); backdrop-filter: blur(4px);
  padding: 11px 18px; font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--dark);
}

/* Popup-Teaser Pill im Hero */
.ab-hero__teaser {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(168,220,198,.12);
  border: 1px solid rgba(168,220,198,.28);
  color: var(--mint); text-decoration: none;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 12px 7px 10px; margin-bottom: 22px;
  transition: background .2s, border-color .2s;
  width: fit-content;
}
.ab-hero__teaser:hover { background: rgba(168,220,198,.2); border-color: rgba(168,220,198,.45); }
.ab-hero__teaser-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--terra); flex-shrink: 0;
}

/* ─── STRIP ─── */
.ab-strip {
  background: var(--mint-bg);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(24px, 4vw, 64px); padding: 14px var(--section-px); overflow: hidden;
}
.ab-strip__item {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dark); white-space: nowrap;
}
.ab-strip__item svg { width: 14px; height: 14px; color: var(--terra); opacity: .85; }

/* ─── TAGESZEITEN ─── */
.ab-tz { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px,0.75vw,10px); background: var(--bg); position: relative; margin-top: 14px; }
.ab-tz__card {
  --card-px: var(--section-px);
  --card-pt: clamp(28px,4vw,44px);
  background: var(--w);
  padding: var(--card-pt) var(--card-px) clamp(32px,4vw,48px);
  border-radius: 20px 20px 24px 24px;
  box-shadow: 0 1px 3px rgba(31,46,34,.08);
  position: relative; overflow: hidden; transition: background .25s, box-shadow .25s;
}
.ab-tz__card:hover { background: var(--mint-bg); box-shadow: 0 8px 24px rgba(31,46,34,.14); }
.ab-tz__card:hover .ab-tz__text { color: var(--txt); }
.ab-tz__card:hover .ab-tz__title { color: var(--dark); }
.ab-tz__card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  height: 4px; background: var(--mint);
}
/* terra #C8622A auf sage #C0C18E wäre 2.2:1 – dark #1F2E22 ergibt 8.5:1 */
.ab-tz__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #052F14; margin-bottom: 18px; display: block; }
.ab-tz__thumb {
  width: calc(100% + 2 * var(--card-px));
  height: clamp(180px, 22vw, 260px);
  border-radius: 20px 20px 0 0;
  margin-top: calc(-1 * var(--card-pt));
  margin-left: calc(-1 * var(--card-px));
  margin-bottom: 24px;
  border: none;
  overflow: hidden;
  background: var(--mint);
}
.ab-tz__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-tz__title {
  font-family: var(--fs); font-size: clamp(26px,3vw,40px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #052F14; margin-bottom: 14px; transition: color .25s;
}
/* txt-m #5a5a50 auf sage #C0C18E wäre 3.8:1 – txt #2a2a24 ergibt 7.8:1 */
.ab-tz__text { font-size: 16px; line-height: 1.8; color: var(--txt); margin-bottom: 28px; transition: color .25s; }
.ab-tz__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid rgba(31,46,34,.2); border-radius: 50%;
  font-size: 14px; color: var(--txt-l); transition: background .2s, color .2s, border-color .2s;
}
.ab-tz__card:hover .ab-tz__arrow { background: var(--mint); color: var(--dark); border-color: var(--mint); }

/* Vierte Akzent-Kachel (Abend/Relax) – mint, mit Thumbnail */
.ab-tz:has(.ab-tz__card--accent) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-tz__card--accent {
  background: var(--mint);
}
.ab-tz__card--accent::before { background: var(--dark); }
.ab-tz__card--accent:hover { background: var(--mint-d); box-shadow: 0 8px 24px rgba(31,46,34,.14); }
.ab-tz__card--accent .ab-tz__label { color: #052F14; }
.ab-tz__card--accent .ab-tz__title,
.ab-tz__card--accent:hover .ab-tz__title { color: #052F14; }
.ab-tz__card--accent .ab-tz__text,
.ab-tz__card--accent:hover .ab-tz__text { color: var(--txt); }
.ab-tz__card--accent .ab-tz__arrow { border-color: rgba(31,46,34,.3); color: var(--dark); }
.ab-tz__card--accent:hover .ab-tz__arrow { background: var(--dark); color: var(--mint); border-color: var(--dark); }

/* ─── MARQUEE TICKER ─── */
.ab-marquee {
  background: var(--terra);
  overflow: hidden;
  padding: 14px 0;
  position: relative;
}
.ab-marquee__track {
  display: inline-flex; align-items: center;
  animation: ab-marquee-scroll 48s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.ab-marquee__track span {
  padding: 0 36px;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--w); font-weight: 500;
}
.ab-marquee__sep { padding: 0 4px !important; color: rgba(255,255,255,.4) !important; }
@keyframes ab-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ab-marquee__track { animation: none; }
}

/* ─── POPUP (Standorte, kompakt elegant) ─── */
.ab-popup {
  background: #fff;
  padding: clamp(44px,5vw,72px) var(--section-px);
  border-top: 1px solid rgba(168,220,198,.35);
}
.ab-popup__inner { max-width: none; }

.ab-popup__header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: clamp(28px,4vw,48px);
  padding-bottom: clamp(20px,3vw,32px);
  border-bottom: 1px solid rgba(31,46,34,.08);
}
.ab-popup__header-text { flex: 1; }
.ab-popup__eyebrow {
  display: block;
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  color: #052F14; margin-bottom: 12px;
}
.ab-popup__title {
  font-family: var(--fs);
  font-size: clamp(28px,3.5vw,48px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.025em;
  color: var(--dark); margin-bottom: 10px;
  text-wrap: balance;
}
.ab-popup__intro {
  font-size: 15px; line-height: 1.65;
  color: rgba(31,46,34,.68); max-width: 460px;
}

/* Datum-Stempel rechts */
.ab-popup__date {
  flex-shrink: 0; text-align: right;
  padding-right: 18px;
  border-right: 2px solid var(--mint);
}
.ab-popup__date-num {
  display: block;
  font-family: var(--fs);
  font-size: clamp(44px,5.5vw,76px);
  font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--mint);
}
.ab-popup__date-mon {
  display: block;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(31,46,34,.68); line-height: 1.5; margin-top: 3px;
}

/* Karten-Grid */
.ab-popup__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px,2vw,24px);
}
.ab-popup__card {
  padding: clamp(28px,3.5vw,44px);
  display: flex; flex-direction: column;
  border-radius: 20px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ab-popup__card--do {
  background: var(--mint);
}
.ab-popup__card--di {
  background: var(--mint);
}
.ab-popup__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(31,46,34,.14);
}

.ab-popup__card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: clamp(28px,4vw,44px);
}
.ab-popup__card-day { display: flex; flex-direction: column; }
.ab-popup__card-weekday {
  display: block;
  font-family: var(--fs);
  font-size: clamp(48px,6vw,72px);
  line-height: 1; letter-spacing: -.03em; font-weight: 700;
}
.ab-popup__card--do .ab-popup__card-weekday { color: var(--dark); }
.ab-popup__card--di .ab-popup__card-weekday { color: var(--dark); }

.ab-popup__card-dayname {
  display: block;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  margin-top: 6px;
}
.ab-popup__card--do .ab-popup__card-dayname { color: rgba(31,46,34,.75); }
.ab-popup__card--di .ab-popup__card-dayname { color: rgba(31,46,34,.75); }

.ab-popup__card-time {
  flex-shrink: 0;
  font-family: var(--fs);
  font-size: clamp(22px,2.6vw,28px);
  font-weight: 700; line-height: 1; letter-spacing: -.02em;
  padding: 10px 16px; border-radius: 999px;
}
.ab-popup__card--do .ab-popup__card-time { background: rgba(255,255,255,.55); color: var(--dark); }
.ab-popup__card--di .ab-popup__card-time { background: rgba(255,255,255,.55); color: var(--dark); }
.ab-popup__card-time-unit {
  font-family: var(--fn);
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  margin-left: 3px;
}

.ab-popup__card-addr {
  font-style: normal;
  margin-bottom: clamp(18px,2.2vw,24px);
}
.ab-popup__card-addr strong {
  display: block;
  font-family: var(--fs);
  font-size: clamp(22px,2.4vw,26px); font-weight: 700; letter-spacing: -.01em;
  margin-bottom: 8px;
}
.ab-popup__card--do .ab-popup__card-addr strong { color: var(--dark); }
.ab-popup__card--di .ab-popup__card-addr strong { color: var(--dark); }
.ab-popup__card-addr span {
  display: block; font-size: 15px; line-height: 1.6;
}
.ab-popup__card--do .ab-popup__card-addr span { color: rgba(31,46,34,.75); }
.ab-popup__card--di .ab-popup__card-addr span { color: rgba(31,46,34,.75); }

.ab-popup__card-photo {
  height: clamp(187px,21.3vw,253px);
  border-radius: 14px; overflow: hidden;
  margin-bottom: clamp(14px,1.8vw,18px);
}
.ab-popup__card-photo img { width: 100%; height: 100%; object-fit: cover; }

.ab-popup__card-map {
  height: clamp(187px,21.3vw,253px);
  border-radius: 14px; overflow: hidden;
  margin-bottom: clamp(18px,2.2vw,24px);
  filter: grayscale(.15) contrast(1.02);
}
.ab-popup__card--do .ab-popup__card-map { border: 1px solid rgba(31,46,34,.14); }
.ab-popup__card--di .ab-popup__card-map { border: 1px solid rgba(31,46,34,.14); }
.ab-popup__card-map iframe {
  width: 100%; height: 100%; display: block; border: 0;
}

.ab-popup__card-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  text-decoration: none;
  padding: 14px 20px; border-radius: 999px;
  transition: gap .2s var(--ease), background .2s var(--ease);
  cursor: pointer; align-self: flex-start;
}
.ab-popup__card--do .ab-popup__card-link { background: var(--dark); color: var(--w); }
.ab-popup__card--do .ab-popup__card-link:hover { background: #14201a; }
.ab-popup__card--di .ab-popup__card-link { background: var(--dark); color: var(--w); }
.ab-popup__card--di .ab-popup__card-link:hover { background: #14201a; }
.ab-popup__card-link:hover .ab-popup__card-link-arrow { transform: translate(2px,-2px); }
.ab-popup__card-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.ab-popup__card-link-arrow { width: 13px; height: 13px; transition: transform .2s var(--ease); }

/* ─── POPUP SOLO (nur 1 Standort aktiv) ───
   Eigenständiges Split-Panel im Stil von .ab-kaffee: volle Sektionsbreite,
   Mint als dominante Fläche (wie im Rest der Seite), links Content in
   Dark-Text, rechts full-bleed Foto. Bewusst KEINE geschrumpfte Version
   der 2er-Grid-Karte — sonst wirkt sie wie ein Rest statt wie ein
   eigenständig gestaltetes Element. */
.ab-popup-solo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  max-width: none;
  margin: clamp(4px,1vw,8px) calc(-1 * var(--section-px)) 0;
  background: var(--mint);
  border-radius: 0;
  overflow: hidden;
}
.ab-popup-solo--no-photo {
  grid-template-columns: 1fr;
  min-height: 0;
}
.ab-popup-solo__content {
  padding: clamp(40px,5vw,64px) clamp(32px,4vw,56px);
  display: flex; flex-direction: column; justify-content: center;
}
.ab-popup-solo--no-photo .ab-popup-solo__content {
  max-width: 620px; margin: 0 auto;
  text-align: left;
}

.ab-popup-solo__meta {
  display: flex; align-items: center; gap: clamp(20px,2.6vw,32px);
  margin-bottom: clamp(24px,3vw,32px);
  padding-bottom: clamp(24px,3vw,32px);
  border-bottom: 1px solid rgba(31,46,34,.16);
}
.ab-popup-solo__day { display: flex; flex-direction: column; }
.ab-popup-solo__day-kurz {
  font-family: var(--fs);
  font-size: clamp(52px,6.5vw,78px);
  font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--dark);
}
.ab-popup-solo__day-lang {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(31,46,34,.75); margin-top: 6px;
}
.ab-popup-solo__time {
  font-family: var(--fs);
  font-size: clamp(22px,2.6vw,28px);
  font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: var(--dark); background: rgba(255,255,255,.55);
  padding: 12px 20px; border-radius: 999px;
}
.ab-popup-solo__time-unit {
  font-family: var(--fn);
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  margin-left: 3px;
}

.ab-popup-solo__addr {
  font-style: normal;
  margin-bottom: clamp(24px,3vw,32px);
}
.ab-popup-solo__addr strong {
  display: block;
  font-family: var(--fs);
  font-size: clamp(22px,2.4vw,27px); font-weight: 700; letter-spacing: -.01em;
  color: var(--dark); margin-bottom: 8px;
}
.ab-popup-solo__addr span {
  display: block; font-size: 15px; line-height: 1.6;
  color: rgba(31,46,34,.75);
}

.ab-popup-solo__map {
  height: clamp(160px,15vw,200px);
  border-radius: 14px; overflow: hidden;
  margin-bottom: clamp(24px,3vw,32px);
  filter: grayscale(.15) contrast(1.02);
  border: 1px solid rgba(31,46,34,.14);
}
.ab-popup-solo__map iframe { width: 100%; height: 100%; display: block; border: 0; }

.ab-popup-solo__link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  text-decoration: none; color: var(--w); background: var(--dark);
  padding: 15px 22px; border-radius: 999px;
  transition: gap .2s var(--ease), background .2s var(--ease);
  cursor: pointer; align-self: flex-start;
}
.ab-popup-solo__link:hover { background: #14201a; }
.ab-popup-solo__link:hover .ab-popup-solo__link-arrow { transform: translate(2px,-2px); }
.ab-popup-solo__link svg { width: 16px; height: 16px; flex-shrink: 0; }
.ab-popup-solo__link-arrow { width: 13px; height: 13px; transition: transform .2s var(--ease); }

.ab-popup-solo__photo { position: relative; overflow: hidden; background: var(--dark); }
.ab-popup-solo__photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-popup-solo__photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--mint) 0%, transparent 22%);
}

/* ─── BROT ─── */
/* (Hinweis: Popup Mobile-Responsive weiter unten im @media Block) */
.ab-brot { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--bg); }
.ab-brot__left { background: var(--mint); padding: clamp(44px,6vw,84px) var(--section-px); display: flex; flex-direction: column; justify-content: center; }
.ab-brot__title {
  font-family: var(--fs); font-size: clamp(28px,3.5vw,48px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--dark); text-wrap: balance; margin-bottom: 14px;
}
.ab-brot__sub { font-size: 16px; line-height: 1.8; color: var(--dark); margin-bottom: 36px; }
.ab-brot__features { display: flex; flex-direction: column; gap: 16px; }
.ab-brot__feat { display: flex; align-items: center; gap: 12px; color: var(--dark); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.ab-brot__feat-ico {
  width: 32px; height: 32px; border: 1px solid rgba(31,46,34,.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ab-brot__feat-ico svg { width: 12px; height: 12px; color: var(--dark); }
.ab-brot__photo { position: relative; overflow: hidden; background: var(--dark); }
.ab-brot__photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-brot__photo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.25) 100%); }
.ab-brot__right {
  background: var(--bg);
  padding: clamp(36px,4vw,60px) clamp(28px,4vw,58px); display: flex; flex-direction: column; justify-content: center;
}
.ab-brot__right-title {
  font-family: var(--fs); font-size: clamp(26px,3vw,42px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--dark); text-wrap: balance; margin-bottom: 14px;
}
.ab-brot__right-intro { font-size: 15px; line-height: 1.65; color: var(--txt-m); margin-bottom: 20px; }
.ab-brot__product-list { border-top: 1px solid var(--rule); }
.ab-brot__product {
  display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--rule); color: var(--dark); text-decoration: none;
  transition: gap .2s var(--ease);
}
.ab-brot__product:hover { gap: 16px; }
.ab-brot__product:focus-visible { outline-offset: 3px; }
.ab-brot__product-image { width: 180px; height: 132px; overflow: hidden; border-radius: 3px; background: var(--mint-bg); }
.ab-brot__product-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-brot__product-copy { min-width: 0; }
.ab-brot__product-copy strong { display: block; font-family: var(--fs); font-size: 19px; font-weight: 700; line-height: 1.15; }
.ab-brot__product-copy span { display: block; margin-top: 4px; color: var(--txt-m); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ab-brot__product-arrow { color: var(--terra); font-size: 22px; line-height: 1; }
.ab-brot__right-note { margin: 18px 0 0; color: var(--txt-m); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* ─── PRODUKTDETAIL: ZURÜCK ZUM SORTIMENT ─── */
.ab-product-navigation { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.ab-product-navigation a, .ab-product-navigation > span {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border-radius: 999px;
  background: var(--mint); color: var(--dark); font-size: 13px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  line-height: normal; text-decoration: none; text-align: center;
  transition: background .2s, box-shadow .2s;
}
.ab-product-navigation a:hover { background: var(--mint-d); box-shadow: 0 4px 12px rgba(31,46,34,.12); }
.ab-product-navigation a:focus-visible { outline: 2px solid var(--dark); outline-offset: 4px; }
.ab-product-navigation > span { opacity: .4; }
.ab-product-navigation .ab-product-catalog-link { margin: 0; text-align: center; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
@media (max-width: 767px) {
  .ab-product-navigation { flex-wrap: wrap; gap: 16px; }
  .ab-product-navigation .ab-product-catalog-link { order: -1; width: 100%; justify-content: center; }
  .ab-product-navigation a, .ab-product-navigation > span { font-size: 13px; padding: 13px 22px; flex: 1; }
  .ab-product-navigation .ab-product-catalog-link { flex-basis: 100%; }
}
.ab-product-catalog-link {
  display: inline-flex; align-items: center; gap: 11px; margin: 0 0 32px;
  color: var(--dark); font-size: 15px; font-weight: 600; letter-spacing: .07em;
  text-decoration: none; text-transform: uppercase;
}
.ab-product-catalog-link span { color: var(--terra); font-size: 26px; line-height: 1; transition: transform .2s var(--ease); }
.ab-product-catalog-link:hover span { transform: translateX(3px); }
.ab-product-catalog-link:focus-visible { outline-offset: 4px; }

@media (max-width: 680px) {
  .ab-brot__product { grid-template-columns: 180px 1fr auto; gap: 14px; }
  .ab-brot__product-image { width: 180px; height: 132px; }
}

/* ─── PARTNER ─── */
.ab-partner { background: var(--w); padding: clamp(60px,7vw,96px) var(--section-px); }
.ab-partner__hdr { margin-bottom: 40px; display: flex; align-items: center; gap: 18px; }
/* txt-l auf sage-bg wäre 2.7:1 – txt-m ergibt 5.1:1 */
.ab-partner__label { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: #052F14; }
.ab-partner__rule { flex: 1; height: 1px; background: var(--rule); }
.ab-partner__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: rgba(168,220,198,.35); }
.ab-partner__card { background: var(--w); overflow: hidden; transition: background .2s; display: flex; flex-direction: column; }
.ab-partner__card:hover { background: var(--mint-l); }
.ab-partner__photo { height: 180px; position: relative; overflow: hidden; background: var(--dark); }
.ab-partner__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.ab-partner__card:hover .ab-partner__photo img { transform: scale(1.04); }
.ab-partner__photo-overlay { position: absolute; inset: 0; background: rgba(31,46,34,0); transition: background .3s; }
.ab-partner__card:hover .ab-partner__photo-overlay { background: rgba(31,46,34,.08); }
.ab-partner__tag { position: absolute; top: 12px; left: 12px; background: rgba(31,46,34,.7); color: var(--mint); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 8px; }
.ab-partner__info { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.ab-partner__name { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dark); margin-bottom: 7px; font-weight: 600; }
.ab-partner__desc { font-size: 14px; line-height: 1.65; color: var(--txt-m); flex: 1; }
.ab-partner__arr { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #052F14; margin-top: 16px; transition: gap .2s var(--ease); }
.ab-partner__card:hover .ab-partner__arr { gap: 10px; }

/* ─── KAFFEE ─── */
.ab-kaffee { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.ab-kaffee__content {
  background: var(--mint);
  padding: clamp(44px,6vw,84px) var(--section-px); display: flex; flex-direction: column; justify-content: center;
}
/* terra-d auf sage wäre 4.1:1 – dark ergibt 8.5:1 */
.ab-kaffee__content .eyebrow { color: #052F14; }
.ab-kaffee__title {
  font-family: var(--fs); font-size: clamp(28px,4vw,52px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--dark); text-wrap: balance; margin-bottom: 16px;
}
/* txt-m auf sage #C0C18E wäre 3.8:1 – txt #2a2a24 ergibt 7.8:1 */
.ab-kaffee__text { font-size: 16px; line-height: 1.8; color: var(--txt); max-width: 380px; margin-bottom: 32px; }
.ab-kaffee__detail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 36px; }
.ab-kaffee__detail-item { padding: 16px; background: rgba(31,46,34,.07); border-radius: 2px; }
.ab-kaffee__detail-lbl { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--dark); margin-bottom: 10px; }
.ab-kaffee__detail-val { font-family: var(--fn); font-size: 20px; line-height: 1.5; font-weight: 600; color: var(--dark); }
.ab-kaffee__photo { position: relative; overflow: hidden; background: var(--dark); }
.ab-kaffee__photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-kaffee__photo-overlay { position: absolute; inset: 0; background: linear-gradient(to left, transparent 55%, var(--mint) 100%); }

/* ─── STORY ─── */
.ab-story {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 560px;
  background: var(--w);
}
.ab-story__photos { display: grid; grid-template-columns: 2fr 1fr; order: 2; }
.ab-story__photo--main:only-child { grid-column: 1 / -1; }
.ab-story__content { order: 1; }
.ab-story__photo { position: relative; overflow: hidden; background: var(--dark); }
.ab-story__photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-story__photo-overlay { position: absolute; inset: 0; }
.ab-story__photo--main .ab-story__photo-overlay {
  background: linear-gradient(to left, transparent 55%, var(--w) 100%);
}
.ab-story__photo--side .ab-story__photo-overlay { background: rgba(31,46,34,.12); }
.ab-story__content {
  padding: clamp(44px,6vw,84px) var(--section-px); display: flex; flex-direction: column; justify-content: center;
}
.ab-story__content .eyebrow { color: #052F14; }
.ab-story__title {
  font-family: var(--fs); font-size: clamp(30px,4vw,52px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--dark); text-wrap: balance; margin-bottom: 20px;
}
/* Pull-Quote: Zitat mit Cabin Italic */
.ab-story__pullquote {
  font-family: var(--fn);
  font-size: clamp(16px, 1.8vw, 20px);
  font-style: italic; font-weight: 400; line-height: 1.65;
  color: #052F14;
  padding-left: 20px; border-left: 2px solid var(--terra);
  margin: 0 0 28px; max-width: 360px;
}
.ab-story__text { font-size: 16px; line-height: 1.85; color: rgba(31,46,34,.68); margin-bottom: 28px; }
.ab-story__text p { margin-bottom: 14px; }
.ab-story__text p:last-child { margin-bottom: 0; }
.ab-story__byline {
  font-size: 12px; color: rgba(31,46,34,.68); letter-spacing: .1em; text-transform: uppercase;
  padding-top: 20px; border-top: 1px solid rgba(31,46,34,.1); margin-bottom: 28px;
}

/* ─── MEISTER ─── */
.ab-meister {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 560px;
  background: var(--mint);
}
.ab-meister__photo {
  position: relative; overflow: hidden; background: var(--mint-d);
}
.ab-meister__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block;
}
.ab-meister__photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 55%, var(--mint) 100%);
}
.ab-meister__content {
  padding: clamp(48px,6vw,88px) var(--section-px);
  display: flex; flex-direction: column; justify-content: center;
}
.ab-meister__eyebrow {
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  color: #052F14; margin-bottom: 28px;
  display: flex; align-items: center; gap: 10px;
}
.ab-meister__eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--terra-d); opacity: .6; }
.ab-meister__head { margin-bottom: 28px; }
.ab-meister__name {
  font-family: var(--fs);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 700; line-height: 1.0; letter-spacing: -.025em;
  color: var(--dark); margin-bottom: 8px;
}
.ab-meister__titel {
  display: block; font-size: 14px; color: #052F14;
  letter-spacing: .06em; margin-bottom: 14px;
}
/* terra-d #8a3e18 auf mint #A8DCC6 ergibt 4.93:1 ✓ WCAG AA */
.ab-meister__badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dark); background: rgba(31,46,34,.07);
  border: 1px solid rgba(31,46,34,.18);
  padding: 5px 12px; border-radius: 2px;
}
.ab-meister__badge svg { flex-shrink: 0; }
.ab-meister__text { margin-bottom: 28px; }
.ab-meister__text p {
  font-size: 16px; line-height: 1.85; color: var(--dark);
  margin-bottom: 14px; max-width: 400px;
}
.ab-meister__text p:last-child { margin-bottom: 0; }
.ab-meister__zitat {
  font-family: var(--fn); font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 400; font-style: italic; line-height: 1.65;
  color: rgba(31,46,34,.88); margin: 0 0 28px;
  padding-left: 20px; border-left: 2px solid rgba(31,46,34,.35);
  max-width: 380px;
}
.ab-meister__link {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dark); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: opacity .2s;
}
.ab-meister__link:hover { opacity: .7; }

/* ─── FOOTER ─── */
.ab-footer {
  background: #052F14;
  border-top: 1px solid rgba(168,220,198,.15);
  padding: clamp(36px,4vw,52px) var(--section-px);
}
.ab-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 52px; }
.ab-footer__logo img { height: 72px; width: auto; margin-bottom: 16px; }
/* rgba(255,255,255,.4) auf dark wäre 4.0:1 – .6 ergibt 5.5:1 */
.ab-footer__tagline { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.6); margin-top: 14px; }
/* rgba(255,255,255,.35) auf dark wäre 3.5:1 – .6 ergibt 5.5:1 */
.ab-footer__col-title { font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 18px; display: block; }
.ab-footer__hours-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(168,220,198,.12); }
.ab-footer__hours-row:first-child { border-top: 1px solid rgba(168,220,198,.12); }
.ab-footer__hours-day { font-size: 16px; letter-spacing: .04em; color: rgba(255,255,255,.55); }
.ab-footer__hours-time { font-size: 16px; color: rgba(255,255,255,.9); white-space: nowrap; }
/* rgba(255,255,255,.3) auf dark wäre 3.0:1 – .6 ergibt 5.5:1 */
.ab-footer__hours-closed { font-size: 16px; color: rgba(255,255,255,.6); font-style: italic; }
.ab-footer__links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ab-footer__links a { color: rgba(255,255,255,.6); font-size: 16px; transition: color .2s; }
.ab-footer__links a:hover { color: var(--mint); }
.ab-footer__social { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.6); font-size: 16px; margin-bottom: 10px; transition: color .2s; }
.ab-footer__social:hover { color: var(--mint); }
.ab-footer__social svg { width: 15px; height: 15px; flex-shrink: 0; }
.ab-footer__bar { border-top: 1px solid rgba(168,220,198,.12); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
/* rgba(255,255,255,.3) auf dark wäre 3.0:1 – .55 ergibt 5.1:1 */
.ab-footer__copy { font-size: 14px; color: rgba(255,255,255,.55); letter-spacing: .04em; }
.ab-footer__open { font-size: 14px; color: var(--mint); letter-spacing: .1em; text-transform: uppercase; }

/* ─── RESPONSIVE ─── */
@media (max-width: 767px) {
  /* TOPBAR */
  .ab-topbar { padding: 8px 16px; gap: 12px; }
  .ab-topbar__text:nth-child(3),
  .ab-topbar__dot:nth-child(4) { display: none; }
  .ab-topbar__ig { display: none; }

  /* NAV */
  .ab-nav { padding: 0 var(--section-px); height: 64px; }
  .ab-nav__links { display: none; }
  .ab-nav__actions { display: flex; }
  .ab-nav__actions .btn-nav { display: none; }
  .ab-cart { width: 44px; height: 44px; }
  .ab-cart svg { width: 25px; height: 25px; }
  .ab-nav__burger { display: flex; }

  /* HERO CAPTION – zentriert statt rechtsbündig */
  .ab-hero__caption {
    left: 50%; right: auto; bottom: 24px;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /* HERO */
  .ab-hero { min-height: 100svh; margin-bottom: 16px; }
  .ab-hero__content {
    width: 100%;
    padding: 80px var(--section-px) 120px;
  }
  .ab-hero__content::before { left: var(--section-px); }
  .ab-hero__image { position: absolute; inset: -48px 0 0; }
  .ab-hero__title { font-size: clamp(52px, 18vw, 84px); }
  .ab-hero__sub { font-size: 18px; line-height: 1.6; max-width: 100%; }
  .ab-hero__actions { flex-direction: column; }
  .ab-hero__actions .btn-fill,
  .ab-hero__actions .btn-sage { width: 100%; text-align: center; }
  .ab-hero__teaser { font-size: 10px; padding: 6px 10px 6px 8px; }

  /* STRIP */
  .ab-strip { gap: 16px; padding: 12px var(--section-px); flex-wrap: wrap; justify-content: center; }
  .ab-strip__item:nth-child(3), .ab-strip__item:nth-child(4) { display: none; }

  /* TAGESZEITEN */
  .ab-tz-wrap { padding-bottom: 14px; }
  .ab-tz { grid-template-columns: 1fr; }
  .ab-tz:has(.ab-tz__card--accent) { grid-template-columns: 1fr; }
  .ab-tz__card { --card-px: var(--section-px); border-right: none; border-bottom: 1px solid rgba(31,46,34,.15); }
  .ab-tz__card:last-child { border-bottom: none; }
  .ab-tz__card::before { width: 3px; height: auto; top: 0; bottom: 0; left: 0; right: auto; }
  .ab-tz__card--accent { border-bottom: none; background: var(--mint); }
  .ab-tz__card--accent::before { background: var(--dark); }
  .ab-tz__card--accent:hover { background: var(--mint-d); }
  .ab-tz__card--accent .ab-tz__label,
  .ab-tz__card--accent .ab-tz__title { color: #052F14; }
  .ab-tz__card--accent .ab-tz__text { color: var(--txt); }
  .ab-tz__card--accent .ab-tz__arrow { border-color: rgba(31,46,34,.3); color: var(--dark); }
  .ab-tz__card--accent:hover .ab-tz__arrow { background: var(--dark); color: var(--mint); border-color: var(--dark); }

  /* POPUP */
  .ab-popup { padding: clamp(40px,8vw,64px) var(--section-px); }
  .ab-popup__header { flex-direction: column; gap: 20px; }
  .ab-popup__date { flex-direction: row; align-items: baseline; gap: 8px; }
  .ab-popup__date-num { font-size: clamp(48px,14vw,72px); }
  .ab-popup__grid { grid-template-columns: 1fr; gap: 16px; margin: 0 calc(-1 * var(--section-px)); }
  .ab-popup__card { padding: 28px var(--section-px) 24px; border-radius: 0; }
  .ab-popup__card-weekday { font-size: clamp(52px,16vw,80px); }
  .ab-popup-solo {
    grid-template-columns: 1fr; min-height: 0;
    max-width: none; margin: 16px calc(-1 * var(--section-px)) 0;
    border-radius: 0;
  }
  .ab-popup-solo__content { padding: 32px var(--section-px) 28px; }
  .ab-popup-solo--no-photo .ab-popup-solo__content { max-width: none; }
  .ab-popup-solo__photo { order: -1; height: 260px; }
  .ab-popup-solo__photo-overlay { background: linear-gradient(to bottom, transparent 60%, var(--mint) 100%) !important; }
  .ab-popup-solo__meta { gap: 20px; }
  .ab-popup-solo__day-kurz { font-size: clamp(52px,16vw,80px); }

  /* BROT */
  .ab-brot { grid-template-columns: 1fr; }
  .ab-brot__left, .ab-brot__right { padding: 40px var(--section-px); }
  .ab-brot__photo { height: 280px; }

  /* PARTNER */
  .ab-partner { padding: 48px var(--section-px); }
  .ab-partner__grid { grid-template-columns: 1fr 1fr; }

  /* KAFFEE */
  .ab-kaffee { grid-template-columns: 1fr; }
  .ab-kaffee__content { padding: 40px var(--section-px); }
  .ab-kaffee__photo { height: 260px; }
  /* Bild löst sich unten sanft in die Mint-Fläche der Meister-Sektion auf */
  .ab-kaffee__photo-overlay {
    background: linear-gradient(to bottom, rgba(168,220,198,0) 72%, var(--mint) 100%);
  }

  /* STORY */
  .ab-story { grid-template-columns: 1fr; }
  .ab-story__photos { height: 320px; order: 1; }
  .ab-story__content { padding: 40px var(--section-px); order: 2; }
  .ab-story__photo--main .ab-story__photo-overlay {
    background: linear-gradient(to bottom, transparent 65%, var(--w) 100%);
  }

  /* MEISTER */
  .ab-meister { grid-template-columns: 1fr; padding-top: 56px; }
  .ab-meister__photo { height: 320px; }
  .ab-meister__photo-overlay { background: linear-gradient(to bottom, transparent 65%, var(--mint) 100%); }
  .ab-meister__content { padding: 36px var(--section-px) 48px; }
  .ab-meister__zitat { max-width: 100%; }

  /* FOOTER */
  .ab-footer { padding: 48px var(--section-px); }
  .ab-footer__inner { grid-template-columns: 1fr; gap: 36px; }
  .ab-footer__bar { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* BUTTONS full-width */
  .btn-fill, .btn-outline, .btn-sage { padding: 14px 24px; width: 100%; text-align: center; }
}

/* ─── SCROLL TO TOP (mobile) ─── */
.ab-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 500;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--mint);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(31,46,34,.22);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s, transform .25s, background .2s;
}
.ab-to-top svg { width: 20px; height: 20px; }
.ab-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ab-to-top:hover { background: #052F14; color: var(--w); }

/* ─── BROT & SHOP (kombiniert, ersetzt .ab-brot + Shop-Teaser, TASK-021) ─── */
.ab-brotshop { background: var(--bg); padding: clamp(56px,6vw,96px) var(--section-px); }
.ab-brotshop__intro { max-width: 640px; margin-bottom: 40px; }
.ab-brotshop__title {
  font-family: var(--fs); font-size: clamp(30px,4vw,50px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--dark); text-wrap: balance; margin-bottom: 14px;
}
.ab-brotshop__sub { font-size: 16px; line-height: 1.8; color: var(--txt-m); }
.ab-brotshop__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: rgba(168,220,198,.35); margin-bottom: 48px;
}
.ab-brotshop__tile {
  position: relative; display: flex; align-items: flex-end;
  background: var(--dark); min-height: 280px; overflow: hidden;
}
.ab-brotshop__tile-photo { position: absolute; inset: 0; }
.ab-brotshop__tile-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.ab-brotshop__tile:hover .ab-brotshop__tile-photo img { transform: scale(1.05); }
.ab-brotshop__tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 55%);
  transition: background .3s;
}
.ab-brotshop__tile:hover .ab-brotshop__tile-overlay { background: linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.1) 55%); }
.ab-brotshop__tile-name {
  position: relative; z-index: 1; padding: 18px 20px;
  color: var(--w); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.ab-brotshop__tile--regal .ab-brotshop__tile-name { font-size: 13px; }
.ab-brotshop__tile:focus-visible { outline-offset: -3px; }
.ab-brotshop__right {
  background: var(--mint); padding: clamp(36px,5vw,56px) var(--section-px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.ab-brotshop__right-title {
  font-family: var(--fs); font-size: clamp(24px,3vw,36px);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--dark); text-wrap: balance; margin-bottom: 12px;
}
.ab-brotshop__right-text { font-size: 16px; line-height: 1.8; color: var(--dark); margin-bottom: 12px; max-width: 480px; }
.ab-brotshop__right-tag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dark); opacity: .75; margin-bottom: 24px; }

/* ─── TAGESZEITEN-INTRO (Eröffnung Sommer 2027 / künftig "Unser Angebot") ─── */
.ab-tz-wrap { background: var(--w); }
.ab-tz-intro { padding: clamp(48px,6vw,80px) var(--section-px) clamp(16px,3vw,32px); max-width: 720px; }
.ab-tz-intro__title {
  font-family: var(--fs); font-size: clamp(28px,3.6vw,44px);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--dark); text-wrap: balance; margin-bottom: 14px;
}
.ab-tz-intro__text { font-size: 16px; line-height: 1.8; color: var(--txt-m); }

/* ─── HERO2 – Seite 2 "Mehr erfahren" ─── */
/* Bewusst identisch zum Haupt-Hero (.ab-hero) gestaltet (Kundenwunsch
   2026-09-15: "gleich gross selbe schriftfarbe und gleiche abdunkelung
   alles gleich") - gleiche Höhe, gleiche Titelgrösse/-farbe (Mint statt
   Weiss) und kein separates Overlay mehr, sondern wie beim Haupt-Hero nur
   text-shadow zur Lesbarkeit (das vorherige Gradient-Overlay verdunkelte
   das Bild zusätzlich und sah dadurch anders ab als auf der Startseite). */
.ab-hero2 {
  position: relative; min-height: 88vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0;
}
.ab-hero2__image { position: absolute; inset: 0; z-index: 0; background: var(--dark); }
.ab-hero2__image img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% center;
  /* Dauerhaft dunkler, kein Hover-Effekt (Kundenwunsch 2026-09-15: "nicht
     mouse hover! sondern einfach hoverfarbe so das es immer dünkler ist")
     - korrigiert den vorherigen :hover-Ansatz aus TASK-050, der das Bild
     nur beim Drüberfahren mit der Maus abdunkelte. */
  filter: brightness(.78);
}
.ab-hero2__overlay { display: none; }
.ab-hero2__content {
  position: relative; z-index: 2; max-width: 800px;
  padding: clamp(64px,7vw,112px) var(--section-px);
  text-align: center;
}
.ab-hero2__title {
  /* Eigene, kleinere Clamp-Range statt 1:1 vom Haupt-Hero uebernommen
     (Kundenwunsch 2026-09-15: "schrift kleiner ist zu gross da den text
     mehr ist") - der Hero2-Spruch ist laengerer Fliesstext ("Langsam
     gereift. Lievito Madre, taeglich frisch gebacken."), waehrend der
     Haupt-Hero nur kurze Wortgruppen zeigt und daher deutlich groesser
     stehen kann. Farbe/Schatten/Höhe der Sektion bleiben wie beim
     Haupt-Hero angeglichen. */
  font-family: var(--fs); font-size: clamp(40px, 5.8vw, 84px);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  color: #a8dcc7; text-wrap: balance;
  text-shadow: 0 4px 24px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.45);
}
.ab-hero2__title span { display: block; }
.ab-hero2__title span + span { margin-top: 6px; }

/* ─── TEAM – Freddy zuerst, dann Florian, untereinander (nicht nebeneinander) ─── */
.ab-team { background: var(--w); }
.ab-team__member {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 520px;
  background: var(--mint);
}
.ab-team__member--alt { background: var(--w); }
.ab-team__photo { position: relative; overflow: hidden; background: var(--dark); }
.ab-team__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Florians Foto ist ein Ganzkörper-/Umgebungsbild, kein enges Kopf-Portrait
   wie bei Freddy – bei "top center" und der niedrigen Mobile-Höhe
   (320px, s. Media Query unten) fiel dadurch fast das ganze Gesicht aus
   dem sichtbaren Ausschnitt. Fix 2026-09-09: eigene Bildausrichtung für
   die --alt-Karte, Fokus etwas tiefer im Bild statt ganz oben. */
.ab-team__member--alt .ab-team__photo img { object-position: center 25%; }
.ab-team__photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 55%, var(--mint) 100%);
}
.ab-team__member--alt .ab-team__photo-overlay {
  /* Florian-Karte: Foto steht rechts, Text links (order:2/1 unten) – der
     Verlauf muss deshalb nach links auslaufen (zur Textseite hin), nicht
     nach rechts wie bei Freddys Karte (Foto links, Text rechts). Bug
     behoben 2026-09-09: vorher lief der Verlauf hier ebenfalls "to right"
     und verschwand am äusseren Bildschirmrand statt zum Content hin. */
  background: linear-gradient(to left, transparent 55%, var(--w) 100%);
}
.ab-team__member--alt .ab-team__photo { order: 2; }
.ab-team__member--alt .ab-team__content { order: 1; }
.ab-team__content { padding: clamp(44px,6vw,84px) var(--section-px); display: flex; flex-direction: column; justify-content: center; }
.ab-team__eyebrow {
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: #052F14;
  margin-bottom: 24px; display: flex; align-items: center; gap: 10px;
}
.ab-team__eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--terra-d); opacity: .6; }
.ab-team__head { margin-bottom: 24px; }
.ab-team__name {
  font-family: var(--fs); font-size: clamp(32px,3.6vw,48px);
  font-weight: 700; line-height: 1.0; letter-spacing: -.025em; color: var(--dark); margin-bottom: 8px;
}
.ab-team__name-story {
  font-family: var(--fs); font-size: clamp(28px,3.4vw,44px);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--dark); margin-bottom: 20px; text-wrap: balance;
}
.ab-team__titel { display: block; font-size: 14px; color: #052F14; letter-spacing: .06em; margin-bottom: 14px; }
.ab-team__badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dark); background: rgba(31,46,34,.07); border: 1px solid rgba(31,46,34,.18);
  padding: 5px 12px; border-radius: 2px;
}
.ab-team__text p { font-size: 16px; line-height: 1.85; color: var(--dark); margin-bottom: 14px; max-width: 440px; }
.ab-team__member--alt .ab-team__text p { color: rgba(31,46,34,.75); }
.ab-team__text p:last-child { margin-bottom: 0; }
.ab-team__zitat {
  font-family: var(--fn); font-size: clamp(15px,1.6vw,19px); font-style: italic; line-height: 1.65;
  color: rgba(31,46,34,.88); margin: 20px 0 0; padding-left: 20px; border-left: 2px solid rgba(31,46,34,.35);
  max-width: 380px;
}
.ab-team__link {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dark);
  display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; transition: opacity .2s;
}
.ab-team__link:hover { opacity: .7; }
.ab-team__byline {
  font-size: 12px; color: rgba(31,46,34,.68); letter-spacing: .1em; text-transform: uppercase;
  padding-top: 16px; border-top: 1px solid rgba(31,46,34,.1); margin-top: 4px;
}

/* ─── NEWS ─── */
.ab-news { background: var(--w); padding: clamp(56px,6vw,96px) var(--section-px); }
.ab-news__hdr { margin-bottom: 36px; display: flex; align-items: center; gap: 18px; }
.ab-news__label { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: #052F14; }
.ab-news__rule { flex: 1; height: 1px; background: var(--rule); }
.ab-news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ab-news__card {
  border: 1px solid var(--rule); border-radius: 4px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px; background: var(--bg);
}
.ab-news__logo { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.ab-news__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-news__title { font-family: var(--fs); font-size: 19px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.ab-news__excerpt { font-size: 14px; line-height: 1.65; color: var(--txt-m); flex: 1; }
.ab-news__arr { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #052F14; display: inline-flex; align-items: center; gap: 6px; }
.ab-news__empty { font-size: 15px; color: var(--txt-m); font-style: italic; }

/* ─── INSTAGRAM-LINK (Seite 2, unter News) ─── */
.ab-ig-link { background: var(--w); padding: 0 var(--section-px) clamp(56px,6vw,96px); display: flex; justify-content: center; }
.ab-ig-link__btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--mint); color: var(--dark);
  padding: 16px 28px; border-radius: 999px;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  transition: background .2s;
}
.ab-ig-link__btn:hover { background: var(--mint-d); }
.ab-ig-link__btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.ab-ig-link__handle { opacity: .75; font-weight: 400; }

/* ─── RESPONSIVE: neue Seite-2/kombinierte Sections ─── */
@media (max-width: 767px) {
  /* NAV: kürzere Labels laufen bereits über den Hamburger; zusätzlich
     Schriftgrösse im Mobile-Menü verkleinern, damit auch längere
     Übersetzungen (z.B. "Bread & Shop") nicht umbrechen/abgeschnitten
     werden (Kunde: ~95% mobile Nutzung). */
  .ab-mobile-menu a { font-size: 17px; letter-spacing: .05em; }

  /* BROT & SHOP */
  .ab-brotshop { padding: 40px var(--section-px); }
  .ab-brotshop__grid { grid-template-columns: 1fr 1fr; }
  .ab-brotshop__tile { min-height: 200px; }
  .ab-brotshop__right { padding: 32px var(--section-px); }

  /* TAGESZEITEN-INTRO */
  .ab-tz-intro { padding: 40px var(--section-px) 8px; }

  /* Der längere Titel braucht mobil weniger Bildhöhe und kleinere Schrift. */
  .ab-hero2 { min-height: 70svh; margin-bottom: 16px; }
  .ab-hero2__content {
    width: 100%;
    padding: 48px var(--section-px);
  }
  .ab-hero2__image { position: absolute; inset: 0; }
  .ab-hero2__title { font-size: clamp(30px, 9vw, 40px); }

  /* TEAM */
  .ab-team__member { grid-template-columns: 1fr; min-height: 0; }
  .ab-team__photo { height: 320px; }
  .ab-team__member--alt .ab-team__photo,
  .ab-team__member--alt .ab-team__content { order: initial; }
  .ab-team__content { padding: 36px var(--section-px) 44px; }
  .ab-team__zitat, .ab-team__text p { max-width: 100%; }
  /* Foto steht mobil immer oben, Text darunter (Grid auf 1 Spalte
     gestellt) – der Verlauf muss deshalb nach unten auslaufen (zum Text
     hin), nicht mehr seitlich wie im Desktop-Layout. Ohne diese Regel
     erben beide Karten weiterhin den horizontalen Desktop-Verlauf
     (to right / to left) und die Auslauffarbe zieht sich seitlich quer
     durchs Bild statt am unteren Rand zu greifen. Bug behoben 2026-09-09. */
  .ab-team__photo-overlay,
  .ab-team__member--alt .ab-team__photo-overlay {
    background: linear-gradient(to bottom, transparent 55%, var(--mint) 100%);
  }
  .ab-team__member--alt .ab-team__photo-overlay {
    background: linear-gradient(to bottom, transparent 55%, var(--w) 100%);
  }

  /* NEWS */
  .ab-news { padding: 40px var(--section-px); }
  .ab-news__grid { grid-template-columns: 1fr; }

  /* IG LINK */
  .ab-ig-link { padding: 0 var(--section-px) 40px; }
  .ab-ig-link__btn { width: 100%; justify-content: center; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   WOOCOMMERCE — Shop-Archiv, Einzelprodukt, Warenkorb, Checkout
   Eigenes Theme-Styling über den WooCommerce-Standard-Klassen, damit
   sich der Shop optisch nahtlos ins Editorial-Design (Mint/Dark-Forest/
   Terracotta, Playfair Display Headlines, Pill-Buttons) einfügt, ohne
   WooCommerce-Kernmarkup zu duplizieren. Nur Shop-Seiten laden dieses
   CSS mit (main.css lädt überall, WC-eigenes CSS nur auf Shop-Seiten,
   s. inc/enqueue.php). Eingeführt 2026-09-09.
   ═══════════════════════════════════════════════════════════════ */

.shop-main { background: var(--bg); }

/* ─── Breadcrumb ─── */
.woocommerce-breadcrumb {
  padding: 20px var(--section-px) 0;
  font-size: 13px; letter-spacing: .04em; color: var(--txt-l);
}
.woocommerce-breadcrumb a { color: var(--txt-m); transition: color .2s; }
.woocommerce-breadcrumb a:hover { color: var(--dark); }

/* ─── Shop-Archiv: Titel + Intro (wie andere Section-Header im Theme) ─── */
/* Abstand nach oben vergrössert (Kundenwunsch, 2026-09-15, TASK-035-
   Folgeanpassung): seit die Breadcrumb-Zeile entfernt wurde, sass der
   Titel zu dicht an der Kopfzeile. */
.shop-main .page-title,
.woocommerce-products-header__title {
  font-family: var(--fs);
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--dark);
  padding: clamp(72px,10vw,120px) var(--section-px) 0; margin-bottom: 8px;
}
.shop-main > p.woocommerce-result-count,
.woocommerce-result-count {
  padding: 0 var(--section-px);
  font-size: 14px; color: var(--txt-m); margin-bottom: 0;
}
/* TASK-034-Fix (Kundenwunsch 2026-09-15): Sortierung soll denselben
   rechten Rand haben wie das Produkt-Grid darunter (max-width:1160px seit
   TASK-033) statt bis zum äusseren Seitenrand zu reichen. */
/* !important auf margin nötig: WooCommerce-Core setzt
   `.woocommerce .woocommerce-ordering { margin:0 0 1em }` mit höherer
   Spezifität (zusätzliche .woocommerce-Klasse) – das überschrieb bisher
   das `margin:0 auto`, wodurch die Box trotz max-width nicht zentriert
   war und rechts nicht mit dem Produkt-Grid abschloss. Gefunden/behoben
   2026-09-15. */
.woocommerce-ordering {
  margin: 0 0 8px !important; float: none; display: flex; justify-content: flex-end;
  padding: 0 var(--section-px) !important;
  box-sizing: border-box;
}
.woocommerce-ordering select {
  font-family: var(--fn); font-size: 13px; letter-spacing: .04em;
  color: var(--dark); background: var(--w);
  border: 1.5px solid var(--rule); border-radius: 999px;
  padding: 10px 36px 10px 18px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2E22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  transition: border-color .2s;
}
.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus-visible { border-color: var(--dark); outline: none; }
.shop-main .woocommerce-notices-wrapper { padding: 0 var(--section-px); }

/* ─── Produkt-Grid (Shop-Archiv) ─── */
/* TASK-033 (Rolle 2, 2026-09-15): Layout auf Kundenwunsch von vertikalen
   Grid-Karten (Bild oben, Text unten) auf horizontale Zeilen umgestellt
   (Bild links, Text rechts) — Referenzvorbild vom Kunden: die "Backwaren
   Bestellungen"-Seite von Profibeckservice GmbH (Payrexx-Shop). Liste statt
   Grid, jede Position eine eigene breite Karte, grosszügigere Beschreibungs-
   schrift statt der bisher eher kleinen 13.5px. */
/* TASK-034-Anpassung (Kundenwunsch 2026-09-15): 2 Produkte nebeneinander
   statt einer einzelnen Spalte – Grid statt Flex-Column, jede Karte
   behält ihr Bild-links/Text-rechts-Layout aus TASK-033. */
/* !important auf margin nötig: WooCommerce-Core setzt
   `.woocommerce ul.products { margin:0 0 1em }` mit höherer Spezifität
   (zusätzliche .woocommerce-Klasse) – ohne !important gewann das die
   `margin:0 auto`-Zentrierung, die Box war dadurch nicht zentriert und
   schloss rechts nicht mit dem Sortier-Dropdown darüber ab. 2026-09-15. */
/* TASK-037 (Kundenwunsch 2026-09-15): Produkt-Grid auf volle Seitenbreite
   gebracht, bündig zum "Shop"-Titel links und zum Sortier-Dropdown rechts
   – vorher künstlich auf max-width:1160px begrenzt und zentriert, wodurch
   die Karten schmaler waren als Titel/Sortierung darüber. */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  list-style: none;
  padding: 28px var(--section-px) clamp(56px,6vw,96px) !important;
  margin: 0 !important;
  box-sizing: border-box;
}
ul.products::before,
ul.products::after { display: none !important; }
@media (max-width: 780px) {
  ul.products { grid-template-columns: 1fr; }
}

ul.products li.product {
  background: var(--w);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(31,46,34,.07);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
  width: auto !important; margin: 0 !important; float: none !important;
  /* WC-Standardmarkup: <a class="woocommerce-LoopProduct-link"> (Bild+Titel+
     Preis) und der separate .button ("In den Warenkorb") liegen als
     GESCHWISTER direkt im <li>, nicht ineinander verschachtelt. */
  display: flex; flex-direction: column;
}
ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(31,46,34,.16);
}

/* Bild links, Titel/Preis/Beschreibung rechts daneben (statt Bild oben,
   Text darunter). WC-Markup legt Bild, Titel, Kurzbeschreibung und Preis
   als GESCHWISTER direkt im <a class="woocommerce-LoopProduct-link"> ab
   (kein gemeinsamer Text-Wrapper ohne Template-Override) – daher hier
   bewusst ohne neue Wrapper-Klasse gelöst: Bild wird per position:absolute
   aus dem Textfluss genommen, der Text bekommt stattdessen links Platz in
   Bildbreite reserviert (margin-left). Reine CSS-Lösung, kein PHP-Template-
   Override nötig (weniger Wartungsaufwand bei WooCommerce-Updates). */
/* Abstand Bild→Text von 24px auf 14px reduziert (Kundenwunsch
   2026-09-15): Textblock soll näher am Produktbild stehen. */
ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  position: relative;
  flex: 1 0 auto;
  padding: 22px 22px 22px calc(22px + clamp(140px,20vw,240px) + 14px);
  min-height: calc(clamp(140px,20vw,240px) + 44px);
}

/* !important nötig: WooCommerce-Core (assets/css/woocommerce.css) definiert
   `.woocommerce ul.products li.product a img { width:100%; height:auto }`
   – durch die zusätzliche `.woocommerce`-Ahnen-Klasse UND das zusätzliche
   `a`-Element hat dieser Selektor höhere Spezifität als eine reine
   Theme-Regel ohne `.woocommerce`-Präfix und gewinnt sonst unabhängig von
   der Ladereihenfolge. Bug gefunden/behoben 2026-09-15 (TASK-033). */
ul.products li.product a.woocommerce-LoopProduct-link > img {
  position: absolute !important;
  top: 22px; left: 22px;
  aspect-ratio: 1/1;
  width: clamp(140px,20vw,240px) !important;
  height: clamp(140px,20vw,240px) !important;
  object-fit: cover;
  border-radius: 14px;
  margin: 0 !important;
  transition: transform .45s var(--ease);
}
ul.products li.product:hover a.woocommerce-LoopProduct-link > img { transform: scale(1.06); }

@media (min-width: 781px) {
  .woocommerce-shop ul.products li.product a.woocommerce-LoopProduct-link {
    padding-left: calc(22px + clamp(180px, 22.222vw, 320px) + 14px);
    min-height: calc(clamp(180px, 22.222vw, 320px) + 44px);
  }
  .woocommerce-shop ul.products li.product a.woocommerce-LoopProduct-link > img {
    width: clamp(180px, 22.222vw, 320px) !important;
    height: clamp(180px, 22.222vw, 320px) !important;
  }
}


/* Kein Bild gesetzt → dezenter Mint-Platzhalter statt WP-Kamera-Icon */
ul.products li.product a.woocommerce-LoopProduct-link > img.wp-post-image[src*="woocommerce-placeholder"] {
  object-fit: none; padding: 20% ; opacity: .35;
}

ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--fs);
  /* !important nötig: WooCommerce-Core setzt ebenfalls eine font-size auf
     .woocommerce-loop-product__title (vermutlich über eine Regel mit
     .woocommerce-Ahnen-Klasse, gleiches Muster wie schon mehrfach in
     diesem Projekt bei Bild/Ordering/Products-Selektoren gefunden) –
     ohne !important wurde JEDE Grössenänderung hier ignoriert, obwohl
     main.css korrekt aktualisiert und ausgeliefert wurde. Bug gefunden
     2026-09-15 per gezieltem Rot-Farb-Test (Farbe kam an, Grösse nicht,
     bis !important ergänzt wurde). */
  font-size: clamp(24px, 2.2vw, 30px) !important; font-weight: 700; line-height: 1.15; letter-spacing: -.01em;
  color: var(--dark);
  padding: 0;
  margin: 0 0 6px;
}

/* Kurzbeschreibung: deutlich grösser als zuvor (13.5px → 16px) auf
   Kundenwunsch (Referenzvorbild Profibeckservice-Shop, 2026-09-15) —
   soll auf einen Blick lesbar sein, nicht als Kleingedrucktes wirken. */
ul.products li.product .ab-loop-excerpt {
  font-family: var(--fn); font-size: 16px; line-height: 1.55; color: var(--txt-m);
  padding: 0; margin-bottom: 12px;
}
ul.products li.product .ab-loop-excerpt p { margin: 0; }

/* Allergen-Icons auf der Shop-Grid-Karte (Kundenwunsch "Zutaten
   hinzufügen", 2026-09-15, TASK-034) – kompakte Variante der Icons von
   der Einzelprodukt-Seite (.ab-allergen-icons), ohne Textlabel (Platz auf
   der schmaleren Grid-Karte), Name des Allergens als Tooltip (title-
   Attribut) weiterhin zugänglich. */
/* Kleiner negativer Rand (Kundenwunsch 2026-09-15): die runden Icon-
   Kreise wirken optisch nach innen versetzt gegenüber dem Textbeginn von
   Titel/Beschreibung/Preis (Kreisform vs. gerade Textkante) – mit
   margin-left ausgeglichen, damit alles bündig zum selben linken Rand
   wirkt. */
ul.products li.product .ab-loop-allergens {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  list-style: none; margin: 0 0 12px; padding: 0;
}
ul.products li.product .ab-loop-allergens::before,
ul.products li.product .ab-loop-allergens::after { display: none; }
ul.products li.product .ab-loop-allergen {
  display: flex; align-items: center; gap: 6px;
}
ul.products li.product .ab-loop-allergen:first-child {
  margin-left: -15px;
}
ul.products li.product .ab-loop-allergen__glyph {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mint-bg); color: var(--dark);
}
ul.products li.product .ab-loop-allergen__glyph svg { width: 15px; height: 15px; }
ul.products li.product .ab-loop-allergen__label {
  font-family: var(--fn); font-size: 12.5px; color: var(--txt-m); line-height: 1.2;
}

ul.products li.product .price,
ul.products li.product .price .woocommerce-Price-amount,
ul.products li.product .price ins .woocommerce-Price-amount {
  /* !important: WooCommerce's eigenes CSS setzt hier eine goldgelbe
     Standardfarbe auf .woocommerce-Price-amount mit höherer Spezifität –
     ohne !important gewann WC und der Preis blieb oliv/gold statt
     dunkelgrün. Bug behoben 2026-09-09. */
  font-family: var(--fn);
  font-size: 16px; font-weight: 500; color: var(--dark) !important;
  padding: 0;
  margin-bottom: 0;
}
ul.products li.product .price del { color: var(--txt-l); opacity: .7; font-weight: 400; margin-right: 8px; }
ul.products li.product .price del .woocommerce-Price-amount { color: var(--txt-l) !important; }
ul.products li.product .price ins { text-decoration: none; }

ul.products li.product .button {
  margin: 0 22px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* Mint statt Dunkelgrün auf Kundenwunsch, 2026-09-09 (Vorbild
     shop.steiner-beck.ch-Konzept, Button soll auffälliger/freundlicher
     wirken als der sehr dunkle Vorgängerton). */
  background: var(--mint) !important; color: var(--dark) !important; border: none;
  padding: 13px 22px; font-size: 13px; font-weight: 500; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none;
  border-radius: 999px; cursor: pointer;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
  align-self: flex-start;
}
ul.products li.product .button:hover {
  background: var(--mint-d) !important; color: var(--dark) !important;
  box-shadow: 0 4px 14px rgba(31,46,34,.18);
}
ul.products li.product .button.loading { opacity: .6; }
ul.products li.product .added_to_cart {
  margin: 0 22px 22px; display: block; text-align: center;
  font-size: 12px; letter-spacing: .04em; color: var(--txt-m);
}

/* Mengenfeld + Warenkorb-Button nebeneinander unterhalb der Bild/Text-Zeile
   (eigenes Mini-Formular aus artbakery_loop_add_to_cart_with_quantity()).
   TASK-034-Anpassung (Kundenwunsch 2026-09-15): "Button und Stückangabe
   grösser, schöner, luftiger" – Stepper/Button deutlich vergrössert und
   mit mehr Abstand zum Bereich darüber/zueinander, statt der bisher eher
   kompakten Variante. */
ul.products li.product .ab-loop-cart-form {
  margin: 24px 22px 22px;
  padding-top: 24px; border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
ul.products li.product .ab-loop-cart-form .quantity { display: flex; flex-shrink: 0; }
ul.products li.product .quantity.buttons-added {
  border: 2px solid var(--rule); border-radius: 999px; background: var(--bg);
}
ul.products li.product .quantity.buttons-added .qty { width: 56px; font-size: 19px; padding-block: 12px !important; }
ul.products li.product .ab-qty-btn { width: 56px; font-size: 24px; }
ul.products li.product .ab-loop-cart-form .button {
  margin: 0; padding: 19px 34px; font-size: 15px; flex-shrink: 0;
}

/* Sale-Badge: bei der Zeilen-Ansicht direkt aufs Bild oben links statt
   auf die ganze Karte. */
ul.products li.product .onsale {
  position: absolute; top: 34px; left: 34px; z-index: 2;
  background: #052F14; color: var(--w);
  font-family: var(--fn); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  min-height: 0; min-width: 0; line-height: 1.6;
}

/* Mobile (≤640px): Bild und Text stapeln sich statt nebeneinander zu
   stehen, damit auf schmalen Bildschirmen genug Platz für die
   Beschreibung bleibt. */
@media (max-width: 640px) {
  /* Produktkarten mobil randlos (volle Bildschirmbreite) statt mit
     seitlichem --section-px-Abstand wie am Desktop – Kundenwunsch
     2026-09-15: "mobile produkt ganze breite benutzen". Grid-Gap
     zwischen den (gestapelten) Karten bleibt als vertikaler Abstand
     erhalten, nur der seitliche Rand entfällt; Titel/Sortierung
     behalten ihren Seitenabstand unverändert. */
  ul.products {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  ul.products li.product {
    border-radius: 0;
  }
  ul.products li.product a.woocommerce-LoopProduct-link {
    padding: 22px;
    min-height: 0;
  }
  ul.products li.product a.woocommerce-LoopProduct-link > img {
    position: static !important;
    width: 100% !important; height: auto !important; aspect-ratio: 4/3;
    margin-bottom: 16px;
  }
}

/* ─── Einzelprodukt ─── */
.single-product .shop-main {
  padding: clamp(32px,4vw,56px) var(--section-px) clamp(64px,7vw,104px);
  max-width: 1180px; margin: 0 auto;
}
/* Bildspalte etwas breiter als die Textspalte (58/42 statt 50/50) – bei
   50/50 wirkte das Bild klein im Verhältnis zur Seite, obwohl es korrekt
   auf 100% Spaltenbreite skaliert war (Kundenfeedback 2026-09-09: "Bild
   soll grösser sein"). Grösserer Spaltenabstand gibt zusätzlich mehr Luft
   zwischen Bild und Text, statt dass alles "zusammengedrückt" wirkt. */
.single-product div.product {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(40px,6vw,88px);
  align-items: start;
}
.single-product div.product .woocommerce-product-gallery {
  /* WooCommerce-Kern-CSS setzt auf .woocommerce-product-gallery eigene
     Regeln (u. a. float:left und eine berechnete Pixel-width, teils zur
     Laufzeit durch wc-single-product.js nachgezogen) mit höherer Wirkung
     als unser Grid-Stretch. Bei voller Desktop-Breite fiel das kaum auf,
     weil die berechnete Breite zufällig nahe an der Spaltenbreite lag –
     ab Tablet-Breite (~900-1100px) wurde die Galerie dadurch nur noch
     ca. 220px statt der vollen Spaltenbreite: das Bild wirkte schmal und
     gequetscht-hoch. width:100% + float:none erzwingen die volle
     Grid-Spaltenbreite unabhängig vom Viewport. Bug gefunden 2026-09-09
     beim Tablet-Check (960px). */
  width: 100% !important; float: none !important;
  border-radius: 20px; overflow: hidden; background: var(--mint-bg);
  /* Sanftes Einblenden beim Laden statt hartem Pop-in (emil-kowalski-design:
     kurze, physikbasierte Übergänge statt linearer/abrupter Zustände). */
  animation: ab-fade-in-up .5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Feste Mindesthöhe + object-fit: cover statt reinem width:100%/height:auto:
   das Originalbild ist relativ niedrig aufgelöst und wirkte dadurch klein
   und "gequetscht", selbst bei voller Spaltenbreite. Mit einer garantierten
   Mindesthöhe (clamp, wächst mit Viewport) füllt das Bild die Spalte
   sichtbar aus, unabhängig von seiner tatsächlichen Auflösung. */
.single-product div.product .woocommerce-product-gallery img {
  width: 100%; height: clamp(420px, 42vw, 620px); object-fit: cover; border-radius: 20px;
  display: block;
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.single-product div.product .woocommerce-product-gallery:hover img { transform: none; }

@keyframes ab-fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .single-product div.product .woocommerce-product-gallery { animation: none; }
  .single-product div.product .woocommerce-product-gallery img { transition: none; }
}

/* Informationskasten unter der Beschreibung in der rechten Produktspalte. */
.single-product div.product .ab-product-extra { margin-top: 28px; }

.single-product div.product .product_title {
  font-family: var(--fs);
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--dark); margin-bottom: 18px;
}

/* Verfügbarkeits-Badge – direkt unter dem Titel, statt versteckt am Ende
   der Zusammenfassung. Kundenwunsch "mehr Infos, sichtbar machen". */
.ab-availability-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fn); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
  background: var(--mint-bg); color: var(--dark);
  white-space: nowrap;
}
.ab-availability-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mint-d);
}
.ab-availability-badge--nur_popup {
  background: var(--terra-bg); color: var(--terra-d);
}
.ab-availability-badge--nur_popup::before { background: var(--terra-btn); }

.single-product div.product p.price,
.single-product div.product p.price .woocommerce-Price-amount {
  font-family: var(--fn); font-size: 26px; font-weight: 500; color: var(--dark) !important;
  margin-bottom: 28px;
}
.single-product div.product .woocommerce-product-details__short-description {
  font-size: 16px; line-height: 1.8; color: var(--txt-m); margin-bottom: 32px;
  padding-top: 4px; border-top: 1px solid var(--rule); padding-top: 24px;
}
.single-product div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* Etwas mehr Abstand zum Kaufblock (Menge + Button), damit die Blöcke
   Titel/Preis/Beschreibung/Kaufblock optisch getrennt bleiben statt
   direkt aneinanderzukleben ("wie zusammengedrückt", Kundenfeedback
   2026-09-09). */
.single-product form.cart {
  display: flex; align-items: center; gap: 16px; margin-top: 8px; margin-bottom: 40px; flex-wrap: wrap;
}
.single-product .quantity { display: flex; }
.single-product .quantity .qty {
  font-family: var(--fn); font-size: 15px; color: var(--dark);
  width: 64px; padding: 13px 12px; text-align: center;
  border: 1.5px solid var(--rule); border-radius: 999px; background: var(--w);
}
.single-product .quantity .qty:focus-visible { border-color: var(--dark); outline: none; }

/* ─── Mengenfeld: eigene +/- Buttons (main.js fügt sie beim Laden ein) ───
   Ohne diese Buttons war für Kund:innen nicht ersichtlich, dass sich die
   Menge überhaupt ändern lässt (Browser-Spinner-Pfeile durch das runde
   Input-Styling optisch verschwunden). Ergänzt 2026-09-09. */
.quantity.buttons-added {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1.5px solid var(--rule); border-radius: 999px; background: var(--w);
  overflow: hidden; width: fit-content;
}
.quantity.buttons-added .qty {
  border: none !important; border-radius: 0 !important; background: transparent !important;
  width: 46px; padding: 0 !important; text-align: center;
  -moz-appearance: textfield;
}
.quantity.buttons-added .qty::-webkit-outer-spin-button,
.quantity.buttons-added .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ab-qty-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; border: none; background: transparent; color: var(--dark);
  font-family: var(--fn); font-size: 18px; line-height: 1; cursor: pointer;
  /* Einheitliches physikbasiertes Easing wie Buttons/Bildhover auf dieser
     Seite (emil-kowalski-design), statt des bisherigen linearen Defaults.
     Dezenter Press-Scale ergänzt klares Klick-Feedback, analog zum
     bestehenden Hover-Zoom auf dem Produktbild. Ergänzt 2026-09-09. */
  transition: background .2s cubic-bezier(0.16, 1, 0.3, 1), transform .15s cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-qty-btn:hover { background: var(--mint-bg); }
.ab-qty-btn:active { transform: scale(0.92); }
.ab-qty-btn:focus-visible { outline: 2px solid var(--dark); outline-offset: -2px; }
.ab-qty-btn--minus { border-radius: 999px 0 0 999px; }
.ab-qty-btn--plus { border-radius: 0 999px 999px 0; }
.single-product button.single_add_to_cart_button,
.single-product button.single_add_to_cart_button.alt,
.single-product a.single_add_to_cart_button {
  /* WooCommerce-Block-CSS setzt .button.alt (Lila) mit vergleichbarer
     Spezifität nach diesem Stylesheet – ohne !important gewann WC hier.
     Bug behoben 2026-09-09. */
  background: #052F14 !important; color: var(--w) !important; border: none;
  padding: 15px 28px; font-size: 13.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; text-align: center;
  border-radius: 999px; cursor: pointer;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.single-product button.single_add_to_cart_button:hover,
.single-product button.single_add_to_cart_button.alt:hover,
.single-product a.single_add_to_cart_button:hover {
  background: var(--mint) !important; color: var(--dark) !important;
  box-shadow: 0 4px 14px rgba(31,46,34,.28), 0 0 0 1.5px var(--dark) inset;
}

.single-product .product_meta {
  /* txt-l auf Weiss nur 3.5:1 bei 13px – unter der AA-Schwelle. txt-m
     ergibt 6.97:1. Gefunden beim Kontrast-Check 2026-09-09. */
  font-size: 13px; color: var(--txt-m); padding-top: 20px; border-top: 1px solid var(--rule);
}
.single-product .product_meta a { color: var(--txt-m); }

/* Zutaten & Allergene / Herstellungshinweis / Verfügbarkeit (ACF-Zusatzfelder).
   Eigene Karte mit Hintergrund statt nur einer dünnen Trennlinie – zuvor
   fielen diese (teils gesetzlich vorgeschriebenen) Angaben am Seitenende
   kaum auf. Kundenwunsch "mehr Infos, sichtbar machen", 2026-09-09. */
.ab-product-extra {
  margin-top: 28px; padding: 24px 26px;
  background: var(--w); border-radius: 16px;
  box-shadow: 0 2px 14px rgba(31,46,34,.08), 0 0 0 1px var(--rule);
  display: flex; flex-direction: column; gap: 16px;
}
.ab-product-extra dt {
  /* txt-l (#8a8a78) ergibt auf Weiss nur 3.5:1 – für 12px-Text (unter der
     18.66px/24px-Schwelle für "grossen Text") verlangt WCAG AA 4.5:1.
     txt-m (#5a5a50) ergibt 6.97:1. Gleiche Korrektur wie bereits bei
     .ab-brot__right-tag/.ab-partner__label (siehe dortige Kommentare).
     Gefunden und behoben beim Kontrast-Check 2026-09-09. */
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-m);
  margin-bottom: 4px; font-weight: 600;
}
.ab-product-extra dd { font-size: 15px; line-height: 1.7; color: var(--txt-m); margin: 0; }

/* Allergen-Icons – Vorbild shop.steiner-beck.ch: Piktogramme statt reiner
   Textliste, schneller erfassbar. Ergänzend zum bestehenden Fliesstext,
   nicht als Ersatz (Pflichtangabe bleibt vollständig lesbar). Ergänzt
   2026-09-09 auf Kundenwunsch "Konzept wie diese Produktseite". */
.ab-allergen-icons {
  display: flex; flex-wrap: wrap; gap: 20px 22px;
  /* 16px statt 14px: einheitliches 4/8px-Spacing-Raster und gleicher
     Abstand wie zwischen den dt/dd-Blöcken (dl > div hat gap:16px) –
     zuvor wirkte der Sprung von Icon-Reihe zu Zutatentext knapper als
     der Abstand zwischen den Feldern selbst. Feinschliff 2026-09-09. */
  list-style: none; margin: 0 0 16px; padding: 0;
}
.ab-allergen-icon {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 64px; text-align: center;
}
.ab-allergen-icon__glyph {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--mint-bg); color: var(--dark);
}
.ab-allergen-icon__glyph svg { width: 26px; height: 26px; }
.ab-allergen-icon__label {
  font-family: var(--fn); font-size: 11.5px; color: var(--txt-m); line-height: 1.3;
}

/* Tabs (Beschreibung etc.) */
.single-product .woocommerce-tabs { grid-column: 1 / -1; margin-top: clamp(40px,5vw,64px); }
.single-product.woocommerce div.product div.summary { width: 100%; float: none; min-width: 0; }
.single-product .summary .woocommerce-tabs { margin-top: 24px; }
.single-product .woocommerce-tabs ul.tabs {
  display: flex; gap: 8px; list-style: none; padding: 0 0 0; margin-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.single-product .woocommerce-tabs ul.tabs li {
  margin: 0;
}
.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block; padding: 12px 4px; margin-right: 20px;
  /* txt-l auf Weiss nur 3.5:1 bei 14px – unter der AA-Schwelle für den
     ruhenden (inaktiven) Tab-Zustand. txt-m ergibt 6.97:1. Gefunden beim
     Kontrast-Check 2026-09-09. */
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--txt-m);
  border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--dark); border-color: var(--dark); }
.single-product .woocommerce-tabs .panel { font-size: 16px; line-height: 1.8; color: var(--txt-m); max-width: 720px; }

/* Verwandte Produkte */
.single-product .related.products {
  grid-column: 1 / -1; margin-top: clamp(56px,6vw,88px);
}
.single-product .related.products > h2 {
  font-family: var(--fs); font-size: clamp(26px,3vw,36px); font-weight: 700;
  color: var(--dark); margin-bottom: 24px;
}

/* ─── Warenkorb & Checkout (KLASSISCHE Shortcode-Variante, table.shop_table) ───
   Root Cause 2026-09-11 (TASK-029): Das erste Redesign (TASK-028) wurde
   ausschliesslich für die WC-BLOCKS-Klassen (.wc-block-cart-item etc.,
   Abschnitt weiter unten) gebaut – auf dem Live-Screenshot des Kunden
   war aber eindeutig die HIER gestylte KLASSISCHE Tabellen-Variante
   (table.shop_table, Shortcode [woocommerce_cart]) sichtbar. Beide
   Varianten liegen im CSS nebeneinander, aber nur eine ist auf dieser
   Installation tatsächlich aktiv.

   TASK-030 (2026-09-11, Rolle 2) – dritte Iteration, jetzt mit echtem
   Kundenfeedback per Screenshot statt Annahmen. Raffi zu TASK-029:
   "den warenkorb sieht schrecklich aus". Selbstkritische Bestandsaufnahme,
   warum Radius+Schatten+größeres Bild aus TASK-029 trotzdem steril wirkten:
   1. Der Karten-Schatten (rgba(31,46,34,.07)) verläuft fast unsichtbar
      gegen --bg (#F6F9F8, fast Weiss) – ohne echten Rand/Ring und ohne
      seitlichen Gutter zur Seite wirkt die "Karte" wie eine normale
      Tabellenzeile mit CSS-Radius nachträglich draufgesetzt, nicht wie
      ein schwebendes Objekt. Der Radius an der äusseren Kante ging optisch
      unter, weil dort nichts (kein Rand/Kontrast) den Radius sichtbar macht.
   2. Reine Struktur-Verbesserung ohne Farbakzent: Die ganze Zeile ist
      Weiss/Dunkelgrün-Text, nirgends taucht --terra auf – während der
      Rest des Shops (Sale-Badge, Verfügbarkeits-Badge, Preis-Umrandung,
      Fokusring) durchgängig mit Terracotta arbeitet. Der Warenkorb wirkte
      dadurch wie eine andere, kältere Marke als Grid/Einzelprodukt.
   3. Ungenutzter Weissraum: Produktname/Preis/Beschreibung/Stepper standen
      in einer schmalen linken Spur, die Gesamtsumme-Spalte war isoliert
      rechtsbündig – dazwischen blieb eine leere Fläche ohne Funktion, was
      die Karte unausgewogen/leer statt durchdacht wirken liess.
   4. Summenbox (.cart_totals) hatte nur einen dünnen Mint-Rand um sonst
      reines Weiss – kein Hintergrund, kein Kontrast, das "Gutscheine
      hinzufügen"-Dropdown wirkte wie ein leeres Formularfeld statt wie
      ein einladender Kartenabschluss.
   Massnahmen in dieser Iteration:
   - Terracotta gezielt eingesetzt: dezenter --terra-bg-Fond hinter dem
     Produktbild (Wärme im Bildbereich statt totem Weiss), Gesamtpreis
     der Position (Subtotal) in --terra-btn statt Dunkelgrün – macht den
     wichtigsten Zahlenwert pro Zeile sofort auffindbar, ohne bunt zu
     wirken (gleicher Ton wie Verfügbarkeits-Badge/Fokusring, also
     bereits Teil der Markensprache).
   - Karte als echtes CSS-Grid (statt <td>-Zellen mit Lücken): Bild links,
     Titel+Preis+Beschreibung als eine kompakte Textspalte, Menge/Entfernen
     und Zeilensumme rechts vertikal zentriert in einer eigenen Spalte –
     der vorher leere Mittelraum ist damit strukturell aufgelöst statt nur
     kaschiert.
   - Karte bekommt einen echten 1.5px-Rahmen in --rule zusätzlich zum
     Schatten, damit der Radius an ALLEN vier Ecken sichtbar bleibt, auch
     gegen einen fast weissen Hintergrund. table/tbody/tr/td laufen auf
     display:block bzw. display:grid, damit die Zeile sich wie eine
     einzelne Box mit echtem Rundum-Radius verhält statt wie eine Tabellen-
     zeile mit radius-getrickten Eckzellen (klassische <table>-Elemente
     unterstützen border-radius auf <tr> nicht zuverlässig browserübergreifend).
   - Summenbox bekommt einen warmen --terra-bg-Fond für den Gutschein-
     Bereich (Nebensache, klar zurückgenommen) und die Gesamtsumme-Zeile
     bekommt einen eigenen --dark-Fond mit hellem Text als klaren
     Hauptfokus – zwei sichtbar unterschiedliche Gewichtungen statt einer
     gleichförmigen Randbox. */
.woocommerce-cart .container.section,
.woocommerce-checkout .container.section {
  /* KORREKTUR (2026-09-15): Cart/Checkout laufen über page.php, dessen
     Wrapper-Div die Klassen "container section" traegt - nicht
     ".shop-main" (das gibt es nur auf der Shop-Archiv-Seite). Die
     vorherige Regel auf .shop-main griff hier nie, wodurch der
     "Warenkorb"-Titel oben komplett ohne Abstand direkt unter der
     Navigation klebte.
     NACHTRAG: max-width/Zentrierung/horizontales Padding jetzt HIER
     auf dem gemeinsamen Wrapper statt separat auf .wc-block-cart -
     vorher zentrierte sich .wc-block-cart unabhängig (eigenes
     max-width:1160+margin:auto) innerhalb des vollbreiten Wrappers,
     während der Titel nur von dessen linkem Rand aus eingerückt war.
     Dadurch standen Titel und Produktliste sichtbar nicht bündig
     zueinander (Kundenwunsch, 2026-09-15). */
  padding-top: clamp(72px,10vw,120px);
  padding-left: var(--section-px);
  padding-right: var(--section-px);
  max-width: 1160px; margin: 0 auto;
  box-sizing: border-box;
}

/* Seitentitel: gleiche Headline-Sprache wie .page-title (Playfair
   Display, grosszügige Grösse). WordPress' Standard-Seitentitel
   ("Cart"/"Warenkorb") lief vorher auf Browser-Standardgrösse. */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart h1,
.woocommerce-checkout h1 {
  /* page.php gibt den Seitentitel als nacktes <h1> ohne Klasse aus
     (kein .entry-title vorhanden) - die reinen .entry-title-Selektoren
     griffen deshalb nie. Bare-h1-Selektor als zusätzlicher Treffer
     ergänzt (Bug gefunden 2026-09-15 per Live-Screenshot: Titel blieb
     Browser-Standardgrösse trotz vorhandener Regel). Ausserdem hat der
     umgebende .container.section-Wrapper kein eigenes horizontales
     Padding (siehe Fix weiter unten) - deshalb hier direkt am Titel
     gesetzt, gleich wie var(--section-px) beim Shop-Titel. */
  font-family: var(--fs);
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--dark);
  margin: 0 0 clamp(24px,3vw,40px);
}

/* Tabelle selbst nur noch als Wrapper für vertikalen Kartenabstand –
   die eigentliche Kartenstruktur kommt jetzt von Grid auf <tr>, nicht
   mehr von <table>/<td>-Zellen. */
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
  display: block; width: 100%; background: transparent; margin-bottom: 12px;
}
.woocommerce-cart table.shop_table tbody,
.woocommerce-checkout table.shop_table tbody { display: block; }
.woocommerce-cart table.shop_table thead,
.woocommerce-checkout table.shop_table thead { display: none; }

/* Jede Warenkorb-Zeile als echte Karten-Box: <tr> läuft auf CSS-Grid,
   damit Bild / Text-Spalte / Aktions-Spalte sich den Raum gezielt teilen
   statt Lücken zu lassen, und damit Radius+Rahmen+Schatten rundherum auf
   EINEM Element sitzen statt auf zwei Eckzellen verteilt zu sein (das
   liess in TASK-029 die äussere Kante ohne sichtbaren Radius wirken). */
.woocommerce-cart table.shop_table tbody tr.cart_item {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr) auto;
  align-items: center; gap: clamp(16px,2vw,24px);
  background: var(--w);
  border: 1.5px solid var(--rule);
  border-radius: 20px;
  box-shadow: 0 2px 14px rgba(31,46,34,.07);
  padding: clamp(16px,2vw,22px);
  margin-bottom: 16px;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.woocommerce-cart table.shop_table tbody tr.cart_item:hover {
  box-shadow: 0 10px 26px rgba(31,46,34,.12);
  border-color: var(--mint);
}
.woocommerce-cart table.shop_table tbody tr.cart_item:last-child { margin-bottom: 0; }
.woocommerce-cart table.shop_table td {
  padding: 0; border: none; vertical-align: middle;
}

/* Produktbild: warmer Terracotta-Fond hinter dem Bild statt totem Weiss
   – erste sichtbare Markenfarbe im Warenkorb, greift dieselbe Fläche
   auf wie der Verfügbarkeits-Badge auf der Produktseite (--terra-bg). */
.woocommerce-cart table.shop_table td.product-thumbnail {
  grid-column: 1; grid-row: 1 / 3;
  background: var(--terra-bg); border-radius: 14px; padding: 6px;
  align-self: stretch; display: flex; align-items: center; justify-content: center;
}
.woocommerce-cart table.shop_table td.product-thumbnail img {
  width: 100%; height: 100%; min-width: 84px; min-height: 84px;
  aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block;
}

/* Text-Spalte: Titel, Preis und Kurzbeschreibung eng zusammengefasst
   statt über generische Zellen-Paddings verteilt – löst den grossen
   ungenutzten Leerraum in der Kartenmitte strukturell auf. */
.woocommerce-cart table.shop_table td.product-name {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; gap: 6px; align-self: start;
  padding-top: 2px;
}
.woocommerce-cart table.shop_table td.product-name a {
  color: var(--dark); font-weight: 600; font-family: var(--fs); font-size: 18px; line-height: 1.25;
}
.woocommerce-cart table.shop_table td.product-name dl.variation,
.woocommerce-cart table.shop_table td.product-name .wc-item-meta {
  font-family: var(--fn); font-size: 13px; color: var(--txt-m); margin-top: 0;
}
.woocommerce-cart table.shop_table td.product-name .ab-cart-item-excerpt {
  font-family: var(--fn); font-size: 13.5px; line-height: 1.5; color: var(--txt-m);
  max-width: 46ch;
}
.woocommerce-cart table.shop_table td.product-price {
  grid-column: 2; grid-row: 2;
  font-family: var(--fn); font-size: 14px; color: var(--txt-m); align-self: start;
}
.woocommerce-cart table.shop_table td.product-price .woocommerce-Price-amount {
  color: var(--txt-m) !important; font-weight: 500;
}

/* Aktions-Spalte rechts: Menge + Entfernen oben, Zeilensumme darunter
   deutlich betont in Terracotta – der wichtigste Wert pro Position ist
   damit farblich UND räumlich hervorgehoben statt isoliert rechtsbündig
   in einer sonst leeren Spalte zu stehen. */
.woocommerce-cart table.shop_table td.product-quantity {
  grid-column: 3; grid-row: 1;
  justify-self: end; align-self: end;
}
.woocommerce-cart table.shop_table td.product-subtotal {
  grid-column: 3; grid-row: 2;
  justify-self: end; align-self: start;
  font-family: var(--fs); font-size: 20px; font-weight: 700; color: var(--terra-btn);
  text-align: right; white-space: nowrap;
}
.woocommerce-cart table.shop_table td.product-subtotal .woocommerce-Price-amount {
  color: var(--terra-btn) !important;
}
.woocommerce-cart table.shop_table td.product-remove {
  grid-column: 3; grid-row: 1;
  justify-self: end; align-self: start;
  order: -1;
}

/* Mengenfeld: an den Pill-Stepper-Look des restlichen Shops angeglichen
   statt WC-Standard-Zahlenfeld mit winzigen Browser-Spinner-Pfeilen. */
.woocommerce-cart .quantity .qty {
  font-family: var(--fn); font-size: 15px; width: 60px; padding: 9px;
  text-align: center; border: 1.5px solid var(--rule); border-radius: 999px;
  background: var(--w); transition: border-color .2s;
}
.woocommerce-cart .quantity .qty:focus-visible { border-color: var(--dark); outline: none; }
.woocommerce-cart a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; color: var(--dark) !important;
  font-size: 20px; line-height: 1; transition: background .2s, color .2s;
}
.woocommerce-cart a.remove:hover { background: var(--terra-bg); color: var(--terra-d) !important; }

/* Summenbox: zwei sichtbar unterschiedliche Gewichte statt einer
   gleichförmigen weissen Box mit dünnem Rand. Oberer Teil (Zwischensumme,
   Gutscheine) bekommt einen warmen Terracotta-Fond als Nebensache-
   Fläche – "hier kann man etwas eintragen, aber es ist nicht der Punkt".
   Die Gesamtsumme-Zeile bekommt danach einen eigenen dunklen Fond mit
   hellem Text: klarer Hauptfokus, kein leeres Dropdown-Gefühl mehr. */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--terra-bg); border-radius: 20px; padding: 0;
  box-shadow: 0 2px 14px rgba(31,46,34,.07);
  border: 1.5px solid var(--terra-bg);
  overflow: hidden;
}
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review h3 {
  font-family: var(--fs); font-size: 22px; color: var(--dark);
  padding: clamp(22px,2.6vw,30px) clamp(22px,2.6vw,30px) 4px;
  margin-bottom: 0;
}
.woocommerce-cart .cart_totals table.shop_table {
  display: block; border-spacing: 0;
  padding: 4px clamp(22px,2.6vw,30px) clamp(18px,2.2vw,24px);
}
.woocommerce-cart .cart_totals table.shop_table tbody { display: block; }
.woocommerce-cart .cart_totals table.shop_table tr {
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; box-shadow: none;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  padding: 9px 0 !important; border: none; font-size: 14px; color: var(--dark);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
/* "Gutscheine hinzufügen" bewusst als Nebensache herabgestuft (kleiner,
   gedämpfter Ton) – vorher optisch gleichwertig mit allen anderen Werten
   der Box, wirkte dadurch wie das prominenteste (und einzig einladende)
   Element der ganzen Summenbox. */
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator,
.woocommerce-cart .cart_totals .cart-subtotal th,
.woocommerce-cart .cart_totals .cart-subtotal td {
  font-size: 13.5px; color: var(--txt-m);
}

/* Gesamtsumme: eigene dunkle Fläche über die volle Breite der Box statt
   nur einer Trennlinie – macht aus der Zahl den unmissverständlichen
   Abschluss/Höhepunkt der Karte statt einer weiteren Tabellenzeile. */
.woocommerce-cart .cart_totals tr.order-total {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--dark);
  margin: 12px calc(-1 * clamp(22px,2.6vw,30px)) calc(-1 * clamp(18px,2.2vw,24px));
  padding: 18px clamp(22px,2.6vw,30px) !important;
  border-radius: 0 0 18px 18px;
}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
  border: none !important; padding: 0 !important;
  font-family: var(--fs); font-size: 22px; font-weight: 700; color: var(--w) !important;
}
.woocommerce-cart .cart_totals tr.order-total th { font-size: 15px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.woocommerce-cart .cart_totals tr.order-total .woocommerce-Price-amount { color: var(--w) !important; }

.woocommerce-cart .wc-proceed-to-checkout {
  padding: 0 clamp(22px,2.6vw,30px) clamp(22px,2.6vw,30px);
  margin-top: 16px;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-checkout #place_order {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  background: #052F14 !important; color: var(--w) !important; border: none;
  padding: 17px 24px; font-size: 15px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; cursor: pointer; text-decoration: none;
  box-shadow: 0 8px 20px rgba(5,47,20,.22);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-checkout #place_order:hover {
  background: var(--mint) !important; color: var(--dark) !important;
  box-shadow: 0 10px 24px rgba(31,46,34,.18);
}

.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout #order_comments {
  width: 100%; font-family: var(--fn); font-size: 15px; color: var(--dark);
  padding: 12px 16px; border: 1.5px solid var(--rule); border-radius: 10px; background: var(--w);
}
.woocommerce-checkout .woocommerce-input-wrapper input:focus-visible,
.woocommerce-checkout #order_comments:focus-visible { border-color: var(--dark); outline: none; }
.woocommerce-checkout label { font-size: 13px; color: var(--txt-m); margin-bottom: 6px; display: inline-block; }

/* Abholung-vor-Ort-Hinweis (Local Pickup) hervorheben statt Standard-Radio */
.woocommerce-checkout ul#shipping_method,
.wc-block-checkout__shipping-option {
  list-style: none;
}
.woocommerce-checkout ul#shipping_method li,
.wc-block-checkout__shipping-option label {
  background: var(--mint-bg); border-radius: 12px; padding: 14px 16px;
  font-size: 14px; color: var(--dark);
}

/* Schmale Viewports: Karten-Grid wird zweispaltig (Bild bleibt links,
   Text/Aktionen stapeln sich darunter statt in einer engen dritten
   Spalte zu quetschen). */
@media (max-width: 640px) {
  .woocommerce-cart table.shop_table tbody tr.cart_item {
    grid-template-columns: 72px 1fr;
  }
  .woocommerce-cart table.shop_table td.product-thumbnail { grid-row: 1 / 4; }
  .woocommerce-cart table.shop_table td.product-thumbnail img { min-width: 64px; min-height: 64px; }
  .woocommerce-cart table.shop_table td.product-name,
  .woocommerce-cart table.shop_table td.product-price { grid-column: 2; }
  .woocommerce-cart table.shop_table td.product-quantity,
  .woocommerce-cart table.shop_table td.product-remove,
  .woocommerce-cart table.shop_table td.product-subtotal {
    grid-column: 2; justify-self: start; align-self: auto;
  }
  .woocommerce-cart table.shop_table td.product-remove { order: 0; }
  .woocommerce-cart table.shop_table td.product-subtotal { text-align: left; margin-top: 4px; }
}

/* ─── Warenkorb & Checkout (WooCommerce-BLOCKS-Variante) ───
   Diese Installation nutzt die Block-basierten Cart-/Checkout-Seiten
   (wc-block-*-Klassen aus Gutenberg-Blocks), nicht die klassischen
   Shortcode-Templates (table.shop_table etc., oben gestylt für den
   Fall eines Wechsels zurück). Beide Varianten werden gestylt, damit
   das Erscheinungsbild unabhängig von der WooCommerce-Konfiguration
   konsistent bleibt. Ergänzt 2026-09-09.

   Design-Überarbeitung 2026-09-11 (Rolle 2, TASK-028): Die reine
   Abstands-Nacharbeit aus TASK-027 hat das Grundproblem nicht gelöst –
   Raffi (Kunde) fand das Ergebnis "nicht schön". Bestandsaufnahme, was
   über die Abstände hinaus schwach war:
   1. Die Warenkorb-Positionen liefen als schlichte Tabellen-/Flex-Zeilen
      mit nur einer Trennlinie – während der Rest der Seite (Produkt-Grid
      `ul.products li.product`) durchgängig mit weissen Karten,
      grossem Radius (20px) und weichem Schatten arbeitet. Der Warenkorb
      wirkte dadurch wie ein Fremdkörper, nicht "aus einem Guss".
      → Jede Position bekommt jetzt exakt dieselbe Karten-Sprache
        (Radius, Schatten, Hover-Lift) wie eine Produktkarte.
   2. Produktbilder waren winzig und ohne erkennbare Kartenform (WC-Default
      ~ 64–100px, kein definiertes Seitenverhältnis) – auf einer Seite,
      die sonst mit grosszügigen 4:3-Bildern arbeitet (Produkt-Grid,
      Einzelprodukt), wirkte das mager und "billig".
      → Feste, grössere Bildgrösse mit 1:1-Ratio und demselben
        Radius-Vokabular wie im Grid.
   3. Der Mengen-Stepper der Blocks-Variante ist von Haus aus ein reines
      Zahlenfeld mit winzigen Browser-Spinner-Pfeilen (kein visuelles
      Vokabular, keine Fokus-/Hover-Zustände wie beim Rest der Seite).
      → Optisch an `.ab-qty-btn`/`.quantity.buttons-added` angeglichen
        (Pill-Form, Trennlinien, Hover-Fläche), auch wenn die Blocks-
        Variante technisch andere Klassen/keine eigenen +/− Buttons hat;
        Zahlenfeld bekommt zumindest Form, Grösse und Fokuszustand passend
        zum übrigen Stepper-Look.
   4. Die Summenbox und der "Weiter zur Kasse"-Button hatten zwar schon
      etwas Radius/Schatten, aber keine klare Gewichtung: Zwischensumme,
      Versand/Abholung und Gesamtsumme sahen alle gleich aus, der
      Haupt-CTA war nur so gross wie jeder andere Pill-Button auf der
      Seite. Ein Warenkorb-Abschluss ist aber die wichtigste Aktion auf
      dieser Seite und sollte auch so wirken (Hierarchie = Handlung).
      → Gesamtsumme deutlich abgesetzt (Trennlinie, grössere Playfair-
        Zahl), CTA-Button grösser/fett mit Schatten statt Standardgrösse,
        Summenbox bekommt einen dezenten Mint-Rand als Wiedererkennung
        zur Primärfarbe der Seite (wie z.B. Sale-Badges/Buttons).
   5. Typografie-Kontrast: Produktname lief in derselben Grösse wie die
   Preisangabe, dadurch kein klarer Scan-Pfad "Was ist das – Wie viel
   kostet es". Produktname jetzt in Playfair Display (wie Produkt-
      Grid-Titel), Preis bleibt DM Sans, aber sichtbar kleiner/leichter.
   Ergebnis: keine reine "mehr Padding"-Nacharbeit, sondern dieselbe
   Karten-/Typo-/Button-Sprache wie im übrigen Shop, konsequent auf die
   Cart-Blocks-DOM-Struktur angewendet (nur CSS, kein Markup-Zugriff
   nötig – die WC-Blocks-Klassen sind fix vorgegeben). */
.wc-block-cart, .wc-block-checkout {
  /* Horizontale Ausrichtung (max-width/Zentrierung/Seiten-Padding) kommt
     jetzt vom gemeinsamen .container.section-Wrapper - hier nur noch
     vertikaler Abstand, sonst stimmt die Ausrichtung mit dem Titel
     nicht mehr überein (siehe Kommentar oben bei .container.section). */
  padding-top: clamp(32px,4vw,56px);
  padding-bottom: clamp(72px,8vw,120px);
}

/* Seitentitel "Cart"/"Warenkorb": gleiche Headline-Sprache wie
   .page-title (Playfair Display, grosszügige Grösse/Abstand). Aus
   TASK-027 übernommen, weiterhin gültig – reine Typografie-Angleichung,
   kein Abstands-Fix. */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.wc-block-cart + h1, .wc-block-checkout + h1,
h1.wp-block-post-title {
  font-family: var(--fs);
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--dark);
  margin: 0 0 clamp(24px,3vw,40px);
}

/* ── Warenkorb-Positionen als echte Karten ──
   Statt einer Liste aus Zeilen (WC-Default: praktisch kein Innenabstand,
   nur eine unauffällige Trennlinie) bekommt jede Position dieselbe
   Kartensprache wie `ul.products li.product`: weisser Grund, grosser
   Radius, weicher Schatten, dezenter Hover-Lift. Macht aus einer Liste
   von Tabellenzeilen eine Reihe klar abgegrenzter Produktobjekte –
   die Position wirkt wie "ein Ding, das im Warenkorb liegt", nicht wie
   eine Datenzeile. Zwischenraum zwischen den Karten übernimmt die
   Trennwirkung, eine border-bottom zwischen den Zeilen ist damit
   überflüssig und wurde entfernt. */
/* WICHTIG (TASK-032-Fix): `.wc-block-cart-items` ist im DOM ein echtes
   <table>, `.wc-block-cart-items__row` ein echtes <tr>, die drei Spalten
   (Bild/Produkt/Summe) sind <td>. Browser ignorieren auf <tr>/<td> in
   Tabellen-Display-Kontext generell border-radius/box-shadow, und
   padding wirkt dort visuell anders als erwartet – deshalb kam die
   ganze Karten-Optik aus TASK-028 (Radius, Schatten, Innenabstand)
   bisher NICHT auf dem Bildschirm an, obwohl die Selektoren korrekt
   auf echte Elemente trafen (mit Debug-Outline sichtbar gemacht und
   bestätigt). Fix: Tabelle/Zeile/Zelle auf Block-/Flex-Display
   umschalten, dann greifen Radius/Schatten/Padding wie bei jedem
   anderen Element. 2026-09-11. */
.wc-block-cart-items {
  border-spacing: 0;
  display: block;
  width: 100%;
}
.wc-block-cart-items__header { display: none; }
.wc-block-cart-items__row,
.wc-block-cart-item {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  background: var(--w);
  border-radius: 18px;
  box-shadow: 0 2px 14px rgba(31,46,34,.07);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
  padding: clamp(18px,2.2vw,26px) !important;
  margin-bottom: 16px;
}
.wc-block-cart-items__row:hover,
.wc-block-cart-item:hover {
  box-shadow: 0 10px 26px rgba(31,46,34,.12);
}
.wc-block-cart-items__row:last-child,
.wc-block-cart-item:last-child { margin-bottom: 0; }
.wc-block-cart-items__row > td,
.wc-block-cart-item > td {
  display: block;
  padding: 0 !important;
  border: none !important;
}
.wc-block-cart-item__image { flex: 0 0 auto; }
.wc-block-cart-item__product { flex: 1 1 240px; min-width: 0; }
.wc-block-cart-item__total {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  /* Gleiche Schrift/Grösse wie der Shop-Grid-Preis (Kundenwunsch
     2026-09-15: "alle font gleich machen") statt eigener Playfair-
     Auszeichnung – einheitliches Design über beide Seiten. !important
     auf allen vier Eigenschaften nötig: WooCommerce-Blocks-Core-CSS
     (cart.css) setzt ".wc-block-cart-item__total, table.wc-block-
     cart-items .wc-block-cart-items__row .wc-block-cart-item__total"
     mit font-size:var(--wp-preset-font-size-small,14px) und
     line-height:1.4 – ohne !important gewann diese Regel trotz
     scheinbar identischem main.css-Wert, wieder dasselbe wiederkehrende
     WC-Blocks-Muster wie bei Titel/Beschreibung (TASK-042/043). Bug
     gefunden 2026-09-15 (Kundenmeldung "preis bei cart nicht gleich
     gross wie bei shop seite"). */
  font-family: var(--fn) !important; font-weight: 500 !important;
  font-size: 16px !important; line-height: 1.2 !important; color: var(--dark) !important;
}

/* Produktbild: von "WC liefert irgendeine kleine Grösse" auf ein festes,
   grosszügiges Format mit demselben Radius wie das Produkt-Grid-Bild
   angehoben (dort: 4:3, hier bewusst 1:1 – im Warenkorb steht das Bild
   neben viel Text/Steuerelementen, ein Quadrat balanciert die Zeile
   besser als ein breites Rechteck und bleibt bei jeder Produktfoto-
   Zuschneidung stabil). */
.wc-block-cart-item__image { margin-right: 20px !important; }
.wc-block-cart .wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  border-radius: 14px;
  width: 96px; height: 96px; object-fit: cover;
  display: block;
}

/* Produktname in der Headline-Schrift statt Fliesstext-Schrift: erzeugt
   den Scan-Pfad "Titel zuerst, Preis danach" wie im Produkt-Grid
   (dort: Playfair 21px/700 für den Titel, DM Sans fürs Übrige). Im
   Warenkorb etwas kleiner, weil pro Zeile weniger Raum als auf einer
   Grid-Karte zur Verfügung steht. */
.wc-block-components-product-name {
  font-family: var(--fs);
  /* Identische Werte wie der Shop-Grid-Titel (.woocommerce-loop-product__title,
     TASK-040/041) statt eigener, kleinerer Warenkorb-Grösse – Kundenwunsch
     2026-09-15: "mache alle schrift grössen und abstände gleich wie bei
     der produkt seite, einheitlicher design". !important auf ALLEN vier
     Eigenschaften nötig: WooCommerce Blocks liefert eine eigene, sehr
     spezifische Core-Regel (".editor-styles-wrapper table.wc-block-
     cart-items .wc-block-cart-items__row .wc-block-components-product-
     name, table.wc-block-cart-items .wc-block-cart-items__row .wc-
     block-components-product-name") mit font-weight:500 und
     line-height:1.4 – ohne !important gewinnt diese Regel trotz
     korrekter font-size, wodurch der Titel dünner/lockerer wirkte als
     im Shop-Grid. Bug gefunden 2026-09-15 per DevTools-Vergleich
     (Kunde). */
  color: var(--dark) !important; font-weight: 700 !important;
  font-size: clamp(24px, 2.2vw, 30px) !important; line-height: 1.15 !important;
  letter-spacing: -.01em;
  margin-bottom: 6px; display: inline-block;
}
.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata__description p {
  /* !important auf allen vier Eigenschaften nötig: WooCommerce Blocks
     liefert eine eigene, hochspezifische Core-Regel
     (.wc-block-components-product-metadata .wc-block-components-
     product-metadata__description>p) mit font-size über ein
     wp-preset-x-small-Token und line-height:1.4 – exakt dasselbe
     Muster wie beim Produkttitel (TASK-042). Bug gefunden 2026-09-15
     per DevTools-Vergleich (Kunde, Screenshot-Beleg). */
  font-family: var(--fn) !important; font-size: 16px !important;
  line-height: 1.55 !important; color: var(--txt-m) !important;
  margin: 0 0 12px !important;
}
/* TASK-048 (Kundenwunsch, 2026-09-15): Preis erschien im Warenkorb
   zweimal pro Position (einmal hier direkt unter dem Produkttitel,
   einmal rechts als Zeilensumme .wc-block-cart-item__total). Die
   Zeilensumme rechts bleibt (entspricht der Optik auf der Shop-Seite),
   dieser doppelte Preis unter dem Titel wird komplett ausgeblendet. */
.wc-block-cart-item__prices {
  display: none !important;
}

/* Allergen-Icons im Warenkorb (Kundenwunsch 2026-09-15, "cart seite
   dem entsprechend anpassen") – kompaktere Variante derselben Optik
   wie im Shop-Grid (.ab-loop-allergens), gerendert über den
   woocommerce_get_item_data-Filter (inc/woocommerce.php), da die
   Blocks-Cart klassische Action-Hooks nicht bedient. WooCommerce
   Blocks rendert item_data-Einträge in einer eigenen
   .wc-block-components-product-metadata-Zeile; dort direkt gestylt
   statt einer eigenen Wrapper-Klasse, weil kein <ul>/<li>-Markup zur
   Verfügung steht (item_data akzeptiert nur HTML-String als Value). */
.wc-block-components-product-metadata .ab-cart-allergens {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  list-style: none; margin: 0 0 12px; padding: 0;
}
.wc-block-components-product-metadata .ab-cart-allergen {
  display: inline-flex; align-items: center; gap: 6px;
}
.wc-block-components-product-metadata .ab-cart-allergen:first-child {
  margin-left: -15px;
}
/* Icons hier als CSS-Hintergrundbild (data-URI) statt Inline-<svg>: die
   WooCommerce-Blocks-Cart sanitized jeden item_data-Wert clientseitig
   durch eine feste Tag-Whitelist (a, b, em, i, strong, br, abbr, span),
   <svg> ist NICHT enthalten – Inline-SVG wurde dadurch unsichtbar
   herausgefiltert, nur der leere Kreis-Badge blieb übrig. Bug gefunden
   2026-09-15 (Kundenmeldung "icon auf cart seite sieht man nicht
   mehr"). Siehe auch Kommentar in inc/woocommerce.php
   (artbakery_cart_item_allergens()). */
.wc-block-components-product-metadata .ab-cart-allergen__glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background-color: var(--mint-bg);
}
.wc-block-components-product-metadata .ab-cart-allergen__glyph--gluten {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23233527'%20stroke-width='1.6'%3E%3Cpath%20d='M12%202c1%203-1%204-1%206s2%203%202%205-2%203-1%206'%20stroke-linecap='round'/%3E%3Cpath%20d='M7%206c2%201%202%203%202%203M17%206c-2%201-2%203-2%203M6%2012c2%20.5%202.5%202%202.5%202M18%2012c-2%20.5-2.5%202-2.5%202M8%2018c1.5-.5%202-1.5%202-1.5M16%2018c-1.5-.5-2-1.5-2-1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
}
.wc-block-components-product-metadata .ab-cart-allergen__glyph--laktose {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23233527'%20stroke-width='1.6'%3E%3Cpath%20d='M9%202h6l1%203-1.5%202v11a2%202%200%200%201-2%202h-1a2%202%200%200%201-2-2V7L8%205l1-3Z'%20stroke-linejoin='round'/%3E%3Cpath%20d='M8%2012h8'%20stroke-dasharray='1.5%202'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
}
.wc-block-components-product-metadata .ab-cart-allergen__glyph--ei {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23233527'%20stroke-width='1.6'%3E%3Cellipse%20cx='12'%20cy='13'%20rx='6'%20ry='8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
}
.wc-block-components-product-metadata .ab-cart-allergen__glyph--nuesse {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23233527'%20stroke-width='1.6'%3E%3Cpath%20d='M12%203c4%200%207%203.5%207%208%200%205-3%2010-7%2010s-7-5-7-10c0-4.5%203-8%207-8Z'/%3E%3Cpath%20d='M12%208v9M9%2012h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
}
.wc-block-components-product-metadata .ab-cart-allergen__glyph--erdnuss {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23233527'%20stroke-width='1.6'%3E%3Cpath%20d='M9%204C6%204%204%206.5%204%209.5c0%202%201%203%201%204.5S4%2016%204%2018c0%202.5%202%204%204.5%204S13%2020.5%2013%2018c0-1.5-1-2.5-1-4.5S13%2011%2013%209.5C13%206.5%2012%204%209%204Z'/%3E%3Cpath%20d='M15%206c3%200%205%202.5%205%205.5%200%201.5-.8%202.3-.8%203.5s.8%202%20.8%203.5c0%203-2%204.5-4.5%204.5'%20/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
}
.wc-block-components-product-metadata .ab-cart-allergen__glyph--soja {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23233527'%20stroke-width='1.6'%3E%3Ccircle%20cx='8'%20cy='9'%20r='3'/%3E%3Ccircle%20cx='16'%20cy='9'%20r='3'/%3E%3Ccircle%20cx='12'%20cy='16'%20r='3'/%3E%3Cpath%20d='M8%2012v0M16%2012v0'%20/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
}
.wc-block-components-product-metadata .ab-cart-allergen__glyph--sesam {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23233527'%20stroke-width='1.6'%3E%3Cellipse%20cx='8'%20cy='9'%20rx='2.6'%20ry='4'%20transform='rotate(-20%208%209)'/%3E%3Cellipse%20cx='15'%20cy='9'%20rx='2.6'%20ry='4'%20transform='rotate(15%2015%209)'/%3E%3Cellipse%20cx='12'%20cy='17'%20rx='2.6'%20ry='4'%20transform='rotate(-2%2012%2017)'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
}
.wc-block-components-product-metadata .ab-cart-allergen__glyph--senf {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23233527'%20stroke-width='1.6'%3E%3Cpath%20d='M12%2021c-3-3-3-7-3-9a3%203%200%200%201%206%200c0%202%200%206-3%209Z'/%3E%3Ccircle%20cx='9'%20cy='7'%20r='1'%20fill='%23233527'%20stroke='none'/%3E%3Ccircle%20cx='15'%20cy='9'%20r='1'%20fill='%23233527'%20stroke='none'/%3E%3Ccircle%20cx='12'%20cy='5'%20r='1'%20fill='%23233527'%20stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
}
.wc-block-components-product-metadata .ab-cart-allergen__label {
  font-family: var(--fn) !important; font-size: 12.5px !important; color: var(--txt-m) !important; line-height: 1.2 !important;
}
/* WC-Blocks-Default für item_data-Zeilen (kleine graue dt/dd-Paare) hier
   ausgeblendet, da dieser Eintrag bewusst ohne Label-Präfix gerendert
   wird (leerer 'key' in artbakery_cart_item_allergens()). */
.wc-block-components-product-metadata .ab-cart-allergens + * { margin-top: 4px; }

.wc-block-cart-item__quantity { margin-top: 14px; }

/* Mengenfeld: an die Pill-Stepper-Optik von .quantity.buttons-added
   angeglichen (Radius, Rahmenfarbe, Hintergrund), obwohl die Cart-
   Blocks-Variante kein eigenes +/− Buttonpaar rendert – zumindest Form
   und Fokuszustand sollen sich wie derselbe Baustein anfühlen wie im
   Produkt-Grid und auf der Einzelprodukt-Seite. */
.wc-block-components-quantity-selector {
  border-radius: 999px !important; border-color: var(--rule) !important;
  background: var(--w);
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  font-family: var(--fn); text-align: center;
}
.wc-block-components-quantity-selector:focus-within {
  border-color: var(--dark) !important;
}
.wc-block-cart-item__remove-link {
  font-size: 13px; margin-top: 10px; display: inline-block;
  color: var(--txt-m);
  transition: color .2s var(--ease);
}
.wc-block-cart-item__remove-link:hover { color: var(--terra-btn); }

/* ── Warenkorb-Summe (rechte Spalte) ──
   Eigene Karte mit dezentem Mint-Rahmen statt einer optisch gleich-
   gewichtigen weissen Box wie die Produktkarten links: die Summenbox
   ist der Abschluss des Warenkorbs, sie soll sich als "eigener Block
   mit Handlungsaufforderung" vom Rest absetzen, nicht als eine weitere
   Karte in der Reihe wirken. Mint-Rahmen greift die Primärfarbe der
   Seite auf (Buttons/Topbar), ohne dass ein Fliesstext auf Mint gesetzt
   wird – reine Rahmenfarbe, kein WCAG-Text-Kontrastproblem. */
.wc-block-cart__totals-title { display: none; }
.wc-block-components-totals-wrapper {
  padding: clamp(22px,2.6vw,30px) !important;
}
.wc-block-components-totals-wrapper + .wc-block-components-totals-wrapper {
  margin-top: 16px;
}
.wc-block-components-totals-item {
  padding-block: 10px !important;
}
.wc-block-components-totals-item__label { font-size: 14px; color: var(--txt-m); }

/* Gesamtsumme deutlich vom Rest der Summenzeilen abgesetzt (Trennlinie
   + grössere, fette Playfair-Zahl statt gleicher Optik wie Zwischen-
   summe/Versand): auf der bisherigen Fassung sahen alle Summenzeilen
   gleich aus, die Gesamtsumme ging optisch unter. Wichtigster Wert der
   Seite verdient den stärksten visuellen Akzent. */
.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--rule);
  margin-top: 6px; padding-top: 16px !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--fs); font-size: 18px; font-weight: 700; color: var(--dark);
}
.wc-block-cart__submit-container { margin-top: 24px; }

/* Zweispaltiges Layout (Produktliste links, Warenkorb-Summe rechts):
   grosszügiger Spaltenabstand statt dem knappen WC-Default, Summen-
   Spalte etwas breiter fürs Auge. Aus TASK-027 übernommen. */
.wc-block-components-sidebar-layout,
.wc-block-cart .wp-block-columns {
  gap: clamp(32px,4vw,64px) !important;
  align-items: flex-start;
}
.wc-block-components-sidebar {
  gap: 16px;
  position: sticky; top: 24px;
}
/* TASK-033 (Kundenwunsch, 2026-09-15): Warenkorb-Summe/Zahlungsbox soll
   genauso breit sein wie die Warenkorb-Positionen darüber, statt schmaler
   zu wirken. WooCommerce Blocks' eigenes CSS gibt Hauptspalte/Sidebar zwar
   width:100% bei gestapeltem Layout (@container max-width:699px), aber
   Panel/Totals-Box selbst haben keine explizite volle Breite – hier
   sicherheitshalber erzwungen, unabhängig vom Breakpoint. */
.wc-block-components-totals-wrapper,
.wc-block-components-panel {
  width: 100%;
  box-sizing: border-box;
}

/* TASK-046 (Kundenwunsch, 2026-09-15): Warenkorb-Summe-Block soll auf
   Desktop rechts NEBEN der Produktliste stehen statt darunter gestapelt
   zu sein. WooCommerce Blocks entscheidet Spalten- vs. Stapel-Layout
   selbst per @container-Query auf .wc-block-cart (Schwelle 699px,
   bezogen auf die INNERE Breite dieses Elements, nicht auf den
   Browser-Viewport) – bei einem schmaleren Browserfenster/Container
   (z. B. geteilter Bildschirm, DevTools offen, kleinerer Monitor) kippt
   diese Query auch auf "Desktop" in den gestapelten Modus, obwohl genug
   Platz für zwei Spalten da wäre. Hier deshalb zusätzlich über eine
   normale @media-Regel (bezogen auf den echten Viewport, nicht den
   Container) erzwungen – mit !important, da @container- und normale
   Regeln gleiche Spezifität haben und sonst die spätere/@container-
   Regel gewinnen könnte. */
@media (min-width: 641px) {
  /* Auf .woocommerce-cart eingeschraenkt (2026-09-15 Nachtrag): diese
     Regel war vorher global und betraf dadurch ungewollt auch den
     Checkout - dort soll die Bestelluebersicht aber NICHT als schmale
     rechte Spalte, sondern als volle Breite oben stehen (siehe
     .woocommerce-checkout-Regel weiter unten). */
  .woocommerce-cart .wc-block-components-sidebar-layout {
    flex-direction: row !important;
  }
  /* WICHTIG: .wc-block-components-sidebar-layout hat oben eine
     Flex-'gap' (clamp(32px,4vw,64px)) fuer den Spaltenabstand. Bei
     Breiten von genau 65% + 35% = 100% bleibt fuer diesen Gap KEIN
     Platz mehr - der Flex-Container bricht dann trotz flex-direction:
     row per flex-wrap:wrap auf zwei Zeilen um (das war der eigentliche
     Grund, warum die Summen-Box trotz "gewinnender" 65%/35%-Regeln
     immer noch untereinander statt nebeneinander stand). Fix: die
     halbe Gap-Breite von jeder Spalte abziehen, damit beide Spalten
     inkl. Gap exakt 100% ergeben. */
  .woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-main {
    width: calc(65% - (clamp(32px,4vw,64px) / 2)) !important;
    padding-right: 0 !important;
  }
  .woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    width: calc(35% - (clamp(32px,4vw,64px) / 2)) !important;
    padding: 0 !important;
  }

  /* TASK-050 (Kundenwunsch, 2026-09-15): Bestelluebersicht auf dem
     Checkout soll auf Desktop GANZ OBEN in voller Breite stehen, vor
     "Kontaktinformationen" - nicht mehr als schmale rechte Spalte
     daneben. Spalten-Layout wird hierfuer auf eine einzige Spalte
     zurueckgestellt, die Reihenfolge per "order" umgedreht (Sidebar
     zuerst), beide Bloecke auf volle Breite gesetzt. */
  .woocommerce-checkout .wc-block-components-sidebar-layout {
    flex-direction: column !important;
  }
  .woocommerce-checkout .wc-block-components-main,
  .woocommerce-checkout .wc-block-components-sidebar {
    width: 100% !important;
    padding: 0 !important;
  }
  .woocommerce-checkout .wc-block-components-sidebar {
    order: -1 !important;
    position: static !important;
    margin-bottom: clamp(24px,3vw,40px);
  }
}
.wc-block-components-sidebar {
  width: 100%;
  box-sizing: border-box;
}

/* Haupt-CTA "Weiter zur Kasse"/"Bestellung aufgeben": grösser und mit
   sichtbarem Schatten statt gleich gewichtet wie jeder andere Pill-
   Button der Seite (z.B. "In den Warenkorb" im Grid). Das ist die
   wichtigste Handlung auf der Warenkorb-Seite – visuelles Gewicht soll
   das widerspiegeln (grössere Schrift, mehr Innenabstand, Schatten der
   bei Hover in Mint-Hintergrund übergeht). */
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-checkout__actions .wc-block-components-button,
a.wc-block-components-button.wc-block-cart__submit-button,
button.wc-block-components-checkout-place-order-button {
  width: 100%;
  background: #052F14 !important; color: var(--w) !important; border: none !important;
  border-radius: 999px !important; padding: 18px 28px !important;
  font-family: var(--fn) !important; font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(5,47,20,.28) !important;
  transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.wc-block-cart__submit-container .wc-block-components-button:hover,
.wc-block-checkout__actions .wc-block-components-button:hover,
a.wc-block-components-button.wc-block-cart__submit-button:hover,
button.wc-block-components-checkout-place-order-button:hover {
  background: var(--mint) !important; color: var(--dark) !important;
  box-shadow: 0 8px 22px rgba(31,46,34,.2) !important;
  transform: translateY(-2px);
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--dark); font-weight: 600;
}
.wc-block-components-panel, .wc-block-components-totals-wrapper {
  background: var(--w); border-radius: 18px !important;
  border: 1.5px solid var(--mint-d);
  box-shadow: 0 4px 18px rgba(31,46,34,.08);
}
/* TASK-047 (Kundenwunsch, 2026-09-15): Gutschein-Feld "klebt" ohne
   Innenabstand und wirkt mit zu kleiner Schrift. WooCommerce-Blocks-Core
   gibt dem Panel links/rechts nur bei einer Container-Breite ab 700px
   Padding (@container (min-width:700px) .wc-block-components-sidebar
   .wc-block-components-panel{padding-left:16px;padding-right:16px}) -
   auf schmaleren Breiten (z.B. Mobile/gestapeltes Layout) bleibt es
   komplett ohne Innenabstand. Hier deshalb unconditional (ohne
   Container-Query) erzwungen, plus grössere, einheitliche Schriftgrösse
   fürs Umschalt-"Gutscheine hinzufügen" und das Coupon-Eingabefeld. */
.wc-block-components-panel {
  padding: 16px !important;
}
.wc-block-components-panel__button {
  font-family: var(--fn) !important;
  font-size: 15px !important;
  padding: 4px 0 !important;
}
.wc-block-components-totals-coupon__form {
  margin-top: 12px !important;
}
.wc-block-components-totals-coupon__input input,
.wc-block-components-totals-coupon__button {
  font-family: var(--fn) !important;
  font-size: 15px !important;
}
.wc-block-components-totals-coupon__input input {
  padding: 10px 14px !important;
}
/* TASK-047 Nachtrag: Browser-Standard-Fokusring (orange) ersetzt durch
   die Website-eigene Mint-Akzentfarbe. */
.wc-block-components-totals-coupon__input input:focus {
  outline: 2px solid var(--mint-d) !important;
  outline-offset: 1px;
  border-color: var(--mint-d) !important;
}
.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control-accordion-option {
  border-radius: 12px !important;
}
.wc-block-components-radio-control__input:checked ~ .wc-block-components-radio-control__label-group {
  color: var(--dark);
}
.wc-block-components-text-input input,
.wc-block-components-combobox-control input,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"] {
  border-radius: 10px !important; border-color: var(--rule) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-checkout input:focus { border-color: var(--dark) !important; box-shadow: none !important; }


/* Hinweis "keine Zahlungsarten verfügbar" (solange kein Payment-Provider
   konfiguriert ist) im Theme-Look statt WC-Standardrot. */
.wc-block-components-notice-banner {
  background: var(--mint-bg) !important; border: none !important; border-radius: 14px !important;
  color: var(--dark) !important;
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__icon svg { fill: var(--dark) !important; }

/* TASK-049 (Kundenwunsch, 2026-09-15): Produktdarstellung in der
   Checkout-"Bestellübersicht" verbessern/an den Warenkorb angleichen.
   WICHTIG: Die Bestellübersicht ist strukturell KEINE Kopie der
   Cart-Hauptspalte, sondern eine schmale Sidebar (.wc-block-components-
   order-summary-item statt .wc-block-cart-items__row) - real gemessen
   nur ~227px Innenbreite. Die globalen Cart-Regeln oben (Titel
   clamp(24-30px) !important, 16px Beschreibung etc.) erbten
   unverändert in diese schmale Spalte und liessen den Titel
   Wort-für-Wort umbrechen (z.B. "Freddy's Butterzopf" in vier Zeilen)
   und das Bild bis auf absurde Höhe strecken, weil die Zeile sich an
   der Textspalte ausrichtete. Fix: eigene, kompaktere aber optisch
   gleiche Variante (gleiche Schriftart/Farben/Allergie-Icons wie
   überall) speziell für diesen schmalen Kontext - WooCommerce-Core
   selbst nutzt hier ursprünglich auch nur 14px, nicht 30px. */
.woocommerce-checkout .wc-block-components-order-summary-item {
  align-items: flex-start !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__image {
  width: 56px !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__image img {
  width: 56px !important; height: 56px !important;
  object-fit: cover; border-radius: 10px;
}
.woocommerce-checkout .wc-block-components-product-name {
  font-size: 15px !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
  display: block !important;
}
.woocommerce-checkout .wc-block-components-product-metadata__description,
.woocommerce-checkout .wc-block-components-product-metadata__description p {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  margin: 0 0 4px !important;
}
.woocommerce-checkout .ab-cart-allergens {
  gap: 4px 8px !important;
}
.woocommerce-checkout .ab-cart-allergen:first-child {
  margin-left: 0 !important;
}
.woocommerce-checkout .ab-cart-allergen__glyph {
  width: 18px !important; height: 18px !important;
}
.woocommerce-checkout .ab-cart-allergen__glyph::before,
.woocommerce-checkout .ab-cart-allergen__glyph {
  background-size: 11px 11px !important;
}
.woocommerce-checkout .ab-cart-allergen__label {
  font-size: 10.5px !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
  font-size: 14px !important;
}

/* Leerer Shop / leerer Warenkorb */
.woocommerce-info {
  background: var(--mint-bg); color: var(--dark);
  border: none; border-radius: 14px;
  padding: 20px 24px; margin: 20px var(--section-px);
  font-size: 15px; list-style: none;
}
.woocommerce-info a { color: var(--dark); text-decoration: underline; }

/* ─── Mobile ─── */
@media (max-width: 767px) {
  /* Eine Spalte statt zwei: bei zwei Spalten war die Karte auf Mobile zu
     schmal für Titel/Menge+Button, der Titel klebte am Kartenrand
     (fehlendes Padding kam gar nicht erst zum Tragen, weil zusätzlich der
     Warenkorb-Button rechts aus der Karte herauslief – kein Platz für
     Menge + Button nebeneinander in der halben Kartenbreite). Bug
     gemeldet 2026-09-09 per Screenshot-Annotation. */
  ul.products {
    grid-template-columns: 1fr;
    gap: 20px;
    /* Seitlicher Abstand mobil entfernt (Kundenwunsch 2026-09-15:
       "mobile produkt ganze breite benutzen") – diese spätere
       767px-Media-Query überschrieb sonst die padding-left/right:0-Regel
       aus der 640px-Query weiter unten im File. */
    padding: 20px 0 48px !important;
  }
  ul.products li.product .woocommerce-loop-product__title { font-size: 26px !important; line-height: 1.2; padding: 18px 18px 2px; padding-top: 30px !important; }
  ul.products li.product .ab-loop-excerpt { padding: 0 18px; }
  ul.products li.product .price { font-size: 15px; padding: 0 18px; margin-bottom: 14px; }
  ul.products li.product .button {
    padding: 12px 18px; font-size: 12.5px;
  }
  /* Menge + Button auf Mobile nebeneinander lassen (genug Breite bei einer
     Spalte), aber Rand-Padding an die grössere Kartenbreite anpassen.
     min-width: 0 auf dem Button ist hier der eigentliche Fix: ohne das
     verhindert der implizite Flex-Minimum-Content-Width-Mechanismus, dass
     der Button schmaler als sein Text werden kann – er ragte dadurch über
     den Kartenrand hinaus statt umzubrechen. Mit min-width:0 darf der
     Button so schmal werden wie der Platz erlaubt, der Text bricht dann
     sauber zweizeilig um (kein weisses Overflow-Artefakt mehr). Bug
     gefunden 2026-09-09 beim Mobile-Test dieser Media Query. */
  ul.products li.product .ab-loop-cart-form { margin: 0 18px 18px; gap: 8px; }
  ul.products li.product .ab-loop-cart-form .button {
    flex: 1 1 auto; min-width: 0; padding: 12px 10px; font-size: 11.5px; letter-spacing: .03em;
    white-space: normal; line-height: 1.3; text-align: center;
  }
  ul.products li.product .ab-loop-cart-form .quantity.buttons-added { flex-shrink: 0; }
  ul.products li.product .ab-loop-cart-form .ab-qty-btn { width: 28px; font-size: 14px; }
  ul.products li.product .ab-loop-cart-form .quantity.buttons-added .qty { width: 26px; font-size: 13px; }

  .single-product div.product { grid-template-columns: minmax(0, 1fr); }
  .single-product form.cart { flex-direction: column; align-items: stretch; }
  .single-product button.single_add_to_cart_button { width: 100%; }

  .woocommerce-cart table.shop_table,
  .woocommerce-checkout table.shop_table { font-size: 13px; }
  .woocommerce-cart table.shop_table td,
  .woocommerce-cart table.shop_table th { padding: 10px 8px; }

  /* Warenkorb-Blocks-Karten auf Mobile: Sidebar-Karte nicht mehr sticky
     (Spalten stapeln sich untereinander, ein "klebender" zweiter Block
     unter der Produktliste hätte hier keinen Nutzen und würde nur
     Scroll-Raum blockieren) und Produktbild etwas kompakter, damit auf
     schmalen Screens genug Platz für Titel/Menge/Preis bleibt. */
  .wc-block-components-sidebar { position: static; }
  .wc-block-cart .wc-block-cart-item__image img,
  .wc-block-components-order-summary-item__image img {
    width: 72px; height: 72px;
  }
}


/* ---------------------------------------------------------------------
 * Leerer Warenkorb (WooCommerce Cart-Block, "Empty Cart"-Unterblock):
 * dasselbe Warenkorb-Icon wie in der Navigationsbar (header.php, Klasse
 * .ab-cart), statt eines eigenständigen Illustrations-Icons.
 *
 * Hintergrund (Kundenwunsch 2026-09-15, Screenshot "mache diese seite
 * schöner passend für die bäcker seite"): Das WooCommerce-Standard-Icon
 * ist eine weinende Emoji-Silhouette (WooCommerce cart.css, Klasse
 * .wc-block-cart__empty-cart__title.with-empty-cart-icon:before,
 * eingebettet als mask-image-Data-URI, eingefärbt über currentColor). Für
 * eine Bäckerei unpassend, auch in Markenfarbe. Überschrift/Text wurden
 * direkt im Block-Editor (Seite "Warenkorb") umformuliert; dieses Icon
 * wird hier per CSS ersetzt, da der Block selbst kein Icon-Auswahlfeld
 * anbietet.
 *
 * Mehrere Gebäck-Icon-Versionen wurden verworfen (Kundenfeedback
 * 2026-09-15: rundes Brotlaib-Icon wirkte bei 38px wie eine
 * Toilettenschüssel; Baguette-Form blieb ein unklarer Klecks; Croissant-
 * Silhouette wurde danach explizit abgelehnt zugunsten des bestehenden
 * Warenkorb-Icons aus der Navigation). Finale Lösung: identisches SVG wie
 * .ab-cart in header.php (Linienstil, stroke="currentColor") – Konsistenz
 * mit dem Nav-Icon statt eines neuen Symbols.
 * ------------------------------------------------------------------- */
.wc-block-cart__empty-cart__title.with-empty-cart-icon:before {
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIzOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgo8Y2lyY2xlIGN4PSI5IiBjeT0iMjEiIHI9IjEuNCIvPgo8Y2lyY2xlIGN4PSIxOCIgY3k9IjIxIiByPSIxLjQiLz4KPHBhdGggZD0iTTIuNSAzaDJsMi40IDEyLjJhMiAyIDAgMCAwIDIgMS42aDcuOWEyIDIgMCAwIDAgMi0xLjZMMjEgN0g2Ii8+Cjwvc3ZnPg==);
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIzOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgo8Y2lyY2xlIGN4PSI5IiBjeT0iMjEiIHI9IjEuNCIvPgo8Y2lyY2xlIGN4PSIxOCIgY3k9IjIxIiByPSIxLjQiLz4KPHBhdGggZD0iTTIuNSAzaDJsMi40IDEyLjJhMiAyIDAgMCAwIDIgMS42aDcuOWEyIDIgMCAwIDAgMi0xLjZMMjEgN0g2Ii8+Cjwvc3ZnPg==);
}

.single-product .ab-product-description { margin-top: 24px; font-size: 16px; line-height: 1.8; color: var(--txt-m); }
.single-product .ab-product-description h2 { font-size: 24px; line-height: 1.3; margin-bottom: 14px; color: var(--dark); }

/* Desktop: Produktnavigation direkt über dem Titel in der rechten Spalte. */
@media (min-width: 768px) {
  .ab-product-navigation--outside { display: none; }
  .summary .ab-product-navigation--inside { justify-content: flex-start; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
  .summary .ab-product-navigation--inside a,
  .summary .ab-product-navigation--inside > span { padding: 13px 18px; }
}
@media (max-width: 767px) {
  .ab-product-navigation--inside { display: none; }
  .single-product .summary { padding-inline: 24px; }
  .ab-product-navigation--outside > [data-arrow] {
    position: fixed; top: 67%; transform: translateY(-50%); z-index: 90;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border-radius: 50%;
    background: var(--mint); color: var(--dark); font-size: 0;
    box-shadow: 0 3px 12px rgba(31,46,34,.2);
  }
  .ab-product-navigation--outside > [data-arrow]::before { content: attr(data-arrow); font-size: 24px; line-height: 1; }
  .ab-product-navigation--outside > .ab-product-navigation__previous { left: 8px; }
  .ab-product-navigation--outside > .ab-product-navigation__next { right: 8px; }
}

.ab-product-awards { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 20px 0 28px; }
.ab-product-awards .ab-product-awards__image { width: calc((100% - 32px) / 3); max-width: 120px; height: 120px; object-fit: contain; }
@media (max-width: 767px) {
  .single-product .summary { display: flex; flex-direction: column; }
  .single-product .summary > * { order: 3; }
  .single-product .summary > .product_title { order: 1; }
  .single-product .summary > .ab-product-awards { order: 2; margin: 12px 0 20px; }
  .single-product .summary > .ab-availability-badge { align-self: flex-start; }
}

ul.products li.product .ab-loop-awards { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }
.woocommerce ul.products li.product .ab-loop-awards img {
  position: static !important; width: 64px !important; height: 64px !important;
  aspect-ratio: auto; object-fit: contain; margin: 0; border-radius: 0; padding: 0;
}

/* Shopkarten: Medaillen unter dem Namen, Allergene unter dem linken Bild. */
ul.products li.product { --award-photo-size: clamp(140px,20vw,240px); }
ul.products li.product .ab-loop-awards { position: static; width: auto; justify-content: flex-start; margin: 12px 0 16px; gap: 10px; }
ul.products li.product .ab-loop-awards img { transform: none; }
ul.products li.product .ab-loop-allergens {
  position: absolute; left: 22px; top: calc(22px + var(--award-photo-size) + 16px);
  width: var(--award-photo-size); justify-content: flex-start; margin: 0; gap: 10px 14px;
}
ul.products li.product .ab-loop-allergen:first-child { margin-left: 0; }
ul.products li.product:has(.ab-loop-allergens) a.woocommerce-LoopProduct-link { min-height: calc(var(--award-photo-size) + 132px); }
@media (min-width: 781px) {
  .woocommerce-shop ul.products li.product { --award-photo-size: clamp(180px,22.222vw,320px); }
}
@media (max-width: 767px) {
  ul.products li.product .ab-loop-allergens {
    position: static; width: auto; margin: 12px 0; padding: 0;
  }
  .woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-shop ul.products li.product .ab-loop-excerpt,
  .woocommerce-shop ul.products li.product .price {
    padding-left: 0 !important; padding-right: 0 !important; text-align: left;
  }
  ul.products li.product:has(.ab-loop-allergens) a.woocommerce-LoopProduct-link {
    min-height: 0;
  }
}

/* News-Detailseiten: bestehende Farben und Hausschriften. */
.ab-news__logo { display: block; }
.ab-news__title a:hover, .ab-news__arr:hover { text-decoration: underline; text-underline-offset: 4px; }
.ab-news { scroll-margin-top: 90px; }
.ab-news-detail { background: var(--bg); padding: clamp(36px, 5vw, 72px) var(--section-px) clamp(56px, 6vw, 96px); }
.ab-news-detail__header, .ab-news-detail__image { max-width: 1100px; margin-inline: auto; }
.ab-news-detail__header > .ab-news__arr { margin-bottom: 32px; }
.ab-news-detail__header .ab-news__hdr { margin-bottom: 22px; }
.ab-news-detail h1 { font-family: var(--fs); font-size: clamp(32px, 4.5vw, 60px); line-height: 1.15; font-weight: 500; color: var(--dark); max-width: 900px; overflow-wrap: anywhere; }
.ab-news-detail__image { margin-top: 36px; }
.ab-news-detail__image img { width: 100%; max-height: 620px; object-fit: cover; }
.ab-news-detail__content { max-width: 760px; margin: clamp(28px, 4vw, 48px) auto 0; font-size: 17px; line-height: 1.8; overflow-wrap: anywhere; }
.ab-news-detail__content > * + * { margin-top: 24px; }
.ab-news-detail__content h2, .ab-news-detail__content h3 { font-family: var(--fs); color: var(--dark); line-height: 1.3; }
.ab-news-detail__content a:not(.ab-news__arr) { text-decoration: underline; text-underline-offset: 3px; }
.ab-news-detail__content ul, .ab-news-detail__content ol { padding-left: 24px; }
.ab-news-detail__content blockquote { border-left: 3px solid var(--mint); padding-left: 24px; }
.ab-news-detail__content figure img { height: auto; }
.ab-news-detail__content iframe, .ab-news-detail__content video { max-width: 100%; }
.ab-news-detail__back { border-top: 1px solid var(--rule); padding-top: 28px; margin-top: 40px; }
@media (max-width: 600px) {
  .ab-news-detail { padding-inline: 24px; }
  .ab-news-detail__image { margin-top: 28px; }
  .ab-news-detail__content { font-size: 16px; }
}

/* Instagram: klare Profilkarte mit den Instagram-Farben. */
.ab-ig-link__btn {
  display: flex; align-items: center; gap: 18px; width: 100%; max-width: 520px;
  padding: 22px 26px; border: 1px solid #eeddeb; border-radius: 20px;
  background: #fff; color: var(--dark); text-transform: none; letter-spacing: 0;
  box-shadow: 0 8px 28px rgba(131,58,180,.09); text-align: left;
  transition: box-shadow .2s, border-color .2s;
}
.ab-ig-link__btn:hover { background: #fff8fc; border-color: #c13584; box-shadow: 0 10px 30px rgba(193,53,132,.15); }
.ab-ig-link__icon {
  display: flex; align-items: center; justify-content: center; flex: 0 0 58px;
  width: 58px; height: 58px; border-radius: 16px; color: #fff;
  background: radial-gradient(circle at 25% 100%, #feda75 0%, #fa7e1e 25%, #d62976 52%, #962fbf 78%, #4f5bd5 100%);
}
.ab-ig-link__icon svg { width: 30px; height: 30px; }
.ab-ig-link__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ab-ig-link__label { font-size: 16px; font-weight: 600; line-height: 1.4; }
.ab-ig-link__handle { font-size: 14px; font-weight: 400; line-height: 1.4; opacity: 1; color: var(--txt-m); }
.ab-ig-link__arrow { margin-left: auto; color: #962fbf; font-size: 26px; }
@media (max-width: 767px) {
  .ab-ig-link__btn { gap: 12px; padding: 18px 16px; justify-content: flex-start; text-align: left; border-radius: 18px; }
  .ab-ig-link__icon { flex-basis: 46px; width: 46px; height: 46px; border-radius: 13px; }
  .ab-ig-link__icon svg { width: 26px; height: 26px; }
  .ab-ig-link__label { font-size: 15px; }
  .ab-ig-link__handle { font-size: 12px; }
  .ab-ig-link__arrow { font-size: 22px; }
}

/* Datenschutz: lesbare Textbreite und Abstand zwischen Abschnitten. */
.ab-privacy { max-width: 880px; margin-inline: auto; padding: 56px 24px 72px; }
.ab-privacy h1 { font-size: clamp(1.8rem, 5vw, 3rem); overflow-wrap: anywhere; margin-bottom: 24px; }
.ab-privacy .entry-content h2 { margin: 36px 0 12px; font-size: 1.5rem; }
.ab-privacy .entry-content p { margin: 0 0 16px; }
.ab-privacy .entry-content a { text-decoration: underline; overflow-wrap: anywhere; }

/* Abholplanung aus den Pop-up-Angaben. */
.ab-pickup {
  margin: 28px var(--section-px) 32px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--mint-bg);
  color: var(--dark);
  border: 0;
  border-radius: 20px;
}
.ab-pickup h2 {
  font-family: var(--fs);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.ab-pickup p { font-size: 15px; line-height: 1.6; margin: 0 0 20px; max-width: 640px; }
.ab-pickup label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ab-pickup select {
  display: block; width: 100%; max-width: 680px; min-height: 50px;
  padding: 12px 38px 12px 18px;
  font-family: var(--fn); font-size: 14px;
  background-color: var(--w); color: var(--dark);
  border: 1.5px solid var(--rule); border-radius: 999px;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2E22' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
.ab-pickup select:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
.ab-pickup p:last-child { margin: 12px 0 0; font-size: 12px; color: var(--txt-m); }
@media (max-width: 767px) {
  .ab-pickup { padding: 24px 20px; margin-top: 24px; }
  .ab-pickup select { font-size: 13px; padding-left: 14px; }
}

/* Inaktive Bestellbuttons im Produktkatalog. */
.woocommerce .button.ab-order-disabled,
.woocommerce .button.ab-order-disabled:hover {
  background: var(--dark) !important;
  color: var(--w) !important;
  opacity: .38;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--fn);
  font-size: 14px;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Produktdetail: Preis und Warenkorb nebeneinander. */
.single-product .ab-product-purchase-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}
.single-product div.product .ab-product-purchase-row p.price { margin: 0; white-space: nowrap; }
.single-product .ab-product-purchase-row .ab-order-disabled { margin: 0; white-space: nowrap; }
@media (max-width: 767px) {
  .single-product .ab-product-purchase-row { gap: 14px; }
  .single-product .ab-product-purchase-row .button.ab-order-disabled { padding: 12px 16px; font-size: 12px; }
}
.ab-pickup-locations { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ab-pickup-locations li span { display: block; margin-top: 6px; font-size: 14px; }
.ab-pickup--checkout { margin: 24px 0; }
.ab-pickup--checkout h3 { font-family: var(--fs); font-size: 28px; margin-bottom: 12px; }
.ab-pickup--checkout .form-row { margin-bottom: 0; }
@media (max-width:767px) { .ab-pickup-locations { grid-template-columns: 1fr; } }
.woocommerce-checkout #customer_details { display: block; }
.woocommerce-checkout #customer_details .col-1 { width: 100%; float: none; }
.woocommerce-checkout #customer_details .col-2 { display: none; }
.woocommerce-checkout #customer_details input.input-text,
.woocommerce-checkout #customer_details select {
  width: 100%; min-height: 48px; padding: 12px 16px !important;
  background-color: var(--w); border: 1.5px solid var(--rule) !important;
  border-radius: 12px !important; font-family: var(--fn); font-size: 15px; color: var(--dark);
}
.woocommerce-checkout #customer_details input.input-text:focus { outline: 2px solid var(--mint-d); outline-offset: 2px; }
.woocommerce-checkout #customer_details .ab-pickup select { padding-right: 40px !important; }
.woocommerce-checkout .woocommerce-billing-fields > h3 { font-family: var(--fs); font-size: 30px; margin: 24px 0 20px; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { max-width: 680px; }

/* Leerer Warenkorb: kompakter Bereich im ART-Bakery-Stil. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .ab-empty-cart {
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(32px, 5vw, 56px) 24px;
  margin: 0 0 clamp(48px, 6vw, 80px);
  border-radius: 24px; background: var(--mint-bg); text-align: center;
}
.ab-empty-cart__icon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 24px; border-radius: 50%; background: var(--mint); color: var(--dark); }
.ab-empty-cart__icon svg { width: 36px; height: 36px; }
.woocommerce-cart .ab-empty-cart h2 { font-family: var(--fs); font-size: clamp(26px, 3vw, 38px); line-height: 1.2; letter-spacing: -.02em; color: var(--dark); margin: 0 0 14px; }
.ab-empty-cart p { font-size: 16px; line-height: 1.6; color: var(--txt-m); margin: 0 0 26px; }
.ab-empty-cart .ab-empty-cart__button { display: inline-flex; align-items: center; gap: 24px; background: var(--dark); color: var(--w); border-radius: 999px; padding: 15px 26px; font-size: 14px; font-weight: 600; text-decoration: none; }
.ab-empty-cart .ab-empty-cart__button:hover { background: #052f14; }
@media (max-width:767px) { .woocommerce-cart .wp-block-woocommerce-empty-cart-block .ab-empty-cart { padding: 32px 20px; border-radius: 20px; } }

/* Warenkorb: dieselbe Seitenbreite und Titelkante wie im Shop. */
.woocommerce-cart .container.section {
  width: 100%; max-width: none; margin-inline: 0;
  padding-left: var(--section-px); padding-right: var(--section-px);
}

/* News archive shares the existing news cards and site navigation. */
.ab-news__archive-link { margin-top: 36px; }
.ab-news-archive > .ab-news__arr { margin-bottom: 36px; }
.ab-news-archive h1 { font-family: var(--fs); font-size: clamp(32px, 4.5vw, 60px); line-height: 1.15; font-weight: 500; color: var(--dark); margin-bottom: 40px; }
.ab-news__pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 40px; }
.ab-news__pagination .page-numbers { padding: 10px 16px; border: 1px solid var(--rule); color: var(--dark); }
.ab-news__pagination .current { background: var(--mint); }

/* Rechtliche Seiten: gemeinsame Gestaltung und Seitenränder der Homepage. */
:is(.ab-impressum,.ab-privacy) { width:100%; max-width:none; margin:0; padding:clamp(48px,7vw,96px) var(--section-px,24px); }
:is(.ab-impressum,.ab-privacy) article > h1 { font-family:var(--fs); font-size:clamp(28px,3.5vw,44px); font-weight:400; line-height:1.2; color:var(--dark); margin:0 0 28px; letter-spacing:-.015em; overflow-wrap:anywhere; }
:is(.ab-impressum,.ab-privacy) .entry-content { background:var(--mint-bg); border-top:5px solid var(--mint); border-radius:0 0 24px 24px; padding:clamp(28px,5vw,56px); color:var(--dark); }
:is(.ab-impressum,.ab-privacy) .entry-content h2 { font-family:var(--fs); font-size:clamp(24px,3vw,30px); line-height:1.25; margin:32px 0 12px; }
:is(.ab-impressum,.ab-privacy) .entry-content h2:first-child { margin-top:0; }
:is(.ab-impressum,.ab-privacy) .entry-content p { font-size:18px; line-height:1.75; margin:0; }
:is(.ab-impressum,.ab-privacy) .entry-content a { color:var(--dark); text-decoration:underline; text-underline-offset:4px; }
:is(.ab-impressum,.ab-privacy) .entry-content a:hover { color:#28574d; }
@media(max-width:600px) { :is(.ab-impressum,.ab-privacy) { padding:40px var(--section-px) 56px; } :is(.ab-impressum,.ab-privacy) article > h1 { margin-bottom:24px; } :is(.ab-impressum,.ab-privacy) .entry-content { padding:26px 22px; } :is(.ab-impressum,.ab-privacy) .entry-content p { font-size:16px; overflow-wrap:anywhere; } }

.ab-privacy .entry-content p { margin-bottom:16px; }
.ab-privacy .entry-content p:last-child { margin-bottom:0; }

@media(max-width:600px) {
  :is(.ab-impressum,.ab-privacy) { padding-top:32px; }
  :is(.ab-impressum,.ab-privacy) article > h1 { font-size:clamp(24px,6.5vw,30px); margin-bottom:20px; }
  :is(.ab-impressum,.ab-privacy) .entry-content { padding:24px 20px; border-top-width:3px; border-radius:0 0 18px 18px; }
  :is(.ab-impressum,.ab-privacy) .entry-content h2 { font-size:22px; margin-top:28px; overflow-wrap:anywhere; }
}
@media(max-width:600px) {
  :is(.ab-impressum,.ab-privacy) .entry-content h2 { font-size:20px; hyphens:auto; }
}

/* Frei gepflegte Öffnungszeiten auf dem dunklen Footer. */
.ab-footer__hours-text {
  color: rgba(255, 255, 255, .9);
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  overflow-wrap: anywhere;
}

/* 404 – ruhiger Einstieg im Markenstil. */
.ab-not-found{padding:clamp(64px,10vw,140px) var(--section-px);background:var(--mint-bg)}
.ab-not-found__inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:clamp(40px,7vw,100px)}
.ab-not-found__art{position:relative;text-align:center;color:var(--dark);padding:30px 0}
.ab-not-found__number{display:block;font-family:var(--fs);font-size:clamp(110px,15vw,220px);line-height:1;color:var(--mint-d);letter-spacing:-.06em}
.ab-not-found__art svg{display:block;width:65%;max-width:240px;margin:-12px auto 0;color:var(--terra-btn);transform:rotate(-8deg)}
.ab-not-found__label{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dark);margin-bottom:20px}
.ab-not-found h1{font-family:var(--fs);font-size:clamp(36px,4vw,62px);line-height:1.1;color:var(--dark);margin-bottom:24px;max-width:560px}
.ab-not-found__content>p{font-size:18px;line-height:1.7;max-width:500px;color:var(--txt-m)}
.ab-not-found__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:32px}
.ab-not-found__home{display:inline-block;padding:15px 22px;background:var(--dark);color:#fff;border-radius:6px;text-decoration:none;font-weight:600}
.ab-not-found__home:hover{background:#304b39;color:#fff}
.ab-not-found__shop{color:var(--dark);text-underline-offset:5px;font-weight:600}
.ab-not-found__actions a:focus-visible{outline:3px solid var(--terra-btn);outline-offset:5px}
@media(max-width:700px){.ab-not-found__inner{grid-template-columns:1fr;gap:36px}.ab-not-found__art{padding:0}.ab-not-found__number{font-size:110px}.ab-not-found__art svg{width:130px}.ab-not-found{padding-top:48px}}

/* Pop-up-Button im Titelbereich: Marken-Hellgrün. */
.ab-hero__actions .btn-fill[href="#popup"] {
  background: var(--mint);
  color: var(--dark);
  border-color: var(--mint);
}
.ab-hero__actions .btn-fill[href="#popup"]:hover {
  background: var(--mint-d);
  color: var(--dark);
  border-color: var(--mint-d);
}

/* Direkter Übergang von News zu den Partnern. */
.page-template-mehr-erfahren .ab-news { padding-bottom: 24px; }
.page-template-mehr-erfahren .ab-news + .ab-partner { padding-top: 32px; }
.ab-footer__social svg.ab-footer__instagram-icon { width:24px; height:24px; }

/* Footer: Logo über der gemeinsamen Textzeile, drei grosszügige Spalten. */
.ab-footer__inner{grid-template-columns:1.2fr 1.2fr 1fr;gap:14px 48px;align-items:start}
.ab-footer__brand{display:contents}
.ab-footer__logo{grid-column:1;grid-row:1}
.ab-footer__logo img{display:block;margin-bottom:0}
.ab-footer__tagline{grid-column:1;grid-row:2;margin-top:0}
.ab-footer__hours{grid-column:2;grid-row:2}
.ab-footer__contact{grid-column:3;grid-row:2;min-width:0}
.ab-footer__social{overflow-wrap:anywhere}
@media(max-width:900px){.ab-footer__inner{gap:14px 28px}}
@media(max-width:700px){.ab-footer__inner{grid-template-columns:1fr;gap:32px}.ab-footer__brand{display:block}.ab-footer__logo,.ab-footer__tagline,.ab-footer__hours,.ab-footer__contact{grid-column:auto;grid-row:auto}.ab-footer__tagline{margin-top:14px}}

/* Symmetrische Footer-Spalten auf grossen Bildschirmen. */
@media(min-width:701px){
  .ab-footer__inner{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-footer__hours{justify-self:center;width:max-content;max-width:100%}
  .ab-footer__contact{justify-self:end;width:max-content;max-width:100%}
}


/* Florians Hero-Wünsche vom 11.10.2026: transparentes Logo und zweizeiliger Subtext. */
.ab-hero__brand { margin: 16px 0 32px; }
.ab-hero__brand img { display: block; width: clamp(240px, 24vw, 300px); height: auto; }
.ab-hero__sub { max-width: 760px; }

/* Aus Zusatz-CSS ins Theme übernommen, 18.10.2026. */
/* Zwei News mittig, ab drei gilt das bestehende Raster. */
@media (min-width: 768px) {
  .ab-news__grid:has(> .ab-news__card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc((200% - 24px) / 3);
    margin-inline: auto;
  }
}

/* Navigation: grüner Hover passend zum EN-Schalter ohne Unterstreichung. */
.ab-nav__links a {
  padding: 8px 10px;
  margin-inline: -10px;
  border-radius: 5px;
  transition: background-color .18s, color .18s;
}
.ab-mobile-menu > a {
  border-radius: 5px;
  transition: background-color .18s, color .18s;
}
.ab-nav__links a:hover,
.ab-nav__links a:focus-visible,
.ab-mobile-menu > a:hover,
.ab-mobile-menu > a:focus-visible {
  background-color: rgba(31, 46, 34, .08);
  color: var(--dark);
  opacity: 1;
  text-decoration: none;
}

/* Produktgalerie: fester Bildrahmen und getrennte Vorschaubilder. */
.woocommerce div.product div.images .flex-viewport {
  height: auto !important;
  aspect-ratio: 1 / 1;
  transition: none !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image a {
  display: block;
  aspect-ratio: 1 / 1;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}
.woocommerce div.product div.images .flex-control-thumbs::before,
.woocommerce div.product div.images .flex-control-thumbs::after { content: none; }
.woocommerce div.product div.images .flex-control-thumbs li {
  width: auto !important;
  float: none;
  margin: 0 !important;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: #052f14;
}

/* Instagram mittig zwischen News und Partnern. */
.ab-news:has(+ .ab-ig-link) { padding-bottom: 0; }
.ab-ig-link { padding-block: clamp(40px, 6vw, 96px); align-items: center; }
.ab-ig-link + .ab-partner { padding-top: 0; }

/* Lesetexte Desktop und Mobile: 18px, kleinere Begleittexte 17px. */
.ab-hero__sub, .ab-brot__sub, .ab-tz-intro__text, .ab-tz__text,
.ab-kaffee__text, .ab-story__text, .ab-meister__text p, .ab-team__text p,
.ab-news-detail__content, .single-product .ab-product-description,
.ab-footer__tagline, .ab-empty-cart p { font-size: 18px; }
.eyebrow, .ab-brot__right-intro, .ab-brot__right-note, .ab-brot__feat,
.ab-popup__intro, .ab-news__excerpt, .ab-partner__desc,
.ab-team__role, .ab-team__byline, .ab-meister__role,
.ab-pickup p, .ab-pickup-locations li span,
.ab-footer__hours-day, .ab-footer__hours-time, .ab-footer__hours-closed,
.ab-footer__links a, .ab-footer__social, .ab-footer__copy,
.ab-ig-link__label, .ab-ig-link__handle { font-size: 17px; }

/* Pop-up: Standorttexte 18px, kleine Beschriftungen 17px. */
.ab-popup-solo__addr span, .ab-popup__card-addr span { font-size: 18px; }
.ab-popup__eyebrow, .ab-popup__date-month,
.ab-popup-solo__day-lang, .ab-popup-solo__time-unit,
.ab-popup__card-day-label, .ab-popup__card-time-unit,
.ab-popup-solo__link, .ab-popup__card-link { font-size: 17px; }

/* Tageszeiten: kleine Beschriftungen ebenfalls 17px. */
.ab-tz__label { font-size: 17px; }

/* Mobile Hinweisleiste: alle drei ACF-Texte sichtbar. */
@media (max-width: 767px) {
  .ab-topbar { flex-direction: column; gap: 3px; text-align: center; }
  .ab-topbar .ab-topbar__text { display: block; max-width: 100%; overflow-wrap: anywhere; }
  .ab-topbar .ab-topbar__dot { display: none; }
}

/* Hinweislinks: gleicher Hover-/Fokus-Effekt wie die Hauptnavigation. */
.ab-topbar__text a {
  display: inline-block; padding: 4px 8px; margin: -4px -8px;
  border-radius: 5px; text-decoration: none !important;
  transition: background-color .18s, color .18s;
}
.ab-topbar__text a:hover, .ab-topbar__text a:focus-visible {
  background-color: rgba(31, 46, 34, .08); color: var(--dark);
  opacity: 1; text-decoration: none !important;
}

/* Alle drei Hinweiszeilen in kompakter Button-Optik. */
.ab-topbar { gap: 12px; flex-wrap: wrap; padding-block: 10px; }
.ab-topbar .ab-topbar__dot { display: none; }
.ab-topbar .ab-topbar__text {
  display: block; padding: 8px 14px; border: 1px solid rgba(31,46,34,.24);
  border-radius: 999px; background: rgba(255,255,255,.22); text-align: center;
  max-width: 100%;
}
.ab-topbar__text:has(a) { padding: 0; }
.ab-topbar__text a {
  display: block; padding: 8px 14px; margin: 0; border-radius: inherit;
  white-space: normal; overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .ab-topbar { gap: 6px; }
  .ab-topbar .ab-topbar__text { max-width: 100%; }
}

.ab-topbar .ab-topbar__text:has(a) { padding: 0; }

/* Hinweisbuttons wie der aktive/hovernde Navigationspunkt. */
.ab-topbar .ab-topbar__text {
  border: 0; border-radius: 5px; background: rgba(31,46,34,.08);
}
.ab-topbar__text a:hover, .ab-topbar__text a:focus-visible {
  background-color: rgba(31,46,34,.14);
}

/* Mobile: flache Hinweisbuttons mit weniger vertikalem Platzbedarf. */
@media (max-width: 767px) {
  .ab-topbar { padding-block: 5px; gap: 3px; }
  .ab-topbar .ab-topbar__text { padding: 3px 12px; line-height: 1.4; }
  .ab-topbar .ab-topbar__text:has(a) { padding: 0; }
  .ab-topbar__text a { padding: 3px 12px; }
}