@charset "UTF-8";

/* ============================================================
   Start Intro Page – Random Profiles Variant
============================================================ */

:root {
  --start-bg: #c7b76a;
  --start-frame: #ffffff;
  --start-ink: #000000;
  --start-soft: rgba(0, 0, 0, .66);

  --start-frame-width: .625em;
  --start-edge-gap: 1em;
  --newest-gap: 1em;

  /* Höhe der unteren Felder */
  --newest-card-height: clamp(17rem, 38vh, 29rem);

  /* Text etwas höher als Mitte */
  --start-content-lift: -14vh;
}

html,
body.start-page {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--start-bg) !important;
}

body.start-page {
  position: relative;
  color: var(--start-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Weisser Aussenrand */
body.start-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  box-sizing: border-box;
  border: var(--start-frame-width) solid var(--start-frame);
  pointer-events: none;
}

/* Startseite ohne normales Menü / Rails */
body.start-page .menu-bar,
body.start-page .corner-stack,
body.start-page .fav-box,
body.start-page .favorites-rail,
body.start-page .result-pin-toggle {
  display: none !important;
}

.start-intro {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100svh;
  min-height: 100vh;
  padding: 2.5rem;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--start-bg) !important;
}

/* Weisser Übergang zu results.php */
.start-intro::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .65s ease;
}

body.start-leave .start-intro::after {
  opacity: 1;
}

/* ============================================================
   Zentraler Inhalt
============================================================ */

.start-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(86vw, 860px);
  text-align: center;
  transform: translateY(var(--start-content-lift));
}

.start-copy,
.start-actions {
  opacity: 1;
  transform: none;
}

.start-copy {
  animation: startFadeUp .7s ease .15s both;
}

.start-actions {
  animation: startFadeUp .65s ease .65s both;
}

.start-copy h1 {
  max-width: min(74vw, 2020px);
  margin: 0 auto .9rem;
  color: var(--start-ink);
  font-family: Georgia, serif;
  font-size: clamp(1.45rem, 3.3vw, 2.45rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: .0825rem;
}

.start-title-brand {
  white-space: nowrap;
}

@media (max-width: 780px) {
  .start-title-brand {
    white-space: normal;
  }
}

.start-copy h1 i {
  font-style: italic;
}

.start-copy p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--start-soft);
  font-size: clamp(.92rem, 1.65vw, 1.08rem);
  line-height: 1.55;
  letter-spacing: .0825rem;
}

.welcome-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 11rem;
  max-width: none;
  margin: 2.15rem auto 1.15rem;
  padding: .95rem 1.35rem;
  box-sizing: border-box;
  border: 1px solid var(--start-ink);
  border-radius: 0;
  background: var(--start-ink);
  color: var(--start-bg) !important;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1625rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    transform .22s ease;
}

.welcome-close:hover,
.welcome-close:focus-visible {
  background: transparent;
  color: var(--start-ink) !important;
  border-color: var(--start-ink);
  transform: translateY(-1px);
  outline: none;
}

.desktop-note {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(0, 0, 0, .52);
  font-size: .78rem;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: .0825rem;
}

.desktop-note a {
  color: rgba(0, 0, 0, .72);
  text-decoration: none;
}

.desktop-note a:hover,
.desktop-note a:focus-visible {
  color: var(--start-ink);
}

/* ============================================================
   Random Profile Cards
============================================================ */

.newest-strip {
  position: fixed;
  right: calc(var(--start-frame-width) + var(--start-edge-gap));
  bottom: calc(var(--start-frame-width) + var(--start-edge-gap));
  left: calc(var(--start-frame-width) + var(--start-edge-gap));
  z-index: 8;
  box-sizing: border-box;

  opacity: 0;
  transform: translateY(.65rem);
  animation: newestStripIn .8s ease 1.55s forwards;
}

