/* ==========================================================================
   EY-LO Website — eylo.css
   Brand: Black #0A0A0A · Studio White #FAFAF7 · Amber #C4933F
   Type:  Archivo (300/400/500/700/900) · JetBrains Mono
   ========================================================================== */

/* ---------- Schriften — lokal gehostet (DSGVO, keine Google-Server) ---------- */
@font-face { font-family:'Archivo'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../assets/fonts/archivo-300.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/archivo-400.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/archivo-500.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../assets/fonts/archivo-700.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../assets/fonts/archivo-900.woff2') format('woff2'); }
@font-face { font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/archivo-black.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/jetbrains-mono-500.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  /* Brand colors */
  --black: #0A0A0A;
  --white: #FAFAF7;
  --amber: #C4933F;
  --deep-amber: #8B6628;
  --charcoal: #2A2A2A;
  --grey: #888888;
  --line: #E5E5E0;

  /* Typography scale — nach Feedback um ~50 % verkleinert */
  --fs-display: clamp(40px, 7vw, 96px);
  --fs-h1: clamp(28px, 4.5vw, 56px);
  --fs-h2: clamp(22px, 3vw, 36px);
  --fs-h3: clamp(18px, 1.8vw, 22px);
  --fs-lead: clamp(15px, 1.3vw, 18px);
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-mono: 12px;
  --fs-caps: 11px;

  /* Spacing */
  --gutter: clamp(24px, 5vw, 48px);
  --section-pad: clamp(56px, 8vw, 110px);
  --block-pad: clamp(36px, 5vw, 68px);

  /* Layout */
  --content-max: 1280px;
  --reading-max: 720px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* Easing + duration */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }

/* ---------- Layout primitives ---------- */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.reading { max-width: var(--reading-max); }
.section {
  padding: var(--section-pad) 0;
  position: relative;
}
.section--tight { padding: var(--block-pad) 0; }
.section--dark {
  background: var(--black);
  color: var(--white);
}
.section--dark a { color: var(--white); }

.divider {
  border: none;
  border-top: 0.5px solid var(--line);
  margin: 0;
}
.section--dark .divider { border-top-color: rgba(255, 255, 255, 0.1); }

/* Grain texture (subtle, only on dark sections for premium feel) */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.6) 1px, transparent 0);
  background-size: 3px 3px;
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
}

.display {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-weight: 900;
  font-size: var(--fs-display);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--black);
}
.display .accent { color: var(--amber); }
.section--dark .display { color: var(--white); }

h1, .h1 {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-weight: 900;
  font-size: var(--fs-h1);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 18px;
}
h1 .accent, .h1 .accent { color: var(--amber); }

h2, .h2 {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-weight: 900;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 14px;
}
h2 .accent, .h2 .accent { color: var(--amber); }

h3, .h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.lead {
  font-family: 'Archivo', sans-serif;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--charcoal);
  max-width: 60ch;
}
.section--dark .lead { color: rgba(255, 255, 255, 0.75); }

.caps {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: var(--fs-caps);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}

.mono {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: var(--fs-mono);
  color: var(--charcoal);
}
.section--dark .mono { color: rgba(255, 255, 255, 0.6); }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
em { font-style: italic; color: var(--charcoal); }

/* ---------- Buttons (with magnetic-ish hover) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Subtle "shine" sweep on hover */
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transition: left 600ms var(--ease-out);
  pointer-events: none;
}
.btn:hover::after { left: 120%; }

.btn--primary {
  background: var(--black);
  color: var(--white);
}
.btn--primary:hover { background: var(--charcoal); box-shadow: 0 8px 24px -8px rgba(10, 10, 10, 0.4); }

.btn--amber {
  background: var(--amber);
  color: var(--black);
}
.btn--amber:hover {
  background: var(--deep-amber);
  color: var(--white);
  box-shadow: 0 8px 24px -8px rgba(196, 147, 63, 0.5);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--black);
}
.btn--ghost:hover { border-color: var(--black); }
.section--dark .btn--ghost {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--white);
}
.section--dark .btn--ghost:hover { border-color: var(--white); }

.btn-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Top Nav ---------- */
/* ---------- Ankuendigungsbalken ----------
   Am 03.09.2026 entfernt, er zeigte noch die dritte Augustwoche an.

   Die Hoehe steht auf 0, weil Navigation und Menueschublade oben mit
   `top: var(--announcement-height)` daran haengen. Bliebe hier ein Wert
   stehen, saesse ueber der Navigation ein leerer Streifen.

   Die Gestaltungsregeln darunter bleiben absichtlich stehen. Soll der Balken
   je wiederkommen, genuegt es, die Hoehe zurueckzusetzen und das Element
   wieder in die Seiten zu schreiben. */
