/* ============================================================================
   Omnia Landing (omnia.blue) – heller Grund, dunkle Akzentbaender (.tone-dark).
   Alle Farben laufen ueber die Tokens unten; .tone-dark setzt sie fuer ein
   Band auf Dunkel zurueck (Lumi, Abschluss, Banner mit KI-Bildern). Das
   Produkt zeigen echte Screenshots aus dem Demomandanten
   (assets/images/module/, erzeugt von scripts/screenshots).
   Unterseiten (Neuigkeiten, Roadmap, Passkey, Recht) nutzen dieselben Tokens.
   ========================================================================== */

:root {
  --font: 'Lexend Deca', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-raised: #edf2f8;
  --chrome: #ffffff;
  --panel: rgba(255, 255, 255, .85);

  /* Markenfarbe Cyan, fuer Text auf Hell abgedunkelt (Kontrast > 4.5:1). */
  --accent: #0a74b0;
  --accent-hover: #075a8a;
  --accent-soft: rgba(10, 116, 176, .09);
  --accent-glow: rgba(10, 116, 176, .25);
  --on-accent: #ffffff;

  --text: #0d1b2a;
  --body: #26384c;
  --muted: #475a6f;
  --dim: #53667b;
  --dimmer: #62748a;
  --meta: #66778c;
  --meta-dark: #6f7f93;
  --nav-fg: #34465b;
  --footer-fg: #53667b;

  --hairline: rgba(15, 35, 60, .08);
  --border-card: rgba(15, 35, 60, .1);
  --border-soft: rgba(15, 35, 60, .1);
  --border-strong: rgba(15, 35, 60, .14);
  --border-btn: rgba(15, 35, 60, .2);

  --shadow-card: 0 1px 2px rgba(15, 35, 60, .05), 0 12px 32px -18px rgba(15, 35, 60, .22);
  --shadow-lift: 0 2px 4px rgba(15, 35, 60, .06), 0 24px 48px -22px rgba(15, 35, 60, .3);

  --maxw: 1240px;
  --gutter: clamp(18px, 4vw, 40px);
  --nav-h: 72px;
  --nav-h-scrolled: 60px;

  --radius: 10px;
  --radius-lg: 16px;
  --radius-full: 50%;
  --radius-pill: 9999px;
}

/* Dunkles Band: dieselben Tokens, dunkle Werte. */
.tone-dark {
  --bg: #0b111b;
  --surface: #101827;
  --surface-raised: #131f33;
  --chrome: #131c2a;
  --panel: rgba(19, 28, 44, .7);
  --accent: #4dd0ff;
  --accent-hover: #9fe4ff;
  --accent-soft: rgba(77, 208, 255, .1);
  --accent-glow: rgba(77, 208, 255, .4);
  --on-accent: #04070d;
  --text: #ffffff;
  --body: #dbe4ee;
  --muted: #a9b9cc;
  --dim: #98a9be;
  --dimmer: #8495aa;
  --meta: #7889a0;
  --meta-dark: #6b7c92;
  --hairline: rgba(148, 163, 184, .12);
  --border-card: rgba(148, 163, 184, .14);
  --border-soft: rgba(148, 163, 184, .16);
  --border-strong: rgba(148, 163, 184, .18);
  --border-btn: rgba(148, 163, 184, .3);
  --shadow-card: 0 30px 70px -40px rgba(0, 0, 0, .9);
  background: var(--bg);
  color: var(--body);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--body);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; display: block; }
p { text-wrap: pretty; }
.hidden { display: none !important; }

@keyframes omGlow { 0%, 100% { opacity: .35 } 50% { opacity: .85 } }
@keyframes omBlink { 50% { opacity: 0; } }
@keyframes omDrift {
  0% { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.06) translate3d(-1.2%, -1%, 0); }
}

/* ---------------------------------------------------------------- Bausteine */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  display: block;
  font: 600 .74rem/1.2 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--dot { display: flex; align-items: center; gap: 10px; }
