/* =====================================================================
   WF Design – Effekte der Startseite
   Sticker-Peel (Comic-Zeichnung liegt als Sticker auf dem Foto), Sticker-Karten,
   Schreibmaschinen-Überschriften, horizontale Referenzen, gestickte Unterschriften.
   Skript: assets/js/effects.js
   ===================================================================== */

/* ---------- Hover nur per Skript (.is-hot), nicht per :hover ---------- */
.service:hover { transform: none; }
.service.is-hot { transform: translateY(-6px); }
.service:hover .service__media img { transform: none; }
.ref:hover img { transform: none; }
.ref:hover figcaption { transform: translateY(8px); opacity: 0; }
.ref.is-hot figcaption, .ref:focus-within figcaption { transform: none; opacity: 1; }
@media (hover: none) { .ref figcaption, .ref:hover figcaption { transform: none; opacity: 1; } }

/* ---------- Sticker-Peel ----------
   Aufbau: Foto (unten), darüber die Zeichnung als Sticker, dazu der umgeklappte Teil (Rückseite).
   Die Geometrie (Faltlinie, Spiegelung) setzt das Skript als Custom Properties. */
.peel { position: relative; width: 100%; height: 100%; overflow: visible; border-radius: inherit; }
.peel > img, .peel__sticker, .peel__sticker img, .peel__back, .peel__fold, .peel__fold img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; }
.peel > img, .peel__sticker img, .peel__fold img { object-fit: cover; transform: none !important; transition: none !important; }
.peel > img, .peel__sticker, .peel__sticker img, .peel__fold, .peel__fold img { border-radius: inherit; }   /* gleicher Eckenradius wie Foto und Overlay */
.peel__sticker { clip-path: var(--peel-front, none); opacity: var(--peel-fade, 1); }
/* Der abgezogene Teil darf über den Rahmen und über Nachbarn hinausragen; auf den letzten 5 % blendet er aus */
.peel__back { transform-origin: 0 0; transform: var(--peel-flip, none); filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); pointer-events: none; will-change: transform; visibility: hidden; opacity: var(--peel-fade, 1); }
.service, .service__media, .frame, .ref { overflow: visible; }
.service__media { border-radius: 6px 6px 0 0; }
.refs__track .ref figcaption { border-radius: 0 0 6px 6px; }
.refs__viewport { overflow-x: clip; overflow-y: visible; }
.service:has(.is-peeling), .frame:has(.is-peeling), .ref:has(.is-peeling), .notice__sticker.is-peeling { z-index: 3; }
.stack .frame + .frame { z-index: 4; }   /* das kleine Bild samt Sticker liegt immer vor dem großen */
.peel__fold { clip-path: var(--peel-back, polygon(0 0, 0 0, 0 0)); background: #ebe7df; }
.peel__fold img { opacity: .14; filter: grayscale(1); }
.peel__fold::after { content: ""; position: absolute; inset: 0; background: var(--peel-shade, none); }
.peel.is-peeling .peel__back { visibility: visible; }
.peel.is-off .peel__sticker, .peel.is-off .peel__back { visibility: hidden; }

/* ---------- Sticker-Karten (Prozess): leicht schief, Folienglanz, Ecke hebt sich bei Hover ---------- */
@property --curl { syntax: '<length>'; inherits: true; initial-value: 0px; }   /* erbt, damit ::after die Ecke kennt */
.process ol { gap: 22px; }
.process li.sticker { background: none; padding: 0; border-radius: 0; transform: rotate(var(--rot, 0deg)); filter: drop-shadow(0 18px 26px rgba(0,0,0,.45)); transition: transform .6s var(--ease-out), filter .6s var(--ease-out); }
.process li.sticker:nth-child(1) { --rot: -1.4deg; } .process li.sticker:nth-child(2) { --rot: .9deg; } .process li.sticker:nth-child(3) { --rot: -.6deg; } .process li.sticker:nth-child(4) { --rot: 1.2deg; }
.sticker__in {
  --curl: 0px; position: relative; height: 100%; padding: 32px 26px 30px; background: var(--bg-3); border-radius: 18px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--curl)), calc(100% - var(--curl)) 100%, 0 100%);
  transition: --curl .55s var(--ease-out);
}
.sticker__in::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.04) 100%); pointer-events: none; }   /* Folienglanz */
.sticker__in::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: var(--curl); height: var(--curl);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(315deg, #bdb8ad 0%, #f5f2eb 46%, #d9d4ca 100%);
  filter: drop-shadow(-3px -4px 6px rgba(0,0,0,.4));
}
.process li.sticker.is-hot { transform: rotate(0deg) translateY(-6px); filter: drop-shadow(0 26px 34px rgba(0,0,0,.55)); }
.process li.sticker.is-hot .sticker__in { --curl: 46px; }
@media (hover: none) { .process li.sticker .sticker__in { --curl: 18px; } }

