/* =========================================================
   sueco Components CSS — konsolidiert aus design-system/ui_kits/landing/
   Source: hero, nav, sections, footer, productcard
   ---------------------------------------------------------
   In P3a/P3b wird pro ACF Block ein Block-spezifischer Bereich
   ergaenzt, gescoped via .wp-block-sueco-<slug>.
   Tokens via Custom Properties aus brand.css — keine Inline-Hex.
   ========================================================= */


/* =========================================================
   NAV
   ========================================================= */

.sueco-nav { background: var(--sueco-white); border-bottom: 1px solid var(--sueco-border); z-index: 50; }
.sueco-nav--sticky { position: sticky; top: 0; }

.sueco-nav__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 92px;
}

.sueco-nav__side { display: flex; align-items: center; gap: 1.5rem; }
.sueco-nav__side--left  { justify-content: flex-start; }
.sueco-nav__side--right { justify-content: flex-end; gap: 1rem; }

.sueco-nav__logo-wrap { display: flex; align-items: center; justify-content: center; color: var(--sueco-text-primary); }
.sueco-logo { text-decoration: none; color: inherit; }
.sueco-logo svg { display: block; height: 100%; width: auto; }

.sueco-nav__list { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; }
.sueco-nav__link {
  font-family: var(--sueco-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sueco-text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--sueco-transition), color var(--sueco-transition);
}
.sueco-nav__link:hover, .sueco-nav__link.is-open { color: var(--sueco-primary); border-bottom-color: var(--sueco-primary); }

.sueco-nav__icon-btn { background: transparent; border: 0; padding: 0.5rem; color: var(--sueco-text-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; transition: background var(--sueco-transition); }
.sueco-nav__icon-btn:hover { background: var(--sueco-bg-cream); color: var(--sueco-primary); }

.sueco-nav__cart { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--sueco-text-primary); font-size: 0.875rem; font-weight: 500; text-decoration: none; padding: 0.375rem 0.75rem; border-radius: 999px; transition: background var(--sueco-transition); }
.sueco-nav__cart:hover { background: var(--sueco-bg-cream); color: var(--sueco-primary); }
.sueco-nav__cart-amount { font-variant-numeric: tabular-nums; }

.sueco-nav__mega {
  position: absolute; left: 0; right: 0;
  background: var(--sueco-white);
  border-top: 1px solid var(--sueco-border);
  border-bottom: 1px solid var(--sueco-border);
  box-shadow: 0 12px 20px -8px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
  padding: 2.5rem 0;
  z-index: 40;
}
.sueco-nav__mega.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sueco-nav__mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.sueco-nav__mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.sueco-nav__mega-col a { color: var(--sueco-text-primary); font-size: 1rem; text-decoration: none; transition: color var(--sueco-transition); }
.sueco-nav__mega-col a:hover { color: var(--sueco-primary); }
.sueco-nav__mega-heading { font-family: var(--sueco-font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sueco-text-secondary); margin-bottom: 1rem; }

.sueco-drawer { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.sueco-drawer.is-open { pointer-events: auto; }
.sueco-drawer__backdrop { position: absolute; inset: 0; background: rgba(28,25,23,0.55); opacity: 0; transition: opacity 220ms ease; }
.sueco-drawer.is-open .sueco-drawer__backdrop { opacity: 1; }
.sueco-drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(340px, 85vw);
  background: var(--sueco-white);
  transform: translateX(-100%);
  transition: transform 260ms cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sueco-drawer.is-open .sueco-drawer__panel { transform: translateX(0); }
.sueco-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--sueco-border); }
.sueco-drawer__head .sueco-logo { color: var(--sueco-text-primary); }
.sueco-drawer__nav { padding: 1rem 0; }
.sueco-drawer__group { padding: 0.5rem 1.5rem 1rem; border-bottom: 1px solid var(--sueco-border); }
.sueco-drawer__group:last-child { border-bottom: 0; }
.sueco-drawer__top { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--sueco-text-primary); padding: 0.75rem 0; text-decoration: none; }
.sueco-drawer__sub { list-style: none; margin: 0; padding: 0 0 0 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sueco-drawer__sub a { color: var(--sueco-text-secondary); font-size: 0.9375rem; text-decoration: none; }
.sueco-drawer__sub a:hover { color: var(--sueco-primary); }

.sueco-nav__desktop-only { display: none; }
.sueco-nav__mobile-only { display: inline-flex; }
@media (min-width: 1024px) {
  .sueco-nav__desktop-only { display: flex; }
  .sueco-nav__mobile-only { display: none; }
}
@media (max-width: 1023px) {
  .sueco-nav__bar { min-height: 72px; }
  .sueco-nav__logo-wrap { height: 24px; }
  .sueco-nav__cart-amount { display: none; }
}


/* =========================================================
   HERO — generische Snapshot-Klassen entfernt 2026-04-30 (P3a Hero-Block).
   Block-spezifisches CSS unten unter ".wp-block-sueco-hero".
   .sueco-placeholder bleibt als generische Utility (auch von .sueco-prod genutzt).
   ========================================================= */

.sueco-btn--on-dark { color: var(--sueco-white); border-color: rgba(255,255,255,0.5); }
.sueco-btn--on-dark:hover { border-color: var(--sueco-white); color: var(--sueco-white); }
/* Primary auf dunklem Hintergrund: Fuellung beim Hover behalten, nur abdunkeln. */
.sueco-btn--primary.sueco-btn--on-dark:hover { background: var(--sueco-primary-hover); }
/* Outline auf dunklem Hintergrund: dezente weisse Fuellung beim Hover. */
.sueco-btn--outline.sueco-btn--on-dark:hover { background: rgba(255,255,255,0.1); }

.sueco-placeholder {
  width: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      #efe7db 0 12px,
      #e8dec9 12px 24px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a7a5c;
  position: relative;
}
.sueco-placeholder--linked { border-radius: var(--sueco-radius-image-link); }
.sueco-placeholder__tag {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  background: rgba(255,255,255,0.8);
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
}


/* =========================================================
   SECTIONS — Trust, Features, Steps, Media+Text, Testimonials, Facts, FAQ, CTA
   ========================================================= */

.sueco-sec { padding-block: var(--sueco-section-py); }
@media (min-width: 1024px) { .sueco-sec { padding-block: var(--sueco-section-py-lg); } }
.sueco-sec--compact { padding-block: 4.5rem; }
@media (min-width: 1024px) { .sueco-sec--compact { padding-block: 6rem; } }
.sueco-sec--cta     { padding-block: var(--sueco-cta-py); }

.sueco-sec__head { margin-bottom: 3rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: end; }
.sueco-sec__head--center { justify-content: center; text-align: center; }
.sueco-sec__eyebrow { font-family: var(--sueco-font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sueco-primary); margin: 0 0 0.75rem; }
.sueco-sec__title { font-family: var(--sueco-font-heading); font-size: var(--sueco-fs-x-large); font-weight: 700; color: var(--sueco-text-primary); margin: 0; line-height: 1.1; text-wrap: balance; }
.sueco-sec__intro { font-size: var(--sueco-fs-medium); color: var(--sueco-text-secondary); max-width: 720px; margin: 1.25rem auto 0; line-height: 1.55; text-wrap: pretty; }
.sueco-sec__intro.is-narrow { max-width: 560px; }
.sueco-sec__aside { display: flex; gap: 0.5rem; }

/* Section-Header auf dunklem Hintergrund — helle Schrift erzwingen.
   Greift fuer JEDEN sueco-Block mit bg=dark (testimonials, trust-stats, feature-grid, ...). */
.sueco-bg-dark .sueco-sec__title { color: var(--sueco-white); }
.sueco-bg-dark .sueco-sec__intro { color: rgba(255,255,255,0.85); }

.sueco-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sueco-grid--2, .sueco-grid--3, .sueco-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .sueco-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .sueco-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .sueco-grid    { gap: 2rem; }
}
.sueco-grid--tight { gap: 1.25rem; }
@media (min-width: 1024px) { .sueco-grid--tight { gap: 1.5rem; } }

.sueco-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; }
.sueco-trust__item { display: flex; flex-direction: column; gap: 0.5rem; }
.sueco-trust__value { font-family: var(--sueco-font-heading); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 700; color: var(--sueco-primary); line-height: 1; }
.sueco-trust__label { font-size: 0.9375rem; color: var(--sueco-text-secondary); letter-spacing: 0.02em; }

.sueco-feature { list-style: none; display: flex; flex-direction: column; gap: 0.875rem; padding: 2rem 1.75rem; }
.sueco-feature__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; background: var(--sueco-bg-cream); color: var(--sueco-primary); }
.sueco-feature__title { font-family: var(--sueco-font-heading); font-size: 1.375rem; font-weight: 700; margin: 0; color: var(--sueco-text-primary); }
.sueco-feature__body { font-size: 0.9375rem; color: var(--sueco-text-secondary); margin: 0; line-height: 1.55; }
.sueco-feature__bullets { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9375rem; color: var(--sueco-text-primary); }
.sueco-feature__bullets li { display: flex; gap: 0.5rem; align-items: flex-start; }
.sueco-feature__bullets svg { flex: 0 0 16px; margin-top: 2px; color: var(--sueco-primary); }
.sueco-feature__link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.375rem; color: var(--sueco-primary); font-weight: 600; font-size: 0.9375rem; text-decoration: none; padding-top: 0.5rem; }
.sueco-feature__link:hover { gap: 0.625rem; }

.sueco-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2.5rem; counter-reset: step; }
@media (min-width: 640px) { .sueco-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sueco-steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.sueco-step { text-align: center; }
.sueco-step__n { display: block; font-family: var(--sueco-font-heading); font-size: var(--sueco-fs-x-large); font-weight: 700; color: var(--sueco-primary); line-height: 1; margin-bottom: 1rem; }
.sueco-step__title { font-family: var(--sueco-font-heading); font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.sueco-step__body { font-size: 0.9375rem; color: var(--sueco-text-secondary); margin: 0; line-height: 1.55; }

.sueco-mediatext { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .sueco-mediatext { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.sueco-mediatext.is-reverse .sueco-mediatext__media { order: 1; }
@media (min-width: 1024px) { .sueco-mediatext.is-reverse .sueco-mediatext__media { order: 2; } }
.sueco-mediatext__body { font-size: var(--sueco-fs-medium); color: var(--sueco-text-secondary); line-height: 1.6; margin: 1.25rem 0; }
.sueco-mediatext__bullets { list-style: none; margin: 1rem 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.sueco-mediatext__bullets li { display: flex; gap: 0.625rem; align-items: flex-start; color: var(--sueco-text-primary); }
.sueco-mediatext__bullets svg { flex: 0 0 18px; margin-top: 2px; color: var(--sueco-primary); }

.sueco-testimonial { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; }
.sueco-testimonial__quote { font-family: var(--sueco-font-heading); font-size: 1.25rem; line-height: 1.5; color: var(--sueco-text-primary); margin: 0; font-style: italic; }
.sueco-testimonial__foot { display: flex; flex-direction: column; gap: 0.125rem; font-family: var(--sueco-font-body); font-size: 0.9375rem; color: var(--sueco-text-secondary); }
.sueco-testimonial__foot strong { color: var(--sueco-text-primary); font-weight: 600; }

.sueco-facts { width: 100%; border-collapse: collapse; background: var(--sueco-white); border-radius: var(--sueco-radius-card); overflow: hidden; box-shadow: var(--sueco-shadow-sm); }
.sueco-facts th, .sueco-facts td { padding: 1rem 1.5rem; text-align: left; font-size: 1rem; border-bottom: 1px solid var(--sueco-border); }
.sueco-facts tr:last-child th, .sueco-facts tr:last-child td { border-bottom: 0; }
.sueco-facts tr:nth-child(even) { background: var(--sueco-bg-cream); }
.sueco-facts th { font-weight: 600; color: var(--sueco-text-primary); width: 38%; }
.sueco-facts td { color: var(--sueco-text-secondary); }

.sueco-faq { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--sueco-border); }
.sueco-faq__item { border-bottom: 1px solid var(--sueco-border); }
.sueco-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; background: transparent; border: 0; text-align: left; cursor: pointer; font-family: var(--sueco-font-heading); font-size: 1.125rem; font-weight: 600; color: var(--sueco-text-primary); }
.sueco-faq__q:hover { color: var(--sueco-primary); }
.sueco-faq__q svg { flex: 0 0 20px; color: var(--sueco-primary); }
.sueco-faq__a { padding: 0 0 1.5rem; color: var(--sueco-text-secondary); font-size: 1rem; line-height: 1.6; max-width: 640px; }
.sueco-faq__a p { margin: 0; }

.sueco-cta__rule { border: 0; border-top: 1px solid var(--sueco-border); margin: 0 auto 2rem; max-width: 120px; }


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.sueco-prod { display: flex; flex-direction: column; gap: 0.75rem; }
.sueco-prod__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sueco-bg-cream); }
.sueco-prod__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.sueco-prod:hover .sueco-prod__media img { transform: scale(1.04); }
.sueco-prod__media .sueco-placeholder { aspect-ratio: 1 / 1; }

.sueco-prod__badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 10px;
  border-radius: 999px;
  background: var(--sueco-primary);
  color: var(--sueco-white);
  font-family: var(--sueco-font-body);
  font-weight: 700; font-size: 0.75rem; letter-spacing: 0.05em;
  z-index: 2;
}

.sueco-prod__body { display: flex; flex-direction: column; gap: 0.5rem; }
.sueco-prod__title { font-family: var(--sueco-font-body); font-size: 0.9375rem; font-weight: 500; line-height: 1.45; color: var(--sueco-text-primary); margin: 0; text-wrap: balance; }
.sueco-prod__title a { color: inherit; text-decoration: none; }
.sueco-prod__title a:hover { color: var(--sueco-primary); }

.sueco-prod__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.sueco-prod__price { font-family: var(--sueco-font-body); font-size: 1rem; font-weight: 600; color: var(--sueco-text-primary); font-variant-numeric: tabular-nums; }
.sueco-prod__old { text-decoration: line-through; color: var(--sueco-text-secondary); font-weight: 400; margin-right: 0.5rem; }
.sueco-prod__details { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--sueco-primary); font-weight: 500; text-decoration: none; }
.sueco-prod__details:hover { gap: 0.5rem; }

.sueco-prod--teaser .sueco-prod__title { font-family: var(--sueco-font-heading); font-size: 1.125rem; font-weight: 600; text-align: center; }


/* =========================================================
   FOOTER
   ========================================================= */

