/* Product-only branding reveal. Dimensions and the existing corner logo stay untouched. */
.employee-photo-preview.gallery-image-1 {
  --unprinted-photo: url('./bilder-ohne-logo/01-unbedruckt-v1.webp');
  --printed-photo: url('./onboarding-bmerch-hell-v2.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%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%3E%3Cpath%20d%3D%22M335%20405H665V568H335Z%22%2F%3E%3Cpath%20d%3D%22M813%20427L1060%20468L1054%20574L794%20513Z%22%2F%3E%3Cpath%20d%3D%22M478%20885L561%20903L558%20940L472%20921Z%22%2F%3E%3Cpath%20d%3D%22M751%20879L872%20912L863%20955L740%20920Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.employee-photo-preview.gallery-image-2 {
  --unprinted-photo: url('./bilder-ohne-logo/02-nur-regenschirm-unbedruckt-v4.webp');
  --printed-photo: url('./bilder-kontrast/02-jubilaeum-nur-regenschirm-v6.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%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%3E%3Cpath%20d%3D%22M680%20728L779%20764L767%20796L668%20760Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.employee-photo-preview.gallery-image-6 {
  --unprinted-photo: url('./bilder-ohne-logo/03-unbedruckt-v1.webp');
  --printed-photo: url('./bilder-kontrast/03-team-event-kontrast-v4.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%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%3E%3Cpath%20d%3D%22M447%20592L640%20560L647%20638L445%20668Z%22%2F%3E%3Cpath%20d%3D%22M416%201050L553%201011L577%201063L432%201107Z%22%2F%3E%3Cpath%20d%3D%22M756%20898L865%20930L857%20972L745%20938Z%22%2F%3E%3Cpath%20d%3D%22M830%20766L908%20780L906%20814L829%20801Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.employee-photo-preview.gallery-image-5 {
  --unprinted-photo: url('./bilder-ohne-logo/05-unbedruckt-v1.webp');
  --printed-photo: url('./bilder-kontrast/05-willkommen-kontrast-v4.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%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%3E%3Cpath%20d%3D%22M331%20478L452%20463L460%20509L332%20525Z%22%2F%3E%3Cpath%20d%3D%22M672%20518L786%20502L797%20550L674%20562Z%22%2F%3E%3Cpath%20d%3D%22M531%20533L550%20525L578%20591L552%20603Z%22%2F%3E%3Cpath%20d%3D%22M570%20602L596%20595L615%20663L585%20675Z%22%2F%3E%3Cpath%20d%3D%22M915%20526L1004%20549L997%20582L912%20560Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.employee-photo-preview.gallery-image-3 {
  --unprinted-photo: url('./bilder-ohne-logo/06-unbedruckt-v1.webp');
  --printed-photo: url('./bilder-kontrast/06-weihnachten-kontrast-v3.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%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%3E%3Cpath%20d%3D%22M757%20735L894%20701L904%20753L764%20793Z%22%2F%3E%3Cpath%20d%3D%22M539%20875L647%20825L672%20872L558%20917Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.employee-photo-preview.gallery-image-7 {
  --unprinted-photo: url('./bilder-ohne-logo/07-unbedruckt-v1.webp');
  --printed-photo: url('./bilder-kontrast/07-sommerfest-kontrast-v3.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%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%3E%3Cpath%20d%3D%22M581%20373L840%20408L839%20485L580%20450Z%22%2F%3E%3Cpath%20d%3D%22M478%20355H502V435H478Z%22%2F%3E%3Cpath%20d%3D%22M247%20290H308V323H247Z%22%2F%3E%3Cpath%20d%3D%22M260%20491H295V605H260Z%22%2F%3E%3Cpath%20d%3D%22M207%20773L305%20753L313%20802L215%20817Z%22%2F%3E%3Cpath%20d%3D%22M113%20870L134%20866L149%20926L126%20934Z%22%2F%3E%3Cpath%20d%3D%22M1154%20729L1212%20747L1205%20781L1150%20760Z%22%2F%3E%3Cpath%20d%3D%22M539%20846L620%20828L630%20873L545%20888Z%22%2F%3E%3Cpath%20d%3D%22M514%201038L564%201000L583%201028L531%201068Z%22%2F%3E%3Cpath%20d%3D%22M607%201092L656%201048L677%201073L624%201123Z%22%2F%3E%3Cpath%20d%3D%22M326%201074L403%201103L397%201143L315%201111Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.employee-photo-preview.gallery-image-4 {
  --unprinted-photo: url('./bilder-ohne-logo/09-unbedruckt-v1.webp');
  --printed-photo: url('./bilder-hell/09-grossaktion-bmerch-hell-v1.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%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%3E%3Cpath%20d%3D%22M99%2055L187%2082L180%20111L94%2085Z%22%2F%3E%3Cpath%20d%3D%22M590%2055L687%2085L680%20116L585%2087Z%22%2F%3E%3Cpath%20d%3D%22M1075%20240L1145%20261L1141%20291L1068%20269Z%22%2F%3E%3Cpath%20d%3D%22M803%20329L938%20388L925%20424L791%20363Z%22%2F%3E%3Cpath%20d%3D%22M420%20420L493%20449L486%20478L413%20449Z%22%2F%3E%3Cpath%20d%3D%22M1109%20592L1206%20629L1192%20662L1100%20626Z%22%2F%3E%3Cpath%20d%3D%22M573%20666L716%20730L702%20770L562%20704Z%22%2F%3E%3Cpath%20d%3D%22M46%20732L183%20790L166%20829L35%20767Z%22%2F%3E%3Cpath%20d%3D%22M971%20837L1074%20880L1059%20913L961%20870Z%22%2F%3E%3Cpath%20d%3D%22M790%201046L914%201101L900%201138L780%201082Z%22%2F%3E%3Cpath%20d%3D%22M423%201088L516%201130L502%201160L416%201118Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.employee-photo-preview.gallery-image-9 {
  --unprinted-photo: url('./bilder-ohne-logo/10-unbedruckt-v1.webp');
  --printed-photo: url('./bilder-kontrast/10-wohlbefinden-kontrast-v3.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%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%3E%3Cpath%20d%3D%22M597%20443L782%20470L782%20532L597%20506Z%22%2F%3E%3Cpath%20d%3D%22M988%20688H1122V741H988Z%22%2F%3E%3Cpath%20d%3D%22M187%20542L252%20552L251%20582L183%20573Z%22%2F%3E%3Cpath%20d%3D%22M433%20934L548%20971L540%201010L420%20971Z%22%2F%3E%3Cpath%20d%3D%22M788%20849L872%20868L868%20903L784%20881Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.employee-photo-preview.gallery-image-8 {
  --unprinted-photo: url('./bilder-ohne-logo/11-unbedruckt-v1.webp');
  --printed-photo: url('./bilder-kontrast/11-ausbildungsstart-kontrast-v3.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%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%3E%3Cpath%20d%3D%22M421%20610L690%20584L691%20674L420%20693Z%22%2F%3E%3Cpath%20d%3D%22M1011%20765L1111%20804L1102%20840L1008%20803Z%22%2F%3E%3Cpath%20d%3D%22M842%20944L929%20980L919%201008L835%20976Z%22%2F%3E%3Cpath%20d%3D%22M323%20902L403%20894L412%20930L323%20945Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.employee-photo-preview {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background-color: #f7f7f5;
  background-image: var(--unprinted-photo);
  background-size: cover;
  background-position: center;
  transition: filter .65s ease;
  -webkit-tap-highlight-color: transparent;
}
.employee-photo-preview.is-photo-ready { background-image: var(--printed-photo); }
.employee-photo-preview > .employee-unprinted-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: var(--print-regions);
  mask-image: var(--print-regions);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
  opacity: 1;
  transition: opacity .95s cubic-bezier(.22, .61, .36, 1);
}
.employee-photo-preview.is-photo-ready[data-preview-active="true"] { filter: grayscale(0); }
.employee-photo-preview.is-photo-ready[data-preview-active="true"] > .employee-unprinted-layer { opacity: 0; }
.employee-photo-preview:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
.employee-print-help {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Keep the original badge geometry; only the photo layers turn grayscale. */
.employee-gallery-image.employee-photo-preview { background-image: none; filter: none; }
.employee-photo-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--unprinted-photo);
  background-position: center;
  background-size: cover;
  pointer-events: none;
  filter: grayscale(1);
  transition: filter .65s ease;
}
.employee-photo-preview.is-photo-ready::before { background-image: var(--printed-photo); }
.employee-photo-preview > .employee-unprinted-layer {
  filter: grayscale(1);
  transition: opacity .95s cubic-bezier(.22, .61, .36, 1), filter .65s ease;
}
.employee-photo-preview.is-photo-ready[data-preview-active="true"]::before,
.employee-photo-preview.is-photo-ready[data-preview-active="true"] > .employee-unprinted-layer { filter: grayscale(0); }
.employee-gallery-image::after {
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
}
.employee-gallery-image > .employee-branding-caption {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 14px;
  width: clamp(118px, 38%, 156px);
  aspect-ratio: 1300 / 450;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 6px;
  border: 1px solid transparent;
  background: var(--red);
  color: #fff;
  font-size: .7rem;
  line-height: 1.2;
  letter-spacing: .06em;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  transition: opacity .25s .08s ease;
}
.employee-branding-caption-company { text-align: center; }
.employee-photo-preview.is-photo-ready[data-preview-active="true"]::after,
.employee-gallery-card:hover .employee-flip-card::after,
.employee-gallery-card:focus-within .employee-flip-card::after,
.employee-gallery-card.is-active .employee-flip-card::after,
.employee-flip-card.is-flipped::after {
  opacity: 1;
  transition: opacity .38s .12s ease;
}
.employee-photo-preview.is-photo-ready[data-preview-active="true"] > .employee-branding-caption,
.employee-gallery-card:hover .employee-flip-card > .employee-branding-caption,
.employee-gallery-card:focus-within .employee-flip-card > .employee-branding-caption,
.employee-gallery-card.is-active .employee-flip-card > .employee-branding-caption,
.employee-flip-card.is-flipped > .employee-branding-caption {
  opacity: 0;
  transition: opacity .2s ease;
}
/* Filter each face, not the 3D container, so the existing page turn stays intact. */
.employee-gallery-image.employee-flip-card { filter: none; }
/* Both special cards keep the same corner logo visible on either face. */
.employee-gallery-image.employee-flip-card::after {
  z-index: 3;
  opacity: 1;
  filter: grayscale(1);
  transition: filter .34s ease;
}
.employee-gallery-card:hover .employee-flip-card::after,
.employee-gallery-card:focus-within .employee-flip-card::after,
.employee-gallery-card.is-active .employee-flip-card::after,
.employee-flip-card.is-flipped::after { filter: grayscale(0); }
.employee-flip-card .employee-flip-face {
  filter: grayscale(1);
  transition: filter .34s ease;
}
.employee-gallery-card .employee-flip-hint {
  filter: grayscale(1);
  transition: color .25s ease, background-color .25s ease, transform .3s ease, filter .34s ease;
}
.employee-gallery-card:hover .employee-flip-face,
.employee-gallery-card:focus-within .employee-flip-face,
.employee-gallery-card.is-active .employee-flip-face,
.employee-flip-card.is-flipped .employee-flip-face,
.employee-gallery-card:hover .employee-flip-hint,
.employee-gallery-card:focus-within .employee-flip-hint,
.employee-gallery-card.is-active .employee-flip-hint,
.employee-flip-card.is-flipped .employee-flip-hint { filter: grayscale(0); }
@media (max-width: 560px) {
  .employee-gallery-image > .employee-branding-caption { right: 10px; bottom: 10px; width: 126px; }
}
@media (prefers-reduced-motion: reduce) {
  .employee-photo-preview,
  .employee-photo-preview > .employee-unprinted-layer,
  .employee-photo-preview::before,
  .employee-gallery-image::after,
  .employee-gallery-image > .employee-branding-caption,
  .employee-photo-preview.is-photo-ready[data-preview-active="true"]::after,
  .employee-photo-preview.is-photo-ready[data-preview-active="true"] > .employee-branding-caption,
  .employee-gallery-card .employee-flip-card::after,
  .employee-gallery-card .employee-flip-card > .employee-branding-caption,
  .employee-gallery-card .employee-flip-face,
  .employee-gallery-card .employee-flip-hint { transition: none !important; }
}