:root {
  --announcement-height: 0px;
}
@media (max-width: 640px) {
  :root {
    --announcement-height: 0px;
  }
}
.announcement-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  height: var(--announcement-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: #FFFFFF;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 0 16px;
  text-align: center;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.announcement-bar:hover { opacity: 0.9; color: #FFFFFF; }
.announcement-bar strong { font-weight: 500; }
.announcement-bar .announcement-sep {
  margin: 0 10px;
  opacity: 0.55;
}
.announcement-bar .announcement-full { display: none; }
@media (min-width: 700px) {
  .announcement-bar { font-size: 14px; }
  .announcement-bar .announcement-full { display: inline; }
}
@media (max-width: 380px) {
  .announcement-bar { font-size: 12px; letter-spacing: 0; }
  .announcement-bar .announcement-sep { margin: 0 6px; }
}

.nav {
  position: fixed;
  top: var(--announcement-height); left: 0; right: 0;
  z-index: 100;
  padding: 14px var(--gutter);
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid transparent;
  transition: border-color var(--dur-med) var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--line); }

.nav-row {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -0.04em;
  color: var(--black);
}
.nav-brand-mark {
  width: 30px;
  height: 30px;
  color: var(--black);
  flex-shrink: 0;
}

.nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-link {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  position: relative;
  padding: 4px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav-link:hover { color: var(--black); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--black); }

.nav-cta { margin-left: 12px; }

/* Sprachumschalter (Globus + Zielsprache) */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-left: auto;
  margin-right: -20px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  transition: color .2s ease, background .2s ease;
}
.nav-lang:hover { color: var(--black); background: rgba(0,0,0,.05); }
.nav-lang svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }

/* Mobile hamburger */
.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  padding: 0;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 8px; right: 8px;
  height: 1.5px;
  background: var(--black);
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              top var(--dur-fast) var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 18px; }
.nav-toggle span:nth-child(3) { top: 23px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 18px; transform: rotate(-45deg); }

.nav-drawer {
  position: fixed;
  top: var(--announcement-height); right: 0; bottom: 0;
  width: min(86%, 360px);
  background: var(--white);
  border-left: 0.5px solid var(--line);
  z-index: 99;
  padding: 88px 32px 48px;
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-in-out);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-drawer[data-open="true"] { transform: translateX(0); }
.nav-drawer .nav-link {
  display: block;
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--black);
  padding: 12px 0;
  border-bottom: 0.5px solid var(--line);
}
.nav-drawer .nav-link::after { display: none; }
.nav-drawer .btn { margin-top: 24px; align-self: flex-start; }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
  z-index: 98;
}
.nav-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }

@media (max-width: 820px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
}

/* Body padding so content doesn't underlap fixed nav */
.has-nav { padding-top: 60px; }

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(48px, 9vw, 96px);
  padding-bottom: clamp(20px, 3.5vw, 40px);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 7fr 5fr; gap: 48px; }
}
.hero-text { max-width: 720px; }
.hero-display {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-weight: 900;
  font-size: var(--fs-display);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--black);
}
.hero-tagline {
  margin-top: 22px;
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--charcoal);
  max-width: 540px;
}
.hero-ctas {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-mark {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  color: var(--black);
  position: relative;
}
.hero-mark svg { will-change: transform; }

/* ---------- Marquee strip (subtle brand detail) ---------- */
.marquee {
  background: var(--black);
  color: var(--white);
  padding: 12px 0;
  overflow: hidden;
  border-top: 0.5px solid rgba(255, 255, 255, 0.06);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.marquee-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.marquee-track span {
  flex-shrink: 0;
  color: var(--white);
}
.marquee-track .dot { color: var(--amber); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Image Placeholder ---------- */
.img-ph {
  position: relative;
  background: linear-gradient(135deg, var(--line) 0%, rgba(229, 229, 224, 0.4) 100%);
  border: 0.5px dashed rgba(10, 10, 10, 0.15);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.img-ph[data-aspect="1/1"] { aspect-ratio: 1/1; }
.img-ph[data-aspect="4/5"] { aspect-ratio: 4/5; }
.img-ph[data-aspect="3/4"] { aspect-ratio: 3/4; }
.img-ph[data-aspect="3/2"] { aspect-ratio: 3/2; }

.img-ph::before {
  /* faint mark in background */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 50%, rgba(10, 10, 10, 0.06) 0%, transparent 35%),
    radial-gradient(circle at 70% 50%, rgba(196, 147, 63, 0.08) 0%, transparent 30%);
}

.img-ph-content {
  position: relative;
  z-index: 1;
  padding: 24px;
  max-width: 80%;
}
.img-ph-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: rgba(10, 10, 10, 0.25);
}
.img-ph-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  display: block;
  margin-bottom: 6px;
}
.img-ph-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}