.sueco-footer {
  background: var(--sueco-footer-bg);
  color: var(--sueco-footer-text);
  padding-block: 4rem 1.5rem;
  font-family: var(--sueco-font-body);
  font-size: 0.9375rem;
}
.sueco-footer a { color: var(--sueco-footer-text); text-decoration: none; transition: color var(--sueco-transition); }
.sueco-footer a:hover { color: #fff; }

.sueco-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 640px) { .sueco-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sueco-footer__grid { grid-template-columns: 1.2fr repeat(4, 1fr) 1.2fr; gap: 2rem; } }

.sueco-footer__brand .sueco-logo { color: #fff; }

.sueco-footer__col h4 { font-family: var(--sueco-font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin: 0 0 1rem; }
.sueco-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.sueco-footer__contact ul li { display: flex; gap: 0.625rem; align-items: flex-start; line-height: 1.5; }
.sueco-footer__contact ul li svg { flex: 0 0 16px; margin-top: 3px; color: var(--sueco-primary); }

.sueco-footer__meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between; align-items: center;
  padding-block: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sueco-footer__extras { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.sueco-footer__extra { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; color: #fff !important; }
.sueco-footer__extra-chip { display: inline-flex; align-items: center; justify-content: center; padding: 0.125rem 0.5rem; border-radius: 4px; background: var(--sueco-primary); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; }

.sueco-footer__socials { display: flex; gap: 0.5rem; }
.sueco-footer__social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); color: #fff !important; transition: all var(--sueco-transition); }
.sueco-footer__social:hover { background: var(--sueco-primary); border-color: var(--sueco-primary); }

.sueco-footer__bottom { display: flex; justify-content: space-between; padding-top: 1.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.5); }

/* --- Footer-Redesign-Erweiterung (2026-06-19, T-15) ------------------------
   Custom-Footer (footer.php + template-parts/footer-sueco.php). Ergaenzt den
   Design-System-Snapshot oben um: 5-Spalten-Raster (Marke + 3 Nav + Kontakt),
   invertiertes Logo auf Dunkel, Tagline und den permanenten § 356a-
   Widerrufsbutton in der Rechtliches-Spalte. */
.sueco-footer__brand { display: flex; flex-direction: column; }
.sueco-footer__logo-link { display: inline-block; }
.sueco-footer__logo { width: 124px; height: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.sueco-footer__tagline { margin: 1.125rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--sueco-footer-text); max-width: 32ch; }

@media (min-width: 1024px) {
  /* 6 Spalten: Marke + Shop + Firmenkunden + Unternehmen + Rechtliches + Kontakt. */
  .sueco-footer .sueco-footer__grid { grid-template-columns: 1.3fr repeat(4, 1fr) 1.3fr; }
}

.sueco-footer__col { min-width: 0; }
.sueco-footer__col a { overflow-wrap: break-word; }

/* Permanenter Widerrufsbutton (§ 356a) — hervorgehoben, auf jeder Seite. */
.sueco-footer__widerruf {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.25rem; padding: 0.6rem 1.05rem;
  background: var(--sueco-primary); color: #fff !important;
  border-radius: var(--sueco-radius-button);
  font-family: var(--sueco-font-button);
  font-weight: var(--sueco-fw-semi); font-size: 0.875rem; line-height: 1;
  white-space: nowrap;
  transition: background var(--sueco-transition);
}
.sueco-footer__widerruf:hover { background: var(--sueco-primary-hover); color: #fff !important; }
.sueco-footer__widerruf svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* Social-Chip-Glyphen + Trust-Extra-Icons. */
.sueco-footer__social svg { width: 18px; height: 18px; }
.sueco-footer__extra svg { width: 18px; height: 18px; color: var(--sueco-primary); }


/* =========================================================
   ACF Block-Scoped CSS — wird in P3a/P3b ergaenzt
   .wp-block-sueco-hero            ✓ (P3a 2026-04-30)
   .wp-block-sueco-trust-stats     ✓ (P3a 2026-04-30)
   .wp-block-sueco-media-text      ✓ (P3a 2026-04-30)
   .wp-block-sueco-process-steps   ✓ (P3a 2026-04-30)
   .wp-block-sueco-feature-grid    ✓ (P3a 2026-04-30)
   .wp-block-sueco-text            ✓ (P3a 2026-04-30)
   .wp-block-sueco-gallery         ✓ (P3a 2026-04-30)
   .wp-block-sueco-facts-table     ✓ (P3a 2026-04-30)
   .wp-block-sueco-portfolio-grid  ✓ (P3a 2026-04-30)
   .wp-block-sueco-faq             ✓ (P3a 2026-04-30)
   .wp-block-sueco-cta             ✓ (P3a 2026-04-30)
   .wp-block-sueco-testimonials    ✓ (P3b 2026-05-14)
   .wp-block-sueco-product-grid    ✓ (P3b 2026-05-14)
   .wp-block-sueco-video-embed     ✓ (P3b 2026-05-14)
   ========================================================= */


/* =========================================================
   sueco/hero — Block CSS
   3 Variants: cover (Bild + Overlay), split (Text + Bild 50/50), text (zentriert auf Creme).
   ========================================================= */

.wp-block-sueco-hero { position: relative; }

.wp-block-sueco-hero__inner { position: relative; z-index: 1; width: 100%; }

.wp-block-sueco-hero__eyebrow {
  font-family: var(--sueco-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sueco-primary);
  margin: 0 0 1rem;
}

.wp-block-sueco-hero__title {
  font-family: var(--sueco-font-heading);
  font-size: var(--sueco-fs-xx-large);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.wp-block-sueco-hero__body {
  font-size: var(--sueco-fs-medium);
  line-height: 1.5;
  max-width: 640px;
  margin: 0 0 2rem;
}

.wp-block-sueco-hero__content { max-width: var(--sueco-hero-content-max); }
.wp-block-sueco-hero__content--center { margin-inline: auto; text-align: center; }
.wp-block-sueco-hero__content--center .wp-block-sueco-hero__body { margin-inline: auto; }

.wp-block-sueco-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.wp-block-sueco-hero__content--center .wp-block-sueco-hero__ctas { justify-content: center; }

/* --- Variant: cover --------------------------------------- */
.wp-block-sueco-hero--cover {
  min-height: 560px;
  display: flex;
  align-items: center;
  color: var(--sueco-white);
  padding: 6rem 0;
  overflow: hidden;
}
.wp-block-sueco-hero--cover .wp-block-sueco-hero__title { color: var(--sueco-white); }
.wp-block-sueco-hero--cover .wp-block-sueco-hero__body  { color: rgba(255,255,255,0.92); }
.wp-block-sueco-hero--cover .wp-block-sueco-hero__media {
  position: absolute; inset: 0; z-index: 0;
}
.wp-block-sueco-hero--cover .wp-block-sueco-hero__media img,
.wp-block-sueco-hero--cover .wp-block-sueco-hero__media .wp-block-sueco-hero__placeholder {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wp-block-sueco-hero--cover .wp-block-sueco-hero__overlay {
  position: absolute; inset: 0; z-index: 0;
  /* Overlay-Farbe = --sueco-bg-dark (#1c1917) — vereinheitlicht mit CTA-dark + Footer. */
  background: linear-gradient(180deg, rgba(28,25,23,0.55) 0%, rgba(28,25,23,0.7) 100%);
}

/* --- Variant: split --------------------------------------- */
.wp-block-sueco-hero--split { padding-block: 4rem; }
.wp-block-sueco-hero--split .wp-block-sueco-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
.wp-block-sueco-hero--split .wp-block-sueco-hero__split-media img,
.wp-block-sueco-hero--split .wp-block-sueco-hero__placeholder--split {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  display: block;
}
@media (min-width: 1024px) {
  .wp-block-sueco-hero--split { padding-block: 6rem; }
  .wp-block-sueco-hero--split .wp-block-sueco-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
  .wp-block-sueco-hero--split.wp-block-sueco-hero--image-left .wp-block-sueco-hero__split-media { order: 1; }
  .wp-block-sueco-hero--split.wp-block-sueco-hero--image-left .wp-block-sueco-hero__content     { order: 2; }
}

/* --- Variant: text ---------------------------------------- */
.wp-block-sueco-hero--text {
  padding-block: 5rem;
}
@media (min-width: 1024px) {
  .wp-block-sueco-hero--text { padding-block: 7rem; }
}

/* --- Background-Modifier (split + text) ------------------- */
/* cover bekommt bewusst kein BG-Modifier (Bild + Overlay sind der BG). */
.wp-block-sueco-hero--bg-cream { background: var(--sueco-bg-cream); }
.wp-block-sueco-hero--bg-white { background: var(--sueco-white); }
.wp-block-sueco-hero--bg-gray  { background: var(--sueco-bg-gray); }
.wp-block-sueco-hero--bg-dark  { background: var(--sueco-bg-dark); }
.wp-block-sueco-hero--bg-dark .wp-block-sueco-hero__title   { color: var(--sueco-white); }
.wp-block-sueco-hero--bg-dark .wp-block-sueco-hero__body    { color: rgba(255,255,255,0.92); }
.wp-block-sueco-hero--bg-dark .wp-block-sueco-hero__eyebrow { color: var(--sueco-bg-cream); }

/* --- Title-Akzent (Playfair Italic, primary-Braun) -------- */
/* Auf cover oder dark: cremige Variante (lesbar auf Dark-Overlay/-BG). */
.wp-block-sueco-hero__title-accent {
  font-style: italic;
  color: var(--sueco-primary);
}
.wp-block-sueco-hero--cover .wp-block-sueco-hero__title-accent,
.wp-block-sueco-hero--bg-dark .wp-block-sueco-hero__title-accent {
  color: var(--sueco-bg-cream);
}

/* --- Placeholder (Editor-Vorschau ohne Bild) -------------- */
.wp-block-sueco-hero__placeholder {
  background: repeating-linear-gradient(135deg, #efe7db 0 12px, #e8dec9 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a7a5c;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  min-height: 280px;
}
.wp-block-sueco-hero--cover .wp-block-sueco-hero__placeholder {
  background: repeating-linear-gradient(135deg, #4a3c2e 0 14px, #3a2f24 14px 28px);
  color: #d8cdb6;
}


/* =========================================================
   sueco-Block-Sektion-Defaults
   Alle sueco/* Section-Bloecke teilen sich Padding + Container.
   ========================================================= */

.wp-block-sueco-trust-stats,
.wp-block-sueco-media-text,
.wp-block-sueco-process-steps,
.wp-block-sueco-feature-grid,
.wp-block-sueco-text,
.wp-block-sueco-gallery,
.wp-block-sueco-facts-table,
.wp-block-sueco-portfolio-grid,
.wp-block-sueco-faq,
.wp-block-sueco-testimonials,
.wp-block-sueco-product-grid,
.wp-block-sueco-feature-product--media-text,
.wp-block-sueco-video-embed--inline {
  padding-block: var(--sueco-section-py);
}
@media (min-width: 1024px) {
  .wp-block-sueco-trust-stats,
  .wp-block-sueco-media-text,
  .wp-block-sueco-process-steps,
  .wp-block-sueco-feature-grid,
  .wp-block-sueco-text,
  .wp-block-sueco-gallery,
  .wp-block-sueco-facts-table,
  .wp-block-sueco-portfolio-grid,
  .wp-block-sueco-faq,
  .wp-block-sueco-testimonials,
  .wp-block-sueco-product-grid,
  .wp-block-sueco-feature-product--media-text,
  .wp-block-sueco-video-embed--inline {
    padding-block: var(--sueco-section-py-lg);
  }
}
/* CTA-Padding wird unten an Zeile 1042 ueber --sueco-cta-py separat gesetzt
   (kompaktere Section: 3rem mobile / 5rem lg). Daher hier nicht in der Liste. */


/* =========================================================
   sueco/trust-stats
   ========================================================= */

.wp-block-sueco-trust-stats__head {
  text-align: center;
  margin-bottom: 3rem;
}
.wp-block-sueco-trust-stats__head .sueco-sec__intro { margin-inline: auto; }

.wp-block-sueco-trust-stats__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}

.wp-block-sueco-trust-stats__grid--stats {
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 640px) {
  .wp-block-sueco-trust-stats__grid--stats { grid-template-columns: repeat(3, 1fr); }
}
.wp-block-sueco-trust-stats__item { display: flex; flex-direction: column; gap: 0.5rem; }
.wp-block-sueco-trust-stats__value {
  font-family: var(--sueco-font-heading);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 700;
  color: var(--sueco-primary);
  line-height: 1;
}
.wp-block-sueco-trust-stats__label {
  font-size: 0.9375rem;
  color: var(--sueco-text-secondary);
  letter-spacing: 0.02em;
}

/* Logo-Wall: Flexbox mit center damit beliebige Logo-Counts (1-12) zentriert
   ueber die Container-Breite verteilt werden. 6-Col-Grid hatte 4 Logos
   linksbuendig stehen lassen. */
.wp-block-sueco-trust-stats__grid--logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 3.5rem;
}
.wp-block-sueco-trust-stats__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}
.wp-block-sueco-trust-stats__logo-img {
  max-width: 180px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--sueco-transition), opacity var(--sueco-transition);
}
.wp-block-sueco-trust-stats__logo:hover .wp-block-sueco-trust-stats__logo-img {
  filter: grayscale(0);
  opacity: 1;
}


/* =========================================================
   sueco/media-text
   ========================================================= */

.wp-block-sueco-media-text__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .wp-block-sueco-media-text__inner {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
  .wp-block-sueco-media-text--image-left .wp-block-sueco-media-text__media { order: 1; }
  .wp-block-sueco-media-text--image-left .wp-block-sueco-media-text__content { order: 2; }
}

.wp-block-sueco-media-text__title {
  font-family: var(--sueco-font-heading);
  font-size: var(--sueco-fs-x-large);
  font-weight: 700;
  margin: 0 0 1.25rem;
  line-height: 1.15;
  text-wrap: balance;
}
.wp-block-sueco-media-text__body {
  font-size: var(--sueco-fs-medium);
  color: var(--sueco-text-secondary);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.wp-block-sueco-media-text__bullets {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.wp-block-sueco-media-text__bullets li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  color: var(--sueco-text-primary);
}
.wp-block-sueco-media-text__bullets svg {
  flex: 0 0 18px;
  margin-top: 2px;
  color: var(--sueco-primary);
}
/* aspect-ratio wird per inline-style aus dem ACF-Feld image_aspect gesetzt
   (Default 4/5 in render.php). object-position kommt aus image_focal_point. */
.wp-block-sueco-media-text__image,
.wp-block-sueco-media-text__placeholder {
  aspect-ratio: 4 / 5; /* Fallback wenn inline-style fehlt */
  width: 100%;
  object-fit: cover;
  display: block;
}
.wp-block-sueco-media-text__placeholder { min-height: 200px; }


/* =========================================================
   sueco/process-steps
   ========================================================= */

.wp-block-sueco-process-steps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 640px) {
  .wp-block-sueco-process-steps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wp-block-sueco-process-steps--cols-3 .wp-block-sueco-process-steps__grid { grid-template-columns: repeat(3, 1fr); }
  .wp-block-sueco-process-steps--cols-4 .wp-block-sueco-process-steps__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.wp-block-sueco-process-steps__step {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wp-block-sueco-process-steps__icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sueco-bg-cream);
  color: var(--sueco-primary);
  margin-bottom: 1rem;
}
.wp-block-sueco-process-steps__n {
  display: block;
  font-family: var(--sueco-font-heading);
  font-size: var(--sueco-fs-x-large);
  font-weight: 700;
  color: var(--sueco-primary);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.wp-block-sueco-process-steps__title {
  font-family: var(--sueco-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--sueco-text-primary);
}
.wp-block-sueco-process-steps__body {
  font-size: 0.9375rem;
  color: var(--sueco-text-secondary);
  margin: 0;
  line-height: 1.55;
  max-width: 280px;
}


/* =========================================================
   sueco/feature-grid
   ========================================================= */

.wp-block-sueco-feature-grid__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .wp-block-sueco-feature-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wp-block-sueco-feature-grid--cols-2 .wp-block-sueco-feature-grid__grid { grid-template-columns: repeat(2, 1fr); }
  .wp-block-sueco-feature-grid--cols-3 .wp-block-sueco-feature-grid__grid { grid-template-columns: repeat(3, 1fr); }
  .wp-block-sueco-feature-grid--cols-4 .wp-block-sueco-feature-grid__grid { grid-template-columns: repeat(4, 1fr); }
  .wp-block-sueco-feature-grid__grid { gap: 2rem; }
}
.wp-block-sueco-feature-grid__item {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 2rem 1.75rem;
}
.wp-block-sueco-feature-grid__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--sueco-bg-cream);
  color: var(--sueco-primary);
}
.wp-block-sueco-feature-grid__title {
  font-family: var(--sueco-font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0;
  color: var(--sueco-text-primary);
}
.wp-block-sueco-feature-grid__body {
  font-size: 0.9375rem;
  color: var(--sueco-text-secondary);
  margin: 0;
  line-height: 1.55;
}
.wp-block-sueco-feature-grid__bullets {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--sueco-text-primary);
}
.wp-block-sueco-feature-grid__bullets li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.wp-block-sueco-feature-grid__bullets svg {
  flex: 0 0 16px;
  margin-top: 2px;
  color: var(--sueco-primary);
}
.wp-block-sueco-feature-grid__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--sueco-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  padding-top: 0.5rem;
}
.wp-block-sueco-feature-grid__link:hover { gap: 0.625rem; }
.wp-block-sueco-feature-grid__link svg { transition: transform var(--sueco-transition); }


