/* ═══════════════════════════════════════════════════════════
   moritzdoering.world — Bau nach DESIGN-HANDOFF.md
   Drei Farben. Zwei Schriften. Keine Verlaeufe, keine Radien.
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Montserrat XB";
  src:url("fonts/Montserrat-ExtraBold.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cinzel";
  src:url("fonts/Cinzel-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --red:#E11205;
  --ink:#050403;
  --bone:#EDE6D8;
  --dark:#0B0B0A;

  --edge:clamp(18px,3.9vw,56px);
  --navtop:clamp(22px,2.8vw,40px);
  --small:13px;

  --frame:clamp(340px,42vw,760px);
  --gutter:clamp(28px,4.4vw,64px);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{background:var(--red);-webkit-text-size-adjust:100%}
html.is-locked{overflow:hidden}

body{
  background:var(--red);
  color:var(--ink);
  font-family:"Cinzel",Georgia,serif;
  font-weight:400;
  overflow-x:hidden;
}

::selection{background:var(--bone);color:var(--red)}

a{color:inherit;text-decoration:none}
a:hover{color:var(--bone)}
img,video{display:block;max-width:100%}

:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
@media (hover:none){:focus,:focus-visible{outline:none}}

/* ── Kleinschrift: Navigation, Nummern, Kunde ───────────── */
.sm{
  font-family:"Cinzel",Georgia,serif;
  font-size:var(--small);
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ── Wortmarke ─────────────────────────────────────────── */
.mark{
  font-family:"Montserrat XB","Arial Black",sans-serif;
  font-weight:800;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:-.028em;
  word-spacing:-.04em;
  white-space:nowrap;
  font-size:clamp(2.2rem,10.2vw,9.9rem);
}
.mark__l{display:inline-block}
.mark .ch{display:inline-block;will-change:transform}
.js .mark .ch{transform:translateY(.28em);opacity:0}
.js .mark.is-in .ch{
  transform:none;opacity:1;
  transition:transform 720ms var(--ease-soft),opacity 720ms var(--ease-soft);
  transition-delay:var(--d,0ms);
}

/* ── Navigation (fest, ueber allem) ─────────────────────── */
.nav{
  position:fixed;top:var(--navtop);left:var(--edge);right:var(--edge);
  z-index:60;display:flex;justify-content:space-between;
  pointer-events:none;
  color:var(--red);
  transition:color 280ms linear;
}
body[data-nav="ink"] .nav{color:var(--ink)}
.nav > *{pointer-events:auto}

/* Buchstaben-Verdopplung, ohne Layoutsprung */
.dbl{position:relative;display:inline-block;white-space:nowrap}
.dbl .anchor{position:absolute;top:0;white-space:nowrap;width:max-content}
.dbl[data-side="left"] .anchor{left:0}
.dbl[data-side="right"] .anchor{right:0}
.dbl .dup{
  display:inline-grid;grid-template-columns:0fr;overflow:hidden;
  vertical-align:top;
  transition:grid-template-columns 160ms cubic-bezier(.2,.9,.2,1);
  transition-delay:var(--dout,0ms);
}
.dbl .dup > span{min-width:0;white-space:pre}
@media (hover:hover) and (pointer:fine){
  .dbl:hover .dup{
    grid-template-columns:1fr;
    transition-duration:220ms;
    transition-delay:var(--din,0ms);
  }
}
/* auf Touch per Antippen */
.dbl.is-on .dup{
  grid-template-columns:1fr;
  transition-duration:220ms;
  transition-delay:var(--din,0ms);
}
.u{border-bottom:1px solid currentColor;padding-bottom:2px}

/* ── Stapel: Hero + Werke kleben untereinander ──────────── */
.stack{position:relative}

/* ── Hero ──────────────────────────────────────────────── */
.hero{
  position:sticky;top:0;height:100svh;min-height:560px;
  background:var(--dark);overflow:hidden;
}
.hero__reel{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:var(--dark);
}
.hero__mark{
  position:absolute;left:var(--edge);right:var(--edge);
  bottom:clamp(52px,6.2vw,88px);
  color:var(--red);
  z-index:2;
}

/* ── Werkscreen ────────────────────────────────────────── */
.work{
  position:sticky;top:0;height:100svh;min-height:640px;
  background:var(--red);
  clip-path:inset(0 0 calc((1 - var(--p,1)) * 100%) 0);
}
.no-clip .work{clip-path:none;opacity:var(--p,1)}

.work__inner{
  display:grid;
  grid-template-columns:1fr var(--frame) 1fr;
  grid-template-rows:1fr 1fr;
  column-gap:var(--gutter);
  align-items:center;
  height:100%;padding:0 var(--edge);
  color:var(--ink);
  transform:scale(calc(1 + .04 * (1 - var(--p,1)) + .06 * var(--o,0)))
            translateY(calc(var(--o,0) * -4%));
  will-change:transform;
}
.work__row{display:contents}

.work__num{
  grid-column:1;grid-row:1 / 3;justify-self:start;align-self:center;
  font-variant-numeric:tabular-nums;
  transition:color 180ms cubic-bezier(.4,0,.2,1);
}
.work__client{
  grid-column:3;grid-row:1;justify-self:end;align-self:end;
  text-align:right;margin-bottom:clamp(8px,1vw,14px);
}
.work__title{
  grid-column:3;grid-row:2;justify-self:end;align-self:start;
  text-align:right;max-width:12ch;
  font-size:clamp(1.9rem,3.5vw,3.3rem);
  line-height:.98;text-wrap:pretty;
  transition:color 180ms cubic-bezier(.4,0,.2,1);
}
.work__frame{
  grid-column:2;grid-row:1 / 3;align-self:center;
  aspect-ratio:16/9;width:100%;overflow:hidden;background:var(--dark);
}
.work__frame video,.work__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 420ms var(--ease-out);
}
.work__frame img{position:absolute;inset:0}
.work__frame{position:relative}

