/* Eigenständige Werbeartikel Bildwelt in Graphit, Kobaltblau und hellem Silber. */
.advertising-products-page {
  --ad-cobalt: #1858a8;
  --ad-cobalt-deep: #153a68;
  --ad-cobalt-soft: #eaf1f8;
  --ad-graphite: #20262d;
  --ad-slate: #65717c;
  --ad-silver: #b8c2ca;
  --ad-ice: #f4f7f9;
  --ad-line: #d6dee4;
}

.advertising-products-page .employee-gallery-section {
  width: 100%;
  background:
    radial-gradient(circle at 90% 8%, rgba(24, 88, 168, .08), transparent 30%),
    linear-gradient(180deg, #fff 0%, #fff 48%, var(--ad-ice) 100%);
}

.advertising-products-page .employee-gallery-head > div:first-child > .eyebrow,
.advertising-products-page .employee-gallery-card > div:last-child > span {
  color: #7b8791;
}

.advertising-products-page .employee-gallery-head h1 {
  color: var(--ad-graphite);
}

.advertising-products-page .employee-premium-promise strong {
  color: var(--ad-cobalt-deep);
}

.advertising-products-page .employee-logo-note {
  border-left-color: var(--ad-cobalt);
  background: linear-gradient(100deg, #f0f4f7 0%, #fff 86%);
}

.advertising-products-page .employee-logo-note-shop {
  color: var(--ad-cobalt-deep);
}

.advertising-products-page .employee-logo-note > .employee-logo-note-shop {
  color: #fff;
}

.advertising-products-page .employee-gallery-card {
  border-color: var(--ad-line);
  background: #fff;
  box-shadow: 0 0 0 rgba(20, 47, 78, 0);
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.advertising-products-page .employee-gallery-card:hover,
.advertising-products-page .employee-gallery-card:focus-within,
.advertising-products-page .employee-gallery-card.is-active {
  border-color: rgba(24, 88, 168, .4);
  box-shadow: 0 18px 42px rgba(21, 58, 104, .14);
}

.advertising-products-page .employee-gallery-card > div:last-child {
  background: linear-gradient(145deg, #fff 0%, #f2f5f7 100%);
}

.advertising-products-page .employee-gallery-card h3 {
  color: var(--ad-graphite);
}

.advertising-products-page .employee-gallery-card p {
  color: var(--ad-slate);
}

.advertising-products-page .gallery-arrow:hover,
.advertising-products-page .gallery-arrow:focus-visible {
  border-color: var(--ad-cobalt);
  color: var(--ad-cobalt);
}

.advertising-products-page .gallery-image-benefits {
  background: linear-gradient(145deg, #dfe8f0 0 61%, rgba(24, 88, 168, .2) 61% 63%, #f7f9fb 63% 100%);
}

.advertising-products-page .gallery-image-custom,
.advertising-products-page .employee-flip-back {
  background: linear-gradient(145deg, #e5ebef 0 62%, rgba(24, 88, 168, .18) 62% 64%, #fafcfd 64% 100%);
}

.advertising-products-page .employee-custom-visual strong::before {
  background: var(--ad-cobalt);
}

.advertising-products-page .benefits-shop-bar {
  background: var(--ad-cobalt-deep);
}

.advertising-products-page .benefits-product,
.advertising-products-page .benefits-flow-step {
  border-color: rgba(24, 88, 168, .22);
}

.advertising-products-page .employee-branding-caption {
  border-color: rgba(255, 255, 255, .3);
  background: var(--ad-cobalt-deep);
  color: #fff;
}

/* Nur der jeweilige Veredelungsbereich wird beim Darüberfahren sichtbar. */
.employee-photo-preview.ad-image-01 {
  --unprinted-photo: url('../werbeartikel-werbemittel/bilder-ohne-logo/01-tasse.webp');
  --printed-photo: url('../werbeartikel-werbemittel/bilder-mit-logo/01-tasse.webp');
  --print-regions: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221254%22%20height%3D%221254%22%20viewBox%3D%220%200%201254%201254%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%224%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%22270%22%20y%3D%22530%22%20width%3D%22620%22%20height%3D%22270%22%20rx%3D%2244%22%20fill%3D%22white%22%20filter%3D%22url(%23s)%22%2F%3E%3C%2Fsvg%3E");
}

.employee-photo-preview.ad-image-02 {
  --unprinted-photo: url('../werbeartikel-werbemittel/bilder-ohne-logo/02-kalender.webp');
  --printed-photo: url('../werbeartikel-werbemittel/bilder-mit-logo/02-kalender.webp');
  --print-regions: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221254%22%20height%3D%221254%22%20viewBox%3D%220%200%201254%201254%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%224%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%22430%22%20y%3D%22830%22%20width%3D%22445%22%20height%3D%22175%22%20rx%3D%2226%22%20fill%3D%22white%22%20filter%3D%22url(%23s)%22%2F%3E%3C%2Fsvg%3E");
}

.employee-photo-preview.ad-image-03 {
  --unprinted-photo: url('../werbeartikel-werbemittel/bilder-ohne-logo/03-tragetasche.webp');
  --printed-photo: url('../werbeartikel-werbemittel/bilder-mit-logo/03-tragetasche.webp');
  --print-regions: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221254%22%20height%3D%221254%22%20viewBox%3D%220%200%201254%201254%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%224%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%22315%22%20y%3D%22635%22%20width%3D%22570%22%20height%3D%22235%22%20rx%3D%2236%22%20fill%3D%22white%22%20filter%3D%22url(%23s)%22%2F%3E%3C%2Fsvg%3E");
}

.employee-photo-preview.ad-image-05 {
  --unprinted-photo: url('../werbeartikel-werbemittel/bilder-ohne-logo/05-zollstock.webp');
  --printed-photo: url('../werbeartikel-werbemittel/bilder-mit-logo/05-zollstock.webp');
  --print-regions: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221254%22%20height%3D%221254%22%20viewBox%3D%220%200%201254%201254%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M410%20545L845%20500L875%20720L435%20770Z%22%20fill%3D%22white%22%20filter%3D%22url(%23s)%22%2F%3E%3C%2Fsvg%3E");
}

.employee-photo-preview.ad-image-07 {
  --unprinted-photo: url('../werbeartikel-werbemittel/bilder-ohne-logo/07-kugelschreiber.webp');
  --printed-photo: url('../werbeartikel-werbemittel/bilder-mit-logo/07-kugelschreiber.webp');
  --print-regions: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221254%22%20height%3D%221254%22%20viewBox%3D%220%200%201254%201254%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M520%20548L787%20443L846%20575L576%20688Z%22%20fill%3D%22white%22%20filter%3D%22url(%23s)%22%2F%3E%3C%2Fsvg%3E");
}

.employee-photo-preview.ad-image-08 {
  --unprinted-photo: url('../werbeartikel-werbemittel/bilder-ohne-logo/08-trinkflasche.webp');
  --printed-photo: url('../werbeartikel-werbemittel/bilder-mit-logo/08-trinkflasche.webp');
  --print-regions: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221254%22%20height%3D%221254%22%20viewBox%3D%220%200%201254%201254%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%224%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%22455%22%20y%3D%22580%22%20width%3D%22355%22%20height%3D%22165%22%20rx%3D%2234%22%20fill%3D%22white%22%20filter%3D%22url(%23s)%22%2F%3E%3C%2Fsvg%3E");
}

/* Die Shopkarte 04 bleibt auf allen Leistungsseiten gestalterisch identisch. */
.advertising-products-page .employee-benefits-card {
  border-color: #ded5ca;
  background: #f8f3ec;
}

.advertising-products-page .employee-benefits-card > div:last-child {
  background: linear-gradient(145deg, #fbf8f3, #f4eee6);
}

.advertising-products-page .employee-benefits-card .gallery-image-benefits,
.advertising-products-page .employee-benefits-card .employee-flip-back {
  background: linear-gradient(145deg, #f1eee8 0 63%, rgba(41, 67, 60, .18) 63% 65%, #fff 65% 100%);
}

.advertising-products-page .employee-benefits-card .benefits-shop-bar {
  background: transparent;
}

@media (max-width: 720px) {
  .advertising-products-page .employee-gallery-card:hover,
  .advertising-products-page .employee-gallery-card:focus-within,
  .advertising-products-page .employee-gallery-card.is-active {
    transform: none;
  }
}