/* Startseite — Showreel: oben die Leitarbeit des aktiven Bereichs, unten ein durchlaufender Bildstrom (Kontaktbogen),
   durch zwei Lime-Nähte in AI Photography · AI Production · AI Studio geteilt. Der aktive Abschnitt bekommt mehr Raum. */

.hm-body { background: var(--ink); }
.hm-nav { position: fixed; left: 0; right: 0; top: 0; z-index: 50; background: transparent; transition: background-color 0.4s var(--ease); }
.hm-nav.is-scrolled { background: var(--ink); } /* sobald gescrollt wird, liegt die Navigation nicht mehr über Inhalten */

.hm { --bh: clamp(118px, 19vh, 188px); --ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative; height: 100svh; min-height: 640px; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; }

/* ---------- Hero ---------- */
.hm-hero { position: relative; overflow: hidden; }
.hm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.04;
  transition: opacity 1.1s var(--ease), scale 7s linear; }
.hm-hero__img.is-on { opacity: 1; scale: 1; }
.hm-hero__img[data-hero="0"] { object-position: 50% 0%; } /* Ocean: oben anlegen, sonst fehlt der Kopf */
.hm-hero__img[data-hero="1"] { object-position: 70% 40%; }
/* Socken: Ausschnitt mit den Reglern festgelegt (Zoom 1,05 · X 0 % · Y 49 %) */
.hm-hero__img[data-hero="2"] { object-position: 0% 49%; transform-origin: 0% 49%; scale: 1.09; }
.hm-hero__img[data-hero="2"].is-on { scale: 1.05; }
/* lesbare Typo links, ruhiger Übergang unten in den Strom, leichte Abdunklung oben für die Navigation */
.hm-hero::before, .hm-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hm-hero::before { background: linear-gradient(90deg, rgb(11 11 12 / 0.82) 0%, rgb(11 11 12 / 0.45) 32%, rgb(11 11 12 / 0) 58%); }
.hm-hero::after { background: linear-gradient(180deg, rgb(11 11 12 / 0.55) 0%, rgb(11 11 12 / 0) 16%, rgb(11 11 12 / 0) 52%, var(--ink) 100%); }

.hm-copy { position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(28px, 6vh, 64px); }
.hm-copy__by { margin: 0 0 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(242 239 233 / 0.7); }
.hm-copy__h { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 4.4vw, 72px); line-height: 0.95; letter-spacing: -0.02em; }
.hm-copy__h em { font-size: 0.8333em; color: var(--mute); }
/* mit Maus übernehmen Ziffer, Säule und Claim — die Köpfe im Strom treten zurück (ohne Maus und am Handy bleiben sie) */
.hm-sec__head { transition: opacity 0.4s var(--ease); }
html.hc-in .hm-sec__head { opacity: 0; }

/* Desktop: die Headline steht groß und mittig immer auf der Seite ohne Motiv — bei 01 rechts, bei 02/03 links.
   Damit liegt sie stets in einer inaktiven Spalte und nie unter der Maus. home.js wechselt die Seite (data-side) mit Ausblenden. */
@media (min-width: 861px) {
  /* die Startseite scrollt am Desktop nicht — keine leere Scrollleisten-Spur rechts */
  html:has(.hm-body) { scrollbar-gutter: auto; }
  .hm-copy { left: clamp(64px, 9vw, 200px); top: 50%; bottom: auto; translate: 0 -50%; transition: opacity 0.45s var(--ease); } /* weiter vom Rand weg */
  .hm.is-swap .hm-copy, html.hc-in .hm-copy { opacity: 0; } /* mit Maus übernehmen Ziffer, Säule und Claim — die Headline tritt ab */
  .hm-copy__by { display: none; }
  .hm-copy__h { font-size: clamp(56px, 6.4vw, 116px); line-height: 0.82; }
  .hm-copy__h em { display: block; padding-left: 0.3em; color: var(--bone); }
  .hm[data-side="r"] .hm-copy { left: auto; right: clamp(64px, 9vw, 200px); text-align: right; }
  .hm[data-side="r"] .hm-copy__h em { padding-left: 0; }
  .hm-hero::before { transition: opacity 0.6s var(--ease); }
  .hm[data-side="r"] .hm-hero::before { background: linear-gradient(270deg, rgb(11 11 12 / 0.82) 0%, rgb(11 11 12 / 0.45) 32%, rgb(11 11 12 / 0) 58%); }
}

