/* studio YY — Design System.
   Farben, Typografie, Abstaende, Bewegung. Alle Groessen haengen an --u.
   Niemals vh oder rohes vw neu einfuehren; einzige Ausnahme sind
   formatfuellende Video-Cover, die echte Viewport-Masse brauchen. */

:root{
  /* ---------- Zentrale Masseinheit ---------- */
  --u:min(1vw,19.2px);
  --gutter:clamp(20px, calc(4.6 * var(--u)), 92px);
  --maxw:min(78vw, 2200px);
  --sec:clamp(96px, calc(10.1 * var(--u)), 194px);
  --sec-lg:clamp(128px, calc(14 * var(--u)), 269px);
  --luecke:clamp(10px, calc(1.4 * var(--u)), 27px);
  --gap-grid:clamp(32px, calc(4 * var(--u)), 56px);
  --gap-media:clamp(14px, calc(2 * var(--u)), 26px);
  --band-foot:clamp(50px, calc(8 * var(--u)), 120px);
  --pad-sheet:clamp(14px, calc(2 * var(--u)), 26px);
  --header-pad:22px;
  --header-h:118px;
  --radius:0px;
  --radius-pill:100px;
  --hairline:1px;
}
@media (max-width:680px){:root{--maxw:100vw}}

/* ---------- Farben. Schwarz ist echtes #000, kein Dunkelgrau. ---------- */
:root{
  --ink:#000;
  --ink-soft:#121214;
  --ink-sheet:#0e0e10;
  --ink-frame:#17171a;
  --paper:#f4f3f1;
  --white:#ffffff;
  --ink-on-light:#000;

  --silver:#7b7b7a;
  --silver-bright:#cfd4da;
  --em:#7b7b7a;
  --silver-on-light:#7b7b7a;

  --signal:#e8534e;

  --line:rgba(244,243,241,.13);
  --line-strong:rgba(244,243,241,.28);
  --line-on-light:rgba(23,20,15,.12);
  --line-on-light-strong:rgba(23,20,15,.24);

  --scrim-hero:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.04) 30%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.72) 88%,rgba(0,0,0,.86));
  --scrim-case:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.05) 32%,rgba(0,0,0,.14) 58%,rgba(0,0,0,.74) 88%,rgba(0,0,0,.88));
  --scrim-caption:linear-gradient(180deg,transparent,rgba(0,0,0,.9));
  --glass:rgba(0,0,0,.28);

  --bg-page:var(--ink);
  --bg-band:var(--white);
  --surface-media:var(--ink-soft);
  --surface-sheet:var(--ink-sheet);
  --text-strong:var(--paper);
  --text-body:var(--paper);
  --text-bright:var(--silver-bright);
  --text-label:var(--silver);
  --text-accent:var(--em);
  --border-hairline:var(--line);
  --border-rule:var(--line-strong);
  --focus-ring:var(--silver-bright);
}
.band-light{
  --paper:#000;--silver:#7b7b7a;--silver-bright:#000;--ink-soft:#f0f0ee;--em:#7b7b7a;
  --line:rgba(23,20,15,.12);--line-strong:rgba(23,20,15,.24);
  --text-strong:#000;--text-body:#000;--text-bright:#000;
  background:var(--white);color:var(--ink-on-light);
}

/* ---------- Schriften ---------- */
@font-face{font-family:'Red Hat Display';font-weight:400;font-style:normal;font-display:swap;src:url("schriften/redhat-display-400.woff2") format('woff2')}
@font-face{font-family:'Red Hat Display';font-weight:500;font-style:normal;font-display:swap;src:url("schriften/redhat-display-500.woff2") format('woff2')}
@font-face{font-family:'Red Hat Display';font-weight:700;font-style:normal;font-display:swap;src:url("schriften/redhat-display-700.woff2") format('woff2')}

