/* 5vorFILM · Zwischenseite "in Arbeit" (Nov. 2026) · Runde 2
   Basis: ruhiges Schriftbild (aus A) + Karte mit Eselsohr und REC-Anzeige (aus C) + optional Sucher-Rahmen (aus B).
   Varianten über Klassen am <body>:
     Schriftbild  t-line (eine Zeile Versalien) · t-mark (Wortmarke 5vorFILM) · t-versal (zweizeilig Versalien)
     Kontakt      c-links · c-button · c-chips
     Auftritt     a-slide · a-ear · a-drop
     Extras       vf (Sucher + Timecode oben) · left (Karte links)
   Keine externen Ressourcen, keine Cookies, kein Local Storage. */

@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-var.woff") format("woff");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ink:#F5F5F2; --mute:rgba(245,245,242,.7); --faint:rgba(245,245,242,.3);
  --signal:#FF3B30; --base:#0B0B0C;
  --font:"Montserrat",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(18px,4vw,56px); --cut:clamp(12px,1.4vw,20px); --ease:cubic-bezier(.22,.8,.24,1);
  /* Karte + Blatt: hell */
  --glass:rgba(248,248,245,.78); --glass-ink:#141415; --glass-mute:#5B5B56; --glass-line:rgba(20,20,21,.14);
  --paper:rgba(246,246,242,.95); --paper-ink:#141415; --paper-mute:#5D5D58; --paper-line:#D3D3CD;
  --btn:#141415; --btn-ink:#F5F5F2;
  color-scheme:dark light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --glass:rgba(12,12,13,.5); --glass-ink:#F5F5F2; --glass-mute:rgba(245,245,242,.66); --glass-line:rgba(245,245,242,.16);
  --paper:rgba(16,16,17,.88); --paper-ink:#ECECE8; --paper-mute:#A2A29C; --paper-line:#34343A;
  --btn:#F5F5F2; --btn-ink:#141415}}
:root[data-theme="dark"]{
  --glass:rgba(12,12,13,.5); --glass-ink:#F5F5F2; --glass-mute:rgba(245,245,242,.66); --glass-line:rgba(245,245,242,.16);
  --paper:rgba(16,16,17,.88); --paper-ink:#ECECE8; --paper-mute:#A2A29C; --paper-line:#34343A;
  --btn:#F5F5F2; --btn-ink:#141415}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--base);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--base);color:var(--ink);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased;min-height:100svh}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
address{font-style:normal}
.k{display:block;font-weight:600;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--glass-mute);margin-bottom:5px}
.tc{font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* ---------- Hintergrund ---------- */
.bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:var(--base);view-transition-name:bg}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 45%),linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,0) 24%),rgba(0,0,0,.1)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.legal-page .scrim{background:rgba(0,0,0,.48)}
.legal-page .bg{filter:blur(10px) saturate(.8);transform:scale(1.06)}

/* ---------- Bühne ---------- */
.stage{position:relative;z-index:2;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;gap:24px;
  padding:calc(var(--pad) + env(safe-area-inset-top,0px)) calc(var(--pad) + env(safe-area-inset-right,0px)) calc(var(--pad) * .7 + env(safe-area-inset-bottom,0px)) calc(var(--pad) + env(safe-area-inset-left,0px))}
.vf .stage{padding:calc(var(--pad) * 1.35 + env(safe-area-inset-top,0px)) calc(var(--pad) * 1.35) calc(var(--pad) * 1.05 + env(safe-area-inset-bottom,0px))}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.logo{display:block;width:clamp(44px,4.4vw,64px);view-transition-name:logo;animation:ear-in 1.1s .1s var(--ease) backwards}
.logo img{display:block;width:100%;height:auto}

/* ---------- Karte (aus C) ---------- */
.info{align-self:end;justify-self:end;width:min(100%,460px)}
.left .info{justify-self:start}
.card{display:grid;gap:18px;padding:clamp(22px,2.4vw,32px);padding-top:calc(clamp(22px,2.4vw,32px) + 4px);background:var(--glass);color:var(--glass-ink);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  clip-path:polygon(calc(var(--cut) * 2.4) 0,100% 0,100% 100%,0 100%,0 calc(var(--cut) * 2.4));view-transition-name:sheet}
.label{display:flex;align-items:center;gap:10px;margin:0;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.label .tc{margin-left:auto;color:var(--glass-mute)}
.vf .label .tc{display:none}
.bar{height:2px;background:var(--glass-line);margin-top:-8px}
.bar i{display:block;height:100%;background:var(--signal);transform-origin:0 50%;transform:scaleX(0)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal);animation:rec 1.6s steps(1) infinite;flex:none}
.paused .dot{animation:none;background:var(--faint);box-shadow:none}
@keyframes rec{50%{opacity:.15}}

