/* ==========================================================================
   LockitNetwork – plain-HTML styles
   Handgeschriebenes Design-System (ersetzt die frühere Tailwind-Utility-Basis).
   Werte 1:1 aus der SvelteKit-Vorlage (app.css / tailwind.config.ts) übernommen.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------- */
/* Grundschrift ist die Systemschrift (siehe --sans), nicht selbst gehostet:
   Für Helvetica Neue gibt es keine Weblizenz. Die früher eingebundenen
   Linotype-TTFs sind deshalb entfernt (und wogen zusammen über 1 MB). */


/* ---- Schrift: IBM Plex Mono (SIL OFL 1.1), selbst gehostet --------------
   Kein Google-Fonts-CDN: Die Seite lädt passiv nichts von Dritten, sonst
   wäre die No-Cookie-Aussage hinfällig. Beide Schnitte sind auf Latin
   subsettet und wiegen zusammen 20 KB. */
@font-face {
  font-family: 'IBMPlexMono';
  src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBMPlexMono';
  src: url('/assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Design-Tokens -------------------------------------------------------- */
:root {
  --primary: #b8f96f;
  --primary-500: #85d22e;
  --primary-700: #71be1a;
  --bg: #1c1c1c;      /* Standard-Sektions-Hintergrund (bg-bg) */
  --bw-75: #2a2a2a;   /* abwechselnder Sektions-Hintergrund (bg-bw-75) */
  --bw-600: #aaaaaa;  /* gedämpfter Text (z.B. Zurück-Link) */
  --black: #000000;
  --white: #ffffff;

  --container: 1200px;

  /* horizontales Sektions-Padding (responsive) */
  --pad-x: 24px;
  /* vertikales Sektions-Padding (responsive) */
  --pad-y: 44px;

  --radius: 4px;

  /* Mono für die Szenenüberschriften; Drehbuch, Kamerabericht und Shot Log
     sind dicktengleich gesetzt, das ist die Hausschrift der Branche. */
  --mono: 'IBMPlexMono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Grundschrift aus dem System: Apple-Geräte haben Helvetica Neue an Bord –
     dort sieht die Seite aus wie bisher, und genau dort arbeitet die
     Zielgruppe (LockitScript läuft auf dem iPad). Windows und Linux fallen
     auf Arial bzw. dessen Ersatz mit gleichen Laufweiten zurück, Android auf
     die Systemgrotesk. */
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --led: #ff2e1f;        /* Rot der Timecode-LED, wie in der Klappe */
  --papier: #f4f4f2;     /* Acryl-Weiß der Klappe, für alles Papier */
  --papier-linie: #d5d5d0;
  --papier-text: #161616;

  /* Zwei Radien für die ganze Seite: Papier ist fast scharfkantig,
     Bedienelemente sind ganz rund. Alles dazwischen war Zufall. */
  --r-papier: 3px;
  --r-control: 999px;
}

@media (min-width: 768px) {
  :root { --pad-x: 40px; --pad-y: 80px; }
}
@media (min-width: 1024px) {
  :root { --pad-x: 129px; }
}

/* ---- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }
/* Scrollleiste immer reservieren → kein horizontaler Sprung beim Wechsel
   zwischen langen (mit Scrollbar) und kurzen (ohne) Seiten. */
html { overflow-y: scroll; scrollbar-gutter: stable; }
/* Sprungmarken sanft anfahren und nicht unter dem Sticky-Header parken */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
section[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--white);
  background-color: var(--black);
  line-height: 1.5;
}

/* height:auto → mit den neuen width/height-Attributen bleibt das Seitenverhältnis
   erhalten (Attribute reservieren nur den Platz gegen Layout-Springen). */
img { display: block; max-width: 100%; height: auto; }

h1, h2, p { margin: 0; }

a { color: inherit; }

/* Seiten-Grundgerüst: Header + Inhalt, mind. volle Höhe */
.page {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

/* ---- Layout-Helfer -------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; }

/* Sektion = horizontal + vertikal gepolstert */
.section {
  padding: var(--pad-y) var(--pad-x);
}
/* Der erste Abschnitt sitzt dichter unter dem Header. Mit dem vollen --pad-y
   stand unter der 79px hohen Kopfzeile noch einmal so viel Leerraum, bevor
   überhaupt Inhalt kam. Deckt beide Seitentypen ab: Hero-Seiten mit <main>
   und die Inhaltsseiten, deren .section direkt auf den Header folgt. */
.site-header + main > .section:first-child,
.site-header + .section { padding-top: 24px; }
@media (min-width: 768px) {
  .site-header + main > .section:first-child,
  .site-header + .section { padding-top: 36px; }
}

.bg-bg    { background-color: var(--bg); }
.bg-bw75  { background-color: var(--bw-75); }

/* zentrierte Inhaltssektion (Und Action / Support) */
.section--center {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 768px) {
  .section--center { align-items: center; text-align: center; }
}
.section--center .measure { max-width: 720px; }

/* ---- Typografie ----------------------------------------------------------- */
/* Eine Leiter für die ganze Seite:
   Hero-H1 (56) › Sektions-H2 (36) › Karten-H3 (20).
   Die Startseite darf als Landing lauter sein (.hero-video__title, 76). */
.h1 {
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.link { transition: color 0.15s ease; }
@media (hover: hover) {
  .link:hover { color: var(--primary-500); }
}
/* Sprungmarke auf der eigenen Seite: Pfeil nach unten als Hinweis, dass es
   nicht weg-, sondern weiterscrollt. Er wippt beim Hover kurz an. */
.link--jump { white-space: nowrap; }
.link__down {
  margin-left: 4px;
  vertical-align: -2px;
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .link--jump:hover .link__down { transform: translateY(2px); }
}
/* Sprungmarke als eigene Zeile unter einer Button-Reihe */
.hero-jump { margin: 14px 0 0; font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .link__down { transition: none; }
}
.text-primary { color: var(--primary); }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 11px 22px;
  border: 1.5px solid transparent;
  border-radius: 999px; /* Pille, wie im Header */
  background-color: var(--primary);
  color: var(--black);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
  .btn:hover {
    background-color: var(--primary-500);
    color: var(--black);
    box-shadow: 0 6px 22px rgba(184, 249, 111, 0.28);
    transform: translateY(-1px);
  }
}
.btn:active {
  background-color: var(--primary-700);
  transform: translateY(0);
  box-shadow: none;
}

/* Sekundär: dezente „Ghost"-Pille (Grün bleibt der Primäraktion vorbehalten) */
.btn--secondary {
  border-color: rgba(255, 255, 255, 0.22);
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--white);
}
@media (hover: hover) {
  .btn--secondary:hover {
    border-color: var(--primary);
    background-color: rgba(184, 249, 111, 0.08);
    color: var(--primary);
    box-shadow: none;
    transform: translateY(-1px);
  }
}
.btn--secondary:active { transform: translateY(0); }

.btn--sm { padding: 7px 16px; }

.btn__icon { height: 16px; width: auto; }

/* align-items ist hier der entscheidende Teil: In der Spalten-Richtung würden
   die Buttons sonst auf volle Zeilenbreite gestreckt – mal Pille, mal Balken.
   So behalten sie überall ihre natürliche Breite. */
.btn-row { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (min-width: 768px) {
  .btn-row { flex-direction: row; align-items: center; }
  .section--center .btn-row { justify-content: center; }
}
/* Auf Mobil zentriert .section--center nicht – Überschrift und Einleitung
   standen dadurch linksbündig unter mittig gesetzten Pillen. Nur die direkten
   Kinder mittig ziehen; längere Fließtexte in Karten bleiben linksbündig. */
@media (max-width: 767px) {
  .section--center > .sec-title,
  .section--center > .measure { text-align: center; }
  .section--center > .btn-row { align-items: center; }
}

/* ---- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--black);
  padding: 24px var(--pad-x);
  transition: background-color 0.3s ease, padding 0.3s ease, backdrop-filter 0.3s ease,
    border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
/* Dunkler Schleier, sobald gescrollt wird (bewusst ohne Sättigungs-Boost –
   der ließ durchscheinende Inhalte bunt aufleuchten, zu viel Effekt) */
.site-header.is-scrolled {
  padding-top: 14px;
  padding-bottom: 14px;
  background-color: rgba(10, 10, 10, 0.82);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
/* Wer Transparenz reduziert hat, bekommt den soliden Schleier zurück */
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled {
    background-color: rgba(10, 10, 10, 0.97);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-header__logo { flex-shrink: 0; }
.site-header__logo img {
  max-height: 16px;
  width: auto;
  object-fit: contain;
  object-position: left;
}

/* Menü-Container: Desktop inline, mobil aufklappbares Panel */
.site-menu {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 24px;
}

/* ---- Hauptnavigation: schlichte Textlinks mit grünem Strich ----
   Verlauf: bis 2026-11-05 Liquid-Glass-Pille mit federnder Linse (zu
   effektvoll), 07.–08.11. kurz eine Kapsel mit gleitender Fläche wie
   .chooser__tabs; der grüne Strich gefiel besser. Seit 2026-11-08 steht der
   Strich fest unter der aktuellen Seite und läuft beim Hover nicht mehr mit
   (das Wegspringen störte). Hover: Text weiß plus feiner grauer Strich. */
.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav a {
  position: relative;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--bw-600);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}
/* Sechs Punkte passen knapp über der 1200px-Grenze nicht ganz (Login-Button
   ragte über den Inhaltsrand): dort rücken die Punkte etwas zusammen. */
@media (min-width: 1200px) and (max-width: 1359px) {
  .site-nav { gap: 0; }
  .site-nav a { padding-inline: 10px; }
}
@media (hover: hover) {
  .site-nav a:hover { color: var(--white); }
}
.site-nav a[aria-current="page"] { color: var(--white); }
.site-nav a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* Strich unter dem Wort (Desktop, ab 1200px; darunter ist das Menü eine Liste) */
@media (min-width: 1200px) {
  .site-nav a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 1px;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.28);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .site-nav a[aria-current="page"]::after { background: var(--primary); opacity: 1; }
}
@media (min-width: 1200px) and (hover: hover) {
  .site-nav a:hover::after { opacity: 1; }
}
@media (min-width: 1200px) and (max-width: 1359px) {
  .site-nav a::after { left: 10px; right: 10px; }
}

/* ---- Utility-Cluster (Sprache + Login), per Hairline abgetrennt ---- */
.site-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---- Sprachumschalter als Segmented-Toggle (flach, ohne Glas) ---- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.lang-switch button,
.lang-switch a {
  padding: 4px 11px;
  border-radius: 999px;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--bw-600);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
@media (hover: hover) {
  .lang-switch button:hover,
  .lang-switch a:hover { color: var(--white); }
}
.lang-switch .is-active { background: var(--primary); color: var(--black); }

/* ---- Hamburger (nur mobil) ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-header.is-nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
/* Zusätzlich einklappen, nicht nur ausblenden: Der Balken ist 30px breit, die
   gedrehten Arme decken davon nur ~21px ab. Blieb das Ausblenden hängen oder
   wurde es mitten in der Überblendung gezeichnet, schauten seine Enden als
   zwei Striche neben dem X heraus. Mit scaleX(0) bleibt nichts übrig. */
.site-header.is-nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.site-header.is-nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobil (<900px): oben nur Logo + Burger, Rest im Panel ---- */
@media (max-width: 1199px) {
  .nav-toggle { display: inline-flex; }
  .site-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--pad-x) 20px;
    background: rgba(10, 10, 10, 0.97);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  .site-header.is-nav-open .site-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  /* Nav: gestapelte Links statt Pille */
  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .site-nav a {
    padding: 13px 14px;
    border-radius: 10px;
    font-size: 18px;
  }
  .site-nav a[aria-current="page"] { background: rgba(184, 249, 111, 0.12); }
  /* Utility-Cluster unten, per Linie abgetrennt */
  .site-tools {
    margin-left: 0;
    margin-top: 14px;
    padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: space-between;
  }
  .site-tools .btn { padding: 8px 16px; }
}

/* Sanftes gestaffeltes Einblenden der Menüpunkte (nur ohne reduced-motion) */
@media (max-width: 1199px) and (prefers-reduced-motion: no-preference) {
  .site-header.is-nav-open .site-nav a,
  .site-header.is-nav-open .site-tools { animation: menuItemIn 0.3s ease both; }
  .site-header.is-nav-open .site-nav a:nth-of-type(1) { animation-delay: 0.05s; }
  .site-header.is-nav-open .site-nav a:nth-of-type(2) { animation-delay: 0.10s; }
  .site-header.is-nav-open .site-nav a:nth-of-type(3) { animation-delay: 0.15s; }
  .site-header.is-nav-open .site-nav a:nth-of-type(4) { animation-delay: 0.20s; }
  .site-header.is-nav-open .site-nav a:nth-of-type(5) { animation-delay: 0.25s; }
  .site-header.is-nav-open .site-nav a:nth-of-type(6) { animation-delay: 0.30s; }
  .site-header.is-nav-open .site-tools { animation-delay: 0.34s; }
}
@keyframes menuItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Hero-Grid (Bild + Text nebeneinander) -------------------------------- */
.hero-grid {
  display: grid;
  grid-auto-flow: dense; /* Text füllt bei „Bild rechts" die freie Spalte 1 derselben Zeile */
  grid-template-columns: 1fr;
  align-items: center;
  column-gap: 120px;
  row-gap: 24px;
}
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  /* Bild rechts: Medien-Spalte in Spalte 2, Text fließt nach Spalte 1 */
  .hero-grid--img-right .hero-grid__media { grid-column: 2; }
}
/* Grid-Items dürfen unter ihre min-content-Breite schrumpfen, sonst schiebt
   ein langes Wort die Spalte auf Mobile über den Viewport hinaus */