/* =========================================================
   sueco/text — Long-Form
   ========================================================= */

.wp-block-sueco-text__inner {
  margin-inline: auto;
}
.wp-block-sueco-text--narrow  .wp-block-sueco-text__inner { max-width: 720px; }
.wp-block-sueco-text--regular .wp-block-sueco-text__inner { max-width: 860px; }
.wp-block-sueco-text--wide    .wp-block-sueco-text__inner { max-width: 1040px; }
.wp-block-sueco-text--align-center .wp-block-sueco-text__inner { text-align: center; }

.wp-block-sueco-text__title {
  font-family: var(--sueco-font-heading);
  font-size: var(--sueco-fs-x-large);
  font-weight: 700;
  margin: 0 0 1.5rem;
  line-height: 1.15;
  text-wrap: balance;
}
.wp-block-sueco-text__content {
  font-size: var(--sueco-fs-medium);
  color: var(--sueco-text-secondary);
  line-height: 1.7;
}
.wp-block-sueco-text__content p { margin: 0 0 1.25em; }
.wp-block-sueco-text__content h3 {
  font-family: var(--sueco-font-heading);
  font-size: 1.5rem;
  margin: 2rem 0 0.75rem;
  color: var(--sueco-text-primary);
}
.wp-block-sueco-text__content h4 {
  font-family: var(--sueco-font-heading);
  font-size: 1.25rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--sueco-text-primary);
}
.wp-block-sueco-text__content ul,
.wp-block-sueco-text__content ol {
  margin: 0 0 1.5em 1.25em;
  padding: 0;
}
.wp-block-sueco-text__content li { margin-bottom: 0.5em; }


/* =========================================================
   sueco/gallery
   ========================================================= */

.wp-block-sueco-gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .wp-block-sueco-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wp-block-sueco-gallery--cols-2 .wp-block-sueco-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .wp-block-sueco-gallery--cols-3 .wp-block-sueco-gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .wp-block-sueco-gallery--cols-4 .wp-block-sueco-gallery__grid { grid-template-columns: repeat(4, 1fr); }
  .wp-block-sueco-gallery__grid { gap: 1.25rem; }
}
.wp-block-sueco-gallery__item { position: relative; }
.wp-block-sueco-gallery__link {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sueco-bg-cream);
}
.wp-block-sueco-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.wp-block-sueco-gallery__link:hover .wp-block-sueco-gallery__img { transform: scale(1.04); }
.wp-block-sueco-gallery__caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--sueco-text-secondary);
}


/* =========================================================
   sueco/facts-table
   ========================================================= */

.wp-block-sueco-facts-table__wrap {
  max-width: 860px;
  margin-inline: auto;
  border-radius: var(--sueco-radius-card);
  background: var(--sueco-white);
  overflow: hidden;
  /* Sicherheitsnetz: lange Werte scrollen INNERHALB der Karte, statt
     lautlos abgeschnitten zu werden. `overflow: hidden` oben klammert
     weiterhin die Rundung (overflow-y bleibt hidden). Ohne diese Zeile
     kappte die Tabelle auf 390px 45px der Wertespalte — ohne Seiten-
     Scrollbar, also unbemerkt. Verifiziert 2026-07-29 auf 1515. */
  overflow-x: auto;
}
/* Outer-Border nur bei nicht-weisser Section-BG (cream/gray/dark) — auf weiss bewusst kein Rahmen, Tabelle verschmilzt mit BG, cream Section-Header geben Struktur */
.wp-block-sueco-facts-table.sueco-bg-cream .wp-block-sueco-facts-table__wrap,
.wp-block-sueco-facts-table.sueco-bg-gray .wp-block-sueco-facts-table__wrap,
.wp-block-sueco-facts-table.sueco-bg-dark .wp-block-sueco-facts-table__wrap {
  border: 1px solid var(--sueco-border-strong);
}
.wp-block-sueco-facts-table__table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  /* Blocksy-Parent setzt global `table, th, td` auf 1px solid via --theme-table-border-*.
     Scoped auf 0/none zuruecksetzen — wir steuern Trennstriche selbst via __row border-bottom. */
  --theme-table-border-width: 0;
  --theme-table-border-style: none;
}
.wp-block-sueco-facts-table__row th,
.wp-block-sueco-facts-table__row td {
  padding: 1rem 1.5rem;
  text-align: left;
  font-size: 1rem;
  border-bottom: 1px solid var(--sueco-border);
}
.wp-block-sueco-facts-table__row:last-child th,
.wp-block-sueco-facts-table__row:last-child td { border-bottom: 0; }
.wp-block-sueco-facts-table__key {
  font-weight: 600;
  color: var(--sueco-text-primary);
  width: 38%;
}
.wp-block-sueco-facts-table__val {
  color: var(--sueco-text-secondary);
}
/* Gruppen-Kopfzeile als gefuellter Balken.
   Vorher: cream auf cream. Da `__wrap` weiss ist und `.sueco-bg-cream`
   denselben Ton traegt (#fbf6ec = #fbf6ec), sahen die Kopfzeilen auf
   einem cream-Block wie Loecher zur Seitenfarbe aus statt wie Ueber-
   schriften. Der gefuellte Balken ist unabhaengig vom Block-Hintergrund
   und traegt darum in allen vier Varianten (white/cream/gray/dark).
   Kontrast weiss auf #8b5e3c = 5,58:1 -> WCAG AA auch fuer Normaltext. */
.wp-block-sueco-facts-table__section {
  padding: 0.875rem 1.5rem;
  background: var(--sueco-primary);
  font-family: var(--sueco-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sueco-white);
  text-align: left;
  border-bottom: 0;
}
/* Erste Gruppe schliesst buendig mit der Kartenkante ab */
.wp-block-sueco-facts-table__section-row:first-child .wp-block-sueco-facts-table__section {
  border-top-left-radius: var(--sueco-radius-card);
  border-top-right-radius: var(--sueco-radius-card);
}

/* Mobile: Polster reduzieren, damit die Tabelle erst gar nicht scrollen muss.
   Ohne diese Query stand die Tabelle bei 390px auf 372px Breite im
   327px-Container — 20 Zeilen Fakten, rechts abgeschnitten. */
@media (max-width: 600px) {
  .wp-block-sueco-facts-table__row th,
  .wp-block-sueco-facts-table__row td {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
  }
  .wp-block-sueco-facts-table__section { padding: 0.75rem 1rem; }
}


/* =========================================================
   sueco/portfolio-grid
   ========================================================= */

.wp-block-sueco-portfolio-grid__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .wp-block-sueco-portfolio-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wp-block-sueco-portfolio-grid--cols-2 .wp-block-sueco-portfolio-grid__grid { grid-template-columns: repeat(2, 1fr); }
  .wp-block-sueco-portfolio-grid--cols-3 .wp-block-sueco-portfolio-grid__grid { grid-template-columns: repeat(3, 1fr); }
  .wp-block-sueco-portfolio-grid--cols-4 .wp-block-sueco-portfolio-grid__grid { grid-template-columns: repeat(4, 1fr); }
}
.wp-block-sueco-portfolio-grid__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wp-block-sueco-portfolio-grid__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sueco-bg-cream);
  margin-bottom: 1rem;
}
.wp-block-sueco-portfolio-grid__media .sueco-placeholder { aspect-ratio: 3 / 2; }
.wp-block-sueco-portfolio-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.wp-block-sueco-portfolio-grid__link:hover .wp-block-sueco-portfolio-grid__img { transform: scale(1.04); }
.wp-block-sueco-portfolio-grid__title {
  font-family: var(--sueco-font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--sueco-text-primary);
  transition: color var(--sueco-transition);
}
.wp-block-sueco-portfolio-grid__link:hover .wp-block-sueco-portfolio-grid__title { color: var(--sueco-primary); }
.wp-block-sueco-portfolio-grid__excerpt {
  font-size: 0.9375rem;
  color: var(--sueco-text-secondary);
  margin: 0;
  line-height: 1.55;
}
.wp-block-sueco-portfolio-grid__cta {
  margin-top: 3rem;
  text-align: center;
}
.wp-block-sueco-portfolio-grid__empty {
  text-align: center;
  color: var(--sueco-text-secondary);
  font-style: italic;
}


/* =========================================================
   sueco/faq
   ========================================================= */

.wp-block-sueco-faq__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 800px;
  border-top: 1px solid var(--sueco-border);
}
.wp-block-sueco-faq__item {
  border-bottom: 1px solid var(--sueco-border);
}
.wp-block-sueco-faq__details {
  padding: 0;
}
.wp-block-sueco-faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  font-family: var(--sueco-font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sueco-text-primary);
  list-style: none;
}
.wp-block-sueco-faq__q::-webkit-details-marker { display: none; }
.wp-block-sueco-faq__q:hover { color: var(--sueco-primary); }
.wp-block-sueco-faq__icon {
  display: inline-flex;
  flex: 0 0 20px;
  color: var(--sueco-primary);
  transition: transform var(--sueco-transition);
}
.wp-block-sueco-faq__details[open] .wp-block-sueco-faq__icon { transform: rotate(90deg); }
.wp-block-sueco-faq__a {
  padding: 0 0 1.5rem;
  color: var(--sueco-text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 720px;
}
.wp-block-sueco-faq__a p { margin: 0 0 1em; }
.wp-block-sueco-faq__a p:last-child { margin: 0; }


/* =========================================================
   sueco/cta
   ========================================================= */

.wp-block-sueco-cta { padding-block: var(--sueco-cta-py); }
@media (min-width: 1024px) { .wp-block-sueco-cta { padding-block: 5rem; } }

.wp-block-sueco-cta__inner {
  max-width: var(--sueco-cta-content-max);
  margin-inline: auto;
  text-align: center;
}
.wp-block-sueco-cta__eyebrow {
  font-family: var(--sueco-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sueco-primary);
  margin: 0 0 1rem;
}
.wp-block-sueco-cta__title {
  font-family: var(--sueco-font-heading);
  font-size: var(--sueco-fs-x-large);
  font-weight: 700;
  margin: 0 0 1rem;
  line-height: 1.15;
  text-wrap: balance;
}
.wp-block-sueco-cta__body {
  font-size: var(--sueco-fs-medium);
  color: var(--sueco-text-secondary);
  margin: 0 0 2rem;
  line-height: 1.55;
}
.wp-block-sueco-cta__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Variant: standard (Creme bg) */
.wp-block-sueco-cta--standard { background: var(--sueco-bg-cream); }

/* Variant: dark */
.wp-block-sueco-cta--dark {
  background: var(--sueco-bg-dark);
  color: var(--sueco-white);
}
.wp-block-sueco-cta--dark .wp-block-sueco-cta__title { color: var(--sueco-white); }
.wp-block-sueco-cta--dark .wp-block-sueco-cta__body  { color: rgba(255,255,255,0.85); }
.wp-block-sueco-cta--dark .wp-block-sueco-cta__eyebrow { color: rgba(255,255,255,0.7); }

/* Variant: inquiry-form */
.wp-block-sueco-cta--inquiry-form { background: var(--sueco-bg-cream); }
.wp-block-sueco-cta__form { margin-top: 1rem; text-align: left; }
.wp-block-sueco-cta__form-fallback {
  color: var(--sueco-text-secondary);
  font-style: italic;
  text-align: center;
}

/* Das Formular sitzt als weisse Karte auf der Creme-Sektion (T-45).
   Loest Julios "auf dem farbigen Hintergrund schlecht lesbar" strukturell:
   die Eingabeflaeche liegt sichtbar VOR der Sektion, statt mit ihr zu
   verschmelzen. Die Sektions-Rhythmik (Creme nach Weiss) bleibt erhalten. */
.wp-block-sueco-cta--inquiry-form .wp-block-sueco-cta__form {
  margin-top: 2rem;
  background-color: var(--sueco-white);
  border: 1px solid var(--sueco-border);
  border-radius: 8px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 1px 3px rgba(45, 41, 38, 0.06);
}


/* =========================================================
   GRAVITY FORMS — Basisstyling (T-45)
   =========================================================
   Das Child Theme hatte bis 2026-08-01 KEINE Zeile Formular-CSS, die
   Felder kamen komplett aus dem Blocksy-Parent. Messung auf 9274, 9276
   und live 6895: Feld-Hintergrund `rgba(0,0,0,0)` (transparent), Rahmen
   rgba(82,82,82,.24) — auf Creme kompositiert 1,45:1. WCAG 2.1 SC 1.4.11
   verlangt fuer Bedienelemente 3:1. Die Felder waren nicht zu erkennen.

   Bewusst OHNE `sueco-`-Prefix: hier wird eine Fremdkomponente gestylt,
   keine eigene Klasse erfunden. Das ist die begruendete Ausnahme zu
   `.claude/rules/acf-blocks.md` ("keine custom CSS-Klassen ohne Prefix").

   Zwei Konventionen, die hier zaehlen:
   - `background-color` statt `background` — sonst faellt der Chevron aus,
     den gravity-theme als Background-Image in die Selects legt.
   - Selektor-Tiefe `.gform_wrapper.gravity-theme .gform_fields .gfield`
     (4 Klassen). Blocksy und gravity-theme liegen beide bei 3 Klassen;
     mit gleicher Spezifitaet haette die Ladereihenfolge entschieden, und
     die ist bei GF nicht verlaesslich (Styles kommen beim Form-Render).
   ========================================================= */

/* --- Eingabefelder ---------------------------------------- */
.gform_wrapper.gravity-theme .gform_fields .gfield :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
  background-color: var(--sueco-white);
  border: 1px solid var(--sueco-form-border);
  border-radius: var(--sueco-radius-field);
  color: var(--sueco-text-primary);
  font-family: var(--sueco-font-body);
  font-size: 1rem;          /* 16px — verhindert den Auto-Zoom auf iOS */
  line-height: 1.4;
  padding: 0.75rem 0.875rem;
  transition: border-color var(--sueco-transition), box-shadow var(--sueco-transition);
}

