@font-face {
  font-family: "DM Sans Variable";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("./assets/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
}

/* @theme:start
   Fallback-Token für die Vorschau ohne Build. build.mjs ersetzt diesen Block
   durch die vollständige Auswahl aus apps/web/src/index.css. */
:root {
  --color-ink-950: #0a0a0a;
  --color-ink-900: #111111;
  --color-ink-875: #151515;
  --color-ink-850: #191919;
  --color-ink-800: rgb(255 255 255 / .04);
  --color-ink-750: rgb(255 255 255 / .06);
  --color-ink-700: rgb(255 255 255 / .08);
  --color-ink-600: rgb(255 255 255 / .12);
  --color-line: rgb(255 255 255 / .06);
  --color-line-soft: rgb(255 255 255 / .04);
  --color-text: #f5f5f5;
  --color-muted: #818181;
  --color-faint: #737373;
  --color-accent: oklch(58.8% .217 264);
  --color-accent-soft: color-mix(in oklab, var(--color-accent) 15%, transparent);
  --color-accent-line: color-mix(in oklab, var(--color-accent) 40%, transparent);
  --color-accent-contrast: #ffffff;
  --color-ok: oklch(76.5% .177 163.223);
  --color-ok-soft: color-mix(in oklab, oklch(69.6% .17 162.48) 15%, transparent);
  --color-warn: oklch(82.8% .189 84.429);
  --color-warn-soft: color-mix(in oklab, oklch(76.9% .188 70.08) 15%, transparent);
  --color-bad: oklch(70.4% .191 22.216);
  --color-bad-soft: color-mix(in oklab, oklch(63.7% .237 25.331) 15%, transparent);
  --color-info: oklch(70.7% .165 254.624);
  --color-capy-fur: oklch(58% .065 62);
  --color-capy-light: oklch(74% .055 72);
  --color-capy-line: oklch(34% .04 55);
  --color-capy-eye: oklch(18% .02 55);
  --color-capy-nose: oklch(28% .035 55);
  --font-sans: "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 21px;
  --text-3xl: clamp(26px, 1rem + 1.6vw, 32px);
  --text-hero: clamp(30px, 1.2rem + 2.4vw, 40px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 56px;
  --space-16: 80px;
  --radius: .25rem;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: .25rem;
  --radius-xl: .25rem;
  --radius-pill: 999px;
  --shadow-raised: 0 12px 30px rgb(0 0 0 / .4);
  --shadow-overlay: 0 18px 48px rgb(0 0 0 / .55);
  --shadow-popover: 0 16px 40px rgb(0 0 0 / .5);
  --ease-standard: cubic-bezier(.16, 1, .3, 1);
  --ease-emphasized: cubic-bezier(.2, .8, .2, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 320ms;
  --surface-base: #0a0a0a;
  --surface-raised: #111111;
  --surface-overlay: #191919;
  --surface-sunken: #060606;
  --surface-hover: rgb(255 255 255 / .04);
  --focus-ring-color: var(--color-accent);
  --focus-ring-offset: 2px;
  --glass-blur: 16px;
  --glass-saturation: 1.08;
  --glass-tint: color-mix(in srgb, #0a0a0a 80%, transparent);
  --icon-blue: #4f7fd3;
  --icon-blue-bright: #79a5df;
  --icon-cyan: #4aaebd;
  --icon-green: #4bb38b;
  --icon-yellow: #d4a940;
  --icon-orange: #d08b36;
  --icon-red: #cf7478;
  --icon-violet: #8f6bc9;
  --icon-magenta: #a77acb;
  --icon-text: #e8e8e8;
  --icon-soft: #bdbdbd;
  --icon-muted: #737373;
  --icon-line: #525252;
  --icon-surface: #171717;
  --icon-surface-raised: #262626;
  --syntax-keyword: #c99bff;
  --syntax-string: #8fd08a;
  --syntax-title: #7db9ff;
  --syntax-number: #d4a940;
  --syntax-comment: #5c5c5c;
  --syntax-type: #79a5df;
  --syntax-variable: #e8e8e8;
  --syntax-meta: #cf7478;
  --syntax-regexp: #4aaebd;
  --orbit-minimap-project: #6686a5;
  --orbit-minimap-usage: #719b77;
  --orbit-minimap-frame: #4c4c4c;
  --orbit-minimap-tool: #8a8a84;
  --orbit-canvas-dot: #343434;
  --ansi-black: #171717;
  --ansi-red: #d98b8b;
  --ansi-green: #9fbe8f;
  --ansi-yellow: #d9bd7e;
  --ansi-blue: #88a9cf;
  --ansi-magenta: #d69aa6;
  --ansi-cyan: #83b8b4;
  --ansi-white: #d2d0ca;
  --ansi-bright-black: #777b80;
  --ansi-bright-red: #e9a2a2;
  --ansi-bright-green: #b4d2a3;
  --ansi-bright-yellow: #ead095;
  --ansi-bright-blue: #a1bfe0;
  --ansi-bright-magenta: #e5adb7;
  --ansi-bright-cyan: #9ccbc7;
  --ansi-bright-white: #f1efe9;
  --ansi-selection: rgb(136 169 207 / .28);
}
/* @theme:end */

:root {
  --lp-max: 1160px;
  /* Bilder brauchen mehr Breite als der Text, damit die Aufnahmen lesbar bleiben. */
  --lp-wide: 1380px;
  --lp-gutter: clamp(20px, 5vw, 64px);
  --lp-gap: clamp(72px, 11vw, 132px);
}

*, *::before, *::after { box-sizing: border-box; overscroll-behavior-y: none; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--color-ink-950);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }

.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 20;
  padding: 12px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-ink-850);
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip:focus { top: 16px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 10px var(--lp-gutter);
  border-bottom: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-ink-950) 88%, transparent);
  backdrop-filter: blur(12px);
}
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.brand__name { letter-spacing: .01em; }
.nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 4px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius);
  color: var(--color-muted);
  font-size: 15px;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.nav a:hover { color: var(--color-text); background: var(--color-ink-800); }