.newest-strip-title {
  margin: 0 0 .72rem;
  padding: 0;

  color: var(--start-soft);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(.92rem, 1.65vw, 1.08rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .0825rem;
  text-transform: none;
}


.start-registration-link {
  position: fixed;
 top: calc(var(--start-frame-width) + .325rem);
right: calc(var(--start-frame-width) + .625rem);
  z-index: 40;

  color: var(--start-soft);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(.88rem, 1.5vw, 1.02rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .0825rem;
  text-decoration: none;
  white-space: nowrap;

  transition: color .22s ease;
}

.start-registration-link:hover,
.start-registration-link:focus-visible {
  color: #a00101;
  text-decoration: none;
  outline: none;
}

.newest-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--newest-gap);
  width: 100%;
}

.newest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--newest-card-height);
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--card-bg, #ffffff);
  color: var(--start-ink) !important;
  text-decoration: none;
cursor: default;
  opacity: 0;
  transform: translateY(.45rem);
  transition:
    opacity .75s ease,
    transform .75s ease,
    background-color .22s ease,
    color .22s ease;
}

.newest-card.is-loaded {
  opacity: 1;
  transform: translateY(0);
}

.newest-card.is-missing {
  display: none;
}

.newest-card:hover,
.newest-card:focus-visible {
  background: var(--card-hover-bg, rgba(255, 255, 255, .42));
  color: var(--start-ink) !important;
  outline: none;
}

.newest-card {
  position: relative;
}

.newest-card-badge {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 1.45rem;
  padding: .28rem .28rem .28rem;
  box-sizing: border-box;

  font-family: var(--font-sans, Arial, sans-serif);
  font-size: .72rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .0825rem;
  text-transform: uppercase;
  white-space: nowrap;

  color: rgba(255, 255, 255, .88) !important;
  pointer-events: none;
}

.newest-card-badge-upcoming {
  background-color: #6f4d68;
  border: 1px solid #6f4d68;
}

/* ============================================================
   Card Image
============================================================ */

.newest-card-figure {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  height: 52%;
  min-height: 0;
  margin: .5em .5em .65em;
  overflow: visible;
}

.newest-card-image {
  display: block;
  filter: grayscale(100%) contrast(.95) brightness(1.04);
  mix-blend-mode: multiply;
  border: none;
  transition:
    filter .18s ease,
    mix-blend-mode .18s ease,
    opacity .18s ease;
}

/* Beim Mouseover wird das Bild farbig */
.newest-card:hover .newest-card-image,
.newest-card:focus-visible .newest-card-image {
  filter: grayscale(0%) contrast(1) brightness(1);
  mix-blend-mode: normal;
}