/* Blocksy setzt auf Formularfeldern eine feste `height: 40px` bei
   box-sizing: border-box. Zusammen mit dem Padding oben (12+12) und einer
   16-px-Zeile (22,4) ergaebe das 48,4 px Inhalt in 40 px Feld — der Text
   wurde oben angeschnitten, im Select am deutlichsten. Die Hoehe entsteht
   ab jetzt aus Padding + Zeilenhoehe (~48 px, nebenbei ein besseres
   Touch-Target). Textarea bleibt aussen vor, die bringt ihre eigene Hoehe mit. */
.gform_wrapper.gravity-theme .gform_fields .gfield :is(input, select):not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
  height: auto;
}

.gform_wrapper.gravity-theme .gform_fields .gfield :is(input, textarea)::placeholder {
  color: var(--sueco-text-secondary);
  opacity: 0.75;
}

.gform_wrapper.gravity-theme .gform_fields .gfield :is(input, select, textarea):focus {
  outline: 2px solid var(--sueco-primary);
  outline-offset: 1px;
  border-color: var(--sueco-primary);
}

.gform_wrapper.gravity-theme .gform_fields .gfield textarea {
  min-height: 9rem;
  resize: vertical;
}

/* --- Feldbreite -------------------------------------------
   gravity-theme setzt `input.medium { width: calc(50% - 8px) }` und traegt
   das bis in den Mobil-Viewport durch: auf 390 px standen "Bevorzugte
   Kontaktmethode" und "Telefonnummer" auf 163 px, mitten in einer sonst
   einspaltigen Strecke. Die Groessenklassen hier abzuraeumen ist besser
   als in jedem Formular jedes Feld einzeln auf "gross" zu stellen — es
   wirkt auch auf Form 8 und auf jedes kuenftige Formular.
   Mehrspaltigkeit bleibt dort erhalten, wo GF sie ueber die Grid-Spalten
   des Feldes selbst macht (Name, E-Mail + Bestaetigung). */
.gform_wrapper.gravity-theme .gform_fields .gfield :is(input, select, textarea):is(.small, .medium, .large) {
  width: 100%;
}

/* --- Labels + Beschreibungen -------------------------------
   Vorher standen Label (16/700) und Feldbeschreibung (15px) in derselben
   Textfarbe — beides gleich laut. Die Beschreibung tritt jetzt zurueck. */
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme .gform-field-label {
  font-family: var(--sueco-font-body);
  font-size: 0.9375rem;
  font-weight: var(--sueco-fw-semi);
  color: var(--sueco-text-primary);
  margin-bottom: 0.375rem;
}
.gform_wrapper.gravity-theme .gform-field-label--type-sub {
  font-size: 0.8125rem;
  font-weight: var(--sueco-fw-regular);
  color: var(--sueco-text-secondary);
}
.gform_wrapper.gravity-theme .gfield_description {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sueco-text-secondary);
  padding-top: 0.25rem;
}
.gform_wrapper.gravity-theme .gfield_required {
  color: var(--sueco-text-secondary);
  font-weight: var(--sueco-fw-regular);
}

/* --- Auswahlfelder -----------------------------------------
   `.sueco-b2b-tiles` ist ausgenommen: das Konfigurator-Plugin legt die
   Checkbox dort als unsichtbare 100-%-Flaeche ueber die ganze Kachel
   (bewusst opacity statt display:none, damit Tab-Reihenfolge und
   Screenreader-Zustand erhalten bleiben). Eine feste Groesse hier wuerde
   genau diese Klickflaeche auf 18 px zusammenschrumpfen. */
.gform_wrapper.gravity-theme .gfield:not(.sueco-b2b-tiles) :is([type="radio"], [type="checkbox"]) {
  accent-color: var(--sueco-primary);
  width: 1.125rem;
  height: 1.125rem;
}
.gform_wrapper.gravity-theme .gchoice label { cursor: pointer; }

/* --- Vertrauenszeile ueber dem Button (HTML-Feld, T-45) ----- */
.gform_wrapper.gravity-theme .sueco-form-trust {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sueco-border);
}
.gform_wrapper.gravity-theme .sueco-form-trust p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--sueco-text-secondary);
}
.gform_wrapper.gravity-theme .sueco-form-trust strong { color: var(--sueco-text-primary); }

/* --- Submit ------------------------------------------------
   Dritter Radius im Formular abgeraeumt (Felder 5, Plugin-Bausteine 4,
   Button 12): innerhalb des Formulars zaehlt der Feld-Radius. */
.gform_wrapper.gravity-theme .gform_footer { margin-top: 1.5rem; padding: 0; }
.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"] {
  background-color: var(--sueco-primary);
  color: var(--sueco-white);
  border: 0;
  border-radius: var(--sueco-radius-field);
  font-family: var(--sueco-font-button);
  font-size: 1rem;
  font-weight: var(--sueco-fw-semi);
  line-height: 1;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: background-color var(--sueco-transition);
}
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"]:hover {
  background-color: var(--sueco-primary-hover);
}
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:focus-visible {
  outline: 2px solid var(--sueco-primary);
  outline-offset: 2px;
}
@media (max-width: 639px) {
  .gform_wrapper.gravity-theme .gform_footer input[type="submit"] { width: 100%; }
}

/* --- Fehlerzustand -----------------------------------------
   Ohne diese Regel wuerde der neue Rahmen oben die rote Fehlermarkierung
   von Gravity Forms ueberschreiben — der Fix haette die Validierung
   unsichtbar gemacht. */
/* `.gfield.gfield_error` statt nur `.gfield_error`: die Basisregel oben traegt
   drei :not()-Klauseln und liegt damit eine Klasse hoeher — ohne die zusaetzliche
   Klasse hier behielt das Fehlerfeld den normalen Rahmen. Am 2026-08-01 im
   Absende-Test genau so gemessen. */
.gform_wrapper.gravity-theme .gform_fields .gfield.gfield_error :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
  border-color: var(--sueco-form-border-error);
}
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
  color: var(--sueco-form-border-error);
  font-size: 0.875rem;
}

/* --- Korrektur an fremdem Formular-Style (Julio 2026-08-03) -----------
   Die Regel unten korrigiert CSS, das NICHT aus diesem Theme kommt: das
   Datumsfeld aus dem GF-eigenen theme.min.css. Dieses Sheet laedt NACH
   components.css (Index 24 von 29, live gemessen), deshalb hier bewusst
   ueber Spezifitaet statt ueber Reihenfolge.
   Die frueher hier stehende Kachel-Regel ist am 2026-08-04 entfallen: sie
   lebt seit Plugin v1.0.6 im Konfigurator selbst (b2b-quote.css) und war
   hier nur noch ein Duplikat. */

/* Datumsfeld auf volle Spaltenbreite. GF setzt `width:auto` auf
   .ginput_container_date input, was auf das size-Attribut zurueckfaellt
   (245px) — daneben stehen alle anderen Felder auf 718px (Desktop) bzw.
   277px (390px). Die Breitenregel aus T-45 greift dort nicht, weil sie auf
   .small/.medium/.large zielt und Datepicker diese Klassen nicht tragen. */
.gform_wrapper.gravity-theme .gform_fields .gfield .ginput_container_date input {
  width: 100%;
}

/* --- Bestaetigung: Sektions-Vorspann zuruecknehmen (T-66) -------------
   Auf 1519 steht ueber dem Formular die Subline „Erzaehlen Sie uns von
   Ihrem Projekt. Wir melden uns innerhalb von 1-2 Werktagen bei Ihnen."
   Gravity Forms ersetzt beim Absenden ausschliesslich das Formular durch
   die Bestaetigung — die Subline bleibt stehen. Ergebnis: das Versprechen
   steht zweimal fast wortgleich da („...werden uns innerhalb von 1-2
   Werktagen bei Ihnen melden!"), und darueber wird jemand eingeladen, etwas
   zu erzaehlen, das er gerade erzaehlt hat. Julio am 2026-08-20 im eigenen
   Absende-Test gesehen.

   Gescopt auf .sueco-contact-inner: die Klasse traegt nur 1519. Die fuenf
   B2B-Unterseiten binden dasselbe Formular ein, haben aber eigene
   Vorspanntexte ohne diese Dopplung — sie sollen ihren Text behalten.

   Greift in beiden Absendemodi: 1519 laeuft ueber AJAX, die Unterseiten
   ueber postback. In beiden Faellen setzt GF `.gform_confirmation_wrapper`
   an die Stelle des Formulars, also als Geschwister der Subline. */
.sueco-contact-inner:has(.gform_confirmation_wrapper) .sueco-section-subheading {
  display: none;
}

/* =========================================================
   PARENT-THEME OVERRIDES
   Blocksy rendert eigenen Footer (.ct-footer) und injectet
   --wp--style--block-gap als margin-top zwischen Bloecken.
   Diese Sektion buegelt das fuer das sueco.livesign glatt.
   ========================================================= */

/* Footer-Vereinheitlichung: Blocksy ct-footer + alle Footer-Rows auf
   --sueco-bg-dark (#1c1917) zwingen — gleiche Farbe wie CTA-dark, Hero-bg-dark
   und Cover-Overlay-Basis. !important schlaegt Blocksy-Customizer-Inline-Styles. */
.ct-footer,
.ct-footer [data-row] {
  background-color: var(--sueco-bg-dark) !important;
}

/* Block-Spacing reset: WordPress core injectet --wp--style--block-gap (~28px)
   als margin-top zwischen direkten Block-Geschwistern in .is-layout-flow.
   Bei vollflaechigen Section-Bloecken erzeugt das einen weissen Streifen
   zwischen den Bloecken. Wir nullen das ausschliesslich fuer sueco-Bloecke,
   damit Inline-Bloecke (Paragraph, Image) im Editorial-Kontext nicht betroffen sind.
   :not([class*="__"]) schliesst BEM-Inner-Elements aus (__title, __body, __ctas, ...)
   — sonst kollabieren auch die internen Abstaende zwischen H1/Lead/Buttons im Block. */
[class*="wp-block-sueco-"]:not([class*="__"]) {
  margin-block: 0 !important;
}

/* Container-Padding/Margin nullen wenn direkter Inhalt sueco-Bloecke sind.
   Sonst entstehen weisse Streifen ueber/unter dem ersten/letzten Block
   (von .entry-content padding-block, article padding, main.site-main padding,
   und Blocksy .ct-container-full[data-vertical-spacing] mit 50px top+bottom).
   :has() seit 2023 in allen modernen Browsern. */
.entry-content:has(> [class*="wp-block-sueco-"]),
article:has(> .entry-content > [class*="wp-block-sueco-"]),
main.site-main:has([class*="wp-block-sueco-"]),
.ct-container-full:has([class*="wp-block-sueco-"]) {
  padding-block: 0 !important;
  margin-block: 0 !important;
}


/* =========================================================
   sueco/gallery — Vanilla Lightbox Overlay
   JS: assets/js/sueco-lightbox.js (conditional enqueue via has_block)
   Klick auf .wp-block-sueco-gallery__link → Overlay mit Full-Size + Caption.
   ========================================================= */

body.sueco-lightbox-open { overflow: hidden; }

.sueco-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity 200ms ease;
}
.sueco-lightbox.is-active {
  display: flex;
  opacity: 1;
}

.sueco-lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.92);
  cursor: zoom-out;
}

.sueco-lightbox__figure {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  pointer-events: none;
}

.sueco-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.sueco-lightbox__caption {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9375rem;
  text-align: center;
  max-width: 800px;
  pointer-events: auto;
}

.sueco-lightbox__close,
.sueco-lightbox__nav {
  position: absolute;
  z-index: 3;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.sueco-lightbox__close:hover,
.sueco-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}
.sueco-lightbox__close { top: 1rem; right: 1rem; }
.sueco-lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.sueco-lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.sueco-lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.05); }
.sueco-lightbox__nav--next:hover { transform: translateY(-50%) scale(1.05); }

@media (max-width: 640px) {
  .sueco-lightbox__close { top: 0.5rem; right: 0.5rem; width: 40px; height: 40px; }
  .sueco-lightbox__nav { width: 40px; height: 40px; }
  .sueco-lightbox__nav--prev { left: 0.5rem; }
  .sueco-lightbox__nav--next { right: 0.5rem; }
}


/* =========================================================
   sueco/testimonials — P3b 2026-05-14
   Variants: grid (3er-Karten) | single (Pull-Quote).
   ========================================================= */

.wp-block-sueco-testimonials__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  /* auto-fit + minmax zentriert beliebig viele Cards (1/2/3/4/...) immer mittig,
     statt sie wie ein klassisches 3-col-Grid linksbuendig zu fuellen. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 360px));
  justify-content: center;
}
@media (min-width: 1024px) {
  .wp-block-sueco-testimonials__grid { gap: 2rem; }
}

.wp-block-sueco-testimonials__item { display: flex; }

.wp-block-sueco-testimonials__card {
  margin: 0;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  background: var(--sueco-white);
  border: 1px solid var(--sueco-border);
  box-shadow: var(--sueco-shadow-sm);
}

/* Auf white-bg muss die Card sichtbare Differenzierung haben — Creme + staerkere Border. */
.wp-block-sueco-testimonials.sueco-bg-white .wp-block-sueco-testimonials__card,
.wp-block-sueco-testimonials:not([class*="sueco-bg-"]) .wp-block-sueco-testimonials__card {
  background: var(--sueco-bg-cream);
  border-color: var(--sueco-border-strong);
}

