/* =============================================================
   ByeCtrlClick — site.css
   Neu aufgebaut am 19.09.2026.

   Herkunft: Gestaltungsprinzip, Kopfleiste, Fusszeile und die schwebende
   Leiste folgen seedlore.de; die Bauteile (Hero, interaktive Demo, Modale,
   Preise, FAQ) stammen aus der bisherigen ByeCtrlClick-Seite, in der sie
   vollstaendig eingebettet im HTML standen.

   Warum ausgelagert: solange CSS und JS inline im HTML stehen, braucht die
   Content-Security-Policy 'unsafe-inline'. Mit eigenen Dateien faellt das
   weg -- siehe /etc/nginx/snippets/security-headers.conf.

   ACHTUNG Cache: die Datei wird mit `?v=JJJJMMTT` eingebunden und mit
   `max-age=31536000, immutable` ausgeliefert. Nach jeder Aenderung die
   Kennung in ALLEN HTML-Dateien hochzaehlen, sonst sehen wiederkehrende
   Besucher die alte Fassung.
   ============================================================= */

/* ---------- Selbst gehostete Schriften ----------
   Ersetzt die Einbindung ueber fonts.googleapis.com: beim Seitenaufruf geht
   keine IP-Adresse mehr an Google. Beide sind Variable Fonts, eine Datei
   deckt alle Schnitte ab. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/assets/fonts/playfair-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/assets/fonts/playfair-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Farben und Masse ----------
   Indigo statt des frueheren Gruens: die Seite nutzte bis 19.09.2026 exakt
   Seedlores Palette (#4A8C5C auf Cremeton) und sah dadurch aus wie dieselbe
   Seite. Der Grundton ist jetzt leicht kuehl (#F7F8FC) statt warm. */
:root {
    --bg: #F7F8FC;
    --bg-subtle: #EDEFF7;
    --surface: #FFFFFF;
    /* Deckendes Gegenstueck zu --surface, fuer Schwebendes (Modale) */
    --surface-solid: #FFFFFF;
    --surface-hover: #FAFBFE;
    --stroke: rgba(16, 24, 64, .07);
    --stroke-hover: rgba(16, 24, 64, .14);
    --text: #191C26;
    --muted: #5D6478;
    --muted-light: #939AAE;

    --accent: #2B3F9E;
    --accent-mid: #4263EB;
    --accent-light: #8CA1F5;
    --accent-hover: #3550C4;
    --accent-glow: rgba(66, 99, 235, .13);
    --accent-glow-strong: rgba(66, 99, 235, .26);
    --gradient-accent: linear-gradient(135deg, #2B3F9E 0%, #4263EB 100%);
    --gradient-accent-hover: linear-gradient(135deg, #3550C4 0%, #5C7BEF 100%);
    --gradient-text: linear-gradient(135deg, #191C26 0%, #4A5068 100%);

    --shadow-sm: 0 1px 2px rgba(16, 24, 64, .05), 0 2px 8px rgba(16, 24, 64, .04);
    --shadow: 0 4px 24px rgba(16, 24, 64, .06);
    --shadow-hover: 0 8px 40px rgba(16, 24, 64, .10);

    --radius: 20px;
    --r-sm: 10px;
    --r-md: 16px;
    --r-pill: 999px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

    --maxw: 1080px;
    --gutter: 24px;

    /* Abstandsmasse -- statt willkuerlicher Raender, damit der senkrechte
       Rhythmus lesbar bleibt: eng innerhalb von Bloecken, weit dazwischen. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 72px;
    --space-9: 112px;
    --section-gap: var(--space-8);

    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
    --safe-right: env(safe-area-inset-right);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Kuehles Fast-Schwarz passend zum Indigo. Jedes Grau ist hier zum
           Blau hin gemischt, nie zum Warmen -- sonst beisst es sich mit dem
           Akzent. */
        --bg: #0A0B10;
        --bg-subtle: #11131C;
        --surface: rgba(232, 238, 255, .045);
        --surface-solid: #151824;
        --surface-hover: rgba(232, 238, 255, .075);
        --stroke: rgba(225, 232, 255, .09);
        --stroke-hover: rgba(225, 232, 255, .17);
        --text: #E9EBF3;
        --muted: #8A91A6;
        --muted-light: #575E72;

        --accent: #4263EB;
        --accent-mid: #8CA1F5;
        --accent-light: #B9C6FA;
        --accent-hover: #5C7BEF;
        --accent-glow: rgba(108, 140, 245, .22);
        --accent-glow-strong: rgba(108, 140, 245, .40);
        --gradient-accent: linear-gradient(135deg, #4263EB 0%, #8CA1F5 100%);
        --gradient-accent-hover: linear-gradient(135deg, #5C7BEF 0%, #A6B7F8 100%);
        --gradient-text: linear-gradient(135deg, #fff 0%, #A8AEC2 100%);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
        --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 20px 50px rgba(0, 0, 0, .3);
        --shadow-hover: 0 1px 3px rgba(0, 0, 0, .4), 0 30px 70px rgba(0, 0, 0, .4);
    }
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; background-color: var(--bg); scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    background: transparent;
    min-height: 100vh;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; }

.muted { color: var(--muted); }
.accent { color: var(--accent-mid); }
.inline { color: var(--accent-mid); text-decoration: underline; text-underline-offset: 3px; }
.inline:hover { color: var(--accent-hover); }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 300;
    padding: 12px 18px; background: var(--surface-solid); color: var(--text);
    border-radius: 0 0 var(--r-sm) 0; box-shadow: var(--shadow);
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent-mid); outline-offset: 3px; border-radius: 4px; }

/* Weicher Farbverlauf im Hintergrund */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 700px 500px at 20% -10%, rgba(66, 99, 235, .09) 0%, transparent 70%),
        radial-gradient(ellipse 600px 400px at 80% 10%, rgba(140, 161, 245, .07) 0%, transparent 70%),
        radial-gradient(ellipse 800px 300px at 50% 100%, rgba(66, 99, 235, .05) 0%, transparent 70%);
    animation: meshShift 20s ease-in-out infinite alternate;
}

/* Feine Koernung darueber, damit die Flaechen nicht plastikhaft wirken */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.015;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

@media (prefers-color-scheme: dark) {
    body::after { opacity: 0.03; }
    body::before {
        background-image:
            radial-gradient(ellipse 600px 400px at 20% 0%, rgba(66, 99, 235, .16) 0%, transparent 70%),
            radial-gradient(ellipse 600px 400px at 80% 0%, rgba(140, 161, 245, .10) 0%, transparent 70%),
            radial-gradient(ellipse 800px 300px at 50% 100%, rgba(66, 99, 235, .07) 0%, transparent 70%);
    }
}

@keyframes meshShift {
    0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
    33%  { background-position: 30% 10%, 70% 20%, 40% 80%; }
    66%  { background-position: 10% 20%, 90% 10%, 60% 90%; }
    100% { background-position: 20% 5%, 80% 15%, 50% 85%; }
}

/* ---------- Raster ---------- */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
    padding-left: max(var(--gutter), var(--safe-left));
    padding-right: max(var(--gutter), var(--safe-right));
}

