/* =========================================================
   ONE MORE EDIT — Landing Page
   Farben, Typo und Raster an einer Stelle. Anpassen: :root
   ========================================================= */

:root{
  --ink:      #0b0a09;   /* Grundschwarz            */
  --ink-2:    #141210;   /* leicht aufgehellt       */
  --butter:   #ffe46d;   /* Markengelb aus dem Deck */
  --scorch:   #5c160d;   /* Brandrot der Kreisgrafik*/
  --brass:    #c08a2e;   /* Messington              */
  --ash:      #a39c8c;   /* Fließtext gedämpft      */
  --paper:    #f3efe3;

  --display: "Archivo", "Arial Black", sans-serif;
  --body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:    "Martian Mono", ui-monospace, "SF Mono", monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1240px;
  --rail: 3.25rem;        /* Höhe der Scrubber-Leiste */
}

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

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--rail) + 1.5rem); }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--butter); color:var(--ink); padding:.75rem 1rem;
  font-family:var(--mono); font-size:.7rem;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--butter); outline-offset:3px; }

/* ---------- Bausteine ---------- */

.label{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 1.5rem;
}

.display{
  font-family:var(--display);
  font-weight:800;
  font-stretch:112%;
  font-size:clamp(2rem, 1.1rem + 4.2vw, 4.25rem);
  line-height:.98;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0 0 2rem;
  text-wrap:balance;
}

.section{
  position:relative;
  padding:clamp(5rem, 11vw, 9.5rem) var(--gutter);
  max-width:var(--maxw);
  margin-inline:auto;
}

.band{ border-top:1px solid rgba(255,228,109,.16); }

.btn{
  display:inline-block;
  margin-top:2.25rem;
  padding:.95rem 2rem;
  background:var(--butter);
  color:var(--ink);
  text-decoration:none;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:transform .25s ease, background-color .25s ease;
}
.btn:hover{ transform:translateY(-2px); background:#fff0a6; }

/* ---------- Scrubber (Signature) ---------- */

.scrubber{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--rail);
  background:rgba(11,10,9,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,228,109,.18);
}
.scrubber__inner{
  height:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:1.25rem;
}
.scrubber__mark,
.scrubber__tc{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.14em;
  color:var(--butter);
  flex:none;
}
.scrubber__tc{ color:var(--brass); font-variant-numeric:tabular-nums; }

.scrubber__track{
  position:relative;
  flex:1 1 auto;
  height:2px;
  background:rgba(243,239,227,.18);
}
.scrubber__fill{
  position:absolute; inset:0 auto 0 0;
  width:0;
  background:var(--butter);
}
.scrubber__head{
  position:absolute; top:50%; left:0;
  width:2px; height:14px;
  margin-top:-7px;
  background:var(--butter);
  box-shadow:0 0 10px rgba(255,228,109,.85);
}

.key{
  position:absolute; top:50%;
  width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px;
  background:var(--ink);
  border:1px solid var(--brass);
  transform:rotate(45deg);
  text-decoration:none;
  transition:background-color .2s ease, border-color .2s ease;
}
.key:nth-of-type(1){ left:12%; }
.key:nth-of-type(2){ left:38%; }
.key:nth-of-type(3){ left:64%; }
.key:nth-of-type(4){ left:88%; }
.key:hover,
.key:focus-visible{ background:var(--butter); border-color:var(--butter); }

.key span{
  position:absolute; top:14px; left:50%;
  transform:rotate(-45deg) translateX(-42%);
  font-family:var(--mono); font-size:.55rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ash); white-space:nowrap;
  opacity:0; transition:opacity .2s ease;
  pointer-events:none;
}
.key:hover span,
.key:focus-visible span{ opacity:1; }

/* ---------- Hero ---------- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--rail) + 4rem) var(--gutter) 5rem;
  overflow:hidden;
}
.hero__eclipse{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.06);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(115% 85% at 50% 45%, rgba(11,10,9,.35) 0%, rgba(11,10,9,.82) 62%, var(--ink) 100%),
    linear-gradient(180deg, rgba(11,10,9,.6) 0%, rgba(11,10,9,0) 30%, rgba(11,10,9,.9) 100%);
}
.hero__content{
  position:relative;
  max-width:var(--maxw);
  width:100%;
  margin-inline:auto;
}
.eyebrow{
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--butter);
  margin:0 0 1.75rem;
}
.wordmark{
  font-family:var(--display);
  font-weight:900;
  font-stretch:125%;
  font-size:clamp(3.4rem, 1rem + 14vw, 11rem);
  line-height:.83;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0;
  color:var(--butter);
  text-shadow:0 0 60px rgba(92,22,13,.7);
}
.wordmark span{ display:block; }

.hero__line{
  max-width:34ch;
  margin:2.25rem 0 0;
  color:var(--paper);
  font-size:clamp(1.05rem, 1rem + .4vw, 1.3rem);
}
.hero__scroll{
  position:relative;
  margin:3.5rem 0 0;
  max-width:var(--maxw);
  width:100%;
  margin-inline:auto;
  font-family:var(--mono);
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ash);
}

/* ---------- Hallo ---------- */

.split{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem clamp(2rem, 6vw, 5rem);
}
.prose p{ color:var(--ash); margin:0 0 1.25rem; max-width:58ch; }
.prose strong{ color:var(--butter); font-weight:600; }

/* ---------- Kollektiv ---------- */