.wp-block-sueco-testimonials__quote {
  font-family: var(--sueco-font-heading);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--sueco-text-primary);
  margin: 0;
  position: relative;
  padding-left: 1.5rem;
  flex: 1 1 auto;
}
.wp-block-sueco-testimonials__quote::before {
  content: "\201E"; /* deutsches oeffnendes Anfuehrungszeichen */
  font-family: var(--sueco-font-heading);
  font-size: 3rem;
  font-style: italic;
  line-height: 0;
  color: var(--sueco-primary);
  position: absolute;
  left: -0.125rem;
  top: 0.6rem;
}

.wp-block-sueco-testimonials__cite {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sueco-border);
}
/* Ohne Avatar: Name+Meta mittig zentriert (sauberere Optik bei textonly Cites). */
.wp-block-sueco-testimonials__card .wp-block-sueco-testimonials__cite:not(:has(.wp-block-sueco-testimonials__avatar)) {
  justify-content: center;
  text-align: center;
}
.wp-block-sueco-testimonials__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 48px;
  background: var(--sueco-bg-cream);
}
.wp-block-sueco-testimonials__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wp-block-sueco-testimonials__person { display: flex; flex-direction: column; gap: 0.125rem; }
.wp-block-sueco-testimonials__name {
  font-weight: 600;
  color: var(--sueco-text-primary);
  font-size: 0.9375rem;
}
.wp-block-sueco-testimonials__meta {
  font-size: 0.8125rem;
  color: var(--sueco-text-secondary);
}

/* single — Pull-Quote */
.wp-block-sueco-testimonials__pull {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding: 1.5rem 1rem;
}
.wp-block-sueco-testimonials__pull .wp-block-sueco-testimonials__quote {
  font-family: var(--sueco-font-heading);
  font-size: clamp(1.375rem, 2.25vw, 1.75rem);
  line-height: 1.45;
  font-style: italic;
  padding-left: 0;
}
.wp-block-sueco-testimonials__pull .wp-block-sueco-testimonials__quote::before { content: none; }
.wp-block-sueco-testimonials__mark {
  display: block;
  font-family: var(--sueco-font-heading);
  font-size: 4.5rem;
  line-height: 0.6;
  color: var(--sueco-primary);
  margin-bottom: 0.5rem;
}
.wp-block-sueco-testimonials__pull .wp-block-sueco-testimonials__cite {
  justify-content: center;
  border-top: none;
  margin-top: 1.25rem;
  padding-top: 0;
}

/* dark-Background-Anpassung (testimonials-spezifisch — Section-Header wird global gesetzt) */
.wp-block-sueco-testimonials.sueco-bg-dark .wp-block-sueco-testimonials__quote,
.wp-block-sueco-testimonials.sueco-bg-dark .wp-block-sueco-testimonials__name { color: var(--sueco-white); }
.wp-block-sueco-testimonials.sueco-bg-dark .wp-block-sueco-testimonials__meta { color: rgba(255,255,255,0.75); }
.wp-block-sueco-testimonials.sueco-bg-dark .wp-block-sueco-testimonials__card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
.wp-block-sueco-testimonials.sueco-bg-dark .wp-block-sueco-testimonials__cite { border-top-color: rgba(255,255,255,0.15); }
.wp-block-sueco-testimonials.sueco-bg-dark .wp-block-sueco-testimonials__quote::before { color: var(--sueco-bg-cream); }
.wp-block-sueco-testimonials.sueco-bg-dark .wp-block-sueco-testimonials__mark { color: var(--sueco-bg-cream); }

.wp-block-sueco-testimonials__empty {
  text-align: center;
  color: var(--sueco-text-secondary);
  font-style: italic;
}

/* Sterne-Bewertung + Quelle (z. B. Google-Reviews) */
.wp-block-sueco-testimonials__stars {
  display: inline-flex;
  gap: 0.1rem;
  margin-bottom: 0.875rem;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.04em;
}
.wp-block-sueco-testimonials__star { color: var(--sueco-border-strong); }
.wp-block-sueco-testimonials__star.is-filled { color: var(--sueco-star); }

.wp-block-sueco-testimonials__source {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sueco-text-secondary);
}

/* single/pull: Sterne zentriert ueber dem Zitat */
.wp-block-sueco-testimonials__pull .wp-block-sueco-testimonials__stars {
  display: flex;
  justify-content: center;
}

/* dark-Background */
.wp-block-sueco-testimonials.sueco-bg-dark .wp-block-sueco-testimonials__star { color: rgba(255,255,255,0.25); }
.wp-block-sueco-testimonials.sueco-bg-dark .wp-block-sueco-testimonials__star.is-filled { color: var(--sueco-star); }
.wp-block-sueco-testimonials.sueco-bg-dark .wp-block-sueco-testimonials__source { color: rgba(255,255,255,0.7); }


/* =========================================================
   sueco Trust-Bar (Schluesselanhaenger-Kategorie, via Hook)
   Kompakter Vertrauens-Streifen oben auf dem WooCommerce-Archiv.
   Minimal: kein Kasten, nur Haarlinien — integriert sich in die Seite.
   Die Reviews-Sektion unten nutzt die testimonials-Klassen.
   ========================================================= */
.sueco-trustbar {
  border-block: 1px solid var(--sueco-border);
  margin-block: 1.5rem;
}
.sueco-trustbar__list {
  list-style: none;
  margin: 0 auto;
  padding: 0.875rem var(--sueco-gutter);
  max-width: var(--sueco-container-max);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
}
.sueco-trustbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--sueco-text-secondary);
}
.sueco-trustbar__item strong { color: var(--sueco-text-primary); font-weight: 600; }
.sueco-trustbar__item svg { color: var(--sueco-primary); flex: 0 0 auto; }
@media (max-width: 640px) {
  .sueco-trustbar__list { justify-content: flex-start; gap: 0.625rem 1.25rem; }
  .sueco-trustbar__item { font-size: 0.8125rem; }
}

/* Google-Aggregat-Badge in der Reviews-Sektion (Kategorieseite, via Hook).
   Sterne-Reihe + "4,9 von 5 auf Google" zentriert zwischen Head und Karten-Grid. */
.sueco-google-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 2.5rem;
}
.sueco-google-badge__stars {
  display: inline-flex;
  gap: 0.15rem;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--sueco-star);
}
.sueco-google-badge__text { font-size: 0.9375rem; color: var(--sueco-text-secondary); }
.sueco-google-badge__text strong { color: var(--sueco-text-primary); }

.sueco-reviews-cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}


/* =========================================================
   sueco/product-grid — P3b 2026-05-14
   Variants: cols-3 (default) | cols-4.
   ========================================================= */

.wp-block-sueco-product-grid__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .wp-block-sueco-product-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wp-block-sueco-product-grid--cols-3 .wp-block-sueco-product-grid__grid { grid-template-columns: repeat(3, 1fr); }
  .wp-block-sueco-product-grid--cols-4 .wp-block-sueco-product-grid__grid { grid-template-columns: repeat(4, 1fr); }
}

.wp-block-sueco-product-grid__link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.wp-block-sueco-product-grid__media {
  position: relative;
  overflow: hidden;
  background: var(--sueco-bg-cream);
  border-radius: var(--sueco-radius-image-link);
}
.wp-block-sueco-product-grid__media .sueco-placeholder { aspect-ratio: inherit; }
.wp-block-sueco-product-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--sueco-transition);
}
.wp-block-sueco-product-grid__link:hover .wp-block-sueco-product-grid__img { transform: scale(1.04); }

.wp-block-sueco-product-grid__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--sueco-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 2px;
  z-index: 2;
}

.wp-block-sueco-product-grid__body {
  padding-top: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.wp-block-sueco-product-grid__title {
  font-family: var(--sueco-font-body);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  color: var(--sueco-text-primary);
  line-height: 1.35;
}
.wp-block-sueco-product-grid__link:hover .wp-block-sueco-product-grid__title { color: var(--sueco-primary); }
.wp-block-sueco-product-grid__price {
  color: var(--sueco-text-primary);
  font-weight: 600;
  font-size: 0.9375rem;
}
.wp-block-sueco-product-grid__price del {
  color: var(--sueco-text-secondary);
  font-weight: 400;
  margin-right: 0.5rem;
}
.wp-block-sueco-product-grid__price ins { text-decoration: none; color: var(--sueco-primary); }

.wp-block-sueco-product-grid__cta {
  margin-top: 2.25rem;
  text-align: center;
}
.wp-block-sueco-product-grid__empty {
  text-align: center;
  color: var(--sueco-text-secondary);
  font-style: italic;
}


/* =========================================================
   sueco/video-embed — P3b 2026-05-14
   Variants: inline (zentriert, Aspect-Ratio) | hero-bg (vollflaechig + Overlay).
   Sources: youtube/vimeo (iframe) | mp4 (native video).
   ========================================================= */

/* inline */
.wp-block-sueco-video-embed__frame {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  background: #000;
  border-radius: var(--sueco-radius-image-link);
  overflow: hidden;
}
.wp-block-sueco-video-embed__iframe,
.wp-block-sueco-video-embed__video,
.wp-block-sueco-video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}
.wp-block-sueco-video-embed__frame .sueco-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hero-bg */
.wp-block-sueco-video-embed--hero-bg {
  position: relative;
  min-height: 70vh;
  padding-block: var(--sueco-section-py);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--sueco-white);
}
.wp-block-sueco-video-embed__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wp-block-sueco-video-embed__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.wp-block-sueco-video-embed--src-youtube .wp-block-sueco-video-embed__bg,
.wp-block-sueco-video-embed--src-vimeo .wp-block-sueco-video-embed__bg {
  /* YouTube/Vimeo iframe braucht Skalierung, damit UI ausserhalb des Viewports liegt */
  width: 100vw;
  height: 56.25vw; /* 16:9 */
  min-height: 100%;
  min-width: 177.78vh; /* 16:9 reverse */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.wp-block-sueco-video-embed__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  z-index: 1;
}
.wp-block-sueco-video-embed__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.wp-block-sueco-video-embed__content {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.wp-block-sueco-video-embed__eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sueco-bg-cream);
  font-weight: 500;
}
.wp-block-sueco-video-embed__title {
  margin: 0;
  font-family: var(--sueco-font-heading);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.15;
  color: #fff;
}
.wp-block-sueco-video-embed__body {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
}
.wp-block-sueco-video-embed__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.wp-block-sueco-video-embed__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sueco-bg-gray);
  color: var(--sueco-text-secondary);
  font-style: italic;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.875rem;
}


/* =========================================================
   sueco/feature-product — Iter 15 (2026-05-14)
   Ein einzelnes WC-Produkt prominent vorgestellt.
   Variants: media-text (image-right | image-left) | stage.
   ========================================================= */

.wp-block-sueco-feature-product__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

/* --- Layout: media-text (Bild + Spalte) ----------------- */
@media (min-width: 1024px) {
  .wp-block-sueco-feature-product--media-text .wp-block-sueco-feature-product__inner {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
  .wp-block-sueco-feature-product--image-left .wp-block-sueco-feature-product__media { order: 1; }
  .wp-block-sueco-feature-product--image-left .wp-block-sueco-feature-product__content { order: 2; }
}

/* --- Layout: stage (Bild als BG + Overlay + Text vorne) - */
.wp-block-sueco-feature-product--stage {
  position: relative;
  min-height: 70vh;
  padding-block: var(--sueco-section-py);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.wp-block-sueco-feature-product--stage .wp-block-sueco-feature-product__media-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wp-block-sueco-feature-product--stage .wp-block-sueco-feature-product__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wp-block-sueco-feature-product--stage .wp-block-sueco-feature-product__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.35));
  z-index: 1;
}
.wp-block-sueco-feature-product--stage .sueco-container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.wp-block-sueco-feature-product--stage .wp-block-sueco-feature-product__inner {
  display: block;
}
.wp-block-sueco-feature-product--stage .wp-block-sueco-feature-product__content {
  max-width: 640px;
  text-align: left;
}
.wp-block-sueco-feature-product--stage .wp-block-sueco-feature-product__title { color: #fff; }
.wp-block-sueco-feature-product--stage .wp-block-sueco-feature-product__body { color: rgba(255,255,255,0.88); }
.wp-block-sueco-feature-product--stage .wp-block-sueco-feature-product__bullets li { color: rgba(255,255,255,0.95); }
.wp-block-sueco-feature-product--stage .wp-block-sueco-feature-product__bullets svg { color: var(--sueco-bg-cream); }
.wp-block-sueco-feature-product--stage .wp-block-sueco-feature-product__price { color: var(--sueco-bg-cream); }
.wp-block-sueco-feature-product--stage .wp-block-sueco-feature-product__price del { color: rgba(255,255,255,0.55); }
.wp-block-sueco-feature-product--stage .wp-block-sueco-feature-product__price ins { color: var(--sueco-bg-cream); }
.wp-block-sueco-feature-product--stage .sueco-sec__eyebrow { color: var(--sueco-bg-cream); }

/* --- Content ------------------------------------------- */
.wp-block-sueco-feature-product__title {
  font-family: var(--sueco-font-heading);
  font-size: var(--sueco-fs-x-large);
  font-weight: 700;
  margin: 0 0 1rem;
  line-height: 1.15;
  text-wrap: balance;
}
.wp-block-sueco-feature-product__price {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--sueco-primary);
  margin: 0 0 1.25rem;
  line-height: 1.2;
}
.wp-block-sueco-feature-product__price del {
  color: var(--sueco-text-secondary);
  font-weight: 400;
  margin-right: 0.5rem;
  font-size: 1.125rem;
}
.wp-block-sueco-feature-product__price ins {
  text-decoration: none;
  color: var(--sueco-primary);
}
.wp-block-sueco-feature-product__body {
  font-size: var(--sueco-fs-medium);
  color: var(--sueco-text-secondary);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.wp-block-sueco-feature-product__body p:last-child { margin-bottom: 0; }

.wp-block-sueco-feature-product__bullets {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.wp-block-sueco-feature-product__bullets li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  color: var(--sueco-text-primary);
}
.wp-block-sueco-feature-product__bullets svg {
  flex: 0 0 18px;
  margin-top: 2px;
  color: var(--sueco-primary);
}

/* --- Media --------------------------------------------- */
.wp-block-sueco-feature-product__image,
.wp-block-sueco-feature-product__placeholder {
  aspect-ratio: 3 / 2; /* Fallback wenn inline-style fehlt */
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--sueco-radius-image-link);
}
.wp-block-sueco-feature-product__placeholder { min-height: 200px; }