/* ---------- Bildstrom ---------- */
.hm-band { display: grid; grid-template-columns: 46fr 27fr 27fr; transition: grid-template-columns 0.9s var(--ease); }
.hm[data-active="1"] .hm-band { grid-template-columns: 27fr 46fr 27fr; }
.hm[data-active="2"] .hm-band { grid-template-columns: 27fr 27fr 46fr; }
.hm-sec { position: relative; display: block; min-width: 0; overflow: hidden; padding: 50px 0 24px; color: inherit; }
.hm-sec + .hm-sec { box-shadow: inset 1.5px 0 0 var(--lumen); } /* die Naht */
.hm-sec__head { position: absolute; left: 18px; top: 14px; z-index: 1; display: flex; align-items: baseline; gap: 16px; white-space: nowrap; }
.hm-sec:first-child .hm-sec__head { left: var(--gutter); }
.hm-sec__no { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); transition: color 0.4s var(--ease); } /* inaktiv hell, aktiv Lime */
.hm-sec__head em { display: none; } /* Claim nur im Highlight (Säule, home-cursor.js liest ihn von hier) */
.hm-sec[aria-current="true"] .hm-sec__no { color: var(--lumen); }

/* Spur: der Inhalt steht doppelt, home.js schiebt ihn endlos nach links; die Abschnitte schneiden ihn an den Nähten ab */
.hm-track { display: flex; gap: 6px; width: max-content; padding-left: 10px; will-change: transform; }
.hm-sec:first-child .hm-track { padding-left: 0; }
.hm-sec + .hm-sec .hm-track { margin-left: 1.5px; }
.hm-sec > .hm-track { position: relative; }
.hm-f { margin: 0; flex: none; transition: opacity 0.6s var(--ease); }
.hm-f img { display: block; height: var(--bh); width: auto; object-fit: cover; }
.hm-f--src img { outline: 1.5px solid var(--lumen); outline-offset: -1.5px; }
.hm-sec:not([aria-current="true"]) .hm-f { opacity: 0.4; }

