/* BlackMachine 8 – Landingpage · Invoked
   Mobile first. Farben und Maße zentral als Variablen. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #13100e;
  --bg-2: #1b1714;
  --line: #3a322b;
  --text: #f3ece0;
  --muted: #b9ad9c;
  --accent: #f29201;
  --accent-soft: rgba(242, 146, 1, .14);
  --radius: 14px;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --head-h: 64px;      /* Höhe der Kopfzeile ab Tablet */
  --hero-top: 60px;    /* Abstand Kopfzeile → Foto ab Tablet */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #000; padding: 8px 14px; border-radius: 6px; z-index: 50; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Kopfzeile ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(19, 16, 14, .75);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand . lang" "nav nav nav";
  align-items: center;
  column-gap: 16px;
  padding-top: 12px;
}
.brand { grid-area: brand; display: inline-flex; }
.brand svg, .brand img { width: 96px; height: auto; }
.nav { grid-area: nav; display: flex; gap: 22px; overflow-x: auto; padding: 10px 0 12px; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a, .lang {
  font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--muted); white-space: nowrap;
}
.nav a:hover, .lang a:hover { color: var(--text); }
.lang { grid-area: lang; border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; display: inline-flex; gap: 6px; }
.lang a { text-decoration: none; }
.lang [aria-current] { color: var(--text); }

@media (min-width: 760px) {
  .top .wrap { grid-template-areas: "brand nav lang"; padding: 0 var(--gutter); height: var(--head-h); }
  .nav { justify-content: flex-end; padding: 0; gap: 28px; }
  .brand svg, .brand img { width: 112px; }
}