:root{
  --sans:'Red Hat Display','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Menlo",Consolas,monospace;
  --font-body:var(--sans);
  --font-label:var(--mono);

  --text-body-size:max(15px, calc(.984 * var(--u)));
  --text-lead:clamp(.95rem, calc(1.4 * var(--u)), 1.08rem);
  --text-h1-hero:clamp(1.9rem, calc(4.8 * var(--u)), 5.8rem);
  --text-h1-case:clamp(2.4rem, calc(7.4 * var(--u)), 9rem);
  --text-h2:clamp(2rem, calc(5 * var(--u)), 5.4rem);
  --text-h2-intro:clamp(2.3rem, calc(6.4 * var(--u)), 5.4rem);
  --text-h2-mid:clamp(1.9rem, calc(4.4 * var(--u)), 3.4rem);
  --text-h2-small:clamp(1.7rem, calc(3.4 * var(--u)), 2.8rem);
  --text-h3:1.24rem;
  --text-quote:clamp(1.05rem, calc(1.9 * var(--u)), 1.9rem);
  --text-mail:clamp(1.2rem, calc(3 * var(--u)), 2rem);
  --text-menu:clamp(2rem, calc(9 * var(--u)), 3.4rem);

  --text-eyebrow:.72rem;
  --text-nav:.74rem;
  --text-cta:.76rem;
  --text-meta:.7rem;
  --text-micro:.66rem;
  --text-nano:.56rem;

  --lh-body:1.72;
  --lh-tight:1.5;
  --lh-hero:.94;
  --lh-h2:1.04;
  --ls-eyebrow:.22em;
  --ls-nav:.14em;
  --ls-cta:.18em;
  --ls-meta:.16em;
  --ls-h2:.006em;
  --ls-tight:-.01em;
  --w-regular:400;
  --w-medium:500;
  --w-bold:700;
}

/* ---------- Bewegung: ruhig, kein Bounce ---------- */
:root{
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-soft:ease;
  --dur-hover:.25s;
  --dur-state:.35s;
  --dur-slide:.6s;
  --dur-zoom:.8s;
  --dur-reveal:.9s;
  --reveal-shift:22px;
  --zoom-hover:1.04;
  --zoom-hover-soft:1.03;
  --opacity-hover:.82;
  --blur-glass:6px;
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg-page);color:var(--text-strong);font-family:var(--font-body);font-weight:var(--w-regular);line-height:var(--lh-tight);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:opacity var(--dur-hover),color var(--dur-hover)}
a:hover{color:inherit;opacity:.82}
img,iframe,video{display:block}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
section[id]{scroll-margin-top:var(--header-h)}

.reveal{opacity:0;transform:translateY(var(--reveal-shift));transition:opacity var(--dur-reveal) var(--ease-soft),transform var(--dur-reveal) var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Kopfzeile ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:var(--header-pad) var(--gutter);mix-blend-mode:difference;pointer-events:none}
header .logo,header .site-nav-desktop,header .site-nav-toggle{pointer-events:auto}
.site-nav-desktop a{color:inherit}
header .logo{display:block;margin-left:-17px}
header .logo img{height:64px;width:auto;display:block}
.site-nav-desktop{display:flex;gap:28px}
.site-nav-desktop a{font-family:var(--mono);font-size:var(--text-nav);letter-spacing:var(--ls-nav);text-transform:uppercase;opacity:.85;transition:opacity var(--dur-hover)}
.site-nav-desktop a:hover{opacity:1}

.site-nav-toggle{display:none;background:none;border:0;padding:10px 0 10px 14px;cursor:pointer;flex-direction:column;gap:5px;align-items:flex-end;z-index:70;position:relative}
.site-nav-toggle span{display:block;height:2px;background:var(--paper);transition:width var(--dur-hover),opacity var(--dur-hover)}
.site-nav-toggle span:nth-child(1){width:26px}
.site-nav-toggle span:nth-child(2){width:19px}
.site-nav-toggle span:nth-child(3){width:26px}
.site-nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);width:26px}
.site-nav-toggle.is-open span:nth-child(2){opacity:0}
.site-nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:26px}

.nav-overlay{position:fixed;inset:0;z-index:55;background:var(--ink);display:none;flex-direction:column;align-items:flex-end;text-align:right;justify-content:center;gap:clamp(10px, 2.4vh, 22px);padding:var(--gutter)}
.nav-overlay.is-open{display:flex}
.nav-overlay a{font-family:var(--sans);font-weight:var(--w-medium);font-size:var(--text-menu);line-height:1.12;letter-spacing:-.01em;color:var(--paper)}
body.nav-open{overflow:hidden}

@media (max-width:900px){
  .site-nav-desktop{display:none}
  .site-nav-toggle{display:flex}
}

/* ---------- Footer ---------- */
footer{background:var(--white);color:var(--ink-on-light);border-top:1px solid var(--line-on-light-strong);padding:28px var(--gutter);display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center}
footer p,footer a{font-family:var(--mono);font-size:var(--text-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--silver-on-light)}
footer .legal{display:flex;gap:22px;flex-wrap:wrap}
@media (max-width:560px){footer{justify-content:center;text-align:center}}

/* ---------- Wiederverwendbare Bausteine ---------- */
.eyebrow{font-family:var(--mono);font-size:var(--text-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--silver);display:inline-block}
.eyebrow--block{display:block;margin-bottom:16px}

