/* About — Hero: Bildstreifen als Förderband hinter dem freigestellten Porträt.
   Links der Naht echte Fotografie, rechts davon KI-Arbeiten; die Naht sitzt unter dem Porträt (--seam). */

/* ---------- 1 · Hero ---------- */
/* Hierarchie: Aussage zuerst, dann die Arbeiten (breites Band), dann ich — als ein Rahmen im Band, genau auf der Naht. */
.ab-hero { --seam: 62%; --seam-me: var(--seam); --seam-line: var(--seam); --seam-lab: var(--seam); --seam-follow: var(--seam); /* about.js bewegt sie unterschiedlich schnell: ich vorn, Linie, Texte ziehen nach */ --bb: clamp(110px, 16vh, 160px); --lift: clamp(44px, 10vh, 100px); /* Band kleiner, Porträt gleich groß: ich rage weiter darüber hinaus */ position: relative; height: max(680px, calc(100svh - var(--nav-h))); overflow: hidden; isolation: isolate; }
.ab-hero__copy { position: absolute; z-index: 3; left: var(--gutter); top: clamp(20px, 4vh, 56px); }
.ab-hero .display { margin: 18px 0 20px; font-size: clamp(52px, 6.6vw, 112px); }
.ab-hero .display em { font-size: 0.8333em; }
.ab-hero__sub { margin: 0; white-space: nowrap; font-size: 16px; line-height: 1.55; color: #a39f98; }

/* Band: zwei Spuren laufen gleich schnell nach rechts; die Foto-Spur endet an der Naht, die KI-Spur beginnt dort */
.ab-band { position: absolute; z-index: 1; left: 0; right: 0; bottom: var(--bb); height: clamp(180px, 25vh, 270px); }
.ab-band__track { position: absolute; inset: 0; overflow: hidden; }
.ab-band__track--photo { clip-path: inset(0 calc(100% - var(--seam-line)) 0 0); }
.ab-band__track--ai { clip-path: inset(0 0 0 var(--seam-line)); }
.ab-band__run { display: flex; gap: 12px; width: max-content; height: 100%; will-change: transform; }
.ab-band__run img { height: 100%; aspect-ratio: 3 / 4; object-fit: cover; flex: none; }
.ab-band__track--ai .ab-band__run img { outline: 1px solid rgb(226 255 79 / 0.25); outline-offset: -1px; }
.ab-band__label { position: absolute; z-index: 3; top: calc(-1 * var(--lift) - 16px); margin: 0; white-space: nowrap; font-size: 10px; letter-spacing: 0.12em; }
.ab-band__label--l { right: calc(100% - var(--seam-lab) + 26px); color: rgb(242 239 233 / 0.7); }
.ab-band__label--r { left: calc(var(--seam-lab) + 26px); color: var(--lumen); }

/* Ich: freigestellt auf der Naht, über dem Band, bis zur Unterkante, schwarzweiß.
   Die Gesichtsmitte liegt bei 45,5 % der Bildbreite — so verschoben, dass die Naht mittig durchs Gesicht läuft. --lift = wie weit ich übers Band rage */
.ab-me { position: absolute; z-index: 2; left: var(--seam-me); bottom: calc(-1 * var(--bb)); height: calc(100% + var(--bb) + var(--lift)); aspect-ratio: 1131 / 985; translate: -45.5% 0; pointer-events: none; }
.ab-me--m2 { display: none; }
.ab-me img { position: absolute; inset: 0; width: 100%; height: 100%; filter: grayscale(1) contrast(1.06); }
/* RGB-Split wie beim Astronauten (AI Photography): nur solange ich mich bewege */
/* Die Naht: Lime-Linie von der Beschriftung (über meinem Kopf) bis zur Unterkante */
.ab-seam { position: absolute; z-index: 3; left: var(--seam-line); top: calc(-1 * var(--lift) - 22px); bottom: calc(-1 * var(--bb)); width: 1.5px; translate: -50% 0; background: var(--lumen); }
/* „Follow my path“ — unten, auf einer Linie mit „Expanded with AI“; Lime-Pfeil wie bei „Rather shoot without AI?“, wippt bis zum Scrollen */
.ab-follow { position: absolute; z-index: 3; left: calc(var(--seam-follow) + 26px + 20px); bottom: 28px; font-size: 10px; letter-spacing: 0.12em; color: var(--lumen); }
.ab-follow::before { content: ""; position: absolute; left: -20px; top: 50%; width: 10px; height: 8px; margin-top: -4px; background: var(--lumen); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ab-hero:not(.is-followed) .ab-follow { animation: ab-follow-bob 6.5s ease-in-out 2s infinite; }
@keyframes ab-follow-bob { 0%, 7.7%, 15.4%, 23%, 100% { translate: 0 0; } 3.8%, 11.5% { translate: 0 -6px; } 19.2% { translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) { .ab-follow { animation: none !important; } }
.ab-hero__facts { position: absolute; z-index: 3; left: var(--gutter); bottom: 28px; max-width: calc(var(--seam) - 24vw); margin: 0; line-height: 1.8; font-size: 10px; letter-spacing: 0.12em; color: var(--mute); }

/* ---------- 2 · Der Weg — eine Linie aus dem Hero, organisch durch vier Stationen, am Ende verzweigt ---------- */
/* Jede Station hat ihr eigenes --x (Lage der Linie). Links davon Bild + Name, rechts der Text. about.js zeichnet den Pfad. */
.ab-tl { position: relative; padding-bottom: clamp(56px, 9vh, 96px); }
.ab-tl__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ab-tl__svg path { fill: none; stroke: var(--lumen); stroke-width: 1.5; }
.ab-tl__svg circle { fill: var(--lumen); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ab-tl__svg circle.is-on { transform: scale(1); }
.ab-tl__intro { padding: clamp(64px, 10vh, 110px) 50% clamp(24px, 4vh, 48px) var(--gutter); text-align: right; margin-right: 2%; } /* links der Linie, die von der Naht nach links zur ersten Station schwingt */
.ab-tl__intro h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3vw, 52px); line-height: 0.98; letter-spacing: -0.02em; }
.ab-tl__intro h2 em { font-size: 0.8333em; }

.ab-st { --pad: clamp(64px, 11vh, 120px); --gl: clamp(100px, 8.5vw, 150px); --gt: clamp(72px, 6.5vw, 110px); position: relative; display: grid; grid-template-columns: var(--x) minmax(0, 1fr); align-items: center; padding: var(--pad) 0; }
.ab-st__node { position: absolute; left: var(--x); top: 50%; width: 0; height: 0; }
.ab-st__tag { position: absolute; right: calc(100% - var(--x) + 22px); top: 50%; translate: 0 -50%; margin: 0; font-size: 10px; letter-spacing: 0.12em; color: var(--lumen); }
.ab-st__media { grid-column: 1; grid-row: 1; justify-self: end; margin: 0 var(--gl) 0 var(--gutter); }
.ab-st__media img { display: block; width: 100%; object-fit: cover; }
.ab-st__text { grid-column: 2; grid-row: 1; padding: 0 var(--gutter) 0 var(--gt); }
.ab-st h3 { margin: -0.12em 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4vw, 66px); line-height: 0.95; letter-spacing: -0.02em; }
.ab-st h3 em { display: block; font-size: 0.8333em; }
.ab-st__text p { margin: 22px 0 0; max-width: 380px; font-size: 15px; line-height: 1.6; color: #a39f98; }

/* Gespiegelt: Text links der Linie, Bild + Name rechts — die Linie schwingt zwischen den Seiten */
.ab-st--flip .ab-st__tag { right: auto; left: calc(var(--x) + 22px); }
.ab-st--flip .ab-st__media { grid-column: 2; justify-self: start; margin: 0 var(--gutter) 0 var(--gl); }
.ab-st--flip .ab-st__text { grid-column: 1; justify-self: end; max-width: 100%; padding: 0 var(--gt) 0 var(--gutter); text-align: right; }
.ab-st--flip .ab-st__text p { margin-left: auto; }

/* 01 Fotografie: ein starkes Bild */
.ab-st--photo .ab-st__media { width: clamp(260px, 23vw, 360px); }
.ab-st--photo .ab-st__media img { aspect-ratio: 1 / 1; } /* Kai Baum: quadratisch, die Hände am Rand gehören zum Bild */
/* 02 Retusche: Quelle → Retusche → Composite */
.ab-steps { width: min(calc(100% - var(--gutter) - var(--gl)), 520px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); }
.ab-steps figure { margin: 0; }
.ab-steps img { aspect-ratio: 2 / 3; }
.ab-steps__cut img { background: repeating-conic-gradient(#2a2a2d 0 25%, #1f1f22 0 50%) 0 0 / 14px 14px; }
.ab-st--photo figcaption, .ab-mosaic__cap, .ab-steps figcaption, .ab-morph figcaption { margin-top: 10px; font-size: 10px; letter-spacing: 0.12em; color: var(--mute); }
/* 02 Retusche: Vorher/Nachher-Regler */
.ab-ba { position: relative; width: min(calc(100% - var(--gutter) - var(--gl)), 440px); aspect-ratio: 4 / 5; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ab-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ab-ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ab-ba__tag { position: absolute; top: 12px; padding: 3px 6px; background: rgb(11 11 12 / 0.7); color: var(--bone); font-size: 9px; letter-spacing: 0.12em; pointer-events: none; }
.ab-ba__tag--l { left: 12px; } .ab-ba__tag--r { right: 12px; color: var(--lumen); }
.ab-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--lumen); outline: none; }
.ab-ba__handle i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; translate: -50% -50%; border-radius: 50%; background: var(--lumen); box-shadow: 0 4px 18px rgb(0 0 0 / 0.35); transition: scale 0.25s var(--ease); }
.ab-ba__handle i::before, .ab-ba__handle i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.ab-ba__handle i::before { left: 7px; border-right: 6px solid var(--ink); border-left: 0; }
.ab-ba__handle i::after { right: 7px; border-left: 6px solid var(--ink); border-right: 0; }
.ab-ba:hover .ab-ba__handle i, .ab-ba__handle:focus-visible i, .ab-ba.is-drag .ab-ba__handle i { scale: 1.12; }

/* 03 Produktion: eine Serie, 2 × 2 */
.ab-mosaic { width: min(calc(100% - var(--gutter) - var(--gl)), 440px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 0.8vw, 12px); }
.ab-mosaic img { aspect-ratio: 4 / 5; }
.ab-mosaic__cap { grid-column: 1 / -1; margin: 0; }
/* 04 Generative KI: dasselbe Foto wird zu neuen Welten — alles davor auf einmal */
.ab-morph { position: relative; width: min(calc(100% - var(--gutter) - var(--gl)), 640px); }
.ab-morph img { aspect-ratio: 16 / 10; object-position: 57% 45%; }
.ab-morph__top { position: absolute; left: 0; top: 0; height: auto; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 0.3s, clip-path 1s var(--ease); }
.ab-morph.is-ai .ab-morph__top { opacity: 1; clip-path: inset(0 0 0 0); }
.ab-morph.is-ai figcaption { color: var(--lumen); }

/* Verzweigung: drei Enden, die Linie führt in die Angebote */
.ab-br { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: clamp(130px, 17vh, 180px) 0 0; margin-left: 16%; margin-right: 16%; } /* Fächer mittig auf der Seite, die Gabel sitzt in der Seitenmitte */
.ab-br a { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 22px 12px 14px; }
.ab-br [data-end] { position: absolute; left: 50%; top: 0; width: 0; height: 0; }
.ab-br span { font-family: var(--serif); font-size: clamp(26px, 2.4vw, 38px); line-height: 1; color: rgb(242 239 233 / 0.72); transition: color 0.5s var(--ease); }
.ab-br em { font-family: var(--serif); font-size: 17px; color: var(--mute); transition: color 0.5s var(--ease); }
/* „Explore →“: erscheint nur am gewählten Ende */
.ab-br__go { margin-top: 8px; font-weight: 400; font-size: 10px; letter-spacing: 0.12em; color: var(--lumen); opacity: 0; translate: 0 -4px; transition: opacity 0.4s var(--ease), translate 0.4s var(--ease); }
.ab-br a:is(:hover, :focus-visible) span { color: var(--bone); }
.ab-br a:is(:hover, :focus-visible) em { color: #a39f98; }
.ab-br a:is(:hover, :focus-visible) .ab-br__go { opacity: 1; translate: 0 0; transition-delay: 0.25s; }
.ab-br a:focus-visible { outline: none; }
/* Äste: ruhig im Grundzustand; beim Hover läuft ein feiner, kräftigerer Strich von der Gabel zum gewählten Ende */
.ab-tl__svg path.ab-br__line { opacity: 0.5; transition: opacity 0.5s var(--ease); }
.ab-tl__svg path.ab-br__hot { stroke-width: 2.25; stroke-linecap: round; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 0.75s cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; }
.ab-tl__svg path.ab-br__hot.is-hot { stroke-dashoffset: 0; }
.ab-tl__svg circle.ab-br__node { opacity: 0.7; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s var(--ease); }
.ab-tl__svg circle.ab-br__node.is-on.is-hot { opacity: 1; transform: scale(1.35); transition-delay: 0.45s, 0.45s; }


/* Stationen kommen erst, wenn die Linie ihren Punkt erreicht: Punkt + Name, dann Text, dann Bild */
:root.has-reveal .ab-st .ab-st__media, :root.has-reveal .ab-st .ab-st__text { opacity: 0; translate: 0 28px; transition: opacity 0.9s var(--ease), translate 0.9s var(--ease); }
:root.has-reveal .ab-st.is-reached .ab-st__media, :root.has-reveal .ab-st.is-reached .ab-st__text { opacity: 1; translate: 0 0; }
:root.has-reveal .ab-st.is-reached .ab-st__media { transition-delay: 0.12s; }
:root.has-reveal .ab-st__tag { opacity: 0; transition: opacity 0.5s var(--ease); }
:root.has-reveal .ab-st.is-reached .ab-st__tag { opacity: 1; }
:root.has-reveal .ab-br a { opacity: 0; translate: 0 10px; transition: opacity 0.6s var(--ease), translate 0.6s var(--ease); }
:root.has-reveal .ab-br a.is-reached { opacity: 1; translate: 0 0; }
/* sanftes Erscheinen beim Scrollen */
:root.has-reveal [data-reveal] { opacity: 0; translate: 0 32px; transition: opacity 1s var(--ease), translate 1s var(--ease); }
:root.has-reveal [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ---------- Tablet / Handy ---------- */
@media (max-width: 860px) {
  .ab-hero__sub { white-space: normal; font-size: 15px; max-width: 32ch; }
  .ab-hero { --seam: 50%; height: auto; min-height: 0; padding: 28px var(--gutter) 0; }
  .ab-hero__copy { position: static; }
  .ab-hero .display { font-size: 46px; margin: 16px 0 16px; }
  .ab-hero { --bb: 0px; }
  /* Handy: zwei Spuren übereinander — oben Fotografie, unten KI. Das Porträt ist geteilt:
     eine Hälfte am rechten Rand der oberen Spur, die andere am linken Rand der unteren. Keine Naht im Hero. */
  .ab-band { --rh: 132px; --rg: 70px; position: relative; bottom: auto; height: auto; margin: 64px calc(-1 * var(--gutter)) 0; display: grid; gap: var(--rg); padding-bottom: 96px; }
  .ab-band__track { position: relative; inset: auto; height: var(--rh); clip-path: none !important; }
  .ab-band__label { top: auto; z-index: 3; font-size: 9.5px; }
  .ab-band__label--l { right: 42%; left: auto; top: calc(var(--rh) + 16px); }
  .ab-band__label--r { left: 50%; right: auto; top: calc(2 * var(--rh) + var(--rg) + 16px); }
  .ab-me { left: 100%; bottom: auto; top: calc(var(--rh) + 70px - 300px); height: 300px; }
  .ab-me--m2 { display: block; left: 0; top: calc(var(--rh) + var(--rg) - 92px); }
  .ab-seam { display: none; }
  .ab-hero__facts { position: relative; left: auto; bottom: auto; max-width: none; margin: 18px 0 0; line-height: 1.8; }
  /* Handy: Linie links, Inhalt rechts davon */
  .ab-tl__intro { padding: 56px var(--gutter) 24px calc(var(--gutter) + 34px); text-align: left; }
  .ab-st { --x: calc(var(--gutter) + 6px) !important; display: block; padding: 44px var(--gutter) 44px calc(var(--gutter) + 34px); }
  .ab-st__node, .ab-st__tag { top: 52px; }
  .ab-st__tag { position: static; translate: none; margin: 0 0 16px; }
  .ab-st__node { left: calc(var(--gutter) + 6px); top: 50px; }
  .ab-st__text, .ab-st--flip .ab-st__text { padding: 0; text-align: left; justify-self: stretch; }
  .ab-st--flip .ab-st__text p { margin-left: 0; }
  .ab-st--flip .ab-st__media { margin: 26px 0 0; }
  .ab-st h3 { font-size: 38px; }
  .ab-st__media { margin: 26px 0 0; width: 100% !important; }
  .ab-st--photo .ab-st__media { width: 78% !important; }
  .ab-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-ba { width: 100%; }
  .ab-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-st__media { order: 2; }
  .ab-st { display: flex; flex-direction: column; align-items: stretch; }
  .ab-br { grid-template-columns: 1fr; gap: 26px; margin: 0; padding: 40px var(--gutter) 0 calc(var(--gutter) + 34px); }
  .ab-br a { justify-items: start; text-align: left; padding: 0; }
  .ab-br [data-end] { left: -28px; top: 0.6em; }
}
@media (prefers-reduced-motion: reduce) {
  :root.has-reveal [data-reveal], :root.has-reveal .ab-st .ab-st__media, :root.has-reveal .ab-st .ab-st__text, :root.has-reveal .ab-st__tag, :root.has-reveal .ab-br a { opacity: 1; translate: none; }
}