/* ==========================================================================
   tadaa content – style sheet
   --------------------------------------------------------------------------
   Layout idea:
   - Desktop (861 px and wider): the design is drawn on a 1440 px grid.
     1 design pixel = var(--u). The page scales with the window width.
   - Phone / small tablet (860 px and narrower): one column.
     1 design pixel = var(--m) on a 390 px grid.
   Colours and fonts are set once in :root.
   ========================================================================== */

@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --maroon: #7a0000;
  --paper: #f5f3f5;
  --ink: #000;
  --shadow: rgba(0, 0, 0, .3);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Aileron", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
a:focus-visible, button:focus-visible, video:focus-visible {
  outline: 3px solid #ffb400;
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- scale units ---------- */
.page {
  container-type: inline-size;
  --u: min(calc(100cqw / 1440), 1.1667px);   /* desktop design pixel */
  --m: min(calc(100cqw / 390), 1.4px);       /* phone design pixel   */
}
@supports not (width: 1cqw) {
  .page {
    --u: min(calc(100vw / 1440), 1.1667px);
    --m: min(calc(100vw / 390), 1.4px);
  }
}

.wrap { position: relative; margin-inline: auto; }

.band-dark { background: var(--maroon); color: var(--paper); }

/* ---------- shared parts ---------- */
.h {
  font-weight: 700;
  letter-spacing: -.077em;
  color: var(--maroon);
}

.body { text-shadow: 0 .05em .08em rgba(0, 0, 0, .14); }

.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--maroon);
  color: #fff;
  font-weight: 400;
  border-radius: 999px;
  text-align: center;
  text-shadow: 0 .05em .1em rgba(0, 0, 0, .14);
}

/* video card */
.clip {
  position: relative;
  overflow: hidden;
  background: #d9d5d9;
  aspect-ratio: 9 / 16;
}
.clip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.clip-btn {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 16, 21, .72);
  color: #fff;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.clip-btn[hidden] { display: none; }
.clip-btn:hover { background: rgba(15, 16, 21, .9); transform: scale(1.06); }
.clip-btn svg { display: block; width: 46%; height: 46%; fill: currentColor; }
.clip-btn.play {
  left: 50%; top: 40%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
}
.clip-btn.play:hover { transform: scale(1.1); }
.clip-btn.sound {
  right: 14px; top: 14px;           /* top corner: the play bar is at the bottom */
  width: 36px; height: 36px;
}
.clip-btn.sound .on { display: none; }
.clip-btn.sound[aria-pressed="true"] .on { display: block; }
.clip-btn.sound[aria-pressed="true"] .off { display: none; }

/* ---------- camera composition (hero and footer) ----------
   All numbers are design pixels on the 1440 grid.               */
.comp {
  position: relative;
  width: calc(1440 * var(--u));
  height: calc(752 * var(--u));
}
.comp-title { position: absolute; inset: 0; }
.comp .word {
  position: absolute;
  font-weight: 700;
  font-size: calc(189.7 * var(--u));
  line-height: calc(168.4 * var(--u));
  letter-spacing: -.077em;
  white-space: nowrap;
  text-shadow: 0 calc(7 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .09);
}
.comp .word-1 { left: calc(121 * var(--u)); top: calc(88 * var(--u)); z-index: 1; }
.comp .word-2 { left: calc(710 * var(--u)); top: calc(501 * var(--u)); z-index: 4; }
.comp .cam {
  position: absolute;
  left: calc(333.8 * var(--u));
  top: calc(93.4 * var(--u));
  width: calc(768.4 * var(--u));
  height: auto;
  max-width: none;
  transform: rotate(-2deg);
  z-index: 2;
}
.comp .screen {
  position: absolute;
  left: calc(442.8 * var(--u));
  top: calc(219 * var(--u));
  width: calc(403.4 * var(--u));
  height: calc(330 * var(--u));
  aspect-ratio: auto;
  border-radius: calc(11.4 * var(--u));
  overflow: hidden;
  transform: rotate(-1.7deg);
  z-index: 3;
  background: #ddd;
}
.comp .screen video,
.comp .screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comp .screen video { object-position: 50% 34.7%; }
.comp .screen .clip-btn.sound {
  right: calc(12 * var(--u)); top: calc(12 * var(--u));
  width: max(26px, calc(36 * var(--u))); height: max(26px, calc(36 * var(--u)));
}
.comp .screen .clip-btn.play { top: 50%; }

