/* 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; }
.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;
}
.wordmark {
  margin: 0;
  font-size: clamp(2.9rem, 11vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
}
.tagline {
  margin: 26px 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; }
}

/* ---- 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; }