/* =============================================================
   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; }

/* Das Band war bis 19.09.2026 ein warmes Fast-Schwarz (#110F0C) mit gruenem
   Schein -- auf dem cremefarbenen Vorgaenger stimmig, auf dem kuehlen Indigo
   wirkte es wie ein Versehen. Jetzt ein tiefes Navy mit demselben Akzent. */
.band-dark {
    background:
        radial-gradient(ellipse 900px 420px at 50% -10%, rgba(66, 99, 235, .30) 0%, transparent 68%),
        radial-gradient(ellipse 700px 380px at 12% 110%, rgba(140, 161, 245, .14) 0%, transparent 70%),
        linear-gradient(168deg, #161C36 0%, #0D1122 52%, #131936 100%);
    border-top: 1px solid rgba(140, 161, 245, .16);
    border-bottom: 1px solid rgba(140, 161, 245, .16);
}
/* 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: #EEF1FA;
    background: linear-gradient(135deg, #FFFFFF 0%, #A9BCF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.band-dark .muted { color: #A3ABC6; }
.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;
  }
}

/* Der Rahmen liegt auf dem dunklen Band. Reines Schwarz als Grundflaeche
   stach dort heraus, solange das Video noch nicht geladen war -- deshalb
   dieselbe Navy-Familie wie das Band, dazu ein heller Innenrand, damit die
   helle Bildschirmaufnahme nicht direkt in den Hintergrund ausfranst. */
.video-frame {
    border-radius: 18px;
    overflow: hidden;
    background: #0D1122;
    line-height: 0;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, .45),
        0 0 0 1px rgba(169, 188, 248, .18),
        0 0 60px rgba(66, 99, 235, .18);
}
.band .video-frame { margin-top: var(--space-5); }

/* ---------- 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); }

/* ---------- Funktionskacheln ----------
   Gehoerte im alten Aufbau zum Abschnitt "FEATURE GRID". Wird vom
   Bento-Raster benutzt (.bento .feature), nicht von einem .feature-grid --
   deshalb beim Umbau am 19.09.2026 zunaechst uebersehen. Ohne diese Regeln
   stehen die Texte ohne Kasten und ohne Innenabstand auf der Seite. */
.feature {
    padding: 24px 22px;
    border: 1px solid var(--stroke);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: left;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
    .feature:hover {
        border-color: rgba(66, 99, 235, .35);
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover), 0 0 20px var(--accent-glow);
    }
}
.feature-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--accent-glow);
    display: grid; place-items: center;
    margin-bottom: 14px;
}
.feature-icon svg {
    width: 20px; height: 20px;
    stroke: var(--accent-mid);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.feature strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}
.feature .muted { font-size: 0.9rem; }

/* ---------- 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; }

/* ---------- Ratgeber-Sammelseite ----------
   Karten, die selbst der Link sind (anstelle eines Buttons darin). display:
   block noetig, weil <a> von Haus aus inline ist -- text-decoration ist
   bereits per Basisregel `a { text-decoration: none; }` erledigt, hier also
   NICHT nochmal als style-Attribut noetig (das waere unter der aktuellen
   CSP ohnehin wirkungslos verworfen worden, siehe Uebergabedatei). */
.card-link {
    display: block;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
    .card-link:hover {
        border-color: rgba(66, 99, 235, .35);
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
    }
}
/* Breiterer Textbereich fuer Seiten, die kein Fliesstext sind (die
   Sammelseite zeigt ein Karten-Raster, keinen Lesetext) -- eigene Klasse
   statt eines style="max-width:none" auf .prose. */
.prose-breit { max-width: none; padding-bottom: clamp(56px, 7vw, 96px); }

/* ---------- Bilder im Fliesstext ----------
   Erster Einsatz auf den Ratgeberseiten (23.09.2026) -- ein Bildschirmfoto
   mitten im .prose-Text, mit Bildunterschrift. */
.prose figure {
    margin: 24px 0;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow);
}
.prose figure img { display: block; width: 100%; height: auto; }
.prose figcaption {
    padding: 10px 16px;
    background: var(--bg-subtle);
    font-size: 0.85rem;
    color: var(--muted);
    border-top: 1px solid var(--stroke);
}