.hero {
  display: grid;
  gap: clamp(40px, 7vw, 72px);
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--lp-gutter) 0;
}
.hero__title {
  max-width: 15ch;
  font-size: clamp(30px, 1.4rem + 3vw, 54px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.015em;
}
.hero__lead { margin-top: clamp(18px, 2.6vw, 26px); max-width: 56ch; font-size: 17px; opacity: .84; }
.hero__note { margin-top: 18px; max-width: 52ch; color: var(--color-muted); font-size: 15px; }
.hero__jump {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: clamp(24px, 3.4vw, 34px);
  padding: 0 20px;
  border: 1px solid var(--color-accent-line);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 15px;
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.hero__jump:hover { background: var(--color-accent-soft); border-color: var(--color-accent); }

.stage { display: flex; flex-direction: column; align-items: center; }
.stage__frame { position: relative; width: 100%; }
.stage__desktop {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-ink-900);
}
.stage__desktop img { width: 100%; }
.stage__mobile {
  /* Sitzt unten rechts und ragt ein paar Pixel über die Standfläche hinaus. */
  position: absolute;
  right: 2%;
  bottom: -4%;
  width: 24%;
  max-width: 170px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-ink-900);
  box-shadow: var(--shadow-raised);
}
.stage__caption { margin-top: 20px; max-width: 46ch; color: var(--color-muted); font-size: 15px; text-align: center; }

.section {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: var(--lp-gap) var(--lp-gutter) 0;
}
.section__head h2 { font-size: clamp(24px, 1.2rem + 1.3vw, 34px); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.section__body { margin-top: clamp(20px, 3vw, 28px); }
.section__body p { max-width: 64ch; font-size: 17px; line-height: 1.72; opacity: .88; }
.section__body p + p { margin-top: 18px; }

.note {
  margin-top: clamp(28px, 4vw, 40px);
  max-width: 54ch;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--color-ink-800);
}
.note__lead { font-size: 19px; font-weight: 600; }
.note__text { margin-top: 6px; color: var(--color-muted); font-size: 15px; }

.shot {
  margin-top: clamp(30px, 4.4vw, 52px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-ink-900);
}
.shot img { width: 100%; }
.shot--mobile { max-width: 300px; }

/* Zwei Handyaufnahmen nebeneinander, auf schmalen Geräten je zur Hälfte. */
.shots {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(30px, 4.4vw, 52px);
}
.shots .shot { margin-top: 0; }

.cta-row { margin-top: clamp(26px, 3.4vw, 34px); }
.cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard);
}
.cta:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-accent-contrast)); }

