/* ==========================================================================
   Aventa CRM — Marketing-Website
   --------------------------------------------------------------------------
   Helle Fassung. Aufbau und Bewegung folgen der Vorlage (qclay „codeba"),
   die Farbwelt ist umgedreht: die Seite steht auf Weiss, und die dunklen
   Flächen sind die Akzente statt der Grundierung.

     Grund             #ffffff, Wechselfläche #f6f6f5
     Fenster           #f3f3f2, Bühne #fbfbfa
     Dunkle Akzente    #131113 — genau vier Stellen (siehe unten)
     Schrift           #0c0a09, gedämpft rgba(12,10,9,.62)
     Rahmen            rgba(12,10,9,.11)
     Beige             #d0c9b9
     Sand (Preise)     #d8d0bc
     Mint              #81ffbd
     Rosé              #f7c8ff
     Blau (Produkt)    #2563eb
     Familien          Inter Tight (Überschriften), Inter (Fliesstext),
                       JetBrains Mono (Terminal), Orbitron (nur Wortmarke)

   Drei Regeln, die beim Ändern nicht verhandelbar sind:

   1. Dunkel ist ein Akzent, kein Grund. Genau vier Flächen sind dunkel:
      die zweite Funktionskarte, die Karte mit dem Zeiger, die dunklen
      Pillen und das Terminal. Eine fünfte und die Seite kippt zurück.
   2. Gedämpfte Schrift geht nie unter rgba(12,10,9,.60). Darunter fällt
      12- und 13-px-Text unter 4,5:1 — nachgerechnet, nicht geschätzt.
   3. Farbflächen bleiben, wo sie stehen: Beige, Sand, Mint, Rosé. Eine
      fünfte Farbe dazu und die Seite sieht aus wie ein Baukasten.

   Das ganze Bewegungsverhalten hängt an der Klasse `rv` und greift erst,
   wenn JavaScript `js` auf <html> gesetzt hat. Ohne JavaScript ist die
   Seite vollständig und nichts ist durchsichtig — das wird geprüft.
   ========================================================================== */

/* ── Schriften ─────────────────────────────────────────────────────────────
   Selbst ausgeliefert statt über Google Fonts: ein Aufruf an
   fonts.gstatic.com überträgt die IP-Adresse jeder Besucherin an einen
   Dritten, und das ist in Österreich und Deutschland bereits Gegenstand von
   Verfahren gewesen. Alle Familien stehen unter der SIL Open Font
   License 1.1. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/tight-400.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/tight-500.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/tight-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/mono-500.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/orbitron-700.woff2") format("woff2"); }

:root {
  color-scheme: light;

  --bg:        #ffffff;
  --bg-2:      #f6f6f5;
  --win:       #f3f3f2;
  --stage:     #fbfbfa;
  --card:      #ffffff;
  --card-2:    #f6f6f5;
  --dark:      #131113;
  --dark-2:    #201d20;
  --line:      rgba(12, 10, 9, .11);
  --line-2:    rgba(12, 10, 9, .18);

  --ink:       #0c0a09;
  --ink-2:     rgba(12, 10, 9, .80);
  --muted:     rgba(12, 10, 9, .62);
  --faint:     rgba(12, 10, 9, .60);

  /* Schrift auf den dunklen Akzentflächen. */
  --on-dark:   #f5f5f5;
  --on-dark-2: rgba(245, 245, 245, .80);
  --on-dark-3: rgba(245, 245, 245, .66);

  --beige:     #d0c9b9;
  --sand:      #d8d0bc;
  --mint:      #81ffbd;
  --rose:      #f7c8ff;
  --blue:      #2563eb;
  --blue-2:    #1d4ed8;

  /* Zustandsfarben. Sie kommen ausschliesslich in Produktdarstellungen vor —
     im Terminal und in den gezeichneten Tafeln, nie auf der Seitenfläche. */
  --ok:        #4ade80;
  --warn:      #fbbf24;
  --bad:       #fb7185;

  --r-sm:      8px;
  --r-btn:     10px;
  --r-card:    16px;
  --r-lg:      20px;
  --r-xl:      24px;

  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --tight: "Inter Tight", var(--sans);
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --logo:  "Orbitron", var(--tight);

  --wrap: 1280px;
  --gut:  20px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { display: block; height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--tight);
  margin: 0;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
}
h1 { font-size: clamp(34px, 6.1vw, 72px); line-height: 1.02; letter-spacing: -.028em; }
h2 { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.022em; }
h3 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; }
h4 { font-size: 19px; line-height: 1.3; }
h5 { font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-family: var(--sans); }