/* ---------- 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; }
}

/* =============================================================
   NEUGESTALTUNG 19.10.2026 -- "moderner und verspielter"
   Steht bewusst am ENDE der Datei: diese Ebene ueberschreibt Farben,
   Radien, Kopf, Footer und Startseite. Alles darueber bleibt fuer die
   Unterseiten (Rechtstexte, Support, Guides) gueltig.
   Pastellfarben wie im Onboarding von Version 27.0, Indigo bleibt Akzent.
   Keine Inline-Styles (CSP): Positionen setzt site.js per element.style.
   ============================================================= */
:root {
    --radius: 26px;
    --r-md: 18px;
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --p-sky:    #DDEBFF;
    --p-lilac:  #ECE0FF;
    --p-pink:   #FFE0F0;
    --p-mint:   #DCF5E7;
    --p-peach:  #FFE6D3;
    --p-yellow: #FFF2C2;
    --gradient-pastel: linear-gradient(120deg, #D9ECFF 0%, #ECE1FF 48%, #FFE1F1 100%);
    --gradient-headline: linear-gradient(100deg, #2B3F9E 0%, #6A5BEB 45%, #E0569B 100%);
    --face-color: #191C26;
}
@media (prefers-color-scheme: dark) {
    :root {
        --p-sky:    rgba(110, 160, 255, .14);
        --p-lilac:  rgba(170, 130, 255, .14);
        --p-pink:   rgba(255, 120, 190, .13);
        --p-mint:   rgba(90, 210, 150, .13);
        --p-peach:  rgba(255, 160, 100, .13);
        --p-yellow: rgba(255, 210, 90, .12);
        --gradient-pastel: linear-gradient(120deg, #1B2340 0%, #241C3D 48%, #331A2C 100%);
        --gradient-headline: linear-gradient(100deg, #9FB2FF 0%, #C4A6FF 45%, #FF9CCB 100%);
        --face-color: #E9EBF3;
    }
}

/* Hintergrund: weiche Pastellflecken statt nur Indigo */
body::before {
    background-image:
        radial-gradient(ellipse 720px 520px at 12% -8%, rgba(122, 170, 255, .20) 0%, transparent 70%),
        radial-gradient(ellipse 620px 460px at 92% 6%, rgba(255, 150, 205, .16) 0%, transparent 70%),
        radial-gradient(ellipse 760px 420px at 50% 105%, rgba(176, 140, 255, .14) 0%, transparent 70%);
}
@media (prefers-color-scheme: dark) {
    body::before {
        background-image:
            radial-gradient(ellipse 620px 440px at 12% -5%, rgba(90, 120, 255, .20) 0%, transparent 70%),
            radial-gradient(ellipse 560px 400px at 92% 5%, rgba(255, 110, 180, .12) 0%, transparent 70%),
            radial-gradient(ellipse 760px 380px at 50% 105%, rgba(150, 110, 255, .12) 0%, transparent 70%);
    }
}

h1, h2, h3, h4 { letter-spacing: -0.025em; }

/* ---------- Pixelgesicht als wiederverwendbarer Baustein ----------
   Die SVGs sind schwarze Masken; gefaerbt wird ueber background-color. */
.face-an, .face-aus, .mb-face {
    display: inline-block;
    background-color: var(--face-color);
    -webkit-mask: url("/assets/img/menubar-an.svg") center / contain no-repeat;
            mask: url("/assets/img/menubar-an.svg") center / contain no-repeat;
}
.face-aus {
    -webkit-mask-image: url("/assets/img/menubar-aus.svg");
            mask-image: url("/assets/img/menubar-aus.svg");
}

/* ---------- Kopf: schwebende Pille ---------- */
.topbar {
    top: 0;
    padding-top: calc(10px + var(--safe-top));
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.topbar.scrolled { background: transparent; border-bottom-color: transparent; }
.topbar-inner {
    max-width: calc(var(--maxw) + 40px);
    width: calc(100% - 2 * var(--gutter));
    height: 62px;
    padding: 0 10px 0 16px;
    background: var(--surface-solid);
    background: color-mix(in srgb, var(--surface-solid) 74%, transparent);
    backdrop-filter: saturate(170%) blur(16px);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    border: 1px solid var(--stroke);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .3s ease, background .3s ease;
}
.topbar.scrolled .topbar-inner { box-shadow: var(--shadow); }
.brand img { border-radius: 10px; transition: transform .45s var(--spring); }
.brand:hover img { transform: rotate(-10deg) scale(1.08); }
.nav a { border-radius: 999px; }
.btn { border-radius: 999px; transition: transform .35s var(--spring), box-shadow .25s ease, background .25s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: scale(.97); }
.scroll-progress { background: var(--gradient-headline); height: 3px; }

@media (max-width: 860px) {
    .nav {
        top: calc(100% + 8px);
        left: var(--gutter); right: var(--gutter);
        padding: 10px;
        border: 1px solid var(--stroke);
        border-radius: 24px;
        background: var(--surface-solid);
        box-shadow: var(--shadow-hover);
    }
}

/* ---------- Footer: weiche Karte ---------- */
.footer {
    margin-top: var(--space-9);
    border-top: 0;
    border-radius: 36px 36px 0 0;
    background: var(--gradient-pastel);
}
@media (prefers-color-scheme: dark) { .footer { background: var(--gradient-pastel); } }
.footer-brand img { border-radius: 10px; }

.section-label {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--accent-glow);
    letter-spacing: .08em;
}
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; max-width: 640px; }
.section-head.center > .muted { margin-left: auto; margin-right: auto; }
.section-head h2 {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
}

/* =============================================================
   Startseite
   ============================================================= */
.hero2 {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: clamp(40px, 7vw, 92px) 4px clamp(20px, 4vw, 40px);
}
.news-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 5px 14px 5px 5px;
    border-radius: 999px;
    background: var(--surface-solid);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow-sm);
    font-size: .86rem; font-weight: 500; color: var(--muted);
    transition: transform .35s var(--spring), box-shadow .25s ease;
}
.news-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--text); }
.news-pill-tag {
    padding: 3px 10px; border-radius: 999px;
    background: var(--gradient-headline); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.hero2 h1 {
    margin: 22px 0 18px;
    font-size: clamp(2.5rem, 6vw, 4.3rem);
    line-height: 1.04;
}
.grad {
    background: var(--gradient-headline);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hero2 .lead { font-size: 1.12rem; color: var(--muted); max-width: 540px; }
.hero2 .hero-actions { justify-content: flex-start; margin-top: 28px; }
.btn-big { padding: 15px 24px; font-size: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip {
    padding: 6px 13px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--stroke);
    font-size: .84rem; color: var(--muted);
}

.hero2-copy { min-width: 0; }
.dock-app { background: transparent; }
.hero2-art { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; justify-self: center; }
.art-ring {
    position: absolute; inset: 6%;
    border-radius: 50%;
    background: var(--gradient-pastel);
    filter: blur(2px);
    animation: artSpin 18s linear infinite;
}
.art-ring::after {
    content: ""; position: absolute; inset: -6%;
    border-radius: 50%;
    border: 2px dashed rgba(106, 91, 235, .28);
}
.art-icon {
    position: absolute; left: 16%; top: 16%;
    width: 68%; height: auto;
    filter: drop-shadow(0 30px 40px rgba(43, 63, 158, .28));
    animation: artFloat 6s ease-in-out infinite;
    transition: transform .4s var(--spring);
}
.sticker {
    position: absolute;
    width: 54px; height: 54px;
    padding: 10px;
    border-radius: 16px;
    background-color: var(--face-color);
    box-shadow: var(--shadow);
    animation: artBob 5s ease-in-out infinite;
}
.sticker-a { top: 4%; right: 6%; transform: rotate(12deg); }
.sticker-b { bottom: 10%; left: 0; transform: rotate(-10deg); animation-delay: -2s; }
.sticker-key {
    position: absolute; bottom: 4%; right: 10%;
    display: grid; place-items: center;
    width: 58px; height: 58px; border-radius: 16px;
    font-size: 1.7rem; font-weight: 700; color: var(--text);
    background: var(--surface-solid);
    border: 1px solid var(--stroke); border-bottom-width: 4px;
    box-shadow: var(--shadow);
    transform: rotate(8deg);
    animation: artBob 5.5s ease-in-out infinite; animation-delay: -3.5s;
}
.sparkle { position: absolute; color: #E0569B; font-size: 1.4rem; animation: twinkle 2.6s ease-in-out infinite; }
.sparkle-a { top: 22%; left: 4%; }
.sparkle-b { top: 2%; left: 46%; color: #6A5BEB; font-size: 1rem; animation-delay: -1.2s; }
@keyframes artSpin { to { transform: rotate(360deg); } }
@keyframes artFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes artBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes twinkle { 0%, 100% { opacity: .25; scale: .8; } 50% { opacity: 1; scale: 1.15; } }

/* ---------- Mac-Desktop-Demo ---------- */
.mac {
    position: relative;
    margin: 0 auto;
    max-width: 980px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(16, 24, 64, .10);
    box-shadow: 0 40px 90px rgba(43, 63, 158, .20), 0 8px 24px rgba(16, 24, 64, .08);
    background: #E9EEFB;
    user-select: none;
    -webkit-user-select: none;
}
.mac-menubar {
    position: relative; z-index: 6;
    display: flex; align-items: center; justify-content: space-between;
    height: 32px; padding: 0 12px;
    font-size: .8rem; color: #1d1d1f;
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.mb-left, .mb-right { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.mb-left { overflow: hidden; }
.mb-logo { width: 13px; height: 13px; border-radius: 50%; background: #1d1d1f; opacity: .85; }
.mb-menu { opacity: .82; }
.mb-app { font-weight: 700; opacity: 1; }
.mb-sym { width: 16px; height: 16px; fill: none; stroke: #1d1d1f; stroke-width: 2; stroke-linecap: round; }
.mb-sym circle { fill: #1d1d1f; stroke: none; }
.mb-akku { width: 24px; }
.mb-akku .mb-akku-fill { fill: #1d1d1f; stroke: none; }
.mb-clock { font-variant-numeric: tabular-nums; font-weight: 500; }
.mb-icon {
    position: relative;
    display: grid; place-items: center;
    width: 30px; height: 24px; border-radius: 6px;
    transition: background .2s ease;
}
.mb-icon:hover, .mb-icon[aria-expanded="true"] { background: rgba(0, 0, 0, .10); }
.mb-face { width: 17px; height: 17px; background-color: #1d1d1f; transition: transform .4s var(--spring); }
.mb-icon:not(.is-on) .mb-face {
    -webkit-mask-image: url("/assets/img/menubar-aus.svg");
            mask-image: url("/assets/img/menubar-aus.svg");
}
.mb-icon.hop .mb-face { animation: faceHop .5s var(--spring); }
.mb-icon.wink .mb-face { animation: faceWink .45s ease; }
@keyframes faceHop { 0% { transform: scale(1); } 35% { transform: translateY(-4px) scale(1.25); } 100% { transform: none; } }
@keyframes faceWink { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3) rotate(-8deg); } }
.mb-anker { position: relative; display: flex; align-items: center; }
.mb-tip {
    position: absolute; top: 34px; right: -6px;
    padding: 6px 12px; border-radius: 12px;
    background: var(--gradient-headline); color: #fff;
    font-size: .78rem; font-weight: 600;
    box-shadow: 0 8px 20px rgba(106, 91, 235, .35);
    animation: tipBounce 1.6s ease-in-out infinite;
    pointer-events: none;
    transition: opacity .3s ease;
}
.mb-tip::before {
    content: ""; position: absolute; top: -5px; right: 15px;
    width: 10px; height: 10px; transform: rotate(45deg);
    background: #A65BD0;
}
.mb-tip.is-weg { opacity: 0; animation: none; }
@keyframes tipBounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }

.mac-popover {
    position: absolute; z-index: 7;
    top: 32px; right: -8px;
    width: 268px;
    padding: 14px;
    border-radius: 16px;
    color: #1d1d1f;
    white-space: normal;
    font-size: .9rem;
    text-align: left;
    background: rgba(250, 251, 255, .96);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 24px 50px rgba(16, 24, 64, .22);
    transform-origin: 85% 0;
    animation: popIn .32s var(--spring);
}
.mac-popover[hidden] { display: none; }
@keyframes popIn { from { opacity: 0; transform: scale(.85) translateY(-6px); } to { opacity: 1; transform: none; } }
.pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pop-head img { width: 36px; height: 36px; border-radius: 9px; }
.pop-head strong { font-size: .95rem; margin-right: auto; }
.pop-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(0, 0, 0, .045);
    font-size: .88rem; font-weight: 500;
}
.mac-popover .demo-switch { background: rgba(0, 0, 0, .18); }
.mac-popover .demo-switch.on { background: var(--gradient-accent); }
.mac-popover .demo-status { color: #3550C4; }
.mac-popover .demo-status.off { color: #c03f3f; }
.pop-counters { display: flex; gap: 16px; padding: 12px 4px 4px; }
.mac-popover .demo-counter { color: #5D6478; }
.mac-popover .demo-counter strong { color: #191C26; }
.mac-popover .demo-counter.blocked strong { color: #4263EB; }
.mac-popover .demo-counter.leaked strong { color: #d05050; }
.pop-foot { margin-top: 8px; font-size: .74rem; color: #8b91a3; }

.mac-desktop {
    position: relative;
    padding: 34px clamp(14px, 4vw, 48px) 104px;
    min-height: 520px;
    background: linear-gradient(135deg, #CFE3FF 0%, #E6DBFF 45%, #FFD9EC 100%);
    overflow: hidden;
}
.blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .7; animation: blobDrift 14s ease-in-out infinite alternate; }
.blob-a { width: 320px; height: 320px; left: -60px; top: -40px; background: #9EC5FF; }
.blob-b { width: 280px; height: 280px; right: -40px; top: 120px; background: #FFB3D9; animation-delay: -5s; }
.blob-c { width: 260px; height: 260px; left: 38%; bottom: -120px; background: #C9B2FF; animation-delay: -9s; }
@keyframes blobDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 30px) scale(1.12); } }

.mac-window {
    position: relative; z-index: 2;
    max-width: 720px; margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .10);
    box-shadow: 0 26px 60px rgba(16, 24, 64, .22);
    color: #1d1d1f;
}
.win-bar {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 40px;
    background: #F4F4F6;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.traffic-lights { position: absolute; left: 14px; display: flex; gap: 8px; }
.tl { display: block; width: 12px; height: 12px; border-radius: 50%; }
.tl-r { background: #FF5F57; } .tl-y { background: #FEBC2E; } .tl-g { background: #28C840; }
.win-title { font-size: .84rem; font-weight: 600; color: #4a4a50; }
.win-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 330px; }
.win-side {
    padding: 14px 10px;
    background: #F7F7F9;
    border-right: 1px solid rgba(0, 0, 0, .06);
    font-size: .8rem; color: #3a3a40;
}
.win-side li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; }
.win-side .side-head { font-size: .7rem; font-weight: 700; color: #9a9aa3; padding-bottom: 2px; }
.win-side .is-current { background: rgba(0, 0, 0, .07); font-weight: 600; }
.side-dot { width: 9px; height: 9px; border-radius: 3px; background: #7DA7F5; }
.mac-window .demo-stage { min-height: 330px; padding: 26px 22px 70px; }
.mac-window .demo-stage::before { background: radial-gradient(ellipse 420px 220px at 50% 0%, rgba(66, 99, 235, .08), transparent 70%); }
.mac-window .demo-hint { color: #5D6478; background: #fff; border-color: rgba(0, 0, 0, .08); }
.mac-window .demo-hint kbd { background: #F0F1F6; color: #191C26; border-color: rgba(0, 0, 0, .1); }
.mac-window.has-interaction .demo-hint { opacity: 0; transform: translateX(-50%) translateY(8px); animation: none; }
.mac-window .fake-menu { color: #1d1d1f; }

/* Ctrl-Taste fuer Touchscreens -- nur dort sichtbar */
.ctrl-key {
    display: none;
    position: absolute; z-index: 3; right: 14px; bottom: 12px;
    align-items: center; gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff; color: #1d1d1f;
    border: 1px solid rgba(0, 0, 0, .14); border-bottom-width: 3px;
    font-size: .8rem; font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
    transition: transform .2s var(--spring), background .2s ease, color .2s ease;
}
.ctrl-sym { font-size: 1.05rem; line-height: 1; }
.ctrl-key[aria-pressed="true"] {
    background: var(--gradient-accent); color: #fff;
    border-bottom-width: 1px; transform: translateY(2px);
}
@media (hover: none) {
    .ctrl-key { display: inline-flex; }
    .mac-window .demo-hint { display: none; }
}

.mac-dock {
    position: absolute; z-index: 3;
    left: 50%; bottom: 14px; transform: translateX(-50%);
    display: flex; align-items: flex-end; gap: 10px;
    padding: 8px 12px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .45);
    border: 1px solid rgba(255, 255, 255, .6);
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    box-shadow: 0 12px 30px rgba(16, 24, 64, .14);
}
.dock-item {
    position: relative;
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border-radius: 13px;
    transition: transform .3s var(--spring);
    transform-origin: 50% 100%;
}
.dock-item svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dock-item img { width: 48px; height: 48px; border-radius: 12px; }
.dock-item:hover { transform: scale(1.32) translateY(-6px); }
.dock-item:hover + .dock-item { transform: scale(1.12) translateY(-2px); }
.dock-blau  { background: linear-gradient(160deg, #6FB1FF, #2F6BEA); }
.dock-rosa  { background: linear-gradient(160deg, #FF8FC4, #E0569B); }
.dock-gelb  { background: linear-gradient(160deg, #FFD66B, #F2A93B); }
.dock-gruen { background: linear-gradient(160deg, #7EDBA6, #2FAE6E); }
.dock-trash { background: linear-gradient(160deg, #E9EAF0, #B8BCC8); }
.dock-trash svg { stroke: #4a4f5e; }
.dock-dot { position: absolute; bottom: -6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #1d1d1f; opacity: .55; }
.dock-sep { width: 1px; height: 40px; background: rgba(0, 0, 0, .14); margin: 0 2px; }

/* ---------- Video im MacBook-Rahmen ---------- */
.macbook { max-width: 860px; margin: 0 auto; }
.macbook-screen {
    padding: 14px 14px 18px;
    border-radius: 22px 22px 6px 6px;
    background: #15171f;
    box-shadow: 0 0 0 2px #2a2d38 inset, 0 30px 60px rgba(16, 24, 64, .22);
    line-height: 0;
}
.macbook-screen video { width: 100%; height: auto; border-radius: 8px; background: #0D1122; display: block; }
.macbook-base {
    position: relative;
    height: 16px; margin: 0 -6%;
    border-radius: 0 0 22px 22px;
    background: linear-gradient(180deg, #d9dce5 0%, #aeb3c2 100%);
    box-shadow: 0 14px 30px rgba(16, 24, 64, .18);
}
.macbook-base::before {
    content: ""; position: absolute; top: 0; left: 50%;
    width: 18%; height: 7px; transform: translateX(-50%);
    border-radius: 0 0 10px 10px; background: #9da2b2;
}
.video-full { width: 100%; display: block; }

/* ---------- Funktionen: bunte Kacheln ---------- */
.tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.tile {
    position: relative;
    display: flex; flex-direction: column; gap: 8px;
    padding: 26px 24px;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    transition: transform .45s var(--spring), box-shadow .3s ease;
}
.tile:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--shadow-hover); }
.tile:nth-child(even):hover { transform: translateY(-6px) rotate(.6deg); }
.tile strong { font-family: var(--font-serif); font-size: 1.22rem; color: var(--text); }
.tile .muted { font-size: .95rem; }
.tile-wide { grid-column: span 2; }
.tile-tall { grid-column: span 2; grid-row: span 2; }
.tile-face-demo { grid-column: span 2; }
.tile-blue   { background: var(--p-sky); }
.tile-pink   { background: var(--p-pink); }
.tile-yellow { background: var(--p-yellow); }
.tile-mint   { background: var(--p-mint); }
.tile-peach  { background: var(--p-peach); }
.tile-sky    { background: var(--p-sky); }
.tile-lilac  { background: var(--p-lilac); }
.tile-face { width: 34px; height: 34px; margin-bottom: 6px; transition: transform .4s var(--spring); }
.tile:hover .tile-face { transform: rotate(-12deg) scale(1.15); }
.tile-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: 4px; display: inline-block; transition: transform .45s var(--spring); }
.tile:hover .tile-emoji { transform: rotate(-14deg) scale(1.15); }
.tile .showcase-list { margin-top: 10px; }
.tile .showcase-list li { color: var(--text); }
.tile .bento-scene { margin-bottom: 10px; }
.face-pair { display: flex; gap: 14px; margin-bottom: 8px; }
.big-face { width: 52px; height: 52px; transition: transform .45s var(--spring); }
.tile:hover .big-face.face-an { transform: rotate(-10deg) scale(1.1); }
.tile:hover .big-face.face-aus { transform: rotate(10deg) scale(.95); }

/* ---------- Stimmen als Sprechblasen ---------- */
.voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.voice {
    position: relative;
    padding: 26px 26px 22px;
    border-radius: 28px 28px 28px 8px;
    background: var(--surface-solid);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow);
    transition: transform .45s var(--spring);
}
.voice:nth-child(2) { border-radius: 28px 28px 8px 28px; margin-top: 34px; }
.voice:hover { transform: translateY(-4px) rotate(-.5deg); }
.voice blockquote { margin: 10px 0 16px; font-size: 1.02rem; line-height: 1.6; color: var(--text); }

/* ---------- Preis ---------- */
.price2 {
    position: relative;
    max-width: 520px; margin: 0 auto;
    padding: 44px 36px 36px;
    text-align: center;
    border-radius: 34px;
    background: var(--surface-solid);
    border: 1px solid var(--stroke);
    box-shadow: 0 30px 70px rgba(106, 91, 235, .18);
    overflow: visible;
}
.price2::before {
    content: ""; position: absolute; inset: -2px; z-index: -1;
    border-radius: 36px;
    background: var(--gradient-headline);
    opacity: .55;
    filter: blur(18px);
}
.price2 h2 { margin: 12px 0 10px; }
.price2 .price-row { justify-content: center; }
.price2 .price-features { text-align: left; max-width: 360px; margin-left: auto; margin-right: auto; }
.price2 .pricing-cta { margin-top: 22px; }
.price2-sticker {
    position: absolute; top: -26px; right: -14px;
    width: 64px; height: 64px;
    transform: rotate(14deg);
    animation: artBob 5s ease-in-out infinite;
}

/* ---------- FAQ ---------- */
#faq .faq { max-width: 760px; margin: 0 auto; }

/* ---------- Abschluss ---------- */
.cta2 {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 6vw, 72px) clamp(22px, 5vw, 60px);
    border-radius: 36px;
    text-align: center;
    color: #fff;
    background: linear-gradient(120deg, #2B3F9E 0%, #6A5BEB 55%, #E0569B 100%);
    box-shadow: 0 30px 70px rgba(106, 91, 235, .30);
}
.cta2 h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); background: none; -webkit-text-fill-color: #fff; }
.cta2 p { margin: 12px auto 26px; max-width: 520px; color: rgba(255, 255, 255, .86); }
.cta2 .hero-actions { justify-content: center; }
.cta2-face {
    width: 70px; height: 70px; margin-bottom: 14px;
    background-color: #fff;
    animation: artBob 4s ease-in-out infinite;
}
.btn.light { background: #fff; color: #2B3F9E; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.btn.light:hover { background: #fff; color: #6A5BEB; }
.btn.outline-light { color: #fff; border: 1.5px solid rgba(255, 255, 255, .6); background: transparent; }
.btn.outline-light:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------- Schmaler ---------- */
@media (max-width: 900px) {
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile-tall { grid-row: auto; }
}
@media (max-width: 820px) {
    .hero2 { grid-template-columns: 1fr; text-align: center; padding-top: 28px; }
    .hero2 .lead { margin: 0 auto; }
    .hero2 .hero-actions, .chips { justify-content: center; }
    .hero2-art { max-width: 300px; grid-row: 1; }
    .win-body { grid-template-columns: 1fr; }
    .win-side { display: none; }
    .mb-menu:not(.mb-app) { display: none; }
    .voices { grid-template-columns: 1fr; }
    .voice:nth-child(2) { margin-top: 0; }
}
@media (max-width: 600px) {
    .tiles { grid-template-columns: 1fr; }
    .tile-wide, .tile-tall, .tile-face-demo { grid-column: auto; }
    .mac-desktop { padding: 18px 10px 24px; min-height: 0; }
    .mac-dock { display: none; }
    .mb-sym:not(.mb-akku) { display: none; }
    .mb-anker { position: static; }
    .mac-popover { top: 38px; right: 12px; width: calc(100% - 24px); }
    .mb-tip { top: 38px; right: 56px; }
    .mac-window .demo-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 10px 64px; min-height: 0; }
    .price2 { padding: 40px 22px 30px; }
    .price2-sticker { right: 6px; }
    .topbar-inner { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .art-ring, .art-icon, .sticker, .sticker-key, .sparkle, .blob,
    .mb-tip, .price2-sticker, .cta2-face { animation: none; }
    .tile:hover, .voice:hover, .btn:hover, .dock-item:hover { transform: none; }
}

/* ---------- StartupBase-Badge (lokal gehostet) ---------- */
.launch {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 30px 24px;
    text-align: center;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px dashed var(--stroke-hover);
}
.launch h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0 0 6px; }
.launch-badge { display: inline-block; transition: transform .4s var(--spring); }
.launch-badge:hover { transform: translateY(-3px) rotate(-1.5deg) scale(1.04); }
.launch-badge img { height: 55px; width: auto; display: block; }