.contact a { text-underline-offset: .12em; }
.contact a:hover { text-decoration-thickness: .12em; }


/* ==========================================================================
   DESKTOP  (861 px and wider)
   ========================================================================== */
@media (min-width: 861px) {

  .wrap { width: calc(1440 * var(--u)); }

  .body {
    font-size: max(15px, calc(22.6 * var(--u)));
    line-height: 1.372;
    letter-spacing: .039em;
    text-align: justify;
  }

  .h-xl { font-size: calc(160.8 * var(--u)); line-height: calc(136.5 * var(--u)); }
  .h-l  { font-size: calc(99.7 * var(--u));  line-height: calc(84.4 * var(--u)); }
  .h-m  { font-size: calc(78.4 * var(--u));  line-height: calc(93.9 * var(--u)); letter-spacing: -.071em; }

  .pill { box-shadow: calc(10 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u)) var(--shadow); letter-spacing: .039em; }

  .clip:not(.screen) {
    border-radius: calc(32 * var(--u));
    box-shadow: calc(10 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u)) var(--shadow);
  }

  /* --- 1 + 7: hero and footer --- */
  .hero .wrap { height: calc(752 * var(--u)); }
  footer.hero .wrap { height: calc(768 * var(--u)); }
  .hero .contact {
    position: absolute;
    left: calc(141 * var(--u));
    top: calc(602.5 * var(--u));
    font-size: max(15px, calc(27.3 * var(--u)));
    line-height: max(17px, calc(24.2 * var(--u)));
    text-shadow: 0 .05em .09em rgba(0, 0, 0, .11);
    z-index: 5;
  }
  footer.hero .comp .word-1 { left: calc(140 * var(--u)); }
  footer.hero .comp .word-2 { left: calc(695 * var(--u)); }

  /* --- 2: Über uns --- */
  .about .wrap {
    min-height: calc(787 * var(--u));
    padding: calc(39 * var(--u)) calc(216 * var(--u)) calc(57 * var(--u)) calc(131 * var(--u));
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .about-text { padding-top: calc(72 * var(--u)); }
  .about-text .body {
    width: calc(512 * var(--u));
    margin-left: calc(25 * var(--u));
  }
  .about-text .h + .body { margin-top: calc(51.5 * var(--u)); }
  .about-text .body + .body { margin-top: calc(31 * var(--u)); }
  .pills-lang {
    display: flex;
    gap: calc(22 * var(--u));
    margin: calc(20 * var(--u)) 0 0 calc(25 * var(--u));
  }
  .pills-lang .pill {
    width: calc(245 * var(--u));
    height: calc(77 * var(--u));
    font-size: max(14px, calc(23.7 * var(--u)));
  }
  .about-clip { width: calc(353 * var(--u)); height: calc(691 * var(--u)); aspect-ratio: auto; flex: none; }

  /* --- 3: UGC Videos --- */
  .ugc .wrap {
    min-height: calc(746 * var(--u));
    padding: calc(77 * var(--u)) calc(140 * var(--u)) calc(47 * var(--u)) calc(146 * var(--u));
  }
  .ugc-head {
    display: flex;
    align-items: flex-end;
    height: calc(119 * var(--u));
  }
  .ugc-head .h { width: calc(564 * var(--u)); flex: none; padding-bottom: calc(31 * var(--u)); }
  .ugc-head .body { width: calc(582 * var(--u)); padding-bottom: calc(30 * var(--u)); }
  .clip-row {
    display: grid;
    grid-template-columns: repeat(4, calc(257 * var(--u)));
    gap: calc(42 * var(--u));
  }
  .clip-row .clip { height: calc(503 * var(--u)); aspect-ratio: auto; }

  /* --- 4: Videos für eure Kanäle --- */
  .channels .wrap {
    min-height: calc(767 * var(--u));
    padding: calc(92 * var(--u)) calc(128 * var(--u)) calc(76 * var(--u)) calc(131 * var(--u));
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .channels-text { padding-top: calc(5.7 * var(--u)); }
  .channels-text .body {
    width: calc(462 * var(--u));
    margin-left: calc(12 * var(--u));
    font-size: max(15px, calc(23.4 * var(--u)));
  }
  .channels-text .h + .body { width: calc(448 * var(--u)); margin-top: calc(21.2 * var(--u)); }
  .pills-tags {
    display: grid;
    grid-template-columns: repeat(2, calc(214 * var(--u)));
    gap: calc(24 * var(--u)) calc(20 * var(--u));
    margin: calc(17 * var(--u)) 0 calc(34.7 * var(--u)) calc(12 * var(--u));
  }
  .pills-tags .pill { height: calc(54 * var(--u)); font-size: max(14px, calc(23.4 * var(--u))); }
  .clip-pair { display: flex; gap: calc(27 * var(--u)); flex: none; }
  .clip-pair .clip { width: calc(306 * var(--u)); height: calc(599 * var(--u)); aspect-ratio: auto; }

  /* --- 5: So entsteht dein Video --- */
  .steps .wrap {
    min-height: calc(768 * var(--u));
    padding: calc(98.7 * var(--u)) calc(105 * var(--u)) calc(60 * var(--u)) calc(128 * var(--u));
  }
  .steps .body { width: calc(1198 * var(--u)); margin-top: calc(35.9 * var(--u)); }
  .step-list {
    display: grid;
    grid-template-columns: repeat(4, calc(268 * var(--u)));
    gap: calc(45 * var(--u));
    margin-top: calc(37 * var(--u));
  }
  .step-list .pill {
    position: relative;
    height: calc(87 * var(--u));
    font-size: max(16px, calc(34.6 * var(--u)));
    white-space: nowrap;
  }
  .step-list li:not(:last-child) .pill::after {      /* dotted connector */
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    width: calc(45 * var(--u));
    border-top: max(2px, calc(3 * var(--u))) dotted var(--maroon);
    transform: translateY(-50%);
  }
  .step-list p {
    margin-top: calc(40 * var(--u));
    font-size: max(15px, calc(23.9 * var(--u)));
    line-height: 1.34;
    letter-spacing: .039em;
    text-align: center;
    text-shadow: 0 .04em .08em rgba(0, 0, 0, .14);
  }

  /* --- 6: Service & Preise --- */
  .prices .wrap { height: calc(768 * var(--u)); }
  .cutouts {
    position: absolute;
    inset: 0 calc(37 * var(--u));
    overflow: hidden;
  }
  .cut { position: absolute; max-width: none; height: auto; }
  .cut-kelly { left: calc(-261 * var(--u)); top: calc(-81 * var(--u)); width: calc(675 * var(--u)); }
  .cut-adam  { left: calc(857 * var(--u));  top: calc(-103 * var(--u)); width: calc(683 * var(--u)); }
  .prices-text {
    position: absolute;
    left: calc(466 * var(--u));
    top: calc(95.4 * var(--u));
    width: calc(600 * var(--u));
    z-index: 1;
  }
  .prices-text .h-l { font-size: calc(110 * var(--u)); line-height: calc(93.4 * var(--u)); }
  .prices-text .body {
    width: calc(578 * var(--u));
    margin-left: calc(11 * var(--u));
    font-size: max(14px, calc(21.2 * var(--u)));
  }
  .prices-text .h-l + .body { margin-top: calc(27.4 * var(--u)); }
  .price-grid {
    display: grid;
    grid-template-columns: calc(266 * var(--u)) auto;
    justify-content: start;
    margin: calc(14.2 * var(--u)) 0 calc(29.3 * var(--u));
  }
  .price {
    color: var(--maroon);
    margin-top: calc(3 * var(--u));
    font-size: calc(47.4 * var(--u));
    line-height: calc(48.4 * var(--u));
  }
  .extras {
    color: var(--maroon);
    padding-left: calc(4 * var(--u));
    font-size: max(14px, calc(27.3 * var(--u)));
    line-height: max(15px, calc(27.7 * var(--u)));
  }
}


/* ==========================================================================
   PHONE AND SMALL TABLET  (860 px and narrower)
   ========================================================================== */
@media (max-width: 860px) {

  .wrap { width: calc(390 * var(--m)); }

  .body {
    font-size: max(16px, calc(16.5 * var(--m)));
    line-height: 1.45;
    letter-spacing: .02em;
  }

  .h-xl { font-size: calc(86 * var(--m)); line-height: .86; }
  .h-l  { font-size: calc(60 * var(--m)); line-height: .88; }
  .h-m  { font-size: calc(44 * var(--m)); line-height: 1.1; letter-spacing: -.07em; }

  .pill {
    box-shadow: calc(5 * var(--m)) calc(5 * var(--m)) calc(5 * var(--m)) var(--shadow);
    letter-spacing: .03em;
  }
  .clip:not(.screen) {
    border-radius: calc(20 * var(--m));
    box-shadow: calc(6 * var(--m)) calc(6 * var(--m)) calc(6 * var(--m)) var(--shadow);
  }

  section > .wrap { padding: calc(52 * var(--m)) calc(24 * var(--m)); }

  /* --- 1 + 7: hero and footer ---
     The camera composition keeps its desktop drawing and is scaled down. */
  .hero .wrap { padding: calc(28 * var(--m)) 0 calc(40 * var(--m)); overflow: hidden; }
  .comp {
    --u: calc(var(--m) * 390 / 1330);
    margin-left: calc(-66 * var(--u));
    height: calc(720 * var(--u));
  }
  .hero .contact {
    padding: calc(14 * var(--m)) calc(24 * var(--m)) 0;
    font-size: max(17px, calc(18 * var(--m)));
    line-height: 1.5;
  }
  .hero .contact a { display: inline-block; padding: 4px 0; overflow-wrap: anywhere; }

  /* --- 2: Über uns --- */
  .about-text .h + .body { margin-top: calc(24 * var(--m)); }
  .about-text .body + .body { margin-top: calc(22 * var(--m)); }
  .pills-lang {
    display: grid;
    gap: calc(16 * var(--m));
    justify-content: center;
    margin-top: calc(16 * var(--m));
  }
  .pills-lang .pill {
    width: calc(210 * var(--m));
    height: calc(60 * var(--m));
    font-size: max(17px, calc(19 * var(--m)));
  }
  .about-clip { width: calc(282 * var(--m)); margin: calc(36 * var(--m)) auto 0; }

  /* --- 3: UGC Videos --- */
  .ugc-head .body { margin-top: calc(20 * var(--m)); }
  .clip-row, .clip-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(18 * var(--m));
    margin-top: calc(28 * var(--m));
  }

  /* --- 4: Videos für eure Kanäle --- */
  .channels-text .h + .body { margin-top: calc(22 * var(--m)); }
  .pills-tags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(14 * var(--m));
    margin: calc(20 * var(--m)) 0 calc(24 * var(--m));
  }
  .pills-tags .pill { height: calc(46 * var(--m)); font-size: max(16px, calc(18 * var(--m))); }

  /* --- 5: So entsteht dein Video --- */
  .steps .h-l { font-size: calc(52 * var(--m)); }
  .steps .body { margin-top: calc(20 * var(--m)); }
  .step-list { margin-top: calc(30 * var(--m)); }
  .step-list li { position: relative; padding-bottom: calc(30 * var(--m)); }
  .step-list li:not(:last-child)::before {           /* dotted connector */
    content: "";
    position: absolute;
    left: calc(34 * var(--m));
    top: calc(52 * var(--m));
    bottom: 0;
    border-left: 3px dotted var(--maroon);
  }
  .step-list .pill {
    position: relative;
    display: inline-flex;
    min-width: calc(170 * var(--m));
    height: calc(52 * var(--m));
    padding: 0 calc(26 * var(--m));
    font-size: max(18px, calc(21 * var(--m)));
  }
  .step-list p {
    margin: calc(14 * var(--m)) 0 0 calc(58 * var(--m));
    font-size: max(16px, calc(16.5 * var(--m)));
    line-height: 1.45;
    letter-spacing: .02em;
  }

  /* --- 6: Service & Preise --- */
  .prices .wrap { padding-bottom: 0; }
  .prices-text .h-l { font-size: calc(64 * var(--m)); }
  .prices-text .h-l + .body { margin-top: calc(22 * var(--m)); }
  .price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(16 * var(--m));
    margin: calc(22 * var(--m)) 0;
  }
  .price {
    color: var(--maroon);
    font-size: calc(32 * var(--m));
    line-height: 1.1;
  }
  .extras {
    color: var(--maroon);
    font-size: max(16px, calc(17 * var(--m)));
    line-height: 1.35;
  }
  .cutouts {
    position: relative;
    height: calc(250 * var(--m));
    margin: calc(20 * var(--m)) calc(-24 * var(--m)) 0;
    overflow: hidden;
  }
  .cut { position: absolute; max-width: none; height: auto; width: calc(215 * var(--m)); top: calc(-22 * var(--m)); }
  .cut-kelly { left: calc(-16 * var(--m)); }
  .cut-adam  { right: calc(-16 * var(--m)); }
  .prices .wrap { display: flex; flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  .clip-btn { transition: none; }
}