/* =========================================================
   Hero-Variante "motion" (Korrektur 2) – nur geladen, wenn aktiv.
   Grundzustand = ruhiger Endzustand (ohne JS / reduzierte Bewegung).
   ========================================================= */
.hm{position:relative;display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);min-height:max(100svh,640px);background:var(--ink);color:#fff;isolation:isolate;overflow:hidden}

/* --- Textspalte: sofort lesbar, wird nicht animiert --- */
.hm__text{position:relative;z-index:2;container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--header-h) + clamp(2rem,8vh,6rem)) clamp(1.5rem,3.2vw,3.5rem) clamp(3rem,11vh,7rem) max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)))}
.hm__kicker{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:0 0 1.8rem;font:600 .78rem/1 var(--f-text);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.hm__kicker span{display:inline-flex;align-items:center;gap:1.1rem}
.hm__kicker span+span::before{content:"";width:6px;height:6px;background:var(--red)}
.hm__title{display:flex;flex-direction:column;gap:.7rem;margin:0 0 1.8rem;text-transform:uppercase}
/* mind. 1.2rem fett = großer Text: Markenrot auf Schwarz erreicht so WCAG AA (3,58:1 ≥ 3:1) */
.hm__title-small{font:700 clamp(1.2rem,.8rem + .9vw,1.6rem)/1 var(--f-display);letter-spacing:.14em;color:var(--red)}
/* an die Textspalte gekoppelt: "GRUNDSTÜCK" (--fit = Breite in em) passt immer mit 6 % Reserve hinein;
   der rechte Spaltenabstand (≥ 24 px) zur Trennlinie bleibt dadurch frei */
.hm__title-big{display:block;--fs:clamp(2.9rem,1rem + 5.3vw,7.6rem);font-size:var(--fs);font-size:min(var(--fs),calc(94cqi / var(--fit,.01)));font-weight:800;line-height:.86;letter-spacing:-.005em;max-width:4.6em}
.hm__lead{max-width:40ch;margin:0;font-size:clamp(1.1rem,1rem + .4vw,1.4rem);line-height:1.45;color:rgba(255,255,255,.86);text-wrap:pretty}
.hm__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
@media (min-width:1280px){.hm__actions{flex-wrap:nowrap}.hm__actions .btn{white-space:nowrap;padding-inline:clamp(1rem,1.6vw,1.9rem)}}
.hm .btn--line{--b:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.hm .btn--line:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* --- Bildbühne --- */
.hm__stage{position:relative;overflow:hidden;background:var(--ink);container-type:inline-size}
.hm__tile,.hm__slide,.hm__img,.hm__shade,.hm__fx{position:absolute;inset:0}
.hm__img picture,.hm__img img{display:block;width:100%;height:100%;object-fit:cover}
/* Endzustand: drei Felder nebeneinander, Bildmitte jeweils im eigenen Feld */
.hm__tile--1{clip-path:inset(0% 66.967% 0% 0%)}
.hm__tile--2{clip-path:inset(0% 33.633% 0% 33.633%)}
.hm__tile--3{clip-path:inset(0% 0% 0% 66.967%)}
.hm__tile--1 .hm__img{transform:translateX(-33.333%)}
.hm__tile--3 .hm__img{transform:translateX(58%)}
.hm__tile--1 img{object-position:50% 60%}
.hm__tile--2 img{object-position:50% 50%}
.hm__tile--3 img{object-position:50% 40%}
.hm__tile--2 .hm__slide::before{content:"";position:absolute;inset:0 auto 0 0;width:8px;background:var(--red);z-index:1}
.hm__shade{pointer-events:none;background:linear-gradient(180deg,rgba(14,14,14,.62) 0,rgba(14,14,14,0) 24%,rgba(14,14,14,0) 52%,rgba(14,14,14,.8) 100%)}

/* Effekt-Ebene (nur während der Animation sichtbar) */
.hm__fx{pointer-events:none}
.hm__slats,.hm__bars,.hm__arm,.hm__wipe,.hm__word{visibility:hidden}
.hm__slats{position:absolute;inset:0;display:flex}
.hm__slats i{flex:1 1 0;background:var(--ink);margin-right:-1px}
.hm__bars{position:absolute;inset:0}
.hm__bars i{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#8d969c}
.hm__bars b{position:absolute;left:0;right:0;height:3px;background:#8d969c}
.hm__arm{position:absolute;left:23%;top:64%;width:70%;height:clamp(12px,2.3cqw,22px);transform:translateY(-50%);background:repeating-linear-gradient(90deg,#fff 0 13%,var(--red) 13% 25%);transform-origin:0 50%}
.hm__wipe{position:absolute;inset:0;background:var(--red);transform-origin:0 50%}
.hm__word{position:absolute;left:5cqw;bottom:4.5cqw;margin:0;overflow:hidden;padding:.04em .1em .02em 0;font:800 19cqw/.8 var(--f-display);letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.hm__word span{display:block}
.hm__word span::after{content:"";display:inline-block;width:.15em;height:.15em;margin-left:.05em;background:var(--red)}

/* Pfosten-Linie zwischen Text und Bühne */
.hm__post{position:absolute;inset:0 auto 0 0;width:6px;background:var(--red);z-index:3;transform-origin:50% 0}

/* Beschriftung Endzustand */
.hm__caps{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none}
.hm__caps li{padding:0 1.4rem 1.6rem}
.hm__caps a{display:inline-flex;align-items:baseline;gap:.55em;min-height:44px;padding-top:.8rem;color:#fff;text-decoration:none;font:800 1.6rem/1 var(--f-display);letter-spacing:.04em;text-transform:uppercase}
.hm__caps a::after{content:"→";color:var(--red);transition:transform .25s var(--ease)}
.hm__caps a:hover::after,.hm__caps a:focus-visible::after{transform:translateX(.25em)}
.hm__num{font:600 .55em/1 var(--f-text);letter-spacing:.12em;color:rgba(255,255,255,.7)}

/* Steuerung (Pause / Abspielen / Wiederholen), nur mit JS */
.hm__ctl{position:absolute;right:clamp(.75rem,2cqw,1.5rem);top:calc(var(--header-h) + .75rem);z-index:4;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:var(--r);background:rgba(14,14,14,.6);color:#fff;cursor:pointer}
.hm__ctl[hidden]{display:none}
.hm__ctl:hover{border-color:#fff}
.hm__ctl path{fill:currentColor;display:none}
.hm__ctl[data-state="playing"] .i-pause,.hm__ctl[data-state="paused"] .i-play,.hm__ctl[data-state="done"] .i-replay{display:block}

/* Vor dem Start der Animation: Bühne abgedeckt statt Endzustand-Flackern.
   Fallback: Läuft kein Skript, wird die Abdeckung nach 2,5 s entfernt. */
@media (prefers-reduced-motion:no-preference){
  .js .hm:not(.hm--static) .hm__slats{visibility:visible;animation:hm-uncover 0s 2.5s forwards}
  .js .hm.hm--run .hm__slats{animation:none}
}
@keyframes hm-uncover{to{visibility:hidden}}

@media (min-width:1001px) and (max-width:1279px){
  .hm{grid-template-columns:minmax(0,47fr) minmax(0,53fr)}
  .hm__title-big{--fs:clamp(2.9rem,.5rem + 5.4vw,5.2rem)}
  .hm__text{padding-bottom:clamp(2.5rem,8vh,5rem)}
}

/* --- Tablet / Mobil: Bühne oben, Text darunter --- */
@media (max-width:1000px){
  .hm{grid-template-columns:minmax(0,1fr);min-height:0}
  .hm__stage{order:-1;height:calc(var(--header-h) + clamp(220px,34svh,460px))}
  .hm__text{justify-content:flex-start;padding:1.6rem var(--gutter) 2.6rem}
  .hm__post{inset:auto 0 0 0;width:auto;height:5px;transform-origin:0 50%}
  .hm__tile--2 .hm__slide::before{display:none}
  .hm__slats i:nth-child(n+7){display:none}
  .hm__caps li{padding:0 1rem .9rem}
  .hm__caps a{font-size:1.3rem}
  .hm__ctl{top:calc(var(--header-h) + .5rem)}
}
@media (max-width:700px){
  .hm__kicker{display:none}
  .hm__title{gap:.5rem;margin-bottom:1.2rem}
  .hm__title-small{letter-spacing:.08em}
  .hm__lead{font-size:1.05rem}
  .hm__actions{margin-top:1.4rem}
  .hm__actions .btn{flex:1 1 auto}
  .hm__num{display:none}
  .hm__caps a{font-size:1rem;letter-spacing:.06em}
}