.eyebrow--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--accent);
  flex: 0 0 auto;
}

h1, h2, h3 { color: var(--text); font-weight: 700; }

.h2 {
  font-size: clamp(1.6rem, 4.2vw, 2.3rem);
  letter-spacing: -.03em;
  line-height: 1.15;
  text-wrap: balance;
}
.h3 { font-size: 1.2rem; letter-spacing: -.02em; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 .95rem/1 var(--font);
  border-radius: var(--radius);
  padding: 15px 24px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s, border-color .25s, color .25s, box-shadow .25s, transform .25s;
}
.btn--full {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 24px -12px var(--accent-glow);
}
.btn--full:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); }
.btn--plain { border-color: var(--border-btn); color: var(--text); background: var(--surface); }
.btn--plain:hover { border-color: var(--accent); color: var(--accent); }
.tone-dark .btn--plain { background: transparent; color: var(--body); }
.tone-dark .btn--plain:hover { color: var(--text); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* «Mehr zu …»: Link auf eine Bereichsseite. */
.mehr {
  display: inline-flex;
  gap: 6px;
  margin-top: 18px;
  font: 600 .9rem/1.4 var(--font);
  color: var(--accent);
}
.mehr:hover { color: var(--accent-hover); }
.mehr--inline { margin-top: 0; }

/* -------------------------------------------------------------------- Kopf */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--nav-h);
  padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  transition: height .25s ease, box-shadow .25s ease;
}
.nav.is-scrolled { height: var(--nav-h-scrolled); box-shadow: 0 8px 24px -18px rgba(15, 35, 60, .35); }
.nav__left { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); min-width: 0; }
.nav__logo img { height: 28px; width: auto; transition: height .25s ease; }
.nav.is-scrolled .nav__logo img { height: 24px; }
.nav__links { display: flex; align-items: center; gap: clamp(4px, 1vw, 10px); }
.nav__links > a, .nav__menu-btn {
  font: 500 .92rem/1 var(--font);
  color: var(--nav-fg);
  padding: 10px 12px;
  border-radius: var(--radius);
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__links > a:hover, .nav__menu-btn:hover, .nav__menu.is-open .nav__menu-btn { color: var(--text); background: var(--surface-raised); }
.nav__links > a[aria-current="page"] { color: var(--accent); }
.nav__menu-btn svg { transition: transform .2s; }
.nav__menu.is-open .nav__menu-btn svg { transform: rotate(180deg); }

/* Ausklappmenue «Lösungen» */
.nav__menu { position: relative; }
.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  width: min(640px, calc(100vw - 32px));
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.nav__menu.is-open .nav__panel { display: grid; }
.nav__item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text);
}
.nav__item:hover, .nav__item[aria-current="page"] { background: var(--accent-soft); color: var(--text); }
.nav__item-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
}
.nav__item-name { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.nav__item-text { font-size: .8rem; line-height: 1.4; color: var(--dim); }

.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__login { font: 500 .92rem/1 var(--font); color: var(--nav-fg); padding: 10px 12px; border-radius: var(--radius); }
.nav__login:hover { color: var(--text); background: var(--surface-raised); }
.nav__cta {
  font: 600 .9rem/1 var(--font);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  padding: 12px 18px;
  white-space: nowrap;
  transition: background-color .25s ease;
}
.nav__cta:hover { background: var(--accent-hover); color: var(--on-accent); }
.nav__cta--off { opacity: .55; cursor: not-allowed; pointer-events: none; }
.nav__cta-short { display: none; }

.nav__burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-btn);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.nav__drawer {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0; bottom: 0;
  z-index: 29;
  display: none;
  flex-direction: column;
  padding: 8px clamp(16px, 4vw, 40px) 28px;
  background: var(--surface);
  overflow-y: auto;
}
.nav.is-scrolled + .nav__drawer { top: var(--nav-h-scrolled); }
.nav__drawer.is-open { display: flex; }
.nav__drawer-title {
  margin: 18px 0 6px;
  font: 600 .72rem/1 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--meta);
}
.nav__drawer a:not(.btn) {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 1rem/1.2 var(--font);
  color: var(--text);
  padding: 13px 2px;
  border-bottom: 1px solid var(--hairline);
}
.nav__drawer a:not(.btn) svg { color: var(--accent); flex: 0 0 auto; }
.nav__drawer .btn { margin-top: 22px; }

