/* Interaktiver Hero (Parallax-Studio) der Startseite */

/* ---------- Hero ---------- */
.ap-hero {
  position: relative;
  height: calc(100svh - var(--nav-h));
  min-height: 640px;
  overflow: hidden;
  background: var(--ink-3);
}
.ap-stage { position: absolute; inset: 0; overflow: hidden; }

/* Ebenen sind gleich groß (3840×2160) und liegen mit identischem cover-Ausschnitt übereinander.
   -6 % Überstand, damit beim Verschieben keine Kanten sichtbar werden. */
.ap-layers {
  position: absolute; inset: -6%;
  transition: opacity 0.7s var(--ease);
}
.ap-layers[hidden] { display: block; opacity: 0; pointer-events: none; }
/* Olga lädt nach: Hintergrund steht schon, kleiner Hinweis an ihrer Stelle, dann blendet sie ein (ai-photography.js) */
.ap-layers.is-late .ap-subject.is-active { opacity: 0; }
.ap-late { position: absolute; z-index: 3; left: 61%; top: 50%; translate: -50% -50%; margin: 0; white-space: nowrap; pointer-events: none;
  font-size: 11px; color: var(--ink); opacity: 0; transition: opacity 0.4s var(--ease); }
.ap-late.is-on { opacity: 0.7; animation: ap-late 1.6s ease-in-out infinite; }
@keyframes ap-late { 50% { opacity: 0.3; } }
@media (max-width: 860px) { .ap-late { left: 50%; } }
.ap-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--rot, 0deg));
  will-change: transform;
  user-select: none; -webkit-user-drag: none;
}
/* Olga etwas kleiner als im Original; skaliert um ihre Mitte, damit sie mittig im Bild bleibt */
.ap-figure { scale: var(--subject-scale, 0.92); transform-origin: 61% 50%; }
.ap-subject { opacity: 0; transition: opacity 0.7s var(--ease); }
.ap-subject.is-active { opacity: 1; }

/* Ocean in WebGL: Canvas liegt über den Ebenen und blendet ein; danach werden die DOM-Ebenen ausgeblendet.
   Ohne WebGL bleibt alles wie gehabt. */
.ap-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.7s var(--ease); }
.ap-gl.is-on { opacity: 1; }
.ap-layers.is-gl > .ap-layer { visibility: hidden; }

/* Ocean: Vordergrund-Partikel größer, damit sie bei starker Bewegung das Bild nie freigeben */
.ap-layer.ap-fg-big { scale: 1.25; }

/* RGB-Split (Space): nur aktiv, solange sich etwas bewegt */
.ap-layers.is-ca { filter: url(#ap-ca); }

/* Lensflare (Space): Positionen setzt das JS, Stärke über --i (Bewegung) und --sun (Grundglühen) */
.ap-flare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; --i: 0; --sun: 0.35; }
.ap-flare > span {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0) translate(-50%, -50%);
  will-change: transform, opacity;
}
.ap-flare__sun {
  width: 46vw; height: 46vw;
  background: radial-gradient(circle,
    rgb(255 252 240 / 0.95) 0%, rgb(255 226 170 / 0.45) 6%, rgb(255 180 110 / 0.14) 20%,
    rgb(255 150 90 / 0.04) 38%, transparent 62%);
  opacity: calc(var(--sun) + var(--i) * 0.5);
}
.ap-flare__streak {
  width: 120vw; height: 3px; border-radius: 0;
  background: linear-gradient(90deg, transparent 0%, rgb(140 200 255 / 0.25) 30%, rgb(220 240 255 / 0.9) 50%, rgb(140 200 255 / 0.25) 70%, transparent 100%);
  filter: blur(0.6px);
  opacity: calc(0.15 + var(--i) * 0.75);
}
.ap-flare__ghost {
  width: var(--s); height: var(--s);
  background: radial-gradient(circle, var(--c) 0%, transparent 70%);
  opacity: var(--i);
}
.ap-flare__ghost--ring {
  background: radial-gradient(circle, transparent 52%, var(--c) 63%, transparent 74%);
}