/* Image hover (subtle zoom-out) */
.img-ph:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(10, 10, 10, 0.2);
}

/* Image grid */
.img-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 720px) { .img-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 960px) { .img-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* ---------- Feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 48px;
}
@media (min-width: 720px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}
@media (min-width: 1080px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Aufruf über der interaktiven Demo */
.demo-cta {
  text-align: center;
  margin: 72px 0 24px;
}
.demo-cta .eyebrow {
  color: var(--amber);
  display: inline-block;
  margin-bottom: 10px;
}
.demo-cta h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 auto 6px;
  color: var(--black);
  max-width: 720px;
}
.demo-cta h3 .accent { color: var(--amber); }
.demo-cta-sub {
  color: var(--grey);
  font-size: 15px;
  max-width: 520px;
  margin: 8px auto 20px;
  line-height: 1.55;
}
.demo-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--amber);
  color: #0A0A0A;
  font-size: 22px;
  font-weight: 700;
  animation: cta-bounce 1.6s ease-in-out infinite;
}
@keyframes cta-bounce {
  0%, 100% { transform: translateY(0); }
  50%     { transform: translateY(8px); }
}

/* Software-Download-Sektion unter der Demo */
.software-download {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 0.5px solid var(--line);
  text-align: center;
}
.software-download h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--black);
}
.software-download-desc {
  color: var(--grey);
  font-size: 15px;
  max-width: 460px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.software-download-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.software-download-note {
  color: var(--grey);
  opacity: 0.7;
  font-size: 12px;
  letter-spacing: 0.03em;
  margin: 0;
}
/* Schnellstart-Anleitungen als PDF, dezent unter den Software-Buttons */
.guide-download {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 0.5px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.guide-download-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  opacity: 0.75;
  margin-right: 4px;
}
.guide-download a {
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.guide-download a:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}
.guide-download-sep {
  color: var(--grey);
  opacity: 0.5;
}
@media (max-width: 520px) {
  .guide-download-label { width: 100%; margin: 0 0 4px; }
}
.feature {
  border-top: 0.5px solid var(--line);
  padding-top: 20px;
}
.feature-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  color: var(--amber);
  margin-bottom: 12px;
}
.feature h3 { margin-bottom: 6px; }
.feature p { color: var(--charcoal); font-size: 14px; line-height: 1.55; }

/* ---------- Specs table ---------- */
.specs {
  margin-top: 32px;
  border-top: 0.5px solid var(--line);
}
.specs-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 32px;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--line);
}
@media (min-width: 720px) {
  .specs-row { grid-template-columns: 200px 1fr; gap: 28px; padding: 18px 0; }
}
.specs-key {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 4px;
}
.specs-val {
  font-family: 'Archivo', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--black);
  line-height: 1.5;
}
.section--dark .specs-row { border-bottom-color: rgba(255, 255, 255, 0.08); }
.section--dark .specs { border-top-color: rgba(255, 255, 255, 0.08); }
.section--dark .specs-val { color: var(--white); }

/* ---------- Product / Buy ---------- */
.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 960px) {
  .product { grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
}
.product-info .price-row {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.product-info .price {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.03em;
  color: var(--black);
}
.product-info .price-meta {
  font-size: 13px;
  color: var(--grey);
}

.includes {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 0.5px solid var(--line);
}
.includes h3 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 14px;
}
.includes ul { display: flex; flex-direction: column; gap: 8px; }
.includes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
}
.includes li::before {
  content: "";
  flex-shrink: 0;
  width: 5px; height: 5px;
  margin-top: 9px;
  background: var(--amber);
  border-radius: 50%;
}

.buy-button {
  margin-top: 28px;
  padding: 24px;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}
.buy-button-placeholder {
  text-align: center;
  padding: 32px 16px;
  color: var(--grey);
  font-size: 12px;
  line-height: 1.6;
}
.buy-button-placeholder strong {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ---------- Use case grid ---------- */
.cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
@media (min-width: 720px) { .cases { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.case {
  border: 0.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
  background: var(--white);
}
.case:hover {
  border-color: var(--charcoal);
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -16px rgba(10, 10, 10, 0.12);
}
.case-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  color: var(--amber);
}
.case h3 { font-size: 18px; }
.case p { color: var(--charcoal); font-size: 14px; line-height: 1.55; }
.case-tag {
  margin-top: auto;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--grey);
}

/* ---------- Story / timeline ---------- */
.story-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: var(--block-pad);
}
@media (min-width: 720px) {
  .story-block { grid-template-columns: 200px 1fr; gap: 32px; }
}
.story-block:last-child { margin-bottom: 0; }
.story-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  color: var(--amber);
  text-transform: uppercase;
}
.story-meta-year {
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--black);
  display: block;
  margin-top: 4px;
}

