/* Dropprinters · Bühne für alle Seiten (v5). Aus dem Hub-Prototyp (v4, stage.css) herausgelöst.
   Feste Glas-Bühne hinter der Seite, Fenster zwischen den Abschnitten, Auftragsleiste.
   Standard ist die ruhige Fassung (ohne JS, reduced-motion): Fenster mit Beschriftung und einem stehenden Objekt (.pt-still).
   Hohe Fenster, Szenen und Leiste gelten nur unter html.pt-on (setzt stage-core.js, wenn GSAP und ScrollTrigger laufen);
   ein Fenster ohne laufende Szene (.is-still) bleibt auch dann ruhig.
   Ebenen: body (Grund) · .pt-stage z 0 · Abschnitte und Fenster z 1 (Hub: hm-Abschnitte z 1–5) · .pt-rail z 30 · Navigation z 50.
   Hub-eigenes (hm-Abschnitte, .pt-panel, .pt-bar, .pt-shirt, Fensterhöhen) steht in stage.css, Szenen 3 und 4 in stage-b.css. */

:root{--sheet-r:clamp(24px,3.4vw,44px)}

/* ---------- Bühne ---------- */
.pt-stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;background:linear-gradient(180deg,#FFFFFF,#FAF9FD)}
/* Licht der Bühne (v7 hell): Pastell-Farbfades wie die Aurora des Hero (Farben über --aurora-*), Lage und Größe
   wie v6, damit aurora() in stage-core.js (4 Bewegungen) unverändert passt. Kein 5. Fleck. Obergrenze: Deckkraft .9, Pigment nie
   dunkler als --fade-b (#CDB8FF), sonst fällt --ink-2 direkt auf dem Violett-Fade unter 4,5:1. */
.pt-aurora{position:absolute;inset:0}
.pt-aurora span{position:absolute;width:var(--s);aspect-ratio:1;border-radius:50%;opacity:var(--o);mix-blend-mode:normal;
  background:radial-gradient(closest-side,var(--c) 0%,color-mix(in srgb,var(--c) 70%,transparent) 24%,color-mix(in srgb,var(--c) 38%,transparent) 48%,color-mix(in srgb,var(--c) 12%,transparent) 74%,transparent 100%)}
.pt-aurora span:nth-child(1){--c:var(--aurora-a);--s:58vmax;--o:.90;left:-18%;top:-34%}
.pt-aurora span:nth-child(2){--c:var(--aurora-b);--s:50vmax;--o:.80;right:-16%;top:-8%}
.pt-aurora span:nth-child(3){--c:var(--aurora-c);--s:44vmax;--o:.85;left:18%;bottom:-38%}
.pt-aurora span:nth-child(4){--c:var(--aurora-d);--s:30vmax;--o:.65;right:8%;bottom:-20%}
@media (max-width:768px){
  .pt-aurora span:nth-child(4){display:none}
  .pt-aurora span:nth-child(1){--s:80vmax;left:-45%;top:-28%}
  .pt-aurora span:nth-child(2){--s:70vmax;right:-45%;top:4%}
  .pt-aurora span:nth-child(3){--s:66vmax;left:-10%;bottom:-30%}
}
.pt-scene{position:absolute;inset:0;display:none}

/* ---------- Fenster, ruhige Fassung ---------- */
.pt-gate{position:relative;z-index:1;color:var(--ink-0)}
.pt-gate__pin{position:relative;padding-block:clamp(72px,10vw,128px)}
.pt-gate__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:center;gap:clamp(24px,5vw,72px)}
.pt-cap{display:grid;gap:12px;max-width:34ch}
.pt-cap__no{margin:0;font-family:var(--font-accent);font-weight:800;font-style:italic;font-size:clamp(15px,1.2vw,17px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.pt-cap__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.4vw,60px);line-height:1.02;letter-spacing:-.025em;padding-bottom:.04em}
.pt-cap__text{margin:0;font-size:var(--lead);line-height:1.5;color:var(--ink-1)}
/* das stehende Objekt der ruhigen Fassung bekommt einen statischen Schatten; bewegte .pt-obj bleiben ohne Filter, nur echte Produkte
   (.pt-obj--echt, .pt-shirt, deckend) tragen den Schatten von /drucken/, damit sie nicht aufgeklebt wirken */