/* ---------- AP-Werbung-Sticker auf der Ecke des Hinweiskastens ---------- */
.notice { overflow: visible; }
.notice > div:first-child { padding-left: clamp(0px, 6vw, 96px); }
.notice__sticker { position: absolute; top: -92px; right: -88px; width: 196px; height: 196px; border-radius: 16px; transform: rotate(9deg); filter: drop-shadow(0 16px 24px rgba(0,0,0,.5)); z-index: 2; }
.notice__sticker .peel__fold { background: #e4e0d7; }
@media (max-width: 900px) { .notice { padding-top: 72px; } .notice > div:first-child { padding-left: 0; } .notice__sticker { width: 124px; height: 124px; top: -58px; right: -14px; } }

/* ---------- Schreibmaschine: Überschriften erscheinen Zeichen für Zeichen beim Scrollen ---------- */
.tw { display: inline-block; clip-path: var(--tw, none); }
h2.is-typing { opacity: 1; }

/* ---------- Referenzen: gepinnter horizontaler Lauf ---------- */
.refs { padding-bottom: 0; }
.refs__pin { height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3.5vh, 44px); padding-bottom: calc(var(--slant) * .5); }
.refs__pin .section-head { margin-bottom: 0; }
.refs__viewport { width: 100%; }
.refs__track { display: flex; gap: 14px; align-items: stretch; height: var(--refh, clamp(260px, 50svh, 620px)); padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); will-change: transform; }
.refs__track .ref { flex: none; height: 100%; width: calc(var(--refh, clamp(260px, 50svh, 620px)) * var(--ar, 1.333)); aspect-ratio: auto; grid-column: auto; grid-row: auto; }
.refs__track .ref img { position: absolute; }
/* Farbiges Overlay; nur die aktive Kachel (Mitte oder Maus) ist normalfarbig */
.ref__tint { position: absolute; inset: 0; z-index: 2; background: rgba(11, 15, 23, .82); border-radius: inherit; pointer-events: none; transition: opacity .5s var(--ease-out); }
.ref.is-live .ref__tint { opacity: 0; }
.refs__track .ref figcaption { z-index: 3; }
.refs__end { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2)) 0 32px; }
.refs__end .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .refs__pin { --refh: clamp(220px, 42svh, 420px); justify-content: flex-start; padding-top: calc(var(--header-h) + 16px); }
  .refs__pin .section-head .lead { display: none; }
  .refs__end { padding-left: 16px; }
}
@media (max-width: 900px) and (max-height: 640px) { .refs__pin { --refh: 200px; } }

/* ---------- Unterschriften: gestickt, Bild für Bild beim Scrollen ---------- */
.sign figure { position: relative; }
.sign img, .sign canvas { width: 210px; height: auto; display: block; }
.sign canvas { position: absolute; left: 0; top: 0; }
.sign.is-stitching img { visibility: hidden; }

/* ---------- Case Study: Deutschlandkarte, Standorte erscheinen nach Scrollstand ---------- */
.case h2 { font-size: clamp(34px, 4.2vw, 72px); }
.case__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.case__facts div { background: var(--bg-3); border-radius: 6px; padding: 18px 16px 16px; }
.case__facts b { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 2.6vw, 44px); line-height: 1; color: var(--tape); }
.case__facts span { display: block; margin-top: 8px; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.case__soon { font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.case__map { display: flex; justify-content: center; }
.case__svg { width: min(100%, 560px); height: auto; max-height: 82vh; display: block; filter: drop-shadow(0 30px 50px rgba(0,0,0,.5)); overflow: visible; }
.case__land { fill: rgba(255,255,255,.04); stroke: rgba(242,244,248,.6); stroke-width: 1.8; stroke-linejoin: round; }
.case__dot { fill: var(--tape); stroke: var(--bg-0); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .4s var(--ease-out); }
.case__dot.is-on { transform: scale(1); }
.case__home circle { fill: var(--text); }
.case__home-ring { fill: none !important; stroke: var(--text); stroke-width: 2; }
.case__home-label { font: 700 13px var(--font-body); fill: var(--text); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) { .case__map { margin-top: 32px; } .case__svg { width: min(100%, 420px); } }

/* ---------- Ohne Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .peel__sticker, .peel__back { display: none; }
  .tw { clip-path: none !important; }
  .process li.sticker { transform: none; }
  .case__dot { transform: none; }
}