main { display: block; }

.stack { display: grid; gap: var(--section-gap); padding: var(--space-7) 0 var(--space-8); }

.page-head { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 40px); }
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 14px; }
.page-head .lead { max-width: 640px; color: var(--muted); font-size: 1.06rem; }
.updated { font-size: 0.87rem; color: var(--muted-light); margin-top: 16px; }

.prose { max-width: 760px; padding-bottom: clamp(56px, 7vw, 96px); }
.prose h2 { font-size: clamp(1.3rem, 2.3vw, 1.6rem); margin: 42px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; margin: 26px 0 10px; }
.prose p { color: var(--muted); margin-bottom: 14px; }
.prose ul { display: grid; gap: 9px; margin: 0 0 18px; padding-left: 20px; list-style: disc; }
.prose li { color: var(--muted); }
.prose strong { color: var(--text); font-weight: 600; }
.prose .note {
    padding: 16px 18px;
    background: var(--bg-subtle);
    border-left: 3px solid var(--accent-mid);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin: 20px 0;
}
.prose .note p:last-child { margin-bottom: 0; }

/* ---------- Kopfleiste ----------
   Nach dem Vorbild von seedlore.de: klebend, mit Menue, Sprachumschalter und
   einer Hauptschaltflaeche. Klassenname .topbar und die Kennung #navbar sind
   aus der alten Seite uebernommen, weil das JavaScript daran haengt. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Rueckfall fuer Browser ohne color-mix(): dann deckend statt durchscheinend */
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, background .25s ease;
    padding-top: var(--safe-top);
}
.topbar.scrolled {
    border-bottom-color: var(--stroke);
    /* Rueckfall fuer Browser ohne color-mix(): dann deckend statt durchscheinend */
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 95%, transparent);
}
.topbar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 72px;
}

.brand { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 1.12rem; color: var(--accent); }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
@media (prefers-color-scheme: dark) { .brand { color: var(--text); } }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
    padding: 9px 13px;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--muted);
    border-radius: var(--r-sm);
    transition: color .18s ease, background .18s ease;
}
.nav a:hover { color: var(--text); background: var(--accent-glow); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.lang {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--accent-glow);
    border-radius: var(--r-pill);
}
.lang a {
    padding: 5px 11px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-radius: var(--r-pill);
}
.lang a[aria-current="true"] { background: var(--surface-solid); color: var(--accent); box-shadow: var(--shadow-sm); }
@media (prefers-color-scheme: dark) { .lang a[aria-current="true"] { color: var(--accent-mid); } }

.nav-toggle { display: none; padding: 8px; border-radius: var(--r-sm); color: var(--text); }
.nav-toggle svg { width: 24px; height: 24px; display: block; }

/* =============================================================
   Ab hier: Bauteile aus der bisherigen ByeCtrlClick-Seite.
   Uebernommen wie sie waren, nur die Farben sind von Gruen auf Indigo
   umgestellt. Die interaktive Demo insbesondere ist erprobt -- sie
   nachzubauen haette nur Risiko ohne Gewinn gebracht.
   ============================================================= */

/* ---------- Abschnittsrhythmus ----------
   Every major block gets the same rhythm via .section. Whether it *looks*
   like a card is a separate decision: add .card only for blocks that are
   a self-contained object (hero, pricing). Editorial content — features,
   testimonials, FAQ — sits directly on the page background and lets the
   elements inside it (feature tiles, quotes) carry the visual weight. */
.section { margin-top: var(--section-gap); }
/* Nudge unboxed sections inward so their text lines up roughly with
   boxed ones instead of sitting hard against the viewport edge. */
.section:not(.card) { padding: 0 var(--space-1); }

/* Label + heading + intro line. Keeps the gap to the content below
   consistent across sections. */
.section-head { margin-bottom: var(--space-5); }
.section-head > h2 { margin: 0; }
.section-head > .muted { margin-top: var(--space-2); }

/* ---------- Randlose Baender ----------
   Breaks a section out of the 980px wrap to the full viewport width, to give
   the page one or two moments that aren't "another block on cream".
   body has overflow-x: hidden, so the 100vw breakout cannot cause sideways
   scroll even when a scrollbar is present. */
.section.band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--space-8) 20px;
}
.band-inner { max-width: var(--maxw); margin: 0 auto; }

.band-dark {
  background:
radial-gradient(ellipse 800px 400px at 50% 0%, rgba(66,99,235,.20) 0%, transparent 70%),
#110F0C;
  border-top: 1px solid rgba(225,232,255,.07);
  border-bottom: 1px solid rgba(225,232,255,.07);
}
/* h2 paints itself with a gradient and transparent text-fill, so `color`
   alone has no effect here — the gradient itself has to be re-declared in
   band colours, otherwise the light-mode gradient (dark text → dark green)
   is invisible on the dark band. */
.band-dark h2 {
  color: #F0EBE3;
  background: linear-gradient(135deg, #F0EBE3 0%, #8CA1F5 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.band-dark .muted { color: #9A8F82; }
.band-dark .section-label { color: var(--accent-light); }

@media (prefers-color-scheme: dark) {
  /* On a dark page the band has to go *lighter* than the background,
 otherwise it stops reading as a separate band at all. */
  .band-dark {
background:
  radial-gradient(ellipse 800px 400px at 50% 0%, rgba(66,99,235,.22) 0%, transparent 70%),
  #16130F;
  }
}

.video-frame {
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  line-height: 0;
  box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(225,232,255,.08);
}

/* ---------- Karten ---------- */
.card {
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: var(--space-6);
  position: relative;
}

/* ---------- Kopfbereich ---------- */
.hero {
  padding: 52px 40px;
  overflow: hidden;
  background: var(--surface);
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--gradient-accent);
  opacity: 0.5;
  border-radius: 0 0 2px 2px;
}

.hero::after {
  content: "";
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 400px; height: 200px;
  background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent-mid);
  background: var(--accent-glow);
  border: 1px solid rgba(66,99,235,.15);
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.hero h1 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 50%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero .muted { position: relative; z-index: 1; font-size: 1.05rem; }

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
  position: relative;
  z-index: 1;
  justify-content: center;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
  justify-content: center;
}

