.hero.hero-reference {
  --hero-header: 85px;
  --hero-height: max(580px, calc(100svh - var(--hero-header) - 28px));
  position: relative;
  height: auto;
  min-height: var(--hero-height);
  max-height: none;
  overflow: visible;
  background: #fff;
  isolation: isolate;
}
.hero-reference.has-timeline { min-height: calc(var(--hero-height) + 38svh); }
.hero__inner {
  position: sticky;
  top: var(--hero-header);
  width: 100%;
  height: var(--hero-height);
  overflow: hidden;
  background: #fff;
  text-align: center;
}
.hero__copy {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
  opacity: var(--intro-opacity, 1);
  transform: translate3d(0, var(--intro-y, 0px), 0);
}
.hero-label { margin: 0 0 18px; font-size: 13px; font-weight: 700; color: #63637a; }
.hero-label::before { content: '/ '; color: #003c33; }
.hero-reference h1 { font: 700 54px/1.07 var(--body); text-wrap: balance; }
.hero-mobile-break { display: none; }
.hero__copy .hero-label, .hero-reference h1, .hero__support > p, .hero__actions {
  animation: hero-fade-up 650ms cubic-bezier(.16,1,.3,1) both;
}
.hero__copy .hero-label { animation-delay: 40ms; }
.hero-reference h1 { animation-delay: 100ms; }
.hero__support > p { animation-delay: 200ms; }
.hero__actions { animation-delay: 300ms; }
.hero-proof {
  position: absolute;
  top: 49%;
  left: 50%;
  width: min(100%, 960px);
  height: 240px;
  transform: translate3d(calc(-50% + var(--proof-x, 0px)), calc(-50% + var(--proof-y, 0px)), 0) scale(var(--proof-scale, 1));
  transform-origin: center;
  will-change: transform;
}
.hero-proof__stage { position: relative; width: 100%; height: 100%; perspective: 1200px; }
.proof-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 142px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d9d9dd;
  border-radius: 14px;
  background: #eeece7;
  box-shadow: 0 18px 34px #07182929;
  transform: translate(-50%,-50%) translate3d(var(--card-x,0px),var(--card-y,0px),0) rotate(var(--card-r,0deg)) scale(var(--card-s,1));
  transform-origin: center bottom;
  animation: hero-proof-unfold 1000ms cubic-bezier(.16,1,.3,1) var(--d) both;
  will-change: transform;
}
.proof-card img { width: 100%; height: auto; }
.proof-card--1 { --card-x:-349px; --card-y:28px; --card-r:-13deg; --card-s:.88; z-index:1; }
.proof-card--2 { --card-x:-233px; --card-y:2px; --card-r:-8deg; --card-s:.94; z-index:2; }
.proof-card--3 { --card-x:-116px; --card-y:16px; --card-r:-4deg; --card-s:.98; z-index:3; }
.proof-card--4 { --card-x:0px; --card-y:-28px; --card-r:0deg; --card-s:1.04; z-index:4; }
.proof-card--5 { --card-x:116px; --card-y:16px; --card-r:4deg; --card-s:.98; z-index:3; }
.proof-card--6 { --card-x:233px; --card-y:2px; --card-r:8deg; --card-s:.94; z-index:2; }
.proof-card--7 { --card-x:349px; --card-y:28px; --card-r:13deg; --card-s:.88; z-index:1; }
.hero-proof__tag {
  --tag-r: -4deg;
  position: absolute;
  top: 1%;
  z-index: 6;
  border-radius: 100px;
  padding: 10px 14px;
  background: #003c33;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  opacity: var(--tag-opacity,1);
  transform: translateY(var(--tag-y,0px)) rotate(var(--tag-r)) scale(var(--tag-scale,1));
  animation: hero-tag-pop 420ms cubic-bezier(.22,1,.36,1) 1050ms both;
}
.hero-proof__tag--left { left: calc(50% - 315px); }
.hero-proof__tag--right { --tag-r:5deg; right: calc(50% - 315px); background:#d9f99d; animation-delay:1150ms; }
.hero__support {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;
  width: min(820px,calc(100% - 48px));
  margin-inline: auto;
  opacity: var(--intro-opacity,1);
  transform: translate3d(0,var(--support-y,0px),0);
}
.hero__support > p { color:#63637a; font-size:21px; font-weight:500; line-height:1.45; text-wrap:balance; }
.hero__actions { display:flex; justify-content:center; margin-top:22px; }
.hero__support small { display:block; margin-top:12px; font-size:10px; color:#63637a; }
.hero-sales {
  position:absolute;
  top:14%;
  left:5%;
  width:min(460px,40%);
  display:grid;
  gap:20px;
  text-align:left;
  opacity:var(--sales-opacity,0);
  transform:translateY(var(--sales-y,22px));
  pointer-events:none;
}
.hero-sales .hero-label { margin:0; }
.hero-sales h2 { font:700 52px/1.03 var(--body); text-wrap:balance; }
.hero-sales p:not(.hero-label) { max-width:370px; font-size:16px; line-height:1.5; }
.hero-sales__actions { display:flex; flex-wrap:wrap; gap:20px; margin-top:5px; }
.is-sales-ready .hero-sales { pointer-events:auto; }
.is-scroll-ready .proof-card,.is-scroll-ready .hero-proof__tag { animation:none; }
@keyframes hero-fade-up { from { opacity:0; transform:translateY(26px); filter:blur(10px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes hero-proof-unfold {
  0% { opacity:0; transform:translate(-50%,-50%) translate3d(0,34px,0) rotate(0deg) scale(.78); }
  36% { opacity:1; transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg) scale(.9); }
  68% { opacity:1; transform:translate(-50%,-50%) translate3d(calc(var(--card-x)*.72),calc(var(--card-y)*.72),0) rotate(calc(var(--card-r)*.72)) scale(calc(.94 + (var(--card-s) - 1)*.55)); }
  100% { opacity:1; transform:translate(-50%,-50%) translate3d(var(--card-x),var(--card-y),0) rotate(var(--card-r)) scale(var(--card-s)); }
}
@keyframes hero-tag-pop { from { opacity:0; transform:translateY(12px) rotate(var(--tag-r)) scale(.92); } to { opacity:1; transform:translateY(0) rotate(var(--tag-r)) scale(1); } }
@media (max-width:1100px) and (min-width:721px) {
  .hero-reference h1 { font-size:44px; }
  .proof-card { width:116px; }
  .hero-proof { width:min(100%,800px); }
  .hero-proof__tag--left { left:calc(50% - 255px); }
  .hero-proof__tag--right { right:calc(50% - 255px); }
  .hero-sales h2 { font-size:38px; }
}
@media (max-width:720px) {
  .hero.hero-reference { --hero-header:72px; --hero-height:max(470px,calc(100svh - 100px)); }
  .hero-reference.has-timeline { min-height:var(--hero-height); }
  .hero__inner { position:relative; top:0; }
  .hero__copy { top:30px; left:0; right:0; width:calc(100% - 30px); margin-inline:auto; transform:translate3d(0,var(--intro-y,0px),0); }
  .hero-label { font-size:12px; margin-bottom:14px; }
  .hero-reference h1 { max-width:calc(100vw - 40px); margin-inline:auto; font-size:clamp(26px,8vw,34px); line-height:1.08; }
  .hero-mobile-break { display: initial; }
  .hero-proof { top:48%; width:calc(100% - 12px); height:190px; }
  .proof-card { width:min(22vw,88px); border-radius:10px; box-shadow:0 14px 26px #07182924; }
  .hero-proof__tag { top:10%; padding:7px 9px; font-size:10px; }
  .hero-proof__tag--left { left:26px; }
  .hero-proof__tag--right { right:26px; }
  .hero__support { left:0; right:0; width:calc(100% - 34px); margin-inline:auto; bottom:24px; transform:translate3d(0,var(--support-y,0px),0); }
  .hero__support > p { font-size:15px; line-height:1.4; }
  .hero__actions { margin-top:16px; }
  .hero__actions .button { font-size:12px; min-height:44px; padding:11px 16px; }
  .hero__support small { font-size:9px; margin-top:10px; }
  .hero-sales { top:32px; left:20px; width:calc(100% - 40px); gap:15px; text-align:center; justify-items:center; }
  .hero-sales h2 { max-width:350px; font-size:32px; }
  .hero-sales p:not(.hero-label) { max-width:345px; font-size:14px; }
  .hero-sales__actions { gap:15px; justify-content:center; margin:0; }
  .hero-sales__actions .button { min-height:44px; padding:10px 14px; font-size:12px; }
  .hero-sales__actions .text-link { font-size:12px; }
}
@media (min-width:721px) and (max-width:1000px) {
  .hero-sales { top:40px; left:50%; width:600px; text-align:center; justify-items:center; transform:translate(-50%,var(--sales-y,22px)); }
  .hero-sales h2 { max-width:560px; }
  .hero-sales p:not(.hero-label) { max-width:500px; }
  .hero-sales__actions { justify-content:center; }
}
@media (max-width:720px) and (max-height:700px) {
  .hero__copy { top:18px; }
  .hero-reference h1 { font-size:26px; }
  .hero-label { margin-bottom:10px; }
  .hero-proof { top:48%; height:150px; }
  .proof-card { width:72px; }
  .hero-proof__tag { top:0; font-size:9px; }
  .hero__support { bottom:15px; }
  .hero__support > p { font-size:13px; }
  .hero__actions { margin-top:11px; }
  .hero-sales { top:18px; gap:10px; }
  .hero-sales h2 { font-size:26px; }
  .hero-sales p:not(.hero-label) { font-size:12px; }
  .hero-sales__actions { gap:10px; }
}
@media (hover:none), (pointer:coarse) {
  .hero-reference.has-timeline { min-height:var(--hero-height); }
  .hero__inner { position:relative; top:0; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-reference.has-timeline { min-height:var(--hero-height); }
  .hero__inner { position:relative; top:0; }
}

/* ===== Responsives Layout (Claude, 22.09.): Titel, Bilderfächer und Text teilen sich die Höhe,
   die Kartengröße richtet sich nach dem verfügbaren Platz – keine Überlappung auf keinem Gerät. ===== */
.hero.hero-reference .hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(18px, 4svh, 40px) 24px clamp(16px, 3svh, 28px);
}
.hero.hero-reference .hero__copy,
.hero.hero-reference .hero__support {
  position: relative;
  top: auto; bottom: auto; left: auto; right: auto;
  flex: 0 0 auto;
}
.hero.hero-reference .hero__copy { width: min(1240px, 100%); }
.hero.hero-reference h1 { font-size: clamp(28px, min(4.3vw, 7.4svh), 58px); }
.hero.hero-reference .hero-label { margin-bottom: clamp(8px, 1.6svh, 18px); }
.hero.hero-reference .hero__support { width: min(820px, 100%); }
.hero.hero-reference .hero__support > p { font-size: clamp(14px, min(1.6vw, 2.6svh), 21px); }
.hero.hero-reference .hero__actions { margin-top: clamp(10px, 2svh, 22px); }
.hero.hero-reference .hero-proof {
  position: relative;
  top: auto; left: auto;
  flex: 1 1 0;
  min-height: 0;
  width: min(100%, 1000px);
  height: auto;
  margin-block: clamp(6px, 1.5svh, 18px);
  container-type: size;
  transform: translate3d(var(--proof-x, 0px), var(--proof-y, 0px), 0) scale(var(--proof-scale, 1));
}
/* Kartenbreite: passt in Höhe (Bild ist ca. 1,6x so hoch wie breit + Fächer-Versatz) und Breite (7 Karten) */
.hero.hero-reference .hero-proof > * {
  --cw: min(150px, calc((100cqh - 70px) / 1.72), calc(100cqw / 6.4));
}
.hero.hero-reference .proof-card { width: var(--cw); }
.hero.hero-reference .hero-proof__tag { top: max(0px, calc(50% - var(--cw) * 1.05 - 26px)); font-size: clamp(11px, calc(var(--cw) * .105), 15px); }
.hero.hero-reference .hero-proof__tag--left { left: calc(50% - var(--cw) * 2.25); }
.hero.hero-reference .hero-proof__tag--right { right: calc(50% - var(--cw) * 2.25); left: auto; }

@media (max-width: 720px) {
  .hero.hero-reference .hero__inner { padding: 22px 12px 18px; }
  .hero.hero-reference h1 { font-size: clamp(26px, 8vw, 36px); }
  .hero.hero-reference .hero-proof > * {
    --cw: min(104px, calc((100cqh - 50px) / 1.7), calc(100cqw / 4.3));
  }
  .hero.hero-reference .hero-proof__tag { padding: 7px 9px; }
  .hero.hero-reference .hero-proof__tag--left { left: 8px; }
  .hero.hero-reference .hero-proof__tag--right { right: 8px; }
}
/* Automatische Hero-Animation wie AA: auf allen Geräten kurz pinnen – die Animation spielt
   beim ersten Scroll von selbst ab und springt danach ans Ende, der Pin-Weg ist also nie spürbar. */
.hero.hero-reference.has-timeline { min-height: calc(var(--hero-height) + 30svh); }
.hero.hero-reference .hero__inner { position: sticky; top: var(--hero-header); }
@media (prefers-reduced-motion: reduce) {
  .hero.hero-reference.has-timeline { min-height: var(--hero-height); }
  .hero.hero-reference .hero__inner { position: relative; top: 0; }
}
@media (min-width: 1500px) and (min-height: 900px) {
  .hero.hero-reference .hero-proof > * { --cw: min(178px, calc((100cqh - 70px) / 1.72), calc(100cqw / 6.4)); }
}