.brand{margin:4px 0 0;font-weight:600;line-height:1.2}
.brand b{font-weight:inherit}
.sub{margin:-6px 0 0;color:var(--glass-mute);font-size:14.5px;line-height:1.45;text-wrap:balance}
.places{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:16px;border-top:1px solid var(--glass-line)}
.places address{line-height:1.5;font-size:14.5px}
.contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.contact .k{flex-basis:100%;margin-bottom:0}
.cta{text-decoration:none;font-size:14.5px}

/* Schriftbild 1 · eine Zeile Versalien (ruhig, wie A) */
.t-line .brand{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase}
.t-line .b2{font-weight:400}
.t-line .b2::before{content:"|";margin:0 .7em;font-weight:300;opacity:.55}

/* Schriftbild 2 · Wortmarke */
.t-mark .brand{display:grid;justify-items:start;gap:6px}
.t-mark .b1{font-size:clamp(34px,3vw,44px);font-weight:300;letter-spacing:-.015em;line-height:1}
.t-mark .b1 b{font-weight:700}
.t-mark .b2{font-size:10.5px;font-weight:500;letter-spacing:.46em;text-transform:uppercase;padding-left:.1em}

/* Schriftbild 3 · zweizeilig Versalien, gleiche Größe */
.t-versal .brand{display:grid;font-size:clamp(21px,1.9vw,26px);letter-spacing:.12em;text-transform:uppercase;line-height:1.12}
.t-versal .b1{font-weight:600}
.t-versal .b2{font-weight:300}

/* Kontakt-Formen */
.c-links .cta::after{content:" →";opacity:.55;transition:opacity .3s}
.c-links .cta:hover{text-decoration:underline}
.c-links .cta:hover::after{opacity:1}
.c-button .cta.mail{background:var(--btn);color:var(--btn-ink);padding:10px 16px 10px 20px;font-weight:600;font-size:13px;letter-spacing:.04em;
  clip-path:polygon(9px 0,100% 0,100% 100%,0 100%,0 9px)}
.c-button .cta.mail:hover{opacity:.85}
.c-button .cta.tel:hover{text-decoration:underline}
.c-chips .cta{border:1px solid var(--glass-line);padding:8px 14px 8px 16px;font-size:13px;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);transition:background .25s,color .25s}
.c-chips .cta:hover{background:var(--glass-ink);color:var(--btn-ink)}