/* --- Dark-BG-Overrides --------------------------------- */
.wp-block-sueco-feature-product.sueco-bg-dark .wp-block-sueco-feature-product__title { color: var(--sueco-bg-cream); }
.wp-block-sueco-feature-product.sueco-bg-dark .wp-block-sueco-feature-product__body { color: rgba(255,255,255,0.78); }
.wp-block-sueco-feature-product.sueco-bg-dark .wp-block-sueco-feature-product__bullets li { color: var(--sueco-bg-cream); }
.wp-block-sueco-feature-product.sueco-bg-dark .wp-block-sueco-feature-product__price { color: var(--sueco-bg-cream); }
.wp-block-sueco-feature-product.sueco-bg-dark .wp-block-sueco-feature-product__price ins { color: var(--sueco-bg-cream); }
.wp-block-sueco-feature-product.sueco-bg-dark .wp-block-sueco-feature-product__price del { color: rgba(255,255,255,0.5); }


/* =========================================================
   WooCommerce Off-Canvas-Cart — Drawer-Feinschliff (2026-06-15)
   Gilt fuer ALLE Viewports (Desktop + Mobile). Behebt:
   (1) Leerraum zwischen den Germanized-Steuerhinweisen,
   (2) uneinheitliche Schrift zwischen Zwischensumme und Hinweisen,
   (3) Cart-Fee-Zeile (Gestaltungsservice) sichtbar machen — Markup
       kommt aus inc/mini-cart-fees.php,
   (4) Name/Artikelnummer und Konfigurator-Optionen auf eine linke Kante.
   Blocksy gibt der Zwischensumme (.woocommerce-mini-cart__total) bewusst
   fett/uppercase/13px; die gzd-<p> erben davon nichts -> wirkten groesser
   und "anders". Wir ziehen die Hinweise als ruhige Fine-Print nach und
   stylen die Fee wie die Zwischensumme.
   Rein additiv, gescoped auf #woo-cart-panel.
   ========================================================= */

/* (3) Fee-Zeile (z. B. Gestaltungsservice) — optisch wie die Zwischensumme,
       aber ohne eigenen Trenner (sitzt direkt unter der Summe). */
#woo-cart-panel p.sueco-mini-cart-fee {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  font-family: var(--sueco-font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--theme-text-color, var(--sueco-text-primary));
}
#woo-cart-panel p.sueco-mini-cart-fee .sueco-mini-cart-fee__amount { white-space: nowrap; }

/* (1)+(2) Germanized MwSt-/Versand-Hinweise — einheitliche, ruhige
   Fine-Print + enge Abstaende (keine "leere Zeile" mehr dazwischen). */
#woo-cart-panel p.wc-gzd-total-mini-cart {
  margin: 3px 0 0;
  padding: 0;
  font-family: var(--sueco-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
  color: var(--sueco-text-secondary);
}
#woo-cart-panel p.wc-gzd-total-mini-cart a { color: inherit; text-decoration: underline; }

/* (4) Inhaltsspalte buendig: Produktname/Artikelnummer und die
   Konfigurator-Optionen (WCPA) teilen sich eine linke Kante. Killt den
   UA-Standard-Listeneinzug der Optionen-<ul> und etwaige Title-Einzuege. */
#woo-cart-panel .product-data .product-title,
#woo-cart-panel .product-data .product-sku,
#woo-cart-panel .wcpa_cart_meta,
#woo-cart-panel .wcpa_cart_meta_item {
  margin-inline-start: 0;
  padding-inline-start: 0;
  text-indent: 0;
}
#woo-cart-panel .wcpa_cart_meta { list-style: none; }


/* =========================================================
   WooCommerce Off-Canvas-Cart — Mobile-Optimierung (2026-06-15)
   Der Blocksy-Companion-Drawer (#woo-cart-panel) ist Bordmittel
   ohne eigenes Child-CSS. Auf schmalen Screens erzeugte er
   horizontalen Overflow (fehlendes min-width:0 im Grid-Item, da
   product-data min-width:auto die Inhaltsspalte aufblaeht) plus
   einen zu hohen Footer (gestapelte Buttons ~134px).
   Rein additiv, gescoped auf #woo-cart-panel, nur Mobile (<=600px).
   Desktop + alle anderen Seiten bleiben unberuehrt.
   ========================================================= */
@media (max-width: 600px) {
  /* 1) Horizontalen Overflow stoppen — Grid-Inhaltsspalte darf schrumpfen */
  #woo-cart-panel li.woocommerce-mini-cart-item {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    min-width: 0 !important;
  }
  #woo-cart-panel .product-data {
    min-width: 0 !important;
    overflow-wrap: break-word;
  }

  /* 2) WCPA-Produktoptionen lesbar: Label/Wert untereinander, umbrechen,
        25px-Einzug raus, Vorschaubilder als kompakte Thumbnails */
  #woo-cart-panel .wcpa_cart_meta {
    padding-left: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-block: 4px 0;
  }
  #woo-cart-panel .wcpa_cart_meta_item {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-bottom: 2px;
  }
  #woo-cart-panel .wcpa_cart_meta_item-label { font-weight: 600; }
  #woo-cart-panel .wcpa_cart_meta_item-value {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  #woo-cart-panel .wcpa_cart_meta_item-value img,
  #woo-cart-panel .wcpa_image_group_item img {
    max-width: 100% !important;
    max-height: 56px !important;
    width: auto !important;
    height: auto;
  }

  /* 3) Preiszeile als ganze Einheiten umbrechen — Betraege nie mitten zerschneiden */
  #woo-cart-panel .ct-product-actions {
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
  }
  #woo-cart-panel .ct-product-actions > * { white-space: nowrap; }

  /* 4) Footer kompakt — Buttons nebeneinander statt gestapelt (spart ~70px Hoehe) */
  #woo-cart-panel .woocommerce-mini-cart__buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #woo-cart-panel .woocommerce-mini-cart__buttons .button {
    margin: 0 !important;
    padding: 13px 8px !important;
    font-size: 13px !important;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }
}

/* =========================================================
   MEGA-MENU (Blocksy Pro nativ) — sueco-Tokens
   Scope: nur Mega-Items via [class*="ct-mega-menu-columns-"].
   Struktur: Spalten = Heading-Items (.ct-column-heading) mit
   Link-Liste (.sub-menu) darunter + 1 Featured-Spalte (text-Typ,
   .sueco-mega-feature). Aktiv auf Shop (2937) + B2B (1700).
   Ueber uns / Kontakt = regulaere Dropdowns, unberuehrt.
   ========================================================= */

/* Panel-Grid: Luft + Spaltenabstaende auf sueco-Weiss, Spalten oben buendig */
.menu-item[class*="ct-mega-menu-columns-"] > .sub-menu {
  background: var(--sueco-white);
  gap: 0 2.75rem;
  padding: 2rem 2.25rem 2.25rem;
  align-items: start;
}

/* Spaltenkopf (Produkte / Angebot / Leistungen / Mehr) = nicht-klickbares Heading */
.menu-item[class*="ct-mega-menu-columns-"] > .sub-menu > .menu-item > .ct-column-heading {
  font-family: var(--sueco-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sueco-text-secondary);
  pointer-events: none;
  padding: 0 0 0.7rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--sueco-border);
}

/* Link-Liste je Spalte */
.menu-item[class*="ct-mega-menu-columns-"] > .sub-menu > .menu-item > .sub-menu {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

/* Kategorie-/Leistungs-Links (2. Ebene) — klare, lesbare Gewichtung */
.menu-item[class*="ct-mega-menu-columns-"] > .sub-menu > .menu-item > .sub-menu > .menu-item > .ct-menu-link {
  font-family: var(--sueco-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--sueco-text-primary);
  padding-block: 0.42rem;
  transition: color var(--sueco-transition);
}
.menu-item[class*="ct-mega-menu-columns-"] > .sub-menu > .menu-item > .sub-menu > .menu-item > .ct-menu-link:hover {
  color: var(--sueco-primary);
}

/* 3. Ebene (z. B. „Schluesselanhaenger mit Motiv") — kleiner, sekundaer, eingerueckt */
.menu-item[class*="ct-mega-menu-columns-"] .sub-menu .sub-menu .sub-menu .ct-menu-link {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--sueco-text-secondary);
  padding-left: 0.8rem;
  padding-block: 0.26rem;
}

/* Carets/Toggles + Link-Icons im Mega ausblenden (rein typografisch) */
.menu-item[class*="ct-mega-menu-columns-"] .ct-toggle-dropdown-desktop,
.menu-item[class*="ct-mega-menu-columns-"] .ct-toggle-dropdown-desktop-ghost,
.menu-item[class*="ct-mega-menu-columns-"] .ct-icon-container {
  display: none;
}

/* Featured-Spalte: eigenen Menue-Titel ("Featured ...") ausblenden, nur Panel zeigen */
.menu-item[class*="ct-mega-menu-columns-"] > .sub-menu > .menu-item:has(.sueco-mega-feature) > .ct-menu-link {
  display: none;
}
.menu-item[class*="ct-mega-menu-columns-"] > .sub-menu > .menu-item:has(.sueco-mega-feature) > .entry-content {
  margin: 0;
}

/* Featured-Spalte ist Desktop-only: in Mobile/Offcanvas (ausserhalb Mega) ausblenden.
   !important schlaegt Blocksys id-gescopte Mobile-Menu-Regel (#menu-... .menu-item). */
.sueco-mega-feature-item { display: none !important; }
.menu-item[class*="ct-mega-menu-columns-"] > .sub-menu > .sueco-mega-feature-item { display: block !important; }

/* Featured-Panel (Bild + Eyebrow + Titel + CTA) */
.sueco-mega-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
}
.sueco-mega-feature__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sueco-radius-card);
  margin-bottom: 1rem;
  display: block;
}
.sueco-mega-feature__eyebrow {
  font-family: var(--sueco-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sueco-primary);
}
.sueco-mega-feature__title {
  font-family: var(--sueco-font-heading);
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--sueco-text-primary);
  margin: 0.35rem 0 0.7rem;
}
.sueco-mega-feature__cta {
  font-family: var(--sueco-font-button);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sueco-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--sueco-transition);
}
.sueco-mega-feature__cta span {
  transition: transform var(--sueco-transition);
}
.sueco-mega-feature:hover .sueco-mega-feature__cta {
  color: var(--sueco-primary-hover);
}
.sueco-mega-feature:hover .sueco-mega-feature__cta span {
  transform: translateX(3px);
}

/* =========================================================
   SHOP-MEGA — Custom-Panel (nur Shop-Item 2937, eine text-Zelle)
   3 Bereiche: links Kategorien, Mitte hover-abhaengiges Vorschau-
   bild (Cross-Fade rein per CSS :has(), kein JS), rechts festes
   "Handgefertigt in Muenchen"-Werkstattpanel. Desktop-only;
   Mobile = flache Link-Liste (Bilder ausgeblendet).
   ========================================================= */

/* Panel-Anker: Shop-Item traegt die absolute Positionierung, damit das Panel
   buendig UNTER "Shop" startet. Blocksy zentriert content-width Mega sonst per
   left:0/right:0/margin:auto im vollbreiten Header-Wrapper -> Panel klappt zu
   weit rechts auf (ca. 178px daneben bei 1440px). Item static -> relative macht
   das Item zum offsetParent, left:0 = linke Kante von "Shop". */
.menu-item[class*="ct-mega-menu-columns-"]:has(.sueco-shop-mega) {
  position: relative !important;
}

/* Panel-Breite: volle Content-Breite, EXAKT wie das B2B-Mega. Blocksy dimensioniert
   content-width Megas per `width: var(--mega-menu-width, var(--theme-container-width-base))`
   (main.min.css) -> fluide Content-Container-Breite (1296px @ 1440, 1446px @ 1920, 922px @ 1024).
   Wir nutzen dieselbe Variable statt eines festen Pixelwerts. Der fruehere Hardcode
   min(1296px,94vw) war bei 1440 ermittelt und blieb auf breiteren Monitoren ~150px zu
   schmal (brach vor der Lupe ab), waehrend B2B mitwuchs. Item ist der Anker (left:0),
   left:0 haelt die Panel-Kante buendig unter "Shop" (= Content-Links, erstes Item). */
.menu-item[class*="ct-mega-menu-columns-"]:has(.sueco-shop-mega) > .sub-menu {
  left: 0 !important;
  right: auto !important;
  margin-left: 0 !important;
  width: var(--theme-container-width-base);
  padding: 2rem 2.25rem 2.25rem;
}

/* Panel-Item-Titel ("Shop-Panel") ausblenden — nur das Panel zeigen */
.menu-item[class*="ct-mega-menu-columns-"] > .sub-menu > .menu-item:has(.sueco-shop-mega) > .ct-menu-link { display: none; }
.menu-item[class*="ct-mega-menu-columns-"] > .sub-menu > .menu-item:has(.sueco-shop-mega) > .entry-content { margin: 0; }

.sueco-shop-mega {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: 2.5rem;
  align-items: stretch;
  min-height: 360px;
}

/* --- Content-Spalten 1-3 (Schluesselanhaenger | Accessoires | Gastronomie) --- */
.sueco-shop-mega__col { display: flex; flex-direction: column; gap: 0.1rem; }

/* Spalten-Kopf = Kategorie-Link (uppercase, Trennlinie) */
.sueco-shop-mega__coltitle {
  font-family: var(--sueco-font-body);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sueco-text-secondary); text-decoration: none;
  padding-bottom: 0.6rem; margin-bottom: 0.7rem; border-bottom: 1px solid var(--sueco-border);
  transition: color var(--sueco-transition);
}
.sueco-shop-mega__coltitle:hover { color: var(--sueco-primary); }

/* Links (Kategorie + Produkt gleich gestylt — die Trennung macht das Mikro-Label) */
.sueco-shop-mega__link {
  font-family: var(--sueco-font-body); font-size: 0.95rem; font-weight: 500;
  color: var(--sueco-text-primary); text-decoration: none;
  padding: 0.4rem 0;
  transition: color var(--sueco-transition), padding-left var(--sueco-transition);
}
.sueco-shop-mega__link:hover { color: var(--sueco-primary); padding-left: 0.3rem; }

/* Mikro-Label "Beliebte Produkte" — trennt Produktlinks von den Kategorie-Links */
.sueco-shop-mega__microlabel {
  font-family: var(--sueco-font-body); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sueco-text-secondary);
  margin: 0.9rem 0 0.35rem; padding-top: 0.85rem; border-top: 1px solid var(--sueco-border);
}
/* Spalte ohne Unterkategorie (z. B. Gastronomie): Microlabel folgt direkt auf den
   Kopf -> die Kopf-Trennlinie NICHT durch die Microlabel-border-top verdoppeln. */