.kollektiv{ max-width:none; padding-inline:0; overflow:hidden; }
.kollektiv__inner{
  position:relative;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.bleed-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.42;
  filter:saturate(.8);
  mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 92%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 92%);
}
.story{ max-width:62ch; margin-bottom:clamp(3rem, 7vw, 5.5rem); }
.split--story{ margin-bottom:clamp(3rem, 7vw, 5.5rem); }
.split--story .story{ max-width:none; margin-bottom:0; }
.story p{ color:var(--paper); margin:0 0 1.25rem; }

.crew{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem, 4vw, 3rem);
}
.crew__member h3{
  font-family:var(--display);
  font-weight:700;
  font-stretch:100%;
  font-size:1.05rem; letter-spacing:.01em;
  text-transform:uppercase;
  margin:1.1rem 0 .2rem;
  color:var(--butter);
}
.crew__member p{
  margin:0;
  font-family:var(--mono);
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash);
}
.crew__frame{
  border:2px solid var(--butter);
  overflow:hidden;
  background:var(--ink-2);
}
.crew__frame img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:grayscale(.55) contrast(1.05);
  transition:filter .45s ease, transform .6s ease;
}
.crew__member:hover .crew__frame img{
  filter:grayscale(0) contrast(1);
  transform:scale(1.03);
}

/* ---------- Arbeit ---------- */

.grid{
  list-style:none; margin:0 0 clamp(3.5rem, 8vw, 6rem); padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:rgba(255,228,109,.16);
  border:1px solid rgba(255,228,109,.16);
}
.card{
  background:var(--ink);
  padding:clamp(1.75rem, 3vw, 2.5rem);
  transition:background-color .3s ease;
}
.card:hover{ background:var(--ink-2); }
.card h3{
  font-family:var(--display);
  font-weight:700;
  font-stretch:105%;
  font-size:1.15rem; text-transform:uppercase; letter-spacing:0;
  margin:0 0 .85rem;
  color:var(--butter);
}
.card p{ margin:0; color:var(--ash); font-size:.95rem; }

.pipeline{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem;
  padding-top:2rem;
  border-top:1px solid rgba(255,228,109,.16);
}
.pipeline span{
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper);
}
.pipeline i{
  flex:1 1 1rem;
  min-width:1rem;
  height:1px;
  background:linear-gradient(90deg, var(--brass), rgba(192,138,46,.25));
}
.pipeline__note{
  margin:.9rem 0 0;
  font-family:var(--mono);
  font-size:.6rem; letter-spacing:.1em;
  color:var(--ash);
}

/* ---------- Kontakt ---------- */

.kontakt{
  max-width:none; padding-inline:0;
  border-top:1px solid rgba(255,228,109,.16);
  overflow:hidden;
}
.kontakt__inner{
  position:relative;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.bleed-bg--studio{ opacity:.34; }
.kontakt__text{ color:var(--paper); max-width:44ch; margin:0 0 2.5rem; }
.mail{
  display:inline-block;
  font-family:var(--display);
  font-weight:700;
  font-stretch:100%;
  font-size:clamp(1.25rem, .6rem + 2.6vw, 2.75rem);
  color:var(--butter);
  text-decoration:none;
  border-bottom:2px solid rgba(255,228,109,.4);
  padding-bottom:.15em;
  word-break:break-word;
  transition:border-color .25s ease, color .25s ease;
}
.mail:hover{ border-color:var(--butter); color:#fff0a6; }

/* ---------- Impressum ---------- */

.impressum{ border-top:1px solid rgba(255,228,109,.16); }
.impressum .label{ margin-bottom:2.75rem; }
.impressum__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.25rem clamp(2rem, 5vw, 4rem);
}
.impressum h3{
  font-family:var(--mono);
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--butter);
  font-weight:600;
  margin:0 0 .6rem;
}
.impressum h3 + p + h3{ margin-top:1.75rem; }
.impressum p{
  margin:0;
  color:var(--ash);
  font-size:.9rem;
  line-height:1.75;
}
.impressum a{ color:var(--ash); }
.impressum a:hover{ color:var(--butter); }
.impressum .impressum__note{
  margin-top:2.75rem;
  font-family:var(--mono);
  font-size:.58rem; letter-spacing:.1em;
  color:rgba(163,156,140,.7);
}

/* ---------- Footer ---------- */

.footer{
  border-top:1px solid rgba(255,228,109,.16);
  padding:1.75rem var(--gutter);
  max-width:var(--maxw);
  margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:space-between; align-items:center;
  font-family:var(--mono);
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash);
}
.footer__links{ display:flex; gap:1.5rem; }
.footer a{ text-decoration:none; }
.footer a:hover{ color:var(--butter); }

/* ---------- Scroll-Reveal ---------- */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- Breakpoints ---------- */

@media (min-width:640px){
  .crew{ grid-template-columns:repeat(3, 1fr); }
  .grid{ grid-template-columns:repeat(2, 1fr); }
  .impressum__grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (min-width:960px){
  .split{ grid-template-columns:1.05fr 1fr; align-items:start; }
  .split .display{ margin-bottom:0; }
  .grid{ grid-template-columns:repeat(3, 1fr); }
  .impressum__grid{ grid-template-columns:repeat(3, 1fr); }
  .crew__member:nth-child(2){ margin-top:3.5rem; }
  .crew__member:nth-child(3){ margin-top:1.75rem; }
}

@media (max-width:560px){
  .key span{ display:none; }
  .scrubber__mark{ display:none; }
}

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