.ap-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(11 11 12 / 0.85) 0%, rgb(11 11 12 / 0) 52%),
    linear-gradient(270deg, rgb(11 11 12 / 0.75) 0%, rgb(11 11 12 / 0.3) 12%, rgb(11 11 12 / 0) 26%),
    linear-gradient(0deg, rgb(11 11 12 / 0.7) 0%, rgb(11 11 12 / 0) 16%);
}

.ap-hero__copy {
  position: absolute; z-index: 2;
  top: clamp(40px, 9vh, 110px); left: var(--gutter);
  max-width: 600px;
}
.ap-hero__copy .display { font-size: clamp(48px, 6.7vw, 96px); margin: 20px 0 28px; }
.ap-hero__copy .display em { font-size: 0.8333em; } /* 96 / 80 */
.ap-hero__sub { max-width: 400px; margin: 0; font-size: 17px; line-height: 1.5; }

/* Kontext links: Text und Bildunterschrift wechseln mit dem Motiv */
.ap-hero__sub, .ap-caption { transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
.ap-hero.is-swapping .ap-hero__sub,
.ap-hero.is-swapping .ap-caption { opacity: 0; transform: translateY(6px); }
.ap-caption { margin: 28px 0 0; font-size: 11px; color: var(--lumen); }

/* Auswahl rechts (D2 · Lupe): Nummer · Titel · Linie, die randlos bis an den Bildrand läuft.
   Der aktive Eintrag ist am größten; je Schritt Abstand kleiner und blasser (--s, --o setzt das JS).
   Beim Überfahren folgt die Lupe der Maus, beim Verlassen rastet sie auf dem aktiven Eintrag ein. */
.ap-index {
  --k: 1;
  position: absolute; z-index: 2;
  right: 0; bottom: 48px;
  display: flex; flex-direction: column; align-items: stretch;
  gap: calc(12px * var(--k));
  filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.45));
}
.ap-opt {
  --s: 12; --o: 0.5;
  display: flex; align-items: center; gap: calc(16px * var(--k));
  font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-align: left;
  font-size: calc(var(--s) * 1px * var(--k)); line-height: 1.2;
  color: var(--bone);
  transition: font-size 0.45s var(--ease);
}
.ap-index.is-tracking .ap-opt { transition-duration: 0.12s; }
.ap-opt b { font-weight: 400; opacity: calc(var(--o) * 0.8); transition: opacity 0.4s var(--ease), color 0.4s var(--ease); }
.ap-opt span { opacity: var(--o); transition: opacity 0.4s var(--ease); }
.ap-opt i {
  display: block; flex: 1 1 auto; min-width: calc(48px * var(--k)); height: 1px;
  background: rgb(242 239 233 / calc(0.35 * var(--o)));
  transition: background-color 0.4s var(--ease), height 0.4s var(--ease);
}
.ap-opt.is-active { gap: calc(20px * var(--k)); }
.ap-opt.is-active b { color: var(--lumen); opacity: 1; }
.ap-opt.is-active i { height: 2px; background: var(--lumen); }

/* Cursor im Hero: Kamera-Sucher in Lime – vier Eckwinkel (ziehen nach) und ein kleiner Kreis (folgt direkt).
   Über Optionen stellt der Sucher „scharf“ (zieht sich zusammen), beim Klick schnappen die Ecken kurz zu. */
.ap-cursor { position: fixed; inset: 0 auto auto 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease);
  filter: drop-shadow(0 0 1.5px rgb(0 0 0 / 0.55)); } /* bleibt auch auf der hellen Hohlkehle sichtbar */