.made-in-germany {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--muted);
  background: var(--bg-subtle);
  border: 1px solid var(--stroke);
  border-radius: 100px;
  padding: 4px 12px;
}

.hero-meta-dot { color: var(--stroke-hover); font-size: .9rem; }
.hero-meta-text { font-size: .8rem; color: var(--muted-light); }

.muted { color: var(--muted); line-height: 1.7; }

h2 {
  font-family: 'Playfair Display', serif;
  margin: 0 0 12px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Abschnittsmarke ---------- */
.section-label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-mid);
  margin-bottom: 8px;
}

/* ---------- Schaltflaechen ---------- */
.btn {
  position: relative;
  appearance: none; border: none; text-decoration: none; cursor: pointer; user-select: none;
  padding: 13px 22px; border-radius: 100px; font-weight: 600; font-size: 0.95rem; line-height: 1;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .15s ease, box-shadow .25s ease;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.btn::after {
  content: "";
  position: absolute; top: -100%; left: -100px;
  width: 60px; height: 300%;
  background: linear-gradient(120deg, transparent 0, rgba(255,255,255,.2) 50%, transparent 100%);
  transform: rotate(25deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { left: 200%; }
.btn:active { transform: translateY(0px) scale(.99); }

.btn.primary {
  background: var(--gradient-accent);
  color: #fff;
  box-shadow: 0 4px 20px var(--accent-glow-strong);
  font-size: 0.875rem;
  padding: 8px 20px;
}
.btn.primary:hover {
  background: var(--gradient-accent-hover);
  box-shadow: 0 8px 28px var(--accent-glow-strong);
}

.btn.ghost {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.875rem;
  padding: 8px 16px;
}
.btn.ghost:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  .btn.ghost:hover { background: rgba(255,255,255,0.08); }
}

.btn .icon { display: inline-flex; transition: transform .2s ease; }
.btn:hover .icon { transform: translateX(2px) translateY(1px); }

/* ---------- Verspielte Kleinigkeiten ---------- */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 20px var(--accent-glow-strong); }
  50% { box-shadow: 0 6px 32px var(--accent-glow-strong), 0 0 0 6px var(--accent-glow); }
}
.hero-actions .btn.primary { animation: pulseGlow 3s ease-in-out infinite; }
.hero-actions .btn.primary:hover { animation: none; }

@keyframes iconPop {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.15) rotate(-3deg); }
  50% { transform: scale(1.05) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.feature:hover .feature-icon { animation: iconPop .4s cubic-bezier(.2,.7,.2,1); }

.hero-label {
  animation: fadeDrop .6s ease both .2s;
}

/* ---------- Einblenden beim Scrollen ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 300ms; }

/* ---------- Modale ---------- */
.modal {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 100;
  padding: 20px; opacity: 0; pointer-events: none;
  background: rgba(0,0,0,0);
  transition: opacity .28s cubic-bezier(.2,.7,.2,1), background .28s ease;
}
/* Blur + a fairly heavy scrim: at .4 alpha the page behind stayed legible and
   competed with the dialog, especially in dark mode where black-on-black
   barely separates. */
.modal.open {
  opacity: 1; pointer-events: auto;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal.closing { pointer-events: none; }

.modal-card {
  width: min(760px, 92vw);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: 0 24px 80px rgba(0,0,0,.12);
  transform-origin: center;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(14px) scale(.975);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Accent line at top of modal */
.modal-card::before {
  content: "";
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--gradient-accent);
  opacity: 0.5;
  z-index: 2;
  border-radius: 0 0 2px 2px;
}

.modal.open .modal-card { animation: modalCardIn .42s cubic-bezier(.16,1,.3,1) both; }
.modal.closing .modal-card { animation: modalCardOut .28s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes modalCardIn { 0% { opacity: 0; transform: translateY(14px) scale(.975); } 60% { opacity: 1; transform: translateY(-1px) scale(1.005); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes modalCardOut { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(10px) scale(.98); } }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 20px;
  border-bottom: 1px solid var(--stroke);
}
.modal-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700; font-size: 1.15rem;
  color: var(--text); margin: 0;
}
.modal-body {
  padding: 20px; color: var(--text);
  overflow: auto; -webkit-overflow-scrolling: touch;
  flex: 1; min-height: 0;
  font-size: .95rem; line-height: 1.75;
}
.modal-body p { margin-bottom: 12px; color: var(--muted); }
.modal-body p strong { color: var(--text); }
.modal-close {
  appearance: none; border: none; background: transparent; color: var(--muted);
  cursor: pointer; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border-radius: 10px;
  line-height: 1; font-size: 0; transform-origin: 50% 50%;
  transition: background-color .22s ease, transform .28s cubic-bezier(.2,.7,.2,1), color .22s ease;
  will-change: transform;
}
.modal-close:hover { color: var(--text); background: var(--bg-subtle); transform: rotate(90deg) scale(1.06); }
.modal-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }

/* ---------- Interaktive Ctrl-Klick-Demo ---------- */
.demo-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  flex-wrap: wrap;
}
.demo-controls .demo-label {
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
}
.demo-switch {
  position: relative;
  appearance: none; border: none; cursor: pointer;
  width: 52px; height: 30px; border-radius: 100px;
  background: rgba(0,0,0,.18);
  transition: background .25s ease, box-shadow .25s ease;
  padding: 0; flex-shrink: 0;
}
.demo-switch::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.demo-switch.on { background: var(--gradient-accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.demo-switch.on::after { transform: translateX(22px); }
@media (prefers-color-scheme: dark) {
  .demo-switch { background: rgba(225,232,255,.18); }
}

.demo-status {
  font-size: .82rem; font-weight: 600;
  padding: 4px 12px; border-radius: 100px;
  background: var(--accent-glow); color: var(--accent-mid);
  border: 1px solid rgba(66,99,235,.18);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  letter-spacing: .3px;
}
.demo-status.off {
  background: rgba(220,80,80,.10);
  color: #d05050;
  border-color: rgba(220,80,80,.22);
}
@media (prefers-color-scheme: dark) {
  .demo-status.off { background: rgba(255,120,120,.12); color: #ff8a8a; }
}

.demo-counters {
  margin-left: auto;
  display: flex; gap: 18px;
  flex-wrap: wrap;
}
.demo-counter {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: .82rem; color: var(--muted);
}
.demo-counter strong {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: color .2s ease, transform .2s ease;
}
.demo-counter.bump strong { animation: counterBump .35s cubic-bezier(.2,.7,.2,1); }
@keyframes counterBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.demo-counter.blocked strong { color: var(--accent-mid); }
.demo-counter.leaked strong { color: #d05050; }
@media (prefers-color-scheme: dark) {
  .demo-counter.leaked strong { color: #ff8a8a; }
}

.demo-window {
  position: relative;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: var(--bg-subtle);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.10);
  user-select: none;
  -webkit-user-select: none;
  /* Tweakable position of the click area over Finder.png */
  --finder-stage-top: 18%;
  --finder-stage-left: 7%;
  --finder-stage-right: 7%;
  --finder-stage-bottom: 12%;
}
.demo-window.is-finder { background: transparent; }
.demo-window .finder-bg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.demo-window.is-finder .demo-window-bar { display: none; }
.demo-window.is-finder .demo-stage {
  position: absolute;
  top: var(--finder-stage-top);
  left: var(--finder-stage-left);
  right: var(--finder-stage-right);
  bottom: var(--finder-stage-bottom);
  padding: 18px 24px 56px;
  min-height: 0;
  background: transparent;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 16px;
  align-content: start;
  justify-items: center;
}
@media (max-width: 600px) {
  .demo-window.is-finder .demo-stage {
grid-template-columns: repeat(3, 1fr);
gap: 18px 8px;
padding: 12px 12px 50px;
  }
}
.demo-window.is-finder .demo-stage::before { display: none; }
@media (prefers-color-scheme: dark) {
  .demo-window {
background: rgba(255,255,255,.025);
box-shadow: 0 12px 36px rgba(0,0,0,.4);
  }
}
.demo-window-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(to bottom, rgba(0,0,0,.025), rgba(0,0,0,0));
  border-bottom: 1px solid var(--stroke);
  position: relative;
}
@media (prefers-color-scheme: dark) {
  .demo-window-bar { background: linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,0)); }
}
.traffic-lights { display: flex; gap: 6px; }
.traffic-light {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1);
}
.traffic-light.red { background: #ff5f57; }
.traffic-light.yellow { background: #febc2e; }
.traffic-light.green { background: #28c840; }
.demo-window-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: .8rem; font-weight: 500; color: var(--muted);
  letter-spacing: .2px;
  pointer-events: none;
}
.demo-stage {
  position: relative;
  min-height: 300px;
  padding: 28px 22px 56px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 18px;
  align-content: start;
  cursor: default;
}
.demo-stage::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 420px 220px at 50% 0%, var(--accent-glow), transparent 70%);
  pointer-events: none;
}
.demo-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 6px;
  border-radius: 10px;
  transition: background .15s ease, transform .15s ease;
  position: relative; z-index: 1;
}
.demo-tile:hover { background: rgba(0,0,0,.04); transform: translateY(-1px); }
@media (prefers-color-scheme: dark) {
  .demo-tile:hover { background: rgba(255,255,255,.04); }
}
.demo-tile-icon {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.20));
  transition: transform .18s ease, filter .18s ease;
}
.demo-tile-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.demo-tile:hover .demo-tile-icon {
  transform: scale(1.05);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
}
/* macOS-style: only the filename gets a rounded selection pill on hover. */
.demo-tile-name {
  padding: 2px 8px;
  border-radius: 7px;
  transition: background-color .18s ease, color .18s ease;
}
.demo-tile:hover .demo-tile-name {
  background: #007aff;
  color: #fff;
}
.demo-tile-name {
  font-size: .76rem; font-weight: 500;
  /* Fixed dark label: the tiles always sit on the white Finder window,
 so this must stay dark regardless of the page's light/dark theme. */
  color: #1d1d1f;
  text-align: center;
  max-width: 84px;
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}