/* -------------------------------------------------------------------- Hero */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 85% 0%, rgba(77, 208, 255, .16), transparent 70%),
    radial-gradient(50% 50% at 0% 20%, rgba(10, 116, 176, .07), transparent 70%),
    var(--bg);
}
.hero__glow, .hero__grid { display: none; }
.hero__inner { position: relative; z-index: 3; padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 84px)); }

.hero__eyebrow { margin-bottom: 20px; }
.hero h1 {
  font-size: clamp(2.1rem, 5.8vw, 3.5rem);
  letter-spacing: -.04em;
  line-height: 1.08;
  max-width: 22ch;
  margin-bottom: 20px;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--muted);
  max-width: 58ch;
  margin-bottom: 30px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-bottom: 26px; }
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font: 500 .88rem/1.5 var(--font);
  color: var(--body);
  list-style: none;
}
.hero__proof li, .hero__proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero__proof svg { color: #16a34a; flex: 0 0 auto; }

/* Das Bild laeuft unten aus dem Bildschirm - es zeigt echtes Produkt und
   verraet gleichzeitig, dass die Seite weitergeht. */
.hero__shot {
  position: relative;
  z-index: 3;
  max-width: var(--maxw);
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding: 0 var(--gutter);
}
.hero__frame {
  border: 1px solid var(--border-strong);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom: 0;
  overflow: hidden;
  background: #131c2a;
  box-shadow: 0 -8px 60px -24px rgba(10, 116, 176, .35), 0 30px 80px -40px rgba(15, 35, 60, .5);
}
.hero__chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.hero__chrome i {
  width: 9px; height: 9px;
  border-radius: var(--radius-full);
  background: rgba(148, 163, 184, .3);
  flex: 0 0 auto;
}
.hero__chrome em {
  margin-left: 12px;
  font: 500 .74rem/1 var(--mono);
  font-style: normal;
  color: #8ea0b6;
}
.hero__frame img { width: 100%; height: auto; }

/* ----------------------------------------------------------- Abschnitte */

.band { background: var(--bg); }
.band--white { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.band--raised { background: var(--surface-raised); }

.section { padding-top: clamp(64px, 9vw, 104px); padding-bottom: clamp(64px, 9vw, 104px); }
.section--tight { padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(48px, 7vw, 80px); }
.section__intro { max-width: 64ch; margin-bottom: clamp(28px, 4vw, 44px); }
.section__intro--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__intro .eyebrow { margin-bottom: 14px; }
.section__intro h2 { margin-bottom: 14px; }
.section__intro p { font-size: 1.08rem; color: var(--muted); }
.section__split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: 32px;
}
.section__split p { color: var(--dim); max-width: 42ch; font-size: .95rem; }

/* ----------------------------------------------- Loesungen (Kacheln) */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--body);
  box-shadow: var(--shadow-card);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgba(10, 116, 176, .35); color: var(--body); }
.tile__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.tile h3 { font-size: 1.1rem; letter-spacing: -.015em; }
.tile p { font-size: .94rem; line-height: 1.55; color: var(--dim); flex: 1 1 auto; }
.tile__more { font-weight: 600; font-size: .88rem; color: var(--accent); }

/* ------------------------------------------------ Fuer wen (Bilder) */

.personas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}
.persona {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
  color: var(--body);
  transition: transform .25s, box-shadow .25s;
}
.persona:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); color: var(--body); }
.persona img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.persona__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1 1 auto; }
.persona h3 { font-size: 1.1rem; }
.persona p { font-size: .94rem; line-height: 1.55; color: var(--dim); flex: 1 1 auto; }

