/* ==========================================================================
   Startseite — HEAD (ShowReel + Titel im Blocksatz + „SEE MY WORK"),
   Projekt-Brett (Anordnung nach buck.co: Reihen 1/3 + 2/3 wechselnd),
   Career-Sektion (Formular), Footer.
   ========================================================================== */

/* ---- HEAD: Anker der Framer-Seite (1200 × 1005, Video 1127 × 634, Titel oben rechts) ---- */
.head { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 100%; max-width: var(--page); height: 984px; overflow: hidden; }
.head__video-wrap { position: absolute; left: 0; right: 0; top: 236px; display: flex; flex-direction: column; align-items: center; }  /* Titelblock endet bei ~197, Video 40 darunter, unten 40 Luft zum Namen */
.vimeo { position: relative; width: 1127px; height: 634px; overflow: hidden; }
.vimeo iframe, .vimeo video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
video::-webkit-media-controls { display: none !important; }
.head__line { position: absolute; left: 0; bottom: 0; width: 100%; }
.head__scroll { position: absolute; right: 32px; bottom: 16px; font-size: 10px; letter-spacing: -.2px; line-height: 14px; color: var(--ink-40); white-space: pre; }
.head__name { position: absolute; right: 32px; bottom: 40px; font-size: 50px; font-weight: 600; line-height: 1; text-align: right; color: var(--ink); }
.head__name p { white-space: pre; }  /* pre nur am Absatz, sonst zählen die Zeilenumbrüche zwischen den <p> als Zeilen */  /* Unterkante auf Höhe des ECLPT//-Blocks */
.head__name--stacked { display: none; }
.head__brand { position: absolute; left: 36px; bottom: 40px; width: 391px; font-size: 14px; line-height: 16.8px; color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.head__brand p { white-space: pre-wrap; }
.head__brand--phone { display: none; }

/* Titel: echter Blocksatz — jede Zeile spannt die Blockbreite, Lücken sind Rechtecke.
   Breite 722 = gemessene Titelbreite der Framer-Seite. */
.head__title { position: absolute; top: 36px; right: 32px; width: 722px; display: flex; flex-direction: column; align-items: flex-end; gap: 22px; }
.head__h1 { width: 100%; font-size: 58px; font-weight: 600; line-height: 1.05; color: var(--ink); }
.head__h1 p { text-align: justify; text-align-last: justify; white-space: normal; }
.head__sub { font-size: 14px; line-height: 16.8px; white-space: pre; color: var(--ink-40); }

/* „SEE MY WORK": Titelhöhe, linksbündig (Anker: 36 px Seitenrand des HEAD) */
.head__cta { position: absolute; left: 36px; top: 36px; }
.head__cta .btn { height: 61px; padding: 0 var(--s32); }  /* 61 = Titelblock-Höhe (2 × 30,45) */

@media (min-width: 810px) and (max-width: 1199.98px) {
  .head { max-width: 810px; height: 700px; }
  .head__video-wrap { top: 200px; }
  .vimeo { width: 714px; height: 402px; }
  .head__scroll { right: 45px; bottom: 16px; }
  .head__name { right: 45px; bottom: 40px; font-size: 32px; line-height: 1.1; }
  .head__name--single { display: none; }
  .head__name--stacked { display: block; }
  .head__brand { left: 44px; bottom: 40px; }
  .head__title { top: 37px; right: 44px; width: 540px; gap: 18px; }
  .head__h1 { font-size: 44px; }
  .head__cta { left: 44px; top: 37px; }
}
@media (max-width: 809.98px) {
  .head { max-width: none; height: 656px; min-height: 641.5px; }
  .head__video-wrap { top: 120px; }
  .vimeo { width: 345px; max-width: calc(100% - 44px); height: 194px; }
  .head__scroll, .head__name { display: none; }
  .head__brand--desktop { display: none; }
  .head__brand--phone { display: block; left: 22px; right: 22px; bottom: 32px; width: auto; }
  .head__brand--phone .big { font-size: 32px; font-weight: 600; line-height: 38.4px; }
  .head__brand--phone .small { font-size: 10px; letter-spacing: -.2px; line-height: 16px; color: var(--ink-40); }
  .head__title { top: 30px; left: 22px; right: 22px; width: auto; gap: 10px; }
  .head__h1 { font-size: 27px; }
  .head__sub { font-size: 9px; line-height: 10.8px; }
  .head__cta { left: 22px; top: 352px; }
  .head__cta .btn { height: 48px; padding: 0 var(--s24); }
}

/* ---- Career-Sektion auf der Startseite ------------------------------------ */
.career { width: 100%; max-width: var(--page); padding: var(--section) var(--page-pad); border-top: 1px solid var(--hairline); }
.career__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s24); align-items: end; margin-bottom: var(--s24); }
.career__head .t-label { margin-bottom: 10px; }
.career__title { font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.career__title .sp { letter-spacing: .41em; } /* Anker: Career-Titel der Framer-Seite */
.career__text { font-size: 14px; line-height: 1.6; color: var(--ink-80); max-width: 420px; justify-self: end; }
.career__logos { position: relative; height: 49px; margin-bottom: var(--s24); }
.career .form-wrap { position: relative; top: auto; left: auto; transform: none; width: 100%; }
@media (max-width: 1199.98px) { .career__title { font-size: 32px; } }
@media (max-width: 809.98px) {
  .career__head { grid-template-columns: 1fr; }
  .career__title { font-size: 24px; }
  .career__text { justify-self: start; }
  .career__logos { height: 27px; }
}