/* ═══════════════════════════════════════════════════════════
   tbai ads — style.css
   Maßsystem nach dem Vorbild von freshman.tv:
   1rem = 1/1440 der Viewportbreite. Alle Größen in rem,
   dadurch skaliert das Layout stufenlos statt in Sprüngen.
   ═══════════════════════════════════════════════════════════ */

html {
  font-size: calc(100vw / 1440);
}
@media (max-width: 1200px) { html { font-size: calc(100vw / 800); } }
@media (max-width: 640px)  { html { font-size: calc(100vw / 375); } }

:root {
  --black:      #101010;
  --white:      #ffffff;
  --gray:       #a4a49c;   /* warm getöntes Grau, kein Neutralgrau */
  --sand:       #f3f1e7;
  --blue:       #5bc5f2;   /* Akzent aus dem tbai-Logo */
  --blue-deep:  #1c5f80;
  --line:       rgba(243, 241, 231, .18);

  /* Zweite Einheit: berücksichtigt zusätzlich die Höhe,
     damit Hero-Typo bei flachen Fenstern nicht überläuft. */
  --s: min(calc(100vw / 1440), calc(100svh / 810));

  --ease: cubic-bezier(.22, 1, .36, 1);
}
@media (max-width: 1200px) { :root { --s: min(calc(100vw / 800), calc(100svh / 900)); } }
@media (max-width: 640px)  { :root { --s: min(calc(100vw / 375), calc(100svh / 667)); } }

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

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: .95; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--blue); color: var(--black); }

/* ── Reveal ─────────────────────────────────────────────
   Achtung: opacity:0 macht Inhalt unsichtbar-aber-klickbar.
   Auf Touch-Geräten deshalb komplett deaktiviert, zusätzlich
   setzt script.js nach 3s alles hart sichtbar (Sicherheitsnetz). */
.reveal {
  opacity: 0;
  filter: blur(12rem);
  transform: translateY(24rem);
  transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in, body.reveals-off .reveal {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; filter: none; transform: none; transition: none; }
}

.eyebrow {
  display: block;
  font-size: 13rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
}

/* ═══ Preloader ═══════════════════════════════════════ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-deep);
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease);
}
.preloader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.preloader__frames { position: absolute; inset: 0; }
.preloader__frames img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  mix-blend-mode: luminosity;
  /* steps(1) erzeugt den harten Daumenkino-Sprung statt weicher Blende */
  animation: flip 1.7s steps(1) infinite;
}
@keyframes flip {
  0%    { opacity: 1; }
  5.88% { opacity: 0; }   /* 1/17 der Laufzeit = 17 Frames */
  100%  { opacity: 0; }
}
.preloader__label {
  position: relative;
  font-size: calc(var(--s) * 90);
  font-weight: 700;
  letter-spacing: -.05em;
  font-style: italic;
  mix-blend-mode: exclusion;
}
.preloader__label span { font-size: .22em; vertical-align: super; font-style: normal; }

/* ═══ Header ══════════════════════════════════════════ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rem 40rem;
  mix-blend-mode: difference;
}
/* Text-Wortmarke statt Bildlogo: Das Chrom-Logo zerfällt unter
   ~200rem zu grauem Rauschen. Bildlogo nur im Hero und im Footer. */
.header__logo {
  font-size: 26rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -.04em;
  line-height: 1;
}
.header__logo span {
  margin-left: 5rem;
  font-size: .42em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  vertical-align: super;
}
.header__nav { display: flex; gap: 32rem; font-size: 14rem; letter-spacing: .04em; }
.header__nav a { position: relative; padding-bottom: 3rem; }
.header__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__nav a.is-cta { color: var(--blue); }

.header__burger { display: none; }