.hero-grid > * { min-width: 0; }
.hero-grid__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero-grid__body .mt-5 { margin-top: 20px; }

/* ---- Hero mit Video-Loop (Startseite) ------------------------------------ */
.hero-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.hero-video__frame {
  position: relative;
  width: 100%;
  max-width: 1000px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #000;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
}
.hero-video__el {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Ton-Schalter im Video (startet stumm, Ton auf Wunsch) */
.hero-video__sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--white);
  font: 700 13px/1 inherit;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .hero-video__sound:hover {
    background: rgba(10, 10, 10, 0.75);
    border-color: rgba(184, 249, 111, 0.5);
    transform: translateY(-1px);
  }
}
.hero-video__sound:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184, 249, 111, 0.4);
}
.hero-video__sound svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* aria-pressed="true" = stumm (Klick schaltet den Ton ein) */
.hero-video__sound[aria-pressed='true'] .icon-sound,
.hero-video__sound[aria-pressed='false'] .icon-muted { display: none; }
.hero-video__sound[aria-pressed='false'] { color: var(--primary); border-color: rgba(184, 249, 111, 0.45); }
@media (max-width: 520px) {
  .hero-video__soundlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hero-video__sound { padding: 10px; }
}

.hero-video__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: min(62ch, 100%);
  text-align: center;
}
/* Kicker über der Headline – auf allen Hauptseiten gleich.
   Bewusst Regular (400): Zwischenschnitte wie Light oder Thin gibt es nur
   in Helvetica Neue auf Apple-Geräten, nicht im Arial-Ersatz – die Seite
   setzt deshalb überall nur 400 und 700. */
.kicker,
.hero-video__kicker {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}
/* Hero-Headline: deutlich größer als die Sektions-Überschriften, enger Satz,
   17ch erzwingen den Bruch nach „on-set“ statt eines einzelnen Worts in Zeile 2 */