.ap-hero.has-cursor .ap-cursor { opacity: 1; }
.ap-hero.has-cursor, .ap-hero.has-cursor * { cursor: none; }
.ap-cursor__ring, .ap-cursor__dot { position: absolute; left: 0; top: 0; will-change: transform; }
.ap-cursor__ring::before {
  --arm: 15px; --w: 2px; --c: var(--lumen);
  content: ""; position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--arm) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) left top / var(--w) var(--arm) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--arm) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--w) var(--arm) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--arm) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--arm) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--arm) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--arm) no-repeat;
  transition: transform 0.35s var(--ease);
}
.ap-cursor__dot::before {
  content: ""; position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid var(--lumen); box-sizing: border-box; transition: transform 0.35s var(--ease);
}
.ap-hero.is-hovering .ap-cursor__ring::before { transform: scale(0.6); }
.ap-hero.is-hovering .ap-cursor__dot::before { transform: scale(0); }
.ap-hero.is-shooting .ap-cursor__ring::before { transform: scale(0.78); transition-duration: 0.12s; }

@media (hover: none) { .ap-cursor { display: none; } }

.ap-hint {
  position: absolute; z-index: 2; margin: 0;
  left: var(--gutter); bottom: 56px;
  font-size: 10px; line-height: 1.9;
}
.ap-hint--touch { display: none; }
@media (hover: none) {
  .ap-hint--pointer { display: none; }
  .ap-hint--touch { display: inline; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .ap-hero__copy .display { font-size: clamp(44px, 6vw, 72px); }
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .ap-hero { height: auto; min-height: 0; display: flex; flex-direction: column; background: var(--ink); overflow: visible; }
  .ap-hero__copy { position: static; order: 1; padding: 28px var(--gutter) 24px; }
  .ap-hero__copy .display { font-size: 48px; margin: 16px 0 16px; }
  .ap-hero__sub { color: var(--mute); font-size: 15px; }
  .ap-stage { position: relative; order: 2; aspect-ratio: 4 / 5; --focus: 62% 50%; }
  .ap-figure { transform-origin: 65% 50%; }
  .ap-shade { background: linear-gradient(0deg, rgb(11 11 12 / 0.75) 0%, rgb(11 11 12 / 0) 16%); }
  .ap-caption { margin-top: 18px; font-size: 10px; }
  /* Mobil: Textliste unter dem Bild */
  .ap-index { position: static; order: 4; padding: 28px 0 12px var(--gutter); filter: none; }
  .ap-hint { position: static; order: 5; padding: 8px var(--gutter) 56px; }
}

/* Orbit: aufblitzende Sterne (Canvas über dem Hintergrund, gleicher Parallax) */
.ap-stars, .ap-fireflies { pointer-events: none; }

/* Orbit: Eigenbewegung ohne Maus – alles treibt schwerelos, jede Ebene in eigenem Takt.
   Läuft über die eigenständigen Eigenschaften translate/rotate und addiert sich so zum Maus-Parallax (transform).
   Werte in vw, damit die Bewegung mit der Bühne skaliert (1 vw ≈ 14 px bei 1440 px). */
[data-scene="space"] > .ap-layer { animation: 1s linear infinite alternate both; animation-play-state: running; }
[data-scene="space"][hidden] > .ap-layer { animation-play-state: paused; }
/* Hintergrund + Sterne: kaum merkliches Pendeln */
[data-scene="space"] > img[src*="space-bg"],
[data-scene="space"] > .ap-stars       { animation-name: orbit-bg;     animation-duration: 38s; animation-timing-function: ease-in-out; }
/* Trümmer in der Mitte: langsames Treiben und Drehen */
[data-scene="space"] > img[src*="space-middle"]  { animation-name: orbit-middle; animation-duration: 26s; animation-timing-function: ease-in-out; }
/* Olga bleibt ohne Eigenbewegung – sonst steht sie beim Wechsel zwischen den Motiven nicht an derselben Stelle */
[data-scene="space"] > img[src*="space-olga"]    { animation: none; }
/* Vordergrund: deutlicher, beide Seiten gegeneinander */
[data-scene="space"] > img[src*="space-fg-left"]  { animation-name: orbit-fg-l; animation-duration: 17s; animation-timing-function: ease-in-out; }
[data-scene="space"] > img[src*="space-fg-right"] { animation-name: orbit-fg-r; animation-duration: 21s; animation-timing-function: ease-in-out; }

@keyframes orbit-bg {
  0%   { translate: -0.25vw 0.1vw;  rotate: -0.25deg; }
  100% { translate: 0.25vw -0.15vw; rotate: 0.25deg; }
}
@keyframes orbit-middle {
  0%   { translate: -0.7vw 0.35vw;  rotate: -1.2deg; }
  45%  { translate: 0.2vw -0.4vw;   rotate: 0.3deg; }
  100% { translate: 0.8vw 0.2vw;    rotate: 1.4deg; }
}
@keyframes orbit-fg-l {
  0%   { translate: -1vw 0.6vw;     rotate: -1.6deg; }
  50%  { translate: 0.3vw -0.5vw;   rotate: 0.4deg; }
  100% { translate: 0.9vw -0.2vw;   rotate: 1.8deg; }
}
@keyframes orbit-fg-r {
  0%   { translate: 1vw -0.5vw;     rotate: 2deg; }
  50%  { translate: -0.4vw 0.6vw;   rotate: -0.6deg; }
  100% { translate: -1.1vw 0.1vw;   rotate: -2.2deg; }
}
@media (prefers-reduced-motion: reduce) {
  [data-scene="space"] > .ap-layer { animation: none; }
}

/* =====================================================================
   Index wie bei AI Production: nummerierte Liste unten rechts, feine Linie links, aktiver Eintrag in Lime.
   (Überschreibt die frühere Lupe; --s/--o aus dem Script spielen keine Rolle mehr.)
   ===================================================================== */
.ap-index { right: var(--gutter); bottom: 7vh; width: auto !important; gap: 0; padding-left: 14px; border-left: 1px solid rgb(242 239 233 / 0.18);
  filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.5)); }
