/* Layout-Idee: Sucher einer Kamera. Schwarzer Grund wie das Logo, Inhalte sitzen in Rahmen mit Sucher-Ecken,
   Metadaten in Mono wie im Kamera-Display. Orange nur für das Auge und wenige Akzente. */
@font-face { font-family: "Inter Display"; src: url("fonts/interdisplay-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrainsmono-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #000000;
  --surface: #0e0d0c;
  --fg: #f2ede4;
  --muted: #8c857b;
  --line: #2a2724;
  --amber: #e8822a;
  --stroke: #4f4a43;
  --display: "Inter Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --max: 1120px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
::selection { background: var(--amber); color: var(--bg); }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: rgba(0,0,0,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 900; letter-spacing: 0.02em; font-size: 0.95rem; }
.brand img { width: 34px; height: auto; }
.brand .brand-eye { width: 34px; height: 25px; flex: none; overflow: visible; }
.js .brand { opacity: var(--brand-o, 1); transition: opacity .2s; }
/* Startseite: Logo erscheint im Takt der Blende (Werte setzt site.js pro Frame), am Ende ein kleiner Wipp */
.motion .brand { opacity: 0; will-change: opacity, transform; }
.motion .brand .brand-eye { transform-origin: 50% 45%; }
.brand.pop .brand-eye { animation: brandPop .5s cubic-bezier(.3,1.8,.4,1); }
@keyframes brandPop { 0% { scale: 1; } 40% { scale: 1.18; } 100% { scale: 1; } }
.nav { display: flex; gap: 24px; }
.nav a { text-decoration: none; font-size: 0.9rem; color: var(--muted); }
.nav a:hover { color: var(--fg); }
.nav .nav-cta { color: var(--fg); }
@media (max-width: 640px) { .nav a:not(.nav-cta) { display: none; } }

/* Hero */
.hero { padding-block: clamp(32px, 6vw, 72px) clamp(48px, 7vw, 96px); }

/* Flug durchs Auge: Bühne bleibt stehen, das Logo zoomt in die Blende, die Blende öffnet sich */
.stage { position: relative; }
.reveal, .aperture, .hud { display: none; }
.motion .intro { height: 320vh; position: relative; }
/* Bremse ohne Skript: Der Browser rastet beim Scrollen an dieser Stelle ein und fliegt nicht darüber hinweg */
html.motion.snap { scroll-snap-type: y mandatory; }
.snap-hold, .snap-next { display: none; }

.motion .snap-hold { display: block; position: absolute; left: 0; width: 1px; height: 1px; top: calc(120vh * 0.25); scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
/* Nach der offenen Blende: der nächste Wisch landet direkt am Anfang des nächsten Abschnitts */
.motion .snap-next { display: block; position: absolute; left: 0; width: 1px; height: 1px; top: calc(100% - 100vh); scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
html.hold .snap-next { scroll-snap-align: none; }
.motion .stage { transform-origin: 50% 100%; will-change: transform, opacity; }
@supports (animation-timeline: view()) {
  .motion body { timeline-scope: --works; }
  .motion #arbeiten { view-timeline: --works block; }
  .motion .stage { animation: stageSink linear both; animation-timeline: --works; animation-range: entry 0% entry 100%; }
  @keyframes stageSink { 0% { transform: scale(1); border-radius: 0; opacity: 1; } 100% { transform: scale(.9); border-radius: 18px; opacity: .25; } }
}
.motion #arbeiten { margin-top: -100vh; position: relative; z-index: 3; background: var(--bg); border-top: 0; box-shadow: 0 -40px 80px rgba(0,0,0,.65); border-radius: 18px 18px 0 0; }
.motion .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; align-content: center; }
.motion .hero-text { opacity: calc(1 - var(--p, 0) * 9); }
/* Oben Orange, unten schimmern die Arbeiten schon geblurt durch */
.motion .reveal { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: 52% 48%; text-align: center; background: var(--bg); visibility: hidden; }
.motion .reveal.on { visibility: visible; }
.reveal-top { display: grid; place-content: center; justify-items: center; gap: 10px; background: var(--amber); color: var(--bg); padding: 56px 16px 16px; }
.reveal-big { margin: 0; font-family: var(--display); font-weight: 900; font-size: min(15vw, 16vh, 12rem); line-height: .9; letter-spacing: -0.02em;
  transform: scale(calc(1.25 - var(--r, 0) * 0.25)); }
.reveal-small { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(1.2rem, min(4vw, 3.6vh), 2.4rem); }
.reveal-peek { position: relative; overflow: hidden; background: var(--bg); }
.peek-media { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.reveal-peek video { width: 100%; height: 100%; object-fit: cover; filter: blur(7px) saturate(1.15) brightness(.72); transform: scale(1.12); }
.reveal-peek::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(232,130,42,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 65%, rgba(0,0,0,.6)); }
.reveal .reveal-hint { position: absolute; left: 50%; top: 50%; z-index: 2; margin: 0; transform: translate(-50%, -50%); color: var(--fg);
  padding: 9px 16px; border: 1px solid rgba(242,237,228,.45); background: rgba(0,0,0,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); white-space: nowrap; text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.reveal .reveal-hint:hover, .reveal .reveal-hint:focus-visible { border-color: var(--amber); background: var(--amber); color: var(--bg); }
.motion .aperture { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.motion .hud { display: block; position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); bottom: 20px; z-index: 4; margin: 0; color: var(--fg); opacity: 0; transition: opacity .2s; }
.motion .hud.on { opacity: .8; }
.hero-video { position: relative; width: 100%; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 5.5; }
.hero-video .hero-logo { overflow: visible; }
.hero-video img, .hero-video .hero-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.hero-video .hero-logo { opacity: 0; }
.hero-video .zoom-ghost { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform, opacity; filter: blur(2.5px); }
.hero-video.live .hero-logo { opacity: 1; }
.hero-video.live img { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.hero-text { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: center; text-align: center; margin-top: clamp(8px, 2vw, 24px); }
.claim { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 4.5vw, 2.75rem); line-height: 1.05; margin: 0; text-wrap: balance; }
.lede { max-width: 34em; margin: 0; color: var(--muted); font-size: 1.1rem; text-wrap: balance; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--fg); color: var(--bg); font-weight: 500; text-decoration: none; border-radius: 2px; transition: background .2s; }
.btn:hover { background: var(--amber); }
.btn small { font-family: var(--mono); font-size: 0.7rem; opacity: .6; text-transform: uppercase; letter-spacing: .06em; }

/* Sections */
section { border-top: 1px solid var(--line); }
.section { padding-block: clamp(56px, 8vw, 112px); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(28px, 4vw, 48px); }
h2 { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 6vw, 3.75rem); line-height: 1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h2 .dot { color: var(--amber); }
h3 { font-family: var(--display); font-weight: 900; font-size: 1.4rem; line-height: 1.15; margin: 0; }
p { margin: 0; }

/* Portfolio frames */
.frames { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.frame { position: relative; margin: 0; background: var(--surface); overflow: hidden; min-width: 0; }
.frame:nth-child(1) { grid-column: span 4; aspect-ratio: 3 / 2; }
.frame:nth-child(2) { grid-column: span 2; }
.frame:nth-child(3), .frame:nth-child(4), .frame:nth-child(5) { grid-column: span 2; aspect-ratio: 4 / 5; }
.frame:nth-child(6) { grid-column: span 6; aspect-ratio: 21 / 9; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.slides { position: absolute; inset: 0; }
.frame .clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .vwrap { position: absolute; inset: 0; overflow: hidden; }
.sound { position: absolute; top: 12px; right: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(242,237,228,.35);
  background: rgba(0,0,0,.55); color: var(--fg); border-radius: 2px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sound:hover { border-color: var(--amber); }
a.sound { text-decoration: none; white-space: nowrap; }
.sound .sound-label { color: var(--fg); font-size: .68rem; }
.sound-icon { width: 14px; height: 12px; position: relative; }
.sound-icon::before { content: ""; position: absolute; left: 0; top: 3px; width: 4px; height: 6px; background: currentColor; box-shadow: 3px 0 0 0 currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.sound-icon::after { content: ""; position: absolute; left: 4px; top: 0; border-style: solid; border-width: 6px 6px 6px 0; border-color: transparent currentColor transparent transparent; }
.sound[aria-pressed="true"] { border-color: var(--amber); }
.sound[aria-pressed="true"] .sound-icon { color: var(--amber); }
.triptych { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--bg); }
.triptych img { min-width: 0; }
.triptych::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(0,0,0,.5)); pointer-events: none; }
.slides img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease, filter .5s ease-out, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.slides img.on { opacity: 1; }
.slides::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none; }
.frame figcaption::before { content: ""; position: absolute; inset: -70px -40px -14px; z-index: -1; background: linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events: none; }
.frame figcaption .mono { text-shadow: 0 1px 3px rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.frame .ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted);
  background: radial-gradient(120% 90% at 30% 20%, #1c1a18 0%, #0b0a09 70%); }
.frame .ph span { max-width: 22ch; font-size: 0.95rem; }
.frame::before, .frame::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1.5px solid var(--fg); opacity: .55; pointer-events: none; z-index: 2; }
.frame::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.frame::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.frame figcaption { position: absolute; left: 40px; right: 40px; bottom: 14px; z-index: 2; display: flex; justify-content: space-between; gap: 12px; }
.frame figcaption .mono { color: var(--fg); opacity: .7; }
@media (max-width: 760px) {
  .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frame:nth-child(n) { grid-column: span 2; aspect-ratio: 4 / 3; }
  .frame:nth-child(3), .frame:nth-child(4) { grid-column: span 1; aspect-ratio: 4 / 5; }
  .frame:nth-child(1) { aspect-ratio: 1 / 1; }
}

/* Leistungen */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.service { display: grid; gap: 12px; align-content: start; padding: 28px 28px 32px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.service:nth-child(even) { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--line); }
.service .mono { color: var(--amber); }
.service p { color: var(--muted); max-width: 40ch; }
.service .quip { color: var(--fg); }
@media (max-width: 760px) {
  .services { grid-template-columns: minmax(0, 1fr); }
  .service, .service:nth-child(even) { padding: 24px 0; border-left: 0; }
}
.price-note { margin-top: 28px; color: var(--muted); max-width: 60ch; }

/* Ablauf */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: 8px; align-content: start; min-width: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.steps li::before { content: "0" counter(s); font-family: var(--mono); font-size: 0.75rem; color: var(--amber); }
.steps p { color: var(--muted); }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Über */
.about { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.about-text { display: grid; gap: 18px; max-width: 60ch; }
.specs { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.specs dt { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 3px; }
.specs dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .about { grid-template-columns: minmax(0, 1fr); } }

/* Kontakt */
.contact { display: grid; gap: 32px; }
.contact-big { font-family: var(--display); font-weight: 900; font-size: clamp(1.5rem, 5.5vw, 3.5rem); line-height: 1.05; text-decoration: none; overflow-wrap: anywhere; }
.contact-big:hover { color: var(--amber); }
.contact-row { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.contact-row a { text-decoration-color: var(--line); text-underline-offset: 4px; }
.contact-row a:hover { text-decoration-color: var(--amber); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 28px 40px; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.site-footer a:hover { color: var(--fg); }

/* Rechtstexte */
.legal { padding-block: clamp(40px, 6vw, 80px); }
.legal .wrap > * + * { margin-top: 18px; }
.legal h1 { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1; margin: 0 0 32px; }
.legal h2 { font-size: 1.35rem; margin-top: 40px; }
.legal p, .legal li { max-width: 65ch; color: var(--muted); }
.legal strong { color: var(--fg); font-weight: 500; }
.todo { background: rgba(232,130,42,.14); color: var(--amber); padding: 0 4px; border-radius: 2px; }

/* Laufband zwischen den Abschnitten, läuft mit dem Scrollen */
.marquee { overflow: hidden; border-top: 1px solid var(--line); padding-block: clamp(18px, 3vw, 32px); }
.marquee-track { white-space: nowrap; font-family: var(--display); font-weight: 900; font-size: clamp(2.5rem, 9vw, 7rem); line-height: 1; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px var(--stroke); will-change: transform; }

/* Auftritt: jeder Rahmen gleitet wie ein Verschlussvorhang von unten auf, das Bild setzt sich dabei sanft in den Rahmen */
.curtain { position: absolute; inset: 0; z-index: 5; background: var(--bg); pointer-events: none;
  transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.05s cubic-bezier(.7,0,.15,1); }
.frame.af-wait .curtain { transform: scaleY(1); transition: none; }
.js .frame .ph, .js .frame img, .js .frame .clip { transition: transform 1.6s cubic-bezier(.2,.7,.2,1), opacity 1.2s ease; }
.js .frame.af-wait .ph, .js .frame.af-wait img, .js .frame.af-wait .clip { transform: scale(1.1); opacity: .5; }
.js .frame figcaption { transition: opacity .6s ease .7s, transform .6s cubic-bezier(.2,.7,.2,1) .7s; }
.js .frame.af-wait figcaption { opacity: 0; transform: translateY(6px); }
.exif { transition: opacity .3s; }

/* Vollbild-Ansicht */
.frame.zoomable { cursor: zoom-in; }
.frame.zoomable:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.96); display: grid; grid-template-rows: 1fr auto;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.lb-stage { position: relative; min-height: 0; display: grid; place-items: center; touch-action: pan-y; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); width: auto; height: auto; object-fit: contain; animation: lb-in .35s ease-out; }
@keyframes lb-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.lb-meta { display: flex; justify-content: space-between; gap: 16px; margin: 12px 0 0; color: var(--muted); }
.lb-btn { position: absolute; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(242,237,228,.25);
  background: rgba(0,0,0,.5); color: var(--fg); font-size: 1.1rem; border-radius: 2px; cursor: pointer; }
.lb-btn:hover { border-color: var(--amber); color: var(--amber); }
.lb-close { top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.lb-prev, .lb-next { top: 50%; translate: 0 -50%; }
.lb-prev { left: max(16px, env(safe-area-inset-left, 0px)); }
.lb-next { right: max(16px, env(safe-area-inset-right, 0px)); }
body.lb-open { overflow: hidden; }
.lb[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .curtain { display: none; } .js .frame.af-wait * { transform: none !important; opacity: 1 !important; } }
@media (max-width: 560px) { .hero-video { aspect-ratio: 16 / 7; } .hero-video img, .hero-video .hero-logo { transform: scale(1.45); } }
@media (max-width: 760px) { .frame:nth-child(3) figcaption .mono:first-child, .frame:nth-child(4) figcaption .mono:first-child { display: none; } .frame:nth-child(3) figcaption, .frame:nth-child(4) figcaption { justify-content: flex-end; } }

/* Kontaktformular: schlicht, nur Linien */
.cform { display: grid; gap: 28px; max-width: 760px; padding-top: 8px; }
.cform-grid { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .cform-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; margin: 0; }
.field > span { font: 500 0.75rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea { width: 100%; box-sizing: border-box; background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid var(--stroke); border-radius: 0;
  font: 400 1.0625rem/1.5 var(--body); padding: 8px 0; -webkit-appearance: none; appearance: none; transition: border-color .2s; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--fg); }
.field.bad input, .field.bad textarea { border-bottom-color: var(--amber); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.btn { font: 500 1rem/1 var(--body); background: transparent; color: var(--fg); border: 1px solid var(--fg); padding: 12px 22px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--fg); color: var(--bg); }
.btn[disabled] { opacity: 0.5; cursor: wait; }
.cform-note { margin: 0; font-size: 0.875rem; color: var(--muted); }
.cform-note a { color: inherit; text-underline-offset: 3px; }
.cform-status { margin: 0; min-height: 1.5em; font-size: 0.9375rem; color: var(--muted); }
.cform-status.ok { color: var(--fg); }
.cform.sent .field, .cform.sent .cform-send { display: none; }
.contact-row a.ig { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 8px; margin: -8px; }
.contact-row a.ig span { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.contact-row a.ig:hover { color: var(--amber); }
.contact-row a.ig:hover span { text-decoration-color: var(--amber); }
.ig-logo { flex: none; transition: transform .2s; }
.contact-row a.ig:hover .ig-logo { transform: rotate(-8deg) scale(1.08); }

/* Auslöse-Moment beim Öffnen der Blende */
.motion .stage::after { content: ""; position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
.motion .stage.shot::after { animation: shot-flash .32s ease-out; }
.motion .stage.shot .aperture { animation: shot-kick .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes shot-flash { 0% { opacity: .22; } 100% { opacity: 0; } }
@keyframes shot-kick { 0% { transform: scale(1.12) rotate(-1.5deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .motion .stage.shot::after, .motion .stage.shot .aperture { animation: none; } }

/* Startseite: HolyPriest-Clip ganz leise und unscharf im Hintergrund, nur für etwas Tiefe */
.stage-bg { display: none; }
.motion .stage-bg { display: block; position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; z-index: 0; pointer-events: none;
  opacity: .16; filter: blur(14px) saturate(.85); }
.motion .stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%); }
.motion .hero { position: relative; z-index: 1; }

/* Sprung zu den Arbeiten: Button drückt sich ein, Fokus zieht auf die Videos scharf */
.reveal-peek video { transition: filter .35s ease-out, transform .5s cubic-bezier(.2,.8,.2,1); }
.reveal.pull .reveal-peek video { filter: blur(0) saturate(1.1) brightness(.95); transform: scale(1); }
.reveal .reveal-hint.hit { animation: hint-hit .45s cubic-bezier(.2,.9,.3,1.3); background: var(--amber); border-color: var(--amber); color: var(--bg); }
@keyframes hint-hit { 0% { transform: translate(-50%, -50%) scale(.88); } 60% { transform: translate(-50%, -50%) scale(1.08); } 100% { transform: translate(-50%, -50%) scale(1); } }
/* Unsichtbare, großzügige Trefferfläche um den Arbeiten-Button: auch knapp daneben zählt */
.reveal .reveal-hint::before { content: ""; position: absolute; inset: -44px -72px; }

/* Sucher-Cursor über Bildern */
html.has-cur .frame.zoomable, html.has-cur .frame.zoomable * { cursor: none; }
.cur { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; width: 0; height: 0; }
.cur-ring { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px;
  transform: scale(1.6); opacity: 0; transition: transform .4s cubic-bezier(.2,1.3,.3,1), opacity .2s; }
.cur-ring b { position: absolute; width: 8px; height: 8px; border: 0 solid var(--amber); transition: transform .25s cubic-bezier(.2,1.4,.3,1); }
.cur-ring b:nth-child(1) { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }
.cur-ring b:nth-child(2) { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.cur-ring b:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; }
.cur-ring b:nth-child(4) { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.cur-ring em { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--amber); transition: transform .2s; }
.cur.vid .cur-ring em { width: 0; height: 0; border-radius: 0; background: none; margin: -5px 0 0 -3px;
  border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--amber); }
.cur-label { position: absolute; left: 0; top: 22px; transform: translateX(-50%) translateY(-4px); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg); white-space: nowrap; opacity: 0; transition: opacity .2s, transform .3s; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.cur.on .cur-ring { transform: scale(1); opacity: 1; }
.cur.on .cur-label { opacity: .9; transform: translateX(-50%); }
.cur.on.down .cur-ring b:nth-child(1) { transform: translate(4px,4px); }
.cur.on.down .cur-ring b:nth-child(2) { transform: translate(-4px,4px); }
.cur.on.down .cur-ring b:nth-child(3) { transform: translate(4px,-4px); }
.cur.on.down .cur-ring b:nth-child(4) { transform: translate(-4px,-4px); }
.cur.on.down .cur-ring em { transform: scale(1.4); }
/* Großansicht: Hintergrund und Bedienung blenden weich, das Bild selbst kommt aus dem Rahmen geflogen */
.lb.lb-in { animation: lb-bg-in .45s ease-out both; }
.lb.lb-out { animation: lb-bg-out .4s ease-in both; }
.lb.lb-in .lb-btn, .lb.lb-in .lb-meta { animation: lb-ui-in .5s .18s ease-out both; }
.lb.lb-out .lb-btn, .lb.lb-out .lb-meta { opacity: 0; transition: opacity .15s; }
@keyframes lb-bg-in { from { background-color: rgba(0,0,0,0); } to { background-color: rgba(0,0,0,.96); } }
@keyframes lb-bg-out { from { background-color: rgba(0,0,0,.96); } to { background-color: rgba(0,0,0,0); } }
@keyframes lb-ui-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#lb-stage img, #lb-stage video { cursor: zoom-out; }
html.has-cur #lb-stage img { cursor: none; }
.cur.out .cur-ring em { width: 8px; height: 1.5px; margin: -.75px 0 0 -4px; border-radius: 0; }

/* Auslöser nach dem Absenden: eine Blende schließt sich über dem Formular und geht wieder auf */
.cform { position: relative; }
.shutter { position: absolute; inset: -12px; overflow: hidden; pointer-events: none; z-index: 5; visibility: hidden; }
.shutter i { position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  box-shadow: 0 0 0 200vmax var(--bg), inset 0 0 0 2px var(--amber); }
.shutter.go { visibility: visible; animation: shutterVis .75s linear forwards; }
.shutter.go i { animation: shutterIris .75s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes shutterIris { 0% { width: 260%; } 42% { width: 0%; } 52% { width: 0%; } 100% { width: 260%; } }
@keyframes shutterVis { 99% { visibility: visible; } 100% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .shutter.go { animation: none; visibility: hidden; } }

/* Hover auf Arbeiten: minimal näher, minimal heller. Kaum zu sehen, fühlt sich aber an. */
@media (hover: hover) and (pointer: fine) {
  .js .frame.zoomable:not(.af-wait) img, .js .frame.zoomable:not(.af-wait) .clip, .js .frame.zoomable:not(.af-wait) .ph {
    transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease, opacity 1.2s ease; }
  .js .frame.zoomable:not(.af-wait):hover img, .js .frame.zoomable:not(.af-wait):hover .ph {
    transform: scale(1.03); filter: brightness(1.08); }
  /* Videos: Safari skaliert ein laufendes Video nicht zuverlässig, deshalb zoomt die Hülle drumherum */
  .js .frame.zoomable .vwrap { transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
  .js .frame.zoomable:not(.af-wait):hover .vwrap { transform: scale(1.03); filter: brightness(1.08); }
}

/* Schlaf-z: steigen schräg aus dem Auge auf und verblassen */
.zz { position: fixed; z-index: 70; pointer-events: none; font: 700 11px/1 var(--mono); color: var(--amber); text-transform: lowercase;
  animation: zFloat 2.8s cubic-bezier(.3,.6,.4,1) forwards; }
.zz.big { font-size: clamp(16px, 2vw, 26px); }
@keyframes zFloat { 0% { opacity: 0; transform: translate(0, 0) scale(.5) rotate(-8deg); } 18% { opacity: .95; }
  100% { opacity: 0; transform: translate(1.6em, -3.2em) scale(1.25) rotate(10deg); } }

/* Scrollleiste passend zur Seite */
html { scrollbar-color: var(--amber) #0d0c0b; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0c0b; }
::-webkit-scrollbar-thumb { background: #3a3632; border-radius: 10px; border: 3px solid #0d0c0b; }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }

/* Kleine Hinweise (kopiert, Rechtsklick) */
.toast { position: absolute; z-index: 80; padding: 9px 14px; background: rgba(13,12,11,.92); color: var(--fg); border: 1px solid rgba(232,130,42,.55);
  font: 500 .72rem/1.3 var(--mono); letter-spacing: .06em; pointer-events: none; opacity: 0; transform: translateY(6px) scale(.97);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2,1.3,.3,1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: min(320px, calc(100vw - 24px)); }
.toast.on { opacity: 1; transform: none; }
.toast a { pointer-events: auto; color: var(--amber); margin-left: 8px; }
a.copied { animation: copied .5s cubic-bezier(.3,1.6,.4,1); }
@keyframes copied { 40% { color: var(--amber); transform: scale(1.02); } }
.contact-big { display: inline-block; }

/* Ladebalken für Videos */
.loadbar { position: fixed; left: 0; top: 0; z-index: 90; height: 2px; width: 100%; background: var(--amber); transform-origin: 0 50%; transform: scaleX(0);
  opacity: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease; pointer-events: none; box-shadow: 0 0 8px rgba(232,130,42,.6); }
.loadbar.on { opacity: 1; }

/* Handy: dezenter Anfragen-Knopf, sobald man bei den Arbeiten ist, verschwindet am Kontakt wieder */
.fab { display: none; }
@media (max-width: 760px) {
  .fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 40; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    padding: 12px 18px; border: 1px solid var(--amber); border-radius: 999px; background: rgba(10,9,8,.82); color: var(--fg); text-decoration: none;
    font: 500 .95rem/1 var(--body); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2,1.3,.3,1); }
  .fab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
  .fab.on { opacity: 1; transform: none; pointer-events: auto; }
  .fab:active { transform: scale(.96); }
}

.reveal-top .dot { color: inherit; }
/* Variante "Film": hinter der Blende liegt deine Arbeit statt einer Farbfläche */
html.v-film .motion .reveal, html.v-film.motion .reveal { grid-template-rows: 1fr; }
html.v-film .reveal-top { position: absolute; inset: 0; z-index: 2; background: none; color: var(--fg); pointer-events: none;
  text-shadow: 0 2px 30px rgba(0,0,0,.45); padding: 56px 16px 16px; }
html.v-film .reveal-top .dot { color: var(--amber); }
html.v-film .reveal-small { color: rgba(242,237,228,.78); }
html.v-film .reveal-peek { grid-row: 1; }
html.v-film .reveal-peek video { filter: brightness(.5) saturate(1.05); transform: scale(1.04); transition: filter 1.2s ease, transform 1.6s cubic-bezier(.2,.7,.2,1); }
html.v-film .reveal.pull .reveal-peek video { filter: brightness(.75) saturate(1.1); transform: scale(1); }
html.v-film .reveal-peek::before { background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 75%), linear-gradient(transparent 60%, rgba(0,0,0,.6)); }
html.v-film .reveal .reveal-hint { top: auto; bottom: 9vh; transform: translateX(-50%); }

/* Uhrzeit beim Kontakt, Visitenkarte */
.clock { margin: -4px 0 0; color: var(--muted); min-height: 1.2em; }
.clock b { color: var(--fg); font-weight: 500; }
.contact-row a.vcf { color: var(--muted); }
.contact-row a.vcf:hover { color: var(--amber); }
.cform-status .draft-clear { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Druck: saubere helle Seite mit Leistungen und Kontakt statt schwarzer Fläche */
.print-head { display: none; }
@media print {
  @page { margin: 16mm 16mm 18mm; }
  html, body { background: #fff !important; color: #111 !important; }
  *, *::before, *::after { color: #111 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; filter: none !important; backdrop-filter: none !important; animation: none !important; transition: none !important; }
  .site-header, .intro, #arbeiten, .marquee, .fab, .cform, .lb, .toast, .loadbar, .cur, .zz, .vcf, .clock, .shutter, .curtain, .snap-next { display: none !important; }
  .print-head { display: block; border-bottom: 2px solid #E8822A; padding-bottom: 10px; margin-bottom: 8mm; }
  .print-head strong { display: block; font: 900 22pt/1 var(--display); letter-spacing: .02em; }
  .print-head span { display: block; margin-top: 6px; font: 400 9pt/1.4 var(--mono); }
  .dot { color: #E8822A !important; }
  section { break-inside: avoid-page; margin: 0 !important; padding: 0 0 8mm !important; transform: none !important; opacity: 1 !important; }
  .section, .wrap { padding-top: 0 !important; padding-bottom: 0 !important; max-width: none !important; }
  h2 { font-size: 20pt !important; margin: 0 0 4mm !important; }
  h3 { font-size: 12pt !important; }
  p, li { font-size: 10pt !important; line-height: 1.45 !important; }
  .contact-big { font-size: 18pt !important; text-decoration: none; }
  a { text-decoration: none !important; }
  .contact-row a.ig::after { content: " instagram.com/overrated.frames"; font: 400 10pt var(--mono); }
  .ig-logo { width: 14px; height: 14px; }
  .site-footer { border-top: 1px solid #ccc !important; padding-top: 4mm; }
  .js [style*="opacity"] { opacity: 1 !important; }
}