/* Einlauf der Beschriftung */
.js .work__num,.js .work__client,.js .work__title{
  opacity:0;transform:translateY(12px);
  transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out),color 180ms linear;
}
.js .work.is-in .work__num{opacity:1;transform:none}
.js .work.is-in .work__client{opacity:1;transform:none;transition-delay:60ms}
.js .work.is-in .work__title{opacity:1;transform:none;transition-delay:120ms}

@media (hover:hover) and (pointer:fine){
  .work__inner:hover .work__title,
  .work__inner:hover .work__num{color:var(--bone)}
  .work__inner:hover .work__frame video,
  .work__inner:hover .work__frame img{transform:scale(1.02)}
}

.work__mobtitle{display:none}

/* ── Menue-Overlay ─────────────────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:80;background:var(--red);
  clip-path:inset(100% 0 0 0);
  transition:clip-path 480ms var(--ease-io);
  display:flex;flex-direction:column;
  padding:var(--navtop) var(--edge) clamp(24px,3vw,40px);
  visibility:hidden;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  scrollbar-width:none;
}
.menu::-webkit-scrollbar{display:none}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition-duration:620ms}
.menu__top{display:flex;justify-content:space-between;color:var(--ink)}
.menu__mark{color:var(--ink);margin-top:clamp(20px,2.4vw,34px)}
.menu__list{
  margin-top:clamp(32px,5vw,52px);
  display:flex;flex-direction:column;
}
.menu__item{
  display:grid;grid-template-columns:52px 1fr auto;gap:24px;
  align-items:baseline;
  padding:clamp(11px,1.6vw,15px) 0;
  color:var(--ink);
}
.menu__item .n{font-variant-numeric:tabular-nums;transition:color 180ms linear}
.menu__item .t{
  font-size:clamp(1.5rem,2.65vw,2.4rem);line-height:1.02;
  transition:color 180ms linear;
}
.menu__item:hover .n,.menu__item:hover .t{color:var(--bone)}
.js .menu__item{opacity:0;transform:translateY(10px)}
.menu.is-open .menu__item{
  opacity:1;transform:none;
  transition:opacity 380ms var(--ease-out),transform 380ms var(--ease-out);
  transition-delay:calc(320ms + var(--i,0) * 40ms);
}
.menu__foot{
  margin-top:auto;padding-top:clamp(24px,3vw,40px);
  display:flex;justify-content:space-between;gap:24px;
  color:var(--ink);letter-spacing:.08em;line-height:1.5;
}
.menu__foot > div{display:flex;gap:18px;flex-wrap:wrap}

/* ── Abschluss: Kontakt + Formular ─────────────────────── */
.outro{
  position:relative;z-index:5;background:var(--red);color:var(--ink);
  padding:clamp(72px,11vw,150px) var(--edge) clamp(28px,4vw,44px);
  display:flex;flex-direction:column;
}
.outro__label{color:var(--ink);opacity:.7}
.outro__mail{
  display:block;margin:0 0 clamp(40px,6vw,72px);
  font-family:"Montserrat XB","Arial Black",sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:-.025em;line-height:1;
  white-space:nowrap;
  font-size:clamp(1.5rem,5.4vw,4.2rem);
  transition:color 180ms linear;
}
.outro__mail:hover{color:var(--bone)}

