vpd-collection, vpd-card, vpd-filters { display: block; }
vpd-collection vpd-card[hidden], vpd-collection [data-vpd-filter-item][hidden],
vpd-collection [data-vpd-empty][hidden],
vpd-collection .vpd-filter-trigger[hidden] { display: none !important; }
vpd-card img[data-vpd-image="mockup"] { max-width: 100%; height: auto; }
vpd-filters select, vpd-filters input { max-width: 100%; }
vpd-collection[data-vpd-initialized="1"] > vpd-filters { display: none !important; }

/* The Avada containers remain editable. Their explicit classes also survive REST imports. */
body:has(.vpd-paths) #main { padding-top: 0 !important; }
.post-content:has(.vpd-paths) { font-size: 16px; }
.post-content .vpd-hero,
.post-content .vpd-paths,
.post-content .vpd-gallery-section,
.post-content .vpd-trust {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.post-content :is(.vpd-hero, .vpd-paths, .vpd-trust) > .fusion-builder-row {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding: 0 !important;
}
.post-content :is(.vpd-hero, .vpd-paths, .vpd-trust) {
  padding-inline: max(40px, calc((100% - 1380px) / 2)) !important;
}
.post-content :is(.vpd-hero, .vpd-paths, .vpd-trust, .vpd-gallery-section) .fusion-layout-column {
  margin-block: 0 !important;
}
.post-content :is(.vpd-hero, .vpd-paths, .vpd-trust, .vpd-gallery-section) .fusion-column-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.post-content .vpd-hero {
  min-height: clamp(270px, 25vw, 360px) !important;
  display: flex;
  align-items: center;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
}
.vpd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.86) 27%, rgba(255,255,255,.08) 57%);
  pointer-events: none;
}
.post-content .vpd-hero-copy {
  position: relative;
  width: 100% !important;
  z-index: 1;
  text-align: left;
}
.post-content .vpd-hero-copy > .fusion-column-wrapper { padding-right: 55% !important; }
.post-content .vpd-hero .fusion-title { margin: 0 !important; }
.post-content:has(vpd-collection) .vpd-hero .fusion-title h1 {
  font: 400 clamp(2rem, 3.1vw, 3.25rem)/1.08 var(--vpd-serif) !important;
  max-width: none !important;
  margin: 0 0 1.15rem !important;
  color: var(--vpd-rot) !important;
}
.vpd-hero h1 span { display: block; white-space: nowrap; }
.post-content .vpd-hero-eyebrow p {
  font: 300 clamp(.78rem, 1vw, .94rem)/1.55 var(--vpd-sans);
  margin: 0 0 .6rem;
  color: var(--vpd-gold);
  white-space: nowrap;
}
.post-content .vpd-hero-copy .fusion-text:has(.vpd-hero-cta) p { margin: 0; }
.post-content .vpd-hero a.vpd-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .78rem 1.5rem;
  border: 1px solid var(--vpd-rot);
  background: var(--vpd-rot);
  color: #fff;
  font: 600 .83rem/1.2 var(--vpd-sans);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.post-content .vpd-hero a.vpd-hero-cta:hover,