.section-head{display:flex;justify-content:flex-start;align-items:baseline;gap:24px;flex-wrap:wrap}
.section-head--meta{justify-content:space-between}
.section-head h2{font-weight:var(--w-regular);font-size:var(--text-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);color:var(--text-strong)}
.section-head h2 em{font-style:normal;color:var(--em)}
.section-head .meta{font-family:var(--mono);font-size:var(--text-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--silver)}

.pill-btn{display:inline-flex;align-items:center;gap:11px;border-radius:var(--radius-pill);font-family:var(--mono);font-size:var(--text-cta);letter-spacing:var(--ls-cta);text-transform:uppercase;cursor:pointer;border:0;transition:opacity var(--dur-hover),background var(--dur-state),color var(--dur-state),border-color var(--dur-state)}
.pill-btn--solid{padding:15px 30px;background:var(--paper);color:var(--ink)}
.pill-btn--glass{padding:13px 24px;background:var(--glass);color:var(--paper);border:1px solid rgba(244,243,241,.5);backdrop-filter:blur(var(--blur-glass))}
.pill-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;display:inline-block}

.outline-btn{display:inline-block;background:none;border:1px solid var(--line-strong);color:var(--paper);font-family:var(--mono);font-size:var(--text-nav);letter-spacing:var(--ls-meta);text-transform:uppercase;padding:15px 26px;cursor:pointer}
.outline-btn--compact{padding:12px 22px}
.outline-btn--onlight{border-color:var(--line-on-light-strong);color:var(--ink-on-light)}

.media-caption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:var(--text-meta);letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--silver)}
.media-caption--end{justify-content:flex-end}
.media-caption b{color:var(--paper);font-weight:var(--w-medium);letter-spacing:.06em}

.marquee-wrap{width:100vw;position:relative;left:50%;transform:translateX(-50%)}
.marquee-mask{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content}
.marquee-group{display:flex;gap:clamp(34px, calc(4.5 * var(--u)), 64px);padding-right:clamp(34px, calc(4.5 * var(--u)), 64px)}
.marquee-group span{font-weight:var(--w-medium);font-size:1rem;letter-spacing:.02em;color:var(--silver);white-space:nowrap}
@keyframes syy-marquee{to{transform:translateX(-50%)}}
.marquee-track.is-anim{animation:syy-marquee 52s linear infinite}
.marquee-track.is-anim.slow{animation-duration:60s}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line);padding:24px 0}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:baseline;font-weight:var(--w-medium);font-size:clamp(1.05rem, calc(2.1 * var(--u)), 1.45rem);letter-spacing:var(--ls-h2);color:var(--text-strong)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{color:var(--silver-bright);font-family:var(--mono);flex:none}
.faq-item p{color:var(--text-body);max-width:74ch;margin-top:16px;font-size:var(--text-body-size);line-height:var(--lh-body)}
.faq-item p b{color:var(--paper)}