@media (max-width: 640px) {
  .header { padding: 16rem 20rem; mix-blend-mode: normal; }
  .header__logo img { width: 76rem; }
  .header__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 6rem;
    width: 40rem; height: 40rem; padding: 0;
    background: none; border: 0; cursor: pointer;
  }
  .header__burger span { display: block; width: 26rem; height: 2rem; background: var(--white); transition: transform .4s var(--ease), opacity .3s; }
  .header__burger[aria-expanded="true"] span:first-child { transform: translateY(4rem) rotate(45deg); }
  .header__burger[aria-expanded="true"] span:last-child  { transform: translateY(-4rem) rotate(-45deg); }

  .header__nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28rem;
    background: var(--black);
    font-size: 28rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s;
  }
  .header__nav.is-open { opacity: 1; visibility: visible; }
}

/* ═══ Hero ════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Kein Versatz: Der Hero ist eine Montage mit wechselnden Ausschnitten
     (Skate, Kayak, Dachlauf, Fassade). Ein fester Versatz würde nur zu
     einer einzigen Einstellung passen und alle anderen verziehen.
     Kurzzeitige Überlappungen mit dem Logo fängt der schnelle Schnitt ab,
     Lesbarkeit sichern Scrim und text-shadow. */
  transform: none;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Der Skate-Clip ist eine sehr helle Alpenszene. Ohne kräftige
     Abdunklung verschwindet weißer Text im Himmel. Drei Ebenen:
     flächige Grundabdunklung, Vignette, Verlauf zum Seitenrand. */
  background:
    linear-gradient(to bottom, rgba(16,16,16,.72) 0%, rgba(16,16,16,.34) 26%, rgba(16,16,16,.42) 58%, rgba(16,16,16,.95) 100%),
    radial-gradient(105% 75% at 50% 46%, rgba(16,16,16,.28) 0%, rgba(16,16,16,.62) 70%, rgba(16,16,16,.8) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100rem;
  padding: 0 40rem;
  text-align: center;
}
/* Gesamthöhe des Hero-Blocks muss unter 100svh bleiben, sonst
   wird die Tagline auf 1080er-Schirmen abgeschnitten.
   Budget bei --s=1.333: 315 + 186 + 118 + 32 + Abstände ≈ 730px. */
.hero__logo {
  width: calc(var(--s) * 300);
  max-width: 60%;
  margin: 0 auto calc(var(--s) * 14);
  height: auto;
  filter: drop-shadow(0 calc(var(--s) * 16) calc(var(--s) * 48) rgba(0,0,0,.75));
}
.hero__claim {
  font-size: calc(var(--s) * 56);
  font-style: italic;
  line-height: .92;
  text-transform: lowercase;
  text-shadow: 0 calc(var(--s) * 4) calc(var(--s) * 28) rgba(0,0,0,.5);
  transition-delay: .1s;
}
.hero__sub {
  max-width: 560rem;
  margin: calc(var(--s) * 20) auto 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: calc(var(--s) * 23);
  line-height: 1.32;
  letter-spacing: .005em;
  color: var(--sand);
  text-shadow: 0 calc(var(--s) * 2) calc(var(--s) * 18) rgba(0,0,0,.6);
  transition-delay: .2s;
}
.hero__tag {
  margin-top: calc(var(--s) * 16);
  font-family: 'Caveat', cursive;
  font-size: calc(var(--s) * 26);
  color: var(--blue);
  transition-delay: .3s;
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 34rem;
  z-index: 2;
  width: 22rem; height: 40rem;
  border: 1px solid var(--line);
  border-radius: 20rem;
  transform: translateX(-50%);
}
.hero__scroll span {
  position: absolute;
  left: 50%; top: 9rem;
  width: 3rem; height: 7rem;
  margin-left: -1.5rem;
  border-radius: 2rem;
  background: var(--white);
  animation: scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: 1; }
  75%  { transform: translateY(14rem); opacity: 0; }
  100% { opacity: 0; }
}

@media (max-width: 640px) {
  .hero__claim { font-size: calc(var(--s) * 47); }
  .hero__sub   { font-size: calc(var(--s) * 19); max-width: 320rem; }
  .hero__tag   { font-size: calc(var(--s) * 22); }
  .hero__logo  { width: calc(var(--s) * 225); max-width: 70%; }
}