.hero-video__title {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(38px, 6.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero-video__title em { font-style: normal; color: var(--primary); }
.hero-video__lead { color: var(--bw-600); }
/* Sektion, die ein zentriertes Hero-Grid hält */
.section--grid {
  display: flex;
  justify-content: center;
}

/* ---- Karussell (Poster-Marquee) ------------------------------------------- */
.carousel {
  overflow: hidden;
  /* Seit 2026-11-05 direkt unter „Und Bitte!“ (bw75), daher bg. Abfolge
     Startseite: Hero bg · Und Bitte bw75 · Referenzen bg · App bw75 · Post bg ·
     Kosten bw75 · Kontakt bg · Footer. Wer Blöcke verschiebt, Wechsel prüfen. */
  background-color: var(--bg);
  padding-block: var(--pad-y);
}
.carousel__track {
  display: flex;
  gap: 16px;
  will-change: transform;
}
.carousel__track img {
  height: 360px;
  width: auto;
  flex-shrink: 0;
  border-radius: var(--radius);
  object-fit: cover;
  user-select: none;
}

/* ---- Referenz-Galerie (Poster-Grid) --------------------------------------- */
.references-head { margin-bottom: 40px; text-align: center; }
.references-head .kicker { margin-bottom: 10px; }

.poster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
/* Hover-Zoom: die Zelle beschneidet, das Bild wächst hinein. Der Radius muss
   deshalb auf der Zelle liegen, sonst ragen die gezoomten Ecken heraus. */
.poster-grid__cell {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}
.poster-grid__cell img {
  height: 100%;
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}
@media (hover: hover) {
  /* leichte Aufhellung zusätzlich zum Zoom – viele Poster sind selbst dunkel,
     der Scale allein ist auf dunklem Grund kaum zu sehen */
  .poster-grid__cell:hover img { transform: scale(1.05); filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .poster-grid__cell img { transition: none; }
}
@media (min-width: 640px)  { .poster-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .poster-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .poster-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1280px) { .poster-grid { grid-template-columns: repeat(6, 1fr); } }

/* ---- „Mehr Referenzen"-CTA ------------------------------------------------ */
.references-cta {
  background-color: var(--bw-75);
  padding: 0 var(--pad-x) var(--pad-y);
  display: flex;
  justify-content: center;
}

/* ---- Rechtstext-Seiten (Impressum / Site Notice) --------------------------
   Werte 1:1 aus dem <style>-Block der SvelteKit-Vorlage übernommen. */
/* Lesbare Zeilenlänge statt voller Container-Breite.
   Höhere Spezifität, weil .content__inner (max-width 1200) später in der Datei steht. */
.content__inner.legal { max-width: 72ch; }
.legal h1 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; font-weight: 700; margin: 0 0 1rem; }
/* zweiter Hauptabschnitt: semantisch h2, optisch wie h1 */
.legal h2.legal-major { font-size: clamp(24px, 2vw, 28px); line-height: 1.2; font-weight: 700; }
.legal h2 { font-size: 20px; line-height: 1.3; font-weight: 700; margin: 1rem 0; }
.legal h3 { font-size: 17px; font-weight: 700; margin: 0 0 1rem; }
.legal p  { margin: 0; }
.legal p:not(:last-child) { margin-bottom: 1rem; }
.legal ul { list-style: disc; margin: 0 0 1rem 2rem; }
.legal strong { font-weight: 700; }
.legal a  { color: var(--primary); text-decoration: none; word-break: break-all; }
@media (hover: hover) {
  .legal a:hover { color: var(--primary-500); }
}
.legal button {
  background: none; border: none; padding: 0;
  font: inherit; color: var(--primary); cursor: pointer;
  transition: color 0.15s ease;
}
@media (hover: hover) {
  .legal button:hover { color: var(--primary-500); }
}
.mt-8 { margin-top: 2rem; }

/* ---- Titelzeile mit Download-Button (AGB / ToS) --------------------------- */
.doc-title { margin-bottom: 16px; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; font-weight: 700; }

/* Inhalts-Wrapper der Unterseiten */
.content {
  display: flex;
  justify-content: center;
  flex: 1 1 auto;
}
.content__inner { width: 100%; max-width: var(--container); }


/* ==========================================================================
   LockitScript-App-Subseite (/lockitscript/)
   ========================================================================== */

/* Sektions-Titel (32px) – links oder im zentrierten Kopf */
.sec-title,
.section-head h2 {
  margin: 0;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.1;
  font-weight: 700;
}
.section-head { text-align: center; max-width: 780px; margin: 0 auto 40px; }
.section-head p { margin: 16px 0 0; color: var(--bw-600); }

/* App-Store-Button: Apple-Logo + Text (nutzt .btn) */
.btn__apple { width: 16px; height: 16px; }

/* Schmaler Account-Hinweis-Streifen */
.account-band {
  background-color: var(--bw-75);
  padding: 24px var(--pad-x);
}
.account-band__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.account-band__inner p { margin: 0; font-weight: 700; }
/* Eigener Bereich (API-Seite, seit 2026-11-05): Das Band lag zwischen zwei
   bw75-Flächen und klebte an der Sektion davor. Schwarz grenzt es von beiden
   Nachbarn ab; Text und Button stehen untereinander statt in einer langen Zeile. */
.account-band--block {
  background-color: var(--black);
  padding: 48px var(--pad-x);
}
.account-band--block .account-band__inner { flex-direction: column; gap: 20px; }
.account-band--block .account-band__inner p { font-weight: 400; color: var(--bw-600); }
.account-band--block .account-band__inner p b { color: var(--white); }

/* Karten-Grids */
.cards {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
/* Zwei Kacheln (API, Rechtemanagement): schmaler, damit die Zeilen nicht zu
   lang werden */
.cards--2 { max-width: 960px; }
@media (min-width: 768px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 28px;
}
.card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.card h3.is-accent { color: var(--primary); }
.card p { margin: 0; color: var(--bw-600); }

/* Feature-Liste mit grünen Häkchen (2-spaltig ab md) */
.feature-list {
  max-width: var(--container);
  margin-inline: auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
/* Zweispaltig nur, wo die Liste über die volle Sektionsbreite läuft
   (in schmalen Containern wie Hero-Spalten oder Karten sonst zu gequetscht).
   Bewusst Mehrspalten-Satz statt Grid: im Grid teilen sich beide Spalten die
   Zeilenhöhe, ein zweizeiliger Punkt rechts riss deshalb links eine Lücke. */
@media (min-width: 768px) {
  .feature-list--2col {
    display: block;
    max-width: 900px;
    column-count: 2;
    column-gap: 56px;
  }
  .feature-list--2col li { break-inside: avoid; margin-bottom: 14px; }
  .feature-list--2col li:last-child { margin-bottom: 0; }
}
.feature-list li { position: relative; padding-left: 30px; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  /* Häkchen als Maske */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Screenshot-Strip (swipebar, Scroll-Snap) */
/* Screenshot-Streifen sitzt in der Features-Sektion, läuft aber randlos:
   die Sektion gibt ihr Seiten-Padding an die Textblöcke weiter, nicht an
   den Streifen. */
.section--shots { padding-inline: 0; }
.section--shots > .section-head,
.section--shots > .feature-list { padding-inline: var(--pad-x); }
.section--shots > .feature-tiles {
  padding-inline: var(--pad-x);
  max-width: calc(var(--container) + 2 * var(--pad-x));
  /* Trenner zu den Screenshots darunter (Feedback 2026-11-06: zu eng):
     Abstand plus Haarlinie auf Inhaltsbreite, nicht bis in die Ränder. */
  padding-bottom: 56px;
  background: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12))
    center bottom / calc(100% - 2 * var(--pad-x)) 1px no-repeat;
}
.section--shots > .feature-tiles + .shots-wrap { margin-top: 56px; }
.section--shots > .shots,
.section--shots > .shots-wrap { margin-top: 40px; }

/* Wisch-Hinweis über der Screenshot-Leiste. Liegt in einem eigenen Wrapper,
   damit er nicht mitscrollt, und lässt Zeiger durch (pointer-events: none),
   sonst blockierte er genau die Geste, zu der er auffordert.
   Verschwindet nach der ersten Bedienung – gemerkt im localStorage. */
/* Das Fenster: hier wird beschnitten, hier wird gegriffen. touch-action: pan-y
   lässt die Seite senkrecht weiterscrollen, die waagerechte Geste gehört uns. */
.shots-wrap {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
.shots-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(184, 249, 111, 0.4);
  background-color: rgba(12, 12, 12, 0.82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.shots-hint svg { color: var(--primary); }
.shots-hint__hand { animation: shots-swipe 2.4s ease-in-out infinite; }
@keyframes shots-swipe {
  0%, 100% { transform: translateX(-5px); }
  50%      { transform: translateX(5px); }
}
.shots-hint.is-out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
}
@media (prefers-reduced-motion: reduce) {
  .shots-hint__hand { animation: none; }
}

/* Bewusst KEIN Scroll-Container mehr: Mit overflow-x: auto beansprucht der
   Browser auf Touch die waagerechte Geste für sich und bricht unsere
   Zeiger-Verfolgung sofort mit pointercancel ab – die Leiste folgte dem
   Finger deshalb gar nicht. Jetzt ist der Wrapper nur ein Fenster, und
   initShots verschiebt den Streifen darin per transform (gleiches Prinzip
   wie das Poster-Karussell). */
.shots {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 4px var(--pad-x) 8px;
  will-change: transform;
}
.shots-wrap.is-dragging { cursor: grabbing; }
/* Bilder selbst nicht greifbar machen, sonst startet der Browser sein eigenes
   Bild-Drag statt unseres Streifens */
.shots img {
  -webkit-user-drag: none;
  pointer-events: none;
}
.shots img {
  height: 460px;
  width: auto;
  flex: 0 0 auto;
  border-radius: 12px;
}

/* Production-Service-Feature-Karten (Bild + Titel + Liste) */
.prod-card {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prod-card__media {
  background: linear-gradient(160deg, #2a2a2a, #141414);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.prod-card__media img { max-height: 100%; width: auto; }
.prod-card__body { padding: 24px; }
.prod-card__body h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
.prod-card__body ul { margin: 0; padding-left: 20px; color: var(--bw-600); }
.prod-card__body li { margin-bottom: 6px; }

/* ==========================================================================
   Dezente Politur / Motion (Prototyp)
   Alle Bewegungen hinter prefers-reduced-motion gated.
   ========================================================================== */

/* ---- Scroll-Reveal (Klassen werden per JS gesetzt → No-JS zeigt alles) ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
  }
  .reveal.is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* ---- Card-Hover: leichtes Anheben + grüner Rand ---- */
@media (prefers-reduced-motion: no-preference) {
  .card,
  .plan,
  .prod-card,
  .quote {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
}
@media (hover: hover) {
  .card:hover,
  .plan:hover,
  .prod-card:hover,
  .quote:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 249, 111, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
  /* Die Empfehlung hat schon einen grünen Rand – beim Hover etwas kräftiger */
  .plan--premium:hover { border-color: rgba(184, 249, 111, 0.5); }
}

/* (Nav-Underline entfernt – die Navigation nutzt jetzt den Segmented-Pill-Stil.) */

/* ---- Karussell: weiche Ränder (Poster laufen in den Hintergrund aus) ---- */
.carousel__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* ==========================================================================
   Cinematic-Premium-Bundle (Prototyp)
   Aurora-Glow · Cursor-Spotlight · Gradient-Headlines · Film-Grain
   ========================================================================== */

/* ---- Aurora-Glow hinter Hero-/Kern-Sektionen ---- */
.section--glow { position: relative; overflow: hidden; }
.section--glow > * { position: relative; z-index: 1; }
.section--glow::before,
.section--glow::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
}
.section--glow::before {
  width: min(60vw, 720px);
  height: min(60vw, 720px);
  top: -25%;
  right: -8%;
  background: radial-gradient(circle, rgba(184, 249, 111, 0.18), transparent 62%);
}
.section--glow::after {
  width: min(45vw, 520px);
  height: min(45vw, 520px);
  bottom: -30%;
  left: -10%;
  background: radial-gradient(circle, rgba(184, 249, 111, 0.10), transparent 65%);
}
@media (prefers-reduced-motion: no-preference) {
  .section--glow::before { animation: auroraA 16s ease-in-out infinite alternate; }
  .section--glow::after  { animation: auroraB 22s ease-in-out infinite alternate; }
}
@keyframes auroraA {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6%, 8%) scale(1.15); }
}
@keyframes auroraB {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(8%, -6%) scale(1.2); }
}

/* ---- Cursor-Spotlight auf Cards (JS setzt --mx/--my) ---- */
/* Eine Kachel bekommt den Lichtschein, indem sie im HTML .glow trägt --
   zusätzlich zu ihrer eigentlichen Klasse (.card, .plan, .quote …). Vorher
   stand die Aufzählung aller Kacheltypen hier viermal und ein fünftes Mal in
   main.js; wer eine neue Kachel baute, vergaß verlässlich eine der Stellen.
   main.js (initFx) sucht ebenfalls nach .glow und setzt --mx/--my. */
.glow { position: relative; overflow: hidden; }
/* Ohne diesen z-index läge der Inhalt hinter dem Overlay. */
.glow > * { position: relative; z-index: 1; }
.glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  /* Seit 2026-11-05 deutlich schwächer (vorher 0.14): Der Schein lag beim
     Lesen über dem Text und störte. */
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(184, 249, 111, 0.045), transparent 65%);
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .glow:hover::after { opacity: 1; }
}

/* Gradient-Sheen auf Headlines wurde entfernt (Feedback: wirkte über weißer
   Schrift stellenweise wie ein Fehler). Headlines bleiben sauber weiß; der grüne
   Schimmer lebt nur noch als Aurora-Glow hinter Bildern/Devices. */

/* ---- Film-Grain-Overlay (per JS injiziert) ---- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---- Frame-Rate-Slider (steuert das Poster-Karussell-Tempo) --------------- */
.fps-control {
  background: var(--bg);   /* gehört optisch zum Karussell darüber */
  padding: 8px var(--pad-x) var(--pad-y);
}
.fps-control__inner {
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.fps-control__label { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
.fps-slider { display: flex; align-items: center; gap: 14px; width: 100%; }
.fps-slider__hint {
  font-size: 12px;
  color: var(--bw-600);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fps-control__more {
  margin-top: 6px;
  font-size: 13px;
  color: var(--bw-600);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}
@media (hover: hover) {
  .fps-control__more:hover { color: var(--primary); text-decoration-color: currentColor; }
}

.fps-range {
  --pct: 12.5%;
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--primary) var(--pct), rgba(255, 255, 255, 0.16) var(--pct));
  cursor: pointer;
}
.fps-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 1px var(--primary), 0 2px 8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.15s ease;
}
@media (hover: hover) {
  .fps-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
}
.fps-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 1px var(--primary);
  cursor: pointer;
}
.fps-range::-moz-range-track { height: 4px; border-radius: 999px; background: transparent; }
.fps-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(184, 249, 111, 0.4), 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Fingerbedienung: Das Element war nur so hoch wie die Spur (4px) – damit gab
   es kaum etwas zu greifen. Auf Touch bekommt es eine hohe, unsichtbare
   Grifffläche; die Spur wird als schmaler Streifen mittig hineingezeichnet. */
@media (pointer: coarse) {
  .fps-range {
    height: 34px;
    background: linear-gradient(to right,
      var(--primary) var(--pct), rgba(255, 255, 255, 0.16) var(--pct))
      center / 100% 5px no-repeat;
  }
  .fps-range::-webkit-slider-thumb { width: 26px; height: 26px; border-width: 4px; }
  .fps-range::-moz-range-thumb { width: 26px; height: 26px; border-width: 4px; }
  .fps-slider { gap: 12px; }
}

/* ---- Site-Footer (auf allen Seiten) -------------------------------------- */
.site-footer {
  background-color: var(--black);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-inline: var(--pad-x);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-block: 48px 32px;
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
}
.site-footer__logo { max-height: 16px; width: auto; }
.site-footer__brand p {
  margin-top: 14px;
  max-width: 42ch;
  font-size: 14px;
  color: var(--bw-600);
}
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
/* Login-Pille in der Markenspalte des Footers */
.site-footer__login { align-self: flex-start; margin-top: 18px; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }

/* Feiner Trenner über der Anschrift */
.site-footer__rule {
  width: 100%;
  max-width: 180px;
  margin: 12px 0 4px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Anschrift im Footer */
.site-footer__address {
  margin-top: 2px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bw-600);
}
.site-footer__maps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--bw-600);
  transition: color 0.18s ease;
}
.site-footer__maps svg { flex: none; color: var(--primary); opacity: 0.85; }
@media (hover: hover) {
  .site-footer__maps:hover { color: var(--primary); }
}
@media (hover: hover) {
  .site-footer__maps:hover svg { opacity: 1; }
}
.site-footer__head {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.site-footer__col a,
.site-footer__legal a {
  font-size: 14px;
  color: var(--bw-600);
  text-decoration: none;
  transition: color 0.15s ease;
}
@media (hover: hover) {
  .site-footer__col a:hover,
  .site-footer__legal a:hover { color: var(--primary); }
}

.site-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 20px 28px;
  font-size: 13px;
  color: var(--bw-600);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
/* Auf schmalen Screens passten nur zwei der drei Rechts-Links in eine Zeile,
   der dritte hing allein darunter. Untereinander gestapelt bleibt die linke
   Kante bündig zum übrigen Footer. */
@media (max-width: 767px) {
  /* align-items nötig, weil der No-Cookie-Policy-Button sonst auf volle
     Breite streckt und seinen Text mittig setzt statt links. */
  .site-footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer__bar-inner { gap: 14px; padding-block: 18px 32px; }
}

/* „Made with ♥ in Bavaria" in der Footer-Leiste */
.site-footer__made { color: var(--bw-600); }
/* Bewusst als SVG statt als Zeichen ♥: Mobile Systeme rendern U+2665 als
   Emoji und ignorieren dabei die Textfarbe – das Herz kam rot-weiß statt grün. */
.site-footer__heart { color: var(--primary); vertical-align: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .site-footer__heart { display: inline-block; animation: heartBeat 2.4s ease-in-out infinite; }
}
@keyframes heartBeat {
  0%, 82%, 100% { transform: scale(1); }
  88%           { transform: scale(1.25); }
  94%           { transform: scale(1.1); }
}

/* ---- Preistabelle (Production Service) ----------------------------------- */
.pricing { max-width: 860px; margin-inline: auto; }
.pricing__scroll { overflow-x: auto; }
.pricing table { width: 100%; min-width: 520px; border-collapse: collapse; }
.pricing th,
.pricing td {
  padding: 13px 16px;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-variant-numeric: tabular-nums;
}
.pricing th:first-child,
.pricing td:first-child { text-align: left; }
.pricing thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bw-600);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
.pricing tbody tr { transition: background-color 0.15s ease; }
@media (hover: hover) {
  .pricing tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
}
.pricing .is-list { color: var(--bw-600); text-decoration: line-through; }
.pricing .is-price { color: var(--primary); font-weight: 700; }
.pricing__badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(184, 249, 111, 0.12);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}
.pricing__note { margin-top: 18px; text-align: center; font-size: 13px; color: var(--bw-600); }