.hm-legal { display: flex; justify-content: flex-end; gap: 22px; margin: 0; padding: 14px var(--gutter) 16px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.hm-legal a { color: var(--mute); transition: color 0.3s var(--ease); }
.hm-legal a:hover { color: var(--bone); }

/* ---------- Handy: Hero oben, darunter die drei Spuren übereinander ---------- */
@media (max-width: 860px) {
  .hm { --bh: 132px; height: auto; min-height: 0; grid-template-rows: auto auto auto; }
  .hm-hero { height: 64svh; min-height: 420px; }
  /* Headline wie am Desktop (weiß, zweite Zeile versetzt), hier zentriert; ohne Absenderzeile */
  .hm-copy { left: var(--gutter); right: var(--gutter); text-align: center; }
  .hm-copy__by { display: none; }
  .hm-copy__h { font-size: 48px; line-height: 0.86; }
  /* Hochformat-Ausschnitte: Motiv in die Mitte holen */
  .hm-hero__img[data-hero="0"] { object-position: 21% 0%; }
  .hm-hero__img[data-hero="2"] { object-position: 67% 49%; }
  .hm-copy__h em { display: block; padding-left: 0.9em; color: var(--bone); }
  .hm-band, .hm[data-active] .hm-band { grid-template-columns: 1fr; }
  .hm-sec + .hm-sec { box-shadow: inset 0 1.5px 0 var(--lumen); }
  .hm-sec { padding: 46px 0 18px; }
  .hm-sec__head, .hm-sec:first-child .hm-sec__head { left: var(--gutter); }
  .hm-track, .hm-sec:first-child .hm-track { padding-left: var(--gutter); }
  .hm-sec:not([aria-current="true"]) .hm-f { opacity: 0.75; }
  .hm-legal { justify-content: flex-start; flex-wrap: wrap; gap: 10px 20px; }
}
/* ---------- Handy: drei Felder übereinander, die Seite scrollt nicht ---------- */
.hm-m { display: none; }
@media (max-width: 860px) {
  .hm { height: 100svh; min-height: 520px; padding-top: var(--nav-h); grid-template-rows: minmax(0, 1fr) auto; }
  .hm-nav { background: var(--ink); }
  .hm-hero, .hm-band { display: none; }
  .hm-m { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; min-height: 0; }
  .hm-m__a { position: relative; display: grid; place-content: center; justify-items: center; overflow: hidden; color: var(--bone); }
  .hm-m__a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hm-m__a::after { content: ""; position: absolute; inset: 0; background: rgb(11 11 12 / 0.18); } /* leichte Abdunklung für die Schrift */
  .hm-m__no, .hm-m__t { position: relative; z-index: 1; }
  .hm-m__no { font: 400 clamp(96px, 15svh, 150px)/0.8 var(--serif); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.2px var(--lumen); }
  .hm-m__t { margin-top: 12px; font: 400 11px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; text-shadow: 0 1px 10px rgb(11 11 12 / 0.6); }
  .hm-legal { padding-block: 10px 12px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hm-hero__img { transition: opacity 0.4s; scale: 1 !important; } }

/* ---------- Zeiger (home-cursor.js, nur Desktop) ---------- */
.hc-nocursor, .hc-nocursor * { cursor: none; }
/* Säule: rundherum abdunkeln, bis zum unteren Rand; die Rechtszeile liegt darüber */
.hc-col { position: fixed; z-index: 40; pointer-events: none; opacity: 0; box-shadow: 0 0 0 200vw rgb(11 11 12 / 0.62); }
.hc-col__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; padding: 0 18px; background: var(--lumen); color: var(--ink); overflow: hidden; }
.hc-col { container-type: inline-size; }
/* Claim in der aktiven Säule: groß und kursiv, unten über dem Bildstrom; passt sich der Säulenbreite an */
.hc-col__claim { position: absolute; left: clamp(20px, 3.2cqi, 48px); right: 12px; display: grid; }
.hc-col__claim em { grid-area: 1 / 1; white-space: nowrap; font: italic 400 min(68px, 6.4cqi)/1 var(--serif); letter-spacing: -0.02em; color: var(--lumen);
  opacity: 0; translate: 0 0.3em; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), translate 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.hc-col__claim em.is-on { opacity: 1; translate: 0 0; }
.hc-col__t { font: 400 10px/1 var(--mono); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
html.hc-in .hm-legal { position: relative; z-index: 45; mix-blend-mode: difference; } /* Impressum & Co. liegen über Abdunklung und Balken */
html.hc-in .hm-legal a { color: var(--bone); } /* auf Lime dunkel, auf Schwarz hell */
/* Ziffer an der Maus */
.hc-num { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.hc-num.is-on { opacity: 1; }
.hc-num__dot { transition: opacity 0.3s; }
.hc-num:not(.is-on) .hc-num__dot { opacity: 0; }
/* Ziffer und Name als Einheit, mittig um die Maus: Umriss-Ziffer, darunter der Bereichsname in Lime */
.hc-num__lock { position: absolute; left: 0; top: 0; transform: translate(-50%, -150px); display: flex; flex-direction: column; align-items: center; }
.hc-num__win { height: 1em; clip-path: inset(0 -0.25em); /* nur oben/unten beschneiden — die „2“ ragt rechts über ihre Laufweite */ font: 400 300px/1 var(--serif); }
.hc-num__roll { display: flex; flex-direction: column; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px var(--lumen); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.hc-num__roll b { display: block; height: 1em; font-weight: 400; }
.hc-num__t { position: relative; margin-top: -54px; padding: 15px 22px 14px; white-space: nowrap; font: normal 600 22px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lumen); text-shadow: 0 2px 18px rgb(11 11 12 / 0.55); }
.hc-num__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--lumen); }




/* Anzeige im Production-Strom: Werbetext liegt über dem Motiv (wie auf der AI-Production-Seite) */
.hm-f--ad { position: relative; container-type: inline-size; width: calc(var(--bh) * 362 / 450); } /* Containerbreite muss feststehen, sonst fällt die Figur auf 0 */
.hm-ad { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14cqi 8cqi; color: #fff; pointer-events: none; }
.hm-ad__kick { font-family: var(--mono); font-size: 4cqi; letter-spacing: 0.16em; text-transform: uppercase; }
.hm-ad__h { margin-top: 3cqi; font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.84; font-size: 17cqi; }