/* ═══ Showreel ════════════════════════════════════════ */
.reel { padding: 120rem 0 90rem; border-top: 1px solid var(--line); }
.reel__head { padding: 0 40rem; margin-bottom: 56rem; }
.reel__title { margin-top: 14rem; font-size: 64rem; font-style: italic; text-transform: lowercase; }

.slider { overflow: hidden; cursor: grab; touch-action: pan-y; }
.slider.is-dragging { cursor: grabbing; }
.slider__track { display: flex; gap: 20rem; will-change: transform; }

.slide {
  position: relative;
  flex: 0 0 auto;
  width: 380rem;
  user-select: none;
}
.slide--v { width: 240rem; }
.slide__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid var(--line);
}
.slide--v .slide__media { aspect-ratio: 9 / 16; }
.slide__media img,
.slide__media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.slide__media video { opacity: 0; transition: opacity .5s var(--ease); }
.slide__media video.is-playing { opacity: 1; }
.slide__meta {
  display: flex;
  align-items: baseline;
  gap: 10rem;
  margin-top: 12rem;
  font-size: 13rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.slide__meta strong { font-weight: 700; }
.slide__meta span { color: var(--gray); }

.reel__hint {
  margin-top: 40rem;
  padding: 0 40rem;
  font-family: 'Caveat', cursive;
  font-size: 22rem;
  color: var(--gray);
}

@media (max-width: 640px) {
  .reel__title { font-size: 42rem; }
  .slide { width: 260rem; }
  .slide--v { width: 165rem; }
}

/* ═══ Section-Grundlayout ═════════════════════════════ */
.section__head { padding: 0 40rem; max-width: 780rem; }
.section__title { margin-top: 14rem; font-size: 64rem; font-style: italic; text-transform: lowercase; }
.section__lead {
  margin-top: 22rem;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 24rem;
  line-height: 1.4;
  color: var(--sand);
}
@media (max-width: 640px) {
  .section__title { font-size: 42rem; }
  .section__lead  { font-size: 19rem; }
}

/* ═══ Services ════════════════════════════════════════ */
.services { padding: 120rem 0; border-top: 1px solid var(--line); }
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  /* Der 1px-gap legt die Hintergrundfarbe als Trennlinie frei.
     Deshalb Außenabstand als margin, NICHT als padding — sonst
     wird die Polsterung selbst zur hellgrauen Fläche. */
  margin: 70rem 40rem 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.card {
  position: relative;
  padding: 40rem 32rem 44rem;
  background: var(--black);
  transition: background .5s var(--ease);
}
.card:hover { background: #171717; }
.card__no {
  display: block;
  font-size: 12rem;
  letter-spacing: .2em;
  color: var(--blue);
}
.card h3 { margin: 18rem 0 14rem; font-size: 26rem; font-style: italic; }
.card p { font-size: 15rem; line-height: 1.6; color: var(--gray); }
.card__tag {
  display: inline-block;
  margin-top: 22rem;
  padding: 5rem 12rem;
  border: 1px solid var(--line);
  border-radius: 30rem;
  font-size: 11rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sand);
}
@media (max-width: 1200px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cards { grid-template-columns: 1fr; margin: 50rem 20rem 0; } .card { padding: 30rem 24rem; } }

/* ═══ Prozess ═════════════════════════════════════════ */
.process { padding: 120rem 0; border-top: 1px solid var(--line); }
.steps { margin-top: 60rem; padding: 0 40rem; }
.step {
  display: grid;
  grid-template-columns: 160rem 1fr;
  gap: 40rem;
  padding: 40rem 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__no {
  font-size: 56rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--blue);
}
.step h3 { font-size: 30rem; font-style: italic; }
.step p {
  max-width: 640rem;
  margin-top: 14rem;
  font-size: 16rem;
  line-height: 1.65;
  color: var(--gray);
}
.step__time {
  display: inline-block;
  margin-top: 16rem;
  font-family: 'Caveat', cursive;
  font-size: 20rem;
  color: var(--blue);
}
@media (max-width: 640px) {
  .steps { padding: 0 20rem; }
  .step { grid-template-columns: 1fr; gap: 12rem; }
  .step__no { font-size: 40rem; }
  .step h3 { font-size: 24rem; }
}

/* ═══ Claims ══════════════════════════════════════════ */
.claims { padding: 90rem 40rem; border-top: 1px solid var(--line); }
.claims__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30rem; }
.claim { text-align: center; }
.claim strong {
  display: block;
  font-size: 88rem;
  font-style: italic;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--blue);
}
.claim span {
  display: block;
  margin-top: 10rem;
  font-size: 12rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray);
}
@media (max-width: 640px) {
  .claims { padding: 60rem 20rem; }
  .claims__grid { grid-template-columns: repeat(2, 1fr); gap: 36rem 20rem; }
  .claim strong { font-size: 56rem; }
}