.sueco-shop-mega__coltitle + .sueco-shop-mega__microlabel {
  border-top: none;
  padding-top: 0;
  margin-top: 0.15rem;
}

/* Fuss "Alle X ->" — klebt am Spaltenboden (gemeinsame Grundlinie) */
.sueco-shop-mega__foot {
  margin-top: auto; padding-top: 1rem;
  font-family: var(--sueco-font-body); font-size: 0.85rem; font-weight: 600;
  color: var(--sueco-text-secondary); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color var(--sueco-transition);
}
.sueco-shop-mega__foot span { transition: transform var(--sueco-transition); }
.sueco-shop-mega__foot:hover { color: var(--sueco-primary); }
.sueco-shop-mega__foot:hover span { transform: translateX(3px); }

/* --- Spalte 4: Vorschaubild (gestapelt, Cross-Fade) + Default-Werkstatt-Feature --- */
.sueco-shop-mega__preview {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--sueco-radius-card); text-decoration: none;
  background: var(--sueco-bg-cream); min-height: 360px;
}
.sueco-shop-mega__pimg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 260ms ease;
}
.sueco-shop-mega__pimg--default { opacity: 1; }

/* Default-Feature-Overlay (Werkstatt) — nur sichtbar, solange kein Link gehovert wird */
.sueco-shop-mega__preview::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(45,41,38,0.82) 0%, rgba(45,41,38,0.2) 55%, rgba(45,41,38,0) 100%);
  opacity: 1; transition: opacity 260ms ease;
}
.sueco-shop-mega__feature-inner {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1.5rem;
  opacity: 1; transition: opacity 220ms ease;
}
.sueco-shop-mega__feature-eyebrow {
  font-family: var(--sueco-font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sueco-white); opacity: 0.85; display: block;
}
.sueco-shop-mega__feature-title {
  font-family: var(--sueco-font-heading); font-size: 1.35rem; line-height: 1.2;
  color: var(--sueco-white); margin: 0.3rem 0 0.6rem; display: block;
}
.sueco-shop-mega__feature-cta {
  font-family: var(--sueco-font-button); font-size: 0.85rem; font-weight: 600; color: var(--sueco-white);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.sueco-shop-mega__feature-cta span { transition: transform var(--sueco-transition); }
.sueco-shop-mega__preview:hover .sueco-shop-mega__feature-cta span { transform: translateX(3px); }

/* Hover auf JEDEN Link (Kategorie ODER Produkt) -> dessen Bild einblenden,
   Default-Bild + Werkstatt-Overlay ausblenden. Rein CSS :has(), kein JS. */
.sueco-shop-mega:has([data-img="sa"]:hover)          .sueco-shop-mega__pimg[data-key="sa"],
.sueco-shop-mega:has([data-img="leder"]:hover)       .sueco-shop-mega__pimg[data-key="leder"],
.sueco-shop-mega:has([data-img="holz"]:hover)        .sueco-shop-mega__pimg[data-key="holz"],
.sueco-shop-mega:has([data-img="acryl"]:hover)       .sueco-shop-mega__pimg[data-key="acryl"],
.sueco-shop-mega:has([data-img="accessoires"]:hover) .sueco-shop-mega__pimg[data-key="accessoires"],
.sueco-shop-mega:has([data-img="geldetuis"]:hover)   .sueco-shop-mega__pimg[data-key="geldetuis"],
.sueco-shop-mega:has([data-img="notizbuch"]:hover)   .sueco-shop-mega__pimg[data-key="notizbuch"],
.sueco-shop-mega:has([data-img="mousepad"]:hover)    .sueco-shop-mega__pimg[data-key="mousepad"],
.sueco-shop-mega:has([data-img="lesezeichen"]:hover) .sueco-shop-mega__pimg[data-key="lesezeichen"],
.sueco-shop-mega:has([data-img="kofferanhaenger"]:hover) .sueco-shop-mega__pimg[data-key="kofferanhaenger"],
.sueco-shop-mega:has([data-img="gastro"]:hover)      .sueco-shop-mega__pimg[data-key="gastro"],
.sueco-shop-mega:has([data-img="klemmbrett"]:hover)  .sueco-shop-mega__pimg[data-key="klemmbrett"],
.sueco-shop-mega:has([data-img="menueboard"]:hover)  .sueco-shop-mega__pimg[data-key="menueboard"],
.sueco-shop-mega:has([data-img="reserviert"]:hover)  .sueco-shop-mega__pimg[data-key="reserviert"] {
  opacity: 1;
}
.sueco-shop-mega:has([data-img]:hover) .sueco-shop-mega__pimg--default,
.sueco-shop-mega:has([data-img]:hover) .sueco-shop-mega__preview::after,
.sueco-shop-mega:has([data-img]:hover) .sueco-shop-mega__feature-inner {
  opacity: 0;
}

/* --- Desktop/Mobile-Weiche: Blocksy rendert Mega-text-content nicht im
   Offcanvas. Darum Desktop = HTML-Panel (Item .sueco-shop-desktoponly),
   Mobile = native Kategorie-Links (Items .sueco-shop-mobileonly). --- */
.menu-item.sueco-shop-mobileonly { display: none !important; }

@media (max-width: 999.98px) {
  .menu-item.sueco-shop-desktoponly { display: none !important; }
  .menu-item.sueco-shop-mobileonly { display: block !important; }
}

/* =========================================================
   Bestellbestaetigung (order-received / thankyou)
   Scope: body.woocommerce-order-received
   Nacktes WooCommerce-Core-Markup in sueco-Optik bringen:
   Container begrenzen, Typo harmonisieren (Serif-Titel raus aus
   Hero-Groesse), Bank-Uebersicht + Bestelldetails als Karten,
   Handlungszeile aus inc/thankyou-page.php.
   ========================================================= */

.woocommerce-order-received .woocommerce-order {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--sueco-section-py);
}

/* Sektionstitel: Serif behalten, aber einheitlich moderate Groesse
   statt Hero-Dimension (h2 default bis 56px) — Kern der Typo-Unruhe. */
.woocommerce-order-received .woocommerce-order h2 {
  font-size: 1.5rem;
  margin: 2.25rem 0 1rem;
}

/* "Vielen Dank"-Notice als ruhige Creme-Karte statt Blocksy-Grau.
   padding-left schafft Platz fuer Blocksys absolut positioniertes
   Woo-Haekchen-Icon (::before @ left:20px) — sonst ueberlappt es den Text. */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  background: var(--sueco-bg-cream);
  border: 1px solid var(--sueco-border);
  border-radius: var(--sueco-radius-card);
  padding: 1.25rem 1.5rem 1.25rem 3.25rem;
  font-size: 1.0625rem;
  font-weight: var(--sueco-fw-medium);
  color: var(--sueco-text-primary);
}

/* Bestell-Uebersicht (Bestellnummer/Datum/Gesamt/Zahlung) als Karten-Grid
   statt Blocksy-Zellenraster. */
.woocommerce-order-received .woocommerce-order-overview {
  list-style: none;
  margin: 1.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--sueco-border);
  border-radius: var(--sueco-radius-card);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
}
.woocommerce-order-received .woocommerce-order-overview li {
  border: 0 !important;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sueco-text-secondary);
}
.woocommerce-order-received .woocommerce-order-overview li strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.0625rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--sueco-fw-semi);
  color: var(--sueco-text-primary);
}

/* Bankverbindung: wichtigste Info bei Vorkasse -> abgesetzte Karte. */
.woocommerce-order-received .woocommerce-bacs-bank-details {
  background: var(--sueco-bg-cream);
  border: 1px solid var(--sueco-border-strong);
  border-radius: var(--sueco-radius-card);
  padding: 1.5rem;
  margin: 1.5rem 0;
}
.woocommerce-order-received .wc-bacs-bank-details-heading {
  margin-top: 0;
}
/* Kontoinhaber war eine grosse Serif-Zeile mitten in der Liste ->
   auf dezentes Label zuruecknehmen (Sans, kleiner). */
.woocommerce-order-received .wc-bacs-bank-details-account-name {
  font-family: var(--sueco-font-body);
  font-size: 0.9375rem;
  font-weight: var(--sueco-fw-semi);
  color: var(--sueco-text-secondary);
  margin: 0.75rem 0 0.5rem;
}
.woocommerce-order-received ul.wc-bacs-bank-details {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-order-received ul.wc-bacs-bank-details li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--sueco-border);
  color: var(--sueco-text-secondary);
  font-size: 0.9375rem;
}
.woocommerce-order-received ul.wc-bacs-bank-details li:last-child {
  border-bottom: 0;
}
.woocommerce-order-received ul.wc-bacs-bank-details li strong {
  color: var(--sueco-text-primary);
}

/* Bestelldetails-Tabelle + Adressen im sueco-Ton. */
.woocommerce-order-received .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.woocommerce-order-received .woocommerce-table--order-details th,
.woocommerce-order-received .woocommerce-table--order-details td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--sueco-border);
  text-align: left;
}
.woocommerce-order-received .woocommerce-customer-details address {
  border: 1px solid var(--sueco-border);
  border-radius: var(--sueco-radius-card);
  padding: 1.25rem;
  font-style: normal;
  line-height: 1.7;
}

/* Handlungszeile — raus aus der Sackgasse (inc/thankyou-page.php). */
.sueco-thankyou-actions {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--sueco-border);
  text-align: center;
}
.sueco-thankyou-actions__hint {
  color: var(--sueco-text-secondary);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}
.sueco-thankyou-actions__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

@media (max-width: 640px) {
  .woocommerce-order-received .woocommerce-order-overview {
    grid-template-columns: 1fr;
  }
  .sueco-thankyou-actions__buttons {
    flex-direction: column;
  }
  .sueco-thankyou-actions__buttons .sueco-btn {
    justify-content: center;
  }
}

/* =========================================================
   Kasse (checkout) — sueco-Feinschliff (T-20 K3/K4/K5)
   Scope: body.woocommerce-checkout OHNE order-received (Thankyou
   traegt dieselbe woocommerce-checkout-Klasse -> per :not() ausschliessen).
   K3 — Reihenfolge rechte Spalte: Bestelluebersicht -> Zahlung -> AGB
        -> "Jetzt bestellen". AGB sitzt jetzt direkt ueber dem Button
        (vorher trennte die ganze Bestelltabelle beide). Rein visuell via
        flex-order; DOM/Form-Reihenfolge unveraendert -> Germanized-safe.
   K4 — "Jetzt bestellen" full-width statt schmal.
   K5 — Sektions-Typo Serif + Karten-Optik analog Thankyou.
   ========================================================= */

/* --- K5: Sektionstitel harmonisieren (Serif, ruhige Groesse) --- */
body.woocommerce-checkout:not(.woocommerce-order-received) .ct-customer-details > h3,
body.woocommerce-checkout:not(.woocommerce-order-received) #order_payment_heading,
body.woocommerce-checkout:not(.woocommerce-order-received) #order_review_heading {
  font-family: var(--sueco-font-heading);
  font-size: 1.375rem;
  font-weight: var(--sueco-fw-semi);
  color: var(--sueco-text-primary);
  margin: 0 0 1.25rem;
}

/* --- K5: rechte Spalte aus hartem 2px-Rahmen in eine sueco-Karte --- */
body.woocommerce-checkout:not(.woocommerce-order-received) .ct-order-review {
  border: 1px solid var(--sueco-border-strong);
  border-radius: var(--sueco-radius-card);
  padding: 2rem;
}

/* --- K3: Reihenfolge der rechten Spalte via flex-order --- */
body.woocommerce-checkout:not(.woocommerce-order-received) #order_review {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body.woocommerce-checkout:not(.woocommerce-order-received) #order_review > #order_review_heading { order: 1; }
body.woocommerce-checkout:not(.woocommerce-order-received) #order_review > .woocommerce-checkout-review-order-table { order: 2; }
body.woocommerce-checkout:not(.woocommerce-order-received) #order_review > #order_payment_heading { order: 3; margin-top: 2.25rem; }
body.woocommerce-checkout:not(.woocommerce-order-received) #order_review > #payment { order: 4; }
body.woocommerce-checkout:not(.woocommerce-order-received) #order_review > [class*="wc-gzd-checkbox-placeholder"] { order: 5; }
body.woocommerce-checkout:not(.woocommerce-order-received) #order_review > .wc-gzd-order-submit { order: 6; }
body.woocommerce-checkout:not(.woocommerce-order-received) #order_review > .ppc-button-wrapper { order: 7; }

/* --- K5: Bestelltabelle im sueco-Ton (durchgehende statt gestrichelter Linien) --- */
body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 0.5rem;
}
body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-checkout-review-order-table td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--sueco-border);
}
body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-checkout-review-order-table tfoot tr:last-child th,
body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-checkout-review-order-table tfoot tr:last-child td {
  border-bottom: 0;
}

/* --- K5: Zahlungsarten als ruhige, gerahmte Liste --- */
body.woocommerce-checkout:not(.woocommerce-order-received) #payment .payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sueco-border);
  border-radius: var(--sueco-radius-card);
  overflow: hidden;
}
body.woocommerce-checkout:not(.woocommerce-order-received) #payment .payment_methods > li {
  margin: 0;
  padding: 0.95rem 1.15rem;
  /* Blocksy setzt auf jedes li ein volles dunkles border (stone-600, alle 4
     Seiten) -> Doppellinien zwischen Zeilen + durchgehende schwarze Links-/
     Rechts-Kante (li-border-left/right stapeln ueber die volle Hoehe). Wir
     nullen ALLE Blocksy-Borders und fuehren nur EINE dezente Trennlinie
     (border-bottom, sueco-border); der graue Rahmen kommt vom .payment_methods-Container. */
  border: 0;
  border-bottom: 1px solid var(--sueco-border);
  background: none;
}
/* Beschreibungs-Box der gewaehlten Zahlart (z. B. BACS): harte dunkle
   Trennlinie -> dezente sueco-Linie, leichte Creme-Flaeche zum Absetzen. */
body.woocommerce-checkout:not(.woocommerce-order-received) #payment .payment_box {
  border-top: 1px solid var(--sueco-border);
  background: var(--sueco-bg-cream);
}
body.woocommerce-checkout:not(.woocommerce-order-received) #payment .payment_methods > li:last-child {
  border-bottom: 0;
}

/* --- K3: AGB-Zeile ruhig, direkt ueber dem Button --- */
body.woocommerce-checkout:not(.woocommerce-order-received) #order_review > [class*="wc-gzd-checkbox-placeholder-legal"] {
  margin-top: 1.5rem;
}
body.woocommerce-checkout:not(.woocommerce-order-received) .checkbox-legal {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sueco-text-secondary);
}