.ap-opt { position: relative; height: 28px; gap: 10px !important; font-size: 9.5px !important; letter-spacing: 0.1em; color: rgb(242 239 233 / 0.42); cursor: pointer; transition: color 0.3s var(--ease); }
.ap-opt b, .ap-opt span { opacity: 1 !important; color: inherit !important; font-weight: 400; }
.ap-opt i { display: none; }
.ap-opt:hover { color: var(--bone); }
.ap-opt.is-active { color: var(--lumen); }
.ap-opt.is-active::before { content: ""; position: absolute; left: -15px; top: 3px; width: 1px; height: 22px; background: var(--lumen); }
@media (max-width: 860px) { .ap-index { border-left: 0; padding-left: var(--gutter); } .ap-opt.is-active::before { display: none; } }

/* Cursor fordert zum Klicken auf: Etikett „Next · …“ neben dem Sucher (wie bei AI Production) */
.ap-cursor__tag { position: absolute; left: 0; top: 0; will-change: transform; }
.ap-cursor__tag span { position: absolute; left: 44px; top: -12px; white-space: nowrap; padding: 6px 11px 7px; border-radius: 20px; background: var(--ink); color: var(--lumen);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; filter: none; transition: opacity 0.25s var(--ease), translate 0.25s var(--ease); }
.ap-hero.is-hovering .ap-cursor__tag span, .ap-hero.is-shooting .ap-cursor__tag span { opacity: 0; translate: -6px 0; }

/* =====================================================================
   „Rather shoot without AI?“ — nach Skizze: keine Box, nur eine Lime-Linie links bis zum unteren Rand.
   Überschrift kursiv in Lime öffnet die Posten (Balken), darunter geschätzter Preis, Assets, Tage.
   ===================================================================== */
.ap-cost { position: absolute; z-index: 4; left: calc(var(--gutter) - 22px); bottom: 0; width: 400px; padding: 0 0 34px 22px;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.55); }
.ap-cost__tab { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font-size: 11px; color: var(--lumen); text-shadow: inherit; }
/* Pfeil statt Linie: zeigt geschlossen nach rechts, dreht beim Öffnen nach unten */
.ap-cost__tab::before { content: ""; position: absolute; left: -22px; top: 50%; width: 10px; height: 8px; margin-top: -4px; background: var(--lumen);
  clip-path: polygon(0 0, 100% 0, 50% 100%); rotate: -90deg; transition: rotate 0.35s var(--ease); }