/* Team */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 40px;
}
@media (min-width: 720px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.member { display: flex; flex-direction: column; gap: 10px; }
.member-photo { margin-bottom: 8px; }
.member-name {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.member-role {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 500;
}
.member-bio {
  margin-top: 6px;
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.6;
}

/* ---------- CTA strip ---------- */
.cta-strip {
  background: var(--black);
  color: var(--white);
  padding: clamp(48px, 7vw, 96px) 0;
  text-align: center;
  position: relative;
}
.cta-strip h2 { color: var(--white); }
.cta-strip .lead { color: rgba(255, 255, 255, 0.75); margin: 16px auto 0; text-align: center; }
.cta-strip .hero-ctas { justify-content: center; margin: 28px 0 0; }

/* ---------- Footer ---------- */
.footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.6);
  padding: 64px 0 32px;
  font-size: 14px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } }
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--white);
}
.footer-brand-mark { width: 32px; height: 32px; color: var(--white); }
.footer-brand-text {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.04em;
}
.footer-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 280px;
  line-height: 1.6;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.footer-social:hover { color: var(--white); }
.footer-social svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }

.btn-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.btn-social svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.footer-col h4 {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
.footer-bottom-meta {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   ANIMATIONEN — die spannenden
   ========================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulseAmber {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* Stroke-draw für die Hero-Mark — beide Kreise zeichnen sich beim Laden */
@keyframes drawCircleLeft {
  from { stroke-dasharray: 320; stroke-dashoffset: 320; }
  to   { stroke-dasharray: 320; stroke-dashoffset: 0; }
}
@keyframes drawCircleRight {
  from { stroke-dasharray: 205; stroke-dashoffset: 205; }
  to   { stroke-dasharray: 205; stroke-dashoffset: 0; }
}
@keyframes popDot {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.hero-mark .circle-left {
  animation: drawCircleLeft 1.6s var(--ease-out) 0.2s backwards;
}
.hero-mark .circle-right {
  animation: drawCircleRight 1.6s var(--ease-out) 0.5s backwards;
}
.hero-mark .dot {
  transform-origin: 65px 80px;
  animation: popDot 0.8s var(--ease-spring) 1.2s backwards,
             pulseAmber 3.6s var(--ease-in-out) 2.5s infinite;
}

/* Hero-Text fades */
.hero-display { animation: fadeUp 1s var(--ease-out) 0.1s backwards; }
.hero-tagline { animation: fadeUp 1s var(--ease-out) 0.3s backwards; }
.hero-ctas    { animation: fadeUp 1s var(--ease-out) 0.5s backwards; }
.hero-eyebrow { animation: fadeUp 1s var(--ease-out) backwards; }

/* Scroll reveal — IntersectionObserver setzt .is-in */
/* Nur ausblenden, wenn JavaScript wirklich laeuft. Sonst waeren bei einem
   Skriptfehler ganze Abschnitte unsichtbar, obwohl sie im HTML stehen. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px) scale(0.99);
  transition: opacity 800ms var(--ease-out),
              transform 800ms var(--ease-out);
}
.js .reveal.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }
.reveal[data-delay="400"] { transition-delay: 400ms; }
.reveal[data-delay="500"] { transition-delay: 500ms; }

/* Counter-up reveal */
.counter {
  font-variant-numeric: tabular-nums;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.03em;
  color: var(--black);
}

/* Section number — left-margin number with line that draws on reveal */
.section-num {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.section-num::before {
  content: "";
  display: inline-block;
  height: 1px;
  width: 0;
  background: var(--amber);
  transition: width 800ms var(--ease-out) 200ms;
  align-self: center;
}
.reveal.is-in .section-num::before { width: 28px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 32px; }
.mt-4 { margin-top: 56px; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--grey); }
.amber-text { color: var(--amber); }

/* ==========================================================================
   Ergänzungen v2 — Startseite (Stat-Band, Newsletter, A11y)
   ========================================================================== */

/* ---------- Screenreader-only ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Stat-Band ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 760px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}
.stat {
  background: var(--white);
  padding: clamp(24px, 3.5vw, 36px) clamp(20px, 2.5vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat-num {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--black);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 13px;
  color: var(--black);
  line-height: 1.5;
}

/* ---------- Newsletter ---------- */
.newsletter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(28px, 5vw, 56px);
  background: var(--white);
}
@media (min-width: 880px) {
  .newsletter { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.newsletter-text h2 { margin-bottom: 12px; }
.nl-form { display: flex; flex-direction: column; gap: 14px; }
.nl-row { display: flex; gap: 12px; flex-wrap: wrap; }
.nl-form input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  color: var(--black);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nl-form input[type="email"]:focus {
  outline: none;
  border-color: var(--black);
}
.nl-form input[type="email"]::placeholder { color: var(--grey); }
.nl-note { font-size: 12px; color: var(--grey); }

/* ---------- Abschluss-Sektion (Bestellen + Newsletter) ---------- */
.closing {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.closing .hero-ctas {
  justify-content: center;
  margin-top: 28px;
}
.closing-options {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 0.5px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) {
  .closing-options { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.closing-option {
  border: 0.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.closing-option h3 { font-size: 16px; margin-bottom: 0; }
.closing-option > p { font-size: 14px; color: var(--charcoal); margin-bottom: 0; }
.closing-option .nl-form { width: 100%; }
.closing-option .nl-row { justify-content: center; }

/* ---------- Ghost-Button auf dunkler CTA-Leiste sichtbar machen ---------- */
.cta-strip .btn--ghost {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--white);
}
.cta-strip .btn--ghost:hover { border-color: var(--white); }

/* ---------- Heller Button (für dunkle Sektionen) ---------- */
.btn--light {
  background: var(--white);
  color: var(--black);
}
.btn--light:hover {
  background: #ECECE6;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}

/* btn--light behält schwarze Schrift auch in dunklen Sektionen
   (überschreibt die Link-Regel von .section--dark) */
.section--dark .btn--light { color: var(--black); }

/* ---------- Abschluss-Kästen: strukturgleich, alles auf einer Höhe ---------- */
.closing-option {
  justify-content: flex-start;
  gap: 14px;
}
.closing-option .closing-desc {
  font-size: 14px;
  color: var(--charcoal);
  margin-bottom: 0;
  min-height: 4.8em;
}
.closing-option .nl-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.closing-option .nl-form input[type="email"] {
  width: 100%;
  height: 52px;
  flex: none;
}
.closing-mail {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 15px;
  color: var(--charcoal);
  user-select: all;
  -webkit-user-select: all;
}
.closing-option .btn {
  width: 100%;
  justify-content: center;
}
.closing-option .nl-note {
  font-size: 12px;
  color: var(--grey);
  margin-bottom: 0;
}

/* ==========================================================================
   Bestellbereich (Kamerasystem-Seite)
   ========================================================================== */
.order,
.order-alt {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}
.order {
  margin-top: 48px;
  padding: clamp(28px, 4vw, 44px);
}
.order-alt {
  margin-top: 20px;
  padding: clamp(24px, 3vw, 32px);
}
.order > h3,
.order-alt h3 { font-size: 20px; margin-bottom: 8px; }
.order-lead {
  font-size: 14px;
  color: var(--charcoal);
  max-width: 58ch;
}
.order-alt p {
  font-size: 14px;
  color: var(--charcoal);
  margin-bottom: 20px;
  max-width: 58ch;
}
.order-form { margin-top: 24px; }

/* Honigtopf gegen Bots. Nicht display:none, das erkennen viele Bots und
   lassen das Feld dann leer. Aus dem Sichtfeld schieben wirkt besser. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--charcoal);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  color: var(--black);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--black);
}
.field textarea { resize: vertical; min-height: 80px; }

/* Länderauswahl. Die Systemdarstellung von select unterscheidet sich je nach
   Betriebssystem stark, deshalb setzen wir sie zurück und zeichnen den Pfeil
   selbst, damit das Feld wie die übrigen Eingabefelder aussieht. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2A2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}
/* Solange nichts gewählt ist, wirkt der Platzhalter wie in den anderen
   Feldern, also grau statt schwarz. */
.field select:invalid { color: var(--grey); }
.field select option { color: var(--black); }
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.5;
}
.check input {
  margin-top: 2px;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  accent-color: var(--amber);
}
.check a { border-bottom: 0.5px solid var(--amber); }
.order-form > .btn { margin-top: 24px; }
.order-error {
  margin-top: 16px;
  padding: 12px 14px;
  background: #FFF1ED;
  border: 1px solid #E97132;
  border-radius: 6px;
  color: #16202E;
  font-size: 13px;
  line-height: 1.4;
}
.order-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--grey);
}

/* ==========================================================================
   Bild-Karussell
   ========================================================================== */
.carousel { position: relative; }
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--radius-md);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.carousel-slide .img-ph { width: 100%; }
.carousel-slide .img-ph:hover { transform: none; box-shadow: none; }
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(250, 250, 247, 0.92);
  border: 0.5px solid var(--line);
  color: var(--black);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px -6px rgba(10, 10, 10, 0.25);
  transition: background-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
  z-index: 2;
}
.carousel-btn:hover { background: var(--white); }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
.carousel-btn:disabled { opacity: 0; pointer-events: none; }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.carousel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.carousel-dot[aria-current="true"] { background: var(--amber); }

/* Software-Features auf dunklem Grund: helle, gut lesbare Textfarbe */
.section--dark .feature p { color: rgba(255, 255, 255, 0.82); }

/* ==========================================================================
   Bestell-Fenster (Modal)
   ========================================================================== */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 5vh, 64px) 16px;
  overflow-y: auto;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: clamp(28px, 5vw, 48px);
  box-shadow: 0 32px 64px -16px rgba(10, 10, 10, 0.45);
  animation: modalIn var(--dur-med) var(--ease-out);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.modal-close:hover { background: var(--line); }
.modal-screen[hidden] { display: none; }
.modal-screen h2 { font-size: clamp(22px, 3vw, 28px); margin-top: 6px; }
.modal-lead {
  font-size: 14px;
  color: var(--charcoal);
  margin-top: 8px;
  margin-bottom: 24px;
}
.modal-choices { display: flex; flex-direction: column; gap: 14px; }
.modal-choice {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.modal-choice:hover { border-color: var(--black); transform: translateY(-2px); }
.modal-choice-title {
  display: block;
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.modal-choice-desc {
  display: block;
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.5;
}
.modal-back {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--grey);
  margin-bottom: 16px;
  transition: color var(--dur-fast) var(--ease-out);
}
.modal-back:hover { color: var(--black); }

/* Bestell-Button-Bereich (Kamerasystem-Seite) */
.order-action { text-align: center; margin-top: 56px; }
.order-action-note { margin-top: 12px; font-size: 13px; color: var(--grey); }

/* ---------- Kamerasystem: Karussell auf Produkthöhe (Lieferumfang bündig) ---------- */
@media (min-width: 960px) {
  .product { align-items: stretch; }
  .product .carousel { display: flex; flex-direction: column; }
  .product .carousel-track { flex: 1 1 auto; min-height: 0; }
  .product .carousel-slide { display: flex; }
  .product .carousel-slide .img-ph {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Bestellbereich: geringerer Abstand zu den Fragen */
#bestellen { padding-bottom: clamp(28px, 4vw, 48px); }

/* Kontakt unter den häufigen Fragen */
.faq-contact { text-align: center; margin-top: 40px; }
.faq-contact p { font-size: 14px; color: var(--charcoal); margin-bottom: 16px; }

/* ==========================================================================
   Video-Platzhalter (Anwendungen-Seite)
   ========================================================================== */
.video-frame { margin-top: 32px; }
.video-frame video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--black);
  display: block;
  outline: none;
}
.video-ph {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
}
.video-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.6) 1px, transparent 0);
  background-size: 3px 3px;
}
.video-play {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding-left: 4px;
}
.video-ph-label {
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Rechtsseiten (Impressum, Datenschutz)
   ========================================================================== */
.legal { max-width: var(--reading-max); }
.legal h1 { margin-bottom: 6px; }
.legal h3 {
  margin-top: 38px;
  margin-bottom: 10px;
  font-size: 17px;
}
.legal p {
  color: var(--charcoal);
  font-size: 15px;
  line-height: 1.7;
}
.legal a { border-bottom: 0.5px solid var(--amber); }
.legal-stand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--grey);
  margin-bottom: 0;
}
.legal-note {
  margin-top: 24px;
  padding: 16px 20px;
  border-left: 2px solid var(--amber);
  background: rgba(196, 147, 63, 0.06);
  font-size: 14px;
  color: var(--charcoal);
}