.pt-still{display:block;width:min(100%,340px);height:auto;justify-self:center;filter:drop-shadow(0 22px 36px rgba(48,32,110,.16))}
.pt-still--wide{width:min(100%,520px)}
.pt-still--tall{width:min(100%,210px)}
@media (max-width:760px){
  .pt-gate__inner{grid-template-columns:1fr}
  .pt-still{width:min(72%,280px)}
  .pt-still--wide{width:100%}
  .pt-still--tall{width:min(46%,172px)}
}

/* ---------- Auftragsleiste (nur unter pt-on sichtbar) ---------- */
.pt-rail{display:none}

/* ---------- Blätter auf Inhalts- und Story-Seiten (body.pt-page; der Hub hat seine hm-Regeln in stage.css) ---------- */
/* alles in main und der Footer liegt über der Bühne; :where hält die Regel schwach, eigene position/z-index der Seiten bleiben */
:where(.pt-page main>*,.pt-page .footer){position:relative;z-index:1}
/* dunkle Abschnitte: durchsichtig, das Licht kommt von der Bühne */
.pt-page main>:is(section.stage,.pg-hero,.pg-cta:not(.light),.cta-band.stage,.ag-house,.lg-hero){background:transparent;box-shadow:none}
.pt-page main>:is(section.stage,.pg-hero,.pg-cta:not(.light),.cta-band.stage,.ag-house,.lg-hero)>.aurora{display:none}
/* helle Abschnitte: deckende Blätter, leicht eingerückt; aufeinanderfolgende bleiben bündig */
.pt-page main>section.light{margin-inline:clamp(8px,1.2vw,18px);
  box-shadow:0 1px 0 #fff inset,0 40px 100px -50px rgba(48,32,110,.28),0 0 0 1px rgba(10,10,12,.05)}
/* oben rund nach einem dunklen Abschnitt oder Fenster (schwach: die Anhebung .pg-hero+.pg-section aus pages.css behält ihre Rundung) */
:where(.pt-page main>section.light:not(section.light+section.light)){border-top-left-radius:var(--sheet-r);border-top-right-radius:var(--sheet-r)}
/* unten rund vor einem dunklen Abschnitt, Fenster oder dem Footer */
.pt-page main>section.light:not(:has(+ section.light)){border-bottom-left-radius:var(--sheet-r);border-bottom-right-radius:var(--sheet-r)}

/* ======================================================================
   Bewegte Fassung: nur unter html.pt-on
   ====================================================================== */
.pt-on .pt-gate{height:var(--gate-h,160svh)}
/* Szene pass braucht wie Hub-Szene 1 mehr Weg (drei Objekte nacheinander auf die Zielposition); data-gate-h setzt --gate-h inline und gewinnt */
.pt-on .pt-gate[data-scene="pass"]{--gate-h:180svh}
.pt-on .pt-gate__pin{position:sticky;top:0;height:100svh;padding:0}
.pt-on .pt-gate__inner{display:block;position:relative;height:100%}
.pt-on .pt-still{display:none}
.pt-on .pt-cap{position:absolute;left:0;top:calc(var(--nav-top) + var(--nav-h) + clamp(28px,7vh,72px));max-width:30ch}
.pt-on .pt-cap__title{font-size:clamp(40px,5vw,72px)}

.pt-on .pt-scene{display:block;visibility:hidden}
.pt-on .pt-scene.is-live{visibility:visible}

/* Fenster ohne laufende Szene (stage-core.js setzt .is-still: Szene fehlt, Bau warf, fail()): genau dieses Fenster nimmt die
   pt-on-Regeln oben zurück und zeigt die ruhige Fassung (Werte wie dort: Standbild, Beschriftung im Raster, normale Höhe);
   die übrigen Fenster bleiben bewegt. [data-gate] hebt die Höhe auch über die Fensterhöhen des Hubs (stage.css). */
.pt-on .pt-gate.is-still[data-gate]{height:auto}
.pt-on .pt-gate.is-still .pt-gate__pin{position:relative;top:auto;height:auto;padding:clamp(72px,10vw,128px) 0}
.pt-on .pt-gate.is-still .pt-gate__inner{display:grid;height:auto}
.pt-on .pt-gate.is-still .pt-still{display:block}
.pt-on .pt-gate.is-still .pt-cap{position:static;max-width:34ch;padding:0;border:0;border-radius:0;background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.pt-on .pt-gate.is-still .pt-cap__title{font-size:clamp(34px,4.4vw,60px)}
.pt-on .pt-gate.is-still .pt-cap__text{font-size:var(--lead)}

/* gemeinsame Bausteine der Szenen */
.pt-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pt-line{fill:none;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.pt-line--glow{stroke-width:9px;stroke-opacity:.26}
.pt-line--core{stroke-width:2px}
.pt-pearl{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 0 2px rgba(124,58,237,.55),0 0 14px 3px rgba(6,182,212,.5),0 0 34px 8px rgba(124,58,237,.3)}
.pt-obj{position:absolute;left:0;top:0;display:block;height:auto;max-width:none;will-change:transform,opacity}
.pt-obj.is-missing{visibility:hidden}
.pt-obj--echt,.pt-shirt{filter:drop-shadow(0 28px 34px rgba(48,32,110,.20)) drop-shadow(0 6px 10px rgba(48,32,110,.10))}
.pt-word{position:absolute;left:0;top:50%;margin:0;white-space:nowrap;font-family:var(--font-accent);font-weight:800;font-style:italic;
  font-size:22vw;line-height:.8;letter-spacing:-.01em;text-transform:uppercase;color:transparent;
  -webkit-text-stroke:1.5px rgba(10,10,12,.08);transform:translate(0,-50%);will-change:transform}
.pt-chipx{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:var(--r-pill);
  font:600 15px/1 var(--font-body);color:var(--ink-0);white-space:nowrap;
  background:var(--smoke-bg);border:1px solid var(--smoke-border);box-shadow:var(--smoke-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.pt-chipx b{font-family:var(--font-accent);font-weight:800;font-style:italic;font-size:22px;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;min-width:2.6ch;text-align:right;color:var(--ink-0)}
.pt-chipx i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px 2px rgba(34,211,238,.7)}

/* Glastisch und Lichtpuls (Szene land, Hub-Szene 2) */
.pt-table{position:absolute;left:0;top:0;width:var(--tw,60vw);height:var(--th,50vh);perspective:1100px}
.pt-table__plane{position:absolute;inset:0;border-radius:36px;transform:rotateX(62deg);transform-origin:50% 60%;
  background:
    linear-gradient(rgba(10,10,12,.06) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(10,10,12,.06) 1px,transparent 1px) 0 0/48px 48px,
    radial-gradient(60% 70% at 50% 45%,rgba(124,58,237,.22),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.35));
  border:1px solid rgba(10,10,12,.08);box-shadow:inset 0 1px 0 #fff,0 40px 80px -30px rgba(48,32,110,.22)}
.pt-pulse{position:absolute;left:0;top:0;width:var(--d,420px);aspect-ratio:1;border-radius:50%;opacity:0;
  border:2px solid rgba(124,58,237,.6);box-shadow:0 0 40px 8px rgba(34,211,238,.4),inset 0 0 40px 6px rgba(244,114,182,.3)}

/* Zielmarke (Szene route, nach Hub-Szene 4) */
.pt-mark{position:absolute;left:0;top:0;width:var(--pw,120px);will-change:transform,opacity}
.pt-mark__body{display:block;position:relative;transform-origin:50% 100%}
.pt-mark__body .pt-obj{position:relative;width:100%}
.pt-mark__chip{z-index:1}

/* ---------- Auftragsleiste ---------- */
.pt-on .pt-rail{display:block;position:fixed;z-index:30;pointer-events:none;opacity:0;transition:opacity 320ms var(--ease-out)}
.pt-on .pt-rail.is-on{opacity:1}
/* Rauchglas-Insel (tokens.css): die Leiste bleibt dunkel und liegt über hellen Blättern wie über der Pastell-Bühne; Schrift über die Insel weiß */
.pt-rail__track{position:relative;border-radius:var(--r-pill);background:var(--smoke-bg);border:1px solid var(--smoke-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 34px -14px rgba(24,16,60,.45);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.pt-rail__fill{position:absolute;border-radius:inherit;background:linear-gradient(var(--rail-dir,180deg),#22D3EE,#7C3AED,#F472B6)}
.pt-rail__dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,255,255,.35);
  transition:background-color 200ms ease,box-shadow 200ms ease}
.pt-rail__dot.is-done{background:#fff;box-shadow:0 0 10px 2px rgba(34,211,238,.6)}
.pt-rail__pearl{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.2),0 0 12px 3px rgba(34,211,238,.8),0 0 26px 6px rgba(124,58,237,.45)}
.pt-rail__label{margin:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;color:var(--ink-0);font:600 13px/1 var(--font-body)}
.pt-rail__no{font:800 italic 17px/1 var(--font-accent);color:var(--accent-ink)}
/* breit: senkrechte Leiste rechts */
@media (min-width:1100px){
  .pt-on .pt-rail{right:14px;top:50%;transform:translateY(-50%)}
  .pt-rail__track{width:24px;height:min(42vh,360px)}
  .pt-rail__fill{left:9px;right:9px;top:12px;height:calc(100% - 24px);transform-origin:50% 0;transform:scaleY(0)}
  .pt-rail__dot{left:50%}
  .pt-rail__label{position:absolute;right:34px;top:0;padding:8px 12px;border-radius:var(--r-pill);background:var(--smoke-bg);
    border:1px solid var(--smoke-border);box-shadow:0 14px 34px -14px rgba(24,16,60,.45);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:translateY(-50%)}
}
/* schmal: flache Leiste unten */
@media (max-width:1099px){
  .pt-on .pt-rail{left:50%;bottom:max(12px,env(safe-area-inset-bottom));width:min(calc(100% - 32px),420px);height:36px;transform:translateX(-50%)}
  .pt-rail{--rail-dir:90deg}
  /* nur in der bewegten Fassung: sonst liegt die Glasspur der Leiste als Schleier mit Ringkante über dem ganzen Fenster */
  .pt-on .pt-rail{display:flex;align-items:center}
  .pt-rail__track{position:absolute;inset:0}
  .pt-rail__label{position:relative;z-index:1;height:36px;width:150px;padding-left:14px;font-size:12.5px;align-items:center}
  .pt-rail__fill{left:164px;right:18px;top:50%;height:3px;margin-top:-1.5px;transform-origin:0 50%;transform:scaleX(0)}
  .pt-rail__dot{top:50%}
  .pt-rail__pearl{top:50%}
}

/* ---------- 390 px: eigene Komposition ---------- */
@media (max-width:760px){
  .pt-on .pt-cap{top:auto;bottom:calc(64px + env(safe-area-inset-bottom));left:0;right:0;max-width:none;padding:16px 18px;border-radius:var(--r-lg);
    background:var(--cap-bg,rgba(255,255,255,.72));border:1px solid rgba(10,10,12,.08);box-shadow:0 18px 40px -20px rgba(48,32,110,.25),inset 0 1px 0 #fff;
    -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
  /* deckende Produkte laufen hinter der Karte durch: dichter, sonst liegt beim Abflug ein dunkler Schleier unter dem Text */
  .pt-gate--echt{--cap-bg:rgba(255,255,255,.94)}
  .pt-on .pt-cap__title{font-size:34px}
  .pt-on .pt-cap__text{font-size:16px}
  .pt-word{font-size:34vw;-webkit-text-stroke-width:1.2px}
  .pt-chipx{height:38px;font-size:13.5px;padding:0 14px}
  .pt-chipx b{font-size:19px}
  /* bewegte Chips ohne backdrop-filter (Leistung), dafür dichter */
  .pt-mark__chip{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--smoke-bg);border-color:var(--smoke-border)}
}

/* Fallbacks: ohne backdrop-filter dichter (Rauchglas-Chips und Leiste deckt base.css ab), reduzierte Transparenz deckend */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .pt-rail__label{background:rgba(20,20,32,.96)}
  @media (max-width:760px){.pt-on .pt-cap{background:rgba(255,255,255,.94)}}
}
@media (prefers-reduced-transparency:reduce){
  .pt-chipx,.ptb-chip,.pt-panel,.pt-rail__track,.pt-rail__label{background:#1D1D2A}
  .pt-on .pt-cap{background:var(--light-1)}
}