/* ═══ CTA ═════════════════════════════════════════════ */
.cta {
  position: relative;
  min-height: 80svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.cta__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__scrim { position: absolute; inset: 0; background: rgba(16,16,16,.78); }
.cta__inner { position: relative; z-index: 2; padding: 90rem 40rem; }
.cta__title { margin-top: 16rem; font-size: 62rem; font-style: italic; text-transform: lowercase; }
.cta__sub {
  max-width: 520rem;
  margin: 20rem auto 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 23rem;
  line-height: 1.4;
  color: var(--sand);
}
.btn {
  display: inline-block;
  margin-top: 34rem;
  padding: 17rem 40rem;
  background: var(--blue);
  color: var(--black);
  border-radius: 40rem;
  font-size: 15rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn:hover {
  transform: translateY(-3rem);
  box-shadow: 0 24rem 60rem rgba(91, 197, 242, .3);
}
.cta__tag { margin-top: 24rem; font-family: 'Caveat', cursive; font-size: 21rem; color: var(--gray); }
@media (max-width: 640px) {
  .cta__title { font-size: 40rem; }
  .cta__sub { font-size: 18rem; }
}

/* ═══ Rechtsseiten ════════════════════════════════════ */
.legal { max-width: 780rem; padding: 150rem 40rem 110rem; }
.legal h1 { font-size: 56rem; font-style: italic; text-transform: lowercase; margin-top: 14rem; }
.legal h2 {
  margin: 48rem 0 14rem;
  font-size: 20rem;
  font-style: italic;
  letter-spacing: -.02em;
}
.legal h2:first-of-type { margin-top: 56rem; }
.legal p, .legal ul, .legal address {
  font-size: 15rem;
  line-height: 1.7;
  color: var(--gray);
  font-style: normal;
}
.legal p + p { margin-top: 14rem; }
.legal ul { margin: 14rem 0; padding-left: 20rem; list-style: disc; }
.legal li { margin-bottom: 6rem; }
.legal a { color: var(--blue); text-decoration: underline; text-underline-offset: 3rem; }
.legal address { margin-bottom: 14rem; }
.legal .legal__date { margin-top: 48rem; font-family: 'Caveat', cursive; font-size: 19rem; }
@media (max-width: 640px) {
  .legal { padding: 110rem 20rem 70rem; }
  .legal h1 { font-size: 38rem; }
}

/* ═══ Footer ══════════════════════════════════════════ */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30rem;
  padding: 56rem 40rem 40rem;
  border-top: 1px solid var(--line);
  font-size: 13rem;
}
.footer__brand img { width: 90rem; height: auto; margin-bottom: 12rem; }
.footer__brand p { color: var(--gray); letter-spacing: .05em; text-transform: uppercase; font-size: 11rem; }
.footer__nav, .footer__legal { display: flex; gap: 22rem; }
.footer__nav a:hover, .footer__legal a:hover { color: var(--blue); }
.footer__legal a { color: var(--gray); }
.footer__copy { width: 100%; text-align: center; color: var(--gray); font-family: 'Caveat', cursive; font-size: 18rem; }
@media (max-width: 640px) {
  .footer { padding: 40rem 20rem 30rem; }
  .footer__nav, .footer__legal { flex-wrap: wrap; }
}