/* ----------------------------------------------------------- Vorteile */

.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.benefit h3 { font-size: 1.08rem; margin: 14px 0 8px; }
.benefit p { font-size: .95rem; color: var(--dim); }
.benefit .tile__icon { width: 48px; height: 48px; }

/* ------------------------------------------- Abschnitte mit Screenshot */

.story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(36px, 5vw, 56px) 0;
}
.story + .story { border-top: 1px solid var(--hairline); }
/* Jeder zweite Abschnitt spiegelt sich: Bild links, Text rechts. Die
   Reihenfolge im Markup bleibt Text zuerst, damit sie einspaltig stimmt. */
.story--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.story--flip .story__text { order: 2; }

.story__pkg {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  font: 600 .72rem/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.story__text h2, .story__text h3 {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  letter-spacing: -.025em;
  line-height: 1.2;
  margin-bottom: 14px;
  text-wrap: balance;
}
.story__text p { color: var(--muted); margin-bottom: 20px; max-width: 48ch; }

.story__points { list-style: none; display: grid; gap: 10px; }
.story__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .95rem;
  color: var(--body);
}
.story__points li::before {
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 3px;
  border-radius: var(--radius-full);
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19 7' fill='none' stroke='%230a74b0' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.story__shot {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #131c2a;
  box-shadow: var(--shadow-lift);
}
.story__shot img { width: 100%; height: auto; }

/* ------------------------------------------- Dunkle Baender mit Bild */

.feature {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(440px, 44vw, 600px);
  overflow: hidden;
  background: #070b13;
}
.feature__media {
  position: absolute;
  inset: 0;
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: 70% 50%;
  animation: omDrift 26s ease-in-out infinite alternate;
}
.feature--lumi .feature__media { background-image: url("/assets/images/landing/lumi.webp"); }
.feature--app .feature__media { background-image: url("/assets/images/landing/app.webp"); }
.feature--einkauf .feature__media { background-image: url("/assets/images/landing/einkauf.webp"); }
.feature__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 11, 19, .94), rgba(7, 11, 19, .72) 38%, rgba(7, 11, 19, 0) 64%);
}
.feature__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(64px, 9vw, 96px);
  padding-bottom: clamp(64px, 9vw, 96px);
}
.feature__text { max-width: 600px; }
.feature__text .eyebrow { margin-bottom: 16px; }
.feature__text h2 { margin-bottom: 16px; text-wrap: balance; }
.feature__text p { font-size: 1.08rem; color: var(--muted); max-width: 54ch; }
.feature__stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.feature__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; list-style: none; }
.feature__tags span, .feature__tags li {
  padding: 7px 13px;
  border: 1px solid var(--border-btn);
  border-radius: var(--radius-pill);
  font: 500 .8rem/1 var(--font);
  color: var(--body);
  background: rgba(7, 11, 19, .5);
}
.feature__note { margin-top: 20px; font-size: .9rem; color: var(--meta); max-width: 78ch; }