/* ---------- Typo-Bausteine ---------- */
.eyebrow {
  margin: 0 0 .6rem;
  color: var(--accent);
  font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
}
h1, h2, h3 { line-height: 1.1; margin: 0; }
h1, h2 { color: #fff; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 750; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }

/* ---------- Hero (Skizze) ---------- */
.hero { padding: clamp(28px, 5vw, 56px) 0 clamp(36px, 5vw, 56px); }
.hero-grid {
  display: grid;
  gap: 28px;
  grid-template-areas: "head" "shot" "intro" "price" "feat";
}
.hero-head { grid-area: head; }
.hero-intro { grid-area: intro; }
.hero-feat { grid-area: feat; }
.hero-price { grid-area: price; }
.hero-shot { grid-area: shot; }

.hero h1 {
  font-size: clamp(1.75rem, 9.6vw, 3.3rem);
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.subtitle { margin: .5rem 0 0; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text); }
.hero-intro p { color: #e6ddcf; }

.hero-shot {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #2a1d10;
  aspect-ratio: 3768 / 6456;
  max-height: 82vh;
  justify-self: center;
  width: 100%;
  max-width: 520px;
}
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.features b { color: var(--text); font-weight: 700; }
.features li { color: #e6ddcf; }

/* Preiskasten */
.price-box {
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, var(--accent-soft), transparent 70%);
}
.price-box p { margin: 0 0 14px; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.price { display: inline-flex; align-items: baseline; gap: 12px; font-style: italic; }
.price small { font-size: .95rem; color: var(--muted); }
.price strong { font-size: 2rem; font-weight: 500; letter-spacing: -.01em; }
.badge { display: inline-block; line-height: 0; border-radius: 8px; }
.badge img { height: 52px; width: auto; }

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    grid-template-areas:
      "head  shot"
      "intro shot"
      "feat  shot"
      "price shot";
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: 22px;
  }
  /* Bild klebt exakt an seiner Ausgangsposition: kein Versatz beim Losscrollen,
     es bleibt stehen, bis das Ende der Textspalte es nach oben schiebt. */
  .hero { padding-top: var(--hero-top); }
  .hero-shot {
    max-width: none;
    max-height: calc(100vh - var(--head-h) - var(--hero-top) - 24px);
    align-self: start;
    position: sticky;
    top: calc(var(--head-h) + var(--hero-top) + 1px); /* +1px = Trennlinie der Kopfzeile */
  }
  .hero-price { align-self: end; }
  /* Titelgröße folgt der Spaltenbreite: Der Titel bricht nicht um und ist gut
     9,2 em breit. Fest 3.3rem wäre auf Tablets quer (900–1080 px) breiter als
     die Textspalte und liefe bis ins Foto. 4.8vw passt mit etwas Luft hinein. */
  .hero { --h1: min(4.8vw, 3.3rem); }
  .hero h1 { font-size: var(--h1); }
  /* Oberkante der Versalien von BLACKMACHINE = Oberkante Foto; die Zeile
     „Begleiter mit Charakter“ ragt darüber hinaus. Rechnung: Höhe der kleinen
     Überschrift (.72rem × 1.6 Zeilenhöhe + .6rem Abstand) + Leerraum über den
     Versalien (0,17 × Schriftgröße des Titels). */
  .hero-head { margin-top: calc(-1 * (.72rem * 1.6 + .6rem + var(--h1) * .17)); }
}

/* ---------- Allgemeine Sektionen ---------- */
.sec { padding: clamp(28px, 3.5vw, 40px) 0 clamp(36px, 5vw, 56px); border-top: 1px solid var(--line); }
.sec-head { max-width: 640px; margin-bottom: 28px; }
.sec-head p:not(.eyebrow) { margin-top: 14px; color: #e6ddcf; }

/* Was du brauchst */
.cards { display: grid; gap: 16px; }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.card p { margin: 0; color: #ddd3c4; font-size: .97rem; }
.card .ico { width: 30px; height: 30px; color: var(--accent); margin-bottom: 12px; }
.ui { font-size: .86em; letter-spacing: .06em; font-weight: 600; color: var(--text); white-space: nowrap; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* Systemanforderungen – volle Breite unter den drei Karten, Spalten wie bei Steam */
.req-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.req-head .ico { margin-bottom: 0; }
.req-head h3 { margin: 0; }
.req table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.req th, .req td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; }
.req thead th {
  color: var(--accent); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: 8px;
}
.req tbody tr { border-top: 1px solid var(--line); }
.req tbody th { color: var(--muted); font-weight: 500; }
.req tbody td { color: #ddd3c4; }
.req-note { margin-top: 14px !important; font-size: .86rem !important; color: var(--muted) !important; }
@media (min-width: 760px) {
  .req { grid-column: 1 / -1; }
  .req table { table-layout: fixed; }
  .req thead td { width: 24%; }
}
/* Schmal: Zeilenname über beiden Werten, Werte nebeneinander */
@media (max-width: 559px) {
  .req thead tr, .req tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .req thead td { display: none; }
  .req tbody th { grid-column: 1 / -1; padding: 10px 0 2px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
  .req th, .req td { padding-right: 0; }
  .req tbody td { padding-top: 2px; }
}

/* Bilder */
.shots {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 44%);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter);
  scroll-padding-left: var(--gutter);
}
.shots figure { margin: 0; scroll-snap-align: start; }
.shots button { all: unset; cursor: zoom-in; display: block; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.shots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.shots img { aspect-ratio: 590 / 1247; width: 100%; object-fit: cover; }
.shots figcaption { margin-top: 10px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 760px) { .shots { grid-auto-columns: minmax(170px, 28%); } }
@media (min-width: 1080px) {
  .shots { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; margin: 0; padding: 0; }
}

/* Lightbox – eine Reihe aller Screens; das Wischen übernimmt der Browser selbst
   (natives Scrollen mit Einrasten), dadurch folgt das Bild dem Finger ruckelfrei. */
.lightbox {
  border: 0; padding: 0; margin: 0; background: transparent; color: var(--text);
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; overflow: hidden;
}
.lightbox::backdrop { background: rgba(8, 6, 5, .94); }
.lightbox[open] { animation: lb-fade .3s ease; }
.lightbox[open] .lb-track { animation: lb-zoom .35s ease; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-zoom { from { transform: scale(.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lb-track {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lb-track::-webkit-scrollbar { display: none; }
.lb-track:focus { outline: none; }
.lb-slide {
  flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 56px 16px 64px;
}
.lb-slide img {
  max-height: 100%; max-width: min(92vw, 520px); width: auto; height: auto; min-height: 0;
  border-radius: 18px; user-select: none; -webkit-user-drag: none;
}
.lb-slide figcaption { color: var(--muted); font-size: .8rem; letter-spacing: .18em; }
.lightbox button {
  position: fixed; z-index: 2;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 50%;
  width: 44px; height: 44px; font-size: 1.3rem; cursor: pointer;
}
.lightbox .close { top: 14px; right: 14px; }
.lightbox .prev, .lightbox .next { top: 50%; transform: translateY(-50%); }
.lightbox .prev { left: max(16px, calc(50vw - 340px)); }
.lightbox .next { right: max(16px, calc(50vw - 340px)); }
.dots { position: fixed; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s; }
.dots i.on { background: var(--accent); }
@media (max-width: 759px) {
  .lightbox .prev, .lightbox .next { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox[open], .lightbox[open] .lb-track { animation: none; }
}

/* Studio */
.studio-grid { display: grid; gap: 24px; align-items: start; }
.studio-grid svg, .studio-grid img.logo { width: clamp(120px, 30vw, 180px); height: auto; }
@media (min-width: 760px) { .studio-grid { grid-template-columns: 240px 1fr; } }

/* Schlussaufruf */
.cta-end { text-align: center; }
.cta-end .buy { justify-content: center; margin-top: 18px; }

/* ---------- Fußzeile ---------- */
.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: .88rem; color: var(--muted); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot svg { width: 84px; height: auto; }

/* ---------- Unterseiten (Impressum, Datenschutz …) ---------- */
.page { padding: clamp(32px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.prose { max-width: 720px; }
.prose h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; margin-bottom: 24px; }
.prose h2 { font-size: 1.3rem; margin: 32px 0 10px; }
.prose p, .prose li { color: #e6ddcf; }
.prose a { color: var(--accent); }
.placeholder { border: 1px dashed var(--accent); border-radius: var(--radius); padding: 14px 16px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}