/* =====================================================================
   Make It Film · core.css
   Tokens, Schrift, Reset, Typo, Raster, Buttons, Meta, Körnung, Reveal-Basis
   ===================================================================== */

/* ---------- Schrift (variabel 100–900, lokal) ---------- */
@font-face{font-family:Roboto;font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/roboto-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/roboto-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens (verbindlich, siehe Plan) ---------- */
:root{
  --bg:#0B0B0C; --bg-2:#131315; --bg-3:#1B1B1E; --line:rgba(255,255,255,.08);
  --fg:#F3EFE8; --fg-2:rgba(243,239,232,.6); --fg-3:rgba(243,239,232,.5);
  --fg-4:rgba(243,239,232,.38); /* nur große Ziffern und Deko (Kontrast ≥ 3:1 für große Schrift) */
  --accent:#FF8900; --accent-glow:rgba(255,137,0,.35);
  --ease:cubic-bezier(.16,1,.3,1); --d1:.3s; --d2:.5s; --d3:.8s;
  --font:"Roboto",system-ui,sans-serif;
  --display:clamp(2.6rem,7.2vw,8.5rem); --h2:clamp(2rem,4.6vw,5rem); --h3:clamp(1.3rem,2vw,1.9rem);
  --meta:.75rem; --gutter:clamp(16px,4vw,64px); --maxw:1440px;
}

/* Abgeleitete Hilfswerte (keine neuen Farben) */
:root{
  --gap:clamp(12px,1.8vw,32px);
  --hdr-h:72px;
  --section-y:clamp(72px,9vw,136px);
  --lead:clamp(1.25rem,1.9vw,1.75rem);
  --line-2:rgba(255,255,255,.14);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--hdr-h);background:var(--bg)}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--fg);font-family:var(--font);
  font-size:1.0625rem;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0}
h1,h2,h3{text-wrap:balance}
ol,ul{padding:0;list-style:none}
img,svg,video,canvas,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
address{font-style:normal}
strong,b{font-weight:500}
::selection{background:var(--accent);color:var(--bg)}
html:not(.reduced){scroll-behavior:smooth}

/* Ältere Browser ohne overflow:clip (iOS < 16): sonst wird die Seite breiter als der Bildschirm
   und der feste Header samt Button rutscht rechts aus dem Bild */
@supports not (overflow:clip){ html{overflow-x:hidden} }
/* Nichts im Inhalt darf die Seite verbreitern (gedrehte/verschobene Szenen-Elemente). Sonst wächst auf
   Mobilgeräten der Layout-Viewport mit, und der feste Header schiebt seinen Button rechts aus dem Bild.
   clip (nicht hidden): kein Scroll-Container, position:sticky funktioniert weiter. */
main,.ftr{overflow-x:clip}

/* ---------- Typo-Skala ---------- */
.display{font-size:var(--display);font-weight:600;line-height:.98;letter-spacing:-.035em}
.h2{font-size:var(--h2);font-weight:600;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.h3{font-size:var(--h3);font-weight:400;line-height:1.2;letter-spacing:-.012em;text-wrap:balance}
.lead{font-size:var(--lead);font-weight:400;line-height:1.35;letter-spacing:-.01em;color:var(--fg);text-wrap:pretty}
.lead--dim{color:var(--fg-2)}
.prose{color:var(--fg-2);max-width:38em}
.prose p+p{margin-top:1em}
.prose strong{color:var(--fg)}
.meta{font-size:var(--meta);font-weight:500;line-height:1.4;text-transform:uppercase;letter-spacing:.18em;color:var(--fg-2)}

/* ---------- Layout & Raster ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.grid>*{grid-column:1/-1;min-width:0}
.section{padding-block:var(--section-y)}

/* Raster-Hilfen ab Tablet: .s-N = Startspalte, .e-N = Endlinie (exklusiv) */
@media (min-width:900px){
  .s-1{grid-column-start:1}.s-2{grid-column-start:2}.s-3{grid-column-start:3}.s-4{grid-column-start:4}
  .s-5{grid-column-start:5}.s-6{grid-column-start:6}.s-7{grid-column-start:7}.s-8{grid-column-start:8}
  .s-9{grid-column-start:9}.s-10{grid-column-start:10}.s-11{grid-column-start:11}.s-12{grid-column-start:12}
  .e-3{grid-column-end:3}.e-4{grid-column-end:4}.e-5{grid-column-end:5}.e-6{grid-column-end:6}
  .e-7{grid-column-end:7}.e-8{grid-column-end:8}.e-9{grid-column-end:9}.e-10{grid-column-end:10}
  .e-11{grid-column-end:11}.e-12{grid-column-end:12}.e-13{grid-column-end:13}
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--accent); --btn-fg:var(--bg);
  position:relative;display:inline-flex;align-items:center;gap:.85em;
  min-height:52px;padding:.95em 1.55em .95em 1.7em;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:1rem;font-weight:500;line-height:1.1;letter-spacing:.005em;white-space:nowrap;
  transition:background-color var(--d2) var(--ease),box-shadow var(--d2) var(--ease),color var(--d2) var(--ease);
  box-shadow:0 0 0 0 var(--accent-glow);
}
.btn:hover{box-shadow:0 10px 40px -10px var(--accent-glow)}
.btn__arrow{
  flex:none;width:18px;height:12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M11.5 1 16.5 6l-5 5M0 6h16' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M11.5 1 16.5 6l-5 5M0 6h16' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--d2) var(--ease);
}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{transform:translateX(5px)}
.btn__arrow--down{transform:rotate(90deg)}
.btn:hover .btn__arrow--down,.btn:focus-visible .btn__arrow--down{transform:rotate(90deg) translateX(4px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--fg-3);background:rgba(255,255,255,.03)}
.btn--sm{min-height:40px;padding:.6em 1.1em .6em 1.25em;font-size:.875rem;gap:.7em}
.btn--sm .btn__arrow{width:15px;height:10px}
.btn--lg{min-height:64px;padding:1.15em 2em 1.15em 2.2em;font-size:1.125rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Körnung (Filmkorn) ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ---------- Fokus & Barrierefreiheit ---------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.btn:focus-visible{border-radius:999px}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.skip{position:fixed;left:16px;top:12px;z-index:200;padding:.75em 1.1em;border-radius:999px;background:var(--fg);color:var(--bg);
  font-weight:500;transform:translateY(-200%);transition:transform var(--d1) var(--ease)}
.skip:focus-visible{transform:none}

/* ---------- Reveal-Basis ----------
   Ohne JS (kein html.js) ist alles sichtbar. Mit JS startet [data-reveal] verborgen.
   main.js setzt html.motion, sobald es die Reveals übernommen hat (GSAP setzt dann die Startzustände).
   Sicherheitsnetz: Lädt main.js nicht, blendet die Keyframe-Animation nach 2,5 s alles ein. */
html.js:not(.reduced) [data-reveal]{opacity:0;animation:mif-failsafe 0s linear 2.5s forwards}
html.js:not(.reduced) [data-reveal="clip"]{opacity:1;clip-path:inset(100% 0 0 0);animation-name:mif-failsafe-clip}
html.js.motion [data-reveal]{animation:none;opacity:1;clip-path:none}
@keyframes mif-failsafe{to{opacity:1}}
@keyframes mif-failsafe-clip{to{clip-path:inset(0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}