/* ---- Sponsoring-Block (Erstlingswerke, Filmhochschulen) ------------------ */
.sponsor { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sponsor .kicker { margin-bottom: -6px; }

/* ---- Kostenlos vs. Premium ----------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 940px;
  margin-inline: auto;
  align-items: start;
}
@media (min-width: 820px) { .plans { grid-template-columns: 1fr 1.15fr; } }
/* Kompakte Variante auf der Startseite: nur Tag, Preis, ein Satz – als
   Vorgeschmack auf die grossen Plan-Karten der Production-Service-Seite. */
.plans--mini { width: 100%; max-width: 720px; gap: 16px; align-items: stretch; }
@media (min-width: 640px) { .plans--mini { grid-template-columns: 1fr 1fr; } }
.plans--mini .plan { padding: 22px 22px 24px; text-align: center; }
/* Gleiche Kachel-Sprache wie .card (seit 2026-11-05): 8px-Radius, heller
   Hauch statt dunkler Fläche, Anheben beim Hover (siehe Card-Hover). */
.plan {
  padding: 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
/* Die bezahlte Variante trägt den Akzent – sie ist die Empfehlung */
.plan--premium {
  border-color: rgba(184, 249, 111, 0.35);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(184, 249, 111, 0.09), transparent 62%),
    rgba(255, 255, 255, 0.03);
}
.plan__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bw-600);
}
.plan--premium .plan__tag { color: var(--primary); }
.plan__price { margin-top: 6px; font-size: 26px; font-weight: 700; line-height: 1.1; }
.plan--premium .plan__price { color: var(--primary); }
/* Einheit unter dem Preis: klein und grau, damit die Zahl das Auge fängt */
.plan__per {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--bw-600);
}
.plan__text { margin-top: 8px; font-size: 14px; color: var(--bw-600); }
.plan__list { margin-top: 18px; }
/* Sprung zur Preistabelle weiter unten auf derselben Seite */
.plan__jump {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(184, 249, 111, 0.35);
  transition: text-decoration-color 0.18s ease;
}
.plan__jump::after { content: " ↓"; }
@media (hover: hover) {
  .plan__jump:hover { text-decoration-color: currentColor; }
}

/* ---- Preisrechner (Drehtage) --------------------------------------------- */
.calc {
  max-width: 940px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.02);
}
@media (min-width: 860px) {
  .calc { grid-template-columns: 1.1fr 0.9fr; }
}
.calc__controls {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 26px;
}
.calc__label { font-size: 15px; font-weight: 700; }
/* Kleiner Hinweis unter der Frage (seit 2026-11-06) */
.calc__note { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--bw-600); }

.calc__field {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.calc__field:focus-within {
  border-color: rgba(184, 249, 111, 0.55);
  box-shadow: 0 0 0 3px rgba(184, 249, 111, 0.14);
}
.calc__field input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--white);
  font: 700 30px/1.1 inherit;
  font-variant-numeric: tabular-nums;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.calc__field input::-webkit-outer-spin-button,
.calc__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc__unit {
  flex: none;
  font-size: 13px;
  color: var(--bw-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Preset-Chips über dem Regler: gleiche Pillen-Sprache wie der Zielgruppen-
   Switch auf der Startseite (.chooser__tab), nur eine Nummer kleiner. Die
   aktive Markierung setzt main.js (initPriceCalc), sobald die Drehtage exakt
   einem data-days-Wert entsprechen. */
.calc__presets { display: flex; flex-wrap: wrap; gap: 8px; }
.calc__preset {
  appearance: none;
  cursor: pointer;
  border: 1.5px solid #3a3a3a;
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 8px 14px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
  .calc__preset:hover { border-color: var(--primary); }
}
.calc__preset:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.calc__preset.is-active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--black);
  font-weight: 700;
}

.calc__slider { display: flex; align-items: center; gap: 14px; }
.calc__hint {
  flex: none;
  font-size: 12px;
  color: var(--bw-600);
  font-variant-numeric: tabular-nums;
}
.calc__rangewrap { position: relative; flex: 1; display: flex; align-items: center; }
.calc__range {
  --pct: 48.5%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--primary) var(--pct), rgba(255, 255, 255, 0.16) var(--pct));
  cursor: pointer;
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 1px var(--primary), 0 2px 8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.15s ease;
}
@media (hover: hover) {
  .calc__range::-webkit-slider-thumb:hover { transform: scale(1.12); }
}
.calc__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 1px var(--primary);
  cursor: pointer;
}
.calc__range::-moz-range-track { height: 4px; border-radius: 999px; background: transparent; }
.calc__range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(184, 249, 111, 0.4), 0 2px 8px rgba(0, 0, 0, 0.5);
}
/* Rabattstufen als Marken unter dem Regler */
/* Um die halbe Thumb-Breite eingerückt: der Griff-Mittelpunkt läuft nur von
   9px bis Breite-9px, sonst erreicht er die äußeren Marken nie ganz. */
.calc__marks {
  position: absolute;
  left: 9px;
  right: 9px;
  top: calc(50% + 11px);
  height: 7px;
}
.calc__mark {
  position: absolute;
  top: 0;
  width: 2px;
  height: 7px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-50%);
  transition: background-color 0.2s ease;
}
.calc__mark.is-reached { background: var(--primary); }

.calc__next {
  min-height: 1.4em;
  font-size: 13px;
  color: var(--bw-600);
}
.calc__next strong { color: var(--primary); font-weight: 700; }

.calc__result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 26px;
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(184, 249, 111, 0.10), transparent 62%),
    rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.calc__resultlabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bw-600);
}
.calc__total {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.calc__total output { display: inline-block; }
.calc__total.is-bump output { animation: calcBump 0.32s ease; }
@keyframes calcBump {
  0%   { transform: translateY(2px); opacity: 0.55; }
  100% { transform: translateY(0); opacity: 1; }
}
.calc__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.calc__list {
  color: var(--bw-600);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.calc__save { font-size: 14px; color: var(--white); }
.calc__rule {
  width: 100%;
  margin: 12px 0 4px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
/* Gesamtsumme unter dem Tagespreis: bewusst klein. Die grosse Zahl im Rechner
   ist der Preis pro Drehtag, weil der mit jeder Rabattstufe faellt. */
.calc__sum { font-size: 14px; color: var(--bw-600); font-variant-numeric: tabular-nums; }
.calc__sum strong { color: var(--white); font-weight: 700; }
.calc__result .btn { margin-top: 14px; }

/* Aufklappbare Rabatt-Tabelle unter dem Rechner */
.pricing-details { max-width: 940px; margin: 30px auto 0; }
.pricing-details > summary {
  width: fit-content;
  margin-inline: auto;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bw-600);
  cursor: pointer;
  list-style: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.pricing-details > summary::-webkit-details-marker { display: none; }
.pricing-details > summary::after { content: " ↓"; }
.pricing-details[open] > summary::after { content: " ↑"; }
@media (hover: hover) {
  .pricing-details > summary:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.3); }
}
.pricing-details[open] > summary { margin-bottom: 26px; }

/* ---- Newsletter-Formular ------------------------------------------------- */
.newsletter { max-width: 560px; margin: 34px auto 0; text-align: left; }
.newsletter__lead { margin-top: 16px; color: var(--bw-600); }
.newsletter__field { display: flex; flex-direction: column; gap: 6px; }
.newsletter__field span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-600);
}
.newsletter__field input {
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.newsletter__field input:focus {
  border-color: rgba(184, 249, 111, 0.55);
  box-shadow: 0 0 0 3px rgba(184, 249, 111, 0.14);
}
.newsletter__consent {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bw-600);
}
.newsletter__consent input { margin-top: 3px; accent-color: var(--primary); flex: none; }
.newsletter .btn { margin-top: 22px; }
.newsletter__note { margin-top: 14px; font-size: 13px; color: var(--bw-600); }
/* Pflichttexte, die MailChimp bei aktivierten GDPR-Feldern verlangt */
.newsletter__legal { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--bw-600); }