.demo-hint {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  font-size: .82rem; color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--stroke);
  padding: 7px 14px; border-radius: 100px;
  pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  animation: demoHintPulse 2.4s ease-in-out infinite;
  transition: opacity .35s ease, transform .35s ease;
  white-space: nowrap;
}
@keyframes demoHintPulse {
  0%, 100% { opacity: .75; }
  50% { opacity: 1; }
}
.demo-hint kbd {
  font-family: 'Inter', sans-serif;
  font-size: .72rem; font-weight: 600;
  background: var(--bg-subtle);
  border: 1px solid var(--stroke);
  border-bottom-width: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text);
  letter-spacing: 0;
}
.demo-stage.touched .demo-hint,
.demo-window.has-interaction .demo-hint {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  animation: none;
}
/* When the hint sits directly inside .demo-window (Finder mode), pin it
   to the bottom of the window instead of the stage. */
.demo-window > .demo-hint {
  bottom: 5%;
}

/* Block animation — appears at click point when ByeCtrlClick is "Active" */
.block-pulse {
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.block-pulse .ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent-mid);
  animation: blockRing .85s cubic-bezier(.2,.7,.2,1) forwards;
}
.block-pulse .ring:nth-child(2) { animation-delay: .12s; opacity: .6; }
.block-pulse .check {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--accent-mid);
  animation: blockCheck .55s cubic-bezier(.2,.7,.2,1) both;
}
.block-pulse .check svg {
  width: 36px; height: 36px;
  filter: drop-shadow(0 0 10px var(--accent-glow-strong));
}
@keyframes blockRing {
  0% { transform: scale(.35); opacity: .85; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes blockCheck {
  0% { transform: scale(.3); opacity: 0; }
  55% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.block-pulse.fading .check { animation: blockCheckOut .25s ease forwards; }
@keyframes blockCheckOut {
  to { opacity: 0; transform: scale(.85); }
}

/* Fake macOS context menu — appears when demo is "Off" */
.fake-menu {
  position: absolute;
  min-width: 210px;
  background: rgba(248, 248, 248, .82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 18px 44px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.08);
  z-index: 6;
  font-size: .85rem;
  animation: fakeMenuIn .14s ease-out both;
  transform-origin: top left;
}
@media (prefers-color-scheme: dark) {
  .fake-menu {
background: rgba(48, 48, 52, .82);
border-color: rgba(255,255,255,.10);
box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 .5px rgba(255,255,255,.04) inset;
  }
}
@keyframes fakeMenuIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.fake-menu-item {
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--text);
  cursor: default;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  line-height: 1.5;
}
.fake-menu-item:hover {
  background: var(--accent);
  color: #fff;
}
.fake-menu-item .shortcut { color: var(--muted-light); font-size: .78rem; font-feature-settings: "tnum"; }
.fake-menu-item:hover .shortcut { color: rgba(255,255,255,.75); }
.fake-menu-divider {
  height: 1px;
  background: var(--stroke);
  margin: 4px 6px;
}

@media (max-width: 600px) {
  .demo-counters { margin-left: 0; width: 100%; }
  .demo-stage { min-height: 260px; padding: 22px 14px 50px; gap: 14px; }
  .demo-tile-icon { width: 42px; height: 42px; font-size: 30px; }
  .demo-window-title { display: none; }
}

/* ---------- Funktionsraster ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.bento .feature { display: flex; flex-direction: column; align-items: flex-start; }
.feature-large {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: flex-end;
}
@media (max-width: 820px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .feature-large { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 520px) {
  .bento { grid-template-columns: 1fr; }
  .feature-large { grid-column: auto; }
}

/* Animated Ctrl+click scene inside the large bento tile */
.bento-scene {
  position: relative;
  align-self: stretch;
  flex: 1;
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: radial-gradient(ellipse 320px 180px at 50% 45%, var(--accent-glow), transparent 70%);
}
.scene-keycap {
  width: 92px; height: 70px;
  border-radius: 14px;
  border: 1px solid var(--stroke-hover);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-subtle) 100%);
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start;
  padding: 10px 12px;
  box-shadow: 0 6px 0 rgba(0,0,0,.08), 0 12px 24px rgba(0,0,0,.12);
  animation: keycapPress 4s ease-in-out infinite;
}
.keycap-sym { font-size: 1.1rem; line-height: 1; color: var(--text); }
.keycap-word { font-size: .7rem; letter-spacing: .5px; color: var(--muted); }
@keyframes keycapPress {
  0%, 100% { transform: translateY(0); box-shadow: 0 6px 0 rgba(0,0,0,.08), 0 12px 24px rgba(0,0,0,.12); }
  8%, 15%  { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.10); }
  25%      { transform: translateY(0); }
}
.scene-plus { font-size: 1.3rem; font-weight: 600; color: var(--muted-light); }
.scene-mouse { position: relative; width: 70px; height: 70px; display: grid; place-items: center; }
.scene-mouse > svg {
  width: 40px; height: 40px;
  stroke: var(--muted); stroke-width: 1.8; fill: none; stroke-linecap: round;
  animation: mouseClick 4s ease-in-out infinite;
}
@keyframes mouseClick {
  0%, 100% { transform: scale(1); }
  8%, 15%  { transform: scale(.92); }
  25%      { transform: scale(1); }
}
.scene-ring {
  position: absolute;
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--accent-mid);
  opacity: 0; transform: scale(.4);
  animation: sceneRing 4s ease-out infinite;
  pointer-events: none;
}
@keyframes sceneRing {
  0%, 9% { transform: scale(.4); opacity: 0; }
  14%    { opacity: .85; }
  34%, 100% { transform: scale(1.55); opacity: 0; }
}
.scene-check {
  position: absolute; display: grid; place-items: center;
  color: var(--accent-mid); opacity: 0;
  animation: sceneCheck 4s ease infinite;
  pointer-events: none;
}
.scene-check svg {
  width: 24px; height: 24px;
  stroke: currentColor; stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px var(--accent-glow-strong));
}
@keyframes sceneCheck {
  0%, 9%  { opacity: 0; transform: scale(.4); }
  15%     { opacity: 1; transform: scale(1.18); }
  22%     { transform: scale(1); }
  55%     { opacity: 1; }
  72%, 100% { opacity: 0; transform: scale(.9); }
}