.post-content .vpd-hero a.vpd-hero-cta:focus-visible {
  background: var(--vpd-rot-tief);
  transform: translateY(-2px);
}
.post-content .vpd-paths { padding-block: 2.5rem 2.8rem !important; }
.post-content .vpd-paths > .fusion-builder-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem clamp(1.5rem, 4vw, 4.5rem);
}
.post-content .vpd-paths > .fusion-builder-row::before,
.post-content .vpd-paths > .fusion-builder-row::after { content: none; }
.post-content .vpd-paths .fusion-layout-column { width: auto !important; }
.post-content .vpd-path-heading { grid-column: 1 / -1; text-align: center; }
.post-content .vpd-path-heading .vpd-eyebrow { width: 100%; margin: 0; }
.post-content .vpd-path-heading .vpd-eyebrow p { margin-inline: auto; text-align: center; }
.post-content .vpd-path-heading .fusion-title { margin: 0 !important; }
.post-content:has(vpd-collection) .vpd-path-heading .fusion-title h2 {
  font: 400 clamp(1.65rem, 2.7vw, 2.55rem)/1.08 var(--vpd-serif) !important;
  margin: .1rem 0 .65rem !important;
}
.post-content .vpd-eyebrow p {
  margin: 0 0 .35rem;
  color: var(--vpd-gedaempft);
  font: 300 .72rem/1.55 var(--vpd-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.post-content .vpd-path-card > .fusion-column-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.post-content .vpd-path-card .fusion-imageframe {
  display: grid;
  place-items: center;
  position: relative;
  width: 124px !important;
  height: 124px;
  max-width: 100%;
  flex: 0 0 auto;
  margin-inline: auto !important;
  border: 1.1px solid var(--vpd-gold) !important;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-content .vpd-path-card:hover .fusion-imageframe,
.post-content .vpd-path-card:focus-within .fusion-imageframe {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(90, 35, 50, .14);
}
.vpd-path-card .fusion-imageframe::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(195,164,85,.2);
  border-radius: 50%;
  pointer-events: none;
}
.post-content .vpd-path-card .fusion-imageframe img { width: 88px; height: 88px; object-fit: contain; }
.post-content .vpd-path-description { margin-top: 1.05rem; max-width: 310px; min-height: 3.25rem; }
.post-content .vpd-path-description p { margin: 0; color: var(--vpd-gedaempft); font-size: .9rem; line-height: 1.45; }
.post-content .vpd-path-description strong { color: var(--vpd-gold); }
.post-content .vpd-path-link { margin-top: .55rem; }
.post-content .vpd-path-link p { margin: 0; font-size: .78rem; line-height: 1.55; }
.post-content .vpd-path-link a {
  font: 600 .78rem/1.55 var(--vpd-sans);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* The existing link covers the complete route, including its circle and description. */
.post-content .vpd-path-link a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.post-content .vpd-path-card:has(:focus-visible) > .fusion-column-wrapper {
  outline: 3px solid var(--vpd-gold);
  outline-offset: 6px;
}
.post-content .vpd-path-card a:focus-visible { outline: none !important; }
.post-content .vpd-gallery-section > .fusion-builder-row,
.post-content .vpd-gallery-section > .fusion-builder-row > .fusion-layout-column {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.post-content .vpd-gallery-section vpd-collection { width: min(1600px, calc(100% - 80px)); }
.post-content .vpd-gallery-section .vpd-gallery__results { margin: 0 !important; font-size: .78rem; }
.vpd-gallery__head [hidden] { display: none !important; }
.post-content .vpd-trust { padding: 7rem 1rem !important; text-align: center; }
.post-content .vpd-trust p { margin: 0 auto 1rem; color: var(--vpd-gedaempft); }
.post-content .vpd-trust .vpd-eyebrow p,
.post-content .vpd-trust .fusion-text:not(.vpd-eyebrow) p:last-child { margin-bottom: 0; }
.post-content .vpd-trust .fusion-title { margin: 0 0 1rem !important; }
#bestellwege, #produkte { scroll-margin-top: 140px; }

@media (max-width: 820px) {
  .post-content :is(.vpd-hero, .vpd-paths, .vpd-trust) { padding-inline: max(20px, calc((100% - 680px) / 2)) !important; }
  .post-content .vpd-gallery-section vpd-collection { width: min(680px, calc(100% - 40px)) !important; }
  .post-content .vpd-hero { min-height: 390px !important; align-items: flex-end; background-position: 66% center !important; }
  .vpd-hero::before { background: linear-gradient(0deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.84) 42%, rgba(255,255,255,0) 70%); }
  .post-content .vpd-hero-copy > .fusion-column-wrapper { padding: 0 0 2.5rem !important; }
  .post-content .vpd-paths > .fusion-builder-row { grid-template-columns: 1fr; row-gap: 2rem; }
}
@media (max-width: 520px) {
  .post-content :is(.vpd-hero, .vpd-paths, .vpd-trust) { padding-inline: 14px !important; }
  .post-content .vpd-gallery-section vpd-collection { width: calc(100% - 28px) !important; }
  .post-content .vpd-hero { min-height: 360px !important; }
  .post-content:has(vpd-collection) .vpd-hero .fusion-title h1 { font-size: 2.1rem !important; }
  .vpd-hero h1 span { white-space: normal; }
  .post-content .vpd-hero-eyebrow p { font-size: .7rem; white-space: normal; }
}

/* ---------------------------------------------------------------------------
   Token
   Nur im Anlassseiten-Inhalt und dessen Filter. Globale Kopf- und Fußzeilen behalten
   ihre bestehenden Avada-/Shop-Stile, einschließlich Schriftgrößen und Abständen.
   --------------------------------------------------------------------------- */

/* Das Child-Theme setzt dieselben Token direkt auf `vpd-collection` und damit näher am
   Element. Die Werte des Prototypen gelten deshalb auch dort — sonst trüge der Fokusring
   das ältere Gold #d1ac3f statt Pappenheim Gold. */
.post-content:has(vpd-collection),
vpd-collection.vpd-gallery,
.vpd-filter-mount,
.awb-off-canvas-wrap:has(.vpd-filter-mount) {
  --vpd-rot: #9d2244;
  --vpd-rot-tief: #771632;
  --vpd-gold: #c3a455;
  /* Gold als Schrift auf Weiß erreicht mit #c3a455 nur 2,4:1. Ringe, Linien und der
     Fokusring behalten den Markenton; gesetzter Text bekommt die tiefere Fassung (4,6:1). */
  --vpd-gold-tief: #8f7124;
  --vpd-petrol: #0d6f72;
  --vpd-mauve: #8f4a5f;
  --vpd-tinte: #292727;
  --vpd-gedaempft: #6f6b68;
  --vpd-beilaeufig: #777371;
  --vpd-linie: #e4e0d8;
  --vpd-sand: #ddd7d0;
  --vpd-papier: #ffffff;

  --vpd-serif: "Adobe Garamond Pro", Garamond, Georgia, serif;
  --vpd-sans: "Open Sans", Arial, sans-serif;

  --vpd-shell: min(1600px, calc(100% - 80px));
  --vpd-spalte: 2rem;
  --vpd-reihe: 3.15rem;

  color: var(--vpd-tinte);
  font-family: var(--vpd-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
}

.post-content:has(vpd-collection) ::selection {
  background: rgba(157, 34, 68, .16);
  color: var(--vpd-tinte);
}

/* Avada nimmt Schaltflächen und Links ihren Fokusring. Tastaturbedienung braucht ihn,
   und er ist in der Bildwelt das einzige Mittel, das Gold als Fläche tragen darf. */
.post-content:has(vpd-collection) :focus-visible,
vpd-collection :focus-visible,
.vpd-filter-mount :focus-visible,
.awb-off-canvas-wrap:has(.vpd-filter-mount) :focus-visible {
  outline: 3px solid var(--vpd-gold, #c3a455) !important;
  outline-offset: 3px !important;
}

/* Der Prototyp zeigt kein leeres Kästchen: Ausgewähltes bekommt einen roten Haken,
   Unausgewähltes nichts. Das Markup bringt den Kasten mit, wir machen den Haken daraus. */
.vpd-filter-mount .vpd-check__box {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 auto;
  display: grid !important;
  place-items: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--vpd-rot, #9d2244) !important;
  color: #fff !important;
  opacity: 0;
  transform: scale(.82);
  transition: opacity 160ms ease, transform 160ms ease;
}

.vpd-filter-mount .vpd-check__box svg {
  width: 11px;
  height: 11px;
  display: block;
}

.vpd-filter-mount .vpd-check:has(input:checked) .vpd-check__box {
  opacity: 1;
  transform: none;
}

.vpd-filter-mount .vpd-check:has(input:focus-visible) {
  outline: 3px solid var(--vpd-gold, #c3a455);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Typografie
   Garamond trägt Seiten- und Abschnittsüberschriften, Open Sans alles andere.
   --------------------------------------------------------------------------- */

.post-content:has(vpd-collection) h1,
.post-content:has(vpd-collection) h2,
.post-content:has(vpd-collection) .fusion-title h1,
.post-content:has(vpd-collection) .fusion-title h2 {
  font-family: var(--vpd-serif);
  font-weight: 400;
  line-height: 1.08;
  color: var(--vpd-rot);
  text-transform: none;
  letter-spacing: normal;
}

.post-content:has(vpd-collection) h1,
.post-content:has(vpd-collection) .fusion-title h1 {
  max-width: 24ch;
  margin: 0 0 1.15rem;
  font-size: clamp(2rem, 3.1vw, 3.25rem);
}

.post-content:has(vpd-collection) h2,
.post-content:has(vpd-collection) .fusion-title h2 {
  margin: .1rem 0 .65rem;
  font-size: clamp(1.65rem, 2.7vw, 2.55rem);
}

.post-content:has(vpd-collection) h3,
.post-content:has(vpd-collection) .fusion-title h3 {
  font-family: var(--vpd-serif);
  font-weight: 400;
  line-height: 1.12;
  color: var(--vpd-rot);
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
}

.post-content:has(vpd-collection) p,
.post-content:has(vpd-collection) .fusion-text {
  color: var(--vpd-tinte);
  font-family: var(--vpd-sans);
  font-weight: 300;
  line-height: 1.55;
}

.post-content:has(vpd-collection) .fusion-text p {
  max-width: 72ch;
}

/* Die Eyebrow des Prototypen: gesperrte Versalien, beiläufiges Grau, direkt über der Überschrift. */
.post-content:has(vpd-collection) .fusion-title .title-heading-left + p,
.post-content:has(vpd-collection) .vpd-eyebrow {
  margin: 0 0 .35rem;
  color: var(--vpd-beilaeufig);
  font-size: .72rem;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.post-content:has(vpd-collection) a {
  color: var(--vpd-rot);
  text-underline-offset: 4px;
}

.post-content:has(vpd-collection) strong,
.post-content:has(vpd-collection) b {
  font-weight: 600;
}

/* Avada setzt `display` auf `.fusion-title`; das `hidden`-Attribut allein bliebe wirkungslos. */
.post-content:has(vpd-collection) .vpd-doppelt {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Galerie: Kopfzeile
   Die Filter-Schaltfläche ist die Primäraktion und steht mittig über dem Raster;
   die Ergebniszeile klein und gedämpft darunter.
   --------------------------------------------------------------------------- */

/* Die Galerie verwaltet ihre Außenabstände selbst; zusätzliche Avada-Innenabstände
   würden den Platz für die größeren Motive wieder verkleinern. */
.post-content:has(vpd-collection) .fusion-fullwidth:has(vpd-collection) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.post-content:has(vpd-collection) .fusion-fullwidth:has(vpd-collection) .fusion-builder-row {
  max-width: 100% !important;
  width: 100% !important;
  margin-inline: 0 !important;
}


vpd-collection.vpd-gallery {
  display: block;
  width: var(--vpd-shell, min(1600px, calc(100% - 80px)));
  margin-inline: auto;
  padding-block: 2.2rem 5rem;
}

vpd-collection.vpd-gallery .vpd-gallery__head,
.vpd-gallery__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem;
  margin: 0 0 1.2rem !important;
  padding: 0 !important;
  border: 0 !important;
}

.vpd-gallery__results {
  order: 2;
  align-self: flex-start;
  margin: 0;
  color: var(--vpd-gedaempft);
  font-family: var(--vpd-sans);
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.2;
}

.vpd-gallery__count {
  font-weight: 600;
  color: var(--vpd-tinte);
}

.vpd-gallery__chips {
  order: 3;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  width: 100%;
}

.vpd-gallery__chips:empty { display: none; }

.vpd-gallery__chips button {
  border: 1px solid #d3cbbb;
  border-radius: 99px;
  background: var(--vpd-papier);
  color: var(--vpd-tinte);
  padding: .45rem .75rem;
  font-family: var(--vpd-sans);
  font-size: .78rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.vpd-gallery__chips button:hover { border-color: rgba(157, 34, 68, .45); }

vpd-collection.vpd-gallery button.vpd-filter-trigger,
button.vpd-filter-trigger {
  order: 1;
  align-self: center !important;
  margin: 0 auto !important;
  float: none !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  min-width: 320px;
  max-width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .6rem 1.35rem;
  border: 1px solid var(--vpd-rot);
  border-radius: 0;
  background: var(--vpd-rot);
  color: var(--vpd-papier);
  font-family: var(--vpd-sans);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

button.vpd-filter-trigger:hover {
  background: var(--vpd-rot-tief);
  border-color: var(--vpd-rot-tief);
}

button.vpd-filter-trigger .vpd-icon { flex: 0 0 auto; }

.vpd-filter-trigger__badge {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vpd-papier);
  color: var(--vpd-rot);
  font-size: .75rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Galerie: Raster
   Avada rechnet seine Rasterabstände in seitenspezifischem CSS aus, das der
   Import nicht mitbringt. Spaltenabstand über den Innenabstand der Rasterfelder,
   Zeilenabstand über `row-gap` — Reihen atmen mehr als Spalten.
   --------------------------------------------------------------------------- */

/* Avadas eigene Abstandsrechnung wird auf null gesetzt, damit `gap` die einzige Quelle bleibt;
   die Variablen stehen inline am Element, deshalb `!important`. */
.vpd-inspiration-grid {
  --awb-column-spacing: 0px !important;
  --awb-row-spacing: 0px !important;
}

.vpd-inspiration-grid .fusion-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vpd-reihe, 3.15rem) var(--vpd-spalte, 2rem);
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.vpd-inspiration-grid .fusion-grid > li.fusion-grid-column {
  min-width: 0;
  width: 100% !important;
  max-width: 100%;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: none !important;
  box-shadow: none;
  transition: opacity 300ms ease, transform 300ms ease;
}
.vpd-inspiration-grid .fusion-grid > li.vpd-reveal-pending:not(:focus-within) {
  opacity: 0;
  transform: translateY(8px);
}

.vpd-inspiration-grid .fusion-grid > li .fusion-column-wrapper {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none !important;
  box-shadow: none !important;
}

/* Leere Rest-Zeilen aus dem Kartenlayout nehmen sonst Höhe ein. */
.vpd-inspiration-grid vpd-card > .fusion-builder-row-inner:not(:has(img, a, p, h1, h2, h3, h4)) {
  display: none;
}

/* ---------------------------------------------------------------------------
   Galerie: Karte
   Kundenabstimmung: Motiv, die zwei Wege, Produktart, Inspirationsname.
   Kein Rahmen, kein Hintergrund, kein Schatten.
   --------------------------------------------------------------------------- */

.vpd-inspiration-grid vpd-card {
  min-width: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: .38rem;
}

.vpd-inspiration-grid .vpd-inspiration-image {
  order: 1;
  position: relative;
  aspect-ratio: 1.5;
  overflow: hidden;
  margin: 0 !important;
  /* Der Rahmen bleibt weiß wie im Prototyp: Mit `contain` entstand sonst eine harte Kante
     zwischen Sandband und dem hellen Eigengrund der Mockups — und der Sandton verlor seine
     Aufgabe, ein fehlendes Motiv zu kennzeichnen. Den trägt jetzt nur `.vpd-motiv-fehlt`. */
  background: var(--vpd-papier);
}

.vpd-inspiration-grid .vpd-inspiration-image.vpd-motiv-fehlt {
  background: var(--vpd-linie);
}

/* Nur die Hülle des Motivs füllt den Rahmen. Früher galt das für jedes `span` darin und
   hat die Spans der Varianten-Auflage mitgerissen. */
.vpd-inspiration-grid .vpd-inspiration-image > a,
.vpd-inspiration-grid .vpd-inspiration-image > span.fusion-imageframe,
.vpd-inspiration-grid .vpd-inspiration-image > a > span {
  display: block;
  height: 100%;
}

/* Das vollständige Motiv bleibt auch beim Hover unverändert im 3:2-Rahmen.
   Die Eigenschaften legen sich darüber; Avadas Bildeffekte bleiben ausgeschaltet. */
.vpd-inspiration-grid .vpd-inspiration-image img:not(.vpd-format-image) {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center top;
  transform: none !important;
}

.vpd-inspiration-grid .vpd-inspiration-product {
  order: 3;
  margin: 0 !important;
}
.vpd-inspiration-grid .vpd-inspiration-product,
.vpd-inspiration-grid .vpd-inspiration-product * {
  color: var(--vpd-gedaempft);
  font-family: var(--vpd-sans);
  /* Avada setzt auf Bildkarten Schriftgröße und Zeilenhöhe zusätzlich inline. */
  font-size: .74rem !important;
  font-weight: 300;
  line-height: 1.25 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Karten ohne Verknüpfung rendern ihren Titel über ein Avada-Titelelement statt über
   `.vpd-inspiration-title`; beide Fassungen tragen denselben Kartentitel. */
.vpd-inspiration-grid .vpd-inspiration-title,
.post-content:has(vpd-collection) .vpd-inspiration-grid vpd-card .fusion-title h3,
.post-content:has(vpd-collection) .vpd-inspiration-grid vpd-card .fusion-title h3 *,
.vpd-inspiration-grid .vpd-inspiration-card:hover .vpd-inspiration-title,
.vpd-inspiration-grid .vpd-inspiration-card:focus-within .vpd-inspiration-title {
  order: 4;
  margin: 0 !important;
  color: var(--vpd-tinte) !important;
  font-family: var(--vpd-sans) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  transform: none !important;
  overflow-wrap: anywhere;
}

.vpd-inspiration-grid .vpd-inspiration-actions {
  order: 2;
  align-self: start;
  width: 100%;
  max-width: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.55fr);
  gap: .48rem;
  min-height: 0;
  margin: .15rem 0 .25rem !important;
  padding: 0;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Die Rasterzelle trägt die Breite, nicht der Knopf: das ältere Rund-Button-Layout
   setzt hier eine feste Breite, die die Zelle nicht ausfüllt. */
.vpd-inspiration-grid .vpd-round-action {
  display: block !important;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Die beiden Gestaltungswege sind Textbuttons ohne die früheren runden Symbole. */
.vpd-inspiration-grid .vpd-round-action i,
.vpd-inspiration-grid .vpd-round-action svg,
.vpd-inspiration-grid .vpd-round-action .fontawesome-icon,
.vpd-inspiration-grid .vpd-round-action .awb-button__icon,
.vpd-inspiration-grid .vpd-inspiration-actions .fusion-button i {
  display: none !important;
}

.vpd-inspiration-grid .vpd-inspiration-actions .fusion-button,
.vpd-inspiration-grid .vpd-round-action .fusion-button,
.vpd-inspiration-grid .vpd-round-action > a {
  position: relative;
  min-height: 44px;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  flex-wrap: nowrap !important;
  padding: .52rem .64rem !important;
  border: 1px solid var(--vpd-rot) !important;
  border-radius: 0 !important;
  background: var(--vpd-papier) !important;
  color: var(--vpd-rot) !important;
  font-family: var(--vpd-sans) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal !important;
  text-wrap: balance;
  overflow-wrap: break-word;
  box-shadow: none !important;
  transition: background 170ms ease, border-color 170ms ease, color 170ms ease, transform 170ms ease;
}

.vpd-inspiration-grid .vpd-inspiration-actions .fusion-button .fusion-button-text,
.vpd-inspiration-grid .vpd-round-action a span {
  min-width: 0;
  color: inherit !important;
  font: inherit;
}

/* Auch Avadas direkt eingebettete Button-Icons bleiben ausgeblendet. */
.vpd-inspiration-grid .vpd-inspiration-actions .fusion-button .awb-button__icon,
.vpd-inspiration-grid .vpd-inspiration-actions .fusion-button i[class*="fa-"] {
  display: none;
}

.vpd-inspiration-grid .vpd-inspiration-actions .fusion-button[data-vpd-action="quick"] {
  background: var(--vpd-rot) !important;
  color: var(--vpd-papier) !important;
}

.vpd-inspiration-grid .vpd-inspiration-actions
  .fusion-button[data-vpd-action="quick"] .fusion-button-text {
  color: var(--vpd-papier) !important;
}

.vpd-inspiration-grid .vpd-inspiration-actions .fusion-button[href]:hover,
.vpd-inspiration-grid .vpd-inspiration-actions .fusion-button[href]:focus-visible {
  transform: translateY(-1px);
}

.vpd-inspiration-grid .vpd-inspiration-actions .fusion-button[data-vpd-action="quick"][href]:hover,
.vpd-inspiration-grid .vpd-inspiration-actions .fusion-button[data-vpd-action="quick"][href]:focus-visible {
  background: var(--vpd-rot-tief) !important;
  border-color: var(--vpd-rot-tief) !important;
}

.vpd-inspiration-grid .vpd-inspiration-actions .fusion-button[data-vpd-action="individual"][href]:hover,
.vpd-inspiration-grid .vpd-inspiration-actions .fusion-button[data-vpd-action="individual"][href]:focus-visible {
  background: #fff7fa !important;
  border-color: var(--vpd-rot-tief) !important;
  color: var(--vpd-rot-tief) !important;
}

/* Bleibt nur ein Weg übrig, bekommt er die ganze Zeile: nichts Nichtverfügbares,
   aber auch keine halb leere Aktionszeile. */
.vpd-inspiration-grid .vpd-inspiration-actions:not(:has([data-vpd-action="quick"])),
.vpd-inspiration-grid .vpd-inspiration-actions:not(:has([data-vpd-action="individual"])) {
  grid-template-columns: minmax(0, 1fr);
}

.vpd-inspiration-grid .vpd-round-action:empty,
.vpd-inspiration-grid .vpd-round-action:not(:has(a)) {
  display: none !important;
}

/* Ein Motiv, das der Shop nicht liefern kann, reserviert keinen leeren Kasten. */
.vpd-inspiration-grid .vpd-inspiration-image:not(:has(img)) {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .vpd-inspiration-grid vpd-card:hover .vpd-has-variants img:not(.vpd-format-image),
  .vpd-inspiration-grid vpd-card:focus-within .vpd-has-variants img:not(.vpd-format-image) {
    transform: none !important;
  }
}

/* Avada legt den Überschriftentext in ein eigenes Element INNERHALB der Überschrift
   (`h1 > p`, `h3 > p > strong`), das Schrift und Farbe selbst mitbringt und deshalb
   nichts erbt. Die Regel muss diese Kinder mitnehmen. Schriftgrößen der Redaktion
   bleiben unangetastet — gesetzt werden nur Familie, Schnitt und Farbe. */
.post-content:has(vpd-collection) .fusion-title h1,
.post-content:has(vpd-collection) .fusion-title h1 *,
.post-content:has(vpd-collection) .fusion-title h2,
.post-content:has(vpd-collection) .fusion-title h2 * {
  font-family: var(--vpd-serif) !important;
  font-weight: 400 !important;
  color: var(--vpd-rot) !important;
  line-height: 1.12 !important;
}

/* Die kleine Versalzeile über einer Überschrift ist die Rolle `label` aus DESIGN.md:
   Open Sans 300, beiläufiges Grau, 0.16em gesperrt — keine zweite Überschrift und
   kein fetter Kicker. */
.post-content:has(vpd-collection) .fusion-title h3:not(.vpd-inspiration-title),
.post-content:has(vpd-collection) .fusion-title h3:not(.vpd-inspiration-title) * {
  font-family: var(--vpd-sans) !important;
  font-weight: 300 !important;
  color: var(--vpd-beilaeufig) !important;
  letter-spacing: .16em !important;
  line-height: 1.2 !important;
}

/* Fehlt das Motiv, bleibt der Rahmen als Sandfläche stehen — ein Platzhalter,
   keine gebrochene Bildmarke mit Alt-Text. */
.vpd-inspiration-grid .vpd-inspiration-image.vpd-motiv-fehlt img:not(.vpd-format-image) {
  visibility: hidden;
}

/* ---------------------------------------------------------------------------
   Varianten-Auflage auf dem Motiv
   Hover und Tastaturfokus legen die Eigenschaften über das unveränderte Motiv. Auf Touch stehen
   die Eigenschaften dauerhaft darunter; ein zusätzlicher Schalter entfällt.
   --------------------------------------------------------------------------- */

.vpd-inspiration-grid .vpd-variant-panel {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr);
  align-items: start;
  gap: .75rem 1rem;
  padding: .75rem;
  background: rgba(255, 255, 255, .96);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease;
}

.vpd-inspiration-grid vpd-card:hover .vpd-variant-panel,
.vpd-inspiration-grid vpd-card:focus-within .vpd-variant-panel {
  opacity: 1;
  transform: none;
}

.vpd-variant-row {
  min-width: 0;
  display: grid;
  gap: .32rem;
}

.vpd-variant-row:only-child { grid-column: 1 / -1; }

.vpd-variant-label {
  color: var(--vpd-rot);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.vpd-color-options {
  color: var(--vpd-tinte);
  font-size: .75rem;
  line-height: 1.4;
}

.vpd-format-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem 1rem;
}

/* Formatbilder aus HBO sind Information, keine umrandeten Auswahlknöpfe. */
.vpd-format-option {
  min-width: 0;
  max-width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vpd-tinte);
  box-shadow: none;
}

/* Mehrere Formate teilen sich eine Zeile, damit die Auflage niedrig bleibt. */
.vpd-format-options:has(.vpd-format-option + .vpd-format-option) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
}

.vpd-format-options:has(.vpd-format-option + .vpd-format-option) .vpd-format-option {
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}

.vpd-format-symbol {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.vpd-format-symbol[hidden] { display: none; }
.vpd-inspiration-grid .vpd-format-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none !important;
}

.vpd-format-option__label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--vpd-tinte);
  font-size: .75rem;
  line-height: 1.15;
}

@media (hover: none), (pointer: coarse) {
  .vpd-inspiration-grid .vpd-has-variants {
    aspect-ratio: auto;
    overflow: visible;
  }
  .vpd-inspiration-grid .vpd-has-variants > a,
  .vpd-inspiration-grid .vpd-has-variants > span.fusion-imageframe,
  .vpd-inspiration-grid .vpd-has-variants > img:not(.vpd-format-image) {
    display: block;
    height: auto;
    aspect-ratio: 1.5;
  }
  .vpd-inspiration-grid .vpd-variant-panel {
    position: static;
    opacity: 1;
    transform: none;
    padding-inline: 0;
    background: var(--vpd-papier);
  }
}

/* ---------------------------------------------------------------------------
   Leerzustand
   --------------------------------------------------------------------------- */

.vpd-gallery__empty {
  padding: 5rem 1rem;
  text-align: center;
}

.vpd-gallery__empty-title {
  font-family: var(--vpd-serif);
  font-weight: 400;
  color: var(--vpd-rot);
}

.vpd-gallery__empty button {
  min-height: 38px;
  padding: .52rem 1rem;
  border: 1px solid var(--vpd-rot);
  border-radius: 0;
  background: var(--vpd-papier);
  color: var(--vpd-rot);
  font-family: var(--vpd-sans);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Filter-Panel
   Rechts angeschlagen, 400 px, Papierweiß, Kopf und Fuß durch Haarlinien
   abgesetzt, Auswahl als Chip mit rotem Rand und eingeblendetem Häkchen.
   --------------------------------------------------------------------------- */

.awb-off-canvas-wrap:has(.vpd-filter-mount) {
  background-color: rgba(24, 22, 22, .52);
}

.awb-off-canvas-wrap:has(.vpd-filter-mount) .awb-off-canvas {
  width: min(400px, 100%);
  border-radius: 0;
}

.awb-off-canvas-wrap:has(.vpd-filter-mount) .awb-off-canvas-inner {
  background-color: var(--vpd-papier, #fff) !important;
  box-shadow: -20px 0 50px rgba(0, 0, 0, .13) !important;
  border-radius: 0;
}
.awb-off-canvas-wrap:has(.vpd-filter-mount) .fusion-title .fusion-title-heading,
.awb-off-canvas-wrap:has(.vpd-filter-mount) .fusion-title .fusion-title-heading * {
  font: 600 1rem/1.2 var(--vpd-sans) !important;
  color: var(--vpd-tinte) !important;
  letter-spacing: normal !important;
}
.awb-off-canvas-wrap:has(.vpd-filter-mount) .off-canvas-close {
  color: var(--vpd-rot) !important;
}

.awb-off-canvas-wrap:has(.vpd-filter-mount) .awb-off-canvas-inner .off-canvas-content {
  overflow: hidden;
}

.awb-off-canvas-wrap:has(.vpd-filter-mount) .fusion-title {
  flex-shrink: 0;
}

/* Avadas Sektionskette im Panel wächst nicht auf die Panelhöhe; ohne das steht die
   Fußleiste mitten im Blatt statt an seinem Fuß. */
.awb-off-canvas-wrap:has(.vpd-filter-mount) .off-canvas-content > .fusion-fullwidth,
.awb-off-canvas-wrap:has(.vpd-filter-mount) .off-canvas-content .fusion-builder-row,
.awb-off-canvas-wrap:has(.vpd-filter-mount) .off-canvas-content .fusion-layout-column,
.awb-off-canvas-wrap:has(.vpd-filter-mount) .off-canvas-content .fusion-column-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  flex-wrap: nowrap;
}

.vpd-filter-mount {
  display: flex;
  flex-direction: column;
  /* Nur den Platz unter dem Titel füllen; 100% zählt dessen Höhe zusätzlich. */
  flex: 1 1 auto;
  min-height: 0;
  font-family: var(--vpd-sans, "Open Sans", Arial, sans-serif);
  font-weight: 300;
  color: var(--vpd-tinte, #292727);
}

.vpd-filter__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--vpd-linie) transparent;
}

.vpd-filter-group {
  border-bottom: 1px solid var(--vpd-linie, #e4e0d8);
  padding: .3rem 0 .95rem;
}

.vpd-filter-group__toggle {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .25rem 0;
  border: 0;
  background: transparent;
  color: var(--vpd-tinte, #292727);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.vpd-filter-group__arrow {
  color: var(--vpd-rot, #9d2244);
  transition: transform 170ms ease;
}

.vpd-filter-group__toggle[aria-expanded="true"] .vpd-filter-group__arrow {
  transform: rotate(180deg);
}

.vpd-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .25rem 0 .15rem;
}
.vpd-filter-options[hidden] { display: none; }

/* Die Beschriftung ist die Trefferfläche; das Ankreuzfeld liegt unsichtbar darunter. */
.vpd-filter-option {
  position: relative;
  display: inline-flex;
  min-width: 0;
  margin: 0;
}

.vpd-filter-option input {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 18px;
  height: 18px;
  margin: -9px 0 0;
  opacity: 0;
  pointer-events: none;
}

.vpd-filter-option__face {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .46rem .62rem;
  border: 1px solid var(--vpd-sand, #ddd7d0);
  border-radius: 0;
  background: var(--vpd-papier, #fff);
  color: var(--vpd-tinte, #292727);
  font-size: .77rem;
  line-height: 1.18;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.vpd-filter-option__face:hover { border-color: rgba(157, 34, 68, .45); }

.vpd-filter-option.is-selected .vpd-filter-option__face {
  border-color: var(--vpd-rot, #9d2244);
  box-shadow: inset 0 0 0 1px var(--vpd-rot, #9d2244);
}

.vpd-filter-option input:focus-visible + .vpd-filter-option__face {
  outline: 3px solid var(--vpd-gold, #c3a455);
  outline-offset: 2px;
}

.vpd-filter-swatch {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  border: 1px solid #bdb6af;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .54);
}

.vpd-filter-symbol {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--vpd-gedaempft, #6f6b68);
}

.vpd-filter-symbol svg,
.vpd-format-symbol svg {
  width: 20px;
  height: 20px;
  display: block;
}

.vpd-filter-symbol svg rect,
.vpd-filter-symbol svg path,
.vpd-format-symbol svg rect,
.vpd-format-symbol svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.vpd-filter-option.is-selected .vpd-filter-symbol { color: var(--vpd-rot, #9d2244); }

.vpd-filter-check {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vpd-rot, #9d2244);
  color: #fff;
  opacity: 0;
  transform: scale(.82);
  transition: opacity 160ms ease, transform 160ms ease;
}

.vpd-filter-check svg {
  width: 11px;
  height: 11px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vpd-filter-option.is-selected .vpd-filter-check {
  opacity: 1;
  transform: none;
}

.vpd-filter__footer {
  flex: 0 0 auto;
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: .75rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--vpd-linie, #e4e0d8);
  background: var(--vpd-papier, #fff);
}

.vpd-filter__reset,
.vpd-filter__apply {
  min-height: 48px;
  border: 1px solid var(--vpd-rot, #9d2244);
  border-radius: 0;
  font-family: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: background 170ms ease, border-color 170ms ease, color 170ms ease;
}

.vpd-filter__reset {
  background: var(--vpd-papier, #fff);
  color: var(--vpd-rot, #9d2244);
}

.vpd-filter__reset:hover {
  background: #fff7fa;
  border-color: var(--vpd-rot-tief, #771632);
  color: var(--vpd-rot-tief, #771632);
}

.vpd-filter__apply {
  background: var(--vpd-rot, #9d2244);
  color: var(--vpd-papier, #fff);
  font-weight: 600;
}

.vpd-filter__apply:hover {
  background: var(--vpd-rot-tief, #771632);
  border-color: var(--vpd-rot-tief, #771632);
}

/* Aktive Auswahl über dem Raster: die einzige Pille im System. */
.vpd-active-chip,
.vpd-clear-filters {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .75rem;
  border-radius: 99px;
  font-family: var(--vpd-sans);
  font-size: .78rem;
  line-height: 1.2;
  cursor: pointer;
}

.vpd-active-chip {
  border: 1px solid #d3cbbb;
  background: var(--vpd-papier);
  color: var(--vpd-tinte);
  transition: border-color 160ms ease;
}

.vpd-active-chip:hover { border-color: rgba(157, 34, 68, .45); }
.vpd-active-chip__x { color: var(--vpd-rot); font-weight: 600; }

.vpd-clear-filters {
  border: 1px solid transparent;
  background: transparent;
  color: var(--vpd-rot);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   Beratungsabschnitt
   --------------------------------------------------------------------------- */

.post-content:has(vpd-collection) .vpd-trust .fusion-title h2 {
  font-size: clamp(1.65rem, 2.7vw, 2.55rem) !important;
  line-height: 1.08 !important;
}

.post-content:has(vpd-collection) a[href^="tel:"] {
  font-family: var(--vpd-serif);
  font-size: 2rem;
  color: var(--vpd-rot);
}

/* ---------------------------------------------------------------------------
   Schmalere Ansichten
   --------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .vpd-inspiration-grid .fusion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .post-content:has(vpd-collection) { --vpd-shell: min(100% - 40px, 680px); }
  vpd-collection.vpd-gallery .vpd-gallery__head,
  .vpd-gallery__head { align-items: stretch !important; }
  vpd-collection.vpd-gallery button.vpd-filter-trigger,
  button.vpd-filter-trigger {
    min-width: 0 !important;
    width: 100% !important;
    align-self: stretch !important;
  }
}

@media (max-width: 520px) {
  .post-content:has(vpd-collection) { --vpd-shell: calc(100% - 28px); }
}

@media (max-width: 640px) {
  .vpd-inspiration-grid .fusion-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  vpd-collection *,
  vpd-collection *::before,
  vpd-collection *::after,
  .vpd-filter-mount *,
  .post-content:has(vpd-collection) .fusion-imageframe,
  .post-content .vpd-hero-cta {
    animation: none !important;
    transition: none !important;
  }
  .post-content .vpd-path-card .fusion-imageframe,
  .post-content .vpd-hero-cta,
  .vpd-inspiration-grid .fusion-grid > li,
  .vpd-inspiration-grid .vpd-inspiration-actions .fusion-button {
    transform: none !important;
  }
  .vpd-inspiration-grid .fusion-grid > li.vpd-reveal-pending { opacity: 1; }
}