/* Newsletter-Link im Footer, direkt unter der Login-Pille */
.site-footer__news {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--bw-600);
  transition: color 0.18s ease;
}
.site-footer__news svg { flex: none; color: var(--primary); opacity: 0.85; }
@media (hover: hover) {
  .site-footer__news:hover { color: var(--primary); }
}

/* Social-Kacheln im Footer. Runde Flächen, damit sie sich von den eckigen
   Markenzeichen (Instagram, LinkedIn) absetzen und nicht Form in Form steht. */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--bw-600);
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
@media (hover: hover) {
  .site-footer__social a:hover {
    color: var(--black);
    background-color: var(--primary);
    border-color: var(--primary);
  }
}
.site-footer__social a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- „Keine Cookies"-Hinweis (assets/js/nocookies.js) -------------------- */
.nocookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9500;
  display: flex;
  gap: 14px;
  max-width: 460px;
  margin-inline: auto;
  padding: 20px 22px;
  border: 1px solid rgba(184, 249, 111, 0.28);
  border-radius: 18px;
  background: rgba(20, 20, 20, 0.92);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.nocookies.is-in { opacity: 1; transform: none; }
@media (min-width: 640px) {
  .nocookies { left: auto; right: 28px; bottom: 28px; margin-inline: 0; }
}
/* Durchgestrichener Keks – der Gag steckt im Bild, nicht im Text.
   align-self ist nötig, sonst streckt der Flex-Container das Element auf
   die volle Bannerhöhe und der Strich landet weit unter dem Keks. */
.nocookies__cookie {
  position: relative;
  flex: none;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 28px;
  line-height: 1;
}
.nocookies__cookie::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--primary);
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.55);
  transform: rotate(-20deg);
}
.nocookies__title { font-weight: 700; font-size: 16px; color: var(--primary); }
.nocookies__text { margin-top: 6px; font-size: 14px; color: var(--bw-600); }
.nocookies .btn { margin-top: 16px; }
/* Footer-Link, der den Hinweis erneut öffnet */
.nocookies__link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.18s ease;
}
@media (hover: hover) {
  .nocookies__link:hover { color: var(--primary); }
}
@media (prefers-reduced-motion: reduce) {
  .nocookies { transition: none; }
}

/* ---- Kontaktseite: Filmklappe -------------------------------------------- */
.clapper-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.clapper-hero__lead { max-width: 52ch; color: var(--bw-600); }
.clapper-hero__hint { margin-top: -4px; font-size: 13px; color: var(--bw-600); }

/* Zwei Sticks wie an einer echten Klappe: fester Basis-Stick auf der Board-
   Oberkante + oberer, beweglicher Stick. Streifen nach der Ambient LockitSlate
   (vom Produktfoto vermessen, 2026-11-06): ~30° schräg, oben „/“ und unten „\“
   gespiegelt, sodass sie sich an der Fuge zu Pfeilspitzen treffen; Weiß ~43 %
   der Periode, Periode ~17 % der Klappenbreite. Beide Sticks sind gleich große
   Boxen – nur dann liegen die gespiegelten Gradienten an der Fuge exakt
   aufeinander. Maße in cqw, damit das Muster mit der Klappe skaliert. */