/* ---------- Stimmen ---------- */
.testimonial {
  margin: 0;
  padding: 26px 28px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: var(--bg-subtle);
  position: relative;
}
.testimonial + .testimonial { margin-top: var(--space-4); }
.testimonial::before {
  content: "\201C";
  font-family: 'Playfair Display', serif;
  position: absolute;
  top: 4px; right: 20px;
  font-size: 80px; line-height: 1;
  color: var(--accent-mid);
  opacity: .16;
  pointer-events: none;
}
.testimonial-stars {
  color: var(--accent-mid);
  font-size: 1.05rem;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.testimonial blockquote {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.75;
}
.testimonial-author { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.testimonial-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gradient-accent); color: #fff;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .5px;
}
.testimonial-name { font-weight: 600; font-size: .92rem; color: var(--text); }
.verified-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 600;
  color: var(--accent-mid);
  background: var(--accent-glow);
  border: 1px solid rgba(66,99,235,.18);
  border-radius: 100px;
  padding: 3px 10px;
}
.verified-badge svg {
  width: 12px; height: 12px;
  stroke: currentColor; stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Preise ---------- */
/* The one section that should feel different from the rest — tinted toward
   the brand green instead of neutral white/near-black. */
.pricing-card {
  text-align: center;
  background:
radial-gradient(ellipse 620px 320px at 50% 0%, var(--accent-glow) 0%, transparent 70%),
var(--surface);
  border-color: rgba(66,99,235,.22);
}
.pricing-box {
  max-width: 420px;
  margin: 0 auto;
  padding: 30px 28px;
  border: 1px solid rgba(66,99,235,.25);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow), 0 0 36px var(--accent-glow);
  position: relative;
  overflow: hidden;
}
.pricing-box::before {
  content: "";
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--gradient-accent);
  opacity: .5;
  border-radius: 0 0 2px 2px;
}
.price-row { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.price-currency { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--muted); }
.price-value {
  font-family: 'Playfair Display', serif;
  font-weight: 700; font-size: 64px; line-height: 1;
  color: var(--text);
}
.price-sub { color: var(--muted); font-size: .9rem; margin-top: 8px; }
.price-features {
  list-style: none;
  margin: 22px 0;
  display: grid; gap: 10px;
  text-align: left;
}
.price-features li {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--muted); font-size: .92rem; line-height: 1.5;
}
.price-features svg {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px;
  stroke: var(--accent-mid); stroke-width: 2.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn.primary.pricing-cta {
  width: 100%;
  justify-content: center;
  padding: 14px 24px;
  font-size: 1rem;
}
.price-note { margin-top: 14px; font-size: .78rem; color: var(--muted-light); }

/* ---------- Haeufige Fragen ---------- */
.faq details { border-bottom: 1px solid var(--stroke); }
.faq details:last-child { border-bottom: none; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 2px;
  font-weight: 600; font-size: .97rem; color: var(--text);
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-mid); }
.faq-icon {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-glow); color: var(--accent-mid);
  display: grid; place-items: center;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.faq-icon svg {
  width: 12px; height: 12px;
  stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round;
}
.faq details[open] .faq-icon { transform: rotate(45deg); }
.faq-answer {
  padding: 0 2px 18px;
  color: var(--muted);
  font-size: .93rem; line-height: 1.7;
  max-width: 92%;
}