/* ==========================================================================
   Cookie-Einwilligungsbanner
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 150;
  max-width: 720px;
  margin: 0 auto;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 48px -16px rgba(10, 10, 10, 0.55);
  animation: cookieIn var(--dur-med) var(--ease-out);
}
@keyframes cookieIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 680px) {
  .cookie-banner {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 20px 28px;
  }
}
.cookie-text {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}
.cookie-text a {
  color: var(--white);
  border-bottom: 0.5px solid var(--amber);
}
.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-banner .btn--ghost {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--white);
}
.cookie-banner .btn--ghost:hover { border-color: var(--white); }

.cookie-settings-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
  padding: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.cookie-settings-link:hover { color: var(--white); }

/* ==========================================================================
   MailerLite-Newsletterformular im EY-LO-Design
   ========================================================================== */
.nl-mailerlite { width: 100%; }
.nl-mailerlite .ml-form-align-center,
.nl-mailerlite .ml-form-embedWrapper,
.nl-mailerlite .ml-form-embedBody {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.nl-mailerlite .ml-block-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0;
}
.nl-mailerlite .ml-form-formContent,
.nl-mailerlite .ml-form-fieldRow,
.nl-mailerlite .ml-field-group,
.nl-mailerlite .ml-form-embedSubmit {
  margin: 0;
  width: 100%;
}
.nl-mailerlite input[type="email"] {
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  color: var(--black);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nl-mailerlite input[type="email"]:focus { outline: none; border-color: var(--black); }
.nl-mailerlite input[type="email"]::placeholder { color: var(--grey); }
.nl-mailerlite .ml-form-embedSubmit button.loading { display: none; }
.nl-mailerlite .ml-form-successContent { text-align: center; }
.nl-mailerlite .ml-form-successContent h4 { font-size: 16px; margin-bottom: 6px; }
.nl-mailerlite .ml-form-successContent p { font-size: 13px; color: var(--charcoal); margin: 0; }

/* MailerLite-Ladespinner */
.ml-form-embedSubmitLoad {
  display: inline-block;
  width: 18px;
  height: 18px;
}
.ml-form-embedSubmitLoad:after {
  content: " ";
  display: block;
  width: 11px;
  height: 11px;
  margin: 1px;
  border-radius: 50%;
  border: 3px solid #fff;
  border-color: #fff #fff #fff transparent;
  animation: mlSpin 1.1s linear infinite;
}
@keyframes mlSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Mobil-Schutzregeln und Feintuning
   ========================================================================== */
/* Inhalte dürfen nie über die Viewport-Breite hinausragen */
.product,
.product > *,
.product-info,
.modal-panel { min-width: 0; }
.carousel { width: 100%; max-width: 100%; }
.carousel-track { width: 100%; -webkit-overflow-scrolling: touch; touch-action: pan-x; }

/* Modal auf sehr schmalen Bildschirmen etwas kompakter */
@media (max-width: 480px) {
  .modal { padding: 12px; }
  .modal-panel { padding: 24px 20px; }
}

/* 360°-Produktanimation in der Hero-Bildmarke */
.hero-video {
  width: 100%;
  height: auto;
  display: block;
}

/* Team-Foto, gemeinsames Querformat oberhalb der Gründer-Beschreibungen */
.team-photo {
  max-width: 800px;
  margin: 0 0 48px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.team-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Echtes Karussell-Bild: gleicher Rahmen wie die Platzhalter */
.carousel-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}
@media (min-width: 960px) {
  .product .carousel-slide .carousel-img {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Anwendungs-Story-Block mit Hochkantbild rechts vom Text */
.story-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 760px) {
  .story-content.with-image {
    grid-template-columns: 1fr 1.15fr;
    gap: 40px;
    align-items: start;
  }
}
.story-image {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.story-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Allgemeines Foto-Element mit fester Seitenverhältnis-Steuerung */
.figure-img {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.figure-img[data-aspect="4/5"]  { aspect-ratio: 4 / 5; }
.figure-img[data-aspect="3/4"]  { aspect-ratio: 3 / 4; }
.figure-img[data-aspect="1/1"]  { aspect-ratio: 1 / 1; }
.figure-img[data-aspect="3/2"]  { aspect-ratio: 3 / 2; }
.figure-img[data-aspect="16/9"] { aspect-ratio: 16 / 9; }
.figure-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ═══════════════ ERKLÄRBILD: AUFNAHME UND AUSGABE ═══════════════ */
.explain {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  margin-top: clamp(20px, 2.5vw, 36px);
}
@media (max-width: 860px) {
  .explain { grid-template-columns: 1fr; gap: 32px; }
}
.explain-figure { position: relative; }
.explain-figure img.explain-photo {
  width: 100%; height: auto; display: block;
  border-radius: 14px; background: var(--line);
}
.explain-caption {
  margin-top: 10px;
  font-family: 'Archivo', sans-serif;
  font-weight: 300;                 /* gleicher Schnitt wie .lead */
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.55;
  color: var(--charcoal);
}

/* rechte Seite: die Ausgabe, wie sie auf dem Bildschirm ankommt */
.explain-screen {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #201512; aspect-ratio: 16 / 9;
}
.explain-screen > img.explain-wide {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.explain-pip {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 56%; aspect-ratio: 16 / 9;
  border: 3px solid var(--white); border-bottom: none;
  border-radius: 14px 14px 0 0; overflow: hidden; background: #201512;
}
.explain-pip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Beschriftungen mit Verbindungslinie */
.explain-tag {
  position: absolute; z-index: 4;
  font-size: clamp(14px, 1.5vw, 17px); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,.8);
  white-space: nowrap; pointer-events: none;
}
.explain-tag::after {
  content: ""; position: absolute; background: var(--amber);
  box-shadow: 0 0 6px rgba(0,0,0,.45);
}
.explain-tag--wide::after {
  left: 2px; top: calc(100% + 7px); width: 3px; height: 30px; border-radius: 2px;
}
.explain-tag--macro {
  bottom: 60%; left: 50%; transform: translateX(-50%); text-align: center;
}
.explain-tag--macro::after {
  top: 100%; left: 50%; margin-top: 7px; transform: translateX(-50%);
  width: 3px; height: 20px; border-radius: 2px;
}
.explain-tag--wide { top: 10%; left: 5%; }

/* ═══════════════ INSTAGRAM: HANDY-ANSICHT ═══════════════ */
.ig {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
  margin-top: clamp(32px, 4vw, 56px);
}
@media (max-width: 820px) { .ig { grid-template-columns: 1fr; } }

/* Das Geraet ist kein CSS-Nachbau mehr, sondern die Mockup-Vorlage mit dem
   Screenshot in der Bildschirmebene. Die Bilder haben transparente Ecken,
   deshalb folgt der Schatten der echten Silhouette. */
/* Der Rahmen ist ein eigenes Bild mit ausgestanzter Bildschirmflaeche und
   liegt fest ueber dem Slider. Dadurch wandern nur die Aufnahmen durch,
   das Geraet bleibt stehen, so wie beim Wischen auf einem echten Telefon. */
.ig-phone {
  --pw: clamp(230px, 26vw, 292px);
  position: relative; width: var(--pw);
  aspect-ratio: 1007 / 2107; margin: 0 auto;
  filter: drop-shadow(0 22px 40px rgba(10, 10, 10, .26));
}
.ig-screen {
  position: absolute;
  left: 2.880%; top: 1.376%; width: 94.141%; height: 97.247%;
  overflow: hidden; background: #000;
  border-radius: calc(var(--pw) * 0.1539);
}
.ig-track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.ig-slide { flex: 0 0 100%; height: 100%; }
.ig-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none; display: block;
}

.ig-dots {
  position: absolute; bottom: 4.5%; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 4;
}
.ig-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.5); border: none; padding: 0; cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,.4);
  position: relative;
}
/* unsichtbare Trefferflaeche, damit der Punkt am Handy gut zu treffen ist */
.ig-dot::before {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
}
.ig-dot[aria-current="true"] { background: var(--amber); }