.form{max-width:640px;width:100%}
.form__row{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(20px,2.6vw,30px)}
.form__row label{color:var(--ink);opacity:.7}
.form input,.form textarea{
  width:100%;background:none;border:0;border-bottom:1px solid var(--ink);
  color:var(--ink);font-family:"Cinzel",Georgia,serif;font-size:1.0625rem;
  padding:6px 0 10px;border-radius:0;resize:vertical;
}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--bone)}
.form input:focus + *,.form textarea:focus + *{color:var(--bone)}
.form__send{
  margin-top:8px;border:0;background:none;color:var(--ink);cursor:pointer;
  border-bottom:1px solid var(--ink);padding:0 0 3px;
  font-family:"Cinzel",Georgia,serif;letter-spacing:.12em;text-transform:uppercase;
  font-size:var(--small);transition:color 180ms linear,border-color 180ms linear;
}
.form__send:hover{color:var(--bone);border-bottom-color:var(--bone)}
.form__hint{margin-top:14px;color:var(--ink);opacity:.55}

.outro__links{
  margin-top:clamp(56px,8vw,110px);padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;color:var(--ink);
}
.outro__links a{transition:color 180ms linear}
.outro__links a:hover{color:var(--bone)}
.outro__links span{opacity:.55;margin-left:auto}
.docfoot{
  margin:clamp(48px,7vw,90px) var(--edge) clamp(28px,4vw,44px);
  max-width:calc(62ch + 2 * var(--edge));
}

/* ── Rechtstexte ───────────────────────────────────────── */
.doc{
  padding:calc(var(--navtop) + 68px) var(--edge) clamp(64px,9vw,140px);
  max-width:calc(62ch + 2 * var(--edge));
}
.doc h1{
  font-size:clamp(1.6rem,2.4vw,2rem);line-height:1.1;font-weight:500;
  margin-bottom:clamp(24px,3vw,40px);
}
.doc h2{
  font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  margin:clamp(28px,3.4vw,44px) 0 8px;
}
.doc p,.doc li{font-size:15px;line-height:1.65;max-width:62ch}
.doc p + p{margin-top:12px}
.doc ul{margin:8px 0 0 18px}
.doc a{border-bottom:1px solid currentColor;padding-bottom:1px}

.err{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--edge);
}
.err h1{font-size:clamp(1.9rem,3.5vw,3.3rem);line-height:.98;font-weight:500}
.err p{font-size:15px;line-height:1.65;margin-top:16px}
.err a{border-bottom:1px solid currentColor;padding-bottom:1px}

/* ── Mobil ─────────────────────────────────────────────── */
@media (max-width:768px){
  :root{--edge:18px;--navtop:22px;--small:12px}

  .mark{font-size:clamp(2.6rem,15vw,5rem);line-height:.84;letter-spacing:-.035em}
  .mark__l{display:block}          /* MORITZ / DOERING untereinander */
  .hero__mark{bottom:64px}

  .work__inner{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    row-gap:0;
  }
  .work__row{display:contents}
  .work__num{display:none}                       /* Nummer sitzt im Titel */
  .work__title::before{
    content:attr(data-n) "\00a0\00a0";
    font-size:.46em;letter-spacing:.1em;vertical-align:.42em;
  }
  .work__client{
    order:3;margin:clamp(12px,3vw,18px) 0 0;text-align:center;
    justify-self:auto;align-self:auto;opacity:.75;
  }
  .work__frame{order:2;width:calc(100vw - 88px)}
  .work__title{
    display:block;order:1;
    align-self:center;justify-self:auto;
    text-align:center;max-width:none;padding:0 8px;
    margin-bottom:clamp(16px,3.6vw,24px);
    font-size:clamp(1.75rem,7.8vw,2.4rem);line-height:1.05;
  }
  .work__mobtitle{display:none}

  .menu__mark{white-space:nowrap;margin-top:14px}
  .menu__mark .mark__l{display:inline-block}   /* im Menue einzeilig */
  .menu__list{margin-top:22px}
  .menu__item{grid-template-columns:1fr;gap:2px;padding:9px 0}
  .menu__item .n{font-size:11px;letter-spacing:.12em}
  .menu__item .t{font-size:22px;line-height:1.05}
  .menu__item .c{font-size:11px;letter-spacing:.12em}
  .menu__foot{flex-direction:column;gap:6px;font-size:11px}
  .outro__links{gap:10px 18px}
  .outro__links span{margin-left:0;width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  .work{clip-path:none;opacity:var(--p,1);transition:opacity 200ms linear}
  .work__inner{transform:none !important}
  .js .mark .ch,.js .work__num,.js .work__client,.js .work__title{
    opacity:1 !important;transform:none !important;
  }
  .dbl .dup{transition:none}
}