/* =============================================================================
   OFFENSIVST – Styles  (Work Sans, 1:1 an offensivst.de angelehnt)
   ============================================================================= */
@import url('../fonts/fonts.css');

:root {
  --black: #000000;
  --white: #ffffff;
  --header-h: 110px;
  --ease: cubic-bezier(.2,.6,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--black);
  font-family: 'Work Sans', -apple-system, Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .01em;
}
a { color: inherit; text-decoration: none; }
img { display: block; }

/* --- Kopf / Logo + Navigation -------------------------------------------- */
.site-header {
  position: absolute;            /* wie im Original: oben, scrollt mit */
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 1000;
  pointer-events: none;
}
.site-header a, .site-header .brand { pointer-events: auto; }
/* Logo: weißes PNG. mix-blend difference -> über dunklen Videos weiß,
   auf weißen Seiten automatisch schwarz (immer sichtbar). */
.brand img { height: 64px; width: auto; mix-blend-mode: difference; }
.nav {
  display: flex;
  gap: 30px;
  font-size: 16px;
  font-weight: 500;
  mix-blend-mode: difference;
  color: #fff;
}
.nav a { opacity: .9; transition: opacity .2s; }
.nav a:hover { opacity: .6; }

/* =============================================================================
   STARTSEITE – Filme im Vollbild
   ============================================================================= */
.films { background: #000; }
.film {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
}
.film .video-wrap { position: absolute; inset: 0; pointer-events: none; }
/* Player exakt aufs echte Seitenverhältnis (--r) skaliert -> füllt den
   Bildschirm komplett, ohne schwarze Ränder (cover) */
.film iframe {
  position: absolute;
  top: 50%; left: 50%;
  width:  max(100vw, calc(100vh * var(--r, 1.7778)));
  height: max(100vh, calc(100vw / var(--r, 1.7778)));
  transform: translate(-50%, -50%);
  border: 0;
}
.film video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Titel: rechte Spalte, vertikal mittig, weiß, fett (wie Original) */
.film .overlay {
  position: absolute;
  top: 0; right: 0;
  width: 32%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 48px 0 12px;
  z-index: 2;
}
.film .overlay a {
  color: #fff;
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .01em;
  overflow-wrap: break-word;
  transition: opacity .2s;
}
.film .overlay a:hover { opacity: .7; }

/* =============================================================================
   INHALTSSEITEN
   ============================================================================= */

/* Dunkles Foto-Hero (Wir) */
.hero-photo {
  position: relative;
  height: 100vh;
  min-height: 560px;
  background: #111 center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-photo::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.25); }
.hero-photo h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(48px, 8vw, 80px);
  font-weight: 700;
  text-align: center;
  letter-spacing: .02em;
}

/* Dunkles Banner (Links / Projekte) */
.banner {
  position: relative;
  height: 360px;
  background: #0c0c0c;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.banner::before {
  content:""; position:absolute; inset:0;
  background: var(--banner-img, none) center/contain no-repeat;
  opacity: .35;
}
.banner h1 {
  position: relative; z-index:1;
  color: #fff; font-size: 32px; font-weight: 700;
  text-align: center; letter-spacing: .04em;
}

/* Weißer Inhaltsbereich */
.content { max-width: 980px; margin: 0 auto; padding: 80px 24px 120px; }
.content.narrow { max-width: 760px; }

/* Schlichte Überschrift (Kontakt / Impressum) – schwarz, links */
.page-title {
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 700;
  margin-bottom: 40px;
}

.content p {
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 22px;
  max-width: 700px;
}
.content h2 { font-size: 20px; font-weight: 700; margin: 36px 0 10px; }
.contact-info { font-size: 20px; line-height: 1.9; margin-top: 8px; }
.contact-info a { border-bottom: 1px solid rgba(0,0,0,.35); }

/* Wir-Seite: Text mittig, ruhige Leseachse */
.wir-content p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Galerie (Wir): 2-spaltiges Masonry, sanft abgerundet */
.gallery { columns: 2; column-gap: 18px; margin-top: 64px; }
.gallery img {
  width: 100%;
  margin-bottom: 18px;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* Schwarze Button-Pillen (Links / Projekte) */
.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.buttons a {
  min-width: 342px;
  max-width: 100%;
  padding: 20px 48px;
  background: #000;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  border-radius: 6px;
  transition: opacity .2s, transform .15s;
}
.buttons a:hover { opacity: .82; transform: translateY(-1px); }
.project { margin-bottom: 64px; }
.project > h2 {
  text-align: center;
  font-size: 30px;
  margin-bottom: 12px;
}
.project-info {
  text-align: center;
  margin: 0 auto 28px;
  opacity: .75;
}

/* Kontaktformular */
.contact-form { max-width: 640px; margin: 8px 0 56px; }
.contact-form .field { margin-bottom: 22px; }
.contact-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.contact-form label .req { font-weight: 400; opacity: .55; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  color: #000;
  background: #fff;
  border: 1px solid #111;
  border-radius: 2px;
}
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form button {
  padding: 16px 44px;
  background: #000;
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .2s;
}
.contact-form button:hover { opacity: .82; }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid rgba(0,0,0,.12);
  padding: 48px 24px;
  text-align: center;
  font-size: 15px;
  color: #111;
}
.site-footer .foot-nav {
  display: flex; gap: 28px; justify-content: center;
  margin-bottom: 18px; flex-wrap: wrap; font-weight: 500;
}
.site-footer .foot-nav a:hover { opacity: .6; }
.site-footer .foot-meta { opacity: .6; font-size: 13px; }
.site-footer a { border: 0; }

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --header-h: 84px; }
  .site-header { padding: 0 18px; }
  .brand img { height: 46px; }
  .nav { gap: 18px; font-size: 14px; }
  .film .overlay { width: 100%; padding: 0 22px 40px; justify-content: flex-end; }
  .film .overlay a { font-size: 26px; }
  .gallery { columns: 1; }
  .buttons a { min-width: 0; width: 100%; font-size: 20px; }
}