.ig-text .ig-handle {
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
  color: var(--amber); letter-spacing: .02em;
}

/* ═══════════════ BILDMARKE, ANIMIERT ═══════════════
   Die beiden Kreise zeichnen sich nach, der goldene Punkt erscheint zuletzt. */
@keyframes mark-draw   { to   { stroke-dashoffset: 0; } }
@keyframes mark-dot-in { 0%   { transform: scale(0);   opacity: 0; }
                         60%  { transform: scale(1.15); opacity: 1; }
                         100% { transform: scale(1);    opacity: 1; } }

.mark-anim .mark-ring {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: mark-draw 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
.mark-anim .mark-ring--small { stroke-dasharray: 210; stroke-dashoffset: 210; animation-delay: .18s; }
.mark-anim .mark-dot {
  transform-origin: 69px 90px;
  animation: mark-dot-in .5s cubic-bezier(.34,1.56,.64,1) .95s backwards;
}
/* Footer: erst animieren, wenn er ins Bild kommt */
.footer-brand-mark.mark-anim .mark-ring { animation-play-state: paused; }
.footer-brand-mark.mark-anim.in-view .mark-ring { animation-play-state: running; }
.footer-brand-mark.mark-anim .mark-dot { animation-play-state: paused; }
.footer-brand-mark.mark-anim.in-view .mark-dot { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .mark-anim .mark-ring { stroke-dashoffset: 0; animation: none; }
  .mark-anim .mark-dot  { animation: none; }
}

/* Danke-Seite: große Marke */
.thanks-mark { width: clamp(120px, 18vw, 190px); margin: 0 auto clamp(24px, 3vw, 40px); display: block; }

/* Pflichtangaben direkt ueber dem Bestellbutton, § 312j Abs. 2 BGB */
.order-summary {
  margin: 20px 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(196, 147, 63, .06);
  font-size: 14px;
  line-height: 1.55;
  color: var(--charcoal);
}