.clapper {
  width: min(460px, 88vw);
  margin: 8px auto 22px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
/* Proportion angelehnt an die LockitSlate: jeder Stick ~7 % der Breite hoch,
   per aspect-ratio, damit es auf Mobile mitskaliert. */
.clapper__slate { position: relative; aspect-ratio: 460 / 64; container-type: inline-size; }
.clapper__base {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(60deg, #141414 0 39px, #f2f2f2 39px 68px);
  background: repeating-linear-gradient(60deg, #141414 0 8.5cqw, #f2f2f2 8.5cqw 14.85cqw);
  /* schwarzer Rahmen um das Streifenfeld wie am Original */
  box-shadow: inset 0 0 0 2px #141414;
}
/* Scharnierblock am Drehpunkt (transform-origin der Sticks: 9 % / 100 %).
   Er steht still, der obere Arm rotiert dahinter – wie am echten Gerät.
   Die vier hellen Punkte sind die Schrauben. */
.clapper__slate::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 3%;
  top: 7%;
  width: 12.5%;
  height: 76%;
  border-radius: 6px;
  background:
    url("/assets/img/ambient-logo.png") center / 72% auto no-repeat,
    radial-gradient(2.5px 2.5px at 12% 16%, #4a4a4a 60%, transparent 65%),
    radial-gradient(2.5px 2.5px at 88% 16%, #4a4a4a 60%, transparent 65%),
    radial-gradient(2.5px 2.5px at 12% 84%, #4a4a4a 60%, transparent 65%),
    radial-gradient(2.5px 2.5px at 88% 84%, #4a4a4a 60%, transparent 65%),
    #101010;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.clapper__sticks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  z-index: 2;
  border-radius: 6px 6px 0 0;
  transform-origin: 9% 100%;
  background: repeating-linear-gradient(120deg, #141414 0 39px, #f2f2f2 39px 68px);
  background: repeating-linear-gradient(120deg, #141414 0 8.5cqw, #f2f2f2 8.5cqw 14.85cqw);
  box-shadow: inset 0 0 0 2px #141414, 0 -2px 8px rgba(0, 0, 0, 0.45);
}
.clapper.is-clapping .clapper__sticks {
  animation: clapSnap 950ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
}
@keyframes clapSnap {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(-24deg); }
  42%  { transform: rotate(-24deg); }
  56%  { transform: rotate(0deg); }
  66%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

/* LED-Timecode wie an der Ambient LockitSlate: schwarzes Anzeigemodul auf
   weissem Acryl-Board, rote Sieben-Segment-Ziffern (JS baut sie), darunter
   HRS/MIN/SEC/FRS. „Aus“-Segmente glimmen schwach wie bei echten Displays. */
.clapper__tc {
  display: flex;
  justify-content: center;
  padding: 13px 14px 4px;
  background: #f4f4f2;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.clapper__tc-module {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 16px 6px;
  background: #0b0b0b;
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.clapper__tc-time {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  font-size: 27px;
  line-height: 1;
  color: #ff2e1f;
  filter: drop-shadow(0 0 4px rgba(255, 46, 31, 0.7));
}
/* Einheiten unter den Ziffernpaaren. Die Paar-Mitten liegen bei 8,9 / 36,3 /
   63,7 / 91,1 % der Anzeigenbreite – das entspricht exakt space-between mit
   vier Labels von 17,8 % Breite, darum kommt das ohne Pixelrechnung aus. */
.clapper__tc-units {
  display: flex;
  justify-content: space-between;
  align-self: stretch;
  margin-top: 2px;
}
.clapper__tc-units i {
  width: 17.8%;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.tc7d { position: relative; width: 0.62em; height: 1.15em; flex: none; }
.tc7d .s7 { position: absolute; background: currentColor; opacity: 0.1; }
.tc7d .s7.on { opacity: 1; }
.tc7d .sa,
.tc7d .sg,
.tc7d .sd {
  left: 0.11em;
  width: 0.4em;
  height: 0.13em;
  clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%);
}
.tc7d .sa { top: 0; }
.tc7d .sg { top: 50%; transform: translateY(-50%); }
.tc7d .sd { bottom: 0; }
.tc7d .sb,
.tc7d .sc,
.tc7d .se,
.tc7d .sf {
  width: 0.13em;
  height: 0.42em;
  clip-path: polygon(50% 0, 100% 15%, 100% 85%, 50% 100%, 0 85%, 0 15%);
}
.tc7d .sf { top: 0.09em; left: 0; }
.tc7d .sb { top: 0.09em; right: 0; }
.tc7d .se { bottom: 0.09em; left: 0; }
.tc7d .sc { bottom: 0.09em; right: 0; }
.tc7c { position: relative; width: 0.2em; height: 1.15em; flex: none; }
.tc7c i {
  position: absolute;
  left: 50%;
  width: 0.13em;
  height: 0.13em;
  margin-left: -0.065em;
  border-radius: 1px;
  background: currentColor;
}
.tc7c i:first-child { top: 0.34em; }
.tc7c i:last-child { bottom: 0.34em; }

/* Beschriftungsfelder. minmax(0,1fr) verhindert, dass das Szene-Eingabefeld
   die Spalte aufbläht und das Board über die Klappe hinausläuft. */
.clapper__board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: #f4f4f2;
  border-radius: 0 0 8px 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  color: #161616;
}
/* Trennlinien wie aufgedruckt: senkrecht zwischen den Spalten, waagerecht
   zwischen den Zeilen (Kinder 3+) */
.clapper__field {
  padding: 12px 16px 16px;
  text-align: left;
}
.clapper__field:nth-child(odd) { border-right: 2px solid #161616; }
.clapper__field:nth-child(n + 3) { border-top: 2px solid #161616; }
.clapper__field b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #161616;
}
.clapper__field span { font-size: 15px; color: #161616; }

.clapper__szene { display: flex; align-items: center; gap: 7px; }
.clapper__input {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 2px;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.35);
  background: transparent;
  color: #161616;
  font: inherit;
  font-size: 15px;
  outline: none;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
.clapper__input::placeholder { color: rgba(0, 0, 0, 0.35); }
.clapper__input:focus { border-bottom-color: #161616; border-bottom-style: solid; }
.clapper__enter {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background: transparent;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.clapper__enter svg { display: block; width: 15px; height: 15px; }
.clapper__enter:focus-visible {
  color: #f4f4f2;
  background: #161616;
  border-color: #161616;
}
@media (hover: hover) {
  .clapper__enter:hover {
    color: #f4f4f2;
    background: #161616;
    border-color: #161616;
  }
}
.clapper__szene:focus-within .clapper__enter { color: #161616; border-color: #161616; }

.clapper__take { display: inline-flex; align-items: center; gap: 8px; margin-top: 3px; }
.clapper__take-num { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.clapper__step {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background: transparent;
  color: #161616;
  font: 700 17px/1 inherit;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
@media (hover: hover) {
  .clapper__step:hover:not(:disabled) { background: #161616; color: #f4f4f2; border-color: #161616; }
}
.clapper__step:disabled { opacity: 0.35; cursor: default; }
.clapper__step:focus-visible,
.clapper__opt:focus-visible { outline: 2px solid #161616; outline-offset: 2px; }

.clapper__toggle { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.clapper__opt {
  padding: 3px 7px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 5px;
  background: transparent;
  color: rgba(0, 0, 0, 0.6);
  font: 700 12px/1.2 inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
@media (hover: hover) {
  .clapper__opt:hover { color: #000; border-color: rgba(0, 0, 0, 0.6); }
}
.clapper__opt.is-active { background: #161616; color: #f4f4f2; border-color: #161616; }

/* Style-Umschalter: Icon-Buttons. Aktiv = dunkler Ring statt voller Fläche,
   damit die farbigen Icons darin sichtbar bleiben. */
.clapper__opt--icon { padding: 5px 7px; line-height: 0; }
.clapper__opt--icon svg { display: block; }
.clapper__opt-logo { display: block; width: auto; height: 20px; border-radius: 3px; }
.clapper__opt--icon.is-active {
  background: rgba(0, 0, 0, 0.07);
  color: inherit;
  border-color: #161616;
  box-shadow: inset 0 0 0 1px #161616;
}

/* Die ganze Klappe einfärben. Als filter an .clapper: clippt nichts und stört
   die Klapp-Animation der Sticks nicht (anders als ein Overlay).
   sepia+saturate hebt auch Schwarz/Weiß in Farbe an, hue-rotate lässt sie
   durchlaufen. */
.clapper.is-rainbow { animation: clapperRainbow 3.2s linear infinite; }
@keyframes clapperRainbow {
  from { filter: sepia(1) saturate(6) hue-rotate(0deg); }
  to   { filter: sepia(1) saturate(6) hue-rotate(360deg); }
}
.clapper.is-mono { filter: grayscale(1); }

@media (prefers-reduced-motion: reduce) {
  .clapper { cursor: default; }
  .clapper.is-clapping .clapper__sticks { animation: none; }
  .clapper.is-rainbow { animation: none; filter: sepia(1) saturate(5) hue-rotate(60deg); }
}

/* ---- Kontaktseite: Kontaktkanäle ----------------------------------------- */
.channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: var(--container);
  margin-inline: auto;
}
@media (min-width: 700px) { .channels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .channels--6 { grid-template-columns: repeat(3, 1fr); } }
.channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .channel:hover {
    border-color: rgba(184, 249, 111, 0.45);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
  }
}
.channel__icon { color: var(--primary); line-height: 0; }
.channel__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bw-600);
}
.channel__value { font-size: 16px; font-weight: 700; white-space: nowrap; }
.channel__note { margin-top: 4px; max-width: 32ch; font-size: 13px; color: var(--bw-600); }
@media (max-width: 380px) { .channel__value { white-space: normal; word-break: break-word; } }

/* ---- Testimonials -------------------------------------------------------- */
.quotes {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
/* Einzelne Kundenstimme (App-Seite) – schmaler als das Dreier-Raster */
.quote-single { max-width: 760px; margin-inline: auto; }
/* ---- App-Features als Kacheln (App-Seite, seit 2026-11-06) ----
   Vorher eine zweispaltige Liste, die neben den Screenshots unterging. Jetzt
   acht Kacheln mit Lucide-Icon (Linie 1,6, grün) und Nummer in Mono oben
   rechts – dieselbe Zählung wie die Sluglines. Nicht klickbar, daher ohne
   Hover-Anheben. */
.feature-tiles {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  counter-reset: tile;
}
@media (min-width: 960px) { .feature-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.feature-tiles li {
  position: relative;
  counter-increment: tile;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 15px;
  line-height: 1.4;
  color: var(--white);
}
@media (min-width: 960px) { .feature-tiles li { padding: 24px 22px 26px; font-size: 16px; } }
.feature-tiles li::after {
  content: counter(tile, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.38);
}
.feature-tiles__icon { color: var(--primary); flex: none; }

/* Zwei Kundenstimmen nebeneinander (App-Seite, seit 2026-11-06) */
.quotes--2 { max-width: 1040px; }
@media (min-width: 900px) { .quotes.quotes--2 { grid-template-columns: repeat(2, 1fr); } }

/* Preis-Hinweis unter den Hero-Buttons */
/* Leichter gesetzter Nachsatz unter der Button-Zeile. Ein Thin-Schnitt ist
   nicht auf allen Systemen vorhanden (siehe .kicker) – die leichtere
   Anmutung entsteht deshalb über Farbe, Laufweite und Zeilenabstand. */
.app-free {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.015em;
  color: var(--bw-600);
}
.app-free strong { color: var(--primary); }

/* ---- Zielgruppen-Switch (Startseite, Sektion „Und Action") ----------------
   Tab-Leiste routet Besucher zum passenden Einstieg. Ein Panel sichtbar,
   Umschalten per Klick oder Pfeiltasten (Logik in main.js, initChooser). */
.chooser { width: 100%; max-width: 1040px; }

/* Tab-Leiste als flache Kapsel mit feinem Rand (seit 2026-11-05, vorher
   Glas mit federnder Linse wie das alte Menü). Hinter dem aktiven Tab liegt
   eine schlichte helle Fläche, die ruhig hinübergleitet (initChooser setzt
   --lx/--ly/--lw/--lh). Ohne JS markiert derselbe helle Grund den Tab. */
.chooser__tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
/* Sobald die Tabs umbrechen, wäre eine Vollrund-Kapsel ein Ei */
@media (max-width: 959px) { .chooser__tabs { border-radius: 26px; } }
.chooser__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  appearance: none;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 12px 18px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
/* Icons: feine Linien (Lucide, ISC) in 16 px, gedämpft wie der Text; beim
   aktiven Tab grün. */
.chooser__icon { flex: none; opacity: 0.75; transition: color 0.2s ease, opacity 0.2s ease; }
.chooser__tab:hover .chooser__icon,
.chooser__tab.is-active .chooser__icon { opacity: 1; }
/* Hover: dezenter Grund am Tab selbst. Die helle Fläche bleibt beim
   gewählten Tab und gleitet erst beim Klick (Feedback 2026-11-08: das
   Mitlaufen beim Hover störte). */
@media (hover: hover) {
  .chooser__tab:hover { color: var(--white); }
  .chooser__tab:not(.is-active):hover { background: rgba(255, 255, 255, 0.04); }
}
.chooser__tab.is-active { color: var(--white); }
.chooser__tab.is-active .chooser__icon { color: var(--primary); }
.chooser__tabs:not(.has-lens) .chooser__tab.is-active { background: rgba(255, 255, 255, 0.1); }
.chooser__tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.chooser__lens {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--lw, 0px);
  height: var(--lh, 0px);
  translate: var(--lx, 0px) var(--ly, 0px);
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.1);
  transition:
    translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    height 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.chooser__lens.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .chooser__lens { transition: none; }
}

/* Mobil (bis 639px) brachen die vier Pillen in vier Zeilen um – rund 360px
   Höhe, bevor der Login-Button kam. Dort deshalb ein kompaktes 2×2-Raster:
   Icon über dem Text, die Fläche als abgerundetes Rechteck. */
@media (max-width: 639px) {
  .chooser__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding: 4px;
    border-radius: 18px;
  }
  .chooser__tab {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    padding: 10px 8px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
  }
  .chooser__lens { border-radius: 14px; }
}

.chooser__panels { margin-top: 24px; }
.chooser__panel[hidden] { display: none; }
/* Das aktive Panel ist die Glow-Kachel im Card-Look – Cursor-Spotlight über
   das ::after weiter unten (JS in initFx setzt --mx/--my). Links der Text,
   rechts eine Vorschau auf das, wohin der Klick führt. */
.chooser__panel {
  display: grid;
  gap: 24px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.03);
  padding: 28px 24px;
  text-align: left;
  animation: chooser-fade 0.3s ease;
}
@media (min-width: 900px) {
  .chooser__panel {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 36px 44px;
  }
}
@keyframes chooser-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
/* Hierarchie aus den zwei vorhandenen Schnitten (400/700): fette Merkzeile,
   darunter der Fließtext. */
.chooser__lead {
  margin: 0 0 10px;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
}
.chooser__copy .btn-row { justify-content: flex-start; }  /* nicht von .section--center mittig ziehen lassen */
.chooser__text {
  max-width: 46ch;
  margin: 0 0 24px;
  line-height: 1.6;
  color: var(--bw-600);
}
/* Vorschau: feste 4:3-Fläche, damit das Panel beim Umschalten nicht springt */
.chooser__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: chooser-media 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.chooser__img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
/* Script Supervisor: dieselbe Bühne wie in der App-Sektion; das Icon gleitet
   bei jedem Öffnen des Tabs hinter dem iPad hervor. */
.chooser__media .app-stage { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .chooser__panel.is-active .app-stage--chooser .app-stage__icon {
    animation: stageIconIn 2.4s cubic-bezier(0.45, 0, 0.2, 1) 0.35s both;
  }
}
/* WebTools-Screencast auf dem Laptop (Account-Tab, Hero /production-service).
   Unten das statische Rendering (ohne JS sichtbar), darüber das Video –
   perspektivisch in die Bildschirmfläche verzerrt (initScreencast, Ecken in
   data-quad, % des Bildes) –, ganz oben das Rendering mit durchsichtigem
   Bildschirm, damit Rahmen, Notch und davorstehende Geräte über dem Video liegen. */
.screencast { position: relative; width: 100%; }
.screencast > img { display: block; width: 100%; height: auto; }
.screencast__video {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 1036px;
  max-width: none;
  transform-origin: 0 0;
  opacity: 0;
  background: #181818;
}
.screencast__video.is-placed { opacity: 1; }
.screencast > .screencast__frame { position: absolute; inset: 0; }
/* Produktion: fünf Berichte als Fächer. Beim Öffnen des Tabs liegen sie
   gestapelt und fächern sich um einen Drehpunkt unterhalb auf – der Tab
   wird per hidden ein- und ausgeblendet, damit startet die Animation bei
   jedem Öffnen neu. Vorne der Tagesbericht, außen Facing Page/Editor's Log. */
.chooser__fan { position: relative; width: 100%; height: 100%; }
.chooser__sheet {
  position: absolute;
  left: 30%;
  top: 9%;
  width: 40%;
  padding: 6px;
  transform-origin: 50% 165%;
  transform: rotate(var(--r));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .chooser__panel.is-active .chooser__sheet {
    animation: fanOpen 1.1s cubic-bezier(0.2, 0.75, 0.25, 1) both;
    animation-delay: calc(0.15s + (4 - var(--i)) * 0.05s);
  }
}
@keyframes fanOpen {
  from { transform: rotate(0deg) translateY(6px); }
  to   { transform: rotate(var(--r)); }
}
.chooser__media .flow-slot { width: 100%; }
@keyframes chooser-media {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
/* Sponsoring-Hinweis als Pille – steht im Hero der Startseite und des
   Production Service, mittig und über dem restlichen Inhalt. */
.sponsor-note {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  background-color: rgba(184, 249, 111, 0.1); /* dezenter Lime-Tint */
  color: #e4f2ce; /* etwas heller als der gedämpfte Standardtext */
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}
.sponsor-note svg {
  flex: none;
  color: var(--primary);
}
/* Auf schmalen Screens knapp: weniger Polsterung und eine Spur kleinere
   Schrift, damit die Zeile hält. Reicht bis ~345px hinunter; darunter
   (iPhone SE 1. Gen) bricht sie sauber auf zwei Zeilen um. */
@media (max-width: 420px) {
  .sponsor-note { padding: 9px 13px; gap: 7px; font-size: 13px; }
}
/* .section--grid ist ein Zeilen-Flex – eine Pille direkt darin würde neben dem
   Hero-Grid landen statt darüber. Der Stack dreht das auf eine Spalte. */
.hero-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 32px;
}
@media (prefers-reduced-motion: reduce) {
  .chooser__panel,
  .chooser__media { animation: none; }
}

/* Button-Zeile mittig unter einem Karten-Raster */
.btn-row--center { margin-top: 32px; justify-content: center; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Browser-Defaults von <figure>/<blockquote> zurücksetzen (je 40px seitlich) */
  margin: 0;
  padding: 34px 28px 26px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.quote > * { position: relative; z-index: 1; }
.quote__mark {
  position: absolute;
  top: 4px;
  left: 18px;
  z-index: 0;
  font-size: 64px;
  line-height: 1;
  color: var(--primary);
  opacity: 0.3;
}
.quote blockquote { margin: 0; }
.quote p { color: var(--bw-600); }
.quote__author { margin-top: auto; font-size: 14px; }
.quote__name { display: block; font-weight: 700; color: var(--white); }
.quote__role { color: var(--bw-600); }

/* ---- 404-Seite ------------------------------------------------------------
   Steht im Hero-Muster der Seite (.hero-grid, .kicker, .h1, .btn) – Schrift
   und Satz kommen also von dort, hier nur Höhe und Zeichnung. Das Motiv, eine
   handgezeichnete Figur in weißen Strichen auf transparent, stammt aus den
   LockitWebTools und wird gelegentlich getauscht (/assets/img/404/).
   Ausgeliefert wird die Seite vom Cloudflare-Worker (notFoundHandling
   "404-page"): /404.html für alles, /en/404.html für den englischen Baum. */
.not-found {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 220px);
}
.not-found__art img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin-inline: auto;
  /* Drehpunkt an der ausgestreckten Hand: Die Figur wiegt um die Geste
     herum, statt als Ganzes zu kippen. Bei einer getauschten Zeichnung ggf.
     nachjustieren. */
  transform-origin: 62% 80%;
  transition: filter 0.4s ease;
}
/* Beim Darüberfahren die Jedi-Geste: leichtes Vorlehnen und Wiegen, dazu
   ein schwacher Lichtschein in Limette. Nur auf Zeigergeräten – auf Touch
   gibt es kein Hover – und ohne Bewegung, wenn reduzierte Bewegung gewünscht
   ist; der Lichtschein bleibt dann als einziges Signal. */
@media (hover: hover) {
  .not-found__art:hover img { filter: drop-shadow(0 0 14px rgba(184, 249, 111, 0.35)); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .not-found__art:hover img { animation: jediGeste 1.8s ease-in-out infinite; }
}
@keyframes jediGeste {
  0%, 100% { transform: rotate(0deg) scale(1); }
  35%      { transform: rotate(-2.2deg) scale(1.025); }
  65%      { transform: rotate(1.2deg) scale(1.015); }
}

/* ---- API-Seite --------------------------------------------------------------
   Code-Karte im Hero: zeigt einen echten Aufruf aus der Doku (Clip-Abgleich).
   Code ist neben den Sluglines die einzige Stelle mit Mono-Schrift – Code muss
   dicktengleich stehen. Farben bleiben in der Palette der Seite: Strings in
   Limette, Kommentare und Auslassungen blass, der Rest weiß. */
.code-card {
  margin: 0;
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-papier);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
}
.code-card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: var(--bw-600);
  /* Der lange Pfad bricht an den <wbr> nach den Schrägstrichen um, nur im
     Notfall mitten im Wort. */
  overflow-wrap: anywhere;
}
.code-card__method {
  flex: none;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--primary);
  color: var(--black);
  font-weight: 600;
}
.code-card__body {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  color: rgba(255, 255, 255, 0.88);
}
/* Auf dem Handy etwas kleiner gesetzt. Umbrechen ist keine Option: Es
   zerreißt die ausgerichteten Kommentare (// Szene …). Was dann noch zu lang
   ist, läuft innerhalb der Karte seitlich weiter – üblich bei Code. */
@media (max-width: 480px) {
  .code-card { font-size: 11.5px; }
  .code-card__body { padding: 14px; }
}
/* Zeilen-Markierung wie im Editor: ein Balken springt über die grünen Zeilen nach
   unten (initCodeCard). Nur mit erlaubter Bewegung, ohne JS gar nicht da. */
.code-card__body.has-hl { position: relative; }
.code-card__body code { position: relative; z-index: 1; }
.code-card__hl {
  position: absolute;
  left: 0;
  top: 0;
  height: 1.6em;
  border-left: 2px solid rgba(184, 249, 111, 0.65);
  background: linear-gradient(90deg, rgba(184, 249, 111, 0.1), rgba(184, 249, 111, 0.04));
  pointer-events: none;
  transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}
.code-card .t-s  { color: var(--primary); }
.code-card .t-c  { color: rgba(255, 255, 255, 0.38); }
.code-card .t-ok { color: var(--primary); font-weight: 600; }

/* Technische Eckdaten als Pillen unter der Liste – gleiche Form wie die
   Preset-Chips im Preisrechner, aber nicht klickbar. */
.api-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 900px;
  margin: 36px auto 0;
  padding: 0;
  list-style: none;
}
.api-facts li {
  padding: 7px 14px;
  border: 1.5px solid #3a3a3a;
  border-radius: var(--r-control);
  font-size: 13px;
  color: var(--bw-600);
}

/* ==========================================================================
   Drehbuch-Handschrift: Sluglines und Berichte als Papier
   Die Seite soll aussehen wie die Dokumente, die das Produkt erzeugt.
   Übernommen aus der Design-Vorschau (Branch `design-vorschau`), die zuerst
   nur auf /app lief.
   ========================================================================== */


/* ---- Mono nur für die Szenenüberschriften --------------------------------
   Bewusst eng gefasst: Navigation, Buttons, Fließtext und Listen bleiben
   Helvetica. Die Mono markiert allein die Slugline – und die Beschriftungen
   innerhalb der Papierdokumente, weil die Grafik sind und kein Seitentext. */
.slug,
.doc__head {
  font-family: var(--mono);
}

/* ---- Slugline: die Szenenüberschrift des Drehbuchs -----------------------
   Aufbau wie im Drehbuch: Szenennummer in der Marginalie, dann INT./EXT.,
   Ort, Tageszeit. Die Nummer steht im LED-Rot der Klappe.

   Als `p.slug` notiert, nicht als `.slug`: `.section-head p` in styles.css ist
   spezifischer und hat sonst Farbe und Abstand zurückgesetzt – in den
   Sektionsköpfen blieb die Zeile grau und rückte nach unten statt nach oben. */
p.slug {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Bewusst unter dem AA-Kontrast (ca. 3.5:1 statt 4.5:1): Die Zeile ist reine
     Dekoration, ihre Aussage steht als Überschrift direkt darunter noch einmal
     in vollem Kontrast. Wer sie übersieht, verpasst nichts. */
  color: rgba(255, 255, 255, 0.38);
}
.slug__no {
  flex: none;
  color: rgba(255, 46, 31, 0.8);
  font-variant-numeric: tabular-nums;
}
/* Die Linie füllt den Rest der Zeile – wie der Rand im Drehbuchformular. */
.slug::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}
/* Alle Sluglines beginnen an derselben linken Inhaltskante wie die 01 im Hero.
   Dafür stehen sie im HTML als direktes Kind der Sektion, nicht mehr im
   zentrierten .section-head (max-width 780px, margin auto) – dort hätten sie
   je nach Fensterbreite eingerückt gewirkt, also mal mittig, mal linksbündig.
   Die Überschrift darunter bleibt zentriert wie gehabt. */

/* Sluglines, die direkt in einer Sektion stehen, folgen derselben Spur wie
   .container: Ab etwa 1460px Fensterbreite bleibt der Seiteninhalt bei 1200px
   stehen und rückt mittig ein. Ohne das klebte die Zeile am Sektionsrand und
   stand auf breiten Schirmen links neben der H1 heraus.

   `width: 100%` ist nötig, nicht nur `max-width`: In den Flex-Sektionen
   (.section--center) schlagen Auto-Ränder das Strecken, die Zeile schrumpfte
   sonst auf Textbreite und stellte sich mittig. */
.section > p.slug {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* Die Screenshot-Sektion ist randlos, damit der Bilderstreifen durchlaufen
   kann; ihre direkten Kinder bringen das Seitenpadding selbst mit – die
   Begrenzung muss es deshalb mit einrechnen. */
.section--shots > p.slug {
  padding-inline: var(--pad-x);
  max-width: calc(var(--container) + 2 * var(--pad-x));
}

/* .section--center zentriert seine Kinder und den Text darin. Die Slugline
   nimmt beides zurück, sonst stünde sie als einzige mittig. */
.section--center p.slug {
  align-self: stretch;
  text-align: left;
}

/* ---- Radien vereinheitlichen --------------------------------------------- */
.card,
.prod-card,
.quote,
.shots img,
.prod-card__media img { border-radius: var(--r-papier); }
.btn { border-radius: var(--r-control); }

/* ---- Feature-Liste: Häkchen raus, Szenennummern rein ---------------------
   Vorher ein generisches Häkchen. Jetzt eine durchlaufende Nummerierung in
   Mono – so wie im Drehbuch jede Einstellung eine Nummer trägt. */
.feature-list--2col { counter-reset: feat; }
.feature-list--2col li { counter-increment: feat; }
.feature-list--2col li::before {
  content: counter(feat, decimal-leading-zero);
  font-family: var(--mono);
  top: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  /* Ohne diese Zeile bliebe die Häkchen-Maske aus styles.css stehen und
     würde die Ziffer wegschneiden – sichtbar wäre gar nichts. */
  -webkit-mask: none;
          mask: none;
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   Berichte als Papier
   Vorher sechs identische dunkle Kästchen mit Fließtext für sechs Dokumente,
   die in Wirklichkeit völlig unterschiedlich aussehen. Jetzt liegt jedes als
   weißes Blatt auf dem dunklen Grund, leicht verdreht wie auf einem Tisch,
   mit dem Schema seines echten Layouts: Kopf, graue Balken, Tabellen und
   Feldnamen wie im PDF-Export, Fließtext nur angedeutet.
   ========================================================================== */
.docs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 24px;
  max-width: var(--container);
  margin-inline: auto;
}
@media (min-width: 640px) { .docs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .docs { grid-template-columns: repeat(3, 1fr); } }

.doc { display: flex; flex-direction: column; gap: 16px; }
.doc__paper {
  padding: 10px 10px 0;
  background: var(--papier);
  border-radius: var(--r-papier);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  color: var(--papier-text);
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  transform: rotate(var(--dreh, 0deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Beim Hover richtet sich das Blatt auf und hebt an – als nähme man es vom
   Stapel. Nur auf Zeigergeräten, sonst klebt der Zustand auf iOS fest. */
@media (hover: hover) {
  .doc:hover .doc__paper {
    transform: rotate(0deg) translateY(-5px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .doc__paper { transform: none; transition: none; }
}

.doc__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--papier-text);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.doc__no { color: var(--led); font-variant-numeric: tabular-nums; }
.doc__meta { margin-left: auto; opacity: 0.45; font-weight: 400; }

/* Das Blatt selbst: schematischer Nachbau des echten PDF-Exports als SVG
   (tools/docs/build_docs.py), oberer Teil einer A4-Seite. */
.doc__img { display: block; width: 100%; height: auto; }

/* Gleiche Anmutung wie die übrigen Karten-Überschriften der Seite. */
.doc__caption h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}
.doc__caption p { margin: 0; color: var(--bw-600); }

/* ==========================================================================
   Flow-Grafiken (Import / Export / Reports)
   Aus den Einzelebenen des Teaser-Videos gebaut (assets/img/flow/). Das SVG
   wird per JS inline eingesetzt (initFlows), damit CSS die Ebenen bewegen kann.
   Der Ruhezustand im SVG ist das fertige Bild – Animation nur mit Bewegung
   erlaubt, Intro einmal beim Reinscrollen, danach nur leises Schweben.
   ========================================================================== */
.flow-slot { width: 100%; }
.flow-slot > img,
.flow { display: block; width: 100%; height: auto; overflow: visible; }
.flow text { font-family: var(--sans); }

@media (prefers-reduced-motion: no-preference) {
  .flow .flow__ic,
  .flow .flow__ic > *,
  .flow .flow__clap-up,
  .flow .flow__btn,
  .flow .flow__share,
  .flow .flow__row { transform-box: fill-box; transform-origin: center; }

  /* Intro: pausiert vorbereitet, läuft mit .is-in los */
  .flow.is-armed .flow__ic {
    animation: flowIcIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both paused;
    animation-delay: calc(var(--t0, 0ms) + var(--i) * 110ms);
  }
  .flow.is-armed .flow__arrow path {
    stroke-dasharray: 1;
    animation: flowDraw 0.45s ease-out both paused;
    animation-delay: var(--ta, 0ms);
  }
  .flow.is-armed .flow__arrow path + path {
    animation-duration: 0.22s;
    animation-delay: calc(var(--ta, 0ms) + 0.4s);
  }
  .flow.is-armed .flow__clap-up {
    transform-origin: 0% 100%;
    animation: flowClap 0.75s cubic-bezier(0.3, 0.7, 0.3, 1) both paused;
    animation-delay: var(--tc, 0ms);
  }
  .flow.is-armed .flow__btn {
    animation: flowPress 0.5s ease-out both paused;
    animation-delay: calc(var(--tc, 0ms) + 0.3s);
  }
  .flow.is-in .flow__ic,
  .flow.is-in .flow__arrow path,
  .flow.is-in .flow__clap-up,
  .flow.is-in .flow__btn { animation-play-state: running; }

  /* Danach: jede Kachel schwebt in eigenem Takt */
  .flow.is-in .flow__ic > * {
    animation: flowFloat 3.8s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -1.3s);
  }
  .flow.is-in .flow__ic--far > * { animation-duration: 5.5s; }

  /* Import: erst die Tools, dann der Pfeil, dann klappt die Karte */
  .flow--import { --t0: 0ms; --ta: 700ms; --tc: 1150ms; }
  /* Export: Karte klappt, Pfeil, dann springen die Schnittsysteme heraus */
  .flow--export { --tc: 0ms; --ta: 450ms; --t0: 950ms; }
  .flow--export.is-armed .flow__ic { animation-name: flowIcOut; }

  /* Reports: Auswahl wandert durch die Liste */
  .flow--reports.is-armed .flow__row {
    animation: flowIcIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both paused;
    animation-delay: calc(var(--i) * 120ms);
  }
  .flow--reports.is-in .flow__row { animation-play-state: running; }
  .flow--reports.is-in .flow__row-hi,
  .flow--reports.is-in .flow__row-ta,
  .flow--reports.is-in .flow__share {
    animation: flowRowOn 9s ease-in-out infinite;
    animation-delay: calc(var(--i) * 3s - 9s);
  }
  .flow--reports.is-in .flow__row-t {
    animation: flowRowOff 9s ease-in-out infinite;
    animation-delay: calc(var(--i) * 3s - 9s);
  }

  /* Live Sync: Zeile auf dem iPad leuchtet, ein Punkt läuft zum Laptop,
     dort leuchtet dieselbe Szene – dann die Gegenrichtung. 6 s je Runde. */
  .flow--sync { --ta: 0ms; }
  .flow--sync.is-armed .flow__arrow path:nth-child(odd) { animation-duration: 0.6s; animation-delay: 0s; }
  .flow--sync.is-armed .flow__arrow path:nth-child(even) { animation-duration: 0.2s; animation-delay: 0.55s; }
  .flow--sync.is-in .flow__hl-ip3 { animation: syncIp3 6s ease-in-out 0.9s infinite; }
  .flow--sync.is-in .flow__hl-lp3 { animation: syncLp3 6s ease-in-out 0.9s infinite; }
  .flow--sync.is-in .flow__hl-lp7 { animation: syncLp7 6s ease-in-out 0.9s infinite; }
  .flow--sync.is-in .flow__hl-ip7 { animation: syncIp7 6s ease-in-out 0.9s infinite; }
  .flow--sync.is-in .flow__dot--a { animation: syncDotA 6s ease-in-out 0.9s infinite; }
  .flow--sync.is-in .flow__dot--b { animation: syncDotB 6s ease-in-out 0.9s infinite; }

  /* Außer Sicht: Endlosschleifen anhalten */
  .flow:not(.is-visible) * { animation-play-state: paused !important; }
}

/* ---- LockitScript-Bühne: Lichtschein, App-Icon und iPad als Ebenen -------
   Startseite und /app. Das iPad steht still; beim Reinscrollen kommt das
   App-Icon sanft hinter ihm hervor. Ruhezustand = Standbild. Positionen in %
   der 4:3-Bühne. Das Icon stammt aus dem früheren Standbild, der Schein ist
   als CSS-Verlauf nachgebaut, das iPad ist neu gerendert – mit dem Editor's Log aus dem
   Teaser, in derselben Lage wie vorher (siehe CLAUDE.md, Geräte-Renderings).
   Abstand Icon–iPad: halb so groß wie im alten Bild. */
.app-stage { position: relative; aspect-ratio: 4 / 3; }
.app-stage > * { position: absolute; }
.app-stage > img { height: auto; max-width: none; }
/* Bläulicher Lichtschein hinter dem iPad: aus dem alten Bild ausgemessen
   (Mitte 540/420 von 1200 × 900, Radius 525, Deckkraft 0,18·(1−r/R)^1,5). */
.app-stage::before {
  content: "";
  position: absolute;
  left: 1.25%; top: -11.67%; width: 87.5%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(134, 156, 196, 0.179) 0%, rgba(134, 156, 196, 0.128) 20%, rgba(134, 156, 196, 0.083) 40%, rgba(134, 156, 196, 0.045) 60%, rgba(134, 156, 196, 0.016) 80%, rgba(134, 156, 196, 0.000) 100%);
  pointer-events: none;
}
.app-stage__icon { left: 14.41%; top: 31.78%; width: 20.5%; }
.app-stage__ipad { left: 38.7%; top: 6.11%; width: 58.84%; }
.app-stage__ipad img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.5));
}
.app-stage--app::before { left: -8.62%; top: -18.9%; width: 97.7%; }
.app-stage--app .app-stage__icon { left: 11.94%; top: 32.22%; width: 20.46%; }
.app-stage--app .app-stage__ipad { left: 33.19%; top: 0.93%; width: 65.7%; }

@media (prefers-reduced-motion: no-preference) {
  .app-stage.is-armed .app-stage__icon {
    animation: stageIconIn 2.4s cubic-bezier(0.45, 0, 0.2, 1) 0.3s both paused;
  }
  .app-stage.is-in .app-stage__icon { animation-play-state: running; }
}
/* Das Icon startet hinter dem iPad, leicht unscharf, und schiebt sich
   langsam nach links heraus – sanfter Anlauf, weiches Auslaufen. */
@keyframes stageIconIn {
  0%   { opacity: 0; transform: translateX(70%) scale(0.94); filter: blur(3px); }
  40%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes flowIcIn {
  from { opacity: 0; transform: translate(-14px, 8px) scale(0.86); }
  to   { opacity: 1; transform: none; }
}
@keyframes flowIcOut {
  from { opacity: 0; transform: translateX(-26px) scale(0.6); }
  to   { opacity: 1; transform: none; }
}
/* Unsichtbar bis zum Start: Bei Strichlänge 0 malt die runde Linienkappe
   sonst schon während der Wartezeit einen grünen Punkt an den Pfeilanfang. */
@keyframes flowDraw {
  from { stroke-dashoffset: 1; stroke-opacity: 0; }
  1%   { stroke-opacity: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes flowClap {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-6deg); }
  55%  { transform: rotate(0deg); }
  70%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}
@keyframes flowPress {
  0%, 100% { transform: none; }
  40%      { transform: scale(0.94); }
}
@keyframes flowFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}
@keyframes syncIp3 { 0% { opacity: 0; } 6%, 42% { opacity: 0.32; } 50%, 100% { opacity: 0; } }
@keyframes syncLp3 { 0%, 20% { opacity: 0; } 26%, 42% { opacity: 0.32; } 50%, 100% { opacity: 0; } }
@keyframes syncLp7 { 0%, 50% { opacity: 0; } 56%, 92% { opacity: 0.32; } 100% { opacity: 0; } }
@keyframes syncIp7 { 0%, 70% { opacity: 0; } 76%, 92% { opacity: 0.32; } 100% { opacity: 0; } }
@keyframes syncDotA {
  0%, 6%   { offset-distance: 0%; opacity: 0; }
  8%       { opacity: 1; }
  19%      { opacity: 1; }
  21%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes syncDotB {
  0%, 56%  { offset-distance: 0%; opacity: 0; }
  58%      { opacity: 1; }
  69%      { opacity: 1; }
  71%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes flowRowOn {
  0%, 30%  { opacity: 1; }
  36%, 94% { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes flowRowOff {
  0%, 30%  { opacity: 0; }
  36%, 94% { opacity: 1; }
  100%     { opacity: 0; }
}