/* ---------- Neigung des Demo-Fensters ---------- */
.demo-window.tiltable {
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

/* ---------- Fortschrittsbalken ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-mid) 40%, var(--accent-light) 70%, var(--accent-mid) 100%);
  background-size: 200% 100%;
  animation: progressShimmer 2s ease-in-out infinite;
  z-index: 200;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--accent-glow-strong), 0 0 20px rgba(66,99,235,.15);
  transition: width .1s linear;
}
@keyframes progressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Logo im Kopfbereich ---------- */
.hero-logo {
  display: block;
  margin: 0 auto 28px;
  width: 100px;
  height: 100px;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 8px 30px rgba(66,99,235,.25);
  animation: heroLogoFloat 5s ease-in-out infinite;
}
@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

/* ---------- Mauszeiger-Schein ---------- */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66,99,235,.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%);
  transition: opacity .3s ease;
  will-change: left, top;
}

/* ---------- Magnetische Schaltflaechen ---------- */
.magnetic {
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  body::before { animation: none !important; }
  .scroll-progress { display: none; }
  .cursor-glow { display: none; }
}

/* Erster Abschnitt unter der klebenden Kopfleiste braucht eigenen Abstand --
   frueher kam der vom Innenabstand des <body>, den es so nicht mehr gibt. */
main > .container > .section:first-child,
main > .container > .hero:first-child { margin-top: var(--space-6); }

/* ---------- Versionsvergleich ----------
   Die Tabelle traegt die Kernaussage der Seite: beide Versionen blockieren
   Ctrl-Klicks gleich gut, der Unterschied liegt allein im Gaming Mode.
   Auf schmalen Schirmen scrollt sie waagerecht statt umzubrechen -- eine
   umgebrochene Vergleichstabelle ist nicht mehr vergleichbar. */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px 4px; }
.compare {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.94rem;
}
.compare caption { text-align: left; color: var(--muted); font-size: 0.9rem; padding-bottom: 12px; }
.compare th, .compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--stroke); }
.compare thead th {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-light);
    border-bottom-color: var(--stroke-hover);
}
.compare tbody th { font-family: var(--font-sans); font-weight: 500; color: var(--text); }
.compare td { text-align: center; width: 132px; color: var(--muted); }
.compare thead th:not(:first-child) { text-align: center; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: none; }
.compare .sub th { padding-left: 34px; color: var(--muted); font-weight: 400; }
.compare .sub th::before { content: "\21B3"; position: absolute; margin-left: -20px; color: var(--muted-light); }
.compare tbody th { position: relative; }
.compare .col-light { background: var(--accent-glow); }
.compare thead .col-light { border-top-left-radius: var(--r-sm); border-top-right-radius: var(--r-sm); }

.yes, .no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.yes { background: var(--accent-glow-strong); color: var(--accent); }
.no  { background: var(--bg-subtle); color: var(--muted-light); }
.yes svg, .no svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; }
@media (prefers-color-scheme: dark) { .yes { color: var(--accent-light); } }
.compare td small { display: block; margin-top: 4px; font-size: 0.76rem; color: var(--muted-light); }

/* ---------- Light: Aufnahmen und Store-Hinweis ---------- */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }
.shot-frame {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--stroke);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.shot-frame img { display: block; width: 100%; height: auto; }

/* Platz fuer das offizielle Apple-Badge. Apple erlaubt keine Nachbauten und
   stellt die Vorlagen selbst bereit -- bis die Datei hier liegt, steht an
   dieser Stelle eine Textschaltflaeche.
   Datei ablegen als: /assets/img/mac-app-store-badge-{de,en}.svg
   Dann .store-badge einblenden und .store-soon entfernen. */
.store-soon {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border: 1px dashed var(--stroke-hover);
    border-radius: var(--r-pill);
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 500;
}
.store-soon svg { width: 17px; height: 17px; flex: none; }
.store-badge img { height: 44px; width: auto; display: block; }

/* ---------- Fusszeile ----------
   Rasterfusszeile nach seedlore.de. Die Spalten Hilfe und Rechtliches sind
   nicht Dekoration: der Mac App Store verlangt eine oeffentlich erreichbare
   Datenschutz-Adresse, und die wird hier verlinkt. */
.footer {
    padding: clamp(52px, 6vw, 76px) 0 118px;
    background: var(--surface);
    border-top: 1px solid var(--stroke);
    margin-top: var(--space-8);
}
@media (prefers-color-scheme: dark) { .footer { background: var(--bg-subtle); } }
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(28px, 4vw, 56px);
    margin-bottom: 44px;
}
.footer-brand { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 1.1rem; color: var(--accent); margin-bottom: 14px; }
.footer-brand img { width: 32px; height: 32px; border-radius: 9px; }
@media (prefers-color-scheme: dark) { .footer-brand { color: var(--text); } }
.footer-about { font-size: 0.92rem; color: var(--muted); max-width: 330px; }
.footer-col h4 {
    font-family: var(--font-sans);
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted-light); margin-bottom: 15px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { font-size: 0.94rem; color: var(--muted); }
.footer-col a:hover { color: var(--accent-mid); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
    display: flex; flex-wrap: wrap; gap: 12px 26px;
    align-items: center; justify-content: space-between;
    padding-top: 26px; border-top: 1px solid var(--stroke);
    font-size: 0.87rem; color: var(--muted-light);
}

/* ---------- Schwebende Leiste ----------
   Der YouTube-Verweis ist am 19.09.2026 entfallen. */
.social-bar {
    position: fixed;
    left: 50%;
    bottom: calc(22px + var(--safe-bottom));
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    /* Rueckfall fuer Browser ohne color-mix(): dann deckend statt durchscheinend */
    background: var(--surface-solid);
    background: color-mix(in srgb, var(--surface-solid) 90%, transparent);
    backdrop-filter: saturate(170%) blur(16px);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    border: 1px solid var(--stroke);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow);
}
.social-link {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: var(--muted);
    transition: color .18s ease, background .18s ease;
}
.social-link svg { width: 17px; height: 17px; }
.social-link:hover { color: var(--accent-mid); background: var(--accent-glow); }
.social-sep { width: 1px; height: 20px; background: var(--stroke); }
.app-pill {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 13px 5px 6px;
    border-radius: var(--r-pill);
    font-size: 0.85rem; font-weight: 500;
    color: var(--muted);
    transition: color .18s ease, background .18s ease;
}
.app-pill img { width: 24px; height: 24px; border-radius: 7px; }
.app-pill:hover { color: var(--text); background: var(--accent-glow); }

/* ---------- Haken-Listen ----------
   Uebernommen von seedlore.de (.showcase-list). Wird auf der Startseite im
   Versionsvergleich und auf der Light-Seite benutzt. */