/* Querformat: immer ganz sichtbar */
.newest-card-image.is-landscape {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

/* Hochformat: schmaler, links gesetzt, ebenfalls ganz sichtbar */
.newest-card-image.is-portrait {
  width: auto;
  max-width: 68%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

/* ============================================================
   Card Text
============================================================ */

.newest-card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 .72em .78em;
  box-sizing: border-box;
  overflow: hidden;
}

/* Name: etwas kleiner, serifenlos wie Results */
.newest-card-name {
  color: rgba(0, 0, 0, .88);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(.9rem, 1.04vw, 1.14rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .095rem;
}

/* PLZ / Ort: etwas grösser */
.newest-card-location {
  margin-top: .34rem;
  color: rgba(0, 0, 0, .64);
  font-size: clamp(.66rem, .84vw, .88rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .078rem;
}

/* Roles: wieder etwas kleiner als PLZ/Ort */
.newest-card-roles {
  margin-top: .66rem;
  color: rgba(0, 0, 0, .70);
  font-size: clamp(.56rem, .72vw, .74rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .06rem;
}

/* Text auf Hover sauber mitziehen */
.newest-card:hover .newest-card-name,
.newest-card:hover .newest-card-location,
.newest-card:hover .newest-card-roles,
.newest-card:hover .newest-card-date,
.newest-card:focus-visible .newest-card-name,
.newest-card:focus-visible .newest-card-location,
.newest-card:focus-visible .newest-card-roles,
.newest-card:focus-visible .newest-card-date {
  color: rgba(0, 0, 0, .92);
}

/* ============================================================
   Number of Cards by Screen Size
============================================================ */

/* Standard: 5 Karten */
.newest-card:nth-child(n + 6) {
  display: none;
}

/* Grössere Screens: 6 Karten */
@media (min-width: 1800px) {
  .newest-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .newest-card:nth-child(n + 6) {
    display: flex;
  }

  .newest-card:nth-child(n + 7) {
    display: none;
  }
}

/* Sehr grosse Screens: 7 Karten */
@media (min-width: 2300px) {
  .newest-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .newest-card:nth-child(n + 7) {
    display: flex;
  }
}

/* Kleinere Laptops: 4 Karten */
@media (max-width: 1300px) {
  :root {
    --newest-card-height: clamp(16rem, 36vh, 25rem);
  }

  .newest-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .newest-card:nth-child(n + 5) {
    display: none;
  }

  .newest-card-figure {
    height: 52%;
  }

  .newest-card-name {
    font-size: clamp(.86rem, 1vw, 1.06rem);
  }

  .newest-card-location {
    font-size: clamp(.62rem, .8vw, .8rem);
  }

  .newest-card-roles {
    font-size: clamp(.54rem, .68vw, .7rem);
  }
}

/* Tablets / kleine Screens: 3 Karten */
@media (max-width: 1050px) {
  :root {
    --start-content-lift: -18vh;
    --newest-card-height: clamp(14rem, 31vh, 21rem);
  }

  .newest-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .newest-card:nth-child(n + 4) {
    display: none;
  }

  .newest-card-figure {
    height: 50%;
  }

  .newest-card-name {
    font-size: clamp(.82rem, 1.18vw, .98rem);
    letter-spacing: .085rem;
  }

  .newest-card-location {
    font-size: clamp(.6rem, .82vw, .72rem);
  }

  .newest-card-roles {
    font-size: clamp(.5rem, .68vw, .62rem);
    -webkit-line-clamp: 4;
  }
}

/* Mobile: keine Karten */
@media (max-width: 760px) {
  .newest-strip {
    display: none;
  }
}

/* ============================================================
   Leave Transition
============================================================ */

body.start-leave .start-content,
body.start-leave .newest-strip,
body.start-leave .start-registration-link {
  opacity: 0;
  transition: opacity .42s ease;
  pointer-events: none;
}

body.start-leave .newest-strip,
body.start-leave .start-registration-link {
  animation: none;
}

/* ============================================================
   NoScript
============================================================ */

.start-noscript {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-content: center;
  padding: 2rem;
  background: var(--start-bg);
  color: var(--start-ink);
  text-align: center;
}

.start-noscript h1,
.start-noscript p {
  color: var(--start-ink);
}

.start-noscript a {
  color: var(--start-ink);
  text-decoration: underline;
}

/* ============================================================
   Animations
============================================================ */

@keyframes startFadeUp {
  from {
    opacity: 0;
    transform: translateY(.7rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes newestStripIn {
  from {
    opacity: 0;
    transform: translateY(.65rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Mobile Main Text
============================================================ */

@media (max-width: 680px) {
  :root {
    --start-frame-width: .75em;
    --start-content-lift: -5vh;
  }

  .start-intro {
    padding: 1.8rem;
  }

  .start-copy h1 {
    font-size: clamp(1.18rem, 6vw, 1.75rem);
    line-height: 1.18;
  }

  .start-copy p {
    font-size: .88rem;
  }

  .welcome-close {
    min-width: 10rem;
    margin-top: 1.75rem;
  }

  .desktop-note {
    font-size: .68rem;
  }
}

/* ============================================================
   Reduced Motion
============================================================ */

@media (prefers-reduced-motion: reduce) {
  .start-copy,
  .start-actions {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .newest-strip {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .newest-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Footer Band on Start Page
============================================================ */

:root {
  --start-footer-band: 2.15rem;
}

/* Weisser Aussenrand unten höher machen */
body.start-page::before {
  border-width:
    var(--start-frame-width)
    var(--start-frame-width)
    var(--start-footer-band)
    var(--start-frame-width);
}

/* Profilkarten über den Footer-Balken schieben */
.newest-strip {
  bottom: calc(var(--start-footer-band) + var(--start-edge-gap));
}

/* Footer im weissen unteren Balken */
body.start-page .footer-wrapper {
  position: fixed;
  left: calc(var(--start-frame-width) + .625rem);
  right: 3.1rem;
  bottom: .72rem;
  z-index: 80;

  width: auto;
  max-width: 800px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.start-page .footer-wrapper footer {
  width: 100%;
  margin: 0;
  padding: 0;
}

body.start-page .footertext {
  margin: 0;
  padding: 0 0 0 0.85em;

  color: var(--color-11, #000000);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .825rem;
  font-weight: 400;
  line-height: 1rem;
  letter-spacing: .0825rem;
  text-align: left;
}

body.start-page .footer-link {
  color: #000000;
  text-decoration: none;
}

body.start-page .footertext a,
body.start-page .footer-link {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

body.start-page .footer-link:hover,
body.start-page .footer-link:focus-visible {
  color: #a00101;
  text-decoration: none;
}

body.start-page .footer-wrapper .right-container {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --start-footer-band: 5rem;
  }

  body.start-page::before {
    border-width:
      var(--start-frame-width)
      var(--start-frame-width)
      var(--start-footer-band)
      var(--start-frame-width);
  }

  body.start-page .footer-wrapper {
    position: fixed;
    left: calc(var(--start-frame-width) + .65rem);
    right: calc(var(--start-frame-width) + .65rem);
    bottom: .72rem;
    z-index: 80;

    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  body.start-page .footertext {
    text-align: center;
  }
}

/* ============================================================
   iPhone / small mobile landscape footer fix
============================================================ */

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --start-footer-band: 3.1rem;
  }

  body.start-page::before {
    border-width:
      var(--start-frame-width)
      var(--start-frame-width)
      var(--start-footer-band)
      var(--start-frame-width);
  }

  body.start-page .footer-wrapper {
    left: calc(var(--start-frame-width) + .65rem);
    right: calc(var(--start-frame-width) + .65rem);
    bottom: .55rem;
    max-width: none;
  }

  body.start-page .footertext,
  body.start-page .footertext a,
  body.start-page .footer-link {
    font-size: .825rem !important;
    line-height: 1rem !important;
    letter-spacing: .0825rem !important;
    text-align: center;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

.newest-card-kicker {
  margin-bottom: .42rem;
  color: rgba(0, 0, 0, .54);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(.5rem, .62vw, .64rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .115rem;
  text-transform: uppercase;
}

.newest-card:hover .newest-card-kicker,
.newest-card:focus-visible .newest-card-kicker {
  color: rgba(0, 0, 0, .78);
}

.start-copy p,
.newest-strip-title {
  color: rgba(0, 0, 0, .82);
}

/* ============================================================
   Registration Cinematographers Badge
============================================================ */

.start-registration-link {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 120;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: .625rem;
  margin-right: .625rem;
  padding: .66rem .66rem .66rem;
  box-sizing: border-box;

  background: var(--start-registration-bg, rgba(255, 255, 255, .42));
  border: 0;
  color: var(--start-ink, #000) !important;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .87rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .0825rem;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;

  opacity: 0;
  transform: translateY(.65rem);

  animation: newestStripIn .8s ease 1.95s forwards;
}

.start-registration-link:hover,
.start-registration-link:focus-visible {
  background: var(--start-ink, #000);
  color: var(--start-frame, #fff) !important;
  outline: none;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .start-registration-link {
    margin-top: .75rem;
    margin-right: .75rem;
    max-width: calc(100vw - 3.25rem);
    padding: .34rem .54rem .36rem;
    font-size: .66rem;
    letter-spacing: .075rem;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .start-registration-link {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.newest-card-date {
  margin-top: 0rem;
  color: rgba(0, 0, 0, .64);
  font-size: clamp(.66rem, .84vw, .88rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .078rem;
}

.newest-card-roles {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 6;
  -webkit-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 1.18;
  max-height: calc(1.18em * 6);
}

.newest-card-roles {
  word-break: normal;
  overflow-wrap: anywhere;
}