/* ---------- Kontaktbogen-Frame (Archiv, Work-Bilder) ---------- */
.frame{position:relative;overflow:hidden;background:var(--ink-frame);border:0;padding:0;display:block;cursor:pointer;width:100%}
.frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.82);transition:filter .5s ease,transform var(--dur-zoom) var(--ease)}
.frame:hover img{filter:none;transform:scale(1.05)}
.frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(244,243,241,.06)}
.frame .no{position:absolute;left:5px;bottom:4px;z-index:3;font-family:var(--mono);font-size:var(--text-nano);letter-spacing:.1em;color:rgba(244,243,241,.55);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.frame .no.is-selected{color:var(--signal)}
.frame .vid{position:absolute;inset:0;overflow:hidden;background:#000}
.frame .vid img{position:absolute;inset:0;transition:opacity .4s ease,filter .5s ease}
.frame:hover .vid img{filter:none}
.frame.is-playing .vid img{opacity:0}
.frame .vid iframe{position:absolute;top:50%;left:50%;width:106%;height:106%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.frame .playmark{position:absolute;right:6px;top:6px;z-index:3;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--paper);filter:drop-shadow(0 0 3px rgba(10,10,11,.6))}

/* ---------- Rechtsseiten (Impressum, Datenschutz, AGB) ---------- */
.legal-main{max-width:var(--maxw);margin:0 auto;padding:calc(var(--sec) + 60px) var(--gutter) var(--sec)}
.legal-main h1{font-weight:400;font-size:clamp(2.2rem, calc(6 * var(--u)), 5rem);line-height:1;margin:14px 0 clamp(38px, calc(5 * var(--u)), 64px);padding-bottom:clamp(28px, calc(4 * var(--u)), 48px);border-bottom:1px solid var(--line-strong)}
.legal-main h2{font-weight:400;font-size:clamp(1.3rem, calc(2.6 * var(--u)), 2rem);line-height:1.16;margin:clamp(48px, calc(6 * var(--u)), 80px) 0 18px;padding-top:clamp(28px, calc(3.4 * var(--u)), 44px);border-top:1px solid var(--line)}
.legal-main h3{font-weight:var(--w-medium);font-size:var(--text-h3);line-height:1.3;margin:32px 0 12px;color:var(--paper)}
.legal-main ul{color:var(--silver);font-size:var(--text-body-size);line-height:1.75;margin:0 0 16px 1.2em;max-width:78ch}
.legal-main li{margin-bottom:4px}
.legal-main a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Case-Seiten ---------- */
.case-hero{position:relative;height:min(100vh, 720px);min-height:460px;overflow:hidden;background:#000}
.case-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-hero__scrim{position:absolute;inset:0;z-index:1;background:var(--scrim-case)}
.case-hero__body{position:absolute;z-index:2;inset:auto var(--gutter) var(--gutter) var(--gutter);display:flex;flex-direction:column;gap:18px}
.case-hero__body h1{font-weight:400;font-size:var(--text-h1-case);line-height:var(--lh-hero);max-width:14ch;color:var(--paper)}
.case-hero__body h1 em{font-style:normal;color:var(--em)}

.case-intro{max-width:var(--maxw);margin:0 auto;padding:var(--sec-lg) var(--gutter)}
.case-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px, calc(4 * var(--u)), 64px);margin-top:clamp(30px, calc(4 * var(--u)), 52px);border-top:1px solid var(--line-strong);padding-top:clamp(30px, calc(4 * var(--u)), 52px)}
.case-intro-grid p{color:var(--silver);font-size:var(--text-body-size);line-height:var(--lh-body)}
@media (max-width:900px){.case-intro-grid{grid-template-columns:1fr}}

.fact-grid{display:grid;gap:clamp(18px, calc(2.6 * var(--u)), 36px);padding-top:28px;border-top:1px solid var(--line-strong);margin-top:clamp(40px, calc(5 * var(--u)), 68px)}
.fact-grid b{display:block;font-weight:var(--w-medium);font-size:clamp(.98rem, calc(1.4 * var(--u)), 1.2rem);letter-spacing:var(--ls-tight);color:var(--text-strong)}
.fact-grid span{display:block;font-family:var(--mono);font-size:var(--text-micro);letter-spacing:var(--ls-nav);text-transform:uppercase;color:var(--silver);margin-top:8px}
.fact-grid--nogap{padding-top:0;border-top:0;margin-top:0}
@media (max-width:680px){.fact-grid{grid-template-columns:repeat(2, 1fr) !important}}

.case-video-sec{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gutter)}
.case-gallery{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--sec);display:grid;gap:var(--gap-media)}

.case-making{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--sec);display:grid;grid-template-columns:.45fr 1.55fr;gap:clamp(32px, calc(5 * var(--u)), 80px);align-items:start}
@media (max-width:900px){.case-making{grid-template-columns:1fr}}
.case-making__tag{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
.case-making p{color:var(--silver);font-size:var(--text-body-size);line-height:var(--lh-body);max-width:46ch;margin-top:22px}

.case-claim{max-width:var(--maxw);margin:0 auto;padding:clamp(88px, calc(8.7 * var(--u)), 167px) var(--gutter)}
.case-claim h2{font-weight:var(--w-regular);font-size:clamp(2.2rem, calc(6.2 * var(--u)), 5.2rem);line-height:1.06;letter-spacing:var(--ls-tight);color:var(--text-strong)}
.case-claim h2 em{font-style:normal;color:var(--em)}
.case-claim .meta{margin-top:clamp(34px, calc(4 * var(--u)), 56px);font-family:var(--mono);font-size:.72rem;letter-spacing:var(--ls-cta);text-transform:uppercase;color:var(--silver)}

.case-credits{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gutter);border-top:1px solid var(--line)}

.case-next{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gutter);display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;border-top:1px solid var(--line)}
.case-next a{font-weight:var(--w-regular);font-size:clamp(1.4rem, calc(3.4 * var(--u)), 2.6rem);letter-spacing:var(--ls-tight);border-bottom:1px solid var(--line-strong);padding-bottom:6px;transition:border-color .3s}
.case-next a:hover{border-color:var(--paper)}
.legal-main p{color:var(--silver);font-size:var(--text-body-size);line-height:1.75;margin-bottom:16px;max-width:78ch}
.legal-main address{font-style:normal;color:var(--silver);line-height:1.75;font-size:var(--text-body-size);margin-bottom:16px}
.legal-main .stand{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver);margin-top:40px}
.legal-main .lead-strong{color:var(--silver-bright);max-width:70ch}
.legal-main .lead-todo{color:var(--signal);max-width:70ch}