.showcase-list { display: grid; gap: 12px; }
.showcase-list li { display: flex; gap: 12px; font-size: 0.97rem; color: var(--muted); align-items: flex-start; }
.showcase-list svg { width: 19px; height: 19px; color: var(--accent-mid); flex: none; margin-top: 3px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.showcase-list strong { color: var(--text); font-weight: 600; }
.showcase-list code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em; padding: 1px 5px;
    background: var(--bg-subtle); border-radius: 5px;
}

/* Nur fuer Vorleseprogramme sichtbar -- das Etikett im Demo-Schalter.
   Nicht display:none verwenden: das nehmen Vorleseprogramme ebenfalls raus. */
.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;
}

/* ---------- Kleine Hilfsklassen ----------
   Ersetzen die frueheren style="..."-Attribute. Das ist kein Schoenheits-
   sondern ein Sicherheitsgrund: die Content-Security-Policy laeuft ohne
   'unsafe-inline', und style-src deckt auch Attribute ab -- ein style=""
   im HTML wuerde vom Browser verworfen. Neue Ausnahmen also nicht als
   Attribut, sondern hier ergaenzen. */
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 10px; }
.mt-4 { margin-top: 14px; }
.mt-5 { margin-top: 16px; }
.mt-6 { margin-top: 20px; }
.mt-7 { margin-top: 22px; }
.mt-8 { margin-top: 24px; }
.center { text-align: center; }
.small { font-size: 0.875rem; }
.fineprint { color: var(--muted-light); font-size: 0.85rem; margin-top: 8px; }
.card-title { font-size: 1.25rem; }
.card-sub { font-size: 0.9rem; margin-bottom: 16px; }
.media-full { width: 100%; height: auto; border-radius: 14px; display: block; }
.video-full { width: 100%; display: block; }
.row-between { justify-content: space-between; }
.spacer-50 { height: 50px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.is-hidden { display: none; }

/* ---------- Umbrueche ---------- */
@media (max-width: 860px) {
    .nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        padding: 12px var(--gutter) 18px;
        background: var(--bg);
        border-bottom: 1px solid var(--stroke);
        box-shadow: var(--shadow);
    }
    .nav.is-open { display: grid; gap: 2px; }
    .nav a { padding: 11px 13px; font-size: 1rem; }
    .nav-toggle { display: grid; place-items: center; margin-left: auto; }
    .header-actions { margin-left: 0; }
}

@media (max-width: 768px) {
    :root { --section-gap: var(--space-7); }
    .header-actions .btn { padding: 8px 12px; font-size: 0.8rem; }
}

@media (max-width: 600px) {
    :root { --gutter: 18px; }
    .topbar-inner { height: 60px; }
    .brand { font-size: 1rem; }
    .section-head { margin-bottom: var(--space-4); }
    .hero { padding: 32px 24px; }
    .hero h1 { font-size: 28px; }
    .card { padding: 24px 20px; }
    .footer { padding-bottom: 104px; }
    .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .brand-name { display: none; }
    .social-bar { bottom: calc(10px + var(--safe-bottom)); }
    .app-pill span { display: none; }
    .modal-card { max-height: 92vh; }
}

/* ---------- Ruhiger Modus ----------
   Wer Bewegung reduziert haben will, bekommt sie nicht. Die Inhalte muessen
   dabei trotzdem sichtbar sein -- deshalb .reveal hier zuruecksetzen. */
@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 !important; transform: none !important; }
    body::before { animation: none !important; }
    .scroll-progress { display: none; }
    .cursor-glow { display: none; }
}

/* =============================================================
   Ab hier: nur fuer updates.byectrlclick.com.
   Alles davor ist Zeile fuer Zeile dieselbe Datei wie auf
   byectrlclick.com -- beide Seiten teilen sich das Aussehen, damit der
   Sprung von der Hauptseite zum Changelog kein Bruch ist.
   Aenderungen am gemeinsamen Teil gehoeren in
   /var/www/byectrlclick/public/assets/css/site.css und muessen hierher
   kopiert werden.
   ============================================================= */

/* ---------- Plakette, Zeile, Aktionsleiste ----------
   Aus der alten Changelog-Seite. Stehen hier und nicht im gemeinsamen Teil,
   weil nur diese Seite sie benutzt. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-mid);
    background: var(--accent-glow);
    border: 1px solid rgba(66, 99, 235, .18);
    letter-spacing: 0.02em;
}
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Versionsplakette ---------- */
   .version-badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 5px 14px;
 border-radius: 100px;
 background: var(--accent-glow);
 border: 1px solid rgba(66,99,235,.2);
 color: var(--accent-mid);
 font-weight: 600;
 font-size: .78rem;
 letter-spacing: 0.04em;
 margin-bottom: 10px;
 text-transform: uppercase;
   }

   .version-badge::before {
 content: "";
 width: 6px; height: 6px;
 border-radius: 50%;
 background: var(--accent-mid);
 box-shadow: 0 0 8px var(--accent-glow-strong);
 animation: badgePulse 2s ease-in-out infinite;
   }

   @keyframes badgePulse {
 0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--accent-glow-strong); }
 50% { opacity: .6; box-shadow: 0 0 14px var(--accent-glow-strong); }
   }

/* ---------- Raster ---------- */
   .grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-4); }
   @media (min-width: 760px) { .grid { grid-template-columns: 1.4fr .8fr; } }

/* ---------- Zeitstrahl ----------
   Releases hang off one continuous rail. On wide screens the version number
   sits in its own column and sticks while you scroll that release, so you
   always know which version you are reading. */
.timeline-title {
  font-family: 'Playfair Display', serif;
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-5);
}

.timeline { position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 10px; bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--accent-mid) 0%, var(--stroke) 55%, transparent 100%);
}

.tl-entry { position: relative; padding-left: 34px; }
.tl-entry + .tl-entry { margin-top: var(--entry-gap); }

.tl-dot {
  position: absolute;
  left: 0; top: 7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent-mid);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.tl-entry.is-latest .tl-dot { background: var(--accent-mid); }

.tl-version {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--text);
}
.tl-date { color: var(--muted-light); font-size: .85rem; margin-top: 3px; }
.tl-meta {
  margin-top: var(--space-3);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: .8rem; color: var(--muted);
}
.tl-meta span { white-space: nowrap; }
.tl-side .version-badge { margin-top: var(--space-3); }

@media (min-width: 900px) {
  .tl-entry {
display: grid;
grid-template-columns: 190px 1fr;
column-gap: var(--space-6);
padding-left: 0;
  }
  .tl-side {
padding-left: 34px;
position: sticky;
top: 92px;
align-self: start;
  }
  .tl-meta { display: block; }
  .tl-meta span { display: block; }
}

