/* GripKinetics – öffentliche Website. Schwarzweiß, keine Akzentfarbe.
   Schrift wie auf Architektur-Seiten: EINE neutrale Grotesk (Helvetica Neue /
   Neue Haas, ersatzweise Arial), kleine Grade, enge Laufweite in den großen
   Zeilen, alles linksbündig, viel Weißraum. Keine Auszeichnungsschrift.
   Bewusst KEINE externen Schriften oder Dienste – nichts wird nachgeladen,
   also gibt es auch nichts zu tracken. */

/* Die Schrift liegt als Datei im Ordner fonts/ auf unserem eigenen Server.
   Damit sieht die Seite auf Mac, Windows, iPhone und Android gleich aus, und
   es wird trotzdem nichts von Google oder einem anderen Dienst nachgeladen.
   Inter, freie Lizenz (SIL Open Font License). */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --bg: #ffffff;
  --bg-alt: #f6f6f6;
  --text: #0a0a0a;
  --muted: #6b6b6b;
  --line: #e3e3e3;
  --nav: rgba(255, 255, 255, 0.78);
  --radius: 0px;
  --max: 980px;
  --sans: "Inter", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --serif: var(--sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-alt: #0e0e0e;
    --text: #f2f2f2;
    --muted: #8d8d8d;
    --line: #262626;
    --nav: rgba(0, 0, 0, 0.78);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 56px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* Eine Schrift für alles. Unterschieden wird über Grad, Laufweite und Farbe. */

/* ---- Navigation ---- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: 56px;
  display: flex; align-items: center; gap: 24px;
  padding: 0 max(20px, env(safe-area-inset-left));
  background: var(--nav);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.brand { font-size: 13px; letter-spacing: -0.01em; }
.links { display: flex; gap: 26px; margin-left: 48px; color: var(--muted); }
.links a:hover { color: var(--text); }
.actions { display: flex; align-items: center; margin-left: auto; }
.nav a, .nav button { font-size: 13px; }
/* Sprachwahl: nur zwei Kürzel, die aktive Sprache in voller Farbe. */
.lang { display: flex; gap: 10px; margin-right: 20px; color: var(--muted); }
.lang [aria-current] { color: var(--text); }
.lang a:hover { color: var(--text); }
.login {
  padding: 7px 16px;
  border: 1px solid var(--text); color: var(--text); font-weight: 400;
}
.login:hover { background: var(--text); color: var(--bg); opacity: 1; }
.login:hover { opacity: 0.82; }

/* ---- Hero: nur der Name ---- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 20px 40px;
}
/* Schriftzug und Namenszeile bilden zusammen die Hauptüberschrift (h1). */
.headline { margin: 0; font-weight: 400; }
.wordmark {
  display: block;
  font-size: clamp(2.9rem, 11vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
}
/* Name und Beruf klein und gesperrt wie die Abschnitts-Überschriften, aber in voller Farbe. */
.byline {
  display: block; margin-top: 34px;
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.6;
}
.tagline {
  margin: 14px 0 0; color: var(--muted);
  font-size: clamp(0.95rem, 1.7vw, 1.1rem); letter-spacing: 0; line-height: 1.5;
}
.scroll {
  margin-top: 12vh; width: 22px; height: 36px;
  border: 1px solid var(--line); border-radius: 12px; position: relative;
}
.scroll span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px;
  border-radius: 2px; background: var(--muted);
  animation: scroll 2.2s ease-in-out infinite;
}
@keyframes scroll { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(12px); opacity: 0; } }

/* ---- Abschnitte ---- */
.section {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(80px, 13vw, 150px) 24px;
  border-top: 1px solid var(--line);
}
.section > p, .section > h2, .section > .lead, .section > .profiles { max-width: 680px; }
.section.center { text-align: center; }
.section.center > * { margin-left: auto; margin-right: auto; }

.eyebrow {
  margin: 0 0 22px; color: var(--muted);
  font-size: 11px; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase;
}
h2 {
  margin: 0 0 26px; max-width: 24ch;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  letter-spacing: -0.03em; line-height: 1.16;
}
h3 { margin: 0 0 10px; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
.lead {
  margin: -8px 0 30px; color: var(--muted);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.2rem); line-height: 1.5; letter-spacing: -0.01em;
}
.lead em, .section p em { font-style: italic; }
.section p + p { margin-top: 1.15em; }
.section > p { max-width: 640px; }
.small { font-size: 12px; color: var(--muted); margin-top: 16px; letter-spacing: 0.01em; }