/* Beispielfrage an Lumi, tippt sich selbst (landing.js). */
.ask {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin-top: 28px;
  padding: 14px 18px;
  border: 1px solid rgba(77, 208, 255, .35);
  border-radius: var(--radius);
  background: rgba(10, 16, 27, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 4px rgba(77, 208, 255, .06), 0 20px 50px -20px rgba(77, 208, 255, .35);
  font: 500 .98rem/1.4 var(--font);
  color: var(--text);
}
.ask__icon { display: inline-flex; flex: 0 0 auto; color: var(--accent); animation: omGlow 2.4s ease-in-out infinite; }
.ask__text { min-width: 0; min-height: 1.4em; }
.ask__caret {
  flex: 0 0 auto;
  width: 2px;
  height: 1.15em;
  margin-left: -10px;
  background: var(--accent);
  animation: omBlink 1s steps(1) infinite;
}

/* --------------------------------------------------------- Drei Schritte */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 16px;
  counter-reset: step;
  list-style: none;
}
.step {
  position: relative;
  padding: 26px 24px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
}
.step__num {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin-bottom: 16px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { font-size: .95rem; color: var(--dim); }

/* --------------------------------------------------------------- Preise */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 16px;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
}
.plan__head { display: flex; align-items: center; gap: 12px; }
.plan__head .tile__icon { width: 40px; height: 40px; border-radius: 10px; }
.plan h3 { font-size: 1.1rem; }
.plan__price { font-size: 1.05rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.plan p { font-size: .92rem; line-height: 1.5; color: var(--dim); flex: 1 1 auto; }
.plan .mehr { margin-top: 4px; font-size: .86rem; }
.plan--core {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px 32px;
  align-items: center;
  border-color: rgba(10, 116, 176, .35);
  background: linear-gradient(180deg, var(--accent-soft), transparent 80%), var(--surface);
}
.plan--core .plan__price { color: #15803d; }
.plan__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; list-style: none; }
.plan__list li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; color: var(--body); }
.plan__list svg { color: #16a34a; flex: 0 0 auto; margin-top: 3px; }
.pakete__note {
  margin-top: 18px;
  font: 400 .88rem/1.6 var(--font);
  color: var(--meta);
  max-width: 80ch;
}

/* Treuhaender-Paket: nicht selbst buchbar, Freischaltung durch Omnia */
.treuhand-offer {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
  gap: 28px;
  padding: 28px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.treuhand-offer .h3 { margin: 8px 0 10px; color: var(--text); font-size: 1.3rem; line-height: 1.25; }
.treuhand-offer p { color: var(--muted); }
.treuhand-offer__price {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
  padding: 22px;
  border-radius: 12px;
  background: var(--surface-raised);
}
.treuhand-offer__amount { font-size: 1.8rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.treuhand-offer__unit { color: var(--muted); font-size: .9rem; }
.treuhand-offer__hint { color: var(--meta); font-size: .82rem; }

/* ---------------------------------------------------- Schweiz / Vertrauen */

.trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.trust__points { display: grid; gap: 18px; list-style: none; }
.trust__points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.trust__points strong { display: block; color: var(--text); margin-bottom: 2px; }
.trust__points span { color: var(--dim); font-size: .95rem; }
.partners { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin-top: 14px; }
.partners li {
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border-card);
  font-size: .9rem;
  font-weight: 500;
  color: var(--body);
}

/* ------------------------------------------------- Raster (Bereichsseiten) */

.hairgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hairgrid > * { box-shadow: inset -1px 0 0 var(--hairline), inset 0 -1px 0 var(--hairline); }
.hairgrid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.integration { padding: 24px 26px 26px; }
.integration__head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.integration__head svg { flex: 0 0 auto; stroke: var(--accent); }
.integration__head span { font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; color: var(--text); }
.integration p { font-size: .93rem; line-height: 1.6; color: var(--dim); }
.integration__meta {
  font: 600 .7rem/1.4 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 12px;
}

.umstieg__card { padding: 28px 28px 30px; }
.umstieg__num {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 16px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: .9rem;
}
.umstieg__card h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.umstieg__card p { font-size: .94rem; line-height: 1.6; color: var(--dim); }
.umstieg__note { margin-top: 20px; font-size: .9rem; color: var(--meta); max-width: 78ch; }

/* ----------------------------------------------------- Haeufige Fragen */

.faq { display: grid; gap: 10px; max-width: 880px; }
.section__intro--center + .faq { margin: 0 auto; }
.faq__item {
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .2s, box-shadow .2s;
}
.faq__item[open] { border-color: rgba(10, 116, 176, .35); box-shadow: var(--shadow-card); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 600;
  color: var(--text);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font: 400 1.5rem/1 var(--font);
  color: var(--accent);
  transition: transform .2s;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 22px 20px; color: var(--muted); }

/* --------------------------------------------------------------- Abschluss */

.testen {
  position: relative;
  padding: clamp(70px, 10vw, 104px) var(--gutter);
  text-align: center;
  overflow: hidden;
}
.testen__glow {
  position: absolute;
  inset: -30% 15%;
  background: radial-gradient(ellipse at 50% 60%, rgba(77, 208, 255, .2), transparent 62%);
}
.testen__inner { position: relative; }
.testen h2 { font-size: clamp(1.8rem, 5vw, 2.7rem); letter-spacing: -.035em; margin-bottom: 16px; text-wrap: balance; }
.testen p { color: var(--muted); max-width: 54ch; margin: 0 auto 32px; font-size: 1.08rem; }
.testen__actions { display: flex; flex-wrap: wrap; gap: 12px 14px; justify-content: center; }
.testen__actions .btn { padding: 16px 26px; }
.testen__small { margin-top: 18px !important; margin-bottom: 0 !important; font-size: .88rem !important; color: var(--meta) !important; }

/* ------------------------------------------------------------------ Footer */

.footer { background: var(--surface); border-top: 1px solid var(--hairline); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-top: clamp(44px, 6vw, 64px);
  padding-bottom: 36px;
}
.footer__brand img { height: 28px; width: auto; margin-bottom: 14px; }
.footer__brand p { font-size: .92rem; color: var(--dim); max-width: 34ch; margin-bottom: 18px; }
.footer__col h2 {
  font: 600 .74rem/1 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 14px;
}
.footer__col ul { list-style: none; display: grid; gap: 9px; }
.footer__col a { color: var(--body); font-size: .93rem; }
.footer__col a:hover, .footer__col a[aria-current="page"] { color: var(--accent); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 18px;
  padding-bottom: 26px;
  border-top: 1px solid var(--hairline);
  font-size: .84rem;
  color: var(--footer-fg);
}

/* -------------------------------------------------- Unterseiten (Recht) */

.subpage {
  padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 72px));
  padding-bottom: clamp(56px, 9vw, 96px);
}
.subpage__head { max-width: 78ch; margin-bottom: 36px; }
.subpage__head .eyebrow { margin-bottom: 14px; }
.subpage__head h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -.035em; margin-bottom: 14px; }
.subpage__head p { color: var(--muted); max-width: 62ch; }