/* Older releases are collapsed so the newest one dominates the page. */
details.tl-body > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  color: var(--muted);
  font-size: .95rem; line-height: 1.65;
}
details.tl-body > summary::-webkit-details-marker { display: none; }
details.tl-body > summary:hover { color: var(--text); }
.tl-toggle {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-glow); color: var(--accent-mid);
  display: grid; place-items: center;
  transition: transform .25s ease;
}
.tl-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
details.tl-body[open] .tl-toggle { transform: rotate(45deg); }
.tl-content {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--stroke);
}
.tl-body > h2:first-child, .tl-body > h3:first-child { margin-top: 0; }
.tl-content > :first-child { margin-top: 0; }

/* ---------- Typografie in den Versionshinweisen ----------
   Die alte Changelog-Seite hatte dafuer allgemeine h3-, ul- und li-Regeln.
   Der gemeinsame Unterbau setzt jedoch `ul, ol { list-style: none; }` (fuer
   Navigation und Fusszeile) und gibt Ueberschriften keine Raender -- ohne die
   Regeln hier klebt in den Eintraegen alles aneinander und die Aufzaehlungen
   haben keine Punkte. Auf .tl-body statt .tl-content eingegrenzt: der
   neueste Eintrag traegt seinen Inhalt direkt in .tl-body (kein <details>,
   immer offen), die aelteren zusaetzlich in einem .tl-content darunter.
   .tl-body deckt beide Faelle ab. Bewusst nicht global, damit die
   Hauptseite davon nichts abbekommt. */
.tl-body h3 {
    font-family: var(--font-sans);
    margin: 20px 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}
.tl-body h3:first-child { margin-top: 0; }
@media (prefers-color-scheme: dark) { .tl-body h3 { color: var(--accent-mid); } }

.tl-body ul {
    list-style: disc;
    margin: 0 0 4px;
    padding-left: 20px;
    display: block;
}
.tl-body ul li {
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: 8px;
    line-height: 1.65;
}
.tl-body ul li::marker { color: var(--accent-light); }
.tl-body ul li strong { color: var(--text); font-weight: 600; }
.tl-body p { color: var(--muted); margin-bottom: 10px; }

/* Ueberschrift und Trennlinie im Eintrag. Der Unterbau nullt alle Raender
   (`* { margin: 0 }`), deshalb braucht beides hier eigene Werte -- sonst
   klebt die Trennlinie im Text, wie am 19.09.2026 auf der Seite zu sehen. */
.tl-body > h2 {
    font-size: clamp(20px, 2.8vw, 26px);
    margin: 0 0 12px;
}
.tl-body hr {
    border: 0;
    border-top: 1px solid var(--stroke);
    margin: 22px 0;
}
.tl-body > .muted:first-of-type { margin-bottom: 4px; }

/* Die Zusammenfassung im zugeklappten Zustand soll lesbar bleiben und der
   Aufklapp-Knopf rechts stehen, ohne den Text zu quetschen. */
.tl-body > summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    color: var(--muted);
    line-height: 1.7;
}
.tl-body > summary::-webkit-details-marker { display: none; }

/* ---------- Bildbuehne ----------
   The screenshots are already macOS windows with their own chrome and shadow,
   so a second window frame would just be a frame in a frame. Instead the image
   sits on a tinted stage and bleeds off its bottom edge — the depth comes from
   the backdrop and the drop shadow, not from added chrome. */
.shot-stage {
  position: relative;
  margin: var(--space-6) 0 0;
  padding: var(--space-5) var(--space-6) 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background:
radial-gradient(ellipse 120% 80% at 50% 0%, var(--accent-glow) 0%, transparent 65%),
linear-gradient(170deg, var(--bg-subtle) 0%, var(--surface-solid) 100%);
}
.shot-stage-caption {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-2);
  color: var(--muted);
  font-size: .875rem;
  margin-bottom: var(--space-4);
}
.shot-stage-more {
  color: var(--accent-mid);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.shot-stage-more:hover { text-decoration: underline; }
.shot-stage-link {
  display: block;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow: 0 30px 60px -12px rgba(0,0,0,.45);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.shot-stage-link img { width: 100%; height: auto; display: block; }
@media (hover: hover) {
  .shot-stage-link:hover { transform: translateY(-6px); }
}
@media (max-width: 600px) {
  .shot-stage { padding: var(--space-4) var(--space-4) 0; }
}

/* ---------- Bilderkarussell ---------- */
   .modal-carousel {
 position: relative; border-radius: 14px; overflow: hidden;
 border: 1px solid var(--stroke); background: var(--bg-subtle);
 box-shadow: var(--shadow);
   }
   .modal-carousel img { width: 100%; height: auto; display: block; }
   .modal-carousel-nav {
 position: absolute; top: 50%; transform: translateY(-50%);
 width: 36px; height: 36px; border-radius: 100px; border: none; cursor: pointer;
 display: grid; place-items: center;
 /* Rueckfall fuer Browser ohne color-mix(): dann deckend statt durchscheinend */
 background: var(--bg);
 background: color-mix(in oklab, var(--bg) 90%, transparent);
 color: var(--text);
 box-shadow: 0 4px 16px rgba(0,0,0,.15);
 transition: background-color .2s ease, transform .15s ease;
   }
   .modal-carousel-nav:hover { background: var(--surface); transform: translateY(-50%) scale(1.06); }
   .modal-carousel-nav:active { transform: translateY(-50%) scale(.96); }
   .modal-carousel-nav svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
   .modal-carousel-nav.prev { left: 10px; }
   .modal-carousel-nav.next { right: 10px; }

/* ---------- Video im Changelog ---------- */
   .changelog-video {
 position: relative;
 border-radius: 14px;
 overflow: hidden;
 border: 1px solid var(--stroke);
 background: #000;
 margin-bottom: 24px;
 box-shadow: var(--shadow);
   }
   .changelog-video video {
 width: 100%;
 height: auto;
 display: block;
   }
   .video-controls {
 position: absolute;
 bottom: 10px;
 right: 10px;
   }
   .video-btn {
 width: 34px; height: 34px;
 border-radius: 50%;
 border: none;
 background: rgba(0,0,0,.55);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 color: #fff;
 cursor: pointer;
 display: grid;
 place-items: center;
 transition: background .2s ease, transform .15s ease;
 font-size: 0;
   }
   .video-btn:hover { background: rgba(0,0,0,.75); transform: scale(1.06); }
   .video-btn svg { width: 14px; height: 14px; fill: currentColor; display: block; }

/* ---------- Galerie-Hintergrund auf dem Handy ---------- */
   @media (max-width: 600px) {
 .card {
   background: var(--bg-subtle);
 }
 .modal-carousel {
   background: var(--bg-subtle);
 }
   }