.ap-hero.is-cost .ap-cost__tab::before { rotate: 0deg; }
/* Wird es bei vielen Posten eng, weichen Bildunterschrift bzw. Unterzeile */
.ap-hero .is-cost-hidden { opacity: 0 !important; }
/* Bis zum ersten Klick: dreimal wippen (1,5 s), dann 5 s Pause — Zyklus 6,5 s, erstes Wippen nach 2 s */
.ap-hero:not(.cost-seen) .ap-cost__tab { animation: ap-cost-bob 6.5s ease-in-out 2s infinite; }
@keyframes ap-cost-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) { .ap-hero .ap-cost__tab { animation: none !important; } }
.ap-cost__body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.6s var(--ease), opacity 0.35s var(--ease); }
.ap-hero.is-cost .ap-cost__body { max-height: 520px; opacity: 1; }
.ap-hint { transition: opacity 0.3s var(--ease); bottom: 128px; }
.ap-hero.is-cost .ap-hint { opacity: 0; }
.ap-cost p, .ap-cost dl, .ap-cost dd { margin: 0; }
.ap-cost__rows { display: grid; gap: 9px; padding-top: 16px; }
.ap-cost__row { position: relative; font-size: 13px; line-height: 1.35; color: var(--bone); cursor: help; outline: none; }
.ap-cost__row b { display: inline-block; font-weight: 600; }
.ap-cost__row i { display: block; height: 5px; margin-top: 5px; border-radius: 3px; background: var(--lumen); width: var(--w, 0%); min-width: 5px; transition: width 0.9s var(--ease), opacity 0.25s var(--ease); }
/* Ausgewählter Balken bleibt hell, die anderen treten zurück */
.ap-cost__rows:hover .ap-cost__row:not(:hover) i, .ap-cost__rows:has(.is-tip) .ap-cost__row:not(.is-tip) i { opacity: 0.35; }
/* Card am Balkenende: Begriff + Anteil, Betrag groß in Lime, Erklärung, darunter der Witz kursiv. Ploppt leicht schräg auf. */
.ap-cost__tip { position: absolute; z-index: 2; left: calc(max(var(--w, 0%), var(--tx, 0px)) + 18px); bottom: 2px; width: 270px; padding: 16px 18px 18px; box-sizing: border-box; border-radius: 16px;
  background: #151517; border: 1px solid rgb(242 239 233 / 0.1); box-shadow: 0 24px 60px rgb(0 0 0 / 0.55); color: var(--bone); text-shadow: none; pointer-events: none;
  opacity: 0; transform-origin: 0 50%; transform: translateY(50%) scale(0.85) rotate(-4deg);
  transition: opacity 0.18s var(--ease), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ap-cost__tip::before { content: ""; position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; margin-top: -6px; background: inherit; border: inherit; border-width: 0 0 1px 1px; rotate: 45deg; border-radius: 0 0 0 3px; }
.ap-cost__row:hover .ap-cost__tip, .ap-cost__row:focus-visible .ap-cost__tip, .ap-cost__row.is-tip .ap-cost__tip { opacity: 1; transform: translateY(50%) rotate(-1.5deg); }
.ap-cost__tip > span, .ap-cost__tip > strong { display: block; }
.ap-cost__tip-head { display: flex !important; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(242 239 233 / 0.55); }
.ap-cost__tip-head em { font-style: normal; padding: 3px 7px; border-radius: 10px; background: var(--lumen); color: var(--ink); }
.ap-cost__tip strong { margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; color: var(--lumen); font-variant-numeric: tabular-nums; }
.ap-cost__tip-desc { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--bone); }
.ap-cost__tip-joke { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(242 239 233 / 0.12); font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.2; color: var(--bone); }
.ap-hero.is-cost .ap-cost__body { overflow: visible; }
.ap-cost__stats { display: flex; gap: 32px; margin-top: 22px !important; }
.ap-cost__stats dt { font-size: 12px; font-weight: 600; color: var(--bone); }
.ap-cost__stats dd { margin-top: 2px !important; font-family: var(--serif); font-size: 36px; line-height: 1; color: var(--lumen); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 860px) {
  .ap-cost { position: static; order: 3; width: auto; margin: 0 var(--gutter); padding-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .ap-cost__body, .ap-cost__row i, .ap-cost__tip { transition: none; } }

/* =====================================================================
   Handy: Bild oben, darunter alle sechs Varianten in einer Reihe (Segmente wie ein Fortschrittsbalken), dann erst der Titel.
   Navigieren: Segment antippen, auf dem Bild wischen (links/rechts) oder aufs Bild tippen (nächstes). Keine Vorschaubilder.
   ===================================================================== */
@media (max-width: 860px) {
  .ap-stage { order: 1; }
  .ap-index { order: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 14px var(--gutter) 6px; border: 0; }
  .ap-opt { height: auto !important; flex-direction: column; align-items: flex-start; gap: 5px !important; padding: 10px 0 4px; border-top: 2px solid rgb(242 239 233 / 0.18);
    font-size: 8.5px !important; letter-spacing: 0.06em; color: rgb(242 239 233 / 0.5); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
  .ap-opt span { white-space: nowrap; }
  .ap-opt.is-active { border-top-color: var(--lumen); color: var(--lumen); }
  .ap-hero__copy { order: 3; padding-top: 22px; }
  .ap-hero__copy .display { margin: 4px 0 14px; line-height: 0.92; } /* eng: Label, Headline und Text rücken zusammen */
  .ap-cost { order: 4; }
  .ap-hint { order: 5; }
}

/* Handy: „Lieber ganz ohne KI?“ als Hinweis unten links auf dem Bild. Gedrückt halten (oder Hinweis antippen) legt die
   Kostenaufstellung als Maske übers Bild — sie öffnet sich als Kreis vom Finger aus (--px/--py setzt das Script). */
@media (max-width: 860px) {
  .ap-cost { position: absolute; z-index: 4; left: 0; top: 0; width: 100%; height: 125vw; margin: 0; padding: 0; pointer-events: none; }
  .ap-cost__tab { position: absolute; left: calc(var(--gutter) + 20px); bottom: 16px; pointer-events: auto; font-size: 10px; }
  .ap-cost__tab::after { content: "  ·  Hold"; color: rgb(242 239 233 / 0.75); }
  :lang(de) .ap-cost__tab::after { content: "  ·  Halten"; }
  .ap-hero.is-cost .ap-cost__tab { opacity: 0; }
  .ap-cost__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 24px var(--gutter) 40px;
    max-height: none; opacity: 1; overflow: hidden; background: rgb(11 11 12 / 0.64); pointer-events: none;
    clip-path: circle(0 at var(--px, 25%) var(--py, 90%)); transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
  .ap-hero.is-cost .ap-cost__body { max-height: none; overflow: hidden; pointer-events: auto; clip-path: circle(150% at var(--px, 25%) var(--py, 90%)); }
  .ap-cost__rows { padding-top: 0; gap: 10px; }
  /* Betrag direkt am Posten statt in der Card */
  .ap-cost__row { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; font-size: 13px; }
  .ap-cost__row i { grid-column: 1 / -1; }
  .ap-cost__tip { position: static; display: contents; }
  .ap-cost__tip::before, .ap-cost__tip-head, .ap-cost__tip-desc, .ap-cost__tip-joke { display: none !important; }
  .ap-cost__tip strong { grid-column: 2; grid-row: 1; margin: 0; font-family: var(--mono); font-size: 11px; color: var(--lumen); }
  .ap-hero:not(.is-cost) .ap-cost__row i { width: 0; } /* Balken wachsen beim Öffnen */
  .ap-cost__stats { gap: 24px; margin-top: 20px !important; }
  .ap-cost__stats dd { font-size: 30px; }
}