/* ---- Eckdaten (Sprachen, Befähigungen, Drehländer) ---- */
.facts { margin: 44px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 760px; }
.facts div {
  display: grid; grid-template-columns: 150px 1fr; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.facts dt { color: var(--muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 4px; }
.facts dd { margin: 0; }
@media (max-width: 760px) { .facts div { grid-template-columns: 1fr; gap: 4px; } }

/* ---- Profil-Knöpfe (IMDb, Crew United) ---- */
.profiles { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; margin-top: 34px; }
/* Die beiden Logos stehen frei auf der Seite, ohne Kasten. Das Crew-United-
   Zeichen ist einfarbig und nimmt die Schriftfarbe an (ueber eine Maske, damit
   die Datei unveraendert bleibt); das IMDb-Zeichen bleibt in seinem Gold, weil
   es dafuer gemacht ist, auf hellem wie dunklem Grund zu stehen. */
.profile {
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0.9; transition: opacity 0.2s ease;
}
.profile:hover { opacity: 1; }
.profile .mark { display: block; }
.profile .imdb { height: 21px; width: auto; }
.profile .cu {
  width: 106px; height: 26px; background: currentColor;
  -webkit-mask: url("logos/crew-united.svg") no-repeat center / contain;
  mask: url("logos/crew-united.svg") no-repeat center / contain;
}
.profile .out {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  width: 13px; height: 13px; opacity: 0.4;
}

.section.center .profiles { justify-content: center; }

/* ---- Knopf zur App ---- */
.button {
  display: inline-block; margin-top: 16px;
  padding: 12px 26px;
  border: 1px solid var(--text); color: var(--text); font-size: 13px; letter-spacing: 0.02em;
}
.button:hover { background: var(--text); color: var(--bg); opacity: 1; }
.button:hover { opacity: 0.82; }

/* Platzhalter sind absichtlich sichtbar markiert, damit nichts Unfertiges
   unbemerkt online geht. */
.placeholder { outline: 1px dashed var(--muted); outline-offset: 6px; border-radius: 4px; opacity: 0.7; }

.mail {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 400; letter-spacing: -0.02em;
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
}
.mail:hover { border-bottom-color: var(--text); }

/* ---- Fuß ---- */
.footer {
  display: flex; flex-wrap: wrap; gap: 24px;
  max-width: var(--max); margin: 0 auto;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); color: var(--muted); font-size: 12px;
}
.footer a:hover { color: var(--text); }
.footer span { margin-right: auto; }

/* ---- Einblenden beim Scrollen ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal, .reveal.static { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll span { animation: none; }
}

/* ---- Handy ---- */
@media (max-width: 760px) {
  .links { display: none; }
  .profiles { gap: 10px; }
}

/* ---- Zugang anfragen (/access, /de/zugang) ----
   Formular im Stil der Seite: kleine gesperrte Beschriftungen wie die
   Abschnitts-Überschriften, Felder nur mit Linie unten, keine Kästen. */
.request { border-top: 0; padding-top: clamp(120px, 16vw, 180px); }
.request-title {
  margin: 0 0 26px; max-width: 24ch; font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.16;
}
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; max-width: 760px; margin-top: 44px; }
.form .wide { grid-column: 1 / -1; }
.form[hidden] { display: none; }  /* sonst gewinnt display:grid gegen hidden */
.field { display: grid; gap: 8px; }
.field span { color: var(--muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.field input, .field textarea {
  font: inherit; color: var(--text); background: transparent;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 8px 0; width: 100%; outline: none;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--text); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.6; }
.field.falsch span { color: var(--text); }
.field.falsch input, .field.falsch textarea { border-bottom-color: var(--text); }
.consent { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 13px; line-height: 1.5; }
.consent input { margin-top: 3px; accent-color: var(--text); }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.form .button { margin-top: 4px; background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { max-width: 680px; margin: 34px 0 0; padding: 18px 0; border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
.notice.error { border-top-color: var(--line); color: var(--text); }
.request .small { margin-top: 44px; }
.request .small a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .form { grid-template-columns: 1fr; } }

/* ---- Impressum / Datenschutz ---- */
.legal { max-width: 720px; margin: 0 auto; padding: 120px 24px 80px; }
.legal h1 { font-weight: 400; font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -0.03em; margin: 0 0 32px; }
.legal h2 { max-width: none; font-size: 1.05rem; font-weight: 500; margin: 44px 0 12px; }
.legal p, .legal li { color: var(--muted); }
.legal strong { color: var(--text); font-weight: 600; }
.legal .mail { font-size: inherit; font-weight: 500; border: 0; }