.legal {
  max-width: 82ch;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: var(--shadow-card);
}
.legal__stand {
  font: 600 .7rem/1 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 26px;
}
.legal h2 { font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em; margin: 28px 0 10px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { font-size: .97rem; color: var(--body); }
.legal p + p { margin-top: 10px; }
.legal strong { color: var(--text); }

/* ------------------------------------------------------- Einblenden */

/* Nur mit JavaScript (Klasse im Kopf gesetzt): ohne bleibt alles sichtbar. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-group > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}
.js .reveal-group.is-in > * { opacity: 1; transform: none; }
.js .reveal-group.is-in > :nth-child(2) { transition-delay: .06s; }
.js .reveal-group.is-in > :nth-child(3) { transition-delay: .12s; }
.js .reveal-group.is-in > :nth-child(4) { transition-delay: .18s; }
.js .reveal-group.is-in > :nth-child(5) { transition-delay: .24s; }
.js .reveal-group.is-in > :nth-child(6) { transition-delay: .3s; }
.js .reveal-group.is-in > :nth-child(n+7) { transition-delay: .36s; }
/* Nach dem Einblenden reagieren Kacheln wieder sofort auf die Maus. */
.js .reveal-group.is-in > .tile:hover, .js .reveal-group.is-in > .persona:hover { transform: translateY(-3px); transition-delay: 0s; }

/* ------------------------------------------------------------- Responsive */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .nav__links, .nav__login { display: none; }
  .nav__burger { display: inline-flex; }
  .story, .story--flip { grid-template-columns: minmax(0, 1fr); }
  .story--flip .story__text { order: 0; }
  .trust { grid-template-columns: minmax(0, 1fr); }
  .plan--core { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* Schmal: Bild als Band unter dem Text. */
  .feature { align-items: flex-start; min-height: 0; }
  .feature__media { top: auto; height: 56vw; background-position: 78% center; }
  .feature__veil { background: linear-gradient(180deg, #070b13 calc(100% - 56vw), rgba(7, 11, 19, .1) calc(100% - 30vw), rgba(7, 11, 19, .3) 100%); }
  .feature__inner { padding-bottom: 48vw; }
  .treuhand-offer { grid-template-columns: 1fr; padding: 22px; }
  .plan__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .nav__cta-full { display: none; }
  .nav__cta-short { display: inline; }
  .hero__cta .btn, .testen__actions .btn { flex: 1 1 100%; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .tile, .step { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .feature__media, .ask__icon, .ask__caret { animation: none; }
  .js .reveal, .js .reveal-group > * { opacity: 1; transform: none; transition: none; }
  .tile, .persona, .btn { transition: none; }
}

.trust__title { margin: 14px 0; }
.trust__lead { font-size: clamp(1.02rem, 1.4vw, 1.12rem); color: var(--muted); }
.persona img { height: auto; }
.nav__logo img { height: 34px; }
.nav.is-scrolled .nav__logo img { height: 30px; }
.footer__brand img { height: 40px; }

/* Handy: Kacheln zweispaltig und knapp, sonst wird die Liste sehr lang. */
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 16px 14px; gap: 8px; }
  .tile__icon { width: 38px; height: 38px; }
  .tile h3 { font-size: .98rem; }
  .tile p { font-size: .84rem; }
  .tile__more { display: none; }
}

/* ------------------------------------------- Kopf aller Seiten (Foto) */

/* Ein Baustein fuer jede Seite ($omniaPageHero in landing.php): Text links, Foto rechts,
   schmal untereinander. Die Fotos teilen sich Licht und Farbe, damit alles aus einem Guss wirkt. */
.page-hero {
  background:
    radial-gradient(55% 70% at 100% 0%, rgba(77, 208, 255, .14), transparent 70%),
    radial-gradient(45% 60% at 0% 30%, rgba(10, 116, 176, .06), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding-top: calc(var(--nav-h) + clamp(32px, 6vw, 72px));
  padding-bottom: clamp(44px, 6vw, 80px);
}
.page-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  letter-spacing: -.04em;
  line-height: 1.08;
  margin-bottom: 18px;
  text-wrap: balance;
}
.page-hero h1 em { font-style: normal; color: var(--accent); }
.page-hero .hero__lead { margin-bottom: 26px; }
.page-hero .hero__cta { margin-bottom: 22px; }
.page-hero__img {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-raised);
  box-shadow: 0 2px 6px rgba(15, 35, 60, .06), 0 30px 60px -28px rgba(15, 35, 60, .35);
}
.page-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .rm-stats { margin-top: 18px; }

/* Unterseiten direkt nach dem Kopf: kein zweiter Abstand fuer die Kopfzeile. */
.subpage--nach-kopf { padding-top: clamp(36px, 5vw, 56px); }

/* «So sieht Omnia aus»: Screenshot im hellen Fensterrahmen */
.produkt { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(24px, 4vw, 40px); }
.produkt .hero__frame { margin: 0; }
.produkt__caption { margin-top: 12px; text-align: center; font-size: .88rem; color: var(--meta); }

/* Screenshots sind hell aufgenommen: Rahmen hell statt dunkel. */
.hero__frame {
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 35, 60, .06), 0 40px 80px -40px rgba(15, 35, 60, .4);
}
.hero__chrome { background: #f3f6fa; border-bottom: 1px solid var(--hairline); }
.hero__chrome i { background: #cfd8e3; }
.hero__chrome em { color: var(--meta); }
.story__shot { background: #fff; }

@media (max-width: 960px) {
  .page-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .page-hero__img { aspect-ratio: 16 / 10; }
}