.footer {
  max-width: var(--lp-max);
  margin: clamp(72px, 10vw, 128px) auto 0;
  padding: 32px var(--lp-gutter) 56px;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: center;
  justify-content: space-between;
}
.footer__copy { color: var(--color-faint); font-size: 14px; }
.footer__copy a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.footer__copy a:hover { color: var(--color-text); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.footer__links a:hover { color: var(--color-text); }

/* Aufnahmen liegen zurück und richten sich unter dem Zeiger auf (Vorbild t3.codes).
   opacity/translate stehen mit in der Liste, sonst verdrängt die Reveal-Regel transform. */
.shot,
.stage__desktop,
.stage__mobile {
  transform: perspective(2000px) rotateX(4deg);
  transition:
    transform 1s var(--ease-emphasized),
    opacity 560ms var(--ease-standard),
    translate 560ms var(--ease-standard);
}
.shot:hover,
.stage__frame:hover .stage__desktop,
.stage__frame:hover .stage__mobile {
  transform: perspective(2000px) rotateX(0deg);
}

/* Einblenden läuft über translate, damit transform für den Bild-Tilt frei bleibt. */
.js .reveal { opacity: 0; translate: 0 16px; }
.js .reveal.is-visible { opacity: 1; translate: 0 0; }
.js .reveal:not(.shot) { transition: opacity 560ms var(--ease-standard), translate 560ms var(--ease-standard); }
.js .hero__text.reveal { opacity: 1; transform: none; }
.js .hero__text.reveal > * { opacity: 0; transform: translateY(18px); }
.js .hero__text.reveal.is-visible > * { opacity: 1; transform: none; transition: opacity 620ms var(--ease-standard), transform 620ms var(--ease-standard); }
.js .hero__text.reveal.is-visible > :nth-child(1) { transition-delay: 60ms; }
.js .hero__text.reveal.is-visible > :nth-child(2) { transition-delay: 160ms; }
.js .hero__text.reveal.is-visible > :nth-child(3) { transition-delay: 260ms; }
.js .hero__text.reveal.is-visible > :nth-child(4) { transition-delay: 360ms; }

@media (min-width: 1024px) {
  .section {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    /* Kopf und Text bleiben als Block zusammen; die Aufnahme spannt beide Zeilen. */
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  .section__head { grid-column: 1; }
  .section__body { grid-column: 1; margin-top: clamp(18px, 2.4vw, 26px); }
  .section .shot,
  .section .shots { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .shot--mobile { justify-self: center; }

  .section--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .section--flip .section__head,
  .section--flip .section__body { grid-column: 2; }
  .section--flip .shot,
  .section--flip .shots { grid-column: 1; }

  .section--text { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .section--text .section__body { grid-column: 2; grid-row: 1; margin-top: 0; }

  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; padding-top: clamp(64px, 8vw, 112px); }
  .hero__lead { max-width: 48ch; }
  .nav { justify-content: flex-end; }
  .nav a { font-size: 14px; }
}

@media (min-width: 1280px) {
  /* Abschnitte mit Aufnahme laufen breiter; der Text bleibt schmal, das Bild bekommt Platz. */
  .section:has(.shot) {
    max-width: var(--lp-wide);
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(32px, 4vw, 60px);
  }
  .section--flip:has(.shot) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .section:has(.shot) .section__body p { max-width: 46ch; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  /* Zwischen 1024 und 1279 px ist die Bildspalte schmal; die zwei Handys teilen sie. */
  .shots { flex-wrap: nowrap; }
  .shots .shot--mobile { flex: 1 1 0; min-width: 0; max-width: none; }
}

@media (max-width: 700px) {
  .shots .shot--mobile { max-width: calc(50% - 8px); }
  .stage__frame { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
  .stage__desktop { flex: 1 0 100%; }
  .stage__mobile { position: static; width: 40%; max-width: 150px; bottom: auto; left: auto; }
  .stage__caption { text-align: left; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  /* Ohne diese Zeile überschreibt scroll-behavior: smooth das behavior:"auto" des Skripts. */
  html { scroll-behavior: auto; }
  .js .reveal, .js .hero__text.reveal > * { opacity: 1 !important; transform: none !important; translate: none !important; }
  .shot,
  .stage__desktop,
  .stage__mobile { transform: none !important; transition: none !important; }
}