p { margin: 0; }
p + p { margin-top: 16px; }
em { font-style: normal; color: var(--ink); }
b, strong { font-weight: 600; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--muted); }
.small { font-size: 15px; line-height: 1.55; color: var(--muted); }
.tiny  { font-size: 13px; line-height: 1.5; color: var(--muted); }
.center { text-align: center; }

/* ── Raster ────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap.narrow { max-width: 860px; }
/* Zentrierte Seitenköpfe: eine Zeile über die volle Breite liest sich nicht. */
.wrap.center .lede { max-width: 720px; margin-left: auto; margin-right: auto; }

section { padding: 104px 0; }
section.tight { padding: 56px 0; }
section.flush { padding-top: 0; }

.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

/* ── Auszeichnung und Abschnittsköpfe ──────────────────────────────────── */

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint);
}
.eyebrow .no { font-family: var(--mono); font-weight: 500; letter-spacing: 0; color: var(--faint); }
.eyebrow.teal  { color: #14714f; }
.eyebrow.amber { color: #8a5a06; }
.eyebrow.clay  { color: #8b3f96; }
.eyebrow.slate { color: var(--faint); }

.sec-head { max-width: 780px; margin-bottom: 56px; }
.sec-head h2 { margin-top: 16px; }
.sec-head .lede { margin-top: 20px; }
.sec-head.center { margin-left: auto; margin-right: auto; }
.headnote { font-size: 19px; color: var(--faint); text-align: right; flex: none; }

/* ── Schaltflächen ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans);
  font-size: 15px; font-weight: 500; line-height: 1;
  padding: 0 20px; height: 44px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn-primary { background: var(--ink); color: #ffffff; }
.btn-primary:hover { background: #2b2725; }
.btn-ghost { background: rgba(12,10,9,.06); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: rgba(12,10,9,.10); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { color: var(--ink); background: rgba(12,10,9,.05); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-2); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2b2725; }
.btn-outline-dark { background: transparent; color: var(--ink); border-color: rgba(12,10,9,.45); }
.btn-outline-dark:hover { background: rgba(12,10,9,.07); }
.btn-sm { height: 36px; font-size: 14px; padding: 0 16px; border-radius: var(--r-sm); }
.btn-lg { height: 52px; font-size: 16px; padding: 0 26px; border-radius: 12px; }

.arrowlink { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink); }
.arrowlink .arw { transition: transform .16s ease; }
.arrowlink:hover .arw { transform: translateX(3px); }

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */

.topbar { position: sticky; top: 0; z-index: 90; background: var(--bg); }
.topbar.scrolled { border-bottom: 1px solid var(--line); background: rgba(255,255,255,.86); backdrop-filter: blur(12px); }
.topbar-in { display: flex; align-items: center; gap: 40px; height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-tile {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--dark); color: #ffffff;
  display: grid; place-items: center;
  font-family: var(--logo); font-weight: 700; font-size: 19px; line-height: 1;
}
.brand-text { font-family: var(--logo); font-weight: 700; font-size: 17px; letter-spacing: .04em; color: var(--ink); }
.brand-text .suffix { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .1em; color: var(--faint); margin-left: 7px; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: 15px; color: var(--muted); transition: color .16s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

.topbar-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.navtoggle { display: none; margin-left: auto; width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.navtoggle span, .navtoggle::before, .navtoggle::after {
  display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px auto; content: ""; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.topbar.open .navtoggle::before { transform: translateY(7px) rotate(45deg); }
.topbar.open .navtoggle span { opacity: 0; }
.topbar.open .navtoggle::after { transform: translateY(-7px) rotate(-45deg); }

/* ── Fusszeile ─────────────────────────────────────────────────────────── */

footer.site { border-top: 1px solid var(--line-2); padding: 72px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
footer.site h5 { margin-bottom: 16px; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
footer.site ul a { font-size: 15px; color: var(--ink-2); }
footer.site ul a:hover { color: var(--ink); }
.foot-base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ══ Fenster ═══════════════════════════════════════════════════════════════
   Die Bühne der Vorlage: ein Fenster mit Titelleiste, in dem das Produkt
   steht. Es kommt zweimal vor — einmal gross über der ganzen Startseite,
   einmal klein neben „Prüfen statt hoffen". */

.mac {
  position: relative;
  margin: 10px var(--gut) 0;
  background: var(--win);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.mac-bar { display: flex; align-items: center; gap: 16px; padding: 15px 22px; }
.mac-dots { display: flex; gap: 7px; flex: 1 1 0; }
.mac-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(12,10,9,.14); display: block; }
.mac-tools { display: flex; align-items: center; gap: 10px; }
.tool {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: rgba(12,10,9,.055); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted);
}
.tool svg { width: 18px; height: 18px; }
.mac-right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.avatars { display: flex; }
.avatars span {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--win);
}
.avatars span + span { margin-left: -7px; }
.avatars .a1 { background: var(--beige); }
.avatars .a2 { background: var(--rose); }

/* Die Bühnenfläche im Fenster. Der Lichtschein oben ist auf Weiss sehr
   zurückhaltend — auf hellem Grund wird aus „weich" schnell „schmutzig". */
.stage {
  position: relative; overflow: hidden;
  margin: 0 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 72px 24px 0;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(129,255,189,.20), transparent 55%),
    radial-gradient(80% 60% at 84% 2%, rgba(247,200,255,.20), transparent 60%),
    var(--stage);
}
.stage > * { position: relative; z-index: 2; }
.stage h1 { max-width: 960px; margin: 0 auto 26px; }
.stage .lede { max-width: 640px; margin: 0 auto 28px; font-size: clamp(17px, 1.7vw, 22px); }

/* Die Suchleiste ahmt die Omni-Leiste der Anwendung nach, samt ihrem
   farbigen Rand. Sie ist eine Abbildung, kein Formular — deshalb `readonly`
   und kein umschliessendes <form>. */
.omni {
  position: relative; width: 572px; max-width: 100%;
  margin: 0 auto 30px; height: 52px;
  border-radius: 14px; padding: 1.4px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6, #fb923c, #4ade80, #38bdf8);
}
.omni-in {
  height: 100%; border-radius: 12.6px; background: #ffffff;
  display: flex; align-items: center; gap: 12px; padding: 0 8px 0 16px;
}
.omni svg { width: 19px; height: 19px; color: var(--faint); flex: none; }
.omni input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  background: transparent; border: 0; outline: 0;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
}
.omni input::placeholder { color: var(--muted); }
.omni .caret { width: 1.5px; height: 18px; background: var(--ink); flex: none; opacity: 0; }
.omni.typing .caret { animation: blink 1.05s steps(1, end) infinite; }
@keyframes blink { 0%, 49% { opacity: .9; } 50%, 100% { opacity: 0; } }

/* Der Bildschirmfoto-Rahmen. Die Anwendung ist weiss wie die Seite — ohne
   Rahmen und Schatten schwimmt das Bild in der Fläche. */
.shotframe {
  width: 100%; max-width: 1136px; margin: 0 auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border: 1px solid var(--line-2);
  border-bottom: 0; overflow: hidden;
  background: #fff;
  box-shadow: 0 -2px 40px rgba(12,10,9,.09);
}
.shotframe img { width: 100%; }
.shotframe.full { border-radius: var(--r-lg); border-bottom: 1px solid var(--line-2); }

/* Der Verlauf, mit dem das Bildschirmfoto in die Bühnenfläche ausläuft. Er
   endet auf deren Farbe — auf reinem Weiss gäbe es unten eine sichtbare
   Kante. */
.fadeout { position: absolute; left: 0; bottom: 0; width: 100%; height: 190px; pointer-events: none; z-index: 3;
  background: linear-gradient(to top, var(--stage) 14%, rgba(251,251,250,.88) 46%, transparent); }

.proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 0 auto 34px; }
.proof-item { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--muted); }
.proof-item svg { width: 15px; height: 15px; color: #16794f; flex: none; margin-top: 4px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px 7px 12px; margin-bottom: 26px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.7);
  font-size: 13px; color: var(--ink-2);
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #16794f; flex: none; }
.hero-badge b { color: var(--ink); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-note { margin-top: 16px; }

/* ══ Karten ═══════════════════════════════════════════════════════════════ */

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; }
.card h3 { font-size: 21px; letter-spacing: -.01em; }
.card h4 { font-size: 18px; }
.card-tint { background: var(--card-2); }
.tint-teal  { box-shadow: inset 0 2px 0 rgba(20,113,79,.35); }
.tint-amber { box-shadow: inset 0 2px 0 rgba(138,90,6,.35); }
.tint-slate { box-shadow: inset 0 2px 0 rgba(12,10,9,.22); }

.chip { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 18px; }
.chip svg { width: 21px; height: 21px; }
.chip-teal  { background: rgba(129,255,189,.30); color: #0f5c3e; }
.chip-amber { background: rgba(251,191,36,.24);  color: #7c5106; }
.chip-clay  { background: rgba(247,200,255,.42); color: #7c3487; }
.chip-slate { background: rgba(12,10,9,.07);     color: var(--ink-2); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.pill-teal  { background: rgba(129,255,189,.34); color: #0f5c3e; }
.pill-amber { background: rgba(251,191,36,.26);  color: #7c5106; }
.pill-slate { background: rgba(12,10,9,.07);     color: var(--ink-2); }

.ticklist { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.ticklist li { display: flex; gap: 11px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ticklist li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: #16794f; }

.band { border: 1px solid var(--line); border-radius: var(--r-card); padding: 34px 30px; background: var(--card-2); }
.band .n { font-family: var(--tight); font-size: 34px; font-weight: 500; letter-spacing: -.02em; }
.band .t { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* ══ Funktionszeilen (Unterseiten) ════════════════════════════════════════ */

.rowfeat { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center; padding: 72px 0; border-top: 1px solid var(--line); }
.rowfeat:first-of-type { border-top: 0; padding-top: 24px; }
.rowfeat.flip > div:first-child { order: 2; }
.rowfeat h3 { margin-top: 12px; }
.rf-media { min-width: 0; }
.rf-media figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.rf-media figure { margin: 0; }
.rf-media.rf-shot img { width: 100%; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; }
.shot-panel { border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; background: var(--card-2); }
.shot-panel h5 { margin-bottom: 16px; }
.shot-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.shot-line:first-of-type { border-top: 0; }
.shot { text-align: left; }

/* ══ Abschnittsleiste auf /funktionen ═════════════════════════════════════ */

.secnav { position: sticky; top: 76px; z-index: 60; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.secnav-in { display: flex; gap: 4px; overflow-x: auto; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); scrollbar-width: none; }
.secnav-in::-webkit-scrollbar { display: none; }
.secnav a { display: inline-flex; align-items: center; gap: 8px; padding: 15px 12px; font-size: 14px; white-space: nowrap; color: var(--muted); border-bottom: 2px solid transparent; transition: color .16s ease; }
.secnav a .no { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.secnav a:hover { color: var(--ink); }
.secnav a.on { color: var(--ink); border-bottom-color: var(--ink); }
:target { scroll-margin-top: 140px; }

/* ══ Preise ═══════════════════════════════════════════════════════════════ */

.toggle-wrap { display: flex; justify-content: center; }
.toggle { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); }
.toggle button { border: 0; cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: var(--r-sm); background: transparent; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.toggle .save { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: rgba(12,10,9,.08); color: var(--ink); }
.toggle button[aria-pressed="true"] .save { background: var(--mint); color: #06331f; }

.pricecard { position: relative; max-width: 470px; margin: 0 auto; padding: 34px; }
.ribbon { position: absolute; top: -11px; left: 34px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; background: var(--mint); color: #06331f; }
.amount { display: flex; align-items: baseline; gap: 10px; margin-top: 26px; }
.amount .num { font-family: var(--tight); font-size: 52px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.amount .per { font-size: 16px; color: var(--muted); }

/* Der Preisblock in Sand — die einzige grosse getönte Fläche der Seite. */
.pricepanel { background: var(--sand); border-radius: var(--r-xl); padding: 76px 56px; color: var(--ink); }
.pricepanel .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 60px; }
.plan .amount .per { color: rgba(12,10,9,.68); }
.plan .plan-lede { font-size: 20px; line-height: 1.4; color: rgba(12,10,9,.86); margin-top: 20px; }
.plan .rule { border: 0; border-top: 1px solid rgba(12,10,9,.16); margin: 30px 0; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.plan li { display: flex; align-items: center; gap: 18px; font-size: 17px; }
.plan li .rd { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--sand); display: grid; place-items: center; flex: none; }
.plan li .rd svg { width: 14px; height: 14px; }
.plan li.dim { color: rgba(12,10,9,.5); }
.plan li.dim .rd { opacity: .3; }
.plan .btn { width: 100%; margin-top: 36px; }
.plan .plan-note { margin-top: 14px; font-size: 13px; color: rgba(12,10,9,.66); text-align: center; }
.plan .tagline { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(12,10,9,.64); }

.payrow { margin-top: 72px; padding-top: 44px; border-top: 1px solid rgba(12,10,9,.14); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 40px; }
.payrow .lbl { font-family: var(--tight); font-size: 28px; font-weight: 500; }
.paypill { display: flex; align-items: center; gap: 26px; padding: 10px 24px; border-radius: 12px; background: rgba(255,255,255,.55); }
.paypill span { font-size: 15px; font-weight: 500; }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
.tablewrap table { width: 100%; border-collapse: collapse; min-width: 520px; }
.tablewrap th, .tablewrap td { text-align: left; padding: 15px 20px; font-size: 15px; border-top: 1px solid var(--line); }
.tablewrap thead th { border-top: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.tablewrap td.grp { font-weight: 500; color: var(--ink); width: 210px; }
.tablewrap td { color: var(--ink-2); }

/* ══ Fragen ═══════════════════════════════════════════════════════════════ */

.faq { border-top: 1px solid var(--line); }
.faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 44px 24px 0; position: relative; font-family: var(--tight); font-size: 19px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .18s ease; }
.faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .body { padding-bottom: 26px; max-width: 760px; }
.faq .body p { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ══ Abschluss und Rechtstexte ════════════════════════════════════════════ */

.finale { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 76px 40px; text-align: center;
  background: radial-gradient(90% 130% at 50% 0%, rgba(129,255,189,.16), transparent 62%), var(--card-2); }
.finale p { max-width: 620px; margin: 20px auto 0; font-size: 18px; color: var(--muted); }

.todo { border: 1px dashed #8a5a06; border-radius: var(--r-card); padding: 20px 22px; background: rgba(251,191,36,.12); margin-bottom: 32px; }
.todo p { font-size: 14px; color: #6b4506; }
/* Platzhalter in Impressum und Datenschutz. Sie sollen auffallen: solange
   einer sichtbar ist, sind die Seiten nicht rechtsgültig. */
.ph { background: rgba(251,191,36,.32); color: #6b4506; border-radius: 4px; padding: 1px 6px; font-size: .95em; }
.legal h2 { font-size: 26px; margin-top: 48px; }
.legal h3 { font-size: 21px; margin-top: 44px; }
.legal p, .legal li { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin-top: 12px; }
.legal ul { padding-left: 20px; }

/* ══ Startseite: die drei grossen Funktionskarten ═════════════════════════
   Hell, dunkel, beige. Die dunkle in der Mitte ist einer der vier dunklen
   Akzente der Seite und hält die drei Karten zusammen — drei helle
   nebeneinander hätten keinen Rhythmus. */

.fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.fcard {
  position: relative; height: 520px; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--line);
  padding: 46px 26px 0; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.fcard h3 { font-size: 32px; line-height: 1.14; max-width: 340px; }
.fcard .fc-p { margin-top: 20px; max-width: 330px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.fcard-a { background: radial-gradient(80% 60% at 31% -7%, rgba(129,255,189,.20), transparent 70%), var(--card-2); }
.fcard-b { background: var(--dark); border-color: transparent; }
.fcard-b h3 { color: var(--on-dark); }
.fcard-b .fc-p { color: var(--on-dark-3); }
.fcard-c { background: var(--beige); border-color: rgba(12,10,9,.14); text-align: left; align-items: stretch; padding: 26px 26px 0; }
.fcard-c .fc-p { max-width: none; }

.fc-list { position: absolute; left: 20px; right: 20px; bottom: 0; padding: 30px 12px 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-card) var(--r-card) 0 0; background: rgba(255,255,255,.72); display: grid; gap: 4px; }
.li-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; text-align: left; }
.li-row .ic { width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; background: rgba(12,10,9,.05); border: 1px solid var(--line); color: var(--ink-2); flex: none; }
.li-row .ic svg { width: 16px; height: 16px; }
.li-row span { font-size: 14px; color: var(--muted); }
.li-row.on { background: linear-gradient(90deg, rgba(12,10,9,.07), rgba(12,10,9,.01)); border-color: var(--line); }
.li-row.on .ic { background: var(--ink); border-color: transparent; color: #fff; }
.li-row.on span { color: var(--ink); }

.fc-tags { display: flex; justify-content: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.fc-tags span { font-size: 12px; padding: 5px 9px; border-radius: 6px; background: rgba(245,245,245,.12); color: var(--on-dark-2); }

.fc-shot { position: absolute; bottom: 0; left: 34px; right: 34px; height: 232px; overflow: hidden; border-radius: 14px 14px 0 0; border: 1px solid rgba(245,245,245,.18); border-bottom: 0; background: #fff; }
.fc-shot img { width: 100%; }
.fc-flag { position: absolute; bottom: 196px; right: 16px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 500; padding: 7px 13px; border-radius: var(--r-sm); box-shadow: 0 8px 24px rgba(0,0,0,.35); }

/* Das Balkendiagramm der beigen Karte. Jeder Balken hat eine feste Höhe;
   animiert wird nur, wie er erscheint — die Säule fährt hoch, dann schiebt
   sich eine Blende nach oben weg und legt das Streifenmuster frei. Die
   Höhen entsprechen dem Diagramm „Umsatz nach Monat". */
.bars { position: absolute; left: 0; bottom: 86px; width: 100%; height: 190px; padding: 0 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 9px; overflow: hidden; }
.bar { position: relative; width: 100%; height: 100%; display: flex; align-items: flex-end; overflow: hidden; }
.bar-in { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .42s cubic-bezier(.22,1,.36,1); }
.bar-in .cap { display: block; width: 100%; height: 6px; background: var(--ink); flex: none; }
/* Die Blende liegt IN der Säule, nicht daneben: nur so schneidet sie das
   `overflow: hidden` beim Hochfahren ab. Eine Ebene höher stand ein
   schwarzer Block über dem Diagramm. */
.bar-in .body { display: block; position: relative; flex: 1 1 auto; overflow: hidden; }
.bar-in .body::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(12,10,9,.07) 0, rgba(12,10,9,.07) 8px, rgba(12,10,9,.15) 8px, rgba(12,10,9,.15) 16px);
  background-size: 22.63px 22.63px;
}
.bar-in .blind { display: block; position: absolute; inset: 0; background: var(--ink); transition: transform .42s cubic-bezier(.22,1,.36,1) .4s; }
.js .bars.in .bar-in { transform: translateY(0); }
.js .bars.in .blind { transform: translateY(-100%); }
.bars-scroll .body::before { animation: stripes 1.5s linear infinite; }
@keyframes stripes { from { background-position: 0 0; } to { background-position: 22.63px 0; } }

.fc-foot { position: absolute; left: 0; bottom: 0; width: 100%; height: 86px; padding: 0 26px 22px; display: flex; align-items: flex-end; gap: 10px; }
.fc-foot .big { font-family: var(--tight); font-size: 38px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.fc-foot .sub { font-size: 14px; color: rgba(12,10,9,.72); padding-bottom: 3px; }
.fc-dots { position: absolute; top: 30px; right: 26px; display: flex; gap: 4px; }
.fc-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(12,10,9,.4); }

/* ══ Kennzahlen ═══════════════════════════════════════════════════════════ */

.stats { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.stat { text-align: center; flex: 1 1 200px; }
.stat .v { font-family: var(--tight); font-size: clamp(44px, 5vw, 64px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.stat p { margin: 16px auto 0; font-size: 20px; line-height: 1.35; color: var(--muted); max-width: 260px; }

.mp { position: relative; overflow: hidden; flex: 1 1 480px; max-width: 570px; background: var(--dark); border-radius: var(--r-xl); padding: 40px; }
.mp p { font-family: var(--tight); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.28; color: var(--on-dark); }

/* Die Auszeichnung, die von links nach rechts weiss unterlegt wird und den
   Text dabei von hell auf dunkel umschlägt. Zwei Ebenen: der helle Text
   liegt unten, der dunkle darüber und wird per clip-path im selben Takt wie
   der Balken freigelegt. */
.hl { position: relative; display: inline-block; padding: 2px 8px; white-space: nowrap; }
.hl .sweep { position: absolute; inset: 0; background: #fff; border-radius: 3px; transform: scaleX(0); transform-origin: left center; }
.hl .base { position: relative; font-weight: 500; }
.hl .over { position: absolute; inset: 0; padding: 2px 8px; font-weight: 500; color: var(--dark); clip-path: inset(0 100% 0 0); }
.js .mp.in .hl .sweep { transition: transform .91s linear 1.55s; transform: scaleX(1); }
.js .mp.in .hl .over  { transition: clip-path .91s linear 1.55s; clip-path: inset(0 0 0 0); }

.cursor { position: absolute; top: 40%; left: 55%; pointer-events: none; transform: translate(115px, 40px); }
.js .cursor { opacity: 0; transform: translate(100px, 100px); }
.cursor svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.cursor .tag { position: absolute; top: 21px; left: 17px; white-space: nowrap; background: var(--blue); color: #fff; font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 0 6px 6px 6px; }
.js .mp.in .cursor { animation: cursor-path 2.6s cubic-bezier(.42,0,.58,1) .9s forwards; }
@keyframes cursor-path {
  0%   { opacity: 0; transform: translate(100px, 100px); }
  25%  { opacity: 1; transform: translate(-125px, -10px); }
  60%  { opacity: 1; transform: translate(35px, -10px); }
  85%  { opacity: 1; transform: translate(115px, 40px); }
  100% { opacity: 1; transform: translate(115px, 40px); }
}

/* ══ Zweispalter mit Terminal ═════════════════════════════════════════════ */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.split .col-l { display: flex; flex-direction: column; gap: 30px; }
.split .col-l p { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.4; color: var(--muted); max-width: 500px; }

.win { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--win); }
.win-tab { position: relative; margin: 0 20px 20px; border-radius: var(--r-card); overflow: hidden; background: #fff; border: 1px solid var(--line); }
.win-tab-in { position: relative; padding: 32px; }
.win-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.win-head h3 { font-size: clamp(26px, 2.4vw, 38px); max-width: 420px; }
.copybtn { width: 40px; height: 40px; border-radius: var(--r-sm); background: rgba(12,10,9,.06); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); flex: none; margin-top: 6px; cursor: default; }
.copybtn svg { width: 16px; height: 16px; }

/* Der Prüfbericht. Dunkel — ein Terminal ist dunkel, und es ist der vierte
   und letzte dunkle Akzent der Seite. */
.term {
  margin: 28px 0 0; padding: 22px 24px;
  border-radius: 12px; background: var(--dark);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.85;
  color: var(--on-dark-2); white-space: pre-wrap; min-height: 268px;
}
.term .ok  { color: var(--ok); }
.term .bad { color: var(--bad); }
.term .tcaret { display: inline-block; width: .55ch; height: 1.05em; background: rgba(245,245,245,.6); vertical-align: -2px; }
.js .term.typing .tcaret { animation: blink 1.05s steps(1, end) infinite; }

/* ══ Pillen ═══════════════════════════════════════════════════════════════ */

.pillrows { display: flex; flex-direction: column; gap: 18px; }
.pillrow { display: flex; gap: 16px; }
.bigpill { flex: 1 1 0; min-width: 0; height: 80px; display: flex; align-items: center; gap: 16px; padding: 0 30px; border-radius: var(--r-card); transition: transform .18s ease; }
.bigpill:hover { transform: scale(1.02); }
.bigpill .ic { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.bigpill .ic svg { width: 19px; height: 19px; }
.bigpill .lbl { font-family: var(--tight); font-size: clamp(18px, 1.7vw, 24px); font-weight: 500; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-dark  { background: var(--dark); color: var(--on-dark); }
.bp-dark .ic { background: rgba(245,245,245,.12); color: var(--on-dark); }
.bp-beige { background: var(--beige); color: var(--ink); }
.bp-rose  { background: var(--rose);  color: var(--ink); }
.bp-mint  { background: var(--mint);  color: #06331f; }
.bp-beige .ic, .bp-rose .ic, .bp-mint .ic { background: rgba(12,10,9,.08); color: var(--ink); }

/* ══ Impulse ══════════════════════════════════════════════════════════════ */

.newsgrid { display: grid; grid-template-columns: 35fr 65fr; gap: 64px; }
.newscard { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-2); background: #fff; box-shadow: 0 4px 30px rgba(12,10,9,.07); }
.newscol { position: relative; padding-bottom: 72px; }
.newscol .hdr { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.newscol .hdr h3 { font-size: clamp(26px, 2.4vw, 36px); }
.newscol p { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: var(--muted); }
.newscol p + p { margin-top: 22px; }
.newscol p.last { color: var(--faint); }
.newsfade { position: absolute; left: 0; bottom: 0; width: 100%; height: 72px; pointer-events: none; background: linear-gradient(to top, var(--bg), transparent); }

/* ══ Bewegung ═════════════════════════════════════════════════════════════
   Alles hängt an `.rv`. Ohne die Klasse `js` auf <html> greift keine einzige
   Regel hier — die Seite ist dann vollständig sichtbar und statisch. Das ist
   der Grund, warum hier Übergänge und keine Keyframes stehen: ein Übergang,
   der nicht ausgelöst wird, hinterlässt kein durchsichtiges Element. */

.js .rv { opacity: 0; transition: opacity .72s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.js .rv-up   { transform: translateY(22px); }
.js .rv-word { transform: translateY(18px); }
.js .rv-pop  { transform: scale(.72); }
.js .rv.in { opacity: 1; transform: none; }

.js .rv-clip { clip-path: inset(0 100% 0 0); opacity: 1; transition: clip-path .9s cubic-bezier(.22,1,.36,1); }
.js .rv-clip.in { clip-path: inset(0 0 0 0); }

.w { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv-clip { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .js .mp.in .hl .sweep { transition: none; transform: scaleX(1); }
  .js .mp.in .hl .over  { transition: none; clip-path: inset(0 0 0 0); }
  .js .cursor, .js .mp.in .cursor { animation: none; opacity: 1; transform: translate(115px, 40px); }
  .js .bars .bar-in, .js .bars .blind { transition: none; }
  .js .bars .bar-in { transform: none; }
  .js .bars .blind { transform: translateY(-100%); }
  .bars-scroll .body::before { animation: none; }
  .omni.typing .caret, .js .term.typing .tcaret { animation: none; }
}

/* ══ Schmale Fenster ══════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .fcards { grid-template-columns: 1fr; }
  .fcard { height: auto; min-height: 470px; padding-bottom: 300px; }
  .split, .newsgrid { grid-template-columns: 1fr; gap: 40px; }
  .rowfeat { grid-template-columns: 1fr; gap: 34px; }
  .rowfeat.flip > div:first-child { order: 0; }
  .pricepanel .plans { grid-template-columns: 1fr; gap: 48px; }
  .pricepanel { padding: 52px 28px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --gut: 16px; }
  section { padding: 72px 0; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3, .g2 { grid-template-columns: 1fr; }
  .pillrow { flex-direction: column; }
  .stats { flex-direction: column; align-items: stretch; gap: 40px; }
  .stat p { max-width: none; }
  /* `flex: 1 1 480px` wirkt in einer Spalte als Höhe von 480 px — die Karte
     stand auf schmalen Fenstern zur Hälfte leer da. */
  .mp { flex: 0 0 auto; max-width: none; padding: 30px; }
  .cursor { display: none; }
  .mac-tools, .mac-bar .pill { display: none; }
  .headnote { text-align: left; }
  .stage { padding: 44px 16px 0; margin: 0 10px 10px; }
  .win-tab-in { padding: 22px; }
  .term { font-size: 12px; padding: 18px; min-height: 300px; }
  .newscol { padding-bottom: 40px; }
  .newsfade { display: none; }

  /* Auf schmalen Fenstern klappt die Navigation unter die Kopfzeile. */
  .nav, .topbar-cta { display: none; }
  .navtoggle { display: block; }
  .topbar.open { border-bottom: 1px solid var(--line); }
  .topbar.open .topbar-in { flex-wrap: wrap; height: auto; padding-bottom: 18px; }
  .topbar.open .nav { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; order: 3; }
  .topbar.open .nav a { font-size: 18px; padding: 11px 0; }
  .topbar.open .topbar-cta { display: flex; width: 100%; order: 4; margin: 12px 0 0; }
  .topbar.open .topbar-cta .btn { flex: 1 1 0; }
}

@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .g4 { grid-template-columns: 1fr; }
  .fcard { padding-left: 18px; padding-right: 18px; }
  .payrow { gap: 22px; }
  .paypill { gap: 16px; padding: 10px 16px; }
}