/* --- K4: "Jetzt bestellen" full-width (bleibt Flex, Label zentriert) --- */
body.woocommerce-checkout:not(.woocommerce-order-received) .wc-gzd-order-submit .form-row.place-order {
  padding: 0;
  margin-top: 1rem;
}
body.woocommerce-checkout:not(.woocommerce-order-received) #place_order {
  width: 100%;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1.0625rem;
}

/* =========================================================
   Warenkorb (cart) — sueco-Feinschliff (T-20 W4)
   Analog Kasse (K5), aber der Warenkorb ist eine EIGENE Seite
   (page-id-7, body.woocommerce-cart — NICHT woocommerce-checkout),
   darum ausserhalb des Kasse-Scopes ohne Wirkung geblieben. Rein
   visuell, Germanized-safe. Bringt Summen-Box + Tabellen aus dem
   harten Blocksy-Default (2px solid / 1px dashed stone-600) in den
   ruhigen sueco-Ton.
   ========================================================= */

/* --- W4a: rechte Summen-Box aus hartem 2px-Rechteck in eine sueco-Karte --- */
body.woocommerce-cart .cart_totals {
  border: 1px solid var(--sueco-border-strong);
  border-radius: var(--sueco-radius-card);
  padding: 2rem;
}

/* --- W4b: Abschnittstitel "Warenkorb-Summe" auf Serif (wie Kasse K5) --- */
body.woocommerce-cart .cart_totals h2 {
  font-family: var(--sueco-font-heading);
  font-size: 1.375rem;
  font-weight: var(--sueco-fw-semi);
  color: var(--sueco-text-primary);
  margin: 0 0 1.25rem;
}

/* --- W4c: Summen-Tabelle — dunkle gestrichelte Linien -> dezente sueco-Linien --- */
body.woocommerce-cart .cart_totals table {
  border-collapse: collapse;
  border: 0;
  margin: 0;
}
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
  border-top: 0;
  border-bottom: 1px solid var(--sueco-border);
  border-style: solid;
  padding: 0.75rem 0;
}
body.woocommerce-cart .cart_totals table tr:last-child th,
body.woocommerce-cart .cart_totals table tr:last-child td {
  border-bottom: 0;
}

/* --- W4d: Produkt-Tabelle — harte 2px/1px-dashed stone-600 -> sueco-Linien --- */
body.woocommerce-cart .woocommerce-cart-form__contents {
  border-collapse: collapse;
}
body.woocommerce-cart .woocommerce-cart-form__contents thead th {
  border-bottom: 1px solid var(--sueco-border-strong);
  padding-bottom: 1rem;
}
body.woocommerce-cart .woocommerce-cart-form__contents td,
body.woocommerce-cart .woocommerce-cart-form__contents tr.cart_item td {
  border-top: 0;
  border-bottom: 1px solid var(--sueco-border);
  border-style: solid;
}

/* --- W4e: Gutschein-Feld an sueco-Tokens angleichen (Rahmen + Radius) --- */
body.woocommerce-cart #coupon_code,
body.woocommerce-cart input[name="coupon_code"] {
  border: 1px solid var(--sueco-border-strong);
  border-radius: var(--sueco-radius-button);
}

/* =========================================================
   Warenkorb-Upsell (T-21) — Spalte 1 statt tote Fläche
   Markup: inc/cart-upsell.php, gehookt in woocommerce_after_cart_table
   (innerhalb der <form> = linke Grid-Spalte). Holt Mengenrabatt-Hinweis +
   Anhänger-Vorschläge + Cross-Sells + "Weiter einkaufen" aus der toten
   Fläche unter dem Fold nach oben. Scope body.woocommerce-cart, Tokens/
   Karten wie T-20. B2C-Ton (dutzt).
   ========================================================= */

/* Grid nicht mehr strecken — die kürzere (rechte) Spalte bleibt kompakt oben,
   statt auf die jetzt gefüllte linke Spalte gestreckt zu werden. */
body.woocommerce-cart .ct-woocommerce-cart-form {
  align-items: start;
}

.sueco-cart-upsell {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 2rem;
}

/* --- Mengenrabatt-Hinweis (Threshold-Anreiz) --- */
.sueco-cart-upsell__hint {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: var(--sueco-radius-card);
  padding: 1.1rem 1.35rem;
}
.sueco-cart-upsell__hint--active {
  background: var(--sueco-bg-cream);
  border-left: 3px solid var(--sueco-primary);
}
.sueco-cart-upsell__hint--reached {
  background: var(--sueco-bg-cream);
}
.sueco-cart-upsell__hint-text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--sueco-text-primary);
}
.sueco-cart-upsell__hint-text strong {
  color: var(--sueco-primary);
  font-weight: var(--sueco-fw-bold);
  white-space: nowrap;
}
.sueco-cart-upsell__icon {
  flex: 0 0 auto;
  color: var(--sueco-primary);
  margin-top: 0.15rem;
}

/* --- Anhänger-Vorschläge (kompakte horizontale Mini-Karten) --- */
.sueco-cart-suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.sueco-cart-suggestion {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem;
  background: var(--sueco-white);
  border: 1px solid var(--sueco-border);
  border-radius: var(--sueco-radius-card);
  box-shadow: var(--sueco-shadow-sm);
  transition: border-color var(--sueco-transition), box-shadow var(--sueco-transition), transform var(--sueco-transition);
  color: var(--sueco-text-primary);
}
.sueco-cart-suggestion:hover {
  border-color: var(--sueco-border-strong);
  box-shadow: var(--sueco-shadow-md);
  transform: translateY(-2px);
  color: var(--sueco-text-primary);
}
.sueco-cart-suggestion__media {
  flex: 0 0 72px;
  width: 72px;
}
.sueco-cart-suggestion__media .sueco-cart-suggestion__img,
.sueco-cart-suggestion__media img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--sueco-radius-image-link);
  display: block;
}
.sueco-cart-suggestion__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.sueco-cart-suggestion__name {
  font-size: 0.9375rem;
  font-weight: var(--sueco-fw-medium);
  line-height: 1.3;
  color: var(--sueco-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sueco-cart-suggestion__price {
  font-size: 0.9375rem;
  font-weight: var(--sueco-fw-semi);
  color: var(--sueco-text-primary);
}
.sueco-cart-suggestion__price del { color: var(--sueco-text-secondary); font-weight: var(--sueco-fw-regular); }
.sueco-cart-suggestion__price ins { text-decoration: none; }
.sueco-cart-suggestion__cta {
  font-size: 0.8125rem;
  font-weight: var(--sueco-fw-semi);
  color: var(--sueco-primary);
  margin-top: 0.15rem;
}
.sueco-cart-suggestion:hover .sueco-cart-suggestion__cta { color: var(--sueco-primary-hover); }

/* --- Cross-Sells (Geschenkbeutel) in Spalte 1 --- */
.sueco-cart-crosssells {
  border-top: 1px solid var(--sueco-border);
  padding-top: 1.5rem;
}
.sueco-cart-crosssells__title {
  font-family: var(--sueco-font-heading);
  font-size: 1.25rem;
  font-weight: var(--sueco-fw-semi);
  color: var(--sueco-text-primary);
  margin: 0 0 1rem;
}
/* WooCommerce-Standardüberschrift der Cross-Sell-Sektion ausblenden —
   wir setzen den eigenen Titel darüber. */
.sueco-cart-crosssells .cross-sells > h2 { display: none; }
.sueco-cart-crosssells .cross-sells { margin: 0; }

/* Cross-Sell-Produkte als kompakte gerahmte Karten — nicht die riesigen
   Shop-Loop-Bilder (394px), sonst dominieren die sekundären Beutel den
   eigentlichen Haupthebel (Rabatt-Hinweis + Anhänger-Vorschläge). */
.sueco-cart-crosssells ul.products { margin: 0; gap: 1rem; }
.sueco-cart-crosssells ul.products li.product {
  margin: 0;
  padding: 1rem;
  background: var(--sueco-white);
  border: 1px solid var(--sueco-border);
  border-radius: var(--sueco-radius-card);
  text-align: center;
}
.sueco-cart-crosssells ul.products li.product figure,
.sueco-cart-crosssells ul.products li.product .ct-media-container {
  max-width: 150px;
  width: 100%;
  margin-inline: auto;
}
.sueco-cart-crosssells ul.products li.product figure { margin-bottom: 0.75rem; }
.sueco-cart-crosssells ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.9375rem;
  font-weight: var(--sueco-fw-medium);
  line-height: 1.3;
  padding: 0;
  margin: 0 0 0.35rem;
}
.sueco-cart-crosssells ul.products li.product .ct-woo-card-actions { justify-content: center; }

/* --- "Weiter einkaufen"-Sekundärlink (dezent, kein zweiter Button) --- */
.sueco-cart-continue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-size: 0.9375rem;
  font-weight: var(--sueco-fw-medium);
  color: var(--sueco-text-secondary);
}
.sueco-cart-continue:hover { color: var(--sueco-primary); }
.sueco-cart-continue__icon { transform: scaleX(-1); flex: 0 0 auto; }

/* --- Mobile: Vorschläge untereinander, Grid ohnehin einspaltig --- */
@media (max-width: 600px) {
  .sueco-cart-suggestions { grid-template-columns: 1fr; }
  .sueco-cart-upsell { margin-top: 1.5rem; }
}


/* =========================================================
   Seiten-Layout — Abstand unter der Navigation
   =========================================================
   Blocksy liefert zwischen Header und erstem Inhaltselement KEINEN
   Abstand. Verifiziert 2026-07-29: `.entry-content`, `article`,
   `.ct-container-full`, `main`, `#main-container` und `body` stehen
   alle auf `padding-top: 0`. Seiten, die mit einem normalen Block
   beginnen (Heading, Columns, Text), kleben deshalb unter der Nav.

   Bewusst NICHT pauschal: Seiten, die randlos beginnen, SOLLEN flush
   sitzen — /firmenkunden/kleinserienfertigung-lederwaren/ startet mit
   einem alignfull-Cover, /firmenkunden/produktentwicklung-lederwaren/
   mit alignfull-Media-Text. Eine globale Regel wuerde dort einen
   weissen Streifen ueber das Bild legen. Darum die Ruecknahmen unten.

   Gilt nur fuer `page` — Posts und WooCommerce-Templates bringen ihre
   eigenen Abstaende mit.

   Nur `article > .entry-content`: Blocksys Header-/Footer-Text-Element
   rendert ebenfalls ein `.entry-content`. Mit dem frueheren Selektor
   `.page .entry-content` bekam es die 56px mit — "Deine Bestellung"
   im Checkout-Header rutschte dadurch unter die Logo-Mitte (2026-09-24).
   ========================================================= */

.page article > .entry-content { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* Warenkorb + Kasse sind technisch Seiten, haben aber einen kompakten
   eigenen Header — dort nur ein knapper Abstand, sonst steht auf dem
   Handy unter dem Logo erst eine leere weisse Flaeche. */
.woocommerce-cart article > .entry-content,
.woocommerce-checkout article > .entry-content { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* Ruecknahme 1 — randloser Seitenanfang.
   Die zweite Zeile faengt den Fall ab, dass WordPress ein <style>-
   Element als erstes Kind einhaengt (passiert bei Seiten mit
   Block-eigenem CSS, z. B. /firmenkunden/). */
.page article > .entry-content:has(> :is(.alignfull, .wp-block-cover, [class*="wp-block-sueco-"]):first-child),
.page article > .entry-content:has(> style:first-child + :is(.alignfull, .wp-block-cover, [class*="wp-block-sueco-"])) {
  padding-top: 0;
}

/* Ruecknahme 2 — der Autor hat den Abstand selbst gesetzt.
   Ein Spacer als erstes Element ist eine bewusste Entscheidung im
   Editor; die Template-Regel haelt sich dann komplett raus, statt
   sich zu addieren. */
.page article > .entry-content:has(> .wp-block-spacer:first-child) { padding-top: 0; }


/* =========================================================
   Produkt-Fakten "Auf einen Blick" (T-73)
   WooCommerce-Attributtabelle am Ende des Beschreibungstabs.
   Markup kommt aus inc/product-tabs.php + WooCommerce-Core,
   darum kein .wp-block-sueco-*-Prefix — gescoped auf .sueco-attrs.
   Design folgt der facts-table-Vorlage (Karte, Label-Spalte 38 %).
   ========================================================= */

.sueco-attrs {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.sueco-attrs__heading {
  margin: 0 0 1rem;
  text-align: left;
}
.sueco-attrs .shop_attributes {
  width: 100%;
  margin: 0;
  background: var(--sueco-white);
  border: 1px solid var(--sueco-border-strong);
  border-radius: var(--sueco-radius-card);
  /* `separate` statt `collapse`: mit collapse greift die Rundung an den Ecken
     nicht (die Zellraender liegen darueber). Trennstriche setzen wir selbst. */
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  /* Blocksy setzt global `table, th, td` auf 1px solid via --theme-table-border-*.
     Gescoped auf 0 zuruecksetzen, sonst liegt ein Gitternetz ueber der Karte. */
  --theme-table-border-width: 0;
  --theme-table-border-style: none;
}
.sueco-attrs .shop_attributes th,
.sueco-attrs .shop_attributes td {
  padding: 1rem 1.5rem;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5;
  border: 0;
  border-bottom: 1px solid var(--sueco-border);
}
.sueco-attrs .shop_attributes tr:last-child th,
.sueco-attrs .shop_attributes tr:last-child td {
  border-bottom: 0;
}
.sueco-attrs .shop_attributes th {
  width: 38%;
  font-weight: 600;
  color: var(--sueco-text-primary);
}
.sueco-attrs .shop_attributes td {
  color: var(--sueco-text-secondary);
}
/* Blocksy streift jede zweite Zeile mit einem kuehlen Grau (rgba(242,244,247,.5)).
   Das passt weder zur warmen Palette noch zur facts-table-Vorlage, die ihre
   Struktur allein aus den Trennlinien zieht. Gescoped zuruecknehmen. */
.sueco-attrs .shop_attributes tr:nth-child(even) th,
.sueco-attrs .shop_attributes tr:nth-child(even) td {
  background: transparent;
}
/* WooCommerce-Attributwerte koennen <p> enthalten (Filterkette am Wert).
   wpautop ist in product-tabs.php entfernt; das hier faengt Restfaelle ab. */
.sueco-attrs .shop_attributes td > p {
  margin: 0;
}

@media (max-width: 600px) {
  .sueco-attrs .shop_attributes th,
  .sueco-attrs .shop_attributes td {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
  }
  .sueco-attrs .shop_attributes th { width: 42%; }
}