/* ---------- Fuß ---------- */
.bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.legal{display:flex;gap:28px}
.legal a{text-decoration:none;color:var(--ink)}
.legal a:hover,.legal a[aria-current="page"]{text-decoration:underline}
.pause{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.pause:hover{color:var(--ink)}
.left .bottom{flex-direction:row-reverse}

/* ---------- Sucher (aus B): klappt von der Mitte nach außen auf, Timecode oben ---------- */
.vfr{display:none}
.vf .vfr{display:block;position:fixed;inset:calc(var(--pad) * .55);z-index:2;pointer-events:none;animation:unfold 1.3s .15s var(--ease) backwards}
@keyframes unfold{from{inset:38% 34%;opacity:0}30%{opacity:1}}
.vfr i{position:absolute;width:clamp(22px,3vw,44px);height:clamp(22px,3vw,44px);border:0 solid rgba(255,255,255,.82)}
.vfr i:nth-child(1){left:0;top:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpolyline points='.75,44 .75,15 15,.75 44,.75' fill='none' stroke='white' stroke-opacity='.82' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.vfr i:nth-child(2){right:0;top:0;border-top-width:1.5px;border-right-width:1.5px}
.vfr i:nth-child(3){right:0;bottom:0;border-bottom-width:1.5px;border-right-width:1.5px}
.vfr i:nth-child(4){left:0;bottom:0;border-bottom-width:1.5px;border-left-width:1.5px}
.vfr b{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:.5}
.vfr b::before,.vfr b::after{content:"";position:absolute;background:#fff}
.vfr b::before{left:50%;top:0;bottom:0;width:1px}
.vfr b::after{top:50%;left:0;right:0;height:1px}
.hud{display:none}
.vf .hud{display:flex;gap:clamp(14px,2.4vw,36px);align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;animation:rise .8s .9s var(--ease) backwards}
.hud .rec{display:flex;gap:8px;align-items:center}
.hud .tc{font-size:12px}
.hud .fmt{color:var(--mute)}

/* ---------- Auftritt der Karte ---------- */
@keyframes ear-in{from{clip-path:polygon(0 0,0 0,0 0)}to{clip-path:polygon(0 0,260% 0,0 260%)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes line{from{clip-path:inset(0 0 100% 0);transform:translateY(.4em)}to{clip-path:inset(0 0 0 0)}}
@keyframes slide{from{transform:translateX(44px);opacity:0;clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%,100% 100%)}}
@keyframes ear{from{clip-path:polygon(0 0,0 0,0 0,0 0,0 0)}}
@keyframes drop{0%{transform:translateY(-36px);opacity:0}60%{transform:translateY(5px);opacity:1}80%{transform:translateY(-2px)}}
.a-slide .card{animation:slide 1s .3s var(--ease) backwards}
.a-ear .card{animation:ear 1.1s .3s var(--ease) backwards}
.a-drop .card{animation:drop .9s .35s cubic-bezier(.3,.7,.3,1) backwards}
.vf .card{animation-delay:1s}
.card>*{animation:line .8s var(--ease) backwards}
.card>:nth-child(1){animation-delay:.7s}.card>:nth-child(2){animation-delay:.75s}.card>:nth-child(3){animation-delay:.85s}
.card>:nth-child(4){animation-delay:.95s}.card>:nth-child(5){animation-delay:1.05s}.card>:nth-child(6){animation-delay:1.15s}
.vf .card>*{animation-delay:1.4s}
.bottom{animation:rise .8s 1.2s var(--ease) backwards}

/* ---------- Schmal / Handy ---------- */
@media (max-width:720px){
  .info,.left .info{justify-self:stretch;width:auto}
  .vf .stage{padding:calc(var(--pad) * 1.6 + env(safe-area-inset-top,0px)) calc(var(--pad) * 1.3) calc(var(--pad) * 1.3 + env(safe-area-inset-bottom,0px))}
  .hud .fmt{display:none}
  .left .bottom,.bottom{flex-direction:row}
  .legal{gap:22px}
  .places{gap:14px}
  .t-line .brand{font-size:11.5px;letter-spacing:.16em}
}
@media (max-width:380px){.places{grid-template-columns:1fr}}

/* ================= Impressum / Datenschutz ================= */
.legal-page .stage{grid-template-rows:auto auto auto;align-content:start}
.tools{display:flex;gap:22px;align-items:center}
.back{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--mute)}
.back:hover{color:var(--ink)}
.theme{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);display:flex;gap:8px;align-items:center}
.theme::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.theme:hover{color:var(--ink)}
.sheet{justify-self:center;width:min(100%,780px);background:var(--paper);color:var(--paper-ink);padding:clamp(28px,5vw,64px);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  clip-path:polygon(calc(var(--cut) * 3) 0,100% 0,100% 100%,0 100%,0 calc(var(--cut) * 3));view-transition-name:sheet;animation:sheet-in .9s .05s var(--ease) backwards}
@keyframes sheet-in{from{clip-path:polygon(0 0,0 0,0 0,0 0,0 0)}to{clip-path:polygon(calc(var(--cut) * 3) 0,100% 0,100% 100%,0 100%,0 calc(var(--cut) * 3))}}
.sheet h1{margin:0 0 clamp(24px,4vw,40px);font-weight:300;font-size:clamp(34px,5vw,58px);line-height:1;letter-spacing:-.02em}
.sheet h2{margin:2.2em 0 .5em;font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.sheet p,.sheet ul,.sheet address{margin:0 0 .9em;max-width:64ch}
.sheet .meta{color:var(--paper-mute);font-size:13px;border-top:1px solid var(--paper-line);padding-top:16px;margin-top:2.4em}
.legal-page .bottom{margin-top:8px}

/* ---------- Seitenwechsel: die Karte wächst zum Blatt (View Transitions, seitenübergreifend) ---------- */
@view-transition{navigation:auto}
::view-transition-group(bg){animation:none}
::view-transition-old(bg){animation:none;opacity:0}
::view-transition-new(bg){animation:none}
::view-transition-group(sheet){animation-duration:.75s;animation-timing-function:var(--ease)}
::view-transition-old(sheet),::view-transition-new(sheet){height:100%;width:100%;object-fit:cover;object-position:top left}
:root:active-view-transition .sheet,:root:active-view-transition .card,:root:active-view-transition .card>*{animation:none}

/* ---------- Prototyp-Umschalter (nur lokal / mit ?v=) ---------- */
.proto{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:50;display:flex;gap:3px;align-items:center;padding:4px;background:rgba(0,0,0,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;max-width:calc(100vw - 16px);overflow-x:auto}
.proto span{padding:0 8px;color:var(--mute);white-space:nowrap}
.proto button{padding:6px 9px;white-space:nowrap}
.proto button[aria-pressed="true"]{background:var(--ink);color:#111}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Feinschliff Runde 2 */
.info{width:min(100%,490px)}
@media (min-width:721px){.places .k{white-space:nowrap;letter-spacing:.15em}}
.stage{grid-template-columns:minmax(0,1fr)}
@media (max-width:720px){
  .bottom{flex-wrap:wrap;row-gap:10px;letter-spacing:.14em}
  .legal{gap:18px}
  .pause{letter-spacing:.14em}
}
@media (max-width:420px){.places{grid-template-columns:1fr 1fr}.places .k{letter-spacing:.1em}.places address{font-size:13.5px}}